gloomberb 0.13.2 → 0.14.0

package/src/components/onboarding/onboarding-wizard.tsx

@@ -5,8 +5,7 @@ import {
   useRef,
   useState,
 } from "react";
-import { CloudVerificationPanel } from "../../plugins/builtin/cloud/verification-panel";
-import { recordResearchActivity } from "../../api-client/research-activity";
+import { recordResearchActivity, type ResearchActivity } from "../../api-client/research-activity";
 import { apiClient, type CloudPricing } from "../../api-client";
 import type { AppBrokerImportRuntime } from "../../app/runtime/broker-import";
 import type { SyncBrokerInstanceResult } from "../../brokers/sync-broker-instance";
@@ -15,6 +14,7 @@ import {
   type AppConfig,
   findPaneInstance,
   type OnboardingProgress,
+  type OnboardingStage,
 } from "../../types/config";
 import { resolveBrokerConfigFields, type BrokerConfigField } from "../../types/broker";
 import { useShortcut, useViewport } from "../../react/input";
@@ -24,18 +24,23 @@ import {
   useAppStateRef,
 } from "../../state/app/context";
 import { useAppActive } from "../../state/app/activity";
-import { Box, Text, TextAttributes, useUiHost, type InputRenderable } from "../../ui";
+import { Box, Text, TextAttributes, useCommandBarShortcut, useUiHost, type InputRenderable } from "../../ui";
 import { useThemeColors } from "../../theme/theme-context";
 import { t, tf } from "../../i18n";
 import { useAppLanguage } from "../../i18n/react";
 import type { PluginRegistry } from "../../plugins/registry";
 import { chatController } from "../../plugins/builtin/chat/controller";
-import { formatCloudMonthlyPrice } from "../../plugins/builtin/account-management/model";
+import {
+  type CloudBillingInterval,
+  formatCloudPrice,
+  monthsFreeYearly,
+} from "../../plugins/builtin/account-management/model";
 import { useCloudUpgradeAction } from "../../plugins/builtin/shared/cloud-upgrade";
 import { usePlanAccess } from "../../plugins/builtin/shared/plan-access";
