@volter-ai-dev/supercode-ui 0.1.40 → 0.1.42

package/README.md

@@ -60,14 +60,14 @@ import {
   SessionList,
 } from '@volter-ai-dev/supercode-ui/preact';
 import { HarnessLogo, harnessLogoDataUrl } from '@volter-ai-dev/supercode-ui/preact/logo';
-import { HarnessAdvisory, HarnessSettingsPanel } from '@volter-ai-dev/supercode-ui/preact/settings';
+import { HarnessAdvisory, HarnessPicker, HarnessSettingsPanel } from '@volter-ai-dev/supercode-ui/preact/settings';
 import { groupConversation } from '@volter-ai-dev/supercode-ui/core';
 ```
 
 The public components are `SupercodeMessenger`, `AgentActivityLauncher`, `Conversation`, `TranscriptEntry`,
 `ActivityGroup`, `RequestCard`, `SessionList`, `SessionRow`, `Composer`, `ContinuationBar`,
-`ContextCandidate`, `ContextCandidates`, `LoadingStatus`, `TaskPlan`, `SessionDetails`, `HarnessLogo`, `HarnessAdvisory`, and
-`HarnessSettingsPanel`. Pure state readers, selectors,
+`ContextCandidate`, `ContextCandidates`, `LoadingStatus`, `TaskPlan`, `SessionDetails`, `HarnessLogo`, `HarnessAdvisory`,
+`HarnessPicker`, and `HarnessSettingsPanel`. Pure state readers, selectors,
 formatters, and intent constructors live at `supercode-ui/core` and have no DOM or Preact imports.
 For genuine partial delivery, the `preact/logo`, `preact/icon`, `preact/conversation`, `preact/sessions`,
 `preact/composer`, `preact/settings`, and `preact/messenger` subpaths are independently tree-shaken artifacts; taking

package/components.d.ts

@@ -8,6 +8,7 @@ export {
   ContinuationBar,
   Conversation,
   HarnessLogo,
+  HarnessPicker,
   HarnessReadiness,
   ImageViewer,
   LoadingStatus,

package/components.mjs

@@ -2459,14 +2459,9 @@ function HarnessSettingsPanel({ state, adapter, onClose, recommendedChange = nul
 }
 function HarnessReadiness({ harnesses, adapter }) {
   const blocked = harnesses.filter((item) => !item.startable);
-  if (!blocked.length) return null;
-  return /* @__PURE__ */ jsxs8("details", { className: "scui-readiness", open: !harnesses.some((item) => item.startable), children: [
-    /* @__PURE__ */ jsxs8("summary", { children: [
-      blocked.length,
-      " ",
-      blocked.length === 1 ? "harness needs" : "harnesses need",
-      " setup"
-    ] }),
+  if (!blocked.length || harnesses.some((item) => item.startable)) return null;
+  return /* @__PURE__ */ jsxs8("details", { className: "scui-readiness", open: true, children: [
+    /* @__PURE__ */ jsx9("summary", { children: "No coding harness is ready" }),
     /* @__PURE__ */ jsx9("div", { children: blocked.map((item) => /* @__PURE__ */ jsxs8("section", { children: [
       /* @__PURE__ */ jsx9(HarnessLogo, { id: item.id, size: 25 }),
       /* @__PURE__ */ jsxs8("span", { children: [
@@ -2482,6 +2477,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 "preact/jsx-runtime";
@@ -2775,6 +2843,7 @@ function NewChat({ state, adapter, onBack, onClose, onStarted, labels, memoryKey
   const startSequence = useRef7(0);
   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];
@@ -2912,18 +2981,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" }),
@@ -2952,7 +3009,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);
@@ -2962,7 +3019,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);
@@ -2973,7 +3029,14 @@ 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 }) }) })
+        ] })
       ] })
     ] })
   ] });
@@ -3083,6 +3146,7 @@ export {
   Conversation,
   HarnessAdvisory,
   HarnessLogo,
+  HarnessPicker,
   HarnessReadiness,
   HarnessSettingsPanel,
   ImageViewer,

package/embed.mjs

@@ -2379,14 +2379,9 @@ function HarnessSettingsPanel({ state, adapter, onClose, recommendedChange = nul
 }
 function HarnessReadiness({ harnesses, adapter }) {
   const blocked = harnesses.filter((item) => !item.startable);
-  if (!blocked.length) return null;
-  return /* @__PURE__ */ jsxs7("details", { className: "scui-readiness", open: !harnesses.some((item) => item.startable), children: [
-    /* @__PURE__ */ jsxs7("summary", { children: [
-      blocked.length,
-      " ",
-      blocked.length === 1 ? "harness needs" : "harnesses need",
-      " setup"
-    ] }),
+  if (!blocked.length || harnesses.some((item) => item.startable)) return null;
+  return /* @__PURE__ */ jsxs7("details", { className: "scui-readiness", open: true, children: [
+    /* @__PURE__ */ jsx8("summary", { children: "No coding harness is ready" }),
     /* @__PURE__ */ jsx8("div", { children: blocked.map((item) => /* @__PURE__ */ jsxs7("section", { children: [
       /* @__PURE__ */ jsx8(HarnessLogo, { id: item.id, size: 25 }),
       /* @__PURE__ */ jsxs7("span", { children: [
@@ -2402,6 +2397,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 "preact/jsx-runtime";
@@ -2695,6 +2763,7 @@ function NewChat({ state, adapter, onBack, onClose, onStarted, labels, memoryKey
   const startSequence = useRef7(0);
   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];
@@ -2832,18 +2901,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" }),
@@ -2872,7 +2929,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);
@@ -2882,7 +2939,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);
@@ -2893,7 +2949,14 @@ 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 }) }) })
+        ] })
       ] })
     ] })
   ] });

package/index.d.ts

@@ -433,6 +433,15 @@ export interface HarnessSettingsPanelProps {
   onClose(): void;
 }
 
+export interface HarnessPickerProps {
+  harnesses: HarnessOption[];
+  value: HarnessId;
+  disabled?: boolean;
+  adapter?: Pick<UiAdapter, 'copyText'>;
+  onChange(harness: HarnessId): void;
+  logo?: ComponentType<{ id: HarnessId; activity?: SessionActivity; size?: number }>;
+}
+
 export interface MessengerComponents {
   SessionRow?: ComponentType<SessionRowProps>;
   TranscriptEntry?: ComponentType<TranscriptEntryProps>;
@@ -441,6 +450,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 }>;
 }
@@ -532,6 +542,7 @@ 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 HarnessPicker(props: HarnessPickerProps): 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;

package/messenger.mjs

@@ -2376,14 +2376,9 @@ function HarnessSettingsPanel({ state, adapter, onClose, recommendedChange = nul
 }
 function HarnessReadiness({ harnesses, adapter }) {
   const blocked = harnesses.filter((item) => !item.startable);
-  if (!blocked.length) return null;
-  return /* @__PURE__ */ jsxs7("details", { className: "scui-readiness", open: !harnesses.some((item) => item.startable), children: [
-    /* @__PURE__ */ jsxs7("summary", { children: [
-      blocked.length,
-      " ",
-      blocked.length === 1 ? "harness needs" : "harnesses need",
-      " setup"
-    ] }),
+  if (!blocked.length || harnesses.some((item) => item.startable)) return null;
+  return /* @__PURE__ */ jsxs7("details", { className: "scui-readiness", open: true, children: [
+    /* @__PURE__ */ jsx8("summary", { children: "No coding harness is ready" }),
     /* @__PURE__ */ jsx8("div", { children: blocked.map((item) => /* @__PURE__ */ jsxs7("section", { children: [
       /* @__PURE__ */ jsx8(HarnessLogo, { id: item.id, size: 25 }),
       /* @__PURE__ */ jsxs7("span", { children: [
@@ -2399,6 +2394,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 "preact/jsx-runtime";
@@ -2692,6 +2760,7 @@ function NewChat({ state, adapter, onBack, onClose, onStarted, labels, memoryKey
   const startSequence = useRef7(0);
   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];
@@ -2829,18 +2898,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" }),
@@ -2869,7 +2926,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);
@@ -2879,7 +2936,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);
@@ -2890,7 +2946,14 @@ 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 }) }) })
+        ] })
       ] })
     ] })
   ] });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@volter-ai-dev/supercode-ui",
-  "version": "0.1.40",
+  "version": "0.1.42",
   "type": "module",
   "description": "Composable default UI kit for Supercode-powered coding-agent experiences",
   "exports": {

package/react/components.mjs

@@ -2459,14 +2459,9 @@ function HarnessSettingsPanel({ state, adapter, onClose, recommendedChange = nul
 }
 function HarnessReadiness({ harnesses, adapter }) {
   const blocked = harnesses.filter((item) => !item.startable);
-  if (!blocked.length) return null;
-  return /* @__PURE__ */ jsxs8("details", { className: "scui-readiness", open: !harnesses.some((item) => item.startable), children: [
-    /* @__PURE__ */ jsxs8("summary", { children: [
-      blocked.length,
-      " ",
-      blocked.length === 1 ? "harness needs" : "harnesses need",
-      " setup"
-    ] }),
+  if (!blocked.length || harnesses.some((item) => item.startable)) return null;
+  return /* @__PURE__ */ jsxs8("details", { className: "scui-readiness", open: true, children: [
+    /* @__PURE__ */ jsx9("summary", { children: "No coding harness is ready" }),
     /* @__PURE__ */ jsx9("div", { children: blocked.map((item) => /* @__PURE__ */ jsxs8("section", { children: [
       /* @__PURE__ */ jsx9(HarnessLogo, { id: item.id, size: 25 }),
       /* @__PURE__ */ jsxs8("span", { children: [
@@ -2482,6 +2477,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";
@@ -2775,6 +2843,7 @@ function NewChat({ state, adapter, onBack, onClose, onStarted, labels, memoryKey
   const startSequence = useRef7(0);
   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];
@@ -2912,18 +2981,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" }),
@@ -2952,7 +3009,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);
@@ -2962,7 +3019,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);
@@ -2973,7 +3029,14 @@ 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 }) }) })
+        ] })
       ] })
     ] })
   ] });
@@ -3083,6 +3146,7 @@ export {
   Conversation,
   HarnessAdvisory,
   HarnessLogo,
+  HarnessPicker,
   HarnessReadiness,
   HarnessSettingsPanel,
   ImageViewer,

package/react/index.d.ts

@@ -7,6 +7,7 @@ import type {
   ContextCandidateProps,
   HarnessAdvisoryProps,
   HarnessId,
+  HarnessPickerProps,
   HarnessSettingsPanelProps,
   HarnessOption,
   MessengerLabels,
@@ -36,6 +37,7 @@ export type {
   ContextCandidateProps,
   HarnessAdvisoryProps,
   HarnessId,
+  HarnessPickerProps,
   HarnessSettingsPanelProps,
   HarnessOption,
   MessengerLabels,
@@ -66,6 +68,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 }>;
 }
@@ -112,6 +115,7 @@ 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;

package/react/messenger.mjs

@@ -2376,14 +2376,9 @@ function HarnessSettingsPanel({ state, adapter, onClose, recommendedChange = nul
 }
 function HarnessReadiness({ harnesses, adapter }) {
   const blocked = harnesses.filter((item) => !item.startable);
-  if (!blocked.length) return null;
-  return /* @__PURE__ */ jsxs7("details", { className: "scui-readiness", open: !harnesses.some((item) => item.startable), children: [
-    /* @__PURE__ */ jsxs7("summary", { children: [
-      blocked.length,
-      " ",
-      blocked.length === 1 ? "harness needs" : "harnesses need",
-      " setup"
-    ] }),
+  if (!blocked.length || harnesses.some((item) => item.startable)) return null;
+  return /* @__PURE__ */ jsxs7("details", { className: "scui-readiness", open: true, children: [
+    /* @__PURE__ */ jsx8("summary", { children: "No coding harness is ready" }),
     /* @__PURE__ */ jsx8("div", { children: blocked.map((item) => /* @__PURE__ */ jsxs7("section", { children: [
       /* @__PURE__ */ jsx8(HarnessLogo, { id: item.id, size: 25 }),
       /* @__PURE__ */ jsxs7("span", { children: [
@@ -2399,6 +2394,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";
@@ -2692,6 +2760,7 @@ function NewChat({ state, adapter, onBack, onClose, onStarted, labels, memoryKey
   const startSequence = useRef7(0);
   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];
@@ -2829,18 +2898,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" }),
@@ -2869,7 +2926,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);
@@ -2879,7 +2936,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);
@@ -2890,7 +2946,14 @@ 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 }) }) })
+        ] })
       ] })
     ] })
   ] });

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

@@ -289,14 +289,9 @@ function HarnessSettingsPanel({ state, adapter, onClose, recommendedChange = nul
 }
 function HarnessReadiness({ harnesses, adapter }) {
   const blocked = harnesses.filter((item) => !item.startable);
-  if (!blocked.length) return null;
-  return /* @__PURE__ */ jsxs3("details", { className: "scui-readiness", open: !harnesses.some((item) => item.startable), children: [
-    /* @__PURE__ */ jsxs3("summary", { children: [
-      blocked.length,
-      " ",
-      blocked.length === 1 ? "harness needs" : "harnesses need",
-      " setup"
-    ] }),
+  if (!blocked.length || harnesses.some((item) => item.startable)) return null;
+  return /* @__PURE__ */ jsxs3("details", { className: "scui-readiness", open: true, children: [
+    /* @__PURE__ */ jsx3("summary", { children: "No coding harness is ready" }),
     /* @__PURE__ */ jsx3("div", { children: blocked.map((item) => /* @__PURE__ */ jsxs3("section", { children: [
       /* @__PURE__ */ jsx3(HarnessLogo, { id: item.id, size: 25 }),
       /* @__PURE__ */ jsxs3("span", { children: [
@@ -312,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

@@ -289,14 +289,9 @@ function HarnessSettingsPanel({ state, adapter, onClose, recommendedChange = nul
 }
 function HarnessReadiness({ harnesses, adapter }) {
   const blocked = harnesses.filter((item) => !item.startable);
-  if (!blocked.length) return null;
-  return /* @__PURE__ */ jsxs3("details", { className: "scui-readiness", open: !harnesses.some((item) => item.startable), children: [
-    /* @__PURE__ */ jsxs3("summary", { children: [
-      blocked.length,
-      " ",
-      blocked.length === 1 ? "harness needs" : "harnesses need",
-      " setup"
-    ] }),
+  if (!blocked.length || harnesses.some((item) => item.startable)) return null;
+  return /* @__PURE__ */ jsxs3("details", { className: "scui-readiness", open: true, children: [
+    /* @__PURE__ */ jsx3("summary", { children: "No coding harness is ready" }),
     /* @__PURE__ */ jsx3("div", { children: blocked.map((item) => /* @__PURE__ */ jsxs3("section", { children: [
       /* @__PURE__ */ jsx3(HarnessLogo, { id: item.id, size: 25 }),
       /* @__PURE__ */ jsxs3("span", { children: [
@@ -312,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 }
 }