@hyperpuncher/pi-ui 0.38.2

package/static/app/file-transfer_test.ts

@@ -0,0 +1,174 @@
+import { test } from "bun:test";
+
+import { assertEquals, assertRejects } from "#testing/assertions";
+
+import { attachmentFileKind } from "./attachment-file.js";
+
+Object.defineProperty(globalThis, "ResizeObserver", {
+	configurable: true,
+	value: class {
+		disconnect() {
+			return undefined;
+		}
+		observe() {
+			return undefined;
+		}
+	},
+});
+
+const {
+	composePrompt,
+	convertAvifToJpeg,
+	extractTransferredFilePaths,
+	formatFileReferences,
+	isAvifImageFile,
+	isHeicImageFile,
+	jpegFileName,
+} = await import("./file-transfer.js");
+
+test("file references use one line per path and end with a newline", () => {
+	assertEquals(
+		formatFileReferences(["/tmp/one.txt", "/tmp/two.txt"]),
+		"@/tmp/one.txt\n@/tmp/two.txt\n",
+	);
+});
+
+test("attachment paths are composed separately from visible prompt editing", () => {
+	assertEquals(
+		composePrompt("review these", ["/tmp/one.txt", "/tmp/two.txt"]),
+		"@/tmp/one.txt\n@/tmp/two.txt\nreview these",
+	);
+	assertEquals(composePrompt("", ["/tmp/one.txt"]), "@/tmp/one.txt");
+});
+
+test("transferred files use their original paths", () => {
+	const values = new Map(
+		Object.entries({
+			"text/uri-list": "# files\nfile:///tmp/one.txt\nfile:///tmp/two%20words.txt",
+			"x-special/gnome-copied-files":
+				"copy\nfile:///tmp/one.txt\nfile:///tmp/three.txt",
+			"text/plain": "/tmp/four.txt\nnot-a-path",
+		}),
+	);
+
+	assertEquals(
+		extractTransferredFilePaths({
+			getData: (type: string) => values.get(type) ?? "",
+		}),
+		["/tmp/one.txt", "/tmp/two words.txt", "/tmp/three.txt", "/tmp/four.txt"],
+	);
+});
+
+test("attachment file kinds use MIME types and extensions", () => {
+	assertEquals(attachmentFileKind("vadim.txt", "text/plain"), "text");
+	assertEquals(attachmentFileKind("recording.ogg", "audio/ogg"), "audio");
+	assertEquals(attachmentFileKind("source.ts", ""), "code");
+	assertEquals(attachmentFileKind("bundle.zip", ""), "archive");
+	assertEquals(attachmentFileKind("unknown.bin", ""), "file");
+});
+
+test("AVIF images are detected and renamed for JPEG conversion", () => {
+	assertEquals(isAvifImageFile({ name: "photo.bin", type: "image/avif" }), true);
+	assertEquals(isAvifImageFile({ name: "photo.AVIF", type: "" }), true);
+	assertEquals(isAvifImageFile({ name: "photo.png", type: "image/png" }), false);
+	assertEquals(jpegFileName("photo.AVIF"), "photo.jpg");
+	assertEquals(jpegFileName("pasted-image"), "pasted-image.jpg");
+});
+
+test("HEIC and HEIF images are detected by MIME type or extension", () => {
+	assertEquals(isHeicImageFile({ name: "photo.bin", type: "image/heic" }), true);
+	assertEquals(isHeicImageFile({ name: "photo.HEIF", type: "" }), true);
+	assertEquals(isHeicImageFile({ name: "photo.avif", type: "image/avif" }), false);
+});
+
+test("AVIF conversion produces a quality 85 JPEG and closes the bitmap", async () => {
+	const originalBitmap = Object.getOwnPropertyDescriptor(
+		globalThis,
+		"createImageBitmap",
+	);
+	const originalDocument = Object.getOwnPropertyDescriptor(globalThis, "document");
+	let closed = false;
+	const canvas = {
+		width: 0,
+		height: 0,
+		getContext: () => ({
+			fillStyle: "",
+			fillRect: () => undefined,
+			drawImage: () => undefined,
+		}),
+		toBlob: (callback: (blob: Blob) => void, type: string, quality: number) => {
+			assertEquals(type, "image/jpeg");
+			assertEquals(quality, 0.85);
+			callback(new Blob(["jpeg"], { type }));
+		},
+	};
+	Object.defineProperty(globalThis, "createImageBitmap", {
+		configurable: true,
+		value: () =>
+			Promise.resolve({
+				width: 3200,
+				height: 1800,
+				close: () => {
+					closed = true;
+				},
+			}),
+	});
+	Object.defineProperty(globalThis, "document", {
+		configurable: true,
+		value: { createElement: () => canvas },
+	});
+	try {
+		const converted = await convertAvifToJpeg(
+			new File(["avif"], "screenshot.avif", {
+				type: "image/avif",
+				lastModified: 42,
+			}),
+		);
+		assertEquals(converted.name, "screenshot.jpg");
+		assertEquals(converted.type, "image/jpeg");
+		assertEquals(converted.lastModified, 42);
+		assertEquals(canvas.width, 3200);
+		assertEquals(canvas.height, 1800);
+		assertEquals(closed, true);
+	} finally {
+		restoreGlobal("createImageBitmap", originalBitmap);
+		restoreGlobal("document", originalDocument);
+	}
+});
+
+test("AVIF conversion reports decoding failures clearly", async () => {
+	const original = Object.getOwnPropertyDescriptor(globalThis, "createImageBitmap");
+	Object.defineProperty(globalThis, "createImageBitmap", {
+		configurable: true,
+		value: () => Promise.reject(new Error("decode failed")),
+	});
+	try {
+		await assertRejects(
+			() =>
+				convertAvifToJpeg(
+					new File(["broken"], "broken.avif", { type: "image/avif" }),
+				),
+			Error,
+			"Could not convert broken.avif to JPEG.",
+		);
+	} finally {
+		restoreGlobal("createImageBitmap", original);
+	}
+});
+
+function restoreGlobal(name: string, descriptor?: PropertyDescriptor) {
+	if (descriptor) {
+		Object.defineProperty(globalThis, name, descriptor);
+	} else {
+		Reflect.deleteProperty(globalThis, name);
+	}
+}
+
+test("transferred files use a webview-provided path without reading bytes", () => {
+	assertEquals(
+		extractTransferredFilePaths({
+			files: [{ path: "/tmp/large-model.bin", name: "large-model.bin" }],
+		}),
+		["/tmp/large-model.bin"],
+	);
+});

