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

package/extensions/file-browse/client.ts

@@ -2,245 +2,25 @@
  * The first-party browser script, served as `/app.js`.
  *
  * It is intentionally tiny and dependency-free: it only progressively enhances
- * what the server already rendered — filtering the tree and listing by path,
- * lazily expanding folders through `/api/tree` (with loading and error
- * feedback), collapsing the sidebar on narrow viewports, and swapping a broken
- * thumbnail for its category icon. Navigation works without it.
+ * what the server already rendered. The sidebar (filter, fold, lazy tree,
+ * keyboard) is `tree.ts` and the quick-open palette is `palette.ts`; both are
+ * fragments of this same IIFE, interpolated below. What stays here is the shell:
+ * sorting, wrapping, copying, the diff's hunk navigation, the reading progress,
+ * and the page's keymap. Navigation works without any of it.
  *
  * Kept as a string constant so the extension is a single self-contained module
  * and `bun build --no-bundle` needs no separate asset.
  */
 
-import { keysDialogScript, SIDEBAR_COLLAPSE_MAX, THEME_TOGGLE_JS } from "../../lib/web/index.ts";
+import { keysDialogScript, THEME_TOGGLE_JS } from "../../lib/web/index.ts";
 import { LIVE_CLIENT_JS } from "./live-client.ts";
