centaurus-cli 3.1.3 → 3.1.4

package/dist/ui/components/ToolExecutionMessage.js

@@ -1,10 +1,13 @@
 import React from "react";
 import { Box, Text } from "ink";
 import Spinner from "ink-spinner";
+import stripAnsi from "strip-ansi";
 import wrapAnsi from "wrap-ansi";
 import stringWidth from "string-width";
 import * as path from "path";
+import * as Diff from "diff";
 import { processTerminalOutput } from "../../utils/terminal-output.js";
+import { useTheme } from "../theme.js";
 const TOOL_LABELS = {
   view_file: { verb: "Reading file", emoji: "\u{1F4D6}" },
   write_to_file: { verb: "Writing file", emoji: "" },
@@ -218,50 +221,73 @@ function getToolDisplayInfo(toolName) {
   return { ...toolInfo, isMCP: false };
 }
 function renderDiffSnippet(removedContent, addedContent, options = {}) {
-  const { compact } = options;
+  const { compact, startLine } = options;
   if (!removedContent && !addedContent) return null;
-  const removedLines = removedContent ? removedContent.split("\n") : [];
-  const addedLines = addedContent ? addedContent.split("\n") : [];
-  if (removedLines.length === 0 && addedLines.length === 0) return null;
+  const oldText = removedContent || "";
+  const newText = addedContent || "";
+  if (oldText.length === 0 && newText.length === 0) return null;
   const terminalWidth = process.stdout.columns || 80;
   const maxPreviewWidth = Math.max(12, terminalWidth - 16);
   const measuredLineWidths = [];
-  const wrapDiffLine = (prefix, line) => {
-    const continuationPrefix = " ".repeat(prefix.length);
-    const wrapped = wrapAnsi(line.length > 0 ? line : " ", Math.max(1, maxPreviewWidth - prefix.length), {
+  const changes = Diff.diffLines(oldText, newText);
+  const diffLines = [];
+  let oldLineNum = startLine || 1;
+  let newLineNum = startLine || 1;
+  for (const change of changes) {
+    const lines = change.value.replace(/\n$/, "").split("\n");
+    for (const line of lines) {
+      if (change.added) {
+        diffLines.push({ type: "added", text: line, lineNum: newLineNum++ });
+      } else if (change.removed) {
+        diffLines.push({ type: "removed", text: line, lineNum: oldLineNum++ });
+      } else {
+        diffLines.push({ type: "context", text: line, lineNum: newLineNum });
+        oldLineNum++;
+        newLineNum++;
+      }
+    }
+  }
+  const maxLineNum = Math.max(oldLineNum, newLineNum) - 1;
+  const gutterWidth = startLine !== void 0 ? String(maxLineNum).length : 0;
+  const wrapDiffLine = (prefix, line, lineNum) => {
+    const gutterStr = lineNum !== void 0 ? `${String(lineNum).padStart(gutterWidth)} ` : "";
+    const fullPrefix = `${gutterStr}${prefix}`;
+    const continuationPrefix = " ".repeat(fullPrefix.length);
+    const wrapped = wrapAnsi(line.length > 0 ? line : " ", Math.max(1, maxPreviewWidth - fullPrefix.length), {
       hard: true,
       trim: false
     }).split("\n");
     return wrapped.map((segment, idx) => {
-      const rendered = `${idx === 0 ? prefix : continuationPrefix}${segment.length > 0 ? segment : " "}`;
+      const rendered = `${idx === 0 ? fullPrefix : continuationPrefix}${segment.length > 0 ? segment : " "}`;
       measuredLineWidths.push(stringWidth(rendered));
       return rendered;
     });
   };
   const items = [];
-  const previewLimit = 3;
-  removedLines.slice(0, previewLimit).forEach((line, i) => {
-    wrapDiffLine("- ", line).forEach((wrappedLine, wrappedIndex) => {
+  const maxDiffLines = 50;
+  let renderedCount = 0;
+  let skippedCount = 0;
+  for (const dl of diffLines) {
+    if (renderedCount >= maxDiffLines) {
+      skippedCount++;
+      continue;
+    }
+    const prefix = dl.type === "added" ? "+ " : dl.type === "removed" ? "- " : "  ";
+    let color = "#e6e6e6";
+    let backgroundColor;
+    if (dl.type === "removed") backgroundColor = "#5c1e1e";
+    else if (dl.type === "added") backgroundColor = "#1e4d2b";
+    else color = "#aaaaaa";
+    wrapDiffLine(prefix, dl.text, dl.lineNum).forEach((wrappedLine, wrappedIndex) => {
       items.push(
-        /* @__PURE__ */ React.createElement(Box, { key: `rem-${i}-${wrappedIndex}` }, /* @__PURE__ */ React.createElement(Text, { color: "#e6e6e6", backgroundColor: "#5c1e1e", wrap: "truncate-end" }, wrappedLine))
+        /* @__PURE__ */ React.createElement(Box, { key: `${dl.type}-${renderedCount}-${wrappedIndex}` }, /* @__PURE__ */ React.createElement(Text, { color, backgroundColor, wrap: "truncate-end" }, wrappedLine))
       );
     });
-  });
-  if (removedLines.length > previewLimit) {
-    items.push(
-      /* @__PURE__ */ React.createElement(Box, { key: "rem-more" }, /* @__PURE__ */ React.createElement(Text, { color: "gray", dimColor: true }, "  ... ", removedLines.length - previewLimit, " more lines"))
-    );
+    renderedCount++;
   }
-  addedLines.slice(0, previewLimit).forEach((line, i) => {
-    wrapDiffLine("+ ", line).forEach((wrappedLine, wrappedIndex) => {
-      items.push(
-        /* @__PURE__ */ React.createElement(Box, { key: `add-${i}-${wrappedIndex}` }, /* @__PURE__ */ React.createElement(Text, { color: "#e6e6e6", backgroundColor: "#1e4d2b", wrap: "truncate-end" }, wrappedLine))
-      );
-    });
-  });
-  if (addedLines.length > previewLimit) {
+  if (skippedCount > 0) {
     items.push(
-      /* @__PURE__ */ React.createElement(Box, { key: "add-more" }, /* @__PURE__ */ React.createElement(Text, { color: "gray", dimColor: true }, "  ... ", addedLines.length - previewLimit, " more lines"))
+      /* @__PURE__ */ React.createElement(Box, { key: "more" }, /* @__PURE__ */ React.createElement(Text, { color: "gray", dimColor: true }, "  ... ", skippedCount, " more lines not shown"))
     );
   }
   const separatorWidth = Math.max(
@@ -273,70 +299,72 @@ function renderDiffSnippet(removedContent, addedContent, options = {}) {
   );
   return /* @__PURE__ */ React.createElement(Box, { flexDirection: "column", marginTop: compact ? 0 : 1, alignSelf: "flex-start" }, /* @__PURE__ */ React.createElement(Box, { marginBottom: 1 }, /* @__PURE__ */ React.createElement(Text, { color: "#333333" }, "\u2500".repeat(separatorWidth))), items);
 }
+const ToolBoxContainer = ({ children }) => /* @__PURE__ */ React.createElement(Box, { width: process.stdout.columns || 80 }, children);
 const ToolExecutionMessage = React.memo(({ message }) => {
+  const theme = useTheme();
   if (!message.toolExecution) {
     return null;
   }
   const { toolName, status, result, error, arguments: toolArgs } = message.toolExecution;
   const toolInfo = getToolDisplayInfo(toolName);
   const thinkingDuration = message.thinkingDuration;
-  const renderWithThinking = (content) => /* @__PURE__ */ React.createElement(Box, { flexDirection: "column" }, thinkingDuration !== void 0 && thinkingDuration >= 0 && /* @__PURE__ */ React.createElement(Box, { marginBottom: 1 }, /* @__PURE__ */ React.createElement(Text, { dimColor: true }, "Thought for ", thinkingDuration, " second", thinkingDuration !== 1 ? "s" : "", " \u203A")), content);
+  const renderWithThinking = (content) => /* @__PURE__ */ React.createElement(ToolBoxContainer, null, /* @__PURE__ */ React.createElement(Box, { flexDirection: "column" }, thinkingDuration !== void 0 && thinkingDuration >= 0 && /* @__PURE__ */ React.createElement(Box, { marginBottom: 1 }, /* @__PURE__ */ React.createElement(Text, { dimColor: true }, "Thought for ", thinkingDuration, " second", thinkingDuration !== 1 ? "s" : "", " \u203A")), content));
   if (status === "executing") {
     if (toolName === "execute_command") {
       return null;
     }
-    if (toolName === "mark_task_complete" || toolName === "create_plan") {
+    if (toolName === "mark_task_complete" || toolName === "create_plan" || toolName === "todo_write") {
       return null;
     }
     if (toolName === "auto_context_compaction") {
-      return /* @__PURE__ */ React.createElement(Box, { flexDirection: "column", borderStyle: "round", borderColor: "#003b59", paddingX: 1, marginBottom: 1, flexGrow: 0, alignSelf: "flex-start" }, /* @__PURE__ */ React.createElement(Box, null, /* @__PURE__ */ React.createElement(Text, { color: "#00ccff" }, /* @__PURE__ */ React.createElement(Spinner, { type: "arc" })), /* @__PURE__ */ React.createElement(Text, { color: "#00ccff", bold: true }, " Auto summarizing context...")));
+      return /* @__PURE__ */ React.createElement(ToolBoxContainer, null, /* @__PURE__ */ React.createElement(Box, { flexDirection: "column", borderStyle: "round", borderColor: theme.bgAccent, paddingX: 1, marginBottom: 1, flexGrow: 0, alignSelf: "flex-start" }, /* @__PURE__ */ React.createElement(Box, { flexWrap: "wrap" }, /* @__PURE__ */ React.createElement(Text, { color: theme.accent }, /* @__PURE__ */ React.createElement(Spinner, { type: "arc" })), /* @__PURE__ */ React.createElement(Text, { color: theme.accent, bold: true }, " Auto summarizing context..."))));
     }
     if (toolInfo.isMCP) {
-      return /* @__PURE__ */ React.createElement(Box, { flexDirection: "column", borderStyle: "round", borderColor: "#9945FF", paddingX: 1, marginBottom: 1, flexGrow: 0, alignSelf: "flex-start" }, /* @__PURE__ */ React.createElement(Box, null, /* @__PURE__ */ React.createElement(Text, { color: "#00ccff" }, /* @__PURE__ */ React.createElement(Spinner, { type: "arc" })), /* @__PURE__ */ React.createElement(Text, { color: "#9945FF", bold: true }, " MCP"), /* @__PURE__ */ React.createElement(Text, { color: "#9945FF" }, " ", toolInfo.serverName, " ", toolInfo.mcpToolName)));
+      return /* @__PURE__ */ React.createElement(ToolBoxContainer, null, /* @__PURE__ */ React.createElement(Box, { flexDirection: "column", borderStyle: "round", borderColor: "#9945FF", paddingX: 1, marginBottom: 1, flexGrow: 0, alignSelf: "flex-start" }, /* @__PURE__ */ React.createElement(Box, { flexWrap: "wrap" }, /* @__PURE__ */ React.createElement(Text, { color: theme.accent }, /* @__PURE__ */ React.createElement(Spinner, { type: "arc" })), /* @__PURE__ */ React.createElement(Text, { color: "#9945FF", bold: true }, " MCP"), /* @__PURE__ */ React.createElement(Text, { color: "#9945FF" }, " ", toolInfo.serverName, " ", toolInfo.mcpToolName))));
     }
     if (toolName === "view_file" && toolArgs) {
       const { AbsolutePath, remoteContext } = toolArgs;
       const lineInfo = getViewFileLineInfo(toolArgs);
-      return /* @__PURE__ */ React.createElement(Box, { flexDirection: "column", borderStyle: "round", borderColor: "#003b59", paddingX: 1, marginBottom: 1, flexGrow: 0, alignSelf: "flex-start" }, /* @__PURE__ */ React.createElement(Box, null, /* @__PURE__ */ React.createElement(Text, { color: "#00ccff" }, /* @__PURE__ */ React.createElement(Spinner, { type: "arc" })), /* @__PURE__ */ React.createElement(Text, { color: "#00ccff", bold: true }, " Reading ", lineInfo, " from "), /* @__PURE__ */ React.createElement(Text, { color: "#00ccff" }, formatPathWithContext(AbsolutePath, remoteContext), "...")));
+      return /* @__PURE__ */ React.createElement(ToolBoxContainer, null, /* @__PURE__ */ React.createElement(Box, { flexDirection: "column", borderStyle: "round", borderColor: theme.bgAccent, paddingX: 1, marginBottom: 1, flexGrow: 0, alignSelf: "flex-start" }, /* @__PURE__ */ React.createElement(Box, { flexWrap: "wrap" }, /* @__PURE__ */ React.createElement(Text, { color: theme.accent }, /* @__PURE__ */ React.createElement(Spinner, { type: "arc" })), /* @__PURE__ */ React.createElement(Text, { color: theme.accent, bold: true }, " Reading ", lineInfo, " from "), /* @__PURE__ */ React.createElement(Text, { color: theme.accent }, formatPathWithContext(AbsolutePath, remoteContext), "..."))));
     }
     if (toolName === "list_dir" && toolArgs) {
       const { DirectoryPath, remoteContext } = toolArgs;
-      return /* @__PURE__ */ React.createElement(Box, { flexDirection: "column", borderStyle: "round", borderColor: "#003b59", paddingX: 1, marginBottom: 1, flexGrow: 0, alignSelf: "flex-start" }, /* @__PURE__ */ React.createElement(Box, null, /* @__PURE__ */ React.createElement(Text, { color: "#00ccff" }, /* @__PURE__ */ React.createElement(Spinner, { type: "arc" })), /* @__PURE__ */ React.createElement(Text, { color: "#00ccff", bold: true }, " Listing "), /* @__PURE__ */ React.createElement(Text, { color: "#00ccff" }, formatPathWithContext(DirectoryPath, remoteContext), "...")));
+      return /* @__PURE__ */ React.createElement(ToolBoxContainer, null, /* @__PURE__ */ React.createElement(Box, { flexDirection: "column", borderStyle: "round", borderColor: theme.bgAccent, paddingX: 1, marginBottom: 1, flexGrow: 0, alignSelf: "flex-start" }, /* @__PURE__ */ React.createElement(Box, { flexWrap: "wrap" }, /* @__PURE__ */ React.createElement(Text, { color: theme.accent }, /* @__PURE__ */ React.createElement(Spinner, { type: "arc" })), /* @__PURE__ */ React.createElement(Text, { color: theme.accent, bold: true }, " Listing "), /* @__PURE__ */ React.createElement(Text, { color: theme.accent }, formatPathWithContext(DirectoryPath, remoteContext), "..."))));
     }
     if (toolName === "grep_search" && toolArgs) {
       const { Query, SearchPath } = toolArgs;
       const searchPathRelative = toRelativePath(SearchPath);
       const hasExtension = /\.[a-zA-Z0-9]{1,10}$/.test(SearchPath || "");
       const pathType = hasExtension ? "file" : "directory";
-      return /* @__PURE__ */ React.createElement(Box, { flexDirection: "column", borderStyle: "round", borderColor: "#003b59", paddingX: 1, marginBottom: 1, flexGrow: 0, alignSelf: "flex-start" }, /* @__PURE__ */ React.createElement(Box, { flexWrap: "wrap" }, /* @__PURE__ */ React.createElement(Text, { color: "#00ccff" }, /* @__PURE__ */ React.createElement(Spinner, { type: "arc" })), /* @__PURE__ */ React.createElement(Text, { color: "#00ccff", bold: true }, " Searching for "), /* @__PURE__ */ React.createElement(Text, { color: "#00ccff" }, '"', Query, '"'), searchPathRelative && /* @__PURE__ */ React.createElement(Text, { color: "#00ccff" }, " in ", /* @__PURE__ */ React.createElement(Text, { color: "#00ccff", bold: true }, searchPathRelative), " ", pathType, "..."), !searchPathRelative && /* @__PURE__ */ React.createElement(Text, { color: "#00ccff" }, "...")));
+      return /* @__PURE__ */ React.createElement(ToolBoxContainer, null, /* @__PURE__ */ React.createElement(Box, { flexDirection: "column", borderStyle: "round", borderColor: theme.bgAccent, paddingX: 1, marginBottom: 1, flexGrow: 0, alignSelf: "flex-start" }, /* @__PURE__ */ React.createElement(Box, { flexWrap: "wrap" }, /* @__PURE__ */ React.createElement(Text, { color: theme.accent }, /* @__PURE__ */ React.createElement(Spinner, { type: "arc" })), /* @__PURE__ */ React.createElement(Text, { color: theme.accent, bold: true }, " Searching for "), /* @__PURE__ */ React.createElement(Text, { color: theme.accent }, '"', Query, '"'), searchPathRelative && /* @__PURE__ */ React.createElement(Text, { color: theme.accent }, " in ", /* @__PURE__ */ React.createElement(Text, { color: theme.accent, bold: true }, searchPathRelative), " ", pathType, "..."), !searchPathRelative && /* @__PURE__ */ React.createElement(Text, { color: theme.accent }, "..."))));
     }
     if (toolName === "find_files" && toolArgs) {
       const { pattern } = toolArgs;
-      return /* @__PURE__ */ React.createElement(Box, { flexDirection: "column", borderStyle: "round", borderColor: "#003b59", paddingX: 1, marginBottom: 1, flexGrow: 0, alignSelf: "flex-start" }, /* @__PURE__ */ React.createElement(Box, null, /* @__PURE__ */ React.createElement(Text, { color: "#00ccff" }, /* @__PURE__ */ React.createElement(Spinner, { type: "arc" })), /* @__PURE__ */ React.createElement(Text, { color: "#00ccff", bold: true }, " Finding files matching "), /* @__PURE__ */ React.createElement(Text, { color: "#00ccff" }, '"', pattern, '"...')));
+      return /* @__PURE__ */ React.createElement(ToolBoxContainer, null, /* @__PURE__ */ React.createElement(Box, { flexDirection: "column", borderStyle: "round", borderColor: theme.bgAccent, paddingX: 1, marginBottom: 1, flexGrow: 0, alignSelf: "flex-start" }, /* @__PURE__ */ React.createElement(Box, { flexWrap: "wrap" }, /* @__PURE__ */ React.createElement(Text, { color: theme.accent }, /* @__PURE__ */ React.createElement(Spinner, { type: "arc" })), /* @__PURE__ */ React.createElement(Text, { color: theme.accent, bold: true }, " Finding files matching "), /* @__PURE__ */ React.createElement(Text, { color: theme.accent }, '"', pattern, '"...'))));
     }
     if (toolName === "fetch_url" && toolArgs) {
       const { url } = toolArgs;
-      return /* @__PURE__ */ React.createElement(Box, { flexDirection: "column", borderStyle: "round", borderColor: "#003b59", paddingX: 1, marginBottom: 1, flexGrow: 0, alignSelf: "flex-start" }, /* @__PURE__ */ React.createElement(Box, null, /* @__PURE__ */ React.createElement(Text, { color: "#00ccff" }, /* @__PURE__ */ React.createElement(Spinner, { type: "arc" })), /* @__PURE__ */ React.createElement(Text, { color: "#00ccff", bold: true }, " Fetching "), /* @__PURE__ */ React.createElement(Text, { color: "#00ccff" }, url, "...")));
+      return /* @__PURE__ */ React.createElement(ToolBoxContainer, null, /* @__PURE__ */ React.createElement(Box, { flexDirection: "column", borderStyle: "round", borderColor: theme.bgAccent, paddingX: 1, marginBottom: 1, flexGrow: 0, alignSelf: "flex-start" }, /* @__PURE__ */ React.createElement(Box, { flexWrap: "wrap" }, /* @__PURE__ */ React.createElement(Text, { color: theme.accent }, /* @__PURE__ */ React.createElement(Spinner, { type: "arc" })), /* @__PURE__ */ React.createElement(Text, { color: theme.accent, bold: true }, " Fetching "), /* @__PURE__ */ React.createElement(Text, { color: theme.accent }, url, "..."))));
     }
     if (toolName === "read_binary_file" && toolArgs) {
       const { file_path, remoteContext } = toolArgs;
       const fileName = file_path ? path.basename(file_path) : "file";
-      return /* @__PURE__ */ React.createElement(Box, { flexDirection: "column", borderStyle: "round", borderColor: "#ff9900", paddingX: 1, marginBottom: 1, flexGrow: 0, alignSelf: "flex-start" }, /* @__PURE__ */ React.createElement(Box, null, /* @__PURE__ */ React.createElement(Text, { color: "#00ccff" }, /* @__PURE__ */ React.createElement(Spinner, { type: "arc" })), /* @__PURE__ */ React.createElement(Text, { color: "#ff9900", bold: true }, " Reading "), /* @__PURE__ */ React.createElement(Text, { color: "#ff9900" }, formatPathWithContext(file_path, remoteContext), "...")));
+      return /* @__PURE__ */ React.createElement(ToolBoxContainer, null, /* @__PURE__ */ React.createElement(Box, { flexDirection: "column", borderStyle: "round", borderColor: "#ff9900", paddingX: 1, marginBottom: 1, flexGrow: 0, alignSelf: "flex-start" }, /* @__PURE__ */ React.createElement(Box, { flexWrap: "wrap" }, /* @__PURE__ */ React.createElement(Text, { color: theme.accent }, /* @__PURE__ */ React.createElement(Spinner, { type: "arc" })), /* @__PURE__ */ React.createElement(Text, { color: "#ff9900", bold: true }, " Reading "), /* @__PURE__ */ React.createElement(Text, { color: "#ff9900" }, formatPathWithContext(file_path, remoteContext), "..."))));
     }
     if (toolName === "write_to_file" && toolArgs) {
       const { TargetFile, remoteContext } = toolArgs;
-      return /* @__PURE__ */ React.createElement(Box, { flexDirection: "column", borderStyle: "round", borderColor: "#003b59", paddingX: 1, marginBottom: 1, flexGrow: 0, alignSelf: "flex-start" }, /* @__PURE__ */ React.createElement(Box, null, /* @__PURE__ */ React.createElement(Text, { color: "#00ccff" }, /* @__PURE__ */ React.createElement(Spinner, { type: "arc" })), /* @__PURE__ */ React.createElement(Text, { color: "#00ccff", bold: true }, " Writing to "), /* @__PURE__ */ React.createElement(Text, { color: "#00ccff" }, formatPathWithContext(TargetFile, remoteContext), "...")));
+      return /* @__PURE__ */ React.createElement(ToolBoxContainer, null, /* @__PURE__ */ React.createElement(Box, { flexDirection: "column", borderStyle: "round", borderColor: theme.bgAccent, paddingX: 1, marginBottom: 1, flexGrow: 0, alignSelf: "flex-start" }, /* @__PURE__ */ React.createElement(Box, { flexWrap: "wrap" }, /* @__PURE__ */ React.createElement(Text, { color: theme.accent }, /* @__PURE__ */ React.createElement(Spinner, { type: "arc" })), /* @__PURE__ */ React.createElement(Text, { color: theme.accent, bold: true }, " Writing to "), /* @__PURE__ */ React.createElement(Text, { color: theme.accent }, formatPathWithContext(TargetFile, remoteContext), "..."))));
     }
     if (toolName === "edit_file" && toolArgs) {
       const { file_path, remoteContext } = toolArgs;
-      return /* @__PURE__ */ React.createElement(Box, { flexDirection: "column", borderStyle: "round", borderColor: "#003b59", paddingX: 1, marginBottom: 1, flexGrow: 0, alignSelf: "flex-start" }, /* @__PURE__ */ React.createElement(Box, null, /* @__PURE__ */ React.createElement(Text, { color: "#00ccff" }, /* @__PURE__ */ React.createElement(Spinner, { type: "arc" })), /* @__PURE__ */ React.createElement(Text, { color: "#00ccff", bold: true }, " Editing "), /* @__PURE__ */ React.createElement(Text, { color: "#00ccff" }, formatPathWithContext(file_path, remoteContext), "...")));
+      return /* @__PURE__ */ React.createElement(ToolBoxContainer, null, /* @__PURE__ */ React.createElement(Box, { flexDirection: "column", borderStyle: "round", borderColor: theme.bgAccent, paddingX: 1, marginBottom: 1, flexGrow: 0, alignSelf: "flex-start" }, /* @__PURE__ */ React.createElement(Box, { flexWrap: "wrap" }, /* @__PURE__ */ React.createElement(Text, { color: theme.accent }, /* @__PURE__ */ React.createElement(Spinner, { type: "arc" })), /* @__PURE__ */ React.createElement(Text, { color: theme.accent, bold: true }, " Editing "), /* @__PURE__ */ React.createElement(Text, { color: theme.accent }, formatPathWithContext(file_path, remoteContext), "..."))));
     }
     if (toolName === "multi_edit_file" && toolArgs) {
       const { file_path, remoteContext } = toolArgs;
-      return /* @__PURE__ */ React.createElement(Box, { flexDirection: "column", borderStyle: "round", borderColor: "#003b59", paddingX: 1, marginBottom: 1, flexGrow: 0, alignSelf: "flex-start" }, /* @__PURE__ */ React.createElement(Box, null, /* @__PURE__ */ React.createElement(Text, { color: "#00ccff" }, /* @__PURE__ */ React.createElement(Spinner, { type: "arc" })), /* @__PURE__ */ React.createElement(Text, { color: "#00ccff", bold: true }, " Editing "), /* @__PURE__ */ React.createElement(Text, { color: "#00ccff" }, formatPathWithContext(file_path, remoteContext), "...")));
+      return /* @__PURE__ */ React.createElement(ToolBoxContainer, null, /* @__PURE__ */ React.createElement(Box, { flexDirection: "column", borderStyle: "round", borderColor: theme.bgAccent, paddingX: 1, marginBottom: 1, flexGrow: 0, alignSelf: "flex-start" }, /* @__PURE__ */ React.createElement(Box, { flexWrap: "wrap" }, /* @__PURE__ */ React.createElement(Text, { color: theme.accent }, /* @__PURE__ */ React.createElement(Spinner, { type: "arc" })), /* @__PURE__ */ React.createElement(Text, { color: theme.accent, bold: true }, " Editing "), /* @__PURE__ */ React.createElement(Text, { color: theme.accent }, formatPathWithContext(file_path, remoteContext), "..."))));
     }
     if (toolName === "create_image") {
-      return /* @__PURE__ */ React.createElement(Box, { flexDirection: "column", borderStyle: "round", borderColor: "#ff9900", paddingX: 1, marginBottom: 1, flexGrow: 0, alignSelf: "flex-start" }, /* @__PURE__ */ React.createElement(Box, null, /* @__PURE__ */ React.createElement(Text, { color: "#00ccff" }, /* @__PURE__ */ React.createElement(Spinner, { type: "arc" })), /* @__PURE__ */ React.createElement(Text, { color: "#ff9900", bold: true }, " Generating image...")));
+      return /* @__PURE__ */ React.createElement(ToolBoxContainer, null, /* @__PURE__ */ React.createElement(Box, { flexDirection: "column", borderStyle: "round", borderColor: "#ff9900", paddingX: 1, marginBottom: 1, flexGrow: 0, alignSelf: "flex-start" }, /* @__PURE__ */ React.createElement(Box, { flexWrap: "wrap" }, /* @__PURE__ */ React.createElement(Text, { color: theme.accent }, /* @__PURE__ */ React.createElement(Spinner, { type: "arc" })), /* @__PURE__ */ React.createElement(Text, { color: "#ff9900", bold: true }, " Generating image..."))));
     }
     if (toolName === "background_command" && toolArgs) {
       const { action, command, task_id, wait_seconds } = toolArgs;
@@ -350,17 +378,17 @@ const ToolExecutionMessage = React.memo(({ message }) => {
       } else if (action === "wait") {
         actionText = `Waiting for ${wait_seconds || "?"} second${wait_seconds !== 1 ? "s" : ""}...`;
       }
-      return /* @__PURE__ */ React.createElement(Box, { flexDirection: "column", borderStyle: "round", borderColor: "#ff9900", paddingX: 1, marginBottom: 1, flexGrow: 0, alignSelf: "flex-start" }, /* @__PURE__ */ React.createElement(Box, null, /* @__PURE__ */ React.createElement(Text, { color: "#00ccff" }, /* @__PURE__ */ React.createElement(Spinner, { type: "arc" })), /* @__PURE__ */ React.createElement(Text, { color: "#ff9900", bold: true }, " ", toolInfo.emoji, " ", actionText)));
+      return /* @__PURE__ */ React.createElement(ToolBoxContainer, null, /* @__PURE__ */ React.createElement(Box, { flexDirection: "column", borderStyle: "round", borderColor: "#ff9900", paddingX: 1, marginBottom: 1, flexGrow: 0, alignSelf: "flex-start" }, /* @__PURE__ */ React.createElement(Box, { flexWrap: "wrap" }, /* @__PURE__ */ React.createElement(Text, { color: theme.accent }, /* @__PURE__ */ React.createElement(Spinner, { type: "arc" })), /* @__PURE__ */ React.createElement(Text, { color: "#ff9900", bold: true }, " ", toolInfo.emoji, " ", actionText))));
     }
     if (toolName === "get_diff" && toolArgs) {
       const { filePath, staged, reason_text } = toolArgs;
       const diffTarget = filePath ? `for ${filePath}` : "for all files";
       const stagedText = staged ? " (staged)" : "";
-      return /* @__PURE__ */ React.createElement(Box, { flexDirection: "column", borderStyle: "round", borderColor: "#00ccff", paddingX: 1, marginBottom: 1, flexGrow: 0, alignSelf: "flex-start" }, /* @__PURE__ */ React.createElement(Box, null, /* @__PURE__ */ React.createElement(Text, { color: "#00ccff" }, /* @__PURE__ */ React.createElement(Spinner, { type: "arc" })), /* @__PURE__ */ React.createElement(Text, { color: "#00ccff", bold: true }, " ", toolInfo.emoji, " Getting diff ", diffTarget, stagedText, "...")));
+      return /* @__PURE__ */ React.createElement(ToolBoxContainer, null, /* @__PURE__ */ React.createElement(Box, { flexDirection: "column", borderStyle: "round", borderColor: theme.accent, paddingX: 1, marginBottom: 1, flexGrow: 0, alignSelf: "flex-start" }, /* @__PURE__ */ React.createElement(Box, { flexWrap: "wrap" }, /* @__PURE__ */ React.createElement(Text, { color: theme.accent }, /* @__PURE__ */ React.createElement(Spinner, { type: "arc" })), /* @__PURE__ */ React.createElement(Text, { color: theme.accent, bold: true }, " ", toolInfo.emoji, " Getting diff ", diffTarget, stagedText, "..."))));
     }
     if (toolName === "web_search" && toolArgs) {
       const { query } = toolArgs;
-      return /* @__PURE__ */ React.createElement(Box, { flexDirection: "column", borderStyle: "round", borderColor: "#00ccff", paddingX: 1, marginBottom: 1, flexGrow: 0, alignSelf: "flex-start" }, /* @__PURE__ */ React.createElement(Box, null, /* @__PURE__ */ React.createElement(Text, { color: "#00ccff" }, /* @__PURE__ */ React.createElement(Spinner, { type: "arc" })), /* @__PURE__ */ React.createElement(Text, { color: "#00ccff", bold: true }, " ", toolInfo.emoji, " Searching the web for "), /* @__PURE__ */ React.createElement(Text, { color: "#00ccff" }, '"', query, '"...')));
+      return /* @__PURE__ */ React.createElement(ToolBoxContainer, null, /* @__PURE__ */ React.createElement(Box, { flexDirection: "column", borderStyle: "round", borderColor: theme.accent, paddingX: 1, marginBottom: 1, flexGrow: 0, alignSelf: "flex-start" }, /* @__PURE__ */ React.createElement(Box, { flexWrap: "wrap" }, /* @__PURE__ */ React.createElement(Text, { color: theme.accent }, /* @__PURE__ */ React.createElement(Spinner, { type: "arc" })), /* @__PURE__ */ React.createElement(Text, { color: theme.accent, bold: true }, " ", toolInfo.emoji, " Searching the web for "), /* @__PURE__ */ React.createElement(Text, { color: theme.accent }, '"', query, '"...'))));
     }
     if (toolName === "fast_context_search" && toolArgs) {
       const { query } = toolArgs;
@@ -388,12 +416,12 @@ const ToolExecutionMessage = React.memo(({ message }) => {
       } catch (e) {
       }
       const truncatedQuery = query && query.length > 50 ? query.substring(0, 47) + "..." : query || "";
-      return /* @__PURE__ */ React.createElement(Box, { flexDirection: "column", borderStyle: "round", borderColor: "#00ccff", paddingX: 1, marginBottom: 1, flexGrow: 0, alignSelf: "flex-start" }, /* @__PURE__ */ React.createElement(Box, null, /* @__PURE__ */ React.createElement(Text, { color: "#00ccff" }, /* @__PURE__ */ React.createElement(Spinner, { type: "arc" })), /* @__PURE__ */ React.createElement(Text, { color: "#00cc66", bold: true }, " Rapid Context "), /* @__PURE__ */ React.createElement(Text, { color: "#cccccc" }, ' "', truncatedQuery, '"')), scannedFiles.length > 0 && /* @__PURE__ */ React.createElement(Box, { flexDirection: "column", marginLeft: 2, marginTop: 1 }, scannedFiles.map((f, i) => /* @__PURE__ */ React.createElement(Text, { key: i, color: "#666666", wrap: "truncate-end" }, "- ", toRelativePath(f)))));
+      return /* @__PURE__ */ React.createElement(ToolBoxContainer, null, /* @__PURE__ */ React.createElement(Box, { flexDirection: "column", borderStyle: "round", borderColor: theme.accent, paddingX: 1, marginBottom: 1, flexGrow: 0, alignSelf: "flex-start" }, /* @__PURE__ */ React.createElement(Box, { flexWrap: "wrap" }, /* @__PURE__ */ React.createElement(Text, { color: theme.accent }, /* @__PURE__ */ React.createElement(Spinner, { type: "arc" })), /* @__PURE__ */ React.createElement(Text, { color: "#00cc66", bold: true }, " Rapid Context "), /* @__PURE__ */ React.createElement(Text, { color: "#cccccc" }, ' "', truncatedQuery, '"')), scannedFiles.length > 0 && /* @__PURE__ */ React.createElement(Box, { flexDirection: "column", marginLeft: 2, marginTop: 1 }, scannedFiles.map((f, i) => /* @__PURE__ */ React.createElement(Text, { key: i, color: "#666666", wrap: "truncate-end" }, "- ", toRelativePath(f))))));
     }
     if (toolName === "inspect_symbol" && toolArgs) {
       const { filePath, symbols, remoteContext } = toolArgs;
       const symbolList = Array.isArray(symbols) ? symbols.join(", ") : symbols || "symbols";
-      return /* @__PURE__ */ React.createElement(Box, { flexDirection: "column", borderStyle: "round", borderColor: "#00ccff", paddingX: 1, marginBottom: 1, flexGrow: 0, alignSelf: "flex-start" }, /* @__PURE__ */ React.createElement(Box, null, /* @__PURE__ */ React.createElement(Text, { color: "#00ccff" }, /* @__PURE__ */ React.createElement(Spinner, { type: "arc" })), /* @__PURE__ */ React.createElement(Text, { color: "#00ccff", bold: true }, " ", toolInfo.emoji, " Inspecting "), /* @__PURE__ */ React.createElement(Text, { color: "#00ccff" }, symbolList, " in ", formatPathWithContext(filePath, remoteContext), "...")));
+      return /* @__PURE__ */ React.createElement(ToolBoxContainer, null, /* @__PURE__ */ React.createElement(Box, { flexDirection: "column", borderStyle: "round", borderColor: theme.accent, paddingX: 1, marginBottom: 1, flexGrow: 0, alignSelf: "flex-start" }, /* @__PURE__ */ React.createElement(Box, { flexWrap: "wrap" }, /* @__PURE__ */ React.createElement(Text, { color: theme.accent }, /* @__PURE__ */ React.createElement(Spinner, { type: "arc" })), /* @__PURE__ */ React.createElement(Text, { color: theme.accent, bold: true }, " ", toolInfo.emoji, " Inspecting "), /* @__PURE__ */ React.createElement(Text, { color: theme.accent }, symbolList, " in ", formatPathWithContext(filePath, remoteContext), "..."))));
     }
     if (toolName === "sub_agent" && toolArgs) {
       const action = toolArgs.action;
@@ -406,14 +434,14 @@ const ToolExecutionMessage = React.memo(({ message }) => {
         const displayLines = promptLines.slice(0, maxLines);
         const remainingLines = promptLines.length - maxLines;
         const truncatedPrompt = displayLines.join("\n");
-        return /* @__PURE__ */ React.createElement(Box, { flexDirection: "column", borderStyle: "round", borderColor: "#00ccff", paddingX: 1, marginBottom: 1, flexGrow: 0, alignSelf: "flex-start" }, /* @__PURE__ */ React.createElement(Box, null, /* @__PURE__ */ React.createElement(Text, { color: "#00ccff" }, /* @__PURE__ */ React.createElement(Spinner, { type: "arc" })), /* @__PURE__ */ React.createElement(Text, { color: "#9945FF", bold: true }, " ", toolInfo.emoji, " Spawning Sub-Agent "), /* @__PURE__ */ React.createElement(Text, { color: "#666666", dimColor: true }, "(", modelName, ")")), /* @__PURE__ */ React.createElement(Box, { marginLeft: 2, flexDirection: "column" }, /* @__PURE__ */ React.createElement(Text, { color: "#00ccff" }, truncatedPrompt), remainingLines > 0 && /* @__PURE__ */ React.createElement(Text, { color: "#666666", dimColor: true }, "... ", remainingLines, " more lines")));
+        return /* @__PURE__ */ React.createElement(ToolBoxContainer, null, /* @__PURE__ */ React.createElement(Box, { flexDirection: "column", borderStyle: "round", borderColor: theme.accent, paddingX: 1, marginBottom: 1, flexGrow: 0, alignSelf: "flex-start" }, /* @__PURE__ */ React.createElement(Box, { flexWrap: "wrap" }, /* @__PURE__ */ React.createElement(Text, { color: theme.accent }, /* @__PURE__ */ React.createElement(Spinner, { type: "arc" })), /* @__PURE__ */ React.createElement(Text, { color: "#9945FF", bold: true }, " ", toolInfo.emoji, " Spawning Sub-Agent "), /* @__PURE__ */ React.createElement(Text, { color: "#666666", dimColor: true }, "(", modelName, ")")), /* @__PURE__ */ React.createElement(Box, { marginLeft: 2, flexDirection: "column" }, /* @__PURE__ */ React.createElement(Text, { color: theme.accent }, truncatedPrompt), remainingLines > 0 && /* @__PURE__ */ React.createElement(Text, { color: "#666666", dimColor: true }, "... ", remainingLines, " more lines"))));
       } else if (action === "wait_for_status" || action === "status") {
         const delay = toolArgs.time_delay || 0;
         const agentId = toolArgs.agent_id || "unknown";
         const waitMessage = delay > 0 ? `Waiting for ${delay} seconds...` : "Checking status...";
-        return /* @__PURE__ */ React.createElement(Box, { flexDirection: "column", borderStyle: "round", borderColor: "#00ccff", paddingX: 1, marginBottom: 1, flexGrow: 0, alignSelf: "flex-start" }, /* @__PURE__ */ React.createElement(Box, null, /* @__PURE__ */ React.createElement(Text, { color: "#00ccff" }, /* @__PURE__ */ React.createElement(Spinner, { type: "arc" })), /* @__PURE__ */ React.createElement(Text, { color: "#9945FF", bold: true }, " ", toolInfo.emoji, " Sub Agent Status "), /* @__PURE__ */ React.createElement(Text, { color: "#666666", dimColor: true }, "(id: ", agentId, ")")), /* @__PURE__ */ React.createElement(Box, { marginLeft: 2 }, /* @__PURE__ */ React.createElement(Text, { color: "#00ccff" }, waitMessage)));
+        return /* @__PURE__ */ React.createElement(ToolBoxContainer, null, /* @__PURE__ */ React.createElement(Box, { flexDirection: "column", borderStyle: "round", borderColor: theme.accent, paddingX: 1, marginBottom: 1, flexGrow: 0, alignSelf: "flex-start" }, /* @__PURE__ */ React.createElement(Box, { flexWrap: "wrap" }, /* @__PURE__ */ React.createElement(Text, { color: theme.accent }, /* @__PURE__ */ React.createElement(Spinner, { type: "arc" })), /* @__PURE__ */ React.createElement(Text, { color: "#9945FF", bold: true }, " ", toolInfo.emoji, " Sub Agent Status "), /* @__PURE__ */ React.createElement(Text, { color: "#666666", dimColor: true }, "(id: ", agentId, ")")), /* @__PURE__ */ React.createElement(Box, { marginLeft: 2 }, /* @__PURE__ */ React.createElement(Text, { color: theme.accent }, waitMessage))));
       }
-      return /* @__PURE__ */ React.createElement(Box, { flexDirection: "column", borderStyle: "round", borderColor: "#00ccff", paddingX: 1, marginBottom: 1, flexGrow: 0, alignSelf: "flex-start" }, /* @__PURE__ */ React.createElement(Box, null, /* @__PURE__ */ React.createElement(Text, { color: "#00ccff" }, /* @__PURE__ */ React.createElement(Spinner, { type: "arc" })), /* @__PURE__ */ React.createElement(Text, { color: "#9945FF", bold: true }, " ", toolInfo.emoji, " Sub Agent "), /* @__PURE__ */ React.createElement(Text, { color: "#666666", dimColor: true }, "(", action, ")")));
+      return /* @__PURE__ */ React.createElement(ToolBoxContainer, null, /* @__PURE__ */ React.createElement(Box, { flexDirection: "column", borderStyle: "round", borderColor: theme.accent, paddingX: 1, marginBottom: 1, flexGrow: 0, alignSelf: "flex-start" }, /* @__PURE__ */ React.createElement(Box, { flexWrap: "wrap" }, /* @__PURE__ */ React.createElement(Text, { color: theme.accent }, /* @__PURE__ */ React.createElement(Spinner, { type: "arc" })), /* @__PURE__ */ React.createElement(Text, { color: "#9945FF", bold: true }, " ", toolInfo.emoji, " Sub Agent "), /* @__PURE__ */ React.createElement(Text, { color: "#666666", dimColor: true }, "(", action, ")"))));
     }
     if (toolName === "workflow" && toolArgs) {
       const action = toolArgs.action;
@@ -421,8 +449,8 @@ const ToolExecutionMessage = React.memo(({ message }) => {
       const exitType = toolArgs.exit_type;
       const reason = toolArgs.reason;
       let actionText = "Workflow action...";
-      let borderColor = "#00ccff";
-      let textColor = "#00ccff";
+      let borderColor = theme.accent;
+      let textColor = theme.accent;
       if (action === "step_complete") {
         actionText = `Completing Step ${stepNumber || "?"}...`;
         borderColor = "#00cc66";
@@ -442,16 +470,16 @@ const ToolExecutionMessage = React.memo(({ message }) => {
           textColor = "#00cc66";
         }
       }
-      return /* @__PURE__ */ React.createElement(Box, { flexDirection: "column", borderStyle: "round", borderColor, paddingX: 1, marginBottom: 1, flexGrow: 0, alignSelf: "flex-start" }, /* @__PURE__ */ React.createElement(Box, null, /* @__PURE__ */ React.createElement(Text, { color: "#00ccff" }, /* @__PURE__ */ React.createElement(Spinner, { type: "arc" })), /* @__PURE__ */ React.createElement(Text, { color: textColor, bold: true }, " \u{1F504} ", actionText)));
+      return /* @__PURE__ */ React.createElement(ToolBoxContainer, null, /* @__PURE__ */ React.createElement(Box, { flexDirection: "column", borderStyle: "round", borderColor, paddingX: 1, marginBottom: 1, flexGrow: 0, alignSelf: "flex-start" }, /* @__PURE__ */ React.createElement(Box, { flexWrap: "wrap" }, /* @__PURE__ */ React.createElement(Text, { color: theme.accent }, /* @__PURE__ */ React.createElement(Spinner, { type: "arc" })), /* @__PURE__ */ React.createElement(Text, { color: textColor, bold: true }, " \u{1F504} ", actionText))));
     }
     if (toolName === "add_mcp" && toolArgs) {
       const serverName = toolArgs.name || "unknown";
       const command = toolArgs.command || "";
       const serverArgs = Array.isArray(toolArgs.args) ? toolArgs.args.join(" ") : "";
       const fullCommand = serverArgs ? `${command} ${serverArgs}` : command;
-      return /* @__PURE__ */ React.createElement(Box, { flexDirection: "column", borderStyle: "round", borderColor: "#9945FF", paddingX: 1, marginBottom: 1, flexGrow: 0, alignSelf: "flex-start" }, /* @__PURE__ */ React.createElement(Box, null, /* @__PURE__ */ React.createElement(Text, { color: "#9945FF" }, /* @__PURE__ */ React.createElement(Spinner, { type: "arc" })), /* @__PURE__ */ React.createElement(Text, { color: "#9945FF", bold: true }, " \u{1F50C} Adding MCP server "), /* @__PURE__ */ React.createElement(Text, { color: "#cc99ff", bold: true }, serverName)), fullCommand && /* @__PURE__ */ React.createElement(Box, null, /* @__PURE__ */ React.createElement(Text, { color: "#666666", dimColor: true }, "   ", fullCommand)));
+      return /* @__PURE__ */ React.createElement(ToolBoxContainer, null, /* @__PURE__ */ React.createElement(Box, { flexDirection: "column", borderStyle: "round", borderColor: "#9945FF", paddingX: 1, marginBottom: 1, flexGrow: 0, alignSelf: "flex-start" }, /* @__PURE__ */ React.createElement(Box, { flexWrap: "wrap" }, /* @__PURE__ */ React.createElement(Text, { color: "#9945FF" }, /* @__PURE__ */ React.createElement(Spinner, { type: "arc" })), /* @__PURE__ */ React.createElement(Text, { color: "#9945FF", bold: true }, " \u{1F50C} Adding MCP server "), /* @__PURE__ */ React.createElement(Text, { color: "#cc99ff", bold: true }, serverName)), fullCommand && /* @__PURE__ */ React.createElement(Box, null, /* @__PURE__ */ React.createElement(Text, { color: "#666666", dimColor: true }, "   ", fullCommand))));
     }
-    return /* @__PURE__ */ React.createElement(Box, { flexDirection: "column", borderStyle: "round", borderColor: "#003b59", paddingX: 1, marginBottom: 1, flexGrow: 0, alignSelf: "flex-start" }, /* @__PURE__ */ React.createElement(Box, null, /* @__PURE__ */ React.createElement(Text, { color: "#00ccff" }, /* @__PURE__ */ React.createElement(Spinner, { type: "arc" })), /* @__PURE__ */ React.createElement(Text, { color: "#00ccff", bold: true }, " ", toolInfo.verb, "...")));
+    return /* @__PURE__ */ React.createElement(ToolBoxContainer, null, /* @__PURE__ */ React.createElement(Box, { flexDirection: "column", borderStyle: "round", borderColor: theme.bgAccent, paddingX: 1, marginBottom: 1, flexGrow: 0, alignSelf: "flex-start" }, /* @__PURE__ */ React.createElement(Box, { flexWrap: "wrap" }, /* @__PURE__ */ React.createElement(Text, { color: theme.accent }, /* @__PURE__ */ React.createElement(Spinner, { type: "arc" })), /* @__PURE__ */ React.createElement(Text, { color: theme.accent, bold: true }, " ", toolInfo.verb, "..."))));
   }
   if (status === "error") {
     if (toolName === "execute_command" && toolArgs) {
@@ -460,22 +488,22 @@ const ToolExecutionMessage = React.memo(({ message }) => {
       const { cwd, remoteContext } = toolArgs;
       const cleanResult = cleanShellOutput(result);
       const formattedCwd = cwd && remoteContext ? `${remoteContext}:${cwd.replace(/\\/g, "/")}` : (cwd || "").replace(/\\/g, "/");
-      return /* @__PURE__ */ React.createElement(Box, { flexDirection: "column", borderStyle: "round", borderColor: "#ff3366", paddingX: 1, marginBottom: 1, flexGrow: 0, alignSelf: "flex-start" }, /* @__PURE__ */ React.createElement(Box, { marginBottom: 1 }, /* @__PURE__ */ React.createElement(Text, null, /* @__PURE__ */ React.createElement(Text, { color: "#ff3366", bold: true }, "\u2717 Shell "), /* @__PURE__ */ React.createElement(Text, { color: "#666666" }, truncatedCommand, " "), cwd && /* @__PURE__ */ React.createElement(Text, { color: "#666666", dimColor: true }, "[current working directory ", formattedCwd, "]"))), cleanResult && /* @__PURE__ */ React.createElement(Box, null, /* @__PURE__ */ React.createElement(Text, { wrap: "wrap" }, cleanResult)));
+      return /* @__PURE__ */ React.createElement(ToolBoxContainer, null, /* @__PURE__ */ React.createElement(Box, { flexDirection: "column", borderStyle: "round", borderColor: "#ff3366", paddingX: 1, marginBottom: 1, flexGrow: 0, alignSelf: "flex-start" }, /* @__PURE__ */ React.createElement(Box, { flexWrap: "wrap", marginBottom: 1 }, /* @__PURE__ */ React.createElement(Text, null, /* @__PURE__ */ React.createElement(Text, { color: "#ff3366", bold: true }, "\u2717 Shell "), /* @__PURE__ */ React.createElement(Text, { color: "#666666" }, truncatedCommand, " "), cwd && /* @__PURE__ */ React.createElement(Text, { color: "#666666", dimColor: true }, "[current working directory ", formattedCwd, "]"))), cleanResult && /* @__PURE__ */ React.createElement(Box, null, /* @__PURE__ */ React.createElement(Text, { wrap: "wrap" }, cleanResult))));
     }
-    return /* @__PURE__ */ React.createElement(Box, { flexDirection: "column", borderStyle: "round", borderColor: "#ff3366", paddingX: 1, marginBottom: 1, flexGrow: 0, alignSelf: "flex-start" }, /* @__PURE__ */ React.createElement(Box, null, /* @__PURE__ */ React.createElement(Text, { color: "#ff3366", bold: true }, "\u2717 ", toolInfo.emoji, " ", toolInfo.verb, " failed")), /* @__PURE__ */ React.createElement(Box, { paddingLeft: 1, marginTop: 1 }, /* @__PURE__ */ React.createElement(Text, { color: "#ff3366" }, error || "The Agent passed invalid parameters")));
+    return /* @__PURE__ */ React.createElement(ToolBoxContainer, null, /* @__PURE__ */ React.createElement(Box, { flexDirection: "column", borderStyle: "round", borderColor: "#ff3366", paddingX: 1, marginBottom: 1, flexGrow: 0, alignSelf: "flex-start" }, /* @__PURE__ */ React.createElement(Box, { flexWrap: "wrap" }, /* @__PURE__ */ React.createElement(Text, { color: "#ff3366", bold: true }, "\u2717 ", toolInfo.emoji, " ", toolInfo.verb, " failed")), /* @__PURE__ */ React.createElement(Box, { paddingLeft: 1, marginTop: 1 }, /* @__PURE__ */ React.createElement(Text, { color: "#ff3366" }, error || "The Agent passed invalid parameters"))));
   }
   if (status === "completed") {
     if (toolInfo.isMCP) {
       return renderWithThinking(
-        /* @__PURE__ */ React.createElement(Box, { flexDirection: "column", borderStyle: "round", borderColor: "#00cc66", paddingX: 1, marginBottom: 1, flexGrow: 0, alignSelf: "flex-start" }, /* @__PURE__ */ React.createElement(Box, null, /* @__PURE__ */ React.createElement(Text, { color: "#00cc66", bold: true }, "\u2713 MCP"), /* @__PURE__ */ React.createElement(Text, { color: "#aaaaaa" }, " ", toolInfo.serverName, " ", toolInfo.mcpToolName)))
+        /* @__PURE__ */ React.createElement(Box, { flexDirection: "column", borderStyle: "round", borderColor: "#00cc66", paddingX: 1, marginBottom: 1, flexGrow: 0, alignSelf: "flex-start" }, /* @__PURE__ */ React.createElement(Box, { flexWrap: "wrap" }, /* @__PURE__ */ React.createElement(Text, { color: "#00cc66", bold: true }, "\u2713 MCP"), /* @__PURE__ */ React.createElement(Text, { color: "#aaaaaa" }, " ", toolInfo.serverName, " ", toolInfo.mcpToolName)))
       );
     }
-    if (toolName === "mark_task_complete" || toolName === "create_plan") {
+    if (toolName === "mark_task_complete" || toolName === "create_plan" || toolName === "todo_write") {
       return null;
     }
     if (toolName === "auto_context_compaction") {
       return renderWithThinking(
-        /* @__PURE__ */ React.createElement(Box, { flexDirection: "column", borderStyle: "round", borderColor: "#00cc66", paddingX: 1, marginBottom: 1, flexGrow: 0, alignSelf: "flex-start" }, /* @__PURE__ */ React.createElement(Box, null, /* @__PURE__ */ React.createElement(Text, { color: "#00cc66", bold: true }, "Auto compacted context")), result && /* @__PURE__ */ React.createElement(Box, { paddingLeft: 1, marginTop: 1 }, /* @__PURE__ */ React.createElement(Text, { color: "#aaaaaa" }, result)))
+        /* @__PURE__ */ React.createElement(Box, { flexDirection: "column", borderStyle: "round", borderColor: "#00cc66", paddingX: 1, marginBottom: 1, flexGrow: 0, alignSelf: "flex-start" }, /* @__PURE__ */ React.createElement(Box, { flexWrap: "wrap" }, /* @__PURE__ */ React.createElement(Text, { color: "#00cc66", bold: true }, "Auto compacted context")), result && /* @__PURE__ */ React.createElement(Box, { paddingLeft: 1, marginTop: 1 }, /* @__PURE__ */ React.createElement(Text, { color: "#aaaaaa" }, result)))
       );
     }
     if (toolName === "execute_command" && toolArgs) {
@@ -487,30 +515,36 @@ const ToolExecutionMessage = React.memo(({ message }) => {
       const { cwd, remoteContext } = toolArgs;
       const cleanResult = cleanShellOutput(result);
       const formattedCwd = cwd && remoteContext ? `${remoteContext}:${cwd.replace(/\\/g, "/")}` : (cwd || "").replace(/\\/g, "/");
+      const wasTransferred = !!toolArgs?.timeoutTransferred;
+      const shellBorderColor = wasTransferred ? "#f59e0b" : "#00cc66";
+      const shellHeaderColor = wasTransferred ? "#f59e0b" : "#00cc66";
+      const shellIcon = wasTransferred ? "\u23F1" : "\u2713";
       return renderWithThinking(
-        /* @__PURE__ */ React.createElement(Box, { flexDirection: "column", borderStyle: "round", borderColor: "#00cc66", paddingX: 1, marginBottom: 1, flexGrow: 0, alignSelf: "flex-start" }, /* @__PURE__ */ React.createElement(Box, { marginBottom: 1 }, /* @__PURE__ */ React.createElement(Text, null, /* @__PURE__ */ React.createElement(Text, { color: "#00cc66", bold: true }, "\u2713 Shell "), /* @__PURE__ */ React.createElement(Text, { color: "#666666" }, truncatedCommand, " "), cwd && /* @__PURE__ */ React.createElement(Text, { color: "#666666", dimColor: true }, "[current working directory ", formattedCwd, "]"))), cleanResult && /* @__PURE__ */ React.createElement(Box, null, /* @__PURE__ */ React.createElement(Text, { wrap: "wrap" }, cleanResult)))
+        /* @__PURE__ */ React.createElement(Box, { flexDirection: "column", borderStyle: "round", borderColor: shellBorderColor, paddingX: 1, marginBottom: 1, flexGrow: 0, alignSelf: "flex-start" }, /* @__PURE__ */ React.createElement(Box, { flexWrap: "wrap", marginBottom: 1 }, /* @__PURE__ */ React.createElement(Text, null, /* @__PURE__ */ React.createElement(Text, { color: shellHeaderColor, bold: true }, shellIcon, " Shell "), /* @__PURE__ */ React.createElement(Text, { color: "#666666" }, truncatedCommand, " "), cwd && /* @__PURE__ */ React.createElement(Text, { color: "#666666", dimColor: true }, "[current working directory ", formattedCwd, "]"))), cleanResult && /* @__PURE__ */ React.createElement(Box, null, /* @__PURE__ */ React.createElement(Text, { wrap: "wrap" }, cleanResult)), wasTransferred && /* @__PURE__ */ React.createElement(Box, { marginTop: 1 }, /* @__PURE__ */ React.createElement(Text, { color: "#f59e0b", bold: true }, "\u26A0 Timeout exceeded \u2014 transferred to background shell")))
       );
     }
     if (toolName === "view_file" && toolArgs) {
       const { AbsolutePath, remoteContext } = toolArgs;
       const lineInfo = getViewFileLineInfo(toolArgs, result);
       return renderWithThinking(
-        /* @__PURE__ */ React.createElement(Box, { flexDirection: "column", borderStyle: "round", borderColor: "#00ccff", paddingX: 1, marginBottom: 1, flexGrow: 0, alignSelf: "flex-start" }, /* @__PURE__ */ React.createElement(Box, null, /* @__PURE__ */ React.createElement(Text, { color: "#00cc66", bold: true }, "\u2713 ", toolInfo.emoji, " Read ", lineInfo, " from "), /* @__PURE__ */ React.createElement(Text, { color: "#00ccff" }, formatPathWithContext(AbsolutePath, remoteContext))))
+        /* @__PURE__ */ React.createElement(Box, { flexDirection: "column", borderStyle: "round", borderColor: theme.accent, paddingX: 1, marginBottom: 1, flexGrow: 0, alignSelf: "flex-start" }, /* @__PURE__ */ React.createElement(Box, { flexWrap: "wrap" }, /* @__PURE__ */ React.createElement(Text, { color: "#00cc66", bold: true }, "\u2713 ", toolInfo.emoji, " Read ", lineInfo, " from "), /* @__PURE__ */ React.createElement(Text, { color: theme.accent }, formatPathWithContext(AbsolutePath, remoteContext))))
       );
     }
     if (toolName === "write_to_file" && toolArgs) {
       const { TargetFile, CodeContent, remoteContext } = toolArgs;
       const lines = CodeContent ? CodeContent.split("\n").length : 0;
       return renderWithThinking(
-        /* @__PURE__ */ React.createElement(Box, { flexDirection: "column", borderStyle: "round", borderColor: "#00ccff", paddingX: 1, marginBottom: 1, flexGrow: 0, alignSelf: "flex-start" }, /* @__PURE__ */ React.createElement(Box, { flexWrap: "wrap" }, /* @__PURE__ */ React.createElement(Text, { color: "#00cc66", bold: true }, "\u2713 ", toolInfo.emoji, " Wrote to "), /* @__PURE__ */ React.createElement(Text, { color: "#00ccff" }, formatPathWithContext(TargetFile, remoteContext)), lines > 0 && /* @__PURE__ */ React.createElement(Text, { color: "green" }, " +", lines)), renderDiffSnippet(void 0, CodeContent))
+        /* @__PURE__ */ React.createElement(Box, { flexDirection: "column", borderStyle: "round", borderColor: theme.accent, paddingX: 1, marginBottom: 1, flexGrow: 0, alignSelf: "flex-start" }, /* @__PURE__ */ React.createElement(Box, { flexWrap: "wrap" }, /* @__PURE__ */ React.createElement(Text, { color: "#00cc66", bold: true }, "\u2713 ", toolInfo.emoji, " Wrote to "), /* @__PURE__ */ React.createElement(Text, { color: theme.accent }, formatPathWithContext(TargetFile, remoteContext)), lines > 0 && /* @__PURE__ */ React.createElement(Text, { color: "green" }, " +", lines)), renderDiffSnippet(void 0, CodeContent, { startLine: 1 }))
       );
     }
     if (toolName === "edit_file" && toolArgs) {
       const { file_path, remoteContext, replacement, search_pattern } = toolArgs;
       const added = replacement ? replacement.split("\n").length : 0;
       const removed = search_pattern ? search_pattern.split("\n").length : 0;
+      const lineMatch = result?.match(/at line (\d+)/);
+      const editStartLine = lineMatch ? parseInt(lineMatch[1], 10) : 1;
       return renderWithThinking(
-        /* @__PURE__ */ React.createElement(Box, { flexDirection: "column", borderStyle: "round", borderColor: "#00ccff", paddingX: 1, marginBottom: 1, flexGrow: 0, alignSelf: "flex-start" }, /* @__PURE__ */ React.createElement(Box, { flexWrap: "wrap" }, /* @__PURE__ */ React.createElement(Text, { color: "#00cc66", bold: true }, "\u2713 ", toolInfo.emoji, " Edited "), /* @__PURE__ */ React.createElement(Text, { color: "#00ccff" }, formatPathWithContext(file_path, remoteContext)), /* @__PURE__ */ React.createElement(Text, { color: "green" }, " +", added), /* @__PURE__ */ React.createElement(Text, { color: "red" }, " -", removed)), renderDiffSnippet(search_pattern, replacement))
+        /* @__PURE__ */ React.createElement(Box, { flexDirection: "column", borderStyle: "round", borderColor: theme.accent, paddingX: 1, marginBottom: 1, flexGrow: 0, alignSelf: "flex-start" }, /* @__PURE__ */ React.createElement(Box, { flexWrap: "wrap" }, /* @__PURE__ */ React.createElement(Text, { color: "#00cc66", bold: true }, "\u2713 ", toolInfo.emoji, " Edited "), /* @__PURE__ */ React.createElement(Text, { color: theme.accent }, formatPathWithContext(file_path, remoteContext)), /* @__PURE__ */ React.createElement(Text, { color: "green" }, " +", added), /* @__PURE__ */ React.createElement(Text, { color: "red" }, " -", removed)), renderDiffSnippet(search_pattern, replacement, { startLine: editStartLine }))
       );
     }
     if (toolName === "multi_edit_file" && toolArgs) {
@@ -526,14 +560,14 @@ const ToolExecutionMessage = React.memo(({ message }) => {
           removed += (edit.search_pattern || edit.TargetContent).split("\n").length;
         }
       });
-      const firstEdit = editList[0];
-      const searchExample = firstEdit ? firstEdit.search_pattern || firstEdit.TargetContent : void 0;
-      const replaceExample = firstEdit ? firstEdit.replacement || firstEdit.ReplacementContent : void 0;
+      const multiLineMatch = result?.match(/at lines ([\d, ]+)/);
+      const editLineNumbers = multiLineMatch ? multiLineMatch[1].split(",").map((s) => parseInt(s.trim(), 10)) : [];
       return renderWithThinking(
-        /* @__PURE__ */ React.createElement(Box, { flexDirection: "column", borderStyle: "round", borderColor: "#00ccff", paddingX: 1, marginBottom: 1, flexGrow: 0, alignSelf: "flex-start" }, /* @__PURE__ */ React.createElement(Box, { flexWrap: "wrap" }, /* @__PURE__ */ React.createElement(Text, { color: "#00cc66", bold: true }, "\u2713 ", toolInfo.emoji, " Edited "), /* @__PURE__ */ React.createElement(Text, { color: "#00ccff" }, formatPathWithContext(file_path, remoteContext)), /* @__PURE__ */ React.createElement(Text, { color: "green" }, " +", added), /* @__PURE__ */ React.createElement(Text, { color: "red" }, " -", removed)), editList.length > 0 ? /* @__PURE__ */ React.createElement(Box, { flexDirection: "column", marginTop: 0 }, editList.map((edit, index) => {
+        /* @__PURE__ */ React.createElement(Box, { flexDirection: "column", borderStyle: "round", borderColor: theme.accent, paddingX: 1, marginBottom: 1, flexGrow: 0, alignSelf: "flex-start" }, /* @__PURE__ */ React.createElement(Box, { flexWrap: "wrap" }, /* @__PURE__ */ React.createElement(Text, { color: "#00cc66", bold: true }, "\u2713 ", toolInfo.emoji, " Edited "), /* @__PURE__ */ React.createElement(Text, { color: theme.accent }, formatPathWithContext(file_path, remoteContext)), /* @__PURE__ */ React.createElement(Text, { color: "green" }, " +", added), /* @__PURE__ */ React.createElement(Text, { color: "red" }, " -", removed)), editList.length > 0 ? /* @__PURE__ */ React.createElement(Box, { flexDirection: "column", marginTop: 0 }, editList.map((edit, index) => {
           const search = edit.search_pattern || edit.TargetContent;
           const replace = edit.replacement || edit.ReplacementContent;
-          return /* @__PURE__ */ React.createElement(React.Fragment, { key: index }, renderDiffSnippet(search, replace, { compact: index > 0 }));
+          const editLine = editLineNumbers[index] || 1;
+          return /* @__PURE__ */ React.createElement(React.Fragment, { key: index }, renderDiffSnippet(search, replace, { compact: index > 0, startLine: editLine }));
         })) : null)
       );
     }
@@ -541,7 +575,7 @@ const ToolExecutionMessage = React.memo(({ message }) => {
       const { DirectoryPath, remoteContext } = toolArgs;
       const itemStats = parseListDirResult(result);
       return renderWithThinking(
-        /* @__PURE__ */ React.createElement(Box, { flexDirection: "column", borderStyle: "round", borderColor: "#00ccff", paddingX: 1, marginBottom: 1, flexGrow: 0, alignSelf: "flex-start" }, /* @__PURE__ */ React.createElement(Box, null, /* @__PURE__ */ React.createElement(Text, { color: "#00cc66", bold: true }, "\u2713 ", toolInfo.emoji, " Listed "), /* @__PURE__ */ React.createElement(Text, { color: "#00ccff" }, formatPathWithContext(DirectoryPath, remoteContext)), itemStats !== null && /* @__PURE__ */ React.createElement(Text, { color: "#666666" }, " (", itemStats.dirs, " dir", itemStats.dirs !== 1 ? "s" : "", ", ", itemStats.files, " file", itemStats.files !== 1 ? "s" : "", ")")))
+        /* @__PURE__ */ React.createElement(Box, { flexDirection: "column", borderStyle: "round", borderColor: theme.accent, paddingX: 1, marginBottom: 1, flexGrow: 0, alignSelf: "flex-start" }, /* @__PURE__ */ React.createElement(Box, { flexWrap: "wrap" }, /* @__PURE__ */ React.createElement(Text, { color: "#00cc66", bold: true }, "\u2713 ", toolInfo.emoji, " Listed "), /* @__PURE__ */ React.createElement(Text, { color: theme.accent }, formatPathWithContext(DirectoryPath, remoteContext)), itemStats !== null && /* @__PURE__ */ React.createElement(Text, { color: "#666666" }, " (", itemStats.dirs, " dir", itemStats.dirs !== 1 ? "s" : "", ", ", itemStats.files, " file", itemStats.files !== 1 ? "s" : "", ")")))
       );
     }
     if (toolName === "grep_search" && toolArgs) {
@@ -551,7 +585,7 @@ const ToolExecutionMessage = React.memo(({ message }) => {
       const hasExtension = /\.[a-zA-Z0-9]{1,10}$/.test(SearchPath || "");
       const pathType = hasExtension ? "file" : "directory";
       return renderWithThinking(
-        /* @__PURE__ */ React.createElement(Box, { flexDirection: "column", borderStyle: "round", borderColor: "#00ccff", paddingX: 1, marginBottom: 1, flexGrow: 0, alignSelf: "flex-start" }, /* @__PURE__ */ React.createElement(Box, { flexWrap: "wrap" }, /* @__PURE__ */ React.createElement(Text, { color: "#00cc66", bold: true }, "\u2713 ", toolInfo.emoji, " Searched for "), /* @__PURE__ */ React.createElement(Text, { color: "#00ccff" }, '"', Query, '"'), searchPathRelative && /* @__PURE__ */ React.createElement(Text, { color: "#666666" }, " in ", /* @__PURE__ */ React.createElement(Text, { color: "#00ccff" }, searchPathRelative), " ", pathType), searchResults && /* @__PURE__ */ React.createElement(Text, { color: "#666666" }, " (", searchResults.matches, " match", searchResults.matches !== 1 ? "es" : "", " in ", searchResults.files, " file", searchResults.files !== 1 ? "s" : "", ")"), !searchResults && result && /* @__PURE__ */ React.createElement(Text, { color: "#666666" }, " (no matches)")))
+        /* @__PURE__ */ React.createElement(Box, { flexDirection: "column", borderStyle: "round", borderColor: theme.accent, paddingX: 1, marginBottom: 1, flexGrow: 0, alignSelf: "flex-start" }, /* @__PURE__ */ React.createElement(Box, { flexWrap: "wrap" }, /* @__PURE__ */ React.createElement(Text, { color: "#00cc66", bold: true }, "\u2713 ", toolInfo.emoji, " Searched for "), /* @__PURE__ */ React.createElement(Text, { color: theme.accent }, '"', Query, '"'), searchPathRelative && /* @__PURE__ */ React.createElement(Text, { color: "#666666" }, " in ", /* @__PURE__ */ React.createElement(Text, { color: theme.accent }, searchPathRelative), " ", pathType), searchResults && /* @__PURE__ */ React.createElement(Text, { color: "#666666" }, " (", searchResults.matches, " match", searchResults.matches !== 1 ? "es" : "", " in ", searchResults.files, " file", searchResults.files !== 1 ? "s" : "", ")"), !searchResults && result && /* @__PURE__ */ React.createElement(Text, { color: "#666666" }, " (no matches)")))
       );
     }
     if (toolName === "find_files" && toolArgs) {
@@ -559,19 +593,19 @@ const ToolExecutionMessage = React.memo(({ message }) => {
       const displayPattern = pattern || Pattern || "*";
       const fileCount = parseFindFilesResult(result);
       return renderWithThinking(
-        /* @__PURE__ */ React.createElement(Box, { flexDirection: "column", borderStyle: "round", borderColor: "#00ccff", paddingX: 1, marginBottom: 1, flexGrow: 0, alignSelf: "flex-start" }, /* @__PURE__ */ React.createElement(Box, null, /* @__PURE__ */ React.createElement(Text, { color: "#00cc66", bold: true }, "\u2713 ", toolInfo.emoji, " Found ", fileCount !== null ? fileCount : 0, " files matching "), /* @__PURE__ */ React.createElement(Text, { color: "#00ccff" }, '"', displayPattern, '"')))
+        /* @__PURE__ */ React.createElement(Box, { flexDirection: "column", borderStyle: "round", borderColor: theme.accent, paddingX: 1, marginBottom: 1, flexGrow: 0, alignSelf: "flex-start" }, /* @__PURE__ */ React.createElement(Box, { flexWrap: "wrap" }, /* @__PURE__ */ React.createElement(Text, { color: "#00cc66", bold: true }, "\u2713 ", toolInfo.emoji, " Found ", fileCount !== null ? fileCount : 0, " files matching "), /* @__PURE__ */ React.createElement(Text, { color: theme.accent }, '"', displayPattern, '"')))
       );
     }
     if (toolName === "web_search" && toolArgs) {
       const { query } = toolArgs;
       return renderWithThinking(
-        /* @__PURE__ */ React.createElement(Box, { flexDirection: "column", borderStyle: "round", borderColor: "#00ccff", paddingX: 1, marginBottom: 1, flexGrow: 0, alignSelf: "flex-start" }, /* @__PURE__ */ React.createElement(Box, null, /* @__PURE__ */ React.createElement(Text, { color: "#00cc66", bold: true }, "\u2713 ", toolInfo.emoji, " Searched the web for "), /* @__PURE__ */ React.createElement(Text, { color: "#00ccff" }, '"', query, '"')))
+        /* @__PURE__ */ React.createElement(Box, { flexDirection: "column", borderStyle: "round", borderColor: theme.accent, paddingX: 1, marginBottom: 1, flexGrow: 0, alignSelf: "flex-start" }, /* @__PURE__ */ React.createElement(Box, { flexWrap: "wrap" }, /* @__PURE__ */ React.createElement(Text, { color: "#00cc66", bold: true }, "\u2713 ", toolInfo.emoji, " Searched the web for "), /* @__PURE__ */ React.createElement(Text, { color: theme.accent }, '"', query, '"')))
       );
     }
     if (toolName === "fetch_url" && toolArgs) {
       const { url } = toolArgs;
       return renderWithThinking(
-        /* @__PURE__ */ React.createElement(Box, { flexDirection: "column", borderStyle: "round", borderColor: "#00ccff", paddingX: 1, marginBottom: 1, flexGrow: 0, alignSelf: "flex-start" }, /* @__PURE__ */ React.createElement(Box, null, /* @__PURE__ */ React.createElement(Text, { color: "#00cc66", bold: true }, "\u2713 ", toolInfo.emoji, " Fetched "), /* @__PURE__ */ React.createElement(Text, { color: "#00ccff" }, url)))
+        /* @__PURE__ */ React.createElement(Box, { flexDirection: "column", borderStyle: "round", borderColor: theme.accent, paddingX: 1, marginBottom: 1, flexGrow: 0, alignSelf: "flex-start" }, /* @__PURE__ */ React.createElement(Box, { flexWrap: "wrap" }, /* @__PURE__ */ React.createElement(Text, { color: "#00cc66", bold: true }, "\u2713 ", toolInfo.emoji, " Fetched "), /* @__PURE__ */ React.createElement(Text, { color: theme.accent }, url)))
       );
     }
     if (toolName === "fast_context_search" && toolArgs) {
@@ -595,7 +629,7 @@ const ToolExecutionMessage = React.memo(({ message }) => {
       const MAX_DISPLAY_FILES = 10;
       const truncatedQuery = query && query.length > 50 ? query.substring(0, 47) + "..." : query || "";
       return renderWithThinking(
-        /* @__PURE__ */ React.createElement(Box, { flexDirection: "column", borderStyle: "round", borderColor: "#00ccff", paddingX: 1, marginBottom: 1, flexGrow: 0, alignSelf: "flex-start" }, /* @__PURE__ */ React.createElement(Box, null, /* @__PURE__ */ React.createElement(Text, { color: "#00cc66", bold: true }, "\u2713 Rapid Context "), /* @__PURE__ */ React.createElement(Text, { color: "#cccccc", wrap: "truncate-end" }, '"', truncatedQuery, '" '), stats && /* @__PURE__ */ React.createElement(Text, { color: "#666666" }, "(Searched ", stats.filesSearched, " files in ", (stats.duration / 1e3).toFixed(1), "s)")), /* @__PURE__ */ React.createElement(Box, { paddingLeft: 1, marginTop: 1, flexDirection: "column" }, !hasFiles && answer && /* @__PURE__ */ React.createElement(Text, { color: "#aaaaaa", wrap: "truncate-end" }, answer), hasFiles && /* @__PURE__ */ React.createElement(Box, { flexDirection: "column", marginTop: 0 }, scannedFiles.slice(0, MAX_DISPLAY_FILES).map((f, i) => {
+        /* @__PURE__ */ React.createElement(Box, { flexDirection: "column", borderStyle: "round", borderColor: theme.accent, paddingX: 1, marginBottom: 1, flexGrow: 0, alignSelf: "flex-start" }, /* @__PURE__ */ React.createElement(Box, { flexWrap: "wrap" }, /* @__PURE__ */ React.createElement(Text, { color: "#00cc66", bold: true }, "\u2713 Rapid Context "), /* @__PURE__ */ React.createElement(Text, { color: "#cccccc", wrap: "truncate-end" }, '"', truncatedQuery, '" '), stats && /* @__PURE__ */ React.createElement(Text, { color: "#666666" }, "(Searched ", stats.filesSearched, " files in ", (stats.duration / 1e3).toFixed(1), "s)")), /* @__PURE__ */ React.createElement(Box, { paddingLeft: 1, marginTop: 1, flexDirection: "column" }, !hasFiles && answer && /* @__PURE__ */ React.createElement(Text, { color: "#aaaaaa", wrap: "truncate-end" }, answer), hasFiles && /* @__PURE__ */ React.createElement(Box, { flexDirection: "column", marginTop: 0 }, scannedFiles.slice(0, MAX_DISPLAY_FILES).map((f, i) => {
           return /* @__PURE__ */ React.createElement(Text, { key: i, color: "#444444", wrap: "truncate-end" }, "- ", path.basename(f), " ", /* @__PURE__ */ React.createElement(Text, { color: "#333333", italic: true }, "(", toRelativePath(f), ")"));
         }), scannedFiles.length > MAX_DISPLAY_FILES && /* @__PURE__ */ React.createElement(Text, { color: "#444444", italic: true }, "...and ", scannedFiles.length - MAX_DISPLAY_FILES, " more files checked"))))
       );
@@ -606,7 +640,7 @@ const ToolExecutionMessage = React.memo(({ message }) => {
       const displayPath = filePath || "unknown";
       const noSymbols = result?.includes("No symbols found");
       return renderWithThinking(
-        /* @__PURE__ */ React.createElement(Box, { flexDirection: "column", borderStyle: "round", borderColor: "#00ccff", paddingX: 1, marginBottom: 1, flexGrow: 0, alignSelf: "flex-start" }, /* @__PURE__ */ React.createElement(Box, null, /* @__PURE__ */ React.createElement(Text, { color: "#00cc66", bold: true }, "\u2713 ", toolInfo.emoji, " Inspected "), /* @__PURE__ */ React.createElement(Text, { color: "#00ccff" }, formatPathWithContext(displayPath, remoteContext)), noSymbols && /* @__PURE__ */ React.createElement(Text, { color: "#666666" }, " (no symbols found)"), !noSymbols && symbolResult.found && /* @__PURE__ */ React.createElement(Text, { color: "#666666" }, " (", symbolResult.count, " symbol", symbolResult.count !== 1 ? "s" : "", ")")))
+        /* @__PURE__ */ React.createElement(Box, { flexDirection: "column", borderStyle: "round", borderColor: theme.accent, paddingX: 1, marginBottom: 1, flexGrow: 0, alignSelf: "flex-start" }, /* @__PURE__ */ React.createElement(Box, { flexWrap: "wrap" }, /* @__PURE__ */ React.createElement(Text, { color: "#00cc66", bold: true }, "\u2713 ", toolInfo.emoji, " Inspected "), /* @__PURE__ */ React.createElement(Text, { color: theme.accent }, formatPathWithContext(displayPath, remoteContext)), noSymbols && /* @__PURE__ */ React.createElement(Text, { color: "#666666" }, " (no symbols found)"), !noSymbols && symbolResult.found && /* @__PURE__ */ React.createElement(Text, { color: "#666666" }, " (", symbolResult.count, " symbol", symbolResult.count !== 1 ? "s" : "", ")")))
       );
     }
     if (toolName === "read_binary_file" && toolArgs) {
@@ -620,7 +654,7 @@ const ToolExecutionMessage = React.memo(({ message }) => {
       const isError = result?.includes("Error:") || !isSuccess;
       const errorMessage = result?.match(/Error:\s*(.+?)(?:\n|$)/)?.[1] || "";
       return renderWithThinking(
-        /* @__PURE__ */ React.createElement(Box, { flexDirection: "column", borderStyle: "round", borderColor: isSuccess ? "#00cc66" : "#ff6666", paddingX: 1, marginBottom: 1, flexGrow: 0, alignSelf: "flex-start" }, /* @__PURE__ */ React.createElement(Box, null, isSuccess ? /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(Text, { color: "#00cc66", bold: true }, "\u2713 ", toolInfo.emoji, " Read "), /* @__PURE__ */ React.createElement(Text, { color: "#ff9900" }, formatPathWithContext(file_path, remoteContext))) : /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(Text, { color: "#ff6666", bold: true }, "\u2717 ", toolInfo.emoji, " Read failed "), /* @__PURE__ */ React.createElement(Text, { color: "#ff9900" }, formatPathWithContext(file_path, remoteContext)))), isSuccess && (fileType || fileSize) && /* @__PURE__ */ React.createElement(Box, null, /* @__PURE__ */ React.createElement(Text, { color: "#666666" }, fileType && `${fileType}`, fileType && fileSize && " \u2022 ", fileSize && fileSize)), isError && errorMessage && /* @__PURE__ */ React.createElement(Box, null, /* @__PURE__ */ React.createElement(Text, { color: "#ff6666" }, errorMessage)))
+        /* @__PURE__ */ React.createElement(Box, { flexDirection: "column", borderStyle: "round", borderColor: isSuccess ? "#00cc66" : "#ff6666", paddingX: 1, marginBottom: 1, flexGrow: 0, alignSelf: "flex-start" }, /* @__PURE__ */ React.createElement(Box, { flexWrap: "wrap" }, isSuccess ? /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(Text, { color: "#00cc66", bold: true }, "\u2713 ", toolInfo.emoji, " Read "), /* @__PURE__ */ React.createElement(Text, { color: "#ff9900" }, formatPathWithContext(file_path, remoteContext))) : /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(Text, { color: "#ff6666", bold: true }, "\u2717 ", toolInfo.emoji, " Read failed "), /* @__PURE__ */ React.createElement(Text, { color: "#ff9900" }, formatPathWithContext(file_path, remoteContext)))), isSuccess && (fileType || fileSize) && /* @__PURE__ */ React.createElement(Box, null, /* @__PURE__ */ React.createElement(Text, { color: "#666666" }, fileType && `${fileType}`, fileType && fileSize && " \u2022 ", fileSize && fileSize)), isError && errorMessage && /* @__PURE__ */ React.createElement(Box, null, /* @__PURE__ */ React.createElement(Text, { color: "#ff6666" }, errorMessage)))
       );
     }
     if (toolName === "sub_agent") {
@@ -649,7 +683,7 @@ const ToolExecutionMessage = React.memo(({ message }) => {
         const spawnedId = idMatch ? idMatch[1] : "unknown";
         details = `(id: ${spawnedId})`;
         if (prompt) {
-          additionalContent = /* @__PURE__ */ React.createElement(Box, { marginTop: 1, marginLeft: 2 }, /* @__PURE__ */ React.createElement(Text, { color: "#00ccff" }, prompt));
+          additionalContent = /* @__PURE__ */ React.createElement(Box, { marginTop: 1, marginLeft: 2 }, /* @__PURE__ */ React.createElement(Text, { color: theme.accent }, prompt));
         }
       } else if (toolAction === "wait_for_status" || toolAction === "status") {
         title = "Sub Agent Status";
@@ -670,7 +704,7 @@ const ToolExecutionMessage = React.memo(({ message }) => {
         if (structResult) {
           details = `(id: ${structResult.agentId}, duration: ${structResult.duration})`;
           if (structResult.fileOperations && structResult.fileOperations.length > 0) {
-            additionalContent = /* @__PURE__ */ React.createElement(Box, { flexDirection: "column", marginTop: 1 }, /* @__PURE__ */ React.createElement(Text, { color: "#666666" }, "Files Modified:"), structResult.fileOperations.map((op, i) => /* @__PURE__ */ React.createElement(Box, { key: i, marginLeft: 2 }, /* @__PURE__ */ React.createElement(Text, { color: "#00ccff" }, "\u2022 ", op.path, " ", /* @__PURE__ */ React.createElement(Text, { color: "#666666", dimColor: true }, "(", op.type, ")")))));
+            additionalContent = /* @__PURE__ */ React.createElement(Box, { flexDirection: "column", marginTop: 1 }, /* @__PURE__ */ React.createElement(Text, { color: "#666666" }, "Files Modified:"), structResult.fileOperations.map((op, i) => /* @__PURE__ */ React.createElement(Box, { key: i, marginLeft: 2 }, /* @__PURE__ */ React.createElement(Text, { color: theme.accent }, "\u2022 ", op.path, " ", /* @__PURE__ */ React.createElement(Text, { color: "#666666", dimColor: true }, "(", op.type, ")")))));
           }
         } else {
           details = `(id: ${agentId})`;
@@ -679,7 +713,7 @@ const ToolExecutionMessage = React.memo(({ message }) => {
         }
       }
       return renderWithThinking(
-        /* @__PURE__ */ React.createElement(Box, { flexDirection: "column", borderStyle: "round", borderColor: "#00cc66", paddingX: 1, marginBottom: 1, flexGrow: 0, alignSelf: "flex-start" }, /* @__PURE__ */ React.createElement(Box, null, /* @__PURE__ */ React.createElement(Text, { color: "#00cc66", bold: true }, "\u2713 ", toolInfo.emoji, " ", title, " "), /* @__PURE__ */ React.createElement(Text, { color: "#666666" }, details)), additionalContent)
+        /* @__PURE__ */ React.createElement(Box, { flexDirection: "column", borderStyle: "round", borderColor: "#00cc66", paddingX: 1, marginBottom: 1, flexGrow: 0, alignSelf: "flex-start" }, /* @__PURE__ */ React.createElement(Box, { flexWrap: "wrap" }, /* @__PURE__ */ React.createElement(Text, { color: "#00cc66", bold: true }, "\u2713 ", toolInfo.emoji, " ", title, " "), /* @__PURE__ */ React.createElement(Text, { color: "#666666" }, details)), additionalContent)
       );
     }
     if (toolName === "create_image" && toolArgs) {
@@ -690,7 +724,7 @@ const ToolExecutionMessage = React.memo(({ message }) => {
       const format = formatMatch ? formatMatch[1] : "";
       const isSuccess = result?.includes("generated successfully");
       return renderWithThinking(
-        /* @__PURE__ */ React.createElement(Box, { flexDirection: "column", borderStyle: "round", borderColor: isSuccess ? "#00cc66" : "#ff6666", paddingX: 1, marginBottom: 1, flexGrow: 0, alignSelf: "flex-start" }, /* @__PURE__ */ React.createElement(Box, null, isSuccess ? /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(Text, { color: "#00cc66", bold: true }, "\u2713 ", toolInfo.emoji, " Generated image "), /* @__PURE__ */ React.createElement(Text, { color: "#00ccff" }, toRelativePath(output_path)), (fileSize || format) && /* @__PURE__ */ React.createElement(Text, { color: "#666666" }, " (", format, format && fileSize ? " \u2022 " : "", fileSize, ")")) : /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(Text, { color: "#ff6666", bold: true }, "\u2717 ", toolInfo.emoji, " Image generation failed"))))
+        /* @__PURE__ */ React.createElement(Box, { flexDirection: "column", borderStyle: "round", borderColor: isSuccess ? "#00cc66" : "#ff6666", paddingX: 1, marginBottom: 1, flexGrow: 0, alignSelf: "flex-start" }, /* @__PURE__ */ React.createElement(Box, { flexWrap: "wrap" }, isSuccess ? /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(Text, { color: "#00cc66", bold: true }, "\u2713 ", toolInfo.emoji, " Generated image "), /* @__PURE__ */ React.createElement(Text, { color: theme.accent }, toRelativePath(output_path)), (fileSize || format) && /* @__PURE__ */ React.createElement(Text, { color: "#666666" }, " (", format, format && fileSize ? " \u2022 " : "", fileSize, ")")) : /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(Text, { color: "#ff6666", bold: true }, "\u2717 ", toolInfo.emoji, " Image generation failed"))))
       );
     }
     if (toolName === "background_command" && toolArgs) {
@@ -710,8 +744,24 @@ const ToolExecutionMessage = React.memo(({ message }) => {
         actionText = "Waited for";
         actionDetail = wait_seconds ? `${wait_seconds} second${wait_seconds !== 1 ? "s" : ""}` : "";
       }
+      let outputPreview = "";
+      if ((action === "status" || action === "wait") && result) {
+        const sanitized = stripAnsi(processTerminalOutput(result)).replace(/[\x00-\x08\x0B\x0C\x0E-\x1F\x7F]/g, "").replace(/\r\n/g, "\n").replace(/\r/g, "\n");
+        const outputMatch = sanitized.match(/(?:Output Preview|Recent Output|Output \(last).*?:\n?([\s\S]*?)(?:\n\n|$)/i);
+        if (outputMatch) {
+          outputPreview = outputMatch[1].trim();
+        } else {
+          const lines = sanitized.split("\n").filter((l) => l.trim());
+          if (lines.length > 2) {
+            outputPreview = lines.slice(-5).join("\n");
+          }
+        }
+        if (outputPreview.length > 500) {
+          outputPreview = outputPreview.slice(-500);
+        }
+      }
       return renderWithThinking(
-        /* @__PURE__ */ React.createElement(Box, { flexDirection: "column", borderStyle: "round", borderColor: "#00cc66", paddingX: 1, marginBottom: 1, flexGrow: 0, alignSelf: "flex-start" }, /* @__PURE__ */ React.createElement(Box, null, /* @__PURE__ */ React.createElement(Text, { color: "#00cc66", bold: true }, "\u2713 ", toolInfo.emoji, " ", actionText), actionDetail && /* @__PURE__ */ React.createElement(Text, { color: "#666666" }, " ", actionDetail)))
+        /* @__PURE__ */ React.createElement(Box, { flexDirection: "column", borderStyle: "round", borderColor: "#00cc66", paddingX: 1, marginBottom: 1, flexGrow: 0, alignSelf: "flex-start" }, /* @__PURE__ */ React.createElement(Box, { flexWrap: "wrap" }, /* @__PURE__ */ React.createElement(Text, { color: "#00cc66", bold: true }, "\u2713 ", toolInfo.emoji, " ", actionText), actionDetail && /* @__PURE__ */ React.createElement(Text, { color: "#666666" }, " ", actionDetail)), outputPreview && /* @__PURE__ */ React.createElement(Box, { marginTop: 1 }, /* @__PURE__ */ React.createElement(Text, { wrap: "wrap", dimColor: true }, outputPreview)))
       );
     }
     if (toolName === "workflow" && toolArgs) {
@@ -745,7 +795,7 @@ const ToolExecutionMessage = React.memo(({ message }) => {
         }
       }
       return renderWithThinking(
-        /* @__PURE__ */ React.createElement(Box, { flexDirection: "column", borderStyle: "round", borderColor, paddingX: 1, marginBottom: 1, flexGrow: 0, alignSelf: "flex-start" }, /* @__PURE__ */ React.createElement(Box, null, /* @__PURE__ */ React.createElement(Text, { color: textColor, bold: true }, icon, " \u{1F504} ", actionText)))
+        /* @__PURE__ */ React.createElement(Box, { flexDirection: "column", borderStyle: "round", borderColor, paddingX: 1, marginBottom: 1, flexGrow: 0, alignSelf: "flex-start" }, /* @__PURE__ */ React.createElement(Box, { flexWrap: "wrap" }, /* @__PURE__ */ React.createElement(Text, { color: textColor, bold: true }, icon, " \u{1F504} ", actionText)))
       );
     }
     if (toolName === "get_diff" && toolArgs) {
@@ -774,7 +824,7 @@ const ToolExecutionMessage = React.memo(({ message }) => {
         }
       }
       return renderWithThinking(
-        /* @__PURE__ */ React.createElement(Box, { flexDirection: "column", borderStyle: "round", borderColor: "#00cc66", paddingX: 1, marginBottom: 1, flexGrow: 0, alignSelf: "flex-start" }, /* @__PURE__ */ React.createElement(Box, null, /* @__PURE__ */ React.createElement(Text, { color: "#00cc66", bold: true }, "\u2713 ", toolInfo.emoji, " Checked diff ", diffTarget ? `for ${diffTarget} ` : "", stagedText), /* @__PURE__ */ React.createElement(Text, { color: "#666666" }, "(", displayInfo, truncated ? ", truncated" : "", ")")))
+        /* @__PURE__ */ React.createElement(Box, { flexDirection: "column", borderStyle: "round", borderColor: "#00cc66", paddingX: 1, marginBottom: 1, flexGrow: 0, alignSelf: "flex-start" }, /* @__PURE__ */ React.createElement(Box, { flexWrap: "wrap" }, /* @__PURE__ */ React.createElement(Text, { color: "#00cc66", bold: true }, "\u2713 ", toolInfo.emoji, " Checked diff ", diffTarget ? `for ${diffTarget} ` : "", stagedText), /* @__PURE__ */ React.createElement(Text, { color: "#666666" }, "(", displayInfo, truncated ? ", truncated" : "", ")")))
       );
     }
     if (toolName === "add_mcp" && toolArgs) {
@@ -796,11 +846,11 @@ const ToolExecutionMessage = React.memo(({ message }) => {
         }
       }
       return renderWithThinking(
-        /* @__PURE__ */ React.createElement(Box, { flexDirection: "column", borderStyle: "round", borderColor, paddingX: 1, marginBottom: 1, flexGrow: 0, alignSelf: "flex-start" }, /* @__PURE__ */ React.createElement(Box, null, /* @__PURE__ */ React.createElement(Text, { color: statusColor, bold: true }, statusIcon, " \u{1F50C} ", isSuccess ? "Connected" : "Failed", " MCP server "), /* @__PURE__ */ React.createElement(Text, { color: "#cc99ff", bold: true }, serverName), toolCount && /* @__PURE__ */ React.createElement(Text, { color: "#666666" }, toolCount)), errorMsg && /* @__PURE__ */ React.createElement(Box, { paddingLeft: 2 }, /* @__PURE__ */ React.createElement(Text, { color: "#ff6699" }, errorMsg)))
+        /* @__PURE__ */ React.createElement(Box, { flexDirection: "column", borderStyle: "round", borderColor, paddingX: 1, marginBottom: 1, flexGrow: 0, alignSelf: "flex-start" }, /* @__PURE__ */ React.createElement(Box, { flexWrap: "wrap" }, /* @__PURE__ */ React.createElement(Text, { color: statusColor, bold: true }, statusIcon, " \u{1F50C} ", isSuccess ? "Connected" : "Failed", " MCP server "), /* @__PURE__ */ React.createElement(Text, { color: "#cc99ff", bold: true }, serverName), toolCount && /* @__PURE__ */ React.createElement(Text, { color: "#666666" }, toolCount)), errorMsg && /* @__PURE__ */ React.createElement(Box, { paddingLeft: 2 }, /* @__PURE__ */ React.createElement(Text, { color: "#ff6699" }, errorMsg)))
       );
     }
     return renderWithThinking(
-      /* @__PURE__ */ React.createElement(Box, { flexDirection: "column", borderStyle: "round", borderColor: "#00ccff", paddingX: 1, marginBottom: 1, flexGrow: 0, alignSelf: "flex-start" }, /* @__PURE__ */ React.createElement(Box, null, /* @__PURE__ */ React.createElement(Text, { color: "#00cc66", bold: true }, "\u2713 ", toolInfo.emoji, " ", toolInfo.verb)), result && result.length < 300 && /* @__PURE__ */ React.createElement(Box, { paddingLeft: 1, marginTop: 1 }, /* @__PURE__ */ React.createElement(Text, { color: "#aaaaaa" }, result)))
+      /* @__PURE__ */ React.createElement(Box, { flexDirection: "column", borderStyle: "round", borderColor: theme.accent, paddingX: 1, marginBottom: 1, flexGrow: 0, alignSelf: "flex-start" }, /* @__PURE__ */ React.createElement(Box, { flexWrap: "wrap" }, /* @__PURE__ */ React.createElement(Text, { color: "#00cc66", bold: true }, "\u2713 ", toolInfo.emoji, " ", toolInfo.verb)), result && result.length < 300 && /* @__PURE__ */ React.createElement(Box, { paddingLeft: 1, marginTop: 1 }, /* @__PURE__ */ React.createElement(Text, { color: "#aaaaaa" }, result)))
     );
   }
   return null;