@volter-ai-dev/supercode-ui 0.1.0

package/package.json

@@ -0,0 +1,106 @@
+{
+  "name": "@volter-ai-dev/supercode-ui",
+  "version": "0.1.0",
+  "type": "module",
+  "description": "Composable default UI kit for Supercode-powered coding-agent experiences",
+  "exports": {
+    ".": {
+      "types": "./index.d.ts",
+      "import": "./index.mjs"
+    },
+    "./core": {
+      "types": "./index.d.ts",
+      "import": "./core.mjs"
+    },
+    "./controller": {
+      "types": "./controller.d.ts",
+      "import": "./controller.mjs"
+    },
+    "./preact": {
+      "types": "./index.d.ts",
+      "import": "./components.mjs"
+    },
+    "./preact/logo": {
+      "types": "./index.d.ts",
+      "import": "./logo.mjs"
+    },
+    "./preact/conversation": {
+      "types": "./index.d.ts",
+      "import": "./conversation.mjs"
+    },
+    "./preact/sessions": {
+      "types": "./index.d.ts",
+      "import": "./sessions.mjs"
+    },
+    "./preact/composer": {
+      "types": "./index.d.ts",
+      "import": "./composer.mjs"
+    },
+    "./preact/messenger": {
+      "types": "./index.d.ts",
+      "import": "./messenger.mjs"
+    },
+    "./embed": {
+      "types": "./index.d.ts",
+      "import": "./embed.mjs"
+    },
+    "./styles.css": "./styles.css"
+  },
+  "types": "./index.d.ts",
+  "files": [
+    "core.mjs",
+    "controller.mjs",
+    "controller.d.ts",
+    "components.mjs",
+    "logo.mjs",
+    "conversation.mjs",
+    "sessions.mjs",
+    "composer.mjs",
+    "messenger.mjs",
+    "embed.mjs",
+    "index.mjs",
+    "index.d.ts",
+    "styles.css",
+    "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: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",
+    "test:storybook": "vitest --run",
+    "test": "node --test test/*.test.mjs"
+  },
+  "dependencies": {
+    "markdown-it": "^14.1.0"
+  },
+  "peerDependencies": {
+    "@volter-ai-dev/supercode-client": ">=0.3.7",
+    "preact": ">=10.19.0 <11"
+  },
+  "peerDependenciesMeta": {
+    "@volter-ai-dev/supercode-client": {
+      "optional": true
+    }
+  },
+  "devDependencies": {
+    "@storybook/addon-a11y": "10.5.9",
+    "@storybook/addon-docs": "10.5.9",
+    "@storybook/addon-themes": "10.5.9",
+    "@storybook/addon-vitest": "10.5.9",
+    "@storybook/preact-vite": "10.5.9",
+    "@types/react": "19.2.18",
+    "@vitest/browser-playwright": "4.1.10",
+    "esbuild": "^0.25.0",
+    "playwright": "1.62.1",
+    "preact": "^10.19.0",
+    "preact-render-to-string": "^6.5.0",
+    "storybook": "10.5.9",
+    "vite": "7.3.6",
+    "vitest": "4.1.10"
+  },
+  "engines": {
+    "node": ">=20"
+  },
+  "license": "MIT OR Apache-2.0"
+}

package/sessions.mjs