+import { PALETTE_CLIENT_JS } from "./palette.ts";
+import { TREE_CLIENT_JS } from "./tree.ts";
 
 export const CLIENT_JS = `(function () {
 	"use strict";
-	var tree = document.querySelector("nav.bf-tree");
-	var filter = document.getElementById("filter");
-	var foldAllButton = document.getElementById("fold-all");
 	var rows = Array.prototype.slice.call(document.querySelectorAll("table.bf-table tbody tr"));
-	var query = "";
-
-	function matches(text) {
-		return !query || text.toLowerCase().indexOf(query) !== -1;
-	}
-
-	var SVG_NS = "http://www.w3.org/2000/svg";
-
-	function svgIcon(entry) {
-		var svg = document.createElementNS(SVG_NS, "svg");
-		svg.setAttribute("class", "browse-cat " + (entry.colorClass || ""));
-		svg.setAttribute("aria-hidden", "true");
-		svg.setAttribute("title", entry.label || "");
-		var use = document.createElementNS(SVG_NS, "use");
-		use.setAttribute("href", entry.iconHref);
-		svg.appendChild(use);
-		return svg;
-	}
-
-	function buildNode(entry) {
-		var li = document.createElement("li");
-		var row = document.createElement("div");
-		row.className = "bf-tree__row";
-		row.setAttribute("data-path", entry.path || "");
-		var twisty = document.createElement(entry.isDir ? "button" : "span");
-		twisty.className = "bf-tree__tw";
-		row.appendChild(twisty);
-		row.appendChild(svgIcon(entry));
-		if (entry.isDir) {
-			li.dataset.open = "false";
-			twisty.classList.add("bf-tree__tw--toggle");
-			twisty.type = "button";
-			twisty.textContent = "\\u25B8";
-			twisty.setAttribute("aria-expanded", "false");
-			twisty.setAttribute("aria-label", entry.name);
-			var dir = document.createElement("a");
-			dir.href = entry.href;
-			dir.textContent = entry.name + "/";
-			row.appendChild(dir);
-		} else if (entry.broken) {
-			twisty.className = "bf-tree__tw bf-tree__tw--spacer";
-			twisty.setAttribute("aria-hidden", "true");
-			var broken = document.createElement("span");
-			broken.className = "browse-broken";
-			broken.title = "broken symbolic link";
-			broken.textContent = entry.name;
-			row.appendChild(broken);
-			var mark = document.createElement("span");
-			mark.className = "browse-link-mark";
-			mark.textContent = "\\u21A9";
-			row.appendChild(mark);
-		} else {
-			twisty.className = "bf-tree__tw bf-tree__tw--spacer";
-			twisty.setAttribute("aria-hidden", "true");
-			var file = document.createElement("a");
-			file.href = entry.href;
-			file.textContent = entry.name;
-			row.appendChild(file);
-		}
-		li.appendChild(row);
-		return li;
-	}
-
-	function filterNode(li) {
-		var row = li.querySelector(":scope > .bf-tree__row");
-		var own = matches(row ? row.getAttribute("data-path") || row.textContent : "");
-		var childMatch = false;
-		Array.prototype.forEach.call(li.querySelectorAll(":scope > ul > li"), function (child) {
-			if (filterNode(child)) childMatch = true;
-		});
-		var visible = own || childMatch;
-		li.hidden = !visible;
-		return visible;
-	}
-
-	function applyFilter() {
-		var empty = document.getElementById("tree-empty");
-		var anyTree = false;
-		if (tree) {
-			Array.prototype.forEach.call(tree.querySelectorAll(":scope > ul > li"), function (li) {
-				if (filterNode(li)) anyTree = true;
-			});
-		}
-		if (empty) empty.hidden = !tree || anyTree;
-		rows.forEach(function (row) {
-			var path = row.getAttribute("data-path") || row.getAttribute("data-name") || "";
-			row.hidden = !matches(path);
-		});
-		// Lists are repainted too: while a query is active every list is shown, and
-		// clearing the query brings the folds back.
-		if (tree) Array.prototype.forEach.call(tree.querySelectorAll("li[data-open]"), paint);
-	}
-
-	if (filter) {
-		filter.addEventListener("input", function () {
-			query = filter.value.trim().toLowerCase();
-			applyFilter();
-		});
-	}
-
-	// Visibility is derived: the intent in data-open, opened up while a filter is
-	// active so a fold cannot hide a match.
-	function isOpen(li) {
-		return query !== "" || li.dataset.open === "true";
-	}
-
-	function paint(li) {
-		var row = li.querySelector(":scope > .bf-tree__row");
-		var twisty = row ? row.querySelector(":scope > .bf-tree__tw") : null;
-		if (!twisty || twisty.tagName !== "BUTTON") return;
-		var open = isOpen(li);
-		// A pending load owns the glyph until it lands or fails.
-		if (!li.dataset.loading && !li.dataset.error) {
-			twisty.textContent = open ? "\\u25BE" : "\\u25B8";
-			twisty.setAttribute("aria-expanded", open ? "true" : "false");
-		}
-		var list = li.querySelector(":scope > ul");
-		if (list) list.hidden = !open;
-	}
-
-	function setOpen(li, open) {
-		li.dataset.open = open ? "true" : "false";
-		paint(li);
-	}
-
-	// Every dir with rendered children: what the fold-all control acts on.
-	function foldableDirs() {
-		var dirs = [];
-		if (!tree) return dirs;
-		Array.prototype.forEach.call(tree.querySelectorAll("li"), function (li) {
-			if (li.querySelector(":scope > ul")) dirs.push(li);
-		});
-		return dirs;
-	}
-
-	function syncFoldButton() {
-		if (!foldAllButton) return;
-		var dirs = foldableDirs();
-		var open = 0;
-		dirs.forEach(function (li) {
-			if (li.dataset.open === "true") open++;
-		});
-		foldAllButton.hidden = dirs.length === 0;
-		foldAllButton.textContent = open > 0 ? "fold all" : "expand all";
-	}
-
-	function setAll(open) {
-		foldableDirs().forEach(function (li) {
-			setOpen(li, open);
-		});
-		syncFoldButton();
-	}
-
-	function loadChildren(li, twisty, path) {
-		var name = twisty.getAttribute("aria-label") || "";
-		li.dataset.loading = "true";
-		twisty.textContent = "\\u2026";
-		twisty.setAttribute("aria-busy", "true");
-		twisty.setAttribute("aria-label", "Loading " + name);
-		fetch("/api/tree?path=" + encodeURIComponent(path))
-			.then(function (response) {
-				if (!response.ok) throw new Error("load failed");
-				return response.json();
-			})
-			.then(function (data) {
-				var built = document.createElement("ul");
-				(data.entries || []).forEach(function (entry) {
-					built.appendChild(buildNode(entry));
-				});
-				li.appendChild(built);
-				delete li.dataset.loading;
-				delete li.dataset.error;
-				setOpen(li, true);
-				twisty.setAttribute("aria-busy", "false");
-				twisty.setAttribute("aria-label", name);
-				applyFilter();
-			})
-			.catch(function () {
-				delete li.dataset.loading;
-				li.dataset.error = "true";
-				li.dataset.open = "false";
-				twisty.textContent = "\\u26A0";
-				twisty.setAttribute("aria-busy", "false");
-				twisty.setAttribute("aria-expanded", "false");
-				twisty.setAttribute("aria-label", "Could not load " + name + ". Press to retry.");
-			});
-	}
-
-	if (tree) {
-		tree.addEventListener("click", function (event) {
-			var twisty = event.target.closest(".bf-tree__tw");
-			if (!twisty || twisty.tagName !== "BUTTON" || !tree.contains(twisty)) return;
-			event.preventDefault();
-			var li = twisty.closest("li");
-			if (!li) return;
-			var list = li.querySelector(":scope > ul");
-			if (li.dataset.open === "true") {
-				setOpen(li, false);
-				return;
-			}
-			if (list) {
-				setOpen(li, true);
-				applyFilter();
-				return;
-			}
-			var row = li.querySelector(":scope > .bf-tree__row");
-			var path = row ? row.getAttribute("data-path") : null;
-			if (!path) return;
-			loadChildren(li, twisty, path);
-		});
-	}
-
-	var panel = document.querySelector("details.bf-app__sidebar");
-	if (panel && window.matchMedia) {
-		var mq = window.matchMedia("(max-width: ${SIDEBAR_COLLAPSE_MAX}px)");
-		var syncSide = function () { panel.open = !mq.matches; };
-		syncSide();
-		if (mq.addEventListener) mq.addEventListener("change", syncSide);
-		else if (mq.addListener) mq.addListener(syncSide);
-	}
-
+${TREE_CLIENT_JS}
 	Array.prototype.forEach.call(document.querySelectorAll("img.bf-table__thumb"), function (img) {
 		img.addEventListener("error", function () {
 			img.hidden = true;
@@ -366,213 +146,65 @@ export const CLIENT_JS = `(function () {
 		});
 	});
 
