@dexto/tui 1.15.0-beta.0 → 1.15.0-beta.1

package/dist/components/chat/MessageItem.js

@@ -16,28 +16,21 @@ import { ToolResultRenderer } from "../renderers/index.js";
 import { MarkdownText } from "../shared/MarkdownText.js";
 import { ToolIcon } from "./ToolIcon.js";
 import {
+  formatDuration,
   formatToolResultPreview,
   stripAutomationTriggerTags
 } from "../../utils/messageFormatting.js";
+import { tone, useCaps } from "../../signal/index.js";
+import {
+  SignalAgentMessage,
+  SignalNote,
+  SignalToolMessage,
+  SignalUserMessage
+} from "./SignalMessage.js";
 function stripPlanModeTags(content) {
   const stripped = content.replace(/<plan-mode>[\s\S]*?<\/plan-mode>\s*/g, "");
   return stripped === content ? content : stripped.trim();
 }
-function formatDuration(ms) {
-  const seconds = Math.floor(ms / 1e3);
-  const tenths = Math.floor(ms % 1e3 / 100);
-  if (seconds < 60) {
-    return `${seconds}.${tenths}s`;
-  }
-  const minutes = Math.floor(seconds / 60);
-  const remainingSeconds = seconds % 60;
-  if (minutes < 60) {
-    return `${minutes}m ${remainingSeconds}s`;
-  }
-  const hours = Math.floor(minutes / 60);
-  const remainingMinutes = minutes % 60;
-  return `${hours}h ${remainingMinutes}m`;
-}
 function formatTime(timestamp) {
   const value = typeof timestamp === "string" ? new Date(timestamp) : timestamp;
   if (Number.isNaN(value.getTime())) {
@@ -51,13 +44,13 @@ function formatTime(timestamp) {
 function getExternalTriggerColors(source) {
   switch (source) {
     case "scheduler":
-      return { background: "#3A235A", foreground: "white" };
+      return { background: tone("cloudBg"), foreground: tone("hi") };
     case "a2a":
-      return { background: "#0E3B2E", foreground: "white" };
+      return { background: tone("s1"), foreground: tone("hi") };
     case "api":
-      return { background: "#1E3B5A", foreground: "white" };
+      return { background: tone("sel"), foreground: tone("hi") };
     default:
-      return { background: "gray", foreground: "white" };
+      return { background: tone("s2"), foreground: tone("hi") };
   }
 }
 function getExternalTriggerSource(label) {
@@ -94,6 +87,7 @@ function renderExternalTriggerPill(label, timeLabel, source, terminalWidth) {
 }
 const MessageItem = memo(
   ({ message, terminalWidth = 80, showReasoning = true }) => {
+    const signal = useCaps().palette === "signal";
     if (message.styledType && message.styledData) {
       switch (message.styledType) {
         case "config":
@@ -111,8 +105,20 @@ const MessageItem = memo(
         case "run-summary": {
           const data = message.styledData;
           const durationStr = formatDuration(data.durationMs);
+          if (signal) {
+            const tokens = data.totalTokens >= 1e3 ? ` \xB7 ${(data.totalTokens / 1e3).toFixed(1)}k tokens` : "";
+            return /* @__PURE__ */ jsx(
+              SignalNote,
+              {
+                message: {
+                  ...message,
+                  content: `worked for ${durationStr}${tokens}`
+                }
+              }
+            );
+          }
           const tokensStr = data.totalTokens >= 1e3 ? `, Used ${(data.totalTokens / 1e3).toFixed(1)}K tokens` : "";
-          return /* @__PURE__ */ jsx(Box, { marginTop: 1, marginBottom: 1, width: terminalWidth, children: /* @__PURE__ */ jsxs(Text, { color: "gray", children: [
+          return /* @__PURE__ */ jsx(Box, { marginTop: 1, marginBottom: 1, width: terminalWidth, children: /* @__PURE__ */ jsxs(Text, { color: tone("dim"), children: [
             "\u2500 Worked for ",
             durationStr,
             tokensStr,
@@ -134,6 +140,14 @@ const MessageItem = memo(
         }
       }
     }
+    if (signal && message.role === "user") {
+      return /* @__PURE__ */ jsx(
+        SignalUserMessage,
+        {
+          content: stripAutomationTriggerTags(stripPlanModeTags(message.content))
+        }
+      );
+    }
     if (message.role === "user") {
       const prefix = "> ";
       const paddingChars = 2;
@@ -145,14 +159,17 @@ const MessageItem = memo(
         trim: false
       });
       const lines = wrappedContent.split("\n");
-      return /* @__PURE__ */ jsx(Box, { flexDirection: "column", marginTop: 1, marginBottom: 0, width: terminalWidth, children: /* @__PURE__ */ jsx(Box, { flexDirection: "column", paddingX: 1, backgroundColor: "gray", children: lines.map((line, i) => /* @__PURE__ */ jsxs(Box, { flexDirection: "row", children: [
-        /* @__PURE__ */ jsx(Text, { color: "green", children: i === 0 ? prefix : "  " }),
-        /* @__PURE__ */ jsx(Text, { color: "white", children: line })
+      return /* @__PURE__ */ jsx(Box, { flexDirection: "column", marginTop: 1, marginBottom: 0, width: terminalWidth, children: /* @__PURE__ */ jsx(Box, { flexDirection: "column", paddingX: 1, backgroundColor: tone("s2"), children: lines.map((line, i) => /* @__PURE__ */ jsxs(Box, { flexDirection: "row", children: [
+        /* @__PURE__ */ jsx(Text, { color: tone("add"), children: i === 0 ? prefix : "  " }),
+        /* @__PURE__ */ jsx(Text, { color: tone("hi"), children: line })
       ] }, i)) }) });
     }
+    if (signal && message.role === "assistant") {
+      return /* @__PURE__ */ jsx(SignalAgentMessage, { message, showReasoning });
+    }
     if (message.role === "assistant") {
       const hasContent = message.content.trim().length > 0;
-      const reasoningBlock = showReasoning && message.reasoning ? /* @__PURE__ */ jsx(Box, { flexDirection: "column", marginBottom: 1, children: /* @__PURE__ */ jsx(MarkdownText, { color: "gray", bulletPrefix: "\u23FA ", children: message.reasoning }) }) : null;
+      const reasoningBlock = showReasoning && message.reasoning ? /* @__PURE__ */ jsx(Box, { flexDirection: "column", marginBottom: 1, children: /* @__PURE__ */ jsx(MarkdownText, { color: tone("dim"), bulletPrefix: "\u23FA ", children: message.reasoning }) }) : null;
       if (message.isContinuation) {
         return /* @__PURE__ */ jsxs(Box, { flexDirection: "column", width: terminalWidth, children: [
           reasoningBlock,
@@ -164,6 +181,9 @@ const MessageItem = memo(
         hasContent ? /* @__PURE__ */ jsx(MarkdownText, { bulletPrefix: "\u23FA ", children: message.content }) : null
       ] });
     }
+    if (signal && message.role === "tool") {
+      return /* @__PURE__ */ jsx(SignalToolMessage, { message });
+    }
     if (message.role === "tool") {
       const hasStructuredDisplay = message.toolDisplayData && message.toolContent;
       const isRunning = message.toolStatus === "running";
@@ -199,8 +219,8 @@ const MessageItem = memo(
             /* @__PURE__ */ jsx(Text, { children: line.slice(toolName.length) })
           ] }) : line })
         ] }, i)),
-        subHeaderLine && /* @__PURE__ */ jsx(Box, { marginLeft: 2, children: /* @__PURE__ */ jsx(Text, { color: "gray", children: subHeaderLine }) }),
-        subAgentProgress && isRunning && /* @__PURE__ */ jsx(Box, { marginLeft: 2, children: /* @__PURE__ */ jsxs(Text, { color: "gray", children: [
+        subHeaderLine && /* @__PURE__ */ jsx(Box, { marginLeft: 2, children: /* @__PURE__ */ jsx(Text, { color: tone("dim"), children: subHeaderLine }) }),
+        subAgentProgress && isRunning && /* @__PURE__ */ jsx(Box, { marginLeft: 2, children: /* @__PURE__ */ jsxs(Text, { color: tone("dim"), children: [
           "\u2514\u2500 ",
           subAgentProgress.toolsCalled,
           " tool",
@@ -217,7 +237,7 @@ const MessageItem = memo(
             display: message.toolDisplayData,
             content: message.toolContent
           }
-        ) : message.toolResult && /* @__PURE__ */ jsx(Box, { flexDirection: "column", children: /* @__PURE__ */ jsxs(Text, { color: "gray", children: [
+        ) : message.toolResult && /* @__PURE__ */ jsx(Box, { flexDirection: "column", children: /* @__PURE__ */ jsxs(Text, { color: tone("dim"), children: [
           "\u23BF ",
           formatToolResultPreview(message.toolResult)
         ] }) })
@@ -234,11 +254,14 @@ const MessageItem = memo(
         );
       }
     }
-    return /* @__PURE__ */ jsx(Box, { flexDirection: "column", marginBottom: 1, width: terminalWidth, children: /* @__PURE__ */ jsx(Text, { color: "gray", children: message.content }) });
+    if (signal) {
+      return /* @__PURE__ */ jsx(SignalNote, { message });
+    }
+    return /* @__PURE__ */ jsx(Box, { flexDirection: "column", marginBottom: 1, width: terminalWidth, children: /* @__PURE__ */ jsx(Text, { color: tone("dim"), children: message.content }) });
   },
   // Custom comparator: only re-render if message content actually changed
   (prev, next) => {
-    return prev.message.id === next.message.id && prev.message.content === next.message.content && prev.message.reasoning === next.message.reasoning && prev.message.role === next.message.role && prev.message.toolStatus === next.message.toolStatus && prev.message.toolResult === next.message.toolResult && prev.message.isStreaming === next.message.isStreaming && prev.message.styledType === next.message.styledType && prev.message.styledData === next.message.styledData && prev.message.isContinuation === next.message.isContinuation && prev.message.isError === next.message.isError && prev.message.toolDisplayData === next.message.toolDisplayData && prev.message.toolContent === next.message.toolContent && prev.terminalWidth === next.terminalWidth && prev.showReasoning === next.showReasoning && prev.message.subAgentProgress?.toolsCalled === next.message.subAgentProgress?.toolsCalled && prev.message.subAgentProgress?.currentTool === next.message.subAgentProgress?.currentTool && prev.message.subAgentProgress?.tokenUsage?.total === next.message.subAgentProgress?.tokenUsage?.total;
+    return prev.message.id === next.message.id && prev.message.content === next.message.content && prev.message.reasoning === next.message.reasoning && prev.message.role === next.message.role && prev.message.toolStatus === next.message.toolStatus && prev.message.toolOutcome === next.message.toolOutcome && prev.message.systemKind === next.message.systemKind && prev.message.toolResult === next.message.toolResult && prev.message.isStreaming === next.message.isStreaming && prev.message.styledType === next.message.styledType && prev.message.styledData === next.message.styledData && prev.message.isContinuation === next.message.isContinuation && prev.message.isError === next.message.isError && prev.message.toolDisplayData === next.message.toolDisplayData && prev.message.toolContent === next.message.toolContent && prev.terminalWidth === next.terminalWidth && prev.showReasoning === next.showReasoning && prev.message.subAgentProgress?.toolsCalled === next.message.subAgentProgress?.toolsCalled && prev.message.subAgentProgress?.currentTool === next.message.subAgentProgress?.currentTool && prev.message.subAgentProgress?.tokenUsage?.total === next.message.subAgentProgress?.tokenUsage?.total;
   }
 );
 MessageItem.displayName = "MessageItem";

package/dist/components/chat/MessageList.cjs

@@ -25,18 +25,19 @@ var import_jsx_runtime = require("react/jsx-runtime");
 var import_react = require("react");
 var import_ink = require("ink");
 var import_MessageItem = require("./MessageItem.js");
+var import_signal = require("../../signal/index.js");
 function MessageList({ messages, maxVisible = 50 }) {
   const visibleMessages = (0, import_react.useMemo)(() => {
     return messages.slice(-maxVisible);
   }, [messages, maxVisible]);
   const hasMoreMessages = messages.length > maxVisible;
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_ink.Box, { flexDirection: "column", flexGrow: 1, paddingX: 1, paddingY: 1, children: [
-    hasMoreMessages && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Box, { marginBottom: 1, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_ink.Text, { color: "gray", children: [
+    hasMoreMessages && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Box, { marginBottom: 1, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_ink.Text, { color: (0, import_signal.tone)("dim"), children: [
       "... (",
       messages.length - maxVisible,
       " earlier messages hidden)"
     ] }) }),
-    visibleMessages.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Box, { marginY: 2, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Text, { color: "greenBright", children: "Welcome to Dexto CLI! Type your message below or use /help for commands." }) }),
+    visibleMessages.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Box, { marginY: 2, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Text, { color: (0, import_signal.tone)("tealDim"), children: "Welcome to Dexto CLI! Type your message below or use /help for commands." }) }),
     visibleMessages.map((msg) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_MessageItem.MessageItem, { message: msg }, msg.id))
   ] });
 }

package/dist/components/chat/MessageList.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MessageList.d.ts","sourceRoot":"","sources":["../../../src/components/chat/MessageList.tsx"],"names":[],"mappings":"AAAA;;;GAGG;AAKH,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,sBAAsB,CAAC;AAEpD,UAAU,gBAAgB;IACtB,QAAQ,EAAE,OAAO,EAAE,CAAC;IACpB,UAAU,CAAC,EAAE,MAAM,CAAC;CACvB;AAED;;;GAGG;AACH,wBAAgB,WAAW,CAAC,EAAE,QAAQ,EAAE,UAAe,EAAE,EAAE,gBAAgB,2CA6B1E"}
+{"version":3,"file":"MessageList.d.ts","sourceRoot":"","sources":["../../../src/components/chat/MessageList.tsx"],"names":[],"mappings":"AAAA;;;GAGG;AAKH,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,sBAAsB,CAAC;AAGpD,UAAU,gBAAgB;IACtB,QAAQ,EAAE,OAAO,EAAE,CAAC;IACpB,UAAU,CAAC,EAAE,MAAM,CAAC;CACvB;AAED;;;GAGG;AACH,wBAAgB,WAAW,CAAC,EAAE,QAAQ,EAAE,UAAe,EAAE,EAAE,gBAAgB,2CA6B1E"}

package/dist/components/chat/MessageList.js

@@ -2,18 +2,19 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { useMemo } from "react";
 import { Box, Text } from "ink";
 import { MessageItem } from "./MessageItem.js";
+import { tone } from "../../signal/index.js";
 function MessageList({ messages, maxVisible = 50 }) {
   const visibleMessages = useMemo(() => {
     return messages.slice(-maxVisible);
   }, [messages, maxVisible]);
   const hasMoreMessages = messages.length > maxVisible;
   return /* @__PURE__ */ jsxs(Box, { flexDirection: "column", flexGrow: 1, paddingX: 1, paddingY: 1, children: [
-    hasMoreMessages && /* @__PURE__ */ jsx(Box, { marginBottom: 1, children: /* @__PURE__ */ jsxs(Text, { color: "gray", children: [
+    hasMoreMessages && /* @__PURE__ */ jsx(Box, { marginBottom: 1, children: /* @__PURE__ */ jsxs(Text, { color: tone("dim"), children: [
       "... (",
       messages.length - maxVisible,
       " earlier messages hidden)"
     ] }) }),
-    visibleMessages.length === 0 && /* @__PURE__ */ jsx(Box, { marginY: 2, children: /* @__PURE__ */ jsx(Text, { color: "greenBright", children: "Welcome to Dexto CLI! Type your message below or use /help for commands." }) }),
+    visibleMessages.length === 0 && /* @__PURE__ */ jsx(Box, { marginY: 2, children: /* @__PURE__ */ jsx(Text, { color: tone("tealDim"), children: "Welcome to Dexto CLI! Type your message below or use /help for commands." }) }),
     visibleMessages.map((msg) => /* @__PURE__ */ jsx(MessageItem, { message: msg }, msg.id))
   ] });
 }

package/dist/components/chat/QueuedMessagesDisplay.cjs

@@ -25,6 +25,7 @@ module.exports = __toCommonJS(QueuedMessagesDisplay_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
 var import_ink = require("ink");
 var import_queuedComposerContent = require("../../utils/queuedComposerContent.js");
+var import_signal = require("../../signal/index.js");
 const isMac = process.platform === "darwin";
 const QUEUE_EDIT_SHORTCUTS = {
   currentTurn: isMac ? "\u2325 + \u2191 edit" : "Alt + \u2191 edit",
@@ -42,22 +43,33 @@ function QueuedMessagesDisplay({
   label = "queued",
   hint = "\u2191 to edit"
 }) {
+  const { palette, glyphs } = (0, import_signal.useCaps)();
+  const { stdout } = (0, import_ink.useStdout)();
   if (messages.length === 0) return null;
+  if (palette === "signal") {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_ink.Box, { flexDirection: "column", marginLeft: (0, import_signal.actorMarginWidth)(stdout?.columns ?? 80), children: [
+      messages.map((message) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_ink.Text, { wrap: "truncate-end", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Text, { color: (0, import_signal.tone)("amber"), children: (0, import_signal.glyphText)("\u21B3 ", glyphs) }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Text, { color: (0, import_signal.tone)("fg"), children: truncateText((0, import_queuedComposerContent.previewQueuedContent)(message.content)) })
+      ] }, message.id)),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Text, { color: (0, import_signal.tone)("amber"), wrap: "truncate-end", children: (0, import_signal.glyphText)(`${label} \xB7 ${hint}`, glyphs) })
+    ] });
+  }
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_ink.Box, { flexDirection: "column", marginBottom: 1, children: [
     /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_ink.Box, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_ink.Text, { color: "gray", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_ink.Text, { color: (0, import_signal.tone)("dim"), children: [
         messages.length,
         " message",
         messages.length !== 1 ? "s" : "",
         " ",
         label
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Text, { color: "gray", children: " \u2022 " }),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Text, { color: "gray", children: hint })
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Text, { color: (0, import_signal.tone)("dim"), children: " \u2022 " }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Text, { color: (0, import_signal.tone)("dim"), children: hint })
     ] }),
     messages.map((message, index) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_ink.Box, { flexDirection: "row", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Text, { color: "gray", children: index === messages.length - 1 ? "\u21B3 " : "\u2502 " }),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Text, { color: "gray", italic: true, children: truncateText((0, import_queuedComposerContent.previewQueuedContent)(message.content)) })
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Text, { color: (0, import_signal.tone)("dim"), children: index === messages.length - 1 ? "\u21B3 " : "\u2502 " }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Text, { color: (0, import_signal.tone)("dim"), italic: true, children: truncateText((0, import_queuedComposerContent.previewQueuedContent)(message.content)) })
     ] }, message.id))
   ] });
 }

package/dist/components/chat/QueuedMessagesDisplay.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"QueuedMessagesDisplay.d.ts","sourceRoot":"","sources":["../../../src/components/chat/QueuedMessagesDisplay.tsx"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAIH,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAKjD,eAAO,MAAM,oBAAoB;;;CAGhC,CAAC;AAEF,UAAU,0BAA0B;IAChC,QAAQ,EAAE,aAAa,EAAE,CAAC;IAC1B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,MAAM,CAAC;CACjB;AAcD,wBAAgB,qBAAqB,CAAC,EAClC,QAAQ,EACR,KAAgB,EAChB,IAAkB,GACrB,EAAE,0BAA0B,kDA2B5B"}
+{"version":3,"file":"QueuedMessagesDisplay.d.ts","sourceRoot":"","sources":["../../../src/components/chat/QueuedMessagesDisplay.tsx"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAIH,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAMjD,eAAO,MAAM,oBAAoB;;;CAGhC,CAAC;AAEF,UAAU,0BAA0B;IAChC,QAAQ,EAAE,aAAa,EAAE,CAAC;IAC1B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,MAAM,CAAC;CACjB;AAcD,wBAAgB,qBAAqB,CAAC,EAClC,QAAQ,EACR,KAAgB,EAChB,IAAkB,GACrB,EAAE,0BAA0B,kDA+C5B"}

package/dist/components/chat/QueuedMessagesDisplay.js

@@ -1,6 +1,7 @@
 import { jsx, jsxs } from "react/jsx-runtime";
-import { Box, Text } from "ink";
+import { Box, Text, useStdout } from "ink";
 import { previewQueuedContent } from "../../utils/queuedComposerContent.js";
+import { actorMarginWidth, glyphText, tone, useCaps } from "../../signal/index.js";
 const isMac = process.platform === "darwin";
 const QUEUE_EDIT_SHORTCUTS = {
   currentTurn: isMac ? "\u2325 + \u2191 edit" : "Alt + \u2191 edit",
@@ -18,22 +19,33 @@ function QueuedMessagesDisplay({
   label = "queued",
   hint = "\u2191 to edit"
 }) {
+  const { palette, glyphs } = useCaps();
+  const { stdout } = useStdout();
   if (messages.length === 0) return null;
+  if (palette === "signal") {
+    return /* @__PURE__ */ jsxs(Box, { flexDirection: "column", marginLeft: actorMarginWidth(stdout?.columns ?? 80), children: [
+      messages.map((message) => /* @__PURE__ */ jsxs(Text, { wrap: "truncate-end", children: [
+        /* @__PURE__ */ jsx(Text, { color: tone("amber"), children: glyphText("\u21B3 ", glyphs) }),
+        /* @__PURE__ */ jsx(Text, { color: tone("fg"), children: truncateText(previewQueuedContent(message.content)) })
+      ] }, message.id)),
+      /* @__PURE__ */ jsx(Text, { color: tone("amber"), wrap: "truncate-end", children: glyphText(`${label} \xB7 ${hint}`, glyphs) })
+    ] });
+  }
   return /* @__PURE__ */ jsxs(Box, { flexDirection: "column", marginBottom: 1, children: [
     /* @__PURE__ */ jsxs(Box, { children: [
-      /* @__PURE__ */ jsxs(Text, { color: "gray", children: [
+      /* @__PURE__ */ jsxs(Text, { color: tone("dim"), children: [
         messages.length,
         " message",
         messages.length !== 1 ? "s" : "",
         " ",
         label
       ] }),
-      /* @__PURE__ */ jsx(Text, { color: "gray", children: " \u2022 " }),
-      /* @__PURE__ */ jsx(Text, { color: "gray", children: hint })
+      /* @__PURE__ */ jsx(Text, { color: tone("dim"), children: " \u2022 " }),
+      /* @__PURE__ */ jsx(Text, { color: tone("dim"), children: hint })
     ] }),
     messages.map((message, index) => /* @__PURE__ */ jsxs(Box, { flexDirection: "row", children: [
-      /* @__PURE__ */ jsx(Text, { color: "gray", children: index === messages.length - 1 ? "\u21B3 " : "\u2502 " }),
-      /* @__PURE__ */ jsx(Text, { color: "gray", italic: true, children: truncateText(previewQueuedContent(message.content)) })
+      /* @__PURE__ */ jsx(Text, { color: tone("dim"), children: index === messages.length - 1 ? "\u21B3 " : "\u2502 " }),
+      /* @__PURE__ */ jsx(Text, { color: tone("dim"), italic: true, children: truncateText(previewQueuedContent(message.content)) })
     ] }, message.id))
   ] });
 }

package/dist/components/chat/SignalMessage.cjs

@@ -0,0 +1,116 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var SignalMessage_exports = {};
+__export(SignalMessage_exports, {
+  SignalAgentMessage: () => SignalAgentMessage,
+  SignalNote: () => SignalNote,
+  SignalToolMessage: () => SignalToolMessage,
+  SignalUserMessage: () => SignalUserMessage
+});
+module.exports = __toCommonJS(SignalMessage_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_ink = require("ink");
+var import_signal = require("../../signal/index.js");
+var import_fault_block = require("../../utils/fault-block.js");
+var import_tool_step = require("../../utils/tool-step.js");
+var import_MarkdownText = require("../shared/MarkdownText.js");
+var import_SignalDiff = require("../renderers/SignalDiff.js");
+function useMargin() {
+  const { stdout } = (0, import_ink.useStdout)();
+  return (0, import_signal.actorMarginWidth)(stdout?.columns ?? 80);
+}
+function SignalUserMessage({ content }) {
+  const tone = (0, import_signal.useTone)();
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Box, { marginTop: 1, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_signal.ActorRow, { actor: "you", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Text, { color: tone("hi"), children: content }) }) });
+}
+function SignalAgentMessage({ message, showReasoning }) {
+  const tone = (0, import_signal.useTone)();
+  const margin = useMargin();
+  const hasContent = message.content.trim().length > 0;
+  const body = /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_MarkdownText.MarkdownInsetContext.Provider, { value: margin, children: [
+    showReasoning && message.reasoning ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Box, { flexDirection: "column", marginBottom: hasContent ? 1 : 0, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_MarkdownText.MarkdownText, { color: tone("dim"), children: message.reasoning }) }) : null,
+    hasContent ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_MarkdownText.MarkdownText, { color: tone("fg"), children: message.content }) : null
+  ] });
+  if (message.isContinuation) {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Box, { flexDirection: "column", marginLeft: margin, children: body });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Box, { marginTop: 1, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_signal.ActorRow, { actor: "agent", children: body }) });
+}
+function SignalToolMessage({ message }) {
+  const tone = (0, import_signal.useTone)();
+  const { glyphs } = (0, import_signal.useCaps)();
+  const margin = useMargin();
+  const { stdout } = (0, import_ink.useStdout)();
+  const step = (0, import_tool_step.toolStep)(message);
+  const display = message.toolDisplayData;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_ink.Box, { flexDirection: "column", marginLeft: margin, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_signal.StepRow, { step }),
+    (0, import_tool_step.toolOutput)(message).map((line, i) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_ink.Text, { wrap: "truncate-end", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Text, { color: tone("ghost"), children: (0, import_signal.glyphText)("\u250A ", glyphs) }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Text, { color: tone("red"), children: line })
+    ] }, i)),
+    display?.type === "diff" && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_SignalDiff.SignalDiff, { data: display, width: (stdout?.columns ?? 80) - margin })
+  ] });
+}
+function SignalNote({ message }) {
+  const tone = (0, import_signal.useTone)();
+  const { glyphs } = (0, import_signal.useCaps)();
+  const margin = useMargin();
+  if (message.systemKind === "fault") {
+    const fault = (0, import_fault_block.faultBlock)(message.content);
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_ink.Box, { flexDirection: "column", marginTop: 1, marginLeft: Math.max(0, margin - 2), children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_ink.Text, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Text, { color: tone("red"), children: (0, import_signal.glyphText)("\u258C ", glyphs) }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_ink.Text, { bold: true, color: tone("red"), children: [
+          "FAULT",
+          " "
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Text, { bold: true, color: tone("hi"), children: fault.title })
+      ] }),
+      fault.body.map((line, i) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_ink.Text, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Text, { color: tone("redDim"), children: (0, import_signal.glyphText)("\u258C ", glyphs) }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Text, { color: tone("fg"), children: line })
+      ] }, `body-${i}`)),
+      fault.next.map((line, i) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_ink.Text, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Text, { color: tone("redDim"), children: (0, import_signal.glyphText)("\u258C ", glyphs) }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Text, { color: tone("dim"), children: "next " }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Text, { color: tone("amber"), children: line })
+      ] }, `next-${i}`))
+    ] });
+  }
+  if (message.systemKind === "stopped") {
+    const at = message.timestamp.toLocaleTimeString([], { hour12: false });
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Box, { marginTop: 1, marginLeft: Math.max(0, margin - 2), children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_ink.Text, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Text, { color: tone("hi"), children: (0, import_signal.glyphText)("\u25A0 ", glyphs) }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_ink.Text, { bold: true, color: tone("hi"), children: [
+        "STOPPED",
+        " "
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Text, { color: tone("dim"), children: (0, import_signal.glyphText)(`by you at ${at} \xB7 type what to do next`, glyphs) })
+    ] }) });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Box, { marginLeft: margin, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ink.Text, { color: tone("dim"), children: (0, import_signal.glyphText)(`\xB7 ${message.content}`, glyphs) }) });
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  SignalAgentMessage,
+  SignalNote,
+  SignalToolMessage,
+  SignalUserMessage
+});

