@po.dev/pi-usage-dashboard 0.1.0 → 0.1.2

package/index.ts

@@ -781,14 +781,16 @@ class UsageComponent {
 		if (model.total === 0) return [...lines, th.fg("dim", "  No usage data for this period"), ""];
 
 		const labelW = Math.max(formatAxisCost(model.max).length, 3);
-		const plotW = Math.max(10, Math.min(width - labelW - 2, model.days.length));
+		const plotW = Math.max(10, Math.min(Math.floor((width - labelW - 2) / 2), model.days.length));
 		const start = Math.max(0, model.days.length - plotW);
 		const days = model.days.slice(start);
+		const axisW = Math.max(0, days.length * 2 - 1);
 		const height = 8;
 		for (let row = height; row >= 1; row--) {
 			const threshold = (model.max * row) / height;
 			let line = th.fg("dim", `${row === height ? formatAxisCost(model.max) : row === 1 ? "$0" : ""}`.padStart(labelW) + " │");
-			for (const day of days) {
+			for (let d = 0; d < days.length; d++) {
+				const day = days[d]!;
 				let acc = 0, owner = -1;
 				for (let i = 0; i < model.providers.length; i++) {
 					const p = model.providers[i]!;
@@ -796,12 +798,12 @@ class UsageComponent {
 					acc += day.providers.get(p.name) ?? 0;
 					if (acc >= threshold) { owner = i; break; }
 				}
-				line += owner < 0 ? " " : seriesColor(owner) + "█" + COLOR_RESET;
+				line += (owner < 0 ? " " : seriesColor(owner) + "█" + COLOR_RESET) + (d === days.length - 1 ? "" : " ");
 			}
 			lines.push(line);
 		}
-		lines.push(th.fg("dim", " ".repeat(labelW) + " └" + "─".repeat(days.length)));
-		lines.push(th.fg("dim", " ".repeat(labelW + 2) + (days[0]?.label ?? "") + " ".repeat(Math.max(1, days.length - 12)) + (days.at(-1)?.label ?? "")));
+		lines.push(th.fg("dim", " ".repeat(labelW) + " └" + "─".repeat(axisW)));
+		lines.push(th.fg("dim", " ".repeat(labelW + 2) + (days[0]?.label ?? "") + " ".repeat(Math.max(1, axisW - visibleWidth((days[0]?.label ?? "") + (days.at(-1)?.label ?? "")))) + (days.at(-1)?.label ?? "")));
 		lines.push("");
 		for (let i = 0; i < model.providers.length; i++) {
 			const p = model.providers[i]!;
@@ -824,11 +826,14 @@ class UsageComponent {
 		const total = detail ? detail.chars : this.promptSections.reduce((sum, section) => sum + section.chars, 0);
 		const source = this.historySelected ? `History ${this.historySelected.slice(0, 8)}` : "Current session";
 		const lines = [th.bold(detail ? `${detail.label} sources` : `${source} prompt sources`), th.fg("dim", detail ? "Esc back · source sizes" : "Assembled system prompt · source sizes · Enter details"), ""];
+		const colors: ("accent" | "success" | "warning" | "thinkingHigh")[] = ["accent", "success", "warning", "thinkingHigh"];
 		if (!detail) {
 			const widthBar = Math.max(20, Math.min(width - 4, 60));
-			const colors: ("accent" | "success" | "warning" | "thinkingHigh")[] = ["accent", "success", "warning", "thinkingHigh"];
 			let bar = "";
-			for (let i = 0; i < rows.length; i++) bar += th.fg(colors[i % colors.length]!, "█".repeat(Math.round(rows[i]!.chars / Math.max(total, 1) * widthBar)));
+			for (let i = 0; i < rows.length; i++) {
+				if (i > 0) bar += " ";
+				bar += th.fg(colors[i % colors.length]!, "▬".repeat(Math.round(rows[i]!.chars / Math.max(total, 1) * widthBar)));
+			}
 			lines.push(bar, "");
 		}
 		for (let i = 0; i < rows.length; i++) {
@@ -837,8 +842,9 @@ class UsageComponent {
 			const pct = total ? `${(chars / total * 100).toFixed(1)}%` : "0.0%";
 			const selected = i === this.insightIndex;
 			const marker = selected ? th.fg("accent", "▸ ") : th.fg("dim", "· ");
+			const indicator = detail ? "" : th.fg(colors[i % colors.length]!, "■ ");
 			const suffix = th.fg("dim", `${formatNumber(chars)} chars  ${pct}`);
-			lines.push(`${marker}${selected ? th.fg("accent", row.label) : row.label}${" ".repeat(Math.max(1, width - visibleWidth(marker + row.label + suffix)))}${suffix}`);
+			lines.push(`${marker}${indicator}${selected ? th.fg("accent", row.label) : row.label}${" ".repeat(Math.max(1, width - visibleWidth(marker + indicator + row.label + suffix)))}${suffix}`);
 		}
 		lines.push("", th.fg("dim", "[↑↓] select  [Enter] open  [Esc] back"));
 		return lines;
@@ -1126,18 +1132,27 @@ class UsageComponent {
 // Extension Entry Point
 // =============================================================================
 
-function setUsageFooter(ctx: { ui: ExtensionCommandContext["ui"] }, totals: TotalStats): void {
+function footerModelLabel(ctx: Pick<ExtensionCommandContext, "model" | "thinkingLevel">): string {
+	const model = ctx.model;
+	if (!model) return "no-model";
+	const label = `(${model.provider}) ${model.id}`;
+	return model.reasoning && ctx.thinkingLevel ? `${label} • ${ctx.thinkingLevel}` : label;
+}
+
+function setUsageFooter(ctx: Pick<ExtensionCommandContext, "ui" | "model" | "thinkingLevel">, totals: TotalStats): void {
 	ctx.ui.setFooter((_tui, theme) => ({
 		invalidate() {},
 		render(width: number): string[] {
-			const line = theme.fg("thinkingHigh", "Usage:") + " " + theme.fg("accent", formatCost(totals.cost)) + " · " + theme.fg("text", `${formatTokens(totals.tokens.total)} tokens`) + " · " + theme.fg("success", `↑${formatTokens(totals.tokens.input + totals.tokens.cacheWrite)}`) + " · " + theme.fg("warning", `↓${formatTokens(totals.tokens.output)}`) + " · " + theme.fg("thinkingHigh", `${formatTokens(totals.tokens.cacheRead + totals.tokens.cacheWrite)} cache`) + theme.fg("dim", " · (Today)");
-			return [truncateToWidth(line, width)];
+			const usage = theme.fg("thinkingHigh", "Usage:") + " " + theme.fg("accent", formatCost(totals.cost)) + " · " + theme.fg("text", `${formatTokens(totals.tokens.total)} tokens`) + " · " + theme.fg("success", `↑${formatTokens(totals.tokens.input + totals.tokens.cacheWrite)}`) + " · " + theme.fg("warning", `↓${formatTokens(totals.tokens.output)}`) + " · " + theme.fg("thinkingHigh", `${formatTokens(totals.tokens.cacheRead + totals.tokens.cacheWrite)} cache`) + theme.fg("dim", " · (Today)");
+			const model = theme.fg("dim", footerModelLabel(ctx));
+			const gap = width - visibleWidth(usage) - visibleWidth(model);
+			return [gap >= 2 ? usage + " ".repeat(gap) + model : truncateToWidth(usage, width)];
 		},
 	}));
 }
 
 export default function (pi: ExtensionAPI) {
-	const refreshFooter = (ctx: { hasUI: boolean; ui: ExtensionCommandContext["ui"] }) => {
+	const refreshFooter = (ctx: Pick<ExtensionCommandContext, "hasUI" | "ui" | "model" | "thinkingLevel">) => {
 		if (!ctx.hasUI) return;
 		void collectUsageData().then((data) => {
 			if (!data) return;
@@ -1155,6 +1170,7 @@ export default function (pi: ExtensionAPI) {
 	};
 	pi.on("session_start", (_event, ctx) => { snapshotPrompt(ctx); refreshFooter(ctx); });
 	pi.on("message_end", (_event, ctx) => { snapshotPrompt(ctx); refreshFooter(ctx); });
+	pi.on("model_select", (_event, ctx) => { refreshFooter(ctx); });
 	pi.registerCommand("usage", {
 		description: "Show usage statistics dashboard",
 		handler: async (_args: string, ctx: ExtensionCommandContext) => {

package/package.json

@@ -1,13 +1,26 @@
 {
   "name": "@po.dev/pi-usage-dashboard",
-  "version": "0.1.0",
+  "version": "0.1.2",
   "description": "Local token and cost dashboard for pi sessions",
-  "keywords": ["pi-package", "pi", "usage", "tokens", "dashboard"],
+  "keywords": [
+    "pi-package",
+    "pi",
+    "usage",
+    "tokens",
+    "dashboard"
+  ],
   "license": "MIT",
-  "files": ["*.ts", "README.md"],
+  "files": [
+    "*.ts",
+    "README.md"
+  ],
   "peerDependencies": {
     "@earendil-works/pi-coding-agent": "*",
     "@earendil-works/pi-tui": "*"
   },
-  "pi": { "extensions": ["./index.ts"] }
+  "pi": {
+    "extensions": [
+      "./index.ts"
+    ]
+  }
 }