-	// 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");
+${PALETTE_CLIENT_JS}
+
+	// A code reference: the file's path and the lines the reader selected. A click on
+	// the button collapses the selection before its click handler runs, so a new
+	// selection replaces the stored one and a collapse leaves it alone.
+	var reference = null;
+
+	function lineNode(node) {
+		var element = node && node.nodeType === 3 ? node.parentElement : node;
+		return element && element.closest ? element.closest(".bf-code__line") : null;
+	}
+
+	function referenceText() {
+		if (!reference || !reference.path) return "";
+		var span = reference.start === reference.end ? String(reference.start) : reference.start + "-" + reference.end;
+		return reference.path + ":" + span;
+	}
+
+	function captureReference() {
+		var button = document.getElementById("copy-reference");
+		if (!button) return;
+		var selection = window.getSelection && window.getSelection();
+		if (!selection || selection.isCollapsed || selection.rangeCount === 0) return;
+		var range = selection.getRangeAt(0);
+		var from = lineNode(range.startContainer);
+		var to = lineNode(range.endContainer);
+		if (!from || !to) return;
+		var pre = from.closest("pre[data-path]");
+		if (!pre || pre !== to.closest("pre[data-path]")) return;
+		var lines = Array.prototype.slice.call(pre.querySelectorAll(".bf-code__line"));
+		var first = lines.indexOf(from);
+		var last = lines.indexOf(to);
+		if (first < 0 || last < 0) return;
+		reference = {
+			path: pre.getAttribute("data-path") || "",
+			start: Math.min(first, last) + 1,
+			end: Math.max(first, last) + 1
+		};
+		button.disabled = false;
+		button.title = "Copy " + referenceText();
+	}
+
+	function copyReference() {
+		var text = referenceText();
+		var button = document.getElementById("copy-reference");
+		if (!text) {
+			var status = document.getElementById("copy-status");
+			if (status) status.textContent = "Select lines in the code to copy a reference.";
+			return;
 		}
+		copyText(text)
+			.then(function () { if (button) flash(button, "copied", "Copied " + text); })
+			.catch(function () { if (button) flash(button, "failed", "Copy failed"); });
 	}
 
-	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));
+	if (document.getElementById("copy-reference")) {
+		document.getElementById("copy-reference").addEventListener("click", copyReference);
+		document.addEventListener("mouseup", captureReference);
+		document.addEventListener("keyup", captureReference);
 	}
 
 	// Keyboard: the shared shortcut sheet, the per-page actions the server
