@gavin-hu/my-pi-agent 0.15.0 → 0.15.1

package/extensions/file-browse/live.ts

@@ -0,0 +1,222 @@
+/**
+ * Live status for the browse pages.
+ *
+ * A page that stays open holds one event stream; this module builds the snapshot
+ * it is sent, the frame that carries it, and the channel that fans it out on a
+ * tick. The git and diff providers already memoize, so a tick re-reads at most
+ * one `git status`, and every read failure degrades to `null`: a status feed
+ * must never be able to fail a page or the server that serves it.
+ *
+ * The channel opens no socket of its own — the caller hands it a `write`/`end`
+ * pair — so the whole feed is tested without one.
+ */
+
+import { changeDirs } from "./diff.ts";
+import type { DiffList, GitDiffProvider, GitStatus, GitStatusProvider } from "./git.ts";
+
+/**
+ * The changed-path index the pages render from: the totals the changes chip
+ * prints and the paths the tree and listing mark.
+ */
+export interface ChangeIndex {
+	/** Changed paths in the scope. */
+	count: number;
+	/** Added lines in the scope. */
+	insertions: number;
+	/** Removed lines in the scope. */
+	deletions: number;
+	/** Changed files, root-relative. */
+	files: ReadonlySet<string>;
+	/** Directories that contain a changed file. */
+	dirs: ReadonlySet<string>;
+}
+
+/** The marker/totals index a change list yields. */
+export function changeIndexOf(list: DiffList): ChangeIndex {
+	return {
+		count: list.files.length,
+		insertions: list.insertions,
+		deletions: list.deletions,
+		files: new Set(list.files.map((file) => file.rel)),
+		dirs: changeDirs(list.files),
+	};
+}
+
+/** A change index as it goes over the wire: sets become ordered lists. */
+export interface LiveChanges {
+	count: number;
+	insertions: number;
+	deletions: number;
+	files: string[];
+	dirs: string[];
+}
+
+/** One status frame's payload. */
+export interface LiveSnapshot {
+	/** Server wall clock when the snapshot was taken, in ms. */
+	at: number;
+	/** How long the server has been listening, in ms. */
+	uptimeMs: number;
+	/** Requests the server has answered so far, this one included. */
+	requests: number;
+	/** Branch or detached head, or `null` outside a repository. */
+	git: GitStatus | null;
+	/** Uncommitted changes against `HEAD`, or `null` when unavailable. */
+	changes: LiveChanges | null;
+}
+
+/** The snapshot a streamed frame is built from. */
+export interface LiveStatusSource {
+	snapshot(): Promise<LiveSnapshot>;
+}
+
+export interface LiveStatusOptions {
+	/** Read-only git context; omitted when the page has none. */
+	git?: GitStatusProvider;
+	/** Read-only diff provider; omitted when the diff view is off. */
+	diff?: GitDiffProvider;
+	/** When the server started listening, in ms. */
+	startedAt: number;
+	/** Requests answered so far, read per snapshot. */
+	requests: () => number;
+	/** Wall-clock seam; defaults to the real clock. */
+	now?: () => number;
+}
+
+/** Read a provider, turning a rejection or an absent value into `null`. */
+async function settled<T>(read: () => Promise<T | undefined>): Promise<T | null> {
+	try {
+		return (await read()) ?? null;
+	} catch {
+		return null;
+	}
+}
+
+/**
+ * Build the status source for one server. `snapshot` never rejects: a
+ * non-repository, a failed git call, or a timeout simply leaves that field
+ * `null`, and the page keeps whatever it last showed.
+ */
+export function createLiveStatus(options: LiveStatusOptions): LiveStatusSource {
+	const now = options.now ?? (() => Date.now());
+	const diff = options.diff;
+	return {
+		async snapshot() {
+			const at = now();
+			const git = options.git ? await settled(options.git) : null;
+			const list = diff ? await settled(() => diff.list("head")) : null;
+			const index = list ? changeIndexOf(list) : null;
+			return {
+				at,
+				uptimeMs: Math.max(0, at - options.startedAt),
+				requests: options.requests(),
+				git,
+				changes: index
+					? {
+							count: index.count,
+							insertions: index.insertions,
+							deletions: index.deletions,
+							files: [...index.files].sort(),
+							dirs: [...index.dirs].sort(),
+						}
+					: null,
+			};
+		},
+	};
+}
+
+/** One server-sent event carrying a snapshot. */
+export function frameOf(snapshot: LiveSnapshot): string {
+	return `event: status\ndata: ${JSON.stringify(snapshot)}\n\n`;
+}
+
+/** A connected page: the two things a server can do to its stream. */
+export interface LiveClient {
+	/** Write one frame. */
+	write(frame: string): void;
+	/** End the stream. */
+	end(): void;
+}
+
+/** Starts a repeating tick and returns its cancel. */
+export type LiveTimer = (tick: () => void, intervalMs: number) => () => void;
+
+/** The default ticker: a repeating timer that cannot hold the process open. */
+const defaultTimer: LiveTimer = (tick, intervalMs) => {
+	const handle = setInterval(tick, intervalMs);
+	(handle as { unref?: () => void }).unref?.();
+	return () => clearInterval(handle);
+};
+
+export interface LiveChannelOptions {
+	/** What each frame carries. */
+	status: LiveStatusSource;
+	/** How far apart the frames are, in ms. */
+	intervalMs: number;
+	/** Timer seam; defaults to an unref'd interval. */
+	timer?: LiveTimer;
+}
+
+/** The fan-out for one server: pages attach, ticks publish, close ends them. */
+export interface LiveChannel {
+	/** Add a connected page, send it the current status, and return its detach. */
+	attach(client: LiveClient): () => void;
+	/** End every connected page and stop the ticker. */
+	close(): void;
+}
+
+/**
+ * Build a channel for one server. The ticker runs only while at least one page
+ * is attached, so an idle server does no status work at all.
+ */
+export function createLiveChannel(options: LiveChannelOptions): LiveChannel {
+	const timer = options.timer ?? defaultTimer;
+	const clients = new Set<LiveClient>();
+	let cancel: (() => void) | undefined;
+	let inFlight = false;
+
+	const stop = (): void => {
+		cancel?.();
+		cancel = undefined;
+	};
+
+	const send = (frame: string): void => {
+		for (const client of clients) {
+			try {
+				client.write(frame);
+			} catch {
+				clients.delete(client);
+			}
+		}
+		if (clients.size === 0) stop();
+	};
+
+	// One snapshot serves every attached page, so a tick is one git read and one
+	// serialization however many tabs are open.
+	const publish = async (): Promise<void> => {
+		if (inFlight) return;
+		inFlight = true;
+		try {
+			send(frameOf(await options.status.snapshot()));
+		} finally {
+			inFlight = false;
+		}
+	};
+
+	return {
+		attach(client) {
+			clients.add(client);
+			cancel ??= timer(() => void publish(), options.intervalMs);
+			void publish();
+			return () => {
+				if (!clients.delete(client)) return;
+				if (clients.size === 0) stop();
+			};
+		},
+		close() {
+			stop();
+			for (const client of clients) client.end();
+			clients.clear();
+		},
+	};
+}