package/dist/components/chat/SignalMessage.d.ts

@@ -0,0 +1,18 @@
+import type { Message } from '../../state/types.js';
+export declare function SignalUserMessage({ content }: {
+    content: string;
+}): import("react/jsx-runtime").JSX.Element;
+interface SignalAgentMessageProps {
+    message: Message;
+    showReasoning: boolean;
+}
+export declare function SignalAgentMessage({ message, showReasoning }: SignalAgentMessageProps): import("react/jsx-runtime").JSX.Element;
+export declare function SignalToolMessage({ message }: {
+    message: Message;
+}): import("react/jsx-runtime").JSX.Element;
+/** A system message: a fault, the point where the user stopped the run, or a quiet note. */
+export declare function SignalNote({ message }: {
+    message: Message;
+}): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=SignalMessage.d.ts.map

package/dist/components/chat/SignalMessage.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SignalMessage.d.ts","sourceRoot":"","sources":["../../../src/components/chat/SignalMessage.tsx"],"names":[],"mappings":"AAaA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,sBAAsB,CAAC;AAWpD,wBAAgB,iBAAiB,CAAC,EAAE,OAAO,EAAE,EAAE;IAAE,OAAO,EAAE,MAAM,CAAA;CAAE,2CASjE;AAED,UAAU,uBAAuB;IAC7B,OAAO,EAAE,OAAO,CAAC;IACjB,aAAa,EAAE,OAAO,CAAC;CAC1B;AAED,wBAAgB,kBAAkB,CAAC,EAAE,OAAO,EAAE,aAAa,EAAE,EAAE,uBAAuB,2CA2BrF;AAED,wBAAgB,iBAAiB,CAAC,EAAE,OAAO,EAAE,EAAE;IAAE,OAAO,EAAE,OAAO,CAAA;CAAE,2CAqBlE;AAED,4FAA4F;AAC5F,wBAAgB,UAAU,CAAC,EAAE,OAAO,EAAE,EAAE;IAAE,OAAO,EAAE,OAAO,CAAA;CAAE,2CAsD3D"}

