@agent-native/core 0.176.1 → 0.176.2-nightly-20260831184159

package/dist/client/settings/SettingsTabsPage.js

@@ -2,7 +2,7 @@ import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-run
 import { Tabs, useDesignSystem } from "@agent-native/toolkit/design-system";
 import { IconArrowUpRight, IconHistory, IconSearch, IconSettings, IconUserCircle, IconUsers, IconX, } from "@tabler/icons-react";
 import { useCallback, useEffect, useMemo, useRef, useState, } from "react";
-import { Link } from "react-router";
+import { Link, useInRouterContext, useLocation } from "react-router";
 import { appBasePath, appPath } from "../../client/api-path.js";
 import { buildSettingsRoute } from "../../navigation/index.js";
 import { cn } from "../utils.js";
@@ -68,13 +68,14 @@ function resolveTabId(tabs, value) {
     }
     return null;
 }
-function activeTabFromLocation(tabs, defaultTab) {
-    if (typeof window === "undefined")
+function activeTabFromLocation(tabs, defaultTab, location) {
+    if (typeof window === "undefined" && !location)
         return defaultTab;
-    const pathname = appLocalPathname();
+    const pathname = appLocalPathname(location?.pathname);
+    const hash = location?.hash ?? window.location.hash;
     const settingsPrefix = "/settings";
     if (pathname === settingsPrefix) {
-        return resolveTabId(tabs, window.location.hash) ?? defaultTab;
+        return resolveTabId(tabs, hash) ?? defaultTab;
     }
     if (pathname.startsWith(`${settingsPrefix}/`)) {
         const segments = pathname
@@ -95,18 +96,18 @@ function activeTabFromLocation(tabs, defaultTab) {
                 return tabId;
         }
     }
-    return resolveTabId(tabs, window.location.hash) ?? defaultTab;
+    return resolveTabId(tabs, hash) ?? defaultTab;
 }
-function appLocalPathname() {
-    if (typeof window === "undefined")
+function appLocalPathname(pathname) {
+    if (typeof window === "undefined" && !pathname)
         return "/";
-    const pathname = window.location.pathname;
+    const currentPathname = pathname ?? window.location.pathname;
     const basePath = appBasePath();
     if (basePath &&
-        (pathname === basePath || pathname.startsWith(`${basePath}/`))) {
-        return pathname.slice(basePath.length) || "/";
+        (currentPathname === basePath || currentPathname.startsWith(`${basePath}/`))) {
+        return currentPathname.slice(basePath.length) || "/";
     }
-    return pathname;
+    return currentPathname;
 }
 function buildSettingsEntryRoute(tabId, section) {
     const normalizedSection = section?.replace(/^#/, "").trim();
@@ -126,6 +127,7 @@ function updateRouteForTab(tabId, section) {
         return;
     const route = buildSettingsEntryRoute(tabId, section);
     window.history.pushState(null, "", `${appPath(route)}${window.location.search}`);
+    window.dispatchEvent(new Event("popstate"));
 }
 function isEditableElement(element) {
     if (!(element instanceof HTMLElement))
@@ -136,7 +138,7 @@ function isEditableElement(element) {
         tagName === "select" ||
         element.isContentEditable);
 }
-export function SettingsTabsPage({ general, account, team, whatsNew, extraTabs = [], generalLabel = "General", accountLabel = "Account", teamLabel = "Team", whatsNewLabel = "What's new", ariaLabel = "Settings sections", defaultTab = "general", className, navClassName, navHeader, contentClassName, enableSearch = true, searchPlaceholder = "Search settings", searchEntries, generalSearchEntries, value, onValueChange, }) {
+function SettingsTabsPageContent({ general, account, team, whatsNew, extraTabs = [], generalLabel = "General", accountLabel = "Account", teamLabel = "Team", whatsNewLabel = "What's new", ariaLabel = "Settings sections", defaultTab = "general", className, navClassName, navHeader, contentClassName, enableSearch = true, searchPlaceholder = "Search settings", searchEntries, generalSearchEntries, value, onValueChange, routerLocation, }) {
     const rootRef = useRef(null);
     const searchInputRef = useRef(null);
     const autoFocusedSearchRef = useRef(false);
@@ -224,7 +226,7 @@ export function SettingsTabsPage({ general, account, team, whatsNew, extraTabs =
         agent: "Agent",
     };
     const isControlled = value !== undefined;
-    const [internalTab, setInternalTab] = useState(() => activeTabFromLocation(tabs, fallbackTab));
+    const [internalTab, setInternalTab] = useState(() => activeTabFromLocation(tabs, fallbackTab, routerLocation));
     const activeTab = isControlled ? value : internalTab;
     const [query, setQuery] = useState("");
     const designSystem = useDesignSystem();
@@ -246,13 +248,19 @@ export function SettingsTabsPage({ general, account, team, whatsNew, extraTabs =
     useEffect(() => {
         if (isControlled)
             return;
-        const syncLocation = () => {
-            const fromPath = activeTabFromLocation(tabs, fallbackTab);
+        const syncLocation = (event) => {
+            // Native history events carry the live browser URL. Reading the
+            // render-captured router location here would re-canonicalize the same
+            // legacy hash before BrowserRouter has rerendered.
+            const location = event ? undefined : routerLocation;
+            const pathname = location?.pathname ?? window.location.pathname;
+            const hash = location?.hash ?? window.location.hash;
+            const fromPath = activeTabFromLocation(tabs, fallbackTab, location);
             if (fromPath)
                 setInternalTab(fromPath);
-            if (appLocalPathname().startsWith("/settings/"))
+            if (appLocalPathname(pathname).startsWith("/settings/"))
                 return;
-            const hashValue = window.location.hash.replace(/^#/, "");
+            const hashValue = hash.replace(/^#/, "");
             const fromHash = resolveTabId(tabs, hashValue);
             if (!fromHash || !hashValue)
                 return;
@@ -266,18 +274,20 @@ export function SettingsTabsPage({ general, account, team, whatsNew, extraTabs =
             window.removeEventListener("hashchange", syncLocation);
             window.removeEventListener("popstate", syncLocation);
         };
-    }, [fallbackTab, isControlled, tabs]);
+    }, [fallbackTab, isControlled, routerLocation, tabs]);
     useEffect(() => {
         if (!isControlled)
             return;
         const syncControlledLocation = () => {
-            const fromPath = appLocalPathname().startsWith("/settings/")
-                ? activeTabFromLocation(tabs, defaultTab)
+            const pathname = routerLocation?.pathname ?? window.location.pathname;
+            const hash = routerLocation?.hash ?? window.location.hash;
+            const fromPath = appLocalPathname(pathname).startsWith("/settings/")
+                ? activeTabFromLocation(tabs, defaultTab, routerLocation)
                 : null;
-            const hashValue = window.location.hash.replace(/^#/, "");
+            const hashValue = hash.replace(/^#/, "");
             const fromHash = hashValue ? resolveTabId(tabs, hashValue) : null;
             const next = fromPath ?? fromHash;
-            const key = `${window.location.pathname}${window.location.hash}`;
+            const key = `${pathname}${hash}`;
             if (!next || next === value || controlledHashRef.current === key) {
                 controlledHashRef.current = key;
                 return;
@@ -292,7 +302,7 @@ export function SettingsTabsPage({ general, account, team, whatsNew, extraTabs =
             window.removeEventListener("hashchange", syncControlledLocation);
             window.removeEventListener("popstate", syncControlledLocation);
         };
-    }, [defaultTab, isControlled, onValueChange, tabs, value]);
+    }, [defaultTab, isControlled, onValueChange, routerLocation, tabs, value]);
     useEffect(() => {
         if (!enableSearch || autoFocusedSearchRef.current)
             return;
@@ -384,7 +394,6 @@ export function SettingsTabsPage({ general, account, team, whatsNew, extraTabs =
         if (section) {
             updateRouteForTab(entry.tabId, section);
             // Let the inner panels open + scroll to their section.
-            window.dispatchEvent(new Event("popstate"));
             window.dispatchEvent(new Event("hashchange"));
             window.requestAnimationFrame(() => {
                 document
@@ -447,3 +456,11 @@ export function SettingsTabsPage({ general, account, team, whatsNew, extraTabs =
                                                 : "text-muted-foreground hover:bg-accent/50 hover:text-foreground"), children: tabContent }, tab.id));
                                     })] }) }, group.id))) }))] }), _jsx("div", { id: `settings-tabpanel-${selectedTab?.id ?? "general"}`, role: "tabpanel", "aria-labelledby": `settings-tab-${selectedTab?.id ?? "general"}`, className: cn("min-h-0 min-w-0 flex-1 overflow-y-auto px-4 py-4 sm:px-6 sm:py-6 lg:px-8 lg:py-8", contentClassName), children: _jsx("div", { className: "mx-auto flex w-full max-w-6xl min-w-0 flex-col gap-6", children: selectedTab?.content }) })] }));
 }
