@volter-ai-dev/supercode-ui 0.1.13 → 0.1.14

package/conversation.mjs

@@ -1,5 +1,6 @@
 // src/conversation.jsx
-import { useEffect, useId, useLayoutEffect, useRef, useState } from "preact/hooks";
+import { Fragment as Fragment2 } from "preact";
+import { useEffect as useEffect2, useId, useLayoutEffect, useRef as useRef2, useState } from "preact/hooks";
 
 // core.mjs
 var HARNESS_NAMES = Object.freeze({
@@ -283,18 +284,95 @@ function activitySummary(entries) {
 
 // src/markdown.jsx
 import MarkdownIt from "markdown-it";
-import { useMemo } from "preact/hooks";
+import { useEffect, useMemo, useRef } from "preact/hooks";
 import { jsx } from "preact/jsx-runtime";
 var markdown = new MarkdownIt({ html: false, linkify: true, breaks: false });
+var LANGUAGE_LABELS = {
+  bash: "Shell",
+  css: "CSS",
+  html: "HTML",
+  js: "JavaScript",
+  javascript: "JavaScript",
+  jsx: "JSX",
+  md: "Markdown",
+  markdown: "Markdown",
+  py: "Python",
+  python: "Python",
+  rs: "Rust",
+  rust: "Rust",
+  sh: "Shell",
+  shell: "Shell",
+  ts: "TypeScript",
+  tsx: "TSX",
+  yaml: "YAML",
+  yml: "YAML",
+  json: "JSON",
+  jsonc: "JSONC",
+  sql: "SQL",
+  xml: "XML"
+};
+var COPY_ICON = '<svg viewBox="0 0 18 18" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="5" y="5" width="8" height="8" rx="1.5"></rect><path d="M3 10.5V4.25C3 3.56 3.56 3 4.25 3h6.25"></path></svg>';
+function languageLabel(info) {
+  const language = info.trim().split(/\s+/, 1)[0]?.toLocaleLowerCase() ?? "";
+  if (!language) return "Code";
+  return LANGUAGE_LABELS[language] ?? language.toLocaleUpperCase();
+}
+function frameCode(render, tokens, index, options, env, self) {
+  const label = markdown.utils.escapeHtml(languageLabel(tokens[index]?.info ?? ""));
+  return `<div class="scui-code-block"><div class="scui-code-head"><span>${label}</span><button class="scui-code-copy" type="button" aria-label="Copy code" title="Copy code">${COPY_ICON}<span>Copy</span></button></div>${render(tokens, index, options, env, self)}</div>`;
+}
+for (const kind of ["fence", "code_block"]) {
+  const render = markdown.renderer.rules[kind];
+  markdown.renderer.rules[kind] = (tokens, index, options, env, self) => frameCode(render, tokens, index, options, env, self);
+}
 var defaultLinkOpen = markdown.renderer.rules.link_open;
 markdown.renderer.rules.link_open = (tokens, index, options, env, self) => {
   tokens[index]?.attrSet("target", "_blank");
   tokens[index]?.attrSet("rel", "noreferrer noopener");
   return defaultLinkOpen ? defaultLinkOpen(tokens, index, options, env, self) : self.renderToken(tokens, index, options);
 };
-function Markdown({ value }) {
+function setCopyState(button, status) {
+  const labels = {
+    idle: ["Copy code", "Copy"],
+    copied: ["Code copied", "Copied"],
+    failed: ["Copy failed \xB7 retry", "Retry"]
+  };
+  const [label, visible] = labels[status];
+  button.dataset.status = status;
+  button.setAttribute("aria-label", label);
+  button.setAttribute("title", label);
+  const text = button.querySelector("span");
+  if (text) text.textContent = visible;
+}
+function Markdown({ value, copyText }) {
   const html = useMemo(() => markdown.render(value), [value]);
-  return /* @__PURE__ */ jsx("div", { class: "scui-markdown", dangerouslySetInnerHTML: { __html: html } });
+  const resets = useRef(/* @__PURE__ */ new Map());
+  useEffect(() => () => {
+    for (const timer of resets.current.values()) clearTimeout(timer);
+    resets.current.clear();
+  }, []);
+  const copyCode = async (event) => {
+    const button = event.target.closest?.(".scui-code-copy");
+    if (!button || !event.currentTarget.contains(button) || !copyText) return;
+    const code = button.closest(".scui-code-block")?.querySelector("pre code");
+    if (!code) return;
+    button.disabled = true;
+    try {
+      await copyText(code.textContent ?? "");
+      setCopyState(button, "copied");
+    } catch {
+      setCopyState(button, "failed");
+    } finally {
+      button.disabled = false;
+    }
+    clearTimeout(resets.current.get(button));
+    const timer = setTimeout(() => {
+      if (button.isConnected) setCopyState(button, "idle");
+      resets.current.delete(button);
+    }, 1500);
+    resets.current.set(button, timer);
+  };
+  return /* @__PURE__ */ jsx("div", { class: "scui-markdown", "data-copyable": Boolean(copyText), onClick: copyCode, dangerouslySetInnerHTML: { __html: html } });
 }
 
 // src/memory.js
@@ -305,8 +383,51 @@ function boundedSet(map, key, value) {
   while (map.size > MEMORY_LIMIT) map.delete(map.keys().next().value);
 }
 
-// src/conversation.jsx
+// src/icon.jsx
 import { Fragment, jsx as jsx2, jsxs } from "preact/jsx-runtime";
+var ICONS = {
+  back: () => /* @__PURE__ */ jsx2("path", { d: "m11.5 4.5-4.5 4.5 4.5 4.5" }),
+  check: () => /* @__PURE__ */ jsx2("path", { d: "m4 9 3.25 3.25L14 5.5" }),
+  chevron: () => /* @__PURE__ */ jsx2("path", { d: "m7 4.5 4.5 4.5L7 13.5" }),
+  close: () => /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx2("path", { d: "m4.75 4.75 8.5 8.5" }),
+    /* @__PURE__ */ jsx2("path", { d: "m13.25 4.75-8.5 8.5" })
+  ] }),
+  copy: () => /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx2("rect", { x: "5", y: "5", width: "8", height: "8", rx: "1.5" }),
+    /* @__PURE__ */ jsx2("path", { d: "M3 10.5V4.25C3 3.56 3.56 3 4.25 3h6.25" })
+  ] }),
+  down: () => /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx2("path", { d: "M9 3.5v10" }),
+    /* @__PURE__ */ jsx2("path", { d: "m4.75 9.5 4.25 4 4.25-4" })
+  ] }),
+  menu: () => /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx2("circle", { cx: "4", cy: "9", r: "1.25", fill: "currentColor", stroke: "none" }),
+    /* @__PURE__ */ jsx2("circle", { cx: "9", cy: "9", r: "1.25", fill: "currentColor", stroke: "none" }),
+    /* @__PURE__ */ jsx2("circle", { cx: "14", cy: "9", r: "1.25", fill: "currentColor", stroke: "none" })
+  ] }),
+  plus: () => /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx2("path", { d: "M9 3.5v11" }),
+    /* @__PURE__ */ jsx2("path", { d: "M3.5 9h11" })
+  ] }),
+  search: () => /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx2("circle", { cx: "7.75", cy: "7.75", r: "4.25" }),
+    /* @__PURE__ */ jsx2("path", { d: "m11 11 3.5 3.5" })
+  ] }),
+  send: () => /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx2("path", { d: "M9 14.5v-11" }),
+    /* @__PURE__ */ jsx2("path", { d: "m4.75 7.75 4.25-4.25 4.25 4.25" })
+  ] }),
+  stop: () => /* @__PURE__ */ jsx2("rect", { x: "4.5", y: "4.5", width: "9", height: "9", rx: "1.5", fill: "currentColor", stroke: "none" })
+};
+function UiIcon({ name, size = 16, class: className = "" }) {
+  const Glyph = ICONS[name];
+  if (!Glyph) return null;
+  return /* @__PURE__ */ jsx2("svg", { class: `scui-icon ${className}`, style: { "--scui-icon-size": `${size}px` }, viewBox: "0 0 18 18", fill: "none", stroke: "currentColor", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round", "aria-hidden": "true", children: /* @__PURE__ */ jsx2(Glyph, {}) });
+}
+
+// src/conversation.jsx
+import { Fragment as Fragment3, 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],
@@ -314,81 +435,104 @@ function LoadingStatus({ state, compact = false }) {
     discovering: ["Loading recent sessions", "Scanning native session stores without loading full transcripts.", 2],
     ready: ["Ready", "Coding sessions are up to date.", 3]
   }[state.startup];
-  return /* @__PURE__ */ jsxs("div", { class: `scui-loading${compact ? " scui-loading-compact" : ""}`, role: "status", "aria-busy": state.startup !== "ready", children: [
-    /* @__PURE__ */ jsx2("span", { class: "scui-orbit", "aria-hidden": "true", children: /* @__PURE__ */ jsx2("i", {}) }),
-    /* @__PURE__ */ jsxs("span", { class: "scui-loading-copy", children: [
-      /* @__PURE__ */ jsx2("strong", { children: copy[0] }),
-      /* @__PURE__ */ jsx2("small", { children: copy[1] })
+  return /* @__PURE__ */ jsxs2("div", { class: `scui-loading${compact ? " scui-loading-compact" : ""}`, role: "status", "aria-busy": state.startup !== "ready", children: [
+    /* @__PURE__ */ jsx3("span", { class: "scui-orbit", "aria-hidden": "true", children: /* @__PURE__ */ jsx3("i", {}) }),
+    /* @__PURE__ */ jsxs2("span", { class: "scui-loading-copy", children: [
+      /* @__PURE__ */ jsx3("strong", { children: copy[0] }),
+      /* @__PURE__ */ jsx3("small", { children: copy[1] })
     ] }),
-    /* @__PURE__ */ jsx2("span", { class: "scui-progress", "aria-hidden": "true", children: [1, 2, 3].map((step) => /* @__PURE__ */ jsx2("i", { "data-progress": step <= copy[2] ? "done" : step === copy[2] + 1 ? "current" : "waiting" }, step)) })
+    /* @__PURE__ */ jsx3("span", { class: "scui-progress", "aria-hidden": "true", children: [1, 2, 3].map((step) => /* @__PURE__ */ jsx3("i", { "data-progress": step <= copy[2] ? "done" : step === copy[2] + 1 ? "current" : "waiting" }, step)) })
   ] });
 }
 function RequestCard({ entry, adapter, canRespond }) {
   const request = entry.request;
   if (!request) return null;
   if (request.status === "responded") {
-    return /* @__PURE__ */ jsxs("div", { class: "scui-request-done", children: [
+    return /* @__PURE__ */ jsxs2("div", { class: "scui-request-done", children: [
       "\u2713 Request answered \xB7 ",
       request.resolution?.name ?? request.requestKind
     ] });
   }
-  return /* @__PURE__ */ jsxs("section", { class: "scui-request", "aria-label": `${request.requestKind} needs input`, children: [
-    /* @__PURE__ */ jsx2("strong", { children: "Agent needs input" }),
-    /* @__PURE__ */ jsx2(Markdown, { value: request.payloadText || entry.text }),
-    /* @__PURE__ */ jsxs("div", { class: "scui-request-actions", children: [
-      request.options.map((option) => /* @__PURE__ */ jsx2("button", { type: "button", disabled: !canRespond, onClick: () => adapter.onIntent({ action: "respond", requestId: request.requestId, optionId: option.optionId }), children: option.name }, option.optionId)),
-      request.cancellable ? /* @__PURE__ */ jsx2("button", { type: "button", disabled: !canRespond, onClick: () => adapter.onIntent({ action: "respond", requestId: request.requestId, optionId: null }), children: "Cancel" }) : null
+  return /* @__PURE__ */ jsxs2("section", { class: "scui-request", role: "alert", "aria-label": `${request.requestKind} needs input`, children: [
+    /* @__PURE__ */ jsx3("strong", { children: "Agent needs input" }),
+    /* @__PURE__ */ jsx3(Markdown, { value: request.payloadText || entry.text, copyText: adapter?.copyText }),
+    /* @__PURE__ */ jsxs2("div", { class: "scui-request-actions", children: [
+      request.options.map((option) => /* @__PURE__ */ jsx3("button", { type: "button", disabled: !canRespond, onClick: () => adapter.onIntent({ action: "respond", requestId: request.requestId, optionId: option.optionId }), children: option.name }, option.optionId)),
+      request.cancellable ? /* @__PURE__ */ jsx3("button", { type: "button", disabled: !canRespond, onClick: () => adapter.onIntent({ action: "respond", requestId: request.requestId, optionId: null }), children: "Cancel" }) : null
     ] })
   ] });
 }
 function ContextDisclosure({ context }) {
   if (!context?.length) return null;
-  return /* @__PURE__ */ jsxs("details", { class: "scui-context", children: [
-    /* @__PURE__ */ jsxs("summary", { children: [
+  return /* @__PURE__ */ jsxs2("details", { class: "scui-context", children: [
+    /* @__PURE__ */ jsxs2("summary", { children: [
       "Context \xB7 ",
       context.length
     ] }),
-    /* @__PURE__ */ jsx2("div", { children: context.map((item, index) => /* @__PURE__ */ jsxs("p", { children: [
-      /* @__PURE__ */ jsx2("strong", { children: item.label }),
-      /* @__PURE__ */ jsx2("span", { children: item.detail })
+    /* @__PURE__ */ jsx3("div", { children: context.map((item, index) => /* @__PURE__ */ jsxs2("p", { children: [
+      /* @__PURE__ */ jsx3("strong", { children: item.label }),
+      /* @__PURE__ */ jsx3("span", { children: item.detail })
     ] }, item.id ?? index)) })
   ] });
 }
+function MessageMeta({ entry, adapter }) {
+  const [copyState, setCopyState2] = useState("idle");
+  const reset = useRef2(null);
+  useEffect2(() => () => clearTimeout(reset.current), []);
+  const date = entry.ts === null ? null : new Date(entry.ts);
+  const validDate = date && Number.isFinite(date.valueOf()) ? date : null;
+  if (!validDate && (!adapter?.copyText || !entry.text)) return null;
+  const copy = async () => {
+    try {
+      await adapter.copyText(entry.text);
+      setCopyState2("copied");
+    } catch {
+      setCopyState2("failed");
+    }
+    clearTimeout(reset.current);
+    reset.current = setTimeout(() => setCopyState2("idle"), 1500);
+  };
+  const copyLabel = copyState === "copied" ? "Message copied" : copyState === "failed" ? "Copy failed \xB7 retry" : "Copy message";
+  return /* @__PURE__ */ jsxs2("footer", { class: "scui-message-meta", children: [
+    validDate ? /* @__PURE__ */ jsx3("time", { dateTime: validDate.toISOString(), title: validDate.toLocaleString(), children: validDate.toLocaleTimeString([], { hour: "numeric", minute: "2-digit" }) }) : null,
+    adapter?.copyText && entry.text ? /* @__PURE__ */ jsx3("button", { type: "button", "aria-label": copyLabel, title: copyLabel, onClick: copy, "data-status": copyState, children: /* @__PURE__ */ jsx3(UiIcon, { name: "copy", size: 13 }) }) : null
+  ] });
+}
 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" })
+  read: () => /* @__PURE__ */ jsxs2(Fragment3, { 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__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx2("circle", { cx: "8", cy: "8", r: "4.5" }),
-    /* @__PURE__ */ jsx2("path", { d: "m11.5 11.5 3 3" })
+  search: () => /* @__PURE__ */ jsxs2(Fragment3, { children: [
+    /* @__PURE__ */ jsx3("circle", { cx: "8", cy: "8", r: "4.5" }),
+    /* @__PURE__ */ jsx3("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" })
+  edit: () => /* @__PURE__ */ jsxs2(Fragment3, { 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__ */ 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" })
+  command: () => /* @__PURE__ */ jsx3(Fragment3, { children: /* @__PURE__ */ jsx3("path", { d: "m3 5 3 3-3 3M8 12h6" }) }),
+  test: () => /* @__PURE__ */ jsxs2(Fragment3, { 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__ */ 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" })
+  web: () => /* @__PURE__ */ jsxs2(Fragment3, { 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__ */ 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" })
+  agent: () => /* @__PURE__ */ jsxs2(Fragment3, { 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__ */ jsx2(Fragment, { children: /* @__PURE__ */ jsx2("path", { d: "m3 5 1 1 2-2M3 9l1 1 2-2M3 13l1 1 2-2M8 5h7M8 9h7M8 13h7" }) }),
-  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" })
+  plan: () => /* @__PURE__ */ jsx3(Fragment3, { 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(Fragment3, { 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__ */ 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, {}) });
+  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 toolAction2(entry, category, presentation) {
   if (presentation?.action) return presentation.action;
@@ -443,86 +587,86 @@ function ToolMetrics({ presentation }) {
     presentation.exitCode === null ? "" : `exit ${presentation.exitCode}`,
     formatDuration(presentation.durationMs)
   ].filter(Boolean);
-  return metrics.length ? /* @__PURE__ */ jsx2("div", { class: "scui-tool-metrics", children: metrics.map((metric) => /* @__PURE__ */ jsx2("span", { children: metric }, metric)) }) : null;
+  return metrics.length ? /* @__PURE__ */ jsx3("div", { class: "scui-tool-metrics", children: metrics.map((metric) => /* @__PURE__ */ jsx3("span", { children: metric }, metric)) }) : null;
 }
 function PendingElapsed({ now }) {
   const clock = now ?? Date.now;
-  const started = useRef(clock());
+  const started = useRef2(clock());
   const [elapsed, setElapsed] = useState(0);
-  useEffect(() => {
+  useEffect2(() => {
     const timer = setInterval(() => setElapsed(Math.max(0, clock() - started.current)), 1e3);
     return () => clearInterval(timer);
   }, [clock]);
-  return /* @__PURE__ */ jsx2("small", { class: "scui-tool-elapsed", children: elapsed < 1e3 ? "now" : formatDuration(elapsed) });
+  return /* @__PURE__ */ jsx3("small", { class: "scui-tool-elapsed", children: elapsed < 1e3 ? "now" : formatDuration(elapsed) });
 }
 function LinePreview({ value, kind }) {
   if (!value) return null;
-  return /* @__PURE__ */ jsx2("ol", { class: "scui-code-preview", "data-kind": kind, children: stripAnsi(value).split("\n").map((line, index) => {
+  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__ */ jsxs("li", { "data-tone": tone, children: [
-      /* @__PURE__ */ jsx2("span", { children: index + 1 }),
-      /* @__PURE__ */ jsx2("code", { children: line || " " })
+    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__ */ jsxs("section", { class: "scui-terminal", children: [
-    /* @__PURE__ */ jsxs("header", { children: [
-      /* @__PURE__ */ jsxs("span", { "aria-hidden": "true", children: [
-        /* @__PURE__ */ jsx2("i", {}),
-        /* @__PURE__ */ jsx2("i", {}),
-        /* @__PURE__ */ jsx2("i", {})
+  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__ */ jsx2("code", { children: presentation.command ? `$ ${presentation.command}` : "Terminal" })
+      /* @__PURE__ */ jsx3("code", { children: presentation.command ? `$ ${presentation.command}` : "Terminal" })
     ] }),
-    presentation.preview ? /* @__PURE__ */ jsx2("pre", { "data-error": failed, children: stripAnsi(presentation.preview) }) : pending ? /* @__PURE__ */ jsxs("div", { class: "scui-terminal-wait", children: [
-      /* @__PURE__ */ jsx2("i", {}),
+    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__ */ jsx2("div", { class: "scui-terminal-empty", children: "No 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__ */ jsxs("section", { class: "scui-search-preview", children: [
-    presentation.query ? /* @__PURE__ */ jsxs("header", { children: [
-      /* @__PURE__ */ jsx2("span", { children: "Search" }),
-      /* @__PURE__ */ jsx2("code", { children: presentation.query })
+  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__ */ jsx2("ol", { children: lines.map((line, index) => {
+    lines.length ? /* @__PURE__ */ jsx3("ol", { children: lines.map((line, index) => {
       const match = /^(.*?):(\d+)(?::(\d+))?:(.*)$/.exec(line);
-      return /* @__PURE__ */ jsx2("li", { children: match ? /* @__PURE__ */ jsxs(Fragment, { children: [
-        /* @__PURE__ */ jsx2("code", { children: match[1] }),
-        /* @__PURE__ */ jsxs("small", { children: [
+      return /* @__PURE__ */ jsx3("li", { children: match ? /* @__PURE__ */ jsxs2(Fragment3, { children: [
+        /* @__PURE__ */ jsx3("code", { children: match[1] }),
+        /* @__PURE__ */ jsxs2("small", { children: [
           match[2],
           match[3] ? `:${match[3]}` : ""
         ] }),
-        /* @__PURE__ */ jsx2("span", { children: match[4] })
-      ] }) : /* @__PURE__ */ jsx2("span", { children: line }) }, index);
-    }) }) : /* @__PURE__ */ jsx2("p", { children: "No textual results" })
+        /* @__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__ */ jsx2(TerminalPreview, { presentation, pending, failed });
-  if (presentation.detail === "diff") return presentation.preview ? /* @__PURE__ */ jsx2(LinePreview, { value: presentation.preview, kind: "diff" }) : /* @__PURE__ */ jsx2("div", { class: "scui-tool-empty", children: "Edit completed without a textual diff" });
-  if (presentation.detail === "file") return presentation.preview ? /* @__PURE__ */ jsx2(LinePreview, { value: presentation.preview, kind: "file" }) : /* @__PURE__ */ jsx2("div", { class: "scui-tool-empty", children: "File contents were not included in this event" });
-  if (presentation.detail === "matches") return /* @__PURE__ */ jsx2(SearchPreview, { presentation });
-  if (presentation.detail === "web") return /* @__PURE__ */ jsxs("section", { class: "scui-web-preview", children: [
-    presentation.url ? /* @__PURE__ */ jsx2("code", { children: presentation.url }) : null,
-    presentation.preview ? /* @__PURE__ */ jsx2("p", { children: stripAnsi(presentation.preview) }) : /* @__PURE__ */ jsx2("small", { children: pending ? "Waiting for the page" : "No page summary returned" })
+  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__ */ jsx2("section", { class: "scui-agent-preview", children: presentation.preview ? /* @__PURE__ */ jsx2("pre", { children: stripAnsi(presentation.preview) }) : /* @__PURE__ */ jsx2("small", { children: pending ? "Agent is working" : "No textual handoff returned" }) });
-  if (presentation.detail === "plan") return /* @__PURE__ */ jsx2("ol", { class: "scui-plan-preview", children: presentation.items?.map((item, index) => /* @__PURE__ */ jsxs("li", { "data-status": item.status, children: [
-    /* @__PURE__ */ jsx2("i", { "aria-hidden": "true" }),
-    /* @__PURE__ */ jsx2("span", { children: item.label })
+  if (presentation.detail === "agent") return /* @__PURE__ */ jsx3("section", { class: "scui-agent-preview", children: presentation.preview ? /* @__PURE__ */ jsx3("pre", { children: stripAnsi(presentation.preview) }) : /* @__PURE__ */ jsx3("small", { children: pending ? "Agent is working" : "No textual handoff returned" }) });
+  if (presentation.detail === "plan") return /* @__PURE__ */ jsx3("ol", { class: "scui-plan-preview", children: presentation.items?.map((item, index) => /* @__PURE__ */ jsxs2("li", { "data-status": item.status, children: [
+    /* @__PURE__ */ jsx3("i", { "aria-hidden": "true" }),
+    /* @__PURE__ */ jsx3("span", { children: item.label })
   ] }, `${item.label}:${index}`)) });
-  return presentation.preview ? /* @__PURE__ */ jsx2("pre", { class: "scui-tool-output", "data-error": failed, children: stripAnsi(presentation.preview) }) : null;
+  return presentation.preview ? /* @__PURE__ */ jsx3("pre", { class: "scui-tool-output", "data-error": failed, children: stripAnsi(presentation.preview) }) : null;
 }
 function ToolActions({ presentation, adapter }) {
   const [copied, setCopied] = useState(false);
-  const reset = useRef(null);
-  useEffect(() => () => clearTimeout(reset.current), []);
+  const reset = useRef2(null);
+  useEffect2(() => () => clearTimeout(reset.current), []);
   if (!adapter?.copyText) return null;
   const action = presentation.command ? ["Copy command", presentation.command] : presentation.path ? ["Copy path", presentation.path] : presentation.url ? ["Copy URL", presentation.url] : presentation.query ? ["Copy query", presentation.query] : null;
   const copy = async () => {
@@ -531,27 +675,27 @@ function ToolActions({ presentation, adapter }) {
     clearTimeout(reset.current);
     reset.current = setTimeout(() => setCopied(false), 1500);
   };
-  return action ? /* @__PURE__ */ jsx2("div", { class: "scui-tool-actions", children: /* @__PURE__ */ jsx2("button", { type: "button", onClick: copy, children: copied ? "Copied" : action[0] }) }) : null;
+  return action ? /* @__PURE__ */ jsx3("div", { class: "scui-tool-actions", children: /* @__PURE__ */ jsx3("button", { type: "button", onClick: copy, children: copied ? "Copied" : action[0] }) }) : null;
 }
 function ToolStack({ tools }) {
   if (tools.length < 2) return null;
-  return /* @__PURE__ */ jsx2("div", { class: "scui-tool-stack", "aria-label": "Coordinated tools", children: tools.map((tool) => /* @__PURE__ */ jsx2("span", { children: tool.replaceAll("__", " \xB7 ").replaceAll("_", " ") }, tool)) });
+  return /* @__PURE__ */ jsx3("div", { class: "scui-tool-stack", "aria-label": "Coordinated tools", children: tools.map((tool) => /* @__PURE__ */ jsx3("span", { children: tool.replaceAll("__", " \xB7 ").replaceAll("_", " ") }, tool)) });
 }
 function TechnicalDetails({ entry }) {
   if (!entry.arguments && !entry.resultText) return null;
-  return /* @__PURE__ */ jsxs("details", { class: "scui-tool-technical", children: [
-    /* @__PURE__ */ jsx2("summary", { children: "Technical details" }),
-    /* @__PURE__ */ jsxs("div", { children: [
-      entry.arguments ? /* @__PURE__ */ jsxs("section", { children: [
-        /* @__PURE__ */ jsx2("strong", { children: "Native 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 }) })
+  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__ */ jsxs("section", { children: [
-        /* @__PURE__ */ jsx2("strong", { children: "Native result" }),
-        /* @__PURE__ */ jsxs("pre", { "data-error": entry.status === "error", children: [
+      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]" : ""
         ] })
@@ -560,125 +704,126 @@ function TechnicalDetails({ entry }) {
   ] });
 }
 function TranscriptEntry({ entry, state, adapter }) {
-  if (entry.role === "request") return /* @__PURE__ */ jsx2(RequestCard, { entry, adapter, canRespond: state.canRespond });
+  if (entry.role === "request") return /* @__PURE__ */ jsx3(RequestCard, { entry, adapter, canRespond: state.canRespond });
   if (entry.role === "reasoning") {
-    return /* @__PURE__ */ jsxs("details", { class: "scui-reasoning", open: entry.streaming, children: [
-      /* @__PURE__ */ jsx2("summary", { children: entry.streaming ? "Reasoning\u2026" : "Reasoning" }),
-      /* @__PURE__ */ jsx2(Markdown, { value: entry.text })
+    return /* @__PURE__ */ jsxs2("details", { class: "scui-reasoning", open: entry.streaming, children: [
+      /* @__PURE__ */ jsx3("summary", { children: entry.streaming ? "Reasoning\u2026" : "Reasoning" }),
+      /* @__PURE__ */ jsx3(Markdown, { value: entry.text, copyText: adapter?.copyText })
     ] });
   }
-  if (entry.role === "notice" || entry.role === "system") return /* @__PURE__ */ jsx2("div", { class: "scui-notice", "data-code": entry.code, children: entry.text });
-  return /* @__PURE__ */ jsxs("article", { class: "scui-message", "data-role": entry.role, children: [
-    /* @__PURE__ */ jsx2(Markdown, { value: entry.text }),
-    /* @__PURE__ */ jsx2(ContextDisclosure, { context: entry.context }),
-    entry.truncated ? /* @__PURE__ */ jsx2("small", { class: "scui-truncated", children: "Entry truncated by host \xB7 load native session for the complete value" }) : null
+  if (entry.role === "notice" || entry.role === "system") return /* @__PURE__ */ jsx3("div", { class: "scui-notice", "data-code": entry.code, children: entry.text });
+  return /* @__PURE__ */ jsxs2("article", { class: "scui-message", "data-role": entry.role, "aria-label": `${entry.role === "user" ? "Your" : "Assistant"} message`, children: [
+    /* @__PURE__ */ jsx3(Markdown, { value: entry.text, copyText: adapter?.copyText }),
+    /* @__PURE__ */ jsx3(ContextDisclosure, { context: entry.context }),
+    entry.truncated ? /* @__PURE__ */ jsx3("small", { class: "scui-truncated", children: "Entry truncated by host \xB7 load native session for the complete value" }) : null,
+    /* @__PURE__ */ jsx3(MessageMeta, { entry, adapter })
   ] });
 }
 function ToolRow({ entry, workspace, open = false, adapter }) {
   const presentation = entry.presentation ?? createToolPresentation(entry);
   const [expanded, setExpanded] = useState(open || entry.status === "pending");
-  useEffect(() => {
+  useEffect2(() => {
     if (entry.status === "pending") setExpanded(true);
   }, [entry.status]);
   const target = compactToolTarget(presentation.target, workspace);
   const hasDetail = Boolean(entry.arguments || entry.resultText || presentation.preview || presentation.fields.length);
   const category = presentation.category ?? toolCategory(entry);
-  const summary = /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx2(ToolIcon, { category }),
-    /* @__PURE__ */ jsx2("strong", { children: toolAction2(entry, category, presentation) }),
-    target ? /* @__PURE__ */ jsx2("code", { class: "scui-tool-target", title: presentation.target, children: target }) : null,
-    /* @__PURE__ */ jsx2("span", { class: "scui-spacer" }),
-    entry.status === "pending" ? /* @__PURE__ */ jsx2(PendingElapsed, { now: adapter?.now }) : null,
-    /* @__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
+  const summary = /* @__PURE__ */ jsxs2(Fragment3, { children: [
+    /* @__PURE__ */ jsx3(ToolIcon, { category }),
+    /* @__PURE__ */ jsx3("strong", { children: toolAction2(entry, category, presentation) }),
+    target ? /* @__PURE__ */ jsx3("code", { class: "scui-tool-target", title: presentation.target, children: target }) : null,
+    /* @__PURE__ */ jsx3("span", { class: "scui-spacer" }),
+    entry.status === "pending" ? /* @__PURE__ */ jsx3(PendingElapsed, { now: adapter?.now }) : null,
+    /* @__PURE__ */ jsx3("span", { class: "scui-tool-status", role: "status", "data-status": entry.status ?? "completed", "aria-label": entry.status ?? "completed", children: entry.status === "pending" ? /* @__PURE__ */ jsx3("i", {}) : /* @__PURE__ */ jsx3(UiIcon, { name: entry.status === "error" ? "close" : "check", size: 12 }) }),
+    hasDetail ? /* @__PURE__ */ jsx3(UiIcon, { name: "chevron", size: 14, class: "scui-tool-chevron" }) : 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, open: expanded, onToggle: (event) => setExpanded(event.currentTarget.open), children: [
-    /* @__PURE__ */ jsx2("summary", { class: "scui-tool-head", children: summary }),
-    /* @__PURE__ */ jsxs("div", { class: "scui-tool-detail", children: [
-      /* @__PURE__ */ jsx2(ToolMetrics, { presentation }),
-      /* @__PURE__ */ jsx2(ToolStack, { tools: presentation.tools ?? [] }),
-      /* @__PURE__ */ jsx2(ToolPreview, { presentation, entry }),
-      presentation.fields.length ? /* @__PURE__ */ jsx2("dl", { class: "scui-tool-fields", children: presentation.fields.map((field) => /* @__PURE__ */ jsxs("div", { children: [
-        /* @__PURE__ */ jsx2("dt", { children: field.label }),
-        /* @__PURE__ */ jsx2("dd", { children: field.value })
+  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: expanded, onToggle: (event) => setExpanded(event.currentTarget.open), children: [
+    /* @__PURE__ */ jsx3("summary", { class: "scui-tool-head", children: summary }),
+    /* @__PURE__ */ jsxs2("div", { class: "scui-tool-detail", children: [
+      /* @__PURE__ */ jsx3(ToolMetrics, { presentation }),
+      /* @__PURE__ */ jsx3(ToolStack, { tools: presentation.tools ?? [] }),
+      /* @__PURE__ */ jsx3(ToolPreview, { presentation, entry }),
+      presentation.fields.length ? /* @__PURE__ */ jsx3("dl", { class: "scui-tool-fields", children: presentation.fields.map((field) => /* @__PURE__ */ jsxs2("div", { children: [
+        /* @__PURE__ */ jsx3("dt", { children: field.label }),
+        /* @__PURE__ */ jsx3("dd", { children: field.value })
       ] }, field.label)) }) : null,
-      /* @__PURE__ */ jsx2(ToolActions, { presentation, adapter }),
-      /* @__PURE__ */ jsx2(TechnicalDetails, { entry })
+      /* @__PURE__ */ jsx3(ToolActions, { presentation, adapter }),
+      /* @__PURE__ */ jsx3(TechnicalDetails, { entry })
     ] })
   ] });
 }
 function ActivityGroup({ entries, state, adapter }) {
-  if (entries.length === 1) return /* @__PURE__ */ jsx2("section", { class: "scui-activity", "data-single": "true", children: /* @__PURE__ */ jsx2(ToolRow, { entry: entries[0], workspace: state.workspace, adapter }) });
+  if (entries.length === 1) return /* @__PURE__ */ jsx3("section", { class: "scui-activity", "data-single": "true", children: /* @__PURE__ */ jsx3(ToolRow, { entry: entries[0], workspace: state.workspace, adapter }) });
   const active = entries.some((entry) => entry.status === "pending");
   const [open, setOpen] = useState(active);
   const id = useId();
-  useEffect(() => {
+  useEffect2(() => {
     if (active) setOpen(true);
   }, [active]);
-  return /* @__PURE__ */ jsxs("section", { class: "scui-activity", children: [
-    /* @__PURE__ */ jsxs("button", { class: "scui-activity-head", type: "button", "aria-expanded": open, "aria-controls": id, onClick: () => setOpen((value) => !value), children: [
-      /* @__PURE__ */ jsx2("span", { class: "scui-fold", "data-open": open, children: "\u203A" }),
-      /* @__PURE__ */ jsx2("strong", { children: activitySummary(entries) }),
-      /* @__PURE__ */ jsx2("span", { class: "scui-spacer" }),
-      /* @__PURE__ */ jsxs("small", { children: [
+  return /* @__PURE__ */ jsxs2("section", { class: "scui-activity", children: [
+    /* @__PURE__ */ jsxs2("button", { class: "scui-activity-head", type: "button", "aria-expanded": open, "aria-controls": id, onClick: () => setOpen((value) => !value), children: [
+      /* @__PURE__ */ jsx3("span", { class: "scui-fold", "data-open": open, children: /* @__PURE__ */ jsx3(UiIcon, { name: "chevron", size: 14 }) }),
+      /* @__PURE__ */ jsx3("strong", { children: activitySummary(entries) }),
+      /* @__PURE__ */ jsx3("span", { class: "scui-spacer" }),
+      /* @__PURE__ */ jsxs2("small", { children: [
         entries.filter((entry) => entry.status !== "pending").length,
         "/",
         entries.length
       ] })
     ] }),
-    open ? /* @__PURE__ */ jsx2("div", { id, children: entries.map((entry) => /* @__PURE__ */ jsx2(ToolRow, { entry, workspace: state.workspace, adapter }, entry.id)) }) : null
+    open ? /* @__PURE__ */ jsx3("div", { id, children: entries.map((entry) => /* @__PURE__ */ jsx3(ToolRow, { entry, workspace: state.workspace, adapter }, entry.id)) }) : null
   ] });
 }
 function TaskPlan({ plan }) {
   if (!plan.items.length) return null;
   const complete = plan.items.filter((item) => item.status === "completed" || item.status === "cancelled").length;
-  return /* @__PURE__ */ jsxs("details", { class: "scui-plan", children: [
-    /* @__PURE__ */ jsxs("summary", { children: [
-      /* @__PURE__ */ jsx2("span", { children: "Plan" }),
-      /* @__PURE__ */ jsxs("small", { children: [
+  return /* @__PURE__ */ jsxs2("details", { class: "scui-plan", children: [
+    /* @__PURE__ */ jsxs2("summary", { children: [
+      /* @__PURE__ */ jsx3("span", { children: "Plan" }),
+      /* @__PURE__ */ jsxs2("small", { children: [
         complete,
         "/",
         plan.items.length
       ] })
     ] }),
-    /* @__PURE__ */ jsx2("ol", { tabIndex: 0, "aria-label": "Task plan steps", children: plan.items.map((item) => /* @__PURE__ */ jsxs("li", { "data-status": item.status, children: [
-      /* @__PURE__ */ jsx2("i", { "aria-hidden": "true" }),
+    /* @__PURE__ */ jsx3("ol", { tabIndex: 0, "aria-label": "Task plan steps", children: plan.items.map((item) => /* @__PURE__ */ jsxs2("li", { "data-status": item.status, children: [
+      /* @__PURE__ */ jsx3("i", { "aria-hidden": "true" }),
       " ",
-      /* @__PURE__ */ jsx2("span", { children: item.title })
+      /* @__PURE__ */ jsx3("span", { children: item.title })
     ] }, item.id)) })
   ] });
 }
 function SessionDetails({ semantics }) {
   if (!semantics.fidelity && !semantics.residueCount && !semantics.parseErrors && !semantics.subagents.length) return null;
-  return /* @__PURE__ */ jsxs("details", { class: "scui-details", children: [
-    /* @__PURE__ */ jsx2("summary", { children: "Session details" }),
-    /* @__PURE__ */ jsxs("div", { children: [
-      semantics.fidelity ? /* @__PURE__ */ jsxs("p", { children: [
-        /* @__PURE__ */ jsx2("strong", { children: "Fidelity" }),
-        /* @__PURE__ */ jsx2("span", { children: semantics.fidelity.replaceAll("_", " ") })
+  return /* @__PURE__ */ jsxs2("details", { class: "scui-details", children: [
+    /* @__PURE__ */ jsx3("summary", { children: "Session details" }),
+    /* @__PURE__ */ jsxs2("div", { children: [
+      semantics.fidelity ? /* @__PURE__ */ jsxs2("p", { children: [
+        /* @__PURE__ */ jsx3("strong", { children: "Fidelity" }),
+        /* @__PURE__ */ jsx3("span", { children: semantics.fidelity.replaceAll("_", " ") })
       ] }) : null,
-      /* @__PURE__ */ jsxs("p", { children: [
-        /* @__PURE__ */ jsx2("strong", { children: "Native records" }),
-        /* @__PURE__ */ jsx2("span", { children: semantics.rawRecords })
+      /* @__PURE__ */ jsxs2("p", { children: [
+        /* @__PURE__ */ jsx3("strong", { children: "Native records" }),
+        /* @__PURE__ */ jsx3("span", { children: semantics.rawRecords })
       ] }),
-      semantics.residueCount ? /* @__PURE__ */ jsxs("p", { children: [
-        /* @__PURE__ */ jsx2("strong", { children: "Residue" }),
-        /* @__PURE__ */ jsxs("span", { children: [
+      semantics.residueCount ? /* @__PURE__ */ jsxs2("p", { children: [
+        /* @__PURE__ */ jsx3("strong", { children: "Residue" }),
+        /* @__PURE__ */ jsxs2("span", { children: [
           semantics.residueCount,
           " retained"
         ] })
       ] }) : null,
-      semantics.parseErrors ? /* @__PURE__ */ jsxs("p", { children: [
-        /* @__PURE__ */ jsx2("strong", { children: "Parse diagnostics" }),
-        /* @__PURE__ */ jsx2("span", { children: semantics.parseErrors })
+      semantics.parseErrors ? /* @__PURE__ */ jsxs2("p", { children: [
+        /* @__PURE__ */ jsx3("strong", { children: "Parse diagnostics" }),
+        /* @__PURE__ */ jsx3("span", { children: semantics.parseErrors })
       ] }) : null,
-      semantics.subagents.map((agent) => /* @__PURE__ */ jsxs("p", { children: [
-        /* @__PURE__ */ jsxs("strong", { children: [
+      semantics.subagents.map((agent) => /* @__PURE__ */ jsxs2("p", { children: [
+        /* @__PURE__ */ jsxs2("strong", { children: [
           agent.source,
           " subagent"
         ] }),
-        /* @__PURE__ */ jsxs("span", { children: [
+        /* @__PURE__ */ jsxs2("span", { children: [
           agent.messages,
           " messages \xB7 ",
           agent.fidelity.replaceAll("_", " ")
@@ -688,13 +833,29 @@ function SessionDetails({ semantics }) {
   ] });
 }
 var conversationMemory = /* @__PURE__ */ new Map();
-function Conversation({ state, adapter, components = {}, slots = {}, memoryKey = state.attached?.key || `${state.harness}:${state.workspace}`, pending = null }) {
-  const scroller = useRef(null);
+function ConversationAnnouncements({ state }) {
+  const previousBusy = useRef2(state.busy);
+  const [announcement, setAnnouncement] = useState("");
+  useEffect2(() => {
+    if (previousBusy.current && !state.busy && !state.error) {
+      setAnnouncement(`${harnessDisplayName(state.harness) || "Coding agent"} finished working`);
+    }
+    previousBusy.current = state.busy;
+  }, [state.busy, state.error, state.harness]);
+  return /* @__PURE__ */ jsx3("span", { class: "scui-sr-only", role: "status", "aria-live": "polite", "aria-atomic": "true", children: announcement });
+}
+function Conversation({ state, adapter, components = {}, slots = {}, memoryKey = state.attached?.key || `${state.harness}:${state.workspace}`, pending = null, unreadAfterMessages = null }) {
+  const scroller = useRef2(null);
   const remembered = conversationMemory.get(memoryKey) ?? { top: null, atBottom: true };
   const [atBottom, setAtBottom] = useState(remembered.atBottom);
-  const earlierAnchor = useRef(null);
-  const restored = useRef(false);
+  const earlierAnchor = useRef2(null);
+  const restored = useRef2(false);
   const blocks = groupConversation(state.transcript);
+  const unreadBoundary = useRef2(Number.isSafeInteger(unreadAfterMessages) && unreadAfterMessages >= 0 ? unreadAfterMessages : null);
+  const unreadBlock = unreadBoundary.current === null ? -1 : blocks.findIndex((block) => {
+    const entries = block.kind === "activity" ? block.entries : [block.entry];
+    return entries.some((entry) => Number.isSafeInteger(entry.messageIndex) && entry.messageIndex > unreadBoundary.current);
+  });
   const Entry = components.TranscriptEntry ?? TranscriptEntry;
   const Group = components.ActivityGroup ?? ActivityGroup;
   const Plan = components.TaskPlan ?? TaskPlan;
@@ -725,48 +886,55 @@ function Conversation({ state, adapter, components = {}, slots = {}, memoryKey =
       else pin();
     } else if (atBottom) pin();
   }, [memoryKey, state.transcript, state.busy, state.operation, pendingMessage?.text, pendingMessage?.status]);
-  return /* @__PURE__ */ jsxs("div", { class: "scui-conversation-wrap", children: [
-    /* @__PURE__ */ jsx2("div", { class: "scui-conversation", ref: scroller, tabIndex: 0, "aria-label": "Conversation", onScroll: (event) => {
+  return /* @__PURE__ */ jsxs2("div", { class: "scui-conversation-wrap", children: [
+    /* @__PURE__ */ jsx3(ConversationAnnouncements, { state }),
+    /* @__PURE__ */ jsx3("div", { class: "scui-conversation", ref: scroller, tabIndex: 0, "aria-label": "Conversation", onScroll: (event) => {
       const element = event.currentTarget;
       const bottom = element.scrollHeight - element.scrollTop - element.clientHeight <= 64;
       setAtBottom(bottom);
       remember({ top: element.scrollTop, atBottom: bottom });
-    }, children: /* @__PURE__ */ jsxs("div", { children: [
-      Before ? /* @__PURE__ */ jsx2(Before, { state, adapter, value: null }) : null,
-      /* @__PURE__ */ jsx2(Plan, { plan: state.taskPlan, value: state.taskPlan, state, adapter }),
-      /* @__PURE__ */ jsx2(SessionDetails, { semantics: state.semantics }),
-      state.history.hasEarlier ? /* @__PURE__ */ jsx2("button", { class: "scui-load", type: "button", disabled: Boolean(state.operation), onClick: () => {
+    }, children: /* @__PURE__ */ jsxs2("div", { children: [
+      Before ? /* @__PURE__ */ jsx3(Before, { state, adapter, value: null }) : null,
+      /* @__PURE__ */ jsx3(Plan, { plan: state.taskPlan, value: state.taskPlan, state, adapter }),
+      /* @__PURE__ */ jsx3(SessionDetails, { semantics: state.semantics }),
+      state.history.hasEarlier ? /* @__PURE__ */ jsx3("button", { class: "scui-load", type: "button", disabled: Boolean(state.operation), onClick: () => {
         const element = scroller.current;
         if (element) earlierAnchor.current = { height: element.scrollHeight, top: element.scrollTop, entries: state.transcript.length };
         setAtBottom(false);
         adapter.onIntent({ action: "loadEarlier" });
       }, children: "Load earlier messages" }) : null,
-      !blocks.length && state.startup !== "ready" ? /* @__PURE__ */ jsx2(LoadingStatus, { state }) : null,
-      !blocks.length && state.startup === "ready" ? Empty ? /* @__PURE__ */ jsx2(Empty, { state, adapter, value: null }) : /* @__PURE__ */ jsx2("div", { class: "scui-empty", children: state.error ?? (state.harness ? `${harnessDisplayName(state.harness)} is listening. Say something.` : "No transcript yet.") }) : null,
-      blocks.map((block) => block.kind === "activity" ? /* @__PURE__ */ jsx2(Group, { value: block.entries, entries: block.entries, state, adapter }, block.id) : /* @__PURE__ */ jsx2(Entry, { value: block.entry, entry: block.entry, state, adapter }, block.id)),
-      pendingMessage ? /* @__PURE__ */ jsxs("article", { class: "scui-message scui-pending", "data-role": "user", "data-status": pendingMessage.status, children: [
-        /* @__PURE__ */ jsx2(Markdown, { value: pendingMessage.text }),
-        /* @__PURE__ */ jsxs("footer", { children: [
-          /* @__PURE__ */ jsx2("small", { children: pendingMessage.status === "failed" ? "Not sent" : "Sending\u2026" }),
-          pendingMessage.status === "failed" ? /* @__PURE__ */ jsxs("span", { children: [
-            /* @__PURE__ */ jsx2("button", { type: "button", onClick: pendingMessage.onRetry, children: "Retry" }),
-            /* @__PURE__ */ jsx2("button", { type: "button", onClick: pendingMessage.onEdit, children: "Edit" })
+      !blocks.length && state.startup !== "ready" ? /* @__PURE__ */ jsx3(LoadingStatus, { state }) : null,
+      !blocks.length && state.startup === "ready" ? Empty ? /* @__PURE__ */ jsx3(Empty, { state, adapter, value: null }) : /* @__PURE__ */ jsx3("div", { class: "scui-empty", children: state.error ?? (state.harness ? `${harnessDisplayName(state.harness)} is listening. Say something.` : "No transcript yet.") }) : null,
+      blocks.map((block, index) => /* @__PURE__ */ jsxs2(Fragment2, { children: [
+        index === unreadBlock ? /* @__PURE__ */ jsx3("div", { class: "scui-unread-divider", role: "separator", "aria-label": "New messages", children: /* @__PURE__ */ jsx3("span", { children: "New" }) }) : null,
+        block.kind === "activity" ? /* @__PURE__ */ jsx3(Group, { value: block.entries, entries: block.entries, state, adapter }) : /* @__PURE__ */ jsx3(Entry, { value: block.entry, entry: block.entry, state, adapter })
+      ] }, block.id)),
+      pendingMessage ? /* @__PURE__ */ jsxs2("article", { class: "scui-message scui-pending", "data-role": "user", "data-status": pendingMessage.status, "aria-label": "Your pending message", children: [
+        /* @__PURE__ */ jsx3(Markdown, { value: pendingMessage.text, copyText: adapter?.copyText }),
+        /* @__PURE__ */ jsxs2("footer", { children: [
+          /* @__PURE__ */ jsx3("small", { children: pendingMessage.status === "failed" ? "Not sent" : "Sending\u2026" }),
+          pendingMessage.status === "failed" ? /* @__PURE__ */ jsxs2("span", { children: [
+            /* @__PURE__ */ jsx3("button", { type: "button", onClick: pendingMessage.onRetry, children: "Retry" }),
+            /* @__PURE__ */ jsx3("button", { type: "button", onClick: pendingMessage.onEdit, children: "Edit" })
           ] }) : null
         ] })
       ] }) : null,
-      state.busy ? /* @__PURE__ */ jsxs("div", { class: "scui-working", role: "status", children: [
-        /* @__PURE__ */ jsx2("span", { "aria-hidden": "true", children: "\u2726" }),
-        /* @__PURE__ */ jsx2("i", {}),
-        /* @__PURE__ */ jsx2("i", {}),
-        /* @__PURE__ */ jsx2("i", {}),
-        /* @__PURE__ */ jsxs("small", { children: [
+      state.busy ? /* @__PURE__ */ jsxs2("div", { class: "scui-working", role: "status", children: [
+        /* @__PURE__ */ jsx3("span", { "aria-hidden": "true", children: "\u2726" }),
+        /* @__PURE__ */ jsx3("i", {}),
+        /* @__PURE__ */ jsx3("i", {}),
+        /* @__PURE__ */ jsx3("i", {}),
+        /* @__PURE__ */ jsxs2("small", { children: [
           harnessDisplayName(state.harness),
           " is working"
         ] })
       ] }) : null,
-      After ? /* @__PURE__ */ jsx2(After, { state, adapter, value: null }) : null
+      After ? /* @__PURE__ */ jsx3(After, { state, adapter, value: null }) : null
     ] }) }),
-    !atBottom ? /* @__PURE__ */ jsx2("button", { class: "scui-latest", type: "button", onClick: pin, children: "\u2193 Latest" }) : null
+    !atBottom ? /* @__PURE__ */ jsxs2("button", { class: "scui-latest", type: "button", onClick: pin, children: [
+      /* @__PURE__ */ jsx3(UiIcon, { name: "down", size: 13 }),
+      " Latest"
+    ] }) : null
   ] });
 }
 export {