@linxiraos/pi-tui 1.2.1 → 1.3.1

package/src/overlays/reset-usage-selector.ts

@@ -10,8 +10,10 @@ import { formatUsageResetWindow } from "./usage-display";
 import { formatKeyHint } from "../app-keybindings";
 import { editorKey, editorKeys } from "../chrome/keybinding-hints";
 import { node, span, text } from "../native/describe";
-import type { NativeNode, NativeUiEvent } from "../native/node";
+import type { DescribeContext, NativeNode, NativeUiEvent } from "../native/node";
 import { actionHint, hintsRow, overlayCard } from "../native/overlay";
+import { CLOSE_ACTION, dockedPicker, PICKER_KEY, pickerAction, pickerEvent } from "../native/picker";
+import type { TspPickerItem, TspPickerProps, TspSpan } from "@linxiraos/pi-wire";
 
 const RESET_SELECTOR_MAX_VISIBLE = 10;
 
@@ -36,6 +38,37 @@ function accountCountLabel(account: ResetUsageAccount): string {
 	return countLabel;
 }
 
+/** The picker row of an account: provider mark, identity, its resets as a fact, unusable ones disabled with the reason. */
+function accountPickerItem(account: ResetUsageAccount, id: string): TspPickerItem {
+	const redeemable = account.redeemableCount > 0;
+	const detail: TspSpan[] = [span(`${oneLine(account.providerLabel)} · #${account.target.credentialId}`)];
+	const reason = account.error ?? (redeemable ? undefined : (account.unavailableReason ?? "no resets usable now"));
+	if (reason) detail.push(span(` · ${oneLine(reason)}`, account.error ? "error" : "warning"));
+	let resets: TspSpan;
+	if (account.error) resets = span("unavailable", "error");
+	else if (!redeemable) resets = span(`${account.availableCount} saved`, "dim");
+	else if (account.redeemableCount === account.availableCount)
+		resets = span(`${account.redeemableCount} usable`, "success");
+	else resets = span(`${account.redeemableCount} of ${account.availableCount} usable`, "success");
+	const facts: Record<string, TspSpan[]> = { resets: [resets] };
+	const expiryMs = account.expiresAt ? Date.parse(account.expiresAt) : Number.NaN;
+	if (!Number.isNaN(expiryMs)) {
+		facts.expires = [
+			expiryMs > Date.now()
+				? span(`expires in ${formatDuration(expiryMs - Date.now())}`, "dim")
+				: span("expired", "warning"),
+		];
+	}
+	return {
+		id,
+		label: oneLine(account.label),
+		detail,
+		mark: { text: account.providerLabel, seed: account.provider },
+		facts,
+		...(reason ? { disabled: oneLine(reason) } : {}),
+	};
+}
+
 /** One account row with its redeemable rate-limit reset credits. */
 export interface ResetUsageAccount {
 	label: string;
@@ -74,6 +107,8 @@ export class ResetUsageSelectorComponent extends OverlayPanel {
 	#nativeItems: readonly NativeNode[] | undefined;
 	#nativeHints: NativeNode | undefined;
 	#nativeRoot: NativeNode | undefined;
+	#pickerRoot: NativeNode | undefined;
+	#pickerItems: readonly TspPickerItem[] | undefined;
 
 	constructor(accounts: ResetUsageAccount[], onSelect: (account: ResetUsageAccount) => void, onCancel: () => void) {
 		super("Spend a saved rate-limit reset", "zeta.overlay.reset-usage");
@@ -99,6 +134,7 @@ export class ResetUsageSelectorComponent extends OverlayPanel {
 
 	#updateList(): void {
 		this.#nativeRoot = undefined;
+		this.#pickerRoot = undefined;
 		this.#listContainer.clear();
 
 		const items = this.#menu.visibleItems;
@@ -165,21 +201,28 @@ export class ResetUsageSelectorComponent extends OverlayPanel {
 		}
 	}
 
-	#confirmationMessage(account: ResetUsageAccount): string {
+	/** What a reset of `account` spends and covers, without key instructions. */
+	#confirmationNotes(account: ResetUsageAccount): { subject: string; notes: string[] } {
 		const subject = account.credit?.title ? `“${account.credit.title}”` : "1 saved reset";
-		const messages = [
-			`Press ${formatKeyHint("enter")} again to spend ${subject} for ${account.label} (${account.providerLabel}).`,
-		];
+		const notes: string[] = [];
 		if (account.credit?.program === "juniper_tide") {
-			messages.push("This resets Claude's 5h session limit only; weekly limits stay unchanged.");
+			notes.push("This resets Claude's 5h session limit only; weekly limits stay unchanged.");
 		} else if (account.credit?.clears?.length) {
-			messages.push(`Covers ${account.credit.clears.map(formatUsageResetWindow).join(", ")}.`);
+			notes.push(`Covers ${account.credit.clears.map(formatUsageResetWindow).join(", ")}.`);
 		}
 		if (account.credit?.requiresLimit === false) {
-			messages.push("Optional early use: this can be spent before the covered limit is reached.");
+			notes.push("Optional early use: this can be spent before the covered limit is reached.");
 		}
-		messages.push(`${editorKey("tui.select.cancel")} cancels.`);
-		return messages.join(" ");
+		return { subject, notes };
+	}
+
+	#confirmationMessage(account: ResetUsageAccount): string {
+		const { subject, notes } = this.#confirmationNotes(account);
+		return [
+			`Press ${formatKeyHint("enter")} again to spend ${subject} for ${account.label} (${account.providerLabel}).`,
+			...notes,
+			`${editorKey("tui.select.cancel")} cancels.`,
+		].join(" ");
 	}
 
 	handleInput(keyData: string): void {
@@ -239,7 +282,8 @@ export class ResetUsageSelectorComponent extends OverlayPanel {
 		}
 	}
 
-	override describe(): NativeNode {
+	override describe(cx: DescribeContext): NativeNode {
+		if (cx.supports("picker")) return this.#describePicker();
 		if (this.#nativeRoot) return this.#nativeRoot;
 		this.#nativeItems ??= this.#menu.visibleItems.map(account => {
 			const redeemable = account.redeemableCount > 0;
@@ -282,18 +326,83 @@ export class ResetUsageSelectorComponent extends OverlayPanel {
 	}
 
 	/**
-	 * A click (or double-click) on an account highlights it and presses Enter:
-	 * moving to another account drops a pending confirmation, so spending a
-	 * reset still takes a second activation of the same account.
+	 * The docked md picker: accounts as provider-marked cards with their resets
+	 * as facts, the active account checked, unusable ones disabled with the
+	 * reason; the first `Spend reset` turns the selected row into a confirm strip.
+	 */
+	#describePicker(): NativeNode {
+		if (this.#pickerRoot) return this.#pickerRoot;
+		const items = (this.#pickerItems ??= this.#menu.visibleItems.map(account =>
+			accountPickerItem(account, this.#menu.adapter.getKey(account)),
+		));
+		const pending = this.#menu.visibleItems.find(item => this.#menu.isPending(item));
+		// The strip asks the question over the row; what the reset covers reads in the subtitle meanwhile.
+		let confirm: TspPickerProps["confirm"] = null;
+		let subtitle: TspPickerProps["subtitle"] = "Spend a saved reset to refresh an account's rate limit now";
+		if (pending) {
+			const { subject, notes } = this.#confirmationNotes(pending);
+			confirm = { text: `Spend ${subject} on ${oneLine(pending.label)}?`, act: "confirm", label: "Spend" };
+			if (notes.length > 0) subtitle = oneLine(notes.join(" "));
+		}
+		if (this.#statusMessage) subtitle = [span(oneLine(this.#statusMessage), "warning")];
+		this.#pickerRoot = dockedPicker({
+			title: "Rate-limit resets",
+			subtitle,
+			icon: "refresh",
+			noun: "accounts",
+			size: "md",
+			layout: "cards",
+			preview: "none",
+			query: null,
+			columns: [
+				{ id: "expires", priority: 1 },
+				{ id: "resets", priority: 2 },
+			],
+			items,
+			current: this.#menu.visibleItems
+				.filter(account => account.active)
+				.map(account => this.#menu.adapter.getKey(account)),
+			selected: this.#menu.selectedKey ?? null,
+			empty: "No provider accounts with saved resets",
+			actions: [pickerAction("confirm", "Spend reset", "enter", { primary: true }), CLOSE_ACTION],
+			confirm,
+		});
+		return this.#pickerRoot;
+	}
+
+	/** Point the menu at `key`; moving to another account drops a pending confirmation. */
+	#selectKey(key: string): boolean {
+		if (this.#menu.selectedKey === key) return true;
+		this.#menu.cancelConfirmation();
+		this.#menu.setSelectedKey(key);
+		if (this.#menu.selectedKey !== key) return false;
+		this.#statusMessage = undefined;
+		this.#updateList();
+		return true;
+	}
+
+	/**
+	 * Picker: a row click selects, a double-click or `Spend reset` presses
+	 * Enter (so spending still takes a second activation, on the confirm
+	 * strip), the strip's `Keep` drops the confirmation and `Close` cancels.
+	 * Card list: a click (or double-click) on an account highlights it and
+	 * presses Enter.
 	 */
 	handleNativeEvent(event: NativeUiEvent): void {
-		if ((event.type !== "select" && event.type !== "activate") || event.key !== "list") return;
-		if (this.#menu.selectedKey !== event.item) {
-			this.#menu.cancelConfirmation();
-			this.#menu.setSelectedKey(event.item);
-			if (this.#menu.selectedKey !== event.item) return;
-			this.#statusMessage = undefined;
+		const ev = pickerEvent(event, PICKER_KEY);
+		if (ev?.kind === "action") {
+			if (ev.act === "confirm") this.#activateSelection();
+			else if (ev.act === "cancel" && this.#menu.cancelConfirmation()) {
+				this.#statusMessage = undefined;
+				this.#updateList();
+			} else if (ev.act === "close" || ev.act === "cancel") this.#onCancelCallback();
+			return;
 		}
-		this.#activateSelection();
+		if (ev) {
+			if (this.#selectKey(ev.item) && ev.kind === "activate") this.#activateSelection();
+			return;
+		}
+		if ((event.type !== "select" && event.type !== "activate") || event.key !== "list") return;
+		if (this.#selectKey(event.item)) this.#activateSelection();
 	}
 }

package/src/overlays/session-account-selector.ts

@@ -2,6 +2,8 @@ import { type SelectItem, SelectList, type SgrMouseEvent } from "../index";
 import { getSelectListTheme } from "../theme/theme";
 import { OverlayPanel } from "../chrome/overlay-box";
 import { routeSelectListMouseWithTopBorder } from "../chrome/select-list-mouse-routing";
+import type { DescribeContext, NativeNode, NativeUiEvent } from "../native/node";
+import { SelectListSheet } from "../native/picker";
 
 const ACCOUNT_SELECTOR_MAX_VISIBLE = 10;
 
@@ -19,9 +21,18 @@ export interface SessionPinAccount {
 	label: string;
 }
 
+/** What tells two accounts of one provider apart besides their label: the organization, project or host. */
+function accountDetail(account: SessionPinAccount): string | undefined {
+	const parts = [account.orgName ?? account.orgId, account.projectId, account.enterpriseUrl].filter(
+		(part): part is string => typeof part === "string" && part.trim().length > 0 && !account.label.includes(part),
+	);
+	return parts.length > 0 ? parts.join(" · ") : undefined;
+}
+
 /** Account picker opened by `/session pin` for the current model provider. */
 export class SessionAccountSelectorComponent extends OverlayPanel {
 	#selectList: SelectList;
+	#sheet: SelectListSheet;
 
 	constructor(
 		providerName: string,
@@ -54,6 +65,31 @@ export class SessionAccountSelectorComponent extends OverlayPanel {
 		};
 		this.#selectList.onCancel = onCancel;
 		this.addChild(this.#selectList);
+		// Natively the active account carries the picker's current check, so the
+		// row's detail is what tells accounts apart instead of "active for this session".
+		this.#sheet = new SelectListSheet(this.#selectList, {
+			title: `${providerName} account`,
+			subtitle: "Pin the account this session sends its requests with",
+			icon: "key-round",
+			noun: "accounts",
+			current: accounts.filter(account => account.active).map(account => String(account.credentialId)),
+			confirm: "Pin",
+			decorate: item => {
+				const account = accountsByValue.get(item.value);
+				if (!account) return undefined;
+				const detail = accountDetail(account);
+				return { mark: { text: account.email ?? account.label, seed: account.label }, detail: detail ?? "" };
+			},
+		});
+	}
+
+	override describe(cx: DescribeContext): NativeNode | null {
+		return cx.supports("picker") ? this.#sheet.describe() : super.describe(cx);
+	}
+
+	/** Picker pointer events drive the list exactly as its keys do. */
+	handleNativeEvent(event: NativeUiEvent): void {
+		this.#sheet.handle(event);
 	}
 
 	/** Forward keyboard navigation and cancellation when the wrapper owns focus. */

package/src/overlays/session-info-overlay.ts

@@ -4,9 +4,9 @@ import { matchesSelectCancel } from "../keybinding-matchers";
 import { OverlayPanel, PanelDivider, PanelRows } from "../chrome/overlay-box";
 import { formatKeyHints } from "../app-keybindings";
 import { editorKey } from "../chrome/keybinding-hints";
-import type { TspProps, TspSpan } from "@linxiraos/pi-wire";
+import type { TspSpan } from "@linxiraos/pi-wire";
 import { formatNumber } from "@linxiraos/pi-utils";
-import { col, node, row, span, text } from "../native/describe";
+import { col, node, span, text } from "../native/describe";
 import type { DescribeContext, NativeChild, NativeNode, NativeUiEvent } from "../native/node";
 import { actionBar, actionButton } from "../native/overlay";
 import { plainText, styledSpans } from "../native/spans";
@@ -57,29 +57,50 @@ function joined(spans: readonly TspSpan[]): string {
 	return spans.map(part => part.t).join("");
 }
 
+/** A figure the stats grid can right-align: `182,440`, `0.4127`, `$1.20`, `21%`. */
+const NUMERIC = /^[$€£]?\d[\d,]*(?:\.\d+)?%?$/;
+
+/** A report key or heading in sentence case: `Tool Calls` → `Tool calls`; acronyms (`MCP`, `ACU`) stay. */
+function sentenceCase(label: string): string {
+	let first = true;
+	return label.replace(/[A-Za-z]+/g, word => {
+		if (first) {
+			first = false;
+			return word;
+		}
+		return /^[A-Z][a-z]+$/.test(word) ? word.toLowerCase() : word;
+	});
+}
+
 /**
- * A value with a copy button after it: a click anywhere on the line copies its
- * text (the terminal-local `copy` action takes the leaf text; the icon has none).
+ * One line of the identity block: a sans label, then the value. With `copy`
+ * (its tooltip) the value and a copy glyph after it are one target: a click
+ * copies the value (the terminal-local `copy` action takes the leaf text; the
+ * icon has none).
  */
-function copyLine(
-	spans: TspSpan[],
-	title: string,
-	key: string,
-	props: Omit<TspProps<"text">, "text" | "spans"> = {},
-): NativeNode {
+function identityField(label: string, value: TspSpan[], key: string, copy?: string): NativeNode {
+	const shown = text(value, { truncate: "middle", grow: 1, shrink: 1 });
 	return node(
 		"row",
-		{
-			gap: "sm",
-			align: "center",
-			grow: 1,
-			role: "zeta.info.copy",
-			actions: { click: "copy" },
-			title,
-		},
+		{ gap: "md", align: "center", role: "zeta.info.field" },
 		[
-			text(spans, { ...props, grow: 1, shrink: 1 }),
-			node("icon", { name: "copy", role: "zeta.info.copy.ic", aria: title }),
+			text([span(label)], { role: "zeta.info.label", wrap: "none", shrink: 0 }),
+			copy
+				? node(
+						"row",
+						{
+							gap: "sm",
+							align: "center",
+							grow: 1,
+							shrink: 1,
+							role: "zeta.info.copy",
+							actions: { click: "copy" },
+							title: copy,
+						},
+						[shown, node("icon", { name: "copy", role: "zeta.info.copy.ic", aria: copy })],
+						"value",
+					)
+				: shown,
 		],
 		key,
 	);
@@ -165,83 +186,185 @@ export class SessionInfoOverlay implements Component {
 	}
 
 	/**
-	 * The sheet body (the overlay is the frame): the session id in mono
-	 * (click copies), each report heading as a section of key/value rows, a
-	 * context meter after the leading block, and a Close button (Esc).
+	 * The sheet body (the overlay is the frame), in three tiers: who the session
+	 * is (the id and file as copyable mono fields), how full its context window
+	 * is (a meter under a right-aligned figure), then the report's sections as
+	 * headed groups. Groups of plain counts (Messages, Tokens, Cost) share a
+	 * two-column stats grid with right-aligned figures and their Total set off
+	 * last; the rest (Provider, servers) are key/value rows. A Close button (Esc)
+	 * ends it.
 	 */
 	describe(cx: DescribeContext): NativeNode {
 		const meter = cx.supports("meter");
 		if (this.#nativeNode?.meter === meter) return this.#nativeNode.node;
+		// The report prints the append-only context mode after the message counts;
+		// it is a provider setting, so it joins the Provider group when there is one.
+		const parsed = parseKvReport(this.#infoSource);
+		const hasProvider = parsed.some(section => section.head === "Provider");
+		const moved: KvReportEntry[] = [];
+		const sections = parsed.map(section => ({
+			head: section.head,
+			entries: section.entries.filter(entry => {
+				if (!hasProvider || section.head === "Provider" || !("k" in entry) || entry.k !== "Append-Only")
+					return true;
+				moved.push(entry);
+				return false;
+			}),
+		}));
+		sections.find(section => section.head === "Provider")?.entries.push(...moved);
 		const body: NativeChild[] = [];
-		for (const [index, section] of parseKvReport(this.#infoSource).entries()) {
-			const children: NativeChild[] = [];
-			let items: { k: string; v: TspSpan[] }[] = [];
-			const flush = (): void => {
-				if (items.length === 0) return;
-				children.push(node("kv", { items, layout: "grid", role: "zeta.info.kv" }));
-				items = [];
-			};
-			for (const entry of section.entries) {
-				if (!("k" in entry)) {
-					flush();
-					children.push(text(entry.line, { wrap: "word" }));
-				} else if (section.head === undefined && entry.k === "ID") {
-					// The id leads the sheet, once, as a copyable mono line.
-					body.push(
-						copyLine([span(joined(entry.v), "mono muted")], "Copy session ID", "id", { truncate: "middle" }),
-					);
-				} else if (section.head === undefined && entry.k === "File") {
-					flush();
-					children.push(
-						row(
-							[
-								text([span("File", "muted")], { wrap: "none", shrink: 0 }),
-								copyLine([span(joined(entry.v), "mono")], "Copy file path", "path", { wrap: "char" }),
-							],
-							{
-								gap: "md",
-								align: "start",
-								role: "zeta.info.file",
-							},
-						),
-					);
-				} else {
-					items.push({ k: entry.k, v: entry.v });
+		const stats: { head: string; key: string; items: { k: string; v: TspSpan[] }[] }[] = [];
+		const flushStats = (): void => {
+			if (stats.length > 0) body.push(this.#describeStats(stats.splice(0)));
+		};
+		for (const [index, { head, entries }] of sections.entries()) {
+			if (head === undefined) {
+				// The session's identity: its id, then its file (copyable when it is one).
+				const identity: NativeChild[] = [];
+				const rest: NativeChild[] = [];
+				for (const entry of entries) {
+					if (!("k" in entry)) rest.push(text(entry.line, { wrap: "word", role: "zeta.info.note" }));
+					else if (entry.k === "ID")
+						identity.unshift(identityField("ID", [span(joined(entry.v), "mono")], "id", "Copy session ID"));
+					else if (entry.k === "File") {
+						const path = joined(entry.v);
+						identity.push(
+							path.includes("/")
+								? identityField("File", [span(path, "path")], "file", `Copy ${path}`)
+								: identityField("File", [span(path, "muted")], "file"),
+						);
+					} else rest.push(node("kv", { items: [{ k: entry.k, v: entry.v }], role: "zeta.info.kv" }));
 				}
-			}
-			flush();
-			if (section.head === undefined) {
-				body.push(node("col", { gap: "sm" }, children, `s${index}`));
+				if (identity.length > 0) body.push(node("col", { role: "zeta.info.identity" }, identity, "identity"));
+				body.push(...rest);
 				const context = this.#context;
 				if (context && context.contextWindow > 0) body.push(this.#describeContext(context, meter));
-			} else {
-				body.push(node("section", { head: section.head }, children, `s${index}`));
+				continue;
+			}
+			const pairs = entries.filter((entry): entry is { k: string; v: TspSpan[] } => "k" in entry);
+			if (
+				pairs.length > 0 &&
+				pairs.length === entries.length &&
+				pairs.every(p => NUMERIC.test(joined(p.v).trim()))
+			) {
+				const cost = head === "Cost";
+				stats.push({
+					head,
+					key: `s${index}`,
+					items: pairs.map(p => ({
+						k: sentenceCase(p.k),
+						v: [span(cost && p.k === "Total" ? `$${joined(p.v).trim()}` : joined(p.v).trim(), "mono")],
+					})),
+				});
+				continue;
 			}
+			flushStats();
+			body.push(
+				node(
+					"section",
+					{ head: sentenceCase(head), role: "zeta.info.group" },
+					this.#describeEntries(entries, head === "Provider"),
+					`s${index}`,
+				),
+			);
 		}
+		flushStats();
 		body.push(actionBar([null, actionButton("Close", "close", { keys: "escape" })]));
 		const described = col(body, { gap: "md" });
 		this.#nativeNode = { meter, node: described };
 		return described;
 	}
 
+	/**
+	 * Key/value rows, free lines as notes between them. The provider's values are
+	 * machine strings (`mono`); elsewhere (LSP, MCP servers) the keys are names
+	 * (role `zeta.info.names`, keys in mono).
+	 */
+	#describeEntries(entries: readonly KvReportEntry[], mono: boolean): NativeChild[] {
+		const children: NativeChild[] = [];
+		let items: { k: string; v: TspSpan[] }[] = [];
+		const flush = (): void => {
+			if (items.length === 0) return;
+			children.push(node("kv", { items, layout: "grid", role: mono ? "zeta.info.kv" : "zeta.info.names" }));
+			items = [];
+		};
+		for (const entry of entries) {
+			if (!("k" in entry)) {
+				flush();
+				children.push(text(entry.line, { wrap: "word", role: "zeta.info.note" }));
+				continue;
+			}
+			const v = mono ? entry.v.map(part => ({ ...part, s: part.s ? `${part.s} mono` : "mono" })) : entry.v;
+			items.push({ k: mono ? sentenceCase(entry.k) : entry.k, v });
+		}
+		flush();
+		return children;
+	}
+
+	/**
+	 * Count groups as a two-column grid that stacks when narrow: each group goes
+	 * to the shorter column (report order holds when stacked), its Total last
+	 * over a hairline.
+	 */
+	#describeStats(groups: readonly { head: string; key: string; items: { k: string; v: TspSpan[] }[] }[]): NativeNode {
+		const columns: { lines: number; children: NativeChild[] }[] = [
+			{ lines: 0, children: [] },
+			{ lines: 0, children: [] },
+		];
+		for (const g of groups) {
+			const total = g.items.length > 1 ? g.items.find(item => item.k === "Total") : undefined;
+			const items = total ? g.items.filter(item => item !== total) : g.items;
+			const children: NativeChild[] = [node("kv", { items, layout: "grid", role: "zeta.info.nums" })];
+			if (total) children.push(node("kv", { items: [total], layout: "grid", role: "zeta.info.total" }));
+			// Ties go right, so the stacked order (left, then right) stays the report's.
+			const column = columns[0].lines === 0 || columns[0].lines < columns[1].lines ? columns[0] : columns[1];
+			column.lines += g.items.length + 2;
+			column.children.push(
+				node("section", { head: sentenceCase(g.head), role: "zeta.info.group" }, children, g.key),
+			);
+		}
+		return node(
+			"row",
+			{ align: "start", wrap: true, role: "zeta.info.stats" },
+			columns
+				.filter(column => column.children.length > 0)
+				.map((column, i) => node("col", { role: "zeta.info.column" }, column.children, `c${i}`)),
+			"stats",
+		);
+	}
+
+	/** The context window: a head row (label, `41K / 200K`, the share) over a full-width meter. */
 	#describeContext(context: ContextUsage, meter: boolean): NativeNode {
 		const value = Math.min(1, Math.max(0, context.percent / 100));
-		const figure = `${formatNumber(context.tokens)} / ${formatNumber(context.contextWindow).toLowerCase()} · ${Math.round(context.percent)}%`;
+		const title = `${context.tokens.toLocaleString("en-US")} of ${context.contextWindow.toLocaleString("en-US")} tokens`;
 		return node(
-			"row",
-			{ gap: "sm", align: "center" },
+			"col",
+			{ role: "zeta.info.context", title },
 			[
-				text([span("Context", "muted")]),
+				node(
+					"row",
+					{ align: "baseline", role: "zeta.info.contextHead" },
+					[
+						text([span("Context window")], { grow: 1, shrink: 1, truncate: "end" }),
+						text(
+							[
+								span(`${formatNumber(context.tokens)} / ${formatNumber(context.contextWindow)}`, "mono muted"),
+								span("  "),
+								span(`${Math.round(context.percent)}%`, "mono strong"),
+							],
+							{ wrap: "none", shrink: 0 },
+						),
+					],
+					"head",
+				),
 				meter
-					? node("meter", {
-							value,
-							style: "bar",
-							size: "md",
-							thresholds: { warn: 0.7, bad: 0.9 },
-							grow: 1,
-						})
-					: node("progress", { value, grow: 1 }),
-				text([span(figure, "mono")]),
+					? node(
+							"meter",
+							{ value, style: "bar", size: "md", thresholds: { warn: 0.7, bad: 0.9 }, title },
+							undefined,
+							"meter",
+						)
+					: node("progress", { value }, undefined, "meter"),
 			],
 			"context",
 		);