package/dist/components/chat/SignalMessage.js

@@ -0,0 +1,96 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Box, Text, useStdout } from "ink";
+import {
+  ActorRow,
+  StepRow,
+  actorMarginWidth,
+  glyphText,
+  useCaps,
+  useTone
+} from "../../signal/index.js";
+import { faultBlock } from "../../utils/fault-block.js";
+import { toolOutput, toolStep } from "../../utils/tool-step.js";
+import { MarkdownInsetContext, MarkdownText } from "../shared/MarkdownText.js";
+import { SignalDiff } from "../renderers/SignalDiff.js";
+function useMargin() {
+  const { stdout } = useStdout();
+  return actorMarginWidth(stdout?.columns ?? 80);
+}
+function SignalUserMessage({ content }) {
+  const tone = useTone();
+  return /* @__PURE__ */ jsx(Box, { marginTop: 1, children: /* @__PURE__ */ jsx(ActorRow, { actor: "you", children: /* @__PURE__ */ jsx(Text, { color: tone("hi"), children: content }) }) });
+}
+function SignalAgentMessage({ message, showReasoning }) {
+  const tone = useTone();
+  const margin = useMargin();
+  const hasContent = message.content.trim().length > 0;
+  const body = /* @__PURE__ */ jsxs(MarkdownInsetContext.Provider, { value: margin, children: [
+    showReasoning && message.reasoning ? /* @__PURE__ */ jsx(Box, { flexDirection: "column", marginBottom: hasContent ? 1 : 0, children: /* @__PURE__ */ jsx(MarkdownText, { color: tone("dim"), children: message.reasoning }) }) : null,
+    hasContent ? /* @__PURE__ */ jsx(MarkdownText, { color: tone("fg"), children: message.content }) : null
+  ] });
+  if (message.isContinuation) {
+    return /* @__PURE__ */ jsx(Box, { flexDirection: "column", marginLeft: margin, children: body });
+  }
+  return /* @__PURE__ */ jsx(Box, { marginTop: 1, children: /* @__PURE__ */ jsx(ActorRow, { actor: "agent", children: body }) });
+}
+function SignalToolMessage({ message }) {
+  const tone = useTone();
+  const { glyphs } = useCaps();
+  const margin = useMargin();
+  const { stdout } = useStdout();
+  const step = toolStep(message);
+  const display = message.toolDisplayData;
+  return /* @__PURE__ */ jsxs(Box, { flexDirection: "column", marginLeft: margin, children: [
+    /* @__PURE__ */ jsx(StepRow, { step }),
+    toolOutput(message).map((line, i) => /* @__PURE__ */ jsxs(Text, { wrap: "truncate-end", children: [
+      /* @__PURE__ */ jsx(Text, { color: tone("ghost"), children: glyphText("\u250A ", glyphs) }),
+      /* @__PURE__ */ jsx(Text, { color: tone("red"), children: line })
+    ] }, i)),
+    display?.type === "diff" && /* @__PURE__ */ jsx(SignalDiff, { data: display, width: (stdout?.columns ?? 80) - margin })
+  ] });
+}
+function SignalNote({ message }) {
+  const tone = useTone();
+  const { glyphs } = useCaps();
+  const margin = useMargin();
+  if (message.systemKind === "fault") {
+    const fault = faultBlock(message.content);
+    return /* @__PURE__ */ jsxs(Box, { flexDirection: "column", marginTop: 1, marginLeft: Math.max(0, margin - 2), children: [
+      /* @__PURE__ */ jsxs(Text, { children: [
+        /* @__PURE__ */ jsx(Text, { color: tone("red"), children: glyphText("\u258C ", glyphs) }),
+        /* @__PURE__ */ jsxs(Text, { bold: true, color: tone("red"), children: [
+          "FAULT",
+          " "
+        ] }),
+        /* @__PURE__ */ jsx(Text, { bold: true, color: tone("hi"), children: fault.title })
+      ] }),
+      fault.body.map((line, i) => /* @__PURE__ */ jsxs(Text, { children: [
+        /* @__PURE__ */ jsx(Text, { color: tone("redDim"), children: glyphText("\u258C ", glyphs) }),
+        /* @__PURE__ */ jsx(Text, { color: tone("fg"), children: line })
+      ] }, `body-${i}`)),
+      fault.next.map((line, i) => /* @__PURE__ */ jsxs(Text, { children: [
+        /* @__PURE__ */ jsx(Text, { color: tone("redDim"), children: glyphText("\u258C ", glyphs) }),
+        /* @__PURE__ */ jsx(Text, { color: tone("dim"), children: "next " }),
+        /* @__PURE__ */ jsx(Text, { color: tone("amber"), children: line })
+      ] }, `next-${i}`))
+    ] });
+  }
+  if (message.systemKind === "stopped") {
+    const at = message.timestamp.toLocaleTimeString([], { hour12: false });
+    return /* @__PURE__ */ jsx(Box, { marginTop: 1, marginLeft: Math.max(0, margin - 2), children: /* @__PURE__ */ jsxs(Text, { children: [
+      /* @__PURE__ */ jsx(Text, { color: tone("hi"), children: glyphText("\u25A0 ", glyphs) }),
+      /* @__PURE__ */ jsxs(Text, { bold: true, color: tone("hi"), children: [
+        "STOPPED",
+        " "
+      ] }),
+      /* @__PURE__ */ jsx(Text, { color: tone("dim"), children: glyphText(`by you at ${at} \xB7 type what to do next`, glyphs) })
+    ] }) });
+  }
+  return /* @__PURE__ */ jsx(Box, { marginLeft: margin, children: /* @__PURE__ */ jsx(Text, { color: tone("dim"), children: glyphText(`\xB7 ${message.content}`, glyphs) }) });
+}
+export {
+  SignalAgentMessage,
+  SignalNote,
+  SignalToolMessage,
+  SignalUserMessage
+};