import { afterEach, describe, expect, test } from "bun:test";
import {
  act,
  createElement,
  forwardRef,
  useMemo,
  useState,
  type ForwardedRef,
  type ReactNode,
} from "react";
import type { ResolvedSeries, TimeSeriesPoint } from "../../../time-series/types";
import { testRender } from "../../../renderers/opentui/test-utils";
import {
  Box,
  Text,
  UiHostProvider,
  useNativeRenderer,
  useRendererHost,
  useUiHost,
  type BoxRenderable,
} from "../../../ui";
import {
  InputHostProvider,
  type InputHost,
  type KeyEventLike,
} from "../../../react/input";
import { CompositeChart } from "./composite-chart";
import { createDefaultConfig } from "../../../types/config";
import { AppContext, createInitialState, PaneInstanceProvider } from "../../../state/app/context";
import {
  buildCompositeNavigationFrame,
  zoomCompositeViewport,
} from "./interactions";
import { COMPOSITE_RIGHT_OFFSET_RATIO } from "./time-scale";
import { getThemeColors, syncTheme } from "../../../theme/colors";
import { ThemeProvider } from "../../../theme/theme-context";
import { DEFAULT_THEME } from "../../../theme/themes";

let testSetup: Awaited<ReturnType<typeof testRender>> | undefined;
let chartShortcut: ((event: KeyEventLike) => void) | null = null;
let capturedSurfaceProps: Record<string, any> | null = null;
let capturedSurfaceNode: BoxRenderable | null = null;

const chartInputHost: InputHost = {
  useShortcut(handler) {
    chartShortcut = handler;
  },
  useViewport() {
    return { width: 80, height: 24 };
  },
};

function assignRef(ref: ForwardedRef<any>, value: any) {
  if (typeof ref === "function") ref(value);
  else if (ref) ref.current = value;
}

function CaptureChartSurfaceProvider({
  children,
  canvasCharts = false,
}: {
  children: ReactNode;
  canvasCharts?: boolean;
}) {
  const baseUi = useUiHost();
  const renderer = useRendererHost();
  const nativeRenderer = useNativeRenderer();
  const CapturingChartSurface = useMemo(() => {
    const BaseChartSurface = baseUi.ChartSurface;
    return forwardRef<any, Record<string, any>>(function CapturingSurface(props, ref) {
      capturedSurfaceProps = props;
      return createElement(BaseChartSurface as any, {
        ...props,
        ref: (node: BoxRenderable | null) => {
          capturedSurfaceNode = node;
          assignRef(ref, node);
        },
      });
    });
  }, [baseUi]);
  const ui = useMemo(
    () => ({
      ...baseUi,
      ChartSurface: CapturingChartSurface,
      capabilities: canvasCharts
        ? { ...baseUi.capabilities, canvasCharts: true, nativeCharts: false }
        : baseUi.capabilities,
    }),
    [CapturingChartSurface, baseUi, canvasCharts],
  );
  return (
    <UiHostProvider ui={ui} renderer={renderer} nativeRenderer={nativeRenderer}>
      {children}
    </UiHostProvider>
  );
}

function pointerEvent(
  localX: number,
  localY: number,
  options: {
    ctrl?: boolean;
    shift?: boolean;
    alt?: boolean;
    scroll?: { direction: "up" | "down" | "left" | "right"; delta: number };
  } = {},
) {
  const node = capturedSurfaceNode!;
  return {
    x: (node.x as number) + localX,
    y: (node.y as number) + localY,
    modifiers: {
      shift: options.shift === true,
      alt: options.alt === true,
      ctrl: options.ctrl === true,
    },
    scroll: options.scroll,
    preventDefault() {},
    stopPropagation() {},
  };
}

function keyEvent(name: string, shift = false): KeyEventLike {
  let defaultPrevented = false;
  let propagationStopped = false;
  return {
    key: name,
    name,
    sequence: name,
    ctrl: false,
    shift,
    alt: false,
    meta: false,
    get defaultPrevented() {
      return defaultPrevented;
    },
    get propagationStopped() {
      return propagationStopped;
    },
    preventDefault() {
      defaultPrevented = true;
    },
    stopPropagation() {
      propagationStopped = true;
    },
  };
}

afterEach(async () => {
  if (testSetup) await act(async () => testSetup!.renderer.destroy());
  testSetup = undefined;
  chartShortcut = null;
  capturedSurfaceProps = null;
  capturedSurfaceNode = null;
  syncTheme(DEFAULT_THEME);
});

function point(date: string, value: number): TimeSeriesPoint {
  const observedAt = new Date(`${date}T00:00:00.000Z`);
  return { date: observedAt, observedAt, value };
}

function timestampPoint(timestamp: string, value: number): TimeSeriesPoint {
  const observedAt = new Date(timestamp);
  return { date: observedAt, observedAt, value };
}

function series(id: string, panelId: string, axis: ResolvedSeries["axis"], unit: string, values: number[]): ResolvedSeries {
  return {
    id,
    label: id === "price" ? "ACME Price" : "OTHER Revenue",
    color: id === "price" ? "#00ff66" : "#ffaa00",
    unit,
    unitGroup: unit === "USD" ? "currency" : "percent",
    nativeFrequency: id === "price" ? "daily" : "quarterly",
    dataShape: "scalar",
    style: id === "price" ? "line" : "step",
    transform: "raw",
    axis,
    panelId,
    interpolation: id === "price" ? "none" : "step-after",
    points: values.map((value, index) => point(`2025-01-0${index + 1}`, value)),
  };
}

function twoSessionCandles(): ResolvedSeries {
  const points = [
    ...Array.from({ length: 7 }, (_, index) => (
      Date.UTC(2025, 0, 2, 17, index * 30)
    )),
    ...Array.from({ length: 8 }, (_, index) => (
      Date.UTC(2025, 0, 3, 13, 30 + index * 30)
    )),
  ].map((timestamp, index) => {
    const date = new Date(timestamp);
    const value = 100 + index * 0.1;
    return {
      date,
      observedAt: date,
      value,
      open: value,
      high: value + 1,
      low: value - 1,
      close: value,
      volume: 100,
    };
  });
  return {
    ...series("price", "main", "left", "USD", []),
    nativeFrequency: "intraday",
    dataShape: "ohlc",
    style: "candles",
    timeBasis: {
      kind: "market",
      timeZone: "America/New_York",
      cadenceMs: 30 * 60_000,
    },
    points,
  };
}

