@volter-ai-dev/supercode-ui 0.1.41 → 0.1.43

package/react/components.mjs

@@ -1317,7 +1317,7 @@ function ContinuationBar({ state, adapter, labels = DEFAULT_LABELS }) {
     ] })
   ] });
 }
-function Composer({ state, adapter, labels = DEFAULT_LABELS, memoryKey = state.attached?.key || `${state.harness}:${state.workspace}`, pendingStatus = null, restoreDraft = null, contextCandidates = [], components = {}, onPending, onDraftRestored }) {
+function Composer({ state, adapter, labels = DEFAULT_LABELS, memoryKey = state.attached?.key || `${state.harness}:${state.workspace}`, pendingStatus = null, restoreDraft = null, command = 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 ?? []);
@@ -1329,6 +1329,7 @@ function Composer({ state, adapter, labels = DEFAULT_LABELS, memoryKey = state.a
   const [dragging, setDragging] = useState2(false);
   const [pickerError, setPickerError] = useState2(null);
   const textarea = useRef2(null);
+  const lastCommand = useRef2(null);
   useAutosizeTextarea(textarea, draft);
   const remember = (nextDraft, nextContext, nextImages, nextQueue) => boundedSet(composerMemory, memoryKey, { draft: nextDraft, context: nextContext, images: nextImages, queue: nextQueue });
   useEffect2(() => {
@@ -1370,6 +1371,26 @@ function Composer({ state, adapter, labels = DEFAULT_LABELS, memoryKey = state.a
     textarea.current?.focus({ preventScroll: true });
     onDraftRestored?.(restoreDraft.id);
   }, [onDraftRestored, restoreDraft?.id]);
+  useEffect2(() => {
+    if (!command || command.id === lastCommand.current) return;
+    lastCommand.current = command.id;
+    if (command.action === "attach") {
+      try {
+        const attachments = partitionAttachments(command.attachments);
+        if (context.length + attachments.context.length > MAX_CONTEXT_ITEMS) throw new Error(`Attach at most ${MAX_CONTEXT_ITEMS} text items.`);
+        if (images.length + attachments.images.length > MAX_IMAGE_ITEMS) throw new Error(`Attach at most ${MAX_IMAGE_ITEMS} images.`);
+        const nextContext = mergeContext(context, attachments.context);
+        const nextImages = mergeImages(images, attachments.images);
+        setContext(nextContext);
+        setImages(nextImages);
+        setPickerError(null);
+        remember(draft, nextContext, nextImages, queue);
+      } catch (error) {
+        setPickerError(error instanceof Error ? error.message : "Could not attach context.");
+      }
+    }
+    textarea.current?.focus({ preventScroll: true });
+  }, [command?.id]);
   useEffect2(() => {
     const timer = setTimeout(() => adapter.onIntent({ action: "draft", text: draft }), 250);
     return () => clearTimeout(timer);
@@ -2477,6 +2498,79 @@ function HarnessReadiness({ harnesses, adapter }) {
     ] }, item.id)) })
   ] });
 }
