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

package/messenger.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,206 @@ 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 argumentValue(argumentsText) {
+  if (!argumentsText) return null;
+  try {
+    return 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 decodedLiteral(value) {
+  if (!value) return "";
+  if (value.startsWith('"')) {
+    try {
+      return JSON.parse(value);
+    } catch {
+      return "";
+    }
+  }
+  return value.slice(1, -1).replaceAll("\\n", "\n").replaceAll("\\t", "	").replaceAll("\\r", "\r").replaceAll("\\`", "`").replaceAll("\\'", "'").replaceAll("\\\\", "\\");
+}
+function sourceString(source, keys) {
+  if (!source) return "";
+  const names = keys.join("|");
+  const match = new RegExp(`\\b(?:${names})\\s*:\\s*("(?:\\\\.|[^"\\\\])*"|'(?:\\\\.|[^'\\\\])*'|\`(?:\\\\.|[^\`\\\\])*\`)`).exec(source);
+  return decodedLiteral(match?.[1]);
+}
+function toolEnvelope(entry) {
+  const value = argumentValue(entry.arguments);
+  const source = typeof value === "string" ? value : "";
+  const tools = source ? [...new Set([...source.matchAll(/\btools\.([A-Za-z0-9_]+)/g)].map((match) => match[1]))].slice(0, 8) : [];
+  const name = tools.length === 1 ? tools[0] : entry.label ?? "tool";
+  return { args: record(value), source, tools, name };
+}
+function patchPath(source) {
+  return /\*\*\* (?:Update|Add|Delete) File:\s*([^\r\n]+)/.exec(source)?.[1]?.trim() ?? "";
+}
+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, source) {
+  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");
+  }
+  const patch = /\*\*\* Begin Patch[\s\S]*?\*\*\* End Patch/.exec(source ?? "")?.[0];
+  if (patch) return patch;
+  return /^(?:diff --git|@@ |--- |\+\+\+ )/m.test(resultText ?? "") ? resultText : "";
+}
+function classifyTool(name, command) {
+  const normalized = name.toLocaleLowerCase();
+  if (/write_stdin|^wait$/.test(normalized)) return "command";
+  if (/update.?plan|todo|checklist|taskcreate|taskupdate/.test(normalized)) return "plan";
+  if (/search.?replace|edit|write|patch|replace|create_file|apply_patch/.test(normalized)) return "edit";
+  if (/read|view|open_file|list_dir/.test(normalized)) return "read";
+  if (/search|find|grep|glob|toolsearch/.test(normalized)) return "search";
+  if (/browser|web|fetch|url/.test(normalized)) return "web";
+  if (/agent|subagent|sendmessage|delegate|^task$/.test(normalized)) return "agent";
+  if (/test|typecheck|lint|build/.test(normalized)) return "test";
+  if (/terminal|bash|shell|command|exec|write_stdin|^wait$/.test(normalized)) return /\b(test|typecheck|lint|build)\b/i.test(command) ? "test" : "command";
+  return "other";
+}
+function toolAction(status, category, name, tools) {
+  const position = status === "pending" ? 0 : status === "error" ? 2 : 1;
+  if (tools.length > 1) return [`Running ${tools.length} actions`, `Ran ${tools.length} actions`, `${tools.length} actions failed`][position];
+  const normalized = name.toLocaleLowerCase();
+  if (/sendmessage/.test(normalized)) return ["Messaging agent", "Messaged agent", "Agent message failed"][position];
+  if (/kill_command_or_subagent/.test(normalized)) return ["Stopping", "Stopped", "Stop failed"][position];
+  if (/get_command_or_subagent_output|write_stdin|^wait$/.test(normalized)) return ["Waiting for", "Checked", "Check failed"][position];
+  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"]
+  };
+  return actions[category]?.[position] ?? (status === "error" ? `${name} failed` : name.replaceAll(/[_-]+/g, " "));
+}
+function createToolPresentation(entry) {
+  const envelope = toolEnvelope(entry);
+  const args = envelope.args;
+  const command = firstString(args, ["command", "cmd"]) || sourceString(envelope.source, ["command", "cmd"]);
+  const category = classifyTool(envelope.name, command || envelope.source || entry.arguments || "");
+  const path = firstString(args, ["file_path", "target_file", "target_directory", "path"]) || sourceString(envelope.source, ["file_path", "target_file", "target_directory", "path"]) || patchPath(envelope.source);
+  const query = firstString(args, ["query", "pattern"]) || sourceString(envelope.source, ["query", "pattern", "q"]);
+  const url = firstString(args, ["url"]) || sourceString(envelope.source, ["url", "ref_id"]);
+  const subject = firstString(args, ["subject", "description", "summary", "task", "prompt"]) || sourceString(envelope.source, ["subject", "description", "summary", "task", "prompt"]);
+  const background = /get_command_or_subagent_output|kill_command_or_subagent/i.test(envelope.name) ? "background task" : /write_stdin|^wait$/i.test(envelope.name) ? "background command" : "";
+  const items = planItems(args);
+  const taskId = firstString(args, ["taskId", "task_id"]);
+  const planTarget = category === "plan" ? items.length ? `${items.length} ${items.length === 1 ? "item" : "items"}` : taskId ? `task ${taskId}` : "" : "";
+  const target = path || command || query || url || subject || background || planTarget || (envelope.tools.length > 1 ? `${envelope.tools.length} coordinated actions` : toolTarget(entry.arguments));
+  const previewSource = category === "edit" ? editPreview(args, entry.resultText, envelope.source) : entry.resultText ?? "";
+  const result = record(entry.resultContent);
+  const metadata = record(entry.metadata);
+  const resultMetadata = record(result?.metadata);
+  return {
+    name: boundedString(envelope.name, 120),
+    action: boundedString(toolAction(entry.status ?? "completed", category, envelope.name, envelope.tools), 120),
+    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,
+    tools: envelope.tools,
+    exitCode: explicitNumber([result, resultMetadata, metadata], ["exit_code", "exitCode", "pi_bash_exit_code"]),
+    durationMs: explicitNumber([result, resultMetadata, metadata], ["duration_ms", "durationMs", "elapsed_ms", "elapsedMs", "totalDurationMs"]),
+    additions: explicitNumber([result, resultMetadata, metadata], ["additions", "lines_added"]),
+    deletions: explicitNumber([result, resultMetadata, metadata], ["deletions", "lines_removed"]),
+    matches: explicitNumber([result, resultMetadata, 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;
+  const tools = Array.isArray(item.tools) ? item.tools.filter((tool) => typeof tool === "string").map((tool) => boundedString(tool, 120)).slice(0, 8) : generated.tools;
+  return {
+    name: boundedString(item.name, 120) || generated.name,
+    action: boundedString(item.action, 120) || generated.action,
+    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,
+    tools,
+    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 +298,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,15 +506,10 @@ function groupConversation(entries) {
   return blocks;
 }
 function toolCategory(entry) {
-  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";
-  if (/edit|write|patch|replace|create_file/.test(name)) return "edit";
-  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";
-  return "other";
+  if (TOOL_CATEGORIES.has(entry.presentation?.category)) return entry.presentation.category;
+  const envelope = toolEnvelope(entry);
+  const command = firstString(envelope.args, ["command", "cmd"]) || sourceString(envelope.source, ["command", "cmd"]);
+  return classifyTool(envelope.name, command || envelope.source || entry.arguments || "");
 }
 function toolTarget(argumentsText) {
   if (!argumentsText) return "";
@@ -334,7 +535,8 @@ function activitySummary(entries) {
   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"}`;
-  return `${entries.length} actions`;
+  const nouns = { read: ["read", "reads"], search: ["search", "searches"], edit: ["edit", "edits"], command: ["command", "commands"], test: ["test run", "test runs"], web: ["web action", "web actions"], agent: ["agent action", "agent actions"], plan: ["plan update", "plan updates"], other: ["action", "actions"] };
+  return [...counts.entries()].sort((a, b) => b[1] - a[1]).slice(0, 3).map(([category, count]) => `${count} ${nouns[category][count === 1 ? 0 : 1]}`).join(" \xB7 ");
 }
 function canContinueHere(state) {
   if (state.mode !== "mirror" || state.canSend) return false;
@@ -547,6 +749,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" })
@@ -556,7 +759,8 @@ function ToolIcon({ category }) {
   const Glyph = TOOL_ICONS[category] ?? TOOL_ICONS.other;
   return /* @__PURE__ */ jsx3("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__ */ jsx3(Glyph, {}) });
 }
-function toolAction(entry, category) {
+function toolAction2(entry, category, presentation) {
+  if (presentation?.action) return presentation.action;
   const status = entry.status ?? "completed";
   const actions = {
     read: ["Reading", "Read", "Read failed"],
@@ -565,7 +769,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];
@@ -591,6 +796,138 @@ 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 PendingElapsed({ now }) {
+  const clock = now ?? Date.now;
+  const started = useRef2(clock());
+  const [elapsed, setElapsed] = useState2(0);
+  useEffect2(() => {
+    const timer = setInterval(() => setElapsed(Math.max(0, clock() - started.current)), 1e3);
+    return () => clearInterval(timer);
+  }, [clock]);
+  return /* @__PURE__ */ jsx3("small", { class: "scui-tool-elapsed", children: elapsed < 1e3 ? "now" : formatDuration(elapsed) });
+}
+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__ */ jsx3("section", { class: "scui-agent-preview", children: 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 ToolActions({ presentation, adapter }) {
+  const [copied, setCopied] = useState2(false);
+  const reset = useRef2(null);
+  useEffect2(() => () => clearTimeout(reset.current), []);
+  if (!adapter?.copyText) return null;
+  const action = presentation.command ? ["Copy command", presentation.command] : presentation.path ? ["Copy path", presentation.path] : presentation.url ? ["Copy URL", presentation.url] : presentation.query ? ["Copy query", presentation.query] : null;
+  const copy = async () => {
+    await adapter.copyText(action[1]);
+    setCopied(true);
+    clearTimeout(reset.current);
+    reset.current = setTimeout(() => setCopied(false), 1500);
+  };
+  return action ? /* @__PURE__ */ jsx3("div", { class: "scui-tool-actions", children: /* @__PURE__ */ jsx3("button", { type: "button", onClick: copy, children: copied ? "Copied" : action[0] }) }) : null;
+}
+function ToolStack({ tools }) {
+  if (tools.length < 2) return null;
+  return /* @__PURE__ */ jsx3("div", { class: "scui-tool-stack", "aria-label": "Coordinated tools", children: tools.map((tool) => /* @__PURE__ */ jsx3("span", { children: tool.replaceAll("__", " \xB7 ").replaceAll("_", " ") }, tool)) });
+}
+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") {
@@ -606,38 +943,42 @@ 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, adapter }) {
+  const presentation = entry.presentation ?? createToolPresentation(entry);
+  const [expanded, setExpanded] = useState2(open || entry.status === "pending");
+  useEffect2(() => {
+    if (entry.status === "pending") setExpanded(true);
+  }, [entry.status]);
+  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,
+    /* @__PURE__ */ jsx3("strong", { children: toolAction2(entry, category, presentation) }),
+    target ? /* @__PURE__ */ jsx3("code", { class: "scui-tool-target", title: presentation.target, children: target }) : null,
     /* @__PURE__ */ jsx3("span", { class: "scui-spacer" }),
+    entry.status === "pending" ? /* @__PURE__ */ jsx3(PendingElapsed, { now: adapter?.now }) : null,
     /* @__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: expanded, onToggle: (event) => setExpanded(event.currentTarget.open), 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(ToolStack, { tools: presentation.tools ?? [] }),
+      /* @__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(ToolActions, { presentation, adapter }),
+      /* @__PURE__ */ jsx3(TechnicalDetails, { entry })
     ] })
   ] });
 }
-function ActivityGroup({ entries, state }) {
-  if (entries.length === 1) return /* @__PURE__ */ jsx3("section", { class: "scui-activity", "data-single": "true", children: /* @__PURE__ */ jsx3(ToolRow, { entry: entries[0], workspace: state.workspace }) });
+function ActivityGroup({ entries, state, adapter }) {
+  if (entries.length === 1) return /* @__PURE__ */ jsx3("section", { class: "scui-activity", "data-single": "true", children: /* @__PURE__ */ jsx3(ToolRow, { entry: entries[0], workspace: state.workspace, adapter }) });
   const active = entries.some((entry) => entry.status === "pending");
   const [open, setOpen] = useState2(active);
   const id = useId();
@@ -655,7 +996,7 @@ function ActivityGroup({ entries, state }) {
         entries.length
       ] })
     ] }),
-    open ? /* @__PURE__ */ jsx3("div", { id, children: entries.map((entry) => /* @__PURE__ */ jsx3(ToolRow, { entry, workspace: state.workspace }, entry.id)) }) : null
+    open ? /* @__PURE__ */ jsx3("div", { id, children: entries.map((entry) => /* @__PURE__ */ jsx3(ToolRow, { entry, workspace: state.workspace, adapter }, entry.id)) }) : null
   ] });
 }
 function TaskPlan({ plan }) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@volter-ai-dev/supercode-ui",
