@qredence/fleet 0.6.6 → 0.7.1

package/dist/web/server/{settings-dialog-C8U1VX75-6A2V6HSW.js → settings-dialog-DG9HEZeP-TWDRDGMN.js}

@@ -7,7 +7,7 @@ import {
   InputGroupButton,
   InputGroupInput,
   Textarea
-} from "./chunk-WBPESYPV.js";
+} from "./chunk-COWE2EJ6.js";
 import {
   Alert,
   AlertDescription,
@@ -16,7 +16,7 @@ import {
   FieldGroup,
   FieldLabel,
   Switch$1
-} from "./chunk-KUBURZOL.js";
+} from "./chunk-35AFSKDX.js";
 import {
   isModelPatternEnabled,
   modelMatchesPattern,
@@ -47,7 +47,7 @@ import {
   useCSPContext,
   useChatPanelDataContext,
   useSettingsActionsContext
-} from "./chunk-VF3NJAD6.js";
+} from "./chunk-GCDOYNXR.js";
 import {
   Button$1,
   addEventListener,
@@ -64,10 +64,11 @@ import {
   useDirection,
   useIsoLayoutEffect,
   useRenderElement,
+  useShape,
   useStableCallback,
   useTimeout,
   writeUiPreferences
-} from "./chunk-JT53AAM5.js";
+} from "./chunk-E4YWFQX5.js";
 import {
   COMPACT_ACTION_BUTTON_CLASS,
   HIT_AREA_EXPAND_CLASS,
@@ -116,14 +117,14 @@ import {
   cn
 } from "./chunk-B5Y7XOIJ.js";
 import "./chunk-NB3TVOGB.js";
-import "./chunk-F5DJQ3PQ.js";
+import "./chunk-WPSI5TBE.js";
 import "./chunk-NXAVRSI5.js";
 import {
   __export
 } from "./chunk-CZ7CSFO4.js";
 
-// web/app/dist/server/assets/settings-dialog-C8U1VX75.js
-import { useCallback, useEffect as useEffect2, useId, useMemo as useMemo3, useRef as useRef4, useState as useState2 } from "react";
+// web/app/dist/server/assets/settings-dialog-DG9HEZeP.js
+import { createContext as createContext4, forwardRef as forwardRef7, useCallback, useContext as useContext4, useEffect as useEffect2, useId, useMemo as useMemo3, useRef as useRef4, useState as useState2 } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 
 // node_modules/.pnpm/@base-ui+react@1.8.0_@date-fns+tz@1.5.0_@types+react@19.3.0_date-fns@4.4.0_react-dom@19.3.0_react@19.3.0__react@19.3.0/node_modules/@base-ui/react/scroll-area/index.parts.mjs
@@ -1089,45 +1090,7 @@ var ScrollAreaCorner = /* @__PURE__ */ React9.forwardRef(function ScrollAreaCorn
 });
 if (process.env.NODE_ENV !== "production") ScrollAreaCorner.displayName = "ScrollAreaCorner";
 
-// web/app/dist/server/assets/settings-dialog-C8U1VX75.js
-function RowSurface({ className, interactive, padding, tone, ...props }) {
-  return /* @__PURE__ */ jsx("div", {
-    className: cn(rowSurface({
-      interactive,
-      padding,
-      tone
-    }), className),
-    ...props
-  });
-}
-function ItemRow({ icon, title, subtitle, trailing, className, interactive = true, tone = "default" }) {
-  return /* @__PURE__ */ jsxs(RowSurface, {
-    tone,
-    padding: "md",
-    interactive,
-    className: cn("items-center gap-3", className),
-    children: [
-      icon ? /* @__PURE__ */ jsx("div", {
-        className: "flex size-8 shrink-0 items-center justify-center rounded-md border border-border/40 bg-background/60 text-foreground/70",
-        children: icon
-      }) : null,
-      /* @__PURE__ */ jsxs("div", {
-        className: "min-w-0 flex-1",
-        children: [/* @__PURE__ */ jsx("div", {
-          className: "truncate text-sm font-medium text-foreground",
-          children: title
-        }), subtitle ? /* @__PURE__ */ jsx("div", {
-          className: "mt-0.5 truncate text-xs text-muted-foreground",
-          children: subtitle
-        }) : null]
-      }),
-      trailing ? /* @__PURE__ */ jsx("div", {
-        className: "flex shrink-0 items-center gap-1.5",
-        children: trailing
-      }) : null
-    ]
-  });
-}
+// web/app/dist/server/assets/settings-dialog-DG9HEZeP.js
 function isFieldInvalid(value, attemptedSave, required = true) {
   return attemptedSave && required && value.trim().length === 0;
 }
