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

package/react/messenger.mjs

@@ -1280,7 +1280,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 ?? []);
@@ -1292,6 +1292,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(() => {
@@ -1333,6 +1334,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);
@@ -2394,6 +2415,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__ */ jsxs7("div", { className: "scui-harness-menu", ref: root, onBlur: (event) => {
+    if (event.relatedTarget && !event.currentTarget.contains(event.relatedTarget)) setOpen(false);
+  }, children: [
+    /* @__PURE__ */ jsxs7("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__ */ jsx8(Logo, { id: selected.id, size: 20 }) : null,
+      /* @__PURE__ */ jsx8("strong", { children: selected?.label ?? "No harness available" }),
+      /* @__PURE__ */ jsx8(UiIcon, { name: "chevron", size: 13 })
+    ] }),
+    open ? /* @__PURE__ */ jsxs7("div", { ref: panel, id: menuId, className: "scui-harness-popover", role: "dialog", "aria-label": "Choose coding harness", onKeyDown: navigate, children: [
+      /* @__PURE__ */ jsx8("strong", { className: "scui-harness-popover-title", children: "Choose coding harness" }),
+      /* @__PURE__ */ jsx8("div", { className: "scui-harness-options", role: "listbox", "aria-label": "Available coding harnesses", children: available.map((item) => /* @__PURE__ */ jsxs7("button", { type: "button", role: "option", "aria-selected": item.id === selected?.id, onClick: () => select(item.id), children: [
+        /* @__PURE__ */ jsx8(Logo, { id: item.id, size: 24 }),
+        /* @__PURE__ */ jsx8("strong", { children: item.label }),
+        /* @__PURE__ */ jsx8("span", { children: item.id === selected?.id ? /* @__PURE__ */ jsx8(UiIcon, { name: "check", size: 15 }) : null })
+      ] }, item.id)) }),
+      unavailable.length ? /* @__PURE__ */ jsxs7("details", { className: "scui-harness-manage", children: [
+        /* @__PURE__ */ jsx8("summary", { children: "Manage additional harnesses" }),
+        /* @__PURE__ */ jsx8("div", { children: unavailable.map((item) => /* @__PURE__ */ jsxs7("section", { children: [
+          /* @__PURE__ */ jsx8(Logo, { id: item.id, size: 24 }),
+          /* @__PURE__ */ jsxs7("span", { children: [
+            /* @__PURE__ */ jsx8("strong", { children: item.label }),
+            /* @__PURE__ */ jsx8("small", { children: item.reason || (item.auth === "required" ? "Authentication required" : "Unavailable") })
+          ] }),
+          item.repair ? /* @__PURE__ */ jsx8("button", { type: "button", onClick: () => adapter?.copyText?.(item.repair), children: "Copy fix" }) : null
+        ] }, item.id)) })
+      ] }) : null
+    ] }) : null
+  ] });
+}
 
 // src/messenger.jsx
 import { jsx as jsx9, jsxs as jsxs8 } from "react/jsx-runtime";
