@volter-ai-dev/supercode-ui 0.1.7 → 0.1.9

package/conversation.mjs

@@ -59,6 +59,108 @@ var EMPTY_UI_STATE = Object.freeze({
   owned: null,
   attachError: null
 });
+var TOOL_CATEGORIES = /* @__PURE__ */ new Set(["read", "search", "edit", "command", "test", "web", "agent", "plan", "other"]);
+var MAX_TOOL_FIELDS = 8;
+var MAX_TOOL_FIELD_CHARS = 800;
+var MAX_TOOL_PREVIEW_CHARS = 4e3;
+function record(value) {
+  return value !== null && typeof value === "object" && !Array.isArray(value) ? value : null;
+}
+function boundedString(value, max) {
+  if (typeof value !== "string") return "";
+  return value.length <= max ? value : `${value.slice(0, max)}\u2026`;
+}
+function argumentObject(argumentsText) {
+  if (!argumentsText) return null;
+  try {
+    return record(JSON.parse(argumentsText));
+  } catch {
+    return null;
+  }
+}
+function firstString(source, keys) {
+  for (const key of keys) {
+    if (typeof source?.[key] === "string" && source[key].trim()) return source[key].trim();
+  }
+  return "";
+}
+function explicitNumber(sources, keys) {
+  for (const source of sources) {
+    for (const key of keys) {
+      const value = source?.[key];
+      const parsed = typeof value === "string" && value.trim() !== "" ? Number(value) : value;
+      if (typeof parsed === "number" && Number.isFinite(parsed)) return parsed;
+    }
+  }
+  return null;
+}
+function toolDetail(category) {
+  return { read: "file", search: "matches", edit: "diff", command: "terminal", test: "terminal", web: "web", agent: "agent", plan: "plan" }[category] ?? "fields";
+}
+function usefulToolFields(args) {
+  if (!args) return [];
+  const hidden = /* @__PURE__ */ new Set(["command", "cmd", "file_path", "target_file", "path", "query", "pattern", "url", "patch", "diff", "old_string", "new_string", "content", "prompt", "description", "task", "plan", "todos"]);
+  return Object.entries(args).flatMap(([key, value]) => {
+    if (hidden.has(key) || value === null || value === void 0) return [];
+    const rendered = typeof value === "string" ? value : JSON.stringify(value);
+    if (!rendered) return [];
+    return [{ label: key.replaceAll(/[_-]+/g, " ").replace(/^./, (letter) => letter.toLocaleUpperCase()), value: boundedString(rendered, MAX_TOOL_FIELD_CHARS) }];
+  }).slice(0, MAX_TOOL_FIELDS);
+}
+function planItems(args) {
+  const source = Array.isArray(args?.plan) ? args.plan : Array.isArray(args?.todos) ? args.todos : [];
+  return source.flatMap((item) => {
+    if (typeof item === "string" && item.trim()) return [{ label: boundedString(item.trim(), 300), status: "" }];
+    const value = record(item);
+    const label = firstString(value, ["step", "title", "content", "text"]);
+    if (!label) return [];
+    return [{ label: boundedString(label, 300), status: firstString(value, ["status"]) }];
+  }).slice(0, 12);
+}
+function editPreview(args, resultText) {
+  const direct = firstString(args, ["patch", "diff"]);
+  if (direct) return direct;
+  const oldText = firstString(args, ["old_string"]);
+  const newText = firstString(args, ["new_string"]);
+  if (oldText || newText) {
+    return [
+      ...oldText.split("\n").map((line) => `- ${line}`),
+      ...newText.split("\n").map((line) => `+ ${line}`)
+    ].join("\n");
+  }
+  return /^(?:diff --git|@@ |--- |\+\+\+ )/m.test(resultText ?? "") ? resultText : "";
+}
+function createToolPresentation(entry) {
+  const args = argumentObject(entry.arguments);
+  const category = toolCategory({ label: entry.label, arguments: entry.arguments });
+  const command = firstString(args, ["command", "cmd"]);
+  const path = firstString(args, ["file_path", "target_file", "path"]);
+  const query = firstString(args, ["query", "pattern"]);
+  const url = firstString(args, ["url"]);
+  const subject = firstString(args, ["description", "task", "prompt"]);
+  const target = path || command || query || url || subject || toolTarget(entry.arguments);
+  const previewSource = category === "edit" ? editPreview(args, entry.resultText) : entry.resultText ?? "";
+  const result = record(entry.resultContent);
+  const metadata = record(entry.metadata);
+  return {
+    category,
+    detail: toolDetail(category),
+    target: boundedString(target, 300),
+    command: boundedString(command, MAX_TOOL_FIELD_CHARS),
+    path: boundedString(path, MAX_TOOL_FIELD_CHARS),
+    query: boundedString(query, MAX_TOOL_FIELD_CHARS),
+    url: boundedString(url, MAX_TOOL_FIELD_CHARS),
+    subject: boundedString(subject, MAX_TOOL_FIELD_CHARS),
+    preview: boundedString(previewSource, MAX_TOOL_PREVIEW_CHARS),
+    fields: usefulToolFields(args),
+    items: planItems(args),
+    exitCode: explicitNumber([result, metadata], ["exit_code", "exitCode"]),
+    durationMs: explicitNumber([result, metadata], ["duration_ms", "durationMs", "elapsed_ms", "elapsedMs"]),
+    additions: explicitNumber([result, metadata], ["additions", "lines_added"]),
+    deletions: explicitNumber([result, metadata], ["deletions", "lines_removed"]),
+    matches: explicitNumber([result, metadata], ["matches", "match_count", "result_count"])
+  };
+}
 function harnessDisplayName(id) {
   return HARNESS_NAMES[id] ?? id;
 }
