@agent-native/core 0.141.6 → 0.144.0

package/dist/client/agent-chat-adapter.js

@@ -131,8 +131,30 @@ export const BACKGROUND_FOLLOW_IDLE_TIMEOUT_MS = 210_000;
 // every poll tick and the follow loop never exits (prod: 26 chained runs over
 // 22 minutes, all error:stale_run, user watching a spinner). These bound the
 // whole turn instead, and an identical repeated failure counts as no progress.
-export const MAX_FOLLOWED_BACKGROUND_RUNS = 6;
-export const MAX_BACKGROUND_FOLLOW_WALL_TIME_MS = 10 * 60_000;
+//
+// CLIENT-ABOVE-SERVER INVARIANT (asserted in agent-chat-adapter.spec.ts).
+// These are a backstop for a server that has gone silent in a way the idle
+// timeout misses — NOT the primary limit. They must stay ABOVE the server's
+// own ceilings so the server, which can actually tell progress from looping,
+// always terminates a turn first and writes a truthful terminal reason:
+//   BACKGROUND_SOFT_TIMEOUT_CEILING_MS  (13 min, run-manager.ts)  — one chunk
+//   MAX_TURN_WALL_CLOCK_MS              (90 min, production-agent.ts) — one turn
+//   MAX_BACKGROUND_RUN_CONTINUATIONS    (20,     production-agent.ts)
+//
+// They were originally set to 10 min / 6 runs, which put the whole-turn client
+// budget BELOW the 13-minute ceiling of a single legal chunk. Any turn needing
+// a second full-length chunk was killed by the client while the server was
+// healthy and had 80 minutes left — measured in prod as turns dying at 11-25
+// minutes with `last_progress_at` tracking the abort, i.e. still streaming
+// tokens and completing tools when the client gave up. That is the top
+// non-auth cause of "the chat just stopped" reports.
+//
+// Killing a turn that is NOT progressing is already covered twice over, by
+// mechanisms that read progress rather than a clock: the 210s idle timeout
+// above, and MAX_REPEATED_BACKGROUND_TERMINAL_REASONS below. Do not re-tighten
+// these two to catch a stuck turn — fix the progress signal instead.
+export const MAX_FOLLOWED_BACKGROUND_RUNS = 24;
+export const MAX_BACKGROUND_FOLLOW_WALL_TIME_MS = 95 * 60_000;
 const MAX_REPEATED_BACKGROUND_TERMINAL_REASONS = 3;
 // A re-observed terminal run whose outcome would be an ERROR (never a
 // genuine "done" success) gets a short extra grace window before the follow
@@ -958,6 +980,65 @@ class AgentStartupTimeoutError extends Error {
         this.timeoutMs = timeoutMs;
     }
 }
