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

package/components.d.ts

@@ -12,6 +12,7 @@ export {
   SessionRow,
   SupercodeMessenger,
   TaskPlan,
+  ToolRow,
   TranscriptEntry,
   hasHarnessLogo,
 } from './index.js';

package/components.mjs

@@ -64,6 +64,11 @@ var MODES = /* @__PURE__ */ new Set(["none", "control", "mirror"]);
 var STRATEGIES = /* @__PURE__ */ new Set(["start", "resume", "attach", "branch", "reduce"]);
 var STARTUP = /* @__PURE__ */ new Set(["connecting", "starting", "discovering", "ready"]);
 var FIDELITY = /* @__PURE__ */ new Set(["byte_lossless", "value_lossless", "semantic"]);
+var TOOL_CATEGORIES = /* @__PURE__ */ new Set(["read", "search", "edit", "command", "test", "web", "agent", "plan", "other"]);
+var TOOL_DETAILS = /* @__PURE__ */ new Set(["file", "matches", "diff", "terminal", "web", "agent", "plan", "fields"]);
+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;
 }
@@ -76,6 +81,132 @@ function number(value, fallback = 0) {
 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)}\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 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 = [];
@@ -93,6 +224,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) => {
@@ -300,6 +432,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";
@@ -307,7 +440,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) {
@@ -544,6 +678,7 @@ var TOOL_ICONS = {
     /* @__PURE__ */ jsx3("circle", { cx: "9", cy: "6", r: "2.5" }),
     /* @__PURE__ */ jsx3("path", { d: "M4 15c.4-3 2-4.5 5-4.5s4.6 1.5 5 4.5" })
   ] }),