@@ -1188,6 +1151,32 @@ function TextCredentialField({ attemptedSave, icon: Icon, inputType = "text", la
     })] })]
   });
 }
+function SettingsRow({ children, className, description, icon, label, trailing }) {
+  const control = trailing ?? children;
+  return /* @__PURE__ */ jsxs(Field, {
+    orientation: "horizontal",
+    className: cn("items-center justify-between gap-6 rounded-xl border border-border/60 bg-card p-4 transition-colors", className),
+    children: [/* @__PURE__ */ jsxs("div", {
+      className: "flex min-w-0 flex-1 items-start gap-3",
+      children: [icon ? /* @__PURE__ */ jsx("div", {
+        className: "flex size-8 shrink-0 items-center justify-center rounded-md border border-border/40 bg-background/60 text-foreground/70",
+        children: icon
+      }) : null, /* @__PURE__ */ jsxs("div", {
+        className: "min-w-0 flex-1",
+        children: [/* @__PURE__ */ jsx(FieldLabel, {
+          className: "text-sm font-medium text-foreground",
+          children: label
+        }), description ? /* @__PURE__ */ jsx(FieldDescription, {
+          className: "mt-0.5 text-xs text-muted-foreground leading-normal",
+          children: description
+        }) : null]
+      })]
+    }), control ? /* @__PURE__ */ jsx("div", {
+      className: "shrink-0",
+      children: control
+    }) : null]
+  });
+}
 var STATUS_COPY = {
   unconfigured: "Add a key below to turn this on.",
   unverified: "Checking the key\u2026",
@@ -1203,9 +1192,11 @@ function ComposerIntentSection({ enabled, keySource, status, onClearKey, onEnabl
   const [draftKey, setDraftKey] = useState2("");
   const [showKey, setShowKey] = useState2(false);
   const [attemptedSave, setAttemptedSave] = useState2(false);
+  const [saveError, setSaveError] = useState2(null);
   const [busy, setBusy] = useState2(false);
   const save = useCallback(async () => {
     setAttemptedSave(true);
+    setSaveError(null);
     if (!draftKey.trim() || !onSaveKey) return;
     setBusy(true);
     try {
@@ -1213,6 +1204,8 @@ function ComposerIntentSection({ enabled, keySource, status, onClearKey, onEnabl
       setDraftKey("");
       setShowKey(false);
       setAttemptedSave(false);
+    } catch (error) {
+      setSaveError(error instanceof Error ? error.message : "Failed to save key");
     } finally {
       setBusy(false);
     }
@@ -1220,9 +1213,12 @@ function ComposerIntentSection({ enabled, keySource, status, onClearKey, onEnabl
   const clear = useCallback(async () => {
     if (!onClearKey) return;
     setBusy(true);
+    setSaveError(null);
     try {
       await onClearKey();
       setDraftKey("");
+    } catch (error) {
+      setSaveError(error instanceof Error ? error.message : "Failed to remove key");
     } finally {
       setBusy(false);
     }
@@ -1230,9 +1226,9 @@ function ComposerIntentSection({ enabled, keySource, status, onClearKey, onEnabl
   const unavailable = status === "unconfigured" || status === "error";
   return /* @__PURE__ */ jsxs("div", {
     className: "flex flex-col gap-3",
-    children: [/* @__PURE__ */ jsx(ItemRow, {
-      title: "Describe a command",
-      subtitle: `Recognise when a message is really asking for a built-in command, like "compact this" or "show the shortcuts". Messages you send are shared with TypeSafe for classification only when this is on. ${STATUS_COPY[status]}`,
+    children: [/* @__PURE__ */ jsx(SettingsRow, {
+      label: "Describe a command",
+      description: `Recognise when a message is really asking for a built-in command, like "compact this" or "show the shortcuts". Messages you send are shared with TypeSafe for classification only when this is on. ${STATUS_COPY[status]}`,
       trailing: /* @__PURE__ */ jsx(Switch$1, {
         "aria-label": "Describe a command",
         checked: enabled,
@@ -1245,12 +1241,19 @@ function ComposerIntentSection({ enabled, keySource, status, onClearKey, onEnabl
         /* @__PURE__ */ jsx(SecretCredentialField, {
           attemptedSave,
           label: "TypeSafe API key",
-          onChange: setDraftKey,
+          onChange: (val) => {
+            setDraftKey(val);
+            if (saveError) setSaveError(null);
+          },
           onToggleVisibility: () => setShowKey((current) => !current),
           placeholder: "Paste your TypeSafe API key",
           showPassword: showKey,
           value: draftKey
         }),
+        saveError ? /* @__PURE__ */ jsx("p", {
+          className: "text-xs text-destructive",
+          children: saveError
+        }) : null,
         /* @__PURE__ */ jsx("p", {
           className: "text-xs text-muted-foreground",
           children: KEY_SOURCE_COPY[keySource]
@@ -1259,14 +1262,14 @@ function ComposerIntentSection({ enabled, keySource, status, onClearKey, onEnabl
           className: "flex items-center gap-2",
           children: [/* @__PURE__ */ jsx(Button$1, {
             type: "button",
-            size: "sm",
+            size: "compact",
             disabled: busy || !draftKey.trim(),
             onClick: () => void save(),
             children: "Save key"
           }), keySource === "settings" ? /* @__PURE__ */ jsx(Button$1, {
             type: "button",
             variant: "outline",
-            size: "sm",
+            size: "compact",
             disabled: busy,
             onClick: () => void clear(),
             children: "Remove key"
@@ -1276,6 +1279,44 @@ function ComposerIntentSection({ enabled, keySource, status, onClearKey, onEnabl
     })]
   });
 }
+function RowSurface({ className, interactive, padding, tone, ...props }) {
+  return /* @__PURE__ */ jsx("div", {
+    className: cn(rowSurface({
+      interactive,
+      padding,
+      tone
+    }), className),
+    ...props
+  });
+}
+function ItemRow({ icon, title, subtitle, trailing, className, interactive = true, tone = "default", truncateSubtitle = true, truncateTitle = true }) {
+  return /* @__PURE__ */ jsxs(RowSurface, {
+    tone,
+    padding: "md",
+    interactive,
+    className: cn("items-center gap-3", className),
+    children: [
+      icon ? /* @__PURE__ */ jsx("div", {
+        className: "flex size-8 shrink-0 items-center justify-center rounded-md border border-border/40 bg-background/60 text-foreground/70",
+        children: icon
+      }) : null,
+      /* @__PURE__ */ jsxs("div", {
+        className: "min-w-0 flex-1",
+        children: [/* @__PURE__ */ jsx("div", {
+          className: cn("text-sm font-medium text-foreground", truncateTitle && "truncate"),
+          children: title
+        }), subtitle ? /* @__PURE__ */ jsx("div", {
+          className: cn("mt-0.5 text-xs text-muted-foreground", truncateSubtitle ? "truncate" : "leading-normal"),
+          children: subtitle
+        }) : null]
+      }),
+      trailing ? /* @__PURE__ */ jsx("div", {
+        className: "flex shrink-0 items-center gap-1.5",
+        children: trailing
+      }) : null
+    ]
+  });
+}
 function SettingsPane({ actions, children, description, title }) {
   return /* @__PURE__ */ jsxs("div", {
     className: "flex flex-col gap-4",
@@ -1304,7 +1345,7 @@ function SettingsCommitActions({ dirty, disabled, onRevert, onSave, saving }) {
   return /* @__PURE__ */ jsxs(Fragment$1, { children: [dirty ? /* @__PURE__ */ jsx(Button$1, {
     type: "button",
     variant: "ghost",
-    size: "icon-sm",
+    size: "icon-compact",
     className: "text-muted-foreground transition-transform active:scale-[0.96]",
     disabled: disabled || saving,
     onClick: onRevert,
@@ -1313,7 +1354,7 @@ function SettingsCommitActions({ dirty, disabled, onRevert, onSave, saving }) {
   }) : null, /* @__PURE__ */ jsxs(Button$1, {
     type: "button",
     variant: "outline",
-    size: "sm",
+    size: "compact",
     className: cn(COMPACT_ACTION_BUTTON_CLASS, "transition-transform active:scale-[0.96]", dirty && "border-primary/30 text-primary"),
     disabled: !dirty || disabled || saving,
     onClick: onSave,
@@ -1549,7 +1590,7 @@ function ProviderOAuthSignIn({ onConfigured, onOAuthLogin, provider }) {
         }) : null,
         authUrl ? /* @__PURE__ */ jsxs(Button$1, {
           type: "button",
-          size: "sm",
+          size: "compact",
           onClick: () => {
             window.open(authUrl, "_blank", "noopener,noreferrer");
           },
@@ -1575,7 +1616,7 @@ function ProviderOAuthSignIn({ onConfigured, onOAuthLogin, provider }) {
               className: "flex justify-end",
               children: /* @__PURE__ */ jsxs(Button$1, {
                 type: "button",
-                size: "sm",
+                size: "compact",
                 disabled: busy || !prompt.allowEmpty && !promptAnswer.trim(),
                 onClick: () => {
                   submitPrompt();
@@ -1590,7 +1631,7 @@ function ProviderOAuthSignIn({ onConfigured, onOAuthLogin, provider }) {
           children: /* @__PURE__ */ jsx(Button$1, {
             type: "button",
             variant: "ghost",
-            size: "sm",
+            size: "compact",
             disabled: busy,
             onClick: () => {
               cancel();
@@ -1614,7 +1655,7 @@ function ProviderOAuthSignIn({ onConfigured, onOAuthLogin, provider }) {
         className: "flex justify-end",
         children: /* @__PURE__ */ jsxs(Button$1, {
           type: "button",
-          size: "sm",
+          size: "compact",
           disabled: busy || !canStart,
           onClick: () => {
             start();
@@ -1757,7 +1798,7 @@ function McpConnectionsSection({ connections, isLoading, isPending, onOAuth, onR
     description: "Connect built-in and user MCP servers. Tokens stay on the server; this list only shows status and environment-variable names.",
     actions: /* @__PURE__ */ jsxs(Button$1, {
       type: "button",
-      size: "sm",
+      size: "compact",
       variant: "outline",
       disabled: isPending || adding,
       onClick: () => setAdding(true),
@@ -1843,13 +1884,13 @@ function McpConnectionsSection({ connections, isLoading, isPending, onOAuth, onR
             className: "flex justify-end gap-2",
             children: [/* @__PURE__ */ jsx(Button$1, {
               type: "button",
-              size: "sm",
+              size: "compact",
               variant: "ghost",
               onClick: resetAddForm,
               children: "Cancel"
             }), /* @__PURE__ */ jsxs(Button$1, {
               type: "button",
-              size: "sm",
+              size: "compact",
               disabled: isPending || !name.trim(),
               onClick: () => void handleAdd(),
               children: [isPending ? /* @__PURE__ */ jsx(Spinner, { "data-icon": "inline-start" }) : null, "Save"]
@@ -1874,7 +1915,7 @@ function McpConnectionsSection({ connections, isLoading, isPending, onOAuth, onR
                 className: "flex items-center gap-1.5",
                 children: [connection.usesOAuth && connection.status !== "needs_auth" ? /* @__PURE__ */ jsx(Button$1, {
                   type: "button",
-                  size: "sm",
+                  size: "compact",
                   variant: "ghost",
                   disabled: isPending || !onOAuth,
                   onClick: () => {
@@ -1883,7 +1924,7 @@ function McpConnectionsSection({ connections, isLoading, isPending, onOAuth, onR
                   children: "Sign out"
                 }) : null, connection.source === "user" ? confirmRemove === connection.name ? /* @__PURE__ */ jsx(Button$1, {
                   type: "button",
-                  size: "sm",
+                  size: "compact",
                   variant: "destructive",
                   disabled: isPending,
                   onClick: () => {
@@ -1892,7 +1933,7 @@ function McpConnectionsSection({ connections, isLoading, isPending, onOAuth, onR
                   children: "Confirm remove"
                 }) : /* @__PURE__ */ jsx(Button$1, {
                   type: "button",
-                  size: "sm",
+                  size: "compact",
                   variant: "ghost",
                   disabled: isPending || !onRemove,
                   "aria-label": `Remove ${connection.name}`,
@@ -2070,7 +2111,7 @@ function AddModelsDialog({ configuredProviderIds, discoverableProviderIds, disco
             return /* @__PURE__ */ jsxs(Button$1, {
               type: "button",
               variant: "outline",
-              size: "sm",
+              size: "compact",
               disabled: discoveringProviderId !== null,
               onClick: () => {
                 onDiscoverProvider(providerId);
@@ -2158,12 +2199,12 @@ function AddModelsDialog({ configuredProviderIds, discoverableProviderIds, disco
           children: [/* @__PURE__ */ jsx(Button$1, {
             type: "button",
             variant: "ghost",
-            size: "sm",
+            size: "compact",
             onClick: () => onOpenChange(false),
             children: "Cancel"
           }), /* @__PURE__ */ jsxs(Button$1, {
             type: "button",
-            size: "sm",
+            size: "compact",
             disabled: selectedKeys.size === 0,
             onClick: confirmAdd,
             children: ["Add ", selectedKeys.size > 0 ? /* @__PURE__ */ jsxs("span", {
@@ -2286,7 +2327,7 @@ function ModelDefaultsSection({ draft, discoveringProviderId, modelDirty, modelF
         }), /* @__PURE__ */ jsxs(Button$1, {
           type: "button",
           variant: "outline",
-          size: "sm",
+          size: "compact",
           disabled,
           onClick: openAddDialog,
           children: [/* @__PURE__ */ jsx(Plus, { "data-icon": "inline-start" }), "Add models"]
@@ -2303,7 +2344,7 @@ function ModelDefaultsSection({ draft, discoveringProviderId, modelDirty, modelF
           }), !normalizedFilter ? /* @__PURE__ */ jsxs(Button$1, {
             type: "button",
             variant: "outline",
-            size: "sm",
+            size: "compact",
             disabled,
             onClick: openAddDialog,
             children: [/* @__PURE__ */ jsx(Plus, { "data-icon": "inline-start" }), "Add models"]
@@ -2325,7 +2366,7 @@ function ModelDefaultsSection({ draft, discoveringProviderId, modelDirty, modelF
               }) : onSetDefaultModel ? /* @__PURE__ */ jsxs(Button$1, {
                 type: "button",
                 variant: "ghost",
-                size: "sm",
+                size: "compact",
                 className: cn(HIT_AREA_EXPAND_DENSE_CLASS, "h-7 px-2 text-xs text-muted-foreground transition-[background-color,color,transform] duration-150 active:scale-[0.96]"),
                 disabled,
                 "aria-label": `Set ${model.name} as default`,
@@ -2334,7 +2375,7 @@ function ModelDefaultsSection({ draft, discoveringProviderId, modelDirty, modelF
               }) : null, /* @__PURE__ */ jsxs(Button$1, {
                 type: "button",
                 variant: "ghost",
-                size: "sm",
+                size: "compact",
                 className: cn(HIT_AREA_EXPAND_DENSE_CLASS, "h-7 px-2 text-xs text-muted-foreground transition-[background-color,color,transform] duration-150 hover:text-destructive active:scale-[0.96]"),
                 disabled,
                 "aria-label": `Remove ${model.name}`,
@@ -2691,7 +2732,7 @@ function AddProviderPickerPanel({ addPickerQuery, credentialProvidersLength, fil
         children: [/* @__PURE__ */ jsx(Button$1, {
           type: "button",
           variant: "ghost",
-          size: "icon-sm",
+          size: "icon-compact",
           "aria-label": "Back to providers",
           onClick: onClose,
           children: /* @__PURE__ */ jsx(ArrowLeft, {})
@@ -2754,7 +2795,7 @@ function AddProviderOAuthPanel({ onBack, onConfigured, onOAuthLogin, provider })
       children: [/* @__PURE__ */ jsx(Button$1, {
         type: "button",
         variant: "ghost",
-        size: "icon-sm",
+        size: "icon-compact",
         "aria-label": "Back to provider list",
         onClick: onBack,
         children: /* @__PURE__ */ jsx(ArrowLeft, {})
@@ -2791,7 +2832,7 @@ function AddProviderEditorPanel({ provider, api, apiKey, baseUrl, modelId, model
         children: [/* @__PURE__ */ jsx(Button$1, {
           type: "button",
           variant: "ghost",
-          size: "icon-sm",
+          size: "icon-compact",
           "aria-label": "Back to provider list",
           onClick: onBack,
           children: /* @__PURE__ */ jsx(ArrowLeft, {})
@@ -2838,12 +2879,12 @@ function AddProviderEditorPanel({ provider, api, apiKey, baseUrl, modelId, model
         children: [/* @__PURE__ */ jsx(Button$1, {
           type: "button",
           variant: "ghost",
-          size: "sm",
+          size: "compact",
           onClick: onCancel,
           children: "Cancel"
         }), /* @__PURE__ */ jsxs(Button$1, {
           type: "button",
-          size: "sm",
+          size: "compact",
           disabled: isPending || !canSave,
           onClick: onSave,
           children: [isPending ? /* @__PURE__ */ jsx(Spinner, { "data-icon": "inline-start" }) : null, "Save"]
@@ -2939,7 +2980,7 @@ function ActiveProviderList({ providers, editingProvider, form, operation, actio
             children: [/* @__PURE__ */ jsxs(Button$1, {
               type: "button",
               variant: "ghost",
-              size: "sm",
+              size: "compact",
               className: cn(HIT_AREA_EXPAND_DENSE_CLASS, "h-7 px-2 text-xs text-muted-foreground transition-[background-color,color,transform] duration-150 hover:text-destructive active:scale-[0.96]"),
               disabled: isPending || !canRemove,
               "aria-label": `Remove ${provider.name}`,
@@ -2948,7 +2989,7 @@ function ActiveProviderList({ providers, editingProvider, form, operation, actio
             }), /* @__PURE__ */ jsxs(Button$1, {
               type: "button",
               variant: "ghost",
-              size: "sm",
+              size: "compact",
               className: cn(HIT_AREA_EXPAND_DENSE_CLASS, "h-7 px-2 text-xs transition-[background-color,transform] duration-150 active:scale-[0.96]"),
               disabled: isPending,
               onClick: () => {
@@ -3001,7 +3042,7 @@ function ActiveProviderList({ providers, editingProvider, form, operation, actio
               className: "flex items-center justify-end",
               children: /* @__PURE__ */ jsxs(Button$1, {
                 type: "button",
-                size: "sm",
+                size: "compact",
                 disabled: isPending || !canSave,
                 onClick: () => onSave(provider.id),
                 children: [isPending ? /* @__PURE__ */ jsx(Spinner, { "data-icon": "inline-start" }) : null, "Save"]
@@ -3111,7 +3152,7 @@ function ProviderCredentialsSection({ isLoading, isPending, onOAuthLogin, onRemo
         }), /* @__PURE__ */ jsxs(Button$1, {
           type: "button",
           variant: "outline",
-          size: "sm",
+          size: "compact",
           disabled: isLoading || credentialProviders.length === 0,
           onClick: openAddPicker,
           children: [/* @__PURE__ */ jsx(Plus, { "data-icon": "inline-start" }), "Add provider"]
@@ -3127,7 +3168,7 @@ function ProviderCredentialsSection({ isLoading, isPending, onOAuthLogin, onRemo
         }), /* @__PURE__ */ jsxs(Button$1, {
           type: "button",
           variant: "outline",
-          size: "sm",
+          size: "compact",
           disabled: credentialProviders.length === 0,
           onClick: openAddPicker,
           children: [/* @__PURE__ */ jsx(Plus, { "data-icon": "inline-start" }), "Add provider"]
@@ -3572,7 +3613,7 @@ function CatalogValueList({ addLabel, catalog, onChange, placeholder, values })
         trailing: /* @__PURE__ */ jsx(Button$1, {
           type: "button",
           variant: "ghost",
-          size: "icon-xs",
+          size: "icon-compact",
           "aria-label": `Remove ${value}`,
           onClick: () => onChange(values.filter((entry) => entry !== value)),
           children: /* @__PURE__ */ jsx(Trash, {})
@@ -3772,7 +3813,7 @@ function SandboxProviderSection({ isLoading, isPending, onUpdateProvider, provid
         trailing: /* @__PURE__ */ jsx(Button$1, {
           type: "button",
           variant: "ghost",
-          size: "sm",
+          size: "compact",
           className: cn(HIT_AREA_EXPAND_DENSE_CLASS, "h-7 px-2 text-xs transition-[background-color,transform] duration-150 active:scale-[0.96]"),
           onClick: () => {
             if (editing) {
@@ -3821,7 +3862,7 @@ function SandboxProviderSection({ isLoading, isPending, onUpdateProvider, provid
             className: "flex items-center justify-end",
             children: /* @__PURE__ */ jsxs(Button$1, {
               type: "button",
-              size: "sm",
+              size: "compact",
               disabled: isPending || !canSave,
               onClick: () => void handleSave(),
               children: [isPending ? /* @__PURE__ */ jsx(Spinner, { "data-icon": "inline-start" }) : null, "Save"]
@@ -4018,48 +4059,78 @@ function BreadcrumbSeparator({ children, className, ...props }) {
     children: children ?? /* @__PURE__ */ jsx(ChevronRight, {})
   });
 }
-function ScrollArea$1({ className, children, ...props }) {
-  return /* @__PURE__ */ jsxs(index_parts_exports.Root, {
-    "data-slot": "scroll-area",
-    className: cn("relative", className),
-    ...props,
-    children: [
-      /* @__PURE__ */ jsx(index_parts_exports.Viewport, {
+function useTouchPrimary() {
+  const [isTouchPrimary, setIsTouchPrimary] = useState2(false);
+  useEffect2(() => {
+    if (typeof window === "undefined") return;
+    const controller = new AbortController();
+    const { signal } = controller;
+    const handleTouch = () => {
+      const hasTouch = "ontouchstart" in window || navigator.maxTouchPoints > 0;
+      const prefersTouch = window.matchMedia("(pointer: coarse)").matches;
+      setIsTouchPrimary(hasTouch && prefersTouch);
+    };
+    window.matchMedia("(pointer: coarse)").addEventListener("change", handleTouch, { signal });
+    window.addEventListener("pointerdown", handleTouch, { signal });
+    handleTouch();
+    return () => controller.abort();
+  }, []);
+  return isTouchPrimary;
+}
+var ScrollAreaContext = createContext4(false);
+var ScrollArea$1 = forwardRef7(({ className, children, viewportClassName, orientation: orientation2 = "vertical", ...props }, ref) => {
+  const isTouch = useTouchPrimary();
+  return /* @__PURE__ */ jsx(ScrollAreaContext.Provider, {
+    value: isTouch,
+    children: isTouch ? /* @__PURE__ */ jsx("div", {
+      ref,
+      role: "group",
+      "data-slot": "scroll-area",
+      "aria-roledescription": "scroll area",
+      className: cn("relative overflow-hidden", className),
+      ...props,
+      children: /* @__PURE__ */ jsx("div", {
         "data-slot": "scroll-area-viewport",
-        className: "size-full rounded-[inherit] transition-[color,box-shadow] outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-1",
+        className: cn("size-full rounded-[inherit]", orientation2 === "vertical" && "overflow-y-auto", orientation2 === "horizontal" && "overflow-x-auto", orientation2 === "both" && "overflow-auto", viewportClassName),
+        tabIndex: 0,
         children
-      }),
-      /* @__PURE__ */ jsx(ScrollBar, {}),
-      /* @__PURE__ */ jsx(index_parts_exports.Corner, {})
-    ]
+      })
+    }) : /* @__PURE__ */ jsxs(index_parts_exports.Root, {
+      ref,
+      "data-slot": "scroll-area",
+      className: cn("relative overflow-hidden", className),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx(index_parts_exports.Viewport, {
+          "data-slot": "scroll-area-viewport",
+          className: cn("size-full rounded-[inherit]", viewportClassName),
+          children: /* @__PURE__ */ jsx(index_parts_exports.Content, { children })
+        }),
+        orientation2 !== "horizontal" && /* @__PURE__ */ jsx(ScrollBar, { orientation: "vertical" }),
+        orientation2 !== "vertical" && /* @__PURE__ */ jsx(ScrollBar, { orientation: "horizontal" }),
+        orientation2 === "both" && /* @__PURE__ */ jsx(index_parts_exports.Corner, {})
+      ]
+    })
   });
-}
-function ScrollBar({ className, orientation: orientation2 = "vertical", ...props }) {
+});
+ScrollArea$1.displayName = "ScrollArea";
+var ScrollBar = forwardRef7(({ className, orientation: orientation2 = "vertical", ...props }, ref) => {
+  const isTouch = useContext4(ScrollAreaContext);
+  const shape = useShape();
+  if (isTouch) return null;
   return /* @__PURE__ */ jsx(index_parts_exports.Scrollbar, {
-    "data-slot": "scroll-area-scrollbar",
-    "data-orientation": orientation2,
+    ref,
     orientation: orientation2,
-    className: cn("flex touch-none p-px transition-colors select-none data-horizontal:h-2.5 data-horizontal:flex-col data-horizontal:border-t data-horizontal:border-t-transparent data-vertical:h-full data-vertical:w-2.5 data-vertical:border-l data-vertical:border-l-transparent", className),
+    "data-slot": "scroll-area-scrollbar",
+    className: cn("group/scrollbar absolute z-20 flex touch-none select-none", "opacity-0 transition-opacity duration-120 ease-out delay-160", "data-[hovering]:duration-160 data-[scrolling]:duration-160", "data-[hovering]:opacity-100 data-[scrolling]:opacity-100", "data-[hovering]:delay-0 data-[scrolling]:delay-0", orientation2 === "vertical" && "top-0 right-0 h-full w-2.5", orientation2 === "horizontal" && "bottom-0 left-0 h-2.5 w-full flex-col", className),
     ...props,
     children: /* @__PURE__ */ jsx(index_parts_exports.Thumb, {
       "data-slot": "scroll-area-thumb",
-      className: "relative flex-1 rounded-full bg-border"
+      className: cn("relative bg-[rgb(var(--overlay)/0.08)] transition-[background-color,width,height] duration-160 ease-in-out", "group-hover/scrollbar:bg-[rgb(var(--overlay)/0.12)] active:!bg-[rgb(var(--overlay)/0.16)]", shape.bg, orientation2 === "vertical" && "mx-auto my-1 w-1 -translate-x-0.5 h-[var(--scroll-area-thumb-height)] group-hover/scrollbar:w-1.5", orientation2 === "horizontal" && "my-auto mx-1 h-1 -translate-y-0.5 w-[var(--scroll-area-thumb-width)] group-hover/scrollbar:h-1.5")
     })
   });
-}
-function PreferenceRow({ children, description, label }) {
-  return /* @__PURE__ */ jsxs(Field, {
-    orientation: "horizontal",
-    className: "items-center justify-between gap-6 rounded-xl border p-4",
-    children: [/* @__PURE__ */ jsxs("div", {
-      className: "min-w-0",
-      children: [/* @__PURE__ */ jsx(FieldLabel, { children: label }), /* @__PURE__ */ jsx(FieldDescription, { children: description })]
-    }), /* @__PURE__ */ jsx("div", {
-      className: "shrink-0",
-      children
-    })]
-  });
-}
+});
+ScrollBar.displayName = "ScrollBar";
 function useSettingsForm() {
   const { isLoadingMcp, isLoadingProviders, isUpdatingMcp, isUpdatingProvider, mcpConnections = [], modelCatalog, onDiscoverModels, onMcpOAuth, onOAuthLogin, onRemoveMcp, onRemoveProvider, onThemePreferenceChange, onUpdateMcp, onUpdateProvider, providers = [], saveSettings, settings, settingsLoading, themePreference } = useSettingsActionsContext();
   const { models, resources } = useChatPanelDataContext();
@@ -4259,7 +4330,7 @@ function SettingsDialogPaneContent({ activeTab, composerIntent, form, onComposer
           onThemePreferenceChange,
           themePreference
         }),
-        /* @__PURE__ */ jsx(PreferenceRow, {
+        /* @__PURE__ */ jsx(SettingsRow, {
           label: "Density",
           description: "Adjust spacing across chat and panels.",
           children: /* @__PURE__ */ jsx(Select$1, {
@@ -4275,7 +4346,7 @@ function SettingsDialogPaneContent({ activeTab, composerIntent, form, onComposer
             }]
           })
         }),
-        /* @__PURE__ */ jsx(PreferenceRow, {
+        /* @__PURE__ */ jsx(SettingsRow, {
           label: "Motion",
           description: "Respect the system setting or reduce UI motion.",
           children: /* @__PURE__ */ jsx(Select$1, {
@@ -4303,7 +4374,7 @@ function SettingsDialogPaneContent({ activeTab, composerIntent, form, onComposer
           className: "text-sm text-muted-foreground",
           children: "Control transcript behavior."
         })] }),
-        /* @__PURE__ */ jsx(PreferenceRow, {
+        /* @__PURE__ */ jsx(SettingsRow, {
           label: "Streaming transcript",
           description: "Follow new output or preserve the reading position.",
           children: /* @__PURE__ */ jsx(Select$1, {
@@ -4402,7 +4473,7 @@ function SettingsDialogPaneContent({ activeTab, composerIntent, form, onComposer
           className: "text-sm text-muted-foreground",
           children: "Set local conversation preferences. Provider and workspace configuration remains Fleet Prime-owned."
         })] }),
-        /* @__PURE__ */ jsx(PreferenceRow, {
+        /* @__PURE__ */ jsx(SettingsRow, {
           label: "Confirm session deletion",
           description: "Require confirmation before deleting a saved conversation.",
           children: /* @__PURE__ */ jsx(Switch$1, {