@oh-my-pi/pi-coding-agent 15.7.2 → 15.7.5

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

@@ -1,6 +1,6 @@
 import { getOAuthProviders } from "@oh-my-pi/pi-ai/utils/oauth";
 import type { OAuthProviderInfo } from "@oh-my-pi/pi-ai/utils/oauth/types";
-import { Container, matchesKey, Spacer, TruncatedText } from "@oh-my-pi/pi-tui";
+import { Container, extractPrintableText, fuzzyFilter, matchesKey, Spacer, TruncatedText } from "@oh-my-pi/pi-tui";
 import { theme } from "../../modes/theme/theme";
 import { matchesSelectCancel, matchesSelectDown, matchesSelectUp } from "../../modes/utils/keybinding-matchers";
 import type { AuthStorage } from "../../session/auth-storage";
@@ -13,6 +13,8 @@ const OAUTH_SELECTOR_MAX_VISIBLE = 10;
 export class OAuthSelectorComponent extends Container {
 	#listContainer: Container;
 	#allProviders: OAuthProviderInfo[] = [];
+	#filteredProviders: OAuthProviderInfo[] = [];
+	#searchQuery = "";
 	#selectedIndex: number = 0;
 	#mode: "login" | "logout";
 	#authStorage: AuthStorage;
@@ -67,6 +69,7 @@ export class OAuthSelectorComponent extends Container {
 	}
 	#loadProviders(): void {
 		this.#allProviders = getOAuthProviders();
+		this.#filteredProviders = this.#allProviders;
 	}
 
 	#startValidation(): void {
@@ -144,10 +147,68 @@ export class OAuthSelectorComponent extends Container {
 		}
 		return this.#authStorage.hasAuth(providerId) ? theme.fg("success", ` ${theme.status.success} logged in`) : "";
 	}
