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

package/extensions/bytefly/chrome.ts

@@ -0,0 +1,97 @@
+/**
+ * The transcript rail and the shared `chrome` section of `bytefly.json`.
+ *
+ * The rail is the vertical stroke that leads a block's body — a tool result, a
+ * notice row — while the headline stays at the margin. Its glyph is the one
+ * configurable part; the geometry is fixed by `lib/tui/indent.ts`. A glyph must
+ * be exactly one visible column, or it would push the body right and drift the
+ * width math, so `normalizeChromeConfig` rejects anything else and falls back.
+ *
+ * The value is read at `session_start`/`session_tree` (nothing watches the
+ * document), held in a `RailSource` closure created once per load, and read by
+ * the renderers at render time, so no module state lives here.
+ */
+
+import type { ExtensionAPI, ExtensionContext, Theme } from "@earendil-works/pi-coding-agent";
+import { visibleWidth } from "@earendil-works/pi-tui";
+import { cleanString, loadConfigSection } from "../../lib/config.ts";
+import { GLYPHS } from "../../lib/tui/glyphs.ts";
+import { paint, type TuiRole } from "../../lib/tui/tokens.ts";
+
+/** How a railed block reads at a glance. */
+export type RailStatus = "info" | "ok" | "warn" | "bad";
+
+/**
+ * Status to design role: a rail is neutral by default, so a finished or merely
+ * informational block draws no colour and only `warn` and `bad` stand out. A
+ * surface whose `info` means *active* rather than *informational* brightens it
+ * itself — a running tool result takes the accent (see `block/config.ts`).
+ */
+export const RAIL_ROLES: Readonly<Record<RailStatus, TuiRole>> = {
+	info: "info",
+	ok: "faint",
+	warn: "warn",
+	bad: "bad",
+};
+
+/** The rail glyph, painted in the role. `lib/tui/indent.ts` adds the gap. */
+export function railGlyph(theme: Theme, role: TuiRole, glyph: string): string {
+	return paint(theme, role, glyph);
+}
+
+/** Transcript chrome presentation. */
+export interface ChromeConfig {
+	/** The rail glyph: exactly one visible column. */
+	rail: string;
+}
+
+/** The default rail glyph, from the shared vocabulary. */
+export const DEFAULT_RAIL_GLYPH: string = GLYPHS.divider;
+
+export const DEFAULT_CHROME_CONFIG: ChromeConfig = { rail: DEFAULT_RAIL_GLYPH };
+
+/** Whether `value` is a single, unstyled terminal column. */
+function isRailGlyph(value: string): boolean {
+	// Control characters first: a bare ESC confuses a width measurement.
+	if (/[\u0000-\u001f\u007f]/.test(value)) return false;
+	return [...value].length === 1 && visibleWidth(value) === 1;
+}
+
+/** Validate the `chrome` section over `base`. Total: never throws, never guesses. */
+export function normalizeChromeConfig(raw: Record<string, unknown> | undefined, base: ChromeConfig): ChromeConfig {
+	if (!raw) return base;
+	const rail = cleanString(raw.rail, "");
+	return { rail: isRailGlyph(rail) ? rail : base.rail };
+}
+
+/** Effective chrome config for `cwd` (defaults, then the shared `chrome` section). */
+export function loadChromeConfig(cwd: string): ChromeConfig {
+	return loadConfigSection(cwd, "chrome", DEFAULT_CHROME_CONFIG, normalizeChromeConfig);
+}
+
+/** Where a render-time surface reads the current rail glyph. */
+export interface RailSource {
+	/** The configured glyph. */
+	resolve(): string;
+	/** Replace the glyph; a value that is not one column keeps the previous one. */
+	set(glyph: string): void;
+}
+
+/** A store holding the configured rail glyph, created once per extension load. */
+export function createRailSource(initial: string = DEFAULT_RAIL_GLYPH): RailSource {
+	let glyph = isRailGlyph(initial) ? initial : DEFAULT_RAIL_GLYPH;
+	return {
+		resolve: () => glyph,
+		set(next: string) {
+			if (isRailGlyph(next)) glyph = next;
+		},
+	};
+}
+
+/** Register the chrome lifecycle and hand back the rail source it keeps current. */
+export function registerChrome(pi: ExtensionAPI, rail: RailSource = createRailSource()): RailSource {
+	const load = (ctx: ExtensionContext): void => rail.set(loadChromeConfig(ctx.cwd).rail);
+	pi.on("session_start", (_event, ctx) => load(ctx));
+	pi.on("session_tree", (_event, ctx) => load(ctx));
+	return rail;
+}

package/extensions/bytefly/doctor/tools.ts

@@ -8,6 +8,7 @@
  */
 
 import type { ExtensionAPI } from "@earendil-works/pi-coding-agent";
+import { sanitizeLine } from "../../../lib/format.ts";
 import { missingFindings } from "../../../lib/requirements.ts";
 import { reuseText, toolDetails } from "../../../lib/tui/chrome.ts";
 import { paint, type TuiRole } from "../../../lib/tui/tokens.ts";
