@gavin-hu/my-pi-agent 0.21.0 → 0.22.0

package/extensions/todo/runtime.ts

@@ -16,7 +16,7 @@ import { lastTodos } from "../../lib/todo-state.ts";
 import { DEFAULT_TODO_CONFIG, type TodoConfig } from "./config.ts";
 import { shouldNudge } from "./nudge.ts";
 import { hasOpenTodos } from "./state.ts";
-import { TodoWidget, WIDGET_KEY } from "./tui.ts";
+import { TodoWidget, WIDGET_KEY } from "./widget.ts";
 import type { Todo } from "./types.ts";
 
 export interface TodoRuntime {

package/extensions/todo/tools.ts

@@ -22,7 +22,7 @@ import { paint } from "../../lib/tui/tokens.ts";
 import { compareByActivity, formatCallText, formatTodoText, type TodoRailInput } from "./format.ts";
 import type { TodoRuntime } from "./runtime.ts";
 import { TodoParams, TodoResult, type TodoArgs } from "./schema.ts";
-import { TodoResult as TodoResultView } from "./tui.ts";
+import { TodoResult as TodoResultView } from "./render.ts";
 import type { Todo, TodoDetails } from "./types.ts";
 
 export const TOOL_NAME = TODO_TOOL;

package/extensions/todo/view/todo-screen.ts

@@ -0,0 +1,122 @@
+/**
+ * The `/todos` screen: a scrollable, dismissible list with its own frame.
+ *
+ * The frame, the hints, the range line and the empty state come from the
+ * `lib/tui/` kit (`dockListFrame`, `screenHint`, `formatRange`, `emptyState`),
+ * and the rows from `todoRow` in `format.ts`.
+ *
+ * Full-screen surfaces live under `view/` and load on first use: the `/todos`
+ * command imports this module behind its TUI branch, so registration never pays
+ * for it. The widget and the transcript block, which Pi draws synchronously,
+ * stay outside this directory on purpose.
+ */
+
+import type { Theme } from "@earendil-works/pi-coding-agent";
+import { type Component, type TuiMouseEvent, type TuiMouseEventResult } from "@earendil-works/pi-tui";
+import { dockListFrame, screenHint, type ViewportRowsSource } from "../../../lib/tui/chrome.ts";
+import { clip } from "../../../lib/tui/columns.ts";
+import { clampScroll, fitRows, formatRange, isCloseKey, navigateScroll, wheelDelta } from "../../../lib/tui/cursor.ts";
+import { emptyState } from "../../../lib/tui/rows.ts";
+import { titleRule } from "../../../lib/tui/rules.ts";
+import { paint } from "../../../lib/tui/tokens.ts";
+import { progressSummary, todoRow } from "../format.ts";
+import type { Todo } from "../types.ts";
+
+/** Items the `/todos` screen shows when the terminal height is unknown. */
+const SCREEN_DEFAULT_ITEMS = 12;
+
+/** Dismissible, scrollable list opened by `/todos`; reads the live list on each render. */
+export class TodoListComponent implements Component {
+	private scrollTop = 0;
+	/** Rows shown at once; recomputed from the terminal height on every render. */
+	private visible = SCREEN_DEFAULT_ITEMS;
+
+	constructor(
+		private readonly getTodos: () => Todo[],
+		private readonly theme: Theme,
+		private readonly onClose: () => void,
+		private readonly requestRender: () => void,
+		private readonly viewportRowsSource?: ViewportRowsSource,
+	) {}
+
+	/** The live list; re-read on each render so an open screen follows changes. */
+	private get todos(): Todo[] {
+		return this.getTodos();
+	}
+
+	private get maxScroll(): number {
+		return Math.max(0, this.todos.length - this.visible);
+	}
+
+	private setScroll(next: number): void {
+		const clamped = clampScroll(next, this.todos.length, this.visible);
+		if (clamped === this.scrollTop) return;
+		this.scrollTop = clamped;
+		this.requestRender();
+	}
+
+	handleInput(data: string): void {
+		if (isCloseKey(data)) {
+			this.onClose();
+			return;
+		}
+		// `g`/`G` jump to the ends, matching the `/jobs` and plan screens.
+		if (data === "g") {
+			this.setScroll(0);
+			return;
+		}
+		if (data === "G") {
+			this.setScroll(this.maxScroll);
+			return;
+		}
+		const next = navigateScroll(data, this.scrollTop, this.todos.length, this.visible);
+		if (next !== undefined) this.setScroll(next);
+	}
+
+	/** Wheel scrolling moves the list, matching the other list screens. */
+	handleMouse(event: TuiMouseEvent): TuiMouseEventResult | undefined {
+		const delta = wheelDelta(event);
+		if (delta === undefined) return undefined;
+		this.setScroll(this.scrollTop + delta);
+		return { handled: true };
+	}
+
+	invalidate(): void {}
+
+	render(width: number): string[] {
+		const w = Math.max(1, width);
+		const header = titleRule(this.theme, w, "Todos");
+
+		if (this.todos.length === 0) {
+			return dockListFrame({
+				theme: this.theme,
+				width: w,
+				header,
+				body: emptyState(this.theme, w, { label: "No todos yet. Ask the agent to plan some work." }),
+				hint: screenHint(this.theme, w, ["Esc close"]),
+			});
+		}
+
+		// header, summary, blank, blank-after-list, hint, closing rule
+		const chrome = 6;
+		this.visible = fitRows(this.viewportRowsSource, this.todos.length, chrome, SCREEN_DEFAULT_ITEMS);
+		this.scrollTop = clampScroll(this.scrollTop, this.todos.length, this.visible);
+
+		const end = Math.min(this.todos.length, this.scrollTop + this.visible);
+		const body: string[] = [];
+		for (let i = this.scrollTop; i < end; i++) body.push(todoRow(this.todos[i], this.theme, w));
+
+		return dockListFrame({
+			theme: this.theme,
+			width: w,
+			header,
+			summary: clip(`  ${paint(this.theme, "meta", progressSummary(this.todos))}`, w),
+			body,
+			range:
+				this.scrollTop > 0 || end < this.todos.length
+					? formatRange(this.theme, w, { start: this.scrollTop, end, total: this.todos.length })
+					: undefined,
+			hint: screenHint(this.theme, w, ["Esc close", "↑/↓ or k/j scroll", "PgUp/PgDn", "g/G or Home/End"]),
+		});
+	}
+}

package/extensions/todo/widget.ts

@@ -0,0 +1,47 @@
+/**
+ * The persistent one-line todo widget, shown above the editor while the list
+ * has work.
+ *
+ * It is a rail, not a screen: `runtime.syncWidget` sets it whenever the list
+ * changes, through a synchronous factory Pi calls at paint time, so this module
+ * stays on the registration path. `WIDGET_KEY` lives here for the same reason —
+ * the runtime and the tests read it without touching a component.
+ */
+
+import type { Theme } from "@earendil-works/pi-coding-agent";
+import { truncateToWidth, type Component } from "@earendil-works/pi-tui";
+import { SEPARATORS } from "../../lib/tui/glyphs.ts";
+import { paint } from "../../lib/tui/tokens.ts";
+import { progressCount, todoLabel } from "./format.ts";
+import { currentTodo } from "./state.ts";
+import type { Todo } from "./types.ts";
+
+/** Widget key used with `ctx.ui.setWidget()`. */
+export const WIDGET_KEY = "todo-widget";
+
+/**
+ * One-line widget summary: progress plus the current item, or a completion note
+ * when nothing is open. Label-first and glyph-free, matching the `goal` and
+ * `jobs` widgets. Callers clip it to the available width.
+ */
+function todoLine(todos: Todo[], theme: Theme): string {
+	const head = `${paint(theme, "accent", "Todos")}${paint(theme, "faint", SEPARATORS.item)}${paint(theme, "faint", progressCount(todos))}`;
+	const current = currentTodo(todos);
+	if (!current) return `${head} ${paint(theme, "faint", "completed")}`;
+	return `${head}${paint(theme, "faint", SEPARATORS.item)}${todoLabel(current, theme)}`;
+}
+
+/** Persistent one-line widget shown above the editor while the list has work. */
+export class TodoWidget implements Component {
+	constructor(
+		private readonly todos: Todo[],
+		private readonly theme: Theme,
+	) {}
+
+	invalidate(): void {}
+
+	render(width: number): string[] {
+		if (this.todos.length === 0) return [];
+		return [truncateToWidth(todoLine(this.todos, this.theme), Math.max(1, width), "…")];
+	}
+}

package/extensions/watch/commands.ts

@@ -8,10 +8,8 @@
  */
 
 import type { ExtensionAPI } from "@earendil-works/pi-coding-agent";
-import { withPolledScreen } from "../../lib/screen-session.ts";
 import { formatWatchList, shortLabel } from "./format.ts";
 import type { WatchRuntime } from "./runtime.ts";
-import { WatchListComponent } from "./tui.ts";
 
 /** How often the open screen re-reads live state. */
 const REFRESH_MS = 500;
@@ -92,6 +90,10 @@ export function registerCommands(pi: ExtensionAPI, runtime: WatchRuntime): void
 				return;
 			}
 
