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

package/extensions/file-browse/markdown.ts

@@ -31,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*$/;
 
@@ -800,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/file-open/README.md

@@ -5,6 +5,12 @@ handler, or reveals it in the file manager. `/open` does it interactively and
 the `open_path` tool does it from a script, both resolving the path against the
 effective working directory.
 
+## Tool rendering
+
+How the `open_path` call and its result look in the transcript — the call line as a headline and the body indented under it:
+
+<img src="../../assets/tools/open_path.png" alt="The open_path tool's call and result, drawn by the generic fallback" width="100%">
+
 ## Quickstart
 
 ```bash

package/extensions/goal/README.md

@@ -9,6 +9,12 @@ pi -e .                             # load the whole @gavin-hu/my-pi-agent packa
 pi install ./                       # install the package
 ```
 
+## Tool rendering
+
+How the `goal` call and its result look in the transcript — the call line as a headline and the body indented under it:
+
+<img src="../../assets/tools/goal.png" alt="The goal tool's result: the call line and an indented body with the Goal header and the objective body" width="100%">
+
 ## What it does
 
 - Registers one model-callable tool, `goal`, that records the session
@@ -110,14 +116,13 @@ The tool works in every mode. The persistent widget requires interactive
 `/goal <prompt>` runs the loop: each model call uses a cancellable `tui` spinner
 in interactive mode and runs directly in RPC; the questions and the confirm step
 are host dialogs, forwarded by RPC. In print and JSON mode the loop is skipped
-and the typed text is sent. The widget is always a single line; the transcript result
-keeps the full glyph rail, separated from the call line by a blank line:
+and the typed text is sent. The widget is always a single line; the transcript
+result is the status header alone, directly under the call line that names the
+objective:
 
 ```
 goal → set: Refactor the parser to support streaming input
-
-Goal · active
-  ⊚ Refactor the parser to support streaming input and ship it with tests
+  Goal · active
 ```
 
 The renderer reuses the slot's component (`context.lastComponent`) rather than
@@ -205,9 +210,10 @@ depends on config.
   hide all rails and restore them on close.
 - **One-line widget, achieved hidden by default.** The rail follows the
   `todo` grammar (`Goal · active · <objective>`): accent label leads, status
-  follows, no prefixed glyph, clipped to the terminal. The transcript keeps the
-  multi-line `⊚` / `✓` rail. `achieved: "show"` restores the dimmed line; config
-  only affects presentation.
+  follows, no prefixed glyph, clipped to the terminal. The transcript result is
+  the status header alone (`Goal · active`), because the call line above it
+  already carries the objective; it does not restate it. `achieved: "show"`
+  restores the dimmed widget line; config only affects presentation.
 - **Sanitize at the boundary.** `normalizeGoal` and `parseClarification` both route
   model text through `lib/format.ts`'s `sanitizeLine`, so an embedded newline
   cannot corrupt the widget and raw escapes cannot restyle the terminal.
@@ -223,9 +229,9 @@ depends on config.
 | `clarify-parse.ts` | Parse the `{ understood, goal, questions }` reply (and the plain-text fallback), normalize questions, and expose the limits (pure). |
 | `clarify.ts` | The two model calls, their cancellable loaders, the in-command questionnaire, and the confirm/edit dialog (host). |
 | `state.ts` | Branch reconstruction (pure). |
-| `format.ts` | Model-facing and terminal text plus the transcript `⊚` / `✓` symbols and the rail vocabulary (pure). |
+| `format.ts` | Model-facing and terminal text plus the header and rail vocabulary (pure). |
 | `config.ts` | Widget config load/validation (the `goal` section of `bytefly.json`). |
-| `tui.ts` | The persistent goal widget and the transcript result rail. |
+| `tui.ts` | The persistent goal widget and the transcript status header. |
 | `runtime.ts` | Session-scoped state and widget synchronization. |
 | `tools.ts` | `goal` tool registration and rendering. |
 | `commands.ts` | `/goal`. |

package/extensions/goal/format.ts

@@ -1,33 +1,21 @@
 /**
  * Model-facing and transcript text for the goal (pure).
  *
- * The transcript result is drawn as a glyph rail shared with `todo`: a header
- * line (`Goal · active`) and an indented body row led by `⊚` (active) or `✓`
- * (achieved), with wrapped continuation rows aligned under the text. The
- * 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`.
+ * The transcript result is the status header (`Goal · active`) under the call
+ * line, which already names the objective; the persistent widget is a plain
+ * label-first line (`Goal · active · <objective>`) matching the `todo` and
+ * `jobs` widgets. The status labels live here.
  */
 
 import type { Theme } from "@earendil-works/pi-coding-agent";
 import { sliceByColumn, visibleWidth } from "@earendil-works/pi-tui";
