@mohndoe/pi-atlas 0.1.1

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

@@ -0,0 +1,62 @@
+import { describe, expect, it } from "bun:test";
+import { makeTheme } from "../../__tests__/components.fixtures";
+import { TabBar } from "../TabBar";
+
+describe("TabBar", () => {
+  const tabs = ["Overview", "Languages", "Models", "Projects + Tools"];
+
+  it("renders all tab names", () => {
+    const tb = new TabBar(tabs, makeTheme(), 0);
+    const lines = tb.render(80);
+    expect(lines).toHaveLength(1);
+    const line = lines[0];
+    for (const tab of tabs) {
+      expect(line).toContain(tab);
+    }
+  });
+
+  it("renders within width", () => {
+    const tb = new TabBar(tabs, makeTheme(), 0);
+    const lines = tb.render(40);
+    expect(lines).toHaveLength(1);
+    expect(lines[0]!.length).toBeLessThanOrEqual(40);
+  });
+
+  it("highlights the active tab", () => {
+    const tb = new TabBar(tabs, makeTheme(), 2);
+    const lines = tb.render(80);
+    // Models tab (index 2) should stand out from the others
+    expect(lines[0]).toContain("Models");
+  });
+
+  it("moves active tab left with handleInput", () => {
+    const tb = new TabBar(tabs, makeTheme(), 2);
+    tb.handleInput("\x1b[D"); // left arrow
+    expect((tb as { activeIndex: number }).activeIndex).toBe(1);
+
+    tb.handleInput("\x1b[D");
+    expect((tb as { activeIndex: number }).activeIndex).toBe(0);
+
+    // Wraps around? Or stays at 0?
+    tb.handleInput("\x1b[D");
+    expect((tb as { activeIndex: number }).activeIndex).toBe(0); // stays
+  });
+
+  it("moves active tab right with handleInput", () => {
+    const tb = new TabBar(tabs, makeTheme(), 2);
+    tb.handleInput("\x1b[C"); // right arrow
+    expect((tb as { activeIndex: number }).activeIndex).toBe(3);
+
+    tb.handleInput("\x1b[C");
+    expect((tb as { activeIndex: number }).activeIndex).toBe(3); // stays
+  });
+
+  it("invalidates render cache", () => {
+    const tb = new TabBar(tabs, makeTheme(), 0);
+    tb.render(80);
+    tb.invalidate();
+    // After invalidate, next render should recompute
+    const lines = tb.render(60); // different width → should still work
+    expect(lines[0]!.length).toBeLessThanOrEqual(60);
+  });
+});

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

