@oh-my-pi/pi-coding-agent 14.4.3 → 14.5.0

package/src/modes/components/session-observer-overlay.ts

@@ -2,248 +2,276 @@
  * Session observer overlay component.
  *
  * Picker mode: lists main + active subagent sessions with live status.
- * Viewer mode: renders a read-only transcript of the selected subagent's session
- *   by reading its JSONL session file — shows thinking, text, tool calls, results.
+ * 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.
  *
  * Lifecycle:
  *   - shortcut opens picker
  *   - Enter on a subagent -> viewer
- *   - shortcut while in viewer -> back to picker
- *   - Esc from viewer -> back to picker
+ *   - 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)
  */
-import type { AssistantMessage, ToolResultMessage } from "@oh-my-pi/pi-ai";
-import { Container, Markdown, matchesKey, type SelectItem, SelectList, Spacer, Text } from "@oh-my-pi/pi-tui";
+import type { ToolResultMessage } from "@oh-my-pi/pi-ai";
+import { Container, Markdown, type MarkdownTheme, matchesKey } from "@oh-my-pi/pi-tui";
 import { formatDuration, formatNumber, logger } from "@oh-my-pi/pi-utils";
 import type { KeyId } from "../../config/keybindings";
 import type { SessionMessageEntry } from "../../session/session-manager";
 import { parseSessionEntries } from "../../session/session-manager";
-import { replaceTabs, shortenPath, truncateToWidth } from "../../tools/render-utils";
+import { PREVIEW_LIMITS, replaceTabs, TRUNCATE_LENGTHS, truncateToWidth } from "../../tools/render-utils";
 import type { ObservableSession, SessionObserverRegistry } from "../session-observer-registry";
-import { getMarkdownTheme, getSelectListTheme, theme } from "../theme/theme";
+import { getMarkdownTheme, theme } from "../theme/theme";
 import { DynamicBorder } from "./dynamic-border";
 
-type Mode = "picker" | "viewer";
-
-/** Max thinking characters to show (long thinking can be huge) */
-const MAX_THINKING_CHARS = 600;
+/** Max thinking characters in collapsed state */
+const MAX_THINKING_CHARS_COLLAPSED = 200;
+/** Max thinking characters in expanded state */
+const MAX_THINKING_CHARS_EXPANDED = 4000;
 /** Max tool args characters to display */
-const MAX_TOOL_ARGS_CHARS = 200;
-/** Max tool result text to display */
-const MAX_TOOL_RESULT_CHARS = 300;
+const MAX_TOOL_ARGS_CHARS = 500;
+/** Lines per page for PageUp/PageDown */
+const PAGE_SIZE = 15;
+/** Left indent for content under entry headers */
+const INDENT = "    ";
+
+/** Compute the max content width for the current terminal, accounting for indent and chrome. */
+function contentWidth(indent = INDENT): number {
+	return Math.max(TRUNCATE_LENGTHS.SHORT, (process.stdout.columns || 80) - indent.length - 2);
+}
+
+/** Sanitize a line for TUI display: replace tabs, then truncate to viewport width. */
+function sanitizeLine(text: string, maxWidth?: number): string {
+	return truncateToWidth(replaceTabs(text), maxWidth ?? contentWidth());
+}
+
+/** Represents a rendered entry in the viewer for selection/expand tracking */
+interface ViewerEntry {
+	lineStart: number;
+	lineCount: number;
+	kind: "thinking" | "text" | "toolCall" | "user";
+}
+
+/** Breadcrumb item for nested session navigation */
+interface BreadcrumbItem {
+	sessionId: string;
+	label: string;
+	sessionFile: string;
+}
 
 export class SessionObserverOverlayComponent extends Container {
 	#registry: SessionObserverRegistry;
 	#onDone: () => void;
-	#mode: Mode = "picker";
-	#selectList: SelectList;
-	#viewerContainer: Container;
 	#selectedSessionId?: string;
 	#observeKeys: KeyId[];
-	/** Cached parsed transcript per session file to avoid reparsing on every refresh */
-	#transcriptCache?: { path: string; bytesRead: number; entries: SessionMessageEntry[] };
-	/** Live stats text component, placed after transcript to avoid above-viewport diffs */
-	#statsText?: Text;
+	#transcriptCache?: { path: string; bytesRead: number; entries: SessionMessageEntry[]; model?: string };
+
+	// Scroll state
+	#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[]) {
 		super();
 		this.#registry = registry;
 		this.#onDone = onDone;
 		this.#observeKeys = observeKeys;
-		this.#selectList = new SelectList([], 0, getSelectListTheme());
-		this.#viewerContainer = new Container();
-
-		this.#setupPicker();
-	}
-
-	#setupPicker(): void {
-		this.#mode = "picker";
-		this.children = [];
 
