@gavin-hu/my-pi-agent 0.16.0 → 0.17.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,214 +146,7 @@ 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");
-		}
-	}
-
-	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));
-	}
+${PALETTE_CLIENT_JS}
 
 	// Keyboard: the shared shortcut sheet, the per-page actions the server
 	// rendered, and hunk-to-hunk navigation through a diff.
@@ -657,15 +230,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,13 +243,13 @@ 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();
@@ -697,26 +265,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/html.ts

@@ -9,7 +9,7 @@
  */
 
 import { GLYPHS } from "../../lib/tui/glyphs.ts";
-import { brandLockup, docHead, type KeyHint, keysSheet } from "../../lib/web/index.ts";
+import { brandLockup, docHead, type KeyHint, keysSheet, themeToggle } from "../../lib/web/index.ts";
 import { escapeHtml } from "../../lib/escape.ts";
 import { formatSize, type DirEntry, type FileView, type Listing, type TreeNode } from "./files.ts";
 import { DIFF_MODES, statusLetter, type ChangedFile, type DiffLine, type DiffMode } from "./diff.ts";
@@ -159,7 +159,7 @@ ${SPRITE}
   <span class="bf-chip bf-chip--accent">read-only</span>
   ${renderLiveChip(layout.live)}
   <button type="button" class="bf-btn bf-btn--icon browse-keys-btn" id="keys-open" aria-label="Keyboard shortcuts" title="Keyboard shortcuts">?</button>
-  <button type="button" class="bf-btn bf-btn--icon bf-theme-toggle" id="theme-toggle" aria-label="Toggle light and dark theme" title="Toggle light and dark theme"><span class="theme-glyph" aria-hidden="true">☾</span></button>
+  ${themeToggle()}
 </div><div class="browse-progress" aria-hidden="true"><span class="browse-progress__fill" id="progress-fill"></span></div></header>
 <div class="bf-app__body">
   <details class="bf-app__sidebar browse-sidebar" open>
@@ -213,7 +213,7 @@ function renderTreeNode(node: TreeNode, currentRel: string, summary?: ChangeSumm
 	const href = hrefFor(node);
 	const current = node.rel === currentRel ? ` aria-current="page"` : "";
 	const twisty = isDir
-		? `<button type="button" class="bf-tree__tw bf-tree__tw--toggle" aria-expanded="${expanded}" aria-label="${escapeHtml(node.name)}">${expanded ? "▾" : "▸"}</button>`
+		? `<button type="button" class="bf-tree__tw bf-tree__tw--toggle" tabindex="-1" aria-hidden="true">${expanded ? "▾" : "▸"}</button>`
 		: `<span class="bf-tree__tw bf-tree__tw--spacer" aria-hidden="true"></span>`;
 	const dataPath = ` data-path="${escapeHtml(node.rel)}"`;
 	const name = isDir ? `${escapeHtml(node.name)}/` : escapeHtml(node.name);
@@ -222,7 +222,9 @@ function renderTreeNode(node: TreeNode, currentRel: string, summary?: ChangeSumm
 		: "";
 	const label = node.broken
 		? `<span class="browse-broken" title="broken symbolic link">${name}</span><span class="browse-link-mark">↩</span>`
-		: `<a href="${href}">${name}</a>`;
+		: isDir
+			? `<a href="${href}" aria-expanded="${expanded}" title="${escapeHtml(node.rel)}">${name}</a>`
+			: `<a href="${href}" title="${escapeHtml(node.rel)}">${name}</a>`;
 	return `<li data-open="${expanded}"><div class="bf-tree__row"${current}${dataPath}>${twisty}${iconMarkup(spec)}${label}${changeMark(summary, node.rel, isDir)}</div>${children}</li>`;
 }
 
@@ -238,7 +240,7 @@ function renderRow(entry: DirEntry, maxThumbBytes: number, thumbnails: boolean,
 		.join(" ");
 	const link = entry.broken
 		? `<span class="browse-broken" title="broken symbolic link">${name}</span>`
-		: `<a href="${hrefFor(entry)}">${name}</a>`;
+		: `<a href="${hrefFor(entry)}" title="${escapeHtml(entry.rel)}">${name}</a>`;
 	const mark = entry.isSymlink
 		? `<span class="browse-link-mark" title="${entry.broken ? "broken symbolic link" : "symbolic link"}">↩</span>`
 		: "";