@agent-native/core 0.117.2 → 0.118.0

package/dist/client/settings/SettingsPanel.js

@@ -1,7 +1,9 @@
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import * as SelectPrimitive from "@radix-ui/react-select";
+import { Checkbox, Picker, TextField, } from "@agent-native/toolkit/design-system";
+import { Button as ToolkitButton } from "@agent-native/toolkit/ui/button";
 import { IconChevronDown, IconChevronRight, IconCheck, IconExternalLink, IconBrain, IconHierarchy2, IconBrowser, IconGitBranch, IconCloud, IconDatabase, IconShield, IconPlugConnected, IconTopologyRing2, IconLoader2, IconUpload, IconCoin, IconMail, IconKey, IconMicrophone, IconEyeOff, IconBolt, IconGauge, IconUserCircle, IconApps, IconUsersGroup, } from "@tabler/icons-react";
-import { Suspense, lazy, useState, useEffect, useCallback, useMemo, useRef, } from "react";
+import React, { Suspense, lazy, useState, useEffect, useCallback, useMemo, useRef, } from "react";
+import { Link } from "react-router";
 import { PROVIDER_ENV_PLACEHOLDERS } from "../../agent/engine/provider-env-vars.js";
 import { saveAgentEngineProviderSettings } from "../agent-engine-key.js";
 import { agentNativePath } from "../api-path.js";
@@ -15,7 +17,7 @@ import { uploadAvatar, useAvatarUrl } from "../use-avatar.js";
 import { useDevMode } from "../use-dev-mode.js";
 import { useSession } from "../use-session.js";
 import { cn } from "../utils.js";
-import { AGENT_SETTINGS_SECTIONS, ALL_SETTINGS_SECTIONS, CONNECTION_SETTINGS_SECTIONS, SETTINGS_SECTION_IDS, WORKSPACE_SETTINGS_SECTIONS, getAgentSettingsSearchTabs, } from "./agent-settings-search.js";
+import { AGENT_SETTINGS_SECTIONS, ALL_SETTINGS_SECTIONS, CONNECTION_SETTINGS_SECTIONS, WORKSPACE_SETTINGS_SECTIONS, getAgentSettingsSearchTabs, } from "./agent-settings-search.js";
 import { AgentsSection } from "./AgentsSection.js";
 import { AutomationsSection } from "./AutomationsSection.js";
 import { DemoModeSection } from "./DemoModeSection.js";
@@ -23,7 +25,10 @@ import { SecretsSection } from "./SecretsSection.js";
 import { SettingsSection, SettingsSurfaceProvider, useSettingsSurface, } from "./SettingsSection.js";
 import { UsageSection } from "./UsageSection.js";
 import { useBuilderConnectFlow, useBuilderStatus, } from "./useBuilderStatus.js";
+import { settingsSectionDomId, useSettingsPanelController, } from "./useSettingsPanelController.js";
 import { VoiceTranscriptionSection } from "./VoiceTranscriptionSection.js";
+const Button = React.forwardRef(({ className, ...props }, ref) => (_jsx(ToolkitButton, { ref: ref, variant: "ghost", className: cn("h-auto p-0 hover:bg-transparent hover:text-inherit active:scale-100 [&_svg]:!size-auto", className), ...props })));
+Button.displayName = "SettingsPrimitiveButton";
 const IntegrationsPanel = lazy(() => import("../integrations/IntegrationsPanel.js").then((m) => ({
     default: m.IntegrationsPanel,
 })));
@@ -69,8 +74,15 @@ function pillButtonClass(isPage, tone = "outline") {
 function SettingsSelect({ label, labelAdornment, value, options, onValueChange, disabled = false, }) {
     const isPage = useSettingsSurface() === "page";
     const controlStyle = isPage ? CONTROL_STYLE_PAGE : CONTROL_STYLE;
-    const selected = options.find((option) => option.value === value);
-    return (_jsxs("div", { className: "space-y-1.5", children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsx("p", { className: fieldLabelClass(isPage), children: label }), labelAdornment] }), _jsxs(SelectPrimitive.Root, { value: value, onValueChange: onValueChange, disabled: disabled, children: [_jsxs(SelectPrimitive.Trigger, { className: cn("flex w-full items-center justify-between rounded-md border border-border bg-background px-3 text-start text-foreground outline-none transition-colors hover:bg-accent/40 data-[placeholder]:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-60", isPage ? "h-10 text-sm" : "h-9 text-[12px]"), "aria-label": label, style: controlStyle, children: [_jsx(SelectPrimitive.Value, { children: selected?.label ?? value }), _jsx(SelectPrimitive.Icon, { asChild: true, children: _jsx(IconChevronDown, { size: 16, className: "text-muted-foreground" }) })] }), _jsx(SelectPrimitive.Portal, { children: _jsx(SelectPrimitive.Content, { position: "popper", sideOffset: 6, className: "z-[9999] w-[var(--radix-select-trigger-width)] overflow-hidden rounded-lg border border-border bg-popover shadow-lg", children: _jsx(SelectPrimitive.Viewport, { className: "p-1", children: options.map((option) => (_jsxs(SelectPrimitive.Item, { value: option.value, className: cn("relative flex w-full cursor-pointer select-none items-start gap-2 rounded-md px-8 outline-none data-[highlighted]:bg-accent/60 data-[state=checked]:bg-accent/40", isPage ? "py-2.5 text-sm" : "py-2.5 text-[12px]"), style: controlStyle, children: [_jsx("span", { className: "absolute start-2 top-2.5 flex h-4 w-4 items-center justify-center text-muted-foreground", children: _jsx(SelectPrimitive.ItemIndicator, { children: _jsx(IconCheck, { size: 14 }) }) }), _jsxs("div", { className: "flex min-w-0 flex-col", children: [_jsx(SelectPrimitive.ItemText, { children: _jsx("span", { className: "text-foreground", children: option.label }) }), option.description ? (_jsx("span", { className: cn("mt-0.5 leading-relaxed text-muted-foreground", isPage ? "text-xs" : "text-[11px]"), children: option.description })) : null] })] }, option.value))) }) }) })] })] }));
+    return (_jsxs("div", { className: "space-y-1.5", children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsx("p", { className: fieldLabelClass(isPage), children: label }), labelAdornment] }), _jsx(Picker, { mode: "select", options: options.map((option) => ({
+                    value: option.value,
+                    label: option.label,
+                    description: option.description,
+                    textValue: option.label,
+                })), value: value, onChange: (next) => {
+                    if (next != null)
+                        onValueChange(String(next));
+                }, disabled: disabled, "aria-label": label, placeholder: value, style: controlStyle, className: cn("w-full text-start text-foreground", isPage ? "text-sm" : "text-[12px]") })] }));
 }
 // ─── Disconnect button for the Builder card's connected state ───────────────
 //
