@linxiraos/pi-tui 1.1.26 → 1.2.0

package/src/overlays/tree-selector.ts

@@ -2,7 +2,8 @@ import { ThinkingLevel } from "@linxiraos/pi-agent-core";
 import {
 	type Component,
 	Container,
-	fuzzyMatch,
+	FuzzyQuery,
+	FuzzyText,
 	Input,
 	matchesKey,
 	Spacer,
@@ -53,7 +54,7 @@ import { shortenPath } from "../render/render-utils";
 import { canonicalizeMessage } from "../chat/thinking-display";
 import { resolveAssistantErrorPresentation } from "../chat/transcript-render-helpers";
 import { OverlayPanel, PanelDivider } from "../chrome/overlay-box";
-import { TreeView, type TreeRow } from "../components/tree-view";
+import { TreeView, type TreeAncestor, type TreeRow } from "../components/tree-view";
 import { formatKeyHint, formatKeyHints } from "../app-keybindings";
 import { boundKeys, editorKeys, interruptKey } from "../chrome/keybinding-hints";
 import type { TspPickerItem, TspPickerProps, TspSpan, TspText } from "@linxiraos/pi-wire";
@@ -210,6 +211,8 @@ class TreeList implements Component {
 	#multipleRoots = false;
 	#activePathIds: Set<string> = new Set();
 	#containsActive: Map<TreeSelectorNode, boolean> = new Map();
+	/** Prepared search text per node; rebuilt when the node's label changes. */
+	#searchTextCache = new WeakMap<TreeSelectorNode, { label: string | undefined; text: FuzzyText }>();
 
 	onSelect?: (entryId: string, options: { summarize: boolean }) => void;
 	onCancel?: () => void;
@@ -253,6 +256,7 @@ class TreeList implements Component {
 			getChildren: node => this.#orderedChildren(node),
 			getChildDepth: (_node, row, children) =>
 				children.length > 1 || (this.#multipleRoots && row.parentKey === undefined) ? row.depth + 1 : row.depth,
+			compactSameDepthAncestors: true,
 			theme,
 			filter: this.#buildFilter(),
 			maxRows: maxVisibleLines,
@@ -373,7 +377,11 @@ class TreeList implements Component {
 	#buildFilter(): (node: TreeSelectorNode, row: TreeRow<TreeSelectorNode, string>) => boolean {
 		const filterMode = this.#filterMode;
 		const leafId = this.currentLeafId;
-		const searchTokens = this.getSearchQuery().toLowerCase().split(/\s+/).filter(Boolean);
+		const searchTokens = this.getSearchQuery()
+			.toLowerCase()
+			.split(/\s+/)
+			.filter(Boolean)
+			.map(token => new FuzzyQuery(token));
 		return node => {
 			const entry = node.entry;
 			const isCurrentLeaf = entry.id === leafId;
@@ -435,14 +443,23 @@ class TreeList implements Component {
 
 			// Apply fuzzy search filter
 			if (searchTokens.length > 0) {
-				const nodeText = this.#getSearchableText(node);
-				return searchTokens.every(token => fuzzyMatch(token, nodeText).matches);
+				const nodeText = this.#getFuzzyText(node);
+				return searchTokens.every(token => token.match(nodeText).matches);
 			}
 
 			return true;
 		};
 	}
 
+	/** Prepared fuzzy text for a node's searchable content, built once per label. */
+	#getFuzzyText(node: TreeSelectorNode): FuzzyText {
+		const cached = this.#searchTextCache.get(node);
+		if (cached !== undefined && cached.label === node.label) return cached.text;
+		const text = new FuzzyText(this.#getSearchableText(node));
+		this.#searchTextCache.set(node, { label: node.label, text });
+		return text;
+	}
+
 	/** Get searchable text content from a node */
 	#getSearchableText(node: TreeSelectorNode): string {
 		const entry = node.entry;
@@ -877,23 +894,26 @@ class TreeList implements Component {
 		// Linear rows reuse their branch head's depth. Existing sibling
 		// gutters remain visible; terminal gutters remain terminated.
 
+		// Branch points that can draw a gutter, indexed by rendered level: the
+		// ancestor list is as deep as the conversation, so it is scanned once
+		// per row rather than once per prefix cell.
+		// oxlint-disable-next-line unicorn/no-new-array -- length preallocation
+		const gutterByLevel: (TreeAncestor<string> | undefined)[] = new Array(renderedIndent);
+		for (const ancestor of row.ancestors) {
+			if (ancestor.siblingCount <= 1) continue;
+			if (this.#multipleRoots && this.#rootIds.has(ancestor.key)) continue;
+			const level = ancestor.depth - 1 - scrollOffset;
+			if (level >= 0 && level < renderedIndent && gutterByLevel[level] === undefined) {
+				gutterByLevel[level] = ancestor;
+			}
+		}
 		// Build prefix char by char, placing gutters and connector at their positions
 		const totalChars = renderedIndent * 3;
 		const prefixChars: string[] = [];
 		for (let i = 0; i < totalChars; i++) {
 			const level = Math.floor(i / 3);
-			const originalDepth = level + scrollOffset;
 			const posInLevel = i % 3;
-
-			// An ancestor branch point draws its gutter at its own depth minus
-			// one — the level its connector occupied. Session roots never emit
-			// gutters; their connectors are suppressed.
-			const gutterAncestor = row.ancestors.find(
-				ancestor =>
-					ancestor.depth - 1 === originalDepth &&
-					ancestor.siblingCount > 1 &&
-					!(this.#multipleRoots && this.#rootIds.has(ancestor.key)),
-			);
+			const gutterAncestor = gutterByLevel[level];
 			if (gutterAncestor) {
 				// Gutters follow standard tree semantics: `│` only while more
 				// siblings continue below, space below a `└─`.
@@ -1036,12 +1056,12 @@ class TreeList implements Component {
 	}
 
 	#extractContent(content: unknown): string {
-		return this.#joinTextContent(content).slice(0, SEARCH_TEXT_LIMIT);
+		return this.#joinTextContent(content, SEARCH_TEXT_LIMIT);
 	}
 
-	/** Concatenate every text block (or return a string as-is) with no length cap. */
-	#joinTextContent(content: unknown): string {
-		if (typeof content === "string") return content;
+	/** Concatenate text blocks, stopping as soon as `limit` characters exist. */
+	#joinTextContent(content: unknown, limit = Number.POSITIVE_INFINITY): string {
+		if (typeof content === "string") return content.length > limit ? content.slice(0, limit) : content;
 		if (Array.isArray(content)) {
 			let result = "";
 			for (const c of content) {
@@ -1054,6 +1074,7 @@ class TreeList implements Component {
 					typeof c.text === "string"
 				) {
 					result += c.text;
+					if (result.length >= limit) return result.slice(0, limit);
 				}
 			}
 			return result;

package/src/overlays/usage-dashboard.ts

@@ -43,7 +43,7 @@ import { editorKey, editorKeys } from "../chrome/keybinding-hints";
 import type { TspSpan, TspTableColumn, TspText, TspTone } from "@linxiraos/pi-wire";
 import { col, elapsed, node, span, text } from "../native/describe";
 import { type DescribeContext, leafKey, type NativeChild, type NativeNode, type NativeUiEvent } from "../native/node";
-import { actionButton } from "../native/overlay";
+import { actionBar, actionButton } from "../native/overlay";
 
 /** Local calendar-day activity consumed by the usage heatmap. */
 export interface DailyActivityPoint {
@@ -84,10 +84,12 @@ export interface ProviderCard {
 	/** Number of represented accounts, including unavailable usage lookups. */
 	accounts: number;
 	unavailableAccounts: string[];
-	/** Window rows sorted most-pressing first. */
+	/** Window rows in provider-declared order (e.g. 5h → weekly → monthly); the fullest CARD_MAX_WINDOWS lead. */
 	windows: CardWindowRow[];
-	/** True when every account reports no limits (e.g. enterprise plans). */
+	/** True when every account reports no limits (e.g. enterprise plans, providers without a quota API). */
 	unlimited: boolean;
+	/** Distinct report notes across accounts (e.g. why a provider exposes no quota windows). */
+	notes: string[];
 	/** True when nothing is used anywhere (or there are no limits): collapses to a tick. */
 	idle: boolean;
 	resetCredits?: {
@@ -146,8 +148,10 @@ function compactWindowTag(window: NonNullable<UsageLimit["window"]>): string {
  * Collapse usage reports into one compact card per provider: limits grouped by
  * quota bucket (label + window), each bucket showing the mean used fraction
  * across accounts (matching the classic report's aggregate "% free") with the
- * most-used account's reset countdown. Cards sort most-pressing first so
- * what's burning is on top-left; fully idle providers collapse into a tick.
+ * most-used account's reset countdown. Rows keep the provider's declared window
+ * order so 5h → week → month reads the same every time; cards sort by their
+ * fullest window so what's burning is on top-left; fully idle providers
+ * collapse into a tick.
  */
 export function buildProviderCards(
 	reports: UsageReport[],
@@ -181,7 +185,7 @@ export function buildProviderCards(
 			}
 		}
 
-		const windows: CardWindowRow[] = [...buckets.values()].map(bucket => {
+		const declared: CardWindowRow[] = [...buckets.values()].map(bucket => {
 			const fractions = bucket.limits
 				.map(limit => resolveUsedFraction(limit))
 				.filter((value): value is number => value !== undefined);
@@ -200,7 +204,13 @@ export function buildProviderCards(
 				usedText: fraction === undefined ? formatAbsoluteOnlyAmount(bucket.limits) : undefined,
 			};
 		});
-		windows.sort((a, b) => (b.fraction ?? -1) - (a.fraction ?? -1));
+		// Cards render at most CARD_MAX_WINDOWS rows; when a provider declares
+		// more, keep the fullest ones visible (still in declared order) so an
+		// exhausted bucket never hides behind "+N more".
+		const visible = new Set(
+			[...declared].sort((a, b) => (b.fraction ?? -1) - (a.fraction ?? -1)).slice(0, CARD_MAX_WINDOWS),
+		);
+		const windows = [...declared.filter(row => visible.has(row)), ...declared.filter(row => !visible.has(row))];
 		// The window tag earns its columns only when sibling rows would otherwise
 		// be indistinguishable (e.g. Antigravity's daily vs weekly "Usage (Google)").
 		for (const window of windows) {
@@ -254,6 +264,7 @@ export function buildProviderCards(
 			unavailableAccounts: unavailable,
 			windows,
 			unlimited: windows.length === 0 && unavailable.length === 0,
+			notes: [...new Set(providerReports.flatMap(report => report.notes ?? []))],
 			idle:
 				unavailable.length === 0 &&
 				!resetCredits &&
@@ -264,9 +275,12 @@ export function buildProviderCards(
 		});
 	}
 
+	const worstFraction = new Map(
+		cards.map(card => [card, card.windows.reduce((max, window) => Math.max(max, window.fraction ?? -1), -1)]),
+	);
 	cards.sort((a, b) => {
-		const aWorst = a.windows[0]?.fraction ?? -1;
-		const bWorst = b.windows[0]?.fraction ?? -1;
+		const aWorst = worstFraction.get(a)!;
+		const bWorst = worstFraction.get(b)!;
 		if (aWorst !== bWorst) return bWorst - aWorst;
 		return a.name.localeCompare(b.name);
 	});
@@ -440,6 +454,25 @@ function mutedText(content: string, wrap = false): NativeNode {
 	return text([span(content, "muted")], wrap ? { wrap: "word" } : { truncate: "end" });
 }
 
+/**
+ * A quiet line under the provider grid naming the providers that get no
+ * frame (`Untouched: Kimi Code, Zai`); `title` says why on hover.
+ */
+function footnote(key: string, label: string, cards: readonly ProviderCard[], title?: string): NativeNode {
+	const names = cards.map(card => card.name).join(", ");
+	return node(
+		"text",
+		{
+			spans: [span(`${label}: `, "dim"), span(names)],
+			wrap: "word",
+			role: "zeta.usage.footnote",
+			...(title ? { title: sanitizeDisplayLine(title) } : {}),
+		},
+		undefined,
+		key,
+	);
+}
+
 /** Stable, human account name for a report in the detail view. */
 function reportAccountLabel(report: UsageReport, limit: UsageLimit | undefined, index: number): string {
 	const metadata = report.metadata;
@@ -463,16 +496,14 @@ function detailWindowLabel(label: string, limit: UsageLimit): string | undefined
 	return sanitizeDisplayLine(windowLabel);
 }
 
+const WHOLE_DOLLARS = new Intl.NumberFormat("en-US", { maximumFractionDigits: 0 });
+const COMPACT_COUNT = new Intl.NumberFormat("en-US", { notation: "compact", maximumFractionDigits: 1 });
+
 /** `$1,234 · 5.6K requests` totals for the activity summary. */
 function formatActivityTotals(layout: HeatmapLayout): string {
 	const cost =
-		layout.totalCost >= 1
-			? `$${new Intl.NumberFormat("en-US", { maximumFractionDigits: 0 }).format(layout.totalCost)}`
-			: `$${layout.totalCost.toFixed(2)}`;
-	const requests = new Intl.NumberFormat("en-US", { notation: "compact", maximumFractionDigits: 1 }).format(
-		layout.totalRequests,
-	);
-	return `${cost} · ${requests} requests`;
+		layout.totalCost >= 1 ? `$${WHOLE_DOLLARS.format(layout.totalCost)}` : `$${layout.totalCost.toFixed(2)}`;
+	return `${cost} · ${COMPACT_COUNT.format(layout.totalRequests)} requests`;
 }
 
 // =============================================================================
@@ -547,6 +578,8 @@ export class UsageDashboardComponent implements Component {
 	#activityError: string | null = null;
 	#syncing = true;
 	#detailCache: { width: number; lines: string[] } | null = null;
+	/** ANSI overview rows; rebuilt when the revision or width changes. */
+	#overviewCache: { revision: number; width: number; lines: string[] } | null = null;
 	#lastViewportRows = 10;
 	#closed = false;
 	readonly #panel: OverlayPanel;
@@ -592,6 +625,7 @@ export class UsageDashboardComponent implements Component {
 
 	invalidate(): void {
 		this.#detailCache = null;
+		this.#overviewCache = null;
 		this.#panel.invalidate();
 	}
 
@@ -836,15 +870,8 @@ export class UsageDashboardComponent implements Component {
 		const ramp = this.#heatRamp();
 		const reset = "\x1b[39m";
 
-		const cost =
-			layout.totalCost >= 1
-				? `$${new Intl.NumberFormat("en-US", { maximumFractionDigits: 0 }).format(layout.totalCost)}`
-				: `$${layout.totalCost.toFixed(2)}`;
-		const requests = new Intl.NumberFormat("en-US", { notation: "compact", maximumFractionDigits: 1 }).format(
-			layout.totalRequests,
-		);
 		summary.push(
-			`${theme.bold(theme.fg("accent", "Activity"))} ${theme.fg("dim", `${cost} · ${requests} requests · last ${weeks} weeks`)}${this.#syncing ? theme.fg("dim", " · syncing…") : ""}`,
+			`${theme.bold(theme.fg("accent", "Activity"))} ${theme.fg("dim", `${formatActivityTotals(layout)} · last ${weeks} weeks`)}${this.#syncing ? theme.fg("dim", " · syncing…") : ""}`,
 		);
 		summary.push("");
 
@@ -876,10 +903,13 @@ export class UsageDashboardComponent implements Component {
 	// ---------------------------------------------------------------------------
 
 	#overviewLines(innerWidth: number): string[] {
+		const cached = this.#overviewCache;
+		if (cached?.revision === this.#revision && cached.width === innerWidth) return cached.lines;
 		const lines: string[] = [];
 		lines.push(...this.#renderCardsGrid(innerWidth));
 		lines.push("");
 		lines.push(...this.#renderHeatmap(innerWidth));
+		this.#overviewCache = { revision: this.#revision, width: innerWidth, lines };
 		return lines;
 	}
 
@@ -935,9 +965,9 @@ export class UsageDashboardComponent implements Component {
 	 * The sheet body (the terminal's `lg` overlay is the frame): a head row
 	 * (checked ago, Overview/Details tabs, Refresh), then either the provider
 	 * grid of frames with window meters and the activity heatmap, or the
-	 * per-provider detail tables. `meter`/`chart` fall back to
-	 * `progress`/`table` on terminals without them. Rebuilt only when its
-	 * inputs change.
+	 * per-provider detail tables, then Close like the other report sheets.
+	 * `meter`/`chart` fall back to `progress`/`table` on terminals without
+	 * them. Rebuilt only when its inputs change.
 	 */
 	describe(cx: DescribeContext): NativeNode {
 		const meter = cx.supports("meter");
@@ -947,15 +977,20 @@ export class UsageDashboardComponent implements Component {
 			return cache.node;
 		}
 		const body = this.#view === "detail" ? this.#describeDetail() : this.#describeOverview(meter, chart);
-		const root = col([this.#describeHead(), node("col", { gap: "lg" }, body, this.#view)], { gap: "lg" });
+		// Esc leaves Details for Overview first, so only Overview's Close wears its keycap.
+		const close = actionButton("Close", "close", this.#view === "overview" ? { keys: "escape" } : {});
+		const root = col([this.#describeHead(), node("col", { gap: "lg" }, body, this.#view), actionBar([null, close])], {
+			gap: "lg",
+		});
 		this.#nativeCache = { revision: this.#revision, meter, chart, node: root };
 		return root;
 	}
 
-	/** Tab clicks switch views like Enter/Esc; the Refresh button runs `r`. */
+	/** Tab clicks switch views like Enter/Esc; the Refresh button runs `r`; Close closes from either view. */
 	handleNativeEvent(event: NativeUiEvent): void {
 		if (event.type === "action") {
 			if (event.act === "refresh") void this.#refresh();
+			else if (event.act === "close") this.#close();
 			return;
 		}
 		if (event.type !== "select" && event.type !== "activate") return;
@@ -1007,41 +1042,59 @@ export class UsageDashboardComponent implements Component {
 		const children: NativeChild[] = [];
 		if (this.#cards.length === 0) {
 			children.push(
-				node(
-					"text",
-					{ spans: [span("No usage data available.")], role: "zeta.usage.untouched" },
-					undefined,
-					"none",
-				),
+				node("text", { spans: [span("No usage data available.")], role: "zeta.usage.footnote" }, undefined, "none"),
 			);
 		} else {
-			// Unlimited providers keep a frame reading "No limits"; only untouched ones collapse.
-			const active = this.#cards.filter(entry => !entry.idle || entry.unlimited);
-			const idle = this.#cards.filter(entry => entry.idle && !entry.unlimited);
-			if (active.length > 0) {
+			// Only providers with something to show get a frame: the rest are
+			// named in footnotes, whether untouched, unreadable or quota-less.
+			const framed: ProviderCard[] = [];
+			const untouched: ProviderCard[] = [];
+			const unreported: ProviderCard[] = [];
+			const unmetered: ProviderCard[] = [];
+			for (const entry of this.#cards) {
+				const shown =
+					entry.windows.length > 0 || entry.resetCredits !== undefined || entry.daybreakAccounts !== undefined;
+				if (!shown) (entry.unavailableAccounts.length > 0 ? unreported : unmetered).push(entry);
+				else if (entry.idle) untouched.push(entry);
+				else framed.push(entry);
+			}
+			if (framed.length > 0) {
 				children.push(
 					node(
 						"row",
 						{ wrap: true, gap: "md", role: "zeta.usage.grid" },
-						active.map(entry => this.#describeCard(entry, meter)),
+						framed.map(entry => this.#describeCard(entry, meter)),
 						"providers",
 					),
 				);
 			}
-			if (idle.length > 0) {
-				children.push(
-					node(
-						"text",
-						{
-							spans: [span(`Untouched: ${idle.map(entry => entry.name).join(", ")}`)],
-							wrap: "word",
-							role: "zeta.usage.untouched",
-						},
-						undefined,
-						"idle",
+			const notes: NativeNode[] = [];
+			if (untouched.length > 0) notes.push(footnote("idle", "Untouched", untouched));
+			if (unreported.length > 0) {
+				const accounts = unreported.flatMap(entry =>
+					entry.unavailableAccounts.map(account => `${entry.name} (${account})`),
+				);
+				notes.push(
+					footnote(
+						"unreported",
+						"No usage data",
+						unreported,
+						`No usage report came back for ${accounts.join(", ")}: the sign-in expired, the request failed, or the plan has no quotas`,
+					),
+				);
+			}
+			if (unmetered.length > 0) {
+				const why = unmetered.flatMap(entry => entry.notes.map(note => `${entry.name}: ${note}`));
+				notes.push(
+					footnote(
+						"unmetered",
+						"No quotas reported",
+						unmetered,
+						why.length > 0 ? why.join(" • ") : "These providers report no quota windows to track",
 					),
 				);
 			}
+			if (notes.length > 0) children.push(node("col", { gap: "xs" }, notes, "footnotes"));
 		}
 		children.push(this.#describeActivity(chart));
 		return children;
@@ -1092,10 +1145,10 @@ export class UsageDashboardComponent implements Component {
 			);
 		}
 		for (const account of entry.unavailableAccounts) {
-			children.push(mutedText(`${sanitizeDisplayLine(account)}: usage unavailable`, true));
+			children.push(mutedText(`${sanitizeDisplayLine(account)}: no usage data`, true));
 		}
 		if (entry.unlimited) {
-			children.push(mutedText("No limits"));
+			children.push(mutedText("No quotas reported"));
 		} else {
 			for (const [index, window] of entry.windows.slice(0, CARD_MAX_WINDOWS).entries()) {
 				const label: TspSpan[] = [span(sanitizeDisplayLine(window.label))];
@@ -1104,7 +1157,9 @@ export class UsageDashboardComponent implements Component {
 					text(label, { role: "zeta.usage.label", truncate: "middle", title: sanitizeDisplayLine(window.label) }),
 				];
 				if (window.fraction === undefined) {
-					cells.push(text([span(window.usedText ?? "No data", "muted")], { truncate: "end" }));
+					cells.push(
+						text([span(window.usedText ?? "No data", "muted")], { role: "zeta.usage.amount", truncate: "end" }),
+					);
 				} else {
 					const token =
 						window.status === "exhausted" ? "error" : window.status === "warning" ? "warning" : undefined;
@@ -1221,7 +1276,7 @@ export class UsageDashboardComponent implements Component {
 			const children: NativeChild[] = [];
 			for (const account of unavailable) {
 				if (account.provider !== entry.provider) continue;
-				children.push(mutedText(`${sanitizeDisplayLine(account.label)}: usage unavailable`, true));
+				children.push(mutedText(`${sanitizeDisplayLine(account.label)}: no usage data`, true));
 			}
 
 			const facts: { k: TspText; v: TspText }[] = [];
@@ -1313,7 +1368,7 @@ export class UsageDashboardComponent implements Component {
 				children.push(node("table", { cols, rows }, undefined, "limits"));
 				for (const note of new Set(limitNotes)) children.push(mutedText(note, true));
 			} else if (unavailable.every(account => account.provider !== entry.provider)) {
-				children.push(mutedText("No limits"));
+				children.push(mutedText("No quotas reported"));
 			}
 			sections.push(
 				node(
@@ -1384,8 +1439,7 @@ export class UsageDashboardComponent implements Component {
 				this.#setView("overview");
 				return;
 			}
-			this.dispose();
-			this.#options.onClose();
+			this.#close();
 			return;
 		}
 		if (matchesKey(data, "r")) {
@@ -1408,4 +1462,9 @@ export class UsageDashboardComponent implements Component {
 			this.#options.requestRender();
 		} else if (matchesKey(data, "end")) this.#scrollBy(Number.MAX_SAFE_INTEGER);
 	}
+
+	#close(): void {
+		this.dispose();
+		this.#options.onClose();
+	}
 }

package/src/overlays/usage-display.ts

@@ -1,4 +1,4 @@
-import type { UsageLimit, UsageReport, UsageResetCredits } from "@linxiraos/pi-ai";
+import type { UsageLimit, UsageReport, UsageResetCreditDetail, UsageResetCredits } from "@linxiraos/pi-ai";
 
 /** Include the usage tier in a limit title unless its label already names it. */
 export function formatLimitTitle(limit: UsageLimit): string {
@@ -51,6 +51,13 @@ export interface UsageResetSummary {
 	unavailableReason?: string;
 }
 
+/** Expiry (epoch ms) of a credit that still banks a reset, whether or not it can be spent now. */
+export function bankedResetCreditExpiryMs(credit: UsageResetCreditDetail): number | undefined {
+	if (!credit.expiresAt || credit.remainingCount === 0 || credit.status === "redeemed") return undefined;
+	const expiryMs = Date.parse(credit.expiresAt);
+	return Number.isFinite(expiryMs) ? expiryMs : undefined;
+}
+
 /**
  * Normalize old count-only and current provider reset metadata for display.
  * `availableCount` is banked inventory; `redeemableCount` is the subset that
@@ -68,9 +75,8 @@ export function summarizeUsageResetCredits(
 	let latestExpired: string | undefined;
 	let latestExpiredMs = Number.NEGATIVE_INFINITY;
 	for (const credit of reset.credits ?? []) {
-		if (!credit.expiresAt || credit.remainingCount === 0 || credit.status === "redeemed") continue;
-		const expiryMs = Date.parse(credit.expiresAt);
-		if (!Number.isFinite(expiryMs)) continue;
+		const expiryMs = bankedResetCreditExpiryMs(credit);
+		if (expiryMs === undefined) continue;
 		if (expiryMs > nowMs && expiryMs < soonestExpiryMs) {
 			soonestExpiryMs = expiryMs;
 			soonestExpiry = credit.expiresAt;

package/src/overlays/usage-row.ts

@@ -5,17 +5,19 @@ import { formatDuration, formatNumber } from "@linxiraos/pi-utils";
 import { theme } from "../theme/theme";
 import { formatMetricRow, MetricRow, type MetricSpec } from "../components/metric";
 import { node, row, span, text } from "../native/describe";
-import type { NativeChild, NativeNode } from "../native/node";
+import type { DescribeContext, NativeChild, NativeNode } from "../native/node";
 
 /** Below this the rate is nonsense (cached/instant responses yield absurd tok/s). */
 const MIN_DURATION_MS = 100;
 
-/** Local `YYYY-MM-DD HH:mm:ss` stamp for the per-turn usage row. */
-function formatUsageTimestamp(ms: number): string {
+/** Local ISO date with a wall-clock time; only the hour cycle follows the terminal. */
+function formatUsageTimestamp(ms: number, hour12 = false): string {
 	const d = new Date(ms);
 	const pad = (n: number): string => String(n).padStart(2, "0");
 	const date = `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())}`;
-	const time = `${pad(d.getHours())}:${pad(d.getMinutes())}:${pad(d.getSeconds())}`;
+	const time = hour12
+		? d.toLocaleTimeString([], { hour: "2-digit", minute: "2-digit", second: "2-digit", hour12 })
+		: `${pad(d.getHours())}:${pad(d.getMinutes())}:${pad(d.getSeconds())}`;
 	return `${date} ${time}`;
 }
 
@@ -161,6 +163,8 @@ class UsageRowBlock extends Container {
 	readonly #timestamp: number | undefined;
 	readonly #turnElapsedMs: number | undefined;
 	#nativeNode: NativeNode | undefined;
+	/** The terminal's clock {@link #nativeNode} was described with. */
+	#nativeHour12: boolean | undefined;
 
 	constructor(usage: Usage, durationMs?: number, ttftMs?: number, timestamp?: number, turnElapsedMs?: number) {
 		super();
@@ -186,13 +190,23 @@ class UsageRowBlock extends Container {
 	 * ttft 0.9s · 96 tok/s`): worded metrics instead of the ANSI icons, the
 	 * full timestamp in the tooltip, and throughput as a `rate`.
 	 */
-	override describe(): NativeNode {
-		if (this.#nativeNode) return this.#nativeNode;
+	override describe(cx?: DescribeContext): NativeNode {
+		// The terminal's clock: the process locale doesn't reliably carry the user's 12/24-hour choice.
+		const hour12 = cx?.hour12;
+		if (this.#nativeNode && this.#nativeHour12 === hour12) return this.#nativeNode;
+		this.#nativeHour12 = hour12;
 		const usage = this.#usage;
 		const parts: string[] = [];
 		const timestamp = this.#timestamp;
 		const stamped = timestamp !== undefined && Number.isFinite(timestamp) && timestamp > 0;
-		if (stamped) parts.push(formatUsageTimestamp(timestamp).slice(11, 16));
+		// Only a 12-hour clock goes through the locale; 24-hour keeps the tooltip's own `HH:mm`.
+		if (stamped) {
+			parts.push(
+				hour12
+					? new Date(timestamp).toLocaleTimeString([], { hour: "2-digit", minute: "2-digit", hour12 })
+					: formatUsageTimestamp(timestamp).slice(11, 16),
+			);
+		}
 		if (this.#turnElapsedMs !== undefined && this.#turnElapsedMs > 0) {
 			parts.push(`Δ ${formatDuration(Math.round(this.#turnElapsedMs))}`);
 		}
@@ -211,7 +225,7 @@ class UsageRowBlock extends Container {
 			role: "zeta.usage.turn",
 			gap: "none",
 			align: "baseline",
-			...(stamped ? { title: formatUsageTimestamp(timestamp) } : {}),
+			...(stamped ? { title: formatUsageTimestamp(timestamp, hour12) } : {}),
 		});
 		return this.#nativeNode;
 	}

package/src/prompt/attachment-chips.ts

@@ -12,7 +12,7 @@ import {
 	visibleWidth,
 } from "../index";
 import { fileHyperlink } from "../render/hyperlink";
-import { registerNativeBlob } from "../native/blobs";
+import { nativeImageNode } from "../native/blobs";
 import { node, row, span } from "../native/describe";
 import { plainText } from "../native/spans";
 import type { DescribeContext, NativeNode } from "../native/node";
@@ -33,12 +33,9 @@ const RESET_FG = "\x1b[39m";
  *  (pastes are usually re-encoded JPEG/WebP) convert before transmit — the same pipeline
  *  the transcript uses. `null` = conversion in flight or failed. */
 const kImagePng = Symbol("zeta.imagePng");
-/** Content address of the draft image's decoded bytes, registered once for TSP `image` nodes. */
-const kImageBlob = Symbol("zeta.imageBlob");
 
 interface ImageContentWithPng extends ImageContent {
 	[kImagePng]?: ImageContent | null;
-	[kImageBlob]?: string;
 }
 
 /**
@@ -57,7 +54,9 @@ export class AttachmentChipsBand implements Component {
 		private readonly requestRender: () => void,
 	) {}
 
-	#native: { chips: readonly ComposerChipDescriptor[]; node: NativeNode } | undefined;
+	#native:
+		| { chips: readonly ComposerChipDescriptor[]; node: NativeNode; images: ReadonlyMap<ImageContent, NativeNode> }
+		| undefined;
 
 	/**
 	 * A wrapping `row` of chip `card`s (`zeta.composer.chip`) titled with the
@@ -69,6 +68,7 @@ export class AttachmentChipsBand implements Component {
 		const chips = this.editor.composerChips();
 		if (this.#native?.chips === chips) return this.#native.node;
 		const cards: NativeNode[] = [];
+		const images = new Map<ImageContent, NativeNode>();
 		for (const chip of chips) {
 			const icon = theme.symbol(
 				chip.kind === "paste" ? "chip.paste" : chip.kind === "video" ? "chip.video" : "chip.image",
@@ -86,11 +86,14 @@ export class AttachmentChipsBand implements Component {
 			} else {
 				const dims = this.#imageDims(chip.image);
 				caption = dims ? `${dims.width}x${dims.height}` : "";
-				const image = chip.image as ImageContentWithPng;
-				const blob = image[kImageBlob] ?? registerNativeBlob(Buffer.from(image.data, "base64"), image.mimeType);
-				image[kImageBlob] = blob;
+				const image = chip.image;
+				const native =
+					images.get(image) ??
+					this.#native?.images.get(image) ??
+					nativeImageNode(Buffer.from(image.data, "base64"), image.mimeType);
+				images.set(image, native);
 				content = node("image", {
-					blob,
+					...native.p,
 					alt: title,
 					w: dims?.width,
 					h: dims?.height,
@@ -106,7 +109,7 @@ export class AttachmentChipsBand implements Component {
 			);
 		}
 		const described = row(cards, { gap: "sm", wrap: true, role: "zeta.composer.chips", hidden: cards.length === 0 });
-		this.#native = { chips, node: described };
+		this.#native = { chips, node: described, images };
 		return described;
 	}
 
@@ -249,7 +252,8 @@ export class AttachmentChipsBand implements Component {
 
 	/** Leading 4 rows x 12 cols of the pasted text, muted. */
 	#textInterior(entry: TextAttachment): string[] {
-		const lines = entry.content.split("\n");
+		// Only the leading rows are drawn; don't split a multi-KB paste every frame.
+		const lines = entry.content.split("\n", INNER_ROWS);
 		const rows: string[] = [];
 		for (let r = 0; r < INNER_ROWS; r++) {
 			const cut = truncateToWidth(replaceTabs(lines[r] ?? ""), INNER_COLS);