@oh-my-pi/pi-tui 18.4.4 → 18.4.6

package/src/overlays/session-selector.ts

@@ -1376,7 +1376,8 @@ export class SessionSelectorComponent<T extends SessionSelectorEntry = SessionSe
 	/** The native picker shows `#message`'s error until the next key or pointer event. */
 	#pickerErrorOpen = false;
 	readonly #standalone: boolean;
-	readonly #pickerTitle: string;
+	/** A caller's heading for the picker head; the default `/resume` picker has none (the search names it). */
+	readonly #pickerTitle: string | undefined;
 	/** The open delete confirmation's two answers, for the picker's confirm strip. */
 	#deleteChoice: DeleteChoice<T> | null = null;
 	/** The preview pane's content and the session it shows; follows the selection once it settles. */
@@ -1423,7 +1424,7 @@ export class SessionSelectorComponent<T extends SessionSelectorEntry = SessionSe
 		this.#getTerminalRows = options.getTerminalRows ?? (() => 24);
 		this.#fillHeight = options.fillHeight ?? false;
 		this.#title = options.title ?? "Resume Session";
-		this.#pickerTitle = options.title ?? "Resume session";
+		this.#pickerTitle = options.title;
 		this.#standalone = options.standalone ?? false;
 		this.#scopeLabel = options.scopeLabel;
 		this.title = this.#headerLabel();
@@ -1709,10 +1710,11 @@ export class SessionSelectorComponent<T extends SessionSelectorEntry = SessionSe
 	}
 
 	/**
-	 * `lg` cards sheet (`screen` for the standalone app): This folder / All
-	 * projects tabs, sessions grouped by day (ranked flat while searching),
-	 * the selected session's preview, the delete confirm strip, and the
-	 * actions of the keys Enter, Delete/Backspace, Tab and Esc.
+	 * `lg` cards sheet (`screen` for the standalone app): sessions grouped by
+	 * day (ranked flat while searching), the selected session's preview, the
+	 * delete confirm strip, and the actions of the keys Enter, Delete/Backspace,
+	 * Tab (the scope toggle, labelled with the scope it switches to) and Esc.
+	 * Untitled unless the caller named it; the placeholder says the scope.
 	 */
 	#describePicker(): NativeNode {
 		const list = this.#sessionList;
@@ -1742,11 +1744,17 @@ export class SessionSelectorComponent<T extends SessionSelectorEntry = SessionSe
 		actions.push(
 			pickerAction("close", "Close", boundKeys("app.interrupt", ["escape"])[0] ?? "escape", { end: true }),
 		);
