@agent-native/core 0.12.12 → 0.12.14

package/dist/client/settings/SettingsPanel.js

@@ -36,11 +36,10 @@ function SettingsSelect({ label, labelAdornment, value, options, onValueChange,
 // click actually disconnects. Arm auto-reverts after 4s of idle so a user
 // who wandered off doesn't come back to a disconnect waiting for them.
 //
-// Hits /_agent-native/builder/disconnect which scrubs BUILDER_* keys from the
-// template `.env`, `process.env`, and the `persisted-env-vars` settings row.
-// On success we dispatch `agent-engine:configured-changed` so dependent cards
-// refresh inline (no hard reload — that was racing with nitro's env-runner
-// restart and hitting React Router's error boundary).
+// Hits /_agent-native/builder/disconnect which removes request-scoped
+// Builder credentials from app_secrets. Deployment env credentials are left
+// alone and remain as fallback. On success we dispatch
+// `agent-engine:configured-changed` so dependent cards refresh inline.
 function DisconnectBuilderButton() {
     const { status } = useBuilderStatus();
     const [phase, setPhase] = useState("idle");
@@ -118,12 +117,10 @@ function DisconnectBuilderButton() {
         clearArmedTimer();
         setPhase("idle");
     }, [clearArmedTimer]);
-    // 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. The
-    // early return MUST come after every hook above to satisfy rules-of-hooks
-    // (status?.envManaged transitions undefined → boolean as the fetch resolves).
-    if (status?.envManaged)
+    // When only the deploy fallback is active there is nothing request-scoped
+    // for this button to remove. The early return MUST come after every hook
+    // above to satisfy rules-of-hooks.
+    if (status?.credentialSource === "env")
         return null;
     if (phase === "armed") {
         return (_jsxs(_Fragment, { children: [_jsx("button", { type: "button", onClick: handleDisconnectClick, className: "inline-flex items-center gap-1 rounded border border-destructive/40 bg-destructive/10 px-2 py-0.5 text-[10px] font-medium text-destructive hover:bg-destructive/20", children: "Confirm disconnect" }), _jsx("button", { type: "button", onClick: handleCancel, 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", children: "Cancel" })] }));
@@ -131,12 +128,18 @@ 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, label = "Connect Builder.io", subtitle = "Free credits to start — no API key needed.", dim, }) {
+function UseBuilderCard({ builderFlow, connectUrl, connected, orgName, envManaged, credentialSource, 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: "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, {})] }))] }));
+        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
+                                    ? "Connecting..."
+                                    : credentialSource === "env"
+                                        ? "Connect account"
+                                        : "Reconnect", _jsx(IconExternalLink, { size: 10 })] })), credentialSource !== "env" ? _jsx(DisconnectBuilderButton, {}) : null] })) : null] }));
     }
     if (!connectUrl)
         return null;
@@ -212,7 +215,7 @@ const PROVIDER_DOCS = {
     "ai-sdk:mistral": "https://console.mistral.ai/api-keys/",
     "ai-sdk:cohere": "https://dashboard.cohere.com/api-keys",
 };
-function LLMSectionInner({ builderFlow, builderLoading, connectUrl, connected, orgName, envManaged, open, onToggle, }) {
+function LLMSectionInner({ builderFlow, builderLoading, connectUrl, connected, orgName, envManaged, credentialSource, open, onToggle, }) {
     const [envKeys, setEnvKeys] = useState([]);
     const [apiKey, setApiKey] = useState("");
     const [saving, setSaving] = useState(false);
@@ -421,7 +424,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, label: "Connect Builder.io" }), !connected && (_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, label: "Connect Builder.io" }), !connected && (_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 ?? "");
@@ -676,6 +679,7 @@ export function SettingsPanel({ isDevMode, onToggleDevMode, showDevToggle, devAp
     const connectUrl = builder?.connectUrl;
     const orgName = builder?.orgName;
     const envManaged = !!builder?.envManaged;
+    const credentialSource = builder?.credentialSource;
     const builderBranchesAvailable = !!builder?.builderEnabled;
     const builderFlow = useBuilderConnectFlow({ popupUrl: connectUrl });
     // Detect whether the app registered any secrets — controls whether the
@@ -710,6 +714,6 @@ export function SettingsPanel({ isDevMode, onToggleDevMode, showDevToggle, devAp
                         const nextIsDev = next === "development";
                         if (nextIsDev !== isDevMode)
                             onToggleDevMode();
-                    } })) })), _jsx(AccountSectionInner, { open: openSection === "account", onToggle: () => toggle("account") }), _jsx(LLMSectionInner, { builderFlow: builderFlow, builderLoading: builderLoading, connectUrl: connectUrl, connected: connected, orgName: orgName, envManaged: envManaged, 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, { builderFlow: builderFlow, connectUrl: connectUrl, connected: connected, orgName: orgName, envManaged: envManaged }), _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 }), _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 }), _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 }), _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 }) }), 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 }) })), _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(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(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, { 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, {}) })] }));
 }
 //# sourceMappingURL=SettingsPanel.js.map