@agent-native/core 0.152.0 → 0.153.0

package/dist/client/integrations/IntegrationsPanel.js

@@ -1,13 +1,14 @@
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { IconPlus, IconBrandSlack, IconBrandTelegram, IconBrandWhatsapp, IconBrandGoogleDrive, IconTerminal2, IconBuildingSkyscraper, IconCopy, IconCheck, IconChevronLeft, IconChevronRight, IconExternalLink, IconCircleCheck, IconInfoCircle, IconSearch, IconServer, IconLoader2, IconRefresh, } from "@tabler/icons-react";
+import { IconPlus, IconBrandSlack, IconBrandTelegram, IconBrandWhatsapp, IconBrandGoogleDrive, IconTerminal2, IconBuildingSkyscraper, IconCopy, IconCheck, IconChevronLeft, IconExternalLink, IconCircleCheck, IconInfoCircle, IconSearch, IconServer, IconLoader2, IconRefresh, } from "@tabler/icons-react";
 import { useState, useCallback, useEffect, useMemo } from "react";
 import { agentNativePath } from "../api-path.js";
 import { Tooltip, TooltipContent, TooltipTrigger, } from "../components/ui/tooltip.js";
 import { useT } from "../i18n.js";
-import { getDefaultMcpIntegrations, } from "../resources/mcp-integration-catalog.js";
+import { getDefaultMcpIntegrations } from "../resources/mcp-integration-catalog.js";
 import { McpIntegrationDialog } from "../resources/McpIntegrationDialog.js";
 import { McpIntegrationLogo } from "../resources/McpIntegrationLogo.js";
 import { useCreateMcpServer, useDeleteMcpServer, useMcpServers, useReconnectMcpServer, } from "../resources/use-mcp-servers.js";
