@gavin-hu/my-pi-agent 0.16.0 → 0.18.0

package/extensions/file-browse/palette.ts

@@ -0,0 +1,224 @@
+/**
+ * The quick-open palette: a fuzzy path search over `/api/files`.
+ *
+ * It is a fragment of the same IIFE `client.ts` ships (`PALETTE_CLIENT_JS` is
+ * interpolated into `CLIENT_JS`). The page's keymap opens it through
+ * `window.bfPalette`, the same contract shape as `window.bfKeys`.
+ */
+
+export const PALETTE_CLIENT_JS = `	// Quick open: a fuzzy path palette backed by /api/files.
+	var quickOpenButton = document.getElementById("quick-open");
+	var paletteBackdrop = null;
+	var paletteInput = null;
+	var paletteList = null;
+	var paletteStatus = null;
+	var paletteResults = [];
+	var paletteActive = -1;
+	var paletteTimer = null;
+
+	function paletteOpen() {
+		return paletteBackdrop !== null && paletteBackdrop.hidden === false;
+	}
+
+	function encodeSegments(path) {
+		return path.split("/").map(encodeURIComponent).join("/");
+	}
+
+	function closestRole(node, role) {
+		while (node && node !== paletteList) {
+			if (node.getAttribute && node.getAttribute("role") === role) return node;
+			node = node.parentNode;
+		}
+		return null;
+	}
+
+	function buildPalette() {
+		if (paletteBackdrop) return;
+		paletteBackdrop = document.createElement("div");
+		paletteBackdrop.className = "bf-dialog";
+		paletteBackdrop.hidden = true;
+		var dialog = document.createElement("div");
+		dialog.className = "bf-dialog__panel";
+		dialog.setAttribute("role", "dialog");
+		dialog.setAttribute("aria-modal", "true");
+		dialog.setAttribute("aria-label", "Quick open a file");
+		paletteInput = document.createElement("input");
+		paletteInput.type = "text";
+		paletteInput.className = "bf-dialog__input";
+		paletteInput.id = "palette-input";
+		paletteInput.setAttribute("role", "combobox");
+		paletteInput.setAttribute("aria-expanded", "true");
+		paletteInput.setAttribute("aria-controls", "palette-list");
+		paletteInput.setAttribute("aria-autocomplete", "list");
+		paletteInput.setAttribute("autocomplete", "off");
+		paletteInput.setAttribute("placeholder", "Type a file path…");
+		paletteInput.setAttribute("aria-label", "Quick open a file");
+		paletteList = document.createElement("ul");
+		paletteList.className = "bf-dialog__list";
+		paletteList.id = "palette-list";
+		paletteList.setAttribute("role", "listbox");
+		paletteStatus = document.createElement("p");
+		paletteStatus.className = "bf-dialog__status";
+		paletteStatus.setAttribute("role", "status");
+		dialog.appendChild(paletteInput);
+		dialog.appendChild(paletteList);
+		dialog.appendChild(paletteStatus);
+		paletteBackdrop.appendChild(dialog);
+		document.body.appendChild(paletteBackdrop);
+
+		paletteBackdrop.addEventListener("mousedown", function (event) {
+			if (event.target === paletteBackdrop) closePalette();
+		});
+		paletteInput.addEventListener("input", function () {
+			if (paletteTimer) window.clearTimeout(paletteTimer);
+			paletteTimer = window.setTimeout(runSearch, 80);
+		});
+		paletteInput.addEventListener("keydown", function (event) {
+			if (event.key === "Tab") {
+				event.preventDefault();
+			} else if (event.key === "ArrowDown" || (event.ctrlKey && event.key === "n")) {
+				event.preventDefault();
+				moveActive(1);
+			} else if (event.key === "ArrowUp" || (event.ctrlKey && event.key === "p")) {
+				event.preventDefault();
+				moveActive(-1);
+			} else if (event.key === "Enter") {
+				event.preventDefault();
+				openActive();
+			} else if (event.key === "Escape") {
+				event.preventDefault();
+				closePalette();
+			}
+		});
+		paletteList.addEventListener("mousemove", function (event) {
+			var option = closestRole(event.target, "option");
+			if (option) setActive(Number(option.getAttribute("data-index")));
+		});
+		paletteList.addEventListener("click", function (event) {
+			var option = closestRole(event.target, "option");
+			if (option) {
+				setActive(Number(option.getAttribute("data-index")));
+				openActive();
+			}
+		});
+	}
+
+	function openPalette() {
+		buildPalette();
+		paletteBackdrop.hidden = false;
+		document.body.classList.add("palette-open");
+		paletteInput.value = "";
+		renderResults([], "Searching…");
+		paletteInput.focus();
+		runSearch();
+	}
+
+	function closePalette() {
+		if (!paletteBackdrop) return;
+		paletteBackdrop.hidden = true;
+		document.body.classList.remove("palette-open");
+		if (quickOpenButton) quickOpenButton.focus();
+	}
+
+	function runSearch() {
+		var query = paletteInput.value.trim();
+		fetch("/api/files?q=" + encodeURIComponent(query))
+			.then(function (response) {
+				if (!response.ok) throw new Error("search failed");
+				return response.json();
+			})
+			.then(function (data) {
+				if (paletteInput.value.trim() !== query) return;
+				if (query === "") {
+					renderResults([], data.total + " files indexed" + (data.truncated ? " (truncated)" : ""));
+				} else {
+					renderResults(data.results || [], null);
+				}
+			})
+			.catch(function () {
+				renderResults([], "Search failed");
+			});
+	}
+
+	function appendHighlighted(target, path, positions) {
+		var marks = {};
+		(positions || []).forEach(function (index) { marks[index] = true; });
+		var buffer = "";
+		var marked = false;
+		function flush() {
+			if (buffer === "") return;
+			if (marked) {
+				var mark = document.createElement("mark");
+				mark.textContent = buffer;
+				target.appendChild(mark);
+			} else {
+				target.appendChild(document.createTextNode(buffer));
+			}
+			buffer = "";
+		}
+		for (var i = 0; i < path.length; i++) {
+			var isMatch = marks[i] === true;
+			if (isMatch !== marked) { flush(); marked = isMatch; }
+			buffer += path.charAt(i);
+		}
+		flush();
+	}
+
+	function renderResults(results, hint) {
+		paletteResults = results;
+		paletteActive = results.length > 0 ? 0 : -1;
+		paletteList.textContent = "";
+		results.forEach(function (result, index) {
+			var option = document.createElement("li");
+			option.className = "bf-dialog__option";
+			option.id = "palette-option-" + index;
+			option.setAttribute("role", "option");
+			option.setAttribute("data-index", String(index));
+			appendHighlighted(option, result.path, result.positions);
+			paletteList.appendChild(option);
+		});
+		if (hint) paletteStatus.textContent = hint;
+		else if (results.length === 0) paletteStatus.textContent = "No matches";
+		else paletteStatus.textContent = results.length + (results.length === 1 ? " match" : " matches");
+		updateActive();
+	}
+
+	function updateActive() {
+		Array.prototype.forEach.call(paletteList.children, function (option, index) {
+			option.setAttribute("aria-selected", index === paletteActive ? "true" : "false");
+		});
+		var active = paletteList.children[paletteActive];
+		if (paletteActive >= 0 && active) {
+			paletteInput.setAttribute("aria-activedescendant", "palette-option-" + paletteActive);
+			if (active.scrollIntoView) active.scrollIntoView({ block: "nearest" });
+		} else {
+			paletteInput.removeAttribute("aria-activedescendant");
+		}
+	}
+
+	function setActive(index) {
+		if (index < 0 || index >= paletteResults.length) return;
+		paletteActive = index;
+		updateActive();
+	}
+
+	function moveActive(delta) {
+		if (paletteResults.length === 0) return;
+		var next = paletteActive + delta;
+		if (next < 0) next = paletteResults.length - 1;
+		if (next >= paletteResults.length) next = 0;
+		setActive(next);
+	}
+
+	function openActive() {
+		var result = paletteResults[paletteActive];
+		if (result) window.location.assign("/view/" + encodeSegments(result.path));
+	}
+	var quickOpenButton = document.getElementById("quick-open");
+	if (quickOpenButton) quickOpenButton.addEventListener("click", openPalette);
+
+	window.bfPalette = {
+		open: openPalette,
+		close: closePalette,
+		isOpen: paletteOpen
+	};`;

