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

package/components.mjs

@@ -85,10 +85,10 @@ function boundedString(value, max) {
   if (typeof value !== "string") return "";
   return value.length <= max ? value : `${value.slice(0, max)}\u2026`;
 }
-function argumentObject(argumentsText) {
+function argumentValue(argumentsText) {
   if (!argumentsText) return null;
   try {
-    return record(JSON.parse(argumentsText));
+    return JSON.parse(argumentsText);
   } catch {
     return null;
   }
@@ -99,6 +99,33 @@ function firstString(source, keys) {
   }
   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) {
@@ -132,7 +159,7 @@ function planItems(args) {
     return [{ label: boundedString(label, 300), status: firstString(value, ["status"]) }];
   }).slice(0, 12);
 }
-function editPreview(args, resultText) {
+function editPreview(args, resultText, source) {
   const direct = firstString(args, ["patch", "diff"]);
   if (direct) return direct;
   const oldText = firstString(args, ["old_string"]);
@@ -143,21 +170,63 @@ function editPreview(args, resultText) {
       ...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 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 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),
@@ -168,12 +237,13 @@ function createToolPresentation(entry) {
     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"])
+    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) {
@@ -188,7 +258,10 @@ function readToolPresentation(value, entry) {
     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,
@@ -200,6 +273,7 @@ function readToolPresentation(value, entry) {
     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,
@@ -433,16 +507,9 @@ function groupConversation(entries) {
 }
 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";
-  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 (/update.?plan|todo|checklist/.test(name)) return "plan";
-  if (/subagent|spawn.?agent|delegate|^task$/.test(name)) return "agent";
-  return "other";
+  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 "";
@@ -468,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;
@@ -477,7 +545,7 @@ function canContinueHere(state) {
 }
 function operationLabel(operation) {
   if (!operation) return "";
-  const labels = { discover: "Refreshing chats\u2026", attach: "Opening chat\u2026", resume: "Continuing here\u2026", branch: "Starting continuation\u2026", reduce: "Reducing context and verifying reversibility\u2026", terminal: "Preparing terminal handoff\u2026", export: "Exporting losslessly\u2026", refresh: "Retrying\u2026" };
+  const labels = { discover: "Refreshing chats\u2026", observe: "Loading recent messages\u2026", attach: "Opening chat\u2026", resume: "Continuing here\u2026", branch: "Starting continuation\u2026", reduce: "Reducing context and verifying reversibility\u2026", terminal: "Preparing terminal handoff\u2026", export: "Exporting losslessly\u2026", refresh: "Retrying\u2026" };
   return labels[operation] ?? `${operation.replaceAll("_", " ")}\u2026`;
 }
 function terminalCommand(handoff) {
@@ -688,7 +756,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"],
@@ -742,6 +811,16 @@ function ToolMetrics({ presentation }) {
   ].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) => {
@@ -799,16 +878,31 @@ function ToolPreview({ presentation, entry }) {
     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 === "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: [
@@ -846,35 +940,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, open = false }) {
+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) }),
+    /* @__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, open: open || entry.status === "pending", 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: [
       /* @__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();
@@ -892,7 +993,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 }) {