@remit/web-client 0.0.324 → 0.0.326

package/dist/src/components/onboarding/OnboardingWizard.js

@@ -0,0 +1,661 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+/**
+ * OnboardingWizard — full 7-step onboarding flow.
+ *
+ * Steps: Welcome → Connector → Address → Servers → Credentials → Test → Sync
+ *        Microsoft path: Connector → MicrosoftEmail → redirect → MicrosoftGranted
+ *
+ * Entry points:
+ *  - First-run (zero accounts): full-screen wizard via /onboarding route
+ *  - Settings "Add account": steps 2-7 embedded in the settings content area
+ *
+ * Backend deps status:
+ *  - POST /accounts — CREATE. Exists.
+ *  - POST /accounts/test-connection — Exists.
+ *  - GET /accounts/{accountId}/sync/status — Exists (#431 syncPhase).
+ *  - POST /accounts/oauth/microsoft/start — Exists (#473).
+ *  - GET /autodiscovery?email=… — NOT YET IMPLEMENTED (TypeSpec-first, future).
+ *    Client-side autodiscovery (provider table + Mozilla autoconfig) used instead.
+ */
+import { accountOperationsCreateAccountMutation, configOperationsGetConfigOptions, configOperationsGetConfigQueryKey, microsoftOAuthOperationsMicrosoftOAuthStartMutation, syncOperationsGetSyncStatusOptions, } from "@remit/api-http-client/@tanstack/react-query.gen.ts";
+import { ACCOUNT_SERVICE_EMPTY_MESSAGE, ACCOUNT_SERVICE_ROWS, AccountServiceChoice, Banner, Button, CheckRow, ConnectorTile, FieldLabel, Input, Kbd, Select, ServerFields, securityToApi, WizardShell, } from "@remit/ui";
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import { AtSign, FileJson, Inbox, Loader2, Mail, Server } from "lucide-react";
+import { useCallback, useEffect, useRef, useState } from "react";
+import { REDIRECT_STALL_MESSAGE, useRedirectEnded, } from "../../hooks/useRedirectEnded.js";
+// useRef is kept for the hasCreatedRef guard — not for DOM refs
+import { discoverSettings, getAppPasswordUrl, getDiscoveryStatusMessage, } from "../../lib/autodiscovery.js";
+import { getPresetById, PROVIDER_PRESETS, presetIdForEmail, } from "../../lib/provider-presets.js";
+import { computeSmtpAutoFill } from "../settings/account-form-helpers.js";
+import { ConnectionTestStep, CredentialsStep, } from "./credential-steps.js";
+const STEP_LABELS = [
+    "Connector",
+    "Address",
+    "Servers",
+    "Credentials",
+    "Test",
+    "Sync",
+];
+// Maps WizardStep to zero-based index in the rail (welcome hides rail)
+const STEP_INDEX = {
+    welcome: 0,
+    connector: 0,
+    "microsoft-email": 0,
+    "microsoft-granted": 5,
+    address: 1,
+    servers: 2,
+    credentials: 3,
+    test: 4,
+    sync: 5,
+};
+const DEFAULT_IMAP = { host: "", port: 993, security: "tls" };
+const DEFAULT_SMTP = {
+    host: "",
+    port: 587,
+    security: "starttls",
+};
+/* ------------------------------------------------------------------ */
+/* Individual step components                                         */
+/* ------------------------------------------------------------------ */
+/**
+ * First run. Importing a config file sits beside adding the first account, not
+ * under it: someone arriving from another Reader has already made every choice
+ * the wizard is about to ask for, and the file is the shorter road.
+ */
+export function StepWelcome({ onStart, onImportConfig, }) {
+    // Keyboard: Enter advances
+    useEffect(() => {
+        const handler = (e) => {
+            if (e.key === "Enter")
+                onStart();
+        };
+        window.addEventListener("keydown", handler);
+        return () => window.removeEventListener("keydown", handler);
+    }, [onStart]);
+    return (_jsx(WizardShell, { steps: STEP_LABELS, activeStep: 0, hideSteps: true, title: "Welcome to Remit", subtitle: onImportConfig
+            ? "Set up your first account, or bring the settings from another Reader."
+            : "One inbox for all your mail, with context about every message.", footer: _jsxs(_Fragment, { children: [onImportConfig ? (_jsx(Button, { variant: "secondary", icon: _jsx(FileJson, { className: "size-4" }), onClick: onImportConfig, children: "Import a config file" })) : (_jsxs("span", { className: "text-2xs text-fg-subtle", children: [_jsx(Kbd, { children: "Enter" }), " to continue"] })), _jsx(Button, { variant: "primary", onClick: onStart, children: "Add your first account" })] }), children: _jsxs("div", { className: "flex flex-col items-start py-5", children: [_jsx("span", { className: "flex size-14 items-center justify-center rounded-md bg-accent-soft", children: _jsx(Mail, { className: "size-7 text-accent" }) }), _jsx("p", { className: "mt-5 max-w-sm text-sm leading-relaxed text-fg-muted", children: "Remit syncs your existing mailboxes and tells you who is really writing to you \u2014 sender history, authenticity checks, and similar messages, right next to every email." }), onImportConfig && (_jsx("p", { className: "mt-3 max-w-sm text-sm leading-relaxed text-fg-muted", children: "A config file carries your accounts, folder roles, rules, flagged senders and appearance from another Reader. It never carries passwords, so you sign in again here." }))] }) }));
+}
+function StepConnector({ onContinue, onMicrosoft, onBack, showBack, }) {
+    const [selected, setSelected] = useState("imap");
+    // Keyboard: Enter advances, Esc goes back
+    useEffect(() => {
+        const handler = (e) => {
+            if (e.key === "Enter") {
+                if (selected === "microsoft")
+                    onMicrosoft();
+                else
+                    onContinue();
+            }
+            if (e.key === "Escape")
+                onBack();
+        };
+        window.addEventListener("keydown", handler);
+        return () => window.removeEventListener("keydown", handler);
+    }, [onContinue, onMicrosoft, onBack, selected]);
+    const handleContinue = () => {
+        if (selected === "microsoft")
+            onMicrosoft();
+        else
+            onContinue();
+    };
+    return (_jsx(WizardShell, { steps: STEP_LABELS, activeStep: STEP_INDEX.connector, title: "How does this account connect?", subtitle: "Choose a sign-in method. IMAP works with any provider.", footer: _jsxs(_Fragment, { children: [showBack ? (_jsx(Button, { variant: "ghost", onClick: onBack, children: "Back" })) : (_jsx("span", {})), _jsx(Button, { variant: "primary", onClick: handleContinue, children: selected === "microsoft"
+                        ? "Continue with Microsoft"
+                        : "Continue with IMAP" })] }), children: _jsxs("div", { className: "grid grid-cols-1 gap-3 sm:grid-cols-2", children: [_jsx(ConnectorTile, { name: "IMAP / SMTP", description: "Any mail provider \u2014 Fastmail, iCloud, your own server.", icon: _jsx(Server, { className: "size-5" }), selected: selected === "imap", onSelect: () => setSelected("imap") }), _jsx(ConnectorTile, { name: "Outlook / Microsoft 365", description: "Sign in with Microsoft. Works with Outlook.com and work accounts.", icon: _jsx(Inbox, { className: "size-5" }), selected: selected === "microsoft", onSelect: () => setSelected("microsoft") })] }) }));
+}
+const MICROSOFT_SERVICES = ["Mail", "Calendar"];
+export function StepMicrosoftEmail({ refusal, onBack, onConnected, }) {
+    const [email, setEmail] = useState(refusal?.email ?? "");
+    const [services, setServices] = useState(refusal?.services ?? MICROSOFT_SERVICES);
+    const [servicesRefused, setServicesRefused] = useState(false);
+    const [error, setError] = useState(refusal?.message ?? null);
+    const [awaitingReturn, setAwaitingReturn] = useState(false);
+    const [preparing, setPreparing] = useState(false);
+    // The account read is in flight across a step the user can leave — Escape and
+    // Back both unmount it — and it ends in a redirect that would take the whole
+    // window with it.
+    const stepIsMounted = useRef(true);
+    useEffect(() => {
+        stepIsMounted.current = true;
+        return () => {
+            stepIsMounted.current = false;
+        };
+    }, []);
+    // The accounts this instance held when the redirect started. What comes back
+    // is recognised as new against it, so it has to be a real list — against an
+    // empty stand-in every account already here reads as the one just connected.
+    const accountIdsBeforeRedirect = useRef(new Set());
+    const { refetch: refetchConfig } = useQuery(configOperationsGetConfigOptions());
+    // Microsoft's answer comes back to whichever window the platform picks, and
+    // on iOS that is often the browser rather than the app launched from the
+    // home screen. So this window decides on the account list rather than on
+    // having been the one that got the redirect: an account that was not there
+    // before carries the wizard forward.
+    //
+    // Every return leg is a chance to find that account, not a verdict on the
+    // sign-in — a user who comes back mid-flow to read a password has not failed
+    // anything, so nothing here concludes and the check stays armed until an
+    // account appears or the user leaves the step.
+    const markRedirectStarted = useRedirectEnded((end) => {
+        setPreparing(false);
+        // A redirect that never took the window says nothing about the account, so
+        // there is nothing to read the config for — only a failure to state.
+        if (end === "stalled") {
+            setAwaitingReturn(false);
+            setError(REDIRECT_STALL_MESSAGE);
+            return;
+        }
+        void refetchConfig().then(({ data, isError }) => {
+            if (!stepIsMounted.current)
+                return;
+            if (isError || !data) {
+                setError("Couldn't check whether the sign-in finished. Open Settings › Accounts to see whether the account is connected.");
+                return;
+            }
+            setError(null);
+            const connected = data.accounts.find((account) => !accountIdsBeforeRedirect.current.has(account.accountId));
+            if (connected)
+                onConnected(connected.accountId);
+        });
+    });
+    const startMutation = useMutation({
+        ...microsoftOAuthOperationsMicrosoftOAuthStartMutation(),
+        onSuccess: (data) => {
+            // A step the user left while this was in flight does not get to take the
+            // window with it. `assign` is not synchronous either — the page is still
+            // here while the browser fetches Microsoft's — so the control stays busy
+            // until this window has been away and come back.
+            if (!stepIsMounted.current)
+                return;
+            markRedirectStarted();
+            setAwaitingReturn(true);
+            window.location.assign(data.authorizationUrl);
+        },
+        onError: (err) => {
+            setPreparing(false);
+            setError(err instanceof Error ? err.message : "Failed to start sign-in");
+        },
+    });
+    // The account list is read first and the redirect goes from what it says, so
+    // the window that comes back has something to recognise a new account
+    // against. A list that cannot be read stops the flow here, where it can be
+    // retried, rather than at the return leg where nothing can be concluded.
+    const redirecting = preparing || startMutation.isPending;
+    const handleSubmit = () => {
+        if (redirecting)
+            return;
+        if (services.length === 0) {
+            setServicesRefused(true);
+            return;
+        }
+        setError(null);
+        setPreparing(true);
+        void refetchConfig().then(({ data, isError }) => {
+            if (!stepIsMounted.current)
+                return;
+            if (isError || !data) {
+                setPreparing(false);
+                setError("Couldn't read this instance's accounts, so sign-in can't be tracked. Check your connection and try again.");
+                return;
+            }
+            accountIdsBeforeRedirect.current = new Set(data.accounts.map((account) => account.accountId));
+            startMutation.mutate({
+                body: { email: email.trim() || undefined, services },
+            });
+        });
+    };
+    // Keyboard: Enter submits, Esc goes back. The listener reads the submit
+    // through a ref rather than closing over it, so Enter sends the address the
+    // field holds now instead of whatever it held when the listener went on.
+    const submitRef = useRef(handleSubmit);
+    submitRef.current = handleSubmit;
+    useEffect(() => {
+        const handler = (e) => {
+            if (e.key === "Enter")
+                submitRef.current();
+            if (e.key === "Escape")
+                onBack();
+        };
+        window.addEventListener("keydown", handler);
+        return () => window.removeEventListener("keydown", handler);
+    }, [onBack]);
+    return (_jsx(WizardShell, { steps: STEP_LABELS, activeStep: STEP_INDEX.connector, title: refusal?.reconnect && refusal.email
+            ? `Reconnect ${refusal.email}`
+            : "Sign in with Microsoft", subtitle: "Microsoft is asked for the mail and calendar access you pick here.", footer: _jsxs(_Fragment, { children: [_jsx(Button, { variant: "ghost", onClick: onBack, children: "Back" }), _jsx(Button, { variant: "primary", onClick: handleSubmit, disabled: redirecting, icon: redirecting ? (_jsx(Loader2, { className: "size-4 animate-spin" })) : undefined, children: redirecting
+                        ? "Redirecting…"
+                        : awaitingReturn
+                            ? "Start over"
+                            : "Sign in with Microsoft" })] }), children: _jsxs("div", { className: "space-y-3", children: [_jsx(AccountServiceChoice, { providerName: "Microsoft", offered: MICROSOFT_SERVICES, selected: services, onChange: (next) => {
+                        setServices(next);
+                        if (next.length > 0)
+                            setServicesRefused(false);
+                    }, error: servicesRefused ? ACCOUNT_SERVICE_EMPTY_MESSAGE : undefined }), _jsxs("div", { children: [_jsx(FieldLabel, { htmlFor: "microsoft-email", children: "Email address (optional)" }), _jsx(Input, { id: "microsoft-email", icon: _jsx(AtSign, { className: "size-4" }), placeholder: "you@outlook.com", value: email, onChange: (e) => setEmail(e.target.value), type: "email", autoComplete: "email" }), _jsx("p", { className: "mt-1.5 text-2xs text-fg-subtle", children: "Pre-fills the Microsoft sign-in form. Leave blank to choose on the Microsoft page." })] }), awaitingReturn && (_jsx(Banner, { tone: "info", children: "Waiting for Microsoft. Finish signing in \u2014 this window carries on the moment the account is connected, wherever you finished." })), error && _jsx(Banner, { tone: "danger", children: error })] }) }));
+}
+export function StepMicrosoftGranted({ accountId, onSignInAgain, onContinue, }) {
+    const { data: config, isError, isFetching, refetch, } = useQuery(configOperationsGetConfigOptions());
+    const account = config?.accounts.find((candidate) => candidate.accountId === accountId);
+    if (isError) {
+        return (_jsx(WizardShell, { steps: STEP_LABELS, activeStep: STEP_INDEX["microsoft-granted"], title: "Couldn't read the new account", subtitle: "Microsoft finished, but this instance did not answer.", footer: _jsxs(_Fragment, { children: [_jsx("span", {}), _jsx(Button, { variant: "primary", onClick: () => void refetch(), disabled: isFetching, children: "Retry" })] }), children: _jsx(Banner, { tone: "danger", children: "Couldn't load the account Microsoft just connected. Check your connection and retry, or open Settings \u203A Accounts to see it." }) }));
+    }
+    if (!config || (!account && isFetching)) {
+        return (_jsx(WizardShell, { steps: STEP_LABELS, activeStep: STEP_INDEX["microsoft-granted"], title: "Reading the new account", subtitle: "Checking what Microsoft granted.", footer: _jsxs(_Fragment, { children: [_jsx("span", { className: "text-2xs text-fg-subtle", children: "Loading\u2026" }), _jsx("span", {})] }), children: _jsxs("div", { className: "flex items-center gap-2 py-4 text-sm text-fg-muted", children: [_jsx(Loader2, { className: "size-4 animate-spin text-accent" }), "Loading the account\u2026"] }) }));
+    }
+    if (!account) {
+        return (_jsx(WizardShell, { steps: STEP_LABELS, activeStep: STEP_INDEX["microsoft-granted"], title: "The account is not here", subtitle: "Microsoft sent the sign-in back, but no account was kept.", footer: _jsxs(_Fragment, { children: [_jsx("span", {}), _jsx(Button, { variant: "primary", onClick: onSignInAgain, children: "Sign in again" })] }), children: _jsx(Banner, { tone: "danger", children: "This instance holds no account from that sign-in. Sign in with Microsoft again to connect it." }) }));
+    }
+    return _jsx(AccountGranted, { account: account, onContinue: onContinue });
+}
+export function AccountGranted({ account, onContinue }) {
+    const syncsMail = account.syncedServices.includes("Mail");
+    return (_jsx(WizardShell, { steps: STEP_LABELS, activeStep: STEP_INDEX["microsoft-granted"], title: `Connected ${account.email}`, subtitle: "Microsoft granted access to what you picked.", footer: _jsxs(_Fragment, { children: [_jsx("span", { className: "text-2xs text-fg-subtle", children: "Change this later in Settings \u203A Accounts" }), _jsx(Button, { variant: "primary", onClick: () => onContinue(account.accountId), children: syncsMail ? "Go to inbox" : "Continue" })] }), children: _jsxs("div", { className: "space-y-3", children: [_jsx("div", { className: "divide-y divide-line", children: ACCOUNT_SERVICE_ROWS.map((row) => account.syncedServices.includes(row.id) ? (_jsx(CheckRow, { label: row.label, detail: "Access granted \u2014 syncing", state: "ok" }, row.id)) : (_jsx(CheckRow, { label: row.label, detail: "Not synced. Turn it on in Settings \u203A Accounts; Microsoft asks for access then.", state: "pending" }, row.id))) }), _jsxs("div", { children: [_jsx("p", { className: "text-2xs text-fg-subtle", children: "Permissions Microsoft granted" }), _jsx("code", { className: "mt-1 block rounded bg-surface-sunken px-2.5 py-2 text-2xs text-fg-muted", "data-testid": "granted-scopes", children: account.grantedScopes.join(" ") })] })] }) }));
+}
+function StepAddress({ initialEmail, initialDisplayName, onContinue, onBack, }) {
+    const [email, setEmail] = useState(initialEmail);
+    const [displayName, setDisplayName] = useState(initialDisplayName);
+    const [discovering, setDiscovering] = useState(false);
+    const [statusMsg, setStatusMsg] = useState("");
+    const [error, setError] = useState(null);
+    const handleSubmit = useCallback(async () => {
+        const trimmed = email.trim();
+        if (!trimmed.includes("@") || !trimmed.includes(".")) {
+            setError("Enter a valid email address.");
+            return;
+        }
+        setError(null);
+        setDiscovering(true);
+        setStatusMsg(getDiscoveryStatusMessage(trimmed));
+        try {
+            // Short budget — browser autoconfig fetches are CORS-blocked and
+            // fall through to the heuristic; see discoverSettings docs.
+            const result = await discoverSettings(trimmed);
+            onContinue(trimmed, displayName.trim(), result);
+        }
+        finally {
+            setDiscovering(false);
+        }
+    }, [email, displayName, onContinue]);
+    // Keyboard: Enter submits, Esc goes back
+    useEffect(() => {
+        const handler = (e) => {
+            if (e.key === "Enter" && !discovering)
+                void handleSubmit();
+            if (e.key === "Escape")
+                onBack();
+        };
+        window.addEventListener("keydown", handler);
+        return () => window.removeEventListener("keydown", handler);
+    }, [handleSubmit, discovering, onBack]);
+    return (_jsx(WizardShell, { steps: STEP_LABELS, activeStep: STEP_INDEX.address, title: "What's the email address?", subtitle: "We'll detect the server settings for you.", footer: _jsxs(_Fragment, { children: [_jsx(Button, { variant: "ghost", onClick: onBack, children: "Back" }), _jsx(Button, { variant: "primary", disabled: discovering, onClick: () => void handleSubmit(), children: "Continue" })] }), children: _jsxs("div", { className: "space-y-4", children: [_jsxs("div", { children: [_jsx(FieldLabel, { htmlFor: "onboarding-email", children: "Email address" }), _jsx(Input, { id: "onboarding-email", icon: _jsx(AtSign, { className: "size-4" }), placeholder: "you@example.com", value: email, onChange: (e) => {
+                                setEmail(e.target.value);
+                                setError(null);
+                            }, type: "email", autoComplete: "email" })] }), _jsxs("div", { children: [_jsx(FieldLabel, { htmlFor: "onboarding-display-name", children: "Display name (optional)" }), _jsx(Input, { id: "onboarding-display-name", placeholder: "Alice", value: displayName, onChange: (e) => setDisplayName(e.target.value) }), _jsx("p", { className: "mt-1.5 text-2xs text-fg-subtle", children: "What to call this account in Remit. Leave blank to use a name derived from the address." })] }), discovering && (_jsxs("div", { className: "mt-3 flex items-center gap-2 text-xs text-fg-muted", children: [_jsx(Loader2, { className: "size-3.5 animate-spin text-accent" }), statusMsg] })), error && !discovering && (_jsx("div", { className: "mt-3", children: _jsx(Banner, { tone: "danger", children: error }) }))] }) }));
+}
+export function StepServers({ email, imapConfig, smtpConfig, discovered, onContinue, onBack, onChange, }) {
+    const [imap, setImap] = useState(imapConfig);
+    const [smtp, setSmtp] = useState(smtpConfig);
+    const [providerId, setProviderId] = useState(() => presetIdForEmail(email));
+    const [advanced, setAdvanced] = useState(false);
+    const [error, setError] = useState(null);
+    const preset = getPresetById(providerId);
+    // A recognised provider locks the fields until the user chooses Advanced.
+    const locked = preset !== undefined && !advanced;
+    const applyPreset = useCallback((id) => {
+        setProviderId(id);
+        setAdvanced(false);
+        setError(null);
+        const next = getPresetById(id);
+        if (!next)
+            return;
+        setImap({
+            host: next.imap.host,
+            port: next.imap.port,
+            security: next.imap.security,
+        });
+        setSmtp({
+            host: next.smtp.host,
+            port: next.smtp.port,
+            security: next.smtp.security,
+        });
+    }, []);
+    // Propagate changes upward immediately
+    useEffect(() => {
+        onChange(imap, smtp);
+    }, [imap, smtp, onChange]);
+    const isValid = imap.host.trim() !== "";
+    const handleContinue = useCallback(() => {
+        if (!isValid) {
+            setError("Enter the IMAP host.");
+            return;
+        }
+        setError(null);
+        onContinue();
+    }, [isValid, onContinue]);
+    // Keyboard: Enter advances, Esc goes back
+    useEffect(() => {
+        const handler = (e) => {
+            if (e.key === "Enter")
+                handleContinue();
+            if (e.key === "Escape")
+                onBack();
+        };
+        window.addEventListener("keydown", handler);
+        return () => window.removeEventListener("keydown", handler);
+    }, [handleContinue, onBack]);
+    const domain = email.split("@")[1] ?? "your domain";
+    const subtitle = preset
+        ? "Pick your provider to fill in the right settings — or choose Custom to enter them by hand."
+        : discovered
+            ? "Found via autodiscovery — adjust anything that looks off."
+            : `We couldn't detect settings for ${domain} — enter them manually.`;
+    const badge = locked
+        ? { label: "preset", tone: "neutral" }
+        : !preset && discovered
+            ? { label: "detected", tone: "positive" }
+            : undefined;
+    const appPasswordUrl = preset?.passwordHelp.url ?? getAppPasswordUrl(email);
+    return (_jsx(WizardShell, { steps: STEP_LABELS, activeStep: STEP_INDEX.servers, title: "Confirm server settings", subtitle: subtitle, footer: _jsxs(_Fragment, { children: [_jsx(Button, { variant: "ghost", onClick: onBack, children: "Back" }), _jsx(Button, { variant: "primary", onClick: handleContinue, children: "Continue" })] }), children: _jsxs("div", { className: "space-y-5", children: [error && _jsx(Banner, { tone: "danger", children: error }), _jsxs("div", { children: [_jsx(FieldLabel, { htmlFor: "provider-select", children: "Provider" }), _jsxs(Select, { id: "provider-select", value: providerId, onChange: (e) => applyPreset(e.target.value), children: [_jsx("option", { value: "", children: "Custom / other" }), PROVIDER_PRESETS.map((p) => (_jsx("option", { value: p.id, children: p.label }, p.id)))] }), preset && (_jsx("p", { className: "mt-1 text-2xs text-fg-subtle", children: locked ? (_jsxs(_Fragment, { children: ["Server settings are pre-filled for ", preset.label, " and locked.", " ", _jsx("button", { type: "button", className: "text-accent underline", onClick: () => setAdvanced(true), children: "Advanced" }), " ", "lets you edit them by hand."] })) : (_jsxs(_Fragment, { children: ["Editing ", preset.label, "'s settings by hand."] })) }))] }), _jsx(ServerFields, { legend: "IMAP \u2014 incoming", badge: badge, readOnly: locked, host: imap.host, port: String(imap.port), security: imap.security, hostPlaceholder: "imap.example.com", portPlaceholder: "993", onHostChange: (v) => {
+                        setImap((s) => ({ ...s, host: v }));
+                        setError(null);
+                    }, onPortChange: (v) => setImap((s) => ({ ...s, port: Number(v) })), onSecurityChange: (v) => setImap((s) => ({ ...s, security: v })) }), _jsx("p", { className: "text-2xs text-fg-subtle", children: "Sending (SMTP) is optional \u2014 leave it blank to set up a receive-only account and add sending later in Settings." }), _jsx(ServerFields, { legend: "SMTP \u2014 outgoing (optional)", badge: badge, readOnly: locked, host: smtp.host, port: String(smtp.port), security: smtp.security, hostPlaceholder: "smtp.example.com", portPlaceholder: "587", onHostChange: (v) => {
+                        setSmtp((s) => ({ ...s, host: v }));
+                        setError(null);
+                    }, onPortChange: (v) => setSmtp((s) => ({ ...s, port: Number(v) })), onSecurityChange: (v) => setSmtp((s) => ({ ...s, security: v })) }), preset && (_jsxs("p", { className: "text-2xs text-fg-subtle", children: [preset.passwordHelp.text, " ", appPasswordUrl && (_jsx("a", { href: appPasswordUrl, target: "_blank", rel: "noopener noreferrer", className: "text-accent underline", children: "Get an app password" }))] }))] }) }));
+}
+/**
+ * How long the sync step holds "Go to inbox" shut while it waits for the first
+ * messages. Long enough for a normal IMAP handshake and first batch, short
+ * enough that a stalled or silent sync never becomes a dead end.
+ */
+const INBOX_GATE_MAX_WAIT_MS = 20_000;
+function StepSync({ email, displayName, imapConfig, smtpConfig, username, password, onGoToInbox, }) {
+    const queryClient = useQueryClient();
+    const [accountId, setAccountId] = useState(null);
+    const [createError, setCreateError] = useState(null);
+    const hasCreatedRef = useRef(false);
+    const imapTls = securityToApi(imapConfig.security);
+    const smtpTls = securityToApi(smtpConfig.security);
+    const createMutation = useMutation({
+        ...accountOperationsCreateAccountMutation(),
+        onSuccess: (data) => {
+            setAccountId(data.accountId);
+            queryClient.invalidateQueries({
+                queryKey: configOperationsGetConfigQueryKey(),
+            });
+        },
+        onError: (err) => {
+            setCreateError(err instanceof Error ? err.message : "Failed to create account");
+        },
+    });
+    // Create the account once on mount
+    // biome-ignore lint/correctness/useExhaustiveDependencies: mount-only effect guarded by hasCreatedRef; re-running on field change would trigger duplicate account creation
+    useEffect(() => {
+        if (hasCreatedRef.current)
+            return;
+        hasCreatedRef.current = true;
+        // SMTP is optional. When the user left the host blank the account is
+        // receive-only: send no SMTP host so the backend derives smtpEnabled=false.
+        // Only when a host was supplied do we autofill the remaining SMTP fields.
+        const smtpConfigured = smtpConfig.host.trim() !== "";
+        const autoFill = computeSmtpAutoFill({
+            imapHost: imapConfig.host,
+            smtpHost: smtpConfig.host,
+            smtpPort: smtpConfig.port,
+            smtpTls: smtpTls.tls,
+            smtpStartTls: smtpTls.startTls,
+        });
+        const effectiveSmtp = smtpConfigured
+            ? (autoFill ?? {
+                smtpHost: smtpConfig.host,
+                smtpPort: smtpConfig.port,
+                smtpTls: smtpTls.tls,
+                smtpStartTls: smtpTls.startTls,
+            })
+            : null;
+        createMutation.mutate({
+            body: {
+                email,
+                displayName: displayName || undefined,
+                username: username !== email ? username : undefined,
+                password,
+                imapHost: imapConfig.host,
+                imapPort: imapConfig.port,
+                imapTls: imapTls.tls,
+                imapStartTls: imapTls.startTls,
+                smtpHost: effectiveSmtp?.smtpHost || undefined,
+                smtpPort: effectiveSmtp?.smtpPort || undefined,
+                smtpTls: effectiveSmtp?.smtpTls ?? false,
+                smtpStartTls: effectiveSmtp?.smtpStartTls ?? false,
+            },
+        });
+    }, []);
+    // Poll sync status every 2s once account is created. Stop polling once the
+    // account reaches a terminal phase (complete/error) so we don't hammer the
+    // endpoint while the user lingers on this step (pattern from ComposeProvider).
+    const { data: syncStatus, isError: syncStatusUnavailable } = useQuery({
+        ...syncOperationsGetSyncStatusOptions({
+            path: { accountId: accountId ?? "" },
+        }),
+        enabled: !!accountId,
+        refetchInterval: (query) => {
+            const phase = query.state.data?.syncPhase;
+            return phase === "complete" || phase === "error" ? false : 2000;
+        },
+    });
+    // When the account reaches a terminal error phase, surface its lastError
+    // from the config (the sync-status response carries syncPhase but not
+    // lastError). Only fetched once the account is created and in error.
+    const syncErrored = syncStatus?.syncPhase === "error";
+    const { data: config } = useQuery({
+        ...configOperationsGetConfigOptions(),
+        enabled: !!accountId && syncErrored,
+    });
+    const syncLastError = config?.accounts.find((a) => a.accountId === accountId)?.lastError;
+    // Determine inbox progress from mailboxes array
+    const inboxMailbox = syncStatus?.mailboxes.find((m) => m.fullPath === "INBOX" || m.fullPath === "Inbox");
+    const totalMailboxes = syncStatus?.mailboxCountTotal ?? 0;
+    const syncedMailboxes = syncStatus?.mailboxCountSynced ?? 0;
+    const inboxTotal = inboxMailbox?.messagesTotal ?? 0;
+    const inboxSynced = inboxMailbox?.messagesSynced ?? 0;
+    const inboxProgress = inboxTotal > 0 ? inboxSynced / inboxTotal : 0;
+    // Determine check states based on syncPhase
+    const syncPhase = syncStatus?.syncPhase;
+    const mailboxState = syncErrored
+        ? "failed"
+        : syncPhase === "idle" || syncPhase === undefined
+            ? "running"
+            : syncPhase === "discovering_mailboxes"
+                ? "running"
+                : totalMailboxes > 0
+                    ? "ok"
+                    : "running";
+    const inboxSyncState = syncErrored
+        ? "failed"
+        : !syncPhase ||
+            syncPhase === "idle" ||
+            syncPhase === "discovering_mailboxes"
+            ? "pending"
+            : syncPhase === "syncing_inbox" || syncPhase === "syncing_others"
+                ? "running"
+                : "ok";
+    const otherSyncState = syncErrored
+        ? "failed"
+        : !syncPhase ||
+            syncPhase === "idle" ||
+            syncPhase === "discovering_mailboxes" ||
+            syncPhase === "syncing_inbox"
+            ? "pending"
+            : syncPhase === "syncing_others"
+                ? "running"
+                : "ok";
+    // The inbox has something to show once the first messages have landed, the
+    // INBOX mailbox is drained, or the account's sync reached a terminal phase.
+    // Until then "Go to inbox" leads to an empty list, so it does not offer (#452).
+    const inboxHasArrived = inboxSynced > 0 ||
+        inboxMailbox?.phase === "complete" ||
+        syncPhase === "complete" ||
+        syncErrored;
+    // Nothing above is allowed to strand the user: if the first messages have not
+    // landed within the wait, or the status endpoint cannot answer at all, the
+    // button opens regardless. The brief tells the truth about an empty list on
+    // the other side, so an early exit costs a wait, not a lie.
+    const [waitedLongEnough, setWaitedLongEnough] = useState(false);
+    useEffect(() => {
+        if (!accountId)
+            return;
+        const timer = setTimeout(() => setWaitedLongEnough(true), INBOX_GATE_MAX_WAIT_MS);
+        return () => clearTimeout(timer);
+    }, [accountId]);
+    const canGoToInbox = !!accountId &&
+        (inboxHasArrived || syncStatusUnavailable || waitedLongEnough);
+    if (createError) {
+        return (_jsx(WizardShell, { steps: STEP_LABELS, activeStep: STEP_INDEX.sync, title: "Couldn't create account", subtitle: "Something went wrong saving your account.", footer: _jsxs(_Fragment, { children: [_jsx("span", {}), _jsx(Button, { variant: "primary", onClick: () => {
+                            hasCreatedRef.current = false;
+                            setCreateError(null);
+                            createMutation.mutate({
+                                body: {
+                                    email,
+                                    displayName: displayName || undefined,
+                                    username: username !== email ? username : undefined,
+                                    password,
+                                    imapHost: imapConfig.host,
+                                    imapPort: imapConfig.port,
+                                    imapTls: imapTls.tls,
+                                    imapStartTls: imapTls.startTls,
+                                    smtpHost: smtpConfig.host || undefined,
+                                    smtpPort: smtpConfig.port || undefined,
+                                    smtpTls: smtpTls.tls,
+                                    smtpStartTls: smtpTls.startTls,
+                                },
+                            });
+                        }, children: "Retry" })] }), children: _jsx("code", { className: "block rounded bg-surface-sunken px-2.5 py-2 text-2xs text-fg-muted", children: createError }) }));
+    }
+    return (_jsx(WizardShell, { steps: STEP_LABELS, activeStep: STEP_INDEX.sync, title: `Syncing ${email}`, subtitle: "Newest mail first \u2014 you can start reading right away.", footer: _jsxs(_Fragment, { children: [_jsx("span", { className: "text-2xs text-fg-subtle", children: "Sync continues in the background" }), canGoToInbox ? (_jsx(Button, { variant: "primary", onClick: () => accountId && onGoToInbox(accountId), children: "Go to inbox" })) : (_jsx(Button, { variant: "primary", disabled: true, icon: _jsx(Loader2, { className: "size-3.5 animate-spin" }), children: "Getting your mail\u2026" }))] }), children: createMutation.isPending ? (_jsxs("div", { className: "flex items-center gap-2 py-4 text-sm text-fg-muted", children: [_jsx(Loader2, { className: "size-4 animate-spin text-accent" }), "Creating your account\u2026"] })) : (_jsxs("div", { className: "space-y-3", children: [inboxTotal > 0 && (_jsxs("div", { children: [_jsxs("div", { className: "flex items-baseline justify-between text-xs", children: [_jsx("span", { className: "font-medium text-fg", children: "INBOX" }), _jsxs("span", { className: "text-fg-subtle tabular-nums", children: [inboxSynced.toLocaleString(), " / ", inboxTotal.toLocaleString(), " ", "messages"] })] }), _jsx("div", { className: "mt-1 h-1.5 overflow-hidden rounded-full bg-surface-sunken", children: _jsx("div", { className: "h-full rounded-full bg-accent transition-all duration-500", style: { width: `${Math.max(2, inboxProgress * 100)}%` } }) })] })), _jsxs("div", { className: "divide-y divide-line", children: [_jsx(CheckRow, { label: "Mailboxes discovered", detail: totalMailboxes > 0
+                                ? `${totalMailboxes} mailbox${totalMailboxes === 1 ? "" : "es"} found`
+                                : "Discovering…", state: mailboxState }), _jsx(CheckRow, { label: "INBOX", detail: inboxSyncState === "ok"
+                                ? `${inboxSynced.toLocaleString()} messages synced`
+                                : inboxSyncState === "running"
+                                    ? "Syncing newest first…"
+                                    : "Queued", state: inboxSyncState }), syncedMailboxes > 1 ||
+                            syncPhase === "syncing_others" ||
+                            syncPhase === "complete" ? (_jsx(CheckRow, { label: "Other mailboxes", detail: otherSyncState === "ok"
+                                ? `${syncedMailboxes - 1} mailboxes synced`
+                                : otherSyncState === "running"
+                                    ? "Syncing…"
+                                    : "Queued", state: otherSyncState })) : null] }), syncErrored && (_jsxs("div", { className: "mt-2 space-y-2", children: [_jsxs("p", { className: "text-xs text-danger", children: ["Sync stalled. The account is still active \u2014", " ", _jsx("button", { type: "button", className: "underline", onClick: () => {
+                                        queryClient.invalidateQueries({
+                                            queryKey: syncOperationsGetSyncStatusOptions({
+                                                path: { accountId: accountId ?? "" },
+                                            }).queryKey,
+                                        });
+                                    }, children: "retry" })] }), syncLastError && (_jsx("code", { className: "block rounded bg-surface-sunken px-2.5 py-2 text-2xs text-fg-muted", children: syncLastError }))] }))] })) }));
+}
+const initialStep = (skipWelcome, microsoftReturn) => {
+    if (microsoftReturn?.kind === "connected")
+        return "microsoft-granted";
+    if (microsoftReturn?.kind === "refused")
+        return "microsoft-email";
+    return skipWelcome ? "connector" : "welcome";
+};
+export function OnboardingWizard({ skipWelcome = false, onComplete, onCancel, onImportConfig, microsoftReturn, }) {
+    const [step, setStep] = useState(initialStep(skipWelcome, microsoftReturn));
+    const [microsoftRefusal, setMicrosoftRefusal] = useState(microsoftReturn?.kind === "refused" ? microsoftReturn : undefined);
+    const [microsoftAccountId, setMicrosoftAccountId] = useState(microsoftReturn?.kind === "connected" ? microsoftReturn.accountId : null);
+    const [state, setState] = useState({
+        email: "",
+        displayName: "",
+        imapConfig: DEFAULT_IMAP,
+        smtpConfig: DEFAULT_SMTP,
+        username: "",
+        password: "",
+        discoveryResult: null,
+        discovered: false,
+        createdAccountId: null,
+    });
+    // Welcome → Connector
+    const handleWelcomeStart = useCallback(() => setStep("connector"), []);
+    // Connector → Address (IMAP path) or microsoft-email (Microsoft path), or cancel
+    const handleConnectorContinue = useCallback(() => setStep("address"), []);
+    const handleConnectorMicrosoft = useCallback(() => setStep("microsoft-email"), []);
+    const handleConnectorBack = useCallback(() => {
+        if (skipWelcome) {
+            onCancel?.();
+        }
+        else {
+            setStep("welcome");
+        }
+    }, [skipWelcome, onCancel]);
+    // Address → Servers
+    const handleAddressContinue = useCallback((email, displayName, result) => {
+        let imap = DEFAULT_IMAP;
+        let smtp = DEFAULT_SMTP;
+        let discovered = false;
+        if (result) {
+            // Heuristic is a fallback, not "discovered"
+            discovered = result.source !== "heuristic";
+            imap = {
+                host: result.imap.host,
+                port: result.imap.port,
+                security: result.imap.security,
+            };
+            smtp = {
+                host: result.smtp.host,
+                port: result.smtp.port,
+                security: result.smtp.security,
+            };
+        }
+        setState((s) => ({
+            ...s,
+            email,
+            displayName,
+            imapConfig: imap,
+            smtpConfig: smtp,
+            discoveryResult: result,
+            discovered,
+            username: email,
+        }));
+        setStep("servers");
+    }, []);
+    // Servers → Credentials
+    const handleServersChange = useCallback((imap, smtp) => {
+        setState((s) => ({ ...s, imapConfig: imap, smtpConfig: smtp }));
+    }, []);
+    // Credentials → Test
+    const handleCredentialsChange = useCallback((username, password) => {
+        setState((s) => ({ ...s, username, password }));
+    }, []);
+    // Test → Sync
+    const handleTestSuccess = useCallback(() => setStep("sync"), []);
+    // Sync → Inbox
+    const handleGoToInbox = useCallback((accountId) => {
+        onComplete(accountId);
+    }, [onComplete]);
+    const microsoftSignIn = (_jsx(StepMicrosoftEmail, { refusal: microsoftRefusal, onBack: () => {
+            setMicrosoftRefusal(undefined);
+            setStep("connector");
+        }, onConnected: (accountId) => {
+            setMicrosoftAccountId(accountId);
+            setStep("microsoft-granted");
+        } }));
+    switch (step) {
+        case "welcome":
+            return (_jsx(StepWelcome, { onStart: handleWelcomeStart, onImportConfig: onImportConfig }));
+        case "connector":
+            return (_jsx(StepConnector, { onContinue: handleConnectorContinue, onMicrosoft: handleConnectorMicrosoft, onBack: handleConnectorBack, showBack: !skipWelcome }));
+        case "microsoft-email":
+            return microsoftSignIn;
+        case "microsoft-granted":
+            if (microsoftAccountId === null)
+                return microsoftSignIn;
+            return (_jsx(StepMicrosoftGranted, { accountId: microsoftAccountId, onSignInAgain: () => setStep("microsoft-email"), onContinue: handleGoToInbox }));
+        case "address":
+            return (_jsx(StepAddress, { initialEmail: state.email, initialDisplayName: state.displayName, onContinue: handleAddressContinue, onBack: () => setStep("connector") }));
+        case "servers":
+            return (_jsx(StepServers, { email: state.email, imapConfig: state.imapConfig, smtpConfig: state.smtpConfig, discovered: state.discovered, onContinue: () => setStep("credentials"), onBack: () => setStep("address"), onChange: handleServersChange }));
+        case "credentials":
+            return (_jsx(CredentialsStep, { steps: STEP_LABELS, activeStep: STEP_INDEX.credentials, title: `Sign in to ${state.email.split("@")[1] || "your mail server"}`, subtitle: "Many providers require an app password instead of your normal one.", email: state.email, username: state.username, password: state.password, onContinue: () => setStep("test"), onBack: () => setStep("servers"), onChange: handleCredentialsChange }));
+        case "test":
+            return (_jsx(ConnectionTestStep, { steps: STEP_LABELS, activeStep: STEP_INDEX.test, email: state.email, imapConfig: state.imapConfig, smtpConfig: state.smtpConfig, username: state.username, password: state.password, onSuccess: handleTestSuccess, onBackToCredentials: () => setStep("credentials"), onBackToServers: () => setStep("servers") }));
+        case "sync":
+            return (_jsx(StepSync, { email: state.email, displayName: state.displayName, imapConfig: state.imapConfig, smtpConfig: state.smtpConfig, username: state.username, password: state.password, onGoToInbox: handleGoToInbox }));
+    }
+}