package/extensions/file-browse/rev.ts

@@ -0,0 +1,42 @@
+/**
+ * Revisions for the browse live status.
+ *
+ * A revision is a short digest of something a page already drew — the change set
+ * a frame carries, or the names a listing holds — so a client can tell "nothing
+ * moved" from "paint again" without comparing the payload it was sent. A
+ * collision costs one skipped repaint and is corrected by the next frame or a
+ * reload, which is the trade a 12-character digest makes for a small frame.
+ */
+
+import { createHash } from "node:crypto";
+
+/**
+ * A digest of the parts, cut to 12 hex characters. The parts are joined with NUL,
+ * which no filename can contain, so two different lists cannot run together into
+ * the same text.
+ */
+function digest(parts: readonly string[]): string {
+	return createHash("sha1").update(parts.join("\u0000")).digest("hex").slice(0, 12);
+}
+
+/** The change set a frame carries: its totals and paths, in a stable order. */
+export interface RevisionInput {
+	count: number;
+	insertions: number;
+	deletions: number;
+	files: readonly string[];
+	dirs: readonly string[];
+}
+
+/**
+ * The revision of a change set. The totals are part of it, so an edit that moves
+ * no path still moves the revision and the chip's `+A −D` stays honest.
+ */
+export function changeRevision(changes: RevisionInput): string {
+	return digest([`${changes.count}:${changes.insertions}:${changes.deletions}`, ...changes.files, ...changes.dirs]);
+}
+
+/** The revision of a listing's names, independent of the order they arrived in. */
+export function listingRevision(names: readonly string[]): string {
+	return digest([...names].sort());
+}

