Responsive chat column

Author: SFARPak

Roo-Code/src/integrations/terminal/ExecaTerminalProcess.ts

@@ -1,9 +1,12 @@
 import { execa, ExecaError } from "execa"
 import psTree from "ps-tree"
 import process from "process"
+import os from "os"
+import fs from "fs/promises"
 
 import type { RooTerminal } from "./types"
 import { BaseTerminalProcess } from "./BaseTerminalProcess"
+import { createAndExecuteScript, getShell } from "../../utils/shell"
 
 export class ExecaTerminalProcess extends BaseTerminalProcess {
 	private terminalRef: WeakRef<RooTerminal>
@@ -35,6 +38,27 @@ export class ExecaTerminalProcess extends BaseTerminalProcess {
 	public override async run(command: string) {
 		this.command = command
 
+		let commandToExecute = command
+		let scriptPath: string | undefined
+
+		// Detect complex commands that might need a script file
+		const shellOperators = ["&&", "||", ";", "source ", "`", "$("]
+		const needsScript = shellOperators.some((op) => command.includes(op))
+
+		if (needsScript) {
+			try {
+				scriptPath = await createAndExecuteScript(command, this.terminal.getCurrentWorkingDirectory())
+				commandToExecute = `${getShell()} ${scriptPath}` // Execute the script using the detected shell
+				console.log(`[ExecaTerminalProcess#run] Executing complex command via script: ${scriptPath}`)
+			} catch (error) {
+				console.error(`[ExecaTerminalProcess#run] Failed to create and execute script: ${error}`)
+				this.emit("shell_execution_complete", { exitCode: 1 })
+				this.emit("completed", this.fullOutput)
+				this.emit("continue")
+				return
+			}
+		}
+
 		try {
 			this.isHot = true
 
@@ -48,7 +72,7 @@ export class ExecaTerminalProcess extends BaseTerminalProcess {
 					LANG: "en_US.UTF-8",
 					LC_ALL: "en_US.UTF-8",
 				},
-			})`${command}`
+			})`${commandToExecute}`
 
 			this.pid = this.subprocess.pid
 