-		this.addChild(new DynamicBorder());
-		this.addChild(new Text(theme.bold(theme.fg("accent", "Session Observer")), 1, 0));
-		this.addChild(new Spacer(1));
-
-		const items = this.#buildPickerItems();
-		this.#selectList = new SelectList(items, Math.min(items.length, 12), getSelectListTheme());
-
-		this.#selectList.onSelect = item => {
-			if (item.value === "main") {
-				this.#onDone();
-				return;
-			}
-			this.#selectedSessionId = item.value;
+		// 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.#selectList.onCancel = () => {
-			this.#onDone();
-		};
+	/** 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];
+	}
 
-		this.addChild(this.#selectList);
-		this.addChild(new DynamicBorder());
+	override render(width: number): string[] {
+		return this.#renderViewer(width);
 	}
 
 	#setupViewer(): void {
-		this.#mode = "viewer";
 		this.children = [];
-		this.#viewerContainer = new Container();
-		this.#statsText = new Text("", 1, 0);
-		this.#refreshViewer();
-
-		this.addChild(new DynamicBorder());
-		this.addChild(this.#viewerContainer);
-		this.addChild(new Spacer(1));
-		this.addChild(this.#statsText);
-		this.addChild(new Text(theme.fg("dim", "Esc: back to picker  |  Ctrl+S: back to picker"), 1, 0));
-		this.addChild(new DynamicBorder());
+		this.#scrollOffset = 0;
+		this.#selectedEntryIndex = 0;
+		this.#expandedEntries.clear();
+		this.#wasAtBottom = true;
+		this.#rebuildViewerContent();
+		// Auto-scroll to bottom and select last entry on init
+		if (this.#viewerEntries.length > 0) {
+			this.#selectedEntryIndex = this.#viewerEntries.length - 1;
+			this.#wasAtBottom = true;
+			this.#rebuildViewerContent();
+		}
 	}
 
 	/** Rebuild content from live registry data */
 	refreshFromRegistry(): void {
-		if (this.#mode === "picker") {
-			this.#refreshPickerItems();
-		} else if (this.#mode === "viewer" && this.#selectedSessionId) {
-			this.#refreshViewer();
+		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();
 		}
 	}
 
-	#refreshPickerItems(): void {
-		// Preserve selection across refresh by matching on value
-		const previousValue = this.#selectList.getSelectedItem()?.value;
-
-		const items = this.#buildPickerItems();
-		const newList = new SelectList(items, Math.min(items.length, 12), getSelectListTheme());
-		newList.onSelect = this.#selectList.onSelect;
-		newList.onCancel = this.#selectList.onCancel;
+	/** 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);
 
-		if (previousValue) {
-			const newIndex = items.findIndex(i => i.value === previousValue);
-			if (newIndex >= 0) newList.setSelectedIndex(newIndex);
+		// Load transcript first so model info is available for header
+		let messageEntries: SessionMessageEntry[] | null = null;
+		if (session?.sessionFile) {
+			messageEntries = this.#loadTranscript(session.sessionFile);
 		}
 
-		const idx = this.children.indexOf(this.#selectList);
-		if (idx >= 0) {
-			this.children[idx] = newList;
+		// 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}`);
 		}
-		this.#selectList = newList;
-	}
 
-	#refreshViewer(): void {
-		this.#viewerContainer.clear();
+		// Content
+		const contentLines: string[] = [];
+		this.#viewerEntries = [];
 
-		const sessions = this.#registry.getSessions();
-		const session = sessions.find(s => s.id === this.#selectedSessionId);
 		if (!session) {
-			this.#viewerContainer.addChild(new Text(theme.fg("dim", "Session no longer available."), 1, 0));
-			this.#updateStats(undefined);
-			return;
+			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."));
+		} else {
+			this.#buildTranscriptLines(messageEntries, contentLines);
+		}
+		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  [/]/\u2190\u2192:cycle agents  Esc/Ctrl+S:close  g/G:top/bottom"),
+		);
+
+		// Auto-scroll to bottom if we were at bottom
+		if (this.#wasAtBottom) {
+			this.#scrollOffset = Math.max(0, contentLines.length - this.#viewportHeight);
 		}
-
-		this.#renderSessionHeader(session);
-		this.#renderSessionTranscript(session);
-		this.#updateStats(session);
 	}
 
-	#renderSessionHeader(session: ObservableSession): void {
-		const c = this.#viewerContainer;
-
-		// Header: label + status + [agent]
-		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}]`) : "";
-		c.addChild(new Text(`${theme.bold(theme.fg("accent", session.label))}  ${statusText}${agentTag}`, 1, 0));
+	/** Produce the final viewer output for the overlay system */
+	#renderViewer(width: number): string[] {
+		const termHeight = process.stdout.rows || 40;
 
