@volter-ai-dev/supercode-ui 0.1.28 → 0.1.30

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@volter-ai-dev/supercode-ui",
-  "version": "0.1.28",
+  "version": "0.1.30",
   "type": "module",
   "description": "Composable default UI kit for Supercode-powered coding-agent experiences",
   "exports": {
@@ -44,6 +44,10 @@
       "types": "./messenger.d.ts",
       "import": "./messenger.mjs"
     },
+    "./preact/settings": {
+      "types": "./settings.d.ts",
+      "import": "./settings.mjs"
+    },
     "./embed": {
       "types": "./embed.d.ts",
       "import": "./embed.mjs"
@@ -70,6 +74,8 @@
     "composer.d.ts",
     "messenger.mjs",
     "messenger.d.ts",
+    "settings.mjs",
+    "settings.d.ts",
     "embed.mjs",
     "embed.d.ts",
     "index.mjs",
@@ -78,7 +84,7 @@
     "README.md"
   ],
   "scripts": {
-    "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": "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 src/settings.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

@@ -40,6 +40,7 @@ var EMPTY_UI_STATE = Object.freeze({
   canReduce: false,
   canInterrupt: false,
   canRespond: false,
+  canConfigureSettings: false,
   messaging: null,
   workspace: "",
   taskPlan: Object.freeze({ source: "none", items: Object.freeze([]), residueCount: 0, observedAt: null }),
@@ -48,6 +49,8 @@ var EMPTY_UI_STATE = Object.freeze({
   exportBackTarget: null,
   exportReceipt: null,
   reductionReceipt: null,
+  interopSettings: null,
+  interopSettingsError: null,
   error: null,
   recoverable: false,
   harnesses: Object.freeze([]),
@@ -59,6 +62,15 @@ var EMPTY_UI_STATE = Object.freeze({
   owned: null,
   attachError: null
 });
+function relativeAge(updatedAt, now = Date.now()) {
+  if (typeof updatedAt !== "number" || !Number.isFinite(updatedAt) || updatedAt <= 0) return "";
+  const delta = Math.max(0, now - updatedAt);
+  if (delta < 6e4) return "now";
+  if (delta < 36e5) return `${Math.floor(delta / 6e4)}m ago`;
+  if (delta < 864e5) return `${Math.floor(delta / 36e5)}h ago`;
+  if (delta < 6048e5) return `${Math.floor(delta / 864e5)}d ago`;
+  return `${Math.floor(delta / 6048e5)}w ago`;
+}
 function harnessDisplayName(id) {
   return HARNESS_NAMES[id] ?? id;
 }
@@ -72,6 +84,7 @@ function sessionActivity(state, row) {
   const attention = state.attention.find((item) => item.key === row.key)?.kind;
   if (attention) return attention;
   if (row.runtimeStatus === "busy") return "working";
+  if (row.runtimeStatus === "running") return "running";
   if (row.live || row.runtimeStatus === "idle") return "recent";
   return "idle";
 }
@@ -290,28 +303,35 @@ function sessionPathParts(value) {
     trailing: complete.slice(boundary + 1)
   };
 }
-function SessionRow({ row, state, onOpen }) {
+function SessionRow({ row, state, onOpen, now = Date.now() }) {
   const activity = sessionActivity(state, row);
+  const working = activity === "working";
   const attention = state.attention.find((item) => item.key === row.key);
   const title = sessionDisplayName(row);
   const path = sessionPathParts(row.cwd);
   const preview = row.preview || attention?.preview || "";
   const unreadCount = attention?.unreadCount ?? 0;
   const unreadLabel = unreadCount > 99 ? "99+" : String(unreadCount);
-  return /* @__PURE__ */ jsxs5("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)}${path.complete ? ` \xB7 ${path.complete}` : ""}${preview ? ` \xB7 ${preview}` : ""}${unreadCount ? ` \xB7 ${unreadCount} unread` : ""}${row.age ? ` \xB7 ${row.age}` : ""}`, "aria-current": row.active ? "true" : void 0, onClick: () => onOpen(row), children: [
+  const age = relativeAge(row.previewUpdatedAt ?? row.updatedAt, now) || row.age;
+  return /* @__PURE__ */ jsxs5("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)}${working ? " \xB7 Working" : ""}${path.complete ? ` \xB7 ${path.complete}` : ""}${preview ? ` \xB7 ${preview}` : ""}${unreadCount ? ` \xB7 ${unreadCount} unread` : ""}${age ? ` \xB7 ${age}` : ""}`, "aria-current": row.active ? "true" : void 0, onClick: () => onOpen(row), children: [
     /* @__PURE__ */ jsx6(HarnessLogo, { id: row.harness, activity, size: 34 }),
     /* @__PURE__ */ jsxs5("span", { class: "scui-session-copy", children: [
       /* @__PURE__ */ jsxs5("span", { class: "scui-session-title", children: [
         /* @__PURE__ */ jsx6("strong", { children: title }),
-        row.age ? /* @__PURE__ */ jsx6("time", { children: row.age }) : null
+        /* @__PURE__ */ jsx6("span", { class: "scui-session-meta", children: age ? /* @__PURE__ */ jsx6("time", { children: age }) : null })
       ] }),
       path.complete ? /* @__PURE__ */ jsxs5("small", { class: "scui-session-path", title: row.cwd, children: [
         /* @__PURE__ */ jsx6("span", { class: "scui-session-path-leading", children: path.leading }),
         path.separator ? /* @__PURE__ */ jsx6("span", { class: "scui-session-path-separator", children: path.separator }) : null,
         path.trailing ? /* @__PURE__ */ jsx6("span", { class: "scui-session-path-trailing", children: path.trailing }) : null
       ] }) : null,
-      preview || unreadCount ? /* @__PURE__ */ jsxs5("span", { class: "scui-session-preview", children: [
-        preview ? /* @__PURE__ */ jsx6("small", { children: preview }) : null,
+      working || preview || unreadCount ? /* @__PURE__ */ jsxs5("span", { class: "scui-session-preview", children: [
+        working ? /* @__PURE__ */ jsxs5("span", { class: "scui-session-working", "aria-hidden": "true", children: [
+          /* @__PURE__ */ jsx6("i", {}),
+          /* @__PURE__ */ jsx6("i", {}),
+          /* @__PURE__ */ jsx6("i", {})
+        ] }) : null,
+        preview || working ? /* @__PURE__ */ jsx6("small", { children: preview || "Working\u2026" }) : null,
         unreadCount ? /* @__PURE__ */ jsx6("b", { "aria-label": `${unreadCount} unread messages`, children: unreadLabel }) : null
       ] }) : null,
       state.attachError?.key === row.key ? /* @__PURE__ */ jsx6("em", { children: state.attachError.message }) : null
@@ -322,6 +342,7 @@ function SessionList({ state, adapter, onOpen, onNew, onClose, components = {},
   const remembered = sessionListMemory.get(memoryKey) ?? { query: "", top: 0 };
   const [query, setQuery] = useState3(remembered.query);
   const [loadingMore, setLoadingMore] = useState3(false);
+  const [now, setNow] = useState3(() => Date.now());
   const root = useRef4(null);
   const rowScroller = useRef4(null);
   const rows = filterSessions(state.sessions, query);
@@ -337,6 +358,10 @@ function SessionList({ state, adapter, onOpen, onNew, onClose, components = {},
   useEffect5(() => {
     if (loadingMore) setLoadingMore(false);
   }, [state.error, state.history.hasMoreSessions, state.sessions.length]);
+  useEffect5(() => {
+    const timer = setInterval(() => setNow(Date.now()), 1e4);
+    return () => clearInterval(timer);
+  }, []);
   const loadMore = () => {
     if (loadingMore) return;
     setLoadingMore(true);
@@ -370,7 +395,7 @@ function SessionList({ state, adapter, onOpen, onNew, onClose, components = {},
     ] }) : null,
     /* @__PURE__ */ jsxs5("div", { class: "scui-session-rows", ref: rowScroller, onScroll: (event) => boundedSet(sessionListMemory, memoryKey, { query, top: event.currentTarget.scrollTop }), children: [
       !rows.length && state.startup === "ready" ? /* @__PURE__ */ jsx6("div", { class: "scui-empty", children: query ? "No chats match your search." : state.error ?? "No coding chats found." }) : null,
-      rows.map((row) => /* @__PURE__ */ jsx6(Row, { value: row, row, state, adapter, onOpen }, row.key)),
+      rows.map((row) => /* @__PURE__ */ jsx6(Row, { value: row, row, state, adapter, onOpen, now }, row.key)),
       state.history.hasMoreSessions ? /* @__PURE__ */ jsx6("button", { class: "scui-load", type: "button", disabled: loadingMore, onClick: loadMore, children: loadingMore ? "Loading older chats\u2026" : "Load older chats" }) : null
     ] })
   ] });

package/settings.d.ts

@@ -0,0 +1,2 @@
+export { HarnessAdvisory, HarnessSettingsPanel } from './index.js';
+export type { HarnessAdvisoryProps, HarnessSettingsPanelProps } from './index.js';

package/settings.mjs

@@ -0,0 +1,216 @@
+// src/settings.jsx
+import { useEffect, useId, useMemo, useRef, useState } from "preact/hooks";
+
+// core.mjs
+var HARNESS_NAMES = Object.freeze({
+  "claude-code": "Claude Code",
+  codex: "Codex",
+  gemini: "Gemini CLI",
+  goose: "Goose",
+  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,
+  canConfigureSettings: 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,
+  interopSettings: null,
+  interopSettingsError: 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;
+}
+
+// src/icon.jsx
+import { Fragment, jsx, jsxs } from "preact/jsx-runtime";
+var ICONS = {
+  attach: () => /* @__PURE__ */ jsx("path", { d: "M6.25 9.75 10.6 5.4a2.1 2.1 0 0 1 2.97 2.97l-5.4 5.4a3.3 3.3 0 0 1-4.67-4.66l5.52-5.52" }),
+  back: () => /* @__PURE__ */ jsx("path", { d: "m11.5 4.5-4.5 4.5 4.5 4.5" }),
+  check: () => /* @__PURE__ */ jsx("path", { d: "m4 9 3.25 3.25L14 5.5" }),
+  chevron: () => /* @__PURE__ */ jsx("path", { d: "m7 4.5 4.5 4.5L7 13.5" }),
+  close: () => /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("path", { d: "m4.75 4.75 8.5 8.5" }),
+    /* @__PURE__ */ jsx("path", { d: "m13.25 4.75-8.5 8.5" })
+  ] }),
+  copy: () => /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("rect", { x: "5", y: "5", width: "8", height: "8", rx: "1.5" }),
+    /* @__PURE__ */ jsx("path", { d: "M3 10.5V4.25C3 3.56 3.56 3 4.25 3h6.25" })
+  ] }),
+  down: () => /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("path", { d: "M9 3.5v10" }),
+    /* @__PURE__ */ jsx("path", { d: "m4.75 9.5 4.25 4 4.25-4" })
+  ] }),
+  image: () => /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("rect", { x: "3", y: "3.5", width: "12", height: "11", rx: "1.75" }),
+    /* @__PURE__ */ jsx("circle", { cx: "6.5", cy: "7", r: "1.25" }),
+    /* @__PURE__ */ jsx("path", { d: "m4.5 13 3.25-3 2.1 1.85 1.65-1.5L14 13" })
+  ] }),
+  menu: () => /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("circle", { cx: "4", cy: "9", r: "1.25", fill: "currentColor", stroke: "none" }),
+    /* @__PURE__ */ jsx("circle", { cx: "9", cy: "9", r: "1.25", fill: "currentColor", stroke: "none" }),
+    /* @__PURE__ */ jsx("circle", { cx: "14", cy: "9", r: "1.25", fill: "currentColor", stroke: "none" })
+  ] }),
+  plus: () => /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("path", { d: "M9 3.5v11" }),
+    /* @__PURE__ */ jsx("path", { d: "M3.5 9h11" })
+  ] }),
+  search: () => /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("circle", { cx: "7.75", cy: "7.75", r: "4.25" }),
+    /* @__PURE__ */ jsx("path", { d: "m11 11 3.5 3.5" })
+  ] }),
+  send: () => /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("path", { d: "M9 14.5v-11" }),
+    /* @__PURE__ */ jsx("path", { d: "m4.75 7.75 4.25-4.25 4.25 4.25" })
+  ] }),
+  stop: () => /* @__PURE__ */ jsx("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__ */ jsx("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__ */ jsx(Glyph, {}) });
+}
+
+// src/settings.jsx
+import { jsx as jsx2, jsxs as jsxs2 } from "preact/jsx-runtime";
+function HarnessAdvisory({ state, onReview }) {
+  const advisory = state.interopSettings?.advisories[0];
+  if (!advisory && !state.interopSettingsError) return null;
+  return /* @__PURE__ */ jsxs2("aside", { class: "scui-advisory", "data-severity": advisory?.severity ?? "error", role: advisory?.severity === "error" ? "alert" : "status", children: [
+    /* @__PURE__ */ jsx2("span", { "aria-hidden": "true", children: "!" }),
+    /* @__PURE__ */ jsxs2("span", { children: [
+      /* @__PURE__ */ jsx2("strong", { children: advisory?.title ?? "Could not inspect harness settings" }),
+      /* @__PURE__ */ jsx2("small", { children: advisory?.message ?? state.interopSettingsError })
+    ] }),
+    advisory && state.canConfigureSettings ? /* @__PURE__ */ jsx2("button", { type: "button", onClick: () => onReview(advisory.recommendation.change), children: "Review" }) : null
+  ] });
+}
+function initialValues(report, recommendedChange) {
+  return Object.fromEntries(report.controls.map((control) => [
+    control.key,
+    recommendedChange?.key === control.key ? recommendedChange.value : control.configuredValue ?? control.effectiveValue ?? control.choices[0]?.value ?? null
+  ]));
+}
+function HarnessSettingsPanel({ state, adapter, onClose, recommendedChange = null }) {
+  const report = state.interopSettings;
+  const titleId = useId();
+  const panel = useRef(null);
+  const valuesKey = `${report?.revision ?? ""}:${recommendedChange?.key ?? ""}:${recommendedChange?.value ?? ""}`;
+  const defaults = useMemo(() => report ? initialValues(report, recommendedChange) : {}, [valuesKey]);
+  const [values, setValues] = useState(defaults);
+  useEffect(() => setValues(defaults), [defaults]);
+  useEffect(() => {
+    panel.current?.querySelector("select, button")?.focus({ preventScroll: true });
+    const dismiss = (event) => {
+      if (event.key === "Escape") {
+        event.preventDefault();
+        onClose();
+      }
+    };
+    document.addEventListener("keydown", dismiss);
+    return () => document.removeEventListener("keydown", dismiss);
+  }, [onClose]);
+  if (!report) return /* @__PURE__ */ jsx2("section", { ref: panel, class: "scui-settings", role: "dialog", "aria-modal": "true", "aria-labelledby": titleId, children: /* @__PURE__ */ jsxs2("header", { children: [
+    /* @__PURE__ */ jsx2("button", { type: "button", "aria-label": "Close settings", onClick: onClose, children: /* @__PURE__ */ jsx2(UiIcon, { name: "close", size: 18 }) }),
+    /* @__PURE__ */ jsxs2("span", { children: [
+      /* @__PURE__ */ jsx2("strong", { id: titleId, children: "Harness settings" }),
+      /* @__PURE__ */ jsx2("small", { children: state.interopSettingsError ?? "No interoperability controls are available." })
+    ] })
+  ] }) });
+  const changed = report.controls.flatMap((control) => values[control.key] !== (control.configuredValue ?? control.effectiveValue ?? control.choices[0]?.value ?? null) ? [{ key: control.key, value: values[control.key] ?? null }] : []);
+  const submit = (event) => {
+    event.preventDefault();
+    if (!changed.length || !state.canConfigureSettings) return;
+    adapter.onIntent({ action: "configureHarness", harness: report.harness, changes: changed, expectedRevision: report.revision });
+  };
+  return /* @__PURE__ */ jsxs2("section", { ref: panel, class: "scui-settings", role: "dialog", "aria-modal": "true", "aria-labelledby": titleId, children: [
+    /* @__PURE__ */ jsxs2("header", { children: [
+      /* @__PURE__ */ jsx2("button", { type: "button", "aria-label": "Close settings", onClick: onClose, children: /* @__PURE__ */ jsx2(UiIcon, { name: "close", size: 18 }) }),
+      /* @__PURE__ */ jsxs2("span", { children: [
+        /* @__PURE__ */ jsxs2("strong", { id: titleId, children: [
+          harnessDisplayName(report.harness),
+          " interoperability"
+        ] }),
+        /* @__PURE__ */ jsx2("small", { children: "Native harness settings used by Supercode" })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs2("form", { onSubmit: submit, children: [
+      report.controls.map((control) => {
+        const choice = control.choices.find((item) => item.value === values[control.key]);
+        const recommendation = report.advisories.map((advisory) => advisory.recommendation).find((item) => item.change.key === control.key && item.change.value === values[control.key]);
+        const consequence = choice?.risk ?? recommendation?.consequence;
+        return /* @__PURE__ */ jsxs2("fieldset", { disabled: !control.writable || Boolean(state.operation), children: [
+          /* @__PURE__ */ jsxs2("label", { for: `scui-setting-${control.key}`, children: [
+            /* @__PURE__ */ jsx2("strong", { children: control.label }),
+            /* @__PURE__ */ jsx2("small", { children: control.description })
+          ] }),
+          /* @__PURE__ */ jsxs2("select", { id: `scui-setting-${control.key}`, value: values[control.key] ?? "@default", onChange: (event) => setValues((current) => ({ ...current, [control.key]: event.currentTarget.value === "@default" ? null : event.currentTarget.value })), children: [
+            control.resettable ? /* @__PURE__ */ jsx2("option", { value: "@default", children: "Use harness default" }) : null,
+            control.choices.map((item) => /* @__PURE__ */ jsx2("option", { value: item.value, children: item.label }, item.value))
+          ] }),
+          choice ? /* @__PURE__ */ jsx2("p", { children: choice.description }) : null,
+          consequence ? /* @__PURE__ */ jsxs2("p", { class: "scui-setting-risk", children: [
+            /* @__PURE__ */ jsx2("strong", { children: "Security consequence" }),
+            consequence
+          ] }) : null,
+          /* @__PURE__ */ jsxs2("small", { class: "scui-setting-source", children: [
+            control.effectiveNote,
+            control.sourcePath ? ` Source: ${control.sourcePath}` : ""
+          ] })
+        ] }, control.key);
+      }),
+      /* @__PURE__ */ jsxs2("footer", { children: [
+        /* @__PURE__ */ jsx2("button", { type: "button", onClick: onClose, children: "Cancel" }),
+        /* @__PURE__ */ jsx2("button", { type: "submit", disabled: !changed.length || !state.canConfigureSettings || Boolean(state.operation), children: state.operation === "configureHarness" ? "Applying\u2026" : "Apply changes" })
+      ] })
+    ] })
+  ] });
+}
+export {
+  HarnessAdvisory,
+  HarnessSettingsPanel
+};

package/styles.css

@@ -73,7 +73,7 @@
 .scui-logo[data-harness="pi"] { color:#111; background:#efefeb }
 .scui-logo[data-harness="supercode"] { background:#111923 }
 .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="working"] > i,.scui-logo[data-activity="running"] > i { background:var(--scui-positive) }
 .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) }
@@ -97,7 +97,7 @@
 .scui-session-copy { display:grid; flex:1; min-width:0; gap:1px }
 .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-title time { flex:none; color:var(--scui-muted); font-size:10px }
+.scui-session-copy strong { flex:1; font-size:12.5px }.scui-session-meta { display:flex; flex:none; align-items:center }.scui-session-title time { color:var(--scui-muted); font-size:10px }.scui-session-working { display:flex; flex:none; width:14px; height:8px; align-self:center; align-items:center; justify-content:space-between; color:var(--scui-muted) }.scui-session-working > i { width:3px; height:3px; border-radius:50%; background:currentColor; animation:scui-session-dots 1.2s ease-in-out infinite }.scui-session-working > i:nth-child(2) { animation-delay:.15s }.scui-session-working > i:nth-child(3) { animation-delay:.3s }
 .scui-session-path { display:flex; min-width:0; overflow:hidden; color:var(--scui-muted); font-size:9.5px; white-space:nowrap }
 .scui-session-path-leading { flex:0 1 auto; overflow:hidden; text-overflow:ellipsis }.scui-session-path-separator { flex:none }.scui-session-path-trailing { flex:none; max-width:58%; overflow:hidden; direction:rtl; text-align:left; text-overflow:ellipsis; unicode-bidi:plaintext }
 .scui-session-preview small { flex:1; min-width:0; color:var(--scui-muted); font-size:10.5px }.scui-session-preview b { display:grid; flex:none; min-width:16px; height:16px; padding:0 4px; place-items:center; border-radius:8px; background:var(--scui-accent); color:var(--scui-bg); font-size:9px; line-height:16px }
@@ -109,6 +109,15 @@
 .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-advisory { display:flex; flex:none; align-items:center; gap:7px; padding:6px 8px; border-top:1px solid var(--scui-border); background:var(--scui-bg-raised); font-size:10px }
+.scui-advisory > span:first-child { display:grid; width:17px; height:17px; flex:none; place-items:center; border:1px solid color-mix(in srgb,var(--scui-warning) 48%,var(--scui-border)); border-radius:50%; color:var(--scui-warning); font-size:10px; font-weight:700 }
+.scui-advisory[data-severity="error"] > span:first-child { border-color:color-mix(in srgb,var(--scui-danger) 48%,var(--scui-border)); color:var(--scui-danger) }
+.scui-advisory > span:nth-child(2) { display:grid; min-width:0; flex:1 }.scui-advisory strong,.scui-advisory small { overflow:hidden; text-overflow:ellipsis; white-space:nowrap }.scui-advisory small { color:var(--scui-muted) }
+.scui-advisory button { flex:none; padding:4px 7px; border:1px solid var(--scui-border-strong); border-radius:6px; background:var(--scui-bg); cursor:pointer }
+.scui-settings { position:absolute; z-index:30; inset:0; display:flex; min-height:0; flex-direction:column; background:var(--scui-bg); color:var(--scui-fg) }
+.scui-settings > header { display:flex; min-height:49px; flex:none; align-items:center; gap:8px; padding:7px 10px; border-bottom:1px solid var(--scui-border); background:var(--scui-bg-raised) }.scui-settings > header button { display:grid; width:30px; height:30px; padding:0; place-items:center; border:0; border-radius:8px; background:transparent; cursor:pointer }.scui-settings > header button:hover { background:var(--scui-fill) }.scui-settings > header span { display:grid; min-width:0 }.scui-settings > header small { color:var(--scui-muted); font-size:10px }
+.scui-settings form { display:flex; min-height:0; flex:1; flex-direction:column; overflow:auto }.scui-settings fieldset { display:grid; gap:7px; margin:0; padding:12px; border:0 }.scui-settings fieldset + fieldset { border-top:1px solid var(--scui-border) }.scui-settings fieldset > label { display:grid; gap:2px }.scui-settings fieldset > label small,.scui-settings fieldset > p,.scui-setting-source { color:var(--scui-muted); font-size:10.5px }.scui-settings select { width:100%; padding:7px 8px; border:1px solid var(--scui-border-strong); border-radius:7px; background:var(--scui-bg); color:var(--scui-fg) }.scui-settings fieldset > p { margin:0 }.scui-setting-risk { display:grid; gap:2px; padding:7px; border-left:2px solid var(--scui-warning); background:color-mix(in srgb,var(--scui-warning) 7%,transparent) }.scui-setting-risk strong { color:var(--scui-fg); font-size:10px }.scui-setting-source { overflow-wrap:anywhere }
+.scui-settings form > footer { display:flex; gap:6px; justify-content:flex-end; margin-top:auto; padding:8px; border-top:1px solid var(--scui-border); background:var(--scui-bg-raised) }.scui-settings form > footer button { padding:6px 9px; border:1px solid var(--scui-border-strong); border-radius:7px; background:var(--scui-bg); cursor:pointer }.scui-settings form > footer button[type="submit"] { border-color:var(--scui-fg); background:var(--scui-fg); color:var(--scui-bg) }.scui-settings button:disabled { opacity:.5; cursor:default }
 
 .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 }
@@ -189,6 +198,7 @@
 @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 } }
+@keyframes scui-session-dots { 50% { transform:translateY(-1px); opacity:.55 } }
 @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 }