@@ -657,15 +289,10 @@ export const CLIENT_JS = `(function () {
 	markTableOverflow();
 
 	document.addEventListener("keydown", function (event) {
-		if (event.key === "Escape" && window.bfKeys.isOpen()) {
-			event.preventDefault();
-			window.bfKeys.close();
-			return;
-		}
-		if (paletteOpen()) {
+		if (window.bfPalette && window.bfPalette.isOpen()) {
 			if (event.key === "Escape") {
 				event.preventDefault();
-				closePalette();
+				window.bfPalette.close();
 			}
 			return;
 		}
@@ -675,19 +302,22 @@ export const CLIENT_JS = `(function () {
 		if (editable) return;
 		if ((event.ctrlKey || event.metaKey) && event.key.toLowerCase() === "k") {
 			event.preventDefault();
-			openPalette();
+			window.bfPalette.open();
 			return;
 		}
 		if (event.metaKey || event.ctrlKey || event.altKey) return;
 		if (event.key === "/") {
 			event.preventDefault();
-			openPalette();
+			window.bfPalette.open();
 		} else if (event.key === "?") {
 			event.preventDefault();
 			window.bfKeys.toggle();
 		} else if (event.key === "u" && wrapButton) {
 			event.preventDefault();
 			wrapButton.click();
+		} else if (event.key === "y" && document.getElementById("copy-reference")) {
+			event.preventDefault();
+			copyReference();
 		} else if (event.key === "r" && document.querySelector(".bf-card__actions .bf-segmented")) {
 			event.preventDefault();
 			toggleRaw();
@@ -697,26 +327,11 @@ export const CLIENT_JS = `(function () {
 		} else if (event.key === "p" && hunkAnchors.length > 0) {
 			event.preventDefault();
 			moveHunk(-1);
-		} else if (event.key === "-" && foldAllButton) {
+		} else if (event.key === "-" && document.getElementById("fold-all")) {
 			event.preventDefault();
-			foldAllButton.click();
+			document.getElementById("fold-all").click();
 		}
 	});
 
-	if (quickOpenButton) quickOpenButton.addEventListener("click", openPalette);
-	if (foldAllButton) {
-		foldAllButton.addEventListener("click", function () {
-			// The control folds when anything is open, and expands when nothing is.
-			var open = false;
-			foldableDirs().forEach(function (li) {
-				if (li.dataset.open === "true") open = true;
-			});
-			setAll(!open);
-		});
-	}
-
-	// The control starts in the state the rendered tree implies.
-	syncFoldButton();
-
 ${LIVE_CLIENT_JS}})();
 `;

package/extensions/file-browse/config.ts

@@ -57,7 +57,7 @@ export const DEFAULT_CONFIG: ServeConfig = {
 	diffContext: 3,
 	maxDiffLines: 4000,
 	live: true,
-	liveIntervalMs: 3000,
+	liveIntervalMs: 5000,
 };
 
 /** Base of the per-session port range. */
@@ -66,8 +66,8 @@ export const PORT_BASE = 4780;
 /** Number of ports in the per-session range. */
 export const PORT_RANGE = 1000;
 
-/** Fastest live-status cadence a page may be given, short enough to watch and
- * long enough that the 2 s provider caches absorb most ticks. */
+/** Fastest live-status cadence a page may be given: short enough to watch, and a
+ * floor so a page cannot outrun the git reads behind each frame. */
 export const LIVE_INTERVAL_MIN = 250;
 
 /** Slowest live-status cadence, so a page cannot look abandoned. */
@@ -81,6 +81,15 @@ export const LIVE_INTERVAL_MAX = 60_000;
  */
 export const IDLE_STOP_MS = 10_000;
 
+/**
+ * How many pages may hold the status stream at once. One snapshot serves them
+ * all, but every attached page keeps the ticker — and the git read behind each
+ * frame — running, so a local page cannot open a thousand streams and pin the
+ * server alive. The refusal is a `204`, which tells an event source to stop
+ * reconnecting instead of retrying for a slot that will not open.
+ */
+export const LIVE_MAX_CLIENTS = 8;
+
 /** A random port in the per-session range `PORT_BASE`–`PORT_BASE + PORT_RANGE - 1`. */
 export function randomPort(): number {
 	return PORT_BASE + randomInt(PORT_RANGE);