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

package/extensions/file-browse/chrome.ts

@@ -0,0 +1,83 @@
+/**
+ * The header chrome for the browse pages.
+ *
+ * The chips the toolbar carries — the git branch, the change totals, the live
+ * connection state — and the footer's live line. Everything here is pure string
+ * building over an escaped view model: a branch name, a count, and a status word
+ * are all text a repository can choose, so each one crosses `escapeHtml` before
+ * it reaches the page. The page shell and the page bodies stay in `html.ts`.
+ */
+
+import { escapeHtml } from "../../lib/escape.ts";
+import { GLYPHS } from "../../lib/tui/glyphs.ts";
+import type { GitStatus } from "./git.ts";
+import type { ChangeIndex } from "./live.ts";
+
+/** The header's git chip: the branch, or the detached head; changes are the changes chip's job. */
+export function renderGit(git: GitStatus | undefined): string {
+	if (!git) return "";
+	const name = git.branch ?? git.head;
+	if (!name) return "";
+	const glyph = git.branch ? GLYPHS.branch : GLYPHS.detached;
+	const aria = git.branch ? `git branch ${git.branch}` : `git detached at ${git.head ?? ""}`;
+	return `<span class="bf-chip browse-git" title="${escapeHtml(aria)}" aria-label="${escapeHtml(aria)}"><span class="browse-git__glyph" aria-hidden="true">${escapeHtml(glyph)}</span><span class="browse-git__name">${escapeHtml(name)}</span></span>`;
+}
+
+/** The live chrome a page renders: how often its stream is sent a frame. */
+export interface LivePage {
+	intervalMs: number;
+	/** Root-relative folder the page listed; absent on a page with no listing to check. */
+	dir?: string;
+	/** Revision of the names that listing drew, which the reload control compares against. */
+	rev?: string;
+}
+
+/**
+ * The header's live controls: the connection chip, and the reload control the
+ * client reveals once the folder the page drew has changed on disk. Both start
+ * hidden, so a page with JS off — or with live status disabled — never shows a
+ * state or a control it cannot keep true; the reload control is not rendered at
+ * all when the page has no listing revision to compare.
+ *
+ * The chip is deliberately not a `role="status"` region: the header is where a
+ * reader looks for the page's state, not a place to announce every change to it.
+ */
+export function renderLiveChrome(live: LivePage | undefined): string {
+	if (!live) return "";
+	const rev =
+		live.rev === undefined ? "" : ` data-dir="${escapeHtml(live.dir ?? "")}" data-rev="${escapeHtml(live.rev)}"`;
+	const chip = `<span class="bf-chip bf-chip--accent browse-live" id="live-state" title="Live status from the browse server" data-interval="${live.intervalMs}"${rev} hidden><span class="browse-live__glyph" aria-hidden="true">${escapeHtml(GLYPHS.browse)}</span><span class="browse-live__text">connecting</span></span>`;
+	if (live.rev === undefined) return chip;
+	return `${chip}<button type="button" class="bf-chip bf-chip--warn browse-reload" id="reload-hint" title="This folder changed on disk" hidden>⟳ reload</button>`;
+}
+
+/**
+ * The footer's live line, hidden until the first frame: uptime and requests are
+ * server facts the rendered page does not know at build time.
+ */
+export function renderLiveStatus(): string {
+	return `<span class="browse-live-line" id="live-status" hidden></span>`;
+}
+
+/**
+ * The header's changes chip, linking to the diff overview. With live status on,
+ * a hidden shell is always rendered so the chip can appear and disappear as the
+ * working tree changes, without the client inserting elements into the header.
+ */
+export function renderChanges(summary: ChangeIndex | undefined, live: LivePage | undefined): string {
+	const count = summary?.count ?? 0;
+	if (count <= 0) {
+		return live
+			? `<a class="bf-chip browse-diff" id="browse-changes" href="/diff" title="View uncommitted changes" hidden></a>`
+			: "";
+	}
+	const label = `${count} change${count === 1 ? "" : "s"}`;
+	const insertions = summary?.insertions ?? 0;
+	const deletions = summary?.deletions ?? 0;
+	const totals =
+		insertions + deletions > 0
+			? ` <span class="browse-diff-totals"><span class="browse-diff-add">+${insertions}</span> <span class="browse-diff-del">−${deletions}</span></span>`
+			: "";
+	const aria = `${label} against HEAD${insertions + deletions > 0 ? `, ${insertions} insertions and ${deletions} deletions` : ""}`;
+	return `<a class="bf-chip browse-diff" id="browse-changes" href="/diff" title="View uncommitted changes" aria-label="${escapeHtml(aria)}"><span class="browse-diff__dot" aria-hidden="true">●</span>${escapeHtml(label)}${totals}</a>`;
+}

