gloomberb 0.9.6 → 0.9.8

package/src/plugins/builtin/account-management/pane.tsx

@@ -1,20 +1,33 @@
-import { useCallback, useEffect, useMemo, useRef, useState } from "react";
-import { Button, ChoiceDialog } from "../../../components";
+import { useCallback, useEffect, useMemo, useRef, useState, type CSSProperties, type ReactNode } from "react";
+import { Button, ChoiceDialog, ConfirmDialog, Tabs } from "../../../components";
 import { useAppSelector } from "../../../state/app/context";
-import { colors } from "../../../theme/colors";
+import { useChartQueries, useFxRatesMap, useTickerFinancialsMap } from "../../../market-data/hooks";
+import { selectEffectiveExchangeRates } from "../../../utils/exchange-rate-map";
+import { blendHex, colors } from "../../../theme/colors";
 import type { PaneProps } from "../../../types/plugin";
-import { Box, ScrollBox, Text, Textarea, TextAttributes, type TextareaRenderable } from "../../../ui";
+import { Box, ScrollBox, Text, Textarea, TextAttributes, type TextareaRenderable, useRendererHost, useUiHost } from "../../../ui";
 import { useDialog, type AlertContext, type PromptContext } from "../../../ui/dialog";
+import { openNativeSelect, type NativeSelectElement } from "../../../components/ui/native-select";
 import { apiClient, type AccountProfile } from "../../../api-client";
 import { chatController } from "../chat/controller";
 import { CloudAuthNotice } from "../cloud/auth-actions";