package/extensions/file-browse/router.ts

@@ -20,8 +20,9 @@ import {
 	scriptHeaders,
 	type ServeResponse,
 } from "../../lib/http/index.ts";
-import { THEME_JS } from "../../lib/web/index.ts";
+import { THEME_JS, THEME_JS_PATH } from "../../lib/web/index.ts";
 import { CLIENT_JS } from "./client.ts";
+import type { LivePage } from "./chrome.ts";
 import type { ServeConfig } from "./config.ts";
 import { isDiffMode, type DiffMode } from "./diff.ts";
 import type { DiffList, GitDiffProvider, GitStatus, GitStatusProvider } from "./git.ts";
@@ -43,6 +44,7 @@ import { fuzzySearch } from "./fuzzy.ts";
 import { renderDirectoryPage, renderDiffPage, renderErrorPage, renderFileDiffPage, renderFilePage } from "./html.ts";
 import type { ChangeSummary } from "./html.ts";
 import { encodePath, HttpError, relativePath, resolveDecodedPath, resolveRequestPath } from "./paths.ts";
+import { listingRevision } from "./rev.ts";
 
 export interface ServeContext {
 	root: string;
@@ -108,9 +110,13 @@ function summaryOf(list: DiffList): ChangeSummary {
 	};
 }
 
-/** The live chrome a page renders, or `undefined` when live status is off. */
-function liveOf(ctx: ServeContext): { intervalMs: number } | undefined {
-	return ctx.config.live && ctx.live ? { intervalMs: ctx.config.liveIntervalMs } : undefined;
+/**
+ * The live chrome a page renders, or `undefined` when live status is off. A
+ * listing page also passes the revision of what it drew, which is what its
+ * reload control compares against; every other page has nothing to compare.
+ */
+function liveOf(ctx: ServeContext, folder?: { dir: string; rev: string }): LivePage | undefined {
+	return ctx.config.live && ctx.live ? { intervalMs: ctx.config.liveIntervalMs, ...folder } : undefined;
 }
 
 /** The `head` change summary, for the header chip, tree markers, and file action. */
@@ -184,7 +190,10 @@ async function directoryResponse(ctx: ServeContext, rel: string): Promise<ServeR
 			maxThumbBytes: ctx.config.maxThumbBytes,
 			git,
 			summary: changes,
-			live: liveOf(ctx),
+			live: liveOf(
+				ctx,
+				listing.truncated ? undefined : { dir: rel, rev: listingRevision(listing.entries.map((entry) => entry.name)) },
+			),
 		}),
 	);
 }
@@ -312,6 +321,17 @@ async function treeApi(ctx: ServeContext, decodedPath: string): Promise<ServeRes
 	return jsonResponse(200, { path: rel, entries: listing.entries.map(treeApiEntry) });
 }
 
