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

package/dist/client/observability/ThumbsFeedback.js

@@ -5,20 +5,39 @@ import * as PopoverPrimitive from "@radix-ui/react-popover";
 import { IconThumbUp, IconThumbDown } from "@tabler/icons-react";
 import { useState, useCallback, useId, useRef } from "react";
 import { agentNativePath } from "../api-path.js";
+import { submitFeedbackForm } from "../FeedbackButton.js";
 import { useT } from "../i18n.js";
+import { useSession } from "../use-session.js";
 import { cn } from "../utils.js";
+function createFeedbackIdempotencyKey() {
+    if (typeof crypto !== "undefined" &&
+        typeof crypto.randomUUID === "function") {
+        return crypto.randomUUID();
+    }
+    return `feedback-${Date.now()}-${Math.random().toString(36).slice(2)}`;
+}
 export function ThumbsFeedback({ threadId, runId, messageSeq, className, }) {
     const t = useT();
+    const { session } = useSession();
     const [selection, setSelection] = useState(null);
     const [popoverOpen, setPopoverOpen] = useState(false);
     const [textFeedback, setTextFeedback] = useState("");
+    const [textSubmitting, setTextSubmitting] = useState(false);
     const feedbackInputId = useId();
     const feedbackInputRef = useRef(null);
-    const sendFeedback = useCallback(async (feedbackType, value) => {
+    const feedbackOpenedAtRef = useRef(0);
+    const textSubmissionInFlightRef = useRef(false);
+    const textFeedbackDeliveryRef = useRef(null);
+    const sendFeedback = useCallback(async (feedbackType, value, idempotencyKey) => {
         try {
             const response = await fetch(agentNativePath("/_agent-native/observability/feedback"), {
                 method: "POST",
-                headers: { "Content-Type": "application/json" },
+                headers: {
+                    "Content-Type": "application/json",
+                    ...(feedbackType === "text" && idempotencyKey
+                        ? { "Idempotency-Key": idempotencyKey }
+                        : {}),
+                },
                 body: JSON.stringify({
                     threadId,
                     runId,
@@ -49,27 +68,71 @@ export function ThumbsFeedback({ threadId, runId, messageSeq, className, }) {
     }, [selection, sendFeedback]);
     const handleThumbsDown = useCallback(() => {
         if (selection === "down") {
-            setPopoverOpen((prev) => !prev);
+            const nextOpen = !popoverOpen;
+            if (nextOpen)
+                feedbackOpenedAtRef.current = Date.now();
+            setPopoverOpen(nextOpen);
             return;
         }
+        feedbackOpenedAtRef.current = Date.now();
         setSelection("down");
         setPopoverOpen(true);
         void sendFeedback("thumbs_down").then((submitted) => {
             if (!submitted)
                 setSelection(null);
         });
-    }, [selection, sendFeedback]);
+    }, [popoverOpen, selection, sendFeedback]);
     const handleTextFeedback = useCallback(() => {
         const value = textFeedback.trim();
-        if (!value)
+        if (!value || textSubmissionInFlightRef.current)
             return;
-        void sendFeedback("text", value).then((submitted) => {
-            if (!submitted)
+        const delivery = textFeedbackDeliveryRef.current?.value === value
+            ? textFeedbackDeliveryRef.current
+            : {
+                value,
+                observabilityDelivered: false,
+                sharedFormDelivered: false,
+                idempotencyKey: createFeedbackIdempotencyKey(),
+            };
+        textFeedbackDeliveryRef.current = delivery;
+        textSubmissionInFlightRef.current = true;
+        setTextSubmitting(true);
+        const deliveries = [];
+        if (!delivery.observabilityDelivered) {
+            deliveries.push(sendFeedback("text", value, delivery.idempotencyKey).then((submitted) => {
+                delivery.observabilityDelivered = submitted;
+            }));
+        }
+        if (!delivery.sharedFormDelivered) {
+            deliveries.push(submitFeedbackForm({
+                value,
+                openedAt: feedbackOpenedAtRef.current,
+                idempotencyKey: delivery.idempotencyKey,
+                chatSessionId: threadId,
+                activeRunId: runId,
+                submitterEmail: session?.email,
+            })
+                .then(() => {
+                delivery.sharedFormDelivered = true;
+            })
+                .catch((reason) => {
+                console.error("[ThumbsFeedback] shared feedback form submission failed", reason);
+            }));
+        }
+        void Promise.all(deliveries)
+            .then(() => {
+            if (!delivery.observabilityDelivered || !delivery.sharedFormDelivered) {
                 return;
+            }
+            textFeedbackDeliveryRef.current = null;
             setTextFeedback("");
             setPopoverOpen(false);
+        })
+            .finally(() => {
+            textSubmissionInFlightRef.current = false;
+            setTextSubmitting(false);
         });
-    }, [sendFeedback, textFeedback]);
+    }, [runId, sendFeedback, session?.email, textFeedback, threadId]);
     return (_jsxs("div", { className: cn("inline-flex items-center gap-0.5", className), children: [_jsx("button", { type: "button", "aria-label": t("agentChat.feedback.thumbsUp"), onClick: handleThumbsUp, className: cn("flex h-6 w-6 items-center justify-center rounded", selection === "up"
                     ? "text-foreground"
                     : "text-muted-foreground/70 hover:text-muted-foreground hover:bg-accent/50"), children: _jsx(IconThumbUp, { size: 16, stroke: selection === "up" ? 2.5 : 1.5, fill: selection === "up" ? "currentColor" : "none" }) }), _jsxs(PopoverPrimitive.Root, { open: popoverOpen, onOpenChange: setPopoverOpen, children: [_jsx(PopoverPrimitive.Trigger, { asChild: true, children: _jsx("button", { type: "button", "aria-label": t("agentChat.feedback.thumbsDown"), onClick: handleThumbsDown, className: cn("flex h-6 w-6 items-center justify-center rounded", selection === "down"
@@ -80,7 +143,7 @@ export function ThumbsFeedback({ threadId, runId, messageSeq, className, }) {
                             }, className: "z-[300] w-[min(320px,calc(100vw-24px))] overflow-hidden rounded-lg border border-border bg-popover p-3 text-popover-foreground shadow-lg outline-none origin-[var(--radix-popover-content-transform-origin)]", children: _jsxs("form", { className: "flex flex-col gap-2.5", onSubmit: (event) => {
                                     event.preventDefault();
                                     handleTextFeedback();
-                                }, children: [_jsx("label", { htmlFor: feedbackInputId, className: "text-xs font-medium text-foreground", children: t("agentChat.feedback.whatWentWrong") }), _jsx(Textarea, { id: feedbackInputId, ref: feedbackInputRef, autoFocus: true, value: textFeedback, onChange: (event) => setTextFeedback(event.target.value), onKeyDown: (event) => {
+                                }, children: [_jsx("label", { htmlFor: feedbackInputId, className: "text-xs font-medium text-foreground", children: t("agentChat.feedback.whatWentWrong") }), _jsx(Textarea, { id: feedbackInputId, ref: feedbackInputRef, autoFocus: true, value: textFeedback, onChange: (event) => setTextFeedback(event.target.value), disabled: textSubmitting, onKeyDown: (event) => {
                                             if ((event.metaKey || event.ctrlKey) &&
                                                 event.key === "Enter") {
                                                 event.preventDefault();
@@ -89,5 +152,5 @@ export function ThumbsFeedback({ threadId, runId, messageSeq, className, }) {
                                         }, placeholder: t("agentChat.feedback.placeholder"), rows: 3, maxLength: 2000, className: "min-h-20 resize-none px-2.5 py-2 text-xs" }), _jsxs("div", { className: "flex items-center justify-between gap-2", children: [_jsx("span", { className: "text-[11px] text-muted-foreground/75", children: t("agentChat.feedback.keyboardHint").replace("{{shortcut}}", typeof navigator !== "undefined" &&
                                                     /Mac|iPhone|iPad/.test(navigator.userAgent)
                                                     ? "⌘"
-                                                    : "Ctrl") }), _jsx(Button, { type: "submit", size: "sm", disabled: !textFeedback.trim(), className: "h-7 px-2.5 text-xs", children: t("agentChat.feedback.submit") })] })] }) }) })] })] }));
+                                                    : "Ctrl") }), _jsx(Button, { type: "submit", size: "sm", disabled: textSubmitting || !textFeedback.trim(), className: "h-7 px-2.5 text-xs", children: t("agentChat.feedback.submit") })] })] }) }) })] })] }));
 }

