@agent-native/core 0.137.3 → 0.137.5

package/dist/client/settings/SettingsPanel.js

@@ -1,13 +1,15 @@
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 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, IconApps, IconUsersGroup, IconTool, } from "@tabler/icons-react";
+import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, } from "@agent-native/toolkit/ui/command";
+import { IconChevronDown, IconChevronRight, IconCheck, IconExternalLink, IconBrain, IconHierarchy2, IconBrowser, IconGitBranch, IconCloud, IconDatabase, IconFolder, IconShield, IconShieldLock, IconPlugConnected, IconTopologyRing2, IconLoader2, IconUpload, IconCoin, IconMail, IconKey, IconMicrophone, IconEyeOff, IconBolt, IconGauge, IconApps, IconUsersGroup, IconTool, } from "@tabler/icons-react";
 import React, { Suspense, lazy, useState, useEffect, useCallback, useMemo, useRef, } from "react";
-import { Link, Navigate } from "react-router";
 import { PROVIDER_ENV_PLACEHOLDERS } from "../../agent/engine/provider-env-vars.js";
 import { saveAgentEngineProviderSettings } from "../agent-engine-key.js";
+import { AgentWorkspaceContent } from "../agent-page/AgentWorkspaceContent.js";
 import { agentNativePath } from "../api-path.js";
 import { BuilderBMark } from "../builder-mark.js";
+import { Popover, PopoverContent, PopoverTrigger, } from "../components/ui/popover.js";
 import { Tooltip, TooltipContent, TooltipTrigger, } from "../components/ui/tooltip.js";
 import { useT } from "../i18n.js";
 import { TeamPage } from "../org/TeamPage.js";
@@ -15,12 +17,13 @@ import { BuilderConnectCard } from "../setup-connections/BuilderConnectCard.js";
 import { callAction } from "../use-action.js";
 import { useDevMode } from "../use-dev-mode.js";
 import { cn } from "../utils.js";
-import { AGENT_SETTINGS_SECTIONS, ALL_SETTINGS_SECTIONS, CONNECTION_SETTINGS_SECTIONS, WORKSPACE_SETTINGS_SECTIONS, getAgentSettingsSearchTabs, } from "./agent-settings-search.js";
+import { AGENT_SETTINGS_SECTIONS, ALL_SETTINGS_SECTIONS, INTEGRATION_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";
 import { ExtensionsSettingsContent } from "./ExtensionsSettingsContent.js";
 import { SecretsSection } from "./SecretsSection.js";
+import { SettingsGroup, SettingsRow } from "./SettingsRow.js";
 import { SettingsSection, SettingsSurfaceProvider, useSettingsSurface, } from "./SettingsSection.js";
 import { UsageSection } from "./UsageSection.js";
 import { useBuilderConnectFlow, useBuilderStatus, } from "./useBuilderStatus.js";
@@ -28,6 +31,8 @@ import { settingsSectionDomId, useSettingsPanelController, } from "./useSettings
 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 ManageButton = React.forwardRef(({ children = "Manage", className, ...props }, ref) => (_jsxs(Button, { ref: ref, type: "button", intent: "neutral", emphasis: "outline", className: cn("inline-flex items-center gap-1 rounded-md border border-border px-3 py-1.5 text-sm font-medium text-foreground hover:bg-accent/40", className), ...props, children: [children, _jsx(IconChevronDown, { size: 14 })] })));
+ManageButton.displayName = "SettingsManageButton";
 const IntegrationsPanel = lazy(() => import("../integrations/IntegrationsPanel.js").then((m) => ({
     default: m.IntegrationsPanel,
 })));
@@ -182,32 +187,43 @@ function DisconnectBuilderButton() {
     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, }) {
+function UseBuilderCard({ builderFlow, connectUrl, connected, orgName, envManaged, credentialSource, trackingSource = "settings_panel_builder_card", trackingFlow = "connect_llm", label = "Connect Builder.io", subtitle = "Builder.io free credits to start - no API key needed.", dim, compact = false, }) {
     const isPage = useSettingsSurface() === "page";
     const effectiveConnected = connected || builderFlow.configured;
     const effectiveOrgName = builderFlow.orgName ?? orgName;
     const bgClass = dim ? "" : "bg-accent/30";
     const titleCls = isPage ? "text-sm" : "text-[11px]";
     const bodyCls = isPage ? "text-xs" : "text-[10px]";
+    if (compact && effectiveConnected) {
+        return (_jsxs("span", { className: "inline-flex shrink-0 items-center gap-1 text-sm text-primary", children: [_jsx(IconCheck, { size: 14 }), "Connected", effectiveOrgName ? ` · ${effectiveOrgName}` : ""] }));
+    }
     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", 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"
-                                        : "Reconnect", _jsx(IconExternalLink, { size: isPage ? 14 : 10 })] })), credentialSource !== "env" ? _jsx(DisconnectBuilderButton, {}) : null] })) : null] }));
+                        : "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 && (_jsx(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"
+                                    : "Reconnect" })), credentialSource !== "env" ? _jsx(DisconnectBuilderButton, {}) : null] })) : null] }));
     }
     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", 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" })] }) }));
