gloomberb 0.5.0 → 0.6.0

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

@@ -1,36 +1,39 @@
+import { Box } from "../../../ui";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
-import { useKeyboard } from "@opentui/react";
-import type { ScrollBoxRenderable } from "@opentui/core";
-import { TabBar } from "../../../components/tab-bar";
-import { getSharedRegistry } from "../../registry";
+import {
+  Tabs,
+  usePaneFooter,
+  type DataTableKeyEvent,
+  type PaneFooterSegment,
+  type TickerListVisibleRange,
+} from "../../../components";
+import { createRowValueCache } from "../../../components/ui/row-value-cache";
+import { usePluginTickerActions } from "../../plugin-runtime";
 import { getSharedMarketDataCoordinator } from "../../../market-data/coordinator";
 import { useFxRatesMap, useTickerFinancialsMap } from "../../../market-data/hooks";
 import { instrumentFromTicker, quoteSubscriptionTargetFromTicker } from "../../../market-data/request-types";
 import { useAppActive } from "../../../state/app-activity";
 import {
-  useAppState,
+  useAppSelector,
   usePaneCollection,
   usePaneInstance,
-  usePaneInstanceId,
   usePaneStateValue,
   type CollectionSortPreference,
 } from "../../../state/app-context";
-import { getCollectionTickers, getCollectionType } from "../../../state/selectors";
 import { useQuoteStreaming } from "../../../state/use-quote-streaming";
 import { selectEffectiveExchangeRates } from "../../../utils/exchange-rate-map";
 import { getActiveQuoteDisplay } from "../../../utils/market-status";
-import type { ColumnConfig } from "../../../types/config";
+import type { AppConfig, ColumnConfig } from "../../../types/config";
 import type { TickerRecord } from "../../../types/ticker";
 import type { PaneProps } from "../../../types/plugin";
 import type { TickerFinancials } from "../../../types/financials";
-import { getSortValue, resolveCollectionSortPreference, type ColumnContext } from "./metrics";
+import { calculatePortfolioSummaryTotals, getSortValue, resolveCollectionSortPreference, type ColumnContext } from "./metrics";
 import {
   PortfolioCashMarginDrawer,
-  PortfolioSummaryBar,
   shouldToggleCashMarginDrawer,
   usePortfolioAccountState,
 } from "./header";
