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

package/extensions/file-browse/markdown.ts

@@ -14,6 +14,10 @@
  * External images are rendered as links (the page CSP is `img-src 'self' data:`)
  * and non-http(s) schemes such as `javascript:` are dropped.
  *
+ * Headings get a stable anchor id and are demoted one level so the embedding
+ * page keeps the only `h1`; `renderMarkdownDocument` returns them for an
+ * outline.
+ *
  * Kept free of the page renderer: it imports only `lib/escape.ts`,
  * `lib/highlight.ts`, and `paths.ts`, so `html.ts` can compose it without a
  * module cycle.
@@ -27,6 +31,22 @@ import { encodePath } from "./paths.ts";
 const HAS_SCHEME = /^[a-zA-Z][a-zA-Z0-9+.-]*:/;
 const SAFE_LINK_SCHEME = /^(?:https?|mailto):/i;
 const HTTP_SCHEME = /^https?:/i;
+/** A GFM extended autolink: `http(s)://` or `www.` followed by a domain. */
+const AUTOLINK = /^(?:https?:\/\/|www\.)[^\s<>]*/i;
+
+/** GFM starts an autolink at the line start or after whitespace or one of `*_~(`. */
+function autolinkBoundary(text: string, index: number): boolean {
+	return index === 0 || /[\s*_~(]/.test(text[index - 1]);
+}
+
+/** Drop the trailing punctuation GFM excludes, and an unclosed `)`. */
+function trimAutolink(url: string): string {
+	let end = url.replace(/[.,;:!?*_~]+$/, "");
+	while (end.endsWith(")") && (end.match(/\(/g)?.length ?? 0) < (end.match(/\)/g)?.length ?? 0)) {
+		end = end.slice(0, -1).replace(/[.,;:!?*_~]+$/, "");
+	}
+	return end;
+}
 /** A link reference definition: `[id]: dest "title"`. */
 const DEFINITION = /^ {0,3}\[([^\]]+)\]:\s*(\S+)(?:\s+["'(]([^"')]*)["')])?\s*$/;
 
@@ -35,16 +55,69 @@ interface LinkDefinition {
 	title?: string;
 }
 
