@volter-ai-dev/supercode-ui 0.1.36 → 0.1.37

package/icon.mjs

@@ -44,7 +44,7 @@ var ICONS = {
 function UiIcon({ name, size = 16, class: className = "" }) {
   const Glyph = ICONS[name];
   if (!Glyph) return null;
-  return /* @__PURE__ */ jsx("svg", { class: `scui-icon ${className}`, style: { "--scui-icon-size": `${size}px` }, viewBox: "0 0 18 18", fill: "none", stroke: "currentColor", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round", "aria-hidden": "true", children: /* @__PURE__ */ jsx(Glyph, {}) });
+  return /* @__PURE__ */ jsx("svg", { className: `scui-icon ${className}`, style: { "--scui-icon-size": `${size}px` }, viewBox: "0 0 18 18", fill: "none", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: /* @__PURE__ */ jsx(Glyph, {}) });
 }
 export {
   UiIcon

package/index.d.ts

@@ -10,12 +10,34 @@ export type ExecutionMode = 'headless' | 'terminal';
 export type ContinuationMode = ExecutionMode;
 export type SessionActivity = 'idle' | 'recent' | 'running' | 'working' | 'needs-input' | 'finished' | 'failed' | 'unseen';
 
+export interface AgentActivityModel {
+  harness: HarnessId | '';
+  sessionKey: string | null;
+  title: string;
+  detail: string;
+  activity: SessionActivity;
+  unreadCount: number;
+}
+
 export interface HarnessOption {
   id: HarnessId;
   label: string;
   installed: boolean;
   startable: boolean;
   reason: string | null;
+  auth?: 'ready' | 'configured' | 'required' | 'unknown';
+  runtime?: 'ready' | 'degraded' | 'unavailable';
+  protocol?: string;
+  repair?: string | null;
+  capabilities?: {
+    start: boolean;
+    resume: boolean;
+    attach: boolean;
+    send: boolean;
+    interrupt: boolean;
+    steer: boolean;
+    respond: boolean;
+  };
   /** Host-supported ways to start this harness. Omitted means headless when startable. */
   launchModes?: ExecutionMode[];
   /** Host preference, used unless this browser has a remembered choice for the harness. */
@@ -240,6 +262,7 @@ export interface SupercodeUiState {
   mode: SessionMode;
   strategy: ControlStrategy;
   canSend: boolean;
+  canSteer: boolean;
   canResume: boolean;
   /** Execution strategies the current host can actually provide. Headless is the default. */
   continuationModes: ContinuationMode[];
@@ -293,6 +316,7 @@ export type SupercodeUiIntent =
   | { action: 'loadEarlier' }
   | { action: 'draft'; text: string }
   | { action: 'send'; text: string; context?: TranscriptContext[]; images?: Array<TranscriptImage & { url: string }> }
+  | { action: 'steer'; text: string }
   | { action: 'new'; harness: HarnessId; mode?: ExecutionMode; text: string; context?: TranscriptContext[]; images?: Array<TranscriptImage & { url: string }> }
   | { action: 'resume'; mode?: ContinuationMode }
   | { action: 'join' }
@@ -309,6 +333,8 @@ export type SupercodeUiIntent =
 
 export interface UiAdapter {
   onIntent(intent: SupercodeUiIntent): void | Promise<void>;
+  /** Confirm a takeover or migration intent. Returning false cancels it before dispatch. */
+  confirmIntent?(intent: Extract<SupercodeUiIntent, { action: 'resume' | 'join' | 'branch' | 'reduce' | 'export' }>): boolean | Promise<boolean>;
   /** Ask the embedding host for explicit user-selected text or image context. */
   pickContext?(): TranscriptAttachment | TranscriptAttachment[] | null | Promise<TranscriptAttachment | TranscriptAttachment[] | null>;
   /** Resolve one projected historical image on demand. The UI owns and revokes its object URL. */
@@ -345,6 +371,16 @@ export interface ComponentOverrideProps<T = unknown> {
   value: T;
 }
 
+export interface ContextCandidateProps {
+  attachment: TranscriptAttachment;
+  value?: TranscriptAttachment;
+  attached: boolean;
+  index: number;
+  state: SupercodeUiState;
+  adapter: UiAdapter;
+  onAttach(attachment: TranscriptAttachment): void;
+}
+
 export interface SessionRowProps {
   row: SessionRowModel;
   value?: SessionRowModel;
@@ -405,23 +441,46 @@ export interface MessengerComponents {
   HarnessLogo?: ComponentType<{ id: HarnessId; activity?: SessionActivity; size?: number }>;
   HarnessAdvisory?: ComponentType<HarnessAdvisoryProps>;
   HarnessSettingsPanel?: ComponentType<HarnessSettingsPanelProps>;
+  ContextCandidate?: ComponentType<ContextCandidateProps>;
+  HarnessReadiness?: ComponentType<{ harnesses: HarnessOption[]; state: SupercodeUiState; adapter: UiAdapter }>;
+}
+
+export interface AgentActivityLauncherProps {
+  state: SupercodeUiState | unknown;
+  onOpen?(activity: AgentActivityModel): void;
+  class?: string;
+  showSummary?: boolean;
+  components?: Pick<MessengerComponents, 'HarnessLogo'>;
 }
 
 export interface MessengerSlots {
   header?: ComponentType<ComponentOverrideProps>;
   /** Add a compact consumer control to every default messenger header. `value` is the current view. */
   headerActions?: ComponentType<ComponentOverrideProps<'list' | 'chat' | 'new'>>;
+  /** Host-owned rows rendered inside the searchable conversation scroller. */
+  beforeSessions?: ComponentType<ComponentOverrideProps<{ query: string; rows: SessionRowModel[] }>>;
+  afterSessions?: ComponentType<ComponentOverrideProps<{ query: string; rows: SessionRowModel[] }>>;
   emptyConversation?: ComponentType<ComponentOverrideProps>;
   beforeConversation?: ComponentType<ComponentOverrideProps>;
   afterConversation?: ComponentType<ComponentOverrideProps>;
   footer?: ComponentType<ComponentOverrideProps>;
 }
 
+export type MessengerNavigation =
+  | { id: string | number; view: 'list' }
+  | { id: string | number; view: 'chat'; sessionKey: string }
+  | { id: string | number; view: 'new'; harness?: HarnessId; draft?: string; context?: TranscriptContext[]; images?: Array<TranscriptImage & { url: string }> };
+
 export interface MessengerProps {
   state: SupercodeUiState | unknown;
   adapter: UiAdapter;
   class?: string;
   initialView?: 'list' | 'chat' | 'new';
+  /** Event-like host navigation. Change `id` to issue a new request. */
+  navigation?: MessengerNavigation | null;
+  onViewChange?(view: 'list' | 'chat' | 'new'): void;
+  /** Deliberate host-provided items that can be attached without opening a picker. */
+  contextCandidates?: TranscriptAttachment[];
   labels?: Partial<MessengerLabels>;
   components?: MessengerComponents;
   slots?: MessengerSlots;
@@ -435,6 +494,7 @@ export function harnessDisplayName(id: string): string;
 export function sessionDisplayName(session: Pick<SessionRowModel, 'name' | 'title'>): string;
 export function relativeAge(updatedAt: number | null | undefined, now?: number): string;
 export function sessionActivity(state: SupercodeUiState, row: SessionRowModel): SessionActivity;
+export function projectAgentActivity(state: SupercodeUiState | unknown): AgentActivityModel;
 export function filterSessions(rows: readonly SessionRowModel[], query: string): SessionRowModel[];
 export function groupConversation(entries: readonly TranscriptEntryModel[]): Array<
   | { kind: 'entry'; id: string; entry: TranscriptEntryModel }
@@ -453,12 +513,15 @@ export function isSendKey(event: Pick<KeyboardEvent, 'key' | 'shiftKey' | 'isCom
 export function parseSupercodeUiIntent(value: unknown): SupercodeUiIntent | null;
 
 export function HarnessLogo(props: { id: HarnessId; activity?: SessionActivity; size?: number; onMissingLogo?(id: string): void }): VNode | null;
+export function AgentActivityLauncher(props: AgentActivityLauncherProps): VNode;
 export type UiIconName = 'attach' | 'back' | 'check' | 'chevron' | 'close' | 'copy' | 'down' | 'menu' | 'plus' | 'search' | 'send' | 'stop';
 export function UiIcon(props: { name: UiIconName; size?: number; class?: string }): VNode | null;
 export function hasHarnessLogo(id: string): boolean;
 export function harnessLogoDataUrl(id: string): string | null;
 export function ImageViewer(props: { items: TranscriptImage[]; index: number; adapter?: Pick<UiAdapter, 'copyText' | 'resolveImage'>; onChange(index: number): void; onClose(): void }): VNode | null;
 export function MessageImages(props: { items?: TranscriptImage[]; adapter?: Pick<UiAdapter, 'copyText' | 'resolveImage'> }): VNode | null;
+export function ContextCandidate(props: ContextCandidateProps): VNode;
+export function ContextCandidates(props: { items: TranscriptAttachment[]; context: TranscriptContext[]; images: Array<TranscriptImage & { url: string }>; state: SupercodeUiState; adapter: UiAdapter; onAttach(attachment: TranscriptAttachment): void; component?: ComponentType<ContextCandidateProps> }): VNode | null;
 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;
@@ -467,12 +530,13 @@ export function ToolRow(props: ToolRowProps): VNode;
 export function TaskPlan(props: { plan: TaskPlanModel }): VNode | null;
 export function HarnessAdvisory(props: HarnessAdvisoryProps): VNode | null;
 export function HarnessSettingsPanel(props: HarnessSettingsPanelProps): VNode;
+export function HarnessReadiness(props: { harnesses: HarnessOption[]; state: SupercodeUiState; adapter: UiAdapter }): 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 | PendingMessageModel | null; unreadAfterMessages?: number | null }): VNode;
 export function SessionRow(props: { row: SessionRowModel; state: SupercodeUiState; adapter: UiAdapter; now?: number; 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; focusKey?: string | null; memoryKey?: string; headerActions?: MessengerSlots['headerActions'] }): VNode;
+export function SessionList(props: { state: SupercodeUiState; adapter: UiAdapter; onOpen(row: SessionRowModel): void; onNew?(): void; onClose?(): void; components?: MessengerComponents; slots?: MessengerSlots; labels?: MessengerLabels; focusKey?: string | null; memoryKey?: string; headerActions?: MessengerSlots['headerActions'] }): 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; pendingStatus?: PendingMessageModel['status'] | 'editing' | null; restoreDraft?: { id: string | number; text: string; context?: TranscriptContext[]; images?: TranscriptImage[] } | null; onPending?(text: string, context?: TranscriptContext[], images?: TranscriptImage[]): void; onDraftRestored?(id: string | number): void }): VNode;
+export function Composer(props: { state: SupercodeUiState; adapter: UiAdapter; labels?: MessengerLabels; memoryKey?: string; pendingStatus?: PendingMessageModel['status'] | 'editing' | null; restoreDraft?: { id: string | number; text: string; context?: TranscriptContext[]; images?: TranscriptImage[] } | null; contextCandidates?: TranscriptAttachment[]; components?: Pick<MessengerComponents, 'ContextCandidate'>; onPending?(text: string, context?: TranscriptContext[], images?: TranscriptImage[]): void; onDraftRestored?(id: string | number): void }): VNode;
 export function SupercodeMessenger(props: MessengerProps): VNode;
 
 export interface MountedMessenger {

package/logo.mjs

@@ -5,13 +5,13 @@ 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" }]
+      ["path", { fillRule: "evenodd", clipRule: "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" }]
+      ["path", { fillRule: "evenodd", clipRule: "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" }]
     ]
   },
   gemini: {
@@ -31,7 +31,7 @@ var LOGOS = {
   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", { fillRule: "evenodd", clipRule: "evenodd", d: "M1 1h16.5v11H12v5.5H6.5V23H1V1zm5.5 5.5V12H12V6.5H6.5z" }],
       ["path", { d: "M17.5 12H23v11h-5.5V12z" }]
     ]
   },
@@ -41,7 +41,7 @@ var LOGOS = {
     paths: [
       ["rect", { width: "64", height: "64", rx: "14", fill: "#111923" }],
       ["path", { d: "M18 21h28v6H18zm0 13h18v6H18z", fill: "#5f8fff" }],
-      ["circle", { cx: "46", cy: "37", r: "7", fill: "none", stroke: "#8ce0aa", "stroke-width": "4" }]
+      ["circle", { cx: "46", cy: "37", r: "7", fill: "none", stroke: "#8ce0aa", strokeWidth: "4" }]
     ]
   }
 };
@@ -58,12 +58,17 @@ var LOGO_CHROME = {
 function escapeSvgAttribute(value) {
   return String(value).replaceAll("&", "&amp;").replaceAll('"', "&quot;").replaceAll("<", "&lt;").replaceAll(">", "&gt;");
 }
+var SVG_ATTRIBUTE_NAMES = Object.freeze({
+  clipRule: "clip-rule",
+  fillRule: "fill-rule",
+  strokeWidth: "stroke-width"
+});
 function harnessLogoDataUrl(id) {
   const logo = LOGOS[id];
   if (!logo) return null;
   const chrome = LOGO_CHROME[id] ?? { background: "#111", color: id === "claude-code" ? "#d97757" : "#f7f7f5" };
   const glyph = logo.paths.map(([tag, attributes]) => {
-    const serialized = Object.entries(attributes).map(([name, value]) => `${name}="${escapeSvgAttribute(value)}"`).join(" ");
+    const serialized = Object.entries(attributes).map(([name, value]) => `${SVG_ATTRIBUTE_NAMES[name] ?? name}="${escapeSvgAttribute(value)}"`).join(" ");
     return `<${tag} ${serialized}/>`;
   }).join("");
   const svg = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 40"><circle cx="20" cy="20" r="19" fill="${chrome.background}" stroke="#383a42"/><svg x="7" y="7" width="26" height="26" viewBox="${logo.viewBox}" color="${chrome.color}" fill="currentColor" preserveAspectRatio="xMidYMid meet">${glyph}</svg></svg>`;
@@ -75,7 +80,7 @@ function HarnessLogo({ id, activity, size = 28, onMissingLogo }) {
     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: [
+  return /* @__PURE__ */ jsxs("span", { className: "scui-logo", "data-harness": id, "data-activity": activity, style: { "--scui-logo-size": `${size}px` }, "aria-hidden": "true", children: [
     /* @__PURE__ */ jsx("svg", { viewBox: logo.viewBox, preserveAspectRatio: "xMidYMid meet", focusable: "false", children: logo.paths.map(([Tag, props], index) => /* @__PURE__ */ jsx(Tag, { ...props }, index)) }),
     activity && activity !== "idle" ? /* @__PURE__ */ jsx("i", {}) : null
   ] });