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

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) : []);
 	}
 }