@hyperpuncher/pi-ui 0.38.2

package/static/app/model-search_test.ts

@@ -0,0 +1,31 @@
+import { test } from "bun:test";
+
+import { fuzzyFilter } from "@earendil-works/pi-tui/dist/fuzzy.js";
+
+import { assertEquals } from "#testing/assertions";
+
+import { modelSearchText } from "./model-search.js";
+
+test("model search ranks DeepSeek above Claude Sonnet for ds4", () => {
+	const models = [
+		{
+			filter: "claude-sonnet-4 opencode",
+			name: "Claude Sonnet 4",
+		},
+		{
+			filter: "deepseek-v4-flash opencode",
+			name: "DeepSeek V4 Flash",
+		},
+	];
+	assertEquals(
+		fuzzyFilter(models, "ds4", (model) => modelSearchText(model.filter, model.name)),
+		[models[1], models[0]],
+	);
+});
+
+test("model search matches provider and combined provider/model terms", () => {
+	const model = { filter: "gpt-5.6 openai-codex", name: "GPT 5.6" };
+	const search = (item: typeof model) => modelSearchText(item.filter, item.name);
+	assertEquals(fuzzyFilter([model], "opai g56", search), [model]);
+	assertEquals(fuzzyFilter([model], "openai-codex/gpt-5.6", search), [model]);
+});

package/static/app/pickers.js

