@volter-ai-dev/supercode-ui 0.1.0

package/composer.mjs

@@ -0,0 +1,168 @@
+// src/components.jsx
+import MarkdownIt from "markdown-it";
+import { useEffect, useId, useLayoutEffect, useMemo, useRef, useState } from "preact/hooks";
+
+// core.mjs
+var HARNESS_NAMES = Object.freeze({
+  "claude-code": "Claude Code",
+  codex: "Codex",
+  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,
+  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,
+  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;
+}
+function canContinueHere(state) {
+  if (state.mode !== "mirror" || state.canSend) return false;
+  const row = state.attached?.key ? state.sessions.find((item) => item.key === state.attached.key) : null;
+  return state.canResume && row?.runtimeStatus !== "busy" && row?.runtimeStatus !== "idle";
+}
+function isSendKey(event) {
+  return event.key === "Enter" && !event.shiftKey && !event.isComposing;
+}
+
+// src/components.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;
+  const attached = state.attached;
+  const row = attached?.key ? state.sessions.find((item) => item.key === attached.key) : null;
+  const activeElsewhere = row?.runtimeStatus === "busy" || row?.runtimeStatus === "idle";
+  const resume = canContinueHere(state);
+  const join = state.canAttach;
+  const branch = state.canBranch;
+  if (!resume && !join && !branch) return /* @__PURE__ */ jsx("div", { class: "scui-continuation", children: /* @__PURE__ */ jsxs("span", { children: [
+    /* @__PURE__ */ jsx("strong", { children: activeElsewhere ? "Active elsewhere" : "Read-only" }),
+    /* @__PURE__ */ jsx("small", { children: "This session cannot be continued by an available harness." })
+  ] }) });
+  return /* @__PURE__ */ jsxs("div", { class: "scui-continuation", children: [
+    /* @__PURE__ */ jsxs("span", { children: [
+      /* @__PURE__ */ jsx("strong", { children: activeElsewhere ? "Active elsewhere" : "Read-only" }),
+      /* @__PURE__ */ jsx("small", { children: join ? "Join the proven live runtime without taking it over." : resume ? `Resume this ${harnessDisplayName(state.harness)} session here.` : "Start an independent continuation." })
+    ] }),
+    /* @__PURE__ */ jsx("button", { type: "button", disabled: Boolean(state.operation), onClick: () => adapter.onIntent(join ? { action: "join" } : resume ? { action: "resume" } : { action: "branch" }), children: join ? labels.joinLive : resume ? labels.continueHere : labels.forkHere })
+  ] });
+}
+function Composer({ state, adapter, labels = DEFAULT_LABELS, memoryKey = state.attached?.key || `${state.harness}:${state.workspace}`, onPending }) {
+  const remembered = composerMemory.get(memoryKey) ?? { draft: state.savedDraft, queue: [] };
+  const [draft, setDraft] = useState(remembered.draft);
+  const [queue, setQueue] = useState(remembered.queue);
+  const textarea = useRef(null);
+  useEffect(() => {
+    if (!state.busy && state.canSend && queue.length) {
+      const [next, ...rest] = queue;
+      setQueue(rest);
+      composerMemory.set(memoryKey, { draft, queue: rest });
+      onPending?.(next);
+      adapter.onIntent({ action: "send", text: next });
+    }
+  }, [adapter, draft, memoryKey, onPending, queue, state.busy, state.canSend]);
+  useEffect(() => {
+    const timer = setTimeout(() => adapter.onIntent({ action: "draft", text: draft }), 250);
+    return () => clearTimeout(timer);
+  }, [adapter, draft]);
+  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;
+    });
+    else if (state.canSend) {
+      onPending?.(text);
+      adapter.onIntent({ action: "send", text });
+    } else return;
+    setDraft("");
+    composerMemory.set(memoryKey, { draft: "", queue: state.busy ? [...queue, text] : queue });
+  };
+  return /* @__PURE__ */ jsxs("div", { class: "scui-compose", children: [
+    queue.length ? /* @__PURE__ */ jsxs("div", { class: "scui-queue", children: [
+      /* @__PURE__ */ jsxs("strong", { children: [
+        queue.length,
+        " queued"
+      ] }),
+      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" })
+      ] }, `${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 });
+      }, onKeyDown: (event) => {
+        if (isSendKey(event)) {
+          event.preventDefault();
+          send();
+        }
+      } }),
+      /* @__PURE__ */ jsxs("span", { children: [
+        state.busy ? /* @__PURE__ */ jsx("button", { class: "scui-stop", type: "button", "aria-label": "Stop agent", disabled: !state.canInterrupt, onClick: () => adapter.onIntent({ action: "interrupt" }), children: "\u25A0" }) : null,
+        /* @__PURE__ */ jsx("button", { class: "scui-send", type: "button", "aria-label": state.busy ? "Queue message" : "Send message", disabled: !draft.trim() || !state.busy && !state.canSend, onClick: send, children: state.busy ? "+" : "\u2191" })
+      ] })
+    ] })
+  ] });
+}
+export {
+  Composer,
+  ContinuationBar
+};

package/controller.d.ts

@@ -0,0 +1,53 @@
+import type {
+  SessionArtifact,
+  SessionFormat,
+} from '@volter-ai-dev/supercode-harness-sdk';
+import type {
+  SupercodeClientSnapshot,
+  SupercodeController,
+} from '@volter-ai-dev/supercode-client';
+import type {
+  SessionAttention,
+  SupercodeUiIntent,
+  SupercodeUiState,
+  UiAdapter,
+} from './index.js';
+
+export interface ClientProjectionOptions {
+  now?: number;
+  attention?: SessionAttention[];
+  savedDraft?: string;
+  history?: Partial<SupercodeUiState['history']>;
+  exportBackTarget?: SessionFormat | null;
+  exportReceipt?: SupercodeUiState['exportReceipt'];
+  reductionReceipt?: SupercodeUiState['reductionReceipt'];
+}
+
+export function projectClientSnapshot(
+  snapshot: SupercodeClientSnapshot,
+  options?: ClientProjectionOptions,
+): SupercodeUiState;
+
+export interface ControllerBindingOptions {
+  projection?: () => ClientProjectionOptions;
+  onIntent?: (intent: SupercodeUiIntent) => void | Promise<void>;
+  onUnsupported?: (intent: SupercodeUiIntent) => void | Promise<void>;
+  onError?: (error: unknown, intent: SupercodeUiIntent) => void | Promise<void>;
+  onArtifact?: (artifact: SessionArtifact, intent: Extract<SupercodeUiIntent, { action: 'export' }>) => void | Promise<void>;
+  onDraft?: (text: string) => void | Promise<void>;
+  onAcknowledge?: (key: string) => void | Promise<void>;
+  onLoadSessions?: () => void | Promise<void>;
+  onLoadEarlier?: () => void | Promise<void>;
+  copyText?: UiAdapter['copyText'];
+}
+
+export interface SupercodeUiBinding {
+  adapter: UiAdapter;
+  getState(): SupercodeUiState;
+  subscribe(listener: (state: SupercodeUiState) => void): () => void;
+}
+
+export function createControllerBinding(
+  controller: SupercodeController,
+  options?: ControllerBindingOptions,
+): SupercodeUiBinding;

package/controller.mjs

@@ -0,0 +1,262 @@
+import { normalizeUiState } from './core.mjs';
+
+const HARNESS_LABELS = {
+  'claude-code': 'Claude Code',
+  codex: 'Codex',
+  opencode: 'OpenCode',
+  pi: 'Pi',
+  grok: 'Grok',
+};
+
+function label(id, supplied) {
+  return supplied || HARNESS_LABELS[id] || id;
+}
+
+function workspaceName(cwd) {
+  if (!cwd) return '';
+  return cwd.replaceAll('\\', '/').split('/').filter(Boolean).at(-1) ?? cwd;
+}
+
+function relativeAge(updatedAt, now) {
+  if (typeof updatedAt !== 'number' || !Number.isFinite(updatedAt) || updatedAt <= 0) return '';
+  const delta = Math.max(0, now - updatedAt);
+  if (delta < 60_000) return 'now';
+  if (delta < 3_600_000) return `${Math.floor(delta / 60_000)}m ago`;
+  if (delta < 86_400_000) return `${Math.floor(delta / 3_600_000)}h ago`;
+  if (delta < 604_800_000) return `${Math.floor(delta / 86_400_000)}d ago`;
+  return `${Math.floor(delta / 604_800_000)}w ago`;
+}
+
+function payloadText(payload) {
+  if (typeof payload === 'string') return payload;
+  try {
+    return JSON.stringify(payload, null, 2);
+  } catch {
+    return String(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 } : {}),
+      }];
+    }
+    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 ?? '',
+        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 [];
+  });
+}
+
+function attached(snapshot) {
+  const session = snapshot.sessions.find((candidate) => candidate.key === snapshot.activeSessionKey);
+  if (!session) return snapshot.activeHarness ? {
+    key: snapshot.activeSessionKey ?? '',
+    harness: snapshot.activeHarness,
+    name: workspaceName(snapshot.workspace),
+    cwd: snapshot.workspace,
+    title: snapshot.activeSession?.model ?? snapshot.activeSessionId ?? 'Active session',
+  } : null;
+  return {
+    key: session.key,
+    harness: session.harness,
+    name: workspaceName(session.cwd),
+    cwd: session.cwd ?? '',
+    title: session.title ?? session.model ?? session.sessionId,
+  };
+}
+
+function semantics(session) {
+  if (!session) return { fidelity: null, residue: [], residueCount: 0, parseErrors: 0, rawRecords: 0, subagents: [] };
+  return {
+    fidelity: session.fidelity ?? null,
+    residue: Array.isArray(session.residue) ? session.residue : [],
+    residueCount: Array.isArray(session.residue) ? session.residue.length : 0,
+    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}`,
+      source: child.source,
+      model: child.model ?? null,
+      messages: Array.isArray(child.messages) ? child.messages.length : 0,
+      fidelity: child.fidelity ?? 'semantic',
+    })) : [],
+  };
+}
+
+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 actions = snapshot.availableActions ?? {};
+  const active = attached(snapshot);
+  const sessions = (snapshot.sessions ?? []).map((session) => ({
+    key: session.key,
+    harness: session.harness,
+    name: workspaceName(session.cwd),
+    cwd: session.cwd ?? '',
+    title: session.title ?? session.model ?? session.sessionId,
+    age: relativeAge(session.updatedAt, now),
+    updatedAt: session.updatedAt ?? null,
+    messages: session.messageCount ?? null,
+    active: session.key === snapshot.activeSessionKey,
+    live: typeof session.updatedAt === 'number' && now - session.updatedAt <= 300_000,
+    runtimeStatus: session.liveStatus ?? null,
+  }));
+  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 ?? []),
+    busy,
+    operation: snapshot.operation,
+    needsInput: Array.isArray(snapshot.requests) && snapshot.requests.some((request) => request.status === 'pending'),
+    harness: snapshot.activeHarness ?? '',
+    mode: snapshot.connection?.mode ?? 'none',
+    strategy: snapshot.connection?.strategy ?? null,
+    canSend: actions.send === true,
+    canResume: actions.resume === true,
+    canBranch: actions.branch === true,
+    canAttach: actions.attach === true,
+    canDetach: actions.detach === true,
+    canOpenTerminal: actions.openTerminal === true,
+    canExport: Boolean(options.exportBackTarget && snapshot.activeSessionKey),
+    canReduce: false,
+    canInterrupt: actions.interrupt === true,
+    canRespond: actions.respond === true,
+    messaging: snapshot.connection?.messaging ?? null,
+    workspace: snapshot.workspace ?? '',
+    taskPlan: {
+      source: snapshot.taskPlan?.source ?? 'none',
+      items: snapshot.taskPlan?.items ?? [],
+      residueCount: snapshot.taskPlan?.residue?.length ?? 0,
+      observedAt: snapshot.taskPlan?.observedAt ?? null,
+    },
+    semantics: semantics(snapshot.activeSession),
+    terminalHandoff: snapshot.terminalLaunch ? {
+      program: snapshot.terminalLaunch.program,
+      arguments: snapshot.terminalLaunch.arguments,
+      cwd: snapshot.terminalLaunch.cwd,
+    } : null,
+    exportBackTarget: options.exportBackTarget ?? null,
+    exportReceipt: options.exportReceipt ?? null,
+    reductionReceipt: options.reductionReceipt ?? null,
+    error: snapshot.error?.message ?? null,
+    recoverable: snapshot.error?.recoverable === true,
+    harnesses: (snapshot.harnesses ?? []).map((harness) => ({
+      id: harness.id,
+      label: label(harness.id, harness.display_name),
+      installed: harness.installed === true,
+      startable: harness.availableActions?.start === true,
+      reason: harness.reason ?? null,
+    })),
+    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,
+    },
+    savedDraft: options.savedDraft ?? '',
+    attention: options.attention ?? [],
+    sessions,
+    attached: active,
+    owned: snapshot.connection?.ownsRuntime ? active : null,
+    attachError: null,
+  });
+}
+
+async function dispatchStandard(controller, intent, options) {
+  const snapshot = controller.getSnapshot();
+  const active = snapshot.activeSessionKey;
+  if (intent.action === 'mounted') return;
+  if (intent.action === 'attach') return controller.dispatch({ type: 'observe', sessionKey: intent.key });
+  if (intent.action === 'send') return controller.dispatch({ type: 'send', text: intent.text });
+  if (intent.action === 'new') {
+    await controller.dispatch({ type: 'start', harness: intent.harness });
+    return controller.dispatch({ type: 'send', text: intent.text });
+  }
+  if (intent.action === 'resume' && active) return controller.dispatch({ type: 'resume', sessionKey: active });
+  if (intent.action === 'join' && active) return controller.dispatch({ type: 'attach', sessionKey: active });
+  if (intent.action === 'detach') return controller.dispatch({ type: 'detach' });
+  if (intent.action === 'branch' && active) return controller.dispatch({ type: 'branch', sessionKey: active, ...(intent.targetHarness ? { targetHarness: intent.targetHarness } : {}) });
+  if (intent.action === 'terminal') return controller.dispatch({ type: 'openTerminal' });
+  if (intent.action === 'interrupt') return controller.dispatch({ type: 'interrupt' });
+  if (intent.action === 'respond') return controller.dispatch({ type: 'respond', requestId: intent.requestId, optionId: intent.optionId });
+  if (intent.action === 'refresh') return controller.dispatch({ type: 'refresh', autoObserve: true });
+  if (intent.action === 'export' && active) {
+    const artifact = await controller.exportSession(active, intent.targetHarness);
+    return options.onArtifact?.(artifact, intent);
+  }
+  if (intent.action === 'draft') return options.onDraft?.(intent.text);
+  if (intent.action === 'ack') return options.onAcknowledge?.(intent.key);
+  if (intent.action === 'loadSessions') return options.onLoadSessions?.();
+  if (intent.action === 'loadEarlier') return options.onLoadEarlier?.();
+  return options.onUnsupported?.(intent);
+}
+
+export function createControllerBinding(controller, options = {}) {
+  if (!controller || typeof controller.getSnapshot !== 'function' || typeof controller.subscribe !== 'function' || typeof controller.dispatch !== 'function') {
+    throw new TypeError('createControllerBinding requires a SupercodeController-compatible object');
+  }
+  const getState = () => projectClientSnapshot(controller.getSnapshot(), options.projection?.() ?? {});
+  const adapter = {
+    onIntent(intent) {
+      void Promise.resolve(options.onIntent?.(intent))
+        .then(() => dispatchStandard(controller, intent, options))
+        .catch((error) => options.onError?.(error, intent));
+    },
+    ...(options.copyText ? { copyText: options.copyText } : {}),
+  };
+  return {
+    adapter,
+    getState,
+    subscribe(listener) {
+      return controller.subscribe(() => listener(getState()));
+    },
+  };
+}