gloomberb 0.9.3 → 0.9.5

package/src/cli/pane-functions/screenshot.ts

@@ -1,7 +1,7 @@
 import { dirname, resolve } from "path";
 import { mkdir } from "fs/promises";
 import type { PaneRuntimeState } from "../../core/state/app/state";
-import type { TickerFinancials } from "../../types/financials";
+import type { OptionsChain, TickerFinancials } from "../../types/financials";
 import type { TickerRecord } from "../../types/ticker";
 import { slugifyName } from "../../utils/slugify";
 import { renderDesktopPaneScreenshot, type DesktopPaneShotPayload } from "../desktop-pane-shot";
@@ -18,6 +18,7 @@ import {
 
 const DESKTOP_CELL_WIDTH_PX = 8;
 const DESKTOP_CELL_HEIGHT_PX = 18;
+const OPTIONS_PANE_ID = "options";
 
 export function defaultScreenshotPath(resolved: ResolvedPaneFunction, rawArg: string): string {
   const suffix = slugifyName([resolved.token, rawArg].filter(Boolean).join("-"), "pane");
@@ -70,11 +71,21 @@ async function buildDesktopShotPayload(
 
   const tickers: TickerRecord[] = [];
   const financials: Array<[string, TickerFinancials]> = [];
+  const optionsChains: Array<[string, OptionsChain]> = [];
+  const includeOptionsChains = resolved.pane.id === OPTIONS_PANE_ID || resolved.template?.paneId === OPTIONS_PANE_ID;
   for (const symbol of collectShotSymbols(resolved, rawArg)) {
     const entry = await fetchTickerFinancials(context, symbol);
     const data = await withShotPriceHistory(context, symbol, entry.tickerFile, entry.financials);
     tickers.push(entry.tickerFile ?? createFallbackTicker(symbol, data, context));
     financials.push([symbol, data]);
+    if (includeOptionsChains && context.dataProvider.getOptionsChain) {
+      const exchange = entry.tickerFile?.metadata.exchange
+        ?? data.quote?.listingExchangeName
+        ?? data.quote?.exchangeName
+        ?? "";
+      const chain = await context.dataProvider.getOptionsChain(symbol, exchange);
+      optionsChains.push([symbol, chain]);
+    }
   }
 
   return {
@@ -86,6 +97,7 @@ async function buildDesktopShotPayload(
     heightPx,
     tickers,
     financials,
+    optionsChains,
     paneState,
   };
 }

package/src/components/chart/bar-chart-renderer.test.ts

@@ -1,5 +1,13 @@
 import { describe, expect, test } from "bun:test";
-import { buildBarChartScene, renderBarChart, renderNativeBarChart } from "./bar-chart-renderer";
+import {
+  buildBarChartScene,
+  renderBarChart,
+  renderBarChartAxis,
+  renderBarChartYAxis,
+  renderNativeBarChart,
+  resolveNativeBarPixelBounds,
+  resolveBarChartHover,
+} from "./bar-chart-renderer";
 
 const series = [
   {
@@ -27,27 +35,124 @@ describe("bar chart renderer", () => {
     const scene = buildBarChartScene(series, {
       width: 24,
       height: 8,
-      colors: { bgColor: "#000000", gridColor: "#333333", axisColor: "#666666" },
+      colors: { bgColor: "#000000", gridColor: "#333333", axisColor: "#666666", negativeColor: "#ff5555" },
     });
 
     expect(scene).not.toBeNull();
     expect(scene!.categories).toEqual(["2024", "2025"]);
     expect(scene!.bars).toHaveLength(4);
     expect(scene!.zeroRow).toBeGreaterThanOrEqual(0);
+    expect(scene!.bars.find((bar) => bar.value < 0)?.color).toBe("#ff5555");
   });
 
   test("renders text fallback and native bitmap output", () => {
     const scene = buildBarChartScene(series, {
       width: 24,
       height: 8,
-      colors: { bgColor: "#000000", gridColor: "#333333", axisColor: "#666666" },
+      colors: {
+        bgColor: "#000000",
+        gridColor: "#333333",
+        axisColor: "#666666",
+        negativeColor: "#ff5555",
+        hoverColor: "#ffffff",
+      },
     })!;
 
     expect(renderBarChart(scene).join("\n")).toContain("█");
 
     const bitmap = renderNativeBarChart(scene, 96, 48);
+    const negativePixel = Array.from({ length: bitmap.pixels.length / 4 }).some((_, pixelIndex) => {
+      const index = pixelIndex * 4;
+      return bitmap.pixels[index]! > 200 && bitmap.pixels[index + 1]! < 100 && bitmap.pixels[index + 2]! < 100;
+    });
     expect(bitmap.width).toBe(96);
     expect(bitmap.height).toBe(48);
     expect(bitmap.pixels.some((value) => value > 0)).toBe(true);
+    expect(negativePixel).toBe(true);
+
+    const hover = resolveBarChartHover(scene, scene.bars[0]!.x);
+    expect(renderBarChart(scene, hover).join("\n")).toContain("▓");
+    const hoverBitmap = renderNativeBarChart(scene, 96, 48, hover);
+    const hoverPixel = Array.from({ length: hoverBitmap.pixels.length / 4 }).some((_, pixelIndex) => {
+      const index = pixelIndex * 4;
+      return hoverBitmap.pixels[index]! > 240 && hoverBitmap.pixels[index + 1]! > 240 && hoverBitmap.pixels[index + 2]! > 240;
+    });
+    expect(hoverBitmap.pixels).not.toEqual(bitmap.pixels);
+    expect(hoverPixel).toBe(true);
+  });
+
+  test("renders y-axis labels and resolves hover targets", () => {
+    const scene = buildBarChartScene(series, {
+      width: 24,
+      height: 8,
+      colors: { bgColor: "#000000", gridColor: "#333333", axisColor: "#666666" },
+    })!;
+
+    const yAxis = renderBarChartYAxis(scene, 8, (value) => String(Math.round(value)));
+    const labelCount = yAxis.filter((line) => line.trim().length > 0).length;
+    expect(labelCount).toBeGreaterThanOrEqual(5);
+    expect(yAxis.join("\n")).toContain("22");
+    expect(yAxis.join("\n")).toContain("0");
+
+    const hover = resolveBarChartHover(scene, scene.bars[1]!.x);
+    expect(hover).toMatchObject({
+      seriesId: "NVDA",
+      seriesLabel: "NVDA",
+      category: "2024",
+      value: 20,
+      x: scene.bars[1]!.x,
+      width: scene.bars[1]!.width,
+      row: scene.bars[1]!.row,
+    });
+  });
+
+  test("renders dense single-series bars with consistent separators and readable x-axis labels", () => {
+    const denseSeries = [{
+      id: "value",
+      label: "Value",
+      color: "#00ff66",
+      points: Array.from({ length: 14 }, (_unused, index) => ({
+        category: `${2015 + index} Q1`,
+        value: index + 1,
+      })),
+    }];
+    const scene = buildBarChartScene(denseSeries, {
+      width: 47,
+      height: 8,
+      colors: { bgColor: "#000000", gridColor: "#333333", axisColor: "#666666", negativeColor: "#ff5555" },
+    })!;
+
+    const lastBar = scene.bars.at(-1)!;
+    expect(lastBar.x + lastBar.width).toBe(scene.width);
+    expect(renderBarChart(scene)[scene.zeroRow]).not.toContain("─");
+
+    const bitmapWidth = 470;
+    const pixelBounds = scene.bars.map((bar) => resolveNativeBarPixelBounds(scene, bar, bitmapWidth));
+    const pixelWidths = pixelBounds.map((bounds) => bounds.rightExclusive - bounds.left);
+    expect(Math.max(...pixelWidths) - Math.min(...pixelWidths)).toBeLessThanOrEqual(1);
+    expect(pixelBounds[0]!.left).toBe(0);
+    expect(pixelBounds.at(-1)!.rightExclusive).toBe(bitmapWidth);
+    const pixelGaps: number[] = [];
+    for (let index = 1; index < pixelBounds.length; index++) {
+      pixelGaps.push(pixelBounds[index]!.left - pixelBounds[index - 1]!.rightExclusive);
+    }
+    expect(new Set(pixelGaps)).toEqual(new Set([1]));
+
+    const bitmap = renderNativeBarChart(scene, bitmapWidth, 80);
+    const zeroY = Math.round((scene.zeroRow / Math.max(scene.height - 1, 1)) * (bitmap.height - 1));
+    let separatorColumns = 0;
+    for (let x = 0; x < bitmap.width; x++) {
+      const index = (zeroY * bitmap.width + x) * 4;
+      if (bitmap.pixels[index + 1]! <= 120) separatorColumns++;
+    }
+    expect(separatorColumns).toBe(scene.categories.length - 1);
+
+    const axis = renderBarChartAxis(scene, 1);
+    expect(axis).toHaveLength(1);
+    expect(axis.every((line) => line.length === scene.width)).toBe(true);
+    expect(axis.join("\n")).toContain("2015");
+    expect(axis.join("\n")).not.toContain("Q1");
+    expect(axis.join("\n")).not.toContain("20 20");
+    expect(axis[0]!.endsWith("  ")).toBe(true);
   });
 });

package/src/components/chart/bar-chart-renderer.ts

@@ -1,5 +1,6 @@
 import type { NativeChartBitmap } from "./native/chart-rasterizer";
 import { fillRect, parseHex } from "./native/raster/primitives";
+import { formatCompact } from "../../utils/format";
 
 interface BarChartPoint {
   category: string;
@@ -17,6 +18,8 @@ export interface BarChartColors {
   bgColor: string;
   gridColor: string;
   axisColor: string;
+  negativeColor?: string;
+  hoverColor?: string;
 }
 
 export interface BarChartSceneOptions {
@@ -25,8 +28,9 @@ export interface BarChartSceneOptions {
   colors: BarChartColors;
 }
 
-interface BarChartBar {
+export interface BarChartBar {
   seriesId: string;
+  seriesLabel: string;
   category: string;
   value: number;
   color: string;
@@ -47,8 +51,35 @@ export interface BarChartScene {
   colors: BarChartColors;
 }
 
+export interface BarChartHover {
+  seriesId: string;
+  seriesLabel: string;
+  category: string;
+  value: number;
+  color: string;
+  x: number;
+  width: number;
+  row: number;
+}
+
+export interface NativeBarChartPixelBounds {
+  left: number;
+  rightExclusive: number;
+}
+
 const clamp = (value: number, min: number, max: number) => Math.max(min, Math.min(max, value));
 
+function categorySlotBounds(width: number, categoryCount: number, index: number): { left: number; width: number } {
+  const left = Math.floor((index * width) / categoryCount);
+  const right = index === categoryCount - 1
+    ? width
+    : Math.floor(((index + 1) * width) / categoryCount);
+  return {
+    left,
+    width: Math.max(1, right - left),
+  };
+}
+
 function collectCategories(series: BarChartSeries[]): string[] {
   const categories: string[] = [];
   const seen = new Set<string>();
@@ -64,14 +95,19 @@ function collectCategories(series: BarChartSeries[]): string[] {
 
 function normalizeRange(values: number[]): { min: number; max: number } {
   if (values.length === 0) return { min: 0, max: 1 };
-  const rawMin = Math.min(0, ...values);
-  const rawMax = Math.max(0, ...values);
-  if (rawMin === rawMax) {
-    const delta = Math.max(Math.abs(rawMin) * 0.1, 1);
-    return { min: rawMin - delta, max: rawMax + delta };
+  const dataMin = Math.min(...values);
+  const dataMax = Math.max(...values);
+  if (dataMin === dataMax) {
+    if (dataMin === 0) return { min: -1, max: 1 };
+    const delta = Math.max(Math.abs(dataMin) * 0.1, 1);
+    return dataMin > 0
+      ? { min: 0, max: dataMax + delta }
+      : { min: dataMin - delta, max: 0 };
   }
-  const padding = (rawMax - rawMin) * 0.08;
-  return { min: rawMin - padding, max: rawMax + padding };
+  const padding = (dataMax - dataMin) * 0.08;
+  if (dataMin >= 0) return { min: 0, max: dataMax + padding };
+  if (dataMax <= 0) return { min: dataMin - padding, max: 0 };
+  return { min: dataMin - padding, max: dataMax + padding };
 }
 
 function valueToRow(value: number, min: number, max: number, height: number): number {
@@ -79,6 +115,12 @@ function valueToRow(value: number, min: number, max: number, height: number): nu
   return clamp(Math.round((1 - t) * (height - 1)), 0, height - 1);
 }
 
+function rowToValue(row: number, scene: Pick<BarChartScene, "height" | "min" | "max">): number {
+  if (scene.height <= 1) return scene.max;
+  const t = 1 - row / Math.max(scene.height - 1, 1);
+  return scene.min + t * (scene.max - scene.min);
+}
+
 export function buildBarChartScene(series: BarChartSeries[], options: BarChartSceneOptions): BarChartScene | null {
   const width = Math.max(1, Math.floor(options.width));
   const height = Math.max(1, Math.floor(options.height));
@@ -91,23 +133,32 @@ export function buildBarChartScene(series: BarChartSeries[], options: BarChartSc
 
   const { min, max } = normalizeRange(values);
   const zeroRow = valueToRow(0, min, max, height);
-  const groupWidth = Math.max(1, Math.floor(width / categories.length));
   const seriesCount = Math.max(series.length, 1);
-  const barWidth = Math.max(1, Math.floor(Math.max(groupWidth - 1, 1) / seriesCount));
+  const categorySlots = categories.map((_, index) => categorySlotBounds(width, categories.length, index));
+  const minSlotWidth = Math.max(1, Math.min(...categorySlots.map((slot) => slot.width)));
+  const groupedInnerWidth = Math.max(seriesCount, minSlotWidth - (minSlotWidth > seriesCount * 2 ? 1 : 0));
+  const groupedBarWidth = Math.max(1, Math.floor(groupedInnerWidth / seriesCount));
   const bars: BarChartBar[] = [];
 
   categories.forEach((category, categoryIndex) => {
-    const groupLeft = categoryIndex * groupWidth;
+    const group = categorySlots[categoryIndex]!;
+    const barWidth = seriesCount === 1 ? group.width : groupedBarWidth;
+    const barGroupWidth = barWidth * seriesCount;
+    const groupOffset = Math.max(0, Math.floor((group.width - barGroupWidth) / 2));
     series.forEach((item, seriesIndex) => {
       const value = item.points.find((point) => point.category === category)?.value;
       if (typeof value !== "number" || !Number.isFinite(value)) return;
+      const color = value < 0 && options.colors.negativeColor
+        ? options.colors.negativeColor
+        : item.color;
       bars.push({
         seriesId: item.id,
+        seriesLabel: item.label,
         category,
         value,
-        color: item.color,
-        x: clamp(groupLeft + seriesIndex * barWidth, 0, width - 1),
-        width: Math.min(barWidth, Math.max(width - groupLeft, 1)),
+        color,
+        x: clamp(group.left + groupOffset + seriesIndex * barWidth, 0, width - 1),
+        width: Math.min(barWidth, Math.max(width - (group.left + groupOffset + seriesIndex * barWidth), 1)),
         row: valueToRow(value, min, max, height),
       });
     });
@@ -126,18 +177,81 @@ export function buildBarChartScene(series: BarChartSeries[], options: BarChartSc
   };
 }
 
-export function renderBarChart(scene: BarChartScene): string[] {
+function labelAtRow(labels: Array<{ row: number; value: number }>, row: number): number | null {
+  const match = labels.find((label) => label.row === row);
+  return match ? match.value : null;
+}
+
+export function barChartYAxisTicks(scene: BarChartScene): Array<{ row: number; value: number }> {
+  const ticksByRow = new Map<number, number>();
+  const addTick = (row: number, value: number) => {
+    ticksByRow.set(clamp(row, 0, scene.height - 1), value);
+  };
+
+  addTick(0, scene.max);
+  for (let i = 1; i <= 3; i++) {
+    const row = Math.round((scene.height - 1) * (i / 4));
+    addTick(row, rowToValue(row, scene));
+  }
+  addTick(scene.zeroRow, 0);
+  addTick(scene.height - 1, scene.min);
+
+  return [...ticksByRow.entries()]
+    .map(([row, value]) => ({ row, value }))
+    .sort((left, right) => left.row - right.row);
+}
+
+export function renderBarChartYAxis(
+  scene: BarChartScene,
+  width: number,
+  formatValue: (value: number) => string = formatCompact,
+): string[] {
+  const axisWidth = Math.max(0, Math.floor(width));
+  if (axisWidth === 0) return Array.from({ length: scene.height }, () => "");
+
+  const ticks = barChartYAxisTicks(scene);
+  return Array.from({ length: scene.height }, (_unused, row) => {
+    const value = labelAtRow(ticks, row);
+    const label = value === null ? "" : formatValue(value);
+    return `${label.slice(0, Math.max(axisWidth - 1, 0)).padStart(Math.max(axisWidth - 1, 0))} `;
+  });
+}
+
+export function resolveBarChartHover(scene: BarChartScene, cellX: number): BarChartHover | null {
+  if (!Number.isFinite(cellX) || scene.bars.length === 0) return null;
+  const x = clamp(Math.floor(cellX), 0, scene.width - 1);
+  const direct = scene.bars.find((bar) => x >= bar.x && x < bar.x + bar.width);
+  const bar = direct ?? scene.bars.reduce((closest, current) => {
+    const closestCenter = closest.x + closest.width / 2;
+    const currentCenter = current.x + current.width / 2;
+    return Math.abs(currentCenter - x) < Math.abs(closestCenter - x) ? current : closest;
+  }, scene.bars[0]!);
+
+  return {
+    seriesId: bar.seriesId,
+    seriesLabel: bar.seriesLabel,
+    category: bar.category,
+    value: bar.value,
+    color: bar.color,
+    x: bar.x,
+    width: bar.width,
+    row: bar.row,
+  };
+}
+
+export function renderBarChart(scene: BarChartScene, hover: BarChartHover | null = null): string[] {
   const rows = Array.from({ length: scene.height }, () => Array(scene.width).fill(" "));
   for (let x = 0; x < scene.width; x++) {
     rows[scene.zeroRow]![x] = "─";
   }
 
   for (const bar of scene.bars) {
+    const fill = hover && hover.seriesId === bar.seriesId && hover.category === bar.category ? "▓" : "█";
     const top = Math.min(bar.row, scene.zeroRow);
     const bottom = Math.max(bar.row, scene.zeroRow);
     for (let y = top; y <= bottom; y++) {
       for (let x = bar.x; x < Math.min(bar.x + bar.width, scene.width); x++) {
-        rows[y]![x] = "█";
+        rows[y]![x] = fill;
       }
     }
   }
@@ -145,26 +259,101 @@ export function renderBarChart(scene: BarChartScene): string[] {
   return rows.map((row) => row.join(""));
 }
 
-export function renderBarChartAxis(scene: BarChartScene): string {
-  const axis = Array(scene.width).fill(" ");
-  const groupWidth = Math.max(1, Math.floor(scene.width / scene.categories.length));
+function centeredLabelStart(center: number, label: string, width: number, rightInset = 0): number {
+  return clamp(Math.round(center - label.length / 2), 0, Math.max(0, width - label.length - rightInset));
+}
+
+function compactCategoryLabel(category: string, previous: string | undefined, categoryCount: number): string {
+  const quarterMatch = category.match(/^(\d{4}) Q([1-4])$/);
+  if (!quarterMatch) return category;
+  const year = quarterMatch[1]!;
+  const previousYear = previous?.match(/^(\d{4}) Q[1-4]$/)?.[1];
+  if (categoryCount > 10) return previousYear === year ? "" : year;
+  return category;
+}
+
+function canPlaceLabel(row: string[], start: number, label: string, minGap: number): boolean {
+  const left = Math.max(0, start - minGap);
+  const right = Math.min(row.length - 1, start + label.length + minGap - 1);
+  for (let index = left; index <= right; index++) {
+    if (row[index] !== " ") return false;
+  }
+  return true;
+}
+
+export function renderBarChartAxis(scene: BarChartScene, rowCount = 1): string[] {
+  const rows = Array.from({ length: Math.max(1, Math.floor(rowCount)) }, () => Array(scene.width).fill(" "));
+  const minGap = scene.categories.length > 10 ? 3 : 1;
+  const rightInset = scene.categories.length > 10 ? 2 : 0;
   scene.categories.forEach((category, index) => {
-    const label = category.slice(0, Math.max(1, groupWidth - 1));
-    const start = index * groupWidth;
+    const label = compactCategoryLabel(category, scene.categories[index - 1], scene.categories.length);
+    if (!label) return;
+    const group = categorySlotBounds(scene.width, scene.categories.length, index);
+    const start = centeredLabelStart(group.left + group.width / 2, label, scene.width, rightInset);
+    const row = rows.find((candidate) => canPlaceLabel(candidate, start, label, minGap));
+    if (!row) return;
     for (let i = 0; i < label.length && start + i < scene.width; i++) {
-      axis[start + i] = label[i]!;
+      row[start + i] = label[i]!;
     }
   });
-  return axis.join("");
+  return rows.map((row) => row.join(""));
 }
 
-export function renderNativeBarChart(scene: BarChartScene, pixelWidth: number, pixelHeight: number): NativeChartBitmap {
+export function resolveNativeBarPixelBounds(
+  scene: BarChartScene,
+  bar: BarChartBar,
+  pixelWidth: number,
+): NativeBarChartPixelBounds {
+  const width = Math.max(1, Math.floor(pixelWidth));
+
+  if (scene.series.length === 1) {
+    const categoryIndex = scene.categories.indexOf(bar.category);
+    if (categoryIndex >= 0) {
+      const separatorWidth = scene.categories.length > 1 && width >= scene.categories.length * 3 ? 1 : 0;
+      const usableWidth = Math.max(
+        scene.categories.length,
+        width - separatorWidth * (scene.categories.length - 1),
+      );
+      const left = Math.floor((categoryIndex * usableWidth) / scene.categories.length)
+        + categoryIndex * separatorWidth;
+      const rightExclusive = categoryIndex === scene.categories.length - 1
+        ? width
+        : Math.floor(((categoryIndex + 1) * usableWidth) / scene.categories.length)
+          + categoryIndex * separatorWidth;
+      return {
+        left,
+        rightExclusive: Math.max(left + 1, rightExclusive),
+      };
+    }
+  }
+
+  const horizontalInset = 1;
+  const left = clamp(
+    Math.floor((bar.x / scene.width) * width + horizontalInset),
+    0,
+    width - 1,
+  );
+  const rightExclusive = clamp(
+    Math.ceil(((bar.x + bar.width) / scene.width) * width - horizontalInset),
+    left + 1,
+    width,
+  );
+  return { left, rightExclusive };
+}
+
+export function renderNativeBarChart(
+  scene: BarChartScene,
+  pixelWidth: number,
+  pixelHeight: number,
+  hover: BarChartHover | null = null,
+): NativeChartBitmap {
   const width = Math.max(1, Math.floor(pixelWidth));
   const height = Math.max(1, Math.floor(pixelHeight));
   const data = new Uint8Array(width * height * 4);
   const bg = parseHex(scene.colors.bgColor, 1);
   const grid = parseHex(scene.colors.gridColor, 0.45);
   const axis = parseHex(scene.colors.axisColor, 0.75);
+  const hoverColor = parseHex(scene.colors.hoverColor ?? scene.colors.axisColor, 1);
 
   fillRect(data, width, height, 0, 0, width - 1, height - 1, bg, 1);
 
@@ -177,13 +366,23 @@ export function renderNativeBarChart(scene: BarChartScene, pixelWidth: number, p
   fillRect(data, width, height, 0, zeroY, width - 1, zeroY + 1.1, axis, 0.8);
 
   for (const bar of scene.bars) {
+    const isHovered = !!hover
+      && hover.seriesId === bar.seriesId
+      && hover.category === bar.category;
     const color = parseHex(bar.color, 0.96);
-    const left = (bar.x / scene.width) * width + 1;
-    const right = ((bar.x + bar.width) / scene.width) * width - 1;
+    const bounds = resolveNativeBarPixelBounds(scene, bar, width);
+    const left = bounds.left;
+    const right = bounds.rightExclusive - 1;
     const valueY = clamp((bar.row / Math.max(scene.height - 1, 1)) * (height - 1), 0, height - 1);
     const top = Math.min(valueY, zeroY);
     const bottom = Math.max(valueY, zeroY);
-    fillRect(data, width, height, left, top, Math.max(left, right), Math.max(top + 1, bottom), color, 1);
+    fillRect(data, width, height, left, top, right, Math.max(top + 1, bottom), color, 1);
+    if (isHovered) {
+      fillRect(data, width, height, left, top, right, top + 1.3, hoverColor, 1);
+      fillRect(data, width, height, left, bottom - 1.3, right, bottom, hoverColor, 1);
+      fillRect(data, width, height, left, top, left + 1.3, bottom, hoverColor, 1);
+      fillRect(data, width, height, right - 1.3, top, right, bottom, hoverColor, 1);
+    }
   }
 
   return { width, height, pixels: data };

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;
@@ -95,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(
@@ -216,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/native/bitmap-support.test.ts

@@ -0,0 +1,27 @@
+import { describe, expect, test } from "bun:test";
+import type { NativeRendererHost } from "../../../ui";
+import { shouldRenderNativeBitmap } from "./bitmap-support";
+
+function rendererWithCapabilities(capabilities: unknown): NativeRendererHost {
+  return {
+    terminalWidth: 80,
+    terminalHeight: 24,
+    resolution: null,
+    capabilities,
+    on() {},
+    off() {},
+    requestRender() {},
+    registerLifecyclePass() {},
+    unregisterLifecyclePass() {},
+  };
+}
+
+describe("shouldRenderNativeBitmap", () => {
+  test("skips native bitmaps only when kitty graphics are known unsupported", () => {
+    expect(shouldRenderNativeBitmap(rendererWithCapabilities({ kitty_graphics: false }), true)).toBe(false);
+    expect(shouldRenderNativeBitmap(rendererWithCapabilities({ kitty_graphics: true }), true)).toBe(true);
+    expect(shouldRenderNativeBitmap(rendererWithCapabilities(null), true)).toBe(true);
+    expect(shouldRenderNativeBitmap(rendererWithCapabilities({}), true)).toBe(true);
+    expect(shouldRenderNativeBitmap(rendererWithCapabilities({ kitty_graphics: true }), false)).toBe(false);
+  });
+});