@@ -0,0 +1,289 @@
+import {
+	deletePromptCharBeforeCursor,
+	focusPromptEnd,
+	insertPromptText,
+	promptInput,
+	promptValue,
+	setPromptValue,
+} from "./prompt.js";
+
+let activeFilePrefix;
+let filePickerSuppressUntilInput = false;
+let searchTimer;
+let slashCommandFilter;
+
+export function extractFilePrefix(value, cursor) {
+	const before = value.slice(0, cursor);
+	const delimiter = Math.max(
+		before.lastIndexOf(" "),
+		before.lastIndexOf("\n"),
+		before.lastIndexOf("\t"),
+		before.lastIndexOf("="),
+	);
+	const start = delimiter + 1;
+	const token = before.slice(start);
+	if (!token.startsWith("@") || token.includes(" ")) return undefined;
+	return { start, end: cursor, query: token.slice(1) };
+}
+
+export function completeFileValue(inputValue, match, value) {
+	const suffix = value.endsWith("/") ? "" : " ";
+	const text = `${inputValue.slice(0, match.start)}@${value}${suffix}${inputValue.slice(match.end)}`;
+	return { text, cursor: match.start + value.length + 1 + suffix.length };
+}
+
+export function isFileOpen() {
+	return isPopoverVisible("prompt-file-popover");
+}
+
+export function isOpen() {
+	return isFileOpen() || isSlashOpen();
+}
+
+export function bindPickers(options) {
+	slashCommandFilter = options.fuzzyFilter;
+	document.addEventListener("input", syncFromPrompt);
+	document.addEventListener("keyup", syncFromPrompt);
+	document.addEventListener("click", handleClick);
+	document.addEventListener("keydown", handleKeydown);
+	rankSlashCommands(promptValue());
+}
+
+function syncFromPrompt(event) {
+	if (
+		!(event.target instanceof HTMLTextAreaElement) ||
+		event.target.id !== "prompt-input"
+	) {
+		return;
+	}
+	if (filePickerSuppressUntilInput && event.type === "keyup") return;
+	if (event.type === "input") filePickerSuppressUntilInput = false;
+	queueFileSearch(event.target);
+	rankSlashCommands(event.target.value);
+	if (event.target.value.startsWith("/")) {
+		resetPicker("slash-picker-list", "[data-slash-row]");
+	}
+}
+
+function queueFileSearch(input) {
+	if (filePickerSuppressUntilInput) return;
+	const match = extractFilePrefix(
+		input.value,
+		input.selectionStart ?? input.value.length,
+	);
+	if (!match) {
+		closeFilePicker();
+		return;
+	}
+	activeFilePrefix = match;
+	clearTimeout(searchTimer);
+	searchTimer = setTimeout(() => {
+		if (activeFilePrefix !== match) return;
+		input.dispatchEvent(
+			new CustomEvent("pi-ui-file-query", {
+				bubbles: true,
+				detail: { query: match.query },
+			}),
+		);
+	}, 50);
+}
+
+function handleClick(event) {
+	const target = event.target;
+	if (!(target instanceof Element)) return;
+	const slash = target.closest('[data-picker-kind="slash"]');
+	const file = target.closest('[data-picker-kind="file"]');
+	if (target.closest("[data-file-trigger]")) {
+		event.preventDefault();
+		insertFilePrefix();
+	} else if (target.closest("[data-send-trigger]")) {
+		closePickers(true);
+	} else if (slash instanceof HTMLElement) {
+		event.preventDefault();
+	} else if (file instanceof HTMLElement) {
+		event.preventDefault();
+		applyFileCompletion(file.dataset.pickerValue ?? "");
+	} else if (target instanceof HTMLTextAreaElement && target.id === "prompt-input") {
+		queueFileSearch(target);
+	}
+}
+
+function handleKeydown(event) {
+	if (event.isComposing) return;
+	if (event.ctrlKey || event.metaKey || event.altKey) return;
+	if (event.code === "Escape") {
+		const pickerHadFocus = document.activeElement?.closest?.("[data-picker-kind]");
+		if (isOpen()) event.preventDefault();
+		closePickers(true);
+		if (promptValue() === "/") setPromptValue("");
+		if (pickerHadFocus) promptInput()?.focus({ preventScroll: true });
+		return;
+	}
+	if (document.activeElement?.closest?.("[data-file-row]")) {
+		if (event.code === "Backspace") {
+			event.preventDefault();
+			focusPromptEnd();
+			deletePromptCharBeforeCursor();
+			return;
+		}
+		if (event.key.length === 1) {
+			event.preventDefault();
+			focusPromptEnd();
+			insertPromptText(event.key);
+			return;
+		}
+	}
+	const active = document.activeElement;
+	if (active?.id === "prompt-input") {
+		if ((event.code === "ArrowDown" || event.code === "ArrowUp") && isSlashOpen()) {
+			event.preventDefault();
+			focusPickerRow("[data-slash-row]", event.code === "ArrowDown" ? 1 : -1);
+			return;
+		}
+		if ((event.code === "ArrowDown" || event.code === "ArrowUp") && isFileOpen()) {
+			event.preventDefault();
+			focusPickerRow("[data-file-row]", event.code === "ArrowDown" ? 1 : -1);
+			return;
+		}
+		if (event.code === "Enter" && !event.shiftKey && isFileOpen()) {
+			event.preventDefault();
+			selectedPickerRow("[data-file-row]")?.querySelector("button")?.click();
+			return;
+		}
+		if (event.code === "Enter" && !event.shiftKey && isSlashOpen()) {
+			event.preventDefault();
+			selectedPickerRow("[data-slash-row]")?.querySelector("button")?.click();
+			return;
+		}
+	}
+	for (const selector of ["[data-slash-row]", "[data-file-row]"]) {
+		if (!active?.closest?.(selector)) continue;
+		if (event.code === "ArrowDown" || event.code === "ArrowUp") {
+			event.preventDefault();
+			focusPickerRow(selector, event.code === "ArrowDown" ? 1 : -1);
+		} else if (event.code === "Enter") {
+			event.preventDefault();
+			active.click();
+		}
+		return;
+	}
+}
+
+function applyFileCompletion(value) {
+	const input = promptInput();
+	if (!input || !activeFilePrefix) return;
+	const completion = completeFileValue(input.value, activeFilePrefix, value);
+	input.value = completion.text;
+	input.selectionStart = completion.cursor;
+	input.selectionEnd = completion.cursor;
+	input.dispatchEvent(new Event("input", { bubbles: true }));
+	input.focus();
+	if (value.endsWith("/")) queueFileSearch(input);
+	else closeFilePicker();
+}
+
+function insertFilePrefix() {
+	const input = promptInput();
+	if (!input) return;
+	filePickerSuppressUntilInput = false;
+	const cursor = input.selectionStart ?? input.value.length;
+	const needsSpace = cursor > 0 && !/\s/.test(input.value[cursor - 1] ?? "");
+	const insert = `${needsSpace ? " " : ""}@`;
+	input.value = `${input.value.slice(0, cursor)}${insert}${input.value.slice(input.selectionEnd ?? cursor)}`;
+	const nextCursor = cursor + insert.length;
+	input.selectionStart = nextCursor;
+	input.selectionEnd = nextCursor;
+	input.dispatchEvent(new Event("input", { bubbles: true }));
+	input.focus();
+	queueFileSearch(input);
+}
+
+export function closePickers(suppressUntilInput = false) {
+	closeFilePicker(suppressUntilInput);
+	promptInput()?.dispatchEvent(
+		new CustomEvent("pi-ui-picker-close", { bubbles: true }),
+	);
+}
+
+function closeFilePicker(suppressUntilInput = false) {
+	clearTimeout(searchTimer);
+	if (suppressUntilInput) filePickerSuppressUntilInput = true;
+	activeFilePrefix = undefined;
+	promptInput()?.dispatchEvent(new CustomEvent("pi-ui-file-close", { bubbles: true }));
+}
+
+function isSlashOpen() {
+	return isPopoverVisible("prompt-slash-popover");
+}
+
+function isPopoverVisible(id) {
+	const popover = document.getElementById(id);
+	return popover instanceof HTMLElement && popover.style.display !== "none";
+}
+
+function visibleRows(selector) {
+	return [...document.querySelectorAll(selector)].filter(
+		(row) => row instanceof HTMLElement && getComputedStyle(row).display !== "none",
+	);
+}
+
+function selectedPickerRow(selector) {
+	const rows = visibleRows(selector);
+	return rows.find((row) => row.getAttribute("aria-selected") === "true") ?? rows[0];
+}
+
+function selectDefaultPickerRow(selector) {
+	const rows = visibleRows(selector);
+	for (const [index, row] of rows.entries()) {
+		row.setAttribute("aria-selected", index === 0 ? "true" : "false");
+	}
+}
+
+function resetPicker(listId, rowSelector) {
+	const list = document.getElementById(listId);
+	if (list instanceof HTMLElement) list.scrollTop = 0;
+	selectDefaultPickerRow(rowSelector);
+}
+
+function rankSlashCommands(prompt) {
+	if (!prompt.startsWith("/") || prompt.includes(" ")) return;
+	const list = document.getElementById("slash-picker-list");
+	if (!(list instanceof HTMLElement)) return;
+	const rows = [...list.querySelectorAll("[data-slash-row]")].sort(
+		(left, right) =>
+			Number(left.dataset.slashOrder) - Number(right.dataset.slashOrder),
+	);
+	const ranked = slashCommandFilter(
+		rows,
+		prompt.slice(1),
+		(row) => row.dataset.slashName ?? "",
+	);
+	const matches = new Set(ranked);
+	list.append(...ranked, ...rows.filter((row) => !matches.has(row)));
+}
+
+export function resetFilePicker() {
+	resetPicker("file-picker-list", "[data-file-row]");
+}
+
+export function nextPickerIndex(length, activeIndex, direction) {
+	if (length <= 0) return -1;
+	if (activeIndex === -1) return 0;
+	return Math.max(0, Math.min(length - 1, activeIndex - direction));
+}
+
+function focusPickerRow(selector, direction) {
+	const rows = visibleRows(selector);
+	if (rows.length === 0) return;
+	const activeRow = document.activeElement?.closest?.(selector);
+	let activeIndex = rows.findIndex((row) => row === activeRow);
+	if (activeIndex === -1) {
+		activeIndex = rows.findIndex(
+			(row) => row.getAttribute("aria-selected") === "true",
+		);
+	}
+	const nextIndex = nextPickerIndex(rows.length, activeIndex, direction);
+	for (const row of rows) row.setAttribute("aria-selected", "false");
+	rows[nextIndex]?.setAttribute("aria-selected", "true");
+	rows[nextIndex]?.querySelector("button")?.focus();
+}