@@ -76,6 +178,7 @@ function groupConversation(entries) {
   return blocks;
 }
 function toolCategory(entry) {
+  if (TOOL_CATEGORIES.has(entry.presentation?.category)) return entry.presentation.category;
   const name = entry.label?.toLocaleLowerCase() ?? "";
   if (/read|view|open_file|list_dir/.test(name)) return "read";
   if (/search|find|grep|glob/.test(name)) return "search";
@@ -83,7 +186,8 @@ function toolCategory(entry) {
   if (/test|typecheck|lint|build/.test(name)) return "test";
   if (/terminal|bash|shell|command|exec/.test(name)) return /\b(test|typecheck|lint|build)\b/i.test(entry.arguments ?? "") ? "test" : "command";
   if (/browser|web|fetch|url/.test(name)) return "web";
-  if (/subagent|spawn|task/.test(name)) return "agent";
+  if (/update.?plan|todo|checklist/.test(name)) return "plan";
+  if (/subagent|spawn.?agent|delegate|^task$/.test(name)) return "agent";
   return "other";
 }
 function toolTarget(argumentsText) {
@@ -105,9 +209,12 @@ function compactToolTarget(target, workspace) {
 function activitySummary(entries) {
   const counts = /* @__PURE__ */ new Map();
   for (const entry of entries) counts.set(toolCategory(entry), (counts.get(toolCategory(entry)) ?? 0) + 1);
+  const failed = entries.filter((entry) => entry.status === "error").length;
+  const pending = entries.filter((entry) => entry.status === "pending").length;
+  if (pending) return `${entries.length} actions in progress`;
+  if (failed) return `${entries.length} actions \xB7 ${failed} failed`;
   if ([...counts.keys()].every((key) => key === "read" || key === "search")) return `Explored ${entries.length} ${entries.length === 1 ? "item" : "items"}`;
-  const labels = { edit: "changed", test: "tests/builds", command: "commands", read: "reads", search: "searches", web: "web", agent: "agents", other: "other" };
-  return `Activity \xB7 ${Object.entries(labels).flatMap(([key, label]) => counts.has(key) ? [`${counts.get(key)} ${label}`] : []).join(" \xB7 ")}`;
+  return `${entries.length} actions`;
 }
 
 // src/markdown.jsx
@@ -135,7 +242,7 @@ function boundedSet(map, key, value) {
 }
 
 // src/conversation.jsx
-import { jsx as jsx2, jsxs } from "preact/jsx-runtime";
+import { Fragment, jsx as jsx2, jsxs } from "preact/jsx-runtime";
 function LoadingStatus({ state, compact = false }) {
   const copy = {
     connecting: ["Connecting to coding agents", "Checking installed harnesses and capabilities.", 0],
@@ -183,6 +290,185 @@ function ContextDisclosure({ context }) {
     ] }, item.id ?? index)) })
   ] });
 }
