@oh-my-pi/pi-tui 18.6.0 → 18.6.3

package/src/overlays/btw-history-panel.ts

@@ -29,13 +29,13 @@ import type { SpaceHoldHandler } from "../space-hold";
 import { sanitizeErrorLine } from "../chrome/error-block";
 import { sanitizeDisplayLine, sanitizeDisplayText } from "./extensions/display-text";
 import { editorKey, editorKeys, keyHint, rawKeyHint } from "../chrome/keybinding-hints";
-import { formatKeyHint } from "../app-keybindings";
+import { formatKeyHint, type KeyId } from "../app-keybindings";
 import { bottomBorder, row, topBorder } from "../chrome/overlay-box";
 import { padToWidth } from "../render/utils";
 import { SplitPane } from "../components/layout/split-pane";
 import { clampSelection, contentRowWidth, padLinesToHeight, renderScrollableList } from "../chrome/selector-helpers";
-import type { TspSpan } from "@oh-my-pi/pi-wire";
-import type { NativeChild, NativeNode, NativeUiEvent } from "../native/node";
+import type { TspScrollBy, TspSpan } from "@oh-my-pi/pi-wire";
+import type { NativeChild, NativeNode, NativeScroll, NativeUiEvent } from "../native/node";
 import { col, md, node, span, text } from "../native/describe";
 import { actionHint, hintsRow, type NativeHint, statusHintsRow } from "../native/overlay";
 
