@agent-native/core 0.147.0 → 0.148.0

package/dist/client/agent-provider-catalog.d.ts

@@ -0,0 +1,20 @@
+export type AgentProviderId = "anthropic" | "openai" | "openrouter" | "google" | "groq" | "mistral" | "cohere" | "ollama";
+export interface AgentProviderOption {
+    id: AgentProviderId;
+    engine: string;
+    label: string;
+    description: string;
+    key?: string;
+    endpointKey?: string;
+    placeholder?: string;
+    defaultModel: string;
+    supportedModels: readonly string[];
+    docsUrl?: string;
+    supportsCustomModel?: boolean;
+    supportsEndpoint?: boolean;
+    endpointPlaceholder?: string;
+    kind: "cloud" | "gateway" | "local";
+}
+export declare const AGENT_PROVIDER_CATALOG: readonly AgentProviderOption[];
+export declare function getAgentProviderOption(provider: AgentProviderId): AgentProviderOption;
+export declare function providerIdForEngine(engine: string): AgentProviderId | null;

package/dist/client/agent-provider-catalog.js

@@ -0,0 +1,100 @@
+import { OLLAMA_BASE_URL_ENV_VAR, OPENAI_BASE_URL_ENV_VAR, PROVIDER_ENV_META, } from "../agent/engine/provider-env-vars.js";
+import { AI_SDK_MODEL_CONFIG, ANTHROPIC_MODEL_CONFIG, } from "../agent/model-config.js";
+const PROVIDER_LABELS = {
+    anthropic: "Anthropic",
+    openai: "OpenAI",
+    openrouter: "OpenRouter",
+    google: "Google Gemini",
+    groq: "Groq",
+    mistral: "Mistral",
+    cohere: "Cohere",
+    ollama: "Ollama",
+};
+const PROVIDER_DESCRIPTIONS = {
+    anthropic: "Claude models with your own API key.",
+    openai: "GPT models and OpenAI-compatible gateways.",
+    openrouter: "One key for hundreds of hosted models.",
+    google: "Gemini models with a Google AI key.",
+    groq: "Fast inference for open models.",
+    mistral: "Mistral models through the Mistral API.",
+    cohere: "Command models through the Cohere API.",
+    ollama: "Run local models from Ollama on your machine.",
+};
+const PROVIDER_DOCS = {
+    anthropic: "https://console.anthropic.com/settings/keys",
+    openai: "https://platform.openai.com/api-keys",
+    openrouter: "https://openrouter.ai/keys",
+    google: "https://aistudio.google.com/apikey",
+    groq: "https://console.groq.com/keys",
+    mistral: "https://console.mistral.ai/api-keys/",
+    cohere: "https://dashboard.cohere.com/api-keys",
+};
+const PROVIDER_ORDER = [
+    "openrouter",
+    "ollama",
+    "anthropic",
+    "openai",
+    "google",
+    "groq",
+    "mistral",
+    "cohere",
+];
+function modelConfig(provider) {
+    if (provider === "anthropic")
+        return ANTHROPIC_MODEL_CONFIG;
+    return AI_SDK_MODEL_CONFIG[provider];
+}
+export const AGENT_PROVIDER_CATALOG = PROVIDER_ORDER.map((id) => {
+    const config = modelConfig(id);
+    const envMeta = PROVIDER_ENV_META[id];
+    const isOllama = id === "ollama";
+    return {
+        id,
+        engine: id === "anthropic" ? "anthropic" : `ai-sdk:${id}`,
+        label: PROVIDER_LABELS[id],
+        description: PROVIDER_DESCRIPTIONS[id],
+        ...(envMeta
+            ? { key: envMeta.envVar, placeholder: envMeta.placeholder }
+            : {}),
+        ...(id === "openai"
+            ? { endpointKey: OPENAI_BASE_URL_ENV_VAR }
+            : isOllama
+                ? { endpointKey: OLLAMA_BASE_URL_ENV_VAR }
+                : {}),
+        defaultModel: config.defaultModel,
+        supportedModels: config.supportedModels,
+        ...(PROVIDER_DOCS[id] ? { docsUrl: PROVIDER_DOCS[id] } : {}),
+        ...(id === "openrouter" || isOllama ? { supportsCustomModel: true } : {}),
+        ...(id === "openai" || isOllama
+            ? {
+                supportsEndpoint: true,
+                endpointPlaceholder: isOllama
+                    ? "http://localhost:11434"
+                    : "https://gateway.example/v1",
+            }
+            : {}),
+        kind: isOllama
+            ? "local"
+            : id === "openrouter"
+                ? "gateway"
+                : "cloud",
+    };
+});
+export function getAgentProviderOption(provider) {
+    const option = AGENT_PROVIDER_CATALOG.find((item) => item.id === provider);
+    if (!option)
+        throw new Error(`Unknown AI provider: ${provider}`);
+    return option;
+}
+export function providerIdForEngine(engine) {
+    if (engine === "anthropic" || engine === "ai-sdk:anthropic") {
+        return "anthropic";
+    }
+    if (engine.startsWith("ai-sdk:")) {
+        const provider = engine.slice("ai-sdk:".length);
+        if (AGENT_PROVIDER_CATALOG.some((option) => option.id === provider)) {
+            return provider;
+        }
+    }
+    return null;
+}

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