@@ -166,9 +178,9 @@ function DisconnectBuilderButton() {
     if (status?.credentialSource === "env")
         return null;
     if (phase === "armed") {
-        return (_jsxs(_Fragment, { children: [_jsx("button", { type: "button", onClick: handleDisconnectClick, className: "inline-flex items-center gap-1 rounded border border-destructive/40 bg-destructive/10 px-2 py-0.5 text-[10px] font-medium text-destructive hover:bg-destructive/20", children: "Confirm disconnect" }), _jsx("button", { type: "button", onClick: handleCancel, className: "inline-flex items-center gap-1 rounded border border-border px-2 py-0.5 text-[10px] text-muted-foreground hover:text-foreground hover:bg-accent/40", children: "Cancel" })] }));
+        return (_jsxs(_Fragment, { children: [_jsx(Button, { type: "button", intent: "danger", emphasis: "solid", onClick: handleDisconnectClick, className: "inline-flex items-center gap-1 rounded border border-destructive/40 bg-destructive/10 px-2 py-0.5 text-[10px] font-medium text-destructive hover:bg-destructive/20", children: "Confirm disconnect" }), _jsx(Button, { type: "button", intent: "neutral", emphasis: "outline", onClick: handleCancel, className: "inline-flex items-center gap-1 rounded border border-border px-2 py-0.5 text-[10px] text-muted-foreground hover:text-foreground hover:bg-accent/40", children: "Cancel" })] }));
     }
-    return (_jsxs(_Fragment, { children: [_jsx("button", { type: "button", onClick: handleDisconnectClick, disabled: phase === "busy", className: "inline-flex items-center gap-1 rounded border border-border px-2 py-0.5 text-[10px] text-muted-foreground hover:text-foreground hover:bg-accent/40 disabled:opacity-60 disabled:cursor-wait", "aria-busy": phase === "busy", children: phase === "busy" ? (_jsxs(_Fragment, { children: [_jsx(IconLoader2, { size: 10, className: "animate-spin" }), "Disconnecting\u2026"] })) : ("Disconnect") }), err && _jsx("span", { className: "text-[10px] text-destructive", children: err })] }));
+    return (_jsxs(_Fragment, { children: [_jsx(Button, { type: "button", intent: "danger", emphasis: "outline", onClick: handleDisconnectClick, disabled: phase === "busy", className: "inline-flex items-center gap-1 rounded border border-border px-2 py-0.5 text-[10px] text-muted-foreground hover:text-foreground hover:bg-accent/40 disabled:opacity-60 disabled:cursor-wait", "aria-busy": phase === "busy", children: phase === "busy" ? (_jsxs(_Fragment, { children: [_jsx(IconLoader2, { size: 10, className: "animate-spin" }), "Disconnecting\u2026"] })) : ("Disconnect") }), err && _jsx("span", { className: "text-[10px] text-destructive", children: err })] }));
 }
 // ─── "Connect Builder.io" card (shared across all sections) ─────────────────
 function UseBuilderCard({ builderFlow, connectUrl, connected, orgName, envManaged, credentialSource, trackingSource = "settings_panel_builder_card", trackingFlow = "connect_llm", label = "Connect Builder.io", subtitle = "Free credits to start — no API key needed.", dim, }) {
@@ -181,7 +193,7 @@ function UseBuilderCard({ builderFlow, connectUrl, connected, orgName, envManage
     if (effectiveConnected) {
         return (_jsxs("div", { className: cn("rounded-md border border-border", isPage ? "px-3.5 py-3" : "px-2.5 py-2", bgClass), children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsx("div", { className: cn("font-medium text-foreground", titleCls), children: "Builder.io" }), _jsxs("span", { className: cn("flex items-center gap-1 text-green-500", bodyCls), children: [_jsx(IconCheck, { size: isPage ? 14 : 10 }), "Connected"] })] }), effectiveOrgName && (_jsx("p", { className: cn("text-muted-foreground mt-0.5", bodyCls), children: effectiveOrgName })), envManaged ? (_jsx("p", { className: cn("text-muted-foreground mt-1", bodyCls), children: credentialSource === "env"
                         ? "Deployment fallback is available. Connect your own account to override it."
-                        : "Using your connected Builder account. Deployment fallback is still available." })) : null, connectUrl || credentialSource !== "env" ? (_jsxs("div", { className: "flex items-center gap-2 mt-2.5", children: [connectUrl && (_jsxs("button", { type: "button", onClick: () => builderFlow.start({ trackingSource, trackingFlow }), disabled: builderFlow.connecting, className: cn(pillButtonClass(isPage, "ghost"), "no-underline"), children: [builderFlow.connecting
+                        : "Using your connected Builder account. Deployment fallback is still available." })) : null, connectUrl || credentialSource !== "env" ? (_jsxs("div", { className: "flex items-center gap-2 mt-2.5", children: [connectUrl && (_jsxs(Button, { type: "button", intent: "neutral", emphasis: "ghost", onClick: () => builderFlow.start({ trackingSource, trackingFlow }), disabled: builderFlow.connecting, className: cn(pillButtonClass(isPage, "ghost"), "no-underline"), children: [builderFlow.connecting
                                     ? "Connecting..."
                                     : credentialSource === "env"
                                         ? "Connect account"
@@ -189,7 +201,7 @@ function UseBuilderCard({ builderFlow, connectUrl, connected, orgName, envManage
     }
     if (!connectUrl)
         return null;
-    return (_jsx("button", { type: "button", onClick: () => builderFlow.start({ trackingSource, trackingFlow }), disabled: builderFlow.connecting, className: cn("block w-full rounded-md border border-border text-start no-underline bg-gradient-to-br from-teal-500/10 via-transparent to-transparent hover:border-foreground/30 transition-colors disabled:cursor-wait disabled:opacity-70", isPage ? "px-4 py-3.5" : "px-3 py-3"), children: _jsxs("div", { className: "flex items-start gap-2.5", children: [_jsx("div", { className: cn("flex shrink-0 items-center justify-center rounded-md bg-foreground text-background", isPage ? "h-8 w-8" : "h-7 w-7"), children: _jsx(BuilderBMark, { className: isPage ? "h-4 w-4" : "h-3.5 w-3.5" }) }), _jsxs("div", { className: "flex-1 min-w-0", children: [_jsxs("div", { className: "flex items-center gap-1.5 flex-wrap", children: [_jsx("span", { className: cn("font-semibold text-foreground", isPage ? "text-sm" : "text-[12px]"), children: builderFlow.connecting ? "Connecting Builder.io..." : label }), builderFlow.connecting && (_jsx(IconLoader2, { size: isPage ? 14 : 12, className: "shrink-0 animate-spin text-muted-foreground" }))] }), _jsx("p", { className: cn("text-muted-foreground mt-0.5 leading-snug", isPage ? "text-xs" : "text-[10.5px]"), children: subtitle }), builderFlow.error && (_jsx("p", { className: cn("mt-1 text-destructive", bodyCls), children: builderFlow.error }))] }), _jsx(IconExternalLink, { size: isPage ? 14 : 12, className: "shrink-0 text-muted-foreground mt-0.5" })] }) }));
+    return (_jsx(Button, { type: "button", onClick: () => builderFlow.start({ trackingSource, trackingFlow }), disabled: builderFlow.connecting, className: cn("block w-full rounded-md border border-border text-start no-underline bg-gradient-to-br from-teal-500/10 via-transparent to-transparent hover:border-foreground/30 transition-colors disabled:cursor-wait disabled:opacity-70", isPage ? "px-4 py-3.5" : "px-3 py-3", isPage ? "[&_svg]:!size-4" : "[&_svg]:!size-3.5"), children: _jsxs("div", { className: "flex items-start gap-2.5", children: [_jsx("div", { className: cn("flex shrink-0 items-center justify-center rounded-md bg-foreground text-background", isPage ? "h-8 w-8" : "h-7 w-7"), children: _jsx(BuilderBMark, { className: isPage ? "h-4 w-4" : "h-3.5 w-3.5" }) }), _jsxs("div", { className: "flex-1 min-w-0", children: [_jsxs("div", { className: "flex items-center gap-1.5 flex-wrap", children: [_jsx("span", { className: cn("font-semibold text-foreground", isPage ? "text-sm" : "text-[12px]"), children: builderFlow.connecting ? "Connecting Builder.io..." : label }), builderFlow.connecting && (_jsx(IconLoader2, { size: isPage ? 14 : 12, className: "shrink-0 animate-spin text-muted-foreground" }))] }), _jsx("p", { className: cn("text-muted-foreground mt-0.5 leading-snug", isPage ? "text-xs" : "text-[10.5px]"), children: subtitle }), builderFlow.error && (_jsx("p", { className: cn("mt-1 text-destructive", bodyCls), children: builderFlow.error }))] }), _jsx(IconExternalLink, { size: isPage ? 14 : 12, className: "shrink-0 text-muted-foreground mt-0.5" })] }) }));
 }
 // ─── Manual setup card ──────────────────────────────────────────────────────
 function ManualSetupCard({ hint, docsUrl, docsLabel = "Read the docs", children, dim, sourceBadge, }) {
@@ -286,10 +298,10 @@ export function AppDefaultModelField({ engine, models, value, defaultModel, disa
     if (engine === "builder" && modelOptions.length > 0) {
         return (_jsx(SettingsSelect, { label: "Model", value: value, options: modelOptions, onValueChange: onValueChange, disabled: disabled }));
     }
-    return (_jsxs("div", { className: "space-y-1.5", children: [_jsx("p", { className: fieldLabelClass(isPage), children: "Model" }), _jsx("input", { type: "text", list: `app-model-suggestions-${engine}`, value: value, disabled: disabled, onChange: (event) => onValueChange(event.target.value), onKeyDown: (event) => {
+    return (_jsxs("div", { className: "space-y-1.5", children: [_jsx("p", { className: fieldLabelClass(isPage), children: "Model" }), _jsx(TextField, { value: value, onChange: onValueChange, disabled: disabled, list: `app-model-suggestions-${engine}`, onKeyDown: (event) => {
                     if (event.key === "Enter")
                         onEnter?.();
-                }, placeholder: defaultModel ?? "model-id", spellCheck: false, autoComplete: "off", className: cn(textInputClass(isPage), "disabled:opacity-60"), style: isPage ? CONTROL_STYLE_PAGE : CONTROL_STYLE }), modelOptions.length > 0 && (_jsx("datalist", { id: `app-model-suggestions-${engine}`, children: modelOptions.map((option) => (_jsx("option", { value: option.value, label: option.label }, option.value))) }))] }));
+                }, placeholder: defaultModel ?? "model-id", autoComplete: "off", "aria-label": "Model", className: cn("w-full disabled:opacity-60", isPage ? "text-sm" : "text-[12px]"), style: isPage ? CONTROL_STYLE_PAGE : CONTROL_STYLE }), modelOptions.length > 0 && (_jsx("datalist", { id: `app-model-suggestions-${engine}`, children: modelOptions.map((option) => (_jsx("option", { value: option.value, label: option.label }, option.value))) }))] }));
 }
 const PROVIDER_DOCS = {
     anthropic: "https://console.anthropic.com/settings/keys",
@@ -528,7 +540,7 @@ function LLMSectionInner({ builderFlow, builderLoading, connectUrl, connected, o
                                     setBaseUrl("");
                                     setClearBaseUrl(false);
                                     setAdvancedOpen(false);
-                                } }), _jsxs("div", { className: "space-y-1.5", children: [_jsx("p", { className: fieldLabelClass(isPage), children: "Model" }), _jsx("input", { type: "text", list: `model-suggestions-${selectedEngine}`, value: selectedModel, onChange: (e) => setSelectedModel(e.target.value), placeholder: selectedEngineInfo?.defaultModel ?? "e.g. model-id", spellCheck: false, autoComplete: "off", className: textInputClass(isPage), style: isPage ? CONTROL_STYLE_PAGE : CONTROL_STYLE }), modelOptions.length > 0 && (_jsx("datalist", { id: `model-suggestions-${selectedEngine}`, children: modelOptions.map((opt) => (_jsx("option", { value: opt.value, label: opt.label }, opt.value))) }))] }), isOpenAiEngine && (_jsxs("div", { className: "border-t border-border/70 pt-2", children: [_jsxs("button", { type: "button", onClick: () => setAdvancedOpen((v) => !v), className: "flex w-full cursor-pointer items-center justify-between gap-2 rounded px-0.5 py-1 text-left hover:text-foreground", children: [_jsxs("span", { className: "inline-flex min-w-0 items-center gap-1.5 text-[11px] font-medium text-foreground", children: [advancedOpen ? (_jsx(IconChevronDown, { size: 12 })) : (_jsx(IconChevronRight, { size: 12, className: "rtl:-scale-x-100" })), "Advanced"] }), _jsx("span", { className: "truncate text-[10px] text-muted-foreground", children: "OpenAI-compatible endpoint" })] }), advancedOpen && (_jsxs("div", { className: "mt-1.5 space-y-1.5", children: [_jsxs("div", { className: "flex items-center justify-between gap-2", children: [_jsx("p", { className: "text-[12px] font-medium text-foreground", children: "Endpoint URL" }), _jsx("span", { className: "text-[10px] text-muted-foreground", children: baseUrlConfigured ? "Configured" : "Optional" })] }), _jsx("input", { type: "url", value: baseUrl, onChange: (e) => {
+                                } }), _jsxs("div", { className: "space-y-1.5", children: [_jsx("p", { className: fieldLabelClass(isPage), children: "Model" }), _jsx("input", { type: "text", list: `model-suggestions-${selectedEngine}`, value: selectedModel, onChange: (e) => setSelectedModel(e.target.value), placeholder: selectedEngineInfo?.defaultModel ?? "e.g. model-id", spellCheck: false, autoComplete: "off", className: textInputClass(isPage), style: isPage ? CONTROL_STYLE_PAGE : CONTROL_STYLE }), modelOptions.length > 0 && (_jsx("datalist", { id: `model-suggestions-${selectedEngine}`, children: modelOptions.map((opt) => (_jsx("option", { value: opt.value, label: opt.label }, opt.value))) }))] }), isOpenAiEngine && (_jsxs("div", { className: "border-t border-border/70 pt-2", children: [_jsxs(Button, { type: "button", onClick: () => setAdvancedOpen((v) => !v), className: "flex w-full cursor-pointer items-center justify-between gap-2 rounded px-0.5 py-1 text-left hover:text-foreground", children: [_jsxs("span", { className: "inline-flex min-w-0 items-center gap-1.5 text-[11px] font-medium text-foreground", children: [advancedOpen ? (_jsx(IconChevronDown, { size: 12 })) : (_jsx(IconChevronRight, { size: 12, className: "rtl:-scale-x-100" })), "Advanced"] }), _jsx("span", { className: "truncate text-[10px] text-muted-foreground", children: "OpenAI-compatible endpoint" })] }), advancedOpen && (_jsxs("div", { className: "mt-1.5 space-y-1.5", children: [_jsxs("div", { className: "flex items-center justify-between gap-2", children: [_jsx("p", { className: "text-[12px] font-medium text-foreground", children: "Endpoint URL" }), _jsx("span", { className: "text-[10px] text-muted-foreground", children: baseUrlConfigured ? "Configured" : "Optional" })] }), _jsx("input", { type: "url", value: baseUrl, onChange: (e) => {
                                                     setBaseUrl(e.target.value);
                                                     if (e.target.value.trim())
                                                         setClearBaseUrl(false);
@@ -537,14 +549,14 @@ function LLMSectionInner({ builderFlow, builderLoading, connectUrl, connected, o
                                                         handleSave();
                                                 }, placeholder: baseUrlConfigured
                                                     ? "Leave blank to keep current endpoint"
-                                                    : "https://gateway.example/v1", disabled: clearBaseUrl, spellCheck: false, autoComplete: "off", className: "flex h-9 w-full rounded-md border border-border bg-background px-3 text-[12px] text-foreground outline-none transition-colors hover:bg-accent/40 focus:ring-1 focus:ring-accent disabled:opacity-50 placeholder:text-muted-foreground/50", style: CONTROL_STYLE }), _jsx("p", { className: "text-[10px] leading-relaxed text-muted-foreground", children: "Use for LiteLLM or another OpenAI-compatible chat gateway. Leave blank for OpenAI." }), baseUrlConfigured && (_jsxs("label", { className: "flex items-center gap-1.5 text-[10px] text-muted-foreground", children: [_jsx("input", { type: "checkbox", checked: clearBaseUrl, onChange: (e) => {
-                                                            setClearBaseUrl(e.target.checked);
-                                                            if (e.target.checked)
+                                                    : "https://gateway.example/v1", disabled: clearBaseUrl, spellCheck: false, autoComplete: "off", className: "flex h-9 w-full rounded-md border border-border bg-background px-3 text-[12px] text-foreground outline-none transition-colors hover:bg-accent/40 focus:ring-1 focus:ring-accent disabled:opacity-50 placeholder:text-muted-foreground/50", style: CONTROL_STYLE }), _jsx("p", { className: "text-[10px] leading-relaxed text-muted-foreground", children: "Use for LiteLLM or another OpenAI-compatible chat gateway. Leave blank for OpenAI." }), baseUrlConfigured && (_jsxs("label", { className: "flex items-center gap-1.5 text-[10px] text-muted-foreground", children: [_jsx(Checkbox, { checked: clearBaseUrl, onChange: (checked) => {
+                                                            setClearBaseUrl(checked);
+                                                            if (checked)
                                                                 setBaseUrl("");
-                                                        }, className: "h-3 w-3 accent-current" }), "Clear saved endpoint override"] })), envVar && envConfigured && endpointChanged && (_jsx("button", { type: "button", onClick: handleSave, disabled: saving, className: "rounded bg-accent px-2.5 py-1 text-[10px] font-medium text-foreground hover:bg-accent/80 disabled:opacity-40", children: saving ? (_jsx(IconLoader2, { size: 10, className: "animate-spin" })) : saved ? (_jsx(IconCheck, { size: 10 })) : ("Save endpoint") }))] }))] })), envVar && envConfigured ? (_jsxs("div", { className: cn("flex items-center gap-1.5 text-green-500", isPage ? "text-xs" : "text-[10px]"), children: [_jsx(IconCheck, { size: isPage ? 14 : 10 }), envVar, " configured"] })) : envVar ? (_jsxs("div", { className: "flex gap-1.5", children: [_jsx("input", { type: "password", value: apiKey, onChange: (e) => setApiKey(e.target.value), onKeyDown: (e) => {
+                                                        }, "aria-label": "Clear saved endpoint override", className: "shrink-0" }), "Clear saved endpoint override"] })), envVar && envConfigured && endpointChanged && (_jsx(Button, { type: "button", intent: "neutral", emphasis: "solid", onClick: handleSave, disabled: saving, className: "rounded bg-accent px-2.5 py-1 text-[10px] font-medium text-foreground hover:bg-accent/80 disabled:opacity-40", children: saving ? (_jsx(IconLoader2, { size: 10, className: "animate-spin" })) : saved ? (_jsx(IconCheck, { size: 10 })) : ("Save endpoint") }))] }))] })), envVar && envConfigured ? (_jsxs("div", { className: cn("flex items-center gap-1.5 text-green-500", isPage ? "text-xs" : "text-[10px]"), children: [_jsx(IconCheck, { size: isPage ? 14 : 10 }), envVar, " configured"] })) : envVar ? (_jsxs("div", { className: "flex gap-1.5", children: [_jsx("input", { type: "password", value: apiKey, onChange: (e) => setApiKey(e.target.value), onKeyDown: (e) => {
                                             if (e.key === "Enter")
                                                 handleSave();
-                                        }, placeholder: PROVIDER_ENV_PLACEHOLDERS[envVar] ?? "...", className: cn(textInputClass(isPage), "flex-1"), style: isPage ? CONTROL_STYLE_PAGE : undefined }), _jsx("button", { onClick: handleSave, disabled: !providerSettingsChanged || saving, className: pillButtonClass(isPage, "solid"), children: saving ? (_jsx(IconLoader2, { size: isPage ? 14 : 10, className: "animate-spin" })) : saved ? (_jsx(IconCheck, { size: isPage ? 14 : 10 })) : ("Save") })] })) : null, _jsxs("div", { className: "flex items-center gap-2", children: [_jsx("button", { onClick: handleTest, disabled: testing, className: pillButtonClass(isPage, "outline"), children: testing ? (_jsxs("span", { className: "flex items-center gap-1", children: [_jsx(IconLoader2, { size: isPage ? 14 : 10, className: "animate-spin" }), "Testing\u2026"] })) : ("Test") }), engineChanged && (_jsx("button", { onClick: handleApply, className: pillButtonClass(isPage, "solid"), children: "Apply" })), settingsStatus != null && (_jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx("button", { onClick: handleDisconnect, className: cn(pillButtonClass(isPage, "outline"), "ms-auto text-muted-foreground hover:bg-destructive/10 hover:text-destructive hover:border-destructive/40"), children: "Disconnect" }) }), _jsx(TooltipContent, { children: "Clear the saved engine \u2014 the app will fall back to the default until you re-apply." })] }))] }), testResult && testResult.ok && (_jsxs("p", { className: cn("flex items-center gap-1 text-green-500", isPage ? "text-xs" : "text-[10px]"), children: [_jsx(IconCheck, { size: isPage ? 14 : 10 }), "Test passed \u2014 ", testResult.latencyMs, "ms"] })), testResult && testResult.ok === false && (_jsxs("p", { className: cn("text-destructive", isPage ? "text-xs" : "text-[10px]"), children: ["Test failed: ", testResult.error] })), disconnectError && (_jsxs("p", { className: cn("text-destructive", isPage ? "text-xs" : "text-[10px]"), children: ["Disconnect failed: ", disconnectError] })), applyNote && (_jsx("p", { className: cn("text-muted-foreground", isPage ? "text-xs" : "text-[10px]"), children: "Changes take effect on next conversation" }))] }) }))] })) }));
+                                        }, placeholder: PROVIDER_ENV_PLACEHOLDERS[envVar] ?? "...", className: cn(textInputClass(isPage), "flex-1"), style: isPage ? CONTROL_STYLE_PAGE : undefined }), _jsx(Button, { intent: "primary", emphasis: "solid", onClick: handleSave, disabled: !providerSettingsChanged || saving, className: pillButtonClass(isPage, "solid"), children: saving ? (_jsx(IconLoader2, { size: isPage ? 14 : 10, className: "animate-spin" })) : saved ? (_jsx(IconCheck, { size: isPage ? 14 : 10 })) : ("Save") })] })) : null, _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Button, { intent: "neutral", emphasis: "outline", onClick: handleTest, disabled: testing, className: pillButtonClass(isPage, "outline"), children: testing ? (_jsxs("span", { className: "flex items-center gap-1", children: [_jsx(IconLoader2, { size: isPage ? 14 : 10, className: "animate-spin" }), "Testing\u2026"] })) : ("Test") }), engineChanged && (_jsx(Button, { intent: "primary", emphasis: "solid", onClick: handleApply, className: pillButtonClass(isPage, "solid"), children: "Apply" })), settingsStatus != null && (_jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx(Button, { intent: "danger", emphasis: "outline", onClick: handleDisconnect, className: cn(pillButtonClass(isPage, "outline"), "ms-auto text-muted-foreground hover:bg-destructive/10 hover:text-destructive hover:border-destructive/40"), children: "Disconnect" }) }), _jsx(TooltipContent, { children: "Clear the saved engine \u2014 the app will fall back to the default until you re-apply." })] }))] }), testResult && testResult.ok && (_jsxs("p", { className: cn("flex items-center gap-1 text-green-500", isPage ? "text-xs" : "text-[10px]"), children: [_jsx(IconCheck, { size: isPage ? 14 : 10 }), "Test passed \u2014 ", testResult.latencyMs, "ms"] })), testResult && testResult.ok === false && (_jsxs("p", { className: cn("text-destructive", isPage ? "text-xs" : "text-[10px]"), children: ["Test failed: ", testResult.error] })), disconnectError && (_jsxs("p", { className: cn("text-destructive", isPage ? "text-xs" : "text-[10px]"), children: ["Disconnect failed: ", disconnectError] })), applyNote && (_jsx("p", { className: cn("text-muted-foreground", isPage ? "text-xs" : "text-[10px]"), children: "Changes take effect on next conversation" }))] }) }))] })) }));
 }
 function friendlyAppName(appId) {
     return appId
@@ -689,7 +701,7 @@ function AppModelDefaultsSectionInner({ open, onToggle, }) {
                                 }, onEnter: () => {
                                     if (hasPendingChange)
                                         void save();
-                                } }), _jsxs("div", { className: "flex items-center gap-1.5", children: [_jsx("button", { type: "button", onClick: save, disabled: !hasPendingChange || saving, className: pillButtonClass(isPage, "solid"), children: saving ? (_jsx(IconLoader2, { size: isPage ? 14 : 10, className: "animate-spin" })) : saved ? (_jsx(IconCheck, { size: isPage ? 14 : 10 })) : ("Save") }), _jsx("button", { type: "button", onClick: reset, disabled: !settings.canUpdate || !hasAppDefault || saving, className: pillButtonClass(isPage, "outline"), children: "Reset" })] })] }), !settings.canUpdate && (_jsx("p", { className: cn("mt-2 text-muted-foreground", noteTextClass(isPage)), children: "Only organization owners and admins can change app model defaults." })), selectedEngineInfo?.packageInstalled === false ? (_jsx("p", { className: cn("mt-2 text-muted-foreground", noteTextClass(isPage)), children: "This app does not include the optional runtime packages for this provider." })) : selectedEngineInfo && !selectedEngineInfo.configured ? (_jsx("p", { className: cn("mt-2 text-muted-foreground", noteTextClass(isPage)), children: "Credentials for this provider were not detected; runtime will fall back if the model cannot be used." })) : null, error && (_jsx("p", { className: cn("mt-2 text-destructive", noteTextClass(isPage)), children: error }))] }) })) : (_jsx("p", { className: cn("text-muted-foreground", noteTextClass(isPage)), children: "App model defaults are unavailable." })) }));
+                                } }), _jsxs("div", { className: "flex items-center gap-1.5", children: [_jsx(Button, { type: "button", intent: "primary", emphasis: "solid", onClick: save, disabled: !hasPendingChange || saving, className: pillButtonClass(isPage, "solid"), children: saving ? (_jsx(IconLoader2, { size: isPage ? 14 : 10, className: "animate-spin" })) : saved ? (_jsx(IconCheck, { size: isPage ? 14 : 10 })) : ("Save") }), _jsx(Button, { type: "button", intent: "neutral", emphasis: "outline", onClick: reset, disabled: !settings.canUpdate || !hasAppDefault || saving, className: pillButtonClass(isPage, "outline"), children: "Reset" })] })] }), !settings.canUpdate && (_jsx("p", { className: cn("mt-2 text-muted-foreground", noteTextClass(isPage)), children: "Only organization owners and admins can change app model defaults." })), selectedEngineInfo?.packageInstalled === false ? (_jsx("p", { className: cn("mt-2 text-muted-foreground", noteTextClass(isPage)), children: "This app does not include the optional runtime packages for this provider." })) : selectedEngineInfo && !selectedEngineInfo.configured ? (_jsx("p", { className: cn("mt-2 text-muted-foreground", noteTextClass(isPage)), children: "Credentials for this provider were not detected; runtime will fall back if the model cannot be used." })) : null, error && (_jsx("p", { className: cn("mt-2 text-destructive", noteTextClass(isPage)), children: error }))] }) })) : (_jsx("p", { className: cn("text-muted-foreground", noteTextClass(isPage)), children: "App model defaults are unavailable." })) }));
 }
 // ─── Email Section ──────────────────────────────────────────────────────────
 function EmailSectionInner({ open, onToggle, }) {
@@ -759,19 +771,22 @@ function EmailSectionInner({ open, onToggle, }) {
         if (vars.length)
             save(vars);
     };
-    return (_jsx(SettingsSection, { id: settingsSectionDomId("email"), icon: _jsx(IconMail, { size: 14 }), title: "Email", subtitle: "Needed before deploy for password resets, team invitations, share notifications, and dashboard email reports. Local development can run without it.", connected: !envLoaded ? undefined : anyConfigured, open: open, onToggle: onToggle, children: !envLoaded ? (_jsx(SettingsSkeleton, { lines: 2 })) : (_jsxs("div", { className: "space-y-2", children: [_jsxs("label", { className: "block space-y-1", children: [_jsx("span", { className: cn("uppercase tracking-wide text-muted-foreground", noteTextClass(isPage)), children: "Provider" }), _jsxs("select", { value: emailProvider, onChange: (e) => setEmailProvider(e.target.value), className: cn(textInputClass(isPage), "w-full"), style: isPage ? CONTROL_STYLE_PAGE : undefined, children: [_jsx("option", { value: "resend", children: "Resend" }), _jsx("option", { value: "sendgrid", children: "SendGrid" })] })] }), emailProvider === "resend" ? (_jsxs(ManualSetupCard, { hint: "Use Resend for transactional email.", docsUrl: "https://resend.com/api-keys", docsLabel: "Get a Resend key", children: [resendConfigured ? (_jsxs("div", { className: cn("mb-1 flex items-center gap-1.5 text-green-500", noteTextClass(isPage)), children: [_jsx(IconCheck, { size: emailIconSize }), "RESEND_API_KEY configured"] })) : (_jsxs("div", { className: "mb-1 flex gap-1.5", children: [_jsx("input", { type: "password", value: resendKey, onChange: (e) => setResendKey(e.target.value), onKeyDown: (e) => {
+    return (_jsx(SettingsSection, { id: settingsSectionDomId("email"), icon: _jsx(IconMail, { size: 14 }), title: "Email", subtitle: "Needed before deploy for password resets, team invitations, share notifications, and dashboard email reports. Local development can run without it.", connected: !envLoaded ? undefined : anyConfigured, open: open, onToggle: onToggle, children: !envLoaded ? (_jsx(SettingsSkeleton, { lines: 2 })) : (_jsxs("div", { className: "space-y-2", children: [_jsx(SettingsSelect, { label: "Provider", value: emailProvider, options: [
+                        { value: "resend", label: "Resend" },
+                        { value: "sendgrid", label: "SendGrid" },
+                    ], onValueChange: (value) => setEmailProvider(value) }), emailProvider === "resend" ? (_jsxs(ManualSetupCard, { hint: "Use Resend for transactional email.", docsUrl: "https://resend.com/api-keys", docsLabel: "Get a Resend key", children: [resendConfigured ? (_jsxs("div", { className: cn("mb-1 flex items-center gap-1.5 text-green-500", noteTextClass(isPage)), children: [_jsx(IconCheck, { size: emailIconSize }), "RESEND_API_KEY configured"] })) : (_jsxs("div", { className: "mb-1 flex gap-1.5", children: [_jsx("input", { type: "password", value: resendKey, onChange: (e) => setResendKey(e.target.value), onKeyDown: (e) => {
                                         if (e.key === "Enter")
                                             saveResend();
-                                    }, placeholder: "re_...", className: emailInputCls }), _jsx("button", { onClick: saveResend, disabled: !resendKey.trim() || saving, className: emailBtnCls, children: saving ? (_jsx(IconLoader2, { size: 10, className: "animate-spin" })) : saved ? (_jsx(IconCheck, { size: 10 })) : ("Save") })] })), fromConfigured ? (_jsxs("div", { className: cn("flex items-center gap-1.5 text-green-500", noteTextClass(isPage)), children: [_jsx(IconCheck, { size: emailIconSize }), "EMAIL_FROM configured"] })) : (_jsxs("div", { className: "flex gap-1.5", children: [_jsx("input", { type: "text", value: fromAddr, onChange: (e) => setFromAddr(e.target.value), onKeyDown: (e) => {
+                                    }, placeholder: "re_...", className: emailInputCls }), _jsx(Button, { intent: "primary", emphasis: "solid", onClick: saveResend, disabled: !resendKey.trim() || saving, className: emailBtnCls, children: saving ? (_jsx(IconLoader2, { size: 10, className: "animate-spin" })) : saved ? (_jsx(IconCheck, { size: 10 })) : ("Save") })] })), fromConfigured ? (_jsxs("div", { className: cn("flex items-center gap-1.5 text-green-500", noteTextClass(isPage)), children: [_jsx(IconCheck, { size: emailIconSize }), "EMAIL_FROM configured"] })) : (_jsxs("div", { className: "flex gap-1.5", children: [_jsx("input", { type: "text", value: fromAddr, onChange: (e) => setFromAddr(e.target.value), onKeyDown: (e) => {
                                         if (e.key === "Enter")
                                             saveResend();
-                                    }, placeholder: "From address - e.g. Acme <hi@acme.com>", className: emailInputCls }), !resendConfigured ? null : (_jsx("button", { onClick: saveResend, disabled: !fromAddr.trim() || saving, className: emailBtnCls, children: saving ? (_jsx(IconLoader2, { size: 10, className: "animate-spin" })) : saved ? (_jsx(IconCheck, { size: 10 })) : ("Save") }))] }))] })) : (_jsxs(ManualSetupCard, { hint: "Use SendGrid for transactional email. SendGrid requires a verified from address.", docsUrl: "https://app.sendgrid.com/settings/api_keys", docsLabel: "Get a SendGrid key", children: [sendgridConfigured ? (_jsxs("div", { className: cn("mb-1 flex items-center gap-1.5 text-green-500", noteTextClass(isPage)), children: [_jsx(IconCheck, { size: emailIconSize }), "SENDGRID_API_KEY configured"] })) : (_jsxs("div", { className: "mb-1 flex gap-1.5", children: [_jsx("input", { type: "password", value: sendgridKey, onChange: (e) => setSendgridKey(e.target.value), onKeyDown: (e) => {
+                                    }, placeholder: "From address - e.g. Acme <hi@acme.com>", className: emailInputCls }), !resendConfigured ? null : (_jsx(Button, { intent: "primary", emphasis: "solid", onClick: saveResend, disabled: !fromAddr.trim() || saving, className: emailBtnCls, children: saving ? (_jsx(IconLoader2, { size: 10, className: "animate-spin" })) : saved ? (_jsx(IconCheck, { size: 10 })) : ("Save") }))] }))] })) : (_jsxs(ManualSetupCard, { hint: "Use SendGrid for transactional email. SendGrid requires a verified from address.", docsUrl: "https://app.sendgrid.com/settings/api_keys", docsLabel: "Get a SendGrid key", children: [sendgridConfigured ? (_jsxs("div", { className: cn("mb-1 flex items-center gap-1.5 text-green-500", noteTextClass(isPage)), children: [_jsx(IconCheck, { size: emailIconSize }), "SENDGRID_API_KEY configured"] })) : (_jsxs("div", { className: "mb-1 flex gap-1.5", children: [_jsx("input", { type: "password", value: sendgridKey, onChange: (e) => setSendgridKey(e.target.value), onKeyDown: (e) => {
                                         if (e.key === "Enter")
                                             saveSendgrid();
-                                    }, placeholder: "SG....", className: emailInputCls }), _jsx("button", { onClick: saveSendgrid, disabled: !sendgridKey.trim() || saving, className: emailBtnCls, children: saving ? (_jsx(IconLoader2, { size: 10, className: "animate-spin" })) : saved ? (_jsx(IconCheck, { size: 10 })) : ("Save") })] })), fromConfigured ? (_jsxs("div", { className: cn("flex items-center gap-1.5 text-green-500", noteTextClass(isPage)), children: [_jsx(IconCheck, { size: emailIconSize }), "EMAIL_FROM configured"] })) : (_jsxs("div", { className: "flex gap-1.5", children: [_jsx("input", { type: "text", value: fromAddr, onChange: (e) => setFromAddr(e.target.value), onKeyDown: (e) => {
+                                    }, placeholder: "SG....", className: emailInputCls }), _jsx(Button, { intent: "primary", emphasis: "solid", onClick: saveSendgrid, disabled: !sendgridKey.trim() || saving, className: emailBtnCls, children: saving ? (_jsx(IconLoader2, { size: 10, className: "animate-spin" })) : saved ? (_jsx(IconCheck, { size: 10 })) : ("Save") })] })), fromConfigured ? (_jsxs("div", { className: cn("flex items-center gap-1.5 text-green-500", noteTextClass(isPage)), children: [_jsx(IconCheck, { size: emailIconSize }), "EMAIL_FROM configured"] })) : (_jsxs("div", { className: "flex gap-1.5", children: [_jsx("input", { type: "text", value: fromAddr, onChange: (e) => setFromAddr(e.target.value), onKeyDown: (e) => {
                                         if (e.key === "Enter")
                                             saveSendgrid();
-                                    }, placeholder: "From address - e.g. Acme <hi@acme.com>", className: emailInputCls }), !sendgridConfigured ? null : (_jsx("button", { onClick: saveSendgrid, disabled: !fromAddr.trim() || saving, className: emailBtnCls, children: saving ? (_jsx(IconLoader2, { size: 10, className: "animate-spin" })) : saved ? (_jsx(IconCheck, { size: 10 })) : ("Save") }))] }))] }))] })) }));
+                                    }, placeholder: "From address - e.g. Acme <hi@acme.com>", className: emailInputCls }), !sendgridConfigured ? null : (_jsx(Button, { intent: "primary", emphasis: "solid", onClick: saveSendgrid, disabled: !fromAddr.trim() || saving, className: emailBtnCls, children: saving ? (_jsx(IconLoader2, { size: 10, className: "animate-spin" })) : saved ? (_jsx(IconCheck, { size: 10 })) : ("Save") }))] }))] }))] })) }));
 }
 function AgentLimitsSectionInner({ open, onToggle, }) {
     const isPage = useSettingsSurface() === "page";
@@ -885,47 +900,10 @@ function AgentLimitsSectionInner({ open, onToggle, }) {
                                 }, onKeyDown: (e) => {
                                     if (e.key === "Enter" && hasPendingChange)
                                         void save();
-                                }, className: cn(textInputClass(isPage), "min-w-0 flex-1 disabled:opacity-60"), style: isPage ? CONTROL_STYLE_PAGE : undefined }), _jsx("button", { type: "button", onClick: save, disabled: !hasPendingChange || saving, className: pillButtonClass(isPage, "solid"), children: saving ? (_jsx(IconLoader2, { size: isPage ? 14 : 10, className: "animate-spin" })) : saved ? (_jsx(IconCheck, { size: isPage ? 14 : 10 })) : ("Save") }), _jsx("button", { type: "button", onClick: reset, disabled: !settings.canUpdate ||
+                                }, className: cn(textInputClass(isPage), "min-w-0 flex-1 disabled:opacity-60"), style: isPage ? CONTROL_STYLE_PAGE : undefined }), _jsx(Button, { type: "button", intent: "primary", emphasis: "solid", onClick: save, disabled: !hasPendingChange || saving, className: pillButtonClass(isPage, "solid"), children: saving ? (_jsx(IconLoader2, { size: isPage ? 14 : 10, className: "animate-spin" })) : saved ? (_jsx(IconCheck, { size: isPage ? 14 : 10 })) : ("Save") }), _jsx(Button, { type: "button", intent: "neutral", emphasis: "outline", onClick: reset, disabled: !settings.canUpdate ||
                                     saving ||
                                     settings.maxIterations === settings.defaultMaxIterations, className: pillButtonClass(isPage, "outline"), children: "Reset" })] }), !settings.canUpdate && (_jsx("p", { className: cn("mt-2 text-muted-foreground", noteTextClass(isPage)), children: "Only organization owners and admins can change this limit." })), error && (_jsx("p", { className: cn("mt-2 text-destructive", noteTextClass(isPage)), children: error }))] }) })) : (_jsx("p", { className: cn("text-muted-foreground", noteTextClass(isPage)), children: "Agent limit settings are unavailable." })) }));
 }
