@agent-native/core 0.147.0 → 0.148.1

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/blocks/library/diagram.js

@@ -41,7 +41,7 @@ import { RoughOverlay, toggleWireframeStyle, useIsDark, useWireframeStyle, } fro
 /* HTML/SVG diagram path                                                       */
 /* -------------------------------------------------------------------------- */
 /** The rough-overlay selector for diagram bordered boxes (mirrors the plan). */
-const DIAGRAM_ROUGH_SELECTOR = "[data-rough],.diagram-panel,.diagram-node,.diagram-box,.diagram-pill,.diagram-card,[class*='card'],[class*='box'],[class*='panel'],[class*='pill'],[class*='chip'],[class*='badge'],hr";
+const DIAGRAM_ROUGH_SELECTOR = "[data-rough],.diagram-panel,.diagram-node,.diagram-box,.diagram-pill,.diagram-card,.diagram-arrow[data-arrow],[class*='card'],[class*='box'],[class*='panel'],[class*='pill'],[class*='chip'],[class*='badge'],hr";
 function HtmlDiagram({ data, ctx, compact, }) {
     const ref = useRef(null);
     const isDark = useIsDark();

package/dist/client/blocks/library/sanitize-html.js

@@ -30,6 +30,28 @@ const URL_ATTRS = new Set([
     "ping",
 ]);
 const SAFE_SCHEMES = new Set(["http:", "https:", "mailto:", "tel:", "ftp:"]);
+const DIAGRAM_ARROW_DIRECTIONS = new Set([
+    "right",
+    "left",
+    "up",
+    "down",
+    "both",
+    "refresh",
+]);
+const DIAGRAM_ARROW_ENTITY_TEXT = {
+    "→": "→",
+    "←": "←",
+    "↑": "↑",
+    "↓": "↓",
+    "↔": "↔",
+    "←": "←",
+    "↑": "↑",
+    "→": "→",
+    "↓": "↓",
+    "↔": "↔",
+    "➡": "➡",
+    "↻": "↻",
+};
 const WHITESPACE = /\s+/g;
 const HAS_SCHEME = /^[a-z][a-z0-9+.-]*:/i;
 const SAFE_DATA_IMAGE = /^data:image\/(png|jpe?g|gif|webp);/i;
@@ -109,6 +131,47 @@ function stripWireframeThemeClasses(value) {
         .filter((className) => !isWireframeThemeClass(className))
         .join(" ");
 }
+function diagramArrowDirection(value) {
+    const normalized = value
+        .replace(/&(?:r|l|u|d|h)arr;|&#(?:8592|8593|8594|8595|8596|8635|10145);/gi, (entity) => DIAGRAM_ARROW_ENTITY_TEXT[entity.toLowerCase()] ?? entity)
+        .replace(/\uFE0F/g, "")
+        .trim();
+    if (DIAGRAM_ARROW_DIRECTIONS.has(normalized))
+        return normalized;
+    if (/[↔⇄⇆⇔]/u.test(normalized))
+        return "both";
+    if (/[←⬅⇐]/u.test(normalized))
+        return "left";
+    if (/[↑⬆⇑]/u.test(normalized))
+        return "up";
+    if (/[↓⬇⇓]/u.test(normalized))
+        return "down";
+    if (/[↻↺⟳⟲]/u.test(normalized))
+        return "refresh";
+    if (/[→➡➜➔➝➞➟➠⇢⇒]/u.test(normalized))
+        return "right";
+    return undefined;
+}
+function normalizeDiagramArrows(root) {
+    root.querySelectorAll(".diagram-arrow").forEach((node) => {
+        const explicit = node.getAttribute("data-arrow");
+        const direction = DIAGRAM_ARROW_DIRECTIONS.has(explicit ?? "")
+            ? explicit
+            : diagramArrowDirection(node.textContent ?? "");
+        if (!direction)
+            return;
+        node.setAttribute("data-arrow", direction);
+        node.replaceChildren();
+    });
+}
+function normalizeFallbackDiagramArrows(html) {
+    return html.replace(/(<(?:div|span)\b[^>]*\bclass\s*=\s*(?:"[^"]*\bdiagram-arrow\b[^"]*"|'[^']*\bdiagram-arrow\b[^']*')[^>]*>)([\s\S]*?)(<\/(?:div|span)>)/gi, (_match, open, body, close) => {
+        const direction = diagramArrowDirection(body);
+        if (!direction)
+            return `${open}${body}${close}`;
+        return `${open.replace(/>$/, ` data-arrow="${direction}">`)}${close}`;
+    });
+}
 /** Conservative no-DOM fallback for any non-browser code path (SSR). */
 function fallbackStrip(html, options) {
     // Drop the whole url attribute if its value (whitespace/control-stripped)
@@ -147,13 +210,14 @@ export function sanitizeDiagramHtml(html) {
     if (!html)
         return "";
     if (typeof DOMParser === "undefined" || typeof document === "undefined") {
-        return fallbackStrip(html)
+        return normalizeFallbackDiagramArrows(fallbackStrip(html)
             .replace(/<\/?\s*(?:math|foreignObject|foreignobject)\b[^>]*>/gi, "")
-            .replace(/\s(?:@[\w:.-]+|x-on:[\w:.-]+|:on[\w:.-]+|x-bind:on[\w:.-]+|:style|x-bind:style)\s*=\s*("[^"]*"|'[^']*'|[^\s>]+)/gi, "");
+            .replace(/\s(?:@[\w:.-]+|x-on:[\w:.-]+|:on[\w:.-]+|x-bind:on[\w:.-]+|:style|x-bind:style)\s*=\s*("[^"]*"|'[^']*'|[^\s>]+)/gi, ""));
     }
     const doc = new DOMParser().parseFromString(html, "text/html");
     doc.querySelectorAll(DIAGRAM_BLOCKED_TAGS).forEach((el) => el.remove());
     sanitizeElementAttributes(doc.body, { stripRuntimeDirectives: true });
+    normalizeDiagramArrows(doc.body);
     return doc.body.innerHTML;
 }
 export function sanitizeWireframeCss(css) {

package/dist/client/blocks/library/wireframe-kit.js

@@ -745,6 +745,18 @@ function elementStroke(node, fallback) {
     if (explicit)
         return explicit;
     const cs = getComputedStyle(node);
+    if (node.classList.contains("diagram-arrow")) {
+        const color = cs.color;
+        const normalizedColor = color.replace(/\s+/g, "").toLowerCase();
+        const isTransparent = normalizedColor === "transparent" ||
+            normalizedColor.endsWith("/0)") ||
+            (normalizedColor.startsWith("rgb") &&
+                normalizedColor.split(",").length === 4 &&
+                normalizedColor.endsWith(",0)"));
+        if (color && !isTransparent) {
+            return color;
+        }
+    }
     for (const side of [
         "borderTopColor",
         "borderLeftColor",
@@ -831,6 +843,56 @@ function build(scope, opts) {
         strokeWidth: sw,
         preserveVertices: true,
     });
+    const drawRoughArrow = (direction, x, y, w, h, stroke, sw, seedBase) => {
+        let lineIndex = 0;
+        const drawLine = (x1, y1, x2, y2) => {
+            push(gen.line(x1, y1, x2, y2, makeOpts(stroke, sw, seedFrom(seedBase, "line", lineIndex++))), stroke, sw);
+        };
+        const drawDirectional = (fromX, fromY, toX, toY) => {
+            const angle = Math.atan2(toY - fromY, toX - fromX);
+            const length = Math.hypot(toX - fromX, toY - fromY);
+            const head = Math.min(7, Math.max(4, length * 0.28));
+            const shaftEndX = toX - Math.cos(angle) * head;
+            const shaftEndY = toY - Math.sin(angle) * head;
+            drawLine(fromX, fromY, shaftEndX, shaftEndY);
+            const spread = Math.PI / 6;
+            drawLine(toX, toY, toX - Math.cos(angle - spread) * head, toY - Math.sin(angle - spread) * head);
+            drawLine(toX, toY, toX - Math.cos(angle + spread) * head, toY - Math.sin(angle + spread) * head);
+        };
+        const centerX = x + w / 2;
+        const centerY = y + h / 2;
+        const pad = Math.min(3, w / 5, h / 5);
+        const horizontalFrom = x + pad;
+        const horizontalTo = x + w - pad;
+        const verticalFrom = y + pad;
+        const verticalTo = y + h - pad;
+        if (direction === "refresh") {
+            const diameter = Math.max(8, Math.min(w, h) - pad * 2);
+            const start = -Math.PI * 0.8;
+            const stop = Math.PI * 1.15;
+            push(gen.arc(centerX, centerY, diameter, diameter, start, stop, false, makeOpts(stroke, sw, seedFrom(seedBase, "arc"))), stroke, sw);
+            drawDirectional(x + w - pad - 5, y + pad + 1, x + w - pad, y + pad + 1);
+            return;
+        }
+        if (direction === "down") {
+            drawDirectional(centerX, verticalFrom, centerX, verticalTo);
+            return;
+        }
+        if (direction === "up") {
+            drawDirectional(centerX, verticalTo, centerX, verticalFrom);
+            return;
+        }
+        if (direction === "left") {
+            drawDirectional(horizontalTo, centerY, horizontalFrom, centerY);
+            return;
+        }
+        if (direction === "both") {
+            drawDirectional(horizontalFrom, centerY, horizontalTo, centerY);
+            drawDirectional(horizontalTo, centerY, horizontalFrom, centerY);
+            return;
+        }
+        drawDirectional(horizontalFrom, centerY, horizontalTo, centerY);
+    };
     if (opts.drawFrame && hasDrawableRoughBounds(layoutW, layoutH, 2)) {
         const sw = 2;
         push(gen.path(roundedRectPath(2, 2, layoutW - 4, layoutH - 4, opts.frameRadius), {
@@ -858,6 +920,13 @@ function build(scope, opts) {
             : rawStroke;
         const sw = Number(readVar(node, "--rough-w")) || 1.4;
         const seed = seedFrom(kind, Math.round(x), Math.round(y), Math.round(w), Math.round(h), index++);
+        const arrow = node.classList.contains("diagram-arrow")
+            ? node.getAttribute("data-arrow")
+            : null;
+        if (arrow) {
+            drawRoughArrow(arrow, x, y, w, h, stroke, sw, seedFrom("arrow", seed));
+            return;
+        }
         const o = makeOpts(stroke, sw, seed);
         let drawable;
         if (kind === "ellipse") {

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/apps-rail.d.ts

@@ -1,2 +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;
+export declare function ChatFirstAppsRail({ apps, activeAppId, loading, error, collapsed, layout: controlledLayout, onLayoutChange, onLayoutError, onRetry, onOpenApp, onOpenAllApps, onCreateApp, createAppTrigger, renderIcon, copy, }: ChatFirstAppRailProps): import("react").JSX.Element;

package/dist/client/chat-first/apps-rail.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { ContextMenu, ContextMenuContent, ContextMenuItem, ContextMenuSeparator, ContextMenuTrigger, Skeleton, Tooltip, TooltipContent, TooltipTrigger, } from "@agent-native/toolkit/ui";
-import { IconChevronDown, IconChevronUp, IconPin, IconPlus, } from "@tabler/icons-react";
+import { IconApps, IconChevronDown, IconChevronUp, IconPin, IconPlus, } from "@tabler/icons-react";
 import { useMemo, useState } from "react";
 import { orderChatFirstAppIds, readChatFirstAppLayout, writeChatFirstAppLayout, } from "../chat-first.js";
 import { cn } from "../utils.js";
@@ -36,7 +36,7 @@ function AppRows({ apps, activeAppId, layout, onDragStart, onDrop, onDragEnd, on
                                     }), "aria-pressed": pinned, title: pinned ? copy("removePinned") : copy("pinTop"), onClick: () => onTogglePinned(app.id), children: _jsx(IconPin, { size: 13, strokeWidth: pinned ? 2.2 : 1.6, "aria-hidden": "true" }) }), _jsx("span", { className: "sr-only", children: `${index + 1} of ${orderedApps.length}` })] }) }), _jsxs(ContextMenuContent, { children: [_jsxs(ContextMenuItem, { onSelect: () => onTogglePinned(app.id), children: [_jsx(IconPin, { size: 14, "aria-hidden": "true" }), pinned ? copy("removePinned") : copy("pinTop")] }), _jsx(ContextMenuSeparator, {}), _jsxs(ContextMenuItem, { disabled: index === 0, onSelect: () => onMove(app.id, -1), children: [_jsx(IconChevronUp, { size: 14, "aria-hidden": "true" }), copy("moveUp")] }), _jsxs(ContextMenuItem, { disabled: index === orderedApps.length - 1, onSelect: () => onMove(app.id, 1), children: [_jsx(IconChevronDown, { size: 14, "aria-hidden": "true" }), copy("moveDown")] })] })] }, app.id));
         }) }));
 }
