@oh-my-pi/pi-coding-agent 15.10.11 → 15.11.0

package/src/modes/components/{session-observer-overlay.ts → agent-hub.ts}

@@ -1,30 +1,34 @@
 /**
- * Session observer overlay component.
+ * Agent Hub overlay component.
  *
- * Picker mode: lists main + active subagent sessions with live status.
- * Viewer mode: renders a scrollable, interactive transcript of the selected subagent's session
- *   by reading its JSONL session file — shows thinking, text, tool calls, results
- *   with expand/collapse per entry and breadcrumb navigation for nested sub-agents.
+ * One overlay, two views:
+ * - Table view: every registered agent except Main (Main IS the ambient
+ *   chat), live from the global AgentRegistry — status, unread irc count,
+ *   current/last task, last activity. Select with j/k, Enter opens a chat,
+ *   `r` revives a parked agent, `x` aborts + releases one.
+ * - Chat view: per-agent transcript (incremental session-file tail, absorbed
+ *   from the old session observer overlay) plus an input line. Submitting
+ *   revives a parked agent, then prompts/steers it; the message lands in the
+ *   agent's persisted history via the normal prompt path.
  *
- * Lifecycle:
- *   - shortcut opens picker
- *   - Enter on a subagent -> viewer
- *   - shortcut while in viewer -> back to picker (or pop breadcrumb)
- *   - Esc from viewer -> back to picker (or pop breadcrumb)
- *   - Esc from picker -> close overlay
- *   - Enter on main session -> close overlay (jump back)
+ * Replaces the old SessionObserverOverlayComponent (ctrl+s observer).
  */
+import * as fs from "node:fs";
 import type { ToolResultMessage } from "@oh-my-pi/pi-ai";
-import { Container, Markdown, type MarkdownTheme, matchesKey, ScrollView } from "@oh-my-pi/pi-tui";
-import { formatDuration, formatNumber, logger } from "@oh-my-pi/pi-utils";
+import { Container, Editor, Markdown, type MarkdownTheme, matchesKey, ScrollView } from "@oh-my-pi/pi-tui";
+import { formatAge, formatDuration, formatNumber, logger } from "@oh-my-pi/pi-utils";
 import type { KeyId } from "../../config/keybindings";
-import { isSilentAbort } from "../../session/messages";
+import { IrcBus } from "../../irc/bus";
+import { AgentLifecycleManager } from "../../registry/agent-lifecycle";
+import { type AgentRef, AgentRegistry, type AgentStatus, MAIN_AGENT_ID } from "../../registry/agent-registry";
+import type { AgentSession } from "../../session/agent-session";
+import { isSilentAbort, USER_INTERRUPT_LABEL } from "../../session/messages";
 import type { SessionMessageEntry } from "../../session/session-manager";
 import { parseSessionEntries } from "../../session/session-manager";
 import { PREVIEW_LIMITS, replaceTabs, TRUNCATE_LENGTHS, truncateToWidth } from "../../tools/render-utils";
 import { toPathList } from "../../tools/search";
 import type { ObservableSession, SessionObserverRegistry } from "../session-observer-registry";
-import { getMarkdownTheme, theme } from "../theme/theme";
+import { getEditorTheme, getMarkdownTheme, theme } from "../theme/theme";
 import { matchesSelectDown, matchesSelectUp } from "../utils/keybinding-matchers";
 import { DynamicBorder } from "./dynamic-border";
 import { formatContextUsage } from "./status-line/context-thresholds";
@@ -39,6 +43,10 @@ const MAX_TOOL_ARGS_CHARS = 500;
 const PAGE_SIZE = 15;
 /** Left indent for content under entry headers */
 const INDENT = "    ";
