gloomberb 0.9.5 → 0.9.7

package/src/plugins/builtin/portfolio-list/grid.tsx

@@ -0,0 +1,197 @@
+import { useCallback, useMemo } from "react";
+import {
+  buildMetricTreemapNavigationTiles,
+  findMetricTreemapNeighbor,
+  MetricTreemapSurface,
+  type MetricTreemapDirection,
+  type MetricTreemapItem,
+} from "../../../components";
+import { useShortcut } from "../../../react/input";
+import type { ColumnConfig } from "../../../types/config";
+import type { TickerFinancials } from "../../../types/financials";
+import type { TickerRecord } from "../../../types/ticker";
+import { useUiCapabilities } from "../../../ui";
+import { isPlainKey } from "../../../utils/keyboard";
+import { getColumnValue, getSortValue, type ColumnContext } from "./metrics";
+import { getPortfolioPositionMetrics } from "./position-metrics";
+
+const MARKET_CAP_COLUMN: ColumnConfig = { id: "market_cap", label: "Mkt Cap", width: 10, align: "right" };
+const MARKET_VALUE_COLUMN: ColumnConfig = { id: "mkt_value", label: "Mkt Value", width: 10, align: "right" };
+const CHANGE_PCT_COLUMN: ColumnConfig = { id: "change_pct", label: "Change", width: 8, align: "right" };
+const DAY_PNL_COLUMN: ColumnConfig = { id: "day_pnl", label: "Day P&L", width: 10, align: "right" };
+const VOLUME_COLUMN: ColumnConfig = { id: "volume", label: "Volume", width: 9, align: "right" };
+const WEIGHT_COLUMN: ColumnConfig = { id: "weight", label: "Weight", width: 8, align: "right" };
+
+function numericValue(value: number | string | null): number | null {
+  return typeof value === "number" && Number.isFinite(value) ? value : null;
+}
+
+function quoteCurrency(ticker: TickerRecord, financials: TickerFinancials | undefined): string {
+  return financials?.quote?.currency || ticker.metadata.currency || "USD";
+}
+
+function positionAdjustedChangePercent(
+  ticker: TickerRecord,
+  financials: TickerFinancials | undefined,
+  context: ColumnContext,
+  isPortfolioTab: boolean,
+): number | null {
+  const changePercent = numericValue(getSortValue(CHANGE_PCT_COLUMN, ticker, financials, context));
+  if (changePercent == null || !isPortfolioTab) return changePercent;
+  const positionMetrics = getPortfolioPositionMetrics(ticker, context.activeTab, quoteCurrency(ticker, financials));
+  return positionMetrics.totalPriceUnits < 0 ? -changePercent : changePercent;
+}
+
+function buildPortfolioGridItems(
+  tickers: TickerRecord[],
+  financialsMap: Map<string, TickerFinancials>,
+  context: ColumnContext,
+  isPortfolioTab: boolean,
+): Array<MetricTreemapItem<TickerRecord>> {
+  return tickers.map((ticker) => {
+    const symbol = ticker.metadata.ticker;
+    const financials = financialsMap.get(symbol);
+    const weightColumn = isPortfolioTab ? MARKET_VALUE_COLUMN : MARKET_CAP_COLUMN;
+    const primaryColumn = isPortfolioTab ? MARKET_VALUE_COLUMN : MARKET_CAP_COLUMN;
+    const fallbackColumn = isPortfolioTab ? MARKET_CAP_COLUMN : VOLUME_COLUMN;
+    const weight = numericValue(getSortValue(weightColumn, ticker, financials, context))
+      ?? numericValue(getSortValue(fallbackColumn, ticker, financials, context))
+      ?? 1;
+    const primary = getColumnValue(primaryColumn, ticker, financials, context).text;
+    const change = getColumnValue(CHANGE_PCT_COLUMN, ticker, financials, context).text;
+    const secondary = isPortfolioTab
+      ? `${getColumnValue(DAY_PNL_COLUMN, ticker, financials, context).text} ${change}`
+      : change;
+    const tertiary = isPortfolioTab
+      ? getColumnValue(WEIGHT_COLUMN, ticker, financials, context).text
+      : getColumnValue(VOLUME_COLUMN, ticker, financials, context).text;
+
+    return {
+      id: symbol,
+      label: symbol,
+      weight: Math.max(1, Math.abs(weight)),
+      colorValue: positionAdjustedChangePercent(ticker, financials, context, isPortfolioTab),
+      primaryText: primary,
+      secondaryText: secondary,
+      tertiaryText: tertiary,
+      data: ticker,
+    };
+  });
+}
+
+export function PortfolioGrid({
+  sortedTickers,
+  financialsMap,
+  columnContext,
+  isPortfolioTab,
+  cursorSymbol,
+  setCursorSymbol,
+  onRowActivate,
+  onToggleViewMode,
+  focused,
+  width,
+  height,
+}: {
+  sortedTickers: TickerRecord[];
+  financialsMap: Map<string, TickerFinancials>;
+  columnContext: ColumnContext;
+  isPortfolioTab: boolean;
+  cursorSymbol: string | null;
+  setCursorSymbol: (symbol: string) => void;
+  onRowActivate: (ticker: TickerRecord) => void;
+  onToggleViewMode: () => void;
+  focused?: boolean;
+  width: number;
+  height: number;
+}) {
+  const { cellWidthPx = 8, cellHeightPx = 18, nativePaneChrome } = useUiCapabilities();
+  const chartWidth = Math.max(1, width - 2);
+  const cellAspect = Math.max(0.5, Math.min(4, cellHeightPx / Math.max(1, cellWidthPx)));
+  const items = useMemo(
+    () => buildPortfolioGridItems(sortedTickers, financialsMap, columnContext, isPortfolioTab),
+    [columnContext, financialsMap, isPortfolioTab, sortedTickers],
+  );
+  const navigationTiles = useMemo(
+    () => buildMetricTreemapNavigationTiles(items, chartWidth, height, cellAspect, nativePaneChrome ? "float" : "integer"),
+    [cellAspect, chartWidth, height, items, nativePaneChrome],
+  );
+  const selectedIdx = cursorSymbol
+    ? sortedTickers.findIndex((ticker) => ticker.metadata.ticker === cursorSymbol)
+    : -1;
+  const activeIdx = selectedIdx >= 0 ? selectedIdx : (sortedTickers.length > 0 ? 0 : -1);
+
+  const selectIndex = useCallback((index: number) => {
+    const ticker = sortedTickers[index];
+    if (ticker) setCursorSymbol(ticker.metadata.ticker);
+  }, [setCursorSymbol, sortedTickers]);
+
+  const selectNeighbor = useCallback((direction: MetricTreemapDirection) => {
+    const target = findMetricTreemapNeighbor(navigationTiles, cursorSymbol, direction);
+    if (target) setCursorSymbol(target.item.data.metadata.ticker);
+  }, [cursorSymbol, navigationTiles, setCursorSymbol]);
+
+  useShortcut((event) => {
+    if (!focused) return;
+    if (isPlainKey(event, "s")) {
+      event.preventDefault();
+      event.stopPropagation();
+      onToggleViewMode();
+      return;
+    }
+    if (isPlainKey(event, "j")) {
+      event.preventDefault();
+      event.stopPropagation();
+      selectIndex(Math.min((activeIdx >= 0 ? activeIdx : 0) + 1, sortedTickers.length - 1));
+      return;
+    }
+    if (isPlainKey(event, "k")) {
+      event.preventDefault();
+      event.stopPropagation();
+      selectIndex(Math.max((activeIdx >= 0 ? activeIdx : 0) - 1, 0));
+      return;
+    }
+    if (isPlainKey(event, "left", "h")) {
+      event.preventDefault();
+      event.stopPropagation();
+      selectNeighbor("left");
+      return;
+    }
+    if (isPlainKey(event, "right", "l")) {
+      event.preventDefault();
+      event.stopPropagation();
+      selectNeighbor("right");
+      return;
+    }
+    if (isPlainKey(event, "up")) {
+      event.preventDefault();
+      event.stopPropagation();
+      selectNeighbor("up");
+      return;
+    }
+    if (isPlainKey(event, "down")) {
+      event.preventDefault();
+      event.stopPropagation();
+      selectNeighbor("down");
+      return;
+    }
+    if (isPlainKey(event, "enter", "return")) {
+      const ticker = sortedTickers[activeIdx];
+      if (!ticker) return;
+      event.preventDefault();
+      event.stopPropagation();
+      onRowActivate(ticker);
+    }
+  }, { enabled: focused });
+
+  return (
+    <MetricTreemapSurface
+      items={items}
+      width={width}
+      height={height}
+      selectedId={cursorSymbol}
+      onSelect={(item) => setCursorSymbol(item.data.metadata.ticker)}
+      onActivate={(item) => onRowActivate(item.data)}
+      emptyStateTitle={isPortfolioTab ? "No portfolio positions" : "No watchlist tickers"}
+    />
+  );
+}

