@agent-native/core 0.119.1 → 0.119.3

package/dist/client/settings/SettingsPanel.js

@@ -1,9 +1,9 @@
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Checkbox, Picker, TextField, } from "@agent-native/toolkit/design-system";
 import { Button as ToolkitButton } from "@agent-native/toolkit/ui/button";
-import { IconChevronDown, IconChevronRight, IconCheck, IconExternalLink, IconBrain, IconHierarchy2, IconBrowser, IconGitBranch, IconCloud, IconDatabase, IconShield, IconPlugConnected, IconTopologyRing2, IconLoader2, IconUpload, IconCoin, IconMail, IconKey, IconMicrophone, IconEyeOff, IconBolt, IconGauge, IconUserCircle, IconApps, IconUsersGroup, } from "@tabler/icons-react";
+import { IconChevronDown, IconChevronRight, IconCheck, IconExternalLink, IconBrain, IconHierarchy2, IconBrowser, IconGitBranch, IconCloud, IconDatabase, IconShield, IconPlugConnected, IconTopologyRing2, IconLoader2, IconUpload, IconCoin, IconMail, IconKey, IconMicrophone, IconEyeOff, IconBolt, IconGauge, IconApps, IconUsersGroup, } from "@tabler/icons-react";
 import React, { Suspense, lazy, useState, useEffect, useCallback, useMemo, useRef, } from "react";
-import { Link } from "react-router";
+import { Link, Navigate } from "react-router";
 import { PROVIDER_ENV_PLACEHOLDERS } from "../../agent/engine/provider-env-vars.js";
 import { saveAgentEngineProviderSettings } from "../agent-engine-key.js";
 import { agentNativePath } from "../api-path.js";
@@ -12,10 +12,8 @@ import { Tooltip, TooltipContent, TooltipTrigger, } from "../components/ui/toolt
 import { useT } from "../i18n.js";
 import { TeamPage } from "../org/TeamPage.js";
 import { BuilderConnectCard } from "../setup-connections/BuilderConnectCard.js";
-import { useActionMutation, useActionQuery, callAction, } from "../use-action.js";
-import { uploadAvatar, useAvatarUrl } from "../use-avatar.js";
+import { callAction } from "../use-action.js";
 import { useDevMode } from "../use-dev-mode.js";
-import { useSession } from "../use-session.js";
 import { cn } from "../utils.js";
 import { AGENT_SETTINGS_SECTIONS, ALL_SETTINGS_SECTIONS, CONNECTION_SETTINGS_SECTIONS, WORKSPACE_SETTINGS_SECTIONS, getAgentSettingsSearchTabs, } from "./agent-settings-search.js";
 import { AgentsSection } from "./AgentsSection.js";