-import { AccountTextField, CheckboxRow, FieldRow, PickerRow } from "./form-components";
 import {
-  BASE_FIELD_ORDER,
+  AccountTextField,
+  CheckboxRow,
+  FieldRow,
+  PublicAnalyticsGroup,
+  accountFieldLabelWidth,
+} from "./form-components";
+import {
   NO_PORTFOLIO_VALUE,
+  buildPublishedProfileAnalyticsPreview,
+  buildProfileAnalyticsPreview,
   buildPortfolioChoices,
+  computeCumulativeReturn,
   countPortfolioHoldings,
   emptyToNull,
+  formatPlan,
+  getPortfolioPositionTickers,
   portfolioOptionIds,
   profileToDraft,
   selectedPortfolioLabel,
@@ -24,11 +37,255 @@ import {
 import { PasswordChangeDialog } from "./password-dialog";
 import { useAccountManagementFooter } from "./footer";
 import { useAccountManagementKeyboard } from "./keyboard";
+import { buildTrackedCurrencies } from "../analytics/sector-model";
+import {
+  buildBenchmarkReturnSeries,
+  buildPortfolioChartTargets,
+  buildPortfolioReturnSeries,
+} from "../analytics/pane-model";
+import { computeDatedBeta } from "../analytics/metrics";
+import { useCloudSyncStatus } from "../../../sync/react";
+import { cloudSyncController } from "../../../sync/controller";
+import { setSyncedProfileAnalytics } from "../../../sync/profile-analytics";
+
+type AccountBusy = "profile" | "password" | "alerts" | "billing" | "delete" | null;
+type AccountTab = "profile" | "emails" | "pro" | "advanced";
+
+const CLOUD_UPGRADE_URL = "https://gloom.sh/cloud?upgrade=pro";
+
+const ACCOUNT_TABS: Array<{ label: string; value: AccountTab }> = [
+  { label: "Profile", value: "profile" },
+  { label: "Emails", value: "emails" },
+  { label: "Pro", value: "pro" },
+  { label: "Advanced", value: "advanced" },
+];
+
+const ACCOUNT_TAB_FIELD_ORDER: Record<AccountTab, AccountFieldKey[]> = {
+  profile: [
+    "profilePublic",
+    "acceptUnknownDms",
+    "username",
+    "name",
+    "company",
+    "title",
+    "publicEmail",
+    "xAccount",
+    "bio",
+    "sharedPortfolioId",
+  ],
+  emails: ["weeklyRoundupEnabled", "positionAlertsEnabled", "emailAlertsOffAction"],
+  pro: ["upgradeAction"],
+  advanced: ["passwordAction", "deleteAccountAction"],
+};
+
+const PLAN_COMPARISON_ROWS = [
+  { capability: "Market data", free: "Delayed", pro: "Real-time", proTone: "positive" },
+  { capability: "News", free: "12h delay", pro: "Real-time wire", proTone: "positive" },
+  { capability: "Cloud sync", free: "Included", pro: "Included", proTone: "neutral" },
+  { capability: "X data", free: "No", pro: "Included", proTone: "positive" },
+  { capability: "AI Screener", free: "No", pro: "Soon", proTone: "muted" },
+] as const;
+
+function PlanComparison({
+  width,
+  activePlan,
+  upgradeButton,
+}: {
+  width: number;
+  activePlan: "free" | "pro";
+  upgradeButton: ReactNode;
+}) {
+  const isDesktop = useUiHost().kind === "desktop-web";
+  const comparisonWidth = Math.min(width, 58);
+  const capabilityWidth = Math.max(13, Math.min(16, Math.floor(comparisonWidth * 0.32)));
+  const valueWidth = Math.max(10, Math.floor((comparisonWidth - capabilityWidth - 2) / 2));
+  const rowWidth = capabilityWidth + valueWidth * 2 + 2;
+  const proCellBg = blendHex(colors.panel, colors.selected, activePlan === "pro" ? 0.42 : 0.26);
+  const freeFg = activePlan === "free" ? colors.text : colors.textDim;
+  const proHeadingFg = activePlan === "pro" ? colors.textBright : colors.text;
+  const proValueColor = (tone: typeof PLAN_COMPARISON_ROWS[number]["proTone"]) => {
+    if (tone === "positive") return colors.positive;
+    if (tone === "muted") return colors.textMuted;
+    return colors.text;
+  };
+
+  if (isDesktop) {
+    const gridStyle: CSSProperties = {
+      display: "grid",
+      gridTemplateColumns: width >= 86
+        ? "minmax(220px, 1fr) minmax(120px, 0.42fr) minmax(300px, 1.05fr)"
+        : "minmax(150px, 0.95fr) minmax(86px, 0.42fr) minmax(180px, 1fr)",
+      columnGap: width >= 86 ? "clamp(30px, 5vw, 72px)" : "22px",
+      alignItems: "center",
+      width: "100%",
+    };
+    const desktopProBg = blendHex(colors.panel, colors.selected, activePlan === "pro" ? 0.34 : 0.24);
+    const desktopProAltBg = blendHex(colors.panel, colors.selected, activePlan === "pro" ? 0.39 : 0.28);
+    const desktopText = {
+      lineHeight: "22px",
+      fontSize: "15px",
+    } satisfies CSSProperties;
+    return (
+      <Box
+        flexDirection="column"
+        width="100%"
+        maxWidth={width >= 86 ? "980px" : "100%"}
+        style={{
+          marginTop: 18,
+          paddingLeft: width >= 86 ? 12 : 4,
+          paddingRight: width >= 86 ? 10 : 4,
+        }}
+      >
+        <Box
+          style={{
+            ...gridStyle,
+            marginBottom: 12,
+          }}
+        >
+          <Text fg={colors.textDim} style={{ ...desktopText, fontWeight: 650 }}>
+            Capability
+          </Text>
+          <Text
+            fg={activePlan === "free" ? colors.textBright : colors.textDim}
+            attributes={activePlan === "free" ? TextAttributes.BOLD : 0}
+            style={{ ...desktopText, fontWeight: activePlan === "free" ? 700 : 650 }}
+          >
+            Free
+          </Text>
+          <Box flexDirection="row" alignItems="baseline" gap={1}>
+            <Text
+              fg={colors.borderFocused}
+              attributes={TextAttributes.BOLD}
+              style={{ ...desktopText, fontWeight: 750 }}
+            >
+              Pro
+            </Text>
+            <Text fg={colors.textBright} style={desktopText}>
+              $49/mo
+            </Text>
+          </Box>
+        </Box>
+        {PLAN_COMPARISON_ROWS.map((row, index) => {
+          const first = index === 0;
+          const last = index === PLAN_COMPARISON_ROWS.length - 1;
+          return (
+            <Box
+              key={row.capability}
+              style={{
+                ...gridStyle,
+                minHeight: 48,
+              }}
+            >
+              <Box flexDirection="row" alignItems="center" style={{ minWidth: 0 }}>
+                <Box
+                  aria-hidden="true"
+                  style={{
+                    width: 8,
+                    height: 8,
+                    borderRadius: 999,
+                    marginRight: 18,
+                    flexShrink: 0,
+                    backgroundColor: colors.borderFocused,
+                    boxShadow: `0 0 0 2px ${blendHex(colors.bg, colors.borderFocused, 0.14)}`,
+                  }}
+                />
+                <Text fg={colors.textBright} style={{ ...desktopText, fontWeight: 520 }}>
+                  {row.capability}
+                </Text>
+              </Box>
+              <Text fg={freeFg} style={desktopText}>
+                {row.free}
+              </Text>
+              <Box
+                flexDirection="row"
+                alignItems="center"
+                backgroundColor={index % 2 === 0 ? desktopProBg : desktopProAltBg}
+                style={{
+                  minHeight: 48,
+                  paddingLeft: width >= 86 ? 24 : 16,
+                  paddingRight: width >= 86 ? 24 : 14,
+                  borderTopLeftRadius: first ? 2 : 0,
+                  borderTopRightRadius: first ? 2 : 0,
+                  borderBottomLeftRadius: last ? 2 : 0,
+                  borderBottomRightRadius: last ? 2 : 0,
+                  boxShadow: "inset 0 1px 0 rgba(255,255,255,0.025)",
+                }}
+              >
+                <Text
+                  fg={proValueColor(row.proTone)}
+                  attributes={row.proTone === "positive" ? TextAttributes.BOLD : 0}
+                  style={{
+                    ...desktopText,
+                    fontWeight: row.proTone === "positive" ? 720 : 560,
+                  }}
+                >
+                  {row.pro}
+                </Text>
+              </Box>
+            </Box>
+          );
+        })}
+        <Box
+          style={{
+            ...gridStyle,
+            marginTop: 14,
+          }}
+        >
+          <Box />
+          <Box />
+          <Box flexDirection="row" justifyContent="center">
+            {upgradeButton}
+          </Box>
+        </Box>
+      </Box>
+    );
+  }
+
+  return (
+    <Box flexDirection="column" width={rowWidth}>
+      <Box height={1} flexDirection="row" gap={1}>
+        <Text width={capabilityWidth} fg={colors.textDim}>Capability</Text>
+        <Text width={valueWidth} fg={activePlan === "free" ? colors.textBright : colors.textDim} attributes={activePlan === "free" ? TextAttributes.BOLD : 0}>
+          Free
+        </Text>
+        <Box width={valueWidth} backgroundColor={proCellBg} paddingX={1}>
+          <Text fg={proHeadingFg} attributes={TextAttributes.BOLD}>
+            Pro $49/mo
+          </Text>
+        </Box>
+      </Box>
+      {PLAN_COMPARISON_ROWS.map((row) => (
+        <Box key={row.capability} height={1} flexDirection="row" gap={1}>
+          <Text width={capabilityWidth} fg={colors.textDim}>{row.capability}</Text>
+          <Text width={valueWidth} fg={freeFg}>{row.free}</Text>
+          <Box width={valueWidth} backgroundColor={proCellBg} paddingX={1}>
+            <Text fg={proValueColor(row.proTone)} attributes={row.proTone === "positive" ? TextAttributes.BOLD : 0}>
+              {row.pro}
+            </Text>
+          </Box>
+        </Box>
+      ))}
+      <Box height={1} flexDirection="row" gap={1}>
+        <Box width={capabilityWidth} />
+        <Box width={valueWidth} />
+        <Box width={valueWidth} flexDirection="row" paddingLeft={1}>
+          {upgradeButton}
+        </Box>
+      </Box>
+    </Box>
+  );
+}
 
 export function AccountManagementPane({ focused, width, height }: PaneProps) {
   const dialog = useDialog();
-  const portfolios = useAppSelector((state) => state.config.portfolios);
+  const renderer = useRendererHost();
+  const isDesktop = useUiHost().kind === "desktop-web";
+  const config = useAppSelector((state) => state.config);
+  const portfolios = config.portfolios;
+  const baseCurrency = config.baseCurrency;
   const tickers = useAppSelector((state) => state.tickers);
+  const cachedFinancials = useAppSelector((state) => state.financials);
+  const cachedExchangeRates = useAppSelector((state) => state.exchangeRates);
   const [sessionMarker, setSessionMarker] = useState(() => {
     const snapshot = chatController.getSnapshot();
     return `${apiClient.getSessionToken() ?? ""}:${snapshot.user?.id ?? ""}:${snapshot.user?.username ?? ""}`;
@@ -38,23 +295,163 @@ export function AccountManagementPane({ focused, width, height }: PaneProps) {
   const [draft, setDraft] = useState<AccountDraft>(() => profileToDraft(null));
   const [activeField, setActiveField] = useState<AccountFieldKey>("username");
   const [message, setMessage] = useState<{ tone: "info" | "success" | "error"; text: string } | null>(null);
-  const [busy, setBusy] = useState<"profile" | "password" | null>(null);
+  const [busy, setBusy] = useState<AccountBusy>(null);
+  const [activeTab, setActiveTab] = useState<AccountTab>("profile");
+  const syncStatus = useCloudSyncStatus();
   const bioRef = useRef<TextareaRenderable | null>(null);
+  const portfolioNativeSelectRef = useRef<NativeSelectElement | null>(null);
+  const refreshedSyncRevisionRef = useRef<number | null>(null);
   const draftRef = useRef(draft);
   draftRef.current = draft;
 
   const formWidth = Math.max(24, Math.min(70, width - 2));
+  const contentWidth = activeTab === "pro" && isDesktop ? Math.max(formWidth, width - 2) : formWidth;
   const twoColumns = formWidth >= 60;
   const fieldWidth = twoColumns ? Math.max(22, Math.floor((formWidth - 3) / 2)) : Math.max(18, Math.min(46, formWidth - 2));
-  const fullFieldWidth = Math.max(18, Math.min(54, formWidth - 2));
+  const formLabelWidth = accountFieldLabelWidth(formWidth);
   const bodyHeight = Math.max(5, height);
-  const fieldOrder = BASE_FIELD_ORDER;
+  const fieldOrder = ACCOUNT_TAB_FIELD_ORDER[activeTab];
 
   const portfolioHoldingCounts = useMemo(() => countPortfolioHoldings(tickers), [tickers]);
   const portfolioChoices = useMemo(
     () => buildPortfolioChoices(portfolios, portfolioHoldingCounts),
     [portfolioHoldingCounts, portfolios],
   );
+  const selectedAnalyticsPortfolio = useMemo(
+    () => portfolios.find((portfolio) => portfolio.id === draft.sharedPortfolioId) ?? null,
+    [draft.sharedPortfolioId, portfolios],
+  );
+  const portfolioTickers = useMemo(
+    () => draft.sharedPortfolioId ? getPortfolioPositionTickers(tickers, draft.sharedPortfolioId) : [],
+    [draft.sharedPortfolioId, tickers],
+  );
+  const marketFinancials = useTickerFinancialsMap(portfolioTickers);
+  const financials = useMemo(() => {
+    const merged = new Map(cachedFinancials);
+    for (const [symbol, data] of marketFinancials) {
+      merged.set(symbol, data);
+    }
+    return merged;
+  }, [cachedFinancials, marketFinancials]);
+  const trackedCurrencies = useMemo(
+    () => buildTrackedCurrencies(portfolioTickers, financials, baseCurrency),
+    [baseCurrency, financials, portfolioTickers],
+  );
+  const fetchedExchangeRates = useFxRatesMap(trackedCurrencies);
+  const effectiveExchangeRates = selectEffectiveExchangeRates(fetchedExchangeRates, cachedExchangeRates);
+  const chartTargets = useMemo(
+    () => buildPortfolioChartTargets(portfolioTickers),
+    [portfolioTickers],
+  );
+  const chartRequests = useMemo(
+    () => chartTargets.map((target) => target.request),
+    [chartTargets],
+  );
+  const chartEntries = useChartQueries(chartRequests);
+  const spyRequest = useMemo(
+    () => ({
+      instrument: { symbol: "SPY", exchange: "" },
+      bufferRange: "1Y" as const,
+      granularity: "range" as const,
+    }),
+    [],
+  );
+  const spyChartRequests = useMemo(
+    () => portfolioTickers.length > 0 ? [spyRequest] : [],
+    [portfolioTickers.length, spyRequest],
+  );
+  const spyChartEntries = useChartQueries(spyChartRequests);
+  const columnContext = useMemo(() => ({
+    activeTab: draft.sharedPortfolioId || undefined,
+    baseCurrency,
+    exchangeRates: effectiveExchangeRates,
+    now: Date.now(),
+  }), [baseCurrency, draft.sharedPortfolioId, effectiveExchangeRates]);
+  const portfolioReturnSeries = useMemo(
+    () => buildPortfolioReturnSeries({
+      chartTargets,
+      chartEntries,
+      financials,
+      columnContext,
+    }),
+    [chartEntries, chartTargets, columnContext, financials],
+  );
+  const spyReturnSeries = useMemo(
+    () => buildBenchmarkReturnSeries(spyRequest, spyChartEntries),
+    [spyChartEntries, spyRequest],
+  );
+  const oneYearReturn = useMemo(
+    () => portfolioReturnSeries ? computeCumulativeReturn(portfolioReturnSeries) : null,
+    [portfolioReturnSeries],
+  );
+  const beta = useMemo(
+    () => (portfolioReturnSeries && spyReturnSeries ? computeDatedBeta(portfolioReturnSeries, spyReturnSeries) : null),
+    [portfolioReturnSeries, spyReturnSeries],
+  );
+  const localAnalyticsPreview = useMemo(
+    () => buildProfileAnalyticsPreview({
+      beta,
+      portfolio: selectedAnalyticsPortfolio,
+      portfolioTickers,
+      selectedPortfolioId: draft.sharedPortfolioId,
+      oneYearReturn,
+    }),
+    [
+      beta,
+      draft.sharedPortfolioId,
+      portfolioTickers,
+      selectedAnalyticsPortfolio,
+      oneYearReturn,
+    ],
+  );
+  useEffect(() => {
+    const portfolioId = selectedAnalyticsPortfolio?.id;
+    if (!portfolioId) return;
+    const changed = setSyncedProfileAnalytics(portfolioId, localAnalyticsPreview.publicAnalytics);
+    if (changed) cloudSyncController.schedulePush("profile-analytics");
+  }, [
+    localAnalyticsPreview.publicAnalytics?.oneYearReturn,
+    localAnalyticsPreview.publicAnalytics?.spyBeta,
+    selectedAnalyticsPortfolio?.id,
+  ]);
+  const publicAnalyticsPreview = useMemo(
+    () => buildPublishedProfileAnalyticsPreview({
+      analytics: profile?.portfolioAnalytics ?? null,
+      draftProfilePublic: draft.profilePublic,
+      portfolio: selectedAnalyticsPortfolio,
+      profileLoaded: !!profile,
+      savedProfilePublic: profile?.profilePublic === true,
+      savedSharedPortfolioId: profile?.sharedPortfolioId ?? "",
+      selectedPortfolioId: draft.sharedPortfolioId,
+      syncing: syncStatus.phase === "syncing",
+    }),
+    [
+      draft.profilePublic,
+      draft.sharedPortfolioId,
+      profile,
+      selectedAnalyticsPortfolio,
+      syncStatus.phase,
+    ],
+  );
+  const profileAnalyticsDetail = useMemo(() => {
+    if (!draft.sharedPortfolioId) return "No public portfolio analytics";
+    if (!profile) return "Loading published metrics";
+    if (
+      draft.profilePublic !== profile.profilePublic
+      || draft.sharedPortfolioId !== (profile.sharedPortfolioId ?? "")
+    ) {
+      return "Save profile to update published metrics";
+    }
+    if (profile.profilePublic !== true) return "Public profile is off";
+    if (syncStatus.phase === "syncing") return "Syncing published metrics";
+    if (!profile.portfolioAnalytics) return "Waiting for published metrics";
+    return "Published public metrics";
+  }, [
+    draft.profilePublic,
+    draft.sharedPortfolioId,
+    profile,
+    syncStatus.phase,
+  ]);
 
   useEffect(() => {
     const unsubscribe = chatController.subscribe((snapshot) => {
@@ -90,9 +487,26 @@ export function AccountManagementPane({ focused, width, height }: PaneProps) {
     void loadProfile();
   }, [loadProfile, sessionMarker]);
 
+  useEffect(() => {
+    if (!hasSession || !apiClient.getSessionToken()) return;
+    if (syncStatus.phase !== "synced" || syncStatus.revision == null) return;
+    if (refreshedSyncRevisionRef.current === syncStatus.revision) return;
+    refreshedSyncRevisionRef.current = syncStatus.revision;
+    let cancelled = false;
+    void (async () => {
+      const nextProfile = await apiClient.getAccountProfile().catch(() => null);
+      if (cancelled || !nextProfile) return;
+      setProfile(nextProfile);
+      await chatController.refreshSession().catch(() => {});
+    })();
+    return () => {
+      cancelled = true;
+    };
+  }, [hasSession, syncStatus.phase, syncStatus.revision]);
+
   useEffect(() => {
     if (!fieldOrder.includes(activeField)) {
-      setActiveField("username");
+      setActiveField(fieldOrder[0] ?? "username");
     }
   }, [activeField, fieldOrder]);
 
@@ -100,6 +514,12 @@ export function AccountManagementPane({ focused, width, height }: PaneProps) {
     setDraft((current) => ({ ...current, [key]: value }));
   }, []);
 
+  const selectTab = useCallback((tab: string) => {
+    const nextTab = tab as AccountTab;
+    setActiveTab(nextTab);
+    setActiveField(ACCOUNT_TAB_FIELD_ORDER[nextTab][0] ?? "username");
+  }, []);
+
   const openPasswordDialog = useCallback(() => {
     if (busy) return;
     setActiveField("passwordAction");
@@ -137,7 +557,7 @@ export function AccountManagementPane({ focused, width, height }: PaneProps) {
       content: (context: PromptContext<string>) => (
         <ChoiceDialog
           {...context}
-          title="Shared Portfolio"
+          title="Public Stats"
           choices={portfolioChoices}
           selectedChoiceId={currentPortfolioChoiceId}
         />
@@ -147,6 +567,15 @@ export function AccountManagementPane({ focused, width, height }: PaneProps) {
     setDraftValue("sharedPortfolioId", selected === NO_PORTFOLIO_VALUE ? "" : selected);
   }, [dialog, portfolioChoices, setDraftValue]);
 
+  const openPortfolioPicker = useCallback(async () => {
+    setActiveField("sharedPortfolioId");
+    if (portfolioNativeSelectRef.current) {
+      openNativeSelect(portfolioNativeSelectRef.current);
+      return;
+    }
+    await openPortfolioDialog();
+  }, [openPortfolioDialog]);
+
   const cycleField = useCallback((delta: number) => {
     setActiveField((current) => {
       const index = fieldOrder.indexOf(current);
@@ -186,6 +615,8 @@ export function AccountManagementPane({ focused, width, height }: PaneProps) {
         xAccount: emptyToNull(current.xAccount),
         sharedPortfolioId: emptyToNull(current.sharedPortfolioId),
         acceptUnknownDms: current.acceptUnknownDms,
+        weeklyRoundupEnabled: current.weeklyRoundupEnabled,
+        positionAlertsEnabled: current.positionAlertsEnabled,
       });
       setProfile(nextProfile);
       setDraft(profileToDraft(nextProfile));
@@ -201,12 +632,92 @@ export function AccountManagementPane({ focused, width, height }: PaneProps) {
     }
   }, []);
 
+  const turnOffEmailAlerts = useCallback(async () => {
+    setActiveField("emailAlertsOffAction");
+    setBusy("alerts");
+    setMessage({ tone: "info", text: "Turning off email alerts..." });
+    try {
+      const settings = await apiClient.updateSyncSettings({
+        weeklyRoundupEnabled: false,
+        positionAlertsEnabled: false,
+      });
+      setDraft((current) => ({
+        ...current,
+        weeklyRoundupEnabled: settings.weeklyRoundupEnabled,
+        positionAlertsEnabled: settings.positionAlertsEnabled,
+      }));
+      const nextProfile = await apiClient.getAccountProfile().catch(() => null);
+      if (nextProfile) setProfile(nextProfile);
+      setMessage({ tone: "success", text: "Email alerts are off." });
+    } catch (error) {
+      setMessage({
+        tone: "error",
+        text: error instanceof Error ? error.message : "Failed to update alert settings.",
+      });
+    } finally {
+      setBusy(null);
+    }
+  }, []);
+
+  const openUpgrade = useCallback(() => {
+    setActiveField("upgradeAction");
+    setBusy("billing");
+    setMessage({ tone: "info", text: "Opening Pro upgrade..." });
+    void renderer.openExternal(CLOUD_UPGRADE_URL)
+      .then(() => setMessage(null))
+      .catch((error) => {
+        setMessage({
+          tone: "error",
+          text: error instanceof Error ? error.message : "Failed to open upgrade page.",
+        });
+      })
+      .finally(() => setBusy(null));
+  }, [renderer]);
+
+  const deleteAccount = useCallback(async () => {
+    setActiveField("deleteAccountAction");
+    if (busy) return;
+    const confirmed = await dialog.prompt<boolean>({
+      closeOnClickOutside: false,
+      content: (context: PromptContext<boolean>) => (
+        <ConfirmDialog
+          {...context}
+          title="Delete Account"
+          body={[
+            "Delete your Gloom Cloud account?",
+            "This removes cloud profile, chat, sync, and billing-linked account data.",
+          ]}
+          confirmLabel="Delete Account"
+          confirmVariant="danger"
+        />
+      ),
+    }).catch(() => false);
+    if (!confirmed) return;
+
+    setBusy("delete");
+    setMessage({ tone: "info", text: "Deleting account..." });
+    try {
+      await apiClient.deleteAccount();
+      setProfile(null);
+      setDraft(profileToDraft(null));
+      setHasSession(false);
+      await chatController.refreshSession().catch(() => {});
+      setMessage({ tone: "success", text: "Account deleted." });
+    } catch (error) {
+      setMessage({
+        tone: "error",
+        text: error instanceof Error ? error.message : "Failed to delete account.",
+      });
+    } finally {
+      setBusy(null);
+    }
+  }, [busy, dialog]);
+
   useAccountManagementFooter({
     busy,
     draft,
     hasSession,
     message,
-    openPasswordDialog,
     profile,
     saveProfile,
   });
@@ -215,12 +726,15 @@ export function AccountManagementPane({ focused, width, height }: PaneProps) {
     activeField,
     cycleField,
     cyclePortfolio,
+    deleteAccount,
     draftRef,
     focused,
     openPasswordDialog,
-    openPortfolioDialog,
+    openPortfolioDialog: openPortfolioPicker,
+    openUpgrade,
     saveProfile,
     setDraftValue,
+    turnOffEmailAlerts,
   });
 
   if (!hasSession && !apiClient.getSessionToken()) {
@@ -232,149 +746,264 @@ export function AccountManagementPane({ focused, width, height }: PaneProps) {
   }
 
   return (
-    <Box flexDirection="column" width={width} height={height} paddingX={1}>
-      <ScrollBox height={bodyHeight} scrollY focusable={false}>
-        <Box flexDirection="column" width={formWidth} gap={1}>
-          <FieldRow twoColumns={twoColumns}>
-            <AccountTextField
-              fieldKey="username"
-              label="Username"
-              value={draft.username}
-              placeholder="username"
-              activeField={activeField}
-              focused={focused}
-              width={fieldWidth}
-              onFocus={setActiveField}
-              onChange={(value) => setDraftValue("username", value)}
-              onSubmit={() => { void saveProfile(); }}
-            />
-            <AccountTextField
-              fieldKey="name"
-              label="Full Name"
-              value={draft.name}
-              placeholder="Full name"
-              activeField={activeField}
-              focused={focused}
-              width={fieldWidth}
-              onFocus={setActiveField}
-              onChange={(value) => setDraftValue("name", value)}
-              onSubmit={() => { void saveProfile(); }}
-            />
-          </FieldRow>
-
-          <FieldRow twoColumns={twoColumns}>
-            <AccountTextField
-              fieldKey="company"
-              label="Company"
-              value={draft.company}
-              placeholder="Company"
-              activeField={activeField}
-              focused={focused}
-              width={fieldWidth}
-              onFocus={setActiveField}
-              onChange={(value) => setDraftValue("company", value)}
-              onSubmit={() => { void saveProfile(); }}
-            />
-            <AccountTextField
-              fieldKey="title"
-              label="Title"
-              value={draft.title}
-              placeholder="Title"
-              activeField={activeField}
-              focused={focused}
-              width={fieldWidth}
-              onFocus={setActiveField}
-              onChange={(value) => setDraftValue("title", value)}
-              onSubmit={() => { void saveProfile(); }}
-            />
-          </FieldRow>
-
-          <FieldRow twoColumns={twoColumns}>
-            <AccountTextField
-              fieldKey="publicEmail"
-              label="Public Email"
-              value={draft.publicEmail}
-              placeholder="public@example.com"
-              activeField={activeField}
-              focused={focused}
-              width={fieldWidth}
-              onFocus={setActiveField}
-              onChange={(value) => setDraftValue("publicEmail", value)}
-              onSubmit={() => { void saveProfile(); }}
-            />
-            <AccountTextField
-              fieldKey="xAccount"
-              label="X Account"
-              value={draft.xAccount}
-              placeholder="handle"
-              activeField={activeField}
-              focused={focused}
-              width={fieldWidth}
-              onFocus={setActiveField}
-              onChange={(value) => setDraftValue("xAccount", value)}
-              onSubmit={() => { void saveProfile(); }}
-            />
-          </FieldRow>
-
-          <Box flexDirection="column" onMouseDown={() => setActiveField("bio")}>
-            <Text fg={activeField === "bio" ? colors.textBright : colors.textDim} attributes={activeField === "bio" ? TextAttributes.BOLD : 0}>
-              {activeField === "bio" ? "> Bio" : "  Bio"}
-            </Text>
-            <Box height={3} width={fullFieldWidth} border borderColor={activeField === "bio" ? colors.borderFocused : colors.border} backgroundColor={colors.panel}>
-              <Textarea
-                key={`bio:${profile?.updatedAt ?? "empty"}`}
-                ref={bioRef}
-                initialValue={draft.bio}
-                placeholder="Short profile bio"
-                focused={focused && activeField === "bio"}
-                textColor={colors.text}
-                placeholderColor={colors.textDim}
-                backgroundColor={colors.panel}
-                flexGrow={1}
-                wrapText
-                onInput={(value: string) => setDraftValue("bio", value)}
+    <Box flexDirection="column" width={width} height={height} paddingX={1} gap={1}>
+      <Tabs
+        tabs={ACCOUNT_TABS}
+        activeValue={activeTab}
+        onSelect={selectTab}
+        focused={focused}
+        variant="pill"
+        compact
+        keyboardNavigation={false}
+      />
+      <ScrollBox height={Math.max(3, bodyHeight - 2)} scrollY focusable={false}>
+        <Box flexDirection="column" width={contentWidth} gap={1}>
+          {activeTab === "profile" ? (
+            <>
+              <FieldRow twoColumns={twoColumns}>
+                <CheckboxRow
+                  label="Public Profile"
+                  checked={draft.profilePublic}
+                  active={activeField === "profilePublic"}
+                  width={fieldWidth}
+                  onFocus={() => setActiveField("profilePublic")}
+                  onChange={(checked) => setDraftValue("profilePublic", checked)}
+                />
+                <CheckboxRow
+                  label="Incoming DMs"
+                  checked={draft.acceptUnknownDms}
+                  active={activeField === "acceptUnknownDms"}
+                  width={fieldWidth}
+                  onFocus={() => setActiveField("acceptUnknownDms")}
+                  onChange={(checked) => setDraftValue("acceptUnknownDms", checked)}
+                />
+              </FieldRow>
+
+              <FieldRow twoColumns={twoColumns}>
+                <AccountTextField
+                  fieldKey="username"
+                  label="Username"
+                  value={draft.username}
+                  placeholder="username"
+                  activeField={activeField}
+                  focused={focused}
+                  width={fieldWidth}
+                  onFocus={setActiveField}
+                  onChange={(value) => setDraftValue("username", value)}
+                  onSubmit={() => { void saveProfile(); }}
+                />
+                <AccountTextField
+                  fieldKey="name"
+                  label="Full Name"
+                  value={draft.name}
+                  placeholder="Full name"
+                  activeField={activeField}
+                  focused={focused}
+                  width={fieldWidth}
+                  onFocus={setActiveField}
+                  onChange={(value) => setDraftValue("name", value)}
+                  onSubmit={() => { void saveProfile(); }}
+                />
+              </FieldRow>
+
+              <FieldRow twoColumns={twoColumns}>
+                <AccountTextField
+                  fieldKey="company"
+                  label="Company"
+                  value={draft.company}
+                  placeholder="Company"
+                  activeField={activeField}
+                  focused={focused}
+                  width={fieldWidth}
+                  onFocus={setActiveField}
+                  onChange={(value) => setDraftValue("company", value)}
+                  onSubmit={() => { void saveProfile(); }}
+                />
+                <AccountTextField
+                  fieldKey="title"
+                  label="Title"
+                  value={draft.title}
+                  placeholder="Title"
+                  activeField={activeField}
+                  focused={focused}
+                  width={fieldWidth}
+                  onFocus={setActiveField}
+                  onChange={(value) => setDraftValue("title", value)}
+                  onSubmit={() => { void saveProfile(); }}
+                />
+              </FieldRow>
+
+              <FieldRow twoColumns={twoColumns}>
+                <AccountTextField
+                  fieldKey="publicEmail"
+                  label="Public Email"
+                  value={draft.publicEmail}
+                  placeholder="public@example.com"
+                  activeField={activeField}
+                  focused={focused}
+                  width={fieldWidth}
+                  onFocus={setActiveField}
+                  onChange={(value) => setDraftValue("publicEmail", value)}
+                  onSubmit={() => { void saveProfile(); }}
+                />
+                <AccountTextField
+                  fieldKey="xAccount"
+                  label="X Account"
+                  value={draft.xAccount}
+                  placeholder="handle"
+                  activeField={activeField}
+                  focused={focused}
+                  width={fieldWidth}
+                  onFocus={setActiveField}
+                  onChange={(value) => setDraftValue("xAccount", value)}
+                  onSubmit={() => { void saveProfile(); }}
+                />
+              </FieldRow>
+
+              <Box
+                flexDirection="row"
+                width={formWidth}
+                gap={1}
+                onMouseDown={() => setActiveField("bio")}
+              >
+                <Text
+                  width={formLabelWidth}
+                  fg={activeField === "bio" ? colors.textBright : colors.textDim}
+                  attributes={activeField === "bio" ? TextAttributes.BOLD : 0}
+                >
+                  {activeField === "bio" ? "> Bio" : "  Bio"}
+                </Text>
+                <Box
+                  height={3}
+                  width={Math.max(18, formWidth - formLabelWidth - 1)}
+                  border
+                  borderColor={activeField === "bio" ? colors.borderFocused : colors.border}
+                  backgroundColor={colors.panel}
+                  style={{
+                    borderRadius: 6,
+                    overflow: "hidden",
+                  }}
+                >
+                  <Textarea
+                    key={`bio:${profile?.updatedAt ?? "empty"}`}
+                    ref={bioRef}
+                    initialValue={draft.bio}
+                    placeholder="Short profile bio"
+                    focused={focused && activeField === "bio"}
+                    textColor={colors.text}
+                    placeholderColor={colors.textDim}
+                    backgroundColor={colors.panel}
+                    flexGrow={1}
+                    wrapText
+                    onInput={(value: string) => setDraftValue("bio", value)}
+                  />
+                </Box>
+              </Box>
+
+              <PublicAnalyticsGroup
+                preview={publicAnalyticsPreview}
+                choices={portfolioChoices}
+                value={draft.sharedPortfolioId || NO_PORTFOLIO_VALUE}
+                label={selectedPortfolioLabel(portfolios, draft.sharedPortfolioId)}
+                detail={profileAnalyticsDetail}
+                active={activeField === "sharedPortfolioId"}
+                width={formWidth}
+                disclaimer={draft.sharedPortfolioId ? "Only 1Y return and SPY Beta are shared. Positions are not shared." : null}
+                selectRef={(element) => {
+                  portfolioNativeSelectRef.current = element;
+                }}
+                onFocus={() => setActiveField("sharedPortfolioId")}
+                onSelect={(selected) => {
+                  setActiveField("sharedPortfolioId");
+                  setDraftValue("sharedPortfolioId", selected === NO_PORTFOLIO_VALUE ? "" : selected);
+                }}
+                onOpen={() => { void openPortfolioPicker(); }}
               />
-            </Box>
-          </Box>
 
-          <FieldRow twoColumns={twoColumns}>
-            <CheckboxRow
-              label="Public Profile"
-              checked={draft.profilePublic}
-              active={activeField === "profilePublic"}
-              width={fieldWidth}
-              onFocus={() => setActiveField("profilePublic")}
-              onChange={(checked) => setDraftValue("profilePublic", checked)}
-            />
-            <CheckboxRow
-              label="Incoming DMs"
-              checked={draft.acceptUnknownDms}
-              active={activeField === "acceptUnknownDms"}
-              width={fieldWidth}
-              onFocus={() => setActiveField("acceptUnknownDms")}
-              onChange={(checked) => setDraftValue("acceptUnknownDms", checked)}
-            />
-          </FieldRow>
-
-          <PickerRow
-            label="Profile Analytics"
-            value={selectedPortfolioLabel(portfolios, draft.sharedPortfolioId)}
-            detail={draft.sharedPortfolioId ? "Shares portfolio YTD % + SPY Beta" : "No public portfolio analytics"}
-            active={activeField === "sharedPortfolioId"}
-            width={formWidth}
-            onFocus={() => setActiveField("sharedPortfolioId")}
-            onOpen={() => { void openPortfolioDialog(); }}
-          />
-
-          <Box flexDirection="row" gap={1}>
-            <Button label={busy === "profile" ? "Saving..." : "Save Profile"} variant="primary" onPress={() => { void saveProfile(); }} disabled={!!busy} />
-            <Button
-              label="Change Password"
-              active={activeField === "passwordAction"}
-              onPress={openPasswordDialog}
-              disabled={!!busy}
-            />
-          </Box>
+              <Box flexDirection="row" gap={1}>
+                <Button label={busy === "profile" ? "Saving..." : "Save Profile"} variant="primary" onPress={() => { void saveProfile(); }} disabled={!!busy} />
+              </Box>
+            </>
+          ) : null}
+
+          {activeTab === "emails" ? (
+            <>
+              <CheckboxRow
+                label="Weekly Roundup"
+                checked={draft.weeklyRoundupEnabled}
+                active={activeField === "weeklyRoundupEnabled"}
+                description="Friday after market close."
+                width={formWidth}
+                onFocus={() => setActiveField("weeklyRoundupEnabled")}
+                onChange={(checked) => setDraftValue("weeklyRoundupEnabled", checked)}
+              />
+              <CheckboxRow
+                label="Smart Alerts"
+                checked={draft.positionAlertsEnabled}
+                active={activeField === "positionAlertsEnabled"}
+                description="Unusual portfolio or watchlist moves."
+                width={formWidth}
+                onFocus={() => setActiveField("positionAlertsEnabled")}
+                onChange={(checked) => setDraftValue("positionAlertsEnabled", checked)}
+              />
+              <Box flexDirection="row" gap={1} style={{ marginTop: 8 }}>
+                <Button
+                  label={busy === "alerts" ? "Turning Off..." : "Turn Off Both"}
+                  active={activeField === "emailAlertsOffAction"}
+                  onPress={() => { void turnOffEmailAlerts(); }}
+                  disabled={!!busy || (!draft.weeklyRoundupEnabled && !draft.positionAlertsEnabled)}
+                />
+                <Button label={busy === "profile" ? "Saving..." : "Save"} variant="primary" onPress={() => { void saveProfile(); }} disabled={!!busy} />
+              </Box>
+            </>
+          ) : null}
+
+          {activeTab === "pro" ? (
+            <>
+              <Box flexDirection="row" gap={1}>
+                <Text fg={colors.textDim}>Status</Text>
+                <Text fg={profile?.plan === "pro" ? colors.positive : colors.textBright} attributes={TextAttributes.BOLD}>
+                  {formatPlan(profile?.plan)}
+                </Text>
+                {profile?.email ? <Text fg={colors.textMuted}>{profile.email}</Text> : null}
+              </Box>
+              <PlanComparison
+                width={contentWidth}
+                activePlan={profile?.plan === "pro" ? "pro" : "free"}
+                upgradeButton={(
+                  <Button
+                    label={profile?.plan === "pro" ? "Manage Pro" : busy === "billing" ? "Opening..." : "Upgrade to Pro"}
+                    variant={profile?.plan === "pro" ? "secondary" : "primary"}
+                    width={isDesktop ? 28 : undefined}
+                    height={isDesktop ? "28px" : undefined}
+                    active={activeField === "upgradeAction"}
+                    onPress={openUpgrade}
+                    disabled={!!busy}
+                  />
+                )}
+              />
+            </>
+          ) : null}
+
+          {activeTab === "advanced" ? (
+            <>
+              <Box flexDirection="row" gap={1}>
+                <Button
+                  label="Change Password"
+                  active={activeField === "passwordAction"}
+                  onPress={openPasswordDialog}
+                  disabled={!!busy}
+                />
+                <Button
+                  label={busy === "delete" ? "Deleting..." : "Delete Account"}
+                  variant="danger"
+                  active={activeField === "deleteAccountAction"}
+                  onPress={() => { void deleteAccount(); }}
+                  disabled={!!busy}
+                />
+              </Box>
+            </>
+          ) : null}
           <Box height={1} />
         </Box>
       </ScrollBox>