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

package/extensions/web-access/search/tool.ts

@@ -69,8 +69,8 @@ export function registerSearchTool(pi: ExtensionAPI, deps: SearchDeps = {}): voi
 		renderCall(args, theme, context) {
 			const { query, maxResults } = args as WebSearchArgs;
 			const text = reuseText(context?.lastComponent);
-			let line = theme.fg("toolTitle", theme.bold(`${TOOL_NAME} `)) + paint(theme, "accent", oneLine(query ?? ""));
-			if (maxResults) line += paint(theme, "faint", ` (${maxResults} results)`);
+			let line = theme.fg("toolTitle", theme.bold(`${TOOL_NAME} `)) + paint(theme, "label", oneLine(query ?? ""));
+			if (maxResults) line += paint(theme, "faint", ` (max ${maxResults})`);
 			text.setText(line);
 			return text;
 		},
@@ -96,7 +96,7 @@ export function registerSearchTool(pi: ExtensionAPI, deps: SearchDeps = {}): voi
 				paint(theme, "faint", `via ${details.provider}${SEPARATORS.item}${count} result${count === 1 ? "" : "s"}`),
 			];
 			if (details.answer)
-				lines.push(`${paint(theme, "faint", "answer")} ${paint(theme, "meta", oneLine(details.answer, 160))}`);
+				lines.push(`${paint(theme, "faint", "Answer:")} ${paint(theme, "meta", oneLine(details.answer, 160))}`);
 
 			const shown = options.expanded ? details.results : details.results.slice(0, 5);
 			const indent = paint(theme, "faint", "   ");

package/extensions/wechat/README.md

@@ -11,6 +11,12 @@ pi -e .                              # load the whole @gavin-hu/my-pi-agent pack
 pi install ./                        # install the package
 ```
 
+## Tool rendering
+
+How the `send_wechat` call and its result look in the transcript — the call line as a headline and the body indented under it:
+
+<img src="../../assets/tools/send_wechat.png" alt="The send_wechat tool's call and result: the call line and an indented body with the message text and the sent confirmation" width="100%">
+
 ## What it does
 
 - **Inbound** — a long-poll loop receives WeChat text, images, and files and

package/extensions/worktree/README.md

@@ -14,6 +14,12 @@ pi install ./                          # install the package
 pi -e . --worktree feature-auth        # load the package and enter a worktree at startup
 ```
 
+## Tool rendering
+
+How the `list_worktrees` call and its result look in the transcript — the call line as a headline and the body indented under it:
+
+<img src="../../assets/tools/list_worktrees.png" alt="The list_worktrees tool's call and result, drawn by the generic fallback" width="100%">
+
 ## What it does
 
 - `enter_worktree` creates `<repo>/.pi/worktrees/<name>` on branch

package/lib/README.md

@@ -20,11 +20,12 @@ belongs in that extension instead — see `extensions/web-access/http.ts` and
 | [`env.ts`](./env.ts) | Env-var contracts shared across extensions: the worktree environment (`ENV_ROOT`, `worktreeRoot`, `resolveEffectiveCwd`) used by worktree, file-browse, job, and rewind, plus `isExtensionEnabled` / `ENV_DISABLED_EXTENSIONS` for the package-wide disable list. |
 | [`escape.ts`](./escape.ts) | `escapeHtml`: the single HTML text/attribute escape used by the browse page renderers and the Markdown and syntax highlighters. |
 | [`events.ts`](./events.ts) | Inter-extension `pi.events` channels and payloads: `JOB_FINISHED_CHANNEL` and `JobFinishedEvent`, published by `job` and consumed by bytefly's notify capability. |
+| [`notice.ts`](./notice.ts) | The shared transcript notice: `NOTICE_TYPE`, the `NoticeDetails` / `NoticeItem` shape, `noticeMessage` (the `display: true` message both send paths accept), `isNotice`, and `pruneStaleNotices` — posted by `job` and `watch`, rendered by bytefly. |
 | [`format.ts`](./format.ts) | Pure text/number formatting shared by renderers: `formatTokens`, `stripControlChars`, `sanitize`, `sanitizeLine` — the boundary for untrusted, single-line text — and `shortenPath`. |
 | [`interaction.ts`](./interaction.ts) | Turn-affinity prompt contract: the channel a remote adapter installs on `ctx.ui` under a string key, the `InteractionChannel` interface (`request` / `post` / `postFile`), and `remoteChannel` / `isRemoteTurn` / `supportsCustomUI` / `askHuman` (with an optional file/text preface) plus the shared “Other” label. |
 | [`git/`](./git/) | Shared git plumbing. [`git/runner.ts`](./git/runner.ts) is the `RunGit` seam (`createExecRunner` with timeout/env handling, `runGitOrThrow`, `GitError`); [`git/read.ts`](./git/read.ts) holds the read helpers (`repoRoot`, `repoRootFor`, `gitDir`, `revParse`, `hasCommits`, `currentBranch`); [`git/index.ts`](./git/index.ts) is the barrel. |
 | [`highlight.ts`](./highlight.ts) | First-party, escape-first syntax tokenizer (`detectLanguage`, `fenceLanguage`, `highlightLines`, `HighlightLanguage`, `TokenClass`) for js/ts, json, css, html, shell, python, java, yaml, and sql; shared by `file-browse` and plan's code blocks. |
