feat: implement multi-terminal UI for Full Stack mode

- Add frontend and backend terminal output atoms to track separate terminal sessions
- Add activeTerminalAtom to manage which terminal is currently displayed
- Update Console component with tabbed interface for System, Frontend, and Backend terminals
- Add frontend terminal command processing in response_processor.ts
- Add terminal output coloring (cyan for commands, green for success, red for errors)
- Implement automatic terminal switching when new output is added
- Update fullstack system prompt to use both frontend and backend terminal command tags
- Commands now execute automatically in appropriate directories and results are displayed in respective terminals

Author: SFARPak

src/atoms/appAtoms.ts

@@ -12,6 +12,9 @@ export const previewModeAtom = atom<
 >("preview");
 export const selectedVersionIdAtom = atom<string | null>(null);
 export const appOutputAtom = atom<AppOutput[]>([]);
+export const frontendTerminalOutputAtom = atom<AppOutput[]>([]);
+export const backendTerminalOutputAtom = atom<AppOutput[]>([]);
+export const activeTerminalAtom = atom<"main" | "frontend" | "backend">("main");
 export const appUrlAtom = atom<
   | { appUrl: string; appId: number; originalUrl: string }
   | { appUrl: null; appId: null; originalUrl: null }

src/components/preview_panel/Console.tsx

@@ -1,14 +1,77 @@
-import { appOutputAtom } from "@/atoms/appAtoms";
-import { useAtomValue } from "jotai";
+import { appOutputAtom, frontendTerminalOutputAtom, backendTerminalOutputAtom, activeTerminalAtom } from "@/atoms/appAtoms";
+import { useAtomValue, useSetAtom } from "jotai";
 
-// Console component
+// Console component with multi-terminal support
 export const Console = () => {
   const appOutput = useAtomValue(appOutputAtom);
+  const frontendTerminalOutput = useAtomValue(frontendTerminalOutputAtom);
+  const backendTerminalOutput = useAtomValue(backendTerminalOutputAtom);
+  const activeTerminal = useAtomValue(activeTerminalAtom);
+  const setActiveTerminal = useSetAtom(activeTerminalAtom);
+
+  // Determine which output to show based on active terminal
+  const getCurrentOutput = () => {
+    switch (activeTerminal) {
+      case "frontend":
+        return frontendTerminalOutput;
+      case "backend":
+        return backendTerminalOutput;
+      case "main":
+      default:
+        return appOutput;
+    }
+  };
+
+  const currentOutput = getCurrentOutput();
+
+  // Show terminal tabs only in fullstack mode (when we have multiple terminals)
+  const showTabs = frontendTerminalOutput.length > 0 || backendTerminalOutput.length > 0;
+
   return (
-    <div className="font-mono text-xs px-4 h-full overflow-auto">
-      {appOutput.map((output, index) => (
-        <div key={index}>{output.message}</div>
-      ))}
+    <div className="flex flex-col h-full">
+      {showTabs && (
+        <div className="flex border-b border-border bg-[var(--background)]">
+          <button
+            onClick={() => setActiveTerminal("main")}
+            className={`px-3 py-1 text-xs font-medium ${
+              activeTerminal === "main"
+                ? "border-b-2 border-blue-500 text-blue-500"
+                : "text-gray-500 hover:text-gray-700"
+            }`}
+          >
+            System ({appOutput.length})
+          </button>
+          {frontendTerminalOutput.length > 0 && (
+            <button
+              onClick={() => setActiveTerminal("frontend")}
+              className={`px-3 py-1 text-xs font-medium ${
+                activeTerminal === "frontend"
+                  ? "border-b-2 border-green-500 text-green-500"
+                  : "text-gray-500 hover:text-gray-700"
+              }`}
+            >
+              Frontend ({frontendTerminalOutput.length})
+            </button>
+          )}
+          {backendTerminalOutput.length > 0 && (
+            <button
+              onClick={() => setActiveTerminal("backend")}
+              className={`px-3 py-1 text-xs font-medium ${
+                activeTerminal === "backend"
+                  ? "border-b-2 border-orange-500 text-orange-500"
+                  : "text-gray-500 hover:text-gray-700"
+              }`}
+            >
+              Backend ({backendTerminalOutput.length})
+            </button>
+          )}
+        </div>
+      )}
+      <div className="font-mono text-xs px-4 flex-1 overflow-auto">
+        {currentOutput.map((output, index) => (
+          <div key={index}>{output.message}</div>
+        ))}
+      </div>
     </div>
   );
 };

