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

package/components.mjs

@@ -329,9 +329,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;
@@ -467,7 +470,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],
@@ -515,6 +518,76 @@ 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" })
+  ] }),
+  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"]
+  };
+  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 TranscriptEntry({ entry, state, adapter }) {
   if (entry.role === "request") return /* @__PURE__ */ jsx3(RequestCard, { entry, adapter, canRespond: state.canRespond });
   if (entry.role === "reasoning") {
@@ -531,35 +604,37 @@ function TranscriptEntry({ entry, state, adapter }) {
   ] });
 }
 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]" : ""
+  const summary = /* @__PURE__ */ jsxs2(Fragment, { children: [
+    /* @__PURE__ */ jsx3(ToolIcon, { category }),
+    /* @__PURE__ */ jsx3("strong", { children: toolAction(entry, category) }),
+    target ? /* @__PURE__ */ jsx3("code", { class: "scui-tool-target", title: toolTarget(entry.arguments), children: target }) : null,
+    /* @__PURE__ */ jsx3("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: [
+    /* @__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
-    ] }) : null
+    ] })
   ] });
 }
 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();
@@ -572,7 +647,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
       ] })
@@ -942,9 +1017,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/conversation.mjs

@@ -105,9 +105,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`;
 }
 
 // src/markdown.jsx
@@ -135,7 +138,7 @@ function boundedSet(map, key, value) {
 }
 
 // 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],
@@ -183,6 +186,76 @@ function ContextDisclosure({ context }) {
     ] }, item.id ?? index)) })
   ] });
 }
+var TOOL_ICONS = {
+  read: () => /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx2("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__ */ jsx2("path", { d: "M12 2.9v3h2.85M6 9h6M6 12h4" })
+  ] }),
+  search: () => /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx2("circle", { cx: "8", cy: "8", r: "4.5" }),
+    /* @__PURE__ */ jsx2("path", { d: "m11.5 11.5 3 3" })
+  ] }),
+  edit: () => /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx2("path", { d: "m11.75 3.25 3 3-8.5 8.5-3.75.75.75-3.75 8.5-8.5Z" }),
+    /* @__PURE__ */ jsx2("path", { d: "m10 5 3 3" })
+  ] }),
+  command: () => /* @__PURE__ */ jsx2(Fragment, { children: /* @__PURE__ */ jsx2("path", { d: "m3 5 3 3-3 3M8 12h6" }) }),
+  test: () => /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx2("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__ */ jsx2("path", { d: "M5 2.5h8" })
+  ] }),
+  web: () => /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx2("circle", { cx: "9", cy: "9", r: "6.5" }),
+    /* @__PURE__ */ jsx2("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__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx2("circle", { cx: "9", cy: "6", r: "2.5" }),
+    /* @__PURE__ */ jsx2("path", { d: "M4 15c.4-3 2-4.5 5-4.5s4.6 1.5 5 4.5" })
+  ] }),
+  other: () => /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx2("path", { d: "M9 2.5v3M9 12.5v3M2.5 9h3M12.5 9h3" }),
+    /* @__PURE__ */ jsx2("circle", { cx: "9", cy: "9", r: "3.5" })
+  ] })
+};
+function ToolIcon({ category }) {
+  const Glyph = TOOL_ICONS[category] ?? TOOL_ICONS.other;
+  return /* @__PURE__ */ jsx2("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__ */ jsx2(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"]
+  };
+  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 TranscriptEntry({ entry, state, adapter }) {
   if (entry.role === "request") return /* @__PURE__ */ jsx2(RequestCard, { entry, adapter, canRespond: state.canRespond });
   if (entry.role === "reasoning") {
@@ -199,35 +272,37 @@ function TranscriptEntry({ entry, state, adapter }) {
   ] });
 }
 function ToolRow({ entry, workspace }) {
-  const [open, setOpen] = useState(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__ */ jsxs("div", { class: "scui-tool", "data-status": entry.status ?? "completed", "data-category": category, children: [
-    /* @__PURE__ */ jsxs("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__ */ jsx2("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__ */ jsx2("strong", { children: entry.label?.split(/__|\//).at(-1)?.replaceAll("_", " ") || "Tool" }),
-      target ? /* @__PURE__ */ jsx2("span", { class: "scui-tool-target", title: toolTarget(entry.arguments), children: target }) : null,
-      /* @__PURE__ */ jsx2("span", { class: "scui-spacer" }),
-      /* @__PURE__ */ jsx2("span", { "aria-label": entry.status ?? "completed", children: entry.status === "pending" ? "\u25CC" : entry.status === "error" ? "\xD7" : "\u2713" })
-    ] }),
-    hasDetail && open ? /* @__PURE__ */ jsxs("div", { id: detailId, class: "scui-tool-detail", children: [
-      entry.arguments ? /* @__PURE__ */ jsxs("pre", { children: [
-        /* @__PURE__ */ jsx2("b", { children: "Input" }),
-        "\n",
-        entry.arguments
-      ] }) : null,
-      entry.resultText ? /* @__PURE__ */ jsxs("pre", { "data-error": entry.status === "error", children: [
-        /* @__PURE__ */ jsx2("b", { children: "Output" }),
-        "\n",
-        entry.resultText,
-        entry.truncated ? "\n[truncated]" : ""
+  const summary = /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx2(ToolIcon, { category }),
+    /* @__PURE__ */ jsx2("strong", { children: toolAction(entry, category) }),
+    target ? /* @__PURE__ */ jsx2("code", { class: "scui-tool-target", title: toolTarget(entry.arguments), children: target }) : null,
+    /* @__PURE__ */ jsx2("span", { class: "scui-spacer" }),
+    /* @__PURE__ */ jsx2("span", { class: "scui-tool-status", role: "status", "data-status": entry.status ?? "completed", "aria-label": entry.status ?? "completed", children: entry.status === "pending" ? /* @__PURE__ */ jsx2("i", {}) : entry.status === "error" ? "\xD7" : "\u2713" }),
+    hasDetail ? /* @__PURE__ */ jsx2("span", { class: "scui-tool-chevron", "aria-hidden": "true", children: "\u203A" }) : null
+  ] });
+  if (!hasDetail) return /* @__PURE__ */ jsx2("div", { class: "scui-tool", "data-status": entry.status ?? "completed", "data-category": category, children: /* @__PURE__ */ jsx2("div", { class: "scui-tool-head", children: summary }) });
+  return /* @__PURE__ */ jsxs("details", { class: "scui-tool", "data-status": entry.status ?? "completed", "data-category": category, children: [
+    /* @__PURE__ */ jsx2("summary", { class: "scui-tool-head", children: summary }),
+    /* @__PURE__ */ jsxs("div", { class: "scui-tool-detail", children: [
+      entry.arguments ? /* @__PURE__ */ jsx2("dl", { children: argumentRows(entry.arguments).map((row) => /* @__PURE__ */ jsxs("div", { children: [
+        /* @__PURE__ */ jsx2("dt", { children: row.label }),
+        /* @__PURE__ */ jsx2("dd", { children: /* @__PURE__ */ jsx2("pre", { children: row.value }) })
+      ] }, row.key)) }) : null,
+      entry.resultText ? /* @__PURE__ */ jsxs("section", { children: [
+        /* @__PURE__ */ jsx2("strong", { children: entry.status === "error" ? "Error" : "Result" }),
+        /* @__PURE__ */ jsxs("pre", { "data-error": entry.status === "error", children: [
+          entry.resultText,
+          entry.truncated ? "\n[truncated]" : ""
+        ] })
       ] }) : null
-    ] }) : null
+    ] })
   ] });
 }
 function ActivityGroup({ entries, state }) {
+  if (entries.length === 1) return /* @__PURE__ */ jsx2("section", { class: "scui-activity", "data-single": "true", children: /* @__PURE__ */ jsx2(ToolRow, { entry: entries[0], workspace: state.workspace }) });
   const active = entries.some((entry) => entry.status === "pending");
   const [open, setOpen] = useState(active);
   const id = useId();
@@ -240,7 +315,7 @@ function ActivityGroup({ entries, state }) {
       /* @__PURE__ */ jsx2("strong", { children: activitySummary(entries) }),
       /* @__PURE__ */ jsx2("span", { class: "scui-spacer" }),
       /* @__PURE__ */ jsxs("small", { children: [
-        entries.filter((entry) => entry.status === "completed").length,
+        entries.filter((entry) => entry.status !== "pending").length,
         "/",
         entries.length
       ] })

package/core.mjs

@@ -390,9 +390,12 @@ export function compactToolTarget(target, workspace) {
 export function activitySummary(entries) {
   const counts = 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 · ${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 · ${Object.entries(labels).flatMap(([key, label]) => counts.has(key) ? [`${counts.get(key)} ${label}`] : []).join(' · ')}`;
+  return `${entries.length} actions`;
 }
 
 export function canContinueHere(state) {

package/embed.mjs

@@ -332,9 +332,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;
@@ -473,7 +476,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],
@@ -521,6 +524,76 @@ 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" })
+  ] }),
+  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"]
+  };
+  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 TranscriptEntry({ entry, state, adapter }) {
   if (entry.role === "request") return /* @__PURE__ */ jsx3(RequestCard, { entry, adapter, canRespond: state.canRespond });
   if (entry.role === "reasoning") {
@@ -537,35 +610,37 @@ function TranscriptEntry({ entry, state, adapter }) {
   ] });
 }
 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]" : ""
+  const summary = /* @__PURE__ */ jsxs2(Fragment, { children: [
+    /* @__PURE__ */ jsx3(ToolIcon, { category }),
+    /* @__PURE__ */ jsx3("strong", { children: toolAction(entry, category) }),
+    target ? /* @__PURE__ */ jsx3("code", { class: "scui-tool-target", title: toolTarget(entry.arguments), children: target }) : null,
+    /* @__PURE__ */ jsx3("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: [
+    /* @__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
-    ] }) : null
+    ] })
   ] });
 }
 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();
@@ -578,7 +653,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
       ] })
@@ -942,9 +1017,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/messenger.mjs

@@ -329,9 +329,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 +473,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 +521,76 @@ 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" })
+  ] }),
+  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"]
+  };
+  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 TranscriptEntry({ entry, state, adapter }) {
   if (entry.role === "request") return /* @__PURE__ */ jsx3(RequestCard, { entry, adapter, canRespond: state.canRespond });
   if (entry.role === "reasoning") {
@@ -534,35 +607,37 @@ function TranscriptEntry({ entry, state, adapter }) {
   ] });
 }
 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]" : ""
+  const summary = /* @__PURE__ */ jsxs2(Fragment, { children: [
+    /* @__PURE__ */ jsx3(ToolIcon, { category }),
+    /* @__PURE__ */ jsx3("strong", { children: toolAction(entry, category) }),
+    target ? /* @__PURE__ */ jsx3("code", { class: "scui-tool-target", title: toolTarget(entry.arguments), children: target }) : null,
+    /* @__PURE__ */ jsx3("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: [
+    /* @__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
-    ] }) : null
+    ] })
   ] });
 }
 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 +650,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 +1014,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.8",
   "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,16 @@
 .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: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-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 }