package/dist/client/onboarding/FirstRunOnboarding.js

@@ -11,6 +11,7 @@ import { buildMcpOAuthStartUrl, filterMcpIntegrations, getDefaultMcpIntegrations
 import { McpIntegrationDialog } from "../resources/McpIntegrationDialog.js";
 import { McpIntegrationLogo } from "../resources/McpIntegrationLogo.js";
 import { formatMcpServerError, formatMcpServersLoadError, useCreateMcpServer, useMcpServers, } from "../resources/use-mcp-servers.js";
+import { BuilderConnectPopover } from "../settings/BuilderConnectPopover.js";
 import { useBuilderConnectFlow } from "../settings/useBuilderStatus.js";
 import { cn } from "../utils.js";
 import { shouldSkipFirstRunIntegrations } from "./first-run-enabled.js";
@@ -72,6 +73,7 @@ export function FirstRunOnboarding({ skipIntegrations = shouldSkipFirstRunIntegr
     const [integrationDialogId, setIntegrationDialogId] = useState(null);
     const [connectingIntegrationId, setConnectingIntegrationId] = useState(null);
     const [connectError, setConnectError] = useState(null);
+    const [builderConnectionMode, setBuilderConnectionMode] = useState("existing");
     const extensions = useMemo(() => listFirstRunOnboardingExtensions(), []);
     const mcpCatalog = useMemo(() => getDefaultMcpIntegrations(), []);
     const mcpServersQuery = useMcpServers();
@@ -160,7 +162,7 @@ export function FirstRunOnboarding({ skipIntegrations = shouldSkipFirstRunIntegr
         return _jsx(OnboardingSkeleton, {});
     }
     const builderCapabilities = profile.capabilities.filter((capability) => capability.builderIncluded);
-    const handleBuilder = () => {
+    const handleBuilder = (provisionAccount = canActivateBuilderFreeCredits) => {
         if (previewMode) {
             showTools();
             return;
@@ -170,10 +172,14 @@ export function FirstRunOnboarding({ skipIntegrations = shouldSkipFirstRunIntegr
             showTools();
             return;
         }
+        setBuilderConnectionMode(provisionAccount && canActivateBuilderFreeCredits
+            ? "provision"
+            : "existing");
         setScreen("connecting");
         connectFlow.start({
             trackingSource: "first_run_onboarding",
             trackingFlow: "connect_llm",
+            provisionAccount,
         });
     };
     const handleOpenSettings = () => {
@@ -293,14 +299,12 @@ export function FirstRunOnboarding({ skipIntegrations = shouldSkipFirstRunIntegr
     }
     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 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: canActivateBuilderFreeCredits
-                                                            ? "Activate Builder.io free credits"
-                                                            : "Connect Builder.io free credits" }), _jsx("p", { className: "mt-1 max-w-xs text-xs leading-5 text-muted-foreground", children: canActivateBuilderFreeCredits ? ("Create or reuse your Builder.io account and activate its free credits in one click.") : (_jsxs(_Fragment, { children: ["One click connects", " ", _jsx("a", { href: "https://www.builder.io/", target: "_blank", rel: "noreferrer", className: "text-foreground underline decoration-border underline-offset-2 hover:decoration-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring", children: "Builder.io free credits" }), " ", "with the services this app needs."] })) })] }), _jsx(IconArrowRight, { className: "mt-0.5 text-primary", size: 17 })] }), _jsxs("div", { className: "mt-5 pt-3", children: [_jsx("p", { className: "text-[11px] font-medium text-muted-foreground", children: canActivateBuilderFreeCredits
-                                                    ? "Included with active Builder.io free credits"
-                                                    : "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", "aria-describedby": canActivateBuilderFreeCredits
-                                            ? "first-run-builder-consent"
-                                            : undefined, className: cn(primaryButtonClass, "mt-5 w-full"), onClick: handleBuilder, children: [canActivateBuilderFreeCredits
-                                                ? "Activate Builder.io free credits"
-                                                : "Connect Builder.io free credits", _jsx(IconArrowRight, { size: 15 })] }), canActivateBuilderFreeCredits && (_jsxs("p", { id: "first-run-builder-consent", "data-testid": "first-run-builder-consent", className: "mt-3 text-[11px] leading-4 text-muted-foreground", children: ["Uses your verified Agent-Native email only. Google credentials are never shared. By selecting Activate, you agree to Builder.io's", " ", _jsx("a", { href: "https://www.builder.io/legal/terms", 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: "Terms of Service" }), " ", "and", " ", _jsx("a", { href: "https://www.builder.io/legal/privacy", 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: "Privacy Policy" }), "."] }))] }), _jsxs("div", { role: "button", tabIndex: 0, "aria-label": "Use my own keys", "data-testid": "first-run-use-own-keys", className: "rounded-xl bg-muted/35 p-4 text-left transition-colors hover:bg-muted/50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring", onClick: () => {
+                                                            ? t("agentChat.onboarding.builderActivateCredits")
+                                                            : t("agentChat.onboarding.builderConnectCredits") }), _jsx("p", { className: "mt-1 max-w-xs text-xs leading-5 text-muted-foreground", children: canActivateBuilderFreeCredits ? (t("agentChat.onboarding.builderActivateDescription")) : (_jsxs(_Fragment, { children: ["One click connects", " ", _jsx("a", { href: "https://www.builder.io/", target: "_blank", rel: "noreferrer", className: "text-foreground underline decoration-border underline-offset-2 hover:decoration-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring", children: "Builder.io free credits" }), " ", "with the services this app needs."] })) })] }), _jsx(IconArrowRight, { className: "mt-0.5 text-primary", size: 17 })] }), _jsxs("div", { className: "mt-5 pt-3", children: [_jsx("p", { className: "text-[11px] font-medium text-muted-foreground", children: canActivateBuilderFreeCredits
+                                                    ? t("agentChat.onboarding.builderActiveCredits")
+                                                    : t("agentChat.onboarding.builderCredits") }), _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(" · ") })] })] })] })] }), _jsx(BuilderConnectPopover, { flow: connectFlow, onConnect: (provisionAccount) => handleBuilder(provisionAccount), contentTestId: "first-run-builder-consent", primaryTestId: "first-run-builder-create-and-activate", secondaryTestId: "first-run-builder-existing-account", children: _jsxs("button", { type: "button", "data-testid": "first-run-connect-builder", className: cn(primaryButtonClass, "mt-5 w-full"), children: [t(canActivateBuilderFreeCredits
+                                                    ? "agentChat.onboarding.builderActivateCredits"
+                                                    : "agentChat.onboarding.builderConnectCredits"), _jsx(IconArrowRight, { size: 15 })] }) })] }), _jsxs("div", { role: "button", tabIndex: 0, "aria-label": "Use my own keys", "data-testid": "first-run-use-own-keys", className: "rounded-xl bg-muted/35 p-4 text-left transition-colors hover:bg-muted/50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring", onClick: () => {
                                     trackFirstRunStepCompleted("choice");
                                     setScreen("manual");
                                 }, onKeyDown: (event) => {
@@ -349,12 +353,17 @@ export function FirstRunOnboarding({ skipIntegrations = shouldSkipFirstRunIntegr
                                             : t("agentChat.common.continue"), !savingRole && _jsx(IconArrowRight, { size: 15 })] })] })] }), completeFirstRunError && (_jsx(FirstRunCompletionError, { message: completeFirstRunError, onRetry: () => void finishOnboarding("role") }))] }));
     }
     if (screen === "connecting") {
-        const provisioning = connectFlow.agentNativeProvisioningEnabled;
-        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", role: "status", "aria-live": "polite", "aria-busy": connectFlow.connecting, 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: provisioning
-                            ? "Activating Builder.io free credits"
-                            : "Connecting Builder.io free credits" }), _jsx("p", { className: "mt-2 text-sm text-muted-foreground", children: provisioning
-                            ? "Creating or reusing your Builder.io account. This usually takes a few seconds."
-                            : "Finish the one-click connection in the new window." }), _jsxs("div", { className: "mt-7 w-full rounded-xl bg-muted/35 p-4 text-left", children: [_jsxs("div", { className: "flex items-center justify-between gap-3", children: [_jsx(Skeleton, { className: "h-3 w-28" }), _jsx(Skeleton, { className: "h-5 w-16 rounded-full" })] }), _jsx(Skeleton, { className: "mt-4 h-8 w-full" }), _jsxs("div", { className: "mt-3 grid grid-cols-3 gap-2", children: [_jsx(Skeleton, { className: "h-7 w-full" }), _jsx(Skeleton, { className: "h-7 w-full" }), _jsx(Skeleton, { className: "h-7 w-full" })] })] }), connectFlow.error && (_jsxs("div", { className: "mt-4 flex flex-col items-center gap-2", children: [_jsx("p", { className: "text-xs text-destructive", children: connectFlow.error }), _jsx("button", { type: "button", className: secondaryButtonClass, onClick: () => setScreen("choice"), children: "Try again" })] }))] }) }));
+        const accountExists = connectFlow.accountExists;
+        const provisioning = builderConnectionMode === "provision" && !accountExists;
+        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", role: "status", "aria-live": "polite", "aria-busy": connectFlow.connecting, children: [_jsx("div", { className: "flex size-10 items-center justify-center rounded-full bg-primary/10 text-primary", children: accountExists ? (_jsx(IconKey, { size: 19 })) : (_jsx(IconLoader2, { className: "animate-spin", size: 19 })) }), _jsx("h1", { className: "mt-5 text-xl font-semibold tracking-[-0.04em]", children: accountExists
+                            ? t("agentChat.onboarding.builderAccountExistsTitle")
+                            : provisioning
+                                ? t("agentChat.onboarding.builderActivating")
+                                : t("agentChat.onboarding.builderConnecting") }), _jsx("p", { className: "mt-2 text-sm text-muted-foreground", children: accountExists
+                            ? t("agentChat.onboarding.builderAccountExistsDescription")
+                            : provisioning
+                                ? t("agentChat.onboarding.builderProvisioningDescription")
+                                : t("agentChat.onboarding.builderConnectionDescription") }), accountExists ? (_jsxs("button", { type: "button", className: cn(primaryButtonClass, "mt-7 w-full"), onClick: () => handleBuilder(false), disabled: connectFlow.connecting, children: [t("agentChat.auth.logIn"), _jsx(IconArrowRight, { size: 15 })] })) : (_jsxs(_Fragment, { children: [_jsxs("div", { className: "mt-7 w-full rounded-xl bg-muted/35 p-4 text-left", children: [_jsxs("div", { className: "flex items-center justify-between gap-3", children: [_jsx(Skeleton, { className: "h-3 w-28" }), _jsx(Skeleton, { className: "h-5 w-16 rounded-full" })] }), _jsx(Skeleton, { className: "mt-4 h-8 w-full" }), _jsxs("div", { className: "mt-3 grid grid-cols-3 gap-2", children: [_jsx(Skeleton, { className: "h-7 w-full" }), _jsx(Skeleton, { className: "h-7 w-full" }), _jsx(Skeleton, { className: "h-7 w-full" })] })] }), connectFlow.error && (_jsxs("div", { className: "mt-4 flex flex-col items-center gap-2", children: [_jsx("p", { className: "text-xs text-destructive", children: connectFlow.error }), _jsx("button", { type: "button", className: secondaryButtonClass, onClick: () => setScreen("choice"), children: "Try again" })] }))] }))] }) }));
     }
     return (_jsxs(OnboardingShell, { profile: profile, screen: "ready", children: [_jsxs("div", { className: "mx-auto flex w-full max-w-2xl flex-col items-center text-center", children: [_jsx("div", { className: "flex size-12 items-center justify-center rounded-2xl bg-primary/10 text-primary", children: _jsx(IconCheck, { size: 20 }) }), _jsx("h1", { className: "mt-5 text-xl font-semibold tracking-[-0.04em]", children: "Your agent is ready." }), _jsx("p", { className: "mt-2 max-w-md text-sm leading-6 text-muted-foreground", children: "Start with a chat, then connect more tools whenever you need them." }), _jsx("div", { className: "mt-7 grid w-full gap-2 text-left sm:grid-cols-3", children: (skipIntegrations
                             ? [

package/dist/client/onboarding/OnboardingPanel.js

@@ -11,7 +11,7 @@ import { useState, useEffect } from "react";
 import { sendToAgentChat } from "../agent-chat.js";
 import { agentNativePath } from "../api-path.js";
 import { Tooltip, TooltipContent, TooltipTrigger, } from "../components/ui/tooltip.js";
-import { useBuilderConnectFlow } from "../settings/useBuilderStatus.js";
+import { BuilderConnectPopover, useBuilderConnectFlow, } from "../settings/index.js";
 import { useDevMode } from "../use-dev-mode.js";
 import { trackOnboardingEvent, useOnboarding } from "./use-onboarding.js";
 import { useOnboardingPreviewMode } from "./use-preview-mode.js";
@@ -224,11 +224,13 @@ function FormMethod({ method, onCompleted, }) {
 }
 // ─── builder-cli-auth ──────────────────────────────────────────────────────
 function BuilderCliAuthMethod({ onCompleted, primary, }) {
-    const { connecting, error, start } = useBuilderConnectFlow({
+    const connectFlow = useBuilderConnectFlow({
+        provisionAccount: true,
         trackingSource: "onboarding_builder_cli_auth",
         onConnected: onCompleted,
     });
-    return (_jsxs(_Fragment, { children: [_jsx("button", { type: "button", onClick: () => start(), disabled: connecting, style: { ...buttonPrimary(primary), opacity: connecting ? 0.7 : 1 }, children: connecting ? (_jsxs(_Fragment, { children: [_jsx(IconLoader2, { size: 12, style: { marginInlineEnd: 4 }, className: "animate-spin" }), "Waiting for Builder..."] })) : ("Connect Builder") }), connecting && (_jsx("p", { style: styles.methodHint, children: "A Builder tab opened. Choose your team or app space there; setup will continue here automatically." })), error && _jsx("p", { style: styles.errText, children: error })] }));
+    const { connecting, error } = connectFlow;
+    return (_jsxs(_Fragment, { children: [_jsx(BuilderConnectPopover, { flow: connectFlow, children: _jsx("button", { type: "button", disabled: connecting, style: { ...buttonPrimary(primary), opacity: connecting ? 0.7 : 1 }, children: connecting ? (_jsxs(_Fragment, { children: [_jsx(IconLoader2, { size: 12, style: { marginInlineEnd: 4 }, className: "animate-spin" }), "Waiting for Builder..."] })) : ("Connect Builder") }) }), connecting && (_jsx("p", { style: styles.methodHint, children: "A Builder tab opened. Choose your team or app space there; setup will continue here automatically." })), error && _jsx("p", { style: styles.errText, children: error })] }));
 }
 // ─── agent-task ────────────────────────────────────────────────────────────
 function AgentTaskMethod({ method, stepId: _stepId, }) {

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

@@ -45,7 +45,13 @@ export function FirstRunOnboardingStartupGate({ children, }) {
     }, [shouldResolve]);
     const ownsSurface = decision === "eligible";
     const hideApp = decision !== "ineligible";
-    const app = hideApp ? (_jsx("div", { "aria-hidden": "true", "data-first-run-app-hidden": "true", style: { display: "contents", visibility: "hidden" }, children: children })) : (children);
+    // Keep the app at one React tree position while the async eligibility check
+    // settles. Switching between a wrapper and a bare child remounts stateful
+    // app chrome; a consumed one-shot URL preference then cannot be restored.
+    const app = shouldResolve ? (_jsx("div", { "aria-hidden": hideApp ? "true" : undefined, "data-first-run-app-hidden": hideApp ? "true" : undefined, style: {
+            display: "contents",
+            ...(hideApp ? { visibility: "hidden" } : {}),
+        }, children: children })) : (children);
     return (_jsxs(FirstRunOnboardingGateContext.Provider, { value: ownsSurface, children: [app, decision === "pending" && _jsx(FirstRunOnboardingStartupLoading, {}), ownsSurface && (_jsx(Suspense, { fallback: _jsx(FirstRunOnboardingStartupLoading, {}), children: _jsx(FirstRunOnboarding, { initialFirstRun: true }) }))] }));
 }
 function FirstRunOnboardingStartupLoading() {

package/dist/client/resources/McpIntegrationDialog.d.ts

@@ -11,8 +11,9 @@ export interface McpIntegrationDialogProps {
     hasOrg: boolean;
     onCreateMcpServer: (args: CreateMcpServerArgs) => Promise<unknown>;
     onOAuthStart?: (url: string) => void | Promise<void>;
+    oauthReady?: boolean;
     oauthReturnPath?: string;
     onCreated?: () => void;
     integrations?: DefaultMcpIntegration[];
 }
-export declare function McpIntegrationDialog({ open, onOpenChange, initialIntegrationId, connectIntegrationId, quickConnectIntegrationId, defaultScope, canCreateOrgMcp, hasOrg, onCreateMcpServer, onOAuthStart, oauthReturnPath, onCreated, integrations, }: McpIntegrationDialogProps): import("react").JSX.Element | null;
+export declare function McpIntegrationDialog({ open, onOpenChange, initialIntegrationId, connectIntegrationId, quickConnectIntegrationId, defaultScope, canCreateOrgMcp, hasOrg, onCreateMcpServer, onOAuthStart, oauthReady, oauthReturnPath, onCreated, integrations, }: McpIntegrationDialogProps): import("react").JSX.Element | null;

package/dist/client/resources/McpIntegrationDialog.js

@@ -49,7 +49,7 @@ function resolveIntegrationScope(integration, defaultScope, hasOrg, canCreateOrg
         (integration.supportsOrganizationScope === true &&
             integration.managedOAuth !== true));
 }
-export function McpIntegrationDialog({ open, onOpenChange, initialIntegrationId = null, connectIntegrationId = null, quickConnectIntegrationId = null, defaultScope, canCreateOrgMcp, hasOrg, onCreateMcpServer, onOAuthStart, oauthReturnPath, onCreated, integrations, }) {
+export function McpIntegrationDialog({ open, onOpenChange, initialIntegrationId = null, connectIntegrationId = null, quickConnectIntegrationId = null, defaultScope, canCreateOrgMcp, hasOrg, onCreateMcpServer, onOAuthStart, oauthReady = true, oauthReturnPath, onCreated, integrations, }) {
     const t = useT();
     const [mode, setMode] = useState("catalog");
     const [query, setQuery] = useState("");
@@ -151,6 +151,8 @@ export function McpIntegrationDialog({ open, onOpenChange, initialIntegrationId
         setMode("form");
     };
     const beginOAuth = (args, options) => {
+        if (!oauthReady)
+            return;
         const validationError = getMcpUrlValidationError(args.url);
         if (validationError) {
             setError(validationError);
@@ -305,6 +307,8 @@ export function McpIntegrationDialog({ open, onOpenChange, initialIntegrationId
         const integration = defaultIntegrations.find((candidate) => candidate.id === quickConnectIntegrationId);
         if (!integration)
             return;
+        if (integration.authMode === "oauth" && !oauthReady)
+            return;
         quickConnectAttemptedRef.current = quickConnectIntegrationId;
         quickConnectRef.current?.(integration);
     }, [
@@ -313,6 +317,7 @@ export function McpIntegrationDialog({ open, onOpenChange, initialIntegrationId
         mcpServersQuery.isError,
         mcpServersQuery.isSuccess,
         open,
+        oauthReady,
         quickConnectIntegrationId,
     ]);
     useEffect(() => {
@@ -325,6 +330,8 @@ export function McpIntegrationDialog({ open, onOpenChange, initialIntegrationId
         const integration = defaultIntegrations.find((candidate) => candidate.id === connectIntegrationId);
         if (!integration)
             return;
+        if (integration.authMode === "oauth" && !oauthReady)
+            return;
         const attemptKey = `connect:${connectIntegrationId}`;
         if (quickConnectAttemptedRef.current === attemptKey)
             return;
@@ -347,6 +354,7 @@ export function McpIntegrationDialog({ open, onOpenChange, initialIntegrationId
         mcpServersQuery.isError,
         mcpServersQuery.isSuccess,
         open,
+        oauthReady,
     ]);
     const connectPersonal = (integration) => {
         if (requiresMcpIntegrationSetup(integration)) {
@@ -541,5 +549,5 @@ export function McpIntegrationDialog({ open, onOpenChange, initialIntegrationId
                                                         }, placeholder: selected?.headerPlaceholder ??
                                                             t("mcpIntegrations.headersPlaceholder") })] })), selected?.docsUrl && (_jsxs("a", { href: selected.docsUrl, target: "_blank", rel: "noopener noreferrer", className: "inline-flex items-center gap-1 text-[11px] text-muted-foreground underline hover:text-foreground", children: [t("mcpIntegrations.openSetupDocs"), _jsx(IconExternalLink, { className: "h-3 w-3" })] }))] })), testResult && (_jsxs("div", { className: cn("flex items-start gap-1 rounded-md px-3 py-2 text-[11px] leading-snug", testResult.ok
                                             ? "bg-green-500/5 text-green-600 dark:text-green-400"
-                                            : "bg-red-500/5 text-red-600 dark:text-red-400"), children: [testResult.ok && (_jsx(IconCheck, { className: "mt-0.5 h-3 w-3 shrink-0" })), _jsx("span", { className: "min-w-0 break-words", children: testResult.message })] })), error && (_jsx("div", { className: "break-words rounded-md bg-red-500/5 px-3 py-2 text-[11px] leading-snug text-red-600 dark:text-red-400", children: error }))] }) }), _jsxs("div", { className: "flex shrink-0 items-center justify-between gap-2 border-t border-border px-7 py-4", children: [!selectedRequiresSetup && (_jsx("button", { type: "button", onClick: runTest, disabled: !url.trim() || busy, className: "rounded-md border border-border bg-background px-3 py-1.5 text-[12px] font-medium text-foreground hover:bg-accent disabled:pointer-events-none disabled:opacity-40", children: t("mcpIntegrations.test") })), !selected && customAuthMode === "oauth" ? (_jsxs("button", { type: "button", onClick: connectCustomWithOAuth, disabled: !name.trim() || !url.trim() || busy, "aria-busy": busy, className: "rounded-md border border-border bg-background px-3 py-1.5 text-[12px] font-medium text-foreground hover:bg-accent disabled:pointer-events-none disabled:opacity-40", children: [busy && (_jsx(IconLoader2, { className: "me-1.5 inline h-3.5 w-3.5 animate-spin" })), t("mcpIntegrations.connectWithOAuth")] })) : null, selectedRequiresSetup ? (_jsx("div", { className: "ms-auto flex items-center gap-2", children: selected?.authMode === "oauth" && (_jsxs("button", { type: "button", onClick: () => connectWithOAuth(selected), disabled: busy, "aria-busy": busy, className: "inline-flex min-w-[132px] items-center justify-center gap-1.5 rounded-md bg-primary px-3 py-1.5 text-[12px] font-medium text-primary-foreground hover:bg-primary/90 disabled:pointer-events-none disabled:opacity-40", children: [busy && (_jsx(IconLoader2, { className: "h-3.5 w-3.5 animate-spin" })), t("mcpIntegrations.continueToConnect")] })) })) : selected?.authMode === "oauth" ? (_jsxs("button", { type: "button", onClick: () => connectWithOAuth(selected), disabled: !name.trim() || !url.trim() || busy, "aria-busy": busy, className: "inline-flex min-w-[92px] items-center justify-center gap-1.5 rounded-md bg-primary px-3 py-1.5 text-[12px] font-medium text-primary-foreground hover:bg-primary/90 disabled:pointer-events-none disabled:opacity-40", children: [busy && _jsx(IconLoader2, { className: "h-3.5 w-3.5 animate-spin" }), t("mcpIntegrations.connectWithOAuth")] })) : !selected && customAuthMode === "oauth" ? null : (_jsxs("button", { type: "button", onClick: submitForm, disabled: !name.trim() || !url.trim() || busy, className: "inline-flex min-w-[92px] items-center justify-center gap-1.5 rounded-md bg-primary px-3 py-1.5 text-[12px] font-medium text-primary-foreground hover:bg-primary/90 disabled:pointer-events-none disabled:opacity-40", children: [busy && _jsx(IconLoader2, { className: "h-3.5 w-3.5 animate-spin" }), t("mcpIntegrations.connect")] }))] })] }))] }) }));
+                                            : "bg-red-500/5 text-red-600 dark:text-red-400"), children: [testResult.ok && (_jsx(IconCheck, { className: "mt-0.5 h-3 w-3 shrink-0" })), _jsx("span", { className: "min-w-0 break-words", children: testResult.message })] })), error && (_jsx("div", { className: "break-words rounded-md bg-red-500/5 px-3 py-2 text-[11px] leading-snug text-red-600 dark:text-red-400", children: error }))] }) }), _jsxs("div", { className: "flex shrink-0 items-center justify-between gap-2 border-t border-border px-7 py-4", children: [!selectedRequiresSetup && (_jsx("button", { type: "button", onClick: runTest, disabled: !url.trim() || busy, className: "rounded-md border border-border bg-background px-3 py-1.5 text-[12px] font-medium text-foreground hover:bg-accent disabled:pointer-events-none disabled:opacity-40", children: t("mcpIntegrations.test") })), !selected && customAuthMode === "oauth" ? (_jsxs("button", { type: "button", onClick: connectCustomWithOAuth, disabled: !oauthReady || !name.trim() || !url.trim() || busy, "aria-busy": busy, className: "rounded-md border border-border bg-background px-3 py-1.5 text-[12px] font-medium text-foreground hover:bg-accent disabled:pointer-events-none disabled:opacity-40", children: [busy && (_jsx(IconLoader2, { className: "me-1.5 inline h-3.5 w-3.5 animate-spin" })), t("mcpIntegrations.connectWithOAuth")] })) : null, selectedRequiresSetup ? (_jsx("div", { className: "ms-auto flex items-center gap-2", children: selected?.authMode === "oauth" && (_jsxs("button", { type: "button", onClick: () => connectWithOAuth(selected), disabled: !oauthReady || busy, "aria-busy": busy, className: "inline-flex min-w-[132px] items-center justify-center gap-1.5 rounded-md bg-primary px-3 py-1.5 text-[12px] font-medium text-primary-foreground hover:bg-primary/90 disabled:pointer-events-none disabled:opacity-40", children: [busy && (_jsx(IconLoader2, { className: "h-3.5 w-3.5 animate-spin" })), t("mcpIntegrations.continueToConnect")] })) })) : selected?.authMode === "oauth" ? (_jsxs("button", { type: "button", onClick: () => connectWithOAuth(selected), disabled: !oauthReady || !name.trim() || !url.trim() || busy, "aria-busy": busy, className: "inline-flex min-w-[92px] items-center justify-center gap-1.5 rounded-md bg-primary px-3 py-1.5 text-[12px] font-medium text-primary-foreground hover:bg-primary/90 disabled:pointer-events-none disabled:opacity-40", children: [busy && _jsx(IconLoader2, { className: "h-3.5 w-3.5 animate-spin" }), t("mcpIntegrations.connectWithOAuth")] })) : !selected && customAuthMode === "oauth" ? null : (_jsxs("button", { type: "button", onClick: submitForm, disabled: !name.trim() || !url.trim() || busy, className: "inline-flex min-w-[92px] items-center justify-center gap-1.5 rounded-md bg-primary px-3 py-1.5 text-[12px] font-medium text-primary-foreground hover:bg-primary/90 disabled:pointer-events-none disabled:opacity-40", children: [busy && _jsx(IconLoader2, { className: "h-3.5 w-3.5 animate-spin" }), t("mcpIntegrations.connect")] }))] })] }))] }) }));
 }

