pi-extensions 0.1.24 → 0.1.28

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.24",
+  "version": "0.1.28",
   "license": "MIT",
   "private": false,
   "keywords": [

package/usage-extension/CHANGELOG.md

@@ -1,5 +1,23 @@
 # Changelog
 
+## 0.2.1 - 2026-04-17
+- Add a one-line formula footer to the `/usage` dashboard (`Tokens = Input + Output + CacheWrite  ·  ↑In = Input + CacheWrite`)
+- README now calls out the 0.2.0 formula change explicitly under the columns table
+
+## 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

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 (0.2.1)
 
 ## Installation
 
@@ -61,6 +61,7 @@ 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.
@@ -77,10 +78,14 @@ 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)* |
+
+> **As of 0.2.0:** `Tokens = Input + Output + CacheWrite` and `↑In = Input + CacheWrite`. `CacheRead` stays out of `Tokens` so repeated cache hits don't swamp the dashboard. The dashboard itself shows a one-line footer reminder.
+
+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
 
@@ -109,6 +114,8 @@ 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.

package/usage-extension/index.ts

@@ -2,14 +2,14 @@
  * /usage - Usage statistics dashboard
  *
  * Shows an inline view with usage stats grouped by provider.
- * - Tab cycles: Today → This Week → All Time
+ * - 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";
@@ -22,7 +22,8 @@ interface TokenStats {
 	total: number;
 	input: number;
 	output: number;
-	cache: number;
+	cacheRead: number;
+	cacheWrite: number;
 }
 
 interface BaseStats {
@@ -52,10 +53,11 @@ interface TimeFilteredStats {
 interface UsageData {
 	today: TimeFilteredStats;
 	thisWeek: TimeFilteredStats;
+	lastWeek: TimeFilteredStats;
 	allTime: TimeFilteredStats;
 }
 
-type TabName = "today" | "thisWeek" | "allTime";
+type TabName = "today" | "thisWeek" | "lastWeek" | "allTime";
 
 // =============================================================================
 // Column Configuration
@@ -68,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
@@ -204,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 {
@@ -237,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;
 }
 
@@ -253,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) {
@@ -297,6 +370,7 @@ 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++;
 }
 
@@ -313,6 +387,11 @@ async function collectUsageData(signal?: AbortSignal): Promise<UsageData | null>
 	startOfWeek.setHours(0, 0, 0, 0);
 	const weekStartMs = startOfWeek.getTime();
 
+	// 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);
@@ -325,7 +404,7 @@ async function collectUsageData(signal?: AbortSignal): Promise<UsageData | null>
 		if (signal?.aborted) return null;
 		if (!parsed) continue;
 
-		addMessagesToUsageData(data, parsed.sessionId, parsed.messages, todayMs, weekStartMs);
+		addMessagesToUsageData(data, parsed.sessionId, parsed.messages, todayMs, weekStartMs, lastWeekStartMs);
 
 		await new Promise<void>((resolve) => setImmediate(resolve));
 	}
@@ -372,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
 // =============================================================================
@@ -379,10 +506,11 @@ 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 TAB_ORDER: TabName[] = ["today", "thisWeek", "lastWeek", "allTime"];
 
 class UsageComponent {
 	private activeTab: TabName = "allTime";
@@ -453,15 +581,20 @@ class UsageComponent {
 	// Render Methods
 	// -------------------------------------------------------------------------
 
-	render(_width: number): string[] {
-		return [
-			...this.renderTitle(),
-			...this.renderTabs(),
-			...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.renderFormulaNote(width),
+				...this.renderHelp(width),
+			],
+			width
+		);
 	}
 
 	private renderTitle(): string[] {
@@ -469,52 +602,67 @@ 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, th.fg("dim", "Dedupes copied branched-history messages. Recursive subagent sessions included."), ""];
+
+		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.data[this.activeTab];
 		const lines: string[] = [];
@@ -529,22 +677,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 }));
 				}
 			}
 		}
@@ -552,21 +699,38 @@ class UsageComponent {
 		return lines;
 	}
 
-	private renderTotals(): string[] {
+	private renderTotals(layout: TableLayout): string[] {
 		const th = this.theme;
 		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 renderFormulaNote(width: number): string[] {
+		const line = pickFittingText(width, [
+			"Tokens = Input + Output + CacheWrite  ·  ↑In = Input + CacheWrite  (as of 0.2.0)",
+			"Tokens = In + Out + CacheWrite  ·  ↑In = In + CacheWrite  (v0.2.0+)",
+			"Tokens & ↑In include CacheWrite (v0.2.0+)",
+			"Incl. CacheWrite (v0.2.0+)",
+		]);
+		return [this.theme.fg("dim", line), ""];
 	}
 
-	private renderHelp(): string[] {
-		return [this.theme.fg("dim", "[Tab/←→] period  [↑↓] 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 {}
@@ -625,10 +789,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.5",
+  "version": "0.2.1",
   "description": "Usage statistics dashboard for Pi sessions.",
   "license": "MIT",
   "author": "Thomas Mustier",