@oh-my-pi/pi-tui 18.2.10 → 18.3.0

package/src/overlays/plan-review-overlay.ts

@@ -19,7 +19,7 @@
 import {
 	type Component,
 	Ellipsis,
-	Input,
+	Editor,
 	Markdown,
 	type MarkdownTheme,
 	matchesKey,
@@ -31,7 +31,7 @@ import {
 } from "../index";
 import { sanitizeText } from "@oh-my-pi/pi-utils";
 import { sanitizeStatusText } from "../chrome/shared";
-import { getMarkdownTheme, theme } from "../theme/theme";
+import { getEditorTheme, getMarkdownTheme, theme } from "../theme/theme";
 import {
 	matchesAppExternalEditor,
 	matchesSelectCancel,
@@ -57,6 +57,8 @@ import { renderSegmentTrack } from "../chrome/segment-track";
 const OVERLAY_TITLE = "Plan Review";
 /** Minimum plan-body rows kept visible even on short terminals. */
 const MIN_BODY_ROWS = 3;
+/** Visible rows for the in-overlay annotation editor before it scrolls. */
+const MAX_ANNOTATION_EDITOR_ROWS = 6;
 /** Sidebar gates: enough headings, a wide terminal, and a usable body column. */
 const SIDEBAR_MIN_HEADINGS = 2;
 const SIDEBAR_MIN_TOTAL_WIDTH = 64;
@@ -93,6 +95,16 @@ interface BodyRowAnchor {
 	contextTruncated: boolean;
 }
 
+interface AnnotationSelection {
+	sectionIndex: number;
+	annotationIndex: number;
+}
+
+interface AnnotationChooser {
+	entries: AnnotationSelection[];
+	selected: number;
+}
+
 /** Serializable annotations retained by the plan-review owner between overlays. */
 export interface PlanReviewAnnotationState {
 	annotations: Array<{
@@ -207,8 +219,10 @@ export class PlanReviewOverlay implements Component {
 	/** Label of the committed choice, shown while the async approval settles. */
 	#committedLabel: string | undefined;
 	#annotating = false;
-	#input: Input;
+	#editor: Editor;
 	#annotationTarget: BodyRowAnchor | { sectionIndex: number; row: null; context: null } | undefined;
+	#editingAnnotation: AnnotationSelection | undefined;
+	#annotationChooser: AnnotationChooser | undefined;
 
 	constructor(
 		planContent: string,
@@ -236,10 +250,11 @@ export class PlanReviewOverlay implements Component {
 		} else {
 			this.#sliderIndex = 0;
 		}
-		this.#input = new Input();
-		this.#input.setUseTerminalCursor(false);
-		this.#input.onSubmit = value => this.#submitAnnotation(value);
-		this.#input.onEscape = () => this.#exitAnnotate();
+		this.#editor = new Editor(getEditorTheme());
+		this.#editor.setBorderVisible(false);
+		this.#editor.setPromptGutter("> ");
+		this.#editor.setUseTerminalCursor(false);
+		this.#editor.onSubmit = value => this.#submitAnnotation(value);
 		this.#setSections(planContent);
 		this.#restoreAnnotationState(options.annotationState);
 		if (Array.isArray(options.annotationState?.annotations) && options.annotationState.annotations.length > 0) {
@@ -490,14 +505,22 @@ export class PlanReviewOverlay implements Component {
 	handleInput(keyData: string): void {
 		if (this.#committed) return;
 		if (keyData.startsWith("\x1b[<") && this.#handleMouse(keyData)) return;
+		if (this.#annotationChooser) {
+			this.#handleAnnotationChooser(keyData);
+			return;
+		}
 		if (this.#annotating) {
 			if (this.callbacks.onAnnotationExternalEditor && matchesAppExternalEditor(keyData)) {
-				this.callbacks.onAnnotationExternalEditor(this.#input.getValue(), text => {
-					if (text !== null) this.#submitAnnotation(text);
+				this.callbacks.onAnnotationExternalEditor(this.#editor.getExpandedText(), text => {
+					if (text !== null && this.#annotating) this.#editor.setText(text);
 				});
 				return;
 			}
-			this.#input.handleInput(keyData);
+			if (matchesSelectCancel(keyData)) {
+				this.#exitAnnotate();
+				return;
+			}
+			this.#editor.handleInput(keyData);
 			return;
 		}
 		if (matchesSelectCancel(keyData)) {
@@ -505,6 +528,14 @@ export class PlanReviewOverlay implements Component {
 			this.callbacks.onCancel();
 			return;
 		}
+		if (this.#focus !== "actions" && keyData === "u") {
+			this.#undoLast();
+			return;
+		}
+		if (this.#focus !== "actions" && keyData === "e") {
+			this.#editCurrentAnnotation();
+			return;
+		}
 		if (this.callbacks.onExternalEditor && matchesAppExternalEditor(keyData)) {
 			this.callbacks.onExternalEditor();
 			return;
@@ -726,10 +757,6 @@ export class PlanReviewOverlay implements Component {
 			this.#startSectionAnnotate();
 			return;
 		}
-		if (data === "u") {
-			this.#undoLast();
-			return;
-		}
 	}
 
 	#moveTocCursor(delta: number): void {
@@ -828,39 +855,145 @@ export class PlanReviewOverlay implements Component {
 
 	#startAnnotate(target: BodyRowAnchor | { sectionIndex: number; row: null; context: null }): void {
 		this.#annotationTarget = target;
+		this.#editingAnnotation = undefined;
+		this.#annotating = true;
+		this.#editor.setText("");
+	}
+
+	#startExistingAnnotation(selection: AnnotationSelection): void {
+		const section = this.#sections[selection.sectionIndex];
+		const annotation = section?.annotations[selection.annotationIndex];
+		if (!section || !annotation) return;
+		this.#annotationChooser = undefined;
+		this.#editingAnnotation = selection;
+		this.#annotationTarget =
+			annotation.target.kind === "section"
+				? { sectionIndex: selection.sectionIndex, row: null, context: null }
+				: {
+						sectionIndex: selection.sectionIndex,
+						row: annotation.target.row,
+						context: annotation.target.context,
+						contextTruncated: annotation.target.contextTruncated,
+					};
 		this.#annotating = true;
-		this.#input.setValue("");
+		this.#editor.setText(annotation.note);
+	}
+
+	#annotationMatchesBodyAnchor(annotation: OverlayAnnotation, anchor: BodyRowAnchor): boolean {
+		if (annotation.target.kind === "section") return true;
+		if (annotation.target.row === anchor.row && annotation.target.context === anchor.context) return true;
+		const seenRows = new Set<number>();
+		const sectionAnchors: LineAnchorContext[] = [];
+		for (const candidate of this.#bodyRowAnchors) {
+			if (candidate.sectionIndex !== anchor.sectionIndex || seenRows.has(candidate.row)) continue;
+			seenRows.add(candidate.row);
+			sectionAnchors.push({ text: candidate.context, truncated: candidate.contextTruncated });
+		}
+		const resolvedRow = this.#resolveLineRow(
+			annotation.target.row,
+			{ text: annotation.target.context, truncated: annotation.target.contextTruncated },
+			sectionAnchors,
+		);
+		return resolvedRow === anchor.row;
+	}
+
+	#annotationCandidates(): AnnotationSelection[] {
+		if (this.#focus === "toc") {
+			const sectionIndex = this.#toc[this.#tocCursor];
+			const section = sectionIndex === undefined ? undefined : this.#sections[sectionIndex];
+			if (!section || section.annotations.length === 0) return [];
+			return section.annotations.map((_, annotationIndex) => ({ sectionIndex, annotationIndex }));
+		}
+		if (this.#focus !== "body") return [];
+		const maxRow = this.#bodyRowAnchors.length - 1;
+		if (maxRow < 0) return [];
+		const topRow = Math.max(0, Math.min(maxRow, Math.floor(this.#scrollView.getScrollOffset())));
+		const anchor = this.#bodyRowAnchors[topRow];
+		const section = anchor ? this.#sections[anchor.sectionIndex] : undefined;
+		if (!anchor || !section) return [];
+		const entries: AnnotationSelection[] = [];
+		for (const [annotationIndex, annotation] of section.annotations.entries()) {
+			if (this.#annotationMatchesBodyAnchor(annotation, anchor)) {
+				entries.push({ sectionIndex: anchor.sectionIndex, annotationIndex });
+			}
+		}
+		return entries;
+	}
+
+	#editCurrentAnnotation(): void {
+		const entries = this.#annotationCandidates();
+		if (entries.length === 0) return;
+		if (entries.length === 1) {
+			this.#startExistingAnnotation(entries[0]!);
+			return;
+		}
+		this.#annotationChooser = { entries, selected: 0 };
+	}
+
+	#handleAnnotationChooser(data: string): void {
+		const chooser = this.#annotationChooser;
+		if (!chooser) return;
+		if (matchesSelectCancel(data)) {
+			this.#annotationChooser = undefined;
+			return;
+		}
+		if (matchesSelectUp(data) || matchesKey(data, "k")) {
+			chooser.selected = (chooser.selected - 1 + chooser.entries.length) % chooser.entries.length;
+			return;
+		}
+		if (matchesSelectDown(data) || matchesKey(data, "j")) {
+			chooser.selected = (chooser.selected + 1) % chooser.entries.length;
+			return;
+		}
+		if (matchesKey(data, "enter") || matchesKey(data, "return") || data === "\n") {
+			const selection = chooser.entries[chooser.selected];
+			this.#annotationChooser = undefined;
+			if (selection) this.#startExistingAnnotation(selection);
+		}
 	}
 
 	#submitAnnotation(value: string): void {
-		this.#annotating = false;
 		const note = value.trim();
 		const target = this.#annotationTarget;
+		const editing = this.#editingAnnotation;
+		this.#annotating = false;
 		this.#annotationTarget = undefined;
-		const section = target ? this.#sections[target.sectionIndex] : undefined;
-		if (note && section && target) {
+		this.#editingAnnotation = undefined;
+		this.#editor.setText("");
+		if (editing) {
+			const section = this.#sections[editing.sectionIndex];
+			const annotation = section?.annotations[editing.annotationIndex];
+			if (!section || !annotation) return;
 			this.#pushUndo();
-			section.annotations.push({
-				note,
-				target:
-					target.row === null
-						? { kind: "section" }
-						: {
-								kind: "line",
-								row: target.row,
-								context: target.context,
-								contextTruncated: target.contextTruncated,
-							},
-			});
+			if (note) annotation.note = note;
+			else section.annotations.splice(editing.annotationIndex, 1);
 			this.#recomputeFeedback();
+			return;
 		}
-		this.#input.setValue("");
+		if (!note || !target) return;
+		const section = this.#sections[target.sectionIndex];
+		if (!section) return;
+		this.#pushUndo();
+		section.annotations.push({
+			note,
+			target:
+				target.row === null
+					? { kind: "section" }
+					: {
+							kind: "line",
+							row: target.row,
+							context: target.context,
+							contextTruncated: target.contextTruncated,
+						},
+		});
+		this.#recomputeFeedback();
 	}
 
 	#exitAnnotate(): void {
 		this.#annotating = false;
 		this.#annotationTarget = undefined;
-		this.#input.setValue("");
+		this.#editingAnnotation = undefined;
+		this.#editor.setText("");
 	}
 
 	#recomputeFeedback(): void {
@@ -942,10 +1075,10 @@ export class PlanReviewOverlay implements Component {
 				if (this.#slider) parts.push("◂▸ model");
 				break;
 			case "toc":
-				parts.push("↑↓ section", "⏎ open", "a annotate", "d delete", "u undo");
+				parts.push("↑↓ section", "⏎ open", "a annotate", "e edit", "d delete", "u undo");
 				break;
 			case "body":
-				parts.push("↑↓ scroll", "⇧ faster", "pgup/pgdn", "g/G ends", "a annotate");
+				parts.push("↑↓ scroll", "⇧ faster", "pgup/pgdn", "g/G ends", "a annotate", "e edit", "u undo");
 				break;
 		}
 		if (this.callbacks.onCopyPlan) parts.push("c copy");
@@ -1136,8 +1269,39 @@ export class PlanReviewOverlay implements Component {
 		if (glow) return theme.fg("accent", line);
 		return theme.fg("muted", line);
 	}
+	#renderAnnotationChooserLines(innerWidth: number, maxRows = Number.POSITIVE_INFINITY): string[] {
+		const chooser = this.#annotationChooser;
+		if (!chooser || maxRows <= 0) return [];
+		const optionLimit = Number.isFinite(maxRows) ? Math.max(0, Math.floor(maxRows) - 2) : chooser.entries.length;
+		const start =
+			optionLimit >= chooser.entries.length
+				? 0
+				: Math.max(
+						0,
+						Math.min(chooser.selected - Math.floor(optionLimit / 2), chooser.entries.length - optionLimit),
+					);
+		const lines = [theme.bold(theme.fg("accent", "Edit annotation"))];
+		for (let windowIndex = 0; windowIndex < optionLimit; windowIndex++) {
+			const optionIndex = start + windowIndex;
+			const selection = chooser.entries[optionIndex];
+			if (!selection) continue;
+			const section = this.#sections[selection.sectionIndex];
+			const annotation = section?.annotations[selection.annotationIndex];
+			if (!section || !annotation) continue;
+			const target = annotation.target.kind === "section" ? "section" : `line ${annotation.target.context}`;
+			const note = sanitizeStatusText(annotation.note);
+			const marker = optionIndex === chooser.selected ? theme.fg("accent", "› ") : "  ";
+			const label = `${marker}${sanitizeStatusText(section.title || "Plan preamble")} · ${target} · ${note}`;
+			lines.push(truncateToWidth(label, innerWidth, Ellipsis.Unicode));
+		}
+		if (!Number.isFinite(maxRows) || maxRows >= 2) {
+			lines.push(theme.fg("dim", "↑↓ choose · enter edit · esc cancel"));
+		}
+		return lines.slice(0, Math.max(0, Math.floor(maxRows)));
+	}
 
-	#renderFooterLines(innerWidth: number): string[] {
+	#renderFooterLines(innerWidth: number, maxChooserRows = Number.POSITIVE_INFINITY): string[] {
+		if (this.#annotationChooser) return this.#renderAnnotationChooserLines(innerWidth, maxChooserRows);
 		if (this.#annotating) {
 			const target = this.#annotationTarget;
 			const section = target ? this.#sections[target.sectionIndex] : undefined;
@@ -1151,9 +1315,12 @@ export class PlanReviewOverlay implements Component {
 				innerWidth,
 				Ellipsis.Unicode,
 			);
-			const hintParts = ["enter save", "esc cancel"];
+			const hintParts = ["enter save", "shift+enter newline", "esc cancel"];
+			if (this.#editingAnnotation) hintParts.push("empty deletes");
 			if (this.#externalEditorLabel) hintParts.push(`${this.#externalEditorLabel} editor`);
-			return [caption, this.#input.render(innerWidth)[0] ?? "", theme.fg("dim", hintParts.join(" · "))];
+			this.#editor.setMaxHeight(Math.max(1, Math.min(MAX_ANNOTATION_EDITOR_ROWS, (process.stdout.rows || 40) - 12)));
+			this.#editor.focused = true;
+			return [caption, ...this.#editor.render(innerWidth), theme.fg("dim", hintParts.join(" · "))];
 		}
 		return [theme.fg("dim", this.#buildHelp())];
 	}
@@ -1171,14 +1338,20 @@ export class PlanReviewOverlay implements Component {
 		const submittingLabel = this.#committedLabel ? `${this.#committedLabel} — submitting…` : "Submitting…";
 		const optionLines = committed ? [theme.bold(theme.fg("accent", submittingLabel))] : this.#renderOptionLines();
 		const promptLines = this.#promptTitle ? [theme.bold(theme.fg("accent", this.#promptTitle))] : [];
+		const baseChrome = 4 + promptLines.length + sliderLines.length + optionLines.length;
+		const chooserFooterRows = this.#annotationChooser
+			? Math.max(0, termHeight - baseChrome - MIN_BODY_ROWS)
+			: Number.POSITIVE_INFINITY;
 		const footerLines = committed
 			? [theme.fg("dim", "Applying your selection — this can take a moment while context is prepared.")]
-			: this.#renderFooterLines(innerWidth);
+			: this.#renderFooterLines(innerWidth, chooserFooterRows);
 
 		// Chrome rows: top border, two dividers, bottom border, plus the
 		// prompt/slider/option/footer rows between them.
-		const chrome = 4 + promptLines.length + sliderLines.length + optionLines.length + footerLines.length;
-		const regionRows = Math.max(MIN_BODY_ROWS, termHeight - chrome);
+		const chrome = baseChrome + footerLines.length;
+		const regionRows = this.#annotationChooser
+			? Math.max(0, termHeight - chrome)
+			: Math.max(MIN_BODY_ROWS, termHeight - chrome);
 
 		const bodyLines = this.#buildBody(bodyContentWidth);
 		this.#layoutBody(bodyLines, regionRows);

package/src/overlays/settings-defs.ts

@@ -64,6 +64,7 @@ export const TAB_GROUPS: Record<SettingTab, readonly string[]> = {
 		"Power",
 		"Agent",
 		"Git",
+		"Skills",
 	],
 	context: ["General", "Compaction", "Rules (TTSR)", "Experimental"],
 	memory: ["General", "Auto-Learn", "Mnemopi", "Hindsight", "Sharpshooter"],

package/src/overlays/usage-dashboard.ts

@@ -7,7 +7,16 @@
  */
 import * as os from "node:os";
 import { resolveUsedFraction, type UsageLimit, type UsageReport } from "@oh-my-pi/pi-ai";
-import { type Component, matchesKey, replaceTabs, routeSgrMouseInput, truncateToWidth, visibleWidth } from "../index";
+import {
+	type Component,
+	matchesKey,
+	replaceTabs,
+	routeSgrMouseInput,
+	sliceWithWidth,
+	truncateToWidth,
+	visibleWidth,
+	wrapTextWithAnsi,
+} from "../index";
 import { colorLuma, formatDuration, hexToRgb, rgbToHex, sanitizeText } from "@oh-my-pi/pi-utils";
 import { formatProviderName } from "../chrome/format";
 import {
@@ -19,6 +28,8 @@ import {
 import { colorToAnsi } from "../theme/color";
 import { ensureThemeSync, theme } from "../theme/theme";
 import { formatAbsoluteOnlyAmount } from "../prompt/usage-amounts";
+import { truncateMiddleToWidth } from "../render/render-utils";
+import { sanitizeDisplayLine } from "./extensions/display-text";
 import {
 	matchesSelectCancel,
 	matchesSelectDown,
@@ -72,6 +83,8 @@ export interface ProviderCard {
 		soonestExpiryMs?: number;
 		unavailableReasons: string[];
 	};
+	/** Labels of accounts with verified Daybreak access. */
+	daybreakAccounts?: string[];
 }
 
 /**
@@ -191,6 +204,17 @@ export function buildProviderCards(reports: UsageReport[], nowMs: number): Provi
 						unavailableReasons,
 					}
 				: undefined;
+		const daybreakAccounts = providerReports.flatMap((report, index) =>
+			report.metadata?.daybreak === true
+				? [
+						typeof report.metadata.email === "string" && report.metadata.email
+							? report.metadata.email
+							: typeof report.metadata.accountId === "string" && report.metadata.accountId
+								? report.metadata.accountId
+								: `account ${index + 1}`,
+					]
+				: [],
+		);
 		cards.push({
 			provider,
 			name: formatProviderName(provider),
@@ -198,8 +222,11 @@ export function buildProviderCards(reports: UsageReport[], nowMs: number): Provi
 			windows,
 			unlimited: windows.length === 0,
 			idle:
-				!resetCredits && windows.every(window => window.fraction !== undefined && window.fraction < IDLE_FRACTION),
+				!resetCredits &&
+				daybreakAccounts.length === 0 &&
+				windows.every(window => window.fraction !== undefined && window.fraction < IDLE_FRACTION),
 			resetCredits,
+			...(daybreakAccounts.length > 0 ? { daybreakAccounts } : {}),
 		});
 	}
 
@@ -333,6 +360,16 @@ export function formatActivityErrorDetail(error: string, homeDir = os.homedir())
 const CARD_MIN_WIDTH = 32;
 const CARD_GUTTER = 3;
 const CARD_MAX_WINDOWS = 4;
+const CARD_MIN_BAR_WIDTH = 12;
+const CARD_MAX_LABEL_LINES = 2;
+
+interface CardRowLayout {
+	labelWidth: number;
+	resetWidth: number;
+	barWidth: number;
+	stacked: boolean;
+	labelHeights: number[];
+}
 
 export class UsageDashboardComponent implements Component {
 	#options: UsageDashboardOptions;
@@ -423,7 +460,7 @@ export class UsageDashboardComponent implements Component {
 		return `${theme.fg(this.#statusColor(status), bar)}${theme.fg("dim", empty)}`;
 	}
 
-	#renderCardLines(card: ProviderCard, width: number): string[] {
+	#renderCardLines(card: ProviderCard, width: number, labels: string[][], layout: CardRowLayout): string[] {
 		const lines: string[] = [];
 		const cardStatus = card.unlimited ? "ok" : aggregateStatus(card.windows);
 		const accountsText = card.accounts > 1 ? theme.fg("dim", `${card.accounts} accts`) : "";
@@ -432,6 +469,11 @@ export class UsageDashboardComponent implements Component {
 		const titlePad = Math.max(0, width - 2 - visibleWidth(title) - visibleWidth(accountsText));
 		lines.push(`${this.#statusIcon(cardStatus)} ${title}${" ".repeat(titlePad)}${accountsText}`);
 
+		for (const account of card.daybreakAccounts ?? []) {
+			const label = sanitizeText(account.replace(/[\r\n\t]+/g, " "));
+			lines.push(`  ${theme.fg("success", truncateToWidth(`daybreak · ${label}`, width - 2))}`);
+		}
+
 		if (card.resetCredits) {
 			const resets = card.resetCredits;
 			let resetText = `✦ ${resets.bankedCount} reset${resets.bankedCount === 1 ? "" : "s"}`;
@@ -457,35 +499,33 @@ export class UsageDashboardComponent implements Component {
 		}
 
 		const hidden = card.windows.length - CARD_MAX_WINDOWS;
-		const visibleWindows = card.windows.slice(0, CARD_MAX_WINDOWS);
-		// Fixed columns across every row of the card so bars all start and end
-		// at the same x: label | bar | pct | reset. The reset column sizes to
-		// the card's widest countdown instead of flexing per row.
-		const resetWidth = visibleWindows.reduce(
-			(max, window) => Math.max(max, window.resetMs !== undefined ? formatDuration(window.resetMs).length : 0),
-			0,
-		);
-		const labelWidth = Math.min(16, Math.max(6, width - 24));
-		const barWidth = Math.max(5, width - 2 - labelWidth - 1 - 5 - (resetWidth > 0 ? resetWidth + 1 : 0));
-		for (const window of visibleWindows) {
-			const tagPlain = window.windowTag
-				? truncateToWidth(window.windowTag, Math.max(2, Math.floor(labelWidth / 2) - 1))
-				: "";
-			const baseWidth = tagPlain ? labelWidth - visibleWidth(tagPlain) - 1 : labelWidth;
-			const basePlain = truncateToWidth(window.label, baseWidth).padEnd(baseWidth);
-			const label = tagPlain
-				? `${theme.fg("muted", basePlain)} ${theme.fg("dim", tagPlain)}`
-				: theme.fg("muted", basePlain);
+		const { labelWidth, resetWidth, barWidth, stacked, labelHeights } = layout;
+		const contentWidth = Math.max(1, width - 2);
+		for (let index = 0; index < Math.min(card.windows.length, CARD_MAX_WINDOWS); index++) {
+			const window = card.windows[index]!;
+			const labelLines = labels[index]!;
+			const label = labelLines[0] ?? "";
+			const prefix = stacked ? "" : `${label}${" ".repeat(labelWidth - visibleWidth(label))} `;
+			if (stacked) {
+				for (let line = 0; line < labelHeights[index]; line++) {
+					lines.push(`  ${labelLines[line] ?? ""}`);
+				}
+			}
 			if (window.fraction === undefined) {
 				const text = theme.fg("dim", window.usedText ?? "no data");
-				lines.push(truncateToWidth(`  ${label} ${text}`, width));
+				for (const line of wrapTextWithAnsi(`${prefix}${text}`, contentWidth)) lines.push(`  ${line}`);
 				continue;
 			}
 			const freePct = Math.max(0, Math.round((1 - window.fraction) * 100));
 			const pctText = theme.fg(this.#statusColor(window.status), `${freePct}%`.padStart(5));
 			const resetPlain = window.resetMs !== undefined ? formatDuration(window.resetMs) : "";
 			const resetText = resetWidth > 0 ? ` ${theme.fg("dim", resetPlain.padStart(resetWidth))}` : "";
-			lines.push(`  ${label} ${this.#miniBar(window.fraction, window.status, barWidth)}${pctText}${resetText}`);
+			for (const line of wrapTextWithAnsi(
+				`${prefix}${this.#miniBar(window.fraction, window.status, barWidth)}${pctText}${resetText}`,
+				contentWidth,
+			)) {
+				lines.push(`  ${line}`);
+			}
 		}
 		if (hidden > 0) lines.push(`  ${theme.fg("dim", `+${hidden} more`)}`);
 		return lines;
@@ -499,7 +539,62 @@ export class UsageDashboardComponent implements Component {
 		const cardWidth = Math.floor((innerWidth - (columns - 1) * CARD_GUTTER) / columns);
 		const lines: string[] = [];
 		for (let start = 0; start < active.length; start += columns) {
-			const rowCards = active.slice(start, start + columns).map(card => this.#renderCardLines(card, cardWidth));
+			const cards = active.slice(start, start + columns);
+			const windows = cards.map(card => card.windows.slice(0, CARD_MAX_WINDOWS));
+			const labels = windows.map(rows =>
+				rows.map(window => {
+					const label = theme.fg("muted", sanitizeDisplayLine(window.label));
+					const tag = window.windowTag ? sanitizeDisplayLine(window.windowTag) : "";
+					return tag ? `${label} ${theme.fg("dim", tag)}` : label;
+				}),
+			);
+			// One geometry per grid row: labels, bars, and resets share columns,
+			// and every card stacks together when inline bars would be too short.
+			const labelWidth = labels.reduce(
+				(max, rows) => rows.reduce((width, label) => Math.max(width, visibleWidth(label)), max),
+				0,
+			);
+			const resetWidth = windows.reduce(
+				(max, rows) =>
+					rows.reduce(
+						(width, window) =>
+							Math.max(width, window.resetMs !== undefined ? formatDuration(window.resetMs).length : 0),
+						max,
+					),
+				0,
+			);
+			const contentWidth = Math.max(1, cardWidth - 2);
+			const suffixWidth = 5 + (resetWidth > 0 ? resetWidth + 1 : 0);
+			const inlineBarWidth = contentWidth - labelWidth - 1 - suffixWidth;
+			const stacked = inlineBarWidth < CARD_MIN_BAR_WIDTH;
+			const labelLines = labels.map(rows =>
+				rows.map(label => {
+					if (!stacked) return [label];
+					// Bound wrapping work as well as height, keeping the suffix that
+					// distinguishes model-specific quota buckets.
+					const bounded = truncateMiddleToWidth(label, contentWidth * CARD_MAX_LABEL_LINES);
+					const lines = wrapTextWithAnsi(bounded, contentWidth);
+					if (lines.length <= CARD_MAX_LABEL_LINES) return lines;
+					// Word wrapping can waste enough cells to create a third line even
+					// when the label fits. Use a grapheme-safe column split in that case.
+					const first = sliceWithWidth(bounded, 0, contentWidth, true);
+					const rest = sliceWithWidth(bounded, first.width, visibleWidth(bounded) - first.width, true);
+					return [first.text, truncateMiddleToWidth(rest.text, contentWidth)];
+				}),
+			);
+			const labelHeights = Array.from({ length: CARD_MAX_WINDOWS }, (_, index) =>
+				Math.max(0, ...labelLines.map(rows => rows[index]?.length ?? 0)),
+			);
+			const layout: CardRowLayout = {
+				labelWidth,
+				resetWidth,
+				barWidth: Math.max(1, stacked ? contentWidth - suffixWidth : inlineBarWidth),
+				stacked,
+				labelHeights,
+			};
+			const rowCards = cards.map((card, index) =>
+				this.#renderCardLines(card, cardWidth, labelLines[index]!, layout),
+			);
 			const height = Math.max(...rowCards.map(card => card.length));
 			for (let lineIdx = 0; lineIdx < height; lineIdx++) {
 				const segments = rowCards.map(card => {

package/src/prompt/image-source.ts

@@ -1,10 +1,10 @@
 /**
- * Original filesystem source carried on image attachments that entered from a
- * file on disk: path-pasted/drag-and-dropped images and generated video
- * contact-sheet previews. Symbol metadata stays out of serialized/model-bound
- * image data while traveling with the draft object, until AgentSession creates
- * the hidden companion message that tells the model the path (and link
- * materialization prefers it over a blob copy).
+ * File source carried on image attachments backed by a file on disk:
+ * path-pasted/drag-and-dropped images, clipboard images the coding agent commits
+ * to the session's `local://` root, and generated video contact-sheet previews.
+ * Symbol metadata stays out of serialized/model-bound image data while traveling
+ * with the draft object, until AgentSession creates the hidden companion message
+ * that tells the model the path (and link materialization prefers it over a blob copy).
  */
 import type { ImageContent } from "@oh-my-pi/pi-ai";
 import { isRecord } from "@oh-my-pi/pi-utils";
@@ -12,8 +12,9 @@ import { isRecord } from "@oh-my-pi/pi-utils";
 /** How an image attachment's backing file entered the session. */
 export type ImageAttachmentSourceKind = "image" | "video";
 
-/** Original local file backing an image attachment. */
+/** Local file backing an image attachment. */
 export interface ImageAttachmentSource {
+	/** Absolute filesystem path, or a session-relative `local://` URL for images committed to the session. */
 	readonly path: string;
 	readonly kind: ImageAttachmentSourceKind;
 }
@@ -43,7 +44,7 @@ function isImageAttachmentSource(value: unknown): value is ImageAttachmentSource
 	return isRecord(value) && typeof value.path === "string" && (value.kind === "image" || value.kind === "video");
 }
 
-/** Return the original local source of an image attachment, or undefined for payloads with no source file (clipboard bitmaps). */
+/** Return the local file backing an image attachment, or undefined for payloads with no file on disk. */
 export function imageAttachmentSource(image: ImageContent): ImageAttachmentSource | undefined {
 	if (!(kImageAttachmentSource in image)) return undefined;
 	const source = image[kImageAttachmentSource];

package/src/prompt/welcome.ts

@@ -185,10 +185,13 @@ export class WelcomeComponent implements Component {
 		this.#requestRender();
 		this.#animTimer = setInterval(() => {
 			const elapsed = performance.now() - (this.#animStart ?? 0);
+			const requestRender = this.#requestRender;
 			if (elapsed >= INTRO_MS) {
 				this.#stopAnimation();
 			}
-			this.#requestRender?.();
+			// Stopping clears the callback, but the settled frame must still paint
+			// so an oversized startup header can retire into native scrollback.
+			requestRender?.();
 		}, INTRO_TICK_MS);
 	}
 

package/src/render/render-utils.ts

@@ -211,7 +211,7 @@ export function expandKeyHint(): string {
 // Text Truncation Utilities
 // =============================================================================
 /** Keep both ends of a single-line label without splitting wide characters. */
-function truncateMiddleToWidth(text: string, maxWidth: number): string {
+export function truncateMiddleToWidth(text: string, maxWidth: number): string {
 	const width = visibleWidth(text);
 	if (width <= maxWidth) return text;
 	if (maxWidth <= 1) return maxWidth === 1 ? "…" : "";