+  plan: () => /* @__PURE__ */ jsx3(Fragment, { children: /* @__PURE__ */ jsx3("path", { d: "m3 5 1 1 2-2M3 9l1 1 2-2M3 13l1 1 2-2M8 5h7M8 9h7M8 13h7" }) }),
   other: () => /* @__PURE__ */ jsxs2(Fragment, { children: [
     /* @__PURE__ */ jsx3("path", { d: "M9 2.5v3M9 12.5v3M2.5 9h3M12.5 9h3" }),
     /* @__PURE__ */ jsx3("circle", { cx: "9", cy: "9", r: "3.5" })
@@ -562,7 +697,8 @@ function toolAction(entry, category) {
     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"]
+    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];
@@ -588,6 +724,113 @@ function argumentRows(argumentsText) {
   }
   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__ */ jsx3("div", { class: "scui-tool-metrics", children: metrics.map((metric) => /* @__PURE__ */ jsx3("span", { children: metric }, metric)) }) : null;
+}
+function LinePreview({ value, kind }) {
+  if (!value) return null;
+  return /* @__PURE__ */ jsx3("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__ */ jsxs2("li", { "data-tone": tone, children: [
+      /* @__PURE__ */ jsx3("span", { children: index + 1 }),
+      /* @__PURE__ */ jsx3("code", { children: line || " " })
+    ] }, index);
+  }) });
+}
+function TerminalPreview({ presentation, pending, failed }) {
+  return /* @__PURE__ */ jsxs2("section", { class: "scui-terminal", children: [
+    /* @__PURE__ */ jsxs2("header", { children: [
+      /* @__PURE__ */ jsxs2("span", { "aria-hidden": "true", children: [
+        /* @__PURE__ */ jsx3("i", {}),
+        /* @__PURE__ */ jsx3("i", {}),
+        /* @__PURE__ */ jsx3("i", {})
+      ] }),
+      /* @__PURE__ */ jsx3("code", { children: presentation.command ? `$ ${presentation.command}` : "Terminal" })
+    ] }),
+    presentation.preview ? /* @__PURE__ */ jsx3("pre", { "data-error": failed, children: stripAnsi(presentation.preview) }) : pending ? /* @__PURE__ */ jsxs2("div", { class: "scui-terminal-wait", children: [
+      /* @__PURE__ */ jsx3("i", {}),
+      " Waiting for output"
+    ] }) : /* @__PURE__ */ jsx3("div", { class: "scui-terminal-empty", children: "No output" })
+  ] });
+}
+function SearchPreview({ presentation }) {
+  const lines = stripAnsi(presentation.preview).split("\n").filter(Boolean);
+  return /* @__PURE__ */ jsxs2("section", { class: "scui-search-preview", children: [
+    presentation.query ? /* @__PURE__ */ jsxs2("header", { children: [
+      /* @__PURE__ */ jsx3("span", { children: "Search" }),
+      /* @__PURE__ */ jsx3("code", { children: presentation.query })
+    ] }) : null,
+    lines.length ? /* @__PURE__ */ jsx3("ol", { children: lines.map((line, index) => {
+      const match = /^(.*?):(\d+)(?::(\d+))?:(.*)$/.exec(line);
+      return /* @__PURE__ */ jsx3("li", { children: match ? /* @__PURE__ */ jsxs2(Fragment, { children: [
+        /* @__PURE__ */ jsx3("code", { children: match[1] }),
+        /* @__PURE__ */ jsxs2("small", { children: [
+          match[2],
+          match[3] ? `:${match[3]}` : ""
+        ] }),
+        /* @__PURE__ */ jsx3("span", { children: match[4] })
+      ] }) : /* @__PURE__ */ jsx3("span", { children: line }) }, index);
+    }) }) : /* @__PURE__ */ jsx3("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__ */ jsx3(TerminalPreview, { presentation, pending, failed });
+  if (presentation.detail === "diff") return presentation.preview ? /* @__PURE__ */ jsx3(LinePreview, { value: presentation.preview, kind: "diff" }) : /* @__PURE__ */ jsx3("div", { class: "scui-tool-empty", children: "Edit completed without a textual diff" });
+  if (presentation.detail === "file") return presentation.preview ? /* @__PURE__ */ jsx3(LinePreview, { value: presentation.preview, kind: "file" }) : /* @__PURE__ */ jsx3("div", { class: "scui-tool-empty", children: "File contents were not included in this event" });
+  if (presentation.detail === "matches") return /* @__PURE__ */ jsx3(SearchPreview, { presentation });
+  if (presentation.detail === "web") return /* @__PURE__ */ jsxs2("section", { class: "scui-web-preview", children: [
+    presentation.url ? /* @__PURE__ */ jsx3("code", { children: presentation.url }) : null,
+    presentation.preview ? /* @__PURE__ */ jsx3("p", { children: stripAnsi(presentation.preview) }) : /* @__PURE__ */ jsx3("small", { children: pending ? "Waiting for the page" : "No page summary returned" })
+  ] });
+  if (presentation.detail === "agent") return /* @__PURE__ */ jsxs2("section", { class: "scui-agent-preview", children: [
+    presentation.subject ? /* @__PURE__ */ jsx3("p", { children: presentation.subject }) : null,
+    presentation.preview ? /* @__PURE__ */ jsx3("pre", { children: stripAnsi(presentation.preview) }) : /* @__PURE__ */ jsx3("small", { children: pending ? "Agent is working" : "No textual handoff returned" })
+  ] });
+  if (presentation.detail === "plan") return /* @__PURE__ */ jsx3("ol", { class: "scui-plan-preview", children: presentation.items?.map((item, index) => /* @__PURE__ */ jsxs2("li", { "data-status": item.status, children: [
+    /* @__PURE__ */ jsx3("i", { "aria-hidden": "true" }),
+    /* @__PURE__ */ jsx3("span", { children: item.label })
+  ] }, `${item.label}:${index}`)) });
+  return presentation.preview ? /* @__PURE__ */ jsx3("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__ */ jsxs2("details", { class: "scui-tool-technical", children: [
+    /* @__PURE__ */ jsx3("summary", { children: "Technical details" }),
+    /* @__PURE__ */ jsxs2("div", { children: [
+      entry.arguments ? /* @__PURE__ */ jsxs2("section", { children: [
+        /* @__PURE__ */ jsx3("strong", { children: "Native arguments" }),
+        /* @__PURE__ */ jsx3("dl", { children: argumentRows(entry.arguments).map((row) => /* @__PURE__ */ jsxs2("div", { children: [
+          /* @__PURE__ */ jsx3("dt", { children: row.label }),
+          /* @__PURE__ */ jsx3("dd", { children: /* @__PURE__ */ jsx3("pre", { children: row.value }) })
+        ] }, row.key)) })
+      ] }) : null,
+      entry.resultText ? /* @__PURE__ */ jsxs2("section", { children: [
+        /* @__PURE__ */ jsx3("strong", { children: "Native result" }),
+        /* @__PURE__ */ jsxs2("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__ */ jsx3(RequestCard, { entry, adapter, canRespond: state.canRespond });
   if (entry.role === "reasoning") {
@@ -603,33 +846,30 @@ function TranscriptEntry({ entry, state, adapter }) {
     entry.truncated ? /* @__PURE__ */ jsx3("small", { class: "scui-truncated", children: "Entry truncated by host \xB7 load native session for the complete value" }) : null
   ] });
 }
-function ToolRow({ entry, workspace }) {
-  const target = compactToolTarget(toolTarget(entry.arguments), workspace);
-  const hasDetail = Boolean(entry.arguments || entry.resultText);
-  const category = toolCategory(entry);
+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__ */ jsxs2(Fragment, { children: [
     /* @__PURE__ */ jsx3(ToolIcon, { category }),
     /* @__PURE__ */ jsx3("strong", { children: toolAction(entry, category) }),
-    target ? /* @__PURE__ */ jsx3("code", { class: "scui-tool-target", title: toolTarget(entry.arguments), children: target }) : null,
+    target ? /* @__PURE__ */ jsx3("code", { class: "scui-tool-target", title: presentation.target, children: target }) : null,
     /* @__PURE__ */ jsx3("span", { class: "scui-spacer" }),
     /* @__PURE__ */ jsx3("span", { class: "scui-tool-status", role: "status", "data-status": entry.status ?? "completed", "aria-label": entry.status ?? "completed", children: entry.status === "pending" ? /* @__PURE__ */ jsx3("i", {}) : entry.status === "error" ? "\xD7" : "\u2713" }),
     hasDetail ? /* @__PURE__ */ jsx3("span", { class: "scui-tool-chevron", "aria-hidden": "true", children: "\u203A" }) : null
   ] });
   if (!hasDetail) return /* @__PURE__ */ jsx3("div", { class: "scui-tool", "data-status": entry.status ?? "completed", "data-category": category, children: /* @__PURE__ */ jsx3("div", { class: "scui-tool-head", children: summary }) });
-  return /* @__PURE__ */ jsxs2("details", { class: "scui-tool", "data-status": entry.status ?? "completed", "data-category": category, children: [
+  return /* @__PURE__ */ jsxs2("details", { class: "scui-tool", "data-status": entry.status ?? "completed", "data-category": category, open: open || entry.status === "pending", children: [
     /* @__PURE__ */ jsx3("summary", { class: "scui-tool-head", children: summary }),
     /* @__PURE__ */ jsxs2("div", { class: "scui-tool-detail", children: [
-      entry.arguments ? /* @__PURE__ */ jsx3("dl", { children: argumentRows(entry.arguments).map((row) => /* @__PURE__ */ jsxs2("div", { children: [
-        /* @__PURE__ */ jsx3("dt", { children: row.label }),
-        /* @__PURE__ */ jsx3("dd", { children: /* @__PURE__ */ jsx3("pre", { children: row.value }) })
-      ] }, row.key)) }) : null,
-      entry.resultText ? /* @__PURE__ */ jsxs2("section", { children: [
-        /* @__PURE__ */ jsx3("strong", { children: entry.status === "error" ? "Error" : "Result" }),
-        /* @__PURE__ */ jsxs2("pre", { "data-error": entry.status === "error", children: [
-          entry.resultText,
-          entry.truncated ? "\n[truncated]" : ""
-        ] })
-      ] }) : null
+      /* @__PURE__ */ jsx3(ToolMetrics, { presentation }),
+      /* @__PURE__ */ jsx3(ToolPreview, { presentation, entry }),
+      presentation.fields.length ? /* @__PURE__ */ jsx3("dl", { class: "scui-tool-fields", children: presentation.fields.map((field) => /* @__PURE__ */ jsxs2("div", { children: [
+        /* @__PURE__ */ jsx3("dt", { children: field.label }),
+        /* @__PURE__ */ jsx3("dd", { children: field.value })
+      ] }, field.label)) }) : null,
+      /* @__PURE__ */ jsx3(TechnicalDetails, { entry })
     ] })
   ] });
 }
@@ -1123,6 +1363,7 @@ export {
   SessionRow,
   SupercodeMessenger,
   TaskPlan,
+  ToolRow,
   TranscriptEntry,
   hasHarnessLogo
 };

package/controller.mjs

@@ -1,4 +1,4 @@
-import { normalizeUiState } from './core.mjs';
+import { createToolPresentation, normalizeUiState } from './core.mjs';
 
 const HARNESS_LABELS = {
   'claude-code': 'Claude Code',
@@ -126,7 +126,7 @@ function projectConversationEntry(entry, maxEntryChars) {
     const argumentsText = truncate((entry.arguments ?? '').trim(), maxEntryChars);
     const result = truncate((entry.resultText ?? '').trim(), maxEntryChars);
     const primary = entry.status === 'pending' ? argumentsText : result;
-    return {
+    const projected = {
       id: entry.id,
       role: 'tool',
       text: primary.text,
@@ -137,6 +137,12 @@ function projectConversationEntry(entry, maxEntryChars) {
       resultText: result.text,
       status: entry.status,
     };
+    projected.presentation = createToolPresentation({
+      ...projected,
+      resultContent: entry.resultContent,
+      metadata: entry.metadata,
+    });
+    return projected;
   }
   if (entry.kind === 'reasoning') {
     const body = truncate(entry.text, maxEntryChars);

package/conversation.d.ts

@@ -5,6 +5,7 @@ export type {
   SessionSemanticsModel,
   SupercodeUiState,
   TaskPlanProps,
+  ToolRowProps,
   TaskPlanModel,
   TranscriptEntryModel,
   TranscriptEntryProps,
@@ -17,5 +18,6 @@ export {
   RequestCard,
   SessionDetails,
   TaskPlan,
+  ToolRow,
   TranscriptEntry,
 } from './index.js';