@@ -0,0 +1,193 @@
+import { truncateToWidth } from "@earendil-works/pi-tui";
+import { afterEach, beforeEach, describe, expect, it, vi } from "bun:test";
+import { makeMockTUI } from "../../__tests__/components.fixtures";
+import { cell } from "../cells";
+
+describe("cell.text", () => {
+  it("renders content truncated to width", () => {
+    const c = cell.text("Hello World");
+    const result = c.render(5);
+    expect(result).toBe(truncateToWidth("Hello World", 5, ""));
+  });
+
+  it("returns exact line when content fits within width", () => {
+    const c = cell.text("Hi");
+    const result = c.render(10);
+    expect(result).toBe(truncateToWidth("Hi", 10, ""));
+  });
+
+  it("handles empty content", () => {
+    const c = cell.text("");
+    const result = c.render(10);
+    expect(result).toBe("");
+  });
+
+  it("handles zero width", () => {
+    const c = cell.text("Hello");
+    const result = c.render(0);
+    expect(result).toBe("");
+  });
+});
+
+describe("cell.header", () => {
+  it("appends ▲ when sortDirection is asc", () => {
+    const c = cell.header("Name");
+    const result = c.render(10, { sortDirection: "asc" });
+    expect(result).toBe(truncateToWidth("Name", 8, "") + " ▲");
+  });
+
+  it("appends ▼ when sortDirection is desc", () => {
+    const c = cell.header("Name");
+    const result = c.render(10, { sortDirection: "desc" });
+    expect(result).toBe(truncateToWidth("Name", 8, "") + " ▼");
+  });
+
+  it("appends nothing when sortDirection is null", () => {
+    const c = cell.header("Name");
+    const result = c.render(10, { sortDirection: null });
+    expect(result).toBe(truncateToWidth("Name", 10, ""));
+  });
+
+  it("truncates content to fit indicator when narrow", () => {
+    const c = cell.header("VeryLongColumnName");
+    const result = c.render(10, { sortDirection: "desc" });
+    expect(result).toBe(truncateToWidth("VeryLongColumnName", 8, "") + " ▼");
+  });
+
+  it("handles narrow width with no indicator", () => {
+    const c = cell.header("Hello World");
+    const result = c.render(5);
+    expect(result).toBe(truncateToWidth("Hello World", 5, ""));
+  });
+});
+
+describe("cell.marquee", () => {
+  let tui: ReturnType<typeof makeMockTUI>;
+
+  beforeEach(() => {
+    vi.useFakeTimers();
+    tui = makeMockTUI();
+  });
+
+  afterEach(() => {
+    vi.useRealTimers();
+  });
+
+  it("shows scrolling content when focused", () => {
+    const c = cell.marquee("Hello World", tui);
+    const result = c.render(5, { isFocused: true });
+    // tick=0, offset=0 → first 5 chars
+    expect(result).toBe("Hello");
+  });
+
+  it("shows ellipsis when unfocused with overflow", () => {
+    const c = cell.marquee("Hello World", tui);
+    const result = c.render(5);
+    expect(result).toBe(truncateToWidth("Hello World", 5, "…"));
+  });
+
+  it("shows full content when unfocused without overflow", () => {
+    const c = cell.marquee("Hi", tui);
+    const result = c.render(10);
+    expect(result).toBe("Hi");
+  });
+
+  it("clears interval on invalidate", () => {
+    const c = cell.marquee("Hello World", tui);
+    c.render(5, { isFocused: true }); // starts timer
+    expect(vi.getTimerCount()).toBe(1);
+    c.invalidate();
+    expect(vi.getTimerCount()).toBe(0);
+  });
+
+  it("creates new marquee on render after invalidate", () => {
+    const c = cell.marquee("Hello World", tui);
+    c.render(5, { isFocused: true });
+    c.invalidate();
+    // After invalidate, focused render should start fresh
+    const result = c.render(5, { isFocused: true });
+    expect(result).toBe("Hello");
+  });
+
+  it("advances marquee tick via timer", () => {
+    const c = cell.marquee("Hello World", tui);
+    c.render(5, { isFocused: true }); // tick=0
+
+    vi.advanceTimersByTime(150); // 1 tick
+    const result = c.render(5, { isFocused: true });
+    expect(result).toBe("ello ");
+  });
+
+  it("handles empty content", () => {
+    const c = cell.marquee("", tui);
+    const result = c.render(5, { isFocused: true });
+    expect(result).toBe("");
+  });
+
+  it("invalidate does not throw when no marquee has been created", () => {
+    const c = cell.marquee("Hello", tui);
+    expect(() => c.invalidate()).not.toThrow();
+  });
+});
+
+describe("cell.bar", () => {
+  it("renders bar filling the requested width", () => {
+    const c = cell.bar(
+      50,
+      (s) => s,
+      (s) => "░".repeat(s.length),
+    );
+    const result = c.render(10);
+    expect(result).toHaveLength(10);
+    expect(result).toBe("■■■■■░░░░░");
+  });
+
+  it("uses filled style for filled portion", () => {
+    const c = cell.bar(
+      100,
+      (s) => `F{${s}}`,
+      (s) => "e".repeat(s.length),
+    );
+    const result = c.render(5);
+    expect(result).toBe("F{■■■■■}");
+  });
+
+  it("uses empty style for empty portion", () => {
+    const c = cell.bar(
+      0,
+      (s) => "f".repeat(s.length),
+      (s) => `E{${s}}`,
+    );
+    const result = c.render(5);
+    expect(result).toBe("E{■■■■■}");
+  });
+
+  it("handles zero width", () => {
+    const c = cell.bar(
+      50,
+      (s) => s,
+      (s) => "░".repeat(s.length),
+    );
+    const result = c.render(0);
+    expect(result).toBe("");
+  });
+
+  it("handles 100% fill with no empty chars", () => {
+    const c = cell.bar(
+      100,
+      (s) => `F{${s}}`,
+      (s) => "E".repeat(s.length),
+    );
+    const result = c.render(8);
+    expect(result).toBe("F{■■■■■■■■}");
+  });
+
+  it("invalidate does nothing (no internal cache)", () => {
+    const c = cell.bar(
+      50,
+      (s) => s,
+      (s) => "░".repeat(s.length),
+    );
+    expect(() => c.invalidate()).not.toThrow();
+  });
+});

