@agent-native/toolkit 0.23.1 → 0.198.2

package/dist/app/settings/SettingsPanel.js

@@ -0,0 +1,1750 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { CHATGPT_SUBSCRIPTION_DEFAULT_MODEL, CHATGPT_SUBSCRIPTION_ENGINE_NAME, CHATGPT_SUBSCRIPTION_LAB_KEY, } from "@agent-native/core/agent/chatgpt-subscription-contract";
+import { PROVIDER_ENV_PLACEHOLDERS } from "@agent-native/core/agent/engine/provider-env-vars";
+import { useDevMode } from "@agent-native/core/client/agent-chat";
+import { fetchOllamaModels, saveAgentEngineProviderSettings, setAgentEngineProvider, } from "@agent-native/core/client/agent-engine-key";
+import { AGENT_PROVIDER_CATALOG, getAgentProviderOption, providerIdForEngine, } from "@agent-native/core/client/agent-provider-catalog";
+import { agentNativePath, appMountedPath, } from "@agent-native/core/client/api-path";
+import { BuilderBMark } from "@agent-native/core/client/builder-mark";
+import { usesLiveOllamaModels, } from "@agent-native/core/client/chat-model-groups";
+import { fetchAgentEngineStatus, fetchEnvironmentStatus, } from "@agent-native/core/client/client-status-requests";
+import { callAction } from "@agent-native/core/client/hooks";
+import { useOptionalLocale, useT } from "@agent-native/core/client/i18n";
+import { useLabState } from "@agent-native/core/client/labs/use-lab";
+import { openOAuthPopup } from "@agent-native/core/client/oauth-popup";
+import { useOrg } from "@agent-native/core/client/org";
+import { buildSettingsRoute, STANDARD_APP_ROUTES, } from "@agent-native/core/navigation";
+import { docsUrl } from "@agent-native/core/shared/docs-url";
+import { Checkbox, Picker, Skeleton, TextField, } from "@agent-native/toolkit/design-system";
+import { Button as ToolkitButton } from "@agent-native/toolkit/ui/button";
+import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, } from "@agent-native/toolkit/ui/command";
+import { Popover, PopoverContent, PopoverTrigger, } from "@agent-native/toolkit/ui/popover";
+import { Tooltip, TooltipContent, TooltipTrigger, } from "@agent-native/toolkit/ui/tooltip";
+import { cn } from "@agent-native/toolkit/utils";
+import { IconChevronDown, IconChevronRight, IconCheck, IconExternalLink, IconBrain, IconHierarchy2, IconBrowser, IconGitBranch, IconCloud, IconDatabase, IconFolder, IconShield, IconPlugConnected, IconTopologyRing2, IconLoader2, IconUpload, IconCoin, IconMail, IconKey, IconMicrophone, IconEyeOff, IconBolt, IconGauge, IconApps, IconUsersGroup, IconTool, IconAlertCircle, IconSearch, } from "@tabler/icons-react";
+import React, { Suspense, lazy, useState, useEffect, useCallback, useMemo, useRef, } from "react";
+import { AgentWorkspaceContent } from "../agent-page/AgentWorkspaceContent.js";
+import { TeamPage } from "../org/TeamPage.js";
+import { useOrgSwitcherAppLinks } from "../org/workspace-app-links.js";
+import { PrimitiveButton as Button } from "../PrimitiveButton.js";
+import { McpAccessSettings } from "../resources/index.js";
+import { BuilderConnectionMenu } from "../setup-connections/index.js";
+import { AGENT_SETTINGS_SECTIONS, ALL_SETTINGS_SECTIONS, WORKSPACE_SETTINGS_SECTIONS, getAgentSettingsSearchTabs, } from "./agent-settings-search.js";
+import { AgentPersonalizationSettings } from "./AgentPersonalizationSettings.js";
+import { AgentProviderPicker } from "./AgentProviderPicker.js";
+import { AgentsSection } from "./AgentsSection.js";
+import { AutomationsSection } from "./AutomationsSection.js";
+import { DeferredBuilderConnectPopover } from "./deferred-builder-connect-popover.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 { SettingsLoadingRow, SettingsSkeleton } from "./SettingsSkeleton.js";
+import { StorageSettingsForm } from "./StorageSettingsForm.js";
+import { UsageSection } from "./UsageSection.js";
+import { useProviderKeySaveScope } from "./use-provider-key-save-scope.js";
+import { isPopupClosed, POPUP_CLOSED_CONFIRMATION_GRACE_MS, useBuilderConnectFlow, useBuilderStatus, } from "./useBuilderStatus.js";
+import { settingsSectionDomId, useSettingsPanelController, } from "./useSettingsPanelController.js";
+import { VoiceTranscriptionSection } from "./VoiceTranscriptionSection.js";
+const ManageButton = React.forwardRef(({ children = "Manage", className, ...props }, ref) => (_jsx(ToolkitButton, { ref: ref, type: "button", variant: "ghost", intent: "neutral", emphasis: "outline", className: cn("inline-flex h-9 min-h-9 items-center justify-center gap-1 rounded-md border border-border px-3 text-sm font-medium leading-none text-foreground hover:bg-accent/40 active:scale-100 [&_svg]:!size-4", className), ...props, children: children })));
+ManageButton.displayName = "SettingsManageButton";
+const IntegrationsPanel = lazy(() => import("../integrations/index.js").then((m) => ({
+    default: m.IntegrationsPanel,
+})));
+const CONTROL_STYLE = {
+    fontSize: 12,
+    lineHeight: 1,
+};
+const CONTROL_STYLE_PAGE = {
+    fontSize: 14,
+    lineHeight: 1.2,
+};
+function fieldLabelClass(isPage) {
+    return cn("font-medium text-foreground", isPage ? "text-sm" : "text-[12px]");
+}
+function subTextClass(isPage) {
+    return isPage ? "text-sm" : "text-[11px]";
+}
+function noteTextClass(isPage) {
+    return isPage ? "text-xs" : "text-[10px]";
+}
+function textInputClass(isPage) {
+    return cn("flex w-full rounded-md border border-border bg-background text-foreground outline-none transition-colors hover:bg-accent/40 focus:ring-1 focus:ring-accent placeholder:text-muted-foreground/50", isPage ? "h-10 px-3 text-sm" : "h-9 px-3 text-[12px]");
+}
+function pillButtonClass(isPage, tone = "outline") {
+    const base = cn("inline-flex items-center justify-center gap-1 rounded-md font-medium transition-colors disabled:opacity-40", isPage ? "px-3 py-1.5 text-sm" : "px-2.5 py-1 text-[10px]");
+    if (tone === "solid") {
+        return cn(base, "bg-accent text-foreground hover:bg-accent/80");
+    }
+    if (tone === "ghost") {
+        return cn(base, "text-muted-foreground hover:bg-accent/40 hover:text-foreground");
+    }
+    return cn(base, "border border-border text-foreground hover:bg-accent/40");
+}
+function SettingsSelect({ label, labelAdornment, value, options, onValueChange, disabled = false, }) {
+    const isPage = useSettingsSurface() === "page";
+    const controlStyle = isPage ? CONTROL_STYLE_PAGE : CONTROL_STYLE;
+    return (_jsxs("div", { className: "space-y-1.5", children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsx("p", { className: fieldLabelClass(isPage), children: label }), labelAdornment] }), _jsx(Picker, { mode: "select", options: options.map((option) => ({
+                    value: option.value,
+                    label: option.label,
+                    description: option.description,
+                    textValue: option.label,
+                })), value: value, onChange: (next) => {
+                    if (next != null)
+                        onValueChange(String(next));
+                }, disabled: disabled, "aria-label": label, placeholder: value, style: controlStyle, className: cn("w-full text-start text-foreground", isPage ? "text-sm" : "text-[12px]") })] }));
+}
+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 effectiveCredentialSource = credentialSource ?? builderFlow.credentialSource;
+    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 || effectiveCredentialSource !== "env" ? (_jsx("div", { className: "mt-2.5 flex items-center justify-end", children: _jsx(BuilderConnectionMenu, { flow: builderFlow, credentialSource: effectiveCredentialSource, trackingSource: trackingSource, trackingFlow: trackingFlow }) })) : null] }));
+    }
+    if (compact) {
+        return (_jsx(DeferredBuilderConnectPopover, { flow: builderFlow, onConnect: (provisionAccount) => builderFlow.start({
+                trackingSource,
+                trackingFlow,
+                provisionAccount,
+            }), children: _jsxs(Button, { type: "button", intent: "primary", emphasis: "solid", 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 }))] })] }), _jsx(DeferredBuilderConnectPopover, { flow: builderFlow, onConnect: (provisionAccount) => builderFlow.start({
+                    trackingSource,
+                    trackingFlow,
+                    provisionAccount,
+                }), children: _jsxs(Button, { type: "button", intent: "neutral", emphasis: "outline", 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] }) })] }));
+}
+function ManualSetupCard({ id, title = "Set up manually", hint, docsUrl, docsLabel = "Read the docs", children, dim, sourceBadge, bare = false, popover = false, popoverLabel = "Manage", summaryContent, }) {
+    const isPage = useSettingsSurface() === "page";
+    const titleCls = isPage ? "text-sm" : "text-[11px]";
+    const bodyCls = isPage ? "text-xs" : "text-[10px]";
+    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, collisionPadding: 16, className: "max-h-[min(640px,calc(100dvh-2rem),var(--radix-popover-content-available-height))] w-[min(420px,calc(100vw-2rem))] overflow-y-auto p-4", children: _jsxs("div", { className: "space-y-3", children: [summaryContent, content] }) })] }));
+}
+export function friendlyModelName(model) {
+    if (model === "z-ai/glm-5.2")
+        return "GLM 5.2";
+    const normalizedModel = model.replace(/^(?:anthropic|openai)\//, "");
+    const claude = normalizedModel.match(/^claude-(opus|sonnet|haiku)-(\d+)(?:[-.](\d+))?(?:-\d{8,})?$/);
+    if (claude) {
+        const tier = claude[1][0].toUpperCase() + claude[1].slice(1);
+        return `${tier} ${claude[2]}${claude[3] ? `.${claude[3]}` : ""}`;
+    }
+    if (normalizedModel.startsWith("gpt-")) {
+        const rest = normalizedModel.slice(4);
+        const gpt = rest.match(/^(\d+)(?:[.-](\d+))?(?:[.-](.+))?$/);
+        if (gpt) {
+            const suffix = gpt[3]
+                ? ` ${gpt[3]
+                    .split("-")
+                    .map((part) => part[0].toUpperCase() + part.slice(1))
+                    .join(" ")}`
+                : "";
+            const version = gpt[2] ? `${gpt[1]}.${gpt[2]}` : gpt[1];
+            return `GPT-${version}${suffix}`;
+        }
+        return `GPT-${rest}`;
+    }
+    if (/^o\d/.test(normalizedModel))
+        return normalizedModel;
+    const geminiVersioned = model.match(/^gemini-(\d+)-(\d+)-(.+?)(?:-preview)?$/);
+    if (geminiVersioned) {
+        const variant = geminiVersioned[3]
+            .split("-")
+            .map((part) => part[0].toUpperCase() + part.slice(1))
+            .join(" ");
+        return `Gemini ${geminiVersioned[1]}.${geminiVersioned[2]} ${variant}`;
+    }
+    const gemini = model.match(/^gemini-(.+?)(?:-preview)?$/);
+    if (gemini) {
+        const parts = gemini[1]
+            .split("-")
+            .map((s) => s[0].toUpperCase() + s.slice(1))
+            .join(" ");
+        return `Gemini ${parts}${model.endsWith("-preview") ? " (preview)" : ""}`;
+    }
+    return model;
+}
+function computeSourceBadge(args) {
+    const { settingsConfigured, settingsStatus } = args;
+    if (args.builderConnected)
+        return "Connected via Builder";
+    if (settingsConfigured) {
+        if (settingsStatus?.source === "env") {
+            return `Connected via ${settingsStatus.envVar ?? args.envVar ?? "env"}`;
+        }
+        if (settingsStatus?.source === "app_secrets") {
+            return "Connected via saved key";
+        }
+        return "Connected via template (server-side)";
+    }
+    if (args.envConfigured)
+        return `Connected via ${args.envVar ?? "env"}`;
+    return undefined;
+}
+function latestModelsOnly(models) {
+    const seen = new Set();
+    return models.filter((m) => {
+        const claude = m
+            .replace(/^anthropic\//, "")
+            .match(/^claude-(opus|sonnet|haiku)-/);
+        if (claude) {
+            if (seen.has(claude[1]))
+                return false;
+            seen.add(claude[1]);
+            return true;
+        }
+        const gemini = m.match(/^gemini-(\d+(?:\.\d+)?)-(.+?)(?:-preview)?$/);
+        if (gemini) {
+            const family = gemini[2];
+            if (seen.has(`gemini-${family}`))
+                return false;
+            seen.add(`gemini-${family}`);
+            return true;
+        }
+        return true;
+    });
+}
+export function AppDefaultModelField({ engine, models, value, defaultModel, disabled, onValueChange, onEnter, }) {
+    const isPage = useSettingsSurface() === "page";
+    const modelOptions = latestModelsOnly(models).map((model) => ({ value: model, label: friendlyModelName(model) }));
+    if (engine === "builder" && modelOptions.length > 0) {
+        return (_jsx(SettingsSelect, { label: "Model", value: value, options: modelOptions, onValueChange: onValueChange, disabled: disabled }));
+    }
+    return (_jsxs("div", { className: "space-y-1.5", children: [_jsx("p", { className: fieldLabelClass(isPage), children: "Model" }), _jsx(TextField, { value: value, onChange: onValueChange, disabled: disabled, list: `app-model-suggestions-${engine}`, onKeyDown: (event) => {
+                    if (event.key === "Enter")
+                        onEnter?.();
+                }, placeholder: defaultModel ?? "model-id", autoComplete: "off", "aria-label": "Model", className: cn("w-full disabled:opacity-60", isPage ? "text-sm" : "text-[12px]"), style: isPage ? CONTROL_STYLE_PAGE : CONTROL_STYLE }), modelOptions.length > 0 && (_jsx("datalist", { id: `app-model-suggestions-${engine}`, children: modelOptions.map((option) => (_jsx("option", { value: option.value, label: option.label }, option.value))) }))] }));
+}
+const PROVIDER_DOCS = {
+    anthropic: "https://console.anthropic.com/settings/keys",
+    "ai-sdk:anthropic": "https://console.anthropic.com/settings/keys",
+    "ai-sdk:openai": "https://platform.openai.com/api-keys",
+    "ai-sdk:google": "https://aistudio.google.com/apikey",
+    "ai-sdk:openrouter": "https://openrouter.ai/keys",
+    "ai-sdk:groq": "https://console.groq.com/keys",
+    "ai-sdk:mistral": "https://console.mistral.ai/api-keys/",
+    "ai-sdk:cohere": "https://dashboard.cohere.com/api-keys",
+};
+function ChatGPTSubscriptionCard({ currentEngine, canUpdateDefault, onConfigured, grouped = false, }) {
+    const isPage = useSettingsSurface() === "page";
+    const t = useT();
+    const lab = useLabState(CHATGPT_SUBSCRIPTION_LAB_KEY);
+    const [status, setStatus] = useState(null);
+    const [connecting, setConnecting] = useState(false);
+    const [error, setError] = useState(null);
+    const popupRef = useRef(null);
+    const popupClosedAtRef = useRef(null);
+    const refresh = useCallback(async () => {
+        try {
+            const next = (await callAction("get-chatgpt-subscription-status", {}, { method: "GET" }));
+            setStatus(next);
+            return next;
+        }
+        catch (cause) {
+            setError(cause instanceof Error ? cause.message : String(cause));
+            return null;
+        }
+    }, []);
+    useEffect(() => {
+        if (lab.isSuccess && lab.enabled)
+            void refresh();
+    }, [lab.enabled, lab.isSuccess, refresh]);
+    useEffect(() => {
+        const onMessage = (event) => {
+            if (event.origin === window.location.origin &&
+                event.data?.type === "agent-native-chatgpt-subscription-connected") {
+                popupRef.current = null;
+                popupClosedAtRef.current = null;
+                setConnecting(false);
+                void refresh().then((next) => {
+                    if (next?.connected)
+                        onConfigured();
+                });
+            }
+        };
+        window.addEventListener("message", onMessage);
+        return () => window.removeEventListener("message", onMessage);
+    }, [onConfigured, refresh]);
+    useEffect(() => {
+        if (!connecting || !popupRef.current)
+            return;
+        const timer = window.setInterval(() => {
+            if (!isPopupClosed(popupRef.current))
+                return;
+            popupClosedAtRef.current ??= Date.now();
+            if (Date.now() - popupClosedAtRef.current <=
+                POPUP_CLOSED_CONFIRMATION_GRACE_MS) {
+                return;
+            }
+            window.clearInterval(timer);
+            popupRef.current = null;
+            popupClosedAtRef.current = null;
+            setConnecting(false);
+            void refresh().then((next) => {
+                if (next?.connected)
+                    onConfigured();
+            });
+        }, 2000);
+        return () => window.clearInterval(timer);
+    }, [connecting, onConfigured, refresh]);
+    const connect = useCallback(() => {
+        setError(null);
+        const popup = openOAuthPopup({
+            initialUrl: agentNativePath("/_agent-native/agent-engine/chatgpt-subscription/start"),
+            features: "popup,width=520,height=720",
+        });
+        if (!popup) {
+            setError(t("agentPanel.chatgptSubscriptionPopupBlocked", {
+                defaultValue: "Allow pop-ups for this site, then try again.",
+            }));
+            return;
+        }
+        popupRef.current = popup;
+        popupClosedAtRef.current = null;
+        setConnecting(true);
+    }, [t]);
+    const disconnect = useCallback(async () => {
+        setError(null);
+        try {
+            await callAction("disconnect-chatgpt-subscription", {});
+            setStatus({ connected: false, reconnectRequired: false });
+            onConfigured();
+        }
+        catch (cause) {
+            setError(cause instanceof Error ? cause.message : String(cause));
+        }
+    }, [onConfigured]);
+    const selectSubscriptionEngine = useCallback(async () => {
+        setError(null);
+        try {
+            await callAction("manage-agent-engine", {
+                action: "set",
+                engine: CHATGPT_SUBSCRIPTION_ENGINE_NAME,
+                model: CHATGPT_SUBSCRIPTION_DEFAULT_MODEL,
+            });
+            onConfigured();
+        }
+        catch (cause) {
+            setError(cause instanceof Error ? cause.message : String(cause));
+        }
+    }, [onConfigured]);
+    if (!lab.isSuccess || !lab.enabled)
+        return null;
+    const connected = status?.connected === true;
+    const inUse = currentEngine === CHATGPT_SUBSCRIPTION_ENGINE_NAME;
+    const title = t("agentPanel.chatgptSubscriptionTitle", {
+        defaultValue: "ChatGPT subscription",
+    });
+    const description = t("agentPanel.chatgptSubscriptionDescription", {
+        defaultValue: "Experimental Codex access through your ChatGPT subscription.",
+    });
+    const statusLabel = connected ? (_jsxs("span", { className: "flex shrink-0 items-center gap-1 text-primary", children: [_jsx(IconCheck, { size: isPage ? 14 : 11 }), inUse
+                ? t("agentPanel.chatgptSubscriptionInUse", {
+                    defaultValue: "In use",
+                })
+                : t("agentPanel.chatgptSubscriptionConnected", {
+                    defaultValue: "Connected",
+                })] })) : null;
+    const actions = !connected ? (_jsx(Button, { type: "button", intent: "primary", emphasis: "solid", onClick: connect, disabled: connecting, className: cn("rounded-md bg-primary px-3 py-1.5 font-medium text-primary-foreground hover:bg-primary/90 disabled:opacity-70", isPage ? "text-sm" : "text-[11px]"), children: connecting
+            ? t("agentPanel.chatgptSubscriptionConnecting", {
+                defaultValue: "Connecting…",
+            })
+            : status?.reconnectRequired
+                ? t("agentPanel.chatgptSubscriptionReconnect", {
+                    defaultValue: "Reconnect",
+                })
+                : t("agentPanel.chatgptSubscriptionConnect", {
+                    defaultValue: "Connect ChatGPT",
+                }) })) : (_jsxs(_Fragment, { children: [!inUse && canUpdateDefault !== false ? (_jsx(Button, { type: "button", intent: "primary", emphasis: "solid", onClick: () => void selectSubscriptionEngine(), className: cn("rounded-md bg-primary px-3 py-1.5 font-medium text-primary-foreground hover:bg-primary/90", isPage ? "text-sm" : "text-[11px]"), children: t("agentPanel.chatgptSubscriptionUse", {
+                    defaultValue: "Use in chat",
+                }) })) : null, _jsx(Button, { type: "button", intent: "neutral", emphasis: "outline", onClick: () => void disconnect(), className: cn("rounded-md border border-border px-3 py-1.5 text-foreground hover:bg-accent/40", isPage ? "text-sm" : "text-[11px]"), children: t("agentPanel.chatgptSubscriptionDisconnect", {
+                    defaultValue: "Disconnect",
+                }) })] }));
+    if (isPage) {
+        return (_jsx(SettingsRow, { className: cn(grouped ? "border-b border-border/60" : "-mx-5 sm:-mx-6"), label: title, description: description, status: statusLabel, control: _jsx("div", { className: "flex flex-wrap items-center justify-end gap-2", children: actions }), children: error ? _jsx("p", { className: "text-sm text-destructive", children: error }) : null }));
+    }
+    return (_jsxs("div", { className: cn("rounded-md border border-border bg-accent/20", isPage ? "px-4 py-3.5" : "px-3 py-3"), children: [_jsxs("div", { className: "flex items-start justify-between gap-3", children: [_jsxs("div", { className: "min-w-0", children: [_jsx("p", { className: cn("font-medium text-foreground", subTextClass(isPage)), children: title }), _jsx("p", { className: cn("mt-0.5 text-muted-foreground", noteTextClass(isPage)), children: description })] }), statusLabel] }), _jsx("div", { className: "mt-3 flex flex-wrap items-center justify-end gap-2", children: actions }), error ? (_jsx("p", { className: cn("mt-2 text-destructive", noteTextClass(isPage)), children: error })) : null] }));
+}
+function LLMSectionInner({ builderFlow, builderLoading, builderStatusAvailable, connectUrl, connected, orgName, envManaged, credentialSource, grouped = false, open, onToggle, }) {
+    const isPage = useSettingsSurface() === "page";
+    const t = useT();
+    const [envKeys, setEnvKeys] = useState([]);
+    const [saving, setSaving] = useState(false);
+    const [saved, setSaved] = useState(false);
+    const [engines, setEngines] = useState([]);
+    const [{ currentEngine, currentModel, selectedEngine, selectedModel, apiKey, baseUrl, clearBaseUrl, }, setSelectionState,] = useState({
+        currentEngine: "anthropic",
+        currentModel: "",
+        selectedEngine: "anthropic",
+        selectedModel: "",
+        apiKey: "",
+        baseUrl: "",
+        clearBaseUrl: false,
+    });
+    const [baseUrlConfigured, setBaseUrlConfigured] = useState(false);
+    const [advancedOpen, setAdvancedOpen] = useState(false);
+    const [applyNote, setApplyNote] = useState(false);
+    const [applying, setApplying] = useState(false);
+    const [applyError, setApplyError] = useState(null);
+    // null until the catalog answers; the server enforces it either way.
+    const [canUpdateDefault, setCanUpdateDefault] = useState(null);
+    const [testing, setTesting] = useState(false);
+    const [testResult, setTestResult] = useState(null);
+    const [settingsStatus, setSettingsStatus] = useState(null);
+    const [disconnectError, setDisconnectError] = useState(null);
+    const [providerSettingsError, setProviderSettingsError] = useState(null);
+    const [envProbeAvailable, setEnvProbeAvailable] = useState(false);
+    const [enginesLoaded, setEnginesLoaded] = useState(false);
+    const [engineCatalogAvailable, setEngineCatalogAvailable] = useState(false);
+    const [statusProbeAvailable, setStatusProbeAvailable] = useState(false);
+    const probeGenerationRef = useRef({ env: 0, status: 0 });
+    const [ollamaModels, setOllamaModels] = useState(null);
+    const [ollamaModelsError, setOllamaModelsError] = useState(null);
+    const [ollamaModelsLoading, setOllamaModelsLoading] = useState(false);
+    const initialLoading = !enginesLoaded || !!builderLoading;
+    const refreshEnvKeys = useCallback(() => {
+        const generation = ++probeGenerationRef.current.env;
+        setEnvProbeAvailable(false);
+        setEnvKeys([]);
+        void fetchEnvironmentStatus().then((result) => {
+            if (generation !== probeGenerationRef.current.env)
+                return;
+            if (result.state !== "available" || !Array.isArray(result.value)) {
+                return;
+            }
+            setEnvKeys(result.value);
+            setEnvProbeAvailable(true);
+        });
+    }, []);
+    const notifyConfigChanged = useCallback(() => {
+        window.dispatchEvent(new CustomEvent("agent-engine:configured-changed"));
+    }, []);
+    const refreshSettingsStatus = useCallback(() => {
+        const generation = ++probeGenerationRef.current.status;
+        setStatusProbeAvailable(false);
+        setSettingsStatus(null);
+        setBaseUrlConfigured(false);
+        void fetchAgentEngineStatus()
+            .then((result) => {
+            if (generation !== probeGenerationRef.current.status)
+                return;
+            if (result.state !== "available")
+                return;
+            const data = result.value;
+            setBaseUrlConfigured(Boolean(data?.openAiBaseUrlConfigured));
+            if (data?.configured &&
+                typeof data.engine === "string" &&
+                (data.source === "env" ||
+                    data.source === "settings" ||
+                    data.source === "app_secrets")) {
+                setSettingsStatus({
+                    engine: data.engine,
+                    source: data.source,
+                    envVar: typeof data.envVar === "string" ? data.envVar : null,
+                });
+            }
+            else {
+                setSettingsStatus(null);
+            }
+            setStatusProbeAvailable(true);
+        })
+            .catch(() => { });
+    }, []);
+    useEffect(() => {
+        refreshEnvKeys();
+    }, [refreshEnvKeys]);
+    useEffect(() => {
+        refreshSettingsStatus();
+    }, [refreshSettingsStatus]);
+    useEffect(() => {
+        const refresh = () => {
+            refreshEnvKeys();
+            refreshSettingsStatus();
+        };
+        window.addEventListener("agent-engine:configured-changed", refresh);
+        window.addEventListener("focus", refresh);
+        const onVisibilityChange = () => {
+            if (document.visibilityState === "visible")
+                refresh();
+        };
+        document.addEventListener("visibilitychange", onVisibilityChange);
+        return () => {
+            window.removeEventListener("agent-engine:configured-changed", refresh);
+            window.removeEventListener("focus", refresh);
+            document.removeEventListener("visibilitychange", onVisibilityChange);
+        };
+    }, [refreshEnvKeys, refreshSettingsStatus]);
+    useEffect(() => {
+        let generation = 0;
+        const refresh = () => {
+            const request = ++generation;
+            setEngineCatalogAvailable(false);
+            void callAction("manage-agent-engine", { action: "list" })
+                .then((data) => {
+                if (request !== generation || !data)
+                    return;
+                const engineData = data;
+                if (!Array.isArray(engineData.engines))
+                    return;
+                setEngines(engineData.engines);
+                setEngineCatalogAvailable(true);
+                setCanUpdateDefault(typeof engineData.canUpdateDefault === "boolean"
+                    ? engineData.canUpdateDefault
+                    : null);
+                const cur = engineData.current ?? {};
+                setSelectionState((previous) => {
+                    const dirty = previous.selectedEngine !== previous.currentEngine ||
+                        previous.selectedModel !== previous.currentModel ||
+                        !!previous.apiKey.trim() ||
+                        !!previous.baseUrl.trim() ||
+                        previous.clearBaseUrl;
+                    const engine = cur.engine ?? "anthropic";
+                    const model = cur.model ?? "";
+                    return {
+                        ...previous,
+                        currentEngine: engine,
+                        currentModel: model,
+                        selectedEngine: dirty ? previous.selectedEngine : engine,
+                        selectedModel: dirty ? previous.selectedModel : model,
+                    };
+                });
+            })
+                .catch(() => { })
+                .finally(() => {
+                if (request === generation)
+                    setEnginesLoaded(true);
+            });
+        };
+        refresh();
+        window.addEventListener("agent-engine:configured-changed", refresh);
+        window.addEventListener("focus", refresh);
+        return () => {
+            generation++;
+            window.removeEventListener("agent-engine:configured-changed", refresh);
+            window.removeEventListener("focus", refresh);
+        };
+    }, []);
+    const selectedEngineInfo = engines.find((e) => e.name === selectedEngine);
+    const selectedProvider = providerIdForEngine(selectedEngine) ??
+        (selectedEngine === CHATGPT_SUBSCRIPTION_ENGINE_NAME
+            ? "openai"
+            : "anthropic");
+    const selectedProviderOption = getAgentProviderOption(selectedProvider);
+    const envVar = selectedProviderOption.key;
+    const selectedEnginePackageInstalled = selectedEngineInfo?.packageInstalled !== false;
+    const envConfigured = envVar
+        ? (envKeys.find((k) => k.key === envVar)?.configured ?? false)
+        : false;
+    const settingsConfigured = settingsStatus != null &&
+        (settingsStatus.engine === selectedEngine ||
+            (!!envVar && settingsStatus.envVar === envVar));
+    const configuredProviderIds = useMemo(() => {
+        const configured = new Set();
+        for (const option of AGENT_PROVIDER_CATALOG) {
+            const engine = engines.find((entry) => entry.name === option.engine);
+            if (engine?.packageInstalled === false || engine?.configured === false) {
+                continue;
+            }
+            if (option.key &&
+                envKeys.some((entry) => entry.key === option.key && entry.configured)) {
+                configured.add(option.id);
+            }
+        }
+        if (settingsStatus &&
+            engines.some((engine) => engine.name === settingsStatus.engine &&
+                engine.packageInstalled !== false &&
+                engine.configured !== false)) {
+            const statusProvider = providerIdForEngine(settingsStatus.engine);
+            if (statusProvider)
+                configured.add(statusProvider);
+            if (settingsStatus.envVar) {
+                const statusOption = AGENT_PROVIDER_CATALOG.find((option) => option.key === settingsStatus.envVar);
+                if (statusOption)
+                    configured.add(statusOption.id);
+            }
+        }
+        return configured;
+    }, [engines, envKeys, settingsStatus]);
+    const builderConnected = builderStatusAvailable && (connected || builderFlow.configured);
+    const configurationKnown = envProbeAvailable && statusProbeAvailable && engineCatalogAvailable;
+    const builderEngineSelected = selectedEngine === "builder";
+    const selectedConfigurationKnown = builderEngineSelected
+        ? builderStatusAvailable
+        : configurationKnown;
+    const anyKeyConfigured = (builderEngineSelected && builderConnected) ||
+        (!builderEngineSelected &&
+            configurationKnown &&
+            selectedEnginePackageInstalled &&
+            (selectedEngineInfo?.configured ??
+                (envConfigured || settingsConfigured)));
+    const sourceBadge = computeSourceBadge({
+        settingsConfigured: configurationKnown && settingsConfigured,
+        settingsStatus: configurationKnown ? settingsStatus : null,
+        envConfigured: configurationKnown && envConfigured,
+        envVar,
+        builderConnected,
+    });
+    const manualSetupHint = "Select a provider.";
+    const engineChanged = selectedEngine !== currentEngine || selectedModel !== currentModel;
+    const isEndpointProvider = selectedProviderOption.supportsEndpoint === true;
+    const isOllama = selectedProvider === "ollama";
+    const endpointChanged = isEndpointProvider && (!!baseUrl.trim() || clearBaseUrl);
+    const providerSettingsChanged = !!apiKey.trim() || endpointChanged;
+    // Saving picks the provider too, so there is no separate Apply step. Only
+    // owners and admins change the organization's default model.
+    const canSelectDefault = engineChanged && canUpdateDefault !== false;
+    const keyEntryVisible = !!envVar && !(envConfigured || settingsConfigured);
+    const { scope: keySaveScope, roleUnavailable: keySaveRoleUnavailable, retry: retryKeySaveRole, } = useProviderKeySaveScope();
+    const handleFindOllamaModels = () => {
+        setOllamaModelsLoading(true);
+        setOllamaModelsError(null);
+        const typedEndpoint = baseUrl.trim();
+        void fetchOllamaModels(typedEndpoint || undefined)
+            .then(async (models) => {
+            setOllamaModels(models);
+            setOllamaModelsError(null);
+            if (typedEndpoint && keySaveScope) {
+                try {
+                    await saveAgentEngineProviderSettings({
+                        provider: selectedProvider,
+                        ...(envVar ? { key: envVar } : {}),
+                        baseUrl: typedEndpoint,
+                        scope: keySaveScope,
+                    });
+                    setBaseUrlConfigured(true);
+                }
+                catch {
+                    // coercion-ok: the connectivity check itself still succeeded and
+                    // the found models are shown; the address just wasn't persisted
+                    // (e.g. a dropped session). The "Save endpoint" button below
+                    // retries it, so this is never reported as a clean success.
+                }
+            }
+        })
+            .catch((err) => {
+            setOllamaModels(null);
+            setOllamaModelsError(err instanceof Error ? err.message : String(err));
+        })
+            .finally(() => setOllamaModelsLoading(false));
+    };
+    const modelOptions = (selectedEngineInfo?.supportedModels ?? []).map((m) => ({ value: m, label: friendlyModelName(m) }));
+    const handleSave = async () => {
+        if (!keySaveScope ||
+            !providerSettingsChanged ||
+            (!envVar && !isEndpointProvider)) {
+            return;
+        }
+        setSaving(true);
+        setProviderSettingsError(null);
+        try {
+            const nextBaseUrl = isEndpointProvider ? baseUrl.trim() : "";
+            const result = await saveAgentEngineProviderSettings({
+                provider: selectedProvider,
+                ...(envVar ? { key: envVar } : {}),
+                ...(apiKey.trim() ? { apiKey } : {}),
+                ...(nextBaseUrl ? { baseUrl: nextBaseUrl } : {}),
+                ...(isEndpointProvider && clearBaseUrl ? { clearBaseUrl: true } : {}),
+                scope: keySaveScope,
+                ...(canSelectDefault
+                    ? {
+                        defaultModel: {
+                            engine: selectedEngine,
+                            model: selectedModel || selectedEngineInfo?.defaultModel,
+                        },
+                    }
+                    : {}),
+            });
+            applyDefaultModelOutcome(result.defaultModel);
+            setSaved(true);
+            setSelectionState((previous) => ({
+                ...previous,
+                apiKey: "",
+                baseUrl: "",
+                clearBaseUrl: false,
+            }));
+            if (nextBaseUrl)
+                setBaseUrlConfigured(true);
+            if (clearBaseUrl)
+                setBaseUrlConfigured(false);
+            notifyConfigChanged();
+            setTimeout(() => setSaved(false), 2000);
+        }
+        catch (err) {
+            setProviderSettingsError(err instanceof Error ? err.message : String(err));
+        }
+        finally {
+            setSaving(false);
+        }
+    };
+    const handleDisconnect = async () => {
+        setDisconnectError(null);
+        try {
+            const res = await fetch(agentNativePath("/_agent-native/agent-engine/disconnect"), {
+                method: "POST",
+            });
+            if (res.ok) {
+                setTestResult(null);
+                setApplyNote(false);
+                notifyConfigChanged();
+                return;
+            }
+            const body = (await res.json().catch(() => null));
+            setDisconnectError(body?.error ??
+                (res.status === 401
+                    ? "You must be signed in to disconnect."
+                    : `Disconnect failed (HTTP ${res.status})`));
+        }
+        catch (err) {
+            setDisconnectError(err instanceof Error ? err.message : String(err));
+        }
+    };
+    const handleTest = async () => {
+        setTesting(true);
+        setTestResult(null);
+        try {
+            const data = await callAction("manage-agent-engine", {
+                action: "test",
+                engine: selectedEngine,
+                model: selectedModel || selectedEngineInfo?.defaultModel,
+            });
+            const parsed = typeof data === "string"
+                ? JSON.parse(data)
+                : typeof data?.result === "string"
+                    ? JSON.parse(data.result)
+                    : data;
+            if (parsed?.ok) {
+                setTestResult({
+                    ok: true,
+                    latencyMs: parsed.latencyMs ?? 0,
+                    model: parsed.model ?? selectedModel,
+                });
+            }
+            else {
+                setTestResult({
+                    ok: false,
+                    error: parsed?.error ?? "Test failed (no error message)",
+                });
+            }
+        }
+        catch (err) {
+            setTestResult({
+                ok: false,
+                error: err instanceof Error ? err.message : String(err),
+            });
+        }
+        finally {
+            setTesting(false);
+        }
+    };
+    const showSavedSelection = (selection) => {
+        setSelectionState((previous) => ({
+            ...previous,
+            currentEngine: selection.engine,
+            currentModel: selection.model,
+            selectedEngine: selection.engine,
+            selectedModel: selection.model,
+        }));
+        setApplyNote(true);
+        setTimeout(() => setApplyNote(false), 4000);
+    };
+    const applyDefaultModelOutcome = (outcome) => {
+        setApplyError(null);
+        setApplyNote(false);
+        if (outcome?.status === "selected")
+            showSavedSelection(outcome);
+        else if (outcome?.status === "failed")
+            setApplyError(outcome.error);
+    };
+    // A provider that needs no new key or endpoint: saving only picks it.
+    const handleSaveSelection = async () => {
+        if (applying)
+            return;
+        setApplying(true);
+        setApplyError(null);
+        setApplyNote(false);
+        try {
+            showSavedSelection(await setAgentEngineProvider({
+                provider: selectedProvider,
+                model: selectedModel,
+            }));
+        }
+        catch (err) {
+            setApplyError(err instanceof Error ? err.message : String(err));
+        }
+        finally {
+            setApplying(false);
+        }
+    };
+    return (_jsx(SettingsSection, { id: settingsSectionDomId("llm"), icon: _jsx(IconBrain, { size: 14 }), title: "LLM", required: true, connected: initialLoading || !selectedConfigurationKnown
+            ? undefined
+            : anyKeyConfigured, subtitle: isPage
+            ? undefined
+            : t("agentPanel.builderOrOwnKeys", {
+                defaultValue: "Choose Builder.io or custom keys.",
+            }), grouped: isPage && grouped, open: open, onToggle: onToggle, children: initialLoading ? (_jsx(SettingsLoadingRow, { controlCount: 2 })) : (_jsxs(_Fragment, { children: [_jsx(ChatGPTSubscriptionCard, { currentEngine: currentEngine, canUpdateDefault: canUpdateDefault, onConfigured: notifyConfigChanged, grouped: isPage && grouped }), _jsxs("div", { className: cn(isPage
+                        ? "flex items-center justify-between gap-4 px-5 py-4 sm:px-6"
+                        : "flex items-center justify-between gap-2"), children: [isPage && (_jsxs("div", { className: "min-w-0", children: [_jsx("p", { className: "text-sm font-medium text-foreground", children: "AI provider" }), _jsx("p", { className: "mt-1 text-sm leading-6 text-muted-foreground", children: t("agentPanel.builderOrOwnKeys", {
+                                        defaultValue: "Choose Builder.io or custom keys.",
+                                    }) })] })), _jsxs("div", { className: cn("flex flex-wrap items-center justify-end gap-2"), children: [selectedConfigurationKnown && !anyKeyConfigured && (_jsx(UseBuilderCard, { builderFlow: builderFlow, connectUrl: connectUrl, connected: builderConnected, orgName: orgName, envManaged: envManaged, credentialSource: credentialSource, trackingSource: "llm_settings", trackingFlow: "connect_llm", label: "Connect Builder.io", compact: true })), _jsx(ManualSetupCard, { id: "llm-manual-setup", title: "Custom keys", hint: manualSetupHint, sourceBadge: builderConnected || engineChanged || !anyKeyConfigured
+                                        ? undefined
+                                        : sourceBadge, bare: isPage, popover: true, popoverLabel: settingsConfigured
+                                        ? "Manage"
+                                        : t("agentPanel.addOwnKeys", {
+                                            defaultValue: "Custom keys",
+                                        }), summaryContent: selectedConfigurationKnown && anyKeyConfigured ? (_jsx(UseBuilderCard, { builderFlow: builderFlow, connectUrl: connectUrl, connected: builderConnected, orgName: orgName, envManaged: envManaged, credentialSource: credentialSource, trackingSource: "llm_settings", trackingFlow: "connect_llm", label: "Connect Builder.io" })) : undefined, children: _jsxs("fieldset", { disabled: applying, className: "space-y-2 mb-1", children: [_jsx(AgentProviderPicker, { value: selectedProvider, configuredProviders: configurationKnown ? configuredProviderIds : undefined, layout: isPage ? "page" : "compact", onChange: (provider) => {
+                                                    const option = getAgentProviderOption(provider);
+                                                    setSelectionState((previous) => ({
+                                                        ...previous,
+                                                        selectedEngine: option.engine,
+                                                        selectedModel: option.defaultModel,
+                                                        apiKey: "",
+                                                        baseUrl: "",
+                                                        clearBaseUrl: false,
+                                                    }));
+                                                    setAdvancedOpen(false);
+                                                    setApplyError(null);
+                                                    setApplyNote(false);
+                                                    setTestResult(null);
+                                                    setOllamaModels(null);
+                                                    setOllamaModelsError(null);
+                                                } }), isOllama && isEndpointProvider ? (_jsxs("div", { className: "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" })] }), _jsxs("div", { className: "flex items-center gap-1.5", children: [_jsx("input", { type: "url", value: baseUrl, onChange: (e) => {
+                                                                    const baseUrl = e.target.value;
+                                                                    setSelectionState((previous) => ({
+                                                                        ...previous,
+                                                                        baseUrl,
+                                                                        clearBaseUrl: baseUrl.trim()
+                                                                            ? false
+                                                                            : previous.clearBaseUrl,
+                                                                    }));
+                                                                    setOllamaModels(null);
+                                                                    setOllamaModelsError(null);
+                                                                }, onKeyDown: (e) => {
+                                                                    if (e.key === "Enter")
+                                                                        void handleSave();
+                                                                }, placeholder: baseUrlConfigured
+                                                                    ? "Leave blank to keep current endpoint"
+                                                                    : "http://localhost:11434 or local network address like http://192.168.1.123:11434", disabled: clearBaseUrl, spellCheck: false, autoComplete: "off", className: "flex h-9 min-w-0 flex-1 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 }), _jsxs(Button, { type: "button", intent: "neutral", emphasis: "outline", disabled: saving || ollamaModelsLoading || clearBaseUrl, onClick: handleFindOllamaModels, className: "inline-flex h-9 shrink-0 items-center gap-1.5 rounded-md border border-border bg-background px-2.5 text-[11px] font-medium text-foreground hover:bg-accent/40 disabled:cursor-not-allowed disabled:opacity-50", children: [ollamaModelsLoading ? (_jsx(IconLoader2, { size: 12, className: "animate-spin" })) : (_jsx(IconSearch, { size: 12 })), "Find models"] })] }), baseUrlConfigured && (_jsxs("label", { className: "flex items-center gap-1.5 text-[10px] text-muted-foreground", children: [_jsx(Checkbox, { checked: clearBaseUrl, onChange: (checked) => {
+                                                                    setSelectionState((previous) => ({
+                                                                        ...previous,
+                                                                        clearBaseUrl: checked,
+                                                                        baseUrl: checked ? "" : previous.baseUrl,
+                                                                    }));
+                                                                }, "aria-label": "Clear saved endpoint override", className: "shrink-0" }), "Clear saved endpoint override"] })), 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") }))] })) : null, _jsxs("div", { className: "space-y-1.5", children: [_jsx("p", { className: fieldLabelClass(isPage), children: "Model" }), _jsx("input", { type: "text", list: isOllama
+                                                            ? undefined
+                                                            : `model-suggestions-${selectedEngine}`, value: selectedModel, onChange: (e) => {
+                                                            const model = e.target.value;
+                                                            setSelectionState((previous) => ({
+                                                                ...previous,
+                                                                selectedModel: model,
+                                                            }));
+                                                            setApplyError(null);
+                                                            setApplyNote(false);
+                                                            setTestResult(null);
+                                                        }, placeholder: selectedEngineInfo?.defaultModel ?? "e.g. model-id", spellCheck: false, autoComplete: "off", className: textInputClass(isPage), style: isPage ? CONTROL_STYLE_PAGE : CONTROL_STYLE }), !isOllama && modelOptions.length > 0 && (_jsx("datalist", { id: `model-suggestions-${selectedEngine}`, children: modelOptions.map((opt) => (_jsx("option", { value: opt.value, label: opt.label }, opt.value))) })), isOllama ? (_jsxs("div", { className: "space-y-1.5", children: [ollamaModels && ollamaModels.length > 0 ? (_jsx("div", { className: "flex flex-wrap gap-1.5", children: ollamaModels.map((modelOption) => (_jsx(Button, { type: "button", disabled: saving, onClick: () => {
+                                                                        setSelectionState((previous) => ({
+                                                                            ...previous,
+                                                                            selectedModel: modelOption,
+                                                                        }));
+                                                                        setApplyError(null);
+                                                                        setApplyNote(false);
+                                                                        setTestResult(null);
+                                                                    }, "aria-pressed": selectedModel === modelOption, className: cn("rounded-md border px-2 py-1 text-[11px] font-medium transition-colors disabled:cursor-not-allowed disabled:opacity-50", selectedModel === modelOption
+                                                                        ? "border-primary bg-primary/10 text-primary"
+                                                                        : "border-border bg-background text-foreground hover:bg-accent/40"), children: modelOption }, modelOption))) })) : null, _jsx("p", { className: "text-[10px] leading-relaxed text-muted-foreground", children: ollamaModelsLoading
+                                                                    ? "Checking installed models…"
+                                                                    : ollamaModels && ollamaModels.length > 0
+                                                                        ? `Found ${ollamaModels.length} installed model${ollamaModels.length === 1 ? "" : "s"}.`
+                                                                        : ollamaModels
+                                                                            ? "Connected, but no models are pulled yet — run `ollama pull llama3.1`."
+                                                                            : ollamaModelsError
+                                                                                ? `${ollamaModelsError} Showing example model names below.`
+                                                                                : 'Click "Find models" above to list what your Ollama server actually has installed.' })] })) : null] }), !isOllama && isEndpointProvider && (_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) => {
+                                                                    const baseUrl = e.target.value;
+                                                                    setSelectionState((previous) => ({
+                                                                        ...previous,
+                                                                        baseUrl,
+                                                                        clearBaseUrl: baseUrl.trim()
+                                                                            ? false
+                                                                            : previous.clearBaseUrl,
+                                                                    }));
+                                                                }, onKeyDown: (e) => {
+                                                                    if (e.key === "Enter")
+                                                                        void 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 }), baseUrlConfigured && (_jsxs("label", { className: "flex items-center gap-1.5 text-[10px] text-muted-foreground", children: [_jsx(Checkbox, { checked: clearBaseUrl, onChange: (checked) => {
+                                                                            setSelectionState((previous) => ({
+                                                                                ...previous,
+                                                                                clearBaseUrl: checked,
+                                                                                baseUrl: checked ? "" : previous.baseUrl,
+                                                                            }));
+                                                                        }, "aria-label": "Clear saved endpoint override", className: "shrink-0" }), "Clear saved endpoint override"] })), endpointChanged && (_jsx(Button, { type: "button", intent: "neutral", emphasis: "solid", onClick: handleSave, disabled: saving || !keySaveScope, 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 || settingsConfigured) ? (_jsxs("div", { className: cn("flex items-center gap-1.5 text-primary", isPage ? "text-xs" : "text-[10px]"), children: [_jsx(IconCheck, { size: isPage ? 14 : 10 }), settingsStatus?.source === "app_secrets" &&
+                                                        settingsConfigured
+                                                        ? "Saved key configured"
+                                                        : `${envVar} configured`] })) : envVar ? (_jsxs("div", { className: "flex gap-1.5", children: [_jsx("input", { type: "password", value: apiKey, onChange: (e) => {
+                                                            const apiKey = e.target.value;
+                                                            setSelectionState((previous) => ({
+                                                                ...previous,
+                                                                apiKey,
+                                                            }));
+                                                        }, onKeyDown: (e) => {
+                                                            if (e.key === "Enter")
+                                                                void 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: providerSettingsChanged
+                                                            ? handleSave
+                                                            : handleSaveSelection, disabled: (!providerSettingsChanged && !canSelectDefault) ||
+                                                            (providerSettingsChanged && !keySaveScope) ||
+                                                            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 ||
+                                                            !selectedConfigurationKnown ||
+                                                            !anyKeyConfigured, 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, canSelectDefault &&
+                                                        !providerSettingsChanged &&
+                                                        !keyEntryVisible && (_jsx(Button, { intent: "primary", emphasis: "solid", onClick: handleSaveSelection, className: pillButtonClass(isPage, "solid"), children: "Save" })), settingsStatus != null && canUpdateDefault !== false && (_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 default model. Chats use the next available provider until you save one again." })] }))] }), 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] })), keySaveRoleUnavailable && (_jsxs("div", { role: "alert", className: cn("flex flex-wrap items-center gap-1.5 text-destructive", isPage ? "text-xs" : "text-[10px]"), children: [_jsx(IconAlertCircle, { size: isPage ? 14 : 10 }), t("agentPanel.saveScopeRoleUnavailable"), _jsx(Button, { intent: "neutral", emphasis: "ghost", onClick: retryKeySaveRole, className: "h-auto px-1 py-0 font-medium text-foreground underline underline-offset-2", children: t("agentChat.common.retry") })] })), providerSettingsError && (_jsxs("div", { role: "alert", className: cn("flex items-center gap-1.5 text-destructive", isPage ? "text-xs" : "text-[10px]"), children: [_jsx(IconAlertCircle, { size: isPage ? 14 : 10 }), providerSettingsError] })), applyError && (_jsxs("p", { role: "alert", className: cn("text-destructive", isPage ? "text-xs" : "text-[10px]"), children: ["Save failed: ", applyError] })), 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
+        .split("-")
+        .filter(Boolean)
+        .map((part) => part[0]?.toUpperCase() + part.slice(1))
+        .join(" ");
+}
+function AppDefaultModelPicker({ engines, value, disabled, onChange, }) {
+    const [open, setOpen] = useState(false);
+    const [ollamaModels, setOllamaModels] = useState(null);
+    const visibleEngines = engines.filter((engine) => engine.name !== "ai-sdk:anthropic");
+    useEffect(() => {
+        if (!open)
+            return;
+        if (!engines.some(usesLiveOllamaModels))
+            return;
+        let cancelled = false;
+        void fetchOllamaModels()
+            .then((models) => {
+            if (!cancelled && models.length > 0)
+                setOllamaModels(models);
+        })
+            .catch(() => {
+            // No local Ollama server reachable — keep the static suggestions.
+        });
+        return () => {
+            cancelled = true;
+        };
+    }, [open, engines]);
+    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 openApiKeys = () => {
+        setOpen(false);
+        if (typeof window !== "undefined") {
+            window.history.pushState(null, "", appMountedPath(buildSettingsRoute("keys"), STANDARD_APP_ROUTES.settings));
+            window.dispatchEvent(new Event("popstate"));
+        }
+    };
+    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 = usesLiveOllamaModels(engine) && ollamaModels?.length
+                                        ? ollamaModels
+                                        : 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 api keys`, onSelect: openApiKeys, className: "gap-2 text-muted-foreground", children: [_jsx(IconExternalLink, { size: 14 }), "Configure in API keys"] }))] }, engine.name));
+                                })] })] }) })] }));
+}
+function AppModelDefaultsSectionInner({ grouped = false, open, onToggle, }) {
+    const isPage = useSettingsSurface() === "page";
+    const [settings, setSettings] = useState(null);
+    const [selectedEngine, setSelectedEngine] = useState("");
+    const [selectedModel, setSelectedModel] = useState("");
+    const [loading, setLoading] = useState(true);
+    const [saving, setSaving] = useState(false);
+    const [saved, setSaved] = useState(false);
+    const [error, setError] = useState(null);
+    const [ollamaModels, setOllamaModels] = useState(null);
+    const load = useCallback(() => {
+        let cancelled = false;
+        setLoading(true);
+        fetch(agentNativePath("/_agent-native/agent-model-defaults"))
+            .then((r) => (r.ok ? r.json() : null))
+            .then((data) => {
+            if (cancelled || !data)
+                return;
+            setSettings(data);
+            const firstConfigured = data.engines.find((engine) => engine.configured) ?? data.engines[0];
+            const nextEngine = data.engine ?? firstConfigured?.name ?? "";
+            const nextEngineInfo = data.engines.find((engine) => engine.name === nextEngine) ??
+                firstConfigured;
+            setSelectedEngine(nextEngine);
+            setSelectedModel(data.model ?? nextEngineInfo?.defaultModel ?? "");
+        })
+            .catch(() => { })
+            .finally(() => {
+            if (!cancelled)
+                setLoading(false);
+        });
+        return () => {
+            cancelled = true;
+        };
+    }, []);
+    useEffect(() => load(), [load]);
+    useEffect(() => {
+        if (selectedEngine !== "ai-sdk:ollama")
+            return;
+        let cancelled = false;
+        void fetchOllamaModels()
+            .then((models) => {
+            if (!cancelled && models.length > 0)
+                setOllamaModels(models);
+        })
+            .catch(() => {
+            // No local Ollama server reachable — keep the static suggestions.
+        });
+        return () => {
+            cancelled = true;
+        };
+    }, [selectedEngine]);
+    if (!loading && !settings)
+        return null;
+    const selectedEngineInfo = settings?.engines.find((engine) => engine.name === selectedEngine) ?? null;
+    const selectedEngineModels = selectedEngineInfo &&
+        usesLiveOllamaModels(selectedEngineInfo) &&
+        ollamaModels?.length
+        ? ollamaModels
+        : (selectedEngineInfo?.supportedModels ?? []);
+    const engineOptions = (settings?.engines ?? [])
+        .filter((engine) => engine.name === selectedEngine || engine.name !== "ai-sdk:anthropic")
+        .map((engine) => ({
+        value: engine.name,
+        label: engine.name === "builder"
+            ? "Builder.io Gateway"
+            : engine.label || engine.name,
+        description: engine.configured
+            ? "Configured for this workspace"
+            : engine.packageInstalled === false
+                ? `Install ${engine.installPackage ?? "the provider packages"} to use this provider`
+                : "Credentials not detected yet",
+    }));
+    const hasPendingChange = !!settings &&
+        settings.canUpdate &&
+        !!selectedEngine &&
+        !!selectedModel.trim() &&
+        (selectedEngine !== settings.engine ||
+            selectedModel.trim() !== settings.model);
+    const hasAppDefault = settings?.source !== "default";
+    const scopeLabel = settings?.scope === "org"
+        ? settings.orgName
+            ? `${settings.orgName} organization`
+            : "organization"
+        : "your account";
+    const notifyChanged = () => {
+        window.dispatchEvent(new CustomEvent("agent-engine:configured-changed"));
+    };
+    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: targetEngine,
+                    model: targetModel,
+                }),
+            });
+            const body = await res.json().catch(() => ({}));
+            if (!res.ok)
+                throw new Error(body?.error ?? `Save failed (${res.status})`);
+            const next = body;
+            setSettings(next);
+            setSelectedEngine(next.engine ?? selectedEngine);
+            setSelectedModel(next.model ?? selectedModel.trim());
+            setSaved(true);
+            notifyChanged();
+            setTimeout(() => setSaved(false), 2000);
+        }
+        catch (err) {
+            setError(err instanceof Error ? err.message : "Save failed");
+        }
+        finally {
+            setSaving(false);
+        }
+    };
+    const reset = async () => {
+        if (!settings?.canUpdate || !hasAppDefault)
+            return;
+        setSaving(true);
+        setSaved(false);
+        setError(null);
+        try {
+            const res = await fetch(agentNativePath("/_agent-native/agent-model-defaults"), { method: "DELETE" });
+            const body = await res.json().catch(() => ({}));
+            if (!res.ok)
+                throw new Error(body?.error ?? `Reset failed (${res.status})`);
+            const next = body;
+            setSettings(next);
+            const fallback = next.engines.find((engine) => engine.configured);
+            setSelectedEngine(next.engine ?? fallback?.name ?? selectedEngine);
+            setSelectedModel(next.model ?? fallback?.defaultModel ?? selectedModel);
+            notifyChanged();
+        }
+        catch (err) {
+            setError(err instanceof Error ? err.message : "Reset failed");
+        }
+        finally {
+            setSaving(false);
+        }
+    };
+    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(SettingsLoadingRow, {})) : 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);
+                                    const info = settings.engines.find((engine) => engine.name === value);
+                                    setSelectedModel(info?.defaultModel ?? "");
+                                    setError(null);
+                                } }), _jsx(AppDefaultModelField, { engine: selectedEngine, models: selectedEngineModels, value: selectedModel, defaultModel: selectedEngineInfo?.defaultModel, disabled: !settings.canUpdate || saving, onValueChange: (value) => {
+                                    setSelectedModel(value);
+                                    setError(null);
+                                }, onEnter: () => {
+                                    if (hasPendingChange)
+                                        void save();
+                                } }), _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 }))] }) }))) : null }));
+}
+export function EmailSectionInner({ open, onToggle, }) {
+    const isPage = useSettingsSurface() === "page";
+    const emailInputCls = cn(textInputClass(isPage), "flex-1");
+    const emailBtnCls = pillButtonClass(isPage, "solid");
+    const emailIconSize = isPage ? 14 : 10;
+    const [envKeys, setEnvKeys] = useState([]);
+    const [resendKey, setResendKey] = useState("");
+    const [sendgridKey, setSendgridKey] = useState("");
+    const [fromAddr, setFromAddr] = useState("");
+    const [saving, setSaving] = useState(false);
+    const [saved, setSaved] = useState(false);
+    const [emailProvider, setEmailProvider] = useState("resend");
+    const [envLoaded, setEnvLoaded] = useState(false);
+    useEffect(() => {
+        fetch(agentNativePath("/_agent-native/env-status"))
+            .then((r) => (r.ok ? r.json() : []))
+            .then(setEnvKeys)
+            .catch(() => { })
+            .finally(() => setEnvLoaded(true));
+    }, [saved]);
+    const resendConfigured = envKeys.find((k) => k.key === "RESEND_API_KEY")?.configured ?? false;
+    const sendgridConfigured = envKeys.find((k) => k.key === "SENDGRID_API_KEY")?.configured ?? false;
+    const fromConfigured = envKeys.find((k) => k.key === "EMAIL_FROM")?.configured ?? false;
+    const anyConfigured = resendConfigured || sendgridConfigured;
+    useEffect(() => {
+        if (sendgridConfigured && !resendConfigured) {
+            setEmailProvider("sendgrid");
+        }
+    }, [resendConfigured, sendgridConfigured]);
+    const save = async (vars) => {
+        setSaving(true);
+        try {
+            const res = await fetch(agentNativePath("/_agent-native/env-vars"), {
+                method: "POST",
+                headers: { "Content-Type": "application/json" },
+                body: JSON.stringify({ vars }),
+            });
+            if (res.ok) {
+                setSaved(true);
+                setResendKey("");
+                setSendgridKey("");
+                setFromAddr("");
+                setTimeout(() => setSaved(false), 2000);
+            }
+        }
+        finally {
+            setSaving(false);
+        }
+    };
+    const saveResend = () => {
+        const vars = [];
+        if (resendKey.trim())
+            vars.push({ key: "RESEND_API_KEY", value: resendKey.trim() });
+        if (fromAddr.trim())
+            vars.push({ key: "EMAIL_FROM", value: fromAddr.trim() });
+        if (vars.length)
+            void save(vars);
+    };
+    const saveSendgrid = () => {
+        const vars = [];
+        if (sendgridKey.trim())
+            vars.push({ key: "SENDGRID_API_KEY", value: sendgridKey.trim() });
+        if (fromAddr.trim())
+            vars.push({ key: "EMAIL_FROM", value: fromAddr.trim() });
+        if (vars.length)
+            void save(vars);
+    };
+    return (_jsx(SettingsSection, { id: settingsSectionDomId("email"), icon: _jsx(IconMail, { size: 14 }), title: "Email", subtitle: "Needed before deploy for password resets, team invitations, share notifications, and dashboard email reports. Local development can run without it.", connected: !envLoaded ? undefined : anyConfigured, open: open, onToggle: onToggle, children: !envLoaded ? (_jsx(SettingsSkeleton, { lines: 2 })) : (_jsxs("div", { className: "space-y-2", children: [_jsx(SettingsSelect, { label: "Provider", value: emailProvider, options: [
+                        { value: "resend", label: "Resend" },
+                        { value: "sendgrid", label: "SendGrid" },
+                    ], onValueChange: (value) => setEmailProvider(value) }), emailProvider === "resend" ? (_jsxs(ManualSetupCard, { hint: "Use Resend for transactional email.", docsUrl: "https://resend.com/api-keys", docsLabel: "Get a Resend key", children: [resendConfigured ? (_jsxs("div", { className: cn("mb-1 flex items-center gap-1.5 text-green-500", noteTextClass(isPage)), children: [_jsx(IconCheck, { size: emailIconSize }), "RESEND_API_KEY configured"] })) : (_jsxs("div", { className: "mb-1 flex gap-1.5", children: [_jsx("input", { type: "password", value: resendKey, onChange: (e) => setResendKey(e.target.value), onKeyDown: (e) => {
+                                        if (e.key === "Enter")
+                                            saveResend();
+                                    }, placeholder: "re_...", className: emailInputCls }), _jsx(Button, { intent: "primary", emphasis: "solid", onClick: saveResend, disabled: !resendKey.trim() || saving, className: emailBtnCls, children: saving ? (_jsx(IconLoader2, { size: 10, className: "animate-spin" })) : saved ? (_jsx(IconCheck, { size: 10 })) : ("Save") })] })), fromConfigured ? (_jsxs("div", { className: cn("flex items-center gap-1.5 text-green-500", noteTextClass(isPage)), children: [_jsx(IconCheck, { size: emailIconSize }), "EMAIL_FROM configured"] })) : (_jsxs("div", { className: "flex gap-1.5", children: [_jsx("input", { type: "text", value: fromAddr, onChange: (e) => setFromAddr(e.target.value), onKeyDown: (e) => {
+                                        if (e.key === "Enter")
+                                            saveResend();
+                                    }, placeholder: "From address - e.g. Acme <hi@acme.com>", className: emailInputCls }), !resendConfigured ? null : (_jsx(Button, { intent: "primary", emphasis: "solid", onClick: saveResend, disabled: !fromAddr.trim() || saving, className: emailBtnCls, children: saving ? (_jsx(IconLoader2, { size: 10, className: "animate-spin" })) : saved ? (_jsx(IconCheck, { size: 10 })) : ("Save") }))] }))] })) : (_jsxs(ManualSetupCard, { hint: "Use SendGrid for transactional email. SendGrid requires a verified from address.", docsUrl: "https://app.sendgrid.com/settings/api_keys", docsLabel: "Get a SendGrid key", children: [sendgridConfigured ? (_jsxs("div", { className: cn("mb-1 flex items-center gap-1.5 text-green-500", noteTextClass(isPage)), children: [_jsx(IconCheck, { size: emailIconSize }), "SENDGRID_API_KEY configured"] })) : (_jsxs("div", { className: "mb-1 flex gap-1.5", children: [_jsx("input", { type: "password", value: sendgridKey, onChange: (e) => setSendgridKey(e.target.value), onKeyDown: (e) => {
+                                        if (e.key === "Enter")
+                                            saveSendgrid();
+                                    }, placeholder: "SG....", className: emailInputCls }), _jsx(Button, { intent: "primary", emphasis: "solid", onClick: saveSendgrid, disabled: !sendgridKey.trim() || saving, className: emailBtnCls, children: saving ? (_jsx(IconLoader2, { size: 10, className: "animate-spin" })) : saved ? (_jsx(IconCheck, { size: 10 })) : ("Save") })] })), fromConfigured ? (_jsxs("div", { className: cn("flex items-center gap-1.5 text-green-500", noteTextClass(isPage)), children: [_jsx(IconCheck, { size: emailIconSize }), "EMAIL_FROM configured"] })) : (_jsxs("div", { className: "flex gap-1.5", children: [_jsx("input", { type: "text", value: fromAddr, onChange: (e) => setFromAddr(e.target.value), onKeyDown: (e) => {
+                                        if (e.key === "Enter")
+                                            saveSendgrid();
+                                    }, placeholder: "From address - e.g. Acme <hi@acme.com>", className: emailInputCls }), !sendgridConfigured ? null : (_jsx(Button, { 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({ grouped = false, open, onToggle, }) {
+    const isPage = useSettingsSurface() === "page";
+    const [settings, setSettings] = useState(null);
+    const [value, setValue] = useState("");
+    const [loading, setLoading] = useState(true);
+    const [saving, setSaving] = useState(false);
+    const [saved, setSaved] = useState(false);
+    const [error, setError] = useState(null);
+    const load = useCallback(() => {
+        let cancelled = false;
+        setLoading(true);
+        fetch(agentNativePath("/_agent-native/agent-loop-settings"))
+            .then((r) => (r.ok ? r.json() : null))
+            .then((data) => {
+            if (cancelled || !data)
+                return;
+            setSettings(data);
+            setValue(String(data.maxIterations));
+        })
+            .catch(() => { })
+            .finally(() => {
+            if (!cancelled)
+                setLoading(false);
+        });
+        return () => {
+            cancelled = true;
+        };
+    }, []);
+    useEffect(() => load(), [load]);
+    useEffect(() => {
+        const handler = (event) => {
+            const detail = event.detail;
+            if (!detail?.maxIterations)
+                return;
+            setSettings(detail);
+            setValue(String(detail.maxIterations));
+        };
+        window.addEventListener("agent-loop-settings:changed", handler);
+        return () => window.removeEventListener("agent-loop-settings:changed", handler);
+    }, []);
+    if (!loading && !settings)
+        return null;
+    const numericValue = Number(value);
+    const hasPendingChange = !!settings &&
+        settings.canUpdate &&
+        Number.isInteger(numericValue) &&
+        numericValue !== settings.maxIterations;
+    const scopeLabel = settings?.scope === "org"
+        ? settings.orgName
+            ? `${settings.orgName} organization`
+            : "organization"
+        : "your account";
+    const save = async () => {
+        if (!settings?.canUpdate)
+            return;
+        setSaving(true);
+        setSaved(false);
+        setError(null);
+        try {
+            const res = await fetch(agentNativePath("/_agent-native/agent-loop-settings"), {
+                method: "PUT",
+                headers: { "Content-Type": "application/json" },
+                body: JSON.stringify({ maxIterations: numericValue }),
+            });
+            const body = await res.json().catch(() => ({}));
+            if (!res.ok) {
+                throw new Error(body?.error ?? `Save failed (${res.status})`);
+            }
+            setSettings(body);
+            setValue(String(body.maxIterations));
+            setSaved(true);
+            window.dispatchEvent(new CustomEvent("agent-loop-settings:changed", { detail: body }));
+            setTimeout(() => setSaved(false), 2000);
+        }
+        catch (err) {
+            setError(err instanceof Error ? err.message : "Save failed");
+        }
+        finally {
+            setSaving(false);
+        }
+    };
+    const reset = async () => {
+        if (!settings?.canUpdate)
+            return;
+        setSaving(true);
+        setSaved(false);
+        setError(null);
+        try {
+            const res = await fetch(agentNativePath("/_agent-native/agent-loop-settings"), { method: "DELETE" });
+            const body = await res.json().catch(() => ({}));
+            if (!res.ok) {
+                throw new Error(body?.error ?? `Reset failed (${res.status})`);
+            }
+            setSettings(body);
+            setValue(String(body.maxIterations));
+            window.dispatchEvent(new CustomEvent("agent-loop-settings:changed", { detail: body }));
+        }
+        catch (err) {
+            setError(err instanceof Error ? err.message : "Reset failed");
+        }
+        finally {
+            setSaving(false);
+        }
+    };
+    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, grouped: isPage && grouped, open: open, onToggle: onToggle, children: loading ? (_jsx(SettingsLoadingRow, {})) : 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) => {
+                                    if (e.key === "Enter" && hasPendingChange)
+                                        void save();
+                                }, className: cn(textInputClass(isPage), "min-w-0 flex-1 disabled:opacity-60"), style: isPage ? CONTROL_STYLE_PAGE : undefined }), _jsx(Button, { type: "button", 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 }))] }) }))) : null }));
+}
+export function areExtensionSettingsEnabled(options = {}) {
+    return options.extensionTools === true;
+}
+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 })] }));
+}
+function CapabilityStatusStrip({ isDevMode, builderConnected, builderLoading, builderBranchesAvailable, onOpenLlm, }) {
+    const codeAvailable = isDevMode || (builderConnected && builderBranchesAvailable);
+    const codeLabel = isDevMode
+        ? "Local tools"
+        : builderConnected && builderBranchesAvailable
+            ? "Builder branches"
+            : "Desktop/local";
+    return (_jsxs("div", { className: "rounded-md border border-border bg-muted/20 px-2.5 py-2", children: [_jsx("div", { className: "mb-1.5 text-[10px] font-medium text-muted-foreground", children: "Available now" }), _jsxs("div", { className: "space-y-1.5", children: [_jsx(CapabilityStatusRow, { label: "App", value: "Chat + actions", active: true }), _jsx(CapabilityStatusRow, { label: "Code", value: codeLabel, active: codeAvailable }), _jsx(CapabilityStatusRow, { label: "Builder", active: builderConnected, value: builderLoading ? (_jsx(Skeleton, { className: "h-3 w-16" })) : 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, initialSection, sectionRequestKey, sections = ALL_SETTINGS_SECTIONS, showCapabilityStrip = true, className, surface = "sidebar", builderConnectionOwnedExternally = false, agentAdditionalContent, }) {
+    const t = useT();
+    const { status: builder, loading: builderLoading, stale: builderStatusStale, } = useBuilderStatus({
+        enabled: !builderConnectionOwnedExternally,
+    });
+    const connected = builder?.configured ?? false;
+    const builderStatusAvailable = !builderLoading && !builderStatusStale && builder != null;
+    const connectUrl = builder?.connectUrl;
+    const orgName = builder?.orgName;
+    const envManaged = !!builder?.envManaged;
+    const credentialSource = builder?.credentialSource;
+    const builderBranchesAvailable = !!builder?.builderEnabled;
+    const showWorkspaceBuilderConnect = builderStatusAvailable && !connected;
+    const builderFlow = useBuilderConnectFlow({
+        enabled: !builderConnectionOwnedExternally,
+        popupUrl: connectUrl,
+        provisionAccount: true,
+        trackingSource: "settings_panel_builder_card",
+    });
+    const scrollSectionIntoView = useCallback((section) => {
+        window.requestAnimationFrame(() => {
+            document.getElementById(settingsSectionDomId(section))?.scrollIntoView({
+                block: "start",
+                behavior: "smooth",
+            });
+        });
+    }, []);
+    const { focusSecretKey, isSectionVisible: shouldShowSection, openSection, toggleSection: toggle, openSettingsSection: openControllerSection, } = useSettingsPanelController({
+        sections,
+        initialSection,
+        sectionRequestKey,
+        onScrollToSection: scrollSectionIntoView,
+    });
+    const openSettingsSection = useCallback((section, scroll = false) => openControllerSection(section, { scroll }), [openControllerSection]);
+    const isPage = surface === "page";
+    const isWorkspacePage = isPage && sections.includes("hosting");
+    const { isWorkspace, dispatchAllAppsHref } = useOrgSwitcherAppLinks(isPage);
+    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, builderStatusAvailable: builderStatusAvailable, 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 && agentAdditionalContent ? (_jsx(SettingsGroup, { title: "Notifications", children: agentAdditionalContent })) : null, 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, event-triggered, and webhook-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 and webhooks.", control: _jsxs("a", { href: appMountedPath(buildSettingsRoute("agent:automations"), STANDARD_APP_ROUTES.settings), 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: builderStatusAvailable ? (_jsx(UseBuilderCard, { builderFlow: builderFlow, connectUrl: connectUrl, connected: connected, orgName: orgName, envManaged: envManaged, credentialSource: credentialSource, trackingSource: "background_agent_settings", trackingFlow: "background_agent", compact: true })) : null }) }))] })), isPage && (isWorkspace || isWorkspacePage) && (_jsxs(SettingsGroup, { title: "Workspace", children: [isWorkspace && (_jsx(SettingsRow, { label: t("dispatch.pages.workspaceApps"), control: _jsxs("a", { href: dispatchAllAppsHref, 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: [t("dispatch.pages.browseApps"), _jsx(IconExternalLink, { size: 14 })] }) })), isWorkspacePage && shouldShowSection("demo-mode") && (_jsx(SettingsRow, { id: settingsSectionDomId("demo-mode"), label: "Demo mode", description: "Use sample data in this browser for presentations.", control: _jsx(DemoModeSection, { compact: true }) })), isWorkspacePage && shouldShowSection("hosting") && (_jsx(SettingsRow, { id: settingsSectionDomId("hosting"), label: "Hosting", description: "Deploy the app to the cloud.", control: _jsxs("div", { className: "flex flex-wrap items-center justify-end gap-2", children: [showWorkspaceBuilderConnect && (_jsx(UseBuilderCard, { builderFlow: builderFlow, connectUrl: connectUrl, connected: connected, orgName: orgName, envManaged: envManaged, credentialSource: credentialSource, trackingSource: "hosting_settings", trackingFlow: "hosting", compact: true })), _jsx(ManualSetupCard, { title: "Set up manually", hint: "Deploy manually to Netlify, Vercel, Cloudflare, or any Nitro-supported target.", docsUrl: docsUrl("deployment", {
+                                            campaign: "onboarding",
+                                            content: "deployment_settings",
+                                        }), dim: connected, bare: true, popover: true, popoverLabel: "Manage", summaryContent: connected ? (_jsx(UseBuilderCard, { builderFlow: builderFlow, connectUrl: connectUrl, connected: connected, orgName: orgName, envManaged: envManaged, credentialSource: credentialSource, trackingSource: "hosting_settings", trackingFlow: "hosting" })) : undefined })] }) })), shouldShowSection("database") && (_jsx(SettingsRow, { id: settingsSectionDomId("database"), label: "Database", description: "Connect persistent app storage.", control: _jsxs("div", { className: "flex flex-wrap items-center justify-end gap-2", children: [showWorkspaceBuilderConnect && (_jsx(UseBuilderCard, { builderFlow: builderFlow, connectUrl: connectUrl, connected: connected, orgName: orgName, envManaged: envManaged, credentialSource: credentialSource, trackingSource: "database_settings", trackingFlow: "database", compact: true })), _jsx(ManualSetupCard, { title: "Set up manually", hint: "Set DATABASE_URL in your .env to connect a supported database.", docsUrl: docsUrl("database", {
+                                            campaign: "onboarding",
+                                            content: "database_settings",
+                                        }), dim: connected, bare: true, popover: true, popoverLabel: "Manage", summaryContent: connected ? (_jsx(UseBuilderCard, { builderFlow: builderFlow, connectUrl: connectUrl, connected: connected, orgName: orgName, envManaged: envManaged, credentialSource: credentialSource, trackingSource: "database_settings", trackingFlow: "database" })) : undefined })] }) })), shouldShowSection("uploads") && (_jsx(SettingsRow, { id: settingsSectionDomId("uploads"), label: "File uploads", description: "Store avatars and chat attachments.", control: _jsxs("div", { className: "flex flex-wrap items-center justify-end gap-2", children: [showWorkspaceBuilderConnect && (_jsx(UseBuilderCard, { builderFlow: builderFlow, connectUrl: connectUrl, connected: connected, orgName: orgName, envManaged: envManaged, credentialSource: credentialSource, trackingSource: "file_upload_settings", trackingFlow: "file_upload", compact: true })), _jsx(ManualSetupCard, { title: "Set up manually", hint: "Use an S3-compatible bucket with a stable public URL for durable chat attachments.", docsUrl: docsUrl("file-uploads", {
+                                            campaign: "onboarding",
+                                            content: "file_upload_settings",
+                                        }), dim: connected, bare: true, popover: true, popoverLabel: "Manage", summaryContent: connected ? (_jsx(UseBuilderCard, { builderFlow: builderFlow, connectUrl: connectUrl, connected: connected, orgName: orgName, envManaged: envManaged, credentialSource: credentialSource, trackingSource: "file_upload_settings", trackingFlow: "file_upload" })) : undefined, children: _jsx(StorageSettingsForm, {}) })] }) })), shouldShowSection("auth") && (_jsx(SettingsRow, { id: settingsSectionDomId("auth"), label: "Authentication", description: "Set up sign-in and access control.", control: _jsxs("div", { className: "flex flex-wrap items-center justify-end gap-2", children: [showWorkspaceBuilderConnect && (_jsx(UseBuilderCard, { builderFlow: builderFlow, connectUrl: connectUrl, connected: connected, orgName: orgName, envManaged: envManaged, credentialSource: credentialSource, trackingSource: "auth_settings", trackingFlow: "auth", compact: true })), _jsx(ManualSetupCard, { title: "Set up manually", hint: "Configure Better Auth and optional Google or GitHub providers.", docsUrl: docsUrl("authentication", {
+                                            campaign: "onboarding",
+                                            content: "authentication_settings",
+                                        }), dim: connected, bare: true, popover: true, popoverLabel: "Manage", summaryContent: connected ? (_jsx(UseBuilderCard, { builderFlow: builderFlow, connectUrl: connectUrl, connected: connected, orgName: orgName, envManaged: envManaged, credentialSource: credentialSource, trackingSource: "auth_settings", trackingFlow: "auth" })) : undefined })] }) }))] })), !isPage && shouldShowSection("llm") && (_jsx(LLMSectionInner, { builderFlow: builderFlow, builderLoading: builderLoading, builderStatusAvailable: builderStatusAvailable, 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, {}) })), !isPage && 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, event-triggered, and webhook-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 }) })), !isPage && 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: docsUrl("deployment", {
+                                    campaign: "onboarding",
+                                    content: "deployment_settings",
+                                }), dim: connected })] }) })), !isPage && 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 hosted Postgres, or use local PGlite with pglite:./data/pglite.", docsUrl: docsUrl("database", {
+                                    campaign: "onboarding",
+                                    content: "database_settings",
+                                }), dim: connected })] }) })), !isPage && 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: "Object storage keeps uploaded files durable and their URLs reusable throughout the thread. Connect Builder or use an S3-compatible bucket below.", docsUrl: docsUrl("file-uploads", {
+                                    campaign: "onboarding",
+                                    content: "file_upload_settings",
+                                }), dim: connected, children: _jsx(StorageSettingsForm, {}) })] }) })), !isPage && 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: docsUrl("authentication", {
+                                    campaign: "onboarding",
+                                    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: builderStatusAvailable ? (_jsx(UseBuilderCard, { builderFlow: builderFlow, connectUrl: connectUrl, connected: connected, orgName: orgName, envManaged: envManaged, credentialSource: credentialSource, trackingSource: "background_agent_settings", trackingFlow: "background_agent" })) : null })), 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 });
+}
+export function ConnectionsSettingsContent({ settingsPanelProps: _settingsPanelProps, }) {
+    return (_jsx("div", { className: "w-full", children: _jsx(Suspense, { fallback: null, children: _jsx(IntegrationsPanel, {}) }) }));
+}
+export function AgentSettingsContent({ className, sections = AGENT_SETTINGS_SECTIONS, agentAdditionalContent, } = {}) {
+    const { isDevMode, canToggle, setDevMode } = useDevMode();
+    const settingsPanelProps = useMemo(() => ({
+        isDevMode,
+        onToggleDevMode: () => {
+            void setDevMode(!isDevMode);
+        },
+        showDevToggle: canToggle,
+    }), [canToggle, isDevMode, setDevMode]);
+    return (_jsx(SettingsPanelContent, { ...settingsPanelProps, surface: "page", sections: sections, showCapabilityStrip: false, className: cn("w-full", className), agentAdditionalContent: agentAdditionalContent }));
+}
+export function useAgentSettingsTabs(options = {}) {
+    const t = useT();
+    const { isDevMode, canToggle, setDevMode } = useDevMode();
+    const { data: org } = useOrg();
+    const locale = useOptionalLocale()?.locale ?? "en-US";
+    const canManageOrg = !org?.orgId || org.role === "owner" || org.role === "admin";
+    const extensionToolsEnabled = areExtensionSettingsEnabled(options);
+    const appName = options.appName;
+    const agentAdditionalContent = options.agentAdditionalContent;
+    const agentAdditionalTabFactories = options.agentAdditionalTabFactories ?? [];
+    const usageAppId = options.usageAppId ?? null;
+    const usageViewAllHref = options.usageViewAllHref;
+    const organizationContent = options.organizationContent;
+    const baseProps = useMemo(() => ({
+        isDevMode,
+        onToggleDevMode: () => {
+            void setDevMode(!isDevMode);
+        },
+        showDevToggle: canToggle,
+    }), [canToggle, isDevMode, setDevMode]);
+    const additionalTabs = useMemo(() => agentAdditionalTabFactories.map((factory) => factory({
+        scope: "user",
+        canManageOrg,
+        scopeControl: null,
+    })), [agentAdditionalTabFactories, canManageOrg]);
+    return useMemo(() => {
+        const searchTabs = getAgentSettingsSearchTabs(locale);
+        const searchTab = (id) => {
+            const tab = searchTabs.find((candidate) => candidate.id === id);
+            if (!tab)
+                throw new Error(`Missing agent workspace tab: ${id}`);
+            return tab;
+        };
+        const agent = searchTab("agent");
+        const integrations = searchTab("integrations");
+        const keys = searchTab("keys");
+        const mcp = searchTab("mcp");
+        const usage = searchTab("usage");
+        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 [
+            {
+                ...integrations,
+                icon: IconPlugConnected,
+                group: "integrations",
+                content: _jsx(ConnectionsSettingsContent, { settingsPanelProps: baseProps }),
+            },
+            {
+                ...keys,
+                icon: IconKey,
+                group: "integrations",
+                content: (_jsx("div", { className: "w-full", children: _jsx(SettingsPanelContent, { ...baseProps, surface: "page", sections: ["secrets"], showCapabilityStrip: false, className: "w-full", builderConnectionOwnedExternally: true }) })),
+            },
+            {
+                ...mcp,
+                icon: IconApps,
+                group: "integrations",
+                content: _jsx(McpAccessSettings, { appName: appName }),
+            },
+            {
+                ...usage,
+                icon: IconCoin,
+                group: "integrations",
+                content: (_jsx("div", { className: "w-full", children: _jsx(UsageSection, { appId: usageAppId, viewAllHref: usageViewAllHref }) })),
+            },
+            {
+                ...organization,
+                icon: IconUsersGroup,
+                group: "workspace",
+                content: (_jsx("div", { className: "w-full", children: organizationContent ?? _jsx(TeamPage, { showTitle: false }) })),
+            },
+            {
+                ...workspace,
+                icon: IconCloud,
+                group: "workspace",
+                content: (_jsx(SettingsPanelContent, { ...baseProps, surface: "page", sections: WORKSPACE_SETTINGS_SECTIONS, showCapabilityStrip: false, className: "w-full" })),
+            },
+            ...(extensionToolsEnabled
+                ? [
+                    {
+                        id: "extensions",
+                        label: "Extensions",
+                        icon: IconTool,
+                        group: "workspace",
+                        keywords: "extensions widgets mini apps tools sandboxed apps",
+                        content: _jsx(ExtensionsSettingsContent, {}),
+                    },
+                ]
+                : []),
+            {
+                id: "agent",
+                label: "Overview",
+                icon: IconHierarchy2,
+                group: "agent",
+                keywords: agent.keywords,
+                searchEntries: overviewSearchEntries,
+                content: (_jsx(AgentWorkspaceContent, { activeTab: "overview", overview: _jsx(AgentSettingsContent, { className: "w-full", agentAdditionalContent: agentAdditionalContent, sections: AGENT_SETTINGS_SECTIONS.filter((section) => section !== "automations" && section !== "a2a") }) })),
+                shellExtraContent: agentAdditionalContent,
+            },
+            {
+                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:personalization",
+                label: t("agentChat.personalization.tab"),
+                icon: IconBrain,
+                group: "agent",
+                keywords: "personalization custom instructions memory preferences remember",
+                searchEntries: [
+                    {
+                        id: "agent-personalization",
+                        label: t("agentChat.personalization.tab"),
+                        keywords: "custom instructions personal memory remember preferences",
+                        tabId: "agent:personalization",
+                        hash: "agent:personalization",
+                        icon: IconBrain,
+                    },
+                ],
+                content: _jsx(AgentPersonalizationSettings, {}),
+            },
+            {
+                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:directory",
+                label: t("agentChat.agents.directoryTab"),
+                icon: IconTopologyRing2,
+                group: "agent",
+                keywords: "agent directory providers registry foundry gemini anthropic a2a connect",
+                searchEntries: [
+                    {
+                        id: "agent-directory",
+                        label: t("agentChat.agents.directoryTab"),
+                        keywords: "agent directory providers registry foundry gemini anthropic a2a connect",
+                        description: t("agentChat.agents.directoryPageHint"),
+                        tabId: "agent:directory",
+                        hash: "agent:directory",
+                        icon: IconTopologyRing2,
+                    },
+                ],
+                content: (_jsx(AgentWorkspaceContent, { activeTab: "directory", 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 }),
+            },
+            ...additionalTabs,
+        ];
+    }, [
+        agentAdditionalContent,
+        additionalTabs,
+        appName,
+        baseProps,
+        extensionToolsEnabled,
+        locale,
+        organizationContent,
+        t,
+        usageAppId,
+        usageViewAllHref,
+    ]);
+}
+//# sourceMappingURL=SettingsPanel.js.map