pi-cockpit 0.13.0 → 0.15.0

package/README.md

@@ -66,6 +66,7 @@ Cockpit has no package dependency on `pi-maestro-flow`. It observes optional pro
   "agentsMode": "list",
   "todoMode": "list",
   "todoExpanded": false,
+  "stackStyle": "classic",
   "hideNativeAgents": true,
   "icons": { "mode": "auto" },
   "sidebar": {
@@ -91,6 +92,7 @@ Cockpit has no package dependency on `pi-maestro-flow`. It observes optional pro
 - `quietSymbols`: `"check"` (✓/✗/⋯) or `"dot"` (●/○/◌) lifecycle glyphs for quiet tool rows.
 - `agentsMode` / `todoMode`: `"list"` or `"compact"`.
 - `todoExpanded`: when `true`, expands the todo widget by default.
+- `stackStyle`: `"classic"` keeps the separate Todo/Agent widgets; `"zen"` projects MISSION, WORK, and ACTORS into one borderless stack. The default remains `"classic"`.
 - `hideNativeAgents`: when `true`, clears the teammate extension's own `teammate-agents` widget (it draws a similar list *below* the editor) so the two don't duplicate. On by default.
 - `sidebar.mode`: `"auto"` or `"on"` enables the dock when at least 72 main columns plus 32 sidebar columns fit; `"off"` always uses widgets.
 - `sidebar.width`: persisted dock width, rounded and clamped to `32..56`; default `40`.
@@ -114,11 +116,12 @@ The tab title is `frame + pi - <session> - <working state>`. The session part fo
 - `/cockpit` — opens the settings overlay.
 - `/maestro-settings` — opens the unified settings shell (Cockpit, Flow, Teammate and integrations).
 - `Alt+J` — opens the background Bash jobs overlay (live status, command, cwd, duration, output tail).
+- `Alt+L` — browses the visible Cockpit surface. In Zen widget mode, arrows or `j/k` select rows, first Enter expands inline details, second Enter opens the entity sheet/overlay, and Esc steps back. In the Agent overlay, `m` makes the selected agent the editor input target.
 - `/cockpit sidebar` — reports the current sidebar mode, width, and density.
 - `/cockpit sidebar auto|on|off` — selects dock behavior.
 - `/cockpit sidebar resize` or `Ctrl+Shift+R` — enters temporary Resize mode. Left/Right adjusts one column, Shift+Left/Shift+Right adjusts four, Enter accepts, and Escape rolls back. Mouse reporting is active only during Resize mode.
 - `/cockpit quiet` — toggles quiet mode; `/cockpit bg` shows background jobs.
-- `/theme` — switch theme with live preview; `/theme <name>` applies directly. Pi ships no standalone theme command; cockpit provides one.
+- `/theme` — switch theme with live preview; `/theme <name>` applies directly. `cockpit-zen` is the restrained warm-gold theme designed for the Zen stack; selecting it does not change `stackStyle`. Pi ships no standalone theme command; cockpit provides one.
 
 ## Sidebar compatibility
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pi-cockpit",
-  "version": "0.13.0",
+  "version": "0.15.0",
   "description": "Responsive Maestro operations sidebar, fallback status widgets, and footer for Pi.",
   "type": "module",
   "keywords": [
@@ -18,7 +18,7 @@
     "README.md"
   ],
   "scripts": {
-    "test": "node --test --experimental-transform-types tests/config.test.ts tests/public-events.test.ts tests/maestro-store.test.ts tests/split-pane.test.ts tests/editor-bottom.test.ts tests/sidebar-render.test.ts tests/sidebar-controller.test.ts tests/viewport-stability.test.ts tests/quiet-tools.test.ts tests/edit-guard.test.ts tests/agents-store.test.ts tests/endpoint-store.test.ts tests/session-ui-state.test.ts tests/session-tabs.test.ts tests/agent-bar.test.ts tests/supervision-store.test.ts tests/bash-bg-store.test.ts tests/bash-bg-widget.test.ts tests/bash-bg-overlay.test.ts tests/agent-overlay.test.ts tests/todo-store.test.ts tests/render.test.ts tests/agent-scroll.test.ts tests/session-bar.test.ts tests/session-detail.test.ts tests/footer.test.ts tests/extension-status.test.ts tests/input-routing.test.ts tests/integration-contract.test.ts tests/stack-widget.test.ts tests/settings-view.test.ts tests/thinking-fold.test.ts tests/thinking-timer.test.ts tests/tick-policy.test.ts tests/ambient.test.ts tests/viewport.test.ts tests/theme-picker.test.ts tests/model-picker.test.ts tests/title-gen.test.ts tests/title-llm.test.ts tests/settings-registry.test.ts tests/settings-coordinator.test.ts tests/settings-locale.test.ts tests/tui-i18n.test.ts tests/settings-shell.test.ts tests/settings-cockpit-provider.test.ts tests/settings-cross-package.test.ts tests/ui-primitives.test.ts tests/settings-shell-secret.test.ts tests/settings-shell-listcrud.test.ts tests/capturing-overlay.test.ts tests/claude-editor.test.ts tests/fullscreen-controller.test.ts tests/transcript-selection.test.ts tests/terminal-cleanup.test.ts tests/terminal-capability.test.ts",
+    "test": "node --test --experimental-transform-types tests/config.test.ts tests/public-events.test.ts tests/maestro-store.test.ts tests/split-pane.test.ts tests/editor-bottom.test.ts tests/sidebar-render.test.ts tests/sidebar-controller.test.ts tests/viewport-stability.test.ts tests/quiet-tools.test.ts tests/edit-guard.test.ts tests/agents-store.test.ts tests/endpoint-store.test.ts tests/session-ui-state.test.ts tests/session-tabs.test.ts tests/agent-bar.test.ts tests/supervision-store.test.ts tests/bash-bg-store.test.ts tests/bash-bg-widget.test.ts tests/bash-bg-overlay.test.ts tests/agent-overlay.test.ts tests/todo-store.test.ts tests/render.test.ts tests/agent-scroll.test.ts tests/session-bar.test.ts tests/session-detail.test.ts tests/footer.test.ts tests/extension-status.test.ts tests/input-routing.test.ts tests/integration-contract.test.ts tests/stack-widget.test.ts tests/zen-render.test.ts tests/zen-browse.test.ts tests/zen-sheet.test.ts tests/settings-view.test.ts tests/thinking-fold.test.ts tests/thinking-timer.test.ts tests/tick-policy.test.ts tests/ambient.test.ts tests/viewport.test.ts tests/theme-picker.test.ts tests/model-picker.test.ts tests/title-gen.test.ts tests/title-llm.test.ts tests/settings-registry.test.ts tests/settings-coordinator.test.ts tests/settings-locale.test.ts tests/tui-i18n.test.ts tests/settings-shell.test.ts tests/settings-cockpit-provider.test.ts tests/settings-cross-package.test.ts tests/ui-primitives.test.ts tests/settings-shell-secret.test.ts tests/settings-shell-listcrud.test.ts tests/capturing-overlay.test.ts tests/claude-editor.test.ts tests/fullscreen-controller.test.ts tests/transcript-selection.test.ts tests/terminal-cleanup.test.ts tests/terminal-capability.test.ts",
     "typecheck": "tsc --noEmit",
     "prepack": "node ../../scripts/bundle-settings-core.mjs",
     "postpack": "node ../../scripts/bundle-settings-core.mjs --clean"
@@ -72,7 +72,7 @@
     "@earendil-works/pi-coding-agent": "0.83.0",
     "@earendil-works/pi-tui": "0.83.0",
     "@types/node": "^22.0.0",
-    "pi-maestro-teammate": "1.11.0",
+    "pi-maestro-teammate": "1.13.0",
     "typebox": "1.3.7",
     "typescript": "^5.5.0"
   },

package/src/agent-bar.ts

@@ -8,11 +8,13 @@
 import type { Theme, ThemeColor } from "@earendil-works/pi-coding-agent";
 import { truncateToWidth, visibleWidth, type TUI } from "@earendil-works/pi-tui";
 import type { CockpitEndpoint } from "./endpoint-store.ts";
+import { formatAgentMetric } from "./render.ts";
 import type { SessionUiState } from "./session-ui-state.ts";
 import { formatUnreadCount, type SessionTab } from "./session-tabs.ts";
 import type { AgentRow } from "./types.ts";
 import { effectiveAgentStatus, type AgentDisplayStatus } from "./agents-store.ts";
 import { visibleAgentRows } from "./stack-widget.ts";
+import { tuiT } from "./tui-i18n.ts";
 
 export const SESSION_BAR_WIDGET_KEY = "cockpit-session-bar";
 export const AGENT_BAR_WIDGET_KEY = SESSION_BAR_WIDGET_KEY;
@@ -88,12 +90,30 @@ export function statusColor(status: AgentDisplayStatus): ThemeColor {
 	}
 }
 