+/**
+ * Keep the server's error contract intact across the fetch boundary. In
+ * particular, a POST response with `retryable: false` must not be fed into the
+ * generic reconnect/continuation path: replaying a mutation after the server
+ * has started processing it can duplicate work. The previous code discarded
+ * this metadata and exposed the raw JSON body to the user instead.
+ */
+class AgentChatHttpError extends Error {
+    errorCode;
+    details;
+    retryable;
+    upgradeUrl;
+    constructor(error) {
+        super(error.message);
+        this.name = "AgentChatHttpError";
+        this.errorCode = error.errorCode;
+        this.details = error.details;
+        this.retryable = error.retryable;
+        this.upgradeUrl = error.upgradeUrl;
+    }
+}
+function parseStructuredAgentChatError(body) {
+    if (!body.trim())
+        return null;
+    try {
+        const parsed = JSON.parse(body);
+        if (!parsed || typeof parsed !== "object")
+            return null;
+        const message = typeof parsed.error === "string"
+            ? parsed.error
+            : typeof parsed.message === "string"
+                ? parsed.message
+                : "";
+        if (!message)
+            return null;
+        return {
+            message,
+            ...(typeof parsed.code === "string"
+                ? { errorCode: parsed.code }
+                : typeof parsed.errorCode === "string"
+                    ? { errorCode: parsed.errorCode }
+                    : {}),
+            ...(typeof parsed.details === "string"
+                ? { details: parsed.details }
+                : {}),
+            ...(typeof parsed.retryable === "boolean"
+                ? { retryable: parsed.retryable }
+                : {}),
+            ...(typeof parsed.upgradeUrl === "string"
+                ? { upgradeUrl: parsed.upgradeUrl }
+                : {}),
+        };
+    }
+    catch (error) {
+        if (error instanceof SyntaxError)
+            return null;
+        throw error;
+    }
+}
 async function fetchWithStartupTimeout(input, init, timeoutMs, abortSignal) {
     if (abortSignal.aborted) {
         throw new DOMException("The operation was aborted.", "AbortError");
@@ -2185,7 +2266,12 @@ export function createAgentChatAdapter(options) {
                         if (Date.now() - followStartedAt >=
                             MAX_BACKGROUND_FOLLOW_WALL_TIME_MS) {
                             yield* stopBackgroundTurnBeforeReporting({
-                                message: `The agent kept restarting this step for ${Math.round(MAX_BACKGROUND_FOLLOW_WALL_TIME_MS / 60_000)} minutes without finishing it. It was stopped so you can retry from the preserved chat context — a smaller request usually gets through.`,
+                                // Says only what this backstop actually knows. It fires on a
+                                // clock, so it cannot tell a looping turn from one that was
+                                // still working — the old copy asserted "kept restarting
+                                // without finishing", which prod runs contradicted: they were
+                                // streaming tokens right up to the abort.
+                                message: `This turn ran for ${Math.round(MAX_BACKGROUND_FOLLOW_WALL_TIME_MS / 60_000)} minutes without finishing, so it was stopped. Your chat context is preserved — retrying, or splitting this into smaller requests, usually gets through.`,
                                 errorCode: "background_follow_time_budget_exhausted",
                                 details: `followed_runs: ${followedRunIds.size}`,
                             });
@@ -2716,7 +2802,7 @@ export function createAgentChatAdapter(options) {
                                 const body = await res.text();
                                 const parsed = JSON.parse(body);
                                 if (parsed.error) {
-                                    throw new Error(parsed.error);
+                                    throw new Error(String(parsed.error));
                                 }
                             }
                             catch (e) {
@@ -2850,6 +2936,7 @@ export function createAgentChatAdapter(options) {
                             let errorText = `Server error: ${res.status}`;
                             try {
                                 const body = await res.text();
+                                const structuredError = parseStructuredAgentChatError(body);
                                 if (isAuthErrorMessage(body)) {
                                     if (await tryRecoverAuthOnce()) {
                                         continue;
@@ -2893,11 +2980,25 @@ export function createAgentChatAdapter(options) {
                                         "Agent chat endpoint not found. Make sure the agent-chat plugin is loaded in server/plugins/.";
                                 }
                                 else if (body) {
-                                    errorText =
-                                        body.length > 200 ? body.slice(0, 200) + "..." : body;
+                                    // A non-retryable structured response is a terminal server
+                                    // outcome. Preserve its code and stop before the generic
+                                    // connection recovery below can POST the same turn again.
+                                    if (structuredError &&
+                                        (structuredError.retryable === false ||
+                                            structuredError.errorCode === "database_unavailable")) {
+                                        throw new AgentChatHttpError(structuredError);
+                                    }
+                                    errorText = structuredError
+                                        ? structuredError.message
+                                        : body.length > 200
+                                            ? body.slice(0, 200) + "..."
+                                            : body;
                                 }
                             }
-                            catch { }
+                            catch (error) {
+                                if (error instanceof AgentChatHttpError)
+                                    throw error;
+                            }
                             throw new Error(errorText);
                         }
                         if (!res.body) {
@@ -3068,6 +3169,51 @@ export function createAgentChatAdapter(options) {
                                 return;
                             continue;
                         }
+                        if (err instanceof AgentChatHttpError) {
+                            const normalized = normalizeChatError(err.message, err.errorCode);
+                            const details = [err.details, normalized.details]
+                                .filter(Boolean)
+                                .join("\n\n");
+                            const runError = {
+                                message: normalized.message,
+                                ...(details ? { details } : {}),
+                                ...(err.errorCode ? { errorCode: err.errorCode } : {}),
+                                recoverable: err.retryable === true,
+                                ...(runId ? { runId } : {}),
+                            };
+                            captureChatClientError(err, "server-error", {
+                                ...(err.errorCode ? { errorCode: err.errorCode } : {}),
+                                retryable: err.retryable ?? false,
+                            });
+                            if (typeof window !== "undefined") {
+                                window.dispatchEvent(new CustomEvent("agent-chat:run-error", {
+                                    detail: {
+                                        ...runError,
+                                        ...(err.upgradeUrl ? { upgradeUrl: err.upgradeUrl } : {}),
+                                        tabId,
+                                    },
+                                }));
+                            }
+                            settleInterruptedToolCalls(content, undefined, {
+                                includeActivity: true,
+                            });
+                            content.push({
+                                type: "text",
+                                text: `Something went wrong: ${normalized.message}`,
+                            });
+                            yield {
+                                content: [...content],
+                                status: {
+                                    type: "incomplete",
+                                    reason: "error",
+                                },
+                                metadata: {
+                                    custom: { ...(runId ? { runId } : {}), runError },
+                                },
+                            };
+                            clearActiveRun();
+                            return;
+                        }
                         const errMsg = err instanceof Error ? err.message : "Something went wrong.";
                         const isAuthError = isAuthErrorMessage(errMsg);
                         // Don't try to reconnect for auth/client errors — show error directly

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

@@ -1,5 +1,5 @@
 import { type ReactNode } from "react";
-export type AgentWorkspaceTab = "overview" | "resources" | "automations" | "agents" | "access";
+export type AgentWorkspaceTab = "overview" | "resources" | "automations" | "agents";
 export declare function AgentWorkspaceContent({ overview, className, activeTab, }: {
     overview: ReactNode;
     activeTab: AgentWorkspaceTab;

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

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { IconBook2, IconBolt, IconChecklist, IconFolder, IconHierarchy2, IconHistory, IconNotes, IconShieldLock, IconTopologyRing2, } from "@tabler/icons-react";
+import { IconBook2, IconBolt, IconChecklist, IconFolder, IconHierarchy2, IconHistory, IconNotes, IconTopologyRing2, } from "@tabler/icons-react";
 import { lazy, Suspense, useEffect, useState } from "react";
 import { AgentsSection } from "../settings/AgentsSection.js";
 import { cn } from "../utils.js";
@@ -21,7 +21,6 @@ const HUB_TABS = [
     { id: "resources", label: "Resources", icon: IconFolder },
     { id: "automations", label: "Automations", icon: IconBolt },
     { id: "agents", label: "Connected agents", icon: IconTopologyRing2 },
-    { id: "access", label: "Access", icon: IconShieldLock },
 ];
 const RESOURCE_IDS = new Set(RESOURCE_TABS.map((tab) => tab.id));
 function normalizeHash(value) {
@@ -31,9 +30,15 @@ function initialHubState() {
     if (typeof window === "undefined") {
         return { tab: "overview", resource: "files" };
     }
+    const pathParts = window.location.pathname.split("/").filter(Boolean);
+    const settingsIndex = pathParts.indexOf("settings");
+    const settingsPath = settingsIndex === -1 ? [] : pathParts.slice(settingsIndex + 1);
+    const routeParts = settingsPath[0] === "agent" ? settingsPath : ["agent", ...settingsPath];
     const hash = normalizeHash(window.location.hash);
-    const parts = hash.split(":");
-    const scoped = parts[0] === "agent";
+    const hashParts = hash.split(":");
+    const pathScoped = settingsPath[0] === "agent";
+    const scoped = pathScoped || hashParts[0] === "agent";
+    const parts = pathScoped ? routeParts : hashParts;
     const requested = scoped ? parts[1] : hash;
     const resource = scoped && RESOURCE_IDS.has(parts[2])
         ? parts[2]
@@ -54,8 +59,6 @@ function initialHubState() {
         requested === "remote-agents") {
         return { tab: "agents", resource };
     }
-    if (requested === "access")
-        return { tab: "access", resource };
     return { tab: "overview", resource };
 }
 function ResourceContent({ resource }) {
@@ -65,8 +68,8 @@ function ResourceContent({ resource }) {
                     const selected = tab.id === resource;
                     return (_jsxs("button", { type: "button", onClick: () => {
                             if (typeof window !== "undefined") {
-                                window.history.pushState(null, "", `${window.location.pathname}${window.location.search}#agent:resources:${tab.id}`);
-                                window.dispatchEvent(new Event("hashchange"));
+                                window.history.pushState(null, "", `/settings/agent/resources/${tab.id}${window.location.search}`);
+                                window.dispatchEvent(new Event("popstate"));
                             }
                         }, className: cn("inline-flex shrink-0 items-center gap-1.5 rounded-md px-2.5 py-1.5 text-xs font-medium transition-colors", selected
                             ? "bg-accent text-foreground"
@@ -75,9 +78,6 @@ function ResourceContent({ resource }) {
                             ? "Add context the agent can use across conversations."
                             : "Manage the resources that shape how the agent works." })] }), _jsx(Suspense, { fallback: _jsx("div", { className: "h-48 animate-pulse rounded-xl border border-border bg-muted/20" }), children: _jsx(ResourcesPanel, { showMcpServers: false, resourceFilter: resource, resourceTreeVariant: "collection", scope: "personal" }, resource) })] }));
 }
-function AccessContent() {
-    return (_jsx("div", { children: _jsx("div", { className: "rounded-xl border border-border/70 bg-card text-card-foreground", children: _jsx("div", { className: "px-5 py-5 sm:px-6", children: _jsxs("div", { className: "flex items-start gap-3", children: [_jsx("span", { className: "flex size-9 shrink-0 items-center justify-center rounded-lg border border-border bg-background text-muted-foreground", children: _jsx(IconShieldLock, { className: "size-4" }) }), _jsxs("div", { className: "min-w-0", children: [_jsx("p", { className: "text-sm font-medium text-foreground", children: "Agent access" }), _jsx("p", { className: "mt-1 text-sm leading-5 text-muted-foreground", children: "Use the agent card and MCP endpoints from connected clients." })] })] }) }) }) }));
-}
 export function AgentWorkspaceContent({ overview, className, activeTab, }) {
     const [{ resource }, setState] = useState(initialHubState);
     useEffect(() => {
@@ -98,8 +98,8 @@ export function AgentWorkspaceContent({ overview, className, activeTab, }) {
                 ? "Schedule and manage agent tasks."
                 : activeTab === "agents"
                     ? "Connect agents to delegate work from chat."
-                    : "Control how other apps and agents access this agent.";
-    return (_jsxs("div", { className: cn("w-full space-y-6", className), children: [_jsxs("header", { className: "space-y-1", children: [_jsx("h1", { className: "text-2xl font-semibold tracking-tight text-foreground", children: activeTab === "overview" ? "Agent" : page?.label }), _jsx("p", { className: "text-sm leading-5 text-muted-foreground", children: pageDescription })] }), activeTab === "overview" && overview, activeTab === "resources" && _jsx(ResourceContent, { resource: resource }), activeTab === "automations" && (_jsx(Suspense, { fallback: _jsx("div", { className: "h-48 animate-pulse rounded-xl border border-border bg-muted/20" }), children: _jsx(AgentJobsTab, { scope: "user", canManageOrg: true, hideHeader: true }) })), activeTab === "agents" && _jsx(AgentsSection, {}), activeTab === "access" && _jsx(AccessContent, {})] }));
+                    : "Configure how your agent works, what it knows, and what it can do.";
+    return (_jsxs("div", { className: cn("w-full space-y-6", className), children: [_jsxs("header", { className: "space-y-1", children: [_jsx("h1", { className: "text-2xl font-semibold tracking-tight text-foreground", children: activeTab === "overview" ? "Agent" : page?.label }), _jsx("p", { className: "text-sm leading-5 text-muted-foreground", children: pageDescription })] }), activeTab === "overview" && overview, activeTab === "resources" && _jsx(ResourceContent, { resource: resource }), activeTab === "automations" && (_jsx(Suspense, { fallback: _jsx("div", { className: "h-48 animate-pulse rounded-xl border border-border bg-muted/20" }), children: _jsx(AgentJobsTab, { scope: "user", canManageOrg: true, hideHeader: true }) })), activeTab === "agents" && _jsx(AgentsSection, {})] }));
 }
 export function agentWorkspaceTabHash(tab) {
     return `agent:${tab}`;

package/dist/client/assistant-ui-recovery.d.ts

@@ -8,6 +8,7 @@ type AssistantUiStaleIndexErrorBoundaryProps = {
     /** Remount children when the recovery scope changes. */
     remountOnResetKey?: boolean;
     componentName?: string;
+    fallback?: React.ReactNode;
     children: React.ReactNode;
 };
 type AssistantUiStaleIndexErrorBoundaryState = {
@@ -26,7 +27,7 @@ export declare class AssistantUiStaleIndexErrorBoundary extends React.Component<
     componentDidCatch(error: unknown, info: React.ErrorInfo): void;
     componentDidUpdate(prevProps: AssistantUiStaleIndexErrorBoundaryProps, prevState: AssistantUiStaleIndexErrorBoundaryState): void;
     componentWillUnmount(): void;
-    render(): React.JSX.Element | null;
+    render(): string | number | bigint | boolean | React.JSX.Element | Iterable<React.ReactNode> | Promise<string | number | bigint | boolean | Iterable<React.ReactNode> | React.ReactElement<unknown, string | React.JSXElementConstructor<any>> | React.ReactPortal | null | undefined> | null;
 }
 export declare function AssistantMessageListErrorBoundary({ resetKey, children, }: {
     resetKey: string;

package/dist/client/assistant-ui-recovery.js

@@ -1,4 +1,5 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { IconLoader2 } from "@tabler/icons-react";
 import React from "react";
 import { captureError } from "./analytics.js";
 export function assistantUiRecoverableRenderErrorKind(error) {
@@ -114,7 +115,7 @@ export class AssistantUiStaleIndexErrorBoundary extends React.Component {
                 this.state.recovery.retryCount > MAX_ASSISTANT_UI_RECOVERABLE_RETRIES) {
                 throw this.state.error;
             }
-            return null;
+            return this.props.fallback ?? null;
         }
         const fragmentKey = this.props.remountOnResetKey === false
             ? String(this.state.retryToken)
@@ -123,5 +124,8 @@ export class AssistantUiStaleIndexErrorBoundary extends React.Component {
     }
 }
 export function AssistantMessageListErrorBoundary({ resetKey, children, }) {
-    return (_jsx(AssistantUiStaleIndexErrorBoundary, { resetKey: resetKey, remountOnResetKey: false, componentName: "AssistantMessageList", children: children }));
+    return (_jsx(AssistantUiStaleIndexErrorBoundary, { resetKey: resetKey, remountOnResetKey: false, componentName: "AssistantMessageList", fallback: _jsx(AssistantUiRecoverableRenderFallback, {}), children: children }));
+}
+function AssistantUiRecoverableRenderFallback() {
+    return (_jsxs("div", { "aria-label": "Updating chat", className: "flex min-h-8 items-center justify-center text-muted-foreground", role: "status", children: [_jsx(IconLoader2, { className: "size-3.5 animate-spin", "aria-hidden": "true" }), _jsx("span", { className: "sr-only", children: "Updating chat..." })] }));
 }

package/dist/client/chat/run-recovery.js

@@ -227,7 +227,11 @@ export function RunErrorRecoveryCard({ info, onContinue, onRetry, onFork, onDism
     const canRecover = info.recoverable === true;
     const shouldShowBuilderReconnect = isBuilderReconnectRunError(info);
     const isProviderAuthError = isProviderAuthenticationError([info.message, info.details].filter(Boolean).join("\n"), info.errorCode);
-    const canRetry = canRecover || isProviderAuthError;
+    // Blocked on something the reader goes and fixes elsewhere, then comes back
+    // to. Without a retry the card is a dead end and its own copy ("then retry")
+    // points at a button that isn't there.
+    const isUnblockableExternally = info.errorCode === "email_verification_required";
+    const canRetry = canRecover || isProviderAuthError || isUnblockableExternally;
     const builderReconnectResolved = shouldShowBuilderReconnect &&
         builderReconnect.hasFetchedStatus &&
         builderReconnect.configured;

package/dist/client/embed-auth.js

@@ -1,4 +1,5 @@
 import { EMBED_MODE_QUERY_PARAM, EMBED_START_PATH, EMBED_TARGET_HEADER, EMBED_TARGET_QUERY_PARAM, EMBED_TOKEN_QUERY_PARAM, MCP_APP_CHAT_BRIDGE_QUERY_PARAM, } from "../shared/embed-auth.js";
+import { SIGN_IN_ENTRY_PATH, SIGN_IN_LEGACY_ENTRY_PATH, } from "../shared/sign-in-journey.js";
 let installed = false;
 let memoryToken = null;
 let mcpChatBridgeActive = false;
@@ -322,9 +323,12 @@ function shouldGuardAuthFailure(method, url) {
     if (url.pathname === EMBED_START_PATH)
         return false;
     // Suffix, not equality: an app mounted under a base path serves
-    // `/<app>/_agent-native/sign-in`, which the old exact match never matched.
-    if (url.pathname.endsWith("/_agent-native/sign-in"))
+    // `/<app>/sign-in` (or the legacy framework path), which an exact match
+    // would miss.
+    if (url.pathname.endsWith(SIGN_IN_ENTRY_PATH) ||
+        url.pathname.endsWith(SIGN_IN_LEGACY_ENTRY_PATH)) {
         return false;
+    }
     return true;
 }
 function activeAuthFailure(record) {

package/dist/client/error-format.js

@@ -100,6 +100,18 @@ export function normalizeChatError(errorMessage, errorCode) {
             details: text,
         };
     }
+    // Reaches us as a bare gateway 403 with no upgradeUrl, so before this case
+    // it fell all the way through to the raw upstream sentence under a generic
+    // "The agent hit an error" headline, with no retry and no action — a dead
+    // end. It was the single largest cause of turns ending without an answer in
+    // one app, and reads to the user as the chat being broken rather than as
+    // something one person can fix in a minute.
+    if (code === "email_verification_required") {
+        return {
+            message: "AI is paused until an email address in this workspace is verified. Check the inbox for the verification link, then retry.",
+            details: text,
+        };
+    }
     // A model/parameter combination this provider will never accept. Retrying is
     // pointless and the raw sentence names an API surface the reader has no way
     // to act on, so say what they can actually change.

package/dist/client/integrations/IntegrationsPanel.js

@@ -1,12 +1,12 @@
 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 { IconPlus, IconBrandSlack, IconBrandTelegram, IconBrandWhatsapp, IconBrandGoogleDrive, IconTerminal2, IconBuildingSkyscraper, IconCopy, IconCheck, IconChevronLeft, IconChevronRight, 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 { McpIntegrationDialog } from "../resources/McpIntegrationDialog.js";
-import { useCreateMcpServer, useDeleteMcpServer, useMcpServers, } from "../resources/use-mcp-servers.js";
+import { useCreateMcpServer, useDeleteMcpServer, useMcpServers, useReconnectMcpServer, } from "../resources/use-mcp-servers.js";
 import { useIntegrationStatus, } from "./useIntegrationStatus.js";
 import { isNonPublicWebhookUrl } from "./webhook-url.js";
 const PLATFORMS = [
@@ -257,12 +257,19 @@ 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 }) {
+function McpServerStatus({ server, onReconnect, reconnecting = false, reconnectError, }) {
+    const t = useT();
     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("div", { className: "flex min-w-0 flex-1 flex-col gap-2 sm:flex-row sm:items-start sm:justify-between", children: [_jsxs("div", { className: "min-w-0", children: [_jsxs("div", { className: "inline-flex items-center gap-1.5 text-xs text-destructive", children: [_jsx("span", { className: "size-1.5 rounded-full bg-destructive" }), t("mcpIntegrations.connectionError")] }), _jsx("p", { className: "mt-1 max-w-3xl break-words text-xs leading-5 text-destructive/85", children: t("mcpIntegrations.connectionErrorReason", {
+                                reason: server.status.error,
+                            }) }), reconnectError && (_jsx("p", { className: "mt-1 break-words text-xs leading-5 text-destructive", children: t("mcpIntegrations.reconnectFailed", {
+                                error: reconnectError,
+                            }) }))] }), onReconnect && (_jsxs("button", { type: "button", onClick: onReconnect, disabled: reconnecting, className: "inline-flex shrink-0 items-center gap-1.5 rounded-md border border-border bg-background px-2.5 py-1.5 text-xs font-medium text-foreground transition-colors hover:bg-accent disabled:cursor-wait disabled:opacity-60", children: [reconnecting ? (_jsx(IconLoader2, { className: "size-3.5 animate-spin" })) : (_jsx(IconRefresh, { className: "size-3.5" })), reconnecting
+                            ? t("mcpIntegrations.reconnecting")
+                            : t("mcpIntegrations.reconnect")] }))] }));
     }
     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"] }));
 }
@@ -273,10 +280,13 @@ function McpIntegrationsSection({ query }) {
     const serversQuery = useMcpServers();
     const createServer = useCreateMcpServer();
     const deleteServer = useDeleteMcpServer();
+    const reconnectServer = useReconnectMcpServer();
     const [dialogOpen, setDialogOpen] = useState(false);
     const [initialIntegrationId, setInitialIntegrationId] = useState(null);
     const [deleteTarget, setDeleteTarget] = useState(null);
     const [deleteError, setDeleteError] = useState(null);
+    const [reconnectingKey, setReconnectingKey] = useState(null);
+    const [reconnectError, setReconnectError] = useState(null);
     const catalog = useMemo(() => getDefaultMcpIntegrations(), []);
     const normalizedQuery = query.trim().toLowerCase();
     const filteredCatalog = useMemo(() => {
@@ -318,14 +328,38 @@ function McpIntegrationsSection({ query }) {
                 : "Could not remove agent integration.");
         }
     }, [deleteServer, deleteTarget]);
+    const reconnect = useCallback(async (server) => {
+        const key = `${server.scope}:${server.id}`;
+        setReconnectingKey(key);
+        setReconnectError(null);
+        try {
+            await reconnectServer.mutateAsync({
+                id: server.id,
+                scope: server.scope,
+            });
+        }
+        catch (error) {
+            setReconnectError({
+                key,
+                message: error instanceof Error ? error.message : String(error),
+            });
+        }
+        finally {
+            setReconnectingKey(null);
+        }
+    }, [reconnectServer]);
     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"
+                                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 })] }), 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));
+                                                                : "Organization" })] }), _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) })] }));
 }
 export function IntegrationsPanel() {

package/dist/client/onboarding/FirstRunOnboarding.js

@@ -4,7 +4,7 @@ import { IconArrowRight, IconBrandGithub, IconCheck, IconExternalLink, IconInfoC
 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 { buildMcpOAuthStartUrl, filterMcpIntegrations, getDefaultMcpIntegrations, navigateToMcpOAuthStart, shouldOfferMcpIntegrationOrganizationScope, } 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";
@@ -112,6 +112,10 @@ export function FirstRunOnboarding({ skipIntegrations = shouldSkipFirstRunIntegr
             connectingIntegrationId === integration.id) {
             return;
         }
+        if (shouldOfferMcpIntegrationOrganizationScope(integration, hasOrg, canCreateOrgMcp)) {
+            setIntegrationDialogId(integration.id);
+            return;
+        }
         if (integration.authMode === "none" &&
             integration.connectionMode === "direct") {
             setConnectingIntegrationId(integration.id);
@@ -165,7 +169,7 @@ export function FirstRunOnboarding({ skipIntegrations = shouldSkipFirstRunIntegr
         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 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) => {
+        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) => {
                                     if (event.key !== "Enter" && event.key !== " ")
                                         return;
                                     event.preventDefault();
@@ -179,7 +183,7 @@ export function FirstRunOnboarding({ skipIntegrations = shouldSkipFirstRunIntegr
         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 }))] }));
+                    }, initialIntegrationId: 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" })] }))] }) }));
@@ -231,7 +235,10 @@ function McpIntegrationCard({ integration, connected, busy, onConnect, }) {
                                 } })] }), _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" })] }));