@@ -2540,7 +2634,7 @@ function ChatHeader({ state, adapter, pendingStatus, actionPending, onBack, onNe
     onClose ? /* @__PURE__ */ jsx9("button", { type: "button", "aria-label": "Close", onClick: onClose, children: /* @__PURE__ */ jsx9(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}`;
@@ -2667,11 +2761,11 @@ function Chat({ state, adapter, onBack, onNew, onClose, components, slots, label
     /* @__PURE__ */ jsx9(Conversation, { state: actionState, adapter: trackedAdapter, components, slots, memoryKey, pending: pendingMessage, unreadAfterMessages }, memoryKey),
     /* @__PURE__ */ jsx9(ContinuationBar, { state: actionState, adapter: trackedAdapter, labels }),
     /* @__PURE__ */ jsx9(Advisory, { state: actionState, adapter: trackedAdapter, value: state.interopSettings?.advisories[0] ?? null, onReview: (recommendedChange) => setSettings({ recommendedChange }) }),
-    state.mode !== "mirror" || state.canSend ? /* @__PURE__ */ jsx9(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__ */ jsx9(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__ */ jsx9(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: {} };
@@ -2685,8 +2779,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];
@@ -2727,6 +2823,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);
@@ -2824,18 +2946,6 @@ function NewChat({ state, adapter, onBack, onClose, onStarted, labels, memoryKey
       /* @__PURE__ */ jsx9("small", { children: "Choose a coding harness and send the first message." })
     ] }),
     /* @__PURE__ */ jsxs8("div", { className: "scui-compose", children: [
-      /* @__PURE__ */ jsxs8("label", { className: "scui-harness-picker", children: [
-        /* @__PURE__ */ jsx9(HarnessLogo, { id: harness, size: 24 }),
-        /* @__PURE__ */ jsx9("span", { children: "Coding harness" }),
-        /* @__PURE__ */ jsx9("select", { value: harness, disabled: Boolean(starting), onChange: (event) => {
-          const value = event.currentTarget.value;
-          setHarness(value);
-          remember({ harness: value });
-        }, children: state.harnesses.map((item) => /* @__PURE__ */ jsxs8("option", { value: item.id, disabled: !item.startable, children: [
-          item.label,
-          item.startable ? "" : " \xB7 unavailable"
-        ] }, item.id)) })
-      ] }),
       /* @__PURE__ */ jsx9(Readiness, { harnesses: state.harnesses, state, adapter }),
       launchModes.length > 1 ? /* @__PURE__ */ jsxs8("fieldset", { className: "scui-launch-modes", disabled: Boolean(starting), children: [
         /* @__PURE__ */ jsx9("legend", { children: "Run as" }),
@@ -2864,7 +2974,7 @@ function NewChat({ state, adapter, onBack, onClose, onStarted, labels, memoryKey
         return next;
       }) }),
       terminalAttachments ? /* @__PURE__ */ jsx9("small", { className: "scui-context-error", role: "alert", children: "Terminal starts currently accept text only. Remove attachments or choose Chat." }) : pickerError ? /* @__PURE__ */ jsx9("small", { className: "scui-context-error", role: "alert", children: pickerError }) : null,
-      /* @__PURE__ */ jsxs8("div", { className: `scui-envelope${dragging ? " scui-drop-target" : ""}`, onDragEnter: (event) => {
+      /* @__PURE__ */ jsxs8("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);
@@ -2874,7 +2984,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__ */ jsx9("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__ */ jsx9("i", { className: "scui-control-spinner" }) : /* @__PURE__ */ jsx9(UiIcon, { name: "attach", size: 17 }) }) : null,
         /* @__PURE__ */ jsx9("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);
@@ -2885,12 +2994,19 @@ function NewChat({ state, adapter, onBack, onClose, onStarted, labels, memoryKey
             send();
           }
         } }),
-        /* @__PURE__ */ jsx9("span", { children: /* @__PURE__ */ jsx9("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__ */ jsx9("i", { className: "scui-control-spinner" }) : /* @__PURE__ */ jsx9(UiIcon, { name: "send", size: 17 }) }) })
+        /* @__PURE__ */ jsxs8("footer", { className: "scui-new-envelope-controls", children: [
+          adapter.pickContext ? /* @__PURE__ */ jsx9("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__ */ jsx9("i", { className: "scui-control-spinner" }) : /* @__PURE__ */ jsx9(UiIcon, { name: "attach", size: 17 }) }) : null,
+          /* @__PURE__ */ jsx9(Picker, { harnesses: state.harnesses, value: harness, disabled: Boolean(starting), adapter, logo: components.HarnessLogo, onChange: (value) => {
+            setHarness(value);
+            remember({ harness: value });
+          } }),
+          /* @__PURE__ */ jsx9("span", { children: /* @__PURE__ */ jsx9("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__ */ jsx9("i", { className: "scui-control-spinner" }) : /* @__PURE__ */ jsx9(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 };
@@ -2961,7 +3077,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__ */ jsx9(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__ */ jsx9(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__ */ jsx9(Chat, { state, adapter, onBack: () => {
       setListFocus(state.attached?.key ?? listFocus);
       setView("list");
@@ -2970,7 +3086,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__ */ jsxs8("div", { className: "scui-opening", role: "status", "aria-busy": "true", children: [
       /* @__PURE__ */ jsx9(HarnessLogo, { id: opening.harness, size: 34 }),
       /* @__PURE__ */ jsxs8("span", { children: [

package/react/settings.d.ts

@@ -1,2 +1,2 @@
-export type { HarnessAdvisoryProps, HarnessSettingsPanelProps } from './index.js';
-export { HarnessAdvisory, HarnessSettingsPanel } from './index.js';
+export type { HarnessAdvisoryProps, HarnessPickerProps, HarnessSettingsPanelProps } from './index.js';
+export { HarnessAdvisory, HarnessPicker, HarnessSettingsPanel } from './index.js';

package/react/settings.mjs

@@ -307,8 +307,82 @@ function HarnessReadiness({ harnesses, adapter }) {
     ] }, item.id)) })
   ] });
 }
+function HarnessPicker({ harnesses, value, disabled = false, adapter, onChange, logo: Logo = HarnessLogo }) {
+  const [open, setOpen] = useState(false);
+  const menuId = useId();
+  const root = useRef(null);
+  const trigger = useRef(null);
+  const panel = useRef(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 });
+  };
+  useEffect2(() => {
+    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__ */ jsxs3("div", { className: "scui-harness-menu", ref: root, onBlur: (event) => {
+    if (event.relatedTarget && !event.currentTarget.contains(event.relatedTarget)) setOpen(false);
+  }, children: [
+    /* @__PURE__ */ jsxs3("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__ */ jsx3(Logo, { id: selected.id, size: 20 }) : null,
+      /* @__PURE__ */ jsx3("strong", { children: selected?.label ?? "No harness available" }),
+      /* @__PURE__ */ jsx3(UiIcon, { name: "chevron", size: 13 })
+    ] }),
+    open ? /* @__PURE__ */ jsxs3("div", { ref: panel, id: menuId, className: "scui-harness-popover", role: "dialog", "aria-label": "Choose coding harness", onKeyDown: navigate, children: [
+      /* @__PURE__ */ jsx3("strong", { className: "scui-harness-popover-title", children: "Choose coding harness" }),
+      /* @__PURE__ */ jsx3("div", { className: "scui-harness-options", role: "listbox", "aria-label": "Available coding harnesses", children: available.map((item) => /* @__PURE__ */ jsxs3("button", { type: "button", role: "option", "aria-selected": item.id === selected?.id, onClick: () => select(item.id), children: [
+        /* @__PURE__ */ jsx3(Logo, { id: item.id, size: 24 }),
+        /* @__PURE__ */ jsx3("strong", { children: item.label }),
+        /* @__PURE__ */ jsx3("span", { children: item.id === selected?.id ? /* @__PURE__ */ jsx3(UiIcon, { name: "check", size: 15 }) : null })
+      ] }, item.id)) }),
+      unavailable.length ? /* @__PURE__ */ jsxs3("details", { className: "scui-harness-manage", children: [
+        /* @__PURE__ */ jsx3("summary", { children: "Manage additional harnesses" }),
+        /* @__PURE__ */ jsx3("div", { children: unavailable.map((item) => /* @__PURE__ */ jsxs3("section", { children: [
+          /* @__PURE__ */ jsx3(Logo, { id: item.id, size: 24 }),
+          /* @__PURE__ */ jsxs3("span", { children: [
+            /* @__PURE__ */ jsx3("strong", { children: item.label }),
+            /* @__PURE__ */ jsx3("small", { children: item.reason || (item.auth === "required" ? "Authentication required" : "Unavailable") })
+          ] }),
+          item.repair ? /* @__PURE__ */ jsx3("button", { type: "button", onClick: () => adapter?.copyText?.(item.repair), children: "Copy fix" }) : null
+        ] }, item.id)) })
+      ] }) : null
+    ] }) : null
+  ] });
+}
 export {
   HarnessAdvisory,
+  HarnessPicker,
   HarnessReadiness,
   HarnessSettingsPanel
 };

package/settings.d.ts

@@ -1,2 +1,2 @@
-export { HarnessAdvisory, HarnessSettingsPanel } from './index.js';
-export type { HarnessAdvisoryProps, HarnessSettingsPanelProps } from './index.js';
+export { HarnessAdvisory, HarnessPicker, HarnessSettingsPanel } from './index.js';
+export type { HarnessAdvisoryProps, HarnessPickerProps, HarnessSettingsPanelProps } from './index.js';

package/settings.mjs

@@ -307,8 +307,82 @@ function HarnessReadiness({ harnesses, adapter }) {
     ] }, item.id)) })
   ] });
 }
+function HarnessPicker({ harnesses, value, disabled = false, adapter, onChange, logo: Logo = HarnessLogo }) {
+  const [open, setOpen] = useState(false);
+  const menuId = useId();
+  const root = useRef(null);
+  const trigger = useRef(null);
+  const panel = useRef(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 });
+  };
+  useEffect2(() => {
+    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__ */ jsxs3("div", { className: "scui-harness-menu", ref: root, onBlur: (event) => {
+    if (event.relatedTarget && !event.currentTarget.contains(event.relatedTarget)) setOpen(false);
+  }, children: [
+    /* @__PURE__ */ jsxs3("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__ */ jsx3(Logo, { id: selected.id, size: 20 }) : null,
+      /* @__PURE__ */ jsx3("strong", { children: selected?.label ?? "No harness available" }),
+      /* @__PURE__ */ jsx3(UiIcon, { name: "chevron", size: 13 })
+    ] }),
+    open ? /* @__PURE__ */ jsxs3("div", { ref: panel, id: menuId, className: "scui-harness-popover", role: "dialog", "aria-label": "Choose coding harness", onKeyDown: navigate, children: [
+      /* @__PURE__ */ jsx3("strong", { className: "scui-harness-popover-title", children: "Choose coding harness" }),
+      /* @__PURE__ */ jsx3("div", { className: "scui-harness-options", role: "listbox", "aria-label": "Available coding harnesses", children: available.map((item) => /* @__PURE__ */ jsxs3("button", { type: "button", role: "option", "aria-selected": item.id === selected?.id, onClick: () => select(item.id), children: [
+        /* @__PURE__ */ jsx3(Logo, { id: item.id, size: 24 }),
+        /* @__PURE__ */ jsx3("strong", { children: item.label }),
+        /* @__PURE__ */ jsx3("span", { children: item.id === selected?.id ? /* @__PURE__ */ jsx3(UiIcon, { name: "check", size: 15 }) : null })
+      ] }, item.id)) }),
+      unavailable.length ? /* @__PURE__ */ jsxs3("details", { className: "scui-harness-manage", children: [
+        /* @__PURE__ */ jsx3("summary", { children: "Manage additional harnesses" }),
+        /* @__PURE__ */ jsx3("div", { children: unavailable.map((item) => /* @__PURE__ */ jsxs3("section", { children: [
+          /* @__PURE__ */ jsx3(Logo, { id: item.id, size: 24 }),
+          /* @__PURE__ */ jsxs3("span", { children: [
+            /* @__PURE__ */ jsx3("strong", { children: item.label }),
+            /* @__PURE__ */ jsx3("small", { children: item.reason || (item.auth === "required" ? "Authentication required" : "Unavailable") })
+          ] }),
+          item.repair ? /* @__PURE__ */ jsx3("button", { type: "button", onClick: () => adapter?.copyText?.(item.repair), children: "Copy fix" }) : null
+        ] }, item.id)) })
+      ] }) : null
+    ] }) : null
+  ] });
+}
 export {
   HarnessAdvisory,
+  HarnessPicker,
   HarnessReadiness,
   HarnessSettingsPanel
 };

package/styles.css

@@ -198,7 +198,10 @@
 .scui-send,.scui-stop { display:grid; width:29px; height:29px; padding:0; place-items:center; border:0; border-radius:8px; background:var(--scui-accent); color:#fff; cursor:pointer }.scui-stop { background:var(--scui-danger) }.scui-send:disabled,.scui-stop:disabled { opacity:.4; cursor:default }.scui-control-spinner { box-sizing:border-box; width:13px; height:13px; border:1.5px solid currentColor; border-right-color:transparent; border-radius:50%; animation:scui-spin .75s linear infinite }
 .scui-queue-send { display:grid; width:29px; height:29px; padding:0; place-items:center; border:0; border-radius:8px; background:transparent; color:var(--scui-muted); cursor:pointer }.scui-queue-send:hover { background:var(--scui-fill); color:var(--scui-fg) }
 .scui-queue { display:grid; gap:4px; max-height:85px; margin-bottom:6px; overflow:auto; font-size:10.5px }.scui-queue > span { display:flex; gap:6px; padding:4px 6px; border-radius:5px; background:var(--scui-fill) }.scui-queue > span > span { display:grid; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }.scui-queue small { color:var(--scui-muted) }.scui-queue > span button { margin-left:auto; border:0; background:transparent }
-.scui-harness-picker { display:flex; align-items:center; gap:7px; margin-bottom:7px }.scui-harness-picker select { margin-left:auto; max-width:55%; padding:4px; border:1px solid var(--scui-border); border-radius:6px; background:var(--scui-bg); color:var(--scui-fg) }
+.scui-new-envelope { display:grid; align-items:stretch; gap:3px; padding:7px }.scui-new-envelope textarea { box-sizing:border-box; width:100%; min-height:54px; padding:2px 3px }.scui-new-envelope-controls { display:flex; min-width:0; align-items:center; gap:3px }.scui-new-envelope-controls > span { display:flex; margin-left:auto }.scui-new-envelope-controls .scui-attach { flex-basis:29px; width:29px; height:29px }
+.scui-harness-menu { position:relative; min-width:0 }.scui-harness-trigger { display:flex; max-width:170px; height:29px; align-items:center; gap:6px; padding:3px 7px 3px 4px; border:0; border-radius:8px; background:transparent; color:var(--scui-fg); cursor:pointer }.scui-harness-trigger:hover:not(:disabled),.scui-harness-trigger:focus-visible,.scui-harness-trigger[aria-expanded="true"] { background:var(--scui-fill) }.scui-harness-trigger:disabled { cursor:default; opacity:.55 }.scui-harness-trigger > strong { min-width:0; overflow:hidden; font-size:10.5px; font-weight:600; text-overflow:ellipsis; white-space:nowrap }.scui-harness-trigger > .scui-icon { flex:none; color:var(--scui-muted); transform:rotate(90deg); transition:transform 120ms }.scui-harness-trigger[aria-expanded="true"] > .scui-icon { transform:rotate(-90deg) }
+.scui-harness-popover { position:absolute; z-index:25; bottom:calc(100% + 7px); left:0; display:grid; box-sizing:border-box; width:min(250px,calc(100vw - 24px)); max-height:min(330px,calc(100dvh - 90px)); overflow:auto; padding:5px; border:1px solid var(--scui-border-strong); border-radius:10px; background:var(--scui-bg-raised); box-shadow:0 12px 34px rgba(0,0,0,.2) }.scui-harness-popover-title { padding:5px 7px; color:var(--scui-muted); font-size:8.5px; font-weight:650; letter-spacing:.055em; text-transform:uppercase }.scui-harness-options { display:grid; gap:1px }.scui-harness-options > button { display:grid; grid-template-columns:auto minmax(0,1fr) 18px; width:100%; min-height:36px; align-items:center; gap:8px; padding:5px 7px; border:0; border-radius:7px; background:transparent; color:var(--scui-fg); text-align:left; cursor:pointer }.scui-harness-options > button:hover,.scui-harness-options > button:focus-visible { background:var(--scui-fill) }.scui-harness-options > button[aria-selected="true"] { background:color-mix(in srgb,var(--scui-accent) 8%,var(--scui-bg-raised)) }.scui-harness-options > button > strong { min-width:0; overflow:hidden; font-size:11px; font-weight:600; text-overflow:ellipsis; white-space:nowrap }.scui-harness-options > button > span { display:grid; color:var(--scui-accent); place-items:center }
+.scui-harness-manage { margin-top:4px; padding-top:4px; border-top:1px solid var(--scui-border) }.scui-harness-manage > summary { padding:6px 7px; color:var(--scui-muted); cursor:pointer; font-size:9.5px }.scui-harness-manage > div { display:grid; gap:1px }.scui-harness-manage section { display:grid; grid-template-columns:auto minmax(0,1fr) auto; min-height:36px; align-items:center; gap:8px; padding:5px 7px }.scui-harness-manage section > span { display:grid; min-width:0 }.scui-harness-manage section strong,.scui-harness-manage section small { overflow:hidden; text-overflow:ellipsis; white-space:nowrap }.scui-harness-manage section strong { font-size:10.5px; font-weight:600 }.scui-harness-manage section small { color:var(--scui-muted); font-size:8.5px }.scui-harness-manage section > button { padding:4px 6px; border:1px solid var(--scui-border); border-radius:6px; background:transparent; color:var(--scui-muted); cursor:pointer; font-size:8.5px }.scui-harness-manage section > button:hover { border-color:var(--scui-border-strong); color:var(--scui-fg) }
 .scui-readiness { margin:0 0 7px; border:1px solid var(--scui-border); border-radius:7px; background:var(--scui-bg) }.scui-readiness > summary { padding:6px 8px; color:var(--scui-muted); cursor:pointer; font-size:10px }.scui-readiness > div { display:grid; border-top:1px solid var(--scui-border) }.scui-readiness section { display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:7px; padding:7px 8px }.scui-readiness section + section { border-top:1px solid var(--scui-border) }.scui-readiness section > span { display:grid; min-width:0 }.scui-readiness section strong,.scui-readiness section small,.scui-readiness section em { overflow:hidden; text-overflow:ellipsis; white-space:nowrap }.scui-readiness section small { color:var(--scui-muted); font-size:9px }.scui-readiness section em { color:var(--scui-muted); font-size:8px; font-style:normal }.scui-readiness section button { padding:4px 6px; border:1px solid var(--scui-border); border-radius:6px; background:transparent; cursor:pointer; font-size:9px }
 .scui-launch-modes { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:5px; margin:0 0 7px; padding:0; border:0 }.scui-launch-modes legend { position:absolute; overflow:hidden; width:1px; height:1px; clip:rect(0 0 0 0); white-space:nowrap }.scui-launch-modes label { position:relative; min-width:0; cursor:pointer }.scui-launch-modes input { position:absolute; opacity:0; pointer-events:none }.scui-launch-modes label > span { display:flex; min-height:42px; flex-direction:column; justify-content:center; padding:6px 9px; border:1px solid var(--scui-border); border-radius:7px; background:var(--scui-bg); transition:border-color .14s ease,background .14s ease }.scui-launch-modes strong { font-size:11px; font-weight:650 }.scui-launch-modes small { overflow:hidden; color:var(--scui-muted); font-size:9px; text-overflow:ellipsis; white-space:nowrap }.scui-launch-modes input:checked + span { border-color:color-mix(in srgb,var(--scui-accent) 58%,var(--scui-border)); background:color-mix(in srgb,var(--scui-accent) 8%,var(--scui-bg)) }.scui-launch-modes input:focus-visible + span { outline:2px solid var(--scui-accent); outline-offset:1px }.scui-launch-modes:disabled label { cursor:default; opacity:.62 }
 .scui-new { display:grid; justify-items:center; gap:5px; margin:auto; padding:20px; color:var(--scui-muted); text-align:center }.scui-new > span { color:var(--scui-accent); font-size:28px }.scui-new strong { color:var(--scui-fg) }
@@ -215,6 +218,8 @@
   .scui-head { min-height:52px }
   .scui-menu-panel button,.scui-request-actions button,.scui-load { min-height:40px }
   .scui-send,.scui-stop { width:40px; height:40px }
+  .scui-new-envelope-controls .scui-attach,.scui-harness-trigger { min-height:40px }
+  .scui-harness-options > button,.scui-harness-manage section { min-height:44px }
   .scui-message-meta button,.scui-code-copy { min-width:36px; min-height:36px }
   .scui-latest { min-height:36px; padding-inline:12px }
 }