-| [`tui/`](./tui/) | The Bytefly terminal design system shared by every interactive surface: [`tui/tokens.ts`](./tui/tokens.ts) (semantic role -> theme color, `paint`), [`tui/glyphs.ts`](./tui/glyphs.ts) (`GLYPHS`, `SEPARATORS`, `STATUS_KEYS`, `EXPAND_KEYBINDING` with `expandKey` / `expandHint`, `BODY_INDENT` / `GLYPH_GAP` — the vocabulary both sides of a status must agree on), [`tui/chrome.ts`](./tui/chrome.ts) (`screenHint`, `dockListFrame` (the docked-list frame), `viewportRows`, `FULL_SCREEN_OVERLAY`, `reuseText`, `editorTheme`), [`tui/rules.ts`](./tui/rules.ts) (`plainRule` / `titleRule` / `centeredRule`), [`tui/rows.ts`](./tui/rows.ts) (`listRow`, `checkbox`, `chip`, `keyValueRow`, `emptyState`), [`tui/columns.ts`](./tui/columns.ts) (`splitRow`, `fitCells`, `flowCells`, `padTo`, `clip`), [`tui/gauge.ts`](./tui/gauge.ts) (`computeGauge`, `gaugeRole`, `gaugeBar`), [`tui/line-pane.ts`](./tui/line-pane.ts) (`LinePane`, the scrollable log/match pane), [`tui/status-controller.ts`](./tui/status-controller.ts) (`createStatusController`, the footer chips `job` and `watch` share), and [`tui/cursor.ts`](./tui/cursor.ts) (scroll and navigation: `fitRows`, `keepVisible`, `clampScroll`, `navIntent`, `navigateList`, `navigateScroll`, `wheelDelta`, `scrollList`, `isCloseKey`, `selectionMarker`, `formatRange`, and the `ListCursor` (by index) and `IdCursor` (by stable id) state). |
+| [`tui/`](./tui/) | The Bytefly terminal design system shared by every interactive surface: [`tui/tokens.ts`](./tui/tokens.ts) (semantic role -> theme color, `paint`), [`tui/glyphs.ts`](./tui/glyphs.ts) (`GLYPHS`, `SEPARATORS`, `STATUS_KEYS`, `EXPAND_KEYBINDING` with `expandKey` / `expandHint`, `GLYPH_GAP` — the vocabulary both sides of a status must agree on), [`tui/chrome.ts`](./tui/chrome.ts) (`screenHint`, `dockListFrame` (the docked-list frame), `viewportRows`, `FULL_SCREEN_OVERLAY`, `reuseText`, `editorTheme`), [`tui/rules.ts`](./tui/rules.ts) (the rule glyph `RULE_GLYPH`, and `plainRule` / `titleRule` / `centeredRule`), [`tui/indent.ts`](./tui/indent.ts) (the transcript block indent: `BODY_INDENT`, an optional rail prefix that a wrapped call line is kept out of, and `bodyLines` / `indentBlockLines` / `indentedLines`), [`tui/rows.ts`](./tui/rows.ts) (`listRow`, `checkbox`, `chip`, `keyValueRow`, `emptyState`), [`tui/columns.ts`](./tui/columns.ts) (`splitRow`, `fitCells`, `flowCells`, `padTo`, `clip`), [`tui/gauge.ts`](./tui/gauge.ts) (`computeGauge`, `gaugeRole`, `gaugeBar`), [`tui/line-pane.ts`](./tui/line-pane.ts) (`LinePane`, the scrollable log/match pane), [`tui/status-controller.ts`](./tui/status-controller.ts) (`createStatusController`, the footer chips `job` and `watch` share), and [`tui/cursor.ts`](./tui/cursor.ts) (scroll and navigation: `fitRows`, `keepVisible`, `clampScroll`, `navIntent`, `navigateList`, `navigateScroll`, `wheelDelta`, `scrollList`, `isCloseKey`, `selectionMarker`, `formatRange`, and the `ListCursor` (by index) and `IdCursor` (by stable id) state). |
 | [`path.ts`](./path.ts) | `isInside` (string containment) plus `realPathOfNearest` / `isInsideReal` (symlink-aware): the containment predicates the file-browse, worktree, and doc guards share. |
 | [`pi-invocation.ts`](./pi-invocation.ts) | `getPiInvocation`: how to launch a nested `pi` process, shared by `subagent` and bytefly's doctor surface. |
 | [`policy.ts`](./policy.ts) | `createReadOnlyPolicy`: default-deny tool classification from `readOnlyHint` + explicit allow/deny. |

