@tangle-network/sandbox-ui 0.90.3 → 0.91.1

package/dist/chat.js

@@ -19,13 +19,13 @@ import {
   snapHarnessToModel,
   snapModelToHarness,
   validateComposerFiles
-} from "./chunk-UU77AFEU.js";
+} from "./chunk-QMY3XVH3.js";
 import "./chunk-TK46XFLM.js";
 import {
   MENTION_PILL_CLASS
 } from "./chunk-WGOOQAW3.js";
-import "./chunk-NF3Q4RJU.js";
-import "./chunk-LAZZBSN4.js";
+import "./chunk-WSN2RZC6.js";
+import "./chunk-FWSBQLFG.js";
 import "./chunk-5XRAKVIV.js";
 import "./chunk-EI44GEQ5.js";
 import "./chunk-CZ7CSFO4.js";

package/dist/{chunk-LAZZBSN4.js → chunk-FWSBQLFG.js}

@@ -11,10 +11,102 @@ import {
 } from "./chunk-EI44GEQ5.js";
 
 // src/dashboard/model-picker.tsx
-import * as React from "react";
-import { ChevronDown, Search, Sparkles, Loader2 } from "lucide-react";
+import * as React2 from "react";
+import { ChevronDown, Sparkles } from "lucide-react";
 import * as Popover from "@radix-ui/react-dropdown-menu";
+
+// src/lib/picker-menu.tsx
+import * as React from "react";
+import { Loader2, Search } from "lucide-react";
 import { jsx, jsxs } from "react/jsx-runtime";