+    if (compact) {
+        return (_jsxs(Button, { type: "button", intent: "primary", emphasis: "solid", onClick: () => builderFlow.start({ trackingSource, trackingFlow }), disabled: builderFlow.connecting, className: "inline-flex shrink-0 items-center gap-1.5 rounded-md bg-primary px-3 py-1.5 text-sm font-medium text-primary-foreground hover:bg-primary/90 disabled:cursor-wait disabled:opacity-70", children: [builderFlow.connecting ? "Connecting…" : "Connect Builder.io", builderFlow.connecting ? (_jsx(IconLoader2, { size: 14, className: "animate-spin" })) : null] }));
+    }
+    return (_jsxs("div", { className: cn("flex w-full items-center gap-3 rounded-xl border border-border/70 bg-card text-start transition-colors", isPage ? "px-4 py-3.5" : "px-3 py-3", builderFlow.error && "border-destructive/40"), children: [_jsxs("div", { className: "flex min-w-0 flex-1 items-center 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 }))] })] }), _jsxs(Button, { type: "button", intent: "neutral", emphasis: "outline", onClick: () => builderFlow.start({ trackingSource, trackingFlow }), disabled: builderFlow.connecting, className: cn("inline-flex shrink-0 items-center gap-1.5 rounded-md border border-border px-3 py-1.5 font-medium text-foreground hover:bg-accent/40 disabled:cursor-wait disabled:opacity-70", isPage ? "text-sm" : "text-[11px]"), children: [builderFlow.connecting ? "Connecting…" : "Connect Builder.io", builderFlow.connecting ? (_jsx(IconLoader2, { size: isPage ? 14 : 12, className: "animate-spin" })) : null] })] }));
 }
 // ─── Manual setup card ──────────────────────────────────────────────────────
-function ManualSetupCard({ id, hint, docsUrl, docsLabel = "Read the docs", children, dim, sourceBadge, }) {
+function ManualSetupCard({ id, title = "Set up manually", hint, docsUrl, docsLabel = "Read the docs", children, dim, sourceBadge, bare = false, popover = false, popoverLabel = "Manage", }) {
     const isPage = useSettingsSurface() === "page";
     const titleCls = isPage ? "text-sm" : "text-[11px]";
     const bodyCls = isPage ? "text-xs" : "text-[10px]";
-    return (_jsxs("div", { id: id, className: cn("rounded-md border border-border", isPage ? "px-3.5 py-3" : "px-2.5 py-2", dim ? "" : "bg-accent/30"), children: [_jsxs("div", { className: "flex items-center justify-between mb-1", children: [_jsx("div", { className: cn("font-medium text-foreground", titleCls), children: "Set up manually" }), sourceBadge ? (_jsxs("span", { className: cn("flex items-center gap-1 text-green-500", bodyCls), children: [_jsx(IconCheck, { size: isPage ? 14 : 10 }), sourceBadge] })) : null] }), hint && (_jsx("p", { className: cn("text-muted-foreground mb-1.5", bodyCls), children: hint })), children, docsUrl && (_jsxs("a", { href: docsUrl, target: "_blank", rel: "noopener noreferrer", className: cn(pillButtonClass(isPage, "outline"), "mt-1.5 no-underline"), children: [docsLabel, _jsx(IconExternalLink, { size: isPage ? 14 : 10 })] }))] }));
+    const content = (_jsxs("div", { id: id, className: cn(bare
+            ? "space-y-2"
+            : cn("rounded-md border border-border", isPage ? "px-3.5 py-3" : "px-2.5 py-2", dim ? "" : "bg-accent/30")), children: [_jsxs("div", { className: "flex items-center justify-between mb-1", children: [_jsx("div", { className: cn("font-medium text-foreground", titleCls), children: title }), sourceBadge ? (_jsxs("span", { className: cn("flex items-center gap-1 text-green-500", bodyCls), children: [_jsx(IconCheck, { size: isPage ? 14 : 10 }), sourceBadge] })) : null] }), hint && (_jsx("p", { className: cn("text-muted-foreground mb-1.5", bodyCls), children: hint })), children, docsUrl && (_jsxs("a", { href: docsUrl, target: "_blank", rel: "noopener noreferrer", className: cn(pillButtonClass(isPage, "outline"), "mt-1.5 no-underline"), children: [docsLabel, _jsx(IconExternalLink, { size: isPage ? 14 : 10 })] }))] }));
+    if (!popover)
+        return content;
+    return (_jsxs(Popover, { children: [_jsx(PopoverTrigger, { asChild: true, children: _jsx(ManageButton, { children: popoverLabel }) }), _jsx(PopoverContent, { align: "end", sideOffset: 6, className: "max-h-[min(640px,calc(100vh-2rem))] w-[min(420px,calc(100vw-2rem))] overflow-y-auto p-4", children: content })] }));
 }
 // ─── LLM helpers ────────────────────────────────────────────────────────────
 function friendlyModelName(model) {
@@ -312,7 +328,7 @@ const PROVIDER_DOCS = {
     "ai-sdk:mistral": "https://console.mistral.ai/api-keys/",
     "ai-sdk:cohere": "https://dashboard.cohere.com/api-keys",
 };
-function LLMSectionInner({ builderFlow, builderLoading, connectUrl, connected, orgName, envManaged, credentialSource, open, onToggle, }) {
+function LLMSectionInner({ builderFlow, builderLoading, connectUrl, connected, orgName, envManaged, credentialSource, grouped = false, open, onToggle, }) {
     const isPage = useSettingsSurface() === "page";
     const t = useT();
     const [envKeys, setEnvKeys] = useState([]);
@@ -533,33 +549,35 @@ function LLMSectionInner({ builderFlow, builderLoading, connectUrl, connected, o
         }
         catch { }
     };
-    return (_jsx(SettingsSection, { id: settingsSectionDomId("llm"), icon: _jsx(IconBrain, { size: 14 }), title: "LLM", subtitle: "Connect any major LLM \u2014 Claude, GPT, Gemini, and more.", required: true, connected: initialLoading ? undefined : anyKeyConfigured, open: open, onToggle: onToggle, children: initialLoading ? (_jsx(SettingsSkeleton, { lines: 3 })) : (_jsxs("div", { className: "space-y-2", children: [_jsx(UseBuilderCard, { builderFlow: builderFlow, connectUrl: connectUrl, connected: connected, orgName: orgName, envManaged: envManaged, credentialSource: credentialSource, trackingSource: "llm_settings", trackingFlow: "connect_llm", label: "Connect Builder.io" }), builderConnected && (_jsxs(Button, { type: "button", intent: "neutral", emphasis: "ghost", "aria-expanded": manualSetupOpen, "aria-controls": "llm-manual-setup", onClick: () => setManualSetupOpen((open) => !open), className: cn("inline-flex items-center gap-1 px-0.5 text-muted-foreground hover:text-foreground", isPage ? "text-xs" : "text-[10px]"), children: [t("agentPanel.addOwnKeys", {
-                            defaultValue: "Add your own keys",
-                        }), _jsx(IconChevronDown, { size: isPage ? 14 : 11, className: cn("transition-transform", manualSetupOpen && "rotate-180") })] })), (!builderConnected || manualSetupOpen) && (_jsx(ManualSetupCard, { id: "llm-manual-setup", hint: manualSetupHint, sourceBadge: builderConnected ? undefined : sourceBadge, children: _jsxs("div", { className: "space-y-2 mb-1", children: [_jsx(SettingsSelect, { label: "Provider", value: selectedEngine, options: providerOptions, onValueChange: (val) => {
-                                    setSelectedEngine(val);
-                                    const info = engines.find((e) => e.name === val);
-                                    setSelectedModel(info?.defaultModel ?? "");
-                                    setApiKey("");
-                                    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) => {
-                                                    setBaseUrl(e.target.value);
-                                                    if (e.target.value.trim())
-                                                        setClearBaseUrl(false);
-                                                }, onKeyDown: (e) => {
+    return (_jsx(SettingsSection, { id: settingsSectionDomId("llm"), icon: _jsx(IconBrain, { size: 14 }), title: "LLM", subtitle: "Use Builder.io free credits or your own LLM provider.", required: true, connected: initialLoading ? undefined : anyKeyConfigured, grouped: isPage && grouped, open: open, onToggle: onToggle, children: initialLoading ? (_jsx("div", { className: cn(isPage && "px-5 py-4 sm:px-6"), children: _jsx(SettingsSkeleton, { lines: 3 }) })) : (_jsxs("div", { className: cn(isPage
+                ? "flex items-center justify-between gap-4 px-5 py-4 sm:px-6"
+                : "space-y-2"), children: [isPage && (_jsxs("div", { className: "min-w-0", children: [_jsx("p", { className: "text-sm font-medium text-foreground", children: "Connect an LLM" }), _jsx("p", { className: "mt-1 text-sm leading-6 text-muted-foreground", children: "Use Builder.io free credits or your own provider." })] })), _jsxs("div", { className: cn(isPage && "flex flex-wrap items-center justify-end gap-2"), children: [_jsx(UseBuilderCard, { builderFlow: builderFlow, connectUrl: connectUrl, connected: connected, orgName: orgName, envManaged: envManaged, credentialSource: credentialSource, trackingSource: "llm_settings", trackingFlow: "connect_llm", label: "Connect Builder.io", compact: isPage }), builderConnected && !isPage && (_jsxs(Button, { type: "button", intent: "neutral", emphasis: "ghost", "aria-expanded": manualSetupOpen, "aria-controls": "llm-manual-setup", onClick: () => setManualSetupOpen((open) => !open), className: cn("inline-flex items-center gap-1 px-0.5 text-muted-foreground hover:text-foreground", isPage ? "text-xs" : "text-[10px]"), children: [t("agentPanel.addOwnKeys", {
+                                    defaultValue: "Add your own keys",
+                                }), _jsx(IconChevronDown, { size: isPage ? 14 : 11, className: cn("transition-transform", manualSetupOpen && "rotate-180") })] })), (!builderConnected || manualSetupOpen || isPage) && (_jsx(ManualSetupCard, { id: "llm-manual-setup", title: "Custom keys", hint: manualSetupHint, sourceBadge: builderConnected ? undefined : sourceBadge, bare: isPage, popover: isPage, popoverLabel: "Custom keys", children: _jsxs("div", { className: "space-y-2 mb-1", children: [_jsx(SettingsSelect, { label: "Provider", value: selectedEngine, options: providerOptions, onValueChange: (val) => {
+                                            setSelectedEngine(val);
+                                            const info = engines.find((e) => e.name === val);
+                                            setSelectedModel(info?.defaultModel ?? "");
+                                            setApiKey("");
+                                            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) => {
+                                                            setBaseUrl(e.target.value);
+                                                            if (e.target.value.trim())
+                                                                setClearBaseUrl(false);
+                                                        }, onKeyDown: (e) => {
+                                                            if (e.key === "Enter")
+                                                                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(Checkbox, { checked: clearBaseUrl, onChange: (checked) => {
+                                                                    setClearBaseUrl(checked);
+                                                                    if (checked)
+                                                                        setBaseUrl("");
+                                                                }, "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-primary", 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: 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(Checkbox, { checked: clearBaseUrl, onChange: (checked) => {
-                                                            setClearBaseUrl(checked);
-                                                            if (checked)
-                                                                setBaseUrl("");
-                                                        }, "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, { 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") }), PROVIDER_DOCS[selectedEngine] ? (_jsxs("a", { href: PROVIDER_DOCS[selectedEngine], target: "_blank", rel: "noopener noreferrer", className: cn(pillButtonClass(isPage, "outline"), "no-underline"), children: ["Get an API key", _jsx(IconExternalLink, { size: isPage ? 14 : 10 })] })) : null, 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" }))] }) }))] })) }));
+                                                }, 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") }), PROVIDER_DOCS[selectedEngine] ? (_jsxs("a", { href: PROVIDER_DOCS[selectedEngine], target: "_blank", rel: "noopener noreferrer", className: cn(pillButtonClass(isPage, "outline"), "no-underline"), children: ["Get an API key", _jsx(IconExternalLink, { size: isPage ? 14 : 10 })] })) : null, 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-primary", 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
@@ -568,7 +586,47 @@ function friendlyAppName(appId) {
         .map((part) => part[0]?.toUpperCase() + part.slice(1))
         .join(" ");
 }
-function AppModelDefaultsSectionInner({ open, onToggle, }) {
+function AppDefaultModelPicker({ engines, value, disabled, onChange, }) {
+    const [open, setOpen] = useState(false);
+    const visibleEngines = engines.filter((engine) => engine.name !== "ai-sdk:anthropic" && engine.name !== "ai-sdk:ollama");
+    const selectedModel = value.includes("::")
+        ? value.slice(value.indexOf("::") + 2)
+        : null;
+    const selectedEngine = value.includes("::")
+        ? visibleEngines.find((engine) => engine.name === value.split("::", 1)[0])
+        : null;
+    const selectedLabel = selectedModel
+        ? `${selectedEngine?.label ?? selectedEngine?.name ?? "Provider"} · ${friendlyModelName(selectedModel)}`
+        : "Global default";
+    const openIntegrations = () => {
+        setOpen(false);
+        if (typeof window !== "undefined")
+            window.location.hash = "integrations";
+    };
+    return (_jsxs(Popover, { open: open, onOpenChange: setOpen, children: [_jsx(PopoverTrigger, { asChild: true, children: _jsxs(Button, { type: "button", disabled: disabled, "aria-label": "Default model", className: "inline-flex h-10 min-w-[230px] max-w-[320px] items-center justify-between gap-3 rounded-md border border-border bg-background px-3 text-start text-sm text-foreground transition-colors hover:bg-accent/40 disabled:cursor-not-allowed disabled:opacity-60", children: [_jsx("span", { className: "truncate", children: selectedLabel }), _jsx(IconChevronDown, { size: 15, className: "shrink-0 text-muted-foreground" })] }) }), _jsx(PopoverContent, { align: "end", sideOffset: 6, className: "w-[min(380px,calc(100vw-2rem))] p-0", children: _jsxs(Command, { filter: (candidate, search) => candidate.toLowerCase().includes(search.toLowerCase()) ? 1 : 0, children: [_jsx(CommandInput, { placeholder: "Search providers or models..." }), _jsxs(CommandList, { className: "max-h-[min(420px,calc(100vh-8rem))]", children: [_jsx(CommandEmpty, { children: "No models found." }), _jsx(CommandGroup, { heading: "Default", children: _jsxs(CommandItem, { value: "global default shared llm", onSelect: () => {
+                                            onChange("__global__");
+                                            setOpen(false);
+                                        }, className: "items-start gap-2", children: [_jsx(IconCheck, { size: 15, className: cn("mt-0.5 shrink-0", value === "__global__" ? "opacity-100" : "opacity-0") }), _jsxs("span", { className: "flex min-w-0 flex-col", children: [_jsx("span", { children: "Global default" }), _jsx("span", { className: "text-xs text-muted-foreground", children: "Use the shared LLM default" })] })] }) }), visibleEngines.length > 0 && _jsx(CommandSeparator, {}), visibleEngines.map((engine) => {
+                                    const providerLabel = engine.name === "builder"
+                                        ? "Builder.io"
+                                        : engine.label || engine.name;
+                                    const modelIds = latestModelsOnly(engine.supportedModels);
+                                    const models = modelIds.length
+                                        ? modelIds
+                                        : engine.defaultModel
+                                            ? [engine.defaultModel]
+                                            : [];
+                                    const configured = engine.configured && engine.packageInstalled !== false;
+                                    return (_jsxs(CommandGroup, { heading: providerLabel, children: [models.map((model) => {
+                                                const optionValue = `${engine.name}::${model}`;
+                                                return (_jsxs(CommandItem, { value: `${providerLabel} ${model} ${friendlyModelName(model)}`, disabled: !configured, onSelect: () => {
+                                                        onChange(optionValue);
+                                                        setOpen(false);
+                                                    }, className: "items-start gap-2", children: [_jsx(IconCheck, { size: 15, className: cn("mt-0.5 shrink-0", value === optionValue ? "opacity-100" : "opacity-0") }), _jsx("span", { className: "truncate", children: friendlyModelName(model) })] }, optionValue));
+                                            }), !configured && (_jsxs(CommandItem, { value: `configure ${providerLabel} in integrations api keys`, onSelect: openIntegrations, className: "gap-2 text-muted-foreground", children: [_jsx(IconExternalLink, { size: 14 }), "Configure in Integrations"] }))] }, engine.name));
+                                })] })] }) })] }));
+}
+function AppModelDefaultsSectionInner({ grouped = false, open, onToggle, }) {
     const isPage = useSettingsSurface() === "page";
     const [settings, setSettings] = useState(null);
     const [selectedEngine, setSelectedEngine] = useState("");
@@ -633,19 +691,28 @@ function AppModelDefaultsSectionInner({ open, onToggle, }) {
     const notifyChanged = () => {
         window.dispatchEvent(new CustomEvent("agent-engine:configured-changed"));
     };
-    const save = async () => {
-        if (!hasPendingChange)
+    const save = async (next) => {
+        const targetEngine = next?.engine ?? selectedEngine;
+        const targetModel = (next?.model ?? selectedModel).trim();
+        const targetPendingChange = !!settings &&
+            settings.canUpdate &&
+            !!targetEngine &&
+            !!targetModel &&
+            (targetEngine !== settings.engine || targetModel !== settings.model);
+        if (!targetPendingChange)
             return;
         setSaving(true);
         setSaved(false);
         setError(null);
+        setSelectedEngine(targetEngine);
+        setSelectedModel(targetModel);
         try {
             const res = await fetch(agentNativePath("/_agent-native/agent-model-defaults"), {
                 method: "PUT",
                 headers: { "Content-Type": "application/json" },
                 body: JSON.stringify({
-                    engine: selectedEngine,
-                    model: selectedModel.trim(),
+                    engine: targetEngine,
+                    model: targetModel,
                 }),
             });
             const body = await res.json().catch(() => ({}));
@@ -691,7 +758,24 @@ function AppModelDefaultsSectionInner({ open, onToggle, }) {
             setSaving(false);
         }
     };
-    return (_jsx(SettingsSection, { id: settingsSectionDomId("app-models"), icon: _jsx(IconApps, { size: 14 }), title: "App Default Model", subtitle: "Choose the default model for this app/template when no one-off composer model is selected.", connected: loading ? undefined : hasAppDefault, open: open, onToggle: onToggle, children: loading ? (_jsx(SettingsSkeleton, { lines: 2 })) : settings ? (_jsx("div", { className: "space-y-2", children: _jsxs("div", { className: cn("rounded-md border border-border bg-accent/20", isPage ? "px-3.5 py-3" : "px-2.5 py-2"), children: [_jsxs("div", { className: "mb-2 flex items-center justify-between gap-2", children: [_jsxs("div", { className: "min-w-0", children: [_jsx("p", { className: cn("truncate font-medium text-foreground", subTextClass(isPage)), children: friendlyAppName(settings.appId) || "This app" }), _jsx("p", { className: cn("mt-0.5 text-muted-foreground", noteTextClass(isPage)), children: hasAppDefault
+    return (_jsx(SettingsSection, { id: settingsSectionDomId("app-models"), icon: _jsx(IconApps, { size: 14 }), title: "App Default Model", subtitle: "Choose the model used by this app by default.", connected: loading ? undefined : hasAppDefault, grouped: isPage && grouped, open: open, onToggle: onToggle, children: loading ? (_jsx(SettingsSkeleton, { lines: 2 })) : settings ? (isPage ? (_jsxs(SettingsRow, { className: grouped ? undefined : "-mx-5 sm:-mx-6", label: "Default model", description: hasAppDefault
+                ? `Used by ${friendlyAppName(settings.appId) || "this app"} · ${scopeLabel}.`
+                : "Uses the global LLM default.", status: _jsx("span", { className: "text-xs text-muted-foreground", children: settings.source }), control: _jsx(AppDefaultModelPicker, { engines: settings.engines, value: hasAppDefault
+                    ? `${selectedEngine}::${selectedModel}`
+                    : "__global__", disabled: !settings.canUpdate || saving, onChange: (next) => {
+                    const value = next;
+                    if (value === "__global__") {
+                        void reset();
+                        return;
+                    }
+                    const separator = value.indexOf("::");
+                    if (separator < 1)
+                        return;
+                    void save({
+                        engine: value.slice(0, separator),
+                        model: value.slice(separator + 2),
+                    });
+                } }), children: [!settings.canUpdate && (_jsx("p", { className: "text-xs text-muted-foreground", children: "Only organization owners and admins can change this setting." })), error && _jsx("p", { className: "text-xs text-destructive", children: error })] })) : (_jsx("div", { className: "space-y-2", children: _jsxs("div", { className: cn("rounded-md border border-border bg-accent/20", isPage ? "px-3.5 py-3" : "px-2.5 py-2"), children: [_jsxs("div", { className: "mb-2 flex items-center justify-between gap-2", children: [_jsxs("div", { className: "min-w-0", children: [_jsx("p", { className: cn("truncate font-medium text-foreground", subTextClass(isPage)), children: friendlyAppName(settings.appId) || "This app" }), _jsx("p", { className: cn("mt-0.5 text-muted-foreground", noteTextClass(isPage)), children: hasAppDefault
                                             ? `Applies to ${scopeLabel}.`
                                             : "Using the global LLM default." })] }), _jsx("span", { className: cn("shrink-0 rounded-full bg-background px-2 py-0.5 font-medium text-muted-foreground", noteTextClass(isPage)), children: settings.source })] }), _jsxs("div", { className: "space-y-2", children: [_jsx(SettingsSelect, { label: "Provider", value: selectedEngine, options: engineOptions, onValueChange: (value) => {
                                     setSelectedEngine(value);
@@ -704,7 +788,7 @@ function AppModelDefaultsSectionInner({ open, onToggle, }) {
                                 }, onEnter: () => {
                                     if (hasPendingChange)
                                         void save();
-                                } }), _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." })) }));
+                                } }), _jsxs("div", { className: "flex items-center gap-1.5", children: [_jsx(Button, { type: "button", intent: "primary", emphasis: "solid", onClick: () => void 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, }) {
@@ -791,7 +875,7 @@ function EmailSectionInner({ open, onToggle, }) {
                                             saveSendgrid();
                                     }, 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, }) {
+function AgentLimitsSectionInner({ grouped = false, open, onToggle, }) {
     const isPage = useSettingsSurface() === "page";
     const [settings, setSettings] = useState(null);
     const [value, setValue] = useState("");
@@ -893,11 +977,21 @@ function AgentLimitsSectionInner({ open, onToggle, }) {
             setSaving(false);
         }
     };
-    return (_jsx(SettingsSection, { id: settingsSectionDomId("limits"), icon: _jsx(IconGauge, { size: 14 }), title: "Agent Limits", subtitle: "Control how long a single agent response can work before pausing.", connected: loading
+    return (_jsx(SettingsSection, { id: settingsSectionDomId("limits"), icon: _jsx(IconGauge, { size: 14 }), title: "Agent Limits", subtitle: "Set how long a response can work before pausing.", connected: loading
             ? undefined
             : settings
                 ? settings.maxIterations !== settings.defaultMaxIterations
-                : false, open: open, onToggle: onToggle, children: loading ? (_jsx(SettingsSkeleton, { lines: 2 })) : settings ? (_jsx("div", { className: "space-y-2", children: _jsxs("div", { className: cn("rounded-md border border-border bg-accent/20", isPage ? "px-3.5 py-3" : "px-2.5 py-2"), children: [_jsxs("div", { className: "flex items-center justify-between gap-2", children: [_jsxs("div", { children: [_jsx("p", { className: cn("font-medium text-foreground", subTextClass(isPage)), children: "Max iterations" }), _jsxs("p", { className: cn("mt-0.5 text-muted-foreground", noteTextClass(isPage)), children: ["Applies to ", scopeLabel, ". Default is", " ", settings.defaultMaxIterations.toLocaleString(), "."] })] }), _jsx("span", { className: cn("rounded-full bg-background px-2 py-0.5 font-medium text-muted-foreground", noteTextClass(isPage)), children: settings.source })] }), _jsxs("div", { className: "mt-2 flex items-center gap-1.5", children: [_jsx("input", { type: "number", min: settings.minMaxIterations, max: settings.maxMaxIterations, value: value, disabled: !settings.canUpdate || saving, onChange: (e) => {
+                : false, grouped: isPage && grouped, open: open, onToggle: onToggle, children: loading ? (_jsx(SettingsSkeleton, { lines: 2 })) : settings ? (isPage ? (_jsx(SettingsRow, { className: grouped ? undefined : "-mx-5 sm:-mx-6", label: "Max iterations", description: `Default ${settings.defaultMaxIterations.toLocaleString()} · applies to ${scopeLabel}.`, status: _jsx("span", { className: "text-xs text-muted-foreground", children: settings.source }), control: _jsxs(Popover, { children: [_jsx(PopoverTrigger, { asChild: true, children: _jsx(ManageButton, {}) }), _jsx(PopoverContent, { align: "end", sideOffset: 6, className: "w-80 p-4", children: _jsxs("div", { className: "space-y-3", children: [_jsxs("div", { children: [_jsx("p", { className: "text-sm font-medium text-foreground", children: "Max iterations" }), _jsx("p", { className: "mt-1 text-xs text-muted-foreground", children: "Choose how long a response can work before pausing." })] }), _jsxs("div", { className: "flex items-center gap-1.5", children: [_jsx("input", { type: "number", min: settings.minMaxIterations, max: settings.maxMaxIterations, value: value, disabled: !settings.canUpdate || saving, onChange: (event) => {
+                                                setValue(event.target.value);
+                                                setError(null);
+                                            }, onKeyDown: (event) => {
+                                                if (event.key === "Enter" && hasPendingChange) {
+                                                    void save();
+                                                }
+                                            }, className: cn(textInputClass(true), "min-w-0 flex-1 disabled:opacity-60"), style: CONTROL_STYLE_PAGE }), _jsx(Button, { type: "button", intent: "primary", emphasis: "solid", onClick: save, disabled: !hasPendingChange || saving, className: pillButtonClass(true, "solid"), children: saving ? (_jsx(IconLoader2, { size: 14, className: "animate-spin" })) : saved ? (_jsx(IconCheck, { size: 14 })) : ("Save") }), _jsx(Button, { type: "button", intent: "neutral", emphasis: "outline", onClick: reset, disabled: !settings.canUpdate ||
+                                                saving ||
+                                                settings.maxIterations ===
+                                                    settings.defaultMaxIterations, className: pillButtonClass(true, "outline"), children: "Reset" })] }), !settings.canUpdate && (_jsx("p", { className: "text-xs text-muted-foreground", children: "Only organization owners and admins can change this limit." })), error && (_jsx("p", { className: "text-xs text-destructive", children: error }))] }) })] }) })) : (_jsx("div", { className: "space-y-2", children: _jsxs("div", { className: cn("rounded-md border border-border bg-accent/20", isPage ? "px-3.5 py-3" : "px-2.5 py-2"), children: [_jsxs("div", { className: "flex items-center justify-between gap-2", children: [_jsxs("div", { children: [_jsx("p", { className: cn("font-medium text-foreground", subTextClass(isPage)), children: "Max iterations" }), _jsxs("p", { className: cn("mt-0.5 text-muted-foreground", noteTextClass(isPage)), children: ["Applies to ", scopeLabel, ". Default is", " ", settings.defaultMaxIterations.toLocaleString(), "."] })] }), _jsx("span", { className: cn("rounded-full bg-background px-2 py-0.5 font-medium text-muted-foreground", noteTextClass(isPage)), children: settings.source })] }), _jsxs("div", { className: "mt-2 flex items-center gap-1.5", children: [_jsx("input", { type: "number", min: settings.minMaxIterations, max: settings.maxMaxIterations, value: value, disabled: !settings.canUpdate || saving, onChange: (e) => {
                                     setValue(e.target.value);
                                     setError(null);
                                 }, onKeyDown: (e) => {
@@ -905,27 +999,11 @@ function AgentLimitsSectionInner({ open, onToggle, }) {
                                         void save();
                                 }, 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." })) }));
+                                    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." })) }));
 }
 export function areExtensionSettingsEnabled(options = {}) {
     return options.extensionTools === true;
 }
-// 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
-// capability it is — not the deployment environment (NODE_ENV).
-const agentModeOptions = [
-    {
-        value: "production",
-        label: "App mode",
-        description: "App tools only; code, bash, and files require Builder or a local clone.",
-    },
-    {
-        value: "development",
-        label: "Code mode",
-        description: "Full access to code editing, bash, and files.",
-    },
-];
 function CapabilityStatusRow({ label, value, active, }) {
     return (_jsxs("div", { className: "flex items-center justify-between gap-2 text-[10px]", children: [_jsxs("span", { className: "flex items-center gap-1.5 text-muted-foreground", children: [_jsx("span", { className: `h-1.5 w-1.5 rounded-full ${active ? "bg-green-500" : "bg-muted-foreground/30"}`, "aria-hidden": "true" }), label] }), _jsx("span", { className: "min-w-0 truncate text-end text-foreground", children: value })] }));
 }
@@ -938,7 +1016,7 @@ function CapabilityStatusStrip({ isDevMode, builderConnected, builderLoading, bu
             : "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", 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 SettingsPanelContent({ isDevMode, onToggleDevMode, showDevToggle, devAppUrl, initialSection, sectionRequestKey, sections = ALL_SETTINGS_SECTIONS, showCapabilityStrip = true, className, surface = "sidebar", builderConnectionOwnedExternally = false, }) {
+function SettingsPanelContent({ isDevMode, initialSection, sectionRequestKey, sections = ALL_SETTINGS_SECTIONS, showCapabilityStrip = true, className, surface = "sidebar", builderConnectionOwnedExternally = false, }) {
     const { status: builder, loading: builderLoading } = useBuilderStatus({
         enabled: !builderConnectionOwnedExternally,
     });
@@ -969,23 +1047,19 @@ function SettingsPanelContent({ isDevMode, onToggleDevMode, showDevToggle, devAp
     });
     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";
-                            if (nextIsDev !== isDevMode)
-                                onToggleDevMode();
-                        } })) })), showCapabilityStrip && (_jsx(CapabilityStatusStrip, { isDevMode: isDevMode, builderConnected: connected, builderLoading: builderLoading, builderBranchesAvailable: builderBranchesAvailable, onOpenLlm: () => openSettingsSection("llm", true) })), shouldShowSection("llm") && (_jsx(LLMSectionInner, { builderFlow: builderFlow, builderLoading: builderLoading, connectUrl: connectUrl, connected: connected, orgName: orgName, envManaged: envManaged, credentialSource: credentialSource, open: openSection === "llm", onToggle: () => toggle("llm") })), shouldShowSection("app-models") && (_jsx(AppModelDefaultsSectionInner, { open: openSection === "app-models", onToggle: () => toggle("app-models") })), shouldShowSection("limits") && (_jsx(AgentLimitsSectionInner, { open: openSection === "limits", onToggle: () => toggle("limits") })), shouldShowSection("voice") && (_jsx(SettingsSection, { id: settingsSectionDomId("voice"), icon: _jsx(IconMicrophone, { size: 14 }), title: "Voice Transcription", subtitle: "How the composer microphone turns your voice into text.", open: openSection === "voice", onToggle: () => toggle("voice"), children: _jsx(VoiceTranscriptionSection, {}) })), shouldShowSection("demo-mode") && (_jsx(SettingsSection, { id: settingsSectionDomId("demo-mode"), icon: _jsx(IconEyeOff, { size: 14 }), title: "Demo mode", subtitle: "Replace displayed emails with realistic fake data in this browser and reshape supported charts for presentations. Backend, MCP, and agent results stay real and access-scoped.", open: openSection === "demo-mode", onToggle: () => toggle("demo-mode"), children: _jsx(DemoModeSection, {}) })), shouldShowSection("automations") && (_jsx(SettingsSection, { id: settingsSectionDomId("automations"), icon: _jsx(IconBolt, { size: 14 }), title: "Automations", subtitle: "Scheduled and event-triggered agent tasks.", open: openSection === "automations", onToggle: () => toggle("automations"), children: _jsx(AutomationsSection, {}) })), shouldShowSection("secrets") && (_jsx(SettingsSection, { id: settingsSectionDomId("secrets"), icon: _jsx(IconKey, { size: 14 }), title: "API Keys & Connections", subtitle: "Service credentials and automation keys.", open: openSection === "secrets", onToggle: () => toggle("secrets"), children: _jsx(SecretsSection, { focusKey: focusSecretKey }) })), shouldShowSection("hosting") && (_jsx(SettingsSection, { id: settingsSectionDomId("hosting"), icon: _jsx(IconCloud, { size: 14 }), title: "Hosting", subtitle: "Deploy your app to the cloud.", connected: connected, open: openSection === "hosting", onToggle: () => toggle("hosting"), children: _jsxs("div", { className: "space-y-2", children: [_jsx(UseBuilderCard, { builderFlow: builderFlow, connectUrl: connectUrl, connected: connected, orgName: orgName, envManaged: envManaged, credentialSource: credentialSource, trackingSource: "hosting_settings", trackingFlow: "hosting" }), _jsx(ManualSetupCard, { hint: "Deploy manually to Netlify, Vercel, Cloudflare, or any Nitro-supported target.", docsUrl: "https://www.builder.io/c/docs/agent-native-deployment?utm_source=agent-native&utm_medium=product&utm_campaign=onboarding&utm_content=deployment_settings", dim: connected })] }) })), shouldShowSection("database") && (_jsx(SettingsSection, { id: settingsSectionDomId("database"), icon: _jsx(IconDatabase, { size: 14 }), title: "Database", subtitle: "Connect a cloud database for persistent storage.", connected: connected, open: openSection === "database", onToggle: () => toggle("database"), children: _jsxs("div", { className: "space-y-2", children: [_jsx(UseBuilderCard, { builderFlow: builderFlow, connectUrl: connectUrl, connected: connected, orgName: orgName, envManaged: envManaged, credentialSource: credentialSource, trackingSource: "database_settings", trackingFlow: "database" }), _jsx(ManualSetupCard, { hint: "Set DATABASE_URL in your .env to connect Neon, Supabase, Turso, any Postgres/SQLite database, or local PGlite with pglite:./data/pglite.", docsUrl: "https://www.builder.io/c/docs/agent-native-database?utm_source=agent-native&utm_medium=product&utm_campaign=onboarding&utm_content=database_settings", dim: connected })] }) })), shouldShowSection("uploads") && (_jsx(SettingsSection, { id: settingsSectionDomId("uploads"), icon: _jsx(IconUpload, { size: 14 }), title: "File uploads", subtitle: "Where user-uploaded files (avatars, chat attachments) are stored.", connected: connected, open: openSection === "uploads", onToggle: () => toggle("uploads"), children: _jsxs("div", { className: "space-y-2", children: [_jsx(UseBuilderCard, { builderFlow: builderFlow, connectUrl: connectUrl, connected: connected, orgName: orgName, envManaged: envManaged, credentialSource: credentialSource, trackingSource: "file_upload_settings", trackingFlow: "file_upload" }), _jsx(ManualSetupCard, { hint: "Without a provider, files are stored as base64 in your database. Fine for dev, not recommended for production.", docsUrl: "https://www.builder.io/c/docs/agent-native-file-uploads?utm_source=agent-native&utm_medium=product&utm_campaign=onboarding&utm_content=file_upload_settings", dim: connected })] }) })), shouldShowSection("auth") && (_jsx(SettingsSection, { id: settingsSectionDomId("auth"), icon: _jsx(IconShield, { size: 14 }), title: "Authentication", subtitle: "Set up user authentication and access control.", connected: connected, open: openSection === "auth", onToggle: () => toggle("auth"), children: _jsxs("div", { className: "space-y-2", children: [_jsx(UseBuilderCard, { builderFlow: builderFlow, connectUrl: connectUrl, connected: connected, orgName: orgName, envManaged: envManaged, credentialSource: credentialSource, trackingSource: "auth_settings", trackingFlow: "auth" }), _jsx(ManualSetupCard, { hint: "Configure Better Auth with BETTER_AUTH_SECRET and optional Google/GitHub OAuth providers.", docsUrl: "https://www.builder.io/c/docs/agent-native-authentication?utm_source=agent-native&utm_medium=product&utm_campaign=onboarding&utm_content=authentication_settings", dim: connected })] }) })), shouldShowSection("email") && (_jsx(EmailSectionInner, { open: openSection === "email", onToggle: () => toggle("email") })), shouldShowSection("browser") && (_jsx(SettingsSection, { id: settingsSectionDomId("browser"), icon: _jsx(IconBrowser, { size: 14 }), title: "Browser Automation", subtitle: "Let agents control a real browser for web tasks.", connected: builderConnectionOwnedExternally ? undefined : connected, open: openSection === "browser", onToggle: () => toggle("browser"), children: !builderConnectionOwnedExternally ? (_jsx(UseBuilderCard, { builderFlow: builderFlow, connectUrl: connectUrl, connected: connected, orgName: orgName, envManaged: envManaged, credentialSource: credentialSource, trackingSource: "browser_settings", trackingFlow: "browser_automation" })) : null })), builderBranchesAvailable && shouldShowSection("background") && (_jsx(SettingsSection, { id: settingsSectionDomId("background"), icon: _jsx(IconGitBranch, { size: 14 }), title: "Background Agent", subtitle: "Make code changes from production mode via Builder.", connected: connected, open: openSection === "background", onToggle: () => toggle("background"), children: _jsx(UseBuilderCard, { builderFlow: builderFlow, connectUrl: connectUrl, connected: connected, orgName: orgName, envManaged: envManaged, credentialSource: credentialSource, trackingSource: "background_agent_settings", trackingFlow: "background_agent" }) })), shouldShowSection("integrations") && (_jsx(SettingsSection, { id: settingsSectionDomId("integrations"), icon: _jsx(IconPlugConnected, { size: 14 }), title: "Integrations", subtitle: "Connect messaging platforms and external services.", open: openSection === "integrations", onToggle: () => toggle("integrations"), children: _jsx(Suspense, { fallback: null, children: _jsx(IntegrationsPanel, {}) }) })), shouldShowSection("usage") && (_jsx(SettingsSection, { id: settingsSectionDomId("usage"), icon: _jsx(IconCoin, { size: 14 }), title: "Usage", subtitle: "Track token consumption and estimated cost \u2014 broken down by chat, automations, and background jobs.", open: openSection === "usage", onToggle: () => toggle("usage"), children: _jsx(UsageSection, {}) })), shouldShowSection("a2a") && (_jsx(SettingsSection, { id: settingsSectionDomId("a2a"), icon: _jsx(IconTopologyRing2, { size: 14 }), title: "Connected Agents (A2A)", subtitle: "Manage remote agents connected via the A2A protocol.", open: openSection === "a2a", onToggle: () => toggle("a2a"), children: _jsx(AgentsSection, {}) }))] }) }));
+    return (_jsx(SettingsSurfaceProvider, { surface: surface, children: _jsxs("div", { className: cn(isPage ? "space-y-8" : "flex-1 min-h-0 overflow-y-auto p-3 space-y-2", className), style: isPage ? undefined : { overflowY: "auto" }, children: [showCapabilityStrip && (_jsx(CapabilityStatusStrip, { isDevMode: isDevMode, builderConnected: connected, builderLoading: builderLoading, builderBranchesAvailable: builderBranchesAvailable, onOpenLlm: () => openSettingsSection("llm", true) })), isPage &&
+                    ["llm", "app-models", "limits", "voice"].some((section) => shouldShowSection(section)) && (_jsxs(SettingsGroup, { title: "Agent", children: [shouldShowSection("llm") && (_jsx(LLMSectionInner, { builderFlow: builderFlow, builderLoading: builderLoading, connectUrl: connectUrl, connected: connected, orgName: orgName, envManaged: envManaged, credentialSource: credentialSource, grouped: true, open: openSection === "llm", onToggle: () => toggle("llm") })), shouldShowSection("app-models") && (_jsx(AppModelDefaultsSectionInner, { grouped: true, open: openSection === "app-models", onToggle: () => toggle("app-models") })), shouldShowSection("limits") && (_jsx(AgentLimitsSectionInner, { grouped: true, open: openSection === "limits", onToggle: () => toggle("limits") })), shouldShowSection("voice") && (_jsx(SettingsSection, { id: settingsSectionDomId("voice"), icon: _jsx(IconMicrophone, { size: 14 }), title: "Voice Transcription", subtitle: "Choose how voice input is transcribed.", grouped: true, flat: true, open: openSection === "voice", onToggle: () => toggle("voice"), children: _jsx(VoiceTranscriptionSection, { compact: true }) }))] })), isPage &&
+                    ["automations", "background"].some((section) => shouldShowSection(section)) && (_jsxs(SettingsGroup, { title: "Agent workflows", children: [shouldShowSection("automations") && (_jsx(SettingsSection, { id: settingsSectionDomId("automations"), icon: _jsx(IconBolt, { size: 14 }), title: "Automations", subtitle: "Scheduled and event-triggered agent tasks.", grouped: true, flat: true, open: openSection === "automations", onToggle: () => toggle("automations"), children: _jsx(SettingsRow, { label: "Automations", description: "Schedule agent tasks or run them from events.", control: _jsxs("a", { href: "/settings#agent:automations", className: "inline-flex items-center gap-1 rounded-md border border-border px-3 py-1.5 text-sm font-medium text-foreground no-underline transition-colors hover:bg-accent/40", children: ["Open automations", _jsx(IconExternalLink, { size: 14 })] }) }) })), shouldShowSection("background") && (_jsx(SettingsSection, { id: settingsSectionDomId("background"), icon: _jsx(IconGitBranch, { size: 14 }), title: "Background Agent", subtitle: "Make code changes from production mode via Builder.", grouped: true, flat: true, connected: connected, open: openSection === "background", onToggle: () => toggle("background"), children: _jsx(SettingsRow, { label: "Background agent", description: "Make code changes from production mode via Builder.", control: _jsx(UseBuilderCard, { builderFlow: builderFlow, connectUrl: connectUrl, connected: connected, orgName: orgName, envManaged: envManaged, credentialSource: credentialSource, trackingSource: "background_agent_settings", trackingFlow: "background_agent", compact: true }) }) }))] })), !isPage && shouldShowSection("llm") && (_jsx(LLMSectionInner, { builderFlow: builderFlow, builderLoading: builderLoading, connectUrl: connectUrl, connected: connected, orgName: orgName, envManaged: envManaged, credentialSource: credentialSource, open: openSection === "llm", onToggle: () => toggle("llm") })), !isPage && shouldShowSection("app-models") && (_jsx(AppModelDefaultsSectionInner, { open: openSection === "app-models", onToggle: () => toggle("app-models") })), !isPage && shouldShowSection("limits") && (_jsx(AgentLimitsSectionInner, { open: openSection === "limits", onToggle: () => toggle("limits") })), !isPage && shouldShowSection("voice") && (_jsx(SettingsSection, { id: settingsSectionDomId("voice"), icon: _jsx(IconMicrophone, { size: 14 }), title: "Voice Transcription", subtitle: "How the composer microphone turns your voice into text.", flat: true, open: openSection === "voice", onToggle: () => toggle("voice"), children: _jsx(VoiceTranscriptionSection, {}) })), shouldShowSection("demo-mode") && (_jsx(SettingsSection, { id: settingsSectionDomId("demo-mode"), icon: _jsx(IconEyeOff, { size: 14 }), title: "Demo mode", subtitle: "Replace displayed emails with realistic fake data in this browser and reshape supported charts for presentations. Backend, agent integrations, and agent results stay real and access-scoped.", flat: true, open: openSection === "demo-mode", onToggle: () => toggle("demo-mode"), children: _jsx(DemoModeSection, {}) })), !isPage && shouldShowSection("automations") && (_jsx(SettingsSection, { id: settingsSectionDomId("automations"), icon: _jsx(IconBolt, { size: 14 }), title: "Automations", subtitle: "Scheduled and event-triggered agent tasks.", flat: true, open: openSection === "automations", onToggle: () => toggle("automations"), children: _jsx(AutomationsSection, {}) })), shouldShowSection("secrets") && (_jsx(SettingsSection, { id: settingsSectionDomId("secrets"), icon: _jsx(IconKey, { size: 14 }), title: "API keys", subtitle: "Service credentials and automation keys.", flat: true, open: openSection === "secrets", onToggle: () => toggle("secrets"), children: _jsx(SecretsSection, { focusKey: focusSecretKey }) })), shouldShowSection("hosting") && (_jsx(SettingsSection, { id: settingsSectionDomId("hosting"), icon: _jsx(IconCloud, { size: 14 }), title: "Hosting", subtitle: "Deploy your app to the cloud.", flat: true, connected: connected, open: openSection === "hosting", onToggle: () => toggle("hosting"), children: _jsxs("div", { className: "space-y-2", children: [_jsx(UseBuilderCard, { builderFlow: builderFlow, connectUrl: connectUrl, connected: connected, orgName: orgName, envManaged: envManaged, credentialSource: credentialSource, trackingSource: "hosting_settings", trackingFlow: "hosting" }), _jsx(ManualSetupCard, { hint: "Deploy manually to Netlify, Vercel, Cloudflare, or any Nitro-supported target.", docsUrl: "https://www.builder.io/c/docs/agent-native-deployment?utm_source=agent-native&utm_medium=product&utm_campaign=onboarding&utm_content=deployment_settings", dim: connected })] }) })), shouldShowSection("database") && (_jsx(SettingsSection, { id: settingsSectionDomId("database"), icon: _jsx(IconDatabase, { size: 14 }), title: "Database", subtitle: "Connect a cloud database for persistent storage.", flat: true, connected: connected, open: openSection === "database", onToggle: () => toggle("database"), children: _jsxs("div", { className: "space-y-2", children: [_jsx(UseBuilderCard, { builderFlow: builderFlow, connectUrl: connectUrl, connected: connected, orgName: orgName, envManaged: envManaged, credentialSource: credentialSource, trackingSource: "database_settings", trackingFlow: "database" }), _jsx(ManualSetupCard, { hint: "Set DATABASE_URL in your .env to connect Neon, Supabase, Turso, any Postgres/SQLite database, or local PGlite with pglite:./data/pglite.", docsUrl: "https://www.builder.io/c/docs/agent-native-database?utm_source=agent-native&utm_medium=product&utm_campaign=onboarding&utm_content=database_settings", dim: connected })] }) })), shouldShowSection("uploads") && (_jsx(SettingsSection, { id: settingsSectionDomId("uploads"), icon: _jsx(IconUpload, { size: 14 }), title: "File uploads", subtitle: "Where user-uploaded files (avatars, chat attachments) are stored.", flat: true, connected: connected, open: openSection === "uploads", onToggle: () => toggle("uploads"), children: _jsxs("div", { className: "space-y-2", children: [_jsx(UseBuilderCard, { builderFlow: builderFlow, connectUrl: connectUrl, connected: connected, orgName: orgName, envManaged: envManaged, credentialSource: credentialSource, trackingSource: "file_upload_settings", trackingFlow: "file_upload" }), _jsx(ManualSetupCard, { hint: "Without a provider, files are stored as base64 in your database. Fine for dev, not recommended for production.", docsUrl: "https://www.builder.io/c/docs/agent-native-file-uploads?utm_source=agent-native&utm_medium=product&utm_campaign=onboarding&utm_content=file_upload_settings", dim: connected })] }) })), shouldShowSection("auth") && (_jsx(SettingsSection, { id: settingsSectionDomId("auth"), icon: _jsx(IconShield, { size: 14 }), title: "Authentication", subtitle: "Set up user authentication and access control.", flat: true, connected: connected, open: openSection === "auth", onToggle: () => toggle("auth"), children: _jsxs("div", { className: "space-y-2", children: [_jsx(UseBuilderCard, { builderFlow: builderFlow, connectUrl: connectUrl, connected: connected, orgName: orgName, envManaged: envManaged, credentialSource: credentialSource, trackingSource: "auth_settings", trackingFlow: "auth" }), _jsx(ManualSetupCard, { hint: "Configure Better Auth with BETTER_AUTH_SECRET and optional Google/GitHub OAuth providers.", docsUrl: "https://www.builder.io/c/docs/agent-native-authentication?utm_source=agent-native&utm_medium=product&utm_campaign=onboarding&utm_content=authentication_settings", dim: connected })] }) })), shouldShowSection("email") && (_jsx(EmailSectionInner, { open: openSection === "email", onToggle: () => toggle("email") })), shouldShowSection("browser") && (_jsx(SettingsSection, { id: settingsSectionDomId("browser"), icon: _jsx(IconBrowser, { size: 14 }), title: "Browser Automation", subtitle: "Let agents control a real browser for web tasks.", flat: true, connected: builderConnectionOwnedExternally ? undefined : connected, open: openSection === "browser", onToggle: () => toggle("browser"), children: !builderConnectionOwnedExternally ? (_jsx(UseBuilderCard, { builderFlow: builderFlow, connectUrl: connectUrl, connected: connected, orgName: orgName, envManaged: envManaged, credentialSource: credentialSource, trackingSource: "browser_settings", trackingFlow: "browser_automation" })) : null })), !isPage &&
+                    builderBranchesAvailable &&
+                    shouldShowSection("background") && (_jsx(SettingsSection, { id: settingsSectionDomId("background"), icon: _jsx(IconGitBranch, { size: 14 }), title: "Background Agent", subtitle: "Make code changes from production mode via Builder.", flat: true, connected: connected, open: openSection === "background", onToggle: () => toggle("background"), children: _jsx(UseBuilderCard, { builderFlow: builderFlow, connectUrl: connectUrl, connected: connected, orgName: orgName, envManaged: envManaged, credentialSource: credentialSource, trackingSource: "background_agent_settings", trackingFlow: "background_agent" }) })), shouldShowSection("integrations") && (_jsx(SettingsSection, { id: settingsSectionDomId("integrations"), icon: _jsx(IconPlugConnected, { size: 14 }), title: "Integrations", subtitle: "Connect messaging platforms and external services.", flat: true, open: openSection === "integrations", onToggle: () => toggle("integrations"), children: _jsx(Suspense, { fallback: null, children: _jsx(IntegrationsPanel, {}) }) })), shouldShowSection("usage") && (_jsx(SettingsSection, { id: settingsSectionDomId("usage"), icon: _jsx(IconCoin, { size: 14 }), title: "Usage", subtitle: "Track token consumption and estimated cost \u2014 broken down by chat, automations, and background jobs.", flat: true, open: openSection === "usage", onToggle: () => toggle("usage"), children: _jsx(UsageSection, {}) })), shouldShowSection("a2a") && (_jsx(SettingsSection, { id: settingsSectionDomId("a2a"), icon: _jsx(IconTopologyRing2, { size: 14 }), title: "Connected Agents (A2A)", subtitle: "Manage remote agents connected via the A2A protocol.", flat: true, open: openSection === "a2a", onToggle: () => toggle("a2a"), children: _jsx(AgentsSection, {}) }))] }) }));
 }
 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(McpConnectionsCard, {}), _jsx(SettingsPanelContent, { ...settingsPanelProps, surface: "page", sections: CONNECTION_SETTINGS_SECTIONS, showCapabilityStrip: false, className: "w-full", builderConnectionOwnedExternally: true })] }));
+    return (_jsxs("div", { className: "w-full space-y-8", children: [_jsx(Suspense, { fallback: null, children: _jsx(IntegrationsPanel, {}) }), _jsx(BuilderConnectCard, { trackingSource: "settings_connections" }), _jsx(SettingsPanelContent, { ...settingsPanelProps, surface: "page", sections: INTEGRATION_SETTINGS_SECTIONS.filter((section) => section !== "integrations"), showCapabilityStrip: false, className: "w-full", builderConnectionOwnedExternally: true })] }));
 }
-export function AgentSettingsContent({ className, } = {}) {
+export function AgentSettingsContent({ className, sections = AGENT_SETTINGS_SECTIONS, } = {}) {
     const { isDevMode, canToggle, setDevMode } = useDevMode();
     const settingsPanelProps = useMemo(() => ({
         isDevMode,
@@ -994,7 +1068,7 @@ export function AgentSettingsContent({ className, } = {}) {
         },
         showDevToggle: canToggle,
     }), [canToggle, isDevMode, setDevMode]);
-    return (_jsx(SettingsPanelContent, { ...settingsPanelProps, surface: "page", sections: AGENT_SETTINGS_SECTIONS, showCapabilityStrip: false, className: cn("mx-auto w-full max-w-2xl", className) }));
+    return (_jsx(SettingsPanelContent, { ...settingsPanelProps, surface: "page", sections: sections, showCapabilityStrip: false, className: cn("w-full", className) }));
 }
 export function useAgentSettingsTabs(options = {}) {
     const { isDevMode, canToggle, setDevMode } = useDevMode();
@@ -1015,27 +1089,93 @@ export function useAgentSettingsTabs(options = {}) {
             return tab;
         };
         const agent = searchTab("agent");
-        const connections = searchTab("connections");
+        const integrations = searchTab("integrations");
         const organization = searchTab("organization");
         const workspace = searchTab("workspace");
+        const overviewSearchEntries = (agent.searchEntries ?? []).filter((entry) => entry.hash !== "automations" && entry.hash !== "a2a");
+        const resourceSearchEntries = [
+            {
+                id: "agent-resource-files",
+                label: "Files",
+                keywords: "files uploads documents context resources",
+                description: "Agent resources",
+                tabId: "agent:resources",
+                hash: "agent:resources:files",
+                icon: IconFolder,
+            },
+            {
+                id: "agent-resource-instructions",
+                label: "Instructions",
+                keywords: "instructions agents md behavior context",
+                description: "Agent resources",
+                tabId: "agent:resources",
+                hash: "agent:resources:instructions",
+                icon: IconFolder,
+            },
+            {
+                id: "agent-resource-memory",
+                label: "Memory",
+                keywords: "memory personalization context",
+                description: "Agent resources",
+                tabId: "agent:resources",
+                hash: "agent:resources:memory",
+                icon: IconFolder,
+            },
+            {
+                id: "agent-resource-agents",
+                label: "Agents",
+                keywords: "agents custom agents delegate",
+                description: "Agent resources",
+                tabId: "agent:resources",
+                hash: "agent:resources:agents",
+                icon: IconFolder,
+            },
+            {
+                id: "agent-resource-skills",
+                label: "Skills",
+                keywords: "skills tools capabilities",
+                description: "Agent resources",
+                tabId: "agent:resources",
+                hash: "agent:resources:skills",
+                icon: IconFolder,
+            },
+            {
+                id: "agent-resource-learnings",
+                label: "Learnings",
+                keywords: "learnings feedback memory",
+                description: "Agent resources",
+                tabId: "agent:resources",
+                hash: "agent:resources:learnings",
+                icon: IconFolder,
+            },
+            {
+                id: "agent-resource-remote-agents",
+                label: "Remote agents",
+                keywords: "remote agents connected a2a",
+                description: "Agent resources",
+                tabId: "agent:resources",
+                hash: "agent:resources:remote-agents",
+                icon: IconFolder,
+            },
+        ];
         return [
             {
-                ...connections,
+                ...integrations,
                 icon: IconPlugConnected,
-                group: "workspace",
+                group: "integrations",
                 content: _jsx(ConnectionsSettingsContent, { settingsPanelProps: baseProps }),
             },
             {
                 ...organization,
                 icon: IconUsersGroup,
                 group: "workspace",
-                content: (_jsx("div", { className: "mx-auto w-full max-w-2xl", children: _jsx(TeamPage, { showTitle: false }) })),
+                content: (_jsx("div", { className: "w-full", children: _jsx(TeamPage, { showTitle: false }) })),
             },
             {
                 ...workspace,
                 icon: IconCloud,
                 group: "workspace",
-                content: (_jsx(SettingsPanelContent, { ...baseProps, surface: "page", sections: WORKSPACE_SETTINGS_SECTIONS, showCapabilityStrip: false, className: "mx-auto w-full max-w-2xl" })),
+                content: (_jsx(SettingsPanelContent, { ...baseProps, surface: "page", sections: WORKSPACE_SETTINGS_SECTIONS, showCapabilityStrip: false, className: "w-full" })),
             },
             ...(extensionToolsEnabled
                 ? [
@@ -1050,12 +1190,68 @@ export function useAgentSettingsTabs(options = {}) {
                 ]
                 : []),
             {
-                ...agent,
+                id: "agent",
+                label: "Overview",
                 icon: IconHierarchy2,
-                group: "manage-agent",
-                href: "/agent#settings",
-                searchEntries: undefined,
-                content: _jsx(Navigate, { to: "/agent#settings", replace: true }),
+                group: "agent",
+                keywords: agent.keywords,
+                searchEntries: overviewSearchEntries,
+                content: (_jsx(AgentWorkspaceContent, { activeTab: "overview", overview: _jsx(AgentSettingsContent, { className: "w-full", sections: AGENT_SETTINGS_SECTIONS.filter((section) => section !== "automations" && section !== "a2a") }) })),
+            },
+            {
+                id: "agent:resources",
+                label: "Resources",
+                icon: IconFolder,
+                group: "agent",
+                keywords: "resources files instructions agents memory skills learnings remote agents",
+                searchEntries: resourceSearchEntries,
+                content: (_jsx(AgentWorkspaceContent, { activeTab: "resources", overview: null })),
+            },
+            {
+                id: "agent:automations",
+                label: "Automations",
+                icon: IconBolt,
+                group: "agent",
+                keywords: "automations scheduled events cron jobs tasks",
+                searchEntries: [
+                    {
+                        id: "section:automations",
+                        label: "Automations",
+                        keywords: "scheduled events cron jobs tasks",
+                        description: "Agent workflows",
+                        tabId: "agent:automations",
+                        hash: "agent:automations",
+                        icon: IconBolt,
+                    },
+                ],
+                content: (_jsx(AgentWorkspaceContent, { activeTab: "automations", overview: null })),
+            },
+            {
+                id: "agent:agents",
+                label: "Connected agents",
+                icon: IconTopologyRing2,
+                group: "agent",
+                keywords: "connected agents remote agents a2a delegate",
+                searchEntries: [
+                    {
+                        id: "section:a2a",
+                        label: "Connected agents",
+                        keywords: "remote agents a2a delegate",
+                        description: "Agent access",
+                        tabId: "agent:agents",
+                        hash: "agent:agents",
+                        icon: IconTopologyRing2,
+                    },
+                ],
+                content: _jsx(AgentWorkspaceContent, { activeTab: "agents", overview: null }),
+            },
+            {
+                id: "agent:access",
+                label: "Access",
+                icon: IconShieldLock,
+                group: "agent",
+                keywords: "access sharing permissions clients",
+                content: _jsx(AgentWorkspaceContent, { activeTab: "access", overview: null }),
             },
         ];
     }, [baseProps, extensionToolsEnabled]);