@agent-native/core 0.147.0 → 0.148.1

package/dist/client/settings/ProviderSetupForm.js

@@ -0,0 +1,145 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, } from "@agent-native/toolkit/ui/command";
+import { IconBolt, IconCheck, IconChevronDown, IconCloud, IconDeviceDesktop, IconExternalLink, IconKey, IconLoader2, IconRoute, IconServer2, } from "@tabler/icons-react";
+import { useEffect, useState } from "react";
+import { saveAgentEngineProviderSettings, setAgentEngineProvider, } from "../agent-engine-key.js";
+import { AGENT_PROVIDER_CATALOG, getAgentProviderOption, } from "../agent-provider-catalog.js";
+import { Popover, PopoverContent, PopoverTrigger, } from "../components/ui/popover.js";
+import { useT } from "../i18n.js";
+import { cn } from "../utils.js";
+function ProviderIcon({ option, size = 15, }) {
+    if (option.kind === "local")
+        return _jsx(IconDeviceDesktop, { size: size });
+    if (option.kind === "gateway")
+        return _jsx(IconRoute, { size: size });
+    return _jsx(IconCloud, { size: size });
+}
+export function AgentProviderPicker({ value, onChange, options = AGENT_PROVIDER_CATALOG, configuredProviders, disabled = false, className, layout = "compact", }) {
+    const t = useT();
+    const [open, setOpen] = useState(false);
+    const active = getAgentProviderOption(value);
+    const isPage = layout === "page";
+    return (_jsxs("div", { className: cn("space-y-1.5", className), children: [_jsx("p", { className: cn("font-medium text-foreground", isPage ? "text-sm" : "text-[11px]"), children: t("agentPanel.chooseProvider", {
+                    defaultValue: "Choose a provider",
+                }) }), _jsxs(Popover, { open: open, onOpenChange: setOpen, children: [_jsx(PopoverTrigger, { asChild: true, children: _jsxs("button", { type: "button", disabled: disabled, "aria-label": t("agentPanel.chooseProvider", {
+                                defaultValue: "Choose a provider",
+                            }), className: cn("flex w-full items-center gap-2 rounded-md border border-border bg-background text-start text-foreground transition-colors hover:bg-accent/40 disabled:cursor-not-allowed disabled:opacity-60", isPage ? "min-h-10 px-3 text-sm" : "min-h-9 px-2.5 text-[12px]"), children: [_jsx("span", { className: "flex size-6 shrink-0 items-center justify-center rounded-md bg-accent/50 text-muted-foreground", children: _jsx(ProviderIcon, { option: active, size: isPage ? 16 : 14 }) }), _jsx("span", { className: "min-w-0 flex-1", children: _jsx("span", { className: "block truncate font-medium", children: active.label }) }), _jsx(IconChevronDown, { size: isPage ? 16 : 14, className: "shrink-0 text-muted-foreground" })] }) }), _jsx(PopoverContent, { align: "start", sideOffset: 6, className: "w-[min(390px,calc(100vw-2rem))] p-0", children: _jsxs(Command, { filter: (candidate, search) => candidate.toLowerCase().includes(search.toLowerCase()) ? 1 : 0, children: [_jsx(CommandInput, { placeholder: t("agentPanel.searchProviders", {
+                                        defaultValue: "Search providers...",
+                                    }) }), _jsxs(CommandList, { className: "max-h-[min(440px,calc(100vh-8rem))]", children: [_jsx(CommandEmpty, { children: t("agentPanel.noProvidersFound", {
+                                                defaultValue: "No providers found.",
+                                            }) }), _jsx(CommandGroup, { heading: t("agentPanel.availableProviders", {
+                                                defaultValue: "Available providers",
+                                            }), children: options.map((option) => {
+                                                const configured = configuredProviders?.has(option.id);
+                                                return (_jsxs(CommandItem, { value: `${option.label} ${option.description} ${option.key ?? "local"}`, onSelect: () => {
+                                                        onChange(option.id);
+                                                        setOpen(false);
+                                                    }, className: "items-center gap-2.5 py-2.5", children: [_jsx("span", { className: "flex size-7 shrink-0 items-center justify-center rounded-md bg-accent/50 text-muted-foreground", children: _jsx(ProviderIcon, { option: option }) }), _jsxs("span", { className: "min-w-0 flex-1", children: [_jsxs("span", { className: "flex items-center gap-1.5", children: [_jsx("span", { className: "truncate font-medium", children: option.label }), configured ? (_jsxs("span", { className: "inline-flex shrink-0 items-center gap-1 text-[10px] font-medium text-primary", children: [_jsx(IconCheck, { size: 11 }), t("agentPanel.configured", {
+                                                                                    defaultValue: "Configured",
+                                                                                })] })) : null] }), _jsx("span", { className: "block truncate text-[11px] text-muted-foreground", children: option.description })] }), _jsx("span", { className: "shrink-0 text-[10px] text-muted-foreground", children: option.key
+                                                                ? t("agentPanel.apiKey", {
+                                                                    defaultValue: "API key",
+                                                                })
+                                                                : t("agentPanel.localRuntime", {
+                                                                    defaultValue: "Local",
+                                                                }) }), _jsx(IconCheck, { size: 15, className: cn("shrink-0", option.id === value ? "opacity-100" : "opacity-0") })] }, option.id));
+                                            }) })] })] }) })] })] }));
+}
+export function AgentProviderSetupForm({ initialProvider = "anthropic", configuredProviders, onConnected, scope = "user", layout = "compact", showTitle = true, className, }) {
+    const t = useT();
+    const isPage = layout === "page";
+    const [provider, setProvider] = useState(initialProvider);
+    const [apiKey, setApiKey] = useState("");
+    const [model, setModel] = useState("");
+    const [endpoint, setEndpoint] = useState("");
+    const [endpointOpen, setEndpointOpen] = useState(initialProvider === "ollama");
+    const [saving, setSaving] = useState(false);
+    const [saved, setSaved] = useState(false);
+    const [error, setError] = useState(null);
+    const active = getAgentProviderOption(provider);
+    useEffect(() => {
+        setModel(active.defaultModel);
+        setApiKey("");
+        setEndpoint("");
+        setEndpointOpen(provider === "ollama");
+        setError(null);
+        setSaved(false);
+    }, [active.defaultModel, provider]);
+    const handleProviderChange = (nextProvider) => {
+        setProvider(nextProvider);
+    };
+    const handleSave = async () => {
+        if (saving)
+            return;
+        if (active.key && !apiKey.trim()) {
+            setError(t("agentPanel.enterApiKey", {
+                defaultValue: `Enter your ${active.label} API key.`,
+            }));
+            return;
+        }
+        setSaving(true);
+        setError(null);
+        try {
+            if (active.key || endpoint.trim()) {
+                await saveAgentEngineProviderSettings({
+                    provider,
+                    ...(active.key ? { key: active.key } : {}),
+                    ...(apiKey.trim() ? { apiKey } : {}),
+                    ...(endpoint.trim() ? { baseUrl: endpoint } : {}),
+                    scope,
+                });
+            }
+            await setAgentEngineProvider({
+                provider,
+                model: model.trim() || active.defaultModel,
+            });
+            setApiKey("");
+            setSaved(true);
+            onConnected?.(provider);
+            window.setTimeout(() => setSaved(false), 2200);
+        }
+        catch (err) {
+            setError(err instanceof Error
+                ? err.message
+                : t("agentPanel.providerSetupFailed", {
+                    defaultValue: "Could not configure this provider.",
+                }));
+        }
+        finally {
+            setSaving(false);
+        }
+    };
+    const isConfigured = configuredProviders?.has(provider) || saved;
+    const modelInputVisible = active.supportsCustomModel;
+    const endpointVisible = active.supportsEndpoint;
+    return (_jsxs("form", { className: cn("space-y-3", className), onSubmit: (event) => {
+            event.preventDefault();
+            void handleSave();
+        }, children: [showTitle ? (_jsxs("div", { children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(IconKey, { size: isPage ? 16 : 13, className: "text-muted-foreground" }), _jsx("h4", { className: cn("font-medium text-foreground", isPage ? "text-sm" : "text-[11px]"), children: t("agentPanel.addOwnKeys", {
+                                    defaultValue: "Custom keys",
+                                }) })] }), _jsx("p", { className: cn("mt-1 leading-relaxed text-muted-foreground", isPage ? "text-xs" : "text-[11px]"), children: t("agentPanel.configureProviderKeys", {
+                            defaultValue: "Choose a provider.",
+                        }) })] })) : null, _jsx(AgentProviderPicker, { value: provider, onChange: handleProviderChange, configuredProviders: configuredProviders, disabled: saving, layout: layout }), _jsxs("div", { className: cn("rounded-md border border-border bg-accent/20", isPage ? "space-y-3 p-3.5" : "space-y-2.5 p-2.5"), children: [_jsxs("div", { className: "flex items-start gap-2", children: [_jsx("span", { className: "mt-0.5 flex size-6 shrink-0 items-center justify-center rounded-md bg-background text-muted-foreground", children: active.kind === "local" ? (_jsx(IconDeviceDesktop, { size: isPage ? 15 : 13 })) : active.kind === "gateway" ? (_jsx(IconRoute, { size: isPage ? 15 : 13 })) : (_jsx(IconBolt, { size: isPage ? 15 : 13 })) }), _jsx("div", { className: "min-w-0 flex-1", title: active.description, children: _jsxs("div", { className: "flex items-center gap-2", children: [_jsx("p", { className: cn("font-medium text-foreground", isPage ? "text-sm" : "text-[12px]"), children: active.label }), isConfigured ? (_jsxs("span", { className: "inline-flex items-center gap-1 text-[10px] font-medium text-primary", children: [_jsx(IconCheck, { size: 11 }), t("agentPanel.configured", {
+                                                    defaultValue: "Configured",
+                                                })] })) : null] }) })] }), active.key ? (_jsxs("label", { className: "block space-y-1.5", children: [_jsx("span", { className: cn("font-medium text-foreground", isPage ? "text-xs" : "text-[11px]"), children: t("agentPanel.apiKey", { defaultValue: "API key" }) }), _jsx("input", { type: "password", value: apiKey, autoComplete: "off", spellCheck: false, placeholder: active.placeholder, disabled: saving, onChange: (event) => {
+                                    setApiKey(event.target.value);
+                                    if (error)
+                                        setError(null);
+                                }, className: cn("w-full rounded-md border border-input bg-background text-foreground outline-none transition-colors hover:bg-accent/40 focus:ring-1 focus:ring-ring focus:ring-offset-1 focus:ring-offset-background placeholder:text-muted-foreground/50", isPage ? "h-10 px-3 text-sm" : "h-8 px-2.5 text-[12px]") })] })) : (_jsxs("div", { className: "flex items-start gap-2 rounded-md border border-border/70 bg-background/60 px-2.5 py-2", children: [_jsx(IconServer2, { size: isPage ? 15 : 13, className: "mt-0.5 shrink-0 text-muted-foreground" }), _jsx("p", { className: "text-[11px] leading-relaxed text-muted-foreground", children: t("agentPanel.noApiKeyNeeded", {
+                                    defaultValue: "No API key required.",
+                                }) })] })), modelInputVisible ? (_jsxs("label", { className: "block space-y-1.5", children: [_jsx("span", { className: cn("font-medium text-foreground", isPage ? "text-xs" : "text-[11px]"), children: t("agentPanel.modelId", { defaultValue: "Model ID" }) }), _jsx("input", { type: "text", value: model, list: `agent-provider-models-${provider}`, disabled: saving, spellCheck: false, autoComplete: "off", placeholder: active.defaultModel, onChange: (event) => setModel(event.target.value), className: cn("w-full rounded-md border border-input bg-background text-foreground outline-none transition-colors hover:bg-accent/40 focus:ring-1 focus:ring-ring focus:ring-offset-1 focus:ring-offset-background placeholder:text-muted-foreground/50", isPage ? "h-10 px-3 text-sm" : "h-8 px-2.5 text-[12px]") }), _jsx("datalist", { id: `agent-provider-models-${provider}`, children: active.supportedModels.map((modelOption) => (_jsx("option", { value: modelOption }, modelOption))) })] })) : null, endpointVisible ? (_jsxs("div", { className: "border-t border-border/70 pt-2", children: [_jsxs("button", { type: "button", onClick: () => setEndpointOpen((open) => !open), className: "flex w-full items-center justify-between gap-2 text-start text-[11px] font-medium text-foreground", "aria-expanded": endpointOpen, title: provider === "ollama"
+                                    ? "Defaults to Ollama at http://localhost:11434."
+                                    : "Use for LiteLLM or another OpenAI-compatible gateway.", children: [_jsxs("span", { className: "inline-flex items-center gap-1.5", children: [_jsx(IconChevronDown, { size: 13, className: cn("text-muted-foreground transition-transform", !endpointOpen && "-rotate-90") }), t("agentPanel.endpointUrl", {
+                                                defaultValue: "Endpoint URL",
+                                            })] }), _jsx("span", { className: "text-[10px] font-normal text-muted-foreground", children: t("agentPanel.optional", { defaultValue: "Optional" }) })] }), endpointOpen ? (_jsx("div", { className: "mt-2 space-y-1.5", children: _jsx("input", { type: "url", value: endpoint, disabled: saving, spellCheck: false, autoComplete: "off", placeholder: active.endpointPlaceholder, onChange: (event) => setEndpoint(event.target.value), className: cn("w-full rounded-md border border-input bg-background text-foreground outline-none transition-colors hover:bg-accent/40 focus:ring-1 focus:ring-ring focus:ring-offset-1 focus:ring-offset-background placeholder:text-muted-foreground/50", isPage ? "h-10 px-3 text-sm" : "h-8 px-2.5 text-[12px]") }) })) : null] })) : null, _jsxs("div", { className: "flex flex-wrap items-center gap-2 pt-0.5", children: [_jsx("button", { type: "submit", disabled: saving || Boolean(active.key && !apiKey.trim()), className: cn("inline-flex items-center justify-center gap-1.5 rounded-md bg-foreground font-medium text-background transition-opacity hover:opacity-90 disabled:cursor-not-allowed disabled:opacity-50", isPage ? "h-9 px-3 text-xs" : "h-8 px-3 text-[11px]"), children: saving ? (_jsxs(_Fragment, { children: [_jsx(IconLoader2, { size: isPage ? 14 : 11, className: "animate-spin" }), t("agentPanel.savingProvider", {
+                                            defaultValue: "Saving...",
+                                        })] })) : saved ? (_jsxs(_Fragment, { children: [_jsx(IconCheck, { size: isPage ? 14 : 11 }), t("agentPanel.providerSaved", {
+                                            defaultValue: "Connected",
+                                        })] })) : provider === "ollama" ? (t("agentPanel.useProvider", {
+                                    provider: active.label,
+                                    defaultValue: `Use ${active.label}`,
+                                })) : (t("agentPanel.saveAndUseProvider", {
+                                    provider: active.label,
+                                    defaultValue: `Save and use ${active.label}`,
+                                })) }), active.docsUrl ? (_jsxs("a", { href: active.docsUrl, target: "_blank", rel: "noopener noreferrer", className: "inline-flex items-center gap-1 rounded-md px-1.5 py-1 text-[10px] font-medium text-muted-foreground no-underline transition-colors hover:bg-accent/40 hover:text-foreground", children: [t("agentPanel.getApiKey", { defaultValue: "Get an API key" }), _jsx(IconExternalLink, { size: 11 })] })) : null] }), error ? (_jsx("p", { className: "text-[11px] leading-relaxed text-destructive", children: error })) : null] })] }));
+}

