@volter/teams 0.1.35 → 0.1.37

package/browser-channel.d.ts

@@ -0,0 +1,59 @@
+/** A tiny event emitter: the channel, its streams and a pane's terminal stream all speak it. */
+export interface ChannelEvents {
+  on(event: string, listener: (...args: any[]) => void): this;
+  once(event: string, listener: (...args: any[]) => void): this;
+  off(event: string, listener: (...args: any[]) => void): this;
+}
+
+/** One named stream of a channel (a door on the machine: `mail`, `terminal`, `node`, …). */
+export interface BrowserStream extends ChannelEvents {
+  readonly id: number;
+  readonly name: string;
+  closed: boolean;
+  /** Events: `data` (a frame's text), `close` (the reason, or null). */
+  write(data: string): void;
+  close(reason?: string | null): void;
+}
+
+/** A browser's channel to one machine, through its Teams server. Events: `hello` (the machine's greeting), `close`. */
+export declare class BrowserChannel implements ChannelEvents {
+  constructor(socket: WebSocket);
+  hello: unknown;
+  on(event: string, listener: (...args: any[]) => void): this;
+  once(event: string, listener: (...args: any[]) => void): this;
+  off(event: string, listener: (...args: any[]) => void): this;
+  /** Open a named stream; resolves once the machine accepts it, rejects with its refusal. */
+  open(name: string, params?: Record<string, unknown>): Promise<BrowserStream>;
+  close(): void;
+}
+
+export interface ChannelOptions {
+  /** Defaults to the browser's WebSocket. */
+  WebSocketImpl?: typeof WebSocket;
+}
+
+/** Machine `machineId` of team `teamId` on the Teams server at `origin`, reached with the caller's own `token`. */
+export function openBrowserMachine(target: { origin: string; teamId: string; machineId: string; token: string }, options?: ChannelOptions): Promise<BrowserChannel>;
+
+/**
+ * The machine running session `sessionId` of team `teamId`, reached with a workplace's session token (scope `control`)
+ * for a session its owner bound to the token's Room and Conversation: the server finds the machine.
+ */
+export function openBrowserSession(target: { origin: string; teamId: string; sessionId: string; token: string }, options?: ChannelOptions): Promise<BrowserChannel>;
+
+/** The machine's answer to a typed turn. `waiting`: filed, typed when the session's composer is free. */
+export type BrowserTurnAnswer =
+  | { code: 0; turn_id?: string; door?: 'runtime' | 'pane' | 'waiting'; text?: string }
+  | { code: number; text?: string };
+
+/** One line typed into the channel's session as its user's own turn; rejects when the machine refuses the stream. */
+export function sendBrowserTurn(channel: BrowserChannel, text: string): Promise<BrowserTurnAnswer>;
+
+/** A pane's terminal stream. Events: `data` (text), `hello`, `notice`, `error-message`, `close`. */
+export interface BrowserPane extends ChannelEvents {
+  write(text: string): void;
+  resize(cols: number, rows: number): void;
+  close(): void;
+}
+
+export function attachBrowserPane(channel: BrowserChannel, options: { pane: string; mode?: 'observe' | 'control'; cols?: number; rows?: number }): Promise<BrowserPane>;

package/package.json

