@iowarp/clio-coder 0.5.0 → 0.5.1

package/src/interactive/{cost-overlay.ts → usage-overlay.ts}

@@ -11,19 +11,22 @@ import {
 	type ObservabilityContract,
 	type ObservabilitySnapshot,
 } from "../domains/observability/index.js";
+import type { UsageSnapshot } from "../domains/quota/types.js";
 import {
 	foldPromptCacheTelemetry,
 	hasPromptCacheTelemetry,
 	type PromptCacheTelemetry,
 	type SessionEntry,
 } from "../domains/session/index.js";
-import type { Component, OverlayHandle, TUI } from "../engine/tui.js";
-import { buildHint, showClioOverlayFrame } from "./overlay-frame.js";
+import { type Component, matchesKey, type OverlayHandle, type TUI, wrapTextWithAnsi } from "../engine/tui.js";
+import type { DispatchBoardRow } from "./dispatch-board.js";
+import { buildResponsiveHint, showClioOverlayFrame } from "./overlay-frame.js";
+import { quotaMeter, renderQuotaAccounts, renderWorkerUsage } from "./quota-view.js";
 import { clioTheme, rule } from "./theme/index.js";
 
-const DEFAULT_CONTENT_WIDTH = 80;
+const DEFAULT_CONTENT_WIDTH = 104;
 
-export const COST_OVERLAY_WIDTH = DEFAULT_CONTENT_WIDTH + 4;
+export const USAGE_OVERLAY_WIDTH = DEFAULT_CONTENT_WIDTH + 4;
 
 export interface CostRow {
 	providerId: string;
@@ -295,19 +298,9 @@ function modelBlock(row: CostRow): string[] {
 	]);
 }
 