package/dist/client/session-replay.js

@@ -1,6 +1,11 @@
 import { SESSION_REPLAY_IFRAME_ATTRIBUTE, SESSION_REPLAY_IFRAME_PROBE, SESSION_REPLAY_IFRAME_START, SESSION_REPLAY_IFRAME_STOP, } from "../session-replay-iframe-protocol.js";
+import { isSyntheticTrafficValue } from "../shared/test-traffic.js";
 import { getOrCreateAnalyticsAnonymousId, getOrCreateAnalyticsSessionId, } from "./analytics-session.js";
 import { scrubUrl } from "./url-scrub.js";
+function isSyntheticBrowserTraffic() {
+    return (typeof window !== "undefined" &&
+        isSyntheticTrafficValue(window.__AGENT_NATIVE_SYNTHETIC_TRAFFIC__));
+}
 const DEFAULT_REPLAY_PATH = "/api/analytics/replay";
 const DEFAULT_SAMPLING_SALT = "agent-native-session-replay";
 /**
@@ -1446,6 +1451,8 @@ function rollbackReplaySequenceReservation(state, payload) {
     persistReplaySequence(payload.sessionId, payload.replayId, state.startedAtMs, state.sequence, state.replayLinkBaseUrl);
 }
 export async function flushSessionReplay(reason = "manual") {
+    if (isSyntheticBrowserTraffic())
+        return;
     const state = getState();
     if (!state.options)
         return;
@@ -2485,6 +2492,9 @@ function installCaptureInterceptors(state) {
     };
 }
 export async function startSessionReplay(options = {}) {
+    if (isSyntheticBrowserTraffic()) {
+        return { started: false, reason: "disabled" };
+    }
     if (options.enabled === false)
         return { started: false, reason: "disabled" };
     if (options.shouldStart && !options.shouldStart()) {

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

@@ -0,0 +1,25 @@
+import React from "react";
+import type { BuilderConnectFlow } from "./useBuilderStatus.js";
+type BuilderConnectTrigger = React.ReactElement<{
+    onClick?: React.MouseEventHandler<HTMLElement>;
+    "aria-disabled"?: boolean;
+}>;
+export interface BuilderConnectPopoverProps {
+    flow: Pick<BuilderConnectFlow, "connecting" | "start"> & {
+        agentNativeProvisioningEnabled?: boolean;
+        accountExists?: boolean;
+        /** Retry the status request without bypassing provisioning consent. */
+        retry?: () => void;
+        statusResolved?: boolean;
+    };
+    children: BuilderConnectTrigger;
+    /** Preserve a surface-specific tracking source or callback when choosing a path. */
+    onConnect?: (provisionAccount: boolean) => void;
+    /** Preserve parent-row click behavior for compact setup controls. */
+    onTriggerClick?: React.MouseEventHandler<HTMLElement>;
+    contentTestId?: string;
+    primaryTestId?: string;
+    secondaryTestId?: string;
+}
+export declare function BuilderConnectPopover({ flow, children, onConnect, onTriggerClick, contentTestId, primaryTestId, secondaryTestId, }: BuilderConnectPopoverProps): React.JSX.Element;
+export {};

