@tmustier/pi-usage-extension 0.8.1 → 0.9.0

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # Changelog
 
+## [0.9.0] - 2026-07-17
+
+### Added
+- **Export (`e`) in every view** (#67): table → per-model CSV with TOTAL row; graphs → CSV of exactly the plotted slice (visible series, current metric/grouping/cumulative, ISO buckets); insights → structured JSON. Files land in the cwd with self-describing names; a ✓/✗ note confirms the write.
+- **Table cut/filter** (#68): `/` live type-to-filter over provider and model names — when only models match, the provider row is recomputed from just those models; `x` hides the selected row; `a` resets. The Total row recomputes over the visible slice, with an explicit status line, and table exports honor the slice.
+
+### Changed
+- **Graphs is now the default view** (#66); `v` cycles Graphs → Table → Insights, and the title renders a view tab strip so switching is discoverable.
+- README refreshed with current screenshots of all three views (#69) and documentation for export and table filtering.
+
+### Fixed
+- Table selection could desync from rendered rows (the unsliced provider map leaked aggregation insertion order instead of cost-sorted order).
+
 ## [0.8.1] - 2026-07-17
 
 ### Changed

package/README.md

@@ -2,12 +2,12 @@
 
 A Pi extension that displays aggregated usage statistics across all sessions.
 
-![Default table view of /usage](screenshot.png)
+![Default graphs view of /usage](graphs-screenshot.png)
 
 ## Compatibility
 
 - **Pi version:** 0.42.4+
-- **Last updated:** 2026-07-17 (0.6.1)
+- **Last updated:** 2026-07-17 (0.9.0)
 
 ## Installation
 
@@ -57,11 +57,21 @@ In Pi, run:
 
 ### Views
 
-`/usage` has three view modes, cycled with `v`:
+`/usage` has three view modes, shown as a tab strip in the title and cycled with `v`:
 
-- **Table** (default) — per-provider / per-model stats with cost and token breakdown (screenshot at the top of this page).
+- **Graphs** (default) — an interactive braille line-chart explorer for usage over time (screenshot at the top of this page, details below).
+- **Table** — per-provider / per-model stats with cost and token breakdown, with keyboard filtering (details below).
 - **Insights** — data-driven characteristics of your cost for the active time period (details below). Insights are **independent lenses**, not a breakdown, so they overlap and don't sum to 100%.
-- **Graphs** — an interactive braille line-chart explorer for usage over time (details below).
+
+Every view can export its current slice with `e` — see [Export](#export).
+
+![Table view of /usage](screenshot.png)
+
+### Filtering the table
+
+- `/` opens a live type-to-filter over provider **and** model names (case-insensitive substring). When only models match, the provider row is recomputed from just the matching models — filtering `sol` shows openai-codex as exactly its `gpt-5.6-sol` numbers. `Enter` keeps the filter, `Esc` clears it.
+- `x` hides the selected provider row; `a` resets all hides and the filter.
+- The **Total row recomputes over the visible slice**, and a status line makes the cut explicit so a filtered table can't be mistaken for the full period.
 
 ![Insights view of /usage](insights-screenshot.png)
 
@@ -95,6 +105,18 @@ pi's built-in test providers (`faux-provider`, `fake-provider`) never call a rea
 
 A note on reading them: cache-miss and context numbers are **observed cost, not promised savings** — big-context messages often do bigger work. Treat the alarms as "look here", not as an invoice for waste.
 
+### Export
+
+Press `e` in any view to write the **current slice** to the current working directory:
+
+| View | File | Contents |
+|---|---|---|
+| Table | `usage-table-<period>[-filtered]-<stamp>.csv` | per-model rows + TOTAL, full precision; honors the active filter/hides |
+| Graphs | `usage-graph-<period>-<slice>-<stamp>.csv` | exactly what's plotted: visible series only, current metric/grouping/cumulative, ISO bucket starts |
+| Insights | `usage-insights-<period>-<stamp>.json` | period, totals, and the structured insight list |
+
+A `✓ Saved …` note confirms the write (or reports the error) above the help line.
+
 ### Graph explorer
 
 The **Graphs** view plots usage over time for the active period as a braille line chart, with a legend showing per-series totals and shares.
@@ -148,11 +170,14 @@ On narrow terminals, `/usage` automatically switches to a compact table instead
 | `Tab` / `←` `→` | Switch time period |
 | `↑` `↓` | Select provider *(table)* / move legend cursor *(graphs)* |
 | `Enter` / `Space` | Expand/collapse provider *(table)* / toggle series visibility *(graphs)* |
-| `v` | Cycle Table → Insights → Graphs view |
+| `v` | Cycle Graphs → Table → Insights view |
+| `e` | Export the current slice to CSV/JSON |
+| `/` | Type-to-filter providers and models *(table)* |
+| `x` | Hide the selected provider row *(table)* |
 | `m` | Cycle metric: cost / tokens / messages / reasoning *(graphs)* |
 | `g` | Cycle grouping: provider / model / thinking level / total *(graphs)* |
 | `c` | Toggle cumulative vs per-bucket *(graphs)* |
-| `a` | Show all series *(graphs)* |
+| `a` | Show all series *(graphs)* / reset filter and hides *(table)* |
 | `q` / `Esc` | Close |
 
 ## Performance & Caching

package/export.ts

@@ -0,0 +1,112 @@
+/**
+ * Pure builders for /usage export ([e] key).
+ *
+ * Each view exports its current slice: the table as per-model CSV rows, the
+ * graph as one CSV column per visible series, and insights as structured JSON.
+ * Builders are pure string producers so they stay trivially testable; the
+ * component owns file naming and disk writes.
+ */
+
+import type { Insight, ProviderStats, TotalStats } from "./data.ts";
+import type { GraphModel } from "./graph.ts";
+
+/** Quote a CSV field only when it needs it (comma, quote, or newline). */
+function csvField(value: string | number): string {
+	const s = String(value);
+	return /[",\n]/.test(s) ? `"${s.replace(/"/g, '""')}"` : s;
+}
+
+function csvLine(fields: (string | number)[]): string {
+	return fields.map(csvField).join(",");
+}
+
+/** Per-model rows (provider repeated), then a TOTAL row. */
+export function buildTableCsv(providers: ReadonlyMap<string, ProviderStats>, totals: TotalStats): string {
+	const lines = [
+		csvLine([
+			"provider",
+			"model",
+			"sessions",
+			"messages",
+			"cost_usd",
+			"fresh_tokens",
+			"input_tokens",
+			"output_tokens",
+			"cache_read_tokens",
+			"cache_write_tokens",
+		]),
+	];
+	const sorted = Array.from(providers.entries()).sort((a, b) => b[1].cost - a[1].cost);
+	for (const [providerName, provider] of sorted) {
+		const models = Array.from(provider.models.entries()).sort((a, b) => b[1].cost - a[1].cost);
+		for (const [modelName, model] of models) {
+			lines.push(
+				csvLine([
+					providerName,
+					modelName,
+					model.sessions.size,
+					model.messages,
+					model.cost,
+					model.tokens.total,
+					model.tokens.input,
+					model.tokens.output,
+					model.tokens.cacheRead,
+					model.tokens.cacheWrite,
+				])
+			);
+		}
+	}
+	lines.push(
+		csvLine([
+			"TOTAL",
+			"",
+			totals.sessions,
+			totals.messages,
+			totals.cost,
+			totals.tokens.total,
+			totals.tokens.input,
+			totals.tokens.output,
+			totals.tokens.cacheRead,
+			totals.tokens.cacheWrite,
+		])
+	);
+	return lines.join("\n") + "\n";
+}
+
+/**
+ * One row per time bucket, one column per visible series, values exactly as
+ * plotted (per-bucket or cumulative, current metric).
+ */
+export function buildGraphCsv(model: GraphModel): string {
+	const visible = model.series.filter((s) => !s.hidden);
+	const lines = [csvLine(["bucket_start", ...visible.map((s) => s.label)])];
+	for (let i = 0; i < model.bucketStarts.length; i++) {
+		lines.push(csvLine([new Date(model.bucketStarts[i]!).toISOString(), ...visible.map((s) => s.points[i] ?? 0)]));
+	}
+	return lines.join("\n") + "\n";
+}
+
+/** Structured JSON of the period's insights plus headline totals. */
+export function buildInsightsJson(period: string, totals: TotalStats, insights: Insight[]): string {
+	return (
+		JSON.stringify(
+			{
+				period,
+				generatedAt: new Date().toISOString(),
+				totals: { costUsd: totals.cost, messages: totals.messages, sessions: totals.sessions },
+				insights: insights.map((i) => ({ kind: i.kind, stat: i.stat, headline: i.headline, advice: i.advice })),
+			},
+			null,
+			"\t"
+		) + "\n"
+	);
+}
+
+/** usage-<view>-<period>[-<slice>]-<stamp>.<ext> in the current directory. */
+export function exportFileName(view: string, period: string, slice: string | null, ext: string, now: Date): string {
+	const pad = (n: number) => String(n).padStart(2, "0");
+	const stamp =
+		`${now.getFullYear()}${pad(now.getMonth() + 1)}${pad(now.getDate())}` +
+		`-${pad(now.getHours())}${pad(now.getMinutes())}${pad(now.getSeconds())}`;
+	return ["usage", view, period, ...(slice ? [slice] : []), stamp].join("-") + `.${ext}`;
+}

package/index.ts

@@ -15,7 +15,7 @@ import { CancellableLoader, Container, Spacer, matchesKey, visibleWidth, truncat
 
 import { collectUsageData, TAB_ORDER } from "./data";
 import type { CollectProgress } from "./data";
-import type { BaseStats, TabName, UsageData } from "./data";
+import type { BaseStats, ProviderStats, TabName, TotalStats, UsageData } from "./data";
 import {
 	buildGraphModel,
 	renderChart,
@@ -26,10 +26,19 @@ import {
 	TOTAL_SERIES_KEY,
 } from "./graph";
 import type { GraphGroupBy, GraphMetric, GraphModel } from "./graph";
+import { buildGraphCsv, buildInsightsJson, buildTableCsv, exportFileName } from "./export";
+import { writeFileSync } from "node:fs";
+import { join } from "node:path";
 
 type ViewMode = "table" | "insights" | "graph";
 
-const VIEW_CYCLE: ViewMode[] = ["table", "insights", "graph"];
+const VIEW_CYCLE: ViewMode[] = ["graph", "table", "insights"];
+
+const VIEW_LABELS: Record<ViewMode, string> = {
+	graph: "Graphs",
+	table: "Table",
+	insights: "Insights",
+};
 
 // =============================================================================
 // Column Configuration
@@ -262,7 +271,7 @@ const TAB_LABELS: Record<TabName, string> = {
 
 class UsageComponent {
 	private activeTab: TabName = "allTime";
-	private viewMode: ViewMode = "table";
+	private viewMode: ViewMode = "graph";
 	private data: UsageData;
 	private selectedIndex = 0;
 	private expanded = new Set<string>();
@@ -275,6 +284,10 @@ class UsageComponent {
 	private graphMetric: GraphMetric = "cost";
 	private graphGroupBy: GraphGroupBy = "provider";
 	private graphCumulative = true;
+	private exportNote: { text: string; ok: boolean } | null = null;
+	private tableHidden = new Set<string>();
+	private tableFilter = "";
+	private tableFilterEditing = false;
 	private graphHidden = new Set<string>();
 	private graphLegendIndex = 0;
 
@@ -291,10 +304,94 @@ class UsageComponent {
 		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));
+		this.clampTableSelection();
+	}
+
+	private clampTableSelection(): void {
+		this.selectedIndex = Math.min(this.selectedIndex, Math.max(0, this.visibleTable().providers.size - 1));
+	}
+
+	/**
+	 * The table slice after hides and the text filter. A filter matches a
+	 * provider name (whole provider stays) or individual model names, in which
+	 * case the provider row is synthesized from just the matching models so
+	 * the totals row and exports reflect exactly what is on screen.
+	 */
+	private visibleTable(): { providers: Map<string, ProviderStats>; totals: TotalStats } {
+		const stats = this.data[this.activeTab];
+		const q = this.tableFilter.trim().toLowerCase();
+		// Always iterate providerOrder so the map is cost-sorted — selection
+		// indexes and rendered rows must agree on ordering.
+		const providers = new Map<string, ProviderStats>();
+		for (const name of this.providerOrder) {
+			if (this.tableHidden.has(name)) continue;
+			const full = stats.providers.get(name)!;
+			if (!q || name.toLowerCase().includes(q)) {
+				providers.set(name, full);
+				continue;
+			}
+			const models = new Map(Array.from(full.models).filter(([model]) => model.toLowerCase().includes(q)));
+			if (models.size === 0) continue;
+			const synth: ProviderStats = {
+				messages: 0,
+				cost: 0,
+				tokens: { total: 0, input: 0, output: 0, cacheRead: 0, cacheWrite: 0 },
+				sessions: new Set<string>(),
+				models,
+			};
+			for (const model of models.values()) {
+				synth.messages += model.messages;
+				synth.cost += model.cost;
+				synth.tokens.total += model.tokens.total;
+				synth.tokens.input += model.tokens.input;
+				synth.tokens.output += model.tokens.output;
+				synth.tokens.cacheRead += model.tokens.cacheRead;
+				synth.tokens.cacheWrite += model.tokens.cacheWrite;
+				for (const s of model.sessions) synth.sessions.add(s);
+			}
+			providers.set(name, synth);
+		}
+		if (!q && this.tableHidden.size === 0) return { providers, totals: stats.totals };
+
+		const totals: TotalStats = {
+			sessions: 0,
+			messages: 0,
+			cost: 0,
+			tokens: { total: 0, input: 0, output: 0, cacheRead: 0, cacheWrite: 0 },
+		};
+		const sessions = new Set<string>();
+		for (const provider of providers.values()) {
+			totals.messages += provider.messages;
+			totals.cost += provider.cost;
+			totals.tokens.total += provider.tokens.total;
+			totals.tokens.input += provider.tokens.input;
+			totals.tokens.output += provider.tokens.output;
+			totals.tokens.cacheRead += provider.tokens.cacheRead;
+			totals.tokens.cacheWrite += provider.tokens.cacheWrite;
+			for (const s of provider.sessions) sessions.add(s);
+		}
+		totals.sessions = sessions.size;
+		return { providers, totals };
 	}
 
 	handleInput(data: string): void {
+		// Filter typing captures printable keys, so it runs before everything.
+		if (this.viewMode === "table" && this.tableFilterEditing) {
+			if (matchesKey(data, "escape")) {
+				this.tableFilter = "";
+				this.tableFilterEditing = false;
+			} else if (matchesKey(data, "enter")) {
+				this.tableFilterEditing = false;
+			} else if (matchesKey(data, "backspace")) {
+				this.tableFilter = this.tableFilter.slice(0, -1);
+			} else if (data.length === 1 && data >= " " && data !== "\x7f") {
+				this.tableFilter += data;
+			}
+			this.clampTableSelection();
+			this.requestRender();
+			return;
+		}
+
 		if (matchesKey(data, "escape") || matchesKey(data, "q")) {
 			this.done();
 			return;
@@ -303,6 +400,13 @@ class UsageComponent {
 		if (matchesKey(data, "v")) {
 			const idx = VIEW_CYCLE.indexOf(this.viewMode);
 			this.viewMode = VIEW_CYCLE[(idx + 1) % VIEW_CYCLE.length]!;
+			this.exportNote = null;
+			this.requestRender();
+			return;
+		}
+
+		if (matchesKey(data, "e")) {
+			this.exportCurrentView();
 			this.requestRender();
 			return;
 		}
@@ -315,26 +419,45 @@ class UsageComponent {
 			const idx = TAB_ORDER.indexOf(this.activeTab);
 			this.activeTab = TAB_ORDER[(idx + 1) % TAB_ORDER.length]!;
 			this.updateProviderOrder();
+			this.exportNote = null;
 			this.requestRender();
 		} else if (matchesKey(data, "shift+tab") || matchesKey(data, "left")) {
 			const idx = TAB_ORDER.indexOf(this.activeTab);
 			this.activeTab = TAB_ORDER[(idx - 1 + TAB_ORDER.length) % TAB_ORDER.length]!;
 			this.updateProviderOrder();
+			this.exportNote = null;
 			this.requestRender();
 		} else if (this.viewMode === "graph") {
 			// Graph-specific keys were handled above; swallow table-only keys.
+		} else if (this.viewMode === "table" && data === "/") {
+			this.tableFilterEditing = true;
+			this.requestRender();
+		} else if (this.viewMode === "table" && data === "x") {
+			const visible = Array.from(this.visibleTable().providers.keys());
+			const provider = visible[this.selectedIndex];
+			if (provider) {
+				this.tableHidden.add(provider);
+				this.clampTableSelection();
+				this.requestRender();
+			}
+		} else if (this.viewMode === "table" && data === "a") {
+			this.tableHidden.clear();
+			this.tableFilter = "";
+			this.tableFilterEditing = false;
+			this.clampTableSelection();
+			this.requestRender();
 		} else if (this.viewMode === "table" && matchesKey(data, "up")) {
 			if (this.selectedIndex > 0) {
 				this.selectedIndex--;
 				this.requestRender();
 			}
 		} else if (this.viewMode === "table" && matchesKey(data, "down")) {
-			if (this.selectedIndex < this.providerOrder.length - 1) {
+			if (this.selectedIndex < this.visibleTable().providers.size - 1) {
 				this.selectedIndex++;
 				this.requestRender();
 			}
 		} else if (this.viewMode === "table" && (matchesKey(data, "enter") || matchesKey(data, "space"))) {
-			const provider = this.providerOrder[this.selectedIndex];
+			const provider = Array.from(this.visibleTable().providers.keys())[this.selectedIndex];
 			if (provider) {
 				if (this.expanded.has(provider)) {
 					this.expanded.delete(provider);
@@ -382,6 +505,33 @@ class UsageComponent {
 		return true;
 	}
 
+	private exportCurrentView(): void {
+		const now = new Date();
+		let name: string;
+		let content: string;
+		const stats = this.data[this.activeTab];
+		if (this.viewMode === "graph") {
+			const slice = `${this.graphCumulative ? "cumulative" : "per-bucket"}-${this.graphMetric}-by-${this.graphGroupBy}`;
+			name = exportFileName("graph", this.activeTab, slice, "csv", now);
+			content = buildGraphCsv(this.buildGraphModelForView());
+		} else if (this.viewMode === "insights") {
+			name = exportFileName("insights", this.activeTab, null, "json", now);
+			content = buildInsightsJson(this.activeTab, stats.totals, stats.insights.insights);
+		} else {
+			const visible = this.visibleTable();
+			const sliced = this.tableFilter.trim() !== "" || this.tableHidden.size > 0;
+			name = exportFileName("table", this.activeTab, sliced ? "filtered" : null, "csv", now);
+			content = buildTableCsv(visible.providers, visible.totals);
+		}
+		try {
+			const path = join(process.cwd(), name);
+			writeFileSync(path, content);
+			this.exportNote = { text: `Saved ${name}`, ok: true };
+		} catch (err) {
+			this.exportNote = { text: `Export failed: ${err instanceof Error ? err.message : String(err)}`, ok: false };
+		}
+	}
+
 	private buildGraphModelForView(): GraphModel {
 		return buildGraphModel(this.data.hourly, {
 			period: this.activeTab,
@@ -396,7 +546,7 @@ class UsageComponent {
 	render(width: number): string[] {
 		if (this.viewMode === "graph") {
 			return clampLines(
-				[...this.renderTitle(), ...this.renderTabs(width, getTableLayout(width)), ...this.renderGraph(width), ...this.renderHelp(width)],
+				[...this.renderTitle(width), ...this.renderTabs(width, getTableLayout(width)), ...this.renderGraph(width), ...this.renderHelp(width)],
 				width
 			);
 		}
@@ -404,7 +554,7 @@ class UsageComponent {
 		if (this.viewMode === "insights") {
 			return clampLines(
 				[
-					...this.renderTitle(),
+					...this.renderTitle(width),
 					...this.renderTabs(width, getTableLayout(width)),
 					...this.renderInsights(width),
 					...this.renderHelp(width),
@@ -416,7 +566,7 @@ class UsageComponent {
 		const layout = getTableLayout(width);
 		return clampLines(
 			[
-				...this.renderTitle(),
+				...this.renderTitle(width),
 				...this.renderTabs(width, layout),
 				...this.renderHeader(layout),
 				...this.renderRows(layout),
@@ -428,11 +578,21 @@ class UsageComponent {
 		);
 	}
 
-	private renderTitle(): string[] {
+	private renderTitle(width: number): string[] {
 		const th = this.theme;
-		const label =
-			this.viewMode === "insights" ? "Usage Insights" : this.viewMode === "graph" ? "Usage Graphs" : "Usage Statistics";
-		return [th.fg("accent", th.bold(label)), ""];
+		const title = th.fg("accent", th.bold("Usage"));
+		// Render the views as a tab strip (like the period tabs) so it is
+		// obvious there are multiple views and [v] switches between them.
+		const fullStrip = VIEW_CYCLE.map((view) =>
+			view === this.viewMode ? th.fg("accent", `[${VIEW_LABELS[view]}]`) : th.fg("dim", ` ${VIEW_LABELS[view]} `)
+		).join(" ");
+		const activeOnly = th.fg("accent", `[${VIEW_LABELS[this.viewMode]}]`);
+		const line = pickFittingText(width, [
+			`${title}   ${fullStrip}  ${th.fg("dim", "[v]")}`,
+			`${title}   ${activeOnly}  ${th.fg("dim", "[v]")}`,
+			`${title} ${activeOnly}`,
+		]);
+		return [line, ""];
 	}
 
 	private renderGraph(width: number): string[] {
@@ -589,6 +749,17 @@ class UsageComponent {
 				? wrapTextWithAnsi(th.fg("dim", "Compact view. Widen the terminal for more columns."), Math.max(width, 1))
 				: [];
 
+		if (this.viewMode === "table") {
+			if (this.tableFilterEditing) {
+				infoLines.push(`${th.fg("accent", `/ ${this.tableFilter}▌`)}  ${th.fg("dim", "[Enter] keep · [Esc] clear")}`);
+			} else if (this.tableFilter.trim() !== "" || this.tableHidden.size > 0) {
+				const parts: string[] = [];
+				if (this.tableFilter.trim() !== "") parts.push(`filter: “${this.tableFilter.trim()}”`);
+				if (this.tableHidden.size > 0) parts.push(`${this.tableHidden.size} hidden`);
+				infoLines.push(th.fg("warning", `${parts.join(" · ")}  ·  totals reflect this slice · [a] reset`));
+			}
+		}
+
 		return [tabLine, ...infoLines, ""];
 	}
 
@@ -633,7 +804,6 @@ class UsageComponent {
 
 	private renderRows(layout: TableLayout): string[] {
 		const th = this.theme;
-		const stats = this.data[this.activeTab];
 		const lines: string[] = [];
 
 		if (this.providerOrder.length === 0) {
@@ -641,9 +811,14 @@ class UsageComponent {
 			return lines;
 		}
 
-		for (let i = 0; i < this.providerOrder.length; i++) {
-			const providerName = this.providerOrder[i]!;
-			const providerStats = stats.providers.get(providerName)!;
+		const visible = Array.from(this.visibleTable().providers.entries());
+		if (visible.length === 0) {
+			lines.push(th.fg("dim", "  Nothing matches the current filter — [a] resets"));
+			return lines;
+		}
+
+		for (let i = 0; i < visible.length; i++) {
+			const [providerName, providerStats] = visible[i]!;
 			const isSelected = i === this.selectedIndex;
 			const isExpanded = this.expanded.has(providerName);
 			const arrow = isExpanded ? "▾" : "▸";
@@ -670,11 +845,11 @@ class UsageComponent {
 
 	private renderTotals(layout: TableLayout): string[] {
 		const th = this.theme;
-		const stats = this.data[this.activeTab];
+		const { totals } = this.visibleTable();
 
 		let totalRow = fitCell(th.bold("Total"), layout.nameWidth);
 		for (const col of layout.columns) {
-			const value = fitCell(col.getValue(stats.totals), col.width, "right");
+			const value = fitCell(col.getValue(totals), col.width, "right");
 			totalRow += col.dimmed ? th.fg("dim", value) : value;
 		}
 
@@ -692,32 +867,35 @@ class UsageComponent {
 	}
 
 	private renderHelp(width: number): string[] {
+		const noteLines = this.exportNote
+			? [this.theme.fg(this.exportNote.ok ? "success" : "error", `${this.exportNote.ok ? "✓" : "✗"} ${this.exportNote.text}`), ""]
+			: [];
 		const variants =
 			this.viewMode === "graph"
 				? [
-						"[Tab/←→] period  [m] metric  [g] group  [c] cumulative  [↑↓/Enter] filter  [a] all  [v] view  [q] close",
-						"[Tab] period  [m] metric  [g] group  [c] cumul  [↑↓/Enter] filter  [v] view  [q] close",
+						"[Tab/←→] period  [m] metric  [g] group  [c] cumulative  [↑↓/Enter] filter  [a] all  [e] export  [v] view  [q] close",
+						"[Tab] period  [m] metric  [g] group  [c] cumul  [↑↓/Enter] filter  [e] export  [v] view  [q] close",
 						"[m] metric  [g] group  [c] cumul  [↑↓] filter  [q] close",
 						"[m] [g] [c] [↑↓] [q]",
 						"[q] close",
 				  ]
 				: this.viewMode === "insights"
 				? [
-						"[Tab/←→] period  [v] graph view  [q] close",
-						"[Tab] period  [v] graphs  [q] close",
-						"[v] graphs  [q] close",
+						"[Tab/←→] period  [e] export  [v] view  [q] close",
+						"[Tab] period  [e] export  [v] view  [q] close",
+						"[v] view  [q] close",
 						"[q] close",
 				  ]
 				: [
-						"[Tab/←→] period  [↑↓] select  [Enter] expand  [v] insights  [q] close",
-						"[Tab] period  [↑↓] select  [Enter] expand  [v] insights  [q] close",
-						"[↑↓] select  [Enter] expand  [v] insights  [q] close",
-						"[↑↓] select  [v] insights  [q] close",
+						"[Tab/←→] period  [↑↓] select  [Enter] expand  [/] filter  [x] hide  [a] all  [e] export  [v] view  [q] close",
+						"[Tab] period  [↑↓] select  [Enter] expand  [/] filter  [x] hide  [e] export  [v] view  [q] close",
+						"[↑↓] select  [Enter] expand  [/] filter  [x] hide  [v] view  [q] close",
+						"[↑↓] select  [/] [x] [v] [q]",
 						"[↑↓] select  [q] close",
 						"[q] close",
 				  ];
 		const line = pickFittingText(width, variants);
-		return [this.theme.fg("dim", line)];
+		return [...noteLines, this.theme.fg("dim", line)];
 	}
 
 	invalidate(): void {}

package/package.json

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