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

package/extensions/subagent/render.ts

@@ -12,10 +12,12 @@
 
 import { getMarkdownTheme, type Theme } from "@earendil-works/pi-coding-agent";
 import type { AgentToolResult } from "@earendil-works/pi-agent-core";
-import { Container, Markdown, Spacer, Text, type Component } from "@earendil-works/pi-tui";
+import { Container, Markdown, Spacer, Text, visibleWidth, type Component } from "@earendil-works/pi-tui";
 import { sanitizeLine, shortenPath, stripControlChars } from "../../lib/format.ts";
-import { reuseText, toolDetails } from "../../lib/tui.ts";
-import { expandHint, GLYPHS } from "../../lib/ui.ts";
+import { reuseText, toolDetails } from "../../lib/tui/chrome.ts";
+import { expandHint, GLYPHS } from "../../lib/tui/glyphs.ts";
+import { centeredRule } from "../../lib/tui/rules.ts";
+import { paint, type TuiRole } from "../../lib/tui/tokens.ts";
 import { aggregateUsage, clip, formatToolCall, formatUsageStats } from "./format.ts";
 import { COLLAPSED_ERROR_MAX, COLLAPSED_ITEM_COUNT, COLLAPSED_TEXT_LINES, type SubagentArgs } from "./schema.ts";
 import { getFinalOutput, isFailedResult } from "./stream.ts";
@@ -24,6 +26,11 @@ import type { SingleResult, SubagentDetails } from "./types.ts";
 type DisplayItem = { type: "text"; text: string } | { type: "toolCall"; name: string; args: Record<string, unknown> };
 type ResultStatus = "running" | "aborted" | "failed" | "success";
 
+/** Columns a section rule adds around its label: a space and three dashes each side. */
+const SECTION_RULE_PAD = 8;
+/** A section rule keeps the `meta` colour the hand-rolled `─── label ───` used. */
+const SECTION_RULE_STYLE = { pad: 1, fillRole: "meta", labelRole: "meta" } as const;
+
 /** Text and tool-call parts of every assistant message, in order. */
 function getDisplayItems(messages: SingleResult["messages"]): DisplayItem[] {
 	const items: DisplayItem[] = [];
@@ -45,12 +52,12 @@ function hasExpandableContent(items: DisplayItem[]): boolean {
 	);
 }
 
