@mohndoe/pi-atlas 0.1.1

package/src/tabs/__tests__/Languages.test.ts

@@ -0,0 +1,158 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from "bun:test";
+import { makeMockTUI, testPalette, makeTheme } from "../../__tests__/components.fixtures";
+import { Languages } from "../Languages";
+import { type LangStat } from "../../types";
+
+describe("Languages", () => {
+  const mockTui = makeMockTUI();
+
+  const languages: LangStat[] = [
+    { language: "TypeScript", lines: 1500, edits: 45 },
+    { language: "Python", lines: 800, edits: 20 },
+    { language: "JSON", lines: 300, edits: 5 },
+  ];
+
+  it("renders data rows with formatted values", () => {
+    const tab = new Languages(languages, makeTheme(), testPalette(), mockTui, 10);
+    const lines = tab.render(80);
+    const text = lines.join("\n");
+
+    expect(lines[0]).toContain("Languages");
+    expect(lines[0]).toContain(languages.length.toString());
+
+    // Headers
+    expect(text).toContain("Name");
+    expect(text).toContain("Edits");
+    expect(text).toContain("Lines");
+    expect(text).toContain("Share %");
+
+    // Language names
+    expect(text).toContain("TypeScript");
+    expect(text).toContain("Python");
+    expect(text).toContain("JSON");
+
+    // Edits
+    expect(text).toContain("45");
+    expect(text).toContain("20");
+    expect(text).toContain("5");
+
+    // Lines formatted (no suffix)
+    expect(text).toContain("1.5k");
+    expect(text).toContain("800");
+    expect(text).toContain("300");
+  });
+
+  it("shows empty state when languages is empty", () => {
+    const tab = new Languages([], makeTheme(), testPalette(), mockTui, 10);
+
+    const lines = tab.render(80);
+    const text = lines.join("\n");
+
+    expect(lines[0]).toContain("Languages");
+    // don't display 0 counter
+    expect(lines[0]).not.toContain("0");
+
+    expect(text).toContain("No language data for this time range");
+  });
+
+  it("renders within width", () => {
+    const tab = new Languages(languages, makeTheme(), testPalette(), mockTui, 10);
+    const lines = tab.render(50);
+    for (const line of lines) {
+      const visLen = line.replace(/\x1b\[[0-9;]*m/g, "").length;
+      expect(visLen).toBeLessThanOrEqual(50);
+    }
+  });
+
+  it("fill column adapts to width", () => {
+    const tab = new Languages(languages, makeTheme(), testPalette(), mockTui, 10);
+
+    // At width 30, columns shrink — no line exceeds render width
+    const narrowLines = tab.render(30);
+    for (const line of narrowLines) {
+      const visLen = line.replace(/\x1b\[[0-9;]*m/g, "").length;
+      expect(visLen).toBeLessThanOrEqual(30);
+    }
+    // Language column shrinks to ~9-10 chars — "TypeScript" (10 chars) truncates
+    const narrowText = narrowLines.join("\n");
+    expect(narrowText).not.toContain("TypeScript");
+
+    // At width 80, fill column is spacious — full names visible
+    const wideLines = tab.render(80);
+    const wideText = wideLines.join("\n");
+    expect(wideText).toContain("TypeScript");
+    expect(wideText).toContain("1.5k");
+  });
+
+  it("shows sort indicator on Lines column", () => {
+    const tab = new Languages(languages, makeTheme(), testPalette(), mockTui, 10);
+    const lines = tab.render(80);
+    const text = lines.join("\n");
+    // Lines is column 2, sort direction "desc" → ▼
+    expect(text).toContain("Lines ▼");
+  });
+
+  it("invalidates render cache", () => {
+    const tab = new Languages(languages, makeTheme(), testPalette(), mockTui, 10);
+    tab.render(80);
+    tab.invalidate();
+    const lines = tab.render(60);
+    for (const line of lines) {
+      const visLen = line.replace(/\x1b\[[0-9;]*m/g, "").length;
+      expect(visLen).toBeLessThanOrEqual(60);
+    }
+  });
+
+  it("supports re-render after invalidation (lifecycle path)", () => {
+    const tab = new Languages(languages, makeTheme(), testPalette(), mockTui, 10);
+
+    const lines1 = tab.render(80);
+    expect(lines1.join("\n")).toContain("TypeScript");
+
+    tab.invalidate();
+
+    const lines2 = tab.render(80);
+    const text = lines2.join("\n");
+    expect(text).toContain("TypeScript");
+    expect(text).toContain("Lines ▼");
+    for (const line of lines2) {
+      const visLen = line.replace(/\x1b\[[0-9;]*m/g, "").length;
+      expect(visLen).toBeLessThanOrEqual(80);
+    }
+  });
+
+  describe("marquee lifecycle", () => {
+    beforeEach(() => {
+      vi.useFakeTimers();
+    });
+
+    afterEach(() => {
+      vi.useRealTimers();
+    });
+
+    it("clears marquee timers on invalidate", () => {
+      const longNames: LangStat[] = [
+        {
+          language: "TypeScript with a very long name that should overflow",
+          lines: 1500,
+          edits: 45,
+        },
+      ];
+      const tab = new Languages(longNames, makeTheme(), testPalette(), mockTui, 10);
+
+      // Render at narrow width where language name overflows fill column
+      // → MarqueeCell starts timer on focused row
+      tab.render(30);
+      expect(vi.getTimerCount()).toBe(1);
+
+      // Invalidate propagates: Languages → SortedTable → cells → MarqueeCell → clearInterval
+      tab.invalidate();
+      expect(vi.getTimerCount()).toBe(0);
+
+      // Re-render at wider width so fill column has room for the name
+      const lines = tab.render(80);
+      const text = lines.join("\n");
+      expect(text).toContain("TypeScript");
+    });
+  });
+});

package/src/tabs/__tests__/Models.test.ts

@@ -0,0 +1,143 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from "bun:test";
+import { makeMockTUI, makeTheme, testPalette } from "../../__tests__/components.fixtures";
+import { type ModelStat } from "../../types";
+import { Models } from "../Models";
+
+describe("Models", () => {
+  const mockTui = makeMockTUI();
+
+  const models: ModelStat[] = [
+    { model: "claude-sonnet-4-20250514", provider: "anthropic", cost: 150.5, calls: 42 },
+    { model: "gemini-2.5-pro", provider: "Google", cost: 85.25, calls: 28 },
+    { model: "gpt-4o", provider: "OpenAI", cost: 0.75, calls: 5 },
+  ];
+
+  it("renders data rows with formatted model names and costs", () => {
+    const tab = new Models(models, makeTheme(), testPalette(), mockTui, 10);
+    const lines = tab.render(80);
+
+    const text = lines.join("\n");
+
+    expect(lines[0]).toContain("Models");
+    expect(lines[0]).toContain(models.length.toString());
+
+    // formatModelName strips date suffix and capitalizes
+    // Model column is 6-char fill at width 80 — truncated name visible
+    expect(text).toContain("Claude");
+    expect(text).toContain("anthropic");
+    // Row 1 (Gemini) not focused — truncateToWidth shows "Gemin…"
+    expect(text).toContain("Gemin");
+    expect(text).toContain("Google");
+    expect(text).toContain("Gpt 4o");
+    expect(text).toContain("OpenAI");
+    // formatCost
+    expect(text).toContain("$150.5");
+    expect(text).toContain("$0.75");
+  });
+
+  it("shows empty state when models is empty", () => {
+    const tab = new Models([], makeTheme(), testPalette(), mockTui, 10);
+    const lines = tab.render(80);
+    const text = lines.join("\n");
+
+    expect(lines[0]).toContain("Models");
+    // don't display 0 counter
+    expect(lines[0]).not.toContain("0");
+    expect(text).toContain("No model data for this time range");
+  });
+
+  it("renders within width", () => {
+    const tab = new Models(models, makeTheme(), testPalette(), mockTui, 10);
+    const lines = tab.render(50);
+    for (const line of lines) {
+      const visLen = line.replace(/\x1b\[[0-9;]*m/g, "").length;
+      expect(visLen).toBeLessThanOrEqual(50);
+    }
+  });
+
+  it("fill column adapts to width", () => {
+    const tab = new Models(models, makeTheme(), testPalette(), mockTui, 10);
+
+    // At width 18, fill column is small — full model name truncated
+    const narrowLines = tab.render(18);
+    const narrowText = narrowLines.join("\n");
+    expect(narrowText).not.toContain("Claude Sonnet");
+
+    // At width 80, fill column is spacious — full name visible
+    const wideLines = tab.render(80);
+    const wideText = wideLines.join("\n");
+    expect(wideText).toContain("Claude Sonnet");
+  });
+
+  it("shows sort indicator on Cost column", () => {
+    const tab = new Models(models, makeTheme(), testPalette(), mockTui, 10);
+    const lines = tab.render(80);
+    const text = lines.join("\n");
+    // Cost column has sort: { column: 3, direction: "desc" } → ▼
+    expect(text).toContain("Cost ▼");
+  });
+
+  it("invalidates render cache", () => {
+    const tab = new Models(models, makeTheme(), testPalette(), mockTui, 10);
+    tab.render(80); // cache at width 80
+    tab.invalidate();
+    const lines = tab.render(60); // should re-render at new width
+    for (const line of lines) {
+      const visLen = line.replace(/\x1b\[[0-9;]*m/g, "").length;
+      expect(visLen).toBeLessThanOrEqual(60);
+    }
+  });
+
+  it("supports re-render after invalidation (lifecycle path)", () => {
+    const tab = new Models(models, makeTheme(), testPalette(), mockTui, 10);
+
+    // First render cycle — creates table
+    const lines1 = tab.render(80);
+    expect(lines1.join("\n")).toContain("Claude");
+
+    // Invalidate — simulates Dashboard.buildTabs() lifecycle cleanup
+    tab.invalidate();
+
+    // Second render cycle — creates new table from clean state
+    const lines2 = tab.render(80);
+    const text = lines2.join("\n");
+    expect(text).toContain("Claude");
+    expect(text).toContain("Cost ▼");
+    for (const line of lines2) {
+      const visLen = line.replace(/\x1b\[[0-9;]*m/g, "").length;
+      expect(visLen).toBeLessThanOrEqual(80);
+    }
+  });
+
+  describe("marquee lifecycle", () => {
+    beforeEach(() => {
+      vi.useFakeTimers();
+    });
+
+    afterEach(() => {
+      vi.useRealTimers();
+    });
+
+    it("clears marquee timers on invalidate (Models→SortedTable→cells chain)", () => {
+      const longModels: ModelStat[] = [
+        { model: "claude-sonnet-4-20250514", provider: "anthropic", cost: 150.5, calls: 42 },
+      ];
+      const tab = new Models(longModels, makeTheme(), testPalette(), mockTui, 10);
+
+      // Render at narrow width where "Claude Sonnet 4 20250514" overflows fill column
+      // → MarqueeCell starts timer on focused row
+      tab.render(30);
+      expect(vi.getTimerCount()).toBe(1);
+
+      // Invalidate propagates: Models → SortedTable → cells → MarqueeCell → clearInterval
+      tab.invalidate();
+      expect(vi.getTimerCount()).toBe(0);
+
+      // Re-render still produces clean output (fill col ~2 chars, provider ~7 chars at width 30)
+      const lines = tab.render(30);
+      const text = lines.join("\n");
+      expect(text).toContain("C"); // first char of "Claude Sonnet 4"
+      expect(text).toContain("anthr"); // provider truncated to ~5 chars at width 30
+    });
+  });
+});

package/src/tabs/__tests__/Overview.test.ts

@@ -0,0 +1,92 @@
+import { describe, it, expect } from "bun:test";
+import { makeTheme } from "../../__tests__/components.fixtures";
+import { Overview } from "../Overview";
+import { type StatsSummary } from "../../types";
+import { makeSummary } from "../../__tests__/compute.fixtures";
+
+describe("Overview", () => {
+  const mockSummary: StatsSummary = {
+    ...makeSummary(),
+    totalCost: 12.34,
+    sessionCount: 42,
+    totalMessages: 1500,
+    totalTokens: 250000,
+    daysActive: 7,
+    avgCostPerDay: 1.76,
+    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 KpiCards followed by spacer followed by BarChart", () => {
+    const overview = new Overview(mockSummary, "7d", makeTheme(), 15);
+    const lines = overview.render(80);
+
+    // Should have KPI + spacer + chart
+    expect(lines.length).toBeGreaterThanOrEqual(3);
+
+    const text = lines.join("\n");
+    // KPI metrics present
+    expect(text).toContain("12.34");
+    expect(text).toContain("42");
+    // Chart bars present
+    expect(text).toContain("█");
+
+    // Verify order: KPI lines before spacer before chart bars
+    // Find first occurrence of spacer (empty line) after KPI content
+    const kpiCostIdx = lines.findIndex(
+      (l) => l.includes("12.34") || l.includes("$12.34") || l.includes("Total"),
+    );
+    const spacerIdx = lines.findIndex((l) => l.trim() === "");
+    expect(spacerIdx).toBeGreaterThan(kpiCostIdx);
+
+    // Chart content (█ or label) should appear after the spacer
+    const chartIdx = lines.findIndex(
+      (l, i) => i > spacerIdx && (l.includes("█") || l.includes("No data") || l.includes("Mon")),
+    );
+    expect(chartIdx).toBeGreaterThan(spacerIdx);
+  });
+
+  it("adapts bar chart height to available space after KpiCards", () => {
+    // Use a small maxHeight to verify chart still renders
+    const overview = new Overview(mockSummary, "7d", makeTheme(), 10);
+    const lines = overview.render(80);
+
+    // Chart should still render (not zero lines)
+    const text = lines.join("\n");
+    expect(text).toContain("█");
+    // Should have spacer before chart
+    expect(lines.some((l) => l.trim() === "")).toBe(true);
+  });
+
+  it("shows 'No data' when daily spend is empty", () => {
+    const summary: StatsSummary = {
+      ...mockSummary,
+      dailySpend: [],
+    };
+    const overview = new Overview(summary, "7d", makeTheme(), 15);
+    const lines = overview.render(80);
+
+    const text = lines.join("\n");
+    expect(text).toContain("No data");
+    // KPI cards still render
+    expect(text).toContain("Total");
+  });
+
+  it("invalidate clears cache and re-renders at new width", () => {
+    const overview = new Overview(mockSummary, "7d", makeTheme(), 15);
+    overview.render(80);
+    overview.invalidate();
+
+    const lines = overview.render(60);
+    for (const line of lines) {
+      expect(line.length).toBeLessThanOrEqual(60);
+    }
+  });
+});

package/src/tabs/__tests__/Projects.test.ts

@@ -0,0 +1,142 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from "bun:test";
+import { makeMockTUI, makeTheme } from "../../__tests__/components.fixtures";
+import { type ProjectStat } from "../../types";
+import { Projects } from "../Projects";
+
+describe("Projects", () => {
+  const mockTui = makeMockTUI();
+
+  const projects: ProjectStat[] = [
+    { project: "pi-atlas", cost: 15.5, sessions: 42 },
+    { project: "dotfiles", cost: 8.2, sessions: 20 },
+    { project: "sandbox", cost: 1.25, sessions: 5 },
+  ];
+
+  it("renders data rows with formatted costs", () => {
+    const tab = new Projects(projects, makeTheme(), mockTui, 10);
+    const lines = tab.render(80);
+    const text = lines.join("\n");
+
+    expect(lines[0]).toContain("Projects");
+    expect(lines[0]).toContain(projects.length.toString());
+
+    // Headers
+    expect(text).toContain("Name");
+    expect(text).toContain("Sessions");
+    expect(text).toContain("Cost");
+    expect(text).toContain("Share %");
+
+    // Project names
+    expect(text).toContain("pi-atlas");
+    expect(text).toContain("dotfiles");
+    expect(text).toContain("sandbox");
+
+    // Sessions
+    expect(text).toContain("42");
+    expect(text).toContain("20");
+    expect(text).toContain("5");
+
+    // Costs formatted
+    expect(text).toContain("$15.50");
+    expect(text).toContain("$8.20");
+    expect(text).toContain("$1.25");
+  });
+
+  it("shows empty state when projects is empty", () => {
+    const tab = new Projects([], makeTheme(), mockTui, 10);
+    const lines = tab.render(80);
+    const text = lines.join("\n");
+
+    expect(lines[0]).toContain("Projects");
+    // don't display 0 counter
+    expect(lines[0]).not.toContain("0");
+    expect(text).toContain("No projects data for this time range");
+  });
+
+  it("renders within width", () => {
+    const tab = new Projects(projects, makeTheme(), mockTui, 10);
+    const lines = tab.render(50);
+    for (const line of lines) {
+      const visLen = line.replace(/\x1b\[[0-9;]*m/g, "").length;
+      expect(visLen).toBeLessThanOrEqual(50);
+    }
+  });
+
+  it("fill column adapts to width", () => {
+    const tab = new Projects(projects, makeTheme(), mockTui, 10);
+
+    // At width 30, columns shrink — no line exceeds render width
+    const narrowLines = tab.render(30);
+    for (const line of narrowLines) {
+      const visLen = line.replace(/\x1b\[[0-9;]*m/g, "").length;
+      expect(visLen).toBeLessThanOrEqual(30);
+    }
+
+    const wideLines = tab.render(80);
+    const wideText = wideLines.join("\n");
+    expect(wideText).toContain("pi-atlas");
+  });
+
+  it("shows sort indicator on Cost column", () => {
+    const tab = new Projects(projects, makeTheme(), mockTui, 10);
+    const lines = tab.render(80);
+    const text = lines.join("\n");
+    expect(text).toContain("Cost ▼");
+  });
+
+  it("invalidates render cache", () => {
+    const tab = new Projects(projects, makeTheme(), mockTui, 10);
+    tab.render(80);
+    tab.invalidate();
+    const lines = tab.render(60);
+    for (const line of lines) {
+      const visLen = line.replace(/\x1b\[[0-9;]*m/g, "").length;
+      expect(visLen).toBeLessThanOrEqual(60);
+    }
+  });
+
+  it("supports re-render after invalidation (lifecycle path)", () => {
+    const tab = new Projects(projects, makeTheme(), mockTui, 10);
+
+    const lines1 = tab.render(80);
+    expect(lines1.join("\n")).toContain("pi-atlas");
+
+    tab.invalidate();
+
+    const lines2 = tab.render(80);
+    const text = lines2.join("\n");
+    expect(text).toContain("pi-atlas");
+    expect(text).toContain("Cost ▼");
+    for (const line of lines2) {
+      const visLen = line.replace(/\x1b\[[0-9;]*m/g, "").length;
+      expect(visLen).toBeLessThanOrEqual(80);
+    }
+  });
+
+  describe("marquee lifecycle", () => {
+    beforeEach(() => {
+      vi.useFakeTimers();
+    });
+
+    afterEach(() => {
+      vi.useRealTimers();
+    });
+
+    it("clears marquee timers on invalidate", () => {
+      const longProjects: ProjectStat[] = [
+        { project: "a-very-long-project", cost: 15.5, sessions: 42 },
+      ];
+      const tab = new Projects(longProjects, makeTheme(), mockTui, 10);
+
+      tab.render(30);
+      expect(vi.getTimerCount()).toBe(1);
+
+      tab.invalidate();
+      expect(vi.getTimerCount()).toBe(0);
+
+      const lines = tab.render(80);
+      const text = lines.join("\n");
+      expect(text).toContain("a-very-long-project");
+    });
+  });
+});