@agent-native/core 0.146.8 → 0.148.0

package/dist/client/agent-engine-key.d.ts

@@ -8,8 +8,9 @@
  * LLM settings panel does — UI code should call this instead of hand-writing
  * a fetch to framework routes.
  */
+import { type AgentProviderId } from "./agent-provider-catalog.js";
 /** Providers that can be configured with a single pasted API key. */
-export type AgentEngineProvider = "anthropic" | "openai";
+export type AgentEngineProvider = AgentProviderId;
 export interface SaveAgentEngineApiKeyOptions {
     provider?: AgentEngineProvider;
     key?: string;
@@ -32,8 +33,17 @@ export interface SaveAgentEngineProviderSettingsOptions {
  */
 export declare function saveAgentEngineApiKey({ provider, key, apiKey, scope, }: SaveAgentEngineApiKeyOptions): Promise<void>;
 /**
- * Persist provider-specific settings for the current owner. This intentionally
- * stays narrow: API keys for built-in BYOK providers, plus OpenAI's optional
- * compatible endpoint URL. Values are stored server-side in scoped secrets.
+ * Persist provider-specific settings for the current owner. This covers
+ * built-in BYOK provider keys plus optional OpenAI-compatible and Ollama
+ * endpoint URLs. Values are stored server-side in scoped secrets.
  */
 export declare function saveAgentEngineProviderSettings({ provider, key, apiKey, baseUrl, clearBaseUrl, scope, }: SaveAgentEngineProviderSettingsOptions): Promise<void>;
+/**
+ * Select the provider and model for the next conversation. This is separate
+ * from saving credentials so keyless local providers such as Ollama can use
+ * the same setup surface as API-key providers.
+ */
+export declare function setAgentEngineProvider({ provider, model, }: {
+    provider: AgentEngineProvider;
+    model?: string;
+}): Promise<void>;

package/dist/client/agent-engine-key.js

@@ -8,10 +8,15 @@
  * LLM settings panel does — UI code should call this instead of hand-writing
  * a fetch to framework routes.
  */
+import { OLLAMA_BASE_URL_ENV_VAR, PROVIDER_ENV_META, } from "../agent/engine/provider-env-vars.js";
+import { getAgentProviderOption, } from "./agent-provider-catalog.js";
 import { agentNativePath } from "./api-path.js";
 const PROVIDER_ENV_VAR = {
-    anthropic: "ANTHROPIC_API_KEY",
-    openai: "OPENAI_API_KEY",
+    ...Object.fromEntries(Object.entries(PROVIDER_ENV_META).map(([provider, meta]) => [
+        provider,
+        meta.envVar,
+    ])),
+    ollama: OLLAMA_BASE_URL_ENV_VAR,
 };
 /** Event other parts of the agent UI listen for to re-check the LLM gate. */
 const CONFIGURED_CHANGED_EVENT = "agent-engine:configured-changed";
@@ -40,9 +45,9 @@ export async function saveAgentEngineApiKey({ provider, key, apiKey, scope, }) {
     await saveAgentEngineProviderSettings({ provider, key, apiKey, scope });
 }
 /**
- * Persist provider-specific settings for the current owner. This intentionally
- * stays narrow: API keys for built-in BYOK providers, plus OpenAI's optional
- * compatible endpoint URL. Values are stored server-side in scoped secrets.
+ * Persist provider-specific settings for the current owner. This covers
+ * built-in BYOK provider keys plus optional OpenAI-compatible and Ollama
+ * endpoint URLs. Values are stored server-side in scoped secrets.
  */
 export async function saveAgentEngineProviderSettings({ provider, key, apiKey, baseUrl, clearBaseUrl, scope, }) {
     const trimmed = apiKey?.trim() ?? "";
@@ -74,3 +79,44 @@ export async function saveAgentEngineProviderSettings({ provider, key, apiKey, b
     }
     dispatchConfiguredChanged();
 }
+/**
+ * Select the provider and model for the next conversation. This is separate
+ * from saving credentials so keyless local providers such as Ollama can use
+ * the same setup surface as API-key providers.
+ */
+export async function setAgentEngineProvider({ provider, model, }) {
+    const option = getAgentProviderOption(provider);
+    const res = await fetch(agentNativePath("/_agent-native/actions/manage-agent-engine"), {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({
+            action: "set",
+            engine: option.engine,
+            ...(model?.trim() ? { model: model.trim() } : {}),
+        }),
+    });
+    if (!res.ok) {
+        const message = await res
+            .json()
+            .then((body) => typeof body?.error === "string"
+            ? body.error
+            : typeof body?.result === "string"
+                ? body.result
+                : undefined)
+            .catch(() => undefined);
+        throw new Error(message ?? `Could not select ${option.label}.`);
+    }
+    const body = await res
+        .json()
+        .catch(() => null);
+    const actionResult = body?.result;
+    if (typeof body?.error === "string" ||
+        (typeof actionResult === "string" &&
+            /^(Error|Warning):/i.test(actionResult))) {
+        throw new Error(body.error ??
+            (typeof actionResult === "string"
+                ? actionResult
+                : `Could not select ${option.label}.`));
+    }
+    dispatchConfiguredChanged();
+}

package/dist/client/agent-page/AgentTabsPage.d.ts

@@ -3,6 +3,7 @@ import type { ResourceView } from "../resources/ResourcesPanel.js";
 import type { SettingsTabItem } from "../settings/SettingsTabsPage.js";
 import type { AgentPageTabProps } from "./types.js";
 export declare const AGENT_RESOURCE_DOCS_HREF: Record<ResourceView, string>;
+export declare function ConnectionsTab({ canManageOrg, }?: Partial<AgentPageTabProps>): import("react").JSX.Element;
 export declare const AGENT_ACCESS_DOCS_HREF: {
     readonly mcp: "https://agent-native.com/docs/mcp-protocol";
     readonly a2a: "https://agent-native.com/docs/a2a-protocol";

package/dist/client/agent-page/AgentTabsPage.js

@@ -113,7 +113,7 @@ function ServerStatus({ server }) {
     }
     return (_jsx("span", { className: "text-[11px] text-muted-foreground", children: "Status unknown" }));
 }
-function ConnectionsTab({ canManageOrg = false }) {
+export function ConnectionsTab({ canManageOrg, } = {}) {
     const t = useT();
     const serversQuery = useMcpServers();
     const createServer = useCreateMcpServer();
@@ -123,8 +123,9 @@ function ConnectionsTab({ canManageOrg = false }) {
     const [deleteTarget, setDeleteTarget] = useState(null);
     const [error, setError] = useState(null);
     const data = serversQuery.data;
+    const resolvedCanManageOrg = canManageOrg ?? (data?.role === "owner" || data?.role === "admin");
     const hasOrg = Boolean(data?.orgId);
-    const canCreateOrgMcp = hasOrg && canManageOrg;
+    const canCreateOrgMcp = hasOrg && resolvedCanManageOrg;
     const onCreateMcpServer = useCallback(async (args) => {
         if (args.scope === "org" && !canCreateOrgMcp) {
             throw new Error("Only organization admins can add organization agent integrations.");
@@ -152,7 +153,7 @@ function ConnectionsTab({ canManageOrg = false }) {
     };
     const renderServer = (server) => {
         const key = `${server.scope}:${server.id}`;
-        const canDelete = server.scope === "user" || canManageOrg;
+        const canDelete = server.scope === "user" || resolvedCanManageOrg;
         const selected = selectedServer?.id === server.id && selectedServer.scope === server.scope;
         return (_jsxs("div", { className: cn("group/connection-row py-4 transition-colors first:pt-5 last:pb-5", selected && "bg-accent/20"), children: [_jsxs("div", { className: "flex items-start gap-3", children: [_jsxs("button", { type: "button", onClick: () => setSelectedServer(selected ? null : server), className: "min-w-0 flex-1 cursor-pointer text-start", children: [_jsx("div", { className: "flex flex-wrap items-center gap-2", children: _jsx("span", { className: "truncate text-sm font-medium text-foreground", children: server.name }) }), _jsx("code", { className: "mt-1 block truncate text-[11px] text-muted-foreground", children: server.url }), _jsxs("div", { className: "mt-2 flex items-center gap-2", children: [_jsx(ServerStatus, { server: server }), server.description && (_jsx("span", { className: "truncate text-[11px] text-muted-foreground/70", children: server.description }))] })] }), canDelete && (_jsx("button", { type: "button", onClick: () => void removeServer(server), disabled: deleteServer.isPending, className: cn("cursor-pointer rounded-md px-2 py-1 text-[11px] font-medium text-muted-foreground hover:bg-destructive/10 hover:text-destructive", deleteTarget === key && "bg-destructive/10 text-destructive"), children: deleteTarget === key ? "Confirm" : "Delete" }))] }), selected && (_jsx("div", { className: "mt-3 border-t border-border/70 pt-3", children: _jsx(McpServerDetail, { server: server }) }))] }, key));
     };

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/app-providers.d.ts

@@ -108,6 +108,8 @@ export interface AppProvidersProps {
      * its own scoped token. Public/SEO routes should use `isPublicPath` instead.
      */
     sessionBypass?: boolean;
+    /** Fallback used if route metadata leaves the browser title empty or structured. */
+    documentTitleFallback?: string;
     children: React.ReactNode;
 }
-export declare function AppProviders({ queryClient, isPublicPath, clientOnlyFallback, sessionBypass, defaultTheme, themeAttribute, tooltipDelayDuration, toaster, disableThemeTransitions, i18n, children, }: AppProvidersProps): React.JSX.Element;
+export declare function AppProviders({ queryClient, isPublicPath, clientOnlyFallback, sessionBypass, defaultTheme, themeAttribute, tooltipDelayDuration, toaster, disableThemeTransitions, i18n, documentTitleFallback, children, }: AppProvidersProps): React.JSX.Element;

package/dist/client/app-providers.js

@@ -52,7 +52,9 @@ import { Toaster } from "@agent-native/toolkit/ui/sonner";
 import { TooltipProvider } from "@radix-ui/react-tooltip";
 import { QueryClientProvider } from "@tanstack/react-query";
 import { ThemeProvider } from "next-themes";
+import { useEffect, useRef } from "react";
 import { useInRouterContext } from "react-router";
+import { isHumanReadableDocumentTitle, normalizeDocumentTitle, } from "../shared/document-title.js";
 import { ClientOnly } from "./ClientOnly.js";
 import { DefaultSpinner } from "./DefaultSpinner.js";
 import { AgentNativeI18nProvider, } from "./i18n.js";
@@ -67,14 +69,57 @@ function RoutedAppEnhancements() {
         return null;
     return (_jsxs(_Fragment, { children: [_jsx(AgentNativeRouteWarmup, {}), _jsx(RouteTransitionIndicator, {})] }));
 }
-function ProvidersInner({ queryClient, defaultTheme = "system", themeAttribute = "class", tooltipDelayDuration, toaster = DEFAULT_TOASTER, disableThemeTransitions = true, i18n, children, }) {
+function readDocumentTitleFallback() {
+    const selectors = [
+        'meta[name="application-name"]',
+        'meta[name="apple-mobile-web-app-title"]',
+        'meta[property="og:site_name"]',
+    ];
+    const metadataTitle = selectors
+        .map((selector) => document.querySelector(selector)?.content ?? "")
+        .find((title) => isHumanReadableDocumentTitle(title));
+    return normalizeDocumentTitle(metadataTitle, "Agent Native");
+}
+/** Repairs route metadata that would otherwise expose a structured payload in the tab. */
+function DocumentTitleGuard({ fallbackTitle }) {
+    const initialTitleRef = useRef(null);
+    if (initialTitleRef.current === null && typeof document !== "undefined") {
+        const initialTitle = document.title.trim();
+        if (isHumanReadableDocumentTitle(initialTitle)) {
+            initialTitleRef.current = initialTitle;
+        }
+    }
+    useEffect(() => {
+        let lastKnownTitle = normalizeDocumentTitle(initialTitleRef.current ?? fallbackTitle ?? readDocumentTitleFallback(), fallbackTitle ?? "Agent Native");
+        const repairTitle = () => {
+            const currentTitle = document.title.trim();
+            if (isHumanReadableDocumentTitle(currentTitle)) {
+                lastKnownTitle = currentTitle;
+                return;
+            }
+            const nextTitle = normalizeDocumentTitle(lastKnownTitle, "Agent Native");
+            if (currentTitle !== nextTitle)
+                document.title = nextTitle;
+        };
+        repairTitle();
+        const observer = new MutationObserver(repairTitle);
+        observer.observe(document.head, {
+            characterData: true,
+            childList: true,
+            subtree: true,
+        });
+        return () => observer.disconnect();
+    }, [fallbackTitle]);
+    return null;
+}
+function ProvidersInner({ queryClient, defaultTheme = "system", themeAttribute = "class", tooltipDelayDuration, toaster = DEFAULT_TOASTER, disableThemeTransitions = true, i18n, documentTitleFallback, children, }) {
     const localizedChildren = i18n === false ? (children) : (_jsx(AgentNativeI18nProvider, { ...(i18n ?? {}), children: children }));
-    return (_jsx(QueryClientProvider, { client: queryClient, children: _jsx(ThemeProvider, { attribute: themeAttribute, defaultTheme: defaultTheme, enableSystem: true, disableTransitionOnChange: disableThemeTransitions, children: _jsxs(TooltipProvider, { delayDuration: tooltipDelayDuration, children: [localizedChildren, _jsx(RuntimeConfigNotice, {}), _jsx(RoutedAppEnhancements, {}), toaster] }) }) }));
+    return (_jsx(QueryClientProvider, { client: queryClient, children: _jsx(ThemeProvider, { attribute: themeAttribute, defaultTheme: defaultTheme, enableSystem: true, disableTransitionOnChange: disableThemeTransitions, children: _jsxs(TooltipProvider, { delayDuration: tooltipDelayDuration, children: [localizedChildren, _jsx(DocumentTitleGuard, { fallbackTitle: documentTitleFallback }), _jsx(RuntimeConfigNotice, {}), _jsx(RoutedAppEnhancements, {}), toaster] }) }) }));
 }
-export function AppProviders({ queryClient, isPublicPath = false, clientOnlyFallback, sessionBypass = false, defaultTheme, themeAttribute, tooltipDelayDuration, toaster, disableThemeTransitions, i18n, children, }) {
+export function AppProviders({ queryClient, isPublicPath = false, clientOnlyFallback, sessionBypass = false, defaultTheme, themeAttribute, tooltipDelayDuration, toaster, disableThemeTransitions, i18n, documentTitleFallback, children, }) {
     const fallback = clientOnlyFallback ?? _jsx(DefaultSpinner, {});
     if (isPublicPath) {
-        return (_jsx(ProvidersInner, { queryClient: queryClient, defaultTheme: defaultTheme, themeAttribute: themeAttribute, tooltipDelayDuration: tooltipDelayDuration, toaster: toaster, disableThemeTransitions: disableThemeTransitions, i18n: i18n, children: children }));
+        return (_jsx(ProvidersInner, { queryClient: queryClient, defaultTheme: defaultTheme, themeAttribute: themeAttribute, tooltipDelayDuration: tooltipDelayDuration, toaster: toaster, disableThemeTransitions: disableThemeTransitions, i18n: i18n, documentTitleFallback: documentTitleFallback, children: children }));
     }
-    return (_jsx(ClientOnly, { fallback: fallback, children: _jsx(ProvidersInner, { queryClient: queryClient, defaultTheme: defaultTheme, themeAttribute: themeAttribute, tooltipDelayDuration: tooltipDelayDuration, toaster: toaster, disableThemeTransitions: disableThemeTransitions, i18n: i18n, children: _jsx(RequireSession, { bypass: sessionBypass, fallback: fallback, children: children }) }) }));
+    return (_jsx(ClientOnly, { fallback: fallback, children: _jsx(ProvidersInner, { queryClient: queryClient, defaultTheme: defaultTheme, themeAttribute: themeAttribute, tooltipDelayDuration: tooltipDelayDuration, toaster: toaster, disableThemeTransitions: disableThemeTransitions, i18n: i18n, documentTitleFallback: documentTitleFallback, children: _jsx(RequireSession, { bypass: sessionBypass, fallback: fallback, children: children }) }) }));
 }

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/runtime.js

@@ -1,4 +1,5 @@
 import { agentNativePath } from "../api-path.js";
+import { emitChatFirstOpenApp, emitChatFirstOpenBrowser, } from "../chat-first.js";
 import { formatChatErrorText, normalizeChatError } from "../error-format.js";
 import { settleInterruptedToolCalls, } from "../sse-event-processor.js";
 const DEFAULT_RUNTIME_CAPABILITIES = {
@@ -977,6 +978,7 @@ export function createAgentChatRuntimeAdapter(runtime, options = {}) {
             };
             try {
                 for await (const event of turn.events) {
+                    emitChatFirstOpenAppFromRuntimeEvent(event);
                     const result = applyRuntimeEventToContent(event, projection);
                     if (result) {
                         const metadata = (result.metadata ?? {});
@@ -1007,3 +1009,64 @@ export function createAgentChatRuntimeAdapter(runtime, options = {}) {
         },
     };
 }
+function emitChatFirstOpenAppFromRuntimeEvent(event) {
+    if (event.type !== "tool-done")
+        return;
+    const toolEvent = event;
+    if (toolEvent.status !== "completed" ||
+        (!isOpenAppTool(toolEvent.toolName) &&
+            !isOpenBrowserTool(toolEvent.toolName))) {
+        return;
+    }
+    const result = asRecord(toolEvent.result) ?? parseResultRecord(toolEvent.resultText);
+    if (!result) {
+        console.warn(`[chat-first] ${toolEvent.toolName} completed without a readable result`);
+        return;
+    }
+    if (isOpenBrowserTool(toolEvent.toolName)) {
+        const delivery = emitChatFirstOpenBrowser({
+            url: readString(result.url ?? result.href),
+            title: readString(result.title ?? result.name),
+        });
+        warnWhenChatFirstDeliveryIsNotObserved(toolEvent.toolName, delivery);
+        return;
+    }
+    const detail = {
+        app: readString(result.app ?? result.appId ?? result.application),
+        path: readString(result.path ?? result.targetPath),
+        url: readString(result.url ?? result.href),
+        view: readString(result.view),
+    };
+    const delivery = emitChatFirstOpenApp(detail);
+    warnWhenChatFirstDeliveryIsNotObserved(toolEvent.toolName, delivery);
+}
+function warnWhenChatFirstDeliveryIsNotObserved(toolName, delivery) {
+    if (delivery.delivered)
+        return;
+    console.warn(`[chat-first] ${toolName} was completed but not delivered (${delivery.reason ?? "unknown"})`);
+}
+function isOpenAppTool(toolName) {
+    return toolName === "open_app";
+}
+function isOpenBrowserTool(toolName) {
+    return toolName === "open_browser";
+}
+function asRecord(value) {
+    return value && typeof value === "object" && !Array.isArray(value)
+        ? value
+        : null;
+}
+function readString(value) {
+    return typeof value === "string" && value.trim() ? value : undefined;
+}
+function parseResultRecord(value) {
+    if (!value?.trim())
+        return null;
+    try {
+        return asRecord(JSON.parse(value));
+    }
+    catch {
+        // coercion-ok: malformed tool output is an unreadable absence; the caller logs it.
+        return null;
+    }
+}

package/dist/client/chat-first/agents-pane.d.ts

@@ -0,0 +1,2 @@
+import type { ChatFirstAgentsPaneProps } from "./types.js";
+export declare function ChatFirstAgentsPane({ activities, loading, error, onRefresh, onWatch, copy, }: ChatFirstAgentsPaneProps): import("react").JSX.Element;

package/dist/client/chat-first/agents-pane.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { ChatFirstAgentActivityPanel } from "../chat-first-agent-activity.js";
+import { defaultChatFirstCopy } from "./copy.js";
+export function ChatFirstAgentsPane({ activities, loading = false, error, onRefresh, onWatch, copy = defaultChatFirstCopy, }) {
+    return (_jsx("section", { "data-chat-first-agents-pane": true, className: "flex h-full min-h-0 flex-col overflow-y-auto bg-background", "aria-label": copy("agentsTitle"), children: _jsx(ChatFirstAgentActivityPanel, { activities: activities, loading: loading, error: error ?? null, onRefresh: onRefresh, onWatch: onWatch, copy: copy }) }));
+}

package/dist/client/chat-first/app-pane.d.ts

@@ -0,0 +1,2 @@
+import type { ChatFirstAppPaneProps } from "./types.js";
+export declare function ChatFirstAppPane({ app, status, embedUrl, errorMessage, onRetry, renderEmbed, copy, }: ChatFirstAppPaneProps): import("react").JSX.Element;

package/dist/client/chat-first/app-pane.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Skeleton } from "@agent-native/toolkit/ui";
+import { defaultChatFirstCopy } from "./copy.js";
+export function ChatFirstAppPane({ app, status, embedUrl, errorMessage, onRetry, renderEmbed, copy = defaultChatFirstCopy, }) {
+    return (_jsx("section", { "data-chat-first-app-pane": true, className: "flex h-full min-h-0 w-full flex-col overflow-hidden bg-background", "aria-label": app ? `${app.name} app` : copy("appUnavailable"), children: status === "loading" ? (_jsxs("div", { className: "space-y-3 p-4", children: [_jsx(Skeleton, { className: "h-5 w-40" }), _jsx(Skeleton, { className: "h-4 w-full" }), _jsx(Skeleton, { className: "h-4 w-2/3" })] })) : status === "ready" && app && embedUrl ? (_jsx("div", { className: "relative min-h-0 flex-1 overflow-hidden", children: renderEmbed({ url: embedUrl, title: app.name }) })) : status === "error" ? (_jsxs("div", { className: "flex h-full flex-col items-center justify-center gap-3 p-6 text-center", children: [_jsx("p", { className: "text-sm text-muted-foreground", children: errorMessage || copy("appUnavailable") }), onRetry ? (_jsx("button", { type: "button", className: "rounded-md border border-border px-3 py-1.5 text-xs text-foreground hover:bg-accent", onClick: onRetry, children: copy("retry") })) : null] })) : (_jsx("div", { className: "flex h-full items-center justify-center p-6 text-center text-sm text-muted-foreground", children: copy("appUnavailable") })) }));
+}

package/dist/client/chat-first/apps-rail.d.ts

@@ -0,0 +1,2 @@
+import type { ChatFirstAppRailProps } from "./types.js";
+export declare function ChatFirstAppsRail({ apps, activeAppId, loading, error, collapsed, layout: controlledLayout, onLayoutChange, onLayoutError, onRetry, onOpenApp, onCreateApp, createAppTrigger, renderIcon, copy, }: ChatFirstAppRailProps): import("react").JSX.Element;