package/dist/client/settings/BuilderConnectPopover.js

@@ -0,0 +1,55 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { IconArrowRight, IconLoader2 } from "@tabler/icons-react";
+import React, { useEffect, useRef, useState } from "react";
+import { Popover, PopoverContent, PopoverTrigger, } from "../components/ui/popover.js";
+import { useT } from "../i18n.js";
+import { cn } from "../utils.js";
+export function BuilderConnectPopover({ flow, children, onConnect, onTriggerClick, contentTestId, primaryTestId, secondaryTestId, }) {
+    const t = useT();
+    const [open, setOpen] = useState(false);
+    const capabilityResolved = flow.statusResolved === true;
+    const showPopover = capabilityResolved && flow.agentNativeProvisioningEnabled === true;
+    const accountExists = showPopover && flow.accountExists;
+    const initiatedByThisTriggerRef = useRef(false);
+    useEffect(() => {
+        if (accountExists && initiatedByThisTriggerRef.current) {
+            initiatedByThisTriggerRef.current = false;
+            setOpen(true);
+        }
+    }, [accountExists]);
+    const start = (provisionAccount) => {
+        initiatedByThisTriggerRef.current = true;
+        setOpen(false);
+        if (onConnect) {
+            onConnect(provisionAccount);
+            return;
+        }
+        flow.start({ provisionAccount });
+    };
+    const trigger = React.cloneElement(children, {
+        "aria-disabled": capabilityResolved ? undefined : true,
+        onClick: (event) => {
+            if (!capabilityResolved) {
+                event.preventDefault();
+                event.stopPropagation();
+                flow.retry?.();
+                return;
+            }
+            children.props.onClick?.(event);
+            onTriggerClick?.(event);
+            if (!showPopover && !event.defaultPrevented)
+                start(false);
+        },
+    });
+    if (!showPopover)
+        return trigger;
+    return (_jsxs(Popover, { open: open, onOpenChange: setOpen, children: [_jsx(PopoverTrigger, { asChild: true, children: trigger }), _jsx(PopoverContent, { align: "end", side: "bottom", sideOffset: -40, "aria-labelledby": "builder-connect-popover-title", "data-testid": contentTestId, className: "z-50 w-80 max-w-[calc(100vw-2rem)] p-3 text-left", children: _jsxs("div", { className: "space-y-2.5", children: [_jsx("h2", { id: "builder-connect-popover-title", className: "text-sm font-semibold text-foreground", children: accountExists
+                                ? t("agentChat.onboarding.builderAccountExistsTitle")
+                                : t("agentChat.onboarding.builderActivateTitle") }), _jsx("p", { className: "text-xs leading-5 text-muted-foreground", children: accountExists
+                                ? t("agentChat.onboarding.builderAccountExistsDescription")
+                                : t("agentChat.onboarding.builderActivationDescription") }), _jsxs("button", { type: "button", "data-testid": primaryTestId, className: cn("inline-flex min-h-9 w-full items-center justify-center gap-1.5 rounded-lg bg-foreground px-4 text-xs font-medium text-background transition-opacity hover:opacity-90 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:cursor-wait disabled:opacity-60"), onClick: () => start(accountExists ? false : true), disabled: flow.connecting, children: [flow.connecting ? (_jsx(IconLoader2, { size: 14, className: "animate-spin" })) : null, accountExists
+                                    ? t("agentChat.auth.logIn")
+                                    : flow.connecting
+                                        ? t("agentChat.onboarding.builderActivating")
+                                        : t("agentChat.onboarding.builderCreateAndActivate"), !accountExists && !flow.connecting ? (_jsx(IconArrowRight, { size: 15 })) : null] }), !accountExists && (_jsxs(_Fragment, { children: [_jsxs("p", { className: "text-[11px] leading-4 text-muted-foreground", children: [t("agentChat.onboarding.builderConsentPrefix"), " ", _jsx("a", { href: "https://www.builder.io/legal/terms", 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: t("agentChat.onboarding.builderTerms") }), " ", t("agentChat.onboarding.builderConsentAnd"), " ", _jsx("a", { href: "https://www.builder.io/legal/privacy", 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: t("agentChat.onboarding.builderPrivacy") }), "."] }), _jsx("button", { type: "button", "data-testid": secondaryTestId, className: "inline-flex min-h-9 w-full items-center justify-center rounded-lg px-4 text-xs font-normal text-muted-foreground transition-colors hover:bg-muted/50 hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:cursor-wait disabled:opacity-60", onClick: () => start(false), disabled: flow.connecting, children: t("agentChat.onboarding.builderExistingAccount") })] }))] }) })] }));
+}

