@gavin-hu/my-pi-agent 0.8.1 → 0.10.0

package/extensions/todo/format.ts

@@ -3,8 +3,9 @@
  */
 
 import type { Theme } from "@earendil-works/pi-coding-agent";
-import { sliceByColumn, truncateToWidth, visibleWidth, wrapTextWithAnsi } from "@earendil-works/pi-tui";
-import { BODY_INDENT, expandHint, GLYPH_GAP, GLYPHS } from "../../lib/ui.ts";
+import { truncateToWidth, wrapTextWithAnsi } from "@earendil-works/pi-tui";
+import { expandHint, GLYPH_GAP, GLYPHS } from "../../lib/tui/glyphs.ts";
+import { paint, type TuiRole } from "../../lib/tui/tokens.ts";
 import { completedCount, currentTodo } from "./state.ts";
 import type { Todo, TodoStatus } from "./types.ts";
 
@@ -16,9 +17,6 @@ export function compareByActivity(a: Todo, b: Todo): number {
 	return STATUS_ORDER[a.status] - STATUS_ORDER[b.status];
 }
 
-/** Longest first-item preview shown in the transcript call line. */
-const CALL_PREVIEW_WIDTH = 40;
-
 /** Plain status glyph per status; `todoGlyph` adds the theme color. */
 const STATUS_GLYPH: Record<TodoStatus, string> = {
 	pending: GLYPHS.pending,
@@ -26,23 +24,43 @@ const STATUS_GLYPH: Record<TodoStatus, string> = {
 	completed: GLYPHS.check,
 };
 
-/** Themed status glyph, shared by the widget and the transcript renderer. */
-export function todoGlyph(todo: Todo, theme: Theme): string {
+/** The design role a status glyph is drawn in. */
+export function todoGlyphRole(todo: Todo): TuiRole {
 	switch (todo.status) {
 		case "completed":
-			return theme.fg("success", STATUS_GLYPH.completed);
+			return "ok";
 		case "in_progress":
-			return theme.fg("accent", STATUS_GLYPH.in_progress);
+			return "accent";
 		default:
-			return theme.fg("dim", STATUS_GLYPH.pending);
+			return "faint";
 	}
 }
 
+/** The status glyph, from the shared vocabulary. */
+export function todoGlyphChar(todo: Todo): string {
+	return STATUS_GLYPH[todo.status];
+}
+
+/** The design role an item label is drawn in. */
+export function todoLabelRole(todo: Todo): TuiRole {
+	if (todo.status === "completed") return "faint";
+	if (todo.status === "in_progress") return "label";
+	return "meta";
+}
+
+/** The item text: the active form while in progress, the content otherwise. */
+export function todoLabelText(todo: Todo): string {
+	return todo.status === "in_progress" ? (todo.activeForm ?? todo.content) : todo.content;
+}
+
+/** Themed status glyph, shared by the widget and the transcript renderer. */
+export function todoGlyph(todo: Todo, theme: Theme): string {
+	return paint(theme, todoGlyphRole(todo), todoGlyphChar(todo));
+}
+
 /** Themed item text: completed dim, in-progress accented, pending muted. */
 export function todoLabel(todo: Todo, theme: Theme): string {
-	if (todo.status === "completed") return theme.fg("dim", todo.content);
-	if (todo.status === "in_progress") return theme.fg("text", todo.activeForm ?? todo.content);
-	return theme.fg("muted", todo.content);
+	return paint(theme, todoLabelRole(todo), todoLabelText(todo));
 }
 
 /** "2/5" — completed over total. */
@@ -86,22 +104,16 @@ export function formatTodoText(todos: Todo[]): string {
  * One-line body for the transcript call renderer.
  *
  * The renderer owns the styled `todo ` title, so this returns only the body.
- * `todos` is `undefined` while the call's arguments are still streaming, which
- * is distinct from an empty list (a real clear). `argsComplete` disambiguates
- * the tail end of the stream.
+ * Progress is the summary; the result rail lists the items (active work first),
+ * so the call line does not repeat the current item. `todos` is `undefined`
+ * while the call's arguments are still streaming, which is distinct from an
+ * empty list (a real clear). `argsComplete` disambiguates the tail end of the
+ * stream.
  */
 export function formatCallText(todos: Todo[] | undefined, argsComplete = true): string {
 	if (todos === undefined) return argsComplete ? "→ clear list" : "→ …";
 	if (todos.length === 0) return "→ clear list";
-
-	const current = currentTodo(todos);
-	const label = current ? (current.activeForm ?? current.content).trim() : "completed";
-	if (!label) return argsComplete ? `→ ${progressCount(todos)} · …` : "→ …";
-	// `strict` drops a wide grapheme that would cross the boundary, so the slice
-	// plus ellipsis never exceeds `CALL_PREVIEW_WIDTH` columns.
-	const preview =
-		visibleWidth(label) > CALL_PREVIEW_WIDTH ? `${sliceByColumn(label, 0, CALL_PREVIEW_WIDTH - 1, true)}…` : label;
-	return `→ ${progressCount(todos)} · ${preview}`;
+	return `→ ${progressCount(todos)}`;
 }
 
 /** Rows and footer for the transcript result rail. */
@@ -113,18 +125,19 @@ export interface TodoRailInput {
 }
 
 /**
- * Transcript result rail: each row is indented by `BODY_INDENT`, led by its
- * status glyph, and its label wrapped with continuation rows aligned under the
- * text. A trailing `… N more` follows when rows were capped. Progress lives on
- * the call line, so the rail carries no footer. Every line is clipped to
- * `width`.
+ * Transcript result rail: each row is led by its status glyph, and its label
+ * wrapped with continuation rows aligned under the text. A trailing `… N more`
+ * follows when rows were capped. Progress lives on the call line, so the rail
+ * carries no footer. Every line is clipped to `width`.
+ *
+ * The rail draws at its own left edge; the tool-block frame supplies
+ * `BODY_INDENT`, so the rail must not add it again.
  */
 export function todoRailLines(input: TodoRailInput, theme: Theme, width: number): string[] {
 	const w = Math.max(1, width);
 	// All three status glyphs are single-column, so the text column is fixed.
-	const textColumn = BODY_INDENT + 1 + GLYPH_GAP;
+	const textColumn = 1 + GLYPH_GAP;
 	const inner = Math.max(1, w - textColumn);
-	const pad = " ".repeat(BODY_INDENT);
 	const gap = " ".repeat(GLYPH_GAP);
 	const continuation = " ".repeat(textColumn);
 	const lines: string[] = [];
@@ -132,11 +145,11 @@ export function todoRailLines(input: TodoRailInput, theme: Theme, width: number)
 		const glyph = todoGlyph(todo, theme);
 		const wrapped = wrapTextWithAnsi(todoLabel(todo, theme), inner);
 		wrapped.forEach((line, index) => {
-			lines.push(index === 0 ? `${pad}${glyph}${gap}${line}` : `${continuation}${line}`);
+			lines.push(index === 0 ? `${glyph}${gap}${line}` : `${continuation}${line}`);
 		});
 	}
 	if (input.more && input.more > 0) {
-		lines.push(`${continuation}${theme.fg("dim", `… ${input.more} more`)} ${expandHint(theme)}`);
+		lines.push(`${continuation}${paint(theme, "faint", `… ${input.more} more`)} ${expandHint(theme)}`);
 	}
 	return lines.map((line) => truncateToWidth(line, w, "…"));
 }

package/extensions/todo/tools.ts

@@ -14,7 +14,9 @@ import type { JsonValue } from "@earendil-works/pi-ai";
 import type { ExtensionAPI } from "@earendil-works/pi-coding-agent";
 import { sanitizeLine } from "../../lib/format.ts";
 import { TODO_TOOL } from "../../lib/tool-names.ts";
-import { reuseText, toolDetails } from "../../lib/tui.ts";
+import { GLYPHS } from "../../lib/tui/glyphs.ts";
+import { reuseText, toolDetails } from "../../lib/tui/chrome.ts";
+import { paint } from "../../lib/tui/tokens.ts";
 import { compareByActivity, formatCallText, formatTodoText, type TodoRailInput } from "./format.ts";
 import type { TodoRuntime } from "./runtime.ts";
 import { normalizeTodos, TodoParams, TodoResult, type TodoArgs } from "./schema.ts";
@@ -97,7 +99,7 @@ export function registerTools(pi: ExtensionAPI, runtime: TodoRuntime): void {
 			const text = reuseText(context.lastComponent);
 			text.setText(
 				theme.fg("toolTitle", theme.bold(`${TOOL_NAME} `)) +
-					theme.fg("muted", formatCallText(args.todos as Todo[] | undefined, context.argsComplete)),
+					paint(theme, "meta", formatCallText(args.todos as Todo[] | undefined, context.argsComplete)),
 			);
 			return text;
 		},
@@ -106,7 +108,7 @@ export function registerTools(pi: ExtensionAPI, runtime: TodoRuntime): void {
 			const text = reuseText(context.lastComponent);
 			const details = toolDetails<TodoDetails>(result.details);
 			if (details?.error) {
-				text.setText(theme.fg("error", `Error: ${sanitizeLine(details.error)}`));
+				text.setText(paint(theme, "bad", `Error: ${sanitizeLine(details.error)}`));
 				return text;
 			}
 			// A call rejected before `execute` (argument validation or a permission
@@ -117,7 +119,7 @@ export function registerTools(pi: ExtensionAPI, runtime: TodoRuntime): void {
 				return text;
 			}
 			if (details.todos.length === 0) {
-				text.setText(theme.fg("success", "✓ ") + theme.fg("muted", "Cleared the todo list"));
+				text.setText(paint(theme, "ok", `${GLYPHS.check} `) + paint(theme, "meta", "Cleared the todo list"));
 				return text;
 			}
 

package/extensions/todo/tui.ts

@@ -8,10 +8,24 @@
 
 import type { Theme } from "@earendil-works/pi-coding-agent";
 import { truncateToWidth, type Component, type TuiMouseEvent, type TuiMouseEventResult } from "@earendil-works/pi-tui";
-import { clampScroll, fitRows, formatRange, isCloseKey, navigateScroll, wheelDelta } from "../../lib/list-cursor.ts";
-import { screenHeader, screenHint, type ViewportRowsSource } from "../../lib/tui.ts";
-import { BODY_INDENT } from "../../lib/ui.ts";
-import { progressCount, progressSummary, todoGlyph, todoLabel, todoRailLines, type TodoRailInput } from "./format.ts";
+import { clampScroll, fitRows, formatRange, isCloseKey, navigateScroll, wheelDelta } from "../../lib/tui/cursor.ts";
+import { dockListFrame, screenHint, type ViewportRowsSource } from "../../lib/tui/chrome.ts";
+import { clip } from "../../lib/tui/columns.ts";
+import { emptyState, listRow } from "../../lib/tui/rows.ts";
+import { SEPARATORS } from "../../lib/tui/glyphs.ts";
+import { titleRule } from "../../lib/tui/rules.ts";
+import { paint } from "../../lib/tui/tokens.ts";
+import {
+	progressCount,
+	progressSummary,
+	todoGlyphChar,
+	todoGlyphRole,
+	todoLabel,
+	todoLabelRole,
+	todoLabelText,
+	todoRailLines,
+	type TodoRailInput,
+} from "./format.ts";
 import { currentTodo } from "./state.ts";
 import type { Todo } from "./types.ts";
 
@@ -23,8 +37,12 @@ const SCREEN_DEFAULT_ITEMS = 12;
 
 /** One indented item line, clipped to `width`. */
 function todoRow(todo: Todo, theme: Theme, width: number): string {
-	const indent = " ".repeat(BODY_INDENT);
-	return truncateToWidth(`${indent}${todoGlyph(todo, theme)} ${todoLabel(todo, theme)}`, width, "…");
+	return listRow(theme, width, {
+		glyph: todoGlyphChar(todo),
+		glyphRole: todoGlyphRole(todo),
+		label: todoLabelText(todo),
+		labelRole: todoLabelRole(todo),
+	});
 }
 
 /**
@@ -33,10 +51,10 @@ function todoRow(todo: Todo, theme: Theme, width: number): string {
  * `jobs` widgets. Callers clip it to the available width.
  */
 function todoLine(todos: Todo[], theme: Theme): string {
-	const head = `${theme.fg("accent", "Todos")} ${theme.fg("dim", "·")} ${theme.fg("dim", progressCount(todos))}`;
+	const head = `${paint(theme, "accent", "Todos")}${paint(theme, "faint", SEPARATORS.item)}${paint(theme, "faint", progressCount(todos))}`;
 	const current = currentTodo(todos);
-	if (!current) return `${head} ${theme.fg("dim", "completed")}`;
-	return `${head} ${theme.fg("dim", "·")} ${todoLabel(current, theme)}`;
+	if (!current) return `${head} ${paint(theme, "faint", "completed")}`;
+	return `${head}${paint(theme, "faint", SEPARATORS.item)}${todoLabel(current, theme)}`;
 }
 
 /** Transcript result block: the indented glyph rail, wrapping at the render width. */
@@ -139,32 +157,34 @@ export class TodoListComponent implements Component {
 
 	render(width: number): string[] {
 		const w = Math.max(1, width);
-		const lines: string[] = [screenHeader(this.theme, w, "Todos")];
+		const header = titleRule(this.theme, w, "Todos");
 
 		if (this.todos.length === 0) {
-			lines.push(truncateToWidth(`  ${this.theme.fg("dim", "No todos yet. Ask the agent to plan some work.")}`, w));
-			lines.push("");
-			lines.push(screenHint(this.theme, w, ["Esc close"]));
-			lines.push("");
-			return lines;
+			return dockListFrame({
+				header,
+				body: emptyState(this.theme, w, { label: "No todos yet. Ask the agent to plan some work." }),
+				hint: screenHint(this.theme, w, ["Esc close"]),
+			});
 		}
 
-		lines.push(truncateToWidth(`  ${this.theme.fg("muted", progressSummary(this.todos))}`, w));
-		lines.push("");
 		// header, summary, blank, blank-after-list, hint, blank
 		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);
-		for (let i = this.scrollTop; i < end; i++) lines.push(todoRow(this.todos[i], this.theme, w));
-		if (this.scrollTop > 0 || end < this.todos.length) {
-			lines.push(formatRange(this.theme, w, { start: this.scrollTop, end, total: this.todos.length }));
-		}
-
-		lines.push("");
-		lines.push(screenHint(this.theme, w, ["Esc close", "↑/↓ or k/j scroll", "PgUp/PgDn", "g/G or Home/End"]));
-		lines.push("");
-		return lines;
+		const body: string[] = [];
+		for (let i = this.scrollTop; i < end; i++) body.push(todoRow(this.todos[i], this.theme, w));
+
+		return dockListFrame({
+			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/watch/README.md

@@ -11,6 +11,12 @@ pi -e .                              # load the whole @gavin-hu/my-pi-agent pack
 pi install ./                        # install the package
 ```
 
+## Tool rendering
+
+How the `watch` call and its result look in the transcript — the call line as a headline and the body indented under it:
+
+<img src="../../assets/tools/watch.png" alt="The watch tool's result: the call line and an indented body with a running file watcher and an exited command watcher" width="100%">
+
 ## What it does
 
 - Registers one model-callable tool, `watch`, with actions `add`, `list`,
@@ -85,9 +91,11 @@ and the command's `pid`/`exitCode`/`signal` when applicable.
 
 ### Transcript
 
-`add` and `stop` render one outcome line; `list` renders a `/watch`-style rail
-capped at eight rows; `matches` and `logs` render the tail of the sanitized
-lines, with the hidden count noted above and `(ctrl+o to expand)`.
+`add` and `stop` render one outcome line; `list` renders the `/watch` rows
+capped at eight rows, minus the selection-marker column (`listRow`'s
+`marker: false`) that only the interactive screen needs; `matches` and `logs`
+render the tail of the sanitized lines, with the hidden count noted above and
+`(ctrl+o to expand)`.
 
 ### Command: /watch
 
@@ -172,8 +180,8 @@ other.
 | Annotations | `readOnlyHint: false`, `destructiveHint: true`, `idempotentHint: false`, `openWorldHint: true`. |
 | `outputSchema` | None; the result carries `details` only (no `structuredContent` mirror). |
 | State storage | In-memory runtime closure; no registry, no `getBranch()` rebuild. |
-| Injected context | A hidden `watch-context` custom message; pending matches are read from the runtime, never from the transcript. |
-| Lifecycle | `session_start` loads config and re-arms `onMatch`; `session_tree` repaints; `agent_start`/`agent_settled` track busy; `before_agent_start` injects pending matches; `context` keeps the newest note; `session_shutdown` kills commands and clears chips. |
+| Injected context | A shared transcript notice (`my-pi-agent/notice`), rendered by bytefly; pending matches are read from the runtime, never from the transcript. |
+| Lifecycle | `session_start` loads config and re-arms `onMatch`; `session_tree` repaints; `agent_start`/`agent_settled` track busy; `before_agent_start` posts pending matches as a notice; `context` prunes stale notices of its own source; `session_shutdown` kills commands and clears chips. |
 
 `watch` is gated by `PI_DISABLED_EXTENSIONS` like every extension.
 
@@ -193,15 +201,15 @@ turn — so a match is never dropped when the wake window is busy.
 
 | Module | Responsibility |
 |---|---|
-| `index.ts` | Extension factory: registers the tool and command, wires the lifecycle and injected context. |
+| `index.ts` | Extension factory: registers the tool and command, wires the lifecycle and the shared notices. |
 | `tools.ts` | The `watch` tool definition, execution, and transcript rendering. |
 | `schema.ts` | TypeBox parameters and pure `normalizeCall` validation. |
 | `types.ts` | `WatchAction`/`WatchStatus`, `WatchRecord`, `WatchDetails`, `PendingMatch`. |
 | `runtime.ts` | The session-scoped watcher table, matcher, poll tick, and shutdown. |
 | `process.ts` | Injectable spawn and process-tree kill. |
 | `format.ts` | Pure sanitization and text formatting. |
-| `ui.ts` | Status chips and the match alert. |
-| `tui.ts` | `WatchResult` transcript block and the `/watch` dock screen. |
+| `ui.ts` | Status chips and the match alert, over the shared `lib/tui/status-controller.ts`. |
+| `tui.ts` | `WatchResult` transcript block and the `/watch` dock screen, drawn from the `lib/tui/` kit (`titleRule`, `listRow`, `emptyState`, `IdCursor`, `LinePane`). |
 | `commands.ts` | The `/watch` command and its completions. |
 | `config.ts` | The `watch` config section load and normalization. |
 

package/extensions/watch/format.ts

@@ -12,7 +12,8 @@
 import type { Theme } from "@earendil-works/pi-coding-agent";
 import { truncateToWidth } from "@earendil-works/pi-tui";
 import { sanitizeLine } from "../../lib/format.ts";
-import { GLYPHS } from "../../lib/ui.ts";
+import { GLYPHS, SEPARATORS } from "../../lib/tui/glyphs.ts";
+import { paint, type TuiRole } from "../../lib/tui/tokens.ts";
 import type { PendingMatch, WatchRecord, WatchStatus } from "./types.ts";
 
 /** Longest label shown in the transcript or `/watch` screen. */
@@ -63,20 +64,39 @@ export function shortLabel(watch: WatchRecord): string {
 	return clipLabel(watch.label || sourceLabel(watch));
 }
 
-/** Width-1 themed glyph for a watcher status. */
-export function statusGlyph(status: WatchStatus, theme: Theme): string {
+/** The design role a watcher status is drawn in. */
+export function statusRole(status: WatchStatus): TuiRole {
+	switch (status) {
+		case "exited":
+			return "ok";
+		case "error":
+			return "bad";
+		case "stopped":
+			return "meta";
+		default:
+			return "accent";
+	}
+}
+
+/** Width-1 glyph for a watcher status, from the shared vocabulary. */
+export function statusGlyphChar(status: WatchStatus): string {
 	switch (status) {
 		case "exited":
-			return theme.fg("success", GLYPHS.check);
+			return GLYPHS.check;
 		case "error":
-			return theme.fg("error", GLYPHS.warn);
+			return GLYPHS.warn;
 		case "stopped":
-			return theme.fg("muted", GLYPHS.stopped);
+			return GLYPHS.stopped;
 		default:
-			return theme.fg("accent", GLYPHS.target);
+			return GLYPHS.target;
 	}
 }
 
+/** Width-1 themed glyph for a watcher status. */
+export function statusGlyph(status: WatchStatus, theme: Theme): string {
+	return paint(theme, statusRole(status), statusGlyphChar(status));
+}
+
 /** Short status word, including an exit code or error when present. */
 export function statusWord(watch: WatchRecord): string {
 	if (watch.status === "error" && watch.error) return `error (${watch.error})`;
@@ -175,22 +195,22 @@ export function formatCallText(action: string, args: Record<string, unknown>, ar
 
 /** One-line outcome for a watcher, themed for the transcript result. */
 export function formatWatchOutcomeLine(watch: WatchRecord, theme: Theme, now = Date.now()): string {
-	const sep = theme.fg("dim", " · ");
+	const sep = paint(theme, "faint", SEPARATORS.item);
 	const age = Math.max(0, (watch.endedAt ?? now) - watch.startedAt);
 	const outcome =
 		watch.status === "error"
-			? theme.fg("error", statusWord(watch))
-			: theme.fg("dim", `${watch.matchCount} match${watch.matchCount === 1 ? "" : "es"}`);
+			? paint(theme, "bad", statusWord(watch))
+			: paint(theme, "faint", `${watch.matchCount} match${watch.matchCount === 1 ? "" : "es"}`);
 	return (
 		statusGlyph(watch.status, theme) +
 		" " +
-		theme.fg("accent", watch.id) +
+		paint(theme, "accent", watch.id) +
 		" " +
-		theme.fg("muted", shortLabel(watch)) +
+		paint(theme, "meta", shortLabel(watch)) +
 		sep +
 		outcome +
 		sep +
-		theme.fg("dim", `${Math.round(age / 1000)}s`)
+		paint(theme, "faint", `${Math.round(age / 1000)}s`)
 	);
 }
 

package/extensions/watch/index.ts

@@ -3,19 +3,20 @@
  *
  * Registers the `watch` tool and `/watch` command. Watchers read a file or a
  * command's merged output, match each new line against a regular expression,
- * and alert the user; matching lines are reported to the model at the next
- * turn, or wake a turn immediately when the watcher opted into `wake`. Watchers
- * are session-only and stopped on shutdown.
+ * and alert the user; matching lines are reported to the model — and shown as a
+ * bytefly notice — at the next turn, or wake a turn immediately when the
+ * watcher opted into `wake`. Watchers are session-only and stopped on shutdown.
  *
  * Load with:  pi --extension ./extensions/watch
  */
 
-import type { AgentMessage } from "@earendil-works/pi-agent-core";
 import type { ExtensionAPI } from "@earendil-works/pi-coding-agent";
 import { isExtensionEnabled } from "../../lib/env.ts";
-import { STATUS_KEYS } from "../../lib/ui.ts";
+import { sanitizeLine } from "../../lib/format.ts";
+import { noticeMessage, type NoticeMessage, pruneStaleNotices } from "../../lib/notice.ts";
+import { STATUS_KEYS } from "../../lib/tui/glyphs.ts";
 import { registerCommands } from "./commands.ts";
-import { formatPendingMatch } from "./format.ts";
+import { clipLabel, formatPendingMatch } from "./format.ts";
 import { createWatchRuntime, type WatchRuntime } from "./runtime.ts";
 import { registerTools } from "./tools.ts";
 import type { PendingMatch } from "./types.ts";
@@ -23,13 +24,10 @@ import type { PendingMatch } from "./types.ts";
 /** Marker embedded in the injected match context. */
 const WATCH_CONTEXT_MARKER = "[WATCH MATCHES]";
 
-/** Custom-entry type used for the injected match message. */
-export const WATCH_CONTEXT_TYPE = "watch-context";
-
 /** At most this many match lines are injected in one message. */
 const MAX_CONTEXT_MATCHES = 20;
 
-/** Build the hidden context injected for pending matches. */
+/** Build the model-facing text for the pending-match notice. */
 export function buildWatchContext(matches: PendingMatch[]): string {
 	const shown = matches.slice(0, MAX_CONTEXT_MATCHES);
 	const lines = shown.map(formatPendingMatch);
@@ -38,8 +36,21 @@ export function buildWatchContext(matches: PendingMatch[]): string {
 	return `${WATCH_CONTEXT_MARKER}\n${matches.length} watched line${matches.length === 1 ? "" : "s"} matched:\n${lines.join("\n")}${suffix}\nRead more with \`watch matches <id>\`.`;
 }
 
-function isWatchContext(message: AgentMessage): boolean {
-	return (message as AgentMessage & { customType?: string }).customType === WATCH_CONTEXT_TYPE;
+/** The shared notice for pending matches: model text plus renderer details. */
+function watchNotice(matches: PendingMatch[]): NoticeMessage {
+	const count = matches.length;
+	return noticeMessage({
+		content: buildWatchContext(matches),
+		details: {
+			source: "watch",
+			title: `${count} watched line${count === 1 ? "" : "s"} matched`,
+			items: matches.slice(0, MAX_CONTEXT_MATCHES).map((match) => ({
+				label: `${match.watcherId} ${clipLabel(match.label)}`,
+				detail: sanitizeLine(match.line),
+				severity: "warn",
+			})),
+		},
+	});
 }
 
 export interface WatchDeps {
@@ -64,10 +75,7 @@ export default function watch(pi: ExtensionAPI, deps: WatchDeps = {}): void {
 		const pending = runtime.pendingMatches();
 		if (pending.length === 0) return;
 		try {
-			pi.sendMessage(
-				{ customType: WATCH_CONTEXT_TYPE, content: buildWatchContext(pending), display: false },
-				{ triggerTurn: true },
-			);
+			pi.sendMessage(watchNotice(pending), { triggerTurn: true });
 			runtime.markReported(pending);
 			waking = true;
 		} catch {
@@ -103,17 +111,14 @@ export default function watch(pi: ExtensionAPI, deps: WatchDeps = {}): void {
 		if (pending.length === 0) return undefined;
 		runtime.markReported(pending);
 		runtime.setStatus(ctx);
-		return {
-			message: { customType: WATCH_CONTEXT_TYPE, content: buildWatchContext(pending), display: false },
-		};
+		return { message: watchNotice(pending) };
 	});
 
-	// Keep stale match notes out of later turns.
+	// Keep stale match notices out of later turns. Only this extension's notices
+	// are pruned; another source's are left for its own handler.
 	pi.on("context", (event) => {
-		const contexts = event.messages.filter(isWatchContext);
-		if (contexts.length <= 1) return undefined;
-		const last = contexts[contexts.length - 1];
-		return { messages: event.messages.filter((message) => !isWatchContext(message) || message === last) };
+		const pruned = pruneStaleNotices(event.messages, "watch");
+		return pruned ? { messages: pruned } : undefined;
 	});
 
 	pi.on("session_shutdown", async (_event, ctx) => {

package/extensions/watch/tools.ts

@@ -9,7 +9,9 @@
 
 import type { ExtensionAPI, ExtensionContext } from "@earendil-works/pi-coding-agent";
 import { sanitizeLine } from "../../lib/format.ts";
-import { reuseText, toolDetails } from "../../lib/tui.ts";
+import { reuseText, toolDetails } from "../../lib/tui/chrome.ts";
+import { SEPARATORS } from "../../lib/tui/glyphs.ts";
+import { paint } from "../../lib/tui/tokens.ts";
 import {
 	compareWatches,
 	formatCallText,
@@ -192,8 +194,9 @@ export function registerTools(pi: ExtensionAPI, runtime: WatchRuntime): void {
 			const text = reuseText(context.lastComponent);
 			text.setText(
 				theme.fg("toolTitle", theme.bold(`${TOOL_NAME} `)) +
-					theme.fg(
-						"muted",
+					paint(
+						theme,
+						"meta",
 						sanitizeLine(formatCallText(action, args as Record<string, unknown>, context.argsComplete)),
 					),
 			);
@@ -209,13 +212,13 @@ export function registerTools(pi: ExtensionAPI, runtime: WatchRuntime): void {
 				return text;
 			}
 			if (details.error) {
-				text.setText(theme.fg("error", `Error: ${sanitizeLine(details.error)}`));
+				text.setText(paint(theme, "bad", `Error: ${sanitizeLine(details.error)}`));
 				return text;
 			}
 
 			if (details.action === "list" && details.watches) {
 				if (details.watches.length === 0) {
-					text.setText(theme.fg("muted", "No watchers."));
+					text.setText(paint(theme, "meta", "No watchers."));
 					return text;
 				}
 				const ordered = [...details.watches].sort(compareWatches);
@@ -232,7 +235,7 @@ export function registerTools(pi: ExtensionAPI, runtime: WatchRuntime): void {
 				const all = raw === "" ? [] : raw.split("\n");
 				const label = details.action === "matches" ? "matches" : "output";
 				if (all.length === 0) {
-					text.setText(theme.fg("muted", `No ${label} yet.`));
+					text.setText(paint(theme, "meta", `No ${label} yet.`));
 					return text;
 				}
 				const shownLines = options.expanded ? all : all.slice(Math.max(0, all.length - RESULT_ROWS));
@@ -251,7 +254,11 @@ export function registerTools(pi: ExtensionAPI, runtime: WatchRuntime): void {
 			if (details.action === "clear") {
 				const count = details.cleared ?? 0;
 				text.setText(
-					theme.fg("muted", count === 0 ? "Nothing to clear." : `Cleared ${count} watcher${count === 1 ? "" : "s"}.`),
+					paint(
+						theme,
+						"meta",
+						count === 0 ? "Nothing to clear." : `Cleared ${count} watcher${count === 1 ? "" : "s"}.`,
+					),
 				);
 				return text;
 			}
@@ -259,12 +266,12 @@ export function registerTools(pi: ExtensionAPI, runtime: WatchRuntime): void {
 			if (details.watch) {
 				let line = formatWatchOutcomeLine(details.watch, theme);
 				if (details.action === "stop") {
-					line += theme.fg("warning", details.stopped ? " · stopped" : " · already stopped");
+					line += paint(theme, "warn", details.stopped ? " · stopped" : " · already stopped");
 				} else if (details.action === "add") {
 					const badges: string[] = [];
 					if (details.watch.wake) badges.push("wake");
 					if (details.watch.fromStart) badges.push("from start");
-					if (badges.length > 0) line += theme.fg("dim", ` · ${badges.join(" · ")}`);
+					if (badges.length > 0) line += paint(theme, "faint", `${SEPARATORS.item}${badges.join(SEPARATORS.item)}`);
 				}
 				text.setText(line);
 				return text;