basic suggested action scaffolding

src/atoms/appAtoms.ts

@@ -17,3 +17,5 @@ export const userSettingsAtom = atom<UserSettings | null>(null);
 
 // Atom for storing allow-listed environment variables
 export const envVarsAtom = atom<Record<string, string | undefined>>({});
+
+export const previewPanelKeyAtom = atom<number>(0);

src/atoms/proposalAtoms.ts

@@ -1,4 +1,4 @@
 import { atom } from "jotai";
-import type { Proposal, ProposalResult } from "@/lib/schemas";
+import type { CodeProposal, ProposalResult } from "@/lib/schemas";
 
 export const proposalResultAtom = atom<ProposalResult | null>(null);

src/components/chat/ChatInput.tsx

@@ -25,17 +25,16 @@ import { Button } from "@/components/ui/button";
 import { Label } from "@/components/ui/label";
 import { Switch } from "@/components/ui/switch";
 import { useProposal } from "@/hooks/useProposal";
-import { Proposal } from "@/lib/schemas";
+import {
+  CodeProposal,
+  ActionProposal,
+  Proposal,
+  SuggestedAction,
+  ProposalResult,
+} from "@/lib/schemas";
 import type { Message } from "@/ipc/ipc_types";
 import { isPreviewOpenAtom } from "@/atoms/viewAtoms";