package/static/app/main.js

@@ -0,0 +1,122 @@
+import { fuzzyFilter, fuzzyMatch } from "../../src/client/pi-fuzzy.ts";
+import { refresh } from "./basecoat.js";
+import { bindCodeCopy } from "./code-copy.js";
+import * as dialogs from "./dialogs.js";
+import { bindDisplayRefreshMeasurement } from "./display-refresh.js";
+import { bindFileLinks } from "./file-links.js";
+import * as fileTransfer from "./file-transfer.js";
+import {
+	bindMessageResize,
+	bindMessageScroll,
+	captureAnchor,
+	hydratePierreDiff,
+	restoreAnchor,
+	scrollBottom,
+} from "./message-scroll.js";
+import { filterModelSearch } from "./model-search.js";
+import {
+	bindPickers,
+	closePickers,
+	isFileOpen,
+	isOpen as isPickerOpen,
+	resetFilePicker,
+} from "./pickers.js";
+import { createPromptHistory } from "./prompt-history.js";
+import {
+	bindPromptInteractions,
+	bindPromptLayout,
+	focusPromptEnd,
+	setPromptValue,
+} from "./prompt.js";
+import {
+	readTransitionState,
+	startSessionPerformanceMeasurement,
+} from "./session-performance.js";
+import { bindVimScroll } from "./vim-scroll.js";
+import { windowFocus } from "./window-focus.js";
+
+const promptHistory = createPromptHistory();
+
+window.piUi = {
+	basecoat: { refresh },
+	codeTheme: { loadPreviews() {} },
+	fonts: { apply() {} },
+	dialogs,
+	fileTransfer,
+	messageScroll: {
+		bindResize: bindMessageResize,
+		captureAnchor,
+		hydratePierreDiff,
+		restoreAnchor,
+		scrollBottom,
+	},
+	modelSearch: { filter: filterModelSearch },
+	pickers: {
+		close: closePickers,
+		fuzzyMatch,
+		isFileOpen,
+		isOpen: isPickerOpen,
+		resetFile: resetFilePicker,
+	},
+	prompt: {
+		bindLayout: bindPromptLayout,
+		clear: () => setPromptValue(""),
+	},
+	promptHistory,
+	sessionPerformance: {
+		observe: readTransitionState,
+		start: startSessionPerformanceMeasurement,
+	},
+	windowFocus,
+	workspaceReview: { applyOpen: () => {} },
+	shouldAbortOnEscape(event) {
+		return !event.defaultPrevented && !hasOpenDismissible();
+	},
+};
+
+function hasOpenDismissible() {
+	if (isPickerOpen() || document.querySelector("dialog[open]")) return true;
+	if (document.querySelector('[data-popover][aria-hidden="false"]')) return true;
+	return Boolean(document.querySelector('[aria-haspopup][aria-expanded="true"]'));
+}
+
+// Register delegated file-link handling as soon as this module evaluates. Waiting for
+// DOMContentLoaded makes it vulnerable to another initializer failing first and leaves
+// the browser to attempt the forbidden file:// navigation itself.
+bindFileLinks();
+
+window.addEventListener("DOMContentLoaded", async () => {
+	await Promise.all([
+		import("../../src/client/fonts.ts"),
+		import("../../src/client/code-theme.ts"),
+		import("../../src/client/workspace-review.ts"),
+	]);
+
+	focusPromptEnd();
+	dialogs.bindDialogs();
+	bindPromptInteractions();
+	bindPickers({ fuzzyFilter });
+	bindMessageScroll();
+	bindCodeCopy();
+	bindVimScroll();
+	bindDisplayRefreshMeasurement();
+	bindDebugFps();
+});
+
+function bindDebugFps() {
+	const fps = document.getElementById("debug-fps");
+	if (!(fps instanceof HTMLElement)) return;
+	let frames = 0;
+	let startedAt = performance.now();
+	const tick = (now) => {
+		frames += 1;
+		const elapsed = now - startedAt;
+		if (elapsed >= 500) {
+			fps.textContent = String(Math.round((frames * 1000) / elapsed));
+			frames = 0;
+			startedAt = now;
+		}
+		requestAnimationFrame(tick);
+	};
+	requestAnimationFrame(tick);
+}

