@mohndoe/pi-atlas 0.1.1

package/src/components/SortedTable.ts

@@ -0,0 +1,221 @@
+import type { Theme } from "@earendil-works/pi-coding-agent";
+import { matchesKey, truncateToWidth, type Component, type TUI } from "@earendil-works/pi-tui";
+import type { CellComponent } from "./cells";
+
+export interface ColumnDef {
+  header: CellComponent;
+  width: number | string;
+}
+
+export interface SortConfig {
+  column: number;
+  direction: "asc" | "desc";
+}
+
+export interface CursorOptions {
+  enabled?: boolean;
+  char?: string;
+}
+
+export interface SortedTableConfig {
+  columns: ColumnDef[];
+  rows: CellComponent[][];
+  maxHeight: number;
+  sort?: SortConfig;
+  cursor?: CursorOptions;
+  /** TUI reference — passed through to cells that need it (e.g. marquee cells). */
+  tui: TUI;
+}
+
+export class SortedTable implements Component {
+  static readonly DEFAULT_CURSOR_CHAR = "▌";
+  static readonly CURSOR_SUFFIX = " ";
+  private columns: ColumnDef[];
+  private rows: CellComponent[][];
+  private maxHeight: number;
+  private theme: Theme;
+  private sort?: SortConfig;
+  private scrollOffset = 0;
+  private focusedRow = -1;
+  private cursorPrefix: string;
+  private padPrefix: string;
+  private tui: TUI;
+
+  constructor(config: SortedTableConfig, theme: Theme) {
+    const fillCount = config.columns.filter((c) => c.width === "fill").length;
+    if (fillCount > 1) throw new Error("Cannot have more than one fill column");
+
+    for (const col of config.columns) {
+      const w = col.width;
+      if (typeof w === "string" && w !== "fill" && !/^\d+%$/.test(w)) {
+        throw new Error(`Invalid column width: "${w}"`);
+      }
+    }
+
+    this.columns = config.columns;
+    this.rows = config.rows;
+    this.maxHeight = config.maxHeight;
+    this.theme = theme;
+    this.sort = config.sort;
+    this.focusedRow = this.rows.length > 0 ? 0 : -1;
+
+    this.tui = config.tui;
+
+    const cursorOpts = config.cursor;
+    const cursorEnabled = cursorOpts?.enabled ?? true;
+    const cursorChar = cursorOpts?.char ?? SortedTable.DEFAULT_CURSOR_CHAR;
+    this.cursorPrefix = cursorEnabled ? cursorChar + SortedTable.CURSOR_SUFFIX : "";
+    this.padPrefix = cursorEnabled ? " ".repeat(this.cursorPrefix.length) : "";
+  }
+
+  private get visibleRows(): number {
+    return Math.max(1, this.maxHeight - 1); // 1 row for header
+  }
+
+  private get maxScroll(): number {
+    return Math.max(0, this.rows.length - this.visibleRows);
+  }
+
+  private resolveWidths(width: number): number[] {
+    const gapCount = this.columns.length - 1;
+    const contentWidth = Math.max(0, width - gapCount);
+
+    const resolved = new Array(this.columns.length).fill(-1);
+    let fixedUsed = 0;
+    let pctUsed = 0;
+    const fillIdx = this.columns.findIndex((c) => c.width === "fill");
+
+    // Pass 1: fixed widths
+    for (let i = 0; i < this.columns.length; i++) {
+      const w = this.columns[i]!.width;
+      if (typeof w === "number") {
+        resolved[i] = w;
+        fixedUsed += w;
+      }
+    }
+
+    // Pass 2: percentage widths
+    for (let i = 0; i < this.columns.length; i++) {
+      if (resolved[i] >= 0) continue;
+      const w = this.columns[i]!.width;
+      if (typeof w === "string" && /^\d+%$/.test(w)) {
+        const pct = parseInt(w) / 100;
+        resolved[i] = Math.floor(contentWidth * pct);
+        pctUsed += resolved[i];
+      }
+    }
+
+    // Pass 3: fill column gets remainder
+    if (fillIdx >= 0) {
+      const remaining = contentWidth - fixedUsed - pctUsed;
+      resolved[fillIdx] = Math.max(1, remaining);
+    }
+
+    // Pass 4: overflow — if total > contentWidth, shrink non-fill proportionally
+    const totalAllocated = resolved.reduce((sum, w) => sum + w, 0);
+    if (totalAllocated > contentWidth) {
+      const scale = contentWidth / totalAllocated;
+      let nonFillSum = 0;
+      for (let i = 0; i < resolved.length; i++) {
+        if (i === fillIdx) continue;
+        resolved[i] = Math.max(1, Math.floor(resolved[i] * scale));
+        nonFillSum += resolved[i];
+      }
+      if (fillIdx >= 0) {
+        resolved[fillIdx] = Math.max(1, contentWidth - nonFillSum);
+      }
+    }
+
+    return resolved;
+  }
+
+  private padToWidth(line: string, width: number): string {
+    return truncateToWidth(line, width, "", true);
+  }
+
+  render(width: number): string[] {
+    const colWidths = this.resolveWidths(width);
+
+    const lines: string[] = [];
+    const gap = " ";
+
+    // Clamp scroll offset
+    if (this.scrollOffset > this.maxScroll) this.scrollOffset = this.maxScroll;
+    if (this.scrollOffset < 0) this.scrollOffset = 0;
+
+    // Header row
+    let header = "";
+    for (let i = 0; i < this.columns.length; i++) {
+      const cw = colWidths[i] ?? width;
+      const sortDirection = this.sort?.column === i ? this.sort.direction : null;
+      const headerText = this.columns[i]!.header.render(cw, { sortDirection });
+      header += truncateToWidth(headerText, cw, "", true) + gap;
+    }
+    header = this.padPrefix + header.trimEnd();
+    header = this.padToWidth(header, width);
+    lines.push(this.theme.bold(this.theme.fg("accent", header)));
+
+    // Data rows
+    const end = Math.min(this.scrollOffset + this.visibleRows, this.rows.length);
+    for (let i = this.scrollOffset; i < end; i++) {
+      let row = "";
+      const dataRow = this.rows[i]!;
+      for (let j = 0; j < this.columns.length; j++) {
+        const c = dataRow[j];
+        if (!c) continue;
+        const cw = colWidths[j] ?? width;
+        const val = c.render(cw, { isFocused: i === this.focusedRow });
+        row += truncateToWidth(val, cw, "", true);
+        if (j < this.columns.length - 1) row += gap;
+      }
+      const prefix = i === this.focusedRow ? this.cursorPrefix : this.padPrefix;
+      row = this.padToWidth(row, width - prefix.length);
+      row = prefix + row;
+      if (i === this.focusedRow) {
+        row = this.theme.bg("selectedBg", row);
+      }
+      lines.push(row);
+    }
+
+    return lines;
+  }
+
+  handleInput(data: string): void {
+    if (matchesKey(data, "up")) {
+      if (this.focusedRow > 0) {
+        this.focusedRow--;
+        this.followFocus();
+        this.invalidate();
+      }
+      return;
+    }
+    if (matchesKey(data, "down")) {
+      if (this.focusedRow < this.rows.length - 1) {
+        this.focusedRow++;
+        this.followFocus();
+        this.invalidate();
+      }
+    }
+  }
+
+  private followFocus(): void {
+    if (this.focusedRow < this.scrollOffset) {
+      this.scrollOffset = this.focusedRow;
+    } else if (this.focusedRow >= this.scrollOffset + this.visibleRows) {
+      this.scrollOffset = this.focusedRow - this.visibleRows + 1;
+    }
+  }
+
+  invalidate(): void {
+    // Propagate to all header cells
+    for (const col of this.columns) {
+      col.header.invalidate();
+    }
+    // Propagate to all data cells
+    for (const row of this.rows) {
+      for (const c of row) {
+        c.invalidate();
+      }
+    }
+  }
+}

