@agent-native/core 0.16.3 → 0.17.0

package/dist/client/settings/DemoModeSection.d.ts

@@ -0,0 +1,15 @@
+/**
+ * <DemoModeSection /> — toggle that replaces names, emails, and numbers with
+ * realistic fake data everywhere (UI + what the agent sees) while preserving
+ * IDs and structure so the app keeps working.
+ *
+ * State lives in application_state under `demo-mode` with shape
+ * `{ enabled: boolean }`. The control reads via the same polled `useQuery`
+ * convention as `useAppearanceSync` (see appearance.ts) and writes via the
+ * same `PUT /_agent-native/application-state/...` path the Voice
+ * Transcription section's cleanup toggle uses. The write is fired in the
+ * background after the switch flips so the UI stays instant (optimistic UI).
+ */
+export declare function DemoModeSection(): import("react/jsx-runtime").JSX.Element;
+export declare function DemoModeIcon(): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=DemoModeSection.d.ts.map

package/dist/client/settings/DemoModeSection.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DemoModeSection.d.ts","sourceRoot":"","sources":["../../../src/client/settings/DemoModeSection.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;GAWG;AAeH,wBAAgB,eAAe,4CAoF9B;AAED,wBAAgB,YAAY,4CAE3B"}

package/dist/client/settings/DemoModeSection.js

@@ -0,0 +1,72 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * <DemoModeSection /> — toggle that replaces names, emails, and numbers with
+ * realistic fake data everywhere (UI + what the agent sees) while preserving
+ * IDs and structure so the app keeps working.
+ *
+ * State lives in application_state under `demo-mode` with shape
+ * `{ enabled: boolean }`. The control reads via the same polled `useQuery`
+ * convention as `useAppearanceSync` (see appearance.ts) and writes via the
+ * same `PUT /_agent-native/application-state/...` path the Voice
+ * Transcription section's cleanup toggle uses. The write is fired in the
+ * background after the switch flips so the UI stays instant (optimistic UI).
+ */
+import { useEffect, useState } from "react";
+import { useQuery } from "@tanstack/react-query";
+import { agentNativePath } from "../api-path.js";
+import { IconEyeOff } from "@tabler/icons-react";
+const DEMO_MODE_URL = agentNativePath("/_agent-native/application-state/demo-mode");
+export function DemoModeSection() {
+    const [enabled, setEnabled] = useState(null);
+    const { data } = useQuery({
+        queryKey: ["agent-native", "demo-mode"],
+        queryFn: async () => {
+            const res = await fetch(DEMO_MODE_URL, { credentials: "include" });
+            if (!res.ok)
+                return null;
+            return (await res.json());
+        },
+        refetchInterval: 4_000,
+        staleTime: 2_000,
+    });
+    const serverEnabled = data?.enabled ??
+        data?.value?.enabled;
+    // Surface the server value once it arrives (and on subsequent polls), but
+    // never clobber an in-flight optimistic toggle with a stale read.
+    useEffect(() => {
+        if (typeof serverEnabled === "boolean") {
+            setEnabled((prev) => (prev === null ? serverEnabled : prev));
+        }
+        else if (serverEnabled === undefined && data !== undefined) {
+            setEnabled((prev) => (prev === null ? false : prev));
+        }
+    }, [serverEnabled, data]);
+    const toggle = async (next) => {
+        const previous = enabled;
+        // Optimistic: flip immediately, write in the background.
+        setEnabled(next);
+        try {
+            const res = await fetch(DEMO_MODE_URL, {
+                method: "PUT",
+                headers: { "Content-Type": "application/json" },
+                credentials: "include",
+                body: JSON.stringify({ enabled: next }),
+            });
+            if (!res.ok) {
+                throw new Error(`HTTP ${res.status}`);
+            }
+        }
+        catch {
+            setEnabled(previous);
+        }
+    };
+    return (_jsxs("div", { className: "flex items-start justify-between gap-3 rounded-md border border-border bg-accent/30 px-2.5 py-2", children: [_jsxs("div", { className: "min-w-0", children: [_jsx("div", { className: "text-[11px] font-medium text-foreground", children: "Enable demo mode" }), _jsx("p", { className: "text-[10px] text-muted-foreground mt-0.5", children: "Replace names, emails, and numbers with realistic fake data everywhere \u2014 in the UI and what the agent sees. IDs and structure are preserved so the app keeps working." })] }), _jsx("button", { type: "button", role: "switch", "aria-checked": !!enabled, "aria-label": "Enable demo mode", disabled: enabled === null, onClick: () => toggle(!enabled), 
+                // Theme tokens; streaming agent owns layout.
+                className: `relative inline-flex h-4 w-7 shrink-0 cursor-pointer items-center rounded-full transition-colors ${enabled
+                    ? "bg-primary"
+                    : "bg-muted-foreground/30 hover:bg-muted-foreground/50"} ${enabled === null ? "opacity-60" : ""}`, children: _jsx("span", { className: `inline-block h-3 w-3 transform rounded-full bg-background transition-transform ${enabled ? "translate-x-3.5" : "translate-x-0.5"}` }) })] }));
+}
+export function DemoModeIcon() {
+    return _jsx(IconEyeOff, { size: 14 });
+}
+//# sourceMappingURL=DemoModeSection.js.map