describe("CompositeChart", () => {
  test("repaints cached chart rasters when the theme changes", async () => {
    let setThemeId: ((themeId: string) => void) | null = null;
    const chartSeries = [series("price", "main", "left", "USD", [100, 101, 102])];

    function ThemedChart() {
      const [themeId, setTheme] = useState(DEFAULT_THEME);
      setThemeId = setTheme;
      return (
        <ThemeProvider themeId={themeId}>
          <CaptureChartSurfaceProvider>
            <CompositeChart
              width={60}
              height={12}
              series={chartSeries}
              panels={[{ id: "main" }]}
            />
          </CaptureChartSurfaceProvider>
        </ThemeProvider>
      );
    }

    testSetup = await testRender(<ThemedChart />, { width: 62, height: 14 });
    await act(async () => {
      await testSetup!.renderOnce();
      await testSetup!.renderOnce();
    });

    const nextThemeId = "github-light";
    await act(async () => {
      setThemeId?.(nextThemeId);
      await testSetup!.renderOnce();
      await testSetup!.renderOnce();
    });

    const bitmap = capturedSurfaceProps!.bitmaps[0] as { pixels: Uint8Array };
    const expectedBackground = getThemeColors(nextThemeId).bg;
    const expectedRgb = [1, 3, 5].map((offset) => parseInt(expectedBackground.slice(offset, offset + 2), 16));
    expect(Array.from(bitmap.pixels.slice(0, 3))).toEqual(expectedRgb);
  });

  test("does not allocate a native raster when braille rendering is forced", async () => {
    const config = createDefaultConfig("/tmp/gloomberb-composite-braille");
    config.chartPreferences.renderer = "braille";

    testSetup = await testRender(
      <AppContext value={{ state: createInitialState(config), dispatch: () => {} }}>
        <CaptureChartSurfaceProvider>
          <CompositeChart
            width={60}
            height={12}
            series={[series("price", "main", "left", "USD", [100, 101, 102])]}
            panels={[{ id: "main" }]}
          />
        </CaptureChartSurfaceProvider>
      </AppContext>,
      { width: 62, height: 14 },
    );
    await act(async () => {
      await testSetup!.renderOnce();
      await testSetup!.renderOnce();
    });

    expect(capturedSurfaceProps!.bitmaps).toBeNull();
  });

  test("shows the regular-session move beside the latest intraday value", async () => {
    testSetup = await testRender(
      <CompositeChart
        width={60}
        height={12}
        series={[{
          ...series("price", "main", "left", "USD", [100, 110]),
          latestChangePercent: 10.65,
        }]}
        panels={[{ id: "main" }]}
        showLatestChangePercent
      />,
      { width: 62, height: 14 },
    );

    await act(async () => testSetup!.renderOnce());

    expect(testSetup.captureCharFrame()).toContain("ACME Price $110 +10.65%");
  });

  test("holds a lower panel's rows while its series has no observations in view", async () => {
    const price: ResolvedSeries = {
      ...series("price", "main", "left", "USD", []),
      points: [
        point("2025-01-01", 100),
        point("2025-01-02", 103),
        point("2025-01-03", 101),
        point("2025-01-04", 104),
        point("2025-01-05", 102),
      ],
    };
    const volume: ResolvedSeries = {
      ...series("volume", "volume", "left", "shares", []),
      label: "Volume",
      unitGroup: "volume",
      style: "columns",
      points: [point("2025-01-01", 4_000), point("2025-01-02", 6_000)],
    };
    const panels = [{ id: "main", height: 3 }, { id: "volume", height: 1 }];
    const renderChart = async (
      volumeSeries: ResolvedSeries,
      viewport?: { start: Date; end: Date },
    ) => {
      testSetup = await testRender(
        <CompositeChart
          width={78}
          height={18}
          series={[price, volumeSeries]}
          panels={panels}
          viewport={viewport}
        />,
        { width: 80, height: 20 },
      );
      await act(async () => {
        await testSetup!.renderOnce();
        await testSetup!.renderOnce();
      });
      const frame = testSetup!.captureCharFrame();
      await act(async () => testSetup!.renderer.destroy());
      testSetup = undefined;
      return frame;
    };
    // Price labels and the price line stay above the lower panel's first row,
    // and would spill into it the moment the lower panel gave up its rows.
    const lastPriceRow = (frame: string) => frame
      .split("\n")
      .reduce((row, line, index) => /[$•]/.test(line) ? index : row, -1);
    const volumeTop = (frame: string) => frame.split("\n").findIndex((line) => /^\s+[\d.]+K /.test(line));

    const loaded = await renderChart(volume);
    // Panned to a window the upper panel covers and the lower panel has no bars in.
    const panned = await renderChart(volume, {
      start: new Date("2025-01-03T00:00:00.000Z"),
      end: new Date("2025-01-05T00:00:00.000Z"),
    });
    // The same chart before the lower panel's data has loaded at all.
    const loading = await renderChart({ ...volume, points: [] });

    const lowerPanelTop = volumeTop(loaded);
    expect(lowerPanelTop).toBeGreaterThan(0);
    expect(volumeTop(panned)).toBe(lowerPanelTop);
    expect(lastPriceRow(panned)).toBeLessThan(lowerPanelTop);
    expect(lastPriceRow(loading)).toBe(lastPriceRow(loaded));
    expect(lastPriceRow(loaded)).toBe(lowerPanelTop - 1);
    // A panel with loaded history keeps its axis while the window holds no bars.
    expect(panned).toMatch(/\dK/);
  });

  test("lays out mixed panels with one shared legend and time axis", async () => {
    testSetup = await testRender(
      <CompositeChart
        width={78}
        height={18}
        series={[
          series("price", "main", "left", "USD", [100, 103, 101]),
          series("revenue", "fundamentals", "right", "%", [4, 6, 8]),
        ]}
        panels={[{ id: "main", height: 2 }, { id: "fundamentals", height: 1 }]}
        cursorDate={new Date("2025-01-02T00:00:00.000Z")}
      />,
      { width: 80, height: 20 },
    );

    await act(async () => {
      await testSetup!.renderOnce();
      await testSetup!.renderOnce();
    });

    const frame = testSetup.captureCharFrame();
    expect(frame).toContain("2025-01-02");
    expect(frame).toContain("ACME Price");
    expect(frame).toContain("OTHER Revenue");
    expect(frame).toContain("$103");
    expect(frame.match(/Jan 1/g)).toHaveLength(1);
    expect(frame.match(/Jan 3/g)).toHaveLength(1);
  });

  test("keeps legend items compact and anchors an accessory to the right edge", async () => {
    testSetup = await testRender(
      <CompositeChart
        width={78}
        height={12}
        series={[
          series("price", "main", "left", "USD", [100, 103, 101]),
          series("revenue", "main", "right", "%", [4, 6, 8]),
        ]}
        panels={[{ id: "main" }]}
        cursorDate={new Date("2025-01-02T00:00:00.000Z")}
        legendAccessory={(
          <Box width={14} height={1} overflow="hidden">
            <Text>+ add series</Text>
          </Box>
        )}
      />,
      { width: 80, height: 14 },
    );

    await act(async () => {
      await testSetup!.renderOnce();
      await testSetup!.renderOnce();
    });

    const legend = testSetup.captureCharFrame()
      .split("\n")
      .find((line) => line.includes("+ add series"));
    expect(legend).toBeDefined();
    expect(legend).toContain("ACME Price $103");
    expect(legend).toContain("OTHER Revenue 6.00%");
    const accessoryStart = legend!.indexOf("+ add series");
    const lastLegendEnd = legend!.indexOf("6.00%") + "6.00%".length;
    expect(accessoryStart).toBe(78 - 14);
    expect(accessoryStart - lastLegendEnd).toBeGreaterThan(1);
  });

  test("shortens long comparison names before clipping yield precision or units at 80 columns", async () => {
    testSetup = await testRender(
      <CompositeChart width={78} height={12}
        series={[
          { ...series("ig", "main", "left", "%", [5.68]), label: "ICE BofA US Corporate Index Effective Yield" },
          { ...series("hy", "main", "left", "%", [7.42]), label: "ICE BofA US High Yield Index Effective Yield" },
        ]}
        panels={[{ id: "main" }]}
        legendAccessory={<Box width={14} height={1}><Text>+ add series</Text></Box>}
        legendAccessoryWidth={14}
      />, { width: 80, height: 14 },
    );
    await act(async () => { await testSetup!.renderOnce(); await testSetup!.renderOnce(); });
    const legend = testSetup.captureCharFrame().split("\n").find((line) => line.includes("+ add series"))!;
    expect(legend).toContain("5.68%");
    expect(legend).toContain("7.42%");
    expect(legend.indexOf("7.42%") + 5).toBeLessThan(legend.indexOf("+ add series"));
  });

  test("leaving a historical chart restores its window's legend value instead of the navigation buffer", async () => {
    let setCursor: (date: Date | null) => void = () => {};
    const margin: ResolvedSeries = {
      ...series("margin", "main", "left", "%", []), label: "MSFT Operating Margin",
      style: "line", interpolation: "none",
      points: [point("2024-06-30", 44.64), point("2025-06-30", 45.62), point("2026-06-30", 46.78)],
    };
    function HistoricalChart() {
      const [cursor, updateCursor] = useState<Date | null>(null);
      setCursor = updateCursor;
      return <CompositeChart width={100} height={12} panels={[{ id: "main" }]} series={[margin]} clipToViewport
        viewport={{ start: new Date("2016-01-01"), end: new Date("2025-12-31T23:59:59.999Z") }} cursorDate={cursor} />;
    }
    testSetup = await testRender(<HistoricalChart />, { width: 102, height: 14 });
    await act(async () => { await testSetup!.renderOnce(); await testSetup!.renderOnce(); });
    const legend = () => testSetup!.captureCharFrame().split("\n")[0]!;
    expect(legend()).toContain("45.6%");
    expect(legend()).not.toContain("46.8%");
    await act(async () => { setCursor(new Date("2024-06-30")); });
    await act(async () => { await testSetup!.renderOnce(); });
    expect(legend()).toContain("44.6%");
    await act(async () => { setCursor(null); });
    await act(async () => { await testSetup!.renderOnce(); });
    expect(legend()).toContain("45.6%");
    expect(legend()).not.toContain("46.8%");
  });

  test("retains financial values and negative signs when long legend names need truncation", async () => {
    testSetup = await testRender(
      <CompositeChart width={100} height={12} panels={[{ id: "main" }]} series={[
        { ...series("revenue", "main", "left", "USD", [90_007_000_000]), label: "MSFT:XNAS Revenue", unitGroup: "currency-total:USD" },
        { ...series("margin", "main", "right", "%", [-49.612]), label: "Very long issuer Operating Margin", unitGroup: "percent" },
        { ...series("hk-revenue", "main", "left", "USD", [90_007_000_000]), label: "腾讯控股腾讯控股 Revenue", unitGroup: "currency-total:USD" },
      ]} />,
      { width: 102, height: 14 },
    );
    await act(async () => { await testSetup!.renderOnce(); await testSetup!.renderOnce(); });
    const legend = testSetup.captureCharFrame().split("\n")[0]!;
    expect(legend).toContain("MSFT:XNAS Revenue $90.01B");
    expect(legend).toContain("... -49.6%");
    expect(legend).toContain("腾讯控股腾讯控股");
    expect(legend.match(/\$90\.01B/g)).toHaveLength(2);
  });

  test("gives legend names the row's room and drops the listing exchange before cutting a name", async () => {
    const legendAt = async (width: number) => {
      if (testSetup) await act(async () => testSetup!.renderer.destroy());
      testSetup = await testRender(
        <CompositeChart width={width} height={10} panels={[{ id: "main" }]} series={[
          { ...series("price", "main", "left", "USD", [101]), label: "AAPL:XNAS Price" },
          { ...series("volume", "main", "left", "%", [8]), label: "Volume AAPL:XNAS Price" },
        ]} />,
        { width: width + 2, height: 12 },
      );
      await act(async () => { await testSetup!.renderOnce(); await testSetup!.renderOnce(); });
      return testSetup.captureCharFrame().split("\n")[0]!;
    };
    expect(await legendAt(60)).toContain("Volume AAPL:XNAS Price 8.00%");
    const narrow = await legendAt(50);
    expect(narrow).toContain("AAPL:XNAS Price $101");
    expect(narrow).toContain("Volume AAPL Price 8.00%");
    expect(narrow).not.toContain("...");
  });

  test("keeps non-plotted legend series available for restoring", async () => {
    const price = series("price", "main", "left", "USD", [100, 103, 101]);
    const hiddenRevenue = series("revenue", "main", "right", "%", [4, 6, 8]);
    testSetup = await testRender(
      <CompositeChart
        width={78}
        height={12}
        series={[price]}
        legendSeries={[price, hiddenRevenue]}
        panels={[{ id: "main" }]}
        cursorDate={new Date("2025-01-02T00:00:00.000Z")}
      />,
      { width: 80, height: 14 },
    );

    await act(async () => {
      await testSetup!.renderOnce();
      await testSetup!.renderOnce();
    });

    expect(testSetup.captureCharFrame()).toContain("OTHER Revenue");
  });

  test("uses buffered market anchors so closed sessions do not create chart holes", async () => {
    const candles = twoSessionCandles();
    const currentSession = {
      ...candles,
      points: candles.points.filter((point) => point.date.getUTCDate() === 3),
    };
    testSetup = await testRender(
      <CompositeChart
        width={72}
        height={12}
        series={[candles]}
        legendSeries={[currentSession]}
        panels={[{ id: "main" }]}
        viewport={{
          start: new Date("2025-01-02T17:00:00.000Z"),
          end: new Date("2025-01-03T17:00:00.000Z"),
        }}
        showLegend={false}
      />,
      { width: 74, height: 14 },
    );
    await act(async () => testSetup!.renderOnce());

    const bodyColumns = [...new Set(testSetup.captureCharFrame()
      .split("\n")
      .flatMap((line) => [...line].flatMap((cell, index) => cell === "█" ? [index] : [])))]
      .sort((left, right) => left - right);
    const largestGap = bodyColumns.slice(1).reduce(
      (largest, column, index) => Math.max(largest, column - bodyColumns[index]!),
      0,
    );

    expect(bodyColumns.length).toBeGreaterThan(10);
    expect(largestGap).toBeLessThan(10);
  });

  test("toggles a series from its legend entry", async () => {
    const toggled: string[] = [];
    testSetup = await testRender(
      <CompositeChart
        width={58}
        height={10}
        series={[
          series("price", "main", "left", "USD", [100, 103, 101]),
          series("revenue", "main", "right", "%", [4, 6, 8]),
        ]}
        panels={[{ id: "main" }]}
        onToggleSeries={(seriesId) => toggled.push(seriesId)}
      />,
      { width: 60, height: 12 },
    );

    await act(async () => {
      await testSetup!.renderOnce();
    });
    const priceColumn = testSetup.captureCharFrame().split("\n")[0]!.indexOf("ACME Price");
    expect(priceColumn).toBeGreaterThan(0);

    await act(async () => {
      await testSetup!.mockMouse.click(priceColumn, 0);
      await testSetup!.renderOnce();
    });
    expect(toggled).toEqual(["price"]);
  });

  test("scrolls an overflowing legend horizontally", async () => {
    const labels = ["FIRST LONG SERIES", "SECOND LONG SERIES", "THIRD LONG SERIES", "LAST LONG SERIES"];
    const overflowingSeries = labels.map((label, index) => ({
      ...series(`series-${index}`, "main", "left", "USD", [index + 1, index + 2]),
      label,
    }));
    testSetup = await testRender(
      <CompositeChart
        width={38}
        height={10}
        series={overflowingSeries}
        panels={[{ id: "main" }]}
      />,
      { width: 40, height: 12 },
    );

    await act(async () => {
      await testSetup!.renderOnce();
    });
    expect(testSetup.captureCharFrame().split("\n")[0]).toContain("FIRST LONG SERIES");
    expect(testSetup.captureCharFrame().split("\n")[0]).not.toContain("LAST LONG SERIES");

    await act(async () => {
      for (let index = 0; index < 120; index += 1) {
        await testSetup!.mockMouse.scroll(20, 0, "down");
      }
      await testSetup!.renderOnce();
    });
    expect(testSetup.captureCharFrame().split("\n")[0]).toContain("LAST LONG SERIES");
  });

  test("reaches and toggles overflowing legend series from the keyboard", async () => {
    const toggled: string[] = [];
    const labels = ["FIRST LONG SERIES", "SECOND LONG SERIES", "THIRD LONG SERIES", "LAST LONG SERIES"];
    const overflowingSeries = labels.map((label, index) => ({
      ...series(`series-${index}`, "main", "left", "USD", [index + 1, index + 2]),
      label,
    }));
    testSetup = await testRender(
      <InputHostProvider host={chartInputHost}>
        <CompositeChart
          width={38}
          height={10}
          focused
          series={overflowingSeries}
          panels={[{ id: "main" }]}
          onToggleSeries={(seriesId) => toggled.push(seriesId)}
        />
      </InputHostProvider>,
      { width: 40, height: 12 },
    );

    await act(async () => {
      await testSetup!.renderOnce();
      for (let index = 0; index < overflowingSeries.length; index += 1) {
        chartShortcut?.(keyEvent("]"));
      }
      await testSetup!.renderOnce();
      await testSetup!.renderOnce();
    });
    expect(testSetup.captureCharFrame().split("\n")[0]).toContain("LAST LONG SERIES");

    await act(async () => {
      chartShortcut?.(keyEvent("space"));
      await testSetup!.renderOnce();
    });
    expect(toggled).toEqual(["series-3"]);
  });

  test("keeps the legend accessory visible when the pane is narrower than its legend", async () => {
    testSetup = await testRender(
      <CompositeChart
        width={20}
        height={10}
        series={[series("price", "main", "left", "USD", [100, 103, 101])]}
        panels={[{ id: "main" }]}
        legendAccessory={(
          <Box width={14} height={1} overflow="hidden">
            <Text>+ add series</Text>
          </Box>
        )}
        legendAccessoryWidth={14}
      />,
      { width: 22, height: 12 },
    );

    await act(async () => {
      await testSetup!.renderOnce();
      await testSetup!.renderOnce();
    });

    const legend = testSetup.captureCharFrame()
      .split("\n")
      .find((line) => line.includes("+ add series"));
    expect(legend).toBeDefined();
    expect(legend).toContain("●");
  });

  test("moves and clears the shared cursor from the keyboard while focused", async () => {
    const cursorChanges: Array<string | null> = [];
    testSetup = await testRender(
      <InputHostProvider host={chartInputHost}>
        <CompositeChart
          width={60}
          height={12}
          focused
          series={[series("price", "main", "left", "USD", [100, 103, 101])]}
          panels={[{ id: "main" }]}
          onCursorDateChange={(date) => cursorChanges.push(date?.toISOString() ?? null)}
        />
      </InputHostProvider>,
      { width: 62, height: 14 },
    );

    await act(async () => testSetup!.renderOnce());
    await act(async () => chartShortcut?.(keyEvent("left")));
    await act(async () => testSetup!.renderOnce());
    expect(cursorChanges).toEqual(["2025-01-03T00:00:00.000Z"]);
    const firstCursorFrame = testSetup.captureCharFrame();
    expect(firstCursorFrame).toContain("2025-01-03");
    // A keyboard cursor knows its column, not a level: the axis reads the
    // series value and no horizontal line crosses the plot.
    expect(firstCursorFrame).toContain("│");
    expect(firstCursorFrame).toContain("$101");
    expect(firstCursorFrame).not.toContain("────────");

    await act(async () => chartShortcut?.(keyEvent("left")));
    await act(async () => testSetup!.renderOnce());
    expect(cursorChanges).toEqual([
      "2025-01-03T00:00:00.000Z",
      "2025-01-02T00:00:00.000Z",
    ]);
    expect(testSetup.captureCharFrame()).toContain("2025-01-02");

    await act(async () => chartShortcut?.(keyEvent("escape")));
    await act(async () => testSetup!.renderOnce());
    // Escape drops the cursor, so its date leaves the time axis with it.
    expect(testSetup.captureCharFrame()).not.toContain("2025-01-02");
  });

  test("does not emit the same snapped cursor timestamp twice", async () => {
    const cursorChanges: string[] = [];
    testSetup = await testRender(
      <InputHostProvider host={chartInputHost}>
        <CompositeChart
          width={60}
          height={12}
          focused
          series={[series("price", "main", "left", "USD", [100, 103, 101])]}
          panels={[{ id: "main" }]}
          onCursorDateChange={(date) => {
            if (date) cursorChanges.push(date.toISOString());
          }}
        />
      </InputHostProvider>,
      { width: 62, height: 14 },
    );

    await act(async () => testSetup!.renderOnce());
    await act(async () => chartShortcut?.(keyEvent("right")));
    await act(async () => chartShortcut?.(keyEvent("left")));

    expect(cursorChanges).toEqual(["2025-01-01T00:00:00.000Z"]);
  });

  test("zooms with plus and resets the interaction viewport with zero", async () => {
    const viewportChanges: Array<{ start: string; end: string } | null> = [];
    const viewportInteractions: string[] = [];
    testSetup = await testRender(
      <InputHostProvider host={chartInputHost}>
        <CompositeChart
          width={60}
          height={12}
          focused
          series={[series("price", "main", "left", "USD", [100, 101, 102, 103, 104, 105, 106, 107, 108])]}
          panels={[{ id: "main" }]}
          viewport={{
            start: new Date("2025-01-01T00:00:00.000Z"),
            end: new Date("2025-01-09T00:00:00.000Z"),
          }}
          onViewportChange={(next, interaction) => {
            viewportInteractions.push(interaction);
            viewportChanges.push(next
              ? { start: next.start.toISOString(), end: next.end.toISOString() }
              : null);
          }}
        />
      </InputHostProvider>,
      { width: 62, height: 14 },
    );

    await act(async () => testSetup!.renderOnce());
    expect(testSetup.captureCharFrame()).toContain("Jan 1");
    expect(viewportChanges).toEqual([]);

    const zoomIn = keyEvent("=");
    zoomIn.sequence = "+";
    zoomIn.shift = true;
    await act(async () => chartShortcut?.(zoomIn));
    await act(async () => testSetup!.renderOnce());

    expect(zoomIn.defaultPrevented).toBe(true);
    expect(testSetup.captureCharFrame()).not.toContain("Jan 1");
    expect(viewportChanges.at(-1)?.start).not.toBe("2025-01-01T00:00:00.000Z");
    expect(viewportInteractions.at(-1)).toBe("zoom");

    await act(async () => chartShortcut?.(keyEvent("0")));
    await act(async () => testSetup!.renderOnce());
    expect(testSetup.captureCharFrame()).toContain("Jan 1");
    expect(viewportChanges.at(-1)).toBeNull();
    expect(viewportInteractions.at(-1)).toBe("reset");
  });

  test("keeps ownership of the window when zoom returns to the authored range", async () => {
    const viewportChanges: Array<{ start: string; end: string } | null> = [];
    testSetup = await testRender(
      <InputHostProvider host={chartInputHost}>
        <CompositeChart
          width={60}
          height={12}
          focused
          series={[series("price", "main", "left", "USD", [100, 101, 102, 103, 104, 105, 106, 107, 108])]}
          panels={[{ id: "main" }]}
          viewport={{
            start: new Date("2025-01-01T00:00:00.000Z"),
            end: new Date("2025-01-09T00:00:00.000Z"),
          }}
          onViewportChange={(next) => viewportChanges.push(next
            ? { start: next.start.toISOString(), end: next.end.toISOString() }
            : null)}
        />
      </InputHostProvider>,
      { width: 62, height: 14 },
    );

    await act(async () => testSetup!.renderOnce());
    const zoomIn = keyEvent("=");
    zoomIn.sequence = "+";
    zoomIn.shift = true;
    await act(async () => chartShortcut?.(zoomIn));
    await act(async () => testSetup!.renderOnce());
    expect(viewportChanges.at(-1)).not.toBeNull();

    await act(async () => chartShortcut?.(keyEvent("-")));
    await act(async () => testSetup!.renderOnce());

    // Reporting null here would make an owner that echoes navigated ranges
    // back as the authored viewport reload its original range instead.
    expect(viewportChanges.at(-1)).toEqual({
      start: "2025-01-01T00:00:00.000Z",
      end: "2025-01-09T00:00:00.000Z",
    });
  });

  test("preserves a zoomed viewport when adaptive data refreshes its buffer", async () => {
    const viewportChanges: Array<{ start: string; end: string } | null> = [];
    let replacePoints: ((points: TimeSeriesPoint[]) => void) | null = null;
    const initialPoints = series(
      "price",
      "main",
      "left",
      "USD",
      [100, 101, 102, 103, 104, 105, 106, 107, 108],
    ).points;
    function Harness() {
      const [points, setPoints] = useState(initialPoints);
      replacePoints = setPoints;
      return (
        <InputHostProvider host={chartInputHost}>
          <CompositeChart
            width={60}
            height={12}
            focused
            series={[{
              ...series("price", "main", "left", "USD", []),
              points,
            }]}
            panels={[{ id: "main" }]}
            viewport={{
              start: new Date("2025-01-01T00:00:00.000Z"),
              end: new Date("2025-01-09T00:00:00.000Z"),
            }}
            onViewportChange={(next) => viewportChanges.push(next
              ? { start: next.start.toISOString(), end: next.end.toISOString() }
              : null)}
          />
        </InputHostProvider>
      );
    }

    testSetup = await testRender(
      <Harness />,
      { width: 62, height: 14 },
    );
    await act(async () => testSetup!.renderOnce());

    for (let index = 0; index < 2; index += 1) {
      const zoomIn = keyEvent("=");
      zoomIn.sequence = "+";
      zoomIn.shift = true;
      await act(async () => chartShortcut?.(zoomIn));
      await act(async () => testSetup!.renderOnce());
    }
    const zoomedViewport = viewportChanges.at(-1);
    expect(zoomedViewport?.start).not.toBe("2025-01-01T00:00:00.000Z");
    const changeCount = viewportChanges.length;

    await act(async () => replacePoints?.(initialPoints.slice(2)));
    await act(async () => {
      await testSetup!.renderOnce();
      await testSetup!.renderOnce();
    });

    expect(viewportChanges).toHaveLength(changeCount);
    expect(viewportChanges.at(-1)).toEqual(zoomedViewport);
  });

  test("keeps a panned viewport exactly where it was when backfill replaces the data", async () => {
    const viewportChanges: Array<{ start: string; end: string } | null> = [];
    const viewportInteractions: string[] = [];
    let replacePoints: ((points: TimeSeriesPoint[]) => void) | null = null;
    const initialPoints = series(
      "price",
      "main",
      "left",
      "USD",
      [100, 101, 102, 103, 104, 105, 106, 107, 108],
    ).points;
    const olderPoints = Array.from({ length: 11 }, (_, index) => {
      const date = new Date(
        Date.UTC(2024, 11, 25 + index) - (index === 10 ? 60_000 : 0),
      );
      return { date, observedAt: date, value: 90 + index };
    });
    function Harness() {
      const [points, setPoints] = useState(initialPoints);
      replacePoints = setPoints;
      return (
        <InputHostProvider host={chartInputHost}>
          <CompositeChart
            width={60}
            height={12}
            focused
            series={[{
              ...series("price", "main", "left", "USD", []),
              points,
            }]}
            panels={[{ id: "main" }]}
            viewport={{
              start: new Date("2025-01-06T00:00:00.000Z"),
              end: new Date("2025-01-09T00:00:00.000Z"),
            }}
            onViewportChange={(next, interaction) => {
              viewportInteractions.push(interaction);
              viewportChanges.push(next
                ? { start: next.start.toISOString(), end: next.end.toISOString() }
                : null);
            }}
          />
        </InputHostProvider>
      );
    }

    testSetup = await testRender(<Harness />, { width: 62, height: 14 });
    await act(async () => testSetup!.renderOnce());
    for (let index = 0; index < 120; index += 1) {
      const panOlder = keyEvent("left");
      panOlder.shift = true;
      await act(async () => chartShortcut?.(panOlder));
      await act(async () => testSetup!.renderOnce());
    }
    const pannedViewport = viewportChanges.at(-1);
    expect(pannedViewport).toEqual({
      start: "2025-01-01T00:00:00.000Z",
      end: "2025-01-04T00:00:00.000Z",
    });

    const changeCount = viewportChanges.length;
    await act(async () => replacePoints?.(olderPoints));
    await act(async () => {
      await testSetup!.renderOnce();
      await testSetup!.renderOnce();
    });

    // The refreshed buffer ends a minute before the window does. The window
    // stays put and simply shows what is loaded; nothing is echoed upward.
    expect(viewportChanges).toHaveLength(changeCount);
    expect(viewportChanges.at(-1)).toEqual(pannedViewport);
    expect(viewportInteractions).not.toContain("sync");
    expect(testSetup.captureCharFrame()).not.toContain("No chart data");
    expect(testSetup.captureCharFrame()).not.toContain("Jan 9");
  });

  test("keeps the latest pan through delayed adaptive viewport and series echoes", async () => {
    const viewportChanges: Array<{ start: string; end: string } | null> = [];
    let publishViewport: ((
      next: { start: string; end: string },
      showSecondary?: boolean,
    ) => void) | null = null;
    let publishExternalViewport: (() => void) | null = null;
    function Harness() {
      const [viewport, setViewport] = useState({
        start: new Date("2025-01-05T00:00:00.000Z"),
        end: new Date("2025-01-09T00:00:00.000Z"),
      });
      const [showSecondary, setShowSecondary] = useState(false);
      const [viewportResetKey, setViewportResetKey] = useState("price:1D:auto");
      publishViewport = (next, nextShowSecondary = showSecondary) => {
        setViewport({
          start: new Date(next.start),
          end: new Date(next.end),
        });
        setShowSecondary(nextShowSecondary);
      };
      publishExternalViewport = () => {
        setViewport({
          start: new Date("2025-01-01T00:00:00.000Z"),
          end: new Date("2025-01-09T00:00:00.000Z"),
        });
        setViewportResetKey("price:1W:auto");
      };
      return (
        <CompositeChart
          width={60}
          height={12}
          interactive
          series={[
            series("price", "main", "left", "USD", [100, 101, 102, 103, 104, 105, 106, 107, 108]),
            series("secondary", "main", "left", "USD", showSecondary ? [90, 91, 92] : []),
          ]}
          panels={[{ id: "main" }]}
          viewport={viewport}
          viewportResetKey={viewportResetKey}
          onViewportChange={(next) => {
            viewportChanges.push(next
              ? { start: next.start.toISOString(), end: next.end.toISOString() }
              : null);
          }}
        />
      );
    }

    testSetup = await testRender(
      <CaptureChartSurfaceProvider>
        <Harness />
      </CaptureChartSurfaceProvider>,
      { width: 62, height: 14 },
    );
    await act(async () => testSetup!.renderOnce());

    for (let index = 0; index < 10; index += 1) {
      await act(async () => {
        capturedSurfaceProps!.onMouseScroll(pointerEvent(25, 3, {
          scroll: { direction: "up", delta: 1 },
        }));
      });
      await act(async () => {
        await testSetup!.renderOnce();
        await testSetup!.renderOnce();
      });
    }
    const firstPan = viewportChanges[0]!;
    const latestPan = viewportChanges.at(-1)!;
    expect(firstPan).not.toBeNull();
    expect(latestPan).not.toBeNull();
    expect(latestPan).not.toEqual(firstPan);

    await act(async () => publishViewport!(firstPan, true));
    await act(async () => {
      await testSetup!.renderOnce();
      await testSetup!.renderOnce();
      await testSetup!.renderOnce();
    });
    expect(viewportChanges).not.toContain(null);
    expect(viewportChanges.at(-1)).toEqual(latestPan);

    await act(async () => publishViewport!(latestPan));
    await act(async () => {
      await testSetup!.renderOnce();
      await testSetup!.renderOnce();
      await testSetup!.renderOnce();
    });
    expect(viewportChanges).not.toContain(null);
    expect(viewportChanges.at(-1)).toEqual(latestPan);

    for (let index = 0; index < 32; index += 1) {
      await act(async () => {
        capturedSurfaceProps!.onMouseScroll(pointerEvent(25, 3, {
          scroll: { direction: "up", delta: 100 },
        }));
      });
      await act(async () => {
        await testSetup!.renderOnce();
        await testSetup!.renderOnce();
      });
    }
    const boundaryViewport = viewportChanges.at(-1)!;
    expect(boundaryViewport).not.toBeNull();

    await act(async () => publishViewport!(boundaryViewport));
    await act(async () => {
      await testSetup!.renderOnce();
      await testSetup!.renderOnce();
    });
    const boundaryChangeCount = viewportChanges.length;

    await act(async () => {
      capturedSurfaceProps!.onMouseScroll(pointerEvent(25, 3, {
        scroll: { direction: "up", delta: 100 },
      }));
    });
    await act(async () => {
      await testSetup!.renderOnce();
      await testSetup!.renderOnce();
    });
    expect(viewportChanges).toHaveLength(boundaryChangeCount);
    expect(viewportChanges).not.toContain(null);

    await act(async () => publishExternalViewport!());
    await act(async () => {
      await testSetup!.renderOnce();
      await testSetup!.renderOnce();
    });
    expect(viewportChanges.at(-1)).toBeNull();
  });

  test("activates and navigates a buffered viewport from the first mouse gesture", async () => {
    let activations = 0;
    const cursorChanges: string[] = [];
    testSetup = await testRender(
      <CaptureChartSurfaceProvider>
        <CompositeChart
          width={60}
          height={12}
          focused={false}
          interactive
          series={[series("price", "main", "left", "USD", [100, 101, 102, 103, 104, 105, 106, 107, 108])]}
          panels={[{ id: "main" }]}
          viewport={{
            start: new Date("2025-01-05T00:00:00.000Z"),
            end: new Date("2025-01-09T00:00:00.000Z"),
          }}
          onActivate={() => { activations += 1; }}
          onCursorDateChange={(date) => {
            if (date) cursorChanges.push(date.toISOString());
          }}
        />
      </CaptureChartSurfaceProvider>,
      { width: 62, height: 14 },
    );

    await act(async () => testSetup!.renderOnce());
    expect(testSetup.captureCharFrame()).toContain("Jan 5");

    await act(async () => {
      capturedSurfaceProps!.onMouseDown(pointerEvent(10, 3));
      capturedSurfaceProps!.onMouseDrag(pointerEvent(30, 3));
      capturedSurfaceProps!.onMouseUp(pointerEvent(30, 3));
    });
    await act(async () => testSetup!.renderOnce());

    expect(activations).toBe(1);
    expect(cursorChanges.length).toBeGreaterThan(0);
    expect(testSetup.captureCharFrame()).toContain("Jan 3");
  });

  test("zooms to a shift-drag selection instead of panning", async () => {
    const viewportChanges: Array<{ start: string; end: string } | null> = [];
    testSetup = await testRender(
      <CaptureChartSurfaceProvider>
        <CompositeChart
          width={60}
          height={12}
          interactive
          series={[series("price", "main", "left", "USD", [100, 101, 102, 103, 104, 105, 106, 107, 108])]}
          panels={[{ id: "main" }]}
          onViewportChange={(next) => {
            viewportChanges.push(next
              ? { start: next.start.toISOString(), end: next.end.toISOString() }
              : null);
          }}
        />
      </CaptureChartSurfaceProvider>,
      { width: 62, height: 14 },
    );
    await act(async () => testSetup!.renderOnce());

    await act(async () => {
      capturedSurfaceProps!.onMouseDown(pointerEvent(10, 3, { shift: true }));
      capturedSurfaceProps!.onMouseDrag(pointerEvent(30, 3, { shift: true }));
    });
    await act(async () => testSetup!.renderOnce());
    // The selection must not pan the way an unmodified drag would, and the
    // range has to read as text for renderers that cannot draw the band.
    expect(viewportChanges).toHaveLength(0);
    expect(testSetup.captureCharFrame()).toContain("→");

    await act(async () => {
      capturedSurfaceProps!.onMouseUp(pointerEvent(30, 3, { shift: true }));
    });
    await act(async () => testSetup!.renderOnce());

    const zoomed = viewportChanges.at(-1);
    expect(zoomed).toBeTruthy();
    expect(new Date(zoomed!.start).getTime()).toBeGreaterThan(Date.parse("2025-01-01T00:00:00.000Z"));
    expect(new Date(zoomed!.end).getTime()).toBeLessThan(Date.parse("2025-01-09T00:00:00.000Z"));
  });

  test("reports an alt-drag measurement without moving the viewport", async () => {
    const viewportChanges: Array<{ start: string; end: string } | null> = [];
    testSetup = await testRender(
      <CaptureChartSurfaceProvider>
        <CompositeChart
          width={60}
          height={12}
          interactive
          series={[series("price", "main", "left", "USD", [100, 101, 102, 103, 104, 105, 106, 107, 108])]}
          panels={[{ id: "main" }]}
          onViewportChange={(next) => {
            viewportChanges.push(next
              ? { start: next.start.toISOString(), end: next.end.toISOString() }
              : null);
          }}
        />
      </CaptureChartSurfaceProvider>,
      { width: 62, height: 14 },
    );
    await act(async () => testSetup!.renderOnce());

    await act(async () => {
      capturedSurfaceProps!.onMouseDown(pointerEvent(8, 6, { alt: true }));
      capturedSurfaceProps!.onMouseDrag(pointerEvent(34, 1, { alt: true }));
    });
    await act(async () => testSetup!.renderOnce());

    const measuringFrame = testSetup.captureCharFrame();
    // The readout sits in the middle of the box it measures, not in the legend.
    expect(measuringFrame).toContain("Δ");
    expect(measuringFrame).toContain("bars");
    expect(measuringFrame.split("\n")[0]).not.toContain("Δ");
    expect(viewportChanges).toHaveLength(0);

    await act(async () => {
      capturedSurfaceProps!.onMouseUp(pointerEvent(34, 1, { alt: true }));
    });
    await act(async () => testSetup!.renderOnce());
    expect(testSetup.captureCharFrame()).not.toContain("Δ");
    expect(viewportChanges).toHaveLength(0);
  });

  test("arms a measurement from the keyboard when a modifier drag cannot reach the app", async () => {
    testSetup = await testRender(
      <InputHostProvider host={chartInputHost}>
        <CaptureChartSurfaceProvider>
          <CompositeChart
            width={60}
            height={12}
            focused
            interactive
            series={[series("price", "main", "left", "USD", [100, 101, 102, 103, 104, 105, 106, 107, 108])]}
            panels={[{ id: "main" }]}
          />
        </CaptureChartSurfaceProvider>
      </InputHostProvider>,
      { width: 62, height: 14 },
    );
    await act(async () => testSetup!.renderOnce());

    await act(async () => chartShortcut?.(keyEvent("m", true)));
    await act(async () => testSetup!.renderOnce());

    // No modifier on the drag: the armed tool is what makes it a measurement.
    await act(async () => {
      capturedSurfaceProps!.onMouseDown(pointerEvent(8, 6));
      capturedSurfaceProps!.onMouseDrag(pointerEvent(34, 1));
    });
    await act(async () => testSetup!.renderOnce());
    expect(testSetup.captureCharFrame()).toContain("Δ");

    await act(async () => {
      capturedSurfaceProps!.onMouseUp(pointerEvent(34, 1));
    });
    await act(async () => testSetup!.renderOnce());
    expect(testSetup.captureCharFrame()).not.toContain("Δ");

    // Sticky: the tool still owns the next drag until it is dismissed.
    await act(async () => {
      capturedSurfaceProps!.onMouseDown(pointerEvent(8, 6));
      capturedSurfaceProps!.onMouseDrag(pointerEvent(30, 2));
    });
    await act(async () => testSetup!.renderOnce());
    expect(testSetup.captureCharFrame()).toContain("Δ");
  });

  test("arms and disarms a chart tool from the toolbar", async () => {
    testSetup = await testRender(
      <CaptureChartSurfaceProvider>
        <CompositeChart
          width={60}
          height={12}
          interactive
          series={[series("price", "main", "left", "USD", [100, 101, 102, 103, 104, 105, 106, 107, 108])]}
          panels={[{ id: "main" }]}
        />
      </CaptureChartSurfaceProvider>,
      { width: 62, height: 14 },
    );
    await act(async () => testSetup!.renderOnce());

    // Pressing the ruler icon has to arm the tool for an unmodified drag.
    const toolbarRow = testSetup.captureCharFrame().split("\n").findIndex((line) => line.includes("↔"));
    const rulerX = testSetup.captureCharFrame().split("\n")[toolbarRow]!.indexOf("↔");
    await act(async () => {
      await testSetup!.mockMouse.moveTo(rulerX, toolbarRow);
      await testSetup!.mockMouse.click(rulerX, toolbarRow);
    });
    await act(async () => testSetup!.renderOnce());
    await act(async () => {
      capturedSurfaceProps!.onMouseDown(pointerEvent(8, 6));
      capturedSurfaceProps!.onMouseDrag(pointerEvent(30, 2));
    });
    await act(async () => testSetup!.renderOnce());
    expect(testSetup.captureCharFrame()).toContain("Δ");

    await act(async () => {
      capturedSurfaceProps!.onMouseUp(pointerEvent(30, 2));
      await testSetup!.mockMouse.click(rulerX, toolbarRow);
    });
    await act(async () => testSetup!.renderOnce());
    await act(async () => {
      capturedSurfaceProps!.onMouseDown(pointerEvent(8, 6));
      capturedSurfaceProps!.onMouseDrag(pointerEvent(30, 2));
    });
    await act(async () => testSetup!.renderOnce());
    expect(testSetup.captureCharFrame()).not.toContain("Δ");
  });

  test("draws a line, then grabs its end to reshape it", async () => {
    testSetup = await testRender(
      <InputHostProvider host={chartInputHost}>
        <CaptureChartSurfaceProvider>
          <CompositeChart
            width={60}
            height={12}
            focused
            interactive
            series={[series("price", "main", "left", "USD", [100, 101, 102, 103, 104, 105, 106, 107, 108])]}
            panels={[{ id: "main" }]}
          />
        </CaptureChartSurfaceProvider>
      </InputHostProvider>,
      { width: 62, height: 14 },
    );
    await act(async () => testSetup!.renderOnce());
    await act(async () => chartShortcut?.(keyEvent("d", true)));
    await act(async () => testSetup!.renderOnce());
    const base = capturedSurfaceProps!.bitmaps?.[0] as { pixels: Uint8Array } | undefined;

    await act(async () => {
      capturedSurfaceProps!.onMouseDown(pointerEvent(8, 6));
      capturedSurfaceProps!.onMouseDrag(pointerEvent(30, 2));
      capturedSurfaceProps!.onMouseUp(pointerEvent(30, 2));
    });
    await act(async () => testSetup!.renderOnce());
    const drawn = capturedSurfaceProps!.bitmaps?.[0] as { pixels: Uint8Array } | undefined;
    expect(Buffer.from(drawn!.pixels).equals(Buffer.from(base!.pixels))).toBe(false);

    // Grabbing the endpoint that was just dropped has to reshape, not redraw.
    await act(async () => {
      capturedSurfaceProps!.onMouseDown(pointerEvent(8, 6));
      capturedSurfaceProps!.onMouseDrag(pointerEvent(14, 8));
      capturedSurfaceProps!.onMouseUp(pointerEvent(14, 8));
    });
    await act(async () => testSetup!.renderOnce());
    const reshaped = capturedSurfaceProps!.bitmaps?.[0] as { pixels: Uint8Array } | undefined;
    expect(reshaped).toBeTruthy();
    expect(Buffer.from(reshaped!.pixels).equals(Buffer.from(drawn!.pixels))).toBe(false);
  });

  test("places a trend line from the keyboard and leaves Backspace to the pane when nothing is picked", async () => {
    testSetup = await testRender(
      <InputHostProvider host={chartInputHost}>
        <CaptureChartSurfaceProvider>
          <CompositeChart
            width={60}
            height={12}
            focused
            interactive
            series={[series("price", "main", "left", "USD", [100, 101, 102, 103, 104, 105, 106, 107, 108])]}
            panels={[{ id: "main" }]}
          />
        </CaptureChartSurfaceProvider>
      </InputHostProvider>,
      { width: 62, height: 14 },
    );
    await act(async () => testSetup!.renderOnce());
    const bitmap = () => Buffer.from((capturedSurfaceProps!.bitmaps?.[0] as { pixels: Uint8Array }).pixels);
    const press = async (name: string, shift = false) => {
      const event = keyEvent(name, shift);
      await act(async () => chartShortcut?.(event));
      await act(async () => testSetup!.renderOnce());
      return event;
    };
    const base = bitmap();

    await press("d", true);
    // Enter anchors at the newest bar; Left walks the end back along the price.
    expect((await press("return")).defaultPrevented).toBe(true);
    await press("left");
    await press("left");
    await press("left");
    expect(testSetup.captureCharFrame()).toContain("Δ -$3.00");
    await press("return");
    expect(testSetup.captureCharFrame()).not.toContain("Δ");
    const drawn = bitmap();
    expect(drawn.equals(base)).toBe(false);

    // Nothing picked and no tool in hand: Backspace is the pane's back key.
    await press("escape");
    expect((await press("backspace")).defaultPrevented).toBeFalsy();
    expect(bitmap().equals(base)).toBe(false);

    // With the line tool, ] picks the drawing and Backspace deletes it.
    await press("d", true);
    await press("]");
    expect((await press("backspace")).defaultPrevented).toBe(true);
    expect(bitmap().equals(base)).toBe(true);
  });

  test("steps the cursor of a focused chart that does not navigate", async () => {
    const cursorChanges: Array<string | null> = [];
    testSetup = await testRender(
      <InputHostProvider host={chartInputHost}>
        <CompositeChart
          width={60}
          height={12}
          focused
          navigable={false}
          series={[series("price", "main", "left", "USD", [100, 103, 101])]}
          panels={[{ id: "main" }]}
          onCursorDateChange={(date) => cursorChanges.push(date?.toISOString() ?? null)}
        />
      </InputHostProvider>,
      { width: 62, height: 14 },
    );
    await act(async () => testSetup!.renderOnce());

    await act(async () => chartShortcut?.(keyEvent("left")));
    expect(cursorChanges).toEqual(["2025-01-03T00:00:00.000Z"]);
    // Panning stays with charts that navigate, so the key is left alone.
    const pan = keyEvent("a");
    await act(async () => chartShortcut?.(pan));
    expect(pan.defaultPrevented).toBe(false);
  });

  test("disarms a chart tool with escape", async () => {
    testSetup = await testRender(
      <InputHostProvider host={chartInputHost}>
        <CaptureChartSurfaceProvider>
          <CompositeChart
            width={60}
            height={12}
            focused
            interactive
            series={[series("price", "main", "left", "USD", [100, 101, 102, 103, 104, 105, 106, 107, 108])]}
            panels={[{ id: "main" }]}
          />
        </CaptureChartSurfaceProvider>
      </InputHostProvider>,
      { width: 62, height: 14 },
    );
    await act(async () => testSetup!.renderOnce());

    await act(async () => chartShortcut?.(keyEvent("z", true)));
    await act(async () => chartShortcut?.(keyEvent("escape")));
    await act(async () => testSetup!.renderOnce());

    // Disarmed: an unmodified drag pans instead of selecting a range.
    await act(async () => {
      capturedSurfaceProps!.onMouseDown(pointerEvent(8, 6));
      capturedSurfaceProps!.onMouseDrag(pointerEvent(30, 2));
    });
    await act(async () => testSetup!.renderOnce());
    expect(testSetup.captureCharFrame()).not.toContain("→");
  });

  test("keeps a measurement readable in a narrow pane", async () => {
    testSetup = await testRender(
      <CaptureChartSurfaceProvider>
        <CompositeChart
          width={28}
          height={12}
          interactive
          series={[series("price", "main", "left", "USD", [100, 101, 102, 103, 104, 105, 106, 107, 108])]}
          panels={[{ id: "main" }]}
        />
      </CaptureChartSurfaceProvider>,
      { width: 30, height: 14 },
    );
    await act(async () => testSetup!.renderOnce());

    await act(async () => {
      capturedSurfaceProps!.onMouseDown(pointerEvent(2, 6, { alt: true }));
      capturedSurfaceProps!.onMouseDrag(pointerEvent(14, 1, { alt: true }));
    });
    await act(async () => testSetup!.renderOnce());

    // Too narrow for the whole summary, but the change still has to be visible.
    expect(testSetup.captureCharFrame()).toContain("Δ");
  });

  test("ends a tool drag whose release landed on another pane", async () => {
    testSetup = await testRender(
      <CaptureChartSurfaceProvider>
        <CompositeChart
          width={60}
          height={12}
          interactive
          series={[series("price", "main", "left", "USD", [100, 101, 102, 103, 104, 105, 106, 107, 108])]}
          panels={[{ id: "main" }]}
        />
      </CaptureChartSurfaceProvider>,
      { width: 62, height: 14 },
    );
    await act(async () => testSetup!.renderOnce());

    await act(async () => {
      capturedSurfaceProps!.onMouseDown(pointerEvent(8, 6, { alt: true }));
      capturedSurfaceProps!.onMouseDrag(pointerEvent(34, 1, { alt: true }));
    });
    await act(async () => testSetup!.renderOnce());
    expect(testSetup.captureCharFrame()).toContain("Δ");

    // No mouse-up arrives: the pointer was released over a floating pane. The
    // next plain move only happens with the button already up.
    await act(async () => {
      capturedSurfaceProps!.onMouseMove(pointerEvent(20, 4));
    });
    await act(async () => testSetup!.renderOnce());
    expect(testSetup.captureCharFrame()).not.toContain("Δ");
  });

  test("maps the pointer crosshair level through both axes and labels its date", async () => {
    testSetup = await testRender(
      <CaptureChartSurfaceProvider>
        <CompositeChart
          width={60}
          height={12}
          showLegend={false}
          interactive
          series={[
            series("price", "main", "left", "USD", [100, 200, 100, 100]),
            series("revenue", "main", "right", "%", [0, 200, 0, 0]),
          ]}
          panels={[{ id: "main" }]}
        />
      </CaptureChartSurfaceProvider>,
      { width: 62, height: 14 },
    );

    await act(async () => testSetup!.renderOnce());
    const plotWidth = capturedSurfaceNode!.width as number;
    const plotHeight = capturedSurfaceNode!.height as number;
    await act(async () => {
      capturedSurfaceProps!.onMouseMove(pointerEvent(
        (plotWidth - 1) * (2 / 3),
        (plotHeight - 1) / 2,
      ));
    });
    await act(async () => testSetup!.renderOnce());

    const frame = testSetup.captureCharFrame();
    expect(frame).toContain("$150");
    expect(frame).toContain("106%");
    expect(frame).toContain("2025-01-03");
    expect(frame).toContain("────────");
  });

  test.each([
    ["USD", "currency-total:USD", 90_007_000_000, "$90.01B"],
    ["EUR", "currency-total:EUR", -12_345_600_000, "-€12.35B"],
    ["CAD", "currency-total:CAD", 123_456_000, "123.46M CAD"],
    ["USD", "price:USD", 1_234_567.89, "$1,234,567.89"],
    ["USD", "price:USD", 0.0123, "$0.0123"],
    ["USD", "price:USD", 1e30, "…"],
  ] as const)("renders a complete cursor marker for %s %s %s", async (unit, unitGroup, value, label) => {
    testSetup = await testRender(
      <CaptureChartSurfaceProvider>
        <CompositeChart
          width={60}
          height={12}
          showLegend={false}
          series={[{
            ...series("price", "main", "left", unit, [value * 0.8, value, value * 1.2]),
            unitGroup,
          }]}
          panels={[{ id: "main" }]}
          cursorDate={new Date("2025-01-02T00:00:00.000Z")}
        />
      </CaptureChartSurfaceProvider>,
      { width: 62, height: 14 },
    );
    await act(async () => testSetup!.renderOnce());
    expect(testSetup.captureCharFrame()).toContain(label);
    expect(capturedSurfaceNode!.width).toBeGreaterThanOrEqual(30);
  });

  test("static overview charts reserve the complete tiny-price marker without losing the plot", async () => {
    testSetup = await testRender(
      <CaptureChartSurfaceProvider>
        <CompositeChart width={60} height={12} showLegend={false} interactive={false}
          series={[{ ...series("price", "main", "right", "USD", [0.000005, 0.0000051, 0.00000526]), unitGroup: "price:USD", timeBasis: { kind: "market", timeZone: "UTC" } }]}
          panels={[{ id: "main" }]} />
      </CaptureChartSurfaceProvider>,
      { width: 62, height: 14 },
    );
    await act(async () => testSetup!.renderOnce());
    expect(testSetup.captureCharFrame()).toContain("$0.00000526");
    expect(capturedSurfaceNode!.width).toBeGreaterThanOrEqual(30);
  });

  test("preserves integer-domain cursor decimals without moving the plot and honors hidden axes", async () => {
    let setAxisWidth: ((value: number) => void) | null = null;
    function Harness() {
      const [axisWidth, setWidth] = useState(9);
      setAxisWidth = setWidth;
      return <CaptureChartSurfaceProvider>
        <CompositeChart width={60} height={12} showLegend={false} axisWidth={axisWidth}
          series={[series("price", "main", "left", "USD", [100, 200, 100])]}
          panels={[{ id: "main" }]}
        />
      </CaptureChartSurfaceProvider>;
    }
    testSetup = await testRender(<Harness />, { width: 62, height: 14 });
    await act(async () => testSetup!.renderOnce());
    const plotWidth = capturedSurfaceNode!.width as number;
    const plotHeight = capturedSurfaceNode!.height as number;
    await act(async () => capturedSurfaceProps!.onMouseMove(pointerEvent(
      (plotWidth - 1) / 2, (plotHeight - 1) * 0.4975,
    )));
    await act(async () => testSetup!.renderOnce());
    expect(testSetup.captureCharFrame()).toContain("$150.28");
    expect(capturedSurfaceNode!.width).toBe(plotWidth);
    await act(async () => setAxisWidth?.(0));
    await act(async () => testSetup!.renderOnce());
    expect(capturedSurfaceNode!.width).toBe(60);
    expect(testSetup.captureCharFrame()).not.toContain("$");
  });

  test("keeps the requested window while older cached observations partially overlap it", async () => {
    testSetup = await testRender(
      <CompositeChart
        width={90}
        height={14}
        series={[{
          ...series("price", "main", "left", "USD", []),
          points: [point("2026-07-31", 100), point("2026-08-15", 110), point("2026-08-31", 105)],
        }]}
        panels={[{ id: "main" }]}
        viewport={{ start: new Date("2026-08-10"), end: new Date("2026-09-10") }}
      />,
      { width: 92, height: 16 },
    );
    await act(async () => testSetup!.renderOnce());
    const frame = testSetup.captureCharFrame();
    expect(frame).toContain("Aug 10");
    expect(frame).toContain("Sep 10");
    expect(frame).not.toContain("Jul 31");
  });

  test("zooms around the mouse pointer with control-wheel", async () => {
    testSetup = await testRender(
      <CaptureChartSurfaceProvider>
        <CompositeChart
          width={60}
          height={12}
          interactive
          series={[series("price", "main", "left", "USD", [100, 101, 102, 103, 104, 105, 106, 107, 108])]}
          panels={[{ id: "main" }]}
          viewport={{
            start: new Date("2025-01-05T00:00:00.000Z"),
            end: new Date("2025-01-09T00:00:00.000Z"),
          }}
        />
      </CaptureChartSurfaceProvider>,
      { width: 62, height: 14 },
    );

    await act(async () => testSetup!.renderOnce());
    expect(testSetup.captureCharFrame()).toContain("Jan 9");

    await act(async () => {
      capturedSurfaceProps!.onMouseScroll(pointerEvent(25, 3, {
        ctrl: true,
        scroll: { direction: "up", delta: 4 },
      }));
    });
    await act(async () => testSetup!.renderOnce());

    expect(testSetup.captureCharFrame()).not.toContain("Jan 9");
  });

  test("uses a supplied market timeline to keep control-wheel zoom under the pointer", async () => {
    const anchor = twoSessionCandles();
    const display = {
      ...anchor,
      id: "secondary",
      label: "Secondary",
      timeBasis: undefined,
    };
    const viewport = {
      start: new Date(anchor.points[0]!.date.getTime()),
      end: new Date(anchor.points.at(-1)!.date.getTime()),
    };
    const viewportChanges: Array<{ start: string; end: string } | null> = [];
    testSetup = await testRender(
      <CaptureChartSurfaceProvider>
        <CompositeChart
          width={60}
          height={12}
          interactive
          series={[display]}
          timelineSeries={[anchor]}
          panels={[{ id: "main" }]}
          viewport={viewport}
          onViewportChange={(next) => viewportChanges.push(next
            ? { start: next.start.toISOString(), end: next.end.toISOString() }
            : null)}
        />
      </CaptureChartSurfaceProvider>,
      { width: 62, height: 14 },
    );

    await act(async () => testSetup!.renderOnce());
    const pointerX = 35;
    const plotWidth = capturedSurfaceNode!.width as number;
    const frame = buildCompositeNavigationFrame([display], [anchor])!;
    const expected = zoomCompositeViewport(
      frame,
      viewport,
      1 + 4 * 0.04,
      // The pointer reads in plot space, which is wider than the viewport by
      // the reserved right offset.
      pointerX / Math.max(plotWidth - 1, 1) * (1 + COMPOSITE_RIGHT_OFFSET_RATIO),
    );

    await act(async () => {
      capturedSurfaceProps!.onMouseScroll(pointerEvent(pointerX, 3, {
        ctrl: true,
        scroll: { direction: "up", delta: 4 },
      }));
    });
    await act(async () => {
      await testSetup!.renderOnce();
      await testSetup!.renderOnce();
    });

    expect(viewportChanges.at(-1)).toEqual({
      start: expected.start.toISOString(),
      end: expected.end.toISOString(),
    });
  });

  test("returns a drag to its origin without handing the window back", async () => {
    const viewportChanges: Array<{ start: string; end: string } | null> = [];
    const interactions: string[] = [];
    testSetup = await testRender(
      <CaptureChartSurfaceProvider>
        <CompositeChart
          width={60}
          height={12}
          interactive
          series={[series("price", "main", "left", "USD", [100, 101, 102, 103, 104, 105, 106, 107, 108])]}
          panels={[{ id: "main" }]}
          viewport={{
            start: new Date("2025-01-05T00:00:00.000Z"),
            end: new Date("2025-01-09T00:00:00.000Z"),
          }}
          onViewportChange={(next, interaction) => {
            interactions.push(interaction);
            viewportChanges.push(next
              ? { start: next.start.toISOString(), end: next.end.toISOString() }
              : null);
          }}
        />
      </CaptureChartSurfaceProvider>,
      { width: 62, height: 14 },
    );

    await act(async () => testSetup!.renderOnce());
    await act(async () => {
      capturedSurfaceProps!.onMouseDown(pointerEvent(20, 3));
      capturedSurfaceProps!.onMouseDrag(pointerEvent(30, 3));
    });
    await act(async () => testSetup!.renderOnce());
    expect(viewportChanges.at(-1)).not.toBeNull();

    await act(async () => {
      capturedSurfaceProps!.onMouseDrag(pointerEvent(20, 3));
      capturedSurfaceProps!.onMouseUp(pointerEvent(20, 3));
    });
    await act(async () => {
      await testSetup!.renderOnce();
      await testSetup!.renderOnce();
    });

    expect(viewportChanges.at(-1)).toEqual({
      start: "2025-01-05T00:00:00.000Z",
      end: "2025-01-09T00:00:00.000Z",
    });
    expect(interactions.at(-1)).toBe("pan");
  });

  test("always treats horizontal control-wheel movement as a pan", async () => {
    const interactions: string[] = [];
    testSetup = await testRender(
      <CaptureChartSurfaceProvider>
        <CompositeChart
          width={60}
          height={12}
          interactive
          series={[twoSessionCandles()]}
          panels={[{ id: "main" }]}
          viewport={{
            start: new Date("2025-01-03T13:30:00.000Z"),
            end: new Date("2025-01-03T17:00:00.000Z"),
          }}
          onViewportChange={(_next, interaction) => interactions.push(interaction)}
        />
      </CaptureChartSurfaceProvider>,
      { width: 62, height: 14 },
    );

    await act(async () => testSetup!.renderOnce());
    await act(async () => {
      capturedSurfaceProps!.onMouseScroll(pointerEvent(25, 3, {
        ctrl: true,
        scroll: { direction: "left", delta: 4 },
      }));
    });
    await act(async () => {
      await testSetup!.renderOnce();
      await testSetup!.renderOnce();
    });

    expect(interactions.at(-1)).toBe("pan");
  });

  test("keeps the date axis and mouse recovery when refreshed data misses the zoomed window", async () => {
    let replacePoints: ((points: TimeSeriesPoint[]) => void) | null = null;
    let lastWindow: { start: Date; end: Date } | null = null;
    function Harness() {
      const [points, setPoints] = useState(
        series("price", "main", "left", "USD", [100, 101, 102, 103, 104, 105, 106, 107, 108]).points,
      );
      replacePoints = setPoints;
      return (
        <CompositeChart
          width={60}
          height={12}
          interactive
          series={[{
            ...series("price", "main", "left", "USD", []),
            points,
          }]}
          panels={[{ id: "main" }]}
          viewport={{
            start: new Date("2025-01-01T00:00:00.000Z"),
            end: new Date("2025-01-09T00:00:00.000Z"),
          }}
          onViewportChange={(next) => { lastWindow = next; }}
        />
      );
    }

    testSetup = await testRender(
      <CaptureChartSurfaceProvider>
        <Harness />
      </CaptureChartSurfaceProvider>,
      { width: 62, height: 14 },
    );
    await act(async () => testSetup!.renderOnce());

    for (let index = 0; index < 8; index += 1) {
      await act(async () => {
        capturedSurfaceProps!.onMouseScroll(pointerEvent(25, 3, {
          ctrl: true,
          scroll: { direction: "up", delta: 8 },
        }));
      });
      await act(async () => testSetup!.renderOnce());
    }

    await act(async () => {
      replacePoints?.([
        point("2025-01-01", 100),
        point("2025-01-09", 108),
      ]);
    });
    await act(async () => testSetup!.renderOnce());

    // An observation-free window keeps the chart frame and its axes; only the
    // plotted points go away.
    const emptyFrame = testSetup.captureCharFrame();
    expect(emptyFrame).not.toContain("No chart data");
    expect(emptyFrame).not.toContain("•");
    expect(emptyFrame).toContain("$108");
    expect(emptyFrame).toContain("Jan ");
    expect(typeof capturedSurfaceProps!.onMouseScroll).toBe("function");

    await act(async () => {
      capturedSurfaceProps!.onMouseScroll(pointerEvent(25, 3, {
        ctrl: true,
        scroll: { direction: "down", delta: 4 },
      }));
    });
    await act(async () => testSetup!.renderOnce());

    const recoveredFrame = testSetup.captureCharFrame();
    expect(recoveredFrame).toContain("•");
    expect(lastWindow!.start.getTime()).toBeLessThanOrEqual(Date.parse("2025-01-01"));
    expect(lastWindow!.end.getTime()).toBeGreaterThanOrEqual(Date.parse("2025-01-09"));
  });

  test("restores persisted drawings from pane settings on mount", async () => {
    const renderWithSettings = async (settings: Record<string, unknown>) => {
      const config = createDefaultConfig("/tmp/gloomberb-composite-drawings");
      config.layout.instances.push({
        instanceId: "chart:test",
        paneId: "chart-composer",
        title: "Chart",
        binding: { kind: "fixed", symbol: "ACME" },
        settings,
      });
      testSetup = await testRender(
        <AppContext value={{ state: createInitialState(config), dispatch: () => {} }}>
          <PaneInstanceProvider paneId="chart:test">
            <CaptureChartSurfaceProvider canvasCharts>
              <CompositeChart
                width={60}
                height={12}
                series={[series("price", "main", "left", "USD", [100, 101, 102, 103, 104, 105, 106, 107, 108])]}
                panels={[{ id: "main" }]}
              />
            </CaptureChartSurfaceProvider>
          </PaneInstanceProvider>
        </AppContext>,
        { width: 62, height: 14 },
      );
      await act(async () => {
        await testSetup!.renderOnce();
        await testSetup!.renderOnce();
      });
      const bitmap = capturedSurfaceProps!.bitmaps?.[0] as { pixels: Uint8Array };
      const pixels = Buffer.from(bitmap.pixels);
      await act(async () => testSetup!.renderer.destroy());
      testSetup = undefined;
      return pixels;
    };

    const blank = await renderWithSettings({});
    const restored = await renderWithSettings({
      chartDrawings: [{
        id: "drawing-1",
        panelId: "main",
        color: "#f5a524",
        points: [
          { time: Date.UTC(2025, 0, 2), value: 101 },
          { time: Date.UTC(2025, 0, 8), value: 107 },
        ],
      }],
    });

    expect(restored.equals(blank)).toBe(false);
  });

  test("shows useful UTC times for an intraday shared cursor and time axis", async () => {
    const intraday = {
      ...series("price", "main", "left", "USD", []),
      points: [
        timestampPoint("2025-01-02T09:30:00.000Z", 100),
        timestampPoint("2025-01-02T12:05:00.000Z", 103),
        timestampPoint("2025-01-02T16:00:00.000Z", 101),
      ],
    };
    testSetup = await testRender(
      <CompositeChart
        width={78}
        height={12}
        series={[intraday]}
        panels={[{ id: "main" }]}
        cursorDate={new Date("2025-01-02T12:05:00.000Z")}
      />,
      { width: 80, height: 14 },
    );

    await act(async () => {
      await testSetup!.renderOnce();
      await testSetup!.renderOnce();
    });

    const frame = testSetup.captureCharFrame();
    expect(frame).toContain("12:05 UTC");
    expect(frame).toContain("09:30 UTC");
    expect(frame).toContain("16:00 UTC");
  });
});