@volter-ai-dev/supercode-ui 0.1.46 → 0.1.47

package/README.md

@@ -206,8 +206,9 @@ errors, and owned/attached identities without reimplementing transcript or capab
 `projectSessionInventory` performs the corresponding title, latest-preview, activity, path, age,
 sorting, and row projection for raw machine-wide descriptors; the trusted host supplies only its
 opaque-key callback and retains the reversible locator map. Its `isWritable` capability callback
-is fail-closed: observed sessions remain neutral read-only channels until the host proves a real
-send or terminal-control path.
+is fail-closed: unread badges remain neutral until the host proves a real send or terminal-control
+path. Runtime activity remains independent, so a read-only channel can still truthfully show that
+its external agent is working or needs input.
 
 ## Modularity contract
 

package/activity.mjs

@@ -784,7 +784,6 @@ function sessionDisplayName(session) {
   return title && title !== session.name ? title : session.name || "Untitled chat";
 }
 function sessionActivity(state, row) {
-  if (!row.writable) return "observed";
   if (state.needsInput && row.active) return "needs-input";
   if (state.busy && row.active) return "working";
   if (row.runtimeStatus === "busy") return "working";
@@ -802,7 +801,6 @@ var ACTIVITY_PRIORITY = Object.freeze({
   finished: 30,
   running: 20,
   recent: 10,
-  observed: 0,
   idle: 0
 });
 function activityDetail(activity, preview, pill) {
@@ -813,13 +811,14 @@ function activityDetail(activity, preview, pill) {
   if (activity === "finished") return "Finished";
   if (activity === "unseen") return "New reply";
   if (activity === "running") return "Session is running";
-  if (activity === "observed") return "Read-only channel";
   return pill || "Agent chats";
 }
 function projectAgentActivity(value) {
   const state = normalizeUiState(value);
   const attentionByKey = new Map(state.attention.map((item) => [item.key, item]));
+  const sessionsByKey = new Map(state.sessions.map((row) => [row.key, row]));
   const unreadCount = state.attention.reduce((total, item) => total + (item.unreadCount ?? 1), 0);
+  const unreadTone = state.attention.length > 0 && state.attention.every((item) => sessionsByKey.get(item.key)?.writable) ? "attention" : "neutral";
   const ranked = state.sessions.map((row, index) => {
     const activity2 = sessionActivity(state, row);
     return {
@@ -843,7 +842,8 @@ function projectAgentActivity(value) {
     title: selected ? sessionDisplayName(selected.row) : fallback ? sessionDisplayName(fallback) : "Agent chats",
     detail: activityDetail(activity, preview, state.pill.label),
     activity,
-    unreadCount
+    unreadCount,
+    unreadTone
   };
 }
 function toolTarget(argumentsText) {
@@ -930,7 +930,7 @@ function AgentActivityLauncher({ state, onOpen, class: className = "", showSumma
   const Logo = components.HarnessLogo ?? HarnessLogo;
   const badge = value.unreadCount > 99 ? "99+" : String(value.unreadCount);
   const label = [value.title, value.detail, value.unreadCount ? `${value.unreadCount} unread` : ""].filter(Boolean).join(" \xB7 ");
-  return /* @__PURE__ */ jsxs2("button", { className: `scui-launcher ${className}`, "data-activity": value.activity, type: "button", "aria-label": `Open ${label}`, onClick: () => onOpen?.(value), children: [
+  return /* @__PURE__ */ jsxs2("button", { className: `scui-launcher ${className}`, "data-activity": value.activity, "data-unread-tone": value.unreadTone, type: "button", "aria-label": `Open ${label}`, onClick: () => onOpen?.(value), children: [
     /* @__PURE__ */ jsxs2("span", { className: "scui-launcher-logo", children: [
       /* @__PURE__ */ jsx2(Logo, { id: value.harness || "supercode", activity: value.activity, size: 36 }),
       value.unreadCount ? /* @__PURE__ */ jsx2("b", { "aria-hidden": "true", children: badge }) : null

package/components.mjs

@@ -796,7 +796,6 @@ function sessionDisplayName(session) {
   return title && title !== session.name ? title : session.name || "Untitled chat";
 }
 function sessionActivity(state, row) {
-  if (!row.writable) return "observed";
   if (state.needsInput && row.active) return "needs-input";
   if (state.busy && row.active) return "working";
   if (row.runtimeStatus === "busy") return "working";
@@ -814,7 +813,6 @@ var ACTIVITY_PRIORITY = Object.freeze({
   finished: 30,
   running: 20,
   recent: 10,
-  observed: 0,
   idle: 0
 });
 function activityDetail(activity, preview, pill) {
@@ -825,13 +823,14 @@ function activityDetail(activity, preview, pill) {
   if (activity === "finished") return "Finished";
   if (activity === "unseen") return "New reply";
   if (activity === "running") return "Session is running";
-  if (activity === "observed") return "Read-only channel";
   return pill || "Agent chats";
 }
 function projectAgentActivity(value) {
   const state = normalizeUiState(value);
   const attentionByKey = new Map(state.attention.map((item) => [item.key, item]));
+  const sessionsByKey = new Map(state.sessions.map((row) => [row.key, row]));
   const unreadCount = state.attention.reduce((total, item) => total + (item.unreadCount ?? 1), 0);
+  const unreadTone = state.attention.length > 0 && state.attention.every((item) => sessionsByKey.get(item.key)?.writable) ? "attention" : "neutral";
   const ranked = state.sessions.map((row, index) => {
     const activity2 = sessionActivity(state, row);
     return {
@@ -855,7 +854,8 @@ function projectAgentActivity(value) {
     title: selected ? sessionDisplayName(selected.row) : fallback ? sessionDisplayName(fallback) : "Agent chats",
     detail: activityDetail(activity, preview, state.pill.label),
     activity,
-    unreadCount
+    unreadCount,
+    unreadTone
   };
 }
 function filterSessions(rows, query) {
@@ -1643,7 +1643,7 @@ function AgentActivityLauncher({ state, onOpen, class: className = "", showSumma
   const Logo = components.HarnessLogo ?? HarnessLogo;
   const badge = value.unreadCount > 99 ? "99+" : String(value.unreadCount);
   const label = [value.title, value.detail, value.unreadCount ? `${value.unreadCount} unread` : ""].filter(Boolean).join(" \xB7 ");
-  return /* @__PURE__ */ jsxs5("button", { className: `scui-launcher ${className}`, "data-activity": value.activity, type: "button", "aria-label": `Open ${label}`, onClick: () => onOpen?.(value), children: [
+  return /* @__PURE__ */ jsxs5("button", { className: `scui-launcher ${className}`, "data-activity": value.activity, "data-unread-tone": value.unreadTone, type: "button", "aria-label": `Open ${label}`, onClick: () => onOpen?.(value), children: [
     /* @__PURE__ */ jsxs5("span", { className: "scui-launcher-logo", children: [
       /* @__PURE__ */ jsx5(Logo, { id: value.harness || "supercode", activity: value.activity, size: 36 }),
       value.unreadCount ? /* @__PURE__ */ jsx5("b", { "aria-hidden": "true", children: badge }) : null

package/composer.mjs

@@ -77,7 +77,6 @@ var ACTIVITY_PRIORITY = Object.freeze({
   finished: 30,
   running: 20,
   recent: 10,
-  observed: 0,
   idle: 0
 });
 function canContinueHere(state) {

package/conversation.mjs

@@ -439,7 +439,6 @@ var ACTIVITY_PRIORITY = Object.freeze({
   finished: 30,
   running: 20,
   recent: 10,
-  observed: 0,
   idle: 0
 });
 function groupConversation(entries) {

package/core.mjs

@@ -859,9 +859,6 @@ export function sessionDisplayName(session) {
 }
 
 export function sessionActivity(state, row) {
-  // Runtime activity and interaction authority are deliberately independent. A process may be
-  // busy in another terminal, but presenting it as this surface's active agent is misleading.
-  if (!row.writable) return 'observed';
   if (state.needsInput && row.active) return 'needs-input';
   if (state.busy && row.active) return 'working';
   // Unread/finished attention has its own badge. It must not suppress the
@@ -882,7 +879,6 @@ const ACTIVITY_PRIORITY = Object.freeze({
   finished: 30,
   running: 20,
   recent: 10,
-  observed: 0,
   idle: 0,
 });
 
@@ -894,7 +890,6 @@ function activityDetail(activity, preview, pill) {
   if (activity === 'finished') return 'Finished';
   if (activity === 'unseen') return 'New reply';
   if (activity === 'running') return 'Session is running';
-  if (activity === 'observed') return 'Read-only channel';
   return pill || 'Agent chats';
 }
 
@@ -902,7 +897,12 @@ function activityDetail(activity, preview, pill) {
 export function projectAgentActivity(value) {
   const state = normalizeUiState(value);
   const attentionByKey = new Map(state.attention.map((item) => [item.key, item]));
+  const sessionsByKey = new Map(state.sessions.map((row) => [row.key, row]));
   const unreadCount = state.attention.reduce((total, item) => total + (item.unreadCount ?? 1), 0);
+  const unreadTone = state.attention.length > 0
+    && state.attention.every((item) => sessionsByKey.get(item.key)?.writable)
+    ? 'attention'
+    : 'neutral';
   const ranked = state.sessions.map((row, index) => {
     const activity = sessionActivity(state, row);
     return {
@@ -927,6 +927,7 @@ export function projectAgentActivity(value) {
     detail: activityDetail(activity, preview, state.pill.label),
     activity,
     unreadCount,
+    unreadTone,
   };
 }
 

package/embed.mjs

@@ -799,7 +799,6 @@ function sessionDisplayName(session) {
   return title && title !== session.name ? title : session.name || "Untitled chat";
 }
 function sessionActivity(state, row) {
-  if (!row.writable) return "observed";
   if (state.needsInput && row.active) return "needs-input";
   if (state.busy && row.active) return "working";
   if (row.runtimeStatus === "busy") return "working";
@@ -817,7 +816,6 @@ var ACTIVITY_PRIORITY = Object.freeze({
   finished: 30,
   running: 20,
   recent: 10,
-  observed: 0,
   idle: 0
 });
 function filterSessions(rows, query) {

package/index.d.ts

@@ -8,7 +8,7 @@ export type ControlStrategy = 'start' | 'resume' | 'attach' | 'branch' | 'reduce
 export type ExecutionMode = 'headless' | 'terminal';
 /** @deprecated Use ExecutionMode. */
 export type ContinuationMode = ExecutionMode;
-export type SessionActivity = 'idle' | 'observed' | 'recent' | 'running' | 'working' | 'needs-input' | 'finished' | 'failed' | 'unseen';
+export type SessionActivity = 'idle' | 'recent' | 'running' | 'working' | 'needs-input' | 'finished' | 'failed' | 'unseen';
 
 export interface AgentActivityModel {
   harness: HarnessId | '';
@@ -17,6 +17,7 @@ export interface AgentActivityModel {
   detail: string;
   activity: SessionActivity;
   unreadCount: number;
+  unreadTone: 'attention' | 'neutral';
 }
 
 export interface HarnessOption {

package/messenger.mjs

@@ -796,7 +796,6 @@ function sessionDisplayName(session) {
   return title && title !== session.name ? title : session.name || "Untitled chat";
 }
 function sessionActivity(state, row) {
-  if (!row.writable) return "observed";
   if (state.needsInput && row.active) return "needs-input";
   if (state.busy && row.active) return "working";
   if (row.runtimeStatus === "busy") return "working";
@@ -814,7 +813,6 @@ var ACTIVITY_PRIORITY = Object.freeze({
   finished: 30,
   running: 20,
   recent: 10,
-  observed: 0,
   idle: 0
 });
 function filterSessions(rows, query) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@volter-ai-dev/supercode-ui",
-  "version": "0.1.46",
+  "version": "0.1.47",
   "type": "module",
   "description": "Composable default UI kit for Supercode-powered coding-agent experiences",
   "exports": {

package/react/activity.mjs

@@ -784,7 +784,6 @@ function sessionDisplayName(session) {
   return title && title !== session.name ? title : session.name || "Untitled chat";
 }
 function sessionActivity(state, row) {
-  if (!row.writable) return "observed";
   if (state.needsInput && row.active) return "needs-input";
   if (state.busy && row.active) return "working";
   if (row.runtimeStatus === "busy") return "working";
@@ -802,7 +801,6 @@ var ACTIVITY_PRIORITY = Object.freeze({
   finished: 30,
   running: 20,
   recent: 10,
-  observed: 0,
   idle: 0
 });
 function activityDetail(activity, preview, pill) {
@@ -813,13 +811,14 @@ function activityDetail(activity, preview, pill) {
   if (activity === "finished") return "Finished";
   if (activity === "unseen") return "New reply";
   if (activity === "running") return "Session is running";
-  if (activity === "observed") return "Read-only channel";
   return pill || "Agent chats";
 }
 function projectAgentActivity(value) {
   const state = normalizeUiState(value);
   const attentionByKey = new Map(state.attention.map((item) => [item.key, item]));
+  const sessionsByKey = new Map(state.sessions.map((row) => [row.key, row]));
   const unreadCount = state.attention.reduce((total, item) => total + (item.unreadCount ?? 1), 0);
+  const unreadTone = state.attention.length > 0 && state.attention.every((item) => sessionsByKey.get(item.key)?.writable) ? "attention" : "neutral";
   const ranked = state.sessions.map((row, index) => {
     const activity2 = sessionActivity(state, row);
     return {
@@ -843,7 +842,8 @@ function projectAgentActivity(value) {
     title: selected ? sessionDisplayName(selected.row) : fallback ? sessionDisplayName(fallback) : "Agent chats",
     detail: activityDetail(activity, preview, state.pill.label),
     activity,
-    unreadCount
+    unreadCount,
+    unreadTone
   };
 }
 function toolTarget(argumentsText) {
@@ -930,7 +930,7 @@ function AgentActivityLauncher({ state, onOpen, class: className = "", showSumma
   const Logo = components.HarnessLogo ?? HarnessLogo;
   const badge = value.unreadCount > 99 ? "99+" : String(value.unreadCount);
   const label = [value.title, value.detail, value.unreadCount ? `${value.unreadCount} unread` : ""].filter(Boolean).join(" \xB7 ");
-  return /* @__PURE__ */ jsxs2("button", { className: `scui-launcher ${className}`, "data-activity": value.activity, type: "button", "aria-label": `Open ${label}`, onClick: () => onOpen?.(value), children: [
+  return /* @__PURE__ */ jsxs2("button", { className: `scui-launcher ${className}`, "data-activity": value.activity, "data-unread-tone": value.unreadTone, type: "button", "aria-label": `Open ${label}`, onClick: () => onOpen?.(value), children: [
     /* @__PURE__ */ jsxs2("span", { className: "scui-launcher-logo", children: [
       /* @__PURE__ */ jsx2(Logo, { id: value.harness || "supercode", activity: value.activity, size: 36 }),
       value.unreadCount ? /* @__PURE__ */ jsx2("b", { "aria-hidden": "true", children: badge }) : null

package/react/components.mjs

@@ -796,7 +796,6 @@ function sessionDisplayName(session) {
   return title && title !== session.name ? title : session.name || "Untitled chat";
 }
 function sessionActivity(state, row) {
-  if (!row.writable) return "observed";
   if (state.needsInput && row.active) return "needs-input";
   if (state.busy && row.active) return "working";
   if (row.runtimeStatus === "busy") return "working";
@@ -814,7 +813,6 @@ var ACTIVITY_PRIORITY = Object.freeze({
   finished: 30,
   running: 20,
   recent: 10,
-  observed: 0,
   idle: 0
 });
 function activityDetail(activity, preview, pill) {
@@ -825,13 +823,14 @@ function activityDetail(activity, preview, pill) {
   if (activity === "finished") return "Finished";
   if (activity === "unseen") return "New reply";
   if (activity === "running") return "Session is running";
-  if (activity === "observed") return "Read-only channel";
   return pill || "Agent chats";
 }
 function projectAgentActivity(value) {
   const state = normalizeUiState(value);
   const attentionByKey = new Map(state.attention.map((item) => [item.key, item]));
+  const sessionsByKey = new Map(state.sessions.map((row) => [row.key, row]));
   const unreadCount = state.attention.reduce((total, item) => total + (item.unreadCount ?? 1), 0);
+  const unreadTone = state.attention.length > 0 && state.attention.every((item) => sessionsByKey.get(item.key)?.writable) ? "attention" : "neutral";
   const ranked = state.sessions.map((row, index) => {
     const activity2 = sessionActivity(state, row);
     return {
@@ -855,7 +854,8 @@ function projectAgentActivity(value) {
     title: selected ? sessionDisplayName(selected.row) : fallback ? sessionDisplayName(fallback) : "Agent chats",
     detail: activityDetail(activity, preview, state.pill.label),
     activity,
-    unreadCount
+    unreadCount,
+    unreadTone
   };
 }
 function filterSessions(rows, query) {
@@ -1643,7 +1643,7 @@ function AgentActivityLauncher({ state, onOpen, class: className = "", showSumma
   const Logo = components.HarnessLogo ?? HarnessLogo;
   const badge = value.unreadCount > 99 ? "99+" : String(value.unreadCount);
   const label = [value.title, value.detail, value.unreadCount ? `${value.unreadCount} unread` : ""].filter(Boolean).join(" \xB7 ");
-  return /* @__PURE__ */ jsxs5("button", { className: `scui-launcher ${className}`, "data-activity": value.activity, type: "button", "aria-label": `Open ${label}`, onClick: () => onOpen?.(value), children: [
+  return /* @__PURE__ */ jsxs5("button", { className: `scui-launcher ${className}`, "data-activity": value.activity, "data-unread-tone": value.unreadTone, type: "button", "aria-label": `Open ${label}`, onClick: () => onOpen?.(value), children: [
     /* @__PURE__ */ jsxs5("span", { className: "scui-launcher-logo", children: [
       /* @__PURE__ */ jsx5(Logo, { id: value.harness || "supercode", activity: value.activity, size: 36 }),
       value.unreadCount ? /* @__PURE__ */ jsx5("b", { "aria-hidden": "true", children: badge }) : null

package/react/composer.mjs

@@ -77,7 +77,6 @@ var ACTIVITY_PRIORITY = Object.freeze({
   finished: 30,
   running: 20,
   recent: 10,
-  observed: 0,
   idle: 0
 });
 function canContinueHere(state) {

package/react/conversation.mjs

@@ -439,7 +439,6 @@ var ACTIVITY_PRIORITY = Object.freeze({
   finished: 30,
   running: 20,
   recent: 10,
-  observed: 0,
   idle: 0
 });
 function groupConversation(entries) {

package/react/messenger.mjs

@@ -796,7 +796,6 @@ function sessionDisplayName(session) {
   return title && title !== session.name ? title : session.name || "Untitled chat";
 }
 function sessionActivity(state, row) {
-  if (!row.writable) return "observed";
   if (state.needsInput && row.active) return "needs-input";
   if (state.busy && row.active) return "working";
   if (row.runtimeStatus === "busy") return "working";
@@ -814,7 +813,6 @@ var ACTIVITY_PRIORITY = Object.freeze({
   finished: 30,
   running: 20,
   recent: 10,
-  observed: 0,
   idle: 0
 });
 function filterSessions(rows, query) {

package/react/sessions.mjs

@@ -83,7 +83,6 @@ function sessionDisplayName(session) {
   return title && title !== session.name ? title : session.name || "Untitled chat";
 }
 function sessionActivity(state, row) {
-  if (!row.writable) return "observed";
   if (state.needsInput && row.active) return "needs-input";
   if (state.busy && row.active) return "working";
   if (row.runtimeStatus === "busy") return "working";
@@ -101,7 +100,6 @@ var ACTIVITY_PRIORITY = Object.freeze({
   finished: 30,
   running: 20,
   recent: 10,
-  observed: 0,
   idle: 0
 });
 function filterSessions(rows, query) {

package/react/settings.mjs

@@ -77,7 +77,6 @@ var ACTIVITY_PRIORITY = Object.freeze({
   finished: 30,
   running: 20,
   recent: 10,
-  observed: 0,
   idle: 0
 });
 

package/sessions.mjs

@@ -83,7 +83,6 @@ function sessionDisplayName(session) {
   return title && title !== session.name ? title : session.name || "Untitled chat";
 }
 function sessionActivity(state, row) {
-  if (!row.writable) return "observed";
   if (state.needsInput && row.active) return "needs-input";
   if (state.busy && row.active) return "working";
   if (row.runtimeStatus === "busy") return "working";
@@ -101,7 +100,6 @@ var ACTIVITY_PRIORITY = Object.freeze({
   finished: 30,
   running: 20,
   recent: 10,
-  observed: 0,
   idle: 0
 });
 function filterSessions(rows, query) {

package/settings.mjs

@@ -77,7 +77,6 @@ var ACTIVITY_PRIORITY = Object.freeze({
   finished: 30,
   running: 20,
   recent: 10,
-  observed: 0,
   idle: 0
 });
 

package/styles.css

@@ -73,7 +73,6 @@
 .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="observed"] > i { background:var(--scui-muted) }
 .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) }
@@ -81,6 +80,7 @@
 
 .scui-launcher { --scui-bg:#fff; --scui-fg:#191918; --scui-muted:#5f5f5a; --scui-border:#deded9; --scui-positive:#22863a; --scui-warning:#b26a00; --scui-danger:#b4232e; display:inline-flex; min-width:44px; min-height:44px; align-items:center; gap:8px; padding:4px; overflow:visible; border:1px solid var(--scui-border); border-radius:999px; background:color-mix(in srgb,var(--scui-bg) 88%,transparent); color:var(--scui-fg); box-shadow:0 5px 18px rgba(0,0,0,.14); cursor:pointer; font:12px/1.25 var(--scui-font,Inter,ui-sans-serif,system-ui,sans-serif); backdrop-filter:blur(10px) }
 .scui-launcher-logo { position:relative; display:grid; flex:none; place-items:center }.scui-launcher-logo > b { position:absolute; z-index:1; top:-6px; right:-8px; display:grid; min-width:18px; height:18px; padding:0 4px; place-items:center; border:2px solid var(--scui-bg); border-radius:999px; background:var(--scui-danger); color:#fff; font-size:9px; line-height:1 }
+.scui-launcher[data-unread-tone="neutral"] .scui-launcher-logo > b { background:var(--scui-muted) }
 .scui-launcher-copy { display:grid; min-width:0; max-width:220px; padding-right:8px; text-align:left }.scui-launcher-copy strong,.scui-launcher-copy small { overflow:hidden; text-overflow:ellipsis; white-space:nowrap }.scui-launcher-copy small { color:var(--scui-muted); font-size:10px }
 .scui-launcher:hover { border-color:color-mix(in srgb,var(--scui-fg) 28%,var(--scui-border)); box-shadow:0 7px 22px rgba(0,0,0,.18) }.scui-launcher:focus-visible { outline:2px solid currentColor; outline-offset:2px }
 @media (prefers-color-scheme:dark) { .scui-launcher { --scui-bg:#151515; --scui-fg:#f3f3ef; --scui-muted:#a3a39d; --scui-border:#353532; --scui-positive:#57c26e; --scui-warning:#e8a23a; --scui-danger:#ff747d } }
@@ -108,6 +108,7 @@
 .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 }
+.scui-session[data-writable="false"] .scui-session-preview b { background:var(--scui-muted) }
 .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:disabled { opacity:.65; cursor:default }