gloomberb 0.9.1 → 0.9.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "gloomberb",
-  "version": "0.9.1",
+  "version": "0.9.2",
   "description": "Market research and portfolio tracker for the terminal",
   "module": "src/index.tsx",
   "type": "module",

package/src/components/chart/comparison-stock-chart/helpers.ts

@@ -2,8 +2,6 @@ import type { PricePoint } from "../../../types/financials";
 import type { LocalPlotPointer } from "../core/pointer";
 import type { ComparisonChartRenderMode } from "../core/types";
 import type { projectComparisonChartData } from "../comparison/data";
-import { formatPercentRaw } from "../../../utils/format";
-import { formatMarketPriceWithCurrency } from "../../../market-data/market/format";
 
 export function clamp(value: number, min: number, max: number): number {
   return Math.max(min, Math.min(max, value));
@@ -42,36 +40,6 @@ export function buildComparisonNativeBitmapKey(
   ].join("::");
 }
 
-export function getLegendColumns(width: number): number {
-  if (width >= 110) return 3;
-  if (width >= 72) return 2;
-  return 1;
-}
-
-export function clipText(text: string, width: number): string {
-  if (width <= 0) return "";
-  if (text.length <= width) return text.padEnd(width);
-  if (width <= 3) return text.slice(0, width);
-  return `${text.slice(0, width - 3)}...`;
-}
-
-export function formatLegendSummary(
-  symbol: string,
-  rawValue: number | null,
-  baseValue: number | null,
-  currency: string,
-  priceRange: number | undefined,
-): string {
-  if (rawValue === null) return `${symbol} waiting`;
-  const price = formatMarketPriceWithCurrency(rawValue, currency, {
-    minimumFractionDigits: 2,
-    precisionOffset: 1,
-    priceRange,
-  });
-  if (baseValue === null || baseValue === 0) return `${symbol} ${price}`;
-  return `${symbol} ${price} ${formatPercentRaw(((rawValue - baseValue) / baseValue) * 100)}`;
-}
-
 export function getInitialComparisonMode(mode: string | undefined): ComparisonChartRenderMode {
   return mode === "line" ? "line" : "area";
 }

package/src/components/chart/comparison-stock-chart/layout-metrics.ts

@@ -1,5 +1,4 @@
 import type { ChartAxisMode } from "../core/types";
