@agent-native/core 0.7.19 → 0.7.20

package/dist/client/settings/SettingsPanel.js

@@ -2,7 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import { agentNativePath } from "../api-path.js";
 import { Suspense, lazy, useState, useEffect, useCallback, useRef, } from "react";
 import * as SelectPrimitive from "@radix-ui/react-select";
-import { IconChevronDown, IconCheck, IconExternalLink, IconBrain, IconBrowser, IconGitBranch, IconCloud, IconDatabase, IconShield, IconPlugConnected, IconTopologyRing2, IconLoader2, IconUpload, IconCoin, IconMail, IconKey, IconMicrophone, IconBolt, } from "@tabler/icons-react";
+import { IconChevronDown, IconCheck, IconExternalLink, IconBrain, IconBrowser, IconGitBranch, IconCloud, IconDatabase, IconShield, IconPlugConnected, IconTopologyRing2, IconLoader2, IconUpload, IconCoin, IconMail, IconKey, IconMicrophone, IconBolt, IconGauge, } from "@tabler/icons-react";
 import { SettingsSection } from "./SettingsSection.js";
 import { useBuilderStatus } from "./useBuilderStatus.js";
 import { BuilderBMark } from "../builder-mark.js";
@@ -39,9 +39,15 @@ function SettingsSelect({ label, labelAdornment, value, options, onValueChange,
 // refresh inline (no hard reload — that was racing with nitro's env-runner
 // restart and hitting React Router's error boundary).
 function DisconnectBuilderButton() {
+    const { status } = useBuilderStatus();
     const [phase, setPhase] = useState("idle");
     const [err, setErr] = useState(null);
     const armedTimerRef = useRef(null);
+    // Env-managed: Builder identity comes from the deploy-level
+    // BUILDER_PRIVATE_KEY. Disconnection is operator-controlled (rotate / unset
+    // the env var); the per-user disconnect endpoint refuses with 409.
+    if (status?.envManaged)
+        return null;
     const clearArmedTimer = useCallback(() => {
         if (armedTimerRef.current) {
             clearTimeout(armedTimerRef.current);
@@ -121,9 +127,11 @@ function DisconnectBuilderButton() {
 }
 // ─── "Connect Builder.io" card (shared across all sections) ─────────────────
 function UseBuilderCard({ connectUrl, connected, orgName, label = "Connect Builder.io", subtitle = "One click, no API key needed.", dim, }) {
+    const { status } = useBuilderStatus();
+    const envManaged = !!status?.envManaged;
     const bgClass = dim ? "" : "bg-accent/30";
     if (connected) {
-        return (_jsxs("div", { className: `rounded-md border border-border px-2.5 py-2 ${bgClass}`, children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsx("div", { className: "text-[11px] font-medium text-foreground", children: "Builder.io" }), _jsxs("span", { className: "flex items-center gap-1 text-[10px] text-green-500", children: [_jsx(IconCheck, { size: 10 }), "Connected"] })] }), orgName && (_jsx("p", { className: "text-[10px] text-muted-foreground mt-0.5", children: orgName })), _jsxs("div", { className: "flex items-center gap-2 mt-2.5", children: [connectUrl && (_jsxs("a", { href: connectUrl, target: "_blank", rel: "noopener noreferrer", className: "inline-flex items-center gap-1 rounded border border-border px-2 py-0.5 text-[10px] no-underline text-muted-foreground hover:text-foreground hover:bg-accent/40", children: ["Reconnect", _jsx(IconExternalLink, { size: 10 })] })), _jsx(DisconnectBuilderButton, {})] })] }));
+        return (_jsxs("div", { className: `rounded-md border border-border px-2.5 py-2 ${bgClass}`, children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsx("div", { className: "text-[11px] font-medium text-foreground", children: "Builder.io" }), _jsxs("span", { className: "flex items-center gap-1 text-[10px] text-green-500", children: [_jsx(IconCheck, { size: 10 }), "Connected"] })] }), orgName && (_jsx("p", { className: "text-[10px] text-muted-foreground mt-0.5", children: orgName })), envManaged ? (_jsx("p", { className: "text-[10px] text-muted-foreground mt-1", children: "Managed by deployment \u2014 applied to all users of this app." })) : (_jsxs("div", { className: "flex items-center gap-2 mt-2.5", children: [connectUrl && (_jsxs("a", { href: connectUrl, target: "_blank", rel: "noopener noreferrer", className: "inline-flex items-center gap-1 rounded border border-border px-2 py-0.5 text-[10px] no-underline text-muted-foreground hover:text-foreground hover:bg-accent/40", children: ["Reconnect", _jsx(IconExternalLink, { size: 10 })] })), _jsx(DisconnectBuilderButton, {})] }))] }));
     }
     if (!connectUrl)
         return null;
