@gavin-hu/my-pi-agent 0.13.1 → 0.15.0

package/extensions/bytefly/panel/tui.ts

@@ -17,44 +17,30 @@ import type { Theme } from "@earendil-works/pi-coding-agent";
 import { Key, matchesKey, type Component, type TuiMouseEvent, type TuiMouseEventResult } from "@earendil-works/pi-tui";
 import type { ViewportRowsSource } from "../../../lib/tui/chrome.ts";
 import { dockListFrame } from "../../../lib/tui/chrome.ts";
-import { fitRows, formatRange, isCloseKey, ListCursor, navIntent, wheelDelta } from "../../../lib/tui/cursor.ts";
+import { isCloseKey, ListCursor, navIntent, wheelDelta } from "../../../lib/tui/cursor.ts";
 import { emptyState } from "../../../lib/tui/rows.ts";
 import { titleRule } from "../../../lib/tui/rules.ts";
 import type { ExtensionReport } from "../../../lib/requirements.ts";
 import type { ExtensionsPickerRuntime } from "../picker/runtime.ts";
 import { buildPanelModel } from "./join.ts";
+import { SETTING_ROWS, UNTRUSTED_SETTINGS_NOTE } from "./settings.ts";
 import type { SettingsSurface } from "./settings-runtime.ts";
 import type { PanelModel, PanelSection } from "./types.ts";
 import { entriesOf, entryKey, isSelectable, settingEntries, type PanelEntry } from "./tui/entries.ts";
+import { applyEditKey, type EditingState } from "./tui/editing.ts";
 import { clampSelection, firstRow, lastRow, moveRows, retainFocus } from "./tui/nav.ts";
 import { extensionDetail, extensionHints, extensionRow, extensionSummary } from "./tui/extensions-view.ts";
-import {
-	BODY_START,
-	DETAIL_ROWS,
-	EXPANDED_DETAIL_FALLBACK,
-	FRAME_ROWS,
-	groupLine,
-	hintLine,
-	MIN_BODY_ROWS,
-	noticeLine,
-	SCREEN_DEFAULT_ROWS,
-	sectionBar,
-} from "./tui/frame.ts";
+import { BODY_START, detailRows, groupLine, hintLine, noticeLine, panelFrame, sectionBar } from "./tui/frame.ts";
 import {
 	editHints,
 	projectNote,
+	sectionJsonPane,
 	settingDetail,
 	settingRow,
 	settingsHints,
 	settingsSummary,
 } from "./tui/settings-view.ts";
 
