gloomberb 0.5.1 → 0.6.1

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

@@ -1,15 +1,18 @@
-import { TextAttributes, type BoxRenderable, type CliRenderer } from "@opentui/core";
-import { useKeyboard, useRenderer } from "@opentui/react";
+import { Box, ChartSurface, ScrollBox, Text } from "../../ui";
+import { TextAttributes, type BoxRenderable, type NativeRendererHost as CliRenderer } from "../../ui";
+import { useNativeRenderer, useUiCapabilities } from "../../ui";
+import { useShortcut } from "../../react/input";
 import { memo, useEffect, useMemo, useRef, useState } from "react";
 import { useChartQueries } from "../../market-data/hooks";
 import { buildChartKey } from "../../market-data/selectors";
-import { useAppState, usePaneSettingValue } from "../../state/app-context";
+import { useAppSelector, usePaneSettingValue } from "../../state/app-context";
+import { usePaneFooter, type PaneHint } from "../layout/pane-footer";
 import { blendHex, colors, getComparisonSeriesColor, priceColor } from "../../theme/colors";
 import type { BrokerContractRef } from "../../types/instrument";
 import type { PricePoint } from "../../types/financials";
 import { formatPercentRaw } from "../../utils/format";
 import { formatMarketPriceWithCurrency, formatSignedMarketPrice } from "../../utils/market-format";
