gloomberb 0.9.1 → 0.9.3

package/src/cli/registry.ts

@@ -1,9 +1,17 @@
 import type { AppConfig } from "../types/config";
-import type { CliCommandContext, CliCommandDef, CliDispatchResult, GloomPlugin } from "../types/plugin";
+import type {
+  CliCommandContext,
+  CliCommandDef,
+  CliDispatchResult,
+  GloomPlugin,
+  PluginCliCommandDescriptor,
+} from "../types/plugin";
 import type { LoadedExternalPlugin } from "../plugins/loader";
 import { getPluginCatalog } from "../plugins/catalog";
-import { initConfigData, initMarketData } from "./context";
+import { initCliServices, initConfigData, initMarketData } from "./context";
 import { closeAndFail, fail } from "./errors";
+import { DEFAULT_CLI_OPTIONS, type CliGlobalOptions } from "./options";
+import { printCliResult } from "./result";
 import {
   cliStyles,
   colorBySign,
@@ -26,6 +34,8 @@ export interface CliCommandRegistry {
   lookup: ReadonlyMap<string, RegisteredCliCommand>;
   config: AppConfig | null;
   plugins: GloomPlugin[];
+  externalPlugins: LoadedExternalPlugin[];
+  descriptors: Array<{ pluginId: string; descriptor: PluginCliCommandDescriptor }>;
 }
 
 interface BuildCliCommandRegistryOptions {
@@ -61,6 +71,19 @@ function getCommandUsageLabel(command: CliCommandDef): string {
   return command.help?.usage?.[0] ?? command.name;
 }
 
+function descriptorToCommand(descriptor: PluginCliCommandDescriptor): CliCommandDef | null {
+  if (!descriptor.execute) return null;
+  return {
+    name: descriptor.name,
+    aliases: descriptor.aliases,
+    description: descriptor.summary,
+    help: descriptor.examples?.length
+      ? { usage: descriptor.examples }
+      : undefined,
+    execute: descriptor.execute,
+  };
+}
+
 function renderHelpSections(registry: CliCommandRegistry): string[] {
   const lines: string[] = [];
 
@@ -149,6 +172,7 @@ export function buildCliCommandRegistry({
   }
 
   const loadablePlugins: GloomPlugin[] = [];
+  const descriptors: Array<{ pluginId: string; descriptor: PluginCliCommandDescriptor }> = [];
   for (const entry of catalog) {
     if (entry.error) {
       registryLog.warn(`Skipping external plugin "${entry.plugin.id}" for CLI registration.`, {
@@ -161,6 +185,11 @@ export function buildCliCommandRegistry({
     for (const command of entry.plugin.cliCommands ?? []) {
       registerCommand(command, entry.plugin.id, "plugin");
     }
+    for (const descriptor of entry.plugin.cli?.commands ?? []) {
+      descriptors.push({ pluginId: entry.plugin.id, descriptor });
+      const command = descriptorToCommand(descriptor);
+      if (command) registerCommand(command, entry.plugin.id, "plugin");
+    }
   }
 
   const commands = allCommands.filter((entry) => (
@@ -180,14 +209,25 @@ export function buildCliCommandRegistry({
     lookup,
     config,
     plugins: loadablePlugins,
+    externalPlugins,
+    descriptors,
   };
 }
 
-export function createCliCommandContext(ownerId: string, plugins: GloomPlugin[]): CliCommandContext {
+export function createCliCommandContext(
+  ownerId: string,
+  registryOrPlugins: Pick<CliCommandRegistry, "plugins" | "externalPlugins"> | GloomPlugin[],
+  cliOptions: CliGlobalOptions = DEFAULT_CLI_OPTIONS,
+): CliCommandContext {
+  const registry = Array.isArray(registryOrPlugins)
+    ? { plugins: registryOrPlugins, externalPlugins: [] }
+    : registryOrPlugins;
   return {
     initConfigData,
-    initMarketData: () => initMarketData({ plugins }),
-    plugins,
+    initMarketData: () => initMarketData({ plugins: registry.plugins }),
+    initServices: () => initCliServices({ externalPlugins: registry.externalPlugins }),
+    cliOptions,
+    plugins: registry.plugins,
     fail,
     closeAndFail,
     output: {
@@ -197,6 +237,7 @@ export function createCliCommandContext(ownerId: string, plugins: GloomPlugin[])
       renderStat,
       renderTable,
     },
+    printResult: (result, options) => printCliResult(result, cliOptions, options),
     log: debugLog.createLogger(ownerId === "core" ? "cli" : ownerId),
   };
 }

package/src/cli/result.test.ts

@@ -0,0 +1,82 @@
+import { describe, expect, test } from "bun:test";
+import { serializeCliError, serializeCliResult } from "./result";
+import type { CliGlobalOptions } from "./options";
+
+const baseOptions: CliGlobalOptions = {
+  format: "text",
+  quiet: false,
+  color: null,
+  refresh: false,
+  dryRun: false,
+  yes: false,
+};
+
+describe("serializeCliResult", () => {
+  test("renders limited JSON result envelopes", () => {
+    const output = serializeCliResult(
+      { data: [{ symbol: "AAPL" }, { symbol: "MSFT" }] },
+      { ...baseOptions, format: "json", limit: 1 },
+    );
+    expect(JSON.parse(output)).toEqual({
+      ok: true,
+      data: [{ symbol: "AAPL" }],
+    });
+  });
+
+  test("includes display column metadata in JSON envelopes", () => {
+    const output = serializeCliResult(
+      { data: [{ quote: { symbol: "AAPL", price: 123 } }] },
+      { ...baseOptions, format: "json" },
+      {
+        rows: (data) => data.map((row) => row.quote),
+        columns: [
+          { key: "symbol", header: "Symbol" },
+          { key: "price", header: "Last", align: "right" },
+        ],
+      },
+    );
+    expect(JSON.parse(output)).toEqual({
+      ok: true,
+      data: [{ quote: { symbol: "AAPL", price: 123 } }],
+      columns: [
+        { key: "symbol", header: "Symbol" },
+        { key: "price", header: "Last", align: "right" },
+      ],
+    });
+  });
+
+  test("renders CSV with provided column order", () => {
+    const output = serializeCliResult(
+      { data: [{ symbol: "AAPL", name: "Apple, Inc." }] },
+      { ...baseOptions, format: "csv" },
+      {
+        columns: [
+          { key: "symbol", header: "Symbol" },
+          { key: "name", header: "Name" },
+        ],
+      },
+    );
+    expect(output).toBe('Symbol,Name\nAAPL,"Apple, Inc."');
+  });
+
+  test("renders NDJSON rows", () => {
+    const output = serializeCliResult(
+      { data: [{ symbol: "AAPL" }, { symbol: "MSFT" }] },
+      { ...baseOptions, format: "ndjson" },
+    );
+    expect(output).toBe('{"symbol":"AAPL"}\n{"symbol":"MSFT"}');
+  });
+});
+
+describe("serializeCliError", () => {
+  test("renders stable structured errors for JSON", () => {
+    const output = serializeCliError(
+      { code: "auth_required", message: "Sign in first.", retryable: true },
+      { ...baseOptions, format: "json" },
+    );
+    expect(JSON.parse(output)).toEqual({
+      ok: false,
+      error: { code: "auth_required", message: "Sign in first.", retryable: true },
+    });
+  });
+});

package/src/cli/result.ts

@@ -0,0 +1,149 @@
+import type { CliGlobalOptions } from "./options";
+import { renderTable, type CliTableColumn } from "../utils/cli-output";
+
+export interface CliResult<T = unknown> {
+  data: T;
+  metadata?: Record<string, unknown>;
+  warnings?: string[];
+}
+
+export interface CliErrorObject {
+  code: string;
+  message: string;
+  details?: unknown;
+  retryable?: boolean;
+}
+
+export interface CliResultColumn<Row = Record<string, unknown>> extends CliTableColumn {
+  key: string;
+  value?: (row: Row) => unknown;
+}
+
+export interface CliResultRenderOptions<T = unknown, Row = Record<string, unknown>> {
+  text?: (data: T) => string;
+  columns?: CliResultColumn<Row>[];
+  rows?: (data: T) => Row[];
+}
+
+interface CliResultJsonEnvelope<T> extends CliResult<T> {
+  ok: true;
+  columns?: Array<Pick<CliResultColumn, "key" | "header" | "align" | "width">>;
+}
+
+function applyLimit<T>(data: T, limit?: number): T {
+  if (!Array.isArray(data) || limit == null) return data;
+  return data.slice(0, limit) as T;
+}
+
+function asRows<T, Row>(data: T, limit?: number, rows?: (data: T) => Row[]): Row[] {
+  const resolvedRows = rows ? rows(data) : (Array.isArray(data) ? data : [data]) as Row[];
+  return limit == null ? resolvedRows : resolvedRows.slice(0, limit);
+}
+
+function normalizeCell(value: unknown): string {
+  if (value == null) return "";
+  if (value instanceof Date) return value.toISOString();
+  if (typeof value === "object") return JSON.stringify(value);
+  return String(value);
+}
+
+function inferColumns(rows: Record<string, unknown>[]): CliResultColumn<Record<string, unknown>>[] {
+  const keys = new Set<string>();
+  for (const row of rows) {
+    if (row && typeof row === "object" && !Array.isArray(row)) {
+      for (const key of Object.keys(row)) keys.add(key);
+    }
+  }
+  return [...keys].map((key) => ({ key, header: key }));
+}
+
+function csvEscape(value: string): string {
+  if (!/[",\n\r]/.test(value)) return value;
+  return `"${value.replace(/"/g, '""')}"`;
+}
+
+function serializeColumns<Row>(columns?: CliResultColumn<Row>[]) {
+  return columns?.map((column) => ({
+    key: column.key,
+    header: column.header,
+    ...(column.align ? { align: column.align } : {}),
+    ...(column.width ? { width: column.width } : {}),
+  }));
+}
+
+function renderCsv<Row extends Record<string, unknown>>(
+  rows: Row[],
+  columns?: CliResultColumn<Row>[],
+): string {
+  const resolvedColumns = columns && columns.length > 0
+    ? columns
+    : inferColumns(rows as Record<string, unknown>[]) as CliResultColumn<Row>[];
+  const header = resolvedColumns.map((column) => csvEscape(column.header)).join(",");
+  const body = rows.map((row) => resolvedColumns
+    .map((column) => csvEscape(normalizeCell(column.value ? column.value(row) : row[column.key])))
+    .join(","));
+  return [header, ...body].join("\n");
+}
+
+function renderTextTable<Row extends Record<string, unknown>>(
+  rows: Row[],
+  columns?: CliResultColumn<Row>[],
+): string {
+  const resolvedColumns = columns && columns.length > 0
+    ? columns
+    : inferColumns(rows as Record<string, unknown>[]) as CliResultColumn<Row>[];
+  return renderTable(
+    resolvedColumns.map((column) => ({
+      header: column.header,
+      align: column.align,
+      width: column.width,
+    })),
+    rows.map((row) => resolvedColumns.map((column) => normalizeCell(column.value ? column.value(row) : row[column.key]))),
+  );
+}
+
+export function serializeCliResult<T, Row extends Record<string, unknown> = Record<string, unknown>>(
+  result: CliResult<T>,
+  options: CliGlobalOptions,
+  renderOptions: CliResultRenderOptions<T, Row> = {},
+): string {
+  if (options.format === "json") {
+    const columns = serializeColumns(renderOptions.columns);
+    const envelope: CliResultJsonEnvelope<T> = {
+      ok: true,
+      ...result,
+      data: applyLimit(result.data, options.limit),
+      ...(columns?.length ? { columns } : {}),
+    };
+    return JSON.stringify(envelope, null, 2);
+  }
+
+  const rows = asRows(result.data, options.limit, renderOptions.rows);
+  if (options.format === "ndjson") {
+    return rows.map((row) => JSON.stringify(row)).join("\n");
+  }
+  if (options.format === "csv") {
+    return renderCsv(rows as Row[], renderOptions.columns);
+  }
+  if (renderOptions.text) {
+    return renderOptions.text(result.data);
+  }
+  return renderTextTable(rows as Row[], renderOptions.columns);
+}
+
+export function printCliResult<T, Row extends Record<string, unknown> = Record<string, unknown>>(
+  result: CliResult<T>,
+  options: CliGlobalOptions,
+  renderOptions: CliResultRenderOptions<T, Row> = {},
+): void {
+  if (options.quiet && options.format === "text") return;
+  const output = serializeCliResult(result, options, renderOptions);
+  if (output) console.log(output);
+}
+
+export function serializeCliError(error: CliErrorObject, options: CliGlobalOptions): string {
+  if (options.format === "json" || options.format === "ndjson") {
+    return JSON.stringify({ ok: false, error }, null, options.format === "json" ? 2 : 0);
+  }
+  return error.details == null ? error.message : `${error.message}\n${String(error.details)}`;
+}

package/src/cli/types.ts

@@ -2,6 +2,7 @@ import type { AppConfig } from "../types/config";
 import { AppPersistence } from "../data/app-persistence";
 import { TickerRepository } from "../data/ticker-repository";
 import { AssetDataRouter } from "../sources/provider-router";
+import type { AppServices } from "../core/app-services";
 
 export type ConfigContext = {
   config: AppConfig;
@@ -13,3 +14,13 @@ export type ConfigContext = {
 export type MarketContext = ConfigContext & {
   dataProvider: AssetDataRouter;
 };
+
+export type CliServicesContext = {
+  config: AppConfig;
+  dataDir: string;
+  services: AppServices;
+  dataProvider: AssetDataRouter;
+  persistence: AppPersistence;
+  store: TickerRepository;
+  destroy(): void;
+};

package/src/cli.test.ts

@@ -22,6 +22,7 @@ const originalHome = process.env.HOME;
 
 afterEach(async () => {
   process.env.HOME = originalHome;
+  process.exitCode = 0;
   await Promise.all(tempDirs.splice(0).map((dir) => rm(dir, { recursive: true, force: true })));
 });
 
@@ -96,12 +97,12 @@ async function captureConsole<T>(fn: () => Promise<T> | T): Promise<{ result: T;
   }
 }
 
-async function captureConsoleFailure(fn: () => Promise<unknown> | unknown): Promise<{ stdout: string; stderr: string; error: unknown }> {
+async function captureConsoleFailure(fn: () => Promise<unknown> | unknown): Promise<{ stdout: string; stderr: string; exitCode: string | number | undefined }> {
   const logs: string[] = [];
   const errors: string[] = [];
   const originalLog = console.log;
   const originalError = console.error;
-  const originalExit = process.exit;
+  const originalExitCode = process.exitCode;
 
   console.log = (...args: unknown[]) => {
     logs.push(args.map(String).join(" "));
@@ -109,23 +110,22 @@ async function captureConsoleFailure(fn: () => Promise<unknown> | unknown): Prom
   console.error = (...args: unknown[]) => {
     errors.push(args.map(String).join(" "));
   };
-  process.exit = ((code?: number) => {
-    throw new Error(`process.exit:${code ?? 0}`);
-  }) as typeof process.exit;
+  process.exitCode = undefined;
 
   try {
     await fn();
-    throw new Error("Expected command to fail.");
-  } catch (error) {
+    if (process.exitCode == null || process.exitCode === 0) {
+      throw new Error("Expected command to fail.");
+    }
     return {
       stdout: logs.join("\n"),
       stderr: errors.join("\n"),
-      error,
+      exitCode: process.exitCode,
     };
   } finally {
     console.log = originalLog;
     console.error = originalError;
-    process.exit = originalExit;
+    process.exitCode = originalExitCode ?? 0;
   }
 }
 
@@ -226,7 +226,7 @@ describe("CLI portfolio commands", () => {
     });
 
     const result = await captureConsoleFailure(() => runCli(["portfolio", "create", "Research"]));
-    expect(String(result.error)).toContain("process.exit:1");
+    expect(result.exitCode).toBe(1);
     expect(result.stderr).toContain('Portfolio "Research" already exists.');
   });
 
@@ -370,7 +370,7 @@ describe("CLI portfolio commands", () => {
     });
 
     const result = await captureConsoleFailure(() => runCli(["portfolio", "add", "IBKR Account", "NVDA"]));
-    expect(String(result.error)).toContain("process.exit:1");
+    expect(result.exitCode).toBe(1);
     expect(result.stderr).toContain('Portfolio "IBKR Account" is broker-managed and cannot be modified manually.');
   });
 });

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/interactions.ts

@@ -28,6 +28,7 @@ import {
   resolveCursorMotionKind,
   type ChartMouseEvent,
   type DisplayCursorState,
+  type MouseInteractionEvent,
 } from "../core/pointer";
 import type {
   ComparisonChartSeries,
@@ -48,6 +49,7 @@ interface UseComparisonChartPointerInteractionsOptions {
   chartWidth: number;
   commitSelectionCursor: (next: { cursorX: number | null; cursorY: number | null }) => void;
   expandBufferRange: (action: PendingExpansionAction) => boolean;
+  focusPaneForMouseInteraction: (event: MouseInteractionEvent | null | undefined) => void;
   mouseCrosshairDisabledRef: MutableRefObject<boolean>;
   plotRef: RefObject<BoxRenderable | null>;
   pointCount: number;
@@ -65,6 +67,7 @@ export function useComparisonChartPointerInteractions({
   chartWidth,
   commitSelectionCursor,
   expandBufferRange,
+  focusPaneForMouseInteraction,
   mouseCrosshairDisabledRef,
   plotRef,
   pointCount,
@@ -113,13 +116,14 @@ export function useComparisonChartPointerInteractions({
 
   const handlePlotDown = useCallback((event: ChartMouseEvent) => {
     consumeChartMouseEvent(event);
+    focusPaneForMouseInteraction(null);
     mouseCrosshairDisabledRef.current = false;
     if (!syncPointerCursor(event)) return;
     dragRef.current = {
       startGlobalX: getGlobalMouseX(event, renderer),
       startWindow: visibleDateWindow,
     };
-  }, [mouseCrosshairDisabledRef, renderer, syncPointerCursor, visibleDateWindow]);
+  }, [focusPaneForMouseInteraction, mouseCrosshairDisabledRef, renderer, syncPointerCursor, visibleDateWindow]);
 
   const handlePlotDrag = useCallback((event: ChartMouseEvent) => {
     consumeChartMouseEvent(event);
@@ -147,6 +151,7 @@ export function useComparisonChartPointerInteractions({
 
   const handlePlotScroll = useCallback((event: ChartMouseEvent) => {
     consumeChartMouseEvent(event);
+    focusPaneForMouseInteraction(null);
     const direction = event.scroll?.direction;
     if (!direction) return;
     const scrollPan = consumeScrollPanMovement(
@@ -179,6 +184,7 @@ export function useComparisonChartPointerInteractions({
     chartWidth,
     dateBounds,
     expandBufferRange,
+    focusPaneForMouseInteraction,
     scrollPanCellRemainderRef,
     series,
     seriesDates,

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,74 @@
-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";
+import type { MouseInteractionEvent } from "../core/pointer";
 
 interface ComparisonChartLegendProps {
   legendActiveIndex: number | null;
-  legendColumns: number;
   legendItemWidth: number;
   legendRows: number;
+  onFocusInteraction: (event: MouseInteractionEvent | null | undefined) => void;
   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,
+  onFocusInteraction,
   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}
+      onFocusInteraction={onFocusInteraction}
+      onOpenSymbol={onOpenSymbol}
+      onSelectSymbol={onSelectSymbol}
+      rows={rows}
+      width={legendItemWidth}
+    />
   );
 }