gloomberb 0.5.0 → 0.6.0

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

@@ -1,9 +1,13 @@
+import { Box, ChartSurface, Text } from "../../ui";
 import { memo, type ReactNode, useCallback, useEffect, useMemo, useRef, useState } from "react";
-import { TextAttributes, type BoxRenderable, type CliRenderer } from "@opentui/core";
-import { useKeyboard, useRenderer } from "@opentui/react";
+import { TextAttributes, type BoxRenderable, type NativeRendererHost as CliRenderer } from "../../ui";
+import { useNativeRenderer, useUiCapabilities } from "../../ui";
+import { useShortcut } from "../../react/input";
 import { useAppDispatch, useAppSelector, usePaneInstance, usePaneInstanceId, usePaneSettingValue, usePaneTicker } from "../../state/app-context";
+import { usePaneFooter, type PaneFooterSegment, type PaneHint } from "../layout/pane-footer";
+import { ShortcutHint } from "../ui";
 import { saveConfig } from "../../data/config-store";
-import { getSharedDataProvider } from "../../plugins/registry";
+import { getSharedMarketData } from "../../plugins/registry";
 import { colors } from "../../theme/colors";
 import { formatCompact } from "../../utils/format";
 import { formatMarketPriceWithCurrency } from "../../utils/market-format";