-		if (session.description) {
-			c.addChild(new Text(theme.fg("muted", session.description), 1, 0));
-		}
+		// 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
+		const headerChrome = this.#viewerHeaderLines.length + 2;
+		const footerChrome = this.#viewerFooterLines.length + 2;
+		this.#viewportHeight = Math.max(5, termHeight - headerChrome - footerChrome);
 
-		if (session.sessionFile) {
-			c.addChild(new Text(theme.fg("dim", `Session: ${shortenPath(session.sessionFile)}`), 1, 0));
-		}
+		// Clamp scroll offset
+		const maxScroll = Math.max(0, this.#renderedLines.length - this.#viewportHeight);
+		this.#scrollOffset = Math.max(0, Math.min(this.#scrollOffset, maxScroll));
 
-		c.addChild(new DynamicBorder());
-	}
+		const lines: string[] = [];
 
-	/** Update live stats in-place (below transcript, within viewport). */
-	#updateStats(session: ObservableSession | undefined): void {
-		if (!this.#statsText) return;
-		const progress = session?.progress;
-		if (!progress) {
-			this.#statsText.setText("");
-			return;
+		// --- Header ---
+		lines.push(...new DynamicBorder().render(width));
+		for (const hl of this.#viewerHeaderLines) {
+			lines.push(` ${hl}`);
 		}
-		const stats: string[] = [];
-		if (progress.toolCount > 0) stats.push(`${formatNumber(progress.toolCount)} tools`);
-		if (progress.tokens > 0) stats.push(`${formatNumber(progress.tokens)} tokens`);
-		if (progress.durationMs > 0) stats.push(formatDuration(progress.durationMs));
-		this.#statsText.setText(stats.length > 0 ? theme.fg("dim", stats.join(theme.sep.dot)) : "");
-	}
+		lines.push(...new DynamicBorder().render(width));
 
-	/** Incrementally read and parse the session JSONL, caching already-parsed entries. */
-	#loadTranscript(sessionFile: string): SessionMessageEntry[] | null {
-		// Invalidate cache if session file changed (e.g. switched to different subagent)
-		if (this.#transcriptCache && this.#transcriptCache.path !== sessionFile) {
-			this.#transcriptCache = undefined;
+		// --- Scrolled content viewport ---
+		const visibleLines = this.#renderedLines.slice(this.#scrollOffset, this.#scrollOffset + this.#viewportHeight);
+		for (const vl of visibleLines) {
+			lines.push(` ${vl}`);
 		}
-
-		const fromByte = this.#transcriptCache?.bytesRead ?? 0;
-		const result = readFileIncremental(sessionFile, fromByte);
-		if (!result) {
-			logger.debug("Session observer: failed to read session file", { path: sessionFile });
-			return this.#transcriptCache?.entries ?? null;
+		// Pad to fill viewport if content is shorter
+		const pad = this.#viewportHeight - visibleLines.length;
+		for (let i = 0; i < pad; i++) {
+			lines.push("");
 		}
 
-		// File shrank (compaction or pruning rewrote it) — invalidate and re-read from scratch
-		if (result.newSize < fromByte) {
-			this.#transcriptCache = undefined;
-			return this.#loadTranscript(sessionFile);
-		}
-
-		if (!this.#transcriptCache) {
-			this.#transcriptCache = { path: sessionFile, bytesRead: 0, entries: [] };
+		// --- Footer ---
+		const scrollInfo =
+			this.#renderedLines.length > this.#viewportHeight
+				? ` ${theme.fg("dim", `[${this.#scrollOffset + 1}-${Math.min(this.#scrollOffset + this.#viewportHeight, this.#renderedLines.length)}/${this.#renderedLines.length}]`)}`
+				: "";
+		lines.push("");
+		lines.push(` ${this.#viewerFooterLines[0] ?? ""}${scrollInfo}`);
+		for (let i = 1; i < this.#viewerFooterLines.length; i++) {
+			lines.push(` ${this.#viewerFooterLines[i]}`);
 		}
+		lines.push(...new DynamicBorder().render(width));
 
-		// Parse only new bytes, but only up to the last complete line.
-		// A partial trailing record (mid-write) must not be consumed —
-		// we leave those bytes for the next refresh.
-		if (result.text.length > 0) {
-			const lastNewline = result.text.lastIndexOf("\n");
-			if (lastNewline >= 0) {
-				const completeChunk = result.text.slice(0, lastNewline + 1);
-				const newEntries = parseSessionEntries(completeChunk);
-				for (const entry of newEntries) {
-					if (entry.type === "message") {
-						this.#transcriptCache.entries.push(entry as SessionMessageEntry);
-					}
-				}
-				this.#transcriptCache.bytesRead = fromByte + Buffer.byteLength(completeChunk, "utf-8");
-			}
-			// If no newline found, the entire chunk is partial — leave bytesRead unchanged
-		}
-		return this.#transcriptCache.entries;
+		return lines;
 	}
 
-	#renderSessionTranscript(session: ObservableSession): void {
-		const c = this.#viewerContainer;
-
-		if (!session.sessionFile) {
-			c.addChild(new Text(theme.fg("dim", "No session file available yet."), 1, 0));
-			return;
+	#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(" > ");
+	}
 
-		const messageEntries = this.#loadTranscript(session.sessionFile);
-		if (!messageEntries) {
-			c.addChild(new Text(theme.fg("dim", "Unable to read session file."), 1, 0));
-			return;
-		}
-		if (messageEntries.length === 0) {
-			c.addChild(new Text(theme.fg("dim", "No messages yet."), 1, 0));
-			return;
-		}
+	#buildStatsLine(session: ObservableSession | undefined): string {
+		const progress = session?.progress;
+		if (!progress) return "";
+		const stats: string[] = [];
+		if (progress.toolCount > 0) stats.push(`${formatNumber(progress.toolCount)} tools`);
+		if (progress.tokens > 0) stats.push(`${formatNumber(progress.tokens)} tokens`);
+		if (progress.durationMs > 0) stats.push(formatDuration(progress.durationMs));
+		return stats.length > 0 ? theme.fg("dim", stats.join(theme.sep.dot)) : "";
+	}
 
-		// Build a tool call ID -> tool result map for matching
+	#buildTranscriptLines(messageEntries: SessionMessageEntry[], lines: string[]): void {
+		// Build a tool call ID -> tool result map
 		const toolResults = new Map<string, ToolResultMessage>();
 		for (const entry of messageEntries) {
 			if (entry.message.role === "toolResult") {
@@ -251,13 +279,65 @@ export class SessionObserverOverlayComponent extends Container {
 			}
 		}
 
+		let entryIndex = 0;
 		for (const entry of messageEntries) {
 			const msg = entry.message;
 
 			if (msg.role === "assistant") {
-				this.#renderAssistantMessage(c, msg, toolResults);
+				// Handle error messages with empty content
+				if (msg.content.length === 0 && msg.errorMessage) {
+					const startLine = lines.length;
+					const isSelected = entryIndex === this.#selectedEntryIndex;
+					const cursor = isSelected ? theme.fg("accent", "▶") : " ";
+					lines.push("");
+					const errorLines = msg.errorMessage.split("\n");
+					const maxWidth = contentWidth();
+					lines.push(`${cursor} ${theme.fg("error", `✗ Error: ${sanitizeLine(errorLines[0], maxWidth)}`)}`);
+					for (let i = 1; i < errorLines.length; i++) {
+						lines.push(`${INDENT}${theme.fg("error", sanitizeLine(errorLines[i], maxWidth))}`);
+					}
+					this.#viewerEntries.push({ lineStart: startLine, lineCount: lines.length - startLine, kind: "text" });
+					entryIndex++;
+				} else {
+					for (const content of msg.content) {
+						if (content.type === "thinking" && content.thinking.trim()) {
+							const startLine = lines.length;
+							const isExpanded = this.#expandedEntries.has(entryIndex);
+							const isSelected = entryIndex === this.#selectedEntryIndex;
+							this.#renderThinkingLines(lines, content.thinking.trim(), isExpanded, isSelected);
+							this.#viewerEntries.push({
+								lineStart: startLine,
+								lineCount: lines.length - startLine,
+								kind: "thinking",
+							});
+							entryIndex++;
+						} else if (content.type === "text" && content.text.trim()) {
+							const startLine = lines.length;
+							const isExpanded = this.#expandedEntries.has(entryIndex);
+							const isSelected = entryIndex === this.#selectedEntryIndex;
+							this.#renderTextLines(lines, content.text.trim(), isExpanded, isSelected);
+							this.#viewerEntries.push({
+								lineStart: startLine,
+								lineCount: lines.length - startLine,
+								kind: "text",
+							});
+							entryIndex++;
+						} else if (content.type === "toolCall") {
+							const startLine = lines.length;
+							const isExpanded = this.#expandedEntries.has(entryIndex);
+							const isSelected = entryIndex === this.#selectedEntryIndex;
+							const result = toolResults.get(content.id);
+							this.#renderToolCallLines(lines, content, result, isExpanded, isSelected);
+							this.#viewerEntries.push({
+								lineStart: startLine,
+								lineCount: lines.length - startLine,
+								kind: "toolCall",
+							});
+							entryIndex++;
+						}
+					}
+				}
 			} else if (msg.role === "user" || msg.role === "developer") {
-				// Show user/developer messages briefly
 				const text =
 					typeof msg.content === "string"
 						? msg.content
@@ -266,86 +346,176 @@ export class SessionObserverOverlayComponent extends Container {
 								.map(b => b.text)
 								.join("\n");
 				if (text.trim()) {
+					const startLine = lines.length;
+					const isSelected = entryIndex === this.#selectedEntryIndex;
+					const isExpanded = this.#expandedEntries.has(entryIndex);
 					const label = msg.role === "developer" ? "System" : "User";
-					c.addChild(new Spacer(1));
-					c.addChild(
-						new Text(
-							`${theme.fg("dim", `[${label}]`)} ${theme.fg("muted", truncateToWidth(text.trim(), 80))}`,
-							1,
-							0,
-						),
-					);
+					const cursor = isSelected ? theme.fg("accent", "▶") : " ";
+					lines.push("");
+					if (isExpanded) {
+						lines.push(`${cursor} ${theme.fg("dim", `[${label}]`)}`);
+						const mdLines = this.#renderMarkdownToLines(text.trim());
+						for (const ml of mdLines) {
+							lines.push(ml);
+						}
+					} else {
+						const firstLine = text.trim().split("\n")[0];
+						const totalLines = text.trim().split("\n").length;
+						const hint = totalLines > 1 ? theme.fg("dim", ` (${totalLines} lines)`) : "";
+						lines.push(
+							`${cursor} ${theme.fg("dim", `[${label}]`)} ${theme.fg("muted", sanitizeLine(firstLine, TRUNCATE_LENGTHS.TITLE))}${hint}`,
+						);
+					}
+					this.#viewerEntries.push({ lineStart: startLine, lineCount: lines.length - startLine, kind: "user" });
+					entryIndex++;
 				}
 			}
-			// toolResult entries are rendered inline with their tool calls above
 		}
 	}
 