@@ -204,11 +202,11 @@ function UseBuilderCard({ builderFlow, connectUrl, connected, orgName, envManage
     return (_jsx(Button, { type: "button", onClick: () => builderFlow.start({ trackingSource, trackingFlow }), disabled: builderFlow.connecting, className: cn("block w-full rounded-md border border-border text-start no-underline bg-gradient-to-br from-teal-500/10 via-transparent to-transparent hover:border-foreground/30 transition-colors disabled:cursor-wait disabled:opacity-70", isPage ? "px-4 py-3.5" : "px-3 py-3", isPage ? "[&_svg]:!size-4" : "[&_svg]:!size-3.5"), children: _jsxs("div", { className: "flex items-start gap-2.5", children: [_jsx("div", { className: cn("flex shrink-0 items-center justify-center rounded-md bg-foreground text-background", isPage ? "h-8 w-8" : "h-7 w-7"), children: _jsx(BuilderBMark, { className: isPage ? "h-4 w-4" : "h-3.5 w-3.5" }) }), _jsxs("div", { className: "flex-1 min-w-0", children: [_jsxs("div", { className: "flex items-center gap-1.5 flex-wrap", children: [_jsx("span", { className: cn("font-semibold text-foreground", isPage ? "text-sm" : "text-[12px]"), children: builderFlow.connecting ? "Connecting Builder.io..." : label }), builderFlow.connecting && (_jsx(IconLoader2, { size: isPage ? 14 : 12, className: "shrink-0 animate-spin text-muted-foreground" }))] }), _jsx("p", { className: cn("text-muted-foreground mt-0.5 leading-snug", isPage ? "text-xs" : "text-[10.5px]"), children: subtitle }), builderFlow.error && (_jsx("p", { className: cn("mt-1 text-destructive", bodyCls), children: builderFlow.error }))] }), _jsx(IconExternalLink, { size: isPage ? 14 : 12, className: "shrink-0 text-muted-foreground mt-0.5" })] }) }));
 }
 // ─── Manual setup card ──────────────────────────────────────────────────────
-function ManualSetupCard({ hint, docsUrl, docsLabel = "Read the docs", children, dim, sourceBadge, }) {
+function ManualSetupCard({ id, hint, docsUrl, docsLabel = "Read the docs", children, dim, sourceBadge, }) {
     const isPage = useSettingsSurface() === "page";
     const titleCls = isPage ? "text-sm" : "text-[11px]";
     const bodyCls = isPage ? "text-xs" : "text-[10px]";
-    return (_jsxs("div", { className: cn("rounded-md border border-border", isPage ? "px-3.5 py-3" : "px-2.5 py-2", dim ? "" : "bg-accent/30"), children: [_jsxs("div", { className: "flex items-center justify-between mb-1", children: [_jsx("div", { className: cn("font-medium text-foreground", titleCls), children: "Set up manually" }), sourceBadge ? (_jsxs("span", { className: cn("flex items-center gap-1 text-green-500", bodyCls), children: [_jsx(IconCheck, { size: isPage ? 14 : 10 }), sourceBadge] })) : null] }), hint && (_jsx("p", { className: cn("text-muted-foreground mb-1.5", bodyCls), children: hint })), children, docsUrl && (_jsxs("a", { href: docsUrl, target: "_blank", rel: "noopener noreferrer", className: cn(pillButtonClass(isPage, "outline"), "mt-1.5 no-underline"), children: [docsLabel, _jsx(IconExternalLink, { size: isPage ? 14 : 10 })] }))] }));
+    return (_jsxs("div", { id: id, className: cn("rounded-md border border-border", isPage ? "px-3.5 py-3" : "px-2.5 py-2", dim ? "" : "bg-accent/30"), children: [_jsxs("div", { className: "flex items-center justify-between mb-1", children: [_jsx("div", { className: cn("font-medium text-foreground", titleCls), children: "Set up manually" }), sourceBadge ? (_jsxs("span", { className: cn("flex items-center gap-1 text-green-500", bodyCls), children: [_jsx(IconCheck, { size: isPage ? 14 : 10 }), sourceBadge] })) : null] }), hint && (_jsx("p", { className: cn("text-muted-foreground mb-1.5", bodyCls), children: hint })), children, docsUrl && (_jsxs("a", { href: docsUrl, target: "_blank", rel: "noopener noreferrer", className: cn(pillButtonClass(isPage, "outline"), "mt-1.5 no-underline"), children: [docsLabel, _jsx(IconExternalLink, { size: isPage ? 14 : 10 })] }))] }));
 }
 // ─── LLM helpers ────────────────────────────────────────────────────────────
 function friendlyModelName(model) {
@@ -315,6 +313,7 @@ const PROVIDER_DOCS = {
 };
 function LLMSectionInner({ builderFlow, builderLoading, connectUrl, connected, orgName, envManaged, credentialSource, open, onToggle, }) {
     const isPage = useSettingsSurface() === "page";
+    const t = useT();
     const [envKeys, setEnvKeys] = useState([]);
     const [apiKey, setApiKey] = useState("");
     const [saving, setSaving] = useState(false);
@@ -328,6 +327,7 @@ function LLMSectionInner({ builderFlow, builderLoading, connectUrl, connected, o
     const [baseUrlConfigured, setBaseUrlConfigured] = useState(false);
     const [clearBaseUrl, setClearBaseUrl] = useState(false);
     const [advancedOpen, setAdvancedOpen] = useState(false);
+    const [manualSetupOpen, setManualSetupOpen] = useState(false);
     const [applyNote, setApplyNote] = useState(false);
     const [testing, setTesting] = useState(false);
     const [testResult, setTestResult] = useState(null);
@@ -532,7 +532,9 @@ function LLMSectionInner({ builderFlow, builderLoading, connectUrl, connected, o
         }
         catch { }
     };
-    return (_jsx(SettingsSection, { id: settingsSectionDomId("llm"), icon: _jsx(IconBrain, { size: 14 }), title: "LLM", subtitle: "Connect any major LLM \u2014 Claude, GPT, Gemini, and more.", required: true, connected: initialLoading ? undefined : anyKeyConfigured, open: open, onToggle: onToggle, children: initialLoading ? (_jsx(SettingsSkeleton, { lines: 3 })) : (_jsxs("div", { className: "space-y-2", children: [_jsx(UseBuilderCard, { builderFlow: builderFlow, connectUrl: connectUrl, connected: connected, orgName: orgName, envManaged: envManaged, credentialSource: credentialSource, trackingSource: "llm_settings", trackingFlow: "connect_llm", label: "Connect Builder.io" }), !builderConnected && (_jsx(ManualSetupCard, { hint: manualSetupHint, sourceBadge: sourceBadge, children: _jsxs("div", { className: "space-y-2 mb-1", children: [_jsx(SettingsSelect, { label: "Provider", value: selectedEngine, options: providerOptions, onValueChange: (val) => {
+    return (_jsx(SettingsSection, { id: settingsSectionDomId("llm"), icon: _jsx(IconBrain, { size: 14 }), title: "LLM", subtitle: "Connect any major LLM \u2014 Claude, GPT, Gemini, and more.", required: true, connected: initialLoading ? undefined : anyKeyConfigured, open: open, onToggle: onToggle, children: initialLoading ? (_jsx(SettingsSkeleton, { lines: 3 })) : (_jsxs("div", { className: "space-y-2", children: [_jsx(UseBuilderCard, { builderFlow: builderFlow, connectUrl: connectUrl, connected: connected, orgName: orgName, envManaged: envManaged, credentialSource: credentialSource, trackingSource: "llm_settings", trackingFlow: "connect_llm", label: "Connect Builder.io" }), builderConnected && (_jsxs(Button, { type: "button", intent: "neutral", emphasis: "ghost", "aria-expanded": manualSetupOpen, "aria-controls": "llm-manual-setup", onClick: () => setManualSetupOpen((open) => !open), className: cn("inline-flex items-center gap-1 px-0.5 text-muted-foreground hover:text-foreground", isPage ? "text-xs" : "text-[10px]"), children: [t("agentPanel.addOwnKeys", {
+                            defaultValue: "Add your own keys",
+                        }), _jsx(IconChevronDown, { size: isPage ? 14 : 11, className: cn("transition-transform", manualSetupOpen && "rotate-180") })] })), (!builderConnected || manualSetupOpen) && (_jsx(ManualSetupCard, { id: "llm-manual-setup", hint: manualSetupHint, sourceBadge: builderConnected ? undefined : sourceBadge, children: _jsxs("div", { className: "space-y-2 mb-1", children: [_jsx(SettingsSelect, { label: "Provider", value: selectedEngine, options: providerOptions, onValueChange: (val) => {
                                     setSelectedEngine(val);
                                     const info = engines.find((e) => e.name === val);
                                     setSelectedModel(info?.defaultModel ?? "");
@@ -932,73 +934,6 @@ function CapabilityStatusStrip({ isDevMode, builderConnected, builderLoading, bu
             : "Desktop/local";
     return (_jsxs("div", { className: "rounded-md border border-border bg-muted/20 px-2.5 py-2", children: [_jsx("div", { className: "mb-1.5 text-[10px] font-medium text-muted-foreground", children: "Available now" }), _jsxs("div", { className: "space-y-1.5", children: [_jsx(CapabilityStatusRow, { label: "App", value: "Chat + actions", active: true }), _jsx(CapabilityStatusRow, { label: "Code", value: codeLabel, active: codeAvailable }), _jsx(CapabilityStatusRow, { label: "Builder", active: builderConnected, value: builderLoading ? ("Checking...") : builderConnected ? ("Connected") : (_jsx(Button, { type: "button", intent: "neutral", emphasis: "outline", onClick: onOpenLlm, className: "rounded border border-border px-1.5 py-0.5 text-[10px] text-muted-foreground transition-colors hover:bg-accent/40 hover:text-foreground", children: "Connect" })) })] })] }));
 }
-function AccountSectionInner({ open, onToggle, }) {
-    const isPage = useSettingsSurface() === "page";
-    const t = useT();
-    const { session, isLoading } = useSession();
-    const email = session?.email;
-    const profileQuery = useActionQuery("get-user-profile", undefined, { enabled: !!email });
-    const updateProfile = useActionMutation("update-user-profile");
-    const avatarUrl = useAvatarUrl(email);
-    const fileInputRef = useRef(null);
-    const [uploading, setUploading] = useState(false);
-    const [status, setStatus] = useState("idle");
-    const [name, setName] = useState("");
-    const displayName = profileQuery.data?.name ||
-        session?.name ||
-        email ||
-        t("settings.profileSignedOut");
-    const initials = (displayName || "?")
-        .split(/[ @._-]+/)
-        .filter(Boolean)
-        .slice(0, 2)
-        .map((part) => part[0]?.toUpperCase())
-        .join("");
-    useEffect(() => {
-        const nextName = profileQuery.data?.name || session?.name;
-        if (nextName)
-            setName(nextName);
-    }, [profileQuery.data?.name, session?.name]);
-    const handleAvatarChange = async (event) => {
-        const file = event.target.files?.[0];
-        event.target.value = "";
-        if (!file || !email)
-            return;
-        setUploading(true);
-        setStatus("idle");
-        try {
-            await uploadAvatar(file, email);
-            setStatus("saved");
-        }
-        catch {
-            setStatus("error");
-        }
-        finally {
-            setUploading(false);
-        }
-    };
-    const handleProfileSave = () => {
-        const nextName = name.trim();
-        if (!nextName || !email)
-            return;
-        updateProfile.mutate({ name: nextName });
-    };
-    return (_jsxs(SettingsSection, { id: settingsSectionDomId("account"), icon: _jsx(IconUserCircle, { size: 14 }), title: t("settings.profileTitle"), subtitle: t("settings.profileDescription"), open: open, onToggle: onToggle, children: [_jsxs("div", { className: "flex items-center gap-3", children: [_jsx("div", { className: cn("flex shrink-0 items-center justify-center overflow-hidden rounded-full border border-border bg-accent font-semibold text-muted-foreground", isPage ? "h-14 w-14 text-[15px]" : "h-12 w-12 text-[13px]"), children: avatarUrl ? (_jsx("img", { src: avatarUrl, alt: "", className: "h-full w-full object-cover" })) : (initials) }), _jsxs("div", { className: "min-w-0 flex-1", children: [_jsx("p", { className: cn("truncate font-medium text-foreground", isPage ? "text-sm" : "text-[12px]"), children: isLoading ? t("settings.profileLoading") : displayName }), email && (_jsx("p", { className: cn("truncate text-muted-foreground", subTextClass(isPage)), children: email })), status === "saved" && (_jsx("p", { className: cn("mt-1 text-green-600 dark:text-green-400", subTextClass(isPage)), children: t("settings.profilePhotoUpdated") })), status === "error" && (_jsx("p", { className: cn("mt-1 text-destructive", subTextClass(isPage)), children: t("settings.profilePhotoError") }))] }), _jsx("input", { ref: fileInputRef, type: "file", accept: "image/*", className: "hidden", onChange: handleAvatarChange }), _jsx(Button, { type: "button", intent: "neutral", emphasis: "outline", disabled: !email || uploading, onClick: () => fileInputRef.current?.click(), className: cn(pillButtonClass(isPage, "outline"), "shrink-0 justify-center"), children: uploading
-                            ? t("settings.profileUploading")
-                            : t("settings.profileChangePhoto") })] }), _jsxs("form", { className: "space-y-1.5", onSubmit: (event) => {
-                    event.preventDefault();
-                    handleProfileSave();
-                }, children: [_jsx("label", { htmlFor: "agent-native-profile-name", className: fieldLabelClass(isPage), children: t("settings.profileNameLabel") }), _jsx("input", { id: "agent-native-profile-name", type: "text", value: name, onChange: (event) => {
-                            updateProfile.reset();
-                            setName(event.target.value);
-                        }, placeholder: t("settings.profileNamePlaceholder"), disabled: !email || profileQuery.isLoading || updateProfile.isPending, maxLength: 120, className: textInputClass(isPage) }), _jsx("p", { className: cn("text-muted-foreground", noteTextClass(isPage)), children: t("settings.profileNameDescription") }), _jsxs("div", { className: "flex items-center justify-between gap-3 pt-1", children: [_jsxs("div", { className: "min-h-4", children: [updateProfile.isSuccess && (_jsx("p", { className: "text-green-600 dark:text-green-400", children: t("settings.profileSaved") })), updateProfile.error && (_jsx("p", { className: "text-destructive", children: t("settings.profileSaveError") }))] }), _jsx(Button, { type: "submit", intent: "primary", emphasis: "solid", disabled: !email ||
-                                    profileQuery.isLoading ||
-                                    updateProfile.isPending ||
-                                    !name.trim() ||
-                                    name.trim() === displayName, className: pillButtonClass(isPage, "solid"), children: updateProfile.isPending
-                                    ? t("settings.profileSaving")
-                                    : t("settings.profileSave") })] })] })] }));
-}
 function SettingsPanelContent({ isDevMode, onToggleDevMode, showDevToggle, devAppUrl, initialSection, sectionRequestKey, sections = ALL_SETTINGS_SECTIONS, showCapabilityStrip = true, className, surface = "sidebar", builderConnectionOwnedExternally = false, }) {
     const { status: builder, loading: builderLoading } = useBuilderStatus({
         enabled: !builderConnectionOwnedExternally,
@@ -1034,7 +969,7 @@ function SettingsPanelContent({ isDevMode, onToggleDevMode, showDevToggle, devAp
                             const nextIsDev = next === "development";
                             if (nextIsDev !== isDevMode)
                                 onToggleDevMode();
-                        } })) })), showCapabilityStrip && (_jsx(CapabilityStatusStrip, { isDevMode: isDevMode, builderConnected: connected, builderLoading: builderLoading, builderBranchesAvailable: builderBranchesAvailable, onOpenLlm: () => openSettingsSection("llm", true) })), shouldShowSection("account") && (_jsx(AccountSectionInner, { open: openSection === "account", onToggle: () => toggle("account") })), shouldShowSection("llm") && (_jsx(LLMSectionInner, { builderFlow: builderFlow, builderLoading: builderLoading, connectUrl: connectUrl, connected: connected, orgName: orgName, envManaged: envManaged, credentialSource: credentialSource, open: openSection === "llm", onToggle: () => toggle("llm") })), shouldShowSection("app-models") && (_jsx(AppModelDefaultsSectionInner, { open: openSection === "app-models", onToggle: () => toggle("app-models") })), shouldShowSection("limits") && (_jsx(AgentLimitsSectionInner, { open: openSection === "limits", onToggle: () => toggle("limits") })), shouldShowSection("voice") && (_jsx(SettingsSection, { id: settingsSectionDomId("voice"), icon: _jsx(IconMicrophone, { size: 14 }), title: "Voice Transcription", subtitle: "How the composer microphone turns your voice into text.", open: openSection === "voice", onToggle: () => toggle("voice"), children: _jsx(VoiceTranscriptionSection, {}) })), shouldShowSection("demo-mode") && (_jsx(SettingsSection, { id: settingsSectionDomId("demo-mode"), icon: _jsx(IconEyeOff, { size: 14 }), title: "Demo mode", subtitle: "Replace displayed emails with realistic fake data in this browser and reshape supported charts for presentations. Backend, MCP, and agent results stay real and access-scoped.", open: openSection === "demo-mode", onToggle: () => toggle("demo-mode"), children: _jsx(DemoModeSection, {}) })), shouldShowSection("automations") && (_jsx(SettingsSection, { id: settingsSectionDomId("automations"), icon: _jsx(IconBolt, { size: 14 }), title: "Automations", subtitle: "Event-triggered and scheduled automations.", open: openSection === "automations", onToggle: () => toggle("automations"), children: _jsx(AutomationsSection, {}) })), shouldShowSection("secrets") && (_jsx(SettingsSection, { id: settingsSectionDomId("secrets"), icon: _jsx(IconKey, { size: 14 }), title: "API Keys & Connections", subtitle: "Service credentials and automation keys.", open: openSection === "secrets", onToggle: () => toggle("secrets"), children: _jsx(SecretsSection, { focusKey: focusSecretKey }) })), shouldShowSection("hosting") && (_jsx(SettingsSection, { id: settingsSectionDomId("hosting"), icon: _jsx(IconCloud, { size: 14 }), title: "Hosting", subtitle: "Deploy your app to the cloud.", connected: connected, open: openSection === "hosting", onToggle: () => toggle("hosting"), children: _jsxs("div", { className: "space-y-2", children: [_jsx(UseBuilderCard, { builderFlow: builderFlow, connectUrl: connectUrl, connected: connected, orgName: orgName, envManaged: envManaged, credentialSource: credentialSource, trackingSource: "hosting_settings", trackingFlow: "hosting" }), _jsx(ManualSetupCard, { hint: "Deploy manually to Netlify, Vercel, Cloudflare, or any Nitro-supported target.", docsUrl: "https://www.builder.io/c/docs/agent-native-deployment?utm_source=agent-native&utm_medium=product&utm_campaign=onboarding&utm_content=deployment_settings", dim: connected })] }) })), shouldShowSection("database") && (_jsx(SettingsSection, { id: settingsSectionDomId("database"), icon: _jsx(IconDatabase, { size: 14 }), title: "Database", subtitle: "Connect a cloud database for persistent storage.", connected: connected, open: openSection === "database", onToggle: () => toggle("database"), children: _jsxs("div", { className: "space-y-2", children: [_jsx(UseBuilderCard, { builderFlow: builderFlow, connectUrl: connectUrl, connected: connected, orgName: orgName, envManaged: envManaged, credentialSource: credentialSource, trackingSource: "database_settings", trackingFlow: "database" }), _jsx(ManualSetupCard, { hint: "Set DATABASE_URL in your .env to connect Neon, Supabase, Turso, any Postgres/SQLite database, or local PGlite with pglite:./data/pglite.", docsUrl: "https://www.builder.io/c/docs/agent-native-database?utm_source=agent-native&utm_medium=product&utm_campaign=onboarding&utm_content=database_settings", dim: connected })] }) })), shouldShowSection("uploads") && (_jsx(SettingsSection, { id: settingsSectionDomId("uploads"), icon: _jsx(IconUpload, { size: 14 }), title: "File uploads", subtitle: "Where user-uploaded files (avatars, chat attachments) are stored.", connected: connected, open: openSection === "uploads", onToggle: () => toggle("uploads"), children: _jsxs("div", { className: "space-y-2", children: [_jsx(UseBuilderCard, { builderFlow: builderFlow, connectUrl: connectUrl, connected: connected, orgName: orgName, envManaged: envManaged, credentialSource: credentialSource, trackingSource: "file_upload_settings", trackingFlow: "file_upload" }), _jsx(ManualSetupCard, { hint: "Without a provider, files are stored as base64 in your database. Fine for dev, not recommended for production.", docsUrl: "https://www.builder.io/c/docs/agent-native-file-uploads?utm_source=agent-native&utm_medium=product&utm_campaign=onboarding&utm_content=file_upload_settings", dim: connected })] }) })), shouldShowSection("auth") && (_jsx(SettingsSection, { id: settingsSectionDomId("auth"), icon: _jsx(IconShield, { size: 14 }), title: "Authentication", subtitle: "Set up user authentication and access control.", connected: connected, open: openSection === "auth", onToggle: () => toggle("auth"), children: _jsxs("div", { className: "space-y-2", children: [_jsx(UseBuilderCard, { builderFlow: builderFlow, connectUrl: connectUrl, connected: connected, orgName: orgName, envManaged: envManaged, credentialSource: credentialSource, trackingSource: "auth_settings", trackingFlow: "auth" }), _jsx(ManualSetupCard, { hint: "Configure Better Auth with BETTER_AUTH_SECRET and optional Google/GitHub OAuth providers.", docsUrl: "https://www.builder.io/c/docs/agent-native-authentication?utm_source=agent-native&utm_medium=product&utm_campaign=onboarding&utm_content=authentication_settings", dim: connected })] }) })), shouldShowSection("email") && (_jsx(EmailSectionInner, { open: openSection === "email", onToggle: () => toggle("email") })), shouldShowSection("browser") && (_jsx(SettingsSection, { id: settingsSectionDomId("browser"), icon: _jsx(IconBrowser, { size: 14 }), title: "Browser Automation", subtitle: "Let agents control a real browser for web tasks.", connected: builderConnectionOwnedExternally ? undefined : connected, open: openSection === "browser", onToggle: () => toggle("browser"), children: !builderConnectionOwnedExternally ? (_jsx(UseBuilderCard, { builderFlow: builderFlow, connectUrl: connectUrl, connected: connected, orgName: orgName, envManaged: envManaged, credentialSource: credentialSource, trackingSource: "browser_settings", trackingFlow: "browser_automation" })) : null })), builderBranchesAvailable && shouldShowSection("background") && (_jsx(SettingsSection, { id: settingsSectionDomId("background"), icon: _jsx(IconGitBranch, { size: 14 }), title: "Background Agent", subtitle: "Make code changes from production mode via Builder.", connected: connected, open: openSection === "background", onToggle: () => toggle("background"), children: _jsx(UseBuilderCard, { builderFlow: builderFlow, connectUrl: connectUrl, connected: connected, orgName: orgName, envManaged: envManaged, credentialSource: credentialSource, trackingSource: "background_agent_settings", trackingFlow: "background_agent" }) })), shouldShowSection("integrations") && (_jsx(SettingsSection, { id: settingsSectionDomId("integrations"), icon: _jsx(IconPlugConnected, { size: 14 }), title: "Integrations", subtitle: "Connect messaging platforms and external services.", open: openSection === "integrations", onToggle: () => toggle("integrations"), children: _jsx(Suspense, { fallback: null, children: _jsx(IntegrationsPanel, {}) }) })), shouldShowSection("usage") && (_jsx(SettingsSection, { id: settingsSectionDomId("usage"), icon: _jsx(IconCoin, { size: 14 }), title: "Usage", subtitle: "Track token consumption and estimated cost \u2014 broken down by chat, automations, and background jobs.", open: openSection === "usage", onToggle: () => toggle("usage"), children: _jsx(UsageSection, {}) })), shouldShowSection("a2a") && (_jsx(SettingsSection, { id: settingsSectionDomId("a2a"), icon: _jsx(IconTopologyRing2, { size: 14 }), title: "Connected Agents (A2A)", subtitle: "Manage remote agents connected via the A2A protocol.", open: openSection === "a2a", onToggle: () => toggle("a2a"), children: _jsx(AgentsSection, {}) }))] }) }));
+                        } })) })), showCapabilityStrip && (_jsx(CapabilityStatusStrip, { isDevMode: isDevMode, builderConnected: connected, builderLoading: builderLoading, builderBranchesAvailable: builderBranchesAvailable, onOpenLlm: () => openSettingsSection("llm", true) })), shouldShowSection("llm") && (_jsx(LLMSectionInner, { builderFlow: builderFlow, builderLoading: builderLoading, connectUrl: connectUrl, connected: connected, orgName: orgName, envManaged: envManaged, credentialSource: credentialSource, open: openSection === "llm", onToggle: () => toggle("llm") })), shouldShowSection("app-models") && (_jsx(AppModelDefaultsSectionInner, { open: openSection === "app-models", onToggle: () => toggle("app-models") })), shouldShowSection("limits") && (_jsx(AgentLimitsSectionInner, { open: openSection === "limits", onToggle: () => toggle("limits") })), shouldShowSection("voice") && (_jsx(SettingsSection, { id: settingsSectionDomId("voice"), icon: _jsx(IconMicrophone, { size: 14 }), title: "Voice Transcription", subtitle: "How the composer microphone turns your voice into text.", open: openSection === "voice", onToggle: () => toggle("voice"), children: _jsx(VoiceTranscriptionSection, {}) })), shouldShowSection("demo-mode") && (_jsx(SettingsSection, { id: settingsSectionDomId("demo-mode"), icon: _jsx(IconEyeOff, { size: 14 }), title: "Demo mode", subtitle: "Replace displayed emails with realistic fake data in this browser and reshape supported charts for presentations. Backend, MCP, and agent results stay real and access-scoped.", open: openSection === "demo-mode", onToggle: () => toggle("demo-mode"), children: _jsx(DemoModeSection, {}) })), shouldShowSection("automations") && (_jsx(SettingsSection, { id: settingsSectionDomId("automations"), icon: _jsx(IconBolt, { size: 14 }), title: "Automations", subtitle: "Event-triggered and scheduled automations.", open: openSection === "automations", onToggle: () => toggle("automations"), children: _jsx(AutomationsSection, {}) })), shouldShowSection("secrets") && (_jsx(SettingsSection, { id: settingsSectionDomId("secrets"), icon: _jsx(IconKey, { size: 14 }), title: "API Keys & Connections", subtitle: "Service credentials and automation keys.", open: openSection === "secrets", onToggle: () => toggle("secrets"), children: _jsx(SecretsSection, { focusKey: focusSecretKey }) })), shouldShowSection("hosting") && (_jsx(SettingsSection, { id: settingsSectionDomId("hosting"), icon: _jsx(IconCloud, { size: 14 }), title: "Hosting", subtitle: "Deploy your app to the cloud.", connected: connected, open: openSection === "hosting", onToggle: () => toggle("hosting"), children: _jsxs("div", { className: "space-y-2", children: [_jsx(UseBuilderCard, { builderFlow: builderFlow, connectUrl: connectUrl, connected: connected, orgName: orgName, envManaged: envManaged, credentialSource: credentialSource, trackingSource: "hosting_settings", trackingFlow: "hosting" }), _jsx(ManualSetupCard, { hint: "Deploy manually to Netlify, Vercel, Cloudflare, or any Nitro-supported target.", docsUrl: "https://www.builder.io/c/docs/agent-native-deployment?utm_source=agent-native&utm_medium=product&utm_campaign=onboarding&utm_content=deployment_settings", dim: connected })] }) })), shouldShowSection("database") && (_jsx(SettingsSection, { id: settingsSectionDomId("database"), icon: _jsx(IconDatabase, { size: 14 }), title: "Database", subtitle: "Connect a cloud database for persistent storage.", connected: connected, open: openSection === "database", onToggle: () => toggle("database"), children: _jsxs("div", { className: "space-y-2", children: [_jsx(UseBuilderCard, { builderFlow: builderFlow, connectUrl: connectUrl, connected: connected, orgName: orgName, envManaged: envManaged, credentialSource: credentialSource, trackingSource: "database_settings", trackingFlow: "database" }), _jsx(ManualSetupCard, { hint: "Set DATABASE_URL in your .env to connect Neon, Supabase, Turso, any Postgres/SQLite database, or local PGlite with pglite:./data/pglite.", docsUrl: "https://www.builder.io/c/docs/agent-native-database?utm_source=agent-native&utm_medium=product&utm_campaign=onboarding&utm_content=database_settings", dim: connected })] }) })), shouldShowSection("uploads") && (_jsx(SettingsSection, { id: settingsSectionDomId("uploads"), icon: _jsx(IconUpload, { size: 14 }), title: "File uploads", subtitle: "Where user-uploaded files (avatars, chat attachments) are stored.", connected: connected, open: openSection === "uploads", onToggle: () => toggle("uploads"), children: _jsxs("div", { className: "space-y-2", children: [_jsx(UseBuilderCard, { builderFlow: builderFlow, connectUrl: connectUrl, connected: connected, orgName: orgName, envManaged: envManaged, credentialSource: credentialSource, trackingSource: "file_upload_settings", trackingFlow: "file_upload" }), _jsx(ManualSetupCard, { hint: "Without a provider, files are stored as base64 in your database. Fine for dev, not recommended for production.", docsUrl: "https://www.builder.io/c/docs/agent-native-file-uploads?utm_source=agent-native&utm_medium=product&utm_campaign=onboarding&utm_content=file_upload_settings", dim: connected })] }) })), shouldShowSection("auth") && (_jsx(SettingsSection, { id: settingsSectionDomId("auth"), icon: _jsx(IconShield, { size: 14 }), title: "Authentication", subtitle: "Set up user authentication and access control.", connected: connected, open: openSection === "auth", onToggle: () => toggle("auth"), children: _jsxs("div", { className: "space-y-2", children: [_jsx(UseBuilderCard, { builderFlow: builderFlow, connectUrl: connectUrl, connected: connected, orgName: orgName, envManaged: envManaged, credentialSource: credentialSource, trackingSource: "auth_settings", trackingFlow: "auth" }), _jsx(ManualSetupCard, { hint: "Configure Better Auth with BETTER_AUTH_SECRET and optional Google/GitHub OAuth providers.", docsUrl: "https://www.builder.io/c/docs/agent-native-authentication?utm_source=agent-native&utm_medium=product&utm_campaign=onboarding&utm_content=authentication_settings", dim: connected })] }) })), shouldShowSection("email") && (_jsx(EmailSectionInner, { open: openSection === "email", onToggle: () => toggle("email") })), shouldShowSection("browser") && (_jsx(SettingsSection, { id: settingsSectionDomId("browser"), icon: _jsx(IconBrowser, { size: 14 }), title: "Browser Automation", subtitle: "Let agents control a real browser for web tasks.", connected: builderConnectionOwnedExternally ? undefined : connected, open: openSection === "browser", onToggle: () => toggle("browser"), children: !builderConnectionOwnedExternally ? (_jsx(UseBuilderCard, { builderFlow: builderFlow, connectUrl: connectUrl, connected: connected, orgName: orgName, envManaged: envManaged, credentialSource: credentialSource, trackingSource: "browser_settings", trackingFlow: "browser_automation" })) : null })), builderBranchesAvailable && shouldShowSection("background") && (_jsx(SettingsSection, { id: settingsSectionDomId("background"), icon: _jsx(IconGitBranch, { size: 14 }), title: "Background Agent", subtitle: "Make code changes from production mode via Builder.", connected: connected, open: openSection === "background", onToggle: () => toggle("background"), children: _jsx(UseBuilderCard, { builderFlow: builderFlow, connectUrl: connectUrl, connected: connected, orgName: orgName, envManaged: envManaged, credentialSource: credentialSource, trackingSource: "background_agent_settings", trackingFlow: "background_agent" }) })), shouldShowSection("integrations") && (_jsx(SettingsSection, { id: settingsSectionDomId("integrations"), icon: _jsx(IconPlugConnected, { size: 14 }), title: "Integrations", subtitle: "Connect messaging platforms and external services.", open: openSection === "integrations", onToggle: () => toggle("integrations"), children: _jsx(Suspense, { fallback: null, children: _jsx(IntegrationsPanel, {}) }) })), shouldShowSection("usage") && (_jsx(SettingsSection, { id: settingsSectionDomId("usage"), icon: _jsx(IconCoin, { size: 14 }), title: "Usage", subtitle: "Track token consumption and estimated cost \u2014 broken down by chat, automations, and background jobs.", open: openSection === "usage", onToggle: () => toggle("usage"), children: _jsx(UsageSection, {}) })), shouldShowSection("a2a") && (_jsx(SettingsSection, { id: settingsSectionDomId("a2a"), icon: _jsx(IconTopologyRing2, { size: 14 }), title: "Connected Agents (A2A)", subtitle: "Manage remote agents connected via the A2A protocol.", open: openSection === "a2a", onToggle: () => toggle("a2a"), children: _jsx(AgentsSection, {}) }))] }) }));
 }
 export function SettingsPanel(props) {
     return _jsx(SettingsPanelContent, { ...props });
@@ -1046,6 +981,17 @@ function McpConnectionsCard() {
 export function ConnectionsSettingsContent({ settingsPanelProps, }) {
     return (_jsxs("div", { className: "mx-auto w-full max-w-2xl space-y-4", children: [_jsx(BuilderConnectCard, { trackingSource: "settings_connections" }), _jsx(McpConnectionsCard, {}), _jsx(SettingsPanelContent, { ...settingsPanelProps, surface: "page", sections: CONNECTION_SETTINGS_SECTIONS, showCapabilityStrip: false, className: "w-full", builderConnectionOwnedExternally: true })] }));
 }
+export function AgentSettingsContent({ className, } = {}) {
+    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: AGENT_SETTINGS_SECTIONS, showCapabilityStrip: false, className: cn("mx-auto w-full max-w-2xl", className) }));
+}
 export function useAgentSettingsTabs() {
     const { isDevMode, canToggle, setDevMode } = useDevMode();
     const baseProps = useMemo(() => ({
@@ -1072,7 +1018,9 @@ export function useAgentSettingsTabs() {
                 ...agent,
                 icon: IconHierarchy2,
                 group: "agent",
-                content: (_jsx(SettingsPanelContent, { ...baseProps, surface: "page", sections: AGENT_SETTINGS_SECTIONS, showCapabilityStrip: false, className: "mx-auto w-full max-w-2xl" })),
+                href: "/agent#settings",
+                searchEntries: undefined,
+                content: _jsx(Navigate, { to: "/agent#settings", replace: true }),
             },
             {
                 ...connections,