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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@volter-ai-dev/supercode-ui",
-  "version": "0.1.12",
+  "version": "0.1.14",
   "type": "module",
   "description": "Composable default UI kit for Supercode-powered coding-agent experiences",
   "exports": {
@@ -24,6 +24,10 @@
       "types": "./logo.d.ts",
       "import": "./logo.mjs"
     },
+    "./preact/icon": {
+      "types": "./icon.d.ts",
+      "import": "./icon.mjs"
+    },
     "./preact/conversation": {
       "types": "./conversation.d.ts",
       "import": "./conversation.mjs"
@@ -56,6 +60,8 @@
     "components.d.ts",
     "logo.mjs",
     "logo.d.ts",
+    "icon.mjs",
+    "icon.d.ts",
     "conversation.mjs",
     "conversation.d.ts",
     "sessions.mjs",
@@ -72,7 +78,7 @@
     "README.md"
   ],
   "scripts": {
-    "build": "esbuild src/components.jsx src/embed.jsx src/logo.jsx src/conversation.jsx src/sessions.jsx src/composer.jsx src/messenger.jsx --bundle --format=esm --platform=browser --jsx=automatic --jsx-import-source=preact --external:preact --external:preact/* --external:markdown-it --outdir=. --out-extension:.js=.mjs",
+    "build": "esbuild src/components.jsx src/embed.jsx src/logo.jsx src/icon.jsx src/conversation.jsx src/sessions.jsx src/composer.jsx src/messenger.jsx --bundle --format=esm --platform=browser --jsx=automatic --jsx-import-source=preact --external:preact --external:preact/* --external:markdown-it --outdir=. --out-extension:.js=.mjs",
     "build:fixture": "esbuild test/browser-entry.jsx --bundle --format=esm --platform=browser --jsx=automatic --jsx-import-source=preact --outfile=test/browser-bundle.mjs",
     "storybook": "npm run build && storybook dev -p 6006",
     "build:storybook": "npm run build && storybook build",

package/sessions.mjs

@@ -1,5 +1,5 @@
 // src/sessions.jsx
-import { useState as useState2 } from "preact/hooks";
+import { useEffect as useEffect4, useLayoutEffect as useLayoutEffect2, useRef as useRef3, useState as useState2 } from "preact/hooks";
 
 // core.mjs
 var HARNESS_NAMES = Object.freeze({
@@ -82,13 +82,52 @@ function filterSessions(rows, query) {
 }
 
 // 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";
 
 // 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");
@@ -96,8 +135,59 @@ markdown.renderer.rules.link_open = (tokens, index, options, env, self) => {
   return defaultLinkOpen ? defaultLinkOpen(tokens, index, options, env, self) : self.renderToken(tokens, index, options);
 };
 
-// src/conversation.jsx
+// src/memory.js
+var MEMORY_LIMIT = 100;
+function boundedSet(map, key, value) {
+  map.delete(key);
+  map.set(key, value);
+  while (map.size > MEMORY_LIMIT) map.delete(map.keys().next().value);
+}
+
+// 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],
@@ -105,19 +195,19 @@ 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)) })
   ] });
 }
 
 // src/logo.jsx