-export function ChatFirstAppsRail({ apps, activeAppId, loading = false, error, collapsed = false, layout: controlledLayout, onLayoutChange, onLayoutError, onRetry, onOpenApp, onCreateApp, createAppTrigger, renderIcon, copy = defaultChatFirstCopy, }) {
+export function ChatFirstAppsRail({ apps, activeAppId, loading = false, error, collapsed = false, layout: controlledLayout, onLayoutChange, onLayoutError, onRetry, onOpenApp, onOpenAllApps, onCreateApp, createAppTrigger, renderIcon, copy = defaultChatFirstCopy, }) {
     const [localLayout, setLocalLayout] = useState(() => readChatFirstAppLayout());
     const layout = controlledLayout ?? localLayout;
     const [draggedAppId, setDraggedAppId] = useState(null);
@@ -97,7 +97,7 @@ export function ChatFirstAppsRail({ apps, activeAppId, loading = false, error, c
                     ? [0, 1, 2].map((index) => (_jsx(Skeleton, { className: "size-9 rounded-md" }, index)))
                     : visibleApps.map((app) => (_jsx("button", { type: "button", "data-chat-first-app": true, "data-app-id": app.id, className: cn("flex size-9 items-center justify-center rounded-md transition-colors", activeAppId === app.id
                             ? "bg-sidebar-accent text-sidebar-accent-foreground"
-                            : "text-sidebar-foreground/70 hover:bg-sidebar-accent hover:text-sidebar-accent-foreground"), onClick: () => onOpenApp(app), "aria-label": copy("openApp", { name: app.name }), title: app.name, children: renderIcon(app) }, app.id))), error ? (_jsx("span", { className: "size-1.5 rounded-full bg-destructive", title: error, "aria-label": error })) : null] }));
+                            : "text-sidebar-foreground/70 hover:bg-sidebar-accent hover:text-sidebar-accent-foreground"), onClick: () => onOpenApp(app), "aria-label": copy("openApp", { name: app.name }), title: app.name, children: renderIcon(app) }, app.id))), onOpenAllApps ? (_jsx("button", { type: "button", "data-chat-first-all-apps": true, className: "flex size-9 items-center justify-center rounded-md text-sidebar-foreground/70 transition-colors hover:bg-sidebar-accent hover:text-sidebar-accent-foreground", onClick: onOpenAllApps, "aria-label": copy("allApps"), title: copy("allApps"), children: _jsx(IconApps, { size: 16, "aria-hidden": "true" }) })) : null, error ? (_jsx("span", { className: "size-1.5 rounded-full bg-destructive", title: error, "aria-label": error })) : null] }));
     }