-  "version": "0.1.8",
+  "version": "0.1.10",
   "type": "module",
   "description": "Composable default UI kit for Supercode-powered coding-agent experiences",
   "exports": {

package/styles.css

@@ -137,8 +137,19 @@
 .scui-tool { min-width:0 }.scui-tool summary { list-style:none }.scui-tool summary::-webkit-details-marker { display:none }.scui-tool-head { cursor:default }.scui-tool > summary.scui-tool-head { cursor:pointer }.scui-tool-icon { flex:0 0 14px; width:14px; height:14px; color:var(--scui-muted) }.scui-tool-head strong { flex:none; color:var(--scui-fg); font-size:10.5px; font-weight:600; white-space:nowrap }
 .scui-tool-target { min-width:0; overflow:hidden; padding:0; background:transparent; color:var(--scui-muted); font:10px ui-monospace,SFMono-Regular,Menlo,monospace; text-overflow:ellipsis; white-space:nowrap }
 .scui-tool-status { display:grid; flex:0 0 13px; width:13px; height:13px; place-items:center; color:var(--scui-success); font-size:10px }.scui-tool-status[data-status="pending"] { color:var(--scui-accent) }.scui-tool-status[data-status="error"] { color:var(--scui-danger); font-size:13px }.scui-tool-status i { box-sizing:border-box; width:11px; height:11px; border:1.5px solid currentColor; border-right-color:transparent; border-radius:50%; animation:scui-spin .75s linear infinite }
+.scui-tool-elapsed { flex:none; color:var(--scui-muted); font:9px ui-monospace,SFMono-Regular,Menlo,monospace }
 .scui-tool-chevron { flex:none; font-size:15px; line-height:1; transition:transform 120ms }.scui-tool[open] .scui-tool-chevron { transform:rotate(90deg) }
-.scui-tool-detail { display:grid; gap:7px; max-height:220px; margin:2px 0 6px 20px; padding:8px; overflow:auto; border-left:1px solid var(--scui-border); background:var(--scui-bg-raised); font-size:10px }.scui-tool-detail dl,.scui-tool-detail section,.scui-tool-detail dl > div { display:grid; gap:3px; margin:0 }.scui-tool-detail dt,.scui-tool-detail section > strong { color:var(--scui-muted); font-weight:600 }.scui-tool-detail dd { min-width:0; margin:0 }.scui-tool-detail pre { margin:0; overflow-wrap:anywhere; color:var(--scui-fg); font:10px/1.45 ui-monospace,SFMono-Regular,Menlo,monospace; white-space:pre-wrap }.scui-tool-detail pre[data-error="true"] { color:var(--scui-danger) }
+.scui-tool-detail { display:grid; gap:7px; max-height:240px; margin:2px 0 7px 20px; overflow:auto; border:1px solid var(--scui-border); border-radius:7px; background:var(--scui-bg-raised); font-size:10px }
+.scui-tool-metrics { display:flex; flex-wrap:wrap; gap:4px; padding:7px 7px 0 }.scui-tool-metrics span { padding:2px 5px; border:1px solid var(--scui-border); border-radius:9px; color:var(--scui-muted); font:9px ui-monospace,SFMono-Regular,Menlo,monospace }.scui-tool[data-status="error"] .scui-tool-metrics span { border-color:color-mix(in srgb,var(--scui-danger) 30%,var(--scui-border)) }
+.scui-tool-stack { display:flex; flex-wrap:wrap; gap:4px; padding:7px 8px 0 }.scui-tool-stack span { padding:2px 5px; border-radius:4px; background:var(--scui-fill); color:var(--scui-muted); font:9px ui-monospace,SFMono-Regular,Menlo,monospace }
+.scui-terminal { min-width:0; overflow:hidden; background:color-mix(in srgb,var(--scui-fg) 7%,var(--scui-bg)); color:var(--scui-fg) }.scui-terminal header { display:flex; align-items:center; gap:7px; min-height:29px; padding:0 8px; border-bottom:1px solid var(--scui-border) }.scui-terminal header > span { display:flex; gap:3px }.scui-terminal header i { width:5px; height:5px; border-radius:50%; background:var(--scui-border-strong) }.scui-terminal header code { min-width:0; overflow:hidden; color:var(--scui-muted); font:9.5px ui-monospace,SFMono-Regular,Menlo,monospace; text-overflow:ellipsis; white-space:nowrap }.scui-terminal pre,.scui-tool-output,.scui-agent-preview pre { max-height:150px; margin:0; padding:8px; overflow:auto; overflow-wrap:anywhere; color:var(--scui-fg); font:10px/1.5 ui-monospace,SFMono-Regular,Menlo,monospace; white-space:pre-wrap }.scui-terminal pre[data-error="true"],.scui-tool-output[data-error="true"] { color:var(--scui-danger) }.scui-terminal-wait,.scui-terminal-empty { display:flex; align-items:center; gap:6px; padding:9px; color:var(--scui-muted) }.scui-terminal-wait i { width:5px; height:5px; border-radius:50%; background:var(--scui-accent); animation:scui-breathe 1.2s ease-in-out infinite }
+.scui-code-preview { margin:0; padding:5px 0; overflow:auto; counter-reset:line; color:var(--scui-fg); font:9.5px/1.5 ui-monospace,SFMono-Regular,Menlo,monospace; list-style:none }.scui-code-preview li { display:grid; grid-template-columns:31px minmax(max-content,1fr); min-height:15px }.scui-code-preview li > span { padding-right:7px; color:var(--scui-muted); text-align:right; user-select:none }.scui-code-preview code { padding:0 8px; white-space:pre }.scui-code-preview li[data-tone="add"] { background:color-mix(in srgb,var(--scui-success) 11%,transparent) }.scui-code-preview li[data-tone="remove"] { background:color-mix(in srgb,var(--scui-danger) 10%,transparent) }.scui-code-preview li[data-tone="hunk"] { color:var(--scui-accent) }
+.scui-search-preview header { display:flex; align-items:center; gap:6px; padding:7px 8px; border-bottom:1px solid var(--scui-border) }.scui-search-preview header span { color:var(--scui-muted) }.scui-search-preview header code { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }.scui-search-preview ol { display:grid; margin:0; padding:3px 0; list-style:none }.scui-search-preview li { display:grid; grid-template-columns:minmax(0,auto) auto minmax(70px,1fr); align-items:baseline; gap:5px; padding:3px 8px; border-bottom:1px solid color-mix(in srgb,var(--scui-border) 60%,transparent) }.scui-search-preview li:last-child { border:0 }.scui-search-preview li code { overflow:hidden; color:var(--scui-accent); text-overflow:ellipsis; white-space:nowrap }.scui-search-preview li small { color:var(--scui-muted) }.scui-search-preview li span { min-width:0; overflow:hidden; color:var(--scui-fg); text-overflow:ellipsis; white-space:nowrap }.scui-search-preview p { margin:0; padding:8px; color:var(--scui-muted) }
+.scui-web-preview,.scui-agent-preview { display:grid; gap:6px; padding:8px }.scui-web-preview > code { overflow:hidden; color:var(--scui-accent); text-overflow:ellipsis; white-space:nowrap }.scui-web-preview p,.scui-agent-preview p { margin:0; color:var(--scui-fg); line-height:1.45 }.scui-web-preview small,.scui-agent-preview small,.scui-tool-empty { padding:8px; color:var(--scui-muted) }
+.scui-plan-preview { display:grid; gap:5px; margin:0; padding:8px; list-style:none }.scui-plan-preview li { display:flex; align-items:flex-start; gap:6px; color:var(--scui-fg) }.scui-plan-preview li i { flex:0 0 8px; width:8px; height:8px; margin-top:3px; border:1px solid var(--scui-border-strong); border-radius:50% }.scui-plan-preview li[data-status="completed"] { color:var(--scui-muted); text-decoration:line-through }.scui-plan-preview li[data-status="completed"] i { border-color:var(--scui-success); background:var(--scui-success) }.scui-plan-preview li[data-status="in_progress"] i { border-color:var(--scui-accent); box-shadow:inset 0 0 0 2px var(--scui-bg-raised); background:var(--scui-accent) }
+.scui-tool-fields { display:grid; gap:5px; margin:0; padding:0 8px 8px }.scui-tool-fields > div { display:grid; grid-template-columns:minmax(65px,auto) 1fr; gap:8px }.scui-tool-fields dt { color:var(--scui-muted) }.scui-tool-fields dd { min-width:0; margin:0; overflow-wrap:anywhere; color:var(--scui-fg) }
+.scui-tool-actions { display:flex; gap:5px; padding:0 8px }.scui-tool-actions button { padding:3px 6px; border:1px solid var(--scui-border); border-radius:5px; background:transparent; color:var(--scui-muted); cursor:pointer; font:inherit; font-size:9.5px }.scui-tool-actions button:hover { border-color:var(--scui-border-strong); color:var(--scui-fg) }
+.scui-tool-technical { margin:0 8px 8px; color:var(--scui-muted) }.scui-tool-technical > summary { cursor:pointer; font-size:9.5px }.scui-tool-technical > div { display:grid; gap:8px; margin-top:5px; padding:7px; border-left:1px solid var(--scui-border) }.scui-tool-technical section,.scui-tool-technical dl,.scui-tool-technical dl > div { display:grid; gap:3px; margin:0 }.scui-tool-technical strong,.scui-tool-technical dt { color:var(--scui-muted); font-weight:600 }.scui-tool-technical dd { min-width:0; margin:0 }.scui-tool-technical pre { max-height:110px; margin:0; overflow:auto; overflow-wrap:anywhere; color:var(--scui-fg); font:9.5px/1.45 ui-monospace,SFMono-Regular,Menlo,monospace; white-space:pre-wrap }.scui-tool-technical pre[data-error="true"] { color:var(--scui-danger) }
 .scui-request { padding:9px; border:1px solid var(--scui-warning); border-radius:9px; background:color-mix(in srgb,var(--scui-warning) 8%,var(--scui-bg)) }.scui-request-actions { display:flex; flex-wrap:wrap; gap:5px }.scui-request-actions button { padding:5px 8px; border:1px solid var(--scui-border-strong); border-radius:6px; background:var(--scui-bg); cursor:pointer }
 .scui-request-done { color:var(--scui-muted); font-size:10.5px }
 .scui-plan > summary { display:flex; justify-content:space-between; padding:6px 8px; border:1px solid var(--scui-border); border-radius:7px; background:var(--scui-bg-raised) }.scui-plan ol { display:grid; gap:4px; box-sizing:border-box; max-height:140px; margin:5px 0 0; padding:7px 8px 7px 25px; overflow:auto; border:1px solid var(--scui-border); border-radius:7px }.scui-plan li[data-status="completed"] { color:var(--scui-fg); text-decoration:line-through }