@@ -1,13 +1,20 @@
 {
   "name": "@volter/teams",
-  "version": "0.1.35",
+  "version": "0.1.37",
   "type": "module",
   "description": "Volter Teams, the neutral team plane: machine identity and daemon core, the local door and server link, admission from machine grants, product doors, and the Teams server's neutral routes (company RFC 0008).",
   "license": "MIT",
   "exports": {
     ".": "./index.mjs",
     "./channel": "./channel.mjs",
-    "./browser-channel": "./browser-channel.mjs",
+    "./browser-channel": {
+      "types": "./browser-channel.d.ts",
+      "default": "./browser-channel.mjs"
+    },
+    "./session-follow": {
+      "types": "./session-follow.d.ts",
+      "default": "./session-follow.mjs"
+    },
     "./admission": "./admission.mjs",
     "./identity": "./identity.mjs",
     "./products": "./products.mjs",
@@ -31,6 +38,8 @@
   "files": [
     "LICENSE-MIT",
     "*.mjs",
+    "browser-channel.d.ts",
+    "session-follow.d.ts",
     "server",
     "viewer",
     "README.md"

package/server/viewer.mjs

@@ -10,6 +10,8 @@ const FILES = {
   // The same module under its own name, as a workplace console imports it (openBrowserSession, sendBrowserTurn).
   '/view/browser-channel.mjs': ['browser-channel.mjs', 'text/javascript; charset=utf-8'],
   '/view/stream-rpc.mjs': ['stream-rpc.mjs', 'text/javascript; charset=utf-8'],
+  // A team session followed live (the viewer's, and a workplace's own drawing of it: @volter/teams/session-follow).
+  '/view/session-follow.mjs': ['session-follow.mjs', 'text/javascript; charset=utf-8'],
   // A team session's surface: supercode-ui's transcript and composer, built by scripts/build-session-view.mjs.
   '/view/session-view.mjs': ['viewer/session-view.mjs', 'text/javascript; charset=utf-8'],
   '/view/session-view.css': ['viewer/session-view.css', 'text/css; charset=utf-8'],

package/session-follow.d.ts

@@ -0,0 +1,50 @@
+/** One read of a session: its descriptor, its messages (oldest first), the names of its members and machines. */
+export interface TeamSessionSnapshot {
+  descriptor: { id: string; harness: string; title?: string | null; user?: { principal_id?: string | null; reported_user?: string | null }; machine_ids?: string[]; [field: string]: unknown };
+  messages: Array<{ id: string; source_id?: string; native_key?: string; recorded_at?: number | null; value: { role: string; content?: unknown; metadata?: Record<string, unknown>; [field: string]: unknown } }>;
+  names?: { members?: Array<{ principal?: { id: string; display_name?: string } }>; machines?: Array<{ id: string; name?: string }> };
+  working?: unknown;
+  event_cursor?: string | number;
+  revision?: number;
+  [field: string]: unknown;
+}
+
+export interface FollowTeamSessionOptions {
+  origin: string;
+  teamId: string;
+  /** The session's id, or its harness's own (`claude-code:<id>`, or the id alone). */
+  sessionId: string;
+  /** The bearer to use now: a member's credential, or a workplace's delegated token refreshed as it runs out. */
+  token(): string | Promise<string>;
+  /** How many of the newest messages each read returns (1–500). */
+  tail?: number;
+  onSnapshot(snapshot: TeamSessionSnapshot): void;
+  onLive?(live: boolean): void;
+  /** A read or the follow failed; it retries by itself. `snapshot`: whether one was drawn before. */
+  onError?(failure: { stage: 'read' | 'follow'; status: number | null; message: string; snapshot?: boolean }): void;
+  onDeleted?(): void;
+  fetchImpl?: typeof fetch;
+  retryMs?: number;
+}
+
+/** Follow one session: its snapshot read whole, then its follow stream from that snapshot's cursor, reopened as it drops. */
+export function followTeamSession(options: FollowTeamSessionOptions): { stop(): void; read(): Promise<TeamSessionSnapshot> };
+
+/** A message another session sent this one, from its envelope: its sender and body, or null for an ordinary turn. */
+export function peerMessage(text: string): { name: string; address: string; body: string } | null;
+
+export function personImage(seed?: string): string;
+export function agentImage(seed: string): string;
+
+/**
+ * Who wrote each entry of a projected transcript (supercode-ui's `TranscriptEntryModel`s), from the messages' own
+ * annotations. Each actor carries `id` (a principal id, a session address or seed) for a host that draws its own faces.
+ */
+export function withPeople<Entry extends { role: string; text: string; ts: number | null; id: string }>(
+  transcript: Entry[],
+  messages: Array<{ role?: string; metadata?: Record<string, unknown> }>,
+  options?: { agentName?: string | null; sessionId?: string; personImage?(seed: string): string; agentImage?(seed: string): string; locale?: string | string[] },
+): Entry[];
+
+/** A session's message values as the harness SDK's normalized session, for supercode-ui's projection. */
+export function normalizedSession(descriptor: { id: string; harness: string }, messages: unknown[]): Record<string, unknown>;

package/session-follow.mjs

@@ -0,0 +1,152 @@
+// A team session, followed live from a browser (or any fetch host), and its messages as a transcript's authors: what
+// the hosted viewer uses, exported so a workplace that draws the session itself (RH2's Conversation, supercode-ui in
+// its own tree) reads and labels it the same way. No imports: it runs as the viewer's own module and in a host's bundle.
+
+/**
+ * Follow one session: its snapshot read whole (`/messages?tail=`, a busy session's is over the follow stream's 1 MB
+ * buffer), then its follow stream from that snapshot's cursor, each change meaning "read again". The stream ends when
+ * the token does or the connection drops, and is reopened from where it left off. `token()` returns the bearer to use
+ * now (a workplace's delegated token, refreshed as it runs out). Returns `stop()`.
+ *
+ * onSnapshot(body)        each read: { descriptor, messages, names, working, event_cursor, … }
+ * onLive(live)            the follow stream opened (true) or dropped (false)
+ * onError({ stage, status, message })   a read or the follow failed (`stage`: read | follow); it retries by itself
+ * onDeleted()             the session was deleted; following stops
+ */
+export function followTeamSession({ origin, teamId, sessionId, token, tail = 300, onSnapshot, onLive = () => {}, onError = () => {}, onDeleted = () => {}, fetchImpl = globalThis.fetch, retryMs = 2000 }) {
+  const base = `${origin}/api/v1/teams/${encodeURIComponent(teamId)}/sessions/${encodeURIComponent(sessionId)}`;
+  const decoder = new TextDecoder();
+  const controller = new AbortController();
+  const headers = async () => ({ Authorization: `Bearer ${await token()}` });
+  const failure = (stage, status, message) => Object.assign(new Error(message), { stage, status });
+  let reading = null;
+  const read = () => (reading ??= (async () => {
+    try {
+      const response = await fetchImpl(`${base}/messages?tail=${tail}`, { headers: await headers(), signal: controller.signal });
+      if (!response.ok) throw failure('read', response.status, `reading the session failed (${response.status})`);
+      const body = await response.json();
+      onSnapshot(body.data ?? body);
+      return body.data ?? body;
+    } finally { reading = null; }
+  })());
+  (async () => {
+    let cursor = null;
+    while (!controller.signal.aborted) {
+      try {
+        if (!cursor) cursor = String((await read()).event_cursor ?? '') || null;
+        const response = await fetchImpl(`${base}/events?${cursor ? `after=${encodeURIComponent(cursor)}` : 'tail=1'}`, { headers: await headers(), signal: controller.signal });
+        if (!response.ok) throw failure('follow', response.status, `following the session failed (${response.status})`);
+        onLive(true);
+        const reader = response.body.getReader();
+        let buffer = '';
+        for (;;) {
+          const { value, done } = await reader.read();
+          if (done) break;
+          buffer += decoder.decode(value, { stream: true });
+          let end;
+          while ((end = buffer.indexOf('\n\n')) >= 0) {
+            const block = buffer.slice(0, end);
+            buffer = buffer.slice(end + 2);
+            const data = block.split('\n').filter((line) => line.startsWith('data:')).map((line) => line.slice(5).trimStart()).join('\n');
+            if (!data) continue;
+            const event = JSON.parse(data);
+            if (event.cursor) cursor = event.cursor;
+            // The server ends a stream it can no longer resume (a slow reader, a retired cursor): start from a snapshot.
+            if (event.terminal && event.type === 'resync_required') cursor = null;
+            if (event.type === 'snapshot') onSnapshot(event.data);
+            else if (event.type === 'session_changed') read().catch((error) => { if (!controller.signal.aborted) onError({ stage: error.stage ?? 'read', status: error.status ?? null, message: error.message }); });
+            else if (event.type === 'session_deleted') { onLive(false); onDeleted(); return; }
+          }
+        }
+      } catch (error) {
+        if (controller.signal.aborted) return;
+        onError({ stage: error.stage ?? 'follow', status: error.status ?? null, message: error.message, snapshot: Boolean(cursor) });
+      }
+      onLive(false);
+      await new Promise((resolve) => setTimeout(resolve, retryMs));
+    }
+  })();
+  return { stop: () => controller.abort(), read };
+}
+
+/**
+ * A message another session sent this one, as its harness delivers it: an envelope naming the sender (a
+ * `cross-session-message` tag, the innermost one when the harness wraps it in its own) around the body. Returns
+ * { name, address, body }, or null for an ordinary turn.
+ */
+export function peerMessage(text) {
+  const close = text.search(/<\\?\/cross-session-message>/);
+  if (close < 0) return null;
+  const opens = [...text.slice(0, close).matchAll(/<\\?cross-session-message\b([^>]*)>/g)];
+  if (!opens.length) return null;
+  const inner = opens[opens.length - 1];
+  const attributes = (tag) => Object.fromEntries([...tag.matchAll(/([\w-]+)="([^"]*)"/g)].map((m) => [m[1], m[2]]));
+  const own = attributes(inner[1]), outer = attributes(opens[0][1]);
+  const body = text.slice(inner.index + inner[0].length, close).trim();
+  return { name: own['from-name'] || outer['from-name'] || own.from || outer.from || 'Another session', address: own.from || outer.from || '', body };
+}
+
+/** A person's picture: the brand's person placeholder, seeded; an empty seed is its one standard anonymous face. */
+export const personImage = (seed = '') => `https://brand.volter.ai/runner/svg?seed=${encodeURIComponent(seed)}&size=36&radius=18`;
+/** An agent's picture (this session's own, a peer session's): the brand's agent mark, a rounded square, never a face. */
+export const agentImage = (seed) => `https://brand.volter.ai/agent/svg?seed=${encodeURIComponent(seed)}&size=36&radius=7`;
+
+/**
+ * Who wrote each entry of a projected transcript (supercode-ui's entries), from the messages' own annotations:
+ * this session's turns are its agent's (`agentName`); a peer session's message is that session's, its envelope kept
+ * as context; a Room member's turn is theirs (source_name / source_principal_id, recorded when they typed it), anyone
+ * unnamed the standard anonymous face. Each actor carries `id` (a principal id, a session address or seed), so a host
+ * may draw its own faces; `personImage`/`agentImage` choose the default pictures. One author's run within five minutes
+ * is `continued`, and each entry has a short local `timeLabel`.
+ */
+export function withPeople(transcript, messages, { agentName = null, sessionId = '', personImage: person = personImage, agentImage: agent = agentImage, locale = [] } = {}) {
+  const byTime = new Map();
+  for (const message of messages) {
+    if (message?.role !== 'user') continue;
+    const at = Date.parse(message.metadata?.timestamp ?? '');
+    if (Number.isFinite(at)) byTime.set(at, message.metadata);
+  }
+  const people = transcript.map((entry) => {
+    if (entry.role === 'assistant') return { ...entry, actor: { id: sessionId, ...(agentName ? { name: agentName } : {}), image: agent(sessionId), kind: 'agent' } };
+    if (entry.role !== 'user') return entry;
+    // A harness's delivery notice about a message is a compact system line, not a person's turn.
+    if (/^\s*\[Cross-session [a-z ]*notice\]/i.test(entry.text)) return { ...entry, role: 'notice', text: entry.text.trim().split('\n')[0] };
+    const peer = peerMessage(entry.text);
+    if (peer) {
+      const seed = peer.address.startsWith('sc:') ? peer.address : peer.name;
+      return { ...entry, text: peer.body, actor: { id: seed, name: peer.name, image: agent(seed), kind: 'agent' }, context: [{ id: `${entry.id}:envelope`, kind: 'envelope', label: 'Delivered by supercode', detail: entry.text }] };
+    }
+    const metadata = byTime.get(entry.ts) ?? {};
+    const name = metadata.source_name || null;
+    const seed = name ? (metadata.source_principal_id || name) : '';
+    return { ...entry, actor: { ...(seed ? { id: seed } : {}), name: name ?? 'Someone in the session', image: person(seed), kind: 'person' } };
+  });
+  let last = null;
+  return people.map((entry) => {
+    if (!entry.actor) return entry;
+    const author = `${entry.actor.kind ?? ''}:${entry.actor.name ?? entry.role}`;
+    const continued = last !== null && last.author === author && Number.isFinite(entry.ts) && Number.isFinite(last.ts) && entry.ts - last.ts < 5 * 60_000;
+    last = { author, ts: entry.ts };
+    const timeLabel = Number.isFinite(entry.ts) ? new Date(entry.ts).toLocaleTimeString(locale, { hour: 'numeric', minute: '2-digit' }) : undefined;
+    return { ...entry, actor: { ...entry.actor, ...(continued ? { continued: true } : {}), ...(timeLabel ? { timeLabel } : {}) } };
+  });
+}
+
+const SOURCES = { 'claude-code': 'claude_code', codex: 'codex', gemini: 'gemini', goose: 'goose', grok: 'grok', opencode: 'opencode', pi: 'pi' };
+
+/** A team session's captured messages (their values, oldest first) as the harness SDK's normalized session, for supercode-ui's projection. */
+export function normalizedSession(descriptor, messages) {
+  return {
+    source: SOURCES[descriptor.harness] ?? 'native',
+    session_id: descriptor.id,
+    model: null,
+    cwd: null,
+    system_prompt: null,
+    agent_id: null,
+    parent_tool_use_id: null,
+    lineage: {},
+    trigger: 'human',
+    surface: null,
+    messages,
+  };
+}

package/viewer/index.html

@@ -18,7 +18,7 @@
   #status { padding: 4px 10px; color: var(--muted); font-size: 12px; border-bottom: 1px solid var(--line); }
   #status:empty { display: none; }
   main { flex: 1; min-height: 0; display: flex; }
-  #terminal { flex: 1; min-width: 0; padding: 4px; }
+  #terminal { flex: 1; min-width: 0; padding: 4px; color-scheme: light dark; background: var(--volter-terminal-background); }
   #folder { flex: 1; min-width: 0; display: none; }
   #folder.open { display: flex; }
   #entries { width: 280px; flex: none; border-right: 1px solid var(--line); overflow: auto; }

package/viewer/session-view-entry.mjs

@@ -8,82 +8,7 @@ import { Composer } from '@volter/supercode-ui/preact/composer';
 import { EMPTY_UI_STATE, normalizeUiState } from '@volter/supercode-ui';
 import { projectSubagentTranscript } from '@volter/supercode-ui/controller';
 
-// A person's picture: the brand's person placeholder. An empty seed is its one standard anonymous face.
-const personImage = (seed = '') => `https://brand.volter.ai/runner/svg?seed=${encodeURIComponent(seed)}&size=36&radius=18`;
-// An agent's picture (this session's own, a peer session's): the brand's agent mark, a rounded square, never a face.
-const agentImage = (seed) => `https://brand.volter.ai/agent/svg?seed=${encodeURIComponent(seed)}&size=36&radius=7`;
-
-/**
- * A message another session sent this one, as its harness delivers it: an envelope naming the sender (a
- * `cross-session-message` tag, the innermost one when the harness wraps it in its own) around the body. Returns the
- * sender and the body, or null for an ordinary turn.
- */
-function peerMessage(text) {
-  const close = text.search(/<\\?\/cross-session-message>/);
-  if (close < 0) return null;
-  const opens = [...text.slice(0, close).matchAll(/<\\?cross-session-message\b([^>]*)>/g)];
-  if (!opens.length) return null;
-  const inner = opens[opens.length - 1];
-  const attributes = (tag) => Object.fromEntries([...tag.matchAll(/([\w-]+)="([^"]*)"/g)].map((m) => [m[1], m[2]]));
-  const own = attributes(inner[1]), outer = attributes(opens[0][1]);
-  const body = text.slice(inner.index + inner[0].length, close).trim();
-  return { name: own['from-name'] || outer['from-name'] || own.from || outer.from || 'Another session', address: own.from || outer.from || '', body };
-}
-
-/**
- * Who wrote each user turn, from the message's own annotations (source_name / source_principal_id, recorded when a
- * Room member typed it): their name and face, or, for anyone unnamed, the standard anonymous face. Never an agent mark.
- */
-function withPeople(transcript, messages, { agentName = null, sessionId = '' } = {}) {
-  const byTime = new Map();
-  for (const message of messages) {
-    if (message?.role !== 'user') continue;
-    const at = Date.parse(message.metadata?.timestamp ?? '');
-    if (Number.isFinite(at)) byTime.set(at, message.metadata);
-  }
-  const people = transcript.map((entry) => {
-    // This session's own turns: named as the Room knows its agent, with the agent mark.
-    if (entry.role === 'assistant') return { ...entry, actor: { ...(agentName ? { name: agentName } : {}), image: agentImage(sessionId), kind: 'agent' } };
-    if (entry.role !== 'user') return entry;
-    // A harness's delivery notice about a message is a compact system line, not a person's turn.
-    if (/^\s*\[Cross-session [a-z ]*notice\]/i.test(entry.text)) return { ...entry, role: 'notice', text: entry.text.trim().split('\n')[0] };
-    const peer = peerMessage(entry.text);
-    if (peer) return { ...entry, text: peer.body, actor: { name: peer.name, image: agentImage(peer.address.startsWith('sc:') ? peer.address : peer.name), kind: 'agent' }, context: [{ id: `${entry.id}:envelope`, kind: 'envelope', label: 'Delivered by supercode', detail: entry.text }] };
-    const metadata = byTime.get(entry.ts) ?? {};
-    const name = metadata.source_name || null;
-    return { ...entry, actor: { name: name ?? 'Someone in the session', image: personImage(name ? (metadata.source_principal_id || name) : ''), kind: 'person' } };
-  });
-  // A row layout groups one author's run: a message by the same author within five minutes of their last is
-  // `continued` (no second avatar and name); a tool step does not break the run. Each shows a short local time.
-  let last = null;
-  return people.map((entry) => {
-    if (!entry.actor) return entry;
-    const author = `${entry.actor.kind ?? ''}:${entry.actor.name ?? entry.role}`;
-    const continued = last !== null && last.author === author && Number.isFinite(entry.ts) && Number.isFinite(last.ts) && entry.ts - last.ts < 5 * 60_000;
-    last = { author, ts: entry.ts };
-    const timeLabel = Number.isFinite(entry.ts) ? new Date(entry.ts).toLocaleTimeString([], { hour: 'numeric', minute: '2-digit' }) : undefined;
-    return { ...entry, actor: { ...entry.actor, ...(continued ? { continued: true } : {}), ...(timeLabel ? { timeLabel } : {}) } };
-  });
-}
-
-const SOURCES = { 'claude-code': 'claude_code', codex: 'codex', gemini: 'gemini', goose: 'goose', grok: 'grok', opencode: 'opencode', pi: 'pi' };
-
-/** A team session's captured messages as the harness SDK's normalized session, for supercode-ui's projection. */
-function normalizedSession(descriptor, messages) {
-  return {
-    source: SOURCES[descriptor.harness] ?? 'native',
-    session_id: descriptor.id,
-    model: null,
-    cwd: null,
-    system_prompt: null,
-    agent_id: null,
-    parent_tool_use_id: null,
-    lineage: {},
-    trigger: 'human',
-    surface: null,
-    messages,
-  };
-}
+import { withPeople, normalizedSession } from '../session-follow.mjs';
 
 /**
  * Mount one session into `element`. `update({ descriptor, messages, members, machines, live, status, error, sending })`

package/viewer/session-view.css

@@ -350,6 +350,12 @@
   .scui-progress-step { height:2px; overflow:hidden; border-radius:2px; background:var(--scui-fill) }
   .scui-progress-step[data-progress="done"] { background:var(--scui-accent) }
   .scui-progress-step[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-suggestions { list-style:none; margin:0 0 calc(6px * var(--scui-scaling)); padding:calc(3px * var(--scui-scaling)); max-height:calc(240px * var(--scui-scaling)); overflow-y:auto; border:1px solid var(--scui-border); border-radius:var(--scui-radius-md); background:var(--scui-bg-raised) }
+  .scui-suggestion { display:flex; align-items:center; gap:calc(8px * var(--scui-scaling)); padding:calc(5px * var(--scui-scaling)) calc(8px * var(--scui-scaling)); border-radius:var(--scui-radius-xs); color:var(--scui-fg); font-size:var(--scui-text-sm); cursor:pointer }
+  .scui-suggestion[data-active="true"] { background:var(--scui-fill) }
+  .scui-suggestion-image { width:20px; height:20px; border-radius:var(--scui-radius-xs); object-fit:cover; flex:0 0 auto }
+  .scui-suggestion-label { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
+  .scui-suggestion-detail { margin-left:auto; color:var(--scui-muted); font-size:var(--scui-text-xs); white-space:nowrap }
   .scui-context-candidates { display:flex; gap:calc(5px * var(--scui-scaling)); margin-bottom:calc(6px * var(--scui-scaling)); overflow-x:auto; padding:1px; scrollbar-width:thin }
   .scui-context-candidate { display:grid; grid-template-columns:auto minmax(0,1fr) auto; flex:0 0 auto; width:min(calc(180px * var(--scui-scaling)),55vw); min-height:calc(34px * var(--scui-scaling)); align-items:center; gap:calc(6px * var(--scui-scaling)); padding:calc(4px * var(--scui-scaling)) calc(6px * var(--scui-scaling)); border:1px solid var(--scui-border); border-radius:var(--scui-radius-md); background:var(--scui-bg); color:var(--scui-fg); text-align:left; cursor:pointer }
   .scui-context-candidate:hover:not(:disabled) { border-color:var(--scui-border-strong); background:var(--scui-fill) }