-	#renderAssistantMessage(c: Container, msg: AssistantMessage, toolResults: Map<string, ToolResultMessage>): void {
-		for (const content of msg.content) {
-			if (content.type === "thinking" && content.thinking.trim()) {
-				const thinking = content.thinking.trim();
-				c.addChild(new Spacer(1));
-				if (thinking.length > MAX_THINKING_CHARS) {
-					// Show truncated thinking as markdown for proper formatting
-					const truncated = `${thinking.slice(0, MAX_THINKING_CHARS)}...`;
-					c.addChild(
-						new Markdown(truncated, 1, 0, getMarkdownTheme(), {
-							color: (t: string) => theme.fg("thinkingText", t),
-							italic: true,
-						}),
-					);
-				} else {
-					c.addChild(
-						new Markdown(thinking, 1, 0, getMarkdownTheme(), {
-							color: (t: string) => theme.fg("thinkingText", t),
-							italic: true,
-						}),
-					);
-				}
-			} else if (content.type === "text" && content.text.trim()) {
-				c.addChild(new Spacer(1));
-				c.addChild(new Markdown(content.text.trim(), 1, 0, getMarkdownTheme()));
-			} else if (content.type === "toolCall") {
-				this.#renderToolCall(c, content, toolResults);
+	/** Render markdown text into indented lines using the theme's markdown renderer */
+	#renderMarkdownToLines(text: string, indent: string = INDENT): string[] {
+		const width = Math.max(40, (process.stdout.columns || 80) - indent.length - 4);
+		const md = new Markdown(text, 0, 0, this.#mdTheme);
+		const rendered = md.render(width);
+		return rendered.map(line => `${indent}${line.trimEnd()}`);
+	}
+
+	#renderThinkingLines(lines: string[], thinking: string, expanded: boolean, selected: boolean): void {
+		const cursor = selected ? theme.fg("accent", "▶") : " ";
+		const maxChars = expanded ? MAX_THINKING_CHARS_EXPANDED : MAX_THINKING_CHARS_COLLAPSED;
+		const truncated = thinking.length > maxChars;
+		const expandLabel = !expanded && truncated ? theme.fg("dim", " ↵") : "";
+
+		lines.push("");
+		lines.push(`${cursor} ${theme.fg("dim", "💭 Thinking")}${expandLabel}`);
+
+		const displayText = truncated ? `${thinking.slice(0, maxChars)}...` : thinking;
+		if (expanded) {
+			// Expanded thinking: render as markdown for readable formatting
+			const mdLines = this.#renderMarkdownToLines(displayText);
+			const maxLines = 100;
+			for (let i = 0; i < Math.min(mdLines.length, maxLines); i++) {
+				lines.push(mdLines[i]);
+			}
+			if (mdLines.length > maxLines) {
+				lines.push(`${INDENT}${theme.fg("dim", `... ${mdLines.length - maxLines} more lines`)}`);
+			}
+		} else {
+			// Collapsed thinking: brief italic preview
+			const thinkingLines = displayText.split("\n");
+			const maxLines = PREVIEW_LIMITS.COLLAPSED_LINES;
+			for (let i = 0; i < Math.min(thinkingLines.length, maxLines); i++) {
+				lines.push(`${INDENT}${theme.fg("thinkingText", sanitizeLine(thinkingLines[i]))}`);
+			}
+			if (thinkingLines.length > maxLines) {
+				lines.push(`${INDENT}${theme.fg("dim", `... ${thinkingLines.length - maxLines} more lines`)}`);
 			}
 		}
 	}
 
-	#renderToolCall(
-		c: Container,
+	#renderTextLines(lines: string[], text: string, expanded: boolean, selected: boolean): void {
+		const cursor = selected ? theme.fg("accent", "▶") : " ";
+
+		lines.push("");
+		lines.push(`${cursor} ${theme.fg("muted", "Response")}`);
+
+		if (expanded) {
+			// Expanded: full markdown rendering
+			const mdLines = this.#renderMarkdownToLines(text);
+			for (const ml of mdLines) {
+				lines.push(ml);
+			}
+		} else {
+			// Collapsed: first few lines as plain text
+			const textLines = text.split("\n");
+			const maxLines = PREVIEW_LIMITS.COLLAPSED_LINES;
+			const maxWidth = contentWidth();
+			for (let i = 0; i < Math.min(textLines.length, maxLines); i++) {
+				lines.push(`${INDENT}${sanitizeLine(textLines[i], maxWidth)}`);
+			}
+			if (textLines.length > maxLines) {
+				lines.push(`${INDENT}${theme.fg("dim", `... ${textLines.length - maxLines} more lines`)}`);
+			}
+		}
+	}
+
+	#renderToolCallLines(
+		lines: string[],
 		call: { id: string; name: string; arguments: Record<string, unknown>; intent?: string },
