@agent-native/core 0.137.3 → 0.137.4

package/dist/client/integrations/IntegrationsPanel.js

@@ -1,9 +1,12 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { IconPlus, IconBrandSlack, IconBrandTelegram, IconBrandWhatsapp, IconBrandGoogleDrive, IconTerminal2, IconBuildingSkyscraper, IconCopy, IconCheck, IconChevronLeft, IconExternalLink, IconCircleCheck, IconInfoCircle, } from "@tabler/icons-react";
-import { useState, useCallback, useEffect } from "react";
+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, } 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 { McpIntegrationDialog } from "../resources/McpIntegrationDialog.js";
+import { useCreateMcpServer, useDeleteMcpServer, useMcpServers, } from "../resources/use-mcp-servers.js";
 import { useIntegrationStatus, } from "./useIntegrationStatus.js";
 import { isNonPublicWebhookUrl } from "./webhook-url.js";
 const PLATFORMS = [
@@ -21,6 +24,7 @@ const PLATFORMS = [
             "Running inside a Dispatch workspace instead? Connect Slack from Settings → Messaging there — it stores workspace tokens for you and this page is not needed.",
         ],
         docsUrl: "https://api.slack.com/apps",
+        category: "Messaging",
     },
     {
         id: "telegram",
@@ -33,6 +37,7 @@ const PLATFORMS = [
             "Copy the bot token into your environment",
             'Click "Setup webhook" below to register automatically',
         ],
+        category: "Messaging",
     },
     {
         id: "whatsapp",
@@ -47,6 +52,7 @@ const PLATFORMS = [
             "Copy the access token into your environment",
         ],
         docsUrl: "https://developers.facebook.com/docs/whatsapp",
+        category: "Messaging",
     },
     {
         id: "google-docs",
@@ -60,6 +66,7 @@ const PLATFORMS = [
             "Share your Google Docs with the service account email",
             'Write a comment containing "@Agent" to trigger the agent',
         ],
+        category: "Workspace tools",
     },
     {
         id: "openclaw",
@@ -73,6 +80,7 @@ const PLATFORMS = [
             "Add this agent's URL as a provider in your OpenClaw config",
             "OpenClaw discovers your agent's capabilities via the A2A protocol",
         ],
+        category: "Agent clients",
     },
     {
         id: "claude-code",
@@ -86,6 +94,7 @@ const PLATFORMS = [
             "In Claude Code, reference your agent's URL when asking for data",
             "Claude Code will discover and call your agent's skills automatically",
         ],
+        category: "Agent clients",
     },
     {
         id: "builder",
@@ -100,6 +109,7 @@ const PLATFORMS = [
             "Chat with one agent that can trigger actions across all your apps",
         ],
         docsUrl: "https://www.builder.io?utm_source=agent-native&utm_medium=product&utm_campaign=integrations&utm_content=integrations_panel",
+        category: "Agent clients",
     },
 ];
 function useAgentEngineConfigured() {
@@ -184,10 +194,10 @@ function IntegrationDetail({ platform, serverStatus, onBack, onRefresh, }) {
 }
 // ─── Add integration picker ──────────────────────────────────────────────────
 function AddIntegrationPicker({ connectedIds, onSelect, }) {
-    return (_jsx("div", { className: "space-y-1", children: PLATFORMS.filter((p) => !connectedIds.has(p.id)).map((platform) => (_jsxs("button", { onClick: () => onSelect(platform), className: "flex w-full items-center gap-2 rounded-md px-2 py-1.5 text-start hover:bg-accent/50", children: [_jsx(platform.icon, { size: 14, className: "shrink-0 text-muted-foreground" }), _jsxs("div", { className: "flex-1 min-w-0", children: [_jsx("div", { className: "text-[11px] font-medium text-foreground", children: platform.label }), _jsx("div", { className: "text-[10px] text-muted-foreground truncate", children: platform.description })] })] }, platform.id))) }));
+    return (_jsx("div", { className: "space-y-1", children: PLATFORMS.filter((platform) => !connectedIds.has(platform.id)).map((platform) => (_jsxs("button", { type: "button", onClick: () => onSelect(platform), className: "flex w-full items-center gap-2 rounded-md px-2 py-1.5 text-start hover:bg-accent/50", children: [_jsx(platform.icon, { size: 14, className: "shrink-0 text-muted-foreground" }), _jsxs("span", { className: "flex-1 min-w-0", children: [_jsx("span", { className: "block text-[11px] font-medium text-foreground", children: platform.label }), _jsx("span", { className: "block truncate text-[10px] text-muted-foreground", children: platform.description })] })] }, platform.id))) }));
 }
 // ─── Main panel ──────────────────────────────────────────────────────────────
-export function IntegrationsPanel() {
+export function LegacyIntegrationsPanel() {
     const t = useT();
     const { statuses, loading, refetch } = useIntegrationStatus();
     const [selectedPlatform, setSelectedPlatform] = useState(null);
@@ -217,4 +227,138 @@ export function IntegrationsPanel() {
                                             : "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());
+        url.hash = "";
+        return url.toString().replace(/\/+$/, "");
+    }
+    catch {
+        return value.trim().replace(/\/+$/, "");
+    }
+}
+function McpLogo({ integration }) {
+    const [failed, setFailed] = useState(false);
+    return (_jsx("span", { className: "flex size-9 shrink-0 items-center justify-center overflow-hidden rounded-lg border border-border/70 bg-background text-xs font-semibold text-muted-foreground", children: failed ? (integration.name.slice(0, 1)) : (_jsx("img", { src: integration.logoUrl, alt: "", loading: "lazy", decoding: "async", className: "size-7 object-contain", onError: () => setFailed(true) })) }));
+}
+function McpServerStatus({ server }) {
+    if (server.status.state === "connected") {
+        return (_jsxs("span", { className: "inline-flex items-center gap-1.5 text-xs text-emerald-600 dark:text-emerald-400", children: [_jsx("span", { className: "size-1.5 rounded-full bg-emerald-500" }), "Connected \u00B7 ", server.status.toolCount, " tool", server.status.toolCount === 1 ? "" : "s"] }));
+    }
+    if (server.status.state === "error") {
+        return (_jsxs("span", { className: "inline-flex items-center gap-1.5 text-xs text-destructive", children: [_jsx("span", { className: "size-1.5 rounded-full bg-destructive" }), "Connection error"] }));
+    }
+    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(McpLogo, { integration: integration }), _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 serversQuery = useMcpServers();
+    const createServer = useCreateMcpServer();
+    const deleteServer = useDeleteMcpServer();
+    const [dialogOpen, setDialogOpen] = useState(false);
+    const [initialIntegrationId, setInitialIntegrationId] = useState(null);
+    const [deleteTarget, setDeleteTarget] = useState(null);
+    const [deleteError, setDeleteError] = useState(null);
+    const catalog = useMemo(() => getDefaultMcpIntegrations(), []);
+    const normalizedQuery = query.trim().toLowerCase();
+    const filteredCatalog = useMemo(() => {
+        if (!normalizedQuery)
+            return catalog;
+        return catalog.filter((integration) => `${integration.name} ${integration.provider} ${integration.description} ${integration.useCase}`
+            .toLowerCase()
+            .includes(normalizedQuery));
+    }, [catalog, normalizedQuery]);
+    const servers = [
+        ...(serversQuery.data?.user ?? []),
+        ...(serversQuery.data?.org ?? []),
+    ];
+    const connectedUrls = new Set(servers
+        .filter((server) => server.status.state === "connected")
+        .map((server) => compareMcpUrl(server.url)));
+    const hasOrg = Boolean(serversQuery.data?.orgId);
+    const canCreateOrgMcp = Boolean(hasOrg &&
+        (serversQuery.data?.role === "owner" ||
+            serversQuery.data?.role === "admin"));
+    const openCatalog = useCallback((integrationId) => {
+        setInitialIntegrationId(integrationId ?? null);
+        setDialogOpen(true);
+    }, []);
+    const removeServer = useCallback(async (server) => {
+        const key = `${server.scope}:${server.id}`;
+        if (deleteTarget !== key) {
+            setDeleteTarget(key);
+            return;
+        }
+        setDeleteError(null);
+        try {
+            await deleteServer.mutateAsync({ id: server.id, scope: server.scope });
+            setDeleteTarget(null);
+        }
+        catch (error) {
+            setDeleteError(error instanceof Error
+                ? error.message
+                : "Could not remove agent integration.");
+        }
+    }, [deleteServer, deleteTarget]);
+    return (_jsxs("section", { "data-testid": "mcp-integrations", className: "space-y-5", children: [_jsxs("div", { className: "flex flex-col gap-3 sm:flex-row sm:items-end sm:justify-between", children: [_jsxs("div", { children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(IconServer, { className: "size-4 text-muted-foreground" }), _jsx("h2", { className: "text-sm font-semibold text-foreground", children: "Agent integrations" })] }), _jsx("p", { className: "mt-1 text-xs leading-5 text-muted-foreground", children: "Give your agent tools and context from the services you use." })] }), _jsxs("button", { type: "button", onClick: () => openCatalog(), className: "inline-flex w-fit items-center gap-1.5 rounded-md bg-primary px-3 py-1.5 text-xs font-medium text-primary-foreground transition-colors hover:bg-primary/90", children: [_jsx(IconPlus, { className: "size-3.5" }), "Add integration"] })] }), deleteError && (_jsx("p", { className: "border-y border-destructive/20 bg-destructive/5 py-3 text-xs text-destructive", children: deleteError })), serversQuery.isError ? (_jsx("p", { className: "border-y border-destructive/20 bg-destructive/5 py-3 text-xs text-destructive", children: "Could not load connected agent integrations. The catalog is still available." })) : serversQuery.isLoading ? (_jsxs("div", { className: "space-y-3 rounded-xl border border-border/70 bg-card px-4 py-4", children: [_jsx("div", { className: "h-5 w-1/2 animate-pulse rounded bg-muted" }), _jsx("div", { className: "h-5 w-3/4 animate-pulse rounded bg-muted" })] })) : servers.length > 0 && !normalizedQuery ? (_jsxs("section", { className: "space-y-2", children: [_jsx("h3", { className: "text-sm font-semibold text-foreground", children: "Installed" }), _jsx("div", { className: "overflow-hidden rounded-xl border border-border/70 bg-card text-card-foreground", children: _jsx("div", { className: "divide-y divide-border/60 px-4", children: servers.map((server) => {
+                                const key = `${server.scope}:${server.id}`;
+                                const canRemove = server.scope === "user" ||
+                                    serversQuery.data?.role === "owner" ||
+                                    serversQuery.data?.role === "admin";
+                                return (_jsxs("div", { className: "flex items-center gap-3 py-3.5", children: [_jsx("span", { className: "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 })] }), 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) })] }));
+}
+export function IntegrationsPanel() {
+    const { statuses, loading, refetch } = useIntegrationStatus();
+    const [selectedPlatform, setSelectedPlatform] = useState(null);
+    const [query, setQuery] = useState("");
+    const statusMap = new Map(statuses.map((s) => [s.platform, s]));
+    const connectedPlatforms = PLATFORMS.filter((platform) => {
+        const status = statusMap.get(platform.id);
+        return status?.configured || status?.enabled;
+    });
+    const normalizedQuery = query.trim().toLowerCase();
+    const filteredPlatforms = PLATFORMS.filter((platform) => {
+        if (!normalizedQuery)
+            return true;
+        return `${platform.label} ${platform.description} ${platform.category}`
+            .toLowerCase()
+            .includes(normalizedQuery);
+    });
+    const mcpCatalogMatches = getDefaultMcpIntegrations().some((integration) => normalizedQuery
+        ? `${integration.name} ${integration.provider} ${integration.description} ${integration.useCase}`
+            .toLowerCase()
+            .includes(normalizedQuery)
+        : true);
+    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) => {
+                        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));
+                    }), 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." })] }))] }))] }));
+}
 //# sourceMappingURL=IntegrationsPanel.js.map

package/dist/client/onboarding/FirstRunOnboarding.js

@@ -1,12 +1,16 @@
 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, } from "@tabler/icons-react";
+import { IconArrowRight, IconBrandGithub, IconCheck, IconExternalLink, IconInfoCircle, IconKey, IconLoader2, IconPlugConnected, 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 { buildMcpOAuthStartUrl, filterMcpIntegrations, getDefaultMcpIntegrations, navigateToMcpOAuthStart, } from "../resources/mcp-integration-catalog.js";
+import { McpIntegrationDialog } from "../resources/McpIntegrationDialog.js";
+import { formatMcpServerError, useCreateMcpServer, useMcpServers, } from "../resources/use-mcp-servers.js";
 import { useBuilderConnectFlow } from "../settings/useBuilderStatus.js";
 import { cn } from "../utils.js";
 import { useOnboarding } from "./use-onboarding.js";
+import { useOnboardingPreviewMode } from "./use-preview-mode.js";
 const BUILDER_MORE_SERVICES = [
     "Voice input",
     "Background agents",
@@ -18,14 +22,38 @@ const BUILDER_MORE_SERVICES = [
     "Embeddings",
 ];
 export function FirstRunOnboarding() {
-    const { firstRun, loading, error, profile, completeFirstRun } = useOnboarding();
+    const previewMode = useOnboardingPreviewMode();
+    const { firstRun, loading, error, profile, completeFirstRun } = useOnboarding({ preview: previewMode });
     const [screen, setScreen] = useState("intro");
-    const showReady = () => setScreen("ready");
+    const [integrationQuery, setIntegrationQuery] = useState("");
+    const [integrationDialogId, setIntegrationDialogId] = useState(null);
+    const [connectingIntegrationId, setConnectingIntegrationId] = useState(null);
+    const [connectError, setConnectError] = useState(null);
+    const mcpCatalog = useMemo(() => getDefaultMcpIntegrations(), []);
+    const mcpServersQuery = useMcpServers();
+    const createMcpServer = useCreateMcpServer();
+    const mcpIntegrations = useMemo(() => filterMcpIntegrations(integrationQuery, mcpCatalog), [integrationQuery, mcpCatalog]);
+    const connectedUrls = useMemo(() => {
+        if (previewMode)
+            return new Set();
+        const servers = [
+            ...(mcpServersQuery.data?.user ?? []),
+            ...(mcpServersQuery.data?.org ?? []),
+        ];
+        return new Set(servers
+            .filter((server) => server.status.state === "connected")
+            .map((server) => compareUrl(server.url)));
+    }, [mcpServersQuery.data, previewMode]);
+    const hasOrg = Boolean(mcpServersQuery.data?.orgId);
+    const canCreateOrgMcp = Boolean(hasOrg &&
+        (mcpServersQuery.data?.role === "owner" ||
+            mcpServersQuery.data?.role === "admin"));
+    const showTools = () => setScreen("tools");
     const connectFlow = useBuilderConnectFlow({
-        enabled: firstRun,
+        enabled: firstRun && !previewMode,
         trackingSource: "first_run_onboarding",
         trackingFlow: "connect_llm",
-        onConnected: showReady,
+        onConnected: showTools,
     });
     if (!firstRun)
         return null;
@@ -37,8 +65,12 @@ export function FirstRunOnboarding() {
     }
     const builderCapabilities = profile.capabilities.filter((capability) => capability.builderIncluded);
     const handleBuilder = () => {
+        if (previewMode) {
+            setScreen("tools");
+            return;
+        }
         if (connectFlow.hasFetchedStatus && connectFlow.configured) {
-            showReady();
+            showTools();
             return;
         }
         setScreen("connecting");
@@ -49,18 +81,66 @@ export function FirstRunOnboarding() {
     };
     const handleOpenSettings = async () => {
         window.dispatchEvent(new CustomEvent("agent-panel:open-settings", {
-            detail: { section: "connections" },
+            detail: { section: "integrations" },
         }));
         await completeFirstRun();
     };
     const handleFinish = async () => {
         await completeFirstRun();
     };
+    const returnUrl = typeof window === "undefined"
+        ? "/"
+        : window.location.pathname +
+            window.location.search +
+            window.location.hash;
+    const connectIntegration = async (integration) => {
+        if (previewMode) {
+            setScreen("ready");
+            return;
+        }
+        setConnectError(null);
+        if (connectedUrls.has(compareUrl(integration.url)) ||
+            connectingIntegrationId === integration.id) {
+            return;
+        }
+        if (integration.authMode === "none" &&
+            integration.connectionMode === "direct") {
+            setConnectingIntegrationId(integration.id);
+            try {
+                await createMcpServer.mutateAsync({
+                    scope: "user",
+                    name: integration.name,
+                    url: integration.url,
+                    description: integration.description,
+                });
+            }
+            catch (error) {
+                setConnectError(formatMcpServerError(error instanceof Error ? error.message : String(error)));
+            }
+            finally {
+                setConnectingIntegrationId(null);
+            }
+            return;
+        }
+        if (integration.authMode === "oauth" &&
+            integration.connectionMode === "oauth" &&
+            integration.availability === "ready") {
+            navigateToMcpOAuthStart(appPath(buildMcpOAuthStartUrl({
+                name: integration.name,
+                url: integration.url,
+                description: integration.description,
+                scope: "user",
+                returnUrl,
+            })));
+            return;
+        }
+        setIntegrationDialogId(integration.id);
+    };
     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 })] })] }) }));
     }
     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" }), _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's free tier" }), " ", "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: "Includes on the free tier" }), _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" })), _jsx("span", { children: 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 Builder.io services`, 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" }), _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", _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 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" })), _jsx("span", { children: 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) => {
                                     if (event.key !== "Enter" && event.key !== " ")
                                         return;
                                     event.preventDefault();
@@ -68,26 +148,61 @@ export function FirstRunOnboarding() {
                                 }, 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" })] })] })] }) }));
     }
     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 })] })] })] })] }) }));
+        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("tools"), children: "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) => {
+                        if (!open)
+                            setIntegrationDialogId(null);
+                    }, initialIntegrationId: integrationDialogId, defaultScope: canCreateOrgMcp ? "org" : "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" }), _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 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(IconCheck, { size: 20 }) }), _jsx("h1", { className: "mt-5 text-xl font-semibold tracking-[-0.04em]", children: "Ready to go." }), _jsxs("button", { type: "button", "data-testid": "first-run-open-app", className: cn(primaryButtonClass, "mt-7"), onClick: handleFinish, children: ["Open app", _jsx(IconArrowRight, { size: 15 })] })] }) }));
+    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: [
+                        ["Chat + actions", "Ask your agent to work across the app."],
+                        ["Agent integrations", "Connect tools from Settings anytime."],
+                        [
+                            "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 })] })] }) }));
 }
-function OnboardingShell({ profile, screen, children, }) {
-    return (_jsxs("div", { className: "fixed inset-0 z-[100] flex min-h-screen flex-col bg-background text-foreground", "data-onboarding-screen": screen, role: "dialog", "aria-modal": "true", "aria-label": `${profile?.appName ?? "Your app"} setup`, children: [_jsxs("header", { className: "flex items-center justify-between border-b border-border px-5 py-4 text-xs text-muted-foreground sm:px-8", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("img", { src: appPath("/agent-native-icon-dark.svg"), alt: "", "aria-hidden": "true", className: "h-4 w-auto shrink-0" }), _jsx("span", { className: "font-medium text-foreground", children: profile?.appName ?? "Your app" })] }), _jsx("span", { children: screen === "intro" ? "1 / 2" : "2 / 2" })] }), _jsx("div", { className: "h-0.5 bg-muted", children: _jsx("div", { className: "h-full bg-primary transition-[width] duration-200", style: { width: screen === "intro" ? "50%" : "100%" } }) }), _jsx("main", { className: "flex min-h-0 flex-1 items-center overflow-y-auto px-5 py-10 sm:px-8", children: _jsx("div", { className: "mx-auto w-full max-w-3xl", children: children }) })] }));
+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: {
+                        width: screen === "intro"
+                            ? "33.33%"
+                            : screen === "tools" || screen === "ready"
+                                ? "100%"
+                                : "66.66%",
+                    } }) }), _jsx("main", { className: cn("flex min-h-0 flex-1 overflow-y-auto px-5 sm:px-8", screen === "tools" ? "items-start py-8" : "items-center py-10"), children: _jsx("div", { className: "mx-auto w-full max-w-3xl", children: children }) }), footer && (_jsx("footer", { className: "shrink-0 border-t border-border bg-background/95 px-5 py-3 backdrop-blur-sm sm:px-8", children: footer }))] }));
 }
 function OnboardingSkeleton() {
-    return (_jsxs("div", { className: "fixed inset-0 z-[100] flex min-h-screen flex-col bg-background px-5 py-5 sm:px-8", "data-onboarding-loading": "true", "aria-busy": "true", children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsx(Skeleton, { className: "h-4 w-20" }), _jsx(Skeleton, { className: "h-3 w-8" })] }), _jsx(Skeleton, { className: "mt-5 h-0.5 w-full" }), _jsxs("div", { className: "mx-auto flex w-full max-w-lg flex-1 flex-col items-center justify-center", children: [_jsx(Skeleton, { className: "h-10 w-64" }), _jsx(Skeleton, { className: "mt-3 h-10 w-52" }), _jsx(Skeleton, { className: "mt-7 h-3 w-44" }), _jsx(Skeleton, { className: "mt-7 h-10 w-24 rounded-lg" })] })] }));
+    return (_jsxs("div", { className: "fixed inset-0 z-[100] flex h-full min-h-0 flex-col bg-background", "data-onboarding-loading": "true", "aria-busy": "true", children: [_jsx(Skeleton, { className: "h-0.5 w-full shrink-0" }), _jsxs("div", { className: "mx-auto flex w-full max-w-lg flex-1 flex-col items-center justify-center px-5 sm:px-8", children: [_jsx(Skeleton, { className: "h-10 w-64" }), _jsx(Skeleton, { className: "mt-3 h-10 w-52" }), _jsx(Skeleton, { className: "mt-7 h-3 w-44" }), _jsx(Skeleton, { className: "mt-7 h-10 w-24 rounded-lg" })] })] }));
 }
 function CapabilityList({ capabilities, compact = false, className, }) {
     const visibleCapabilities = useMemo(() => (compact ? capabilities.slice(0, 4) : capabilities), [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 connections" })), _jsx("div", { className: "divide-y divide-border", children: visibleCapabilities.map((capability) => (_jsx(CapabilityRow, { capability: capability, compact: compact }, capability.id))) })] }));
+    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: [_jsxs("span", { className: "relative flex size-8 shrink-0 items-center justify-center overflow-hidden rounded-md border border-border bg-card text-xs font-semibold text-muted-foreground", children: [integration.name.slice(0, 1), _jsx("img", { src: integration.logoUrl, alt: "", className: "absolute inset-0 size-full object-contain p-1", onError: (event) => {
+                                    event.currentTarget.hidden = true;
+                                } })] }), _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] })] }));
 }
 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 }), _jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx("button", { type: "button", "aria-label": `Why ${capability.label} is needed`, className: "inline-flex size-4 items-center justify-center rounded-full text-muted-foreground hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring", onClick: (event) => event.stopPropagation(), onKeyDown: (event) => event.stopPropagation(), children: _jsx(IconInfoCircle, { size: 13 }) }) }), _jsx(TooltipContent, { side: "top", className: "max-w-xs text-xs", children: capability.why })] })] }), _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 ? "text-primary" : "text-muted-foreground"), children: capability.required ? "Required" : "Optional" })] }));
 }
 const primaryButtonClass = "inline-flex min-h-9 items-center justify-center gap-2 rounded-lg bg-primary px-4 text-xs font-medium text-primary-foreground shadow-sm transition-opacity hover:opacity-90 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring";
 const secondaryButtonClass = "inline-flex min-h-9 items-center justify-center gap-2 rounded-lg border border-border bg-background px-4 text-xs font-medium text-foreground transition-colors hover:bg-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring";
+function compareUrl(value) {
+    try {
+        const url = new URL(value.trim());
+        url.hash = "";
+        return url.toString().replace(/\/+$/, "");
+    }
+    catch {
+        return value.trim().replace(/\/+$/, "");
+    }
+}
 //# sourceMappingURL=FirstRunOnboarding.js.map

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

@@ -4,7 +4,7 @@
  * Subpath: `@agent-native/core/client/onboarding`
  */
 export { useOnboarding, type UseOnboardingResult } from "./use-onboarding.js";
-export { useOnboardingPreviewMode, ONBOARDING_PREVIEW_STORAGE_KEY, } from "./use-preview-mode.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";
 export { SetupButton } from "./SetupButton.js";

package/dist/client/onboarding/index.js

@@ -4,7 +4,7 @@
  * Subpath: `@agent-native/core/client/onboarding`
  */
 export { useOnboarding } from "./use-onboarding.js";
-export { useOnboardingPreviewMode, ONBOARDING_PREVIEW_STORAGE_KEY, } from "./use-preview-mode.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";
 export { SetupButton } from "./SetupButton.js";

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

@@ -15,8 +15,11 @@ export function useOnboarding(options = {}) {
     const [loading, setLoading] = useState(true);
     const [error, setError] = useState(null);
     const [dismissed, setDismissed] = useState(false);
-    const [firstRun, setFirstRun] = useState(hasFirstRunCookie);
+    const [firstRun, setFirstRun] = useState(() => preview || hasFirstRunCookie());
     const mountedRef = useRef(true);
+    useEffect(() => {
+        setFirstRun(preview || hasFirstRunCookie());
+    }, [preview]);
     const fetchAll = useCallback(async () => {
         try {
             const stepsUrl = agentNativePath(preview
@@ -99,6 +102,13 @@ export function useOnboarding(options = {}) {
         await fetchAll();
     }, [fetchAll]);
     const completeFirstRun = useCallback(async () => {
+        if (preview) {
+            setFirstRun(false);
+            if (typeof window !== "undefined") {
+                window.dispatchEvent(new CustomEvent("agent-native:first-run-completed"));
+            }
+            return;
+        }
         const response = await fetch(agentNativePath("/_agent-native/onboarding/first-run/complete"), {
             method: "POST",
             headers: { "Content-Type": "application/json" },
@@ -113,7 +123,7 @@ export function useOnboarding(options = {}) {
             window.dispatchEvent(new CustomEvent("agent-native:first-run-completed"));
         }
         await fetchAll();
-    }, [fetchAll]);
+    }, [fetchAll, preview]);
     const totalCount = steps.length;
     const completeCount = steps.filter((s) => s.complete).length;
     const allComplete = steps.filter((s) => s.required).every((s) => s.complete);

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

@@ -4,7 +4,11 @@
  *
  * Storage key matches the dev-overlay option id `framework-onboarding/show-as-new-user`
  * so toggling the option in the overlay automatically activates preview mode here.
+ * The `?onboarding=preview` query also enables it for an existing account.
  */
 export declare const ONBOARDING_PREVIEW_STORAGE_KEY = "agent-native-dev-overlay-option-framework-onboarding-show-as-new-user";
+export declare const ONBOARDING_PREVIEW_QUERY_PARAM = "onboarding";
+export declare const ONBOARDING_PREVIEW_QUERY_VALUE = "preview";
+export declare function isOnboardingPreviewQuery(search: string): boolean;
 export declare function useOnboardingPreviewMode(): boolean;
 //# sourceMappingURL=use-preview-mode.d.ts.map

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

@@ -4,12 +4,21 @@
  *
  * Storage key matches the dev-overlay option id `framework-onboarding/show-as-new-user`
  * so toggling the option in the overlay automatically activates preview mode here.
+ * The `?onboarding=preview` query also enables it for an existing account.
  */
 import { useEffect, useState } from "react";
 export const ONBOARDING_PREVIEW_STORAGE_KEY = "agent-native-dev-overlay-option-framework-onboarding-show-as-new-user";
+export const ONBOARDING_PREVIEW_QUERY_PARAM = "onboarding";
+export const ONBOARDING_PREVIEW_QUERY_VALUE = "preview";
+export function isOnboardingPreviewQuery(search) {
+    return (new URLSearchParams(search).get(ONBOARDING_PREVIEW_QUERY_PARAM) ===
+        ONBOARDING_PREVIEW_QUERY_VALUE);
+}
 function readPreview() {
     if (typeof window === "undefined")
         return false;
+    if (isOnboardingPreviewQuery(window.location.search))
+        return true;
     try {
         return (JSON.parse(window.localStorage.getItem(ONBOARDING_PREVIEW_STORAGE_KEY) || "false") === true);
     }

package/dist/client/resources/BuiltinCapabilityDetail.js

@@ -38,7 +38,7 @@ function StatusBadge({ enabled, status, }) {
 }
 function ToolsSummary({ enabled, status, }) {
     if (!enabled) {
-        return (_jsx("span", { className: "text-[12px] text-muted-foreground", children: "Disabled. Toggle it on to expose MCP tools to the agent." }));
+        return (_jsx("span", { className: "text-[12px] text-muted-foreground", children: "Disabled. Toggle it on to expose agent tools." }));
     }
     if (status?.state === "connected") {
         return (_jsxs("span", { className: "text-[12px] text-foreground", children: [status.toolCount, " tool", status.toolCount === 1 ? "" : "s", " exposed"] }));
@@ -46,6 +46,6 @@ function ToolsSummary({ enabled, status, }) {
     if (status?.state === "error") {
         return (_jsx("span", { className: "text-[12px] text-red-600 dark:text-red-400", children: status.error }));
     }
-    return (_jsx("span", { className: "text-[12px] text-muted-foreground", children: "Enabled. Tools will appear after the MCP manager connects." }));
+    return (_jsx("span", { className: "text-[12px] text-muted-foreground", children: "Enabled. Tools will appear after the agent integration manager connects." }));
 }
 //# sourceMappingURL=BuiltinCapabilityDetail.js.map