-interface ChatInputActionsProps {
+import { useRunApp } from "@/hooks/useRunApp";
-  proposal: Proposal;
-  onApprove: () => void;
-  onReject: () => void;
-  isApprovable: boolean; // Can be used to enable/disable buttons
-  isApproving: boolean; // State for approving
-  isRejecting: boolean; // State for rejecting
-}
 
 export function ChatInput({ chatId }: { chatId?: number }) {
   const [inputValue, setInputValue] = useAtom(chatInputValueAtom);
@@ -52,12 +51,12 @@ export function ChatInput({ chatId }: { chatId?: number }) {
 
   // Use the hook to fetch the proposal
   const {
-    proposal,
+    proposalResult,
-    messageId,
     isLoading: isProposalLoading,
     error: proposalError,
     refreshProposal,
   } = useProposal(chatId);
+  const { proposal, chatId: proposalChatId, messageId } = proposalResult ?? {};
 
   const adjustHeight = () => {
     const textarea = textareaRef.current;
@@ -205,9 +204,9 @@ export function ChatInput({ chatId }: { chatId?: number }) {
         </div>
       )}
       <div className="p-4">
-        <div className="flex flex-col space-y-2 border border-border rounded-lg bg-(--background-lighter) shadow-sm">
+        <div className="flex flex-col border border-border rounded-lg bg-(--background-lighter) shadow-sm">
           {/* Only render ChatInputActions if proposal is loaded */}
-          {proposal && (
+          {proposal && proposalResult?.chatId === chatId && (
             <ChatInputActions
               proposal={proposal}
               onApprove={handleApprove}
@@ -267,6 +266,47 @@ export function ChatInput({ chatId }: { chatId?: number }) {
   );
 }
 
+function mapActionToButton(action: SuggestedAction) {
+  const { restartApp } = useRunApp();
+  switch (action.id) {
+    case "restart-app":
+      return (
+        <Button
+          variant="outline"
+          size="sm"
+          key={action.id}
+          onClick={restartApp}
+        >
+          Restart App
+        </Button>
+      );
+    default:
+      console.error(`Unsupported action: ${action.id}`);
+      return (
+        <Button variant="outline" size="sm" disabled key={action.id}>
+          Unsupported: {action.id}
+        </Button>
+      );
+  }
+}
+
+function ActionProposalActions({ proposal }: { proposal: ActionProposal }) {
+  return (
+    <div className="p-2 pb-0">
+      {proposal.actions.map((action) => mapActionToButton(action))}
+    </div>
+  );
+}
+
+interface ChatInputActionsProps {
+  proposal: Proposal;
+  onApprove: () => void;
+  onReject: () => void;
+  isApprovable: boolean; // Can be used to enable/disable buttons
+  isApproving: boolean; // State for approving
+  isRejecting: boolean; // State for rejecting
+}
+
 // Update ChatInputActions to accept props
 function ChatInputActions({
   proposal,
@@ -279,6 +319,9 @@ function ChatInputActions({
   const [autoApprove, setAutoApprove] = useState(false);
   const [isDetailsVisible, setIsDetailsVisible] = useState(false);
 
+  if (proposal.type === "action-proposal") {
+    return <ActionProposalActions proposal={proposal}></ActionProposalActions>;
+  }
   return (
     <div className="border-b border-border">
       <div className="p-2">

src/components/preview_panel/PreviewPanel.tsx

@@ -1,5 +1,9 @@
 import { useAtom, useAtomValue } from "jotai";
-import { previewModeAtom, selectedAppIdAtom } from "../../atoms/appAtoms";
+import {
+  previewModeAtom,
+  previewPanelKeyAtom,
+  selectedAppIdAtom,
+} from "../../atoms/appAtoms";
 import { useLoadApp } from "@/hooks/useLoadApp";
 import { CodeView } from "./CodeView";
 import { PreviewIframe } from "./PreviewIframe";
@@ -99,14 +103,11 @@ export function PreviewPanel() {
   const [isConsoleOpen, setIsConsoleOpen] = useState(false);
   const { runApp, stopApp, restartApp, error, loading, app } = useRunApp();
   const runningAppIdRef = useRef<number | null>(null);
-  const [key, setKey] = useState(0);
+  const key = useAtomValue(previewPanelKeyAtom);
 
   const handleRestart = useCallback(() => {
-    if (selectedAppId !== null) {
+    restartApp();
-      restartApp(selectedAppId);
+  }, [restartApp]);
-      setKey((prevKey) => prevKey + 1);
-    }
-  }, [selectedAppId, restartApp]);
 
   useEffect(() => {
     const previousAppId = runningAppIdRef.current;

src/hooks/useProposal.ts

@@ -1,6 +1,6 @@
 import { useState, useEffect, useCallback } from "react";
 import { IpcClient } from "@/ipc/ipc_client";
-import type { Proposal, ProposalResult } from "@/lib/schemas"; // Import Proposal type
+import type { CodeProposal, ProposalResult } from "@/lib/schemas"; // Import Proposal type
 import { proposalResultAtom } from "@/atoms/proposalAtoms";
 import { useAtom } from "jotai";
 export function useProposal(chatId?: number | undefined) {
@@ -8,10 +8,7 @@ export function useProposal(chatId?: number | undefined) {
   const [isLoading, setIsLoading] = useState<boolean>(false);
   const [error, setError] = useState<string | null>(null);
 
-  const fetchProposal = useCallback(
+  const fetchProposal = useCallback(async () => {
-    async (innerChatId?: number) => {
-      chatId = chatId ?? innerChatId;
-      console.log("fetching proposal for chatId", chatId);
     if (chatId === undefined) {
       setProposalResult(null);
       setIsLoading(false);
@@ -39,9 +36,7 @@ export function useProposal(chatId?: number | undefined) {
     } finally {
       setIsLoading(false);
     }
-    },
+  }, [chatId]); // Depend on chatId
-    [chatId]
-  ); // Depend on chatId
 
   useEffect(() => {
     fetchProposal();
@@ -52,18 +47,10 @@ export function useProposal(chatId?: number | undefined) {
     // };
   }, [fetchProposal]); // Re-run effect if fetchProposal changes (due to chatId change)
 
-  const refreshProposal = useCallback(
-    (chatId?: number) => {
-      fetchProposal(chatId);
-    },
-    [fetchProposal]
-  );
-
   return {
-    proposal: proposalResult?.proposal ?? null,
+    proposalResult: proposalResult,
-    messageId: proposalResult?.messageId,
     isLoading,
     error,
-    refreshProposal, // Expose the refresh function
+    refreshProposal: fetchProposal, // Expose the refresh function
   };
 }

src/hooks/useRunApp.ts

@@ -1,7 +1,13 @@
 import { useState, useCallback } from "react";
 import { IpcClient } from "@/ipc/ipc_client";
-import { appOutputAtom, appUrlAtom, currentAppAtom } from "@/atoms/appAtoms";
+import {
-import { useAtom, useSetAtom } from "jotai";
+  appOutputAtom,
+  appUrlAtom,
+  currentAppAtom,
+  previewPanelKeyAtom,
+  selectedAppIdAtom,
+} from "@/atoms/appAtoms";
+import { useAtom, useAtomValue, useSetAtom } from "jotai";
 import { App } from "@/ipc/ipc_types";
 
 export function useRunApp() {
@@ -10,7 +16,8 @@ export function useRunApp() {
   const [app, setApp] = useAtom(currentAppAtom);
   const setAppOutput = useSetAtom(appOutputAtom);
   const [appUrlObj, setAppUrlObj] = useAtom(appUrlAtom);
-
+  const setPreviewPanelKey = useSetAtom(previewPanelKeyAtom);
+  const appId = useAtomValue(selectedAppIdAtom);
   const runApp = useCallback(async (appId: number) => {
     setLoading(true);
     try {
@@ -63,7 +70,10 @@ export function useRunApp() {
     }
   }, []);
 
-  const restartApp = useCallback(async (appId: number) => {
+  const restartApp = useCallback(async () => {
+    if (appId === null) {
+      return;
+    }
     setLoading(true);
     try {
       const ipcClient = IpcClient.getInstance();
@@ -91,6 +101,7 @@ export function useRunApp() {
       console.error(`Error restarting app ${appId}:`, error);
       setError(error instanceof Error ? error : new Error(String(error)));
     } finally {
+      setPreviewPanelKey((prevKey) => prevKey + 1);
       setLoading(false);
     }
   }, []);

src/hooks/useStreamChat.ts

@@ -16,6 +16,7 @@ import { selectedAppIdAtom } from "@/atoms/appAtoms";
 import { useLoadVersions } from "./useLoadVersions";
 import { showError } from "@/lib/toast";
 import { useProposal } from "./useProposal";
+import { useSearch } from "@tanstack/react-router";
 
 export function getRandomString() {
   return Math.random().toString(36).substring(2, 15);
@@ -31,7 +32,8 @@ export function useStreamChat() {
   const { refreshApp } = useLoadApp(selectedAppId);
   const setStreamCount = useSetAtom(chatStreamCountAtom);
   const { refreshVersions } = useLoadVersions(selectedAppId);
-  const { refreshProposal } = useProposal();
+  const { id: chatId } = useSearch({ from: "/chat" });
+  const { refreshProposal } = useProposal(chatId);
   const streamMessage = useCallback(
     async ({
       prompt,
@@ -91,7 +93,7 @@ export function useStreamChat() {
             if (response.updatedFiles) {
               setIsPreviewOpen(true);
             }
-            refreshProposal(chatId);
+            refreshProposal();
 
             // Keep the same as below
             setIsStreaming(false);

src/ipc/handlers/proposal_handlers.ts

@@ -1,5 +1,5 @@
 import { ipcMain, type IpcMainInvokeEvent } from "electron";
-import type { Proposal } from "@/lib/schemas";
+import type { CodeProposal, ProposalResult } from "@/lib/schemas";
 import { db } from "../../db";
 import { messages } from "../../db/schema";
 import { desc, eq, and, Update } from "drizzle-orm";
@@ -19,13 +19,6 @@ interface ParsedProposal {
   title: string;
   files: string[];
 }
-
-// Define return type for getProposalHandler
-interface ProposalResult {
-  proposal: Proposal;
-  messageId: number;
-}
-
 function isParsedProposal(obj: any): obj is ParsedProposal {
   return (
     obj &&
@@ -54,12 +47,23 @@ const getProposalHandler = async (
       },
     });
 
-    if (
+    if (latestAssistantMessage?.approvalState === "rejected") {
-      latestAssistantMessage?.approvalState === "approved" ||
-      latestAssistantMessage?.approvalState === "rejected"
-    ) {
       return null;
     }
+    if (latestAssistantMessage?.approvalState === "approved") {
+      return {
+        proposal: {
+          type: "action-proposal",
+          actions: [
+            {
+              id: "restart-app",
+            },
+          ],
+        },
+        chatId: chatId,
+        messageId: latestAssistantMessage.id,
+      };
+    }
 
     if (latestAssistantMessage?.content && latestAssistantMessage.id) {
       const messageId = latestAssistantMessage.id; // Get the message ID
@@ -74,7 +78,8 @@ const getProposalHandler = async (
 
       // Check if we have enough information to create a proposal
       if (proposalTitle || proposalFiles.length > 0) {
-        const proposal: Proposal = {
+        const proposal: CodeProposal = {
+          type: "code-proposal",
           // Use parsed title or a default title if summary tag is missing but write tags exist
           title: proposalTitle ?? "Proposed File Changes",
           securityRisks: [], // Keep empty
@@ -85,7 +90,7 @@ const getProposalHandler = async (
           })),
         };
         console.log("Generated proposal on the fly:", proposal);
-        return { proposal, messageId }; // Return proposal and messageId
+        return { proposal, chatId, messageId }; // Return proposal and messageId
       } else {
         console.log(
           "No relevant tags found in the latest assistant message content."

src/ipc/ipc_client.ts

@@ -17,7 +17,7 @@ import type {
   Message,
   Version,
 } from "./ipc_types";
-import type { Proposal, ProposalResult } from "@/lib/schemas";
+import type { CodeProposal, ProposalResult } from "@/lib/schemas";
 import { showError } from "@/lib/toast";
 
 export interface ChatStreamCallbacks {

src/lib/schemas.ts

@@ -111,14 +111,26 @@ export interface FileChange {
   summary: string;
 }
 
-// New Proposal interface
+export interface CodeProposal {
-export interface Proposal {
+  type: "code-proposal";
   title: string;
   securityRisks: SecurityRisk[];
   filesChanged: FileChange[];
 }
 
+export interface SuggestedAction {
+  id: "restart-app";
+}
+
+export interface ActionProposal {
+  type: "action-proposal";
+  actions: SuggestedAction[];
+}
+
+export type Proposal = CodeProposal | ActionProposal;
+
 export interface ProposalResult {
   proposal: Proposal;
+  chatId: number;
   messageId: number;
 }