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

package/composer.mjs

@@ -32,6 +32,7 @@ var EMPTY_UI_STATE = Object.freeze({
   mode: "none",
   strategy: null,
   canSend: false,
+  canSteer: false,
   canResume: false,
   continuationModes: Object.freeze([]),
   canBranch: false,
@@ -67,6 +68,16 @@ var EMPTY_UI_STATE = Object.freeze({
 function harnessDisplayName(id) {
   return HARNESS_NAMES[id] ?? id;
 }
+var ACTIVITY_PRIORITY = Object.freeze({
+  "needs-input": 70,
+  failed: 60,
+  working: 50,
+  unseen: 40,
+  finished: 30,
+  running: 20,
+  recent: 10,
+  idle: 0
+});
 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;
@@ -130,7 +141,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, {}) });
 }
 
 // src/context.jsx
@@ -204,6 +215,26 @@ function partitionAttachments(value) {
   }
   return { context, images };
 }
+function attachmentKey(item) {
+  if (item.id) return `id:${item.id}`;
+  return "detail" in item ? `context:${item.kind ?? ""}\0${item.label}\0${item.detail}` : `image:${item.url}`;
+}
+function ContextCandidate({ attachment, attached, onAttach }) {
+  const image = "url" in attachment;
+  return /* @__PURE__ */ jsxs2("button", { type: "button", disabled: attached, "aria-label": `${attached ? "Attached" : "Attach"} ${attachment.label}`, onClick: () => onAttach(attachment), children: [
+    image ? /* @__PURE__ */ jsx2("img", { src: attachment.url, alt: "" }) : /* @__PURE__ */ jsx2(UiIcon, { name: "attach", size: 13 }),
+    /* @__PURE__ */ jsxs2("span", { children: [
+      /* @__PURE__ */ jsx2("strong", { children: attachment.label }),
+      /* @__PURE__ */ jsx2("small", { children: image ? "Image" : attachment.kind || "Context" })
+    ] }),
+    attached ? /* @__PURE__ */ jsx2(UiIcon, { name: "check", size: 13 }) : /* @__PURE__ */ jsx2(UiIcon, { name: "plus", size: 13 })
+  ] });
+}
+function ContextCandidates({ items, context, images, state, adapter, onAttach, component: Candidate = ContextCandidate }) {
+  if (!items.length) return null;
+  const attached = new Set([...context, ...images].map(attachmentKey));
+  return /* @__PURE__ */ jsx2("div", { className: "scui-context-candidates", "aria-label": "Available context", children: items.map((attachment, index) => /* @__PURE__ */ jsx2(Candidate, { value: attachment, attachment, attached: attached.has(attachmentKey(attachment)), state, adapter, onAttach, index }, attachmentKey(attachment))) });
+}
 async function imageAttachmentsFromFiles(value) {
   const files = Array.from(value ?? []).filter((file) => file?.type?.startsWith("image/"));
   if (files.length > MAX_IMAGE_ITEMS) throw new Error(`Attach at most ${MAX_IMAGE_ITEMS} images at a time.`);
@@ -221,7 +252,7 @@ async function imageAttachmentsFromFiles(value) {
 }
 function ContextTray({ items, onRemove }) {
   if (!items.length) return null;
-  return /* @__PURE__ */ jsx2("div", { class: "scui-compose-context", "aria-label": "Attached context", children: items.map((item, index) => /* @__PURE__ */ jsxs2("span", { children: [
+  return /* @__PURE__ */ jsx2("div", { className: "scui-compose-context", "aria-label": "Attached context", children: items.map((item, index) => /* @__PURE__ */ jsxs2("span", { children: [
     /* @__PURE__ */ jsx2(UiIcon, { name: "attach", size: 12 }),
     /* @__PURE__ */ jsx2("strong", { children: item.label }),
     /* @__PURE__ */ jsx2("button", { type: "button", "aria-label": `Remove context ${item.label}`, onClick: () => onRemove(index), children: /* @__PURE__ */ jsx2(UiIcon, { name: "close", size: 12 }) })
@@ -229,13 +260,23 @@ function ContextTray({ items, onRemove }) {
 }
 function ImageTray({ items, onRemove }) {
   if (!items.length) return null;
-  return /* @__PURE__ */ jsx2("div", { class: "scui-compose-images", "aria-label": "Attached images", children: items.map((item, index) => /* @__PURE__ */ jsxs2("span", { children: [
+  return /* @__PURE__ */ jsx2("div", { className: "scui-compose-images", "aria-label": "Attached images", children: items.map((item, index) => /* @__PURE__ */ jsxs2("span", { children: [
     /* @__PURE__ */ jsx2("img", { src: item.url, alt: "" }),
     /* @__PURE__ */ jsx2("strong", { children: item.label }),
     onRemove ? /* @__PURE__ */ jsx2("button", { type: "button", "aria-label": `Remove image ${item.label}`, onClick: () => onRemove(index), children: /* @__PURE__ */ jsx2(UiIcon, { name: "close", size: 12 }) }) : null
   ] }, item.id ?? `${item.label}:${index}`)) });
 }
 
+// src/intent.js
+var CONFIRMABLE_ACTIONS = /* @__PURE__ */ new Set(["resume", "join", "branch", "reduce", "export"]);
+async function dispatchConfirmedIntent(adapter, intent) {
+  if (CONFIRMABLE_ACTIONS.has(intent.action) && adapter.confirmIntent) {
+    const confirmed = await adapter.confirmIntent(intent);
+    if (!confirmed) return;
+  }
+  return adapter.onIntent(intent);
+}
+
 // src/textarea.js
 import { useLayoutEffect } from "preact/hooks";
 function useAutosizeTextarea(ref, value) {
@@ -262,28 +303,29 @@ function ContinuationBar({ state, adapter, labels = DEFAULT_LABELS }) {
   const terminal = resume && state.continuationModes?.includes("terminal");
   const join = state.canAttach;
   const branch = state.canBranch;
-  if (!resume && !join && !branch) return /* @__PURE__ */ jsx3("div", { class: "scui-continuation", children: /* @__PURE__ */ jsxs3("span", { children: [
+  if (!resume && !join && !branch) return /* @__PURE__ */ jsx3("div", { className: "scui-continuation", children: /* @__PURE__ */ jsxs3("span", { children: [
     /* @__PURE__ */ jsx3("strong", { children: activeElsewhere ? "Active elsewhere" : "Read-only" }),
     /* @__PURE__ */ jsx3("small", { children: "This session cannot be continued by an available harness." })
   ] }) });
-  return /* @__PURE__ */ jsxs3("div", { class: "scui-continuation", children: [
+  return /* @__PURE__ */ jsxs3("div", { className: "scui-continuation", children: [
     /* @__PURE__ */ jsxs3("span", { children: [
       /* @__PURE__ */ jsx3("strong", { children: activeElsewhere ? "Active elsewhere" : "Read-only" }),
       /* @__PURE__ */ jsx3("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__ */ jsxs3("span", { class: "scui-continuation-actions", children: [
-      /* @__PURE__ */ jsx3("button", { type: "button", disabled: Boolean(state.operation), onClick: () => adapter.onIntent(join ? { action: "join" } : resume ? { action: "resume", mode: "headless" } : { action: "branch" }), children: join ? labels.joinLive : resume ? labels.continueHere : labels.forkHere }),
-      terminal ? /* @__PURE__ */ jsx3("button", { type: "button", class: "scui-secondary", disabled: Boolean(state.operation), onClick: () => adapter.onIntent({ action: "resume", mode: "terminal" }), children: labels.continueWithTerminal ?? DEFAULT_LABELS.continueWithTerminal }) : null
+    /* @__PURE__ */ jsxs3("span", { className: "scui-continuation-actions", children: [
+      /* @__PURE__ */ jsx3("button", { type: "button", disabled: Boolean(state.operation), onClick: () => dispatchConfirmedIntent(adapter, join ? { action: "join" } : resume ? { action: "resume", mode: "headless" } : { action: "branch" }), children: join ? labels.joinLive : resume ? labels.continueHere : labels.forkHere }),
+      terminal ? /* @__PURE__ */ jsx3("button", { type: "button", className: "scui-secondary", disabled: Boolean(state.operation), onClick: () => dispatchConfirmedIntent(adapter, { action: "resume", mode: "terminal" }), children: labels.continueWithTerminal ?? DEFAULT_LABELS.continueWithTerminal }) : null
     ] })
   ] });
 }
-function Composer({ state, adapter, labels = DEFAULT_LABELS, memoryKey = state.attached?.key || `${state.harness}:${state.workspace}`, pendingStatus = null, restoreDraft = null, onPending, onDraftRestored }) {
+function Composer({ state, adapter, labels = DEFAULT_LABELS, memoryKey = state.attached?.key || `${state.harness}:${state.workspace}`, pendingStatus = null, restoreDraft = null, contextCandidates = [], components = {}, onPending, onDraftRestored }) {
   const remembered = composerMemory.get(memoryKey) ?? { draft: state.savedDraft, context: [], images: [], queue: [] };
   const [draft, setDraft] = useState2(remembered.draft);
   const [context, setContext] = useState2(remembered.context ?? []);
   const [images, setImages] = useState2(remembered.images ?? []);
   const [queue, setQueue] = useState2((remembered.queue ?? []).map((item) => ({ ...item, context: item.context ?? [], images: item.images ?? [] })));
   const [dispatching, setDispatching] = useState2(false);
+  const [steering, setSteering] = useState2(false);
   const [picking, setPicking] = useState2(false);
   const [dragging, setDragging] = useState2(false);
   const [pickerError, setPickerError] = useState2(null);
@@ -298,8 +340,10 @@ function Composer({ state, adapter, labels = DEFAULT_LABELS, memoryKey = state.a
     remember(draft, context, images, next);
     return next;
   });
-  const queueBlocked = state.busy || pendingStatus !== null || dispatching;
-  const queuesNewMessage = state.busy || pendingStatus === "sending" || pendingStatus === "failed" || dispatching;
+  const queueBlocked = state.busy || pendingStatus !== null || dispatching || steering;
+  const queuesNewMessage = state.busy || pendingStatus === "sending" || pendingStatus === "failed" || dispatching || steering;
+  const steerAvailable = state.busy && state.canSteer && !steering && pendingStatus === null;
+  const canSteerDraft = steerAvailable && Boolean(draft.trim()) && context.length === 0 && images.length === 0;
   useEffect2(() => {
     if (!queueBlocked && state.canSend && queue.length) {
       const [next, ...rest] = queue;
@@ -351,6 +395,14 @@ function Composer({ state, adapter, labels = DEFAULT_LABELS, memoryKey = state.a
       });
     }).catch((error) => setPickerError(error instanceof Error ? error.message : "Could not attach context.")).finally(() => setPicking(false));
   };
+  const attachCandidate = (picked) => {
+    const attachments = partitionAttachments(picked);
+    const nextContext = mergeContext(context, attachments.context);
+    const nextImages = mergeImages(images, attachments.images);
+    setContext(nextContext);
+    setImages(nextImages);
+    remember(draft, nextContext, nextImages, queue);
+  };
   const addImageFiles = (value, source) => {
     const allFiles = Array.from(value ?? []);
     if (!allFiles.length) return false;
@@ -379,9 +431,17 @@ function Composer({ state, adapter, labels = DEFAULT_LABELS, memoryKey = state.a
     setDragging(false);
     if (addImageFiles(event.dataTransfer?.files, "drop")) event.preventDefault();
   };
-  const send = () => {
+  const send = (forceQueue = false) => {
     const text = draft.trim();
     if (!text && !images.length) return;
+    if (canSteerDraft && !forceQueue) {
+      setSteering(true);
+      Promise.resolve(adapter.onIntent({ action: "steer", text })).then(() => {
+        setDraft("");
+        remember("", context, images, queue);
+      }, (error) => setPickerError(error instanceof Error ? error.message : "Could not steer the active turn.")).finally(() => setSteering(false));
+      return;
+    }
     const message = { text, context, images };
     if (queuesNewMessage) updateQueue((items) => [...items, message]);
     else if (state.canSend) {
@@ -394,8 +454,8 @@ function Composer({ state, adapter, labels = DEFAULT_LABELS, memoryKey = state.a
     setImages([]);
     remember("", [], [], queuesNewMessage ? [...queue, message] : queue);
   };
-  return /* @__PURE__ */ jsxs3("div", { class: "scui-compose", children: [
-    queue.length ? /* @__PURE__ */ jsxs3("div", { class: "scui-queue", children: [
+  return /* @__PURE__ */ jsxs3("div", { className: "scui-compose", children: [
+    queue.length ? /* @__PURE__ */ jsxs3("div", { className: "scui-queue", children: [
       /* @__PURE__ */ jsxs3("strong", { children: [
         queue.length,
         " queued"
@@ -411,6 +471,7 @@ function Composer({ state, adapter, labels = DEFAULT_LABELS, memoryKey = state.a
         /* @__PURE__ */ jsx3("button", { type: "button", "aria-label": `Remove queued message ${index + 1}`, onClick: () => updateQueue((items) => items.filter((_, itemIndex) => itemIndex !== index)), children: /* @__PURE__ */ jsx3(UiIcon, { name: "close", size: 13 }) })
       ] }, `${index}:${item.text}`))
     ] }) : null,
+    /* @__PURE__ */ jsx3(ContextCandidates, { items: contextCandidates, context, images, state, adapter, onAttach: attachCandidate, component: components.ContextCandidate }),
     /* @__PURE__ */ jsx3(ImageTray, { items: images, onRemove: (index) => setImages((items) => {
       const next = items.filter((_, itemIndex) => itemIndex !== index);
       remember(draft, context, next, queue);
@@ -421,8 +482,8 @@ function Composer({ state, adapter, labels = DEFAULT_LABELS, memoryKey = state.a
       remember(draft, next, images, queue);
       return next;
     }) }),
-    pickerError ? /* @__PURE__ */ jsx3("small", { class: "scui-context-error", role: "alert", children: pickerError }) : null,
-    /* @__PURE__ */ jsxs3("div", { class: `scui-envelope${dragging ? " scui-drop-target" : ""}`, onDragEnter: (event) => {
+    pickerError ? /* @__PURE__ */ jsx3("small", { className: "scui-context-error", role: "alert", children: pickerError }) : null,
+    /* @__PURE__ */ jsxs3("div", { className: `scui-envelope${dragging ? " scui-drop-target" : ""}`, onDragEnter: (event) => {
       if (Array.from(event.dataTransfer?.types ?? []).includes("Files")) {
         event.preventDefault();
         setDragging(true);
@@ -432,8 +493,8 @@ function Composer({ state, adapter, labels = DEFAULT_LABELS, memoryKey = state.a
     }, onDragLeave: (event) => {
       if (!event.currentTarget.contains(event.relatedTarget)) setDragging(false);
     }, onDrop: dropImages, children: [
-      adapter.pickContext && state.mode === "control" ? /* @__PURE__ */ jsx3("button", { class: "scui-attach", type: "button", "aria-label": "Attach files or images", disabled: picking || context.length >= MAX_CONTEXT_ITEMS && images.length >= MAX_IMAGE_ITEMS, onClick: pickContext, children: picking ? /* @__PURE__ */ jsx3("i", { class: "scui-control-spinner" }) : /* @__PURE__ */ jsx3(UiIcon, { name: "attach", size: 17 }) }) : null,
-      /* @__PURE__ */ jsx3("textarea", { ref: textarea, rows: 1, "aria-label": `Message ${harnessDisplayName(state.harness) || "agent"}`, placeholder: state.startup !== "ready" ? "Connecting\u2026" : pendingStatus === "failed" ? "Retry or edit the unsent message\u2026" : pendingStatus === "editing" ? "Edit and resend\u2026" : queueBlocked ? "Queue a follow-up\u2026" : labels.askAgent, value: draft, disabled: state.mode !== "control" && !state.canSend, onPaste: pasteImages, onInput: (event) => {
+      adapter.pickContext && state.mode === "control" ? /* @__PURE__ */ jsx3("button", { className: "scui-attach", type: "button", "aria-label": "Attach files or images", disabled: picking || context.length >= MAX_CONTEXT_ITEMS && images.length >= MAX_IMAGE_ITEMS, onClick: pickContext, children: picking ? /* @__PURE__ */ jsx3("i", { className: "scui-control-spinner" }) : /* @__PURE__ */ jsx3(UiIcon, { name: "attach", size: 17 }) }) : null,
+      /* @__PURE__ */ jsx3("textarea", { ref: textarea, rows: 1, "aria-label": `Message ${harnessDisplayName(state.harness) || "agent"}`, placeholder: state.startup !== "ready" ? "Connecting\u2026" : pendingStatus === "failed" ? "Retry or edit the unsent message\u2026" : pendingStatus === "editing" ? "Edit and resend\u2026" : steerAvailable && context.length === 0 && images.length === 0 ? "Redirect the current turn\u2026" : queueBlocked ? "Queue a follow-up\u2026" : labels.askAgent, value: draft, disabled: state.mode !== "control" && !state.canSend, onPaste: pasteImages, onInput: (event) => {
         const value = event.currentTarget.value;
         setDraft(value);
         remember(value, context, images, queue);
@@ -444,8 +505,9 @@ function Composer({ state, adapter, labels = DEFAULT_LABELS, memoryKey = state.a
         }
       } }),
       /* @__PURE__ */ jsxs3("span", { children: [
-        state.busy ? /* @__PURE__ */ jsx3("button", { class: "scui-stop", type: "button", "aria-label": "Stop agent", disabled: !state.canInterrupt, onClick: () => adapter.onIntent({ action: "interrupt" }), children: /* @__PURE__ */ jsx3(UiIcon, { name: "stop", size: 15 }) }) : null,
-        /* @__PURE__ */ jsx3("button", { class: "scui-send", type: "button", "aria-label": queuesNewMessage ? "Queue message" : "Send message", disabled: !draft.trim() && !images.length || !queuesNewMessage && !state.canSend, onClick: send, children: /* @__PURE__ */ jsx3(UiIcon, { name: queuesNewMessage ? "plus" : "send", size: 17 }) })
+        state.busy ? /* @__PURE__ */ jsx3("button", { className: "scui-stop", type: "button", "aria-label": "Stop agent", disabled: !state.canInterrupt, onClick: () => adapter.onIntent({ action: "interrupt" }), children: /* @__PURE__ */ jsx3(UiIcon, { name: "stop", size: 15 }) }) : null,
+        canSteerDraft ? /* @__PURE__ */ jsx3("button", { className: "scui-queue-send", type: "button", "aria-label": "Queue follow-up instead", onClick: () => send(true), children: /* @__PURE__ */ jsx3(UiIcon, { name: "plus", size: 15 }) }) : null,
+        /* @__PURE__ */ jsx3("button", { className: "scui-send", type: "button", "aria-label": canSteerDraft ? "Steer current turn" : queuesNewMessage ? "Queue message" : "Send message", disabled: steering || !draft.trim() && !images.length || !queuesNewMessage && !state.canSend, onClick: () => send(), children: steering ? /* @__PURE__ */ jsx3("i", { className: "scui-control-spinner" }) : /* @__PURE__ */ jsx3(UiIcon, { name: canSteerDraft ? "send" : queuesNewMessage ? "plus" : "send", size: 17 }) })
       ] })
     ] })
   ] });

package/controller.d.ts

@@ -115,6 +115,10 @@ export interface ControllerBindingOptions {
   onResumeTerminal?: (intent: Extract<SupercodeUiIntent, { action: 'resume' }>) => void | Promise<void>;
   copyText?: UiAdapter['copyText'];
   resolveImage?: UiAdapter['resolveImage'];
+  confirmIntent?: UiAdapter['confirmIntent'];
+  pickContext?: UiAdapter['pickContext'];
+  onClose?: UiAdapter['onClose'];
+  onOpen?: UiAdapter['onOpen'];
 }
 
 export interface ControllerIntentTarget {

package/controller.mjs

@@ -470,6 +470,7 @@ function projectClientSnapshotInternal(snapshot, options, imageRegistry) {
     mode: snapshot.connection?.mode ?? 'none',
     strategy: snapshot.connection?.strategy ?? null,
     canSend: actions.send === true,
+    canSteer: actions.steer === true,
     canResume: actions.resume === true,
     continuationModes: options.continuationModes ?? (actions.resume === true ? ['headless'] : []),
     canBranch: actions.branch === true,
@@ -508,6 +509,19 @@ function projectClientSnapshotInternal(snapshot, options, imageRegistry) {
       installed: harness.installed === true,
       startable: harness.availableActions?.start === true,
       reason: harness.reason ?? null,
+      auth: harness.auth,
+      runtime: harness.runtime,
+      protocol: harness.protocol,
+      repair: harness.repair ?? null,
+      capabilities: {
+        start: harness.availableActions?.start === true,
+        resume: harness.availableActions?.resume === true,
+        attach: harness.availableActions?.attach === true,
+        send: harness.availableActions?.send === true,
+        interrupt: harness.availableActions?.interrupt === true,
+        steer: harness.availableActions?.steer === true,
+        respond: harness.availableActions?.respond === true,
+      },
     })),
     history: {
       sessionLimit: options.history?.sessionLimit ?? sessions.length,
@@ -552,6 +566,7 @@ export async function dispatchControllerIntent(controller, intent, options = {})
   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, ...(intent.context?.length ? { context: intent.context } : {}), ...(intent.images?.length ? { images: intent.images } : {}) });
+  if (intent.action === 'steer') return controller.dispatch({ type: 'steer', text: intent.text });
   if (intent.action === 'new') {
     if (intent.mode === 'terminal') {
       return options.onStartTerminal
@@ -608,6 +623,10 @@ export function createControllerBinding(controller, options = {}) {
     },
     ...(options.copyText ? { copyText: options.copyText } : {}),
     ...(options.resolveImage ? { resolveImage: options.resolveImage } : {}),
+    ...(options.confirmIntent ? { confirmIntent: options.confirmIntent } : {}),
+    ...(options.pickContext ? { pickContext: options.pickContext } : {}),
+    ...(options.onClose ? { onClose: options.onClose } : {}),
+    ...(options.onOpen ? { onOpen: options.onOpen } : {}),
   };
   return {
     adapter,