+/** The revision of one folder's listing: what a page's reload control compares against. */
+async function dirRevApi(ctx: ServeContext, decodedPath: string): Promise<ServeResponse> {
+	const abs = await resolveDecodedPath(ctx.root, decodedPath);
+	const rel = relativePath(ctx.root, abs);
+	const listing = await listDirectory(ctx.root, rel, ctx.config.maxDirEntries);
+	// A truncated listing is a prefix whose boundary moves, so its revision is not
+	// comparable with what the page drew: `null` says "cannot tell".
+	const names = listing.entries.map((entry) => entry.name);
+	return jsonResponse(200, { path: rel, rev: listing.truncated ? null : listingRevision(names) });
+}
+
 /** Fuzzy file search for the quick-open palette, over the cached index. */
 async function filesApi(ctx: ServeContext, query: string): Promise<ServeResponse> {
 	const index = ctx.index ? await ctx.index() : await buildFileIndex(ctx.root, ctx.config.maxIndexEntries);
@@ -352,9 +372,10 @@ export async function handleRequest(
 
 	try {
 		if (pathname === "/app.js") return { status: 200, headers: scriptHeaders(), body: CLIENT_JS };
-		if (pathname === "/theme.js") return { status: 200, headers: scriptHeaders(), body: THEME_JS };
+		if (pathname === THEME_JS_PATH) return { status: 200, headers: scriptHeaders(), body: THEME_JS };
 		if (pathname === "/favicon.ico") return { status: 204, headers: pageHeaders(), body: "" };
 		if (pathname === "/api/tree") return await treeApi(ctx, search.get("path") ?? "");
+		if (pathname === "/api/dir-rev") return await dirRevApi(ctx, search.get("path") ?? "");
 		if (pathname === "/api/files") return await filesApi(ctx, search.get("q") ?? "");
 		if (pathname === "/events") return liveEvents(ctx);
 		const rawMode = search.get("mode");

package/extensions/file-browse/server.ts

@@ -103,6 +103,13 @@ export async function createFileServer(options: FileServerOptions): Promise<File
 				respond(request, response, result);
 				return;
 			}
+			// Checked before the head is written: a refusal must not leave a stream the
+			// client would wait on. `204` is the one status an event source does not
+			// reconnect after, so a page beyond the cap goes quiet instead of retrying.
+			if (live.atCapacity()) {
+				respond(request, response, { status: 204, headers: { "Cache-Control": "no-store" }, body: "" });
+				return;
+			}
 			openEventStream(response, result);
 			const detach = live.attach({
 				write: (frame) => {

package/extensions/file-browse/styles.ts

@@ -19,9 +19,6 @@ export const BROWSE_CSS = `${WEB_BASE_CSS}
 ${WEB_THEME_CSS}
 ${WEB_LAYOUT_CSS}
 ${WEB_COMPONENTS_CSS}
-${WEB_THEME_CSS}
-${WEB_LAYOUT_CSS}
-${WEB_COMPONENTS_CSS}
 .browse-side{padding:var(--space-3)}
 .browse-root{flex:1 1 auto;direction:rtl;text-align:left}
 .browse-git{font-family:var(--font-mono)}
@@ -50,6 +47,8 @@ body.palette-open{overflow:hidden}
    swap only changes the colour, and the footer line reads as one muted clause. */
 .browse-live{font-family:var(--font-mono);border:1px solid currentColor;border-radius:var(--radius-pill);padding:2px 10px}
 .browse-live__glyph{font-size:9px;line-height:1}
+.browse-reload{border:1px solid currentColor;border-radius:var(--radius-pill);padding:2px 10px;cursor:pointer;font-family:var(--font-mono)}
+.browse-reload:hover{text-decoration:underline}
 .browse-live-line{color:var(--muted);font-variant-numeric:tabular-nums}
 .browse-live-line::after{content:" · "}
 .browse-diff-totals{font-family:var(--font-mono)}
@@ -121,4 +120,12 @@ body.palette-open{overflow:hidden}
 }
 @media (max-width:520px){
 .bf-toolbar .bf-theme-toggle{margin-left:auto}
+}
+/* A printed page scrolls nothing: the card and its body open up, the pinned hunk
+   header stops pinning, and the progress hairline belongs to the screen. */
+@media print{
+.bf-card{border:0}
+.bf-card,.bf-app__main,.bf-code,.bf-md,.bf-diff,.browse-listing{height:auto!important;max-height:none!important;overflow:visible!important}
+.bf-diff .bf-diff-line--hunk{position:static}
+.browse-progress{display:none}
 }`;