@@ -46,10 +46,17 @@ interface BtwHistoryPanelOptions {
 	onCancel: (record: BtwHistoryRecord) => void;
 	canFollowUp?: (record: BtwHistoryRecord) => boolean;
 	onFollowUp?: (record: BtwHistoryRecord, question: string, signal: AbortSignal) => Promise<boolean>;
-	/** Space-bar push-to-talk for a follow-up composer: dictates into `input` while Space is held. */
+	/** Configured push-to-talk keys for a follow-up composer. */
+	spaceHoldKeys?: readonly KeyId[];
 	spaceHold?: (input: Input) => SpaceHoldHandler;
 	requestRender: () => void;
 	getHeight: () => number;
+	/**
+	 * Esc closes the panel even while the selected answer runs (it keeps
+	 * streaming in the background) and `x` cancels it, instead of Esc cancelling
+	 * first. For a host with no inline panel to fall back to (Tern).
+	 */
+	escapeHides?: boolean;
 }
 
 interface FollowUpComposer {
@@ -78,6 +85,7 @@ interface BtwHistoryNativeMemo {
 	followUpPending: boolean;
 	canFollowUp: boolean;
 	copied: boolean;
+	scroll: NativeScroll | undefined;
 	node: NativeNode;
 }
 
@@ -108,6 +116,8 @@ export class BtwHistoryPanel implements Component, Focusable {
 	#lastCopiedId: string | undefined;
 	#lastCopiedText: string | undefined;
 	#native: BtwHistoryNativeMemo | undefined;
+	/** The last answer-pane scroll key, forwarded natively (see {@link NativeNode.scroll}). */
+	#scroll: NativeScroll | undefined;
 	readonly #detail = new ScrollView([], {
 		height: 1,
 		scrollbar: "auto",
@@ -159,6 +169,7 @@ export class BtwHistoryPanel implements Component, Focusable {
 		this.#options = options;
 		this.#records = options.records;
 		this.#selectedId = options.records[0]?.id;
+		if (options.records.length === 1) this.#focus = "answer";
 	}
 
 	get focused(): boolean {
@@ -187,6 +198,8 @@ export class BtwHistoryPanel implements Component, Focusable {
 			this.#followLatest = false;
 			this.#detail.scrollToTop();
 		}
+		// One side question has nothing to pick: its answer keeps the arrow keys.
+		if (records.length === 1) this.#focus = "answer";
 		this.#options.requestRender();
 	}
 
@@ -247,9 +260,30 @@ export class BtwHistoryPanel implements Component, Focusable {
 		return true;
 	}
 
+	/** Select a record with its answer pane focused, read from the top (a just-asked /btw). */
+	showRecord(recordId: string): void {
+		const index = this.#records.findIndex(record => record.id === recordId);
+		if (index === -1) return;
+		this.#select(index);
+		this.#focus = "answer";
+		this.#options.requestRender();
+	}
+
+	/**
+	 * Jump the answer pane to its bottom once (opening or sending a follow-up):
+	 * text mode keeps following the newest row at render until a scroll key;
+	 * natively the sheet body scrolls to its end. Tern reports no wheel scroll,
+	 * so streamed updates never re-pin it there and a reader is never yanked.
+	 */
+	#jumpToEnd(): void {
+		this.#followLatest = true;
+		this.#scroll = { by: "end", n: (this.#scroll?.n ?? 0) + 1 };
+	}
+
 	#openComposer(record: BtwHistoryRecord): void {
 		const input = new Input();
 		input.prompt = theme.fg("accent", "Follow up: ");
+		if (this.#options.spaceHoldKeys !== undefined) input.spaceHold.keys = this.#options.spaceHoldKeys;
 		input.spaceHold.handler = this.#options.spaceHold?.(input);
 		const composer: FollowUpComposer = { recordId: record.id, input, abortController: new AbortController() };
 		input.onEscape = () => {
@@ -261,6 +295,8 @@ export class BtwHistoryPanel implements Component, Focusable {
 		};
 		this.#composer = composer;
 		this.#focus = "answer";
+		// Following up reads from the newest turn, right above the composer.
+		this.#jumpToEnd();
 		this.#options.requestRender();
 	}
 
@@ -286,7 +322,7 @@ export class BtwHistoryPanel implements Component, Focusable {
 				this.#composer = undefined;
 				this.#selectedId = composer.recordId;
 				this.#focus = "answer";
-				this.#followLatest = true;
+				this.#jumpToEnd();
 			} else {
 				composer.notice = `Follow-up was not started. Your draft is kept; ${editorKey("tui.input.submit")} to retry.`;
 			}
@@ -300,6 +336,11 @@ export class BtwHistoryPanel implements Component, Focusable {
 		}
 	}
 
+	/** Only an active follow-up composer can claim its configured push-to-talk keys. */
+	capturesInput(data: string): boolean {
+		return this.#composer?.input.capturesInput(data) ?? false;
+	}
+
 	/** Enhanced clipboard pastes belong only to the active composer. */
 	pasteText(text: string): void {
 		if (!this.#composer) return;
@@ -314,11 +355,17 @@ export class BtwHistoryPanel implements Component, Focusable {
 			return;
 		}
 		const record = this.#selected();
+		const running = record !== undefined && getBtwLatestTurn(record).status === "running" ? record : undefined;
+		const hides = this.#options.escapeHides === true;
 		if (matchesSelectCancel(data) || matchesKey(data, "escape")) {
-			if (record && getBtwLatestTurn(record).status === "running") this.#options.onCancel(record);
+			if (running && !hides) this.#options.onCancel(running);
 			else this.#options.onClose();
 			return;
 		}
+		if (hides && matchesKey(data, "x")) {
+			if (running) this.#options.onCancel(running);
+			return;
+		}
 		if (matchesKey(data, "f") || matchesKey(data, "enter")) {
 			if (record) this.openFollowUp(record.id);
 			return;
@@ -335,11 +382,12 @@ export class BtwHistoryPanel implements Component, Focusable {
 			matchesKey(data, "ctrl+_") ||
 			data === String.fromCharCode(31)
 		) {
-			this.#focus = this.#focus === "list" ? "answer" : "list";
+			// One side question has nothing to pick: its answer keeps the arrow keys.
+			if (this.#records.length > 1) this.#focus = this.#focus === "list" ? "answer" : "list";
 		} else if (matchesKey(data, "right")) {
 			this.#focus = "answer";
 		} else if (matchesKey(data, "left")) {
-			this.#focus = "list";
+			if (this.#records.length > 1) this.#focus = "list";
 		} else if (this.#focus === "list") {
 			const index = this.#selectedIndex();
 			if (matchesSelectUp(data)) this.#select(index - 1);
@@ -350,11 +398,25 @@ export class BtwHistoryPanel implements Component, Focusable {
 			else if (matchesKey(data, "end")) this.#select(this.#records.length - 1);
 			else return;
 		} else {
-			if (matchesSelectUp(data)) this.#detail.scroll(-1);
-			else if (matchesSelectDown(data)) this.#detail.scroll(1);
-			else if (matchesSelectPageUp(data)) this.#detail.page(-1);
-			else if (matchesSelectPageDown(data)) this.#detail.page(1);
+			const by: TspScrollBy | undefined = matchesSelectUp(data)
+				? "line-up"
+				: matchesSelectDown(data)
+					? "line-down"
+					: matchesSelectPageUp(data)
+						? "page-up"
+						: matchesSelectPageDown(data)
+							? "page-down"
+							: matchesKey(data, "home")
+								? "start"
+								: matchesKey(data, "end")
+									? "end"
+									: undefined;
+			if (by === "line-up") this.#detail.scroll(-1);
+			else if (by === "line-down") this.#detail.scroll(1);
+			else if (by === "page-up") this.#detail.page(-1);
+			else if (by === "page-down") this.#detail.page(1);
 			else if (!this.#detail.handleScrollKey(data)) return;
+			if (by) this.#scroll = { by, n: (this.#scroll?.n ?? 0) + 1 };
 			this.#followLatest = matchesKey(data, "end");
 		}
 		this.#options.requestRender();
@@ -378,31 +440,39 @@ export class BtwHistoryPanel implements Component, Focusable {
 			memo.notice === composer?.notice &&
 			memo.followUpPending === this.#followUpPending &&
 			memo.canFollowUp === canFollowUp &&
-			memo.copied === copied
+			memo.copied === copied &&
+			memo.scroll === this.#scroll
 		) {
 			return memo.node;
 		}
-		const children: NativeChild[] = [
-			node(
-				"row",
-				{ gap: "md", align: "start" },
-				[
+		// Plain columns, not `section`s: Tern draws a section as a foldable `##` heading,
+		// and a flex item's min-content width (a long code line in the answer) would
+		// crush the list pane. The answer pane may shrink to nothing; the list may not.
+		// With one side question the list and the pane labels are noise: the answer alone.
+		const showList = this.#records.length > 1;
+		const detail = this.#describeDetail(record, copied);
+		const answerPane: NativeNode = {
+			...node(
+				"col",
+				{ gap: "sm", grow: 1, basis: 0, min: { w: 0 } },
+				showList ? [text(this.#describeFocusLabel("answer"), { truncate: "end", lines: 1 }), detail] : [detail],
+				"details",
+			),
+			// Natively the sheet body is the scroller; arrow/page keys on the answer pane move it.
+			scroll: this.#scroll,
+		};
+		const panes: NativeChild[] = showList
+			? [
 					node(
-						"section",
-						{ head: this.#describeFocusLabel("list"), basis: 0.42, max: { w: "46ch" } },
-						[this.#describeList()],
+						"col",
+						{ gap: "sm", shrink: 0, basis: 0.3, max: { w: "40ch" } },
+						[text(this.#describeFocusLabel("list"), { truncate: "end", lines: 1 }), this.#describeList()],
 						"history",
 					),
-					node(
-						"section",
-						{ head: this.#describeFocusLabel("answer"), grow: 1 },
-						[this.#describeDetail(record, copied)],
-						"details",
-					),
-				],
-				"body",
-			),
-		];
+					answerPane,
+				]
+			: [answerPane];
+		const children: NativeChild[] = [node("row", { gap: "lg", align: "start" }, panes, "body")];
 		if (composer) {
 			composer.input.focused = this.#focused;
 			const lines: NativeChild[] = [
@@ -427,6 +497,7 @@ export class BtwHistoryPanel implements Component, Focusable {
 			followUpPending: this.#followUpPending,
 			canFollowUp,
 			copied,
+			scroll: this.#scroll,
 			node: described,
 		};
 		return described;
@@ -492,10 +563,21 @@ export class BtwHistoryPanel implements Component, Focusable {
 		const answer = turn.answer.trim()
 			? md(sanitizeDisplayText(turn.answer), { stream: turn.status === "running" })
 			: text([span(turn.status === "running" ? "Waiting for response…" : "No answer text.", "dim")]);
+		// Plain labels, not `section`s (Tern draws those as foldable `##` headings);
+		// the question stays markdown so its inline code and links render.
 		const children: NativeChild[] = [
-			text([span(`${status.label} · ${this.#dateFormat.format(turn.createdAt)}`, status.color)], { wrap: "word" }),
-			node("section", { head: [span("Question", "accent strong")] }, [md(sanitizeDisplayText(turn.question))]),
-			node("section", { head: [span("Answer", "accent strong")] }, [answer]),
+			text(
+				[
+					span("Question", "accent strong"),
+					span(" · ", "dim"),
+					span(status.label, status.color),
+					span(` · ${this.#dateFormat.format(turn.createdAt)}`, "dim"),
+				],
+				{ wrap: "word" },
+			),
+			md(sanitizeDisplayText(turn.question)),
+			text([span("Answer", "accent strong")]),
+			answer,
 		];
 		if (turn.error) children.push(text([span(sanitizeErrorLine(turn.error), "error")], { wrap: "word" }));
 		if (turn.status === "interrupted") children.push(text([span("Not resumed in this view.", "muted")]));
@@ -510,9 +592,11 @@ export class BtwHistoryPanel implements Component, Focusable {
 			]);
 		}
 		const latest = record ? getBtwLatestTurn(record) : undefined;
+		const running = latest?.status === "running";
 		const hints: (NativeHint | undefined)[] = [
-			actionHint("tui.select.cancel", latest?.status === "running" ? "cancel" : "close"),
-			{ keys: ["tab", "ctrl+/"], label: "switch pane" },
+			actionHint("tui.select.cancel", running && !this.#options.escapeHides ? "cancel" : "close"),
+			running && this.#options.escapeHides ? { keys: ["x"], label: "cancel" } : undefined,
+			this.#records.length > 1 ? { keys: ["tab", "ctrl+/"], label: "switch pane" } : undefined,
 			actionHint(["tui.select.up", "tui.select.down"], this.#focus === "list" ? "select" : "scroll"),
 		];
 		if (canFollowUp) hints.push({ keys: ["f", "enter"], label: "follow up" });
@@ -689,14 +773,16 @@ export class BtwHistoryPanel implements Component, Focusable {
 		const record = this.#selected();
 		const composer = this.#composer;
 		const latest = record ? getBtwLatestTurn(record) : undefined;
+		const running = latest?.status === "running";
 		const actions = composer
 			? [
 					keyHint("tui.input.submit", this.#followUpPending ? "starting…" : "send"),
 					keyHint("tui.select.cancel", "cancel"),
 				]
 			: [
-					keyHint("tui.select.cancel", latest?.status === "running" ? "cancel" : "close"),
-					rawKeyHint(["tab", "ctrl+/"], "switch pane"),
+					keyHint("tui.select.cancel", running && !this.#options.escapeHides ? "cancel" : "close"),
+					...(running && this.#options.escapeHides ? [rawKeyHint("x", "cancel")] : []),
+					...(this.#records.length > 1 ? [rawKeyHint(["tab", "ctrl+/"], "switch pane")] : []),
 				];
 		if (!composer) {
 			if (record && this.#canFollowUp(record)) actions.push(rawKeyHint(["f", "enter"], "follow up"));

package/src/overlays/copy-selector.ts

@@ -274,6 +274,7 @@ export interface CopySelectorDeps {
 	cwd: string;
 	hideThinkingBlock?: () => boolean;
 	proseOnlyThinking?: () => boolean;
+	expandThinkingBlocks?: () => boolean;
 	linkTargets?: ReadonlyMap<string, string>;
 	requestRender: () => void;
 	/** Replaces the "Copy" header when the picker is reused for another purpose. */
@@ -379,6 +380,7 @@ export class CopySelectorComponent implements Component {
 			cwd: this.deps.cwd,
 			hideThinkingBlock: this.deps.hideThinkingBlock,
 			proseOnlyThinking: this.deps.proseOnlyThinking,
+			expandThinkingBlocks: this.deps.expandThinkingBlocks,
 			linkTargets: this.deps.linkTargets,
 			requestRender: this.deps.requestRender,
 		});

package/src/overlays/extensions/extension-dashboard.ts

@@ -25,7 +25,7 @@ import { Memo } from "../../native/memo";
 import type { DescribeContext, NativeNode, NativeScroll, NativeUiEvent } from "../../native/node";
 import { actionBar, actionButton } from "../../native/overlay";
 import { CLOSE_ACTION, type PickerEvent, picker, pickerAction, pickerEvent } from "../../native/picker";
-import { matchesKey } from "../../keys";
+import { type KeyId, matchesKey } from "../../keys";
 import { parseSgrMouse } from "../../mouse";
 import { SplitPane, type SplitPaneHit } from "../../components/layout/split-pane";
 import { Stack } from "../../components/layout/stack";
@@ -41,7 +41,7 @@ import {
 	matchesSelectPageUp,
 } from "../../keybinding-matchers";
 import { expandKeyHint } from "../../render/render-utils";
-import { formatKeyHint, formatKeyHints } from "../../app-keybindings";
+import { formatKeyHint, formatKeyHints, formatTooltipKey } from "../../app-keybindings";
 import { boundKeys, editorKeys, interruptKey } from "../../chrome/keybinding-hints";
 import { bottomBorder, divider, PanelRows, row, topBorder } from "../../chrome/overlay-box";
 import { ExtensionList, type ExtensionListSwitch } from "./extension-list";
@@ -694,7 +694,7 @@ export class ExtensionDashboard implements Component {
 		];
 	}
 
-	#expandKey(): string {
+	#expandKey(): KeyId {
 		return boundKeys("app.tools.expand", ["ctrl+o"])[0] ?? "ctrl+o";
 	}
 
@@ -714,7 +714,7 @@ export class ExtensionDashboard implements Component {
 				node("icon", {
 					name: "x",
 					role: "omp.app.ibtn",
-					title: `Close  ${interruptKey()}`,
+					title: `Close  ${formatTooltipKey(boundKeys("app.interrupt", ["escape"])[0] ?? "escape")}`,
 					aria: "Close",
 					actions: { click: "close" },
 				}),

package/src/overlays/pause-screen.ts

@@ -17,7 +17,7 @@ import { formatCoarseDuration } from "../chrome/format";
 import { centerLine } from "../utils";
 import { theme } from "../theme/theme";
 import { matchesAppInterrupt } from "../keybinding-matchers";
-import { formatKeyHint } from "../app-keybindings";
+import { formatKeyHint, formatTooltipKey } from "../app-keybindings";
 import { boundKeys, interruptKey } from "../chrome/keybinding-hints";
 import type { NativeNode, NativeUiEvent } from "../native/node";
 import { col, node, row, span, text } from "../native/describe";
@@ -198,7 +198,7 @@ export class PauseScreenComponent implements Component, OverlayFocusOwner {
 				actionButton("Resume", "resume", {
 					keys: resumeKey,
 					tone: "accent",
-					title: `Resume  ${resumeKey} · enter · space`,
+					title: `Resume  ${formatTooltipKey(resumeKey)} · enter · space`,
 				}),
 			]),
 		);

package/src/overlays/rewind-selector.ts

@@ -83,6 +83,7 @@ export interface RewindSelectorDeps {
 	cwd: string;
 	hideThinkingBlock?: () => boolean;
 	proseOnlyThinking?: () => boolean;
+	expandThinkingBlocks?: () => boolean;
 	linkTargets?: ReadonlyMap<string, string>;
 	requestRender: () => void;
 	/** Sibling branch paths of `entryId`'s turn (excluding the turn itself). */
@@ -226,6 +227,7 @@ export class RewindSelectorComponent implements Component {
 			cwd: this.deps.cwd,
 			hideThinkingBlock: this.deps.hideThinkingBlock,
 			proseOnlyThinking: this.deps.proseOnlyThinking,
+			expandThinkingBlocks: this.deps.expandThinkingBlocks,
 			linkTargets: this.deps.linkTargets,
 			requestRender: this.deps.requestRender,
 		});

package/src/overlays/usage-dashboard.ts

@@ -43,7 +43,7 @@ import { editorKey, editorKeys } from "../chrome/keybinding-hints";
 import type { TspSpan, TspTableColumn, TspText, TspTone } from "@oh-my-pi/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 {
@@ -935,9 +935,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 +947,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;
@@ -1379,8 +1384,7 @@ export class UsageDashboardComponent implements Component {
 				this.#setView("overview");
 				return;
 			}
-			this.dispose();
-			this.#options.onClose();
+			this.#close();
 			return;
 		}
 		if (matchesKey(data, "r")) {
@@ -1403,4 +1407,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-row.ts

@@ -5,17 +5,19 @@ import { formatDuration, formatNumber } from "@oh-my-pi/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: "omp.usage.turn",
 			gap: "none",
 			align: "baseline",
-			...(stamped ? { title: formatUsageTimestamp(timestamp) } : {}),
+			...(stamped ? { title: formatUsageTimestamp(timestamp, hour12) } : {}),
 		});
 		return this.#nativeNode;
 	}