package/static/app/message-scroll.js

@@ -0,0 +1,343 @@
+const liveEdgeThresholdPx = 8;
+const promptSpacerClearancePx = 48;
+const scrollControlThresholdPx = 48;
+const state = {
+	middleScrolling: false,
+	pinnedToBottom: true,
+	pointerScrolling: false,
+	rearmOnBottom: false,
+	scrollTop: 0,
+};
+const bottomScrollTimers = new Set();
+let anchor;
+let historyLoading = false;
+let observedMessageStack;
+let observedPrompt;
+let messageResizeObserver;
+let pointerStart;
+
+export function bindMessageScroll() {
+	document.addEventListener(
+		"scroll",
+		(event) => {
+			const messages = document.getElementById("messages");
+			// Ignore captured scroll events from nested tool and code outputs. Layout
+			// changes alone never re-arm following; reaching the end during an active
+			// downward wheel or scrollbar gesture does.
+			if (!(messages instanceof HTMLElement) || event.target !== messages) return;
+			if (
+				(state.middleScrolling || state.pointerScrolling) &&
+				messages.scrollTop < state.scrollTop
+			)
+				markUnpinned();
+			const distance =
+				messages.scrollHeight - messages.scrollTop - messages.clientHeight;
+			if (
+				shouldRearmAfterScroll(
+					state.pinnedToBottom,
+					state.scrollTop,
+					messages.scrollTop,
+					distance,
+					state.middleScrolling ||
+						state.rearmOnBottom ||
+						state.pointerScrolling,
+				)
+			)
+				state.pinnedToBottom = true;
+			state.scrollTop = messages.scrollTop;
+			state.rearmOnBottom = false;
+			updateScrollControl();
+		},
+		true,
+	);
+
+	// Release follow mode from explicit reader interactions, never from scroll
+	// position changes alone: streamed tables, code, and other blocks can resize.
+	const releasePointerScroll = (event) => {
+		// Browser autoscroll can begin outside the transcript's DOM event path,
+		// so middle-button intent is global. Primary drags inside the transcript
+		// cover scrollbar movement and text selection without treating clicks as scrolls.
+		if (event.button === 1) {
+			state.middleScrolling = true;
+			markUnpinned();
+		} else if (event.button === 0 && isMessageInteraction(event.target)) {
+			state.middleScrolling = false;
+			state.pointerScrolling = true;
+			pointerStart = { x: event.clientX, y: event.clientY };
+			const messages = document.getElementById("messages");
+			if (messages instanceof HTMLElement) state.scrollTop = messages.scrollTop;
+		}
+	};
+	document.addEventListener("pointerdown", releasePointerScroll, {
+		capture: true,
+		passive: true,
+	});
+	document.addEventListener(
+		"pointermove",
+		(event) => {
+			if (
+				state.pointerScrolling &&
+				pointerStart &&
+				hasPointerDragIntent(
+					pointerStart.x,
+					pointerStart.y,
+					event.clientX,
+					event.clientY,
+				)
+			) {
+				pointerStart = undefined;
+				markUnpinned();
+			}
+		},
+		{ capture: true, passive: true },
+	);
+	for (const type of ["pointerup", "pointercancel"]) {
+		document.addEventListener(
+			type,
+			() => {
+				state.pointerScrolling = false;
+				pointerStart = undefined;
+			},
+			{ capture: true, passive: true },
+		);
+	}
+	for (const type of ["mousedown", "auxclick"]) {
+		document.addEventListener(
+			type,
+			(event) => {
+				if (event.button === 1) {
+					state.middleScrolling = true;
+					markUnpinned();
+				}
+			},
+			{
+				capture: true,
+				passive: true,
+			},
+		);
+	}
+	document.addEventListener(
+		"wheel",
+		(event) => {
+			if (!isMessageInteraction(event.target)) return;
+			state.middleScrolling = false;
+			if (event.deltaY < 0) markUnpinned();
+			else if (event.deltaY > 0) state.rearmOnBottom = true;
+		},
+		{ capture: true, passive: true },
+	);
+	document.addEventListener(
+		"touchmove",
+		(event) => {
+			if (isMessageInteraction(event.target)) markUnpinned();
+		},
+		{ capture: true, passive: true },
+	);
+	document.addEventListener(
+		"keydown",
+		(event) => {
+			if (isUpwardScrollKey(event) && isMessageInteraction(event.target))
+				markUnpinned();
+		},
+		true,
+	);
+
+	bindMessageResize();
+	scrollBottom();
+}
+
+export function captureAnchor() {
+	if (historyLoading) return false;
+	const messages = document.getElementById("messages");
+	if (!(messages instanceof HTMLElement)) return false;
+	const viewportTop = messages.getBoundingClientRect().top;
+	const visibleMessage = [...messages.querySelectorAll("[data-message-id]")].find(
+		(message) => message.getBoundingClientRect().bottom > viewportTop,
+	);
+	historyLoading = true;
+	anchor = {
+		pinnedToBottom: state.pinnedToBottom,
+		messageId: visibleMessage?.getAttribute("data-message-id"),
+		offset: visibleMessage
+			? visibleMessage.getBoundingClientRect().top - viewportTop
+			: undefined,
+		scrollHeight: messages.scrollHeight,
+		scrollTop: messages.scrollTop,
+	};
+	updateScrollControl();
+	return true;
+}
+
+export function restoreAnchor() {
+	const saved = anchor;
+	anchor = undefined;
+	historyLoading = false;
+	if (!saved) return;
+	if (saved.pinnedToBottom) {
+		scrollBottom();
+		return;
+	}
+
+	// Restore against a retained DOM node rather than estimating from scrollHeight.
+	// Datastar morphs and deferred message rendering can both change unrelated heights.
+	const restore = () => {
+		const messages = document.getElementById("messages");
+		if (!(messages instanceof HTMLElement)) return;
+		const retainedMessage = [...messages.querySelectorAll("[data-message-id]")].find(
+			(message) => message.getAttribute("data-message-id") === saved.messageId,
+		);
+		if (retainedMessage && saved.offset !== undefined) {
+			const currentOffset =
+				retainedMessage.getBoundingClientRect().top -
+				messages.getBoundingClientRect().top;
+			messages.scrollTop = retainedAnchorScrollTop(
+				messages.scrollTop,
+				currentOffset,
+				saved.offset,
+			);
+		} else {
+			messages.scrollTop =
+				saved.scrollTop + messages.scrollHeight - saved.scrollHeight;
+		}
+		updateScrollControl();
+	};
+
+	// The immediate correction prevents a paint at the morphed position. Follow-up
+	// frames absorb layout produced by custom-element hydration and style resolution.
+	restore();
+	requestAnimationFrame(() => {
+		restore();
+		requestAnimationFrame(restore);
+	});
+}
+
+export function retainedAnchorScrollTop(scrollTop, currentOffset, savedOffset) {
+	return scrollTop + currentOffset - savedOffset;
+}
+
+export function hasPointerDragIntent(startX, startY, currentX, currentY) {
+	return Math.hypot(currentX - startX, currentY - startY) >= 8;
+}
+
+export function shouldRearmAfterScroll(
+	wasPinned,
+	previousTop,
+	scrollTop,
+	distance,
+	hasDownwardIntent,
+) {
+	return (
+		!wasPinned &&
+		hasDownwardIntent &&
+		scrollTop > previousTop &&
+		distance <= liveEdgeThresholdPx
+	);
+}
+
+export function scrollBottom(behavior = "auto") {
+	clearBottomScrollTimers();
+	anchor = undefined;
+	historyLoading = false;
+	state.middleScrolling = false;
+	state.pinnedToBottom = true;
+	state.pointerScrolling = false;
+	state.rearmOnBottom = false;
+	const scroll = () => {
+		const messages = document.getElementById("messages");
+		if (!(messages instanceof HTMLElement) || !state.pinnedToBottom) return;
+		messages.scrollTo({ top: messages.scrollHeight, behavior });
+		updateScrollControl();
+	};
+	scroll();
+	if (behavior === "auto") {
+		for (const delay of [16, 80, 180]) {
+			const timer = setTimeout(() => {
+				bottomScrollTimers.delete(timer);
+				scroll();
+			}, delay);
+			bottomScrollTimers.add(timer);
+		}
+	}
+}
+
+export function markUnpinned() {
+	clearBottomScrollTimers();
+	state.pinnedToBottom = false;
+	state.rearmOnBottom = false;
+	const messages = document.getElementById("messages");
+	if (messages instanceof HTMLElement) state.scrollTop = messages.scrollTop;
+	updateScrollControl();
+}
+
+function clearBottomScrollTimers() {
+	for (const timer of bottomScrollTimers) clearTimeout(timer);
+	bottomScrollTimers.clear();
+}
+
+function isMessageInteraction(target) {
+	const messages = document.getElementById("messages");
+	return (
+		messages instanceof HTMLElement &&
+		target instanceof Node &&
+		messages.contains(target)
+	);
+}
+
+function isUpwardScrollKey(event) {
+	return (
+		event.key === "ArrowUp" ||
+		event.key === "PageUp" ||
+		event.key === "Home" ||
+		(event.key === " " && event.shiftKey)
+	);
+}
+
+export function bindMessageResize() {
+	const stack = document.querySelector("#messages > .messages-stack");
+	const prompt = document.getElementById("prompt-box");
+	if (!(stack instanceof HTMLElement) || !(prompt instanceof HTMLElement)) return;
+	if (stack === observedMessageStack && prompt === observedPrompt) return;
+	messageResizeObserver ??= new ResizeObserver(() => {
+		updatePromptSpacer();
+		const messages = document.getElementById("messages");
+		if (messages instanceof HTMLElement && state.pinnedToBottom)
+			messages.scrollTop = messages.scrollHeight;
+		updateScrollControl();
+	});
+	if (observedMessageStack) messageResizeObserver.unobserve(observedMessageStack);
+	if (observedPrompt) messageResizeObserver.unobserve(observedPrompt);
+	observedMessageStack = stack;
+	observedPrompt = prompt;
+	messageResizeObserver.observe(stack);
+	messageResizeObserver.observe(prompt);
+}
+
+function updatePromptSpacer() {
+	const prompt = document.getElementById("prompt-box");
+	const spacer = document.getElementById("messages-prompt-spacer");
+	if (!(prompt instanceof HTMLElement) || !(spacer instanceof HTMLElement)) return;
+	const height = `${prompt.offsetHeight + promptSpacerClearancePx}px`;
+	if (spacer.style.height !== height) spacer.style.height = height;
+}
+
+function updateScrollControl() {
+	const messages = document.getElementById("messages");
+	const button = document.getElementById("messages-latest");
+	if (!(messages instanceof HTMLElement) || !(button instanceof HTMLButtonElement))
+		return;
+	const distance = messages.scrollHeight - messages.scrollTop - messages.clientHeight;
+	const active = !state.pinnedToBottom && distance >= scrollControlThresholdPx;
+	button.hidden = !active;
+	button.inert = !active;
+	button.tabIndex = active ? 0 : -1;
+}
+
+export function hydratePierreDiff(host) {
+	if (!(host instanceof HTMLElement)) return;
+	const template = host.querySelector('template[shadowrootmode="open"]');
+	if (!(template instanceof HTMLTemplateElement)) return;
+	// Pierre may create the shadow root before Datastar inserts its template.
+	const shadow = host.shadowRoot ?? host.attachShadow({ mode: "open" });
+	shadow.append(template.content.cloneNode(true));
+	template.remove();
+}