+function HarnessPicker({ harnesses, value, disabled = false, adapter, onChange, logo: Logo = HarnessLogo }) {
+  const [open, setOpen] = useState5(false);
+  const menuId = useId2();
+  const root = useRef6(null);
+  const trigger = useRef6(null);
+  const panel = useRef6(null);
+  const available = harnesses.filter((item) => item.startable);
+  const unavailable = harnesses.filter((item) => !item.startable);
+  const selected = available.find((item) => item.id === value) ?? available[0] ?? null;
+  const close = () => {
+    setOpen(false);
+    trigger.current?.focus({ preventScroll: true });
+  };
+  useEffect7(() => {
+    if (!open) return;
+    panel.current?.querySelector('[aria-selected="true"], [role="option"]')?.focus({ preventScroll: true });
+    const dismiss = (event) => {
+      if (event.type === "keydown" && event.key === "Escape") {
+        event.preventDefault();
+        close();
+      } else if (event.type === "pointerdown" && !root.current?.contains(event.target)) {
+        setOpen(false);
+      }
+    };
+    document.addEventListener("keydown", dismiss);
+    document.addEventListener("pointerdown", dismiss, true);
+    return () => {
+      document.removeEventListener("keydown", dismiss);
+      document.removeEventListener("pointerdown", dismiss, true);
+    };
+  }, [open]);
+  const navigate = (event) => {
+    if (!["ArrowDown", "ArrowUp", "Home", "End"].includes(event.key)) return;
+    const items = [...panel.current.querySelectorAll('[role="option"]')];
+    if (!items.length) return;
+    event.preventDefault();
+    const current = items.indexOf(document.activeElement);
+    const index = event.key === "Home" ? 0 : event.key === "End" ? items.length - 1 : event.key === "ArrowDown" ? (current + 1) % items.length : (current <= 0 ? items.length : current) - 1;
+    items[index].focus({ preventScroll: true });
+  };
+  const select = (id) => {
+    onChange(id);
+    close();
+  };
+  return /* @__PURE__ */ jsxs8("div", { className: "scui-harness-menu", ref: root, onBlur: (event) => {
+    if (event.relatedTarget && !event.currentTarget.contains(event.relatedTarget)) setOpen(false);
+  }, children: [
+    /* @__PURE__ */ jsxs8("button", { ref: trigger, className: "scui-harness-trigger", type: "button", disabled: disabled || !selected, "aria-label": selected ? `Coding harness: ${selected.label}` : "No coding harness available", "aria-haspopup": "dialog", "aria-expanded": open, "aria-controls": open ? menuId : void 0, onClick: () => setOpen((current) => !current), children: [
+      selected ? /* @__PURE__ */ jsx9(Logo, { id: selected.id, size: 20 }) : null,
+      /* @__PURE__ */ jsx9("strong", { children: selected?.label ?? "No harness available" }),
+      /* @__PURE__ */ jsx9(UiIcon, { name: "chevron", size: 13 })
+    ] }),
+    open ? /* @__PURE__ */ jsxs8("div", { ref: panel, id: menuId, className: "scui-harness-popover", role: "dialog", "aria-label": "Choose coding harness", onKeyDown: navigate, children: [
+      /* @__PURE__ */ jsx9("strong", { className: "scui-harness-popover-title", children: "Choose coding harness" }),
+      /* @__PURE__ */ jsx9("div", { className: "scui-harness-options", role: "listbox", "aria-label": "Available coding harnesses", children: available.map((item) => /* @__PURE__ */ jsxs8("button", { type: "button", role: "option", "aria-selected": item.id === selected?.id, onClick: () => select(item.id), children: [
+        /* @__PURE__ */ jsx9(Logo, { id: item.id, size: 24 }),
+        /* @__PURE__ */ jsx9("strong", { children: item.label }),
+        /* @__PURE__ */ jsx9("span", { children: item.id === selected?.id ? /* @__PURE__ */ jsx9(UiIcon, { name: "check", size: 15 }) : null })
+      ] }, item.id)) }),
+      unavailable.length ? /* @__PURE__ */ jsxs8("details", { className: "scui-harness-manage", children: [
+        /* @__PURE__ */ jsx9("summary", { children: "Manage additional harnesses" }),
+        /* @__PURE__ */ jsx9("div", { children: unavailable.map((item) => /* @__PURE__ */ jsxs8("section", { children: [
+          /* @__PURE__ */ jsx9(Logo, { id: item.id, size: 24 }),
+          /* @__PURE__ */ jsxs8("span", { children: [
+            /* @__PURE__ */ jsx9("strong", { children: item.label }),
+            /* @__PURE__ */ jsx9("small", { children: item.reason || (item.auth === "required" ? "Authentication required" : "Unavailable") })
+          ] }),
+          item.repair ? /* @__PURE__ */ jsx9("button", { type: "button", onClick: () => adapter?.copyText?.(item.repair), children: "Copy fix" }) : null
+        ] }, item.id)) })
+      ] }) : null
+    ] }) : null
+  ] });
+}
 
 // src/messenger.jsx
 import { jsx as jsx10, jsxs as jsxs9 } from "react/jsx-runtime";
@@ -2623,7 +2717,7 @@ function ChatHeader({ state, adapter, pendingStatus, actionPending, onBack, onNe
     onClose ? /* @__PURE__ */ jsx10("button", { type: "button", "aria-label": "Close", onClick: onClose, children: /* @__PURE__ */ jsx10(UiIcon, { name: "close", size: 18 }) }) : null
   ] });
 }