-/** Per-document render state: the resolution base and the reference definitions. */
+/** A heading the renderer emitted, in document order. */
+export interface MarkdownHeading {
+	/** The rendered tag level, already demoted and capped at `h6`. */
+	level: number;
+	/** The anchor id, unique within the document. */
+	id: string;
+	/** The heading's raw inline Markdown. */
+	text: string;
+}
+
+/**
+ * Per-document render state: the resolution base, the reference definitions,
+ * and the headings emitted so far.
+ */
 interface Context {
 	baseDir: string;
 	defs: Map<string, LinkDefinition>;
+	headings: MarkdownHeading[];
+	slug(text: string): string;
+}
+
+/**
+ * Render a Markdown source string to a safe HTML fragment, plus the headings it
+ * emitted so a caller can build an outline. Headings carry an anchor id and are
+ * demoted one level, so the embedding page keeps the only `h1`.
+ */
+export function renderMarkdownDocument(source: string, baseDir = ""): { html: string; headings: MarkdownHeading[] } {
+	const { defs, body } = collectDefinitions(source.split(/\r\n|\r|\n/));
+	const context = createContext(baseDir, defs);
+	return { html: renderBlocks(body, context), headings: context.headings };
 }
 
 /** Render a Markdown source string to a safe HTML fragment. */
 export function renderMarkdown(source: string, baseDir = ""): string {
-	const { defs, body } = collectDefinitions(source.split(/\r\n|\r|\n/));
-	return renderBlocks(body, { baseDir, defs });
+	return renderMarkdownDocument(source, baseDir).html;
+}
+
+/** Turn heading text into a stable anchor id, dropping Markdown punctuation. */
+function headingSlug(text: string): string {
+	const plain = text
+		.replace(/\[([^\]]*)\]\([^)]*\)/g, "$1")
+		.replace(/[`*_~]/g, "")
+		.toLowerCase()
+		.replace(/[^\p{L}\p{N}\s-]/gu, "")
+		.replace(/[\s-]+/g, "-")
+		.replace(/^-+|-+$/g, "");
+	return plain || "section";
+}
+
+/** Build the per-document render state, suffixing repeated heading slugs. */
+function createContext(baseDir: string, defs: Map<string, LinkDefinition>): Context {
+	const seen = new Map<string, number>();
+	return {
+		baseDir,
+		defs,
+		headings: [],
+		slug(text: string): string {
+			const base = headingSlug(text);
+			const count = seen.get(base) ?? 0;
+			seen.set(base, count + 1);
+			return count === 0 ? base : `${base}-${count}`;
+		},
+	};
 }
 
 /** Fold a reference label the way CommonMark does: trim, collapse, case-fold. */
@@ -135,7 +208,10 @@ function renderBlocks(lines: string[], ctx: Context): string {
 
 		const heading = matchHeading(line);
 		if (heading) {
-			out.push(`<h${heading.level}>${renderInline(heading.text, ctx)}</h${heading.level}>`);
+			const level = Math.min(heading.level + 1, 6);
+			const id = ctx.slug(heading.text);
+			ctx.headings.push({ level, id, text: heading.text });
+			out.push(`<h${level} id="${id}">${renderInline(heading.text, ctx)}</h${level}>`);
 			i++;
 			continue;
 		}
@@ -403,7 +479,7 @@ function renderListItem(contentLines: string[], ctx: Context): string {
 	const tight = !source.some(isBlank);
 	let body = renderBlocks(source, ctx);
 	if (tight) body = body.replace(/<\/?p>/g, "");
-	const mark = task ? `<span class="md-check" aria-hidden="true">${done ? "☑" : "☐"}</span> ` : "";
+	const mark = task ? `<input class="md-check" type="checkbox" disabled${done ? " checked" : ""}> ` : "";
 	return `<li${task ? (done ? ` class="task done"` : ` class="task"`) : ""}>${mark}${body}</li>`;
 }
 
@@ -740,6 +816,23 @@ function renderInline(text: string, ctx: Context): string {
 			}
 		}
 
+		// GFM extended autolink: a bare `https://` or `www.` URL in running text.
+		if ((char === "h" || char === "H" || char === "w" || char === "W") && autolinkBoundary(text, i)) {
+			const match = AUTOLINK.exec(text.slice(i));
+			if (match) {
+				const label = trimAutolink(match[0]);
+				const dots = label.indexOf(".");
+				// Require a domain, so a bare scheme is not a link.
+				if (dots > 0 && /\.[^./]/.test(label.slice(dots))) {
+					const href = /^www\./i.test(label) ? `http://${label}` : label;
+					const external = HTTP_SCHEME.test(href) ? ` target="_blank" rel="noopener noreferrer"` : "";
+					out += `<a href="${escapeHtml(href)}"${external}>${escapeHtml(label)}</a>`;
+					i += label.length;
+					continue;
+				}
+			}
+		}
+
 		if ((char === "*" || char === "_") && text[i + 1] === char) {
 			const close = text.indexOf(char + char, i + 2);
 			if (close > i + 2) {

package/extensions/file-browse/router.ts

@@ -11,7 +11,8 @@ import { stat } from "node:fs/promises";
 import { THEME_JS } from "../../lib/web/index.ts";
 import { CLIENT_JS } from "./client.ts";
 import type { ServeConfig } from "./config.ts";
-import type { GitStatus, GitStatusProvider } from "./git.ts";
+import { changeDirs, isDiffMode, type DiffMode } from "./diff.ts";
+import type { DiffList, GitDiffProvider, GitStatus, GitStatusProvider } from "./git.ts";
 import {
 	buildFileIndex,
 	buildTree,
@@ -25,7 +26,8 @@ import {
 } from "./files.ts";
 import { FOLDER_ICON, iconHref, languageOf } from "./icons.ts";
 import { fuzzySearch } from "./fuzzy.ts";
-import { renderDirectoryPage, renderErrorPage, renderFilePage } from "./html.ts";
+import { renderDirectoryPage, renderDiffPage, renderErrorPage, renderFileDiffPage, renderFilePage } from "./html.ts";
+import type { ChangeSummary } from "./html.ts";
 import { encodePath, HttpError, relativePath, resolveDecodedPath, resolveRequestPath } from "./paths.ts";
 
 export interface ServeContext {
@@ -33,6 +35,8 @@ export interface ServeContext {
 	config: ServeConfig;
 	/** Read-only git context for the page header; omitted when unavailable. */
 	git?: GitStatusProvider;
+	/** Read-only diff provider; omitted when the diff view is unavailable. */
+	diff?: GitDiffProvider;
 	/** Cached quick-open file index; built on demand when omitted. */
 	index?: FileIndexProvider;
 }
@@ -97,6 +101,33 @@ async function gitFor(ctx: ServeContext): Promise<GitStatus | undefined> {
 	}
 }
 
+/** The change list for a mode, or `undefined` outside a repository. */
+async function diffFor(ctx: ServeContext, mode: DiffMode) {
+	if (!ctx.config.gitDiff || !ctx.diff) return undefined;
+	try {
+		return await ctx.diff.list(mode);
+	} catch {
+		return undefined;
+	}
+}
+
+/** The marker/totals index derived from a change list. */
+function summaryOf(list: DiffList): ChangeSummary {
+	return {
+		count: list.files.length,
+		insertions: list.insertions,
+		deletions: list.deletions,
+		files: new Set(list.files.map((file) => file.rel)),
+		dirs: changeDirs(list.files),
+	};
+}
+
+/** The `head` change summary, for the header chip, tree markers, and file action. */
+async function changed(ctx: ServeContext): Promise<ChangeSummary | undefined> {
+	const list = await diffFor(ctx, "head");
+	return list ? summaryOf(list) : undefined;
+}
+
 async function errorResponse(
 	ctx: ServeContext,
 	status: number,
@@ -137,6 +168,7 @@ async function browse(ctx: ServeContext, rawRel: string): Promise<ServeResponse>
 	const listing = await listDirectory(ctx.root, rel, ctx.config.maxDirEntries);
 	const tree = await treeFor(ctx, rel);
 	const git = await gitFor(ctx);
+	const changes = await changed(ctx);
 	return htmlResponse(
 		200,
 		renderDirectoryPage({
@@ -147,6 +179,7 @@ async function browse(ctx: ServeContext, rawRel: string): Promise<ServeResponse>
 			thumbnails: ctx.config.thumbnails,
 			maxThumbBytes: ctx.config.maxThumbBytes,
 			git,
+			summary: changes,
 		}),
 	);
 }
@@ -161,6 +194,7 @@ async function view(ctx: ServeContext, rawRel: string, raw: boolean): Promise<Se
 	const file = await readFileView(ctx.root, rel, ctx.config.maxFileBytes, ctx.config.maxTextLines, ctx.config.markdown);
 	const tree = await treeFor(ctx, rel);
 	const git = await gitFor(ctx);
+	const changes = await changed(ctx);
 	return htmlResponse(
 		200,
 		renderFilePage({
@@ -171,6 +205,59 @@ async function view(ctx: ServeContext, rawRel: string, raw: boolean): Promise<Se
 			maxFileBytes: ctx.config.maxFileBytes,
 			git,
 			markdownRaw: raw,
+			changed: changes?.files.has(rel),
+			summary: changes,
+		}),
+	);
+}
+
+/** The change overview page for a mode. A non-repository is an empty state, not an error. */
+async function diffOverview(ctx: ServeContext, mode: DiffMode): Promise<ServeResponse> {
+	if (!ctx.config.gitDiff || !ctx.diff) throw new HttpError(404, "The diff view is not available.");
+	const list = await diffFor(ctx, mode);
+	const tree = await treeFor(ctx, "");
+	const git = await gitFor(ctx);
+	return htmlResponse(
+		200,
+		renderDiffPage({
+			rootLabel: ctx.root,
+			mode,
+			files: list?.files ?? [],
+			stat: list?.stat ?? "",
+			tree,
+			git,
+			summary: list ? summaryOf(list) : undefined,
+		}),
+	);
+}
+
+/** A single file's unified diff for a mode. */
+async function diffFile(ctx: ServeContext, rawRel: string, mode: DiffMode): Promise<ServeResponse> {
+	if (!ctx.config.gitDiff || !ctx.diff) throw new HttpError(404, "The diff view is not available.");
+	const abs = await resolveRequestPath(ctx.root, rawRel);
+	const rel = relativePath(ctx.root, abs);
+	const info = await stat(abs).catch(() => undefined);
+	if (info?.isDirectory()) throw new HttpError(400, "That path is a folder.");
+	let diff: Awaited<ReturnType<GitDiffProvider["file"]>>;
+	try {
+		diff = await ctx.diff.file(rel, mode);
+	} catch {
+		diff = undefined;
+	}
+	if (!diff) throw new HttpError(404, "No diff is available for that file.");
+	const tree = await treeFor(ctx, rel);
+	const git = await gitFor(ctx);
+	const changes = await changed(ctx);
+	return htmlResponse(
+		200,
+		renderFileDiffPage({
+			rootLabel: ctx.root,
+			rel,
+			mode,
+			diff,
+			tree,
+			git,
+			summary: changes,
 		}),
 	);
 }
@@ -276,6 +363,11 @@ export async function handleRequest(
 		if (pathname === "/favicon.ico") return { status: 204, headers: { ...HTML_SECURITY }, body: "" };
 		if (pathname === "/api/tree") return await treeApi(ctx, search.get("path") ?? "");
 		if (pathname === "/api/files") return await filesApi(ctx, search.get("q") ?? "");
+		const rawMode = search.get("mode");
+		if (rawMode !== null && !isDiffMode(rawMode)) return errorResponse(ctx, 400, "Unknown diff mode.");
+		const mode: DiffMode = isDiffMode(rawMode) ? rawMode : "head";
+		if (pathname === "/diff" || pathname === "/diff/") return await diffOverview(ctx, mode);
+		if (pathname.startsWith("/diff/")) return await diffFile(ctx, pathname.slice("/diff/".length), mode);
 		if (pathname === "/" || pathname === "/browse" || pathname === "/browse/") return await browse(ctx, "");
 		if (pathname.startsWith("/browse/")) return await browse(ctx, pathname.slice("/browse/".length));
 		if (pathname.startsWith("/view/"))

package/extensions/file-browse/server.ts

@@ -11,7 +11,7 @@ import { createReadStream, realpathSync } from "node:fs";
 import { createServer, type IncomingMessage, type ServerResponse } from "node:http";
 import type { ServeConfig } from "./config.ts";
 import { createFileIndex } from "./files.ts";
-import type { GitStatusProvider } from "./git.ts";
+import type { GitDiffProvider, GitStatusProvider } from "./git.ts";
 import { handleRequest, type ServeContext, type ServeResponse } from "./router.ts";
 
 export interface FileServer {
@@ -30,6 +30,8 @@ export interface FileServerOptions {
 	config: ServeConfig;
 	/** Read-only git context for the page header; omitted when unavailable. */
 	git?: GitStatusProvider;
+	/** Read-only diff provider for the change and diff views; omitted when unavailable. */
+	diff?: GitDiffProvider;
 	/** Override the request handler (tests). */
 	handler?: typeof handleRequest;
 }
@@ -68,6 +70,7 @@ export async function createFileServer(options: FileServerOptions): Promise<File
 		root,
 		config: options.config,
 		git: options.git,
+		diff: options.diff,
 		index: createFileIndex(root, options.config.maxIndexEntries),
 	};
 	const handler = options.handler ?? handleRequest;

package/extensions/goal/format.ts

@@ -7,12 +7,13 @@
  * persistent widget, by contrast, is a plain label-first line
  * (`Goal · active · <objective>`) matching the `todo` and `jobs` widgets. The
  * symbols and labels live here; the rail indent constants are shared with
- * `todo` in `lib/ui.ts`.
+ * `todo` in `lib/tui/glyphs.ts`.
  */
 
 import type { Theme } from "@earendil-works/pi-coding-agent";
 import { sliceByColumn, visibleWidth } from "@earendil-works/pi-tui";
-import { GLYPHS } from "../../lib/ui.ts";
+import { GLYPHS } from "../../lib/tui/glyphs.ts";
+import { paint } from "../../lib/tui/tokens.ts";
 import type { Goal, GoalStatus } from "./types.ts";
 
 /** Active-goal glyph. */
@@ -25,7 +26,7 @@ const CALL_PREVIEW_WIDTH = 48;
 
 /** Themed status glyph, shared by the widget and the transcript renderer. */
 export function goalGlyph(goal: Goal, theme: Theme): string {
-	return goal.status === "achieved" ? theme.fg("success", ACHIEVED_SYMBOL) : theme.fg("accent", ACTIVE_SYMBOL);
+	return goal.status === "achieved" ? paint(theme, "ok", ACHIEVED_SYMBOL) : paint(theme, "accent", ACTIVE_SYMBOL);
 }
 
 /** Human label for a status, e.g. `active`. */
@@ -38,10 +39,10 @@ export function goalStatusLabel(status: GoalStatus): string {
  * the status word is dim while active, success-colored once achieved.
  */
 export function goalHeader(goal: Goal, theme: Theme): string {
-	const label = theme.fg("accent", "Goal");
-	const separator = theme.fg("dim", " · ");
+	const label = paint(theme, "accent", "Goal");
+	const separator = paint(theme, "faint", " · ");
 	const word = goalStatusLabel(goal.status);
-	const status = goal.status === "achieved" ? theme.fg("success", word) : theme.fg("dim", word);
+	const status = goal.status === "achieved" ? paint(theme, "ok", word) : paint(theme, "faint", word);
 	return `${label}${separator}${status}`;
 }
 
@@ -52,15 +53,15 @@ export function goalHeader(goal: Goal, theme: Theme): string {
  * Callers clip it to the available width.
  */
 export function goalLine(goal: Goal, theme: Theme): string {
-	const separator = theme.fg("dim", " · ");
+	const separator = paint(theme, "faint", " · ");
 	const word = goalStatusLabel(goal.status);
-	const status = goal.status === "achieved" ? theme.fg("success", word) : theme.fg("dim", word);
-	return `${theme.fg("accent", "Goal")}${separator}${status}${separator}${goalObjective(goal, theme)}`;
+	const status = goal.status === "achieved" ? paint(theme, "ok", word) : paint(theme, "faint", word);
+	return `${paint(theme, "accent", "Goal")}${separator}${status}${separator}${goalObjective(goal, theme)}`;
 }
 
 /** Themed objective text: dim once achieved, normal while active. */
 export function goalObjective(goal: Goal, theme: Theme): string {
-	return goal.status === "achieved" ? theme.fg("dim", goal.objective) : theme.fg("text", goal.objective);
+	return goal.status === "achieved" ? paint(theme, "faint", goal.objective) : paint(theme, "label", goal.objective);
 }
 
 /** Model-facing result text. */

package/extensions/goal/tools.ts

@@ -11,8 +11,9 @@ import type { JsonValue } from "@earendil-works/pi-ai";
 import type { ExtensionAPI, Theme } from "@earendil-works/pi-coding-agent";
 import { sanitizeLine } from "../../lib/format.ts";
 import { GOAL_TOOL } from "../../lib/tool-names.ts";
-import { reuseText, toolDetails } from "../../lib/tui.ts";
-import { GLYPHS } from "../../lib/ui.ts";
+import { reuseText, toolDetails } from "../../lib/tui/chrome.ts";
+import { paint } from "../../lib/tui/tokens.ts";
+import { GLYPHS } from "../../lib/tui/glyphs.ts";
 import { formatCallText, formatGoalText, goalObjective, previewObjective } from "./format.ts";
 import type { GoalRuntime } from "./runtime.ts";
 import { GoalParams, GoalResult, normalizeGoal, type GoalArgs } from "./schema.ts";
@@ -102,7 +103,7 @@ export function registerTools(pi: ExtensionAPI, runtime: GoalRuntime): void {
 			const text = reuseText(context.lastComponent);
 			text.setText(
 				theme.fg("toolTitle", theme.bold(`${TOOL_NAME} `)) +
-					theme.fg("muted", formatCallText(args.objective, context.argsComplete, args.status)),
+					paint(theme, "meta", formatCallText(args.objective, context.argsComplete, args.status)),
 			);
 			return text;
 		},
@@ -116,12 +117,12 @@ export function registerTools(pi: ExtensionAPI, runtime: GoalRuntime): 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.goal) {
 				// A neutral marker, deliberately not the achieved check.
-				text.setText(theme.fg("dim", `${GLYPHS.stopped} `) + theme.fg("muted", "Cleared the goal"));
+				text.setText(paint(theme, "faint", `${GLYPHS.stopped} `) + paint(theme, "meta", "Cleared the goal"));
 				return text;
 			}
 			const body = resultBody(details.goal, expanded, theme);

package/extensions/goal/tui.ts

@@ -13,7 +13,7 @@
 
 import type { Theme } from "@earendil-works/pi-coding-agent";
 import { truncateToWidth, visibleWidth, wrapTextWithAnsi, type Component } from "@earendil-works/pi-tui";
-import { BODY_INDENT, GLYPH_GAP } from "../../lib/ui.ts";
+import { BODY_INDENT, GLYPH_GAP } from "../../lib/tui/glyphs.ts";
 import { goalGlyph, goalHeader, goalLine } from "./format.ts";
 import type { AchievedStyle, Goal } from "./types.ts";
 

package/extensions/job/README.md

@@ -289,10 +289,10 @@ rewritten.
 | `session.ts` | Per-session heartbeat markers and owner-liveness rules. |
 | `store.ts` | Durable store: registry dir, this session's atomic merge-write, deletions. |
 | `logs.ts` | Bounded, sanitized log-tail reading. |
-| `ui.ts` | Footer status chips. |
+| `ui.ts` | Footer status chips, over the shared `lib/tui/status-controller.ts`. |
 | `waiters.ts` | `wait` resolver bookkeeping. |
 | `runtime.ts` | Composition: job table, handles, process events, repaint clock. |
-| `tui.ts` | The `/jobs` screen and the transcript `JobResult` rail. |
+| `tui.ts` | The `/jobs` screen and the transcript `JobResult` rail, drawn from the `lib/tui/` kit (`titleRule`, `listRow`, `emptyState`, `IdCursor`, `LinePane`). |
 | `tools.ts` | The `job` tool and its transcript rendering. |
 | `commands.ts` | The `/jobs` command. |
 | `types.ts` | Shared types. |

package/extensions/job/format.ts

@@ -14,7 +14,8 @@
 
 import type { Theme } from "@earendil-works/pi-coding-agent";
 import { truncateToWidth } from "@earendil-works/pi-tui";
-import { GLYPHS } from "../../lib/ui.ts";
+import { GLYPHS } from "../../lib/tui/glyphs.ts";
+import { paint, type TuiRole } from "../../lib/tui/tokens.ts";
 import type { JobRecord, JobStatus } from "./types.ts";
 
 /** Longest sanitized log line kept for display; longer lines are clipped. */
@@ -76,22 +77,43 @@ export function elapsedMs(job: JobRecord, now: number): number {
 	return (job.finishedAt ?? now) - job.startedAt;
 }
 
-/** Width-1 themed glyph for a status. */
-export function statusGlyph(status: JobStatus, theme: Theme): string {
+/** The design role a job status is drawn in. */
+export function statusRole(status: JobStatus): TuiRole {
 	switch (status) {
 		case "exited":
-			return theme.fg("success", GLYPHS.check);
+			return "ok";
 		case "failed":
-			return theme.fg("error", GLYPHS.jobsFailure);
+			return "bad";
 		case "killed":
-			return theme.fg("muted", GLYPHS.killed);
+			return "meta";
 		case "unknown":
-			return theme.fg("dim", GLYPHS.unknown);
+			return "faint";
 		default:
-			return theme.fg("accent", GLYPHS.jobsRunning);
+			return "accent";
 	}
 }
 
+/** Width-1 glyph for a status, from the shared vocabulary. */
+export function statusGlyphChar(status: JobStatus): string {
+	switch (status) {
+		case "exited":
+			return GLYPHS.check;
+		case "failed":
+			return GLYPHS.jobsFailure;
+		case "killed":
+			return GLYPHS.killed;
+		case "unknown":
+			return GLYPHS.unknown;
+		default:
+			return GLYPHS.jobsRunning;
+	}
+}
+
+/** Width-1 themed glyph for a status. */
+export function statusGlyph(status: JobStatus, theme: Theme): string {
+	return paint(theme, statusRole(status), statusGlyphChar(status));
+}
+
 /** Short status word for text output. */
 function statusWord(job: JobRecord): string {
 	if (job.status === "failed" && job.exitCode !== null) return `failed (exit ${job.exitCode})`;
@@ -229,18 +251,19 @@ export function jobOutcome(job: JobRecord): string {
 
 /** One-line outcome for a single job, themed for the transcript result. */
 export function formatJobOutcomeLine(job: JobRecord, theme: Theme, now = Date.now()): string {
-	const sep = theme.fg("dim", " · ");
-	const outcome = job.status === "failed" ? theme.fg("error", jobOutcome(job)) : theme.fg("dim", jobOutcome(job));
+	const sep = paint(theme, "faint", " · ");
+	const outcome =
+		job.status === "failed" ? paint(theme, "bad", jobOutcome(job)) : paint(theme, "faint", jobOutcome(job));
 	return (
 		statusGlyph(job.status, theme) +
 		" " +
-		theme.fg("accent", job.id) +
+		paint(theme, "accent", job.id) +
 		" " +
-		theme.fg("muted", shortLabel(job)) +
+		paint(theme, "meta", shortLabel(job)) +
 		sep +
 		outcome +
 		sep +
-		theme.fg("dim", formatDuration(elapsedMs(job, now)))
+		paint(theme, "faint", formatDuration(elapsedMs(job, now)))
 	);
 }
 

package/extensions/job/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 { JOB_FINISHED_CHANNEL, type JobFinishedEvent } from "../../lib/events.ts";
-import { STATUS_KEYS } from "../../lib/ui.ts";
+import { STATUS_KEYS } from "../../lib/tui/glyphs.ts";
 import { registerCommands } from "./commands.ts";
 import { formatCompletion } from "./format.ts";
 import { createJobsRuntime, type JobsRuntime } from "./runtime.ts";

package/extensions/job/tools.ts

@@ -9,7 +9,8 @@
 
 import type { ExtensionAPI } 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 { paint } from "../../lib/tui/tokens.ts";
 import {
 	compareJobs,
 	formatCallText,
@@ -225,20 +226,20 @@ export function registerTools(pi: ExtensionAPI, runtime: JobsRuntime): 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 (options.isPartial) {
 				const id = details.job?.id;
-				text.setText(theme.fg("warning", id ? `Waiting on ${id}…` : "Waiting…"));
+				text.setText(paint(theme, "warn", id ? `Waiting on ${id}…` : "Waiting…"));
 				return text;
 			}
 
 			if (details.action === "logs" && details.logs !== undefined) {
 				const all = details.logs === "" ? [] : details.logs.split("\n");
 				if (all.length === 0) {
-					text.setText(theme.fg("muted", "No output yet."));
+					text.setText(paint(theme, "meta", "No output yet."));
 					return text;
 				}
 				const shown = options.expanded ? all : all.slice(Math.max(0, all.length - RESULT_ROWS));
@@ -250,7 +251,7 @@ export function registerTools(pi: ExtensionAPI, runtime: JobsRuntime): void {
 
 			if (details.action === "list" && details.jobs) {
 				if (details.jobs.length === 0) {
-					text.setText(theme.fg("muted", "No jobs."));
+					text.setText(paint(theme, "meta", "No jobs."));
 					return text;
 				}
 				const ordered = [...details.jobs].sort(compareJobs);
@@ -264,7 +265,7 @@ export function registerTools(pi: ExtensionAPI, runtime: JobsRuntime): void {
 			if (details.action === "clear") {
 				const count = details.cleared ?? 0;
 				text.setText(
-					theme.fg("muted", count === 0 ? "Nothing to clear." : `Cleared ${count} job${count === 1 ? "" : "s"}.`),
+					paint(theme, "meta", count === 0 ? "Nothing to clear." : `Cleared ${count} job${count === 1 ? "" : "s"}.`),
 				);
 				return text;
 			}
@@ -272,16 +273,16 @@ export function registerTools(pi: ExtensionAPI, runtime: JobsRuntime): void {
 			if (details.job) {
 				let line = formatJobOutcomeLine(details.job, theme);
 				if (details.action === "wait" && details.timedOut) {
-					line += theme.fg("warning", " · still running after the timeout");
+					line += paint(theme, "warn", " · still running after the timeout");
 				} else if (details.action === "wait" && details.cancelled) {
-					line += theme.fg("warning", " · wait cancelled; job still running");
+					line += paint(theme, "warn", " · wait cancelled; job still running");
 				} else if (details.action === "kill" && details.signalled) {
-					line += theme.fg("warning", ` · ${details.signal ?? "SIGTERM"} sent`);
+					line += paint(theme, "warn", ` · ${details.signal ?? "SIGTERM"} sent`);
 				} else if (details.action === "start") {
 					const badges: string[] = [];
 					if (details.job.detached) badges.push("detached");
 					if (details.job.wake) badges.push("wake");
-					if (badges.length > 0) line += theme.fg("dim", ` · ${badges.join(" · ")}`);
+					if (badges.length > 0) line += paint(theme, "faint", ` · ${badges.join(" · ")}`);
 				}
 				text.setText(line);
 				return text;