package/extensions/file-browse/client.ts

@@ -148,6 +148,65 @@ ${TREE_CLIENT_JS}
 
 ${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"); });
+	}
+
+	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
 	// rendered, and hunk-to-hunk navigation through a diff.
 	${keysDialogScript("keys-open")}
@@ -256,6 +315,9 @@ ${PALETTE_CLIENT_JS}
 		} 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();

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);

package/extensions/file-browse/diff-html.ts

@@ -0,0 +1,94 @@
+/**
+ * The browse pages' unified-diff body: one line per row, with the gutter, the
+ * sign, and the hunk sections.
+ *
+ * Split from `html.ts` when that module reached its named ceiling: the diff body
+ * is the one part of the page renderers with its own rule — old and new sides are
+ * highlighted as two documents per hunk, so the tokenizer carries state within a
+ * hunk and never across the unchanged lines a hunk does not show.
+ */
+
+import { escapeHtml } from "../../lib/escape.ts";
+import { highlightLines, type HighlightLanguage } from "../../lib/highlight.ts";
+import type { DiffLine } from "./diff.ts";
+
+/**
+ * The inner HTML per diff line. Hunk bodies are highlighted by rebuilding the
+ * old side (context + deleted) and the new side (context + added), so the
+ * tokenizer carries state within a hunk; meta, hunk, and note lines stay plain.
+ * State does not cross hunks, since the unchanged lines between them are absent.
+ */
+function highlightDiffText(lines: DiffLine[], language?: HighlightLanguage): string[] {
+	if (!language) return lines.map((line) => escapeHtml(line.text));
+	const out: string[] = new Array(lines.length);
+	let index = 0;
+	while (index < lines.length) {
+		const kind = lines[index].kind;
+		if (kind !== "ctx" && kind !== "add" && kind !== "del") {
+			out[index] = escapeHtml(lines[index].text);
+			index++;
+			continue;
+		}
+		const start = index;
+		const oldDoc: string[] = [];
+		const newDoc: string[] = [];
+		while (index < lines.length) {
+			const body = lines[index].kind;
+			if (body !== "ctx" && body !== "add" && body !== "del") break;
+			if (body === "ctx") {
+				oldDoc.push(lines[index].text);
+				newDoc.push(lines[index].text);
+			} else if (body === "add") {
+				newDoc.push(lines[index].text);
+			} else {
+				oldDoc.push(lines[index].text);
+			}
+			index++;
+		}
+		const oldHtml = highlightLines(oldDoc, language);
+		const newHtml = highlightLines(newDoc, language);
+		let oldIndex = 0;
+		let newIndex = 0;
+		for (let cursor = start; cursor < index; cursor++) {
+			const body = lines[cursor].kind;
+			if (body === "ctx") {
+				out[cursor] = newHtml[newIndex];
+				newIndex++;
+				oldIndex++;
+			} else if (body === "add") {
+				out[cursor] = newHtml[newIndex];
+				newIndex++;
+			} else {
+				out[cursor] = oldHtml[oldIndex];
+				oldIndex++;
+			}
+		}
+	}
+	return out;
+}
+
+/** Render unified-diff lines with a two-column gutter and per-kind styling. */
+export function renderDiffLines(lines: DiffLine[], language?: HighlightLanguage): string {
+	const html = highlightDiffText(lines, language);
+	// Every hunk is a section so its sticky header is bounded by its own body;
+	// the section also gives the keyboard a stable, non-sticky scroll target.
+	const out: string[] = [];
+	let hunks = 0;
+	let open = false;
+	lines.forEach((line, index) => {
+		if (line.kind === "hunk") {
+			if (open) out.push("</span>");
+			hunks += 1;
+			out.push(`<span class="bf-diff-hunk" id="hunk-${hunks}" data-hunk="${hunks}">`);
+			open = true;
+		}
+		const sign = line.kind === "add" ? "+" : line.kind === "del" ? "-" : line.kind === "ctx" ? " " : "";
+		const gutter = `<span class="browse-diff-no" aria-hidden="true">${line.oldNo ?? ""}</span><span class="browse-diff-no" aria-hidden="true">${line.newNo ?? ""}</span>`;
+		const marker = `<span class="browse-diff-sign" aria-hidden="true">${sign}</span>`;
+		out.push(
+			`<span class="bf-code__line bf-diff-line bf-diff-line--${line.kind}">${gutter}${marker}${html[index]}</span>`,
+		);
+	});
+	if (open) out.push("</span>");
+	return out.join("");
+}