package/src/components/StatCard.ts

@@ -0,0 +1,64 @@
+import type { Theme, ThemeColor } from "@earendil-works/pi-coding-agent";
+import { Box, type Component, Text } from "@earendil-works/pi-tui";
+import { type ChalkInstance } from "chalk";
+
+interface Label {
+  text: string;
+  color?: ThemeColor | ChalkInstance;
+}
+
+interface Value {
+  text: string;
+  color: ThemeColor | ChalkInstance;
+}
+
+interface StatCardParams {
+  label: Label;
+  value: Value;
+  paddingX?: number;
+  paddingY?: number;
+}
+
+export class StatCard implements Component {
+  private box: Box;
+  private DEFAULT_PADDING_X = 0;
+  private DEFAULT_PADDING_Y = 0;
+
+  constructor(
+    params: StatCardParams,
+    private theme: Theme,
+  ) {
+    this.box = new Box(
+      params.paddingX || this.DEFAULT_PADDING_X,
+      params.paddingY || this.DEFAULT_PADDING_Y,
+    );
+    this.box.addChild(
+      new Text(
+        params.label.color
+          ? typeof params.label.color === "string"
+            ? this.theme.fg(params.label.color, params.label.text)
+            : params.label.color(params.label.text)
+          : params.label.text,
+        0,
+        0,
+      ),
+    );
+    this.box.addChild(
+      new Text(
+        typeof params.value.color === "string"
+          ? this.theme.fg(params.value.color, params.value.text)
+          : params.value.color(params.value.text),
+        0,
+        0,
+      ),
+    );
+  }
+
+  render(width: number): string[] {
+    return this.box.render(width);
+  }
+
+  invalidate(): void {
+    this.box.invalidate();
+  }
+}

