@ai-matrx/chat 0.5.0 → 0.5.3

package/dist/agents/components/run-controls/RunSettingsModal.js

@@ -1,4 +1,5 @@
 "use client";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { Settings2 } from "lucide-react";
 import {
   Popover,
@@ -8,7 +9,13 @@ import {
 import { RunSettingsEditor } from "./RunSettingsEditor.js";
 import { Button } from "@ai-matrx/design-system/controls";
 function RunSettingsModal({ conversationId }) {
-  return /* @__PURE__ */ React.createElement(Popover, null, /* @__PURE__ */ React.createElement(PopoverTrigger, { asChild: true }, /* @__PURE__ */ React.createElement(Button, { variant: "quiet", icon: /* @__PURE__ */ React.createElement(Settings2, null), title: "Test run settings", "aria-label": "Test run settings", className: "shrink-0" })), /* @__PURE__ */ React.createElement(PopoverContent, { sizing: "content", align: "end", className: "p-3" }, /* @__PURE__ */ React.createElement("p", { className: "text-xs font-medium text-muted-foreground mb-3" }, "Test Run Settings"), /* @__PURE__ */ React.createElement(RunSettingsEditor, { conversationId })));
+  return /* @__PURE__ */ jsxs(Popover, { children: [
+    /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsx(Button, { variant: "quiet", icon: /* @__PURE__ */ jsx(Settings2, {}), title: "Test run settings", "aria-label": "Test run settings", className: "shrink-0" }) }),
+    /* @__PURE__ */ jsxs(PopoverContent, { sizing: "content", align: "end", className: "p-3", children: [
+      /* @__PURE__ */ jsx("p", { className: "text-xs font-medium text-muted-foreground mb-3", children: "Test Run Settings" }),
+      /* @__PURE__ */ jsx(RunSettingsEditor, { conversationId })
+    ] })
+  ] });
 }
 export {
   RunSettingsModal

package/dist/agents/components/run-controls/SimpleRunSettings/CapabilityGrid.js

@@ -1,5 +1,5 @@
 "use client";
-import React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { Check } from "lucide-react";
 import { cn } from "@ai-matrx/design-system";
 import {
@@ -7,7 +7,7 @@ import {
   ACCENT_CLASSES
 } from "./capabilities.js";
 function CapabilityGrid({ value, onChange, className }) {
-  return /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ jsx(
     "div",
     {
       role: "radiogroup",
@@ -15,17 +15,17 @@ function CapabilityGrid({ value, onChange, className }) {
       className: cn(
         "grid grid-cols-2 gap-2",
         className
-      )
-    },
-    CAPABILITIES.map((cap) => /* @__PURE__ */ React.createElement(
-      CapabilityCard,
-      {
-        key: cap.id,
-        capability: cap,
-        selected: cap.id === value,
-        onSelect: () => onChange(cap.id)
-      }
-    ))
+      ),
+      children: CAPABILITIES.map((cap) => /* @__PURE__ */ jsx(
+        CapabilityCard,
+        {
+          capability: cap,
+          selected: cap.id === value,
+          onSelect: () => onChange(cap.id)
+        },
+        cap.id
+      ))
+    }
   );
 }
 function CapabilityCard({
@@ -35,7 +35,7 @@ function CapabilityCard({
 }) {
   const Icon = capability.icon;
   const accent = ACCENT_CLASSES[capability.accent];
-  return /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ jsxs(
     "button",
     {
       type: "button",
@@ -46,12 +46,17 @@ function CapabilityCard({
         "relative flex flex-col items-start gap-1.5 rounded-lg border bg-card p-3 text-left transition-all",
         "hover:bg-accent/50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
         selected ? cn("ring-2 ring-offset-1 ring-offset-background border-transparent", accent.ringSelected) : "border-border"
-      )
-    },
-    selected && /* @__PURE__ */ React.createElement("span", { className: "absolute right-2 top-2 flex h-5 w-5 items-center justify-center rounded-full bg-foreground text-background" }, /* @__PURE__ */ React.createElement(Check, { className: "h-3 w-3", strokeWidth: 3 })),
-    /* @__PURE__ */ React.createElement("div", { className: cn("flex h-7 w-7 items-center justify-center rounded-md", accent.tile) }, /* @__PURE__ */ React.createElement(Icon, { className: "h-4 w-4" })),
-    /* @__PURE__ */ React.createElement("div", { className: "min-w-0" }, /* @__PURE__ */ React.createElement("div", { className: "flex items-baseline gap-1.5" }, /* @__PURE__ */ React.createElement("span", { className: "text-sm font-semibold text-foreground truncate" }, capability.label)), /* @__PURE__ */ React.createElement("p", { className: "text-[11px] text-muted-foreground leading-snug line-clamp-2" }, capability.description)),
-    /* @__PURE__ */ React.createElement("span", { className: cn("mt-auto text-[10px] font-medium uppercase tracking-wide", accent.text) }, capability.tagline)
+      ),
+      children: [
+        selected && /* @__PURE__ */ jsx("span", { className: "absolute right-2 top-2 flex h-5 w-5 items-center justify-center rounded-full bg-foreground text-background", children: /* @__PURE__ */ jsx(Check, { className: "h-3 w-3", strokeWidth: 3 }) }),
+        /* @__PURE__ */ jsx("div", { className: cn("flex h-7 w-7 items-center justify-center rounded-md", accent.tile), children: /* @__PURE__ */ jsx(Icon, { className: "h-4 w-4" }) }),
+        /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
+          /* @__PURE__ */ jsx("div", { className: "flex items-baseline gap-1.5", children: /* @__PURE__ */ jsx("span", { className: "text-sm font-semibold text-foreground truncate", children: capability.label }) }),
+          /* @__PURE__ */ jsx("p", { className: "text-[11px] text-muted-foreground leading-snug line-clamp-2", children: capability.description })
+        ] }),
+        /* @__PURE__ */ jsx("span", { className: cn("mt-auto text-[10px] font-medium uppercase tracking-wide", accent.text), children: capability.tagline })
+      ]
+    }
   );
 }
 export {

package/dist/agents/components/run-controls/SimpleRunSettings/ReasoningLevelSelector.js

@@ -1,5 +1,5 @@
 "use client";
-import React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { cn } from "@ai-matrx/design-system";
 import { SegmentedControl } from "@ai-matrx/design-system/controls";
 import {
@@ -12,16 +12,19 @@ function ReasoningLevelSelector({
   className
 }) {
   const currentHint = findReasoningLevel(value)?.hint ?? "";
-  return /* @__PURE__ */ React.createElement("div", { className: cn("flex flex-col gap-1.5", className) }, /* @__PURE__ */ React.createElement(
-    SegmentedControl,
-    {
-      fill: true,
-      "aria-label": "How much should it think?",
-      value,
-      onValueChange: onChange,
-      data: REASONING_LEVELS.map((level) => ({ value: level.id, label: level.label }))
-    }
-  ), /* @__PURE__ */ React.createElement("p", { className: "text-[11px] text-muted-foreground leading-snug min-h-[1.2em]" }, currentHint));
+  return /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col gap-1.5", className), children: [
+    /* @__PURE__ */ jsx(
+      SegmentedControl,
+      {
+        fill: true,
+        "aria-label": "How much should it think?",
+        value,
+        onValueChange: onChange,
+        data: REASONING_LEVELS.map((level) => ({ value: level.id, label: level.label }))
+      }
+    ),
+    /* @__PURE__ */ jsx("p", { className: "text-[11px] text-muted-foreground leading-snug min-h-[1.2em]", children: currentHint })
+  ] });
 }
 export {
   ReasoningLevelSelector

package/dist/agents/components/run-controls/SimpleRunSettings/SimpleRunSettings.js

@@ -1,5 +1,6 @@
 "use client";
-import React, { useState, useCallback } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useState, useCallback } from "react";
 import { RotateCcw } from "lucide-react";
 import { cn } from "@ai-matrx/design-system";
 import { CapabilityGrid } from "./CapabilityGrid.js";