@@ -79,7 +83,6 @@ import {
 import {
   buildChartScene,
   formatAxisCell,
-  formatDateShort,
   formatCursorAxisValue,
   getActivePointIndex,
   getPointTerminalColumn,
@@ -105,7 +108,6 @@ import {
   type ChartViewState,
   type ResolvedChartRenderer,
 } from "./chart-types";
-import { ChartControlHint } from "./chart-control-hint";
 import {
   computeBitmapSize,
   intersectCellRects,
@@ -155,6 +157,7 @@ interface StockChartProps {
   height: number;
   focused: boolean;
   interactive?: boolean;
+  onActivate?: () => void;
   compact?: boolean;
   axisMode?: ChartAxisMode;
   historyOverride?: PricePoint[] | null;
@@ -162,6 +165,7 @@ interface StockChartProps {
   indicatorConfig?: IndicatorConfig;
   showVolume?: boolean;
   footerControls?: ReactNode;
+  footerHints?: PaneHint[];
 }
 
 interface ResolvedStockChartProps extends StockChartProps {
@@ -1204,7 +1208,7 @@ const INDICATOR_COLORS = [
   "#FF6B6B", "#4ECDC4", "#45B7D1", "#96CEB4", "#FFEAA7", "#DDA0DD", "#98D8C8",
 ];
 
-export function getIndicatorWarmupPeriod(config: IndicatorConfig): number {
+function getIndicatorWarmupPeriod(config: IndicatorConfig): number {
   const periods = [
     ...(config.sma ?? []),
     ...(config.ema ?? []),
@@ -1354,7 +1358,7 @@ export function computeProjectedIndicatorOverlays(
   return reindexIndicatorOverlaysForProjection(overlays, sourcePoints, projectedPoints);
 }
 
-export function reindexIndicatorOverlaysForProjection(
+function reindexIndicatorOverlaysForProjection(
   overlays: ChartIndicatorOverlays,
   sourcePoints: readonly PricePoint[],
   projectedPoints: readonly ProjectedChartPoint[],
@@ -1474,6 +1478,7 @@ export const ResolvedStockChart = memo(function ResolvedStockChart({
   height,
   focused,
   interactive,
+  onActivate,
   compact,
   axisMode = "price",
   historyOverride = null,
@@ -1481,11 +1486,13 @@ export const ResolvedStockChart = memo(function ResolvedStockChart({
   indicatorConfig: indicatorConfigOverride,
   showVolume: showVolumeOverride,
   footerControls,
+  footerHints,
   symbol,
   ticker,
   financials,
 }: ResolvedStockChartProps) {
-  const renderer = useRenderer();
+  const renderer = useNativeRenderer();
+  const { canvasCharts, cellWidthPx = 8, cellHeightPx = 18, pixelRatio = 1 } = useUiCapabilities();
   const dispatch = useAppDispatch();
   const config = useAppSelector((state) => state.config);
   const paneId = usePaneInstanceId();
@@ -1523,7 +1530,12 @@ export const ResolvedStockChart = memo(function ResolvedStockChart({
   const [lastReadyRenderView, setLastReadyRenderView] = useState<CachedRenderedView | null>(null);
   const showVolume = showVolumeOverride ?? !compact;
   const [kittySupport, setKittySupport] = useState<boolean | null>(() => getCachedKittySupport(renderer));
+  const rendererState = resolveChartRendererState(preferredRenderer, kittySupport, renderer.resolution);
+  const effectiveRenderer: ResolvedChartRenderer = rendererState.renderer;
+  const useCanvasChart = canvasCharts && effectiveRenderer !== "kitty";
+  const showNativeUnavailable = rendererState.nativeUnavailable && !useCanvasChart;
   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 nativeSurfaceScope = compact ? "compact" : "full";
   const nativeBaseSurfaceId = useMemo(
@@ -1538,6 +1550,7 @@ export const ResolvedStockChart = memo(function ResolvedStockChart({
   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");
@@ -1633,7 +1646,7 @@ export const ResolvedStockChart = memo(function ResolvedStockChart({
     () => instrumentFromTicker(ticker, ticker?.metadata.ticker ?? null),
     [ticker],
   );
-  const dataProvider = getSharedDataProvider();
+  const dataProvider = getSharedMarketData();
   const capabilityKey = instrumentRef ? [
     instrumentRef.symbol,
     instrumentRef.exchange ?? "",
@@ -1748,11 +1761,14 @@ export const ResolvedStockChart = memo(function ResolvedStockChart({
     (value) => Array.isArray(value) && value.length > 0,
     "No price history available.",
   );
-  const boundsBodyState = !compact && !boundsChartEntry && fallbackPriceHistory.length > 0
+  const shouldUseBoundsFallback = !compact
+    && fallbackPriceHistory.length > 0
+    && (!boundsChartEntry || (rawBoundsBodyState.blocking && !rawBoundsBodyState.data?.length));
+  const boundsBodyState = shouldUseBoundsFallback
     ? {
       data: fallbackPriceHistory,
       blocking: false,
-      updating: false,
+      updating: !!boundsChartEntry && rawBoundsBodyState.blocking,
       emptyMessage: null,
       errorMessage: null,
     }
@@ -1765,11 +1781,14 @@ export const ResolvedStockChart = memo(function ResolvedStockChart({
   const axisGap = axisSectionWidthBudget > 0 ? 1 : 0;
   const minChartWidth = compact ? 12 : 20;
   const measurementChartWidth = Math.max(width - axisSectionWidthBudget - axisGap, minChartWidth);
-  const headerRows = compact ? 0 : 4;
-  const helpRow = compact ? 0 : 1;
+  const headerRows = compact ? 0 : 2;
+  const helpRow = compact ? 1 : 0;
   const timeAxisRow = 1;
+  // Native/canvas surfaces can cover the last physical row after pixel rounding;
+  // keep the text x-axis one row clear of the pane footer.
+  const nativeSurfaceGuardRow = !compact && (useCanvasChart || effectiveRenderer === "kitty") ? 1 : 0;
   const volumeHeight = showVolume && !compact ? 3 : 0;
-  const chartHeight = Math.max(height - headerRows - helpRow - timeAxisRow, 4);
+  const chartHeight = Math.max(height - headerRows - helpRow - timeAxisRow - nativeSurfaceGuardRow, 4);
   const chartCurrency = currencyOverride ?? financials?.quote?.currency ?? ticker?.metadata.currency ?? "USD";
   const chartAssetCategory = ticker?.metadata.assetCategory;
   const boundsHistory = compact
@@ -2803,7 +2822,7 @@ export const ResolvedStockChart = memo(function ResolvedStockChart({
     return buildIndicatorRenderKey(indicators);
   }, [indicators]);
 
-  useKeyboard((event) => {
+  useShortcut((event) => {
     if (!focused || compact) return;
     const key = resolveChartKeyboardKey(event);
 
@@ -3125,9 +3144,6 @@ export const ResolvedStockChart = memo(function ResolvedStockChart({
     indicators,
   }), [axisMode, chartColors, chartHeight, chartWidth, compact, indicators, projection.effectiveMode, projection.points, showVolume, timeAxisDates, volumeHeight]);
 
-  const rendererState = resolveChartRendererState(preferredRenderer, kittySupport, renderer.resolution);
-  const effectiveRenderer: ResolvedChartRenderer = rendererState.renderer;
-
   const staticResult = useMemo(() => renderChart(projection.points, {
     width: chartWidth,
     height: chartHeight,
@@ -3145,7 +3161,7 @@ export const ResolvedStockChart = memo(function ResolvedStockChart({
   }), [axisMode, chartAssetCategory, chartColors, chartCurrency, chartHeight, chartWidth, compact, indicators, projection.effectiveMode, projection.points, showVolume, timeAxisDates, volumeHeight]);
 
   const interactiveResult = useMemo(() => (
-    effectiveRenderer === "kitty"
+    effectiveRenderer === "kitty" || useCanvasChart
       ? null
       : renderChart(projection.points, {
         width: chartWidth,
@@ -3162,20 +3178,20 @@ export const ResolvedStockChart = memo(function ResolvedStockChart({
         timeAxisDates,
         indicators,
       })
-  ), [axisMode, chartAssetCategory, chartColors, chartCurrency, chartHeight, chartWidth, compact, displayCursorX, displayCursorY, effectiveRenderer, indicators, projection.effectiveMode, projection.points, showVolume, timeAxisDates, volumeHeight]);
+  ), [axisMode, chartAssetCategory, chartColors, chartCurrency, chartHeight, chartWidth, compact, displayCursorX, displayCursorY, effectiveRenderer, indicators, projection.effectiveMode, projection.points, showVolume, timeAxisDates, useCanvasChart, volumeHeight]);
 
-  const result = effectiveRenderer === "kitty" ? staticResult : interactiveResult!;
+  const result = effectiveRenderer === "kitty" || useCanvasChart ? staticResult : interactiveResult!;
 
-  const kittyCursorRow = effectiveRenderer === "kitty" && displayCursorY !== null && nativeBaseScene
+  const rasterCursorRow = (effectiveRenderer === "kitty" || useCanvasChart) && displayCursorY !== null && nativeBaseScene
     ? Math.round(clamp(displayCursorY, 0, Math.max(nativeBaseScene.chartRows - 1, 0)))
     : null;
-  const kittyCrosshairPrice = effectiveRenderer === "kitty" && displayCursorY !== null && nativeBaseScene
+  const rasterCrosshairPrice = (effectiveRenderer === "kitty" || useCanvasChart) && displayCursorY !== null && nativeBaseScene
     ? nativeBaseScene.max
       - (clamp(displayCursorY, 0, Math.max(nativeBaseScene.chartRows - 1, 0)) / Math.max(nativeBaseScene.chartRows - 1, 1))
       * (nativeBaseScene.max - nativeBaseScene.min)
     : null;
-  const cursorRow = effectiveRenderer === "kitty" ? kittyCursorRow : result.cursorRow;
-  const crosshairPrice = effectiveRenderer === "kitty" ? kittyCrosshairPrice : result.crosshairPrice;
+  const cursorRow = effectiveRenderer === "kitty" || useCanvasChart ? rasterCursorRow : result.cursorRow;
+  const crosshairPrice = effectiveRenderer === "kitty" || useCanvasChart ? rasterCrosshairPrice : result.crosshairPrice;
 
   const nativeCrosshair = useMemo<NativeCrosshairOverlay | null>(() => {
     if (!interactive || displayCursor.cellX === null || displayCursor.cellY === null) return null;
@@ -3417,11 +3433,7 @@ export const ResolvedStockChart = memo(function ResolvedStockChart({
   const hasHistory = chartWindow.points.length > 0;
   const requestedMode = projection.requestedMode;
   const showOhlcSummary = projection.effectiveMode === "candles" || projection.effectiveMode === "ohlc";
-  const hasSelectionCursor = selectionCursorX !== null;
   const hasDisplayCursor = displayCursorX !== null && displayCursorY !== null;
-  const displayDate = hasSelectionCursor || showOhlcSummary
-    ? (selectionScene?.dateAtCursor ? formatDateShort(selectionScene.dateAtCursor) : null)
-    : null;
   const activePoint = showOhlcSummary ? (selectionScene?.activePoint ?? null) : null;
   const visiblePriceRange = selectionScene
     ? Math.max(selectionScene.max - selectionScene.min, 0)
@@ -3442,6 +3454,147 @@ export const ResolvedStockChart = memo(function ResolvedStockChart({
     ? (renderBodyState.errorMessage ?? renderBodyState.emptyMessage)
     : null;
   const isUpdating = !compact && (renderBodyState.updating || boundsBodyState.updating);
+  const timeAxisLabel = selectionScene?.timeLabels ?? staticResult.timeLabels;
+  const timeAxisBox = (
+    <Box
+      height={1}
+      width={chartWidth}
+      overflow="hidden"
+      data-gloom-role="chart-time-axis"
+    >
+      <Text fg={colors.textDim} style={{ whiteSpace: "pre" }}>{timeAxisLabel}</Text>
+    </Box>
+  );
+  const chartFooterHints = useMemo<PaneHint[]>(() => {
+    if (compact) return [];
+
+    const cycleMode = () => {
+      setViewState((current) => {
+        const activeMode = current.renderMode ?? "area";
+        const index = CHART_RENDER_MODES.indexOf(activeMode);
+        const nextMode = CHART_RENDER_MODES[(index + 1) % CHART_RENDER_MODES.length]!;
+        persistDefaultRenderMode(nextMode);
+        return { ...current, renderMode: nextMode };
+      });
+    };
+    const cycleResolution = () => {
+      const currentIndex = resolutionChips.indexOf(selectedResolution);
+      const nextResolution = resolutionChips[(currentIndex + 1) % resolutionChips.length] ?? "auto";
+      setResolution(nextResolution);
+    };
+    const zoomIn = () => {
+      if (effectiveResolution === "auto") {
+        requestAutoWindow(resolveAutoZoomWindow({
+          historyPoints: history,
+          boundsDates: boundsHistoryDates,
+          currentWindow: navigableDateWindow,
+          direction: "in",
+          anchorRatio: RIGHT_EDGE_ANCHOR_RATIO,
+        }));
+        return;
+      }
+      setViewState((current) => applyZoomAroundAnchor(current, current.zoomLevel * 1.5, RIGHT_EDGE_ANCHOR_RATIO, boundsHistory));
+    };
+    const resetView = () => {
+      if (effectiveResolution === "auto") {
+        pendingAutoWindowRef.current = null;
+        setPendingAutoWindowOverride(null);
+        setRenderedAutoView(null);
+        updateDisplayCursorTarget(EMPTY_DISPLAY_CURSOR, "discrete");
+        setViewState((current) => clearAutoViewportState(current));
+        return;
+      }
+      pendingCanonicalResetRef.current += 1;
+      updateDisplayCursorTarget(EMPTY_DISPLAY_CURSOR, "discrete");
+      setViewState((current) => {
+        const nextState = resolveViewportResolutionSelection(
+          current,
+          effectiveResolution,
+          selectionSupportMap,
+          visibleDateWindow,
+        ) ?? current;
+        return {
+          ...nextState,
+          panOffset: 0,
+          zoomLevel: 1,
+          cursorX: null,
+          cursorY: null,
+        };
+      });
+    };
+    const cycleRange = () => {
+      const currentIndex = activePreset ? TIME_RANGES.indexOf(activePreset) : -1;
+      const nextRange = TIME_RANGES[(currentIndex + 1) % TIME_RANGES.length] ?? TIME_RANGES[0]!;
+      setRange(nextRange);
+    };
+
+    return [
+      { id: "mode", key: "m", label: "ode", onPress: cycleMode },
+      ...(footerHints ?? []),
+      { id: "resolution", key: "r", label: "es", onPress: cycleResolution },
+      { 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 }] : []),
+    ];
+  }, [
+    activePreset,
+    boundsHistory,
+    boundsHistoryDates,
+    compact,
+    effectiveResolution,
+    footerHints,
+    history,
+    navigableDateWindow,
+    resolutionChips,
+    selectedResolution,
+    selectionSupportMap,
+    visibleDateWindow,
+    width,
+  ]);
+
+  const chartFooterInfo = useMemo<PaneFooterSegment[]>(() => {
+    if (compact || !showOhlcSummary || !activePoint) return [];
+
+    const formatPrice = (value: number) => formatMarketPriceWithCurrency(value, chartCurrency, {
+      assetCategory: chartAssetCategory,
+      minimumFractionDigits: 2,
+      precisionOffset: 1,
+      priceRange: visiblePriceRange,
+    });
+
+    return [{
+      id: "ohlc",
+      parts: [
+        { text: "O", tone: "label" },
+        { text: formatPrice(activePoint.open), tone: "value" },
+        { text: "H", tone: "label" },
+        { text: formatPrice(activePoint.high), tone: "value" },
+        { text: "L", tone: "label" },
+        { text: formatPrice(activePoint.low), tone: "value" },
+        { text: "C", tone: "label" },
+        { text: formatPrice(activePoint.close), tone: "value" },
+        { text: "V", tone: "label" },
+        { text: formatCompact(activePoint.volume), tone: "value" },
+      ],
+    }];
+  }, [
+    activePoint,
+    chartAssetCategory,
+    chartCurrency,
+    compact,
+    showOhlcSummary,
+    visiblePriceRange,
+  ]);
+
+  usePaneFooter("stock-chart", () => (
+    compact
+      ? null
+      : {
+          order: 10,
+          info: chartFooterInfo,
+          hints: chartFooterHints,
+        }
+  ), [chartFooterHints, chartFooterInfo, compact]);
 
   useEffect(() => {
     queueMicrotask(() => renderer.requestRender());
@@ -3474,7 +3627,8 @@ export const ResolvedStockChart = memo(function ResolvedStockChart({
   };
 
   const handlePlotDown = (event: ChartMouseEvent) => {
-    if (!interactive || compact) return;
+    if (compact) return;
+    if (!interactive) onActivate?.();
     focusPaneForMouseInteraction(event);
     const localPointer = getLocalPlotPointer(event, plotRef.current, renderer);
     if (!localPointer) return;
@@ -3499,7 +3653,7 @@ export const ResolvedStockChart = memo(function ResolvedStockChart({
   };
 
   const handlePlotDrag = (event: ChartMouseEvent) => {
-    if (!interactive || compact) return;
+    if (compact || (!interactive && !dragRef.current)) return;
     const localPointer = getLocalPlotPointer(event, plotRef.current, renderer);
     if (localPointer) {
       const selectionCursor = resolveSelectionCursor(localPointer, projection.points.length, chartWidth, projection.effectiveMode);
@@ -3522,7 +3676,7 @@ export const ResolvedStockChart = memo(function ResolvedStockChart({
       const deltaCells = getGlobalMouseX(event, renderer) - dragRef.current.startGlobalX;
       requestAutoWindow(shiftDateWindow(
         dragRef.current.startWindow,
-        -getDragPanWindowRatio(deltaCells, chartWidth),
+        getDragPanWindowRatio(deltaCells, chartWidth),
       ));
       return;
     }
@@ -3601,122 +3755,260 @@ export const ResolvedStockChart = memo(function ResolvedStockChart({
     }));
   };
 
+  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(() => {
+    if (!canvasBitmapSize) return null;
+    const canvasWidth = Math.max(chartWidth, canvasBitmapSize.pixelWidth);
+    const canvasOhlcOptions = resolveStableOhlcProjectionOptions({
+      pointCount: chartWindow.points.length,
+      sourceIndexOffset: chartWindow.startIdx,
+      bucketWidth: canvasWidth,
+      navigationPointCount: navigationOhlcPointCount,
+    });
+    return projectChartData(
+      chartWindow.points,
+      canvasWidth,
+      viewState.renderMode,
+      !!compact,
+      canvasOhlcOptions,
+    );
+  }, [
+    canvasBitmapSize,
+    chartWidth,
+    chartWindow.points,
+    chartWindow.startIdx,
+    compact,
+    navigationOhlcPointCount,
+    viewState.renderMode,
+  ]);
+
+  const canvasIndicators = useMemo(() => (
+    sourceIndicatorOverlays && chartWindow.points.length && canvasProjection?.points.length
+      ? reindexIndicatorOverlaysForProjection(
+        sourceIndicatorOverlays,
+        chartWindow.points,
+        canvasProjection.points,
+        chartWindow.startIdx,
+      )
+      : null
+  ), [canvasProjection?.points, chartWindow.points, chartWindow.startIdx, sourceIndicatorOverlays]);
+
+  const canvasIndicatorRenderKey = useMemo(() => buildIndicatorRenderKey(canvasIndicators), [canvasIndicators]);
+
+  const canvasBaseScene = useMemo(() => (
+    canvasProjection
+      ? buildChartScene(canvasProjection.points, {
+        width: canvasProjection.points.length,
+        height: chartHeight,
+        showVolume: showVolume && !compact,
+        volumeHeight,
+        cursorX: null,
+        cursorY: null,
+        mode: canvasProjection.effectiveMode,
+        axisMode,
+        colors: chartColors,
+        timeAxisDates,
+        indicators: canvasIndicators,
+      })
+      : null
+  ), [axisMode, canvasIndicators, canvasProjection, chartColors, chartHeight, compact, showVolume, timeAxisDates, volumeHeight]);
+
+  const canvasBaseBitmapKey = useMemo(() => {
+    if (!canvasBitmapSize || !canvasProjection || !hasHistory || isBlockingBody || bodyMessage) return null;
+    return buildNativeBitmapKey(
+      canvasProjection.points.length,
+      canvasProjection.points,
+      canvasBitmapSize.pixelWidth,
+      canvasBitmapSize.pixelHeight,
+      canvasProjection.effectiveMode,
+      showVolume && !compact,
+      [
+        chartColors.lineColor,
+        chartColors.fillColor,
+        chartColors.gridColor,
+        chartColors.volumeUp,
+        chartColors.volumeDown,
+        chartColors.candleUp,
+        chartColors.candleDown,
+      ].join(","),
+      canvasIndicatorRenderKey,
+    );
+  }, [
+    bodyMessage,
+    canvasBitmapSize,
+    canvasIndicatorRenderKey,
+    canvasProjection,
+    chartColors.candleDown,
+    chartColors.candleUp,
+    chartColors.fillColor,
+    chartColors.gridColor,
+    chartColors.lineColor,
+    chartColors.volumeDown,
+    chartColors.volumeUp,
+    compact,
+    hasHistory,
+    isBlockingBody,
+    showVolume,
+  ]);
+
+  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 = renderNativeChartBase(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={compact || !hasHistory || isBlockingBody || !!bodyMessage ? undefined : handlePlotMove}
       onMouseDown={compact || !hasHistory || isBlockingBody || !!bodyMessage ? undefined : handlePlotDown}
       onMouseUp={compact || !hasHistory || isBlockingBody || !!bodyMessage ? undefined : () => { dragRef.current = null; }}
       onMouseDrag={compact || !hasHistory || isBlockingBody || !!bodyMessage ? undefined : handlePlotDrag}
       onMouseDragEnd={compact || !hasHistory || isBlockingBody || !!bodyMessage ? undefined : () => { dragRef.current = null; }}
-      onMouseOut={compact || !hasHistory || isBlockingBody || !!bodyMessage ? undefined : () => {
-        dragRef.current = null;
-      }}
+      onMouseScroll={compact || !hasHistory || isBlockingBody || !!bodyMessage ? undefined : handlePlotScroll}
     >
       {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 && 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>
   );
 
   if (compact) {
     return (
-      <box flexDirection="column">
-        <box flexDirection="row" height={chartHeight} gap={axisGap}>
+      <Box flexDirection="column">
+        <Box flexDirection="row" height={chartHeight} gap={axisGap}>
           {plotBox}
           {axisBox}
-        </box>
-        <box height={1}>
-          <text fg={colors.textDim}>{selectionScene?.timeLabels ?? staticResult.timeLabels}</text>
-        </box>
-      </box>
+        </Box>
+        {timeAxisBox}
+      </Box>
     );
   }
 
   return (
-    <box
+    <Box
       flexDirection="column"
       flexGrow={1}
       onMouseScroll={compact || !hasHistory || isBlockingBody || !!bodyMessage ? undefined : handlePlotScroll}
     >
-      <box flexDirection="row" gap={2} height={1}>
-        <text attributes={TextAttributes.BOLD} fg={colors.textBright}>
-          {ticker?.metadata.ticker ?? ""} - {getChartResolutionLabel(selectedResolution)}
-        </text>
-        {fallbackResolutionLabel && (
-          <text fg={colors.textDim}>{fallbackResolutionLabel}</text>
-        )}
-        {displayDate && <text fg={colors.textDim}>{displayDate}</text>}
-        {showOhlcSummary && activePoint && (
-          <>
-            <text fg={colors.textDim}>O {formatMarketPriceWithCurrency(activePoint.open, chartCurrency, {
-              assetCategory: chartAssetCategory,
-              minimumFractionDigits: 2,
-              precisionOffset: 1,
-              priceRange: visiblePriceRange,
-            })}</text>
-            <text fg={colors.textDim}>H {formatMarketPriceWithCurrency(activePoint.high, chartCurrency, {
-              assetCategory: chartAssetCategory,
-              minimumFractionDigits: 2,
-              precisionOffset: 1,
-              priceRange: visiblePriceRange,
-            })}</text>
-            <text fg={colors.textDim}>L {formatMarketPriceWithCurrency(activePoint.low, chartCurrency, {
-              assetCategory: chartAssetCategory,
-              minimumFractionDigits: 2,
-              precisionOffset: 1,
-              priceRange: visiblePriceRange,
-            })}</text>
-            <text fg={colors.textDim}>C {formatMarketPriceWithCurrency(activePoint.close, chartCurrency, {
-              assetCategory: chartAssetCategory,
-              minimumFractionDigits: 2,
-              precisionOffset: 1,
-              priceRange: visiblePriceRange,
-            })}</text>
-            <text fg={colors.textDim}>V {formatCompact(activePoint.volume)}</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 ? chartColors.activeRangeColor : (isRangePresetSupported(range, availableManualResolutions) ? chartColors.inactiveRangeColor : colors.textMuted)}
               attributes={activePreset === range ? TextAttributes.BOLD : 0}
@@ -3726,15 +4018,15 @@ export const ResolvedStockChart = memo(function ResolvedStockChart({
               }}
             >
               {`${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={selectedResolution === resolution ? chartColors.activeRangeColor : chartColors.inactiveRangeColor}
               attributes={selectedResolution === resolution ? TextAttributes.BOLD : 0}
@@ -3744,17 +4036,20 @@ export const ResolvedStockChart = memo(function ResolvedStockChart({
               }}
             >
               {getChartResolutionLabel(resolution)}
-            </text>
+            </Text>
           ))}
           {isUpdating && (
-            <text fg={colors.textDim}>updating</text>
+            <Text fg={colors.textDim}>updating</Text>
+          )}
+          {fallbackResolutionLabel && (
+            <Text fg={colors.textDim}>{fallbackResolutionLabel}</Text>
           )}
-        </box>
-        <box flexGrow={1} />
+        </Box>
+        <Box flexGrow={1} />
         {chartWidth >= 72 ? (
-          <box flexDirection="row" gap={1}>
+          <Box flexDirection="row" gap={1}>
             {CHART_RENDER_MODES.map((mode) => (
-              <text
+              <Text
                 key={mode}
                 fg={requestedMode === mode ? chartColors.activeRangeColor : chartColors.inactiveRangeColor}
                 attributes={requestedMode === mode ? TextAttributes.BOLD : 0}
@@ -3764,29 +4059,29 @@ export const ResolvedStockChart = memo(function ResolvedStockChart({
                 }}
               >
                 {MODE_CHIPS[mode]}
-              </text>
+              </Text>
             ))}
             {projection.fallbackMode && (
-              <text fg={colors.textDim}>auto:{MODE_LABELS[projection.fallbackMode]}</text>
+              <Text fg={colors.textDim}>auto:{MODE_LABELS[projection.fallbackMode]}</Text>
             )}
-            {rendererState.nativeUnavailable && (
-              <text fg={colors.textDim}>native unavailable</text>
+            {showNativeUnavailable && (
+              <Text fg={colors.textDim}>native unavailable</Text>
             )}
-          </box>
+          </Box>
         ) : (
-          <box flexDirection="row" gap={1}>
-            <text fg={colors.textDim}>mode:{MODE_LABELS[requestedMode]}</text>
+          <Box flexDirection="row" gap={1}>
+            <Text fg={colors.textDim}>mode:{MODE_LABELS[requestedMode]}</Text>
             {projection.fallbackMode && (
-              <text fg={colors.textDim}>auto:{MODE_LABELS[projection.fallbackMode]}</text>
+              <Text fg={colors.textDim}>auto:{MODE_LABELS[projection.fallbackMode]}</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}
@@ -3794,20 +4089,22 @@ export const ResolvedStockChart = memo(function ResolvedStockChart({
       >
         {plotBox}
         {axisBox}
-      </box>
-
-      <box height={1}>
-        <text fg={colors.textDim}>{selectionScene?.timeLabels ?? staticResult.timeLabels}</text>
-      </box>
-
-      <box height={1} flexDirection="row" gap={1}>
-        <ChartControlHint hotkey="m" label="ode" />
-        {footerControls}
-        <ChartControlHint hotkey="r" label="es" />
-        <ChartControlHint hotkey="+/-" label="zoom" />
-        <ChartControlHint hotkey="0" label="reset" />
-        {width >= 72 && <ChartControlHint hotkey="1-7" label="range" />}
-      </box>
-    </box>
+      </Box>
+
+      {timeAxisBox}
+
+      {compact && (
+        <>
+          <Box height={1} flexDirection="row" gap={1}>
+            <ShortcutHint hotkey="m" label="ode" />
+            {footerControls}
+            <ShortcutHint hotkey="r" label="es" />
+            <ShortcutHint hotkey="+/-" label="zoom" />
+            <ShortcutHint hotkey="0" label="reset" />
+            {width >= 72 && <ShortcutHint hotkey="1-7" label="range" />}
+          </Box>
+        </>
+      )}
+    </Box>
   );
 });