-function Chat({ state, adapter, onBack, onNew, onClose, components, slots, labels, contextCandidates, navigation }) {
+function Chat({ state, adapter, onBack, onNew, onClose, components, slots, labels, contextCandidates, navigation, composerCommand }) {
   const Header = slots.header;
   const HeaderActions = slots.headerActions;
   const memoryKey = state.attached?.key || `${state.harness}:${state.workspace}`;
@@ -2750,11 +2844,11 @@ function Chat({ state, adapter, onBack, onNew, onClose, components, slots, label
     /* @__PURE__ */ jsx10(Conversation, { state: actionState, adapter: trackedAdapter, components, slots, memoryKey, pending: pendingMessage, unreadAfterMessages }, memoryKey),
     /* @__PURE__ */ jsx10(ContinuationBar, { state: actionState, adapter: trackedAdapter, labels }),
     /* @__PURE__ */ jsx10(Advisory, { state: actionState, adapter: trackedAdapter, value: state.interopSettings?.advisories[0] ?? null, onReview: (recommendedChange) => setSettings({ recommendedChange }) }),
-    state.mode !== "mirror" || state.canSend ? /* @__PURE__ */ jsx10(Composer, { state: actionState, adapter: trackedAdapter, labels, memoryKey, pendingStatus: pending?.status ?? null, restoreDraft, contextCandidates, components, onDraftRestored: (id) => setRestoreDraft((value) => value?.id === id ? null : value), onPending: beginPending }, memoryKey) : null,
+    state.mode !== "mirror" || state.canSend ? /* @__PURE__ */ jsx10(Composer, { state: actionState, adapter: trackedAdapter, labels, memoryKey, pendingStatus: pending?.status ?? null, restoreDraft, command: composerCommand, contextCandidates, components, onDraftRestored: (id) => setRestoreDraft((value) => value?.id === id ? null : value), onPending: beginPending }, memoryKey) : null,
     settings ? /* @__PURE__ */ jsx10(SettingsPanel, { state: actionState, adapter: trackedAdapter, value: state.interopSettings, recommendedChange: settings.recommendedChange, onClose: () => setSettings(null) }) : null
   ] });
 }