package/src/plugins/builtin/portfolio-list/index.test.ts

@@ -1,11 +1,13 @@
 import { describe, expect, test } from "bun:test";
 import { createDefaultConfig } from "../../../types/config";
+import type { Quote, TickerFinancials } from "../../../types/financials";
 import type { BrokerAccount } from "../../../types/trading";
 import type { TickerRecord } from "../../../types/ticker";
 import type { PortfolioSummaryTotals } from "./metrics";
 import { buildPortfolioSummarySegments } from "./summary";
 import { portfolioListPlugin, shouldToggleCashMarginDrawer } from ".";
-import { selectStreamTickers } from "./pane/data";
+import { needsVisibleQuoteWatchdogRefresh, selectStreamTickers } from "./pane/data";
+import { buildPortfolioPaneSettingsDef, getPortfolioPaneSettings } from "./settings";
 
 function ticker(symbol: string): TickerRecord {
   return {
@@ -132,6 +134,43 @@ describe("selectStreamTickers", () => {
   });
 });
 
+describe("visible quote refresh predicates", () => {
+  function quote(overrides: Partial<Quote> = {}): Quote {
+    return {
+      symbol: "AAPL",
+      price: 125,
+      currency: "USD",
+      change: 5,
+      changePercent: 4.17,
+      lastUpdated: 1_700_000_000_000,
+      ...overrides,
+    };
+  }
+
+  function financials(quoteValue: Quote | undefined): TickerFinancials {
+    return {
+      annualStatements: [],
+      quarterlyStatements: [],
+      priceHistory: [],
+      quote: quoteValue,
+    };
+  }
+
+  test("refreshes visible quotes when the local stream timestamp is too old", () => {
+    const now = 1_700_000_120_000;
+    expect(needsVisibleQuoteWatchdogRefresh(
+      financials(quote({ lastUpdated: now, receivedAt: now - 61_000 })),
+      now,
+      60_000,
+    )).toBe(true);
+    expect(needsVisibleQuoteWatchdogRefresh(
+      financials(quote({ lastUpdated: now, receivedAt: now - 10_000 })),
+      now,
+      60_000,
+    )).toBe(false);
+  });
+});
+
 describe("portfolio list pane templates", () => {
   test("create panes with default all-collection settings", async () => {
     const config = createDefaultConfig("/tmp/gloomberb-portfolio-list-template");
@@ -154,3 +193,15 @@ describe("portfolio list pane templates", () => {
     expect(portfolioInstance).toEqual({ params: { collectionId: "main" } });
   });
 });
+
+describe("portfolio list pane settings", () => {
+  test("exposes view mode only for portfolio collections", () => {
+    const config = createDefaultConfig("/tmp/gloomberb-portfolio-list-settings");
+    const settings = getPortfolioPaneSettings({ viewMode: "grid" });
+    const portfolioFields = buildPortfolioPaneSettingsDef(config, settings, "main").fields.map((field) => field.key);
+    const watchlistFields = buildPortfolioPaneSettingsDef(config, settings, "watchlist").fields.map((field) => field.key);
+
+    expect(portfolioFields).toContain("viewMode");
+    expect(watchlistFields).not.toContain("viewMode");
+  });
+});

package/src/plugins/builtin/portfolio-list/index.tsx

@@ -48,6 +48,7 @@ export const portfolioListPlugin: GloomPlugin = {
       settings: (context) => buildPortfolioPaneSettingsDef(
         context.config,
         getPortfolioPaneSettings(context.settings),
+        context.activeCollectionId,
       ),
     },
   ],

package/src/plugins/builtin/portfolio-list/pane/data.ts

@@ -5,11 +5,15 @@ import type { TickerFinancials } from "../../../../types/financials";
 import type { TickerRecord } from "../../../../types/ticker";
 import type { CollectionSortPreference } from "../../../../state/app/context";
 import { isQuoteStaleForCurrentSession } from "../../../../market-data/quotes/freshness";
+import { resolveQuoteAgeTimestamp } from "../../../../market-data/quotes/time";
 import { compareSortValues } from "../../../../utils/sort-values";
 import { getSortValue, type ColumnContext } from "../metrics";
 import type { ResolvedPortfolioAccountState } from "../summary";
 
-export const VISIBLE_FINANCIAL_REFRESH_COOLDOWN_MS = 5 * 60_000;
+export const VISIBLE_QUOTE_REFRESH_COOLDOWN_MS = 60_000;
+export const VISIBLE_QUOTE_STREAM_MAX_AGE_MS = 60_000;
+export const VISIBLE_QUOTE_STREAM_WATCHDOG_MS = 30_000;
+export const VISIBLE_SNAPSHOT_REFRESH_COOLDOWN_MS = 5 * 60_000;
 export const VISIBLE_FINANCIAL_WARMUP_DELAY_MS = 350;
 export const VISIBLE_SNAPSHOT_WARMUP_BATCH_LIMIT = 3;
 
@@ -40,6 +44,16 @@ export function needsVisibleQuoteWarmup(financials: TickerFinancials | undefined
   return !financials?.quote || isQuoteStaleForCurrentSession(financials.quote, now);
 }
 
+export function needsVisibleQuoteWatchdogRefresh(
+  financials: TickerFinancials | undefined,
+  now = Date.now(),
+  maxAgeMs = VISIBLE_QUOTE_STREAM_MAX_AGE_MS,
+): boolean {
+  if (needsVisibleQuoteWarmup(financials, now)) return true;
+  const quoteTimestamp = resolveQuoteAgeTimestamp(financials?.quote, now);
+  return quoteTimestamp == null || now - quoteTimestamp >= maxAgeMs;
+}
+
 export function needsVisibleSnapshotWarmup(
   ticker: TickerRecord,
   financials: TickerFinancials | undefined,

package/src/plugins/builtin/portfolio-list/pane/index.test.tsx

@@ -687,6 +687,73 @@ describe("PortfolioListPane cash and margin UI", () => {
     expect(frame).toContain("25.00%");
   });
 
+  test("renders portfolio grid from portfolio table values and opens the selected ticker", async () => {
+    const portfolioId = "broker:ibkr-flex:DU12345";
+    const config = createPortfolioConfig(portfolioId, [createBrokerInstance("flex")]);
+    const instance = config.layout.instances.find((entry) => entry.instanceId === TEST_PANE_ID);
+    if (instance) {
+      instance.settings = {
+        ...(instance.settings ?? {}),
+        viewMode: "grid",
+      };
+    }
+    const pinned: Array<{ symbol: string; options: { floating?: boolean; paneType?: string } | undefined }> = [];
+    const runtime = createTestPluginRuntime({
+      pinTicker: (symbol, options) => {
+        pinned.push({ symbol, options });
+      },
+    });
+
+    testSetup = await testRender(
+      <PortfolioHarness
+        config={config}
+        collectionId={portfolioId}
+        runtime={runtime}
+      />,
+      { width: 100, height: 12 },
+    );
+
+    await flushFrame();
+
+    const frame = testSetup.captureCharFrame();
+    expect(frame).toContain("AAPL");
+    expect(frame).toContain("1.3k");
+    expect(frame).toContain("+4.17%");
+
+    await act(async () => {
+      testSetup!.mockInput.pressEnter();
+      await testSetup!.renderOnce();
+    });
+
+    expect(pinned).toEqual([{ symbol: "AAPL", options: { floating: true, paneType: TICKER_RESEARCH_PANE_ID } }]);
+  });
+
+  test("keeps watchlists in table view when grid is saved on the pane", async () => {
+    const config = createManualCollectionConfig("watchlist");
+    const instance = config.layout.instances.find((entry) => entry.instanceId === TEST_PANE_ID);
+    if (instance) {
+      instance.settings = {
+        ...(instance.settings ?? {}),
+        viewMode: "grid",
+      };
+    }
+
+    testSetup = await testRender(
+      <PortfolioHarness
+        config={config}
+        collectionId="watchlist"
+        ticker={makeTicker({ portfolios: [], watchlists: ["watchlist"], positions: [] })}
+      />,
+      { width: 100, height: 12 },
+    );
+
+    await flushFrame();
+
+    const frame = testSetup.captureCharFrame();
+    expect(frame).toContain("TICKER");
+    expect(frame).toContain("AAPL");
+  });
+
   test("keeps option avg cost on premium scale and multiplies quoted value by contract size", async () => {
     const portfolioId = "broker:ibkr-flex:DU12345";
     const optionTicker = "SPY  260619C00500000";
@@ -924,6 +991,88 @@ describe("PortfolioListPane cash and margin UI", () => {
     expect(frame).toContain("22.0");
   });
 
+  test("force-refreshes stale quote data for visible rows", async () => {
+    const config = createPortfolioConfigWithColumns(
+      "broker:ibkr-flex:DU12345",
+      ["ticker", "price", "day_pnl"],
+      [createBrokerInstance("flex")],
+    );
+    const staleQuote = makeQuote({
+      price: 120,
+      change: 0,
+      changePercent: 0,
+      marketState: "PRE",
+      lastUpdated: Date.now() - 24 * 60 * 60 * 1000,
+    });
+    const batchOptions: Array<{ forceRefresh?: boolean } | undefined> = [];
+    const provider: DataProvider = {
+      id: "test-provider",
+      name: "Test Provider",
+      async getTickerFinancials() {
+        return {
+          annualStatements: [],
+          quarterlyStatements: [],
+          priceHistory: [],
+          quote: staleQuote,
+        };
+      },
+      async getQuotesBatch(targets, options) {
+        batchOptions.push(options);
+        return targets.map((target) => ({
+          target,
+          quote: makeQuote({
+            symbol: target.symbol,
+            price: 126,
+            change: 6,
+            changePercent: 5,
+            marketState: "PRE",
+            preMarketPrice: 126,
+            preMarketChange: 6,
+            preMarketChangePercent: 5,
+          }),
+        }));
+      },
+      async getQuote(symbol) {
+        return makeQuote({ symbol, price: 126 });
+      },
+      async getExchangeRate() {
+        return 1;
+      },
+      async search() {
+        return [];
+      },
+      async getArticleSummary() {
+        return null;
+      },
+      async getPriceHistory() {
+        return [];
+      },
+      subscribeQuotes() {
+        return () => {};
+      },
+    };
+    sharedCoordinator = new MarketDataCoordinator(provider);
+    setSharedMarketDataCoordinator(sharedCoordinator);
+
+    testSetup = await testRender(
+      <PortfolioHarness
+        config={config}
+        collectionId="broker:ibkr-flex:DU12345"
+        quote={staleQuote}
+      />,
+      { width: 100, height: 12 },
+    );
+
+    await flushFrame();
+    await act(async () => {
+      await new Promise((resolve) => setTimeout(resolve, 380));
+    });
+    await flushFrame();
+
+    expect(batchOptions.some((options) => options?.forceRefresh === true)).toBe(true);
+    expect(testSetup.captureCharFrame()).toContain("126");
+  });
+
   test("shows cached market cap on reopen for broker-linked rows", async () => {
     const dbPath = createTempDbPath("cached-reopen-market-cap");
     const persistence = new AppPersistence(dbPath);

package/src/plugins/builtin/portfolio-list/pane/index.tsx

@@ -13,6 +13,7 @@ import {
   useAppSelector,
   usePaneCollection,
   usePaneInstance,
+  usePaneSettingValue,
   usePaneStateValue,
   type CollectionSortPreference,
 } from "../../../../state/app/context";
@@ -33,9 +34,11 @@ import {
   resolveActiveCollectionId,
   resolveScopedCollectionEntries,
   resolveVisibleColumns,
+  type PortfolioViewMode,
 } from "../settings";
 import { useQuoteFlashMap } from "../../../../components/quote-flash";
 import { PortfolioTickerTable } from "../table";
+import { PortfolioGrid } from "../grid";
 import { useThrottledCursorSymbol } from "../use-throttled-cursor-symbol";
 import { isManualPortfolio } from "../mutations";
 import { QuickAddTickerInput, type QuickAddCollectionKind } from "../quick-add";
@@ -65,6 +68,7 @@ export function PortfolioListPane({ focused, width, height }: PaneProps) {
   const [committedCursorSymbol, setCommittedCursorSymbol] = usePaneStateValue<string | null>("cursorSymbol", null);
   const [collectionSorts, setCollectionSorts] = usePaneStateValue<Record<string, CollectionSortPreference>>("collectionSorts", {});
   const [cashDrawerExpanded, setCashDrawerExpanded] = usePaneStateValue<boolean>("cashDrawerExpanded", false);
+  const [, setViewMode] = usePaneSettingValue<PortfolioViewMode>("viewMode", "table");
 
   const [now, setNow] = useState(Date.now());
   const [streamWindow, setStreamWindow] = useState({ start: 0, end: 24 });
@@ -97,6 +101,7 @@ export function PortfolioListPane({ focused, width, height }: PaneProps) {
       ? config.portfolios.find((portfolio) => portfolio.id === activeCollectionId) ?? null
       : null
   ), [activeCollectionId, config.portfolios, isPortfolioTab]);
+  const viewMode: PortfolioViewMode = isPortfolioTab ? paneSettings.viewMode : "table";
 
   const tickers = useMemo(
     () => getCollectionTickersFromConfig(config, tickersBySymbol, activeCollectionId),
@@ -214,6 +219,11 @@ export function PortfolioListPane({ focused, width, height }: PaneProps) {
     pinTicker(symbol, { floating: true, paneType: TICKER_RESEARCH_PANE_ID });
   }, [pinTicker]);
 
+  const toggleViewMode = useCallback(() => {
+    if (!isPortfolioTab) return;
+    setViewMode((current) => current === "table" ? "grid" : "table");
+  }, [isPortfolioTab, setViewMode]);
+
   const handleRowActivate = useCallback((ticker: TickerRecord) => {
     flushCursorSymbol(ticker.metadata.ticker);
     openTickerFloating(ticker.metadata.ticker);
@@ -245,15 +255,24 @@ export function PortfolioListPane({ focused, width, height }: PaneProps) {
       return true;
     }
 
+    if (key === "s" && isPortfolioTab) {
+      event.preventDefault?.();
+      event.stopPropagation?.();
+      toggleViewMode();
+      return true;
+    }
+
     return false;
   }, [
     cashDrawerExpanded,
     focused,
+    isPortfolioTab,
     openTickerFloating,
     safeSelectedIdx,
     setCashDrawerExpanded,
     showCashDrawer,
     sortedTickers,
+    toggleViewMode,
   ]);
 
   useEffect(() => {
@@ -281,12 +300,18 @@ export function PortfolioListPane({ focused, width, height }: PaneProps) {
     }
   }, [cursorSymbol, setCursorSymbol, sortedTickers]);
 
+  const effectiveStreamWindow = useMemo(() => (
+    viewMode === "grid"
+      ? { start: 0, end: Math.min(sortedTickers.length, 96) }
+      : streamWindow
+  ), [sortedTickers.length, streamWindow, viewMode]);
+
   usePortfolioPaneStreaming({
     appActive,
     focused,
     sortedTickers,
     cursorSymbol,
-    streamWindow,
+    streamWindow: effectiveStreamWindow,
     isPortfolioTab,
     financialsMap,
     visibleWarmupRequirements,
@@ -341,7 +366,7 @@ export function PortfolioListPane({ focused, width, height }: PaneProps) {
   }, [activeCollectionId, config, currentPortfolio]);
   const showQuickAdd = !!(activeCollectionId && activeCollectionEntry && quickAddCollectionKind);
   const quickAddHeight = showQuickAdd ? 1 : 0;
-  const tableHeight = Math.max(1, height - headerHeight - drawerHeight - quickAddHeight);
+  const contentHeight = Math.max(1, height - headerHeight - drawerHeight - quickAddHeight);
   const quickAddRow = activeCollectionId && activeCollectionEntry && quickAddCollectionKind ? (
     <QuickAddTickerInput
       collectionId={activeCollectionId}
@@ -356,8 +381,8 @@ export function PortfolioListPane({ focused, width, height }: PaneProps) {
 
   return (
     <Box flexDirection="column" width={width} height={height}>
-      <Box flexDirection="column" height={headerHeight}>
-        {showCollectionTabs && (
+      {showCollectionTabs && (
+        <Box flexDirection="column" height={headerHeight}>
           <Box flexDirection="row" height={1}>
             <Box flexShrink={1} overflow="hidden">
               <Tabs
@@ -369,28 +394,44 @@ export function PortfolioListPane({ focused, width, height }: PaneProps) {
               />
             </Box>
           </Box>
-        )}
-      </Box>
-
-      <PortfolioTickerTable
-        columns={columns}
-        focused={focused && !quickAddFocused}
-        sortColumnId={activeSort.columnId}
-        sortDirection={activeSort.direction}
-        onHeaderClick={handleHeaderClick}
-        sortedTickers={sortedTickers}
-        cursorSymbol={cursorSymbol}
-        setCursorSymbol={setCursorSymbol}
-        financialsMap={financialsMap}
-        columnContext={columnContext}
-        flashSymbols={flashSymbols}
-        onRootKeyDown={handleTableKeyDown}
-        onVisibleRangeChange={handleVisibleRangeChange}
-        visibleRangeBuffer={3}
-        resetScrollKey={activeCollectionId}
-        onRowActivate={handleRowActivate}
-        rootHeight={tableHeight}
-      />
+        </Box>
+      )}
+
+      {viewMode === "table" ? (
+        <PortfolioTickerTable
+          columns={columns}
+          focused={focused && !quickAddFocused}
+          sortColumnId={activeSort.columnId}
+          sortDirection={activeSort.direction}
+          onHeaderClick={handleHeaderClick}
+          sortedTickers={sortedTickers}
+          cursorSymbol={cursorSymbol}
+          setCursorSymbol={setCursorSymbol}
+          financialsMap={financialsMap}
+          columnContext={columnContext}
+          flashSymbols={flashSymbols}
+          onRootKeyDown={handleTableKeyDown}
+          onVisibleRangeChange={handleVisibleRangeChange}
+          visibleRangeBuffer={3}
+          resetScrollKey={activeCollectionId}
+          onRowActivate={handleRowActivate}
+          rootHeight={contentHeight}
+        />
+      ) : (
+        <PortfolioGrid
+          sortedTickers={sortedTickers}
+          financialsMap={financialsMap}
+          columnContext={columnContext}
+          isPortfolioTab={isPortfolioTab}
+          cursorSymbol={cursorSymbol}
+          setCursorSymbol={(symbol) => setCursorSymbol(symbol)}
+          onRowActivate={handleRowActivate}
+          onToggleViewMode={toggleViewMode}
+          focused={focused && !quickAddFocused}
+          width={width}
+          height={contentHeight}
+        />
+      )}
 
       {quickAddRow}