@hank-warren/pi-stats 0.1.0 → 0.3.0

package/README.md

@@ -17,10 +17,15 @@ Run `/stats` in interactive mode. The dashboard temporarily replaces the editor
 - `Tab` or `←`/`→`: switch Overview and Models
 - `↑`/`↓`: scroll the model list
 - `r`: cycle All time, Last 7 days, and Last 30 days
+- `e`: toggle compact totals (`1.5B`) and exact grouped digits (`1,486,201,553`)
 - `u`: force a full rescan and rebuild the session index
 - `Escape`: close
 
-The Overview shows current-session, selected-range, and all-time input, output, cache-read, cache-write, reasoning, cost, and cache-hit statistics, plus an activity heatmap and clearly labelled all-time session/streak highlights. Reasoning is shown as a subset of output and is never added to the total twice. The Models tab attributes assistant usage to the provider response model and keeps otherwise unattributed nested usage in `Tools/summaries`, so its totals reconcile.
+The Overview compares current-session, selected-range, and all-time usage in one aligned table covering input, output, cache read, cache write, reasoning, cache-hit rate, and recorded cost, followed by a month-labelled activity heatmap and all-time session, streak, and favourite-model highlights. Reasoning is shown as a subset of output and is never added to the total twice.
+
+The Models tab ranks models for the selected range with share bars and a totals row that reconciles with the range total. It attributes assistant usage to the provider response model and keeps otherwise unattributed nested usage in `Tools/summaries`.
+
+Both tabs are responsive: as the terminal narrows, lower-priority columns move to a labelled continuation line under each row instead of disappearing, and the layout stays within a standard 24-row terminal.
 
 ## What is counted
 
@@ -28,6 +33,16 @@ Pi writes usage to assistant messages, usage-bearing tool results, compactions,
 
 Persisted subagent files in the conventional `run-*/session.jsonl` layout are included. `pi-processes` does not create model sessions; model usage around its tool calls already belongs to the parent Pi session and therefore needs no separate integration.
 
+### Extension usage sidecars
+
+Some extensions call a model outside the agent loop, so their usage never reaches a session transcript. `pi-stats` also reads content-free usage sidecars at `<agent dir>/<extension>/usage.jsonl` (plus one rotated `usage.jsonl.1`). Each line is one call:
+
+```json
+{"v":1,"id":"3f2b…","ts":"2026-08-11T22:41:03.118Z","source":"auto-permissions","label":"guardian","provider":"anthropic","model":"claude-fable-5","usage":{"input":812,"output":96,"cacheRead":18442,"cacheWrite":0,"reasoning":48,"cost":0.0121}}
+```
+
+Records are de-duplicated by `id`, counted in every total, and shown as their own `provider/model (label)` row so the overhead stays visible. They never create sessions, so session counts, streaks, and session spans are unaffected. `@hank-warren/pi-auto-permissions` writes one for guardian reviews; set `PI_STATS_DISABLE_USAGE_SIDECARS=1` to ignore all of them.
+
 The standard Pi session root, the current external session directory, `PI_CODING_AGENT_SESSION_DIR`, and a configured `subagents.defaultSessionDir` are discovered automatically. Add unusual one-off roots with the platform-delimited `PI_STATS_SESSION_DIRS` environment variable.
 
 ## Cache and privacy

package/cache.ts

@@ -2,11 +2,13 @@ import { randomUUID } from "node:crypto";
 import { readFile, readdir, realpath, rename, stat, writeFile, mkdir, chmod, unlink } from "node:fs/promises";
 import { basename, delimiter, dirname, join, resolve } from "node:path";
 import { homedir } from "node:os";
-import { makeIndex, parseSessionText } from "./stats.ts";
+import { makeIndex, parseSessionText, parseUsageSidecar } from "./stats.ts";
 import type { CachedFileRecord, ScanDiagnostics, SessionRecord, StatsCacheFile, StatsIndex, UsageRecord } from "./types.ts";
 
-const CACHE_VERSION = 1 as const;
+const CACHE_VERSION = 2 as const;
 const SKIP_DIRECTORIES = new Set(["subagent-artifacts"]);
+/** Extensions record out-of-transcript model usage in <agentDir>/<extension>/usage.jsonl. */
+const USAGE_SIDECAR_NAMES = new Set(["usage.jsonl", "usage.jsonl.1"]);
 
 export interface ScanOptions {
 	agentDir: string;
@@ -93,6 +95,37 @@ async function discoverJsonlFiles(roots: readonly string[], signal?: AbortSignal
 	return [...found].sort();
 }
 
+/** One level below the agent directory only; sidecars are a flat, documented convention. */
+async function discoverUsageSidecars(agentDir: string, env: NodeJS.ProcessEnv, signal?: AbortSignal): Promise<string[]> {
+	if (env.PI_STATS_DISABLE_USAGE_SIDECARS === "1") return [];
+	const found = new Set<string>();
+	let directories;
+	try {
+		directories = await readdir(agentDir, { withFileTypes: true });
+	} catch {
+		return [];
+	}
+	for (const directory of directories) {
+		signal?.throwIfAborted();
+		if (!directory.isDirectory() || directory.isSymbolicLink()) continue;
+		let entries;
+		try {
+			entries = await readdir(join(agentDir, directory.name), { withFileTypes: true });
+		} catch {
+			continue;
+		}
+		for (const entry of entries) {
+			if (!entry.isFile() || entry.isSymbolicLink() || !USAGE_SIDECAR_NAMES.has(entry.name)) continue;
+			try {
+				found.add(await realpath(join(agentDir, directory.name, entry.name)));
+			} catch {
+				// File disappeared between listing and resolution.
+			}
+		}
+	}
+	return [...found].sort();
+}
+
 function emptyCache(): StatsCacheFile {
 	return { version: CACHE_VERSION, files: {} };
 }
@@ -109,7 +142,7 @@ function validUsageRecord(value: unknown): value is UsageRecord {
 		typeof record.fingerprint === "string" &&
 		validNumber(record.timestamp) &&
 		typeof record.model === "string" &&
-		(record.kind === "assistant" || record.kind === "tool" || record.kind === "summary") &&
+		(record.kind === "assistant" || record.kind === "tool" || record.kind === "summary" || record.kind === "sidecar") &&
 		Boolean(usage) &&
 		validNumber(usage?.input) &&
 		validNumber(usage?.output) &&
@@ -149,7 +182,8 @@ function validCache(value: unknown): value is StatsCacheFile {
 			validNumber(record.mtimeMs) &&
 			validNumber(record.malformedLines) &&
 			(record.ignored === undefined || record.ignored === true) &&
-			(record.session === undefined || validSessionRecord(record.session))
+			(record.session === undefined || validSessionRecord(record.session)) &&
+			(record.sidecar === undefined || (Array.isArray(record.sidecar) && record.sidecar.every(validUsageRecord)))
 		);
 	});
 }