-import { useEffect as useEffect2 } from "preact/hooks";
-import { jsx as jsx3, jsxs as jsxs2 } from "preact/jsx-runtime";
+import { useEffect as useEffect3 } from "preact/hooks";
+import { jsx as jsx4, jsxs as jsxs3 } from "preact/jsx-runtime";
 var LOGOS = {
   "claude-code": {
     viewBox: "-1 3.5 26 18",
@@ -164,62 +254,90 @@ var LOGOS = {
 };
 function HarnessLogo({ id, activity, size = 28, onMissingLogo }) {
   const logo = LOGOS[id];
-  useEffect2(() => {
+  useEffect3(() => {
     if (!logo) onMissingLogo?.(id);
   }, [id, logo, onMissingLogo]);
   if (!logo) return null;
-  return /* @__PURE__ */ jsxs2("span", { class: "scui-logo", "data-harness": id, "data-activity": activity, style: `--scui-logo-size:${size}px`, "aria-hidden": "true", children: [
-    /* @__PURE__ */ jsx3("svg", { viewBox: logo.viewBox, preserveAspectRatio: "xMidYMid meet", focusable: "false", children: logo.paths.map(([Tag, props], index) => /* @__PURE__ */ jsx3(Tag, { ...props }, index)) }),
-    activity && activity !== "idle" ? /* @__PURE__ */ jsx3("i", {}) : null
+  return /* @__PURE__ */ jsxs3("span", { class: "scui-logo", "data-harness": id, "data-activity": activity, style: `--scui-logo-size:${size}px`, "aria-hidden": "true", children: [
+    /* @__PURE__ */ jsx4("svg", { viewBox: logo.viewBox, preserveAspectRatio: "xMidYMid meet", focusable: "false", children: logo.paths.map(([Tag, props], index) => /* @__PURE__ */ jsx4(Tag, { ...props }, index)) }),
+    activity && activity !== "idle" ? /* @__PURE__ */ jsx4("i", {}) : null
   ] });
 }
 
 // src/sessions.jsx
-import { jsx as jsx4, jsxs as jsxs3 } from "preact/jsx-runtime";
+import { jsx as jsx5, jsxs as jsxs4 } from "preact/jsx-runtime";
+var sessionListMemory = /* @__PURE__ */ new Map();
 function SessionRow({ row, state, onOpen }) {
   const activity = sessionActivity(state, row);
   const preview = state.attention.find((item) => item.key === row.key)?.preview;
-  return /* @__PURE__ */ jsxs3("button", { class: "scui-session", "data-active": row.active, "data-activity": activity, type: "button", onClick: () => onOpen(row), children: [
-    /* @__PURE__ */ jsx4(HarnessLogo, { id: row.harness, activity, size: 34 }),
-    /* @__PURE__ */ jsxs3("span", { class: "scui-session-copy", children: [
-      /* @__PURE__ */ jsxs3("span", { children: [
-        /* @__PURE__ */ jsx4("strong", { children: sessionDisplayName(row) }),
-        /* @__PURE__ */ jsx4("small", { children: row.age })
-      ] }),
-      /* @__PURE__ */ jsxs3("span", { children: [
-        /* @__PURE__ */ jsx4("b", { children: harnessDisplayName(row.harness) }),
-        /* @__PURE__ */ jsx4("small", { children: preview || row.cwd || row.name })
+  const title = sessionDisplayName(row);
+  const detail = preview || (row.name && row.name !== title ? row.name : row.cwd);
+  return /* @__PURE__ */ jsxs4("button", { class: "scui-session", "data-active": row.active, "data-activity": activity, "data-session-key": row.key, type: "button", "aria-label": `${title} \xB7 ${harnessDisplayName(row.harness)}${row.age ? ` \xB7 ${row.age}` : ""}`, "aria-current": row.active ? "true" : void 0, onClick: () => onOpen(row), children: [
+    /* @__PURE__ */ jsx5(HarnessLogo, { id: row.harness, activity, size: 34 }),
+    /* @__PURE__ */ jsxs4("span", { class: "scui-session-copy", children: [
+      /* @__PURE__ */ jsxs4("span", { children: [
+        /* @__PURE__ */ jsx5("strong", { children: title }),
+        /* @__PURE__ */ jsx5("small", { children: row.age })
       ] }),
-      state.attachError?.key === row.key ? /* @__PURE__ */ jsx4("em", { children: state.attachError.message }) : null
+      detail ? /* @__PURE__ */ jsx5("span", { children: /* @__PURE__ */ jsx5("small", { title: row.cwd, children: detail }) }) : null,
+      state.attachError?.key === row.key ? /* @__PURE__ */ jsx5("em", { children: state.attachError.message }) : null
     ] })
   ] });
 }
-function SessionList({ state, adapter, onOpen, onNew, onClose, components = {}, labels = DEFAULT_LABELS }) {
-  const [query, setQuery] = useState2("");
+function SessionList({ state, adapter, onOpen, onNew, onClose, components = {}, labels = DEFAULT_LABELS, focusKey = null, memoryKey = state.workspace || "@default" }) {
+  const remembered = sessionListMemory.get(memoryKey) ?? { query: "", top: 0 };
+  const [query, setQuery] = useState2(remembered.query);
+  const [loadingMore, setLoadingMore] = useState2(false);
+  const root = useRef3(null);
+  const rowScroller = useRef3(null);
   const rows = filterSessions(state.sessions, query);
   const Row = components.SessionRow ?? SessionRow;
-  return /* @__PURE__ */ jsxs3("section", { class: "scui-list", children: [
-    /* @__PURE__ */ jsxs3("header", { class: "scui-head", children: [
-      /* @__PURE__ */ jsxs3("span", { class: "scui-head-copy", children: [
-        /* @__PURE__ */ jsx4("strong", { children: labels.chats }),
-        /* @__PURE__ */ jsxs3("small", { children: [
+  useLayoutEffect2(() => {
+    if (rowScroller.current) rowScroller.current.scrollTop = remembered.top;
+  }, [memoryKey]);
+  useEffect4(() => {
+    if (!focusKey || !root.current) return;
+    const target = focusKey === "@new" ? root.current.querySelector('[data-list-focus="new"]') : [...root.current.querySelectorAll("[data-session-key]")].find((element) => element.dataset.sessionKey === focusKey);
+    (target ?? root.current.querySelector("input,button"))?.focus({ preventScroll: true });
+  }, [focusKey, rows.length]);
+  useEffect4(() => {
+    if (loadingMore) setLoadingMore(false);
+  }, [state.error, state.history.hasMoreSessions, state.sessions.length]);
+  const loadMore = () => {
+    if (loadingMore) return;
+    setLoadingMore(true);
+    const result = adapter.onIntent({ action: "loadSessions" });
+    if (result && typeof result.then === "function") {
+      Promise.resolve(result).then(() => setLoadingMore(false), () => setLoadingMore(false));
+    }
+  };
+  return /* @__PURE__ */ jsxs4("section", { class: "scui-list", ref: root, children: [
+    /* @__PURE__ */ jsxs4("header", { class: "scui-head", children: [
+      /* @__PURE__ */ jsxs4("span", { class: "scui-head-copy", children: [
+        /* @__PURE__ */ jsx5("strong", { children: labels.chats }),
+        /* @__PURE__ */ jsxs4("small", { children: [
           state.sessions.length,
           " recent conversations"
         ] })
       ] }),
-      /* @__PURE__ */ jsx4("button", { type: "button", "aria-label": labels.newChat, disabled: !state.harnesses.some((item) => item.startable), onClick: onNew, children: "\uFF0B" }),
-      onClose ? /* @__PURE__ */ jsx4("button", { type: "button", "aria-label": "Close", onClick: onClose, children: "\xD7" }) : null
+      /* @__PURE__ */ jsx5("button", { type: "button", "data-list-focus": "new", "aria-label": labels.newChat, disabled: !state.harnesses.some((item) => item.startable), onClick: onNew, children: /* @__PURE__ */ jsx5(UiIcon, { name: "plus", size: 18 }) }),
+      onClose ? /* @__PURE__ */ jsx5("button", { type: "button", "aria-label": "Close", onClick: onClose, children: /* @__PURE__ */ jsx5(UiIcon, { name: "close", size: 18 }) }) : null
     ] }),
-    state.startup !== "ready" ? /* @__PURE__ */ jsx4(LoadingStatus, { state, compact: rows.length > 0 }) : null,
-    state.sessions.length > 4 ? /* @__PURE__ */ jsxs3("label", { class: "scui-search", children: [
-      /* @__PURE__ */ jsx4("span", { "aria-hidden": "true", children: "\u2315" }),
-      /* @__PURE__ */ jsx4("input", { type: "search", "aria-label": labels.searchChats, placeholder: labels.searchChats, value: query, onInput: (event) => setQuery(event.currentTarget.value) }),
-      /* @__PURE__ */ jsx4("small", { children: rows.length })
+    state.startup !== "ready" ? /* @__PURE__ */ jsx5(LoadingStatus, { state, compact: rows.length > 0 }) : null,
+    state.sessions.length > 4 ? /* @__PURE__ */ jsxs4("label", { class: "scui-search", children: [
+      /* @__PURE__ */ jsx5(UiIcon, { name: "search", size: 15 }),
+      /* @__PURE__ */ jsx5("input", { type: "search", "aria-label": labels.searchChats, placeholder: labels.searchChats, value: query, onInput: (event) => {
+        const value = event.currentTarget.value;
+        setQuery(value);
+        boundedSet(sessionListMemory, memoryKey, { query: value, top: 0 });
+        if (rowScroller.current) rowScroller.current.scrollTop = 0;
+      } }),
+      /* @__PURE__ */ jsx5("small", { children: rows.length })
     ] }) : null,
-    /* @__PURE__ */ jsxs3("div", { class: "scui-session-rows", children: [
-      !rows.length && state.startup === "ready" ? /* @__PURE__ */ jsx4("div", { class: "scui-empty", children: query ? "No chats match your search." : state.error ?? "No coding chats found." }) : null,
-      rows.map((row) => /* @__PURE__ */ jsx4(Row, { value: row, row, state, adapter, onOpen }, row.key)),
-      state.history.hasMoreSessions ? /* @__PURE__ */ jsx4("button", { class: "scui-load", type: "button", onClick: () => adapter.onIntent({ action: "loadSessions" }), children: "Load older chats" }) : null
+    /* @__PURE__ */ jsxs4("div", { class: "scui-session-rows", ref: rowScroller, onScroll: (event) => boundedSet(sessionListMemory, memoryKey, { query, top: event.currentTarget.scrollTop }), children: [
+      !rows.length && state.startup === "ready" ? /* @__PURE__ */ jsx5("div", { class: "scui-empty", children: query ? "No chats match your search." : state.error ?? "No coding chats found." }) : null,
+      rows.map((row) => /* @__PURE__ */ jsx5(Row, { value: row, row, state, adapter, onOpen }, row.key)),
+      state.history.hasMoreSessions ? /* @__PURE__ */ jsx5("button", { class: "scui-load", type: "button", disabled: loadingMore, onClick: loadMore, children: loadingMore ? "Loading older chats\u2026" : "Load older chats" }) : null
     ] })
   ] });
 }

package/styles.css

@@ -12,7 +12,7 @@
   --scui-positive: #22863a;
   --scui-warning: #b26a00;
   --scui-danger: #b4232e;
-  --scui-radius: 14px;
+  --scui-radius: 10px;
   --scui-font: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
   box-sizing: border-box;
   display: flex;
@@ -46,22 +46,23 @@
 
 :where(.scui-root *), :where(.scui-root *::before), :where(.scui-root *::after) { box-sizing: border-box }
 :where(.scui-root button, .scui-root input, .scui-root textarea, .scui-root select) { font: inherit }
+.scui-icon { display:block; flex:none; width:var(--scui-icon-size); height:var(--scui-icon-size) }
 :where(.scui-root button) { color: inherit }
 :where(.scui-list button, .scui-chat button, .scui-request button, .scui-activity button, .scui-compose button, .scui-continuation button) { color: inherit }
 :where(.scui-root button:focus-visible, .scui-root input:focus-visible, .scui-root textarea:focus-visible, .scui-root select:focus-visible, .scui-root [tabindex]:focus-visible) { outline: 2px solid var(--scui-accent); outline-offset: -2px }
+.scui-sr-only { position:absolute; width:1px; height:1px; padding:0; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0 }
 
 .scui-list,.scui-chat { display:flex; flex:1; min-width:0; min-height:0; flex-direction:column }
 .scui-head { display:flex; flex:none; align-items:center; gap:8px; min-height:49px; padding:7px 8px 7px 12px; border-bottom:1px solid var(--scui-border); background:var(--scui-bg-raised) }
 .scui-head > .scui-head-copy { display:grid; flex:1; min-width:0 }
 .scui-head strong { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:13px }
 .scui-head small { overflow:hidden; color:var(--scui-muted); font-size:10.5px; text-overflow:ellipsis; white-space:nowrap }
-.scui-head > button,.scui-menu > summary { display:grid; place-items:center; width:30px; height:30px; padding:0; border:0; border-radius:8px; background:transparent; cursor:pointer; font-size:18px; list-style:none }
-.scui-head > button:hover,.scui-menu > summary:hover { background:var(--scui-fill) }
+.scui-head > button,.scui-menu-trigger { display:grid; place-items:center; width:30px; height:30px; padding:0; border:0; border-radius:8px; background:transparent; color:inherit; cursor:pointer; font-size:18px }
+.scui-head > button:hover,.scui-menu-trigger:hover,.scui-menu-trigger[aria-expanded="true"] { background:var(--scui-fill) }
 .scui-menu { position:relative }
-.scui-menu > summary::-webkit-details-marker { display:none }
-.scui-menu > div { position:absolute; z-index:20; top:36px; right:0; display:grid; width:250px; max-height:300px; padding:5px; overflow:auto; border:1px solid var(--scui-border-strong); border-radius:10px; background:var(--scui-bg); box-shadow:0 10px 28px rgba(0,0,0,.22) }
-.scui-menu button { padding:8px; border:0; border-radius:6px; background:transparent; text-align:left; cursor:pointer }
-.scui-menu button:hover { background:var(--scui-fill) }
+.scui-menu-panel { position:absolute; z-index:20; top:36px; right:0; display:grid; width:250px; max-height:300px; padding:5px; overflow:auto; border:1px solid var(--scui-border-strong); border-radius:10px; background:var(--scui-bg); box-shadow:0 10px 28px rgba(0,0,0,.22) }
+.scui-menu-panel section { display:grid; gap:1px }.scui-menu-panel section + section { margin-top:4px; padding-top:4px; border-top:1px solid var(--scui-border) }.scui-menu-panel section > strong { padding:4px 8px 2px; color:var(--scui-muted); font-size:9px; font-weight:650; letter-spacing:.04em; text-transform:uppercase }
+.scui-menu-panel button { padding:7px 8px; border:0; border-radius:6px; background:transparent; color:inherit; text-align:left; cursor:pointer }.scui-menu-panel button:hover,.scui-menu-panel button:focus-visible { outline:none; background:var(--scui-fill) }.scui-menu-panel button:disabled { opacity:.45; cursor:default }
 
 .scui-logo { position:relative; display:inline-grid; place-items:center; box-sizing:border-box; width:var(--scui-logo-size); height:var(--scui-logo-size); flex:none; border:1px solid var(--scui-border); border-radius:50%; background:#111; color:#f7f7f5 }
 .scui-logo svg { display:block; width:70%; height:70%; overflow:visible; fill:currentColor }
@@ -91,16 +92,15 @@
 .scui-search { display:flex; flex:none; align-items:center; gap:7px; margin:8px; padding:6px 8px; border:1px solid var(--scui-border); border-radius:8px; background:var(--scui-bg-raised); color:var(--scui-muted) }
 .scui-search input { flex:1; min-width:0; border:0; outline:0; background:transparent; color:var(--scui-fg) }
 .scui-session-rows { flex:1; min-height:0; overflow:auto; padding:0 6px 8px }
-.scui-session { display:flex; align-items:center; gap:9px; width:100%; padding:7px 8px; border:0; border-radius:9px; background:transparent; text-align:left; cursor:pointer }
+.scui-session { display:flex; align-items:center; gap:9px; width:100%; padding:7px 8px; border:0; border-radius:7px; background:transparent; text-align:left; cursor:pointer }
 .scui-session:hover,.scui-session[data-active="true"] { background:var(--scui-fill) }
 .scui-session-copy { display:grid; flex:1; min-width:0; gap:2px }
 .scui-session-copy > span { display:flex; align-items:baseline; gap:7px; min-width:0 }
 .scui-session-copy strong,.scui-session-copy span > small { overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
 .scui-session-copy strong { flex:1; font-size:12.5px }.scui-session-copy span:first-child > small { flex:none; color:var(--scui-muted); font-size:10px }
-.scui-session-copy b { flex:none; padding:1px 5px; border-radius:4px; background:var(--scui-bg-raised); color:var(--scui-muted); font-size:9px; text-transform:uppercase }
-.scui-session-copy span:last-child > small { color:var(--scui-muted); font-size:10.5px }
+.scui-session-copy span:last-child > small { min-width:0; overflow:hidden; color:var(--scui-muted); font-size:10.5px; text-overflow:ellipsis; white-space:nowrap }
 .scui-session-copy em { overflow:hidden; color:var(--scui-danger); font-size:10px; font-style:normal; text-overflow:ellipsis; white-space:nowrap }
-.scui-load { display:block; margin:7px auto; padding:5px 10px; border:1px solid var(--scui-border); border-radius:8px; background:var(--scui-bg-raised); color:var(--scui-muted); cursor:pointer }
+.scui-load { display:block; margin:7px auto; padding:5px 10px; border:1px solid var(--scui-border); border-radius:8px; background:var(--scui-bg-raised); color:var(--scui-muted); cursor:pointer }.scui-load:disabled { opacity:.65; cursor:default }
 
 .scui-operation,.scui-error,.scui-receipt { display:flex; flex:none; align-items:center; gap:8px; min-height:32px; padding:6px 10px; border-bottom:1px solid var(--scui-border); background:var(--scui-bg-raised); font-size:10.5px }
 .scui-operation i { width:11px; height:11px; border:2px solid var(--scui-border); border-top-color:var(--scui-accent); border-radius:50%; animation:scui-spin .8s linear infinite }
@@ -112,15 +112,26 @@
 .scui-conversation { flex:1; min-width:0; overflow:auto; overscroll-behavior:contain; padding:12px 16px 18px }
 .scui-conversation > div { display:flex; flex-direction:column; gap:10px }
 .scui-empty { margin:auto; padding:20px; color:var(--scui-muted); text-align:center }
-.scui-latest { position:absolute; z-index:5; right:12px; bottom:8px; padding:5px 9px; border:1px solid var(--scui-border-strong); border-radius:999px; background:var(--scui-bg-raised); box-shadow:0 2px 8px rgba(0,0,0,.2); cursor:pointer }
-.scui-message { position:relative; overflow-wrap:anywhere }
+.scui-latest { position:absolute; z-index:5; right:12px; bottom:8px; display:flex; align-items:center; gap:3px; padding:5px 9px; border:1px solid var(--scui-border-strong); border-radius:999px; background:var(--scui-bg-raised); box-shadow:0 2px 8px rgba(0,0,0,.2); cursor:pointer }
+.scui-message { position:relative; min-width:0; max-width:100%; overflow-wrap:anywhere }
 .scui-message[data-role="user"] { align-self:flex-end; max-width:90%; padding:8px 9px; border:1px solid var(--scui-border); border-radius:10px; background:var(--scui-fill) }
+.scui-message-meta { position:absolute; z-index:2; top:-10px; right:0; display:flex; align-items:center; gap:3px; min-height:20px; padding:1px 3px 1px 6px; border:1px solid var(--scui-border); border-radius:7px; background:var(--scui-bg-raised); box-shadow:0 2px 7px rgba(0,0,0,.14); color:var(--scui-muted); opacity:0; pointer-events:none; transition:opacity 100ms }
+.scui-message:hover > .scui-message-meta,.scui-message:focus-within > .scui-message-meta { opacity:1; pointer-events:auto }.scui-message-meta time { font:9px ui-monospace,SFMono-Regular,Menlo,monospace; white-space:nowrap }.scui-message-meta button { display:grid; width:20px; height:20px; padding:3px; place-items:center; border:0; border-radius:5px; background:transparent; color:inherit; cursor:pointer }.scui-message-meta button:hover,.scui-message-meta button:focus-visible { background:var(--scui-fill); color:var(--scui-fg) }.scui-message-meta button[data-status="copied"] { color:var(--scui-success) }.scui-message-meta button[data-status="failed"] { color:var(--scui-danger) }.scui-message-meta svg { width:13px; height:13px; fill:none; stroke:currentColor; stroke-width:1.25; stroke-linecap:round; stroke-linejoin:round }
+@media (hover:none) { .scui-message-meta { opacity:.82; pointer-events:auto } }
+.scui-pending[data-status="failed"] { border-color:color-mix(in srgb,var(--scui-danger) 45%,var(--scui-border)); background:color-mix(in srgb,var(--scui-danger) 7%,var(--scui-fill)); opacity:1 }
+.scui-pending > footer { display:flex; align-items:center; gap:8px; margin-top:5px }.scui-pending > footer small { color:var(--scui-muted) }.scui-pending[data-status="failed"] > footer small { color:var(--scui-danger) }
+.scui-pending > footer > span { display:flex; gap:4px; margin-left:auto }.scui-pending > footer button { padding:2px 6px; border:1px solid var(--scui-border-strong); border-radius:5px; background:transparent; color:var(--scui-fg); cursor:pointer; font:inherit; font-size:9.5px }
 .scui-pending { opacity:.7 }.scui-pending > small { display:block; margin-top:3px; color:var(--scui-muted); font-size:9.5px }
-.scui-markdown { font-size:12.5px; line-height:1.55 }.scui-markdown > :first-child { margin-top:0 }.scui-markdown > :last-child { margin-bottom:0 }
+.scui-markdown { min-width:0; font-size:12.5px; line-height:1.55 }.scui-markdown > :first-child { margin-top:0 }.scui-markdown > :last-child { margin-bottom:0 }
 .scui-markdown p { margin:0 0 8px }.scui-markdown h1,.scui-markdown h2,.scui-markdown h3 { margin:12px 0 5px; line-height:1.25 }.scui-markdown h1 { font-size:17px }.scui-markdown h2 { font-size:15px }.scui-markdown h3 { font-size:13px }
 .scui-markdown ul,.scui-markdown ol { margin:5px 0 9px; padding-left:20px }.scui-markdown blockquote { margin:8px 0; padding-left:9px; border-left:2px solid var(--scui-border-strong); color:var(--scui-muted) }
 .scui-markdown a { color:var(--scui-accent) }.scui-markdown code { padding:1px 4px; border-radius:4px; background:var(--scui-fill); font:.92em ui-monospace,SFMono-Regular,Menlo,monospace }
-.scui-markdown pre { padding:8px; overflow:auto; border:1px solid var(--scui-border); border-radius:7px; background:var(--scui-bg-raised) }.scui-markdown pre code { padding:0; background:transparent }
+.scui-code-block { min-width:0; margin:8px 0; overflow:hidden; border:1px solid var(--scui-border); border-radius:8px; background:var(--scui-bg-raised) }
+.scui-code-head { display:flex; align-items:center; min-height:28px; padding:0 4px 0 9px; border-bottom:1px solid var(--scui-border); color:var(--scui-muted); font-size:9.5px; font-weight:600; letter-spacing:.025em }
+.scui-code-head > span { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
+.scui-code-copy { display:flex; align-items:center; gap:4px; min-width:28px; min-height:24px; padding:0 5px; border:0; border-radius:5px; background:transparent; color:var(--scui-muted); cursor:pointer; font-size:9.5px }.scui-code-copy:hover,.scui-code-copy:focus-visible { background:var(--scui-fill); color:var(--scui-fg) }.scui-code-copy:disabled { cursor:wait }.scui-code-copy[data-status="copied"] { color:var(--scui-positive) }.scui-code-copy[data-status="failed"] { color:var(--scui-danger) }.scui-code-copy svg { width:13px; height:13px; flex:none }
+.scui-markdown[data-copyable="false"] .scui-code-copy { display:none }
+.scui-markdown pre { max-width:100%; margin:0; padding:9px 10px; overflow:auto; overscroll-behavior:contain; scrollbar-gutter:stable; background:transparent }.scui-markdown pre code { padding:0; background:transparent; overflow-wrap:normal; word-break:normal; white-space:pre }
 .scui-markdown table { display:block; overflow:auto; border-collapse:collapse }.scui-markdown th,.scui-markdown td { padding:4px; border:1px solid var(--scui-border) }
 .scui-context,.scui-reasoning,.scui-details,.scui-plan { color:var(--scui-muted); font-size:10.5px }
 .scui-context summary,.scui-reasoning summary,.scui-details summary,.scui-plan summary { cursor:pointer }
@@ -128,11 +139,12 @@
 .scui-context p,.scui-details p { display:grid; margin:0 }.scui-context strong,.scui-details strong { color:var(--scui-fg) }
 .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-unread-divider { display:flex; align-items:center; gap:7px; color:var(--scui-accent); font-size:9.5px; font-weight:650 }.scui-unread-divider::before,.scui-unread-divider::after { content:""; flex:1; height:1px; background:color-mix(in srgb,var(--scui-accent) 45%,var(--scui-border)) }.scui-unread-divider span { flex:none }
 
 .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-fold { display:grid; flex:none; place-items:center; transition:transform 120ms }.scui-fold[data-open="true"] { transform:rotate(90deg) }
 .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 }
@@ -157,8 +169,8 @@
 
 .scui-continuation { display:flex; align-items:center; gap:8px; padding:7px 9px; border-top:1px solid var(--scui-border); background:var(--scui-bg-raised) }.scui-continuation > span { display:grid; flex:1 }.scui-continuation small { color:var(--scui-muted); font-size:10px }.scui-continuation button { padding:5px 8px; border:1px solid var(--scui-accent); border-radius:7px; background:transparent; color:var(--scui-accent); cursor:pointer }
 .scui-compose { flex:none; padding:8px; border-top:1px solid var(--scui-border); background:var(--scui-bg-raised) }
-.scui-envelope { display:flex; align-items:flex-end; gap:7px; padding:7px; border:1px solid var(--scui-border-strong); border-radius:10px; background:var(--scui-bg) }.scui-envelope textarea { flex:1; min-width:0; min-height:34px; max-height:150px; resize:none; border:0; outline:0; background:transparent; color:var(--scui-fg) }.scui-envelope > span { display:flex; gap:4px }
-.scui-send,.scui-stop { width:29px; height:29px; border:0; border-radius:8px; background:var(--scui-accent); color:#fff; cursor:pointer }.scui-stop { background:var(--scui-danger) }.scui-send:disabled,.scui-stop:disabled { opacity:.4; cursor:default }
+.scui-envelope { display:flex; align-items:flex-end; gap:7px; padding:7px; border:1px solid var(--scui-border-strong); border-radius:16px; background:var(--scui-bg) }.scui-envelope textarea { flex:1; min-width:0; min-height:34px; max-height:150px; resize:none; overflow-y:hidden; border:0; outline:0; background:transparent; color:var(--scui-fg) }.scui-envelope > span { display:flex; gap:4px }
+.scui-send,.scui-stop { display:grid; width:29px; height:29px; padding:0; place-items:center; border:0; border-radius:8px; background:var(--scui-accent); color:#fff; cursor:pointer }.scui-stop { background:var(--scui-danger) }.scui-send:disabled,.scui-stop:disabled { opacity:.4; cursor:default }.scui-control-spinner { box-sizing:border-box; width:13px; height:13px; border:1.5px solid currentColor; border-right-color:transparent; border-radius:50%; animation:scui-spin .75s linear infinite }
 .scui-queue { display:grid; gap:4px; max-height:85px; margin-bottom:6px; overflow:auto; font-size:10.5px }.scui-queue > span { display:flex; gap:6px; padding:4px 6px; border-radius:5px; background:var(--scui-fill) }.scui-queue > span button { margin-left:auto; border:0; background:transparent }
 .scui-harness-picker { display:flex; align-items:center; gap:7px; margin-bottom:7px }.scui-harness-picker select { margin-left:auto; max-width:55%; padding:4px; border:1px solid var(--scui-border); border-radius:6px; background:var(--scui-bg); color:var(--scui-fg) }
 .scui-new { display:grid; justify-items:center; gap:5px; margin:auto; padding:20px; color:var(--scui-muted); text-align:center }.scui-new > span { color:var(--scui-accent); font-size:28px }.scui-new strong { color:var(--scui-fg) }
@@ -169,3 +181,11 @@
 @keyframes scui-progress { from { transform:translateX(-100%) } to { transform:translateX(180%) } }
 @keyframes scui-dots { 50% { transform:translateY(-3px); opacity:.45 } }
 @media (prefers-reduced-motion:reduce) { .scui-root * { animation-duration:.001ms !important; animation-iteration-count:1 !important; transition:none !important } }
+@media (pointer:coarse) {
+  .scui-head > button,.scui-menu-trigger { width:40px; height:40px }
+  .scui-head { min-height:52px }
+  .scui-menu-panel button,.scui-request-actions button,.scui-load { min-height:40px }
+  .scui-send,.scui-stop { width:40px; height:40px }
+  .scui-message-meta button,.scui-code-copy { min-width:36px; min-height:36px }
+  .scui-latest { min-height:36px; padding-inline:12px }
+}