@@ -45,6 +45,7 @@ export { questionFormSchema, questionFormMdx, visualQuestionsSchema, visualQuest
 export { diagramBlock, DiagramRead, DiagramEdit } from "./library/diagram.js";
 export { diagramSchema, diagramMdx, type DiagramData, type DiagramNode, type DiagramEdge, type DiagramNote, } from "./library/diagram.config.js";
 export { wireframeBlock, WireframeBlock, WireframeEditor, } from "./library/wireframe.js";
+export { sanitizeDiagramHtml, sanitizeWireframeCss, sanitizeWireframeHtml, scopeDesignCss, } from "./library/sanitize-html.js";
 export { wireframeSchema, wireframeMdx, createStableWireframeNodeId, WIREFRAME_SURFACES, WIREFRAME_EL_NAMES, type WireframeData, type WireframeNode, type WireframeElName, type WireframeTone, type WireframeSurface, type WireframeRenderMode, } from "./library/wireframe.config.js";
 export { Screen, renderNode, renderNodes, hasRenderer, NODE_REGISTRY, KitConfigContext, RoughOverlay, HTML_ROUGH_SELECTOR, useWireframeStyle, setWireframeStyle, toggleWireframeStyle, useIsDark, type WireframeStyle, } from "./library/wireframe-kit.js";
 export { renderWireframeIconHtml } from "./library/wireframe-icons.js";

package/dist/client/blocks/index.js

@@ -56,6 +56,7 @@ export { questionFormSchema, questionFormMdx, visualQuestionsSchema, visualQuest
 export { diagramBlock, DiagramRead, DiagramEdit } from "./library/diagram.js";
 export { diagramSchema, diagramMdx, } from "./library/diagram.config.js";
 export { wireframeBlock, WireframeBlock, WireframeEditor, } from "./library/wireframe.js";
+export { sanitizeDiagramHtml, sanitizeWireframeCss, sanitizeWireframeHtml, scopeDesignCss, } from "./library/sanitize-html.js";
 export { wireframeSchema, wireframeMdx, createStableWireframeNodeId, WIREFRAME_SURFACES, WIREFRAME_EL_NAMES, } from "./library/wireframe.config.js";
 export { Screen, renderNode, renderNodes, hasRenderer, NODE_REGISTRY, KitConfigContext, RoughOverlay, HTML_ROUGH_SELECTOR, useWireframeStyle, setWireframeStyle, toggleWireframeStyle, useIsDark, } from "./library/wireframe-kit.js";
 export { renderWireframeIconHtml } from "./library/wireframe-icons.js";

package/dist/client/chat/run-recovery.js

@@ -5,11 +5,11 @@ import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-run
 // by AssistantChatInner.
 import { IconLoader2, IconCheck, IconCopy, IconX, IconChevronDown, IconGitFork, IconGauge, IconSettings, IconArrowRight, IconAlertTriangle, IconPlayerPlay, IconRefresh, IconPlus, IconClipboardList, } from "@tabler/icons-react";
 import { useState, useEffect, useCallback, useRef } from "react";
-import { saveAgentEngineApiKey, } from "../agent-engine-key.js";
 import { agentNativePath } from "../api-path.js";
 import { writeClipboardText } from "../clipboard.js";
 import { isProviderAuthenticationError } from "../error-format.js";
 import { useT } from "../i18n.js";
+import { AgentProviderSetupForm } from "../settings/ProviderSetupForm.js";
 import { useBuilderConnectFlow } from "../settings/useBuilderStatus.js";
 import { cn } from "../utils.js";
 // ─── Metadata extractors ──────────────────────────────────────────────────────
@@ -132,65 +132,21 @@ export function BuilderConnectCta({ variant = "primary", onConnected, }) {
     return (_jsxs("div", { className: containerClass, children: [_jsxs("div", { className: "min-w-0 flex-1", children: [_jsx("div", { className: "text-xs font-medium text-foreground", children: "Connect Builder.io" }), _jsx("p", { className: "text-[11px] text-muted-foreground mt-0.5 max-w-[220px]", children: "Free credits for LLM, hosting, and more \u2014 no API key needed" }), error && _jsx("p", { className: "mt-1 text-[10px] text-destructive", children: error })] }), _jsx("button", { type: "button", onClick: () => start(), disabled: connecting, className: "ml-auto inline-flex items-center gap-1 shrink-0 rounded-md bg-foreground px-3 py-1.5 text-[11px] font-medium no-underline text-background hover:opacity-90 disabled:opacity-60 disabled:cursor-wait", "aria-busy": connecting, children: connecting ? (_jsxs(_Fragment, { children: [_jsx(IconLoader2, { size: 10, className: "animate-spin" }), "Waiting\u2026"] })) : ("Connect") })] }));
 }
 // ─── ApiKeyConnect ────────────────────────────────────────────────────────────
-const API_KEY_PROVIDERS = [
-    { value: "anthropic", label: "Anthropic", placeholder: "sk-ant-…" },
-    { value: "openai", label: "OpenAI", placeholder: "sk-…" },
-];
 export function ApiKeyConnect({ onConnected }) {
-    const t = useT();
-    const [provider, setProvider] = useState("anthropic");
-    const [apiKey, setApiKey] = useState("");
-    const [saving, setSaving] = useState(false);
-    const [error, setError] = useState(null);
-    const active = API_KEY_PROVIDERS.find((p) => p.value === provider);
-    const handleSave = useCallback(async () => {
-        if (!apiKey.trim() || saving)
-            return;
-        setSaving(true);
-        setError(null);
-        try {
-            await saveAgentEngineApiKey({ provider, apiKey });
-            setApiKey("");
-            onConnected?.();
-        }
-        catch (err) {
-            setError(err instanceof Error ? err.message : "Could not save the key.");
-        }
-        finally {
-            setSaving(false);
-        }
-    }, [apiKey, onConnected, provider, saving]);
-    return (_jsxs("div", { className: "rounded-md border border-border bg-background/60 p-3", children: [_jsx("div", { className: "mb-2 text-[11px] font-medium text-foreground", children: t("agentPanel.addOwnKeys", { defaultValue: "Add your own keys" }) }), _jsx("p", { className: "mb-2.5 text-[11px] leading-relaxed text-muted-foreground", children: "Stored securely for this app only." }), _jsx("div", { role: "tablist", "aria-label": "API key provider", className: "mb-2 inline-flex rounded-md border border-border bg-muted/40 p-0.5", children: API_KEY_PROVIDERS.map((option) => {
-                    const selected = option.value === provider;
-                    return (_jsx("button", { type: "button", role: "tab", "aria-selected": selected, onClick: () => {
-                            setProvider(option.value);
-                            setError(null);
-                        }, className: cn("rounded px-2.5 py-1 text-[11px] font-medium transition-colors", selected
-                            ? "bg-background text-foreground shadow-sm"
-                            : "text-muted-foreground hover:text-foreground"), children: option.label }, option.value));
-                }) }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx("input", { type: "password", value: apiKey, autoComplete: "off", spellCheck: false, placeholder: active.placeholder, onChange: (e) => {
-                            setApiKey(e.target.value);
-                            if (error)
-                                setError(null);
-                        }, onKeyDown: (e) => {
-                            if (e.key === "Enter") {
-                                e.preventDefault();
-                                void handleSave();
-                            }
-                        }, className: "h-8 min-w-0 flex-1 rounded-md border border-input bg-background px-2.5 text-[12px] text-foreground placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-1 focus:ring-offset-background" }), _jsx("button", { type: "button", onClick: handleSave, disabled: !apiKey.trim() || saving, className: "inline-flex h-8 shrink-0 items-center gap-1 rounded-md bg-foreground px-3 text-[11px] font-medium text-background hover:opacity-90 disabled:cursor-not-allowed disabled:opacity-60", children: saving ? (_jsxs(_Fragment, { children: [_jsx(IconLoader2, { size: 11, className: "animate-spin" }), "Saving\u2026"] })) : ("Save") })] }), error ? (_jsx("p", { className: "mt-2 text-[11px] text-destructive", children: error })) : null] }));
+    return (_jsx(AgentProviderSetupForm, { onConnected: () => onConnected?.(), layout: "compact", showTitle: false }));
 }
 export function BuilderSetupContent({ onConnected, layout = "default", }) {
     const t = useT();
     const [keyOpen, setKeyOpen] = useState(false);
     const sidebarLayout = layout === "sidebar";
     return (_jsxs("div", { className: cn("agent-builder-setup-content", sidebarLayout && "agent-builder-setup-card--sidebar"), children: [_jsxs("div", { className: cn("agent-builder-setup-card__content flex flex-col sm:flex-row sm:items-center sm:justify-between", sidebarLayout ? "gap-2" : "gap-3"), children: [_jsxs("div", { className: "agent-builder-setup-card__copy min-w-0", children: [_jsx("h3", { className: "text-[13px] font-medium text-foreground", children: t("agentPanel.connectAi", { defaultValue: "Connect AI" }) }), _jsx("p", { className: "mt-0.5 text-[11px] leading-relaxed text-muted-foreground", children: t("agentPanel.builderOrOwnKeys", {
-                                    defaultValue: "Use Builder.io (free credits), or add your own provider keys.",
+                                    defaultValue: "Choose Builder.io or custom keys.",
                                 }) })] }), _jsxs("div", { className: cn("agent-builder-setup-card__actions flex shrink-0", sidebarLayout
                             ? "flex-col items-start gap-1 sm:items-center"
                             : "flex-nowrap items-center gap-2"), children: [_jsx(BuilderConnectCta, { variant: "compact", onConnected: onConnected }), _jsx("button", { type: "button", onClick: () => setKeyOpen((open) => !open), className: cn("agent-builder-setup-card__key-button inline-flex shrink-0 items-center whitespace-nowrap rounded-md text-[11px] font-medium", sidebarLayout
                                     ? "h-7 border-0 bg-transparent px-0 text-muted-foreground hover:bg-transparent hover:text-foreground"
                                     : "h-8 border border-border bg-background px-3 text-foreground hover:bg-accent"), "aria-expanded": keyOpen, children: t("agentPanel.addOwnKeys", {
-                                    defaultValue: "Add your own keys",
+                                    defaultValue: "Custom keys",
                                 }) })] })] }), keyOpen ? (_jsx("div", { className: "mt-3", children: _jsx(ApiKeyConnect, { onConnected: onConnected }) })) : null] }));
 }
 export function BuilderSetupCard({ onConnected, bouncePulse, fullWidth, layout = "default", }) {

package/dist/client/chat-first.js

@@ -235,16 +235,17 @@ function browserStorage() {
 }
 export function readChatFirstModeState(storage = browserStorage()) {
     if (!storage) {
-        return { enabled: false, availability: "unavailable" };
+        return { enabled: true, availability: "unavailable" };
     }
     try {
+        const stored = storage.getItem(CHAT_FIRST_MODE_STORAGE_KEY);
         return {
-            enabled: storage.getItem(CHAT_FIRST_MODE_STORAGE_KEY) === "true",
+            enabled: stored == null ? true : stored === "true",
             availability: "available",
         };
     }
     catch {
-        return { enabled: false, availability: "unavailable" };
+        return { enabled: true, availability: "unavailable" };
     }
 }
 export function readChatFirstMode(storage = browserStorage()) {

package/dist/client/i18n.d.ts

@@ -3,6 +3,9 @@ import { type LocaleCode, type LocaleMetadata, type LocalePreference, type Local
 export { DEFAULT_LOCALE, LOCALE_HYDRATION_GLOBAL, LOCALE_METADATA, LOCALE_STORAGE_KEY, SUPPORTED_LOCALES, localeDirection, normalizeLocaleCode, normalizeLocalePreference, normalizeLocalizationPreference, resolveLocaleFromCandidates, resolveLocaleFromPreference, type LocaleCode, type LocaleMetadata, type LocalePreference, type LocalizationPreference, } from "../localization/shared.js";
 export { getLocaleInitScript } from "../localization/server.js";
 export type LocaleMessages = Record<string, unknown>;
+export type AgentNativeI18nLocaleLoader = () => Promise<LocaleMessages | {
+    default: LocaleMessages;
+}>;
 export interface LocaleHydrationPayload {
     locale?: LocaleCode;
     preference?: LocalizationPreference;
@@ -21,6 +24,17 @@ export interface AgentNativeI18nCatalog {
      */
     supportedLocales?: readonly LocaleCode[];
 }
+export declare function createAgentNativeI18nCatalog(args: {
+    messages: LocaleMessages;
+    localeLoaders: Partial<Record<LocaleCode, AgentNativeI18nLocaleLoader>>;
+    namespace?: string;
+    sourceLocale?: LocaleCode;
+    supportedLocales?: readonly LocaleCode[];
+}): AgentNativeI18nCatalog & {
+    messages: LocaleMessages;
+    sourceLocale: LocaleCode;
+    loadMessages: (locale: LocaleCode) => Promise<LocaleMessages | null>;
+};
 export interface AgentNativeI18nProviderProps {
     children: React.ReactNode;
     catalog?: AgentNativeI18nCatalog;

package/dist/client/i18n.js

@@ -12,6 +12,24 @@ import { callAction } from "./use-action.js";
 import { cn } from "./utils.js";
 export { DEFAULT_LOCALE, LOCALE_HYDRATION_GLOBAL, LOCALE_METADATA, LOCALE_STORAGE_KEY, SUPPORTED_LOCALES, localeDirection, normalizeLocaleCode, normalizeLocalePreference, normalizeLocalizationPreference, resolveLocaleFromCandidates, resolveLocaleFromPreference, } from "../localization/shared.js";
 export { getLocaleInitScript } from "../localization/server.js";
+function isAgentNativeI18nModuleNamespace(value) {
+    return Object.prototype.toString.call(value) === "[object Module]";
+}
+export function createAgentNativeI18nCatalog(args) {
+    return {
+        namespace: args.namespace,
+        sourceLocale: args.sourceLocale ?? DEFAULT_LOCALE,
+        messages: args.messages,
+        supportedLocales: args.supportedLocales,
+        loadMessages: async (locale) => {
+            const loader = args.localeLoaders[locale];
+            if (!loader)
+                return null;
+            const loaded = await loader();
+            return isAgentNativeI18nModuleNamespace(loaded) ? loaded.default : loaded;
+        },
+    };
+}
 const LocaleContext = globalThis.__AGENT_NATIVE_LOCALE_CONTEXT__ ??
     (globalThis.__AGENT_NATIVE_LOCALE_CONTEXT__ =
         createContext(null));

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

@@ -0,0 +1,21 @@
+import { type AgentProviderId, type AgentProviderOption } from "../agent-provider-catalog.js";
+export interface AgentProviderPickerProps {
+    value: AgentProviderId;
+    onChange: (provider: AgentProviderId) => void;
+    options?: readonly AgentProviderOption[];
+    configuredProviders?: ReadonlySet<AgentProviderId>;
+    disabled?: boolean;
+    className?: string;
+    layout?: "compact" | "page";
+}
+export declare function AgentProviderPicker({ value, onChange, options, configuredProviders, disabled, className, layout, }: AgentProviderPickerProps): import("react").JSX.Element;
+export interface AgentProviderSetupFormProps {
+    initialProvider?: AgentProviderId;
+    configuredProviders?: ReadonlySet<AgentProviderId>;
+    onConnected?: (provider: AgentProviderId) => void;
+    scope?: "user" | "org";
+    layout?: "compact" | "page";
+    showTitle?: boolean;
+    className?: string;
+}
+export declare function AgentProviderSetupForm({ initialProvider, configuredProviders, onConnected, scope, layout, showTitle, className, }: AgentProviderSetupFormProps): import("react").JSX.Element;

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] })] }));
+}