@multiclawcli/dashboard 0.10.0 → 0.11.0

package/dist/tui/format.d.ts

@@ -1,4 +1,15 @@
 import type { SupplementReport } from "@multiclawcli/core";
+import type { LogSegment } from "./state";
+/**
+ * Render a structured log buffer to a single ANSI string ready for `wrapLog`.
+ *
+ * - `text` segments are rendered as markdown via md4x (with `heal:true` to
+ *   handle streaming-incomplete syntax gracefully).
+ * - `tool` segments are prefixed with a dim-cyan glyph.
+ * - `system` segments (errors, retries, steer notes) are rendered dim yellow.
+ * - `tool-detail` segments are already filtered at storage time; skipped here.
+ */
+export declare function renderSegments(segments: LogSegment[], _width: number): string;
 /**
  * Truncate to `max` columns, ending in an ellipsis when it does not fit.
  *

package/dist/tui/state.d.ts

@@ -7,6 +7,11 @@ import type { AcceptanceResult, AgentDefinition, AgentOutput, AgentStatus, Leade
  * renders a tail window, so only the tail is worth keeping.
  */
 export declare const MAX_LOG_CHARS = 8000;
+export type LogKind = "text" | "tool" | "tool-detail" | "system";
+export interface LogSegment {
+    kind: LogKind;
+    text: string;
+}
 export interface AgentView {
     id: string;
     name: string;
@@ -38,7 +43,7 @@ export interface AgentView {
      * re-exploring from scratch.
      */
     sessionId?: string;
-    logs: string;
+    logs: LogSegment[];
 }
 export type TuiPhase = "idle" | "running" | "complete";
 export interface TuiStageInfo extends StageInfo {
@@ -234,7 +239,7 @@ export type TuiAction = {
 };
 export declare function stripAnsi(text: string): string;
 /** Append a chunk, keeping only the last {@link MAX_LOG_CHARS} characters. */
-export declare function appendLog(previous: string, chunk: string): string;
+export declare function appendLog(previous: LogSegment[], chunk: string, kind?: LogKind): LogSegment[];
 /** Every agent that takes part in a run, in declaration order: leader first. */
 export declare function plannedAgents(config: MultiClawConfig): AgentDefinition[];
 export declare function leaderAgentIds(config: MultiClawConfig): string[];

package/dist/tui.js

@@ -260,7 +260,35 @@ function resolveAgentId(input, ids) {
 import { Box, Text } from "ink";
 
 // src/tui/format.ts
+import { renderToAnsi } from "md4x/napi";
 import stringWidth from "string-width";
+var DIM = "\x1B[2m";
+var CYAN = "\x1B[36m";
+var YELLOW = "\x1B[33m";
+var RESET = "\x1B[0m";
+function renderSegments(segments, _width) {
+  const parts = [];
+  let textBuf = "";
+  const flushText = () => {
+    if (!textBuf) return;
+    parts.push(renderToAnsi(textBuf, { heal: true }));
+    textBuf = "";
+  };
+  for (const seg of segments) {
+    if (seg.kind === "text") {
+      textBuf += seg.text;
+    } else {
+      flushText();
+      if (seg.kind === "tool") {
+        parts.push(`${DIM}${CYAN}\u25B8 ${seg.text}${RESET}`);
+      } else if (seg.kind === "system") {
+        parts.push(`${DIM}${YELLOW}${seg.text}${RESET}`);
+      }
+    }
+  }
+  flushText();
+  return parts.join("\n");
+}
 function truncate(text, max) {
   if (max <= 0) return "";
   if (text.length <= max) return text;
@@ -650,12 +678,29 @@ var initialState = {
 function stripAnsi(text) {
   return text.replace(ANSI_PATTERN, "");
 }
-function appendLog(previous, chunk) {
-  const next = previous + stripAnsi(chunk);
-  return next.length > MAX_LOG_CHARS ? next.slice(next.length - MAX_LOG_CHARS) : next;
+function appendLog(previous, chunk, kind = "text") {
+  const text = stripAnsi(chunk);
+  if (!text) return previous;
+  const last = previous[previous.length - 1];
+  const next = last?.kind === kind ? [...previous.slice(0, -1), { kind, text: last.text + text }] : [...previous, { kind, text }];
+  let total = next.reduce((sum, s) => sum + s.text.length, 0);
+  if (total <= MAX_LOG_CHARS) return next;
+  const result = [...next];
+  while (total > MAX_LOG_CHARS && result.length > 0) {
+    const first = result[0];
+    const excess = total - MAX_LOG_CHARS;
+    if (first.text.length <= excess) {
+      total -= first.text.length;
+      result.shift();
+    } else {
+      result[0] = { ...first, text: first.text.slice(excess) };
+      break;
+    }
+  }
+  return result;
 }
 function blankAgent(id, name, patch = {}) {
-  return { id, name, status: "pending", logs: "", ...patch };
+  return { id, name, status: "pending", logs: [], ...patch };
 }
 function epoch(iso) {
   const value = Date.parse(iso);
@@ -787,7 +832,7 @@ function reduceEvent(state, event) {
         error: void 0,
         usage: void 0,
         costUsd: void 0,
-        logs: existing.startedAt !== void 0 && existing.logs ? appendLog(existing.logs, "\n[agent restarted]\n") : existing.logs
+        logs: existing.startedAt !== void 0 && existing.logs.length > 0 ? appendLog(existing.logs, "[agent restarted]", "system") : existing.logs
       } : blankAgent(agentId, agentName, {
         icon,
         model,
@@ -813,7 +858,7 @@ function reduceEvent(state, event) {
         ...state,
         agents: {
           ...state.agents,
-          [agentId]: { ...existing, logs: appendLog(existing.logs, chunk) }
+          [agentId]: { ...existing, logs: appendLog(existing.logs, chunk, kind ?? "text") }
         }
       };
     }
@@ -835,11 +880,10 @@ function reduceEvent(state, event) {
       const existing = state.agents[result.agentId];
       const next = existing ? { ...existing, ...patch } : blankAgent(result.agentId, result.agentName, patch);
       if (event.type === "agent:failed") {
-        if (next.logs === "" && result.output) next.logs = appendLog("", result.output);
-        if (result.error && !next.logs.includes(stripAnsi(result.error))) {
-          next.logs = appendLog(next.logs, `
-[error] ${result.error}
-`);
+        if (next.logs.length === 0 && result.output)
+          next.logs = appendLog([], result.output, "text");
+        if (result.error && !next.logs.some((s) => s.text.includes(stripAnsi(result.error)))) {
+          next.logs = appendLog(next.logs, result.error, "system");
         }
       }
       return { ...state, agents: { ...state.agents, [result.agentId]: next } };
@@ -852,12 +896,14 @@ function reduceEvent(state, event) {
     }
     case "agent:retrying": {
       const { agentId, agentName, attempt, maxAttempts, error } = event.payload;
-      const note = `
-[retry ${attempt}/${maxAttempts}] ${error}
-`;
+      const note = `[retry ${attempt}/${maxAttempts}] ${error}`;
       const existing = state.agents[agentId];
       const retry = { attempt, max: maxAttempts };
-      const next = existing ? { ...existing, status: "retrying", retry, logs: appendLog(existing.logs, note) } : blankAgent(agentId, agentName, { status: "retrying", retry, logs: note });
+      const next = existing ? { ...existing, status: "retrying", retry, logs: appendLog(existing.logs, note, "system") } : blankAgent(agentId, agentName, {
+        status: "retrying",
+        retry,
+        logs: appendLog([], note, "system")
+      });
       return { ...state, agents: { ...state.agents, [agentId]: next } };
     }
     case "orchestration:warning":
@@ -880,7 +926,9 @@ function reduceEvent(state, event) {
   }
 }
 function wrapLog(logs, width) {
-  return logs.split("\n").flatMap((line) => wrapLine(line, width));
+  if (logs.length === 0) return [];
+  const rendered = renderSegments(logs, width);
+  return rendered.trimEnd().split("\n").flatMap((line) => wrapLine(line, width));
 }
 function focusedRowCount(turn, width) {
   const agent = turn.focusId ? turn.agents[turn.focusId] : void 0;
@@ -1052,7 +1100,7 @@ function tuiReducer(state, action) {
         const id = turn.focusId;
         const agent = id ? turn.agents[id] : void 0;
         if (!id || !agent) return turn;
-        return { ...turn, agents: { ...turn.agents, [id]: { ...agent, logs: "" } }, scroll: 0 };
+        return { ...turn, agents: { ...turn.agents, [id]: { ...agent, logs: [] } }, scroll: 0 };
       });
     case "stream:note": {
       const agent = state.agents[action.agentId];
@@ -1061,9 +1109,7 @@ function tuiReducer(state, action) {
         ...state,
         agents: {
           ...state.agents,
-          [action.agentId]: { ...agent, logs: appendLog(agent.logs, `
-${action.text}
-`) }
+          [action.agentId]: { ...agent, logs: appendLog(agent.logs, action.text, "system") }
         }
       };
     }
@@ -1990,7 +2036,7 @@ function Prompt({
     const caret = line.caret;
     const rest = caret === void 0 ? "" : line.text.slice(caret);
     const cell = [...ghost ? hint : rest][0] ?? " ";
-    const tail2 = ghost ? [...hint].slice(1).join("") : rest.slice(cell.length);
+    const tail = ghost ? [...hint].slice(1).join("") : rest.slice(cell.length);
     return (
       // biome-ignore lint/suspicious/noArrayIndexKey: a text row has no identity beyond its position — the whole prompt is rebuilt on every keystroke anyway
       /* @__PURE__ */ jsxs5(Box5, { flexShrink: 0, children: [
@@ -1998,7 +2044,7 @@ function Prompt({
         caret === void 0 ? /* @__PURE__ */ jsx5(Text5, { dimColor: ghost, children: line.text }) : /* @__PURE__ */ jsxs5(Fragment2, { children: [
           /* @__PURE__ */ jsx5(Text5, { dimColor: ghost, children: line.text.slice(0, caret) }),
           /* @__PURE__ */ jsx5(Text5, { inverse: caretVisible, dimColor: !caretVisible && ghost, children: cell }),
-          /* @__PURE__ */ jsx5(Text5, { dimColor: ghost, children: tail2 })
+          /* @__PURE__ */ jsx5(Text5, { dimColor: ghost, children: tail })
         ] })
       ] }, start + index)
     );
@@ -2207,7 +2253,8 @@ function formatTurnMarkdown(turn) {
     lines.push("");
     lines.push("## Logs", "");
     for (const agent of agents) {
-      lines.push(`### ${agent.id}: ${agent.name}`, "", "```", agent.logs ?? "", "```", "");
+      const logsText = agent.logs.map((s) => s.text).join("");
+      lines.push(`### ${agent.id}: ${agent.name}`, "", "```", logsText ?? "", "```", "");
     }
   }
   return `${lines.join("\n").trimEnd()}
@@ -2237,7 +2284,7 @@ var STATUSES = /* @__PURE__ */ new Set([
 ]);
 function isAgentView(value) {
   if (!isObject2(value)) return false;
-  return typeof value.id === "string" && typeof value.name === "string" && typeof value.logs === "string" && typeof value.status === "string" && STATUSES.has(value.status);
+  return typeof value.id === "string" && typeof value.name === "string" && Array.isArray(value.logs) && typeof value.status === "string" && STATUSES.has(value.status);
 }
 function isJournalTurn(value) {
   if (!isObject2(value)) return false;
@@ -2265,13 +2312,27 @@ function saveJournal(workDir, sessionId, journal) {
   if (isEmpty(journal) && !fs4.existsSync(target)) return Promise.resolve();
   return writeJsonFile(target, JSON.stringify(journal));
 }
-function tail(text, max) {
-  return text.length > max ? `\u2026${text.slice(text.length - max)}` : text;
+function tailSegments(segs, max) {
+  let total = segs.reduce((sum, s) => sum + s.text.length, 0);
+  if (total <= max) return segs;
+  const result = [...segs];
+  while (total > max && result.length > 0) {
+    const first = result[0];
+    const excess = total - max;
+    if (first.text.length <= excess) {
+      total -= first.text.length;
+      result.shift();
+    } else {
+      result[0] = { ...first, text: `\u2026${first.text.slice(excess)}` };
+      break;
+    }
+  }
+  return result;
 }
 function journalTurn(state, pending) {
   const agents = {};
   for (const [id, agent] of Object.entries(state.agents)) {
-    agents[id] = { ...agent, logs: tail(agent.logs, MAX_JOURNAL_LOG_CHARS) };
+    agents[id] = { ...agent, logs: tailSegments(agent.logs, MAX_JOURNAL_LOG_CHARS) };
   }
   return {
     turn: state.turn,
@@ -2919,7 +2980,7 @@ function App({
   const argOpen = !helpOpen && !historyOpen && !sessionsOpen && arg !== void 0 && argRows.length > 0;
   const paletteOpen = menuOpen || argOpen;
   const front = interactions[0];
-  const menu = front?.kind === "permission" && permissionMenu.id === front.shortId ? permissionMenu : { id: front?.shortId ?? "", cursor: void 0, released: false };
+  const menu = front?.kind === "permission" && permissionMenu.id === front.shortId ? permissionMenu : { id: front?.shortId ?? "", cursor: 0, released: false };
   const frontQuestion = front?.kind === "question" ? front : void 0;
   const questionFields = useMemo(
     () => frontQuestion ? formFields(frontQuestion.request) : [],

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@multiclawcli/dashboard",
-  "version": "0.10.0",
+  "version": "0.11.0",
   "type": "module",
   "exports": {
     "./tui": {
@@ -25,8 +25,9 @@
     "access": "public"
   },
   "dependencies": {
-    "@multiclawcli/core": "0.10.0",
+    "@multiclawcli/core": "0.11.0",
     "ink": "^8.0.0",
+    "md4x": "^0.0.30",
     "react": "^19.3.1",
     "string-width": "^8.3.0"
   },