@@ -50,34 +51,44 @@ function SimpleRunSettings({
     emit(DEFAULT_CAPABILITY_ID, DEFAULT_REASONING_LEVEL);
     onReset?.();
   }, [emit, onReset]);
-  return /* @__PURE__ */ React.createElement("div", { className: cn("flex flex-col gap-4 w-[320px]", className) }, /* @__PURE__ */ React.createElement(
-    Section,
-    {
-      title: "What kind of AI?",
-      subtitle: "Pick the one that fits what you're asking."
-    },
-    /* @__PURE__ */ React.createElement(CapabilityGrid, { value: capabilityId, onChange: handleCapabilityChange })
-  ), /* @__PURE__ */ React.createElement(
-    Section,
-    {
-      title: "How much should it think?",
-      subtitle: "More thinking means smarter answers, but slower."
-    },
-    /* @__PURE__ */ React.createElement(
-      ReasoningLevelSelector,
+  return /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col gap-4 w-[320px]", className), children: [
+    /* @__PURE__ */ jsx(
+      Section,
+      {
+        title: "What kind of AI?",
+        subtitle: "Pick the one that fits what you're asking.",
+        children: /* @__PURE__ */ jsx(CapabilityGrid, { value: capabilityId, onChange: handleCapabilityChange })
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      Section,
       {
-        value: reasoningLevel,
-        onChange: handleReasoningChange
+        title: "How much should it think?",
+        subtitle: "More thinking means smarter answers, but slower.",
+        children: /* @__PURE__ */ jsx(
+          ReasoningLevelSelector,
+          {
+            value: reasoningLevel,
+            onChange: handleReasoningChange
+          }
+        )
       }
-    )
-  ), /* @__PURE__ */ React.createElement(Button, { variant: "quiet", icon: /* @__PURE__ */ React.createElement(RotateCcw, null), onClick: handleReset, className: "self-start" }, "Reset to defaults"));
+    ),
+    /* @__PURE__ */ jsx(Button, { variant: "quiet", icon: /* @__PURE__ */ jsx(RotateCcw, {}), onClick: handleReset, className: "self-start", children: "Reset to defaults" })
+  ] });
 }
 function Section({
   title,
   subtitle,
   children
 }) {
-  return /* @__PURE__ */ React.createElement("div", { className: "flex flex-col gap-2" }, /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement("h3", { className: "text-sm font-semibold text-foreground" }, title), /* @__PURE__ */ React.createElement("p", { className: "text-[11px] text-muted-foreground leading-snug" }, subtitle)), children);
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2", children: [
+    /* @__PURE__ */ jsxs("div", { children: [
+      /* @__PURE__ */ jsx("h3", { className: "text-sm font-semibold text-foreground", children: title }),
+      /* @__PURE__ */ jsx("p", { className: "text-[11px] text-muted-foreground leading-snug", children: subtitle })
+    ] }),
+    children
+  ] });
 }
 export {
   SimpleRunSettings

package/dist/agents/components/run-controls/SimpleRunSettings/SimpleRunSettingsButton.js

@@ -1,5 +1,6 @@
 "use client";
-import React, { useState, useCallback } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useState, useCallback } from "react";
 import { Settings2 } from "lucide-react";
 import {
   Popover,
@@ -35,45 +36,50 @@ function SimpleRunSettingsButton({
   const sizeClasses = size === "sm" ? "h-7 w-7" : "h-8 w-8";
   const iconClasses = size === "sm" ? "h-3.5 w-3.5" : "h-4 w-4";
   const activeCap = findCapability(value.capabilityId);
-  return /* @__PURE__ */ React.createElement(Popover, { open, onOpenChange: setOpen }, /* @__PURE__ */ React.createElement(PopoverTrigger, { asChild: true }, /* @__PURE__ */ React.createElement(
-    "button",
-    {
-      type: "button",
-      title: isCustomised ? `Settings: ${activeCap?.label ?? "\u2014"} \xB7 ${capitalise(value.reasoningLevel)} thinking` : "Chat settings",
-      "aria-label": "Chat settings",
-      className: cn(
-        "relative inline-flex items-center justify-center rounded-md",
-        "text-muted-foreground/70 hover:text-foreground hover:bg-muted transition-colors",
-        "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
-        sizeClasses,
-        className
-      )
-    },
-    /* @__PURE__ */ React.createElement(Settings2, { className: iconClasses }),
-    isCustomised && /* @__PURE__ */ React.createElement(
-      "span",
+  return /* @__PURE__ */ jsxs(Popover, { open, onOpenChange: setOpen, children: [
+    /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(
+      "button",
       {
-        className: "absolute top-1 right-1 h-1.5 w-1.5 rounded-full bg-blue-500 dark:bg-blue-400",
-        "aria-hidden": true
+        type: "button",
+        title: isCustomised ? `Settings: ${activeCap?.label ?? "\u2014"} \xB7 ${capitalise(value.reasoningLevel)} thinking` : "Chat settings",
+        "aria-label": "Chat settings",
+        className: cn(
+          "relative inline-flex items-center justify-center rounded-md",
+          "text-muted-foreground/70 hover:text-foreground hover:bg-muted transition-colors",
+          "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+          sizeClasses,
+          className
+        ),
+        children: [
+          /* @__PURE__ */ jsx(Settings2, { className: iconClasses }),
+          isCustomised && /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: "absolute top-1 right-1 h-1.5 w-1.5 rounded-full bg-blue-500 dark:bg-blue-400",
+              "aria-hidden": true
+            }
+          )
+        ]
       }
-    )
-  )), /* @__PURE__ */ React.createElement(
-    PopoverContent,
-    {
-      align: "end",
-      side: "top",
-      sideOffset: 8,
-      className: "w-auto p-4"
-    },
-    /* @__PURE__ */ React.createElement(
-      SimpleRunSettings,
+    ) }),
+    /* @__PURE__ */ jsx(
+      PopoverContent,
       {
-        initialCapabilityId: value.capabilityId,
-        initialReasoningLevel: value.reasoningLevel,
-        onChange: handleChange
+        align: "end",
+        side: "top",
+        sideOffset: 8,
+        className: "w-auto p-4",
+        children: /* @__PURE__ */ jsx(
+          SimpleRunSettings,
+          {
+            initialCapabilityId: value.capabilityId,
+            initialReasoningLevel: value.reasoningLevel,
+            onChange: handleChange
+          }
+        )
       }
     )
-  ));
+  ] });
 }
 function capitalise(s) {
   return s.charAt(0).toUpperCase() + s.slice(1);

package/dist/agents/components/run-controls/StoredModelOverridesField.js

@@ -1,4 +1,5 @@
 "use client";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { useEffect, useRef } from "react";
 import { useAppDispatch, useAppSelector, useAppStore } from "../../../store/hooks.js";
 import {
@@ -81,33 +82,43 @@ function StoredModelOverridesField({
   const overrides = entry?.overrides ?? {};
   const currentModel = typeof overrides.model === "string" ? overrides.model : null;
   const pinnedOfferingId = effectiveOfferingPin(entry);
-  return /* @__PURE__ */ React.createElement("div", { className: "space-y-2 py-2.5" }, /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement("div", { className: "text-sm font-medium text-foreground" }, title), /* @__PURE__ */ React.createElement("p", { className: "mt-0.5 text-[11px] leading-snug text-muted-foreground" }, hint)), /* @__PURE__ */ React.createElement("div", { className: "flex items-center gap-2" }, /* @__PURE__ */ React.createElement(Label, { className: "shrink-0 text-xs text-muted-foreground" }, "Model"), /* @__PURE__ */ React.createElement(
-    ModelListDropdown,
-    {
-      value: currentModel,
-      onValueChange: (id) => dispatch(
-        setOverrides({
-          conversationId: instanceKey,
-          changes: { model: id }
-        })
-      ),
-      pinnedOfferingId,
-      onOfferingPinChange: (offeringId) => dispatch(setOfferingPin({ conversationId: instanceKey, offeringId })),
-      emptyOptionLabel: emptyChoiceLabel,
-      onClear: () => dispatch(resetModelChoice(instanceKey)),
-      placeholder: emptyChoiceLabel,
-      inputModalities: [],
-      outputModalities: ["text"],
-      disabled
-    }
-  )), ready ? /* @__PURE__ */ React.createElement(
-    RunConfigOverrides,
-    {
-      conversationId: instanceKey,
-      words,
-      structured
-    }
-  ) : null);
+  return /* @__PURE__ */ jsxs("div", { className: "space-y-2 py-2.5", children: [
+    /* @__PURE__ */ jsxs("div", { children: [
+      /* @__PURE__ */ jsx("div", { className: "text-sm font-medium text-foreground", children: title }),
+      /* @__PURE__ */ jsx("p", { className: "mt-0.5 text-[11px] leading-snug text-muted-foreground", children: hint })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+      /* @__PURE__ */ jsx(Label, { className: "shrink-0 text-xs text-muted-foreground", children: "Model" }),
+      /* @__PURE__ */ jsx(
+        ModelListDropdown,
+        {
+          value: currentModel,
+          onValueChange: (id) => dispatch(
+            setOverrides({
+              conversationId: instanceKey,
+              changes: { model: id }
+            })
+          ),
+          pinnedOfferingId,
+          onOfferingPinChange: (offeringId) => dispatch(setOfferingPin({ conversationId: instanceKey, offeringId })),
+          emptyOptionLabel: emptyChoiceLabel,
+          onClear: () => dispatch(resetModelChoice(instanceKey)),
+          placeholder: emptyChoiceLabel,
+          inputModalities: [],
+          outputModalities: ["text"],
+          disabled
+        }
+      )
+    ] }),
+    ready ? /* @__PURE__ */ jsx(
+      RunConfigOverrides,
+      {
+        conversationId: instanceKey,
+        words,
+        structured
+      }
+    ) : null
+  ] });
 }
 export {
   StoredModelOverridesField

package/dist/agents/components/run-controls/SurfaceSimulatorSelect.js

@@ -1,4 +1,5 @@
 "use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { useEffect, useState } from "react";
 import { Check, Monitor, X } from "lucide-react";
 import { useAppDispatch, useAppSelector } from "../../../store/hooks.js";
@@ -78,88 +79,135 @@ function SurfaceSimulatorSelect({
   const groups = [...byClient.entries()].sort(
     ([a], [b]) => a.localeCompare(b)
   );
-  const picker = /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(Popover, { open, onOpenChange: setOpen }, /* @__PURE__ */ React.createElement(PopoverTrigger, { asChild: true }, /* @__PURE__ */ React.createElement(
-    "button",
-    {
-      type: "button",
-      role: "combobox",
-      "aria-expanded": open,
-      className: "inline-flex h-7 w-full items-center justify-between gap-1 rounded-md bg-transparent px-1 text-xs text-foreground/80 transition-colors hover:text-foreground"
-    },
-    /* @__PURE__ */ React.createElement("span", { className: "flex items-center gap-1.5 truncate" }, /* @__PURE__ */ React.createElement(Monitor, { className: "h-3 w-3 shrink-0 text-muted-foreground" }), /* @__PURE__ */ React.createElement("span", { className: "truncate" }, override ?? `Detected: ${detected ?? "none"}`)),
-    /* @__PURE__ */ React.createElement(SelectChevron, { size: "sm" })
-  )), /* @__PURE__ */ React.createElement(
-    PopoverContent,
-    {
-      sizing: "content",
-      className: "p-0",
-      align: "start"
-    },
-    /* @__PURE__ */ React.createElement(Command, null, /* @__PURE__ */ React.createElement(
-      CommandInput,
-      {
-        placeholder: "Search surfaces\u2026",
-        className: "h-8 text-xs"
-      }
-    ), /* @__PURE__ */ React.createElement(CommandList, null, loading && /* @__PURE__ */ React.createElement("div", { className: "py-4 text-center text-xs text-muted-foreground" }, "Loading surfaces\u2026"), error && /* @__PURE__ */ React.createElement("div", { className: "py-4 text-center text-xs text-destructive" }, error, /* @__PURE__ */ React.createElement(ErrorAlchemyMenu, { error })), !loading && !error && /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(CommandEmpty, null, "No surfaces found."), /* @__PURE__ */ React.createElement(CommandGroup, null, /* @__PURE__ */ React.createElement(
-      CommandItem,
-      {
-        value: "__detected__ use detected route surface",
-        onSelect: () => setOverride(null)
-      },
-      /* @__PURE__ */ React.createElement(
-        Check,
+  const picker = /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs(Popover, { open, onOpenChange: setOpen, children: [
+      /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(
+        "button",
         {
-          className: cn(
-            "mr-2 h-3 w-3",
-            override === null ? "opacity-100" : "opacity-0"
-          )
+          type: "button",
+          role: "combobox",
+          "aria-expanded": open,
+          className: "inline-flex h-7 w-full items-center justify-between gap-1 rounded-md bg-transparent px-1 text-xs text-foreground/80 transition-colors hover:text-foreground",
+          children: [
+            /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-1.5 truncate", children: [
+              /* @__PURE__ */ jsx(Monitor, { className: "h-3 w-3 shrink-0 text-muted-foreground" }),
+              /* @__PURE__ */ jsx("span", { className: "truncate", children: override ?? `Detected: ${detected ?? "none"}` })
+            ] }),
+            /* @__PURE__ */ jsx(SelectChevron, { size: "sm" })
+          ]
         }
-      ),
-      /* @__PURE__ */ React.createElement("span", { className: "text-xs" }, "Use detected surface", detected ? ` (${detected})` : "")
-    )), groups.map(([client, items]) => /* @__PURE__ */ React.createElement(CommandGroup, { key: client, heading: client }, items.map((s) => /* @__PURE__ */ React.createElement(
-      CommandItem,
-      {
-        key: s.name,
-        value: s.name,
-        onSelect: () => setOverride(s.name)
-      },
-      /* @__PURE__ */ React.createElement(
-        Check,
+      ) }),
+      /* @__PURE__ */ jsx(
+        PopoverContent,
         {
-          className: cn(
-            "mr-2 h-3 w-3",
-            override === s.name ? "opacity-100" : "opacity-0"
-          )
+          sizing: "content",
+          className: "p-0",
+          align: "start",
+          children: /* @__PURE__ */ jsxs(Command, { children: [
+            /* @__PURE__ */ jsx(
+              CommandInput,
+              {
+                placeholder: "Search surfaces\u2026",
+                className: "h-8 text-xs"
+              }
+            ),
+            /* @__PURE__ */ jsxs(CommandList, { children: [
+              loading && /* @__PURE__ */ jsx("div", { className: "py-4 text-center text-xs text-muted-foreground", children: "Loading surfaces\u2026" }),
+              error && /* @__PURE__ */ jsxs("div", { className: "py-4 text-center text-xs text-destructive", children: [
+                error,
+                /* @__PURE__ */ jsx(ErrorAlchemyMenu, { error })
+              ] }),
+              !loading && !error && /* @__PURE__ */ jsxs(Fragment, { children: [
+                /* @__PURE__ */ jsx(CommandEmpty, { children: "No surfaces found." }),
+                /* @__PURE__ */ jsx(CommandGroup, { children: /* @__PURE__ */ jsxs(
+                  CommandItem,
+                  {
+                    value: "__detected__ use detected route surface",
+                    onSelect: () => setOverride(null),
+                    children: [
+                      /* @__PURE__ */ jsx(
+                        Check,
+                        {
+                          className: cn(
+                            "mr-2 h-3 w-3",
+                            override === null ? "opacity-100" : "opacity-0"
+                          )
+                        }
+                      ),
+                      /* @__PURE__ */ jsxs("span", { className: "text-xs", children: [
+                        "Use detected surface",
+                        detected ? ` (${detected})` : ""
+                      ] })
+                    ]
+                  }
+                ) }),
+                groups.map(([client, items]) => /* @__PURE__ */ jsx(CommandGroup, { heading: client, children: items.map((s) => /* @__PURE__ */ jsxs(
+                  CommandItem,
+                  {
+                    value: s.name,
+                    onSelect: () => setOverride(s.name),
+                    children: [
+                      /* @__PURE__ */ jsx(
+                        Check,
+                        {
+                          className: cn(
+                            "mr-2 h-3 w-3",
+                            override === s.name ? "opacity-100" : "opacity-0"
+                          )
+                        }
+                      ),
+                      /* @__PURE__ */ jsx("span", { className: "truncate text-xs", children: s.name })
+                    ]
+                  },
+                  s.name
+                )) }, client))
+              ] })
+            ] })
+          ] })
         }
-      ),
-      /* @__PURE__ */ React.createElement("span", { className: "truncate text-xs" }, s.name)
-    )))))))
-  )), override && !compact && /* @__PURE__ */ React.createElement("p", { className: "mt-1 text-[10px] leading-tight text-amber-600 dark:text-amber-500" }, "Simulating ", /* @__PURE__ */ React.createElement("span", { className: "font-mono" }, override), " \u2014 this run's available tools match that surface, not the real one."));
+      )
+    ] }),
+    override && !compact && /* @__PURE__ */ jsxs("p", { className: "mt-1 text-[10px] leading-tight text-amber-600 dark:text-amber-500", children: [
+      "Simulating ",
+      /* @__PURE__ */ jsx("span", { className: "font-mono", children: override }),
+      " \u2014 this run's available tools match that surface, not the real one."
+    ] })
+  ] });
   if (compact) {
-    return /* @__PURE__ */ React.createElement(
+    return /* @__PURE__ */ jsxs(
       "div",
       {
         className: cn(
           "min-h-8 items-center py-0.5",
           quickset ? "grid grid-cols-[9rem_minmax(0,1fr)] gap-2" : "flex gap-3"
-        )
-      },
-      /* @__PURE__ */ React.createElement(
-        Label,
-        {
-          className: cn(
-            "shrink-0 truncate text-xs text-foreground",
-            !quickset && "w-[9rem]"
+        ),
+        children: [
+          /* @__PURE__ */ jsx(
+            Label,
+            {
+              className: cn(
+                "shrink-0 truncate text-xs text-foreground",
+                !quickset && "w-[9rem]"
+              ),
+              title: "Surface Simulator",
+              children: "Surface Simulator"
+            }
           ),
-          title: "Surface Simulator"
-        },
-        "Surface Simulator"
-      ),
-      /* @__PURE__ */ React.createElement("div", { className: "flex min-w-0 items-center gap-1" }, /* @__PURE__ */ React.createElement("div", { className: "min-w-0 flex-1" }, picker), override && /* @__PURE__ */ React.createElement(Button, { variant: "quiet", removes: true, onClick: () => setOverride(null), className: "shrink-0" }, "Clear"))
+          /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 items-center gap-1", children: [
+            /* @__PURE__ */ jsx("div", { className: "min-w-0 flex-1", children: picker }),
+            override && /* @__PURE__ */ jsx(Button, { variant: "quiet", removes: true, onClick: () => setOverride(null), className: "shrink-0", children: "Clear" })
+          ] })
+        ]
+      }
     );
   }
-  return /* @__PURE__ */ React.createElement("div", { className: "py-1" }, /* @__PURE__ */ React.createElement("div", { className: "mb-1 flex items-center justify-between gap-2" }, /* @__PURE__ */ React.createElement(Label, { className: "text-xs text-muted-foreground" }, "Surface Simulator"), override && /* @__PURE__ */ React.createElement(Button, { variant: "quiet", removes: true, icon: /* @__PURE__ */ React.createElement(X, null), onClick: () => setOverride(null) }, "clear")), picker);
+  return /* @__PURE__ */ jsxs("div", { className: "py-1", children: [
+    /* @__PURE__ */ jsxs("div", { className: "mb-1 flex items-center justify-between gap-2", children: [
+      /* @__PURE__ */ jsx(Label, { className: "text-xs text-muted-foreground", children: "Surface Simulator" }),
+      override && /* @__PURE__ */ jsx(Button, { variant: "quiet", removes: true, icon: /* @__PURE__ */ jsx(X, {}), onClick: () => setOverride(null), children: "clear" })
+    ] }),
+    picker
+  ] });
 }
 export {
   SurfaceSimulatorSelect