package/static/app/pickers_test.ts

@@ -0,0 +1,40 @@
+import { test } from "bun:test";
+
+import { assertEquals } from "#testing/assertions";
+
+import { completeFileValue, extractFilePrefix, nextPickerIndex } from "./pickers.js";
+
+test("extractFilePrefix finds the @ token at the caret", () => {
+	assertEquals(extractFilePrefix("open @src/ui after", 12), {
+		start: 5,
+		end: 12,
+		query: "src/ui",
+	});
+	assertEquals(extractFilePrefix("plain text", 10), undefined);
+	assertEquals(extractFilePrefix("x=@src", 6), {
+		start: 2,
+		end: 6,
+		query: "src",
+	});
+});
+
+test("picker navigation stops at both visual boundaries", () => {
+	assertEquals(nextPickerIndex(4, -1, -1), 0);
+	assertEquals(nextPickerIndex(4, 0, 1), 0);
+	assertEquals(nextPickerIndex(4, 3, -1), 3);
+	assertEquals(nextPickerIndex(4, 0, -1), 1);
+	assertEquals(nextPickerIndex(4, 1, -1), 2);
+	assertEquals(nextPickerIndex(4, 1, 1), 0);
+});
+
+test("file completion preserves surrounding prompt text and directory flow", () => {
+	const match = { start: 4, end: 7, query: "sr" };
+	assertEquals(completeFileValue("see @sr now", match, "src/app.ts"), {
+		text: "see @src/app.ts  now",
+		cursor: 16,
+	});
+	assertEquals(completeFileValue("see @sr", match, "src/"), {
+		text: "see @src/",
+		cursor: 9,
+	});
+});