@@ -0,0 +1,196 @@
+// src/components.jsx
+import MarkdownIt from "markdown-it";
+import { useEffect, useId, useLayoutEffect, useMemo, useRef, useState } from "preact/hooks";
+
+// core.mjs
+var HARNESS_NAMES = Object.freeze({
+  "claude-code": "Claude Code",
+  codex: "Codex",
+  opencode: "OpenCode",
+  pi: "Pi",
+  grok: "Grok"
+});
+var DEFAULT_LABELS = Object.freeze({
+  chats: "Chats",
+  newChat: "New chat",
+  searchChats: "Search chats",
+  askAgent: "Ask your agent\u2026",
+  continueHere: "Continue here",
+  joinLive: "Join live",
+  forkHere: "Fork here"
+});
+var EMPTY_UI_STATE = Object.freeze({
+  pill: Object.freeze({ tone: "off", label: "connecting\u2026" }),
+  startup: "connecting",
+  transcript: Object.freeze([]),
+  busy: false,
+  operation: null,
+  needsInput: false,
+  harness: "",
+  mode: "none",
+  strategy: null,
+  canSend: false,
+  canResume: false,
+  canBranch: false,
+  canAttach: false,
+  canDetach: false,
+  canOpenTerminal: false,
+  canExport: false,
+  canReduce: false,
+  canInterrupt: false,
+  canRespond: false,
+  messaging: null,
+  workspace: "",
+  taskPlan: Object.freeze({ source: "none", items: Object.freeze([]), residueCount: 0, observedAt: null }),
+  semantics: Object.freeze({ fidelity: null, residue: Object.freeze([]), residueCount: 0, parseErrors: 0, rawRecords: 0, subagents: Object.freeze([]) }),
+  terminalHandoff: null,
+  exportBackTarget: null,
+  exportReceipt: null,
+  reductionReceipt: null,
+  error: null,
+  recoverable: false,
+  harnesses: Object.freeze([]),
+  history: Object.freeze({ sessionLimit: 0, hasMoreSessions: false, transcriptLimit: 120, hasEarlier: false }),
+  savedDraft: "",
+  attention: Object.freeze([]),
+  sessions: Object.freeze([]),
+  attached: null,
+  owned: null,
+  attachError: null
+});
+function harnessDisplayName(id) {
+  return HARNESS_NAMES[id] ?? id;
+}
+function sessionDisplayName(session) {
+  const title = session.title?.trim();
+  return title && title !== session.name ? title : session.name || "Untitled chat";
+}
+function sessionActivity(state, row) {
+  if (state.needsInput && row.active) return "needs-input";
+  if (state.busy && row.active) return "working";
+  const attention = state.attention.find((item) => item.key === row.key)?.kind;
+  if (attention) return attention;
+  if (row.runtimeStatus === "busy") return "working";
+  if (row.live || row.runtimeStatus === "idle") return "recent";
+  return "idle";
+}
+function filterSessions(rows, query) {
+  const needle = query.trim().toLocaleLowerCase();
+  if (!needle) return [...rows];
+  return rows.filter((row) => [row.name, row.title, row.cwd, row.harness, harnessDisplayName(row.harness)].some((value) => value.toLocaleLowerCase().includes(needle)));
+}
+
+// src/components.jsx
+import { jsx, jsxs } from "preact/jsx-runtime";
+var markdown = new MarkdownIt({ html: false, linkify: true, breaks: false });
+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);
+};
+var LOGOS = {
+  "claude-code": {
+    viewBox: "-1 3.5 26 18",
+    paths: [
+      ["path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M20.998 10.949H24v3.102h-3v3.028h-1.487V20H18v-2.921h-1.487V20H15v-2.921H9V20H7.488v-2.921H6V20H4.487v-2.921H3V14.05H0V10.95h3V5h17.998v5.949zM6 10.949h1.488V8.102H6v2.847zm10.51 0H18V8.102h-1.49v2.847z" }]
+    ]
+  },
+  codex: {
+    viewBox: "-1 -1 26 26",
+    paths: [
+      ["path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M8.086.457a6.105 6.105 0 013.046-.415c1.333.153 2.521.72 3.564 1.7a.117.117 0 00.107.029c1.408-.346 2.762-.224 4.061.366l.063.03.154.076c1.357.703 2.33 1.77 2.918 3.198.278.679.418 1.388.421 2.126a5.655 5.655 0 01-.18 1.631.167.167 0 00.04.155 5.982 5.982 0 011.578 2.891c.385 1.901-.01 3.615-1.183 5.14l-.182.22a6.063 6.063 0 01-2.934 1.851.162.162 0 00-.108.102c-.255.736-.511 1.364-.987 1.992-1.199 1.582-2.962 2.462-4.948 2.451-1.583-.008-2.986-.587-4.21-1.736a.145.145 0 00-.14-.032c-.518.167-1.04.191-1.604.185a5.924 5.924 0 01-2.595-.622 6.058 6.058 0 01-2.146-1.781c-.203-.269-.404-.522-.551-.821a7.74 7.74 0 01-.495-1.283 6.11 6.11 0 01-.017-3.064.166.166 0 00.008-.074.115.115 0 00-.037-.064 5.958 5.958 0 01-1.38-2.202 5.196 5.196 0 01-.333-1.589 6.915 6.915 0 01.188-2.132c.45-1.484 1.309-2.648 2.577-3.493.282-.188.55-.334.802-.438.286-.12.573-.22.861-.304a.129.129 0 00.087-.087A6.016 6.016 0 015.635 2.31C6.315 1.464 7.132.846 8.086.457zm-.804 7.85a.848.848 0 00-1.473.842l1.694 2.965-1.688 2.848a.849.849 0 001.46.864l1.94-3.272a.849.849 0 00.007-.854l-1.94-3.393zm5.446 6.24a.849.849 0 000 1.695h4.848a.849.849 0 000-1.696h-4.848z" }]
+    ]
+  },
+  grok: {
+    viewBox: "-1 -1 26 26",
+    paths: [["path", { d: "M9.27 15.29l7.978-5.897c.391-.29.95-.177 1.137.272.98 2.369.542 5.215-1.41 7.169-1.951 1.954-4.667 2.382-7.149 1.406l-2.711 1.257c3.889 2.661 8.611 2.003 11.562-.953 2.341-2.344 3.066-5.539 2.388-8.42l.006.007c-.983-4.232.242-5.924 2.75-9.383.06-.082.12-.164.179-.248l-3.301 3.305v-.01L9.267 15.292M7.623 16.723c-2.792-2.67-2.31-6.801.071-9.184 1.761-1.763 4.647-2.483 7.166-1.425l2.705-1.25a7.808 7.808 0 00-1.829-1A8.975 8.975 0 005.984 5.83c-2.533 2.536-3.33 6.436-1.962 9.764 1.022 2.487-.653 4.246-2.34 6.022-.599.63-1.199 1.259-1.682 1.925l7.62-6.815" }]]
+  },
+  opencode: { viewBox: "2.5 0 19 24", paths: [["path", { d: "M16 6H8v12h8V6zm4 16H4V2h16v20z" }]] },
+  pi: {
+    viewBox: "0 0 24 24",
+    paths: [
+      ["path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M1 1h16.5v11H12v5.5H6.5V23H1V1zm5.5 5.5V12H12V6.5H6.5z" }],
+      ["path", { d: "M17.5 12H23v11h-5.5V12z" }]
+    ]
+  }
+};
+function HarnessLogo({ id, activity, size = 28, onMissingLogo }) {
+  const logo = LOGOS[id];
+  useEffect(() => {
+    if (!logo) onMissingLogo?.(id);
+  }, [id, logo, onMissingLogo]);
+  if (!logo) return null;
+  return /* @__PURE__ */ jsxs("span", { class: "scui-logo", "data-harness": id, "data-activity": activity, style: `--scui-logo-size:${size}px`, "aria-hidden": "true", children: [
+    /* @__PURE__ */ jsx("svg", { viewBox: logo.viewBox, focusable: "false", children: logo.paths.map(([Tag, props], index) => /* @__PURE__ */ jsx(Tag, { ...props }, index)) }),
+    activity && activity !== "idle" ? /* @__PURE__ */ jsx("i", {}) : null
+  ] });
+}
+function LoadingStatus({ state, compact = false }) {
+  const copy = {
+    connecting: ["Connecting to coding agents", "Checking installed harnesses and capabilities.", 0],
+    starting: [`Starting ${harnessDisplayName(state.harness) || "coding agent"}`, "Opening a controlled session in this workspace.", 1],
+    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__ */ jsx("span", { class: "scui-orbit", "aria-hidden": "true", children: /* @__PURE__ */ jsx("i", {}) }),
+    /* @__PURE__ */ jsxs("span", { class: "scui-loading-copy", children: [
+      /* @__PURE__ */ jsx("strong", { children: copy[0] }),
+      /* @__PURE__ */ jsx("small", { children: copy[1] })
+    ] }),
+    /* @__PURE__ */ jsx("span", { class: "scui-progress", "aria-hidden": "true", children: [1, 2, 3].map((step) => /* @__PURE__ */ jsx("i", { "data-progress": step <= copy[2] ? "done" : step === copy[2] + 1 ? "current" : "waiting" }, step)) })
+  ] });
+}
+function SessionRow({ row, state, onOpen }) {
+  const activity = sessionActivity(state, row);
+  const preview = state.attention.find((item) => item.key === row.key)?.preview;
+  return /* @__PURE__ */ jsxs("button", { class: "scui-session", "data-active": row.active, "data-activity": activity, type: "button", onClick: () => onOpen(row), children: [
+    /* @__PURE__ */ jsx(HarnessLogo, { id: row.harness, activity, size: 34 }),
+    /* @__PURE__ */ jsxs("span", { class: "scui-session-copy", children: [
+      /* @__PURE__ */ jsxs("span", { children: [
+        /* @__PURE__ */ jsx("strong", { children: sessionDisplayName(row) }),
+        /* @__PURE__ */ jsx("small", { children: row.age })
+      ] }),
+      /* @__PURE__ */ jsxs("span", { children: [
+        /* @__PURE__ */ jsx("b", { children: harnessDisplayName(row.harness) }),
+        /* @__PURE__ */ jsx("small", { children: preview || row.cwd || row.name })
+      ] }),
+      state.attachError?.key === row.key ? /* @__PURE__ */ jsx("em", { children: state.attachError.message }) : null
+    ] })
+  ] });
+}
+function SessionList({ state, adapter, onOpen, onNew, onClose, components = {}, labels = DEFAULT_LABELS }) {
+  const [query, setQuery] = useState("");
+  const rows = filterSessions(state.sessions, query);
+  const Row = components.SessionRow ?? SessionRow;
+  return /* @__PURE__ */ jsxs("section", { class: "scui-list", children: [
+    /* @__PURE__ */ jsxs("header", { class: "scui-head", children: [
+      /* @__PURE__ */ jsxs("span", { children: [
+        /* @__PURE__ */ jsx("strong", { children: labels.chats }),
+        /* @__PURE__ */ jsxs("small", { children: [
+          state.sessions.length,
+          " recent conversations"
+        ] })
+      ] }),
+      /* @__PURE__ */ jsx("button", { type: "button", "aria-label": labels.newChat, disabled: !state.harnesses.some((item) => item.startable), onClick: onNew, children: "\uFF0B" }),
+      onClose ? /* @__PURE__ */ jsx("button", { type: "button", "aria-label": "Close", onClick: onClose, children: "\xD7" }) : null
+    ] }),
+    state.startup !== "ready" ? /* @__PURE__ */ jsx(LoadingStatus, { state, compact: rows.length > 0 }) : null,
+    state.sessions.length > 4 ? /* @__PURE__ */ jsxs("label", { class: "scui-search", children: [
+      /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: "\u2315" }),
+      /* @__PURE__ */ jsx("input", { type: "search", "aria-label": labels.searchChats, placeholder: labels.searchChats, value: query, onInput: (event) => setQuery(event.currentTarget.value) }),
+      /* @__PURE__ */ jsx("small", { children: rows.length })
+    ] }) : null,
+    /* @__PURE__ */ jsxs("div", { class: "scui-session-rows", children: [
+      !rows.length && state.startup === "ready" ? /* @__PURE__ */ jsx("div", { class: "scui-empty", children: query ? "No chats match your search." : state.error ?? "No coding chats found." }) : null,
+      rows.map((row) => /* @__PURE__ */ jsx(Row, { value: row, row, state, adapter, onOpen }, row.key)),
+      state.history.hasMoreSessions ? /* @__PURE__ */ jsx("button", { class: "scui-load", type: "button", onClick: () => adapter.onIntent({ action: "loadSessions" }), children: "Load older chats" }) : null
+    ] })
+  ] });
+}
+export {
+  LoadingStatus,
+  SessionList,
+  SessionRow
+};