package/extensions/file-browse/router.ts

@@ -10,6 +10,7 @@
 import type { Stats } from "node:fs";
 import { stat } from "node:fs/promises";
 import {
+	eventHeaders,
 	htmlResponse,
 	isLocalHostHeader,
 	jsonError,
@@ -22,12 +23,14 @@ import {
 import { THEME_JS } from "../../lib/web/index.ts";
 import { CLIENT_JS } from "./client.ts";
 import type { ServeConfig } from "./config.ts";
-import { changeDirs, isDiffMode, type DiffMode } from "./diff.ts";
+import { isDiffMode, type DiffMode } from "./diff.ts";
 import type { DiffList, GitDiffProvider, GitStatus, GitStatusProvider } from "./git.ts";
+import { changeIndexOf, type LiveStatusSource } from "./live.ts";
 import {
 	buildFileIndex,
 	buildTree,
 	contentTypeFor,
+	directoryView,
 	isImageName,
 	listDirectory,
 	readFileView,
@@ -50,6 +53,8 @@ export interface ServeContext {
 	diff?: GitDiffProvider;
 	/** Cached quick-open file index; built on demand when omitted. */
 	index?: FileIndexProvider;
+	/** Snapshot source for the live status channel; omitted when live status is off. */
+	live?: LiveStatusSource;
 }
 
 /** Most palette rows the client will render for one query. */
@@ -93,15 +98,21 @@ async function diffFor(ctx: ServeContext, mode: DiffMode) {
 
 /** The marker/totals index derived from a change list. */
 function summaryOf(list: DiffList): ChangeSummary {
+	const index = changeIndexOf(list);
 	return {
-		count: list.files.length,
-		insertions: list.insertions,
-		deletions: list.deletions,
-		files: new Set(list.files.map((file) => file.rel)),
-		dirs: changeDirs(list.files),
+		count: index.count,
+		insertions: index.insertions,
+		deletions: index.deletions,
+		files: index.files,
+		dirs: index.dirs,
 	};
 }
 
+/** 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 `head` change summary, for the header chip, tree markers, and file action. */
 async function changed(ctx: ServeContext): Promise<ChangeSummary | undefined> {
 	const list = await diffFor(ctx, "head");
@@ -135,6 +146,7 @@ async function errorPage(
 		message,
 		tree,
 		git: await gitFor(ctx),
+		live: liveOf(ctx),
 	});
 	return htmlResponse(status, body, extra);
 }
@@ -158,8 +170,7 @@ async function view(ctx: ServeContext, rawRel: string, raw: boolean): Promise<Se
 }
 
 async function directoryResponse(ctx: ServeContext, rel: string): Promise<ServeResponse> {
-	const listing = await listDirectory(ctx.root, rel, ctx.config.maxDirEntries);
-	const tree = await treeFor(ctx, rel);
+	const { listing, tree } = await directoryView(ctx.root, rel, ctx.config.maxDirEntries);
 	const git = await gitFor(ctx);
 	const changes = await changed(ctx);
 	return htmlResponse(
@@ -173,6 +184,7 @@ async function directoryResponse(ctx: ServeContext, rel: string): Promise<ServeR
 			maxThumbBytes: ctx.config.maxThumbBytes,
 			git,
 			summary: changes,
+			live: liveOf(ctx),
 		}),
 	);
 }
