@volter-ai-dev/supercode-ui 0.1.0

package/index.d.ts

@@ -0,0 +1,313 @@
+import type { ComponentChildren, ComponentType, VNode } from 'preact';
+
+export type HarnessId = 'claude-code' | 'codex' | 'opencode' | 'pi' | 'grok' | (string & {});
+export type UiTone = 'live' | 'warn' | 'dead' | 'off';
+export type StartupPhase = 'connecting' | 'starting' | 'discovering' | 'ready';
+export type SessionMode = 'none' | 'control' | 'mirror';
+export type ControlStrategy = 'start' | 'resume' | 'attach' | 'branch' | null;
+export type SessionActivity = 'idle' | 'recent' | 'working' | 'needs-input' | 'finished' | 'failed' | 'unseen';
+
+export interface HarnessOption {
+  id: HarnessId;
+  label: string;
+  installed: boolean;
+  startable: boolean;
+  reason: string | null;
+}
+
+export interface SessionRowModel {
+  key: string;
+  harness: HarnessId;
+  name: string;
+  cwd: string;
+  title: string;
+  age: string;
+  updatedAt: number | null;
+  messages: number | null;
+  active: boolean;
+  live: boolean;
+  runtimeStatus: 'busy' | 'idle' | null;
+}
+
+export interface AttachedSessionModel {
+  key: string;
+  harness: HarnessId;
+  name: string;
+  cwd: string;
+  title: string;
+}
+
+export interface TranscriptContext {
+  id?: string;
+  kind?: string;
+  label: string;
+  detail: string;
+}
+
+export interface RequestOption {
+  optionId: string;
+  name: string;
+  kind: 'allow_once' | 'allow_always' | 'reject_once' | 'reject_always' | 'other';
+}
+
+export interface TranscriptRequest {
+  requestId: unknown;
+  requestKind: string;
+  payloadText: string;
+  options: RequestOption[];
+  cancellable: boolean;
+  status: 'pending' | 'responded';
+  resolution: { optionId: string | null; name: string; kind: string } | null;
+}
+
+export interface TranscriptEntryModel {
+  id: string;
+  role: 'system' | 'user' | 'assistant' | 'tool' | 'reasoning' | 'request' | 'notice';
+  text: string;
+  ts: number | null;
+  truncated: boolean;
+  label?: string;
+  arguments?: string;
+  resultText?: string;
+  status?: 'pending' | 'completed' | 'error';
+  streaming?: boolean;
+  request?: TranscriptRequest;
+  code?: string;
+  context?: TranscriptContext[];
+}
+
+export interface TaskPlanItem {
+  id: string;
+  title: string;
+  status: 'pending' | 'in_progress' | 'completed' | 'cancelled' | 'unknown';
+  nativeStatus?: string;
+  blockedBy?: string[];
+}
+
+export interface TaskPlanModel {
+  source: 'codex-update-plan' | 'claude-tasks' | 'opencode-todos' | 'none';
+  items: TaskPlanItem[];
+  residueCount: number;
+  observedAt: number | null;
+}
+
+export interface SessionSemanticsModel {
+  fidelity: 'byte_lossless' | 'value_lossless' | 'semantic' | null;
+  residue: string[];
+  residueCount: number;
+  parseErrors: number;
+  rawRecords: number;
+  subagents: Array<{
+    id: string;
+    source: string;
+    model: string | null;
+    messages: number;
+    fidelity: 'byte_lossless' | 'value_lossless' | 'semantic';
+  }>;
+}
+
+export interface ReductionReceiptModel {
+  sourceTokens: number;
+  reducedTokens: number;
+  ratio: number;
+  sidecarId: string;
+  verified: boolean;
+  reversible: boolean;
+  targetHarness: HarnessId;
+}
+
+export interface SessionAttention {
+  key: string;
+  kind: 'unseen' | 'finished' | 'failed';
+  preview?: string;
+}
+
+export interface SupercodeUiState {
+  pill: { tone: UiTone; label: string };
+  startup: StartupPhase;
+  transcript: TranscriptEntryModel[];
+  busy: boolean;
+  operation: string | null;
+  needsInput: boolean;
+  harness: HarnessId | '';
+  mode: SessionMode;
+  strategy: ControlStrategy;
+  canSend: boolean;
+  canResume: boolean;
+  canBranch: boolean;
+  canAttach: boolean;
+  canDetach: boolean;
+  canOpenTerminal: boolean;
+  canExport: boolean;
+  canReduce: boolean;
+  canInterrupt: boolean;
+  canRespond: boolean;
+  messaging: 'live_peer' | null;
+  workspace: string;
+  taskPlan: TaskPlanModel;
+  semantics: SessionSemanticsModel;
+  terminalHandoff: { program: string; arguments: string[]; cwd: string } | null;
+  exportBackTarget: HarnessId | null;
+  exportReceipt: {
+    targetHarness: HarnessId;
+    fidelity: 'byte_lossless' | 'value_lossless';
+    path: string;
+    files: number;
+    residueCount: number;
+  } | null;
+  reductionReceipt: ReductionReceiptModel | null;
+  error: string | null;
+  recoverable: boolean;
+  harnesses: HarnessOption[];
+  history: {
+    sessionLimit: number;
+    hasMoreSessions: boolean;
+    transcriptLimit: number;
+    hasEarlier: boolean;
+  };
+  savedDraft: string;
+  attention: SessionAttention[];
+  sessions: SessionRowModel[];
+  attached: AttachedSessionModel | null;
+  owned: AttachedSessionModel | null;
+  attachError: { key: string; message: string } | null;
+}
+
+export type SupercodeUiIntent =
+  | { action: 'mounted' }
+  | { action: 'attach'; key: string }
+  | { action: 'ack'; key: string }
+  | { action: 'loadSessions' }
+  | { action: 'loadEarlier' }
+  | { action: 'draft'; text: string }
+  | { action: 'send'; text: string }
+  | { action: 'new'; harness: HarnessId; text: string }
+  | { action: 'resume' }
+  | { action: 'join' }
+  | { action: 'detach' }
+  | { action: 'branch'; targetHarness?: HarnessId }
+  | { action: 'reduce'; targetHarness?: HarnessId }
+  | { action: 'terminal' }
+  | { action: 'export'; targetHarness: HarnessId }
+  | { action: 'interrupt' }
+  | { action: 'respond'; requestId: unknown; optionId: string | null }
+  | { action: 'refresh' }
+  | { action: 'release' };
+
+export interface UiAdapter {
+  onIntent(intent: SupercodeUiIntent): void;
+  onClose?(): void;
+  onOpen?(): void;
+  copyText?(value: string): void | Promise<void>;
+  now?(): number;
+}
+
+export interface MessengerLabels {
+  chats: string;
+  newChat: string;
+  searchChats: string;
+  askAgent: string;
+  continueHere: string;
+  joinLive: string;
+  forkHere: string;
+}
+
+export interface ComponentOverrideProps<T = unknown> {
+  state: SupercodeUiState;
+  adapter: UiAdapter;
+  value: T;
+}
+
+export interface SessionRowProps {
+  row: SessionRowModel;
+  value?: SessionRowModel;
+  state: SupercodeUiState;
+  adapter: UiAdapter;
+  onOpen(row: SessionRowModel): void;
+}
+
+export interface TranscriptEntryProps {
+  entry: TranscriptEntryModel;
+  value?: TranscriptEntryModel;
+  state: SupercodeUiState;
+  adapter: UiAdapter;
+}
+
+export interface ActivityGroupProps {
+  entries: TranscriptEntryModel[];
+  value?: TranscriptEntryModel[];
+  state: SupercodeUiState;
+  adapter: UiAdapter;
+}
+
+export interface MessengerComponents {
+  SessionRow?: ComponentType<SessionRowProps>;
+  TranscriptEntry?: ComponentType<TranscriptEntryProps>;
+  ActivityGroup?: ComponentType<ActivityGroupProps>;
+  HarnessLogo?: ComponentType<{ id: HarnessId; activity?: SessionActivity; size?: number }>;
+}
+
+export interface MessengerSlots {
+  header?: ComponentType<ComponentOverrideProps>;
+  emptyConversation?: ComponentType<ComponentOverrideProps>;
+  beforeConversation?: ComponentType<ComponentOverrideProps>;
+  afterConversation?: ComponentType<ComponentOverrideProps>;
+  footer?: ComponentType<ComponentOverrideProps>;
+}
+
+export interface MessengerProps {
+  state: SupercodeUiState | unknown;
+  adapter: UiAdapter;
+  class?: string;
+  initialView?: 'list' | 'chat' | 'new';
+  labels?: Partial<MessengerLabels>;
+  components?: MessengerComponents;
+  slots?: MessengerSlots;
+  children?: ComponentChildren;
+}
+
+export const EMPTY_UI_STATE: Readonly<SupercodeUiState>;
+export const DEFAULT_LABELS: Readonly<MessengerLabels>;
+export function normalizeUiState(value: unknown): SupercodeUiState;
+export function harnessDisplayName(id: string): string;
+export function sessionDisplayName(session: Pick<SessionRowModel, 'name' | 'title'>): string;
+export function sessionActivity(state: SupercodeUiState, row: SessionRowModel): SessionActivity;
+export function filterSessions(rows: readonly SessionRowModel[], query: string): SessionRowModel[];
+export function groupConversation(entries: readonly TranscriptEntryModel[]): Array<
+  | { kind: 'entry'; id: string; entry: TranscriptEntryModel }
+  | { kind: 'activity'; id: string; entries: TranscriptEntryModel[] }
+>;
+export function toolCategory(entry: Pick<TranscriptEntryModel, 'label' | 'arguments'>): 'read' | 'search' | 'edit' | 'command' | 'test' | 'web' | 'agent' | 'other';
+export function toolTarget(argumentsText?: string): string;
+export function compactToolTarget(target: string, workspace: string): string;
+export function activitySummary(entries: readonly TranscriptEntryModel[]): string;
+export function canContinueHere(state: SupercodeUiState): boolean;
+export function operationLabel(operation: string | null): string;
+export function terminalCommand(handoff: NonNullable<SupercodeUiState['terminalHandoff']>): string;
+export function isSendKey(event: Pick<KeyboardEvent, 'key' | 'shiftKey' | 'isComposing'>): boolean;
+
+export function HarnessLogo(props: { id: HarnessId; activity?: SessionActivity; size?: number; onMissingLogo?(id: string): void }): VNode | null;
+export function hasHarnessLogo(id: string): boolean;
+export function LoadingStatus(props: { state: SupercodeUiState; compact?: boolean }): VNode;
+export function RequestCard(props: { entry: TranscriptEntryModel; adapter: UiAdapter; canRespond: boolean }): VNode | null;
+export function TranscriptEntry(props: { entry: TranscriptEntryModel; state: SupercodeUiState; adapter: UiAdapter }): VNode;
+export function ActivityGroup(props: { entries: TranscriptEntryModel[]; state: SupercodeUiState; adapter: UiAdapter }): VNode;
+export function TaskPlan(props: { plan: TaskPlanModel }): VNode | null;
+export function SessionDetails(props: { semantics: SessionSemanticsModel }): VNode | null;
+export function Conversation(props: { state: SupercodeUiState; adapter: UiAdapter; components?: MessengerComponents; slots?: MessengerSlots; memoryKey?: string; pending?: string | null }): VNode;
+export function SessionRow(props: { row: SessionRowModel; state: SupercodeUiState; adapter: UiAdapter; onOpen(row: SessionRowModel): void }): VNode;
+export function SessionList(props: { state: SupercodeUiState; adapter: UiAdapter; onOpen(row: SessionRowModel): void; onNew?(): void; onClose?(): void; components?: MessengerComponents; labels?: MessengerLabels }): VNode;
+export function ContinuationBar(props: { state: SupercodeUiState; adapter: UiAdapter; labels?: MessengerLabels }): VNode | null;
+export function Composer(props: { state: SupercodeUiState; adapter: UiAdapter; labels?: MessengerLabels; memoryKey?: string; onPending?(text: string): void }): VNode;
+export function SupercodeMessenger(props: MessengerProps): VNode;
+
+export interface MountedMessenger {
+  update(state: SupercodeUiState | unknown): void;
+  unmount(): void;
+  focus(): void;
+}
+
+export function mountSupercodeMessenger(
+  element: Element,
+  options: Omit<MessengerProps, 'state'> & { state: SupercodeUiState | unknown },
+): MountedMessenger;