+function SettingsTabsPageWithRouter(props) {
+    const location = useLocation();
+    return _jsx(SettingsTabsPageContent, { ...props, routerLocation: location });
+}
+export function SettingsTabsPage(props) {
+    const inRouterContext = useInRouterContext();
+    return inRouterContext ? (_jsx(SettingsTabsPageWithRouter, { ...props })) : (_jsx(SettingsTabsPageContent, { ...props }));
+}

package/dist/client/settings/VoiceTranscriptionSection.js

@@ -15,9 +15,10 @@ import { IconAlertCircle, IconCheck, IconChevronDown, IconChevronRight, IconExte
 import { useCallback, useEffect, useState } from "react";
 import { buildSettingsRoute } from "../../navigation/index.js";
 import { agentNativePath } from "../api-path.js";
+import { BuilderConnectPopover } from "./BuilderConnectPopover.js";
 import { SettingsRow } from "./SettingsRow.js";
 import { SettingsSkeleton } from "./SettingsSkeleton.js";
-import { openBuilderConnectPopup, useBuilderStatus, } from "./useBuilderStatus.js";
+import { useBuilderConnectFlow, useBuilderStatus } from "./useBuilderStatus.js";
 const PREFS_URL = agentNativePath("/_agent-native/application-state/voice-transcription-prefs");
 const CLEANUP_PREFS_URL = agentNativePath("/_agent-native/application-state/voice-cleanup-prefs");
 const SECRETS_URL = agentNativePath("/_agent-native/secrets");
@@ -73,7 +74,16 @@ export function VoiceTranscriptionSection({ compact = false, } = {}) {
     const [saveError, setSaveError] = useState(null);
     const [showAdvanced, setShowAdvanced] = useState(false);
     const [cleanupEnabled, setCleanupEnabled] = useState(null);
-    const { status: builderStatus } = useBuilderStatus();
+    const { status: builderStatus, refetch: refetchBuilderStatus } = useBuilderStatus();
+    const builderConnect = useBuilderConnectFlow({
+        popupUrl: builderStatus?.connectUrl,
+        provisionAccount: true,
+        trackingSource: "voice_transcription_settings",
+        trackingFlow: "voice_transcription",
+        onConnected: () => {
+            void refetchBuilderStatus();
+        },
+    });
     const builderRealtimeReady = !!builderStatus?.privateKeyConfigured &&
         !!builderStatus?.publicKeyConfigured;
     const googleRealtimeReady = !!googleRealtimeConfigured && builderRealtimeReady;
@@ -235,7 +245,7 @@ export function VoiceTranscriptionSection({ compact = false, } = {}) {
                 focusKey("GOOGLE_APPLICATION_CREDENTIALS");
             }
             else if (!builderRealtimeReady) {
-                openBuilderConnect();
+                builderConnect.start({ provisionAccount: false });
             }
             return;
         }
@@ -245,13 +255,6 @@ export function VoiceTranscriptionSection({ compact = false, } = {}) {
         setProvider(nextProvider);
         void persist(next, nextProvider, instructions, previous);
     };
-    const openBuilderConnect = () => {
-        openBuilderConnectPopup({
-            url: builderStatus?.connectUrl,
-            source: "voice_transcription_settings",
-            features: "noopener,noreferrer,width=600,height=700",
-        });
-    };
     const chooseBatchProvider = (next) => {
         const nextProvider = batchProvider(normalizeProvider(next));
         if (transcriptionMode === "batch" && nextProvider === provider)
@@ -289,10 +292,7 @@ export function VoiceTranscriptionSection({ compact = false, } = {}) {
                                     ? "BYOK only for v1. Streams live partials and finals through Google Speech-to-Text."
                                     : googleRealtimeConfigured
                                         ? "Google credentials are set. Connect Builder completely (free tier available) to mint the managed realtime session."
-                                        : "BYOK only for v1. Configure Google service account before selecting this source.", rightSlot: googleRealtimeReady ? (_jsxs("span", { className: "flex items-center gap-1 text-[10px] text-green-500", children: [_jsx(IconCheck, { size: 10 }), "Ready"] })) : googleRealtimeConfigured ? (_jsx("button", { type: "button", onClick: (e) => {
-                                        e.stopPropagation();
-                                        openBuilderConnect();
-                                    }, className: "inline-flex items-center gap-1 rounded border border-border px-2 py-0.5 text-[10px] text-muted-foreground hover:bg-accent/40 hover:text-foreground", children: "Connect Builder.io" })) : (_jsxs("button", { type: "button", onClick: (e) => {
+                                        : "BYOK only for v1. Configure Google service account before selecting this source.", rightSlot: googleRealtimeReady ? (_jsxs("span", { className: "flex items-center gap-1 text-[10px] text-green-500", children: [_jsx(IconCheck, { size: 10 }), "Ready"] })) : googleRealtimeConfigured ? (_jsx(BuilderConnectPopover, { flow: builderConnect, onTriggerClick: (event) => event.stopPropagation(), children: _jsx("button", { type: "button", className: "inline-flex items-center gap-1 rounded border border-border px-2 py-0.5 text-[10px] text-muted-foreground hover:bg-accent/40 hover:text-foreground", children: "Connect Builder.io" }) })) : (_jsxs("button", { type: "button", onClick: (e) => {
                                         e.stopPropagation();
                                         setShowAdvanced(true);
                                         focusKey("GOOGLE_APPLICATION_CREDENTIALS");
@@ -303,18 +303,12 @@ export function VoiceTranscriptionSection({ compact = false, } = {}) {
                                         : "Needs key" }))] })] }), _jsxs("div", { className: "rounded-md border border-border bg-background", children: [_jsxs("button", { type: "button", onClick: () => setShowAdvanced((v) => !v), className: "w-full flex items-center justify-between gap-2 px-2.5 py-2 cursor-pointer", children: [_jsxs("span", { className: "text-[11px] font-medium text-foreground inline-flex items-center gap-1", children: [showAdvanced ? (_jsx(IconChevronDown, { size: 12 })) : (_jsx(IconChevronRight, { size: 12, className: "rtl:-scale-x-100" })), "Add API keys"] }), _jsx("span", { className: "text-[10px] text-muted-foreground", children: "Google STT \u00B7 Gemini \u00B7 Groq \u00B7 OpenAI" })] }), showAdvanced && (_jsxs("div", { className: "px-2 pb-2 space-y-2", children: [_jsx(ProviderOption, { id: "google-service-account", selected: transcriptionMode === "google-realtime", onSelect: () => chooseSource("google-realtime"), disabled: !googleRealtimeReady, title: "Google Speech-to-Text service account", subtitle: googleRealtimeConfigured
                                     ? "Service-account JSON is set. Connect Builder (free tier available) to mint the managed realtime WebSocket session."
                                     : "Service-account JSON for the dedicated realtime WebSocket to Google StreamingRecognize.", rightSlot: googleRealtimeConfigured ===
-                                    null ? null : googleRealtimeReady ? (_jsxs("span", { className: "flex items-center gap-1 text-[10px] text-green-500", children: [_jsx(IconCheck, { size: 10 }), "Ready"] })) : googleRealtimeConfigured ? (_jsx("button", { type: "button", onClick: (e) => {
-                                        e.stopPropagation();
-                                        openBuilderConnect();
-                                    }, className: "inline-flex items-center gap-1 rounded border border-border px-2 py-0.5 text-[10px] text-muted-foreground hover:text-foreground hover:bg-accent/40", children: "Connect Builder.io" })) : (_jsxs("button", { type: "button", onClick: (e) => {
+                                    null ? null : googleRealtimeReady ? (_jsxs("span", { className: "flex items-center gap-1 text-[10px] text-green-500", children: [_jsx(IconCheck, { size: 10 }), "Ready"] })) : googleRealtimeConfigured ? (_jsx(BuilderConnectPopover, { flow: builderConnect, onTriggerClick: (event) => event.stopPropagation(), children: _jsx("button", { type: "button", className: "inline-flex items-center gap-1 rounded border border-border px-2 py-0.5 text-[10px] text-muted-foreground hover:text-foreground hover:bg-accent/40", children: "Connect Builder.io" }) })) : (_jsxs("button", { type: "button", onClick: (e) => {
                                         e.stopPropagation();
                                         focusKey("GOOGLE_APPLICATION_CREDENTIALS");
                                     }, className: "inline-flex items-center gap-1 rounded border border-border px-2 py-0.5 text-[10px] text-muted-foreground hover:text-foreground hover:bg-accent/40", children: ["Configure", _jsx(IconExternalLink, { size: 10 })] })) }), _jsx(ProviderOption, { id: "auto", selected: transcriptionMode === "batch" && provider === "auto", onSelect: () => chooseBatchProvider("auto"), title: "Automatic batch fallback", subtitle: "Keep the current Clips fallback chain: Builder Gemini, Gemini, Groq, then OpenAI." }), _jsx(ProviderOption, { id: "builder-gemini", selected: transcriptionMode === "batch" && provider === "builder-gemini", onSelect: () => chooseBatchProvider("builder-gemini"), disabled: !builderStatus?.configured, title: "Builder.io Connect", subtitle: builderStatus?.configured
                                     ? "Use Builder-hosted Gemini Flash-Lite for batch transcription and Luna for text cleanup."
-                                    : "One-click connect for Gemini Flash-Lite transcription and Luna text cleanup. No Google key needed.", rightSlot: builderStatus?.configured ? (_jsxs("span", { className: "flex items-center gap-1 text-[10px] text-green-500", children: [_jsx(IconCheck, { size: 10 }), "Connected"] })) : (_jsx("button", { type: "button", onClick: (e) => {
-                                        e.stopPropagation();
-                                        openBuilderConnect();
-                                    }, className: "inline-flex items-center gap-1 rounded border border-border px-2 py-0.5 text-[10px] text-muted-foreground hover:text-foreground hover:bg-accent/40", children: "Connect Builder.io" })) }), _jsx(ProviderOption, { id: "gemini", selected: transcriptionMode === "batch" && provider === "gemini", onSelect: () => chooseBatchProvider("gemini"), title: "Google Gemini", subtitle: "BYOK Gemini for AI cleanup and optional strict batch transcription.", rightSlot: geminiConfigured === null ? null : geminiConfigured ? (_jsxs("span", { className: "flex items-center gap-1 text-[10px] text-green-500", children: [_jsx(IconCheck, { size: 10 }), "Key set"] })) : (_jsxs("button", { type: "button", onClick: (e) => {
+                                    : "One-click connect for Gemini Flash-Lite transcription and Luna text cleanup. No Google key needed.", rightSlot: builderStatus?.configured ? (_jsxs("span", { className: "flex items-center gap-1 text-[10px] text-green-500", children: [_jsx(IconCheck, { size: 10 }), "Connected"] })) : (_jsx(BuilderConnectPopover, { flow: builderConnect, onTriggerClick: (event) => event.stopPropagation(), children: _jsx("button", { type: "button", className: "inline-flex items-center gap-1 rounded border border-border px-2 py-0.5 text-[10px] text-muted-foreground hover:text-foreground hover:bg-accent/40", children: "Connect Builder.io" }) })) }), _jsx(ProviderOption, { id: "gemini", selected: transcriptionMode === "batch" && provider === "gemini", onSelect: () => chooseBatchProvider("gemini"), title: "Google Gemini", subtitle: "BYOK Gemini for AI cleanup and optional strict batch transcription.", rightSlot: geminiConfigured === null ? null : geminiConfigured ? (_jsxs("span", { className: "flex items-center gap-1 text-[10px] text-green-500", children: [_jsx(IconCheck, { size: 10 }), "Key set"] })) : (_jsxs("button", { type: "button", onClick: (e) => {
                                         e.stopPropagation();
                                         focusKey("GEMINI_API_KEY");
                                     }, className: "inline-flex items-center gap-1 rounded border border-border px-2 py-0.5 text-[10px] text-muted-foreground hover:text-foreground hover:bg-accent/40", children: ["Add key", _jsx(IconExternalLink, { size: 10 })] })) }), _jsx(ProviderOption, { id: "openai", selected: transcriptionMode === "batch" && provider === "openai", onSelect: () => chooseBatchProvider("openai"), title: "OpenAI Transcribe", subtitle: "Batch transcription provider. Requires an OpenAI API key.", rightSlot: openAiConfigured === null ? null : openAiConfigured ? (_jsxs("span", { className: "flex items-center gap-1 text-[10px] text-green-500", children: [_jsx(IconCheck, { size: 10 }), "Key set"] })) : (_jsxs("button", { type: "button", onClick: (e) => {

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

@@ -3,6 +3,7 @@ export { getAgentSettingsSearchTabs, type AgentSettingsSearchTab, } from "./agen
 export { SettingsTabsPage, type SettingsSearchEntry, type SettingsTabItem, type SettingsTabsPageProps, } from "./SettingsTabsPage.js";
 export { AccountSettingsCard, AccountSettingsForm, type AccountSettingsCardProps, type AccountSettingsFormProps, } from "./AccountSettingsCard.js";
 export { openBuilderConnectPopup, useBuilderConnectFlow, useBuilderStatus, withBuilderConnectTrackingParams, type BuilderConnectFlow, type BuilderConnectFlowOptions, type BuilderConnectStartOptions, type BuilderStatus, type OpenBuilderConnectPopupOptions, } from "./useBuilderStatus.js";
+export { BuilderConnectPopover, type BuilderConnectPopoverProps, } from "./BuilderConnectPopover.js";
 export { SecretsSection, type SecretsSectionProps } from "./SecretsSection.js";
 export { SettingsGroup, SettingsRow, type SettingsGroupProps, type SettingsRowProps, } from "./SettingsRow.js";
 export { SettingsSection, SettingsSurfaceProvider, useSettingsSurface, type SettingsSurface, } from "./SettingsSection.js";

package/dist/client/settings/index.js

@@ -3,6 +3,7 @@ export { getAgentSettingsSearchTabs, } from "./agent-settings-search.js";
 export { SettingsTabsPage, } from "./SettingsTabsPage.js";
 export { AccountSettingsCard, AccountSettingsForm, } from "./AccountSettingsCard.js";
 export { openBuilderConnectPopup, useBuilderConnectFlow, useBuilderStatus, withBuilderConnectTrackingParams, } from "./useBuilderStatus.js";
+export { BuilderConnectPopover, } from "./BuilderConnectPopover.js";
 export { SecretsSection } from "./SecretsSection.js";
 export { SettingsGroup, SettingsRow, } from "./SettingsRow.js";
 export { SettingsSection, SettingsSurfaceProvider, useSettingsSurface, } from "./SettingsSection.js";

package/dist/client/settings/useBuilderStatus.d.ts

@@ -45,6 +45,7 @@ export interface BuilderStatus {
     connectError?: {
         message: string;
         at: number;
+        code?: string;
     };
     /**
      * Set when the currently effective Builder credential was rejected by
@@ -92,6 +93,8 @@ export interface BuilderConnectStartOptions {
     trackingSource?: string;
     /** Override the hook-level flow for this click. */
     trackingFlow?: string;
+    /** Override whether this click should use the optional account provisioning flow. */
+    provisionAccount?: boolean;
 }
 export interface BuilderConnectFlow {
     configured: boolean;
@@ -120,6 +123,8 @@ export interface BuilderConnectFlow {
     orgName: string | null;
     connecting: boolean;
     error: string | null;
+    /** True when account provisioning found an existing Builder account. */
+    accountExists: boolean;
     /**
      * True once the first Builder connection-status fetch has completed (successfully
      * or not). Consumers that accept an `initialConfigured` prop (e.g. agent
@@ -131,6 +136,8 @@ export interface BuilderConnectFlow {
     hasFetchedStatus: boolean;
     /** Open the popup and begin polling. Must be called from a user-gesture handler. */
     start: (options?: BuilderConnectStartOptions) => void;
+    /** Retry the status request before choosing a connection path. */
+    retry: () => void;
 }
 export declare function withBuilderConnectTrackingParams(url: string, options?: {
     source?: string;

package/dist/client/settings/useBuilderStatus.js

@@ -91,6 +91,7 @@ const BUILDER_CONNECT_PARAM = "_an_connect";
 const BUILDER_CONNECT_MODE_PARAM = "_an_mode";
 const BUILDER_AGENT_NATIVE_PROVISION_MODE = "agent-native";
 const BUILDER_PROVISIONING_TOKEN_PARAM = "_an_provision";
+const BUILDER_CONNECT_ATTEMPT_PARAM = "_an_connect_attempt";
 const BUILDER_SIGNUP_SOURCE_PARAM = "signupSource";
 const BUILDER_AGENT_NATIVE_FLOW_PARAM = "agentNativeFlow";
 const BUILDER_AGENT_NATIVE_CONNECT_SOURCE_PARAM = "agentNativeConnectSource";
@@ -221,6 +222,13 @@ function isFreshSignedConnectUrl(url, fetchedAt) {
         typeof fetchedAt === "number" &&
         Date.now() - fetchedAt < STATUS_CONNECT_URL_TTL_MS);
 }
+function createBuilderConnectAttemptId() {
+    if (typeof crypto !== "undefined" &&
+        typeof crypto.randomUUID === "function") {
+        return crypto.randomUUID();
+    }
+    return `${Date.now()}-${Math.random().toString(36).slice(2)}`;
+}
 function isCurrentConnectError(error, startedAt) {
     if (!error?.message)
         return false;
@@ -378,6 +386,7 @@ export function useBuilderConnectFlow(opts = {}) {
     const [orgName, setOrgName] = useState(null);
     const [connecting, setConnecting] = useState(false);
     const [error, setError] = useState(null);
+    const [accountExists, setAccountExists] = useState(false);
     const [hasFetchedStatus, setHasFetchedStatus] = useState(false);
     const [statusResolved, setStatusResolved] = useState(false);
     const [statusConnectUrl, setStatusConnectUrl] = useState(null);
@@ -388,7 +397,9 @@ export function useBuilderConnectFlow(opts = {}) {
     // gesture path (browser/editor embeds).
     const statusConnectUrlAtRef = useRef(null);
     const connectStartedAtRef = useRef(null);
+    const connectAttemptIdRef = useRef(null);
     const callbackSuccessStartedAtRef = useRef(null);
+    const retryStatusRef = useRef(() => { });
     const mountedRef = useRef(true);
     const notifiedConnectedRef = useRef(false);
     // Keep onConnected in a ref so start() doesn't need to re-create when the
@@ -406,7 +417,7 @@ export function useBuilderConnectFlow(opts = {}) {
     // separately-constructed AbortController. Callers with no signal of their
     // own (the initial status fetch, the popup-open branches in `start`) keep
     // the internal fallback timeout.
-    const fetchStatus = useCallback(async (signal) => {
+    const fetchStatus = useCallback(async (signal, connectAttemptId) => {
         if (!enabled)
             return null;
         const origin = getCallbackOrigin() || window.location.origin;
@@ -417,7 +428,13 @@ export function useBuilderConnectFlow(opts = {}) {
             ? setTimeout(() => ownController.abort(), STATUS_FETCH_ABORT_MS)
             : null;
         try {
-            const r = await fetch(new URL(agentNativePath("/_agent-native/connection-status/builder"), origin).href, { signal: signal ?? ownController?.signal });
+            const statusUrl = new URL(agentNativePath("/_agent-native/connection-status/builder"), origin);
+            if (connectAttemptId) {
+                statusUrl.searchParams.set(BUILDER_CONNECT_ATTEMPT_PARAM, connectAttemptId);
+            }
+            const r = await fetch(statusUrl.href, {
+                signal: signal ?? ownController?.signal,
+            });
             if (!r.ok)
                 return null;
             return (await r.json());
@@ -448,10 +465,13 @@ export function useBuilderConnectFlow(opts = {}) {
             setOrgName(null);
             setConnecting(false);
             setError(null);
+            setAccountExists(false);
             setHasFetchedStatus(false);
             setStatusResolved(false);
             setStatusConnectUrl(null);
             statusConnectUrlAtRef.current = null;
+            connectAttemptIdRef.current = null;
+            retryStatusRef.current = () => { };
             return;
         }
         mountedRef.current = true;
@@ -472,6 +492,7 @@ export function useBuilderConnectFlow(opts = {}) {
             setEnvManaged(!!s.envManaged);
             setAgentNativeProvisioningEnabled(!!s.agentNativeProvisioningEnabled);
             setAgentNativeProvisioningToken(s.agentNativeProvisioningToken ?? null);
+            setAccountExists(s.connectError?.code === "account_exists");
             setBuilderEnabled(!!s.builderEnabled);
             const nextConnectUrl = s.connectUrl ?? null;
             setStatusConnectUrl(nextConnectUrl);
@@ -508,6 +529,7 @@ export function useBuilderConnectFlow(opts = {}) {
                 setError(null);
             }
         };
+        retryStatusRef.current = () => void refresh();
         void refresh();
         const onVisible = () => {
             if (document.visibilityState === "visible")
@@ -519,18 +541,25 @@ export function useBuilderConnectFlow(opts = {}) {
         return () => {
             cancelled = true;
             mountedRef.current = false;
+            retryStatusRef.current = () => { };
             window.removeEventListener("focus", refresh);
             document.removeEventListener("visibilitychange", onVisible);
             window.removeEventListener("agent-engine:configured-changed", refresh);
         };
     }, [enabled, fetchStatus]);
+    const retry = useCallback(() => {
+        retryStatusRef.current();
+    }, []);
     const start = useCallback((startOptions) => {
         if (!enabled)
             return;
         const started = Date.now();
+        const connectAttemptId = createBuilderConnectAttemptId();
         const clickTrackingSource = startOptions?.trackingSource ?? trackingSource;
         const clickTrackingFlow = startOptions?.trackingFlow ?? trackingFlow;
+        const provisionAccountForStart = startOptions?.provisionAccount ?? provisionAccount;
         connectStartedAtRef.current = started;
+        connectAttemptIdRef.current = connectAttemptId;
         callbackSuccessStartedAtRef.current = null;
         activeTrackingRef.current = {
             source: clickTrackingSource,
@@ -538,6 +567,7 @@ export function useBuilderConnectFlow(opts = {}) {
         };
         setConnecting(true);
         setError(null);
+        setAccountExists(false);
         // Open SYNCHRONOUSLY inside the caller's click handler — any await
         // before window.open lets the user-gesture token expire, which causes
         // popup blockers to block entirely or fall back to same-tab navigation.
@@ -552,13 +582,16 @@ export function useBuilderConnectFlow(opts = {}) {
         const signedPropUrl = hasSignedConnectToken(popupUrl) ? popupUrl : null;
         const fallbackUrl = new URL(agentNativePath("/_agent-native/builder/connect"), origin).href;
         const withProvisionMode = (url, provisioningEnabled = agentNativeProvisioningEnabled, provisioningToken = agentNativeProvisioningToken) => {
-            if (!provisionAccount || !provisioningEnabled || !provisioningToken) {
-                return url;
+            const connectUrl = new URL(url, origin);
+            connectUrl.searchParams.set(BUILDER_CONNECT_ATTEMPT_PARAM, connectAttemptId);
+            if (!provisionAccountForStart ||
+                !provisioningEnabled ||
+                !provisioningToken) {
+                return connectUrl.toString();
             }
-            const provisionUrl = new URL(url, origin);
-            provisionUrl.searchParams.set(BUILDER_CONNECT_MODE_PARAM, BUILDER_AGENT_NATIVE_PROVISION_MODE);
-            provisionUrl.searchParams.set(BUILDER_PROVISIONING_TOKEN_PARAM, provisioningToken);
-            return provisionUrl.toString();
+            connectUrl.searchParams.set(BUILDER_CONNECT_MODE_PARAM, BUILDER_AGENT_NATIVE_PROVISION_MODE);
+            connectUrl.searchParams.set(BUILDER_PROVISIONING_TOKEN_PARAM, provisioningToken);
+            return connectUrl.toString();
         };
         const directUrl = withProvisionMode(cachedFreshUrl ?? signedPropUrl ?? fallbackUrl);
         if (isAgentNativeDesktop()) {
@@ -587,7 +620,7 @@ export function useBuilderConnectFlow(opts = {}) {
                     return;
                 }
                 void (async () => {
-                    const s = await fetchStatus();
+                    const s = await fetchStatus(undefined, connectAttemptId);
                     if (!mountedRef.current)
                         return;
                     if (s) {
@@ -598,6 +631,7 @@ export function useBuilderConnectFlow(opts = {}) {
                         setEnvManaged(!!s.envManaged);
                         setAgentNativeProvisioningEnabled(!!s.agentNativeProvisioningEnabled);
                         setAgentNativeProvisioningToken(s.agentNativeProvisioningToken ?? null);
+                        setAccountExists(s.connectError?.code === "account_exists");
                         setBuilderEnabled(!!s.builderEnabled);
                         const nextConnectUrl = s.connectUrl ?? null;
                         setStatusConnectUrl(nextConnectUrl);
@@ -622,7 +656,7 @@ export function useBuilderConnectFlow(opts = {}) {
             else {
                 showBuilderConnectPopupPlaceholder(opened);
                 void (async () => {
-                    const s = await fetchStatus();
+                    const s = await fetchStatus(undefined, connectAttemptId);
                     if (!mountedRef.current) {
                         try {
                             opened.close();
@@ -640,6 +674,7 @@ export function useBuilderConnectFlow(opts = {}) {
                         setEnvManaged(!!s.envManaged);
                         setAgentNativeProvisioningEnabled(!!s.agentNativeProvisioningEnabled);
                         setAgentNativeProvisioningToken(s.agentNativeProvisioningToken ?? null);
+                        setAccountExists(s.connectError?.code === "account_exists");
                         setBuilderEnabled(!!s.builderEnabled);
                         const nextConnectUrl = s.connectUrl ?? null;
                         setStatusConnectUrl(nextConnectUrl);
@@ -696,7 +731,7 @@ export function useBuilderConnectFlow(opts = {}) {
         const started = connectStartedAtRef.current;
         if (started == null)
             return;
-        const s = await fetchStatus(signal);
+        const s = await fetchStatus(signal, connectAttemptIdRef.current ?? undefined);
         if (!mountedRef.current)
             return;
         if (s)
@@ -707,6 +742,7 @@ export function useBuilderConnectFlow(opts = {}) {
             setEnvManaged(!!s.envManaged);
             setAgentNativeProvisioningEnabled(!!s.agentNativeProvisioningEnabled);
             setAgentNativeProvisioningToken(s.agentNativeProvisioningToken ?? null);
+            setAccountExists(false);
             setBuilderEnabled(!!s.builderEnabled);
             const nextConnectUrl = s.connectUrl ?? null;
             setStatusConnectUrl(nextConnectUrl);
@@ -731,7 +767,10 @@ export function useBuilderConnectFlow(opts = {}) {
             // real error instead of letting the user wait 5 minutes for timeout.
             connectStartedAtRef.current = null;
             setConnecting(false);
-            setError(`Couldn't save Builder credentials: ${s.connectError.message}. Try again or contact support.`);
+            setAccountExists(s.connectError.code === "account_exists");
+            setError(s.connectError.code === "account_exists"
+                ? null
+                : `Couldn't save Builder credentials: ${s.connectError.message}. Try again or contact support.`);
         }
         else if (Date.now() - started > POLL_TIMEOUT_MS) {
             connectStartedAtRef.current = null;
@@ -761,12 +800,22 @@ export function useBuilderConnectFlow(opts = {}) {
     // by the setConnecting(false) call, which is idempotent.
     useEffect(() => {
         let channel = null;
-        const handleError = (message) => {
+        const isCurrentConnectAttempt = (attemptId) => typeof attemptId === "string" &&
+            attemptId === connectAttemptIdRef.current &&
+            connectStartedAtRef.current !== null;
+        const handleError = (message, code, attemptId) => {
+            if (!isCurrentConnectAttempt(attemptId))
+                return;
             connectStartedAtRef.current = null;
             setConnecting(false);
-            setError(`Couldn't save Builder credentials: ${message}.`);
+            setAccountExists(code === "account_exists");
+            setError(code === "account_exists"
+                ? null
+                : `Couldn't save Builder credentials: ${message}.`);
         };
-        const handleSuccess = async () => {
+        const handleSuccess = async (attemptId) => {
+            if (!isCurrentConnectAttempt(attemptId))
+                return;
             const started = connectStartedAtRef.current;
             if (started == null || callbackSuccessStartedAtRef.current === started) {
                 return;
@@ -774,7 +823,7 @@ export function useBuilderConnectFlow(opts = {}) {
             callbackSuccessStartedAtRef.current = started;
             let s = null;
             for (let i = 0; i < CALLBACK_SUCCESS_STATUS_RETRIES; i += 1) {
-                s = await fetchStatus();
+                s = await fetchStatus(undefined, connectAttemptIdRef.current ?? undefined);
                 if (!mountedRef.current || connectStartedAtRef.current !== started) {
                     return;
                 }
@@ -802,6 +851,7 @@ export function useBuilderConnectFlow(opts = {}) {
                     setEnvManaged(!!s.envManaged);
                     setAgentNativeProvisioningEnabled(!!s.agentNativeProvisioningEnabled);
                     setAgentNativeProvisioningToken(s.agentNativeProvisioningToken ?? null);
+                    setAccountExists(s.connectError?.code === "account_exists");
                     setBuilderEnabled(!!s.builderEnabled);
                     const nextConnectUrl = s.connectUrl ?? null;
                     setStatusConnectUrl(nextConnectUrl);
@@ -811,7 +861,10 @@ export function useBuilderConnectFlow(opts = {}) {
                 if (connectError) {
                     connectStartedAtRef.current = null;
                     setConnecting(false);
-                    setError(`Couldn't save Builder credentials: ${connectError.message}. Try again or contact support.`);
+                    setAccountExists(connectError.code === "account_exists");
+                    setError(connectError.code === "account_exists"
+                        ? null
+                        : `Couldn't save Builder credentials: ${connectError.message}. Try again or contact support.`);
                 }
                 return;
             }
@@ -822,6 +875,7 @@ export function useBuilderConnectFlow(opts = {}) {
             setEnvManaged(!!s.envManaged);
             setAgentNativeProvisioningEnabled(!!s.agentNativeProvisioningEnabled);
             setAgentNativeProvisioningToken(s.agentNativeProvisioningToken ?? null);
+            setAccountExists(false);
             setBuilderEnabled(!!s.builderEnabled);
             const nextConnectUrl = s.connectUrl ?? null;
             setStatusConnectUrl(nextConnectUrl);
@@ -844,13 +898,13 @@ export function useBuilderConnectFlow(opts = {}) {
             channel.onmessage = (e) => {
                 const data = e.data;
                 if (data?.type === "builder-connect-success") {
-                    void handleSuccess();
+                    void handleSuccess(data.attemptId);
                     return;
                 }
                 if (data?.type === "builder-connect-error") {
                     if (typeof data.message !== "string" || !data.message)
                         return;
-                    handleError(data.message);
+                    handleError(data.message, data.code, data.attemptId);
                 }
             };
         }
@@ -862,13 +916,13 @@ export function useBuilderConnectFlow(opts = {}) {
                 return;
             const data = e.data;
             if (data?.type === "builder-connect-success") {
-                void handleSuccess();
+                void handleSuccess(data.attemptId);
                 return;
             }
             if (data?.type === "builder-connect-error") {
                 if (typeof data.message !== "string" || !data.message)
                     return;
-                handleError(data.message);
+                handleError(data.message, data.code, data.attemptId);
             }
         };
         window.addEventListener("message", handler);
@@ -887,7 +941,9 @@ export function useBuilderConnectFlow(opts = {}) {
         orgName,
         connecting,
         error,
+        accountExists,
         hasFetchedStatus,
         start,
+        retry,
     };
 }

package/dist/client/setup-connections/BuilderConnectCard.js

@@ -1,6 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { ActionButton, DesignSystemErrorBoundary, Status, Surface, } from "@agent-native/toolkit/design-system";
 import { IconCheck, IconPlugConnected } from "@tabler/icons-react";
+import { BuilderConnectPopover } from "../settings/BuilderConnectPopover.js";
 import { cn } from "../utils.js";
 import { useBuilderConnectCardController, } from "./useBuilderConnectCardController.js";
 export function DefaultBuilderConnectCardView({ viewModel, className, }) {
@@ -12,7 +13,7 @@ export function DefaultBuilderConnectCardView({ viewModel, className, }) {
             : "neutral";
     return (_jsx(Surface, { as: "section", elevation: "low", padding: "none", className: cn("rounded-lg border border-border bg-background p-4 shadow-sm", className), children: _jsxs("div", { className: "flex items-start gap-3", children: [_jsx("span", { className: cn("mt-0.5 flex size-8 shrink-0 items-center justify-center rounded-md border", viewModel.configured
                         ? "border-emerald-500/30 bg-emerald-500/10 text-emerald-600"
-                        : "border-border bg-muted text-muted-foreground"), children: viewModel.configured ? (_jsx(IconCheck, { className: "size-4" })) : (_jsx(IconPlugConnected, { className: "size-4" })) }), _jsxs("div", { className: "min-w-0 flex-1", children: [_jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [_jsx("h2", { className: "text-sm font-semibold text-foreground", children: viewModel.title }), _jsx(Status, { tone: statusTone, size: "compact", className: "rounded-md border border-border bg-muted px-1.5 py-0.5 text-[11px] font-medium text-muted-foreground", children: viewModel.status.label })] }), _jsx("p", { className: "mt-1 text-sm leading-5 text-muted-foreground", children: viewModel.description }), viewModel.error ? (_jsx("p", { className: "mt-2 text-xs text-destructive", children: viewModel.error })) : null, action ? (_jsx("div", { className: "mt-3", children: _jsx(ActionButton, { type: "button", intent: "primary", size: "compact", pending: action.pending, disabled: action.disabled, className: "inline-flex h-8 items-center gap-2 rounded-md border border-border bg-foreground px-3 text-xs font-medium text-background transition-colors hover:bg-foreground/90 disabled:cursor-not-allowed disabled:opacity-60", leadingIcon: _jsx(IconPlugConnected, { className: "size-3.5" }), onPress: action.onPress, children: action.label }) })) : null] })] }) }));
+                        : "border-border bg-muted text-muted-foreground"), children: viewModel.configured ? (_jsx(IconCheck, { className: "size-4" })) : (_jsx(IconPlugConnected, { className: "size-4" })) }), _jsxs("div", { className: "min-w-0 flex-1", children: [_jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [_jsx("h2", { className: "text-sm font-semibold text-foreground", children: viewModel.title }), _jsx(Status, { tone: statusTone, size: "compact", className: "rounded-md border border-border bg-muted px-1.5 py-0.5 text-[11px] font-medium text-muted-foreground", children: viewModel.status.label })] }), _jsx("p", { className: "mt-1 text-sm leading-5 text-muted-foreground", children: viewModel.description }), viewModel.error ? (_jsx("p", { className: "mt-2 text-xs text-destructive", children: viewModel.error })) : null, action ? (_jsx("div", { className: "mt-3", children: viewModel.connectFlow ? (_jsx(BuilderConnectPopover, { flow: viewModel.connectFlow, onConnect: action.onPress, children: _jsx(ActionButton, { type: "button", intent: "primary", size: "compact", pending: action.pending, disabled: action.disabled, className: "inline-flex h-8 items-center gap-2 rounded-md border border-border bg-foreground px-3 text-xs font-medium text-background transition-colors hover:bg-foreground/90 disabled:cursor-not-allowed disabled:opacity-60", leadingIcon: _jsx(IconPlugConnected, { className: "size-3.5" }), children: action.label }) })) : (_jsx(ActionButton, { type: "button", intent: "primary", size: "compact", pending: action.pending, disabled: action.disabled, className: "inline-flex h-8 items-center gap-2 rounded-md border border-border bg-foreground px-3 text-xs font-medium text-background transition-colors hover:bg-foreground/90 disabled:cursor-not-allowed disabled:opacity-60", leadingIcon: _jsx(IconPlugConnected, { className: "size-3.5" }), onPress: () => action.onPress(), children: action.label })) })) : null] })] }) }));
 }
 export function BuilderConnectCard({ title, description, trackingSource, className, onConnected, render, }) {
     const viewModel = useBuilderConnectCardController({