package/styles.css

@@ -0,0 +1,154 @@
+:where(.scui-root) {
+  --scui-width: 420px;
+  --scui-height: 480px;
+  --scui-bg: #fff;
+  --scui-bg-raised: #f7f7f6;
+  --scui-fill: #f1f1ef;
+  --scui-fg: #191918;
+  --scui-muted: #5f5f5a;
+  --scui-border: #deded9;
+  --scui-border-strong: #c7c7c0;
+  --scui-accent: #2458b8;
+  --scui-positive: #22863a;
+  --scui-warning: #b26a00;
+  --scui-danger: #b4232e;
+  --scui-radius: 14px;
+  --scui-font: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+  box-sizing: border-box;
+  display: flex;
+  position: relative;
+  width: min(var(--scui-width), 100%);
+  height: min(var(--scui-height), 100%);
+  overflow: hidden;
+  border: 1px solid var(--scui-border);
+  border-radius: var(--scui-radius);
+  background: var(--scui-bg);
+  color: var(--scui-fg);
+  font: 13px/1.4 var(--scui-font);
+  color-scheme: light dark;
+}
+
+@media (prefers-color-scheme: dark) {
+  :where(.scui-root) {
+    --scui-bg: #151515;
+    --scui-bg-raised: #1c1c1b;
+    --scui-fill: #242422;
+    --scui-fg: #f3f3ef;
+    --scui-muted: #a3a39d;
+    --scui-border: #353532;
+    --scui-border-strong: #4a4a45;
+    --scui-accent: #72a7ff;
+    --scui-positive: #57c26e;
+    --scui-warning: #e8a23a;
+    --scui-danger: #ff747d;
+  }
+}
+
+: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 }
+: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-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 > span { 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-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-logo { position:relative; display:inline-grid; place-items:center; 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 { width:70%; height:70%; fill:currentColor }
+.scui-logo[data-harness="claude-code"] { color:#d97757 }
+.scui-logo[data-harness="codex"] { color:#111; background:#f7f7f5 }
+.scui-logo[data-harness="pi"] { color:#111; background:#efefeb }
+.scui-logo > i { position:absolute; right:-5%; bottom:-5%; width:32%; height:32%; border:2px solid var(--scui-bg); border-radius:50%; background:var(--scui-muted) }
+.scui-logo[data-activity="working"] > i { background:var(--scui-accent); animation:scui-breathe 1.4s ease-in-out infinite }
+.scui-logo[data-activity="needs-input"] > i { background:var(--scui-warning) }
+.scui-logo[data-activity="failed"] > i { background:var(--scui-danger) }
+.scui-logo[data-activity="finished"] > i,.scui-logo[data-activity="unseen"] > i { background:var(--scui-positive) }
+
+.scui-loading { display:grid; grid-template-columns:30px minmax(0,1fr); gap:4px 10px; align-items:center; margin:auto; padding:18px; color:var(--scui-muted) }
+.scui-loading-compact { width:calc(100% - 16px); margin:8px; padding:8px; border:1px solid var(--scui-border); border-radius:9px; background:var(--scui-bg-raised) }
+.scui-orbit { grid-row:1 / span 2; position:relative; width:27px; height:27px; border:1px solid var(--scui-border-strong); border-radius:50% }
+.scui-orbit::before { content:""; position:absolute; inset:5px; border-radius:50%; background:var(--scui-fill); animation:scui-breathe 1.5s ease-in-out infinite }
+.scui-orbit i { position:absolute; inset:-1px; border:2px solid transparent; border-top-color:var(--scui-accent); border-radius:50%; animation:scui-spin 1s linear infinite }
+.scui-loading-copy { display:grid; gap:2px }.scui-loading-copy strong { color:var(--scui-fg); font-size:12px }.scui-loading-copy small { font-size:10.5px }
+.scui-progress { grid-column:2; display:grid; grid-template-columns:repeat(3,minmax(18px,38px)); gap:4px }
+.scui-progress i { height:2px; overflow:hidden; border-radius:2px; background:var(--scui-fill) }
+.scui-progress i[data-progress="done"] { background:var(--scui-accent) }
+.scui-progress i[data-progress="current"]::after { content:""; display:block; width:55%; height:100%; background:var(--scui-accent); animation:scui-progress 1s ease-in-out infinite alternate }
+
+.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: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 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-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 }
+.scui-error { color:var(--scui-danger) }.scui-error span,.scui-receipt span { flex:1; min-width:0 }
+.scui-error button,.scui-receipt button { border:0; background:transparent; color:var(--scui-accent); cursor:pointer }
+.scui-receipt span { display:grid }.scui-receipt small { overflow:hidden; color:var(--scui-muted); text-overflow:ellipsis; white-space:nowrap }
+
+.scui-conversation-wrap { position:relative; display:flex; flex:1; min-height:0 }
+.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-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-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 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-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 }
+.scui-context > div,.scui-details > div { display:grid; gap:5px; max-height:150px; margin-top:5px; padding:7px; overflow:auto; border:1px solid var(--scui-border); border-radius:7px; background:var(--scui-bg-raised) }
+.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-activity { overflow:hidden; border:1px solid var(--scui-border); border-radius:9px; background:var(--scui-bg-raised) }
+.scui-activity-head,.scui-tool-head { display:flex; align-items:center; gap:6px; width:100%; min-height:32px; padding:0 8px; border:0; background:transparent; text-align:left; cursor:pointer }
+.scui-activity-head strong { font-size:11px }.scui-activity-head small { color:var(--scui-muted) }.scui-spacer { flex:1 }
+.scui-fold { font-size:16px; transition:transform 120ms }.scui-fold[data-open="true"] { transform:rotate(90deg) }
+.scui-tool { border-top:1px solid var(--scui-border) }.scui-tool-head:disabled { cursor:default }.scui-tool-glyph { width:18px; color:var(--scui-accent); text-align:center }.scui-tool-head strong { font-size:10.5px; text-transform:capitalize }
+.scui-tool-target { min-width:0; overflow:hidden; color:var(--scui-muted); font:10px ui-monospace,SFMono-Regular,Menlo,monospace; text-overflow:ellipsis; white-space:nowrap }
+.scui-tool-detail { padding:0 7px 7px }.scui-tool-detail pre { max-height:220px; margin:0 0 5px; padding:7px; overflow:auto; border-radius:6px; background:var(--scui-bg); font:10px/1.45 ui-monospace,SFMono-Regular,Menlo,monospace; white-space:pre-wrap }.scui-tool-detail pre[data-error="true"] { color:var(--scui-danger) }
+.scui-request { padding:9px; border:1px solid var(--scui-warning); border-radius:9px; background:color-mix(in srgb,var(--scui-warning) 8%,var(--scui-bg)) }.scui-request-actions { display:flex; flex-wrap:wrap; gap:5px }.scui-request-actions button { padding:5px 8px; border:1px solid var(--scui-border-strong); border-radius:6px; background:var(--scui-bg); cursor:pointer }
+.scui-request-done { color:var(--scui-muted); font-size:10.5px }
+.scui-plan > summary { display:flex; justify-content:space-between; padding:6px 8px; border:1px solid var(--scui-border); border-radius:7px; background:var(--scui-bg-raised) }.scui-plan ol { display:grid; gap:4px; max-height:140px; margin:5px 0 0; padding:7px 8px 7px 25px; overflow:auto; border:1px solid var(--scui-border); border-radius:7px }.scui-plan li[data-status="completed"] { text-decoration:line-through; opacity:.65 }
+.scui-working { display:flex; align-items:center; gap:4px; color:var(--scui-muted) }.scui-working > span { color:var(--scui-accent) }.scui-working > i { width:4px; height:4px; border-radius:50%; background:currentColor; animation:scui-dots 1.2s infinite }.scui-working > i:nth-of-type(2) { animation-delay:.15s }.scui-working > i:nth-of-type(3) { animation-delay:.3s }
+
+.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-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) }
+.scui-opening { position:absolute; z-index:30; inset:49px 0 0; display:flex; align-items:center; justify-content:center; gap:10px; padding:20px; background:var(--scui-bg) }.scui-opening > span { display:grid }.scui-opening small { color:var(--scui-muted) }.scui-opening > i { width:16px; height:16px; border:2px solid var(--scui-border); border-top-color:var(--scui-accent); border-radius:50%; animation:scui-spin .8s linear infinite }
+
+@keyframes scui-spin { to { transform:rotate(360deg) } }
+@keyframes scui-breathe { 50% { transform:scale(.72); opacity:.5 } }
+@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 } }