gloomberb 0.9.2 → 0.9.4

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

@@ -12,6 +12,7 @@ import {
   type ComparisonChartRenderMode,
   type TimeRange,
 } from "../core/types";
+import type { MouseInteractionEvent } from "../core/pointer";
 
 const MODE_CHIPS: Record<ComparisonChartRenderMode, string> = {
   area: "A",
@@ -22,6 +23,7 @@ interface ComparisonChartToolbarProps {
   activePreset: TimeRange | null;
   availableManualResolutions: ManualChartResolution[];
   effectiveResolution: ChartResolution;
+  focusPaneForMouseInteraction: (event: MouseInteractionEvent | null | undefined) => void;
   isUpdating: boolean;
   onRangeSelect: (range: TimeRange) => void;
   onRenderModeSelect: (mode: ComparisonChartRenderMode) => void;
@@ -36,6 +38,7 @@ export function ComparisonChartToolbar({
   activePreset,
   availableManualResolutions,
   effectiveResolution,
+  focusPaneForMouseInteraction,
   isUpdating,
   onRangeSelect,
   onRenderModeSelect,
@@ -54,7 +57,8 @@ export function ComparisonChartToolbar({
               key={range}
               fg={activePreset === range ? colors.textBright : (isRangePresetSupported(range, availableManualResolutions) ? colors.textDim : colors.textMuted)}
               attributes={activePreset === range ? TextAttributes.BOLD : 0}
-              onMouseDown={() => {
+              onMouseDown={(event: any) => {
+                focusPaneForMouseInteraction(event);
                 if (isRangePresetSupported(range, availableManualResolutions)) {
                   onRangeSelect(range);
                 }
@@ -73,7 +77,10 @@ export function ComparisonChartToolbar({
               key={resolution}
               fg={effectiveResolution === resolution ? colors.textBright : colors.textDim}
               attributes={effectiveResolution === resolution ? TextAttributes.BOLD : 0}
-              onMouseDown={() => onResolutionSelect(resolution)}
+              onMouseDown={(event: any) => {
+                focusPaneForMouseInteraction(event);
+                onResolutionSelect(resolution);
+              }}
             >
               {getChartResolutionLabel(resolution)}
             </Text>
@@ -89,7 +96,10 @@ export function ComparisonChartToolbar({
               key={mode}
               fg={renderMode === mode ? colors.textBright : colors.textDim}
               attributes={renderMode === mode ? TextAttributes.BOLD : 0}
-              onMouseDown={() => onRenderModeSelect(mode)}
+              onMouseDown={(event: any) => {
+                focusPaneForMouseInteraction(event);
+                onRenderModeSelect(mode);
+              }}
             >
               {MODE_CHIPS[mode]}
             </Text>

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

@@ -270,6 +270,7 @@ function ComparisonStockChartView({
     isUpdating,
     resolutionChips,
     selectionSupportMap,
+    performanceHistoryBySymbol,
     series,
     supportMap,
   } = useComparisonChartRenderData({
@@ -279,7 +280,11 @@ function ComparisonStockChartView({
   const performanceBySymbol = useMemo(() => {
     const bySymbol = new Map<string, PriceReturnField[]>();
     for (const source of symbolSources) {
-      const sourceHistory = appendQuoteToPriceReturnHistory(source.priceHistory, source.quote);
+      const baselineHistory = performanceHistoryBySymbol.get(source.symbol) ?? [];
+      const sourceHistory = appendQuoteToPriceReturnHistory(
+        baselineHistory.length >= 2 ? baselineHistory : source.priceHistory,
+        source.quote,
+      );
       const fallbackHistory = series.find((entry) => entry.symbol === source.symbol)?.points ?? [];
       bySymbol.set(
         source.symbol,
@@ -287,7 +292,7 @@ function ComparisonStockChartView({
       );
     }
     return bySymbol;
-  }, [series, symbolSources]);
+  }, [performanceHistoryBySymbol, series, symbolSources]);
   const summarySymbols = useMemo(
     () => sortSymbolsByOneYearReturn(symbols, performanceBySymbol),
     [performanceBySymbol, symbols],
@@ -340,6 +345,7 @@ function ComparisonStockChartView({
     displayCursor,
     displayCursorX,
     displayCursorY,
+    focusPaneForMouseInteraction,
     mouseCrosshairDisabledRef,
     plotRef,
     scrollPanCellRemainderRef,
@@ -351,6 +357,7 @@ function ComparisonStockChartView({
     chartWidth,
     cursorX: viewState.cursorX,
     cursorY: viewState.cursorY,
+    focused,
     renderer,
     setViewState,
     symbols: summarySymbols,
@@ -444,6 +451,7 @@ function ComparisonStockChartView({
     chartWidth,
     commitSelectionCursor,
     expandBufferRange,
+    focusPaneForMouseInteraction,
     mouseCrosshairDisabledRef,
     plotRef,
     pointCount: projection.dates.length,
@@ -522,6 +530,7 @@ function ComparisonStockChartView({
           legendActiveIndex={legendActiveIndex}
           legendItemWidth={legendItemWidth}
           legendRows={legendRows}
+          onFocusInteraction={focusPaneForMouseInteraction}
           onOpenSymbol={onOpenSymbol}
           onSelectSymbol={setSelectedSymbol}
           performanceBySymbol={performanceBySymbol}
@@ -542,6 +551,7 @@ function ComparisonStockChartView({
           activePreset={activePreset}
           availableManualResolutions={availableManualResolutions}
           effectiveResolution={effectiveResolution}
+          focusPaneForMouseInteraction={focusPaneForMouseInteraction}
           isUpdating={isUpdating}
           onRangeSelect={setRangePreset}
           onRenderModeSelect={(mode) => setViewState((current) => ({ ...current, renderMode: mode }))}

package/src/components/chart/core/pane-settings.test.ts

@@ -1,6 +1,11 @@
 import { describe, expect, test } from "bun:test";
+import {
+  createDefaultConfig,
+  findPaneInstance,
+} from "../../../types/config";
 import {
   consumeStoredChartSelectionChange,
+  createChartRenderModeConfig,
   createStoredChartSelectionSyncState,
   markStoredChartSelectionLocallyApplied,
 } from "./pane-settings";
@@ -22,4 +27,26 @@ describe("chart pane setting sync", () => {
     expect(consumeStoredChartSelectionChange(state, "5Y", "1wk")).toBe(true);
     expect(state.lastAppliedKey).toBe("5Y:1wk");
   });
+
+  test("persists chart render mode as both pane state and global default", () => {
+    const config = createDefaultConfig("/tmp/gloomberb-chart-mode-test");
+
+    const nextConfig = createChartRenderModeConfig({
+      activePanel: "right",
+      config,
+      focusedPaneId: "ticker-detail:main",
+      paneState: {},
+    }, "ticker-detail:main", "candles");
+
+    expect(nextConfig.chartPreferences.defaultRenderMode).toBe("candles");
+    expect(findPaneInstance(nextConfig.layout, "ticker-detail:main")?.settings).toMatchObject({
+      chartRangePreset: "5Y",
+      chartRenderMode: "candles",
+      chartResolution: "auto",
+    });
+    expect(findPaneInstance(
+      nextConfig.layouts[nextConfig.activeLayoutIndex]!.layout,
+      "ticker-detail:main",
+    )?.settings?.chartRenderMode).toBe("candles");
+  });
 });

package/src/components/chart/core/pane-settings.ts

@@ -7,7 +7,18 @@ import {
   syncConfigActiveLayoutState,
 } from "../../../state/app/context";
 import { scheduleConfigSave } from "../../../state/config-save-scheduler";
-import type { ChartResolution, TimeRange } from "./types";
+import {
+  findPaneInstance,
+  type AppConfig,
+} from "../../../types/config";
+import type { ChartRenderMode, ChartResolution, TimeRange } from "./types";
+
+interface ChartRenderModePersistenceState {
+  activePanel: "left" | "right";
+  config: AppConfig;
+  focusedPaneId: string | null;
+  paneState: Record<string, Record<string, unknown>>;
+}
 
 export interface StoredChartSelectionSyncState {
   lastAppliedKey: string;
@@ -80,3 +91,51 @@ export function usePersistChartControlSelection(rangePresetKey: string): (
     scheduleConfigSave(nextConfig);
   };
 }
+
+export function createChartRenderModeConfig(
+  currentState: ChartRenderModePersistenceState,
+  paneId: string,
+  renderMode: ChartRenderMode,
+): AppConfig {
+  const currentPane = findPaneInstance(currentState.config.layout, paneId);
+  const layout = currentPane
+    ? setPaneSettings(currentState.config.layout, paneId, {
+        ...(currentPane.settings ?? {}),
+        chartRenderMode: renderMode,
+      })
+    : currentState.config.layout;
+  return syncConfigActiveLayoutState(
+    {
+      ...currentState.config,
+      chartPreferences: {
+        ...currentState.config.chartPreferences,
+        defaultRenderMode: renderMode,
+      },
+      layout,
+    },
+    currentState.paneState,
+    currentState.focusedPaneId,
+    currentState.activePanel,
+  );
+}
+
+export function usePersistChartRenderMode(): (renderMode: ChartRenderMode) => void {
+  const dispatch = useAppDispatch();
+  const stateRef = useAppStateRef();
+  const paneId = usePaneInstanceId();
+
+  return (renderMode) => {
+    const currentState = stateRef.current;
+    const currentPane = findPaneInstance(currentState.config.layout, paneId);
+    if (
+      currentState.config.chartPreferences.defaultRenderMode === renderMode
+      && currentPane?.settings?.chartRenderMode === renderMode
+    ) {
+      return;
+    }
+
+    const nextConfig = createChartRenderModeConfig(currentState, paneId, renderMode);
+    dispatch({ type: "SET_CONFIG", config: nextConfig });
+    scheduleConfigSave(nextConfig);
+  };
+}

package/src/components/chart/core/pointer.ts

@@ -11,11 +11,16 @@ interface RenderableSizeLike {
 interface PlotRenderableLike extends RenderableSizeLike {
   x?: number;
   y?: number;
+  absoluteX?: number;
+  absoluteY?: number;
+  absoluteBounds?: { x: number; y: number; width: number; height: number };
 }
 
 export interface ChartMouseEvent {
   x: number;
   y: number;
+  preciseX?: number;
+  preciseY?: number;
   pixelX?: number;
   pixelY?: number;
   stopPropagation?: () => void;
@@ -31,6 +36,8 @@ export interface ChartMouseEvent {
   };
 }
 
+export type MouseInteractionEvent = Pick<ChartMouseEvent, "stopPropagation" | "preventDefault">;
+
 export function consumeChartMouseEvent(event: Pick<ChartMouseEvent, "stopPropagation" | "preventDefault">): void {
   event.stopPropagation?.();
   event.preventDefault?.();
@@ -93,14 +100,33 @@ function getRendererCellMetrics(renderer: RendererMetricsHost) {
 }
 
 function getRenderableSize(renderable: RenderableSizeLike | null): { width: number; height: number } | null {
-  if (!renderable || typeof renderable.width !== "number" || typeof renderable.height !== "number") return null;
-  return { width: renderable.width, height: renderable.height };
+  if (!renderable) return null;
+  if (typeof renderable.width === "number" && typeof renderable.height === "number") {
+    return { width: renderable.width, height: renderable.height };
+  }
+  const absoluteBounds = (renderable as PlotRenderableLike).absoluteBounds;
+  if (absoluteBounds && typeof absoluteBounds.width === "number" && typeof absoluteBounds.height === "number") {
+    return { width: absoluteBounds.width, height: absoluteBounds.height };
+  }
+  return null;
 }
 
 function getPlotBounds(renderable: PlotRenderableLike | null): { x: number; y: number; width: number; height: number } | null {
-  if (!renderable || typeof renderable.x !== "number" || typeof renderable.y !== "number") return null;
+  if (!renderable) return null;
   const size = getRenderableSize(renderable);
-  return size ? { x: renderable.x, y: renderable.y, width: size.width, height: size.height } : null;
+  if (!size) return null;
+  const x = typeof renderable.absoluteX === "number"
+    ? renderable.absoluteX
+    : typeof renderable.absoluteBounds?.x === "number"
+      ? renderable.absoluteBounds.x
+      : renderable.x;
+  const y = typeof renderable.absoluteY === "number"
+    ? renderable.absoluteY
+    : typeof renderable.absoluteBounds?.y === "number"
+      ? renderable.absoluteBounds.y
+      : renderable.y;
+  if (typeof x !== "number" || typeof y !== "number") return null;
+  return { x, y, width: size.width, height: size.height };
 }
 
 export function getRenderablePixelSize(
@@ -214,8 +240,10 @@ export function getLocalPlotPointer(
   const bounds = getPlotBounds(renderable);
   if (!bounds) return null;
 
-  const localCellX = event.x - bounds.x;
-  const localCellY = event.y - bounds.y;
+  const rawCellX = typeof event.preciseX === "number" ? event.preciseX : event.x;
+  const rawCellY = typeof event.preciseY === "number" ? event.preciseY : event.y;
+  const localCellX = rawCellX - bounds.x;
+  const localCellY = rawCellY - bounds.y;
   if (localCellX < 0 || localCellX >= bounds.width || localCellY < 0 || localCellY >= bounds.height) {
     return null;
   }

package/src/components/chart/price-axis-labels.tsx

@@ -12,6 +12,7 @@ interface PriceAxisLabelsProps {
   cursorPixelY?: number | null;
   cursorLabel: string | null;
   cursorColor: string;
+  axisColor?: string;
 }
 
 interface CursorPriceAxisOverlay {
@@ -61,6 +62,7 @@ export function PriceAxisLabels({
   cursorPixelY = null,
   cursorLabel,
   cursorColor,
+  axisColor = colors.textDim,
 }: PriceAxisLabelsProps) {
   const { cellHeightPx = 18, fractionalViewport = false } = useUiCapabilities();
   const overlay = useMemo(() => buildCursorPriceAxisOverlay({
@@ -100,7 +102,7 @@ export function PriceAxisLabels({
         const label = isCursorRow ? cursorLabel : (axisLabels.get(row) ?? null);
         return (
           <Box key={row} height={1}>
-            {renderAxisLabel(label, isCursorRow ? cursorColor : colors.textDim)}
+            {renderAxisLabel(label, isCursorRow ? cursorColor : axisColor)}
           </Box>
         );
       })}

package/src/components/chart/static/bar-chart-surface.test.tsx

@@ -0,0 +1,97 @@
+import { afterEach, describe, expect, test } from "bun:test";
+import { act } from "react";
+import { Text } from "../../../ui";
+import { testRender } from "../../../renderers/opentui/test-utils";
+import { StaticBarChartSurface } from "./bar-chart-surface";
+
+let testSetup: Awaited<ReturnType<typeof testRender>> | undefined;
+
+afterEach(async () => {
+  if (!testSetup) return;
+  await act(async () => {
+    testSetup!.renderer.destroy();
+  });
+  testSetup = undefined;
+});
+
+describe("StaticBarChartSurface", () => {
+  test("shows hover feedback without shifting chart rows", async () => {
+    testSetup = await testRender(
+      <StaticBarChartSurface
+        width={64}
+        height={12}
+        title="Operating Cash Flow (quarterly)"
+        formatValue={(value) => `${Math.round(value / 1000)}k`}
+        series={[{
+          id: "value",
+          label: "Value",
+          color: "#00ff66",
+          points: [
+            { category: "2025 Q1", value: -271000 },
+            { category: "2025 Q2", value: -138000 },
+            { category: "2025 Q3", value: 653000 },
+          ],
+        }]}
+      />,
+      { width: 66, height: 14 },
+    );
+
+    await act(async () => {
+      await testSetup!.renderOnce();
+      await testSetup!.renderOnce();
+    });
+
+    const initialFrame = testSetup.captureCharFrame();
+    const initialLines = initialFrame.split("\n");
+    const initialAxisRow = initialLines.findIndex((line) => line.includes("2025 Q1") && line.includes("2025 Q2"));
+
+    await act(async () => {
+      await testSetup!.mockMouse.moveTo(14, 4);
+      await testSetup!.renderOnce();
+      await testSetup!.renderOnce();
+    });
+
+    const hoverFrame = testSetup.captureCharFrame();
+    const hoverLines = hoverFrame.split("\n");
+    const hoverAxisRow = hoverLines.findIndex((line) => line.includes("2025 Q1") && line.includes("2025 Q2"));
+
+    expect(hoverFrame).toContain("2025 Q1: -271k");
+    expect(hoverFrame).toContain("▓");
+    expect(hoverLines).toHaveLength(initialLines.length);
+    expect(hoverAxisRow).toBe(initialAxisRow);
+  });
+
+  test("shows a hover readout when a custom header is rendered", async () => {
+    testSetup = await testRender(
+      <StaticBarChartSurface
+        width={64}
+        height={12}
+        header={<Text>Revenue  Gross Profit</Text>}
+        formatValue={(value) => `${Math.round(value / 1000)}k`}
+        series={[{
+          id: "value",
+          label: "Value",
+          color: "#00ff66",
+          points: [
+            { category: "2025 Q1", value: -271000 },
+            { category: "2025 Q2", value: -138000 },
+            { category: "2025 Q3", value: 653000 },
+          ],
+        }]}
+      />,
+      { width: 66, height: 14 },
+    );
+
+    await act(async () => {
+      await testSetup!.renderOnce();
+      await testSetup!.renderOnce();
+      await testSetup!.mockMouse.moveTo(14, 4);
+      await testSetup!.renderOnce();
+      await testSetup!.renderOnce();
+    });
+
+    const frame = testSetup.captureCharFrame();
+    expect(frame).toContain("Revenue  Gross Profit");
+    expect(frame).toContain("2025 Q1: -271k");
+  });
+});

package/src/components/chart/static/bar-chart-surface.tsx

@@ -1,14 +1,19 @@
-import { useMemo } from "react";
-import { Box, ChartSurface, Span, Text } from "../../../ui";
+import { useCallback, useMemo, useRef, useState, type ReactNode } from "react";
+import { Box, ChartSurface, Span, Text, useNativeRenderer, type BoxRenderable } from "../../../ui";
 import { colors } from "../../../theme/colors";
+import { consumeChartMouseEvent, getLocalPlotPointer, type ChartMouseEvent } from "../core/pointer";
 import type { NativeChartBitmap } from "../native/chart-rasterizer";
+import { truncateWithEllipsis } from "../../../utils/text-wrap";
 import { useStaticChartBitmapSize } from "./chart/bitmap";
 import {
   buildBarChartScene,
   renderBarChart,
   renderBarChartAxis,
+  renderBarChartYAxis,
   renderNativeBarChart,
+  resolveBarChartHover,
   type BarChartColors,
+  type BarChartHover,
   type BarChartSeries,
 } from "../bar-chart-renderer";
 
@@ -17,42 +22,116 @@ export interface StaticBarChartSurfaceProps {
   width: number;
   height: number;
   colors?: BarChartColors;
+  title?: string;
+  header?: ReactNode;
+  formatValue?: (value: number) => string;
+  onHoverChange?: (hover: BarChartHover | null) => void;
+  onMouseDown?: (event: ChartMouseEvent) => void;
 }
 
 export function StaticBarChartSurface({
   series,
   width,
   height,
-  colors: chartColors = {
-    bgColor: colors.bg,
-    gridColor: colors.border,
-    axisColor: colors.textDim,
-  },
+  title,
+  header,
+  formatValue,
+  onHoverChange,
+  onMouseDown,
+  colors: chartColors,
 }: StaticBarChartSurfaceProps) {
+  const renderer = useNativeRenderer();
+  const plotRef = useRef<BoxRenderable | null>(null);
+  const [hover, setHover] = useState<BarChartHover | null>(null);
   const totalWidth = Math.max(1, Math.floor(width));
   const totalHeight = Math.max(4, Math.floor(height));
+  const headerRows = title || header ? 1 : 0;
   const legendRows = series.length > 1 ? 1 : 0;
   const axisRows = 1;
-  const plotHeight = Math.max(2, totalHeight - legendRows - axisRows);
+  const yAxisWidth = totalWidth >= 24 ? 8 : 0;
+  const plotRightPadding = totalWidth >= 32 ? 1 : 0;
+  const plotWidth = Math.max(1, totalWidth - yAxisWidth - plotRightPadding);
+  const plotHeight = Math.max(2, totalHeight - headerRows - legendRows - axisRows);
+  const resolvedChartColors = useMemo<BarChartColors>(() => ({
+    bgColor: chartColors?.bgColor ?? colors.bg,
+    gridColor: chartColors?.gridColor ?? colors.border,
+    axisColor: chartColors?.axisColor ?? colors.textDim,
+    negativeColor: chartColors?.negativeColor ?? colors.negative,
+    hoverColor: chartColors?.hoverColor ?? colors.textBright,
+  }), [chartColors]);
   const scene = useMemo(() => buildBarChartScene(series, {
-    width: totalWidth,
+    width: plotWidth,
     height: plotHeight,
-    colors: chartColors,
-  }), [chartColors, plotHeight, series, totalWidth]);
+    colors: resolvedChartColors,
+  }), [plotHeight, plotWidth, resolvedChartColors, series]);
 
-  const bitmapSize = useStaticChartBitmapSize(totalWidth, plotHeight);
+  const bitmapSize = useStaticChartBitmapSize(plotWidth, plotHeight);
 
   const bitmap = useMemo<NativeChartBitmap | null>(() => {
     if (!scene || !bitmapSize) return null;
-    return renderNativeBarChart(scene, bitmapSize.pixelWidth, bitmapSize.pixelHeight);
-  }, [bitmapSize, scene]);
+    return renderNativeBarChart(scene, bitmapSize.pixelWidth, bitmapSize.pixelHeight, hover);
+  }, [bitmapSize, hover, scene]);
 
-  const textLines = useMemo(() => scene ? renderBarChart(scene) : [], [scene]);
-  const axis = useMemo(() => scene ? renderBarChartAxis(scene) : "", [scene]);
+  const textLines = useMemo(() => scene ? renderBarChart(scene, hover) : [], [hover, scene]);
+  const axis = useMemo(() => scene ? renderBarChartAxis(scene, axisRows) : [], [axisRows, scene]);
+  const yAxis = useMemo(() => scene ? renderBarChartYAxis(scene, yAxisWidth, formatValue) : [], [formatValue, scene, yAxisWidth]);
+  const hoverLabel = useMemo(() => {
+    if (!hover) return null;
+    const value = formatValue ? formatValue(hover.value) : String(hover.value);
+    return series.length > 1 ? `${hover.category} ${hover.seriesLabel}: ${value}` : `${hover.category}: ${value}`;
+  }, [formatValue, hover, series.length]);
+  const readout = useMemo(() => {
+    if (!hoverLabel) return title ?? "";
+    return title ? `${title}  ${hoverLabel}` : hoverLabel;
+  }, [hoverLabel, title]);
+  const hoverLabelLayout = useMemo(() => {
+    if (!hover || !hoverLabel) return null;
+    const text = truncateWithEllipsis(hoverLabel, plotWidth);
+    const labelWidth = Math.min(plotWidth, Math.max(1, text.length));
+    const labelLeft = Math.max(0, Math.min(
+      plotWidth - labelWidth,
+      hover.x + Math.floor(hover.width / 2) - Math.floor(labelWidth / 2),
+    ));
+    const labelTop = hover.value >= 0
+      ? Math.max(0, hover.row - 1)
+      : Math.min(plotHeight - 1, hover.row + 1);
+    return { labelLeft, labelTop, labelWidth, text };
+  }, [hover, hoverLabel, plotHeight, plotWidth]);
+
+  const handleMouseMove = useCallback((event: ChartMouseEvent) => {
+    if (!scene) return;
+    const pointer = getLocalPlotPointer(event, plotRef.current, renderer);
+    if (!pointer) {
+      setHover(null);
+      onHoverChange?.(null);
+      return;
+    }
+    const nextHover = resolveBarChartHover(scene, pointer.cellX);
+    setHover(nextHover);
+    onHoverChange?.(nextHover);
+    consumeChartMouseEvent(event);
+  }, [onHoverChange, renderer, scene]);
+
+  const handleMouseOut = useCallback(() => {
+    setHover(null);
+    onHoverChange?.(null);
+  }, [onHoverChange]);
+
+  const handleMouseDown = useCallback((event: ChartMouseEvent) => {
+    onMouseDown?.(event);
+    if (!scene) return;
+    const pointer = getLocalPlotPointer(event, plotRef.current, renderer);
+    if (!pointer) return;
+    const nextHover = resolveBarChartHover(scene, pointer.cellX);
+    setHover(nextHover);
+    onHoverChange?.(nextHover);
+    consumeChartMouseEvent(event);
+  }, [onHoverChange, onMouseDown, renderer, scene]);
 
   if (!scene) {
     return (
-      <Box width={totalWidth} height={totalHeight}>
+      <Box flexDirection="column" width={totalWidth} height={totalHeight} onMouseDown={onMouseDown}>
+        {header ?? (title ? <Text fg={colors.textBright} bold>{truncateWithEllipsis(title, totalWidth)}</Text> : null)}
         <Text fg={colors.textDim}>No chart data</Text>
       </Box>
     );
@@ -60,6 +139,13 @@ export function StaticBarChartSurface({
 
   return (
     <Box flexDirection="column" width={totalWidth} height={totalHeight}>
+      {headerRows ? (
+        header ?? (
+          <Text fg={hover ? hover.value < 0 ? colors.negative : colors.textBright : colors.textDim} bold={!!title}>
+            {truncateWithEllipsis(readout, totalWidth)}
+          </Text>
+        )
+      ) : null}
       {legendRows ? (
         <Text>
           {series.map((item, index) => (
@@ -69,17 +155,54 @@ export function StaticBarChartSurface({
           ))}
         </Text>
       ) : null}
-      <ChartSurface
-        width={totalWidth}
-        height={plotHeight}
-        flexDirection="column"
-        bitmaps={bitmap ? [bitmap] : null}
-      >
-        {textLines.map((line, index) => (
-          <Text key={index} fg={colors.text}>{line}</Text>
-        ))}
-      </ChartSurface>
-      <Text fg={colors.textDim}>{axis}</Text>
+      <Box flexDirection="row" width={totalWidth} height={plotHeight}>
+        {yAxisWidth ? (
+          <Box flexDirection="column" width={yAxisWidth} height={plotHeight}>
+            {yAxis.map((line, index) => (
+              <Text key={index} fg={colors.textDim}>{line}</Text>
+            ))}
+          </Box>
+        ) : null}
+        <Box position="relative" width={plotWidth} height={plotHeight}>
+          <ChartSurface
+            ref={plotRef}
+            width={plotWidth}
+            height={plotHeight}
+            flexDirection="column"
+            bitmaps={bitmap ? [bitmap] : null}
+            onMouseMove={handleMouseMove}
+            onMouseDown={handleMouseDown}
+            onMouseOut={handleMouseOut}
+            cursor="pointer"
+            data-gloom-interactive="true"
+            data-gloom-role="bar-chart-surface"
+          >
+            {textLines.map((line, index) => (
+              <Text key={index} fg={colors.text}>{line}</Text>
+            ))}
+          </ChartSurface>
+          {hoverLabelLayout ? (
+            <Box
+              position="absolute"
+              left={hoverLabelLayout.labelLeft}
+              top={hoverLabelLayout.labelTop}
+              width={hoverLabelLayout.labelWidth}
+              height={1}
+              zIndex={1}
+              backgroundColor={colors.panel}
+            >
+              <Text fg={hover && hover.value < 0 ? colors.negative : colors.textBright} bold>
+                {hoverLabelLayout.text}
+              </Text>
+            </Box>
+          ) : null}
+        </Box>
+      </Box>
+      {axis.map((line, index) => (
+        <Text key={index} fg={colors.textDim}>
+          {yAxisWidth ? `${" ".repeat(yAxisWidth)}${line}` : line}
+        </Text>
+      ))}
     </Box>
   );
 }