pi-extensions 0.1.23 → 0.1.27

package/README.md

@@ -10,7 +10,7 @@ Personal extensions for the [Pi coding agent](https://github.com/badlogic/pi-mon
 | [tab-status](tab-status/) | Manage as many parallel sessions as your mind can handle. Terminal tab indicators for <br>✅ done / 🚧 stuck / 🛑 timed out |
 | [ralph-wiggum](ralph-wiggum/) | Run arbitrarily-long tasks without diluting model attention. Flat version without subagents like [ralph-loop](https://github.com/anthropics/claude-plugins-official/tree/main/plugins/ralph-loop) |
 | [agent-guidance](agent-guidance/) | Switch between Claude/Codex/Gemini with model-specific guidance (CLAUDE.md, CODEX.md, GEMINI.md) |
-| [/usage](usage-extension/) | 📊 Usage statistics dashboard. See cost, tokens, and messages by provider/model across Today, This Week, All Time |
+| [/usage](usage-extension/) | 📊 Usage statistics dashboard. See cost, tokens, and messages by provider/model across Today, This Week, Last Week, and All Time — with a compact view for narrow terminals |
 | [/paste](raw-paste/) | Paste editable text, not [paste #1 +21 lines]. Running `/paste` with optional keybinding |
 | [/code](code-actions/) | Pick code blocks or inline snippets from assistant messages to copy, insert, or run with `/code` |
 | [arcade](arcade/) | Play minigames while your tests run: 👾 sPIce-invaders, 👻 picman, 🏓 ping, 🧩 tetris, 🍄 mario-not |

package/files-widget/index.ts

@@ -66,7 +66,7 @@ export default function editorExtension(pi: ExtensionAPI): void {
     },
   });
 
-  pi.registerCommand("review", {
+  pi.registerCommand("readfiles-review", {
     description: "Open tuicr to review changes and send feedback to agent",
     handler: async (_args, ctx) => {
       if (!hasCommand("tuicr")) {
@@ -101,7 +101,7 @@ export default function editorExtension(pi: ExtensionAPI): void {
     },
   });
 
-  pi.registerCommand("diff", {
+  pi.registerCommand("readfiles-diff", {
     description: "Open critique to view diffs",
     handler: async (args, ctx) => {
       if (!hasCommand("bun")) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pi-extensions",
-  "version": "0.1.23",
+  "version": "0.1.27",
   "license": "MIT",
   "private": false,
   "keywords": [

package/usage-extension/CHANGELOG.md

@@ -1,5 +1,23 @@
 # Changelog
 
+## 0.2.0 - 2026-04-17
+- Include `cacheWrite` in the main `Tokens` total and in the `↑In` column so providers like Anthropic that report fresh prompt work under `cacheWrite` are no longer undercounted
+- Keep `cacheRead` out of `Tokens` so repeated cache hits do not swamp the dashboard
+- Keep the `Cache` column as combined cache read + write tokens for reference
+- Minor semver bump: the numbers shown under `Tokens` and `↑In` are now higher for Anthropic usage. Cost, `↓Out`, and `Cache` are unchanged.
+
+## 0.1.7 - 2026-04-09
+- Prevent `/usage` from crashing in narrow terminals by switching to a compact responsive table and truncating every rendered line to the terminal width
+- Thanks @markokocic
+
+## 0.1.6 - 2026-04-09
+- Add a "Last Week" time period tab
+- Thanks @ttttmr
+
+## 0.1.5 - 2026-04-09
+- Keep recursive subagent session scanning in `/usage`
+- Remove the deduped/raw mode toggle and keep the deduped view as the default behavior
+
 ## 0.1.4 - 2026-04-09
 - Scan session files recursively so nested subagent runs are included in `/usage`
 - Add deduped vs raw counting modes to compare copied branch history against raw file totals

package/usage-extension/README.md

@@ -7,7 +7,7 @@ A Pi extension that displays aggregated usage statistics across all sessions.
 ## Compatibility
 
 - **Pi version:** 0.42.4+
-- **Last updated:** 2026-04-09
+- **Last updated:** 2026-04-17
 
 ## Installation
 
@@ -61,19 +61,11 @@ In Pi, run:
 |--------|------------|
 | **Today** | From midnight (00:00) today |
 | **This Week** | From Monday 00:00 of the current week |
+| **Last Week** | Previous week (Monday 00:00 → this Monday 00:00) |
 | **All Time** | All recorded sessions |
 
 Use `Tab` or `←`/`→` to switch between periods.
 
-### Count Modes
-
-| Mode | Definition |
-|------|------------|
-| **Deduped** | Default. Deduplicates copied assistant history across branched session files |
-| **Raw** | Counts every assistant message found in every session file |
-
-Both modes scan nested session files recursively, so subagent runs are included.
-
 ### Timezone
 
 Time periods are calculated in the local timezone where Pi runs. If you want to override it, set the `TZ` environment variable (IANA timezone, e.g. `TZ=UTC` or `TZ=America/New_York`) before launching Pi.
@@ -86,19 +78,18 @@ Time periods are calculated in the local timezone where Pi runs. If you want to
 | **Sessions** | Number of unique sessions |
 | **Msgs** | Number of assistant messages |
 | **Cost** | Total cost in USD (from API response) |
-| **Tokens** | Total tokens (input + output) |
-| **↑In** | Input tokens *(dimmed)* |
+| **Tokens** | Fresh tokens for the turn: input + output + cache write |
+| **↑In** | Fresh input tokens: input + cache write *(dimmed)* |
 | **↓Out** | Output tokens *(dimmed)* |
-| **Cache** | Cache read + write tokens *(dimmed)* |
+| **Cache** | Cache read + write tokens *(dimmed; informational)* |
+
+On narrow terminals, `/usage` automatically switches to a compact table instead of overflowing the terminal. Hidden columns reappear as soon as you widen the terminal.
 
 ### Navigation
 
 | Key | Action |
 |-----|--------|
 | `Tab` / `←` `→` | Switch time period |
-| `m` | Cycle count mode |
-| `d` | Switch to deduped mode |
-| `r` | Switch to raw mode |
 | `↑` `↓` | Select provider |
 | `Enter` / `Space` | Expand/collapse provider to show models |
 | `q` / `Esc` | Close |
@@ -121,13 +112,13 @@ Cache token support varies by provider:
 
 The "Cache" column combines both read and write tokens.
 
+`Tokens` and `↑In` include cache writes but intentionally exclude cache reads. That keeps totals aligned with fresh/billed prompt work without letting repeated cache hits swamp the dashboard.
+
 ## Data Source
 
 Statistics are parsed recursively from session files in `~/.pi/agent/sessions/`, including nested subagent runs such as `run-0/` directories. Each session is a JSONL file containing message entries with usage data.
 
-In **Deduped** mode, assistant messages duplicated across branched session files are deduplicated by timestamp + total tokens (matching the extension's previous behavior and keeping totals comparable with earlier releases).
-
-In **Raw** mode, every assistant message found in every session file is counted.
+Assistant messages duplicated across branched session files are deduplicated by timestamp + total tokens, matching the extension's previous behavior while still including recursive subagent sessions.
 
 Respects the `PI_CODING_AGENT_DIR` environment variable if set.
 

package/usage-extension/index.ts

@@ -2,15 +2,14 @@
  * /usage - Usage statistics dashboard
  *
  * Shows an inline view with usage stats grouped by provider.
- * - Tab cycles: Today → This Week → All Time
- * - D toggles deduped view, R toggles raw view, M cycles both
+ * - Tab cycles: Today → This Week → Last Week → All Time
  * - Arrow keys navigate providers
  * - Enter expands/collapses to show models
  */
 
 import type { ExtensionAPI, ExtensionCommandContext, Theme } from "@mariozechner/pi-coding-agent";
 import { DynamicBorder } from "@mariozechner/pi-coding-agent";
-import { CancellableLoader, Container, Spacer, matchesKey, visibleWidth, truncateToWidth } from "@mariozechner/pi-tui";
+import { CancellableLoader, Container, Spacer, matchesKey, visibleWidth, truncateToWidth, wrapTextWithAnsi } from "@mariozechner/pi-tui";
 import { readdir, readFile } from "node:fs/promises";
 import { join } from "node:path";
 import { homedir } from "node:os";
@@ -23,7 +22,8 @@ interface TokenStats {
 	total: number;
 	input: number;
 	output: number;
-	cache: number;
+	cacheRead: number;
+	cacheWrite: number;
 }
 
 interface BaseStats {
@@ -53,12 +53,11 @@ interface TimeFilteredStats {
 interface UsageData {
 	today: TimeFilteredStats;
 	thisWeek: TimeFilteredStats;
+	lastWeek: TimeFilteredStats;
 	allTime: TimeFilteredStats;
 }
 
-type TabName = "today" | "thisWeek" | "allTime";
-type UsageCountMode = "deduped" | "raw";
-type UsageDataByMode = Record<UsageCountMode, UsageData>;
+type TabName = "today" | "thisWeek" | "lastWeek" | "allTime";
 
 // =============================================================================
 // Column Configuration
@@ -71,23 +70,86 @@ interface DataColumn {
 	getValue: (stats: BaseStats & { sessions: Set<string> | number }) => string;
 }
 
-const NAME_COL_WIDTH = 26;
-
-const DATA_COLUMNS: DataColumn[] = [
-	{
-		label: "Sessions",
-		width: 9,
-		getValue: (s) => formatNumber(typeof s.sessions === "number" ? s.sessions : s.sessions.size),
-	},
-	{ label: "Msgs", width: 9, getValue: (s) => formatNumber(s.messages) },
-	{ label: "Cost", width: 9, getValue: (s) => formatCost(s.cost) },
-	{ label: "Tokens", width: 9, getValue: (s) => formatTokens(s.tokens.total) },
-	{ label: "↑In", width: 8, dimmed: true, getValue: (s) => formatTokens(s.tokens.input) },
-	{ label: "↓Out", width: 8, dimmed: true, getValue: (s) => formatTokens(s.tokens.output) },
-	{ label: "Cache", width: 8, dimmed: true, getValue: (s) => formatTokens(s.tokens.cache) },
+interface TableLayoutCandidate {
+	columns: DataColumn[];
+	minNameWidth: number;
+	compact?: boolean;
+}
+
+interface TableLayout {
+	columns: DataColumn[];
+	nameWidth: number;
+	tableWidth: number;
+	compact: boolean;
+}
+
+const MAX_NAME_COL_WIDTH = 26;
+
+const SESSIONS_COLUMN: DataColumn = {
+	label: "Sessions",
+	width: 9,
+	getValue: (s) => formatNumber(typeof s.sessions === "number" ? s.sessions : s.sessions.size),
+};
+
+const MSGS_COLUMN: DataColumn = {
+	label: "Msgs",
+	width: 9,
+	getValue: (s) => formatNumber(s.messages),
+};
+
+const COST_COLUMN: DataColumn = {
+	label: "Cost",
+	width: 9,
+	getValue: (s) => formatCost(s.cost),
+};
+
+const TOKENS_COLUMN: DataColumn = {
+	label: "Tokens",
+	width: 9,
+	getValue: (s) => formatTokens(s.tokens.total),
+};
+
+const INPUT_COLUMN: DataColumn = {
+	label: "↑In",
+	width: 8,
+	dimmed: true,
+	// Include cacheWrite so this reflects fresh input tokens sent this turn,
+	// even for providers like Anthropic that split cached prompt creation out
+	// from the regular input token count.
+	getValue: (s) => formatTokens(s.tokens.input + s.tokens.cacheWrite),
+};
+
+const OUTPUT_COLUMN: DataColumn = {
+	label: "↓Out",
+	width: 8,
+	dimmed: true,
+	getValue: (s) => formatTokens(s.tokens.output),
+};
+
+const CACHE_COLUMN: DataColumn = {
+	label: "Cache",
+	width: 8,
+	dimmed: true,
+	getValue: (s) => formatTokens(s.tokens.cacheRead + s.tokens.cacheWrite),
+};
+
+const FULL_DATA_COLUMNS: DataColumn[] = [
+	SESSIONS_COLUMN,
+	MSGS_COLUMN,
+	COST_COLUMN,
+	TOKENS_COLUMN,
+	INPUT_COLUMN,
+	OUTPUT_COLUMN,
+	CACHE_COLUMN,
 ];
 
-const TABLE_WIDTH = NAME_COL_WIDTH + DATA_COLUMNS.reduce((sum, col) => sum + col.width, 0);
+const TABLE_LAYOUTS: TableLayoutCandidate[] = [
+	{ columns: FULL_DATA_COLUMNS, minNameWidth: MAX_NAME_COL_WIDTH },
+	{ columns: [SESSIONS_COLUMN, MSGS_COLUMN, COST_COLUMN, TOKENS_COLUMN], minNameWidth: 14, compact: true },
+	{ columns: [SESSIONS_COLUMN, COST_COLUMN, TOKENS_COLUMN], minNameWidth: 12, compact: true },
+	{ columns: [COST_COLUMN, TOKENS_COLUMN], minNameWidth: 10, compact: true },
+	{ columns: [COST_COLUMN], minNameWidth: 8, compact: true },
+];
 
 // =============================================================================
 // Data Collection
@@ -136,8 +198,7 @@ interface SessionMessage {
 
 interface ParsedSessionFile {
 	sessionId: string;
-	rawMessages: SessionMessage[];
-	dedupedMessages: SessionMessage[];
+	messages: SessionMessage[];
 }
 
 async function parseSessionFile(
@@ -149,8 +210,7 @@ async function parseSessionFile(
 		const content = await readFile(filePath, "utf8");
 		if (signal?.aborted) return null;
 		const lines = content.trim().split("\n");
-		const rawMessages: SessionMessage[] = [];
-		const dedupedMessages: SessionMessage[] = [];
+		const messages: SessionMessage[] = [];
 		let sessionId = "";
 
 		for (let i = 0; i < lines.length; i++) {
@@ -175,7 +235,14 @@ async function parseSessionFile(
 						const fallbackTs = entry.timestamp ? new Date(entry.timestamp).getTime() : 0;
 						const timestamp = msg.timestamp || (Number.isNaN(fallbackTs) ? 0 : fallbackTs);
 
-						const sessionMessage: SessionMessage = {
+						// Deduplicate copied history across branched session files.
+						// Keep the existing ccusage-style hash so current totals remain comparable.
+						const totalTokens = input + output + cacheRead + cacheWrite;
+						const hash = `${timestamp}:${totalTokens}`;
+						if (seenHashes.has(hash)) continue;
+						seenHashes.add(hash);
+
+						messages.push({
 							provider: msg.provider,
 							model: msg.model,
 							cost: msg.usage.cost?.total || 0,
@@ -184,16 +251,7 @@ async function parseSessionFile(
 							cacheRead,
 							cacheWrite,
 							timestamp,
-						};
-						rawMessages.push(sessionMessage);
-
-						// Deduplicate copied history across branched session files.
-						// Keep the existing ccusage-style hash so current totals remain comparable.
-						const totalTokens = input + output + cacheRead + cacheWrite;
-						const hash = `${timestamp}:${totalTokens}`;
-						if (seenHashes.has(hash)) continue;
-						seenHashes.add(hash);
-						dedupedMessages.push(sessionMessage);
+						});
 					}
 				}
 			} catch {
@@ -201,7 +259,7 @@ async function parseSessionFile(
 			}
 		}
 
-		return sessionId ? { sessionId, rawMessages, dedupedMessages } : null;
+		return sessionId ? { sessionId, messages } : null;
 	} catch {
 		return null;
 	}
@@ -211,18 +269,19 @@ async function parseSessionFile(
 function accumulateStats(
 	target: BaseStats,
 	cost: number,
-	tokens: { total: number; input: number; output: number; cache: number }
+	tokens: { total: number; input: number; output: number; cacheRead: number; cacheWrite: number }
 ): void {
 	target.messages++;
 	target.cost += cost;
 	target.tokens.total += tokens.total;
 	target.tokens.input += tokens.input;
 	target.tokens.output += tokens.output;
-	target.tokens.cache += tokens.cache;
+	target.tokens.cacheRead += tokens.cacheRead;
+	target.tokens.cacheWrite += tokens.cacheWrite;
 }
 
 function emptyTokens(): TokenStats {
-	return { total: 0, input: 0, output: 0, cache: 0 };
+	return { total: 0, input: 0, output: 0, cacheRead: 0, cacheWrite: 0 };
 }
 
 function emptyModelStats(): ModelStats {
@@ -244,14 +303,19 @@ function emptyUsageData(): UsageData {
 	return {
 		today: emptyTimeFilteredStats(),
 		thisWeek: emptyTimeFilteredStats(),
+		lastWeek: emptyTimeFilteredStats(),
 		allTime: emptyTimeFilteredStats(),
 	};
 }
 
-function getPeriodsForTimestamp(timestamp: number, todayMs: number, weekStartMs: number): TabName[] {
+function getPeriodsForTimestamp(timestamp: number, todayMs: number, weekStartMs: number, lastWeekStartMs: number): TabName[] {
 	const periods: TabName[] = ["allTime"];
 	if (timestamp >= todayMs) periods.push("today");
-	if (timestamp >= weekStartMs) periods.push("thisWeek");
+	if (timestamp >= weekStartMs) {
+		periods.push("thisWeek");
+	} else if (timestamp >= lastWeekStartMs) {
+		periods.push("lastWeek");
+	}
 	return periods;
 }
 
@@ -260,20 +324,22 @@ function addMessagesToUsageData(
 	sessionId: string,
 	messages: SessionMessage[],
 	todayMs: number,
-	weekStartMs: number
+	weekStartMs: number,
+	lastWeekStartMs: number
 ): void {
-	const sessionContributed = { today: false, thisWeek: false, allTime: false };
+	const sessionContributed = { today: false, thisWeek: false, lastWeek: false, allTime: false };
 
 	for (const msg of messages) {
-		const periods = getPeriodsForTimestamp(msg.timestamp, todayMs, weekStartMs);
+		const periods = getPeriodsForTimestamp(msg.timestamp, todayMs, weekStartMs, lastWeekStartMs);
 		const tokens = {
-			// Total = input + output only. cacheRead/cacheWrite are tracked separately.
-			// cacheRead tokens were already counted when first sent, so including them
-			// would double-count and massively inflate totals (cache hits repeat every message).
-			total: msg.input + msg.output,
+			// Count fresh tokens processed this turn.
+			// Include cacheWrite because those prompt tokens were newly written and billed.
+			// Exclude cacheRead because repeated cache hits would otherwise dominate totals.
+			total: msg.input + msg.output + msg.cacheWrite,
 			input: msg.input,
 			output: msg.output,
-			cache: msg.cacheRead + msg.cacheWrite,
+			cacheRead: msg.cacheRead,
+			cacheWrite: msg.cacheWrite,
 		};
 
 		for (const period of periods) {
@@ -304,10 +370,11 @@ function addMessagesToUsageData(
 
 	if (sessionContributed.today) data.today.totals.sessions++;
 	if (sessionContributed.thisWeek) data.thisWeek.totals.sessions++;
+	if (sessionContributed.lastWeek) data.lastWeek.totals.sessions++;
 	if (sessionContributed.allTime) data.allTime.totals.sessions++;
 }
 
-async function collectUsageData(signal?: AbortSignal): Promise<UsageDataByMode | null> {
+async function collectUsageData(signal?: AbortSignal): Promise<UsageData | null> {
 	const startOfToday = new Date();
 	startOfToday.setHours(0, 0, 0, 0);
 	const todayMs = startOfToday.getTime();
@@ -320,10 +387,12 @@ async function collectUsageData(signal?: AbortSignal): Promise<UsageDataByMode |
 	startOfWeek.setHours(0, 0, 0, 0);
 	const weekStartMs = startOfWeek.getTime();
 
-	const data: UsageDataByMode = {
-		deduped: emptyUsageData(),
-		raw: emptyUsageData(),
-	};
+	// Start of last week (previous Monday 00:00)
+	const startOfLastWeek = new Date(startOfWeek);
+	startOfLastWeek.setDate(startOfLastWeek.getDate() - 7);
+	const lastWeekStartMs = startOfLastWeek.getTime();
+
+	const data = emptyUsageData();
 
 	const sessionFiles = await getAllSessionFiles(signal);
 	if (signal?.aborted) return null;
@@ -335,8 +404,7 @@ async function collectUsageData(signal?: AbortSignal): Promise<UsageDataByMode |
 		if (signal?.aborted) return null;
 		if (!parsed) continue;
 
-		addMessagesToUsageData(data.raw, parsed.sessionId, parsed.rawMessages, todayMs, weekStartMs);
-		addMessagesToUsageData(data.deduped, parsed.sessionId, parsed.dedupedMessages, todayMs, weekStartMs);
+		addMessagesToUsageData(data, parsed.sessionId, parsed.messages, todayMs, weekStartMs, lastWeekStartMs);
 
 		await new Promise<void>((resolve) => setImmediate(resolve));
 	}
@@ -383,6 +451,54 @@ function padRight(s: string, len: number): string {
 	return s + " ".repeat(len - vis);
 }
 
+function sumColumnWidths(columns: DataColumn[]): number {
+	return columns.reduce((sum, col) => sum + col.width, 0);
+}
+
+function fitCell(s: string, len: number, align: "left" | "right" = "left"): string {
+	if (len <= 0) return "";
+	const truncated = truncateToWidth(s, len);
+	return align === "right" ? padLeft(truncated, len) : padRight(truncated, len);
+}
+
+function clampLines(lines: string[], width: number): string[] {
+	return lines.map((line) => truncateToWidth(line, Math.max(width, 0)));
+}
+
+function pickFittingText(width: number, variants: string[]): string {
+	for (const variant of variants) {
+		if (visibleWidth(variant) <= width) return variant;
+	}
+	return variants[variants.length - 1] || "";
+}
+
+function getTableLayout(width: number): TableLayout {
+	const safeWidth = Math.max(width, 0);
+
+	for (const candidate of TABLE_LAYOUTS) {
+		const columnsWidth = sumColumnWidths(candidate.columns);
+		const nameWidth = Math.min(MAX_NAME_COL_WIDTH, Math.max(safeWidth - columnsWidth, 0));
+		if (nameWidth >= candidate.minNameWidth) {
+			return {
+				columns: candidate.columns,
+				nameWidth,
+				tableWidth: nameWidth + columnsWidth,
+				compact: candidate.compact ?? false,
+			};
+		}
+	}
+
+	const fallback = TABLE_LAYOUTS[TABLE_LAYOUTS.length - 1]!;
+	const fallbackColumnsWidth = sumColumnWidths(fallback.columns);
+	const fallbackNameWidth = Math.min(MAX_NAME_COL_WIDTH, Math.max(safeWidth - fallbackColumnsWidth, 0));
+	return {
+		columns: fallback.columns,
+		nameWidth: fallbackNameWidth,
+		tableWidth: fallbackNameWidth + fallbackColumnsWidth,
+		compact: fallback.compact ?? false,
+	};
+}
+
 // =============================================================================
 // Component
 // =============================================================================
@@ -390,22 +506,15 @@ function padRight(s: string, len: number): string {
 const TAB_LABELS: Record<TabName, string> = {
 	today: "Today",
 	thisWeek: "This Week",
+	lastWeek: "Last Week",
 	allTime: "All Time",
 };
 
-const TAB_ORDER: TabName[] = ["today", "thisWeek", "allTime"];
-
-const MODE_LABELS: Record<UsageCountMode, string> = {
-	deduped: "Deduped",
-	raw: "Raw",
-};
-
-const MODE_ORDER: UsageCountMode[] = ["deduped", "raw"];
+const TAB_ORDER: TabName[] = ["today", "thisWeek", "lastWeek", "allTime"];
 
 class UsageComponent {
 	private activeTab: TabName = "allTime";
-	private activeMode: UsageCountMode = "deduped";
-	private data: UsageDataByMode;
+	private data: UsageData;
 	private selectedIndex = 0;
 	private expanded = new Set<string>();
 	private providerOrder: string[] = [];
@@ -413,7 +522,7 @@ class UsageComponent {
 	private requestRender: () => void;
 	private done: () => void;
 
-	constructor(theme: Theme, data: UsageDataByMode, requestRender: () => void, done: () => void) {
+	constructor(theme: Theme, data: UsageData, requestRender: () => void, done: () => void) {
 		this.theme = theme;
 		this.requestRender = requestRender;
 		this.done = done;
@@ -421,25 +530,14 @@ class UsageComponent {
 		this.updateProviderOrder();
 	}
 
-	private getActiveStats(): TimeFilteredStats {
-		return this.data[this.activeMode][this.activeTab];
-	}
-
 	private updateProviderOrder(): void {
-		const stats = this.getActiveStats();
+		const stats = this.data[this.activeTab];
 		this.providerOrder = Array.from(stats.providers.entries())
 			.sort((a, b) => b[1].cost - a[1].cost)
 			.map(([name]) => name);
 		this.selectedIndex = Math.min(this.selectedIndex, Math.max(0, this.providerOrder.length - 1));
 	}
 
-	private cycleMode(step: 1 | -1): void {
-		const idx = MODE_ORDER.indexOf(this.activeMode);
-		this.activeMode = MODE_ORDER[(idx + step + MODE_ORDER.length) % MODE_ORDER.length]!;
-		this.updateProviderOrder();
-		this.requestRender();
-	}
-
 	handleInput(data: string): void {
 		if (matchesKey(data, "escape") || matchesKey(data, "q")) {
 			this.done();
@@ -456,20 +554,6 @@ class UsageComponent {
 			this.activeTab = TAB_ORDER[(idx - 1 + TAB_ORDER.length) % TAB_ORDER.length]!;
 			this.updateProviderOrder();
 			this.requestRender();
-		} else if (matchesKey(data, "m")) {
-			this.cycleMode(1);
-		} else if (matchesKey(data, "d")) {
-			if (this.activeMode !== "deduped") {
-				this.activeMode = "deduped";
-				this.updateProviderOrder();
-				this.requestRender();
-			}
-		} else if (matchesKey(data, "r")) {
-			if (this.activeMode !== "raw") {
-				this.activeMode = "raw";
-				this.updateProviderOrder();
-				this.requestRender();
-			}
 		} else if (matchesKey(data, "up")) {
 			if (this.selectedIndex > 0) {
 				this.selectedIndex--;
@@ -497,16 +581,19 @@ class UsageComponent {
 	// Render Methods
 	// -------------------------------------------------------------------------
 
-	render(_width: number): string[] {
-		return [
-			...this.renderTitle(),
-			...this.renderTabs(),
-			...this.renderModes(),
-			...this.renderHeader(),
-			...this.renderRows(),
-			...this.renderTotals(),
-			...this.renderHelp(),
-		];
+	render(width: number): string[] {
+		const layout = getTableLayout(width);
+		return clampLines(
+			[
+				...this.renderTitle(),
+				...this.renderTabs(width, layout),
+				...this.renderHeader(layout),
+				...this.renderRows(layout),
+				...this.renderTotals(layout),
+				...this.renderHelp(width),
+			],
+			width
+		);
 	}
 
 	private renderTitle(): string[] {
@@ -514,66 +601,69 @@ class UsageComponent {
 		return [th.fg("accent", th.bold("Usage Statistics")), ""];
 	}
 
-	private renderTabs(): string[] {
+	private renderTabs(width: number, layout: TableLayout): string[] {
 		const th = this.theme;
-		const tabs = TAB_ORDER.map((tab) => {
+		const fullTabs = TAB_ORDER.map((tab) => {
 			const label = TAB_LABELS[tab];
 			return tab === this.activeTab ? th.fg("accent", `[${label}]`) : th.fg("dim", ` ${label} `);
 		}).join("  ");
-		return [tabs];
-	}
 
-	private renderModes(): string[] {
-		const th = this.theme;
-		const modes = MODE_ORDER.map((mode) => {
-			const label = MODE_LABELS[mode];
-			return mode === this.activeMode ? th.fg("accent", `[${label}]`) : th.fg("dim", ` ${label} `);
-		}).join("  ");
-		const note = this.activeMode === "deduped"
-			? "Dedupes copied branched-history messages. Recursive subagent sessions included."
-			: "Counts raw message totals from all session files. Recursive subagent sessions included.";
-		return [modes, th.fg("dim", note), ""];
+		const activeTabOnly = th.fg("accent", `[${TAB_LABELS[this.activeTab]}]`);
+		const tabLine = pickFittingText(width, [
+			fullTabs,
+			`${activeTabOnly}  ${th.fg("dim", "[Tab/←→]")}`,
+			activeTabOnly,
+		]);
+
+		const infoLines = layout.compact
+			? wrapTextWithAnsi(th.fg("dim", "Compact view. Widen the terminal for more columns."), Math.max(width, 1))
+			: [];
+
+		return [tabLine, ...infoLines, ""];
 	}
 
-	private renderHeader(): string[] {
+	private renderHeader(layout: TableLayout): string[] {
 		const th = this.theme;
 
-		let headerLine = padRight("Provider / Model", NAME_COL_WIDTH);
-		for (const col of DATA_COLUMNS) {
-			const label = padLeft(col.label, col.width);
+		let headerLine = fitCell("Provider / Model", layout.nameWidth);
+		for (const col of layout.columns) {
+			const label = fitCell(col.label, col.width, "right");
 			headerLine += col.dimmed ? th.fg("dim", label) : label;
 		}
 
-		return [th.fg("muted", headerLine), th.fg("border", "─".repeat(TABLE_WIDTH))];
+		return [th.fg("muted", headerLine), th.fg("border", "─".repeat(layout.tableWidth))];
 	}
 
 	private renderDataRow(
 		name: string,
 		stats: BaseStats & { sessions: Set<string> | number },
-		options: { indent?: number; selected?: boolean; dimAll?: boolean } = {}
+		layout: TableLayout,
+		options: { indent?: number; selected?: boolean; dimAll?: boolean; prefix?: string } = {}
 	): string {
 		const th = this.theme;
-		const { indent = 0, selected = false, dimAll = false } = options;
+		const { indent = 0, selected = false, dimAll = false, prefix } = options;
 
-		const indentStr = " ".repeat(indent);
-		const nameWidth = NAME_COL_WIDTH - indent;
-		const truncName = truncateToWidth(name, nameWidth - 1);
+		const rawPrefix = prefix ?? " ".repeat(indent);
+		const safePrefix = layout.nameWidth > 0 ? truncateToWidth(rawPrefix, layout.nameWidth, "") : "";
+		const prefixWidth = visibleWidth(safePrefix);
+		const innerNameWidth = Math.max(layout.nameWidth - prefixWidth, 0);
+		const truncName = innerNameWidth > 0 ? truncateToWidth(name, innerNameWidth) : "";
 		const styledName = selected ? th.fg("accent", truncName) : dimAll ? th.fg("dim", truncName) : truncName;
 
-		let row = indentStr + padRight(styledName, nameWidth);
+		let row = safePrefix + (innerNameWidth > 0 ? padRight(styledName, innerNameWidth) : "");
 
-		for (const col of DATA_COLUMNS) {
-			const value = col.getValue(stats);
+		for (const col of layout.columns) {
+			const value = fitCell(col.getValue(stats), col.width, "right");
 			const shouldDim = col.dimmed || dimAll;
-			row += shouldDim ? th.fg("dim", padLeft(value, col.width)) : padLeft(value, col.width);
+			row += shouldDim ? th.fg("dim", value) : value;
 		}
 
 		return row;
 	}
 
-	private renderRows(): string[] {
+	private renderRows(layout: TableLayout): string[] {
 		const th = this.theme;
-		const stats = this.getActiveStats();
+		const stats = this.data[this.activeTab];
 		const lines: string[] = [];
 
 		if (this.providerOrder.length === 0) {
@@ -586,22 +676,21 @@ class UsageComponent {
 			const providerStats = stats.providers.get(providerName)!;
 			const isSelected = i === this.selectedIndex;
 			const isExpanded = this.expanded.has(providerName);
-
-			// Provider row with expand/collapse arrow
 			const arrow = isExpanded ? "▾" : "▸";
-			const prefix = isSelected ? th.fg("accent", arrow + " ") : th.fg("dim", arrow + " ");
-			const dataRow = this.renderDataRow(providerName, providerStats, {
-				indent: 2,
-				selected: isSelected,
-			});
-			lines.push(prefix + dataRow.slice(2)); // Replace indent with arrow prefix
+			const prefix = isSelected ? th.fg("accent", `${arrow} `) : th.fg("dim", `${arrow} `);
+
+			lines.push(
+				this.renderDataRow(providerName, providerStats, layout, {
+					selected: isSelected,
+					prefix,
+				})
+			);
 
-			// Model rows (if expanded)
 			if (isExpanded) {
 				const models = Array.from(providerStats.models.entries()).sort((a, b) => b[1].cost - a[1].cost);
 
 				for (const [modelName, modelStats] of models) {
-					lines.push(this.renderDataRow(modelName, modelStats, { indent: 4, dimAll: true }));
+					lines.push(this.renderDataRow(modelName, modelStats, layout, { indent: 4, dimAll: true }));
 				}
 			}
 		}
@@ -609,21 +698,28 @@ class UsageComponent {
 		return lines;
 	}
 
-	private renderTotals(): string[] {
+	private renderTotals(layout: TableLayout): string[] {
 		const th = this.theme;
-		const stats = this.getActiveStats();
+		const stats = this.data[this.activeTab];
 
-		let totalRow = padRight(th.bold("Total"), NAME_COL_WIDTH);
-		for (const col of DATA_COLUMNS) {
-			const value = col.getValue(stats.totals);
-			totalRow += col.dimmed ? th.fg("dim", padLeft(value, col.width)) : padLeft(value, col.width);
+		let totalRow = fitCell(th.bold("Total"), layout.nameWidth);
+		for (const col of layout.columns) {
+			const value = fitCell(col.getValue(stats.totals), col.width, "right");
+			totalRow += col.dimmed ? th.fg("dim", value) : value;
 		}
 
-		return [th.fg("border", "─".repeat(TABLE_WIDTH)), totalRow, ""];
+		return [th.fg("border", "─".repeat(layout.tableWidth)), totalRow, ""];
 	}
 
-	private renderHelp(): string[] {
-		return [this.theme.fg("dim", "[Tab/←→] period  [m/d/r] count mode  [↑↓] select  [Enter] expand  [q] close")];
+	private renderHelp(width: number): string[] {
+		const line = pickFittingText(width, [
+			"[Tab/←→] period  [↑↓] select  [Enter] expand  [q] close",
+			"[Tab] period  [↑↓] select  [Enter] expand  [q] close",
+			"[↑↓] select  [Enter] expand  [q] close",
+			"[↑↓] select  [q] close",
+			"[q] close",
+		]);
+		return [this.theme.fg("dim", line)];
 	}
 
 	invalidate(): void {}
@@ -642,7 +738,7 @@ export default function (pi: ExtensionAPI) {
 				return;
 			}
 
-			const data = await ctx.ui.custom<UsageDataByMode | null>((tui, theme, _kb, done) => {
+			const data = await ctx.ui.custom<UsageData | null>((tui, theme, _kb, done) => {
 				const loader = new CancellableLoader(
 					tui,
 					(s: string) => theme.fg("accent", s),
@@ -650,7 +746,7 @@ export default function (pi: ExtensionAPI) {
 					"Loading Usage..."
 				);
 				let finished = false;
-				const finish = (value: UsageDataByMode | null) => {
+				const finish = (value: UsageData | null) => {
 					if (finished) return;
 					finished = true;
 					loader.dispose();
@@ -682,10 +778,10 @@ export default function (pi: ExtensionAPI) {
 
 				return {
 					render: (w: number) => {
-						const borderLines = container.render(w);
+						const borderLines = clampLines(container.render(w), w);
 						const usageLines = usage.render(w);
 						const bottomBorder = theme.fg("border", "─".repeat(w));
-						return [...borderLines, ...usageLines, "", bottomBorder];
+						return clampLines([...borderLines, ...usageLines, "", bottomBorder], w);
 					},
 					invalidate: () => container.invalidate(),
 					handleInput: (input: string) => usage.handleInput(input),

package/usage-extension/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tmustier/pi-usage-extension",
-  "version": "0.1.4",
+  "version": "0.2.0",
   "description": "Usage statistics dashboard for Pi sessions.",
   "license": "MIT",
   "author": "Thomas Mustier",