@vanillagreen/pi-qol 1.1.1 → 1.3.0

package/extensions/qol/session-search/component.ts

@@ -0,0 +1,937 @@
+import type { Theme } from "@earendil-works/pi-coding-agent";
+import { matchesKey, truncateToWidth, visibleWidth, wrapTextWithAnsi } from "@earendil-works/pi-tui";
+import { ansiGreen, ansiRed, ansiYellow } from "../ansi.js";
+import { SESSION_SEARCH_OVERLAY_HEIGHT_RATIO } from "../constants.js";
+import { settingNumber } from "../settings.js";
+import {
+	defaultSessionSearchScope,
+	modelLabel,
+	sameModel,
+	sameSessionSearchProject,
+	sessionModelInfo,
+	sessionResumeTitle,
+	shortPathForUi,
+	userMessagesForResult,
+	type QolModelInfo,
+} from "./cache.js";
+import {
+	buildPromptSnippet,
+	formatSessionSearchDate,
+	parseSessionSearchQuery,
+	promptRecencyTime,
+	searchQolSessionHits,
+} from "./search.js";
+import type {
+	QolSessionActionState,
+	QolSessionConfirmModelState,
+	QolSessionContextConfirmState,
+	QolSessionForkConfirmState,
+	QolSessionMessagesState,
+	QolSessionPaletteAction,
+	QolSessionSearchHit,
+	QolSessionSearchResult,
+	QolSessionSearchScope,
+	QolSessionSearchSession,
+	QolSessionSearchState,
+	QolSessionUserMessage,
+} from "./types.js";
+
+import { escapeRegex } from "../util.js";
+
+export function wrapVisible(text: string, width: number, maxLines: number): string[] {
+	const wrapped = wrapTextWithAnsi(text, width);
+	if (wrapped.length <= maxLines) return wrapped;
+	const head = wrapped.slice(0, Math.max(0, maxLines - 1));
+	const tail = wrapped.slice(Math.max(0, maxLines - 1)).join(" ");
+	return [...head, truncateToWidth(tail, width, "…")];
+}
+
+export function styleSessionSnippet(snippet: string, query: string, _theme: Theme): string {
+	let styled = snippet;
+	const parsed = parseSessionSearchQuery(query);
+	if (parsed.mode === "tokens") {
+		for (const token of parsed.tokens) {
+			const value = token.value.trim();
+			if (!value || value.length > 80) continue;
+			try {
+				styled = styled.replace(new RegExp(escapeRegex(value), "gi"), (match) => ansiRed(match));
+			} catch {
+				// Ignore highlighting failures; search result remains readable.
+			}
+		}
+	}
+	return styled;
+}
+
+export function boxParts(width: number, theme: Theme) {
+	const safeWidth = Math.max(24, width);
+	const paddingX = 2;
+	const frameInner = Math.max(10, safeWidth - 2);
+	const inner = Math.max(1, frameInner - paddingX * 2);
+	const border = (s: string) => theme.fg("borderAccent", s);
+	const fixed = (content = "", rowWidth = inner) => {
+		// A single accidental newline in a session name/prompt can tear the box apart.
+		// Preserve ANSI styling, but collapse hard line breaks before measuring.
+		const safeContent = content.replace(/[\r\n\t]+/g, " ");
+		const clipped = truncateToWidth(safeContent, rowWidth, "");
+		return clipped + " ".repeat(Math.max(0, rowWidth - visibleWidth(clipped)));
+	};
+	const row = (content = "", selected = false) => {
+		const body = fixed(content);
+		return `${border("┃")}${" ".repeat(paddingX)}${selected ? theme.bg("selectedBg", body) : body}${" ".repeat(paddingX)}${border("┃")}`;
+	};
+	const filledRow = (content = "", bg: "selectedBg" | "toolPendingBg" = "toolPendingBg") => {
+		const body = fixed(content);
+		return `${border("┃")}${" ".repeat(paddingX)}${theme.bg(bg, body)}${" ".repeat(paddingX)}${border("┃")}`;
+	};
+	const selectedRow = (content = "") => row(content, true);
+	const empty = () => `${border("┃")}${" ".repeat(frameInner)}${border("┃")}`;
+	const divider = () => row(theme.fg("borderMuted", "━".repeat(inner)));
+	const top = (label = "", right = "") => {
+		if (!label) return border(`┏${"━".repeat(frameInner)}┓`);
+		const rightPlain = right ? ` ${right} ` : "";
+		const titleBudget = Math.max(1, frameInner - visibleWidth(rightPlain) - 1);
+		const titlePlain = ` ${truncateToWidth(label, Math.max(1, titleBudget - 2), "…")} `;
+		const fill = Math.max(1, frameInner - visibleWidth(titlePlain) - visibleWidth(rightPlain));
+		const rightText = right ? theme.fg("dim", rightPlain) : "";
+		return `${border("┏")}${ansiGreen(titlePlain)}${border("━".repeat(fill))}${rightText}${border("┓")}`;
+	};
+	const bottom = () => border(`┗${"━".repeat(frameInner)}┛`);
+	return { bottom, divider, empty, filledRow, inner, row, selectedRow, top };
+}
+
+function isPrintableInput(data: string): boolean {
+	return data.length >= 1 && data.charCodeAt(0) >= 32 && !data.startsWith("\x1b") && data !== "\x7f";
+}
+
+export class QolSessionSearchComponent {
+	private screen: "search" | "messages" | "actions" | "confirmContext" | "confirmFork" | "confirmModel" = "search";
+	private searchState: QolSessionSearchState;
+	private messagesState: QolSessionMessagesState | undefined;
+	private actionState: QolSessionActionState | undefined;
+	private actionReturnScreen: "search" | "messages" = "messages";
+	private contextConfirmState: QolSessionContextConfirmState | undefined;
+	private forkConfirmState: QolSessionForkConfirmState | undefined;
+	private confirmModelState: QolSessionConfirmModelState | undefined;
+
+
+	constructor(
+		private readonly done: (action: QolSessionPaletteAction) => void,
+		private readonly tui: { requestRender(): void; terminal?: { rows?: number } },
+		private readonly theme: Theme,
+		private readonly sessions: QolSessionSearchSession[],
+		private readonly cwd: string,
+		initialQuery = "",
+		private readonly currentModel: QolModelInfo | undefined = undefined,
+	) {
+		const query = initialQuery.trim();
+		const scope = defaultSessionSearchScope(cwd);
+		const scopedSessions = this.sessionsForScope(scope);
+		this.searchState = {
+			cursor: query.length,
+			query,
+			results: searchQolSessionHits(scopedSessions, query, cwd),
+			selected: 0,
+			scope,
+			total: scopedSessions.length,
+		};
+	}
+
+	invalidate(): void {}
+
+	private maxOverlayRows(): number {
+		const terminalRows = Number(this.tui.terminal?.rows ?? process.stdout.rows ?? 30);
+		const safeRows = Number.isFinite(terminalRows) && terminalRows > 0 ? terminalRows : 30;
+		return Math.max(9, Math.floor(safeRows * SESSION_SEARCH_OVERLAY_HEIGHT_RATIO));
+	}
+
+	private compactSearchLayout(): boolean {
+		return this.maxOverlayRows() < 18;
+	}
+
+	private searchMaxVisibleRows(): number {
+		const configured = Math.max(1, Math.floor(settingNumber("sessionSearch.maxVisible", 8, this.cwd)));
+		// Each hit is two rows plus a separator between hits. Chrome is aggressively
+		// reduced on short terminals so the popup can shrink to one visible hit.
+		const chromeRows = this.compactSearchLayout() ? 7 : 11;
+		const responsive = Math.max(1, Math.floor((this.maxOverlayRows() - chromeRows) / 3));
+		return Math.max(1, Math.min(configured, responsive));
+	}
+
+	private messageMaxVisibleRows(): number {
+		const configured = Math.max(1, Math.floor(settingNumber("sessionSearch.messageMaxVisible", 12, this.cwd)));
+		// Message rows are one line each; reserve space for session metadata,
+		// optional scroll status, footer, and frame.
+		const responsive = Math.max(1, this.maxOverlayRows() - 14);
+		return Math.max(1, Math.min(configured, responsive));
+	}
+
+	private forkConfirmMaxVisibleRows(): number {
+		const configured = Math.max(1, Math.floor(settingNumber("sessionSearch.messageMaxVisible", 12, this.cwd)));
+		const responsive = Math.max(1, this.maxOverlayRows() - 13);
+		return Math.max(1, Math.min(configured, responsive));
+	}
+
+	render(width: number): string[] {
+		const configured = Math.max(70, Math.floor(settingNumber("sessionSearch.overlayWidth", 104, this.cwd)));
+		const renderWidth = Math.min(Math.max(48, width), configured);
+		if (this.screen === "messages" && this.messagesState) return this.renderMessages(renderWidth, this.messagesState);
+		if (this.screen === "actions" && this.actionState) return this.renderActions(renderWidth, this.actionState);
+		if (this.screen === "confirmContext" && this.contextConfirmState) return this.renderContextConfirm(renderWidth, this.contextConfirmState);
+		if (this.screen === "confirmFork" && this.forkConfirmState) return this.renderForkConfirm(renderWidth, this.forkConfirmState);
+		if (this.screen === "confirmModel" && this.confirmModelState) return this.renderConfirmModel(renderWidth, this.confirmModelState);
+		return this.renderSearch(renderWidth);
+	}
+
+	handleInput(data: string): void {
+		if (this.screen === "messages" && this.messagesState) this.handleMessagesInput(data);
+		else if (this.screen === "actions" && this.actionState) this.handleActionInput(data);
+		else if (this.screen === "confirmContext" && this.contextConfirmState) this.handleContextConfirmInput(data);
+		else if (this.screen === "confirmFork" && this.forkConfirmState) this.handleForkConfirmInput(data);
+		else if (this.screen === "confirmModel" && this.confirmModelState) this.handleConfirmModelInput(data);
+		else {
+			this.screen = "search";
+			this.handleSearchInput(data);
+		}
+		this.tui.requestRender();
+	}
+
+	private clampSelection(): void {
+		this.searchState.selected = Math.max(0, Math.min(this.searchState.selected, Math.max(0, this.searchState.results.length - 1)));
+	}
+
+	private sessionsForScope(scope = this.searchState.scope): QolSessionSearchSession[] {
+		if (scope === "all") return this.sessions;
+		return this.sessions.filter((session) => sameSessionSearchProject(session.cwd, this.cwd));
+	}
+
+	private updateResults(resetSelection = true): void {
+		const state = this.searchState;
+		const scopedSessions = this.sessionsForScope(state.scope);
+		state.results = searchQolSessionHits(scopedSessions, state.query, this.cwd);
+		state.total = scopedSessions.length;
+		if (resetSelection) state.selected = 0;
+		this.clampSelection();
+	}
+
+	private toggleScope(): void {
+		this.searchState.scope = this.searchState.scope === "current" ? "all" : "current";
+		this.updateResults(true);
+	}
+
+	private updateQuery(query: string, cursor: number): void {
+		this.searchState.query = query;
+		this.searchState.cursor = Math.max(0, Math.min(cursor, query.length));
+		this.updateResults(true);
+	}
+
+	private selectedMessageIndex(messages: QolSessionUserMessage[], query: string): number {
+		const trimmed = query.trim().toLowerCase();
+		if (trimmed) {
+			const firstToken = trimmed.replace(/^re:/, "").replace(/["']/g, "").split(/\s+/).find(Boolean);
+			if (firstToken) {
+				const found = messages.findIndex((message) => message.text.toLowerCase().includes(firstToken));
+				if (found >= 0) return found;
+			}
+		}
+		return Math.max(0, messages.length - 1);
+	}
+
+	private openMessages(result: QolSessionSearchResult, preferredMessage?: QolSessionUserMessage): void {
+		const messages = userMessagesForResult(result);
+		const preferredIndex = preferredMessage
+			? messages.findIndex((message) => message.index === preferredMessage.index || (message.entryId && message.entryId === preferredMessage.entryId))
+			: -1;
+		this.messagesState = {
+			messages,
+			result,
+			selected: preferredIndex >= 0 ? preferredIndex : this.selectedMessageIndex(messages, this.searchState.query),
+		};
+		this.screen = "messages";
+	}
+
+	private selectedFocusText(message: QolSessionUserMessage): string {
+		return `Focus on prompt #${message.index}: ${message.text}`;
+	}
+
+	private openContextConfirm(type: "summarize" | "newSession", result: QolSessionSearchResult, message: QolSessionUserMessage, returnScreen: "search" | "messages" | "actions"): void {
+		this.contextConfirmState = { message, result, returnScreen, type };
+		this.screen = "confirmContext";
+	}
+
+	private returnFromContextConfirm(state: QolSessionContextConfirmState): void {
+		this.contextConfirmState = undefined;
+		if (state.returnScreen === "actions" && this.actionState) this.screen = "actions";
+		else if (state.returnScreen === "messages" && this.messagesState) this.screen = "messages";
+		else this.screen = "search";
+	}
+
+	private confirmContextAction(state: QolSessionContextConfirmState): void {
+		this.done({ customPrompt: this.selectedFocusText(state.message), message: state.message, result: state.result, type: state.type });
+	}
+
+	private openForkConfirm(result: QolSessionSearchResult, message: QolSessionUserMessage, returnScreen: "search" | "messages" | "actions"): void {
+		const messages = userMessagesForResult(result);
+		const preferredIndex = messages.findIndex((candidate) => candidate.index === message.index || (message.entryId && candidate.entryId === message.entryId));
+		this.forkConfirmState = {
+			messages,
+			result,
+			returnScreen,
+			selected: preferredIndex >= 0 ? preferredIndex : 0,
+		};
+		this.screen = "confirmFork";
+	}
+
+	private returnFromForkConfirm(state: QolSessionForkConfirmState): void {
+		this.forkConfirmState = undefined;
+		if (state.returnScreen === "actions" && this.actionState) this.screen = "actions";
+		else if (state.returnScreen === "messages" && this.messagesState) this.screen = "messages";
+		else this.screen = "search";
+	}
+
+	private confirmForkAction(state: QolSessionForkConfirmState): void {
+		const message = state.messages[state.selected];
+		if (!message) return;
+		this.done({ message, result: state.result, type: "fork" });
+	}
+
+	private startResume(result: QolSessionSearchResult, returnScreen: "search" | "messages" | "actions"): void {
+		const previousModel = sessionModelInfo(result.path);
+		const current = this.currentModel;
+		if (previousModel && current && !sameModel(previousModel, current)) {
+			this.confirmModelState = { result, returnScreen, selected: 0, previousModel, currentModel: current };
+			this.screen = "confirmModel";
+			return;
+		}
+		this.done({ result, type: "resume" });
+	}
+
+	private returnFromConfirmModel(state: QolSessionConfirmModelState): void {
+		this.confirmModelState = undefined;
+		if (state.returnScreen === "actions" && this.actionState) this.screen = "actions";
+		else if (state.returnScreen === "messages" && this.messagesState) this.screen = "messages";
+		else this.screen = "search";
+	}
+
+	private confirmModelAction(state: QolSessionConfirmModelState): void {
+		this.done({ keepCurrentModel: state.selected === 1, result: state.result, type: "resume" });
+	}
+
+	private returnFromActions(): void {
+		this.actionState = undefined;
+		if (this.actionReturnScreen === "messages" && this.messagesState) this.screen = "messages";
+		else this.screen = "search";
+	}
+
+	private handleSearchInput(data: string): void {
+		const state = this.searchState;
+		if (matchesKey(data, "escape")) {
+			this.done({ type: "cancel" });
+			return;
+		}
+		if (matchesKey(data, "tab")) {
+			this.toggleScope();
+			return;
+		}
+		if (matchesKey(data, "return") || matchesKey(data, "enter")) {
+			const hit = state.results[state.selected];
+			if (!hit) return;
+			this.openMessages(hit.result, hit.message);
+			return;
+		}
+		if (matchesKey(data, "alt+c")) {
+			const hit = state.results[state.selected];
+			if (hit) this.done({ message: hit.message, result: hit.result, type: "copy" });
+			return;
+		}
+		if (matchesKey(data, "alt+f")) {
+			const hit = state.results[state.selected];
+			if (hit) this.openForkConfirm(hit.result, hit.message, "search");
+			return;
+		}
+		if (matchesKey(data, "alt+r")) {
+			const hit = state.results[state.selected];
+			if (hit) this.startResume(hit.result, "search");
+			return;
+		}
+		if (matchesKey(data, "alt+i")) {
+			const hit = state.results[state.selected];
+			if (hit) this.openContextConfirm("summarize", hit.result, hit.message, "search");
+			return;
+		}
+		if (matchesKey(data, "alt+n")) {
+			const hit = state.results[state.selected];
+			if (hit) this.openContextConfirm("newSession", hit.result, hit.message, "search");
+			return;
+		}
+		if (matchesKey(data, "alt+a")) {
+			const hit = state.results[state.selected];
+			if (hit) {
+				this.actionState = { message: hit.message, result: hit.result };
+				this.actionReturnScreen = "search";
+				this.screen = "actions";
+			}
+			return;
+		}
+		if (matchesKey(data, "up")) {
+			state.selected = Math.max(0, state.selected - 1);
+			return;
+		}
+		if (matchesKey(data, "down")) {
+			state.selected = Math.min(Math.max(0, state.results.length - 1), state.selected + 1);
+			return;
+		}
+		if (matchesKey(data, "-") || matchesKey(data, "pageup")) {
+			state.selected = Math.max(0, state.selected - this.searchMaxVisibleRows());
+			return;
+		}
+		if (matchesKey(data, "=") || matchesKey(data, "pagedown")) {
+			state.selected = Math.min(Math.max(0, state.results.length - 1), state.selected + this.searchMaxVisibleRows());
+			return;
+		}
+		if (matchesKey(data, "left")) {
+			state.cursor = Math.max(0, state.cursor - 1);
+			return;
+		}
+		if (matchesKey(data, "right")) {
+			state.cursor = Math.min(state.query.length, state.cursor + 1);
+			return;
+		}
+		if (matchesKey(data, "home") || matchesKey(data, "ctrl+a")) {
+			state.cursor = 0;
+			return;
+		}
+		if (matchesKey(data, "end") || matchesKey(data, "ctrl+e")) {
+			state.cursor = state.query.length;
+			return;
+		}
+		if (matchesKey(data, "ctrl+u")) {
+			this.updateQuery("", 0);
+			return;
+		}
+		if (matchesKey(data, "ctrl+w") || matchesKey(data, "alt+backspace")) {
+			const before = state.query.slice(0, state.cursor);
+			const after = state.query.slice(state.cursor);
+			let i = before.length;
+			while (i > 0 && /\s/.test(before[i - 1]!)) i -= 1;
+			while (i > 0 && !/\s/.test(before[i - 1]!)) i -= 1;
+			this.updateQuery(`${before.slice(0, i)}${after}`, i);
+			return;
+		}
+		if (matchesKey(data, "backspace")) {
+			if (state.cursor > 0) this.updateQuery(`${state.query.slice(0, state.cursor - 1)}${state.query.slice(state.cursor)}`, state.cursor - 1);
+			return;
+		}
+		if (matchesKey(data, "delete")) {
+			if (state.cursor < state.query.length) this.updateQuery(`${state.query.slice(0, state.cursor)}${state.query.slice(state.cursor + 1)}`, state.cursor);
+			return;
+		}
+		if (isPrintableInput(data)) this.updateQuery(`${state.query.slice(0, state.cursor)}${data}${state.query.slice(state.cursor)}`, state.cursor + data.length);
+	}
+
+	private handleMessagesInput(data: string): void {
+		const state = this.messagesState;
+		if (!state) return;
+		if (matchesKey(data, "escape") || matchesKey(data, "backspace")) {
+			this.screen = "search";
+			return;
+		}
+		if (matchesKey(data, "return") || matchesKey(data, "enter")) {
+			const message = state.messages[state.selected];
+			if (!message) return;
+			this.actionState = { message, result: state.result };
+			this.actionReturnScreen = "messages";
+			this.screen = "actions";
+			return;
+		}
+		if (matchesKey(data, "alt+r")) {
+			this.startResume(state.result, "messages");
+			return;
+		}
+		if (matchesKey(data, "alt+c")) {
+			const message = state.messages[state.selected];
+			if (message) this.done({ message, result: state.result, type: "copy" });
+			return;
+		}
+		if (matchesKey(data, "alt+f")) {
+			const message = state.messages[state.selected];
+			if (message) this.openForkConfirm(state.result, message, "messages");
+			return;
+		}
+		if (matchesKey(data, "alt+i")) {
+			const message = state.messages[state.selected];
+			if (message) this.openContextConfirm("summarize", state.result, message, "messages");
+			return;
+		}
+		if (matchesKey(data, "alt+n")) {
+			const message = state.messages[state.selected];
+			if (message) this.openContextConfirm("newSession", state.result, message, "messages");
+			return;
+		}
+		if (matchesKey(data, "up")) {
+			state.selected = Math.max(0, state.selected - 1);
+			return;
+		}
+		if (matchesKey(data, "down")) {
+			state.selected = Math.min(state.messages.length - 1, state.selected + 1);
+			return;
+		}
+		if (matchesKey(data, "-") || matchesKey(data, "pageup")) {
+			state.selected = Math.max(0, state.selected - this.messageMaxVisibleRows());
+			return;
+		}
+		if (matchesKey(data, "=") || matchesKey(data, "pagedown")) {
+			state.selected = Math.min(state.messages.length - 1, state.selected + this.messageMaxVisibleRows());
+			return;
+		}
+		if (matchesKey(data, "home") || matchesKey(data, "ctrl+a")) {
+			state.selected = 0;
+			return;
+		}
+		if (matchesKey(data, "end") || matchesKey(data, "ctrl+e")) {
+			state.selected = Math.max(0, state.messages.length - 1);
+		}
+	}
+
+	private handleActionInput(data: string): void {
+		const state = this.actionState;
+		if (!state) return;
+		if (matchesKey(data, "escape") || matchesKey(data, "backspace")) {
+			this.returnFromActions();
+			return;
+		}
+		if (matchesKey(data, "alt+c")) {
+			this.done({ message: state.message, result: state.result, type: "copy" });
+			return;
+		}
+		if (matchesKey(data, "alt+f")) {
+			this.openForkConfirm(state.result, state.message, "actions");
+			return;
+		}
+		if (matchesKey(data, "alt+r")) {
+			this.startResume(state.result, "actions");
+			return;
+		}
+		if (matchesKey(data, "alt+i")) {
+			this.openContextConfirm("summarize", state.result, state.message, "actions");
+			return;
+		}
+		if (matchesKey(data, "alt+n")) {
+			this.openContextConfirm("newSession", state.result, state.message, "actions");
+			return;
+		}
+	}
+
+	private handleContextConfirmInput(data: string): void {
+		const state = this.contextConfirmState;
+		if (!state) return;
+		if (matchesKey(data, "escape") || matchesKey(data, "backspace")) {
+			this.returnFromContextConfirm(state);
+			return;
+		}
+		if (matchesKey(data, "return") || matchesKey(data, "enter")) {
+			this.confirmContextAction(state);
+		}
+	}
+
+	private handleConfirmModelInput(data: string): void {
+		const state = this.confirmModelState;
+		if (!state) return;
+		if (matchesKey(data, "escape") || matchesKey(data, "backspace")) {
+			this.returnFromConfirmModel(state);
+			return;
+		}
+		if (matchesKey(data, "up") || matchesKey(data, "down")) {
+			state.selected = state.selected === 0 ? 1 : 0;
+			return;
+		}
+		if (matchesKey(data, "return") || matchesKey(data, "enter")) {
+			this.confirmModelAction(state);
+		}
+	}
+
+	private handleForkConfirmInput(data: string): void {
+		const state = this.forkConfirmState;
+		if (!state) return;
+		if (matchesKey(data, "escape") || matchesKey(data, "backspace")) {
+			this.returnFromForkConfirm(state);
+			return;
+		}
+		if (matchesKey(data, "return") || matchesKey(data, "enter")) {
+			this.confirmForkAction(state);
+			return;
+		}
+		if (matchesKey(data, "up")) {
+			state.selected = Math.max(0, state.selected - 1);
+			return;
+		}
+		if (matchesKey(data, "down")) {
+			state.selected = Math.min(Math.max(0, state.messages.length - 1), state.selected + 1);
+			return;
+		}
+		if (matchesKey(data, "-") || matchesKey(data, "pageup")) {
+			state.selected = Math.max(0, state.selected - this.forkConfirmMaxVisibleRows());
+			return;
+		}
+		if (matchesKey(data, "=") || matchesKey(data, "pagedown")) {
+			state.selected = Math.min(Math.max(0, state.messages.length - 1), state.selected + this.forkConfirmMaxVisibleRows());
+			return;
+		}
+		if (matchesKey(data, "home") || matchesKey(data, "ctrl+a")) {
+			state.selected = 0;
+			return;
+		}
+		if (matchesKey(data, "end") || matchesKey(data, "ctrl+e")) {
+			state.selected = Math.max(0, state.messages.length - 1);
+		}
+	}
+
+	private renderSearch(width: number): string[] {
+		const { bottom, divider, empty, filledRow, inner, row, top } = boxParts(width, this.theme);
+		const state = this.searchState;
+		const compact = this.compactSearchLayout();
+		const lines: string[] = [top("Session Search", `${state.results.length} hits`), empty()];
+		const accent = (s: string) => this.theme.fg("accent", s);
+		const dim = (s: string) => this.theme.fg("dim", s);
+		const muted = (s: string) => this.theme.fg("muted", s);
+		const cursorChar = state.query[state.cursor] ?? " ";
+		const queryDisplay = `${state.query.slice(0, state.cursor)}${this.theme.inverse(cursorChar)}${state.query.slice(state.cursor + (state.cursor < state.query.length ? 1 : 0))}`;
+		lines.push(row(this.renderScopeTabs(inner)));
+		if (!compact) lines.push(empty());
+		lines.push(filledRow(` > ${queryDisplay}`));
+		if (!compact) lines.push(row(dim(`tokens · re:<pattern> regex · "phrase" exact`)));
+		lines.push(divider());
+
+		if (state.results.length === 0) {
+			lines.push(row(muted(state.query.trim() ? "No prompts match your search" : "No prompts found")));
+		} else {
+			lines.push(...this.renderSearchHitPane(inner, row, dim, muted, accent));
+		}
+
+		lines.push(divider());
+		if (compact) {
+			lines.push(row(`${ansiYellow("alt+c/f/r/i/n/a")} ${dim("actions")}  ${ansiYellow("tab")} ${dim("scope")}`));
+		} else {
+			lines.push(row(`${ansiYellow("-/=")} ${dim("page")}  ${ansiYellow("alt+c")} ${dim("copy")}  ${ansiYellow("alt+f")} ${dim("fork")}  ${ansiYellow("alt+r")} ${dim("resume")}`));
+			lines.push(row(`${ansiYellow("alt+i")} ${dim("inject+ctx")}  ${ansiYellow("alt+n")} ${dim("new+ctx")}  ${ansiYellow("alt+a")} ${dim("actions")}  ${ansiYellow("tab")} ${dim("scope")}`));
+		}
+		lines.push(bottom());
+		return lines;
+	}
+
+	private renderSearchHitPane(
+		inner: number,
+		row: (content?: string) => string,
+		dim: (s: string) => string,
+		muted: (s: string) => string,
+		accent: (s: string) => string,
+	): string[] {
+		const state = this.searchState;
+		const compact = this.compactSearchLayout();
+		const maxVisible = this.searchMaxVisibleRows();
+		const start = Math.max(0, Math.min(state.selected - Math.floor(maxVisible / 2), state.results.length - maxVisible));
+		const end = Math.min(start + maxVisible, state.results.length);
+		const gap = ` ${dim("│")} `;
+		const twoPane = inner >= 72;
+		const rightWidth = twoPane ? Math.max(24, Math.floor(inner * 0.43)) : 0;
+		const leftWidth = twoPane ? Math.max(24, inner - rightWidth - visibleWidth(gap)) : inner;
+		const paneRows = Math.max(1, (end - start) * 3 - 1);
+		const selectedHit = state.results[state.selected];
+		const rightLines = twoPane ? this.renderPromptPreviewLines(selectedHit, rightWidth, paneRows, dim, muted, accent) : [];
+		const fixed = (content: string, colWidth: number, selected = false): string => {
+			const safe = content.replace(/[\r\n\t]+/g, " ");
+			const clipped = truncateToWidth(safe, colWidth, "");
+			const padded = clipped + " ".repeat(Math.max(0, colWidth - visibleWidth(clipped)));
+			return selected ? this.theme.bg("selectedBg", padded) : padded;
+		};
+		const leftLines: string[] = [];
+		for (let i = start; i < end; i++) {
+			const hit = state.results[i]!;
+			const selected = i === state.selected;
+			const promptDate = new Date(promptRecencyTime(hit));
+			const metadata = dim(`#${hit.message.index} · ${formatSessionSearchDate(promptDate)}`);
+			const titleText = truncateToWidth(sessionResumeTitle(hit.result), Math.max(8, leftWidth - visibleWidth(metadata) - 1), "…");
+			const title = accent(titleText);
+			const snippet = styleSessionSnippet(hit.snippet || hit.message.text, state.query, this.theme);
+			leftLines.push(fixed(selected ? this.theme.bold(snippet) : snippet, leftWidth, selected));
+			leftLines.push(fixed(`${title} ${metadata}`, leftWidth, selected));
+			if (i < end - 1) leftLines.push(fixed(dim("─".repeat(Math.max(8, leftWidth))), leftWidth));
+		}
+		const output: string[] = [];
+		for (let i = 0; i < leftLines.length; i++) {
+			if (twoPane) output.push(row(`${leftLines[i] ?? ""}${gap}${rightLines[i] ?? " ".repeat(rightWidth)}`));
+			else output.push(row(leftLines[i] ?? ""));
+		}
+		if (!twoPane && selectedHit) {
+			output.push(row(dim("─".repeat(Math.max(8, inner)))));
+			for (const line of this.renderPromptPreviewLines(selectedHit, inner, Math.min(5, paneRows), dim, muted, accent)) output.push(row(line));
+		}
+		if (!compact && state.results.length > maxVisible) output.push(row(dim(`${state.selected + 1}/${state.results.length} ${state.query.trim() ? "matches" : "recent prompts"}`)));
+		return output;
+	}
+
+	private renderPromptPreviewLines(
+		hit: QolSessionSearchHit | undefined,
+		width: number,
+		maxLines: number,
+		dim: (s: string) => string,
+		muted: (s: string) => string,
+		accent: (s: string) => string,
+	): string[] {
+		const fixed = (content: string): string => {
+			const clipped = truncateToWidth(content.replace(/[\r\n\t]+/g, " "), width, "…");
+			return clipped + " ".repeat(Math.max(0, width - visibleWidth(clipped)));
+		};
+		if (!hit) return Array.from({ length: maxLines }, () => fixed(""));
+		const title = accent("Prompt preview");
+		const cwd = muted(truncateToWidth(shortPathForUi(hit.result.cwd || hit.result.path), width, "…"));
+		const bodyBudget = Math.max(1, maxLines - 3);
+		const body = wrapVisible(styleSessionSnippet(hit.message.text, this.searchState.query, this.theme), width, bodyBudget);
+		const lines = [fixed(title), fixed(cwd), fixed(dim("─".repeat(Math.max(8, width)))), ...body.map(fixed)];
+		while (lines.length < maxLines) lines.push(fixed(""));
+		return lines.slice(0, maxLines);
+	}
+
+	private renderScopeTabs(inner: number): string {
+		const tabs: { id: QolSessionSearchScope; label: string }[] = [
+			{ id: "current", label: "Project" },
+			{ id: "all", label: "All" },
+		];
+		const parts = tabs.map((tab) => {
+			const label = ` ${truncateToWidth(tab.label, 18, "…")} `;
+			if (tab.id === this.searchState.scope) return this.theme.fg("accent", this.theme.inverse(this.theme.bold(label)));
+			return this.theme.bg("selectedBg", this.theme.fg("accent", label));
+		});
+		return truncateToWidth(parts.join(" "), inner, "");
+	}
+
+	private renderMessages(width: number, state: QolSessionMessagesState): string[] {
+		const { bottom, divider, empty, inner, row, selectedRow, top } = boxParts(width, this.theme);
+		const accent = (s: string) => this.theme.fg("accent", s);
+		const dim = (s: string) => this.theme.fg("dim", s);
+		const muted = (s: string) => this.theme.fg("muted", s);
+		const result = state.result;
+		const lines: string[] = [top("Session Prompts", `${state.selected + 1}/${state.messages.length}`), empty()];
+		const pair = (left: string, right: string) => {
+			const leftWidth = Math.max(1, inner - visibleWidth(right) - 1);
+			const clippedLeft = truncateToWidth(left, leftWidth, "…");
+			const gap = Math.max(1, inner - visibleWidth(clippedLeft) - visibleWidth(right));
+			return `${clippedLeft}${" ".repeat(gap)}${right}`;
+		};
+		const right = dim(formatSessionSearchDate(result.modified));
+		const title = truncateToWidth(sessionResumeTitle(result), Math.max(12, inner - visibleWidth(right) - 1), "…");
+		lines.push(row(pair(this.theme.bold(accent(title)), right)));
+		lines.push(row(muted(truncateToWidth(shortPathForUi(result.cwd || result.path), inner, "…"))));
+		lines.push(empty(), divider(), empty());
+
+		const maxVisible = this.messageMaxVisibleRows();
+		const start = Math.max(0, Math.min(state.selected - Math.floor(maxVisible / 2), state.messages.length - maxVisible));
+		const end = Math.min(start + maxVisible, state.messages.length);
+		for (let i = start; i < end; i++) {
+			const message = state.messages[i]!;
+			const selected = i === state.selected;
+			const numberPlain = `#${message.index}`;
+			const number = selected ? this.theme.fg("text", numberPlain) : dim(numberPlain);
+			const textWidth = Math.max(12, inner - visibleWidth(number) - 1);
+			const text = truncateToWidth(message.text, textWidth, "…");
+			const messageRow = `${number} ${selected ? this.theme.bold(accent(text)) : text}`;
+			lines.push(selected ? selectedRow(messageRow) : row(messageRow));
+		}
+		lines.push(divider(), empty());
+		lines.push(row(`${ansiYellow("-/=")} ${dim("page")}  ${ansiYellow("alt+c")} ${dim("copy")}  ${ansiYellow("alt+f")} ${dim("fork")}  ${ansiYellow("alt+r")} ${dim("resume")}`));
+		lines.push(row(`${ansiYellow("alt+i")} ${dim("inject+ctx")}  ${ansiYellow("alt+n")} ${dim("new+ctx")}`));
+		lines.push(bottom());
+		return lines;
+	}
+
+	private renderActions(width: number, state: QolSessionActionState): string[] {
+		const { bottom, divider, empty, inner, row, top } = boxParts(width, this.theme);
+		const accent = (s: string) => this.theme.fg("accent", s);
+		const dim = (s: string) => this.theme.fg("dim", s);
+		const muted = (s: string) => this.theme.fg("muted", s);
+		const lines: string[] = [top("Prompt Actions"), empty()];
+		const title = truncateToWidth(sessionResumeTitle(state.result), Math.max(12, inner - visibleWidth(`#${state.message.index}`) - 2), "…");
+		lines.push(row(`${this.theme.bold(accent(title))}  ${dim(`#${state.message.index}`)}`));
+		lines.push(row(muted(truncateToWidth(shortPathForUi(state.result.cwd || state.result.path), inner, "…"))));
+		lines.push(empty(), divider(), empty());
+		lines.push(row(dim("Selected prompt")));
+		const wrapped = wrapVisible(state.message.text, inner, 4);
+		for (const line of wrapped) lines.push(row(line));
+		lines.push(empty(), divider(), empty());
+		const helpLines = [
+			"Fork session from here opens the source session at the point before this prompt and places the prompt in the editor; submit to branch from there.",
+			"Copy Prompt copies this prompt into your current editor.",
+			"Inject + Context summarizes the source session into the current session, focused on this prompt.",
+			"New + Context creates a fresh session and imports that focused summary there.",
+		];
+		for (const help of helpLines) {
+			for (const line of wrapVisible(dim(help), inner, 2)) lines.push(row(line));
+		}
+		lines.push(empty(), divider(), empty());
+		lines.push(row(`${ansiYellow("alt+c")} ${dim("copy")}  ${ansiYellow("alt+f")} ${dim("fork")}  ${ansiYellow("alt+r")} ${dim("resume")}`));
+		lines.push(row(`${ansiYellow("alt+i")} ${dim("inject+ctx")}  ${ansiYellow("alt+n")} ${dim("new+ctx")}`));
+		lines.push(bottom());
+		return lines;
+	}
+
+	private renderConfirmModel(width: number, state: QolSessionConfirmModelState): string[] {
+		const { bottom, divider, empty, inner, row, top } = boxParts(width, this.theme);
+		const accent = (s: string) => this.theme.fg("accent", s);
+		const dim = (s: string) => this.theme.fg("dim", s);
+		const muted = (s: string) => this.theme.fg("muted", s);
+		const warning = (s: string) => this.theme.fg("warning", s);
+		const previousLabel = modelLabel(state.previousModel);
+		const currentLabel = modelLabel(state.currentModel);
+		const lines: string[] = [top("Choose model"), empty()];
+		const title = truncateToWidth(sessionResumeTitle(state.result), inner, "…");
+		lines.push(row(this.theme.bold(warning("Model differs from current session"))));
+		lines.push(row(accent(`“${title}”`)));
+		lines.push(row(muted(truncateToWidth(shortPathForUi(state.result.cwd || state.result.path), inner, "…"))));
+		lines.push(empty());
+		lines.push(row(`${dim("Session model: ")}${warning(previousLabel)}`));
+		lines.push(row(`${dim("Current model: ")}${warning(currentLabel)}`));
+		lines.push(empty());
+		for (const help of [
+			"Previous model resumes exactly as saved.",
+			"Current model writes a model-change event before resume, so full context transfers and future turns use it.",
+		]) {
+			for (const line of wrapVisible(dim(help), inner, 2)) lines.push(row(line));
+		}
+		lines.push(empty(), divider(), empty());
+		const optionRow = (index: 0 | 1, label: string, model: string): string => {
+			const selected = state.selected === index;
+			const prefix = selected ? "› " : "  ";
+			const content = `${warning(prefix)}${selected ? this.theme.fg("text", label) : dim(label)}${dim(" — ")}${selected ? warning(model) : muted(model)}`;
+			const body = truncateToWidth(content, inner, "…") + " ".repeat(Math.max(0, inner - visibleWidth(truncateToWidth(content, inner, "…"))));
+			return selected ? this.theme.bg("selectedBg", body) : body;
+		};
+		lines.push(row(optionRow(0, "Continue with previous model", previousLabel)));
+		lines.push(row(optionRow(1, "Continue with current model", currentLabel)));
+		lines.push(empty(), divider(), empty());
+		lines.push(row(`${ansiYellow("↑/↓")} ${dim("choose")}  ${ansiYellow("enter")} ${dim("resume")}  ${ansiYellow("backspace")} ${dim("back")}`));
+		lines.push(bottom());
+		return lines;
+	}
+
+	private renderForkConfirm(width: number, state: QolSessionForkConfirmState): string[] {
+		const { bottom, divider, empty, inner, row, selectedRow, top } = boxParts(width, this.theme);
+		const accent = (s: string) => this.theme.fg("accent", s);
+		const dim = (s: string) => this.theme.fg("dim", s);
+		const muted = (s: string) => this.theme.fg("muted", s);
+		const lines: string[] = [top("Fork Session", `${state.selected + 1}/${state.messages.length}`), empty()];
+		const title = truncateToWidth(sessionResumeTitle(state.result), inner, "…");
+		lines.push(row(this.theme.bold(accent(title))));
+		lines.push(row(muted(truncateToWidth(shortPathForUi(state.result.cwd || state.result.path), inner, "…"))));
+		lines.push(empty(), divider(), empty());
+		for (const line of wrapVisible(dim("Choose the prompt to fork from. Pi will open the source session before that prompt and place the prompt in the editor."), inner, 2)) {
+			lines.push(row(line));
+		}
+		lines.push(empty());
+
+		const maxVisible = this.forkConfirmMaxVisibleRows();
+		const start = Math.max(0, Math.min(state.selected - Math.floor(maxVisible / 2), state.messages.length - maxVisible));
+		const end = Math.min(start + maxVisible, state.messages.length);
+		for (let i = start; i < end; i++) {
+			const message = state.messages[i]!;
+			const selected = i === state.selected;
+			const numberPlain = `#${message.index}`;
+			const number = selected ? this.theme.fg("text", numberPlain) : dim(numberPlain);
+			const textWidth = Math.max(12, inner - visibleWidth(number) - 1);
+			const text = truncateToWidth(message.text, textWidth, "…");
+			const messageRow = `${number} ${selected ? this.theme.bold(accent(text)) : text}`;
+			lines.push(selected ? selectedRow(messageRow) : row(messageRow));
+		}
+		if (state.messages.length > maxVisible) lines.push(row(dim(`${state.selected + 1}/${state.messages.length} prompts`)));
+		lines.push(divider(), empty());
+		lines.push(row(`${ansiYellow("backspace")} ${dim("back")}`));
+		lines.push(bottom());
+		return lines;
+	}
+
+	private renderContextConfirm(width: number, state: QolSessionContextConfirmState): string[] {
+		const { bottom, divider, empty, inner, row, top } = boxParts(width, this.theme);
+		const accent = (s: string) => this.theme.fg("accent", s);
+		const dim = (s: string) => this.theme.fg("dim", s);
+		const muted = (s: string) => this.theme.fg("muted", s);
+		const action = state.type === "newSession" ? "New + Context" : "Inject + Context";
+		const verb = state.type === "newSession" ? "create new session with context" : "inject context";
+		const lines: string[] = [top(action), empty()];
+		lines.push(row(`${accent(sessionResumeTitle(state.result))}  ${dim(`#${state.message.index}`)}`));
+		lines.push(row(muted(truncateToWidth(shortPathForUi(state.result.cwd || state.result.path), inner, "…"))));
+		lines.push(empty(), divider(), empty());
+		const details = [
+			"This summarizes the entire source session, including messages after this prompt.",
+			"The selected prompt is used as the focus for the summary, not as a cutoff point.",
+			state.type === "newSession"
+				? "New + Context creates a fresh session and imports that focused summary there."
+				: "Inject + Context adds that focused summary to your current session.",
+		];
+		for (const detail of details) {
+			for (const line of wrapVisible(dim(detail), inner, 2)) lines.push(row(line));
+		}
+		lines.push(empty(), divider(), empty());
+		lines.push(row(`${ansiYellow("backspace")} ${dim("back")}`));
+		lines.push(bottom());
+		return lines;
+	}
+
+}
+
+export class QolSessionSearchLoadingComponent {
+	private readonly controller = new AbortController();
+	private readonly startedAt = Date.now();
+	private frame = 0;
+	private timer: ReturnType<typeof setInterval> | undefined;
+
+	constructor(
+		private readonly tui: { requestRender(): void },
+		private readonly theme: Theme,
+		private readonly title: string,
+		private readonly message: string,
+		private readonly done: (value: null) => void,
+	) {
+		this.timer = setInterval(() => {
+			this.frame += 1;
+			this.tui.requestRender();
+		}, 180);
+		this.timer.unref?.();
+	}
+
+	get signal(): AbortSignal {
+		return this.controller.signal;
+	}
+
+	dispose(): void {
+		if (this.timer) clearInterval(this.timer);
+		this.timer = undefined;
+	}
+
+	invalidate(): void {}
+
+	handleInput(data: string): void {
+		if (!matchesKey(data, "escape") && !matchesKey(data, "ctrl+c")) return;
+		if (!this.controller.signal.aborted) this.controller.abort();
+		this.dispose();
+		this.done(null);
+	}
+
+	render(width: number): string[] {
+		const { bottom, divider, empty, row, top } = boxParts(width, this.theme);
+		const dim = (s: string) => this.theme.fg("dim", s);
+		const muted = (s: string) => this.theme.fg("muted", s);
+		const accent = (s: string) => this.theme.fg("accent", s);
+		const frames = ["|", "/", "-", "\\"];
+		const elapsed = `${Math.max(0, Math.floor((Date.now() - this.startedAt) / 1000))}s`;
+		const indicator = accent(frames[this.frame % frames.length]!);
+		return [
+			top(this.title, elapsed),
+			empty(),
+			row(`${indicator} ${muted(this.message)}`),
+			row(dim("Long sessions may take a few seconds to summarize.")),
+			empty(),
+			divider(),
+			empty(),
+			bottom(),
+		];
+	}
+}