package/extensions/file-browse/html.ts

@@ -8,11 +8,12 @@
  * the page-only `browse-*` rules from `styles.ts`.
  */
 
-import { GLYPHS } from "../../lib/tui/glyphs.ts";
 import { brandLockup, docHead, type KeyHint, keysSheet, themeToggle } from "../../lib/web/index.ts";
 import { escapeHtml } from "../../lib/escape.ts";
+import { renderChanges, renderGit, renderLiveChrome, renderLiveStatus, type LivePage } from "./chrome.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";
+import { DIFF_MODES, statusLetter, type ChangedFile, type DiffMode } from "./diff.ts";
+import { renderDiffLines } from "./diff-html.ts";
 import type { DiffFileView, GitStatus } from "./git.ts";
 import type { ChangeIndex } from "./live.ts";
 import { detectLanguage, highlightLines, type HighlightLanguage } from "../../lib/highlight.ts";
@@ -36,16 +37,6 @@ function iconMarkup(spec: IconSpec, hidden = false): string {
 	return `<svg class="browse-cat ${spec.colorClass}"${hidden ? " hidden" : ""} aria-hidden="true" title="${escapeHtml(spec.label)}"><use href="${iconHref(spec.icon)}"/></svg>`;
 }
 
-/** The header's git chip: the branch, or the detached head; changes are the changes chip's job. */
-function renderGit(git: GitStatus | undefined): string {
-	if (!git) return "";
-	const name = git.branch ?? git.head;
-	if (!name) return "";
-	const glyph = git.branch ? GLYPHS.branch : GLYPHS.detached;
-	const aria = git.branch ? `git branch ${git.branch}` : `git detached at ${git.head ?? ""}`;
-	return `<span class="bf-chip browse-git" title="${escapeHtml(aria)}" aria-label="${escapeHtml(aria)}"><span class="browse-git__glyph" aria-hidden="true">${escapeHtml(glyph)}</span><span class="browse-git__name">${escapeHtml(name)}</span></span>`;
-}
-
 /**
  * The changed-path index for markers, plus the totals shown in the chip. It is
  * the same index the live status feed sends, so the page and its updates agree
@@ -66,55 +57,6 @@ function changeMark(summary: ChangeSummary | undefined, rel: string, isDir: bool
 		: "";
 }
 
-/** The live chrome a page renders: how often its stream is sent a frame. */
-export interface LivePage {
-	intervalMs: number;
-}
-
-/**
- * The header's connection chip. It starts hidden and says "connecting": the
- * client reveals and paints it from the event stream, so a page with JS off — or
- * with live status disabled — never shows a state it cannot keep true.
- *
- * It is deliberately not a `role="status"` region: the header is where a reader
- * looks for the page's state, not a place to announce every change to it.
- */
-function renderLiveChip(live: LivePage | undefined): string {
-	if (!live) return "";
-	return `<span class="bf-chip bf-chip--accent browse-live" id="live-state" title="Live status from the browse server" data-interval="${live.intervalMs}" hidden><span class="browse-live__glyph" aria-hidden="true">${escapeHtml(GLYPHS.browse)}</span><span class="browse-live__text">connecting</span></span>`;
-}
-
-/**
- * The footer's live line, hidden until the first frame: uptime and requests are
- * server facts the rendered page does not know at build time.
- */
-function renderLiveStatus(): string {
-	return `<span class="browse-live-line" id="live-status" hidden></span>`;
-}
-
-/**
- * The header's changes chip, linking to the diff overview. With live status on,
- * a hidden shell is always rendered so the chip can appear and disappear as the
- * working tree changes, without the client inserting elements into the header.
- */
-function renderChanges(summary: ChangeSummary | undefined, live: LivePage | undefined): string {
-	const count = summary?.count ?? 0;
-	if (count <= 0) {
-		return live
-			? `<a class="bf-chip browse-diff" id="browse-changes" href="/diff" title="View uncommitted changes" hidden></a>`
-			: "";
-	}
-	const label = `${count} change${count === 1 ? "" : "s"}`;
-	const insertions = summary?.insertions ?? 0;
-	const deletions = summary?.deletions ?? 0;
-	const totals =
-		insertions + deletions > 0
-			? ` <span class="browse-diff-totals"><span class="browse-diff-add">+${insertions}</span> <span class="browse-diff-del">−${deletions}</span></span>`
-			: "";
-	const aria = `${label} against HEAD${insertions + deletions > 0 ? `, ${insertions} insertions and ${deletions} deletions` : ""}`;
-	return `<a class="bf-chip browse-diff" id="browse-changes" href="/diff" title="View uncommitted changes" aria-label="${escapeHtml(aria)}"><span class="browse-diff__dot" aria-hidden="true">●</span>${escapeHtml(label)}${totals}</a>`;
-}
-
 function hrefFor(entry: { rel: string; isDir: boolean }): string {
 	return entry.isDir ? `/browse/${encodePath(entry.rel)}` : `/view/${encodePath(entry.rel)}`;
 }
