@oh-my-pi/pi-tui 18.14.0 → 18.14.2

package/src/native/overlay.ts

@@ -1,6 +1,6 @@
 /**
- * Overlay chrome for `describe()`: root cards, key-hint footers, selectable
- * lists and annotation callouts.
+ * Overlay chrome for `describe()`: root cards, key-hint footers, buttons and
+ * segmented controls, selectable lists and annotation callouts.
  *
  * The overlay frame itself (glass, ring, placement) is the terminal's: the
  * engine wraps every overlay-stack component in an `overlay` node. An overlay
@@ -9,8 +9,9 @@
 import type { TspProps, TspSpan, TspText } from "@oh-my-pi/pi-wire";
 import { formatTooltipKey, type KeyName } from "../key-hint-format";
 import { getKeybindings, type Keybinding } from "../keybindings";
-import { card, kbd, list, node, row, span, text } from "./describe";
+import { card, kbd, keyNames, list, node, row, span, text } from "./describe";
 import type { NativeChild, NativeNode } from "./node";
+import { nativeButtons } from "./state";
 
 /** Below this many columns a centered sheet fills the pane instead of floating with margins. */
 export const NARROW_SHEET_COLS = 100;
@@ -96,29 +97,68 @@ export interface ActionButtonOptions {
 	readonly title?: string;
 	/** Target of an `open` action (URL or `file://` path). */
 	readonly href?: string;
+	/** Why the action can't run now: the button dims and a click sends nothing. */
+	readonly disabled?: string;
+	/** The button's work is running: a spinner leads the label. */
+	readonly busy?: boolean;
+	/** Icon beside the label (before it on a `button` node, after it on a row). */
+	readonly icon?: string;
 }
 
 /**
  * A native button (role `omp.btn`): a label plus an optional keycap. A click
  * sends `act` back as an `action` event (or runs a terminal-local `open`/`copy`),
  * which the component routes to the same code path as the key.
+ *
+ * A terminal that draws the `button` kind ({@link nativeButtons}) gets one
+ * (tone `accent` → variant `primary`, `error` → `danger`, `disabled` with its
+ * reason as the tooltip); older ones get the row their stylesheets draw by
+ * role. Both keep the role and tone the omp sheets' context rules key on; a
+ * disabled button's tone is `muted`.
  */
 export function actionButton(label: string, act: string, options: ActionButtonOptions = {}): NativeNode {
-	const children: NativeChild[] = [text(label)];
-	if (options.keys) children.push(kbd(options.keys));
+	const { keys, href, disabled, busy, icon } = options;
+	const title = options.title ?? (keys ? `${label}  ${formatTooltipKey(keys)}` : label);
+	const tone = disabled === undefined ? options.tone : "muted";
+	const key = options.key ?? act;
+	if (nativeButtons()) {
+		return node(
+			"button",
+			{
+				role: "omp.btn",
+				text: label,
+				actions: { click: act },
+				title,
+				...(keys ? { keys: keyNames(keys) } : {}),
+				...(icon ? { icon } : {}),
+				...(tone === "accent" ? { variant: "primary" } : tone === "error" ? { variant: "danger" } : {}),
+				...(tone ? { tone } : {}),
+				...(disabled !== undefined ? { disabled: disabled || true } : {}),
+				...(busy ? { busy } : {}),
+				...(href ? { href } : {}),
+			},
+			undefined,
+			key,
+		);
+	}
+	const children: NativeChild[] = [];
+	if (busy) children.push(node("spinner", { style: "dots" }));
+	children.push(text(label));
+	if (icon) children.push(node("icon", { name: icon }, undefined, "icon"));
+	if (keys) children.push(kbd(keys));
 	return node(
 		"row",
 		{
 			role: "omp.btn",
 			gap: "xs",
 			align: "center",
-			actions: { click: act },
-			title: options.title ?? (options.keys ? `${label}  ${formatTooltipKey(options.keys)}` : label),
-			...(options.tone ? { tone: options.tone } : {}),
-			...(options.href ? { href: options.href } : {}),
+			...(disabled === undefined ? { actions: { click: act } } : {}),
+			title,
+			...(tone ? { tone } : {}),
+			...(href ? { href } : {}),
 		},
 		children,
-		options.key ?? act,
+		key,
 	);
 }
 
