@oh-my-pi/pi-coding-agent 15.5.13 → 15.6.0

package/src/modes/components/status-line/segments.ts

@@ -7,7 +7,7 @@ import { type ThemeColor, theme } from "../../../modes/theme/theme";
 import { shortenPath } from "../../../tools/render-utils";
 import { getSessionAccentAnsi, getSessionAccentHex } from "../../../utils/session-color";
 import { sanitizeStatusText } from "../../shared";
-import { getContextUsageLevel, getContextUsageThemeColor } from "./context-thresholds";
+import { formatContextUsage, getContextUsageLevel, getContextUsageThemeColor } from "./context-thresholds";
 import type { RenderedSegment, SegmentContext, StatusLineSegment, StatusLineSegmentId } from "./types";
 
 export type { SegmentContext } from "./types";
@@ -350,7 +350,7 @@ const contextPctSegment: StatusLineSegment = {
 		const window = ctx.contextWindow;
 
 		const autoIcon = ctx.autoCompactEnabled && theme.icon.auto ? ` ${theme.icon.auto}` : "";
-		const text = `${pct.toFixed(1)}%/${formatNumber(window)}${autoIcon}`;
+		const text = `${formatContextUsage(pct, window)}${autoIcon}`;
 
 		const color = getContextUsageThemeColor(getContextUsageLevel(pct, window));
 		const content = withIcon(theme.icon.context, theme.fg(color, text));
@@ -448,6 +448,28 @@ const cacheWriteSegment: StatusLineSegment = {
 	},
 };
 