@@ -426,7 +434,7 @@ function EmailSectionInner({ open, onToggle, }) {
     const [fromAddr, setFromAddr] = useState("");
     const [saving, setSaving] = useState(false);
     const [saved, setSaved] = useState(false);
-    const [showSendgrid, setShowSendgrid] = useState(false);
+    const [emailProvider, setEmailProvider] = useState("resend");
     const [envLoaded, setEnvLoaded] = useState(false);
     useEffect(() => {
         fetch(agentNativePath("/_agent-native/env-status"))
@@ -439,6 +447,11 @@ function EmailSectionInner({ open, onToggle, }) {
     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 {
@@ -477,16 +490,134 @@ function EmailSectionInner({ open, onToggle, }) {
         if (vars.length)
             save(vars);
     };
-    return (_jsx(SettingsSection, { icon: _jsx(IconMail, { size: 14 }), title: "Email", subtitle: "Send password resets and team invitations. Without a provider, emails are logged to the server console.", connected: !envLoaded ? undefined : anyConfigured, open: open, onToggle: onToggle, children: !envLoaded ? (_jsx(SettingsSkeleton, { lines: 2 })) : (_jsxs("div", { className: "space-y-2", children: [_jsxs(ManualSetupCard, { hint: "Paste a Resend API key to start sending real emails.", docsUrl: "https://resend.com/api-keys", docsLabel: "Get a Resend key", children: [resendConfigured ? (_jsxs("div", { className: "flex items-center gap-1.5 text-[10px] text-green-500 mb-1", children: [_jsx(IconCheck, { size: 10 }), "RESEND_API_KEY configured"] })) : (_jsxs("div", { className: "flex gap-1.5 mb-1", children: [_jsx("input", { type: "password", value: resendKey, onChange: (e) => setResendKey(e.target.value), onKeyDown: (e) => {
+    return (_jsx(SettingsSection, { icon: _jsx(IconMail, { size: 14 }), title: "Email", subtitle: "Needed before deploy for password resets, team invitations, and share notifications. Local development can run without it.", connected: !envLoaded ? undefined : anyConfigured, open: open, onToggle: onToggle, children: !envLoaded ? (_jsx(SettingsSkeleton, { lines: 2 })) : (_jsxs("div", { className: "space-y-2", children: [_jsxs("label", { className: "block space-y-1", children: [_jsx("span", { className: "text-[10px] uppercase tracking-wide text-muted-foreground", children: "Provider" }), _jsxs("select", { value: emailProvider, onChange: (e) => setEmailProvider(e.target.value), className: "w-full rounded border border-border bg-background px-2 py-1 text-[11px] text-foreground outline-none focus:ring-1 focus:ring-accent", children: [_jsx("option", { value: "resend", children: "Resend" }), _jsx("option", { value: "sendgrid", children: "SendGrid" })] })] }), emailProvider === "resend" ? (_jsxs(ManualSetupCard, { hint: "Use Resend for transactional email.", docsUrl: "https://resend.com/api-keys", docsLabel: "Get a Resend key", children: [resendConfigured ? (_jsxs("div", { className: "mb-1 flex items-center gap-1.5 text-[10px] text-green-500", children: [_jsx(IconCheck, { size: 10 }), "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: "flex-1 rounded border border-border bg-background px-2 py-1 text-[11px] text-foreground outline-none placeholder:text-muted-foreground/50 focus:ring-1 focus:ring-accent" }), _jsx("button", { onClick: saveResend, disabled: !resendKey.trim() || saving, className: "rounded bg-accent px-2 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") })] })), fromConfigured ? (_jsxs("div", { className: "flex items-center gap-1.5 text-[10px] text-green-500", children: [_jsx(IconCheck, { size: 10 }), "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 \u2014 e.g. Acme <hi@acme.com>", className: "flex-1 rounded border border-border bg-background px-2 py-1 text-[11px] text-foreground outline-none placeholder:text-muted-foreground/50 focus:ring-1 focus:ring-accent" }), !resendConfigured ? null : (_jsx("button", { onClick: saveResend, disabled: !fromAddr.trim() || saving, className: "rounded bg-accent px-2 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") }))] }))] }), !sendgridConfigured && !showSendgrid ? (_jsx("button", { type: "button", onClick: () => setShowSendgrid(true), className: "text-[10px] text-muted-foreground hover:text-foreground", children: "Use SendGrid instead" })) : (_jsx(ManualSetupCard, { hint: "SendGrid alternative \u2014 requires a verified sender address (set EMAIL_FROM above).", docsUrl: "https://app.sendgrid.com/settings/api_keys", docsLabel: "Get a SendGrid key", children: sendgridConfigured ? (_jsxs("div", { className: "flex items-center gap-1.5 text-[10px] text-green-500", children: [_jsx(IconCheck, { size: 10 }), "SENDGRID_API_KEY configured"] })) : (_jsxs("div", { className: "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: "flex-1 rounded border border-border bg-background px-2 py-1 text-[11px] text-foreground outline-none placeholder:text-muted-foreground/50 focus:ring-1 focus:ring-accent" }), _jsx("button", { onClick: saveSendgrid, disabled: !sendgridKey.trim() || saving, className: "rounded bg-accent px-2 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") })] })) }))] })) }));
+                                    }, placeholder: "From address - e.g. Acme <hi@acme.com>", className: "flex-1 rounded border border-border bg-background px-2 py-1 text-[11px] text-foreground outline-none placeholder:text-muted-foreground/50 focus:ring-1 focus:ring-accent" }), !resendConfigured ? null : (_jsx("button", { onClick: saveResend, disabled: !fromAddr.trim() || saving, className: "rounded bg-accent px-2 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") }))] }))] })) : (_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: "mb-1 flex items-center gap-1.5 text-[10px] text-green-500", children: [_jsx(IconCheck, { size: 10 }), "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: "flex-1 rounded border border-border bg-background px-2 py-1 text-[11px] text-foreground outline-none placeholder:text-muted-foreground/50 focus:ring-1 focus:ring-accent" }), _jsx("button", { onClick: saveSendgrid, disabled: !sendgridKey.trim() || saving, className: "rounded bg-accent px-2 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") })] })), fromConfigured ? (_jsxs("div", { className: "flex items-center gap-1.5 text-[10px] text-green-500", children: [_jsx(IconCheck, { size: 10 }), "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: "flex-1 rounded border border-border bg-background px-2 py-1 text-[11px] text-foreground outline-none placeholder:text-muted-foreground/50 focus:ring-1 focus:ring-accent" }), !sendgridConfigured ? null : (_jsx("button", { onClick: saveSendgrid, disabled: !fromAddr.trim() || saving, className: "rounded bg-accent px-2 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") }))] }))] }))] })) }));
+}
+function AgentLimitsSectionInner({ open, onToggle, }) {
+    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);
+    }, []);
+    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, { icon: _jsx(IconGauge, { size: 14 }), title: "Agent Limits", subtitle: "Control how long a single agent response can work before pausing.", connected: loading
+            ? undefined
+            : settings
+                ? settings.maxIterations !== settings.defaultMaxIterations
+                : false, open: open, onToggle: onToggle, children: loading ? (_jsx(SettingsSkeleton, { lines: 2 })) : settings ? (_jsx("div", { className: "space-y-2", children: _jsxs("div", { className: "rounded-md border border-border px-2.5 py-2 bg-accent/20", children: [_jsxs("div", { className: "flex items-center justify-between gap-2", children: [_jsxs("div", { children: [_jsx("p", { className: "text-[11px] font-medium text-foreground", children: "Max iterations" }), _jsxs("p", { className: "mt-0.5 text-[10px] text-muted-foreground", children: ["Applies to ", scopeLabel, ". Default is", " ", settings.defaultMaxIterations.toLocaleString(), "."] })] }), _jsx("span", { className: "rounded-full bg-background px-2 py-0.5 text-[10px] font-medium text-muted-foreground", 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: "h-8 min-w-0 flex-1 rounded border border-border bg-background px-2 text-[11px] text-foreground outline-none focus:ring-1 focus:ring-accent disabled:opacity-60" }), _jsx("button", { type: "button", onClick: save, disabled: !hasPendingChange || saving, className: "inline-flex h-8 items-center gap-1 rounded bg-accent px-2.5 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") }), _jsx("button", { type: "button", onClick: reset, disabled: !settings.canUpdate ||
+                                    saving ||
+                                    settings.maxIterations === settings.defaultMaxIterations, className: "h-8 rounded border border-border px-2.5 text-[10px] font-medium text-muted-foreground hover:bg-accent/40 hover:text-foreground disabled:opacity-40", children: "Reset" })] }), !settings.canUpdate && (_jsx("p", { className: "mt-2 text-[10px] text-muted-foreground", children: "Only organization owners and admins can change this limit." })), error && (_jsx("p", { className: "mt-2 text-[10px] text-destructive", children: error }))] }) })) : (_jsx("p", { className: "text-[10px] text-muted-foreground", children: "Agent limit settings are unavailable." })) }));
 }
 const environmentOptions = [
     {
@@ -523,6 +654,11 @@ export function SettingsPanel({ isDevMode, onToggleDevMode, showDevToggle, devAp
                 const key = hash.slice("secrets:".length);
                 setFocusSecretKey(key || undefined);
             }
+            else if (hash === "agent-limits" ||
+                hash === "limits" ||
+                hash === "loop-settings") {
+                setOpenSection("limits");
+            }
         };
         handleHash();
         window.addEventListener("hashchange", handleHash);
@@ -532,6 +668,6 @@ export function SettingsPanel({ isDevMode, onToggleDevMode, showDevToggle, devAp
                         const nextIsDev = next === "development";
                         if (nextIsDev !== isDevMode)
                             onToggleDevMode();
-                    } })) })), _jsx(LLMSectionInner, { builderLoading: builderLoading, connectUrl: connectUrl, connected: connected, orgName: orgName, open: openSection === "llm", onToggle: () => toggle("llm") }), _jsx(SettingsSection, { 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, {}) }), _jsx(SettingsSection, { icon: _jsx(IconBolt, { size: 14 }), title: "Automations", subtitle: "Event-triggered and scheduled automations.", open: openSection === "automations", onToggle: () => toggle("automations"), children: _jsx(AutomationsSection, {}) }), _jsx(SettingsSection, { 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 }) }), _jsx(SettingsSection, { 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, { connectUrl: connectUrl, connected: connected, orgName: orgName }), _jsx(ManualSetupCard, { hint: "Deploy manually to Netlify, Vercel, Cloudflare, or any Nitro-supported target.", docsUrl: "https://www.builder.io/c/docs/agent-native-deployment", dim: connected })] }) }), _jsx(SettingsSection, { 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, { connectUrl: connectUrl, connected: connected, orgName: orgName }), _jsx(ManualSetupCard, { hint: "Set DATABASE_URL in your .env to connect Neon, Supabase, Turso, or any Postgres/SQLite database.", docsUrl: "https://www.builder.io/c/docs/agent-native-database", dim: connected })] }) }), _jsx(SettingsSection, { 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, { connectUrl: connectUrl, connected: connected, orgName: orgName }), _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", dim: connected })] }) }), _jsx(SettingsSection, { 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, { connectUrl: connectUrl, connected: connected, orgName: orgName }), _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", dim: connected })] }) }), _jsx(EmailSectionInner, { open: openSection === "email", onToggle: () => toggle("email") }), _jsx(SettingsSection, { icon: _jsx(IconBrowser, { size: 14 }), title: "Browser Automation", subtitle: "Let agents control a real browser for web tasks.", connected: connected, open: openSection === "browser", onToggle: () => toggle("browser"), children: _jsx(UseBuilderCard, { connectUrl: connectUrl, connected: connected, orgName: orgName }) }), _jsx(SettingsSection, { 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, { connectUrl: connectUrl, connected: connected, orgName: orgName }) }), _jsx(SettingsSection, { 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, {}) }) }), _jsx(SettingsSection, { 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, {}) }), _jsx(SettingsSection, { 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, {}) })] }));
+                    } })) })), _jsx(LLMSectionInner, { builderLoading: builderLoading, connectUrl: connectUrl, connected: connected, orgName: orgName, open: openSection === "llm", onToggle: () => toggle("llm") }), _jsx(AgentLimitsSectionInner, { open: openSection === "limits", onToggle: () => toggle("limits") }), _jsx(SettingsSection, { 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, {}) }), _jsx(SettingsSection, { icon: _jsx(IconBolt, { size: 14 }), title: "Automations", subtitle: "Event-triggered and scheduled automations.", open: openSection === "automations", onToggle: () => toggle("automations"), children: _jsx(AutomationsSection, {}) }), _jsx(SettingsSection, { 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 }) }), _jsx(SettingsSection, { 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, { connectUrl: connectUrl, connected: connected, orgName: orgName }), _jsx(ManualSetupCard, { hint: "Deploy manually to Netlify, Vercel, Cloudflare, or any Nitro-supported target.", docsUrl: "https://www.builder.io/c/docs/agent-native-deployment", dim: connected })] }) }), _jsx(SettingsSection, { 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, { connectUrl: connectUrl, connected: connected, orgName: orgName }), _jsx(ManualSetupCard, { hint: "Set DATABASE_URL in your .env to connect Neon, Supabase, Turso, or any Postgres/SQLite database.", docsUrl: "https://www.builder.io/c/docs/agent-native-database", dim: connected })] }) }), _jsx(SettingsSection, { 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, { connectUrl: connectUrl, connected: connected, orgName: orgName }), _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", dim: connected })] }) }), _jsx(SettingsSection, { 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, { connectUrl: connectUrl, connected: connected, orgName: orgName }), _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", dim: connected })] }) }), _jsx(EmailSectionInner, { open: openSection === "email", onToggle: () => toggle("email") }), _jsx(SettingsSection, { icon: _jsx(IconBrowser, { size: 14 }), title: "Browser Automation", subtitle: "Let agents control a real browser for web tasks.", connected: connected, open: openSection === "browser", onToggle: () => toggle("browser"), children: _jsx(UseBuilderCard, { connectUrl: connectUrl, connected: connected, orgName: orgName }) }), _jsx(SettingsSection, { 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, { connectUrl: connectUrl, connected: connected, orgName: orgName }) }), _jsx(SettingsSection, { 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, {}) }) }), _jsx(SettingsSection, { 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, {}) }), _jsx(SettingsSection, { 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, {}) })] }));
 }
 //# sourceMappingURL=SettingsPanel.js.map