package/dist/client/settings/SettingsPanel.js

@@ -26,6 +26,7 @@ import { cn } from "../utils.js";
 import { AGENT_SETTINGS_SECTIONS, ALL_SETTINGS_SECTIONS, INTEGRATION_SETTINGS_SECTIONS, WORKSPACE_SETTINGS_SECTIONS, getAgentSettingsSearchTabs, } from "./agent-settings-search.js";
 import { AgentsSection } from "./AgentsSection.js";
 import { AutomationsSection } from "./AutomationsSection.js";
+import { BuilderConnectPopover } from "./BuilderConnectPopover.js";
 import { DemoModeSection } from "./DemoModeSection.js";
 import { ExtensionsSettingsContent } from "./ExtensionsSettingsContent.js";
 import { FileStorageSettingsForm } from "./FileStorageSettingsForm.js";
@@ -205,16 +206,28 @@ function UseBuilderCard({ builderFlow, connectUrl, connected, orgName, envManage
     if (effectiveConnected) {
         return (_jsxs("div", { className: cn("rounded-md border border-border", isPage ? "px-3.5 py-3" : "px-2.5 py-2", bgClass), children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsx("div", { className: cn("font-medium text-foreground", titleCls), children: "Builder.io" }), _jsxs("span", { className: cn("flex items-center gap-1 text-green-500", bodyCls), children: [_jsx(IconCheck, { size: isPage ? 14 : 10 }), "Connected"] })] }), effectiveOrgName && (_jsx("p", { className: cn("text-muted-foreground mt-0.5", bodyCls), children: effectiveOrgName })), envManaged ? (_jsx("p", { className: cn("text-muted-foreground mt-1", bodyCls), children: credentialSource === "env"
                         ? "Deployment fallback is available. Connect your own account to override it."
-                        : "Using your connected Builder account. Deployment fallback is still available." })) : null, connectUrl || credentialSource !== "env" ? (_jsxs("div", { className: "flex items-center gap-2 mt-2.5", children: [connectUrl && (_jsx(Button, { type: "button", intent: "neutral", emphasis: "ghost", onClick: () => builderFlow.start({ trackingSource, trackingFlow }), disabled: builderFlow.connecting, className: cn(pillButtonClass(isPage, "ghost"), "no-underline"), children: builderFlow.connecting
-                                ? "Connecting..."
-                                : credentialSource === "env"
-                                    ? "Connect account"
-                                    : "Reconnect" })), credentialSource !== "env" ? _jsx(DisconnectBuilderButton, {}) : null] })) : null] }));
+                        : "Using your connected Builder account. Deployment fallback is still available." })) : null, connectUrl || credentialSource !== "env" ? (_jsxs("div", { className: "flex items-center gap-2 mt-2.5", children: [connectUrl && (_jsx(BuilderConnectPopover, { flow: builderFlow, onConnect: (provisionAccount) => builderFlow.start({
+                                trackingSource,
+                                trackingFlow,
+                                provisionAccount,
+                            }), children: _jsx(Button, { type: "button", intent: "neutral", emphasis: "ghost", disabled: builderFlow.connecting, className: cn(pillButtonClass(isPage, "ghost"), "no-underline"), children: builderFlow.connecting
+                                    ? "Connecting..."
+                                    : credentialSource === "env"
+                                        ? "Connect account"
+                                        : "Reconnect" }) })), credentialSource !== "env" ? _jsx(DisconnectBuilderButton, {}) : null] })) : null] }));
     }
     if (compact) {
-        return (_jsxs(Button, { type: "button", intent: "primary", emphasis: "solid", onClick: () => builderFlow.start({ trackingSource, trackingFlow }), disabled: builderFlow.connecting, className: "inline-flex shrink-0 items-center gap-1.5 rounded-md bg-primary px-3 py-1.5 text-sm font-medium text-primary-foreground hover:bg-primary/90 disabled:cursor-wait disabled:opacity-70", children: [builderFlow.connecting ? "Connecting…" : "Connect Builder.io", builderFlow.connecting ? (_jsx(IconLoader2, { size: 14, className: "animate-spin" })) : null] }));
+        return (_jsx(BuilderConnectPopover, { flow: builderFlow, onConnect: (provisionAccount) => builderFlow.start({
+                trackingSource,
+                trackingFlow,
+                provisionAccount,
+            }), children: _jsxs(Button, { type: "button", intent: "primary", emphasis: "solid", disabled: builderFlow.connecting, className: "inline-flex shrink-0 items-center gap-1.5 rounded-md bg-primary px-3 py-1.5 text-sm font-medium text-primary-foreground hover:bg-primary/90 disabled:cursor-wait disabled:opacity-70", children: [builderFlow.connecting ? "Connecting…" : "Connect Builder.io", builderFlow.connecting ? (_jsx(IconLoader2, { size: 14, className: "animate-spin" })) : null] }) }));
     }