package/static/app/message-scroll_test.ts

@@ -0,0 +1,28 @@
+import { test } from "bun:test";
+
+import { assertEquals } from "#testing/assertions";
+
+import {
+	hasPointerDragIntent,
+	retainedAnchorScrollTop,
+	shouldRearmAfterScroll,
+} from "./message-scroll.js";
+
+test("retained message anchor preserves its viewport offset", () => {
+	assertEquals(retainedAnchorScrollTop(240, 760, 40), 960);
+	assertEquals(retainedAnchorScrollTop(960, 40, 40), 960);
+});
+
+test("pointer presses require drag intent before releasing follow mode", () => {
+	assertEquals(hasPointerDragIntent(100, 100, 100, 100), false);
+	assertEquals(hasPointerDragIntent(100, 100, 107, 100), false);
+	assertEquals(hasPointerDragIntent(100, 100, 108, 100), true);
+	assertEquals(hasPointerDragIntent(100, 100, 106, 106), true);
+});
+
+test("downward user scrolling to the end re-arms following", () => {
+	assertEquals(shouldRearmAfterScroll(false, 400, 420, 8, true), true);
+	assertEquals(shouldRearmAfterScroll(false, 400, 420, 8.1, true), false);
+	assertEquals(shouldRearmAfterScroll(false, 420, 400, 0, true), false);
+	assertEquals(shouldRearmAfterScroll(false, 400, 420, 0, false), false);
+});