-function NewChat({ state, adapter, onBack, onClose, onStarted, labels, memoryKey, headerActions: HeaderActions, contextCandidates, components, navigation }) {
+function NewChat({ state, adapter, onBack, onClose, onStarted, labels, memoryKey, headerActions: HeaderActions, contextCandidates, components, navigation, composerCommand }) {
   const startable = state.harnesses.filter((item) => item.startable);
   const startableKey = startable.map((item) => `${item.id}:${item.launchModes?.join(",")}:${item.preferredLaunchMode ?? ""}`).join("\0");
   const remembered = newChatMemory.get(memoryKey) ?? { harness: startable[0]?.id ?? "", draft: "", context: [], images: [], modes: {} };
@@ -2768,8 +2862,10 @@ function NewChat({ state, adapter, onBack, onClose, onStarted, labels, memoryKey
   const [dragging, setDragging] = useState6(false);
   const [pickerError, setPickerError] = useState6(null);
   const startSequence = useRef7(0);
+  const lastComposerCommand = useRef7(null);
   const textarea = useRef7(null);
   const selectedHarness = startable.find((item) => item.id === harness) ?? null;
+  const Picker = components.HarnessPicker ?? HarnessPicker;
   const Readiness = components.HarnessReadiness ?? HarnessReadiness;
   const launchModes = selectedHarness?.launchModes?.length ? selectedHarness.launchModes : ["headless"];
   const rememberedMode = modes[harness];
@@ -2810,6 +2906,32 @@ function NewChat({ state, adapter, onBack, onClose, onStarted, labels, memoryKey
     remember({ harness: nextHarness, draft: nextDraft, context: nextContext, images: nextImages });
     textarea.current?.focus({ preventScroll: true });
   }, [navigation?.id]);
+  useEffect8(() => {
+    if (!composerCommand || composerCommand.id === lastComposerCommand.current) return;
+    lastComposerCommand.current = composerCommand.id;
+    if (composerCommand.action === "attach") {
+      if (mode === "terminal" && !launchModes.includes("headless")) {
+        setPickerError("Terminal starts currently accept text only. Choose Chat to attach context or images.");
+      } else {
+        try {
+          const attachments = partitionAttachments(composerCommand.attachments);
+          if (context.length + attachments.context.length > MAX_CONTEXT_ITEMS) throw new Error(`Attach at most ${MAX_CONTEXT_ITEMS} text items.`);
+          if (images.length + attachments.images.length > MAX_IMAGE_ITEMS) throw new Error(`Attach at most ${MAX_IMAGE_ITEMS} images.`);
+          const nextContext = mergeContext(context, attachments.context);
+          const nextImages = mergeImages(images, attachments.images);
+          const nextModes = mode === "terminal" ? { ...modes, [harness]: "headless" } : modes;
+          if (nextModes !== modes) setModes(nextModes);
+          setContext(nextContext);
+          setImages(nextImages);
+          setPickerError(null);
+          remember({ context: nextContext, images: nextImages, modes: nextModes });
+        } catch (error) {
+          setPickerError(error instanceof Error ? error.message : "Could not attach context.");
+        }
+      }
+    }
+    textarea.current?.focus({ preventScroll: true });
+  }, [composerCommand?.id]);
   const pickContext = () => {
     if (mode === "terminal" || !adapter.pickContext || picking || context.length >= MAX_CONTEXT_ITEMS && images.length >= MAX_IMAGE_ITEMS) return;
     setPicking(true);
@@ -2907,18 +3029,6 @@ function NewChat({ state, adapter, onBack, onClose, onStarted, labels, memoryKey
       /* @__PURE__ */ jsx10("small", { children: "Choose a coding harness and send the first message." })
     ] }),
     /* @__PURE__ */ jsxs9("div", { className: "scui-compose", children: [
-      /* @__PURE__ */ jsxs9("label", { className: "scui-harness-picker", children: [
-        /* @__PURE__ */ jsx10(HarnessLogo, { id: harness, size: 24 }),
-        /* @__PURE__ */ jsx10("span", { children: "Coding harness" }),
-        /* @__PURE__ */ jsx10("select", { value: harness, disabled: Boolean(starting), onChange: (event) => {
-          const value = event.currentTarget.value;
-          setHarness(value);
-          remember({ harness: value });
-        }, children: state.harnesses.map((item) => /* @__PURE__ */ jsxs9("option", { value: item.id, disabled: !item.startable, children: [
-          item.label,
-          item.startable ? "" : " \xB7 unavailable"
-        ] }, item.id)) })
-      ] }),
       /* @__PURE__ */ jsx10(Readiness, { harnesses: state.harnesses, state, adapter }),
       launchModes.length > 1 ? /* @__PURE__ */ jsxs9("fieldset", { className: "scui-launch-modes", disabled: Boolean(starting), children: [
         /* @__PURE__ */ jsx10("legend", { children: "Run as" }),
@@ -2947,7 +3057,7 @@ function NewChat({ state, adapter, onBack, onClose, onStarted, labels, memoryKey
         return next;
       }) }),
       terminalAttachments ? /* @__PURE__ */ jsx10("small", { className: "scui-context-error", role: "alert", children: "Terminal starts currently accept text only. Remove attachments or choose Chat." }) : pickerError ? /* @__PURE__ */ jsx10("small", { className: "scui-context-error", role: "alert", children: pickerError }) : null,
-      /* @__PURE__ */ jsxs9("div", { className: `scui-envelope${dragging ? " scui-drop-target" : ""}`, onDragEnter: (event) => {
+      /* @__PURE__ */ jsxs9("div", { className: `scui-envelope scui-new-envelope${dragging ? " scui-drop-target" : ""}`, onDragEnter: (event) => {
         if (Array.from(event.dataTransfer?.types ?? []).includes("Files")) {
           event.preventDefault();
           setDragging(true);
@@ -2957,7 +3067,6 @@ function NewChat({ state, adapter, onBack, onClose, onStarted, labels, memoryKey
       }, onDragLeave: (event) => {
         if (!event.currentTarget.contains(event.relatedTarget)) setDragging(false);
       }, onDrop: dropImages, children: [
-        adapter.pickContext ? /* @__PURE__ */ jsx10("button", { className: "scui-attach", type: "button", "aria-label": "Attach files or images", disabled: mode === "terminal" || picking || context.length >= MAX_CONTEXT_ITEMS && images.length >= MAX_IMAGE_ITEMS || Boolean(starting), onClick: pickContext, children: picking ? /* @__PURE__ */ jsx10("i", { className: "scui-control-spinner" }) : /* @__PURE__ */ jsx10(UiIcon, { name: "attach", size: 17 }) }) : null,
         /* @__PURE__ */ jsx10("textarea", { ref: textarea, rows: 3, "aria-label": "Message coding agent", placeholder: startable.length ? "What should the agent do?" : "No coding harness is available", value: draft, disabled: !startable.length || Boolean(starting), onPaste: pasteImages, onInput: (event) => {
           const value = event.currentTarget.value;
           setDraft(value);
@@ -2968,12 +3077,19 @@ function NewChat({ state, adapter, onBack, onClose, onStarted, labels, memoryKey
             send();
           }
         } }),
-        /* @__PURE__ */ jsx10("span", { children: /* @__PURE__ */ jsx10("button", { type: "button", className: "scui-send", "aria-label": mode === "terminal" ? "Start terminal session" : "Start chat", disabled: !draft.trim() && !images.length || !harness || Boolean(starting) || terminalAttachments || mode === "terminal" && !draft.trim(), onClick: send, children: starting ? /* @__PURE__ */ jsx10("i", { className: "scui-control-spinner" }) : /* @__PURE__ */ jsx10(UiIcon, { name: "send", size: 17 }) }) })
+        /* @__PURE__ */ jsxs9("footer", { className: "scui-new-envelope-controls", children: [
+          adapter.pickContext ? /* @__PURE__ */ jsx10("button", { className: "scui-attach", type: "button", "aria-label": "Attach files or images", disabled: mode === "terminal" || picking || context.length >= MAX_CONTEXT_ITEMS && images.length >= MAX_IMAGE_ITEMS || Boolean(starting), onClick: pickContext, children: picking ? /* @__PURE__ */ jsx10("i", { className: "scui-control-spinner" }) : /* @__PURE__ */ jsx10(UiIcon, { name: "attach", size: 17 }) }) : null,
+          /* @__PURE__ */ jsx10(Picker, { harnesses: state.harnesses, value: harness, disabled: Boolean(starting), adapter, logo: components.HarnessLogo, onChange: (value) => {
+            setHarness(value);
+            remember({ harness: value });
+          } }),
+          /* @__PURE__ */ jsx10("span", { children: /* @__PURE__ */ jsx10("button", { type: "button", className: "scui-send", "aria-label": mode === "terminal" ? "Start terminal session" : "Start chat", disabled: !draft.trim() && !images.length || !harness || Boolean(starting) || terminalAttachments || mode === "terminal" && !draft.trim(), onClick: send, children: starting ? /* @__PURE__ */ jsx10("i", { className: "scui-control-spinner" }) : /* @__PURE__ */ jsx10(UiIcon, { name: "send", size: 17 }) }) })
+        ] })
       ] })
     ] })
   ] });
 }
-function SupercodeMessenger({ state: stateInput, adapter, class: className = "", initialView, navigation = null, onViewChange, contextCandidates: candidatesInput = [], labels, components = {}, slots = {} }) {
+function SupercodeMessenger({ state: stateInput, adapter, class: className = "", initialView, navigation = null, composerCommand = null, onViewChange, contextCandidates: candidatesInput = [], labels, components = {}, slots = {} }) {
   const state = useMemo3(() => normalizeUiState(stateInput), [stateInput]);
   const contextCandidates = useMemo3(() => normalizeAttachmentCandidates(candidatesInput), [candidatesInput]);
   const copy = { ...DEFAULT_LABELS, ...labels };
@@ -3044,7 +3160,7 @@ function SupercodeMessenger({ state: stateInput, adapter, class: className = "",
       setNewNavigation(null);
       setView("new");
     }, onClose: adapter.onClose ? close : void 0, components, labels: copy, memoryKey, slots, headerActions: HeaderActions }) : null,
-    view === "new" ? /* @__PURE__ */ jsx10(NewChat, { state, adapter, onBack: () => setView("list"), onClose: adapter.onClose ? close : void 0, onStarted: (mode) => setView(mode === "terminal" ? "list" : "chat"), labels: copy, memoryKey, headerActions: HeaderActions, contextCandidates, components, navigation: newNavigation }) : null,
+    view === "new" ? /* @__PURE__ */ jsx10(NewChat, { state, adapter, onBack: () => setView("list"), onClose: adapter.onClose ? close : void 0, onStarted: (mode) => setView(mode === "terminal" ? "list" : "chat"), labels: copy, memoryKey, headerActions: HeaderActions, contextCandidates, components, navigation: newNavigation, composerCommand }) : null,
     view === "chat" ? /* @__PURE__ */ jsx10(Chat, { state, adapter, onBack: () => {
       setListFocus(state.attached?.key ?? listFocus);
       setView("list");
@@ -3053,7 +3169,7 @@ function SupercodeMessenger({ state: stateInput, adapter, class: className = "",
       setChatNavigation(null);
       setNewNavigation(null);
       setView("new");
-    }, onClose: adapter.onClose ? close : void 0, components, slots, labels: copy, contextCandidates, navigation: chatNavigation?.sessionKey === state.attached?.key ? chatNavigation : null }) : null,
+    }, onClose: adapter.onClose ? close : void 0, components, slots, labels: copy, contextCandidates, navigation: chatNavigation?.sessionKey === state.attached?.key ? chatNavigation : null, composerCommand }) : null,
     opening ? /* @__PURE__ */ jsxs9("div", { className: "scui-opening", role: "status", "aria-busy": "true", children: [
       /* @__PURE__ */ jsx10(HarnessLogo, { id: opening.harness, size: 34 }),
       /* @__PURE__ */ jsxs9("span", { children: [
@@ -3078,6 +3194,7 @@ export {
   Conversation,
   HarnessAdvisory,
   HarnessLogo,
+  HarnessPicker,
   HarnessReadiness,
   HarnessSettingsPanel,
   ImageViewer,

package/react/composer.mjs

@@ -318,7 +318,7 @@ function ContinuationBar({ state, adapter, labels = DEFAULT_LABELS }) {
     ] })
   ] });
 }
-function Composer({ state, adapter, labels = DEFAULT_LABELS, memoryKey = state.attached?.key || `${state.harness}:${state.workspace}`, pendingStatus = null, restoreDraft = null, contextCandidates = [], components = {}, onPending, onDraftRestored }) {
+function Composer({ state, adapter, labels = DEFAULT_LABELS, memoryKey = state.attached?.key || `${state.harness}:${state.workspace}`, pendingStatus = null, restoreDraft = null, command = 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 ?? []);
@@ -330,6 +330,7 @@ function Composer({ state, adapter, labels = DEFAULT_LABELS, memoryKey = state.a
   const [dragging, setDragging] = useState2(false);
   const [pickerError, setPickerError] = useState2(null);
   const textarea = useRef2(null);
+  const lastCommand = useRef2(null);
   useAutosizeTextarea(textarea, draft);
   const remember = (nextDraft, nextContext, nextImages, nextQueue) => boundedSet(composerMemory, memoryKey, { draft: nextDraft, context: nextContext, images: nextImages, queue: nextQueue });
   useEffect2(() => {
@@ -371,6 +372,26 @@ function Composer({ state, adapter, labels = DEFAULT_LABELS, memoryKey = state.a
     textarea.current?.focus({ preventScroll: true });
     onDraftRestored?.(restoreDraft.id);
   }, [onDraftRestored, restoreDraft?.id]);
+  useEffect2(() => {
+    if (!command || command.id === lastCommand.current) return;
+    lastCommand.current = command.id;
+    if (command.action === "attach") {
+      try {
+        const attachments = partitionAttachments(command.attachments);
+        if (context.length + attachments.context.length > MAX_CONTEXT_ITEMS) throw new Error(`Attach at most ${MAX_CONTEXT_ITEMS} text items.`);
+        if (images.length + attachments.images.length > MAX_IMAGE_ITEMS) throw new Error(`Attach at most ${MAX_IMAGE_ITEMS} images.`);
+        const nextContext = mergeContext(context, attachments.context);
+        const nextImages = mergeImages(images, attachments.images);
+        setContext(nextContext);
+        setImages(nextImages);
+        setPickerError(null);
+        remember(draft, nextContext, nextImages, queue);
+      } catch (error) {
+        setPickerError(error instanceof Error ? error.message : "Could not attach context.");
+      }
+    }
+    textarea.current?.focus({ preventScroll: true });
+  }, [command?.id]);
   useEffect2(() => {
     const timer = setTimeout(() => adapter.onIntent({ action: "draft", text: draft }), 250);
     return () => clearTimeout(timer);

package/react/index.d.ts

@@ -7,9 +7,11 @@ import type {
   ContextCandidateProps,
   HarnessAdvisoryProps,
   HarnessId,
+  HarnessPickerProps,
   HarnessSettingsPanelProps,
   HarnessOption,
   MessengerLabels,
+  MessengerComposerCommand,
   MessengerNavigation,
   PendingMessageModel,
   SessionActivity,
@@ -36,9 +38,11 @@ export type {
   ContextCandidateProps,
   HarnessAdvisoryProps,
   HarnessId,
+  HarnessPickerProps,
   HarnessSettingsPanelProps,
   HarnessOption,
   MessengerLabels,
+  MessengerComposerCommand,
   MessengerNavigation,
   PendingMessageModel,
   SessionActivity,
@@ -66,6 +70,7 @@ export interface MessengerComponents {
   HarnessLogo?: ComponentType<{ id: HarnessId; activity?: SessionActivity; size?: number }>;
   HarnessAdvisory?: ComponentType<HarnessAdvisoryProps>;
   HarnessSettingsPanel?: ComponentType<HarnessSettingsPanelProps>;
+  HarnessPicker?: ComponentType<HarnessPickerProps>;
   ContextCandidate?: ComponentType<ContextCandidateProps>;
   HarnessReadiness?: ComponentType<{ harnesses: HarnessOption[]; state: SupercodeUiState; adapter: UiAdapter }>;
 }
@@ -87,6 +92,7 @@ export interface MessengerProps {
   class?: string;
   initialView?: 'list' | 'chat' | 'new';
   navigation?: MessengerNavigation | null;
+  composerCommand?: MessengerComposerCommand | null;
   onViewChange?(view: 'list' | 'chat' | 'new'): void;
   contextCandidates?: TranscriptAttachment[];
   labels?: Partial<MessengerLabels>;
@@ -112,11 +118,12 @@ export function ToolRow(props: ToolRowProps): ReactElement;
 export function TaskPlan(props: { plan: TaskPlanModel }): ReactElement | null;
 export function HarnessAdvisory(props: HarnessAdvisoryProps): ReactElement | null;
 export function HarnessSettingsPanel(props: HarnessSettingsPanelProps): ReactElement;
+export function HarnessPicker(props: HarnessPickerProps): ReactElement;
 export function HarnessReadiness(props: { harnesses: HarnessOption[]; state: SupercodeUiState; adapter: UiAdapter }): ReactElement | null;
 export function SessionDetails(props: { semantics: SupercodeUiState['semantics'] }): ReactElement | null;
 export function Conversation(props: { state: SupercodeUiState; adapter: UiAdapter; components?: MessengerComponents; slots?: MessengerSlots; memoryKey?: string; pending?: string | PendingMessageModel | null; unreadAfterMessages?: number | null }): ReactElement;
 export function SessionRow(props: { row: SessionRowModel; state: SupercodeUiState; adapter: UiAdapter; now?: number; onOpen(row: SessionRowModel): void }): ReactElement;
 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'] }): ReactElement;
 export function ContinuationBar(props: { state: SupercodeUiState; adapter: UiAdapter; labels?: MessengerLabels }): ReactElement | 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; contextCandidates?: TranscriptAttachment[]; components?: Pick<MessengerComponents, 'ContextCandidate'>; onPending?(text: string, context?: TranscriptContext[], images?: TranscriptImage[]): void; onDraftRestored?(id: string | number): void }): ReactElement;
+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; command?: MessengerComposerCommand | null; contextCandidates?: TranscriptAttachment[]; components?: Pick<MessengerComponents, 'ContextCandidate'>; onPending?(text: string, context?: TranscriptContext[], images?: TranscriptImage[]): void; onDraftRestored?(id: string | number): void }): ReactElement;
 export function SupercodeMessenger(props: MessengerProps): ReactElement;