package/dist/client/settings/DemoModeSection.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DemoModeSection.js","sourceRoot":"","sources":["../../../src/client/settings/DemoModeSection.tsx"],"names":[],"mappings":"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","sourcesContent":["/**\n * <DemoModeSection /> — toggle that replaces names, emails, and numbers with\n * realistic fake data everywhere (UI + what the agent sees) while preserving\n * IDs and structure so the app keeps working.\n *\n * State lives in application_state under `demo-mode` with shape\n * `{ enabled: boolean }`. The control reads via the same polled `useQuery`\n * convention as `useAppearanceSync` (see appearance.ts) and writes via the\n * same `PUT /_agent-native/application-state/...` path the Voice\n * Transcription section's cleanup toggle uses. The write is fired in the\n * background after the switch flips so the UI stays instant (optimistic UI).\n */\n\nimport { useEffect, useState } from \"react\";\nimport { useQuery } from \"@tanstack/react-query\";\nimport { agentNativePath } from \"../api-path.js\";\nimport { IconEyeOff } from \"@tabler/icons-react\";\n\ninterface DemoModeState {\n  enabled?: boolean;\n}\n\nconst DEMO_MODE_URL = agentNativePath(\n  \"/_agent-native/application-state/demo-mode\",\n);\n\nexport function DemoModeSection() {\n  const [enabled, setEnabled] = useState<boolean | null>(null);\n\n  const { data } = useQuery({\n    queryKey: [\"agent-native\", \"demo-mode\"],\n    queryFn: async () => {\n      const res = await fetch(DEMO_MODE_URL, { credentials: \"include\" });\n      if (!res.ok) return null;\n      return (await res.json()) as\n        | DemoModeState\n        | { value?: DemoModeState }\n        | null;\n    },\n    refetchInterval: 4_000,\n    staleTime: 2_000,\n  });\n\n  const serverEnabled =\n    (data as DemoModeState | null)?.enabled ??\n    (data as { value?: DemoModeState } | null)?.value?.enabled;\n\n  // Surface the server value once it arrives (and on subsequent polls), but\n  // never clobber an in-flight optimistic toggle with a stale read.\n  useEffect(() => {\n    if (typeof serverEnabled === \"boolean\") {\n      setEnabled((prev) => (prev === null ? serverEnabled : prev));\n    } else if (serverEnabled === undefined && data !== undefined) {\n      setEnabled((prev) => (prev === null ? false : prev));\n    }\n  }, [serverEnabled, data]);\n\n  const toggle = async (next: boolean) => {\n    const previous = enabled;\n    // Optimistic: flip immediately, write in the background.\n    setEnabled(next);\n    try {\n      const res = await fetch(DEMO_MODE_URL, {\n        method: \"PUT\",\n        headers: { \"Content-Type\": \"application/json\" },\n        credentials: \"include\",\n        body: JSON.stringify({ enabled: next }),\n      });\n      if (!res.ok) {\n        throw new Error(`HTTP ${res.status}`);\n      }\n    } catch {\n      setEnabled(previous);\n    }\n  };\n\n  return (\n    <div className=\"flex items-start justify-between gap-3 rounded-md border border-border bg-accent/30 px-2.5 py-2\">\n      <div className=\"min-w-0\">\n        <div className=\"text-[11px] font-medium text-foreground\">\n          Enable demo mode\n        </div>\n        <p className=\"text-[10px] text-muted-foreground mt-0.5\">\n          Replace names, emails, and numbers with realistic fake data everywhere\n          — in the UI and what the agent sees. IDs and structure are preserved\n          so the app keeps working.\n        </p>\n      </div>\n      <button\n        type=\"button\"\n        role=\"switch\"\n        aria-checked={!!enabled}\n        aria-label=\"Enable demo mode\"\n        disabled={enabled === null}\n        onClick={() => toggle(!enabled)}\n        // Theme tokens; streaming agent owns layout.\n        className={`relative inline-flex h-4 w-7 shrink-0 cursor-pointer items-center rounded-full transition-colors ${\n          enabled\n            ? \"bg-primary\"\n            : \"bg-muted-foreground/30 hover:bg-muted-foreground/50\"\n        } ${enabled === null ? \"opacity-60\" : \"\"}`}\n      >\n        <span\n          className={`inline-block h-3 w-3 transform rounded-full bg-background transition-transform ${\n            enabled ? \"translate-x-3.5\" : \"translate-x-0.5\"\n          }`}\n        />\n      </button>\n    </div>\n  );\n}\n\nexport function DemoModeIcon() {\n  return <IconEyeOff size={14} />;\n}\n"]}