package/dist/client/settings/SettingsPanel.js

@@ -6,8 +6,9 @@ import { IconChevronDown, IconChevronRight, IconCheck, IconExternalLink, IconBra
 import React, { Suspense, lazy, useState, useEffect, useCallback, useMemo, useRef, } from "react";
 import { PROVIDER_ENV_PLACEHOLDERS } from "../../agent/engine/provider-env-vars.js";
 import { buildSettingsRoute } from "../../navigation/index.js";
-import { saveAgentEngineProviderSettings } from "../agent-engine-key.js";
+import { saveAgentEngineProviderSettings, setAgentEngineProvider, } from "../agent-engine-key.js";
 import { AgentWorkspaceContent } from "../agent-page/AgentWorkspaceContent.js";
+import { getAgentProviderOption, providerIdForEngine, } from "../agent-provider-catalog.js";
 import { agentNativePath } from "../api-path.js";
 import { BuilderBMark } from "../builder-mark.js";
 import { Popover, PopoverContent, PopoverTrigger, } from "../components/ui/popover.js";
@@ -24,6 +25,7 @@ import { AgentsSection } from "./AgentsSection.js";
 import { AutomationsSection } from "./AutomationsSection.js";
 import { DemoModeSection } from "./DemoModeSection.js";
 import { ExtensionsSettingsContent } from "./ExtensionsSettingsContent.js";
+import { AgentProviderPicker } from "./ProviderSetupForm.js";
 import { SecretsSection } from "./SecretsSection.js";
 import { SettingsGroup, SettingsRow } from "./SettingsRow.js";
 import { SettingsSection, SettingsSurfaceProvider, useSettingsSurface, } from "./SettingsSection.js";
@@ -343,8 +345,8 @@ function LLMSectionInner({ builderFlow, builderLoading, connectUrl, connected, o
     const [baseUrlConfigured, setBaseUrlConfigured] = useState(false);
     const [clearBaseUrl, setClearBaseUrl] = useState(false);
     const [advancedOpen, setAdvancedOpen] = useState(false);
-    const [manualSetupOpen, setManualSetupOpen] = useState(false);
     const [applyNote, setApplyNote] = useState(false);
+    const [applyError, setApplyError] = useState(null);
     const [testing, setTesting] = useState(false);
     const [testResult, setTestResult] = useState(null);
     const [settingsStatus, setSettingsStatus] = useState(null);
@@ -420,32 +422,26 @@ function LLMSectionInner({ builderFlow, builderLoading, connectUrl, connected, o
         envVar,
         builderConnected,
     });
-    const manualSetupHint = selectedEngine === "ai-sdk:openrouter"
-        ? "Provide an OpenRouter key to use OpenRouter models like GLM 5.2."
-        : "Choose your AI provider and model.";
+    const manualSetupHint = "Select a provider.";
     const engineChanged = selectedEngine !== currentEngine || selectedModel !== currentModel;
-    const isOpenAiEngine = selectedEngine === "ai-sdk:openai";
-    const endpointChanged = isOpenAiEngine && (!!baseUrl.trim() || clearBaseUrl);
+    const selectedProvider = providerIdForEngine(selectedEngine) ?? "anthropic";
+    const selectedProviderOption = getAgentProviderOption(selectedProvider);
+    const isEndpointProvider = selectedProviderOption.supportsEndpoint === true;
+    const endpointChanged = isEndpointProvider && (!!baseUrl.trim() || clearBaseUrl);
     const providerSettingsChanged = !!apiKey.trim() || endpointChanged;
-    // Hide the Anthropic-via-AI-SDK alias (redundant with the native entry)
-    // and Ollama (no API key to set here). The currently-selected engine is
-    // always kept so a stale setting doesn't vanish from the picker.
-    const providerOptions = engines
-        .filter((e) => e.name === selectedEngine ||
-        (e.name !== "ai-sdk:anthropic" && e.name !== "ai-sdk:ollama"))
-        .map((e) => ({ value: e.name, label: e.label }));
     const modelOptions = latestModelsOnly(selectedEngineInfo?.supportedModels ?? []).map((m) => ({ value: m, label: friendlyModelName(m) }));
     const handleSave = async () => {
-        if (!providerSettingsChanged || !envVar)
+        if (!providerSettingsChanged || (!envVar && !isEndpointProvider))
             return;
         setSaving(true);
         try {
-            const nextBaseUrl = isOpenAiEngine ? baseUrl.trim() : "";
+            const nextBaseUrl = isEndpointProvider ? baseUrl.trim() : "";
             await saveAgentEngineProviderSettings({
-                key: envVar,
+                provider: selectedProvider,
+                ...(envVar ? { key: envVar } : {}),
                 ...(apiKey.trim() ? { apiKey } : {}),
                 ...(nextBaseUrl ? { baseUrl: nextBaseUrl } : {}),
-                ...(isOpenAiEngine && clearBaseUrl ? { clearBaseUrl: true } : {}),
+                ...(isEndpointProvider && clearBaseUrl ? { clearBaseUrl: true } : {}),
             });
             setSaved(true);
             setApiKey("");
@@ -527,40 +523,46 @@ function LLMSectionInner({ builderFlow, builderLoading, connectUrl, connected, o
         }
     };
     const handleApply = async () => {
+        setApplyError(null);
         try {
-            const res = await fetch(agentNativePath("/_agent-native/actions/manage-agent-engine"), {
-                method: "POST",
-                headers: { "Content-Type": "application/json" },
-                body: JSON.stringify({
-                    action: "set",
-                    engine: selectedEngine,
-                    model: selectedModel,
-                }),
+            await setAgentEngineProvider({
+                provider: selectedProvider,
+                model: selectedModel,
             });
-            if (res.ok) {
-                setCurrentEngine(selectedEngine);
-                setCurrentModel(selectedModel);
-                setApplyNote(true);
-                refreshSettingsStatus();
-                notifyConfigChanged();
-                setTimeout(() => setApplyNote(false), 4000);
-            }
+            setCurrentEngine(selectedEngine);
+            setCurrentModel(selectedModel);
+            setApplyNote(true);
+            refreshSettingsStatus();
+            notifyConfigChanged();
+            setTimeout(() => setApplyNote(false), 4000);
+        }
+        catch (err) {
+            setApplyError(err instanceof Error ? err.message : String(err));
         }
-        catch { }
     };
-    return (_jsx(SettingsSection, { id: settingsSectionDomId("llm"), icon: _jsx(IconBrain, { size: 14 }), title: "LLM", subtitle: "Use Builder.io free credits or your own LLM provider.", required: true, connected: initialLoading ? undefined : anyKeyConfigured, grouped: isPage && grouped, open: open, onToggle: onToggle, children: initialLoading ? (_jsx(SettingsLoadingRow, { controlCount: 2 })) : (_jsxs("div", { className: cn(isPage
+    return (_jsx(SettingsSection, { id: settingsSectionDomId("llm"), icon: _jsx(IconBrain, { size: 14 }), title: "LLM", required: true, connected: initialLoading ? undefined : anyKeyConfigured, subtitle: isPage
+            ? undefined
+            : t("agentPanel.builderOrOwnKeys", {
+                defaultValue: "Choose Builder.io or custom keys.",
+            }), grouped: isPage && grouped, open: open, onToggle: onToggle, children: initialLoading ? (_jsx(SettingsLoadingRow, { controlCount: 2 })) : (_jsxs("div", { className: cn(isPage
                 ? "flex items-center justify-between gap-4 px-5 py-4 sm:px-6"
-                : "space-y-2"), children: [isPage && (_jsxs("div", { className: "min-w-0", children: [_jsx("p", { className: "text-sm font-medium text-foreground", children: "Connect an LLM" }), _jsx("p", { className: "mt-1 text-sm leading-6 text-muted-foreground", children: "Use Builder.io free credits or your own provider." })] })), _jsxs("div", { className: cn(isPage && "flex flex-wrap items-center justify-end gap-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", compact: isPage }), builderConnected && !isPage && (_jsxs(Button, { type: "button", intent: "neutral", emphasis: "ghost", "aria-expanded": manualSetupOpen, "aria-controls": "llm-manual-setup", onClick: () => setManualSetupOpen((open) => !open), className: cn("inline-flex items-center gap-1 px-0.5 text-muted-foreground hover:text-foreground", isPage ? "text-xs" : "text-[10px]"), children: [t("agentPanel.addOwnKeys", {
-                                    defaultValue: "Add your own keys",
-                                }), _jsx(IconChevronDown, { size: isPage ? 14 : 11, className: cn("transition-transform", manualSetupOpen && "rotate-180") })] })), (!builderConnected || manualSetupOpen || isPage) && (_jsx(ManualSetupCard, { id: "llm-manual-setup", title: "Custom keys", hint: manualSetupHint, sourceBadge: builderConnected ? undefined : sourceBadge, bare: isPage, popover: isPage, popoverLabel: "Custom keys", 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 ?? "");
+                : "flex items-center justify-between gap-2"), children: [isPage && (_jsxs("div", { className: "min-w-0", children: [_jsx("p", { className: "text-sm font-medium text-foreground", children: "AI provider" }), _jsx("p", { className: "mt-1 text-sm leading-6 text-muted-foreground", children: t("agentPanel.builderOrOwnKeys", {
+                                defaultValue: "Choose Builder.io or custom keys.",
+                            }) })] })), _jsxs("div", { className: cn("flex flex-wrap items-center justify-end gap-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", compact: true }), _jsx(ManualSetupCard, { id: "llm-manual-setup", title: "Custom keys", hint: manualSetupHint, sourceBadge: builderConnected ? undefined : sourceBadge, bare: isPage, popover: true, popoverLabel: settingsConfigured
+                                ? "Manage"
+                                : t("agentPanel.addOwnKeys", {
+                                    defaultValue: "Custom keys",
+                                }), children: _jsxs("div", { className: "space-y-2 mb-1", children: [_jsx(AgentProviderPicker, { value: selectedProvider, layout: isPage ? "page" : "compact", onChange: (provider) => {
+                                            const option = getAgentProviderOption(provider);
+                                            setSelectedEngine(option.engine);
+                                            setSelectedModel(option.defaultModel);
                                             setApiKey("");
                                             setBaseUrl("");
                                             setClearBaseUrl(false);
                                             setAdvancedOpen(false);
-                                        } }), _jsxs("div", { className: "space-y-1.5", children: [_jsx("p", { className: fieldLabelClass(isPage), children: "Model" }), _jsx("input", { type: "text", list: `model-suggestions-${selectedEngine}`, value: selectedModel, onChange: (e) => setSelectedModel(e.target.value), placeholder: selectedEngineInfo?.defaultModel ?? "e.g. model-id", spellCheck: false, autoComplete: "off", className: textInputClass(isPage), style: isPage ? CONTROL_STYLE_PAGE : CONTROL_STYLE }), modelOptions.length > 0 && (_jsx("datalist", { id: `model-suggestions-${selectedEngine}`, children: modelOptions.map((opt) => (_jsx("option", { value: opt.value, label: opt.label }, opt.value))) }))] }), isOpenAiEngine && (_jsxs("div", { className: "border-t border-border/70 pt-2", children: [_jsxs(Button, { type: "button", onClick: () => setAdvancedOpen((v) => !v), className: "flex w-full cursor-pointer items-center justify-between gap-2 rounded px-0.5 py-1 text-left hover:text-foreground", children: [_jsxs("span", { className: "inline-flex min-w-0 items-center gap-1.5 text-[11px] font-medium text-foreground", children: [advancedOpen ? (_jsx(IconChevronDown, { size: 12 })) : (_jsx(IconChevronRight, { size: 12, className: "rtl:-scale-x-100" })), "Advanced"] }), _jsx("span", { className: "truncate text-[10px] text-muted-foreground", children: "OpenAI-compatible endpoint" })] }), advancedOpen && (_jsxs("div", { className: "mt-1.5 space-y-1.5", children: [_jsxs("div", { className: "flex items-center justify-between gap-2", children: [_jsx("p", { className: "text-[12px] font-medium text-foreground", children: "Endpoint URL" }), _jsx("span", { className: "text-[10px] text-muted-foreground", children: baseUrlConfigured ? "Configured" : "Optional" })] }), _jsx("input", { type: "url", value: baseUrl, onChange: (e) => {
+                                        } }), _jsxs("div", { className: "space-y-1.5", children: [_jsx("p", { className: fieldLabelClass(isPage), children: "Model" }), _jsx("input", { type: "text", list: `model-suggestions-${selectedEngine}`, value: selectedModel, onChange: (e) => setSelectedModel(e.target.value), placeholder: selectedEngineInfo?.defaultModel ?? "e.g. model-id", spellCheck: false, autoComplete: "off", className: textInputClass(isPage), style: isPage ? CONTROL_STYLE_PAGE : CONTROL_STYLE }), modelOptions.length > 0 && (_jsx("datalist", { id: `model-suggestions-${selectedEngine}`, children: modelOptions.map((opt) => (_jsx("option", { value: opt.value, label: opt.label }, opt.value))) }))] }), isEndpointProvider && (_jsxs("div", { className: "border-t border-border/70 pt-2", children: [_jsxs(Button, { type: "button", onClick: () => setAdvancedOpen((v) => !v), className: "flex w-full cursor-pointer items-center justify-between gap-2 rounded px-0.5 py-1 text-left hover:text-foreground", children: [_jsxs("span", { className: "inline-flex min-w-0 items-center gap-1.5 text-[11px] font-medium text-foreground", children: [advancedOpen ? (_jsx(IconChevronDown, { size: 12 })) : (_jsx(IconChevronRight, { size: 12, className: "rtl:-scale-x-100" })), "Advanced"] }), _jsx("span", { className: "truncate text-[10px] text-muted-foreground", children: selectedProvider === "ollama"
+                                                            ? "Local Ollama endpoint"
+                                                            : "OpenAI-compatible endpoint" })] }), advancedOpen && (_jsxs("div", { className: "mt-1.5 space-y-1.5", children: [_jsxs("div", { className: "flex items-center justify-between gap-2", children: [_jsx("p", { className: "text-[12px] font-medium text-foreground", children: "Endpoint URL" }), _jsx("span", { className: "text-[10px] text-muted-foreground", children: baseUrlConfigured ? "Configured" : "Optional" })] }), _jsx("input", { type: "url", value: baseUrl, onChange: (e) => {
                                                             setBaseUrl(e.target.value);
                                                             if (e.target.value.trim())
                                                                 setClearBaseUrl(false);
@@ -569,14 +571,16 @@ function LLMSectionInner({ builderFlow, builderLoading, connectUrl, connected, o
                                                                 handleSave();
                                                         }, placeholder: baseUrlConfigured
                                                             ? "Leave blank to keep current endpoint"
-                                                            : "https://gateway.example/v1", disabled: clearBaseUrl, spellCheck: false, autoComplete: "off", className: "flex h-9 w-full rounded-md border border-border bg-background px-3 text-[12px] text-foreground outline-none transition-colors hover:bg-accent/40 focus:ring-1 focus:ring-accent disabled:opacity-50 placeholder:text-muted-foreground/50", style: CONTROL_STYLE }), _jsx("p", { className: "text-[10px] leading-relaxed text-muted-foreground", children: "Use for LiteLLM or another OpenAI-compatible chat gateway. Leave blank for OpenAI." }), baseUrlConfigured && (_jsxs("label", { className: "flex items-center gap-1.5 text-[10px] text-muted-foreground", children: [_jsx(Checkbox, { checked: clearBaseUrl, onChange: (checked) => {
+                                                            : selectedProvider === "ollama"
+                                                                ? "http://localhost:11434"
+                                                                : "https://gateway.example/v1", disabled: clearBaseUrl, spellCheck: false, autoComplete: "off", className: "flex h-9 w-full rounded-md border border-border bg-background px-3 text-[12px] text-foreground outline-none transition-colors hover:bg-accent/40 focus:ring-1 focus:ring-accent disabled:opacity-50 placeholder:text-muted-foreground/50", style: CONTROL_STYLE }), baseUrlConfigured && (_jsxs("label", { className: "flex items-center gap-1.5 text-[10px] text-muted-foreground", children: [_jsx(Checkbox, { checked: clearBaseUrl, onChange: (checked) => {
                                                                     setClearBaseUrl(checked);
                                                                     if (checked)
                                                                         setBaseUrl("");
-                                                                }, "aria-label": "Clear saved endpoint override", className: "shrink-0" }), "Clear saved endpoint override"] })), envVar && envConfigured && endpointChanged && (_jsx(Button, { type: "button", intent: "neutral", emphasis: "solid", onClick: handleSave, disabled: saving, className: "rounded bg-accent px-2.5 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 endpoint") }))] }))] })), envVar && envConfigured ? (_jsxs("div", { className: cn("flex items-center gap-1.5 text-primary", isPage ? "text-xs" : "text-[10px]"), children: [_jsx(IconCheck, { size: isPage ? 14 : 10 }), envVar, " configured"] })) : envVar ? (_jsxs("div", { className: "flex gap-1.5", children: [_jsx("input", { type: "password", value: apiKey, onChange: (e) => setApiKey(e.target.value), onKeyDown: (e) => {
+                                                                }, "aria-label": "Clear saved endpoint override", className: "shrink-0" }), "Clear saved endpoint override"] })), endpointChanged && (_jsx(Button, { type: "button", intent: "neutral", emphasis: "solid", onClick: handleSave, disabled: saving, className: "rounded bg-accent px-2.5 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 endpoint") }))] }))] })), envVar && envConfigured ? (_jsxs("div", { className: cn("flex items-center gap-1.5 text-primary", isPage ? "text-xs" : "text-[10px]"), children: [_jsx(IconCheck, { size: isPage ? 14 : 10 }), envVar, " configured"] })) : envVar ? (_jsxs("div", { className: "flex gap-1.5", children: [_jsx("input", { type: "password", value: apiKey, onChange: (e) => setApiKey(e.target.value), onKeyDown: (e) => {
                                                     if (e.key === "Enter")
                                                         handleSave();
-                                                }, placeholder: PROVIDER_ENV_PLACEHOLDERS[envVar] ?? "...", className: cn(textInputClass(isPage), "flex-1"), style: isPage ? CONTROL_STYLE_PAGE : undefined }), _jsx(Button, { intent: "primary", emphasis: "solid", onClick: handleSave, disabled: !providerSettingsChanged || saving, className: pillButtonClass(isPage, "solid"), children: saving ? (_jsx(IconLoader2, { size: isPage ? 14 : 10, className: "animate-spin" })) : saved ? (_jsx(IconCheck, { size: isPage ? 14 : 10 })) : ("Save") })] })) : null, _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Button, { intent: "neutral", emphasis: "outline", onClick: handleTest, disabled: testing, className: pillButtonClass(isPage, "outline"), children: testing ? (_jsxs("span", { className: "flex items-center gap-1", children: [_jsx(IconLoader2, { size: isPage ? 14 : 10, className: "animate-spin" }), "Testing\u2026"] })) : ("Test") }), PROVIDER_DOCS[selectedEngine] ? (_jsxs("a", { href: PROVIDER_DOCS[selectedEngine], target: "_blank", rel: "noopener noreferrer", className: cn(pillButtonClass(isPage, "outline"), "no-underline"), children: ["Get an API key", _jsx(IconExternalLink, { size: isPage ? 14 : 10 })] })) : null, engineChanged && (_jsx(Button, { intent: "primary", emphasis: "solid", onClick: handleApply, className: pillButtonClass(isPage, "solid"), children: "Apply" })), settingsStatus != null && (_jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx(Button, { intent: "danger", emphasis: "outline", onClick: handleDisconnect, className: cn(pillButtonClass(isPage, "outline"), "ms-auto text-muted-foreground hover:bg-destructive/10 hover:text-destructive hover:border-destructive/40"), children: "Disconnect" }) }), _jsx(TooltipContent, { children: "Clear the saved engine \u2014 the app will fall back to the default until you re-apply." })] }))] }), testResult && testResult.ok && (_jsxs("p", { className: cn("flex items-center gap-1 text-primary", isPage ? "text-xs" : "text-[10px]"), children: [_jsx(IconCheck, { size: isPage ? 14 : 10 }), "Test passed \u2014 ", testResult.latencyMs, "ms"] })), testResult && testResult.ok === false && (_jsxs("p", { className: cn("text-destructive", isPage ? "text-xs" : "text-[10px]"), children: ["Test failed: ", testResult.error] })), disconnectError && (_jsxs("p", { className: cn("text-destructive", isPage ? "text-xs" : "text-[10px]"), children: ["Disconnect failed: ", disconnectError] })), applyNote && (_jsx("p", { className: cn("text-muted-foreground", isPage ? "text-xs" : "text-[10px]"), children: "Changes take effect on next conversation" }))] }) }))] })] })) }));
+                                                }, placeholder: PROVIDER_ENV_PLACEHOLDERS[envVar] ?? "...", className: cn(textInputClass(isPage), "flex-1"), style: isPage ? CONTROL_STYLE_PAGE : undefined }), _jsx(Button, { intent: "primary", emphasis: "solid", onClick: handleSave, disabled: !providerSettingsChanged || saving, className: pillButtonClass(isPage, "solid"), children: saving ? (_jsx(IconLoader2, { size: isPage ? 14 : 10, className: "animate-spin" })) : saved ? (_jsx(IconCheck, { size: isPage ? 14 : 10 })) : ("Save") })] })) : null, _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Button, { intent: "neutral", emphasis: "outline", onClick: handleTest, disabled: testing, className: pillButtonClass(isPage, "outline"), children: testing ? (_jsxs("span", { className: "flex items-center gap-1", children: [_jsx(IconLoader2, { size: isPage ? 14 : 10, className: "animate-spin" }), "Testing\u2026"] })) : ("Test") }), PROVIDER_DOCS[selectedEngine] ? (_jsxs("a", { href: PROVIDER_DOCS[selectedEngine], target: "_blank", rel: "noopener noreferrer", className: cn(pillButtonClass(isPage, "outline"), "no-underline"), children: ["Get an API key", _jsx(IconExternalLink, { size: isPage ? 14 : 10 })] })) : null, engineChanged && (_jsx(Button, { intent: "primary", emphasis: "solid", onClick: handleApply, className: pillButtonClass(isPage, "solid"), children: "Apply" })), settingsStatus != null && (_jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx(Button, { intent: "danger", emphasis: "outline", onClick: handleDisconnect, className: cn(pillButtonClass(isPage, "outline"), "ms-auto text-muted-foreground hover:bg-destructive/10 hover:text-destructive hover:border-destructive/40"), children: "Disconnect" }) }), _jsx(TooltipContent, { children: "Clear the saved engine \u2014 the app will fall back to the default until you re-apply." })] }))] }), testResult && testResult.ok && (_jsxs("p", { className: cn("flex items-center gap-1 text-primary", isPage ? "text-xs" : "text-[10px]"), children: [_jsx(IconCheck, { size: isPage ? 14 : 10 }), "Test passed \u2014 ", testResult.latencyMs, "ms"] })), testResult && testResult.ok === false && (_jsxs("p", { className: cn("text-destructive", isPage ? "text-xs" : "text-[10px]"), children: ["Test failed: ", testResult.error] })), disconnectError && (_jsxs("p", { className: cn("text-destructive", isPage ? "text-xs" : "text-[10px]"), children: ["Disconnect failed: ", disconnectError] })), applyError && (_jsxs("p", { className: cn("text-destructive", isPage ? "text-xs" : "text-[10px]"), children: ["Apply failed: ", applyError] })), applyNote && (_jsx("p", { className: cn("text-muted-foreground", isPage ? "text-xs" : "text-[10px]"), children: "Changes take effect on next conversation" }))] }) })] })] })) }));
 }
 function friendlyAppName(appId) {
     return appId
@@ -587,7 +591,7 @@ function friendlyAppName(appId) {
 }
 function AppDefaultModelPicker({ engines, value, disabled, onChange, }) {
     const [open, setOpen] = useState(false);
-    const visibleEngines = engines.filter((engine) => engine.name !== "ai-sdk:anthropic" && engine.name !== "ai-sdk:ollama");
+    const visibleEngines = engines.filter((engine) => engine.name !== "ai-sdk:anthropic");
     const selectedModel = value.includes("::")
         ? value.slice(value.indexOf("::") + 2)
         : null;
@@ -664,8 +668,7 @@ function AppModelDefaultsSectionInner({ grouped = false, open, onToggle, }) {
     useEffect(() => load(), [load]);
     const selectedEngineInfo = settings?.engines.find((engine) => engine.name === selectedEngine) ?? null;
     const engineOptions = (settings?.engines ?? [])
-        .filter((engine) => engine.name === selectedEngine ||
-        (engine.name !== "ai-sdk:anthropic" && engine.name !== "ai-sdk:ollama"))
+        .filter((engine) => engine.name === selectedEngine || engine.name !== "ai-sdk:anthropic")
         .map((engine) => ({
         value: engine.name,
         label: engine.name === "builder"

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

@@ -8,3 +8,5 @@ export { SettingsGroup, SettingsRow, type SettingsGroupProps, type SettingsRowPr
 export { SettingsSection, SettingsSurfaceProvider, useSettingsSurface, type SettingsSurface, } from "./SettingsSection.js";
 export { SettingsLoadingRow, SettingsSkeleton, type SettingsLoadingRowProps, type SettingsSkeletonProps, } from "./SettingsSkeleton.js";
 export { normalizeSettingsSection, settingsSectionDomId, useSettingsPanelController, type SettingsPanelController, type SettingsPanelControllerOptions, } from "./useSettingsPanelController.js";
+export { AGENT_PROVIDER_CATALOG, getAgentProviderOption, providerIdForEngine, type AgentProviderId, type AgentProviderOption, } from "../agent-provider-catalog.js";
+export { AgentProviderPicker, AgentProviderSetupForm, type AgentProviderPickerProps, type AgentProviderSetupFormProps, } from "./ProviderSetupForm.js";

package/dist/client/settings/index.js

@@ -8,3 +8,5 @@ export { SettingsGroup, SettingsRow, } from "./SettingsRow.js";
 export { SettingsSection, SettingsSurfaceProvider, useSettingsSurface, } from "./SettingsSection.js";
 export { SettingsLoadingRow, SettingsSkeleton, } from "./SettingsSkeleton.js";
 export { normalizeSettingsSection, settingsSectionDomId, useSettingsPanelController, } from "./useSettingsPanelController.js";
+export { AGENT_PROVIDER_CATALOG, getAgentProviderOption, providerIdForEngine, } from "../agent-provider-catalog.js";
+export { AgentProviderPicker, AgentProviderSetupForm, } from "./ProviderSetupForm.js";

package/dist/coding-tools/run-code.d.ts

@@ -30,6 +30,7 @@
  */
 import type { ActionRunContext } from "../action.js";
 import type { ActionEntry } from "../agent/production-agent.js";
+export type SandboxCodeMode = "run-code" | "tool-orchestration";
 export interface RunCodeOptions {
     /**
      * Extra tool names (beyond the default set) that the sandbox bridge will
@@ -54,6 +55,10 @@ export interface ExecuteSandboxCodeOptions {
     getActions: () => Record<string, ActionEntry>;
     /** Extra bridge tool names beyond the defaults. */
     extraBridgeTools?: Set<string>;
+    /** Host policy and helper surface to use inside the sandbox. */
+    mode?: SandboxCodeMode;
+    /** Maximum number of bridged child-tool calls for orchestration mode. */
+    maxToolCalls?: number;
     /** Request context (owner/org) applied to bridged tool calls. */
     context?: ActionRunContext;
 }