-import { GLYPHS } from "../../lib/ui.ts";
+import { SEPARATORS } from "../../lib/tui/glyphs.ts";
+import { paint } from "../../lib/tui/tokens.ts";
 import type { Goal, GoalStatus } from "./types.ts";
 
-/** Active-goal glyph. */
-export const ACTIVE_SYMBOL = GLYPHS.target;
-/** Achieved-goal glyph. */
-export const ACHIEVED_SYMBOL = GLYPHS.check;
-
 /** Longest objective preview shown in the transcript call line. */
 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);
-}
-
 /** Human label for a status, e.g. `active`. */
 export function goalStatusLabel(status: GoalStatus): string {
 	return status === "achieved" ? "achieved" : "active";
@@ -38,10 +26,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", SEPARATORS.item);
 	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 +40,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", SEPARATORS.item);
 	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

@@ -8,12 +8,13 @@
  */
 
 import type { JsonValue } from "@earendil-works/pi-ai";
-import type { ExtensionAPI, Theme } from "@earendil-works/pi-coding-agent";
+import type { ExtensionAPI } 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 { formatCallText, formatGoalText, goalObjective, previewObjective } from "./format.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 } from "./format.ts";
 import type { GoalRuntime } from "./runtime.ts";
 import { GoalParams, GoalResult, normalizeGoal, type GoalArgs } from "./schema.ts";
 import { GoalResult as GoalResultView } from "./tui.ts";
@@ -21,9 +22,6 @@ import type { GoalAction, GoalDetails } from "./types.ts";
 
 export const TOOL_NAME = GOAL_TOOL;
 
-/** Longest objective shown in an unexpanded transcript result. */
-const RESULT_PREVIEW_WIDTH = 72;
-
 /** Best-effort action of a rejected call, for the error result's details. */
 function attemptedAction(args: Partial<GoalArgs>): GoalAction {
 	if (args.status === "achieved") return "achieve";
@@ -31,14 +29,6 @@ function attemptedAction(args: Partial<GoalArgs>): GoalAction {
 	return "set";
 }
 
-/** Themed body for the transcript result: the collapsed preview or the full objective. */
-function resultBody(goal: NonNullable<GoalDetails["goal"]>, expanded: boolean, theme: Theme): string {
-	const text = expanded ? goal.objective : previewObjective(goal.objective, RESULT_PREVIEW_WIDTH);
-	// Route both states through `goalObjective`, so an achieved goal is dimmed
-	// whether it is collapsed or expanded.
-	return goalObjective({ objective: text, status: goal.status }, theme);
-}
-
 /**
  * JSON-safe mirror of the goal for `structuredContent`.
  *
@@ -102,12 +92,12 @@ 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;
 		},
 
-		renderResult(result, { expanded }, theme, context) {
+		renderResult(result, _options, theme, context) {
 			const text = reuseText(context.lastComponent);
 			const details = toolDetails<GoalDetails>(result.details);
 			if (!details) {
@@ -116,20 +106,19 @@ 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);
 			const view =
 				context.lastComponent instanceof GoalResultView
 					? context.lastComponent
-					: new GoalResultView(details.goal, body, theme);
-			view.update(details.goal, body, theme);
+					: new GoalResultView(details.goal, theme);
+			view.update(details.goal, theme);
 			return view;
 		},
 	});

package/extensions/goal/tui.ts

@@ -1,20 +1,16 @@
 /**
  * Terminal rendering for the goal.
  *
- * Two surfaces share one vocabulary. `goalWidgetLines` renders the persistent
- * above-editor widget as a single label-first rail line (`Goal · active ·
- * <objective>`, dimmed once achieved), matching the `todo` and `jobs` widgets.
- * `goalRailLines` renders the transcript result as a header (`Goal · active`)
- * plus the objective wrapped and led by the status glyph, with continuation rows
- * aligned under the text; it matches the todo transcript result's indent + glyph
- * grammar so the two read as a pair.
- * `GoalResult` wraps `goalRailLines` uncapped for the transcript.
+ * Two surfaces share one vocabulary. The persistent above-editor widget is a
+ * single label-first rail line (`Goal · active · <objective>`, dimmed once
+ * achieved), matching the `todo` and `jobs` widgets. The transcript result is
+ * the status header alone (`Goal · active`): the call line already names the
+ * objective, so the result only states the new status.
  */
 
 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 { goalGlyph, goalHeader, goalLine } from "./format.ts";
+import { truncateToWidth, type Component } from "@earendil-works/pi-tui";
+import { goalHeader, goalLine } from "./format.ts";
 import type { AchievedStyle, Goal } from "./types.ts";
 
 /** Widget key used with `ctx.ui.setWidget()`. */
@@ -25,27 +21,6 @@ export interface GoalWidgetOptions {
 	achieved?: AchievedStyle;
 }
 
-/**
- * Rows for the transcript goal rail: the themed header plus `body` wrapped and
- * led by the status glyph. Continuation rows are padded to the text column.
- */
-export function goalRailLines(goal: Goal, body: string, theme: Theme, width: number): string[] {
-	const w = Math.max(1, width);
-	const glyph = goalGlyph(goal, theme);
-	const glyphWidth = visibleWidth(glyph);
-	const textColumn = BODY_INDENT + glyphWidth + GLYPH_GAP;
-	const inner = Math.max(1, w - textColumn);
-
-	const wrapped = wrapTextWithAnsi(body, inner);
-	const pad = " ".repeat(BODY_INDENT);
-	const continuation = " ".repeat(textColumn);
-	const lines = [goalHeader(goal, theme)];
-	wrapped.forEach((line, index) => {
-		lines.push(index === 0 ? `${pad}${glyph}${" ".repeat(GLYPH_GAP)}${line}` : `${continuation}${line}`);
-	});
-	return lines.map((line) => truncateToWidth(line, w, "…"));
-}
-
 /** Rows for the goal widget: a single rail line, or nothing when hidden. */
 export function goalWidgetLines(goal: Goal, theme: Theme, width: number, options: GoalWidgetOptions = {}): string[] {
 	const w = Math.max(1, width);
@@ -68,30 +43,27 @@ export class GoalWidget implements Component {
 	}
 }
 
-/** Transcript result block: the rail, uncapped, with the themed body. */
+/** Transcript result block: the status header, separated from the call line. */
 export class GoalResult implements Component {
 	private goal: Goal;
-	private body: string;
 	private theme: Theme;
 
-	constructor(goal: Goal, body: string, theme: Theme) {
+	constructor(goal: Goal, theme: Theme) {
 		this.goal = goal;
-		this.body = body;
 		this.theme = theme;
 	}
 
 	/** Update in place so the transcript can reuse this component across renders. */
-	update(goal: Goal, body: string, theme: Theme): void {
+	update(goal: Goal, theme: Theme): void {
 		this.goal = goal;
-		this.body = body;
 		this.theme = theme;
 	}
 
 	invalidate(): void {}
 
 	render(width: number): string[] {
-		// The leading blank line separates the rail from the call header, matching
+		// The leading blank line separates the header from the call line, matching
 		// the built-ins' header/output gap.
-		return ["", ...goalRailLines(this.goal, this.body, this.theme, Math.max(1, width))];
+		return ["", truncateToWidth(goalHeader(this.goal, this.theme), Math.max(1, width), "…")];
 	}
 }

package/extensions/job/README.md

@@ -5,12 +5,20 @@ the background and manage them without blocking the turn. A job starts
 immediately and keeps running across tool calls; poll it, tail its output, wait
 for it, or kill it.
 
+<img src="../../assets/job.png" alt="The /jobs screen: a summary line, the job rows with status glyphs and elapsed times, and the focused job's command, cwd, and last output line" width="100%">
+
 ```
 pi --extension ./extensions/job    # load just this extension
 pi -e .                            # load the whole @gavin-hu/my-pi-agent package
 pi install ./                      # install the package
 ```
 
+## Tool rendering
+
+How the `job` call and its result look in the transcript — the call line as a headline and the body indented under it:
+
+<img src="../../assets/tools/job.png" alt="The job tool's result: the call line and an indented body with a finished and a failed job row, each with its status glyph and elapsed time" width="100%">
+
 ## What it does
 
 - Registers one model-callable tool, `job`, with actions `start`, `list`,
@@ -81,7 +89,7 @@ JobDetails {
 ### Transcript
 
 The call line names the action and its target. The result is themed and reuses
-the slot's component: `list` draws the same row rail as `/jobs`, `logs` draws a
+the slot's component: `list` draws the same rows as `/jobs`, `logs` draws a
 blank line and the sanitized tail, and a single-job action draws one outcome
 line. A `kill` that sent a signal appends it (`· SIGTERM sent`) instead of
 showing the job's pre-kill running state, a `start` badges `detached` and
@@ -89,7 +97,6 @@ showing the job's pre-kill running state, a `start` badges `detached` and
 
 ```
 job list
-
   ▸ j1  tests                            3.2s
   ✗ j2  build                            0.4s
 ```
@@ -199,8 +206,8 @@ rewritten.
 | Execution mode | `sequential` — actions share the in-memory job table. |
 | Annotations | `readOnlyHint: false`, `destructiveHint: true`, `idempotentHint: false`, `openWorldHint: true` — plan mode blocks it. |
 | `outputSchema` / `structuredContent` | None. Results return `JobDetails` in tool-result `details` only. |
-| State storage | One durable registry file per session, `~/.pi/agent/jobs/<projectKey>/registry-<sessionHash>.json` (keyed by the session cwd, so entering a worktree does not move it), merged from every session file on load; a dead session's records are adopted and a legacy shared `registry.json` is migrated once. Ids are reserved with an atomic `O_EXCL` `<id>.lock` before `start`, and a POSIX job's exit code is written to a per-job `.status` file. Tool results carry `JobDetails`; unreported completions arrive as hidden `job-context` messages at `before_agent_start`. |
-| Lifecycle | `session_start` loads and reconciles the registry and arms `onFinish` and `onComplete`; `session_shutdown` kills session-owned jobs and clears both status chips. `session_tree` repaints; `agent_start`/`agent_settled` track busy; `context` prunes stale `job-context` messages. |
+| State storage | One durable registry file per session, `~/.pi/agent/jobs/<projectKey>/registry-<sessionHash>.json` (keyed by the session cwd, so entering a worktree does not move it), merged from every session file on load; a dead session's records are adopted and a legacy shared `registry.json` is migrated once. Ids are reserved with an atomic `O_EXCL` `<id>.lock` before `start`, and a POSIX job's exit code is written to a per-job `.status` file. Tool results carry `JobDetails`; unreported completions arrive as a shared transcript notice (`my-pi-agent/notice`) at `before_agent_start`. |
+| Lifecycle | `session_start` loads and reconciles the registry and arms `onFinish` and `onComplete`; `session_shutdown` kills session-owned jobs and clears both status chips. `session_tree` repaints; `agent_start`/`agent_settled` track busy; `context` prunes stale notices of its own source. |
 | Event bus | Each job that reaches a terminal state is published on `my-pi-agent/job-finished` (`lib/events.ts`) with its id, label, status, exit code, and signal, from the one `settle` path every transition goes through. bytefly's notify capability subscribes there instead of importing this extension. |
 
 ## Design notes
@@ -248,11 +255,11 @@ rewritten.
   settles it (recovering an exit code from the status file, else `unknown`)
   when the pid disappears.
 - **Notify by default, wake opt-in.** A failed job raises one `ctx.ui.notify`
-  (a clean exit is left to the list and chips). Finished jobs are also injected
-  as a hidden `job-context` message at the next `before_agent_start`. A
-  `wake: true` job (or `wakeOnFinish`) additionally triggers one turn when the
-  agent is idle; auto-wake is not the default because it easily loops and burns
-  tokens.
+  (a clean exit is left to the list and chips). Finished jobs are also posted
+  as a shared transcript notice — model-facing text plus the notice block — at the
+  next `before_agent_start`. A `wake: true` job (or `wakeOnFinish`) additionally
+  triggers one turn when the agent is idle; auto-wake is not the default because
+  it easily loops and burns tokens.
 - **Width-1 glyphs and cached latest line.** The running chip is `▸ N` and the
   failure chip `✗ N`, each a two-token badge under its own status key, so the
   status bar compacts each independently (`▸N` / `✗N`) and an unreported
@@ -264,8 +271,10 @@ rewritten.
   spawn/liveness/kill/clock functions, so the whole suite runs without
   launching a process.
 - **The transcript reuses the `/jobs` grammar.** `job list` renders the same
-  `jobRow` rail as the screen (running first, capped, `… N more`), `job logs`
-  draws a themed tail with a `… N earlier lines` note, and single-job actions
+  `jobRow` rows as the screen (running first, capped, `… N more`), minus the
+  selection-marker column (`listRow`'s `marker: false`), which only the
+  interactive screen needs; `job logs` draws a themed tail with a `… N earlier
+  lines` note, and single-job actions
   draw one `formatJobOutcomeLine` (plus a signal note on `kill` and
   `detached`/`wake` badges on `start`). A capped collapsed result ends with the
   `app.tools.expand` hint, and an expanded list shows every job. The renderers
@@ -289,10 +298,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` rows, 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. |