gloomberb 0.4.1 → 0.5.1

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

@@ -7,7 +7,8 @@ import { useAppState, usePaneSettingValue } from "../../state/app-context";
 import { blendHex, colors, getComparisonSeriesColor, priceColor } from "../../theme/colors";
 import type { BrokerContractRef } from "../../types/instrument";
 import type { PricePoint } from "../../types/financials";
-import { formatCurrency, formatPercentRaw } from "../../utils/format";
+import { formatPercentRaw } from "../../utils/format";
+import { formatMarketPriceWithCurrency, formatSignedMarketPrice } from "../../utils/market-format";
 import { getSharedDataProvider } from "../../plugins/registry";
 import {
   applyComparisonZoomAroundAnchor,
@@ -16,15 +17,24 @@ import {
   projectComparisonChartData,
 } from "./comparison-chart-data";
 import { usePersistChartControlSelection } from "./chart-pane-settings";
+import {
+  applyBufferedPanExpansion,
+  consumeScrollPanMovement,
+  getKeyboardPanCellCount,
+  resolveDragPanOffset,
+} from "./chart-scroll";
 import {
   buildVisibleDateWindow,
   clearActivePreset,
   formatVisibleSpanLabel,
-  getCanonicalZoomLevel,
-  isCanonicalPresetViewport,
+  needsCanonicalPresetViewportReset,
   resolveChartBodyState,
+  resolveCanonicalPresetViewport,
   resolvePresetSelection,
+  resolvePresetRangeViewport,
   resolveResolutionSelection,
+  resolveStoredChartSelection,
+  resolveVisibleActivePreset,
 } from "./chart-controller";
 import {
   buildChartResolutionSupportMap,
@@ -43,10 +53,11 @@ import {
   type ChartResolutionSupport,
   type ManualChartResolution,
 } from "./chart-resolution";
-import { RIGHT_EDGE_ANCHOR_RATIO } from "./chart-viewport";
+import { RIGHT_EDGE_ANCHOR_RATIO, resolveAnchoredChartZoom } from "./chart-viewport";
 import {
   buildComparisonChartScene,
   formatComparisonAxisValue,
+  formatComparisonCursorAxisValue,
   renderComparisonChart,
 } from "./comparison-chart-renderer";
 import {
@@ -79,7 +90,8 @@ 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 { formatDateShort, type StyledContent } from "./chart-renderer";
+import { formatAxisCell, formatDateShort, resolveChartAxisWidth, type StyledContent } from "./chart-renderer";
+import { ChartControlHint } from "./chart-control-hint";
 
 const MODE_CHIPS: Record<ComparisonChartRenderMode, string> = {
   area: "A",
@@ -127,6 +139,8 @@ interface ChartMouseEvent {
   y: number;
   pixelX?: number;
   pixelY?: number;
+  stopPropagation?: () => void;
+  preventDefault?: () => void;
   modifiers: {
     shift: boolean;
     alt: boolean;
@@ -407,11 +421,6 @@ function buildBlankPlotLines(width: number, height: number): string[] {
   return Array.from({ length: height }, () => " ".repeat(width));
 }
 
-function formatAxisCell(label: string | null, width: number): string {
-  if (!label) return " ".repeat(width);
-  return label.length >= width ? label.slice(0, width) : label.padStart(width);
-}
-
 function buildComparisonNativeBitmapKey(
   symbolCount: number,
   projection: ReturnType<typeof projectComparisonChartData>,
@@ -561,6 +570,7 @@ function ComparisonStockChartView({
     selectedSymbol: symbols[0] ?? null,
   });
   const [resolutionSupport, setResolutionSupport] = useState<ChartResolutionSupport[] | null>(null);
+  const supportMap = useMemo(() => buildChartResolutionSupportMap(resolutionSupport ?? []), [resolutionSupport]);
   const [kittySupport, setKittySupport] = useState<boolean | null>(() => getCachedKittySupport(renderer));
   const [displayCursor, setDisplayCursor] = useState<DisplayCursorState>(EMPTY_DISPLAY_CURSOR);
   const plotRef = useRef<BoxRenderable | null>(null);
@@ -577,9 +587,12 @@ function ComparisonStockChartView({
   const pendingCanonicalResetRef = useRef(1);
   const appliedCanonicalResetRef = useRef(0);
   const pendingExpansionRef = useRef<PendingExpansionAction>(null);
+  const scrollPanCellRemainderRef = useRef(0);
 
-  const axisWidth = 11;
-  const axisGap = 1;
+  const axisSectionWidthBudget = 11;
+  const axisRightPadding = 1;
+  const minimumAxisWidth = axisMode === "percent" ? 5 : 4;
+  const axisGap = axisSectionWidthBudget > 0 ? 1 : 0;
   const headerRows = 1;
   const controlRows = 2;
   const timeAxisRows = 1;
@@ -589,9 +602,9 @@ function ComparisonStockChartView({
   const legendRows = legendNeededRows > 0
     ? Math.min(4, Math.max(Math.min(height - (headerRows + controlRows + timeAxisRows + helpRows + 4), legendNeededRows), 1))
     : 0;
-  const chartWidth = Math.max(width - axisWidth - axisGap, 20);
   const chartHeight = Math.max(height - headerRows - controlRows - timeAxisRows - helpRows - legendRows, 4);
-  const maxCursorX = chartWidth - 1;
+  const minChartWidth = 20;
+  const measurementChartWidth = Math.max(width - axisSectionWidthBudget - axisGap, minChartWidth);
   const legendItemWidth = Math.max(Math.floor((width - Math.max(legendColumns - 1, 0)) / legendColumns), 20);
   const chartColors = useMemo(() => ({
     bgColor: colors.bg,
@@ -625,16 +638,20 @@ function ComparisonStockChartView({
 
   useEffect(() => {
     pendingCanonicalResetRef.current += 1;
-    setViewState((current) => resolvePresetSelection(
-      {
-        ...current,
-        resolution: storedResolution,
-      },
-      storedRangePreset,
-      storedResolution === "auto" ? null : getSupportMaxRange(resolutionSupport ?? [], storedResolution),
+    setViewState((current) => (
+      storedResolution === "auto"
+        ? resolveStoredChartSelection(current, storedRangePreset, storedResolution, supportMap)
+        : resolvePresetSelection(
+          {
+            ...current,
+            resolution: storedResolution,
+          },
+          storedRangePreset,
+          getSupportMaxRange(supportMap, storedResolution),
+        )
     ));
     updateDisplayCursorTarget(EMPTY_DISPLAY_CURSOR, "discrete");
-  }, [resolutionSupport, storedRangePreset, storedResolution]);
+  }, [storedRangePreset, storedResolution, supportMap]);
 
   const commitDisplayCursor = (next: DisplayCursorState) => {
     displayCursorRef.current = next;
@@ -754,7 +771,11 @@ function ComparisonStockChartView({
       }
     })).then((supportSets) => {
       if (!cancelled) {
-        setResolutionSupport(supportSets.some((support) => support === null) ? null : intersectChartResolutionSupport(supportSets));
+        setResolutionSupport(
+          supportSets.some((support) => support === null)
+            ? null
+            : intersectChartResolutionSupport(supportSets.filter((support): support is ChartResolutionSupport[] => support !== null)),
+        );
       }
     }).catch(() => {
       if (!cancelled) {
@@ -767,7 +788,6 @@ function ComparisonStockChartView({
     };
   }, [capabilityKey, symbolSources]);
 
-  const supportMap = useMemo(() => buildChartResolutionSupportMap(resolutionSupport ?? []), [resolutionSupport]);
   const effectiveResolutionSupport = useMemo<ChartResolutionSupport[]>(() => (
     resolutionSupport ?? DEFAULT_VISIBLE_MANUAL_CHART_RESOLUTIONS.map((resolution) => ({ resolution, maxRange: "ALL" as const }))
   ), [resolutionSupport]);
@@ -819,24 +839,93 @@ function ComparisonStockChartView({
       points: history,
     };
   }), [chartEntries, chartRequests, colors.bg, symbolSources]);
+  const axisWidth = useMemo(() => {
+    const measureAxisWidth = (targetWidth: number) => {
+      const measuredProjection = projectComparisonChartData(series, targetWidth, viewState, axisMode);
+      const measuredResult = renderComparisonChart(measuredProjection, {
+        width: targetWidth,
+        height: chartHeight,
+        cursorX: null,
+        cursorY: null,
+        selectedSymbol: viewState.selectedSymbol,
+        colors: chartColors,
+      });
+      const measuredScene = buildComparisonChartScene(measuredProjection, {
+        width: targetWidth,
+        height: chartHeight,
+        cursorX: null,
+        cursorY: null,
+        selectedSymbol: viewState.selectedSymbol,
+        colors: chartColors,
+      });
+      const cursorSamples = measuredScene
+        ? [
+          formatComparisonCursorAxisValue(
+            measuredScene.min,
+            measuredProjection.effectiveAxisMode,
+            measuredResult.priceRange ?? undefined,
+          ),
+          formatComparisonCursorAxisValue(
+            measuredScene.max,
+            measuredProjection.effectiveAxisMode,
+            measuredResult.priceRange ?? undefined,
+          ),
+        ]
+        : [];
+
+      return resolveChartAxisWidth(
+        [...measuredResult.axisLabels.map((entry) => entry.label), ...cursorSamples],
+        minimumAxisWidth,
+        Math.max(axisSectionWidthBudget - axisRightPadding, minimumAxisWidth),
+      );
+    };
+
+    const firstPassWidth = measureAxisWidth(measurementChartWidth);
+    const refinedChartWidth = Math.max(width - firstPassWidth - axisRightPadding - axisGap, minChartWidth);
+    return refinedChartWidth === measurementChartWidth ? firstPassWidth : measureAxisWidth(refinedChartWidth);
+  }, [
+    axisGap,
+    axisMode,
+    axisRightPadding,
+    axisSectionWidthBudget,
+    chartColors,
+    chartHeight,
+    measurementChartWidth,
+    minChartWidth,
+    minimumAxisWidth,
+    series,
+    viewState.panOffset,
+    viewState.renderMode,
+    viewState.selectedSymbol,
+    viewState.zoomLevel,
+    width,
+  ]);
+  const axisSectionWidth = axisWidth + axisRightPadding;
+  const chartWidth = Math.max(width - axisSectionWidth - axisGap, minChartWidth);
+  const maxCursorX = chartWidth - 1;
   const seriesDates = useMemo(() => getUniqueSortedSeriesDates(series), [series]);
   const visibleDateWindow = useMemo(() => buildVisibleDateWindow(seriesDates, viewState.panOffset, viewState.zoomLevel), [seriesDates, viewState.panOffset, viewState.zoomLevel]);
-  const activePreset = isCanonicalPresetViewport(seriesDates, {
+  const activePreset = resolveVisibleActivePreset(seriesDates, {
+    presetRange: viewState.presetRange,
     activePreset: viewState.activePreset,
     panOffset: viewState.panOffset,
     zoomLevel: viewState.zoomLevel,
     resolution: effectiveResolution,
-  }) ? viewState.activePreset : null;
+  });
 
   useEffect(() => {
     if (seriesDates.length === 0) return;
-    if (appliedCanonicalResetRef.current < pendingCanonicalResetRef.current) {
-      const canonicalZoom = getCanonicalZoomLevel(seriesDates, viewState.presetRange);
-      appliedCanonicalResetRef.current = pendingCanonicalResetRef.current;
+    const hasPendingCanonicalReset = appliedCanonicalResetRef.current < pendingCanonicalResetRef.current;
+    const shouldReconcileActivePreset = !hasPendingCanonicalReset
+      && needsCanonicalPresetViewportReset(seriesDates, viewState);
+    if (hasPendingCanonicalReset || shouldReconcileActivePreset) {
+      if (hasPendingCanonicalReset) {
+        appliedCanonicalResetRef.current = pendingCanonicalResetRef.current;
+      }
       setViewState((current) => (
-        current.zoomLevel === canonicalZoom && current.panOffset === 0
-          ? current
-          : { ...current, zoomLevel: canonicalZoom, panOffset: 0, cursorX: null, cursorY: null }
+        hasPendingCanonicalReset
+          ? resolvePresetRangeViewport(current, seriesDates)
+          : resolveCanonicalPresetViewport(current, seriesDates)
       ));
       return;
     }
@@ -856,7 +945,15 @@ function ComparisonStockChartView({
         panOffset: clamp(pendingExpansion.targetPanOffset, 0, getMaxComparisonPanOffset(series, current.presetRange, current.zoomLevel, chartWidth)),
       };
     });
-  }, [chartWidth, series, seriesDates, viewState.presetRange]);
+  }, [
+    chartWidth,
+    series,
+    seriesDates,
+    viewState.activePreset,
+    viewState.panOffset,
+    viewState.presetRange,
+    viewState.zoomLevel,
+  ]);
 
   useEffect(() => {
     const refreshSupport = () => setKittySupport(getCachedKittySupport(renderer));
@@ -889,12 +986,7 @@ function ComparisonStockChartView({
       : clampTimeRangeToMaxRange(nextCandidate, supportMap.get(effectiveResolution) ?? viewState.bufferRange);
     if (nextBufferRange === viewState.bufferRange) return false;
     pendingExpansionRef.current = action;
-    setViewState((current) => ({
-      ...clearActivePreset(current),
-      bufferRange: nextBufferRange,
-      cursorX: null,
-      cursorY: null,
-    }));
+    setViewState((current) => applyBufferedPanExpansion(current, nextBufferRange));
     return true;
   };
 
@@ -1222,6 +1314,7 @@ function ComparisonStockChartView({
 
     switch (event.name) {
       case "=":
+      case "+":
         setViewState((current) => applyComparisonZoomAroundAnchor(
           clearActivePreset(current),
           current.zoomLevel * 1.5,
@@ -1230,6 +1323,7 @@ function ComparisonStockChartView({
         ));
         return;
       case "-":
+      case "_":
         if (viewState.zoomLevel <= 1.001 && expandBufferRange({
           kind: "zoom-out",
           targetVisibleCount: Math.round(seriesDates.length * 1.5),
@@ -1255,24 +1349,28 @@ function ComparisonStockChartView({
           cursorY: null,
         }));
         return;
-      case "a":
+      case "a": {
+        const panStep = getKeyboardPanCellCount(chartWidth);
         if (viewState.panOffset >= getMaxComparisonPanOffset(series, viewState.presetRange, viewState.zoomLevel, chartWidth) && expandBufferRange({
           kind: "pan-left",
-          targetPanOffset: viewState.panOffset + Math.max(Math.floor(chartWidth / 10), 1),
+          targetPanOffset: viewState.panOffset + panStep,
         })) {
           return;
         }
         setViewState((current) => ({
           ...clearActivePreset(current),
-          panOffset: clamp(current.panOffset + Math.max(Math.floor(chartWidth / 10), 1), 0, getMaxComparisonPanOffset(series, current.presetRange, current.zoomLevel, chartWidth)),
+          panOffset: clamp(current.panOffset + panStep, 0, getMaxComparisonPanOffset(series, current.presetRange, current.zoomLevel, chartWidth)),
         }));
         return;
-      case "d":
+      }
+      case "d": {
+        const panStep = getKeyboardPanCellCount(chartWidth);
         setViewState((current) => ({
           ...clearActivePreset(current),
-          panOffset: clamp(current.panOffset - Math.max(Math.floor(chartWidth / 10), 1), 0, getMaxComparisonPanOffset(series, current.presetRange, current.zoomLevel, chartWidth)),
+          panOffset: clamp(current.panOffset - panStep, 0, getMaxComparisonPanOffset(series, current.presetRange, current.zoomLevel, chartWidth)),
         }));
         return;
+      }
       case "m":
         setViewState((current) => ({
           ...current,
@@ -1415,21 +1513,31 @@ function ComparisonStockChartView({
     if (!dragRef.current) return;
 
     const deltaCells = getGlobalMouseX(event, renderer) - dragRef.current.startGlobalX;
-    const pointDelta = Math.round((deltaCells / Math.max(chartWidth, 1)) * Math.max(visibleWindow.dates.length, 1));
-    const nextPan = clamp(
-      dragRef.current.startPanOffset - pointDelta,
-      0,
-      Math.max(visibleWindow.totalDates - visibleWindow.dates.length, 0),
+    const nextPan = resolveDragPanOffset(
+      dragRef.current.startPanOffset,
+      deltaCells,
+      chartWidth,
+      visibleWindow.dates.length,
+      visibleWindow.totalDates - visibleWindow.dates.length,
     );
     setViewState((current) => ({ ...clearActivePreset(current), panOffset: nextPan }));
   };
 
   const handlePlotScroll = (event: ChartMouseEvent) => {
+    event.stopPropagation?.();
+    event.preventDefault?.();
     const direction = event.scroll?.direction;
     if (!direction) return;
+    const scrollPan = consumeScrollPanMovement(
+      chartWidth,
+      event.scroll?.delta,
+      direction,
+      scrollPanCellRemainderRef.current,
+    );
+    scrollPanCellRemainderRef.current = scrollPan.remainder;
+    const scrollPanCells = scrollPan.cells;
 
     const localPointer = getLocalPlotPointer(event, plotRef.current, renderer);
-    const anchorRatio = localPointer ? localPointer.cellX / Math.max(chartWidth - 1, 1) : 0.5;
 
     if (localPointer) {
       const selectionCursor = resolveSelectionCursor(localPointer, projection.dates.length, chartWidth);
@@ -1447,65 +1555,23 @@ function ComparisonStockChartView({
       commitSelectionCursor(selectionCursor);
     }
 
-    if (event.modifiers.shift && (direction === "up" || direction === "down")) {
-      const shiftDirection = direction === "up" ? 1 : -1;
-      const targetPanOffset = viewState.panOffset + shiftDirection * Math.max(Math.round(chartWidth * 0.08), 1);
-      if (shiftDirection > 0 && viewState.panOffset >= getMaxComparisonPanOffset(series, viewState.presetRange, viewState.zoomLevel, chartWidth) && expandBufferRange({
-        kind: "pan-left",
-        targetPanOffset,
-      })) {
-        return;
-      }
-      const nextPan = clamp(
-        targetPanOffset,
-        0,
-        getMaxComparisonPanOffset(series, viewState.presetRange, viewState.zoomLevel, chartWidth),
-      );
-      setViewState((current) => ({ ...clearActivePreset(current), panOffset: nextPan }));
-      return;
-    }
+    if (scrollPanCells === 0) return;
 
-    switch (direction) {
-      case "up":
-        setViewState((current) => applyComparisonZoomAroundAnchor(clearActivePreset(current), current.zoomLevel * 1.18, anchorRatio, series));
-        return;
-      case "down":
-        if (viewState.zoomLevel <= 1.001 && expandBufferRange({
-          kind: "zoom-out",
-          targetVisibleCount: Math.round(seriesDates.length * 1.18),
-          anchorRatio,
-        })) {
-          return;
-        }
-        setViewState((current) => applyComparisonZoomAroundAnchor(clearActivePreset(current), current.zoomLevel / 1.18, anchorRatio, series));
-        return;
-      case "left":
-        if (viewState.panOffset >= getMaxComparisonPanOffset(series, viewState.presetRange, viewState.zoomLevel, chartWidth) && expandBufferRange({
-          kind: "pan-left",
-          targetPanOffset: viewState.panOffset + Math.max(Math.round(chartWidth * 0.08), 1),
-        })) {
-          return;
-        }
-        setViewState((current) => ({
-          ...clearActivePreset(current),
-          panOffset: clamp(
-            current.panOffset + Math.max(Math.round(chartWidth * 0.08), 1),
-            0,
-            getMaxComparisonPanOffset(series, current.presetRange, current.zoomLevel, chartWidth),
-          ),
-        }));
-        return;
-      case "right":
-        setViewState((current) => ({
-          ...clearActivePreset(current),
-          panOffset: clamp(
-            current.panOffset - Math.max(Math.round(chartWidth * 0.08), 1),
-            0,
-            getMaxComparisonPanOffset(series, current.presetRange, current.zoomLevel, chartWidth),
-          ),
-        }));
-        return;
+    const targetPanOffset = viewState.panOffset + scrollPanCells;
+    if (scrollPanCells > 0 && viewState.panOffset >= getMaxComparisonPanOffset(series, viewState.presetRange, viewState.zoomLevel, chartWidth) && expandBufferRange({
+      kind: "pan-left",
+      targetPanOffset,
+    })) {
+      return;
     }
+    setViewState((current) => ({
+      ...clearActivePreset(current),
+      panOffset: clamp(
+        current.panOffset + scrollPanCells,
+        0,
+        getMaxComparisonPanOffset(series, current.presetRange, current.zoomLevel, chartWidth),
+      ),
+    }));
   };
 
   if (symbols.length === 0) {
@@ -1525,9 +1591,14 @@ function ComparisonStockChartView({
     : null;
   const selectedCurrency = selectedSeries?.currency ?? "USD";
   const displayDate = result.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
-    ? formatComparisonAxisValue(result.crosshairValue, projection.effectiveAxisMode)
+    ? formatComparisonCursorAxisValue(
+      result.crosshairValue,
+      projection.effectiveAxisMode,
+      visiblePriceRange,
+    )
     : null;
   const visibleLabel = formatVisibleSpanLabel({
     start: visibleWindow.dates[0] ?? null,
@@ -1538,7 +1609,7 @@ function ComparisonStockChartView({
     ? blankPlotLines
     : result.lines;
   const plotContent = plotLines.map((line, index) => (
-    <text key={index} content={line} />
+    <text key={index} content={line as unknown as string} />
   ));
 
   const plotBox = (
@@ -1556,7 +1627,6 @@ function ComparisonStockChartView({
       onMouseOut={hasChartData && !isBlockingBody && !bodyMessage ? () => {
         dragRef.current = null;
       } : undefined}
-      onMouseScroll={hasChartData && !isBlockingBody && !bodyMessage ? handlePlotScroll : undefined}
     >
       {isBlockingBody
         ? (
@@ -1575,13 +1645,13 @@ function ComparisonStockChartView({
   );
 
   const axisBox = (
-    <box width={axisWidth} height={chartHeight} flexDirection="column">
+    <box width={axisSectionWidth} height={chartHeight} flexDirection="column">
       {Array.from({ length: chartHeight }, (_, row) => {
         const isCursorRow = cursorAxisLabel !== null && result.cursorRow === row;
         const label = isCursorRow ? cursorAxisLabel : (axisLabels.get(row) ?? null);
         return (
           <text key={row} fg={isCursorRow ? chartColors.crosshairColor : colors.textDim}>
-            {formatAxisCell(label, axisWidth)}
+            {formatAxisCell(label, axisWidth).padEnd(axisSectionWidth)}
           </text>
         );
       })}
@@ -1593,18 +1663,32 @@ function ComparisonStockChartView({
   ));
 
   return (
-    <box flexDirection="column" flexGrow={1}>
+    <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}>
           {viewState.selectedSymbol ?? "Compare"} - {getChartResolutionLabel(effectiveResolution)}
         </text>
         <text fg={colors.textDim}>{visibleLabel}</text>
         <text fg={selectedChange !== null ? priceColor(selectedChange) : colors.textDim}>
-          {selectedRawValue !== null ? formatCurrency(selectedRawValue, selectedCurrency) : "—"}
+          {selectedRawValue !== null
+            ? formatMarketPriceWithCurrency(selectedRawValue, selectedCurrency, {
+              minimumFractionDigits: 2,
+              precisionOffset: 1,
+              priceRange: visiblePriceRange,
+            })
+            : "—"}
         </text>
         <text fg={selectedChange !== null ? priceColor(selectedChange) : colors.textDim}>
           {selectedChange !== null && selectedChangePct !== null
-            ? `${selectedChange >= 0 ? "+" : ""}${selectedChange.toFixed(2)} (${formatPercentRaw(selectedChangePct)})`
+            ? `${formatSignedMarketPrice(selectedChange, {
+              minimumFractionDigits: 2,
+              precisionOffset: 1,
+              priceRange: visiblePriceRange,
+            })} (${formatPercentRaw(selectedChangePct)})`
             : "Waiting for data"}
         </text>
         {displayDate && <text fg={colors.textDim}>{formatDateShort(displayDate)}</text>}
@@ -1641,9 +1725,6 @@ function ComparisonStockChartView({
               {getChartResolutionLabel(resolution)}
             </text>
           ))}
-          {viewState.zoomLevel !== 1 && (
-            <text fg={colors.textDim}>zoom:{viewState.zoomLevel.toFixed(1)}x</text>
-          )}
           {isUpdating && (
             <text fg={colors.textDim}>updating</text>
           )}
@@ -1669,7 +1750,12 @@ function ComparisonStockChartView({
         </box>
       </box>
 
-      <box flexDirection="row" height={chartHeight} gap={axisGap}>
+      <box
+        flexDirection="row"
+        height={chartHeight}
+        gap={axisGap}
+        onMouseScroll={hasChartData && !isBlockingBody && !bodyMessage ? handlePlotScroll : undefined}
+      >
         {plotBox}
         {axisBox}
       </box>
@@ -1693,7 +1779,11 @@ function ComparisonStockChartView({
                     : null;
                   const currency = item?.currency ?? "USD";
                   const summary = latestRaw !== null && latestChangePct !== null
-                    ? `${symbol} ${formatCurrency(latestRaw, currency)} ${formatPercentRaw(latestChangePct)}`
+                    ? `${symbol} ${formatMarketPriceWithCurrency(latestRaw, currency, {
+                      minimumFractionDigits: 2,
+                      precisionOffset: 1,
+                      priceRange: visiblePriceRange,
+                    })} ${formatPercentRaw(latestChangePct)}`
                     : `${symbol} waiting`;
 
                   return (
@@ -1720,9 +1810,14 @@ function ComparisonStockChartView({
       )}
 
       <box height={1}>
-        <text fg={colors.textMuted}>
-          mouse hover inspect  drag pan  wheel zoom  ⇧wheel pan  h/l cursor  arrows legend  Enter open  1-7 presets  r res  m mode  0 reset
-        </text>
+        <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>
   );

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

@@ -0,0 +1,50 @@
+import { describe, it, expect } from "bun:test";
+import { computeBollingerBands } from "./bands";
+
+describe("computeBollingerBands", () => {
+  const closes = [10, 12, 11, 13, 15, 14, 13, 12, 14, 16];
+
+  it("upper > middle > lower for all points with period 5", () => {
+    const result = computeBollingerBands(closes, 5, 2);
+    expect(result.upper.length).toBeGreaterThan(0);
+    expect(result.middle.length).toBeGreaterThan(0);
+    expect(result.lower.length).toBeGreaterThan(0);
+    for (let i = 0; i < result.middle.length; i++) {
+      expect(result.upper[i].value).toBeGreaterThan(result.middle[i].value);
+      expect(result.middle[i].value).toBeGreaterThan(result.lower[i].value);
+    }
+  });
+
+  it("indices match across all three bands", () => {
+    const result = computeBollingerBands(closes, 5, 2);
+    for (let i = 0; i < result.middle.length; i++) {
+      expect(result.upper[i].index).toBe(result.middle[i].index);
+      expect(result.lower[i].index).toBe(result.middle[i].index);
+    }
+  });
+
+  it("first point starts at index period-1", () => {
+    const result = computeBollingerBands(closes, 5, 2);
+    expect(result.middle[0].index).toBe(4);
+  });
+
+  it("returns empty for insufficient data", () => {
+    const result = computeBollingerBands([1, 2, 3], 5, 2);
+    expect(result.upper.length).toBe(0);
+    expect(result.middle.length).toBe(0);
+    expect(result.lower.length).toBe(0);
+  });
+
+  it("returns empty for empty input", () => {
+    const result = computeBollingerBands([], 20, 2);
+    expect(result.upper.length).toBe(0);
+    expect(result.middle.length).toBe(0);
+    expect(result.lower.length).toBe(0);
+  });
+
+  it("middle values match SMA", () => {
+    // For period 5: first SMA = (10+12+11+13+15)/5 = 61/5 = 12.2
+    const result = computeBollingerBands(closes, 5, 2);
+    expect(result.middle[0].value).toBeCloseTo(12.2);
+  });
+});

package/src/components/chart/indicators/bands.ts

@@ -0,0 +1,29 @@
+import type { BollingerResult } from "./types";
+import { computeSMA } from "./moving-averages";
+
+export function computeBollingerBands(
+  closes: number[],
+  period = 20,
+  stdDev = 2
+): BollingerResult {
+  const empty: BollingerResult = { upper: [], middle: [], lower: [] };
+  const sma = computeSMA(closes, period);
+  if (sma.length === 0) return empty;
+
+  for (const midPoint of sma) {
+    const end = midPoint.index;
+    const start = end - period + 1;
+    const slice = closes.slice(start, end + 1);
+
+    const mean = midPoint.value;
+    const variance = slice.reduce((sum, v) => sum + (v - mean) ** 2, 0) / period;
+    const sd = Math.sqrt(variance);
+
+    const upper = mean + stdDev * sd;
+    empty.upper.push({ index: midPoint.index, value: upper });
+    empty.middle.push({ index: midPoint.index, value: mean });
+    empty.lower.push({ index: midPoint.index, value: mean - stdDev * sd });
+  }
+
+  return empty;
+}