+const cacheHitSegment: StatusLineSegment = {
+	id: "cache_hit",
+	render(ctx) {
+		const { cacheRead, cacheWrite, input } = ctx.usageStats;
+		if (!cacheRead) return { content: "", visible: false };
+
+		// Hit rate = cacheRead / total prompt tokens. The prompt is the sum of
+		// cacheRead (served from cache), cacheWrite (newly cached this turn) and
+		// input (uncached). Including uncached input keeps the denominator honest
+		// for Anthropic/OpenRouter; DeepSeek reports its miss as input with
+		// cacheWrite 0, so this still yields hit/(hit+miss).
+		const total = cacheRead + cacheWrite + input;
+
+		const rate = (cacheRead / total) * 100;
+		const rateStr = rate.toFixed(2);
+
+		const parts: string[] = [theme.icon.cache];
+		parts.push(theme.fg("statusLineSpend", `${rateStr}%`));
+		return { content: parts.join(" "), visible: true };
+	},
+};
+
 const sessionNameSegment: StatusLineSegment = {
 	id: "session_name",
 	render(ctx) {
@@ -537,6 +559,7 @@ export const SEGMENTS: Record<StatusLineSegmentId, StatusLineSegment> = {
 	hostname: hostnameSegment,
 	cache_read: cacheReadSegment,
 	cache_write: cacheWriteSegment,
+	cache_hit: cacheHitSegment,
 	session_name: sessionNameSegment,
 	usage: usageSegment,
 };

package/src/modes/components/tiny-title-download-progress.ts

@@ -0,0 +1,90 @@
+import { type Component, truncateToWidth, visibleWidth } from "@oh-my-pi/pi-tui";
+import { formatBytes } from "@oh-my-pi/pi-utils";
+import { getTinyTitleModelSpec, type TinyTitleLocalModelKey } from "../../tiny/models";
+import type { TinyTitleProgressEvent } from "../../tiny/title-protocol";
+import { theme } from "../theme/theme";
+
+const DEFAULT_BAR_WIDTH = 24;
+
+function padLine(line: string, width: number): string {
+	const visible = visibleWidth(line);
+	return visible >= width ? truncateToWidth(line, width) : `${line}${" ".repeat(width - visible)}`;
+}
+
+function progressBar(progress: number | undefined, width: number): string {
+	const barWidth = Math.max(8, Math.min(DEFAULT_BAR_WIDTH, width));
+	if (progress === undefined) return theme.fg("muted", "░".repeat(barWidth));
+	const ratio = Math.max(0, Math.min(1, progress / 100));
+	const filled = Math.round(ratio * barWidth);
+	return `${theme.fg("accent", "█".repeat(filled))}${theme.fg("muted", "░".repeat(barWidth - filled))}`;
+}
+
+function currentFile(event: TinyTitleProgressEvent | undefined): string | undefined {
+	if (!event) return undefined;
+	if (event.file) return event.file.split("/").at(-1) ?? event.file;
+	if (event.files) {
+		let largestFile: string | undefined;
+		let largestLoaded = -1;
+		for (const file in event.files) {
+			const state = event.files[file];
+			if (state.loaded <= largestLoaded || state.loaded >= state.total) continue;
+			largestFile = file;
+			largestLoaded = state.loaded;
+		}
+		return largestFile?.split("/").at(-1) ?? largestFile;
+	}
+	return undefined;
+}
+
+function statusLabel(event: TinyTitleProgressEvent | undefined): string {
+	if (!event) return "Preparing";
+	if (event.status === "error") return "Failed";
+	if (event.status === "ready") return "Ready";
+	if (event.status === "done") return "Downloaded";
+	if (event.status === "download") return "Downloading";
+	if (event.status === "progress" || event.status === "progress_total") return "Downloading";
+	return "Preparing";
+}
+
+function byteLabel(event: TinyTitleProgressEvent | undefined): string | undefined {
+	if (!event?.loaded || !event.total) return undefined;
+	return `${formatBytes(event.loaded)} / ${formatBytes(event.total)}`;
+}
+
+export class TinyTitleDownloadProgressComponent implements Component {
+	#modelKey: TinyTitleLocalModelKey;
+	#event: TinyTitleProgressEvent | undefined;
+
+	constructor(modelKey: TinyTitleLocalModelKey) {
+		this.#modelKey = modelKey;
+	}
+
+	update(event: TinyTitleProgressEvent): void {
+		this.#event = event;
+	}
+
+	isComplete(): boolean {
+		return this.#event?.status === "ready" || this.#event?.status === "error";
+	}
+
+	invalidate(): void {
+		// No cached state.
+	}
+
+	render(width: number): string[] {
+		width = Math.max(1, width);
+		const spec = getTinyTitleModelSpec(this.#modelKey);
+		const border = theme.fg("border", theme.boxSharp.horizontal.repeat(width));
+		const status = statusLabel(this.#event);
+		const file = currentFile(this.#event);
+		const pct =
+			this.#event?.progress === undefined ? "" : `${Math.floor(this.#event.progress).toString().padStart(3, " ")}%`;
+		const bytes = byteLabel(this.#event);
+		const title = `${theme.fg("accent", "Tiny model")} ${theme.fg("muted", status)} ${spec.label}`;
+		const details = [progressBar(this.#event?.progress, Math.max(8, width - 36)), pct, bytes, file]
+			.filter((part): part is string => Boolean(part))
+			.join(" ");
+
+		return [border, padLine(` ${title}`, width), padLine(` ${details}`, width), border];
+	}
+}

package/src/modes/components/tips.txt

@@ -0,0 +1,12 @@
+Tired of typing "keep going"? Just send a '.'
+You can /btw to ask a side question
+Ctrl+D can be used to exit, but with your draft saved!
+Find out which model you emotionally abuse the most with `omp stats`
+Try task isolation to create CoW worktrees
+Your LLM can call an LLM using `llm(x...)`. Have a big batch of tasks? Ask clanker to use it!
+Next time you see spaghet try: "omp, create a TTSR rule that will prevent this pattern, use omp://"
+Did you know? Each kitty/tmux split keeps its own session — `omp -c` resumes the right one
+Drop the word `ultrathink` in your message for harder multi-step reasoning — watch it glow rainbow as you type
+Say `orchestrate` in your message to drive a multi-phase task with parallel subagents — watch it glow as you type
+Log in to several accounts of the same provider — `/login` again — and omp load-balances across them automatically
+Run `omp auth-broker serve` once and every machine pulls live tokens over the wire — refresh keys never leave the host; `omp auth-gateway` fronts it as a drop-in proxy any OpenAI-compatible client can hit

package/src/modes/components/tool-execution.ts

@@ -31,6 +31,7 @@ import {
 } from "../../tools/json-tree";
 import { formatExpandHint, replaceTabs, resolveImageOptions, truncateToWidth } from "../../tools/render-utils";
 import { toolRenderers } from "../../tools/renderers";
+import { TODO_WRITE_STRIKE_TOTAL_FRAMES } from "../../tools/todo-write";
 import { renderStatusLine } from "../../tui";
 import { sanitizeWithOptionalSixelPassthrough } from "../../utils/sixel";
 import { renderDiff } from "./diff";
@@ -163,6 +164,8 @@ export class ToolExecutionComponent extends Container {
 	// Spinner animation for partial task results
 	#spinnerFrame?: number;
 	#spinnerInterval?: NodeJS.Timeout;
+	// Todo write completion strikethrough reveal animation
+	#todoStrikeInterval?: NodeJS.Timeout;
 	// Track if args are still being streamed (for edit/write spinner)
 	#argsComplete = false;
 	#renderState: {
@@ -251,12 +254,24 @@ export class ToolExecutionComponent extends Container {
 			effectiveArgs = args;
 		}
 
-		// Coalesce duplicate computes for identical args.
+		// Coalesce duplicate computes for identical args. The key pairs the
+		// streaming flag with a content hash: the final (args-complete) pass
+		// computes an untrimmed diff and must run even when the payload is
+		// byte-identical to the last streamed chunk — only `isStreaming` differs,
+		// and it flips the trailing-line trim. Without the flag a single-line edit
+		// whose trailing payload line never gets a newline stays stuck on the
+		// trimmed "no changes" streaming preview and renders no diff. Hashing keeps
+		// the retained key tiny instead of holding the whole serialized blob.
+		const streamingState = this.#argsComplete ? "final" : "stream";
 		let argsKey: string;
 		try {
-			argsKey = JSON.stringify(effectiveArgs);
+			argsKey = `${streamingState}:${Bun.hash(JSON.stringify(effectiveArgs))}`;
 		} catch {
-			argsKey = String(Date.now());
+			// effectiveArgs isn't JSON-serializable (exotic value in tool args).
+			// The raw streamed JSON is a plain string, so hash that instead of a
+			// timestamp — a deterministic key keeps the dedup cache working
+			// instead of recomputing (and re-reading the file) on every render.
+			argsKey = `${streamingState}:partial:${Bun.hash(partialJson ?? "")}`;
 		}
 		if (argsKey === this.#editDiffLastArgsKey) return;
 		this.#editDiffLastArgsKey = argsKey;
@@ -304,6 +319,7 @@ export class ToolExecutionComponent extends Container {
 			this.#argsComplete = true;
 		}
 		this.#updateSpinnerAnimation();
+		this.#updateTodoStrikeAnimation();
 		this.#updateDisplay();
 		// Convert non-PNG images to PNG for Kitty protocol (async)
 		this.#maybeConvertImagesForKitty();
@@ -379,6 +395,43 @@ export class ToolExecutionComponent extends Container {
 		}
 	}
 
+	#updateTodoStrikeAnimation(): void {
+		if (this.#toolName !== "todo_write" || this.#isPartial || this.#result?.isError) {
+			this.#stopTodoStrikeAnimation();
+			return;
+		}
+		const completedTasks = (this.#result?.details as { completedTasks?: unknown[] } | undefined)?.completedTasks;
+		if (!completedTasks || completedTasks.length === 0) {
+			this.#stopTodoStrikeAnimation();
+			return;
+		}
+		if (this.#todoStrikeInterval) return;
+
+		this.#spinnerFrame = 0;
+		this.#renderState.spinnerFrame = 0;
+		this.#todoStrikeInterval = setInterval(() => {
+			const nextFrame = (this.#spinnerFrame ?? 0) + 1;
+			if (nextFrame > TODO_WRITE_STRIKE_TOTAL_FRAMES) {
+				this.#stopTodoStrikeAnimation();
+			} else {
+				this.#spinnerFrame = nextFrame;
+				this.#renderState.spinnerFrame = nextFrame;
+			}
+			this.#ui.requestRender();
+		}, 65);
+	}
+
+	#stopTodoStrikeAnimation(): void {
+		if (this.#todoStrikeInterval) {
+			clearInterval(this.#todoStrikeInterval);
+			this.#todoStrikeInterval = undefined;
+		}
+		if (!this.#spinnerInterval) {
+			this.#spinnerFrame = undefined;
+			this.#renderState.spinnerFrame = undefined;
+		}
+	}
+
 	/**
 	 * Stop spinner animation and cleanup resources.
 	 */
@@ -388,6 +441,7 @@ export class ToolExecutionComponent extends Container {
 			this.#spinnerInterval = undefined;
 			this.#spinnerFrame = undefined;
 		}
+		this.#stopTodoStrikeAnimation();
 		this.#editDiffAbort?.abort();
 		this.#editDiffAbort = undefined;
 	}
@@ -428,6 +482,11 @@ export class ToolExecutionComponent extends Container {
 			const inline = Boolean((tool as { inline?: boolean }).inline);
 			this.#contentBox.setBgFn(inline ? undefined : bgFn);
 			this.#contentBox.clear();
+			// Mirror the built-in renderer branch so custom renderers (notably the
+			// task tool, whose live instance routes through here) receive the same
+			// render context — e.g. the `hasResult` flag that suppresses the task
+			// call preview once result lines exist.
+			this.#renderState.renderContext = this.#buildRenderContext();
 
 			// Render call component
 			const shouldRenderCall = !this.#result || !mergeCallAndResult;
@@ -696,6 +755,11 @@ export class ToolExecutionComponent extends Container {
 			context.output = output;
 			context.expanded = this.#expanded;
 			context.previewLines = EVAL_DEFAULT_PREVIEW_LINES;
+		} else if (this.#toolName === "task") {
+			// Once a result snapshot exists the task renderer's `renderResult`
+			// draws every dispatched agent as a progress/result line, so tell
+			// `renderCall` to drop its duplicate streaming preview list.
+			context.hasResult = Boolean(this.#result);
 		} else if (isEditLikeToolName(this.#toolName)) {
 			context.editMode = this.#editMode;
 			const previews = this.#editDiffPreview;

package/src/modes/components/tree-selector.ts

@@ -12,7 +12,7 @@ import {
 } from "@oh-my-pi/pi-tui";
 import type { TreeFilterMode } from "../../config/settings-schema";
 import { theme } from "../../modes/theme/theme";
-import { matchesAppInterrupt } from "../../modes/utils/keybinding-matchers";
+import { matchesAppInterrupt, matchesSelectDown, matchesSelectUp } from "../../modes/utils/keybinding-matchers";
 import type { SessionTreeNode } from "../../session/session-manager";
 import { shortenPath } from "../../tools/render-utils";
 import { toPathList } from "../../tools/search";
@@ -718,9 +718,9 @@ class TreeList implements Component {
 	}
 
 	handleInput(keyData: string): void {
-		if (matchesKey(keyData, "up")) {
+		if (matchesSelectUp(keyData)) {
 			this.#selectedIndex = this.#selectedIndex === 0 ? this.#filteredNodes.length - 1 : this.#selectedIndex - 1;
-		} else if (matchesKey(keyData, "down")) {
+		} else if (matchesSelectDown(keyData)) {
 			this.#selectedIndex = this.#selectedIndex === this.#filteredNodes.length - 1 ? 0 : this.#selectedIndex + 1;
 		} else if (matchesKey(keyData, "left")) {
 			// Page up

package/src/modes/components/user-message-selector.ts

@@ -1,6 +1,6 @@
 import { type Component, Container, matchesKey, Spacer, Text, truncateToWidth } from "@oh-my-pi/pi-tui";
 import { theme } from "../../modes/theme/theme";
-import { matchesSelectCancel } from "../../modes/utils/keybinding-matchers";
+import { matchesSelectCancel, matchesSelectDown, matchesSelectUp } from "../../modes/utils/keybinding-matchers";
 import { DynamicBorder } from "./dynamic-border";
 
 interface UserMessageItem {
@@ -78,11 +78,11 @@ class UserMessageList implements Component {
 
 	handleInput(keyData: string): void {
 		// Up arrow - go to previous (older) message, wrap to bottom when at top
-		if (matchesKey(keyData, "up")) {
+		if (matchesSelectUp(keyData)) {
 			this.#selectedIndex = this.#selectedIndex === 0 ? this.messages.length - 1 : this.#selectedIndex - 1;
 		}
 		// Down arrow - go to next (newer) message, wrap to top when at bottom
-		else if (matchesKey(keyData, "down")) {
+		else if (matchesSelectDown(keyData)) {
 			this.#selectedIndex = this.#selectedIndex === this.messages.length - 1 ? 0 : this.#selectedIndex + 1;
 		}
 		// Enter - select message and branch

package/src/modes/components/welcome.ts

@@ -1,6 +1,45 @@
-import { type Component, padding, TERMINAL, truncateToWidth, visibleWidth } from "@oh-my-pi/pi-tui";
+import {
+	type Component,
+	padding,
+	replaceTabs,
+	TERMINAL,
+	truncateToWidth,
+	visibleWidth,
+	wrapTextWithAnsi,
+} from "@oh-my-pi/pi-tui";
 import { APP_NAME } from "@oh-my-pi/pi-utils";
 import { theme } from "../../modes/theme/theme";
+import tipsText from "./tips.txt" with { type: "text" };
+
+/** Tips embedded at build time, one per line; blanks dropped. */
+const TIPS: readonly string[] = tipsText
+	.split("\n")
+	.map(line => line.trim())
+	.filter(line => line.length > 0);
+
+export function renderWelcomeTip(tip: string, boxWidth: number): string[] {
+	const label = "Tip: ";
+	const labelWidth = visibleWidth(label);
+	const bodyBudget = boxWidth - 1 - labelWidth; // 1 = leading indent
+	if (bodyBudget < 8) return [];
+
+	const wrappedBody = wrapTextWithAnsi(replaceTabs(tip), bodyBudget);
+	if (wrappedBody.length === 0) return [];
+
+	const encoding = TERMINAL.trueColor ? "ansi-16m" : "ansi-256";
+	const purple = Bun.color("#b48cff", encoding) ?? "";
+	const lightBlue = Bun.color("#9ccfff", encoding) ?? "";
+	const italic = "\x1b[3m";
+	const dim = "\x1b[2m";
+	const reset = "\x1b[0m";
+	const continuationIndent = padding(labelWidth);
+
+	return wrappedBody.map((body, index) =>
+		index === 0
+			? ` ${italic}${purple}${label}${dim}${lightBlue}${body}${reset}`
+			: ` ${italic}${continuationIndent}${dim}${lightBlue}${body}${reset}`,
+	);
+}
 
 export interface RecentSession {
 	name: string;
@@ -19,6 +58,8 @@ 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;
 
 	constructor(
 		private readonly version: string,
@@ -212,9 +253,22 @@ export class WelcomeComponent implements Component {
 			lines.push(bl + h.repeat(leftCol) + br);
 		}
 
+		// Randomly picked tip, rendered directly beneath the box.
+		lines.push(...this.#renderTip(boxWidth));
+
 		return lines;
 	}
 
+	/**
+	 * Render the per-instance tip line: a purple "Tip:" label followed by the
+	 * tip body in dimmed light blue, the whole line italicized. Returns `[]`
+	 * when no tip is available or the box is too narrow to be useful.
+	 */
+	#renderTip(boxWidth: number): string[] {
+		if (!this.#tip) return [];
+		return renderWelcomeTip(this.#tip, boxWidth);
+	}
+
 	/** Center text within a given width */
 	#centerText(text: string, width: number): string {
 		const visLen = visibleWidth(text);

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

@@ -620,12 +620,27 @@ export class CommandController {
 			return;
 		}
 
+		if (action === "stats" || action === "diagnose") {
+			const hook = action === "stats" ? backend.stats : backend.diagnose;
+			try {
+				const payload = await hook?.(agentDir, this.ctx.sessionManager.getCwd(), this.ctx.session);
+				if (!payload) {
+					this.ctx.showWarning(`Memory ${action} is not available for the ${backend.id} backend.`);
+					return;
+				}
+				showMarkdownPanel(this.ctx, `Memory ${action === "stats" ? "Stats" : "Diagnostics"}`, payload);
+			} catch (error) {
+				this.ctx.showError(`Memory ${action} failed: ${error instanceof Error ? error.message : String(error)}`);
+			}
+			return;
+		}
+
 		if (action === "mm") {
 			await this.#handleMentalModelsSubcommand(argumentText);
 			return;
 		}
 
-		this.ctx.showError("Usage: /memory <view|clear|reset|enqueue|rebuild|mm ...>");
+		this.ctx.showError("Usage: /memory <view|stats|diagnose|clear|reset|enqueue|rebuild|mm ...>");
 	}
 
 	async #handleMentalModelsSubcommand(argumentText: string): Promise<void> {

package/src/modes/controllers/extension-ui-controller.ts

@@ -19,7 +19,7 @@ import type {
 import { getSessionSlashCommands } from "../../extensibility/extensions/get-commands-handler";
 import { HookEditorComponent } from "../../modes/components/hook-editor";
 import { HookInputComponent } from "../../modes/components/hook-input";
-import { HookSelectorComponent } from "../../modes/components/hook-selector";
+import { HookSelectorComponent, type HookSelectorSlider } from "../../modes/components/hook-selector";
 import { getAvailableThemesWithPaths, getThemeByName, setTheme, type Theme, theme } from "../../modes/theme/theme";
 import type { InteractiveModeContext } from "../../modes/types";
 import { setSessionTerminalTitle, setTerminalTitle } from "../../utils/title-generator";
@@ -583,6 +583,7 @@ export class ExtensionUiController {
 		title: string,
 		options: string[],
 		dialogOptions?: ExtensionUIDialogOptions,
+		extra?: { slider?: HookSelectorSlider },
 	): Promise<string | undefined> {
 		const { promise, finish, attachAbort } = this.#createHookDialogState(
 			() => this.hideHookSelector(),
@@ -623,6 +624,7 @@ export class ExtensionUiController {
 				tui: this.ctx.ui,
 				outline: dialogOptions?.outline,
 				maxVisible,
+				slider: extra?.slider,
 			},
 		);
 		this.ctx.editorContainer.clear();

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

@@ -3,6 +3,7 @@ import { type AgentMessage, ThinkingLevel } from "@oh-my-pi/pi-agent-core";
 import type { AutocompleteProvider, SlashCommand } from "@oh-my-pi/pi-tui";
 import { $env, sanitizeText } from "@oh-my-pi/pi-utils";
 import { isSettingsInitialized, settings } from "../../config/settings";
+import { TinyTitleDownloadProgressComponent } from "../../modes/components/tiny-title-download-progress";
 import { expandEmoticons } from "../../modes/emoji-autocomplete";
 import { createPromptActionAutocompleteProvider } from "../../modes/prompt-action-autocomplete";
 import { theme } from "../../modes/theme/theme";
@@ -10,6 +11,9 @@ import type { InteractiveModeContext } from "../../modes/types";
 import type { AgentSessionEvent } from "../../session/agent-session";
 import { SKILL_PROMPT_MESSAGE_TYPE, type SkillPromptDetails } from "../../session/messages";
 import { executeBuiltinSlashCommand } from "../../slash-commands/builtin-registry";
+import { isTinyTitleLocalModelKey } from "../../tiny/models";
+import { tinyTitleClient } from "../../tiny/title-client";
+import type { TinyTitleProgressEvent } from "../../tiny/title-protocol";
 import { copyToClipboard, readImageFromClipboard } from "../../utils/clipboard";
 import { getEditorCommand, openInEditor } from "../../utils/external-editor";
 import { ensureSupportedImageInput } from "../../utils/image-loading";
@@ -24,9 +28,61 @@ function isExpandable(obj: unknown): obj is Expandable {
 	return typeof obj === "object" && obj !== null && "setExpanded" in obj && typeof obj.setExpanded === "function";
 }
 
+const TINY_TITLE_PROGRESS_DONE_TTL_MS = 3_000;
+// A cached model fires its file-load events in a short burst and then goes silent
+// while onnxruntime builds the session; a genuine download keeps streaming progress
+// events for seconds. Only reveal the bar once a still-incomplete event arrives after
+// this grace window, so an already-downloaded model never flashes the bar.
+const TINY_TITLE_PROGRESS_REVEAL_DELAY_MS = 1_000;
+
 export class InputController {
 	constructor(private ctx: InteractiveModeContext) {}
 
+	#showTinyTitleDownloadProgress(modelKey: string): void {
+		if (!isTinyTitleLocalModelKey(modelKey) || this.ctx.isBackgrounded) return;
+		const component = new TinyTitleDownloadProgressComponent(modelKey);
+		let added = false;
+		let disposed = false;
+		let removeTimer: NodeJS.Timeout | undefined;
+		const remove = (): void => {
+			if (disposed) return;
+			disposed = true;
+			unsubscribe();
+			if (removeTimer) {
+				clearTimeout(removeTimer);
+				removeTimer = undefined;
+			}
+			if (added) {
+				this.ctx.chatContainer.removeChild(component);
+				this.ctx.ui.requestRender();
+			}
+		};
+		const scheduleRemove = (): void => {
+			if (removeTimer) clearTimeout(removeTimer);
+			removeTimer = setTimeout(remove, TINY_TITLE_PROGRESS_DONE_TTL_MS);
+			removeTimer.unref?.();
+		};
+		let revealAt = 0;
+		const update = (event: TinyTitleProgressEvent): void => {
+			if (disposed || event.modelKey !== modelKey) return;
+			component.update(event);
+			if (revealAt === 0) revealAt = performance.now() + TINY_TITLE_PROGRESS_REVEAL_DELAY_MS;
+			const complete = component.isComplete();
+			// Reveal only for a download still in flight past the grace window. Cache hits
+			// either complete or fall silent (onnx init emits no events) before this fires.
+			if (!added && !complete && performance.now() >= revealAt) {
+				this.ctx.chatContainer.addChild(component);
+				added = true;
+			}
+			if (added) this.ctx.ui.requestRender();
+			if (complete) {
+				if (added) scheduleRemove();
+				else remove();
+			}
+		};
+		const unsubscribe = tinyTitleClient.onProgress(update);
+	}
+
 	setupKeyHandlers(): void {
 		this.ctx.editor.setActionKeys("app.interrupt", this.ctx.keybindings.getKeys("app.interrupt"));
 		this.ctx.editor.shouldBypassAutocompleteOnEscape = () =>
@@ -329,6 +385,7 @@ export class InputController {
 			// Generate session title on first message
 			const hasUserMessages = this.ctx.session.messages.some((m: AgentMessage) => m.role === "user");
 			if (!hasUserMessages && !this.ctx.sessionManager.getSessionName() && !$env.PI_NO_TITLE) {
+				this.#showTinyTitleDownloadProgress(this.ctx.settings.get("providers.tinyModel"));
 				const registry = this.ctx.session.modelRegistry;
 				generateSessionTitle(
 					text,

package/src/modes/gradient-highlight.ts

@@ -0,0 +1,70 @@
+import { theme } from "./theme/theme";
+
+const FG_RESET = "\x1b[39m";
+
+/** Declarative spec for {@link createGradientHighlighter}. */
+export interface GradientHighlightSpec {
+	/** Cheap, stateless presence probe used to skip the boundary regex on most lines. Must be non-global. */
+	probe: RegExp;
+	/** Global, word-bounded match regex walked by `.replace`. */
+	highlight: RegExp;
+	/** Number of color stops swept across the gradient. */
+	stops: number;
+	/** Maps a normalized position `t` in [0, 1) to an HSL hue in degrees. */
+	hue: (t: number) => number;
+	/** HSL saturation percentage. Default 90. */
+	saturation?: number;
+	/** HSL lightness percentage. Default 62. */
+	lightness?: number;
+}
+
+/**
+ * Build a stateless highlighter that paints each standalone match of `highlight`
+ * with a smooth HSL gradient for editor display. The returned function adds only
+ * zero-width SGR escapes — the visible width is unchanged — and returns the input
+ * untouched when `probe` does not match. The palette is compiled lazily and
+ * memoized per active color mode.
+ */
+export function createGradientHighlighter(spec: GradientHighlightSpec): (text: string) => string {
+	const { probe, highlight, stops, hue, saturation = 90, lightness = 62 } = spec;
+
+	let cachedMode: string | undefined;
+	let cachedPalette: readonly string[] | undefined;
+
+	/** Gradient foreground escapes for the active color mode, compiled once per mode. */
+	const palette = (): readonly string[] => {
+		const mode = theme.getColorMode();
+		if (cachedPalette && cachedMode === mode) return cachedPalette;
+		const format = mode === "truecolor" ? "ansi-16m" : "ansi-256";
+		const next: string[] = [];
+		for (let i = 0; i < stops; i++) {
+			next.push(Bun.color(`hsl(${Math.round(hue(i / stops))}, ${saturation}%, ${lightness}%)`, format) ?? "");
+		}
+		cachedMode = mode;
+		cachedPalette = next;
+		return next;
+	};
+
+	/** Paint each character of `word` with the next gradient stop, resetting fg after. */
+	const paint = (word: string): string => {
+		const stopsArr = palette();
+		const n = word.length;
+		let out = "";
+		let prev = "";
+		for (let i = 0; i < n; i++) {
+			const color = stopsArr[Math.floor((i / n) * stopsArr.length)] ?? stopsArr[0] ?? "";
+			// Coalesce consecutive characters that resolve to the same stop.
+			if (color !== prev) {
+				out += color;
+				prev = color;
+			}
+			out += word[i];
+		}
+		return `${out}${FG_RESET}`;
+	};
+
+	return (text: string): string => {
+		if (!probe.test(text)) return text;
+		return text.replace(highlight, paint);
+	};
+}