gloomberb 0.5.0 → 0.6.0

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

@@ -1,4 +1,4 @@
-import { RGBA } from "@opentui/core";
+import { RGBA } from "../../ui";
 import type { ChartAxisMode, ChartColors, ChartIndicatorOverlays, Pixel, PixelBuffer, ChartRenderMode } from "./chart-types";
 import type { ProjectedChartPoint } from "./chart-data";
 import { formatCompactMarketPriceWithCurrency, formatMarketPrice, resolveAssetDisplayKind } from "../../utils/market-format";
@@ -29,6 +29,27 @@ const LAYER_DATA = 2;
 const LAYER_OVERLAY = 2;
 const LAYER_CROSSHAIR = 3;
 
+function normalizeCount(value: number, min: number): number {
+  if (!Number.isFinite(value)) return min;
+  return Math.max(Math.floor(value), min);
+}
+
+function normalizeRenderDimensions(opts: RenderChartOptions) {
+  const width = normalizeCount(opts.width, 1);
+  const height = normalizeCount(opts.height, 1);
+  const volumeHeight = opts.showVolume
+    ? Math.min(normalizeCount(opts.volumeHeight, 0), Math.max(height - 1, 0))
+    : 0;
+  const showVolume = opts.showVolume && volumeHeight > 0;
+  return {
+    width,
+    height,
+    showVolume,
+    volumeHeight,
+    chartRows: Math.max(height - volumeHeight, 1),
+  };
+}
+
 // ---------------------------------------------------------------------------
 // Braille character mapping
 // Each terminal cell maps to a 2×4 dot grid. Unicode braille = U+2800 + bits.