-    return (_jsxs("div", { className: cn("flex w-full items-center gap-3 rounded-xl border border-border/70 bg-card text-start transition-colors", isPage ? "px-4 py-3.5" : "px-3 py-3", builderFlow.error && "border-destructive/40"), children: [_jsxs("div", { className: "flex min-w-0 flex-1 items-center gap-2.5", children: [_jsx("div", { className: cn("flex shrink-0 items-center justify-center rounded-md bg-foreground text-background", isPage ? "h-8 w-8" : "h-7 w-7"), children: _jsx(BuilderBMark, { className: isPage ? "h-4 w-4" : "h-3.5 w-3.5" }) }), _jsxs("div", { className: "flex-1 min-w-0", children: [_jsxs("div", { className: "flex items-center gap-1.5 flex-wrap", children: [_jsx("span", { className: cn("font-semibold text-foreground", isPage ? "text-sm" : "text-[12px]"), children: builderFlow.connecting ? "Connecting Builder.io..." : label }), builderFlow.connecting && (_jsx(IconLoader2, { size: isPage ? 14 : 12, className: "shrink-0 animate-spin text-muted-foreground" }))] }), _jsx("p", { className: cn("text-muted-foreground mt-0.5 leading-snug", isPage ? "text-xs" : "text-[10.5px]"), children: subtitle }), builderFlow.error && (_jsx("p", { className: cn("mt-1 text-destructive", bodyCls), children: builderFlow.error }))] })] }), _jsxs(Button, { type: "button", intent: "neutral", emphasis: "outline", onClick: () => builderFlow.start({ trackingSource, trackingFlow }), disabled: builderFlow.connecting, className: cn("inline-flex shrink-0 items-center gap-1.5 rounded-md border border-border px-3 py-1.5 font-medium text-foreground hover:bg-accent/40 disabled:cursor-wait disabled:opacity-70", isPage ? "text-sm" : "text-[11px]"), children: [builderFlow.connecting ? "Connecting…" : "Connect Builder.io", builderFlow.connecting ? (_jsx(IconLoader2, { size: isPage ? 14 : 12, className: "animate-spin" })) : null] })] }));
+    return (_jsxs("div", { className: cn("flex w-full items-center gap-3 rounded-xl border border-border/70 bg-card text-start transition-colors", isPage ? "px-4 py-3.5" : "px-3 py-3", builderFlow.error && "border-destructive/40"), children: [_jsxs("div", { className: "flex min-w-0 flex-1 items-center gap-2.5", children: [_jsx("div", { className: cn("flex shrink-0 items-center justify-center rounded-md bg-foreground text-background", isPage ? "h-8 w-8" : "h-7 w-7"), children: _jsx(BuilderBMark, { className: isPage ? "h-4 w-4" : "h-3.5 w-3.5" }) }), _jsxs("div", { className: "flex-1 min-w-0", children: [_jsxs("div", { className: "flex items-center gap-1.5 flex-wrap", children: [_jsx("span", { className: cn("font-semibold text-foreground", isPage ? "text-sm" : "text-[12px]"), children: builderFlow.connecting ? "Connecting Builder.io..." : label }), builderFlow.connecting && (_jsx(IconLoader2, { size: isPage ? 14 : 12, className: "shrink-0 animate-spin text-muted-foreground" }))] }), _jsx("p", { className: cn("text-muted-foreground mt-0.5 leading-snug", isPage ? "text-xs" : "text-[10.5px]"), children: subtitle }), builderFlow.error && (_jsx("p", { className: cn("mt-1 text-destructive", bodyCls), children: builderFlow.error }))] })] }), _jsx(BuilderConnectPopover, { flow: builderFlow, onConnect: (provisionAccount) => builderFlow.start({
+                    trackingSource,
+                    trackingFlow,
+                    provisionAccount,
+                }), children: _jsxs(Button, { type: "button", intent: "neutral", emphasis: "outline", disabled: builderFlow.connecting, className: cn("inline-flex shrink-0 items-center gap-1.5 rounded-md border border-border px-3 py-1.5 font-medium text-foreground hover:bg-accent/40 disabled:cursor-wait disabled:opacity-70", isPage ? "text-sm" : "text-[11px]"), children: [builderFlow.connecting ? "Connecting…" : "Connect Builder.io", builderFlow.connecting ? (_jsx(IconLoader2, { size: isPage ? 14 : 12, className: "animate-spin" })) : null] }) })] }));
 }
 // ─── Manual setup card ──────────────────────────────────────────────────────
 function ManualSetupCard({ id, title = "Set up manually", hint, docsUrl, docsLabel = "Read the docs", children, dim, sourceBadge, bare = false, popover = false, popoverLabel = "Manage", summaryContent, }) {
@@ -1116,6 +1129,7 @@ function SettingsPanelContent({ isDevMode, initialSection, sectionRequestKey, se
     const builderFlow = useBuilderConnectFlow({
         enabled: !builderConnectionOwnedExternally,
         popupUrl: connectUrl,
+        provisionAccount: true,
         trackingSource: "settings_panel_builder_card",
     });
     const scrollSectionIntoView = useCallback((section) => {

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

@@ -85,5 +85,5 @@ export interface SettingsTabsPageProps {
      */
     onValueChange?: (tabId: string) => void;
 }
-export declare function SettingsTabsPage({ general, account, team, whatsNew, extraTabs, generalLabel, accountLabel, teamLabel, whatsNewLabel, ariaLabel, defaultTab, className, navClassName, navHeader, contentClassName, enableSearch, searchPlaceholder, searchEntries, generalSearchEntries, value, onValueChange, }: SettingsTabsPageProps): import("react").JSX.Element;
+export declare function SettingsTabsPage(props: SettingsTabsPageProps): import("react").JSX.Element;
 export {};