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

package/extensions/memory/tui.ts

@@ -5,7 +5,7 @@
  * every render (`entries()` refreshes from disk first) and asks for a repaint
  * after an action settles, so an external edit or a mutation is reflected
  * without the component owning any authoritative state. Navigation and scroll
- * math come from `lib/list-cursor.ts` and the screen chrome from `lib/tui.ts`;
+ * math come from `lib/tui/cursor.ts` and the screen chrome from `lib/tui/chrome.ts`;
  * the inline note editor is the shared `Editor` from `@earendil-works/pi-tui`.
  */
 
@@ -14,23 +14,18 @@ import {
 	Editor,
 	Key,
 	matchesKey,
-	truncateToWidth,
 	type Component,
 	type TUI,
 	type TuiMouseEvent,
 	type TuiMouseEventResult,
 } from "@earendil-works/pi-tui";
 import { sanitizeLine } from "../../lib/format.ts";
-import {
-	fitRows,
-	formatRange,
-	isCloseKey,
-	ListCursor,
-	navigateList,
-	scrollList,
-	selectionMarker,
-} from "../../lib/list-cursor.ts";
-import { dockListFrame, editorTheme, screenHint, type ViewportRowsSource } from "../../lib/tui.ts";
+import { fitRows, formatRange, isCloseKey, ListCursor, navigateList, scrollList } from "../../lib/tui/cursor.ts";
+import { dockListFrame, editorTheme, 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 { messageOf } from "./errors.ts";
 import { scopeLabel, type MemoryEntries } from "./format.ts";
 import type { MemoryScope } from "./types.ts";
@@ -301,6 +296,13 @@ export class MemoryPickerComponent implements Component {
 			this.requestRender();
 			return;
 		}
+		// The hint advertises `g`/`G`, so bind them to the ends.
+		if (data === "g" || data === "G") {
+			this.cursor.set(data === "g" ? 0 : notes.length - 1, notes.length);
+			this.selectedKey = notes[this.cursor.selected] ? noteKey(notes[this.cursor.selected]) : undefined;
+			this.requestRender();
+			return;
+		}
 
 		const focused = notes[this.cursor.selected];
 		if (matchesKey(data, Key.tab) || data === "s") this.cycleFilter();
@@ -344,22 +346,21 @@ export class MemoryPickerComponent implements Component {
 	private summary(width: number): string {
 		const entries = this.callbacks.entries();
 		const filter = this.effectiveFilter();
-		let text = this.theme.fg("accent", filter === "all" ? "All" : scopeLabel(filter));
-		text += this.theme.fg("muted", ` · ${entries.project.length} project, ${entries.global.length} global`);
-		if (!this.callbacks.trusted()) text += this.theme.fg("warning", " · project untrusted");
-		return truncateToWidth(`  ${text}`, width, "…");
+		let text = paint(this.theme, "accent", filter === "all" ? "All" : scopeLabel(filter));
+		text += paint(this.theme, "meta", ` · ${entries.project.length} project, ${entries.global.length} global`);
+		if (!this.callbacks.trusted()) text += paint(this.theme, "warn", " · project untrusted");
+		return clip(`  ${text}`, width);
 	}
 
 	/** One note row: selection marker, scope tag, and the sanitized note text. */
 	private noteRow(note: Note, selected: boolean, width: number): string {
-		const scope = this.theme.fg("muted", scopeLabel(note.scope));
-		const text = sanitizeLine(note.text);
-		const label = selected ? this.theme.fg("accent", text) : this.theme.fg("text", text);
-		return truncateToWidth(
-			`${selectionMarker(this.theme, selected)}${scope} ${this.theme.fg("dim", "·")} ${label}`,
-			width,
-			"…",
-		);
+		const tag = `${paint(this.theme, "meta", scopeLabel(note.scope))} ${paint(this.theme, "faint", "·")}`;
+		return listRow(this.theme, width, {
+			selected,
+			leading: tag,
+			label: sanitizeLine(note.text),
+			labelRole: selected ? "accent" : "label",
+		});
 	}
 
 	private confirmPrompt(): string {
@@ -377,13 +378,10 @@ export class MemoryPickerComponent implements Component {
 		const body: string[] = [];
 		for (const line of this.editor.render(Math.max(1, width - 2))) body.push(`${pad}${line}`);
 		return dockListFrame({
-			theme: this.theme,
-			width,
-			title: `Memory · ${verb} ${scope}`,
-			summary: truncateToWidth(
-				`  ${this.theme.fg("muted", this.mode === "edit" ? "Editing the focused note" : `New ${scope} note`)}`,
+			header: titleRule(this.theme, width, `Memory · ${verb} ${scope}`),
+			summary: clip(
+				`  ${paint(this.theme, "meta", this.mode === "edit" ? "Editing the focused note" : `New ${scope} note`)}`,
 				width,
-				"…",
 			),
 			body,
 			hint: screenHint(this.theme, width, ["Enter save", "Esc cancel"]),
@@ -401,7 +399,7 @@ export class MemoryPickerComponent implements Component {
 
 		const body: string[] = [];
 		if (notes.length === 0) {
-			body.push(truncateToWidth(`  ${this.theme.fg("dim", "No notes yet. Press a to add one.")}`, w));
+			body.push(...emptyState(this.theme, w, { label: "No notes yet. Press a to add one." }));
 		} else {
 			const { start, end } = this.cursor.window(notes.length);
 			for (let index = start; index < end; index++) {
@@ -410,15 +408,13 @@ export class MemoryPickerComponent implements Component {
 		}
 
 		const hint = this.confirm
-			? truncateToWidth(`  ${this.theme.fg("warning", this.confirmPrompt())}`, w)
+			? clip(`  ${paint(this.theme, "warn", this.confirmPrompt())}`, w)
 			: this.notice !== undefined
-				? truncateToWidth(`  ${this.theme.fg("muted", this.notice)}`, w)
+				? clip(`  ${paint(this.theme, "meta", this.notice)}`, w)
 				: screenHint(this.theme, w, ["Esc close", "Enter/e edit", "a add", "d forget", "s/Tab scope", "↑/↓", "g/G"]);
 
 		return dockListFrame({
-			theme: this.theme,
-			width: w,
-			title: "Memory",
+			header: titleRule(this.theme, w, "Memory"),
 			summary: this.summary(w),
 			body,
 			range: this.cursor.clipped(notes.length)

package/extensions/plan/README.md

@@ -48,8 +48,11 @@ pi --plan                          # start in plan mode
 - **Reviewable plan.** `exit_plan_mode` reads the plan file back and presents
   it for approval. The user approves, keeps planning, or asks for a refinement.
 - **Browser review on demand.** Press `w` on the review screen (or run
-  `/plan review [path]`) to open the plan in a local browser, select text to
-  leave inline comments, and save them back into the plan file itself as
+  `/plan review [path]`) to open the plan in a local browser: a reading-first
+  page with the plan's H1 as its title, GitHub's Markdown content column, a
+  comment rail in
+  the left margin, and live section and step progress. Select text to leave an
+  inline comment, and save them back into the plan file itself as
   `> [!REVIEW]` lines. Saved comments return to the model as a refinement
   request.
 - **The file is the source of truth.** On approval the model follows the plan
@@ -107,9 +110,9 @@ The review screen is TUI-only. `exit_plan_mode` opens `PlanViewComponent`: a
 scrollable, width-safe view of the plan with approve/refine/keep in the footer.
 The body is rendered with Pi's own `Markdown` component and `getMarkdownTheme()`,
 so headings, lists, inline code, code blocks, links, and quotes carry the active
-theme's colors; task items get a `success` `[✓]` (done) or `dim` `[ ]` (pending)
-marker. The footer colors the primary actions (`a approve & run` in `success`,
-`r refine` in `accent`).
+theme's colors; task items get the shared `◼` (done) or `◻` (pending) marker,
+like the bytefly screen and the question dialog. The footer colors the primary
+actions (`a approve & run` in `success`, `r refine` in `accent`).
 `a` ends plan mode, restores write access, and seeds `todo`; `r` keeps the plan
 mounted and opens an inline editor beneath it (`Enter` submits, an empty buffer
 does nothing, `Esc` returns to the plan); `Esc` keeps planning and tells the
@@ -118,7 +121,8 @@ model the plan was not approved. Scroll with `↑`/`↓` or `j`/`k`, `space`/`b`
 the next or previous heading; the scroll row names the current section when the
 plan has more than one. When the plan overflows,
 a gauge row above the hints shows the scroll position, the percent, and the
-visible line range (the range drops first on a narrow terminal); the gauge stays
+visible line range (the range drops first on a narrow terminal); the gauge comes
+from the design system's `gaugeBar` and stays
 visible while the refine editor is open, since the body above is still clipped.
 Hints are
 dropped whole as the terminal narrows, and each footer leads with its safe exit
@@ -189,8 +193,8 @@ command. The read-only guarantee is layered:
   strips control characters from the plan body before rendering it in the
   transcript and in non-TUI notices; a plan file cannot drive the terminal.
 - **Loopback browser review.** The review server binds `127.0.0.1` and requires a
-  random per-session token in the URL, checks the `Host` header, serves only
-  `GET`/`POST`, and caps the request body; the page renders plan and comment text
+  random per-session token in the URL, rejects a missing or foreign `Host`
+  header, serves only `GET`/`POST`, and caps the request body; the page renders plan and comment text
   with DOM text nodes, never `innerHTML`, so a plan cannot script the reviewer.
 
 ## Read-only git shell
@@ -250,26 +254,42 @@ agent file that overrides it.
 
 ## Browser review
 
-<img src="../../assets/plan-review.png" alt="The browser-based plan review, showing the plan's sections, a rendered code block, and an inline comment box" width="100%">
+<img src="../../assets/plan-review.png" alt="The browser-based plan review: a sticky header with the plan title and Save/Close, a side panel with step progress and a section outline, and the plan as one measured column with a comment rail and an inline review thread" width="100%">
 
 Press `w` on the review screen — or run `/plan review [path]` — to open the plan
-in the default browser on `127.0.0.1`. The page is a review surface: a sticky
-header with the plan title, theme toggle, and Save/Close; a sticky **section
-outline** on the left; and the plan with each comment rendered **inline under
-the block it anchors to**. Every block has a **+ Comment** action; select text
-first to quote it. **Save feedback** writes the comments into the plan file and
-returns them to the model.
+in the default browser on `127.0.0.1`. The page is a reading-first review
+surface: a sticky header carrying the plan's H1 (falling back to the file-name
+slug), a live status chip (connection, comment count, and unsaved changes), the
+theme toggle, and Save/Close, over a hairline reading-progress bar. A sticky
+side panel shows the plan's step progress and comment count above a **section
+outline**, and the document is GitHub's Markdown content column — one centred
+measure of at most 1012px with a comment rail in its left margin. Every block
+reveals a **+ Comment** action on hover; select
+text first to quote it. **Save feedback** writes the comments into the plan
+file and returns them to the model.
 
 - **Shared theme.** The page uses the same Bytefly tokens, base rules, and
   syntax-token colors as `file-browse` (`lib/web/`), follows the system light/dark
   preference until the header toggle sets an explicit choice, and remembers that
   choice under the shared `pi-web-theme` key.
-- **Section outline.** Headings become a sticky outline, labelled in the panel,
-  with jump links and an active-section highlight; the panel collapses into a
-  disclosure on narrow screens.
+- **One content column, one rail.** The document is GitHub's Markdown content
+  column (a centred measure of at most 1012px), so a plan reads the way the same
+  file does on GitHub; each block carries its `+ Comment` button and
+  comment-count badge
+  in a rail in the left margin, so annotating never reflows the text.
+- **Section outline and facts.** Headings become a sticky outline with jump
+  links, an active-section highlight, and a per-section comment count; the panel
+  above it reports the plan's checkbox steps (`n/m`) and total comments.
 - **Inline threads.** A comment renders directly under the block it anchors to,
-  indented as a thread, so it reads in place and the plan keeps one measure at
-  every width. There is no separate rail or grid to reflow.
+  labelled and indented as a thread, so it reads in place and the plan keeps one
+  measure at every width. There is no separate column to reflow.
+- **Keyboard first.** `j`/`k` move to the next or previous block, `c` comments
+  on the current block, `s` saves, `Esc` closes the composer, and `?` opens a
+  shortcut sheet; the header's `?` button opens the same sheet.
+- **Markdown that reads.** Headings, lists, task items, blockquotes, fenced
+  code, GFM tables, `---` rules, and bare-URL autolinks render; tables honour the
+  alignment row and
+  scroll horizontally when narrow.
 - **Highlighted code.** Fenced code is tokenized by the shared
   `lib/highlight.ts`; the client copies only text and `tok-*` spans through
   `DOMParser`, so a code line is never parsed as markup.
@@ -277,18 +297,24 @@ returns them to the model.
 - **The file is the store.** Each comment is written as
   `> [!REVIEW] <comment>` on the line after the block it anchors to. Saving is
   idempotent: the previous markers are stripped first, so a second save replaces
-  rather than appends. The browser keeps no copy of its own.
+  rather than appends. Stripping is fence-aware: a `> [!REVIEW]` line inside a
+  code block is documentation, not feedback. The browser keeps no copy of its own.
 - **Anchored to source.** `blocks.ts` splits the plan (fence-aware) into
   source-line ranges; a comment is placed after the whole anchored block, so a
   fenced code block is never split. A save re-checks the file against what the
-  page rendered and answers `409` (reload) if it changed underneath.
+  page rendered and answers `409`; the page then offers a **Reload** action,
+  because only a reload can re-anchor the comments to the new text.
 - **Back to the model.** A save from the review screen returns `refined: true`
   with the comments, so the model stays in plan mode and revises the same file.
   `/plan review` sends them as a user message (a plan-mode revision or a plain
   update, depending on the mode).
 - **Loopback and tokenized.** The server binds `127.0.0.1`, carries a random
-  per-session token in the URL, checks the `Host` header, serves only `GET` and
-  `POST`, and caps the request body. It is closed on save, cancel, tab close, or
+  per-session token in the URL, rejects a missing or foreign `Host` header,
+  serves only `GET` and `POST`, and caps the request body. A save or cancel
+  resolves the session only after its HTTP response is delivered, so the browser
+  never sees a false "Failed to fetch". The last bound port is remembered per
+  plan, so reviewing the same plan again reuses the origin (and the browser's
+  saved theme with it). It is closed on save, cancel, tab close, or
   `session_shutdown`.
 
 | Route | Result |
@@ -312,6 +338,9 @@ returns them to the model.
   turn cannot drive it.
 - A browser that never connects leaves the review waiting until the user
   cancels, closes the tab, or aborts the turn.
+- Feedback stripping follows fenced code blocks; an unterminated fence makes the
+  rest of the file code, so a marker-looking line after it is treated as content
+  rather than stored feedback.
 
 ## Non-goals
 
@@ -386,12 +415,13 @@ returns them to the model.
   existing heading-only split cannot, and the page renders text with DOM nodes
   so review never widens the plan's trust surface. The browser opener is shared
   through `lib/browser.ts` rather than imported from `file-browse`.
-- **Comments render in the document flow, not a rail.** The anchor is already a
-  source line, so the browser needs no paired rail cell: a thread is appended
-  after its block and the plan keeps one measure at every width. That removes
-  the two-column grid, the `bf-review--no-rail` collapse, and the breakpoint
-  ladder, and matches the TUI, where neither review header carries a progress
-  counter.
+- **Comments render in the document flow, not a second column.** The anchor is
+  already a source line, so the browser needs no paired column: a thread is
+  appended after its block and the plan keeps one measure at every width. The
+  per-block affordance lives in a narrow rail inside the measure's left margin,
+  so annotating never moves the text. That removes the two-column grid, the
+  `bf-review--no-rail` collapse, and the breakpoint ladder, and matches the TUI,
+  where neither review header carries a progress counter.
 
 ## Files
 
@@ -407,15 +437,15 @@ returns them to the model.
 | `tools.ts` | `enter_plan_mode`, `write_plan`, `exit_plan_mode`, and `set_plan_steps`. |
 | `commands.ts` | `/plan` (enter, optional task) and the `/plan review [path]` browser subcommand. |
 | `tui.ts` | `PlanViewComponent` (sectioned Markdown body, section jump, scroll gauge, approve/refine/browser/keep). |
-| `blocks.ts` | Source-line block model (fence-aware headings, paragraphs, list items, code, quotes, blanks). |
+| `blocks.ts` | Source-line block model (fence-aware headings, paragraphs, list items, code, quotes, tables, rules, blanks). |
 | `feedback.ts` | Browser-comment codec: `stripFeedback`, `parseFeedback`, `formatFeedback`, `feedbackSummary`, and payload validation. |
 | `web.ts` | `createPlanWebReview`: the loopback server, the section outline and code highlighting, and the save/cancel/abort session. |
 | `web-router.ts` | Pure request handler: token/`Host`/method checks and the review routes. |
-| `web-page.ts` | The review page shell (header, section outline), its data island, and inline CSS. |
-| `web-client.ts` | The `/client.js` source (block/thread rendering, outline, inline comments, selection quotes, highlighted code, save/cancel). |
+| `web-page.ts` | The review page shell (header, reading progress, review facts, section outline, shortcut sheet), its data island, and inline CSS. |
+| `web-client.ts` | The `/client.js` source (block/thread rendering, the comment rail, outline and facts, inline comments, selection quotes, tables, highlighted code, keyboard nav, save/cancel). |
 | `path-guard.ts` | Recursive path-argument detection for the read-only backstop. |
 | [`../../lib/browser.ts`](../../lib/browser.ts) | Cross-platform default-browser opener (shared with `file-browse`). |
 | [`../../lib/highlight.ts`](../../lib/highlight.ts) | First-party escape-first syntax tokenizer (shared with `file-browse`). |
 | [`../../lib/web/index.ts`](../../lib/web/index.ts) | Shared Bytefly web brand system: tokens, base rules, `tok-*` colors, layout, the bootstrap, the toggle wiring, and shared markup. |
 | `../../lib/policy.ts` | Shared read-only capability policy (default-deny + `readOnlyHint`). |
-| `../../lib/tui.ts` | Shared screen header, viewport-row helper, and styled key-hint footer. |
+| `../../lib/tui/chrome.ts` | Shared screen header, viewport-row helper, and styled key-hint footer. |

package/extensions/plan/blocks.ts

@@ -15,7 +15,7 @@
  */
 
 /** How a block is rendered and grouped. */
-export type PlanBlockKind = "heading" | "paragraph" | "list" | "code" | "quote" | "blank";
+export type PlanBlockKind = "heading" | "paragraph" | "list" | "code" | "quote" | "table" | "hr" | "blank";
 
 /** A contiguous, source-line-anchored chunk of a plan. */
 export interface PlanBlock {
@@ -36,6 +36,25 @@ const FENCE = /^ {0,3}(`{3,}|~{3,})/;
 const LIST_ITEM = /^( *)([-*+]|\d+[.)])(\s+)/;
 /** A blockquote line. */
 const QUOTE = /^ {0,3}>/;
+/** A thematic break (`---`, `***`, `___`, spaced or not). */
+const THEMATIC_BREAK = /^ {0,3}(?:(?:\* *){3,}|(?:- *){3,}|(?:_ *){3,})$/;
+/** A line that can be a table row: it carries at least one pipe. */
+const TABLE_ROW = /\|/;
+/** A GFM alignment row (`| --- | :--: |`), with or without edge pipes. */
+const TABLE_DELIM = /^ {0,3}\|? *:?-+:? *(?:\| *:?-+:? *)*\|? *$/;
+
+/** Whether a table starts at `index`: a pipe row followed by an alignment row. */
+function startsTable(lines: string[], index: number): boolean {
+	const header = lines[index];
+	const delim = lines[index + 1];
+	return (
+		header !== undefined &&
+		delim !== undefined &&
+		TABLE_ROW.test(header) &&
+		delim.includes("-") &&
+		TABLE_DELIM.test(delim)
+	);
+}
 
 /** Leading spaces and tabs of a line, in columns (tab = 4). */
 function indentOf(line: string): number {
@@ -102,6 +121,21 @@ export function planBlocks(plan: string): PlanBlock[] {
 			continue;
 		}
 
+		if (startsTable(lines, i)) {
+			let end = i + 1;
+			// The header and alignment rows, then every contiguous pipe row.
+			while (end + 1 < lines.length && lines[end + 1].trim() !== "" && TABLE_ROW.test(lines[end + 1])) end += 1;
+			push(i, end, "table");
+			i = end + 1;
+			continue;
+		}
+
+		if (THEMATIC_BREAK.test(line)) {
+			push(i, i, "hr");
+			i += 1;
+			continue;
+		}
+
 		const item = line.match(LIST_ITEM);
 		if (item) {
 			const indent = item[1].length;
@@ -123,7 +157,15 @@ export function planBlocks(plan: string): PlanBlock[] {
 		let end = i;
 		while (end + 1 < lines.length) {
 			const next = lines[end + 1];
-			if (next.trim() === "" || FENCE.test(next) || HEADING.test(next) || QUOTE.test(next) || LIST_ITEM.test(next)) {
+			if (
+				next.trim() === "" ||
+				FENCE.test(next) ||
+				HEADING.test(next) ||
+				QUOTE.test(next) ||
+				LIST_ITEM.test(next) ||
+				THEMATIC_BREAK.test(next) ||
+				startsTable(lines, end + 1)
+			) {
 				break;
 			}
 			end += 1;

package/extensions/plan/feedback.ts

@@ -40,11 +40,25 @@ export const MAX_QUOTE_LENGTH = 500;
 /** A stored feedback line, capturing its comment. */
 const MARKER_LINE = /^\s*>\s*\[!REVIEW\]\s?(.*)$/;
 
+/**
+ * Source lines inside a fenced code block. A marker-looking line there is
+ * documentation, not stored feedback, so it is never stripped or parsed.
+ */
+function fencedLines(plan: string): Set<number> {
+	const fenced = new Set<number>();
+	for (const block of planBlocks(plan)) {
+		if (block.kind !== "code") continue;
+		for (let line = block.start; line <= block.end; line++) fenced.add(line);
+	}
+	return fenced;
+}
+
 /** Remove every stored feedback line, leaving the plan body as authored. */
 export function stripFeedback(plan: string): string {
+	const fenced = fencedLines(plan);
 	return plan
 		.split("\n")
-		.filter((line) => !MARKER_LINE.test(line))
+		.filter((line, index) => fenced.has(index) || !MARKER_LINE.test(line))
 		.join("\n");
 }
 
@@ -53,17 +67,18 @@ export function stripFeedback(plan: string): string {
  * marker in the stripped plan, so a comment keeps its place across reloads.
  */
 export function parseFeedback(plan: string): PlanAnnotation[] {
+	const fenced = fencedLines(plan);
 	const clean: string[] = [];
 	const markers: Array<{ after: number; comment: string }> = [];
-	for (const line of plan.split("\n")) {
-		const match = MARKER_LINE.exec(line);
+	plan.split("\n").forEach((line, index) => {
+		const match = fenced.has(index) ? null : MARKER_LINE.exec(line);
 		if (match) {
 			const comment = match[1].trim();
 			if (comment) markers.push({ after: clean.length, comment });
-			continue;
+			return;
 		}
 		clean.push(line);
-	}
+	});
 	if (markers.length === 0) return [];
 
 	const blocks = planBlocks(clean.join("\n"));

package/extensions/plan/index.ts

@@ -22,7 +22,7 @@ import { fileURLToPath } from "node:url";
 import { hasPathInput } from "./path-guard.ts";
 import { isExtensionEnabled } from "../../lib/env.ts";
 import { ASK_USER_QUESTION_TOOL, SUBAGENT_READ_ONLY_PARAM, SUBAGENT_TOOL } from "../../lib/tool-names.ts";
-import { STATUS_KEYS } from "../../lib/ui.ts";
+import { STATUS_KEYS } from "../../lib/tui/glyphs.ts";
 import { planModeNotice, registerCommands } from "./commands.ts";
 import { checkReadOnlyGit } from "./git-bash.ts";
 import {

package/extensions/plan/runtime.ts

@@ -20,7 +20,8 @@ import { truncateToWidth } from "@earendil-works/pi-tui";
 import type { ExtensionAPI, ExtensionContext } from "@earendil-works/pi-coding-agent";
 import { sanitizeLine } from "../../lib/format.ts";
 import type { ReadOnlyPolicy } from "../../lib/policy.ts";
-import { GLYPHS, STATUS_KEYS } from "../../lib/ui.ts";
+import { GLYPHS, STATUS_KEYS } from "../../lib/tui/glyphs.ts";
+import { paint } from "../../lib/tui/tokens.ts";
 import { createPlanStore, type PlanStore } from "./plans.ts";
 import type { PlanModeEntry } from "./types.ts";
 
@@ -143,7 +144,7 @@ export function createPlanRuntime(
 		lastPlanPath ? `${GLYPHS.plan} plan · ${statusName(lastPlanPath)}` : `${GLYPHS.plan} plan`;
 
 	const setStatus = (ctx: ExtensionContext): void => {
-		ctx.ui.setStatus(STATUS_KEYS.planMode, enabled ? ctx.ui.theme.fg("warning", statusText()) : undefined);
+		ctx.ui.setStatus(STATUS_KEYS.planMode, enabled ? paint(ctx.ui.theme, "warn", statusText()) : undefined);
 	};
 
 	const setEnabled = (next: boolean, ctx: ExtensionContext | undefined, persist: boolean): void => {

package/extensions/plan/tools.ts

@@ -22,8 +22,9 @@ import { Type, type Static } from "typebox";
 import { sanitizeLine } from "../../lib/format.ts";
 import { askHuman } from "../../lib/interaction.ts";
 import { TODO_TOOL } from "../../lib/tool-names.ts";
-import { FULL_SCREEN_OVERLAY, reuseText, toolDetails } from "../../lib/tui.ts";
-import { expandHint } from "../../lib/ui.ts";
+import { FULL_SCREEN_OVERLAY, reuseText, toolDetails } from "../../lib/tui/chrome.ts";
+import { paint } from "../../lib/tui/tokens.ts";
+import { expandHint } from "../../lib/tui/glyphs.ts";
 import { READ_ONLY_SUMMARY } from "./policy.ts";
 import { feedbackSummary } from "./feedback.ts";
 import { ENTER_TOOL, EXIT_TOOL, SET_PLAN_STEPS_TOOL, WRITE_PLAN_TOOL, type PlanRuntime } from "./runtime.ts";
@@ -238,7 +239,7 @@ export function registerTools(
 
 		renderCall(_args, theme, context) {
 			const text = reuseText(context?.lastComponent);
-			text.setText(theme.fg("toolTitle", theme.bold(`${ENTER_TOOL} `)) + theme.fg("muted", "requested plan mode"));
+			text.setText(theme.fg("toolTitle", theme.bold(`${ENTER_TOOL} `)) + paint(theme, "meta", "requested plan mode"));
 			return text;
 		},
 
@@ -250,10 +251,10 @@ export function registerTools(
 				text.setText(first?.type === "text" ? first.text : "");
 				return text;
 			}
-			if (details.unavailable) text.setText(theme.fg("warning", "No UI to confirm plan mode"));
-			else if (details.already) text.setText(theme.fg("muted", "Already in plan mode"));
-			else if (details.entered) text.setText(theme.fg("success", "✓ Plan mode enabled"));
-			else text.setText(theme.fg("muted", "Stayed in normal mode"));
+			if (details.unavailable) text.setText(paint(theme, "warn", "No UI to confirm plan mode"));
+			else if (details.already) text.setText(paint(theme, "meta", "Already in plan mode"));
+			else if (details.entered) text.setText(paint(theme, "ok", "✓ Plan mode enabled"));
+			else text.setText(paint(theme, "meta", "Stayed in normal mode"));
 			return text;
 		},
 	});
@@ -315,7 +316,7 @@ export function registerTools(
 		renderCall(args, theme, context) {
 			const text = reuseText(context?.lastComponent);
 			const title = (args as Partial<WritePlanArgs>).title;
-			const suffix = title ? theme.fg("muted", sanitizeLine(title)) : theme.fg("muted", "plan");
+			const suffix = title ? paint(theme, "meta", sanitizeLine(title)) : paint(theme, "meta", "plan");
 			text.setText(theme.fg("toolTitle", theme.bold(`${WRITE_PLAN_TOOL} `)) + suffix);
 			return text;
 		},
@@ -328,7 +329,7 @@ export function registerTools(
 				text.setText(first?.type === "text" ? first.text : "");
 				return text;
 			}
-			text.setText(theme.fg("success", "✓ Saved plan ") + theme.fg("muted", details.relativePath));
+			text.setText(paint(theme, "ok", "✓ Saved plan ") + paint(theme, "meta", details.relativePath));
 			return text;
 		},
 	});
@@ -508,7 +509,7 @@ export function registerTools(
 
 		renderCall(_args, theme, context) {
 			const text = reuseText(context?.lastComponent);
-			text.setText(theme.fg("toolTitle", theme.bold(`${EXIT_TOOL} `)) + theme.fg("muted", "submitted a plan"));
+			text.setText(theme.fg("toolTitle", theme.bold(`${EXIT_TOOL} `)) + paint(theme, "meta", "submitted a plan"));
 			return text;
 		},
 
@@ -521,25 +522,25 @@ export function registerTools(
 				return text;
 			}
 			const heading = details.unavailable
-				? theme.fg("warning", "No UI to approve the plan")
+				? paint(theme, "warn", "No UI to approve the plan")
 				: details.approved
-					? theme.fg("success", "✓ Plan approved")
+					? paint(theme, "ok", "✓ Plan approved")
 					: details.refined
-						? theme.fg("accent", "Refining the plan")
-						: theme.fg("warning", "Plan not approved");
+						? paint(theme, "accent", "Refining the plan")
+						: paint(theme, "warn", "Plan not approved");
 			const extra =
 				details.refined && details.refinement
-					? `\n${theme.fg("muted", `↳ ${sanitizePlanText(details.refinement)}`)}`
+					? `\n${paint(theme, "meta", `↳ ${sanitizePlanText(details.refinement)}`)}`
 					: "";
 			const shown = details.relativePath ?? details.planPath;
-			const path = shown ? `\n${theme.fg("muted", shown)}` : "";
+			const path = shown ? `\n${paint(theme, "meta", shown)}` : "";
 			const planText = sanitizePlanText(details.plan);
 			let out = `${heading}${extra}${path}`;
 			if (planText) {
 				const { body, more } = expanded ? { body: planText, more: 0 } : preview(planText);
 				// A blank line separates the header block from the plan body.
 				out += `\n\n${theme.fg("toolOutput", body)}`;
-				if (more > 0) out += `\n${theme.fg("dim", `… ${more} more lines`)} ${expandHint(theme)}`;
+				if (more > 0) out += `\n${paint(theme, "faint", `… ${more} more lines`)} ${expandHint(theme)}`;
 			}
 			text.setText(out);
 			return text;
@@ -609,7 +610,7 @@ export function registerTools(
 					: updates && updates.length > 1
 						? `${updates.length} steps`
 						: "steps";
-			text.setText(theme.fg("toolTitle", theme.bold(`${SET_PLAN_STEPS_TOOL} `)) + theme.fg("muted", label));
+			text.setText(theme.fg("toolTitle", theme.bold(`${SET_PLAN_STEPS_TOOL} `)) + paint(theme, "meta", label));
 			return text;
 		},
 
@@ -625,10 +626,10 @@ export function registerTools(
 			const pending = details.updates.filter((update) => update.status === "pending").map((u) => u.step);
 			const heading =
 				completed.length > 0
-					? theme.fg("success", `✓ ${stepLabel(completed)} done`) +
-						(pending.length > 0 ? theme.fg("muted", ` · ${stepLabel(pending)} reopened`) : "")
-					: theme.fg("muted", `${stepLabel(pending)} reopened`);
-			text.setText(heading + theme.fg("dim", ` · ${details.done}/${details.total}`));
+					? paint(theme, "ok", `✓ ${stepLabel(completed)} done`) +
+						(pending.length > 0 ? paint(theme, "meta", ` · ${stepLabel(pending)} reopened`) : "")
+					: paint(theme, "meta", `${stepLabel(pending)} reopened`);
+			text.setText(heading + paint(theme, "faint", ` · ${details.done}/${details.total}`));
 			return text;
 		},
 	});