gloomberb 0.7.0 → 0.7.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "gloomberb",
-  "version": "0.7.0",
+  "version": "0.7.1",
   "description": "Bloomberg-style stock portfolio tracker for the terminal",
   "module": "src/index.tsx",
   "type": "module",

package/src/app.tsx

@@ -1,6 +1,6 @@
 import { Box, ContextMenuProvider, useNativeRenderer, useRendererHost } from "./ui";
 import { ToastViewport, useToastHost } from "./ui/toast";
-import { useState, useEffect, useCallback, useRef, useMemo } from "react";
+import { useState, useEffect, useCallback, useRef, useMemo, type ReactNode } from "react";
 import { useShortcut } from "./react/input";
 import {
   AppProvider,
@@ -23,7 +23,7 @@ import { OnboardingWizard } from "./components/onboarding/onboarding-wizard";
 import { useDialog, useDialogState } from "./ui/dialog";
 import { PluginRegistry } from "./plugins/registry";
 import type { TickerRepository } from "./data/ticker-repository";
-import { colors, syncTheme } from "./theme/colors";
+import { ThemeProvider, useThemeColors } from "./theme/theme-context";
 import {
   createPaneInstance,
   findPaneInstance,
@@ -45,7 +45,7 @@ import type { TickerRecord } from "./types/ticker";
 import type { DataProvider } from "./types/data-provider";
 import type { TickerFinancials } from "./types/financials";
 import type { BrokerAccount } from "./types/trading";
-import type { DesktopDockPreviewState, DesktopSharedStateSnapshot, DesktopWindowBridge } from "./types/desktop-window";
+import type { DesktopDockPreviewState, DesktopSharedStateSnapshot, DesktopThemePreviewState, DesktopWindowBridge } from "./types/desktop-window";
 import type { DesktopApplicationMenuBridge } from "./types/desktop-menu";
 import { resolveTickerSearch, upsertTickerFromSearchResult } from "./utils/ticker-search";
 
@@ -95,6 +95,10 @@ import {
   createPaneTemplateOrThrow,
 } from "./components/command-bar/workflow-ops";
 import { getPaneTemplateDisplayLabel } from "./components/command-bar/pane-template-display";
+import {
+  resolveTickerNavigationDetailPane,
+  shouldFocusTickerNavigationTarget,
+} from "./plugins/ticker-navigation";
 import { debugLog } from "./utils/debug-log";
 import type { MarketDataCoordinator } from "./market-data/coordinator";
 import { instrumentFromTicker } from "./market-data/request-types";
@@ -136,6 +140,15 @@ interface AppInnerProps {
   desktopApplicationMenuBridge?: DesktopApplicationMenuBridge;
 }
 
+function ThemedAppRoot({ children }: { children: ReactNode }) {
+  const themeColors = useThemeColors();
+  return (
+    <Box flexDirection="column" flexGrow={1} backgroundColor={themeColors.bg}>
+      {children}
+    </Box>
+  );
+}
+
 function AppInner({
   pluginRegistry,
   tickerRepository,
@@ -511,6 +524,96 @@ function AppInner({
     });
   }, [performRefreshQuote]);
 
+  const refreshTickersBatch = useCallback((entries: Array<{ ticker: TickerRecord; priority: number }>) => {
+    const runnable = entries.filter(({ ticker }) => {
+      const symbol = ticker.metadata.ticker;
+      return !refreshInFlight.has(symbol) && !pendingRefreshesRef.current.financials.has(symbol);
+    });
+    if (runnable.length === 0) return;
+    for (const { ticker } of runnable) {
+      pendingRefreshesRef.current.financials.add(ticker.metadata.ticker);
+    }
+    const priority = Math.min(...runnable.map((entry) => entry.priority));
+    refreshQueueRef.current.queue.enqueue({
+      key: `financials-batch:${priority}:${runnable.map(({ ticker }) => ticker.metadata.ticker).join(",")}`,
+      priority,
+      run: async () => {
+        const instrumentEntries = runnable.flatMap(({ ticker }) => {
+          const instrument = instrumentFromTicker(ticker, ticker.metadata.ticker);
+          return instrument ? [{ ticker, instrument }] : [];
+        });
+        for (const { ticker } of runnable) {
+          const symbol = ticker.metadata.ticker;
+          refreshInFlight.add(symbol);
+          dispatch({ type: "SET_REFRESHING", symbol, refreshing: true });
+        }
+        try {
+          const entries = await marketData.loadSnapshotsBatch(instrumentEntries.map((entry) => entry.instrument));
+          entries.forEach((entry, index) => {
+            const ticker = instrumentEntries[index]?.ticker;
+            const data = entry.data ?? entry.lastGoodData;
+            if (ticker && data) {
+              pluginRegistry.events.emit("ticker:refreshed", { symbol: ticker.metadata.ticker, financials: data });
+              const currency = data.quote?.currency;
+              if (currency) void marketData.loadFxRate(currency).catch(() => {});
+            }
+          });
+          void marketData.loadFxRate(state.config.baseCurrency).catch(() => {});
+        } finally {
+          for (const { ticker } of runnable) {
+            const symbol = ticker.metadata.ticker;
+            refreshInFlight.delete(symbol);
+            pendingRefreshesRef.current.financials.delete(symbol);
+            dispatch({ type: "SET_REFRESHING", symbol, refreshing: false });
+          }
+        }
+      },
+    });
+  }, [dispatch, marketData, pluginRegistry.events, state.config.baseCurrency]);
+
+  const refreshQuotesBatch = useCallback((entries: Array<{ ticker: TickerRecord; priority: number }>) => {
+    const runnable = entries.filter(({ ticker }) => {
+      const symbol = ticker.metadata.ticker;
+      return !refreshInFlight.has(symbol)
+        && !quoteRefreshInFlight.has(symbol)
+        && !pendingRefreshesRef.current.financials.has(symbol)
+        && !pendingRefreshesRef.current.quotes.has(symbol);
+    });
+    if (runnable.length === 0) return;
+    for (const { ticker } of runnable) {
+      pendingRefreshesRef.current.quotes.add(ticker.metadata.ticker);
+    }
+    const priority = Math.min(...runnable.map((entry) => entry.priority));
+    refreshQueueRef.current.queue.enqueue({
+      key: `quotes-batch:${priority}:${runnable.map(({ ticker }) => ticker.metadata.ticker).join(",")}`,
+      priority,
+      run: async () => {
+        const instrumentEntries = runnable.flatMap(({ ticker }) => {
+          const instrument = instrumentFromTicker(ticker, ticker.metadata.ticker);
+          return instrument ? [{ ticker, instrument }] : [];
+        });
+        for (const { ticker } of runnable) {
+          quoteRefreshInFlight.add(ticker.metadata.ticker);
+        }
+        try {
+          const entries = await marketData.loadQuotesBatch(instrumentEntries.map((entry) => entry.instrument));
+          entries.forEach((entry) => {
+            const quote = entry.data ?? entry.lastGoodData;
+            const currency = quote?.currency;
+            if (currency) void marketData.loadFxRate(currency).catch(() => {});
+          });
+          void marketData.loadFxRate(state.config.baseCurrency).catch(() => {});
+        } finally {
+          for (const { ticker } of runnable) {
+            const symbol = ticker.metadata.ticker;
+            quoteRefreshInFlight.delete(symbol);
+            pendingRefreshesRef.current.quotes.delete(symbol);
+          }
+        }
+      },
+    });
+  }, [marketData, state.config.baseCurrency]);
+
   const primeCachedFinancials = useCallback((entries: Array<{ ticker: TickerRecord; financials: TickerFinancials }>) => {
     const primeEntries = entries.flatMap(({ ticker, financials }) => {
       const instrument = instrumentFromTicker(ticker, ticker.metadata.ticker);
@@ -721,6 +824,8 @@ function AppInner({
           primeCachedFinancials,
           refreshTicker,
           refreshQuote,
+          refreshTickersBatch,
+          refreshQuotesBatch,
           autoImportBrokerPositions,
           persistedBrokerAccounts,
         }), {
@@ -732,7 +837,7 @@ function AppInner({
         // Will show empty state
       }
     })();
-  }, [autoImportBrokerPositions, dataProvider, dispatch, primeCachedFinancials, tickerRepository, refreshQuote, refreshTicker, sessionSnapshot, state.config, state.initialized]);
+  }, [autoImportBrokerPositions, dataProvider, dispatch, primeCachedFinancials, tickerRepository, refreshQuote, refreshQuotesBatch, refreshTicker, refreshTickersBatch, sessionSnapshot, state.config, state.initialized]);
 
   const focusedTickerSymbol = getFocusedTickerSymbol(state);
 
@@ -1273,8 +1378,9 @@ function AppInner({
     activatePane(instance.instanceId, nextLayout);
   };
 
-  pluginRegistry.navigateTickerFn = (rawSymbol) => {
+  pluginRegistry.navigateTickerFn = (rawSymbol, options) => {
     if (isDetachedWindow) return;
+    const sourcePaneId = options?.sourcePaneId ?? stateRef.current.focusedPaneId;
     (async () => {
       try {
       // Resolve or create the ticker in the local database
@@ -1297,45 +1403,31 @@ function AppInner({
         }
       }
 
-      // Active panel resolution — navigate the focused or linked detail pane:
-      // 1. If the focused pane IS a ticker-detail, retarget it directly
-      // 2. If a ticker-detail follows the focused pane, retarget that
+      // Active panel resolution — navigate the initiating or linked detail pane:
+      // 1. If the source pane IS a ticker-detail, retarget it directly
+      // 2. If a ticker-detail follows the source pane, retarget that
       // 3. Any follow-mode ticker-detail in the layout
       // 4. Any ticker-detail in the layout
       // 5. Fall back to pinning a new pane
       const currentState = stateRef.current;
       const currentLayout = currentState.config.layout;
-      const focused = currentState.focusedPaneId;
-
-      const focusedInstance = focused
-        ? findPaneInstance(currentLayout, focused)
-        : null;
-
-      const detailPane =
-        (focusedInstance?.paneId === "ticker-detail" && isPaneInLayout(currentLayout, focusedInstance.instanceId)
-          ? focusedInstance
-          : null)
-        ?? currentLayout.instances.find((inst) =>
-          inst.paneId === "ticker-detail"
-          && inst.binding?.kind === "follow"
-          && inst.binding.sourceInstanceId === focused
-          && isPaneInLayout(currentLayout, inst.instanceId),
-        )
-        ?? currentLayout.instances.find((inst) =>
-          inst.paneId === "ticker-detail"
-          && inst.binding?.kind === "follow"
-          && isPaneInLayout(currentLayout, inst.instanceId),
-        )
-        ?? currentLayout.instances.find((inst) =>
-          inst.paneId === "ticker-detail"
-          && isPaneInLayout(currentLayout, inst.instanceId),
-        );
+      const detailPane = resolveTickerNavigationDetailPane(currentLayout, sourcePaneId);
+      const focusIfStillOwned = (paneId: string, layout: LayoutConfig) => {
+        if (!shouldFocusTickerNavigationTarget({
+          sourcePaneId,
+          currentFocusedPaneId: stateRef.current.focusedPaneId,
+          targetPaneId: paneId,
+        })) {
+          return;
+        }
+        activatePane(paneId, layout);
+      };
 
       if (detailPane) {
         if (detailPane.binding?.kind === "follow") {
           const sourceId = detailPane.binding.sourceInstanceId;
           dispatch({ type: "UPDATE_PANE_STATE", paneId: sourceId, patch: { cursorSymbol: symbol } });
-          activatePane(detailPane.instanceId, currentLayout);
+          focusIfStillOwned(detailPane.instanceId, currentLayout);
         } else {
           const nextLayout = {
             ...currentLayout,
@@ -1346,9 +1438,13 @@ function AppInner({
             )),
           };
           persistLayout(nextLayout);
-          activatePane(detailPane.instanceId, nextLayout);
+          focusIfStillOwned(detailPane.instanceId, nextLayout);
         }
-      } else {
+      } else if (shouldFocusTickerNavigationTarget({
+        sourcePaneId,
+        currentFocusedPaneId: stateRef.current.focusedPaneId,
+        targetPaneId: null,
+      })) {
         pluginRegistry.pinTicker(symbol, { floating: false });
       }
       } catch (err) {
@@ -1497,20 +1593,20 @@ function AppInner({
   if (desktopWindowBridge?.kind === "detached" && desktopWindowBridge.paneId) {
     return (
       <ContextMenuProvider pluginRegistry={pluginRegistry}>
-        <Box flexDirection="column" flexGrow={1} backgroundColor={colors.bg}>
+        <ThemedAppRoot>
           <DetachedPaneShell
             pluginRegistry={pluginRegistry}
             desktopWindowBridge={{ ...desktopWindowBridge, kind: "detached", paneId: desktopWindowBridge.paneId }}
           />
           <ToastViewport position="bottom-right" />
-        </Box>
+        </ThemedAppRoot>
       </ContextMenuProvider>
     );
   }
 
   return (
     <ContextMenuProvider pluginRegistry={pluginRegistry}>
-      <Box flexDirection="column" flexGrow={1} backgroundColor={colors.bg}>
+      <ThemedAppRoot>
         <Header />
         <Shell
           pluginRegistry={pluginRegistry}
@@ -1528,7 +1624,7 @@ function AppInner({
           />
         )}
         <ToastViewport position="bottom-right" />
-      </Box>
+      </ThemedAppRoot>
     </ContextMenuProvider>
   );
 }
@@ -1540,6 +1636,7 @@ interface AppProps {
   desktopWindowBridge?: DesktopWindowBridge;
   desktopApplicationMenuBridge?: DesktopApplicationMenuBridge;
   desktopSnapshot?: DesktopSharedStateSnapshot | null;
+  desktopThemePreview?: DesktopThemePreviewState | null;
 }
 
 export function App({
@@ -1549,6 +1646,7 @@ export function App({
   desktopWindowBridge,
   desktopApplicationMenuBridge,
   desktopSnapshot = null,
+  desktopThemePreview = null,
 }: AppProps) {
   const renderer = useNativeRenderer();
   const effectiveInitialConfig = useMemo(() => {
@@ -1579,9 +1677,6 @@ export function App({
   });
   const [showOnboarding, setShowOnboarding] = useState(!effectiveInitialConfig.onboardingComplete);
 
-  // Keep the shared palette aligned before this render builds any JSX that reads `colors`.
-  syncTheme(config.theme);
-
   useEffect(() => bindAppActivity(renderer), [renderer]);
 
   const services = useMemo(() => {
@@ -1637,14 +1732,16 @@ export function App({
 
   if (showOnboarding) {
     return (
-      <OnboardingWizard
-        config={config}
-        pluginRegistry={services.pluginRegistry}
-        onComplete={(updatedConfig) => {
-          setConfig(updatedConfig);
-          setShowOnboarding(false);
-        }}
-      />
+      <ThemeProvider themeId={config.theme}>
+        <OnboardingWizard
+          config={config}
+          pluginRegistry={services.pluginRegistry}
+          onComplete={(updatedConfig) => {
+            setConfig(updatedConfig);
+            setShowOnboarding(false);
+          }}
+        />
+      </ThemeProvider>
     );
   }
 
@@ -1655,6 +1752,7 @@ export function App({
       sessionSnapshot={sessionSnapshot}
       desktopBridge={desktopWindowBridge}
       desktopSnapshot={desktopSnapshot}
+      initialThemePreview={desktopThemePreview}
     >
       <AppInner
         pluginRegistry={services.pluginRegistry}

package/src/capabilities/factories.ts

@@ -26,6 +26,8 @@ export function assetDataProvider(provider: AssetDataProvider): AssetDataCapabil
     operations: {
       canProvide: op((input: any) => provider.canProvide?.(input.ticker, input.exchange, input.context) ?? true, "query"),
       getCachedFinancialsForTargets: op((input: any) => provider.getCachedFinancialsForTargets?.(input.targets ?? [], input.options) ?? new Map()),
+      getQuotesBatch: op((input: any) => provider.getQuotesBatch?.(input.targets ?? [], input.options) ?? Promise.resolve([])),
+      getTickerFinancialsBatch: op((input: any) => provider.getTickerFinancialsBatch?.(input.targets ?? [], input.options) ?? Promise.resolve([])),
       getTickerFinancials: op((input: any) => provider.getTickerFinancials(input.ticker, input.exchange, input.context)),
       getQuote: op((input: any) => provider.getQuote(input.ticker, input.exchange, input.context)),
       getExchangeRate: op((input: any) => provider.getExchangeRate(input.fromCurrency)),
@@ -95,6 +97,7 @@ export function newsProvider(options: {
       supports: op((input: any) => options.provider.supports?.(input.query) ?? true, "query"),
       getCachedNews: op((input: any) => options.provider.getCachedNews?.(input.query) ?? [], "query"),
       fetchNews: op((input: any) => options.provider.fetchNews(input.query), "query"),
+      fetchNewsStory: op((input: any) => options.provider.fetchNewsStory?.(input.storyId) ?? null, "query"),
     },
   };
 }

package/src/components/chart/chart-renderer.ts

@@ -157,10 +157,14 @@ export function createPixelBuffer(width: number, heightPixels: number): PixelBuf
 }
 
 function setPixel(buf: PixelBuffer, x: number, y: number, color: string, layer: number) {
-  if (x >= 0 && x < buf.width && y >= 0 && y < buf.height) {
-    const existing = buf.pixels[y]![x];
+  const px = Math.round(x);
+  const py = Math.round(y);
+  if (px >= 0 && px < buf.width && py >= 0 && py < buf.height) {
+    const row = buf.pixels[py];
+    if (!row) return;
+    const existing = row[px];
     if (!existing || layer >= existing.layer) {
-      buf.pixels[y]![x] = { color, layer };
+      row[px] = { color, layer };
     }
   }
 }
@@ -178,17 +182,22 @@ export function drawLine(
   color: string,
   layer: number = LAYER_DATA,
 ) {
-  let dx = Math.abs(x1 - x0);
-  let dy = Math.abs(y1 - y0);
-  const sx = x0 < x1 ? 1 : -1;
-  const sy = y0 < y1 ? 1 : -1;
+  const startX = Math.round(x0);
+  const startY = Math.round(y0);
+  const endX = Math.round(x1);
+  const endY = Math.round(y1);
+  if (![startX, startY, endX, endY].every(Number.isFinite)) return;
+  let dx = Math.abs(endX - startX);
+  let dy = Math.abs(endY - startY);
+  const sx = startX < endX ? 1 : -1;
+  const sy = startY < endY ? 1 : -1;
   let err = dx - dy;
-  let x = x0;
-  let y = y0;
+  let x = startX;
+  let y = startY;
 
   while (true) {
     setPixel(buf, x, y, color, layer);
-    if (x === x1 && y === y1) break;
+    if (x === endX && y === endY) break;
     const e2 = 2 * err;
     if (e2 > -dy) {
       err -= dy;
@@ -492,11 +501,14 @@ export function drawGridLines(
   yPositions: number[],
   color: string,
 ) {
-  for (const y of yPositions) {
+  for (const rawY of yPositions) {
+    const y = Math.round(rawY);
     if (y < 0 || y >= buf.height) continue;
     // Dotted horizontal line — dot every 6th column (≈ every 3 terminal columns)
+    const row = buf.pixels[y];
+    if (!row) continue;
     for (let x = 0; x < buf.width; x++) {
-      if (x % 6 === 0 && !buf.pixels[y]![x]) {
+      if (x % 6 === 0 && !row[x]) {
         setPixel(buf, x, y, color, LAYER_GRID);
       }
     }

package/src/components/chart/chart.test.ts

@@ -7,6 +7,8 @@ import {
 } from "./chart-data";
 import { stepCursorTowards } from "./cursor-motion";
 import { buildChartScene, buildCursorTimeAxisSegments, buildTimeAxis, formatAxisValue, formatCursorAxisValue, renderChart, resolveChartAxisWidth, resolveChartPalette } from "./chart-renderer";
+import { buildCursorTimeAxisOverlay } from "./time-axis-label";
+import { buildCursorPriceAxisOverlay } from "./price-axis-labels";
 import type { PricePoint } from "../../types/financials";
 import type { ChartRenderMode } from "./chart-types";
 
@@ -429,6 +431,47 @@ describe("renderChart", () => {
     expect(segments.find((segment) => segment.highlighted)?.text).toBe("12:30");
   });
 
+  test("positions desktop cursor x-axis overlay from exact pixels", () => {
+    const dates = Array.from({ length: 13 }, (_, index) => new Date(2026, 0, 5, 9, 30 + index * 30));
+    const width = 72;
+    const cursorPixelX = 291.5;
+    const cellWidthPx = 8;
+    const segments = buildCursorTimeAxisSegments({
+      timeLabels: buildTimeAxis(dates, width),
+      width,
+      cursorColumn: 36,
+      cursorDate: dates[6]!,
+      dates,
+    });
+    const overlay = buildCursorTimeAxisOverlay({
+      segments,
+      width,
+      cursorPixelX,
+      cellWidthPx,
+    });
+
+    expect(overlay.label).toBe("12:30");
+    expect(overlay.baseText).toHaveLength(width);
+    expect(overlay.leftPercent).toBeCloseTo((cursorPixelX / (width * cellWidthPx - 1)) * 100, 5);
+  });
+
+  test("positions desktop cursor y-axis overlay from exact pixels", () => {
+    const height = 8;
+    const cellHeightPx = 18;
+    const cursorPixelY = 45.25;
+    const overlay = buildCursorPriceAxisOverlay({
+      axisWidth: 7,
+      axisSectionWidth: 8,
+      height,
+      cursorPixelY,
+      cursorLabel: "$214.03",
+      cellHeightPx,
+    });
+
+    expect(overlay.labelText).toBe("$214.03 ");
+    expect(overlay.topPercent).toBeCloseTo((cursorPixelY / (height * cellHeightPx - 1)) * 100, 5);
+  });
+
   test("shows second precision when the visible window reaches second-level data", () => {
     const dates = Array.from({ length: 6 }, (_, index) => new Date(2026, 0, 5, 9, 30, index * 10));
 

package/src/components/chart/comparison-chart-renderer.test.ts

@@ -119,6 +119,32 @@ describe("renderComparisonChart", () => {
     expect(result.activeDate?.toISOString()).toBe("2024-01-03T00:00:00.000Z");
   });
 
+  test("renders when precise desktop layout passes a fractional chart height", () => {
+    const projection = projectComparisonChartData([
+      makeSeries("AAPL", "#00ff00", [10, 12, 11, 13]),
+    ], 12, {
+      panOffset: 0,
+      zoomLevel: 1,
+      renderMode: "area",
+    }, "percent");
+
+    const result = renderComparisonChart(projection, {
+      width: 12,
+      height: 6.5,
+      cursorX: null,
+      cursorY: null,
+      selectedSymbol: "AAPL",
+      colors: {
+        bgColor: "#000000",
+        gridColor: "#333333",
+        crosshairColor: "#ffffff",
+      },
+    });
+
+    expect(result.lines.length).toBeGreaterThan(0);
+    expect(textLines(result).some((line) => /[^\s]/.test(line))).toBe(true);
+  });
+
   test("keeps terminal comparison chart cells transparent", () => {
     const projection = projectComparisonChartData([
       makeSeries("AAPL", "#00ff00", [10, 12, 11, 13]),

package/src/components/chart/comparison-chart-renderer.ts

@@ -80,6 +80,11 @@ function clamp(value: number, min: number, max: number): number {
   return Math.max(min, Math.min(max, value));
 }
 
+function normalizeCount(value: number, min: number): number {
+  if (!Number.isFinite(value)) return min;
+  return Math.max(Math.floor(value), min);
+}
+
 function getComparisonDotX(index: number, count: number, width: number): number {
   if (count <= 1) return Math.round(Math.max(width - 1, 0) / 2);
   return Math.round((index / (count - 1)) * Math.max(width - 1, 0));
@@ -260,15 +265,17 @@ export function buildComparisonChartScene(
 
   const min = Math.min(...values);
   const max = Math.max(...values);
+  const width = normalizeCount(opts.width, 1);
+  const height = normalizeCount(opts.height, 1);
   const selectedSeries = getSelectedSeries(projection.series, opts.selectedSymbol);
-  const activeIdx = getActiveIndex(projection.dates.length, opts.width, opts.cursorX);
+  const activeIdx = getActiveIndex(projection.dates.length, width, opts.cursorX);
   const activeDate = projection.dates[activeIdx] ?? projection.dates[projection.dates.length - 1]!;
   const selectedPoint = selectedSeries?.points[activeIdx] ?? null;
-  const chartRows = opts.height;
+  const chartRows = height;
   const range = max - min || 1;
   const cursorX = opts.cursorX === null
     ? null
-    : clamp(opts.cursorX, 0, Math.max(opts.width - 1, 0));
+    : clamp(opts.cursorX, 0, Math.max(width - 1, 0));
   const fallbackValue = selectedPoint?.value ?? selectedSeries?.latestValue ?? min;
   const cursorY = cursorX === null
     ? null
@@ -282,7 +289,7 @@ export function buildComparisonChartScene(
   const cursorColumn = cursorX === null ? null : Math.round(cursorX);
   const cursorDotX = cursorX === null
     ? null
-    : Math.round((cursorX / Math.max(opts.width - 1, 1)) * Math.max(opts.width * 2 - 1, 0));
+    : Math.round((cursorX / Math.max(width - 1, 1)) * Math.max(width * 2 - 1, 0));
   const cursorRow = cursorY === null ? null : Math.round(cursorY);
   const crosshairValue = cursorY === null
     ? null
@@ -291,8 +298,8 @@ export function buildComparisonChartScene(
   return {
     dates: projection.dates,
     series: projection.series,
-    width: opts.width,
-    height: opts.height,
+    width,
+    height,
     chartRows,
     mode: projection.effectiveMode,
     axisMode: projection.effectiveAxisMode,

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

@@ -8,6 +8,7 @@ import { buildChartKey } from "../../market-data/selectors";
 import { useAppSelector, usePaneSettingValue } from "../../state/app-context";
 import { usePaneFooter, type PaneHint } from "../layout/pane-footer";
 import { blendHex, colors, getComparisonSeriesColor, priceColor } from "../../theme/colors";
+import { useThemeColors } from "../../theme/theme-context";
 import type { BrokerContractRef } from "../../types/instrument";
 import type { PricePoint } from "../../types/financials";
 import { formatPercentRaw } from "../../utils/format";
@@ -95,8 +96,9 @@ import {
   resolveNativeSurfaceVisibleRect,
   type NativeSurfaceRenderableNode,
 } from "./native/surface-visibility";
-import { formatAxisCell, formatDateShort, resolveChartAxisWidth, type StyledContent } from "./chart-renderer";
+import { formatDateShort, resolveChartAxisWidth, type StyledContent } from "./chart-renderer";
 import { TimeAxisLabel } from "./time-axis-label";
+import { PriceAxisLabels } from "./price-axis-labels";
 
 const MODE_CHIPS: Record<ComparisonChartRenderMode, string> = {
   area: "A",
@@ -516,6 +518,7 @@ function ComparisonStockChartView({
   onOpenSymbol,
   onEditTickers,
 }: ComparisonStockChartViewProps) {
+  useThemeColors();
   const renderer = useNativeRenderer();
   const { canvasCharts, cellWidthPx = 8, cellHeightPx = 18, pixelRatio = 1 } = useUiCapabilities();
   const nativeSurfaceManager = useMemo(() => getNativeSurfaceManager(renderer), [renderer]);
@@ -1827,17 +1830,16 @@ function ComparisonStockChartView({
   );
 
   const axisBox = (
-    <Box width={axisSectionWidth} height={chartHeight} flexDirection="column">
-      {Array.from({ length: chartHeight }, (_, row) => {
-        const isCursorRow = cursorAxisLabel !== null && cursorRow === row;
-        const label = isCursorRow ? cursorAxisLabel : (axisLabels.get(row) ?? null);
-        return (
-          <Text key={row} fg={isCursorRow ? chartColors.crosshairColor : colors.textDim}>
-            {formatAxisCell(label, axisWidth).padEnd(axisSectionWidth)}
-          </Text>
-        );
-      })}
-    </Box>
+    <PriceAxisLabels
+      axisLabels={axisLabels}
+      axisWidth={axisWidth}
+      axisSectionWidth={axisSectionWidth}
+      height={chartHeight}
+      cursorRow={cursorRow}
+      cursorPixelY={hasDisplayCursor ? displayCursor.pixelY : null}
+      cursorLabel={cursorAxisLabel}
+      cursorColor={chartColors.crosshairColor}
+    />
   );
 
   const legendRowsData = Array.from({ length: Math.ceil(symbols.length / legendColumns) }, (_, rowIndex) => (
@@ -1947,6 +1949,7 @@ function ComparisonStockChartView({
           timeLabels={timeAxisLabel}
           width={chartWidth}
           cursorColumn={cursorTimeAxisColumn}
+          cursorPixelX={hasDisplayCursor ? displayCursor.pixelX : null}
           cursorDate={cursorTimeAxisDate}
           dates={projection.dates}
           cursorColor={chartColors.crosshairColor}