package/src/components/cells.ts

@@ -0,0 +1,108 @@
+import type { TUI } from "@earendil-works/pi-tui";
+import { truncateToWidth } from "@earendil-works/pi-tui";
+import { MarqueeText } from "./MarqueeText";
+import { renderBar } from "./shared/Bar";
+
+export interface CellState {
+  isFocused?: boolean;
+  sortDirection?: "asc" | "desc" | null;
+}
+
+export interface CellComponent {
+  render(width: number, state?: CellState): string;
+  invalidate(): void;
+}
+
+class TextCell implements CellComponent {
+  constructor(private content: string) {}
+
+  render(width: number, _state?: CellState): string {
+    return truncateToWidth(this.content, width, "");
+  }
+
+  invalidate(): void {
+    // No internal cache
+  }
+}
+
+class HeaderCell implements CellComponent {
+  constructor(private content: string) {}
+
+  render(width: number, state?: CellState): string {
+    const indicator =
+      state?.sortDirection === "asc" ? " ▲" : state?.sortDirection === "desc" ? " ▼" : "";
+    const contentWidth = Math.max(0, width - indicator.length);
+    const truncated = truncateToWidth(this.content, contentWidth, "");
+    return truncated + indicator;
+  }
+
+  invalidate(): void {
+    // No internal cache
+  }
+}
+
+class MarqueeCell implements CellComponent {
+  private marquee: MarqueeText | undefined;
+
+  constructor(
+    private content: string,
+    private tui: TUI,
+  ) {}
+
+  render(width: number, state?: CellState): string {
+    if ((state?.isFocused ?? false) && this.content.length > width) {
+      if (!this.marquee) {
+        this.marquee = new MarqueeText(this.content, this.tui);
+      }
+      return this.marquee.render(width)[0]!;
+    }
+
+    // Unfocused or content fits — truncate with ellipsis
+    return truncateToWidth(this.content, width, "…");
+  }
+
+  invalidate(): void {
+    if (this.marquee) {
+      this.marquee.destroy();
+      this.marquee = undefined;
+    }
+  }
+}
+
+class BarCell implements CellComponent {
+  constructor(
+    private fillPct: number,
+    private filledStyle: (text: string) => string,
+    private emptyStyle: "transparent" | ((text: string) => string),
+  ) {}
+
+  render(width: number, _state?: CellState): string {
+    return renderBar(width, this.fillPct, this.filledStyle, this.emptyStyle);
+  }
+
+  invalidate(): void {
+    // No internal cache
+  }
+}
+
+export const cell = {
+  text(content: string): CellComponent {
+    return new TextCell(content);
+  },
+
+  header(content: string): CellComponent {
+    return new HeaderCell(content);
+  },
+
+  marquee(content: string, tui: TUI): CellComponent {
+    return new MarqueeCell(content, tui);
+  },
+
+  bar(
+    fillPct: number,
+    filledStyle: (text: string) => string,
+    emptyStyle: "transparent" | ((text: string) => string),
+  ): CellComponent {
+    return new BarCell(fillPct, filledStyle, emptyStyle);
+  },
+};

package/src/components/shared/Bar.ts

@@ -0,0 +1,22 @@
+/**
+ * Render a horizontal bar using ■ characters.
+ *
+ * @param width  Total character width for the bar
+ * @param fillPct  Fill percentage (0–100, clamped)
+ * @param filledStyle  Styling function for the filled portion (e.g. chalk.green)
+ * @param emptyStyle  Styling function for the empty/unfilled portion (e.g. s => theme.fg("dim", s))
+ */
+export function renderBar(
+  width: number,
+  fillPct: number,
+  filledStyle: (text: string) => string,
+  emptyStyle: "transparent" | ((text: string) => string),
+): string {
+  const clamped = Math.max(0, Math.min(100, fillPct));
+  const filledCount = Math.round((clamped / 100) * Math.max(0, width));
+  const emptyCount = Math.max(0, width - filledCount);
+  return (
+    filledStyle("■".repeat(filledCount)) +
+    (emptyStyle !== "transparent" ? emptyStyle("■".repeat(emptyCount)) : " ".repeat(emptyCount))
+  );
+}

package/src/components/shared/GridRow.ts