package/lib/format.ts

@@ -17,6 +17,23 @@ export function formatTokens(count: number): string {
 	return `${Math.round(count / 1000000)}M`;
 }
 
+/**
+ * An integer grouped with thousands separators (`999`, `8,000`, `42,478`).
+ * Hand-rolled rather than `toLocaleString`, so a count is identical under any
+ * locale and ICU build.
+ */
+export function formatCount(count: number): string {
+	if (!Number.isFinite(count)) return "0";
+	const sign = count < 0 ? "-" : "";
+	const digits = Math.abs(Math.trunc(count)).toString();
+	let out = "";
+	for (let i = 0; i < digits.length; i++) {
+		if (i > 0 && (digits.length - i) % 3 === 0) out += ",";
+		out += digits[i];
+	}
+	return sign + out;
+}
+
 /**
  * Replace terminal control characters (including ESC and the C1 block) with
  * spaces, keeping `\n` and `\t` for callers that render multi-line text.

package/lib/notice.ts

@@ -0,0 +1,87 @@
+/**
+ * The shared transcript notice: one custom-message type that any extension in
+ * the package can post, plus the model-facing content and the renderer-facing
+ * details it carries.
+ *
+ * Pi renders a custom message only when it was sent with `display: true`, and
+ * it resolves a renderer by the exact `customType` — there is no wildcard — so
+ * the type and the shape behind it are one contract the producing extension and
+ * bytefly's renderer must agree on. Keep both here, never re-typed on either
+ * side.
+ *
+ * `content` is what the model reads; `details` is never sent to the model and
+ * is the renderer's whole input, so a producer states the facts once and the
+ * renderer decides the look. Value-only: constants and pure functions, no
+ * state.
+ */
+
+import type { AgentMessage } from "@earendil-works/pi-agent-core";
+
+/** The custom-message type every transcript notice is sent under. */
+export const NOTICE_TYPE = "my-pi-agent/notice";
+
+/** How a notice, or one of its rows, reads at a glance. */
+export type NoticeSeverity = "info" | "ok" | "warn" | "bad";
+
+/** One row under a notice's headline. */
+export interface NoticeItem {
+	/** The row's text, e.g. `j1 build`. Sanitized by the renderer. */
+	label: string;
+	/** Short trailing detail, e.g. `exit 1`. Sanitized by the renderer. */
+	detail?: string;
+	/** The row's severity; falls back to the notice's own. */
+	severity?: NoticeSeverity;
+}
+
+/** Everything the renderer draws, and nothing the model sees. */
+export interface NoticeDetails {
+	/** Who raised it, e.g. `job` or `watch`. */
+	source: string;
+	/** One-line headline. */
+	title: string;
+	/** The headline's severity; a row may override it. */
+	severity?: NoticeSeverity;
+	/** Rows under the headline, in order. */
+	items?: readonly NoticeItem[];
+}
+
+export interface NoticeInput {
+	/** Model-facing text; the notice is also shown when non-empty. */
+	content: string;
+	/** Renderer-facing structure. */
+	details: NoticeDetails;
+}
+
+/** The message shape both send paths accept (`pi.sendMessage`, `before_agent_start`). */
+export interface NoticeMessage {
+	customType: string;
+	content: string;
+	display: true;
+	details: NoticeDetails;
+}
+
+/** A conversation message narrowed to a notice. */
+export type NoticeEntry = AgentMessage & { customType: string; details?: NoticeDetails };
+
+/** Build a visible notice message: shared type, `display: true`, the given content and details. */
+export function noticeMessage(input: NoticeInput): NoticeMessage {
+	return { customType: NOTICE_TYPE, content: input.content, display: true, details: input.details };
+}
+
+/** Whether a conversation message is a notice. */
+export function isNotice(message: AgentMessage): message is NoticeEntry {
+	return message.role === "custom" && (message as { customType?: string }).customType === NOTICE_TYPE;
+}
+
+/**
+ * Keep only the newest notice of `source` in a transcript, so stale injected
+ * context does not accumulate. Notices of other sources and every non-notice
+ * are left alone. Returns `undefined` when nothing is stale, so a `context`
+ * handler can leave the messages untouched.
+ */
+export function pruneStaleNotices(messages: readonly AgentMessage[], source: string): AgentMessage[] | undefined {
+	const ofSource = messages.filter((message) => isNotice(message) && message.details?.source === source);
+	if (ofSource.length <= 1) return undefined;
+	const keep = ofSource[ofSource.length - 1];
+	return messages.filter((message) => !(isNotice(message) && message.details?.source === source && message !== keep));
+}

package/lib/tui/chrome.ts