package/static/app/prompt-history.js

@@ -0,0 +1,100 @@
+import { promptInput, setPromptValue } from "./prompt.js";
+
+export class PromptHistoryNavigator {
+	#entries = [];
+	#index = -1;
+	#draft = "";
+	#source = "";
+
+	sync(entries) {
+		const source = JSON.stringify(entries);
+		if (source === this.#source) return;
+		this.#source = source;
+		this.#entries = entries;
+		this.reset();
+	}
+
+	get browsing() {
+		return this.#index >= 0;
+	}
+
+	reset() {
+		this.#index = -1;
+		this.#draft = "";
+	}
+
+	navigate(value, direction) {
+		if (direction === "up") {
+			if (!this.browsing) {
+				if (value !== "" || this.#entries.length === 0) return undefined;
+				this.#draft = value;
+				this.#index = 0;
+			} else if (this.#index < this.#entries.length - 1) {
+				this.#index += 1;
+			}
+			return { value: this.#entries[this.#index], cursor: "start" };
+		}
+
+		if (!this.browsing) return undefined;
+		if (this.#index > 0) {
+			this.#index -= 1;
+			return { value: this.#entries[this.#index], cursor: "end" };
+		}
+		const valueToRestore = this.#draft;
+		this.reset();
+		return { value: valueToRestore, cursor: "end" };
+	}
+}
+
+export function createPromptHistory() {
+	const navigator = new PromptHistoryNavigator();
+	let applying = false;
+
+	function handleKeydown(event, entries) {
+		if (
+			event.isComposing ||
+			event.defaultPrevented ||
+			event.altKey ||
+			event.ctrlKey ||
+			event.metaKey ||
+			event.shiftKey ||
+			(event.code !== "ArrowUp" && event.code !== "ArrowDown")
+		)
+			return false;
+		const input = promptInput();
+		if (event.target !== input || window.piUi.pickers.isOpen()) return false;
+
+		navigator.sync(Array.isArray(entries) ? entries : []);
+		if (navigator.browsing && !isAtHistoryBoundary(input, event.code)) return false;
+		const result = navigator.navigate(
+			input.value,
+			event.code === "ArrowUp" ? "up" : "down",
+		);
+		if (!result) return false;
+
+		event.preventDefault();
+		applying = true;
+		setPromptValue(result.value);
+		applying = false;
+		const cursor = result.cursor === "start" ? 0 : input.value.length;
+		input.selectionStart = cursor;
+		input.selectionEnd = cursor;
+		return true;
+	}
+
+	function handleInput() {
+		if (!applying) navigator.reset();
+	}
+
+	return { handleInput, handleKeydown };
+}
+
+function isAtHistoryBoundary(input, code) {
+	if (input.selectionStart !== input.selectionEnd) return false;
+	if (code === "ArrowUp") {
+		const firstLineEnd = input.value.indexOf("\n");
+		return firstLineEnd < 0 || input.selectionStart <= firstLineEnd;
+	}
+	const lastLineStart = input.value.lastIndexOf("\n") + 1;
+	return input.selectionEnd >= lastLineStart;
+}

package/static/app/prompt-history_test.ts

@@ -0,0 +1,51 @@
+import { test } from "bun:test";
+
+import { assertEquals } from "#testing/assertions";
+
+import { PromptHistoryNavigator } from "./prompt-history.js";
+
+test("prompt history browses newest first and restores the empty draft", () => {
+	const history = new PromptHistoryNavigator();
+	history.sync(["third", "second", "first"]);
+
+	assertEquals(history.navigate("", "up"), { value: "third", cursor: "start" });
+	assertEquals(history.navigate("third", "up"), {
+		value: "second",
+		cursor: "start",
+	});
+	assertEquals(history.navigate("second", "up"), {
+		value: "first",
+		cursor: "start",
+	});
+	assertEquals(history.navigate("first", "up"), {
+		value: "first",
+		cursor: "start",
+	});
+	assertEquals(history.navigate("first", "down"), {
+		value: "second",
+		cursor: "end",
+	});
+	assertEquals(history.navigate("second", "down"), {
+		value: "third",
+		cursor: "end",
+	});
+	assertEquals(history.navigate("third", "down"), { value: "", cursor: "end" });
+});
+
+test("prompt history only starts from an empty prompt", () => {
+	const history = new PromptHistoryNavigator();
+	history.sync(["previous"]);
+
+	assertEquals(history.navigate("draft", "up"), undefined);
+	assertEquals(history.navigate("", "down"), undefined);
+	assertEquals(history.navigate("", "up"), { value: "previous", cursor: "start" });
+});
+
+test("prompt history resets when the session history changes", () => {
+	const history = new PromptHistoryNavigator();
+	history.sync(["session one"]);
+	assertEquals(history.navigate("", "up")?.value, "session one");
+
+	history.sync(["session two"]);
+	assertEquals(history.navigate("", "up")?.value, "session two");
+});

package/static/app/prompt.js

@@ -0,0 +1,99 @@
+export function promptInput() {
+	const input = document.getElementById("prompt-input");
+	return input instanceof HTMLTextAreaElement ? input : undefined;
+}
+
+export function promptValue() {
+	return promptInput()?.value ?? "";
+}
+
+export function setPromptValue(value) {
+	const input = promptInput();
+	if (!input) return;
+	input.value = value;
+	input.dispatchEvent(new Event("input", { bubbles: true }));
+}
+
+export function focusPromptEnd() {
+	const input = promptInput();
+	if (!input) return;
+	input.focus({ preventScroll: true });
+	input.selectionStart = input.value.length;
+	input.selectionEnd = input.value.length;
+}
+
+export function insertPromptText(text) {
+	const input = promptInput();
+	if (!input) return;
+	const start = input.selectionStart ?? input.value.length;
+	const end = input.selectionEnd ?? start;
+	input.value = `${input.value.slice(0, start)}${text}${input.value.slice(end)}`;
+	const cursor = start + text.length;
+	input.selectionStart = cursor;
+	input.selectionEnd = cursor;
+	input.dispatchEvent(new Event("input", { bubbles: true }));
+}
+
+export function deletePromptCharBeforeCursor() {
+	const input = promptInput();
+	if (!input) return;
+	const start = input.selectionStart ?? input.value.length;
+	const end = input.selectionEnd ?? start;
+	if (start !== end) {
+		input.value = `${input.value.slice(0, start)}${input.value.slice(end)}`;
+		input.selectionStart = start;
+		input.selectionEnd = start;
+	} else if (start > 0) {
+		input.value = `${input.value.slice(0, start - 1)}${input.value.slice(start)}`;
+		input.selectionStart = start - 1;
+		input.selectionEnd = start - 1;
+	}
+	input.dispatchEvent(new Event("input", { bubbles: true }));
+}
+
+let promptLayoutFrame;
+let promptResizeObserver;
+
+export function bindPromptLayout() {
+	const footer = document.getElementById("prompt-footer");
+	if (!(footer instanceof HTMLElement)) return;
+	promptResizeObserver ??= new ResizeObserver(schedulePromptLayout);
+	promptResizeObserver.disconnect();
+	promptResizeObserver.observe(footer);
+}
+
+function schedulePromptLayout() {
+	cancelAnimationFrame(promptLayoutFrame);
+	promptLayoutFrame = requestAnimationFrame(() => {
+		const footer = document.getElementById("prompt-footer");
+		if (!(footer instanceof HTMLElement)) return;
+
+		footer.removeAttribute("data-toolbar-compact");
+		footer.removeAttribute("data-context-compact");
+		footer.setAttribute("data-measuring", "");
+
+		if (footer.scrollWidth > footer.clientWidth) {
+			footer.setAttribute("data-toolbar-compact", "");
+			if (footer.scrollWidth > footer.clientWidth) {
+				footer.setAttribute("data-context-compact", "");
+			}
+		}
+
+		footer.removeAttribute("data-measuring");
+	});
+}
+
+export function bindPromptInteractions() {
+	document.addEventListener("pointerdown", (event) => {
+		const target = event.target;
+		if (!(target instanceof Element)) return;
+		const trigger = target.closest("[data-tooltip]");
+		if (!(trigger instanceof HTMLElement)) return;
+		trigger.setAttribute("data-tooltip-suppressed", "");
+		trigger.addEventListener(
+			"pointerleave",
+			() => trigger.removeAttribute("data-tooltip-suppressed"),
+			{ once: true },
+		);
+	});
+}

package/static/app/session-performance.js

@@ -0,0 +1,56 @@
+let pending;
+
+export function startSessionPerformanceMeasurement() {
+	const transition = document.getElementById("session-transition");
+	if (!transition?.hasAttribute("data-session-performance-enabled")) return;
+	pending = { startedAt: performance.now() };
+}
+
+export function readTransitionState(status, generation) {
+	if (!pending) return;
+	const now = performance.now();
+	if (status === "loading") {
+		pending.generation = Number(generation);
+		pending.loadingAt ??= now;
+		return;
+	}
+	if (
+		status !== "idle" ||
+		pending.generation !== Number(generation) ||
+		pending.loadingAt === undefined
+	) {
+		return;
+	}
+	const measurement = pending;
+	pending = undefined;
+	waitForTranscriptPaint(measurement, Number(generation), now);
+}
+
+function waitForTranscriptPaint(measurement, generation, morphAt) {
+	requestAnimationFrame(() => {
+		const transition = document.getElementById("session-transition");
+		const messages = document.getElementById("messages");
+		if (
+			transition &&
+			messages &&
+			getComputedStyle(transition).display === "none" &&
+			getComputedStyle(messages).display !== "none"
+		) {
+			requestAnimationFrame(() => {
+				const metrics = {
+					generation,
+					clickToLoadingMs: measurement.loadingAt - measurement.startedAt,
+					clickToMorphMs: morphAt - measurement.startedAt,
+					clickToPaintMs: performance.now() - measurement.startedAt,
+				};
+				document.body.dispatchEvent(
+					new CustomEvent("pi-ui-session-performance", { detail: metrics }),
+				);
+			});
+			return;
+		}
+		if (performance.now() - measurement.startedAt < 60_000) {
+			waitForTranscriptPaint(measurement, generation, morphAt);
+		}
+	});
+}