-function chip(label: string, active: boolean, color: ThemeColor, theme: Theme, unread = 0): string {
+function chip(
+	label: string,
+	active: boolean,
+	color: ThemeColor,
+	theme: Theme,
+	unread = 0,
+	activity?: string,
+	attention = false,
+	outcome?: { status: "completed" | "failed" | "terminated"; message?: string },
+): string {
 	const text = `@${label}`;
 	const badge = unread > 0 ? theme.fg("warning", ` •${formatUnreadCount(unread)}`) : "";
+	const activitySuffix = activity ? theme.fg("dim", ` · ${activity}`) : "";
+	const attentionPrefix = attention ? theme.fg("error", "!") : "";
+	const outcomeSuffix = outcome
+		? outcome.status === "failed"
+			? theme.fg("error", ` ✗${outcome.message ? ` ${outcome.message}` : ""}`)
+			: outcome.status === "terminated"
+				? theme.fg("warning", " ✗")
+				: theme.fg("success", " ✓")
+		: "";
 	return active
-		? `${theme.fg(color, "▸")} ${theme.fg(color, theme.bold(text))}${badge}`
-		: `${theme.fg(color, text)}${badge}`;
+		? `${attentionPrefix}${theme.fg(color, "▸")} ${theme.fg(color, theme.bold(text))}${outcomeSuffix}${activitySuffix}${badge}`
+		: `${attentionPrefix}${theme.fg(color, text)}${outcomeSuffix}${activitySuffix}${badge}`;
 }
 
 export type AgentBarStatus = AgentDisplayStatus | "idle";
@@ -102,6 +122,12 @@ interface AgentBarTab extends SessionTab {
 	endpoint: CockpitEndpoint;
 	status: AgentBarStatus;
 	color: ThemeColor;
+	/** Current tool name while the agent is live; shown after the chip label. */
+	activity?: string;
+	/** Stalled state beyond the color channel: a leading error `!`. */
+	attention?: boolean;
+	/** Terminal outcome badge: ✓ completed, ✗ failed (with reason) or terminated. */
+	outcome?: { status: "completed" | "failed" | "terminated"; message?: string };
 }
 
 function endpointStatus(endpoint: CockpitEndpoint, now: number, mainRunning: boolean): AgentBarStatus {
@@ -140,7 +166,18 @@ const CHIP_SEPARATOR = "  ";
 function renderAgentChipLine(tabs: AgentBarTab[], selectedId: string, width: number, theme: Theme): string {
 	const w = Math.max(1, width);
 	const selectedIndex = Math.max(0, tabs.findIndex((tab) => tab.id === selectedId));
-	const chips = tabs.map((tab) => chip(tab.label, tab.id === selectedId, tab.color, theme, tab.unread));
+	const chips = tabs.map((tab) => chip(
+		tab.label,
+		tab.id === selectedId,
+		tab.color,
+		theme,
+		tab.unread,
+		tab.activity,
+		tab.attention,
+		tab.outcome
+			? { status: tab.outcome.status, message: tab.outcome.message ? truncateToWidth(tab.outcome.message, 24, "…") : undefined }
+			: undefined,
+	));
 	const chipWidths = chips.map((text) => visibleWidth(text));
 	const sepWidth = visibleWidth(CHIP_SEPARATOR);
 	const totalWidth = chipWidths.reduce((sum, chipWidth) => sum + chipWidth + sepWidth, 0) - sepWidth;
@@ -223,6 +260,10 @@ export function renderAgentBar(
 	const tabs: AgentBarTab[] = endpoints.map((endpoint) => {
 		const selected = endpoint.id === selectedId;
 		const status = endpointStatus(endpoint, now, options.mainRunning === true);
+		const live = status === "running" || status === "retrying";
+		const outcome = status === "done" || status === "failed" || status === "terminated" || status === "sleeping"
+			? endpoint.agentRow?.lastOutcome
+			: undefined;
 		return {
 			id: endpoint.id,
 			label: endpoint.label,
@@ -231,10 +272,30 @@ export function renderAgentBar(
 			endpoint,
 			status,
 			color: endpointColor(endpoint, status, now, selected),
+			...(live && endpoint.agentRow?.activeTool
+				? {
+					activity: endpoint.agentRow.activeToolArgs
+						? `${endpoint.agentRow.activeTool} ${endpoint.agentRow.activeToolArgs}`
+						: endpoint.agentRow.activeTool,
+				}
+				: {}),
+			...(status === "stalled" ? { attention: true } : {}),
+			...(outcome ? { outcome } : {}),
 		};
 	});
+	// Selected-session metrics summary, appended only when the chip line leaves
+	// room for it: telemetry must never squeeze the chips that carry identity.
+	const selectedRow = tabs.find((tab) => tab.id === selectedId)?.endpoint.agentRow;
+	const metricParts: string[] = [];
+	if (selectedRow?.toolCount !== undefined) metricParts.push(tuiT("common.tools", { count: selectedRow.toolCount }));
+	if (selectedRow?.tokens !== undefined) metricParts.push(tuiT("widget.agent.tokens", { count: formatAgentMetric(selectedRow.tokens) }));
+	const metrics = metricParts.length > 0 ? theme.fg("muted", ` · ${metricParts.join(" · ")}`) : "";
 	return [renderSessionBarLine(
-		(availableWidth) => renderAgentChipLine(tabs, selectedId, availableWidth, theme),
+		(availableWidth) => {
+			const chipsLine = renderAgentChipLine(tabs, selectedId, availableWidth, theme);
+			if (!metrics || visibleWidth(chipsLine) + visibleWidth(metrics) > availableWidth) return chipsLine;
+			return chipsLine + metrics;
+		},
 		width,
 		theme,
 		options.shortcutHint,

package/src/agent-overlay.ts

@@ -3,11 +3,13 @@ import {
 	Key,
 	type Component,
 	type Focusable,
+	decodeKittyPrintable,
+	fuzzyFilter,
 	matchesKey,
 	truncateToWidth,
 	visibleWidth,
 } from "@earendil-works/pi-tui";
-import { effectiveAgentStatus, type AgentDisplayStatus } from "./agents-store.ts";
+import { effectiveAgentStatus, isExpertLeader, type AgentDisplayStatus } from "./agents-store.ts";
 import { scrollBy, type AgentScrollState } from "./agent-scroll.ts";
 import type { IconGlyphs } from "./icons.ts";
 import { visibleStart } from "./layout.ts";
@@ -26,6 +28,8 @@ export interface AgentOverlayParams {
 	getAgents: () => readonly AgentRow[];
 	getViewingId: () => string | undefined;
 	onSelect: (correlationId: string) => void;
+	/** Set the selected agent as the editor input target without closing the overlay. */
+	onTarget?: (correlationId: string) => void;
 	onCommand: (correlationId: string, action: "interrupt" | "steer", message?: string) => void;
 	requestRender: () => void;
 	close: () => void;
@@ -36,10 +40,148 @@ export interface AgentOverlayParams {
 
 const CARD_CHROME_ROWS = 5;
 const COMMAND_ACK_MS = 1_500;
+const MAX_STEER_DRAFT_CHARS = 4_096;
+const BRACKETED_PASTE_START = "\x1b[200~";
+const BRACKETED_PASTE_END = "\x1b[201~";
+const MAX_BUFFERED_PASTE_CHARS = 1_048_576;
+const graphemeSegmenter = typeof Intl.Segmenter === "function"
+	? new Intl.Segmenter(undefined, { granularity: "grapheme" })
+	: undefined;
 
-/** Plain letters reserved for command keys stay out of the draft. */
-function isDraftInput(data: string): boolean {
-	return data.length === 1 && data >= " ";
+/** Match the repository's single-line input cleanup without importing across packages. */
+function sanitizeDraftInput(data: string): string {
+	return data.normalize("NFC").replace(/\r\n?|\n|\t/g, " ").replace(/[\x00-\x1f\x7f-\x9f]/g, "");
+}
+
+function printableDraftInput(data: string): string {
+	const kittyPrintable = decodeKittyPrintable(data);
+	if (kittyPrintable !== undefined) return kittyPrintable;
+	// Escape/CSI-prefixed terminal input is a key sequence, not pasted text.
+	if (data.includes("\x1b") || data.includes("\x9b")) return "";
+	return sanitizeDraftInput(data);
+}
+
+function appendDraftInput(draft: string, data: string, paste = false): string {
+	const printable = paste ? sanitizeDraftInput(data) : printableDraftInput(data);
+	const remaining = MAX_STEER_DRAFT_CHARS - draft.length;
+	if (!printable || remaining <= 0) return draft;
+	if (printable.length <= remaining) return draft + printable;
+
+	let end = 0;
+	for (const segment of draftSegments(printable)) {
+		if (segment.end > remaining) break;
+		end = segment.end;
+	}
+	return draft + printable.slice(0, end);
+}
+
+interface DraftInputToken {
+	kind: "input" | "paste";
+	text: string;
+}
+
+class BracketedPasteDecoder {
+	private pasting = false;
+	private buffer = "";
+	private pending = "";
+
+	isPasting(): boolean {
+		return this.pasting;
+	}
+
+	hasPending(): boolean {
+		return this.pending.length > 0;
+	}
+
+	flushPending(): DraftInputToken[] {
+		if (!this.pending) return [];
+		const pending = this.pending;
+		this.pending = "";
+		if (this.pasting) {
+			this.appendPaste(pending);
+			return [];
+		}
+		return [{ kind: "input", text: pending }];
+	}
+
+	feed(data: string): DraftInputToken[] {
+		const tokens: DraftInputToken[] = [];
+		let rest = this.pending + data;
+		this.pending = "";
+		while (rest) {
+			if (!this.pasting) {
+				const start = rest.indexOf(BRACKETED_PASTE_START);
+				if (start < 0) {
+					const partial = partialMarkerSuffix(rest, BRACKETED_PASTE_START);
+					const input = rest.slice(0, rest.length - partial.length);
+					if (input) tokens.push({ kind: "input", text: input });
+					this.pending = partial;
+					break;
+				}
+				if (start > 0) tokens.push({ kind: "input", text: rest.slice(0, start) });
+				this.pasting = true;
+				rest = rest.slice(start + BRACKETED_PASTE_START.length);
+				continue;
+			}
+
+			const end = rest.indexOf(BRACKETED_PASTE_END);
+			if (end < 0) {
+				const partial = partialMarkerSuffix(rest, BRACKETED_PASTE_END);
+				this.appendPaste(rest.slice(0, rest.length - partial.length));
+				this.pending = partial;
+				break;
+			}
+			this.appendPaste(rest.slice(0, end));
+			tokens.push({ kind: "paste", text: this.buffer });
+			this.buffer = "";
+			this.pasting = false;
+			rest = rest.slice(end + BRACKETED_PASTE_END.length);
+		}
+		return tokens;
+	}
+
+	private appendPaste(value: string): void {
+		const remaining = MAX_BUFFERED_PASTE_CHARS - this.buffer.length;
+		if (remaining > 0) this.buffer += value.slice(0, remaining);
+	}
+}
+
+function partialMarkerSuffix(value: string, marker: string): string {
+	const limit = Math.min(value.length, marker.length - 1);
+	for (let length = limit; length >= 1; length--) {
+		const suffix = value.slice(-length);
+		if (marker.startsWith(suffix)) return suffix;
+	}
+	return "";
+}
+
+function removeLastDraftGrapheme(draft: string): string {
+	const segments = draftSegments(draft);
+	return segments.length === 0 ? draft : draft.slice(0, segments[segments.length - 1].start);
+}
+
+function draftSegments(value: string): Array<{ start: number; end: number }> {
+	if (graphemeSegmenter) {
+		const parts = [...graphemeSegmenter.segment(value)];
+		return parts.map((part, index) => ({ start: part.index, end: parts[index + 1]?.index ?? value.length }));
+	}
+
+	const segments: Array<{ start: number; end: number }> = [];
+	let start = 0;
+	for (const char of value) {
+		const end = start + char.length;
+		segments.push({ start, end });
+		start = end;
+	}
+	return segments;
+}
+
+/** Printable text for the search query: single chars, paste and CJK alike. */
+function isSearchInput(data: string): boolean {
+	return data.length > 0 && [...data].every((ch) => {
+		const code = ch.codePointAt(0)!;
+		return code >= 0x20 && code !== 0x7f && !(code >= 0x80 && code <= 0x9f);
+	});
 }
 
 export class AgentOverlay implements Component, Focusable {
@@ -48,9 +190,14 @@ export class AgentOverlay implements Component, Focusable {
 	private outputScroll: AgentScrollState = { offset: 0, following: true };
 	private detailWidth = 80;
 	private detailRows = 8;
-	private compose: { targetId: string; draft: string } | null = null;
+	private compose: { targetId: string; draft: string; input: BracketedPasteDecoder } | null = null;
+	/** Active `/` search mode; the query string may be empty while searching. */
+	private searching = false;
+	/** Current search query; empty string means no filtering. */
+	private search = "";
 	private lastAck: { text: string; at: number; error?: boolean } | null = null;
 	private ackTimer: ReturnType<typeof setTimeout> | undefined;
+	private pasteFlushTimer: ReturnType<typeof setTimeout> | undefined;
 
 	constructor(private readonly params: AgentOverlayParams) {
 		this.selectedId = params.getViewingId();
@@ -59,36 +206,65 @@ export class AgentOverlay implements Component, Focusable {
 	invalidate(): void {}
 	dispose(): void {
 		if (this.ackTimer) clearTimeout(this.ackTimer);
+		if (this.pasteFlushTimer) clearTimeout(this.pasteFlushTimer);
 		this.ackTimer = undefined;
+		this.pasteFlushTimer = undefined;
 	}
 
 	handleInput(data: string): void {
 		if (this.compose) {
+			const input = this.compose.input;
+			if (this.pasteFlushTimer) clearTimeout(this.pasteFlushTimer);
+			this.pasteFlushTimer = undefined;
+			for (const token of input.feed(data)) this.handleComposeToken(token);
+			if (this.compose?.input === input && input.hasPending() && !input.isPasting()) {
+				this.pasteFlushTimer = setTimeout(() => {
+					this.pasteFlushTimer = undefined;
+					if (this.compose?.input !== input) return;
+					for (const token of input.flushPending()) this.handleComposeToken(token);
+					this.params.requestRender();
+				}, 16);
+				this.pasteFlushTimer.unref?.();
+			}
+			this.params.requestRender();
+			return;
+		}
+		const printableInput = decodeKittyPrintable(data);
+		const commandInput = printableInput ?? data;
+		if (this.searching) {
+			// Search mode: printable characters extend the query, backspace trims
+			// it. Esc exits and clears; Enter locks the filter so the roster
+			// commands (↑↓ / i / s) apply to the narrowed set.
 			if (matchesKey(data, Key.escape)) {
-				this.compose = null;
+				this.searching = false;
+				this.search = "";
 			} else if (data === "\r" || data === "\n") {
-				const targetId = this.compose.targetId;
-				const draft = this.compose.draft.trim();
-				this.compose = null;
-				// The compose target is frozen: the steer must never silently
-				// re-target another agent because the roster selection moved.
-				const target = this.entries().find((entry) => entry.row.correlationId === targetId)?.row;
-				if (!target) {
-					this.ack(tuiT("overlay.agents.aborted", { agent: this.agentName(targetId) }), true);
-				} else if (draft) {
-					this.params.onCommand(targetId, "steer", draft);
-					this.ack(`steer @${target.name || target.role || target.agent || targetId}: ${draft}`);
-				}
+				this.searching = false;
 			} else if (data === "\x7f" || data === "\x08") {
-				this.compose.draft = this.compose.draft.slice(0, -1);
-			} else if (isDraftInput(data)) {
-				this.compose.draft += data;
+				this.search = this.search.slice(0, -1);
+			} else if (isSearchInput(commandInput)) {
+				this.search += commandInput;
 			}
+			this.reconcileSelection(this.entries().map((entry) => entry.row));
+			this.params.requestRender();
+			return;
+		}
+		if (commandInput === "/") {
+			this.searching = true;
+			this.search = "";
 			this.params.requestRender();
 			return;
 		}
 		if (matchesKey(data, Key.escape)) {
-			this.params.close();
+			// A locked filter (Enter left a non-empty query) is cleared by the
+			// first Esc, the second one closes the overlay.
+			if (this.search !== "") {
+				this.search = "";
+				this.reconcileSelection(this.entries().map((entry) => entry.row));
+			} else {
+				this.params.close();
+			}
+			this.params.requestRender();
 			return;
 		}
 		if (matchesKey(data, Key.up)) {
@@ -115,21 +291,58 @@ export class AgentOverlay implements Component, Focusable {
 			this.scrollOutput(Math.max(1, this.detailRows - 2));
 			return;
 		}
-		if (data === "i" && this.selectedId) {
+		if (commandInput === "m" && this.selectedId && this.params.onTarget) {
+			this.params.onTarget(this.selectedId);
+			this.ack(tuiT("overlay.agents.targetAck", { agent: this.agentName(this.selectedId) }));
+			return;
+		}
+		if (commandInput === "i" && this.selectedId) {
 			// Interrupt (打断): abort the current turn/tool; the agent stays alive
 			// and is told to report and continue.
 			this.params.onCommand(this.selectedId, "interrupt");
 			this.ack(`interrupt @${this.agentName(this.selectedId)}`);
 			return;
 		}
-		if (data === "s" && this.selectedId) {
+		if (commandInput === "s" && this.selectedId) {
 			// Steer (引导): interrupt + inject the drafted message. The target is
 			// frozen at compose time so later roster changes cannot re-target it.
-			this.compose = { targetId: this.selectedId, draft: "" };
+			this.compose = { targetId: this.selectedId, draft: "", input: new BracketedPasteDecoder() };
 			this.params.requestRender();
 		}
 	}
 
+	private handleComposeToken(token: DraftInputToken): void {
+		if (!this.compose) return;
+		if (token.kind === "paste") {
+			this.compose.draft = appendDraftInput(this.compose.draft, token.text, true);
+			return;
+		}
+		if (matchesKey(token.text, Key.escape)) {
+			this.compose = null;
+			return;
+		}
+		if (token.text === "\r" || token.text === "\n") {
+			const targetId = this.compose.targetId;
+			const draft = this.compose.draft.trim();
+			this.compose = null;
+			// The compose target is frozen: the steer must never silently
+			// re-target another agent because the roster selection moved.
+			const target = this.unfilteredEntries().find((entry) => entry.row.correlationId === targetId)?.row;
+			if (!target) {
+				this.ack(tuiT("overlay.agents.aborted", { agent: this.agentName(targetId) }), true);
+			} else if (draft) {
+				this.params.onCommand(targetId, "steer", draft);
+				this.ack(`steer @${target.name || target.role || target.agent || targetId}: ${draft}`);
+			}
+			return;
+		}
+		if (token.text === "\x7f" || token.text === "\x08") {
+			this.compose.draft = removeLastDraftGrapheme(this.compose.draft);
+			return;
+		}
+		this.compose.draft = appendDraftInput(this.compose.draft, token.text);
+	}
+
 	private ack(text: string, error = false): void {
 		this.lastAck = { text, at: Date.now(), ...(error ? { error: true } : {}) };
 		if (this.ackTimer) clearTimeout(this.ackTimer);
@@ -143,7 +356,7 @@ export class AgentOverlay implements Component, Focusable {
 	}
 
 	private agentName(correlationId: string): string {
-		const row = this.entries().find((entry) => entry.row.correlationId === correlationId)?.row;
+		const row = this.unfilteredEntries().find((entry) => entry.row.correlationId === correlationId)?.row;
 		return row?.name || row?.role || row?.agent || correlationId.slice(0, 8);
 	}
 
@@ -158,6 +371,9 @@ export class AgentOverlay implements Component, Focusable {
 				const target = this.agentName(this.compose.targetId);
 				return [fit(`steer @${target}: ${this.compose.draft}_ · Enter · Esc`, safeWidth)];
 			}
+			if (this.searching || this.search.trim() !== "") {
+				return [fit(`${tuiT("overlay.agents.searchPrompt")} ${this.search}_ (${entries.length}) · Esc`, safeWidth)];
+			}
 			const selected = entries.find((entry) => entry.row.correlationId === this.selectedId)?.row;
 			const title = tuiT("overlay.agents.title");
 			return [fit(
@@ -206,12 +422,28 @@ export class AgentOverlay implements Component, Focusable {
 	}
 
 	private entries() {
+		const entries = this.unfilteredEntries();
+		const query = this.search.trim();
+		if (!query) return entries;
+		// A search flattens the tree: the query already broke the hierarchy, so
+		// keeping dangling branch glyphs would only add noise to the results.
+		return fuzzyFilter(entries, query, (entry) =>
+			`${entry.row.name ?? ""} ${entry.row.role} ${entry.row.agent} ${entry.row.task}`,
+		).map((entry) => ({ ...entry, prefix: "" }));
+	}
+
+	private unfilteredEntries() {
 		return buildAgentTree(visibleAgentRows([...this.params.getAgents()]), this.params.glyphs);
 	}
 
 	private agentLines(width: number, maxRows: number): string[] {
 		const entries = this.entries();
-		if (entries.length === 0) return [this.params.theme.fg("dim", fit(tuiT("overlay.agents.noAgents"), width))];
+		if (entries.length === 0) {
+			return [this.params.theme.fg("dim", fit(
+				this.searching || this.search.trim() !== "" ? tuiT("overlay.agents.noMatches") : tuiT("overlay.agents.noAgents"),
+				width,
+			))];
+		}
 		const selected = Math.max(0, entries.findIndex((entry) => entry.row.correlationId === this.selectedId));
 		const start = visibleStart(selected, entries.length, maxRows);
 		return entries.slice(start, start + maxRows).map(({ row, prefix }) => {
@@ -219,8 +451,11 @@ export class AgentOverlay implements Component, Focusable {
 			const visual = agentVisual(status, this.params.glyphs);
 			const marker = row.correlationId === this.selectedId ? this.params.glyphs.selectMarker : " ";
 			const task = row.task ? ` · ${row.task}` : "";
+			const expertTag = isExpertLeader(row)
+				? `${this.params.theme.fg("accent", tuiT("widget.agent.expert"))} `
+				: "";
 			return fit(
-				`${prefix}${marker} ${this.params.theme.fg(visual.color, visual.glyph)} ${this.params.theme.bold(agentLabel(row))}${task}`,
+				`${prefix}${marker} ${this.params.theme.fg(visual.color, visual.glyph)} ${expertTag}${this.params.theme.bold(agentLabel(row))}${task}`,
 				width,
 			);
 		});
@@ -246,6 +481,11 @@ export class AgentOverlay implements Component, Focusable {
 			const target = this.agentName(this.compose.targetId);
 			return fit(`steer @${target}: ${this.compose.draft}_`, width);
 		}
+		if (this.searching || this.search.trim() !== "") {
+			const entries = this.entries();
+			const total = buildAgentTree(visibleAgentRows([...this.params.getAgents()]), this.params.glyphs).length;
+			return fit(`${this.params.theme.fg("accent", tuiT("overlay.agents.searchPrompt"))} ${this.search}_ (${entries.length}/${total})`, width);
+		}
 		const rows = this.entries().map((entry) => entry.row);
 		const statuses = rows.map((row) => effectiveAgentStatus(row));
 		const active = statuses.filter((status) => status === "running" || status === "retrying").length;
@@ -266,7 +506,10 @@ export class AgentOverlay implements Component, Focusable {
 		if (this.compose) {
 			return this.params.theme.fg("dim", fit(tuiT("overlay.agents.composeHelp"), width));
 		}
-		return this.params.theme.fg("dim", fit(tuiT("overlay.agents.help"), width));
+		if (this.searching || this.search.trim() !== "") {
+			return this.params.theme.fg("dim", fit(tuiT("overlay.agents.searchHelp"), width));
+		}
+		return this.params.theme.fg("dim", fit(`${tuiT("overlay.agents.help")} · ${tuiT("overlay.agents.searchHint")}`, width));
 	}
 
 	private rule(width: number): string {