package/dist/client/settings/SettingsPanel.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SettingsPanel.d.ts","sourceRoot":"","sources":["../../../src/client/settings/SettingsPanel.tsx"],"names":[],"mappings":"AAqyDA,MAAM,WAAW,kBAAkB;IACjC,SAAS,EAAE,OAAO,CAAC;IACnB,eAAe,EAAE,MAAM,IAAI,CAAC;IAC5B,aAAa,EAAE,OAAO,CAAC;IACvB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,cAAc,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC/B,iBAAiB,CAAC,EAAE,MAAM,CAAC;CAC5B;AAoRD,wBAAgB,aAAa,CAAC,EAC5B,SAAS,EACT,eAAe,EACf,aAAa,EACb,SAAS,EACT,cAAc,EACd,iBAAiB,GAClB,EAAE,kBAAkB,2CA6XpB"}
+{"version":3,"file":"SettingsPanel.d.ts","sourceRoot":"","sources":["../../../src/client/settings/SettingsPanel.tsx"],"names":[],"mappings":"AAuyDA,MAAM,WAAW,kBAAkB;IACjC,SAAS,EAAE,OAAO,CAAC;IACnB,eAAe,EAAE,MAAM,IAAI,CAAC;IAC5B,aAAa,EAAE,OAAO,CAAC;IACvB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,cAAc,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC/B,iBAAiB,CAAC,EAAE,MAAM,CAAC;CAC5B;AAsRD,wBAAgB,aAAa,CAAC,EAC5B,SAAS,EACT,eAAe,EACf,aAAa,EACb,SAAS,EACT,cAAc,EACd,iBAAiB,GAClB,EAAE,kBAAkB,2CAwYpB"}

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, IconGauge, IconUserCircle, IconApps, } from "@tabler/icons-react";
+import { IconChevronDown, IconCheck, IconExternalLink, IconBrain, IconBrowser, IconGitBranch, IconCloud, IconDatabase, IconShield, IconPlugConnected, IconTopologyRing2, IconLoader2, IconUpload, IconCoin, IconMail, IconKey, IconMicrophone, IconEyeOff, IconBolt, IconGauge, IconUserCircle, IconApps, } from "@tabler/icons-react";
 import { SettingsSection } from "./SettingsSection.js";
 import { useBuilderConnectFlow, useBuilderStatus, } from "./useBuilderStatus.js";
 import { BuilderBMark } from "../builder-mark.js";
