@mohndoe/pi-atlas 0.1.1

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

@@ -0,0 +1,110 @@
+import { describe, expect, it } from "bun:test";
+import chalk from "chalk";
+import { makeTheme } from "../../__tests__/components.fixtures";
+import { RankedBarList } from "../RankedBarList";
+
+describe("RankedBarList", () => {
+  it("renders a single item with 100% bar width", () => {
+    const theme = makeTheme();
+    const list = new RankedBarList(
+      [
+        {
+          name: "TypeScript",
+          primaryValue: 100,
+          mainValueText: "100 ln",
+          secondaryValueText: "5 edits",
+          color: chalk.green,
+        },
+      ],
+      theme,
+    );
+    const lines = list.render(80);
+    expect(lines.length).toBe(3); // name+value, bar+%, spacer
+    const text = lines.join("\n");
+    expect(text).toContain("TypeScript");
+    expect(text).toContain("100 ln");
+    expect(text).toContain("5 edits");
+    expect(text).toContain("100.00%");
+  });
+
+  it("returns empty array for empty items", () => {
+    const list = new RankedBarList([], makeTheme());
+    expect(list.render(80)).toEqual([]);
+  });
+
+  it("computes proportional bars for multiple items", () => {
+    const list = new RankedBarList(
+      [
+        { name: "Python", primaryValue: 60, mainValueText: "60 ln", color: chalk.blue },
+        { name: "Rust", primaryValue: 40, mainValueText: "40 ln", color: chalk.red },
+      ],
+      makeTheme(),
+    );
+    const lines = list.render(80);
+    const text = lines.join("\n");
+    // Python should be 60% and 100% bar, Rust should be 40% and 66.67% bar
+    expect(text).toContain("60.00%");
+    expect(text).toContain("40.00%");
+    expect(text).toContain("Python");
+    expect(text).toContain("Rust");
+    expect(lines.length).toBe(6); // 2 items × 3 lines each
+  });
+
+  it("renders without secondary value", () => {
+    const list = new RankedBarList(
+      [{ name: "bash", primaryValue: 10, mainValueText: "10", color: chalk.white }],
+      makeTheme(),
+    );
+    const lines = list.render(80);
+    const text = lines.join("\n");
+    expect(text).toContain("bash");
+    expect(text).toContain("10");
+  });
+
+  it("renders 0% bars when all primaryValues are zero", () => {
+    const list = new RankedBarList(
+      [
+        { name: "Empty1", primaryValue: 0, mainValueText: "0", color: chalk.gray },
+        { name: "Empty2", primaryValue: 0, mainValueText: "0", color: chalk.gray },
+      ],
+      makeTheme(),
+    );
+    const lines = list.render(80);
+    const text = lines.join("\n");
+    expect(text).toContain("0.00%");
+    // Should not crash with division by zero
+    expect(lines.length).toBe(6);
+  });
+
+  it("caches rendered output for same width", () => {
+    const list = new RankedBarList(
+      [{ name: "Rust", primaryValue: 50, mainValueText: "50 ln", color: chalk.red }],
+      makeTheme(),
+    );
+    const lines1 = list.render(80);
+    const lines2 = list.render(80);
+    expect(lines1).toBe(lines2); // same reference (cached)
+  });
+
+  it("re-renders when width changes", () => {
+    const list = new RankedBarList(
+      [{ name: "Rust", primaryValue: 50, mainValueText: "50 ln", color: chalk.red }],
+      makeTheme(),
+    );
+    const lines1 = list.render(80);
+    const lines2 = list.render(40);
+    expect(lines1).not.toBe(lines2);
+  });
+
+  it("invalidates cache", () => {
+    const list = new RankedBarList(
+      [{ name: "Rust", primaryValue: 50, mainValueText: "50 ln", color: chalk.red }],
+      makeTheme(),
+    );
+    list.render(80);
+    list.invalidate();
+    const lines = list.render(80);
+    // Should render (not throw), tested by the fact it returns 3 lines
+    expect(lines.length).toBe(3);
+  });
+});

package/src/components/__tests__/SortedTable.integration.test.ts