+    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 ? "text-primary" : "text-muted-foreground"), children: capability.required ? "Required" : "Optional" })] }));
+}
+function CapabilityInfoButton({ capability, ariaLabel, }) {
+    return (_jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx("button", { type: "button", "aria-label": ariaLabel, 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 })] }));
 }
 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";

package/dist/client/org/OrgSwitcher.js

@@ -30,8 +30,8 @@ const SECTION_LABEL_CLASS = "px-2.5 pt-1 pb-0.5 text-[10px] uppercase tracking-w
 const APP_SUBMENU_CONTENT_CLASS = "z-50 w-72 rounded-md border border-border bg-popover p-1 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2";
 const SWITCHER_BUTTON_CLASS = "flex w-full items-center gap-2 rounded-md border-0 bg-accent/50 px-2.5 py-1.5 text-xs font-medium text-muted-foreground hover:bg-accent/70 hover:text-foreground focus:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-60 cursor-pointer";
 const COMPACT_SWITCHER_BUTTON_CLASS = "flex items-center justify-center rounded-md border-0 bg-accent/50 p-1.5 text-muted-foreground hover:bg-accent/70 hover:text-foreground focus:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-60 cursor-pointer";
-const DEFAULT_ORGANIZATION_SETTINGS_PATH = "/settings#organization";
-const DEFAULT_PROFILE_PATH = "/settings#account";
+const DEFAULT_ORGANIZATION_SETTINGS_PATH = "/settings/organization";
+const DEFAULT_PROFILE_PATH = "/settings/account";
 const DEFAULT_AGENT_PATH = "/agent";
 const APP_ICON_MAP = {
     Mail: IconMail,