@@ -70,14 +91,15 @@ export interface ResolvedChartPalette extends ChartColors {
 
 type VolumeTrendMode = "previousClose" | "openClose";
 
-function makeChunk(text: string, fgColor: string, bgColor: string): StyledChunk {
-  return {
+function makeChunk(text: string, fgColor?: string, bgColor?: string): StyledChunk {
+  const chunk: StyledChunk = {
     __isChunk: true,
     text,
-    fg: RGBA.fromHex(fgColor),
-    bg: RGBA.fromHex(bgColor),
     attributes: 0,
   };
+  if (fgColor) chunk.fg = RGBA.fromHex(fgColor);
+  if (bgColor) chunk.bg = RGBA.fromHex(bgColor);
+  return chunk;
 }
 
 function blendHex(a: string, b: string, ratio: number): string {
@@ -125,11 +147,13 @@ export function resolveChartPalette(
 // ---------------------------------------------------------------------------
 
 export function createPixelBuffer(width: number, heightPixels: number): PixelBuffer {
+  const bufferWidth = normalizeCount(width, 0);
+  const bufferHeight = normalizeCount(heightPixels, 0);
   const pixels: (Pixel | null)[][] = [];
-  for (let y = 0; y < heightPixels; y++) {
-    pixels.push(new Array(width).fill(null));
+  for (let y = 0; y < bufferHeight; y++) {
+    pixels.push(new Array(bufferWidth).fill(null));
   }
-  return { width, height: heightPixels, pixels };
+  return { width: bufferWidth, height: bufferHeight, pixels };
 }
 
 function setPixel(buf: PixelBuffer, x: number, y: number, color: string, layer: number) {
@@ -413,7 +437,7 @@ function drawOhlcChart(
 // Volume bars
 // ---------------------------------------------------------------------------
 
-export function drawVolumeBars(
+function drawVolumeBars(
   buf: PixelBuffer,
   points: ProjectedChartPoint[],
   yTop: number,
@@ -483,7 +507,7 @@ export function drawGridLines(
 // Braille buffer → styled terminal output
 // ---------------------------------------------------------------------------
 
-export function bufferToBrailleLines(buf: PixelBuffer, bgColor: string): StyledContent[] {
+export function bufferToBrailleLines(buf: PixelBuffer): StyledContent[] {
   const lines: StyledContent[] = [];
   const termCols = Math.ceil(buf.width / 2);
   const termRows = Math.ceil(buf.height / 4);
@@ -491,8 +515,8 @@ export function bufferToBrailleLines(buf: PixelBuffer, bgColor: string): StyledC
   for (let row = 0; row < termRows; row++) {
     const chunks: StyledChunk[] = [];
     let runChar = "";
-    let runFg = "";
-    let runBg = "";
+    let runFg: string | undefined;
+    let runBg: string | undefined;
     let runLen = 0;
 
     const flushRun = () => {
@@ -529,13 +553,13 @@ export function bufferToBrailleLines(buf: PixelBuffer, bgColor: string): StyledC
       }
 
       let char: string;
-      let cellFg: string;
-      let cellBg: string;
+      let cellFg: string | undefined;
+      let cellBg: string | undefined;
 
       if (topLayer < 0) {
         char = " ";
-        cellFg = bgColor;
-        cellBg = bgColor;
+        cellFg = undefined;
+        cellBg = undefined;
       } else {
         // Only show dots from the highest layer — keeps lines thin in mixed
         // cells (e.g. area chart where line and fill overlap).
@@ -550,7 +574,7 @@ export function bufferToBrailleLines(buf: PixelBuffer, bgColor: string): StyledC
         }
 
         cellFg = topColor;
-        cellBg = bgColor;
+        cellBg = undefined;
       }
 
       if (char === runChar && cellFg === runFg && cellBg === runBg) {
@@ -599,7 +623,7 @@ function formatPercentAxisValue(value: number): string {
   return `${prefix}${value.toFixed(decimals)}%`;
 }
 
-export function formatPriceWithCurrency(
+function formatPriceWithCurrency(
   value: number,
   currency = "USD",
   assetCategory?: string,
@@ -722,12 +746,6 @@ export function formatCursorAxisValue(
 
 const MONTHS = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
 
-export function formatDate(date: Date | string | number): string {
-  const d = date instanceof Date ? date : new Date(date);
-  if (isNaN(d.getTime())) return "—";
-  return `${MONTHS[d.getMonth()]} ${d.getFullYear()}`;
-}
-
 export function formatDateShort(date: Date | string | number): string {
   const d = date instanceof Date ? date : new Date(date);
   if (isNaN(d.getTime())) return "—";
@@ -901,24 +919,25 @@ function writeAxisLabel(axis: string[], start: number, label: string) {
 }
 
 export function buildTimeAxis(dates: Array<Date | string | number>, width: number): string {
-  if (dates.length === 0 || width <= 0) return "";
+  const axisWidth = normalizeCount(width, 0);
+  if (dates.length === 0 || axisWidth <= 0) return "";
 
   const normalizedDates = dates.map((value) => (value instanceof Date ? value : new Date(value)));
   const first = normalizedDates[0]!;
   const last = normalizedDates[normalizedDates.length - 1]!;
   const rawSpanMs = last.getTime() - first.getTime();
   const spanMs = Math.max(rawSpanMs, 1);
-  const roughLabelCount = Math.max(Math.floor(width / 10), 2);
+  const roughLabelCount = Math.max(Math.floor(axisWidth / 10), 2);
   const minGapMs = getMinPositiveGapMs(normalizedDates);
   const effectiveStepMs = Math.max(spanMs / Math.max(roughLabelCount - 1, 1), minGapMs || 0);
   const unit = resolveAxisLabelUnit(effectiveStepMs);
   const allSameTimestamp = rawSpanMs === 0 && minGapMs === 0;
-  const axis = new Array(width).fill(" ");
+  const axis = new Array(axisWidth).fill(" ");
   const minGap = unit === "year" || unit === "month" ? 2 : 1;
   const idealLabelWidth = estimateAxisLabelWidth(unit, first, last);
   const targetLabelCount = Math.min(
     normalizedDates.length,
-    Math.max(Math.floor(width / (idealLabelWidth + minGap)), 2),
+    Math.max(Math.floor(axisWidth / (idealLabelWidth + minGap)), 2),
   );
   const candidateIndices = [...new Set(
     Array.from({ length: targetLabelCount }, (_, index) => (
@@ -930,33 +949,33 @@ export function buildTimeAxis(dates: Array<Date | string | number>, width: numbe
 
   const firstLabel = formatTimeAxisBoundaryLabel(first, unit, last);
   if (allSameTimestamp) {
-    const centeredStart = resolveCenteredAxisLabelStart(firstLabel, width);
+    const centeredStart = resolveCenteredAxisLabelStart(firstLabel, axisWidth);
     writeAxisLabel(axis, centeredStart, firstLabel);
     return axis.join("");
   }
 
-  const firstStart = resolveAxisLabelStart(0, firstLabel, width);
+  const firstStart = resolveAxisLabelStart(0, firstLabel, axisWidth);
   writeAxisLabel(axis, firstStart, firstLabel);
   const placedLabels = new Set<string>([firstLabel]);
 
   let lastPlacedDate = first;
   let lastEnd = firstStart + firstLabel.length - 1;
 
-  const lastPos = width - 1;
+  const lastPos = axisWidth - 1;
   const lastLabel = normalizedDates.length === 1
     ? firstLabel
     : formatTimeAxisBoundaryLabel(last, unit, first);
-  const lastStart = resolveAxisLabelStart(lastPos, lastLabel, width);
+  const lastStart = resolveAxisLabelStart(lastPos, lastLabel, axisWidth);
   const lastFits = normalizedDates.length === 1 || lastStart > lastEnd + minGap;
 
   for (const index of candidateIndices.slice(1, -1)) {
     const date = normalizedDates[index]!;
     if (isNaN(date.getTime())) continue;
 
-    const pos = Math.round((index / (normalizedDates.length - 1)) * (width - 1));
+    const pos = Math.round((index / (normalizedDates.length - 1)) * (axisWidth - 1));
     const label = formatTimeAxisLabel(date, lastPlacedDate, unit);
     if (placedLabels.has(label)) continue;
-    const start = resolveAxisLabelStart(pos, label, width);
+    const start = resolveAxisLabelStart(pos, label, axisWidth);
     const end = start + label.length - 1;
 
     if (label === axis.slice(start, end + 1).join("")) continue;
@@ -1120,6 +1139,7 @@ export function buildChartScene(
 ): ChartScene | null {
   if (points.length === 0) return null;
 
+  const dimensions = normalizeRenderDimensions(opts);
   const dataMin = opts.mode === "candles" || opts.mode === "ohlc"
     ? Math.min(...points.map((point) => point.low))
     : Math.min(...points.map((point) => point.close));
@@ -1129,43 +1149,42 @@ export function buildChartScene(
   const indicatorValues = getIndicatorOverlayValues(opts.indicators);
   const min = indicatorValues.length > 0 ? Math.min(dataMin, ...indicatorValues) : dataMin;
   const max = indicatorValues.length > 0 ? Math.max(dataMax, ...indicatorValues) : dataMax;
-  const activeIdx = getActivePointIndex(points.length, opts.width, opts.cursorX, opts.mode);
+  const activeIdx = getActivePointIndex(points.length, dimensions.width, opts.cursorX, opts.mode);
   const activePoint = points[activeIdx]!;
   const range = max - min || 1;
-  const chartRows = opts.height - (opts.showVolume ? opts.volumeHeight : 0);
   const cursorX = opts.cursorX === null
     ? null
-    : Math.min(Math.max(opts.cursorX, 0), Math.max(opts.width - 1, 0));
+    : Math.min(Math.max(opts.cursorX, 0), Math.max(dimensions.width - 1, 0));
   const cursorColumn = cursorX === null
     ? null
     : Math.round(cursorX);
   const cursorDotX = cursorX === null
     ? null
-    : Math.round((cursorX / Math.max(opts.width - 1, 1)) * Math.max(opts.width * 2 - 1, 0));
+    : Math.round((cursorX / Math.max(dimensions.width - 1, 1)) * Math.max(dimensions.width * 2 - 1, 0));
   const cursorY = cursorX === null
     ? null
     : opts.cursorY !== null
-      ? Math.min(Math.max(opts.cursorY, 0), Math.max(chartRows - 1, 0))
+      ? Math.min(Math.max(opts.cursorY, 0), Math.max(dimensions.chartRows - 1, 0))
       : Math.min(
-        Math.max(Math.round((1 - (activePoint.close - min) / range) * Math.max(chartRows - 1, 0)), 0),
-        Math.max(chartRows - 1, 0),
+        Math.max(Math.round((1 - (activePoint.close - min) / range) * Math.max(dimensions.chartRows - 1, 0)), 0),
+        Math.max(dimensions.chartRows - 1, 0),
       );
   const cursorRow = cursorY === null
     ? null
     : Math.round(cursorY);
   const crosshairPrice = cursorY === null
     ? null
-    : max - (cursorY / Math.max(chartRows - 1, 1)) * range;
+    : max - (cursorY / Math.max(dimensions.chartRows - 1, 1)) * range;
 
   const timeAxisDates = opts.timeAxisDates ?? points.map((point) => point.date);
 
   return {
     points,
-    width: opts.width,
-    height: opts.height,
-    showVolume: opts.showVolume,
-    volumeHeight: opts.volumeHeight,
-    chartRows,
+    width: dimensions.width,
+    height: dimensions.height,
+    showVolume: dimensions.showVolume,
+    volumeHeight: dimensions.volumeHeight,
+    chartRows: dimensions.chartRows,
     mode: opts.mode,
     colors: opts.colors,
     indicators: opts.indicators ?? null,
@@ -1178,7 +1197,7 @@ export function buildChartScene(
     dateAtCursor: activePoint.date,
     changeAtCursor: activePoint.close - points[0]!.close,
     changePctAtCursor: points[0]!.close ? ((activePoint.close - points[0]!.close) / points[0]!.close) * 100 : 0,
-    timeLabels: buildTimeAxis(timeAxisDates, opts.width),
+    timeLabels: buildTimeAxis(timeAxisDates, dimensions.width),
     cursorX,
     cursorY,
     cursorColumn,
@@ -1246,16 +1265,16 @@ export function renderChart(
     };
   }
 
-  const { width, colors: palette, mode } = opts;
+  const { width, height, showVolume, volumeHeight, colors: palette, mode } = scene;
   const axisMode = opts.axisMode ?? "price";
   const currency = opts.currency ?? "USD";
   const assetCategory = opts.assetCategory;
 
   // Braille resolution: 2 dot-columns per terminal column, 4 dot-rows per terminal row
   const dotWidth = width * 2;
-  const volTermRows = opts.showVolume ? opts.volumeHeight : 0;
-  const chartTermRows = opts.height - volTermRows;
-  const totalDotH = opts.height * 4;
+  const volTermRows = showVolume ? volumeHeight : 0;
+  const chartTermRows = height - volTermRows;
+  const totalDotH = height * 4;
   const chartDotBottom = chartTermRows * 4 - 1;
   const volDotTop = chartTermRows * 4;
   const volDotBottom = totalDotH - 1;
@@ -1297,7 +1316,7 @@ export function renderChart(
       break;
   }
 
-  if (opts.showVolume && volTermRows > 0) {
+  if (showVolume && volTermRows > 0) {
     drawVolumeBars(
       buf,
       points,
@@ -1318,7 +1337,7 @@ export function renderChart(
   const { activePoint, priceAtCursor, crosshairPrice, dateAtCursor, changeAtCursor, changePctAtCursor } = scene;
 
   if (scene.cursorDotX !== null) {
-    drawCrosshair(buf, scene.cursorDotX, 0, opts.showVolume ? volDotBottom : chartDotBottom, palette.crosshairColor);
+    drawCrosshair(buf, scene.cursorDotX, 0, showVolume ? volDotBottom : chartDotBottom, palette.crosshairColor);
   }
 
   const axisLabelsByRow = new Map<number, string>();
@@ -1332,7 +1351,7 @@ export function renderChart(
   const timeAxisDates = opts.timeAxisDates ?? points.map((point) => point.date);
 
   return {
-    lines: bufferToBrailleLines(buf, palette.bgColor),
+    lines: bufferToBrailleLines(buf),
     axisLabels: [...axisLabelsByRow.entries()].map(([row, label]) => ({ row, label })),
     timeLabels: buildTimeAxis(timeAxisDates, width),
     activePoint,
@@ -1348,47 +1367,3 @@ export function renderChart(
     pixelBuffer: buf,
   };
 }
-
-// ---------------------------------------------------------------------------
-// Pixel buffer → RGBA conversion for Kitty graphics protocol
-// ---------------------------------------------------------------------------
-
-function parseHex(hex: string): [number, number, number] {
-  const h = hex.replace("#", "");
-  return [parseInt(h.slice(0, 2), 16), parseInt(h.slice(2, 4), 16), parseInt(h.slice(4, 6), 16)];
-}
-
-/**
- * Convert a PixelBuffer to RGBA pixel data for use with drawSuperSampleBuffer.
- * Each pixel in the buffer maps to one RGBA pixel in the output.
- */
-export function pixelBufferToRGBA(buf: PixelBuffer, bgColor: string): Uint8Array {
-  const [bgR, bgG, bgB] = parseHex(bgColor);
-  const data = new Uint8Array(buf.width * buf.height * 4);
-  const colorCache = new Map<string, [number, number, number]>();
-
-  for (let y = 0; y < buf.height; y++) {
-    for (let x = 0; x < buf.width; x++) {
-      const offset = (y * buf.width + x) * 4;
-      const pixel = buf.pixels[y]?.[x] ?? null;
-      if (pixel) {
-        let rgb = colorCache.get(pixel.color);
-        if (!rgb) {
-          rgb = parseHex(pixel.color);
-          colorCache.set(pixel.color, rgb);
-        }
-        data[offset] = rgb[0];
-        data[offset + 1] = rgb[1];
-        data[offset + 2] = rgb[2];
-        data[offset + 3] = 255;
-      } else {
-        data[offset] = bgR;
-        data[offset + 1] = bgG;
-        data[offset + 2] = bgB;
-        data[offset + 3] = 255;
-      }
-    }
-  }
-
-  return data;
-}

package/src/components/chart/chart-resolution.ts

@@ -9,7 +9,7 @@ export interface ChartResolutionSupport {
 
 export const TIME_RANGE_ORDER: TimeRange[] = ["1D", "1W", "1M", "3M", "6M", "1Y", "5Y", "ALL"];
 
-export const CHART_RESOLUTION_ORDER: ChartResolution[] = [
+const CHART_RESOLUTION_ORDER: ChartResolution[] = [
   "auto",
   "1m",
   "5m",
@@ -22,7 +22,7 @@ export const CHART_RESOLUTION_ORDER: ChartResolution[] = [
   "1mo",
 ];
 
-export const CHART_RESOLUTION_LABELS: Record<ChartResolution, string> = {
+const CHART_RESOLUTION_LABELS: Record<ChartResolution, string> = {
   auto: "AUTO",
   "1m": "1M",
   "5m": "5M",
@@ -35,7 +35,7 @@ export const CHART_RESOLUTION_LABELS: Record<ChartResolution, string> = {
   "1mo": "1MO",
 };
 
-export const RANGE_PRESET_RESOLUTION: Record<TimeRange, ManualChartResolution> = {
+const RANGE_PRESET_RESOLUTION: Record<TimeRange, ManualChartResolution> = {
   "1D": "1m",
   "1W": "5m",
   "1M": "15m",
@@ -46,7 +46,7 @@ export const RANGE_PRESET_RESOLUTION: Record<TimeRange, ManualChartResolution> =
   "ALL": "1mo",
 };
 
-export const RANGE_PRELOAD_BUFFER: Record<TimeRange, TimeRange> = {
+const RANGE_PRELOAD_BUFFER: Record<TimeRange, TimeRange> = {
   "1D": "1W",
   "1W": "1M",
   "1M": "3M",
@@ -113,11 +113,11 @@ function compareTimeRange(left: TimeRange, right: TimeRange): number {
   return getTimeRangeIndex(left) - getTimeRangeIndex(right);
 }
 
-export function isChartResolution(value: unknown): value is ChartResolution {
+function isChartResolution(value: unknown): value is ChartResolution {
   return CHART_RESOLUTION_ORDER.includes(value as ChartResolution);
 }
 
-export function isManualChartResolution(value: unknown): value is ManualChartResolution {
+function isManualChartResolution(value: unknown): value is ManualChartResolution {
   return value !== "auto" && CHART_RESOLUTION_ORDER.includes(value as ChartResolution);
 }
 
@@ -137,7 +137,7 @@ function getManualResolutionOrderIndex(resolution: ManualChartResolution): numbe
   return CHART_RESOLUTION_ORDER.indexOf(resolution);
 }
 
-export function getPresetBufferRange(range: TimeRange): TimeRange {
+function getPresetBufferRange(range: TimeRange): TimeRange {
   return RANGE_PRELOAD_BUFFER[range];
 }
 
@@ -151,7 +151,7 @@ export function sortChartResolutions<T extends ChartResolution>(resolutions: rea
   ));
 }
 
-export function normalizeManualChartResolutions(resolutions: readonly string[]): ManualChartResolution[] {
+function normalizeManualChartResolutions(resolutions: readonly string[]): ManualChartResolution[] {
   const seen = new Set<ManualChartResolution>();
   for (const resolution of resolutions) {
     if (isManualChartResolution(resolution)) {
@@ -169,7 +169,7 @@ export function intersectChartResolutions(resolutionSets: Array<readonly string[
   );
 }
 
-export function sortChartResolutionSupport(support: readonly ChartResolutionSupport[]): ChartResolutionSupport[] {
+function sortChartResolutionSupport(support: readonly ChartResolutionSupport[]): ChartResolutionSupport[] {
   return [...support].sort((left, right) => (
     CHART_RESOLUTION_ORDER.indexOf(left.resolution) - CHART_RESOLUTION_ORDER.indexOf(right.resolution)
   ));
@@ -223,7 +223,7 @@ export function getSupportMaxRange(
   return normalizeChartResolutionSupport(support).find((entry) => entry.resolution === resolution)?.maxRange ?? null;
 }
 
-export function minTimeRange(left: TimeRange, right: TimeRange): TimeRange {
+function minTimeRange(left: TimeRange, right: TimeRange): TimeRange {
   return compareTimeRange(left, right) <= 0 ? left : right;
 }
 

package/src/components/chart/chart-scroll.test.ts

@@ -32,12 +32,13 @@ describe("chart-scroll", () => {
     expect(result.remainder).toBeCloseTo(-0.2);
   });
 
-  test("uses slower pan distances for keyboard and drag input", () => {
+  test("keeps keyboard pan small while matching drag to the visible window", () => {
     expect(getKeyboardPanCellCount(100)).toBe(2);
-    expect(getDragPanPointDelta(10, 100, 200)).toBe(4);
-    expect(getDragPanWindowRatio(10, 100)).toBeCloseTo(0.02);
-    expect(resolveDragPanOffset(20, 10, 100, 200, 40)).toBe(16);
-    expect(resolveDragPanOffset(2, 10, 100, 200, 40)).toBe(0);
+    expect(getDragPanPointDelta(10, 100, 200)).toBe(20);
+    expect(getDragPanWindowRatio(10, 100)).toBeCloseTo(0.1);
+    expect(resolveDragPanOffset(20, 10, 100, 200, 40)).toBe(40);
+    expect(resolveDragPanOffset(20, -10, 100, 200, 40)).toBe(0);
+    expect(resolveDragPanOffset(38, 10, 100, 200, 40)).toBe(40);
   });
 
   test("resolves wheel direction, cell delta, remainder, and ratio together", () => {

package/src/components/chart/chart-scroll.ts

@@ -5,7 +5,7 @@ export type ChartScrollDirection = "up" | "down" | "left" | "right";
 
 const KEYBOARD_PAN_WIDTH_RATIO = 0.02;
 const SCROLL_PAN_WIDTH_RATIO = 0.005;
-const DRAG_PAN_VISIBLE_RATIO = 0.2;
+const DRAG_PAN_VISIBLE_RATIO = 1;
 
 interface BufferExpansionViewState {
   activePreset: TimeRange | null;
@@ -45,7 +45,7 @@ export function resolveDragPanOffset(
   maxPanOffset: number,
 ): number {
   return clamp(
-    startPanOffset - getDragPanPointDelta(deltaCells, chartWidth, visibleCount),
+    startPanOffset + getDragPanPointDelta(deltaCells, chartWidth, visibleCount),
     0,
     Math.max(maxPanOffset, 0),
   );

package/src/components/chart/chart-types.ts

@@ -10,7 +10,6 @@ export type ComparisonChartRenderMode = "area" | "line";
 
 export const TIME_RANGES: TimeRange[] = ["1D", "1W", "1M", "3M", "6M", "1Y", "5Y", "ALL"];
 export const CHART_RENDER_MODES: ChartRenderMode[] = ["area", "line", "candles", "ohlc"];
-export const CHART_AXIS_MODES: ChartAxisMode[] = ["price", "percent"];
 export const CHART_RENDERER_PREFERENCES: ChartRendererPreference[] = ["auto", "kitty", "braille"];
 export const COMPARISON_RENDER_MODES: ComparisonChartRenderMode[] = ["area", "line"];
 

package/src/components/chart/chart-viewport.ts

@@ -1,3 +1,4 @@
+
 const MIN_VISIBLE_POINTS = 2;
 export const RIGHT_EDGE_ANCHOR_RATIO = 1;
 
@@ -5,7 +6,7 @@ function clamp(value: number, min: number, max: number): number {
   return Math.max(min, Math.min(max, value));
 }
 
-export function getMaxChartZoom(totalPoints: number): number {
+function getMaxChartZoom(totalPoints: number): number {
   if (totalPoints <= 0) return 1;
   return Math.max(1, totalPoints / MIN_VISIBLE_POINTS);
 }

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

@@ -349,6 +349,43 @@ describe("renderChart", () => {
     expect(scene?.max).toBe(18);
   });
 
+  test("normalizes fractional web dimensions before drawing volume bars", () => {
+    const projection = projectChartData(chartFixture, 12, "area", false);
+    const result = renderChart(projection.points, {
+      width: 12.5,
+      height: 7.3,
+      showVolume: true,
+      volumeHeight: 3,
+      cursorX: null,
+      cursorY: null,
+      mode: projection.effectiveMode,
+      colors: palette,
+    });
+
+    expect(result.lines).toHaveLength(7);
+    expect(result.pixelBuffer?.width).toBe(24);
+    expect(result.pixelBuffer?.height).toBe(28);
+    expect(result.axisLabels.every((entry) => Number.isInteger(entry.row))).toBe(true);
+  });
+
+  test("keeps terminal chart cells transparent", () => {
+    const projection = projectChartData(chartFixture, 12, "area", false);
+    const result = renderChart(projection.points, {
+      width: 12,
+      height: 5,
+      showVolume: false,
+      volumeHeight: 0,
+      cursorX: null,
+      cursorY: null,
+      mode: projection.effectiveMode,
+      colors: palette,
+    });
+
+    const chunks = result.lines.flatMap((line) => line.chunks);
+    expect(chunks.some((chunk) => chunk.text.trim().length > 0)).toBe(true);
+    expect(chunks.every((chunk) => chunk.bg === undefined)).toBe(true);
+  });
+
   test("keeps one decimal on zoomed equity axes even when whole-dollar ticks are distinct", () => {
     const mediumRangeFixture: PricePoint[] = [
       { date: new Date("2024-01-02T09:30:00Z"), close: 233.82, volume: 100 },

package/src/components/chart/comparison-chart-data.ts

@@ -6,7 +6,6 @@ import type {
   ComparisonChartViewState,
   TimeRange,
 } from "./chart-types";
-import { RANGE_DAYS } from "./chart-types";
 import { getVisiblePointCount, resolveAnchoredChartZoom } from "./chart-viewport";
 
 export interface ComparisonProjectedPoint {
@@ -26,14 +25,14 @@ export interface ComparisonProjectedSeries {
   points: ComparisonProjectedPoint[];
 }
 
-export interface ComparisonVisibleWindow {
+interface ComparisonVisibleWindow {
   dates: Date[];
   startIdx: number;
   endIdx: number;
   totalDates: number;
 }
 
-export interface ComparisonAxisModeResolution {
+interface ComparisonAxisModeResolution {
   requestedAxisMode: ChartAxisMode;
   effectiveAxisMode: ChartAxisMode;
   warning: string | null;
@@ -64,19 +63,6 @@ function normalizeSeriesPoints(points: PricePoint[]): PricePoint[] {
   ));
 }
 
-export function filterComparisonSeriesByTimeRange(
-  series: ComparisonChartSeries[],
-  range: TimeRange,
-): ComparisonChartSeries[] {
-  return series.map((entry) => {
-    const points = normalizeSeriesPoints(entry.points);
-    if (range === "ALL" || points.length <= RANGE_DAYS[range]) {
-      return { ...entry, points };
-    }
-    return { ...entry, points: points.slice(-RANGE_DAYS[range]) };
-  });
-}
-
 function getUniqueSortedDates(series: ComparisonChartSeries[]): Date[] {
   const byTimestamp = new Map<number, Date>();
 
@@ -185,7 +171,7 @@ function buildSeriesMap(points: PricePoint[]): Map<number, number> {
   return map;
 }
 
-export function resolveComparisonAxisMode(
+function resolveComparisonAxisMode(
   requestedAxisMode: ChartAxisMode,
   series: ComparisonChartSeries[],
   visibleDates: Date[],