@mohndoe/pi-atlas 0.1.1 → 0.1.3

package/src/tabs/{__tests__/Models.test.ts → Models.test.ts}

@@ -1,7 +1,7 @@
 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";
+import { makeMockTUI, makeTheme, testPalette } from "../components/components.fixtures";
+import { type ModelStat } from "../types";
+import { Models } from "./Models";
 
 describe("Models", () => {
   const mockTui = makeMockTUI();
@@ -19,7 +19,6 @@ describe("Models", () => {
     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
@@ -41,8 +40,6 @@ describe("Models", () => {
     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");
   });
 

package/src/tabs/Models.ts

@@ -36,10 +36,8 @@ export class Models extends Container {
     const totalCost = this.models.reduce((sum, item) => sum + item.cost, 0);
     const maxCost = Math.max(...this.models.map((m) => m.cost), 0);
     this.rows = this.models.map((m) => {
-      let pct = 0;
       let barPct = 0;
       if (totalCost > 0) {
-        pct = (m.cost * 100) / totalCost;
         barPct = maxCost > 0 ? (m.cost / maxCost) * 100 : 0;
       }
       return [
@@ -62,8 +60,8 @@ export class Models extends Container {
       const bb = new BorderBox({
         ...baseBorderBoxOptions,
         titles: [
-          { text: "Models", align: "left" },
-          { text: this.theme.fg("dim", formatNumber(this.models.length)), align: "right" },
+          { text: this.theme.bold("Models"), align: "left" },
+          { text: this.theme.fg("muted", "by cost"), align: "right" },
         ],
       });
       if (!this.table) {

package/src/tabs/{__tests__/Overview.test.ts → Overview.test.ts}

@@ -1,8 +1,9 @@
-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";
+import { visibleWidth } from "@earendil-works/pi-tui";
+import { describe, expect, it } from "bun:test";
+import { makeTheme } from "../components/components.fixtures";
+import { makeSummary } from "../compute.fixtures";
+import { type StatsSummary } from "../types";
+import { Overview } from "./Overview";
 
 describe("Overview", () => {
   const mockSummary: StatsSummary = {
@@ -24,7 +25,7 @@ describe("Overview", () => {
     ],
   };
 
-  it("renders KpiCards followed by spacer followed by BarChart", () => {
+  it("renders KpiCards followed by BarChart", () => {
     const overview = new Overview(mockSummary, "7d", makeTheme(), 15);
     const lines = overview.render(80);
 
@@ -43,14 +44,12 @@ describe("Overview", () => {
     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
+    // Chart content (█ or label) should appear after the KPIs
     const chartIdx = lines.findIndex(
-      (l, i) => i > spacerIdx && (l.includes("█") || l.includes("No data") || l.includes("Mon")),
+      (l) => l.includes("█") || l.includes("No data") || l.includes("Mon"),
     );
-    expect(chartIdx).toBeGreaterThan(spacerIdx);
+    expect(chartIdx).toBeGreaterThan(kpiCostIdx);
   });
 
   it("adapts bar chart height to available space after KpiCards", () => {
@@ -61,8 +60,6 @@ describe("Overview", () => {
     // 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", () => {
@@ -81,12 +78,18 @@ describe("Overview", () => {
 
   it("invalidate clears cache and re-renders at new width", () => {
     const overview = new Overview(mockSummary, "7d", makeTheme(), 15);
-    overview.render(80);
+
+    const linesBefore = overview.render(80);
+    for (const line of linesBefore) {
+      expect(visibleWidth(line)).toBeLessThanOrEqual(80);
+      expect(visibleWidth(line)).toBeGreaterThanOrEqual(78);
+    }
     overview.invalidate();
 
     const lines = overview.render(60);
     for (const line of lines) {
-      expect(line.length).toBeLessThanOrEqual(60);
+      expect(visibleWidth(line)).toBeLessThanOrEqual(60);
+      expect(visibleWidth(line)).toBeGreaterThanOrEqual(58);
     }
   });
 });

package/src/tabs/Overview.ts

@@ -6,7 +6,7 @@ import { BarChart } from "../components/BarChart";
 import { KpiCards, type KpiData } from "../components/KpiCards";
 import { GridRow } from "../components/shared/GridRow";
 import { StatCard } from "../components/StatCard";
-import { formatCost, formatNumber } from "../format";
+import { formatCost, formatModelName, formatNumber } from "../format";
 import { type StatsSummary, type TimeRange } from "../types";
 
 const SPACER_HEIGHT = 1;
@@ -39,65 +39,76 @@ export class Overview extends Container {
     const topProject = summary.projects[0];
 
     const langBox = new BorderBox({
+      borderStyle: "heavy",
       titles: [{ text: this.theme.bold("Top Language"), align: "left" }],
+      footers: topLanguage
+        ? [
+            {
+              text: this.theme.fg("muted", formatNumber(topLanguage.lines) + " ln"),
+              align: "right",
+            },
+          ]
+        : [],
       padding: { left: 1, right: 1 },
       borderFn: topLanguage
         ? langPalette.getColor(topLanguage.language)
         : (s: string) => this.theme.fg("borderMuted", s),
     });
     langBox.addChild(
-      topLanguage
-        ? new StatCard(
-            {
-              label: { text: topLanguage.language },
-              value: {
-                text: this.theme.bold(formatNumber(topLanguage.lines) + " lines"),
-                color: "text",
-              },
-            },
-            this.theme,
-          )
-        : new Text("No data"),
+      new Text(
+        topLanguage ? this.theme.fg("text", topLanguage.language) : this.theme.fg("dim", "No data"),
+        0,
+        0,
+      ),
     );
 
     const modelBox = new BorderBox({
+      borderStyle: "heavy",
       titles: [{ text: this.theme.bold("Top model"), align: "left" }],
+      footers: topModel
+        ? [
+            {
+              text: this.theme.fg("muted", formatCost(topModel.cost)),
+              align: "right",
+            },
+          ]
+        : [],
       padding: { left: 1, right: 1 },
-      borderFn: modelPalette.getColor(topModel?.provider || ""),
+      borderFn: topModel
+        ? modelPalette.getColor(topModel.provider || "")
+        : (s: string) => this.theme.fg("borderMuted", s),
     });
     modelBox.addChild(
-      topModel
-        ? new StatCard(
-            {
-              label: { text: topModel.model },
-              value: {
-                text: this.theme.bold(formatCost(topModel.cost)),
-                color: "text",
-              },
-            },
-            this.theme,
-          )
-        : new Text("No data."),
+      new Text(
+        topModel
+          ? this.theme.fg("text", formatModelName(topModel.model))
+          : this.theme.fg("dim", "No data"),
+        0,
+        0,
+      ),
     );
 
     const projectBox = new BorderBox({
+      borderStyle: "heavy",
       titles: [{ text: this.theme.bold("Top project"), align: "left" }],
+      footers: topProject
+        ? [
+            {
+              text: this.theme.fg("muted", formatCost(topProject.cost)),
+              align: "right",
+            },
+          ]
+        : [],
       padding: { left: 1, right: 1 },
-      borderFn: (s: string) => this.theme.fg("borderMuted", s),
+      borderFn: (s: string) => this.theme.fg("text", s),
     });
+
     projectBox.addChild(
-      topProject
-        ? new StatCard(
-            {
-              label: { text: topProject.project },
-              value: {
-                text: this.theme.bold(formatCost(topProject.cost)),
-                color: "text",
-              },
-            },
-            this.theme,
-          )
-        : new Text("No data."),
+      new Text(
+        topProject ? this.theme.fg("text", topProject.project) : this.theme.fg("dim", "No data"),
+        0,
+        0,
+      ),
     );
 
     this.topCards = new GridRow([langBox, modelBox, projectBox], [33, 33, 34]);

package/src/tabs/{__tests__/Projects.test.ts → Projects.test.ts}

@@ -1,7 +1,7 @@
 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";
+import { makeMockTUI, makeTheme } from "../components/components.fixtures";
+import { type ProjectStat } from "../types";
+import { Projects } from "./Projects";
 
 describe("Projects", () => {
   const mockTui = makeMockTUI();
@@ -18,7 +18,6 @@ describe("Projects", () => {
     const text = lines.join("\n");
 
     expect(lines[0]).toContain("Projects");
-    expect(lines[0]).toContain(projects.length.toString());
 
     // Headers
     expect(text).toContain("Name");
@@ -37,8 +36,8 @@ describe("Projects", () => {
     expect(text).toContain("5");
 
     // Costs formatted
-    expect(text).toContain("$15.50");
-    expect(text).toContain("$8.20");
+    expect(text).toContain("$15.5");
+    expect(text).toContain("$8.2");
     expect(text).toContain("$1.25");
   });
 
@@ -48,8 +47,6 @@ describe("Projects", () => {
     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");
   });
 

package/src/tabs/Projects.ts

@@ -29,9 +29,14 @@ export class Projects extends Container {
   /** Build row cells once in constructor. Data is stable per Projects instance. */
   private buildRows(): void {
     if (this.isEmpty) return;
+
+    const totalCost = this.projects.reduce((sum, item) => sum + item.cost, 0);
     const maxCost = Math.max(...this.projects.map((p) => p.cost), 0);
     this.rows = this.projects.map((p) => {
-      const barPct = maxCost > 0 ? (p.cost / maxCost) * 100 : 0;
+      let barPct = 0;
+      if (totalCost > 0) {
+        barPct = maxCost > 0 ? (p.cost / maxCost) * 100 : 0;
+      }
       return [
         cell.marquee(p.project, this.tui),
         cell.bar(barPct, (s) => s, "transparent"),
@@ -47,13 +52,13 @@ export class Projects extends Container {
     const borderBoxOptions: BorderBoxOptions = {
       borderStyle: "singleRounded",
       borderFn: (s) => this.theme.fg("border", s),
-      titles: [{ text: "Projects", align: "left" }],
+      titles: [{ text: this.theme.bold("Projects"), align: "left" }],
     };
     let borderBox = new BorderBox(borderBoxOptions);
     if (!this.isEmpty) {
       borderBoxOptions.titles = [
         ...borderBoxOptions.titles!,
-        { text: this.theme.fg("dim", formatNumber(this.projects.length)), align: "right" },
+        { text: this.theme.fg("muted", "by cost"), align: "right" },
       ];
       if (!this.table) {
         this.table = new SortedTable(
@@ -62,7 +67,7 @@ export class Projects extends Container {
               { header: cell.header("Name"), width: 20 },
               { header: cell.header("Share %"), width: "fill" },
               { header: cell.header("Sessions"), width: 14 },
-              { header: cell.header("Cost"), width: 8 },
+              { header: cell.header("Cost"), width: 10 },
             ],
             rows: this.rows,
             maxHeight: this.maxHeight,

package/src/tabs/{__tests__/Usage.test.ts → Usage.test.ts}

@@ -1,7 +1,7 @@
 import { afterEach, beforeEach, describe, expect, it, vi } from "bun:test";
-import { makeMockTUI, makeTheme } from "../../__tests__/components.fixtures";
-import { type ToolStat } from "../../types";
-import { Usage } from "../Usage";
+import { makeMockTUI, makeTheme } from "../components/components.fixtures";
+import type { ToolStat } from "../types";
+import { Usage } from "./Usage";
 
 describe("Usage", () => {
   const mockTui = makeMockTUI();
@@ -25,11 +25,11 @@ describe("Usage", () => {
     const text = tab.render(80).join("\n");
 
     expect(text).toContain("Tokens");
-    expect(text).toContain("10.0k");
+    expect(text).toContain("10k");
     expect(text).toContain("Input");
-    expect(text).toContain("5.0k");
+    expect(text).toContain("5k");
     expect(text).toContain("Output");
-    expect(text).toContain("4.0k");
+    expect(text).toContain("4k");
     expect(text).toContain("Cache Read");
     expect(text).toContain("500");
     expect(text).toContain("Cache Write");
@@ -42,7 +42,6 @@ describe("Usage", () => {
     const text = lines.join("\n");
 
     expect(lines[0]).toContain("Tools");
-    expect(lines[0]).toContain(tools.length.toString());
 
     // Headers
     expect(text).toContain("Command");
@@ -60,21 +59,12 @@ describe("Usage", () => {
     expect(text).toContain("45");
   });
 
-  it("does NOT show 'Tool Calls' title", () => {
-    const tab = new Usage(tools, tokenUsage, makeTheme(), mockTui, 10);
-    const text = tab.render(80).join("\n");
-
-    expect(text).not.toContain("Tool Calls");
-  });
-
   it("shows empty state when tools is empty", () => {
     const tab = new Usage([], tokenUsage, makeTheme(), mockTui, 10);
     const lines = tab.render(80).slice(4);
     const text = lines.join("\n");
 
     expect(lines[0]).toContain("Tools");
-    // don't display 0 counter
-    expect(lines[0]).not.toContain("0");
     expect(text).toContain("No tools data for this time range");
   });
 
@@ -138,8 +128,8 @@ describe("Usage", () => {
     expect(text).toContain("Command");
     expect(text).toContain("Calls ▼");
     // Token section still intact
-    expect(text).toContain("5.0k");
-    expect(text).toContain("4.0k");
+    expect(text).toContain("5k");
+    expect(text).toContain("4k");
 
     for (const line of lines2) {
       const visLen = line.replace(/\x1b\[[0-9;]*m/g, "").length;

package/src/tabs/Usage.ts

@@ -47,9 +47,13 @@ export class Usage extends Container {
   /** Build row cells once in constructor. */
   private buildRows(): void {
     if (this.isEmpty) return;
+    const totalCount = this.tools.reduce((sum, item) => sum + item.count, 0);
     const maxCount = Math.max(...this.tools.map((t) => t.count), 0);
     this.rows = this.tools.map((t) => {
-      const barPct = maxCount > 0 ? (t.count / maxCount) * 100 : 0;
+      let barPct = 0;
+      if (totalCount > 0) {
+        barPct = maxCount > 0 ? (t.count / maxCount) * 100 : 0;
+      }
       return [
         cell.marquee(stripAnsi(t.name).slice(0, TOOL_NAME_MAX_LENGTH), this.tui),
         cell.bar(barPct, (s) => s, "transparent"),
@@ -132,7 +136,7 @@ export class Usage extends Container {
     const borderBoxOptions: BorderBoxOptions = {
       borderStyle: "singleRounded",
       borderFn: (s) => this.theme.fg("border", s),
-      titles: [{ text: "Tools", align: "left" }],
+      titles: [{ text: this.theme.bold("Tools"), align: "left" }],
     };
 
     let borderBox = new BorderBox(borderBoxOptions);
@@ -141,7 +145,7 @@ export class Usage extends Container {
     if (!this.isEmpty) {
       borderBoxOptions.titles = [
         ...borderBoxOptions.titles!,
-        { text: this.theme.fg("dim", formatNumber(this.rows.length)), align: "right" },
+        { text: this.theme.fg("muted", "by calls"), align: "right" },
       ];
 
       if (!this.table) {

package/src/types.ts

@@ -63,6 +63,12 @@ export interface ToolStat {
   count: number;
 }
 
+export interface ProviderStat {
+  provider: string;
+  cost: number;
+  calls: number;
+}
+
 export interface StatsSummary {
   totalCost: number;
   sessionCount: number;
@@ -79,6 +85,11 @@ export interface StatsSummary {
   models: ModelStat[];
   projects: ProjectStat[];
   tools: ToolStat[];
+  providers: ProviderStat[];
+  compactionCount: number;
+  compactedTokens: number;
+  modelChanges: number;
+  thinkingLevelCount: Record<string, number>;
   dailySpend: DaySpend[];
   hourlySpend: HourSpend[];
 }

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

@@ -1,26 +0,0 @@
-import { describe, expect, it } from "bun:test";
-import { LoadingView } from "../LoadingView";
-
-describe("LoadingView", () => {
-  it("renders with 0% progress", () => {
-    const lv = new LoadingView();
-    const lines = lv.render(80);
-    expect(lines.join("\n")).toContain("Parsing session logs...");
-    expect(lines.join("\n")).toContain("0%");
-  });
-
-  it("updates progress", () => {
-    const lv = new LoadingView();
-    lv.setProgress(50);
-    const lines = lv.render(80);
-    expect(lines.join("\n")).toContain("50%");
-  });
-
-  it("renders progress bar with block chars", () => {
-    const lv = new LoadingView();
-    lv.setProgress(75);
-    const lines = lv.render(80);
-    expect(lines.join("\n")).toContain("█");
-    expect(lines.join("\n")).toContain("75%");
-  });
-});