-		toolResults: Map<string, ToolResultMessage>,
+		result: ToolResultMessage | undefined,
+		expanded: boolean,
+		selected: boolean,
 	): void {
-		c.addChild(new Spacer(1));
-
-		// Tool call header with intent
-		const intentStr = call.intent ? theme.fg("dim", ` ${truncateToWidth(call.intent, 50)}`) : "";
-		c.addChild(new Text(`${theme.fg("accent", "▸")} ${theme.bold(theme.fg("muted", call.name))}${intentStr}`, 1, 0));
-
-		// Key arguments (skip very long ones, show summary)
-		const argEntries = Object.entries(call.arguments);
-		if (argEntries.length > 0) {
-			const argSummary = this.#formatToolArgs(call.name, call.arguments);
-			if (argSummary) {
-				c.addChild(new Text(`  ${theme.fg("dim", argSummary)}`, 1, 0));
-			}
+		const cursor = selected ? theme.fg("accent", "▶") : " ";
+		lines.push("");
+
+		// Tool call header
+		const intentStr = call.intent ? theme.fg("dim", ` ${sanitizeLine(call.intent, TRUNCATE_LENGTHS.SHORT)}`) : "";
+		lines.push(`${cursor} ${theme.fg("accent", "\u25B8")} ${theme.bold(theme.fg("muted", call.name))}${intentStr}`);
+
+		// Key arguments
+		const argSummary = this.#formatToolArgs(call.name, call.arguments);
+		if (argSummary) {
+			lines.push(`${INDENT}${theme.fg("dim", sanitizeLine(argSummary, contentWidth()))}`);
 		}
 
-		// Inline tool result
-		const result = toolResults.get(call.id);
+		// Tool result
 		if (result) {
-			this.#renderToolResult(c, result);
+			this.#renderToolResultLines(lines, result, expanded);
+		}
+	}
+
+	#renderToolResultLines(lines: string[], result: ToolResultMessage, expanded: boolean): void {
+		const textParts = result.content
+			.filter((p): p is { type: "text"; text: string } => p.type === "text")
+			.map(p => p.text);
+		const text = textParts.join("\n").trim();
+
+		if (result.isError) {
+			const errorLines = text.split("\n");
+			const maxErrorLines = expanded ? PREVIEW_LIMITS.EXPANDED_LINES : PREVIEW_LIMITS.COLLAPSED_LINES;
+			const maxWidth = contentWidth();
+			lines.push(`${INDENT}${theme.fg("error", `✗ ${sanitizeLine(errorLines[0] || "Error", maxWidth)}`)}`);
+			for (let i = 1; i < Math.min(errorLines.length, maxErrorLines); i++) {
+				lines.push(`${INDENT}  ${theme.fg("error", sanitizeLine(errorLines[i], maxWidth))}`);
+			}
+			if (errorLines.length > maxErrorLines) {
+				lines.push(`${INDENT}  ${theme.fg("dim", `... ${errorLines.length - maxErrorLines} more lines`)}`);
+			}
+			return;
+		}
+
+		if (!text) {
+			lines.push(`${INDENT}${theme.fg("dim", "✓ done")}`);
+			return;
+		}
+
+		const resultLines = text.split("\n");
+		const maxLines = expanded ? PREVIEW_LIMITS.EXPANDED_LINES : PREVIEW_LIMITS.OUTPUT_COLLAPSED;
+
+		// Status line
+		const statusPrefix = `${INDENT}${theme.fg("success", "✓")}`;
+
+		if (resultLines.length === 1 && text.length < TRUNCATE_LENGTHS.LONG) {
+			lines.push(`${statusPrefix} ${theme.fg("dim", sanitizeLine(text))}`);
+			return;
+		}
+
+		lines.push(`${statusPrefix} ${theme.fg("dim", `${resultLines.length} lines`)}`);
+		const displayLines = resultLines.slice(0, maxLines);
+		for (const rl of displayLines) {
+			lines.push(`${INDENT}  ${theme.fg("dim", sanitizeLine(rl))}`);
+		}
+		if (resultLines.length > maxLines) {
+			lines.push(`${INDENT}  ${theme.fg("dim", `... ${resultLines.length - maxLines} more`)}`);
 		}
 	}
 
 	#formatToolArgs(toolName: string, args: Record<string, unknown>): string {