package/src/components/TabBar.ts

@@ -0,0 +1,59 @@
+import { matchesKey, type Component } from "@earendil-works/pi-tui";
+import type { Theme } from "@earendil-works/pi-coding-agent";
+
+export class TabBar implements Component {
+  private tabs: string[];
+  private theme: Theme;
+  activeIndex: number;
+  private cachedLines: string[] | null = null;
+  private cachedWidth = -1;
+
+  constructor(tabs: string[], theme: Theme, activeIndex = 0) {
+    this.tabs = tabs;
+    this.theme = theme;
+    this.activeIndex = activeIndex;
+  }
+
+  render(width: number): string[] {
+    if (this.cachedLines && this.cachedWidth === width) return this.cachedLines;
+
+    const parts: string[] = [];
+    for (let i = 0; i < this.tabs.length; i++) {
+      const label = this.tabs[i];
+      if (i === this.activeIndex) {
+        parts.push(this.theme.bg("selectedBg", this.theme.fg("accent", ` ${label} `)));
+      } else {
+        parts.push(this.theme.fg("muted", ` ${label} `));
+      }
+    }
+
+    let line = parts.join(" ");
+    const visLen = line.replace(/\x1b\[[0-9;]*m/g, "").replace(/<[^>]+>/g, "").length;
+    if (visLen > width) line = line.slice(0, width);
+
+    this.cachedLines = [line];
+    this.cachedWidth = width;
+    return this.cachedLines;
+  }
+
+  handleInput(data: string): void {
+    if (matchesKey(data, "left")) {
+      if (this.activeIndex > 0) {
+        this.activeIndex--;
+        this.invalidate();
+      }
+      return;
+    }
+    if (matchesKey(data, "right")) {
+      if (this.activeIndex < this.tabs.length - 1) {
+        this.activeIndex++;
+        this.invalidate();
+      }
+    }
+  }
+
+  invalidate(): void {
+    this.cachedLines = null;
+    this.cachedWidth = -1;
+  }
+}

package/src/components/UsageRow.ts

@@ -0,0 +1,55 @@
+import type { Theme } from "@earendil-works/pi-coding-agent";
+import { type Component, visibleWidth } from "@earendil-works/pi-tui";
+import type { ChalkInstance } from "chalk";
+import { renderBar } from "./shared/Bar";
+
+export class UsageRow implements Component {
+  constructor(
+    private lang: {
+      name: string;
+      mainValueText: string;
+      secondaryValueText?: string;
+      barPct: number;
+      pct: number;
+    },
+    private color: ChalkInstance,
+    private theme: Theme,
+  ) {}
+
+  render(width: number): string[] {
+    const { name, mainValueText, secondaryValueText } = this.lang;
+    let { barPct, pct } = this.lang;
+
+    barPct = Math.max(0, barPct);
+    pct = Math.max(0, pct);
+
+    // Line 1: name (left) + [secondary(?) - mainStr ] (right)
+    const nameStr = this.theme.bold(name);
+
+    let valueStr = "";
+    if (secondaryValueText) {
+      valueStr += this.theme.fg("muted", secondaryValueText) + " · ";
+    }
+    valueStr += this.theme.bold(mainValueText);
+
+    const firstLineGap = " ".repeat(
+      Math.max(0, width - visibleWidth(nameStr) - visibleWidth(valueStr)),
+    );
+
+    // Line 2: progress bar - [percentage]
+    const pctString = this.theme.fg("dim", `${pct.toFixed(2)}%`);
+    const pctStringWidth = visibleWidth(pctString);
+    const secondLineGap = "  ";
+
+    const barWidth = width - pctStringWidth - visibleWidth(secondLineGap);
+    const bar = renderBar(barWidth, barPct, this.color, (s) => this.theme.fg("dim", s));
+
+    return [
+      nameStr + firstLineGap + valueStr,
+      bar + secondLineGap + pctString,
+      "", // spacer between rows
+    ];
+  }
+
+  invalidate(): void {}
+}

package/src/components/__tests__/Bar.test.ts

@@ -0,0 +1,66 @@
+import { describe, expect, it } from "bun:test";
+import { renderBar } from "../shared/Bar";
+
+describe("renderBar", () => {
+  const filledStyle = (s: string) => s; // identity (no styling)
+  const emptyStyle = (s: string) => s;
+
+  it("renders full bar at 100%", () => {
+    const result = renderBar(10, 100, filledStyle, emptyStyle);
+    expect(result).toBe("■■■■■■■■■■");
+  });
+
+  it("renders empty bar at 0%", () => {
+    const result = renderBar(10, 0, filledStyle, emptyStyle);
+    expect(result).toBe("■■■■■■■■■■"); // all empty (no style difference with identity)
+  });
+
+  it("renders half bar at 50%", () => {
+    // 50% of 10 = 5 filled, 5 empty
+    const filled = (s: string) => `[${s}]`;
+    const empty = (s: string) => `(${s})`;
+    const result = renderBar(10, 50, filled, empty);
+    expect(result).toBe("[■■■■■](■■■■■)");
+  });
+
+  it("applies filled style to filled portion and empty style to empty portion", () => {
+    const filled = (s: string) => `F{${s}}`;
+    const empty = (s: string) => `E{${s}}`;
+    const result = renderBar(8, 75, filled, empty);
+    expect(result).toBe("F{■■■■■■}E{■■}");
+  });
+
+  it("clamps fillPct to 0 when negative", () => {
+    const result = renderBar(10, -20, filledStyle, emptyStyle);
+    expect(result).toBe("■■■■■■■■■■"); // all empty
+  });
+
+  it("clamps fillPct to 100 when above 100", () => {
+    const result = renderBar(10, 200, filledStyle, emptyStyle);
+    expect(result).toBe("■■■■■■■■■■"); // all filled
+  });
+
+  it("clamps fillPct to 100 at exactly 100", () => {
+    const filled = (s: string) => s;
+    const empty = (s: string) => "x".repeat(s.length);
+    const result = renderBar(5, 100, filled, empty);
+    expect(result).toBe("■■■■■"); // all filled, no empty characters
+  });
+
+  it("handles zero width gracefully", () => {
+    const result = renderBar(0, 50, filledStyle, emptyStyle);
+    expect(result).toBe("");
+  });
+
+  it("handles negative width gracefully", () => {
+    const result = renderBar(-5, 50, filledStyle, emptyStyle);
+    expect(result).toBe("");
+  });
+
+  it("rounds fill count to nearest integer", () => {
+    // 33.33% of 30 = 10 filled
+    const result = renderBar(30, 33.33, filledStyle, emptyStyle);
+    expect(result).toHaveLength(30);
+    expect(result.slice(0, 10)).toBe("■■■■■■■■■■");
+  });
+});

package/src/components/__tests__/BarChart.test.ts

@@ -0,0 +1,224 @@
+import { describe, it, expect } from "bun:test";
+import { makeTheme } from "../../__tests__/components.fixtures";
+import { BarChart } from "../BarChart";
+import type { HourSpend } from "../../types";
+
+describe("BarChart", () => {
+  const dailySpend = [
+    { date: "2026-06-01", cost: 1.0 },
+    { date: "2026-06-02", cost: 0.0 },
+    { date: "2026-06-03", cost: 2.5 },
+    { date: "2026-06-04", cost: 0.5 },
+    { date: "2026-06-05", cost: 0.0 },
+    { date: "2026-06-06", cost: 1.2 },
+    { date: "2026-06-07", cost: 3.0 },
+  ];
+
+  it("renders bar chart with X-axis labels", () => {
+    const chart = new BarChart(dailySpend, "7d", 15, makeTheme());
+    const lines = chart.render(80);
+    // Should have some visual output (bars)
+    expect(lines.length).toBeGreaterThan(0);
+    const text = lines.join("\n");
+    // X-axis labels should include day abbreviations
+    expect(text).toContain("Mon");
+  });
+
+  it("renders within width", () => {
+    const chart = new BarChart(dailySpend, "7d", 15, makeTheme());
+    const lines = chart.render(50);
+    for (const line of lines) {
+      expect(line.length).toBeLessThanOrEqual(50);
+    }
+  });
+
+  it("handles empty daily spend", () => {
+    const chart = new BarChart([], "7d", 15, makeTheme());
+    const lines = chart.render(80);
+    expect(lines.length).toBeGreaterThan(0);
+    // Should show empty state or just labels
+    const text = lines.join("\n");
+    expect(text).toContain("No data");
+  });
+
+  it("auto-scales bars to available height", () => {
+    const chart = new BarChart(dailySpend, "7d", 10, makeTheme());
+    const lines = chart.render(80);
+    // Should have at most maxHeight rows of bar content
+    expect(lines.length).toBeLessThanOrEqual(12); // 10 bars + 2 labels
+  });
+
+  it("uses block characters for bars", () => {
+    const chart = new BarChart(dailySpend, "7d", 15, makeTheme());
+    const lines = chart.render(80);
+    const text = lines.join("\n");
+    expect(text).toContain("█");
+  });
+
+  it("30d labels are sparse and fit within width", () => {
+    // Build 30 days of data spanning a month
+    const spend: { date: string; cost: number }[] = [];
+    for (let i = 1; i <= 30; i++) {
+      spend.push({ date: `2026-06-${String(i).padStart(2, "0")}`, cost: i });
+    }
+    const chart = new BarChart(spend, "30d", 10, makeTheme());
+    const lines = chart.render(80);
+    // All lines must fit within width
+    for (const line of lines) {
+      expect(line.length).toBeLessThanOrEqual(80);
+    }
+    // Last line is the label row
+    const labelLine = lines[lines.length - 1]!;
+    const visible = labelLine.replace(/\x1b\[[0-9;]*m/g, "");
+    // Should contain day numbers (first and last day)
+    expect(visible).toContain("1");
+    // At least some numeric labels visible (aggregation may shift which ones)
+    expect(visible).toMatch(/\d/);
+    // Labels should be sparse: not all 30 days get labels
+    const labels = visible.trim().split(/\s+/).filter(Boolean);
+    expect(labels.length).toBeLessThan(30);
+  });
+
+  it("All range labels show month on month change", () => {
+    const spend: { date: string; cost: number }[] = [
+      { date: "2026-01-15", cost: 1 },
+      { date: "2026-02-20", cost: 2 },
+      { date: "2026-03-10", cost: 3 },
+      { date: "2026-03-25", cost: 4 },
+      { date: "2026-04-05", cost: 5 },
+    ];
+    const chart = new BarChart(spend, "All", 10, makeTheme());
+    const lines = chart.render(80);
+    const labelLine = lines[lines.length - 2]!;
+    const visible = labelLine.replace(/\x1b\[[0-9;]*m/g, "");
+    // First entry gets a month label
+    expect(visible).toContain("Jan");
+    // Month changes get labels
+    expect(visible).toContain("Feb");
+    expect(visible).toContain("Mar");
+    expect(visible).toContain("Apr");
+  });
+
+  it("y-axis shows cost labels with separator", () => {
+    const chart = new BarChart(dailySpend, "7d", 15, makeTheme());
+    const lines = chart.render(80);
+    const text = lines.join("\n");
+    // Y-axis has $ labels
+    expect(text).toContain("$0.00");
+    expect(text).toContain("$3.00");
+    // Y-axis separator present
+    expect(text).toContain("│");
+  });
+
+  it("y-axis auto-dense: every row when barAreaH ≤ 6", () => {
+    // barAreaH = maxHeight - 2 = 5, so step=1
+    const chart = new BarChart(dailySpend, "7d", 7, makeTheme());
+    const lines = chart.render(80);
+    const barLines = lines.slice(1, -2); // exclude granularity + x-axis label
+    // All bar rows should have a dot separator or label content
+    for (const line of barLines) {
+      expect(line).toContain("│");
+    }
+  });
+
+  it("y-axis auto-dense: every-other row when barAreaH ≤ 14", () => {
+    // barAreaH = maxHeight - 2 = 10, so step=2
+    const chart = new BarChart(dailySpend, "7d", 12, makeTheme());
+    const lines = chart.render(80);
+    const barLines = lines.slice(1, -2); // exclude granularity + x-axis label
+    // At max cost $3.00, row 8 (80% height) should be $2.40, top row 9 should not have label
+    // But bottom row 0 always has label
+    expect(barLines[barLines.length - 1]).toContain("$0.00");
+    expect(barLines[0]).toMatch(/\$\d/); // top row no label
+  });
+
+  it("y-axis labels are right-aligned", () => {
+    const chart = new BarChart(dailySpend, "7d", 15, makeTheme());
+    const lines = chart.render(80);
+    const text = lines.join("\n");
+    // Labels should have a space before the separator
+    expect(text).toMatch(/  │/);
+  });
+
+  it("still renders within width with y-axis reserved", () => {
+    const chart = new BarChart(dailySpend, "7d", 15, makeTheme());
+    const lines = chart.render(40);
+    for (const line of lines) {
+      expect(line.length).toBeLessThanOrEqual(40);
+    }
+  });
+
+  it("yAxisSpacing overrides auto-density", () => {
+    // barAreaH = 15-2 = 13, auto would be step=2 (every other)
+    // but yAxisSpacing=1 forces every row
+    const chart = new BarChart(dailySpend, "7d", 15, makeTheme(), 1);
+    const lines = chart.render(80);
+    const barLines = lines.slice(1, -2); // exclude granularity + x-axis label
+    // Every bar row should have $ labels (step=1)
+    for (const line of barLines) {
+      expect(line).toContain("$");
+    }
+  });
+
+  it("x-axis has bottom └ corner and ─ filler between labels", () => {
+    const chart = new BarChart(dailySpend, "7d", 15, makeTheme());
+    const lines = chart.render(80);
+    // Last line is the x-axis label row
+    const labelLine = lines[lines.length - 2]!;
+    const visible = labelLine.replace(/\x1b\[[0-9;]*m/g, "");
+    // └ at the y-axis position (corner)
+    expect(visible).toContain("└");
+    // Labels are centered — dashes on both sides
+    expect(visible).toMatch(/─+Mon─+/);
+    expect(visible).toMatch(/─+Tue─+/);
+  });
+
+  it("invalidates cache", () => {
+    const chart = new BarChart(dailySpend, "7d", 15, makeTheme());
+    chart.render(80);
+    chart.invalidate();
+    const lines = chart.render(60);
+    for (const line of lines) {
+      expect(line.length).toBeLessThanOrEqual(60);
+    }
+  });
+
+  describe("hourly mode (1d range)", () => {
+    const hourlySpend: HourSpend[] = Array.from({ length: 24 }, (_, i) => ({
+      hour: i,
+      cost: i === 10 ? 2.5 : i === 14 ? 1.5 : 0,
+    }));
+
+    it("renders 24 bars with hourly labels", () => {
+      const chart = new BarChart([], "1d", 15, makeTheme(), undefined, hourlySpend);
+      const lines = chart.render(120);
+      const text = lines.join("\n");
+      // Should have auto-dense hour labels (at interval determined by width)
+      expect(text).toContain("0h");
+      expect(text).toContain("12h");
+      expect(text).toContain("23h");
+      // Should show cost on y-axis
+      expect(text).toContain("$2.50");
+      expect(text).toContain("Hourly");
+    });
+
+    it("fits within width", () => {
+      const chart = new BarChart([], "1d", 15, makeTheme(), undefined, hourlySpend);
+      const lines = chart.render(80);
+      for (const line of lines) {
+        expect(line.length).toBeLessThanOrEqual(80);
+      }
+    });
+
+    it("downsamples hours on narrow terminals", () => {
+      const chart = new BarChart([], "1d", 10, makeTheme(), undefined, hourlySpend);
+      const lines = chart.render(30);
+      for (const line of lines) {
+        expect(line.length).toBeLessThanOrEqual(30);
+      }
+      // Should still have some hour labels
+      const text = lines.join("\n");
+      expect(text).toContain("h");
+    });
+  });
+});