+import { IntegrationGrid } from "./IntegrationGrid.js";
 import { useIntegrationStatus, } from "./useIntegrationStatus.js";
 import { isNonPublicWebhookUrl } from "./webhook-url.js";
 const PLATFORMS = [
@@ -228,22 +229,6 @@ export function LegacyIntegrationsPanel() {
                                             : "bg-muted-foreground/55"}` }))] }, platform.id));
                     }), _jsx("div", { className: "rounded-md border border-border bg-muted/30 px-2.5 py-2 text-[10px] text-muted-foreground", children: t("integrations.sharedMessaging") })] }))] }));
 }
-function IntegrationGalleryCard({ platform, status, onSelect, }) {
-    const connected = Boolean(status?.configured || status?.enabled);
-    const active = Boolean(status?.enabled && status?.configured);
-    const stateLabel = platform.isClient
-        ? "Available"
-        : active
-            ? "Connected"
-            : connected
-                ? "Ready to enable"
-                : "Set up";
-    return (_jsxs("button", { type: "button", onClick: () => onSelect(platform), className: "group flex min-h-28 items-start gap-3 rounded-xl border border-border/80 bg-card p-4 text-start transition-colors hover:border-foreground/25 hover:bg-accent/30 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring", children: [_jsx("span", { className: "flex size-10 shrink-0 items-center justify-center rounded-xl border border-border/70 bg-background text-foreground shadow-sm", children: _jsx(platform.icon, { size: 21, strokeWidth: 1.8 }) }), _jsxs("span", { className: "flex min-w-0 flex-1 flex-col gap-1", children: [_jsxs("span", { className: "flex items-center gap-2", children: [_jsx("span", { className: "truncate text-sm font-semibold text-foreground", children: platform.label }), _jsx("span", { className: active
-                                    ? "shrink-0 text-[10px] font-medium text-emerald-600 dark:text-emerald-400"
-                                    : connected
-                                        ? "shrink-0 text-[10px] font-medium text-amber-600 dark:text-amber-400"
-                                        : "shrink-0 text-[10px] text-muted-foreground", children: stateLabel })] }), _jsx("span", { className: "line-clamp-2 text-xs leading-5 text-muted-foreground", children: platform.description }), _jsxs("span", { className: "mt-1 flex items-center gap-1 text-[11px] font-medium text-foreground/70 transition-colors group-hover:text-foreground", children: [connected || platform.isClient ? "Manage" : "Connect", _jsx(IconChevronRight, { className: "size-3.5 rtl:-scale-x-100" })] })] })] }));
-}
 function compareMcpUrl(value) {
     try {
         const url = new URL(value.trim());
@@ -270,16 +255,15 @@ function McpServerStatus({ server, onReconnect, reconnecting = false, reconnectE
     }
     return (_jsxs("span", { className: "inline-flex items-center gap-1.5 text-xs text-muted-foreground", children: [_jsx("span", { className: "size-1.5 rounded-full bg-muted-foreground/50" }), "Status unknown"] }));
 }
-function McpCatalogItem({ integration, connected, onConnect, }) {
-    return (_jsxs("div", { className: "flex min-w-0 items-center gap-3 border-b border-border/60 py-4 last:border-b-0", children: [_jsx(McpIntegrationLogo, { name: integration.name, logoUrl: integration.logoUrl, integrationId: integration.id }), _jsxs("div", { className: "min-w-0 flex-1", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("span", { className: "truncate text-sm font-medium text-foreground", children: integration.name }), connected && (_jsx("span", { className: "shrink-0 text-[11px] font-medium text-emerald-600 dark:text-emerald-400", children: "Connected" }))] }), _jsx("p", { className: "mt-0.5 line-clamp-1 text-xs leading-5 text-muted-foreground", children: integration.description || integration.useCase })] }), _jsx("button", { type: "button", onClick: () => onConnect(integration.id), className: "shrink-0 rounded-md border border-border bg-background px-2.5 py-1.5 text-xs font-medium text-foreground transition-colors hover:bg-accent", children: connected ? "Manage" : "Connect" })] }));
-}
 function McpIntegrationsSection({ query }) {
+    const t = useT();
     const serversQuery = useMcpServers();
     const createServer = useCreateMcpServer();
     const deleteServer = useDeleteMcpServer();
     const reconnectServer = useReconnectMcpServer();
     const [dialogOpen, setDialogOpen] = useState(false);
     const [initialIntegrationId, setInitialIntegrationId] = useState(null);
+    const [connectIntegrationId, setConnectIntegrationId] = useState(null);
     const [deleteTarget, setDeleteTarget] = useState(null);
     const [deleteError, setDeleteError] = useState(null);
     const [reconnectingKey, setReconnectingKey] = useState(null);
@@ -306,8 +290,33 @@ function McpIntegrationsSection({ query }) {
             serversQuery.data?.role === "admin"));
     const openCatalog = useCallback((integrationId) => {
         setInitialIntegrationId(integrationId ?? null);
+        setConnectIntegrationId(null);
+        setDialogOpen(true);
+    }, []);
+    const openQuickConnect = useCallback((integrationId) => {
+        setInitialIntegrationId(null);
+        setConnectIntegrationId(integrationId);
         setDialogOpen(true);
     }, []);
+    const openConnection = useCallback((integrationId, connected) => {
+        if (connected) {
+            openCatalog(integrationId);
+            return;
+        }
+        const integration = catalog.find((item) => item.id === integrationId);
+        const requiresSetup = Boolean(integration &&
+            !integration.managedOAuth &&
+            (integration.connectionMode === "manual" ||
+                integration.availability === "provider-setup" ||
+                integration.availability === "client-restricted" ||
+                integration.authMode === "headers"));
+        if (requiresSetup) {
+            openCatalog(integrationId);
+        }
+        else {
+            openQuickConnect(integrationId);
+        }
+    }, [catalog, openCatalog, openQuickConnect]);
     const removeServer = useCallback(async (server) => {
         const key = `${server.scope}:${server.id}`;
         if (deleteTarget !== key) {
@@ -351,13 +360,33 @@ function McpIntegrationsSection({ query }) {
                                     serversQuery.data?.role === "owner" ||
                                     serversQuery.data?.role === "admin";
                                 return (_jsxs("div", { className: "flex items-start gap-3 py-3.5", children: [_jsx("span", { className: "mt-0.5 flex size-9 shrink-0 items-center justify-center rounded-lg border border-border/70 bg-background text-muted-foreground", children: _jsx(IconServer, { className: "size-4" }) }), _jsxs("div", { className: "min-w-0 flex-1", children: [_jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [_jsx("span", { className: "truncate text-sm font-medium text-foreground", children: server.name }), _jsx("span", { className: "text-[11px] text-muted-foreground", children: server.scope === "user"
-                                                                ? "Personal"
-                                                                : "Organization" })] }), _jsx(McpServerStatus, { server: server, onReconnect: server.status.state === "error"
+                                                                ? t("mcpIntegrations.personal")
+                                                                : t("mcpIntegrations.sharedWithWorkspace") })] }), _jsx(McpServerStatus, { server: server, onReconnect: server.status.state === "error"
                                                         ? () => void reconnect(server)
                                                         : undefined, reconnecting: reconnectingKey === key, reconnectError: reconnectError?.key === key
                                                         ? reconnectError.message
                                                         : undefined })] }), canRemove && (_jsx("button", { type: "button", onClick: () => void removeServer(server), disabled: deleteServer.isPending, className: "shrink-0 rounded-md border border-border px-2.5 py-1.5 text-xs font-medium text-foreground transition-colors hover:bg-accent disabled:opacity-50", children: deleteTarget === key ? "Confirm" : "Remove" }))] }, key));
-                            }) }) })] })) : null, filteredCatalog.length > 0 && (_jsxs("div", { children: [_jsxs("div", { className: "mb-1 flex items-center justify-between gap-3", children: [_jsx("h3", { className: "text-sm font-semibold text-foreground", children: "Available integrations" }), _jsxs("span", { className: "text-xs text-muted-foreground", children: [filteredCatalog.length, " integrations"] })] }), _jsx("div", { className: "grid gap-x-8 overflow-hidden rounded-xl border border-border/70 bg-card px-4 sm:grid-cols-2", children: filteredCatalog.map((integration) => (_jsx(McpCatalogItem, { integration: integration, connected: connectedUrls.has(compareMcpUrl(integration.url)), onConnect: openCatalog }, integration.id))) })] })), filteredCatalog.length === 0 && normalizedQuery && (_jsxs("p", { className: "border-y border-border/60 py-4 text-xs text-muted-foreground", children: ["No agent integrations match \u201C", query, "\u201D."] })), _jsx(McpIntegrationDialog, { open: dialogOpen, onOpenChange: setDialogOpen, initialIntegrationId: initialIntegrationId, defaultScope: "user", canCreateOrgMcp: canCreateOrgMcp, hasOrg: hasOrg, onCreateMcpServer: (args) => createServer.mutateAsync(args) })] }));
+                            }) }) })] })) : null, filteredCatalog.length > 0 && (_jsxs("div", { children: [_jsxs("div", { className: "mb-1 flex items-center justify-between gap-3", children: [_jsx("h3", { className: "text-sm font-semibold text-foreground", children: "Available integrations" }), _jsxs("span", { className: "text-xs text-muted-foreground", children: [filteredCatalog.length, " integrations"] })] }), _jsx(IntegrationGrid, { items: filteredCatalog.map((integration) => {
+                            const connected = connectedUrls.has(compareMcpUrl(integration.url));
+                            return {
+                                id: integration.id,
+                                name: integration.name,
+                                description: integration.description || integration.useCase,
+                                logo: (_jsx(McpIntegrationLogo, { name: integration.name, logoUrl: integration.logoUrl, integrationId: integration.id, className: "size-7 rounded-md", imageClassName: "size-full p-1" })),
+                                status: connected ? t("mcpIntegrations.connected") : undefined,
+                                statusClassName: "text-emerald-600 dark:text-emerald-400",
+                                actionLabel: connected
+                                    ? "Manage"
+                                    : t("mcpIntegrations.connect"),
+                                onAction: () => openConnection(integration.id, connected),
+                            };
+                        }) })] })), filteredCatalog.length === 0 && normalizedQuery && (_jsxs("p", { className: "border-y border-border/60 py-4 text-xs text-muted-foreground", children: ["No agent integrations match \u201C", query, "\u201D."] })), _jsx(McpIntegrationDialog, { open: dialogOpen, onOpenChange: (open) => {
+                    setDialogOpen(open);
+                    if (!open) {
+                        setInitialIntegrationId(null);
+                        setConnectIntegrationId(null);
+                    }
+                }, initialIntegrationId: initialIntegrationId, connectIntegrationId: connectIntegrationId, defaultScope: "user", canCreateOrgMcp: canCreateOrgMcp, hasOrg: hasOrg, onCreateMcpServer: (args) => createServer.mutateAsync(args) })] }));
 }
 export function IntegrationsPanel() {
     const { statuses, loading, refetch } = useIntegrationStatus();
@@ -384,11 +413,48 @@ export function IntegrationsPanel() {
     if (selectedPlatform) {
         return (_jsx(IntegrationDetail, { platform: selectedPlatform, serverStatus: statusMap.get(selectedPlatform.id), onBack: () => setSelectedPlatform(null), onRefresh: refetch }));
     }
-    return (_jsxs("div", { className: "w-full space-y-8", children: [_jsxs("div", { className: "flex flex-col gap-4 lg:flex-row lg:items-end lg:justify-between", children: [_jsxs("div", { children: [_jsx("h1", { className: "text-2xl font-semibold tracking-[-0.04em] text-foreground", children: "Integrations" }), _jsx("p", { className: "mt-1.5 max-w-2xl text-sm leading-6 text-muted-foreground", children: "Connect the tools your agent can use to gather context, take action, and meet your team where work already happens." })] }), _jsxs("label", { className: "relative block w-full lg:max-w-xs", children: [_jsx(IconSearch, { className: "pointer-events-none absolute start-3 top-1/2 size-4 -translate-y-1/2 text-muted-foreground" }), _jsx("input", { type: "search", value: query, onChange: (event) => setQuery(event.target.value), placeholder: "Search integrations", "aria-label": "Search integrations", className: "h-9 w-full rounded-lg border border-border bg-background ps-9 pe-3 text-sm text-foreground outline-none transition-colors placeholder:text-muted-foreground focus:border-foreground/30 focus:ring-2 focus:ring-accent/40" })] })] }), _jsx(McpIntegrationsSection, { query: normalizedQuery }), loading ? (_jsx("div", { className: "grid gap-3 sm:grid-cols-2", children: [0, 1, 2, 3].map((item) => (_jsx("div", { className: "h-28 animate-pulse rounded-xl border border-border bg-muted/30" }, item))) })) : (_jsxs(_Fragment, { children: [!normalizedQuery && connectedPlatforms.length > 0 && (_jsxs("section", { className: "space-y-3", children: [_jsxs("div", { className: "flex items-baseline justify-between gap-3", children: [_jsx("h2", { className: "text-sm font-semibold text-foreground", children: "Connected" }), _jsxs("span", { className: "text-xs text-muted-foreground", children: [connectedPlatforms.length, " connected"] })] }), _jsx("div", { className: "grid gap-3 sm:grid-cols-2", children: connectedPlatforms.map((platform) => (_jsx(IntegrationGalleryCard, { platform: platform, status: statusMap.get(platform.id), onSelect: setSelectedPlatform }, platform.id))) })] })), ["Messaging", "Workspace tools", "Agent clients"].map((category) => {
+    return (_jsxs("div", { className: "w-full space-y-8", children: [_jsxs("div", { className: "flex flex-col gap-4 lg:flex-row lg:items-end lg:justify-between", children: [_jsxs("div", { children: [_jsx("h1", { className: "text-2xl font-semibold tracking-[-0.04em] text-foreground", children: "Integrations" }), _jsx("p", { className: "mt-1.5 max-w-2xl text-sm leading-6 text-muted-foreground", children: "Connect the tools your agent can use to gather context, take action, and meet your team where work already happens." })] }), _jsxs("label", { className: "relative block w-full lg:max-w-xs", children: [_jsx(IconSearch, { className: "pointer-events-none absolute start-3 top-1/2 size-4 -translate-y-1/2 text-muted-foreground" }), _jsx("input", { type: "search", value: query, onChange: (event) => setQuery(event.target.value), placeholder: "Search integrations", "aria-label": "Search integrations", className: "h-9 w-full rounded-lg border border-border bg-background ps-9 pe-3 text-sm text-foreground outline-none transition-colors placeholder:text-muted-foreground focus:border-foreground/30 focus:ring-2 focus:ring-accent/40" })] })] }), _jsx(McpIntegrationsSection, { query: normalizedQuery }), loading ? (_jsx("div", { className: "grid gap-3 sm:grid-cols-2", children: [0, 1, 2, 3].map((item) => (_jsx("div", { className: "h-28 animate-pulse rounded-xl border border-border bg-muted/30" }, item))) })) : (_jsxs(_Fragment, { children: [!normalizedQuery && connectedPlatforms.length > 0 && (_jsxs("section", { className: "space-y-3", children: [_jsxs("div", { className: "flex items-baseline justify-between gap-3", children: [_jsx("h2", { className: "text-sm font-semibold text-foreground", children: "Connected" }), _jsxs("span", { className: "text-xs text-muted-foreground", children: [connectedPlatforms.length, " connected"] })] }), _jsx("div", { className: "grid gap-3 sm:grid-cols-2", children: _jsx(IntegrationGrid, { items: connectedPlatforms.map((platform) => {
+                                        const status = statusMap.get(platform.id);
+                                        return {
+                                            id: platform.id,
+                                            name: platform.label,
+                                            description: platform.description,
+                                            logo: _jsx(platform.icon, { size: 18, strokeWidth: 1.8 }),
+                                            status: platform.isClient
+                                                ? "Available"
+                                                : status?.enabled && status.configured
+                                                    ? "Connected"
+                                                    : "Ready to enable",
+                                            statusClassName: status?.enabled && status.configured
+                                                ? "text-emerald-600 dark:text-emerald-400"
+                                                : "text-amber-600 dark:text-amber-400",
+                                            actionLabel: "Manage",
+                                            onAction: () => setSelectedPlatform(platform),
+                                        };
+                                    }) }) })] })), ["Messaging", "Workspace tools", "Agent clients"].map((category) => {
                         const platforms = filteredPlatforms.filter((platform) => platform.category === category &&
                             (!connectedPlatforms.includes(platform) || normalizedQuery));
                         if (platforms.length === 0)
                             return null;
-                        return (_jsxs("section", { className: "mt-8 space-y-3 first:mt-0", children: [_jsx("h2", { className: "text-sm font-semibold text-foreground", children: category }), _jsx("div", { className: "grid gap-3 sm:grid-cols-2", children: platforms.map((platform) => (_jsx(IntegrationGalleryCard, { platform: platform, status: statusMap.get(platform.id), onSelect: setSelectedPlatform }, platform.id))) })] }, category));
+                        return (_jsxs("section", { className: "mt-8 space-y-3 first:mt-0", children: [_jsx("h2", { className: "text-sm font-semibold text-foreground", children: category }), _jsx(IntegrationGrid, { items: platforms.map((platform) => {
+                                        const status = statusMap.get(platform.id);
+                                        const connected = Boolean(status?.configured || status?.enabled);
+                                        return {
+                                            id: platform.id,
+                                            name: platform.label,
+                                            description: platform.description,
+                                            logo: _jsx(platform.icon, { size: 18, strokeWidth: 1.8 }),
+                                            status: connected
+                                                ? status?.enabled && status.configured
+                                                    ? "Connected"
+                                                    : "Ready to enable"
+                                                : undefined,
+                                            statusClassName: status?.enabled && status.configured
+                                                ? "text-emerald-600 dark:text-emerald-400"
+                                                : "text-amber-600 dark:text-amber-400",
+                                            actionLabel: connected ? "Manage" : "Connect",
+                                            onAction: () => setSelectedPlatform(platform),
+                                        };
+                                    }) })] }, category));
                     }), filteredPlatforms.length === 0 && !mcpCatalogMatches && (_jsxs("div", { className: "rounded-xl border border-dashed border-border p-8 text-center", children: [_jsx("p", { className: "text-sm font-medium text-foreground", children: "No integrations found" }), _jsx("p", { className: "mt-1 text-xs text-muted-foreground", children: "Try a different tool or category." })] }))] }))] }));
 }

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

@@ -1,4 +1,6 @@
 export { IntegrationsPanel } from "./IntegrationsPanel.js";
+export { IntegrationGrid, type IntegrationGridItem, type IntegrationGridProps, } from "./IntegrationGrid.js";
+export { IntegrationConnectionChoice, type IntegrationConnectionChoiceProps, } from "./IntegrationConnectionChoice.js";
 export { useIntegrationStatus } from "./useIntegrationStatus.js";
 export type { IntegrationStatus } from "./useIntegrationStatus.js";
 export { listIntegrationEnvStatuses, listIntegrationStatuses, saveIntegrationEnvVars, setIntegrationEnabled, setupIntegration, disconnectManagedIntegrationInstallation, listManagedIntegrationInstallations, managedIntegrationOAuthUrl, managedSlackAgentManifestUrl, listManagedIntegrationScopes, saveManagedIntegrationScope, listManagedIntegrationBudgets, listManagedIntegrationMemory, forgetManagedIntegrationMemory, saveManagedIntegrationBudget, testManagedIntegrationInstallation, IntegrationClientError, type ClientIntegrationInstallation, type ClientIntegrationScope, type ClientIntegrationUsageBudget, type ClientIntegrationMemory, type ClientIntegrationStatus, type IntegrationEnvStatus, type SavedEnvVarsResult, } from "./api.js";

package/dist/client/integrations/index.js

@@ -1,3 +1,5 @@
 export { IntegrationsPanel } from "./IntegrationsPanel.js";
+export { IntegrationGrid, } from "./IntegrationGrid.js";
+export { IntegrationConnectionChoice, } from "./IntegrationConnectionChoice.js";
 export { useIntegrationStatus } from "./useIntegrationStatus.js";
 export { listIntegrationEnvStatuses, listIntegrationStatuses, saveIntegrationEnvVars, setIntegrationEnabled, setupIntegration, disconnectManagedIntegrationInstallation, listManagedIntegrationInstallations, managedIntegrationOAuthUrl, managedSlackAgentManifestUrl, listManagedIntegrationScopes, saveManagedIntegrationScope, listManagedIntegrationBudgets, listManagedIntegrationMemory, forgetManagedIntegrationMemory, saveManagedIntegrationBudget, testManagedIntegrationInstallation, IntegrationClientError, } from "./api.js";

package/dist/client/onboarding/FirstRunOnboarding.d.ts

@@ -2,5 +2,7 @@ import React from "react";
 export interface FirstRunOnboardingProps {
     /** Test hook; generated apps use the public Vite flag instead. */
     skipIntegrations?: boolean;
+    /** The shared startup gate has already resolved this account as eligible. */
+    initialFirstRun?: boolean;
 }
-export declare function FirstRunOnboarding({ skipIntegrations, }?: FirstRunOnboardingProps): React.JSX.Element | null;
+export declare function FirstRunOnboarding({ skipIntegrations, initialFirstRun, }?: FirstRunOnboardingProps): React.JSX.Element | null;

package/dist/client/onboarding/FirstRunOnboarding.js

@@ -1,9 +1,10 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Skeleton } from "@agent-native/toolkit/ui/skeleton";
-import { IconArrowRight, IconBrandGithub, IconCheck, IconExternalLink, IconInfoCircle, IconKey, IconLoader2, IconPlugConnected, IconSearch, } from "@tabler/icons-react";
+import { IconArrowRight, IconBrandGithub, IconCheck, IconExternalLink, IconInfoCircle, IconKey, IconLoader2, IconSearch, } from "@tabler/icons-react";
 import React, { useMemo, useState } from "react";
 import { appPath } from "../api-path.js";
 import { Tooltip, TooltipContent, TooltipTrigger, } from "../components/ui/tooltip.js";
+import { IntegrationGrid } from "../integrations/IntegrationGrid.js";
 import { buildMcpOAuthStartUrl, filterMcpIntegrations, getDefaultMcpIntegrations, navigateToMcpOAuthStart, shouldOfferMcpIntegrationOrganizationScope, } from "../resources/mcp-integration-catalog.js";
 import { McpIntegrationDialog } from "../resources/McpIntegrationDialog.js";
 import { McpIntegrationLogo } from "../resources/McpIntegrationLogo.js";
@@ -24,9 +25,9 @@ const BUILDER_MORE_SERVICES = [
     "Browser automation",
     "Embeddings",
 ];
-export function FirstRunOnboarding({ skipIntegrations = shouldSkipFirstRunIntegrations(), } = {}) {
+export function FirstRunOnboarding({ skipIntegrations = shouldSkipFirstRunIntegrations(), initialFirstRun = false, } = {}) {
     const previewMode = useOnboardingPreviewMode();
-    const { firstRun, loading, error, profile, completeFirstRun } = useOnboarding({ preview: previewMode });
+    const { firstRun, loading, error, profile, completeFirstRun } = useOnboarding({ preview: previewMode, initialFirstRun });
     const [screen, setScreen] = useState("intro");
     const [extensionIndex, setExtensionIndex] = useState(0);
     const [integrationQuery, setIntegrationQuery] = useState("");
@@ -167,27 +168,40 @@ export function FirstRunOnboarding({ skipIntegrations = shouldSkipFirstRunIntegr
         return (_jsx(Extension, { onComplete: advanceExtension, onSkip: () => void completeFirstRun() }));
     }
     if (screen === "intro") {
-        return (_jsx(OnboardingShell, { profile: profile, screen: "intro", children: _jsxs("div", { className: "mx-auto flex w-full max-w-lg flex-col items-center text-center", children: [_jsxs("h1", { className: "text-3xl font-semibold tracking-[-0.05em] sm:text-4xl", children: ["Free forever.", _jsx("br", {}), _jsx("span", { className: "text-primary", children: "Open source for life." })] }), _jsxs("div", { className: "mt-7 grid w-full gap-2 text-left sm:grid-cols-3", children: [_jsxs("div", { className: "rounded-lg border border-border bg-card px-3 py-3", children: [_jsx("p", { className: "text-xs font-medium", children: "Fully customizable" }), _jsx("p", { className: "mt-1 text-[11px] leading-4 text-muted-foreground", children: "Change the UI, code, and behavior." })] }), _jsxs("div", { className: "rounded-lg border border-border bg-card px-3 py-3", children: [_jsx("p", { className: "text-xs font-medium", children: "Bring your own keys" }), _jsx("p", { className: "mt-1 text-[11px] leading-4 text-muted-foreground", children: "Use your own providers and accounts." })] }), _jsxs("div", { className: "rounded-lg border border-border bg-card px-3 py-3", children: [_jsx("p", { className: "text-xs font-medium", children: "Build your own" }), _jsx("p", { className: "mt-1 text-[11px] leading-4 text-muted-foreground", children: "Mix and match toolkit pieces in your own apps." })] })] }), _jsxs("button", { type: "button", className: cn(primaryButtonClass, "mt-6"), onClick: () => setScreen("choice"), children: ["Continue", _jsx(IconArrowRight, { size: 15 })] }), _jsxs("a", { href: "https://github.com/builderio/agent-native", target: "_blank", rel: "noreferrer", className: "mt-3 inline-flex items-center gap-1.5 text-xs text-muted-foreground transition-colors hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring", children: [_jsx(IconBrandGithub, { size: 14 }), _jsx("span", { children: "View source" }), _jsx(IconExternalLink, { size: 13 })] })] }) }));
+        return (_jsx(OnboardingShell, { profile: profile, screen: "intro", children: _jsxs("div", { className: "mx-auto flex w-full max-w-lg flex-col items-center text-center", children: [_jsxs("h1", { className: "text-3xl font-semibold tracking-[-0.05em] sm:text-4xl", children: ["Free forever.", _jsx("br", {}), _jsx("span", { className: "text-primary", children: "Open source for life." })] }), _jsxs("div", { className: "mt-7 grid w-full gap-2 text-left sm:grid-cols-3", children: [_jsxs("div", { className: "rounded-lg bg-muted/35 px-3 py-3", children: [_jsx("p", { className: "text-xs font-medium", children: "Fully customizable" }), _jsx("p", { className: "mt-1 text-[11px] leading-4 text-muted-foreground", children: "Change the UI, code, and behavior." })] }), _jsxs("div", { className: "rounded-lg bg-muted/35 px-3 py-3", children: [_jsx("p", { className: "text-xs font-medium", children: "Bring your own keys" }), _jsx("p", { className: "mt-1 text-[11px] leading-4 text-muted-foreground", children: "Use your own providers and accounts." })] }), _jsxs("div", { className: "rounded-lg bg-muted/35 px-3 py-3", children: [_jsx("p", { className: "text-xs font-medium", children: "Build your own" }), _jsx("p", { className: "mt-1 text-[11px] leading-4 text-muted-foreground", children: "Mix and match toolkit pieces in your own apps." })] })] }), _jsxs("button", { type: "button", className: cn(primaryButtonClass, "mt-6"), onClick: () => setScreen("choice"), children: ["Continue", _jsx(IconArrowRight, { size: 15 })] }), _jsxs("a", { href: "https://github.com/builderio/agent-native", target: "_blank", rel: "noreferrer", className: "mt-3 inline-flex items-center gap-1.5 text-xs text-muted-foreground transition-colors hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring", children: [_jsx(IconBrandGithub, { size: 14 }), _jsx("span", { children: "View source" }), _jsx(IconExternalLink, { size: 13 })] })] }) }));
     }
     if (screen === "choice") {
-        return (_jsx(OnboardingShell, { profile: profile, screen: "choice", children: _jsxs("div", { className: "mx-auto flex w-full max-w-3xl flex-col gap-4", children: [_jsx("h1", { className: "text-center text-xl font-semibold tracking-[-0.04em] sm:text-2xl", children: "Choose your setup." }), _jsxs("div", { className: "grid gap-3 sm:grid-cols-2", children: [_jsxs("section", { className: "rounded-xl border border-primary/50 bg-primary/[0.06] p-4 shadow-sm", children: [_jsxs("div", { className: "flex items-start justify-between gap-3", children: [_jsxs("div", { children: [_jsx("h2", { className: "text-sm font-semibold", children: "Connect Builder.io free credits" }), _jsxs("p", { className: "mt-1 max-w-xs text-xs leading-5 text-muted-foreground", children: ["One click connects", " ", _jsx("a", { href: "https://www.builder.io/", target: "_blank", rel: "noreferrer", className: "text-foreground underline decoration-border underline-offset-2 hover:decoration-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring", children: "Builder.io free credits" }), " ", "with the services this app needs."] })] }), _jsx(IconArrowRight, { className: "mt-0.5 text-primary", size: 17 })] }), _jsxs("div", { className: "mt-5 border-t border-primary/15 pt-3", children: [_jsx("p", { className: "text-[11px] font-medium text-muted-foreground", children: "Included with Builder.io free credits" }), _jsxs("div", { className: "mt-2 flex flex-wrap items-center gap-x-1.5 gap-y-1 text-[11px]", children: [builderCapabilities.map((capability, index) => (_jsxs(React.Fragment, { children: [index > 0 && (_jsx("span", { "aria-hidden": "true", className: "text-muted-foreground", children: "\u00B7" })), _jsxs("span", { className: "inline-flex items-center gap-0.5", children: [_jsx("span", { children: capability.label }), capability.id === "design-system-intelligence" && (_jsx(CapabilityInfoButton, { capability: capability, ariaLabel: `About ${capability.label}` }))] })] }, capability.id))), _jsx("span", { "aria-hidden": "true", className: "text-muted-foreground", children: "\u00B7" }), _jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsxs("button", { type: "button", className: "text-primary underline-offset-2 hover:underline focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring", "aria-label": `See ${BUILDER_MORE_SERVICES.length} more services included with Builder.io free credits`, children: ["+", BUILDER_MORE_SERVICES.length, " more"] }) }), _jsxs(TooltipContent, { side: "top", className: "max-w-sm text-xs", children: [_jsx("p", { className: "font-medium", children: "Also included with Builder.io free credits" }), _jsx("p", { className: "mt-1 leading-5", children: BUILDER_MORE_SERVICES.join(" · ") })] })] })] })] }), _jsxs("button", { type: "button", "data-testid": "first-run-connect-builder", className: cn(primaryButtonClass, "mt-5 w-full"), onClick: handleBuilder, children: ["Connect Builder.io free credits", _jsx(IconArrowRight, { size: 15 })] })] }), _jsxs("div", { role: "button", tabIndex: 0, "aria-label": "Use my own keys", "data-testid": "first-run-use-own-keys", className: "rounded-xl border border-border bg-card p-4 text-left transition-colors hover:border-foreground/30 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring", onClick: () => setScreen("manual"), onKeyDown: (event) => {
+        return (_jsx(OnboardingShell, { profile: profile, screen: "choice", children: _jsxs("div", { className: "mx-auto flex w-full max-w-3xl flex-col gap-4", children: [_jsx("h1", { className: "text-center text-xl font-semibold tracking-[-0.04em] sm:text-2xl", children: "Choose your setup." }), _jsxs("div", { className: "grid gap-3 sm:grid-cols-2", children: [_jsxs("section", { className: "rounded-xl bg-primary/[0.06] p-4 shadow-sm", children: [_jsxs("div", { className: "flex items-start justify-between gap-3", children: [_jsxs("div", { children: [_jsx("h2", { className: "text-sm font-semibold", children: "Connect Builder.io free credits" }), _jsxs("p", { className: "mt-1 max-w-xs text-xs leading-5 text-muted-foreground", children: ["One click connects", " ", _jsx("a", { href: "https://www.builder.io/", target: "_blank", rel: "noreferrer", className: "text-foreground underline decoration-border underline-offset-2 hover:decoration-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring", children: "Builder.io free credits" }), " ", "with the services this app needs."] })] }), _jsx(IconArrowRight, { className: "mt-0.5 text-primary", size: 17 })] }), _jsxs("div", { className: "mt-5 pt-3", children: [_jsx("p", { className: "text-[11px] font-medium text-muted-foreground", children: "Included with Builder.io free credits" }), _jsxs("div", { className: "mt-2 flex flex-wrap items-center gap-x-1.5 gap-y-1 text-[11px]", children: [builderCapabilities.map((capability, index) => (_jsxs(React.Fragment, { children: [index > 0 && (_jsx("span", { "aria-hidden": "true", className: "text-muted-foreground", children: "\u00B7" })), _jsxs("span", { className: "inline-flex items-center gap-0.5", children: [_jsx("span", { children: capability.label }), capability.id === "design-system-intelligence" && (_jsx(CapabilityInfoButton, { capability: capability, ariaLabel: `About ${capability.label}` }))] })] }, capability.id))), _jsx("span", { "aria-hidden": "true", className: "text-muted-foreground", children: "\u00B7" }), _jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsxs("button", { type: "button", className: "text-primary underline-offset-2 hover:underline focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring", "aria-label": `See ${BUILDER_MORE_SERVICES.length} more services included with Builder.io free credits`, children: ["+", BUILDER_MORE_SERVICES.length, " more"] }) }), _jsxs(TooltipContent, { side: "top", className: "max-w-sm text-xs", children: [_jsx("p", { className: "font-medium", children: "Also included with Builder.io free credits" }), _jsx("p", { className: "mt-1 leading-5", children: BUILDER_MORE_SERVICES.join(" · ") })] })] })] })] }), _jsxs("button", { type: "button", "data-testid": "first-run-connect-builder", className: cn(primaryButtonClass, "mt-5 w-full"), onClick: handleBuilder, children: ["Connect Builder.io free credits", _jsx(IconArrowRight, { size: 15 })] })] }), _jsxs("div", { role: "button", tabIndex: 0, "aria-label": "Use my own keys", "data-testid": "first-run-use-own-keys", className: "rounded-xl bg-muted/35 p-4 text-left transition-colors hover:bg-muted/50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring", onClick: () => setScreen("manual"), onKeyDown: (event) => {
                                     if (event.key !== "Enter" && event.key !== " ")
                                         return;
                                     event.preventDefault();
                                     setScreen("manual");
-                                }, children: [_jsxs("div", { className: "flex items-start justify-between gap-3", children: [_jsxs("div", { children: [_jsx("h2", { className: "text-sm font-semibold", children: "Use my own keys" }), _jsx("p", { className: "mt-1 text-xs text-muted-foreground", children: "See what this app needs" })] }), _jsx(IconKey, { className: "text-muted-foreground", size: 17 })] }), _jsx(CapabilityList, { capabilities: profile.capabilities, compact: true, className: "mt-5 border-t border-border pt-3" })] })] }), import.meta.env.DEV ? (_jsxs("p", { "data-testid": "first-run-local-provider-note", className: "mx-auto max-w-2xl text-center text-[11px] leading-5 text-muted-foreground", children: ["Or set", " ", _jsx("code", { className: "rounded bg-muted px-1", children: "ANTHROPIC_API_KEY" }), " ", "or ", _jsx("code", { className: "rounded bg-muted px-1", children: "OPENAI_API_KEY" }), " ", "in ", _jsx("code", { className: "rounded bg-muted px-1", children: ".env" }), " to make that provider available to everyone using this app.", " ", _jsxs("a", { href: "https://agent-native.com/docs/environment-variables", target: "_blank", rel: "noreferrer", className: "inline-flex items-center gap-1 text-foreground underline decoration-border underline-offset-2 hover:decoration-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring", children: ["Read the setup guide", _jsx(IconExternalLink, { size: 12 })] })] })) : null] }) }));
+                                }, children: [_jsxs("div", { className: "flex items-start justify-between gap-3", children: [_jsxs("div", { children: [_jsx("h2", { className: "text-sm font-semibold", children: "Use my own keys" }), _jsx("p", { className: "mt-1 text-xs text-muted-foreground", children: "See what this app needs" })] }), _jsx(IconKey, { className: "text-muted-foreground", size: 17 })] }), _jsx(CapabilityList, { capabilities: profile.capabilities, compact: true, className: "mt-5 pt-3" })] })] }), import.meta.env.DEV ? (_jsxs("p", { "data-testid": "first-run-local-provider-note", className: "mx-auto max-w-2xl text-center text-[11px] leading-5 text-muted-foreground", children: ["Or set", " ", _jsx("code", { className: "rounded bg-muted px-1", children: "ANTHROPIC_API_KEY" }), " ", "or ", _jsx("code", { className: "rounded bg-muted px-1", children: "OPENAI_API_KEY" }), " ", "in ", _jsx("code", { className: "rounded bg-muted px-1", children: ".env" }), " to make that provider available to everyone using this app.", " ", _jsxs("a", { href: "https://agent-native.com/docs/environment-variables", target: "_blank", rel: "noreferrer", className: "inline-flex items-center gap-1 text-foreground underline decoration-border underline-offset-2 hover:decoration-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring", children: ["Read the setup guide", _jsx(IconExternalLink, { size: 12 })] })] })) : null] }) }));
     }
     if (screen === "manual") {
-        return (_jsx(OnboardingShell, { profile: profile, screen: "choice", children: _jsxs("div", { className: "mx-auto flex w-full max-w-xl flex-col gap-4", children: [_jsxs("div", { children: [_jsx("button", { type: "button", className: "mb-4 text-xs text-muted-foreground hover:text-foreground", onClick: () => setScreen("choice"), children: "Back" }), _jsx("h1", { className: "text-xl font-semibold tracking-[-0.04em] sm:text-2xl", children: "Your keys" })] }), _jsxs("div", { className: "rounded-xl border border-border bg-card p-4", children: [_jsx(CapabilityList, { capabilities: profile.capabilities }), _jsxs("div", { className: "mt-5 flex flex-col-reverse gap-2 border-t border-border pt-4 sm:flex-row sm:justify-between", children: [_jsx("button", { type: "button", className: secondaryButtonClass, onClick: () => setScreen("choice"), children: "Back" }), _jsxs("button", { type: "button", className: primaryButtonClass, onClick: handleOpenSettings, children: ["Open key settings", _jsx(IconArrowRight, { size: 15 })] }), _jsx("button", { type: "button", className: secondaryButtonClass, onClick: () => setScreen(skipIntegrations ? "ready" : "tools"), children: skipIntegrations ? "Continue" : "Continue to tools" })] })] })] }) }));
+        return (_jsx(OnboardingShell, { profile: profile, screen: "choice", children: _jsxs("div", { className: "mx-auto flex w-full max-w-xl flex-col gap-4", children: [_jsxs("div", { children: [_jsx("button", { type: "button", className: "mb-4 text-xs text-muted-foreground hover:text-foreground", onClick: () => setScreen("choice"), children: "Back" }), _jsx("h1", { className: "text-xl font-semibold tracking-[-0.04em] sm:text-2xl", children: "Your keys" })] }), _jsxs("div", { className: "rounded-xl bg-muted/35 p-4", children: [_jsx(CapabilityList, { capabilities: profile.capabilities }), _jsxs("div", { className: "mt-5 flex flex-col-reverse gap-2 pt-4 sm:flex-row sm:justify-between", children: [_jsx("button", { type: "button", className: secondaryButtonClass, onClick: () => setScreen("choice"), children: "Back" }), _jsxs("button", { type: "button", className: primaryButtonClass, onClick: handleOpenSettings, children: ["Open key settings", _jsx(IconArrowRight, { size: 15 })] }), _jsx("button", { type: "button", className: secondaryButtonClass, onClick: () => setScreen(skipIntegrations ? "ready" : "tools"), children: skipIntegrations ? "Continue" : "Continue to tools" })] })] })] }) }));
     }
     if (screen === "tools") {
-        return (_jsxs(OnboardingShell, { profile: profile, screen: "tools", footer: _jsxs("div", { "data-testid": "onboarding-tools-footer", className: "mx-auto flex w-full max-w-3xl flex-wrap items-center justify-end gap-2", children: [_jsx("button", { type: "button", className: secondaryButtonClass, onClick: handleFinish, children: "Skip for now" }), _jsxs("button", { type: "button", className: primaryButtonClass, onClick: handleFinish, children: ["Continue", _jsx(IconArrowRight, { size: 15 })] })] }), children: [_jsxs("div", { className: "mx-auto flex w-full max-w-4xl flex-col gap-5", children: [_jsxs("div", { className: "text-center", children: [_jsx("div", { className: "mx-auto flex size-11 items-center justify-center rounded-2xl bg-primary/10 text-primary", children: _jsx(IconPlugConnected, { size: 22 }) }), _jsx("h1", { className: "mt-5 text-2xl font-semibold tracking-[-0.05em] sm:text-3xl", children: "This app is an agent." }), _jsx("p", { className: "mt-3 text-sm leading-6 text-muted-foreground", children: "Search the catalog and connect what you need. The onboarding stays open while you add integrations." })] }), _jsxs("div", { className: "flex flex-col gap-4", children: [_jsxs("div", { className: "flex flex-col gap-3 border-b border-border pb-4", children: [_jsxs("div", { className: "flex items-center justify-between gap-3", children: [_jsx("p", { className: "text-sm font-medium text-foreground", children: "Agent integrations" }), _jsxs("span", { className: "text-xs text-muted-foreground", children: [mcpIntegrations.length, " of ", mcpCatalog.length] })] }), _jsxs("label", { className: "relative", children: [_jsx(IconSearch, { className: "pointer-events-none absolute start-3 top-1/2 h-3.5 w-3.5 -translate-y-1/2 text-muted-foreground" }), _jsx("input", { value: integrationQuery, onChange: (event) => setIntegrationQuery(event.target.value), className: "h-9 w-full rounded-md border border-border bg-background pe-3 ps-8 text-[13px] text-foreground outline-none placeholder:text-muted-foreground/50 focus:ring-1 focus:ring-ring", placeholder: "Search integrations", "aria-label": "Search integrations" })] }), connectError && (_jsx("p", { className: "text-xs leading-5 text-destructive", children: connectError }))] }), _jsx("div", { children: mcpIntegrations.length > 0 ? (_jsx("div", { className: "grid gap-x-8 sm:grid-cols-2", children: mcpIntegrations.map((integration) => (_jsx(McpIntegrationCard, { integration: integration, connected: connectedUrls.has(compareUrl(integration.url)), busy: connectingIntegrationId === integration.id, onConnect: connectIntegration }, integration.id))) })) : (_jsx("div", { className: "border-y border-dashed border-border px-4 py-8 text-center text-xs text-muted-foreground", children: "No integrations match." })) })] })] }), integrationDialogId && (_jsx(McpIntegrationDialog, { open: true, onOpenChange: (open) => {
+        return (_jsxs(OnboardingShell, { profile: profile, screen: "tools", footer: _jsxs("div", { "data-testid": "onboarding-tools-footer", className: "mx-auto flex w-full max-w-3xl flex-wrap items-center justify-end gap-2", children: [_jsx("button", { type: "button", className: secondaryButtonClass, onClick: handleFinish, children: "Skip for now" }), _jsxs("button", { type: "button", className: primaryButtonClass, onClick: handleFinish, children: ["Continue", _jsx(IconArrowRight, { size: 15 })] })] }), children: [_jsxs("div", { className: "mx-auto flex w-full max-w-4xl flex-col gap-5", children: [_jsxs("div", { children: [_jsx("h1", { className: "text-2xl font-semibold tracking-[-0.05em] sm:text-3xl", children: "This app is an agent." }), _jsx("p", { className: "mt-1.5 max-w-2xl text-sm leading-6 text-muted-foreground", children: "Connect the tools your agent can use to gather context and take action. You can add more later in Settings." })] }), _jsxs("div", { className: "flex flex-col gap-4", children: [_jsxs("div", { className: "flex flex-col gap-3 pb-4", children: [_jsxs("div", { className: "flex items-center justify-between gap-3", children: [_jsx("div", { children: _jsx("p", { className: "text-sm font-medium text-foreground", children: "Agent integrations" }) }), _jsxs("label", { className: "relative w-full max-w-xs", children: [_jsx(IconSearch, { className: "pointer-events-none absolute start-3 top-1/2 h-3.5 w-3.5 -translate-y-1/2 text-muted-foreground" }), _jsx("input", { value: integrationQuery, onChange: (event) => setIntegrationQuery(event.target.value), className: "h-9 w-full rounded-md border border-border bg-background pe-3 ps-8 text-[13px] text-foreground outline-none placeholder:text-muted-foreground/50 focus:ring-1 focus:ring-ring", placeholder: "Search integrations", "aria-label": "Search integrations" })] })] }), connectError && (_jsx("p", { className: "text-xs leading-5 text-destructive", children: connectError }))] }), _jsx(IntegrationGrid, { items: mcpIntegrations.map((integration) => {
+                                        const connected = connectedUrls.has(compareUrl(integration.url));
+                                        return {
+                                            id: integration.id,
+                                            name: integration.name,
+                                            description: integration.description,
+                                            logo: (_jsx(McpIntegrationLogo, { name: integration.name, logoUrl: integration.logoUrl, integrationId: integration.id, className: "size-7 rounded-md", imageClassName: "size-full p-1" })),
+                                            status: connected ? "Connected" : undefined,
+                                            statusClassName: "text-emerald-600 dark:text-emerald-400",
+                                            actionLabel: connected ? "Connected" : "Connect",
+                                            disabled: connected || connectingIntegrationId === integration.id,
+                                            onAction: () => void connectIntegration(integration),
+                                        };
+                                    }), emptyLabel: "No integrations match." })] })] }), integrationDialogId && (_jsx(McpIntegrationDialog, { open: true, onOpenChange: (open) => {
                         if (!open)
                             setIntegrationDialogId(null);
-                    }, initialIntegrationId: integrationDialogId, defaultScope: "user", canCreateOrgMcp: canCreateOrgMcp, hasOrg: hasOrg, onCreateMcpServer: createMcpServer.mutateAsync }))] }));
+                    }, connectIntegrationId: integrationDialogId, defaultScope: "user", canCreateOrgMcp: canCreateOrgMcp, hasOrg: hasOrg, onCreateMcpServer: createMcpServer.mutateAsync }))] }));
     }
     if (screen === "connecting") {
-        return (_jsx(OnboardingShell, { profile: profile, screen: "choice", children: _jsxs("div", { className: "mx-auto flex w-full max-w-md flex-col items-center text-center", children: [_jsx("div", { className: "flex size-10 items-center justify-center rounded-full bg-primary/10 text-primary", children: _jsx(IconLoader2, { className: "animate-spin", size: 19 }) }), _jsx("h1", { className: "mt-5 text-xl font-semibold tracking-[-0.04em]", children: "Connecting Builder.io free credits" }), _jsx("p", { className: "mt-2 text-sm text-muted-foreground", children: "Finish the one-click connection in the new window." }), _jsxs("div", { className: "mt-7 w-full rounded-xl border border-border bg-card p-4 text-left", children: [_jsxs("div", { className: "flex items-center justify-between gap-3", children: [_jsx(Skeleton, { className: "h-3 w-28" }), _jsx(Skeleton, { className: "h-5 w-16 rounded-full" })] }), _jsx(Skeleton, { className: "mt-4 h-8 w-full" }), _jsxs("div", { className: "mt-3 grid grid-cols-3 gap-2", children: [_jsx(Skeleton, { className: "h-7 w-full" }), _jsx(Skeleton, { className: "h-7 w-full" }), _jsx(Skeleton, { className: "h-7 w-full" })] })] }), connectFlow.error && (_jsxs("div", { className: "mt-4 flex flex-col items-center gap-2", children: [_jsx("p", { className: "text-xs text-destructive", children: connectFlow.error }), _jsx("button", { type: "button", className: secondaryButtonClass, onClick: () => setScreen("choice"), children: "Try again" })] }))] }) }));
+        return (_jsx(OnboardingShell, { profile: profile, screen: "choice", children: _jsxs("div", { className: "mx-auto flex w-full max-w-md flex-col items-center text-center", children: [_jsx("div", { className: "flex size-10 items-center justify-center rounded-full bg-primary/10 text-primary", children: _jsx(IconLoader2, { className: "animate-spin", size: 19 }) }), _jsx("h1", { className: "mt-5 text-xl font-semibold tracking-[-0.04em]", children: "Connecting Builder.io free credits" }), _jsx("p", { className: "mt-2 text-sm text-muted-foreground", children: "Finish the one-click connection in the new window." }), _jsxs("div", { className: "mt-7 w-full rounded-xl bg-muted/35 p-4 text-left", children: [_jsxs("div", { className: "flex items-center justify-between gap-3", children: [_jsx(Skeleton, { className: "h-3 w-28" }), _jsx(Skeleton, { className: "h-5 w-16 rounded-full" })] }), _jsx(Skeleton, { className: "mt-4 h-8 w-full" }), _jsxs("div", { className: "mt-3 grid grid-cols-3 gap-2", children: [_jsx(Skeleton, { className: "h-7 w-full" }), _jsx(Skeleton, { className: "h-7 w-full" }), _jsx(Skeleton, { className: "h-7 w-full" })] })] }), connectFlow.error && (_jsxs("div", { className: "mt-4 flex flex-col items-center gap-2", children: [_jsx("p", { className: "text-xs text-destructive", children: connectFlow.error }), _jsx("button", { type: "button", className: secondaryButtonClass, onClick: () => setScreen("choice"), children: "Try again" })] }))] }) }));
     }
     return (_jsx(OnboardingShell, { profile: profile, screen: "ready", children: _jsxs("div", { className: "mx-auto flex w-full max-w-2xl flex-col items-center text-center", children: [_jsx("div", { className: "flex size-12 items-center justify-center rounded-2xl bg-primary/10 text-primary", children: _jsx(IconCheck, { size: 20 }) }), _jsx("h1", { className: "mt-5 text-xl font-semibold tracking-[-0.04em]", children: "Your agent is ready." }), _jsx("p", { className: "mt-2 max-w-md text-sm leading-6 text-muted-foreground", children: "Start with a chat, then connect more tools whenever you need them." }), _jsx("div", { className: "mt-7 grid w-full gap-2 text-left sm:grid-cols-3", children: (skipIntegrations
                         ? [
@@ -211,7 +225,7 @@ export function FirstRunOnboarding({ skipIntegrations = shouldSkipFirstRunIntegr
                                 "Flexible providers",
                                 "Use Builder.io free credits or your own keys.",
                             ],
-                        ]).map(([title, description]) => (_jsxs("div", { className: "rounded-xl bg-card px-4 py-4 ring-1 ring-border/70", children: [_jsx("span", { className: "flex size-7 items-center justify-center rounded-full bg-primary/10 text-primary", children: _jsx(IconCheck, { size: 14 }) }), _jsx("p", { className: "mt-3 text-sm font-medium", children: title }), _jsx("p", { className: "mt-1 text-xs leading-5 text-muted-foreground", children: description })] }, title))) }), _jsxs("button", { type: "button", "data-testid": "first-run-open-app", className: cn(primaryButtonClass, "mt-7"), onClick: handleFinish, children: ["Open app", _jsx(IconArrowRight, { size: 15 })] })] }) }));
+                        ]).map(([title, description]) => (_jsxs("div", { className: "rounded-xl bg-muted/35 px-4 py-4", children: [_jsx("span", { className: "flex size-7 items-center justify-center rounded-full bg-primary/10 text-primary", children: _jsx(IconCheck, { size: 14 }) }), _jsx("p", { className: "mt-3 text-sm font-medium", children: title }), _jsx("p", { className: "mt-1 text-xs leading-5 text-muted-foreground", children: description })] }, title))) }), _jsxs("button", { type: "button", "data-testid": "first-run-open-app", className: cn(primaryButtonClass, "mt-7"), onClick: handleFinish, children: ["Open app", _jsx(IconArrowRight, { size: 15 })] })] }) }));
 }
 function OnboardingShell({ profile, screen, footer, children, }) {
     return (_jsxs("div", { className: "fixed inset-0 z-[100] flex h-full min-h-0 flex-col bg-background text-foreground", "data-onboarding-screen": screen, role: "dialog", "aria-modal": "true", "aria-label": `${profile?.appName ?? "Your app"} setup`, children: [_jsx("div", { className: "h-0.5 shrink-0 bg-muted", "data-testid": "onboarding-progress", children: _jsx("div", { className: "h-full bg-primary transition-[width] duration-200", style: {
@@ -236,11 +250,7 @@ function CapabilityList({ capabilities, compact = false, className, }) {
             ...suggested,
         ].slice(0, 4);
     }, [capabilities, compact]);
-    return (_jsxs("div", { className: cn("grid", className), children: [!compact && (_jsx("p", { className: "mb-2 text-xs font-medium text-muted-foreground", children: "Keys and integrations" })), _jsx("div", { className: "divide-y divide-border", children: visibleCapabilities.map((capability) => (_jsx(CapabilityRow, { capability: capability, compact: compact }, capability.id))) })] }));
-}
-function McpIntegrationCard({ integration, connected, busy, onConnect, }) {
-    const actionLabel = "Connect";
-    return (_jsxs("article", { className: "flex min-w-0 items-center gap-3 border-b border-border/70 py-3.5 sm:pe-4", children: [_jsxs("div", { className: "flex min-w-0 flex-1 items-center gap-3", children: [_jsx(McpIntegrationLogo, { name: integration.name, logoUrl: integration.logoUrl, integrationId: integration.id, className: "size-8 rounded-md", imageClassName: "size-full p-1" }), _jsxs("div", { className: "min-w-0 flex-1", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("h3", { className: "truncate text-sm font-medium text-foreground", children: integration.name }), connected ? (_jsx("span", { className: "rounded-full border border-border bg-muted px-2 py-0.5 text-[10px] font-medium text-muted-foreground", children: "Connected" })) : null] }), _jsx("p", { className: "mt-1 line-clamp-2 text-[11px] leading-4 text-muted-foreground", children: integration.description })] })] }), _jsxs("button", { type: "button", onClick: () => onConnect(integration), disabled: connected || busy, "aria-label": `${actionLabel} ${integration.name}`, className: "inline-flex min-h-8 shrink-0 items-center justify-center gap-1.5 rounded-md border border-border bg-background px-3 text-[11px] font-medium text-foreground transition-colors hover:bg-accent focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50", children: [busy ? _jsx(IconLoader2, { className: "animate-spin", size: 13 }) : null, connected ? "Connected" : actionLabel] })] }));
+    return (_jsxs("div", { className: cn("grid", className), children: [!compact && (_jsx("p", { className: "mb-2 text-xs font-medium text-muted-foreground", children: "Keys and integrations" })), _jsx("div", { className: "grid gap-1", children: visibleCapabilities.map((capability) => (_jsx(CapabilityRow, { capability: capability, compact: compact }, capability.id))) })] }));
 }
 function CapabilityRow({ capability, compact, }) {
     return (_jsxs("div", { className: cn("flex items-start justify-between gap-3", compact ? "py-2" : "py-3"), children: [_jsxs("div", { className: "min-w-0", children: [_jsxs("div", { className: "flex items-center gap-1.5", children: [_jsx("span", { className: cn("font-medium", compact ? "text-[11px]" : "text-sm"), children: capability.label }), _jsx(CapabilityInfoButton, { capability: capability, ariaLabel: `Why ${capability.label} is needed` })] }), _jsx("p", { className: "mt-1 text-[11px] leading-4 text-muted-foreground", children: capability.keySummary })] }), _jsx("span", { className: cn("shrink-0 text-[10px] uppercase tracking-[0.08em]", capability.required || capability.suggested

package/dist/client/onboarding/first-run-enabled.js

@@ -1,3 +1,4 @@
+import { injectedAgentNativeConfig } from "../app-config.js";
 const FIRST_RUN_ONBOARDING_ENV_KEY = "VITE_AGENT_NATIVE_FIRST_RUN_ONBOARDING";
 const FIRST_RUN_ONBOARDING_SKIP_INTEGRATIONS_ENV_KEY = "VITE_AGENT_NATIVE_FIRST_RUN_ONBOARDING_SKIP_INTEGRATIONS";
 function isEnabled(value) {
@@ -31,8 +32,3 @@ export function resolveFirstRunOnboardingMode(env = (import.meta.env ?? {}), con
     }
     return "off";
 }
-function injectedAgentNativeConfig() {
-    return typeof __AGENT_NATIVE_APP_CONFIG__ === "undefined"
-        ? {}
-        : __AGENT_NATIVE_APP_CONFIG__;
-}

package/dist/client/onboarding/first-run-startup-gate.d.ts

@@ -0,0 +1,5 @@
+import React from "react";
+export declare function useFirstRunOnboardingGateOwnsSurface(): boolean;
+export declare function FirstRunOnboardingStartupGate({ children, }: {
+    children: React.ReactNode;
+}): React.JSX.Element;

package/dist/client/onboarding/first-run-startup-gate.js

@@ -0,0 +1,51 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Suspense, createContext, lazy, useContext, useEffect, useState, } from "react";
+import { DefaultSpinner } from "../DefaultSpinner.js";
+import { isFirstRunOnboardingEnabled } from "./first-run-enabled.js";
+import { fetchFirstRunOnboardingStatus } from "./first-run-status.js";
+import { useOnboardingPreviewMode } from "./use-preview-mode.js";
+const FirstRunOnboarding = lazy(() => import("./FirstRunOnboarding.js").then((module) => ({
+    default: module.FirstRunOnboarding,
+})));
+const FirstRunOnboardingGateContext = createContext(false);
+export function useFirstRunOnboardingGateOwnsSurface() {
+    return useContext(FirstRunOnboardingGateContext);
+}
+export function FirstRunOnboardingStartupGate({ children, }) {
+    const previewMode = useOnboardingPreviewMode();
+    const shouldResolve = isFirstRunOnboardingEnabled() && !previewMode;
+    const [decision, setDecision] = useState(shouldResolve ? "pending" : "ineligible");
+    useEffect(() => {
+        if (!shouldResolve) {
+            setDecision("ineligible");
+            return;
+        }
+        let cancelled = false;
+        const handleFirstRunCompleted = () => {
+            cancelled = true;
+            setDecision("ineligible");
+        };
+        window.addEventListener("agent-native:first-run-completed", handleFirstRunCompleted);
+        setDecision("pending");
+        void fetchFirstRunOnboardingStatus()
+            .then((firstRun) => {
+            if (!cancelled)
+                setDecision(firstRun ? "eligible" : "ineligible");
+        })
+            .catch(() => {
+            if (!cancelled)
+                setDecision("ineligible");
+        });
+        return () => {
+            cancelled = true;
+            window.removeEventListener("agent-native:first-run-completed", handleFirstRunCompleted);
+        };
+    }, [shouldResolve]);
+    const ownsSurface = decision === "eligible";
+    const hideApp = decision !== "ineligible";
+    const app = hideApp ? (_jsx("div", { "aria-hidden": "true", "data-first-run-app-hidden": "true", style: { display: "contents", visibility: "hidden" }, children: children })) : (children);
+    return (_jsxs(FirstRunOnboardingGateContext.Provider, { value: ownsSurface, children: [app, decision === "pending" && _jsx(FirstRunOnboardingStartupLoading, {}), ownsSurface && (_jsx(Suspense, { fallback: _jsx(FirstRunOnboardingStartupLoading, {}), children: _jsx(FirstRunOnboarding, { initialFirstRun: true }) }))] }));
+}
+function FirstRunOnboardingStartupLoading() {
+    return (_jsx("div", { "data-first-run-startup-loading": "true", "aria-busy": "true", className: "fixed inset-0 z-[110] bg-background", children: _jsx(DefaultSpinner, {}) }));
+}

package/dist/client/onboarding/first-run-status.d.ts

@@ -0,0 +1,7 @@
+export declare const FIRST_RUN_ONBOARDING_STATUS_RESOLVED_EVENT = "agent-native:first-run-status-resolved";
+export interface FirstRunOnboardingStatusDetail {
+    firstRun: boolean;
+}
+export declare function dispatchFirstRunOnboardingStatus(firstRun: boolean): void;
+/** Fetch the server-owned first-run decision and notify other initial flows. */
+export declare function fetchFirstRunOnboardingStatus(): Promise<boolean>;

package/dist/client/onboarding/first-run-status.js

@@ -0,0 +1,26 @@
+import { agentNativePath } from "../api-path.js";
+export const FIRST_RUN_ONBOARDING_STATUS_RESOLVED_EVENT = "agent-native:first-run-status-resolved";
+export function dispatchFirstRunOnboardingStatus(firstRun) {
+    if (typeof window === "undefined")
+        return;
+    window.dispatchEvent(new CustomEvent(FIRST_RUN_ONBOARDING_STATUS_RESOLVED_EVENT, { detail: { firstRun } }));
+}
+/** Fetch the server-owned first-run decision and notify other initial flows. */
+export async function fetchFirstRunOnboardingStatus() {
+    try {
+        const response = await fetch(agentNativePath("/_agent-native/onboarding/first-run/status"));
+        if (!response.ok) {
+            throw new Error(`first-run status: ${response.status}`);
+        }
+        const data = (await response.json());
+        const firstRun = data.firstRun === true;
+        dispatchFirstRunOnboardingStatus(firstRun);
+        return firstRun;
+    }
+    catch (error) {
+        // The safe UI behavior for an unavailable eligibility check is to show no
+        // onboarding. Callers can still surface the error through their own path.
+        dispatchFirstRunOnboardingStatus(false);
+        throw error;
+    }
+}

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

@@ -4,6 +4,9 @@
  * Subpath: `@agent-native/core/client/onboarding`
  */
 export { useOnboarding, type UseOnboardingResult } from "./use-onboarding.js";
+export { isFirstRunOnboardingEnabled } from "./first-run-enabled.js";
+export { dispatchFirstRunOnboardingStatus, fetchFirstRunOnboardingStatus, FIRST_RUN_ONBOARDING_STATUS_RESOLVED_EVENT, } from "./first-run-status.js";
+export { FirstRunOnboardingStartupGate, useFirstRunOnboardingGateOwnsSurface, } from "./first-run-startup-gate.js";
 export { useOnboardingPreviewMode, ONBOARDING_PREVIEW_STORAGE_KEY, ONBOARDING_PREVIEW_QUERY_PARAM, ONBOARDING_PREVIEW_QUERY_VALUE, isOnboardingPreviewQuery, } from "./use-preview-mode.js";
 export { OnboardingPanel } from "./OnboardingPanel.js";
 export { OnboardingBanner } from "./OnboardingBanner.js";

package/dist/client/onboarding/index.js

@@ -4,6 +4,9 @@
  * Subpath: `@agent-native/core/client/onboarding`
  */
 export { useOnboarding } from "./use-onboarding.js";
+export { isFirstRunOnboardingEnabled } from "./first-run-enabled.js";
+export { dispatchFirstRunOnboardingStatus, fetchFirstRunOnboardingStatus, FIRST_RUN_ONBOARDING_STATUS_RESOLVED_EVENT, } from "./first-run-status.js";
+export { FirstRunOnboardingStartupGate, useFirstRunOnboardingGateOwnsSurface, } from "./first-run-startup-gate.js";
 export { useOnboardingPreviewMode, ONBOARDING_PREVIEW_STORAGE_KEY, ONBOARDING_PREVIEW_QUERY_PARAM, ONBOARDING_PREVIEW_QUERY_VALUE, isOnboardingPreviewQuery, } from "./use-preview-mode.js";
 export { OnboardingPanel } from "./OnboardingPanel.js";
 export { OnboardingBanner } from "./OnboardingBanner.js";

package/dist/client/onboarding/use-onboarding.d.ts

@@ -35,6 +35,7 @@ export interface UseOnboardingResult {
 }
 export declare function useOnboarding(options?: {
     preview?: boolean;
+    initialFirstRun?: boolean;
 }): UseOnboardingResult;
 /** Re-export type for convenience. */
 export type { OnboardingMethod, OnboardingStepStatus };

package/dist/client/onboarding/use-onboarding.js

@@ -1,29 +1,35 @@
 import { useCallback, useEffect, useRef, useState } from "react";
 import { agentNativePath } from "../api-path.js";
+import { dispatchFirstRunOnboardingStatus, fetchFirstRunOnboardingStatus, } from "./first-run-status.js";
 export function useOnboarding(options = {}) {
     const preview = options.preview === true;
+    const initialFirstRun = options.initialFirstRun === true;
     const [steps, setSteps] = useState([]);
     const [profile, setProfile] = useState(null);
     const [loading, setLoading] = useState(true);
     const [error, setError] = useState(null);
     const [dismissed, setDismissed] = useState(false);
-    const [firstRun, setFirstRun] = useState(preview);
+    const [firstRun, setFirstRun] = useState(preview || initialFirstRun);
     const mountedRef = useRef(true);
     useEffect(() => {
-        setFirstRun(preview);
-    }, [preview]);
+        setFirstRun(preview || initialFirstRun);
+    }, [initialFirstRun, preview]);
     const fetchAll = useCallback(async () => {
         try {
             const stepsUrl = agentNativePath(preview
                 ? "/_agent-native/onboarding/steps?preview=1"
                 : "/_agent-native/onboarding/steps");
+            const firstRunPromise = preview
+                ? Promise.resolve(true).then((value) => {
+                    dispatchFirstRunOnboardingStatus(value);
+                    return value;
+                })
+                : fetchFirstRunOnboardingStatus();
             const [stepsRes, dismissRes, profileRes, firstRunRes] = await Promise.all([
                 fetch(stepsUrl),
                 fetch(agentNativePath("/_agent-native/onboarding/dismissed")),
                 fetch(agentNativePath("/_agent-native/onboarding/profile")),
-                preview
-                    ? Promise.resolve(null)
-                    : fetch(agentNativePath("/_agent-native/onboarding/first-run/status")),
+                firstRunPromise,
             ]);
             if (!mountedRef.current)
                 return;
@@ -40,11 +46,7 @@ export function useOnboarding(options = {}) {
                 setFirstRun(true);
             }
             else {
-                if (!firstRunRes || !firstRunRes.ok) {
-                    throw new Error(`first-run status: ${firstRunRes?.status ?? 500}`);
-                }
-                const firstRunData = (await firstRunRes.json());
-                setFirstRun(firstRunData.firstRun === true);
+                setFirstRun(firstRunRes === true);
             }
             if (dismissRes.ok) {
                 const d = (await dismissRes.json());