src/ipc/handlers/terminal_handlers.ts

@@ -0,0 +1,69 @@
+import { safeSend } from "../utils/safe_sender";
+import { frontendTerminalOutputAtom, backendTerminalOutputAtom, activeTerminalAtom } from "../../atoms/appAtoms";
+import { getDefaultStore } from "jotai";
+import log from "electron-log";
+
+const logger = log.scope("terminal_handlers");
+
+export function registerTerminalHandlers() {
+  // No IPC handlers needed - this module handles terminal output routing
+}
+
+// Function to add output to a specific terminal
+export function addTerminalOutput(appId: number, terminal: "frontend" | "backend", message: string, type: "command" | "output" | "success" | "error" = "output") {
+  const store = getDefaultStore();
+
+  // Format message with timestamp and type indicator
+  const timestamp = new Date().toLocaleTimeString();
+  let formattedMessage = `[${timestamp}] ${message}`;
+
+  // Add type-specific formatting
+  if (type === "command") {
+    formattedMessage = `\x1b[36m${formattedMessage}\x1b[0m`; // Cyan for commands
+  } else if (type === "success") {
+    formattedMessage = `\x1b[32m${formattedMessage}\x1b[0m`; // Green for success
+  } else if (type === "error") {
+    formattedMessage = `\x1b[31m${formattedMessage}\x1b[0m`; // Red for errors
+  }
+
+  // Map our types to AppOutput types
+  let appOutputType: "stdout" | "stderr" | "info" | "client-error" | "input-requested";
+  switch (type) {
+    case "error":
+      appOutputType = "stderr";
+      break;
+    case "success":
+    case "command":
+      appOutputType = "info";
+      break;
+    default:
+      appOutputType = "stdout";
+  }
+
+  const outputItem = {
+    message: formattedMessage,
+    timestamp: Date.now(),
+    type: appOutputType,
+    appId
+  };
+
+  if (terminal === "frontend") {
+    const currentOutput = store.get(frontendTerminalOutputAtom);
+    store.set(frontendTerminalOutputAtom, [...currentOutput, outputItem]);
+
+    // Auto-switch to frontend terminal if it's empty
+    if (currentOutput.length === 0) {
+      store.set(activeTerminalAtom, "frontend");
+    }
+  } else if (terminal === "backend") {
+    const currentOutput = store.get(backendTerminalOutputAtom);
+    store.set(backendTerminalOutputAtom, [...currentOutput, outputItem]);
+
+    // Auto-switch to backend terminal if it's empty
+    if (currentOutput.length === 0) {
+      store.set(activeTerminalAtom, "backend");
+    }
+  }
+
+  logger.log(`Added ${type} output to ${terminal} terminal: ${message}`);
+}

src/ipc/ipc_host.ts

@@ -30,6 +30,7 @@ import { registerTemplateHandlers } from "./handlers/template_handlers";
 import { registerPortalHandlers } from "./handlers/portal_handlers";
 import { registerPromptHandlers } from "./handlers/prompt_handlers";
 import { registerHelpBotHandlers } from "./handlers/help_bot_handlers";