-		// Show the most relevant arg for common tools
 		switch (toolName) {
 			case "read":
-				return args.path ? `path: ${args.path}` : "";
 			case "write":
-				return args.path ? `path: ${args.path}` : "";
 			case "edit":
 				return args.path ? `path: ${args.path}` : "";
 			case "grep":
@@ -356,10 +526,7 @@ export class SessionObserverOverlayComponent extends Container {
 				return args.pattern ? `pattern: ${args.pattern}` : "";
 			case "bash": {
 				const cmd = args.command;
-				if (typeof cmd === "string") {
-					return truncateToWidth(replaceTabs(cmd), 70);
-				}
-				return "";
+				return typeof cmd === "string" ? replaceTabs(cmd) : "";
 			}
 			case "lsp":
 				return [args.action, args.file, args.symbol].filter(Boolean).join(" ");
@@ -368,19 +535,15 @@ export class SessionObserverOverlayComponent extends Container {
 				return args.path ? `path: ${args.path}` : "";
 			case "task": {
 				const tasks = args.tasks;
-				if (Array.isArray(tasks)) {
-					return `${tasks.length} task(s)`;
-				}
-				return "";
+				return Array.isArray(tasks) ? `${tasks.length} task(s)` : "";
 			}
 			default: {
-				// Generic: show first few args truncated
 				const parts: string[] = [];
 				let total = 0;
 				for (const [key, value] of Object.entries(args)) {
 					if (key.startsWith("_")) continue;
 					const v = typeof value === "string" ? value : JSON.stringify(value);
-					const entry = `${key}: ${truncateToWidth(replaceTabs(v ?? ""), 40)}`;
+					const entry = `${key}: ${replaceTabs(v ?? "")}`;
 					if (total + entry.length > MAX_TOOL_ARGS_CHARS) break;
 					parts.push(entry);
 					total += entry.length;
@@ -390,79 +553,256 @@ export class SessionObserverOverlayComponent extends Container {
 		}
 	}
 
-	#renderToolResult(c: Container, result: ToolResultMessage): void {
-		const textParts = result.content
-			.filter((p): p is { type: "text"; text: string } => p.type === "text")
-			.map(p => p.text);
-		const text = textParts.join("\n").trim();
+	#loadTranscript(sessionFile: string): SessionMessageEntry[] | null {
+		if (this.#transcriptCache && this.#transcriptCache.path !== sessionFile) {
+			this.#transcriptCache = undefined;
+		}
 
-		if (result.isError) {
-			const preview = truncateToWidth(replaceTabs(text || "Error"), 70);
-			c.addChild(new Text(`  ${theme.fg("error", `✗ ${preview}`)}`, 1, 0));
-		} else if (text) {
-			// Show brief result preview
-			const lines = text.split("\n");
-			if (lines.length === 1 && text.length < MAX_TOOL_RESULT_CHARS) {
-				c.addChild(new Text(`  ${theme.fg("dim", `✓ ${truncateToWidth(replaceTabs(text), 70)}`)}`, 1, 0));
-			} else {
-				c.addChild(new Text(`  ${theme.fg("dim", `✓ ${lines.length} lines`)}`, 1, 0));
-			}
-		} else {
-			c.addChild(new Text(`  ${theme.fg("dim", "✓ done")}`, 1, 0));
+		const fromByte = this.#transcriptCache?.bytesRead ?? 0;
+		const result = readFileIncremental(sessionFile, fromByte);
+		if (!result) {
+			logger.debug("Session observer: failed to read session file", { path: sessionFile });
+			return this.#transcriptCache?.entries ?? null;
 		}
-	}
 
-	#buildPickerItems(): SelectItem[] {
-		const sessions = this.#registry.getSessions();
-		return sessions.map(s => {
-			const statusIcon =
-				s.status === "active" ? "●" : s.status === "completed" ? "✓" : s.status === "failed" ? "✗" : "○";
-			const statusColor = s.status === "active" ? "success" : s.status === "failed" ? "error" : "dim";
-			const prefix = theme.fg(statusColor, statusIcon);
-			const agentSuffix = s.agent ? theme.fg("dim", ` [${s.agent}]`) : "";
-			const label = s.kind === "main" ? `${prefix} ${s.label} (return)` : `${prefix} ${s.label}${agentSuffix}`;
-
-			// Show current activity in the picker description for subagents
-			let description = s.description;
-			if (s.progress?.currentTool) {
-				const intent = s.progress.lastIntent;
-				description = intent ? `${s.progress.currentTool}: ${truncateToWidth(intent, 40)}` : s.progress.currentTool;
+		if (result.newSize < fromByte) {
+			this.#transcriptCache = undefined;
+			return this.#loadTranscript(sessionFile);
+		}
+
+		if (!this.#transcriptCache) {
+			this.#transcriptCache = { path: sessionFile, bytesRead: 0, entries: [] };
+		}
+
+		if (result.text.length > 0) {
+			const lastNewline = result.text.lastIndexOf("\n");
+			if (lastNewline >= 0) {
+				const completeChunk = result.text.slice(0, lastNewline + 1);
+				const newEntries = parseSessionEntries(completeChunk);
+				for (const entry of newEntries) {
+					if (entry.type === "message") {
+						this.#transcriptCache.entries.push(entry);
+						// Extract model from first assistant message
+						const msg = entry.message;
+						if (!this.#transcriptCache.model && msg.role === "assistant") {
+							this.#transcriptCache.model = msg.model;
+						}
+					} else if (entry.type === "model_change") {
+						this.#transcriptCache.model = entry.model;
+					}
+				}
+				this.#transcriptCache.bytesRead = fromByte + Buffer.byteLength(completeChunk, "utf-8");
 			}
+		}
+		return this.#transcriptCache.entries;
+	}
 
-			return { value: s.id, label, description };
-		});
+	#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)) {
-				if (this.#mode === "viewer") {
-					this.#setupPicker();
-					return;
-				}
 				this.#onDone();
 				return;
 			}
 		}
 
-		if (this.#mode === "picker") {
-			this.#selectList.handleInput(keyData);
-		} else if (this.#mode === "viewer") {
-			if (matchesKey(keyData, "escape")) {
-				this.#setupPicker();
-				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" || matchesKey(keyData, "down")) {
+			if (entryCount > 0) {
+				this.#selectedEntryIndex = Math.min(this.#selectedEntryIndex + 1, entryCount - 1);
+			}
+			this.#rebuildAndScroll();
+			return;
+		}
+
+		// k / up — move selection up
+		if (keyData === "k" || matchesKey(keyData, "up")) {
+			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 — avoid async in component rendering
+// Sync helpers for render path
 import * as fs from "node:fs";
 
-/**
- * Read new bytes from a file starting at the given byte offset.
- * Returns the new text and updated file size, or null on error.
- */
 function readFileIncremental(filePath: string, fromByte: number): { text: string; newSize: number } | null {
 	try {
 		const stat = fs.statSync(filePath);