@@ -148,6 +172,16 @@ export class ExecaTerminalProcess extends BaseTerminalProcess {
 		this.emit("completed", this.fullOutput)
 		this.emit("continue")
 		this.subprocess = undefined
+
+		// Clean up the temporary script file if it was created
+		if (scriptPath) {
+			try {
+				await fs.unlink(scriptPath)
+				console.log(`[ExecaTerminalProcess#run] Cleaned up temporary script: ${scriptPath}`)
+			} catch (cleanupError) {
+				console.warn(`[ExecaTerminalProcess#run] Failed to clean up temporary script ${scriptPath}: ${cleanupError}`)
+			}
+		}
 	}
 
 	public override continue() {

Roo-Code/src/utils/shell.ts

@@ -368,3 +368,26 @@ export function getShell(): string {
 
 	return shell
 }
+
+/**
+	* Executes a complex multi-line command by writing it to a temporary script file
+	* and then executing the script. This is useful for commands that contain shell
+	* operators like '&&', '||', ';', or 'source', which might not be handled
+	* correctly when passed directly to execa with `shell: true` on all platforms.
+	*
+	* @param command The multi-line command string to execute.
+	* @param cwd The current working directory for the command.
+	* @returns The path to the temporary script file.
+	*/
+export async function createAndExecuteScript(command: string, cwd: string): Promise<string> {
+	const tempDir = path.join(os.tmpdir(), "roo-code-scripts")
+	await fs.mkdir(tempDir, { recursive: true })
+
+	const scriptFileName = `command-${Date.now()}.sh`
+	const scriptPath = path.join(tempDir, scriptFileName)
+
+	// Write the command to the temporary script file
+	await fs.writeFile(scriptPath, command, { mode: 0o755 }) // Make it executable
+
+	return scriptPath
+}

src/components/ChatPanel.tsx

@@ -184,7 +184,7 @@ export function ChatPanel({
   // Default frontend mode
   return (
     <div className="flex h-full">
-      <div className="flex flex-col flex-1">
+      <div className="flex flex-col flex-1 min-w-0" style={{ minWidth: '300px' }}>
         <ChatHeader
           isVersionPaneOpen={isVersionPaneOpen}
           isPreviewOpen={isPreviewOpen}
@@ -196,7 +196,7 @@ export function ChatPanel({
         />
         <div className="flex flex-1 overflow-hidden">
           {!isVersionPaneOpen && (
-            <div className="flex-1 flex flex-col min-w-0">
+            <div className={`${(isFullstackMode || isFrontendMode) && isTodoPanelOpen ? 'min-w-0' : 'flex-1'} flex flex-col min-w-0`}>
               <MessagesList
                 messages={messages}
                 messagesEndRef={messagesEndRef}
@@ -212,7 +212,7 @@ export function ChatPanel({
           />
         </div>
       </div>
-      {(isFullstackMode || isFrontendMode) && (
+      {(isFullstackMode || isFrontendMode) && isTodoPanelOpen && (
         <TodoListPanel
           isOpen={isTodoPanelOpen}
           onClose={() => setIsTodoPanelOpen(false)}

src/components/TodoListPanel.tsx

@@ -138,7 +138,7 @@ export function TodoListPanel({ isOpen, onClose }: TodoListPanelProps) {
   if (!isOpen) return null;
 
   return (
-    <div className="w-80 h-full bg-background border-l border-border flex flex-col flex-shrink-0">
+    <div className="w-64 sm:w-72 md:w-80 lg:w-96 h-full bg-background border-l border-border flex flex-col flex-shrink-0">
       <div className="p-4 border-b border-border">
         <div className="flex items-center justify-between mb-4">
           <h2 className="text-lg font-semibold">Todo List</h2>

src/ipc/handlers/app_handlers.ts

@@ -12,6 +12,7 @@ import type {
 } from "../ipc_types";
 import fs from "node:fs";
 import path from "node:path";
+import os from "node:os";
 import { getDyadAppPath, getUserDataPath } from "../../paths/paths";
 import { ChildProcess, spawn, execSync } from "node:child_process";
 import git from "isomorphic-git";
@@ -398,6 +399,88 @@ python app.py
   }
 }
 
+/**
+ * Execute a command, using a temporary script file for complex commands with shell operators.
+ * This allows handling of multi-line commands, pipes, conditionals, and other shell features.
+ */
+async function executeComplexCommand(
+  command: string,
+  workingDir: string,
+  env: NodeJS.ProcessEnv
+): Promise<ChildProcess> {
+  // Check if the command contains shell operators that require script execution
+  const hasShellOperators = /(&&|\|\||source|\||;|\$\(|`.*`)/.test(command);
+
+  if (!hasShellOperators) {
+    // For simple commands, use spawn directly
+    logger.debug(`Using spawn for simple command: ${command}`);
+    return spawn(command, [], {
+      cwd: workingDir,
+      shell: true,
+      stdio: "pipe",
+      detached: false,
+      env,
+    });
+  }
+
+  // For complex commands, create a temporary script file
+  logger.debug(`Using script file for complex command: ${command}`);
+
+  try {
+    // Create temporary script file
+    const tempDir = os.tmpdir();
+    const scriptName = `dyad-script-${Date.now()}-${Math.random().toString(36).substr(2, 9)}.sh`;
+    const scriptPath = path.join(tempDir, scriptName);
+
+    // Write the command to the script file
+    const scriptContent = `#!/bin/bash
+# Temporary script generated by AliFullStack
+cd "${workingDir}"
+${command}
+`;
+
+    await fsPromises.writeFile(scriptPath, scriptContent, 'utf-8');
+
+    // Make the script executable
+    await fsPromises.chmod(scriptPath, 0o755);
+
+    logger.debug(`Created temporary script: ${scriptPath}`);
+
+    // Execute the script
+    const process = spawn(scriptPath, [], {
+      cwd: workingDir,
+      shell: true,
+      stdio: "pipe",
+      detached: false,
+      env,
+    });
+
+    // Clean up the script file after the process exits
+    process.on('exit', async (code, signal) => {
+      try {
+        await fsPromises.unlink(scriptPath);
+        logger.debug(`Cleaned up temporary script: ${scriptPath}`);
+      } catch (cleanupError) {
+        logger.warn(`Failed to clean up temporary script ${scriptPath}:`, cleanupError);
+      }
+    });
+
+    process.on('error', async (error) => {
+      try {
+        await fsPromises.unlink(scriptPath);
+        logger.debug(`Cleaned up temporary script after error: ${scriptPath}`);
+      } catch (cleanupError) {
+        logger.warn(`Failed to clean up temporary script ${scriptPath}:`, cleanupError);
+      }
+    });
+
+    return process;
+  } catch (error) {
+    logger.error(`Failed to create temporary script for complex command:`, error);
+    throw error;
+  }
+}
+
 async function executeAppLocalNode({
   appPath,
   appId,
@@ -677,13 +760,17 @@ async function executeAppLocalNode({
 
       logger.info(`Final backend command: ${backendCommand}`);
 
-      const backendProcess = spawn(backendCommand, [], {
-        cwd: backendPath,
-        shell: true,
-        stdio: "pipe",
-        detached: false,
-        env: getShellEnv(),
-      });
+      // Check if the command contains shell operators that require script execution
+      const hasShellOperators = /(&&|\|\||source|\||;|\$\(|`.*`)/.test(backendCommand);
+      const backendProcess = hasShellOperators
+        ? await executeComplexCommand(backendCommand, backendPath, getShellEnv())
+        : spawn(backendCommand, [], {
+            cwd: backendPath,
+            shell: true,
+            stdio: "pipe",
+            detached: false,
+            env: getShellEnv(),
+          });
 
       if (backendProcess.pid) {
         const backendProcessId = processCounter.increment();
@@ -710,7 +797,7 @@ async function executeAppLocalNode({
         });
 
         // Also send backend startup logs to system messages for visibility
-        backendProcess.stdout?.on("data", (data) => {
+        backendProcess.stdout?.on("data", (data: Buffer) => {
           const message = util.stripVTControlCharacters(data.toString());
           safeSend(event.sender, "app:output", {
             type: "stdout",
@@ -719,7 +806,7 @@ async function executeAppLocalNode({
           });
         });
 
-        backendProcess.stderr?.on("data", (data) => {
+        backendProcess.stderr?.on("data", (data: Buffer) => {
           const message = util.stripVTControlCharacters(data.toString());
           safeSend(event.sender, "app:output", {
             type: "stderr",
@@ -778,7 +865,7 @@ async function executeAppLocalNode({
         });
 
         // Also send frontend startup logs to system messages for visibility
-        frontendProcess.stdout?.on("data", (data) => {
+        frontendProcess.stdout?.on("data", (data: Buffer) => {
           const message = util.stripVTControlCharacters(data.toString());
           safeSend(event.sender, "app:output", {
             type: "stdout",
@@ -787,7 +874,7 @@ async function executeAppLocalNode({
           });
         });
 
-        frontendProcess.stderr?.on("data", (data) => {
+        frontendProcess.stderr?.on("data", (data: Buffer) => {
           const message = util.stripVTControlCharacters(data.toString());
           safeSend(event.sender, "app:output", {
             type: "stderr",
@@ -926,18 +1013,13 @@ async function executeAppLocalNode({
     }
   }
 
-  const spawnedProcess = spawn(command, [], {
-    cwd: workingDir,
-    shell: true,
-    stdio: "pipe", // Ensure stdio is piped so we can capture output/errors and detect close
-    detached: false, // Ensure child process is attached to the main process lifecycle unless explicitly backgrounded
-  });
+  const spawnedProcess = await executeComplexCommand(command, workingDir, getShellEnv());
 
   // Check if process spawned correctly
   if (!spawnedProcess.pid) {
     // Attempt to capture any immediate errors if possible
     let errorOutput = "";
-    spawnedProcess.stderr?.on("data", (data) => (errorOutput += data));
+    spawnedProcess.stderr?.on("data", (data: Buffer) => (errorOutput += data));
     await new Promise((resolve) => spawnedProcess.on("error", resolve)); // Wait for error event
     throw new Error(
       `Failed to spawn process for app ${appId}. Error: ${
@@ -1005,7 +1087,7 @@ function listenToProcess({
   }, 15000); // 15 seconds
 
   // Log output
-  spawnedProcess.stdout?.on("data", async (data) => {
+  spawnedProcess.stdout?.on("data", async (data: Buffer) => {
     const rawMessage = util.stripVTControlCharacters(data.toString());
     const message = rawMessage; // Remove prefix since addTerminalOutput handles it
 
@@ -1630,22 +1712,24 @@ export function registerAppHandlers() {
         logger.warn(`App ${app.id} created without Git repository`);
       }
 
-      // Start autonomous development process
-      try {
-        logger.info(`Starting autonomous development for app ${app.id}`);
-        const requirements: string[] = []; // Requirements will be gathered during development
-        developmentOrchestrator.startAutonomousDevelopment(
-          app.id,
-          "react", // default frontend framework
-          params.selectedBackendFramework || undefined,
-          requirements
-        );
-        logger.info(`Autonomous development started for app ${app.id}`);
-      } catch (devError) {
-        logger.error(`Failed to start autonomous development for app ${app.id}:`, devError);
-        // Don't fail app creation if autonomous development fails to start
-        logger.warn(`App ${app.id} created but autonomous development failed to start`);
-      }
+      // Start autonomous development process asynchronously to prevent UI blocking
+      setTimeout(() => {
+        try {
+          logger.info(`Starting autonomous development for app ${app.id}`);
+          const requirements: string[] = []; // Requirements will be gathered during development
+          developmentOrchestrator.startAutonomousDevelopment(
+            app.id,
+            "react", // default frontend framework
+            params.selectedBackendFramework || undefined,
+            requirements
+          );
+          logger.info(`Autonomous development started for app ${app.id}`);
+        } catch (devError) {
+          logger.error(`Failed to start autonomous development for app ${app.id}:`, devError);
+          // Don't fail app creation if autonomous development fails to start
+          logger.warn(`App ${app.id} created but autonomous development failed to start`);
+        }
+      }, 0);
 
       return { app, chatId: chat.id };
     },

src/ipc/utils/start_proxy_server.ts

@@ -41,9 +41,10 @@ export async function startProxy(
   } = opts;
 
   // Get the correct path to the worker file in both development and production
-  let workerPath: string;
   const electron = getElectron();
 
+  let workerPath: string;
+
   if (electron && !process.env.NODE_ENV?.includes("development")) {
     // In production/built app, the worker is inside the ASAR archive
     // __dirname will be inside the ASAR, so we need to navigate to the worker directory
@@ -55,19 +56,21 @@ export async function startProxy(
       path.resolve(process.resourcesPath, "app.asar", "worker", "proxy_server.js"), // Explicit ASAR path
     ];
 
+    let foundPath: string | null = null;
     for (const testPath of possiblePaths) {
       try {
         require.resolve(testPath);
-        workerPath = testPath;
+        foundPath = testPath;
         break;
       } catch (e) {
         // Continue to next path
       }
     }
 
-    if (!workerPath) {
+    if (!foundPath) {
       throw new Error(`Could not find proxy_server.js worker file. Tried paths: ${possiblePaths.join(', ')}`);
     }
+    workerPath = foundPath;
   } else {
     // In development, use the project root
     workerPath = path.resolve(process.cwd(), "worker", "proxy_server.js");