feat: add run_terminal_cmd support to DyadCodebaseContext

- Add DyadRunTerminalCmd component for displaying terminal commands in UI
- Update DyadMarkdownParser to render run_terminal_cmd tags as interactive components
- Enable run_terminal_cmd tags to participate in codebase context flow
- Ensure terminal commands are visible and tracked in chat interface

This ensures that commands with <run_terminal_cmd> tags are part of the DyadCodebaseContext and run in their appropriate terminals, with fullstack mode support for file writing and command execution.

Author: SFARPak

dyad/src/components/chat/DyadMarkdownParser.tsx

@@ -10,6 +10,7 @@ import { DyadAddIntegration } from "./DyadAddIntegration";
 import { DyadEdit } from "./DyadEdit";
 import { DyadCodebaseContext } from "./DyadCodebaseContext";
 import { DyadThink } from "./DyadThink";
+import { DyadRunTerminalCmd } from "./DyadRunTerminalCmd";
 import { CodeHighlight } from "./CodeHighlight";
 import { useAtomValue } from "jotai";
 import { isStreamingAtom } from "@/atoms/chatAtoms";
@@ -124,6 +125,7 @@ function preprocessUnclosedTags(content: string): {
     "dyad-codebase-context",
     "think",
     "dyad-command",
+    "run_terminal_cmd",
   ];
 
   let processedContent = content;
@@ -191,6 +193,7 @@ function parseCustomTags(content: string): ContentPiece[] {
     "dyad-codebase-context",
     "think",
     "dyad-command",
+    "run_terminal_cmd",
   ];
 
   const tagPattern = new RegExp(
@@ -424,6 +427,21 @@ function renderCustomTag(
       // Don't render anything for dyad-command
       return null;
 
+    case "run_terminal_cmd":
+      return (
+        <DyadRunTerminalCmd
+          node={{
+            properties: {
+              description: attributes.description || "",
+              cwd: attributes.cwd || "",
+              state: getState({ isStreaming, inProgress }),
+            },
+          }}
+        >
+          {content}
+        </DyadRunTerminalCmd>
+      );
+
     default:
       return null;
   }

dyad/src/components/chat/DyadRunTerminalCmd.tsx

@@ -0,0 +1,104 @@
+import React, { useState } from "react";
+import { Terminal, ChevronUp, ChevronDown, CheckCircle, XCircle, Loader2 } from "lucide-react";
+import { CustomTagState } from "./stateTypes";
+
+interface DyadRunTerminalCmdProps {
+  children: React.ReactNode;
+  node?: {
+    properties?: {
+      description?: string;
+      cwd?: string;
+      state?: CustomTagState;
+    };
+  };
+}
+
+export const DyadRunTerminalCmd: React.FC<DyadRunTerminalCmdProps> = ({
+  children,
+  node,
+}) => {
+  const [isExpanded, setIsExpanded] = useState(false);
+  const state = node?.properties?.state;
+  const description = node?.properties?.description;
+  const cwd = node?.properties?.cwd;
+
+  const getStateIcon = () => {
+    switch (state) {
+      case "pending":
+        return <Loader2 size={16} className="text-blue-500 animate-spin" />;
+      case "finished":
+        return <CheckCircle size={16} className="text-green-500" />;
+      case "aborted":
+        return <XCircle size={16} className="text-red-500" />;
+      default:
+        return <Terminal size={16} className="text-gray-500" />;
+    }
+  };
+
+  const getBorderColor = () => {
+    switch (state) {
+      case "pending":
+        return "border-blue-500";
+      case "finished":
+        return "border-green-500";
+      case "aborted":
+        return "border-red-500";
+      default:
+        return "border-gray-500";
+    }
+  };
+
+  return (
+    <div
+      className={`relative bg-gray-50 dark:bg-gray-900 hover:bg-gray-100 dark:hover:bg-gray-800 rounded-lg px-4 py-3 border border-l-4 my-2 cursor-pointer transition-colors ${getBorderColor()}`}
+      onClick={() => setIsExpanded(!isExpanded)}
+      role="button"
+      aria-expanded={isExpanded}
+      tabIndex={0}
+      onKeyDown={(e) => {
+        if (e.key === "Enter" || e.key === " ") {
+          e.preventDefault();
+          setIsExpanded(!isExpanded);
+        }
+      }}
+    >
+      {/* Header */}
+      <div className="flex items-center justify-between">
+        <div className="flex items-center gap-2">
+          {getStateIcon()}
+          <span className="text-sm font-medium text-gray-800 dark:text-gray-200">
+            Terminal Command
+          </span>
+          {description && (
+            <span className="text-xs text-gray-600 dark:text-gray-400">
+              {description}
+            </span>
+          )}
+        </div>
+        <div className="flex items-center gap-2">
+          {cwd && (
+            <span className="text-xs text-gray-500 dark:text-gray-500 bg-gray-200 dark:bg-gray-800 px-2 py-1 rounded">
+              cwd: {cwd}
+            </span>
+          )}
+          {isExpanded ? (
+            <ChevronUp size={16} className="text-gray-500" />
+          ) : (
+            <ChevronDown size={16} className="text-gray-500" />
+          )}
+        </div>
+      </div>
+
+      {/* Expandable content */}
+      <div
+        className={`overflow-hidden transition-all duration-300 ease-in-out ${
+          isExpanded ? "max-h-96 opacity-100 mt-3" : "max-h-0 opacity-0"
+        }`}
+      >
+        <div className="bg-gray-900 dark:bg-black rounded-md p-3 font-mono text-sm text-green-400 dark:text-green-300">
+          <pre className="whitespace-pre-wrap break-words">{children}</pre>
+        </div>
+      </div>
+    </div>
+  );
+};

src/ipc/ipc_host.ts

@@ -1,3 +1,4 @@
+import { ipcMain } from "electron";
 import { registerAppHandlers } from "./handlers/app_handlers";
 import { registerChatHandlers } from "./handlers/chat_handlers";
 import { registerChatStreamHandlers } from "./handlers/chat_stream_handlers";
@@ -30,7 +31,8 @@ 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";
+import { registerTerminalHandlers, addTerminalOutput } from "./handlers/terminal_handlers";
+import { AppOutput } from "./ipc_types";
 
 export function registerIpcHandlers() {
   // Register all IPC handlers by category