@@ -0,0 +1,228 @@
+/**
+ * Integration test: Dashboard → Models → SortedTable keyboard interaction.
+ */
+import { afterEach, beforeEach, describe, expect, it, vi } from "bun:test";
+import { makeMockTUI, makeRangeSelector, makeTheme } from "../../__tests__/components.fixtures";
+import { makeSummary } from "../../__tests__/compute.fixtures";
+import { Dashboard } from "../Dashboard";
+import { SortedTable } from "../SortedTable";
+import { allRanges, mapAllSummaries } from "./Dashboard.test";
+import type { StatsSummary, TimeRange } from "../../types";
+
+const CURSOR = SortedTable.DEFAULT_CURSOR_CHAR;
+const mockTui = makeMockTUI();
+
+const strip = (s: string) => s.replace(/\x1b\[[0-9;]*m/g, "");
+
+describe("Dashboard → Models → SortedTable arrow key integration", () => {
+  /** Check if any line contains cursor and a model name substring. */
+  function cursorOnModel(lines: string[], model: string): boolean {
+    return lines.some((l) => l.includes(CURSOR) && l.includes(model));
+  }
+
+  it("initial cursor on first model", () => {
+    const summary = {
+      ...makeSummary(),
+      models: [
+        { model: "alpha-model", cost: 10, calls: 100, provider: "p1" },
+        { model: "beta-model", cost: 5, calls: 50, provider: "p2" },
+      ],
+    };
+    const dash = new Dashboard(
+      mapAllSummaries(allRanges, summary),
+      makeTheme(),
+      mockTui,
+      null,
+      makeRangeSelector(makeTheme()),
+    );
+
+    // Navigate to Models tab
+    dash.handleInput("\x1b[C"); // → Languages
+    dash.handleInput("\x1b[C"); // → Models
+    const lines = dash.render(80);
+
+    // Model column is 6-char fill at width 80 — only first word visible
+    expect(cursorOnModel(lines, "Alpha")).toBe(true);
+    expect(cursorOnModel(lines, "Beta")).toBe(false);
+  });
+
+  it("down arrow moves cursor to next row via Dashboard dispatch", () => {
+    const summary = {
+      ...makeSummary(),
+      models: [
+        { model: "alpha-model", cost: 10, calls: 100, provider: "p1" },
+        { model: "beta-model", cost: 5, calls: 50, provider: "p2" },
+        { model: "gamma-model", cost: 1, calls: 10, provider: "p3" },
+      ],
+    };
+    const dash = new Dashboard(
+      mapAllSummaries(allRanges, summary),
+      makeTheme(),
+      mockTui,
+      null,
+      makeRangeSelector(makeTheme()),
+    );
+
+    dash.handleInput("\x1b[C"); // → Languages
+    dash.handleInput("\x1b[C"); // → Models
+    dash.render(80);
+
+    // Press down
+    dash.handleInput("\x1b[B");
+    const lines = dash.render(80);
+    // Cursor moves from row 0 to row 1
+    expect(cursorOnModel(lines, "Beta")).toBe(true);
+    expect(cursorOnModel(lines, "Alpha")).toBe(false);
+  });
+
+  it("up arrow moves cursor up", () => {
+    const summary = {
+      ...makeSummary(),
+      models: [
+        { model: "alpha-model", cost: 10, calls: 100, provider: "p1" },
+        { model: "beta-model", cost: 5, calls: 50, provider: "p2" },
+        { model: "gamma-model", cost: 1, calls: 10, provider: "p3" },
+      ],
+    };
+    const dash = new Dashboard(
+      mapAllSummaries(allRanges, summary),
+      makeTheme(),
+      mockTui,
+      null,
+      makeRangeSelector(makeTheme()),
+    );
+
+    dash.handleInput("\x1b[C"); // → Languages
+    dash.handleInput("\x1b[C"); // → Models
+    dash.render(80);
+
+    // Move down twice, then back up once
+    dash.handleInput("\x1b[B");
+    dash.handleInput("\x1b[B");
+    dash.handleInput("\x1b[A");
+    const lines = dash.render(80);
+
+    expect(cursorOnModel(lines, "Beta")).toBe(true);
+    expect(cursorOnModel(lines, "Alpha")).toBe(false);
+    expect(cursorOnModel(lines, "Gamma")).toBe(false);
+  });
+
+  it("arrow keys work across range switches", () => {
+    const summary1d = {
+      ...makeSummary(),
+      models: [{ model: "alpha-model", cost: 1, calls: 10, provider: "p1" }],
+    };
+    const summaryAll = {
+      ...makeSummary(),
+      models: [
+        { model: "alpha-model", cost: 10, calls: 100, provider: "p1" },
+        { model: "beta-model", cost: 5, calls: 50, provider: "p2" },
+        { model: "gamma-model", cost: 1, calls: 10, provider: "p3" },
+      ],
+    };
+
+    const summaries: Map<TimeRange, StatsSummary> = new Map([
+      ["1d", summary1d],
+      ["7d", summaryAll],
+      ["30d", summaryAll],
+      ["All", summaryAll],
+    ]);
+    const dash = new Dashboard(
+      summaries,
+      makeTheme(),
+      mockTui,
+      null,
+      makeRangeSelector(makeTheme()),
+    );
+
+    // Navigate to Models, switch to 1d
+    dash.handleInput("\x1b[C"); // → Languages
+    dash.handleInput("\x1b[C"); // → Models
+    dash.handleInput("r"); // All → 1d
+    let lines = dash.render(80);
+    // 1d: only Alpha Model
+    expect(cursorOnModel(lines, "Alpha")).toBe(true);
+
+    // Switch back to All
+    // Current range index = 0 (1d), need to cycle to 3 (All)
+    // r → 1, r → 2, r → 3
+    dash.handleInput("r");
+    dash.handleInput("r");
+    dash.handleInput("r");
+
+    // tabIndex is still 2 (Models) — no need to re-navigate.
+    // buildTabs was called on each r, creating a new SortedTable with cursor at row 0.
+    lines = dash.render(80);
+
+    // 3 models now. Move down twice.
+    dash.handleInput("\x1b[B");
+    dash.handleInput("\x1b[B");
+    lines = dash.render(80);
+
+    expect(cursorOnModel(lines, "Gamma")).toBe(true);
+  });
+
+  // FIX:
+  // describe("marquee animation persists across render cycles", () => {
+  //   beforeEach(() => {
+  //     vi.useFakeTimers();
+  //   });
+  //
+  //   afterEach(() => {
+  //     vi.useRealTimers();
+  //   });
+  //
+  //   /** Extract the full visible text of the focused row. */
+  //   function focusedRowText(lines: string[]): string {
+  //     for (const line of lines) {
+  //       if (line.includes(CURSOR)) {
+  //         return strip(line);
+  //       }
+  //     }
+  //     return "";
+  //   }
+  //
+  //   it("marquee advances on successive renders (not stuck at offset 0)", () => {
+  //     // A model name long enough to overflow the ~27-char Model column at width=80
+  //     const longModel = "A-Very-Long-Model-Name-That-Overflows-And-Should-Scroll";
+  //     const summary = {
+  //       ...makeSummary(),
+  //       models: [{ model: longModel, cost: 10, calls: 100, provider: "p1" }],
+  //     };
+  //     const dash = new Dashboard(
+  //       mapAllSummaries(allRanges, summary),
+  //       makeTheme(),
+  //       mockTui,
+  //       null,
+  //       makeRangeSelector(makeTheme()),
+  //     );
+  //
+  //     // Navigate to Models tab
+  //     dash.handleInput("\x1b[C"); // → Languages
+  //     dash.handleInput("\x1b[C"); // → Models
+  //
+  //     // First render — marquee starts at offset 0
+  //     let lines = dash.render(80);
+  //     // Model column is 6-char fill — marquee starts at offset 0
+  //     const render1 = focusedRowText(lines);
+  //     expect(render1).toContain("A Very");
+  //
+  //     // Advance 150ms = 1 timer tick → marquee text should scroll
+  //     vi.advanceTimersByTime(150);
+  //     lines = dash.render(80);
+  //     const render2 = focusedRowText(lines);
+  //     expect(render2).not.toBe("");
+  //
+  //     // Content must have scrolled — slice differs from render1
+  //     expect(render2).not.toBe(render1);
+  //
+  //     // Advance another 150ms = 2nd tick → should scroll again
+  //     vi.advanceTimersByTime(150);
+  //     lines = dash.render(80);
+  //     const render3 = focusedRowText(lines);
+  //     expect(render3).not.toBe("");
+  //     expect(render3).not.toBe(render1);
+  //     expect(render3).not.toBe(render2);
+  //   });
+  // });
+});