gloomberb 0.10.2 → 0.10.4

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

@@ -1,9 +1,13 @@
+import { useMemo } from "react";
 import { AsciiText, Box, Span, Strong, Text, TextAttributes, useUiHost } from "../../ui";
 import { colors } from "../../theme/colors";
 import { t, tf } from "../../i18n";
 import { themes } from "../../theme/themes";
 import { detectShortcutPlatform, formatPrimaryShortcut, getShortcutDisplayMode } from "../../utils/shortcut-labels";
+import { ListView, type ListViewItem } from "../ui";
+import type { AccountOutcome } from "./account-step/model";
 export { PortfolioStep, type PortfolioSub } from "./portfolio-step";
+export { AccountStep } from "./account-step";
 
 export interface BrokerSyncSummary {
   portfolioId: string | null;
@@ -30,12 +34,24 @@ export function WelcomeStep() {
   );
 }
 
-export function ThemeStep({ themeIds, selectedIdx, height }: { themeIds: string[]; selectedIdx: number; height: number }) {
-  const maxVisible = Math.min(themeIds.length, Math.max(6, height - 12));
-  const halfWindow = Math.floor(maxVisible / 2);
-  let windowStart = Math.max(0, Math.min(selectedIdx - halfWindow, themeIds.length - maxVisible));
-  if (windowStart < 0) windowStart = 0;
-  const windowEnd = Math.min(themeIds.length, windowStart + maxVisible);
+// Rows the theme step spends on everything that is not the theme list itself.
+const THEME_CHROME_ROWS = 8;
+
+export function ThemeStep({
+  themeIds,
+  selectedIdx,
+  onSelect,
+  height,
+}: {
+  themeIds: string[];
+  selectedIdx: number;
+  onSelect: (index: number) => void;
+  height: number;
+}) {
+  const items = useMemo<ListViewItem[]>(
+    () => themeIds.map((id) => ({ id, label: themes[id]!.name })),
+    [themeIds],
+  );
 
   return (
     <Box flexDirection="column" paddingX={2}>
@@ -48,7 +64,7 @@ export function ThemeStep({ themeIds, selectedIdx, height }: { themeIds: string[
         <Text fg={colors.text} attributes={TextAttributes.BOLD}>{"TH"}</Text>
       </Box>
       <Box height={1} />
-      <Box height={1}>
+      <Box height={1} flexDirection="row">
         <Text fg={colors.positive}>{" \u2588\u2588 "}</Text>
         <Text fg={colors.negative}>{" \u2588\u2588 "}</Text>
         <Text fg={colors.text}>{" \u2588\u2588 "}</Text>
@@ -58,33 +74,13 @@ export function ThemeStep({ themeIds, selectedIdx, height }: { themeIds: string[
       </Box>
       <Box height={1} />
 
-      {windowStart > 0 && (
-        <Box height={1}>
-          <Text fg={colors.textMuted}>{"\u2191 more"}</Text>
-        </Box>
-      )}
-
-      {themeIds.slice(windowStart, windowEnd).map((id, index) => {
-        const theme = themes[id]!;
-        const globalIdx = windowStart + index;
-        const isSelected = globalIdx === selectedIdx;
-        return (
-          <Box key={id} height={1} backgroundColor={isSelected ? colors.selected : colors.bg}>
-            <Text fg={isSelected ? colors.selectedText : colors.textDim}>
-              {isSelected ? "\u25b8 " : "  "}
-            </Text>
-            <Text fg={isSelected ? colors.text : colors.textDim} attributes={isSelected ? TextAttributes.BOLD : 0}>
-              {theme.name}
-            </Text>
-          </Box>
-        );
-      })}
-
-      {windowEnd < themeIds.length && (
-        <Box height={1}>
-          <Text fg={colors.textMuted}>{"\u2193 more"}</Text>
-        </Box>
-      )}
+      <ListView
+        items={items}
+        selectedIndex={selectedIdx}
+        onSelect={onSelect}
+        scrollable
+        height={Math.max(3, height - THEME_CHROME_ROWS)}
+      />
 
       <Box height={1} />
       <Box height={1}>
@@ -94,7 +90,7 @@ export function ThemeStep({ themeIds, selectedIdx, height }: { themeIds: string[
   );
 }
 
-export function ShortcutsStep() {
+export function ShortcutsStep({ height }: { height: number }) {
   const uiHost = useUiHost();
   const shortcutPlatform = detectShortcutPlatform();
   const shortcutDisplayMode = getShortcutDisplayMode(uiHost.kind);
@@ -117,6 +113,11 @@ export function ShortcutsStep() {
 
   const COL = 20;
 
+  // Shed the least useful rows first so the wizard footer stays on screen in an 80x24 terminal.
+  const gap = height < 21 ? 1 : 2;
+  const showTagline = height >= 19;
+  const showPrefixHint = height >= 17;
+
   return (
     <Box flexDirection="column" paddingX={2}>
       <Box height={1}>
@@ -131,15 +132,19 @@ export function ShortcutsStep() {
         </Box>
       ))}
 
-      <Box height={2} />
+      <Box height={gap} />
       <Box height={1}>
         <Text fg={colors.textBright} attributes={TextAttributes.BOLD}>{t("Basic command prefixes")}</Text>
       </Box>
       <Box height={1} />
-      <Box height={1}>
-        <Text fg={colors.textDim}>{t("Type these in the command bar (")}<Span fg={colors.text}><Strong>{"Ctrl+P"}</Strong></Span>{"):"}</Text>
-      </Box>
-      <Box height={1} />
+      {showPrefixHint && (
+        <>
+          <Box height={1}>
+            <Text fg={colors.textDim}>{t("Type these in the command bar (")}<Span fg={colors.text}><Strong>{"Ctrl+P"}</Strong></Span>{"):"}</Text>
+          </Box>
+          <Box height={1} />
+        </>
+      )}
 
       {commandPrefixes.map((shortcut) => (
         <Box key={shortcut.key} height={1} flexDirection="row">
@@ -148,10 +153,14 @@ export function ShortcutsStep() {
         </Box>
       ))}
 
-      <Box height={2} />
-      <Box height={1}>
-        <Text fg={colors.textDim}>{t("Everything is searchable, just type what you want.")}</Text>
-      </Box>
+      {showTagline && (
+        <>
+          <Box height={gap} />
+          <Box height={1}>
+            <Text fg={colors.textDim}>{t("Everything is searchable, just type what you want.")}</Text>
+          </Box>
+        </>
+      )}
     </Box>
   );
 }
@@ -160,17 +169,20 @@ export function ReadyStep({
   brokerName,
   portfolioName,
   brokerSyncSummary,
+  accountOutcome,
   isFinishing,
   error,
 }: {
   brokerName: string | null;
   portfolioName: string;
   brokerSyncSummary: BrokerSyncSummary | null;
+  accountOutcome: AccountOutcome | null;
   isFinishing: boolean;
   error: string | null;
 }) {
   const positionsImported = brokerSyncSummary?.positionsImported ?? 0;
   const positionLabel = positionsImported === 1 ? "position" : "positions";
+  const accountEmail = accountOutcome?.email ?? "";
 
   return (
     <Box flexDirection="column" paddingX={2}>
@@ -179,23 +191,47 @@ export function ReadyStep({
         <Text fg={colors.textBright} attributes={TextAttributes.BOLD}>{t("You're all set")}</Text>
       </Box>
       <Box height={2} />
-      <Box height={1}>
-        <Text fg={colors.positive} attributes={TextAttributes.BOLD}>{"\u2713"}</Text>
-        <Text fg={colors.text}>{` ${t("Theme configured")}`}</Text>
+      <Box height={1} flexDirection="row">
+        <Text fg={colors.positive} attributes={TextAttributes.BOLD}>{"\u2713 "}</Text>
+        <Text fg={colors.text}>{t("Theme configured")}</Text>
       </Box>
-      <Box height={1}>
-        <Text fg={colors.positive} attributes={TextAttributes.BOLD}>{"\u2713"}</Text>
+      <Box height={1} flexDirection="row">
+        <Text fg={colors.positive} attributes={TextAttributes.BOLD}>{"\u2713 "}</Text>
         <Text fg={colors.text}>
           {brokerName
-            ? ` ${tf("{broker} connected. Imported {count} {label}", { broker: brokerName, count: positionsImported, label: t(positionLabel) })}`
-            : ` ${tf('Portfolio "{name}" created', { name: portfolioName })}`}
+            ? tf("{broker} connected. Imported {count} {label}", { broker: brokerName, count: positionsImported, label: t(positionLabel) })
+            : tf('Portfolio "{name}" created', { name: portfolioName })}
         </Text>
       </Box>
-      <Box height={1}>
-        <Text fg={colors.positive} attributes={TextAttributes.BOLD}>{"\u2713"}</Text>
-        <Text fg={colors.text}>{` ${t("Plugins enabled")}`}</Text>
+      <Box height={1} flexDirection="row">
+        <Text fg={colors.positive} attributes={TextAttributes.BOLD}>{"\u2713 "}</Text>
+        <Text fg={colors.text}>{t("Plugins enabled")}</Text>
       </Box>
-      <Box height={2} />
+      {accountOutcome && (
+        <Box height={1} flexDirection="row">
+          <Text fg={colors.positive} attributes={TextAttributes.BOLD}>{"\u2713 "}</Text>
+          <Text fg={colors.text}>
+            {!accountEmail
+              ? t("Signed in to Gloom Cloud")
+              : accountOutcome.mode === "signup"
+                ? tf("Account created for {email}", { email: accountEmail })
+                : tf("Signed in as {email}", { email: accountEmail })}
+          </Text>
+        </Box>
+      )}
+      <Box height={1} />
+      {accountOutcome?.mode === "signup" ? (
+        <Box height={2}>
+          <Text fg={colors.text}>
+            {t("Check your inbox to verify your email. Then start your free 7-day Pro trial anytime \u2014 type UPGRADE.")}
+          </Text>
+        </Box>
+      ) : accountOutcome ? null : (
+        <Box height={1}>
+          <Text fg={colors.textMuted}>{t("Create an account anytime: Ctrl+P \u2192 Sign Up.")}</Text>
+        </Box>
+      )}
+      <Box height={1} />
       {brokerName ? (
         <Box height={1}>
           <Text fg={isFinishing ? colors.text : colors.textDim}>

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

@@ -3,6 +3,7 @@ import { mkdtemp, rm } from "fs/promises";
 import { tmpdir } from "os";
 import { join } from "path";
 import { act } from "react";
+import { setCloudApiFetchTransport } from "../../api-client";
 import { testRender } from "../../renderers/opentui/test-utils";
 import { OnboardingWizard } from "./onboarding-wizard";
 import { createDefaultConfig, type AppConfig } from "../../types/config";
@@ -80,6 +81,7 @@ async function waitForFrameToContain(text: string, attempts = 8): Promise<string
 }
 
 afterEach(async () => {
+  setCloudApiFetchTransport(null);
   if (testSetup) {
     await act(async () => {
       testSetup!.renderer.destroy();
@@ -223,12 +225,10 @@ describe("OnboardingWizard", () => {
     frame = testSetup.captureCharFrame();
     expect(frame).toContain("After launch shortcuts");
 
-    for (let index = 0; index < 3 && !frame.includes("Imported 1 position"); index += 1) {
-      await emitKeypress(testSetup, { name: "return", sequence: "\r" });
-      frame = testSetup.captureCharFrame();
-    }
-
-    expect(frame).toContain("Imported 1 position");
+    await emitKeypress(testSetup, { name: "return", sequence: "\r" });
+    await waitForFrameToContain("Create your free Gloom Cloud account");
+    await emitKeypress(testSetup, { name: "right", sequence: "" });
+    frame = await waitForFrameToContain("Imported 1 position");
     expect(completedConfig).toBeNull();
 
     await emitKeypress(testSetup, { name: "return", sequence: "\r" });
@@ -252,4 +252,71 @@ describe("OnboardingWizard", () => {
       .toBe("broker:demo-demo-broker:ACC-1");
     expect((await tickerRepository.loadAllTickers()).map((ticker) => ticker.metadata.ticker)).toContain("AAPL");
   });
+
+  test("account step validates locally and stays skippable all the way to launch", async () => {
+    tempDataDir = await mkdtemp(join(tmpdir(), "gloomberb-onboarding-account-"));
+    const requestedUrls: string[] = [];
+    setCloudApiFetchTransport(async (url) => {
+      requestedUrls.push(url);
+      throw new Error("network is disabled in tests");
+    });
+
+    const pluginRegistry = {
+      allPlugins: new Map(),
+      brokers: new Map(),
+      paneTemplates: new Map(),
+      getPaneTemplatePluginId: () => undefined,
+      tickerRepository: createTickerRepository(),
+      persistence: { resources: undefined },
+    } as unknown as PluginRegistry;
+
+    let completedConfig: AppConfig | null = null;
+    testSetup = await testRender(
+      <OnboardingWizard
+        config={createDefaultConfig(tempDataDir)}
+        pluginRegistry={pluginRegistry}
+        onComplete={(nextConfig) => {
+          completedConfig = nextConfig;
+        }}
+      />,
+      { width: 90, height: 28 },
+    );
+    await testSetup.renderOnce();
+
+    // welcome -> theme -> portfolio -> shortcuts -> account
+    for (let index = 0; index < 4; index += 1) {
+      await emitKeypress(testSetup, { name: "return", sequence: "\r" });
+    }
+    let frame = await waitForFrameToContain("Create your free Gloom Cloud account");
+    expect(frame).toContain("Try Pro free for 7 days");
+
+    await emitKeypress(testSetup, { name: "return", sequence: "\r" });
+    await waitForFrameToContain("Create your free account");
+
+    // Submitting an empty form must be caught locally instead of hitting the API.
+    await emitKeypress(testSetup, { name: "return", sequence: "\r" });
+    frame = await waitForFrameToContain("Enter your email address.");
+    expect(requestedUrls).toEqual([]);
+
+    await emitKeypress(testSetup, { name: "escape", sequence: "\u001b" });
+    await waitForFrameToContain("Skip for now");
+
+    await emitKeypress(testSetup, { name: "down", sequence: "\u001b[B" });
+    await emitKeypress(testSetup, { name: "down", sequence: "\u001b[B" });
+    await emitKeypress(testSetup, { name: "return", sequence: "\r" });
+    frame = await waitForFrameToContain("Create an account anytime");
+    expect(frame).not.toContain("Signed in as");
+
+    await emitKeypress(testSetup, { name: "return", sequence: "\r" });
+    for (let index = 0; index < 20 && !completedConfig; index += 1) {
+      await act(async () => {
+        await Promise.resolve();
+        await new Promise((resolve) => setTimeout(resolve, 0));
+        await testSetup!.renderOnce();
+      });
+    }
+
+    expect(completedConfig).not.toBeNull();
+    expect(requestedUrls).toEqual([]);
+  });
 });

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

@@ -10,6 +10,7 @@ import type { PluginRegistry } from "../../plugins/registry";
 import { resolveBrokerConfigFields, type BrokerConfigField } from "../../types/broker";
 import type { ListViewItem } from "../ui";
 import {
+  AccountStep,
   PortfolioStep,
   ReadyStep,
   ShortcutsStep,
@@ -17,6 +18,8 @@ import {
   WelcomeStep,
   type PortfolioSub,
 } from "./onboarding-steps";
+import { ACCOUNT_CHOICE_IDS } from "./account-step/model";
+import { useOnboardingAccount } from "./wizard-account";
 import { finishOnboarding, summarizeOnboardingError, useOnboardingBrokerSync } from "./wizard-broker-sync";
 import { useOnboardingKeyboard } from "./wizard-keyboard";
 import {
@@ -26,6 +29,9 @@ import {
   type OnboardingStep,
 } from "./wizard-model";
 
+// Blank spacer + progress dots + hint line.
+const FOOTER_ROWS = 3;
+
 interface OnboardingWizardProps {
   config: AppConfig;
   pluginRegistry: PluginRegistry;
@@ -83,12 +89,6 @@ export function OnboardingWizard({ config, pluginRegistry, onComplete }: Onboard
     applyTheme(themeIds[themeIdx]!);
   }
 
-  useEffect(() => {
-    if (!editingField) return;
-    const focusTimer = setTimeout(() => inputRef.current?.focus?.(), 10);
-    return () => clearTimeout(focusTimer);
-  }, [editingField, portfolioSub, brokerFieldIdx]);
-
   useEffect(() => {
     if (!selectedBrokerId) return;
     const field = activeBrokerFields[brokerFieldIdx];
@@ -119,6 +119,32 @@ export function OnboardingWizard({ config, pluginRegistry, onComplete }: Onboard
     }
   }, [step]);
 
+  const account = useOnboardingAccount({ nextStep, setEditingField });
+
+  // Re-focus whenever the active field changes so enter keeps moving through
+  // the broker and account forms without a mouse.
+  useEffect(() => {
+    if (!editingField) return;
+    const focusTimer = setTimeout(() => inputRef.current?.focus?.(), 10);
+    return () => clearTimeout(focusTimer);
+  }, [editingField, portfolioSub, brokerFieldIdx, account.accountSub, account.accountFieldIdx]);
+
+  const { beginAccountMode, syncExistingAccountSession } = account;
+  useEffect(() => {
+    if (step !== "account") return;
+    syncExistingAccountSession();
+  }, [step, syncExistingAccountSession]);
+
+  // Clicking a chooser row has to do exactly what enter does on it.
+  const activateAccountChoice = useCallback((index: number) => {
+    const choice = ACCOUNT_CHOICE_IDS[index];
+    if (!choice || choice === "skip") {
+      nextStep();
+      return;
+    }
+    beginAccountMode(choice);
+  }, [beginAccountMode, nextStep]);
+
   const {
     isBrokerSyncing,
     brokerSyncError,
@@ -202,6 +228,16 @@ export function OnboardingWizard({ config, pluginRegistry, onComplete }: Onboard
     setEditingField,
     isBrokerSyncing,
     brokerSyncError,
+    accountSub: account.accountSub,
+    accountChoiceIdx: account.accountChoiceIdx,
+    setAccountChoiceIdx: account.setAccountChoiceIdx,
+    accountSubmitting: account.accountSubmitting,
+    accountSubmitError: account.accountSubmitError,
+    beginAccountMode: account.beginAccountMode,
+    returnToAccountChooser: account.returnToAccountChooser,
+    switchToAccountLogin: account.switchToAccountLogin,
+    submitAccountField: account.submitAccountField,
+    submitAccount: account.submitAccount,
     isFinishing,
     nextStep,
     prevStep,
@@ -213,7 +249,9 @@ export function OnboardingWizard({ config, pluginRegistry, onComplete }: Onboard
 
   const contentWidth = Math.min(60, termWidth - 4);
   const contentLeft = Math.floor((termWidth - contentWidth) / 2);
-  const contentTop = Math.max(1, Math.floor((termHeight - 24) / 2));
+  // The footer is pinned to the last FOOTER_ROWS rows, so steps get whatever is left.
+  const contentTop = Math.max(0, Math.min(Math.floor((termHeight - 24) / 2), termHeight - FOOTER_ROWS - 1));
+  const contentHeight = Math.max(1, termHeight - contentTop - FOOTER_ROWS);
   const progressDots = ONBOARDING_STEPS.map((_, index) => {
     if (index < stepIdx) return "\u2501";
     if (index === stepIdx) return "\u25cf";
@@ -227,6 +265,15 @@ export function OnboardingWizard({ config, pluginRegistry, onComplete }: Onboard
   if (step === "ready") {
     hintText = t("enter to launch");
   }
+  if (step === "account") {
+    if (account.accountSubmitting) {
+      hintText = account.accountSub === "login" ? t("signing in...") : t("creating account...");
+    } else if (account.accountSubmitError?.kind === "switch-to-login") {
+      hintText = t("enter to log in");
+    } else if (account.accountSubmitError) {
+      hintText = t("enter to retry");
+    }
+  }
   if (step === "portfolio" && portfolioSub === "broker-sync") {
     hintText = isBrokerSyncing ? "syncing broker..." : "enter to retry";
   } else if (isFinishing) {
@@ -248,10 +295,18 @@ export function OnboardingWizard({ config, pluginRegistry, onComplete }: Onboard
         top={contentTop}
         left={contentLeft}
         width={contentWidth}
+        height={contentHeight}
         flexDirection="column"
       >
         {step === "welcome" && <WelcomeStep />}
-        {step === "theme" && <ThemeStep themeIds={themeIds} selectedIdx={themeIdx} height={termHeight - contentTop - 4} />}
+        {step === "theme" && (
+          <ThemeStep
+            themeIds={themeIds}
+            selectedIdx={themeIdx}
+            onSelect={setThemeIdx}
+            height={contentHeight}
+          />
+        )}
         {step === "portfolio" && (
           <PortfolioStep
             sub={portfolioSub}
@@ -271,18 +326,47 @@ export function OnboardingWizard({ config, pluginRegistry, onComplete }: Onboard
           />
         )}
         {step === "shortcuts" && (
-          <ShortcutsStep />
+          <ShortcutsStep height={contentHeight} />
+        )}
+        {step === "account" && (
+          <AccountStep
+            sub={account.accountSub}
+            choiceIdx={account.accountChoiceIdx}
+            onChoiceSelect={account.setAccountChoiceIdx}
+            onChoiceActivate={activateAccountChoice}
+            email={account.accountEmail}
+            password={account.accountPassword}
+            fieldIdx={account.accountFieldIdx}
+            editing={editingField}
+            inputRef={inputRef}
+            submitting={account.accountSubmitting}
+            submitError={account.accountSubmitError}
+            validationError={account.accountValidationError}
+            outcome={account.accountOutcome}
+            onEmailChange={account.setAccountEmail}
+            onPasswordChange={account.setAccountPassword}
+            height={contentHeight}
+          />
         )}
         {step === "ready" && (
           <ReadyStep
             brokerName={connectedBrokerName ?? null}
             portfolioName={portfolioName}
             brokerSyncSummary={brokerSyncSummary}
+            accountOutcome={account.accountOutcome}
             isFinishing={isFinishing}
             error={finishError}
           />
         )}
+      </Box>
 
+      <Box
+        position="absolute"
+        top={termHeight - FOOTER_ROWS}
+        left={contentLeft}
+        width={contentWidth}
+        flexDirection="column"
+      >
         <Box height={1} />
         <Box height={1} flexDirection="row" width={contentWidth}>
           <Box flexGrow={1}>

package/src/components/onboarding/portfolio-step/broker-fields-panel.tsx

@@ -45,7 +45,7 @@ export function BrokerFieldsPanel({
 
         if (!isActive && value) {
           return (
-            <Box key={field.key} height={1}>
+            <Box key={field.key} height={1} flexDirection="row">
               <Text fg={colors.positive}>{"\u2713 "}</Text>
               <Text fg={colors.text}>{`${field.label}: ${formatBrokerFieldValue(field, value)}`}</Text>
             </Box>
@@ -58,7 +58,7 @@ export function BrokerFieldsPanel({
           return (
             <Box key={field.key} flexDirection="column">
               {index > 0 && <Box height={1} />}
-              <Box height={1}>
+              <Box height={1} flexDirection="row">
                 <Text fg={colors.text} attributes={TextAttributes.BOLD}>
                   {tf("Step {step}: ", { step: index + 1 })}
                 </Text>
@@ -97,7 +97,7 @@ export function BrokerFieldsPanel({
                     const selected = optionIdx === brokerSelectIdx;
                     return (
                       <Box key={option.value} flexDirection="column" backgroundColor={selected ? colors.selected : colors.bg}>
-                        <Box height={1}>
+                        <Box height={1} flexDirection="row">
                           <Text fg={selected ? colors.selectedText : colors.textDim}>{selected ? "\u25b8 " : "  "}</Text>
                           <Text
                             fg={selected ? colors.text : colors.textDim}