gloomberb 0.16.3 → 0.16.4

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

@@ -23,6 +23,21 @@ export const ONBOARDING_DESKTOP = {
   buttonHeight: "28px",
 } as const;
 
+/** Cells the terminal card spends on its border and padding: what its content does not get. */
+export const TERMINAL_CARD_INSET = { columns: 6, rows: 4 } as const;
+
+/** The terminal card's size in cells: what a step asks for, clamped to what the viewport leaves. */
+export function terminalCardSize(viewport: { width: number; height: number }, width: number, height: number) {
+  const overlayHeight = Math.max(1, viewport.height - 1);
+  const availableWidth = Math.max(1, viewport.width - 4);
+  const availableHeight = Math.max(1, overlayHeight - 1);
+  return {
+    overlayHeight,
+    width: Math.min(Math.max(42, Math.min(width, availableWidth)), availableWidth),
+    height: Math.min(Math.max(10, Math.min(height, availableHeight)), availableHeight),
+  };
+}
+
 export function OnboardingModal({
   children,
   width = 66,
@@ -81,11 +96,7 @@ export function OnboardingModal({
     );
   }
 
-  const overlayHeight = Math.max(1, viewport.height - 1);
-  const availableWidth = Math.max(1, viewport.width - 4);
-  const availableHeight = Math.max(1, overlayHeight - 1);
-  const cardWidth = Math.min(Math.max(42, Math.min(width, availableWidth)), availableWidth);
-  const cardHeight = Math.min(Math.max(10, Math.min(height, availableHeight)), availableHeight);
+  const { overlayHeight, width: cardWidth, height: cardHeight } = terminalCardSize(viewport, width, height);
   const top = Math.max(0, Math.floor((overlayHeight - cardHeight) / 2));
   const left = Math.max(0, Math.floor((viewport.width - cardWidth) / 2));
 
@@ -216,11 +227,14 @@ export function OnboardingTitle({
   titleSuffix,
   description,
   standalone = false,
+  compact = false,
 }: {
   step?: string;
   title: string;
   /** No progress header above it, so it sits at the top of the card. */
   standalone?: boolean;
+  /** Terminal only: no blank rows around the description, for a card with no rows to spare. */
+  compact?: boolean;
   /** Short qualifier after the title, e.g. how many months yearly saves. */
   titleSuffix?: string;
   description?: string;
@@ -282,8 +296,8 @@ export function OnboardingTitle({
       </Box>
       {description ? (
         <>
-          <Box height={1} />
-          <Box minHeight={2}>
+          {compact ? null : <Box height={1} />}
+          <Box minHeight={compact ? undefined : 2}>
             <Text fg={colors.textDim} wrapText>{description}</Text>
           </Box>
         </>
@@ -420,12 +434,15 @@ export function OnboardingActions({ children, hint }: { children: ReactNode; hin
       </Box>
     );
   }
+  // A button that does not fit beside the one before it wraps under it: the
+  // card is narrower than the row in a long language or a narrow terminal.
   return (
     <Box
       flexDirection="row"
+      flexWrap="wrap"
       justifyContent="flex-start"
       alignItems="center"
-      gap={1}
+      columnGap={1}
     >
       {children}
     </Box>
@@ -531,19 +548,25 @@ export function OnboardingChoiceList({
 export function OnboardingFeature({
   title,
   description,
+  rows = 2,
 }: {
   title: string;
   description: string;
+  /** Terminal rows for the title and the description under it; 1 keeps the title alone. The DOM card sizes to its text. */
+  rows?: number;
 }) {
   const colors = useThemeColors();
   const desktop = useUiCapabilities().nativePaneChrome === true;
   if (!desktop) {
+    const descriptionRows = Math.max(0, rows - 1);
     return (
-      <Box height={2} flexDirection="row" minWidth={0}>
+      <Box height={1 + descriptionRows} flexDirection="row" minWidth={0}>
         <Box width={2} height={1}><Text fg={colors.positive}>· </Text></Box>
         <Box flexDirection="column" flexGrow={1} minWidth={0}>
           <Box height={1} overflow="hidden"><Text fg={colors.textBright} attributes={TextAttributes.BOLD}>{title}</Text></Box>
-          <Box height={1} overflow="hidden"><Text fg={colors.textMuted}>{description}</Text></Box>
+          {descriptionRows > 0 ? (
+            <Box height={descriptionRows} overflow="hidden"><Text fg={colors.textMuted}>{description}</Text></Box>
+          ) : null}
         </Box>
       </Box>
     );

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

@@ -20,8 +20,8 @@ import { t, tf } from "../../i18n";
 import { useAppLanguage } from "../../i18n/react";
 import type { PluginRegistry } from "../../plugins/registry";
 import { formatCloudPrice, monthsFreeYearly } from "../../plugins/builtin/account-management/model";
-import { proStepCopy } from "../../plugins/builtin/cloud/upgrade-dialog";
-import { Button, SegmentedControl } from "../ui";
+import { proStepCopy, proStepRealtimeTitle } from "../../plugins/builtin/cloud/upgrade-dialog";
+import { Button, SegmentedControl, terminalButtonColumns } from "../ui";
 import { AccountStep, PortfolioStep } from "./onboarding-steps";
 import {
   ONBOARDING_DESKTOP,
@@ -32,8 +32,11 @@ import {
   OnboardingHeader,
   OnboardingModal,
   OnboardingTitle,
+  TERMINAL_CARD_INSET,
+  terminalCardSize,
   type OnboardingSectionId,
 } from "./onboarding-frame";
+import { planProStep } from "./pro-step-layout";
 import { useOnboardingAccount } from "./wizard-account";
 import { useOnboardingBrokerSync } from "./wizard-broker-sync";
 import { useOnboardingPositions } from "./wizard-positions";
@@ -77,7 +80,7 @@ function useOnboardingWizard({ pluginRegistry, importBrokerPositions, onComplete
   const keybindings = useKeybindings();
   const dialogOpen = useDialogState((dialog) => dialog.isOpen);
   const commandBarOpen = useAppSelector((state) => state.commandBarOpen);
-  const { height: viewportHeight } = useViewport();
+  const { width: viewportWidth, height: viewportHeight } = useViewport();
   const dispatch = useAppDispatch();
   const stateRef = useAppStateRef();
   const config = useAppSelector((state) => state.config);
@@ -195,12 +198,6 @@ function useOnboardingWizard({ pluginRegistry, importBrokerPositions, onComplete
     researchOpenedRef.current = progress.tickerSymbol;
     recordResearchActivity("ticker_saved");
   }, [stage, progress.tickerSymbol]);
-  const {
-    offer, pricing, billingInterval, setBillingInterval, planAccess, primaryUpgradeAction, continueFree,
-  } = useOnboardingUpgrade({
-    stage, progress, saveProgressInBackground, persistProgress,
-  });
-
   const movePositionCursor = useCallback((delta: number) => {
     if (positionCursorIndex < 0) return;
     const next = Math.max(0, Math.min(positionCount - 1, positionCursorIndex + delta));
@@ -240,6 +237,12 @@ function useOnboardingWizard({ pluginRegistry, importBrokerPositions, onComplete
     ? findPaneInstance(config.layout, focusedPaneId)
     : null;
   const helpFocused = focusedInstance?.paneId === "help";
+  const {
+    offer, pricing, billingInterval, setBillingInterval, planAccess, primaryUpgradeAction, continueFree, personalTickers,
+  } = useOnboardingUpgrade({
+    stage, progress, saveProgressInBackground, persistProgress,
+    shown: !helpFocused && !dialogOpen && !commandBarOpen,
+  });
 
   const goToSection = useCallback((section: OnboardingSectionId) => {
     if (finishingRef.current || isBrokerCommitting) return;
@@ -289,8 +292,9 @@ function useOnboardingWizard({ pluginRegistry, importBrokerPositions, onComplete
     chooseBroker, activeBrokerFields, brokerFieldIdx, brokerSelectIdx, setBrokerSelectIdx, brokerValues,
     setBrokerFieldValue, isBrokerSyncing, brokerSyncError, persistenceError, positionCount,
     openBrokerConnect, continueFromPositions, backPortfolio, continuePortfolio, chosenDesks, deskCursor,
-    setDeskCursor, setChosenDesks, buildingDesks, finishDesks, account, viewportHeight, continueAccount,
+    setDeskCursor, setChosenDesks, buildingDesks, finishDesks, account, viewportWidth, viewportHeight, continueAccount,
     offer, planAccess, pricing, billingInterval, setBillingInterval, continueFree, primaryUpgradeAction,
+    personalTickers,
   };
 }
 
@@ -303,8 +307,9 @@ export function OnboardingWizard(props: OnboardingWizardProps) {
     chooseBroker, activeBrokerFields, brokerFieldIdx, brokerSelectIdx, setBrokerSelectIdx, brokerValues,
     setBrokerFieldValue, isBrokerSyncing, brokerSyncError, persistenceError, positionCount,
     openBrokerConnect, continueFromPositions, backPortfolio, continuePortfolio, chosenDesks, deskCursor,
-    setDeskCursor, setChosenDesks, buildingDesks, finishDesks, account, viewportHeight, continueAccount,
+    setDeskCursor, setChosenDesks, buildingDesks, finishDesks, account, viewportWidth, viewportHeight, continueAccount,
     offer, planAccess, pricing, billingInterval, setBillingInterval, continueFree, primaryUpgradeAction,
+    personalTickers,
   } = useOnboardingWizard(props);
 
   if (helpFocused) {
@@ -604,6 +609,33 @@ export function OnboardingWizard(props: OnboardingWizardProps) {
     const monthsFree = monthsFreeYearly(pricing);
     const yearlyLabel = monthsFree > 0 ? tf("Yearly, {months} months free", { months: monthsFree }) : t("Yearly");
     const priceNote = billingInterval === "year" && monthsFree > 0 ? tf("{months} months free", { months: monthsFree }) : null;
+    const proNote = planAccess.hasProAccess
+      ? t("This account already has real-time Cloud data.")
+      : proCopy.note;
+    // Ranked: the data itself first, then what reads it.
+    const features = [
+      { title: proStepRealtimeTitle(personalTickers), description: t("Free is 15 minutes behind on quotes and 12 hours on news.") },
+      { title: t("MCP server"), description: t("Claude Code, Codex or Cursor call Gloom's research tools.") },
+      { title: t("Ask Gloom"), description: t("Answers cite filings, calls and news.") },
+      { title: t("Earnings calls"), description: t("Transcripts, summaries, guidance and scores.") },
+      { title: t("Equity Diagnostic"), description: t("Full report: red and green flags with evidence.") },
+      { title: t("Search, theses and flow"), description: t("Instant search with alerts, thesis monitoring, options flow, hiring and compensation data.") },
+    ];
+    // The terminal card is clamped to the viewport, so the list gets the rows
+    // the card leaves it. The DOM card grows with its content instead.
+    const card = terminalCardSize({ width: viewportWidth, height: viewportHeight }, 70, 28);
+    const layout = desktop ? null : planProStep({
+      rows: card.height - TERMINAL_CARD_INSET.rows,
+      columns: card.width - TERMINAL_CARD_INSET.columns,
+      note: proNote,
+      interval: !planAccess.hasProAccess,
+      error: persistenceError,
+      actions: [
+        ...(planAccess.hasProAccess ? [] : [terminalButtonColumns({ label: "Keep Free for now", shortcut: KEEP_FREE_KEY })]),
+        terminalButtonColumns({ label: primaryLabel }),
+      ],
+      descriptions: features.map((feature) => feature.description),
+    });
     return (
       <OnboardingModal width={70} height={28}>
         <OnboardingHeader
@@ -618,12 +650,11 @@ export function OnboardingWizard(props: OnboardingWizardProps) {
           step={desktop ? undefined : t("GLOOM CLOUD PRO")}
           title={planAccess.hasProAccess ? t("Pro is active") : price}
           titleSuffix={!planAccess.hasProAccess && priceNote ? priceNote : undefined}
-          description={planAccess.hasProAccess
-            ? t("This account already has real-time Cloud data.")
-            : proCopy.note}
+          description={proNote}
+          compact={layout?.compact}
         />
         {!planAccess.hasProAccess ? (
-          <Box flexDirection="row" style={desktop ? { marginTop: 12 } : undefined} paddingTop={desktop ? undefined : 1}>
+          <Box flexDirection="row" style={desktop ? { marginTop: 12 } : undefined} paddingTop={desktop || layout?.compact ? undefined : 1}>
             <SegmentedControl
               options={[
                 { label: t("Monthly"), value: "month" },
@@ -636,32 +667,10 @@ export function OnboardingWizard(props: OnboardingWizardProps) {
             />
           </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("Earnings calls")}
-            description={t("Transcripts, summaries, guidance and scores.")}
-          />
-          <OnboardingFeature
-            title={t("Equity Diagnostic")}
-            description={t("Full report: red and green flags with evidence.")}
-          />
-          <OnboardingFeature
-            title={t("Search, theses and flow")}
-            description={t("Instant search with alerts, thesis monitoring, options flow, hiring and compensation data.")}
-          />
+          {features.map((feature, index) => layout?.featureRows[index] === 0 ? null : (
+            <OnboardingFeature key={index} {...feature} rows={layout?.featureRows[index]} />
+          ))}
         </Box>
         {persistenceError ? (
           <Text fg={colors.negative} wrapText style={desktop ? { marginTop: 10 } : undefined}>

package/src/components/onboarding/portfolio-step/positions-panel.tsx

@@ -4,6 +4,7 @@ import { useThemeColors } from "../../../theme/theme-context";
 import { blendHex, priceColor } from "../../../theme/colors";
 import { t, tf } from "../../../i18n";
 import { formatMarketPrice } from "../../../market-data/market/format";
+import { getRegularSessionDisplay } from "../../../market-data/market/status";
 import { formatPercentRaw } from "../../../utils/format";
 import { Button, NumberField, TextField } from "../../ui";
 import { ONBOARDING_DESKTOP } from "../onboarding-frame";
@@ -47,8 +48,10 @@ function PreviewLine({ preview, error }: Pick<OnboardingPositionsState, "preview
     return <Text fg={colors.textDim}>{tf("{query} checking...", { query: preview.query })}</Text>;
   }
   if (preview.status === "missing") return <Text fg={colors.textMuted}>{preview.message}</Text>;
-  const price = preview.quote?.price;
-  const change = preview.quote?.changePercent;
+  // The regular session's last and move, as `ticker` headlines them: after the close, that close.
+  const headline = getRegularSessionDisplay(preview.quote);
+  const price = headline?.price;
+  const change = headline?.changePercent;
   return (
     <Box flexDirection="row" minWidth={0} overflow="hidden">
       <Text fg={colors.text} attributes={TextAttributes.BOLD}>{preview.symbol}</Text>

package/src/components/onboarding/pro-step-layout.ts

@@ -0,0 +1,86 @@
+import { wrapTextLines } from "../../utils/text-wrap";
+
+function wrappedRows(text: string, width: number): number {
+  return Math.max(1, wrapTextLines(text, Math.max(1, width)).length);
+}
+
+/**
+ * Rows for each feature of a ranked list in `budget` rows: a title and its
+ * wrapped description (`1 + descriptionRows[i]`), a title alone (1) or nothing
+ * (0). As many features from the top keep their description as leave a row for
+ * every one below them; when not even the titles fit, the lowest ranked drop.
+ */
+export function planProFeatureRows(budget: number, descriptionRows: readonly number[]): number[] {
+  const count = descriptionRows.length;
+  if (budget < count) return descriptionRows.map((_, index) => (index < budget ? 1 : 0));
+  let spare = budget - count;
+  const rows = descriptionRows.map(() => 1);
+  for (const [index, description] of descriptionRows.entries()) {
+    if (description > spare) break;
+    spare -= description;
+    rows[index] = 1 + description;
+  }
+  return rows;
+}
+
+/**
+ * Rows a row of buttons takes in `columns` cells when it wraps to the next row
+ * instead of running off the card: `widths` are the buttons' cells in order,
+ * with one cell between neighbours on a row. A button wider than the row still
+ * gets a row of its own.
+ */
+export function wrappedActionRows(widths: readonly number[], columns: number): number {
+  let rows = 1;
+  let used = 0;
+  for (const width of widths) {
+    if (used > 0 && used + 1 + width > columns) {
+      rows += 1;
+      used = width;
+    } else {
+      used += (used > 0 ? 1 : 0) + width;
+    }
+  }
+  return rows;
+}
+
+export interface ProStepLayoutInput {
+  /** Rows and columns inside the card's border and padding. */
+  rows: number;
+  columns: number;
+  /** The line under the price. */
+  note: string;
+  /** The Monthly/Yearly control is shown. */
+  interval: boolean;
+  /** A persistence error line above the actions, or null. */
+  error: string | null;
+  /** Cells each action button takes; a row that does not fit wraps and costs a row more. */
+  actions: readonly number[];
+  /** Feature descriptions, ranked. */
+  descriptions: readonly string[];
+}
+
+/**
+ * What the terminal Pro step shows in a card of a given size: the whole list
+ * with the step's usual blank rows while it fits, otherwise those rows go
+ * (`compact`) and the list degrades as `planProFeatureRows` says. The actions
+ * are never part of the budget the list gets: they keep the rows they need,
+ * more than one when the buttons wrap.
+ */
+export function planProStep(input: ProStepLayoutInput): { compact: boolean; featureRows: number[] } {
+  const { rows, columns, note, interval, error, actions, descriptions } = input;
+  const noteRows = wrappedRows(note, columns);
+  const errorRows = error ? wrappedRows(error, columns) : 0;
+  const actionRows = wrappedActionRows(actions, columns);
+  const descriptionRows = descriptions.map((description) => wrappedRows(description, columns - 2));
+  // Header, step and title lines, the note, the control, the error, the actions.
+  const around = (compact: boolean) => 1 + 2
+    + (compact ? noteRows : 1 + Math.max(2, noteRows))
+    + (interval ? (compact ? 1 : 2) : 0)
+    + errorRows + actionRows;
+
+  const roomy = planProFeatureRows(rows - around(false), descriptionRows);
+  if (roomy.every((featureRows, index) => featureRows === 1 + descriptionRows[index]!)) {
+    return { compact: false, featureRows: roomy };
+  }
+  return { compact: true, featureRows: planProFeatureRows(rows - around(true), descriptionRows) };
+}

package/src/components/onboarding/use-onboarding-upgrade.ts

@@ -6,12 +6,14 @@ import { chatController } from "../../plugins/builtin/chat/controller";
 import type { CloudBillingInterval } from "../../plugins/builtin/account-management/model";
 import { loadUpgradeOffer, type UpgradeOffer } from "../../plugins/builtin/cloud/upgrade-dialog";
 import { useCloudUpgradeAction } from "../../plugins/builtin/shared/cloud-upgrade";
+import { useUpgradePersonalization } from "../../plugins/builtin/cloud/upgrade-personalization";
 import { usePlanAccess } from "../../api-client/plan-access";
 
 export function useOnboardingUpgrade({
-  stage, progress, saveProgressInBackground, persistProgress,
+  stage, progress, saveProgressInBackground, persistProgress, shown,
 }: {
   stage: OnboardingStage;
+  shown: boolean;
   progress: OnboardingProgress;
   saveProgressInBackground: (patch: Partial<OnboardingProgress> & Pick<OnboardingProgress, "stage">, baseConfig?: AppConfig | undefined) => void;
   persistProgress: (patch: Partial<OnboardingProgress> & Pick<OnboardingProgress, "stage">, baseConfig?: AppConfig | undefined) => Promise<AppConfig>;
@@ -23,6 +25,8 @@ export function useOnboardingUpgrade({
   const appActive = useAppActive();
   const planAccess = usePlanAccess();
   const openUpgrade = useCloudUpgradeAction("onboarding-pro");
+  // The step lists the features from its first frame, so that is when it is shown.
+  const personalTickers = useUpgradePersonalization("onboarding-pro", shown && stage === "upgrade");
   // The price and whether this account still has its trial, asked again for
   // whichever account reaches the step.
   const accountId = planAccess.signedIn ? apiClient.getCurrentUser()?.id ?? null : null;
@@ -78,6 +82,6 @@ export function useOnboardingUpgrade({
   }, [progress.accountStatus, saveProgressInBackground]);
 
   return {
-    offer, pricing, billingInterval, setBillingInterval, planAccess, primaryUpgradeAction, continueFree,
+    offer, pricing, billingInterval, setBillingInterval, planAccess, primaryUpgradeAction, continueFree, personalTickers,
   };
 }

package/src/components/ui/button.tsx

@@ -4,6 +4,7 @@ import { type ComponentType, type ReactNode } from "react";
 import type { ThemeColors } from "../../theme/colors";
 import { useThemeColors } from "../../theme/theme-context";
 import { t } from "../../i18n";
+import { displayWidth } from "../../utils/format";
 import { useRemoteUiNode, useRemoteUiScope } from "../../remote/semantic-tree";
 import { useScopedButtonAction } from "./action-scope";
 
@@ -66,6 +67,15 @@ function resolveButtonColors(variant: ButtonVariant, active: boolean, disabled:
   }
 }
 
+/**
+ * Terminal cells a button takes: the padded label, then its key. For a row that
+ * has to know whether its buttons fit before it lays them out.
+ */
+export function terminalButtonColumns({ label, displayLabel, shortcut, compact = false }: Pick<ButtonProps, "label" | "displayLabel" | "shortcut" | "compact">): number {
+  const text = displayLabel ?? t(label);
+  return displayWidth(compact ? text : ` ${text} `) + (shortcut ? 1 + displayWidth(shortcut) : 0);
+}
+
 export function Button({
   label: rawLabel,
   displayLabel,

package/src/components/ui/data-table/index.tsx

@@ -27,6 +27,8 @@ export function DataTable<T, C extends DataTableColumn = DataTableColumn>(
   const renderer = useRendererHost();
   const propsRef = useRef(props);
   propsRef.current = props;
+  // The semantic snapshot can be taken every frame; the rows are rebuilt only when what they are drawn from changes.
+  const reportedRowsRef = useRef<{ source: readonly unknown[]; rows: ReturnType<typeof reportedRows> } | null>(null);
 
   useEffect(() => {
     if (!paneId || !renderer.saveTextFile) return;
@@ -90,6 +92,7 @@ export function DataTable<T, C extends DataTableColumn = DataTableColumn>(
       columns: props.columns.map((column) => ({ id: column.id, label: column.label })),
       rowCount: props.items.length,
       selectedId: firstSelectedId(props),
+      ...(props.reportEveryRow ? { rows: cachedReportedRows(props, reportedRowsRef) } : {}),
     }),
   });
   // Header labels read the same in every table whatever case a pane wrote
@@ -119,6 +122,41 @@ function resolveTableIndex<T, C extends DataTableColumn>(
   return resolveRemoteItemIndex(input, props.items, { id: key, key });
 }
 
+/**
+ * Every row as a report reads it: the key, whether it is selected and each
+ * column's text, the same text the cells draw. Captured with the semantic
+ * snapshot, so a row scrolled out of the viewport still reaches the report.
+ */
+function reportedRows<T, C extends DataTableColumn>(props: DataTableProps<T, C>) {
+  const normalize = (text: string) => text.replace(/\s+/g, " ").trim();
+  return props.items.map((item, index) => {
+    const selected = props.isSelected(item, index);
+    const section = props.renderSectionHeader?.(item, index);
+    const cells = section
+      ? [{ columnLabel: "Row", text: normalize(section.text) }]
+      : props.columns.map((column) => ({
+        columnId: column.id,
+        columnLabel: column.label,
+        text: normalize(props.renderCell(item, column, index, { selected }).text),
+      }));
+    return { key: props.getItemKey(item, index), selected, cells: cells.filter((cell) => cell.text.length > 0) };
+  });
+}
+
+function cachedReportedRows<T, C extends DataTableColumn>(
+  props: DataTableProps<T, C>,
+  cache: { current: { source: readonly unknown[]; rows: ReturnType<typeof reportedRows> } | null },
+) {
+  const source = [props.items, props.columns, props.renderCell, props.isSelected, props.renderSectionHeader];
+  const cached = cache.current;
+  if (cached && cached.source.length === source.length && cached.source.every((value, index) => value === source[index])) {
+    return cached.rows;
+  }
+  const rows = reportedRows(props);
+  cache.current = { source, rows };
+  return rows;
+}
+
 function firstSelectedId<T, C extends DataTableColumn>(props: DataTableProps<T, C>): string | null {
   const index = props.items.findIndex((item, itemIndex) => props.isSelected(item, itemIndex));
   const item = props.items[index];

package/src/components/ui/data-table/types.ts

@@ -60,7 +60,8 @@ export interface DataTableSectionHeader {
   expanded?: boolean;
 }
 
-export type DataTableScrollAlign = "nearest" | "center";
+/** Where `scrollToIndex` puts its row: the nearest edge, the middle, or the top of the viewport. */
+export type DataTableScrollAlign = "nearest" | "center" | "start";
 
 interface DataTableRowState {
   selected: boolean;
@@ -146,6 +147,12 @@ export interface DataTableProps<
   freezeFirstColumn?: boolean;
   /** Append export-only source records after the displayed table. */
   getExportMetadata?: () => readonly (readonly unknown[])[];
+  /**
+   * A rendered-view report (`gloomberb fn`) reads every row, not only those
+   * the viewport shows. For a bounded table a reader needs whole, such as an
+   * option chain's strike window; leave it off for long or paged lists.
+   */
+  reportEveryRow?: boolean;
   scrollToIndex?: number | null;
   scrollToIndexAlign?: DataTableScrollAlign;
   scrollToIndexVersion?: number;

package/src/components/ui/data-table/visible-range.ts

@@ -36,6 +36,8 @@ export function resolveDataTableScrollTop(
   let nextTop = currentTop;
   if (align === "center") {
     nextTop = targetIndex - Math.floor(visibleHeight / 2);
+  } else if (align === "start") {
+    nextTop = targetIndex;
   } else if (targetIndex < currentTop) {
     nextTop = targetIndex;
   } else if (targetIndex >= currentTop + visibleHeight) {

package/src/components/ui/icon.tsx

@@ -27,7 +27,9 @@ export type IconName =
   | "sort-up"
   | "sort-down"
   | "grip"
-  | "image";
+  | "image"
+  | "thumbs-up"
+  | "thumbs-down";
 
 /** Terminal glyph for each icon; the desktop host draws SVG. */
 export const ICON_GLYPHS: Record<IconName, string> = {
@@ -54,6 +56,10 @@ export const ICON_GLYPHS: Record<IconName, string> = {
   "sort-down": "▼",
   grip: "::",
   image: "▣",
+  // Votes rather than emoji: an emoji keeps its own colours, so it could not
+  // show which thumb is chosen.
+  "thumbs-up": "+1",
+  "thumbs-down": "-1",
 };
 
 export interface IconProps {
@@ -160,7 +166,10 @@ export function IconButton({
         if (!disabled) onPress?.(event);
       }}
     >
-      <Text fg={disabled ? colors.textMuted : color ?? colors.textDim} selectable={false}>{` ${ICON_GLYPHS[icon]} `}</Text>
+      {/* Pressed takes the colour the desktop and the terminal pane header give an active toggle. */}
+      <Text fg={disabled ? colors.textMuted : color ?? (pressed ? colors.warning : colors.textDim)} selectable={false}>
+        {` ${ICON_GLYPHS[icon]} `}
+      </Text>
     </Box>
   );
 }

package/src/components/ui/index.ts

@@ -5,7 +5,7 @@ export type { ListViewItem, ListViewProps, ListRowState } from "./list-view";
 export { DataTable } from "./data-table";
 export type { DataTableCell, DataTableColumn, DataTableProps, DataTableVisibleRange } from "./data-table";
 
-export { Button } from "./button";
+export { Button, terminalButtonColumns } from "./button";
 export { Icon, IconButton, ICON_GLYPHS } from "./icon";
 export type { IconButtonPressEvent, IconButtonProps, IconName, IconProps } from "./icon";
 export { ActionRow } from "./action-row";

package/src/core/connection-health.ts

@@ -280,7 +280,7 @@ export function registerGloomCloudConnectionSources(health: ConnectionHealthRegi
       id: GLOOM_CLOUD_FRED_CONNECTION_ID,
       name: "Gloom / FRED",
       kind: "api",
-      ownerId: "macro",
+      ownerId: "rates-macro",
       priority: 2,
       detail: "api.gloom.sh/cloud/econ/series",
     }),