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

package/extensions/bytefly/header/component.ts

@@ -3,16 +3,20 @@
  *
  * It draws bytefly's nameplate: a two-tone mark beside the agent identity (Pi
  * and its version) and the chrome identity (the tagline, bytefly, and its
- * version), a `─` rule, and a grouped help block. The mark is theme-colored and
- * falls back to a wordmark where half blocks do not render, the help keys are
- * resolved live from Pi's keybindings, and every line is truncated to the width
- * it is given.
+ * version), a signature rule whose accent lead sits under the mark, and a
+ * grouped help block. The mark and text are theme-colored through the shared
+ * design-system roles, the mark falls back to a wordmark where half blocks do
+ * not render, the help keys are resolved live from Pi's keybindings, and every
+ * line is truncated to the width it is given.
  */
 
 import { keyText, type Theme, VERSION } from "@earendil-works/pi-coding-agent";
 import { type Component, type TUI, truncateToWidth, visibleWidth } from "@earendil-works/pi-tui";
-import { screenHint } from "../../../lib/tui.ts";
-import { keyHintText } from "../../../lib/ui.ts";
+import { screenHint } from "../../../lib/tui/chrome.ts";
+import { keyHintText } from "../../../lib/tui/glyphs.ts";
+import { BODY_INDENT } from "../../../lib/tui/indent.ts";
+import { RULE_GLYPH } from "../../../lib/tui/rules.ts";
+import { paint } from "../../../lib/tui/tokens.ts";
 import { HEADER_CONFIG, type HelpEntry } from "./config.ts";
 
 /** The header's shape, resolved once per apply so `render` stays cheap. */
@@ -21,6 +25,8 @@ export interface HeaderView {
 	showVersion: boolean;
 	/** Whether the terminal renders half blocks; false draws the wordmark instead. */
 	halfBlocks: boolean;
+	/** Columns of left margin: Pi's output pad, so the nameplate sits on the transcript margin. */
+	pad: number;
 }
 
 /** The mark block is four columns on both rows, so the identity column aligns. */
