@volter-ai-dev/supercode-ui 0.1.1 → 0.1.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@volter-ai-dev/supercode-ui",
-  "version": "0.1.1",
+  "version": "0.1.2",
   "type": "module",
   "description": "Composable default UI kit for Supercode-powered coding-agent experiences",
   "exports": {
@@ -9,7 +9,7 @@
       "import": "./index.mjs"
     },
     "./core": {
-      "types": "./index.d.ts",
+      "types": "./core.d.ts",
       "import": "./core.mjs"
     },
     "./controller": {
@@ -17,31 +17,31 @@
       "import": "./controller.mjs"
     },
     "./preact": {
-      "types": "./index.d.ts",
+      "types": "./components.d.ts",
       "import": "./components.mjs"
     },
     "./preact/logo": {
-      "types": "./index.d.ts",
+      "types": "./logo.d.ts",
       "import": "./logo.mjs"
     },
     "./preact/conversation": {
-      "types": "./index.d.ts",
+      "types": "./conversation.d.ts",
       "import": "./conversation.mjs"
     },
     "./preact/sessions": {
-      "types": "./index.d.ts",
+      "types": "./sessions.d.ts",
       "import": "./sessions.mjs"
     },
     "./preact/composer": {
-      "types": "./index.d.ts",
+      "types": "./composer.d.ts",
       "import": "./composer.mjs"
     },
     "./preact/messenger": {
-      "types": "./index.d.ts",
+      "types": "./messenger.d.ts",
       "import": "./messenger.mjs"
     },
     "./embed": {
-      "types": "./index.d.ts",
+      "types": "./embed.d.ts",
       "import": "./embed.mjs"
     },
     "./styles.css": "./styles.css"
@@ -49,15 +49,23 @@
   "types": "./index.d.ts",
   "files": [
     "core.mjs",
+    "core.d.ts",
     "controller.mjs",
     "controller.d.ts",
     "components.mjs",
+    "components.d.ts",
     "logo.mjs",
+    "logo.d.ts",
     "conversation.mjs",
+    "conversation.d.ts",
     "sessions.mjs",
+    "sessions.d.ts",
     "composer.mjs",
+    "composer.d.ts",
     "messenger.mjs",
+    "messenger.d.ts",
     "embed.mjs",
+    "embed.d.ts",
     "index.mjs",
     "index.d.ts",
     "styles.css",
@@ -68,14 +76,16 @@
     "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"
+    "test:storybook": "npm run build && vitest --run",
+    "typecheck": "tsc -p tsconfig.json && tsc -p test/tsconfig.json",
+    "test": "node --test test/*.test.mjs",
+    "prepack": "npm run build && npm run typecheck && npm test && npm run test:storybook"
   },
   "dependencies": {
     "markdown-it": "^14.1.0"
   },
   "peerDependencies": {
-    "@volter-ai-dev/supercode-client": ">=0.3.8",
+    "@volter-ai-dev/supercode-client": ">=0.3.9 <0.4.0",
     "preact": ">=10.19.0 <11"
   },
   "peerDependenciesMeta": {
@@ -96,6 +106,7 @@
     "preact": "^10.19.0",
     "preact-render-to-string": "^6.5.0",
     "storybook": "10.5.9",
+    "typescript": "5.6.3",
     "vite": "7.3.6",
     "vitest": "4.1.10"
   },

package/sessions.d.ts

@@ -0,0 +1,9 @@
+export type {
+  MessengerComponents,
+  MessengerLabels,
+  SessionRowModel,
+  SessionRowProps,
+  SupercodeUiState,
+  UiAdapter,
+} from './index.js';
+export { LoadingStatus, SessionList, SessionRow } from './index.js';

package/sessions.mjs

