@po.dev/pi-usage 1.0.0

package/index.ts

@@ -0,0 +1,289 @@
+import { appendFile, mkdir, readFile } from "node:fs/promises";
+import { homedir } from "node:os";
+import { join } from "node:path";
+import type { AssistantMessage } from "@earendil-works/pi-ai";
+import { type Theme, type ExtensionAPI, type ExtensionCommandContext } from "@earendil-works/pi-coding-agent";
+import { matchesKey, truncateToWidth, visibleWidth } from "@earendil-works/pi-tui";
+
+const VERSION = "v1.0.0";
+const usageDir = join(homedir(), ".pi", "agent", "usage");
+const usageFile = join(usageDir, "events.jsonl");
+
+// ── Data ──────────────────────────────────────────────────────────────────────
+
+type ModelStats = { input: number; output: number; cost: number; count: number };
+type Totals = { input: number; output: number; cost: number; count: number; models: Map<string, ModelStats> };
+
+function emptyTotals(): Totals {
+	return { input: 0, output: 0, cost: 0, count: 0, models: new Map() };
+}
+
+function add(t: Totals, model: string, input: number, output: number, cost: number) {
+	t.input += input; t.output += output; t.cost += cost; t.count++;
+	const m = t.models.get(model) ?? { input: 0, output: 0, cost: 0, count: 0 };
+	m.input += input; m.output += output; m.cost += cost; m.count++;
+	t.models.set(model, m);
+}
+
+type Row = { timestamp: string; model: string; input: number; output: number; cost: number };
+
+async function loadRows(): Promise<Row[]> {
+	try {
+		return (await readFile(usageFile, "utf8")).split("\n").filter(Boolean).map(l => JSON.parse(l) as Row);
+	} catch (e: unknown) {
+		if ((e as NodeJS.ErrnoException).code === "ENOENT") return [];
+		throw e;
+	}
+}
+
+function sumRows(rows: Row[], filter?: (r: Row) => boolean): Totals {
+	const t = emptyTotals();
+	for (const r of rows) if (!filter || filter(r)) add(t, r.model, r.input || 0, r.output || 0, r.cost || 0);
+	return t;
+}
+
+function sessionTotals(ctx: ExtensionCommandContext): Totals {
+	const t = emptyTotals();
+	const model = ctx.model ? `${ctx.model.provider}/${ctx.model.id}` : "unknown";
+	for (const entry of ctx.sessionManager.getBranch()) {
+		if (entry.type !== "message" || entry.message.role !== "assistant") continue;
+		const msg = entry.message as AssistantMessage;
+		add(t, model, msg.usage.input || 0, msg.usage.output || 0, msg.usage.cost?.total || 0);
+	}
+	return t;
+}
+
+// ── Format ────────────────────────────────────────────────────────────────────
+
+function fmtTokens(n: number): string {
+	if (n >= 1_000_000) return `${(n / 1_000_000).toFixed(1)}M`;
+	if (n >= 1_000) return `${(n / 1_000).toFixed(1)}K`;
+	return String(n);
+}
+
+function fmtCost(n: number): string {
+	if (n >= 100) return `$${n.toFixed(0)}`;
+	if (n >= 1) return `$${n.toFixed(2)}`;
+	if (n >= 0.01) return `$${n.toFixed(3)}`;
+	return `$${n.toFixed(4)}`;
+}
+
+// ── Render helpers ────────────────────────────────────────────────────────────
+
+// Pad ANSI string to target visible width
+function padR(s: string, w: number): string {
+	const vw = visibleWidth(s);
+	return vw < w ? s + " ".repeat(w - vw) : s;
+}
+
+// Render a card box. Returns lines each exactly `cardW` visible chars wide.
+function renderCard(title: string, content: string[], cardW: number, th: Theme): string[] {
+	const inner = cardW - 2;
+	const bdr = (s: string) => th.fg("border", s);
+	const titleThemed = th.fg("muted", title);
+	const titleVW = visibleWidth(titleThemed);
+	const dashAfter = Math.max(0, inner - 2 - titleVW - 1);
+
+	const lines: string[] = [];
+	lines.push(bdr("┌─ ") + titleThemed + bdr(" " + "─".repeat(dashAfter) + "┐"));
+	lines.push(bdr("│") + " ".repeat(inner) + bdr("│"));
+	for (const line of content) {
+		const cell = truncateToWidth(padR(" " + line, inner), inner);
+		lines.push(bdr("│") + cell + bdr("│"));
+	}
+	lines.push(bdr("│") + " ".repeat(inner) + bdr("│"));
+	lines.push(bdr("└") + bdr("─".repeat(inner)) + bdr("┘"));
+	return lines;
+}
+
+// Zip two card arrays side by side. Both must have equal length.
+function sideBySide(left: string[], right: string[], gap = "  "): string[] {
+	const lw = left[0] ? visibleWidth(left[0]) : 0;
+	const n = Math.max(left.length, right.length);
+	return Array.from({ length: n }, (_, i) => {
+		const l = i < left.length ? left[i]! : " ".repeat(lw);
+		const r = i < right.length ? right[i]! : "";
+		return l + gap + r;
+	});
+}
+
+// Normalize two content arrays to the same length (pad shorter with empty strings)
+function equalLen(a: string[], b: string[]): [string[], string[]] {
+	const n = Math.max(a.length, b.length);
+	return [
+		[...a, ...Array<string>(n - a.length).fill("")],
+		[...b, ...Array<string>(n - b.length).fill("")],
+	];
+}
+
+function progressBar(pct: number, barW: number, th: Theme): string {
+	const filled = Math.round(Math.max(0, Math.min(1, pct)) * barW);
+	return th.fg("accent", "█".repeat(filled)) + th.fg("dim", "░".repeat(Math.max(0, barW - filled)));
+}
+
+// ── Dashboard render ──────────────────────────────────────────────────────────
+
+function renderDashboard(
+	th: Theme,
+	session: Totals,
+	today: Totals,
+	month: Totals,
+	currentModel: string,
+	width: number,
+): string[] {
+	const lines: string[] = [];
+	const indent = "  ";
+
+	// Header
+	const nameStr = th.fg("accent", th.bold("pi-usage")) + " " + th.fg("dim", VERSION);
+	const hintStr = th.fg("dim", "/usage  ");
+	const hdrGap = Math.max(0, width - visibleWidth(nameStr) - visibleWidth(hintStr) - indent.length);
+	lines.push(indent + nameStr + " ".repeat(hdrGap) + hintStr);
+	lines.push("");
+
+	// Model + progress bar
+	const shortModel = currentModel.split("/").pop() ?? currentModel;
+	const modelDisp = th.fg("accent", shortModel);
+	const todayPct = month.cost > 0 ? today.cost / month.cost : 0;
+	const fixedParts = indent.length + visibleWidth(modelDisp) + 4 + visibleWidth(fmtCost(today.cost)) + 2 + 4 + 4; // rough fixed
+	const barW = Math.max(8, width - fixedParts);
+	const bar = progressBar(todayPct, barW, th);
+	const pctStr = th.fg("dim", `${Math.round(todayPct * 100)}%`);
+	lines.push(indent + modelDisp + "    " + th.fg("success", fmtCost(today.cost)) + "  " + bar + "  " + pctStr);
+	lines.push("");
+
+	// Cards — compute width so two fit side by side with indent and gap
+	const cardW = Math.floor((width - indent.length * 2 - 2) / 2); // 2 = gap chars
+
+	// Row 1: session | today
+	const sessContent = [
+		th.fg("warning", th.bold(fmtCost(session.cost))),
+		th.fg("dim", `${fmtTokens(session.input + session.output)} tokens · ${session.count} turns`),
+	];
+	const todayContent = [
+		th.fg("accent", th.bold(fmtCost(today.cost))),
+		th.fg("dim", `${fmtTokens(today.input + today.output)} tokens · ${today.count} turns`),
+	];
+	const [sc, tc] = equalLen(sessContent, todayContent);
+	const row1 = sideBySide(renderCard("This Session", sc, cardW, th), renderCard("Today", tc, cardW, th));
+	lines.push(...row1.map(l => indent + l));
+	lines.push("");
+
+	// Row 2: month | model breakdown
+	const monthContent = [
+		th.fg("success", th.bold(fmtCost(month.cost))),
+		th.fg("dim", `${fmtTokens(month.input + month.output)} tokens · ${month.count} turns`),
+	];
+
+	const topModels = [...month.models.entries()].sort((a, b) => b[1].cost - a[1].cost).slice(0, 5);
+	const modelInner = cardW - 4; // card inner width minus "│ " and "│"
+	const modelContent: string[] = topModels.length > 0
+		? topModels.map(([name, t]) => {
+			const short = name.split("/").pop()?.slice(0, 18) ?? name;
+			const nameDisp = th.fg("accent", short);
+			const costDisp = fmtCost(t.cost);
+			const gap = Math.max(1, modelInner - visibleWidth(nameDisp) - costDisp.length);
+			return nameDisp + " ".repeat(gap) + costDisp;
+		})
+		: [th.fg("muted", "no data yet")];
+
+	const [mc, mdc] = equalLen(monthContent, modelContent);
+	const row2 = sideBySide(renderCard("This Month", mc, cardW, th), renderCard("By Model", mdc, cardW, th));
+	lines.push(...row2.map(l => indent + l));
+	lines.push("");
+
+	// Footer
+	const footer = th.fg("dim", "Esc / Enter to close");
+	const footerPad = Math.max(0, width - visibleWidth(footer) - 2);
+	lines.push(" ".repeat(footerPad) + footer + "  ");
+
+	return lines.map(l => truncateToWidth(l, width));
+}
+
+// ── Command ───────────────────────────────────────────────────────────────────
+
+async function showUsage(ctx: ExtensionCommandContext, session: Totals) {
+	const rows = await loadRows();
+	const now = new Date();
+	const todayStr = now.toISOString().slice(0, 10);
+	const monthStr = now.toISOString().slice(0, 7);
+
+	const today = sumRows(rows, r => r.timestamp.startsWith(todayStr));
+	const month = sumRows(rows, r => r.timestamp.startsWith(monthStr));
+	const model = ctx.model ? `${ctx.model.provider}/${ctx.model.id}` : "unknown";
+
+	if (ctx.mode !== "tui") {
+		const lines = [
+			`pi-usage ${VERSION}`,
+			`Session:  ${fmtCost(session.cost)} (${fmtTokens(session.input + session.output)} tokens, ${session.count} turns)`,
+			`Today:    ${fmtCost(today.cost)} (${fmtTokens(today.input + today.output)} tokens, ${today.count} turns)`,
+			`Month:    ${fmtCost(month.cost)} (${fmtTokens(month.input + month.output)} tokens, ${month.count} turns)`,
+			`All-time: ${fmtCost(all.cost)}`,
+		];
+		ctx.ui.notify(lines.join("\n"), "info");
+		return;
+	}
+
+	await ctx.ui.custom((_tui, theme, _kb, done) => {
+		let cachedWidth: number | undefined;
+		let cachedLines: string[] | undefined;
+
+		return {
+			render(width: number): string[] {
+				if (cachedLines && cachedWidth === width) return cachedLines;
+				cachedLines = renderDashboard(theme, session, today, month, model, width);
+				cachedWidth = width;
+				return cachedLines;
+			},
+			invalidate() {
+				cachedWidth = undefined;
+				cachedLines = undefined;
+			},
+			handleInput(data: string) {
+				if (matchesKey(data, "escape") || matchesKey(data, "enter")) done(undefined);
+			},
+		};
+	});
+}
+
+// ── Extension ─────────────────────────────────────────────────────────────────
+
+export default function (pi: ExtensionAPI) {
+	// Record every assistant message
+	pi.on("message_end", async (event, ctx) => {
+		if (event.message.role !== "assistant") return;
+		const msg = event.message as AssistantMessage;
+		if (!msg.usage) return;
+		await mkdir(usageDir, { recursive: true });
+		await appendFile(
+			usageFile,
+			JSON.stringify({
+				timestamp: new Date().toISOString(),
+				session: ctx.sessionManager.getSessionId(),
+				project: ctx.cwd,
+				model: ctx.model ? `${ctx.model.provider}/${ctx.model.id}` : "unknown",
+				input: msg.usage.input || 0,
+				output: msg.usage.output || 0,
+				cost: msg.usage.cost?.total || 0,
+			}) + "\n",
+		);
+	});
+
+	pi.registerCommand("usage", {
+		description: "Show token/cost dashboard  ·  /usage pin|unpin",
+		handler: async (args, ctx) => {
+			const sess = sessionTotals(ctx);
+
+			if (args.trim() === "pin") {
+				ctx.ui.setWidget("pi-usage", [`${ctx.model?.id ?? "?"}: ${fmtCost(sess.cost)}  ${fmtTokens(sess.input + sess.output)} tokens`]);
+				return;
+			}
+			if (args.trim() === "unpin") {
+				ctx.ui.setWidget("pi-usage", undefined);
+				return;
+			}
+
+			await showUsage(ctx, sess);
+		},
+	});
+}

package/package.json

@@ -0,0 +1,15 @@
+{
+  "name": "@po.dev/pi-usage",
+  "version": "1.0.0",
+  "description": "Rich token & cost usage dashboard for pi — /usage command with card-style TUI",
+  "keywords": ["pi-package"],
+  "license": "MIT",
+  "pi": {
+    "extensions": ["./index.ts"]
+  },
+  "peerDependencies": {
+    "@earendil-works/pi-ai": "*",
+    "@earendil-works/pi-coding-agent": "*",
+    "@earendil-works/pi-tui": "*"
+  }
+}