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

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,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) {
@@ -329,9 +463,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`;
 }
 function canContinueHere(state) {
   if (state.mode !== "mirror" || state.canSend) return false;
@@ -470,7 +607,7 @@ function Markdown({ value }) {
 }
 
 // src/conversation.jsx
-import { jsx as jsx3, jsxs as jsxs2 } from "preact/jsx-runtime";
+import { Fragment, jsx as jsx3, jsxs as jsxs2 } from "preact/jsx-runtime";
 function LoadingStatus({ state, compact = false }) {
   const copy = {
     connecting: ["Connecting to coding agents", "Checking installed harnesses and capabilities.", 0],
@@ -518,6 +655,185 @@ function ContextDisclosure({ context }) {
     ] }, item.id ?? index)) })
   ] });
 }
+var TOOL_ICONS = {
+  read: () => /* @__PURE__ */ jsxs2(Fragment, { children: [
+    /* @__PURE__ */ jsx3("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__ */ jsx3("path", { d: "M12 2.9v3h2.85M6 9h6M6 12h4" })
+  ] }),
+  search: () => /* @__PURE__ */ jsxs2(Fragment, { children: [
+    /* @__PURE__ */ jsx3("circle", { cx: "8", cy: "8", r: "4.5" }),
+    /* @__PURE__ */ jsx3("path", { d: "m11.5 11.5 3 3" })
+  ] }),
+  edit: () => /* @__PURE__ */ jsxs2(Fragment, { children: [
+    /* @__PURE__ */ jsx3("path", { d: "m11.75 3.25 3 3-8.5 8.5-3.75.75.75-3.75 8.5-8.5Z" }),
+    /* @__PURE__ */ jsx3("path", { d: "m10 5 3 3" })
+  ] }),
+  command: () => /* @__PURE__ */ jsx3(Fragment, { children: /* @__PURE__ */ jsx3("path", { d: "m3 5 3 3-3 3M8 12h6" }) }),
+  test: () => /* @__PURE__ */ jsxs2(Fragment, { children: [
+    /* @__PURE__ */ jsx3("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__ */ jsx3("path", { d: "M5 2.5h8" })
+  ] }),
+  web: () => /* @__PURE__ */ jsxs2(Fragment, { children: [
+    /* @__PURE__ */ jsx3("circle", { cx: "9", cy: "9", r: "6.5" }),
+    /* @__PURE__ */ jsx3("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__ */ jsxs2(Fragment, { children: [
+    /* @__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" })
+  ] })
+};
+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) {
+  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__ */ 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") {
@@ -533,36 +849,35 @@ 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 [open, setOpen] = useState2(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__ */ jsxs2("div", { class: "scui-tool", "data-status": entry.status ?? "completed", "data-category": category, children: [
-    /* @__PURE__ */ jsxs2("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__ */ jsx3("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__ */ jsx3("strong", { children: entry.label?.split(/__|\//).at(-1)?.replaceAll("_", " ") || "Tool" }),
-      target ? /* @__PURE__ */ jsx3("span", { class: "scui-tool-target", title: toolTarget(entry.arguments), children: target }) : null,
-      /* @__PURE__ */ jsx3("span", { class: "scui-spacer" }),
-      /* @__PURE__ */ jsx3("span", { "aria-label": entry.status ?? "completed", children: entry.status === "pending" ? "\u25CC" : entry.status === "error" ? "\xD7" : "\u2713" })
-    ] }),
-    hasDetail && open ? /* @__PURE__ */ jsxs2("div", { id: detailId, class: "scui-tool-detail", children: [
-      entry.arguments ? /* @__PURE__ */ jsxs2("pre", { children: [
-        /* @__PURE__ */ jsx3("b", { children: "Input" }),
-        "\n",
-        entry.arguments
-      ] }) : null,
-      entry.resultText ? /* @__PURE__ */ jsxs2("pre", { "data-error": entry.status === "error", children: [
-        /* @__PURE__ */ jsx3("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__ */ jsxs2(Fragment, { children: [
+    /* @__PURE__ */ jsx3(ToolIcon, { category }),
+    /* @__PURE__ */ jsx3("strong", { children: toolAction(entry, category) }),
+    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, open: open || entry.status === "pending", children: [
+    /* @__PURE__ */ jsx3("summary", { class: "scui-tool-head", children: summary }),
+    /* @__PURE__ */ jsxs2("div", { class: "scui-tool-detail", children: [
+      /* @__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 })
+    ] })
   ] });
 }
 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 }) });
   const active = entries.some((entry) => entry.status === "pending");
   const [open, setOpen] = useState2(active);
   const id = useId();
@@ -575,7 +890,7 @@ function ActivityGroup({ entries, state }) {
       /* @__PURE__ */ jsx3("strong", { children: activitySummary(entries) }),
       /* @__PURE__ */ jsx3("span", { class: "scui-spacer" }),
       /* @__PURE__ */ jsxs2("small", { children: [
-        entries.filter((entry) => entry.status === "completed").length,
+        entries.filter((entry) => entry.status !== "pending").length,
         "/",
         entries.length
       ] })
@@ -939,9 +1254,13 @@ function Chat({ state, adapter, onBack, onNew, onClose, components, slots, label
 }
 function NewChat({ state, adapter, onBack, onClose, onStarted, labels }) {
   const startable = state.harnesses.filter((item) => item.startable);
+  const startableKey = startable.map((item) => item.id).join("\0");
   const [harness, setHarness] = useState4(startable[0]?.id ?? "");
   const [draft, setDraft] = useState4("");
   const [starting, setStarting] = useState4(false);
+  useEffect4(() => {
+    if (!startable.some((item) => item.id === harness)) setHarness(startable[0]?.id ?? "");
+  }, [harness, startableKey]);
   useEffect4(() => {
     if (starting && (state.busy || state.transcript.length)) onStarted();
   }, [onStarted, starting, state.busy, state.transcript.length]);

package/package.json

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

package/sessions.mjs

@@ -97,7 +97,7 @@ markdown.renderer.rules.link_open = (tokens, index, options, env, self) => {
 };
 
 // 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],

package/styles.css

@@ -129,13 +129,24 @@
 .scui-truncated { display:block; margin-top:5px; color:var(--scui-warning) }
 .scui-notice { align-self:center; max-width:90%; padding:5px 8px; border-radius:7px; background:var(--scui-bg-raised); color:var(--scui-muted); font-size:10.5px; text-align:center }
 
-.scui-activity { overflow:hidden; border:1px solid var(--scui-border); border-radius:9px; background:var(--scui-bg-raised) }
-.scui-activity-head,.scui-tool-head { display:flex; align-items:center; gap:6px; width:100%; min-height:32px; padding:0 8px; border:0; background:transparent; text-align:left; cursor:pointer }
-.scui-activity-head strong { font-size:11px }.scui-activity-head small { color:var(--scui-muted) }.scui-spacer { flex:1 }
+.scui-activity { min-width:0; color:var(--scui-muted) }
+.scui-activity-head,.scui-tool-head { display:flex; align-items:center; gap:6px; box-sizing:border-box; width:100%; min-height:27px; padding:0 3px; border:0; background:transparent; color:inherit; text-align:left }
+.scui-activity-head { cursor:pointer }.scui-activity-head strong { color:var(--scui-muted); font-size:10.5px; font-weight:600 }.scui-activity-head small { color:var(--scui-muted) }.scui-spacer { flex:1 }
 .scui-fold { font-size:16px; transition:transform 120ms }.scui-fold[data-open="true"] { transform:rotate(90deg) }
-.scui-tool { border-top:1px solid var(--scui-border) }.scui-tool-head:disabled { cursor:default }.scui-tool-glyph { width:18px; color:var(--scui-accent); text-align:center }.scui-tool-head strong { font-size:10.5px; text-transform:capitalize }
-.scui-tool-target { min-width:0; overflow:hidden; color:var(--scui-muted); font:10px ui-monospace,SFMono-Regular,Menlo,monospace; text-overflow:ellipsis; white-space:nowrap }
-.scui-tool-detail { padding:0 7px 7px }.scui-tool-detail pre { max-height:220px; margin:0 0 5px; padding:7px; overflow:auto; border-radius:6px; background:var(--scui-bg); 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-activity:not([data-single="true"]) > div { margin-left:9px; padding-left:7px; border-left:1px solid var(--scui-border) }
+.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-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: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-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-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 }