@agent-native/core 0.146.8 → 0.148.0

package/dist/client/extensions/ExtensionViewer.js

@@ -7,6 +7,7 @@ import { buildExtensionHtml } from "../../extensions/html-shell.js";
 import { extensionPath, isExtensionPathname } from "../../extensions/path.js";
 import { getThemeVars } from "../../extensions/theme.js";
 import { SESSION_REPLAY_IFRAME_ATTRIBUTE } from "../../session-replay-iframe-protocol.js";
+import { normalizeDocumentTitle } from "../../shared/document-title.js";
 import { sendToAgentChat } from "../agent-chat.js";
 import { AgentToggleButton } from "../AgentPanel.js";
 import { agentNativePath, appPath } from "../api-path.js";
@@ -68,7 +69,13 @@ function readExtensionTitleSuffix() {
     return match?.[1]?.trim() || null;
 }
 function extensionDocumentTitle(name, suffix) {
-    return suffix ? `${name} \u2014 ${suffix}` : `${name} \u2014 Extensions`;
+    const safeName = normalizeDocumentTitle(name, "Untitled extension");
+    const safeSuffix = suffix
+        ? normalizeDocumentTitle(suffix, "Extensions")
+        : null;
+    return safeSuffix
+        ? `${safeName} \u2014 ${safeSuffix}`
+        : `${safeName} \u2014 Extensions`;
 }
 function extensionRole(value) {
     return value === "owner" ||

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/resources/McpIntegrationDialog.js

@@ -9,7 +9,7 @@ import { useT } from "../i18n.js";
 import { cn } from "../utils.js";
 import { buildMcpOAuthStartUrl, createMcpIntegrationFormDefaults, filterMcpIntegrations, getMcpIntegrationApiFallback, getDefaultMcpIntegrations, isCustomMcpIntegrationEnabled, navigateToMcpOAuthStart, resolveMcpIntegrationScope, shouldOfferMcpIntegrationOrganizationScope, shouldOfferMcpOrganizationScope, } from "./mcp-integration-catalog.js";
 import { McpIntegrationLogo } from "./McpIntegrationLogo.js";
-import { formatMcpServerError, getMcpUrlValidationError, testMcpServerUrl, useMcpServers, } from "./use-mcp-servers.js";
+import { formatMcpServerError, getMcpUrlValidationError, useMcpServersApi, useMcpServers, } from "./use-mcp-servers.js";
 function parseHeaderLines(text) {
     const out = {};
     for (const line of text.split(/\r?\n/)) {
@@ -64,6 +64,7 @@ export function McpIntegrationDialog({ open, onOpenChange, initialIntegrationId
     const [error, setError] = useState(null);
     const [testResult, setTestResult] = useState(null);
     const inputRef = useRef(null);
+    const mcpApi = useMcpServersApi();
     const mcpServersQuery = useMcpServers();
     const defaultIntegrations = useMemo(() => integrations ?? getDefaultMcpIntegrations(), [integrations]);
     const customIntegrationEnabled = useMemo(() => isCustomMcpIntegrationEnabled(), []);
@@ -250,7 +251,7 @@ export function McpIntegrationDialog({ open, onOpenChange, initialIntegrationId
         setError(null);
         setTestResult(null);
         try {
-            const res = await testMcpServerUrl(trimmedUrl, parseHeaderLines(headersText));
+            const res = await mcpApi.test(trimmedUrl, parseHeaderLines(headersText));
             setTestResult(res.ok
                 ? {
                     ok: true,

package/dist/client/resources/McpServerDetail.js

@@ -9,9 +9,10 @@ import { IconPlugConnected, IconAlertTriangle, IconLoader2, IconCheck, IconTestP
  * delete and recreate if they need to change a URL or headers.
  */
 import { useState } from "react";
-import { agentNativePath } from "../api-path.js";
 import { cn } from "../utils.js";
+import { useMcpServersApi, } from "./use-mcp-servers.js";
 export function McpServerDetail({ server }) {
+    const mcpApi = useMcpServersApi();
     const [testing, setTesting] = useState(false);
     const [testResult, setTestResult] = useState(null);
     const headers = server.headers ? Object.keys(server.headers) : [];
@@ -19,17 +20,11 @@ export function McpServerDetail({ server }) {
         setTesting(true);
         setTestResult(null);
         try {
-            // We don't have the real header values client-side (redacted). The
-            // test-existing endpoint uses the stored headers, but there's no
-            // convenient way to hit it from here without the server id + scope,
-            // which we do have — so wire that up.
-            const res = await fetch(agentNativePath(`/_agent-native/mcp/servers/${encodeURIComponent(server.id)}/test?scope=${server.scope}`), {
-                method: "POST",
-                credentials: "include",
-                headers: { "Content-Type": "application/json" },
+            const result = await mcpApi.testExisting({
+                id: server.id,
+                scope: server.scope,
             });
-            const body = (await res.json().catch(() => ({})));
-            setTestResult(body.ok ? body : { ok: false, error: body.error });
+            setTestResult(result.ok ? result : { ok: false, error: result.error });
         }
         catch (err) {
             setTestResult({ ok: false, error: err?.message ?? String(err) });

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

@@ -7,3 +7,4 @@ export * from "./use-builtin-capabilities.js";
 export { DEFAULT_MCP_INTEGRATIONS, filterMcpIntegrations, findMcpIntegrationForText, getDefaultMcpIntegrations, isCustomMcpIntegrationEnabled, isMcpIntegrationCatalogAvailable, mergeDefaultMcpIntegrations, type DefaultMcpIntegration, } from "./mcp-integration-catalog.js";
 export { McpIntegrationDialog, type McpIntegrationDialogProps, } from "./McpIntegrationDialog.js";
 export { McpConnectionSuggestion, type McpConnectionSuggestionProps, type McpConnectionSuggestionVariant, } from "./McpConnectionSuggestion.js";
+export { McpServersApiProvider, useMcpServersApi, useMcpServers, useCreateMcpServer, useDeleteMcpServer, useReconnectMcpServer, testMcpServerUrl, type CreateMcpServerArgs, type McpServer, type McpServerScope, type McpServersApi, type McpServersList, type ReconnectMcpServerArgs, type TestMcpUrlResult, } from "./use-mcp-servers.js";

package/dist/client/resources/index.js

@@ -7,3 +7,4 @@ export * from "./use-builtin-capabilities.js";
 export { DEFAULT_MCP_INTEGRATIONS, filterMcpIntegrations, findMcpIntegrationForText, getDefaultMcpIntegrations, isCustomMcpIntegrationEnabled, isMcpIntegrationCatalogAvailable, mergeDefaultMcpIntegrations, } from "./mcp-integration-catalog.js";
 export { McpIntegrationDialog, } from "./McpIntegrationDialog.js";
 export { McpConnectionSuggestion, } from "./McpConnectionSuggestion.js";
+export { McpServersApiProvider, useMcpServersApi, useMcpServers, useCreateMcpServer, useDeleteMcpServer, useReconnectMcpServer, testMcpServerUrl, } from "./use-mcp-servers.js";

package/dist/client/resources/use-mcp-servers.d.ts

@@ -7,6 +7,7 @@
  * endpoints so the Workspace UI can list, create, and delete them with the
  * same keys/invalidations the old Settings panel used.
  */
+import { type ReactNode } from "react";
 export type McpServerScope = "user" | "org";
 export interface McpServer {
     id: string;
@@ -37,6 +38,25 @@ export interface McpServersList {
     orgId: string | null;
     role: string | null;
 }
+export interface McpServersApi {
+    list: () => Promise<McpServersList>;
+    create: (args: CreateMcpServerArgs) => Promise<McpServer>;
+    delete: (args: {
+        id: string;
+        scope: McpServerScope;
+    }) => Promise<void>;
+    reconnect: (args: ReconnectMcpServerArgs) => Promise<void>;
+    test: (url: string, headers?: Record<string, string>) => Promise<TestMcpUrlResult>;
+    testExisting: (args: {
+        id: string;
+        scope: McpServerScope;
+    }) => Promise<TestMcpUrlResult>;
+}
+export declare function McpServersApiProvider({ api, children, }: {
+    api: McpServersApi;
+    children: ReactNode;
+}): import("react").FunctionComponentElement<import("react").ProviderProps<McpServersApi | null>>;
+export declare function useMcpServersApi(): McpServersApi;
 export declare function useMcpServers(): import("@tanstack/react-query").UseQueryResult<NoInfer<McpServersList>, Error>;
 export interface CreateMcpServerArgs {
     scope: McpServerScope;

package/dist/client/resources/use-mcp-servers.js

@@ -8,54 +8,104 @@
  * same keys/invalidations the old Settings panel used.
  */
 import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import { createContext, createElement, useContext, } from "react";
 import { agentNativePath } from "../api-path.js";
 const ENDPOINT = agentNativePath("/_agent-native/mcp/servers");
 const LIST_KEY = ["mcp-servers"];
+const McpServersApiContext = createContext(null);
+export function McpServersApiProvider({ api, children, }) {
+    return createElement(McpServersApiContext.Provider, { value: api }, children);
+}
+export function useMcpServersApi() {
+    return useContext(McpServersApiContext) ?? defaultMcpServersApi;
+}
+async function listMcpServers() {
+    const res = await fetch(ENDPOINT, { credentials: "include" });
+    if (!res.ok)
+        throw new Error(`Failed to load (${res.status})`);
+    return (await res.json());
+}
+async function createMcpServer(args) {
+    const res = await fetch(ENDPOINT, {
+        method: "POST",
+        credentials: "include",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify(args),
+    });
+    const body = (await res.json().catch((error) => {
+        throw new Error("MCP create returned invalid JSON.", { cause: error });
+    }));
+    if (!res.ok || !body.ok) {
+        throw new Error(body.error || `Create failed (${res.status})`);
+    }
+    return body.server;
+}
+async function deleteMcpServer(args) {
+    const res = await fetch(`${ENDPOINT}/${encodeURIComponent(args.id)}?scope=${args.scope}`, {
+        method: "DELETE",
+        credentials: "include",
+        headers: { "Content-Type": "application/json" },
+    });
+    const body = (await res.json().catch((error) => {
+        throw new Error("MCP delete returned invalid JSON.", { cause: error });
+    }));
+    if (!res.ok || !body.ok) {
+        throw new Error(body.error || `Delete failed (${res.status})`);
+    }
+}
+async function reconnectMcpServer(args) {
+    const res = await fetch(reconnectMcpServerUrl(args), {
+        method: "POST",
+        credentials: "include",
+    });
+    const body = await readMcpMutationBody(res);
+    const error = typeof body?.error === "string" && body.error.trim()
+        ? body.error.trim()
+        : undefined;
+    if (!res.ok || body?.ok !== true) {
+        throw new Error(error || `Reconnect failed (${res.status})`);
+    }
+}
+async function testExistingMcpServer(args) {
+    const res = await fetch(agentNativePath(`/_agent-native/mcp/servers/${encodeURIComponent(args.id)}/test?scope=${args.scope}`), {
+        method: "POST",
+        credentials: "include",
+        headers: { "Content-Type": "application/json" },
+    });
+    const body = (await res.json().catch((error) => {
+        throw new Error("MCP test returned invalid JSON.", { cause: error });
+    }));
+    return res.ok ? body : { ok: false, error: body.error };
+}
+const defaultMcpServersApi = {
+    list: listMcpServers,
+    create: createMcpServer,
+    delete: deleteMcpServer,
+    reconnect: reconnectMcpServer,
+    test: testMcpServerUrl,
+    testExisting: testExistingMcpServer,
+};
 export function useMcpServers() {
+    const api = useMcpServersApi();
     return useQuery({
         queryKey: LIST_KEY,
-        queryFn: async () => {
-            const res = await fetch(ENDPOINT, { credentials: "include" });
-            if (!res.ok)
-                throw new Error(`Failed to load (${res.status})`);
-            return (await res.json());
-        },
+        queryFn: api.list,
         staleTime: 10_000,
     });
 }
 export function useCreateMcpServer() {
     const qc = useQueryClient();
+    const api = useMcpServersApi();
     return useMutation({
-        mutationFn: async (args) => {
-            const res = await fetch(ENDPOINT, {
-                method: "POST",
-                credentials: "include",
-                headers: { "Content-Type": "application/json" },
-                body: JSON.stringify(args),
-            });
-            const body = (await res.json().catch(() => ({})));
-            if (!res.ok || !body.ok) {
-                throw new Error(body.error || `Create failed (${res.status})`);
-            }
-            return body.server;
-        },
+        mutationFn: api.create,
         onSuccess: () => qc.invalidateQueries({ queryKey: LIST_KEY }),
     });
 }
 export function useDeleteMcpServer() {
     const qc = useQueryClient();
+    const api = useMcpServersApi();
     return useMutation({
-        mutationFn: async (args) => {
-            const res = await fetch(`${ENDPOINT}/${encodeURIComponent(args.id)}?scope=${args.scope}`, {
-                method: "DELETE",
-                credentials: "include",
-                headers: { "Content-Type": "application/json" },
-            });
-            const body = (await res.json().catch(() => ({})));
-            if (!res.ok || !body.ok) {
-                throw new Error(body.error || `Delete failed (${res.status})`);
-            }
-        },
+        mutationFn: api.delete,
         onSuccess: () => qc.invalidateQueries({ queryKey: LIST_KEY }),
     });
 }
@@ -75,23 +125,9 @@ function reconnectMcpServerUrl(args) {
 }
 export function useReconnectMcpServer() {
     const qc = useQueryClient();
+    const api = useMcpServersApi();
     return useMutation({
-        mutationFn: async (args) => {
-            const res = await fetch(reconnectMcpServerUrl(args), {
-                method: "POST",
-                credentials: "include",
-            });
-            const body = await readMcpMutationBody(res);
-            const error = typeof body?.error === "string" && body.error.trim()
-                ? body.error.trim()
-                : undefined;
-            if (!res.ok) {
-                throw new Error(error || `Reconnect failed (${res.status})`);
-            }
-            if (body?.ok !== true) {
-                throw new Error(error || "Reconnect failed");
-            }
-        },
+        mutationFn: api.reconnect,
         onSuccess: () => qc.invalidateQueries({ queryKey: LIST_KEY }),
     });
 }

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