-/** Colours per status; the running glyph is time-based, so it is not a value here. */
-const STATUS_COLOR: Record<ResultStatus, "warning" | "error" | "success"> = {
-	running: "warning",
-	aborted: "warning",
-	failed: "error",
-	success: "success",
+/** Design roles per status; the running glyph is time-based, so it is not a value here. */
+const STATUS_ROLE: Record<ResultStatus, TuiRole> = {
+	running: "warn",
+	aborted: "warn",
+	failed: "bad",
+	success: "ok",
 };
 
 /** Static glyphs for terminal states, from the shared narrow-glyph vocabulary. */
@@ -77,12 +84,12 @@ function resultStatus(result: SingleResult, isPartial = false): ResultStatus {
 }
 
 function statusIcon(status: ResultStatus, theme: Theme, now: number): string {
-	return theme.fg(STATUS_COLOR[status], statusGlyph(status, now));
+	return paint(theme, STATUS_ROLE[status], statusGlyph(status, now));
 }
 
-/** The color the status uses, so the `[stopReason]` bracket matches its icon. */
-function statusColor(status: ResultStatus): "warning" | "error" | "success" {
-	return STATUS_COLOR[status];
+/** The role the status uses, so the `[stopReason]` bracket matches its icon. */
+function statusRole(status: ResultStatus): TuiRole {
+	return STATUS_ROLE[status];
 }
 
 /** The message a failed/aborted result should show, falling back to stderr. */
@@ -99,7 +106,7 @@ function renderError(result: SingleResult, status: ResultStatus, theme: Theme, m
 	const detail = errorDetail(result, status, max);
 	if (!detail) return undefined;
 	const label = status === "aborted" ? "Aborted" : "Error";
-	return theme.fg(status === "aborted" ? "warning" : "error", `${label}: ${detail}`);
+	return paint(theme, status === "aborted" ? "warn" : "bad", `${label}: ${detail}`);
 }
 
 /** Whether the collapsed error/stderr text is truncated, so expanding shows more. */
@@ -114,7 +121,7 @@ function hasClippedError(result: SingleResult, status: ResultStatus): boolean {
 function collapsedBody(result: SingleResult, status: ResultStatus, items: DisplayItem[], theme: Theme): string {
 	const error = renderError(result, status, theme, COLLAPSED_ERROR_MAX);
 	if (error) return error;
-	if (items.length === 0) return theme.fg("muted", status === "running" ? "(running…)" : "(no output)");
+	if (items.length === 0) return paint(theme, "meta", status === "running" ? "(running…)" : "(no output)");
 	return renderDisplayItems(items, theme, COLLAPSED_ITEM_COUNT);
 }
 
@@ -164,11 +171,11 @@ function durationSuffix(result: SingleResult, status: ResultStatus, now: number)
 function statusSuffix(result: SingleResult, status: ResultStatus, theme: Theme, now: number): string {
 	let suffix = "";
 	const duration = durationSuffix(result, status, now);
-	if (duration) suffix += theme.fg("dim", duration);
+	if (duration) suffix += paint(theme, "faint", duration);
 	const showReason = status === "failed" || status === "aborted";
 	const stop = showReason && result.stopReason && result.stopReason !== "end" ? result.stopReason : undefined;
 	const reason = stop ?? (status === "failed" ? `exit ${result.exitCode}` : undefined);
-	if (reason) suffix += ` ${theme.fg(statusColor(status), `[${reason}]`)}`;
+	if (reason) suffix += ` ${paint(theme, statusRole(status), `[${reason}]`)}`;
 	return suffix;
 }
 
@@ -182,9 +189,9 @@ function resultHeader(
 ): string {
 	let header = `${statusIcon(status, theme, now)} ${theme.fg("toolTitle", theme.bold(sanitizeLine(result.agent)))}`;
 	if (result.agentSource && result.agentSource !== "builtin" && result.agentSource !== "unknown") {
-		header += theme.fg("dim", ` [${sanitizeLine(result.agentSource)}]`);
+		header += paint(theme, "faint", ` [${sanitizeLine(result.agentSource)}]`);
 	}
-	if (result.step) header = `${theme.fg("muted", `${stepPrefix} ${result.step} `)}` + header;
+	if (result.step) header = `${paint(theme, "meta", `${stepPrefix} ${result.step} `)}` + header;
 	return header + statusSuffix(result, status, theme, now);
 }
 
@@ -193,7 +200,7 @@ function quoteLines(text: string, theme: Theme): string {
 	return stripControlChars(text)
 		.trim()
 		.split("\n")
-		.map((line) => theme.fg("muted", "│ ") + theme.fg("toolOutput", line))
+		.map((line) => paint(theme, "meta", "│ ") + theme.fg("toolOutput", line))
 		.join("\n");
 }
 
@@ -201,14 +208,14 @@ function renderDisplayItems(items: DisplayItem[], theme: Theme, limit?: number,
 	const shown = limit ? items.slice(-limit) : items;
 	const skipped = limit && items.length > limit ? items.length - limit : 0;
 	const lines: string[] = [];
-	if (skipped > 0) lines.push(theme.fg("muted", `… ${skipped} earlier items`));
+	if (skipped > 0) lines.push(paint(theme, "meta", `… ${skipped} earlier items`));
 	for (const item of shown) {
 		if (item.type === "text") {
 			const safe = stripControlChars(item.text);
 			const text = preview ? safe.split("\n").slice(0, COLLAPSED_TEXT_LINES).join("\n") : safe;
 			lines.push(theme.fg("toolOutput", text));
 		} else {
-			lines.push(theme.fg("muted", "→ ") + formatToolCall(item.name, item.args, theme, preview));
+			lines.push(paint(theme, "meta", "→ ") + formatToolCall(item.name, item.args, theme, preview));
 		}
 	}
 	return lines.join("\n");
@@ -235,36 +242,38 @@ export function renderSubagentCall(args: SubagentArgs, theme: Theme, context?: S
 
 /** The call-line string for the requested mode. */
 function callText(args: SubagentArgs, theme: Theme, context?: { cwd?: string }): string {
-	const title = theme.fg("toolTitle", theme.bold("subagent ")) + (args.readOnly ? theme.fg("dim", "read-only ") : "");
+	const title =
+		theme.fg("toolTitle", theme.bold("subagent ")) + (args.readOnly ? paint(theme, "faint", "read-only ") : "");
 	const cwdNote = (cwd?: string) => {
 		if (!cwd || cwd === context?.cwd) return "";
-		return theme.fg("dim", `  in ${shortenPath(cwd)}`);
+		return paint(theme, "faint", `  in ${shortenPath(cwd)}`);
 	};
 
 	if (args.chain && args.chain.length > 0) {
-		let text = title + theme.fg("accent", `chain · ${args.chain.length} step${args.chain.length > 1 ? "s" : ""}`);
+		let text = title + paint(theme, "accent", `chain · ${args.chain.length} step${args.chain.length > 1 ? "s" : ""}`);
 		for (let i = 0; i < Math.min(args.chain.length, 3); i++) {
 			const step = args.chain[i];
 			const clean = sanitizeLine(step.task.replace(/\{previous\}/g, ""));
-			text += `\n  ${theme.fg("muted", `${i + 1}.`)} ${theme.fg("accent", sanitizeLine(step.agent))}${theme.fg("dim", ` ${clip(clean, 40)}`)}${cwdNote(step.cwd)}`;
+			text += `\n  ${paint(theme, "meta", `${i + 1}.`)} ${paint(theme, "accent", sanitizeLine(step.agent))}${paint(theme, "faint", ` ${clip(clean, 40)}`)}${cwdNote(step.cwd)}`;
 		}
-		if (args.chain.length > 3) text += `\n  ${theme.fg("muted", `… +${args.chain.length - 3} more`)}`;
+		if (args.chain.length > 3) text += `\n  ${paint(theme, "meta", `… +${args.chain.length - 3} more`)}`;
 		return text;
 	}
 
 	if (args.tasks && args.tasks.length > 0) {
-		let text = title + theme.fg("accent", `parallel · ${args.tasks.length} task${args.tasks.length > 1 ? "s" : ""}`);
+		let text =
+			title + paint(theme, "accent", `parallel · ${args.tasks.length} task${args.tasks.length > 1 ? "s" : ""}`);
 		for (let i = 0; i < Math.min(args.tasks.length, 3); i++) {
 			const task = args.tasks[i];
-			text += `\n  ${theme.fg("muted", `${i + 1}.`)} ${theme.fg("accent", sanitizeLine(task.agent))}${theme.fg("dim", ` ${clip(sanitizeLine(task.task), 40)}`)}${cwdNote(task.cwd)}`;
+			text += `\n  ${paint(theme, "meta", `${i + 1}.`)} ${paint(theme, "accent", sanitizeLine(task.agent))}${paint(theme, "faint", ` ${clip(sanitizeLine(task.task), 40)}`)}${cwdNote(task.cwd)}`;
 		}
-		if (args.tasks.length > 3) text += `\n  ${theme.fg("muted", `… +${args.tasks.length - 3} more`)}`;
+		if (args.tasks.length > 3) text += `\n  ${paint(theme, "meta", `… +${args.tasks.length - 3} more`)}`;
 		return text;
 	}
 
 	const agentName = sanitizeLine(args.agent || "…");
-	let text = title + theme.fg("accent", agentName) + cwdNote(args.cwd);
-	text += `\n  ${theme.fg("dim", clip(sanitizeLine(args.task ?? "…"), 60))}`;
+	let text = title + paint(theme, "accent", agentName) + cwdNote(args.cwd);
+	text += `\n  ${paint(theme, "faint", clip(sanitizeLine(args.task ?? "…"), 60))}`;
 	return text;
 }
 
@@ -283,8 +292,10 @@ function addExpandedResult(
 	if (error) container.addChild(new Text(error, 0, 0));
 
 	container.addChild(new Spacer(1));
-	container.addChild(new Text(theme.fg("muted", "─── Task ───"), 0, 0));
-	container.addChild(new Text(theme.fg("dim", stripControlChars(result.taskTemplate ?? result.task)), 0, 0));
+	container.addChild(
+		new Text(centeredRule(theme, visibleWidth("Task") + SECTION_RULE_PAD, "Task", SECTION_RULE_STYLE), 0, 0),
+	);
+	container.addChild(new Text(paint(theme, "faint", stripControlChars(result.taskTemplate ?? result.task)), 0, 0));
 
 	const displayItems = getDisplayItems(result.messages);
 	const lastItem = displayItems[displayItems.length - 1];
@@ -294,11 +305,15 @@ function addExpandedResult(
 	// order and do not surface a stale earlier message as the answer.
 	const trailingOutput = lastItem?.type === "text" && lastItem.text === finalOutput ? lastItem.text : "";
 	container.addChild(new Spacer(1));
-	container.addChild(new Text(theme.fg("muted", "─── Output ───"), 0, 0));
+	container.addChild(
+		new Text(centeredRule(theme, visibleWidth("Output") + SECTION_RULE_PAD, "Output", SECTION_RULE_STYLE), 0, 0),
+	);
 	let renderedOutput = false;
 	for (const item of displayItems) {
 		if (item.type === "toolCall") {
-			container.addChild(new Text(theme.fg("muted", "→ ") + formatToolCall(item.name, item.args, theme, false), 0, 0));
+			container.addChild(
+				new Text(paint(theme, "meta", "→ ") + formatToolCall(item.name, item.args, theme, false), 0, 0),
+			);
 			renderedOutput = true;
 		} else if (item.text.trim() && item.text !== trailingOutput) {
 			container.addChild(new Text(quoteLines(item.text, theme), 0, 0));
@@ -311,13 +326,13 @@ function addExpandedResult(
 		renderedOutput = true;
 	}
 	if (!renderedOutput) {
-		container.addChild(new Text(theme.fg("muted", status === "running" ? "(running…)" : "(no output)"), 0, 0));
+		container.addChild(new Text(paint(theme, "meta", status === "running" ? "(running…)" : "(no output)"), 0, 0));
 	}
 
 	const usage = usageLine(result);
 	if (usage) {
 		container.addChild(new Spacer(1));
-		container.addChild(new Text(theme.fg("dim", usage), 0, 0));
+		container.addChild(new Text(paint(theme, "faint", usage), 0, 0));
 	}
 }
 
@@ -333,7 +348,7 @@ function collapsedSingleText(result: SingleResult, theme: Theme, isPartial: bool
 	text += `\n\n${collapsedBody(result, status, displayItems, theme)}`;
 	if (isExpandable(result, status, displayItems)) text += `\n${expandHint(theme)}`;
 	const usage = usageLine(result);
-	if (usage) text += `\n${theme.fg("dim", usage)}`;
+	if (usage) text += `\n${paint(theme, "faint", usage)}`;
 	return text;
 }
 
@@ -375,11 +390,11 @@ function multiHeader(details: SubagentDetails, theme: Theme, now: number): strin
 	const bad = failed + aborted;
 	const icon =
 		running > 0
-			? theme.fg("warning", statusGlyph("running", now))
+			? paint(theme, "warn", statusGlyph("running", now))
 			: bad > 0
-				? theme.fg(bad === total ? "error" : "warning", bad === total ? GLYPHS.jobsFailure : GLYPHS.half)
-				: theme.fg("success", GLYPHS.check);
-	return `${icon} ${theme.fg("toolTitle", theme.bold(`${details.mode} · `))}${theme.fg("accent", status)}`;
+				? paint(theme, bad === total ? "bad" : "warn", bad === total ? GLYPHS.jobsFailure : GLYPHS.half)
+				: paint(theme, "ok", GLYPHS.check);
+	return `${icon} ${theme.fg("toolTitle", theme.bold(`${details.mode} · `))}${paint(theme, "accent", status)}`;
 }
 
 function collapsedMultiText(details: SubagentDetails, theme: Theme, now: number): string {
@@ -394,14 +409,14 @@ function collapsedMultiText(details: SubagentDetails, theme: Theme, now: number)
 		const displayItems = getDisplayItems(result.messages);
 		if (isExpandable(result, status, displayItems)) hasHidden = true;
 		const taskText = result.taskTemplate ?? result.task;
-		const taskNote = taskText ? theme.fg("dim", ` ${clip(sanitizeLine(taskText), 50)}`) : "";
-		text += `\n\n${theme.fg("muted", "─── ")}${theme.fg("accent", resultLabel(result, i))}${taskNote} ${statusIcon(status, theme, now)}`;
+		const taskNote = taskText ? paint(theme, "faint", ` ${clip(sanitizeLine(taskText), 50)}`) : "";
+		text += `\n\n${paint(theme, "meta", "─── ")}${paint(theme, "accent", resultLabel(result, i))}${taskNote} ${statusIcon(status, theme, now)}`;
 		text += statusSuffix(result, status, theme, now);
 		text += `\n${collapsedBody(result, status, displayItems, theme)}`;
 	}
 	if (running === 0) {
 		const usage = totalUsageLine(results);
-		if (usage) text += `\n\n${theme.fg("dim", `Total: ${usage}`)}`;
+		if (usage) text += `\n\n${paint(theme, "faint", `Total: ${usage}`)}`;
 	}
 	if (running > 0 || hasHidden) text += `\n${expandHint(theme)}`;
 	return text;
@@ -421,7 +436,7 @@ function fillExpandedMulti(container: Container, details: SubagentDetails, theme
 		const usage = totalUsageLine(details.results);
 		if (usage) {
 			container.addChild(new Spacer(1));
-			container.addChild(new Text(theme.fg("dim", `Total: ${usage}`), 0, 0));
+			container.addChild(new Text(paint(theme, "faint", `Total: ${usage}`), 0, 0));
 		}
 	}
 }

package/extensions/todo/README.md

@@ -205,7 +205,7 @@ depends on config.
   first pending); `/todos` keeps the submitted order, and the transcript result
   orders by status via `compareByActivity` so active work is never hidden. The
   transcript result draws the same indented glyph rail as the goal result
-  (`BODY_INDENT` / `GLYPH_GAP` from [`lib/ui.ts`](../../lib/ui.ts)), wrapping
+  (`BODY_INDENT` / `GLYPH_GAP` from [`lib/tui/glyphs.ts`](../../lib/tui/glyphs.ts)), wrapping
   long items with continuation rows aligned under the text. Progress lives on
   the call line, so the rail carries no footer.
 - **The transcript reuses its components.** `renderCall` reuses the slot's
@@ -223,7 +223,7 @@ depends on config.
 | `state.ts` | Branch reconstruction and status queries (pure). |
 | `nudge.ts` | Lag detection: mutating-tool classification, due check, reminder text (pure). |
 | `format.ts` | Model-facing and transcript text (pure). |
-| `tui.ts` | Widget and scrollable `/todos` components. |
+| `tui.ts` | Widget and scrollable `/todos` components, drawn from the `lib/tui/` kit (`titleRule`, `dockListFrame`, `listRow`, `emptyState`). |
 | `config.ts` | Widget config load/validation (the `todo` section of `bytefly.json`). |
 | `runtime.ts` | Session-scoped state, lag tracking, and widget synchronization. |
 | `tools.ts` | `todo` tool registration and rendering. |

package/extensions/todo/format.ts

@@ -4,7 +4,8 @@
 
 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 { BODY_INDENT, 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";
 
@@ -26,23 +27,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. */
@@ -136,7 +157,7 @@ export function todoRailLines(input: TodoRailInput, theme: Theme, width: number)
 		});
 	}
 	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,8 @@ 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 { 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 +98,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 +107,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 +118,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", "✓ ") + paint(theme, "meta", "Cleared the todo list"));
 				return text;
 			}
 

package/extensions/todo/tui.ts

@@ -8,10 +8,23 @@
 
 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 { 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 +36,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 +50,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", "·")} ${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", "·")} ${todoLabel(current, theme)}`;
 }
 
 /** Transcript result block: the indented glyph rail, wrapping at the render width. */
@@ -139,32 +156,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

@@ -200,8 +200,8 @@ turn — so a match is never dropped when the wake window is busy.
 | `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 } 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", " · ");
 	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

@@ -13,7 +13,7 @@
 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 { STATUS_KEYS } from "../../lib/tui/glyphs.ts";
 import { registerCommands } from "./commands.ts";
 import { formatPendingMatch } from "./format.ts";
 import { createWatchRuntime, type WatchRuntime } from "./runtime.ts";