@@ -195,6 +207,7 @@ async function fileResponse(ctx: ServeContext, rel: string, raw: boolean): Promi
 			markdownHtml: ctx.config.markdownHtml,
 			changed: changes?.files.has(rel),
 			summary: changes,
+			live: liveOf(ctx),
 		}),
 	);
 }
@@ -215,6 +228,7 @@ async function diffOverview(ctx: ServeContext, mode: DiffMode): Promise<ServeRes
 			tree,
 			git,
 			summary: list ? summaryOf(list) : undefined,
+			live: liveOf(ctx),
 		}),
 	);
 }
@@ -246,6 +260,7 @@ async function diffFile(ctx: ServeContext, rawRel: string, mode: DiffMode): Prom
 			tree,
 			git,
 			summary: changes,
+			live: liveOf(ctx),
 		}),
 	);
 }
@@ -304,6 +319,15 @@ async function filesApi(ctx: ServeContext, query: string): Promise<ServeResponse
 	return jsonResponse(200, { query, total: index.files.length, truncated: index.truncated, results });
 }
 
+/**
+ * The live status stream: a marker response the server in `server.ts` keeps open
+ * and feeds from the same source.
+ */
+function liveEvents(ctx: ServeContext): ServeResponse {
+	if (!ctx.config.live || !ctx.live) throw new HttpError(404, "Live status is not available.");
+	return { status: 200, headers: eventHeaders(), stream: true };
+}
+
 /**
  * Handle one request. `method` and `headers` are the raw HTTP values; `rawUrl`
  * is the request target (path plus optional query).
@@ -332,6 +356,7 @@ export async function handleRequest(
 		if (pathname === "/favicon.ico") return { status: 204, headers: pageHeaders(), body: "" };
 		if (pathname === "/api/tree") return await treeApi(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");
 		if (rawMode !== null && !isDiffMode(rawMode)) return errorPage(ctx, 400, "Unknown diff mode.");
 		const mode: DiffMode = isDiffMode(rawMode) ? rawMode : "head";

package/extensions/file-browse/server.ts

@@ -2,21 +2,30 @@
  * The HTTP server for the browse extension.
  *
  * Wraps `node:http` around the pure `handleRequest`: it resolves the root once,
- * binds `127.0.0.1`, streams `/raw` responses from disk, and exposes an
- * idempotent `close()`. The request handler is injectable so tests can avoid a
- * socket when they only need routing.
+ * binds `127.0.0.1`, streams `/raw` responses from disk, feeds the live status
+ * channel, and exposes an idempotent `close()`. The request handler is injectable
+ * so tests can avoid a socket when they only need routing.
  *
- * The bind, the response writer, and the close come from `lib/http`, which `plan`
- * shares; what stays here is this server's own request handler and the catch that
- * turns a thrown handler into a plain-text 500.
+ * The bind, the response writer, the event-stream head, and the close come from
+ * `lib/http`, which `plan` shares; what stays here is this server's own request
+ * handler, its request count, and the catch that turns a thrown handler into a
+ * plain-text 500.
  */
 
 import { realpathSync } from "node:fs";
 import { createServer } from "node:http";