@@ -127,12 +167,80 @@ export function actionButton(label: string, act: string, options: ActionButtonOp
  * `act` (default `close`), which the component routes to its Esc path.
  */
 export function escCloseButton(act = "close", key = "esc-close"): NativeNode {
-	return node(
-		"row",
-		{ role: "omp.btn", align: "center", actions: { click: act }, title: `Close  ${formatTooltipKey("escape")}` },
-		[kbd("escape")],
-		key,
-	);
+	const title = `Close  ${formatTooltipKey("escape")}`;
+	if (nativeButtons()) {
+		return node(
+			"button",
+			{ role: "omp.btn", keys: ["escape"], actions: { click: act }, title, aria: "Close" },
+			undefined,
+			key,
+		);
+	}
+	return node("row", { role: "omp.btn", align: "center", actions: { click: act }, title }, [kbd("escape")], key);
+}
+
+/** Options of an {@link iconButton}. */
+export interface IconButtonOptions {
+	/** Sibling identity key; unkeyed buttons take their position. */
+	readonly key?: string;
+	/** Accessible name; defaults to the title. */
+	readonly aria?: string;
+	/** A toggle that is on (role `omp.app.ibtn.set`). */
+	readonly on?: boolean;
+}
+
+/**
+ * A quiet icon-only button (role `omp.app.ibtn`, the kit's icon button) for an
+ * app head or toolbar: a `button` node where the terminal draws one
+ * ({@link nativeButtons}), else an `icon` with a click action.
+ */
+export function iconButton(name: string, act: string, title: string, options: IconButtonOptions = {}): NativeNode {
+	const role = options.on ? "omp.app.ibtn.set" : "omp.app.ibtn";
+	const aria = options.aria ?? title;
+	if (nativeButtons()) {
+		return node(
+			"button",
+			{
+				role,
+				variant: "quiet",
+				icon: name,
+				title,
+				aria,
+				actions: { click: act },
+				...(options.on ? { on: true } : {}),
+			},
+			undefined,
+			options.key,
+		);
+	}
+	return node("icon", { name, role, title, aria, actions: { click: act } }, undefined, options.key);
+}
+
+/**
+ * A quiet text button (role `omp.app.qbtn`, the kit's quiet button) for a
+ * section head or toolbar, keyed by its action: a small quiet `button` where
+ * the terminal draws one ({@link nativeButtons}), else a row.
+ */
+export function quietButton(label: string, act: string, title: string): NativeNode {
+	if (nativeButtons()) {
+		return node(
+			"button",
+			{ role: "omp.app.qbtn", variant: "quiet", size: "sm", text: label, actions: { click: act }, title },
+			undefined,
+			act,
+		);
+	}
+	return node("row", { role: "omp.app.qbtn", actions: { click: act }, title }, [text(label)], act);
+}
+
+/**
+ * A segmented control: `tabs` drawn as a well with a raised thumb on the
+ * active tab. A terminal that draws the `button` kind ({@link nativeButtons})
+ * draws `variant: "segmented"` too; older ones restyle the tabs by role
+ * (`omp.app.seg`) or parent.
+ */
+export function segmentedTabs(p: TspProps<"tabs">, key: string): NativeNode {
+	return node("tabs", nativeButtons() ? { ...p, variant: "segmented" } : p, undefined, key);
 }
 
 /** A row of {@link actionButton}s (role `omp.actions`); `null` entries become the spacer that end-aligns what follows. */

package/src/native/state.ts

@@ -1,10 +1,11 @@
 /**
- * Process-wide flag: a Tern Surface Protocol backend is rendering.
+ * Process-wide native rendering state, set only by the native backend.
  *
- * Components that animate by re-rendering on a timer (spinners, shimmer,
- * thinking frames, countdowns) check it and skip scheduling, because the
- * terminal clocks motion from the described nodes. Set only by the native
- * backend when a surface opens and cleared when it closes.
+ * Whether a Tern Surface Protocol backend is rendering: components that
+ * animate by re-rendering on a timer (spinners, shimmer, thinking frames,
+ * countdowns) check it and skip scheduling, because the terminal clocks
+ * motion from the described nodes. Set when a surface opens and cleared when
+ * it closes.
  */
 let active = false;
 const listeners = new Set<(on: boolean) => void>();
@@ -21,6 +22,25 @@ export function setNativeRendering(on: boolean): void {
 	for (const listener of listeners) listener(on);
 }
 
+/**
+ * Whether the live terminal draws the `button` kind (its `hello` lists it),
+ * and with it `tabs` `variant: "segmented"`. The button builders
+ * (`native/overlay.ts`) read it; older Terns get the `row` buttons they style
+ * by role. Set only by the native backend from the `hello` it adopts; false
+ * while no surface is live.
+ */
+let buttons = false;
+
+/** Whether omp's buttons go out as `button` nodes (see {@link setNativeButtons}). */
+export function nativeButtons(): boolean {
+	return buttons;
+}
+
+/** Called by the native backend when it adopts a `hello` reply and when it stops. */
+export function setNativeButtons(on: boolean): void {
+	buttons = on;
+}
+
 /** Call `listener` whenever native rendering starts or stops; returns the unsubscribe. */
 export function onNativeRenderingChange(listener: (on: boolean) => void): () => void {
 	listeners.add(listener);

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

@@ -150,6 +150,7 @@ export class BtwHistoryPanel implements Component, Focusable {
 	#listScroll = 0;
 	#listHeight = 1;
 	#focused = false;
+	#useTerminalCursor = false;
 	#composer: FollowUpComposer | undefined;
 	readonly #pasteHandler = new BracketedPasteHandler();
 	#followUpPending = false;
@@ -225,6 +226,12 @@ export class BtwHistoryPanel implements Component, Focusable {
 		this.#focused = value;
 	}
 
+	/** Keep the follow-up input's cursor mode aligned so the hardware cursor (and IME preedit) lands on its caret. */
+	setUseTerminalCursor(useTerminalCursor: boolean): void {
+		this.#useTerminalCursor = useTerminalCursor;
+		this.#composer?.input.setUseTerminalCursor(useTerminalCursor);
+	}
+
 	update(records: readonly BtwHistoryRecord[]): void {
 		this.#records = records;
 		this.#detailDirty = true;
@@ -329,6 +336,7 @@ export class BtwHistoryPanel implements Component, Focusable {
 		const input = new Input();
 		input.prompt = theme.fg("accent", "Follow up: ");
 		input.placeholder = "Ask about this answer…";
+		input.setUseTerminalCursor(this.#useTerminalCursor);
 		if (this.#options.spaceHoldKeys !== undefined) input.spaceHold.keys = this.#options.spaceHoldKeys;
 		input.spaceHold.handler = this.#options.spaceHold?.(input);
 		const composer: FollowUpComposer = {

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

@@ -23,7 +23,7 @@ import type { Component } from "../../tui";
 import { col, keyed, node, span, text } from "../../native/describe";
 import { Memo } from "../../native/memo";
 import type { DescribeContext, NativeNode, NativeScroll, NativeUiEvent } from "../../native/node";
-import { actionBar, actionButton } from "../../native/overlay";
+import { actionBar, actionButton, iconButton } from "../../native/overlay";
 import { CLOSE_ACTION, type PickerEvent, picker, pickerAction, pickerEvent } from "../../native/picker";
 import { type KeyId, matchesKey } from "../../keys";
 import { parseSgrMouse } from "../../mouse";
@@ -711,13 +711,12 @@ export class ExtensionDashboard implements Component {
 					text(DASHBOARD_TITLE, { role: "omp.app.title" }),
 					text([span(query ? `${shown} of ${total}` : `${total} extensions`, "muted")], { truncate: "end" }),
 				]),
-				node("icon", {
-					name: "x",
-					role: "omp.app.ibtn",
-					title: `Close  ${formatTooltipKey(boundKeys("app.interrupt", ["escape"])[0] ?? "escape")}`,
-					aria: "Close",
-					actions: { click: "close" },
-				}),
+				iconButton(
+					"x",
+					"close",
+					`Close  ${formatTooltipKey(boundKeys("app.interrupt", ["escape"])[0] ?? "escape")}`,
+					{ aria: "Close" },
+				),
 			],
 			"head",
 		);

package/src/overlays/jobs-panel.ts

@@ -130,6 +130,12 @@ export class JobsSheet implements Component {
 	#native: { key: string; output: string | undefined; node: NativeNode } | undefined;
 	/** Fallback output tail, reused while the selected job's output is unchanged. */
 	#tail: { id: string; output: string; lines: readonly string[] } | undefined;
+	/**
+	 * The selected job as last seen: its row, detail and the subagents placing
+	 * it. The session evicts settled jobs on its own clock; while the user keeps
+	 * one selected it stays listed with its last output, until they select another.
+	 */
+	#held: { job: JobsPanelJob; detail: JobsPanelDetail | undefined; agents: readonly JobTreeAgent[] } | undefined;
 
 	constructor(source: JobsSheetSource) {
 		this.#source = source;
@@ -137,7 +143,7 @@ export class JobsSheet implements Component {
 
 	describe(_cx: DescribeContext): NativeNode {
 		const { rows, jobs, selected, cancellable } = this.#current();
-		const detail = selected && this.#source.inspect(selected.id);
+		const detail = selected && this.#inspect(selected.id);
 		const now = Date.now();
 		// Elapsed nodes tick on their own; list values and the output pane redraw
 		// when a job starts, settles, leaves or moves in the tree, its process
@@ -201,7 +207,7 @@ export class JobsSheet implements Component {
 				),
 			);
 		}
-		const detail = selected && this.#source.inspect(selected.id);
+		const detail = selected && this.#inspect(selected.id);
 		if (detail) {
 			// Rows show the cut label; the selected job's command wraps here,
 			// bounded so a long script never pushes the facts and output off the sheet.
@@ -262,15 +268,43 @@ export class JobsSheet implements Component {
 		selected: JobsPanelJob | undefined;
 		cancellable: boolean;
 	} {
-		const { running, recent, rootId, agents } = this.#source.load();
-		const rows = buildJobTree([...running, ...recent], agents ?? [], rootId);
+		const snapshot = this.#source.load();
+		const { running, rootId } = snapshot;
+		let { recent, agents = [] } = snapshot;
+		// A settled job the session evicted stays listed while it is selected.
+		const held = this.#held?.job.id === this.#selectedId ? this.#held : undefined;
+		const evicted =
+			held !== undefined &&
+			held.job.status !== "running" &&
+			!running.some(job => job.id === held.job.id) &&
+			!recent.some(job => job.id === held.job.id);
+		if (evicted) {
+			recent = [...recent, held.job];
+			const known = new Set(agents.map(agent => agent.id));
+			agents = [...agents, ...held.agents.filter(agent => !known.has(agent.id))];
+		}
+		const rows = buildJobTree([...running, ...recent], agents, rootId);
 		const jobs = rows.flatMap(entry => (entry.kind === "job" ? [entry.job] : []));
 		const selected = jobs.find(job => job.id === this.#selectedId) ?? jobs[0];
 		this.#selectedId = selected?.id;
+		if (!selected) this.#held = undefined;
+		else if (!evicted) {
+			const detail = held?.job.id === selected.id ? held.detail : undefined;
+			this.#held = { job: selected, detail, agents: snapshot.agents ?? [] };
+		}
 		const owned = selected?.ownerId === undefined || selected.ownerId === rootId;
 		return { rows, jobs, selected, cancellable: this.#source.cancel !== undefined && owned };
 	}
 
+	/** The job's detail from the source, else the last one seen while it was held. */
+	#inspect(id: string): JobsPanelDetail | undefined {
+		const detail = this.#source.inspect(id);
+		const held = this.#held?.job.id === id ? this.#held : undefined;
+		if (!held) return detail;
+		if (detail) held.detail = detail;
+		return held.detail;
+	}
+
 	#tailLines(id: string, output: string): readonly string[] {
 		const cached = this.#tail;
 		if (cached?.id === id && cached.output === output) return cached.lines;

package/src/overlays/login-dialog.ts

@@ -468,18 +468,7 @@ export class LoginDialogComponent extends OverlayPanel {
 			[
 				node("icon", { name: "link" }, undefined, "icon"),
 				keyed(shown, "url"),
-				node(
-					"row",
-					{
-						role: "omp.btn",
-						align: "center",
-						actions: { click: "copy" },
-						href: url,
-						title: "Copy the sign-in link",
-					},
-					[text("Copy")],
-					"copyLink",
-				),
+				actionButton("Copy", "copy", { key: "copyLink", href: url, title: "Copy the sign-in link" }),
 			],
 			"link",
 		);
@@ -487,20 +476,13 @@ export class LoginDialogComponent extends OverlayPanel {
 
 	/** Open sign-in page (Tern opens the link itself): the primary action while nothing waits for an answer. */
 	#describeOpen(url: string, primary: boolean): NativeNode {
-		return node(
-			"row",
-			{
-				role: "omp.btn",
-				gap: "xs",
-				align: "center",
-				actions: { click: "open" },
-				href: url,
-				title: `Open ${urlPlace(url)} in your browser`,
-				...(primary ? { tone: "accent" as const } : {}),
-			},
-			[text("Open sign-in page"), node("icon", { name: "open" }, undefined, "icon")],
-			"openLink",
-		);
+		return actionButton("Open sign-in page", "open", {
+			key: "openLink",
+			href: url,
+			title: `Open ${urlPlace(url)} in your browser`,
+			icon: "open",
+			tone: primary ? "accent" : undefined,
+		});
 	}
 
 	/** The stage running now: a spinner and what it waits for. */

package/src/overlays/tree-selector.ts

@@ -10,7 +10,7 @@ import {
 	TruncatedText,
 	truncateToWidth,
 } from "../index";
-import { isRecord, sanitizeText } from "@oh-my-pi/pi-utils";
+import { isRecord, oklabDistance, sanitizeText } from "@oh-my-pi/pi-utils";
 /** Available session-tree display filters. */
 export const TREE_FILTER_MODES = ["default", "no-tools", "user-only", "labeled-only", "all"] as const;
 /** Session-tree display filter. */
@@ -94,10 +94,15 @@ interface AdvisorTreeDisplay {
  */
 function sanitizeTreeField(value: string): string {
 	return sanitizeText(value)
-		.replace(/[\n\t]/g, " ")
+		.replace(/[\r\n\t\u2028\u2029]/g, " ")
 		.trim();
 }
 
+/** Strip ANSI/control characters and fold line breaks for single-line tree rows and headers. */
+function treeRowText(value: string): string {
+	return plainText(value.replace(/[\r\n\u2028\u2029]/g, " "));
+}
+
 /**
  * Extract display metadata from an advisor custom-message's `details.notes`,
  * ignoring the model-facing `<advisory>` wrapper stored in `content`. Collects
@@ -165,10 +170,38 @@ function stripSystemWrapperTags(content: string): string {
 /** Per-message cap on text folded into the tree search index. */
 const SEARCH_TEXT_LIMIT = 200;
 
-/** One theme-colored piece of an entry's display text. */
+/** One theme-colored piece of an entry's display text; `strong` draws it bold. */
 interface EntryPart {
 	t: string;
 	s?: ThemeColor;
+	strong?: boolean;
+}
+
+/** An entry part as a native span. */
+function partSpan(part: EntryPart): TspSpan {
+	const style = part.strong ? (part.s ? `${part.s} strong` : "strong") : part.s;
+	return span(treeRowText(part.t), style);
+}
+
+/** OKLab distance under which two role colors read as the same color. */
+const SAME_COLOR_DISTANCE = 0.05;
+
+let assistantLabel: { theme: typeof theme; color: ThemeColor } | undefined;
+
+/**
+ * The `assistant:` label color: `success`, unless it looks like the `user:` label's
+ * `accent` (`dark-terminal`, `*-poimandres`); then the path color, then `muted`.
+ */
+function assistantLabelColor(): ThemeColor {
+	if (assistantLabel?.theme !== theme) {
+		const accent = theme.getColorHex("accent");
+		const color =
+			(["success", "statusLinePath"] as const).find(
+				c => oklabDistance(theme.getColorHex(c), accent) >= SAME_COLOR_DISTANCE,
+			) ?? "muted";
+		assistantLabel = { theme, color };
+	}
+	return assistantLabel.color;
 }
 
 /** A cached native tree item and the inputs it was built from. */
@@ -234,6 +267,8 @@ class TreeList implements Component {
 		| undefined;
 	/** Bumped on every label edit: labels are item badges. */
 	#labelVersion = 0;
+	/** Theme the native item caches were built under: labels bake in the `assistant:` color. */
+	#nativeTheme = theme;
 	#pickerItems:
 		| { rows: readonly TreeRow<TreeSelectorNode, string>[]; labels: number; items: TspPickerItem[] }
 		| undefined;
@@ -703,6 +738,7 @@ class TreeList implements Component {
 	 * only `order` (the visible entries) and the selection.
 	 */
 	pickerView(): TreePickerView {
+		this.#syncNativeTheme();
 		const allRows = this.#tree.allRows;
 		if (this.#pickerItems?.rows !== allRows || this.#pickerItems.labels !== this.#labelVersion) {
 			// Real branch points get a disclosure; linear chains stay flat at their head's depth.
@@ -734,9 +770,7 @@ class TreeList implements Component {
 	#pickerItem(row: TreeRow<TreeSelectorNode, string>, open: boolean): TspPickerItem {
 		const item = row.item;
 		const entry = item.entry;
-		const label = this.#entryParts(item).map(part =>
-			span(part.t.includes("\x1b") ? plainText(part.t) : part.t, part.s),
-		);
+		const label = this.#entryParts(item).map(partSpan);
 		let kind: TspPickerItem["node"] = "marker";
 		let role: string | undefined;
 		if (isUserRequestEntry(entry)) {
@@ -755,7 +789,7 @@ class TreeList implements Component {
 			node: kind,
 			...(role ? { role } : {}),
 			...(open ? { open: true } : {}),
-			...(item.label ? { badges: [{ text: plainText(item.label), tone: "warning" as const }] } : {}),
+			...(item.label ? { badges: [{ text: treeRowText(item.label), tone: "warning" as const }] } : {}),
 			...(this.#activePathIds.has(row.key) ? { dot: "accent" as const } : {}),
 		};
 	}
@@ -772,7 +806,7 @@ class TreeList implements Component {
 		if (selected) {
 			const entry = selected.entry;
 			const parts = this.#entryParts(selected)
-				.map(part => (part.t.includes("\x1b") ? plainText(part.t) : part.t))
+				.map(part => treeRowText(part.t))
 				.join("");
 			if (entry.type === "message" || entry.type === "custom_message") {
 				const target: OutlineTarget = {
@@ -784,12 +818,14 @@ class TreeList implements Component {
 					entries: [entry],
 				};
 				const copy = targetCopy(target, collectBlocks(target.entries));
-				preview.push(text(`${copy.label[0]!.toUpperCase()}${copy.label.slice(1)}`, { role: "omp.picker.title" }));
-				if (selected.label) preview.push(text([span(plainText(selected.label), "warning")]));
+				preview.push(
+					text(treeRowText(`${copy.label[0]!.toUpperCase()}${copy.label.slice(1)}`), { role: "omp.picker.title" }),
+				);
+				if (selected.label) preview.push(text([span(treeRowText(selected.label), "warning")]));
 				preview.push(turnPreview(target, copy.content || parts));
 			} else {
 				preview.push(text(parts, { role: "omp.picker.title" }));
-				if (selected.label) preview.push(text([span(plainText(selected.label), "warning")]));
+				if (selected.label) preview.push(text([span(treeRowText(selected.label), "warning")]));
 			}
 		}
 		this.#previewMemo = { node: selected, labels: this.#labelVersion, preview };
@@ -803,6 +839,7 @@ class TreeList implements Component {
 	 * instead of drawn tree connectors.
 	 */
 	describeList(): NativeNode {
+		this.#syncNativeTheme();
 		const rows = this.#tree.rows;
 		let items = this.#itemsNative;
 		if (items?.rows !== rows) {
@@ -852,6 +889,15 @@ class TreeList implements Component {
 		];
 	}
 
+	/** Drop native items built under another theme. */
+	#syncNativeTheme(): void {
+		if (this.#nativeTheme === theme) return;
+		this.#nativeTheme = theme;
+		this.#pickerItems = undefined;
+		this.#itemsNative = undefined;
+		this.#itemCache.clear();
+	}
+
 	#describeRow(row: TreeRow<TreeSelectorNode, string>): NativeNode {
 		const item = row.item;
 		const branch = row.parentKey !== undefined && row.siblingCount > 1;
@@ -859,10 +905,8 @@ class TreeList implements Component {
 		if (cached !== undefined && cached.label === item.label && cached.branch === branch) return cached.node;
 		const label: TspSpan[] = [];
 		if (this.#activePathIds.has(row.key)) label.push(span(`${theme.md.bullet} `, "accent"));
-		if (item.label) label.push(span(`[${plainText(item.label)}] `, "warning"));
-		for (const part of this.#entryParts(item)) {
-			label.push(span(part.t.includes("\x1b") ? plainText(part.t) : part.t, part.s));
-		}
+		if (item.label) label.push(span(`[${treeRowText(item.label)}] `, "warning"));
+		for (const part of this.#entryParts(item)) label.push(partSpan(part));
 		const described = node("item", { label, icon: branch ? "branch" : undefined }, undefined, row.key);
 		this.#itemCache.set(row.key, { label: item.label, branch, node: described });
 		return described;
@@ -954,7 +998,7 @@ class TreeList implements Component {
 		// Active path marker - shown right before the entry text
 		const isOnActivePath = this.#activePathIds.has(node.entry.id);
 		const pathMarker = isOnActivePath ? theme.fg("accent", `${theme.md.bullet} `) : "";
-		const label = node.label ? theme.fg("warning", `[${node.label}] `) : "";
+		const label = node.label ? theme.fg("warning", `[${treeRowText(node.label)}] `) : "";
 		return `${pathMarker}${label}${this.#getEntryDisplayText(node, selected)}`;
 	}
 
@@ -1050,7 +1094,13 @@ class TreeList implements Component {
 
 	#getEntryDisplayText(node: TreeSelectorNode, isSelected: boolean): string {
 		let result = "";
-		for (const part of this.#entryParts(node)) result += part.s ? theme.fg(part.s, part.t) : part.t;
+		for (const part of this.#entryParts(node)) {
+			let value = treeRowText(part.t);
+			if (part.s) value = theme.fg(part.s, value);
+			// A selected row is bolded whole; nested bold would close it early.
+			if (part.strong && !isSelected) value = theme.bold(value);
+			result += value;
+		}
 		return isSelected ? theme.bold(result) : result;
 	}
 
@@ -1066,7 +1116,10 @@ class TreeList implements Component {
 				if (role === "user") {
 					const msgWithContent = msg as { content?: unknown };
 					const content = normalize(this.#extractContent(msgWithContent.content));
-					return [{ t: "user: ", s: "accent" }, { t: content }];
+					return [
+						{ t: "user: ", s: "accent", strong: true },
+						{ t: content, s: "accent", strong: true },
+					];
 				}
 				if (role === "developer") {
 					const msgWithContent = msg as { content?: unknown };
@@ -1078,15 +1131,10 @@ class TreeList implements Component {
 				}
 				if (role === "assistant") {
 					const presentation = resolveAssistantErrorPresentation(msg);
-					if (presentation.kind === "compact-recovered") {
-						return [
-							{ t: "assistant: ", s: "success" },
-							{ t: presentation.text, s: "dim" },
-						];
-					}
+					const head: EntryPart = { t: "assistant: ", s: assistantLabelColor() };
+					if (presentation.kind === "compact-recovered") return [head, { t: presentation.text, s: "dim" }];
 					const msgWithContent = msg as { content?: unknown; stopReason?: string; errorMessage?: string };
 					const textContent = normalize(this.#extractContent(msgWithContent.content));
-					const head: EntryPart = { t: "assistant: ", s: "success" };
 					if (textContent) return [head, { t: textContent }];
 					if (presentation.kind === "full") {
 						return [head, { t: normalize(presentation.text).slice(0, 80), s: "error" }];
@@ -1110,10 +1158,16 @@ class TreeList implements Component {
 				if (entry.customType === "advisor") {
 					const { qualifier, text } = advisorTreeDisplay(entry.details);
 					const label = qualifier ? `advisor (${qualifier}): ` : "advisor: ";
-					return [{ t: label, s: "customMessageLabel" }, { t: normalize(text) }];
+					return [
+						{ t: label, s: "customMessageLabel" },
+						{ t: normalize(text), s: "muted" },
+					];
 				}
 				const content = stripSystemWrapperTags(this.#joinTextContent(entry.content));
-				return [{ t: `[${entry.customType}]: `, s: "customMessageLabel" }, { t: normalize(content) }];
+				return [
+					{ t: `[${entry.customType}]: `, s: "customMessageLabel" },
+					{ t: normalize(content), s: "muted" },
+				];
 			}
 			case "compaction": {
 				const tokens = Math.round(entry.tokensBefore / 1000);

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 { actionBar, actionButton } from "../native/overlay";
+import { actionBar, actionButton, segmentedTabs } from "../native/overlay";
 
 /** Local calendar-day activity consumed by the usage heatmap. */
 export interface DailyActivityPoint {
@@ -1135,8 +1135,7 @@ export class UsageDashboardComponent implements Component {
 			);
 		}
 		const children: NativeChild[] = [
-			node(
-				"tabs",
+			segmentedTabs(
 				{
 					items: [
 						{ id: "overview", label: "Overview" },
@@ -1144,7 +1143,6 @@ export class UsageDashboardComponent implements Component {
 					],
 					active: this.#view,
 				},
-				undefined,
 				"tabs",
 			),
 			node("spacer", { grow: 1 }),