+var TOOL_ICONS = {
+  read: () => /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx2("path", { d: "M5 2.75h7.25L15 5.5v7.75A1.75 1.75 0 0 1 13.25 15h-8.5A1.75 1.75 0 0 1 3 13.25v-8.5A2 2 0 0 1 5 2.75Z" }),
+    /* @__PURE__ */ jsx2("path", { d: "M12 2.9v3h2.85M6 9h6M6 12h4" })
+  ] }),
+  search: () => /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx2("circle", { cx: "8", cy: "8", r: "4.5" }),
+    /* @__PURE__ */ jsx2("path", { d: "m11.5 11.5 3 3" })
+  ] }),
+  edit: () => /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx2("path", { d: "m11.75 3.25 3 3-8.5 8.5-3.75.75.75-3.75 8.5-8.5Z" }),
+    /* @__PURE__ */ jsx2("path", { d: "m10 5 3 3" })
+  ] }),
+  command: () => /* @__PURE__ */ jsx2(Fragment, { children: /* @__PURE__ */ jsx2("path", { d: "m3 5 3 3-3 3M8 12h6" }) }),
+  test: () => /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx2("path", { d: "M6 2.5v3L3 12a2 2 0 0 0 1.8 3h8.4a2 2 0 0 0 1.8-3l-3-6.5v-3M5 9h8" }),
+    /* @__PURE__ */ jsx2("path", { d: "M5 2.5h8" })
+  ] }),
+  web: () => /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx2("circle", { cx: "9", cy: "9", r: "6.5" }),
+    /* @__PURE__ */ jsx2("path", { d: "M2.75 9h12.5M9 2.5c2 1.8 3 4 3 6.5s-1 4.7-3 6.5c-2-1.8-3-4-3-6.5s1-4.7 3-6.5Z" })
+  ] }),
+  agent: () => /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx2("circle", { cx: "9", cy: "6", r: "2.5" }),
+    /* @__PURE__ */ jsx2("path", { d: "M4 15c.4-3 2-4.5 5-4.5s4.6 1.5 5 4.5" })
+  ] }),
+  plan: () => /* @__PURE__ */ jsx2(Fragment, { children: /* @__PURE__ */ jsx2("path", { d: "m3 5 1 1 2-2M3 9l1 1 2-2M3 13l1 1 2-2M8 5h7M8 9h7M8 13h7" }) }),
+  other: () => /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx2("path", { d: "M9 2.5v3M9 12.5v3M2.5 9h3M12.5 9h3" }),
+    /* @__PURE__ */ jsx2("circle", { cx: "9", cy: "9", r: "3.5" })
+  ] })
+};
+function ToolIcon({ category }) {
+  const Glyph = TOOL_ICONS[category] ?? TOOL_ICONS.other;
+  return /* @__PURE__ */ jsx2("svg", { class: "scui-tool-icon", viewBox: "0 0 18 18", fill: "none", stroke: "currentColor", "stroke-width": "1.35", "stroke-linecap": "round", "stroke-linejoin": "round", "aria-hidden": "true", children: /* @__PURE__ */ jsx2(Glyph, {}) });
+}
+function toolAction(entry, category) {
+  const status = entry.status ?? "completed";
+  const actions = {
+    read: ["Reading", "Read", "Read failed"],
+    search: ["Searching", "Searched", "Search failed"],
+    edit: ["Editing", "Edited", "Edit failed"],
+    command: ["Running command", "Ran command", "Command failed"],
+    test: ["Running tests", "Ran tests", "Tests failed"],
+    web: ["Browsing", "Browsed", "Browser action failed"],
+    agent: ["Starting agent", "Started agent", "Agent failed"],
+    plan: ["Updating plan", "Updated plan", "Plan update failed"]
+  };
+  const position = status === "pending" ? 0 : status === "error" ? 2 : 1;
+  if (actions[category]) return actions[category][position];
+  const label = entry.label?.split(/__|\//).at(-1)?.replaceAll(/[_-]+/g, " ") || "Tool";
+  return status === "error" ? `${label} failed` : label;
+}
+function argumentLabel(key) {
+  const labels = { cmd: "Command", command: "Command", cwd: "Working directory", file_path: "File", target_file: "File", path: "Path", query: "Query", pattern: "Pattern", url: "URL" };
+  return labels[key] ?? key.replaceAll(/[_-]+/g, " ").replace(/^./, (letter) => letter.toLocaleUpperCase());
+}
+function argumentRows(argumentsText) {
+  if (!argumentsText) return [];
+  try {
+    const value = JSON.parse(argumentsText);
+    if (value && typeof value === "object" && !Array.isArray(value)) {
+      return Object.entries(value).map(([key, item]) => ({
+        key,
+        label: argumentLabel(key),
+        value: typeof item === "string" ? item : JSON.stringify(item, null, 2)
+      }));
+    }
+  } catch {
+  }
+  return [{ key: "arguments", label: "Details", value: argumentsText }];
+}
+function stripAnsi(value) {
+  return value?.replaceAll(/[\u001B\u009B][[\]()#;?]*(?:(?:(?:[a-zA-Z\d]*(?:;[-a-zA-Z\d\/#&.:=?%@~_]+)*)?\u0007)|(?:(?:\d{1,4}(?:[;:]\d{0,4})*)?[\dA-PR-TZcf-nq-uy=><~]))/g, "") ?? "";
+}
+function formatDuration(value) {
+  if (value === null) return "";
+  if (value < 1e3) return `${Math.round(value)}ms`;
+  return `${(value / 1e3).toFixed(value < 1e4 ? 1 : 0)}s`;
+}
+function ToolMetrics({ presentation }) {
+  const metrics = [
+    presentation.matches === null ? "" : `${presentation.matches} ${presentation.matches === 1 ? "match" : "matches"}`,
+    presentation.additions === null ? "" : `+${presentation.additions}`,
+    presentation.deletions === null ? "" : `\u2212${presentation.deletions}`,
+    presentation.exitCode === null ? "" : `exit ${presentation.exitCode}`,
+    formatDuration(presentation.durationMs)
+  ].filter(Boolean);
+  return metrics.length ? /* @__PURE__ */ jsx2("div", { class: "scui-tool-metrics", children: metrics.map((metric) => /* @__PURE__ */ jsx2("span", { children: metric }, metric)) }) : null;
+}
+function LinePreview({ value, kind }) {
+  if (!value) return null;
+  return /* @__PURE__ */ jsx2("ol", { class: "scui-code-preview", "data-kind": kind, children: stripAnsi(value).split("\n").map((line, index) => {
+    const tone = kind === "diff" ? line.startsWith("+") && !line.startsWith("+++") ? "add" : line.startsWith("-") && !line.startsWith("---") ? "remove" : line.startsWith("@@") ? "hunk" : "plain" : "plain";
+    return /* @__PURE__ */ jsxs("li", { "data-tone": tone, children: [
+      /* @__PURE__ */ jsx2("span", { children: index + 1 }),
+      /* @__PURE__ */ jsx2("code", { children: line || " " })
+    ] }, index);
+  }) });
+}
+function TerminalPreview({ presentation, pending, failed }) {
+  return /* @__PURE__ */ jsxs("section", { class: "scui-terminal", children: [
+    /* @__PURE__ */ jsxs("header", { children: [
+      /* @__PURE__ */ jsxs("span", { "aria-hidden": "true", children: [
+        /* @__PURE__ */ jsx2("i", {}),
+        /* @__PURE__ */ jsx2("i", {}),
+        /* @__PURE__ */ jsx2("i", {})
+      ] }),
+      /* @__PURE__ */ jsx2("code", { children: presentation.command ? `$ ${presentation.command}` : "Terminal" })
+    ] }),
+    presentation.preview ? /* @__PURE__ */ jsx2("pre", { "data-error": failed, children: stripAnsi(presentation.preview) }) : pending ? /* @__PURE__ */ jsxs("div", { class: "scui-terminal-wait", children: [
+      /* @__PURE__ */ jsx2("i", {}),
+      " Waiting for output"
+    ] }) : /* @__PURE__ */ jsx2("div", { class: "scui-terminal-empty", children: "No output" })
+  ] });
+}
+function SearchPreview({ presentation }) {
+  const lines = stripAnsi(presentation.preview).split("\n").filter(Boolean);
+  return /* @__PURE__ */ jsxs("section", { class: "scui-search-preview", children: [
+    presentation.query ? /* @__PURE__ */ jsxs("header", { children: [
+      /* @__PURE__ */ jsx2("span", { children: "Search" }),
+      /* @__PURE__ */ jsx2("code", { children: presentation.query })
+    ] }) : null,
+    lines.length ? /* @__PURE__ */ jsx2("ol", { children: lines.map((line, index) => {
+      const match = /^(.*?):(\d+)(?::(\d+))?:(.*)$/.exec(line);
+      return /* @__PURE__ */ jsx2("li", { children: match ? /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx2("code", { children: match[1] }),
+        /* @__PURE__ */ jsxs("small", { children: [
+          match[2],
+          match[3] ? `:${match[3]}` : ""
+        ] }),
+        /* @__PURE__ */ jsx2("span", { children: match[4] })
+      ] }) : /* @__PURE__ */ jsx2("span", { children: line }) }, index);
+    }) }) : /* @__PURE__ */ jsx2("p", { children: "No textual results" })
+  ] });
+}
+function ToolPreview({ presentation, entry }) {
+  const pending = entry.status === "pending";
+  const failed = entry.status === "error";
+  if (presentation.detail === "terminal") return /* @__PURE__ */ jsx2(TerminalPreview, { presentation, pending, failed });
+  if (presentation.detail === "diff") return presentation.preview ? /* @__PURE__ */ jsx2(LinePreview, { value: presentation.preview, kind: "diff" }) : /* @__PURE__ */ jsx2("div", { class: "scui-tool-empty", children: "Edit completed without a textual diff" });
+  if (presentation.detail === "file") return presentation.preview ? /* @__PURE__ */ jsx2(LinePreview, { value: presentation.preview, kind: "file" }) : /* @__PURE__ */ jsx2("div", { class: "scui-tool-empty", children: "File contents were not included in this event" });
+  if (presentation.detail === "matches") return /* @__PURE__ */ jsx2(SearchPreview, { presentation });
+  if (presentation.detail === "web") return /* @__PURE__ */ jsxs("section", { class: "scui-web-preview", children: [
+    presentation.url ? /* @__PURE__ */ jsx2("code", { children: presentation.url }) : null,
+    presentation.preview ? /* @__PURE__ */ jsx2("p", { children: stripAnsi(presentation.preview) }) : /* @__PURE__ */ jsx2("small", { children: pending ? "Waiting for the page" : "No page summary returned" })
+  ] });
+  if (presentation.detail === "agent") return /* @__PURE__ */ jsxs("section", { class: "scui-agent-preview", children: [
+    presentation.subject ? /* @__PURE__ */ jsx2("p", { children: presentation.subject }) : null,
+    presentation.preview ? /* @__PURE__ */ jsx2("pre", { children: stripAnsi(presentation.preview) }) : /* @__PURE__ */ jsx2("small", { children: pending ? "Agent is working" : "No textual handoff returned" })
+  ] });
+  if (presentation.detail === "plan") return /* @__PURE__ */ jsx2("ol", { class: "scui-plan-preview", children: presentation.items?.map((item, index) => /* @__PURE__ */ jsxs("li", { "data-status": item.status, children: [
+    /* @__PURE__ */ jsx2("i", { "aria-hidden": "true" }),
+    /* @__PURE__ */ jsx2("span", { children: item.label })
+  ] }, `${item.label}:${index}`)) });
+  return presentation.preview ? /* @__PURE__ */ jsx2("pre", { class: "scui-tool-output", "data-error": failed, children: stripAnsi(presentation.preview) }) : null;
+}
+function TechnicalDetails({ entry }) {
+  if (!entry.arguments && !entry.resultText) return null;
+  return /* @__PURE__ */ jsxs("details", { class: "scui-tool-technical", children: [
+    /* @__PURE__ */ jsx2("summary", { children: "Technical details" }),
+    /* @__PURE__ */ jsxs("div", { children: [
+      entry.arguments ? /* @__PURE__ */ jsxs("section", { children: [
+        /* @__PURE__ */ jsx2("strong", { children: "Native arguments" }),
+        /* @__PURE__ */ jsx2("dl", { children: argumentRows(entry.arguments).map((row) => /* @__PURE__ */ jsxs("div", { children: [
+          /* @__PURE__ */ jsx2("dt", { children: row.label }),
+          /* @__PURE__ */ jsx2("dd", { children: /* @__PURE__ */ jsx2("pre", { children: row.value }) })
+        ] }, row.key)) })
+      ] }) : null,
+      entry.resultText ? /* @__PURE__ */ jsxs("section", { children: [
+        /* @__PURE__ */ jsx2("strong", { children: "Native result" }),
+        /* @__PURE__ */ jsxs("pre", { "data-error": entry.status === "error", children: [
+          entry.resultText,
+          entry.truncated ? "\n[truncated]" : ""
+        ] })
+      ] }) : null
+    ] })
+  ] });
+}
 function TranscriptEntry({ entry, state, adapter }) {
   if (entry.role === "request") return /* @__PURE__ */ jsx2(RequestCard, { entry, adapter, canRespond: state.canRespond });
   if (entry.role === "reasoning") {
@@ -198,36 +484,35 @@ function TranscriptEntry({ entry, state, adapter }) {
     entry.truncated ? /* @__PURE__ */ jsx2("small", { class: "scui-truncated", children: "Entry truncated by host \xB7 load native session for the complete value" }) : null
   ] });
 }
