@yusukeshib/pi-babysit 0.6.14 → 0.6.16

package/README.md

@@ -76,6 +76,7 @@ backgrounding (`… &`, `nohup`, `setsid`, `disown`). Set
 | Command | What it does |
 | ------- | ------------ |
 | `/babysit` | Arrow-key picker over all sessions. Renders an **inline snapshot** (no tmux): running **process** → current rendered screen + recent output + a copy-paste `babysit attach` take-over hint (detach `Ctrl-\ Ctrl-\`); running **subagent** → read-only progress (RPC stdin stays untouchable); finished → summary. Re-run `/babysit` to refresh |
+| `/babysit view` | Keyboard picker to open a session in the widget log viewer (Pi TUI) |
 | `/babysit gc [days]` | Preview and confirm deletion of old Pi-session roots (default 14 days). Active leases, live supervisor/child PIDs, unknown states, the current root, and recent roots are retained; old empty roots are eligible once their lease is gone. Deletion uses a GC lock and atomic rename |
 
 A widget below the editor separates session **kind** from task **state** at a glance:
@@ -85,20 +86,29 @@ summary counts use `RUNNING` / `IDLE`, and every row is labeled
 Click the header to toggle to `babysits(n all)`, which also shows finished and failed
 sessions, and click again to return to running-only. Both modes show newest first,
 ten per page; `< 1/4 >` shows the current/total page when needed. Click the
-arrows to page. Collapsed rows occupy one line, previewing the command for
-processes and the task for agents (with `…` when clipped). Click a row for the
-complete wrapped command or task; agent rows also show their RPC worker launch
-argv (bold, readable text rather than a copy-paste shell command), and up to 50
-output lines. Agent output retains recent RPC text, tool calls, and tool results
-in chronological order instead of showing only the latest message. Blank lines
-and surrounding whitespace are preserved. Expanded output lines wrap without a
-100-character cutoff.
-Opening another row closes the previous
-one. A session with no available output shows an explicit placeholder when
-expanded. Mouse clicks
-require fullscreen mode; `/babysit` works in regular mode. The displayed `age`
-is total session age, not time spent
-in the current state. Transcript details
+arrows to page. Rows occupy one line, previewing the command for processes and
+the task for agents (with `…` when clipped). Click an AGENT or PROCESS row to
+replace the list with a tall **log viewer in the same widget area**, not an
+overlay or separate screen. `Esc` or the right-hand **Close** button restores
+the list, preserving its mode and page. The viewer uses Pi's `ScrollView` for
+scroll position and follow behavior, with a widget-local scrollbar styled using
+Pi's scrollbar theme. Wheel, scrollbar drag/track clicks, and ↑/↓ navigate the
+log without requiring any Pi core changes. Home/End and PageUp/PageDown remain
+Pi's transcript shortcuts. At the bottom it follows new output; scrolling up
+pauses following until you return to the bottom. The viewer resizes with the
+terminal, leaving room for the editor/status/footer. Agent logs separate
+assistant text, tool calls, and results; process logs show terminal output.
+When babysit provides `output.timestamps.jsonl`, process lines begin with a muted
+local `[YYYY-MM-DD HH:mm:ss]` capture time, with wrapped text aligned beneath the
+message. This is the time babysit received the first byte of the line, not an
+application event time. Narrow views place the date above the text. Old logs and
+lines without capture metadata remain readable without invented timestamps.
+Only the selected log is loaded, bounded to the latest 1 MiB / 2,000 display
+lines with an omission notice; the full log file is unchanged. Empty logs show
+a placeholder. Works in the released Pi 1.0 widget host. Mouse interaction
+requires fullscreen mode; `/babysit view` opens the viewer using a keyboard
+picker, and `/babysit` still provides a snapshot. The displayed `age` is total
+session age, not time spent in the current state. Transcript details
 from tool results, snapshots, and completion notifications collapse or expand
 with Pi's tool-output toggle (`Ctrl+O` by default).
 

package/index.ts

@@ -43,7 +43,8 @@ import type {
 	ToolDefinition,
 } from "@earendil-works/pi-coding-agent";
 import { getMarkdownTheme } from "@earendil-works/pi-coding-agent";
-import { Box, Markdown, Text, truncateToWidth, visibleWidth, wrapTextWithAnsi } from "@earendil-works/pi-tui";
+import { Box, Markdown, Text, truncateToWidth, visibleWidth, type TuiMouseEvent } from "@earendil-works/pi-tui";
+import { createLogViewer } from "./log-viewer";
 import { Type, type TSchema } from "typebox";
 import { StringEnum } from "@earendil-works/pi-ai";
 import { type AgentConfig, type AgentScope, discoverAgents } from "./agents";
@@ -2401,7 +2402,6 @@ function renderWidgetSessionHeader(
 
 // How many trailing output lines to show per session in the widget.
 const WIDGET_COLLAPSED_TAIL_LINES = 1;
-const WIDGET_EXPANDED_TAIL_LINES = 50;
 const WIDGET_SESSION_PAGE_SIZE = 10;
 
 export interface WidgetSessionListState {
@@ -2413,7 +2413,7 @@ export interface WidgetSessionDisplay {
 	id: string;
 	header: string;
 	tail: string[];
-	expandable: boolean;
+	viewable: boolean;
 	active?: boolean;
 	details?: string[];
 }
@@ -2426,14 +2426,12 @@ interface WidgetMouseEvent {
 }
 
 /**
- * Build the live widget as a mouse-aware component without depending on newer
- * pi-tui mouse classes. Older hosts still render it normally; fullscreen hosts
- * dispatch component-local click coordinates to handleMouse.
+ * Compact session list. Item presses open a viewer; rows never expand inline.
  */
 export function createWidgetComponent(
 	summaryLines: string[],
 	sessions: WidgetSessionDisplay[],
-	expandedSessionIds: Set<string>,
+	onOpen: (id: string) => void,
 	listState?: WidgetSessionListState,
 ) {
 	type Target = { type: "session"; id: string } | { type: "sessions"; endX: number; prevX?: number; nextX?: number };
@@ -2448,31 +2446,10 @@ export function createWidgetComponent(
 				targetByLine.push(target);
 			};
 			const pushSession = (session: WidgetSessionDisplay) => {
-				const expanded = session.expandable && expandedSessionIds.has(session.id);
-				const tail = session.tail.slice(
-					expanded ? -WIDGET_EXPANDED_TAIL_LINES : -WIDGET_COLLAPSED_TAIL_LINES,
-				);
-				const target = session.expandable ? { type: "session" as const, id: session.id } : undefined;
-				const details = session.details ?? [];
-				const pushWrapped = (text: string) => {
-					const indent = width > 6 ? "      " : "";
-					for (const line of wrapTextWithAnsi(text, Math.max(1, width - indent.length))) {
-						push(`${indent}${line}`, target);
-					}
-				};
-				const pushDetail = (detail: string) =>
-					pushWrapped(detail.startsWith("task: ") ? detail.slice(6) : detail);
-				if (!expanded && details.length) {
-					const preview = details[0].startsWith("task: ") ? details[0].slice(6) : details[0];
-					push(`${session.header} ${preview}`, target, "…");
-				} else if (!expanded && tail.length === 1) {
-					push(`${session.header} ${tail[0]}`, target);
-				} else {
-					push(session.header, target);
-					for (const detail of details) pushDetail(detail);
-					for (const line of tail) pushWrapped(line);
-					if (expanded && tail.length === 0) push("      (no output available)", target);
-				}
+				const target = session.viewable ? { type: "session" as const, id: session.id } : undefined;
+				const detail = session.details?.[0];
+				const preview = detail?.startsWith("task: ") ? detail.slice(6) : detail ?? session.tail.at(-1);
+				push(`${session.header}${preview ? ` ${preview}` : ""}`, target, "…");
 			};
 
 			for (const line of summaryLines.slice(0, -1)) push(line);
@@ -2515,11 +2492,7 @@ export function createWidgetComponent(
 			// Toggle on press so a terminal that omits release still works.
 			if (event.type === "press") {
 				if (target.type === "session") {
-					if (expandedSessionIds.has(target.id)) expandedSessionIds.clear();
-					else {
-						expandedSessionIds.clear();
-						expandedSessionIds.add(target.id);
-					}
+					onOpen(target.id);
 				} else if (listState) {
 					const count = listState.mode === "running" ? sessions.filter((session) => session.active).length : sessions.length;
 					const pageCount = Math.max(1, Math.ceil(count / WIDGET_SESSION_PAGE_SIZE));
@@ -2544,6 +2517,124 @@ export function createWidgetComponent(
 	};
 }
 
+export function createSessionWidget(options: {
+	getHeight: () => number;
+	requestRender: () => void;
+	getTheme: () => Theme;
+	readLog: (id: string) => { text: string; isAgent: boolean; clipped?: boolean; lineTimestamps?: (number | undefined)[] };
+}) {
+	const listState: WidgetSessionListState = { mode: "running", page: 0 };
+	let selectedId: string | undefined;
+	let displays: WidgetSessionDisplay[] = [];
+	let viewer: ReturnType<typeof createLogViewer> | undefined;
+	let list = createWidgetComponent([], [], open, listState);
+	function refreshViewer() {
+		if (!selectedId || !viewer) return;
+		const log = options.readLog(selectedId);
+		const session = displays.find((session) => session.id === selectedId);
+		const header = session?.header ?? selectedId;
+		const detail = session?.details?.[0] ?? "";
+		viewer.update(
+			`${log.clipped ? "[older log omitted: 1 MiB limit] " : ""}${header}`,
+			log.text,
+			log.isAgent,
+			detail.startsWith("task: ") ? detail.slice(6) : detail,
+			log.lineTimestamps,
+		);
+	}
+	function close() {
+		selectedId = undefined;
+		viewer = undefined;
+		options.requestRender();
+	}
+	function open(id: string) {
+		selectedId = id;
+		viewer = createLogViewer({ ...options, onClose: close });
+		refreshViewer();
+		options.requestRender();
+	}
+	return {
+		open,
+		update(summary: string[], sessions: WidgetSessionDisplay[]) {
+			displays = sessions;
+			list = createWidgetComponent(summary, sessions, open, listState);
+			refreshViewer();
+			options.requestRender();
+		},
+		render(width: number) { return (viewer ?? list).render(width); },
+		handleMouse(event: TuiMouseEvent) {
+			// Stock Pi widget hosts forward mouse input to this component, not
+			// to a nested native layout tree. Keep the full wheel/drag event.
+			return (viewer ?? list).handleMouse(event);
+		},
+		handleKey(data: string) { return viewer?.handleKey(data) ?? false; },
+		invalidate() { list.invalidate(); viewer?.invalidate(); },
+	};
+}
+
+/** Capture times are optional: old logs and incomplete sidecars remain readable. */
+function readLineTimestamps(file: string, data: Buffer, offset: number): (number | undefined)[] {
+	const metadata = readViewerLog(path.join(path.dirname(file), "output.timestamps.jsonl")).text;
+	const ranges: { start: number; end: number; time: number }[] = [];
+	for (const line of metadata.split("\n")) {
+		try {
+			const record = JSON.parse(line);
+			if (!Array.isArray(record) || record.length !== 3) continue;
+			const [start, length, time] = record;
+			if (!Number.isSafeInteger(start) || start < 0 ||
+				!Number.isSafeInteger(length) || length <= 0 ||
+				!Number.isSafeInteger(start + length) ||
+				!Number.isSafeInteger(time) || time < 0 || time > 8640000000000000 ||
+				start < (ranges.at(-1)?.end ?? 0)) continue;
+			ranges.push({ start, end: start + length, time });
+		} catch { /* A partial or malformed record has no trustworthy time. */ }
+	}
+	let range = 0;
+	const timestamps: (number | undefined)[] = [];
+	const addLine = (position: number) => {
+		const absolute = offset + position;
+		while (range < ranges.length && ranges[range].end <= absolute) range++;
+		const entry = ranges[range];
+		timestamps.push(position < data.length && entry && entry.start <= absolute ? entry.time : undefined);
+	};
+	addLine(0);
+	for (let i = 0; i < data.length; i++) {
+		if (data[i] !== 10 && data[i] !== 13) continue;
+		if (data[i] === 13 && data[i + 1] === 10) i++;
+		addLine(i + 1);
+	}
+	return timestamps;
+}
+
+/** Only the selected session is read; bounded snapshots never affect worker logs. */
+export function readViewerLog(file: string, withTimestamps = false): {
+	text: string; clipped: boolean; lineTimestamps?: (number | undefined)[];
+} {
+	try {
+		const fd = fs.openSync(file, "r");
+		try {
+			const size = fs.fstatSync(fd).size;
+			const start = Math.max(0, size - 1024 * 1024);
+			const buffer = Buffer.alloc(size - start);
+			const bytes = fs.readSync(fd, buffer, 0, buffer.length, start);
+			let data = buffer.subarray(0, bytes);
+			let offset = start;
+			if (start > 0) {
+				const skip = data.indexOf(10) + 1;
+				data = data.subarray(skip);
+				offset += skip;
+			}
+			const text = data.toString("utf8");
+			return {
+				text, clipped: start > 0,
+				...(withTimestamps ? { lineTimestamps: readLineTimestamps(file, data, offset) } : {}),
+			};
+		} finally { fs.closeSync(fd); }
+	} catch {
+		return { text: "", clipped: false };
+	}
+}
+
 // Strip ANSI/control escapes and clamp width so raw PTY output can't wrap or
 // corrupt the widget area.
 function sanitizeTailLine(s: string): string {
@@ -3498,8 +3589,8 @@ export default function (pi: ExtensionAPI) {
 		}
 	}
 
-	const expandedWidgetSessions = new Set<string>();
-	const widgetListState: WidgetSessionListState = { mode: "running", page: 0 };
+	let sessionWidget: ReturnType<typeof createSessionWidget> | undefined;
+	let unsubscribeWidgetInput: (() => void) | undefined;
 
 	const refreshWidget = async (ctx: ExtensionContext, snapshot?: BsSession[]) => {
 		if (!ctx.hasUI) return;
@@ -3516,10 +3607,6 @@ export default function (pi: ExtensionAPI) {
 			}
 		}
 		const idle = subs.filter((session) => progressById.get(session.id)?.done).length;
-		const sessionIds = new Set(all.map((session) => session.id));
-		for (const id of expandedWidgetSessions) {
-			if (!sessionIds.has(id)) expandedWidgetSessions.delete(id);
-		}
 
 		const theme = ctx.ui.theme;
 		const summaryLines = renderWidgetLines(procs, subs.length - idle, idle, theme);
@@ -3530,7 +3617,7 @@ export default function (pi: ExtensionAPI) {
 					session.id,
 					isSubagent,
 					isSubagent ? progressById.get(session.id) : undefined,
-					WIDGET_EXPANDED_TAIL_LINES,
+					WIDGET_COLLAPSED_TAIL_LINES,
 				);
 			}),
 		);
@@ -3551,7 +3638,7 @@ export default function (pi: ExtensionAPI) {
 					id,
 					header: renderWidgetSessionHeader(id, isSubagent ? "agent" : "process", state, elapsedOf(id), theme),
 					tail: activeTails.get(id) ?? [],
-					expandable: true,
+					viewable: true,
 					active: true,
 					details,
 				};
@@ -3566,27 +3653,40 @@ export default function (pi: ExtensionAPI) {
 					theme,
 				),
 				details,
-				// Only read/parse the five visible sessions on demand.
+				// Only read/parse visible sessions on demand.
 				get tail() {
 					try {
-						return widgetTail(id, isSubagent, undefined, WIDGET_EXPANDED_TAIL_LINES);
+						return widgetTail(id, isSubagent, undefined, WIDGET_COLLAPSED_TAIL_LINES);
 					} catch {
 						return [];
 					}
 				},
-				expandable: true,
+				viewable: true,
 			};
 		});
 
 		if (ctx.mode === "tui") {
-			ctx.ui.setWidget(
-				"pi-babysit",
-				() => createWidgetComponent(summaryLines, displays, expandedWidgetSessions, widgetListState),
-				{ placement: "belowEditor" },
-			);
+			if (!sessionWidget) {
+				ctx.ui.setWidget("pi-babysit", (tui) => {
+					sessionWidget = createSessionWidget({
+						// Keep the viewer bounded while leaving room for editor/status/footer.
+						getHeight: () => Math.max(3, tui.terminal.rows - 8),
+						requestRender: () => tui.requestRender(),
+						getTheme: () => ctx.ui.theme,
+						readLog: (id) => {
+							const isAgent = kindOf(id) === "subagent";
+							return { ...readViewerLog(logPath(id), !isAgent), isAgent };
+						},
+					});
+					return sessionWidget;
+				}, { placement: "belowEditor" });
+				unsubscribeWidgetInput = ctx.ui.onTerminalInput((data) =>
+					sessionWidget?.handleKey(data) ? { consume: true } : undefined);
+			}
+			sessionWidget?.update(summaryLines, displays);
 		} else {
 			const activeIds = new Set(active.map((session) => session.id));
-			const component = createWidgetComponent(summaryLines, displays.filter((session) => activeIds.has(session.id)), new Set());
+			const component = createWidgetComponent(summaryLines, displays.filter((session) => activeIds.has(session.id)), () => {});
 			ctx.ui.setWidget("pi-babysit", component.render(10_000), {
 				placement: "belowEditor",
 			});
@@ -3768,6 +3868,9 @@ export default function (pi: ExtensionAPI) {
 	});
 
 	pi.on("session_shutdown", async (event) => {
+		unsubscribeWidgetInput?.();
+		unsubscribeWidgetInput = undefined;
+		sessionWidget = undefined;
 		if (pollTimer) clearInterval(pollTimer);
 		pollTimer = undefined;
 		// Pi also emits session_shutdown while hot-reloading and switching sessions.
@@ -5050,9 +5153,10 @@ export default function (pi: ExtensionAPI) {
 	// output + a copy-paste `babysit attach` take-over hint; running subagent →
 	// read-only progress; finished → summary. Re-run to refresh.
 	pi.registerCommand("babysit", {
-		description: "Pick a session to inspect, or `/babysit gc [days]` to remove old terminal roots",
+		description: "Pick a session to inspect; /babysit view opens its log viewer; /babysit gc [days] removes old terminal roots",
 		handler: async (args, ctx) => {
-			const command = args.trim();
+			const view = args.trim() === "view";
+			const command = view ? "" : args.trim();
 			if (command === "gc" || command.startsWith("gc ")) {
 				const daysText = command.slice(2).trim();
 				const days = daysText ? Number(daysText) : 14;
@@ -5087,7 +5191,7 @@ export default function (pi: ExtensionAPI) {
 				return;
 			}
 			if (command) {
-				ctx.ui.notify("Usage: /babysit or /babysit gc [days]", "error");
+				ctx.ui.notify("Usage: /babysit, /babysit view, or /babysit gc [days]", "error");
 				return;
 			}
 			if (!(await babysitAvailable())) {
@@ -5124,6 +5228,11 @@ export default function (pi: ExtensionAPI) {
 			if (!choice) return;
 			const picked = sessions[labels.indexOf(choice)];
 			if (!picked) return;
+			if (view && ctx.mode === "tui") {
+				await refreshWidget(ctx);
+				sessionWidget?.open(picked.id);
+				return;
+			}
 			const kind = kindOf(picked.id);
 			const elapsed = picked.state === "running" ? elapsedOf(picked.id) : null;
 			const elapsedSuffix = elapsed ? ` ${elapsed}` : "";

package/log-viewer.ts

@@ -0,0 +1,371 @@
+import { getMarkdownTheme, type Theme } from "@earendil-works/pi-coding-agent";
+import {
+	Key,
+	Markdown,
+	ScrollView,
+	Text,
+	matchesKey,
+	truncateToWidth,
+	visibleWidth,
+	type Component,
+	type TuiMouseEvent,
+} from "@earendil-works/pi-tui";
+
+export interface LogViewerOptions {
+	getHeight: () => number;
+	requestRender: () => void;
+	getTheme: () => Theme;
+	onClose: () => void;
+}
+
+/** Only numeric SGR escapes are allowed; never forward cursor, hyperlink or image controls. */
+function sanitize(text: string, sgr = false): string {
+	return text
+		.replace(/\x1b\][^\x07\x1b]*(?:\x07|\x1b\\|$)/g, "")
+		.replace(/\x1b[P_^X][\s\S]*?(?:\x1b\\|$)/g, "")
+		.replace(/\r\n/g, "\n")
+		.replace(/\r/g, "\n")
+		.replace(/\t/g, "    ")
+		.replace(
+			/\x1b\[[0-?]*[ -/]*[@-~]|\x1b[^\[]?|[\x00-\x08\x0b-\x1f\x7f-\x9f]/g,
+			(s) => (sgr && /^\x1b\[[\d;]*m$/.test(s) ? s : ""),
+		);
+}
+type Block = { kind: "assistant" | "tool" | "result" | "error"; text: string };
+function contentText(content: unknown): string {
+	if (typeof content === "string") return content;
+	return Array.isArray(content)
+		? content
+				.filter((c) => c?.type === "text")
+				.map((c) => c.text ?? "")
+				.join("")
+		: "";
+}
+function agentBlocks(raw: string): Block[] {
+	const blocks: Block[] = [];
+	let current: Block | undefined;
+	const toolResults = new Map<string, Block>();
+	const assistant = () =>
+		(current ??=
+			(blocks.push({ kind: "assistant", text: "" }),
+			blocks[blocks.length - 1]));
+	for (const line of raw.split("\n")) {
+		let e: any;
+		try {
+			e = JSON.parse(line);
+		} catch {
+			continue;
+		}
+		if (!e || typeof e !== "object") continue;
+		if (e.type === "message_start" && e.message?.role === "assistant")
+			current = undefined;
+		if (["message_start", "message_update", "message_end"].includes(e.type)) {
+			if (e.message?.role === "assistant") {
+				const text = contentText(e.message.content);
+				const b = assistant();
+				if (text) b.text = text; // cumulative/final snapshots replace streamed deltas
+				if (e.message.errorMessage)
+					blocks.push({ kind: "error", text: String(e.message.errorMessage) });
+				if (e.type === "message_end") current = undefined;
+			} else if (
+				!e.message &&
+				e.assistantMessageEvent?.type === "text_delta" &&
+				typeof e.assistantMessageEvent.delta === "string"
+			) {
+				assistant().text += e.assistantMessageEvent.delta;
+			} else if (e.type === "message_end" && e.message?.role === "toolResult") {
+				const id = e.message.toolCallId;
+				const text = contentText(e.message.content);
+				if (id && toolResults.has(id)) {
+					const b = toolResults.get(id)!;
+					b.text = text;
+					b.kind = e.message.isError ? "error" : b.kind;
+				} else {
+					const b: Block = {
+						kind: e.message.isError ? "error" : "result",
+						text,
+					};
+					blocks.push(b);
+					if (id) toolResults.set(id, b);
+				}
+			}
+		} else if (e.type === "tool_execution_start") {
+			blocks.push({
+				kind: "tool",
+				text: `${e.toolName ?? "tool"} ${JSON.stringify(e.args ?? {})}`,
+			});
+		} else if (e.type === "tool_execution_end") {
+			const b: Block = {
+				kind: e.isError ? "error" : "result",
+				text:
+					contentText(e.result?.content) ||
+					String(e.error?.message ?? e.error ?? ""),
+			};
+			if (b.text) {
+				blocks.push(b);
+				if (e.toolCallId) toolResults.set(e.toolCallId, b);
+			}
+		} else if (e.type === "error")
+			blocks.push({
+				kind: "error",
+				text: String(
+					e.message ?? e.error?.message ?? e.error ?? "Unknown error",
+				),
+			});
+	}
+	return blocks
+		.filter((b) => b.text)
+		.map((b) => ({ ...b, text: sanitize(b.text) }));
+}
+
+function dateLabel(timestamp: number): string {
+	const date = new Date(timestamp);
+	const pad = (n: number) => String(n).padStart(2, "0");
+	return `[${date.getFullYear()}-${pad(date.getMonth() + 1)}-${pad(date.getDate())} ${pad(date.getHours())}:${pad(date.getMinutes())}:${pad(date.getSeconds())}]`;
+}
+
+export function createLogViewer(options: LogViewerOptions) {
+	let header = "",
+		raw = "",
+		description = "",
+		isAgent = false;
+	let lineTimestamps: (number | undefined)[] | undefined;
+	let cache: string[] | undefined,
+		cacheWidth = -1,
+		cacheTheme: Theme | undefined;
+	const body: Component = {
+		invalidate() {
+			cache = undefined;
+		},
+		render(width) {
+			const theme = options.getTheme();
+			if (cache && cacheWidth === width && cacheTheme === theme) return cache;
+			const blocks = isAgent
+				? agentBlocks(raw)
+				: [{ kind: "result" as const, text: sanitize(raw, true) }];
+			const lines: string[] = description
+				? [
+						theme.fg("muted", isAgent ? "[task]" : "[command]"),
+						...new Text(sanitize(description), 0, 0).render(width),
+						"",
+					]
+				: [];
+			for (const b of blocks) {
+				if (!isAgent && lineTimestamps?.some((time) => time !== undefined)) {
+					for (const [index, text] of raw.split(/\r\n|\r|\n/).entries()) {
+						const time = lineTimestamps[index];
+						const label = time === undefined ? "" : dateLabel(time);
+						const indent = label ? visibleWidth(label) + 1 : 0;
+						if (indent && width <= indent + 4) {
+							lines.push(...new Text(theme.fg("muted", label), 0, 0).render(width));
+							lines.push(...new Text(sanitize(text, true), 0, 0).render(width));
+						} else {
+							const wrapped = new Text(sanitize(text, true), 0, 0).render(width - indent);
+							lines.push(...wrapped.map((line, row) =>
+								(row === 0 && label ? theme.fg("muted", label) + " " : " ".repeat(indent)) + line));
+						}
+					}
+					continue;
+				}
+				if (isAgent)
+					lines.push(
+						theme.fg(
+							b.kind === "error"
+								? "error"
+								: b.kind === "assistant"
+									? "accent"
+									: "toolTitle",
+							`[${b.kind}]`,
+						),
+					);
+				lines.push(
+					...(b.kind === "assistant"
+						? new Markdown(b.text, 0, 0, getMarkdownTheme()).render(width)
+						: new Text(b.text, 0, 0).render(width)),
+				);
+			}
+			if (!blocks.some((block) => block.text.trim()))
+				lines.push(theme.fg("muted", "(no output available)"));
+			cache =
+				lines.length > 2000
+					? [
+							theme.fg("warning", "[Earlier log lines clipped]"),
+							...lines.slice(-1999),
+						]
+					: lines;
+			cacheWidth = width;
+			cacheTheme = theme;
+			return cache;
+		},
+	};
+	const scrollView = new ScrollView(body, {
+		follow: "end",
+		overscroll: "contain",
+		scrollbar: "always",
+		scrollbarTrackStyle: (s) => options.getTheme().fg("scrollbarTrack", s),
+		scrollbarThumbStyle: (s) => options.getTheme().fg("scrollbarThumb", s),
+	});
+	const heading = {
+		invalidate() {},
+		render(width: number) {
+			const close = truncateToWidth("[Close]", width);
+			const room = Math.max(0, width - visibleWidth(close) - 1);
+			const title = truncateToWidth(sanitize(header).replace(/\n/g, " "), room);
+			return [
+				options.getTheme().fg("accent", title) +
+					" ".repeat(
+						Math.max(0, width - visibleWidth(title) - visibleWidth(close)),
+					) +
+					options.getTheme().fg("muted", close),
+			];
+		},
+		handleMouse(e: TuiMouseEvent) {
+			if (
+				e.button !== "left" ||
+				e.x < Math.max(0, e.width - 7) ||
+				e.x >= e.width
+			)
+				return;
+			if (e.type === "press") {
+				options.onClose();
+				return { handled: true };
+			}
+			if (e.type === "click" || e.type === "release") return { handled: true };
+		},
+	};
+	const footer: Component = {
+		invalidate() {},
+		render: (width) => [
+			options.getTheme().fg("dim", truncateToWidth("↑↓ · Esc close", width)),
+		],
+	};
+	let geometry = {
+		width: 0,
+		height: 0,
+		thumbTop: 0,
+		thumbHeight: 0,
+		maxTop: 0,
+	};
+	let dragOffset: number | undefined;
+	// Stock widget Containers are opaque to native layout. Draw and route this
+	// viewport locally, retaining the public ScrollView's follow/scroll state.
+	return {
+		scrollView,
+		render(width: number) {
+			width = Math.max(0, Math.floor(width));
+			const height = Math.max(0, Math.floor(options.getHeight()) - 2);
+			const contentWidth = Math.max(0, width - 1);
+			const lines = body.render(Math.max(1, contentWidth));
+			scrollView.updateLayout(lines.length, height, options.requestRender);
+			const visible = lines.slice(
+				scrollView.scrollTop,
+				scrollView.scrollTop + height,
+			);
+			const thumbHeight =
+				height === 0
+					? 0
+					: Math.max(
+							1,
+							Math.min(
+								height,
+								Math.round((height * height) / Math.max(1, lines.length)),
+							),
+						);
+			const maxTop = Math.max(0, lines.length - height);
+			const thumbTop =
+				maxTop === 0
+					? 0
+					: Math.round(
+							(scrollView.scrollTop / maxTop) * (height - thumbHeight),
+						);
+			geometry = { width, height, thumbTop, thumbHeight, maxTop };
+			return [
+				...heading.render(width),
+				...Array.from({ length: height }, (_, row) => {
+					if (width === 0) return "";
+					const text = truncateToWidth(visible[row] ?? "", contentWidth);
+					const thumb = row >= thumbTop && row < thumbTop + thumbHeight;
+					return (
+						text +
+						" ".repeat(Math.max(0, contentWidth - visibleWidth(text))) +
+						options
+							.getTheme()
+							.fg(
+								thumb ? "scrollbarThumb" : "scrollbarTrack",
+								thumb ? (dragOffset === undefined ? "┃" : "█") : "│",
+							)
+					);
+				}),
+				...footer.render(width),
+			];
+		},
+		handleMouse(e: TuiMouseEvent) {
+			if (dragOffset !== undefined) {
+				if (e.type === "release") {
+					dragOffset = undefined;
+					return { handled: true, render: true };
+				}
+				if (e.type === "drag" || e.type === "move") {
+					const travel = geometry.height - geometry.thumbHeight;
+					const offset = Math.max(0, Math.min(travel, e.y - 1 - dragOffset));
+					scrollView.scrollTo(
+						travel > 0
+							? Math.round((offset / travel) * geometry.maxTop)
+							: scrollView.scrollTop,
+					);
+					return { handled: true, render: true };
+				}
+			}
+			if (e.y === 0) return heading.handleMouse(e);
+			if (e.y < 1 || e.y > geometry.height || e.x < 0 || e.x >= geometry.width)
+				return;
+			if (e.type === "wheel") {
+				scrollView.scrollBy(e.wheelDelta ?? 0);
+				return { handled: true, render: true };
+			}
+			if (e.x === geometry.width - 1 && e.button === "left") {
+				if (e.type === "press") {
+					const row = e.y - 1;
+					if (
+						row >= geometry.thumbTop &&
+						row < geometry.thumbTop + geometry.thumbHeight
+					) {
+						dragOffset = row - geometry.thumbTop;
+						return { handled: true, capture: true, render: true };
+					}
+					scrollView.scrollBy(
+						row < geometry.thumbTop ? -geometry.height : geometry.height,
+					);
+				}
+				if (["press", "click", "release"].includes(e.type))
+					return { handled: true, render: true };
+			}
+		},
+		invalidate() {
+			body.invalidate();
+		},
+		update(nextHeader: string, logText: string, agent: boolean, context = "", timestamps?: (number | undefined)[]) {
+			header = nextHeader;
+			if (raw !== logText || isAgent !== agent || description !== context ||
+				JSON.stringify(lineTimestamps) !== JSON.stringify(timestamps)) {
+				lineTimestamps = timestamps;
+				raw = logText;
+				isAgent = agent;
+				description = context;
+				body.invalidate();
+			}
+			options.requestRender();
+		},
+		handleKey(data: string): boolean {
+			if (matchesKey(data, Key.escape)) {
+				options.onClose();
+				return true;
+			}
+			if (matchesKey(data, Key.up)) scrollView.scrollBy(-1);
+			else if (matchesKey(data, Key.down)) scrollView.scrollBy(1);
+			else return false;
+			options.requestRender();
+			return true;
+		},
+	};
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@yusukeshib/pi-babysit",
-  "version": "0.6.14",
+  "version": "0.6.16",
   "description": "Run any shell command and pi subagents under babysit, with context-safe captured output.",
   "keywords": [
     "pi-package",
@@ -20,6 +20,7 @@
   "type": "module",
   "files": [
     "index.ts",
+    "log-viewer.ts",
     "agents.ts",
     "self-reap.ts",
     "format-stream.mjs",
@@ -39,8 +40,8 @@
   },
   "peerDependencies": {
     "@earendil-works/pi-ai": "*",
-    "@earendil-works/pi-coding-agent": "*",
-    "@earendil-works/pi-tui": "*",
+    "@earendil-works/pi-coding-agent": ">=1.0.0",
+    "@earendil-works/pi-tui": ">=1.0.0",
     "typebox": "*"
   }
 }