@agent-native/core 0.16.2 → 0.17.0

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";
@@ -128,14 +129,14 @@ function DisconnectBuilderButton() {
     return (_jsxs(_Fragment, { children: [_jsx("button", { type: "button", onClick: handleDisconnectClick, disabled: phase === "busy", className: "inline-flex items-center gap-1 rounded border border-border px-2 py-0.5 text-[10px] text-muted-foreground hover:text-foreground hover:bg-accent/40 disabled:opacity-60 disabled:cursor-wait", "aria-busy": phase === "busy", children: phase === "busy" ? (_jsxs(_Fragment, { children: [_jsx(IconLoader2, { size: 10, className: "animate-spin" }), "Disconnecting\u2026"] })) : ("Disconnect") }), err && _jsx("span", { className: "text-[10px] text-destructive", children: err })] }));
 }
 // ─── "Connect Builder.io" card (shared across all sections) ─────────────────
-function UseBuilderCard({ builderFlow, connectUrl, connected, orgName, envManaged, credentialSource, label = "Connect Builder.io", subtitle = "Free credits to start — no API key needed.", dim, }) {
+function UseBuilderCard({ builderFlow, connectUrl, connected, orgName, envManaged, credentialSource, trackingSource = "settings_panel_builder_card", trackingFlow = "connect_llm", label = "Connect Builder.io", subtitle = "Free credits to start — no API key needed.", dim, }) {
     const effectiveConnected = connected || builderFlow.configured;
     const effectiveOrgName = builderFlow.orgName ?? orgName;
     const bgClass = dim ? "" : "bg-accent/30";
     if (effectiveConnected) {
         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"] })] }), effectiveOrgName && (_jsx("p", { className: "text-[10px] text-muted-foreground mt-0.5", children: effectiveOrgName })), envManaged ? (_jsx("p", { className: "text-[10px] text-muted-foreground mt-1", children: credentialSource === "env"
                         ? "Deployment fallback is available. Connect your own account to override it."
-                        : "Using your connected Builder account. Deployment fallback is still available." })) : null, connectUrl || credentialSource !== "env" ? (_jsxs("div", { className: "flex items-center gap-2 mt-2.5", children: [connectUrl && (_jsxs("button", { type: "button", onClick: builderFlow.start, disabled: builderFlow.connecting, 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 disabled:opacity-60", children: [builderFlow.connecting
+                        : "Using your connected Builder account. Deployment fallback is still available." })) : null, connectUrl || credentialSource !== "env" ? (_jsxs("div", { className: "flex items-center gap-2 mt-2.5", children: [connectUrl && (_jsxs("button", { type: "button", onClick: () => builderFlow.start({ trackingSource, trackingFlow }), disabled: builderFlow.connecting, 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 disabled:opacity-60", children: [builderFlow.connecting
                                     ? "Connecting..."
                                     : credentialSource === "env"
                                         ? "Connect account"
@@ -143,7 +144,7 @@ function UseBuilderCard({ builderFlow, connectUrl, connected, orgName, envManage
     }
     if (!connectUrl)
         return null;
-    return (_jsx("button", { type: "button", onClick: builderFlow.start, disabled: builderFlow.connecting, className: `block w-full rounded-md border border-border px-3 py-3 text-left 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`, children: _jsxs("div", { className: "flex items-start gap-2.5", children: [_jsx("div", { className: "flex h-7 w-7 shrink-0 items-center justify-center rounded-md bg-foreground text-background", children: _jsx(BuilderBMark, { className: "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: "text-[12px] font-semibold text-foreground", children: builderFlow.connecting ? "Connecting Builder.io..." : label }), builderFlow.connecting && (_jsx(IconLoader2, { size: 12, className: "shrink-0 animate-spin text-muted-foreground" }))] }), _jsx("p", { className: "text-[10.5px] text-muted-foreground mt-0.5 leading-snug", children: subtitle }), builderFlow.error && (_jsx("p", { className: "mt-1 text-[10px] text-destructive", children: builderFlow.error }))] }), _jsx(IconExternalLink, { size: 12, className: "shrink-0 text-muted-foreground mt-0.5" })] }) }));
+    return (_jsx("button", { type: "button", onClick: () => builderFlow.start({ trackingSource, trackingFlow }), disabled: builderFlow.connecting, className: `block w-full rounded-md border border-border px-3 py-3 text-left 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`, children: _jsxs("div", { className: "flex items-start gap-2.5", children: [_jsx("div", { className: "flex h-7 w-7 shrink-0 items-center justify-center rounded-md bg-foreground text-background", children: _jsx(BuilderBMark, { className: "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: "text-[12px] font-semibold text-foreground", children: builderFlow.connecting ? "Connecting Builder.io..." : label }), builderFlow.connecting && (_jsx(IconLoader2, { size: 12, className: "shrink-0 animate-spin text-muted-foreground" }))] }), _jsx("p", { className: "text-[10.5px] text-muted-foreground mt-0.5 leading-snug", children: subtitle }), builderFlow.error && (_jsx("p", { className: "mt-1 text-[10px] text-destructive", children: builderFlow.error }))] }), _jsx(IconExternalLink, { size: 12, className: "shrink-0 text-muted-foreground mt-0.5" })] }) }));
 }
 // ─── Manual setup card ──────────────────────────────────────────────────────
 function ManualSetupCard({ hint, docsUrl, docsLabel = "Read the docs", children, dim, sourceBadge, }) {
@@ -425,7 +426,7 @@ function LLMSectionInner({ builderFlow, builderLoading, connectUrl, connected, o
         }
         catch { }
     };
-    return (_jsx(SettingsSection, { 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, label: "Connect Builder.io" }), !builderConnected && (_jsx(ManualSetupCard, { hint: "Choose your AI provider and model.", docsUrl: PROVIDER_DOCS[selectedEngine], sourceBadge: sourceBadge, docsLabel: "Get an API key", children: _jsxs("div", { className: "space-y-2 mb-1", children: [_jsx(SettingsSelect, { label: "Provider", value: selectedEngine, options: providerOptions, onValueChange: (val) => {
+    return (_jsx(SettingsSection, { 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: "Choose your AI provider and model.", docsUrl: PROVIDER_DOCS[selectedEngine], sourceBadge: sourceBadge, docsLabel: "Get an API key", 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 ?? "");
@@ -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 }), _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 }), _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 }), _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 }), _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 }) }), 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 }) })), _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