package/index.mjs

@@ -0,0 +1,3 @@
+export * from './core.mjs';
+export * from './components.mjs';
+export * from './embed.mjs';

package/logo.mjs

@@ -0,0 +1,114 @@
+// 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
+});
+
+// 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 LOGOS = {
+  "claude-code": {
+    viewBox: "-1 3.5 26 18",
+    paths: [
+      ["path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M20.998 10.949H24v3.102h-3v3.028h-1.487V20H18v-2.921h-1.487V20H15v-2.921H9V20H7.488v-2.921H6V20H4.487v-2.921H3V14.05H0V10.95h3V5h17.998v5.949zM6 10.949h1.488V8.102H6v2.847zm10.51 0H18V8.102h-1.49v2.847z" }]
+    ]
+  },
+  codex: {
+    viewBox: "-1 -1 26 26",
+    paths: [
+      ["path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M8.086.457a6.105 6.105 0 013.046-.415c1.333.153 2.521.72 3.564 1.7a.117.117 0 00.107.029c1.408-.346 2.762-.224 4.061.366l.063.03.154.076c1.357.703 2.33 1.77 2.918 3.198.278.679.418 1.388.421 2.126a5.655 5.655 0 01-.18 1.631.167.167 0 00.04.155 5.982 5.982 0 011.578 2.891c.385 1.901-.01 3.615-1.183 5.14l-.182.22a6.063 6.063 0 01-2.934 1.851.162.162 0 00-.108.102c-.255.736-.511 1.364-.987 1.992-1.199 1.582-2.962 2.462-4.948 2.451-1.583-.008-2.986-.587-4.21-1.736a.145.145 0 00-.14-.032c-.518.167-1.04.191-1.604.185a5.924 5.924 0 01-2.595-.622 6.058 6.058 0 01-2.146-1.781c-.203-.269-.404-.522-.551-.821a7.74 7.74 0 01-.495-1.283 6.11 6.11 0 01-.017-3.064.166.166 0 00.008-.074.115.115 0 00-.037-.064 5.958 5.958 0 01-1.38-2.202 5.196 5.196 0 01-.333-1.589 6.915 6.915 0 01.188-2.132c.45-1.484 1.309-2.648 2.577-3.493.282-.188.55-.334.802-.438.286-.12.573-.22.861-.304a.129.129 0 00.087-.087A6.016 6.016 0 015.635 2.31C6.315 1.464 7.132.846 8.086.457zm-.804 7.85a.848.848 0 00-1.473.842l1.694 2.965-1.688 2.848a.849.849 0 001.46.864l1.94-3.272a.849.849 0 00.007-.854l-1.94-3.393zm5.446 6.24a.849.849 0 000 1.695h4.848a.849.849 0 000-1.696h-4.848z" }]
+    ]
+  },
+  grok: {
+    viewBox: "-1 -1 26 26",
+    paths: [["path", { d: "M9.27 15.29l7.978-5.897c.391-.29.95-.177 1.137.272.98 2.369.542 5.215-1.41 7.169-1.951 1.954-4.667 2.382-7.149 1.406l-2.711 1.257c3.889 2.661 8.611 2.003 11.562-.953 2.341-2.344 3.066-5.539 2.388-8.42l.006.007c-.983-4.232.242-5.924 2.75-9.383.06-.082.12-.164.179-.248l-3.301 3.305v-.01L9.267 15.292M7.623 16.723c-2.792-2.67-2.31-6.801.071-9.184 1.761-1.763 4.647-2.483 7.166-1.425l2.705-1.25a7.808 7.808 0 00-1.829-1A8.975 8.975 0 005.984 5.83c-2.533 2.536-3.33 6.436-1.962 9.764 1.022 2.487-.653 4.246-2.34 6.022-.599.63-1.199 1.259-1.682 1.925l7.62-6.815" }]]
+  },
+  opencode: { viewBox: "2.5 0 19 24", paths: [["path", { d: "M16 6H8v12h8V6zm4 16H4V2h16v20z" }]] },
+  pi: {
+    viewBox: "0 0 24 24",
+    paths: [
+      ["path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M1 1h16.5v11H12v5.5H6.5V23H1V1zm5.5 5.5V12H12V6.5H6.5z" }],
+      ["path", { d: "M17.5 12H23v11h-5.5V12z" }]
+    ]
+  }
+};
+function hasHarnessLogo(id) {
+  return Object.hasOwn(LOGOS, id);
+}
+function HarnessLogo({ id, activity, size = 28, onMissingLogo }) {
+  const logo = LOGOS[id];
+  useEffect(() => {
+    if (!logo) onMissingLogo?.(id);
+  }, [id, logo, onMissingLogo]);
+  if (!logo) return null;
+  return /* @__PURE__ */ jsxs("span", { class: "scui-logo", "data-harness": id, "data-activity": activity, style: `--scui-logo-size:${size}px`, "aria-hidden": "true", children: [
+    /* @__PURE__ */ jsx("svg", { viewBox: logo.viewBox, focusable: "false", children: logo.paths.map(([Tag, props], index) => /* @__PURE__ */ jsx(Tag, { ...props }, index)) }),
+    activity && activity !== "idle" ? /* @__PURE__ */ jsx("i", {}) : null
+  ] });
+}
+export {
+  HarnessLogo,
+  hasHarnessLogo
+};