-function formatCostOverlayBodyLines(
-	totalCost: CostAggregate,
-	totalTokens: number,
-	rows: ReadonlyArray<CostRow>,
-	contentWidth: number,
-	promptCache: PromptCacheTelemetry | null = null,
-): string[] {
+function modelDetailLines(rows: ReadonlyArray<CostRow>, contentWidth: number): string[] {
 	const theme = clioTheme();
-	const lines: string[] = [];
-	for (const line of summaryBlock(totalCost, totalTokens, rows, promptCache)) {
-		lines.push(line);
-	}
-	lines.push(rule(theme, contentWidth));
+	const lines: string[] = [rule(theme, contentWidth)];
 	if (rows.length === 0) {
 		lines.push(theme.fg("muted", "no token usage recorded for this session"));
 	} else {
@@ -352,32 +345,116 @@ function buildCostSnapshot(
 	};
 }
 
-export interface OpenCostOverlayOptions {
+export interface OpenUsageOverlayOptions {
+	getDispatchRows?: () => ReadonlyArray<DispatchBoardRow>;
+	getQuotaSnapshots?: () => ReadonlyArray<UsageSnapshot>;
 	sessionId?: string | null;
 	/** Session ledger, read on every render so newly settled and branched calls appear. */
 	getSessionEntries?: () => ReadonlyArray<SessionEntry>;
 }
 
-class CostOverlayBody implements Component {
-	constructor(private readonly getSnapshot: () => CostSnapshot) {}
+const USAGE_TABS = ["Accounts", "Session", "Models", "Workers"] as const;
+
+class UsageOverlayBody implements Component {
+	private tab = 0;
+	private offsets = [0, 0, 0, 0];
+	private height = 20;
+	private pageHeight = 16;
+	private lineCount = 0;
+
+	constructor(
+		private readonly getSnapshot: () => CostSnapshot,
+		private readonly getQuotaSnapshots: () => ReadonlyArray<UsageSnapshot>,
+		private readonly getDispatchRows: () => ReadonlyArray<DispatchBoardRow>,
+		private readonly requestRender: () => void,
+	) {}
+
+	setHeight(rows: number): void {
+		this.height = Math.max(1, rows - 3);
+	}
+
+	handleInput(data: string): void {
+		const selected = (["1", "2", "3", "4"] as const).findIndex((key) => matchesKey(data, key));
+		if (selected >= 0) this.tab = selected;
+		else if (matchesKey(data, "tab") || matchesKey(data, "right")) this.tab = (this.tab + 1) % USAGE_TABS.length;
+		else if (matchesKey(data, "shift+tab") || matchesKey(data, "left"))
+			this.tab = (this.tab + USAGE_TABS.length - 1) % USAGE_TABS.length;
+		else {
+			let offset = this.offsets[this.tab] ?? 0;
+			if (matchesKey(data, "up")) offset--;
+			else if (matchesKey(data, "down")) offset++;
+			else if (matchesKey(data, "pageUp")) offset -= this.pageHeight;
+			else if (matchesKey(data, "pageDown")) offset += this.pageHeight;
+			else if (matchesKey(data, "home") || matchesKey(data, "ctrl+home")) offset = 0;
+			else if (matchesKey(data, "end") || matchesKey(data, "ctrl+end")) offset = this.lineCount;
+			else return;
+			this.offsets[this.tab] = Math.max(0, Math.min(offset, this.lineCount - this.pageHeight));
+		}
+		this.requestRender();
+	}
 
 	render(width: number): string[] {
 		const contentWidth = Math.max(1, Math.floor(width));
 		const snapshot = this.getSnapshot();
-		return formatCostOverlayBodyLines(
-			snapshot.totalCost,
-			snapshot.totalTokens,
-			snapshot.rows,
+		const quota = this.getQuotaSnapshots();
+		const theme = clioTheme();
+		const tabs = wrapTextWithAnsi(
+			USAGE_TABS.map((name, index) =>
+				index === this.tab
+					? theme.style("accent", `${index + 1} ${name}`, { bold: true, underline: true })
+					: theme.fg("dim", `${index + 1} ${name}`),
+			).join("   "),
 			contentWidth,
-			snapshot.promptCache,
 		);
+		let body: string[];
+		if (this.tab === 0)
+			body = [
+				theme.fg("dim", "Account-wide limits · filled = used · shared across sessions and devices"),
+				"",
+				...renderQuotaAccounts(quota, contentWidth),
+			];
+		else if (this.tab === 1)
+			body = [
+				theme.style("accent", "Session tokens & cost", { bold: true }),
+				theme.fg("dim", "Recorded calls in this session · estimates are marked in the cost totals"),
+				"",
+				...summaryBlock(snapshot.totalCost, snapshot.totalTokens, snapshot.rows, snapshot.promptCache),
+				"",
+				rule(theme, contentWidth),
+				theme.fg("dim", "Session tokens cannot be converted to subscription percentages."),
+				...(snapshot.rows.length ? [] : ["no token usage recorded for this session"]),
+			];
+		else if (this.tab === 2) {
+			body = [
+				theme.style("accent", "Model activity · this session", { bold: true }),
+				theme.fg("dim", "Share of recorded processed tokens, including cache traffic; not account quota."),
+				"",
+			];
+			for (const row of [...snapshot.rows].sort((a, b) => b.tokens - a.tokens)) {
+				const share = snapshot.totalTokens > 0 ? (row.tokens / snapshot.totalTokens) * 100 : 0;
+				body.push(
+					`${row.providerId} · ${row.attributedModelId}`,
+					`${quotaMeter(share, Math.min(24, contentWidth), "normal")} ${share.toFixed(1)}% · ${formatTokens(row.tokens)} tokens`,
+				);
+			}
+			body.push("", ...modelDetailLines(snapshot.rows, contentWidth));
+		} else body = renderWorkerUsage(this.getDispatchRows(), quota, contentWidth);
+		const lines = body.flatMap((line) => wrapTextWithAnsi(line, contentWidth));
+		this.lineCount = lines.length;
+		this.pageHeight = Math.max(1, this.height - tabs.length - 1);
+		const offset = Math.max(0, Math.min(this.offsets[this.tab] ?? 0, lines.length - this.pageHeight));
+		this.offsets[this.tab] = offset;
+		const visible = [...tabs, "", ...lines.slice(offset, offset + this.pageHeight)];
+		if (lines.length > this.pageHeight)
+			visible.push(theme.fg("dim", `${offset + 1}–${Math.min(lines.length, offset + this.pageHeight)} / ${lines.length}`));
+		return visible;
 	}
 
 	invalidate(): void {}
 }
 
 /**
- * Mount a read-only session-cost overlay. The running USD total comes from the
+ * Mount the read-only usage overlay. Quota comes from the shared presentation feed. The running USD total comes from the
  * observability projection's `snapshot().session.costUsd`, while the
  * per-provider/model rows fold `observability.costEntries()`. The overlay is
  * kept live by `observability.subscribe()`: the projection already folds the
@@ -385,23 +462,34 @@ class CostOverlayBody implements Component {
  * update, so a single subscription replaces the former DispatchCompleted /
  * DispatchFailed / chat-turn refresh wiring. `hide()` unsubscribes.
  */
-export function openCostOverlay(
+export function openUsageOverlay(
 	tui: TUI,
 	observability: ObservabilityContract,
-	options?: OpenCostOverlayOptions,
+	options?: OpenUsageOverlayOptions,
 ): OverlayHandle {
 	const sessionId = options?.sessionId ?? null;
 	let latest: ObservabilitySnapshot = observability.snapshot();
-	const body = new CostOverlayBody(() =>
-		buildCostSnapshot(observability, sessionId, latest, options?.getSessionEntries),
+	const body = new UsageOverlayBody(
+		() => buildCostSnapshot(observability, sessionId, latest, options?.getSessionEntries),
+		options?.getQuotaSnapshots ?? (() => []),
+		options?.getDispatchRows ?? (() => []),
+		() => tui.requestRender(),
 	);
 	const handle = showClioOverlayFrame(tui, body, {
 		anchor: "center",
-		width: COST_OVERLAY_WIDTH,
+		width: USAGE_OVERLAY_WIDTH,
 		// Not derived from the title: that one carries the session id.
-		markerId: "cost",
-		title: sessionId && sessionId.length > 0 ? `Session usage (${sessionId})` : "Session usage",
-		footerHint: buildHint([]),
+		markerId: "usage",
+		title: sessionId && sessionId.length > 0 ? `Usage (${sessionId})` : "Usage",
+		footerHint: buildResponsiveHint([
+			{ key: "1–4 / Tab", verb: "view", critical: true },
+			{ key: "↑↓", verb: "scroll" },
+			{ key: "PgUp/PgDn", verb: "page" },
+		]),
+		visible: (_width, height) => {
+			body.setHeight(height);
+			return true;
+		},
 	});
 
 	// subscribe() fires immediately with the current snapshot, then on each

package/src/interactive/welcome-dashboard.ts

@@ -4,7 +4,7 @@ import type { ContextState } from "../domains/context/index.js";
 import type { ProvidersContract, TargetStatus } from "../domains/providers/index.js";
 import { sanitizeCallTargetText } from "../domains/safety/call-target.js";
 import type { WorkspaceSnapshot } from "../domains/session/workspace/index.js";
-import { type Component, type Keybinding, truncateToWidth, visibleWidth } from "../engine/tui.js";
+import { type Component, type Keybinding, truncateToWidth, visibleWidth, wrapTextWithAnsi } from "../engine/tui.js";
 import {
 	brandMark,
 	type ClioTheme,
@@ -55,6 +55,12 @@ export interface WelcomeDashboardDeps {
 	getSubmitKeyLabel?: () => string | null;
 	/** Effective shortcut labels; null hides an unbound action. */
 	getKeyLabel?: (action: Keybinding) => string | null;
+	/**
+	 * Connected subscription quota, already summarized, or null when nothing is
+	 * connected yet. Read synchronously on every frame, so the supplier must
+	 * serve a cached value and do its own refreshing off the render path.
+	 */
+	getQuotaSummary?: () => string | null;
 	/** Called when an off-render refresh lands, so the frame owner can ask for one. */
 	onFactsRefreshed?: () => void;
 	/**
@@ -82,6 +88,8 @@ export interface WelcomeDashboardStats {
 	autonomy: string;
 	targets: string;
 	fleet: string;
+	/** One line of connected subscription usage; null hides the row entirely. */
+	quota: string | null;
 }
 
 export type WelcomeDashboardMode = "launchpad" | "session";
@@ -536,13 +544,24 @@ function buildWelcomeDashboardLines(
 		theme.fg("dim", "Ask Clio how to use or extend her."),
 		theme.fg("dim", "Targets"),
 		theme.fg("muted", stats.targets),
+		// Keep the subscription field beside the wordmark, between Targets and
+		// Fleet. Wrap at the actual detail-column width instead of clipping the
+		// last accounts (especially Local) off a single concatenated line.
+		...(stats.quota === null
+			? []
+			: wrapTextWithAnsi(
+					field("Subscriptions", theme.fg("muted", sanitizeCallTargetText(stats.quota))),
+					Math.max(1, detailWidth),
+				)),
 		theme.fg("dim", "Fleet"),
 		theme.fg("muted", stats.fleet),
 	];
+
 	return [
 		heading,
-		...details.map((detail, index) => {
-			const art = sideBySide ? `${theme.fg("accent", wordmark[index] ?? "")}   ` : "";
+		...Array.from({ length: Math.max(details.length, hints.length, sideBySide ? wordmark.length : 0) }, (_, index) => {
+			const detail = details[index] ?? "";
+			const art = sideBySide ? `${padAnsi(theme.fg("accent", wordmark[index] ?? ""), artWidth)}   ` : "";
 			const content = `${art}${truncateToWidth(detail, detailWidth, GLYPH.ellipsis, false)}`;
 			return row(
 				showHints
@@ -577,6 +596,7 @@ function statsSignature(stats: WelcomeDashboardStats): string {
 		stats.autonomy,
 		stats.targets,
 		stats.fleet,
+		stats.quota,
 	].join("\0");
 }
 
@@ -707,6 +727,7 @@ export class WelcomeDashboard implements WelcomeDashboardComponent {
 			projectContext: launchpad ? this.projectContext(cwd) : "checking",
 			submitKeyLabel: launchpad ? (this.deps.getSubmitKeyLabel?.() ?? null) : null,
 			autonomy: settings?.safety?.autonomy ?? "auto-edit",
+			quota: launchpad ? (this.deps.getQuotaSummary?.() ?? null) : null,
 			...inventory(settings, statuses, this.deps.getAgentCount?.()),
 		};
 	}
@@ -804,6 +825,8 @@ export function createBootWelcome(
 		routeReason: null,
 		projectContext: "checking",
 		submitKeyLabel,
+		// Boot paints before any provider has been read, so the row stays hidden.
+		quota: null,
 		autonomy: settings.safety.autonomy,
 		...inventory(settings),
 	};