-function normalizeSettingsSection(value) {
-    const normalized = value?.replace(/^#/, "").toLowerCase() ?? "";
-    if (!normalized)
-        return null;
-    if (normalized.startsWith("secrets"))
-        return "secrets";
-    if (normalized === "workspace" ||
-        normalized === "workspace-settings" ||
-        normalized === "organization" ||
-        normalized === "org") {
-        return "secrets";
-    }
-    if (normalized === "agent-engine")
-        return "llm";
-    if (normalized === "agent-model-defaults" ||
-        normalized === "app-model-defaults" ||
-        normalized === "models") {
-        return "app-models";
-    }
-    if (normalized === "agent-limits" || normalized === "loop-settings") {
-        return "limits";
-    }
-    return SETTINGS_SECTION_IDS.has(normalized)
-        ? normalized
-        : null;
-}
-function settingsSectionDomId(section) {
-    return `agent-settings-section-${section}`;
-}
-function initialOpenSection() {
-    if (typeof window === "undefined")
-        return "llm";
-    return normalizeSettingsSection(window.location.hash) ?? "llm";
-}
-function firstVisibleSection(sections) {
-    return sections[0] ?? "llm";
-}
 // Agent capability modes. The internal values ("production"/"development") are
 // kept for back-compat with the AGENT_MODE wiring; only the visible labels
 // changed to "App mode" / "Code mode" so this control reads as the agent
@@ -952,7 +930,7 @@ function CapabilityStatusStrip({ isDevMode, builderConnected, builderLoading, bu
         : builderConnected && builderBranchesAvailable
             ? "Builder branches"
             : "Desktop/local";
-    return (_jsxs("div", { className: "rounded-md border border-border bg-muted/20 px-2.5 py-2", children: [_jsx("div", { className: "mb-1.5 text-[10px] font-medium text-muted-foreground", children: "Available now" }), _jsxs("div", { className: "space-y-1.5", children: [_jsx(CapabilityStatusRow, { label: "App", value: "Chat + actions", active: true }), _jsx(CapabilityStatusRow, { label: "Code", value: codeLabel, active: codeAvailable }), _jsx(CapabilityStatusRow, { label: "Builder", active: builderConnected, value: builderLoading ? ("Checking...") : builderConnected ? ("Connected") : (_jsx("button", { type: "button", onClick: onOpenLlm, className: "rounded border border-border px-1.5 py-0.5 text-[10px] text-muted-foreground transition-colors hover:bg-accent/40 hover:text-foreground", children: "Connect" })) })] })] }));
+    return (_jsxs("div", { className: "rounded-md border border-border bg-muted/20 px-2.5 py-2", children: [_jsx("div", { className: "mb-1.5 text-[10px] font-medium text-muted-foreground", children: "Available now" }), _jsxs("div", { className: "space-y-1.5", children: [_jsx(CapabilityStatusRow, { label: "App", value: "Chat + actions", active: true }), _jsx(CapabilityStatusRow, { label: "Code", value: codeLabel, active: codeAvailable }), _jsx(CapabilityStatusRow, { label: "Builder", active: builderConnected, value: builderLoading ? ("Checking...") : builderConnected ? ("Connected") : (_jsx(Button, { type: "button", intent: "neutral", emphasis: "outline", onClick: onOpenLlm, className: "rounded border border-border px-1.5 py-0.5 text-[10px] text-muted-foreground transition-colors hover:bg-accent/40 hover:text-foreground", children: "Connect" })) })] })] }));
 }
 function AccountSectionInner({ open, onToggle, }) {
     const isPage = useSettingsSurface() === "page";
@@ -1005,7 +983,7 @@ function AccountSectionInner({ open, onToggle, }) {
             return;
         updateProfile.mutate({ name: nextName });
     };
-    return (_jsxs(SettingsSection, { id: settingsSectionDomId("account"), icon: _jsx(IconUserCircle, { size: 14 }), title: t("settings.profileTitle"), subtitle: t("settings.profileDescription"), open: open, onToggle: onToggle, children: [_jsxs("div", { className: "flex items-center gap-3", children: [_jsx("div", { className: cn("flex shrink-0 items-center justify-center overflow-hidden rounded-full border border-border bg-accent font-semibold text-muted-foreground", isPage ? "h-14 w-14 text-[15px]" : "h-12 w-12 text-[13px]"), children: avatarUrl ? (_jsx("img", { src: avatarUrl, alt: "", className: "h-full w-full object-cover" })) : (initials) }), _jsxs("div", { className: "min-w-0 flex-1", children: [_jsx("p", { className: cn("truncate font-medium text-foreground", isPage ? "text-sm" : "text-[12px]"), children: isLoading ? t("settings.profileLoading") : displayName }), email && (_jsx("p", { className: cn("truncate text-muted-foreground", subTextClass(isPage)), children: email })), status === "saved" && (_jsx("p", { className: cn("mt-1 text-green-600 dark:text-green-400", subTextClass(isPage)), children: t("settings.profilePhotoUpdated") })), status === "error" && (_jsx("p", { className: cn("mt-1 text-destructive", subTextClass(isPage)), children: t("settings.profilePhotoError") }))] }), _jsx("input", { ref: fileInputRef, type: "file", accept: "image/*", className: "hidden", onChange: handleAvatarChange }), _jsx("button", { type: "button", disabled: !email || uploading, onClick: () => fileInputRef.current?.click(), className: cn(pillButtonClass(isPage, "outline"), "shrink-0 justify-center"), children: uploading
+    return (_jsxs(SettingsSection, { id: settingsSectionDomId("account"), icon: _jsx(IconUserCircle, { size: 14 }), title: t("settings.profileTitle"), subtitle: t("settings.profileDescription"), open: open, onToggle: onToggle, children: [_jsxs("div", { className: "flex items-center gap-3", children: [_jsx("div", { className: cn("flex shrink-0 items-center justify-center overflow-hidden rounded-full border border-border bg-accent font-semibold text-muted-foreground", isPage ? "h-14 w-14 text-[15px]" : "h-12 w-12 text-[13px]"), children: avatarUrl ? (_jsx("img", { src: avatarUrl, alt: "", className: "h-full w-full object-cover" })) : (initials) }), _jsxs("div", { className: "min-w-0 flex-1", children: [_jsx("p", { className: cn("truncate font-medium text-foreground", isPage ? "text-sm" : "text-[12px]"), children: isLoading ? t("settings.profileLoading") : displayName }), email && (_jsx("p", { className: cn("truncate text-muted-foreground", subTextClass(isPage)), children: email })), status === "saved" && (_jsx("p", { className: cn("mt-1 text-green-600 dark:text-green-400", subTextClass(isPage)), children: t("settings.profilePhotoUpdated") })), status === "error" && (_jsx("p", { className: cn("mt-1 text-destructive", subTextClass(isPage)), children: t("settings.profilePhotoError") }))] }), _jsx("input", { ref: fileInputRef, type: "file", accept: "image/*", className: "hidden", onChange: handleAvatarChange }), _jsx(Button, { type: "button", intent: "neutral", emphasis: "outline", disabled: !email || uploading, onClick: () => fileInputRef.current?.click(), className: cn(pillButtonClass(isPage, "outline"), "shrink-0 justify-center"), children: uploading
                             ? t("settings.profileUploading")
                             : t("settings.profileChangePhoto") })] }), _jsxs("form", { className: "space-y-1.5", onSubmit: (event) => {
                     event.preventDefault();
@@ -1013,7 +991,7 @@ function AccountSectionInner({ open, onToggle, }) {
                 }, children: [_jsx("label", { htmlFor: "agent-native-profile-name", className: fieldLabelClass(isPage), children: t("settings.profileNameLabel") }), _jsx("input", { id: "agent-native-profile-name", type: "text", value: name, onChange: (event) => {
                             updateProfile.reset();
                             setName(event.target.value);
-                        }, placeholder: t("settings.profileNamePlaceholder"), disabled: !email || profileQuery.isLoading || updateProfile.isPending, maxLength: 120, className: textInputClass(isPage) }), _jsx("p", { className: cn("text-muted-foreground", noteTextClass(isPage)), children: t("settings.profileNameDescription") }), _jsxs("div", { className: "flex items-center justify-between gap-3 pt-1", children: [_jsxs("div", { className: "min-h-4", children: [updateProfile.isSuccess && (_jsx("p", { className: "text-green-600 dark:text-green-400", children: t("settings.profileSaved") })), updateProfile.error && (_jsx("p", { className: "text-destructive", children: t("settings.profileSaveError") }))] }), _jsx("button", { type: "submit", disabled: !email ||
+                        }, placeholder: t("settings.profileNamePlaceholder"), disabled: !email || profileQuery.isLoading || updateProfile.isPending, maxLength: 120, className: textInputClass(isPage) }), _jsx("p", { className: cn("text-muted-foreground", noteTextClass(isPage)), children: t("settings.profileNameDescription") }), _jsxs("div", { className: "flex items-center justify-between gap-3 pt-1", children: [_jsxs("div", { className: "min-h-4", children: [updateProfile.isSuccess && (_jsx("p", { className: "text-green-600 dark:text-green-400", children: t("settings.profileSaved") })), updateProfile.error && (_jsx("p", { className: "text-destructive", children: t("settings.profileSaveError") }))] }), _jsx(Button, { type: "submit", intent: "primary", emphasis: "solid", disabled: !email ||
                                     profileQuery.isLoading ||
                                     updateProfile.isPending ||
                                     !name.trim() ||
@@ -1036,19 +1014,6 @@ function SettingsPanelContent({ isDevMode, onToggleDevMode, showDevToggle, devAp
         popupUrl: connectUrl,
         trackingSource: "settings_panel_builder_card",
     });
-    // When opened via a `#secrets:<KEY>` hash, focus that specific secret input
-    // inside the "API Keys & Connections" section.
-    const [focusSecretKey, setFocusSecretKey] = useState(undefined);
-    const visibleSections = useMemo(() => new Set(sections), [sections]);
-    const shouldShowSection = useCallback((section) => visibleSections.has(section), [visibleSections]);
-    // Accordion: only one section open at a time (null = all closed)
-    const [openSection, setOpenSection] = useState(() => {
-        const initial = initialOpenSection();
-        return visibleSections.has(initial)
-            ? initial
-            : firstVisibleSection(sections);
-    });
-    const toggle = (id) => setOpenSection((prev) => (prev === id ? null : id));
     const scrollSectionIntoView = useCallback((section) => {
         window.requestAnimationFrame(() => {
             document.getElementById(settingsSectionDomId(section))?.scrollIntoView({
@@ -1057,47 +1022,13 @@ function SettingsPanelContent({ isDevMode, onToggleDevMode, showDevToggle, devAp
             });
         });
     }, []);
-    const openSettingsSection = useCallback((section, scroll = false) => {
-        setOpenSection(section);
-        if (scroll)
-            scrollSectionIntoView(section);
-    }, [scrollSectionIntoView]);
-    useEffect(() => {
-        const section = normalizeSettingsSection(initialSection);
-        if (!section || !shouldShowSection(section))
-            return;
-        if (section !== "secrets")
-            setFocusSecretKey(undefined);
-        openSettingsSection(section, true);
-    }, [
+    const { focusSecretKey, isSectionVisible: shouldShowSection, openSection, toggleSection: toggle, openSettingsSection: openControllerSection, } = useSettingsPanelController({
+        sections,
         initialSection,
         sectionRequestKey,
-        openSettingsSection,
-        shouldShowSection,
-    ]);
-    // Support `#secrets:<KEY>` hash fragments from the onboarding CTA — opens
-    // the section and focuses the matching input.
-    useEffect(() => {
-        if (typeof window === "undefined")
-            return;
-        const handleHash = () => {
-            const hash = window.location.hash?.replace(/^#/, "") ?? "";
-            const section = normalizeSettingsSection(hash);
-            if (!section || !shouldShowSection(section))
-                return;
-            if (hash.startsWith("secrets:") || hash === "secrets") {
-                const key = hash.slice("secrets:".length);
-                setFocusSecretKey(key || undefined);
-            }
-            else {
-                setFocusSecretKey(undefined);
-            }
-            openSettingsSection(section, true);
-        };
-        handleHash();
-        window.addEventListener("hashchange", handleHash);
-        return () => window.removeEventListener("hashchange", handleHash);
-    }, [openSettingsSection, shouldShowSection]);
+        onScrollToSection: scrollSectionIntoView,
+    });
+    const openSettingsSection = useCallback((section, scroll = false) => openControllerSection(section, { scroll }), [openControllerSection]);
     const isPage = surface === "page";
     return (_jsx(SettingsSurfaceProvider, { surface: surface, children: _jsxs("div", { className: cn(isPage ? "space-y-3" : "flex-1 min-h-0 overflow-y-auto p-3 space-y-2", className), style: isPage ? undefined : { overflowY: "auto" }, children: [(showDevToggle || devAppUrl) && (_jsx("div", { className: "space-y-2 pb-2 border-b border-border mb-2", children: showDevToggle && (_jsx(SettingsSelect, { label: "Agent mode", labelAdornment: devAppUrl ? (_jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx("a", { href: devAppUrl, target: "_blank", rel: "noopener noreferrer", "aria-label": "Open app in new tab", className: "flex items-center text-muted-foreground hover:text-foreground", children: _jsx(IconExternalLink, { size: 14 }) }) }), _jsx(TooltipContent, { children: "Open app in new tab" })] })) : undefined, value: isDevMode ? "development" : "production", options: agentModeOptions, onValueChange: (next) => {
                             const nextIsDev = next === "development";
@@ -1108,8 +1039,12 @@ function SettingsPanelContent({ isDevMode, onToggleDevMode, showDevToggle, devAp
 export function SettingsPanel(props) {
     return _jsx(SettingsPanelContent, { ...props });
 }
+function McpConnectionsCard() {
+    const t = useT();
+    return (_jsx("section", { className: "rounded-lg border border-border bg-muted/20 p-3", children: _jsxs("div", { className: "flex items-start gap-2.5", children: [_jsx(IconPlugConnected, { size: 16, className: "mt-0.5 shrink-0 text-muted-foreground" }), _jsxs("div", { className: "min-w-0 flex-1", children: [_jsx("h2", { className: "text-sm font-semibold text-foreground", children: t("settings.mcpConnectionsTitle") }), _jsx("p", { className: "mt-1 text-xs leading-5 text-muted-foreground", children: t("settings.mcpConnectionsDescription") }), _jsxs(Link, { to: "/agent#connections", className: "mt-2 inline-flex items-center gap-1 text-xs font-medium text-foreground underline-offset-4 hover:underline", children: [t("settings.openMcpConnections"), _jsx(IconExternalLink, { size: 13 })] })] })] }) }));
+}
 export function ConnectionsSettingsContent({ settingsPanelProps, }) {
-    return (_jsxs("div", { className: "mx-auto w-full max-w-2xl space-y-4", children: [_jsx(BuilderConnectCard, { trackingSource: "settings_connections" }), _jsx(SettingsPanelContent, { ...settingsPanelProps, surface: "page", sections: CONNECTION_SETTINGS_SECTIONS, showCapabilityStrip: false, className: "w-full", builderConnectionOwnedExternally: true })] }));
+    return (_jsxs("div", { className: "mx-auto w-full max-w-2xl space-y-4", children: [_jsx(BuilderConnectCard, { trackingSource: "settings_connections" }), _jsx(McpConnectionsCard, {}), _jsx(SettingsPanelContent, { ...settingsPanelProps, surface: "page", sections: CONNECTION_SETTINGS_SECTIONS, showCapabilityStrip: false, className: "w-full", builderConnectionOwnedExternally: true })] }));
 }
 export function useAgentSettingsTabs() {
     const { isDevMode, canToggle, setDevMode } = useDevMode();