@@ -1,11 +1,11 @@
-// src/components.jsx
-import MarkdownIt from "markdown-it";
-import { useEffect, useId, useLayoutEffect, useMemo, useRef, useState } from "preact/hooks";
+// src/sessions.jsx
+import { useState as useState2 } from "preact/hooks";
 
 // core.mjs
 var HARNESS_NAMES = Object.freeze({
   "claude-code": "Claude Code",
   codex: "Codex",
+  gemini: "Gemini CLI",
   opencode: "OpenCode",
   pi: "Pi",
   grok: "Grok"
@@ -80,8 +80,13 @@ function filterSessions(rows, query) {
   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";
+// src/conversation.jsx
+import { useEffect, useId, useLayoutEffect, useRef, useState } from "preact/hooks";
+
+// src/markdown.jsx
+import MarkdownIt from "markdown-it";
+import { useMemo } from "preact/hooks";
+import { jsx } 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) => {
@@ -89,6 +94,29 @@ markdown.renderer.rules.link_open = (tokens, index, options, env, self) => {
   tokens[index]?.attrSet("rel", "noreferrer noopener");
   return defaultLinkOpen ? defaultLinkOpen(tokens, index, options, env, self) : self.renderToken(tokens, index, options);
 };
+
+// src/conversation.jsx
+import { jsx as jsx2, jsxs } from "preact/jsx-runtime";
+function LoadingStatus({ state, compact = false }) {
+  const copy = {
+    connecting: ["Connecting to coding agents", "Checking installed harnesses and capabilities.", 0],
+    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__ */ 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] })
+    ] }),
+    /* @__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)) })
+  ] });
+}
+
+// src/logo.jsx
+import { useEffect as useEffect2 } from "preact/hooks";
+import { jsx as jsx3, jsxs as jsxs2 } from "preact/jsx-runtime";
 var LOGOS = {
   "claude-code": {
     viewBox: "-1 3.5 26 18",
@@ -102,6 +130,10 @@ var LOGOS = {
       ["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" }]
     ]
   },
+  gemini: {
+    viewBox: "0 0 24 24",
+    paths: [["path", { d: "M12 24C12 17.373 6.627 12 0 12 6.627 12 12 6.627 12 0c0 6.627 5.373 12 12 12-6.627 0-12 5.373-12 12z" }]]
+  },
   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" }]]
@@ -117,80 +149,66 @@ var LOGOS = {
 };
 function HarnessLogo({ id, activity, size = 28, onMissingLogo }) {
   const logo = LOGOS[id];
-  useEffect(() => {
+  useEffect2(() => {
     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)) })
+  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
   ] });
 }
+
+// src/sessions.jsx
+import { jsx as jsx4, jsxs as jsxs3 } from "preact/jsx-runtime";
 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 })
+  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__ */ jsxs("span", { children: [
-        /* @__PURE__ */ jsx("b", { children: harnessDisplayName(row.harness) }),
-        /* @__PURE__ */ jsx("small", { children: preview || row.cwd || row.name })
+      /* @__PURE__ */ jsxs3("span", { children: [
+        /* @__PURE__ */ jsx4("b", { children: harnessDisplayName(row.harness) }),
+        /* @__PURE__ */ jsx4("small", { children: preview || row.cwd || row.name })
       ] }),
-      state.attachError?.key === row.key ? /* @__PURE__ */ jsx("em", { children: state.attachError.message }) : null
+      state.attachError?.key === row.key ? /* @__PURE__ */ jsx4("em", { children: state.attachError.message }) : null
     ] })
   ] });
 }
 function SessionList({ state, adapter, onOpen, onNew, onClose, components = {}, labels = DEFAULT_LABELS }) {
-  const [query, setQuery] = useState("");
+  const [query, setQuery] = useState2("");
   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: [
+  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: [
           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
+      /* @__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
     ] }),
-    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 })
+    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 })
     ] }) : 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
+    /* @__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
     ] })
   ] });
 }
 export {
-  LoadingStatus,
   SessionList,
   SessionRow
 };

package/styles.css

@@ -52,7 +52,7 @@
 
 .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 > .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 }
@@ -63,10 +63,11 @@
 .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 { 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 }
 .scui-logo[data-harness="claude-code"] { color:#d97757 }
 .scui-logo[data-harness="codex"] { color:#111; background:#f7f7f5 }
+.scui-logo[data-harness="gemini"] { color:#6e79dc; 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 }
@@ -135,7 +136,7 @@
 .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-plan > summary { display:flex; justify-content:space-between; padding:6px 8px; border:1px solid var(--scui-border); border-radius:7px; background:var(--scui-bg-raised) }.scui-plan ol { display:grid; gap:4px; box-sizing:border-box; max-height:140px; margin:5px 0 0; padding:7px 8px 7px 25px; overflow:auto; border:1px solid var(--scui-border); border-radius:7px }.scui-plan li[data-status="completed"] { color:var(--scui-fg); text-decoration:line-through }
 .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 }