@@ -10,6 +10,7 @@ import { AgentsSection } from "./AgentsSection.js";
 import { UsageSection } from "./UsageSection.js";
 import { SecretsSection } from "./SecretsSection.js";
 import { VoiceTranscriptionSection } from "./VoiceTranscriptionSection.js";
+import { DemoModeSection } from "./DemoModeSection.js";
 import { AutomationsSection } from "./AutomationsSection.js";
 import { PROVIDER_ENV_PLACEHOLDERS } from "../../agent/engine/provider-env-vars.js";
 import { Tooltip, TooltipContent, TooltipTrigger, } from "../components/ui/tooltip.js";
@@ -777,6 +778,7 @@ const SETTINGS_SECTION_IDS = new Set([
     "app-models",
     "limits",
     "voice",
+    "demo-mode",
     "automations",
     "secrets",
     "hosting",
@@ -948,6 +950,6 @@ export function SettingsPanel({ isDevMode, onToggleDevMode, showDevToggle, devAp
                         const nextIsDev = next === "development";
                         if (nextIsDev !== isDevMode)
                             onToggleDevMode();
-                    } })) })), _jsx(CapabilityStatusStrip, { isDevMode: isDevMode, builderConnected: connected, builderLoading: builderLoading, builderBranchesAvailable: builderBranchesAvailable, onOpenLlm: () => openSettingsSection("llm", true) }), _jsx(AccountSectionInner, { open: openSection === "account", onToggle: () => toggle("account") }), _jsx(LLMSectionInner, { builderFlow: builderFlow, builderLoading: builderLoading, connectUrl: connectUrl, connected: connected, orgName: orgName, envManaged: envManaged, credentialSource: credentialSource, open: openSection === "llm", onToggle: () => toggle("llm") }), _jsx(AppModelDefaultsSectionInner, { open: openSection === "app-models", onToggle: () => toggle("app-models") }), _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, { 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 }) }), _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, { 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", 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, { 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, 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, { 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", 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, { 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", 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, { builderFlow: builderFlow, connectUrl: connectUrl, connected: connected, orgName: orgName, envManaged: envManaged, credentialSource: credentialSource, trackingSource: "browser_settings", trackingFlow: "browser_automation" }) }), builderBranchesAvailable && (_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, { builderFlow: builderFlow, connectUrl: connectUrl, connected: connected, orgName: orgName, envManaged: envManaged, credentialSource: credentialSource, trackingSource: "background_agent_settings", trackingFlow: "background_agent" }) })), _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(CapabilityStatusStrip, { isDevMode: isDevMode, builderConnected: connected, builderLoading: builderLoading, builderBranchesAvailable: builderBranchesAvailable, onOpenLlm: () => openSettingsSection("llm", true) }), _jsx(AccountSectionInner, { open: openSection === "account", onToggle: () => toggle("account") }), _jsx(LLMSectionInner, { builderFlow: builderFlow, builderLoading: builderLoading, connectUrl: connectUrl, connected: connected, orgName: orgName, envManaged: envManaged, credentialSource: credentialSource, open: openSection === "llm", onToggle: () => toggle("llm") }), _jsx(AppModelDefaultsSectionInner, { open: openSection === "app-models", onToggle: () => toggle("app-models") }), _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(IconEyeOff, { size: 14 }), title: "Demo mode", subtitle: "Replace names, emails, and numbers with realistic fake data everywhere \u2014 in the UI and what the agent sees. IDs and structure are preserved so the app keeps working.", open: openSection === "demo-mode", onToggle: () => toggle("demo-mode"), children: _jsx(DemoModeSection, {}) }), _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, { 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 }) }), _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, { 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", 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, { 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, 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, { 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", 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, { 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", 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, { builderFlow: builderFlow, connectUrl: connectUrl, connected: connected, orgName: orgName, envManaged: envManaged, credentialSource: credentialSource, trackingSource: "browser_settings", trackingFlow: "browser_automation" }) }), builderBranchesAvailable && (_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, { builderFlow: builderFlow, connectUrl: connectUrl, connected: connected, orgName: orgName, envManaged: envManaged, credentialSource: credentialSource, trackingSource: "background_agent_settings", trackingFlow: "background_agent" }) })), _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