@@ -0,0 +1,22 @@
+import { type Component } from "@earendil-works/pi-tui";
+
+export class GridRow implements Component {
+  constructor(
+    private children: Component[],
+    private cols: number[],
+  ) {}
+  // cols = [33, 33, 33] meaning % widths, or absolute chars
+
+  render(width: number): string[] {
+    const colWidths = this.cols.map((c) => Math.floor((width * c) / 100));
+    const rendered = this.children.map((c, i) => c.render(colWidths[i]!));
+    const maxLines = Math.max(...rendered.map((r) => r.length));
+    return Array.from({ length: maxLines }, (_, i) =>
+      rendered.map((r, j) => (r[i] ?? "").padEnd(colWidths[j]!)).join(""),
+    );
+  }
+
+  invalidate(): void {
+    this.children.forEach((c) => c.invalidate?.());
+  }
+}

package/src/compute.ts

@@ -0,0 +1,210 @@
+import { dateFromISOString } from "./format";
+import type {
+  DayAgg,
+  DaySpend,
+  HourSpend,
+  LangStat,
+  ModelStat,
+  ProjectStat,
+  StatsSummary,
+  TimeRange,
+  ToolStat,
+} from "./types";
+
+function daysInRange(days: DayAgg[], range: TimeRange): DayAgg[] {
+  if (range === "All") return days;
+
+  const todayStr = dateFromISOString(new Date().toISOString());
+
+  if (range === "1d") {
+    return days.filter((d) => d.date === todayStr);
+  }
+
+  // Build cutoff as a Date, then convert back to ISO string for comparison
+  const cutoff = new Date(todayStr + "T00:00:00Z");
+  if (range === "7d") {
+    cutoff.setUTCDate(cutoff.getUTCDate() - 6);
+  } else if (range === "30d") {
+    cutoff.setUTCDate(cutoff.getUTCDate() - 29);
+  }
+
+  const cutoffStr = cutoff.toISOString().slice(0, 10);
+  return days.filter((d) => d.date >= cutoffStr);
+}
+
+function fillDailySpend(days: DayAgg[], range: TimeRange): DaySpend[] {
+  if (days.length === 0) return [];
+
+  const sorted = [...days].sort((a, b) => a.date.localeCompare(b.date));
+
+  if (range === "All") {
+    return sorted.map((d) => ({ date: d.date, cost: d.cost }));
+  }
+
+  // For bounded ranges, zero-fill gaps
+  const first = sorted[0]!.date;
+  const last = sorted[sorted.length - 1]!.date;
+
+  const spendMap = new Map<string, number>();
+  for (const d of sorted) spendMap.set(d.date, d.cost);
+
+  const result: DaySpend[] = [];
+  const d = new Date(first + "T00:00:00Z");
+  const end = new Date(last + "T00:00:00Z");
+
+  while (d <= end) {
+    const ds = d.toISOString().slice(0, 10);
+    result.push({ date: ds, cost: spendMap.get(ds) ?? 0 });
+    d.setUTCDate(d.getUTCDate() + 1);
+  }
+
+  return result;
+}
+
+function buildHourlySpend(filtered: DayAgg[], range: TimeRange): HourSpend[] {
+  if (range !== "1d" || filtered.length !== 1) return [];
+
+  const day = filtered[0]!;
+  const hourly: HourSpend[] = [];
+  for (let h = 0; h < 24; h++) {
+    hourly.push({ hour: h, cost: day.hourCost[h] ?? 0 });
+  }
+  return hourly;
+}
+
+export function summarize(days: DayAgg[], range: TimeRange): StatsSummary {
+  const filtered = daysInRange(days, range);
+
+  const todayStr = dateFromISOString(new Date().toISOString());
+  let todayCost = 0;
+
+  let totalCost = 0;
+  let sessionCount = 0;
+  let totalMessages = 0;
+  let totalTokens = 0;
+  let totalInputTokens = 0;
+  let totalOutputTokens = 0;
+  let totalCacheReadTokens = 0;
+  let totalCacheWriteTokens = 0;
+  const allSessions = new Set<string>();
+
+  // accumulators
+  const langLines: Record<string, number> = {};
+  const langEdits: Record<string, number> = {};
+  const modelCost: Record<string, number> = {};
+  const modelCount: Record<string, number> = {};
+  const providerCost: Record<string, number> = {};
+  const providerCount: Record<string, number> = {};
+  const projectCost: Record<string, number> = {};
+  const projectSessions: Record<string, Set<string>> = {};
+  const toolCount: Record<string, number> = {};
+
+  let modelToProvider: Map<string, string> = new Map();
+
+  for (const day of filtered) {
+    totalCost += day.cost;
+    totalMessages += day.userMsgs + day.asstMsgs + day.toolResults;
+    totalTokens += day.inTok + day.outTok + day.crTok + day.cwTok;
+    totalInputTokens += day.inTok;
+    totalOutputTokens += day.outTok;
+    totalCacheReadTokens += day.crTok;
+    totalCacheWriteTokens += day.cwTok;
+
+    modelToProvider = new Map([
+      ...(modelToProvider.size > 0 ? modelToProvider.entries() : []),
+      ...(day.modelToProvider.size > 0 ? day.modelToProvider.entries() : []),
+    ]);
+
+    if (day.date === todayStr) todayCost += day.cost;
+
+    for (const id of day.sessionIds) allSessions.add(id);
+    sessionCount = allSessions.size;
+
+    // merge languages
+    for (const [lang, lines] of Object.entries(day.langLines)) {
+      langLines[lang] = (langLines[lang] ?? 0) + lines;
+    }
+    for (const [lang, edits] of Object.entries(day.langEdits)) {
+      langEdits[lang] = (langEdits[lang] ?? 0) + edits;
+    }
+
+    // merge models
+    for (const [model, cost] of Object.entries(day.modelCost)) {
+      modelCost[model] = (modelCost[model] ?? 0) + cost;
+    }
+    for (const [model, count] of Object.entries(day.modelCount)) {
+      modelCount[model] = (modelCount[model] ?? 0) + count;
+    }
+
+    // merge providers
+    for (const [provider, cost] of Object.entries(day.providerCost)) {
+      providerCost[provider] = (providerCost[provider] ?? 0) + cost;
+    }
+    for (const [provider, count] of Object.entries(day.providerCount)) {
+      providerCount[provider] = (providerCount[provider] ?? 0) + count;
+    }
+
+    // merge projects
+    for (const [proj, cost] of Object.entries(day.projectCost)) {
+      projectCost[proj] = (projectCost[proj] ?? 0) + cost;
+    }
+    for (const [proj, sessions] of Object.entries(day.projectSessions)) {
+      if (!projectSessions[proj]) projectSessions[proj] = new Set();
+      for (const s of sessions) projectSessions[proj].add(s);
+    }
+
+    // merge tools
+    for (const [tool, count] of Object.entries(day.toolCount)) {
+      toolCount[tool] = (toolCount[tool] ?? 0) + count;
+    }
+  }
+
+  const daysActive = filtered.filter((d) => d.sessionIds.size > 0).length;
+  const avgCostPerDay = daysActive > 0 ? totalCost / daysActive : 0;
+
+  // build sorted result arrays
+  const languages: LangStat[] = Object.entries(langLines)
+    .map(([language, lines]) => ({ language, lines, edits: langEdits[language] ?? 0 }))
+    .sort((a, b) => b.lines - a.lines);
+
+  const models: ModelStat[] = Object.entries(modelCost)
+    .map(([model, cost]) => ({
+      provider: modelToProvider.get(model) || undefined,
+      model,
+      cost,
+      calls: modelCount[model] ?? 0,
+    }))
+    .sort((a, b) => b.calls - a.calls)
+    .sort((a, b) => b.cost - a.cost);
+
+  const projects: ProjectStat[] = Object.entries(projectCost)
+    .map(([project, cost]) => ({ project, cost, sessions: projectSessions[project]?.size ?? 0 }))
+    .sort((a, b) => b.sessions - a.sessions)
+    .sort((a, b) => b.cost - a.cost);
+
+  const tools: ToolStat[] = Object.entries(toolCount)
+    .map(([tool, count]) => ({ name: tool, count }))
+    .sort((a, b) => b.count - a.count);
+
+  const hourlySpend = buildHourlySpend(filtered, range);
+
+  return {
+    totalCost,
+    sessionCount,
+    totalMessages,
+    totalTokens,
+    totalInputTokens,
+    totalOutputTokens,
+    totalCacheReadTokens,
+    totalCacheWriteTokens,
+    daysActive,
+    avgCostPerDay,
+    todayCost,
+    languages,
+    models,
+    projects,
+    tools,
+    dailySpend: fillDailySpend(filtered, range),
+    hourlySpend,
+  };
+}