-import type { ListViewItem } from "../ui";
+import { Button, SegmentedControl, type ListViewItem } from "../ui";
 import { AccountStep, PortfolioStep, type PortfolioSub } from "./onboarding-steps";
 import {
+  ONBOARDING_DESKTOP,
   OnboardingActions,
   OnboardingButton,
   OnboardingCoach,
@@ -45,39 +50,54 @@ import {
   OnboardingTitle,
   type OnboardingSectionId,
 } from "./onboarding-frame";
-import { ACCOUNT_CHOICE_IDS } from "../../plugins/builtin/cloud/auth-model";
 import { useOnboardingAccount } from "./wizard-account";
 import { useOnboardingBrokerSync } from "./wizard-broker-sync";
+import { POSITION_FIELDS, useOnboardingPositions } from "./wizard-positions";
+import { applyFirstRunLayout, buildFirstRunLayout, planFirstRunWatchlist } from "./first-run-workspace";
+import { debugLog } from "../../utils/debug-log";
 import {
   getConnectableBrokerOptions,
   getOnboardingProgress,
+  pickLargestBrokerPosition,
+  pickLargestPosition,
   withOnboardingProgress,
   type BrokerOption,
 } from "./wizard-model";
 
+const onboardingLog = debugLog.createLogger("onboarding");
+
 interface OnboardingWizardProps {
   pluginRegistry: PluginRegistry;
   importBrokerPositions: AppBrokerImportRuntime["importBrokerPositions"];
   onComplete: (config: AppConfig) => void | Promise<void>;
 }
 
+/** One funnel milestone per stage the user reaches; the account step reports sign-in itself. */
+const STAGE_ACTIVITY: Partial<Record<OnboardingStage, ResearchActivity>> = {
+  portfolio: "onboarding_started",
+  research: "onboarding_research_opened",
+  account: "onboarding_account_viewed",
+  upgrade: "onboarding_pro_viewed",
+};
+
 export function OnboardingWizard({ pluginRegistry, importBrokerPositions, onComplete }: OnboardingWizardProps) {
   const language = useAppLanguage();
   const colors = useThemeColors();
   const desktop = useUiHost().kind === "desktop-web";
+  const commandBarShortcut = useCommandBarShortcut();
   const { height: viewportHeight } = useViewport();
   const dispatch = useAppDispatch();
   const stateRef = useAppStateRef();
   const config = useAppSelector((state) => state.config);
-  const commandBarOpen = useAppSelector((state) => state.commandBarOpen);
   const progress = getOnboardingProgress(config);
   const stage = progress.stage;
   const [persistenceError, setPersistenceError] = useState<string | null>(null);
   const [isFinishing, setIsFinishing] = useState(false);
   const researchOpenedRef = useRef<string | null>(null);
   const [pricing, setPricing] = useState<CloudPricing | null>(null);
+  const [billingInterval, setBillingInterval] = useState<CloudBillingInterval>("month");
 
-  const [portfolioSub, setPortfolioSub] = useState<PortfolioSub>("choose");
+  const [portfolioSub, setPortfolioSub] = useState<PortfolioSub>("positions");
   const [portfolioOptionIdx, setPortfolioOptionIdx] = useState(0);
   const [brokerValues, setBrokerValues] = useState<Record<string, Record<string, string>>>({});
   const [selectedBrokerId, setSelectedBrokerId] = useState<string | null>(null);
@@ -88,23 +108,18 @@ export function OnboardingWizard({ pluginRegistry, importBrokerPositions, onComp
   const progressSaveQueueRef = useRef<Promise<void>>(Promise.resolve());
   const finishingRef = useRef(false);
 
+  // Enter inside every form is handled once, by the shortcut below: the
+  // fields deliberately get no onSubmit, because the host input fires it in
+  // the same keystroke and the two paths used to submit twice.
   const brokerOptions = useMemo(
     (): BrokerOption[] => getConnectableBrokerOptions(pluginRegistry.brokers),
     [pluginRegistry.brokers],
   );
-  const portfolioChoices = useMemo<ListViewItem[]>(() => [
-    {
-      id: "manual",
-      label: t("Research a company"),
-      description: t("Add one company with the command bar"),
-      detail: t("Recommended"),
-    },
-    ...brokerOptions.map((broker) => ({
-      id: broker.id,
-      label: tf("Connect {broker}", { broker: broker.name }),
-      description: tf("Import positions from {broker}", { broker: broker.name }),
-    })),
-  ], [brokerOptions, language]);
+  const brokerChoices = useMemo<ListViewItem[]>(() => brokerOptions.map((broker) => ({
+    id: broker.id,
+    label: tf("Connect {broker}", { broker: broker.name }),
+    description: tf("Import positions from {broker}", { broker: broker.name }),
+  })), [brokerOptions, language]);
   const activeBrokerFields = useMemo((): BrokerConfigField[] => {
     if (!selectedBrokerId) return [];
     const broker = brokerOptions.find((option) => option.id === selectedBrokerId);
@@ -149,37 +164,137 @@ export function OnboardingWizard({ pluginRegistry, importBrokerPositions, onComp
     void persistProgress(patch, baseConfig).catch(() => {});
   }, [persistProgress]);
 
+  // Pro follows sign-in directly. Email verification continues in the status
+  // bar, so an unread inbox never stalls the first session.
   const account = useOnboardingAccount({
     nextStep: () => {
-      saveProgressInBackground({ stage: apiClient.getCurrentUser()?.emailVerified ? "upgrade" : "verify", accountStatus: "signed-in" });
+      recordResearchActivity("onboarding_signed_in");
+      saveProgressInBackground({ stage: "upgrade", accountStatus: "signed-in" });
     },
     setEditingField,
   });
 
+  const positions = useOnboardingPositions({ pluginRegistry, onFieldEditing: setEditingField });
+  const positionCount = positions.positions.length;
+
+  useEffect(() => {
+    const activity = STAGE_ACTIVITY[stage];
+    if (activity) recordResearchActivity(activity);
+  }, [stage]);
+
+  useEffect(() => {
+    if (stage === "portfolio" && positionCount > 0) recordResearchActivity("onboarding_position_added");
+  }, [positionCount, stage]);
+
+  // The portfolio step opens straight into the ticker field.
+  useEffect(() => {
+    if (stage === "portfolio" && portfolioSub === "positions") setEditingField(true);
+  }, [portfolioSub, stage]);
+
+  /**
+   * Seeds the watchlist and swaps Home for the first-run workspace built
+   * around `symbol`. The config comes back for the caller to persist with its
+   * own progress patch.
+   */
+  const buildFirstRunWorkspace = useCallback(async (
+    baseConfig: AppConfig,
+    symbol: string,
+    portfolioId: string,
+  ): Promise<AppConfig> => {
+    let config = baseConfig;
+    let watchlistId = config.watchlists[0]?.id;
+    if (!watchlistId) {
+      watchlistId = "watchlist";
+      config = { ...config, watchlists: [{ id: watchlistId, name: "Watchlist" }] };
+    }
+    const plan = planFirstRunWatchlist(stateRef.current.tickers, watchlistId, portfolioId);
+    for (const metadata of plan.create) {
+      try {
+        const ticker = await pluginRegistry.tickerRepository.createTicker(metadata);
+        dispatch({ type: "UPDATE_TICKER", ticker });
+        pluginRegistry.events.emit("ticker:added", { symbol: ticker.metadata.ticker, ticker });
+      } catch (error) {
+        onboardingLog.error("First-run watchlist seed failed", { symbol: metadata.ticker, error: String(error) });
+      }
+    }
+    for (const ticker of plan.update) {
+      try {
+        await pluginRegistry.tickerRepository.saveTicker(ticker);
+        dispatch({ type: "UPDATE_TICKER", ticker });
+      } catch (error) {
+        onboardingLog.error("First-run watchlist update failed", { symbol: ticker.metadata.ticker, error: String(error) });
+      }
+    }
+    const home = buildFirstRunLayout({
+      symbol,
+      portfolioId,
+      watchlistId,
+      hasPane: (paneId) => pluginRegistry.panes?.has(paneId) ?? false,
+    });
+    return applyFirstRunLayout(config, home);
+  }, [dispatch, pluginRegistry, stateRef]);
+
+  const commitWorkspaceProgress = useCallback(async (
+    nextConfig: AppConfig,
+    patch: Partial<OnboardingProgress> & Pick<OnboardingProgress, "stage">,
+  ) => {
+    const withProgress = withOnboardingProgress(nextConfig, patch);
+    await saveConfigImmediately(withProgress);
+    dispatch({ type: "SET_CONFIG", config: withProgress });
+    pluginRegistry.events.emit("config:changed", { config: withProgress });
+  }, [dispatch, pluginRegistry.events]);
+
+  const continueFromPositions = useCallback(() => {
+    const largest = pickLargestPosition(positions.positions);
+    if (!largest) {
+      positions.focusField(0);
+      return;
+    }
+    setEditingField(false);
+    setPersistenceError(null);
+    void (async () => {
+      try {
+        const nextConfig = await buildFirstRunWorkspace(stateRef.current.config, largest.symbol, positions.portfolioId);
+        if (finishingRef.current) return;
+        await commitWorkspaceProgress(nextConfig, {
+          stage: "research",
+          path: "manual",
+          portfolioId: positions.portfolioId,
+          tickerSymbol: largest.symbol,
+          positionsImported: positions.positions.length,
+          brokerName: undefined,
+        });
+      } catch (error) {
+        setPersistenceError(error instanceof Error ? error.message : String(error));
+      }
+    })();
+  }, [buildFirstRunWorkspace, commitWorkspaceProgress, positions, stateRef]);
+
   const handleBrokerSynced = useCallback(async (
     result: SyncBrokerInstanceResult,
     syncedConfig: AppConfig,
   ) => {
     if (finishingRef.current) return;
-    const tickerSymbol = result.positions.find((position) => position.ticker)?.ticker
+    const tickerSymbol = pickLargestBrokerPosition(result.positions)?.ticker
       ?? result.addedTickers[0]?.metadata.ticker
       ?? result.updatedTickers[0]?.metadata.ticker;
     const brokerName = brokerOptions.find((option) => option.id === selectedBrokerId)?.name;
-    const nextConfig = withOnboardingProgress(syncedConfig, {
-      stage: tickerSymbol ? "research" : "add-ticker",
+    const portfolioId = tickerSymbol ? (result.portfolioIds[0] ?? "main") : "main";
+    dispatch({ type: "SET_TICKERS", tickers: result.tickers });
+    const workspaceConfig = tickerSymbol
+      ? await buildFirstRunWorkspace(syncedConfig, tickerSymbol, portfolioId)
+      : syncedConfig;
+    await commitWorkspaceProgress(workspaceConfig, {
+      stage: tickerSymbol ? "research" : "portfolio",
       path: "broker",
-      portfolioId: tickerSymbol ? (result.portfolioIds[0] ?? "main") : "main",
+      portfolioId,
       tickerSymbol,
       brokerName,
       positionsImported: result.positions.length,
     });
-    await saveConfigImmediately(nextConfig);
-    dispatch({ type: "SET_CONFIG", config: nextConfig });
-    dispatch({ type: "SET_TICKERS", tickers: result.tickers });
-    pluginRegistry.events.emit("config:changed", { config: nextConfig });
     setEditingField(false);
-    setPortfolioSub("choose");
-  }, [brokerOptions, dispatch, pluginRegistry.events, selectedBrokerId]);
+    setPortfolioSub("positions");
+  }, [brokerOptions, buildFirstRunWorkspace, commitWorkspaceProgress, dispatch, selectedBrokerId]);
 
   const {
     isBrokerSyncing,
@@ -198,7 +313,7 @@ export function OnboardingWizard({ pluginRegistry, importBrokerPositions, onComp
     setPortfolioSub,
   });
 
-  const finish = useCallback(async () => {
+  const finish = useCallback(async (skipped = false) => {
     if (finishingRef.current) return;
     if (!resetBrokerSync()) return;
     finishingRef.current = true;
@@ -217,6 +332,7 @@ export function OnboardingWizard({ pluginRegistry, importBrokerPositions, onComp
         complete: true,
         progress: undefined,
       });
+      recordResearchActivity(skipped ? "onboarding_skipped" : "onboarding_completed");
       await Promise.resolve(onComplete(nextConfig));
     } catch (error) {
       setPersistenceError(error instanceof Error ? error.message : String(error));
@@ -224,6 +340,7 @@ export function OnboardingWizard({ pluginRegistry, importBrokerPositions, onComp
       setIsFinishing(false);
     }
   }, [dispatch, onComplete, resetBrokerSync, stateRef]);
+  const skipSetup = useCallback(() => { void finish(true); }, [finish]);
 
   useEffect(() => {
     if (!selectedBrokerId) return;
@@ -238,33 +355,18 @@ export function OnboardingWizard({ pluginRegistry, importBrokerPositions, onComp
     if (!editingField) return;
     const timer = setTimeout(() => inputRef.current?.focus?.(), 10);
     return () => clearTimeout(timer);
-  }, [account.accountFieldIdx, account.accountSub, brokerFieldIdx, editingField, portfolioSub]);
+  }, [account.accountFieldIdx, account.accountSub, brokerFieldIdx, editingField, portfolioSub, positions.fieldIdx]);
 
   useEffect(() => {
     if (stage !== "account") return;
     account.syncExistingAccountSession();
   }, [account.syncExistingAccountSession, stage]);
 
-  useEffect(() => pluginRegistry.events.on(
-    "command-bar:portfolio-membership-persisted",
-    ({ symbol, portfolioId }) => {
-      const current = getOnboardingProgress(stateRef.current.config);
-      if (current.stage !== "add-ticker" || portfolioId !== current.portfolioId) return;
-      saveProgressInBackground({
-        stage: "research",
-        path: current.path,
-        portfolioId,
-        tickerSymbol: symbol,
-      });
-    },
-  ), [pluginRegistry.events, saveProgressInBackground, stateRef]);
-
   useEffect(() => {
     if (stage !== "research" || !progress.tickerSymbol || researchOpenedRef.current === progress.tickerSymbol) return;
     researchOpenedRef.current = progress.tickerSymbol;
-    pluginRegistry.navigateTicker(progress.tickerSymbol, { sourcePaneId: "ticker-detail:main" });
     recordResearchActivity("ticker_saved");
-  }, [stage, progress.tickerSymbol, pluginRegistry]);
+  }, [stage, progress.tickerSymbol]);
 
   useEffect(() => {
     if (stage !== "upgrade" || pricing) return;
@@ -295,37 +397,34 @@ export function OnboardingWizard({ pluginRegistry, importBrokerPositions, onComp
     }));
   }, [resetBrokerSync]);
 
-  const choosePortfolioPath = useCallback((choiceIndex = portfolioOptionIdx) => {
-    const choice = portfolioChoices[choiceIndex];
-    if (!choice || choice.id === "manual") {
-      resetBrokerSync();
-      setSelectedBrokerId(null);
-      saveProgressInBackground({
-        stage: "add-ticker",
-        path: "manual",
-        portfolioId: config.portfolios.find((portfolio) => !portfolio.brokerInstanceId)?.id ?? "main",
-      });
-      return;
-    }
-
+  const selectBroker = useCallback((brokerId: string) => {
     resetBrokerSync();
-    setSelectedBrokerId(choice.id);
+    setSelectedBrokerId(brokerId);
     setBrokerFieldIdx(0);
     setPortfolioSub("broker-fields");
-    const broker = brokerOptions.find((option) => option.id === choice.id);
+    const broker = brokerOptions.find((option) => option.id === brokerId);
     const firstField = broker
-      ? resolveBrokerConfigFields(broker.adapter, brokerValues[choice.id] ?? {}).filter((field) => field.required)[0]
+      ? resolveBrokerConfigFields(broker.adapter, brokerValues[brokerId] ?? {}).filter((field) => field.required)[0]
       : null;
     setEditingField(firstField?.type !== "select");
-  }, [
-    brokerOptions,
-    brokerValues,
-    config.portfolios,
-    portfolioChoices,
-    portfolioOptionIdx,
-    resetBrokerSync,
-    saveProgressInBackground,
-  ]);
+  }, [brokerOptions, brokerValues, resetBrokerSync]);
+
+  const chooseBroker = useCallback((choiceIndex = portfolioOptionIdx) => {
+    const choice = brokerChoices[choiceIndex];
+    if (choice) selectBroker(choice.id);
+  }, [brokerChoices, portfolioOptionIdx, selectBroker]);
+
+  /** Broker import is the secondary path: one broker goes straight to its fields. */
+  const openBrokerConnect = useCallback(() => {
+    if (brokerOptions.length === 0) return;
+    setEditingField(false);
+    if (brokerOptions.length === 1) {
+      selectBroker(brokerOptions[0]!.id);
+      return;
+    }
+    setPortfolioOptionIdx(0);
+    setPortfolioSub("choose");
+  }, [brokerOptions, selectBroker]);
 
   const submitBrokerField = useCallback(() => {
     if (!selectedBrokerId || isBrokerSyncing) return;
@@ -390,8 +489,12 @@ export function OnboardingWizard({ pluginRegistry, importBrokerPositions, onComp
   ]);
 
   const continuePortfolio = useCallback(() => {
+    if (portfolioSub === "positions") {
+      continueFromPositions();
+      return;
+    }
     if (portfolioSub === "choose") {
-      choosePortfolioPath();
+      chooseBroker();
       return;
     }
     if (portfolioSub === "broker-setup") {
@@ -408,7 +511,8 @@ export function OnboardingWizard({ pluginRegistry, importBrokerPositions, onComp
     activeBrokerFields,
     brokerFieldIdx,
     brokerSyncError,
-    choosePortfolioPath,
+    chooseBroker,
+    continueFromPositions,
     isBrokerSyncing,
     portfolioSub,
     submitBrokerField,
@@ -416,64 +520,41 @@ export function OnboardingWizard({ pluginRegistry, importBrokerPositions, onComp
   ]);
 
   const backPortfolio = useCallback(() => {
-    if (portfolioSub === "choose") return;
+    if (portfolioSub === "positions") return;
     if (portfolioSub === "broker-sync" && !resetBrokerSync()) return;
-    setPortfolioSub("choose");
+    setPortfolioSub("positions");
+    setSelectedBrokerId(null);
     setBrokerFieldIdx(0);
     setEditingField(false);
   }, [portfolioSub, resetBrokerSync]);
 
-  const activateAccountChoice = useCallback((index: number) => {
-    const choice = ACCOUNT_CHOICE_IDS[index];
-    if (!choice || choice === "skip") {
-      saveProgressInBackground({ stage: "ready", accountStatus: "skipped" });
-      return;
-    }
-    if (choice === "qr") {
-      account.beginQrSignIn();
-      return;
-    }
-    account.beginAccountMode(choice);
-  }, [account.beginAccountMode, account.beginQrSignIn, saveProgressInBackground]);
-
   const submitAccountField = useCallback(() => {
     setEditingField(false);
     account.submitAccountField();
   }, [account.submitAccountField]);
 
   const continueAccount = useCallback(() => {
-    if (account.accountSub === "choose") {
-      activateAccountChoice(account.accountChoiceIdx);
-      return;
-    }
     // The QR panel owns enter (retry after a denial); approval advances itself.
     if (account.accountSub === "qr") return;
     if (account.accountSub === "signed-in") {
-      saveProgressInBackground({ stage: apiClient.getCurrentUser()?.emailVerified ? "upgrade" : "verify", accountStatus: "signed-in" });
-      return;
-    }
-    if (account.accountSubmitError?.kind === "switch-to-login") {
-      account.switchToAccountLogin();
+      saveProgressInBackground({ stage: "upgrade", accountStatus: "signed-in" });
       return;
     }
     submitAccountField();
-  }, [
-    account.accountChoiceIdx,
-    account.accountSub,
-    account.accountSubmitError?.kind,
-    account.switchToAccountLogin,
-    activateAccountChoice,
-    saveProgressInBackground,
-    submitAccountField,
-  ]);
+  }, [account.accountSub, saveProgressInBackground, submitAccountField]);
+
+  // The account step opens on the email form with the cursor in it.
+  useEffect(() => {
+    if (stage === "account" && (account.accountSub === "signup" || account.accountSub === "login")) setEditingField(true);
+  }, [account.accountSub, stage]);
 
   const startUpgrade = useCallback(() => {
     void persistProgress({
       stage: "upgrade",
       accountStatus: progress.accountStatus,
       checkoutOpenedAt: new Date().toISOString(),
-    }).then(() => openUpgrade()).catch(() => {});
-  }, [openUpgrade, persistProgress, progress.accountStatus]);
+    }).then(() => openUpgrade({ interval: billingInterval })).catch(() => {});
+  }, [billingInterval, openUpgrade, persistProgress, progress.accountStatus]);
 
   const primaryUpgradeAction = useCallback(() => {
     if (planAccess.hasProAccess) {
@@ -497,23 +578,21 @@ export function OnboardingWizard({ pluginRegistry, importBrokerPositions, onComp
     if (finishingRef.current || isBrokerCommitting) return;
     setEditingField(false);
     if (section === "portfolio") {
-      account.returnToAccountChooser();
-      setPortfolioSub("choose");
+      setPortfolioSub("positions");
       saveProgressInBackground({ stage: "portfolio" });
       return;
     }
     if (section === "cloud") {
-      account.returnToAccountChooser();
       saveProgressInBackground({ stage: "account" });
       return;
     }
     if (planAccess.signedIn) {
       saveProgressInBackground({ stage: "upgrade", accountStatus: "signed-in" });
     }
-  }, [account.returnToAccountChooser, isBrokerCommitting, planAccess.signedIn, saveProgressInBackground]);
+  }, [isBrokerCommitting, planAccess.signedIn, saveProgressInBackground]);
 
   const sectionAvailability: Partial<Record<OnboardingSectionId, boolean>> = {
-    portfolio: !isBrokerCommitting && stage !== "welcome",
+    portfolio: !isBrokerCommitting,
     cloud: !isBrokerCommitting && (stage === "account" || stage === "upgrade" || stage === "ready" || !!progress.tickerSymbol),
     pro: !isBrokerCommitting && planAccess.signedIn && (
       stage === "upgrade"
@@ -523,7 +602,7 @@ export function OnboardingWizard({ pluginRegistry, importBrokerPositions, onComp
   };
 
   useShortcut((event) => {
-    if (helpFocused || commandBarOpen) return;
+    if (helpFocused) return;
     const name = event.name ?? event.key ?? "";
     const enter = name === "enter" || name === "return";
     const escape = name === "escape" || name === "backspace";
@@ -534,45 +613,57 @@ export function OnboardingWizard({ pluginRegistry, importBrokerPositions, onComp
 
     if (name === "f10") {
       consume();
-      if (stage === "portfolio" || stage === "add-ticker") return;
+      if (stage === "portfolio") return;
       if (!isBrokerCommitting) {
         if (stage === "upgrade" && !planAccess.hasProAccess) continueFree();
-        else void finish();
+        else void finish(true);
       }
       return;
     }
 
-    if (editingField) {
+    if (stage === "portfolio" && portfolioSub === "positions") {
+      if (editingField) {
+        if (enter) {
+          consume();
+          positions.submitField();
+        } else if (name === "tab") {
+          consume();
+          positions.setFieldIdx((index) => (
+            event.shift ? Math.max(0, index - 1) : Math.min(POSITION_FIELDS.length - 1, index + 1)
+          ));
+        } else if (name === "escape") {
+          consume();
+          setEditingField(false);
+        }
+        return;
+      }
       if (enter) {
         consume();
-        if (stage === "portfolio") submitBrokerField();
-        else if (stage === "account") submitAccountField();
-      } else if (name === "escape") {
+        if (positionCount > 0) continueFromPositions();
+        else positions.focusField(0);
+      } else if (name === "a") {
         consume();
-        setEditingField(false);
-        if (stage === "account") account.returnToAccountChooser();
-        else if (stage === "portfolio") setPortfolioSub("choose");
+        positions.focusField(0);
+      } else if (name === "b" && positionCount > 0) {
+        consume();
+        openBrokerConnect();
       }
       return;
     }
 
-    if (stage === "welcome") {
+    if (editingField) {
       if (enter) {
         consume();
-        saveProgressInBackground({ stage: "portfolio" });
+        if (stage === "portfolio") submitBrokerField();
+        else if (stage === "account") submitAccountField();
       } else if (name === "escape") {
         consume();
-        void finish();
-      }
-      return;
-    }
-    if (stage === "add-ticker") {
-      if (name === "escape" || name === "backspace") {
-        consume();
-        goToSection("portfolio");
+        setEditingField(false);
+        if (stage === "portfolio") backPortfolio();
       }
       return;
     }
+
     if (stage === "portfolio") {
       if (enter) {
         consume();
@@ -586,7 +677,7 @@ export function OnboardingWizard({ pluginRegistry, importBrokerPositions, onComp
         else if (activeBrokerFields[brokerFieldIdx]?.type === "select") setBrokerSelectIdx((index) => Math.max(0, index - 1));
       } else if (name === "down" || name === "j") {
         consume();
-        if (portfolioSub === "choose") setPortfolioOptionIdx((index) => Math.min(portfolioChoices.length - 1, index + 1));
+        if (portfolioSub === "choose") setPortfolioOptionIdx((index) => Math.min(brokerChoices.length - 1, index + 1));
         else if (activeBrokerFields[brokerFieldIdx]?.type === "select") {
           const optionCount = activeBrokerFields[brokerFieldIdx]?.options?.length ?? 0;
           setBrokerSelectIdx((index) => Math.min(Math.max(0, optionCount - 1), index + 1));
@@ -605,14 +696,11 @@ export function OnboardingWizard({ pluginRegistry, importBrokerPositions, onComp
         continueAccount();
       } else if (escape) {
         consume();
-        if (account.accountSub !== "choose") account.returnToAccountChooser();
+        if (account.accountSub === "qr" || account.accountSub === "login") account.returnToAccountForm();
         else goToSection("portfolio");
-      } else if (account.accountSub === "choose" && (name === "up" || name === "k")) {
-        consume();
-        account.setAccountChoiceIdx((index) => Math.max(0, index - 1));
-      } else if (account.accountSub === "choose" && (name === "down" || name === "j")) {
+      } else if (name === "b" && account.accountSub !== "qr" && account.accountSub !== "signed-in") {
         consume();
-        account.setAccountChoiceIdx((index) => Math.min(ACCOUNT_CHOICE_IDS.length - 1, index + 1));
+        account.beginQrSignIn();
       }
       return;
     }
@@ -637,126 +725,75 @@ export function OnboardingWizard({ pluginRegistry, importBrokerPositions, onComp
     }
   }, { phase: "before", allowEditable: true });
 
-  const portfolioActionLabel = portfolioSub === "broker-sync"
-      ? (isBrokerSyncing ? t("Importing...") : t("Retry"))
-      : t("Continue");
-
-  if (helpFocused || (stage === "add-ticker" && commandBarOpen)) {
+  if (helpFocused) {
     return null;
   }
 
   if (stage === "research") {
-    return <OnboardingCoach step={t("YOUR FIRST RESEARCH WORKSPACE")}
-      title={tf("Explore {ticker}", { ticker: progress.tickerSymbol ?? "your company" })}
+    const ticker = progress.tickerSymbol ?? t("your company");
+    return <OnboardingCoach step={t("YOUR WORKSPACE")}
+      title={tf("Built around {ticker}", { ticker })}
       actions={<><OnboardingButton label="Keep exploring" variant="ghost" onPress={() => { void finish(); }} />
         <OnboardingButton label="Connect free Cloud" variant="primary" onPress={() => saveProgressInBackground({ stage: "account" })} /></>}>
-      <Text fg={colors.textDim} wrapText>{t("Your company is saved. Explore the chart and financials now. Connect Cloud when you're ready for synced layouts, news and Pro research.")}</Text>
+      <Text fg={colors.textDim} wrapText>{tf("Your holdings as a heatmap, a watchlist, and {ticker} charted. Every pane moves; {shortcut} adds more.", {
+        ticker,
+        shortcut: commandBarShortcut,
+      })}</Text>
     </OnboardingCoach>;
   }
 
-  if (stage === "verify") {
-    return <OnboardingModal width={66} height={14}>
-      <OnboardingTitle step={t("CONNECT CLOUD")} title={t("Check your email")}
-        description={apiClient.getCurrentUser()?.email ?? account.accountEmail} />
-      <CloudVerificationPanel onVerified={() => {
-        void chatController.refreshSession();
-        saveProgressInBackground({ stage: "upgrade", accountStatus: "signed-in" });
-      }} onContinueFree={() => { void finish(); }} />
-    </OnboardingModal>;
-  }
-
-  if (stage === "add-ticker") {
-    return (
-      <OnboardingCoach
-        step={t("PORTFOLIO SETUP")}
-        title={t("Add one company you follow")}
-        actions={(
-          <>
-            <OnboardingButton label="Back" variant="ghost" onPress={() => goToSection("portfolio")} />
-            <OnboardingButton
-              label="Open command bar"
-              variant="primary"
-              shortcut="AP"
-              onPress={() => pluginRegistry.openCommandBar("AP ")}
-            />
-          </>
-        )}
-      >
-        <Text fg={colors.textDim} wrapText>
-          {t("Use AP in the real command bar and choose any ticker. Setup continues as soon as the company is saved to your portfolio.")}
-        </Text>
-      </OnboardingCoach>
-    );
-  }
-
-  if (stage === "welcome") {
-    return (
-      <OnboardingModal width={64} height={12}>
-        <OnboardingHeader
-          onDismiss={() => { void finish(); }}
-          dismissing={isFinishing}
-        />
-        <OnboardingTitle
-          step={t("WELCOME")}
-          title={t("Make Gloomberb yours")}
-          description={t("Pick a company. Explore its chart and financials. Keep your workspace free, or add Pro research when you need it.")}
-        />
-        {persistenceError ? (
-          <Text fg={colors.negative} wrapText style={desktop ? { marginTop: 10 } : undefined}>
-            {persistenceError}
-          </Text>
-        ) : null}
-        <OnboardingActions>
-          <OnboardingButton
-            label="Research my first company"
-            variant="primary"
-            onPress={() => saveProgressInBackground({ stage: "portfolio" })}
-          />
-        </OnboardingActions>
-      </OnboardingModal>
-    );
-  }
-
   if (stage === "portfolio") {
     const selectedBrokerName = selectedBrokerId
       ? brokerOptions.find((option) => option.id === selectedBrokerId)?.name
       : null;
-    const portfolioModalHeight = portfolioSub === "choose"
-      ? 18
-      : portfolioSub === "broker-setup"
-        ? 21
-        : portfolioSub === "broker-sync"
-          ? 14
-          : 20;
+    const portfolioModalHeight = portfolioSub === "positions"
+      ? 22
+      : portfolioSub === "choose"
+        ? 16
+        : portfolioSub === "broker-setup"
+          ? 21
+          : portfolioSub === "broker-sync"
+            ? 14
+            : 20;
+    const title = portfolioSub === "positions"
+      ? t("What do you hold?")
+      : portfolioSub === "choose"
+        ? t("Connect a broker")
+        : selectedBrokerName
+          ? tf("Connect {broker}", { broker: selectedBrokerName })
+          : t("Set up a portfolio");
+    const description = portfolioSub === "positions"
+      ? undefined
+      : portfolioSub === "choose"
+        ? t("Credentials stay on this device.")
+        : t("Enter the connection details for this broker. Credentials stay on this device.");
     return (
-      <OnboardingModal width={70} height={portfolioModalHeight}>
+      <OnboardingModal width={76} height={portfolioModalHeight} desktopWidth="min(620px, 100%)">
         <OnboardingHeader
           active="portfolio"
           available={sectionAvailability}
           onNavigate={goToSection}
-          onDismiss={() => { void finish(); }}
+          onDismiss={skipSetup}
           dismissing={isFinishing}
           dismissDisabled={isBrokerCommitting}
           showDismiss={false}
         />
         <OnboardingTitle
           step={desktop ? undefined : t("PORTFOLIO")}
-          title={portfolioSub === "choose"
-            ? t("How do you want to start?")
-            : selectedBrokerName
-              ? tf("Connect {broker}", { broker: selectedBrokerName })
-              : t("Set up a portfolio")}
-          description={portfolioSub === "choose"
-            ? t("Create a manual portfolio and add one ticker, or import positions from a supported broker.")
-            : t("Enter the connection details for this broker. Credentials stay on this device.")}
+          title={title}
+          description={description}
         />
         <Box minHeight={0}>
           <PortfolioStep
             sub={portfolioSub}
-            choices={portfolioChoices}
+            positions={positions}
+            positionsInputRef={inputRef}
+            positionsEditing={editingField}
+            commandBarShortcut={commandBarShortcut}
+            choices={brokerChoices}
             optionIdx={portfolioOptionIdx}
             onOptionSelect={setPortfolioOptionIdx}
-            onOptionActivate={choosePortfolioPath}
+            onOptionActivate={chooseBroker}
             selectedBrokerId={selectedBrokerId}
             brokerFields={activeBrokerFields}
             brokerFieldIdx={brokerFieldIdx}
@@ -764,7 +801,6 @@ export function OnboardingWizard({ pluginRegistry, importBrokerPositions, onComp
             onBrokerSelect={setBrokerSelectIdx}
             brokerValues={brokerValues}
             onBrokerFieldChange={setBrokerFieldValue}
-            onSubmitBrokerField={submitBrokerField}
             editing={editingField}
             inputRef={inputRef}
             brokerSyncing={isBrokerSyncing}
@@ -776,18 +812,32 @@ export function OnboardingWizard({ pluginRegistry, importBrokerPositions, onComp
             {persistenceError}
           </Text>
         ) : null}
-        <OnboardingActions>
-          {portfolioSub !== "choose" ? (
-            <OnboardingButton label="Back" variant="ghost" disabled={isBrokerCommitting} onPress={backPortfolio} />
-          ) : null}
-          {!desktop || portfolioSub !== "choose" ? (
-            <OnboardingButton
-              label={portfolioActionLabel}
-              variant="primary"
-              disabled={isBrokerSyncing}
-              onPress={continuePortfolio}
-            />
-          ) : null}
+        <OnboardingActions hint={portfolioSub === "positions" && desktop ? tf("Later: {shortcut}, then AP.", { shortcut: commandBarShortcut }) : undefined}>
+          {portfolioSub === "positions" ? (
+            <>
+              {brokerOptions.length > 0 && positionCount > 0 ? (
+                <OnboardingButton label="Connect a broker" variant="ghost" onPress={openBrokerConnect} />
+              ) : null}
+              <OnboardingButton
+                label="Continue"
+                variant="primary"
+                disabled={positionCount === 0 || positions.submitting}
+                onPress={continueFromPositions}
+              />
+            </>
+          ) : (
+            <>
+              <OnboardingButton label="Back" variant="ghost" disabled={isBrokerCommitting} onPress={backPortfolio} />
+              {!desktop || portfolioSub !== "choose" ? (
+                <OnboardingButton
+                  label={portfolioSub === "broker-sync" ? (isBrokerSyncing ? t("Importing...") : t("Retry")) : t("Continue")}
+                  variant="primary"
+                  disabled={isBrokerSyncing}
+                  onPress={continuePortfolio}
+                />
+              ) : null}
+            </>
+          )}
         </OnboardingActions>
       </OnboardingModal>
     );
@@ -798,40 +848,32 @@ export function OnboardingWizard({ pluginRegistry, importBrokerPositions, onComp
       ? t("See Pro plans")
       : account.accountSub === "login"
         ? t("Log in")
-        : account.accountSub === "signup"
-          ? (account.accountFieldIdx > 0 ? t("Sign up free") : t("Continue"))
-          : t("Continue");
+        : t("Continue");
     const accountTitle = account.accountSub === "signup"
-      ? t("Create your free account")
+      ? t("Connect Gloom Cloud")
       : account.accountSub === "login"
         ? t("Log in")
         : account.accountSub === "qr"
           ? t("Continue in browser")
-          : account.accountSub === "signed-in"
-            ? t("Connected")
-            : t("Sync across apps");
-    const accountDescription = account.accountSub === "choose"
-      ? t("Sync your layouts. Search calls, news and filings.")
-      : account.accountSub === "qr"
-        ? t("Open the sign-in link, or scan the code with your phone.")
-        : account.accountSub === "signup"
-        ? t("Create the free account now. Cloud features unlock after you verify your email.")
+          : t("Connected");
+    const accountDescription = account.accountSub === "qr"
+      ? t("Open the sign-in link, or scan the code with your phone.")
+      : account.accountSub === "signup"
+        ? t("Gloom Cloud adds the data layer: quotes, news, filings and Ask Gloom, synced to every device. Free account.")
         : account.accountSub === "login"
-          ? t("Use the account that should own this workspace and its synced data.")
-          : t("Your account is ready. Next, choose whether you want the real-time Pro data plan.");
+          ? t("Enter the password for this account.")
+          : t("Next: real-time Pro data.");
     const accountStatusRows = account.accountSubmitting || account.accountValidationError || account.accountSubmitError
       ? 1
       : 0;
-    const accountSwitchRows = account.accountSubmitError?.kind === "switch-to-login" ? 1 : 0;
     // The QR grid is the tallest thing this wizard ever shows; DeviceSignInPanel
     // degrades to the code plus URL when the terminal cannot give it these rows.
-    const accountModalHeight = account.accountSub === "choose"
-      ? 21
-      : account.accountSub === "qr"
-        ? 32
-        : account.accountSub === "signed-in"
-          ? 12
-          : 16 + (account.accountFieldIdx > 0 ? 2 : 0) + accountStatusRows + accountSwitchRows;
+    const accountModalHeight = account.accountSub === "qr"
+      ? 32
+      : account.accountSub === "signed-in"
+        ? 12
+        : 17 + (account.accountFieldIdx > 0 ? 2 : 0) + accountStatusRows;
+    const browserSignIn = account.accountSub === "signup" || account.accountSub === "login";
     // OnboardingModal clamps the card to the viewport, so the panel has to size
     // off the clamped height or the QR overflows a short terminal.
     const accountPanelHeight = Math.max(4, Math.min(accountModalHeight, viewportHeight - 2) - 9);
@@ -844,7 +886,7 @@ export function OnboardingWizard({ pluginRegistry, importBrokerPositions, onComp
           active="cloud"
           available={sectionAvailability}
           onNavigate={goToSection}
-          onDismiss={() => { void finish(); }}
+          onDismiss={skipSetup}
           dismissing={isFinishing}
         />
         <OnboardingTitle
@@ -855,9 +897,6 @@ export function OnboardingWizard({ pluginRegistry, importBrokerPositions, onComp
         <Box minHeight={0}>
           <AccountStep
             sub={account.accountSub}
-            choiceIdx={account.accountChoiceIdx}
-            onChoiceSelect={account.setAccountChoiceIdx}
-            onChoiceActivate={activateAccountChoice}
             email={account.accountEmail}
             password={account.accountPassword}
             fieldIdx={account.accountFieldIdx}
@@ -870,7 +909,6 @@ export function OnboardingWizard({ pluginRegistry, importBrokerPositions, onComp
             onEmailChange={account.setAccountEmail}
             onPasswordChange={account.setAccountPassword}
             onFieldFocus={account.focusAccountField}
-            onSubmitField={submitAccountField}
             onQrApproved={account.completeQrSignIn}
             height={accountPanelHeight}
           />
@@ -880,13 +918,22 @@ export function OnboardingWizard({ pluginRegistry, importBrokerPositions, onComp
             {persistenceError}
           </Text>
         ) : null}
-        <OnboardingActions>
+        {!desktop && browserSignIn ? (
+          <Box height={1}>
+            <Text fg={colors.textMuted}>{t("b: sign in with the browser instead")}</Text>
+          </Box>
+        ) : null}
+        <OnboardingActions
+          hint={desktop && browserSignIn ? (
+            <Button label="Sign in with the browser instead" variant="plain" compact onPress={account.beginQrSignIn} />
+          ) : undefined}
+        >
           <OnboardingButton
             label="Back"
             variant="ghost"
-            onPress={account.accountSub === "choose" ? () => goToSection("portfolio") : account.returnToAccountChooser}
+            onPress={account.accountSub === "qr" || account.accountSub === "login" ? account.returnToAccountForm : () => goToSection("portfolio")}
           />
-          {account.accountSub !== "qr" && (!desktop || account.accountSub !== "choose") ? (
+          {account.accountSub !== "qr" ? (
             <OnboardingButton
               label={accountActionLabel}
               variant="primary"
@@ -901,41 +948,73 @@ export function OnboardingWizard({ pluginRegistry, importBrokerPositions, onComp
 
   if (stage === "upgrade") {
     const primaryLabel = planAccess.hasProAccess ? t("Continue with Pro") : t("Start 7-day free trial");
-    const monthlyPrice = formatCloudMonthlyPrice(pricing);
+    const price = formatCloudPrice(pricing, billingInterval);
+    const monthsFree = monthsFreeYearly(pricing);
+    const yearlyLabel = monthsFree > 0 ? tf("Yearly, {months} months free", { months: monthsFree }) : t("Yearly");
+    const priceNote = [price.note, billingInterval === "year" && monthsFree > 0 ? tf("{months} months free", { months: monthsFree }) : null]
+      .filter((part): part is string => !!part)
+      .join(" \u00b7 ");
     return (
-      <OnboardingModal width={66} height={17}>
+      <OnboardingModal width={70} height={28}>
         <OnboardingHeader
           active="pro"
           available={sectionAvailability}
           onNavigate={goToSection}
-          onDismiss={() => { void finish(); }}
+          onDismiss={skipSetup}
           dismissing={isFinishing}
           showDismiss={false}
         />
         <OnboardingTitle
           step={desktop ? undefined : t("GLOOM CLOUD PRO")}
-          title={planAccess.hasProAccess ? t("Pro is active") : monthlyPrice.price}
-          titlePrefix={!planAccess.hasProAccess && monthlyPrice.anchor ? (
+          title={planAccess.hasProAccess ? t("Pro is active") : price.price}
+          titlePrefix={!planAccess.hasProAccess && price.anchor ? (
             <Text fg={colors.textMuted} attributes={TextAttributes.STRIKETHROUGH}>
-              {monthlyPrice.anchor}
+              {price.anchor}
             </Text>
           ) : undefined}
+          titleSuffix={!planAccess.hasProAccess && priceNote ? priceNote : undefined}
           description={planAccess.hasProAccess
             ? t("This account already has real-time Cloud data.")
-            : t("7 days free, then the price above. Card required. Cancel anytime.")}
+            : t("7 days free. Card required. Cancel anytime.")}
         />
-        <Box flexDirection="column" style={desktop ? { marginTop: 14, gap: 8 } : undefined}>
+        {!planAccess.hasProAccess ? (
+          <Box flexDirection="row" style={desktop ? { marginTop: 12 } : undefined} paddingTop={desktop ? undefined : 1}>
+            <SegmentedControl
+              options={[
+                { label: t("Monthly"), value: "month" },
+                { label: yearlyLabel, value: "year" },
+              ]}
+              value={billingInterval}
+              onChange={(value) => setBillingInterval(value === "year" ? "year" : "month")}
+              focused={!desktop}
+            />
+          </Box>
+        ) : null}
+        {/* Ranked: the data itself first, then what reads it. */}
+        <Box flexDirection="column" style={desktop ? { marginTop: ONBOARDING_DESKTOP.afterHeader, gap: 10 } : undefined}>
+          <OnboardingFeature
+            title={t("Real-time market data")}
+            description={t("Free is 15 minutes behind on quotes and 12 hours on news.")}
+          />
+          <OnboardingFeature
+            title={t("MCP server")}
+            description={t("Claude Code, Codex or Cursor call Gloom's research tools.")}
+          />
+          <OnboardingFeature
+            title={t("Ask Gloom")}
+            description={t("Answers cite filings, calls and news.")}
+          />
           <OnboardingFeature
-            title={t("Worldwide equities and options")}
-            description={t("Free: 15m delayed. Pro: real-time.")}
+            title={t("Earnings calls")}
+            description={t("Transcripts, summaries, guidance and scores.")}
           />
           <OnboardingFeature
-            title={t("News wire")}
-            description={t("Free: 12h delayed. Pro: real-time.")}
+            title={t("Equity Diagnostic")}
+            description={t("Full report: red and green flags with evidence.")}
           />
           <OnboardingFeature
-            title={t("Earnings transcripts and instant search")}
-            description={t("Read calls. Search transcripts, news and filings. Ask Gloomberb AI coming soon.")}
+            title={t("Search, theses and flow")}
+            description={t("Instant search with alerts, thesis monitoring, options flow, hiring and compensation data.")}
           />
         </Box>
         {persistenceError ? (
@@ -962,16 +1041,12 @@ export function OnboardingWizard({ pluginRegistry, importBrokerPositions, onComp
     );
   }
 
-  const readyDescription = progress.brokerName
-    ? tf("Imported {count} positions from {broker}. Your workspace is ready to explore.", {
-      count: progress.positionsImported ?? 0,
-      broker: progress.brokerName,
+  const readyDescription = progress.tickerSymbol
+    ? tf("{ticker} is open. {shortcut}, then AP, adds more.", {
+      ticker: progress.tickerSymbol,
+      shortcut: commandBarShortcut,
     })
-    : progress.tickerSymbol
-      ? tf("{ticker} is in your portfolio, and its research is ready in the workspace.", {
-        ticker: progress.tickerSymbol,
-      })
-      : t("Your local workspace is ready. You can connect Cloud or add a portfolio later.");
+    : t("Your local workspace is ready. You can connect Cloud or add a portfolio later.");
 
   return (
     <OnboardingModal width={66} height={12}>
@@ -979,11 +1054,12 @@ export function OnboardingWizard({ pluginRegistry, importBrokerPositions, onComp
         active={progress.accountStatus === "signed-in" ? "pro" : "cloud"}
         available={sectionAvailability}
         onNavigate={goToSection}
-        onDismiss={() => { void finish(); }}
+        onDismiss={skipSetup}
         dismissing={isFinishing}
+        showDismiss={false}
       />
       <OnboardingTitle
-        step={t("READY")}
+        step={desktop ? undefined : t("READY")}
         title={t("Your workspace is ready")}
         description={readyDescription}
       />