-import { bindLoopback, createCloser, respond, textResponse, type ServeResponse } from "../../lib/http/index.ts";
+import {
+	bindLoopback,
+	createCloser,
+	openEventStream,
+	respond,
+	textResponse,
+	type ServeResponse,
+} from "../../lib/http/index.ts";
 import type { ServeConfig } from "./config.ts";
 import { createFileIndex } from "./files.ts";
 import type { GitDiffProvider, GitStatusProvider } from "./git.ts";
+import { createLiveChannel, createLiveStatus } from "./live.ts";
 import { handleRequest, type ServeContext } from "./router.ts";
 
 export interface FileServer {
@@ -44,16 +53,31 @@ export interface FileServerOptions {
 /** Start a read-only server rooted at `options.root` on 127.0.0.1. */
 export async function createFileServer(options: FileServerOptions): Promise<FileServer> {
 	const root = realpathSync.native(options.root);
+	const { config } = options;
+	// The status feed's two server-owned facts: how long it has been up, and how
+	// many requests it has answered. Both are read per frame, never cached.
+	let requests = 0;
+	const status = config.live
+		? createLiveStatus({
+				git: options.git,
+				diff: config.gitDiff ? options.diff : undefined,
+				startedAt: Date.now(),
+				requests: () => requests,
+			})
+		: undefined;
+	const live = status ? createLiveChannel({ status, intervalMs: config.liveIntervalMs }) : undefined;
 	const context: ServeContext = {
 		root,
-		config: options.config,
+		config,
 		git: options.git,
 		diff: options.diff,
-		index: createFileIndex(root, options.config.maxIndexEntries),
+		index: createFileIndex(root, config.maxIndexEntries),
+		live: status,
 	};
 	const handler = options.handler ?? handleRequest;
 
 	const server = createServer((request, response) => {
+		requests += 1;
 		const answer = async (): Promise<ServeResponse> => {
 			try {
 				return await handler(context, request.method ?? "GET", request.url ?? "/", request.headers);
@@ -61,9 +85,39 @@ export async function createFileServer(options: FileServerOptions): Promise<File
 				return textResponse(500, "Internal error");
 			}
 		};
-		void answer().then((result) => respond(request, response, result));
+		void answer().then((result) => {
+			// A HEAD of the stream is answered as a plain response: there is no body to
+			// hold open, and the client would otherwise wait on frames it asked not to get.
+			if (!result.stream || !live || (request.method ?? "GET").toUpperCase() === "HEAD") {
+				respond(request, response, result);
+				return;
+			}
+			openEventStream(response, result);
+			const detach = live.attach({
+				write: (frame) => {
+					response.write(frame);
+				},
+				end: () => {
+					if (!response.writableEnded) response.end();
+				},
+			});
+			request.on("close", () => {
+				detach();
+				if (!response.writableEnded) response.end();
+			});
+		});
 	});
 
-	const port = await bindLoopback(server, options.config.port);
-	return { url: `http://127.0.0.1:${port}/`, port, root, close: createCloser(server) };
+	const port = await bindLoopback(server, config.port);
+	const closeServer = createCloser(server);
+	return {
+		url: `http://127.0.0.1:${port}/`,
+		port,
+		root,
+		close: async () => {
+			// End the streams first, so a connected page does not hold the close open.
+			live?.close();
+			await closeServer();
+		},
+	};
 }

package/extensions/file-browse/styles.ts

@@ -0,0 +1,124 @@
+/**
+ * The browse pages' stylesheet: the shared Bytefly shell and components, then
+ * the page-only `browse-*` rules layered on top.
+ *
+ * Kept apart from `html.ts` so the renderers stay a renderer and the CSS stays
+ * findable as one block; the `bf-*` kit itself lives in `lib/web`.
+ */
+
+import {
+	SIDEBAR_COLLAPSE_MAX,
+	WEB_BASE_CSS,
+	WEB_COMPONENTS_CSS,
+	WEB_LAYOUT_CSS,
+	WEB_THEME_CSS,
+} from "../../lib/web/index.ts";
+
+/** The shared shell, components, and the page-only `browse-*` rules. */
+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)}
+.browse-quick-open{display:flex;align-items:center;justify-content:space-between;gap:var(--space-2);width:100%;margin-bottom:var(--space-2);padding:6px var(--space-2);border:1px solid var(--border);border-radius:var(--radius-md);background:var(--canvas);color:var(--muted);font:var(--fs-sm) var(--font-ui);cursor:pointer}
+.browse-quick-open:hover{border-color:var(--accent);color:var(--accent)}
+.browse-quick-open kbd{font-family:var(--font-mono);font-size:var(--fs-xs);color:var(--dim)}
+.browse-side__filters{display:flex;align-items:center;gap:var(--space-2);margin-bottom:var(--space-2)}
+.browse-side__filters .bf-field{flex:1 1 auto;min-width:0}
+.browse-side__filters .bf-btn{flex:0 0 auto;white-space:nowrap}
+.browse-cat{width:16px;height:16px;flex:0 0 16px;color:var(--accent)}
+.browse-cat.doc{color:var(--muted)}.browse-cat.img{color:var(--success)}.browse-cat.cfg{color:var(--warn)}.browse-cat.arc{color:var(--warn)}
+.browse-heading{margin:0 0 var(--space-3);font-size:var(--fs-lg)}
+.browse-listing th.bf-table__size,.browse-listing th.bf-table__when{text-align:right}
+.browse-listing th.bf-table__size{width:96px}
+.browse-listing th.bf-table__when{width:140px}
+.browse-dotfile .bf-table__name a{opacity:.72}
+.browse-broken{color:var(--muted);text-decoration:line-through}
+.browse-link-mark{color:var(--muted);font-size:var(--fs-xs)}
+.browse-when{display:none}
+body.palette-open{overflow:hidden}
+.browse-diff{font-family:var(--font-mono);gap:5px}
+.browse-diff:hover{color:var(--accent);text-decoration:none}
+.browse-diff__dot{color:var(--warn);font-size:9px;line-height:1}
+.browse-change{color:var(--warn);font-size:9px;line-height:1;flex:0 0 auto}
+/* Live status: the connection chip keeps its own border and padding so a tone
+   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-live-line{color:var(--muted);font-variant-numeric:tabular-nums}
+.browse-live-line::after{content:" · "}
+.browse-diff-totals{font-family:var(--font-mono)}
+.browse-diff-add{color:var(--success)}
+.browse-diff-del{color:var(--danger)}
+.browse-diff-scope{color:var(--muted);font-size:var(--fs-sm);font-weight:var(--fw-medium)}
+.browse-diff-toolbar{display:flex;align-items:center;gap:var(--space-3);margin:0 0 var(--space-3);flex-wrap:wrap}
+.browse-diff-stat{margin:0 0 var(--space-3);font:var(--fs-xs)/1.5 var(--font-mono);color:var(--muted);white-space:pre-wrap;overflow-x:auto}
+.browse-diff th.browse-diff-status{width:72px}
+.browse-diff th.browse-diff-word{width:130px}
+.browse-diff-badge{display:inline-block;min-width:16px;text-align:center;font:var(--fw-semibold) var(--fs-xs) var(--font-mono);border-radius:var(--radius-sm);padding:1px 5px;border:1px solid var(--border)}
+.browse-diff-badge--M{color:var(--warn);border-color:currentColor}
+.browse-diff-badge--A,.browse-diff-badge--Q{color:var(--success);border-color:currentColor}
+.browse-diff-badge--D{color:var(--danger);border-color:currentColor}
+.browse-diff-badge--R,.browse-diff-badge--C{color:var(--accent);border-color:currentColor}
+.browse-diff-orig{color:var(--muted);font-size:var(--fs-xs)}
+.browse-diff-word{color:var(--muted);font-size:var(--fs-sm)}
+.browse-diff-no{display:inline-block;width:46px;padding-right:var(--space-2);text-align:right;color:var(--dim);user-select:none}
+.browse-diff-sign{display:inline-block;width:16px;text-align:center;color:var(--muted);user-select:none}
+.bf-diff-line--add{background:var(--success-soft)}
+.bf-diff-line--add .browse-diff-sign{color:var(--success)}
+.bf-diff-line--del{background:var(--danger-soft)}
+.bf-diff-line--del .browse-diff-sign{color:var(--danger)}
+.bf-diff-line--hunk{color:var(--accent);background:var(--canvas)}
+.bf-diff-line--meta{color:var(--muted)}
+.bf-diff-line--note{color:var(--muted);font-style:italic}
+/* A hunk header pins to the top of the diff viewport while its body scrolls.
+   Each hunk is a section so the pinned header is bounded by its own body and
+   cannot stack on the next one. */
+.bf-diff-hunk{display:block}
+.bf-diff .bf-diff-line--hunk{position:sticky;top:0;z-index:1}
+/* Reading progress, pinned to the sticky header's bottom edge. */
+.browse-progress{position:absolute;left:0;right:0;bottom:-1px;height:2px;overflow:hidden}
+.browse-progress__fill{display:block;height:100%;width:0;background:var(--accent);transition:width var(--motion-fast) linear}
+/* File and diff pages: a measured reading column inside the card. */
+/* The Markdown body fills the card, so the scroll box is the card's width: its
+   scrollbar sits at the card edge. The measure lives on the blocks themselves:
+   on .bf-md it would be a flex item with auto inline margins, which is
+   shrink-to-fit, so a short document collapsed to its widest line. */
+.browse-measure{--browse-measure:1012px}
+.browse-measure .bf-md{--browse-gutter:max(0px,calc((100% - var(--browse-measure)) / 2));max-width:none;margin-inline:0;padding-inline:var(--space-5);padding-block:var(--space-4) var(--space-6)}
+.browse-measure .bf-md>*{max-width:var(--browse-measure);margin-inline:auto}
+/* Tables start at the prose column and take only the gutter to its right, so a
+   wide window widens them without a dead band on their left. Code stays inside
+   the measure with the rest of the prose. */
+.browse-measure .bf-md>.md-table-frame{max-width:none;padding-left:var(--browse-gutter)}
+/* A table wider than the pane scrolls, but an overlay scrollbar is invisible
+   until it moves; a gradient on the frame marks the columns still out of view.
+   It has to be the frame: the scroller clips its own content, so a pseudo-element
+   inside it would scroll away with the table. */
+.browse-measure .bf-md>.md-table-frame.browse-table-more::after{content:"";position:absolute;top:0;right:0;bottom:0;width:40px;pointer-events:none;background:linear-gradient(to left,var(--surface) 12%,transparent)}
+.bf-card__meta{font-variant-numeric:tabular-nums}
+.browse-diff-summary{font-family:var(--font-mono);white-space:nowrap}
+.browse-diff-summary .browse-diff-add{color:var(--success)}
+.browse-diff-summary .browse-diff-del{color:var(--danger)}
+.browse-hunks{color:var(--muted)}
+/* Wide screens: pin quick open and the filter, and scroll the tree on its own
+   box. The sidebar is a details element, whose content sits in an anonymous
+   wrapper with no definite height, so the panel fills the sidebar by absolute
+   positioning; below the sidebar breakpoint the disclosure keeps normal page
+   scroll. */
+@media not (max-width:${SIDEBAR_COLLAPSE_MAX}px){
+.browse-sidebar{position:relative;overflow:hidden}
+.browse-side{position:absolute;inset:0;display:flex;flex-direction:column;overflow:hidden}
+.browse-side .bf-tree{flex:1 1 auto;min-height:0;overflow:auto}
+}
+@media (max-width:820px){
+.browse-root{order:9;flex:1 1 100%;direction:ltr;text-align:left}
+}
+@media (max-width:520px){
+.bf-toolbar .bf-theme-toggle{margin-left:auto}
+}`;

package/extensions/plan/web-router.ts

@@ -13,6 +13,7 @@
  */
 
 import {
+	eventHeaders,
 	isLocalHostHeader,
 	jsonError,
 	jsonHeaders,
@@ -48,17 +49,6 @@ export interface ReviewContext {
 	onCancel: () => void;
 }
 
-/**
- * The event stream's headers: the one response that is not the page policy, because
- * it is a long-lived `text/event-stream` rather than a document.
- */
-const EVENT_HEADERS: Record<string, string> = {
-	"Content-Type": "text/event-stream; charset=utf-8",
-	"Cache-Control": "no-store",
-	Connection: "keep-alive",
-	"X-Accel-Buffering": "no",
-};
-
 /**
  * Parse and validate an `{ annotations }` request body. Returns the annotations,
  * or an error response to send instead.
@@ -127,7 +117,7 @@ export async function handleReviewRequest(
 	if (pathname === "/" || pathname === "/index.html") {
 		return { status: 200, headers: pageHeaders(), body: renderReviewPage(await ctx.page()) };
 	}
-	if (pathname === "/events") return { status: 200, headers: { ...EVENT_HEADERS }, stream: true };
+	if (pathname === "/events") return { status: 200, headers: eventHeaders(), stream: true };
 	if (pathname === "/api/cancel") {
 		if (method.toUpperCase() !== "POST") return jsonError(405, "Use POST to cancel.");
 		ctx.onCancel();

package/extensions/plan/web.ts

@@ -14,7 +14,14 @@ import { randomBytes } from "node:crypto";
 import { createServer, type IncomingMessage, type ServerResponse } from "node:http";
 import { basename } from "node:path";
 import { openInBrowser } from "../../lib/browser.ts";
-import { bindLoopback, createCloser, jsonHeaders, respond, type ServeResponse } from "../../lib/http/index.ts";
+import {
+	bindLoopback,
+	createCloser,
+	jsonHeaders,
+	openEventStream,
+	respond,
+	type ServeResponse,
+} from "../../lib/http/index.ts";
 import { fenceLanguage, highlightLines } from "../../lib/highlight.ts";
 import { codeBody, fenceInfo, planBlocks } from "./blocks.ts";
 import {
@@ -282,8 +289,7 @@ export function createPlanWebReview(store: PlanStore, deps: PlanWebReviewDeps =
 					};
 				}
 				if (result.stream) {
-					response.writeHead(result.status, result.headers);
-					response.write("retry: 2000\n\n");
+					openEventStream(response, result);
 					hadClient = true;
 					clients.add(response);
 					if (dropTimer) {

package/extensions/rewind/checklist.ts

@@ -82,8 +82,15 @@ export abstract class ChecklistScreen<T> implements Component {
 	/** A verb other than navigation, toggle, all, none, and enter. */
 	protected verb?(data: string): void;
 
-	/** The row under the cursor. */
-	protected get focused(): T | undefined {
+	/**
+	 * The row under the cursor.
+	 *
+	 * Not named `focused`: Pi's `Focusable` check is `"focused" in component`, and a
+	 * component that answers it is handed the focus flag by assignment, which a
+	 * read-only accessor turns into a process-ending `TypeError`. The checklist
+	 * tracks its own cursor and needs no hardware cursor.
+	 */
+	protected get focusedRow(): T | undefined {
 		return this.rows()[this.cursor.selected];
 	}
 
@@ -107,7 +114,7 @@ export abstract class ChecklistScreen<T> implements Component {
 		}
 		if (navigateList(data, this.cursor, this.rows().length)) return;
 		if (data === " ") {
-			const row = this.focused;
+			const row = this.focusedRow;
 			if (row !== undefined) this.toggle(row);
 			this.options.requestRender();
 			return;