Fix terminal command failures and app unselection issues

- Improve terminal command execution by using proper cwd parameter instead of cd commands
- Enhanced command routing to default to frontend terminal for simple commands
- Add better error logging for command failures
- Prevent automatic app unselection when chats are temporarily unavailable
- Keep selected app persistent during loading states and errors
- Add retry logic for git operations with timeouts
- Fix duplicate import in PreviewIframe component

Author: SFARPak

assets/icon/logo.gif

@@ -6,6 +6,7 @@ import {
 } from "@/atoms/appAtoms";
 import { useAtomValue, useSetAtom, useAtom } from "jotai";
 import { useEffect, useRef, useState } from "react";
+import { useRunApp } from "@/hooks/useRunApp";
 import {
   ArrowLeft,
   ArrowRight,
@@ -39,7 +40,6 @@ import {
   TooltipProvider,
   TooltipTrigger,
 } from "@/components/ui/tooltip";
-import { useRunApp } from "@/hooks/useRunApp";
 import { useShortcut } from "@/hooks/useShortcut";
 
 interface ErrorBannerProps {
@@ -135,7 +135,8 @@ export const PreviewIframe = ({ loading }: { loading: boolean }) => {
   const selectedChatId = useAtomValue(selectedChatIdAtom);
   const { streamMessage } = useStreamChat();
   const { routes: availableRoutes } = useParseRouter(selectedAppId);
-  const { restartApp } = useRunApp();
+  const { restartApp, loading: appLoading } = useRunApp();
+  const [loadingStartTime, setLoadingStartTime] = useState<number | null>(null);
 
   // Navigation state
   const [isComponentSelectorInitialized, setIsComponentSelectorInitialized] =
@@ -289,6 +290,31 @@ export const PreviewIframe = ({ loading }: { loading: boolean }) => {
     }
   }, [appUrl]);
 
+  // Track loading start time
+  useEffect(() => {
+    if (!appUrl && selectedAppId && !errorMessage) {
+      setLoadingStartTime(Date.now());
+    } else {
+      setLoadingStartTime(null);
+    }
+  }, [appUrl, selectedAppId, errorMessage]);
+
+  // Helper function to get loading message based on duration
+  const getLoadingMessage = () => {
+    if (!loadingStartTime) return "Starting your app server...";
+
+    const elapsed = Date.now() - loadingStartTime;
+    const seconds = Math.floor(elapsed / 1000);
+
+    if (seconds < 30) {
+      return "Starting your app server...";
+    } else if (seconds < 60) {
+      return "Starting your app server... (This is taking longer than usual)";
+    } else {
+      return "Starting your app server... (Taking longer than expected. Check the terminal for any errors)";
+    }
+  };
+
   // Function to activate component selector in the iframe
   const handleActivateComponentSelector = () => {
     if (iframeRef.current?.contentWindow) {
@@ -553,8 +579,8 @@ export const PreviewIframe = ({ loading }: { loading: boolean }) => {
         {!appUrl ? (
           <div className="absolute inset-0 flex flex-col items-center justify-center space-y-4 bg-gray-50 dark:bg-gray-950">
             <Loader2 className="w-8 h-8 animate-spin text-gray-400 dark:text-gray-500" />
-            <p className="text-gray-600 dark:text-gray-300">
-              Starting your app server...
+            <p className="text-gray-600 dark:text-gray-300 text-center max-w-xs">
+              {getLoadingMessage()}
             </p>
           </div>
         ) : (

src/components/preview_panel/PreviewIframe.tsx

@@ -1,4 +1,4 @@
-import { useCallback } from "react";
+import { useCallback, useEffect, useRef } from "react";
 import { atom } from "jotai";
 import { IpcClient } from "@/ipc/ipc_client";
 import {
@@ -23,6 +23,24 @@ export function useRunApp() {
   const setPreviewPanelKey = useSetAtom(previewPanelKeyAtom);
   const appId = useAtomValue(selectedAppIdAtom);
   const setPreviewErrorMessage = useSetAtom(previewErrorMessageAtom);
+  const startupTimeoutRef = useRef<NodeJS.Timeout | null>(null);
+
+  // Clear startup timeout when app URL is successfully set
+  const clearStartupTimeout = useCallback(() => {
+    if (startupTimeoutRef.current) {
+      clearTimeout(startupTimeoutRef.current);
+      startupTimeoutRef.current = null;
+    }
+  }, []);
+
+  // Set startup timeout to show error if app doesn't start within 2 minutes
+  const setStartupTimeout = useCallback((appId: number) => {
+    clearStartupTimeout(); // Clear any existing timeout
+    startupTimeoutRef.current = setTimeout(() => {
+      console.warn(`[useRunApp] App ${appId} startup timeout - no URL detected within 2 minutes`);
+      setPreviewErrorMessage("App startup timed out. The server may have failed to start. Check the terminal output for errors.");
+    }, 2 * 60 * 1000); // 2 minutes
+  }, [clearStartupTimeout, setPreviewErrorMessage]);
 
   const processProxyServerOutput = (output: AppOutput) => {
     const matchesProxyServerStart = output.message.includes(
@@ -38,13 +56,38 @@ export function useRunApp() {
       if (proxyUrlMatch && proxyUrlMatch[1]) {
         const proxyUrl = proxyUrlMatch[1];
         const originalUrl = originalUrlMatch && originalUrlMatch[1];
+        console.log(`[useRunApp] Setting app URL: proxy=${proxyUrl}, original=${originalUrl}, appId=${output.appId}`);
+        clearStartupTimeout();
         setAppUrlObj({
           appUrl: proxyUrl,
           appId: output.appId,
           originalUrl: originalUrl!,
         });
       }
     }
+
+    // Also check for server startup messages that might indicate the app is ready
+    // This handles cases where the proxy server message format might be different
+    const serverReadyPatterns = [
+      /Local:\s+(http:\/\/localhost:\d+)/i,
+      /Server running at (http:\/\/localhost:\d+)/i,
+      /App is running on (http:\/\/localhost:\d+)/i,
+      /Development server started.*(http:\/\/\S+)/i,
+    ];
+
+    for (const pattern of serverReadyPatterns) {
+      const match = output.message.match(pattern);
+      if (match && match[1]) {
+        console.log(`[useRunApp] Detected server ready from pattern: ${pattern}, URL: ${match[1]}`);
+        clearStartupTimeout();
+        setAppUrlObj({
+          appUrl: match[1],
+          appId: output.appId,
+          originalUrl: match[1],
+        });
+        break;
+      }
+    }
   };
 
   const processAppOutput = useCallback(
@@ -76,6 +119,8 @@ export function useRunApp() {
   const runApp = useCallback(
     async (appId: number) => {
       setLoading(true);
+      clearStartupTimeout(); // Clear any existing timeout
+      setStartupTimeout(appId); // Set new timeout for this app startup
       try {
         const ipcClient = IpcClient.getInstance();
         console.debug("Running app", appId);
@@ -103,14 +148,15 @@ export function useRunApp() {
         setPreviewErrorMessage(undefined);
       } catch (error) {
         console.error(`Error running app ${appId}:`, error);
+        clearStartupTimeout(); // Clear timeout on error
         setPreviewErrorMessage(
           error instanceof Error ? error.message : error?.toString(),
         );
       } finally {
         setLoading(false);
       }
     },
-    [processAppOutput],
+    [processAppOutput, clearStartupTimeout, setStartupTimeout],
   );
 
   const stopApp = useCallback(async (appId: number) => {
@@ -149,6 +195,8 @@ export function useRunApp() {
         return;
       }
       setLoading(true);
+      clearStartupTimeout(); // Clear any existing timeout
+      setStartupTimeout(appId); // Set new timeout for this app restart
       try {
         const ipcClient = IpcClient.getInstance();
         console.debug(
@@ -188,6 +236,7 @@ export function useRunApp() {
         );
       } catch (error) {
         console.error(`Error restarting app ${appId}:`, error);
+        clearStartupTimeout(); // Clear timeout on error
         setPreviewErrorMessage(
           error instanceof Error ? error.message : error?.toString(),
         );
@@ -204,13 +253,22 @@ export function useRunApp() {
       setPreviewPanelKey,
       processAppOutput,
       onHotModuleReload,
+      clearStartupTimeout,
+      setStartupTimeout,
     ],
   );
 
   const refreshAppIframe = useCallback(async () => {
     setPreviewPanelKey((prevKey) => prevKey + 1);
   }, [setPreviewPanelKey]);
 
+  // Cleanup timeout on unmount or appId change
+  useEffect(() => {
+    return () => {
+      clearStartupTimeout();
+    };
+  }, [clearStartupTimeout]);
+
   return {
     loading,
     runApp,

src/hooks/useRunApp.ts

@@ -19,25 +19,38 @@ import { isServerFunction } from "../../supabase_admin/supabase_utils";
 import { UserSettings } from "../../lib/schemas";
 import { gitCommit } from "../utils/git_utils";
 
-// Helper function to handle git operations with timeout
+// Helper function to handle git operations with timeout and retry
 function createSafeGitOperation(warnings: Output[], errors: Output[]) {
   return async function safeGitOperation(operation: () => Promise<any>, operationName: string, filePath?: string): Promise<any> {
-    try {
-      // Set a timeout for git operations (30 seconds)
-      const timeoutPromise = new Promise((_, reject) => {
-        setTimeout(() => reject(new Error(`${operationName} timed out after 30 seconds`)), 30000);
-      });
+    const maxRetries = 3;
+    const retryDelay = 1000; // 1 second
 
-      const result = await Promise.race([operation(), timeoutPromise]);
-      return result;
-    } catch (error) {
-      const errorMessage = `${operationName} failed${filePath ? ` for ${filePath}` : ''}: ${error}`;
-      logger.warn(errorMessage);
-      warnings.push({
-        message: errorMessage,
-        error: error,
-      });
-      return null;
+    for (let attempt = 1; attempt <= maxRetries; attempt++) {
+      try {
+        // Set a timeout for git operations (30 seconds)
+        const timeoutPromise = new Promise((_, reject) => {
+          setTimeout(() => reject(new Error(`${operationName} timed out after 30 seconds`)), 30000);
+        });
+
+        const result = await Promise.race([operation(), timeoutPromise]);
+        return result;
+      } catch (error) {
+        const errorMessage = `${operationName} failed${filePath ? ` for ${filePath}` : ''}: ${error}`;
+
+        // If this is the last attempt, add to warnings/errors and return null
+        if (attempt === maxRetries) {
+          logger.warn(`${errorMessage} (after ${maxRetries} attempts)`);
+          warnings.push({
+            message: `${errorMessage} (after ${maxRetries} attempts)`,
+            error: error,
+          });
+          return null;
+        }
+
+        // Otherwise, log the retry attempt and wait before retrying
+        logger.warn(`${errorMessage} - Retrying attempt ${attempt + 1}/${maxRetries} in ${retryDelay}ms`);
+        await new Promise(resolve => setTimeout(resolve, retryDelay));
+      }
     }
   };
 }
@@ -235,7 +248,7 @@ export async function processFullResponseActions(
           // We need to import and use the backendTerminalOutputAtom
           // For now, we'll use a more direct approach by sending IPC messages to update the UI
 
-          const result = await runShellCommand(`cd "${cwd}" && ${cmdTag.command}`);
+          const result = await runShellCommand(cmdTag.command, cwd);
 
           if (result === null) {
             errors.push({
@@ -277,7 +290,7 @@ export async function processFullResponseActions(
 
           logger.log(`Executing frontend terminal command: ${cmdTag.command} in ${cwd}`);
 
-          const result = await runShellCommand(`cd "${cwd}" && ${cmdTag.command}`);
+          const result = await runShellCommand(cmdTag.command, cwd);
 
           if (result === null) {
             errors.push({
@@ -343,7 +356,7 @@ export async function processFullResponseActions(
 
          try {
            // Determine which terminal to route to based on command content and chat mode
-           let terminalType: "frontend" | "backend" = "backend"; // default
+           let terminalType: "frontend" | "backend" = "frontend"; // default to frontend for simple commands
            let cwd = cmdTag.cwd ? path.join(appPath, cmdTag.cwd) : appPath;
 
            // Enhanced command detection with better patterns
@@ -429,7 +442,7 @@ export async function processFullResponseActions(
 
            logger.log(`Executing general terminal command: ${cleanCommand} in ${cwd} (routing to ${terminalType} terminal) - isPython: ${isPythonCommand}, isNode: ${isNodeCommand}`);
 
-           const result = await runShellCommand(`cd "${cwd}" && ${cleanCommand}`);
+           const result = await runShellCommand(cleanCommand, cwd);
 
            if (result === null) {
              errors.push({

src/ipc/processors/response_processor.ts

@@ -3,20 +3,23 @@ import log from "electron-log";
 
 const logger = log.scope("runShellCommand");
 
-export function runShellCommand(command: string): Promise<string | null> {
-  logger.log(`Running command: ${command}`);
+export function runShellCommand(command: string, cwd?: string): Promise<string | null> {
+  logger.log(`Running command: ${command}${cwd ? ` in ${cwd}` : ''}`);
   return new Promise((resolve) => {
     let output = "";
+    let stderrOutput = "";
     const process = spawn(command, {
       shell: true,
       stdio: ["ignore", "pipe", "pipe"], // ignore stdin, pipe stdout/stderr
+      cwd: cwd, // Set working directory if provided
     });
 
     process.stdout?.on("data", (data) => {
       output += data.toString();
     });
 
     process.stderr?.on("data", (data) => {
+      stderrOutput += data.toString();
       // Log stderr but don't treat it as a failure unless the exit code is non-zero
       logger.warn(`Stderr from "${command}": ${data.toString().trim()}`);
     });
@@ -33,7 +36,7 @@ export function runShellCommand(command: string): Promise<string | null> {
         );
         resolve(output.trim()); // Command succeeded, return trimmed output
       } else {
-        logger.error(`Command "${command}" failed with code ${code}`);
+        logger.error(`Command "${command}" failed with code ${code}. Stderr: ${stderrOutput.trim()}`);
         resolve(null); // Command failed
       }
     });

src/ipc/utils/runShellCommand.ts

@@ -27,10 +27,17 @@ export default function ChatPage() {
     if (!chatId && chats.length && !loading) {
       // Not a real navigation, just a redirect, when the user navigates to /chat
       // without a chatId, we redirect to the first chat
-      setSelectedAppId(chats[0].appId);
+      // Only set the app if we don't already have one selected (to prevent clearing)
+      if (!selectedAppId) {
+        setSelectedAppId(chats[0].appId);
+      }
       navigate({ to: "/chat", search: { id: chats[0].id }, replace: true });
+    } else if (!chatId && !chats.length && !loading && selectedAppId) {
+      // If we have a selected app but no chats for it, don't clear the selection
+      // This prevents the app from being unselected when there are temporary issues
+      console.log(`Keeping selected app ${selectedAppId} even though no chats found`);
     }
-  }, [chatId, chats, loading, navigate]);
+  }, [chatId, chats, loading, navigate, selectedAppId, setSelectedAppId]);
 
   useEffect(() => {
     if (isPreviewOpen) {