@volter-ai-dev/supercode-ui 0.1.8 → 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) {
@@ -547,6 +681,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" })
@@ -565,7 +700,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 +727,113 @@ function argumentRows(argumentsText) {
   }
   return [{ key: "arguments", label: "Details", value: argumentsText }];
 }
+function stripAnsi(value) {
+  return value?.replaceAll(/[\u001B\u009B][[\]()#;?]*(?:(?:(?:[a-zA-Z\d]*(?:;[-a-zA-Z\d\/#&.:=?%@~_]+)*)?\u0007)|(?:(?:\d{1,4}(?:[;:]\d{0,4})*)?[\dA-PR-TZcf-nq-uy=><~]))/g, "") ?? "";
+}
+function formatDuration(value) {
+  if (value === null) return "";
+  if (value < 1e3) return `${Math.round(value)}ms`;
+  return `${(value / 1e3).toFixed(value < 1e4 ? 1 : 0)}s`;
+}
+function ToolMetrics({ presentation }) {
+  const metrics = [
+    presentation.matches === null ? "" : `${presentation.matches} ${presentation.matches === 1 ? "match" : "matches"}`,
+    presentation.additions === null ? "" : `+${presentation.additions}`,
+    presentation.deletions === null ? "" : `\u2212${presentation.deletions}`,
+    presentation.exitCode === null ? "" : `exit ${presentation.exitCode}`,
+    formatDuration(presentation.durationMs)
+  ].filter(Boolean);
+  return metrics.length ? /* @__PURE__ */ jsx3("div", { class: "scui-tool-metrics", children: metrics.map((metric) => /* @__PURE__ */ jsx3("span", { children: metric }, metric)) }) : null;
+}
+function LinePreview({ value, kind }) {
+  if (!value) return null;
+  return /* @__PURE__ */ jsx3("ol", { class: "scui-code-preview", "data-kind": kind, children: stripAnsi(value).split("\n").map((line, index) => {
+    const tone = kind === "diff" ? line.startsWith("+") && !line.startsWith("+++") ? "add" : line.startsWith("-") && !line.startsWith("---") ? "remove" : line.startsWith("@@") ? "hunk" : "plain" : "plain";
+    return /* @__PURE__ */ jsxs2("li", { "data-tone": tone, children: [
+      /* @__PURE__ */ jsx3("span", { children: index + 1 }),
+      /* @__PURE__ */ jsx3("code", { children: line || " " })
+    ] }, index);
+  }) });
+}
+function TerminalPreview({ presentation, pending, failed }) {
+  return /* @__PURE__ */ jsxs2("section", { class: "scui-terminal", children: [
+    /* @__PURE__ */ jsxs2("header", { children: [
+      /* @__PURE__ */ jsxs2("span", { "aria-hidden": "true", children: [
+        /* @__PURE__ */ jsx3("i", {}),
+        /* @__PURE__ */ jsx3("i", {}),
+        /* @__PURE__ */ jsx3("i", {})
+      ] }),
+      /* @__PURE__ */ jsx3("code", { children: presentation.command ? `$ ${presentation.command}` : "Terminal" })
+    ] }),
+    presentation.preview ? /* @__PURE__ */ jsx3("pre", { "data-error": failed, children: stripAnsi(presentation.preview) }) : pending ? /* @__PURE__ */ jsxs2("div", { class: "scui-terminal-wait", children: [
+      /* @__PURE__ */ jsx3("i", {}),
+      " Waiting for output"
+    ] }) : /* @__PURE__ */ jsx3("div", { class: "scui-terminal-empty", children: "No output" })
+  ] });
+}
+function SearchPreview({ presentation }) {
+  const lines = stripAnsi(presentation.preview).split("\n").filter(Boolean);
+  return /* @__PURE__ */ jsxs2("section", { class: "scui-search-preview", children: [
+    presentation.query ? /* @__PURE__ */ jsxs2("header", { children: [
+      /* @__PURE__ */ jsx3("span", { children: "Search" }),
+      /* @__PURE__ */ jsx3("code", { children: presentation.query })
+    ] }) : null,
+    lines.length ? /* @__PURE__ */ jsx3("ol", { children: lines.map((line, index) => {
+      const match = /^(.*?):(\d+)(?::(\d+))?:(.*)$/.exec(line);
+      return /* @__PURE__ */ jsx3("li", { children: match ? /* @__PURE__ */ jsxs2(Fragment, { children: [
+        /* @__PURE__ */ jsx3("code", { children: match[1] }),
+        /* @__PURE__ */ jsxs2("small", { children: [
+          match[2],
+          match[3] ? `:${match[3]}` : ""
+        ] }),
+        /* @__PURE__ */ jsx3("span", { children: match[4] })
+      ] }) : /* @__PURE__ */ jsx3("span", { children: line }) }, index);
+    }) }) : /* @__PURE__ */ jsx3("p", { children: "No textual results" })
+  ] });
+}
+function ToolPreview({ presentation, entry }) {
+  const pending = entry.status === "pending";
+  const failed = entry.status === "error";
+  if (presentation.detail === "terminal") return /* @__PURE__ */ jsx3(TerminalPreview, { presentation, pending, failed });
+  if (presentation.detail === "diff") return presentation.preview ? /* @__PURE__ */ jsx3(LinePreview, { value: presentation.preview, kind: "diff" }) : /* @__PURE__ */ jsx3("div", { class: "scui-tool-empty", children: "Edit completed without a textual diff" });
+  if (presentation.detail === "file") return presentation.preview ? /* @__PURE__ */ jsx3(LinePreview, { value: presentation.preview, kind: "file" }) : /* @__PURE__ */ jsx3("div", { class: "scui-tool-empty", children: "File contents were not included in this event" });
+  if (presentation.detail === "matches") return /* @__PURE__ */ jsx3(SearchPreview, { presentation });
+  if (presentation.detail === "web") return /* @__PURE__ */ jsxs2("section", { class: "scui-web-preview", children: [
+    presentation.url ? /* @__PURE__ */ jsx3("code", { children: presentation.url }) : null,
+    presentation.preview ? /* @__PURE__ */ jsx3("p", { children: stripAnsi(presentation.preview) }) : /* @__PURE__ */ jsx3("small", { children: pending ? "Waiting for the page" : "No page summary returned" })
+  ] });
+  if (presentation.detail === "agent") return /* @__PURE__ */ jsxs2("section", { class: "scui-agent-preview", children: [
+    presentation.subject ? /* @__PURE__ */ jsx3("p", { children: presentation.subject }) : null,
+    presentation.preview ? /* @__PURE__ */ jsx3("pre", { children: stripAnsi(presentation.preview) }) : /* @__PURE__ */ jsx3("small", { children: pending ? "Agent is working" : "No textual handoff returned" })
+  ] });
+  if (presentation.detail === "plan") return /* @__PURE__ */ jsx3("ol", { class: "scui-plan-preview", children: presentation.items?.map((item, index) => /* @__PURE__ */ jsxs2("li", { "data-status": item.status, children: [
+    /* @__PURE__ */ jsx3("i", { "aria-hidden": "true" }),
+    /* @__PURE__ */ jsx3("span", { children: item.label })
+  ] }, `${item.label}:${index}`)) });
+  return presentation.preview ? /* @__PURE__ */ jsx3("pre", { class: "scui-tool-output", "data-error": failed, children: stripAnsi(presentation.preview) }) : null;
+}
+function TechnicalDetails({ entry }) {
+  if (!entry.arguments && !entry.resultText) return null;
+  return /* @__PURE__ */ jsxs2("details", { class: "scui-tool-technical", children: [
+    /* @__PURE__ */ jsx3("summary", { children: "Technical details" }),
+    /* @__PURE__ */ jsxs2("div", { children: [
+      entry.arguments ? /* @__PURE__ */ jsxs2("section", { children: [
+        /* @__PURE__ */ jsx3("strong", { children: "Native arguments" }),
+        /* @__PURE__ */ jsx3("dl", { children: argumentRows(entry.arguments).map((row) => /* @__PURE__ */ jsxs2("div", { children: [
+          /* @__PURE__ */ jsx3("dt", { children: row.label }),
+          /* @__PURE__ */ jsx3("dd", { children: /* @__PURE__ */ jsx3("pre", { children: row.value }) })
+        ] }, row.key)) })
+      ] }) : null,
+      entry.resultText ? /* @__PURE__ */ jsxs2("section", { children: [
+        /* @__PURE__ */ jsx3("strong", { children: "Native result" }),
+        /* @__PURE__ */ jsxs2("pre", { "data-error": entry.status === "error", children: [
+          entry.resultText,
+          entry.truncated ? "\n[truncated]" : ""
+        ] })
+      ] }) : null
+    ] })
+  ] });
+}
 function TranscriptEntry({ entry, state, adapter }) {
   if (entry.role === "request") return /* @__PURE__ */ jsx3(RequestCard, { entry, adapter, canRespond: state.canRespond });
   if (entry.role === "reasoning") {
@@ -606,33 +849,30 @@ function TranscriptEntry({ entry, state, adapter }) {
     entry.truncated ? /* @__PURE__ */ jsx3("small", { class: "scui-truncated", children: "Entry truncated by host \xB7 load native session for the complete value" }) : null
   ] });
 }
-function ToolRow({ entry, workspace }) {
-  const target = compactToolTarget(toolTarget(entry.arguments), workspace);
-  const hasDetail = Boolean(entry.arguments || entry.resultText);
-  const category = toolCategory(entry);
+function ToolRow({ entry, workspace, open = false }) {
+  const presentation = entry.presentation ?? createToolPresentation(entry);
+  const target = compactToolTarget(presentation.target, workspace);
+  const hasDetail = Boolean(entry.arguments || entry.resultText || presentation.preview || presentation.fields.length);
+  const category = presentation.category ?? toolCategory(entry);
   const summary = /* @__PURE__ */ jsxs2(Fragment, { children: [
     /* @__PURE__ */ jsx3(ToolIcon, { category }),
     /* @__PURE__ */ jsx3("strong", { children: toolAction(entry, category) }),
-    target ? /* @__PURE__ */ jsx3("code", { class: "scui-tool-target", title: toolTarget(entry.arguments), children: target }) : null,
+    target ? /* @__PURE__ */ jsx3("code", { class: "scui-tool-target", title: presentation.target, children: target }) : null,
     /* @__PURE__ */ jsx3("span", { class: "scui-spacer" }),
     /* @__PURE__ */ jsx3("span", { class: "scui-tool-status", role: "status", "data-status": entry.status ?? "completed", "aria-label": entry.status ?? "completed", children: entry.status === "pending" ? /* @__PURE__ */ jsx3("i", {}) : entry.status === "error" ? "\xD7" : "\u2713" }),
     hasDetail ? /* @__PURE__ */ jsx3("span", { class: "scui-tool-chevron", "aria-hidden": "true", children: "\u203A" }) : null
   ] });
   if (!hasDetail) return /* @__PURE__ */ jsx3("div", { class: "scui-tool", "data-status": entry.status ?? "completed", "data-category": category, children: /* @__PURE__ */ jsx3("div", { class: "scui-tool-head", children: summary }) });
-  return /* @__PURE__ */ jsxs2("details", { class: "scui-tool", "data-status": entry.status ?? "completed", "data-category": category, children: [
+  return /* @__PURE__ */ jsxs2("details", { class: "scui-tool", "data-status": entry.status ?? "completed", "data-category": category, open: open || entry.status === "pending", children: [
     /* @__PURE__ */ jsx3("summary", { class: "scui-tool-head", children: summary }),
     /* @__PURE__ */ jsxs2("div", { class: "scui-tool-detail", children: [
-      entry.arguments ? /* @__PURE__ */ jsx3("dl", { children: argumentRows(entry.arguments).map((row) => /* @__PURE__ */ jsxs2("div", { children: [
-        /* @__PURE__ */ jsx3("dt", { children: row.label }),
-        /* @__PURE__ */ jsx3("dd", { children: /* @__PURE__ */ jsx3("pre", { children: row.value }) })
-      ] }, row.key)) }) : null,
-      entry.resultText ? /* @__PURE__ */ jsxs2("section", { children: [
-        /* @__PURE__ */ jsx3("strong", { children: entry.status === "error" ? "Error" : "Result" }),
-        /* @__PURE__ */ jsxs2("pre", { "data-error": entry.status === "error", children: [
-          entry.resultText,
-          entry.truncated ? "\n[truncated]" : ""
-        ] })
-      ] }) : null
+      /* @__PURE__ */ jsx3(ToolMetrics, { presentation }),
+      /* @__PURE__ */ jsx3(ToolPreview, { presentation, entry }),
+      presentation.fields.length ? /* @__PURE__ */ jsx3("dl", { class: "scui-tool-fields", children: presentation.fields.map((field) => /* @__PURE__ */ jsxs2("div", { children: [
+        /* @__PURE__ */ jsx3("dt", { children: field.label }),
+        /* @__PURE__ */ jsx3("dd", { children: field.value })
+      ] }, field.label)) }) : null,
+      /* @__PURE__ */ jsx3(TechnicalDetails, { entry })
     ] })
   ] });
 }

package/package.json

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

package/styles.css

@@ -138,7 +138,15 @@
 .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: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-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 }