-import type { ResolvedPortfolioAccountState } from "./summary";
+import { buildPortfolioSummarySegments, type ResolvedPortfolioAccountState } from "./summary";
 import {
   getCollectionEntries,
   getPortfolioPaneSettings,
@@ -38,10 +41,16 @@ import {
   resolveScopedCollectionEntries,
   resolveVisibleColumns,
 } from "./settings";
+import { formatPercentRaw } from "../../../utils/format";
+import { getMostRecentQuoteUpdate } from "../../../utils/quote-time";
+import { priceColor } from "../../../theme/colors";
 import { PortfolioTickerTable, type QuoteFlashDirection } from "./table";
 import { useThrottledCursorSymbol } from "./use-throttled-cursor-symbol";
 
 const VISIBLE_FINANCIAL_REFRESH_COOLDOWN_MS = 5 * 60_000;
+const VISIBLE_FINANCIAL_WARMUP_DELAY_MS = 350;
+const STREAM_OVERSCAN_ROWS = 6;
+const sortValueCache = createRowValueCache<string, ReturnType<typeof getSortValue>>(5000);
 
 function needsVisibleFinancialWarmup(ticker: TickerRecord, financials: TickerFinancials | undefined): boolean {
   if (ticker.metadata.assetCategory === "OPT") return false;
@@ -50,11 +59,19 @@ function needsVisibleFinancialWarmup(ticker: TickerRecord, financials: TickerFin
   return financials.priceHistory.length === 0;
 }
 
-function selectStreamTickers(
+export function selectStreamTickers(
   tickers: TickerRecord[],
-  _visibleRange: { start: number; end: number },
+  visibleRange: { start: number; end: number },
+  selectedSymbol?: string | null,
 ) {
-  return tickers;
+  const start = Math.max(0, visibleRange.start - STREAM_OVERSCAN_ROWS);
+  const end = Math.min(tickers.length, visibleRange.end + STREAM_OVERSCAN_ROWS);
+  const visible = tickers.slice(start, end);
+  if (!selectedSymbol || visible.some((ticker) => ticker.metadata.ticker === selectedSymbol)) {
+    return visible;
+  }
+  const selectedTicker = tickers.find((ticker) => ticker.metadata.ticker === selectedSymbol);
+  return selectedTicker ? [...visible, selectedTicker] : visible;
 }
 
 function buildTrackedCurrencies(
@@ -92,6 +109,31 @@ function buildTrackedCurrencies(
   return [...currencies];
 }
 
+function getCollectionTypeFromConfig(config: AppConfig, collectionId: string | null): "portfolio" | "watchlist" | null {
+  if (!collectionId) return null;
+  if (config.portfolios.some((portfolio) => portfolio.id === collectionId)) return "portfolio";
+  if (config.watchlists.some((watchlist) => watchlist.id === collectionId)) return "watchlist";
+  return null;
+}
+
+function getCollectionTickersFromConfig(
+  config: AppConfig,
+  tickersBySymbol: Map<string, TickerRecord>,
+  collectionId: string | null,
+): TickerRecord[] {
+  if (!collectionId) return [];
+  const isPortfolio = config.portfolios.some((portfolio) => portfolio.id === collectionId);
+  const isWatchlist = !isPortfolio && config.watchlists.some((watchlist) => watchlist.id === collectionId);
+  if (!isPortfolio && !isWatchlist) return [];
+  return [...tickersBySymbol.values()]
+    .filter((ticker) => (
+      isPortfolio
+        ? ticker.metadata.portfolios.includes(collectionId)
+        : ticker.metadata.watchlists.includes(collectionId)
+    ))
+    .sort((left, right) => left.metadata.ticker.localeCompare(right.metadata.ticker));
+}
+
 function sortTickers(
   tickers: TickerRecord[],
   financialsMap: Map<string, TickerFinancials>,
@@ -103,10 +145,37 @@ function sortTickers(
 
   const sortColumn = columns.find((column) => column.id === sortPreference.columnId);
   if (!sortColumn) return tickers;
+  const exchangeRatesVersion = [...columnContext.exchangeRates]
+    .sort(([left], [right]) => left.localeCompare(right))
+    .map(([currency, rate]) => `${currency}:${rate}`)
+    .join(",");
+  const sortContextVersion = [
+    sortColumn.id,
+    columnContext.activeTab ?? "",
+    columnContext.baseCurrency,
+    exchangeRatesVersion,
+    sortColumn.id === "latency" ? columnContext.now : 0,
+  ].join("|");
+  const sortValues = new Map<string, ReturnType<typeof getSortValue>>();
+  for (const ticker of tickers) {
+    const financials = financialsMap.get(ticker.metadata.ticker);
+    const financialsVersion = [
+      financials?.quote?.lastUpdated ?? 0,
+      Object.keys(financials?.fundamentals ?? {}).length,
+      financials?.priceHistory.length ?? 0,
+    ].join(":");
+    const positionsVersion = JSON.stringify(ticker.metadata.positions);
+    const version = `${sortContextVersion}|${financialsVersion}|${positionsVersion}`;
+    sortValues.set(ticker.metadata.ticker, sortValueCache.get(
+      `${ticker.metadata.ticker}:${sortColumn.id}`,
+      version,
+      () => getSortValue(sortColumn, ticker, financials, columnContext),
+    ));
+  }
 
   return [...tickers].sort((leftTicker, rightTicker) => {
-    const leftValue = getSortValue(sortColumn, leftTicker, financialsMap.get(leftTicker.metadata.ticker), columnContext);
-    const rightValue = getSortValue(sortColumn, rightTicker, financialsMap.get(rightTicker.metadata.ticker), columnContext);
+    const leftValue = sortValues.get(leftTicker.metadata.ticker) ?? null;
+    const rightValue = sortValues.get(rightTicker.metadata.ticker) ?? null;
 
     if (leftValue == null && rightValue == null) return 0;
     if (leftValue == null) return 1;
@@ -121,11 +190,15 @@ function sortTickers(
 }
 
 export function PortfolioListPane({ focused, width, height }: PaneProps) {
-  const registry = getSharedRegistry();
-  const paneId = usePaneInstanceId();
+  const { pinTicker } = usePluginTickerActions();
   const paneInstance = usePaneInstance();
   const appActive = useAppActive();
-  const { state } = useAppState();
+  const config = useAppSelector((state) => state.config);
+  const tickersBySymbol = useAppSelector((state) => state.tickers);
+  const cachedFinancials = useAppSelector((state) => state.financials);
+  const cachedExchangeRates = useAppSelector((state) => state.exchangeRates);
+  const brokerAccounts = useAppSelector((state) => state.brokerAccounts);
+  const refreshingSize = useAppSelector((state) => state.refreshing.size);
   const paneCollection = usePaneCollection();
 
   const [currentCollectionId, setCurrentCollectionId] = usePaneStateValue<string>("collectionId", paneCollection.collectionId ?? "");
@@ -133,7 +206,6 @@ export function PortfolioListPane({ focused, width, height }: PaneProps) {
   const [collectionSorts, setCollectionSorts] = usePaneStateValue<Record<string, CollectionSortPreference>>("collectionSorts", {});
   const [cashDrawerExpanded, setCashDrawerExpanded] = usePaneStateValue<boolean>("cashDrawerExpanded", false);
 
-  const [hoveredIdx, setHoveredIdx] = useState<number | null>(null);
   const [now, setNow] = useState(Date.now());
   const [flashSymbols, setFlashSymbols] = useState<Map<string, QuoteFlashDirection>>(new Map());
   const [streamWindow, setStreamWindow] = useState({ start: 0, end: 24 });
@@ -142,8 +214,6 @@ export function PortfolioListPane({ focused, width, height }: PaneProps) {
   const mountedRef = useRef(true);
   const warmupInFlightRef = useRef(new Set<string>());
   const warmupAttemptRef = useRef(new Map<string, number>());
-  const scrollRef = useRef<ScrollBoxRenderable>(null);
-  const headerScrollRef = useRef<ScrollBoxRenderable>(null);
   const {
     cursorSymbol,
     setCursorSymbol,
@@ -156,54 +226,55 @@ export function PortfolioListPane({ focused, width, height }: PaneProps) {
     [paneInstance?.settings],
   );
   const collectionEntries = useMemo(
-    () => getCollectionEntries(state.config),
-    [state.config],
+    () => getCollectionEntries(config),
+    [config],
   );
   const visibleCollections = useMemo(
     () => resolveScopedCollectionEntries(collectionEntries, paneSettings),
     [collectionEntries, paneSettings],
   );
-  const activeCollectionId = resolveActiveCollectionId(currentCollectionId, visibleCollections, paneSettings);
-  const isPortfolioTab = getCollectionType(state, activeCollectionId) === "portfolio";
+  const activeCollectionId = resolveActiveCollectionId(currentCollectionId, visibleCollections);
+  const isPortfolioTab = getCollectionTypeFromConfig(config, activeCollectionId) === "portfolio";
   const currentPortfolio = useMemo(() => (
     isPortfolioTab
-      ? state.config.portfolios.find((portfolio) => portfolio.id === activeCollectionId) ?? null
+      ? config.portfolios.find((portfolio) => portfolio.id === activeCollectionId) ?? null
       : null
-  ), [activeCollectionId, isPortfolioTab, state.config.portfolios]);
+  ), [activeCollectionId, config.portfolios, isPortfolioTab]);
 
   const tickers = useMemo(
-    () => getCollectionTickers(state, activeCollectionId),
-    [activeCollectionId, state.config.portfolios, state.config.watchlists, state.tickers],
+    () => getCollectionTickersFromConfig(config, tickersBySymbol, activeCollectionId),
+    [activeCollectionId, config, tickersBySymbol],
   );
   const marketFinancialsMap = useTickerFinancialsMap(tickers);
   const sharedCoordinator = getSharedMarketDataCoordinator();
   const financialsMap = useMemo(() => {
-    const merged = sharedCoordinator ? new Map<string, TickerFinancials>() : new Map(state.financials);
+    const merged = sharedCoordinator ? new Map<string, TickerFinancials>() : new Map(cachedFinancials);
     for (const [symbol, financials] of marketFinancialsMap) {
       merged.set(symbol, financials);
     }
     return merged;
-  }, [marketFinancialsMap, sharedCoordinator, state.financials]);
+  }, [cachedFinancials, marketFinancialsMap, sharedCoordinator]);
 
-  const accountState = usePortfolioAccountState(currentPortfolio, state);
+  const accountStateInput = useMemo(() => ({ brokerAccounts, config }), [brokerAccounts, config]);
+  const accountState = usePortfolioAccountState(currentPortfolio, accountStateInput);
   const columns = useMemo(
     () => resolveVisibleColumns(paneSettings.columnIds, isPortfolioTab),
     [isPortfolioTab, paneSettings.columnIds],
   );
 
   const trackedCurrencies = useMemo(
-    () => buildTrackedCurrencies(tickers, financialsMap, accountState, state.config.baseCurrency),
-    [tickers, financialsMap, accountState, state.config.baseCurrency],
+    () => buildTrackedCurrencies(tickers, financialsMap, accountState, config.baseCurrency),
+    [accountState, config.baseCurrency, financialsMap, tickers],
   );
   const fetchedExchangeRates = useFxRatesMap(trackedCurrencies);
-  const effectiveExchangeRates = selectEffectiveExchangeRates(fetchedExchangeRates, state.exchangeRates);
+  const effectiveExchangeRates = selectEffectiveExchangeRates(fetchedExchangeRates, cachedExchangeRates);
 
   const columnContext: ColumnContext = useMemo(() => ({
     activeTab: isPortfolioTab ? activeCollectionId : undefined,
-    baseCurrency: state.config.baseCurrency,
+    baseCurrency: config.baseCurrency,
     exchangeRates: effectiveExchangeRates,
     now,
-  }), [activeCollectionId, effectiveExchangeRates, isPortfolioTab, now, state.config.baseCurrency]);
+  }), [activeCollectionId, config.baseCurrency, effectiveExchangeRates, isPortfolioTab, now]);
 
   const activeSort = resolveCollectionSortPreference(activeCollectionId, isPortfolioTab, collectionSorts);
   const sortedTickers = useMemo(
@@ -219,37 +290,17 @@ export function PortfolioListPane({ focused, width, height }: PaneProps) {
   const requestedDrawerHeight = showCashDrawer
     ? (cashDrawerExpanded ? Math.min(6, Math.max(3, 2 + accountState.visibleCashBalances.length)) : 1)
     : 0;
-  const headerHeight = paneSettings.hideHeader
-    ? (paneSettings.hideTabs ? 0 : 1)
-    : paneSettings.hideTabs ? 1 : 2;
+  const showCollectionTabs = visibleCollections.length > 1;
+  const headerHeight = showCollectionTabs ? 1 : 0;
   const drawerHeight = showCashDrawer
     ? Math.min(requestedDrawerHeight, Math.max(1, height - (headerHeight + 2)))
     : 0;
 
-  const syncHeaderScroll = useCallback(() => {
-    const bodyScrollBox = scrollRef.current;
-    const headerScrollBox = headerScrollRef.current;
-    if (bodyScrollBox && headerScrollBox && headerScrollBox.scrollLeft !== bodyScrollBox.scrollLeft) {
-      headerScrollBox.scrollLeft = bodyScrollBox.scrollLeft;
-    }
-  }, []);
-
-  const updateStreamWindow = useCallback(() => {
-    const scrollBox = scrollRef.current;
-    if (!scrollBox) return;
-
-    const buffer = 3;
-    const start = Math.max(0, scrollBox.scrollTop - buffer);
-    const end = Math.min(sortedTickers.length, scrollBox.scrollTop + scrollBox.viewport.height + buffer);
+  const handleVisibleRangeChange = useCallback(({ start, end }: TickerListVisibleRange) => {
     setStreamWindow((current) => (
       current.start === start && current.end === end ? current : { start, end }
     ));
-  }, [sortedTickers.length]);
-
-  const handleBodyScrollActivity = useCallback(() => {
-    syncHeaderScroll();
-    updateStreamWindow();
-  }, [syncHeaderScroll, updateStreamWindow]);
+  }, []);
 
   const handleCollectionSelect = useCallback((collectionId: string) => {
     cancelPendingCursorSymbol();
@@ -276,77 +327,69 @@ export function PortfolioListPane({ focused, width, height }: PaneProps) {
     setSortPreference({ columnId, direction: "asc" });
   }, [activeSort.columnId, activeSort.direction, setSortPreference]);
 
-  const handleKeyboard = useCallback((event: { name?: string; shift?: boolean }) => {
+  const openTickerFloating = useCallback((symbol: string) => {
+    pinTicker(symbol, { floating: true, paneType: "ticker-detail" });
+  }, [pinTicker]);
+
+  const handleRowActivate = useCallback((ticker: TickerRecord) => {
+    flushCursorSymbol(ticker.metadata.ticker);
+    openTickerFloating(ticker.metadata.ticker);
+  }, [flushCursorSymbol, openTickerFloating]);
+
+  const handleTableKeyDown = useCallback((event: DataTableKeyEvent) => {
     if (!focused) return;
 
     const key = event.name;
     const isEnter = key === "enter" || key === "return";
 
     if (isEnter && event.shift) {
+      event.preventDefault?.();
+      event.stopPropagation?.();
       const ticker = sortedTickers[safeSelectedIdx];
       if (ticker) {
-        registry?.pinTickerFn(ticker.metadata.ticker, { floating: true, paneType: "ticker-detail" });
+        openTickerFloating(ticker.metadata.ticker);
       }
-      return;
+      return true;
     }
 
     if (shouldToggleCashMarginDrawer(key, showCashDrawer)) {
+      event.preventDefault?.();
+      event.stopPropagation?.();
       setCashDrawerExpanded(!cashDrawerExpanded);
-      return;
+      return true;
     }
 
-    if (key === "j" || key === "down") {
-      const nextTicker = sortedTickers[Math.min(safeSelectedIdx + 1, sortedTickers.length - 1)];
-      if (nextTicker) setCursorSymbol(nextTicker.metadata.ticker);
-      return;
-    }
-
-    if (key === "k" || key === "up") {
-      const nextTicker = sortedTickers[Math.max(safeSelectedIdx - 1, 0)];
-      if (nextTicker) setCursorSymbol(nextTicker.metadata.ticker);
-      return;
-    }
-
-    if (!paneSettings.hideTabs && (key === "h" || key === "left")) {
+    if (showCollectionTabs && (key === "h" || key === "left")) {
+      event.preventDefault?.();
+      event.stopPropagation?.();
       const previousCollection = visibleCollections[Math.max(currentTabIdx - 1, 0)];
       if (previousCollection) handleCollectionSelect(previousCollection.id);
-      return;
+      return true;
     }
 
-    if (!paneSettings.hideTabs && (key === "l" || key === "right")) {
+    if (showCollectionTabs && (key === "l" || key === "right")) {
+      event.preventDefault?.();
+      event.stopPropagation?.();
       const nextCollection = visibleCollections[Math.min(currentTabIdx + 1, visibleCollections.length - 1)];
       if (nextCollection) handleCollectionSelect(nextCollection.id);
-      return;
+      return true;
     }
 
-    if (!isEnter) return;
-
-    flushCursorSymbol(cursorSymbol);
-
-    const ticker = sortedTickers[safeSelectedIdx];
-    if (ticker) {
-      registry?.navigateTickerFn(ticker.metadata.ticker);
-    }
+    return false;
   }, [
     cashDrawerExpanded,
     currentTabIdx,
     focused,
-    paneId,
-    paneSettings.hideTabs,
-    registry,
+    openTickerFloating,
     safeSelectedIdx,
     setCashDrawerExpanded,
-    setCursorSymbol,
-    flushCursorSymbol,
     handleCollectionSelect,
     showCashDrawer,
+    showCollectionTabs,
     sortedTickers,
-    state.config.layout.instances,
     visibleCollections,
   ]);
 
-  useKeyboard(handleKeyboard);
-
   useEffect(() => {
     if (activeCollectionId !== currentCollectionId) {
       cancelPendingCursorSymbol();
@@ -360,33 +403,6 @@ export function PortfolioListPane({ focused, width, height }: PaneProps) {
     };
   }, []);
 
-  useEffect(() => {
-    if (headerScrollRef.current) {
-      headerScrollRef.current.horizontalScrollBar.visible = false;
-    }
-    syncHeaderScroll();
-  }, [syncHeaderScroll]);
-
-  useEffect(() => {
-    const scrollBox = scrollRef.current;
-    if (!scrollBox) return;
-
-    const viewportHeight = scrollBox.viewport.height;
-    if (safeSelectedIdx < scrollBox.scrollTop) {
-      scrollBox.scrollTo(safeSelectedIdx);
-    } else if (safeSelectedIdx >= scrollBox.scrollTop + viewportHeight) {
-      scrollBox.scrollTo(safeSelectedIdx - viewportHeight + 1);
-    }
-    queueMicrotask(updateStreamWindow);
-  }, [safeSelectedIdx, updateStreamWindow]);
-
-  useEffect(() => {
-    const scrollBox = scrollRef.current;
-    if (!scrollBox) return;
-    scrollBox.verticalScrollBar.visible = sortedTickers.length > scrollBox.viewport.height;
-    updateStreamWindow();
-  }, [sortedTickers.length, drawerHeight, cashDrawerExpanded, updateStreamWindow]);
-
   useEffect(() => {
     if (!appActive) return;
     const timerId = setInterval(() => setNow(Date.now()), 1000);
@@ -427,8 +443,8 @@ export function PortfolioListPane({ focused, width, height }: PaneProps) {
   }, [cursorSymbol, setCursorSymbol, sortedTickers]);
 
   const streamTickers = useMemo(
-    () => selectStreamTickers(sortedTickers, streamWindow),
-    [sortedTickers, streamWindow],
+    () => selectStreamTickers(sortedTickers, streamWindow, cursorSymbol),
+    [cursorSymbol, sortedTickers, streamWindow],
   );
   const streamTargets = useMemo(() => (
     streamTickers
@@ -442,6 +458,7 @@ export function PortfolioListPane({ focused, width, height }: PaneProps) {
 
   useEffect(() => {
     if (!appActive) return;
+    if (!focused) return;
     if (!sharedCoordinator) return;
 
     const nowTimestamp = Date.now();
@@ -453,7 +470,9 @@ export function PortfolioListPane({ focused, width, height }: PaneProps) {
     });
     if (queue.length === 0) return;
 
+    let cancelled = false;
     const runNext = async (): Promise<void> => {
+      if (cancelled) return;
       const nextTicker = queue.shift();
       if (!nextTicker) return;
 
@@ -471,70 +490,133 @@ export function PortfolioListPane({ focused, width, height }: PaneProps) {
         warmupInFlightRef.current.delete(key);
       }
 
-      if (mountedRef.current) {
+      if (mountedRef.current && !cancelled) {
         await runNext();
       }
     };
 
-    const workers = Array.from({ length: Math.min(3, queue.length) }, () => runNext());
-    void Promise.all(workers);
-  }, [appActive, financialsMap, sharedCoordinator, visibleFinancialTickers]);
+    const timeoutId = setTimeout(() => {
+      void runNext();
+    }, VISIBLE_FINANCIAL_WARMUP_DELAY_MS);
+
+    return () => {
+      cancelled = true;
+      clearTimeout(timeoutId);
+    };
+  }, [appActive, financialsMap, focused, sharedCoordinator, visibleFinancialTickers]);
 
   useQuoteStreaming(streamTargets);
 
+  const summaryFooterInfo = useMemo<PaneFooterSegment[]>(() => {
+    if (paneSettings.hideHeader) return [];
+
+    const lastRefreshTimestamp = getMostRecentQuoteUpdate(
+      sortedTickers.map((ticker) => financialsMap.get(ticker.metadata.ticker)?.quote),
+    );
+    const refreshText = refreshingSize > 0
+      ? "Refreshing..."
+      : lastRefreshTimestamp != null
+        ? new Date(lastRefreshTimestamp).toLocaleTimeString("en-US", { hour: "numeric", minute: "2-digit" })
+        : "-";
+    const totals = calculatePortfolioSummaryTotals(
+      sortedTickers,
+      financialsMap,
+      config.baseCurrency,
+      effectiveExchangeRates,
+      isPortfolioTab,
+      activeCollectionId,
+    );
+
+    if (!isPortfolioTab) {
+      if (totals.watchlistCount === 0) return [];
+      return [
+        {
+          id: "avg-day",
+          parts: [
+            { text: "Avg Day", tone: "label" },
+            { text: formatPercentRaw(totals.avgWatchlistChange), tone: "value", color: priceColor(totals.avgWatchlistChange), bold: true },
+          ],
+        },
+        {
+          id: "refresh",
+          parts: [{ text: refreshText, tone: "muted" }],
+        },
+      ];
+    }
+
+    if (!totals.hasPositions && !accountState) return [];
+    return buildPortfolioSummarySegments({
+      totals,
+      accountState: accountState ? { account: accountState.account, sourceLabel: accountState.sourceLabel } : null,
+      widthBudget: Math.max(16, width - 14),
+      refreshText,
+    }).map((segment) => ({
+      id: segment.id,
+      parts: segment.parts,
+    }));
+  }, [
+    accountState,
+    activeCollectionId,
+    effectiveExchangeRates,
+    financialsMap,
+    isPortfolioTab,
+    paneSettings.hideHeader,
+    config.baseCurrency,
+    refreshingSize,
+    sortedTickers,
+    width,
+  ]);
+
+  usePaneFooter("portfolio-list", () => ({
+    info: summaryFooterInfo,
+    hints: showCashDrawer
+      ? [{
+          id: "cash",
+          key: "c",
+          label: "ash",
+          onPress: () => setCashDrawerExpanded(!cashDrawerExpanded),
+        }]
+      : [],
+  }), [cashDrawerExpanded, setCashDrawerExpanded, showCashDrawer, summaryFooterInfo]);
+
   return (
-    <box flexDirection="column" flexGrow={1}>
-      <box flexDirection="column" height={headerHeight}>
-        {!paneSettings.hideTabs && (
-          <box flexDirection="row" height={1}>
-            <box flexShrink={1} overflow="hidden">
-              <TabBar
+    <Box flexDirection="column" width={width} height={height}>
+      <Box flexDirection="column" height={headerHeight}>
+        {showCollectionTabs && (
+          <Box flexDirection="row" height={1}>
+            <Box flexShrink={1} overflow="hidden">
+              <Tabs
                 tabs={visibleCollections.map((collection) => ({ label: collection.name, value: collection.id }))}
                 activeValue={activeCollectionId}
                 onSelect={handleCollectionSelect}
                 compact
               />
-            </box>
-          </box>
-        )}
-        {!paneSettings.hideHeader && (
-          <box height={1}>
-            <PortfolioSummaryBar
-              tickers={sortedTickers}
-              financialsMap={financialsMap}
-              baseCurrency={state.config.baseCurrency}
-              exchangeRates={effectiveExchangeRates}
-              refreshingCount={state.refreshing.size}
-              isPortfolio={isPortfolioTab}
-              collectionId={activeCollectionId}
-              width={Math.max(0, width)}
-              accountState={accountState}
-            />
-          </box>
+            </Box>
+          </Box>
         )}
-      </box>
+      </Box>
 
       <PortfolioTickerTable
         columns={columns}
+        focused={focused}
         sortColumnId={activeSort.columnId}
         sortDirection={activeSort.direction}
         onHeaderClick={handleHeaderClick}
-        headerScrollRef={headerScrollRef}
-        scrollRef={scrollRef}
-        syncHeaderScroll={syncHeaderScroll}
-        onBodyScrollActivity={handleBodyScrollActivity}
         sortedTickers={sortedTickers}
         cursorSymbol={cursorSymbol}
-        hoveredIdx={hoveredIdx}
-        setHoveredIdx={setHoveredIdx}
         setCursorSymbol={setCursorSymbol}
         financialsMap={financialsMap}
         columnContext={columnContext}
         flashSymbols={flashSymbols}
+        onRootKeyDown={handleTableKeyDown}
+        onVisibleRangeChange={handleVisibleRangeChange}
+        visibleRangeBuffer={3}
+        resetScrollKey={activeCollectionId}
+        onRowActivate={handleRowActivate}
       />
 
       {showCashDrawer && accountState && (
-        <box height={drawerHeight} paddingX={1}>
+        <Box height={drawerHeight} paddingX={1}>
           <PortfolioCashMarginDrawer
             accountState={accountState}
             expanded={cashDrawerExpanded}
@@ -542,8 +624,8 @@ export function PortfolioListPane({ focused, width, height }: PaneProps) {
             width={Math.max(0, width - 2)}
             height={drawerHeight}
           />
-        </box>
+        </Box>
       )}
-    </box>
+    </Box>
   );
 }