+import { registerTerminalHandlers } from "./handlers/terminal_handlers";
 
 export function registerIpcHandlers() {
   // Register all IPC handlers by category
@@ -65,4 +66,5 @@ export function registerIpcHandlers() {
   registerPortalHandlers();
   registerPromptHandlers();
   registerHelpBotHandlers();
+  registerTerminalHandlers();
 }

src/ipc/processors/response_processor.ts

@@ -27,11 +27,13 @@ import {
   getDyadAddDependencyTags,
   getDyadExecuteSqlTags,
   getDyadRunBackendTerminalCmdTags,
+  getDyadRunFrontendTerminalCmdTags,
 } from "../utils/dyad_tag_parser";
 import { runShellCommand } from "../utils/runShellCommand";
 import { storeDbTimestampAtCurrentVersion } from "../utils/neon_timestamp_utils";
 
 import { FileUploadsState } from "../utils/file_uploads_state";
+import { addTerminalOutput } from "../handlers/terminal_handlers";
 
 const readFile = fs.promises.readFile;
 const logger = log.scope("response_processor");
@@ -122,6 +124,7 @@ export async function processFullResponseActions(
       ? getDyadExecuteSqlTags(fullResponse)
       : [];
     const dyadRunBackendTerminalCmdTags = getDyadRunBackendTerminalCmdTags(fullResponse);
+    const dyadRunFrontendTerminalCmdTags = getDyadRunFrontendTerminalCmdTags(fullResponse);
 
     const message = await db.query.messages.findFirst({
       where: and(
@@ -180,28 +183,85 @@ export async function processFullResponseActions(
 
           logger.log(`Executing backend terminal command: ${cmdTag.command} in ${cwd}`);
 
+          // Add command to backend terminal output
+          // 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}`);
 
           if (result === null) {
             errors.push({
               message: `Backend terminal command failed: ${cmdTag.description || cmdTag.command}`,
               error: `Command execution failed in ${cwd}`,
             });
+            // Add error to backend terminal
+            addTerminalOutput(chatWithApp.app.id, "backend", `❌ Error: ${cmdTag.description || cmdTag.command}`, "error");
           } else {
             logger.log(`Backend terminal command succeeded: ${cmdTag.description || cmdTag.command}`);
-            // Add success message to app output
-            // Note: We don't add to writtenFiles since these are not file changes
+
+            // Add command and result to backend terminal
+            addTerminalOutput(chatWithApp.app.id, "backend", `$ ${cmdTag.command}`, "command");
+
+            if (result.trim()) {
+              addTerminalOutput(chatWithApp.app.id, "backend", result, "output");
+            }
+
+            addTerminalOutput(chatWithApp.app.id, "backend", `✅ ${cmdTag.description || cmdTag.command} completed successfully`, "success");
           }
         } catch (error) {
           errors.push({
             message: `Backend terminal command failed: ${cmdTag.description || cmdTag.command}`,
             error: error,
           });
+          // Add error to backend terminal
+          addTerminalOutput(chatWithApp.app.id, "backend", `❌ Error: ${error}`, "error");
         }
       }
       logger.log(`Executed ${dyadRunBackendTerminalCmdTags.length} backend terminal commands`);
      }
 
+    // Handle frontend terminal command tags
+    if (dyadRunFrontendTerminalCmdTags.length > 0) {
+      for (const cmdTag of dyadRunFrontendTerminalCmdTags) {
+        try {
+          const frontendPath = path.join(appPath, "frontend");
+          const cwd = cmdTag.cwd ? path.join(frontendPath, cmdTag.cwd) : frontendPath;
+
+          logger.log(`Executing frontend terminal command: ${cmdTag.command} in ${cwd}`);
+
+          const result = await runShellCommand(`cd "${cwd}" && ${cmdTag.command}`);
+
+          if (result === null) {
+            errors.push({
+              message: `Frontend terminal command failed: ${cmdTag.description || cmdTag.command}`,
+              error: `Command execution failed in ${cwd}`,
+            });
+            // Add error to frontend terminal
+            addTerminalOutput(chatWithApp.app.id, "frontend", `❌ Error: ${cmdTag.description || cmdTag.command}`, "error");
+          } else {
+            logger.log(`Frontend terminal command succeeded: ${cmdTag.description || cmdTag.command}`);
+
+            // Add command and result to frontend terminal
+            addTerminalOutput(chatWithApp.app.id, "frontend", `$ ${cmdTag.command}`, "command");
+
+            if (result.trim()) {
+              addTerminalOutput(chatWithApp.app.id, "frontend", result, "output");
+            }
+
+            addTerminalOutput(chatWithApp.app.id, "frontend", `✅ ${cmdTag.description || cmdTag.command} completed successfully`, "success");
+          }
+        } catch (error) {
+          errors.push({
+            message: `Frontend terminal command failed: ${cmdTag.description || cmdTag.command}`,
+            error: error,
+          });
+          // Add error to frontend terminal
+          addTerminalOutput(chatWithApp.app.id, "frontend", `❌ Error: ${error}`, "error");
+        }
+      }
+      logger.log(`Executed ${dyadRunFrontendTerminalCmdTags.length} frontend terminal commands`);
+     }
+
     // Handle add dependency tags
     if (dyadAddDependencyPackages.length > 0) {
       try {

src/ipc/utils/dyad_tag_parser.ts

@@ -166,3 +166,32 @@ export function getDyadRunBackendTerminalCmdTags(fullResponse: string): {
 
   return commands;
 }
+
+export function getDyadRunFrontendTerminalCmdTags(fullResponse: string): {
+  command: string;
+  cwd?: string;
+  description?: string;
+}[] {
+  const dyadRunFrontendTerminalCmdRegex =
+    /<dyad-run-frontend-terminal-cmd([^>]*)>([\s\S]*?)<\/dyad-run-frontend-terminal-cmd>/g;
+  const cwdRegex = /cwd="([^"]+)"/;
+  const descriptionRegex = /description="([^"]+)"/;
+
+  let match;
+  const commands: { command: string; cwd?: string; description?: string }[] = [];
+
+  while ((match = dyadRunFrontendTerminalCmdRegex.exec(fullResponse)) !== null) {
+    const attributesString = match[1];
+    const command = match[2].trim();
+
+    const cwdMatch = cwdRegex.exec(attributesString);
+    const descriptionMatch = descriptionRegex.exec(attributesString);
+
+    const cwd = cwdMatch?.[1];
+    const description = descriptionMatch?.[1];
+
+    commands.push({ command, cwd, description });
+  }
+
+  return commands;
+}

src/prompts/system_prompt.ts

@@ -468,37 +468,37 @@ const FULLSTACK_AI_RULES = `# Full Stack Development
 ## Framework-Specific Terminal Commands
 
 ### Django Commands (Backend Terminal)
-- Install dependencies: \`pip install -r requirements.txt\`
-- Run migrations: \`python manage.py migrate\`
-- Create migrations: \`python manage.py makemigrations\`
-- Start server: \`python manage.py runserver 8000\`
-- Create superuser: \`python manage.py createsuperuser\`
-- Collect static files: \`python manage.py collectstatic\`
+- Install dependencies: <dyad-run-backend-terminal-cmd description="Install Python dependencies">pip install -r requirements.txt</dyad-run-backend-terminal-cmd>
+- Run migrations: <dyad-run-backend-terminal-cmd description="Apply database migrations">python manage.py migrate</dyad-run-backend-terminal-cmd>
+- Create migrations: <dyad-run-backend-terminal-cmd description="Create database migrations">python manage.py makemigrations</dyad-run-backend-terminal-cmd>
+- Start server: <dyad-run-backend-terminal-cmd description="Start Django development server">python manage.py runserver 8000</dyad-run-backend-terminal-cmd>
+- Create superuser: <dyad-run-backend-terminal-cmd description="Create Django superuser">python manage.py createsuperuser</dyad-run-backend-terminal-cmd>
+- Collect static files: <dyad-run-backend-terminal-cmd description="Collect static files">python manage.py collectstatic</dyad-run-backend-terminal-cmd>
 
 ### FastAPI Commands (Backend Terminal)
-- Install dependencies: \`pip install -r requirements.txt\`
-- Start server: \`uvicorn main:app --reload --host 0.0.0.0 --port 8000\`
-- Run with hot reload: \`uvicorn main:app --reload\`
-- Generate client: \`python -c "from main import app; print(app.openapi())"\`
+- Install dependencies: <dyad-run-backend-terminal-cmd description="Install Python dependencies">pip install -r requirements.txt</dyad-run-backend-terminal-cmd>
+- Start server: <dyad-run-backend-terminal-cmd description="Start FastAPI server">uvicorn main:app --reload --host 0.0.0.0 --port 8000</dyad-run-backend-terminal-cmd>
+- Run with hot reload: <dyad-run-backend-terminal-cmd description="Run FastAPI with hot reload">uvicorn main:app --reload</dyad-run-backend-terminal-cmd>
+- Generate client: <dyad-run-backend-terminal-cmd description="Generate OpenAPI client">python -c "from main import app; print(app.openapi())"</dyad-run-backend-terminal-cmd>
 
 ### Flask Commands (Backend Terminal)
-- Install dependencies: \`pip install -r requirements.txt\`
-- Start server: \`python app.py\`
-- Start with Flask CLI: \`flask run --host=0.0.0.0 --port=5000\`
-- Initialize database: \`flask db init\` (if using Flask-Migrate)
+- Install dependencies: <dyad-run-backend-terminal-cmd description="Install Python dependencies">pip install -r requirements.txt</dyad-run-backend-terminal-cmd>
+- Start server: <dyad-run-backend-terminal-cmd description="Start Flask development server">python app.py</dyad-run-backend-terminal-cmd>
+- Start with Flask CLI: <dyad-run-backend-terminal-cmd description="Start Flask with CLI">flask run --host=0.0.0.0 --port=5000</dyad-run-backend-terminal-cmd>
+- Initialize database: <dyad-run-backend-terminal-cmd description="Initialize Flask-Migrate">flask db init</dyad-run-backend-terminal-cmd>
 
 ### Node.js Commands (Backend Terminal)
-- Install dependencies: \`npm install\`
-- Start server: \`npm start\` or \`node server.js\`
-- Development mode: \`npm run dev\` or \`nodemon server.js\`
-- Build for production: \`npm run build\`
+- Install dependencies: <dyad-run-backend-terminal-cmd description="Install Node.js dependencies">npm install</dyad-run-backend-terminal-cmd>
+- Start server: <dyad-run-backend-terminal-cmd description="Start production server">npm start</dyad-run-backend-terminal-cmd>
+- Development mode: <dyad-run-backend-terminal-cmd description="Start development server">npm run dev</dyad-run-backend-terminal-cmd>
+- Build for production: <dyad-run-backend-terminal-cmd description="Build for production">npm run build</dyad-run-backend-terminal-cmd>
 
 ### Frontend Commands (Frontend Terminal)
-- Install dependencies: \`npm install\`
-- Start development server: \`npm run dev\`
-- Build for production: \`npm run build\`
-- Run tests: \`npm test\`
-- Lint code: \`npm run lint\`
+- Install dependencies: <dyad-run-frontend-terminal-cmd description="Install frontend dependencies">npm install</dyad-run-frontend-terminal-cmd>
+- Start development server: <dyad-run-frontend-terminal-cmd description="Start frontend development server">npm run dev</dyad-run-frontend-terminal-cmd>
+- Build for production: <dyad-run-frontend-terminal-cmd description="Build frontend for production">npm run build</dyad-run-frontend-terminal-cmd>
+- Run tests: <dyad-run-frontend-terminal-cmd description="Run frontend tests">npm test</dyad-run-frontend-terminal-cmd>
+- Lint code: <dyad-run-frontend-terminal-cmd description="Lint frontend code">npm run lint</dyad-run-frontend-terminal-cmd>
 
 ## Integration Best Practices
 - Design clean API contracts between frontend and backend