-import { getSharedDataProvider } from "../../plugins/registry";
+import { getSharedMarketData } from "../../plugins/registry";
 import {
   applyComparisonZoomAroundAnchor,
   getMaxComparisonPanOffset,
@@ -79,7 +82,6 @@ import {
 } from "./chart-types";
 import {
   computeBitmapSize,
-  intersectCellRects,
   renderNativeComparisonChartBase,
   renderNativeCrosshairOverlay,
   type CellRect,
@@ -90,8 +92,12 @@ import { ensureKittySupport, getCachedKittySupport } from "./native/kitty-suppor
 import { resolveChartRendererState } from "./native/renderer-selection";
 import { getNativeSurfaceManager } from "./native/surface-manager";
 import { syncCachedNativeSurface } from "./native/surface-sync";
+import {
+  getRenderableCellRect,
+  resolveNativeSurfaceVisibleRect,
+  type NativeSurfaceRenderableNode,
+} from "./native/surface-visibility";
 import { formatAxisCell, formatDateShort, resolveChartAxisWidth, type StyledContent } from "./chart-renderer";
-import { ChartControlHint } from "./chart-control-hint";
 
 const MODE_CHIPS: Record<ComparisonChartRenderMode, string> = {
   area: "A",
@@ -167,14 +173,6 @@ interface DisplayCursorState {
   pixelY: number | null;
 }
 
-interface RenderableNode {
-  x: number;
-  y: number;
-  width: number;
-  height: number;
-  parent: RenderableNode | null;
-}
-
 const EMPTY_DISPLAY_CURSOR: DisplayCursorState = {
   cellX: null,
   cellY: null,
@@ -382,41 +380,6 @@ function resolveCursorMotionKind(
     : "cell";
 }
 
-function extractCellRect(renderable: RenderableNode): CellRect {
-  return {
-    x: renderable.x,
-    y: renderable.y,
-    width: renderable.width,
-    height: renderable.height,
-  };
-}
-
-function resolveVisibleRect(
-  renderable: RenderableNode | null,
-  terminalWidth: number,
-  terminalHeight: number,
-): CellRect | null {
-  if (!renderable) return null;
-
-  let visible: CellRect = {
-    x: 0,
-    y: 0,
-    width: terminalWidth,
-    height: terminalHeight,
-  };
-  let current: RenderableNode | null = renderable;
-
-  while (current) {
-    const currentRect = extractCellRect(current);
-    const nextVisible = intersectCellRects(visible, currentRect);
-    if (!nextVisible) return null;
-    visible = nextVisible;
-    current = current.parent;
-  }
-
-  return visible;
-}
-
 function buildBlankPlotLines(width: number, height: number): string[] {
   return Array.from({ length: height }, () => " ".repeat(width));
 }
@@ -552,7 +515,8 @@ function ComparisonStockChartView({
   symbolSources,
   onOpenSymbol,
 }: ComparisonStockChartViewProps) {
-  const renderer = useRenderer();
+  const renderer = useNativeRenderer();
+  const { canvasCharts, cellWidthPx = 8, cellHeightPx = 18, pixelRatio = 1 } = useUiCapabilities();
   const nativeSurfaceManager = useMemo(() => getNativeSurfaceManager(renderer), [renderer]);
   const [storedRangePreset] = usePaneSettingValue("rangePreset", DEFAULT_COMPARISON_CHART_RANGE_PRESET);
   const [storedResolution] = usePaneSettingValue<ChartResolution>("chartResolution", DEFAULT_COMPARISON_CHART_RESOLUTION);
@@ -573,6 +537,7 @@ function ComparisonStockChartView({
   const supportMap = useMemo(() => buildChartResolutionSupportMap(resolutionSupport ?? []), [resolutionSupport]);
   const [kittySupport, setKittySupport] = useState<boolean | null>(() => getCachedKittySupport(renderer));
   const [displayCursor, setDisplayCursor] = useState<DisplayCursorState>(EMPTY_DISPLAY_CURSOR);
+  const [canvasBaseBitmapState, setCanvasBaseBitmapState] = useState<{ key: string; bitmap: NativeChartBitmap } | null>(null);
   const plotRef = useRef<BoxRenderable | null>(null);
   const nativeBaseSurfaceIdRef = useRef(`comparison-chart-surface:${paneId}:base`);
   const nativeCrosshairSurfaceIdRef = useRef(`comparison-chart-surface:${paneId}:crosshair`);
@@ -580,6 +545,7 @@ function ComparisonStockChartView({
   const lastNativeGeometryRef = useRef<{ rect: CellRect; visibleRect: CellRect | null } | null>(null);
   const lastNativeBaseBitmapRef = useRef<{ key: string; bitmap: NativeChartBitmap } | null>(null);
   const lastNativeCrosshairBitmapRef = useRef<{ key: string; bitmap: NativeChartBitmap } | null>(null);
+  const lastCanvasBaseBitmapRef = useRef<{ key: string; bitmap: NativeChartBitmap } | null>(null);
   const displayCursorRef = useRef<DisplayCursorState>(EMPTY_DISPLAY_CURSOR);
   const targetCursorRef = useRef<DisplayCursorState>(EMPTY_DISPLAY_CURSOR);
   const cursorMotionKindRef = useRef<ChartCursorMotionKind>("discrete");
@@ -596,7 +562,7 @@ function ComparisonStockChartView({
   const headerRows = 1;
   const controlRows = 2;
   const timeAxisRows = 1;
-  const helpRows = 1;
+  const helpRows = 0;
   const legendColumns = getLegendColumns(width);
   const legendNeededRows = symbols.length > 0 ? Math.ceil(symbols.length / legendColumns) : 0;
   const legendRows = legendNeededRows > 0
@@ -734,7 +700,7 @@ function ComparisonStockChartView({
   ), [nativeSurfaceManager]);
 
   useEffect(() => {
-    const provider = getSharedDataProvider();
+    const provider = getSharedMarketData();
     if ((!provider?.getChartResolutionSupport && !provider?.getChartResolutionCapabilities) || symbolSources.length === 0) {
       setResolutionSupport(null);
       return;
@@ -1009,13 +975,19 @@ function ComparisonStockChartView({
     setViewState(nextState);
   };
 
+  const projectionViewState = useMemo(() => ({
+    panOffset: viewState.panOffset,
+    zoomLevel: viewState.zoomLevel,
+    renderMode: viewState.renderMode,
+  }), [viewState.panOffset, viewState.renderMode, viewState.zoomLevel]);
+
   const visibleWindow = useMemo(() => (
-    getVisibleComparisonWindow(series, viewState, chartWidth)
-  ), [chartWidth, series, viewState]);
+    getVisibleComparisonWindow(series, projectionViewState, chartWidth)
+  ), [chartWidth, projectionViewState, series]);
 
   const projection = useMemo(() => (
-    projectComparisonChartData(series, chartWidth, viewState, axisMode)
-  ), [axisMode, chartWidth, series, viewState]);
+    projectComparisonChartData(series, chartWidth, projectionViewState, axisMode)
+  ), [axisMode, chartWidth, projectionViewState, series]);
 
   const cursorX = viewState.cursorX !== null ? clamp(viewState.cursorX, 0, chartWidth - 1) : null;
   const cursorY = viewState.cursorY !== null ? clamp(viewState.cursorY, 0, chartHeight - 1) : null;
@@ -1054,6 +1026,8 @@ function ComparisonStockChartView({
 
   const rendererState = resolveChartRendererState(preferredRenderer, kittySupport, renderer.resolution);
   const effectiveRenderer: ResolvedChartRenderer = rendererState.renderer;
+  const useCanvasChart = canvasCharts && effectiveRenderer !== "kitty";
+  const showNativeUnavailable = rendererState.nativeUnavailable && !useCanvasChart;
 
   const staticScene = useMemo(() => buildComparisonChartScene(projection, {
     width: chartWidth,
@@ -1074,7 +1048,7 @@ function ComparisonStockChartView({
   }), [chartColors, chartHeight, chartWidth, projection, viewState.selectedSymbol]);
 
   const interactiveResult = useMemo(() => (
-    effectiveRenderer === "kitty"
+    effectiveRenderer === "kitty" || useCanvasChart
       ? null
       : renderComparisonChart(projection, {
         width: chartWidth,
@@ -1084,9 +1058,66 @@ function ComparisonStockChartView({
         selectedSymbol: viewState.selectedSymbol,
         colors: chartColors,
       })
-  ), [chartColors, chartHeight, chartWidth, displayCursorX, displayCursorY, effectiveRenderer, projection, viewState.selectedSymbol]);
+  ), [chartColors, chartHeight, chartWidth, displayCursorX, displayCursorY, effectiveRenderer, projection, useCanvasChart, viewState.selectedSymbol]);
+
+  const result = effectiveRenderer === "kitty" || useCanvasChart ? staticResult : interactiveResult!;
+  const timeAxisLabel = result.timeLabels || staticResult.timeLabels;
+  const footerHints = useMemo<PaneHint[]>(() => {
+    const zoomIn = () => {
+      setViewState((current) => applyComparisonZoomAroundAnchor(
+        clearActivePreset(current),
+        current.zoomLevel * 1.5,
+        RIGHT_EDGE_ANCHOR_RATIO,
+        series,
+      ));
+    };
+    const resetView = () => {
+      pendingCanonicalResetRef.current += 1;
+      updateDisplayCursorTarget(EMPTY_DISPLAY_CURSOR, "discrete");
+      setViewState((current) => ({
+        ...(resolveResolutionSelection(current, effectiveResolution, supportMap, visibleDateWindow) ?? current),
+        panOffset: 0,
+        zoomLevel: 1,
+        cursorX: null,
+        cursorY: null,
+      }));
+    };
+    const cycleRange = () => {
+      const currentIndex = TIME_RANGES.indexOf(viewState.presetRange);
+      setRangePreset(TIME_RANGES[(currentIndex + 1) % TIME_RANGES.length] ?? TIME_RANGES[0]!);
+    };
+
+    return [
+      {
+        id: "mode",
+        key: "m",
+        label: "ode",
+        onPress: () => setViewState((current) => ({
+          ...current,
+          renderMode: current.renderMode === "line" ? "area" : "line",
+        })),
+      },
+      {
+        id: "resolution",
+        key: "r",
+        label: "es",
+        onPress: () => {
+          const currentIndex = resolutionChips.indexOf(effectiveResolution);
+          const nextResolution = resolutionChips[(currentIndex + 1) % resolutionChips.length] ?? "auto";
+          setResolution(nextResolution);
+        },
+      },
+      { id: "zoom", key: "+/-", label: "zoom", onPress: zoomIn },
+      { id: "reset", key: "0", label: "reset", onPress: resetView },
+      ...(width >= 72 ? [{ id: "range", key: "1-7", label: "range", onPress: cycleRange }] : []),
+    ];
+  }, [effectiveResolution, resolutionChips, series, supportMap, viewState.presetRange, visibleDateWindow, width]);
+
+  usePaneFooter("comparison-chart", () => ({
+    order: 10,
+    hints: footerHints,
+  }), [footerHints]);
 
-  const result = effectiveRenderer === "kitty" ? staticResult : interactiveResult!;
   const liveScene = useMemo(() => (
     effectiveRenderer === "kitty"
       ? staticScene
@@ -1131,8 +1162,9 @@ function ComparisonStockChartView({
 
     const syncPlacement = () => {
       if (effectiveRenderer !== "kitty" || !rendererState.nativeReady || !plotRef.current) return;
-      const rect = extractCellRect(plotRef.current);
-      const visibleRect = resolveVisibleRect(plotRef.current, renderer.terminalWidth, renderer.terminalHeight);
+      const plot = plotRef.current as NativeSurfaceRenderableNode;
+      const rect = getRenderableCellRect(plot);
+      const visibleRect = resolveNativeSurfaceVisibleRect(plot, renderer.terminalWidth, renderer.terminalHeight);
       const previous = lastNativeGeometryRef.current;
       if (previous
         && previous.rect.x === rect.x
@@ -1187,8 +1219,9 @@ function ComparisonStockChartView({
       return;
     }
 
-    const plotRect = extractCellRect(plotRef.current);
-    const visibleRect = resolveVisibleRect(plotRef.current, renderer.terminalWidth, renderer.terminalHeight);
+    const plot = plotRef.current as NativeSurfaceRenderableNode;
+    const plotRect = getRenderableCellRect(plot);
+    const visibleRect = resolveNativeSurfaceVisibleRect(plot, renderer.terminalWidth, renderer.terminalHeight);
     const bitmapSize = computeBitmapSize(plotRect, renderer.resolution, renderer.terminalWidth, renderer.terminalHeight);
     const bitmapKey = buildComparisonNativeBitmapKey(
       symbols.length,
@@ -1244,8 +1277,9 @@ function ComparisonStockChartView({
       return;
     }
 
-    const plotRect = extractCellRect(plotRef.current);
-    const visibleRect = resolveVisibleRect(plotRef.current, renderer.terminalWidth, renderer.terminalHeight);
+    const plot = plotRef.current as NativeSurfaceRenderableNode;
+    const plotRect = getRenderableCellRect(plot);
+    const visibleRect = resolveNativeSurfaceVisibleRect(plot, renderer.terminalWidth, renderer.terminalHeight);
     const bitmapSize = computeBitmapSize(plotRect, renderer.resolution, renderer.terminalWidth, renderer.terminalHeight);
     const renderablePixelSize = getRenderablePixelSize(plotRef.current, renderer);
     const overlayPixelX = scaleLocalPixelCoordinate(
@@ -1309,7 +1343,7 @@ function ComparisonStockChartView({
     rendererState.nativeReady,
   ]);
 
-  useKeyboard((event) => {
+  useShortcut((event) => {
     if (!focused || symbols.length === 0) return;
 
     switch (event.name) {
@@ -1575,12 +1609,13 @@ function ComparisonStockChartView({
   };
 
   if (symbols.length === 0) {
-    return <text fg={colors.textDim}>No comparison tickers configured.</text>;
+    return <Text fg={colors.textDim}>No comparison tickers configured.</Text>;
   }
 
   const hasChartData = series.some((entry) => entry.points.length > 0);
-  const selectedSeries = hasChartData ? (result.selectedSeries ?? staticResult.selectedSeries) : null;
-  const selectedPoint = hasChartData ? (result.selectedPoint ?? staticResult.selectedPoint) : null;
+  const cursorScene = effectiveRenderer === "kitty" ? staticScene : liveScene;
+  const selectedSeries = hasChartData ? (cursorScene?.selectedSeries ?? staticResult.selectedSeries) : null;
+  const selectedPoint = hasChartData ? (cursorScene?.selectedPoint ?? staticResult.selectedPoint) : null;
   const selectedRawValue = selectedPoint?.rawValue ?? selectedSeries?.latestRawValue ?? null;
   const selectedBaseValue = selectedSeries?.baseValue ?? null;
   const selectedChange = selectedRawValue !== null && selectedBaseValue !== null
@@ -1590,12 +1625,14 @@ function ComparisonStockChartView({
     ? (selectedChange / selectedBaseValue) * 100
     : null;
   const selectedCurrency = selectedSeries?.currency ?? "USD";
-  const displayDate = result.activeDate ?? staticResult.activeDate;
+  const displayDate = cursorScene?.activeDate ?? staticResult.activeDate;
   const visiblePriceRange = result.priceRange ?? staticResult.priceRange ?? undefined;
   const axisLabels = new Map(staticResult.axisLabels.map((entry) => [entry.row, entry.label]));
-  const cursorAxisLabel = result.cursorRow !== null && result.crosshairValue !== null
+  const cursorRow = useCanvasChart ? cursorScene?.cursorRow ?? null : result.cursorRow;
+  const crosshairValue = useCanvasChart ? cursorScene?.crosshairValue ?? null : result.crosshairValue;
+  const cursorAxisLabel = cursorRow !== null && crosshairValue !== null
     ? formatComparisonCursorAxisValue(
-      result.crosshairValue,
+      crosshairValue,
       projection.effectiveAxisMode,
       visiblePriceRange,
     )
@@ -1605,57 +1642,188 @@ function ComparisonStockChartView({
     end: visibleWindow.dates[visibleWindow.dates.length - 1] ?? null,
   });
 
+  const canvasBitmapSize = useMemo(() => {
+    if (!canvasCharts) return null;
+    const resolutionScale = Math.max(1, pixelRatio);
+    return {
+      pixelWidth: Math.max(1, Math.round(chartWidth * cellWidthPx * resolutionScale)),
+      pixelHeight: Math.max(1, Math.round(chartHeight * cellHeightPx * resolutionScale)),
+    };
+  }, [canvasCharts, cellHeightPx, cellWidthPx, chartHeight, chartWidth, pixelRatio]);
+
+  const canvasProjection = useMemo(() => (
+    canvasBitmapSize
+      ? projectComparisonChartData(
+        series,
+        Math.max(chartWidth, canvasBitmapSize.pixelWidth),
+        projectionViewState,
+        axisMode,
+      )
+      : null
+  ), [axisMode, canvasBitmapSize, chartWidth, projectionViewState, series]);
+
+  const canvasBaseScene = useMemo(() => (
+    canvasProjection
+      ? buildComparisonChartScene(canvasProjection, {
+        width: Math.max(chartWidth, canvasBitmapSize?.pixelWidth ?? chartWidth),
+        height: chartHeight,
+        cursorX: null,
+        cursorY: null,
+        selectedSymbol: viewState.selectedSymbol,
+        colors: chartColors,
+      })
+      : null
+  ), [canvasBitmapSize?.pixelWidth, canvasProjection, chartColors, chartHeight, chartWidth, viewState.selectedSymbol]);
+
+  const canvasBaseBitmapKey = useMemo(() => {
+    if (!canvasBitmapSize || !canvasProjection || !hasChartData || isBlockingBody || bodyMessage) return null;
+    return buildComparisonNativeBitmapKey(
+      symbols.length,
+      canvasProjection,
+      viewState.selectedSymbol,
+      canvasBitmapSize.pixelWidth,
+      canvasBitmapSize.pixelHeight,
+      [chartColors.bgColor, chartColors.gridColor, chartColors.crosshairColor].join(","),
+    );
+  }, [
+    bodyMessage,
+    canvasBitmapSize,
+    canvasProjection,
+    chartColors.bgColor,
+    chartColors.crosshairColor,
+    chartColors.gridColor,
+    hasChartData,
+    isBlockingBody,
+    symbols.length,
+    viewState.selectedSymbol,
+  ]);
+
+  const canvasBaseBitmap = useMemo<NativeChartBitmap | null>(() => {
+    return canvasBaseBitmapKey && canvasBaseBitmapState?.key === canvasBaseBitmapKey
+      ? canvasBaseBitmapState.bitmap
+      : null;
+  }, [canvasBaseBitmapKey, canvasBaseBitmapState]);
+
+  const visibleCanvasBaseBitmap = useMemo<NativeChartBitmap | null>(() => {
+    if (canvasBaseBitmap) return canvasBaseBitmap;
+    if (!canvasBaseBitmapKey || !canvasBitmapSize || !canvasBaseBitmapState) return null;
+    return canvasBaseBitmapState.bitmap.width === canvasBitmapSize.pixelWidth
+      && canvasBaseBitmapState.bitmap.height === canvasBitmapSize.pixelHeight
+      ? canvasBaseBitmapState.bitmap
+      : null;
+  }, [canvasBaseBitmap, canvasBaseBitmapKey, canvasBaseBitmapState, canvasBitmapSize]);
+
+  useEffect(() => {
+    if (!canvasBitmapSize || !canvasBaseBitmapKey || !canvasBaseScene) {
+      lastCanvasBaseBitmapRef.current = null;
+      setCanvasBaseBitmapState((current) => (current === null ? current : null));
+      return;
+    }
+
+    const cachedBitmap = lastCanvasBaseBitmapRef.current?.key === canvasBaseBitmapKey
+      ? lastCanvasBaseBitmapRef.current.bitmap
+      : null;
+    if (cachedBitmap) {
+      setCanvasBaseBitmapState((current) => (
+        current?.key === canvasBaseBitmapKey ? current : { key: canvasBaseBitmapKey, bitmap: cachedBitmap }
+      ));
+      return;
+    }
+
+    let cancelled = false;
+    const frame = requestAnimationFrameSafe(() => {
+      const bitmap = renderNativeComparisonChartBase(canvasBaseScene, canvasBitmapSize.pixelWidth, canvasBitmapSize.pixelHeight);
+      if (cancelled) return;
+      lastCanvasBaseBitmapRef.current = { key: canvasBaseBitmapKey, bitmap };
+      setCanvasBaseBitmapState((current) => (
+        current?.key === canvasBaseBitmapKey ? current : { key: canvasBaseBitmapKey, bitmap }
+      ));
+    });
+
+    return () => {
+      cancelled = true;
+      cancelAnimationFrameSafe(frame);
+    };
+  }, [canvasBaseBitmapKey, canvasBaseScene, canvasBitmapSize]);
+
+  const canvasCrosshair = useMemo(() => {
+    if (!canvasBitmapSize || !visibleCanvasBaseBitmap || !nativeCrosshair) return null;
+    const renderablePixelSize = getRenderablePixelSize(plotRef.current, renderer);
+    const overlayPixelX = scaleLocalPixelCoordinate(
+      nativeCrosshair.pixelX,
+      renderablePixelSize?.pixelWidth ?? canvasBitmapSize.pixelWidth,
+      canvasBitmapSize.pixelWidth,
+    );
+    const overlayPixelY = scaleLocalPixelCoordinate(
+      nativeCrosshair.pixelY,
+      renderablePixelSize?.pixelHeight ?? canvasBitmapSize.pixelHeight,
+      canvasBitmapSize.pixelHeight,
+    );
+    if (overlayPixelX === null || overlayPixelY === null) return null;
+    return {
+      pixelX: overlayPixelX,
+      pixelY: overlayPixelY,
+      color: nativeCrosshair.colors.crosshairColor,
+    };
+  }, [canvasBitmapSize, nativeCrosshair, renderer, visibleCanvasBaseBitmap]);
+
+  const plotBitmaps = useMemo(() => {
+    if (!visibleCanvasBaseBitmap) return null;
+    return [visibleCanvasBaseBitmap];
+  }, [visibleCanvasBaseBitmap]);
+
   const plotLines: Array<string | StyledContent> = effectiveRenderer === "kitty"
     ? blankPlotLines
     : result.lines;
-  const plotContent = plotLines.map((line, index) => (
-    <text key={index} content={line as unknown as string} />
-  ));
+  const plotContent = plotBitmaps || (useCanvasChart && canvasBaseBitmapKey)
+    ? null
+    : plotLines.map((line, index) => (
+      <Text key={index} content={line as unknown as string} />
+    ));
 
   const plotBox = (
-    <box
+    <ChartSurface
       ref={plotRef}
       width={chartWidth}
       height={chartHeight}
       flexDirection="column"
-      backgroundColor={chartColors.bgColor}
+      bitmaps={plotBitmaps}
+      crosshair={canvasCrosshair}
       onMouseMove={hasChartData && !isBlockingBody && !bodyMessage ? handlePlotMove : undefined}
       onMouseDown={hasChartData && !isBlockingBody && !bodyMessage ? handlePlotDown : undefined}
       onMouseUp={hasChartData && !isBlockingBody && !bodyMessage ? () => { dragRef.current = null; } : undefined}
       onMouseDrag={hasChartData && !isBlockingBody && !bodyMessage ? handlePlotDrag : undefined}
       onMouseDragEnd={hasChartData && !isBlockingBody && !bodyMessage ? () => { dragRef.current = null; } : undefined}
-      onMouseOut={hasChartData && !isBlockingBody && !bodyMessage ? () => {
-        dragRef.current = null;
-      } : undefined}
+      onMouseScroll={hasChartData && !isBlockingBody && !bodyMessage ? handlePlotScroll : undefined}
     >
       {isBlockingBody
         ? (
-          <box flexGrow={1} alignItems="center" justifyContent="center">
-            <text fg={colors.textDim}>Loading chart...</text>
-          </box>
+          <Box flexGrow={1} alignItems="center" justifyContent="center">
+            <Text fg={colors.textDim}>Loading chart...</Text>
+          </Box>
         )
         : bodyMessage
           ? (
-            <box flexGrow={1} alignItems="center" justifyContent="center">
-              <text fg={colors.textDim}>{bodyMessage}</text>
-            </box>
+            <Box flexGrow={1} alignItems="center" justifyContent="center">
+              <Text fg={colors.textDim}>{bodyMessage}</Text>
+            </Box>
           )
           : plotContent}
-    </box>
+    </ChartSurface>
   );
 
   const axisBox = (
-    <box width={axisSectionWidth} height={chartHeight} flexDirection="column">
+    <Box width={axisSectionWidth} height={chartHeight} flexDirection="column">
       {Array.from({ length: chartHeight }, (_, row) => {
-        const isCursorRow = cursorAxisLabel !== null && result.cursorRow === 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}>
+          <Text key={row} fg={isCursorRow ? chartColors.crosshairColor : colors.textDim}>
             {formatAxisCell(label, axisWidth).padEnd(axisSectionWidth)}
-          </text>
+          </Text>
         );
       })}
-    </box>
+    </Box>
   );
 
   const legendRowsData = Array.from({ length: Math.ceil(symbols.length / legendColumns) }, (_, rowIndex) => (
@@ -1663,17 +1831,17 @@ function ComparisonStockChartView({
   ));
 
   return (
-    <box
+    <Box
       flexDirection="column"
       flexGrow={1}
       onMouseScroll={hasChartData && !isBlockingBody && !bodyMessage ? handlePlotScroll : undefined}
     >
-      <box flexDirection="row" gap={2} height={1}>
-        <text attributes={TextAttributes.BOLD} fg={colors.textBright}>
+      <Box flexDirection="row" gap={2} height={1}>
+        <Text attributes={TextAttributes.BOLD} fg={colors.textBright}>
           {viewState.selectedSymbol ?? "Compare"} - {getChartResolutionLabel(effectiveResolution)}
-        </text>
-        <text fg={colors.textDim}>{visibleLabel}</text>
-        <text fg={selectedChange !== null ? priceColor(selectedChange) : colors.textDim}>
+        </Text>
+        <Text fg={colors.textDim}>{visibleLabel}</Text>
+        <Text fg={selectedChange !== null ? priceColor(selectedChange) : colors.textDim}>
           {selectedRawValue !== null
             ? formatMarketPriceWithCurrency(selectedRawValue, selectedCurrency, {
               minimumFractionDigits: 2,
@@ -1681,8 +1849,8 @@ function ComparisonStockChartView({
               priceRange: visiblePriceRange,
             })
             : "—"}
-        </text>
-        <text fg={selectedChange !== null ? priceColor(selectedChange) : colors.textDim}>
+        </Text>
+        <Text fg={selectedChange !== null ? priceColor(selectedChange) : colors.textDim}>
           {selectedChange !== null && selectedChangePct !== null
             ? `${formatSignedMarketPrice(selectedChange, {
               minimumFractionDigits: 2,
@@ -1690,14 +1858,14 @@ function ComparisonStockChartView({
               priceRange: visiblePriceRange,
             })} (${formatPercentRaw(selectedChangePct)})`
             : "Waiting for data"}
-        </text>
-        {displayDate && <text fg={colors.textDim}>{formatDateShort(displayDate)}</text>}
-      </box>
+        </Text>
+        {displayDate && <Text fg={colors.textDim}>{formatDateShort(displayDate)}</Text>}
+      </Box>
 
-      <box flexDirection="row" height={1}>
-        <box flexDirection="row" gap={1}>
+      <Box flexDirection="row" height={1}>
+        <Box flexDirection="row" gap={1}>
           {TIME_RANGES.map((range, index) => (
-            <text
+            <Text
               key={range}
               fg={activePreset === range ? colors.textBright : (isRangePresetSupported(range, availableManualResolutions) ? colors.textDim : colors.textMuted)}
               attributes={activePreset === range ? TextAttributes.BOLD : 0}
@@ -1708,49 +1876,49 @@ function ComparisonStockChartView({
               }}
             >
               {`${index + 1}:${range}`}
-            </text>
+            </Text>
           ))}
-        </box>
-      </box>
+        </Box>
+      </Box>
 
-      <box flexDirection="row" height={1}>
-        <box flexDirection="row" gap={1}>
+      <Box flexDirection="row" height={1}>
+        <Box flexDirection="row" gap={1}>
           {resolutionChips.map((resolution) => (
-            <text
+            <Text
               key={resolution}
               fg={effectiveResolution === resolution ? colors.textBright : colors.textDim}
               attributes={effectiveResolution === resolution ? TextAttributes.BOLD : 0}
               onMouseDown={() => setResolution(resolution)}
             >
               {getChartResolutionLabel(resolution)}
-            </text>
+            </Text>
           ))}
           {isUpdating && (
-            <text fg={colors.textDim}>updating</text>
+            <Text fg={colors.textDim}>updating</Text>
           )}
-        </box>
-        <box flexGrow={1} />
-        <box flexDirection="row" gap={1}>
+        </Box>
+        <Box flexGrow={1} />
+        <Box flexDirection="row" gap={1}>
           {COMPARISON_RENDER_MODES.map((mode) => (
-            <text
+            <Text
               key={mode}
               fg={viewState.renderMode === mode ? colors.textBright : colors.textDim}
               attributes={viewState.renderMode === mode ? TextAttributes.BOLD : 0}
               onMouseDown={() => setViewState((current) => ({ ...current, renderMode: mode }))}
             >
               {MODE_CHIPS[mode]}
-            </text>
+            </Text>
           ))}
           {projection.warning && (
-            <text fg={colors.textDim}>{projection.warning}</text>
+            <Text fg={colors.textDim}>{projection.warning}</Text>
           )}
-          {rendererState.nativeUnavailable && (
-            <text fg={colors.textDim}>native unavailable</text>
+          {showNativeUnavailable && (
+            <Text fg={colors.textDim}>native unavailable</Text>
           )}
-        </box>
-      </box>
+        </Box>
+      </Box>
 
-      <box
+      <Box
         flexDirection="row"
         height={chartHeight}
         gap={axisGap}
@@ -1758,17 +1926,17 @@ function ComparisonStockChartView({
       >
         {plotBox}
         {axisBox}
-      </box>
+      </Box>
 
-      <box height={1}>
-        <text fg={colors.textDim}>{result.timeLabels || staticResult.timeLabels}</text>
-      </box>
+      <Box height={timeAxisRows}>
+        <Text fg={colors.textDim}>{timeAxisLabel}</Text>
+      </Box>
 
       {legendRows > 0 && (
-        <scrollbox height={legendRows} scrollY>
-          <box flexDirection="column">
+        <ScrollBox height={legendRows} scrollY>
+          <Box flexDirection="column">
             {legendRowsData.map((legendRow, rowIndex) => (
-              <box key={`legend-row:${rowIndex}`} flexDirection="row" gap={1}>
+              <Box key={`legend-row:${rowIndex}`} flexDirection="row" gap={1}>
                 {legendRow.map((symbol) => {
                   const item = projection.series.find((entry) => entry.symbol === symbol) ?? null;
                   const isSelected = viewState.selectedSymbol === symbol;
@@ -1787,7 +1955,7 @@ function ComparisonStockChartView({
                     : `${symbol} waiting`;
 
                   return (
-                    <box
+                    <Box
                       key={symbol}
                       width={legendItemWidth}
                       backgroundColor={isSelected ? blendHex(colors.panel, colors.borderFocused, 0.18) : colors.panel}
@@ -1797,59 +1965,51 @@ function ComparisonStockChartView({
                         onOpenSymbol(symbol);
                       }}
                     >
-                      <text fg={item?.color ?? colors.textDim} attributes={isSelected ? TextAttributes.BOLD : 0}>
+                      <Text fg={item?.color ?? colors.textDim} attributes={isSelected ? TextAttributes.BOLD : 0}>
                         {clipText(`${isSelected ? ">" : " "} ${summary}`, legendItemWidth)}
-                      </text>
-                    </box>
+                      </Text>
+                    </Box>
                   );
                 })}
-              </box>
+              </Box>
             ))}
-          </box>
-        </scrollbox>
+          </Box>
+        </ScrollBox>
       )}
 
-      <box height={1}>
-        <box flexDirection="row" gap={1}>
-          <ChartControlHint hotkey="m" label="ode" />
-          <ChartControlHint hotkey="r" label="es" />
-          <ChartControlHint hotkey="+/-" label="zoom" />
-          <ChartControlHint hotkey="0" label="reset" />
-          {width >= 72 && <ChartControlHint hotkey="1-7" label="range" />}
-          {width >= 88 && <ChartControlHint hotkey="up/down" label="legend" />}
-        </box>
-      </box>
-    </box>
+    </Box>
   );
 }
 
 const MemoizedComparisonStockChartView = memo(ComparisonStockChartView);
 
 export function ComparisonStockChart(props: ComparisonStockChartProps) {
-  const { state } = useAppState();
+  const tickers = useAppSelector((state) => state.tickers);
+  const financials = useAppSelector((state) => state.financials);
+  const chartPreferences = useAppSelector((state) => state.config.chartPreferences);
   const symbolsKey = props.symbols.join("|");
   const stableSymbols = useMemo(() => props.symbols, [symbolsKey]);
   const symbolSources = useMemo<ComparisonChartSymbolSource[]>(() => stableSymbols.map((symbol) => {
-    const ticker = state.tickers.get(symbol) ?? null;
-    const financials = state.financials.get(symbol) ?? null;
+    const ticker = tickers.get(symbol) ?? null;
+    const financial = financials.get(symbol) ?? null;
     const instrument = ticker?.metadata.broker_contracts?.[0] ?? null;
     return {
       symbol,
-      currency: financials?.quote?.currency ?? ticker?.metadata.currency,
+      currency: financial?.quote?.currency ?? ticker?.metadata.currency,
       exchange: ticker?.metadata.exchange ?? "",
       brokerId: instrument?.brokerId,
       brokerInstanceId: instrument?.brokerInstanceId,
       instrument,
-      priceHistory: financials?.priceHistory ?? [],
+      priceHistory: financial?.priceHistory ?? [],
     };
-  }), [stableSymbols, state.financials, state.tickers]);
+  }), [financials, stableSymbols, tickers]);
 
   return (
     <MemoizedComparisonStockChartView
       {...props}
       symbols={stableSymbols}
-      defaultRenderMode={state.config.chartPreferences.defaultRenderMode}
-      preferredRenderer={state.config.chartPreferences.renderer}
+      defaultRenderMode={chartPreferences.defaultRenderMode}
+      preferredRenderer={chartPreferences.renderer}
       symbolSources={symbolSources}
     />
   );