gloomberb 0.3.3 → 0.4.0

package/src/components/layout/pane-header.tsx

@@ -1,4 +1,4 @@
-import { floatingPaneTitleBg, paneTitleBg, paneTitleText } from "../../theme/colors";
+import { colors, floatingPaneTitleBg, paneTitleBg, paneTitleText } from "../../theme/colors";
 
 export const PANE_HEADER_HEIGHT = 1;
 export const PANE_HEADER_GRIP = ":: ";
@@ -30,13 +30,37 @@ export function PaneHeader({
   const backgroundColor = floating ? floatingPaneTitleBg(focused) : paneTitleBg(focused);
   const actionText = showActions ? PANE_HEADER_ACTION : "     ";
   const closeText = floating ? PANE_HEADER_CLOSE : "";
+  const bc = colors.borderFocused;
+  const textColor = paneTitleText(focused, floating);
+
+  if (focused) {
+    // Build: ┌─:: Title ─────────── ... x─┐
+    // Reserve 2 for corners, 1 for ─ after ┌, 1 for ─ before ┐
+    const innerWidth = Math.max(0, width - 4);
+    const contentWidth = PANE_HEADER_GRIP.length + closeText.length + actionText.length;
+    const titleWidth = Math.max(0, innerWidth - contentWidth);
+    const clippedTitle = truncateTitle(title, titleWidth);
+    const fillLen = Math.max(0, innerWidth - PANE_HEADER_GRIP.length - clippedTitle.length - actionText.length - closeText.length);
+    const fill = "─".repeat(fillLen);
+
+    return (
+      <box height={PANE_HEADER_HEIGHT} width={width} backgroundColor={backgroundColor} flexDirection="row">
+        <text fg={bc} selectable={false}>{"┌─"}</text>
+        <text fg={textColor} selectable={false}>{`${PANE_HEADER_GRIP}${clippedTitle}`}</text>
+        <text fg={bc} selectable={false}>{fill}</text>
+        <text fg={textColor} selectable={false}>{`${actionText}${closeText}`}</text>
+        <text fg={bc} selectable={false}>{"─┐"}</text>
+      </box>
+    );
+  }
+
   const titleWidth = Math.max(0, width - PANE_HEADER_GRIP.length - actionText.length - closeText.length);
   const clippedTitle = truncateTitle(title, titleWidth);
   const padding = " ".repeat(Math.max(0, titleWidth - clippedTitle.length));
 
   return (
     <box height={PANE_HEADER_HEIGHT} width={width} backgroundColor={backgroundColor} flexDirection="row">
-      <text fg={paneTitleText(focused, floating)} selectable={false}>
+      <text fg={textColor} selectable={false}>
         {`${PANE_HEADER_GRIP}${clippedTitle}${padding}${actionText}${closeText}`}
       </text>
     </box>

package/src/components/layout/shell.tsx

@@ -5,10 +5,7 @@ import { saveConfig } from "../../data/config-store";
 import {
   MIN_FLOAT_HEIGHT,
   MIN_FLOAT_WIDTH,
-  addPaneFloating,
-  addPaneToLayout,
   applyDrop,
-  bringToFront,
   findDockLeaf,
   floatAtRect,
   floatPane,
@@ -29,7 +26,7 @@ import {
   type ResolvedPane,
 } from "../../plugins/pane-manager";
 import type { PluginRegistry } from "../../plugins/registry";
-import { removePaneInstances, createPaneInstance, type LayoutConfig } from "../../types/config";
+import { removePaneInstances, type LayoutConfig } from "../../types/config";
 import {
   PaneInstanceProvider,
   resolveCollectionForPane,
@@ -435,12 +432,13 @@ function resolveSnapGuide(x: number, y: number, guides: SnapGuide[]): SnapGuide
 
 function resolveHeaderHitAreas(
   width: number,
-  options: { floating: boolean },
+  options: { floating: boolean; focused: boolean },
 ): {
   actionStart: number | null;
   closeStart: number | null;
 } {
-  let rightEdge = width;
+  // When focused, the header renders ┌─...─┐ adding 2 chars on each side
+  let rightEdge = options.focused ? width - 2 : width;
   let closeStart: number | null = null;
   let actionStart: number | null = null;
 
@@ -463,7 +461,6 @@ function menuForPane(
   persistLayout: (nextLayout: LayoutConfig, options?: { pushHistory?: boolean }) => void,
   focusPane: (paneId: string) => void,
   openPaneSettings: (paneId: string) => void,
-  openLayoutMenu: () => void,
 ) {
   const baseActions: Array<{ id: string; label: string; action: () => void }> = [];
   if (pluginRegistry.hasPaneSettings(pane.instance.instanceId)) {
@@ -483,11 +480,6 @@ function menuForPane(
         focusPane(pane.instance.instanceId);
       },
     });
-    baseActions.push({
-      id: "front",
-      label: "Bring To Front",
-      action: () => persistLayout(bringToFront(layout, pane.instance.instanceId), { pushHistory: false }),
-    });
   } else {
     baseActions.push({
       id: "float",
@@ -499,37 +491,6 @@ function menuForPane(
     });
   }
 
-  baseActions.push({
-    id: "duplicate",
-    label: "Duplicate",
-    action: () => {
-      const duplicate = createPaneInstance(pane.instance.paneId, {
-        title: pane.instance.title,
-        binding: pane.instance.binding,
-        params: pane.instance.params,
-        settings: pane.instance.settings,
-      });
-      const nextLayout = pane.floating
-        ? floatAtRect(addPaneFloating(layout, duplicate, width, contentHeight, pane.def), duplicate.instanceId, {
-          x: Math.max(0, pane.floating.x + 2),
-          y: Math.max(0, pane.floating.y + 1),
-          width: pane.floating.width,
-          height: pane.floating.height,
-        })
-        : addPaneToLayout(layout, duplicate, { relativeTo: pane.instance.instanceId, position: "right" });
-      persistLayout(nextLayout);
-      focusPane(duplicate.instanceId);
-    },
-  });
-  baseActions.push({ id: "swap", label: "Swap With...", action: openLayoutMenu });
-  baseActions.push({
-    id: "close",
-    label: "Close",
-    action: () => {
-      persistLayout(removePane(layout, pane.instance.instanceId));
-    },
-  });
-
   return baseActions;
 }
 
@@ -739,10 +700,9 @@ export function Shell({ pluginRegistry }: ShellProps) {
         persistLayout,
         focusPane,
         openPaneSettings,
-        openLayoutMenu,
       ),
     });
-  }, [contentHeight, focusPane, openLayoutMenu, openPaneSettings, paneMap, persistLayout, pluginRegistry, visibleLayout, width]);
+  }, [contentHeight, focusPane, openPaneSettings, paneMap, persistLayout, pluginRegistry, visibleLayout, width]);
 
   const handleFloatingClose = useCallback((paneId: string) => {
     persistLayout(removePane(visibleLayout, paneId));
@@ -768,13 +728,12 @@ export function Shell({ pluginRegistry }: ShellProps) {
         if (!pointInRect({ x: rect.x, y: rect.y, width: rect.width, height: rect.height }, event.x, shellY)) continue;
         const relativeX = event.x - rect.x;
         const relativeY = shellY - rect.y;
+        const isFocused = state.focusedPaneId === pane.instance.instanceId;
         const headerAreas = resolveHeaderHitAreas(rect.width, {
           floating: true,
+          focused: isFocused,
         });
         focusPane(pane.instance.instanceId);
-        if ((pane.floating?.zIndex ?? 50) < 999) {
-          persistLayout(bringToFront(visibleLayout, pane.instance.instanceId), { pushHistory: false });
-        }
         if (relativeY === 0 && headerAreas.closeStart != null && relativeX >= headerAreas.closeStart && relativeX < rect.width) {
           handleFloatingClose(pane.instance.instanceId);
           event.stopPropagation();
@@ -850,8 +809,10 @@ export function Shell({ pluginRegistry }: ShellProps) {
         if (!pane) continue;
         const relativeX = event.x - leaf.rect.x;
         const relativeY = shellY - leaf.rect.y;
+        const isFocused = state.focusedPaneId === leaf.instanceId;
         const headerAreas = resolveHeaderHitAreas(leaf.rect.width, {
           floating: false,
+          focused: isFocused,
         });
         focusPane(leaf.instanceId);
         if (relativeY === 0
@@ -1021,7 +982,7 @@ export function Shell({ pluginRegistry }: ShellProps) {
       {dockLeafLayouts.map((leaf) => {
         const pane = paneMap.get(leaf.instanceId);
         if (!pane) return null;
-        const focused = state.focusedPaneId === leaf.instanceId && !overlayOpen;
+        const focused = state.focusedPaneId === leaf.instanceId && (!overlayOpen || menuState?.paneId === leaf.instanceId);
         const showActions = focused || hoveredPaneId === leaf.instanceId || menuState?.paneId === leaf.instanceId;
         return (
           <box
@@ -1056,7 +1017,7 @@ export function Shell({ pluginRegistry }: ShellProps) {
 
       {floatingPanes.map((pane) => {
         const preview = dragFloatingRect?.paneId === pane.instance.instanceId ? dragFloatingRect.rect : pane.floating!;
-        const focused = state.focusedPaneId === pane.instance.instanceId && !overlayOpen;
+        const focused = state.focusedPaneId === pane.instance.instanceId && (!overlayOpen || menuState?.paneId === pane.instance.instanceId);
         const showActions = focused || hoveredPaneId === pane.instance.instanceId || menuState?.paneId === pane.instance.instanceId;
         return (
           <FloatingPaneWrapper
@@ -1108,6 +1069,57 @@ export function Shell({ pluginRegistry }: ShellProps) {
         );
       })}
 
+      {/* Focus border overlay — rendered on top of the focused pane */}
+      {(() => {
+        if (!state.focusedPaneId) return null;
+        // Hide border when command bar or dialog is open, but keep it when just the pane menu is open
+        if (overlayOpen && !menuState) return null;
+        let rect: { x: number; y: number; width: number; height: number } | null = null;
+        let z = 3;
+        // Check floating panes first (they render on top of docked panes)
+        const floatingPane = floatingPanes.find((p) => p.instance.instanceId === state.focusedPaneId);
+        if (floatingPane) {
+          rect = dragFloatingRect?.paneId === floatingPane.instance.instanceId
+            ? dragFloatingRect.rect
+            : floatingPane.floating!;
+          z = (floatingPane.floating?.zIndex ?? 50) + 1;
+        } else {
+          // Check docked panes
+          const dockedLeaf = dockLeafLayouts.find((l) => l.instanceId === state.focusedPaneId);
+          if (dockedLeaf) {
+            rect = dockedLeaf.rect;
+          }
+        }
+        if (!rect || rect.height < 2) return null;
+        const bc = colors.borderFocused;
+        const isFloating = !!floatingPane;
+        const bodyTop = rect.y + 1; // below header (header renders its own border edges)
+        const bodyH = rect.height - 2; // rows between header and bottom edge
+        return (
+          <>
+            {/* Left edge — body only */}
+            {bodyH > 0 && (
+              <box key="focus-l" position="absolute" left={rect.x} top={bodyTop} width={1} height={bodyH} zIndex={z}>
+                <text fg={bc} selectable={false}>{"│".repeat(bodyH)}</text>
+              </box>
+            )}
+            {/* Right edge — body only */}
+            {bodyH > 0 && (
+              <box key="focus-r" position="absolute" left={rect.x + rect.width - 1} top={bodyTop} width={1} height={bodyH} zIndex={z}>
+                <text fg={bc} selectable={false}>{"│".repeat(bodyH)}</text>
+              </box>
+            )}
+            {/* Bottom edge — for floating, leave last 2 chars for resize handle (rendered by FloatingPaneWrapper) */}
+            <box key="focus-b" position="absolute" left={rect.x} top={rect.y + rect.height - 1} width={isFloating ? Math.max(0, rect.width - 2) : rect.width} height={1} zIndex={z}>
+              <text fg={bc} selectable={false}>{isFloating
+                ? `└${"─".repeat(Math.max(0, rect.width - 4))}─`
+                : `└${"─".repeat(Math.max(0, rect.width - 2))}┘`
+              }</text>
+            </box>
+          </>
+        );
+      })()}
+
       {activeHoverOverlay && activeHoverOverlay.cells.map((cell) => {
         const active = dockPreview?.kind === "dock"
           && dockPreview.target.kind === "leaf"

package/src/components/layout/status-bar.test.tsx

@@ -170,4 +170,70 @@ describe("StatusBar", () => {
       globalThis.clearTimeout = originalClearTimeout;
     }
   });
+
+  test("separates listing venue, session, and source labels", async () => {
+    const config = createDefaultConfig("/tmp/gloomberb-test");
+    config.layout.instances = config.layout.instances.map((instance) => (
+      instance.instanceId === "ticker-detail:main"
+        ? { ...instance, binding: { kind: "fixed" as const, symbol: "AMD" } }
+        : instance
+    ));
+    const state = createInitialState(config);
+    state.statusBarVisible = true;
+    state.focusedPaneId = "ticker-detail:main";
+    state.tickers = new Map([["AMD", {
+      metadata: {
+        ticker: "AMD",
+        exchange: "NASDAQ",
+        currency: "USD",
+        name: "Advanced Micro Devices",
+        portfolios: [],
+        watchlists: [],
+        positions: [],
+        custom: {},
+        tags: [],
+      },
+    }]]);
+    state.financials = new Map([["AMD", {
+      annualStatements: [],
+      quarterlyStatements: [],
+      priceHistory: [],
+      quote: {
+        symbol: "AMD",
+        providerId: "ibkr",
+        dataSource: "live",
+        price: 100,
+        currency: "USD",
+        change: 1,
+        changePercent: 1,
+        lastUpdated: Date.now(),
+        listingExchangeName: "NASDAQ",
+        routingExchangeName: "SMART",
+        marketState: "PRE",
+        sessionConfidence: "derived",
+        preMarketPrice: 101,
+        preMarketChange: 2,
+        preMarketChangePercent: 2,
+        provenance: {
+          price: { providerId: "ibkr", dataSource: "live" },
+          session: { providerId: "yahoo", dataSource: "yahoo" },
+        },
+      },
+    }]]);
+
+    testSetup = await testRender(
+      <AppContext value={{ state, dispatch: () => {} }}>
+        <StatusBar />
+      </AppContext>,
+      { width: 120, height: 1 },
+    );
+
+    await testSetup.renderOnce();
+
+    const frame = testSetup.captureCharFrame();
+    expect(frame).toContain("NASDAQ PRE-MKT");
+    expect(frame).toContain("px IBKR live");
+    expect(frame).toContain("ses Yahoo");
+    expect(frame).not.toContain("SMART OPEN");
+  });
 });

package/src/components/layout/status-bar.tsx

@@ -1,7 +1,13 @@
 import { useEffect, useState } from "react";
 import { colors, hoverBg } from "../../theme/colors";
 import { useAppState, useFocusedTicker } from "../../state/app-context";
-import { marketStateLabel, marketStateColor, exchangeShortName, getExtendedHoursInfo } from "../../utils/market-status";
+import {
+  marketStateLabel,
+  marketStateColor,
+  exchangeShortName,
+  getExtendedHoursInfo,
+  quoteSourceLabel,
+} from "../../utils/market-status";
 import { getSharedRegistry } from "../../plugins/registry";
 import { gridlockAllPanes } from "../../plugins/pane-manager";
 
@@ -23,7 +29,12 @@ export function StatusBar() {
 
   const q = focusedFinancials?.quote;
   const mktState = q?.marketState;
-  const exchName = q ? exchangeShortName(q.exchangeName, q.fullExchangeName) : "";
+  const exchName = q
+    ? exchangeShortName(q.listingExchangeName ?? q.exchangeName, q.listingExchangeFullName ?? q.fullExchangeName)
+    : "";
+  const sessionLabel = mktState ? marketStateLabel(mktState) : "?";
+  const priceSourceLabel = q?.provenance?.price ? quoteSourceLabel(q.provenance.price, "price") : "";
+  const sessionSourceLabel = q?.provenance?.session ? quoteSourceLabel(q.provenance.session, "session") : "";
 
   // Extended hours info for selected ticker
   const extInfo = getExtendedHoursInfo(focusedFinancials?.quote);
@@ -124,13 +135,23 @@ export function StatusBar() {
           <text fg={extColor}>{symbol} {extText}</text>
         </box>
       )}
-      {mktState && (
+      {(exchName || mktState || q?.provenance?.session) && (
         <box paddingRight={1}>
-          <text fg={marketStateColor(mktState)}>
-            {exchName ? `${exchName} ` : ""}{marketStateLabel(mktState)}
+          <text fg={mktState ? marketStateColor(mktState) : colors.textDim}>
+            {exchName ? `${exchName} ` : ""}{sessionLabel}
           </text>
         </box>
       )}
+      {priceSourceLabel && (
+        <box paddingRight={1}>
+          <text fg={colors.textDim}>px {priceSourceLabel}</text>
+        </box>
+      )}
+      {sessionSourceLabel && sessionSourceLabel !== priceSourceLabel && (
+        <box paddingRight={1}>
+          <text fg={colors.textDim}>ses {sessionSourceLabel}</text>
+        </box>
+      )}
       {/* Plugin status widgets */}
       {registry && <registry.Slot name="status:widget" />}
     </box>

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

@@ -65,6 +65,20 @@ async function emitKeypress(
   });
 }
 
+async function waitForFrameToContain(text: string, attempts = 8): Promise<string> {
+  for (let index = 0; index < attempts; index += 1) {
+    const frame = testSetup!.captureCharFrame();
+    if (frame.includes(text)) {
+      return frame;
+    }
+    await act(async () => {
+      await Promise.resolve();
+      await testSetup!.renderOnce();
+    });
+  }
+  throw new Error(`Timed out waiting for "${text}".`);
+}
+
 afterEach(async () => {
   if (testSetup) {
     await act(async () => {
@@ -79,6 +93,57 @@ afterEach(async () => {
 });
 
 describe("OnboardingWizard", () => {
+  test("uses backspace to go back when not editing and keeps backspace for text deletion while editing", async () => {
+    const pluginRegistry = {
+      allPlugins: new Map(),
+      brokers: new Map(),
+      paneTemplates: new Map(),
+      getPaneTemplatePluginId: () => undefined,
+      tickerRepository: createTickerRepository(),
+      persistence: { resources: undefined },
+    } as unknown as PluginRegistry;
+
+    testSetup = await testRender(
+      <OnboardingWizard
+        config={createDefaultConfig("/tmp/gloomberb-onboarding-backspace")}
+        pluginRegistry={pluginRegistry}
+        onComplete={() => {}}
+      />,
+      { width: 90, height: 28 },
+    );
+    await testSetup.renderOnce();
+
+    await emitKeypress(testSetup, { name: "return", sequence: "\r" });
+    let frame = await waitForFrameToContain("Theme");
+    expect(frame).toContain("Theme");
+
+    await act(async () => {
+      testSetup!.mockInput.pressBackspace();
+      await testSetup!.renderOnce();
+      await testSetup!.renderOnce();
+    });
+    frame = await waitForFrameToContain("Let's set things up (~30s).");
+    expect(frame).toContain("Let's set things up (~30s).");
+
+    await emitKeypress(testSetup, { name: "return", sequence: "\r" });
+    frame = await waitForFrameToContain("Theme");
+    await emitKeypress(testSetup, { name: "return", sequence: "\r" });
+    frame = await waitForFrameToContain("Create Manual Portfolio");
+    expect(frame).toContain("Create Manual Portfolio");
+
+    await emitKeypress(testSetup, { name: "return", sequence: "\r" });
+    frame = await waitForFrameToContain("Main Portfolio");
+    expect(frame).toContain("Main Portfolio");
+
+    await act(async () => {
+      testSetup!.mockInput.pressBackspace();
+      await testSetup!.renderOnce();
+    });
+    frame = testSetup.captureCharFrame();
+    expect(frame).toContain("Main Portfoli");
+    expect(frame).not.toContain("Create Manual Portfolio");
+  });
+
   test("waits for broker positions to import before completing onboarding", async () => {
     tempDataDir = await mkdtemp(join(tmpdir(), "gloomberb-onboarding-"));
     const importDeferred = createDeferred<any[]>();

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

@@ -10,6 +10,7 @@ import type { PluginRegistry } from "../../plugins/registry";
 import { resolveBrokerConfigFields, type BrokerAdapter, type BrokerConfigField } from "../../types/broker";
 import { buildIbkrConfigFromValues } from "../../plugins/ibkr/config";
 import { createBrokerInstanceId } from "../../utils/broker-instances";
+import { isBackNavigationKey, isPlainEscape } from "../../utils/back-navigation";
 import { syncBrokerInstance } from "../../brokers/sync-broker-instance";
 import { debugLog } from "../../utils/debug-log";
 import { ToggleList, type ToggleListItem } from "../toggle-list";
@@ -415,7 +416,7 @@ export function OnboardingWizard({ config, pluginRegistry, onComplete }: Onboard
             }
           }
         }
-      } else if (event.name === "escape") {
+      } else if (isPlainEscape(event)) {
         setEditingField(false);
         if (portfolioSub === "broker-fields") {
           setPortfolioSub("broker-setup");
@@ -506,7 +507,7 @@ export function OnboardingWizard({ config, pluginRegistry, onComplete }: Onboard
         }
       }
       nextStep();
-    } else if (event.name === "escape") {
+    } else if (isBackNavigationKey(event)) {
       if (step === "portfolio" && portfolioSub === "broker-sync") {
         resetBrokerSync();
         setPortfolioSub("broker-fields");
@@ -693,9 +694,7 @@ export function OnboardingWizard({ config, pluginRegistry, onComplete }: Onboard
           </box>
         </box>
         <box height={1} flexDirection="row" width={contentWidth}>
-          <box flexGrow={1}>
-            {stepIdx > 0 && <text fg={colors.textMuted}>{"<- back"}</text>}
-          </box>
+          <box flexGrow={1} />
           <box>
             <text fg={colors.textMuted}>{hintText}</text>
           </box>
@@ -1024,7 +1023,7 @@ function PortfolioStep({
           <text fg={colors.textDim}>
             {brokerSyncing
               ? "This happens now so your portfolio is ready before onboarding finishes."
-              : "Press Enter to retry, or Esc to edit the broker settings."}
+              : "Press Enter to retry, or Backspace to edit the broker settings."}
           </text>
         </box>
       </box>

package/src/components/ticker-list-table.test.tsx

@@ -0,0 +1,83 @@
+import { afterEach, describe, expect, test } from "bun:test";
+import { act, useState } from "react";
+import { testRender } from "@opentui/react/test-utils";
+import type { ColumnConfig } from "../types/config";
+import type { TickerFinancials } from "../types/financials";
+import type { TickerRecord } from "../types/ticker";
+import { TickerListTable, type TickerTableCell } from "./ticker-list-table";
+
+let testSetup: Awaited<ReturnType<typeof testRender>> | undefined;
+let setHarnessCursorSymbol: ((symbol: string) => void) | null = null;
+let resolveCellCallCount = 0;
+
+const columns: ColumnConfig[] = [
+  { id: "ticker", label: "Ticker", width: 6, align: "left" },
+];
+const financialsMap = new Map<string, TickerFinancials>();
+const tickers: TickerRecord[] = [
+  { metadata: { ticker: "AAPL", exchange: "NASDAQ", currency: "USD", name: "Apple", portfolios: [], watchlists: [], positions: [], custom: {}, tags: [] } },
+  { metadata: { ticker: "MSFT", exchange: "NASDAQ", currency: "USD", name: "Microsoft", portfolios: [], watchlists: [], positions: [], custom: {}, tags: [] } },
+  { metadata: { ticker: "NVDA", exchange: "NASDAQ", currency: "USD", name: "NVIDIA", portfolios: [], watchlists: [], positions: [], custom: {}, tags: [] } },
+];
+
+function noop(_index: number | null): void {}
+
+function resolveCell(_column: ColumnConfig, ticker: TickerRecord, _financials: TickerFinancials | undefined): TickerTableCell {
+  resolveCellCallCount += 1;
+  return { text: ticker.metadata.ticker };
+}
+
+function TickerListTableHarness() {
+  const [cursorSymbol, setCursorSymbol] = useState("AAPL");
+  setHarnessCursorSymbol = (symbol: string) => setCursorSymbol(symbol);
+
+  return (
+    <TickerListTable
+      columns={columns}
+      tickers={tickers}
+      cursorSymbol={cursorSymbol}
+      hoveredIdx={null}
+      setHoveredIdx={noop}
+      setCursorSymbol={setCursorSymbol}
+      resolveCell={resolveCell}
+      financialsMap={financialsMap}
+    />
+  );
+}
+
+afterEach(async () => {
+  if (testSetup) {
+    await act(async () => {
+      testSetup!.renderer.destroy();
+    });
+    testSetup = undefined;
+  }
+  resolveCellCallCount = 0;
+  setHarnessCursorSymbol = null;
+});
+
+describe("TickerListTable", () => {
+  test("recomputes cells only for rows whose selection state changed", async () => {
+    testSetup = await testRender(
+      <TickerListTableHarness />,
+      { width: 20, height: 6 },
+    );
+
+    await act(async () => {
+      await testSetup!.renderOnce();
+    });
+
+    const initialCallCount = resolveCellCallCount;
+
+    await act(async () => {
+      setHarnessCursorSymbol?.("MSFT");
+      await Promise.resolve();
+    });
+    await act(async () => {
+      await testSetup!.renderOnce();
+    });
+
+    expect(initialCallCount).toBeGreaterThan(0);
+    expect(resolveCellCallCount - initialCallCount).toBe(2);
+  });
+});