+	#isSearchEnabled(): boolean {
+		return this.#allProviders.length > OAUTH_SELECTOR_MAX_VISIBLE;
+	}
+
+	#shouldRenderSearchStatus(): boolean {
+		return this.#isSearchEnabled() || this.#searchQuery.length > 0;
+	}
+
+	#renderStatusLine(total: number): string {
+		const selectedCount = total === 0 ? 0 : this.#selectedIndex + 1;
+		const count =
+			this.#searchQuery.trim() && total !== this.#allProviders.length
+				? `${selectedCount}/${total} of ${this.#allProviders.length}`
+				: `${selectedCount}/${total}`;
+		const suffix = this.#searchQuery.trim() ? `  Search: ${this.#searchQuery}` : "  Type to search";
+		return theme.fg("muted", `  (${count})${suffix}`);
+	}
+
+	#getProviderSearchText(provider: OAuthProviderInfo): string {
+		let text = `${provider.name} ${provider.id}`;
+		if (this.#authStorage.hasAuth(provider.id)) {
+			text += " logged in authenticated";
+		}
+		if (!provider.available) {
+			text += " unavailable";
+		}
+		return text;
+	}
+
+	#setSearchQuery(query: string): void {
+		this.#searchQuery = query;
+		this.#filteredProviders = query.trim()
+			? fuzzyFilter(this.#allProviders, query, provider => this.#getProviderSearchText(provider))
+			: this.#allProviders;
+		this.#selectedIndex = 0;
+		this.#statusMessage = undefined;
+		this.#updateList();
+	}
+
+	#handleSearchInput(keyData: string): boolean {
+		if (!this.#isSearchEnabled()) return false;
+
+		if (matchesKey(keyData, "backspace")) {
+			if (this.#searchQuery.length === 0) return false;
+			const chars = [...this.#searchQuery];
+			chars.pop();
+			this.#setSearchQuery(chars.join(""));
+			return true;
+		}
+
+		const printableText = extractPrintableText(keyData);
+		if (printableText === undefined) return false;
+		if (this.#searchQuery.length === 0 && printableText.trim().length === 0) return false;
+
+		this.#setSearchQuery(this.#searchQuery + printableText);
+		return true;
+	}
+
 	#updateList(): void {
 		this.#listContainer.clear();
 
-		const total = this.#allProviders.length;
+		const total = this.#filteredProviders.length;
 		const maxVisible = OAUTH_SELECTOR_MAX_VISIBLE;
 		const startIndex =
 			total <= maxVisible
@@ -156,7 +217,7 @@ export class OAuthSelectorComponent extends Container {
 		const endIndex = Math.min(startIndex + maxVisible, total);
 
 		for (let i = startIndex; i < endIndex; i++) {
-			const provider = this.#allProviders[i];
+			const provider = this.#filteredProviders[i];
 			if (!provider) continue;
 			const isSelected = i === this.#selectedIndex;
 			const isAvailable = provider.available;
@@ -174,16 +235,19 @@ export class OAuthSelectorComponent extends Container {
 			this.#listContainer.addChild(new TruncatedText(line, 0, 0));
 		}
 
-		// Scroll indicator when list is windowed
-		if (startIndex > 0 || endIndex < total) {
-			const scrollInfo = theme.fg("muted", `  (${this.#selectedIndex + 1}/${total})`);
-			this.#listContainer.addChild(new TruncatedText(scrollInfo, 0, 0));
+		// Scroll/search indicator when list is windowed or searchable
+		if (startIndex > 0 || endIndex < total || this.#shouldRenderSearchStatus()) {
+			this.#listContainer.addChild(new TruncatedText(this.#renderStatusLine(total), 0, 0));
 		}
 
 		// Show "no providers" if empty
 		if (total === 0) {
 			const message =
-				this.#mode === "login" ? "No OAuth providers available" : "No OAuth providers logged in. Use /login first.";
+				this.#allProviders.length === 0
+					? this.#mode === "login"
+						? "No OAuth providers available"
+						: "No OAuth providers logged in. Use /login first."
+					: "No matching providers";
 			this.#listContainer.addChild(new TruncatedText(theme.fg("muted", `  ${message}`), 0, 0));
 		}
 		if (this.#statusMessage) {
@@ -192,25 +256,38 @@ export class OAuthSelectorComponent extends Container {
 		}
 	}
 	handleInput(keyData: string): void {
+		// Escape or Ctrl+C
+		if (matchesSelectCancel(keyData)) {
+			this.stopValidation();
+			this.#onCancelCallback();
+			return;
+		}
+
+		if (this.#handleSearchInput(keyData)) {
+			return;
+		}
+
 		// Up arrow
 		if (matchesSelectUp(keyData)) {
-			if (this.#allProviders.length > 0) {
-				this.#selectedIndex = this.#selectedIndex === 0 ? this.#allProviders.length - 1 : this.#selectedIndex - 1;
+			if (this.#filteredProviders.length > 0) {
+				this.#selectedIndex =
+					this.#selectedIndex === 0 ? this.#filteredProviders.length - 1 : this.#selectedIndex - 1;
 			}
 			this.#statusMessage = undefined;
 			this.#updateList();
 		}
 		// Down arrow
 		else if (matchesSelectDown(keyData)) {
-			if (this.#allProviders.length > 0) {
-				this.#selectedIndex = this.#selectedIndex === this.#allProviders.length - 1 ? 0 : this.#selectedIndex + 1;
+			if (this.#filteredProviders.length > 0) {
+				this.#selectedIndex =
+					this.#selectedIndex === this.#filteredProviders.length - 1 ? 0 : this.#selectedIndex + 1;
 			}
 			this.#statusMessage = undefined;
 			this.#updateList();
 		}
 		// Page up - jump up by one visible page
 		else if (matchesKey(keyData, "pageUp")) {
-			if (this.#allProviders.length > 0) {
+			if (this.#filteredProviders.length > 0) {
 				this.#selectedIndex = Math.max(0, this.#selectedIndex - OAUTH_SELECTOR_MAX_VISIBLE);
 			}
 			this.#statusMessage = undefined;
@@ -218,9 +295,9 @@ export class OAuthSelectorComponent extends Container {
 		}
 		// Page down - jump down by one visible page
 		else if (matchesKey(keyData, "pageDown")) {
-			if (this.#allProviders.length > 0) {
+			if (this.#filteredProviders.length > 0) {
 				this.#selectedIndex = Math.min(
-					this.#allProviders.length - 1,
+					this.#filteredProviders.length - 1,
 					this.#selectedIndex + OAUTH_SELECTOR_MAX_VISIBLE,
 				);
 			}
@@ -229,7 +306,7 @@ export class OAuthSelectorComponent extends Container {
 		}
 		// Enter
 		else if (matchesKey(keyData, "enter") || matchesKey(keyData, "return") || keyData === "\n") {
-			const selectedProvider = this.#allProviders[this.#selectedIndex];
+			const selectedProvider = this.#filteredProviders[this.#selectedIndex];
 			if (selectedProvider?.available) {
 				this.#statusMessage = undefined;
 				this.stopValidation();
@@ -239,10 +316,5 @@ export class OAuthSelectorComponent extends Container {
 				this.#updateList();
 			}
 		}
-		// Escape or Ctrl+C
-		else if (matchesSelectCancel(keyData)) {
-			this.stopValidation();
-			this.#onCancelCallback();
-		}
 	}
 }

package/src/modes/components/omfg-panel.ts

@@ -0,0 +1,141 @@
+import { type Component, Container, Markdown, Spacer, Text, type TUI } from "@oh-my-pi/pi-tui";
+import { replaceTabs } from "../../tools/render-utils";
+import { getMarkdownTheme, theme } from "../theme/theme";
+import { DynamicBorder } from "./dynamic-border";
+
+export type OmfgPanelState =
+	| "generating"
+	| "validating"
+	| "confirming"
+	| "saving"
+	| "saved"
+	| "rejected"
+	| "aborted"
+	| "error";
+
+interface OmfgPanelComponentOptions {
+	complaint: string;
+	tui: TUI;
+}
+
+export class OmfgPanelComponent extends Container {
+	#complaint: string;
+	#tui: TUI;
+	#state: OmfgPanelState = "generating";
+	#status = "Generating TTSR rule…";
+	#preview = "";
+	#savedPath: string | undefined;
+	#errorMessage: string | undefined;
+	#closed = false;
+
+	constructor(options: OmfgPanelComponentOptions) {
+		super();
+		this.#complaint = options.complaint;
+		this.#tui = options.tui;
+		this.#rebuild();
+	}
+
+	appendDraft(delta: string): void {
+		if (!delta || this.#closed) return;
+		this.#preview += delta;
+		this.#rebuild();
+	}
+
+	setRule(text: string): void {
+		if (this.#closed) return;
+		this.#preview = text;
+		this.#rebuild();
+	}
+
+	setStatus(state: OmfgPanelState, status: string): void {
+		if (this.#closed) return;
+		this.#state = state;
+		this.#status = status;
+		this.#errorMessage = undefined;
+		this.#rebuild();
+	}
+
+	markSaved(path: string): void {
+		if (this.#closed) return;
+		this.#state = "saved";
+		this.#savedPath = path;
+		this.#status = `Saved ${path}`;
+		this.#errorMessage = undefined;
+		this.#rebuild();
+	}
+
+	markRejected(): void {
+		if (this.#closed) return;
+		this.#state = "rejected";
+		this.#status = "Rule was not saved.";
+		this.#errorMessage = undefined;
+		this.#rebuild();
+	}
+
+	markAborted(): void {
+		if (this.#closed) return;
+		this.#state = "aborted";
+		this.#status = "Cancelled.";
+		this.#errorMessage = undefined;
+		this.#rebuild();
+	}
+
+	markError(message: string): void {
+		if (this.#closed) return;
+		this.#state = "error";
+		this.#status = "Could not create rule.";
+		this.#errorMessage = message;
+		this.#rebuild();
+	}
+
+	close(): void {
+		this.#closed = true;
+	}
+
+	#rebuild(): void {
+		this.clear();
+		this.addChild(new DynamicBorder(str => theme.fg("dim", str)));
+		this.addChild(new Spacer(1));
+		this.addChild(new Text(theme.fg("accent", replaceTabs(`/omfg ${this.#complaint}`)), 1, 0));
+		this.addChild(new Text(theme.fg("muted", replaceTabs(this.#status)), 1, 0));
+		this.addChild(new Spacer(1));
+		this.addChild(this.#contentComponent());
+		this.addChild(new Spacer(1));
+		this.addChild(new Text(this.#footerLine(), 1, 0));
+		this.addChild(new Spacer(1));
+		this.addChild(new DynamicBorder(str => theme.fg("dim", str)));
+		this.#tui.requestRender();
+	}
+
+	#footerLine(): string {
+		switch (this.#state) {
+			case "generating":
+			case "validating":
+			case "confirming":
+			case "saving":
+				return theme.fg("muted", "Esc cancel /omfg");
+			case "saved":
+				return theme.fg(
+					"success",
+					`${theme.status.success} Registered live · ${replaceTabs(this.#savedPath ?? "saved")}`,
+				);
+			case "rejected":
+				return theme.fg("warning", `${theme.status.warning} Not saved · Esc dismiss`);
+			case "aborted":
+				return theme.fg("warning", `${theme.status.warning} Cancelled · Esc dismiss`);
+			case "error":
+				return theme.fg("error", `${theme.status.error} Error · Esc dismiss`);
+		}
+	}
+
+	#contentComponent(): Component {
+		if (this.#state === "error") {
+			return new Text(theme.fg("error", replaceTabs(this.#errorMessage ?? "Unknown error")), 1, 0);
+		}
+		const text = replaceTabs(this.#preview).trim();
+		if (!text) {
+			return new Text(theme.fg("dim", `${theme.status.pending} Waiting for candidate rule…`), 1, 0);
+		}
+		return new Markdown(text, 1, 0, getMarkdownTheme());
+	}
+}

package/src/modes/components/settings-defs.ts

@@ -79,9 +79,9 @@ const CONDITIONS: Record<string, () => boolean> = {
 			return false;
 		}
 	},
-	mnemosyneActive: () => {
+	mnemopiActive: () => {
 		try {
-			return Settings.instance.get("memory.backend") === "mnemosyne";
+			return Settings.instance.get("memory.backend") === "mnemopi";
 		} catch {
 			return false;
 		}

package/src/modes/components/tips.txt

@@ -4,10 +4,11 @@ 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://"
+Spaghetti code? Try complaining with /omfg
 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
+Say `workflow` in your message to drive the task with parallel subagents in eval — 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
 Press alt+p (or /switch) to switch provider, and ctrl+p to cycle role models smol -> slow -> etc

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

@@ -45,15 +45,6 @@ function ensureInvalidate(component: unknown): Component {
 	return c as Component;
 }
 
-function cloneToolArgs<T>(args: T): T {
-	if (args === null || args === undefined) return args;
-	try {
-		return structuredClone(args);
-	} catch {
-		return args;
-	}
-}
-
 /**
  * Drop trailing removal/hunk-header lines that appear in a streaming diff
  * before the matching `+added` lines have arrived. Without this, a partial
@@ -107,6 +98,27 @@ function resolveEditModeForTool(toolName: string, tool: AgentTool | undefined):
 	return (tool as { mode?: EditMode } | undefined)?.mode;
 }
 
+function rawTextInputFromPartialJson(partialJson: unknown): string | undefined {
+	if (typeof partialJson !== "string") return undefined;
+	if (partialJson.length === 0) return undefined;
+	const trimmed = partialJson.trimStart();
+	if (trimmed.length === 0) return undefined;
+	const first = trimmed[0];
+	// Function-tool arguments stream as JSON. Custom/free-form tools stream raw
+	// text in the same transport field; only the raw form is a valid fallback for
+	// the conventional `input` parameter.
+	if (first === "{" || first === "[" || first === '"') return undefined;
+	return partialJson;
+}
+
+function getArgsWithStreamedTextInput(args: unknown): unknown {
+	if (args == null || typeof args !== "object") return args;
+	const record = args as Record<string, unknown>;
+	if (typeof record.input === "string") return args;
+	const input = rawTextInputFromPartialJson(record.__partialJson);
+	return input === undefined ? args : { ...record, input };
+}
+
 export interface ToolExecutionOptions {
 	snapshots?: SnapshotStore;
 	showImages?: boolean; // default: true (only used if terminal supports images)
@@ -198,7 +210,7 @@ export class ToolExecutionComponent extends Container {
 		this.#tool = tool;
 		this.#ui = ui;
 		this.#cwd = cwd;
-		this.#args = cloneToolArgs(args);
+		this.#args = args;
 
 		this.addChild(new Spacer(1));
 
@@ -222,7 +234,12 @@ export class ToolExecutionComponent extends Container {
 	}
 
 	updateArgs(args: any, _toolCallId?: string): void {
-		this.#args = cloneToolArgs(args);
+		// Reference-equality short-circuit before any further work. Callers
+		// always allocate a new arg object on each streamed delta (see
+		// event-controller.ts and ui-helpers.ts), so a same-reference assignment
+		// signals "nothing meaningful changed" and the renderer can skip.
+		if (args === this.#args) return;
+		this.#args = args;
 		this.#updateSpinnerAnimation();
 		void this.#runPreviewDiff();
 		this.#updateDisplay();
@@ -247,12 +264,13 @@ export class ToolExecutionComponent extends Container {
 		const args = this.#args;
 		if (args == null || typeof args !== "object") return;
 
-		const partialJson = (args as { __partialJson?: string }).__partialJson;
+		const previewArgs = getArgsWithStreamedTextInput(args);
+		const partialJson = (previewArgs as { __partialJson?: string }).__partialJson;
 		let effectiveArgs: unknown;
 		try {
-			effectiveArgs = strategy.extractCompleteEdits(args, partialJson);
+			effectiveArgs = strategy.extractCompleteEdits(previewArgs, partialJson);
 		} catch {
-			effectiveArgs = args;
+			effectiveArgs = previewArgs;
 		}
 
 		// Coalesce duplicate computes for identical args. The key pairs the
@@ -717,20 +735,21 @@ export class ToolExecutionComponent extends Container {
 	}
 
 	#getCallArgsForRender(): any {
+		const renderArgs = getArgsWithStreamedTextInput(this.#args);
 		if (!isEditLikeToolName(this.#toolName)) {
-			return this.#args;
+			return renderArgs;
 		}
 		const previews = this.#editDiffPreview;
 		if (!previews || previews.length === 0) {
-			return this.#args;
+			return renderArgs;
 		}
 		// Single-file previews feed the existing `previewDiff` channel consumed
 		// by `formatStreamingDiff` in the renderer.
 		const first = previews[0];
 		if (!first?.diff) {
-			return this.#args;
+			return renderArgs;
 		}
-		return { ...(this.#args as Record<string, unknown>), previewDiff: first.diff };
+		return { ...(renderArgs as Record<string, unknown>), previewDiff: first.diff };
 	}
 
 	/**
@@ -781,7 +800,7 @@ export class ToolExecutionComponent extends Container {
 			if (!previews?.some(preview => preview.diff)) {
 				const editMode = this.#editMode;
 				const strategy = editMode ? EDIT_MODE_STRATEGIES[editMode] : undefined;
-				const fallback = strategy?.renderStreamingFallback(this.#args, theme);
+				const fallback = strategy?.renderStreamingFallback(getArgsWithStreamedTextInput(this.#args), theme);
 				if (fallback) context.editStreamingFallback = fallback;
 			}
 			context.renderDiff = renderDiff;

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

@@ -3,6 +3,7 @@ import {
 	type Component,
 	Container,
 	extractPrintableText,
+	fuzzyMatch,
 	Input,
 	matchesKey,
 	Spacer,
@@ -325,10 +326,10 @@ class TreeList implements Component {
 
 			if (!passesFilter) return false;
 
-			// Apply search filter
+			// Apply fuzzy search filter
 			if (searchTokens.length > 0) {
-				const nodeText = this.#getSearchableText(flatNode.node).toLowerCase();
-				return searchTokens.every(token => nodeText.includes(token));
+				const nodeText = this.#getSearchableText(flatNode.node);
+				return searchTokens.every(token => fuzzyMatch(token, nodeText).matches);
 			}
 
 			return true;

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

@@ -1,4 +1,13 @@
-import { type Component, Container, matchesKey, Spacer, Text, truncateToWidth } from "@oh-my-pi/pi-tui";
+import {
+	type Component,
+	Container,
+	extractPrintableText,
+	fuzzyFilter,
+	matchesKey,
+	Spacer,
+	Text,
+	truncateToWidth,
+} from "@oh-my-pi/pi-tui";
 import { theme } from "../../modes/theme/theme";
 import { matchesSelectCancel, matchesSelectDown, matchesSelectUp } from "../../modes/utils/keybinding-matchers";
 import { DynamicBorder } from "./dynamic-border";
@@ -13,6 +22,8 @@ interface UserMessageItem {
  * Custom user message list component with selection
  */
 class UserMessageList implements Component {
+	#filteredMessages: UserMessageItem[];
+	#searchQuery = "";
 	#selectedIndex: number = 0;
 	onSelect?: (entryId: string) => void;
 	onCancel?: () => void;
@@ -20,14 +31,60 @@ class UserMessageList implements Component {
 
 	constructor(private readonly messages: UserMessageItem[]) {
 		// Store messages in chronological order (oldest to newest)
+		this.#filteredMessages = messages;
 		// Start with the last (most recent) message selected
-		this.#selectedIndex = Math.max(0, this.messages.length - 1);
+		this.#selectedIndex = Math.max(0, this.#filteredMessages.length - 1);
 	}
 
 	invalidate(): void {
 		// No cached state to invalidate currently
 	}
 
+	#isSearchEnabled(): boolean {
+		return this.messages.length > this.#maxVisible;
+	}
+
+	#shouldRenderSearchStatus(): boolean {
+		return this.#isSearchEnabled() || this.#searchQuery.length > 0;
+	}
+
+	#renderStatusLine(total: number): string {
+		const selectedCount = total === 0 ? 0 : this.#selectedIndex + 1;
+		const count =
+			this.#searchQuery.trim() && total !== this.messages.length
+				? `${selectedCount}/${total} of ${this.messages.length}`
+				: `${selectedCount}/${total}`;
+		const suffix = this.#searchQuery.trim() ? `  Search: ${this.#searchQuery}` : "  Type to search";
+		return theme.fg("muted", `  (${count})${suffix}`);
+	}
+
+	#setSearchQuery(query: string): void {
+		this.#searchQuery = query;
+		this.#filteredMessages = query.trim()
+			? fuzzyFilter(this.messages, query, message => `${message.text} ${message.timestamp ?? ""}`)
+			: this.messages;
+		this.#selectedIndex = query.trim() ? 0 : Math.max(0, this.#filteredMessages.length - 1);
+	}
+
+	#handleSearchInput(keyData: string): boolean {
+		if (!this.#isSearchEnabled()) return false;
+
+		if (matchesKey(keyData, "backspace")) {
+			if (this.#searchQuery.length === 0) return false;
+			const chars = [...this.#searchQuery];
+			chars.pop();
+			this.#setSearchQuery(chars.join(""));
+			return true;
+		}
+
+		const printableText = extractPrintableText(keyData);
+		if (printableText === undefined) return false;
+		if (this.#searchQuery.length === 0 && printableText.trim().length === 0) return false;
+
+		this.#setSearchQuery(this.#searchQuery + printableText);
+		return true;
+	}
+
 	render(width: number): string[] {
 		const lines: string[] = [];
 
@@ -36,16 +93,19 @@ class UserMessageList implements Component {
 			return lines;
 		}
 
+		const total = this.#filteredMessages.length;
+
 		// Calculate visible range with scrolling
 		const startIndex = Math.max(
 			0,
-			Math.min(this.#selectedIndex - Math.floor(this.#maxVisible / 2), this.messages.length - this.#maxVisible),
+			Math.min(this.#selectedIndex - Math.floor(this.#maxVisible / 2), total - this.#maxVisible),
 		);
-		const endIndex = Math.min(startIndex + this.#maxVisible, this.messages.length);
+		const endIndex = Math.min(startIndex + this.#maxVisible, total);
 
 		// Render visible messages (2 lines per message + blank line)
 		for (let i = startIndex; i < endIndex; i++) {
-			const message = this.messages[i];
+			const message = this.#filteredMessages[i];
+			if (!message) continue;
 			const isSelected = i === this.#selectedIndex;
 
 			// Normalize message to single line
@@ -60,44 +120,59 @@ class UserMessageList implements Component {
 			lines.push(messageLine);
 
 			// Second line: metadata (position in history)
-			const position = i + 1;
+			const position = this.messages.indexOf(message) + 1;
 			const metadata = `  Message ${position} of ${this.messages.length}`;
 			const metadataLine = theme.fg("muted", metadata);
 			lines.push(metadataLine);
 			lines.push(""); // Blank line between messages
 		}
 
-		// Add scroll indicator if needed
-		if (startIndex > 0 || endIndex < this.messages.length) {
-			const scrollInfo = theme.fg("muted", `  (${this.#selectedIndex + 1}/${this.messages.length})`);
-			lines.push(scrollInfo);
+		if (total === 0) {
+			lines.push(theme.fg("muted", "  No matching messages"));
+		}
+
+		// Add scroll/search indicator if needed
+		if (startIndex > 0 || endIndex < total || this.#shouldRenderSearchStatus()) {
+			lines.push(this.#renderStatusLine(total));
 		}
 
 		return lines;
 	}
 
 	handleInput(keyData: string): void {
+		// Escape / cancel
+		if (matchesSelectCancel(keyData)) {
+			if (this.onCancel) {
+				this.onCancel();
+			}
+			return;
+		}
+
+		if (this.#handleSearchInput(keyData)) {
+			return;
+		}
+
 		// Up arrow - go to previous (older) message, wrap to bottom when at top
 		if (matchesSelectUp(keyData)) {
-			this.#selectedIndex = this.#selectedIndex === 0 ? this.messages.length - 1 : this.#selectedIndex - 1;
+			if (this.#filteredMessages.length > 0) {
+				this.#selectedIndex =
+					this.#selectedIndex === 0 ? this.#filteredMessages.length - 1 : this.#selectedIndex - 1;
+			}
 		}
 		// Down arrow - go to next (newer) message, wrap to top when at bottom
 		else if (matchesSelectDown(keyData)) {
-			this.#selectedIndex = this.#selectedIndex === this.messages.length - 1 ? 0 : this.#selectedIndex + 1;
+			if (this.#filteredMessages.length > 0) {
+				this.#selectedIndex =
+					this.#selectedIndex === this.#filteredMessages.length - 1 ? 0 : this.#selectedIndex + 1;
+			}
 		}
 		// Enter - select message and branch
 		else if (matchesKey(keyData, "enter") || matchesKey(keyData, "return") || keyData === "\n") {
-			const selected = this.messages[this.#selectedIndex];
+			const selected = this.#filteredMessages[this.#selectedIndex];
 			if (selected && this.onSelect) {
 				this.onSelect(selected.id);
 			}
 		}
-		// Escape / cancel
-		else if (matchesSelectCancel(keyData)) {
-			if (this.onCancel) {
-				this.onCancel();
-			}
-		}
 	}
 }