@@ -207,7 +241,10 @@ export function statsCachePath(agentDir: string): string {
 
 export async function scanStats(options: ScanOptions): Promise<StatsIndex> {
 	const roots = await resolveSessionRoots(options);
-	const files = await discoverJsonlFiles(roots, options.signal);
+	const sessionFiles = await discoverJsonlFiles(roots, options.signal);
+	const sidecarFiles = await discoverUsageSidecars(options.agentDir, options.env ?? process.env, options.signal);
+	const sidecars = new Set(sidecarFiles);
+	const files = [...sessionFiles.filter((file) => !sidecars.has(file)), ...sidecarFiles];
 	const cachePath = statsCachePath(options.agentDir);
 	await cleanupStaleTemporaryFiles(cachePath);
 	const loaded = options.force ? { cache: emptyCache(), valid: false } : await loadCache(cachePath);
@@ -231,6 +268,16 @@ export async function scanStats(options: ScanOptions): Promise<StatsIndex> {
 			if (!options.force && sameFile(previous, metadata.size, metadata.mtimeMs)) {
 				next.files[file] = previous!;
 				diagnostics.reusedFiles++;
+			} else if (sidecars.has(file)) {
+				const parsed = parseUsageSidecar(file, await readFile(file, "utf8"));
+				next.files[file] = {
+					size: metadata.size,
+					mtimeMs: metadata.mtimeMs,
+					sidecar: parsed.records,
+					malformedLines: parsed.malformedLines,
+				};
+				diagnostics.parsedFiles++;
+				changed = true;
 			} else {
 				const parsed = parseSessionText(file, await readFile(file, "utf8"));
 				next.files[file] = {
@@ -260,7 +307,8 @@ export async function scanStats(options: ScanOptions): Promise<StatsIndex> {
 		});
 	}
 	const sessions = Object.values(next.files).flatMap((record) => (record.session ? [record.session] : []));
-	return makeIndex(sessions, diagnostics);
+	const sidecarUsage = Object.values(next.files).flatMap((record) => record.sidecar ?? []);
+	return makeIndex(sessions, diagnostics, sidecarUsage);
 }
 
 export function isExternalSessionDirectory(activeSessionDir: string, agentDir: string): boolean {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hank-warren/pi-stats",
-  "version": "0.1.0",
+  "version": "0.3.0",
   "description": "A compact /stats dashboard for all-time Pi token usage, including persisted subagents.",
   "type": "module",
   "keywords": [

package/stats.ts

@@ -238,6 +238,49 @@ export function parseSessionText(filePath: string, text: string): ParseResult {
 	};
 }
 
+/**
+ * Parse a usage sidecar: one content-free JSON record per model call made outside a Pi
+ * session transcript, such as pi-auto-permissions guardian reviews.
+ */
+export function parseUsageSidecar(filePath: string, text: string): { records: UsageRecord[]; malformedLines: number } {
+	const records: UsageRecord[] = [];
+	let malformedLines = 0;
+	const lines = text.split("\n");
+	for (let index = 0; index < lines.length; index++) {
+		const line = lines[index]?.trim();
+		if (!line) continue;
+		let entry: Record<string, unknown> | undefined;
+		try {
+			entry = object(JSON.parse(line));
+		} catch {
+			malformedLines++;
+			continue;
+		}
+		if (!entry || entry.v !== 1) {
+			malformedLines++;
+			continue;
+		}
+		const usage = normalizeUsage(entry.usage);
+		if (!usage) {
+			malformedLines++;
+			continue;
+		}
+		const label = typeof entry.label === "string" && entry.label.length > 0 ? entry.label : undefined;
+		const source = typeof entry.source === "string" && entry.source.length > 0 ? entry.source : "sidecar";
+		const model = `${modelName(entry.provider, entry.model)} (${label ?? source})`;
+		const identity = typeof entry.id === "string" && entry.id.length > 0 ? entry.id : `${resolve(filePath)}:${index}`;
+		records.push({
+			fingerprint: fingerprint([identity, entry.ts, source, model, usage]),
+			timestamp: timestamp(entry.ts, 0),
+			model,
+			usage,
+			kind: "sidecar",
+			toolName: source,
+		});
+	}
+	return { records, malformedLines };
+}
+
 export function usageFromEntries(
 	sessionId: string,
 	entries: readonly unknown[],
@@ -254,7 +297,7 @@ function hasPersistedSubagentChild(record: UsageRecord, sessionPaths: ReadonlySe
 	return record.toolName === "subagent" && Boolean(record.childSessionFiles?.some((file) => sessionPaths.has(resolve(file))));
 }
 
-export function deduplicateUsage(sessions: readonly SessionRecord[]): UsageRecord[] {
+export function deduplicateUsage(sessions: readonly SessionRecord[], sidecar: readonly UsageRecord[] = []): UsageRecord[] {
 	const sessionPaths = new Set(sessions.map((session) => resolve(session.path)));
 	const seen = new Set<string>();
 	const result: UsageRecord[] = [];
@@ -266,6 +309,11 @@ export function deduplicateUsage(sessions: readonly SessionRecord[]): UsageRecor
 			result.push(record);
 		}
 	}
+	for (const record of sidecar) {
+		if (seen.has(record.fingerprint)) continue;
+		seen.add(record.fingerprint);
+		result.push(record);
+	}
 	return result;
 }
 
@@ -400,6 +448,10 @@ export function buildSnapshot(
 	};
 }
 
-export function makeIndex(sessions: SessionRecord[], diagnostics: StatsIndex["diagnostics"]): StatsIndex {
-	return { sessions, usage: deduplicateUsage(sessions), diagnostics };
+export function makeIndex(
+	sessions: SessionRecord[],
+	diagnostics: StatsIndex["diagnostics"],
+	sidecar: UsageRecord[] = [],
+): StatsIndex {
+	return { sessions, usage: deduplicateUsage(sessions, sidecar), diagnostics };
 }

package/types.ts

@@ -15,7 +15,7 @@ export interface UsageRecord {
 	timestamp: number;
 	model: string;
 	usage: UsageTotals;
-	kind: "assistant" | "tool" | "summary";
+	kind: "assistant" | "tool" | "summary" | "sidecar";
 	toolName?: string;
 	childSessionFiles?: string[];
 }
@@ -35,11 +35,13 @@ export interface CachedFileRecord {
 	mtimeMs: number;
 	ignored?: true;
 	session?: SessionRecord;
+	/** Usage recorded by extensions whose model calls never reach a session transcript. */
+	sidecar?: UsageRecord[];
 	malformedLines: number;
 }
 
 export interface StatsCacheFile {
-	version: 1;
+	version: 2;
 	files: Record<string, CachedFileRecord>;
 }
 

package/widget.ts

@@ -1,6 +1,6 @@
 import type { Theme } from "@earendil-works/pi-coding-agent";
 import { Key, matchesKey, truncateToWidth, visibleWidth, type Component } from "@earendil-works/pi-tui";
-import { totalTokens, type StatsRange, type StatsSnapshot, type UsageTotals } from "./types.ts";
+import { totalTokens, type ModelStats, type StatsRange, type StatsSnapshot, type UsageTotals } from "./types.ts";
 
 export type WidgetState =
 	| { kind: "loading"; completed: number; total: number }
@@ -16,20 +16,31 @@ export interface StatsWidgetOptions {
 	onDispose?: () => void;
 }
 
-const MODEL_PAGE_SIZE = 8;
+const MAX_ROWS = 24;
+/** Top border, tab row, headline, hint row, bottom border. */
+const CHROME_ROWS = 5;
+const MAX_MODEL_PAGE = 10;
+const MIN_MODEL_PAGE = 1;
+const HEATMAP_ROWS = 9;
+const HEATMAP_MIN_WEEKS = 12;
+const HEATMAP_MAX_WEEKS = 53;
+const HEATMAP_LABEL_WIDTH = 6;
+const MONTHS = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
 const RANGES: StatsRange[] = ["all", "7d", "30d"];
 const RANGE_LABELS: Record<StatsRange, string> = { all: "All time", "7d": "Last 7 days", "30d": "Last 30 days" };
 
-export function formatTokens(value: number): string {
+export function formatTokens(value: number, exact = false): string {
 	const safe = Math.max(0, Math.round(value));
-	if (safe >= 1_000_000_000) return `${(safe / 1_000_000_000).toFixed(1)}b`;
-	if (safe >= 1_000_000) return `${(safe / 1_000_000).toFixed(1)}m`;
-	if (safe >= 1_000) return `${(safe / 1_000).toFixed(safe < 10_000 ? 1 : 0)}k`;
+	if (exact) return safe.toLocaleString("en-US");
+	if (safe >= 1_000_000_000) return `${(safe / 1_000_000_000).toFixed(1)}B`;
+	if (safe >= 1_000_000) return `${(safe / 1_000_000).toFixed(1)}M`;
+	if (safe >= 1_000) return `${(safe / 1_000).toFixed(safe < 10_000 ? 1 : 0)}K`;
 	return String(safe);
 }
 
-function formatCost(value: number): string {
-	return `$${value.toFixed(value >= 100 ? 0 : value >= 10 ? 1 : 2)}`;
+export function formatCost(value: number): string {
+	const safe = Number.isFinite(value) ? Math.max(0, value) : 0;
+	return `$${safe.toLocaleString("en-US", { minimumFractionDigits: 2, maximumFractionDigits: 2 })}`;
 }
 
 function formatDuration(milliseconds: number): string {
@@ -53,16 +64,94 @@ function localDay(time: number): string {
 	return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, "0")}-${String(date.getDate()).padStart(2, "0")}`;
 }
 
-function plainPad(value: string, width: number): string {
+function padRight(value: string, width: number): string {
 	const clipped = truncateToWidth(value, Math.max(0, width), "");
 	return clipped + " ".repeat(Math.max(0, width - visibleWidth(clipped)));
 }
 
+function padLeft(value: string, width: number): string {
+	const clipped = truncateToWidth(value, Math.max(0, width), "");
+	return " ".repeat(Math.max(0, width - visibleWidth(clipped))) + clipped;
+}
+
+interface TableColumn {
+	header: string;
+	cells: string[];
+	align: "left" | "right";
+	/** 0 never drops; higher numbers are dropped first when the table does not fit. */
+	drop: number;
+	/** Short label used when the column moves to a continuation line. */
+	label?: string;
+	/** Decoration that simply disappears instead of moving to a continuation line. */
+	decorative?: true;
+}
+
+interface TableLayout {
+	header: string;
+	rows: string[];
+	extras: string[][];
+	width: number;
+}
+
+function wrap(pieces: readonly string[], width: number, indent: string): string[] {
+	const lines: string[] = [];
+	let current = "";
+	for (const piece of pieces) {
+		const candidate = current.length > 0 ? `${current} · ${piece}` : `${indent}${piece}`;
+		if (current.length > 0 && visibleWidth(candidate) > width) {
+			lines.push(current);
+			current = `${indent}${piece}`;
+		} else {
+			current = candidate;
+		}
+	}
+	if (current.length > 0) lines.push(current);
+	return lines;
+}
+
+function layoutTable(columns: readonly TableColumn[], rowCount: number, width: number, gap = 2): TableLayout {
+	const measured = columns.map((column) => ({
+		column,
+		width: Math.max(visibleWidth(column.header), ...column.cells.map((cell) => visibleWidth(cell)), 1),
+	}));
+	const visible = [...measured];
+	const dropped: typeof measured = [];
+	const used = () => visible.reduce((sum, entry) => sum + entry.width, 1) + gap * Math.max(0, visible.length - 1);
+	while (used() > width && visible.some((entry) => entry.column.drop > 0)) {
+		let index = -1;
+		let rank = 0;
+		visible.forEach((entry, position) => {
+			if (entry.column.drop > 0 && entry.column.drop >= rank) {
+				rank = entry.column.drop;
+				index = position;
+			}
+		});
+		if (index < 0) break;
+		dropped.unshift(...visible.splice(index, 1));
+	}
+
+	const separator = " ".repeat(gap);
+	const line = (cells: readonly string[]) =>
+		` ${visible.map((entry, index) => (entry.column.align === "right" ? padLeft(cells[index] ?? "", entry.width) : padRight(cells[index] ?? "", entry.width))).join(separator)}`;
+	const rows: string[] = [];
+	const extras: string[][] = [];
+	for (let row = 0; row < rowCount; row++) {
+		rows.push(line(visible.map((entry) => entry.column.cells[row] ?? "")));
+		const leftovers = dropped
+			.filter((entry) => !entry.column.decorative && (entry.column.cells[row] ?? "").trim().length > 0)
+			.map((entry) => `${entry.column.label ?? entry.column.header.toLowerCase()} ${entry.column.cells[row]}`);
+		extras.push(leftovers.length > 0 ? wrap(leftovers, width, "   ") : []);
+	}
+	return { header: line(visible.map((entry) => entry.column.header)), rows, extras, width: used() };
+}
+
 export class StatsWidget implements Component {
 	private state: WidgetState = { kind: "loading", completed: 0, total: 0 };
 	private tab: "overview" | "models" = "overview";
 	private range: StatsRange = "all";
+	private exact = false;
 	private modelOffset = 0;
+	private pageSize = MAX_MODEL_PAGE;
 	private readonly options: StatsWidgetOptions;
 
 	constructor(options: StatsWidgetOptions) {
@@ -86,7 +175,7 @@ export class StatsWidget implements Component {
 
 	setReady(snapshot: StatsSnapshot): void {
 		this.state = { kind: "ready", snapshot };
-		this.modelOffset = Math.min(this.modelOffset, Math.max(0, snapshot.models.length - MODEL_PAGE_SIZE));
+		this.modelOffset = Math.max(0, Math.min(this.modelOffset, snapshot.models.length - this.pageSize));
 		this.options.requestRender();
 	}
 
@@ -117,13 +206,18 @@ export class StatsWidget implements Component {
 			if (snapshot) this.setReady(snapshot);
 			return;
 		}
+		if (data === "e" || data === "E") {
+			this.exact = !this.exact;
+			this.options.requestRender();
+			return;
+		}
 		if (data === "u" || data === "U") {
 			this.options.onRefresh();
 			return;
 		}
 		if (this.state.kind === "ready" && this.tab === "models") {
 			if (matchesKey(data, Key.down)) {
-				this.modelOffset = Math.min(Math.max(0, this.state.snapshot.models.length - MODEL_PAGE_SIZE), this.modelOffset + 1);
+				this.modelOffset = Math.min(Math.max(0, this.state.snapshot.models.length - this.pageSize), this.modelOffset + 1);
 				this.options.requestRender();
 			} else if (matchesKey(data, Key.up)) {
 				this.modelOffset = Math.max(0, this.modelOffset - 1);
@@ -146,14 +240,21 @@ export class StatsWidget implements Component {
 		return lines.length > 0 ? lines : [""];
 	}
 
+	private tokens(value: number): string {
+		return formatTokens(value, this.exact);
+	}
+
 	private renderContent(width: number): string[] {
 		const { theme } = this.options;
 		const lines: string[] = [];
 		const selected = (text: string) => theme.bg("selectedBg", theme.fg("accent", theme.bold(` ${text} `)));
 		const normal = (text: string) => theme.fg("muted", ` ${text} `);
+		const title = " PI STATS ";
 		lines.push(theme.fg("borderAccent", "─".repeat(Math.max(1, width))));
+		const rangeChip = RANGE_LABELS[this.range];
+		const spacer = " ".repeat(Math.max(1, width - visibleWidth(`${title}   Overview   Models `) - visibleWidth(rangeChip) - 1));
 		lines.push(
-			`${theme.fg("accent", theme.bold(" PI STATS "))}  ${this.tab === "overview" ? selected("Overview") : normal("Overview")} ${this.tab === "models" ? selected("Models") : normal("Models")}`,
+			`${theme.fg("accent", theme.bold(title))}  ${this.tab === "overview" ? selected("Overview") : normal("Overview")} ${this.tab === "models" ? selected("Models") : normal("Models")}${spacer}${theme.fg("dim", rangeChip)}`,
 		);
 
 		if (this.state.kind === "loading") {
@@ -172,79 +273,114 @@ export class StatsWidget implements Component {
 
 		const snapshot = this.state.snapshot;
 		lines.push(
-			` ${theme.fg("muted", "All-time tokens")} ${theme.fg("accent", theme.bold(formatTokens(totalTokens(snapshot.allTime))))}  ${theme.fg("dim", `• ${RANGE_LABELS[this.range]}`)}`,
+			` ${theme.fg("accent", theme.bold(this.tokens(totalTokens(snapshot.allTime))))} ${theme.fg("muted", "tokens all time")} ${theme.fg("dim", `· ${formatCost(snapshot.allTime.cost)} · ${cacheHit(snapshot.allTime)} cache hit`)}`,
 		);
 		lines.push(...(this.tab === "overview" ? this.renderOverview(snapshot, width) : this.renderModels(snapshot, width)));
 		const scanWarnings: string[] = [];
 		if (snapshot.diagnostics.unreadableFiles > 0) scanWarnings.push(`${snapshot.diagnostics.unreadableFiles} unreadable file(s)`);
 		if (snapshot.diagnostics.malformedLines > 0) scanWarnings.push(`${snapshot.diagnostics.malformedLines} malformed line(s)`);
 		const warning = scanWarnings.length > 0 ? theme.fg("warning", ` · ⚠ ${scanWarnings.join(" · ")}`) : "";
-		lines.push(theme.fg("dim", " Tab/←→ switch · r range · u refresh · Esc close") + warning);
+		const exactHint = this.exact ? "e compact" : "e exact";
+		lines.push(theme.fg("dim", ` Tab/←→ switch · r range · ${exactHint} · u refresh · Esc close`) + warning);
 		lines.push(theme.fg("borderMuted", "─".repeat(Math.max(1, width))));
 		return lines;
 	}
 
-	private renderUsage(label: string, usage: UsageTotals, width: number): string[] {
+	private renderScopes(snapshot: StatsSnapshot, width: number): string[] {
 		const { theme } = this.options;
-		const heading = ` ${theme.fg("text", theme.bold(label))}  ${theme.fg("accent", formatTokens(totalTokens(usage)))} ${theme.fg("dim", `tokens · ${formatCost(usage.cost)} · cache hit ${cacheHit(usage)}`)}`;
-		const items = [
-			["Input", usage.input],
-			["Output", usage.output],
-			["Cache R", usage.cacheRead],
-			["Cache W", usage.cacheWrite],
-			["Reasoning ⊂ output", usage.reasoning],
-		] as const;
-		const formatted = items.map(([name, value]) => `${theme.fg("dim", name)} ${theme.fg("text", formatTokens(value))}`);
-		if (width >= 68) return [heading, `   ${formatted.join(theme.fg("dim", " · "))}`];
-		return [heading, `   ${formatted.slice(0, 2).join(theme.fg("dim", " · "))}`, `   ${formatted.slice(2).join(theme.fg("dim", " · "))}`];
+		const scopes: Array<[string, UsageTotals]> = [["Current session", snapshot.currentSession]];
+		if (snapshot.range !== "all") scopes.push([RANGE_LABELS[snapshot.range], snapshot.period]);
+		scopes.push(["All time", snapshot.allTime]);
+
+		const column = (header: string, drop: number, label: string, pick: (usage: UsageTotals) => string): TableColumn => ({
+			header,
+			drop,
+			label,
+			align: header === "Scope" ? "left" : "right",
+			cells: scopes.map(([, usage]) => pick(usage)),
+		});
+		const table = layoutTable(
+			[
+				{ header: "Scope", cells: scopes.map(([name]) => name), align: "left", drop: 0 },
+				column("Tokens", 0, "total", (usage) => this.tokens(totalTokens(usage))),
+				column("Input", 4, "in", (usage) => this.tokens(usage.input)),
+				column("Output", 4, "out", (usage) => this.tokens(usage.output)),
+				column("Cache R", 5, "cache r", (usage) => this.tokens(usage.cacheRead)),
+				column("Cache W", 6, "cache w", (usage) => this.tokens(usage.cacheWrite)),
+				column("Reason", 7, "reason ⊂ output", (usage) => this.tokens(usage.reasoning)),
+				column("Cache hit", 3, "cache hit", (usage) => cacheHit(usage)),
+				column("Cost", 2, "cost", (usage) => formatCost(usage.cost)),
+			],
+			scopes.length,
+			width,
+		);
+
+		const lines = [theme.fg("dim", table.header)];
+		table.rows.forEach((row, index) => {
+			lines.push(index === table.rows.length - 1 ? theme.fg("text", theme.bold(row)) : theme.fg("text", row));
+			for (const extra of table.extras[index] ?? []) lines.push(theme.fg("dim", extra));
+		});
+		return lines;
 	}
 
 	private renderOverview(snapshot: StatsSnapshot, width: number): string[] {
 		const { theme } = this.options;
-		const lines = [
-			...this.renderUsage("Current session", snapshot.currentSession, width),
-			...this.renderUsage(RANGE_LABELS[snapshot.range], snapshot.period, width),
+		const scopes = this.renderScopes(snapshot, width);
+
+		const metrics: Array<[string, string, string]> = [
+			["Sessions", "Sessions", `${snapshot.sessionCount} (${snapshot.mainSessionCount} main · ${snapshot.subagentSessionCount} sub)`],
+			["Active days", "Active", String(snapshot.activeDays)],
+			["Streak", "Streak", `${snapshot.currentStreak}d current · ${snapshot.longestStreak}d longest`],
+			["Busiest", "Busiest", snapshot.mostActiveDay ? `${snapshot.mostActiveDay.day} · ${this.tokens(snapshot.mostActiveDay.total)}` : "—"],
+			["Favorite", "Favorite", snapshot.favoriteModel ?? "—"],
+			["Longest span", "Longest", formatDuration(snapshot.longestSessionMs)],
 		];
-		if (snapshot.range !== "all") lines.push(...this.renderUsage("All time", snapshot.allTime, width));
-		if (width >= 72) lines.push(...this.renderHeatmap(snapshot, width));
-
-		const sessions = `${snapshot.sessionCount} (${snapshot.mainSessionCount} main · ${snapshot.subagentSessionCount} subagents)`;
-		const active = `${snapshot.activeDays} · streak ${snapshot.currentStreak}/${snapshot.longestStreak}d`;
-		const topDay = snapshot.mostActiveDay ? `${snapshot.mostActiveDay.day} · ${formatTokens(snapshot.mostActiveDay.total)}` : "—";
-		const metrics = [
-			["All-time sessions", sessions],
-			["All-time active days", active],
-			["All-time favorite", snapshot.favoriteModel ?? "—"],
-			["All-time busiest", topDay],
-			["Longest session span", formatDuration(snapshot.longestSessionMs)],
-		] as const;
-		if (width >= 80) {
-			for (let index = 0; index < metrics.length; index += 2) {
-				const left = metrics[index]!;
-				const right = metrics[index + 1];
-				const leftText = `${theme.fg("dim", left[0])}: ${theme.fg("text", left[1])}`;
-				const padded = leftText + " ".repeat(Math.max(1, 42 - visibleWidth(leftText)));
-				lines.push(` ${padded}${right ? `${theme.fg("dim", right[0])}: ${theme.fg("text", right[1])}` : ""}`);
-			}
+		const left = metrics.filter((_, index) => index % 2 === 0);
+		const right = metrics.filter((_, index) => index % 2 === 1);
+		const plan = (index: 0 | 1) => {
+			const labels = Math.max(...metrics.map((metric) => visibleWidth(metric[index])));
+			const columnWidth = (rows: typeof metrics) => labels + 2 + Math.max(...rows.map((metric) => visibleWidth(metric[2])));
+			return { index, leftWidth: columnWidth(left), fits: 1 + columnWidth(left) + 2 + columnWidth(right) <= width };
+		};
+		const chosen = [plan(0), plan(1)].find((candidate) => candidate.fits);
+		const labelWidth = Math.max(...metrics.map((metric) => visibleWidth(metric[chosen?.index ?? 0])));
+		const cell = (metric: [string, string, string], pad: number) =>
+			`${theme.fg("dim", padRight(metric[chosen?.index ?? 0], labelWidth))}  ${theme.fg("text", pad > 0 ? padRight(metric[2], pad) : metric[2])}`;
+		const metricLines: string[] = [];
+		if (chosen) {
+			left.forEach((metric, index) => {
+				const other = right[index];
+				metricLines.push(` ${cell(metric, chosen.leftWidth - labelWidth)}${other ? cell(other, 0) : ""}`.trimEnd());
+			});
 		} else {
-			for (const [name, value] of metrics) lines.push(` ${theme.fg("dim", name)}: ${theme.fg("text", value)}`);
-		}
-		if (width >= 72 && snapshot.range === "all" && snapshot.allTime.input + snapshot.allTime.output > 0) {
-			const books = (snapshot.allTime.input + snapshot.allTime.output) / 400_000;
-			lines.push(theme.fg("muted", ` Your input + output are roughly ${books.toFixed(books >= 10 ? 0 : 1)}× the tokens in A Game of Thrones.`));
+			for (const metric of metrics) metricLines.push(` ${cell(metric, 0)}`.trimEnd());
 		}
-		return lines;
+
+		const books = (snapshot.allTime.input + snapshot.allTime.output) / 400_000;
+		const comparison =
+			width >= 90 && snapshot.range === "all" && books >= 0.1
+				? [theme.fg("muted", ` Your input + output are roughly ${books.toFixed(books >= 10 ? 0 : 1)}× the tokens in A Game of Thrones.`)]
+				: [];
+		const spent = CHROME_ROWS + scopes.length + metricLines.length + comparison.length;
+		const heatmap = width >= 72 && spent + HEATMAP_ROWS <= MAX_ROWS ? this.renderHeatmap(snapshot, width) : [];
+		return [...scopes, ...heatmap, ...metricLines, ...comparison];
 	}
 
 	private renderHeatmap(snapshot: StatsSnapshot, width: number): string[] {
 		const { theme } = this.options;
-		const weeks = Math.max(8, Math.min(53, width - 8));
+		const cells = Math.max(0, width - HEATMAP_LABEL_WIDTH - 1);
+		if (cells < HEATMAP_MIN_WEEKS) return [];
 		const today = new Date();
 		today.setHours(12, 0, 0, 0);
 		const end = new Date(today);
-		end.setDate(end.getDate() + (7 - ((end.getDay() + 6) % 7) - 1));
+		end.setDate(end.getDate() + (6 - ((end.getDay() + 6) % 7)));
+		const active = snapshot.days.filter((day) => day.total > 0);
+		const first = active[0] ? new Date(`${active[0].day}T12:00:00`) : today;
+		const span = Math.ceil((end.getTime() - first.getTime()) / (7 * 24 * 60 * 60 * 1000)) + 1;
+		const weeks = Math.max(HEATMAP_MIN_WEEKS, Math.min(cells, HEATMAP_MAX_WEEKS, Math.max(span, HEATMAP_MIN_WEEKS)));
 		const start = new Date(end);
 		start.setDate(start.getDate() - weeks * 7 + 1);
+
 		const totals = new Map(snapshot.days.map((day) => [day.day, day.total]));
 		const maximum = Math.max(0, ...snapshot.days.map((day) => day.total));
 		const glyph = (value: number): string => {
@@ -255,14 +391,36 @@ export class StatsWidget implements Component {
 			if (level === 3) return theme.fg("warning", "▓");
 			return theme.fg("accent", "█");
 		};
-		const lines = [` ${theme.fg("muted", `All-time activity · trailing ${weeks} weeks`)}`];
+
+		const legend = `less ${theme.fg("dim", "·")}${theme.fg("muted", "░")}${theme.fg("success", "▒")}${theme.fg("warning", "▓")}${theme.fg("accent", "█")} more`;
+		const heading = ` ${theme.fg("muted", "Activity")}`;
+		const gap = Math.max(1, width - visibleWidth(heading) - visibleWidth(legend) - 1);
+		const lines = [`${heading}${" ".repeat(gap)}${theme.fg("dim", legend)}`];
+
+		let months = " ".repeat(HEATMAP_LABEL_WIDTH);
+		let lastLabel = -4;
+		for (let week = 0; week < weeks; week++) {
+			const date = new Date(start);
+			date.setDate(date.getDate() + week * 7);
+			const previous = new Date(date);
+			previous.setDate(previous.getDate() - 7);
+			if ((week === 0 || date.getMonth() !== previous.getMonth()) && week - lastLabel >= 4 && week + 3 <= weeks) {
+				months += MONTHS[date.getMonth()]!;
+				lastLabel = week;
+				week += 2;
+			} else {
+				months += " ";
+			}
+		}
+		lines.push(theme.fg("dim", months));
+
 		for (let weekday = 0; weekday < 7; weekday++) {
 			const label = weekday === 0 ? "Mon" : weekday === 2 ? "Wed" : weekday === 4 ? "Fri" : "   ";
-			let row = ` ${theme.fg("dim", label)} `;
+			let row = ` ${theme.fg("dim", label)}  `;
 			for (let week = 0; week < weeks; week++) {
 				const date = new Date(start);
 				date.setDate(date.getDate() + week * 7 + weekday);
-				row += glyph(totals.get(localDay(date.getTime())) ?? 0);
+				row += date.getTime() > today.getTime() ? " " : glyph(totals.get(localDay(date.getTime())) ?? 0);
 			}
 			lines.push(row);
 		}
@@ -272,30 +430,76 @@ export class StatsWidget implements Component {
 	private renderModels(snapshot: StatsSnapshot, width: number): string[] {
 		const { theme } = this.options;
 		if (snapshot.models.length === 0) return [theme.fg("muted", ` No model usage in ${RANGE_LABELS[snapshot.range].toLowerCase()}.`)];
-		const start = Math.min(this.modelOffset, Math.max(0, snapshot.models.length - MODEL_PAGE_SIZE));
-		const models = snapshot.models.slice(start, start + MODEL_PAGE_SIZE);
-		const lines: string[] = [];
-		if (width >= 110) {
-			lines.push(theme.fg("dim", ` ${plainPad("Model", 34)} ${plainPad("Calls", 7)} ${plainPad("Share", 7)} ${plainPad("Total", 9)} ${plainPad("Input", 9)} ${plainPad("Output", 9)} ${plainPad("Cache R/W", 17)} Cost`));
-			for (const model of models) {
-				lines.push(
-					` ${theme.fg("text", plainPad(model.model, 34))} ${plainPad(String(model.calls), 7)} ${plainPad(`${(model.share * 100).toFixed(1)}%`, 7)} ${plainPad(formatTokens(model.total), 9)} ${plainPad(formatTokens(model.input), 9)} ${plainPad(formatTokens(model.output), 9)} ${plainPad(`${formatTokens(model.cacheRead)}/${formatTokens(model.cacheWrite)}`, 17)} ${formatCost(model.cost)}`,
-				);
-				if (model.reasoning > 0) lines.push(theme.fg("dim", `   reasoning ⊂ output ${formatTokens(model.reasoning)}`));
-			}
-		} else if (width >= 72) {
-			lines.push(theme.fg("dim", ` ${plainPad("Model", 31)} ${plainPad("Calls", 7)} ${plainPad("Share", 7)} Total`));
-			for (const model of models) {
-				lines.push(` ${theme.fg("text", plainPad(model.model, 31))} ${plainPad(String(model.calls), 7)} ${plainPad(`${(model.share * 100).toFixed(1)}%`, 7)} ${formatTokens(model.total)}`);
-				lines.push(theme.fg("dim", `   in ${formatTokens(model.input)} · out ${formatTokens(model.output)} · cache ${formatTokens(model.cacheRead)}/${formatTokens(model.cacheWrite)} · reason ${formatTokens(model.reasoning)} · ${formatCost(model.cost)}`));
-			}
-		} else {
-			for (const model of models) {
-				lines.push(` ${theme.fg("text", theme.bold(model.model))} ${theme.fg("accent", formatTokens(model.total))} ${theme.fg("dim", `· ${(model.share * 100).toFixed(1)}% · ${model.calls} calls · ${formatCost(model.cost)}`)}`);
-				lines.push(theme.fg("dim", `   in ${formatTokens(model.input)} · out ${formatTokens(model.output)} · cache ${formatTokens(model.cacheRead)}/${formatTokens(model.cacheWrite)} · reason ${formatTokens(model.reasoning)}`));
-			}
+
+		const totals = snapshot.models.reduce<UsageTotals & { total: number }>(
+			(sum, model) => ({
+				input: sum.input + model.input,
+				output: sum.output + model.output,
+				cacheRead: sum.cacheRead + model.cacheRead,
+				cacheWrite: sum.cacheWrite + model.cacheWrite,
+				reasoning: sum.reasoning + model.reasoning,
+				cost: sum.cost + model.cost,
+				calls: sum.calls + model.calls,
+				total: sum.total + model.total,
+			}),
+			{ input: 0, output: 0, cacheRead: 0, cacheWrite: 0, reasoning: 0, cost: 0, calls: 0, total: 0 },
+		);
+		const summaryRow: ModelStats = { ...totals, model: `${snapshot.models.length} model${snapshot.models.length === 1 ? "" : "s"}`, share: 1 };
+		// One layout over every row keeps column widths stable while scrolling and lets the totals row align exactly.
+		const entries = [...snapshot.models, summaryRow];
+		const summaryIndex = entries.length - 1;
+		const table = layoutTable(this.modelColumns(entries, snapshot.models), entries.length, width);
+
+		const rowsPerModel = 1 + Math.max(0, ...table.extras.slice(0, summaryIndex).map((extra) => extra.length));
+		const summaryRows = 2 + (table.extras[summaryIndex]?.length ?? 0);
+		const budget = MAX_ROWS - CHROME_ROWS - 1 - summaryRows - 1;
+		this.pageSize = Math.max(MIN_MODEL_PAGE, Math.min(MAX_MODEL_PAGE, Math.floor(budget / rowsPerModel)));
+		const start = Math.min(this.modelOffset, Math.max(0, snapshot.models.length - this.pageSize));
+		this.modelOffset = start;
+		const end = Math.min(snapshot.models.length, start + this.pageSize);
+
+		const lines = [theme.fg("dim", table.header)];
+		for (let index = start; index < end; index++) {
+			lines.push(theme.fg("text", table.rows[index] ?? ""));
+			for (const extra of table.extras[index] ?? []) lines.push(theme.fg("dim", extra));
+		}
+		lines.push(theme.fg("borderMuted", ` ${"─".repeat(Math.max(1, Math.min(width - 1, table.width)))}`));
+		lines.push(theme.fg("muted", table.rows[summaryIndex] ?? ""));
+		for (const extra of table.extras[summaryIndex] ?? []) lines.push(theme.fg("dim", extra));
+		if (snapshot.models.length > this.pageSize) {
+			lines.push(theme.fg("dim", ` ↑↓ models ${start + 1}-${end} of ${snapshot.models.length}`));
 		}
-		if (snapshot.models.length > MODEL_PAGE_SIZE) lines.push(theme.fg("dim", ` ↑↓ models ${start + 1}-${Math.min(snapshot.models.length, start + MODEL_PAGE_SIZE)} of ${snapshot.models.length}`));
 		return lines;
 	}
+
+	private modelColumns(rows: readonly ModelStats[], ranked: readonly ModelStats[]): TableColumn[] {
+		const maximum = Math.max(0, ...ranked.map((model) => model.share));
+		const isSummary = (index: number) => index >= ranked.length;
+		const bar = (share: number): string => {
+			if (maximum <= 0) return "";
+			const filled = Math.max(0, Math.min(6, (share / maximum) * 6));
+			const whole = Math.floor(filled);
+			const eighths = Math.round((filled - whole) * 8);
+			const partial = eighths > 0 ? "▏▎▍▌▋▊▉█"[eighths - 1]! : "";
+			return padRight("█".repeat(whole) + partial, 6);
+		};
+		return [
+			{ header: "Model", cells: rows.map((model) => model.model), align: "left", drop: 0 },
+			{ header: "Calls", cells: rows.map((model) => model.calls.toLocaleString("en-US")), align: "right", drop: 1, label: "calls" },
+			{ header: "Share", cells: rows.map((model) => `${(model.share * 100).toFixed(1)}%`), align: "right", drop: 2, label: "share" },
+			{ header: "", cells: rows.map((model, index) => (isSummary(index) ? "" : bar(model.share))), align: "left", drop: 3, decorative: true },
+			{ header: "Total", cells: rows.map((model) => this.tokens(model.total)), align: "right", drop: 0 },
+			{ header: "Input", cells: rows.map((model) => this.tokens(model.input)), align: "right", drop: 4, label: "in" },
+			{ header: "Output", cells: rows.map((model) => this.tokens(model.output)), align: "right", drop: 4, label: "out" },
+			{
+				header: "Cache R/W",
+				cells: rows.map((model) => `${this.tokens(model.cacheRead)}/${this.tokens(model.cacheWrite)}`),
+				align: "right",
+				drop: 5,
+				label: "cache",
+			},
+			{ header: "Reason", cells: rows.map((model) => this.tokens(model.reasoning)), align: "right", drop: 6, label: "reason ⊂ output" },
+			{ header: "Cost", cells: rows.map((model) => formatCost(model.cost)), align: "right", drop: 1, label: "cost" },
+		];
+	}
 }