-		const subtitle = this.#scopeLabel === false ? undefined : (this.#scopeLabel ?? path.basename(getProjectDir()));
+		const folder = this.#scopeLabel === false ? undefined : (this.#scopeLabel ?? path.basename(getProjectDir()));
+		const title = this.#pickerTitle;
+		const placeholder =
+			loading || this.#scope === "all"
+				? "Search all sessions…"
+				: folder && !title
+					? `Search sessions in ${folder}…`
+					: "Search sessions…";
 		const result = picker(
 			{
-				title: this.#pickerTitle,
-				...(subtitle ? { subtitle } : {}),
+				...(title ? { title, ...(folder ? { subtitle: folder } : {}) } : {}),
 				icon: "history",
 				noun: "sessions",
 				size: this.#standalone ? "screen" : "lg",
@@ -1754,16 +1762,7 @@ export class SessionSelectorComponent<T extends SessionSelectorEntry = SessionSe
 				preview: "side",
 				query: view.query,
 				cursor: view.cursor,
-				placeholder: "Search sessions…",
-				...(this.#hasScopeTabs()
-					? {
-							tabs: [
-								{ id: "folder", label: "This folder" },
-								{ id: "all", label: "All projects" },
-							],
-							tab: loading ? "all" : this.#scope,
-						}
-					: {}),
+				placeholder,
 				columns: [
 					{ id: "when", format: "time" },
 					{ id: "size", format: "dim" },
@@ -1846,7 +1845,7 @@ export class SessionSelectorComponent<T extends SessionSelectorEntry = SessionSe
 		} else if (choice) return;
 		else if (ev.act === "resume") list.resumeSelected();
 		else if (ev.act === "delete") list.requestDelete();
-		else if (ev.act === "scope" || (ev.act === "tab" && ev.value !== undefined && ev.value !== this.#scope)) {
+		else if (ev.act === "scope") {
 			list.onToggleScope?.();
 		} else if (ev.act === "clear") list.clearSearch();
 	}

package/src/prompt/custom-editor.ts

@@ -14,6 +14,7 @@ import { SpaceHoldGesture } from "../space-hold";
 import { type Component, TUI } from "../tui";
 import type { AppKeybinding } from "../app-keybindings";
 import { formatKeyHint } from "../key-hint-format";
+import { MAIN_AGENT_ID } from "../overlays/agent-hub-types";
 import { compact, keyed, node, row, span } from "../native/describe";
 import type { DescribeContext, NativeNode, NativeUiEvent } from "../native/node";
 import type { ComposerFacts, ComposerFactsSource } from "../status-line/types";
@@ -60,11 +61,19 @@ export interface ComposerNativeState {
 	readonly thinking?: string;
 	/** A turn is running: the send keycap becomes a Stop button. */
 	readonly running: boolean;
+	/** The viewed subagent's lineage, outermost first and the viewed agent last; undefined on the main session. */
+	readonly viewing?: readonly string[];
 }
 
+/** Action code prefix of the viewing header's links: `focus:<agent id>`, {@link MAIN_AGENT_ID} for the main session. */
+const FOCUS_ACTION = "focus:";
+
 const IDLE_COMPOSER: ComposerNativeState = { running: false };
 
-/** Filled steps (of four) of the effort chip's meter per thinking level; `auto` before it resolves has none known. */
+/**
+ * Filled steps (of four) of the effort chip's fallback meter, for terminals without the `effort`
+ * kind; `auto` before it resolves has none known.
+ */
 const EFFORT_STEPS: Partial<Record<string, number>> = {
 	off: 0,
 	minimal: 1,
@@ -932,7 +941,7 @@ export class CustomEditor extends Editor {
 				}
 			}
 			for (const typo of this.#spelling.typoRanges(value, { editorText: text, lines, line, startCol: 0 })) {
-				decor.push({ from: lineStart + typo.start, to: lineStart + typo.start + typo.length, s: "mark" });
+				decor.push({ from: lineStart + typo.start, to: lineStart + typo.start + typo.length, s: "typo" });
 			}
 			lineStart += value.length + 1;
 		}
@@ -986,7 +995,11 @@ export class CustomEditor extends Editor {
 		}, CustomEditor.SHIMMER_FRAME_MS);
 		this.#shimmerTimer.unref?.();
 	}
-	override nativePlaceholder: string | undefined = NATIVE_COMPOSER_PLACEHOLDER;
+	/** Viewing a subagent, the draft goes to it: the placeholder names it. */
+	override describePlaceholder = (): string => {
+		const agent = this.composerState().viewing?.at(-1);
+		return agent === undefined ? NATIVE_COMPOSER_PLACEHOLDER : `Message ${agent}`;
+	};
 	/** A shell-mode draft highlights as its language. */
 	override describeLanguage = (): string | undefined => this.composerState().shell?.kind;
 	/** Host-owned live state for the TSP composer (shell mode, effort chip, send/stop). */