+			// The dock screen and its poll loop are the TUI's: the listing above and
+			// registration load neither.
+			const { withPolledScreen } = await import("../../lib/screen-session.ts");
+			const { WatchListComponent } = await import("./view/watch-screen.ts");
 			await withPolledScreen(
 				pi,
 				ctx,

package/extensions/watch/format.ts

@@ -14,7 +14,7 @@ import type { Theme } from "@earendil-works/pi-coding-agent";
 import { boundedTail, sanitizeLine } from "../../lib/format.ts";
 import { clip, clipLabel, labelLine } from "../../lib/tui/columns.ts";
 import { GLYPHS, SEPARATORS } from "../../lib/tui/glyphs.ts";
-import { byRunningFirst } from "../../lib/tui/rows.ts";
+import { byRunningFirst, statusRow, type StatusRow } from "../../lib/tui/rows.ts";
 import { paint, type TuiRole } from "../../lib/tui/tokens.ts";
 import type { PendingMatch, WatchRecord, WatchStatus } from "./types.ts";
 
@@ -23,12 +23,39 @@ export function compileRegex(pattern: string, caseSensitive: boolean): RegExp {
 	return new RegExp(pattern, caseSensitive ? "" : "i");
 }
 
+/**
+ * A watcher's pattern as `/<pattern>/<flags>`, with the wake badge appended:
+ * `/pat/`, `/pat/i`, `/pat/ · wake`, `/pat/i · wake`.
+ */
+export function formatPattern(watch: Pick<WatchRecord, "pattern" | "caseSensitive" | "wake">): string {
+	const flags = watch.caseSensitive ? "" : "i";
+	const badge = watch.wake ? `${SEPARATORS.item}wake` : "";
+	return `/${sanitizeLine(watch.pattern)}/${flags}${badge}`;
+}
+
 /** What a watcher reads: a path or a command, clipped for display. */
 export function sourceLabel(watch: WatchRecord): string {
 	if (watch.source.kind === "file") return clipLabel(watch.source.path ?? "");
 	return clipLabel(`$ ${watch.source.command ?? ""}`);
 }
 
+/** One watcher row: marker, status glyph, id, label, and a right-aligned count. */
+export function watchRow(
+	watch: WatchRecord,
+	theme: Theme,
+	width: number,
+	options: Pick<StatusRow, "selected" | "marker"> = {},
+): string {
+	return statusRow(theme, width, {
+		...options,
+		glyph: statusGlyphChar(watch.status),
+		glyphRole: statusRole(watch.status),
+		label: `${watch.id}  ${shortLabel(watch)}`,
+		labelRole: options.selected ? "accent" : "label",
+		trailing: `${watch.matchCount}`,
+	});
+}
+
 /** A watcher's label, falling back to its source. */
 export function shortLabel(watch: WatchRecord): string {
 	return clipLabel(watch.label || sourceLabel(watch));
@@ -62,11 +89,14 @@ export function statusGlyphChar(status: WatchStatus): string {
 	}
 }
 
-/** Short status word, including an exit code or error when present. */
+/** Short status word, including an exit code, the signal that ended it, or an error when present. */
 export function statusWord(watch: WatchRecord): string {
 	if (watch.status === "error" && watch.error) return `error (${watch.error})`;
-	if (watch.status === "exited" && watch.exitCode !== undefined && watch.exitCode !== null) {
-		return `exited (${watch.exitCode})`;
+	if (watch.status === "exited") {
+		if (typeof watch.exitCode === "number") return `exited (${watch.exitCode})`;
+		// Node reports a signalled child with a null code and the signal that ended it, so the
+		// code alone would leave a killed command looking like a clean exit.
+		if (watch.signal) return `exited (${watch.signal})`;
 	}
 	return watch.status;
 }
@@ -96,7 +126,7 @@ export function formatWatchStatus(watch: WatchRecord, now = Date.now()): string
 	const lines = [
 		`${watch.id}: ${statusWord(watch)}`,
 		`source: ${sourceLabel(watch)}`,
-		`pattern: /${sanitizeLine(watch.pattern)}/${watch.caseSensitive ? "" : "i"}`,
+		`pattern: ${formatPattern(watch)}`,
 	];
 	if (watch.exclude.length > 0)
 		lines.push(`exclude: ${watch.exclude.map((item) => `/${sanitizeLine(item)}/`).join(" ")}`);
@@ -174,9 +204,8 @@ export function formatWatchOutcomeLine(watch: WatchRecord, theme: Theme, now = D
 /** Unstyled, sanitized detail lines for the `/watch` focus pane. */
 export function formatWatchDetail(watch: WatchRecord, now = Date.now()): string[] {
 	const age = Math.max(0, (watch.endedAt ?? now) - watch.startedAt);
-	const flags = `${watch.caseSensitive ? "" : "i"}${watch.wake ? " · wake" : ""}`;
 	return [
-		sanitizeLine(`${sourceLabel(watch)} · /${watch.pattern}/${flags}`),
+		sanitizeLine(`${sourceLabel(watch)} · ${formatPattern(watch)}`),
 		sanitizeLine(
 			`${statusWord(watch)} · ${watch.linesRead} lines · ${watch.matchCount} matches · ${Math.round(age / 1000)}s`,
 		),

package/extensions/watch/render.ts

@@ -0,0 +1,57 @@
+/**
+ * The `WatchResult` transcript block: the `watch` tool's list-or-matches result.
+ *
+ * It wraps the shared `TailResult` kit over the `/watch`-style row rail, so the
+ * tool's `renderResult` stays a few lines and every row is drawn by `watchRow`
+ * in `format.ts`. The `/watch` screen draws the same rows through that helper;
+ * this module is on the registration path, and the screen is not.
+ */
+
+import type { Theme } from "@earendil-works/pi-coding-agent";
+import type { Component } from "@earendil-works/pi-tui";
+import { TailResult, type TailResultInput } from "../../lib/tui/tool.ts";
+import { watchRow } from "./format.ts";
+import type { WatchRecord } from "./types.ts";
+
+/** Input for the transcript result: a themed watcher list or a matched-line tail. */
+export type WatchResultInput =
+	| { kind: "list"; watches: WatchRecord[]; more: number }
+	| { kind: "lines"; label: string; lines: string[]; earlier: number };
+
+/** Map the watch vocabulary onto the shared transcript tail block. */
+function watchTail(input: WatchResultInput): TailResultInput<WatchRecord> {
+	if (input.kind === "lines") {
+		return { kind: "lines", lines: input.lines, earlier: input.earlier, earlierLabel: input.label };
+	}
+	return {
+		kind: "list",
+		rows: input.watches,
+		more: input.more,
+		rowLine: (watch, width, theme) => watchRow(watch, theme, width, { marker: false }),
+	};
+}
+
+/**
+ * Transcript result block for the `watch` tool: the shared tail block over the
+ * `/watch`-style row rail or the themed matched-line tail. Reused across renders.
+ */
+export class WatchResult implements Component {
+	private readonly view: TailResult<WatchRecord>;
+
+	constructor(input: WatchResultInput, theme: Theme) {
+		this.view = new TailResult(watchTail(input), theme);
+	}
+
+	/** Update in place so the transcript can reuse this component across renders. */
+	setInput(input: WatchResultInput, theme: Theme): void {
+		this.view.setInput(watchTail(input), theme);
+	}
+
+	invalidate(): void {
+		this.view.invalidate();
+	}
+
+	render(width: number): string[] {
+		return this.view.render(width);
+	}
+}

package/extensions/watch/runtime.ts

@@ -14,7 +14,7 @@ import type { ExtensionContext } from "@earendil-works/pi-coding-agent";
 import { resolveEffectiveCwd } from "../../lib/env.ts";
 import { LineSplitter } from "../../lib/lines.ts";
 import type { KillTreeFn, SpawnFn, SpawnedProcess } from "../../lib/spawn.ts";
-import { createChildSupervisor } from "./child.ts";
+import { createChildSupervisor, KILL_GRACE_MS } from "../../lib/child.ts";
 import { DEFAULT_CONFIG, loadConfig, type WatchConfig } from "./config.ts";
 import { sanitizeUntrustedLine } from "../../lib/format.ts";
 import { defaultInterval } from "../../lib/timer.ts";
@@ -24,8 +24,6 @@ import type { PendingMatch, WatchMatch, WatchRecord, WatchSource } from "./types
 
 /** Largest slice read from a file per tick. */
 const MAX_CHUNK = 1024 * 1024;
-/** Grace before a stopped command escalates to SIGKILL; `child.ts` defaults the same. */
-const KILL_GRACE_MS = 2000;
 
 /** Internal watcher state: the public record plus non-serializable fields. */
 interface Internal {
@@ -277,24 +275,29 @@ export function createWatchRuntime(options: WatchRuntimeOptions = {}): WatchRunt
 	};
 
 	const startCommand = (w: Internal): void => {
-		const error = children.start(w, w.source.command ?? "", w.source.cwd ?? process.cwd(), {
-			onData: (chunk) => consume(w, chunk, now()),
-			onSettled: (outcome) => {
-				if (w.status !== "running") return;
-				if (outcome.kind === "closed") {
-					flushPending(w, now());
-					w.status = "exited";
-					w.exitCode = outcome.code;
-					w.signal = outcome.signal;
-				} else {
-					w.status = "error";
-					w.error = outcome.message;
-				}
-				w.endedAt = now();
-				ui.paint();
-				if (runningCount() === 0) stopClock();
+		const error = children.start(
+			w,
+			w.source.command ?? "",
+			{ cwd: w.source.cwd ?? process.cwd() },
+			{
+				onData: (chunk) => consume(w, chunk, now()),
+				onSettled: (outcome) => {
+					if (w.status !== "running") return;
+					if (outcome.kind === "closed") {
+						flushPending(w, now());
+						w.status = "exited";
+						w.exitCode = outcome.code;
+						w.signal = outcome.signal;
+					} else {
+						w.status = "error";
+						w.error = outcome.message;
+					}
+					w.endedAt = now();
+					ui.paint();
+					if (runningCount() === 0) stopClock();
+				},
 			},
-		});
+		);
 		if (error === undefined) return;
 		w.status = "error";
 		w.error = error;
@@ -313,8 +316,10 @@ export function createWatchRuntime(options: WatchRuntimeOptions = {}): WatchRunt
 
 	const add = (opts: AddWatchOptions, ctx: ExtensionContext): WatchRecord => {
 		if (!config.enabled) throw new Error("watch is disabled.");
-		if (watches.size >= config.maxWatchers) {
-			throw new Error(`at most ${config.maxWatchers} watchers; stop one first.`);
+		if (runningCount() >= config.maxWatchers) {
+			throw new Error(
+				`at most ${config.maxWatchers} live watcher${config.maxWatchers === 1 ? "" : "s"}; stop one first.`,
+			);
 		}
 		const base = resolveEffectiveCwd(ctx.cwd);
 		const source: WatchSource = opts.path

package/extensions/watch/tools.ts

@@ -8,7 +8,6 @@
  */
 
 import type { ExtensionAPI, ExtensionContext } from "@earendil-works/pi-coding-agent";
-import { sanitizeLine } from "../../lib/format.ts";
 import { errorResult, textResult } from "../../lib/tool-result.ts";
 import { reuseText, toolDetails } from "../../lib/tui/chrome.ts";
 import { callLine, detailsOrLine, rejectionLine } from "../../lib/tui/tool.ts";
@@ -17,6 +16,7 @@ import { paint } from "../../lib/tui/tokens.ts";
 import {
 	compareWatches,
 	formatCallText,
+	formatPattern,
 	formatTail,
 	formatWatchList,
 	formatWatchOutcomeLine,
@@ -25,7 +25,7 @@ import {
 } from "./format.ts";
 import type { WatchRuntime } from "./runtime.ts";
 import { WatchParams, normalizeCall, type WatchArgs, type WatchCall } from "./schema.ts";
-import { WatchResult, type WatchResultInput } from "./tui.ts";
+import { WatchResult, type WatchResultInput } from "./render.ts";
 import type { WatchDetails } from "./types.ts";
 
 export const TOOL_NAME = "watch";
@@ -81,9 +81,9 @@ export function registerTools(pi: ExtensionAPI, runtime: WatchRuntime): void {
 							},
 							ctx as ExtensionContext,
 						);
-						const flags = `${call.caseSensitive ? "" : "i"}${watch.wake ? ", wake" : ""}`;
+						const pattern = formatPattern(watch);
 						return textResult(
-							`Watching ${watch.id}: ${sourceLabel(watch)} → /${sanitizeLine(watch.pattern)}/${flags}\nRead with \`watch matches ${watch.id}\` or \`watch logs ${watch.id}\`.`,
+							`Watching ${watch.id}: ${sourceLabel(watch)} → ${pattern}\nRead with \`watch matches ${watch.id}\` or \`watch logs ${watch.id}\`.`,
 							{ action: "add", watch } satisfies WatchDetails,
 						);
 					}

package/extensions/watch/{tui.ts → view/watch-screen.ts}

@@ -1,87 +1,25 @@
 /**
- * Terminal rendering for the watch extension's `/watch` screen.
+ * The `/watch` screen: a dismissible list with a focused detail pane and a
+ * matches view, drawn as a `DockListScreen`.
  *
- * `WatchListComponent` is the dismissible `/watch` screen with a focused detail
- * pane and a matches view. It reads live state through injected closures and
- * tracks the selection by id so a live re-sort cannot move the cursor, through
- * the shared `IdCursor` and `LinePane`.
+ * It reads live state through injected closures and tracks the selection by id
+ * so a live re-sort cannot move the cursor, through the shared `IdCursor` and
+ * `LinePane`. The frame, the navigation keys, the y/N confirmation, and the
+ * matches pane come from the shared `DockListScreen`, so this module owns only
+ * the watch vocabulary: the rows, the focus block, the counts, the hints, and
+ * what the verbs do. Matched lines arrive already sanitized by the runtime.
  *
- * The frame, the navigation keys, the y/N confirmation, and the matches pane come
- * from the shared `DockListScreen`, so this module owns only the watch
- * vocabulary: the row, the focus block, the counts, the hints, and what the
- * verbs do. Matched lines arrive already sanitized by the runtime, so no
- * untrusted escape sequence reaches the terminal here.
+ * Full-screen surfaces live under `view/` and load on first use: the `/watch`
+ * command imports this module behind its TUI branch, so registration never
+ * pays for it.
  */
 
 import type { Theme } from "@earendil-works/pi-coding-agent";
-import type { Component } from "@earendil-works/pi-tui";
-import type { ScreenHint, ViewportRowsSource } from "../../lib/tui/chrome.ts";
-import { DockListScreen, type DetailContents } from "../../lib/tui/dock-screen.ts";
-import { statusRow, type StatusRow } from "../../lib/tui/rows.ts";
-import { TailResult, type TailResultInput } from "../../lib/tui/tool.ts";
-import { paint } from "../../lib/tui/tokens.ts";
-import { compareWatches, formatWatchDetail, shortLabel, statusGlyphChar, statusRole } from "./format.ts";
-import type { WatchRecord } from "./types.ts";
-
-/** One watcher row: marker, status glyph, id, label, and a right-aligned count. */
-function watchRow(
-	watch: WatchRecord,
-	theme: Theme,
-	width: number,
-	options: Pick<StatusRow, "selected" | "marker"> = {},
-): string {
-	return statusRow(theme, width, {
-		...options,
-		glyph: statusGlyphChar(watch.status),
-		glyphRole: statusRole(watch.status),
-		label: `${watch.id}  ${shortLabel(watch)}`,
-		labelRole: options.selected ? "accent" : "label",
-		trailing: `${watch.matchCount}`,
-	});
-}
-
-/** Input for the transcript result: a themed watcher list or a matched-line tail. */
-export type WatchResultInput =
-	| { kind: "list"; watches: WatchRecord[]; more: number }
-	| { kind: "lines"; label: string; lines: string[]; earlier: number };
-
-/** Map the watch vocabulary onto the shared transcript tail block. */
-function watchTail(input: WatchResultInput): TailResultInput<WatchRecord> {
-	if (input.kind === "lines") {
-		return { kind: "lines", lines: input.lines, earlier: input.earlier, earlierLabel: input.label };
-	}
-	return {
-		kind: "list",
-		rows: input.watches,
-		more: input.more,
-		rowLine: (watch, width, theme) => watchRow(watch, theme, width, { marker: false }),
-	};
-}
-
-/**
- * Transcript result block for the `watch` tool: the shared tail block over the
- * `/watch`-style row rail or the themed matched-line tail. Reused across renders.
- */
-export class WatchResult implements Component {
-	private readonly view: TailResult<WatchRecord>;
-
-	constructor(input: WatchResultInput, theme: Theme) {
-		this.view = new TailResult(watchTail(input), theme);
-	}
-
-	/** Update in place so the transcript can reuse this component across renders. */
-	setInput(input: WatchResultInput, theme: Theme): void {
-		this.view.setInput(watchTail(input), theme);
-	}
-
-	invalidate(): void {
-		this.view.invalidate();
-	}
-
-	render(width: number): string[] {
-		return this.view.render(width);
-	}
-}
+import type { ScreenHint, ViewportRowsSource } from "../../../lib/tui/chrome.ts";
+import { DockListScreen, type DetailContents } from "../../../lib/tui/dock-screen.ts";
+import { paint } from "../../../lib/tui/tokens.ts";
+import { compareWatches, formatWatchDetail, shortLabel, watchRow } from "../format.ts";
+import type { WatchRecord } from "../types.ts";
 
 export interface WatchListCallbacks {
 	/** Current matched lines for a watcher, or undefined when unknown. */
@@ -157,8 +95,8 @@ export class WatchListComponent extends DockListScreen<WatchRecord> {
 			"Esc close",
 			"↑/↓ or j/k select",
 			{ text: "Enter or l matches", color: "accent" },
-			{ text: "x or K stop", color: "warning" },
-			{ text: "d clear stopped", color: "warning" },
+			{ text: "x or K stop", color: "warn" },
+			{ text: "d clear stopped", color: "warn" },
 			"PgUp/PgDn",
 		];
 	}

package/extensions/web-access/fetch/tool.ts

@@ -28,9 +28,9 @@ import { charLength } from "../text.ts";
 import { oneLine } from "../transcript.ts";
 import { createPageCache, type PageCache } from "./cache.ts";
 import type { WebFetchConfig } from "./config.ts";
-import { findPassages, type Passage } from "./find.ts";
+import type { Passage } from "./find.ts";
 import { formatMatches, formatPage } from "./format.ts";
-import { runFetch, type FetchDeps, type PageResult } from "./page.ts";
+import type { FetchDeps, PageResult } from "./page.ts";
 import { resolveRequest, WebFetchOutput, WebFetchParams, type FetchResponse, type WebFetchArgs } from "./schema.ts";
 import type { FetchRequest } from "./types.ts";
 import { loadFetchConfig } from "../config.ts";
@@ -66,6 +66,10 @@ async function loadPage(
 	deps: FetchDeps,
 	cache: PageCache,
 ): Promise<LoadedPage> {
+	// The page loader is the call's, not registration's: the schema and the
+	// renderers above never need it, so a listing loads neither it nor its
+	// extract/ssrf/PDF subtree.
+	const { runFetch } = await import("./page.ts");
 	const cacheable = config.cacheEnabled && request.cacheable && !request.refresh;
 	const cachedEntry = cacheable ? cache.get(url, config.cacheTtlMs) : undefined;
 	if (cachedEntry) return { page: cachedEntry, cached: true, fetchedAt: cachedEntry.fetchedAt };
@@ -83,7 +87,10 @@ async function loadPage(
 }
 
 /** Build the response entry and model-facing text for one fetched page. */
-function pageResult(loaded: LoadedPage, request: FetchRequest): { response: FetchResponse; text: string } {
+async function pageResult(
+	loaded: LoadedPage,
+	request: FetchRequest,
+): Promise<{ response: FetchResponse; text: string }> {
 	const { page, cached, fetchedAt } = loaded;
 	const finding = request.find.length > 0;
 
@@ -93,6 +100,7 @@ function pageResult(loaded: LoadedPage, request: FetchRequest): { response: Fetc
 	let matchesTruncated = false;
 
 	if (finding) {
+		const { findPassages } = await import("./find.ts");
 		// Request one extra so a full list proves more hits exist; only the cap is shown.
 		const found = findPassages(page.text, request.find, {
 			mode: request.mode,
@@ -211,7 +219,7 @@ export function registerFetchTool(pi: ExtensionAPI, deps: FetchToolDeps = {}): v
 			let text: string;
 			try {
 				const loaded = await loadPage(request.url, request, config, signal, fetchDeps, cache);
-				({ response: page, text } = pageResult(loaded, request));
+				({ response: page, text } = await pageResult(loaded, request));
 			} catch (error) {
 				const message = error instanceof Error ? error.message : String(error);
 				({ response: page, text } = fetchErrorResult(request.url, request, message));