@@ -33,9 +39,9 @@ function markBlock(line: string): string {
 
 /** The two mark lines: the half-block logo, or the wordmark where it will not render. */
 function markLines(theme: Theme, halfBlocks: boolean): [string, string] {
-	const { markColor, markAccent } = HEADER_CONFIG;
-	if (halfBlocks) return [theme.fg(markColor, "█▀█"), theme.fg(markAccent, "█▀ █")];
-	return [theme.fg(markColor, "P") + theme.fg(markAccent, "i"), ""];
+	const { markRole, markAccentRole } = HEADER_CONFIG;
+	if (halfBlocks) return [paint(theme, markRole, "█▀█"), paint(theme, markAccentRole, "█▀ █")];
+	return [paint(theme, markRole, "P") + paint(theme, markAccentRole, "i"), ""];
 }
 
 /** One help entry split into the text to print and its description. */
@@ -61,20 +67,21 @@ export class ByteflyHeader implements Component {
 		const w = Math.max(1, width);
 		const theme = this.getTheme();
 		const view = this.view();
-		const { padX, nameColor, versionColor, chromeTagline, chromeName, chromeVersion, help } = HEADER_CONFIG;
-		const pad = " ".repeat(Math.min(padX, Math.max(0, w - 1)));
+		const { nameRole, chromeRole, detailRole, chromeTagline, chromeName, chromeVersion, help } = HEADER_CONFIG;
+		const padWidth = Math.max(0, Math.min(Math.floor(view.pad), Math.max(0, w - 1)));
+		const pad = " ".repeat(padWidth);
 		const [markTop, markBottom] = markLines(theme, view.halfBlocks);
 
-		const version = view.showVersion && this.version ? theme.fg(versionColor, `v${this.version}`) : "";
+		const version = view.showVersion && this.version ? paint(theme, detailRole, `v${this.version}`) : "";
 		// The wordmark mark spells the app name, so the agent cell carries only the
 		// version there; the half-block mark does not, so the name stays beside it.
 		const agent = view.halfBlocks
 			? version
-				? `${theme.fg(nameColor, HEADER_CONFIG.appName)} ${version}`
-				: theme.fg(nameColor, HEADER_CONFIG.appName)
+				? `${theme.bold(paint(theme, nameRole, HEADER_CONFIG.appName))} ${version}`
+				: theme.bold(paint(theme, nameRole, HEADER_CONFIG.appName))
 			: version;
-		const chrome = `${theme.fg(versionColor, chromeTagline)} ${theme.fg(nameColor, chromeName)}`;
-		const chromeVersioned = chromeVersion ? `${chrome} ${theme.fg(versionColor, `v${chromeVersion}`)}` : chrome;
+		const chrome = `${paint(theme, detailRole, chromeTagline)} ${paint(theme, chromeRole, chromeName)}`;
+		const chromeVersioned = chromeVersion ? `${chrome} ${paint(theme, detailRole, `v${chromeVersion}`)}` : chrome;
 
 		// The identity rows shed as one block: chrome version, chrome line, agent.
 		const states: Array<readonly [string, string]> = [
@@ -89,24 +96,45 @@ export class ByteflyHeader implements Component {
 		return [
 			this.identityLine(pad, markTop, agentCell, w),
 			this.identityLine(pad, markBottom, chromeCell, w),
-			`${pad}${theme.fg("borderMuted", "─".repeat(Math.max(0, w - pad.length)))}`,
-			...help.map((row) => this.helpLine(theme, w, row)),
+			this.rule(theme, w, pad),
+			...help.map((row) => this.helpLine(theme, w, row, padWidth)),
 		];
 	}
 
+	/**
+	 * The nameplate's signature rule: an accent lead as wide as the mark, so the
+	 * rule is anchored to the mark, then a muted fill to the transcript's right
+	 * edge. The header stops where the nameplate and turn rules stop, one pad in,
+	 * instead of running to the last terminal column.
+	 */
+	private rule(theme: Theme, width: number, pad: string): string {
+		const remaining = Math.max(0, width - pad.length * 2);
+		const lead = Math.min(MARK_WIDTH, remaining);
+		const fill = remaining - lead;
+		return (
+			pad +
+			paint(theme, HEADER_CONFIG.ruleAccentRole, RULE_GLYPH.repeat(lead)) +
+			paint(theme, HEADER_CONFIG.ruleRole, RULE_GLYPH.repeat(fill))
+		);
+	}
+
 	/** A nameplate row: the padded mark, a gutter, then the identity cell if it survived. */
 	private identityLine(pad: string, mark: string, cell: string, width: number): string {
 		const line = cell ? `${pad}${markBlock(mark)} ${cell}` : `${pad}${markBlock(mark)}`;
 		return truncateToWidth(line.replace(/ +$/, ""), width, "");
 	}
 
-	/** One help group: whole entries only, dropped as the width runs out. */
-	private helpLine(theme: Theme, width: number, row: readonly HelpEntry[]): string {
+	/**
+	 * One help group: whole entries only, dropped as the width runs out. The hints
+	 * hang one body indent inside the header's margin, like a screen's hint footer
+	 * under its title rule.
+	 */
+	private helpLine(theme: Theme, width: number, row: readonly HelpEntry[], padWidth: number): string {
 		const hints = row
 			.map(helpParts)
 			.filter((part) => part.key)
 			.map((part) => keyHintText(theme, part.key, part.description));
-		return hints.length > 0 ? screenHint(theme, width, hints) : "";
+		return hints.length > 0 ? screenHint(theme, width, hints, padWidth + BODY_INDENT) : "";
 	}
 }
 

package/extensions/bytefly/header/config.ts

@@ -3,14 +3,16 @@
  *
  * The header is a nameplate: a two-tone mark beside the agent identity (Pi and
  * its version) and the chrome identity (the tagline, bytefly, and its version),
- * a `─` rule, and a grouped help block. The mark and the text are drawn from the
- * active theme's tokens, and the help keys are resolved live from Pi's
- * keybindings, so a rebound key is respected.
+ * a signature rule whose accent lead sits under the mark, and a grouped help
+ * block. Every color is a design-system role resolved by the active theme, and
+ * the help keys are resolved live from Pi's keybindings, so a rebound key is
+ * respected.
  */
 
-import type { AppKeybinding, ThemeColor } from "@earendil-works/pi-coding-agent";
+import type { AppKeybinding } from "@earendil-works/pi-coding-agent";
+import { EXPAND_KEYBINDING } from "../../../lib/tui/glyphs.ts";
+import type { TuiRole } from "../../../lib/tui/tokens.ts";
 import pkg from "../../../package.json";
-import { EXPAND_KEYBINDING } from "../../../lib/ui.ts";
 
 /** One help entry: a Pi keybinding resolved live, or a raw key or command prefix. */
 export type HelpEntry =
@@ -23,16 +25,20 @@ export interface HeaderConfig {
 	readonly appName: string;
 	/** Print Pi's version on the agent line. */
 	readonly showVersion: boolean;
-	/** Theme token for the mark's top line. */
-	readonly markColor: ThemeColor;
-	/** Theme token for the mark's bottom line. */
-	readonly markAccent: ThemeColor;
-	/** Theme token for the agent and chrome names. */
-	readonly nameColor: ThemeColor;
-	/** Theme token for the versions, the tagline, and the help descriptions. */
-	readonly versionColor: ThemeColor;
-	/** Columns of left padding, matching Pi's built-in header indent. */
-	readonly padX: number;
+	/** Role for the mark's top line. */
+	readonly markRole: TuiRole;
+	/** Role for the mark's bottom line. */
+	readonly markAccentRole: TuiRole;
+	/** Role for the agent name. */
+	readonly nameRole: TuiRole;
+	/** Role for the chrome name. */
+	readonly chromeRole: TuiRole;
+	/** Role for the versions, the tagline, and the help descriptions. */
+	readonly detailRole: TuiRole;
+	/** Role for the rule's accent lead under the mark. */
+	readonly ruleAccentRole: TuiRole;
+	/** Role for the rest of the rule. */
+	readonly ruleRole: TuiRole;
 	/** The tagline before the chrome name, so the relationship reads in words. */
 	readonly chromeTagline: string;
 	/** The chrome's name. */
@@ -46,11 +52,13 @@ export interface HeaderConfig {
 export const HEADER_CONFIG: HeaderConfig = {
 	appName: "Pi",
 	showVersion: true,
-	markColor: "accent",
-	markAccent: "warning",
-	nameColor: "muted",
-	versionColor: "dim",
-	padX: 1,
+	markRole: "accent",
+	markAccentRole: "warn",
+	nameRole: "label",
+	chromeRole: "meta",
+	detailRole: "faint",
+	ruleAccentRole: "accent",
+	ruleRole: "rule",
 	chromeTagline: "enhanced by",
 	chromeName: "bytefly",
 	chromeVersion: pkg.version,
@@ -74,7 +82,6 @@ export const HEADER_CONFIG: HeaderConfig = {
 			{ raw: "!", description: "bash" },
 			{ raw: "!!", description: "bash (no context)" },
 			{ raw: "/bytefly", description: "extensions" },
-			{ raw: "/doctor", description: "checks" },
 			{ binding: "app.message.followUp", description: "to queue follow-up" },
 			{ binding: "app.clipboard.pasteImage", description: "paste files" },
 		],

package/extensions/bytefly/header/register.ts

@@ -9,6 +9,7 @@
 
 import type { ExtensionAPI, ExtensionContext } from "@earendil-works/pi-coding-agent";
 import { isAppleTerminalSession } from "@earendil-works/pi-tui";
+import { DEFAULT_HOST_PAD } from "../pad.ts";
 import { createHeader, type HeaderView } from "./component.ts";
 import { HEADER_CONFIG } from "./config.ts";
 
@@ -17,10 +18,14 @@ export function registerHeader(pi: ExtensionAPI): void {
 	// Half blocks misalign in Apple Terminal, so the mark falls back to a wordmark
 	// there, mirroring Pi's own built-in header.
 	const halfBlocks = !isAppleTerminalSession();
-	const view = (): HeaderView => ({ showVersion: HEADER_CONFIG.showVersion, halfBlocks });
 
 	const apply = (ctx: ExtensionContext): void => {
 		if (ctx.mode !== "tui") return;
+		// The nameplate sits on the transcript margin, which is Pi's output pad — the
+		// value the tool frame and the notice inset by. An older host without
+		// `getSettings` keeps the default margin.
+		const pad = pi.getSettings?.().outputPad ?? DEFAULT_HOST_PAD;
+		const view = (): HeaderView => ({ showVersion: HEADER_CONFIG.showVersion, halfBlocks, pad });
 		ctx.ui.setHeader(createHeader(() => ctx.ui.theme, view));
 	};
 

package/extensions/bytefly/index.ts

@@ -1,30 +1,40 @@
 /**
- * bytefly — the package's terminal chrome and diagnostics, composed from six
+ * bytefly — the package's terminal chrome and diagnostics, composed from ten
  * feature folders: `header/` (the themed startup mark and version), `footer/`
  * (the two-line, width-adaptive status bar with its price calculation),
- * `separator/` (the transcript turn rule), `panel/` (the unified `/bytefly`
- * screen, also reachable as `/extensions` and `/doctor`), `doctor/` (the
- * `run_doctor` tool and its session-scoped probe runtime), and `notify/` (OS
- * notifications for unattended runs).
+ * `message/` (the user-message nameplate), `notice/` (the shared transcript
+ * notice renderer), `block/` (the unified tool-block frame), `separator/` (the
+ * transcript turn rule), `working/` (the live elapsed counter on Pi's working
+ * row), `panel/` (the unified `/bytefly` screen and its
+ * `doctor` report), `doctor/` (the `run_doctor` tool and its session-scoped
+ * probe runtime), and `notify/` (OS notifications for unattended runs).
  *
- * The header, footer, and turn rule are installed only in interactive (`tui`)
- * sessions and are always on; `pi config` turns bytefly's chrome off. The panel
- * and doctor work in every mode, and notify works wherever the environment can
- * deliver it. The footer is priced from DeepSeek's published rates by default
- * and from `bytefly.json` otherwise, the same file whose `notify` section
- * configures notifications.
+ * The header, footer, turn rule, and working timer are installed only in
+ * interactive (`tui`) sessions, and are always on; the user-message marker,
+ * notice, and tool blocks register at load and take effect wherever a
+ * transcript renders. `pi config` turns bytefly's chrome off. The panel and doctor work
+ * in every mode, and notify works wherever the environment can deliver it. The
+ * footer is priced from DeepSeek's published rates by default and from
+ * `bytefly.json` otherwise, the same file whose `notify` section configures
+ * notifications.
  *
  * Load with:  pi --extension ./extensions/bytefly
  */
 
 import type { ExtensionAPI } from "@earendil-works/pi-coding-agent";
 import { isExtensionEnabled } from "../../lib/env.ts";
+import { registerToolBlocks } from "./block/register.ts";
+import { registerChrome } from "./chrome.ts";
 import { type DoctorDeps, registerDoctor } from "./doctor/register.ts";
 import { registerFooter } from "./footer/register.ts";
 import { registerHeader } from "./header/register.ts";
+import { registerUserMessage } from "./message/register.ts";
+import { registerNotice } from "./notice/register.ts";
 import { type NotifyDeps, registerNotify } from "./notify/register.ts";
+import { createPadStore } from "./pad.ts";
 import { type PanelCommandDeps, registerPanel } from "./panel/commands.ts";
 import { registerTurnSeparator } from "./separator/register.ts";
+import { registerWorkingTimer } from "./working/register.ts";
 
 /** Host seams, injected by tests. */
 export interface ByteflyDeps {
@@ -42,7 +52,17 @@ export default function bytefly(pi: ExtensionAPI, deps: ByteflyDeps = {}): void
 
 	registerHeader(pi);
 	registerFooter(pi);
-	registerTurnSeparator(pi);
+	registerUserMessage(pi);
+	// One store per load: the tool frame and the notice record Pi's output pad and
+	// the turn separator reads it, so bytefly's transcript blocks share one margin.
+	const pad = createPadStore();
+	// The rail glyph is read from `bytefly.json` at session start; the tool results
+	// and the notice read it through this one store.
+	const rail = registerChrome(pi);
+	registerNotice(pi, pad, rail);
+	registerToolBlocks(pi, pad, rail);
+	registerTurnSeparator(pi, pad);
+	registerWorkingTimer(pi);
 	const doctor = registerDoctor(pi, deps.doctor);
 	registerPanel(pi, { doctor, discover: deps.extensions?.discover });
 	registerNotify(pi, deps.notify);

package/extensions/bytefly/message/config.ts

@@ -0,0 +1,15 @@
+/**
+ * Tuning for the user-message nameplate.
+ *
+ * Pi parses the transformed user message as Markdown and owns its colors, so
+ * this surface has no roles: it only names the label and the rule.
+ */
+
+import { RULE_GLYPH } from "../../../lib/tui/rules.ts";
+
+export const MESSAGE_CONFIG = {
+	/** The label word in the heading. */
+	label: "You",
+	/** Repeatable glyph that fills the rule row. */
+	ruleGlyph: RULE_GLYPH,
+} as const;

package/extensions/bytefly/message/format.ts

@@ -0,0 +1,42 @@
+/**
+ * The user-message nameplate: a two-row heading, the `You` label over a rule
+ * that spans the width, above the message.
+ *
+ * Pi's user message component parses the transformed string as Markdown and
+ * owns its colors, so shaping text is the only lever: the surface can add no
+ * component and no color of its own. The nameplate is a level-2 heading, which
+ * Pi renders bold in `mdHeading` and prints without its `#` prefix; the bytefly
+ * themes point `mdHeading` at the accent, so the label and rule carry the accent
+ * while the message itself stays in the default text color. Markdown cannot
+ * express a two-line heading, and Pi puts a blank line after a heading block,
+ * so the label is padded to the width and the rule is appended: the heading's
+ * text wraps, putting the rule on its own row with no blank between. A blank
+ * line separates the nameplate from the message, so the message's own Markdown
+ * (a fence, a list, a second paragraph) parses exactly as it would without it.
+ */
+
+import type { MarkdownTransformContext } from "@earendil-works/pi-coding-agent";
+import { visibleWidth } from "@earendil-works/pi-tui";
+import { MESSAGE_CONFIG } from "./config.ts";
+
+const { label, ruleGlyph } = MESSAGE_CONFIG;
+
+/**
+ * The two-row nameplate: a heading whose text is the label, padded to the
+ * width, followed by a full-width rule. The wrap puts the rule on the second
+ * row; the whole nameplate is dropped when not even the label fits.
+ */
+export function nameplate(width: number): string | undefined {
+	const labelWidth = visibleWidth(label);
+	const w = Math.max(1, Math.floor(width));
+	if (labelWidth > w) return undefined;
+	const pad = " ".repeat(w - labelWidth);
+	return `## ${label}${pad}${ruleGlyph.repeat(w)}`;
+}
+
+/** Put the nameplate above a user message; every other message passes through. */
+export function styleUserMessage(markdown: string, context: MarkdownTransformContext): string {
+	if (context.messageType !== "user" || markdown.trim() === "") return markdown;
+	const head = nameplate(context.availableWidth);
+	return head ? `${head}\n\n${markdown}` : markdown;
+}

package/extensions/bytefly/message/register.ts

@@ -0,0 +1,15 @@
+/**
+ * Registers bytefly's user-message markdown transformer.
+ *
+ * Registration happens at extension load, like the turn separator's entry
+ * renderer: the transformer only matters where a transcript renders, and Pi
+ * calls it for every message, so no session lifecycle is needed.
+ */
+
+import type { ExtensionAPI } from "@earendil-works/pi-coding-agent";
+import { styleUserMessage } from "./format.ts";
+
+/** Register the transformer that marks each user message. */
+export function registerUserMessage(pi: ExtensionAPI): void {
+	pi.registerMarkdownTransformer((markdown, context) => styleUserMessage(markdown, context));
+}

package/extensions/bytefly/notice/component.ts

@@ -0,0 +1,107 @@
+/**
+ * The transcript notice block, drawn from the shared `NoticeDetails`.
+ *
+ * Pure `noticeLines` shapes the body and hangs the rows from the transcript
+ * rail; `NoticeComponent` is the `Component` Pi mounts in place of its default
+ * custom-message box. Every field is untrusted — a job label, a matched log line
+ * — so it goes through `sanitizeLine` before it reaches the terminal, and every
+ * line is clipped to the width it is given. The rail is painted by the notice's
+ * worst severity, so a failure reads red at the edge like an errored tool
+ * result; the `source · title` headline stays at the margin.
+ */
+
+import type { Theme } from "@earendil-works/pi-coding-agent";
+import type { Component } from "@earendil-works/pi-tui";
+import { sanitizeLine } from "../../../lib/format.ts";
+import type { NoticeDetails, NoticeItem, NoticeSeverity } from "../../../lib/notice.ts";
+import { GLYPH_GAP, SEPARATORS } from "../../../lib/tui/glyphs.ts";
+import { BODY_INDENT, indentBlockLines } from "../../../lib/tui/indent.ts";
+import { paint } from "../../../lib/tui/tokens.ts";
+import { DEFAULT_RAIL_GLYPH, railGlyph } from "../chrome.ts";
+import { NOTICE_CONFIG } from "./config.ts";
+
+/** Severity order, so the rail can carry the worst one. */
+const SEVERITY_RANK: Readonly<Record<NoticeSeverity, number>> = { info: 0, ok: 1, warn: 2, bad: 3 };
+
+/** The severity a row draws with, falling back to the notice's own. */
+function severityOf(item: NoticeItem, fallback: NoticeSeverity): NoticeSeverity {
+	return item.severity ?? fallback;
+}
+
+/** The worst severity across the headline and its rows; the rail's role. */
+function worstSeverity(details: NoticeDetails): NoticeSeverity {
+	const fallback = details.severity ?? "info";
+	let worst: NoticeSeverity = fallback;
+	for (const item of details.items ?? []) {
+		const severity = severityOf(item, fallback);
+		if (SEVERITY_RANK[severity] > SEVERITY_RANK[worst]) worst = severity;
+	}
+	return worst;
+}
+
+/** One severity glyph, painted in its role. */
+function severityGlyph(theme: Theme, severity: NoticeSeverity): string {
+	return paint(theme, NOTICE_CONFIG.glyphRoles[severity], NOTICE_CONFIG.glyphs[severity]);
+}
+
+/**
+ * The notice: a `source · title` headline at the margin and body-indented rows
+ * of `glyph label · detail` behind the rail, then a `… N more` line when the
+ * rows were capped. The rail is painted by the notice's worst severity. Every
+ * line is clipped to the width it is given; `pad` is Pi's output pad, the
+ * block's own left margin.
+ */
+export function noticeLines(
+	details: NoticeDetails,
+	theme: Theme,
+	width: number,
+	pad = 0,
+	glyph = DEFAULT_RAIL_GLYPH,
+): string[] {
+	const w = Math.max(1, width);
+	const sep = paint(theme, NOTICE_CONFIG.detailRole, SEPARATORS.item);
+	const source = paint(theme, NOTICE_CONFIG.sourceRole, sanitizeLine(details.source));
+	const title = paint(theme, NOTICE_CONFIG.titleRole, sanitizeLine(details.title));
+	const items = details.items ?? [];
+	const shown = items.slice(0, NOTICE_CONFIG.maxItems);
+	const fallback = details.severity ?? "info";
+	const gap = " ".repeat(GLYPH_GAP);
+
+	const rows = shown.map((item) => {
+		const label = paint(theme, NOTICE_CONFIG.titleRole, sanitizeLine(item.label));
+		const detail = item.detail ? `${sep}${paint(theme, NOTICE_CONFIG.detailRole, sanitizeLine(item.detail))}` : "";
+		return `${severityGlyph(theme, severityOf(item, fallback))}${gap}${label}${detail}`;
+	});
+	const more = items.length - shown.length;
+	if (more > 0) {
+		rows.push(`${" ".repeat(1 + GLYPH_GAP)}${paint(theme, NOTICE_CONFIG.detailRole, `… ${more} more`)}`);
+	}
+
+	// The shared indent owns the column math: the headline at the margin, every
+	// row behind the rail, and each row clipped with the notice's ellipsis.
+	return indentBlockLines([`${source}${sep}${title}`, ...rows], w, {
+		indent: Math.max(0, Math.floor(pad)) + BODY_INDENT,
+		rail: railGlyph(theme, NOTICE_CONFIG.railRoles[worstSeverity(details)], glyph),
+		headline: true,
+		trimTrailing: false,
+		bodyClip: "…",
+	});
+}
+
+/** The notice block Pi mounts for a custom message carrying `NoticeDetails`. */
+export class NoticeComponent implements Component {
+	constructor(
+		private readonly details: NoticeDetails,
+		private readonly theme: Theme,
+		private readonly pad = 0,
+		private readonly glyph = DEFAULT_RAIL_GLYPH,
+	) {}
+
+	invalidate(): void {
+		// The rail is rebuilt from the live theme on every render.
+	}
+
+	render(width: number): string[] {
+		return noticeLines(this.details, this.theme, Math.max(1, width), this.pad, this.glyph);
+	}
+}

package/extensions/bytefly/notice/config.ts

@@ -0,0 +1,41 @@
+/**
+ * Tuning for the transcript notice block.
+ *
+ * The notice sits at the transcript's margin — a `source · title` headline and
+ * rows behind the shared transcript rail, each row led by its own severity
+ * glyph. The glyphs come from the shared vocabulary, the roles from the shared
+ * rail map, and the rail glyph from the `chrome` config, so a notice reads like
+ * the tool results around it.
+ */
+
+import type { NoticeSeverity } from "../../../lib/notice.ts";
+import { GLYPHS } from "../../../lib/tui/glyphs.ts";
+import type { TuiRole } from "../../../lib/tui/tokens.ts";
+import { RAIL_ROLES } from "../chrome.ts";
+
+export const NOTICE_CONFIG = {
+	/** Role for the source name at the head of the block. */
+	sourceRole: "accent" as TuiRole,
+	/** Role for the headline's title text and each row's label. */
+	titleRole: "label" as TuiRole,
+	/** Role for the `·` separators and each row's trailing detail. */
+	detailRole: "faint" as TuiRole,
+	/** Width-1 glyph per severity, from the shared vocabulary. */
+	glyphs: {
+		info: GLYPHS.pending,
+		ok: GLYPHS.check,
+		warn: GLYPHS.warn,
+		bad: GLYPHS.cross,
+	} as Record<NoticeSeverity, string>,
+	/** Design role per severity for a row's glyph: a check is green, a cross red. */
+	glyphRoles: {
+		info: "info",
+		ok: "ok",
+		warn: "warn",
+		bad: "bad",
+	} as Record<NoticeSeverity, TuiRole>,
+	/** The rail's neutral-by-default role per severity, shared with every rail. */
+	railRoles: RAIL_ROLES,
+	/** Rows drawn before the rest collapse into a `… N more` line. */
+	maxItems: 8,
+} as const;

package/extensions/bytefly/notice/register.ts

@@ -0,0 +1,27 @@
+/**
+ * Registers bytefly's renderer for the shared transcript notice.
+ *
+ * Registration happens at extension load, like the turn separator's entry
+ * renderer: a message renderer only matters where a transcript renders, so no
+ * session lifecycle is needed. Pi resolves it by the exact `NOTICE_TYPE`;
+ * without one it would fall back to its default custom-message box.
+ */
+
+import type { ExtensionAPI } from "@earendil-works/pi-coding-agent";
+import { NOTICE_TYPE, type NoticeDetails } from "../../../lib/notice.ts";
+import { createRailSource, type RailSource } from "../chrome.ts";
+import { createPadStore, type PadSource } from "../pad.ts";
+import { NoticeComponent } from "./component.ts";
+
+/** Register the notice renderer; a message without details keeps Pi's default. */
+export function registerNotice(
+	pi: ExtensionAPI,
+	pad: PadSource = createPadStore(),
+	rail: RailSource = createRailSource(),
+): void {
+	pi.registerMessageRenderer<NoticeDetails>(NOTICE_TYPE, (message, options, theme) =>
+		message.details
+			? new NoticeComponent(message.details, theme, pad.resolve(options.outputPad), rail.resolve())
+			: undefined,
+	);
+}

package/extensions/bytefly/pad.ts

@@ -0,0 +1,42 @@
+/**
+ * The transcript's left margin, observed from Pi's built-in output padding.
+ *
+ * Pi pads its own messages, and hands the value to tool renderers
+ * (`context.outputPad`) and message renderers (`options.outputPad`) so they can
+ * pad themselves. Entry renderers get only `{ expanded }`, and Pi's chat
+ * container carries no padding of its own, so a surface that owns its output
+ * must inset itself. This tiny store is the one place the value is shared: the
+ * tool frame and the notice record the pad they are handed, and the turn
+ * separator reads the last one.
+ *
+ * There is no module state: the extension factory creates one store per load and
+ * injects it, so tests get a fresh one and a second session cannot leak either.
+ */
+
+/** Where a bytefly transcript surface reads its left margin. */
+export interface PadSource {
+	/**
+	 * The host's output pad. Pass the pad Pi handed this render to record it for
+	 * a surface that never receives one; omit it to read the last recorded value.
+	 */
+	resolve(hostPad?: number): number;
+}
+
+/** Pi's output pad in an interactive session, before one is observed. */
+export const DEFAULT_HOST_PAD = 1;
+
+/** A store that follows Pi's output pad, falling back until one is observed. */
+export function createPadStore(defaultHostPad: number = DEFAULT_HOST_PAD): PadSource {
+	const clamp = (value: number): number => Math.max(0, Math.floor(value));
+	let hostPad = Number.isFinite(defaultHostPad) ? clamp(defaultHostPad) : DEFAULT_HOST_PAD;
+	// A non-finite observation is ignored rather than resetting the margin.
+	const record = (observed: number): void => {
+		if (Number.isFinite(observed)) hostPad = clamp(observed);
+	};
+	return {
+		resolve(observed?: number): number {
+			if (observed !== undefined) record(observed);
+			return hostPad;
+		},
+	};
+}