-import { getLegendColumns } from "./helpers";
 
 export interface ComparisonChartLayoutMetrics {
   axisGap: number;
@@ -36,15 +35,16 @@ export function resolveComparisonChartLayoutMetrics({
   const controlRows = 2;
   const timeAxisRows = 1;
   const helpRows = 0;
-  const legendColumns = getLegendColumns(width);
-  const legendNeededRows = symbolCount > 0 ? Math.ceil(symbolCount / legendColumns) : 0;
-  const legendRows = legendNeededRows > 0
-    ? Math.min(4, Math.max(Math.min(height - (headerRows + controlRows + timeAxisRows + helpRows + 4), legendNeededRows), 1))
+  const legendColumns = 1;
+  const legendNeededRows = symbolCount > 0 ? symbolCount + 1 : 0;
+  const legendAvailableRows = Math.max(height - (headerRows + controlRows + timeAxisRows + helpRows + 6), 0);
+  const legendRows = legendNeededRows > 0 && legendAvailableRows > 0
+    ? Math.min(5, Math.max(2, Math.min(legendAvailableRows, legendNeededRows)))
     : 0;
   const chartHeight = Math.max(height - headerRows - controlRows - timeAxisRows - helpRows - legendRows, 4);
   const minChartWidth = 20;
   const measurementChartWidth = Math.max(width - axisSectionWidthBudget - axisGap, minChartWidth);
-  const legendItemWidth = Math.max(Math.floor((width - Math.max(legendColumns - 1, 0)) / legendColumns), 20);
+  const legendItemWidth = Math.max(width, 20);
 
   return {
     axisGap,

package/src/components/chart/comparison-stock-chart/legend.tsx

@@ -1,73 +1,70 @@
-import { Box, ScrollBox, Text, TextAttributes } from "../../../ui";
-import { blendHex, colors } from "../../../theme/colors";
 import type { ComparisonChartProjection } from "../comparison/data";
-import { clipText, formatLegendSummary } from "./helpers";
+import { PriceReturnTable, type PriceReturnTableRow } from "../../price-performance";
+import type { PriceReturnField } from "../../../market-data/performance";
 
 interface ComparisonChartLegendProps {
   legendActiveIndex: number | null;
-  legendColumns: number;
   legendItemWidth: number;
   legendRows: number;
   onOpenSymbol: (symbol: string) => void;
   onSelectSymbol: (symbol: string) => void;
+  performanceBySymbol: ReadonlyMap<string, PriceReturnField[]>;
   projection: ComparisonChartProjection;
   selectedSymbol: string | null;
   symbols: string[];
-  visiblePriceRange: number | undefined;
+}
+
+function buildRangeReturnField(
+  item: ComparisonChartProjection["series"][number] | null,
+  legendActiveIndex: number | null,
+): PriceReturnField {
+  const activeRaw = legendActiveIndex !== null
+    ? item?.points[legendActiveIndex]?.rawValue ?? null
+    : item?.latestRawValue ?? null;
+  const baseValue = item?.baseValue ?? null;
+  const value = activeRaw != null && baseValue != null && baseValue !== 0
+    ? (activeRaw - baseValue) / baseValue
+    : null;
+  return {
+    id: "RNG",
+    label: "Rng",
+    value,
+  };
 }
 
 export function ComparisonChartLegend({
   legendActiveIndex,
-  legendColumns,
   legendItemWidth,
   legendRows,
   onOpenSymbol,
   onSelectSymbol,
+  performanceBySymbol,
   projection,
   selectedSymbol,
   symbols,
-  visiblePriceRange,
 }: ComparisonChartLegendProps) {
   if (legendRows <= 0) return null;
 
-  const legendRowsData = Array.from({ length: Math.ceil(symbols.length / legendColumns) }, (_, rowIndex) => (
-    symbols.slice(rowIndex * legendColumns, rowIndex * legendColumns + legendColumns)
-  ));
+  const rows: PriceReturnTableRow[] = symbols.map((symbol) => {
+    const item = projection.series.find((entry) => entry.symbol === symbol) ?? null;
+    return {
+      symbol,
+      color: item?.color ?? "#888888",
+      fields: [
+        buildRangeReturnField(item, legendActiveIndex),
+        ...(performanceBySymbol.get(symbol) ?? []),
+      ],
+      selected: selectedSymbol === symbol,
+    };
+  });
 
   return (
-    <ScrollBox height={legendRows} scrollY>
-      <Box flexDirection="column">
-        {legendRowsData.map((legendRow, rowIndex) => (
-          <Box key={`legend-row:${rowIndex}`} flexDirection="row" gap={1}>
-            {legendRow.map((symbol) => {
-              const item = projection.series.find((entry) => entry.symbol === symbol) ?? null;
-              const isSelected = selectedSymbol === symbol;
-              const activeRaw = legendActiveIndex !== null
-                ? item?.points[legendActiveIndex]?.rawValue ?? null
-                : item?.latestRawValue ?? null;
-              const currency = item?.currency ?? "USD";
-              const summary = formatLegendSummary(symbol, activeRaw, item?.baseValue ?? null, currency, visiblePriceRange);
-
-              return (
-                <Box
-                  key={symbol}
-                  width={legendItemWidth}
-                  backgroundColor={isSelected ? blendHex(colors.panel, colors.borderFocused, 0.18) : colors.panel}
-                  onMouseMove={() => onSelectSymbol(symbol)}
-                  onMouseDown={() => {
-                    onSelectSymbol(symbol);
-                    onOpenSymbol(symbol);
-                  }}
-                >
-                  <Text fg={item?.color ?? colors.textDim} attributes={isSelected ? TextAttributes.BOLD : 0}>
-                    {clipText(`${isSelected ? ">" : " "} ${summary}`, legendItemWidth)}
-                  </Text>
-                </Box>
-              );
-            })}
-          </Box>
-        ))}
-      </Box>
-    </ScrollBox>
+    <PriceReturnTable
+      height={legendRows}
+      onOpenSymbol={onOpenSymbol}
+      onSelectSymbol={onSelectSymbol}
+      rows={rows}
+      width={legendItemWidth}
+    />
   );
 }

package/src/components/chart/comparison-stock-chart/view.tsx

@@ -5,6 +5,11 @@ import { blendHex, colors } from "../../../theme/colors";
 import { useThemeColors } from "../../../theme/theme-context";
 import { usePaneSettingValue } from "../../../state/app/context";
 import { useQuoteStreaming } from "../../../state/hooks/quote-streaming";
+import {
+  appendQuoteToPriceReturnHistory,
+  buildPriceReturnFields,
+  type PriceReturnField,
+} from "../../../market-data/performance";
 import type { QuoteSubscriptionTarget } from "../../../types/data-provider";
 import {
   type ChartRendererPreference,
@@ -170,6 +175,27 @@ function useComparisonChartQuoteStreaming({
   useQuoteStreaming(streamingTargets);
 }
 
+function getOneYearReturn(fields: readonly PriceReturnField[]): number | null {
+  return fields.find((field) => field.id === "1Y")?.value ?? null;
+}
+
+function sortSymbolsByOneYearReturn(
+  symbols: readonly string[],
+  performanceBySymbol: ReadonlyMap<string, PriceReturnField[]>,
+): string[] {
+  const originalIndex = new Map(symbols.map((symbol, index) => [symbol, index]));
+  return [...symbols].sort((left, right) => {
+    const leftReturn = getOneYearReturn(performanceBySymbol.get(left) ?? []);
+    const rightReturn = getOneYearReturn(performanceBySymbol.get(right) ?? []);
+    if (leftReturn != null && rightReturn != null && leftReturn !== rightReturn) {
+      return rightReturn - leftReturn;
+    }
+    if (leftReturn != null && rightReturn == null) return -1;
+    if (leftReturn == null && rightReturn != null) return 1;
+    return (originalIndex.get(left) ?? 0) - (originalIndex.get(right) ?? 0);
+  });
+}
+
 function ComparisonStockChartView({
   paneId,
   width,
@@ -250,6 +276,22 @@ function ComparisonStockChartView({
     symbolSources,
     viewState,
   });
+  const performanceBySymbol = useMemo(() => {
+    const bySymbol = new Map<string, PriceReturnField[]>();
+    for (const source of symbolSources) {
+      const sourceHistory = appendQuoteToPriceReturnHistory(source.priceHistory, source.quote);
+      const fallbackHistory = series.find((entry) => entry.symbol === source.symbol)?.points ?? [];
+      bySymbol.set(
+        source.symbol,
+        buildPriceReturnFields(sourceHistory.length >= 2 ? sourceHistory : fallbackHistory),
+      );
+    }
+    return bySymbol;
+  }, [series, symbolSources]);
+  const summarySymbols = useMemo(
+    () => sortSymbolsByOneYearReturn(symbols, performanceBySymbol),
+    [performanceBySymbol, symbols],
+  );
 
   useEffect(() => {
     if (symbols.includes(viewState.selectedSymbol ?? "")) return;
@@ -311,7 +353,7 @@ function ComparisonStockChartView({
     cursorY: viewState.cursorY,
     renderer,
     setViewState,
-    symbols,
+    symbols: summarySymbols,
   });
   const {
     activePreset,
@@ -352,7 +394,6 @@ function ComparisonStockChartView({
     result,
     staticScene,
     timeAxisLabel,
-    visiblePriceRange,
   } = useComparisonChartRenderOutput({
     axisMode,
     chartColors,
@@ -386,7 +427,7 @@ function ComparisonStockChartView({
     setResolution,
     setViewState,
     supportMap,
-    symbols,
+    symbols: summarySymbols,
     updateDisplayCursorTarget,
     viewState,
     visibleDateWindow,
@@ -479,15 +520,14 @@ function ComparisonStockChartView({
       legend={(
         <ComparisonChartLegend
           legendActiveIndex={legendActiveIndex}
-          legendColumns={legendColumns}
           legendItemWidth={legendItemWidth}
           legendRows={legendRows}
           onOpenSymbol={onOpenSymbol}
           onSelectSymbol={setSelectedSymbol}
+          performanceBySymbol={performanceBySymbol}
           projection={projection}
           selectedSymbol={viewState.selectedSymbol}
-          symbols={symbols}
-          visiblePriceRange={visiblePriceRange}
+          symbols={summarySymbols}
         />
       )}
       plotBitmaps={plotBitmaps}

package/src/components/layout/detached-pane-shell.tsx

@@ -13,7 +13,7 @@ import { PaneContent } from "./pane/content";
 import { resolvePaneBodyFrame } from "./pane/sizing";
 import { getPaneDisplayTitle } from "./pane/title";
 import { TITLEBAR_OVERLAY_HEIGHT_PX, getTitlebarLeadingInset } from "./titlebar-overlay";
-import { WindowControls } from "./window-controls";
+import { WindowControls, WINDOWS_CONTROL_GROUP_WIDTH_PX } from "./window-controls";
 import {
   createDoubleEscapeCloseState,
   recordDoubleEscapeClose,
@@ -174,8 +174,10 @@ export function DetachedPaneShell({ pluginRegistry, desktopWindowBridge }: Detac
                 alignItems="center"
                 flexGrow={1}
                 minWidth={0}
+                backgroundColor={titleBackground}
                 paddingLeft={titleBarOverlay ? titlebarLeadingInset : 1}
                 paddingRight={showWindowControls ? 0 : 1}
+                style={{ position: "relative" }}
               >
                 <Box flexGrow={1} minWidth={0} overflow="hidden">
                   <Text fg={paneTitleText(focused, true)} selectable={false} data-gloom-role="pane-title">{title}</Text>
@@ -192,7 +194,8 @@ export function DetachedPaneShell({ pluginRegistry, desktopWindowBridge }: Detac
                     {" ... "}
                   </Text>
                 )}
-                {showWindowControls ? <WindowControls /> : null}
+                {showWindowControls ? <Box flexShrink={0} width={`${WINDOWS_CONTROL_GROUP_WIDTH_PX}px`} /> : null}
+                {showWindowControls ? <WindowControls windowKind="detached" /> : null}
               </Box>
             </Box>
             <PaneBodyFrame layoutProps={bodyFrame.layoutProps} backgroundColor={background}>

package/src/components/layout/header.tsx

@@ -1,5 +1,5 @@
-import { Box, SpinnerMark, Text, TextAttributes, useUiCapabilities } from "../../ui";
-import { useEffect, type ReactNode } from "react";
+import { Box, SpinnerMark, Text, TextAttributes, useRendererHost, useUiCapabilities } from "../../ui";
+import { useCallback, useEffect, type ReactNode } from "react";
 import { blendHex, colors, priceColor } from "../../theme/colors";
 import { useThemeColors } from "../../theme/theme-context";
 import { useAppActive } from "../../state/app/activity";
@@ -18,7 +18,7 @@ import { formatMarketPrice } from "../../market-data/market/format";
 import { marketStateLabel, marketStateColor, getActiveQuoteDisplay } from "../../market-data/market/status";
 import { VERSION } from "../../version";
 import { getTitlebarLeadingInset } from "./titlebar-overlay";
-import { WindowControls } from "./window-controls";
+import { WindowControls, WINDOWS_CONTROL_GROUP_WIDTH_PX } from "./window-controls";
 
 const SPY_REFRESH_MS = 5 * 60_000; // 5 min
 const UPDATE_NOTICE_DURATION_MS = 5_000;
@@ -124,6 +124,7 @@ function UpdateStatus() {
 
 export function Header() {
   useThemeColors();
+  const rendererHost = useRendererHost();
   const baseCurrency = useAppSelector(selectBaseCurrency);
   const appActive = useAppActive();
   const { titleBarOverlay, windowControls } = useUiCapabilities();
@@ -150,6 +151,11 @@ export function Header() {
     ? `SPY ${formatMarketPrice(activeSpyQuote.price, { assetCategory: "ETF" })} ${formatPercentRaw(activeSpyQuote.changePercent)}`
     : "SPY —";
 
+  const startWindowDrag = useCallback(() => {
+    if (!titleBarOverlay) return;
+    void rendererHost.startWindowDrag?.();
+  }, [rendererHost, titleBarOverlay]);
+
   // Market status
   const mktState = spyQuote?.marketState;
   const mktLabel = mktState ? marketStateLabel(mktState) : "";
@@ -164,11 +170,12 @@ export function Header() {
         backgroundColor={colors.header}
         data-gloom-role="app-header"
         data-titlebar-overlay="true"
-        className="electrobun-webkit-app-region-drag"
+        onMouseDown={startWindowDrag}
         style={{
           boxShadow: `0 -1px 0 ${colors.header}, inset 0 1px 0 ${colors.header}`,
           paddingLeft: 8,
           paddingRight: showWindowControls ? 0 : 12,
+          position: "relative",
         }}
       >
         <Box paddingLeft={titlebarLeadingInset} flexDirection="row" alignItems="center" gap={1}>
@@ -201,6 +208,7 @@ export function Header() {
         <Box paddingRight={showWindowControls ? 1 : 0}>
           <Text fg={colors.headerText}>{baseCurrency}</Text>
         </Box>
+        {showWindowControls ? <Box flexShrink={0} width={`${WINDOWS_CONTROL_GROUP_WIDTH_PX}px`} /> : null}
         {showWindowControls ? <WindowControls /> : null}
       </Box>
     );
@@ -213,7 +221,7 @@ export function Header() {
       backgroundColor={colors.header}
       data-gloom-role="app-header"
       data-titlebar-overlay={titleBarOverlay ? "true" : undefined}
-      className={titleBarOverlay ? "electrobun-webkit-app-region-drag" : undefined}
+      onMouseDown={startWindowDrag}
     >
       <Box paddingLeft={titleBarOverlay ? titlebarLeadingInset : 1}>
         <Text attributes={TextAttributes.BOLD} fg={colors.headerText}>

package/src/components/layout/window-controls.tsx

@@ -1,8 +1,9 @@
 import { Box, useRendererHost } from "../../ui";
 import { useCallback } from "react";
+import { TITLEBAR_OVERLAY_HEIGHT_PX } from "./titlebar-overlay";
 
-const WINDOWS_CONTROL_WIDTH_PX = 30;
-const WINDOWS_CONTROL_TRAILING_PADDING_PX = 10;
+const WINDOWS_CONTROL_SIZE_PX = TITLEBAR_OVERLAY_HEIGHT_PX;
+export const WINDOWS_CONTROL_GROUP_WIDTH_PX = WINDOWS_CONTROL_SIZE_PX * 3;
 
 type WindowControlAction = "minimize" | "toggle-maximize" | "close";
 
@@ -44,7 +45,11 @@ function WindowControlIcon({ action }: { action: WindowControlAction }) {
   );
 }
 
-export function WindowControls() {
+interface WindowControlsProps {
+  windowKind?: "main" | "detached";
+}
+
+export function WindowControls({ windowKind = "main" }: WindowControlsProps) {
   const rendererHost = useRendererHost();
 
   const controlWindow = useCallback((action: WindowControlAction, event: { stopPropagation?: () => void; preventDefault?: () => void }) => {
@@ -57,11 +62,17 @@ export function WindowControls() {
       flexDirection="row"
       alignItems="stretch"
       flexShrink={0}
-      className="electrobun-webkit-app-region-no-drag"
+      width={`${WINDOWS_CONTROL_GROUP_WIDTH_PX}px`}
       data-gloom-role="window-controls"
+      data-window-kind={windowKind}
       aria-hidden={false}
       style={{
-        paddingRight: WINDOWS_CONTROL_TRAILING_PADDING_PX,
+        position: "fixed",
+        top: 0,
+        right: 0,
+        height: `${WINDOWS_CONTROL_SIZE_PX}px`,
+        zIndex: 1000,
+        backgroundColor: "inherit",
       }}
     >
       {WINDOWS_CONTROLS.map((control) => (
@@ -69,18 +80,16 @@ export function WindowControls() {
           key={control.action}
           alignItems="center"
           justifyContent="center"
+          flexShrink={0}
+          width={`${WINDOWS_CONTROL_SIZE_PX}px`}
+          height="100%"
           data-gloom-role="window-control"
           data-window-control-action={control.action}
           data-gloom-interactive="true"
           role="button"
           aria-label={control.label}
           title={control.label}
-          className="electrobun-webkit-app-region-no-drag"
           onMouseDown={(event: { stopPropagation?: () => void; preventDefault?: () => void }) => controlWindow(control.action, event)}
-          style={{
-            width: WINDOWS_CONTROL_WIDTH_PX,
-            height: "100%",
-          }}
         >
           <WindowControlIcon action={control.action} />
         </Box>

package/src/components/price-performance.tsx

@@ -0,0 +1,175 @@
+import { Box, ScrollBox, Text } from "../ui";
+import { blendHex, colors, priceColor } from "../theme/colors";
+import { displayWidth, formatPercent, padTo } from "../utils/format";
+import type { PriceReturnField } from "../market-data/performance";
+
+const STRIP_COLUMN_GAP = 1;
+const RETURN_CELL_MIN_WIDTH = 7;
+const SYMBOL_COLUMN_MIN_WIDTH = 6;
+const SYMBOL_COLUMN_MAX_WIDTH = 12;
+
+export interface PriceReturnTableRow {
+  symbol: string;
+  color: string;
+  fields: PriceReturnField[];
+  selected: boolean;
+}
+
+function formatReturnValue(value: number | null): string {
+  return value == null ? "-" : formatPercent(value);
+}
+
+function returnValueColor(value: number | null): string {
+  return value == null ? colors.textMuted : priceColor(value);
+}
+
+function hasAnyReturn(fields: readonly PriceReturnField[]): boolean {
+  return fields.some((field) => field.value != null);
+}
+
+function chunkFields<T>(fields: readonly T[], size: number): T[][] {
+  const rows: T[][] = [];
+  for (let index = 0; index < fields.length; index += size) {
+    rows.push(fields.slice(index, index + size));
+  }
+  return rows;
+}
+
+export function PriceReturnStrip({
+  fields,
+  width,
+}: {
+  fields: PriceReturnField[];
+  width: number;
+}) {
+  if (!hasAnyReturn(fields)) return null;
+
+  const columnCount = width >= 72
+    ? Math.min(6, fields.length)
+    : width >= 54
+      ? Math.min(4, fields.length)
+      : width >= 36
+        ? Math.min(3, fields.length)
+        : Math.min(2, fields.length);
+  const availableWidth = Math.max(width - STRIP_COLUMN_GAP * Math.max(columnCount - 1, 0), columnCount);
+  const cellWidth = Math.max(RETURN_CELL_MIN_WIDTH, Math.floor(availableWidth / columnCount));
+  const rows = chunkFields(fields, columnCount);
+
+  return (
+    <Box flexDirection="column" width={width}>
+      {rows.map((row, rowIndex) => (
+        <Box key={rowIndex} flexDirection="row" height={1}>
+          {row.map((field, columnIndex) => {
+            const labelWidth = Math.min(3, Math.max(2, displayWidth(field.label)));
+            const valueWidth = Math.max(1, cellWidth - labelWidth);
+            return (
+              <Box key={field.id} flexDirection="row">
+                {columnIndex > 0 && <Box width={STRIP_COLUMN_GAP} />}
+                <Box flexDirection="row" width={cellWidth}>
+                  <Text fg={colors.textDim}>{padTo(field.label, labelWidth)}</Text>
+                  <Box width={valueWidth} overflow="hidden">
+                    <Text fg={returnValueColor(field.value)}>{padTo(formatReturnValue(field.value), valueWidth, "right")}</Text>
+                  </Box>
+                </Box>
+              </Box>
+            );
+          })}
+        </Box>
+      ))}
+    </Box>
+  );
+}
+
+function getFieldById(fields: readonly PriceReturnField[], id: string): PriceReturnField | null {
+  return fields.find((field) => field.id === id) ?? null;
+}
+
+function chooseComparisonFieldIds(width: number, availableIds: readonly string[]): string[] {
+  const preferred = width >= 86
+    ? ["RNG", "1M", "3M", "6M", "1Y", "3Y", "5Y"]
+    : width >= 72
+      ? ["RNG", "1M", "3M", "1Y", "3Y", "5Y"]
+      : width >= 58
+        ? ["RNG", "1M", "1Y", "3Y", "5Y"]
+        : width >= 44
+          ? ["RNG", "1M", "1Y", "5Y"]
+          : ["1Y", "5Y"];
+  const available = new Set(availableIds);
+  return preferred.filter((id) => available.has(id));
+}
+
+export function PriceReturnTable({
+  height,
+  onOpenSymbol,
+  onSelectSymbol,
+  rows,
+  width,
+}: {
+  height: number;
+  onOpenSymbol: (symbol: string) => void;
+  onSelectSymbol: (symbol: string) => void;
+  rows: PriceReturnTableRow[];
+  width: number;
+}) {
+  if (height <= 0 || rows.length === 0) return null;
+
+  const availableIds = rows[0]?.fields.map((field) => field.id) ?? [];
+  const fieldIds = chooseComparisonFieldIds(width, availableIds);
+  if (fieldIds.length === 0) return null;
+
+  const valueWidth = Math.max(
+    RETURN_CELL_MIN_WIDTH,
+    Math.floor((width - SYMBOL_COLUMN_MIN_WIDTH - fieldIds.length) / Math.max(fieldIds.length, 1)),
+  );
+  const symbolWidth = Math.min(
+    SYMBOL_COLUMN_MAX_WIDTH,
+    Math.max(SYMBOL_COLUMN_MIN_WIDTH, width - fieldIds.length * (valueWidth + 1)),
+  );
+  const fieldsById = rows[0]?.fields ?? [];
+
+  return (
+    <ScrollBox height={height} scrollY>
+      <Box flexDirection="column" width={width}>
+        <Box flexDirection="row" height={1}>
+          <Text fg={colors.textDim}>{padTo("Sym", symbolWidth)}</Text>
+          {fieldIds.map((fieldId) => {
+            const field = getFieldById(fieldsById, fieldId);
+            return (
+              <Box key={fieldId} flexDirection="row">
+                <Text fg={colors.textDim}>{" "}</Text>
+                <Text fg={colors.textDim}>{padTo(field?.label ?? fieldId, valueWidth, "right")}</Text>
+              </Box>
+            );
+          })}
+        </Box>
+
+        {rows.map((row) => (
+          <Box
+            key={row.symbol}
+            flexDirection="row"
+            height={1}
+            width={width}
+            backgroundColor={row.selected ? blendHex(colors.panel, colors.borderFocused, 0.18) : colors.panel}
+            onMouseMove={() => onSelectSymbol(row.symbol)}
+            onMouseDown={() => {
+              onSelectSymbol(row.symbol);
+              onOpenSymbol(row.symbol);
+            }}
+          >
+            <Text fg={row.color}>{padTo(`${row.selected ? ">" : " "} ${row.symbol}`, symbolWidth)}</Text>
+            {fieldIds.map((fieldId) => {
+              const field = getFieldById(row.fields, fieldId);
+              const value = field?.value ?? null;
+              return (
+                <Box key={fieldId} flexDirection="row">
+                  <Text fg={colors.textDim}>{" "}</Text>
+                  <Text fg={returnValueColor(value)}>{padTo(formatReturnValue(value), valueWidth, "right")}</Text>
+                </Box>
+              );
+            })}
+          </Box>
+        ))}
+      </Box>
+    </ScrollBox>
+  );
+}