@@ -1001,6 +1014,7 @@ export class CustomEditor extends Editor {
 				facts: ComposerFacts | undefined;
 				chips: Component | undefined;
 				input: NativeNode;
+				focus: NativeNode | undefined;
 				mode: NativeNode | undefined;
 				bar: NativeNode;
 				layout: NativeEditorLayout;
@@ -1009,13 +1023,15 @@ export class CustomEditor extends Editor {
 
 	/**
 	 * The TSP composer: role `omp.editor[.bash|.python]` (tone `pending` while
-	 * a turn runs) over the context hairline, the attachment chips, a `line`
-	 * row of the shell-mode chip and the input, and the `bar`: model chip,
-	 * effort chip, the other status facts, usage, then send (Stop while a turn
-	 * runs). Clicks come back as `status.model`, `thinking.cycle`, `submit`
-	 * and `interrupt` actions.
+	 * a turn runs) over the context hairline, the viewing header while a
+	 * subagent is focused, the attachment chips, a `line` row of the
+	 * shell-mode chip and the input, and the `bar`: model chip, effort chip,
+	 * the other status facts, usage, then send (Stop while a turn runs).
+	 * Clicks come back as `status.model`, `thinking.cycle`, `submit`,
+	 * `interrupt` and `focus:<id>` actions.
 	 */
-	override describeLayout = (input: NativeNode, _cx: DescribeContext): NativeEditorLayout => {
+	override describeLayout = (input: NativeNode, cx: DescribeContext): NativeEditorLayout => {
+		const effortGlyph = cx.supports("effort");
 		const state = this.composerState();
 		const shell = state.shell;
 		const facts = this.composerFacts?.describeComposerFacts();
@@ -1030,36 +1046,98 @@ export class CustomEditor extends Editor {
 			thinkingKey,
 			modelKey,
 			interruptKey,
+			state.viewing?.join("\u0001"),
+			effortGlyph,
 		].join("\0");
 		const chips = this.attachmentChips;
 		const memo = this.#nativeComposer;
 		if (memo && memo.key === key && memo.facts === facts && memo.input === input && memo.chips === chips) {
 			return memo.layout;
 		}
-		const { mode, bar } =
+		const { focus, mode, bar } =
 			memo?.key === key && memo.facts === facts
 				? memo
-				: this.#describeComposerControls(state, facts, thinkingKey, modelKey, interruptKey);
+				: this.#describeComposerControls(state, facts, thinkingKey, modelKey, interruptKey, effortGlyph);
 		const line = keyed(row(compact([mode, input]), { role: "omp.composer.line", align: "start", gap: "sm" }), "line");
 		const layout: NativeEditorLayout = {
 			role: shell ? `omp.editor.${shell.kind}` : "omp.editor",
 			tone: state.running ? "pending" : undefined,
-			children: compact([facts?.context, chips, line, bar]),
+			children: compact([facts?.context, focus, chips, line, bar]),
 			caret: "line/input",
 		};
-		this.#nativeComposer = { key, facts, chips, input, mode, bar, layout };
+		this.#nativeComposer = { key, facts, chips, input, focus, mode, bar, layout };
 		return layout;
 	};
 
-	/** The shell-mode chip before the input, and the bar under it. */
+	/**
+	 * The viewing header (`omp.composer.focus`) while a subagent is focused:
+	 * an eye, the agent's ancestors as `omp.composer.crumb` links, the agent
+	 * itself (`omp.composer.agent`), then the way back to the main session
+	 * (`omp.composer.exit`, the interrupt key's keycap: Esc on an empty draft).
+	 */
+	#describeViewing(viewing: readonly string[], interruptKey: KeyId): NativeNode | undefined {
+		const agent = viewing.at(-1);
+		if (agent === undefined) return undefined;
+		const back = interruptKey === "escape" ? "esc" : formatKeyHint(interruptKey);
+		const crumbs = viewing.slice(0, -1).map(id =>
+			node(
+				"text",
+				{
+					role: "omp.composer.crumb",
+					text: id,
+					wrap: "none",
+					title: `View ${id}`,
+					actions: { click: `${FOCUS_ACTION}${id}` },
+				},
+				undefined,
+				`crumb:${id}`,
+			),
+		);
+		return keyed(
+			row(
+				[
+					node("icon", { name: "eye" }, undefined, "icon"),
+					node("text", { text: "Viewing", wrap: "none" }, undefined, "label"),
+					...crumbs,
+					node("text", { role: "omp.composer.agent", text: agent, wrap: "none" }, undefined, "agent"),
+					node(
+						"row",
+						{
+							role: "omp.composer.exit",
+							gap: "xs",
+							align: "center",
+							title: `Back to the main session  ${back}`,
+							actions: { click: `${FOCUS_ACTION}${MAIN_AGENT_ID}` },
+						},
+						[
+							node("kbd", { keys: [interruptKey] }, undefined, "key"),
+							node("text", { text: "main", wrap: "none" }, undefined, "label"),
+						],
+						"exit",
+					),
+				],
+				{
+					role: "omp.composer.focus",
+					gap: "xs",
+					align: "center",
+					title: `Viewing subagent ${agent}: what you send goes to it`,
+				},
+			),
+			"focus",
+		);
+	}
+
+	/** The viewing header over the text, the shell-mode chip before the input, and the bar under it. */
 	#describeComposerControls(
 		state: ComposerNativeState,
 		facts: ComposerFacts | undefined,
 		thinkingKey: KeyId | undefined,
 		modelKey: KeyId | undefined,
 		interruptKey: KeyId,
-	): { mode: NativeNode | undefined; bar: NativeNode } {
+		effortGlyph: boolean,
+	): { focus: NativeNode | undefined; mode: NativeNode | undefined; bar: NativeNode } {
 		const shell = state.shell;
+		const focus = state.viewing && this.#describeViewing(state.viewing, interruptKey);
 		const model =
 			facts &&
 			node(
@@ -1079,9 +1157,10 @@ export class CustomEditor extends Editor {
 				],
 				"model",
 			);
-		const effortSteps = state.thinking === undefined ? undefined : EFFORT_STEPS[state.thinking];
+		const thinking = state.thinking;
+		const effortSteps = thinking === undefined ? undefined : EFFORT_STEPS[thinking];
 		const effort =
-			state.thinking !== undefined &&
+			thinking !== undefined &&
 			node(
 				"row",
 				{
@@ -1092,13 +1171,15 @@ export class CustomEditor extends Editor {
 					actions: { click: "thinking.cycle" },
 				},
 				[
-					node(
-						"meter",
-						{ value: effortSteps === undefined ? null : effortSteps / 4, style: "blocks", steps: 4 },
-						undefined,
-						"meter",
-					),
-					node("text", { text: state.thinking, wrap: "none" }, undefined, "level"),
+					effortGlyph
+						? node("effort", { level: thinking }, undefined, "glyph")
+						: node(
+								"meter",
+								{ value: effortSteps === undefined ? null : effortSteps / 4, style: "blocks", steps: 4 },
+								undefined,
+								"meter",
+							),
+					node("text", { text: thinking, wrap: "none" }, undefined, "level"),
 				],
 				"effort",
 			);
@@ -1135,7 +1216,7 @@ export class CustomEditor extends Editor {
 			}),
 			"bar",
 		);
-		if (!shell) return { mode: undefined, bar };
+		if (!shell) return { focus, mode: undefined, bar };
 		const runs = shell.kind === "bash" ? "Runs in your shell" : "Runs in Python";
 		const mode = keyed(
 			row(
@@ -1158,15 +1239,20 @@ export class CustomEditor extends Editor {
 			),
 			"mode",
 		);
-		return { mode, bar };
+		return { focus, mode, bar };
 	}
 
 	/**
 	 * Clicks on the composer's controls take the same paths as their keys: ⇧⇥,
-	 * ⏎ and Esc; the status facts' clicks (`status.*`) go to their source.
+	 * ⏎ and Esc; the viewing header's links (`focus:<id>`) go to the host,
+	 * the status facts' clicks (`status.*`) to their source. Selection edits
+	 * go to the buffer.
 	 */
-	handleNativeEvent(event: NativeUiEvent): void {
-		if (event.type !== "action") return;
+	override handleNativeEvent(event: NativeUiEvent): void {
+		if (event.type !== "action") {
+			super.handleNativeEvent(event);
+			return;
+		}
 		switch (event.act) {
 			case "thinking.cycle":
 				this.onCycleThinkingLevel?.();
@@ -1178,7 +1264,8 @@ export class CustomEditor extends Editor {
 				this.onEscape?.();
 				return;
 			default:
-				this.composerFacts?.handleNativeEvent(event);
+				if (event.act.startsWith(FOCUS_ACTION)) this.onFocusAgent?.(event.act.slice(FOCUS_ACTION.length));
+				else this.composerFacts?.handleNativeEvent(event);
 		}
 	}
 
@@ -1208,6 +1295,8 @@ export class CustomEditor extends Editor {
 	onCapsLock?: () => void;
 	/** Called when left-arrow is pressed while the editor is empty (cursor necessarily at start). */
 	onLeftAtStart?: () => void;
+	/** Called when the viewing header asks to view agent `id` ({@link MAIN_AGENT_ID}: the main session). */
+	onFocusAgent?: (id: string) => void;
 
 	/** Space-bar push-to-talk; set its `handler` to enable it. It is a text-composition gesture, so it
 	 *  stays out of Vim's Normal/Visual modes (where the space bar is the `l` motion) and away from an

package/src/prompt/welcome.ts

@@ -3,7 +3,6 @@ import type { TspSpan } from "@oh-my-pi/pi-wire";
 import { formatDoubleTap, formatKeyHint, formatKeyHints, type KeyName } from "../app-keybindings";
 import { editorKey } from "../chrome/keybinding-hints";
 import { getKeybindings, type Keybinding } from "../keybindings";
-import { registerNativeBlob } from "../native/blobs";
 import { card, col, kbd, keyed, node, row, span, text } from "../native/describe";
 import type { DescribeContext, NativeChild, NativeNode, NativeUiEvent } from "../native/node";
 import { runTranscriptAction } from "../chat/transcript-actions";
@@ -221,9 +220,9 @@ export class WelcomeComponent implements Component {
 
 	/**
 	 * A `card` (`omp.welcome`) titled with the app version. The brand column
-	 * (`omp.welcome.brand`: greeting, the animated SVG mark, model, provider) sits
-	 * beside the info column (`omp.welcome.info`: prompt-sigil keycaps, LSP
-	 * servers, recent sessions); the tip of the session closes the card. Roles
+	 * (`omp.welcome.brand`: greeting and the terminal's builtin `omp` mark, which
+	 * it animates) sits beside the info column (`omp.welcome.info`: prompt-sigil
+	 * keycaps, LSP servers, recent sessions); the tip of the session closes the card. Roles
 	 * carry the look (gradient logo, type scale, column hairline); a "[NEW]" tip
 	 * carries a terminal-clocked shimmering tag.
 	 */
@@ -242,7 +241,7 @@ export class WelcomeComponent implements Component {
 					node(
 						"image",
 						{
-							blob: welcomeLogoBlob(),
+							builtin: "omp",
 							alt: APP_NAME,
 							w: 128,
 							role: "omp.welcome.logo",
@@ -250,8 +249,6 @@ export class WelcomeComponent implements Component {
 						undefined,
 						"logo",
 					),
-					art([span(plainLine(this.modelName), "accent")], "omp.welcome.model"),
-					art([span(plainLine(this.providerName), "muted")], "omp.welcome.provider"),
 				],
 				{ align: "center", role: "omp.welcome.brand" },
 			),
@@ -682,32 +679,6 @@ export class WelcomeComponent implements Component {
 	}
 }
 
-/**
- * {@link PI_LOGO} as SVG for the native welcome, on the terminal's grid: a
- * cell is 3×6 units, so the 12×5-cell art spans 36×30 from (14,16). The left
- * leg's `▒▒` tail is a half-opacity cell; the gradient spans the whole art in
- * user space (per-axis normalized, like {@link gradientLogo}) so the tail
- * keeps its colour. Tern mounts SVG blobs as live DOM, so the classes are
- * animation hooks: `trace` (the outline, `pathLength=1` for a draw-on), `mark`
- * (the fills) and the gradient stops `s0`–`s2`.
- */
-const WELCOME_LOGO_SVG = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="10 12 44 38">
-<defs><linearGradient id="g" gradientUnits="userSpaceOnUse" gradientTransform="matrix(36 0 0 30 14 16)" x1="0" y1="0" x2="1" y2="1">
-<stop class="s0" offset="0" stop-color="#ed4abf"/><stop class="s1" offset=".5" stop-color="#9b4dff"/><stop class="s2" offset="1" stop-color="#5ad8e6"/>
-</linearGradient></defs>
-<path class="mark" fill="url(#g)" d="M14 16h36v6h-9v24h-6V22h-6v12h-6V22h-9z"/>
-<rect class="mark" fill="url(#g)" opacity=".5" x="23" y="34" width="6" height="6"/>
-<path class="trace" fill="none" stroke="url(#g)" stroke-width="1" stroke-linejoin="round" pathLength="1" d="M14 16h36v6h-9v24h-6V22h-6v18h-6V22h-9z"/>
-</svg>`;
-
-let welcomeLogoId: string | undefined;
-
-/** The registered blob id of {@link WELCOME_LOGO_SVG}. */
-function welcomeLogoBlob(): string {
-	welcomeLogoId ??= registerNativeBlob(new TextEncoder().encode(WELCOME_LOGO_SVG), "image/svg+xml");
-	return welcomeLogoId;
-}
-
 /** Block-grid brand mark shared by the welcome and setup surfaces. */
 export const PI_LOGO = ["████████████", "   ██  ██   ", "   ██  ██   ", "   ▒▒  ██   ", "       ██   "];
 

package/src/render/render-utils.ts

@@ -909,10 +909,16 @@ function homePatternFor(homeDir: string, windowsStyle: boolean): HomePattern {
 				})
 				.join("[\\\\/]");
 		}
+		// `*` and `_` are also identifier and glob characters (`/home/me_old`, `src/**/home/me/**`), so they
+		// bound the home directory only as Markdown emphasis: opened at start or after whitespace, and
+		// closed before end, whitespace, or punctuation.
+		const end = `[\\\\/\\s"'\\x60)\\]},;:<>&|]`;
 		pattern = {
 			leading: new RegExp(`^${escapedHome}(?=$|[\\\\/])`, windowsStyle ? "i" : ""),
 			embedded: new RegExp(
-				`[a-zA-Z][a-zA-Z0-9+.-]*://[^\\s"'<>]+|(^|[\\s"'\\x60([{=,:])(${escapedHome})(?=$|[\\\\/\\s"'\\x60)\\]},;:])`,
+				`[a-zA-Z][a-zA-Z0-9+.-]*://[^\\s"'<>]+` +
+					`|(^|[\\s"'\\x60([{=,:<>&|])(${escapedHome})(?=$|${end})` +
+					`|((?:^|\\s)[*_]{1,3})(${escapedHome})(?=$|${end}|[*_]{1,3}(?=$|[\\s.,;:!?)\\]}"'\\x60]))`,
 				windowsStyle ? "gi" : "g",
 			),
 		};
@@ -946,8 +952,13 @@ export function shortenEmbeddedPaths(text: string, homeDir?: string, preserveSep
 	const homePattern = homePatternFor(resolvedHome, windowsStyle);
 	const textWithShortenedHome = text.replace(
 		homePattern.embedded,
-		(match, boundary: string | undefined, candidate: string | undefined) =>
-			candidate === undefined ? match : `${boundary}~`,
+		(
+			match,
+			boundary: string | undefined,
+			candidate: string | undefined,
+			emphasis: string | undefined,
+			emphasized: string | undefined,
+		) => (candidate !== undefined ? `${boundary}~` : emphasized !== undefined ? `${emphasis}~` : match),
 	);
 	if (preserveSeparators) return textWithShortenedHome;
 	return textWithShortenedHome
@@ -966,6 +977,43 @@ export function shortenEmbeddedPaths(text: string, homeDir?: string, preserveSep
 		.join(" ");
 }
 
+/**
+ * Shorten filesystem and command arguments without rewriting literal search patterns. A producer that
+ * names no argument key gets the general embedded-path shortening.
+ */
+export function shortenToolArgumentPaths(text: string, key: string | undefined, homeDir?: string): string {
+	if (key === "url") {
+		try {
+			const url = new URL(text);
+			if (url.protocol === "file:") {
+				let decodedPath = url.pathname;
+				try {
+					decodedPath = decodeURIComponent(decodedPath);
+				} catch {
+					/* Retain malformed percent escapes as literal path bytes. */
+				}
+				const filePath = url.hostname
+					? `//${url.hostname}${decodedPath}`
+					: /^[A-Za-z]:$/.test(decodedPath.slice(1, 3))
+						? decodedPath.slice(1)
+						: decodedPath;
+				return shortenEmbeddedPaths(filePath, homeDir);
+			}
+		} catch {
+			// Preserve malformed and non-file URL arguments verbatim.
+		}
+		return text;
+	}
+	return key === undefined ||
+		key === "path" ||
+		key === "file_path" ||
+		key === "command" ||
+		key === "task" ||
+		key === "prompt"
+		? shortenEmbeddedPaths(text, homeDir)
+		: text;
+}
+
 /** Sanitize warning text before showing it in TUI, including embedded home paths. */
 export function sanitizeDisplayWarning(text: string): string {
 	return shortenEmbeddedPaths(

package/src/status-line/component.ts

@@ -39,10 +39,10 @@ import { canReuseCachedPr, createPrCacheContext, isSamePrCacheContext, type PrCa
 import { summarizeUsageResetCredits } from "../overlays/usage-display";
 import { getPreset } from "./presets";
 import { describeSegment, renderSegment, type SegmentContext } from "./segments";
-import type { TspProps } from "@oh-my-pi/pi-wire";
+import type { TspMeterMark, TspProps } from "@oh-my-pi/pi-wire";
 import type { NativeNode, NativeUiEvent } from "../native/node";
 import { col, node, span } from "../native/describe";
-import { getContextMeterThresholds, getContextUsageLevel, getContextUsageTone } from "../chrome/context-thresholds";
+import { getContextMeterThresholds } from "../chrome/context-thresholds";
 import { isNativeRendering } from "../native/state";
 import { getSeparator } from "./separators";
 import type {
@@ -81,10 +81,12 @@ const PINNED_NATIVE_PRIORITY = 1000;
 /**
  * Segments a TSP terminal shows outside the composer's facts: the model chip,
  * the context hairline and usage text (context, cost), Tern's pane header
- * (path, git), the tab title (session name, PR), the HUD pills (subagents)
- * and the editor (vim). The brand (`pi`) stays only while focus-proxied.
+ * (path, git), the tab title (session name, PR), the HUD pills (subagents),
+ * the editor (vim) and the brand (`pi`; while focus-proxied, the viewed agent
+ * is the composer's viewing header).
  */
 const COMPOSER_HOMED_SEGMENTS: Partial<Record<StatusLineSegmentId, true>> = {
+	pi: true,
 	model: true,
 	context_pct: true,
 	context_total: true,
@@ -642,6 +644,7 @@ export class StatusLineComponent<TSession extends StatusLineSession = StatusLine
 	#sortedHookStatuses: readonly string[] = [];
 	#subagentCount: number = 0;
 	#runningSubagentIds = new Set<string>();
+	#subagentTreeCost = 0;
 	/**
 	 * Active-processing accounting for the `time_spent` segment, keyed per
 	 * {@link StatusLineSession} so the focus-controller mid-turn attach path
@@ -888,6 +891,14 @@ export class StatusLineComponent<TSession extends StatusLineSession = StatusLine
 		this.#invalidateStatusLineRenderCache();
 	}
 
+	/** Host-computed spend of the main session's whole subagent tree (Agent Hub projection). */
+	setSubagentTreeCost(cost: number): void {
+		const next = Number.isFinite(cost) && cost > 0 ? cost : 0;
+		if (next === this.#subagentTreeCost) return;
+		this.#subagentTreeCost = next;
+		this.#invalidateStatusLineRenderCache();
+	}
+
 	/**
 	 * Compatibility shim for callers predating the simplified subagent badge.
 	 * The status line now intentionally shows only the active count.
@@ -2391,6 +2402,9 @@ export class StatusLineComponent<TSession extends StatusLineSession = StatusLine
 			compactionSpeculation,
 			speculationBlinkOn: this.#speculationBlinkOn,
 			subagentCount: this.#subagentCount,
+			// The tree total describes the main session; a focused subagent's
+			// view falls back to its own completed task results.
+			subagentTreeCost: this.#focusedAgentId ? 0 : this.#subagentTreeCost,
 			activeMs: this.getActiveMs(),
 			turnElapsedMs,
 			now: new Date(nowMs),
@@ -3367,7 +3381,7 @@ export class StatusLineComponent<TSession extends StatusLineSession = StatusLine
 		const facts: NativeNode[] = [];
 		const collect = (side: "left" | "right", ids: readonly StatusLineSegmentId[]): void => {
 			ids.forEach((id, index) => {
-				if (COMPOSER_HOMED_SEGMENTS[id] || (id === "pi" && ctx.focusedAgentId === undefined)) return;
+				if (COMPOSER_HOMED_SEGMENTS[id]) return;
 				const view = describeSegment(id, ctx);
 				if (!view) return;
 				const props: TspProps<"seg"> = {
@@ -3397,48 +3411,65 @@ export class StatusLineComponent<TSession extends StatusLineSession = StatusLine
 			window > 0 ? `${formatNumber(ctx.contextTokens)} of ${formatNumber(window)} tokens` : "No context window",
 		];
 		if (boundaries) lines.push(`Auto-compact at ${Math.round(boundaries.thresholdPercent)}%`);
-		if (ctx.compactionSpeculation === "running") lines.push("Compaction summary in progress");
-		else if (ctx.compactionSpeculation === "armed") lines.push("Compaction summary ready");
+		const speculation = ctx.compactionSpeculation;
+		if (speculation === "running") lines.push("Compaction summary in progress");
+		else if (speculation === "armed") lines.push("Compaction summary ready");
+		// The line spans the whole window: omp's boundary symbols sit where speculation
+		// starts and compaction fires, and the share past the speculation point is accent.
+		const used = pct === null ? null : Math.min(1, pct / 100);
+		const speculationAt =
+			boundaries?.speculationPercent == null ? null : Math.min(1, boundaries.speculationPercent / 100);
+		const marks: TspMeterMark[] = [];
+		if (boundaries) {
+			if (speculationAt !== null) {
+				const start: TspMeterMark = {
+					at: speculationAt,
+					icon: "context.speculation",
+					title: `Compaction summary starts at ${Math.round(speculationAt * 100)}%`,
+				};
+				// Lit while a background summary runs or waits armed.
+				if (speculation !== "idle") start.tone = "accent";
+				marks.push(start);
+			}
+			marks.push({
+				at: Math.min(1, boundaries.thresholdPercent / 100),
+				icon: "context.compaction",
+				title: `Auto-compact at ${Math.round(boundaries.thresholdPercent)}%`,
+			});
+		}
 		const context = node(
 			"meter",
 			{
 				role: "omp.composer.context",
-				value: pct === null ? null : Math.min(1, pct / 100),
+				value: used,
 				style: "bar",
 				thresholds: getContextMeterThresholds(window),
-				marks: boundaries
-					? [
-							{
-								at: boundaries.thresholdPercent / 100,
-								title: `Auto-compact at ${Math.round(boundaries.thresholdPercent)}%`,
-							},
-						]
-					: undefined,
+				...(used !== null && speculationAt !== null && used > speculationAt
+					? { parts: [{ value: speculationAt }, { value: used - speculationAt, token: "accent" }] }
+					: {}),
+				...(marks.length > 0 ? { marks } : {}),
+				...(pct === null ? {} : { label: `${Math.round(pct)}%` }),
+				...(window > 0 ? { total: formatNumber(window) } : {}),
 				title: lines.join("\n"),
+				actions: { click: "status.context" },
 			},
 			undefined,
 			"context",
 		);
 
-		const share =
-			pct !== null && window > 0
-				? `${Math.round(pct)}% of ${formatNumber(window)}`
-				: window > 0
-					? formatNumber(window)
-					: `${formatNumber(ctx.contextTokens)} tokens`;
-		const cost = describeSegment("cost", ctx)
-			?.spans.map(part => part.t)
-			.join("");
-		if (cost) lines.push(`Session cost ${cost}`);
+		// The meter reads the context; the bar's usage is the session's cost.
+		const cost =
+			describeSegment("cost", ctx)
+				?.spans.map(part => part.t)
+				.join("") ?? "";
 		const usage = node(
 			"text",
 			{
 				role: "omp.composer.usage",
-				tone: getContextUsageTone(getContextUsageLevel(pct ?? 0, window)),
-				text: cost ? `${share} · ${cost}` : share,
+				text: cost,
 				wrap: "none",
-				title: lines.join("\n"),
-				actions: { click: "status.context" },
+				...(cost ? { title: `Session cost ${cost}` } : {}),
+				actions: { click: "status.cost" },
 			},
 			undefined,
 			"usage",