-/** Terminal rows, or `undefined` when the height is unknown. */
-function totalRows(source: ViewportRowsSource | undefined): number | undefined {
-	const rows = typeof source === "function" ? source() : source;
-	return rows !== undefined && Number.isFinite(rows) && rows > 0 ? rows : undefined;
-}
-
 /** Host seams for the panel screen, injected by the command runner. */
 export interface PanelComponentOptions {
 	/** The session's picker runtime: items, scope, toggles, dirty flag. */
@@ -101,8 +87,12 @@ export class PanelComponent implements Component {
 	private probed = false;
 	/** Transient feedback (a refusal or a failed write), shown in the hint row. */
 	private notice: string | undefined;
-	/** The text row being edited: its id, the buffer, and the caret offset. */
-	private editing: { id: string; buffer: string; caret: number } | undefined;
+	/** The text row being edited, if any. */
+	private editing: EditingState | undefined;
+	/** True while the Settings detail pane shows the focused row's section as JSON. */
+	private json = false;
+	/** Whether the last Settings render kept the project note; the click mapping needs it. */
+	private noteShown = false;
 	/** The visible section. */
 	private section: PanelSection;
 
@@ -177,12 +167,22 @@ export class PanelComponent implements Component {
 		if (next === "project" && !this.options.runtime.projectAvailable()) {
 			this.notify(
 				this.section === "settings"
-					? "Project is not trusted; settings can only be changed in Global scope."
+					? UNTRUSTED_SETTINGS_NOTE
 					: "Project is not trusted; manage extensions in Global scope only.",
 			);
 			return;
 		}
+		// The JSON pane names a file, so a scope switch has to close it.
+		this.json = false;
+		const focused = entryKey(this.activeEntries()[this.cursor.selected]);
 		this.options.runtime.setScope(next);
+		// Keep the setting under the cursor across the layer switch; the two scopes
+		// do not share entry indices because Project drops the app rows, so the
+		// render's focus retention and clamp land on the nearest row when it cannot.
+		if (focused !== undefined) {
+			const index = this.activeEntries().findIndex((entry) => entryKey(entry) === focused);
+			if (index >= 0) this.cursor.selected = index;
+		}
 		this.options.requestRender();
 	}
 
@@ -234,6 +234,32 @@ export class PanelComponent implements Component {
 			.then(() => this.options.requestRender());
 	}
 
+	/** Delete the focused setting's leaf, so its default applies again. */
+	private resetSetting(): void {
+		const entry = this.activeEntries()[this.cursor.selected];
+		if (entry?.kind !== "setting") return;
+		const scope = this.options.runtime.scope();
+		this.chain = this.chain
+			.then(() => this.options.settings.reset(scope, entry.setting.id))
+			.catch((error: unknown) => this.notify(error instanceof Error ? error.message : String(error)))
+			.then(() => this.options.requestRender());
+	}
+
+	/** Toggle the detail pane between the row and its whole section as stored. */
+	private toggleJson(): void {
+		const entry = this.activeEntries()[this.cursor.selected];
+		if (entry?.kind !== "setting") return;
+		if (!entry.setting.config) {
+			// There is no section to show, so leave the mode off rather than keeping a
+			// hidden toggle that would reopen the pane on another row.
+			this.json = false;
+			this.notify(`${entry.setting.label} is a Pi setting; bytefly.json has no section for it.`);
+			return;
+		}
+		this.json = !this.json;
+		this.options.requestRender();
+	}
+
 	/** Store the editor's buffer; a refusal keeps it open with the reason shown. */
 	private commitEdit(): void {
 		const editing = this.editing;
@@ -248,63 +274,26 @@ export class PanelComponent implements Component {
 			.then(() => this.options.requestRender());
 	}
 
-	/** The text row being edited, read live so a scope switch cannot point at a stale row. */
-	private editingRow(): { view: ReturnType<SettingsSurface["views"]>[number] } | undefined {
-		const editing = this.editing;
-		if (!editing) return undefined;
-		const scope = this.options.runtime.scope();
-		const view = this.options.settings.views(scope).find((entry) => entry.id === editing.id);
-		return view ? { view } : undefined;
-	}
-
 	/**
-	 * Editor keys. `Esc` cancels the edit rather than closing the screen, and
-	 * everything else the screen binds is inert until the editor closes.
+	 * Editor keys. `Esc`/`Ctrl+C` cancel the edit rather than closing the screen,
+	 * and everything else the screen binds is inert until the editor closes.
 	 */
 	private handleEditingInput(data: string): void {
 		const editing = this.editing;
 		if (!editing) return;
-		if (isCloseKey(data)) {
-			this.editing = undefined;
-			this.options.requestRender();
-			return;
-		}
-		if (matchesKey(data, Key.enter)) {
+		const max = SETTING_ROWS.find((row) => row.id === editing.id)?.text?.maxLength;
+		const action = applyEditKey(data, editing, max);
+		if (action.kind === "commit") {
 			void this.commitEdit();
 			return;
 		}
-		const { buffer, caret } = editing;
-		if (matchesKey(data, Key.backspace)) {
-			if (caret > 0)
-				this.editing = { ...editing, buffer: buffer.slice(0, caret - 1) + buffer.slice(caret), caret: caret - 1 };
-		} else if (matchesKey(data, Key.delete)) {
-			if (caret < buffer.length)
-				this.editing = { ...editing, buffer: buffer.slice(0, caret) + buffer.slice(caret + 1) };
-		} else if (matchesKey(data, Key.left)) {
-			this.editing = { ...editing, caret: Math.max(0, caret - 1) };
-		} else if (matchesKey(data, Key.right)) {
-			this.editing = { ...editing, caret: Math.min(buffer.length, caret + 1) };
-			// `Ctrl+A`/`Ctrl+E` are the emacs spellings of Home/End, which pi-tui's
-			// `Key.home`/`Key.end` do not match; both are offered because a terminal
-			// may send either.
-		} else if (matchesKey(data, Key.home) || matchesKey(data, "ctrl+a")) {
-			this.editing = { ...editing, caret: 0 };
-		} else if (matchesKey(data, Key.end) || matchesKey(data, "ctrl+e")) {
-			this.editing = { ...editing, caret: buffer.length };
-		} else if (matchesKey(data, "ctrl+u")) {
-			this.editing = { ...editing, buffer: "", caret: 0 };
-		} else {
-			// Anything else must be printable; control sequences are not text.
-			const typed = [...data].filter((char) => char >= " " && char !== "\u007f").join("");
-			const max = this.editingRow()?.view.text?.maxLength;
-			if (typed && max !== undefined && buffer.length + typed.length <= max) {
-				this.editing = {
-					...editing,
-					buffer: buffer.slice(0, caret) + typed + buffer.slice(caret),
-					caret: caret + typed.length,
-				};
-			}
+		if (action.kind === "cancel") {
+			this.editing = undefined;
+			this.options.requestRender();
+			return;
 		}
+		if (!action.changed) return;
+		this.editing = action.state;
 		this.options.requestRender();
 	}
 
@@ -348,6 +337,7 @@ export class PanelComponent implements Component {
 	private switchSection(next: PanelSection): void {
 		if (next === this.section) return;
 		this.section = next;
+		this.json = false;
 		this.prime();
 		this.options.requestRender();
 	}
@@ -362,6 +352,14 @@ export class PanelComponent implements Component {
 			this.select(lastRow(this.activeEntries()));
 			return;
 		}
+		if (data === "[") {
+			this.jumpGroup(-1);
+			return;
+		}
+		if (data === "]") {
+			this.jumpGroup(1);
+			return;
+		}
 		switch (navIntent(data)) {
 			case "up":
 				this.move(-1);
@@ -384,6 +382,26 @@ export class PanelComponent implements Component {
 		}
 	}
 
+	/** Move to the first row of the next (or previous) group. */
+	private jumpGroup(direction: -1 | 1): void {
+		const entries = this.activeEntries();
+		const headers = entries.flatMap((entry, index) => (entry.kind === "group" ? [index] : []));
+		const selected = this.cursor.selected;
+		// Step past the focused row's own header: landing on it would not move.
+		const own = headers.filter((index) => index < selected).at(-1);
+		const target =
+			direction === 1
+				? headers.find((index) => index > selected)
+				: headers.filter((index) => index < (own ?? 0)).at(-1);
+		if (target === undefined) return;
+		for (let index = target + 1; index < entries.length; index += 1) {
+			if (isSelectable(entries[index])) {
+				this.select(index);
+				return;
+			}
+		}
+	}
+
 	/** Settings keys: change, scope, navigation. `←`/`→` stay on sections. */
 	private handleSettingsInput(data: string): void {
 		this.clampSelection(this.activeEntries());
@@ -395,6 +413,14 @@ export class PanelComponent implements Component {
 			this.switchScope();
 			return;
 		}
+		if (data === "u") {
+			this.resetSetting();
+			return;
+		}
+		if (data === "J") {
+			this.toggleJson();
+			return;
+		}
 		this.navigate(data);
 	}
 
@@ -469,23 +495,24 @@ export class PanelComponent implements Component {
 		if (entries.length === 0) return undefined;
 		// The Settings section prints the "Global only" note first in Project scope,
 		// so the rows start one line lower there.
-		const note = this.section === "settings" && this.options.runtime.scope() === "project" ? 1 : 0;
+		const note = this.section === "settings" && this.noteShown ? 1 : 0;
 		const line = event.y - (BODY_START + note);
-		if (line < 0) return undefined;
-		const index = this.cursor.window(entries.length).start + line;
+		const window = this.cursor.window(entries.length);
+		if (line < 0 || line >= window.end - window.start) return undefined;
+		const index = window.start + line;
 		if (!isSelectable(entries[index])) return undefined;
 		this.select(index);
 		return { handled: true };
 	}
 
 	/** Key hints for the active section; whole hints drop as the width runs out. */
-	private hint(width: number, expanded = false): string {
+	private hint(width: number, options: { expanded?: boolean; jsonOpen?: boolean } = {}): string {
 		if (this.editing) return hintLine(this.theme, width, editHints());
 		const hints =
 			this.section === "settings"
-				? settingsHints()
+				? settingsHints(options.jsonOpen === true)
 				: extensionHints({
-						expanded,
+						expanded: options.expanded === true,
 						refreshing: this.refreshing,
 						projectScope: this.options.runtime.scope() === "project",
 					});
@@ -493,21 +520,8 @@ export class PanelComponent implements Component {
 	}
 
 	/** The key-hint row, or the notice that temporarily replaces it. */
-	private hintRow(width: number, expanded = false): string {
-		return this.notice !== undefined ? noticeLine(this.theme, width, this.notice) : this.hint(width, expanded);
-	}
-
-	/**
-	 * Detail rows the focused row gets: the fixed pane when collapsed, the free
-	 * height when expanded. Zero when the terminal cannot hold one body row next to
-	 * the pane, so the hint row is never pushed off the screen.
-	 */
-	private detailRows(expanded: boolean): number {
-		const total = totalRows(this.options.viewportRows);
-		if (total === undefined) return expanded ? EXPANDED_DETAIL_FALLBACK : DETAIL_ROWS;
-		const available = total - FRAME_ROWS - MIN_BODY_ROWS;
-		if (available < DETAIL_ROWS + 1) return 0;
-		return expanded ? Math.max(DETAIL_ROWS, available) : DETAIL_ROWS;
+	private hintRow(width: number, options: { expanded?: boolean; jsonOpen?: boolean } = {}): string {
+		return this.notice !== undefined ? noticeLine(this.theme, width, this.notice) : this.hint(width, options);
 	}
 
 	/** Expand or collapse the focused row's findings. */
@@ -519,6 +533,13 @@ export class PanelComponent implements Component {
 		this.options.requestRender();
 	}
 
+	/** Retain the focus across a rebuild and return the entry it landed on. */
+	private retain(entries: PanelEntry[]): PanelEntry | undefined {
+		this.retainFocus(entries);
+		this.clampSelection(entries);
+		return entries[this.cursor.selected];
+	}
+
 	/** The Settings body: scope counts, the project note, rows, and detail. */
 	private renderSettings(width: number, header: string): string[] {
 		const scope = this.options.runtime.scope();
@@ -527,64 +548,57 @@ export class PanelComponent implements Component {
 			this.theme,
 			width,
 			this.section,
-			settingsSummary(this.theme, width, scope, this.options.settings.count(scope)),
+			settingsSummary(this.theme, width, scope, views.length),
 		);
 		const entries = settingEntries(views);
 		const note = scope === "project" ? projectNote(this.theme, width) : undefined;
 
-		if (entries.length === 0) {
-			return dockListFrame({
-				header,
-				summary,
-				body: emptyState(this.theme, width, { label: "No settings found." }),
-				hint: this.hintRow(width),
-			});
-		}
-
-		this.retainFocus(entries);
-		this.clampSelection(entries);
-
-		const focusedEntry = entries[this.cursor.selected];
+		const focusedEntry = this.retain(entries);
 		const focused = focusedEntry?.kind === "setting" ? focusedEntry.setting : undefined;
-		const detail = settingDetail({
+		// A row with no section leaves the mode off, so moving away and back cannot
+		// reopen a pane the user closed.
+		if (focused && !focused.config) this.json = false;
+		const jsonConfig = this.json ? focused?.config : undefined;
+		const detail =
+			jsonConfig && focused
+				? sectionJsonPane({
+						theme: this.theme,
+						width,
+						section: jsonConfig.section,
+						document: this.options.settings.sectionDocument(scope, jsonConfig.section),
+						budget: detailRows(true, this.options.viewportRows),
+						dirty: this.dirty,
+						paths: { scope, cwd: this.options.cwd, agentDir: this.options.agentDir },
+					})
+				: settingDetail({
+						theme: this.theme,
+						width,
+						view: focused,
+						budget: detailRows(false, this.options.viewportRows),
+						dirty: this.dirty,
+						paths: { scope, cwd: this.options.cwd, agentDir: this.options.agentDir },
+					});
+
+		const { lines, noteShown } = panelFrame({
 			theme: this.theme,
+			viewportRows: this.options.viewportRows,
+			cursor: this.cursor,
 			width,
-			view: focused,
-			budget: this.detailRows(false),
-			dirty: this.dirty,
-			paths: { scope, cwd: this.options.cwd, agentDir: this.options.agentDir },
-		});
-
-		this.cursor.visible = fitRows(
-			this.options.viewportRows,
-			entries.length,
-			FRAME_ROWS + detail.length + (note ? 1 : 0),
-			SCREEN_DEFAULT_ROWS,
-		);
-		this.cursor.sync(entries.length);
-		const { start, end } = this.cursor.window(entries.length);
-
-		const body: string[] = [];
-		if (note) body.push(note);
-		for (let index = start; index < end; index += 1) {
-			const entry = entries[index];
-			if (entry.kind === "group") body.push(groupLine(this.theme, width, entry));
-			else if (entry.kind === "setting") {
-				const editing = this.editing?.id === entry.setting.id ? this.editing : undefined;
-				body.push(settingRow(this.theme, width, entry.setting, index === this.cursor.selected, editing));
-			}
-		}
-
-		return dockListFrame({
 			header,
 			summary,
-			body,
-			range: this.cursor.clipped(entries.length)
-				? formatRange(this.theme, width, { start, end, total: entries.length })
-				: undefined,
-			detail: detail.length > 0 ? detail : undefined,
-			hint: this.hintRow(width),
+			entries,
+			note,
+			detail,
+			hint: this.hintRow(width, { jsonOpen: jsonConfig !== undefined }),
+			draw: (entry, index) => {
+				if (entry.kind === "group") return groupLine(this.theme, width, entry);
+				if (entry.kind !== "setting") return undefined;
+				const editing = this.editing?.id === entry.setting.id ? this.editing : undefined;
+				return settingRow(this.theme, width, entry.setting, index === this.cursor.selected, editing);
+			},
 		});
+		this.noteShown = noteShown;
+		return lines;
 	}
 
 	render(width: number): string[] {
@@ -610,39 +624,35 @@ export class PanelComponent implements Component {
 			});
 		}
 
-		this.retainFocus(entries);
-		this.clampSelection(entries);
-
-		const focusedEntry = entries[this.cursor.selected];
+		const focusedEntry = this.retain(entries);
 		const focused = focusedEntry?.kind === "row" ? focusedEntry.row : undefined;
 		const expanded = focused !== undefined && this.expanded.has(focused.key);
-		const detail = extensionDetail(this.theme, w, focused, this.detailRows(expanded), expanded, this.dirty);
-
-		this.cursor.visible = fitRows(
-			this.options.viewportRows,
-			entries.length,
-			FRAME_ROWS + detail.length,
-			SCREEN_DEFAULT_ROWS,
+		const detail = extensionDetail(
+			this.theme,
+			w,
+			focused,
+			detailRows(expanded, this.options.viewportRows),
+			expanded,
+			this.dirty,
 		);
-		this.cursor.sync(entries.length);
-		const { start, end } = this.cursor.window(entries.length);
 
-		const body: string[] = [];
-		for (let index = start; index < end; index += 1) {
-			const entry = entries[index];
-			if (entry.kind === "group") body.push(groupLine(this.theme, w, entry));
-			else if (entry.kind === "row") body.push(extensionRow(this.theme, w, entry.row, index === this.cursor.selected));
-		}
-
-		return dockListFrame({
+		const { lines, noteShown } = panelFrame({
+			theme: this.theme,
+			viewportRows: this.options.viewportRows,
+			cursor: this.cursor,
+			width: w,
 			header,
 			summary,
-			body,
-			range: this.cursor.clipped(entries.length)
-				? formatRange(this.theme, w, { start, end, total: entries.length })
-				: undefined,
-			detail: detail.length > 0 ? detail : undefined,
-			hint: this.hintRow(w, expanded),
+			entries,
+			detail,
+			hint: this.hintRow(w, { expanded }),
+			draw: (entry, index) => {
+				if (entry.kind === "group") return groupLine(this.theme, w, entry);
+				if (entry.kind !== "row") return undefined;
+				return extensionRow(this.theme, w, entry.row, index === this.cursor.selected);
+			},
 		});
+		this.noteShown = noteShown;
+		return lines;
 	}
 }

package/extensions/bytefly/picker/discovery.ts

@@ -50,6 +50,7 @@ export function createSettingsStore(manager: SettingsManager): SettingsStore {
 		setQuietStartup: (quiet) => manager.setQuietStartup(quiet),
 		setOutputPad: (padding) => manager.setOutputPad(padding),
 		setShowHardwareCursor: (enabled) => manager.setShowHardwareCursor(enabled),
+		setTheme: (theme) => manager.setTheme(theme),
 		isProjectTrusted: () => manager.isProjectTrusted(),
 		flush: () => manager.flush(),
 		drainErrors: () => manager.drainErrors(),

package/extensions/bytefly/picker/types.ts

@@ -37,6 +37,8 @@ export interface SettingsStore {
 	setQuietStartup(quiet: QuietStartup): void;
 	setOutputPad(padding: 0 | 1): void;
 	setShowHardwareCursor(enabled: boolean): void;
+	/** Pi's theme setting is a personal-file preference. */
+	setTheme(theme: string): void;
 	isProjectTrusted(): boolean;
 	flush(): Promise<void>;
 	drainErrors(): Array<{ error: Error }>;

package/extensions/bytefly/separator/component.ts

@@ -1,27 +1,38 @@
 /**
  * The transcript component that draws one separator entry.
  *
- * It is stateless: the line is derived from the stored turn number and the
- * width passed to `render`, so there is nothing to invalidate.
+ * `render` runs on every frame Pi draws, and a session holds one separator per
+ * turn, so the line is a pure function of the stored entry data, the width, and
+ * the theme it was built with. `centeredRule` paints and measures a full-width
+ * rule, so the placed line is memoized on the width (`RenderCache`); without it
+ * a long session rebuilds every turn's rule on every frame. Pi rebuilds the
+ * component from the renderer on a theme change (its
+ * `CustomEntryComponent.invalidate` re-runs it), so the captured theme cannot go
+ * stale; `invalidate` drops the memo anyway, in case that changes.
  */
 
 import type { Theme } from "@earendil-works/pi-coding-agent";
 import type { Component } from "@earendil-works/pi-tui";
+import { RenderCache } from "../../../lib/tui/render-cache.ts";
 import { separatorLine } from "./format.ts";
+import type { TurnSeparatorData } from "./types.ts";
 
-/** Renders one separator entry; `turn` comes from the stored entry data. */
+/** Renders one separator entry; the data comes from the stored entry. */
 export class SeparatorComponent implements Component {
+	private readonly cache = new RenderCache();
+
 	constructor(
-		private readonly turn: number,
+		private readonly data: TurnSeparatorData,
 		private readonly theme: Theme,
 		private readonly pad = 0,
 	) {}
 
 	invalidate(): void {
-		// Stateless: the line is derived from `turn` and the width passed to render.
+		this.cache.invalidate();
 	}
 
 	render(width: number): string[] {
-		return separatorLine(this.turn, width, this.theme, this.pad);
+		const w = Math.max(1, width);
+		return this.cache.lines(w, undefined, () => separatorLine(this.data, w, this.theme, this.pad));
 	}
 }

package/extensions/bytefly/separator/config.ts

@@ -22,6 +22,16 @@ export const CONFIG = {
 	dashRole: "ruleStrong",
 	/** Role for the label. */
 	labelRole: "meta",
+	/** Role for a turn with a failed tool. */
+	failureRole: "bad",
+	/** Role for an aborted turn; escape is a warning, not an error. */
+	abortedRole: "warn",
+	/** Smallest run duration printed on the receipt; shorter turns keep the label quiet. */
+	minDurationMs: 1000,
+	/** Word appended when the run was aborted. */
+	abortedLabel: "aborted",
+	/** Glyph before a failed tool count. */
+	failureGlyph: GLYPHS.cross,
 } as const satisfies {
 	customType: string;
 	glyph: string;
@@ -29,4 +39,9 @@ export const CONFIG = {
 	pad: number;
 	dashRole: TuiRole;
 	labelRole: TuiRole;
+	failureRole: TuiRole;
+	abortedRole: TuiRole;
+	minDurationMs: number;
+	abortedLabel: string;
+	failureGlyph: string;
 };

package/extensions/bytefly/separator/format.ts

@@ -1,14 +1,67 @@
 /**
  * Pure formatting for bytefly's turn separator line.
  *
- * The centered `╌╌╌ turn N ╌╌╌` layout comes from the design system's
- * `centeredRule`, so this module only names the turn; the shared rule owns the
- * centering, the degradation, and the colors.
+ * The line is a receipt for the settled run: the turn number, then as much of
+ * the duration, the top-level tool count, and the outcome as the width can
+ * carry. The centered `╌╌╌ turn N ╌╌╌` layout comes from the design system's
+ * `centeredRule`, so this module only builds the label and picks its role; the
+ * shared rule owns the centering and the dashes.
  */
 
 import type { Theme } from "@earendil-works/pi-coding-agent";
+import { visibleWidth } from "@earendil-works/pi-tui";
+import { formatDuration, formatToolCount } from "../../../lib/format.ts";
+import { SEPARATORS } from "../../../lib/tui/glyphs.ts";
 import { centeredRule } from "../../../lib/tui/rules.ts";
+import type { TuiRole } from "../../../lib/tui/tokens.ts";
 import { CONFIG } from "./config.ts";
+import type { TurnSeparatorData } from "./types.ts";
+
+/** Whether the label and `centeredRule`'s two pads leave room for a dash. */
+function fits(label: string, width: number): boolean {
+	return visibleWidth(label) + CONFIG.pad * 2 < width;
+}
+
+/**
+ * The widest receipt that fits, shed one field at a time.
+ *
+ * The tool count goes first, then the duration; the outcome stays beside the
+ * turn as long as it fits, because a failed or aborted run is the part the rule
+ * should not hide. The turn number itself is never dropped here — a terminal
+ * too narrow even for that falls back to `centeredRule`'s plain dashed rule.
+ */
+export function receiptLabel(data: TurnSeparatorData, width: number): string {
+	const turn = `${CONFIG.labelPrefix} ${data.turn}`;
+	const duration =
+		data.durationMs !== undefined && data.durationMs >= CONFIG.minDurationMs
+			? formatDuration(data.durationMs)
+			: undefined;
+	const tools = data.tools !== undefined && data.tools > 0 ? formatToolCount(data.tools) : undefined;
+	const outcome = data.aborted
+		? CONFIG.abortedLabel
+		: data.failures !== undefined && data.failures > 0
+			? `${CONFIG.failureGlyph}${data.failures}`
+			: undefined;
+
+	const steps: Array<Array<string | undefined>> = [
+		[turn, duration, tools, outcome],
+		[turn, duration, outcome],
+		[turn, outcome],
+		[turn],
+	];
+	for (const parts of steps) {
+		const label = parts.filter((part): part is string => part !== undefined).join(SEPARATORS.item);
+		if (fits(label, width)) return label;
+	}
+	return turn;
+}
+
+/** The label's role: an aborted turn warns, a failed tool is an error. */
+export function receiptRole(data: TurnSeparatorData): TuiRole {
+	if (data.aborted) return CONFIG.abortedRole;
+	if (data.failures !== undefined && data.failures > 0) return CONFIG.failureRole;
+	return CONFIG.labelRole;
+}
 
 /**
  * One rendered line: the centered turn rule, colored by role.
@@ -17,14 +70,15 @@ import { CONFIG } from "./config.ts";
  * 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[] {
+export function separatorLine(data: TurnSeparatorData, 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}`, {
+	const ruleWidth = Math.max(1, w - inset * 2);
+	const line = centeredRule(theme, ruleWidth, receiptLabel(data, ruleWidth), {
 		glyph: CONFIG.glyph,
 		pad: CONFIG.pad,
 		fillRole: CONFIG.dashRole,
-		labelRole: CONFIG.labelRole,
+		labelRole: receiptRole(data),
 	});
 	return [`${" ".repeat(inset)}${line}`];
 }