@@ -157,7 +99,7 @@ ${SPRITE}
   ${renderGit(layout.git)}
   ${renderChanges(layout.summary, layout.live)}
   <span class="bf-chip bf-chip--accent">read-only</span>
-  ${renderLiveChip(layout.live)}
+  ${renderLiveChrome(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>
   ${themeToggle()}
 </div><div class="browse-progress" aria-hidden="true"><span class="browse-progress__fill" id="progress-fill"></span></div></header>
@@ -339,6 +281,11 @@ function pageKeys(...extra: KeyHint[]): KeyHint[] {
 	];
 }
 
+/** Whether the page renders lines with a number beside them: plain text, or raw Markdown. */
+function numberedLines(page: FilePage): boolean {
+	return page.file.kind === "text" || (page.file.kind === "markdown" && page.markdownRaw === true);
+}
+
 /** The card-head controls: Markdown mode, line wrapping, and copy actions. */
 function renderFileActions(page: FilePage): string {
 	const isMarkdown = page.file.kind === "markdown";
@@ -359,7 +306,7 @@ function renderFileActions(page: FilePage): string {
 			: `<a class="bf-segmented__item" href="${viewHref}?raw=1">raw</a>`;
 		groups.push(`<span class="bf-segmented" role="group" aria-label="Markdown view">${rendered}${raw}</span>`);
 	}
-	if (page.file.kind === "text" || (isMarkdown && page.markdownRaw)) {
+	if (numberedLines(page)) {
 		groups.push(
 			`<button type="button" class="bf-btn" id="wrap-toggle" aria-pressed="false" title="Toggle line wrapping">wrap</button>`,
 		);
@@ -372,6 +319,11 @@ function renderFileActions(page: FilePage): string {
 	groups.push(
 		`<button type="button" class="bf-btn" data-copy="path" data-value="${escapeHtml(page.rel)}" title="Copy the root-relative path">copy path</button>`,
 	);
+	if (numberedLines(page)) {
+		groups.push(
+			`<button type="button" class="bf-btn" id="copy-reference" disabled title="Select lines in the file first">copy reference</button>`,
+		);
+	}
 	return `<span class="bf-card__actions">${groups.join("")}</span>`;
 }
 
@@ -388,10 +340,11 @@ export function renderFilePage(page: FilePage): string {
 
 	const isMarkdown = page.file.kind === "markdown";
 	const rendered = isMarkdown && !page.markdownRaw;
-	const wrappable = page.file.kind === "text" || (isMarkdown && page.markdownRaw);
+	const numbered = numberedLines(page);
 	const keys = pageKeys(
 		...(isMarkdown ? [{ keys: "r", label: "Toggle rendered and raw" }] : []),
-		...(wrappable ? [{ keys: "u", label: "Toggle line wrapping" }] : []),
+		...(numbered ? [{ keys: "u", label: "Toggle line wrapping" }] : []),
+		...(numbered ? [{ keys: "y", label: "Copy a reference to the selected lines" }] : []),
 	);
 
 	let content: string;
@@ -403,7 +356,7 @@ export function renderFilePage(page: FilePage): string {
 			});
 			content = `<article class="bf-md">${html}</article>`;
 		} else {
-			content = `<pre class="bf-code bf-code--numbered"><code>${renderCodeLines(page.file.lines, language)}</code></pre>`;
+			content = `<pre class="bf-code bf-code--numbered" data-path="${escapeHtml(page.rel)}"><code>${renderCodeLines(page.file.lines, language)}</code></pre>`;
 		}
 		if (page.file.truncated)
 			note = `<p class="bf-note">Showing the first ${page.file.lines.length} of ${page.file.totalLines} lines.</p>`;
@@ -447,87 +400,6 @@ function statusWord(letter: string): string {
 	return STATUS_LABEL[letter] ?? "changed";
 }
 
-/**
- * The inner HTML per diff line. Hunk bodies are highlighted by rebuilding the
- * old side (context + deleted) and the new side (context + added), so the
- * tokenizer carries state within a hunk; meta, hunk, and note lines stay plain.
- * State does not cross hunks, since the unchanged lines between them are absent.
- */
-function highlightDiffText(lines: DiffLine[], language?: HighlightLanguage): string[] {
-	if (!language) return lines.map((line) => escapeHtml(line.text));
-	const out: string[] = new Array(lines.length);
-	let index = 0;
-	while (index < lines.length) {
-		const kind = lines[index].kind;
-		if (kind !== "ctx" && kind !== "add" && kind !== "del") {
-			out[index] = escapeHtml(lines[index].text);
-			index++;
-			continue;
-		}
-		const start = index;
-		const oldDoc: string[] = [];
-		const newDoc: string[] = [];
-		while (index < lines.length) {
-			const body = lines[index].kind;
-			if (body !== "ctx" && body !== "add" && body !== "del") break;
-			if (body === "ctx") {
-				oldDoc.push(lines[index].text);
-				newDoc.push(lines[index].text);
-			} else if (body === "add") {
-				newDoc.push(lines[index].text);
-			} else {
-				oldDoc.push(lines[index].text);
-			}
-			index++;
-		}
-		const oldHtml = highlightLines(oldDoc, language);
-		const newHtml = highlightLines(newDoc, language);
-		let oldIndex = 0;
-		let newIndex = 0;
-		for (let cursor = start; cursor < index; cursor++) {
-			const body = lines[cursor].kind;
-			if (body === "ctx") {
-				out[cursor] = newHtml[newIndex];
-				newIndex++;
-				oldIndex++;
-			} else if (body === "add") {
-				out[cursor] = newHtml[newIndex];
-				newIndex++;
-			} else {
-				out[cursor] = oldHtml[oldIndex];
-				oldIndex++;
-			}
-		}
-	}
-	return out;
-}
-
-/** Render unified-diff lines with a two-column gutter and per-kind styling. */
-export function renderDiffLines(lines: DiffLine[], language?: HighlightLanguage): string {
-	const html = highlightDiffText(lines, language);
-	// Every hunk is a section so its sticky header is bounded by its own body;
-	// the section also gives the keyboard a stable, non-sticky scroll target.
-	const out: string[] = [];
-	let hunks = 0;
-	let open = false;
-	lines.forEach((line, index) => {
-		if (line.kind === "hunk") {
-			if (open) out.push("</span>");
-			hunks += 1;
-			out.push(`<span class="bf-diff-hunk" id="hunk-${hunks}" data-hunk="${hunks}">`);
-			open = true;
-		}
-		const sign = line.kind === "add" ? "+" : line.kind === "del" ? "-" : line.kind === "ctx" ? " " : "";
-		const gutter = `<span class="browse-diff-no" aria-hidden="true">${line.oldNo ?? ""}</span><span class="browse-diff-no" aria-hidden="true">${line.newNo ?? ""}</span>`;
-		const marker = `<span class="browse-diff-sign" aria-hidden="true">${sign}</span>`;
-		out.push(
-			`<span class="bf-code__line bf-diff-line bf-diff-line--${line.kind}">${gutter}${marker}${html[index]}</span>`,
-		);
-	});
-	if (open) out.push("</span>");
-	return out.join("");
-}
-
 /** The scope label for a mode. */
 function modeScope(mode: DiffMode): string {
 	if (mode === "staged") return "staged vs HEAD";

package/extensions/file-browse/live-client.ts

@@ -9,6 +9,12 @@
  *
  * It does nothing at all unless the server rendered the connection chip, which
  * is what makes `live: false` and JS-off leave the page exactly as it was.
+ *
+ * The folder check is the other half: the stream is shared by every open page, so
+ * it cannot say what *this* page's rows show. A page that lists a folder carries
+ * the revision of what it drew, and asks the server for the folder's current one
+ * once per interval; a difference reveals a reload control instead of touching
+ * the document, because a reload is the only honest way to add a row.
  */
 
 export const LIVE_CLIENT_JS = `	// Live status: one event stream feeds the header chips, the tree and listing
@@ -19,9 +25,14 @@ export const LIVE_CLIENT_JS = `	// Live status: one event stream feeds the heade
 		var liveLine = document.getElementById("live-status");
 		var liveGit = document.querySelector(".browse-git");
 		var liveChanges = document.getElementById("browse-changes");
-		var liveInterval = Number(liveChip.getAttribute("data-interval")) || 3000;
+		var liveInterval = Number(liveChip.getAttribute("data-interval")) || 5000;
 		var liveStale = 0;
 		var liveTone = "";
+		var liveRev = "";
+		var liveDir = liveChip.getAttribute("data-dir");
+		var liveDirRev = liveChip.getAttribute("data-rev");
+		var liveReload = document.getElementById("reload-hint");
+		var liveDirTimer = 0;
 
 		function formatSpan(ms) {
 			var seconds = Math.max(0, Math.round(ms / 1000));
@@ -88,7 +99,12 @@ export const LIVE_CLIENT_JS = `	// Live status: one event stream feeds the heade
 			});
 		}
 
+		// One revision covers the chip and the markers: a frame that did not move the
+		// change set is not painted at all, so a tick on an idle tree costs no DOM
+		// work however many rows the page drew.
 		function paintLiveChanges(changes) {
+			if (changes && changes.rev === liveRev) return;
+			liveRev = changes && changes.rev ? changes.rev : "";
 			var count = changes ? changes.count : 0;
 			if (liveChanges) {
 				liveChanges.hidden = count <= 0;
@@ -136,6 +152,32 @@ export const LIVE_CLIENT_JS = `	// Live status: one event stream feeds the heade
 			paintLiveChanges(snapshot.changes);
 		}
 
+		// The folder the page drew, checked against the disk on the frame cadence. It
+		// waits for the first frame, never runs in a hidden tab, and stops as soon as
+		// it has something to say: the control is the fix, and a reload ends the
+		// question.
+		function showLiveReload() {
+			window.clearInterval(liveDirTimer);
+			liveDirTimer = 0;
+			if (!liveReload || !liveReload.hidden) return;
+			liveReload.hidden = false;
+			liveReload.addEventListener("click", function () { window.location.reload(); });
+		}
+
+		function checkLiveDir() {
+			if (document.hidden || liveTone !== "success") return;
+			fetch("/api/dir-rev?path=" + encodeURIComponent(liveDir))
+				.then(function (response) {
+					if (!response.ok) throw new Error("check failed");
+					return response.json();
+				})
+				.then(function (answer) {
+					var rev = answer.rev;
+					if (typeof rev === "string" && rev !== liveDirRev) showLiveReload();
+				})
+				.catch(function () { /* the stream already reports a dead server */ });
+		}
+
 		if (window.EventSource) {
 			var liveStream = new EventSource("/events");
 			liveStream.addEventListener("open", function () {
@@ -152,7 +194,11 @@ export const LIVE_CLIENT_JS = `	// Live status: one event stream feeds the heade
 			window.addEventListener("pagehide", function () {
 				liveStream.close();
 				window.clearTimeout(liveStale);
+				window.clearInterval(liveDirTimer);
 			});
+			if (liveDir !== null && liveDirRev && liveReload) {
+				liveDirTimer = window.setInterval(checkLiveDir, liveInterval);
+			}
 		}
 	}
 `;