@linxiraos/pi-tui 1.2.1 → 1.3.1

package/src/setup/scenes/splash.ts

@@ -6,7 +6,14 @@ import { formatKeyHint } from "../../app-keybindings";
 import { col, node, span, text } from "../../native/describe";
 import type { NativeNode } from "../../native/node";
 import { Memo } from "../../native/memo";
-import { gradientEscape, gradientLogo, ZETA_LOGO, type ShineConfig, logoNode } from "../../prompt/welcome";
+import {
+	gradientEscape,
+	gradientLogo,
+	ZETA_LOGO,
+	ZETA_SUBLINE,
+	type ShineConfig,
+	logoNode,
+} from "../../prompt/welcome";
 
 export const SETUP_SPLASH_MS = 2600;
 export const SETUP_TICK_MS = 33;
@@ -159,11 +166,12 @@ function resetCells(width: number, height: number): string[][] {
 let diagonalEscapes: (string | undefined)[] = [];
 
 /**
- * Animated setup splash, in the spirit of the Zeta visual identity: the brand ζ
- * mark rendered with the live diagonal gradient + shine sweep, rising out of a
- * rippling, gradient-lit water surface, under a faint twinkling starfield. The
- * mark and water share one continuous gradient so the sweep reads across the
- * whole scene; the water surface drifts each frame.
+ * Animated setup splash, in the spirit of the Zeta visual identity: the brand
+ * mark — the FIGlet-rendered Latin `Z`, the ASCII form of `Ζ` — with the live
+ * diagonal gradient + shine sweep, rising out of a rippling, gradient-lit water
+ * surface, under a faint twinkling starfield. The mark and water share one
+ * continuous gradient so the sweep reads across the whole scene; the water
+ * surface drifts each frame.
  */
 export function renderSetupSplash(width: number, height: number, elapsedMs: number): string[] {
 	const w = Math.max(1, width);
@@ -265,7 +273,8 @@ export function describeSetupSplash(): NativeNode {
 			[
 				node("spacer", { grow: 1 }),
 				logoNode(LARGE_LOGO, true),
-				text([span("Z e t a", "strong")], { wrap: "none" }),
+				text([span("Zeta", "strong")], { wrap: "none" }),
+				text([span("Linxira-Zeta", "dim")], { wrap: "none" }),
 				node("spacer", { grow: 1 }),
 				text([span(hint, "dim")], { wrap: "none" }),
 			],
@@ -277,7 +286,12 @@ export function describeSetupSplash(): NativeNode {
 /** Centered fallback for windows too small to hold the full scene. */
 function renderCompactSplash(width: number, height: number, phase: number, shine: ShineConfig): string[] {
 	const art = height >= 14 ? LARGE_LOGO : ZETA_LOGO;
-	const content = [...gradientLogo(art, phase, shine), "", theme.bold("Z e t a")];
+	const content = [
+		...gradientLogo(art, phase, shine),
+		"",
+		theme.bold("Zeta"),
+		...ZETA_SUBLINE.map(row => theme.fg("dim", row)),
+	];
 	const start = Math.max(0, Math.floor((height - content.length) / 2));
 	const lines: string[] = [];
 	for (let y = 0; y < height; y++) {

package/src/status-line/component.ts

@@ -43,7 +43,7 @@ import type { TspMeterMark, TspProps } from "@linxiraos/pi-wire";
 import type { NativeNode, NativeUiEvent } from "../native/node";
 import { col, node, span } from "../native/describe";
 import { getContextMeterThresholds } from "../chrome/context-thresholds";
-import { isNativeRendering } from "../native/state";
+import { isNativeRendering, onNativeRenderingChange } from "../native/state";
 import { getSeparator } from "./separators";
 import type {
 	CollabStatus,
@@ -162,6 +162,10 @@ const WATCHER_FAILURE_POLL_TTL_MS = 5000;
 const BRAND_FADE_MS = 450;
 /** Repaint cadence while the brand fade is in flight (rust zeta's `FADE_FRAME`). */
 const BRAND_FADE_FRAME_MS = 40;
+/** Repaint cadence while a turn's active-processing window is open: keeps the
+ * status bar's clock-driven readouts (pi spinner, turn timer) animating when
+ * no other component is requesting renders. */
+const ACTIVE_WINDOW_REPAINT_MS = 250;
 
 /**
  * Providers whose subscription quota is a single monthly bucket, so their
@@ -380,6 +384,7 @@ interface ContextUsageMemo {
 	length: number;
 	lastFingerprint: string | undefined;
 	modelContextWindow: number;
+	toolSchemasInContext: boolean;
 	contextUsageRevision: number;
 	toolSchemaMetadataRevision: number;
 	settingsRevision: number;
@@ -697,6 +702,8 @@ export class StatusLineComponent<TSession extends StatusLineSession = StatusLine
 	#gitWatcherUnavailable = false;
 	#onBranchChange: (() => void) | null = null;
 	#disposed = false;
+	/** Unsubscribe for the native-rendering feed; re-arms the turn-window ticker when a TSP surface is revoked. */
+	#unwatchNativeRendering: (() => void) | undefined;
 	#autoCompactEnabled: boolean = true;
 	/** Pulse timer for the running-speculation indicator; live only while speculation runs. */
 	#speculationBlinkTimer: NodeJS.Timeout | undefined;
@@ -707,6 +714,8 @@ export class StatusLineComponent<TSession extends StatusLineSession = StatusLine
 	#brandWorking = false;
 	/** Frame timer driving repaints while the brand fade is unsettled. */
 	#brandFadeTimer: NodeJS.Timeout | undefined;
+	/** Repaint ticker while a turn's active-processing window is open (see #syncActiveWindowRepaint). */
+	#activeWindowRepaintTimer: NodeJS.Timeout | undefined;
 	/** One wall-clock wakeup for the active model's next tariff change, including while idle. */
 	#pricingTimer: NodeJS.Timeout | undefined;
 	#pricingTimerCost: ModelCost | undefined;
@@ -774,9 +783,12 @@ export class StatusLineComponent<TSession extends StatusLineSession = StatusLine
 	// than poison the fresh cache or advance its throttle.
 	#jjCacheGeneration = 0;
 
-	// PR lookup caching (invalidated on branch/repo context changes)
+	// PR lookup cache. `#cachedPrContext` is the branch/repo `#cachedPr` was
+	// resolved for; it is never shown for any other branch. Expiry forces a
+	// refetch while keeping that branch's PR visible until the lookup lands.
 	#cachedPr: { number: number; url: string } | null | undefined = undefined;
 	#cachedPrContext: PrCacheContext | undefined = undefined;
+	#cachedPrExpired = false;
 	#prLookupInFlight = false;
 	#defaultBranch?: string;
 	#defaultBranchCwd: string | undefined = undefined;
@@ -829,6 +841,7 @@ export class StatusLineComponent<TSession extends StatusLineSession = StatusLine
 		private readonly host: StatusLineHost<TSession>,
 	) {
 		this.#settings = host.getSettings();
+		this.#unwatchNativeRendering = onNativeRenderingChange(() => this.#syncActiveWindowRepaint());
 	}
 
 	#gitEnabled(): boolean {
@@ -935,6 +948,12 @@ export class StatusLineComponent<TSession extends StatusLineSession = StatusLine
 			this.#invalidateSessionCaches();
 			this.#closeStaleActiveWindow();
 		}
+		// The ticker self-stops once its tick sees no open window for the
+		// newly-attached session; re-pointing focus at a session whose turn
+		// is still running must re-arm it, and no other path reliably fires
+		// here (closeStaleActiveWindow returns early while streaming, and
+		// the synthesized agent_start no-ops on an already-open window).
+		this.#syncActiveWindowRepaint();
 		this.invalidate();
 	}
 
@@ -1033,6 +1052,7 @@ export class StatusLineComponent<TSession extends StatusLineSession = StatusLine
 		meter.activeMs = 0;
 		meter.activeStartedAt = null;
 		this.#invalidateStatusLineRenderCache();
+		this.#syncActiveWindowRepaint();
 	}
 
 	/**
@@ -1047,6 +1067,7 @@ export class StatusLineComponent<TSession extends StatusLineSession = StatusLine
 		if (meter.activeStartedAt !== null) return;
 		meter.activeStartedAt = Date.now();
 		this.#invalidateStatusLineRenderCache();
+		this.#syncActiveWindowRepaint();
 	}
 
 	/**
@@ -1061,6 +1082,7 @@ export class StatusLineComponent<TSession extends StatusLineSession = StatusLine
 		meter.activeMs += Math.max(0, Date.now() - meter.activeStartedAt);
 		meter.activeStartedAt = null;
 		this.#invalidateStatusLineRenderCache();
+		this.#syncActiveWindowRepaint();
 	}
 
 	/**
@@ -1290,8 +1312,11 @@ export class StatusLineComponent<TSession extends StatusLineSession = StatusLine
 		this.#onBranchChange = null;
 		this.#stopSpeculationBlink();
 		this.#stopBrandFadeTimer();
+		this.#stopActiveWindowRepaint();
 		this.#stopPricingTimer();
 		this.#clearUsageStartTimer();
+		this.#unwatchNativeRendering?.();
+		this.#unwatchNativeRendering = undefined;
 		this.#onCodexResetFireworks = undefined;
 		this.#onResetExpiryNotice = undefined;
 		this.#codexResetSnapshots.clear();
@@ -1395,6 +1420,40 @@ export class StatusLineComponent<TSession extends StatusLineSession = StatusLine
 		this.#brandFadeTimer = undefined;
 	}
 
+	/**
+	 * Keep the status bar repainting while a turn's active-processing window
+	 * is open. The `pi` segment's spinner and turn timer are painted from the
+	 * wall clock at render time, so they only animate when frames flow; during
+	 * a quiet turn the working-row loader's 80 ms tick is normally the sole
+	 * repaint source, and paths that stop or bypass that loader mid-turn (an
+	 * error banner, a stale retry/compaction loader reference) froze the
+	 * spinner until the next keystroke. The status line owns the active
+	 * window, so it owns a repaint source for it; a native surface clocks its
+	 * own spinner and needs none.
+	 */
+	#syncActiveWindowRepaint(): void {
+		if (this.#disposed || isNativeRendering() || this.getTurnElapsedMs() === null) {
+			this.#stopActiveWindowRepaint();
+			return;
+		}
+		if (this.#activeWindowRepaintTimer) return;
+		const timer = setInterval(() => {
+			if (this.#disposed || isNativeRendering() || this.getTurnElapsedMs() === null) {
+				this.#stopActiveWindowRepaint();
+				return;
+			}
+			this.#onBranchChange?.();
+		}, ACTIVE_WINDOW_REPAINT_MS);
+		timer.unref?.();
+		this.#activeWindowRepaintTimer = timer;
+	}
+
+	#stopActiveWindowRepaint(): void {
+		if (!this.#activeWindowRepaintTimer) return;
+		clearInterval(this.#activeWindowRepaintTimer);
+		this.#activeWindowRepaintTimer = undefined;
+	}
+
 	#stopPricingTimer(): void {
 		clearTimeout(this.#pricingTimer);
 		this.#pricingTimer = undefined;
@@ -1457,8 +1516,8 @@ export class StatusLineComponent<TSession extends StatusLineSession = StatusLine
 		// was designed to avoid. Explicit Git/repository invalidation (watcher
 		// HEAD-move, cwd/repo switch) goes through {@link invalidateGitCaches}.
 		// A tool may open, close, or merge a PR without moving HEAD. Expire the
-		// settled PR context on ordinary activity while leaving HEAD work intact.
-		this.#cachedPrContext = undefined;
+		// settled PR on ordinary activity while leaving HEAD work intact.
+		this.#cachedPrExpired = true;
 	}
 	#invalidateSessionCaches(): void {
 		this.#clearUsageStartTimer();
@@ -1489,7 +1548,7 @@ export class StatusLineComponent<TSession extends StatusLineSession = StatusLine
 		this.#branchResolveActive = undefined;
 		this.#branchLastFetch = undefined;
 		this.#branchCacheGeneration++;
-		this.#cachedPrContext = undefined;
+		this.#cachedPrExpired = true;
 		// A HEAD move (commit, checkout, reset) changes the dirty counts; keep the
 		// stale counts on screen but refetch on the next render. The generation
 		// bump stops an in-flight pre-move result from re-stamping freshness.
@@ -1810,11 +1869,16 @@ export class StatusLineComponent<TSession extends StatusLineSession = StatusLine
 		const branch = this.#getBranchLabel(activeRepoCache, this.#resolveRepository(activeRepoCache));
 		const currentContext = branch ? createPrCacheContext(branch, this.#cachedBranchRepoId ?? null) : null;
 
-		if (canReuseCachedPr(this.#cachedPr, this.#cachedPrContext, currentContext)) {
+		if (!this.#cachedPrExpired && canReuseCachedPr(this.#cachedPr, this.#cachedPrContext, currentContext)) {
 			return this.#cachedPr ?? null;
 		}
 
-		const stalePr = this.#cachedPr;
+		// Keep an expired PR visible during the refetch only on the branch it
+		// was resolved for; after a checkout the old PR must not linger.
+		const stalePr =
+			currentContext && isSamePrCacheContext(this.#cachedPrContext, currentContext)
+				? (this.#cachedPr ?? null)
+				: null;
 
 		if (!branch) {
 			this.#cachedPr = null;
@@ -1822,10 +1886,9 @@ export class StatusLineComponent<TSession extends StatusLineSession = StatusLine
 			return null;
 		}
 
-		// Don't look up if detached, default branch, or already in flight.
-		if (branch === "detached" || this.#isDefaultBranch(branch, gitCwd) || this.#prLookupInFlight) {
-			return stalePr ?? null;
-		}
+		// Detached HEAD and the default branch never carry a PR; no lookup.
+		if (branch === "detached" || this.#isDefaultBranch(branch, gitCwd)) return null;
+		if (this.#prLookupInFlight) return stalePr;
 
 		this.#prLookupInFlight = true;
 		const lookupContext = currentContext;
@@ -1847,6 +1910,7 @@ export class StatusLineComponent<TSession extends StatusLineSession = StatusLine
 				if (lookupContext && isSamePrCacheContext(latestContext, lookupContext)) {
 					this.#cachedPr = value;
 					this.#cachedPrContext = lookupContext;
+					this.#cachedPrExpired = false;
 				}
 			};
 			try {
@@ -1980,6 +2044,7 @@ export class StatusLineComponent<TSession extends StatusLineSession = StatusLine
 	 * cadence while a late successful fetch can still refresh the cached segment.
 	 */
 	refreshUsageInBackground(): void {
+		if (this.#disposed) return;
 		const now = Date.now();
 		const session = this.session;
 		const usageContextKey = this.#getUsageContextKey(session);
@@ -2407,6 +2472,7 @@ export class StatusLineComponent<TSession extends StatusLineSession = StatusLine
 	getCachedContextBreakdown(): { usedTokens: number; contextWindow: number } {
 		const messages = this.session.messages ?? EMPTY_MESSAGES;
 		const modelContextWindow = this.session.model?.contextWindow ?? 0;
+		const toolSchemasInContext = this.session.model?.toolSchemasInContext !== false;
 		const length = messages.length;
 		const lastFingerprint = length > 0 ? messageFingerprint(messages[length - 1]!) : undefined;
 		// Bumps when the in-flight pending snapshot is set/cleared. Without it a
@@ -2428,6 +2494,7 @@ export class StatusLineComponent<TSession extends StatusLineSession = StatusLine
 			cache.length === length &&
 			cache.lastFingerprint === lastFingerprint &&
 			cache.modelContextWindow === modelContextWindow &&
+			cache.toolSchemasInContext === toolSchemasInContext &&
 			cache.contextUsageRevision === contextUsageRevision &&
 			cache.systemPromptRef === systemPrompt &&
 			cache.toolsRef === tools &&
@@ -2448,6 +2515,7 @@ export class StatusLineComponent<TSession extends StatusLineSession = StatusLine
 			length,
 			lastFingerprint,
 			modelContextWindow,
+			toolSchemasInContext,
 			contextUsageRevision,
 			toolSchemaMetadataRevision,
 			settingsRevision,

package/src/status-line/context-usage.ts

@@ -143,6 +143,7 @@ export function computeCompactionBoundaries(
 
 /** Stable inputs used to cache non-message token estimates. */
 export interface NonMessageTokenSource {
+	readonly model?: Model;
 	readonly systemPrompt?: readonly string[];
 	readonly agent?: {
 		readonly state?: {
@@ -272,30 +273,32 @@ export function estimateToolSchemaTokens(tools: ToolSchemaSource, tokenizer: Tok
 	return tokens;
 }
 
+/** Count schemas carried on every request, excluding server-side deferred catalogs. */
+export function estimateContextToolSchemaTokens(
+	tools: ToolSchemaSource,
+	tokenizer: Tokenizer,
+	model: Model | undefined,
+	sourceRevision = 0,
+): number {
+	return model?.toolSchemasInContext === false ? 0 : estimateToolSchemaTokens(tools, tokenizer, sourceRevision);
+}
+
 /**
  * Compute just the NON-MESSAGE token total: system prompt (with its skills
  * section subtracted, since skills are tokenized separately) + system context
  * (the rest of the system-prompt array) + tools + skills.
  *
  * Exposed so callers like `StatusLineComponent` can cache the non-message
- * total separately from the message total. Non-message inputs (skills,
- * tools, system prompt) change rarely; the message list grows on every
- * streaming turn. Splitting the two lets the caller refresh each on its own
- * cadence — non-message recomputed only when the inputs identity changes,
- * messages walked incrementally as new entries append.
+ * total separately from the growing message total. A model switch can change
+ * which tool schemas occupy context without changing the roster.
  */
-// Non-message inputs (system prompt, tools, skills) change rarely — at most
-// once per turn via setSystemPrompt/setTools — but the per-turn compaction and
-// threshold paths call these helpers several times: getContextBreakdown calls
-// both, and #estimateStoredContextTokens adds a third. Memoize on the identity
-// of the three input arrays so the expensive parts (system-prompt tokenization
-// and the per-tool JSON.stringify(toolWireSchema) inside estimateToolSchemaTokens)
-// run at most once per input change rather than per call. The identity keys are
-// the same stable references the StatusLineComponent cache already trusts
-// (setSystemPrompt/setTools replace the array reference rather than mutating it).
+// The per-turn threshold and compaction paths call these helpers repeatedly.
+// Cache by prompt, roster, skills, tokenizer, revision, and model schema policy;
+// setSystemPrompt/setTools replace their arrays rather than mutating them.
 interface NonMessageTokenCache {
 	systemPromptRef: readonly string[];
 	toolsRef: ToolSchemaSource;
+	toolSchemasInContext: boolean;
 	toolsRevision: number;
 	sourceRevision: number;
 	skillful: boolean;
@@ -328,6 +331,7 @@ function nonMessageTokenCacheEntry(
 	const cachedSession: CachedNonMessageTokenSource = session;
 	const systemPromptRef = session.systemPrompt ?? EMPTY_STRING_PARTS;
 	const toolsRef = session.agent?.state?.tools ?? EMPTY_TOOLS;
+	const toolSchemasInContext = session.model?.toolSchemasInContext !== false;
 	const toolsRevision = getToolSchemaMetadataRevision(toolsRef);
 	const skillsRef = session.renderedSkills ?? session.skills ?? EMPTY_SKILLS;
 	let entry = cachedSession[NON_MESSAGE_TOKEN_CACHE];
@@ -335,6 +339,7 @@ function nonMessageTokenCacheEntry(
 		entry &&
 		entry.systemPromptRef === systemPromptRef &&
 		entry.toolsRef === toolsRef &&
+		entry.toolSchemasInContext === toolSchemasInContext &&
 		entry.toolsRevision === toolsRevision &&
 		entry.sourceRevision === sourceRevision &&
 		entry.skillsRef === skillsRef &&
@@ -345,6 +350,7 @@ function nonMessageTokenCacheEntry(
 	entry = {
 		systemPromptRef,
 		toolsRef,
+		toolSchemasInContext,
 		toolsRevision,
 		sourceRevision,
 		skillful: true,
@@ -368,7 +374,7 @@ export function computeNonMessageTokens(
 	const tools = session.agent?.state?.tools ?? EMPTY_TOOLS;
 	const tokens =
 		tokenizer.countTokens(Array.from(systemPromptParts, part => part ?? "")) +
-		estimateToolSchemaTokens(tools, tokenizer, sourceRevision);
+		estimateContextToolSchemaTokens(tools, tokenizer, session.model, sourceRevision);
 	entry.tokens = tokens;
 	return tokens;
 }
@@ -400,7 +406,7 @@ export function computeNonMessageBreakdown(
 					renderedSkills(session.renderedSkills ?? session.skills ?? EMPTY_SKILLS, tools),
 					tokenizer,
 				);
-	const toolsTokens = estimateToolSchemaTokens(tools, tokenizer, sourceRevision);
+	const toolsTokens = estimateContextToolSchemaTokens(tools, tokenizer, session.model, sourceRevision);
 	const systemPromptParts = session.systemPrompt ?? EMPTY_STRING_PARTS;
 	const systemContextTokens = tokenizer.countTokens(Array.from(systemPromptParts.slice(1), part => part ?? ""));
 	const systemPromptTokens = Math.max(0, tokenizer.countTokens(systemPromptParts[0] ?? "") - skillsTokens);
@@ -742,86 +748,183 @@ function contextMeterParts(
 }
 
 /**
- * The `/context` body for terminals that draw `meter`: a blocks meter
- * beside a legend `kv` (swatch · label → tokens · %), then a full-width bar
- * of the same parts marked where auto-compaction fires, then the snapcompact
- * estimate when one is on. {@link contextUsageHead} names the model and window.
+ * One line of the native `/context` breakdown: a swatch in the part's bar
+ * color, its name, its tokens and its share of the window; the exact count
+ * is its tooltip.
+ */
+function contextShareRow(
+	key: string,
+	role: string,
+	swatch: TspSpan,
+	label: string,
+	tokens: number,
+	window: number,
+): NativeNode {
+	return node(
+		"row",
+		{ role, align: "center", title: `${label} · ${tokens.toLocaleString("en-US")} tokens` },
+		[
+			text([swatch], { role: "zeta.context.swatch", wrap: "none" }),
+			text(label, { role: "zeta.context.label", grow: 1, wrap: "none", truncate: "end" }),
+			text(formatNumber(tokens), { role: "zeta.context.tokens", wrap: "none" }),
+			text(percentString(tokens, window), { role: "zeta.context.share", wrap: "none" }),
+		],
+		key,
+	);
+}
+
+/**
+ * The snapcompact estimate as a titled group of lines (what is imaged, how,
+ * and what it saves), or a note saying why it is inactive; `undefined` when
+ * no snapcompact setting is on.
+ */
+function describeSnapcompact(breakdown: ContextBreakdown): NativeNode | undefined {
+	const snap = breakdown.snapcompact;
+	if (!snap) return undefined;
+	const head = text([span("Snapcompact", "strong"), span(" · estimated savings on the wire", "dim")], {
+		role: "zeta.context.snap.head",
+	});
+	if (!snap.visionCapable) {
+		const note = text("Inactive: the model has no image input.", { role: "zeta.context.snap.note" });
+		return node("col", { role: "zeta.context.snap" }, [head, note], "snapcompact");
+	}
+	const lines: { label: string; detail: string; value?: TspSpan }[] = [];
+	const sp = snap.systemPrompt;
+	if (sp) {
+		const label = `System prompt · ${sp.scope === "agents-md" ? "AGENTS.md" : "all"}`;
+		if (sp.applied) {
+			lines.push({
+				label,
+				detail: `${formatNumber(sp.textTokens)} text → ${sp.frames} frame${sp.frames === 1 ? "" : "s"} ≈ ${formatNumber(sp.imageTokens)}`,
+				value: span(`−${formatNumber(sp.savedTokens)}`, "success"),
+			});
+		} else {
+			const reason =
+				sp.reason === "budget"
+					? "image budget exhausted"
+					: sp.reason === "empty"
+						? "nothing to image"
+						: "frames would not save tokens";
+			lines.push({ label, detail: `Stays text: ${reason}` });
+		}
+	}
+	const tr = snap.toolResults;
+	if (tr) {
+		lines.push(
+			tr.swapped > 0
+				? {
+						label: "Tool results",
+						detail: `${tr.swapped} of ${tr.total} imaged · ${formatNumber(tr.textTokens)} text → ${tr.frames} frames ≈ ${formatNumber(tr.imageTokens)}`,
+						value: span(`−${formatNumber(tr.savedTokens)}`, "success"),
+					}
+				: { label: "Tool results", detail: `None imaged · ${tr.total} in history` },
+		);
+	}
+	if (snap.savedTokens > 0) {
+		lines.push({
+			label: "Next request",
+			detail: "tokens on the wire",
+			value: span(`~${formatNumber(Math.max(0, breakdown.usedTokens - snap.savedTokens))}`, "strong"),
+		});
+	}
+	const rows = lines.map((line, index) =>
+		node(
+			"row",
+			{ role: "zeta.context.snap.row", align: "baseline" },
+			[
+				text(line.label, { role: "zeta.context.label", wrap: "none" }),
+				text(line.detail, { role: "zeta.context.detail", grow: 1, wrap: "none", truncate: "end" }),
+				...(line.value ? [text([line.value], { role: "zeta.context.tokens", wrap: "none" })] : []),
+			],
+			`snap-${index}`,
+		),
+	);
+	return node("col", { role: "zeta.context.snap" }, [head, ...rows], "snapcompact");
+}
+
+/**
+ * The `/context` body for terminals that draw `meter`: the tokens used as
+ * the figure that leads, beside the room left before auto-compaction; one
+ * stacked bar of the parts (categories, free space as the empty track, the
+ * hatched buffer) ticked where compaction fires; the breakdown in the bar's
+ * order with free space and the buffer under it; then the snapcompact
+ * estimate when one is on. {@link contextUsageHead} names the model.
  */
 function describeContextFrame(breakdown: ContextBreakdown): NativeNode {
 	const { contextWindow: window, usedTokens, freeTokens, autoCompactBufferTokens, thresholdTokens } = breakdown;
 	const parts = contextMeterParts(breakdown);
 	const used = Math.min(1, usedTokens / window);
-	const swatch = (token: string, glyph = "■"): TspSpan => span(glyph, token);
-	const figure = (tokens: number): TspText => [
-		span(formatNumber(tokens)),
-		span(`  ${percentString(tokens, window)}`, "dim"),
-	];
-	const items: { k: TspText; v: TspText }[] = [
-		{
-			k: [span("Used", "strong")],
-			v: [
-				span(`${formatNumber(usedTokens)} / ${formatNumber(window).toLowerCase()}`),
-				span(`  ${percentString(usedTokens, window)}`, "dim"),
-			],
-		},
-	];
-	for (const category of breakdown.categories) {
-		items.push({ k: [swatch(category.color), span(` ${category.label}`)], v: figure(category.tokens) });
-	}
-	items.push({ k: [swatch("dim", "□"), span(" Free space")], v: figure(freeTokens) });
-	if (autoCompactBufferTokens > 0) {
-		items.push({ k: [swatch("warning", "▨"), span(" Autocompact buffer")], v: figure(autoCompactBufferTokens) });
-	}
+	const room =
+		thresholdTokens === undefined
+			? `${formatNumber(freeTokens)} free`
+			: usedTokens >= thresholdTokens
+				? `Past auto-compaction at ${percentString(thresholdTokens, window, 0)}`
+				: `${formatNumber(thresholdTokens - usedTokens)} left before auto-compaction at ${percentString(thresholdTokens, window, 0)}`;
+	const summary = node(
+		"row",
+		{ role: "zeta.context.summary", align: "baseline", wrap: true },
+		[
+			text(
+				[
+					span(formatNumber(usedTokens), "strong"),
+					span(` of ${formatNumber(window)} tokens · ${percentString(usedTokens, window, 0)}`, "dim"),
+				],
+				{ role: "zeta.context.used", grow: 1, wrap: "none" },
+			),
+			text(room, { role: "zeta.context.room", wrap: "none" }),
+		],
+		"summary",
+	);
 	const marks =
 		thresholdTokens !== undefined
 			? [
 					{
 						at: thresholdTokens / window,
 						tone: "warning" as const,
-						title: `Auto-compaction at ${percentString(thresholdTokens, window, 0)} (${formatNumber(thresholdTokens)} tokens)`,
+						title: `Auto-compaction at ${percentString(thresholdTokens, window, 0)} · ${formatNumber(thresholdTokens)} tokens`,
 					},
 				]
 			: undefined;
-	const children = [
-		node(
-			"row",
-			{ role: "zeta.context.body" },
-			[
-				node("meter", { value: used, style: "blocks", size: "lg", parts, aria: "Context usage by category" }),
-				node("kv", { items, layout: "grid", role: "zeta.context.legend" }),
-			],
-			"body",
-		),
-		node(
-			"meter",
-			{ value: used, style: "bar", size: "lg", parts, ...(marks ? { marks } : {}), grow: 1 },
-			undefined,
-			"bar",
+	const bar = node(
+		"meter",
+		{ value: used, style: "bar", size: "lg", parts, ...(marks ? { marks } : {}), aria: "Context usage by category" },
+		undefined,
+		"bar",
+	);
+	const shares = breakdown.categories.map(category =>
+		contextShareRow(
+			category.id,
+			"zeta.context.cat",
+			span("■", category.color),
+			category.label,
+			category.tokens,
+			window,
 		),
-	];
-	const snap = buildSnapcompactParts(breakdown);
-	if (snap.length > 0) {
-		children.push(
-			node(
-				"section",
-				{},
-				snap.map((line, index) => node("text", { spans: line, wrap: "word" }, undefined, `snap-${index}`)),
-				"snapcompact",
+	);
+	shares.push(contextShareRow("free", "zeta.context.cat.free", span("□", "dim"), "Free space", freeTokens, window));
+	if (autoCompactBufferTokens > 0) {
+		shares.push(
+			contextShareRow(
+				"buffer",
+				"zeta.context.cat.buffer",
+				span("▨", "warning"),
+				"Autocompact buffer",
+				autoCompactBufferTokens,
+				window,
 			),
 		);
 	}
-	return col(children, { gap: "md", role: "zeta.context" });
+	const children = [summary, bar, node("col", { role: "zeta.context.cats" }, shares, "cats")];
+	const snap = describeSnapcompact(breakdown);
+	if (snap) children.push(snap);
+	return col(children, { role: "zeta.context" });
 }
 
-/** The `/context` title: the model and its window once a model is selected. */
+/** The `/context` title: the model once one is selected (the body leads with its window). */
 export function contextUsageHead(breakdown: ContextBreakdown): TspText {
 	if (breakdown.contextWindow <= 0) return [span("Context usage", "strong")];
 	const modelName = breakdown.model?.name ?? breakdown.model?.id ?? "no model";
-	return [
-		span("Context", "strong"),
-		span(` · ${modelName}`, "muted"),
-		span(` · ${formatNumber(breakdown.contextWindow).toLowerCase()}`, "dim"),
-	];
+	return [span("Context", "strong"), span(` · ${modelName}`, "muted")];
 }
 
 /**