@oh-my-pi/pi-coding-agent 15.9.0 → 15.9.3

package/src/modes/components/agent-dashboard.ts

@@ -7,7 +7,7 @@
  *
  * Controls:
  * - Up/Down or j/k: move selection
- * - Tab / Shift+Tab: switch source tab
+ * - Tab / Shift+Tab or Left/Right: switch source tab
  * - Space: enable/disable selected agent
  * - Enter: edit model override for selected agent
  * - N: start agent creation flow
@@ -20,6 +20,7 @@ import type { AgentMessage } from "@oh-my-pi/pi-agent-core";
 import {
 	type Component,
 	Container,
+	Editor,
 	extractPrintableText,
 	fuzzyMatch,
 	Input,
@@ -49,7 +50,7 @@ import { createAgentSession } from "../../sdk";
 import { discoverAgents } from "../../task/discovery";
 import type { AgentDefinition, AgentSource } from "../../task/types";
 import { shortenPath } from "../../tools/render-utils";
-import { theme } from "../theme/theme";
+import { getEditorTheme, theme } from "../theme/theme";
 import { matchesAppInterrupt, matchesSelectDown, matchesSelectUp } from "../utils/keybinding-matchers";
 import { DynamicBorder } from "./dynamic-border";
 
@@ -97,8 +98,10 @@ const SOURCE_LABEL: Record<AgentSource, string> = {
 	bundled: "Bundled",
 };
 
-const IDENTIFIER_PATTERN = /^[a-z0-9]+(?:-[a-z0-9]+){1,5}$/;
+const LIST_FOOTER =
+	" ↑/↓: navigate  Space: toggle  Enter: model override  N: new agent  ←/→: source  Ctrl+R: reload  Esc: close";
 
+const IDENTIFIER_PATTERN = /^[a-z0-9]+(?:-[a-z0-9]+){1,5}$/;
 function joinPatterns(patterns: string[]): string {
 	if (patterns.length === 0) return "(session model)";
 	return patterns.join(", ");
@@ -307,7 +310,7 @@ class TwoColumnBody implements Component {
 		const rightWidth = width - leftWidth - 3;
 		const leftLines = this.leftPane.render(leftWidth);
 		const rightLines = this.rightPane.render(rightWidth);
-		const lineCount = Math.min(this.maxHeight, Math.max(leftLines.length, rightLines.length));
+		const lineCount = this.maxHeight;
 		const out: string[] = [];
 		const separator = theme.fg("dim", ` ${theme.boxSharp.vertical} `);
 
@@ -339,11 +342,13 @@ export class AgentDashboard extends Container {
 	#loading = true;
 	#loadError: string | null = null;
 	#notice: string | null = null;
+	#builtRows = -1;
+	#builtCols = -1;
 
 	#editInput: Input | null = null;
 	#editingAgentName: string | null = null;
 
-	#createInput: Input | null = null;
+	#createInput: Editor | null = null;
 	#createDescription = "";
 	#createScope: AgentScope = "project";
 	#createGenerating = false;
@@ -466,8 +471,46 @@ export class AgentDashboard extends Container {
 		this.#clampSelection();
 	}
 
+	/** Live terminal height so the dashboard tracks resize while open. */
+	#terminalRows(): number {
+		return process.stdout.rows || this.terminalHeight || 24;
+	}
+
+	#noticeBlockLines(): number {
+		if (!this.#notice) return 0;
+		return wrapTextWithAnsi(theme.fg("success", replaceTabs(this.#notice)), this.#uiWidth()).length + 1;
+	}
+
+	#footerLines(): number {
+		return Math.max(1, wrapTextWithAnsi(theme.fg("dim", LIST_FOOTER), this.#uiWidth()).length);
+	}
+
+	/** Height budget for the two-column body, sized to the live terminal. */
+	#computeBodyHeight(): number {
+		// Chrome around the body: top border + title + tab bar + spacer (4),
+		// optional notice block, then spacer + footer + bottom border.
+		const chrome = 4 + this.#noticeBlockLines() + 1 + this.#footerLines() + 1;
+		return Math.max(5, this.#terminalRows() - chrome);
+	}
+
 	#getMaxVisibleItems(): number {
-		return Math.max(5, this.terminalHeight - 14);
+		// List pane chrome inside the body: search line, blank line, count line.
+		return Math.max(3, this.#computeBodyHeight() - 3);
+	}
+
+	override render(width: number): string[] {
+		// Rebuild when terminal geometry changes so the full-screen overlay
+		// re-fits on resize.
+		if (this.#terminalRows() !== this.#builtRows || this.#uiWidth() !== this.#builtCols) {
+			this.#buildLayout();
+		}
+		const lines = super.render(width);
+		// Pad to the full viewport so every state (list, edit, create) covers the
+		// screen as a true full-screen view instead of letting the transcript peek
+		// through below it.
+		const rows = this.#terminalRows();
+		while (lines.length < rows) lines.push("");
+		return lines;
 	}
 
 	#clampSelection(): void {
@@ -557,10 +600,15 @@ export class AgentDashboard extends Container {
 		this.#createError = null;
 		this.#createSpec = null;
 		this.#createDescription = "";
-		this.#createInput = new Input();
-		this.#createInput.onSubmit = value => {
-			void this.#generateAgentFromDescription(value);
+		const editor = new Editor(getEditorTheme());
+		editor.setBorderVisible(false);
+		editor.setPromptGutter("> ");
+		editor.setMaxHeight(Math.max(3, Math.min(8, this.#terminalRows() - 12)));
+		editor.disableSubmit = true;
+		editor.onChange = value => {
+			this.#createDescription = value;
 		};
+		this.#createInput = editor;
 		this.#buildLayout();
 	}
 
@@ -578,6 +626,20 @@ export class AgentDashboard extends Container {
 		this.#buildLayout();
 	}
 
+	#submitCreateDescription(): void {
+		if (!this.#createInput || this.#createGenerating) return;
+		const description = this.#createInput.getExpandedText();
+		this.#createDescription = description;
+		void this.#generateAgentFromDescription(description);
+	}
+
+	#insertCreateNewline(): void {
+		if (!this.#createInput || this.#createGenerating) return;
+		this.#createInput.handleInput("\n");
+		this.#createDescription = this.#createInput.getExpandedText();
+		this.#buildLayout();
+	}
+
 	async #generateAgentFromDescription(rawDescription: string): Promise<void> {
 		const description = rawDescription.trim();
 		this.#createDescription = description;
@@ -626,7 +688,7 @@ export class AgentDashboard extends Container {
 			throw new Error("No available model to generate agent specification.");
 		}
 
-		const systemPrompt = prompt.render(agentCreationArchitectPrompt, { TASK_TOOL_NAME: "task" });
+		const systemPrompt = prompt.render(agentCreationArchitectPrompt, {});
 		const userPrompt = prompt.render(agentCreationUserPrompt, { request: description });
 
 		const { session } = await createAgentSession({
@@ -694,10 +756,14 @@ export class AgentDashboard extends Container {
 			}
 		}
 
-		const frontmatter = YAML.stringify({
-			name: spec.identifier,
-			description: spec.whenToUse,
-		}).trimEnd();
+		const frontmatter = YAML.stringify(
+			{
+				name: spec.identifier,
+				description: spec.whenToUse,
+			},
+			null,
+			2,
+		).trimEnd();
 		const content = `---\n${frontmatter}\n---\n\n${spec.systemPrompt.trim()}\n`;
 		await Bun.write(filePath, content);
 		await this.#reloadData();
@@ -789,13 +855,13 @@ export class AgentDashboard extends Container {
 		}
 		return parts.join("");
 	}
-
 	#renderCreateInput(): void {
 		this.addChild(new Text(theme.bold(theme.fg("accent", " Create New Agent")), 0, 0));
 		this.addChild(new Spacer(1));
 		this.addChild(new Text(theme.fg("muted", "Describe what the new agent should do:"), 0, 0));
 		this.addChild(new Spacer(1));
 		if (this.#createInput) {
+			this.#createInput.setMaxHeight(Math.max(3, Math.min(8, this.#terminalRows() - 12)));
 			this.addChild(this.#createInput);
 		}
 		this.addChild(new Spacer(1));
@@ -805,7 +871,7 @@ export class AgentDashboard extends Container {
 			this.addChild(new Text(theme.fg("accent", "Generating agent specification..."), 0, 0));
 			if (this.#createStreamingText) {
 				this.addChild(new Spacer(1));
-				const maxPreview = Math.max(3, this.terminalHeight - 18);
+				const maxPreview = Math.max(3, this.#terminalRows() - 18);
 				const contentWidth = Math.max(20, this.#uiWidth() - 4);
 				const wrappedLines: string[] = [];
 				for (const raw of this.#createStreamingText.split("\n")) {
@@ -826,7 +892,9 @@ export class AgentDashboard extends Container {
 			this.addChild(new Text(theme.fg("error", replaceTabs(this.#createError)), 0, 0));
 		}
 		this.addChild(new Spacer(1));
-		const hints = this.#createGenerating ? " Generating..." : " Enter: generate  Tab: toggle scope  Esc: cancel";
+		const hints = this.#createGenerating
+			? " Generating..."
+			: " Ctrl+Enter: generate  Enter: newline  Tab: toggle scope  Esc: cancel";
 		this.addChild(new Text(theme.fg("dim", hints), 0, 0));
 	}
 
@@ -968,22 +1036,15 @@ export class AgentDashboard extends Container {
 				effectivePatterns,
 				effectiveResolution,
 			);
-			const bodyHeight = Math.max(5, this.terminalHeight - 8);
+			const bodyHeight = this.#computeBodyHeight();
 			this.addChild(new TwoColumnBody(listPane, inspector, bodyHeight));
 			this.addChild(new Spacer(1));
-			this.addChild(
-				new Text(
-					theme.fg(
-						"dim",
-						" ↑/↓: navigate  Space: toggle  Enter: model override  N: new agent  Tab: source  Ctrl+R: reload  Esc: close",
-					),
-					0,
-					0,
-				),
-			);
+			this.addChild(new Text(theme.fg("dim", LIST_FOOTER), 0, 0));
 		}
 
 		this.addChild(new DynamicBorder());
+		this.#builtRows = this.#terminalRows();
+		this.#builtCols = this.#uiWidth();
 	}
 
 	handleInput(data: string): void {
@@ -1024,13 +1085,24 @@ export class AgentDashboard extends Container {
 				}
 				return;
 			}
+			if (
+				!this.#createGenerating &&
+				(matchesKey(data, "ctrl+enter") || (data.charCodeAt(0) === 10 && data.length > 1))
+			) {
+				this.#submitCreateDescription();
+				return;
+			}
+			if (!this.#createGenerating && (matchesKey(data, "enter") || matchesKey(data, "return") || data === "\n")) {
+				this.#insertCreateNewline();
+				return;
+			}
 			if (!this.#createGenerating && (matchesKey(data, "tab") || matchesKey(data, "shift+tab"))) {
 				this.#toggleCreateScope();
 				return;
 			}
 			if (!this.#createGenerating && this.#createInput) {
 				this.#createInput.handleInput(data);
-				this.#createDescription = this.#createInput.getValue();
+				this.#createDescription = this.#createInput.getExpandedText();
 				this.#buildLayout();
 			}
 			return;
@@ -1064,11 +1136,11 @@ export class AgentDashboard extends Container {
 			return;
 		}
 
-		if (matchesKey(data, "tab")) {
+		if (matchesKey(data, "tab") || matchesKey(data, "right")) {
 			this.#switchTab(1);
 			return;
 		}
-		if (matchesKey(data, "shift+tab")) {
+		if (matchesKey(data, "shift+tab") || matchesKey(data, "left")) {
 			this.#switchTab(-1);
 			return;
 		}

package/src/modes/components/extensions/extension-dashboard.ts

@@ -20,6 +20,7 @@ import {
 	Text,
 	truncateToWidth,
 	visibleWidth,
+	wrapTextWithAnsi,
 } from "@oh-my-pi/pi-tui";
 import { Settings } from "../../../config/settings";
 import { DynamicBorder } from "../../../modes/components/dynamic-border";
@@ -37,11 +38,15 @@ import {
 } from "./state-manager";
 import type { DashboardState } from "./types";
 
+const EXT_FOOTER = " ↑/↓: navigate  Space: toggle  ←/→: provider  Esc: close";
+
 export class ExtensionDashboard extends Container {
 	#state!: DashboardState;
 	#mainList!: ExtensionList;
 	#inspector!: InspectorPanel;
 	#refreshToken = 0;
+	#builtRows = -1;
+	#builtCols = -1;
 
 	onClose?: () => void;
 	onRequestRender?: () => void;
@@ -71,7 +76,7 @@ export class ExtensionDashboard extends Container {
 
 		// Calculate max visible items based on terminal height
 		// Reserve ~10 lines for header, tabs, help text, borders
-		const maxVisible = Math.max(5, Math.floor((this.terminalHeight - 10) / 2));
+		const maxVisible = this.#maxVisibleItems();
 
 		// Create main list - always focused
 		this.#mainList = new ExtensionList(
@@ -107,6 +112,45 @@ export class ExtensionDashboard extends Container {
 		return tab && tab.id !== "all" ? tab.id : null;
 	}
 
+	/** Live terminal height so the dashboard tracks resize while open. */
+	#terminalRows(): number {
+		return process.stdout.rows || this.terminalHeight || 24;
+	}
+
+	#uiWidth(): number {
+		return Math.max(20, process.stdout.columns || 80);
+	}
+
+	#footerLines(): number {
+		return Math.max(1, wrapTextWithAnsi(theme.fg("dim", EXT_FOOTER), this.#uiWidth()).length);
+	}
+
+	/** Height budget for the two-column body, sized to the live terminal. */
+	#computeBodyHeight(): number {
+		// Chrome: top border + title + tab bar + spacer (4), then spacer + footer + bottom border.
+		const chrome = 4 + 1 + this.#footerLines() + 1;
+		return Math.max(5, this.#terminalRows() - chrome);
+	}
+
+	#maxVisibleItems(): number {
+		// List chrome inside the body: search line, blank line, scroll indicator.
+		return Math.max(3, this.#computeBodyHeight() - 3);
+	}
+
+	override render(width: number): string[] {
+		// Rebuild when terminal geometry changes so the full-screen overlay
+		// re-fits on resize.
+		if (this.#terminalRows() !== this.#builtRows || this.#uiWidth() !== this.#builtCols) {
+			this.#buildLayout();
+		}
+		const lines = super.render(width);
+		// Pad to the full viewport so the dashboard covers the screen instead of
+		// letting the transcript peek through below it.
+		const rows = this.#terminalRows();
+		while (lines.length < rows) lines.push("");
+		return lines;
+	}
+
 	#buildLayout(): void {
 		this.clear();
 
@@ -120,16 +164,18 @@ export class ExtensionDashboard extends Container {
 		this.addChild(new Text(this.#renderTabBar(), 0, 0));
 		this.addChild(new Spacer(1));
 
-		// 2-column body with height limit
-		// Reserve ~8 lines for header, tabs, help text, borders
-		const bodyMaxHeight = Math.max(5, this.terminalHeight - 8);
+		// 2-column body sized to fill the live terminal viewport.
+		const bodyMaxHeight = this.#computeBodyHeight();
+		this.#mainList.setMaxVisible(this.#maxVisibleItems());
 		this.addChild(new TwoColumnBody(this.#mainList, this.#inspector, bodyMaxHeight));
 
 		this.addChild(new Spacer(1));
-		this.addChild(new Text(theme.fg("dim", " ↑/↓: navigate  Space: toggle  Tab: next provider  Esc: close"), 0, 0));
+		this.addChild(new Text(theme.fg("dim", EXT_FOOTER), 0, 0));
 
 		// Bottom border
 		this.addChild(new DynamicBorder());
+		this.#builtRows = this.#terminalRows();
+		this.#builtCols = this.#uiWidth();
 	}
 
 	#renderTabBar(): string {
@@ -289,12 +335,12 @@ export class ExtensionDashboard extends Container {
 			return;
 		}
 
-		// Tab/Shift+Tab: Cycle through tabs
-		if (matchesKey(data, "tab")) {
+		// Tab/Shift+Tab or Left/Right: Cycle through tabs
+		if (matchesKey(data, "tab") || matchesKey(data, "right")) {
 			this.#switchTab(1);
 			return;
 		}
-		if (matchesKey(data, "shift+tab")) {
+		if (matchesKey(data, "shift+tab") || matchesKey(data, "left")) {
 			this.#switchTab(-1);
 			return;
 		}
@@ -328,8 +374,8 @@ class TwoColumnBody implements Component {
 		const leftLines = this.leftPane.render(leftWidth);
 		const rightLines = this.rightPane.render(rightWidth);
 
-		// Limit to maxHeight lines
-		const numLines = Math.min(this.maxHeight, Math.max(leftLines.length, rightLines.length));
+		// Fill the full body height so the dashboard reads as a full-screen view.
+		const numLines = this.maxHeight;
 		const combined: string[] = [];
 		const separator = theme.fg("dim", ` ${theme.boxSharp.vertical} `);
 

package/src/modes/components/history-search.ts

@@ -11,18 +11,82 @@ import {
 	visibleWidth,
 } from "@oh-my-pi/pi-tui";
 import { theme } from "../../modes/theme/theme";
-import { matchesAppInterrupt, matchesSelectDown, matchesSelectUp } from "../../modes/utils/keybinding-matchers";
+import {
+	matchesAppInterrupt,
+	matchesSelectDown,
+	matchesSelectPageDown,
+	matchesSelectPageUp,
+	matchesSelectUp,
+} from "../../modes/utils/keybinding-matchers";
 import type { HistoryEntry, HistoryStorage } from "../../session/history-storage";
 import { DynamicBorder } from "./dynamic-border";
+import { rawKeyHint } from "./keybinding-hints";
+
+/** Visible result rows; also the jump distance for PageUp/PageDown. */
+const MAX_VISIBLE = 10;
+
+/** Split a query the same way `HistoryStorage` tokenizes it, so highlights align with matches. */
+function queryTokens(query: string): string[] {
+	return query
+		.toLowerCase()
+		.split(/[^\p{L}\p{N}]+/u)
+		.filter(tok => tok.length > 0);
+}
+
+/** Wrap every case-insensitive occurrence of any token in `text` with the accent color. */
+function highlightTokens(text: string, tokens: string[]): string {
+	if (tokens.length === 0) return text;
+
+	const lower = text.toLowerCase();
+	const ranges: Array<[number, number]> = [];
+	for (const tok of tokens) {
+		let from = lower.indexOf(tok);
+		while (from !== -1) {
+			ranges.push([from, from + tok.length]);
+			from = lower.indexOf(tok, from + tok.length);
+		}
+	}
+	if (ranges.length === 0) return text;
+
+	ranges.sort((a, b) => a[0] - b[0]);
+	let out = "";
+	let pos = 0;
+	for (const [start, end] of ranges) {
+		if (end <= pos) continue; // fully covered by a previous (merged) range
+		const from = Math.max(start, pos);
+		if (from > pos) out += text.slice(pos, from);
+		out += theme.fg("accent", text.slice(from, end));
+		pos = end;
+	}
+	if (pos < text.length) out += text.slice(pos);
+	return out;
+}
+
+/** Compact "time since" label (e.g. `now`, `5m`, `2h`, `3d`, `2w`, `6mo`, `1y`) from epoch seconds. */
+function relativeTime(epochSeconds: number): string {
+	const seconds = Math.max(0, Math.floor(Date.now() / 1000) - epochSeconds);
+	if (seconds < 60) return "now";
+	const minutes = Math.floor(seconds / 60);
+	if (minutes < 60) return `${minutes}m`;
+	const hours = Math.floor(minutes / 60);
+	if (hours < 24) return `${hours}h`;
+	const days = Math.floor(hours / 24);
+	if (days < 7) return `${days}d`;
+	if (days < 30) return `${Math.floor(days / 7)}w`;
+	if (days < 365) return `${Math.floor(days / 30)}mo`;
+	return `${Math.floor(days / 365)}y`;
+}
 
 class HistoryResultsList implements Component {
 	#results: HistoryEntry[] = [];
+	#tokens: string[] = [];
 	#selectedIndex = 0;
-	#maxVisible = 10;
+	#maxVisible = MAX_VISIBLE;
 
-	setResults(results: HistoryEntry[], selectedIndex: number): void {
+	setResults(results: HistoryEntry[], selectedIndex: number, tokens: string[]): void {
 		this.#results = results;
 		this.#selectedIndex = selectedIndex;
+		this.#tokens = tokens;
 	}
 
 	setSelectedIndex(selectedIndex: number): void {
@@ -37,10 +101,14 @@ class HistoryResultsList implements Component {
 		const lines: string[] = [];
 
 		if (this.#results.length === 0) {
-			lines.push(theme.fg("muted", "  No matching history"));
+			const message = this.#tokens.length > 0 ? "No matching history" : "No history yet";
+			lines.push(theme.fg("muted", `  ${theme.status.info} ${message}`));
 			return lines;
 		}
 
+		const cursorSymbol = `${theme.nav.cursor} `;
+		const gutterWidth = visibleWidth(cursorSymbol);
+
 		const startIndex = Math.max(
 			0,
 			Math.min(this.#selectedIndex - Math.floor(this.#maxVisible / 2), this.#results.length - this.#maxVisible),
@@ -51,18 +119,32 @@ class HistoryResultsList implements Component {
 			const entry = this.#results[i];
 			const isSelected = i === this.#selectedIndex;
 
-			const cursorSymbol = `${theme.nav.cursor} `;
-			const cursorWidth = visibleWidth(cursorSymbol);
-			const cursor = isSelected ? theme.fg("accent", cursorSymbol) : padding(cursorWidth);
-			const maxWidth = width - cursorWidth;
+			const timeStr = relativeTime(entry.created_at);
+			const timeWidth = visibleWidth(timeStr);
+			const showTime = width >= gutterWidth + 12 + timeWidth;
 
+			const promptBudget = Math.max(4, width - gutterWidth - (showTime ? timeWidth + 1 : 0));
 			const normalized = entry.prompt.replace(/\s+/g, " ").trim();
-			const truncated = truncateToWidth(normalized, maxWidth);
-			lines.push(cursor + (isSelected ? theme.bold(truncated) : truncated));
+			const plain = truncateToWidth(normalized, promptBudget);
+			const highlighted = highlightTokens(plain, this.#tokens);
+
+			const cursor = isSelected ? theme.fg("accent", cursorSymbol) : padding(gutterWidth);
+			let line = cursor + (isSelected ? theme.bold(highlighted) : highlighted);
+
+			if (showTime) {
+				// Pad the prompt region so the timestamp sits flush right with a one-cell gap.
+				line = `${truncateToWidth(line, width - timeWidth - 1, Ellipsis.Unicode, true)} ${theme.fg("dim", timeStr)}`;
+			}
+
+			lines.push(
+				isSelected
+					? theme.bg("selectedBg", truncateToWidth(line, width, Ellipsis.Omit, true))
+					: truncateToWidth(line, width),
+			);
 		}
 
 		if (startIndex > 0 || endIndex < this.#results.length) {
-			const scrollText = `  (${this.#selectedIndex + 1}/${this.#results.length})`;
+			const scrollText = `  ${this.#selectedIndex + 1}/${this.#results.length}`;
 			lines.push(theme.fg("muted", truncateToWidth(scrollText, width, Ellipsis.Omit)));
 		}
 
@@ -99,8 +181,12 @@ export class HistorySearchComponent extends Container {
 
 		this.#resultsList = new HistoryResultsList();
 
+		const title = theme.bold(theme.fg("accent", `${theme.icon.rewind} Search History`));
+		const dot = theme.fg("dim", theme.sep.dot);
+		const hint = [rawKeyHint("↑↓", "navigate"), rawKeyHint("enter", "select"), rawKeyHint("esc", "cancel")].join(dot);
+
 		this.addChild(new Spacer(1));
-		this.addChild(new Text(theme.bold("Search History (Ctrl+R)"), 1, 0));
+		this.addChild(new Text(title, 1, 0));
 		this.addChild(new Spacer(1));
 		this.addChild(new DynamicBorder());
 		this.addChild(new Spacer(1));
@@ -108,7 +194,7 @@ export class HistorySearchComponent extends Container {
 		this.addChild(new Spacer(1));
 		this.addChild(this.#resultsList);
 		this.addChild(new Spacer(1));
-		this.addChild(new Text(theme.fg("muted", "up/down navigate  enter select  esc cancel"), 1, 0));
+		this.addChild(new Text(hint, 1, 0));
 		this.addChild(new Spacer(1));
 		this.addChild(new DynamicBorder());
 
@@ -130,6 +216,34 @@ export class HistorySearchComponent extends Container {
 			return;
 		}
 
+		if (matchesSelectPageUp(keyData)) {
+			if (this.#results.length === 0) return;
+			this.#selectedIndex = Math.max(0, this.#selectedIndex - MAX_VISIBLE);
+			this.#resultsList.setSelectedIndex(this.#selectedIndex);
+			return;
+		}
+
+		if (matchesSelectPageDown(keyData)) {
+			if (this.#results.length === 0) return;
+			this.#selectedIndex = Math.min(this.#results.length - 1, this.#selectedIndex + MAX_VISIBLE);
+			this.#resultsList.setSelectedIndex(this.#selectedIndex);
+			return;
+		}
+
+		if (matchesKey(keyData, "home")) {
+			if (this.#results.length === 0) return;
+			this.#selectedIndex = 0;
+			this.#resultsList.setSelectedIndex(this.#selectedIndex);
+			return;
+		}
+
+		if (matchesKey(keyData, "end")) {
+			if (this.#results.length === 0) return;
+			this.#selectedIndex = this.#results.length - 1;
+			this.#resultsList.setSelectedIndex(this.#selectedIndex);
+			return;
+		}
+
 		if (matchesKey(keyData, "enter") || matchesKey(keyData, "return") || keyData === "\n") {
 			const selected = this.#results[this.#selectedIndex];
 			if (selected) {
@@ -153,6 +267,6 @@ export class HistorySearchComponent extends Container {
 			? this.#historyStorage.search(query, this.#resultLimit)
 			: this.#historyStorage.getRecent(this.#resultLimit);
 		this.#selectedIndex = 0;
-		this.#resultsList.setResults(this.#results, this.#selectedIndex);
+		this.#resultsList.setResults(this.#results, this.#selectedIndex, query ? queryTokens(query) : []);
 	}
 }