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

package/composer.d.ts

@@ -0,0 +1,2 @@
+export type { MessengerLabels, SupercodeUiState, UiAdapter } from './index.js';
+export { Composer, ContinuationBar } from './index.js';

package/composer.mjs

@@ -1,11 +1,12 @@
-// src/components.jsx
-import MarkdownIt from "markdown-it";
-import { useEffect, useId, useLayoutEffect, useMemo, useRef, useState } from "preact/hooks";
+// src/composer.jsx
+import { useEffect, 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"
@@ -70,15 +71,16 @@ function isSendKey(event) {
   return event.key === "Enter" && !event.shiftKey && !event.isComposing;
 }
 
-// src/components.jsx
+// src/memory.js
+var MEMORY_LIMIT = 100;
+function boundedSet(map, key, value) {
+  map.delete(key);
+  map.set(key, value);
+  while (map.size > MEMORY_LIMIT) map.delete(map.keys().next().value);
+}
+
+// src/composer.jsx
 import { jsx, jsxs } from "preact/jsx-runtime";
-var markdown = new MarkdownIt({ html: false, linkify: true, breaks: false });
-var defaultLinkOpen = markdown.renderer.rules.link_open;
-markdown.renderer.rules.link_open = (tokens, index, options, env, self) => {
-  tokens[index]?.attrSet("target", "_blank");
-  tokens[index]?.attrSet("rel", "noreferrer noopener");
-  return defaultLinkOpen ? defaultLinkOpen(tokens, index, options, env, self) : self.renderToken(tokens, index, options);
-};
 var composerMemory = /* @__PURE__ */ new Map();
 function ContinuationBar({ state, adapter, labels = DEFAULT_LABELS }) {
   if (state.mode !== "mirror" || state.canSend) return null;
@@ -105,11 +107,17 @@ function Composer({ state, adapter, labels = DEFAULT_LABELS, memoryKey = state.a
   const [draft, setDraft] = useState(remembered.draft);
   const [queue, setQueue] = useState(remembered.queue);
   const textarea = useRef(null);
+  const remember = (nextDraft, nextQueue) => boundedSet(composerMemory, memoryKey, { draft: nextDraft, queue: nextQueue });
+  const updateQueue = (update) => setQueue((items) => {
+    const next = update(items);
+    remember(draft, next);
+    return next;
+  });
   useEffect(() => {
     if (!state.busy && state.canSend && queue.length) {
       const [next, ...rest] = queue;
       setQueue(rest);
-      composerMemory.set(memoryKey, { draft, queue: rest });
+      remember(draft, rest);
       onPending?.(next);
       adapter.onIntent({ action: "send", text: next });
     }
@@ -121,17 +129,13 @@ function Composer({ state, adapter, labels = DEFAULT_LABELS, memoryKey = state.a
   const send = () => {
     const text = draft.trim();
     if (!text) return;
-    if (state.busy) setQueue((items) => {
-      const next = [...items, text];
-      composerMemory.set(memoryKey, { draft: "", queue: next });
-      return next;
-    });
+    if (state.busy) updateQueue((items) => [...items, text]);
     else if (state.canSend) {
       onPending?.(text);
       adapter.onIntent({ action: "send", text });
     } else return;
     setDraft("");
-    composerMemory.set(memoryKey, { draft: "", queue: state.busy ? [...queue, text] : queue });
+    remember("", state.busy ? [...queue, text] : queue);
   };
   return /* @__PURE__ */ jsxs("div", { class: "scui-compose", children: [
     queue.length ? /* @__PURE__ */ jsxs("div", { class: "scui-queue", children: [
@@ -141,14 +145,14 @@ function Composer({ state, adapter, labels = DEFAULT_LABELS, memoryKey = state.a
       ] }),
       queue.map((item, index) => /* @__PURE__ */ jsxs("span", { children: [
         item,
-        /* @__PURE__ */ jsx("button", { "aria-label": `Remove queued message ${index + 1}`, onClick: () => setQueue((items) => items.filter((_, itemIndex) => itemIndex !== index)), children: "\xD7" })
+        /* @__PURE__ */ jsx("button", { type: "button", "aria-label": `Remove queued message ${index + 1}`, onClick: () => updateQueue((items) => items.filter((_, itemIndex) => itemIndex !== index)), children: "\xD7" })
       ] }, `${index}:${item}`))
     ] }) : null,
     /* @__PURE__ */ jsxs("div", { class: "scui-envelope", children: [
       /* @__PURE__ */ jsx("textarea", { ref: textarea, rows: 1, "aria-label": `Message ${harnessDisplayName(state.harness) || "agent"}`, placeholder: state.startup !== "ready" ? "Connecting\u2026" : state.busy ? "Queue a follow-up\u2026" : labels.askAgent, value: draft, disabled: state.mode !== "control" && !state.canSend, onInput: (event) => {
         const value = event.currentTarget.value;
         setDraft(value);
-        composerMemory.set(memoryKey, { draft: value, queue });
+        remember(value, queue);
       }, onKeyDown: (event) => {
         if (isSendKey(event)) {
           event.preventDefault();

package/controller.d.ts

@@ -7,7 +7,10 @@ import type {
   SupercodeController,
 } from '@volter-ai-dev/supercode-client';
 import type {
+  AttachedSessionModel,
   SessionAttention,
+  SessionRowModel,
+  StartupPhase,
   SupercodeUiIntent,
   SupercodeUiState,
   UiAdapter,
@@ -15,12 +18,33 @@ import type {
 
 export interface ClientProjectionOptions {
   now?: number;
+  /** Maximum rendered conversation rows after hidden context is removed. Default 120. */
+  maxEntries?: number;
+  /** Maximum native entries inspected to fill the rendered tail. Default four times `maxEntries`. */
+  maxScanEntries?: number;
+  /** Maximum characters retained independently in each rendered entry field. Default 16,000. */
+  maxEntryChars?: number;
+  /** Maximum controller-inventory rows projected when the host does not supply `sessions`. Default 100. */
+  maxSessions?: number;
+  /** Age in milliseconds for treating an inventory row as recently live. Default five minutes. */
+  liveWindowMs?: number;
+  /** Bounded native fidelity details; total counts remain truthful when arrays are shortened. */
+  maxResidueItems?: number;
+  maxResidueChars?: number;
+  maxSubagents?: number;
+  /** Host bootstrap phase before the controller itself is ready. */
+  startup?: StartupPhase;
   attention?: SessionAttention[];
   savedDraft?: string;
   history?: Partial<SupercodeUiState['history']>;
   exportBackTarget?: SessionFormat | null;
   exportReceipt?: SupercodeUiState['exportReceipt'];
   reductionReceipt?: SupercodeUiState['reductionReceipt'];
+  /** Trusted-host inventory and lifecycle overlays (for example a machine-wide session catalog). */
+  sessions?: SessionRowModel[];
+  attached?: AttachedSessionModel | null;
+  owned?: AttachedSessionModel | null;
+  attachError?: SupercodeUiState['attachError'];
 }
 
 export function projectClientSnapshot(

package/controller.mjs

@@ -3,11 +3,22 @@ import { normalizeUiState } from './core.mjs';
 const HARNESS_LABELS = {
   'claude-code': 'Claude Code',
   codex: 'Codex',
+  gemini: 'Gemini CLI',
+  goose: 'Goose',
   opencode: 'OpenCode',
   pi: 'Pi',
   grok: 'Grok',
 };
 
+const DEFAULT_MAX_ENTRIES = 120;
+const DEFAULT_MAX_ENTRY_CHARS = 16_000;
+const DEFAULT_MAX_SESSIONS = 100;
+const DEFAULT_LIVE_WINDOW_MS = 300_000;
+const MAX_PILL_LABEL_CHARS = 72;
+const DEFAULT_MAX_RESIDUE_ITEMS = 20;
+const DEFAULT_MAX_RESIDUE_CHARS = 300;
+const DEFAULT_MAX_SUBAGENTS = 50;
+
 function label(id, supplied) {
   return supplied || HARNESS_LABELS[id] || id;
 }
@@ -36,56 +47,145 @@ function payloadText(payload) {
   }
 }
 
-function projectConversation(conversation) {
-  return conversation.flatMap((entry) => {
-    if (!entry || typeof entry !== 'object' || typeof entry.id !== 'string') return [];
-    if (entry.kind === 'message') {
-      return [{
-        id: entry.id,
-        role: entry.role,
-        text: entry.text ?? '',
-        ts: null,
-        truncated: false,
-        ...(Array.isArray(entry.context) ? { context: entry.context } : {}),
-      }];
+function cloneJsonValue(value) {
+  if (Array.isArray(value)) return value.map(cloneJsonValue);
+  if (value !== null && typeof value === 'object') {
+    return Object.fromEntries(Object.entries(value).map(([key, nested]) => [key, cloneJsonValue(nested)]));
+  }
+  return value;
+}
+
+function positiveInteger(value, fallback) {
+  return Number.isInteger(value) && value > 0 ? value : fallback;
+}
+
+function truncate(value, max) {
+  const text = typeof value === 'string' ? value : '';
+  if (text.length <= max) return { text, truncated: false };
+  let end = max;
+  const last = text.charCodeAt(end - 1);
+  const next = text.charCodeAt(end);
+  if (last >= 0xd800 && last <= 0xdbff && next >= 0xdc00 && next <= 0xdfff) end -= 1;
+  return { text: `${text.slice(0, end)}…`, truncated: true };
+}
+
+function timestampFromMetadata(metadata) {
+  if (!metadata || typeof metadata !== 'object' || Array.isArray(metadata)) return null;
+  for (const key of ['timestamp', 'ts', 'time', 'created_at', 'createdAt', 'date']) {
+    const raw = metadata[key];
+    if (typeof raw !== 'string' || raw === '') continue;
+    if (/^\d+$/.test(raw)) {
+      const value = Number(raw);
+      if (Number.isFinite(value) && value > 0) return value < 1e11 ? value * 1000 : value;
+      continue;
     }
-    if (entry.kind === 'tool') {
-      return [{
-        id: entry.id,
-        role: 'tool',
-        text: entry.resultText ?? '',
-        ts: null,
-        truncated: false,
-        ...(entry.name ? { label: entry.name } : {}),
-        ...(entry.arguments ? { arguments: entry.arguments } : {}),
-        resultText: entry.resultText ?? '',
+    const value = Date.parse(raw);
+    if (Number.isFinite(value)) return value;
+  }
+  return null;
+}
+
+function projectContext(context) {
+  if (!Array.isArray(context)) return undefined;
+  const projected = context.flatMap((item) => item && typeof item === 'object'
+    && typeof item.label === 'string' && typeof item.detail === 'string'
+    ? [{
+        ...(typeof item.id === 'string' ? { id: item.id } : {}),
+        ...(typeof item.kind === 'string' ? { kind: item.kind } : {}),
+        label: item.label,
+        detail: item.detail,
+      }]
+    : []);
+  return projected.length ? projected : undefined;
+}
+
+function requestSummary(entry) {
+  const options = Array.isArray(entry.options)
+    ? entry.options.map((option) => option?.name).filter(Boolean).join(' / ')
+    : '';
+  const resolution = entry.resolution?.name ? ` → ${entry.resolution.name}` : '';
+  return options ? `${entry.requestKind}: ${options}${resolution}` : `${entry.requestKind ?? 'request'}${resolution}`;
+}
+
+function projectConversationEntry(entry, maxEntryChars) {
+  if (!entry || typeof entry !== 'object' || typeof entry.id !== 'string') return null;
+  if (entry.kind === 'message') {
+    if (entry.visibility === 'context') return null;
+    const body = truncate(entry.text, maxEntryChars);
+    const context = projectContext(entry.context);
+    return {
+      id: entry.id,
+      role: entry.role,
+      text: body.text,
+      ts: timestampFromMetadata(entry.metadata),
+      truncated: body.truncated,
+      ...(context ? { context } : {}),
+    };
+  }
+  if (entry.kind === 'tool') {
+    const argumentsText = truncate((entry.arguments ?? '').trim(), maxEntryChars);
+    const result = truncate((entry.resultText ?? '').trim(), maxEntryChars);
+    const primary = entry.status === 'pending' ? argumentsText : result;
+    return {
+      id: entry.id,
+      role: 'tool',
+      text: primary.text,
+      ts: timestampFromMetadata(entry.metadata),
+      truncated: argumentsText.truncated || result.truncated,
+      label: entry.name ?? 'tool',
+      arguments: argumentsText.text,
+      resultText: result.text,
+      status: entry.status,
+    };
+  }
+  if (entry.kind === 'reasoning') {
+    const body = truncate(entry.text, maxEntryChars);
+    return { id: entry.id, role: 'reasoning', text: body.text, ts: null, truncated: body.truncated, streaming: entry.streaming === true };
+  }
+  if (entry.kind === 'request') {
+    const summary = truncate(requestSummary(entry), maxEntryChars);
+    const payload = truncate(payloadText(entry.payload), maxEntryChars);
+    return {
+      id: entry.id,
+      role: 'request',
+      text: summary.text,
+      ts: null,
+      truncated: summary.truncated || payload.truncated,
+      request: {
+        requestId: cloneJsonValue(entry.requestId),
+        requestKind: entry.requestKind,
+        payloadText: payload.text,
+        options: Array.isArray(entry.options) ? entry.options.map((option) => ({ ...option })) : [],
+        cancellable: entry.cancellable === true,
         status: entry.status,
-      }];
-    }
-    if (entry.kind === 'reasoning') {
-      return [{ id: entry.id, role: 'reasoning', text: entry.text ?? '', ts: null, truncated: false, streaming: entry.streaming === true }];
-    }
-    if (entry.kind === 'request') {
-      return [{
-        id: entry.id,
-        role: 'request',
-        text: payloadText(entry.payload),
-        ts: null,
-        truncated: false,
-        request: {
-          requestId: entry.requestId,
-          requestKind: entry.requestKind,
-          payloadText: payloadText(entry.payload),
-          options: entry.options ?? [],
-          cancellable: entry.cancellable === true,
-          status: entry.status,
-          resolution: entry.resolution ?? null,
-        },
-      }];
-    }
-    if (entry.kind === 'notice') return [{ id: entry.id, role: 'notice', text: entry.text ?? '', ts: null, truncated: false, code: entry.code }];
-    return [];
-  });
+        resolution: entry.resolution ? { ...entry.resolution } : null,
+      },
+    };
+  }
+  if (entry.kind === 'notice') {
+    const body = truncate(entry.text || entry.code, maxEntryChars);
+    return { id: entry.id, role: 'notice', text: body.text, ts: null, truncated: body.truncated, code: entry.code };
+  }
+  return null;
+}
+
+function projectConversation(conversation, options) {
+  if (!Array.isArray(conversation)) return [];
+  const maxEntries = positiveInteger(options.maxEntries, DEFAULT_MAX_ENTRIES);
+  const maxEntryChars = positiveInteger(options.maxEntryChars, DEFAULT_MAX_ENTRY_CHARS);
+  const maxScanEntries = positiveInteger(options.maxScanEntries, maxEntries * 4);
+  const rows = [];
+  // Start at the tail and stop as soon as the bounded render window is full. Hidden harness
+  // context never consumes a slot. The independent scan cap prevents a corrupt/all-context
+  // transcript from turning this display projection back into an unbounded whole-history walk.
+  for (let index = conversation.length - 1, scanned = 0;
+    index >= 0 && rows.length < maxEntries && scanned < maxScanEntries;
+    index -= 1, scanned += 1) {
+    const row = projectConversationEntry(conversation[index], maxEntryChars);
+    if (row) rows.push(row);
+  }
+  rows.reverse();
+  return rows;
 }
 
 function attached(snapshot) {
@@ -106,16 +206,20 @@ function attached(snapshot) {
   };
 }
 
-function semantics(session) {
+function semantics(session, options) {
   if (!session) return { fidelity: null, residue: [], residueCount: 0, parseErrors: 0, rawRecords: 0, subagents: [] };
+  const residue = Array.isArray(session.residue) ? session.residue : [];
+  const maxResidueItems = positiveInteger(options.maxResidueItems, DEFAULT_MAX_RESIDUE_ITEMS);
+  const maxResidueChars = positiveInteger(options.maxResidueChars, DEFAULT_MAX_RESIDUE_CHARS);
+  const maxSubagents = positiveInteger(options.maxSubagents, DEFAULT_MAX_SUBAGENTS);
   return {
     fidelity: session.fidelity ?? null,
-    residue: Array.isArray(session.residue) ? session.residue : [],
-    residueCount: Array.isArray(session.residue) ? session.residue.length : 0,
+    residue: residue.slice(0, maxResidueItems).map((item) => truncate(String(item), maxResidueChars).text),
+    residueCount: residue.length,
     parseErrors: Number.isFinite(session.parse_error_lines) ? session.parse_error_lines : 0,
     rawRecords: Number.isFinite(session.raw_record_count) ? session.raw_record_count : 0,
-    subagents: Array.isArray(session.subagents) ? session.subagents.map((child, index) => ({
-      id: child.session_id ?? `${child.source}:${index}`,
+    subagents: Array.isArray(session.subagents) ? session.subagents.slice(0, maxSubagents).map((child, index) => ({
+      id: child.session_id ?? child.agent_id ?? `${child.source}:${index}`,
       source: child.source,
       model: child.model ?? null,
       messages: Array.isArray(child.messages) ? child.messages.length : 0,
@@ -124,12 +228,33 @@ function semantics(session) {
   };
 }
 
+function projectPill(snapshot) {
+  const text = (value) => truncate(value, MAX_PILL_LABEL_CHARS).text;
+  const harness = snapshot.activeHarness ?? 'agent';
+  if (snapshot.availability === 'loading') return { tone: 'off', label: text('connecting…') };
+  if (snapshot.availability === 'unavailable' || snapshot.availability === 'error') {
+    return { tone: 'dead', label: text(snapshot.error?.message ?? 'supercode unavailable') };
+  }
+  if (snapshot.error) return { tone: 'warn', label: text(snapshot.error.message) };
+  if (snapshot.turn?.state === 'running') return { tone: 'live', label: text(`${label(harness)} working…`) };
+  if (snapshot.turn?.state === 'interrupting') return { tone: 'warn', label: text('interrupting…') };
+  if (snapshot.turn?.state === 'reconciling') return { tone: 'live', label: text('syncing…') };
+  if (snapshot.connection?.mode === 'none') return { tone: 'off', label: text('no session') };
+  if (snapshot.connection?.mode === 'mirror') {
+    return snapshot.connection.messaging === 'live_peer'
+      ? { tone: 'live', label: text(`${label(harness)} live`) }
+      : { tone: 'warn', label: text(`${label(harness)} (read-only)`) };
+  }
+  return { tone: 'live', label: text(`${label(harness)} ready`) };
+}
+
 export function projectClientSnapshot(snapshot, options = {}) {
   const now = Number.isFinite(options.now) ? options.now : Date.now();
-  const busy = snapshot.turn?.state && snapshot.turn.state !== 'idle';
+  const busy = ['running', 'interrupting', 'reconciling'].includes(snapshot.turn?.state);
   const actions = snapshot.availableActions ?? {};
-  const active = attached(snapshot);
-  const sessions = (snapshot.sessions ?? []).map((session) => ({
+  const maxSessions = positiveInteger(options.maxSessions, DEFAULT_MAX_SESSIONS);
+  const liveWindowMs = positiveInteger(options.liveWindowMs, DEFAULT_LIVE_WINDOW_MS);
+  const snapshotSessions = (snapshot.sessions ?? []).slice(0, maxSessions).map((session) => ({
     key: session.key,
     harness: session.harness,
     name: workspaceName(session.cwd),
@@ -139,20 +264,23 @@ export function projectClientSnapshot(snapshot, options = {}) {
     updatedAt: session.updatedAt ?? null,
     messages: session.messageCount ?? null,
     active: session.key === snapshot.activeSessionKey,
-    live: typeof session.updatedAt === 'number' && now - session.updatedAt <= 300_000,
+    live: typeof session.updatedAt === 'number' && now - session.updatedAt <= liveWindowMs,
     runtimeStatus: session.liveStatus ?? null,
   }));
+  const sessions = options.sessions ?? snapshotSessions;
+  const active = options.attached === undefined ? attached(snapshot) : options.attached;
+  const owned = options.owned === undefined
+    ? snapshot.connection?.ownsRuntime ? active : null
+    : options.owned;
+  const maxEntries = positiveInteger(options.maxEntries, DEFAULT_MAX_ENTRIES);
+  const transcript = projectConversation(snapshot.conversation ?? [], options);
   const startup = snapshot.availability === 'loading'
     ? snapshot.operation === 'start' ? 'starting' : snapshot.operation === 'refresh' ? 'discovering' : 'connecting'
     : 'ready';
   return normalizeUiState({
-    pill: snapshot.error
-      ? { tone: 'dead', label: snapshot.error.message }
-      : busy ? { tone: 'live', label: `${label(snapshot.activeHarness)} working` }
-      : snapshot.availability === 'ready' ? { tone: 'live', label: `${label(snapshot.activeHarness) || 'Supercode'} ready` }
-      : { tone: 'off', label: 'connecting…' },
-    startup,
-    transcript: projectConversation(snapshot.conversation ?? []),
+    pill: projectPill(snapshot),
+    startup: options.startup ?? startup,
+    transcript,
     busy,
     operation: snapshot.operation,
     needsInput: Array.isArray(snapshot.requests) && snapshot.requests.some((request) => request.status === 'pending'),
@@ -177,7 +305,7 @@ export function projectClientSnapshot(snapshot, options = {}) {
       residueCount: snapshot.taskPlan?.residue?.length ?? 0,
       observedAt: snapshot.taskPlan?.observedAt ?? null,
     },
-    semantics: semantics(snapshot.activeSession),
+    semantics: semantics(snapshot.activeSession, options),
     terminalHandoff: snapshot.terminalLaunch ? {
       program: snapshot.terminalLaunch.program,
       arguments: snapshot.terminalLaunch.arguments,
@@ -198,15 +326,15 @@ export function projectClientSnapshot(snapshot, options = {}) {
     history: {
       sessionLimit: options.history?.sessionLimit ?? sessions.length,
       hasMoreSessions: options.history?.hasMoreSessions ?? false,
-      transcriptLimit: options.history?.transcriptLimit ?? Math.max(120, snapshot.conversation?.length ?? 0),
-      hasEarlier: options.history?.hasEarlier ?? false,
+      transcriptLimit: options.history?.transcriptLimit ?? maxEntries,
+      hasEarlier: options.history?.hasEarlier ?? (snapshot.conversation?.length ?? 0) > maxEntries,
     },
     savedDraft: options.savedDraft ?? '',
     attention: options.attention ?? [],
     sessions,
     attached: active,
-    owned: snapshot.connection?.ownsRuntime ? active : null,
-    attachError: null,
+    owned,
+    attachError: options.attachError ?? null,
   });
 }
 

package/conversation.d.ts

@@ -0,0 +1,20 @@
+export type {
+  ActivityGroupProps,
+  MessengerComponents,
+  MessengerSlots,
+  SessionSemanticsModel,
+  SupercodeUiState,
+  TaskPlanModel,
+  TranscriptEntryModel,
+  TranscriptEntryProps,
+  UiAdapter,
+} from './index.js';
+export {
+  ActivityGroup,
+  Conversation,
+  LoadingStatus,
+  RequestCard,
+  SessionDetails,
+  TaskPlan,
+  TranscriptEntry,
+} from './index.js';