-    return (_jsxs("section", { "data-chat-first-apps-rail": true, className: "mt-3 px-2 pb-2 pt-2", "aria-label": copy("workspaceApps"), children: [_jsxs("div", { className: "mb-1 flex items-center gap-1.5 px-1 text-[11px] font-medium text-sidebar-foreground/50", children: [_jsx("span", { children: copy("workspaceApps") }), _jsx("span", { className: "ml-auto", children: createTrigger })] }), loading && apps.length === 0 ? (_jsx("div", { className: "space-y-0.5 px-1", children: [0, 1, 2].map((index) => (_jsx(Skeleton, { className: "h-7 w-full rounded-md" }, index))) })) : apps.length === 0 ? (_jsxs("div", { className: "px-1", children: [_jsx("p", { className: "text-xs text-sidebar-foreground/55", children: copy("noWorkspaceApps") }), createAppTrigger ? (createTrigger) : onCreateApp ? (_jsxs("button", { type: "button", className: "mt-1 inline-flex h-6 items-center gap-1.5 rounded-md border border-sidebar-border px-2 text-xs text-sidebar-foreground/75 hover:bg-sidebar-accent hover:text-sidebar-foreground", onClick: onCreateApp, children: [_jsx(IconPlus, { size: 13, "aria-hidden": "true" }), copy("createApp")] })) : (createTrigger)] })) : (_jsx(AppRows, { apps: visibleApps, activeAppId: activeAppId, layout: layout, onDragStart: setDraggedAppId, onDrop: reorderApps, onDragEnd: () => setDraggedAppId(null), onOpenApp: onOpenApp, onTogglePinned: togglePinned, onMove: moveApp, renderIcon: renderIcon, copy: copy })), hasMoreApps || showAllApps ? (_jsxs("button", { type: "button", className: "mt-0.5 flex h-6 w-full items-center gap-2 rounded-md px-2 text-xs text-sidebar-foreground/50 hover:bg-sidebar-accent hover:text-sidebar-foreground", onClick: () => setShowAllApps((value) => !value), children: [showAllApps ? (_jsx(IconChevronUp, { size: 14, "aria-hidden": "true" })) : (_jsx(IconChevronDown, { size: 14, "aria-hidden": "true" })), showAllApps ? copy("showLess") : copy("showMore")] })) : null, error ? (_jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsxs("button", { type: "button", className: "mt-1 flex items-center gap-1 px-1 text-[10px] text-destructive/80", onClick: onRetry, "aria-label": error, children: [_jsx("span", { className: "size-1.5 rounded-full bg-destructive" }), onRetry ? copy("retry") : copy("appsLoadError")] }) }), _jsx(TooltipContent, { side: "right", children: error })] })) : null] }));
+    return (_jsxs("section", { "data-chat-first-apps-rail": true, className: "mt-3 px-2 pb-2 pt-2", "aria-label": copy("workspaceApps"), children: [_jsxs("div", { className: "mb-1 flex items-center gap-1.5 px-1 text-[11px] font-medium text-sidebar-foreground/50", children: [_jsx("span", { children: copy("workspaceApps") }), _jsx("span", { className: "ml-auto", children: createTrigger })] }), loading && apps.length === 0 ? (_jsx("div", { className: "space-y-0.5 px-1", children: [0, 1, 2].map((index) => (_jsx(Skeleton, { className: "h-7 w-full rounded-md" }, index))) })) : apps.length === 0 ? (_jsxs("div", { className: "px-1", children: [_jsx("p", { className: "text-xs text-sidebar-foreground/55", children: copy("noWorkspaceApps") }), createAppTrigger ? (createTrigger) : onCreateApp ? (_jsxs("button", { type: "button", className: "mt-1 inline-flex h-6 items-center gap-1.5 rounded-md border border-sidebar-border px-2 text-xs text-sidebar-foreground/75 hover:bg-sidebar-accent hover:text-sidebar-foreground", onClick: onCreateApp, children: [_jsx(IconPlus, { size: 13, "aria-hidden": "true" }), copy("createApp")] })) : (createTrigger)] })) : (_jsx(AppRows, { apps: visibleApps, activeAppId: activeAppId, layout: layout, onDragStart: setDraggedAppId, onDrop: reorderApps, onDragEnd: () => setDraggedAppId(null), onOpenApp: onOpenApp, onTogglePinned: togglePinned, onMove: moveApp, renderIcon: renderIcon, copy: copy })), hasMoreApps || showAllApps ? (_jsxs("button", { type: "button", className: "mt-0.5 flex h-6 w-full items-center gap-2 rounded-md px-2 text-xs text-sidebar-foreground/50 hover:bg-sidebar-accent hover:text-sidebar-foreground", onClick: () => setShowAllApps((value) => !value), children: [showAllApps ? (_jsx(IconChevronUp, { size: 14, "aria-hidden": "true" })) : (_jsx(IconChevronDown, { size: 14, "aria-hidden": "true" })), showAllApps ? copy("showLess") : copy("showMore")] })) : null, onOpenAllApps ? (_jsx("div", { className: "mt-1 border-t border-sidebar-border/60 pt-1", children: _jsxs("button", { type: "button", "data-chat-first-all-apps": true, className: "flex h-7 w-full items-center gap-2 rounded-md px-2 text-xs text-sidebar-foreground/55 hover:bg-sidebar-accent hover:text-sidebar-foreground", onClick: onOpenAllApps, children: [_jsx(IconApps, { size: 14, "aria-hidden": "true" }), _jsx("span", { children: copy("allApps") })] }) })) : null, error ? (_jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsxs("button", { type: "button", className: "mt-1 flex items-center gap-1 px-1 text-[10px] text-destructive/80", onClick: onRetry, "aria-label": error, children: [_jsx("span", { className: "size-1.5 rounded-full bg-destructive" }), onRetry ? copy("retry") : copy("appsLoadError")] }) }), _jsx(TooltipContent, { side: "right", children: error })] })) : null] }));
 }

package/dist/client/chat-first/copy.js

@@ -2,6 +2,7 @@ const DEFAULT_COPY = {
     newChat: "New chat",
     search: "Search",
     workspaceApps: "Apps",
+    allApps: "All apps",
     integrations: "Integrations",
     scheduled: "Scheduled",
     createWorkspaceApp: "Create app",

package/dist/client/chat-first/types.d.ts

@@ -44,6 +44,7 @@ export interface ChatFirstAppRailProps {
     onLayoutError?: (reason: "unavailable" | "write-failed") => void;
     onRetry?: () => void;
     onOpenApp: (app: ChatFirstAppItem) => void;
+    onOpenAllApps?: () => void;
     onCreateApp?: () => void;
     createAppTrigger?: ReactNode;
     renderIcon: (app: ChatFirstAppItem) => ReactNode;

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;