@oh-my-pi/pi-coding-agent 15.10.10 → 15.10.11

package/src/modes/components/welcome.ts

@@ -17,6 +17,24 @@ const TIPS: readonly string[] = tipsText
 	.map(line => line.trim())
 	.filter(line => line.length > 0);
 
+/**
+ * Tip chosen once per process so the pre-TUI startup splash and the in-TUI
+ * welcome screen show the same tip instead of shuffling on the swap.
+ */
+const PROCESS_TIP: string | undefined = TIPS.length > 0 ? TIPS[Math.floor(Math.random() * TIPS.length)] : undefined;
+
+/**
+ * Fixed number of session rows in the welcome box so its height doesn't shift
+ * between the pre-TUI splash (loading placeholder) and the loaded state.
+ */
+export const WELCOME_SESSION_SLOTS = 4;
+
+/**
+ * Fixed number of LSP-server rows, for the same reason. Overflow is sliced so
+ * the box height is constant regardless of how many servers a project has.
+ */
+export const WELCOME_LSP_SLOTS = 4;
+
 export function renderWelcomeTip(tip: string, boxWidth: number): string[] {
 	const label = "Tip: ";
 	const labelWidth = visibleWidth(label);
@@ -48,7 +66,7 @@ export interface RecentSession {
 
 export interface LspServerInfo {
 	name: string;
-	status: "ready" | "error" | "connecting";
+	status: "ready" | "error" | "connecting" | "available";
 	fileTypes: string[];
 }
 
@@ -58,18 +76,38 @@ export interface LspServerInfo {
 export class WelcomeComponent implements Component {
 	#animStart: number | null = null;
 	#animTimer: ReturnType<typeof setInterval> | null = null;
-	/** Tip chosen once per instance so re-renders (intro, LSP updates) don't shuffle it. */
-	readonly #tip: string | undefined = TIPS.length > 0 ? TIPS[Math.floor(Math.random() * TIPS.length)] : undefined;
+	/** When set, a non-animating render shows the intro's first frame instead of the resting frame. */
+	#holdIntroFirstFrame = false;
+	/** Per-process tip so re-renders (intro, LSP updates, splash swap) don't shuffle it. */
+	readonly #tip: string | undefined = PROCESS_TIP;
+	// Render cache: the welcome box is the first transcript-area component, so
+	// returning a stable array reference keeps the whole frame prefix stable.
+	// Bypassed while the intro animation runs (every frame differs).
+	#cachedWidth = -1;
+	#cachedLines: string[] | undefined;
 
 	constructor(
 		private readonly version: string,
 		private modelName: string,
 		private providerName: string,
-		private recentSessions: RecentSession[] = [],
+		private recentSessions: RecentSession[] | null = [],
 		private lspServers: LspServerInfo[] = [],
 	) {}
 
-	invalidate(): void {}
+	invalidate(): void {
+		this.#cachedWidth = -1;
+		this.#cachedLines = undefined;
+	}
+
+	/**
+	 * Freeze the logo on the intro animation's first frame. The pre-TUI startup
+	 * splash uses this so the in-TUI intro — which starts at that exact frame —
+	 * picks up seamlessly from the splash's static box.
+	 */
+	holdIntroFirstFrame(): void {
+		this.#holdIntroFirstFrame = true;
+		this.invalidate();
+	}
 
 	/**
 	 * Play a one-shot intro that sweeps the gradient through every phase
@@ -78,6 +116,7 @@ export class WelcomeComponent implements Component {
 	 */
 	playIntro(requestRender: () => void): void {
 		this.#stopAnimation();
+		this.#holdIntroFirstFrame = false;
 		this.#animStart = performance.now();
 		requestRender();
 		this.#animTimer = setInterval(() => {
@@ -95,22 +134,43 @@ export class WelcomeComponent implements Component {
 			this.#animTimer = null;
 		}
 		this.#animStart = null;
+		// The settled (resting) frame differs from the last intro frame.
+		this.invalidate();
 	}
 
 	setModel(modelName: string, providerName: string): void {
 		this.modelName = modelName;
 		this.providerName = providerName;
+		this.invalidate();
 	}
 
 	setRecentSessions(sessions: RecentSession[]): void {
 		this.recentSessions = sessions;
+		this.invalidate();
 	}
 
 	setLspServers(servers: LspServerInfo[]): void {
 		this.lspServers = servers;
+		this.invalidate();
 	}
 
-	render(termWidth: number): string[] {
+	render(termWidth: number): readonly string[] {
+		const animating = this.#animStart != null;
+		if (!animating && this.#cachedLines && this.#cachedWidth === termWidth) {
+			return this.#cachedLines;
+		}
+		const lines = this.#renderLines(termWidth);
+		if (animating) {
+			this.#cachedLines = undefined;
+			this.#cachedWidth = -1;
+		} else {
+			this.#cachedLines = lines;
+			this.#cachedWidth = termWidth;
+		}
+		return lines;
+	}
+
+	#renderLines(termWidth: number): string[] {
 		// Box dimensions - responsive with max width and small-terminal support
 		const maxWidth = 100;
 		const boxWidth = Math.min(maxWidth, Math.max(0, termWidth - 2));
@@ -157,7 +217,9 @@ export class WelcomeComponent implements Component {
 
 		// Recent sessions content
 		const sessionLines: string[] = [];
-		if (this.recentSessions.length === 0) {
+		if (this.recentSessions === null) {
+			sessionLines.push(` ${theme.fg("dim", "Loading…")}`);
+		} else if (this.recentSessions.length === 0) {
 			sessionLines.push(` ${theme.fg("dim", "No recent sessions")}`);
 		} else {
 			// Reserve width for the bullet prefix (" • ") and the trailing " (timeAgo)"
@@ -165,7 +227,7 @@ export class WelcomeComponent implements Component {
 			// absorbs whatever space is left.
 			const bulletPrefix = ` ${theme.md.bullet} `;
 			const prefixWidth = visibleWidth(bulletPrefix);
-			for (const session of this.recentSessions.slice(0, 3)) {
+			for (const session of this.recentSessions.slice(0, WELCOME_SESSION_SLOTS)) {
 				const timeSuffixRaw = ` (${session.timeAgo})`;
 				const timeWidth = visibleWidth(timeSuffixRaw);
 				const nameBudget = Math.max(1, rightCol - prefixWidth - timeWidth);
@@ -176,23 +238,33 @@ export class WelcomeComponent implements Component {
 				);
 			}
 		}
+		// Pad to the fixed slot count so the box doesn't grow when sessions load in.
+		while (sessionLines.length < WELCOME_SESSION_SLOTS) {
+			sessionLines.push("");
+		}
 
 		// LSP servers content
 		const lspLines: string[] = [];
 		if (this.lspServers.length === 0) {
 			lspLines.push(` ${theme.fg("dim", "No LSP servers")}`);
 		} else {
-			for (const server of this.lspServers) {
+			for (const server of this.lspServers.slice(0, WELCOME_LSP_SLOTS)) {
 				const icon =
 					server.status === "ready"
 						? theme.styledSymbol("status.enabled", "success")
-						: server.status === "connecting"
-							? theme.styledSymbol("status.pending", "muted")
-							: theme.styledSymbol("status.error", "error");
+						: server.status === "available"
+							? theme.styledSymbol("status.enabled", "dim")
+							: server.status === "connecting"
+								? theme.styledSymbol("status.pending", "muted")
+								: theme.styledSymbol("status.error", "error");
 				const exts = server.fileTypes.slice(0, 3).join(" ");
 				lspLines.push(` ${icon} ${theme.fg("muted", server.name)} ${theme.fg("dim", exts)}`);
 			}
 		}
+		// Pad to the fixed slot count so the box height doesn't depend on server count.
+		while (lspLines.length < WELCOME_LSP_SLOTS) {
+			lspLines.push("");
+		}
 
 		// Right column
 		const rightLines = [
@@ -305,23 +377,12 @@ export class WelcomeComponent implements Component {
 		return str + padding(width - visLen);
 	}
 
-	/** Pick the logo frame for the current intro phase, or the resting frame. */
+	/** Pick the logo frame for the current intro phase, or the resting/held frame. */
 	#currentLogoFrame(): readonly string[] {
-		if (this.#animStart == null) return REST_FRAME;
+		if (this.#animStart == null) return this.#holdIntroFirstFrame ? INTRO_FIRST_FRAME : REST_FRAME;
 		const elapsed = performance.now() - this.#animStart;
 		if (elapsed >= INTRO_MS) return REST_FRAME;
-		// Ease-out cubic so the spin decelerates into the resting state.
-		const progress = elapsed / INTRO_MS;
-		const eased = 1 - (1 - progress) ** 3;
-		// Sweep backward through INTRO_SWEEPS full rotations so the gradient
-		// visibly spins multiple times. `eased == 1` → phase = 0 = resting frame.
-		const phase = ((((1 - eased) * INTRO_SWEEPS) % 1) + 1) % 1;
-		// Shine traverses the diagonal at a steady pace, decoupled from the
-		// gradient phase so the two layers parallax. Strength fades out with
-		// the same ease-out curve so the highlight is gone by the resting frame.
-		const shinePos = (((progress * INTRO_SHINE_TRAVERSALS) % 1) + 1) % 1;
-		const shineStrength = (1 - eased) ** 1.5;
-		return gradientLogo(PI_LOGO, phase, { strength: shineStrength, pos: shinePos });
+		return introLogoFrame(elapsed / INTRO_MS);
 	}
 }
 
@@ -431,5 +492,26 @@ const INTRO_SWEEPS = 2.5;
 /** Number of times the shine highlight crosses the diagonal across the intro. */
 const INTRO_SHINE_TRAVERSALS = 3;
 
+/**
+ * Logo frame for a normalized intro progress in [0, 1).
+ *
+ * Ease-out cubic so the spin decelerates into the resting state. The gradient
+ * sweeps backward through INTRO_SWEEPS full rotations (`eased == 1` → phase =
+ * 0 = resting frame) while the shine traverses the diagonal at a steady pace,
+ * decoupled from the gradient phase so the two layers parallax; its strength
+ * fades with the same ease-out curve so the highlight is gone by the resting
+ * frame.
+ */
+function introLogoFrame(progress: number): string[] {
+	const eased = 1 - (1 - progress) ** 3;
+	const phase = ((((1 - eased) * INTRO_SWEEPS) % 1) + 1) % 1;
+	const shinePos = (((progress * INTRO_SHINE_TRAVERSALS) % 1) + 1) % 1;
+	const shineStrength = (1 - eased) ** 1.5;
+	return gradientLogo(PI_LOGO, phase, { strength: shineStrength, pos: shinePos });
+}
+
+/** First intro frame, cached for splash-held renders (resize re-renders reuse it). */
+const INTRO_FIRST_FRAME = introLogoFrame(0);
+
 /** Resting gradient frame, cached for re-renders outside of the intro. */
 const REST_FRAME = gradientLogo(PI_LOGO, 0);

package/src/modes/controllers/command-controller.ts

@@ -21,6 +21,7 @@ import {
 	loadHindsightConfig,
 	reloadMentalModelsForSession,
 	resolveSeedsForScope,
+	seedAlreadyExists,
 	summarizeMentalModel,
 } from "../../hindsight";
 import { resolveMemoryBackend } from "../../memory-backend";
@@ -314,7 +315,13 @@ export class CommandController {
 			info += `\n${theme.bold("LSP Servers")}\n`;
 			for (const server of this.ctx.lspServers) {
 				const statusColor =
-					server.status === "ready" ? "success" : server.status === "connecting" ? "warning" : "error";
+					server.status === "ready"
+						? "success"
+						: server.status === "available"
+							? "dim"
+							: server.status === "connecting"
+								? "warning"
+								: "error";
 				const statusText =
 					server.status === "error" && server.error ? `${server.status}: ${server.error}` : server.status;
 				info += `${theme.fg("dim", `${server.name}:`)} ${theme.fg(statusColor, statusText)} ${theme.fg("dim", `(${server.fileTypes.join(", ")})`)}\n`;
@@ -712,11 +719,11 @@ export class CommandController {
 				return;
 			}
 			const list = await state.client.listMentalModels(state.bankId, { detail: "metadata" });
-			const existing = new Set((list.items ?? []).map(m => m.id));
+			const existing = list.items ?? [];
 			let created = 0;
 			let skipped = 0;
 			for (const seed of seeds) {
-				if (existing.has(seed.id)) {
+				if (seedAlreadyExists(seed, existing)) {
 					skipped++;
 					continue;
 				}

package/src/modes/controllers/event-controller.ts

@@ -25,6 +25,16 @@ import { StreamingRevealController } from "./streaming-reveal";
 type AgentSessionEventKind = AgentSessionEvent["type"];
 
 const IRC_MESSAGE_VISIBLE_TTL_MS = 10_000;
+/**
+ * Concurrent IRC cards allowed in the transcript's live region. Cards land
+ * below a still-live block (a running task), where they cannot commit to
+ * native scrollback (commits are prefix-only) — every visible card inflates
+ * the live region and pushes the live block's uncommitted rows above the
+ * window top, where they are neither on screen nor in history. A swarm burst
+ * (several agents coordinating at once) must therefore stay bounded: the
+ * oldest live-region card retires as soon as a new one would exceed the cap.
+ */
+const MAX_LIVE_IRC_CARDS = 4;
 
 /**
  * Loader label shown the instant a user interrupt (Esc) is requested, kept until
@@ -64,6 +74,9 @@ export class EventController {
 	#pinnedErrorComponent: AssistantMessageComponent | undefined = undefined;
 	#idleCompactionTimer?: NodeJS.Timeout;
 	#ircExpiryTimers = new Map<string, NodeJS.Timeout>();
+	// Insertion-ordered IRC cards not yet retired; values are the transcript
+	// components each card contributed (see #retireIrcCard for the guard).
+	#liveIrcCards = new Map<string, Component[]>();
 	#streamingReveal: StreamingRevealController;
 	#handlers: AgentSessionEventHandlers;
 
@@ -111,6 +124,7 @@ export class EventController {
 			clearTimeout(timer);
 		}
 		this.#ircExpiryTimers.clear();
+		this.#liveIrcCards.clear();
 	}
 
 	#resetReadGroup(): void {
@@ -324,6 +338,7 @@ export class EventController {
 		this.#resetReadGroup();
 		const components = this.ctx.addMessageToChat(event.message);
 		this.#scheduleIrcExpiry(signature, components);
+		this.#enforceIrcCardCap(signature);
 		this.ctx.ui.requestRender();
 	}
 
@@ -331,13 +346,47 @@ export class EventController {
 		if (components.length === 0 || this.#ircExpiryTimers.has(signature)) return;
 		const timer = setTimeout(() => {
 			this.#ircExpiryTimers.delete(signature);
-			for (const component of components) {
-				this.ctx.chatContainer.removeChild(component);
-			}
-			this.ctx.ui.requestRender();
+			this.#retireIrcCard(signature);
 		}, IRC_MESSAGE_VISIBLE_TTL_MS);
 		timer.unref?.();
 		this.#ircExpiryTimers.set(signature, timer);
+		this.#liveIrcCards.set(signature, components);
+	}
+
+	/**
+	 * Remove an expired/evicted IRC card — but only while it still sits below a
+	 * live block, where its rows cannot have entered native scrollback. Once
+	 * everything above it has finalized, its rows may already be committed;
+	 * removing them then is an interior deletion of the committed prefix, which
+	 * the engine can only repair by recommitting every row below the gap —
+	 * exactly the duplicated-block artifact this guard exists to prevent. Such
+	 * a card simply stays: it is final history, and the window scrolls past it.
+	 */
+	#retireIrcCard(signature: string): void {
+		const components = this.#liveIrcCards.get(signature);
+		this.#liveIrcCards.delete(signature);
+		if (!components) return;
+		let removed = false;
+		for (const component of components) {
+			if (!this.ctx.chatContainer.isWithinLiveRegion(component)) continue;
+			this.ctx.chatContainer.removeChild(component);
+			removed = true;
+		}
+		if (removed) this.ctx.ui.requestRender();
+	}
+
+	/** Evict oldest live-region cards beyond {@link MAX_LIVE_IRC_CARDS}. */
+	#enforceIrcCardCap(latestSignature: string): void {
+		while (this.#liveIrcCards.size > MAX_LIVE_IRC_CARDS) {
+			const oldest = this.#liveIrcCards.keys().next().value;
+			if (oldest === undefined || oldest === latestSignature) return;
+			const timer = this.#ircExpiryTimers.get(oldest);
+			if (timer) {
+				clearTimeout(timer);
+				this.#ircExpiryTimers.delete(oldest);
+			}
+			this.#retireIrcCard(oldest);
+		}
 	}
 
 	async #handleNotice(event: Extract<AgentSessionEvent, { type: "notice" }>): Promise<void> {
@@ -365,6 +414,26 @@ export class EventController {
 				this.#resetReadGroup();
 				this.#lastVisibleBlockCount = visibleBlockCount;
 			}
+
+			// Content blocks stream sequentially: a toolCall block can only begin
+			// after every preceding thinking/text block has closed, and the
+			// reveal's setTarget above force-completes the visible text for
+			// toolCall messages. Finalize the assistant block now instead of at
+			// message_end so the transcript's commit-safe run can extend through
+			// it into the streaming tool preview below — otherwise a long args
+			// stream (a big write/edit/eval) sits below a still-live block and
+			// can never reach native scrollback: the head of the preview is
+			// neither committed nor on screen and the transcript reads as cut.
+			// Skipped when the per-turn usage row is enabled: that row is only
+			// known at message_end and appends to this block, which would shift
+			// committed tool rows below it every turn (audit recommit →
+			// duplicated preview copies in scrollback).
+			if (
+				this.ctx.streamingMessage.content.some(content => content.type === "toolCall") &&
+				!settings.get("display.showTokenUsage")
+			) {
+				this.ctx.streamingComponent.markTranscriptBlockFinalized();
+			}
 			for (const content of this.ctx.streamingMessage.content) {
 				if (content.type !== "toolCall") continue;
 				if (content.name === "read") {

package/src/modes/controllers/input-controller.ts

@@ -2,7 +2,7 @@ import * as fs from "node:fs/promises";
 import type { ImageContent } from "@oh-my-pi/pi-ai";
 import type { AutocompleteProvider, SlashCommand } from "@oh-my-pi/pi-tui";
 import { $env, logger, sanitizeText } from "@oh-my-pi/pi-utils";
-import { getRoleInfo } from "../../config/model-registry";
+import { getRoleInfo } from "../../config/model-roles";
 import { isSettingsInitialized, settings } from "../../config/settings";
 import { renderSegmentTrack } from "../../modes/components/segment-track";
 import { TinyTitleDownloadProgressComponent } from "../../modes/components/tiny-title-download-progress";

package/src/modes/controllers/mcp-command-controller.ts

@@ -62,7 +62,7 @@ export class MCPAuthorizationLinkPrompt implements Component {
 
 	invalidate(): void {}
 
-	render(_width: number): string[] {
+	render(_width: number): readonly string[] {
 		const link = urlHyperlinkAlways(this.#url, "Click here to authorize");
 		return [
 			` ${theme.fg("success", "Open authorization URL:")}`,

package/src/modes/controllers/selector-controller.ts

@@ -5,8 +5,8 @@ import type { OAuthProvider } from "@oh-my-pi/pi-ai/oauth/types";
 import type { Component, OverlayHandle } from "@oh-my-pi/pi-tui";
 import { Input, Loader, Spacer, Text } from "@oh-my-pi/pi-tui";
 import { getAgentDbPath, getProjectDir, normalizePathForComparison } from "@oh-my-pi/pi-utils";
-import { getRoleInfo } from "../../config/model-registry";
 import { formatModelSelectorValue } from "../../config/model-resolver";
+import { getRoleInfo } from "../../config/model-roles";
 import { settings } from "../../config/settings";
 import { disableProvider, enableProvider } from "../../discovery";
 import { clearPluginRootsAndCaches, resolveActiveProjectRegistryPath } from "../../discovery/helpers";

package/src/modes/controllers/streaming-reveal.ts

@@ -23,6 +23,45 @@ function countGraphemes(text: string): number {
 	return count;
 }
 
+/** Count graphemes of `text` from code-unit offset `start`, also reporting the
+ *  start offset of the final grapheme (where an append could extend a cluster). */
+function countGraphemesFrom(text: string, start: number): { count: number; tailStart: number } {
+	let count = 0;
+	let tailStart = start;
+	for (const seg of getSegmenter().segment(start === 0 ? text : text.slice(start))) {
+		count += 1;
+		tailStart = start + seg.index;
+	}
+	return { count, tailStart };
+}
+
+/** Memoizes per-block grapheme counts across reveal ticks. Streaming blocks only
+ *  grow by appending, and an append can only alter the final grapheme cluster of
+ *  the previous text, so only the suffix from that cluster needs re-segmenting. */
+class BlockUnitCounter {
+	#entries = new Map<number, { text: string; count: number; tailStart: number }>();
+
+	count(index: number, text: string): number {
+		const entry = this.#entries.get(index);
+		if (entry !== undefined) {
+			if (entry.text === text) return entry.count;
+			if (entry.count > 0 && text.length > entry.text.length && text.startsWith(entry.text)) {
+				const tail = countGraphemesFrom(text, entry.tailStart);
+				const next = { text, count: entry.count - 1 + tail.count, tailStart: tail.tailStart };
+				this.#entries.set(index, next);
+				return next.count;
+			}
+		}
+		const full = countGraphemesFrom(text, 0);
+		this.#entries.set(index, { text, count: full.count, tailStart: full.tailStart });
+		return full.count;
+	}
+
+	reset(): void {
+		this.#entries.clear();
+	}
+}
+
 function sliceGraphemes(text: string, units: number): string {
 	if (units <= 0 || text.length === 0) return "";
 	let count = 0;
@@ -51,9 +90,9 @@ export function visibleUnits(message: AssistantMessage, hideThinking: boolean):
 function revealTextBlock(
 	block: Extract<AssistantContentBlock, { type: "text" }>,
 	remaining: number,
+	units: number,
 ): AssistantContentBlock {
 	if (remaining <= 0) return block.text.length === 0 ? block : { ...block, text: "" };
-	const units = countGraphemes(block.text);
 	if (remaining >= units) return block;
 	return { ...block, text: sliceGraphemes(block.text, remaining) };
 }
@@ -61,9 +100,9 @@ function revealTextBlock(
 function revealThinkingBlock(
 	block: Extract<AssistantContentBlock, { type: "thinking" }>,
 	remaining: number,
+	units: number,
 ): AssistantContentBlock {
 	if (remaining <= 0) return block.thinking.length === 0 ? block : { ...block, thinking: "" };
-	const units = countGraphemes(block.thinking);
 	if (remaining >= units) return block;
 	return { ...block, thinking: sliceGraphemes(block.thinking, remaining) };
 }
@@ -72,16 +111,20 @@ export function buildDisplayMessage(
 	target: AssistantMessage,
 	revealed: number,
 	hideThinking: boolean,
+	countOf: (index: number, text: string) => number = (_index, text) => countGraphemes(text),
 ): AssistantMessage {
 	let remaining = Math.max(0, Math.floor(revealed));
 	const content: AssistantContentBlock[] = [];
-	for (const block of target.content) {
+	for (let i = 0; i < target.content.length; i++) {
+		const block = target.content[i]!;
 		if (block.type === "text") {
-			content.push(revealTextBlock(block, remaining));
-			remaining = Math.max(0, remaining - countGraphemes(block.text));
+			const units = countOf(i, block.text);
+			content.push(revealTextBlock(block, remaining, units));
+			remaining = Math.max(0, remaining - units);
 		} else if (block.type === "thinking" && !hideThinking) {
-			content.push(revealThinkingBlock(block, remaining));
-			remaining = Math.max(0, remaining - countGraphemes(block.thinking));
+			const units = countOf(i, block.thinking);
+			content.push(revealThinkingBlock(block, remaining, units));
+			remaining = Math.max(0, remaining - units);
 		} else {
 			content.push(block);
 		}
@@ -103,6 +146,8 @@ export class StreamingRevealController {
 	#revealed = 0;
 	#hideThinkingBlock = false;
 	#smoothStreaming = true;
+	readonly #unitCounter = new BlockUnitCounter();
+	readonly #countOf = (index: number, text: string): number => this.#unitCounter.count(index, text);
 
 	constructor(options: StreamingRevealControllerOptions) {
 		this.#getSmoothStreaming = options.getSmoothStreaming;
@@ -121,15 +166,15 @@ export class StreamingRevealController {
 			component.updateContent(message);
 			return;
 		}
-		const total = visibleUnits(message, this.#hideThinkingBlock);
+		const total = this.#visibleUnits(message);
 		if (message.content.some(block => block.type === "toolCall")) {
 			// A tool call is a transcript-order boundary: finish any leading
 			// assistant text before EventController renders the separate tool card.
 			this.#revealed = total;
-			component.updateContent(buildDisplayMessage(message, this.#revealed, this.#hideThinkingBlock));
+			component.updateContent(buildDisplayMessage(message, this.#revealed, this.#hideThinkingBlock, this.#countOf));
 			return;
 		}
-		this.#renderCurrent();
+		this.#renderCurrent(total);
 		this.#syncTimer(total);
 	}
 
@@ -140,19 +185,21 @@ export class StreamingRevealController {
 			this.#component.updateContent(message);
 			return;
 		}
-		const total = visibleUnits(message, this.#hideThinkingBlock);
+		const total = this.#visibleUnits(message);
 		if (message.content.some(block => block.type === "toolCall")) {
 			// A tool call is a transcript-order boundary: finish any leading
 			// assistant text before EventController renders the separate tool card.
 			this.#revealed = total;
 			this.#stopTimer();
-			this.#component.updateContent(buildDisplayMessage(message, this.#revealed, this.#hideThinkingBlock));
+			this.#component.updateContent(
+				buildDisplayMessage(message, this.#revealed, this.#hideThinkingBlock, this.#countOf),
+			);
 			return;
 		}
 		if (this.#revealed > total) {
 			this.#revealed = total;
 		}
-		this.#renderCurrent();
+		this.#renderCurrent(total);
 		this.#syncTimer(total);
 	}
 
@@ -161,14 +208,32 @@ export class StreamingRevealController {
 		this.#target = undefined;
 		this.#component = undefined;
 		this.#revealed = 0;
+		this.#unitCounter.reset();
+	}
+
+	/** Total reveal units of `message`, memoized per block across ticks. */
+	#visibleUnits(message: AssistantMessage): number {
+		let total = 0;
+		for (let i = 0; i < message.content.length; i++) {
+			const block = message.content[i]!;
+			if (block.type === "text") {
+				total += this.#unitCounter.count(i, block.text);
+			} else if (block.type === "thinking" && !this.#hideThinkingBlock) {
+				total += this.#unitCounter.count(i, block.thinking);
+			}
+		}
+		return total;
 	}
 
-	#renderCurrent(): void {
+	#renderCurrent(total = this.#target ? this.#visibleUnits(this.#target) : 0): void {
 		if (!this.#target || !this.#component) return;
-		this.#component.updateContent(buildDisplayMessage(this.#target, this.#revealed, this.#hideThinkingBlock));
+		this.#component.updateContent(
+			buildDisplayMessage(this.#target, this.#revealed, this.#hideThinkingBlock, this.#countOf),
+			{ transient: this.#revealed < total },
+		);
 	}
 
-	#syncTimer(total = this.#target ? visibleUnits(this.#target, this.#hideThinkingBlock) : 0): void {
+	#syncTimer(total = this.#target ? this.#visibleUnits(this.#target) : 0): void {
 		if (!this.#target || !this.#component || this.#revealed >= total) {
 			this.#stopTimer();
 			return;
@@ -197,13 +262,15 @@ export class StreamingRevealController {
 			this.stop();
 			return;
 		}
-		const total = visibleUnits(target, this.#hideThinkingBlock);
+		const total = this.#visibleUnits(target);
 		if (this.#revealed >= total) {
 			this.#stopTimer();
 			return;
 		}
 		this.#revealed = Math.min(total, this.#revealed + nextStep(total - this.#revealed));
-		component.updateContent(buildDisplayMessage(target, this.#revealed, this.#hideThinkingBlock));
+		component.updateContent(buildDisplayMessage(target, this.#revealed, this.#hideThinkingBlock, this.#countOf), {
+			transient: this.#revealed < total,
+		});
 		this.#requestRender();
 		if (this.#revealed >= total) {
 			this.#stopTimer();

package/src/modes/interactive-mode.ts

@@ -12,14 +12,8 @@ import {
 	ThinkingLevel,
 } from "@oh-my-pi/pi-agent-core";
 import type { CompactionOutcome } from "@oh-my-pi/pi-agent-core/compaction";
-import {
-	type AssistantMessage,
-	type ImageContent,
-	type Message,
-	type Model,
-	modelsAreEqual,
-	type UsageReport,
-} from "@oh-my-pi/pi-ai";
+import type { AssistantMessage, ImageContent, Message, Model, UsageReport } from "@oh-my-pi/pi-ai";
+import { modelsAreEqual } from "@oh-my-pi/pi-catalog/models";
 import type { Component, EditorTheme, LoaderMessageColorFn, OverlayHandle, SlashCommand } from "@oh-my-pi/pi-tui";
 import {
 	Container,
@@ -49,7 +43,7 @@ import {
 import chalk from "chalk";
 import { reset as resetCapabilities } from "../capability";
 import { KeybindingsManager } from "../config/keybindings";
-import { MODEL_ROLES, type ModelRole } from "../config/model-registry";
+import { MODEL_ROLES, type ModelRole } from "../config/model-roles";
 import { isSettingsInitialized, onStatusLineSessionAccentChanged, Settings, settings } from "../config/settings";
 import { clearClaudePluginRootsCache } from "../discovery/helpers";
 import type {

package/src/modes/setup-wizard/scenes/glyph.ts

@@ -60,7 +60,7 @@ class GlyphSceneController implements SetupSceneController {
 		this.#selectList.handleInput(data);
 	}
 
-	render(width: number): string[] {
+	render(width: number): readonly string[] {
 		return [
 			theme.fg("muted", "If a row shows boxes, tofu, or misaligned icons, pick another."),
 			"",

package/src/modes/setup-wizard/scenes/providers.ts

@@ -52,7 +52,7 @@ class ProvidersSceneController implements SetupSceneController {
 		tab.handleInput(data);
 	}
 
-	render(width: number): string[] {
+	render(width: number): readonly string[] {
 		return [...this.#tabBar.render(width), "", ...this.#activeTab().render(width)];
 	}