package/static/app/model-search.js

@@ -0,0 +1,37 @@
+import { fuzzyFilter } from "@earendil-works/pi-tui/dist/fuzzy.js";
+
+export function filterModelSearch(input, query) {
+	if (!(input instanceof HTMLInputElement)) return;
+	const command = input.closest(".command");
+	if (!(command instanceof HTMLElement)) return;
+	const items = [...command.querySelectorAll('[role="menuitem"]')].filter(
+		(item) => item instanceof HTMLElement,
+	);
+	const originalItems = items.toSorted(
+		(first, second) =>
+			Number(first.dataset.modelSearchOrder) -
+			Number(second.dataset.modelSearchOrder),
+	);
+	const matches = fuzzyFilter(originalItems, query, (item) =>
+		modelSearchText(item.dataset.filter ?? "", item.dataset.keywords ?? ""),
+	);
+	const visible = new Set(matches);
+	const orderedItems = query.trim()
+		? [...matches, ...originalItems.filter((item) => !visible.has(item))]
+		: originalItems;
+
+	for (const item of orderedItems) {
+		// Basecoat 1.0.2 tracks the active item by index. Reordering before
+		// refresh() can otherwise leave the old item active as well.
+		item.classList.remove("active");
+		item.setAttribute("aria-hidden", String(!visible.has(item)));
+		item.parentElement?.append(item);
+	}
+	command.refresh?.();
+}
+
+export function modelSearchText(modelAndProvider, name) {
+	// Preserve camel-case boundaries that pi's case-insensitive matcher cannot see.
+	const expandedName = name.replace(/([\p{Ll}\d])(\p{Lu})/gu, "$1 $2");
+	return `${expandedName} ${modelAndProvider} ${name}`;
+}