@@ -19,6 +19,7 @@
 import type { Theme, ThemeColor } from "@earendil-works/pi-coding-agent";
 import { Text, truncateToWidth, visibleWidth, type EditorTheme, type OverlayOptions } from "@earendil-works/pi-tui";
 import { SEPARATORS } from "./glyphs.ts";
+import { BODY_INDENT } from "./indent.ts";
 
 /**
  * `ctx.ui.custom` options that give a screen the whole terminal.
@@ -65,23 +66,26 @@ export function viewportRows(source: ViewportRowsSource | undefined, options: Vi
 export type ScreenHint = string | { text: string; color?: ThemeColor };
 
 /**
- * A two-space-indented key-hint footer, joined with ` · `. Plain hints are dim;
+ * A key-hint footer indented by `indent` columns (default `BODY_INDENT`, which
+ * hangs it under a screen's title rule), joined with ` · `. Plain hints are dim;
  * an object hint uses its color (dim when omitted). Hints are added while they
  * fit, so a narrow terminal drops whole keys instead of truncating one in half.
  * The first hint is always kept; the result is clipped to `width`.
  */
-export function screenHint(theme: Theme, width: number, hints: ScreenHint[]): string {
+export function screenHint(theme: Theme, width: number, hints: ScreenHint[], indent = BODY_INDENT): string {
 	const target = Math.max(1, width);
+	// Keep a column for the hint itself, however deep the caller indents.
+	const lead = " ".repeat(Math.max(0, Math.min(Math.floor(indent), target - 1)));
 	const render = (hint: ScreenHint): string =>
 		typeof hint === "string" ? theme.fg("dim", hint) : theme.fg(hint.color ?? "dim", hint.text);
 	const separator = theme.fg("dim", SEPARATORS.item);
 	const kept: ScreenHint[] = [];
 	for (const hint of hints) {
 		const candidate = [...kept, hint].map(render).join(separator);
-		if (kept.length > 0 && visibleWidth(`  ${candidate}`) > target) break;
+		if (kept.length > 0 && visibleWidth(`${lead}${candidate}`) > target) break;
 		kept.push(hint);
 	}
-	return truncateToWidth(`  ${kept.map(render).join(separator)}`, target);
+	return truncateToWidth(`${lead}${kept.map(render).join(separator)}`, target);
 }
 
 /**

package/lib/tui/cursor.ts

@@ -19,6 +19,7 @@
 import type { Theme } from "@earendil-works/pi-coding-agent";
 import { Key, matchesKey, truncateToWidth, type TuiMouseEvent, type TuiMouseEventResult } from "@earendil-works/pi-tui";
 import { viewportRows, type ViewportRowsSource } from "./chrome.ts";
+import { GLYPHS } from "./glyphs.ts";
 
 /**
  * Rows that fit for a list of `itemCount`, reserving one extra line when the
@@ -75,7 +76,7 @@ export function wheelDelta(event: TuiMouseEvent): number | undefined {
 
 /** The `❯ ` selection marker (accent) or a same-width blank. */
 export function selectionMarker(theme: Theme, selected: boolean): string {
-	return selected ? theme.fg("accent", "❯ ") : "  ";
+	return selected ? theme.fg("accent", `${GLYPHS.prompt} `) : "  ";
 }
 
 /**

package/lib/tui/glyphs.ts

@@ -10,14 +10,14 @@
 import { keyText, type Theme } from "@earendil-works/pi-coding-agent";
 
 /**
- * Leading glyphs for status chips and footer segments.
+ * Leading glyphs for status chips, footer segments, and transcript rails.
  *
- * Every glyph is a single terminal column in every profile: narrow or neutral
- * `East_Asian_Width`, never ambiguous, wide, or fullwidth, and never emoji. A
- * CJK-width profile renders an ambiguous glyph two columns wide, which drifts a
- * chip, a rail, or a footer row; `visibleWidth` cannot catch that (it counts an
- * ambiguous character as one column), so `lib/ui.test.ts` checks the width class
- * directly. Add a new glyph only after checking it against `EastAsianWidth.txt`.
+ * A glyph is a single terminal column: never wide, fullwidth, or emoji, which
+ * are two columns in every profile. East-Asian *ambiguous* glyphs are allowed —
+ * a CJK-width profile draws those two columns, so one costs a column there, but
+ * the vocabulary is no longer limited to narrow/neutral characters. Add a glyph
+ * only after checking its `East_Asian_Width` against `EastAsianWidth.txt`;
+ * `lib/tui/glyphs.test.ts` bans wide, fullwidth, and emoji.
  */
 export const GLYPHS = {
 	branch: "⎇",
@@ -34,6 +34,7 @@ export const GLYPHS = {
 	gaugeFull: "▰",
 	gaugeEmpty: "▱",
 	turnRule: "╌",
+	divider: "╎",
 	check: "✓",
 	warn: "!",
 	cross: "✕",
@@ -47,18 +48,16 @@ export const GLYPHS = {
 	boxOff: "◻",
 	prev: "‹",
 	next: "›",
+	prompt: "❯",
 } as const;
 
-/** Columns before a transcript rail body glyph, shared by `goal` and `todo`. */
-export const BODY_INDENT = 2;
-
 /** Columns between a rail body glyph and its text. */
 export const GLYPH_GAP = 1;
 
 /** Padding used to join (`item`) or group (`group`) UI segments. */
 export const SEPARATORS = {
 	item: " · ",
-	group: " │ ",
+	group: ` ${GLYPHS.divider} `,
 } as const;
 
 /** `ctx.ui.setStatus` keys; one per extension that publishes a chip. */

package/lib/tui/indent.ts

@@ -0,0 +1,166 @@
+/**
+ * The transcript indent: how a non-prose block sits under its headline.
+ *
+ * A tool block, a shared notice, and a subagent's quoted output all hang from one
+ * left edge. A block may lead with a headline (a tool's own call line) at the
+ * outer indent; the body sits `BODY_INDENT` further in, directly under it with no
+ * separator line, which is what keeps a tool block compact. The body's first
+ * indent column may instead carry a rail glyph, passed in pre-painted by the
+ * caller so this module stays value-only.
+ *
+ * Value-only: pure functions and constants, no theme.
+ */
+
+import { type Component, stripTerminalSequences, truncateToWidth, visibleWidth } from "@earendil-works/pi-tui";
+
+/** Columns the body sits in beyond a block's outer indent. */
+export const BODY_INDENT = 2;
+
+/** How an indented block is placed. */
+export interface IndentOptions {
+	/** Columns the body is indented; a headline sits `BODY_INDENT` to its left. */
+	indent?: number;
+	/**
+	 * A pre-painted, one-column rail glyph for the body's first indent column; the
+	 * rest of the indent stays spaces. Ignored below `BODY_INDENT`, where there is
+	 * no column to spare. Default: no rail.
+	 */
+	rail?: string;
+	/**
+	 * Start the rail after the headline's continuation: keep the leading run of
+	 * non-blank body lines plain-indented, up to the first blank line. Set when the
+	 * headline degenerated to the bare subject name (a tool's call line whose path
+	 * moved onto the body), so the rail begins with the result instead of the
+	 * wrapped call. Ignored without a rail. Default false.
+	 */
+	railAfterCall?: boolean;
+	/** Drop leading lines with no visible content. Default false. */
+	trimLeading?: boolean;
+	/** Drop trailing lines with no visible content. Default true. */
+	trimTrailing?: boolean;
+	/**
+	 * Lead with the first non-blank line as the block's headline, at
+	 * `indent - BODY_INDENT`, with the body immediately after it. Default false.
+	 */
+	headline?: boolean;
+	/**
+	 * Suffix appended when a body line is clipped. Default empty: a body is clipped
+	 * silently. The headline always clips with `…`. A notice sets `…` so a
+	 * truncated row reads as truncated.
+	 */
+	bodyClip?: string;
+}
+
+/**
+ * A line with no visible text. Tested after stripping terminal sequences, so a
+ * line that is only spaces carrying a background (a `Box`'s own padding) counts
+ * as blank rather than as content.
+ */
+function isBlank(line: string): boolean {
+	return stripTerminalSequences(line).trim().length === 0;
+}
+
+/** An image-protocol line must pass through unprefixed, or the sequence corrupts. */
+const IMAGE_LINE = /^\u001b(?:P|_G|\]1337;)/;
+
+/** The body indent, clamped so the prefix always leaves at least one column. */
+function clampIndent(indent: number, width: number): number {
+	return Math.max(0, Math.min(Math.floor(indent), Math.max(0, width - 1)));
+}
+
+/**
+ * The body prefix: the rail glyph in the indent's first body column, or plain
+ * spaces. The glyph must be one visible column, so the prefix is exactly `indent`
+ * columns wide; the gap after it is the remaining `BODY_INDENT - 1`.
+ */
+function bodyPrefix(indent: number, rail: string | undefined): string {
+	if (!rail || indent < BODY_INDENT) return " ".repeat(indent);
+	const base = Math.max(0, indent - BODY_INDENT);
+	return `${" ".repeat(base)}${rail}${" ".repeat(indent - base - 1)}`;
+}
+
+/**
+ * Indent each line of an already-rendered block by `indent` columns, clipping
+ * each to `width`. The block should be built at `width - indent` so nothing is
+ * lost to the prefix; the clip is only a safety net. A line carrying an image
+ * protocol sequence is passed through untouched, and trailing lines with no
+ * visible content are dropped (by default). When `headline` is set, the first
+ * non-blank line leads at `indent - BODY_INDENT` and the body follows directly —
+ * no separator line — and its own leading blanks are dropped so a tool's spacing
+ * never leaves a gap under the headline. With `rail` set, the body's first indent
+ * column carries the glyph instead of a space; `railAfterCall` keeps the call's
+ * continuation lines plain, so the rail starts with the result.
+ */
+export function indentBlockLines(body: readonly string[], width: number, options: IndentOptions = {}): string[] {
+	const w = Math.max(1, width);
+	const indent = clampIndent(options.indent ?? 0, w);
+	const prefix = bodyPrefix(indent, options.rail);
+	const plainPrefix = " ".repeat(indent);
+
+	// The headline is the first line with something to say; it leads at the base.
+	let headline: string | undefined;
+	let rest: readonly string[] = body;
+	if (options.headline) {
+		const index = body.findIndex((line) => !IMAGE_LINE.test(line) && !isBlank(line));
+		if (index >= 0) {
+			headline = body[index];
+			rest = body.slice(index + 1);
+		}
+	}
+
+	// A call whose subject moved onto the body keeps those lines unrailed, so the
+	// rail starts with the result rather than under a bare tool name.
+	let railStart = 0;
+	if (options.rail && options.railAfterCall) {
+		while (railStart < rest.length && !isBlank(rest[railStart] ?? "")) railStart++;
+	}
+
+	const lines: string[] = [];
+	const blank: boolean[] = [];
+	for (const [index, line] of rest.entries()) {
+		if (IMAGE_LINE.test(line)) {
+			lines.push(line);
+			blank.push(false);
+			continue;
+		}
+		lines.push(truncateToWidth(`${index < railStart ? plainPrefix : prefix}${line}`, w, options.bodyClip ?? ""));
+		blank.push(isBlank(line));
+	}
+	if (options.trimLeading) {
+		while (blank.length > 0 && blank[0]) {
+			lines.shift();
+			blank.shift();
+		}
+	}
+	if (options.trimTrailing !== false) {
+		while (blank.length > 0 && blank[blank.length - 1]) {
+			lines.pop();
+			blank.pop();
+		}
+	}
+	if (headline !== undefined) {
+		const base = Math.max(0, indent - BODY_INDENT);
+		lines.unshift(truncateToWidth(`${" ".repeat(base)}${headline}`, w, "…"));
+	}
+	return lines;
+}
+
+/**
+ * Render `inner` at the width the indent leaves, so nothing is lost to the
+ * prefix. An absent `inner` renders nothing, so a tool with no output adds no
+ * blank block. The lines are not indented yet; a caller that has to inspect the
+ * block before placing it passes them to `indentBlockLines`.
+ */
+export function bodyLines(inner: Component | undefined, width: number, indent = 0): string[] {
+	if (!inner) return [];
+	const w = Math.max(1, width);
+	const prefixWidth = visibleWidth(bodyPrefix(clampIndent(indent, w), undefined));
+	return inner.render(Math.max(1, w - prefixWidth));
+}
+
+/** Render `inner` at the width the indent leaves, then indent it. */
+export function indentedLines(inner: Component | undefined, width: number, options: IndentOptions = {}): string[] {
+	const w = Math.max(1, width);
+	const indent = clampIndent(options.indent ?? 0, w);
+	return indentBlockLines(bodyLines(inner, w, indent), w, { ...options, indent });
+}

package/lib/tui/index.ts

@@ -7,7 +7,8 @@
  * `chrome.ts` (screen frame, hints, viewport, overlay), `cursor.ts` (list
  * scroll and navigation), `columns.ts` (width math), `rules.ts` (the rule
  * grammar), `rows.ts` (list rows, checkboxes, chips, empty states), `gauge.ts`
- * (the context gauge), and `line-pane.ts` (the scrollable log/match pane).
+ * (the context gauge), `indent.ts` (the transcript block indent), and
+ * `line-pane.ts` (the scrollable log/match pane).
  *
  * Value-only, like every `lib/` module: pure functions, constants, and classes,
  * with no module-level state.
@@ -19,6 +20,7 @@ export * from "./cursor.ts";
 export * from "./gauge.ts";
 export * from "./glyphs.ts";
 export * from "./line-pane.ts";
+export * from "./indent.ts";
 export * from "./rows.ts";
 export * from "./rules.ts";
 export * from "./status-controller.ts";

package/lib/tui/rows.ts

@@ -15,13 +15,20 @@
 import type { Theme } from "@earendil-works/pi-coding-agent";
 import { clip, padTo, splitRow } from "./columns.ts";
 import { selectionMarker } from "./cursor.ts";
-import { BODY_INDENT, GLYPHS } from "./glyphs.ts";
+import { GLYPHS } from "./glyphs.ts";
+import { BODY_INDENT } from "./indent.ts";
 import { paint, type TuiRole } from "./tokens.ts";
 
 /** One selectable list row. */
 export interface ListRow {
 	/** Draw the `❯` marker in the accent role. A blank marker column is reserved either way. */
 	selected?: boolean;
+	/**
+	 * Reserve the `❯ ` marker column. Default true, so a column of rows stays
+	 * aligned; a non-interactive row (a transcript result) sets false to drop the
+	 * columns it can never use.
+	 */
+	marker?: boolean;
 	/**
 	 * A pre-themed cell between the marker and the glyph, e.g. a `checkbox`.
 	 * Reserved by the caller (pass a blank when the row has none) so a column of
@@ -45,13 +52,14 @@ export interface ListRow {
  * One list row: an optional indent, the selection marker, an optional glyph,
  * the label, and right-aligned trailing meta.
  *
- * The marker column is always reserved, so selected and unselected rows align.
- * The trailing meta is the anchor when the terminal is narrow (see
- * `splitRow`), so a value at the end of the row survives.
+ * The marker column is reserved by default, so selected and unselected rows
+ * align; `marker: false` drops it for a non-interactive row. The trailing meta
+ * is the anchor when the terminal is narrow (see `splitRow`), so a value at the
+ * end of the row survives.
  */
 export function listRow(theme: Theme, width: number, row: ListRow): string {
 	const indent = " ".repeat(Math.max(0, Math.floor(row.indent ?? 0)));
-	const marker = selectionMarker(theme, row.selected === true);
+	const marker = row.marker === false ? "" : selectionMarker(theme, row.selected === true);
 	const leading = row.leading ? `${row.leading} ` : "";
 	const glyph = row.glyph ? `${paint(theme, row.glyphRole ?? "info", row.glyph)} ` : "";
 	const label = paint(theme, row.labelRole ?? "label", row.label);
@@ -59,6 +67,32 @@ export function listRow(theme: Theme, width: number, row: ListRow): string {
 	return splitRow(`${indent}${marker}${leading}${glyph}${label}`, trailing, width);
 }
 
+/** A status row (a job, a watcher): the marker, a status glyph, a label, and right-aligned meta. */
+export interface StatusRow {
+	selected?: boolean;
+	/** Reserve the marker column. Default true. */
+	marker?: boolean;
+	glyph: string;
+	glyphRole: TuiRole;
+	label: string;
+	trailing: string;
+	/** Role for the trailing meta. Default `faint`. */
+	trailingRole?: TuiRole;
+}
+
+/** One row of a live status list, on the shared `listRow` grammar. */
+export function statusRow(theme: Theme, width: number, row: StatusRow): string {
+	return listRow(theme, width, {
+		selected: row.selected === true,
+		marker: row.marker !== false,
+		glyph: row.glyph,
+		glyphRole: row.glyphRole,
+		label: row.label,
+		trailing: row.trailing,
+		trailingRole: row.trailingRole ?? "faint",
+	});
+}
+
 /** The on/off checkbox glyph, in one role per state. */
 export function checkbox(theme: Theme, on: boolean, roles: { on?: TuiRole; off?: TuiRole } = {}): string {
 	return on ? paint(theme, roles.on ?? "ok", GLYPHS.boxOn) : paint(theme, roles.off ?? "faint", GLYPHS.boxOff);

package/lib/tui/rules.ts

@@ -33,6 +33,12 @@ export interface CenteredRuleStyle extends RuleStyle {
 	pad?: number;
 }
 
+/**
+ * The solid rule fill: the glyph a divider repeats. One constant names it, so
+ * the header rule, a panel title, and the user-message nameplate cannot drift.
+ */
+export const RULE_GLYPH = "─";
+
 /** A usable origin: terminal arithmetic starts from one column, never zero. */
 function widthOf(width: number): number {
 	return Math.max(1, Math.floor(width));
@@ -41,7 +47,7 @@ function widthOf(width: number): number {
 /** A full-width divider in one color. */
 export function plainRule(theme: Theme, width: number, style: RuleStyle = {}): string {
 	const w = widthOf(width);
-	return paint(theme, style.fillRole ?? "rule", (style.glyph ?? "─").repeat(w));
+	return paint(theme, style.fillRole ?? "rule", (style.glyph ?? RULE_GLYPH).repeat(w));
 }
 
 /** The label-first shape a screen or panel title uses. */
@@ -63,14 +69,14 @@ function labelRule(
 	if (!text) return plainRule(theme, w, style);
 	const labelWidth = visibleWidth(text);
 	if (labelWidth + 1 >= w) return plainRule(theme, w, style);
-	const fill = (style.glyph ?? "─").repeat(w - labelWidth - 1);
+	const fill = (style.glyph ?? RULE_GLYPH).repeat(w - labelWidth - 1);
 	return paint(theme, style.labelRole ?? labelRole, text) + " " + paint(theme, style.fillRole ?? fillRole, fill);
 }
 
 /** A centered rule: fill, label, and the rest of the fill. */
 export function centeredRule(theme: Theme, width: number, label: string, style: CenteredRuleStyle = {}): string {
 	const w = widthOf(width);
-	const glyph = style.glyph ?? "─";
+	const glyph = style.glyph ?? RULE_GLYPH;
 	const fillRole = style.fillRole ?? "ruleStrong";
 	if (!label.trim()) return paint(theme, fillRole, glyph.repeat(w));
 	const pad = " ".repeat(Math.max(0, Math.floor(style.pad ?? 1)));

package/lib/tui/tokens.ts

@@ -56,3 +56,17 @@ export const TUI_TOKENS: Readonly<Record<TuiRole, ThemeColor>> = {
 export function paint(theme: Theme, role: TuiRole, text: string): string {
 	return theme.fg(TUI_TOKENS[role], text);
 }
+
+/**
+ * The opening sequence for a role, without its reset. A frame that must repaint
+ * a run in place — mid-line, where the surrounding text already carries the
+ * closing reset — opens with this instead of wrapping a whole string.
+ *
+ * Derived from `paint` with a sentinel, so it tracks the theme's own escape
+ * shape rather than assuming one.
+ */
+export function paintPrefix(theme: Theme, role: TuiRole): string {
+	const marker = "\u0000";
+	const wrapped = paint(theme, role, marker);
+	return wrapped.slice(0, wrapped.indexOf(marker));
+}

package/lib/web/base.ts

@@ -8,7 +8,8 @@
 
 // Every focusable element gets the same ring; components must not re-declare
 // their own, so the keyboard affordance cannot disappear surface by surface.
-export const WEB_BASE_CSS = `*{box-sizing:border-box}
+export const WEB_BASE_CSS = `html,body{margin:0}
+*{box-sizing:border-box}
 [hidden]{display:none!important}
 a{color:var(--accent);text-decoration:none}
 a:hover{text-decoration:underline}

package/lib/web/components.ts

@@ -117,7 +117,9 @@ th[aria-sort="descending"] .bf-sort::after{content:" \\25BC";font-size:9px;color
 .bf-md .md-check{color:var(--success)}
 .bf-md table{margin:0;border-collapse:collapse;table-layout:auto;width:auto;font-size:var(--fs-sm)}
 .bf-md .md-table-wrap{overflow-x:auto;margin:0 0 1em}
-.bf-md th,.bf-md td{border:1px solid var(--border);padding:6px 10px;text-align:left;vertical-align:top}
+.bf-md th,.bf-md td{border:1px solid var(--border);padding:6px 10px;text-align:left;vertical-align:top;overflow-wrap:break-word}
+.bf-md th{white-space:nowrap}
+.bf-md th code,.bf-md td code{white-space:nowrap}
 .bf-md thead th{background:var(--surface);font-weight:var(--fw-medium)}
 .bf-md .md-left{text-align:left}
 .bf-md .md-center{text-align:center}

package/lib/web/layout.ts

@@ -11,15 +11,19 @@
  *
  * Only the shared 860px collapse lives here; the plan-specific rules stay in
  * `extensions/plan/web-page.ts`.
+ *
+ * The shell is a definite full-height column so the panes scroll inside it; the
+ * 860px breakpoint drops that back to normal page scroll for narrow screens.
  */
 
-export const WEB_LAYOUT_CSS = `.bf-app{display:flex;flex-direction:column;min-height:100vh;background:var(--canvas);color:var(--text);font:var(--fs-base)/var(--lh-normal) var(--font-ui)}
+export const WEB_LAYOUT_CSS = `.bf-app{display:flex;flex-direction:column;height:100vh;min-height:0;overflow:hidden;background:var(--canvas);color:var(--text);font:var(--fs-base)/var(--lh-normal) var(--font-ui)}
 .bf-app__header{position:sticky;top:0;z-index:2;flex:0 0 auto;background:var(--surface);border-bottom:1px solid var(--border)}
 .bf-app__body{flex:1 1 auto;min-height:0;display:grid;grid-template-columns:260px minmax(0,1fr)}
 .bf-app__sidebar{display:flex;flex-direction:column;min-width:0;min-height:0;overflow:hidden;background:var(--surface);border-right:1px solid var(--border)}
 .bf-app__main{min-width:0;min-height:0;display:flex;flex-direction:column;overflow:auto;padding:var(--space-5) var(--space-6)}
 .bf-app__footer{flex:0 0 auto;border-top:1px solid var(--border);color:var(--muted);font-size:var(--fs-sm);padding:var(--space-3) var(--space-6)}
 @media (max-width:860px){
+.bf-app{height:auto;min-height:100vh;overflow:visible}
 .bf-app__body{flex:none;grid-template-columns:1fr}
 .bf-app__sidebar{display:block;position:static;max-height:none;overflow:visible;border-right:0;border-bottom:1px solid var(--border)}
 .bf-app__main{overflow:visible}