@@ -92,9 +93,11 @@ export function registerTools(pi: ExtensionAPI, runtime: DoctorRuntime): void {
 
 		renderCall(args, theme, context) {
 			const input = args as DoctorArgs;
-			const scope = `${input.extension ? ` ${input.extension}` : ""}${input.refresh ? " (refresh)" : ""}`;
+			const scope = typeof input.extension === "string" && input.extension ? sanitizeLine(input.extension) : "";
 			const text = reuseText(context?.lastComponent);
-			text.setText(`${theme.fg("toolTitle", "doctor")}${paint(theme, "faint", scope)}`);
+			text.setText(
+				`${theme.fg("toolTitle", theme.bold(TOOL_NAME))}${scope ? ` ${paint(theme, "label", scope)}` : ""}${input.refresh ? paint(theme, "faint", " (refresh)") : ""}`,
+			);
 			return text;
 		},
 

package/extensions/bytefly/header/component.ts

@@ -14,6 +14,8 @@ 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/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";
 
@@ -23,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. */
@@ -63,8 +67,9 @@ export class ByteflyHeader implements Component {
 		const w = Math.max(1, width);
 		const theme = this.getTheme();
 		const view = this.view();
-		const { padX, nameRole, chromeRole, detailRole, 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 ? paint(theme, detailRole, `v${this.version}`) : "";
@@ -92,22 +97,24 @@ export class ByteflyHeader implements Component {
 			this.identityLine(pad, markTop, agentCell, w),
 			this.identityLine(pad, markBottom, chromeCell, w),
 			this.rule(theme, w, pad),
-			...help.map((row) => this.helpLine(theme, w, row)),
+			...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 edge.
+	 * 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);
+		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, "─".repeat(lead)) +
-			paint(theme, HEADER_CONFIG.ruleRole, "─".repeat(fill))
+			paint(theme, HEADER_CONFIG.ruleAccentRole, RULE_GLYPH.repeat(lead)) +
+			paint(theme, HEADER_CONFIG.ruleRole, RULE_GLYPH.repeat(fill))
 		);
 	}
 
@@ -117,13 +124,17 @@ export class ByteflyHeader implements Component {
 		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

@@ -39,8 +39,6 @@ export interface HeaderConfig {
 	readonly ruleAccentRole: TuiRole;
 	/** Role for the rest of the rule. */
 	readonly ruleRole: TuiRole;
-	/** Columns of left padding, matching Pi's built-in header indent. */
-	readonly padX: number;
 	/** The tagline before the chrome name, so the relationship reads in words. */
 	readonly chromeTagline: string;
 	/** The chrome's name. */
@@ -61,7 +59,6 @@ export const HEADER_CONFIG: HeaderConfig = {
 	detailRole: "faint",
 	ruleAccentRole: "accent",
 	ruleRole: "rule",
-	padX: 1,
 	chromeTagline: "enhanced by",
 	chromeName: "bytefly",
 	chromeVersion: pkg.version,

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 and its `doctor` report), `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;
+		},
+	};
+}

package/extensions/bytefly/separator/component.ts

@@ -14,6 +14,7 @@ export class SeparatorComponent implements Component {
 	constructor(
 		private readonly turn: number,
 		private readonly theme: Theme,
+		private readonly pad = 0,
 	) {}
 
 	invalidate(): void {
@@ -21,6 +22,6 @@ export class SeparatorComponent implements Component {
 	}
 
 	render(width: number): string[] {
-		return separatorLine(this.turn, width, this.theme);
+		return separatorLine(this.turn, width, this.theme, this.pad);
 	}
 }

package/extensions/bytefly/separator/format.ts

@@ -10,14 +10,21 @@ import type { Theme } from "@earendil-works/pi-coding-agent";
 import { centeredRule } from "../../../lib/tui/rules.ts";
 import { CONFIG } from "./config.ts";
 
-/** One rendered line: the centered turn rule, colored by role. */
-export function separatorLine(turn: number, width: number, theme: Theme): string[] {
-	return [
-		centeredRule(theme, width, `${CONFIG.labelPrefix} ${turn}`, {
-			glyph: CONFIG.glyph,
-			pad: CONFIG.pad,
-			fillRole: CONFIG.dashRole,
-			labelRole: CONFIG.labelRole,
-		}),
-	];
+/**
+ * One rendered line: the centered turn rule, colored by role.
+ *
+ * `pad` is Pi's output pad. Pi gives an entry renderer no pad and adds its
+ * component raw, so the rule insets itself symmetrically by that many columns,
+ * keeping its left edge on the transcript's margin.
+ */
+export function separatorLine(turn: number, width: number, theme: Theme, pad = 0): string[] {
+	const w = Math.max(1, Math.floor(width));
+	const inset = Math.max(0, Math.min(Math.floor(pad), Math.floor((w - 1) / 2)));
+	const line = centeredRule(theme, Math.max(1, w - inset * 2), `${CONFIG.labelPrefix} ${turn}`, {
+		glyph: CONFIG.glyph,
+		pad: CONFIG.pad,
+		fillRole: CONFIG.dashRole,
+		labelRole: CONFIG.labelRole,
+	});
+	return [`${" ".repeat(inset)}${line}`];
 }