+var pickerMenuContentClass = cn(
+  "z-50 w-[var(--radix-dropdown-menu-trigger-width)] min-w-[320px] max-w-[460px]",
+  "max-h-[min(440px,var(--radix-dropdown-menu-content-available-height))] overflow-hidden flex flex-col",
+  "rounded-[var(--radius-md)] border border-[var(--md3-outline-variant)] bg-surface-container-highest shadow-[0_8px_30px_rgba(0,0,0,0.45)] ring-1 ring-[#ffffff14]",
+  "data-[state=open]:animate-in data-[state=closed]:animate-out",
+  "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+  "data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95"
+);
+var pickerMenuBodyClass = "flex-1 overflow-y-auto";
+function pickerMenuItemClass({
+  active,
+  featured
+} = {}) {
+  return cn(
+    "flex cursor-pointer items-start gap-2 rounded-md px-3 py-2 outline-none",
+    "transition-colors duration-[var(--transition-fast)]",
+    "hover:bg-accent/50 focus:bg-accent/50",
+    featured && "mx-1 border border-primary/10 bg-primary/[0.04] px-2.5",
+    active && "bg-primary/10 font-medium text-foreground ring-1 ring-inset ring-primary/25 hover:bg-primary/15 focus:bg-primary/15"
+  );
+}
+function PickerMenuSearch({
+  value,
+  onChange,
+  placeholder,
+  loading,
+  inputRef
+}) {
+  return /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 border-b border-[var(--md3-outline-variant)] bg-surface-container-high px-3 py-2", children: [
+    /* @__PURE__ */ jsx(Search, { className: "h-3.5 w-3.5 shrink-0 text-muted-foreground" }),
+    /* @__PURE__ */ jsx(
+      "input",
+      {
+        ref: inputRef,
+        type: "text",
+        value,
+        onChange: (e) => onChange(e.target.value),
+        onKeyDown: (e) => {
+          if (e.key.length === 1) e.stopPropagation();
+        },
+        placeholder,
+        autoFocus: true,
+        className: "flex-1 bg-transparent text-sm font-medium outline-none placeholder:font-normal placeholder:text-muted-foreground"
+      }
+    ),
+    loading && /* @__PURE__ */ jsx(Loader2, { className: "h-3.5 w-3.5 animate-spin text-muted-foreground" })
+  ] });
+}
+function PickerMenuSection({
+  label,
+  glyph,
+  tone,
+  children
+}) {
+  return /* @__PURE__ */ jsxs("div", { className: "py-1", children: [
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: cn(
+          "flex items-center gap-1.5 px-3 pt-1.5 pb-0.5 text-[10px] font-mono uppercase tracking-widest",
+          tone === "featured" ? "text-primary" : "text-muted-foreground"
+        ),
+        children: [
+          glyph,
+          /* @__PURE__ */ jsx("span", { children: label })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx("div", { children })
+  ] });
+}
+function PickerMenuFooter({ children }) {
+  return /* @__PURE__ */ jsx("div", { className: "border-t border-[var(--md3-outline-variant)] px-3 py-1.5 text-[10px] text-muted-foreground", children });
+}
+function PickerMenuMeta({ parts }) {
+  const shown = parts.filter(Boolean);
+  if (shown.length === 0) return null;
+  return /* @__PURE__ */ jsx("div", { className: "mt-0.5 flex items-center gap-1.5 text-[11px] text-muted-foreground", children: shown.map((part, i) => /* @__PURE__ */ jsxs(React.Fragment, { children: [
+    i > 0 && /* @__PURE__ */ jsx("span", { className: "shrink-0 opacity-40", children: "\xB7" }),
+    /* @__PURE__ */ jsx("span", { className: i === 0 ? "min-w-0 truncate" : "shrink-0", children: part })
+  ] }, i)) });
+}
+function PickerMenuTag({ children }) {
+  return /* @__PURE__ */ jsx("span", { className: "shrink-0 rounded-full border border-[var(--md3-outline-variant)] bg-surface-container px-1.5 py-px text-[9px] font-medium text-muted-foreground", children });
+}
+
+// src/dashboard/model-picker.tsx
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
 function modelDedupKey(model) {
   const canonical = canonicalModelId(model).toLowerCase();
   const segments = canonical.split("/").filter(Boolean);
@@ -122,10 +214,10 @@ function ModelPicker({
   side,
   avoidCollisions
 }) {
-  const [query, setQuery] = React.useState("");
-  const [open, setOpen] = React.useState(false);
-  const searchInputRef = React.useRef(null);
-  React.useLayoutEffect(() => {
+  const [query, setQuery] = React2.useState("");
+  const [open, setOpen] = React2.useState(false);
+  const searchInputRef = React2.useRef(null);
+  React2.useLayoutEffect(() => {
     if (!open) return;
     const frame = requestAnimationFrame(() => {
       searchInputRef.current?.focus();
@@ -133,8 +225,8 @@ function ModelPicker({
     });
     return () => cancelAnimationFrame(frame);
   }, [open]);
-  const deduped = React.useMemo(() => dedupeModels(models), [models]);
-  const filtered = React.useMemo(() => {
+  const deduped = React2.useMemo(() => dedupeModels(models), [models]);
+  const filtered = React2.useMemo(() => {
     const excluded = new Set((excludeProviders ?? []).map((p) => p.toLowerCase()));
     const allowedModalities = modalities ? new Set(modalities) : null;
     const q = query.trim().toLowerCase();
@@ -149,7 +241,7 @@ function ModelPicker({
       return id.includes(q) || name.includes(q) || provider.includes(q) || identity.host.label.toLowerCase().includes(q) || identity.lab.label.toLowerCase().includes(q);
     });
   }, [deduped, query, modalities, excludeProviders]);
-  const grouped = React.useMemo(() => {
+  const grouped = React2.useMemo(() => {
     const groups = /* @__PURE__ */ new Map();
     for (const m of filtered) {
       const key = modelGroupKey(m);
@@ -159,7 +251,7 @@ function ModelPicker({
     }
     return Array.from(groups.entries()).map(([key, list]) => [key, [...list].sort(compareModelsByDisplayName)]).sort(([a], [b]) => compareModelGroups(a, b));
   }, [filtered]);
-  const current = React.useMemo(
+  const current = React2.useMemo(
     () => models.find((m) => canonicalModelId(m) === value),
     [models, value]
   );
@@ -168,17 +260,17 @@ function ModelPicker({
     current?.name ?? current?.id ?? value,
     currentIdentity
   );
-  const recentIds = React.useMemo(() => {
+  const recentIds = React2.useMemo(() => {
     if (!recents?.length) return [];
     const lookup = new Map(models.map((m) => [canonicalModelId(m), m]));
     return recents.map((id) => lookup.get(id)).filter((m) => Boolean(m)).slice(0, 4);
   }, [recents, models]);
-  const popularModels = React.useMemo(() => {
+  const popularModels = React2.useMemo(() => {
     if (!popular?.length) return [];
     const lookup = new Map(models.map((m) => [canonicalModelId(m), m]));
     return popular.map((id) => lookup.get(id)).filter((m) => Boolean(m));
   }, [popular, models]);
-  const featuredModels = React.useMemo(() => {
+  const featuredModels = React2.useMemo(() => {
     const flagged = deduped.filter((m) => m.featured);
     if (flagged.length > 0) return flagged;
     const seedKeys = new Set(
@@ -196,7 +288,7 @@ function ModelPicker({
     setQuery("");
   };
   const triggerLabel = label ? `${label}: ${currentLabel || placeholder}` : currentLabel || placeholder;
-  const trigger = variant === "pill" ? /* @__PURE__ */ jsxs(
+  const trigger = variant === "pill" ? /* @__PURE__ */ jsxs2(
     "button",
     {
       type: "button",
@@ -214,12 +306,12 @@ function ModelPicker({
         triggerClassName
       ),
       children: [
-        currentIdentity ? /* @__PURE__ */ jsx(ModelBrandStack, { identity: currentIdentity, size: "sm" }) : /* @__PURE__ */ jsx(Sparkles, { className: "h-3 w-3 text-muted-foreground" }),
-        /* @__PURE__ */ jsx("span", { className: "truncate max-w-[160px]", children: currentLabel || placeholder }),
-        /* @__PURE__ */ jsx(ChevronDown, { className: "ml-auto h-3 w-3 shrink-0 text-muted-foreground transition-transform data-[state=open]:rotate-180" })
+        currentIdentity ? /* @__PURE__ */ jsx2(ModelBrandStack, { identity: currentIdentity, size: "sm" }) : /* @__PURE__ */ jsx2(Sparkles, { className: "h-3 w-3 text-muted-foreground" }),
+        /* @__PURE__ */ jsx2("span", { className: "truncate max-w-[160px]", children: currentLabel || placeholder }),
+        /* @__PURE__ */ jsx2(ChevronDown, { className: "ml-auto h-3 w-3 shrink-0 text-muted-foreground transition-transform data-[state=open]:rotate-180" })
       ]
     }
-  ) : /* @__PURE__ */ jsxs(
+  ) : /* @__PURE__ */ jsxs2(
     "button",
     {
       type: "button",
@@ -237,19 +329,19 @@ function ModelPicker({
         triggerClassName
       ),
       children: [
-        /* @__PURE__ */ jsxs("span", { className: "flex min-w-0 items-center gap-2", children: [
-          currentIdentity && /* @__PURE__ */ jsx(ModelBrandStack, { identity: currentIdentity, size: "sm" }),
-          /* @__PURE__ */ jsx("span", { className: cn("truncate", current ? "text-foreground font-medium" : "text-muted-foreground"), children: currentLabel || placeholder })
+        /* @__PURE__ */ jsxs2("span", { className: "flex min-w-0 items-center gap-2", children: [
+          currentIdentity && /* @__PURE__ */ jsx2(ModelBrandStack, { identity: currentIdentity, size: "sm" }),
+          /* @__PURE__ */ jsx2("span", { className: cn("truncate", current ? "text-foreground font-medium" : "text-muted-foreground"), children: currentLabel || placeholder })
         ] }),
-        /* @__PURE__ */ jsx(ChevronDown, { className: "h-4 w-4 shrink-0 text-muted-foreground transition-transform data-[state=open]:rotate-180" })
+        /* @__PURE__ */ jsx2(ChevronDown, { className: "h-4 w-4 shrink-0 text-muted-foreground transition-transform data-[state=open]:rotate-180" })
       ]
     }
   );
-  return /* @__PURE__ */ jsxs("div", { className: cn(variant === "field" ? "space-y-1.5" : "inline-flex", variant === "field" ? className : void 0), children: [
-    variant === "field" && label && /* @__PURE__ */ jsx("label", { className: "block text-xs font-medium text-muted-foreground uppercase tracking-[0.06em]", children: label }),
-    /* @__PURE__ */ jsxs(Popover.Root, { open, onOpenChange: setOpen, modal: false, children: [
-      /* @__PURE__ */ jsx(Popover.Trigger, { asChild: true, children: trigger }),
-      /* @__PURE__ */ jsx(Popover.Portal, { children: /* @__PURE__ */ jsxs(
+  return /* @__PURE__ */ jsxs2("div", { className: cn(variant === "field" ? "space-y-1.5" : "inline-flex", variant === "field" ? className : void 0), children: [
+    variant === "field" && label && /* @__PURE__ */ jsx2("label", { className: "block text-xs font-medium text-muted-foreground uppercase tracking-[0.06em]", children: label }),
+    /* @__PURE__ */ jsxs2(Popover.Root, { open, onOpenChange: setOpen, modal: false, children: [
+      /* @__PURE__ */ jsx2(Popover.Trigger, { asChild: true, children: trigger }),
+      /* @__PURE__ */ jsx2(Popover.Portal, { children: /* @__PURE__ */ jsxs2(
         Popover.Content,
         {
           side,
@@ -257,38 +349,20 @@ function ModelPicker({
           align: variant === "pill" ? "start" : "start",
           avoidCollisions,
           collisionPadding: 24,
-          className: cn(
-            "z-50 w-[var(--radix-dropdown-menu-trigger-width)] min-w-[320px] max-w-[460px]",
-            // Cap to the smaller of the fixed height and the viewport space on
-            // the open side, so a list pinned downward never runs off-screen.
-            "max-h-[min(440px,var(--radix-dropdown-menu-content-available-height))] overflow-hidden flex flex-col",
-            "rounded-[var(--radius-md)] border border-[var(--md3-outline-variant)] bg-surface-container-highest shadow-[0_8px_30px_rgba(0,0,0,0.45)] ring-1 ring-[#ffffff14]",
-            "data-[state=open]:animate-in data-[state=closed]:animate-out",
-            "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
-            "data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95"
-          ),
+          className: pickerMenuContentClass,
           children: [
-            /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 border-b border-[var(--md3-outline-variant)] bg-surface-container-high px-3 py-2", children: [
-              /* @__PURE__ */ jsx(Search, { className: "h-3.5 w-3.5 shrink-0 text-muted-foreground" }),
-              /* @__PURE__ */ jsx(
-                "input",
-                {
-                  ref: searchInputRef,
-                  type: "text",
-                  value: query,
-                  onChange: (e) => setQuery(e.target.value),
-                  onKeyDown: (e) => {
-                    if (e.key.length === 1) e.stopPropagation();
-                  },
-                  placeholder: "Search models...",
-                  autoFocus: true,
-                  className: "flex-1 bg-transparent text-sm font-medium outline-none placeholder:font-normal placeholder:text-muted-foreground"
-                }
-              ),
-              loading && /* @__PURE__ */ jsx(Loader2, { className: "h-3.5 w-3.5 animate-spin text-muted-foreground" })
-            ] }),
-            /* @__PURE__ */ jsxs("div", { className: "flex-1 overflow-y-auto", children: [
-              !query && featuredModels.length > 0 && /* @__PURE__ */ jsx(Section, { label: "Recommended", tone: "featured", children: featuredModels.map((m) => /* @__PURE__ */ jsx(
+            /* @__PURE__ */ jsx2(
+              PickerMenuSearch,
+              {
+                value: query,
+                onChange: setQuery,
+                placeholder: "Search models...",
+                loading,
+                inputRef: searchInputRef
+              }
+            ),
+            /* @__PURE__ */ jsxs2("div", { className: pickerMenuBodyClass, children: [
+              !query && featuredModels.length > 0 && /* @__PURE__ */ jsx2(Section, { label: "Recommended", tone: "featured", children: featuredModels.map((m) => /* @__PURE__ */ jsx2(
                 ModelRow,
                 {
                   model: m,
@@ -298,7 +372,7 @@ function ModelPicker({
                 },
                 `featured-${canonicalModelId(m)}`
               )) }),
-              !query && popularModels.length > 0 && /* @__PURE__ */ jsx(Section, { label: "Top models", tone: "featured", children: popularModels.map((m) => /* @__PURE__ */ jsx(
+              !query && popularModels.length > 0 && /* @__PURE__ */ jsx2(Section, { label: "Top models", tone: "featured", children: popularModels.map((m) => /* @__PURE__ */ jsx2(
                 ModelRow,
                 {
                   model: m,
@@ -308,7 +382,7 @@ function ModelPicker({
                 },
                 `popular-${canonicalModelId(m)}`
               )) }),
-              !query && recentIds.length > 0 && /* @__PURE__ */ jsx(Section, { label: "Recent", children: recentIds.map((m) => /* @__PURE__ */ jsx(
+              !query && recentIds.length > 0 && /* @__PURE__ */ jsx2(Section, { label: "Recent", children: recentIds.map((m) => /* @__PURE__ */ jsx2(
                 ModelRow,
                 {
                   model: m,
@@ -317,7 +391,7 @@ function ModelPicker({
                 },
                 `recent-${canonicalModelId(m)}`
               )) }),
-              grouped.length === 0 ? /* @__PURE__ */ jsx("div", { className: "px-3 py-8 text-center text-xs text-muted-foreground", children: loading ? "Loading models..." : query ? "No models match." : "No models available." }) : grouped.map(([groupKey, list]) => /* @__PURE__ */ jsx(Section, { label: modelGroupLabel(groupKey), children: list.map((m) => /* @__PURE__ */ jsx(
+              grouped.length === 0 ? /* @__PURE__ */ jsx2("div", { className: "px-3 py-8 text-center text-xs text-muted-foreground", children: loading ? "Loading models..." : query ? "No models match." : "No models available." }) : grouped.map(([groupKey, list]) => /* @__PURE__ */ jsx2(Section, { label: modelGroupLabel(groupKey), children: list.map((m) => /* @__PURE__ */ jsx2(
                 ModelRow,
                 {
                   model: m,
@@ -327,7 +401,7 @@ function ModelPicker({
                 canonicalModelId(m)
               )) }, groupKey))
             ] }),
-            /* @__PURE__ */ jsxs("div", { className: "border-t border-[var(--md3-outline-variant)] px-3 py-1.5 text-[10px] text-muted-foreground", children: [
+            /* @__PURE__ */ jsxs2(PickerMenuFooter, { children: [
               filtered.length,
               " of ",
               deduped.length,
@@ -342,22 +416,15 @@ function ModelPicker({
 }
 function Section({ label, children, tone }) {
   const identity = brandInfo(normalizeBrandKey(label));
-  return /* @__PURE__ */ jsxs("div", { className: "py-1", children: [
-    /* @__PURE__ */ jsxs(
-      "div",
-      {
-        className: cn(
-          "flex items-center gap-1.5 px-3 pt-1.5 pb-0.5 text-[10px] font-mono uppercase tracking-widest",
-          tone === "featured" ? "text-primary" : "text-muted-foreground"
-        ),
-        children: [
-          identity.key !== "unknown" && /* @__PURE__ */ jsx(BrandLogo, { brand: identity, size: "xs" }),
-          /* @__PURE__ */ jsx("span", { children: label })
-        ]
-      }
-    ),
-    /* @__PURE__ */ jsx("div", { children })
-  ] });
+  return /* @__PURE__ */ jsx2(
+    PickerMenuSection,
+    {
+      label,
+      tone,
+      glyph: identity.key !== "unknown" ? /* @__PURE__ */ jsx2(BrandLogo, { brand: identity, size: "xs" }) : void 0,
+      children
+    }
+  );
 }
 function PickerItem({
   onSelect,
@@ -365,20 +432,14 @@ function PickerItem({
   featured,
   children
 }) {
-  return /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx2(
     Popover.Item,
     {
       onSelect: (e) => {
         e.preventDefault();
         onSelect();
       },
-      className: cn(
-        "flex cursor-pointer items-start gap-2 rounded-md px-3 py-2 outline-none",
-        "transition-colors duration-[var(--transition-fast)]",
-        "hover:bg-accent/50 focus:bg-accent/50",
-        featured && "mx-1 border border-primary/10 bg-primary/[0.04] px-2.5",
-        active && "bg-primary/10 font-medium text-foreground ring-1 ring-inset ring-primary/25 hover:bg-primary/15 focus:bg-primary/15"
-      ),
+      className: pickerMenuItemClass({ active, featured }),
       children
     }
   );
@@ -394,26 +455,35 @@ function ModelRow({
   const ctx = formatContext(model.context_length);
   const identity = resolveModelBrandIdentity(model);
   const via = !identity.combined ? identity.host.label : null;
-  return /* @__PURE__ */ jsxs(PickerItem, { onSelect: () => onSelect(id), active, featured, children: [
-    /* @__PURE__ */ jsx(ModelBrandStack, { identity, size: "md" }),
-    /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
-      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5", children: [
-        /* @__PURE__ */ jsx("span", { className: "min-w-0 truncate text-sm font-medium", children: model.name ?? model.id }),
-        via && /* @__PURE__ */ jsxs("span", { className: "shrink-0 rounded-full border border-[var(--md3-outline-variant)] bg-surface-container px-1.5 py-px text-[9px] font-medium text-muted-foreground", children: [
+  return /* @__PURE__ */ jsxs2(PickerItem, { onSelect: () => onSelect(id), active, featured, children: [
+    /* @__PURE__ */ jsx2(ModelBrandStack, { identity, size: "md" }),
+    /* @__PURE__ */ jsxs2("div", { className: "min-w-0 flex-1", children: [
+      /* @__PURE__ */ jsxs2("div", { className: "flex items-center gap-1.5", children: [
+        /* @__PURE__ */ jsx2("span", { className: "min-w-0 truncate text-sm font-medium", children: model.name ?? model.id }),
+        via && /* @__PURE__ */ jsxs2(PickerMenuTag, { children: [
           "via ",
           via
         ] })
       ] }),
-      (ctx || pricing) && /* @__PURE__ */ jsxs("div", { className: "mt-0.5 flex items-center gap-1.5 text-[11px] text-muted-foreground", children: [
-        ctx && /* @__PURE__ */ jsx("span", { className: "shrink-0", children: ctx }),
-        ctx && pricing && /* @__PURE__ */ jsx("span", { className: "shrink-0 opacity-40", children: "\xB7" }),
-        pricing && /* @__PURE__ */ jsx("span", { className: "shrink-0 font-mono", children: pricing })
-      ] })
+      /* @__PURE__ */ jsx2(
+        PickerMenuMeta,
+        {
+          parts: [ctx, pricing ? /* @__PURE__ */ jsx2("span", { className: "font-mono", children: pricing }) : null]
+        }
+      )
     ] })
   ] });
 }
 
 export {
+  pickerMenuContentClass,
+  pickerMenuBodyClass,
+  pickerMenuItemClass,
+  PickerMenuSearch,
+  PickerMenuSection,
+  PickerMenuFooter,
+  PickerMenuMeta,
+  PickerMenuTag,
   modelDedupKey,
   dedupeModels,
   DEFAULT_FEATURED_MODEL_IDS,

package/dist/{chunk-UU77AFEU.js → chunk-QMY3XVH3.js}

@@ -5,11 +5,19 @@ import {
   HARNESS_OPTIONS,
   HarnessLogo,
   chatCapableHarnesses
-} from "./chunk-NF3Q4RJU.js";
+} from "./chunk-WSN2RZC6.js";
 import {
   ModelPicker,
+  PickerMenuFooter,
+  PickerMenuMeta,
+  PickerMenuSearch,
+  PickerMenuSection,
+  PickerMenuTag,
+  pickerMenuBodyClass,
+  pickerMenuContentClass,
+  pickerMenuItemClass,
   stripBrandPrefix
-} from "./chunk-LAZZBSN4.js";
+} from "./chunk-FWSBQLFG.js";
 import {
   ModelBrandStack,
   canonicalModelId,
@@ -488,14 +496,29 @@ function ProfileForm({
 
 // src/chat/agent-session-controls.tsx
 import { Fragment as Fragment2, jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
-function selectorIgnoreNote(harness) {
-  const ignoresModel = !harnessHonorsModel(harness);
-  const ignoresEffort = !harnessHonorsEffort(harness);
-  if (ignoresModel && ignoresEffort) return "Ignores model & effort";
-  if (ignoresModel) return "Ignores model selection";
-  if (ignoresEffort) return "Ignores reasoning effort";
+function harnessAutonomyNote(harness) {
+  const ownModel = !harnessHonorsModel(harness);
+  const ownEffort = !harnessHonorsEffort(harness);
+  if (ownModel && ownEffort) return "own model + thinking";
+  if (ownModel) return "own model";
+  if (ownEffort) return "own thinking";
   return null;
 }
+var HARNESS_GROUP_LABELS = {
+  steerable: "Uses your model & thinking",
+  fixed: "Brings its own setup",
+  "no-agent": "No agent"
+};
+var HARNESS_GROUP_ORDER = [
+  "steerable",
+  "fixed",
+  "no-agent"
+];
+function harnessGroup(option) {
+  if (!option.chatCapable) return "no-agent";
+  return harnessAutonomyNote(option.type) === null ? "steerable" : "fixed";
+}
+var HARNESS_SEARCH_THRESHOLD = 7;
 function InformativeLock({
   type,
   label,
@@ -617,6 +640,29 @@ function HarnessDropdown({
   );
   const options = HARNESS_OPTIONS.filter((h) => allowed.has(h.type));
   const selected = options.find((option) => option.type === value);
+  const [query, setQuery] = React3.useState("");
+  const showSearch = options.length > HARNESS_SEARCH_THRESHOLD;
+  const filtered = React3.useMemo(() => {
+    const q = query.trim().toLowerCase();
+    if (!q) return options;
+    return options.filter(
+      (o) => o.label.toLowerCase().includes(q) || o.type.toLowerCase().includes(q) || (o.description?.toLowerCase() ?? "").includes(q)
+    );
+  }, [options, query]);
+  const sections = React3.useMemo(() => {
+    const byGroup = /* @__PURE__ */ new Map();
+    for (const option of filtered) {
+      const key = harnessGroup(option);
+      const bucket = byGroup.get(key);
+      if (bucket) bucket.push(option);
+      else byGroup.set(key, [option]);
+    }
+    return HARNESS_GROUP_ORDER.map((key) => ({
+      key,
+      label: HARNESS_GROUP_LABELS[key],
+      items: byGroup.get(key) ?? []
+    })).filter((section) => section.items.length > 0);
+  }, [filtered]);
   if (locked && onNewChat) {
     return /* @__PURE__ */ jsx3(
       InformativeLock,
@@ -630,73 +676,96 @@ function HarnessDropdown({
       }
     );
   }
-  return /* @__PURE__ */ jsxs3(DropdownMenu2.Root, { children: [
-    /* @__PURE__ */ jsx3(DropdownMenu2.Trigger, { asChild: true, children: /* @__PURE__ */ jsxs3(
-      "button",
-      {
-        type: "button",
-        disabled: disabled || locked,
-        title: locked ? lockReason : void 0,
-        className: cn(
-          "inline-flex h-8 items-center gap-1.5 rounded-lg border border-[var(--md3-outline-variant)] bg-surface-container px-2.5",
-          "text-xs font-medium text-foreground shadow-sm transition-colors",
-          "hover:border-[var(--md3-outline-variant)] hover:bg-surface-container-high focus:outline-none focus-visible:ring-1 focus-visible:ring-ring",
-          "data-[state=open]:border-[var(--md3-outline-variant)] data-[state=open]:bg-surface-container-high",
-          "disabled:cursor-not-allowed disabled:opacity-60",
-          triggerClassName
-        ),
-        "aria-label": "Agent harness",
-        children: [
-          /* @__PURE__ */ jsx3(HarnessLogo, { type: value, size: 16, className: "shrink-0" }),
-          /* @__PURE__ */ jsx3("span", { className: "truncate", children: selected?.label ?? value }),
-          !locked && /* @__PURE__ */ jsx3(ChevronDown3, { className: "ml-auto h-3.5 w-3.5 shrink-0 text-muted-foreground" })
-        ]
-      }
-    ) }),
-    /* @__PURE__ */ jsx3(DropdownMenu2.Portal, { children: /* @__PURE__ */ jsx3(
-      DropdownMenu2.Content,
-      {
-        side,
-        align,
-        avoidCollisions,
-        collisionPadding: 24,
-        sideOffset: 6,
-        className: cn(
-          // Cap to the viewport space on the open side and scroll, so a tall
-          // backend list pinned downward (floating composer) never runs off
-          // the bottom edge.
-          "z-50 w-72 max-h-[var(--radix-dropdown-menu-content-available-height)] overflow-y-auto rounded-[var(--radius-md)] border border-[var(--md3-outline-variant)] bg-surface-container-highest p-1",
-          "shadow-[0_8px_30px_rgba(0,0,0,0.45)] ring-1 ring-[#ffffff14]",
-          "data-[state=open]:animate-in data-[state=closed]:animate-out",
-          "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
-          "data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95"
-        ),
-        children: options.map((option) => /* @__PURE__ */ jsxs3(
-          DropdownMenu2.Item,
+  return /* @__PURE__ */ jsxs3(
+    DropdownMenu2.Root,
+    {
+      onOpenChange: (nextOpen) => {
+        if (!nextOpen) setQuery("");
+      },
+      children: [
+        /* @__PURE__ */ jsx3(DropdownMenu2.Trigger, { asChild: true, children: /* @__PURE__ */ jsxs3(
+          "button",
           {
-            onSelect: (event) => {
-              event.preventDefault();
-              onChange(option.type);
-            },
+            type: "button",
+            disabled: disabled || locked,
+            title: locked ? lockReason : void 0,
             className: cn(
-              "flex cursor-pointer items-start gap-2.5 rounded-md px-2.5 py-2 outline-none",
-              "transition-colors hover:bg-accent/50 focus:bg-accent/50",
-              option.type === value && "bg-primary/10 font-medium text-foreground ring-1 ring-inset ring-primary/25 hover:bg-primary/15 focus:bg-primary/15"
+              "inline-flex h-8 items-center gap-1.5 rounded-lg border border-[var(--md3-outline-variant)] bg-surface-container px-2.5",
+              "text-xs font-medium text-foreground shadow-sm transition-colors",
+              "hover:border-[var(--md3-outline-variant)] hover:bg-surface-container-high focus:outline-none focus-visible:ring-1 focus-visible:ring-ring",
+              "data-[state=open]:border-[var(--md3-outline-variant)] data-[state=open]:bg-surface-container-high",
+              "disabled:cursor-not-allowed disabled:opacity-60",
+              triggerClassName
             ),
+            "aria-label": "Agent harness",
             children: [
-              /* @__PURE__ */ jsx3(HarnessLogo, { type: option.type, size: 20, className: "mt-0.5" }),
-              /* @__PURE__ */ jsxs3("span", { className: "flex min-w-0 flex-col gap-0.5", children: [
-                /* @__PURE__ */ jsx3("span", { className: "text-sm font-medium", children: option.label }),
-                option.description && /* @__PURE__ */ jsx3("span", { className: "text-xs text-muted-foreground", children: option.description }),
-                selectorIgnoreNote(option.type) && /* @__PURE__ */ jsx3("span", { className: "mt-0.5 inline-flex w-fit items-center rounded border border-[var(--md3-outline-variant)] px-1.5 py-0.5 text-[10px] font-medium uppercase tracking-wide text-muted-foreground", children: selectorIgnoreNote(option.type) })
+              /* @__PURE__ */ jsx3(HarnessLogo, { type: value, size: 16, className: "shrink-0" }),
+              /* @__PURE__ */ jsx3("span", { className: "truncate", children: selected?.label ?? value }),
+              !locked && /* @__PURE__ */ jsx3(ChevronDown3, { className: "ml-auto h-3.5 w-3.5 shrink-0 text-muted-foreground" })
+            ]
+          }
+        ) }),
+        /* @__PURE__ */ jsx3(DropdownMenu2.Portal, { children: /* @__PURE__ */ jsxs3(
+          DropdownMenu2.Content,
+          {
+            side,
+            align,
+            avoidCollisions,
+            collisionPadding: 24,
+            sideOffset: 6,
+            className: pickerMenuContentClass,
+            children: [
+              showSearch && /* @__PURE__ */ jsx3(
+                PickerMenuSearch,
+                {
+                  value: query,
+                  onChange: setQuery,
+                  placeholder: "Search agents..."
+                }
+              ),
+              /* @__PURE__ */ jsx3("div", { className: pickerMenuBodyClass, children: sections.length === 0 ? /* @__PURE__ */ jsx3("div", { className: "px-3 py-8 text-center text-xs text-muted-foreground", children: "No agents match." }) : sections.map((section) => /* @__PURE__ */ jsx3(PickerMenuSection, { label: section.label, children: section.items.map((option) => /* @__PURE__ */ jsxs3(
+                DropdownMenu2.Item,
+                {
+                  onSelect: (event) => {
+                    event.preventDefault();
+                    onChange(option.type);
+                  },
+                  className: pickerMenuItemClass({
+                    active: option.type === value
+                  }),
+                  children: [
+                    /* @__PURE__ */ jsx3(
+                      HarnessLogo,
+                      {
+                        type: option.type,
+                        size: 20,
+                        className: "mt-0.5"
+                      }
+                    ),
+                    /* @__PURE__ */ jsxs3("div", { className: "min-w-0 flex-1", children: [
+                      /* @__PURE__ */ jsxs3("div", { className: "flex items-center gap-1.5", children: [
+                        /* @__PURE__ */ jsx3("span", { className: "min-w-0 truncate text-sm font-medium", children: option.label }),
+                        harnessAutonomyNote(option.type) && /* @__PURE__ */ jsx3(PickerMenuTag, { children: harnessAutonomyNote(option.type) })
+                      ] }),
+                      /* @__PURE__ */ jsx3(PickerMenuMeta, { parts: [option.description] })
+                    ] })
+                  ]
+                },
+                option.type
+              )) }, section.key)) }),
+              showSearch && /* @__PURE__ */ jsxs3(PickerMenuFooter, { children: [
+                filtered.length,
+                " of ",
+                options.length,
+                " agent",
+                options.length === 1 ? "" : "s"
               ] })
             ]
-          },
-          option.type
-        ))
-      }
-    ) })
-  ] });
+          }
+        ) })
+      ]
+    }
+  );
 }
 function modelReasoningCapability(models, canonicalId) {
   if (!models || !canonicalId) return null;

package/dist/{chunk-2ISY4R72.js → chunk-RPOPLGW7.js}

@@ -1056,7 +1056,7 @@ function SessionSidebar({
       className: cn("relative flex shrink-0 flex-col border-r border-[var(--md3-outline-variant)] bg-surface-container-low", className),
       style: { width: resizable ? resize.width : defaultWidth },
       children: [
-        /* @__PURE__ */ jsx7("div", { className: "flex shrink-0 items-center border-b border-[var(--md3-outline-variant)] bg-surface-container-high px-3 py-1.5", children: /* @__PURE__ */ jsxs7("div", { className: "flex w-full items-center justify-between gap-2", children: [
+        /* @__PURE__ */ jsx7("div", { className: "flex h-14 shrink-0 items-center border-b border-[var(--md3-outline-variant)] bg-surface-container-high px-3", children: /* @__PURE__ */ jsxs7("div", { className: "flex w-full items-center justify-between gap-2", children: [
           /* @__PURE__ */ jsxs7("div", { className: "flex min-w-0 items-center gap-2", children: [
             /* @__PURE__ */ jsx7("div", { className: "flex h-7 w-7 shrink-0 items-center justify-center rounded-[var(--radius-sm)] border border-[var(--border-accent)] bg-[var(--accent-surface-soft)] text-primary", children: /* @__PURE__ */ jsx7(MessageSquareText, { className: "h-3.5 w-3.5" }) }),
             /* @__PURE__ */ jsxs7("div", { className: "min-w-0", children: [

package/dist/{chunk-NF3Q4RJU.js → chunk-WSN2RZC6.js}

@@ -193,49 +193,49 @@ var HARNESS_OPTIONS = [
   {
     type: "opencode",
     label: "OpenCode",
-    description: "Default agent \u2014 broad model support, deterministic streaming",
+    description: "Broad model support, deterministic streaming",
     chatCapable: true
   },
   {
     type: "claude-code",
     label: "Claude Code",
-    description: "Native Claude skills and tools (requires ANTHROPIC_API_KEY)",
+    description: "Native Claude skills and tools",
     chatCapable: true
   },
   {
     type: "codex",
     label: "Codex",
-    description: "OpenAI Codex CLI (requires OPENAI_API_KEY)",
+    description: "OpenAI's Codex CLI",
     chatCapable: true
   },
   {
     type: "amp",
     label: "AMP",
-    description: "Sourcegraph AMP agent",
+    description: "Sourcegraph's coding agent",
     chatCapable: true
   },
   {
     type: "factory-droids",
     label: "Factory Droids",
-    description: "Factory Droid agent",
+    description: "Factory's Droid agent",
     chatCapable: true
   },
   {
     type: "kimi-code",
     label: "Kimi Code",
-    description: "Moonshot Kimi Code CLI (Kimi subscription OAuth or MOONSHOT_API_KEY)",
+    description: "Moonshot's Kimi Code CLI",
     chatCapable: true
   },
   {
     type: "openclaw",
     label: "OpenClaw",
-    description: "Dispatcher routing to Claude / Codex / Gemini CLIs",
+    description: "Routes to Claude, Codex, or Gemini",
     chatCapable: true
   },
   {
     type: "nanoclaw",
     label: "NanoClaw",
-    description: "Local socket-bridge agent backend",
+    description: "Local socket-bridge backend",
     chatCapable: true
   },
   {
@@ -247,7 +247,7 @@ var HARNESS_OPTIONS = [
   {
     type: "cli-base",
     label: "CLI base (no agent)",
-    description: "Shell tools only \u2014 for non-AI scheduled tasks",
+    description: "Shell tools only, for non-AI scheduled tasks",
     chatCapable: false
   }
 ];

package/dist/dashboard.d.ts

@@ -732,6 +732,13 @@ interface HarnessOption extends Backend {
 /**
  * Default option list with human-readable copy. Order is curated so the
  * recommended choice (`opencode`) appears first; `cli-base` (no agent) last.
+ *
+ * Descriptions name what the AGENT is, in one short line that fits the menu row
+ * without wrapping. They deliberately do NOT mention credentials: which keys a
+ * deployment supplies is a product decision, not a property of the harness, and
+ * an env-var name (`ANTHROPIC_API_KEY`) is developer text that has no place in a
+ * customer-facing menu. A product whose deployment really does require a
+ * user-supplied key says so through `optionsOverride`.
  */
 declare const HARNESS_OPTIONS: readonly HarnessOption[];
 /** Harness types that can drive an interactive chat session. */

package/dist/dashboard.js

@@ -71,7 +71,7 @@ import {
   HarnessLogo,
   HarnessPicker,
   chatCapableHarnesses
-} from "./chunk-NF3Q4RJU.js";
+} from "./chunk-WSN2RZC6.js";
 import {
   DEFAULT_FEATURED_MODEL_IDS,
   ModelPicker,
@@ -79,7 +79,7 @@ import {
   formatContext,
   formatPricing,
   modelDedupKey
-} from "./chunk-LAZZBSN4.js";
+} from "./chunk-FWSBQLFG.js";
 import {
   ModelBrandStack,
   canonicalModelId,

package/dist/globals.css

@@ -948,6 +948,9 @@
   .min-h-\[300px\] {
     min-height: 300px;
   }
+  .min-h-\[560px\] {
+    min-height: 560px;
+  }
   .min-h-\[640px\] {
     min-height: 640px;
   }
@@ -1140,6 +1143,9 @@
   .w-\[680px\] {
     width: 680px;
   }
+  .w-\[720px\] {
+    width: 720px;
+  }
   .w-\[760px\] {
     width: 760px;
   }
@@ -1176,9 +1182,6 @@
   .w-\[var\(--tool-icon-size\)\] {
     width: var(--tool-icon-size);
   }
-  .w-fit {
-    width: fit-content;
-  }
   .w-full {
     width: 100%;
   }

package/dist/index.js

@@ -91,7 +91,7 @@ import {
   snapHarnessToModel,
   snapModelToHarness,
   validateComposerFiles
-} from "./chunk-UU77AFEU.js";
+} from "./chunk-QMY3XVH3.js";
 import {
   TOOL_CATEGORY_ICONS,
   cn,
@@ -136,7 +136,7 @@ import {
   dispatchSessionCreated,
   shellShouldRevalidate,
   useOptimisticSessionItems
-} from "./chunk-2ISY4R72.js";
+} from "./chunk-RPOPLGW7.js";
 import {
   BRAND_PRISM_THEME,
   CodeSurface,
@@ -323,7 +323,7 @@ import {
   HarnessLogo,
   HarnessPicker,
   chatCapableHarnesses
-} from "./chunk-NF3Q4RJU.js";
+} from "./chunk-WSN2RZC6.js";
 import {
   DEFAULT_FEATURED_MODEL_IDS,
   ModelPicker,
@@ -331,7 +331,7 @@ import {
   formatContext,
   formatPricing,
   modelDedupKey
-} from "./chunk-LAZZBSN4.js";
+} from "./chunk-FWSBQLFG.js";
 import {
   ModelBrandStack,
   canonicalModelId,

package/dist/pages.js

@@ -24,7 +24,7 @@ import {
   Switch,
   Textarea
 } from "./chunk-4ZZUMXPX.js";
-import "./chunk-LAZZBSN4.js";
+import "./chunk-FWSBQLFG.js";
 import "./chunk-5XRAKVIV.js";
 import {
   cn

package/dist/styles.css

@@ -948,6 +948,9 @@
   .min-h-\[300px\] {
     min-height: 300px;
   }
+  .min-h-\[560px\] {
+    min-height: 560px;
+  }
   .min-h-\[640px\] {
     min-height: 640px;
   }
@@ -1140,6 +1143,9 @@
   .w-\[680px\] {
     width: 680px;
   }
+  .w-\[720px\] {
+    width: 720px;
+  }
   .w-\[760px\] {
     width: 760px;
   }
@@ -1176,9 +1182,6 @@
   .w-\[var\(--tool-icon-size\)\] {
     width: var(--tool-icon-size);
   }
-  .w-fit {
-    width: fit-content;
-  }
   .w-full {
     width: 100%;
   }

package/dist/workbench.js

@@ -19,8 +19,8 @@ import "./chunk-OMUIPJQZ.js";
 import "./chunk-WYMAC3T3.js";
 import "./chunk-KEYPUGS3.js";
 import "./chunk-4ZZUMXPX.js";
-import "./chunk-NF3Q4RJU.js";
-import "./chunk-LAZZBSN4.js";
+import "./chunk-WSN2RZC6.js";
+import "./chunk-FWSBQLFG.js";
 import "./chunk-5XRAKVIV.js";
 import "./chunk-EI44GEQ5.js";
 import "./chunk-CZ7CSFO4.js";

package/dist/workspace.js

@@ -19,7 +19,7 @@ import {
   dispatchSessionCreated,
   shellShouldRevalidate,
   useOptimisticSessionItems
-} from "./chunk-2ISY4R72.js";
+} from "./chunk-RPOPLGW7.js";
 import "./chunk-EI44GEQ5.js";
 import "./chunk-CZ7CSFO4.js";
 export {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tangle-network/sandbox-ui",
-  "version": "0.90.3",
+  "version": "0.91.1",
   "description": "Unified UI component library for Tangle Sandbox — primitives, chat, dashboard, terminal, editor, and workspace components",
   "repository": {
     "type": "git",