-function ToolRow({ entry, workspace }) {
-  const [open, setOpen] = useState(entry.status === "pending");
-  const detailId = useId();
-  const target = compactToolTarget(toolTarget(entry.arguments), workspace);
-  const hasDetail = Boolean(entry.arguments || entry.resultText);
-  const category = toolCategory(entry);
-  return /* @__PURE__ */ jsxs("div", { class: "scui-tool", "data-status": entry.status ?? "completed", "data-category": category, children: [
-    /* @__PURE__ */ jsxs("button", { type: "button", class: "scui-tool-head", disabled: !hasDetail, "aria-expanded": hasDetail ? open : void 0, "aria-controls": hasDetail ? detailId : void 0, onClick: () => hasDetail && setOpen((value) => !value), children: [
-      /* @__PURE__ */ jsx2("span", { class: "scui-tool-glyph", "aria-hidden": "true", children: { read: "\u25A4", search: "\u2315", edit: "\u270E", command: ">_", test: "\u25C7", web: "\u25CE", agent: "\u2659", other: "\u25C6" }[category] }),
-      /* @__PURE__ */ jsx2("strong", { children: entry.label?.split(/__|\//).at(-1)?.replaceAll("_", " ") || "Tool" }),
-      target ? /* @__PURE__ */ jsx2("span", { class: "scui-tool-target", title: toolTarget(entry.arguments), children: target }) : null,
-      /* @__PURE__ */ jsx2("span", { class: "scui-spacer" }),
-      /* @__PURE__ */ jsx2("span", { "aria-label": entry.status ?? "completed", children: entry.status === "pending" ? "\u25CC" : entry.status === "error" ? "\xD7" : "\u2713" })
-    ] }),
-    hasDetail && open ? /* @__PURE__ */ jsxs("div", { id: detailId, class: "scui-tool-detail", children: [
-      entry.arguments ? /* @__PURE__ */ jsxs("pre", { children: [
-        /* @__PURE__ */ jsx2("b", { children: "Input" }),
-        "\n",
-        entry.arguments
-      ] }) : null,
-      entry.resultText ? /* @__PURE__ */ jsxs("pre", { "data-error": entry.status === "error", children: [
-        /* @__PURE__ */ jsx2("b", { children: "Output" }),
-        "\n",
-        entry.resultText,
-        entry.truncated ? "\n[truncated]" : ""
-      ] }) : null
-    ] }) : null
+function ToolRow({ entry, workspace, open = false }) {
+  const presentation = entry.presentation ?? createToolPresentation(entry);
+  const target = compactToolTarget(presentation.target, workspace);
+  const hasDetail = Boolean(entry.arguments || entry.resultText || presentation.preview || presentation.fields.length);
+  const category = presentation.category ?? toolCategory(entry);
+  const summary = /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx2(ToolIcon, { category }),
+    /* @__PURE__ */ jsx2("strong", { children: toolAction(entry, category) }),
+    target ? /* @__PURE__ */ jsx2("code", { class: "scui-tool-target", title: presentation.target, children: target }) : null,
+    /* @__PURE__ */ jsx2("span", { class: "scui-spacer" }),
+    /* @__PURE__ */ jsx2("span", { class: "scui-tool-status", role: "status", "data-status": entry.status ?? "completed", "aria-label": entry.status ?? "completed", children: entry.status === "pending" ? /* @__PURE__ */ jsx2("i", {}) : entry.status === "error" ? "\xD7" : "\u2713" }),
+    hasDetail ? /* @__PURE__ */ jsx2("span", { class: "scui-tool-chevron", "aria-hidden": "true", children: "\u203A" }) : null
+  ] });
+  if (!hasDetail) return /* @__PURE__ */ jsx2("div", { class: "scui-tool", "data-status": entry.status ?? "completed", "data-category": category, children: /* @__PURE__ */ jsx2("div", { class: "scui-tool-head", children: summary }) });
+  return /* @__PURE__ */ jsxs("details", { class: "scui-tool", "data-status": entry.status ?? "completed", "data-category": category, open: open || entry.status === "pending", children: [
+    /* @__PURE__ */ jsx2("summary", { class: "scui-tool-head", children: summary }),
+    /* @__PURE__ */ jsxs("div", { class: "scui-tool-detail", children: [
+      /* @__PURE__ */ jsx2(ToolMetrics, { presentation }),
+      /* @__PURE__ */ jsx2(ToolPreview, { presentation, entry }),
+      presentation.fields.length ? /* @__PURE__ */ jsx2("dl", { class: "scui-tool-fields", children: presentation.fields.map((field) => /* @__PURE__ */ jsxs("div", { children: [
+        /* @__PURE__ */ jsx2("dt", { children: field.label }),
+        /* @__PURE__ */ jsx2("dd", { children: field.value })
+      ] }, field.label)) }) : null,
+      /* @__PURE__ */ jsx2(TechnicalDetails, { entry })
+    ] })
   ] });
 }
 function ActivityGroup({ entries, state }) {
+  if (entries.length === 1) return /* @__PURE__ */ jsx2("section", { class: "scui-activity", "data-single": "true", children: /* @__PURE__ */ jsx2(ToolRow, { entry: entries[0], workspace: state.workspace }) });
   const active = entries.some((entry) => entry.status === "pending");
   const [open, setOpen] = useState(active);
   const id = useId();
@@ -240,7 +525,7 @@ function ActivityGroup({ entries, state }) {
       /* @__PURE__ */ jsx2("strong", { children: activitySummary(entries) }),
       /* @__PURE__ */ jsx2("span", { class: "scui-spacer" }),
       /* @__PURE__ */ jsxs("small", { children: [
-        entries.filter((entry) => entry.status === "completed").length,
+        entries.filter((entry) => entry.status !== "pending").length,
         "/",
         entries.length
       ] })
@@ -387,5 +672,6 @@ export {
   RequestCard,
   SessionDetails,
   TaskPlan,
+  ToolRow,
   TranscriptEntry
 };

package/core.d.ts

@@ -19,6 +19,8 @@ export type {
   TranscriptContext,
   TranscriptEntryModel,
   TranscriptRequest,
+  ToolCategory,
+  ToolPresentationModel,
   UiTone,
 } from './index.js';
 export {
@@ -27,6 +29,7 @@ export {
   activitySummary,
   canContinueHere,
   compactToolTarget,
+  createToolPresentation,
   filterSessions,
   groupConversation,
   harnessDisplayName,

package/core.mjs

@@ -63,6 +63,11 @@ const MODES = new Set(['none', 'control', 'mirror']);
 const STRATEGIES = new Set(['start', 'resume', 'attach', 'branch', 'reduce']);
 const STARTUP = new Set(['connecting', 'starting', 'discovering', 'ready']);
 const FIDELITY = new Set(['byte_lossless', 'value_lossless', 'semantic']);
+const TOOL_CATEGORIES = new Set(['read', 'search', 'edit', 'command', 'test', 'web', 'agent', 'plan', 'other']);
+const TOOL_DETAILS = new Set(['file', 'matches', 'diff', 'terminal', 'web', 'agent', 'plan', 'fields']);
+const MAX_TOOL_FIELDS = 8;
+const MAX_TOOL_FIELD_CHARS = 800;
+const MAX_TOOL_PREVIEW_CHARS = 4_000;
 
 function record(value) {
   return value !== null && typeof value === 'object' && !Array.isArray(value) ? value : null;
@@ -80,6 +85,146 @@ function nullableNumber(value) {
   return typeof value === 'number' && Number.isFinite(value) ? value : null;
 }
 
+function boundedString(value, max) {
+  if (typeof value !== 'string') return '';
+  return value.length <= max ? value : `${value.slice(0, max)}…`;
+}
+
+function argumentObject(argumentsText) {
+  if (!argumentsText) return null;
+  try {
+    return record(JSON.parse(argumentsText));
+  } catch {
+    return null;
+  }
+}
+
+function firstString(source, keys) {
+  for (const key of keys) {
+    if (typeof source?.[key] === 'string' && source[key].trim()) return source[key].trim();
+  }
+  return '';
+}
+
+function explicitNumber(sources, keys) {
+  for (const source of sources) {
+    for (const key of keys) {
+      const value = source?.[key];
+      const parsed = typeof value === 'string' && value.trim() !== '' ? Number(value) : value;
+      if (typeof parsed === 'number' && Number.isFinite(parsed)) return parsed;
+    }
+  }
+  return null;
+}
+
+function toolDetail(category) {
+  return ({ read: 'file', search: 'matches', edit: 'diff', command: 'terminal', test: 'terminal', web: 'web', agent: 'agent', plan: 'plan' })[category] ?? 'fields';
+}
+
+function usefulToolFields(args) {
+  if (!args) return [];
+  const hidden = new Set(['command', 'cmd', 'file_path', 'target_file', 'path', 'query', 'pattern', 'url', 'patch', 'diff', 'old_string', 'new_string', 'content', 'prompt', 'description', 'task', 'plan', 'todos']);
+  return Object.entries(args).flatMap(([key, value]) => {
+    if (hidden.has(key) || value === null || value === undefined) return [];
+    const rendered = typeof value === 'string' ? value : JSON.stringify(value);
+    if (!rendered) return [];
+    return [{ label: key.replaceAll(/[_-]+/g, ' ').replace(/^./, (letter) => letter.toLocaleUpperCase()), value: boundedString(rendered, MAX_TOOL_FIELD_CHARS) }];
+  }).slice(0, MAX_TOOL_FIELDS);
+}
+
+function planItems(args) {
+  const source = Array.isArray(args?.plan) ? args.plan : Array.isArray(args?.todos) ? args.todos : [];
+  return source.flatMap((item) => {
+    if (typeof item === 'string' && item.trim()) return [{ label: boundedString(item.trim(), 300), status: '' }];
+    const value = record(item);
+    const label = firstString(value, ['step', 'title', 'content', 'text']);
+    if (!label) return [];
+    return [{ label: boundedString(label, 300), status: firstString(value, ['status']) }];
+  }).slice(0, 12);
+}
+
+function editPreview(args, resultText) {
+  const direct = firstString(args, ['patch', 'diff']);
+  if (direct) return direct;
+  const oldText = firstString(args, ['old_string']);
+  const newText = firstString(args, ['new_string']);
+  if (oldText || newText) {
+    return [
+      ...oldText.split('\n').map((line) => `- ${line}`),
+      ...newText.split('\n').map((line) => `+ ${line}`),
+    ].join('\n');
+  }
+  return /^(?:diff --git|@@ |--- |\+\+\+ )/m.test(resultText ?? '') ? resultText : '';
+}
+
+export function createToolPresentation(entry) {
+  const args = argumentObject(entry.arguments);
+  const category = toolCategory({ label: entry.label, arguments: entry.arguments });
+  const command = firstString(args, ['command', 'cmd']);
+  const path = firstString(args, ['file_path', 'target_file', 'path']);
+  const query = firstString(args, ['query', 'pattern']);
+  const url = firstString(args, ['url']);
+  const subject = firstString(args, ['description', 'task', 'prompt']);
+  const target = path || command || query || url || subject || toolTarget(entry.arguments);
+  const previewSource = category === 'edit' ? editPreview(args, entry.resultText) : (entry.resultText ?? '');
+  const result = record(entry.resultContent);
+  const metadata = record(entry.metadata);
+  return {
+    category,
+    detail: toolDetail(category),
+    target: boundedString(target, 300),
+    command: boundedString(command, MAX_TOOL_FIELD_CHARS),
+    path: boundedString(path, MAX_TOOL_FIELD_CHARS),
+    query: boundedString(query, MAX_TOOL_FIELD_CHARS),
+    url: boundedString(url, MAX_TOOL_FIELD_CHARS),
+    subject: boundedString(subject, MAX_TOOL_FIELD_CHARS),
+    preview: boundedString(previewSource, MAX_TOOL_PREVIEW_CHARS),
+    fields: usefulToolFields(args),
+    items: planItems(args),
+    exitCode: explicitNumber([result, metadata], ['exit_code', 'exitCode']),
+    durationMs: explicitNumber([result, metadata], ['duration_ms', 'durationMs', 'elapsed_ms', 'elapsedMs']),
+    additions: explicitNumber([result, metadata], ['additions', 'lines_added']),
+    deletions: explicitNumber([result, metadata], ['deletions', 'lines_removed']),
+    matches: explicitNumber([result, metadata], ['matches', 'match_count', 'result_count']),
+  };
+}
+
+function readToolPresentation(value, entry) {
+  const generated = createToolPresentation(entry);
+  const item = record(value);
+  if (!item) return generated;
+  const fields = Array.isArray(item.fields) ? item.fields.flatMap((raw) => {
+    const field = record(raw);
+    return field && typeof field.label === 'string' && typeof field.value === 'string'
+      ? [{ label: boundedString(field.label, 80), value: boundedString(field.value, MAX_TOOL_FIELD_CHARS) }]
+      : [];
+  }).slice(0, MAX_TOOL_FIELDS) : generated.fields;
+  const items = Array.isArray(item.items) ? item.items.flatMap((raw) => {
+    const planItem = record(raw);
+    return planItem && typeof planItem.label === 'string'
+      ? [{ label: boundedString(planItem.label, 300), status: boundedString(planItem.status, 40) }]
+      : [];
+  }).slice(0, 12) : generated.items;
+  return {
+    category: TOOL_CATEGORIES.has(item.category) ? item.category : generated.category,
+    detail: TOOL_DETAILS.has(item.detail) ? item.detail : generated.detail,
+    target: boundedString(item.target, 300) || generated.target,
+    command: boundedString(item.command, MAX_TOOL_FIELD_CHARS) || generated.command,
+    path: boundedString(item.path, MAX_TOOL_FIELD_CHARS) || generated.path,
+    query: boundedString(item.query, MAX_TOOL_FIELD_CHARS) || generated.query,
+    url: boundedString(item.url, MAX_TOOL_FIELD_CHARS) || generated.url,
+    subject: boundedString(item.subject, MAX_TOOL_FIELD_CHARS) || generated.subject,
+    preview: boundedString(item.preview, MAX_TOOL_PREVIEW_CHARS) || generated.preview,
+    fields,
+    items,
+    exitCode: nullableNumber(item.exitCode) ?? generated.exitCode,
+    durationMs: nullableNumber(item.durationMs) ?? generated.durationMs,
+    additions: nullableNumber(item.additions) ?? generated.additions,
+    deletions: nullableNumber(item.deletions) ?? generated.deletions,
+    matches: nullableNumber(item.matches) ?? generated.matches,
+  };
+}
+
 function readTranscript(value) {
   if (!Array.isArray(value)) return [];
   const result = [];
@@ -97,6 +242,7 @@ function readTranscript(value) {
       if (typeof item[key] === 'string') entry[key] = item[key];
     }
     if (['pending', 'completed', 'error'].includes(item.status)) entry.status = item.status;
+    if (item.role === 'tool') entry.presentation = readToolPresentation(item.presentation, entry);
     if (typeof item.streaming === 'boolean') entry.streaming = item.streaming;
     if (Array.isArray(item.context)) {
       entry.context = item.context.flatMap((raw) => {
@@ -358,6 +504,7 @@ export function groupConversation(entries) {
 }
 
 export function toolCategory(entry) {
+  if (TOOL_CATEGORIES.has(entry.presentation?.category)) return entry.presentation.category;
   const name = entry.label?.toLocaleLowerCase() ?? '';
   if (/read|view|open_file|list_dir/.test(name)) return 'read';
   if (/search|find|grep|glob/.test(name)) return 'search';
@@ -365,7 +512,8 @@ export function toolCategory(entry) {
   if (/test|typecheck|lint|build/.test(name)) return 'test';
   if (/terminal|bash|shell|command|exec/.test(name)) return /\b(test|typecheck|lint|build)\b/i.test(entry.arguments ?? '') ? 'test' : 'command';
   if (/browser|web|fetch|url/.test(name)) return 'web';
-  if (/subagent|spawn|task/.test(name)) return 'agent';
+  if (/update.?plan|todo|checklist/.test(name)) return 'plan';
+  if (/subagent|spawn.?agent|delegate|^task$/.test(name)) return 'agent';
   return 'other';
 }
 
@@ -390,9 +538,12 @@ export function compactToolTarget(target, workspace) {
 export function activitySummary(entries) {
   const counts = new Map();
   for (const entry of entries) counts.set(toolCategory(entry), (counts.get(toolCategory(entry)) ?? 0) + 1);
+  const failed = entries.filter((entry) => entry.status === 'error').length;
+  const pending = entries.filter((entry) => entry.status === 'pending').length;
+  if (pending) return `${entries.length} actions in progress`;
+  if (failed) return `${entries.length} actions · ${failed} failed`;
   if ([...counts.keys()].every((key) => key === 'read' || key === 'search')) return `Explored ${entries.length} ${entries.length === 1 ? 'item' : 'items'}`;
-  const labels = { edit: 'changed', test: 'tests/builds', command: 'commands', read: 'reads', search: 'searches', web: 'web', agent: 'agents', other: 'other' };
-  return `Activity · ${Object.entries(labels).flatMap(([key, label]) => counts.has(key) ? [`${counts.get(key)} ${label}`] : []).join(' · ')}`;
+  return `${entries.length} actions`;
 }
 
 export function canContinueHere(state) {