+/** Refresh cadence for the relative-time column */
+const AGE_TICK_MS = 5_000;
+/** Debounce for live-session transcript refreshes */
+const CHAT_REFRESH_DEBOUNCE_MS = 80;
 
 /** Compute the max content width for the current terminal, accounting for indent and chrome. */
 function contentWidth(indent = INDENT): number {
@@ -57,180 +65,391 @@ interface ViewerEntry {
 	kind: "thinking" | "text" | "toolCall" | "user";
 }
 
-/** Breadcrumb item for nested session navigation */
-interface BreadcrumbItem {
-	sessionId: string;
-	label: string;
-	sessionFile: string;
+const STATUS_ORDER: Record<AgentStatus, number> = { running: 0, idle: 1, parked: 2, aborted: 3 };
+
+/** Glyph + status word, colored per theme status conventions. */
+function statusBadge(status: AgentStatus): string {
+	switch (status) {
+		case "running":
+			return theme.fg("accent", `${theme.status.running} running`);
+		case "idle":
+			return theme.fg("success", `${theme.status.enabled} idle`);
+		case "parked":
+			return theme.fg("muted", `${theme.status.shadowed} parked`);
+		case "aborted":
+			return theme.fg("error", `${theme.status.aborted} aborted`);
+	}
 }
 
-export class SessionObserverOverlayComponent extends Container {
-	#registry: SessionObserverRegistry;
-	#onDone: () => void;
-	#selectedSessionId?: string;
-	#observeKeys: KeyId[];
-	#transcriptCache?: { path: string; bytesRead: number; entries: SessionMessageEntry[]; model?: string };
+export interface AgentHubDeps {
+	/** Progress/status snapshot source (task lifecycle + progress channels). */
+	observers: SessionObserverRegistry;
+	/** Keys that toggle the hub closed from inside (app.agents.hub + app.session.observe). */
+	hubKeys: KeyId[];
+	onDone: () => void;
+	requestRender: () => void;
+	/** Injectable for tests; defaults to the process-global registry. */
+	registry?: AgentRegistry;
+	/** Injectable for tests; defaults to the process-global lifecycle manager. */
+	lifecycle?: AgentLifecycleManager;
+	/** Injectable for tests; defaults to the process-global bus. */
+	irc?: IrcBus;
+}
 
-	// Scroll state
+export class AgentHubOverlayComponent extends Container {
+	#registry: AgentRegistry;
+	#observers: SessionObserverRegistry;
+	#irc: IrcBus;
+	#lifecycle: () => AgentLifecycleManager;
+	#onDone: () => void;
+	#requestRender: () => void;
+	#hubKeys: KeyId[];
+	#unsubscribers: Array<() => void> = [];
+	#ageTimer: NodeJS.Timeout | undefined;
+
+	// Table state
+	#view: "table" | "chat" = "table";
+	#rows: AgentRef[] = [];
+	#selectedRow = 0;
+	#notice: string | undefined;
+
+	// Chat state
+	#chatAgentId: string | undefined;
+	#editor: Editor;
+	#sessionUnsubscribe: (() => void) | undefined;
+	#attachedSession: AgentSession | undefined;
+	#chatRefreshTimer: NodeJS.Timeout | undefined;
+	#transcriptCache: { path: string; bytesRead: number; entries: SessionMessageEntry[]; model?: string } | undefined;
+
+	// Transcript viewer state (absorbed from the session observer overlay)
 	#scrollOffset = 0;
 	#renderedLines: string[] = [];
 	#viewportHeight = 20;
 	#wasAtBottom = true;
-
-	// Entry selection & expand/collapse
 	#viewerEntries: ViewerEntry[] = [];
 	#selectedEntryIndex = 0;
 	#expandedEntries = new Set<number>();
-
-	// Breadcrumb navigation
-	#navigationStack: BreadcrumbItem[] = [];
-
-	// Cached header/footer for viewer (rebuilt on refresh)
 	#viewerHeaderLines: string[] = [];
-	#viewerFooterLines: string[] = [];
-	// Markdown rendering
 	#mdTheme: MarkdownTheme = getMarkdownTheme();
 
-	constructor(registry: SessionObserverRegistry, onDone: () => void, observeKeys: KeyId[]) {
+	constructor(deps: AgentHubDeps) {
 		super();
-		this.#registry = registry;
-		this.#onDone = onDone;
-		this.#observeKeys = observeKeys;
-
-		// Jump directly to the most recently active sub-agent
-		const mostRecent = this.#getMostRecentSubagent();
-		if (mostRecent) {
-			this.#selectedSessionId = mostRecent.id;
-			this.#setupViewer();
-		} else {
-			// No sub-agents — close immediately
-			queueMicrotask(() => this.#onDone());
-		}
+		this.#registry = deps.registry ?? AgentRegistry.global();
+		this.#observers = deps.observers;
+		this.#irc = deps.irc ?? IrcBus.global();
+		// Lazy: the lifecycle global self-constructs against the global
+		// registry, so only touch it when revive/kill actually needs it.
+		this.#lifecycle = () => deps.lifecycle ?? AgentLifecycleManager.global();
+		this.#onDone = deps.onDone;
+		this.#requestRender = deps.requestRender;
+		this.#hubKeys = deps.hubKeys;
+
+		this.#editor = new Editor(getEditorTheme());
+		this.#editor.setMaxHeight(4);
+		this.#editor.onSubmit = text => this.#submitChatMessage(text);
+
+		this.#unsubscribers.push(this.#registry.onChange(() => this.#onDataChange()));
+		this.#unsubscribers.push(this.#observers.onChange(() => this.#onDataChange()));
+		this.#ageTimer = setInterval(() => this.#requestRender(), AGE_TICK_MS);
+		this.#ageTimer.unref?.();
+
+		this.#refreshRows();
 	}
 
-	/** Find the most recently updated sub-agent session (prefer active ones) */
-	#getMostRecentSubagent(): ObservableSession | undefined {
-		const sessions = this.#registry.getSessions().filter(s => s.kind === "subagent");
-		if (sessions.length === 0) return undefined;
-		// Prefer active sessions, then sort by lastUpdate descending
-		const active = sessions.filter(s => s.status === "active");
-		const pool = active.length > 0 ? active : sessions;
-		return pool.sort((a, b) => b.lastUpdate - a.lastUpdate)[0];
+	/** Tear down every subscription and timer. Called by the overlay owner on close. */
+	dispose(): void {
+		for (const unsubscribe of this.#unsubscribers.splice(0)) unsubscribe();
+		if (this.#ageTimer) {
+			clearInterval(this.#ageTimer);
+			this.#ageTimer = undefined;
+		}
+		if (this.#chatRefreshTimer) {
+			clearTimeout(this.#chatRefreshTimer);
+			this.#chatRefreshTimer = undefined;
+		}
+		this.#detachLiveSession();
 	}
 
 	override render(width: number): readonly string[] {
-		return this.#renderViewer(width);
+		return this.#view === "table" ? this.#renderTable(width) : this.#renderChat(width);
 	}
 
-	#setupViewer(): void {
-		this.clear();
+	handleInput(keyData: string): void {
+		// The hub/observe keys always close the overlay (toggle semantics)
+		for (const key of this.#hubKeys) {
+			if (matchesKey(keyData, key)) {
+				this.#onDone();
+				return;
+			}
+		}
+		if (this.#view === "table") {
+			this.#handleTableInput(keyData);
+		} else {
+			this.#handleChatInput(keyData);
+		}
+	}
+
+	/** Open the chat view for an agent id (public for table Enter and tests). */
+	openChat(id: string): void {
+		if (!this.#registry.get(id)) return;
+		this.#view = "chat";
+		this.#chatAgentId = id;
+		this.#notice = undefined;
+		this.#transcriptCache = undefined;
 		this.#scrollOffset = 0;
 		this.#selectedEntryIndex = 0;
 		this.#expandedEntries.clear();
 		this.#wasAtBottom = true;
-		this.#rebuildViewerContent();
-		// Auto-scroll to bottom and select last entry on init
+		this.#editor.setText("");
+		this.#attachLiveSession();
+		this.#rebuildChatContent();
+		// Auto-scroll to bottom and select last entry on open
 		if (this.#viewerEntries.length > 0) {
 			this.#selectedEntryIndex = this.#viewerEntries.length - 1;
-			this.#wasAtBottom = true;
-			this.#rebuildViewerContent();
+			this.#rebuildChatContent();
 		}
+		this.#requestRender();
 	}
 
-	/** Rebuild content from live registry data */
-	refreshFromRegistry(): void {
-		if (this.#selectedSessionId) {
-			// Keep auto-scrolling to bottom unless the user navigated away from the last entry
-			this.#wasAtBottom = this.#selectedEntryIndex >= this.#viewerEntries.length - 1;
-			this.#rebuildViewerContent();
+	// ========================================================================
+	// Live data plumbing
+	// ========================================================================
+
+	#onDataChange(): void {
+		this.#refreshRows();
+		if (this.#view === "chat") {
+			// A revive/park swaps the live session out from under the chat view.
+			this.#attachLiveSession();
+			this.#scheduleChatRefresh();
+			return;
 		}
+		this.#requestRender();
 	}
 
-	/** Rebuild the transcript content lines (called on setup and refresh) */
-	#rebuildViewerContent(): void {
-		const sessions = this.#registry.getSessions();
-		const session = sessions.find(s => s.id === this.#selectedSessionId);
+	#refreshRows(): void {
+		const selectedId = this.#rows[this.#selectedRow]?.id;
+		this.#rows = this.#registry
+			.list()
+			.filter(ref => ref.id !== MAIN_AGENT_ID)
+			.sort((a, b) => STATUS_ORDER[a.status] - STATUS_ORDER[b.status] || b.lastActivity - a.lastActivity);
+		const keptIndex = selectedId ? this.#rows.findIndex(ref => ref.id === selectedId) : -1;
+		this.#selectedRow = keptIndex >= 0 ? keptIndex : Math.min(this.#selectedRow, Math.max(0, this.#rows.length - 1));
+	}
 
-		// Load transcript first so model info is available for header
-		let messageEntries: SessionMessageEntry[] | null = null;
-		if (session?.sessionFile) {
-			messageEntries = this.#loadTranscript(session.sessionFile);
-		}
+	/** Subscribe to the chat agent's live session (if any) for transcript refreshes. Idempotent per session. */
+	#attachLiveSession(): void {
+		const session = this.#chatAgentId ? (this.#registry.get(this.#chatAgentId)?.session ?? undefined) : undefined;
+		if (session === this.#attachedSession) return;
+		this.#detachLiveSession();
+		if (!session) return;
+		this.#attachedSession = session;
+		this.#sessionUnsubscribe = session.subscribe(event => {
+			if (event.type === "message_end" || event.type === "tool_execution_end" || event.type === "agent_end") {
+				this.#scheduleChatRefresh();
+			}
+		});
+	}
 
-		// Header
-		this.#viewerHeaderLines = [];
-		const breadcrumb = this.#buildBreadcrumb(session);
-		this.#viewerHeaderLines.push(theme.fg("accent", breadcrumb));
-		if (session) {
-			const statusColor = session.status === "active" ? "success" : session.status === "failed" ? "error" : "dim";
-			const statusText = theme.fg(statusColor, `[${session.status}]`);
-			const agentTag = session.agent ? theme.fg("dim", ` ${session.agent}`) : "";
-			const subagentIds = this.#getSubagentSessionIds();
-			const posIdx = subagentIds.indexOf(this.#selectedSessionId ?? "");
-			const posLabel =
-				subagentIds.length > 1 && posIdx >= 0 ? theme.fg("dim", ` (${posIdx + 1}/${subagentIds.length})`) : "";
-			const modelName = this.#transcriptCache?.model;
-			const modelLabel = modelName ? theme.fg("muted", ` · ${modelName}`) : "";
-			this.#viewerHeaderLines.push(`${theme.bold(session.label)} ${statusText}${agentTag}${posLabel}${modelLabel}`);
-		}
-
-		// Content
-		const contentLines: string[] = [];
-		this.#viewerEntries = [];
+	#detachLiveSession(): void {
+		this.#sessionUnsubscribe?.();
+		this.#sessionUnsubscribe = undefined;
+		this.#attachedSession = undefined;
+	}
 
-		if (!session) {
-			contentLines.push(theme.fg("dim", "Session no longer available."));
-		} else if (!session.sessionFile) {
-			contentLines.push(theme.fg("dim", "No session file available yet."));
-		} else if (!messageEntries) {
-			contentLines.push(theme.fg("dim", "Unable to read session file."));
-		} else if (messageEntries.length === 0) {
-			contentLines.push(theme.fg("dim", "No messages yet."));
+	#scheduleChatRefresh(): void {
+		if (this.#chatRefreshTimer) return;
+		this.#chatRefreshTimer = setTimeout(() => {
+			this.#chatRefreshTimer = undefined;
+			if (this.#view !== "chat") return;
+			// Keep auto-scrolling to bottom unless the user navigated away
+			this.#wasAtBottom = this.#selectedEntryIndex >= this.#viewerEntries.length - 1;
+			this.#rebuildChatContent();
+			if (this.#wasAtBottom && this.#viewerEntries.length > 0) {
+				this.#selectedEntryIndex = this.#viewerEntries.length - 1;
+			}
+			this.#requestRender();
+		}, CHAT_REFRESH_DEBOUNCE_MS);
+		this.#chatRefreshTimer.unref?.();
+	}
+
+	#observableFor(id: string): ObservableSession | undefined {
+		return this.#observers.getSessions().find(s => s.id === id);
+	}
+
+	// ========================================================================
+	// Table view
+	// ========================================================================
+
+	#renderTable(width: number): string[] {
+		const lines: string[] = [];
+		lines.push(...new DynamicBorder().render(width));
+		const counts = this.#statusSummary();
+		lines.push(` ${theme.fg("accent", "Agent Hub")}${counts ? theme.fg("dim", `${theme.sep.dot}${counts}`) : ""}`);
+		lines.push(...new DynamicBorder().render(width));
+
+		if (this.#rows.length === 0) {
+			lines.push(` ${theme.fg("dim", "no subagents yet — task spawns appear here")}`);
 		} else {
-			this.#buildTranscriptLines(messageEntries, contentLines);
+			const termHeight = process.stdout.rows || 40;
+			// Chrome: 2 borders + title + notice? + blank + hints + border
+			const maxVisible = Math.max(3, termHeight - 7 - (this.#notice ? 1 : 0));
+			let start = 0;
+			if (this.#rows.length > maxVisible) {
+				start = Math.min(
+					Math.max(0, this.#selectedRow - Math.floor(maxVisible / 2)),
+					this.#rows.length - maxVisible,
+				);
+			}
+			const end = Math.min(start + maxVisible, this.#rows.length);
+			for (let i = start; i < end; i++) {
+				lines.push(this.#renderRow(this.#rows[i], i === this.#selectedRow, width));
+			}
+			if (end < this.#rows.length) {
+				lines.push(` ${theme.fg("dim", `… ${this.#rows.length - end} more`)}`);
+			}
 		}
-		this.#renderedLines = contentLines;
 
-		// Footer
-		this.#viewerFooterLines = [];
-		const statsLine = this.#buildStatsLine(session);
-		if (statsLine) this.#viewerFooterLines.push(statsLine);
-		this.#viewerFooterLines.push(
-			theme.fg("dim", "j/k:scroll  Enter:expand  [/]/←→:cycle agents  Esc/Ctrl+S:close  g/G:top/bottom"),
-		);
+		if (this.#notice) {
+			lines.push(` ${theme.fg("error", sanitizeLine(this.#notice, Math.max(10, width - 2)))}`);
+		}
+		lines.push("");
+		lines.push(` ${theme.fg("dim", "j/k:select  Enter:chat  r:revive  x:kill  Esc:close")}`);
+		lines.push(...new DynamicBorder().render(width));
+		return lines;
+	}
 
-		// Auto-scroll to bottom if we were at bottom
-		if (this.#wasAtBottom) {
-			this.#scrollOffset = Math.max(0, contentLines.length - this.#viewportHeight);
+	#statusSummary(): string {
+		const counts: Record<AgentStatus, number> = { running: 0, idle: 0, parked: 0, aborted: 0 };
+		for (const ref of this.#rows) {
+			counts[ref.status]++;
 		}
+		const parts: string[] = [];
+		for (const status of ["running", "idle", "parked", "aborted"] as const) {
+			const count = counts[status];
+			if (count > 0) parts.push(`${count} ${status}`);
+		}
+		return parts.join(theme.sep.dot);
 	}
 
-	/** Produce the final viewer output for the overlay system */
-	#renderViewer(width: number): string[] {
-		const termHeight = process.stdout.rows || 40;
+	#renderRow(ref: AgentRef, selected: boolean, width: number): string {
+		const cursor = selected ? theme.fg("accent", theme.nav.cursor) : " ";
+		const parts: string[] = [statusBadge(ref.status), theme.bold(replaceTabs(ref.id))];
+		parts.push(theme.fg("dim", ref.parentId ? `${ref.kind} · of ${ref.parentId}` : ref.kind));
+		const observed = this.#observableFor(ref.id);
+		const task = observed?.description ?? observed?.progress?.task;
+		if (task) {
+			parts.push(theme.fg("muted", sanitizeLine(task, TRUNCATE_LENGTHS.TITLE)));
+		}
+		const unread = this.#irc.unreadCount(ref.id);
+		if (unread > 0) {
+			parts.push(theme.fg("warning", `⧉ ${unread}`));
+		}
+		parts.push(theme.fg("dim", formatAge(Math.max(1, Math.round((Date.now() - ref.lastActivity) / 1000)))));
+		return truncateToWidth(` ${cursor} ${parts.join(theme.sep.dot)}`, Math.max(10, width - 1));
+	}
+
+	#handleTableInput(keyData: string): void {
+		if (matchesKey(keyData, "escape")) {
+			this.#onDone();
+			return;
+		}
+		if (keyData === "j" || matchesSelectDown(keyData)) {
+			if (this.#rows.length > 0) {
+				this.#selectedRow = Math.min(this.#selectedRow + 1, this.#rows.length - 1);
+			}
+			this.#requestRender();
+			return;
+		}
+		if (keyData === "k" || matchesSelectUp(keyData)) {
+			if (this.#rows.length > 0) {
+				this.#selectedRow = Math.max(this.#selectedRow - 1, 0);
+			}
+			this.#requestRender();
+			return;
+		}
+		if (matchesKey(keyData, "enter") || keyData === "\r" || keyData === "\n") {
+			const selected = this.#rows[this.#selectedRow];
+			if (selected) this.openChat(selected.id);
+			return;
+		}
+		if (keyData === "r") {
+			this.#reviveSelected();
+			return;
+		}
+		if (keyData === "x") {
+			this.#killSelected();
+			return;
+		}
+	}
+
+	#reviveSelected(): void {
+		const ref = this.#rows[this.#selectedRow];
+		if (!ref) return;
+		if (ref.status !== "parked") {
+			this.#notice = `Agent "${ref.id}" is ${ref.status} — only parked agents can be revived.`;
+			this.#requestRender();
+			return;
+		}
+		this.#notice = undefined;
+		// Fire-and-forget; failures surface as an inline notice
+		this.#lifecycle()
+			.ensureLive(ref.id)
+			.catch((error: unknown) => {
+				this.#notice = error instanceof Error ? error.message : String(error);
+				this.#requestRender();
+			});
+		this.#requestRender();
+	}
 
-		// Compute viewport: total height minus header chrome and footer chrome
-		// Header: border(1) + headerLines + border(1) = headerLines.length + 2
-		// Footer: spacer(1) + scrollInfo(1) + footerLines + border(1) = footerLines.length + 2
+	#killSelected(): void {
+		const ref = this.#rows[this.#selectedRow];
+		if (!ref) return;
+		this.#notice = undefined;
+		void (async () => {
+			try {
+				if (ref.status === "running" && ref.session) {
+					await ref.session.abort({ reason: USER_INTERRUPT_LABEL });
+				}
+				await this.#lifecycle().release(ref.id);
+			} catch (error) {
+				logger.warn("Agent hub: kill failed", { id: ref.id, error: String(error) });
+				this.#notice = error instanceof Error ? error.message : String(error);
+			}
+			this.#refreshRows();
+			this.#requestRender();
+		})();
+	}
+
+	// ========================================================================
+	// Chat view
+	// ========================================================================
+
+	#renderChat(width: number): string[] {
+		const termHeight = process.stdout.rows || 40;
+		const innerWidth = Math.max(20, width - 2);
+		const editorLines = this.#editor.render(innerWidth);
+		const noticeLine = this.#notice
+			? ` ${theme.fg("error", sanitizeLine(this.#notice, Math.max(10, width - 2)))}`
+			: undefined;
+		const footerLines = this.#buildChatFooterLines();
+
+		// Header: border + headerLines + border; footer: notice? + editor + footer + border
 		const headerChrome = this.#viewerHeaderLines.length + 2;
-		const footerChrome = this.#viewerFooterLines.length + 2;
+		const footerChrome = editorLines.length + footerLines.length + (noticeLine ? 1 : 0) + 1;
 		this.#viewportHeight = Math.max(5, termHeight - headerChrome - footerChrome);
 
-		// Clamp scroll offset
 		const maxScroll = Math.max(0, this.#renderedLines.length - this.#viewportHeight);
+		if (this.#wasAtBottom) this.#scrollOffset = maxScroll;
 		this.#scrollOffset = Math.max(0, Math.min(this.#scrollOffset, maxScroll));
 
 		const lines: string[] = [];
-
-		// --- Header ---
 		lines.push(...new DynamicBorder().render(width));
-		for (const hl of this.#viewerHeaderLines) {
-			lines.push(` ${hl}`);
+		for (const headerLine of this.#viewerHeaderLines) {
+			lines.push(` ${headerLine}`);
 		}
 		lines.push(...new DynamicBorder().render(width));
 
-		// --- Scrolled content viewport ---
-		const sv = new ScrollView(
+		const scrollView = new ScrollView(
 			this.#renderedLines.slice(this.#scrollOffset, this.#scrollOffset + this.#viewportHeight),
 			{
 				height: this.#viewportHeight,
@@ -239,31 +458,27 @@ export class SessionObserverOverlayComponent extends Container {
 				theme: { track: t => theme.fg("dim", t), thumb: t => theme.fg("accent", t) },
 			},
 		);
-		sv.setScrollOffset(this.#scrollOffset);
-		for (const row of sv.render(Math.max(1, width - 1))) lines.push(` ${row}`);
+		scrollView.setScrollOffset(this.#scrollOffset);
+		for (const row of scrollView.render(Math.max(1, width - 1))) lines.push(` ${row}`);
 
-		// --- Footer ---
-		lines.push("");
-		lines.push(` ${this.#viewerFooterLines[0] ?? ""}`);
-		for (let i = 1; i < this.#viewerFooterLines.length; i++) {
-			lines.push(` ${this.#viewerFooterLines[i]}`);
-		}
+		if (noticeLine) lines.push(noticeLine);
+		for (const editorLine of editorLines) lines.push(` ${editorLine}`);
+		lines.push(...footerLines);
 		lines.push(...new DynamicBorder().render(width));
-
 		return lines;
 	}
 
-	#buildBreadcrumb(session: ObservableSession | undefined): string {
-		const parts: string[] = ["Session Observer"];
-		for (const item of this.#navigationStack) {
-			parts.push(item.label);
-		}
-		if (session) parts.push(session.label);
-		return parts.join(" > ");
+	#buildChatFooterLines(): string[] {
+		const lines: string[] = [];
+		const observed = this.#chatAgentId ? this.#observableFor(this.#chatAgentId) : undefined;
+		const statsLine = this.#buildStatsLine(observed);
+		if (statsLine) lines.push(` ${statsLine}`);
+		lines.push(` ${theme.fg("dim", "Enter:send  Esc:back  empty input: j/k:scroll  Enter:expand  g/G:top/bottom")}`);
+		return lines;
 	}
 
-	#buildStatsLine(session: ObservableSession | undefined): string {
-		const progress = session?.progress;
+	#buildStatsLine(observed: ObservableSession | undefined): string {
+		const progress = observed?.progress;
 		if (!progress) return "";
 		const stats: string[] = [];
 		// Current per-turn context — match the status line's `<pct>%/<window>` gauge (e.g. `5.1%/1M`).
@@ -290,6 +505,212 @@ export class SessionObserverOverlayComponent extends Container {
 		return parts.join(theme.sep.dot);
 	}
 
+	/** Rebuild the chat header + transcript content lines */
+	#rebuildChatContent(): void {
+		const id = this.#chatAgentId;
+		const ref = id ? this.#registry.get(id) : undefined;
+
+		// Load transcript first so model info is available for the header
+		let messageEntries: SessionMessageEntry[] | null = null;
+		if (ref?.sessionFile) {
+			messageEntries = this.#loadTranscript(ref.sessionFile);
+		}
+
+		this.#viewerHeaderLines = [];
+		this.#viewerHeaderLines.push(theme.fg("accent", `Agent Hub > ${id ?? "?"}`));
+		if (ref) {
+			const observed = this.#observableFor(ref.id);
+			const model = observed?.progress?.resolvedModel ?? this.#transcriptCache?.model;
+			const kindTag = theme.fg("dim", ` ${ref.parentId ? `${ref.kind} · of ${ref.parentId}` : ref.kind}`);
+			const modelLabel = model ? theme.fg("muted", `${theme.sep.dot}${model}`) : "";
+			this.#viewerHeaderLines.push(`${theme.bold(ref.id)} ${statusBadge(ref.status)}${kindTag}${modelLabel}`);
+		}
+
+		const contentLines: string[] = [];
+		this.#viewerEntries = [];
+		if (!ref) {
+			contentLines.push(theme.fg("dim", "Agent no longer registered."));
+		} else if (!ref.sessionFile) {
+			contentLines.push(theme.fg("dim", "No session file available yet."));
+		} else if (!messageEntries) {
+			contentLines.push(theme.fg("dim", "Unable to read session file."));
+		} else if (messageEntries.length === 0) {
+			contentLines.push(theme.fg("dim", "No messages yet."));
+		} else {
+			this.#buildTranscriptLines(messageEntries, contentLines);
+		}
+		this.#renderedLines = contentLines;
+	}
+
+	#handleChatInput(keyData: string): void {
+		const editorEmpty = this.#editor.getText().trim() === "";
+
+		if (matchesKey(keyData, "escape")) {
+			if (!editorEmpty) {
+				this.#editor.setText("");
+				this.#requestRender();
+				return;
+			}
+			this.#closeChat();
+			return;
+		}
+
+		// Navigation mirrors the old observer overlay while the input is empty;
+		// once the user starts typing, the editor owns every key.
+		if (editorEmpty && this.#handleViewerNavigation(keyData)) {
+			return;
+		}
+
+		this.#editor.handleInput(keyData);
+		this.#requestRender();
+	}
+
+	#closeChat(): void {
+		this.#view = "table";
+		this.#chatAgentId = undefined;
+		this.#notice = undefined;
+		this.#detachLiveSession();
+		this.#refreshRows();
+		this.#requestRender();
+	}
+
+	#submitChatMessage(text: string): void {
+		const id = this.#chatAgentId;
+		const trimmed = text.trim();
+		if (!id || !trimmed) return;
+		this.#editor.setText("");
+		this.#notice = undefined;
+		void (async () => {
+			try {
+				// Revives a parked agent; returns the live session for running/idle.
+				const session = await this.#lifecycle().ensureLive(id);
+				this.#attachLiveSession();
+				// Steers a mid-turn agent; sends a normal prompt to an idle one.
+				await session.prompt(trimmed, { streamingBehavior: "steer" });
+			} catch (error) {
+				this.#notice = error instanceof Error ? error.message : String(error);
+			}
+			this.#scheduleChatRefresh();
+			this.#requestRender();
+		})();
+		this.#requestRender();
+	}
+
+	/** Viewer navigation (selection, paging, expand) for the chat transcript. Returns true when handled. */
+	#handleViewerNavigation(keyData: string): boolean {
+		const entryCount = this.#viewerEntries.length;
+
+		if (keyData === "j" || matchesSelectDown(keyData)) {
+			if (entryCount > 0) {
+				this.#selectedEntryIndex = Math.min(this.#selectedEntryIndex + 1, entryCount - 1);
+			}
+			this.#rebuildAndScroll();
+			return true;
+		}
+		if (keyData === "k" || matchesSelectUp(keyData)) {
+			if (entryCount > 0) {
+				this.#selectedEntryIndex = Math.max(this.#selectedEntryIndex - 1, 0);
+			}
+			this.#rebuildAndScroll();
+			return true;
+		}
+		if (matchesKey(keyData, "pageDown")) {
+			if (entryCount > 0) {
+				const prevIndex = this.#selectedEntryIndex;
+				this.#selectedEntryIndex = Math.min(this.#selectedEntryIndex + 5, entryCount - 1);
+				if (this.#selectedEntryIndex === prevIndex) {
+					this.#scrollOffset = Math.min(
+						this.#scrollOffset + PAGE_SIZE,
+						Math.max(0, this.#renderedLines.length - this.#viewportHeight),
+					);
+				}
+			} else {
+				this.#scrollOffset = Math.min(
+					this.#scrollOffset + PAGE_SIZE,
+					Math.max(0, this.#renderedLines.length - this.#viewportHeight),
+				);
+			}
+			this.#rebuildAndScroll();
+			return true;
+		}
+		if (matchesKey(keyData, "pageUp")) {
+			if (entryCount > 0) {
+				const prevIndex = this.#selectedEntryIndex;
+				this.#selectedEntryIndex = Math.max(this.#selectedEntryIndex - 5, 0);
+				if (this.#selectedEntryIndex === prevIndex) {
+					this.#scrollOffset = Math.max(this.#scrollOffset - PAGE_SIZE, 0);
+				}
+			} else {
+				this.#scrollOffset = Math.max(this.#scrollOffset - PAGE_SIZE, 0);
+			}
+			this.#rebuildAndScroll();
+			return true;
+		}
+		if (matchesKey(keyData, "enter") || keyData === "\r" || keyData === "\n") {
+			if (entryCount > 0 && this.#selectedEntryIndex < entryCount) {
+				if (this.#expandedEntries.has(this.#selectedEntryIndex)) {
+					this.#expandedEntries.delete(this.#selectedEntryIndex);
+				} else {
+					this.#expandedEntries.add(this.#selectedEntryIndex);
+				}
+				this.#rebuildAndScroll();
+			}
+			return true;
+		}
+		if (keyData === "G") {
+			if (entryCount > 0) this.#selectedEntryIndex = entryCount - 1;
+			this.#scrollOffset = Math.max(0, this.#renderedLines.length - this.#viewportHeight);
+			this.#rebuildAndScroll();
+			return true;
+		}
+		if (keyData === "g") {
+			this.#selectedEntryIndex = 0;
+			this.#scrollOffset = 0;
+			this.#rebuildAndScroll();
+			return true;
+		}
+		return false;
+	}
+
+	/** Rebuild transcript lines (which depend on selectedEntryIndex/expandedEntries) and scroll to selection */
+	#rebuildAndScroll(): void {
+		// Resume auto-scrolling once selection returns to the last entry
+		this.#wasAtBottom = this.#selectedEntryIndex >= this.#viewerEntries.length - 1;
+		this.#rebuildChatContent();
+		this.#scrollToSelectedEntry();
+		this.#requestRender();
+	}
+
+	#scrollToSelectedEntry(): void {
+		if (this.#viewerEntries.length === 0) return;
+		const entry = this.#viewerEntries[this.#selectedEntryIndex];
+		if (!entry) return;
+
+		const entryTop = entry.lineStart;
+		const entryBottom = entry.lineStart + entry.lineCount;
+
+		if (entry.lineCount >= this.#viewportHeight) {
+			// Entry taller than viewport: only snap when it's completely out of view.
+			if (this.#scrollOffset + this.#viewportHeight <= entryTop) {
+				this.#scrollOffset = Math.max(0, entryTop - 1);
+			} else if (this.#scrollOffset >= entryBottom) {
+				this.#scrollOffset = Math.max(0, entryBottom - this.#viewportHeight);
+			}
+		} else {
+			// Entry fits in viewport: ensure it's fully visible
+			if (entryTop < this.#scrollOffset) {
+				this.#scrollOffset = Math.max(0, entryTop - 1);
+			}
+			if (entryBottom > this.#scrollOffset + this.#viewportHeight) {
+				this.#scrollOffset = Math.max(0, entryBottom - this.#viewportHeight + 1);
+			}
+		}
+	}
+
+	// ========================================================================
+	// Transcript rendering (absorbed from the session observer overlay)
+	// ========================================================================
+
 	#buildTranscriptLines(messageEntries: SessionMessageEntry[], lines: string[]): void {
 		// Build a tool call ID -> tool result map
 		const toolResults = new Map<string, ToolResultMessage>();
@@ -308,7 +729,7 @@ export class SessionObserverOverlayComponent extends Container {
 				if (msg.content.length === 0 && msg.errorMessage && !isSilentAbort(msg.errorMessage)) {
 					const startLine = lines.length;
 					const isSelected = entryIndex === this.#selectedEntryIndex;
-					const cursor = isSelected ? theme.fg("accent", "▶") : " ";
+					const cursor = isSelected ? theme.fg("accent", theme.nav.cursor) : " ";
 					lines.push("");
 					const errorLines = msg.errorMessage.split("\n");
 					const maxWidth = contentWidth();
@@ -370,7 +791,7 @@ export class SessionObserverOverlayComponent extends Container {
 					const isSelected = entryIndex === this.#selectedEntryIndex;
 					const isExpanded = this.#expandedEntries.has(entryIndex);
 					const label = msg.role === "developer" ? "System" : "User";
-					const cursor = isSelected ? theme.fg("accent", "▶") : " ";
+					const cursor = isSelected ? theme.fg("accent", theme.nav.cursor) : " ";
 					lines.push("");
 					if (isExpanded) {
 						lines.push(`${cursor} ${theme.fg("dim", `[${label}]`)}`);
@@ -402,7 +823,7 @@ export class SessionObserverOverlayComponent extends Container {
 	}
 
 	#renderThinkingLines(lines: string[], thinking: string, expanded: boolean, selected: boolean): void {
-		const cursor = selected ? theme.fg("accent", "▶") : " ";
+		const cursor = selected ? theme.fg("accent", theme.nav.cursor) : " ";
 		const maxChars = expanded ? MAX_THINKING_CHARS_EXPANDED : MAX_THINKING_CHARS_COLLAPSED;
 		const truncated = thinking.length > maxChars;
 		const expandLabel = !expanded && truncated ? theme.fg("dim", " ↵") : "";
@@ -435,7 +856,7 @@ export class SessionObserverOverlayComponent extends Container {
 	}
 
 	#renderTextLines(lines: string[], text: string, expanded: boolean, selected: boolean): void {
-		const cursor = selected ? theme.fg("accent", "▶") : " ";
+		const cursor = selected ? theme.fg("accent", theme.nav.cursor) : " ";
 
 		lines.push("");
 		lines.push(`${cursor} ${theme.fg("muted", "Response")}`);
@@ -467,7 +888,7 @@ export class SessionObserverOverlayComponent extends Container {
 		expanded: boolean,
 		selected: boolean,
 	): void {
-		const cursor = selected ? theme.fg("accent", "▶") : " ";
+		const cursor = selected ? theme.fg("accent", theme.nav.cursor) : " ";
 		lines.push("");
 
 		// Tool call header
@@ -565,14 +986,16 @@ export class SessionObserverOverlayComponent extends Container {
 			case "ast_edit":
 				return args.path ? `path: ${args.path}` : "";
 			case "task": {
-				const tasks = args.tasks;
-				return Array.isArray(tasks) ? `${tasks.length} task(s)` : "";
+				const target = typeof args.agent === "string" ? args.agent : "";
+				const id = typeof args.id === "string" && args.id ? ` ${args.id}` : "";
+				return `${target}${id}`.trim();
 			}
 			default: {
 				const parts: string[] = [];
 				let total = 0;
-				for (const [key, value] of Object.entries(args)) {
+				for (const key in args) {
 					if (key.startsWith("_")) continue;
+					const value = args[key];
 					const v = typeof value === "string" ? value : JSON.stringify(value);
 					const entry = `${key}: ${replaceTabs(v ?? "")}`;
 					if (total + entry.length > MAX_TOOL_ARGS_CHARS) break;
@@ -592,7 +1015,7 @@ export class SessionObserverOverlayComponent extends Container {
 		const fromByte = this.#transcriptCache?.bytesRead ?? 0;
 		const result = readFileIncremental(sessionFile, fromByte);
 		if (!result) {
-			logger.debug("Session observer: failed to read session file", { path: sessionFile });
+			logger.debug("Agent hub: failed to read session file", { path: sessionFile });
 			return this.#transcriptCache?.entries ?? null;
 		}
 
@@ -627,213 +1050,9 @@ export class SessionObserverOverlayComponent extends Container {
 		}
 		return this.#transcriptCache.entries;
 	}
-
-	#navigateBack(): boolean {
-		if (this.#navigationStack.length === 0) return false;
-		const prev = this.#navigationStack.pop()!;
-		this.#selectedSessionId = prev.sessionId;
-		this.#transcriptCache = undefined;
-		this.#scrollOffset = 0;
-		this.#selectedEntryIndex = 0;
-		this.#expandedEntries.clear();
-		this.#rebuildViewerContent();
-		return true;
-	}
-
-	handleInput(keyData: string): void {
-		// Ctrl+S (observe key) always closes the overlay
-		for (const key of this.#observeKeys) {
-			if (matchesKey(keyData, key)) {
-				this.#onDone();
-				return;
-			}
-		}
-
-		this.#handleViewerInput(keyData);
-	}
-
-	#handleViewerInput(keyData: string): void {
-		const entryCount = this.#viewerEntries.length;
-
-		// Escape — pop breadcrumb navigation or close overlay
-		if (matchesKey(keyData, "escape")) {
-			if (!this.#navigateBack()) {
-				this.#onDone();
-			}
-			return;
-		}
-
-		// j / down — move selection down
-		if (keyData === "j" || matchesSelectDown(keyData)) {
-			if (entryCount > 0) {
-				this.#selectedEntryIndex = Math.min(this.#selectedEntryIndex + 1, entryCount - 1);
-			}
-			this.#rebuildAndScroll();
-			return;
-		}
-
-		// k / up — move selection up
-		if (keyData === "k" || matchesSelectUp(keyData)) {
-			if (entryCount > 0) {
-				this.#selectedEntryIndex = Math.max(this.#selectedEntryIndex - 1, 0);
-			}
-			this.#rebuildAndScroll();
-			return;
-		}
-
-		// Page Down
-		if (matchesKey(keyData, "pageDown")) {
-			if (entryCount > 0) {
-				const prevIndex = this.#selectedEntryIndex;
-				this.#selectedEntryIndex = Math.min(this.#selectedEntryIndex + 5, entryCount - 1);
-				// If selection didn't move (bottom of list or single oversized entry), fall back to line scroll
-				if (this.#selectedEntryIndex === prevIndex) {
-					this.#scrollOffset = Math.min(
-						this.#scrollOffset + PAGE_SIZE,
-						Math.max(0, this.#renderedLines.length - this.#viewportHeight),
-					);
-				}
-			} else {
-				this.#scrollOffset = Math.min(
-					this.#scrollOffset + PAGE_SIZE,
-					Math.max(0, this.#renderedLines.length - this.#viewportHeight),
-				);
-			}
-			this.#rebuildAndScroll();
-			return;
-		}
-
-		// Page Up
-		if (matchesKey(keyData, "pageUp")) {
-			if (entryCount > 0) {
-				const prevIndex = this.#selectedEntryIndex;
-				this.#selectedEntryIndex = Math.max(this.#selectedEntryIndex - 5, 0);
-				// If selection didn't move (top of list or single oversized entry), fall back to line scroll
-				if (this.#selectedEntryIndex === prevIndex) {
-					this.#scrollOffset = Math.max(this.#scrollOffset - PAGE_SIZE, 0);
-				}
-			} else {
-				this.#scrollOffset = Math.max(this.#scrollOffset - PAGE_SIZE, 0);
-			}
-			this.#rebuildAndScroll();
-			return;
-		}
-
-		// Enter — toggle expand/collapse, or dive into nested session
-		if (matchesKey(keyData, "enter") || keyData === "\r" || keyData === "\n") {
-			if (entryCount > 0 && this.#selectedEntryIndex < entryCount) {
-				// Toggle expand/collapse
-				if (this.#expandedEntries.has(this.#selectedEntryIndex)) {
-					this.#expandedEntries.delete(this.#selectedEntryIndex);
-				} else {
-					this.#expandedEntries.add(this.#selectedEntryIndex);
-				}
-				this.#rebuildAndScroll();
-			}
-			return;
-		}
-
-		// G — jump to bottom
-		if (keyData === "G") {
-			if (entryCount > 0) this.#selectedEntryIndex = entryCount - 1;
-			this.#scrollOffset = Math.max(0, this.#renderedLines.length - this.#viewportHeight);
-			this.#rebuildAndScroll();
-			return;
-		}
-
-		// g — jump to top
-		if (keyData === "g") {
-			this.#selectedEntryIndex = 0;
-			this.#scrollOffset = 0;
-			this.#rebuildAndScroll();
-			return;
-		}
-
-		// ] / → / Tab — next sub-agent session
-		if (keyData === "]" || matchesKey(keyData, "tab") || matchesKey(keyData, "right")) {
-			this.#cycleSession(1);
-			return;
-		}
-
-		// [ / ← / Shift+Tab — previous sub-agent session
-		if (keyData === "[" || matchesKey(keyData, "shift+tab") || matchesKey(keyData, "left")) {
-			this.#cycleSession(-1);
-			return;
-		}
-	}
-
-	/** Get the ordered list of sub-agent session IDs (excludes main) */
-	#getSubagentSessionIds(): string[] {
-		return this.#registry
-			.getSessions()
-			.filter(s => s.kind === "subagent")
-			.map(s => s.id);
-	}
-
-	/** Cycle to next (+1) or previous (-1) sub-agent session */
-	#cycleSession(direction: 1 | -1): void {
-		const ids = this.#getSubagentSessionIds();
-		if (ids.length <= 1) return;
-		const currentIdx = ids.indexOf(this.#selectedSessionId ?? "");
-		if (currentIdx < 0) return;
-		const nextIdx = (currentIdx + direction + ids.length) % ids.length;
-		this.#selectedSessionId = ids[nextIdx];
-		this.#transcriptCache = undefined;
-		this.#scrollOffset = 0;
-		this.#selectedEntryIndex = 0;
-		this.#expandedEntries.clear();
-		this.#wasAtBottom = true;
-		this.#rebuildViewerContent();
-		// Auto-scroll to bottom: select last entry
-		if (this.#viewerEntries.length > 0) {
-			this.#selectedEntryIndex = this.#viewerEntries.length - 1;
-			this.#wasAtBottom = true;
-			this.#rebuildViewerContent();
-		}
-	}
-
-	/** Rebuild transcript lines (which depend on selectedEntryIndex/expandedEntries) and scroll to selection */
-	#rebuildAndScroll(): void {
-		// Resume auto-scrolling once selection returns to the last entry
-		this.#wasAtBottom = this.#selectedEntryIndex >= this.#viewerEntries.length - 1;
-		this.#rebuildViewerContent();
-		this.#scrollToSelectedEntry();
-	}
-
-	#scrollToSelectedEntry(): void {
-		if (this.#viewerEntries.length === 0) return;
-		const entry = this.#viewerEntries[this.#selectedEntryIndex];
-		if (!entry) return;
-
-		const entryTop = entry.lineStart;
-		const entryBottom = entry.lineStart + entry.lineCount;
-
-		if (entry.lineCount >= this.#viewportHeight) {
-			// Entry taller than viewport: only snap when it's completely out of view.
-			// If the viewport overlaps the entry at all, the user may be paging within it.
-			if (this.#scrollOffset + this.#viewportHeight <= entryTop) {
-				// Viewport is entirely above the entry — snap to entry top
-				this.#scrollOffset = Math.max(0, entryTop - 1);
-			} else if (this.#scrollOffset >= entryBottom) {
-				// Viewport is entirely below the entry — snap to show entry bottom
-				this.#scrollOffset = Math.max(0, entryBottom - this.#viewportHeight);
-			}
-			// Otherwise: viewport overlaps the entry — don't override manual scroll
-		} else {
-			// Entry fits in viewport: ensure it's fully visible
-			if (entryTop < this.#scrollOffset) {
-				this.#scrollOffset = Math.max(0, entryTop - 1);
-			}
-			if (entryBottom > this.#scrollOffset + this.#viewportHeight) {
-				this.#scrollOffset = Math.max(0, entryBottom - this.#viewportHeight + 1);
-			}
-		}
-	}
 }
 
-// Sync helpers for render path
-import * as fs from "node:fs";
-
+// Sync helper for the render path
 function readFileIncremental(filePath: string, fromByte: number): { text: string; newSize: number } | null {
 	try {
 		const stat = fs.statSync(filePath);