@gavin-hu/my-pi-agent 0.19.0 → 0.21.0

package/extensions/file-browse/transport/server.ts

@@ -1,44 +1,69 @@
 /**
- * The HTTP server for the browse extension.
+ * The browse page's mount: the prefix it holds on the session's one server, plus the
+ * live status channel it feeds.
  *
- * Wraps the pure `handleRequest` in `lib/http`'s loopback server: it resolves the
- * root once, 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.
+ * `lib/http` owns the socket and `serve` owns the session's port, so this module owns
+ * only this page's own policy: the request handler, its request count, the cap that
+ * refuses a page rather than opening a stream for it, and how long a page with nobody
+ * reading it is worth keeping.
  *
- * What stays here is this extension's own policy: the request handler, its
- * request count, the catch that turns a thrown handler into a plain-text 500, the
- * cap that refuses a page rather than opening a stream for it, and how long a
- * server with nobody reading it is worth keeping.
+ * The page takes the namespace `/files`, beside `/board` and `/plan/<id>`: every URL it
+ * emits is built from that `base` — the links, the scripts, the destinations it rewrites
+ * out of Markdown, and the client's own fetches — so one prefix is all it needs, and the
+ * origin's root stays free. `BROWSE_BASE` is that claim, named where the mount and its
+ * suite can see it.
  */
 
 import { realpathSync } from "node:fs";
-import { type ServeResponse, serveLoopback, textResponse } from "../../../lib/http/index.ts";
+import {
+	type HttpMount,
+	type MountOutcome,
+	type MountSource,
+	type ServeResponse,
+	textResponse,
+} from "../../../lib/http/index.ts";
 import { IDLE_STOP_MS, type ServeConfig } from "../config/config.ts";
 import { createFileIndex } from "../files/files.ts";
 import type { GitDiffProvider, GitStatusProvider } from "../git/git.ts";
 import { createLiveChannel, createLiveStatus } from "../live/live.ts";
 import { handleRequest, type ServeContext } from "./router.ts";
 
+/**
+ * The prefix this page answers under: its own namespace on the session's origin.
+ *
+ * Route names inside the page (`/`, `/browse`, `/view`, `/raw`, `/diff`, `/api/*`,
+ * `/events`) are unchanged and relative to this prefix, so the same page is served under
+ * `/files` and nowhere else, and the origin's root answers nothing at all.
+ */
+export const BROWSE_BASE = "/files";
+
+/** A mounted page. */
 export interface FileServer {
-	/** Origin URL, e.g. `http://127.0.0.1:49152/`. */
+	/** The page's URL, e.g. `http://127.0.0.1:4780/files/`. */
 	url: string;
-	/** The bound port. */
+	/** The port the session's server bound. */
 	port: number;
 	/** Resolved absolute root that is actually served. */
 	root: string;
-	/** Stop listening. Safe to call more than once or before `listen` settles. */
+	/** Give the prefix back. Safe to call more than once. */
 	close(): Promise<void>;
 }
 
+/** The page, or the reason the session's server has no place for it. */
+export type FileServerResult = { kind: "served"; server: FileServer } | { kind: "refused"; reason: string };
+
 export interface FileServerOptions {
 	root: string;
 	config: ServeConfig;
+	/** Where the prefix comes from: the session's server, or a suite's own. */
+	mount: MountSource;
+	/** The Pi session asking, so the prefix lands on this session's socket. */
+	session: string;
 	/** Read-only git context for the page header; omitted when unavailable. */
 	git?: GitStatusProvider;
 	/** Read-only diff provider for the change and diff views; omitted when unavailable. */
 	diff?: GitDiffProvider;
-	/** Called once the last page has been gone for `idleStopMs`; omitted, the server waits for `close()`. */
+	/** Called once the last page has been gone for `idleStopMs`; omitted, the mount waits for `close()`. */
 	onIdle?: () => void;
 	/** Grace before `onIdle`, in ms; defaults to `IDLE_STOP_MS`. */
 	idleStopMs?: number;
@@ -46,8 +71,8 @@ export interface FileServerOptions {
 	handler?: typeof handleRequest;
 }
 
-/** Start a read-only server rooted at `options.root` on 127.0.0.1. */
-export async function createFileServer(options: FileServerOptions): Promise<FileServer> {
+/** Mount a read-only page rooted at `options.root` on the session's server. */
+export async function createFileServer(options: FileServerOptions): Promise<FileServerResult> {
 	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
@@ -64,6 +89,7 @@ export async function createFileServer(options: FileServerOptions): Promise<File
 	const live = status ? createLiveChannel({ status, intervalMs: config.liveIntervalMs }) : undefined;
 	const context: ServeContext = {
 		root,
+		base: BROWSE_BASE,
 		config,
 		git: options.git,
 		diff: options.diff,
@@ -72,10 +98,13 @@ export async function createFileServer(options: FileServerOptions): Promise<File
 	};
 	const handler = options.handler ?? handleRequest;
 
-	const server = await serveLoopback({
-		ports: [config.port],
-		idle: options.onIdle === undefined ? undefined : { ms: options.idleStopMs ?? IDLE_STOP_MS, onIdle: options.onIdle },
-		handler: async (request) => {
+	const outcome: MountOutcome = await options.mount({
+		session: options.session,
+		prefix: BROWSE_BASE,
+		...(options.onIdle === undefined
+			? {}
+			: { idle: { ms: options.idleStopMs ?? IDLE_STOP_MS, onIdle: options.onIdle } }),
+		async handler(request) {
 			requests += 1;
 			let result: ServeResponse;
 			try {
@@ -96,15 +125,19 @@ export async function createFileServer(options: FileServerOptions): Promise<File
 			};
 		},
 	});
-
+	if (outcome.kind === "refused") return { kind: "refused", reason: outcome.reason };
+	const mount: HttpMount = outcome.mount;
 	return {
-		url: `${server.origin}/`,
-		port: server.port,
-		root,
-		close: async () => {
-			// End the streams first, so a connected page does not hold the close open.
-			live?.close();
-			await server.close();
+		kind: "served",
+		server: {
+			url: `${mount.origin}${mount.base}/`,
+			port: mount.port,
+			root,
+			close: async () => {
+				// End the streams first, so a connected page does not hold the mount open.
+				live?.close();
+				await mount.release();
+			},
 		},
 	};
 }

package/extensions/file-browse/view/chrome.ts

@@ -46,7 +46,7 @@ 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>`;
+	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">◉</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>`;
 }
@@ -64,11 +64,11 @@ export function renderLiveStatus(): string {
  * 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 {
+export function renderChanges(summary: ChangeIndex | undefined, live: LivePage | undefined, base: string): 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>`
+			? `<a class="bf-chip browse-diff" id="browse-changes" href="${base}/diff" title="View uncommitted changes" hidden></a>`
 			: "";
 	}
 	const label = `${count} change${count === 1 ? "" : "s"}`;
@@ -79,5 +79,5 @@ export function renderChanges(summary: ChangeIndex | undefined, live: LivePage |
 			? ` <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>`;
+	return `<a class="bf-chip browse-diff" id="browse-changes" href="${base}/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/view/client.ts

@@ -12,13 +12,15 @@
  * and `bun build --no-bundle` needs no separate asset.
  */
 
-import { keysDialogScript, THEME_TOGGLE_JS } from "../../../lib/web/index.ts";
+import { CLIENT_BASE_JS, 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";
+	/* Spliced at the outermost scope: every fragment below builds its URLs from it. */
+${CLIENT_BASE_JS}
 	var rows = Array.prototype.slice.call(document.querySelectorAll("table.bf-table tbody tr"));
 ${TREE_CLIENT_JS}
 	Array.prototype.forEach.call(document.querySelectorAll("img.bf-table__thumb"), function (img) {

package/extensions/file-browse/view/emit.ts

@@ -0,0 +1,51 @@
+/**
+ * The elements a page emits for a resolved Markdown link or image.
+ *
+ * Two renderers reach a link: the Markdown renderer (`markdown.ts`) and the raw-HTML
+ * sanitizer (`raw-html.ts`). Both ask `urls.ts` what a destination resolves to, and both
+ * then build the same anchor and the same image — the external-rel attributes, the
+ * `md-img` class, and the lazy decoding — so those live here rather than in a fourth and
+ * fifth copy. Values are escaped here; the callers hand in what the document said.
+ */
+
+import { escapeHtml } from "../../../lib/escape.ts";
+
+/**
+ * The attributes an external link carries, for a caller that is building the element
+ * itself: the raw-HTML sanitizer rewrites an existing tag's attribute list and has no
+ * content string to hand an emitter.
+ *
+ * `noopener` because the target is another origin, and `noreferrer` because the page is a
+ * local view of the reader's own repository and should not tell anyone where they read it.
+ */
+export const EXTERNAL_ATTRS = ' target="_blank" rel="noopener noreferrer"';
+
+/** An `<a>` for one destination; `title` and the rel attributes are omitted when absent. */
+export function emitAnchor(input: { href: string; content: string; title?: string; external: boolean }): string {
+	const title = input.title === undefined ? "" : ` title="${escapeHtml(input.title)}"`;
+	return `<a href="${escapeHtml(input.href)}"${title}${input.external ? EXTERNAL_ATTRS : ""}>${input.content}</a>`;
+}
+
+/**
+ * A link standing in for an image the page may not show: an external `src` is blocked by
+ * the CSP, so the reader gets something to click, labelled by the alt text.
+ */
+export function emitImageLink(href: string, label: string): string {
+	return `<a href="${escapeHtml(href)}"${EXTERNAL_ATTRS}>${escapeHtml(label)}</a>`;
+}
+
+/** An `<img>`: block-level spacing class, alt text, and the sizes a document may pin. */
+export function emitImage(input: {
+	href: string;
+	alt: string;
+	title?: string;
+	/** A document may pin a pixel size; escaped like every other value the page emits. */
+	width?: string | number;
+	height?: string | number;
+}): string {
+	const size = `${input.width === undefined ? "" : ` width="${escapeHtml(String(input.width))}"`}${
+		input.height === undefined ? "" : ` height="${escapeHtml(String(input.height))}"`
+	}`;
+	const title = input.title === undefined ? "" : ` title="${escapeHtml(input.title)}"`;
+	return `<img class="md-img" src="${escapeHtml(input.href)}" alt="${escapeHtml(input.alt)}"${size}${title} loading="lazy" decoding="async">`;
+}

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

@@ -8,7 +8,15 @@
  * the page-only `browse-*` rules from `styles.ts`.
  */
 
-import { brandLockup, docHead, type KeyHint, keysSheet, themeToggle } from "../../../lib/web/index.ts";
+import {
+	baseAttribute,
+	brandLockup,
+	docHead,
+	type KeyHint,
+	keysSheet,
+	tabTitle,
+	themeToggle,
+} from "../../../lib/web/index.ts";
 import { escapeHtml } from "../../../lib/escape.ts";
 import { renderChanges, renderGit, renderLiveChrome, renderLiveStatus, type LivePage } from "./chrome.ts";
 import { type DirEntry, type FileView, type Listing, type TreeNode } from "../files/files.ts";
@@ -58,11 +66,19 @@ function changeMark(summary: ChangeSummary | undefined, rel: string, isDir: bool
 		: "";
 }
 
-function hrefFor(entry: { rel: string; isDir: boolean }): string {
-	return entry.isDir ? `/browse/${encodePath(entry.rel)}` : `/view/${encodePath(entry.rel)}`;
+/**
+ * The URL one tree or table entry links to, written under the page's `base`.
+ *
+ * Exported because the JSON `/api/tree` route answers with the same hrefs, so the rendered
+ * tree and the client's refresh cannot disagree about where an entry lives.
+ */
+export function hrefFor(entry: { rel: string; isDir: boolean }, base: string): string {
+	return entry.isDir ? `${base}/browse/${encodePath(entry.rel)}` : `${base}/view/${encodePath(entry.rel)}`;
 }
 
 interface Layout {
+	/** The mount prefix this page answers under, e.g. `/files`; `""` for the origin's root. */
+	base: string;
 	title: string;
 	rootLabel: string;
 	tree: TreeNode;
@@ -84,10 +100,9 @@ interface Layout {
 /** A full two-pane page. */
 function renderLayout(layout: Layout): string {
 	return `<!doctype html>
-<html lang="en">
+<html lang="en"${baseAttribute(layout.base)}>
 <head>
-${docHead({ title: layout.title, css: BROWSE_CSS })}
-<link rel="icon" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='6' fill='%2358a6ff'/%3E%3C/svg%3E">
+${docHead({ title: layout.title, css: BROWSE_CSS, base: layout.base })}
 </head>
 <body class="bf-app">
 <a class="skip" href="#main">Skip to content</a>
@@ -98,7 +113,7 @@ ${SPRITE}
   ${brandLockup("browse")}
   <span class="bf-context browse-root">${escapeHtml(layout.rootLabel)}</span>
   ${renderGit(layout.git)}
-  ${renderChanges(layout.summary, layout.live)}
+  ${renderChanges(layout.summary, layout.live, layout.base)}
   <span class="bf-chip bf-chip--accent">read-only</span>
   ${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>
@@ -113,7 +128,7 @@ ${SPRITE}
         <label class="bf-field">⌕ <input class="bf-input" id="filter" type="search" placeholder="filter paths…" aria-label="Filter paths"></label>
         <button type="button" class="bf-btn" id="fold-all" title="Fold or expand every folder">fold all</button>
       </div>
-      <nav class="bf-tree" aria-label="File tree">${renderTree(layout.tree, layout.currentRel, layout.summary)}</nav>
+      <nav class="bf-tree" aria-label="File tree">${renderTree(layout.tree, layout.currentRel, layout.base, layout.summary)}</nav>
       <p class="bf-note" id="tree-empty" hidden>No matches.</p>
     </aside>
   </details>
@@ -124,36 +139,36 @@ ${layout.main}
 </div>
 <footer class="bf-app__footer">${layout.live ? renderLiveStatus() : ""}served from ${escapeHtml(layout.rootLabel)} · read-only · ${escapeHtml(layout.footerNote)}</footer>
 ${layout.keys && layout.keys.length > 0 ? keysSheet(layout.keys) : ""}
-<script src="/app.js" defer></script>
+<script src="${layout.base}/app.js" defer></script>
 </body>
 </html>
 `;
 }
 
 /** The breadcrumb trail for a root-relative path, up to (not including) the current page. */
-export function renderBreadcrumbs(rel: string): string {
+export function renderBreadcrumbs(rel: string, base: string): string {
 	const segments = rel.split("/").filter(Boolean);
 	if (segments.length === 0) return `<span aria-current="page">home</span>`;
 	// The last segment is the current page, which the heading or card title names;
 	// the trail stops at its parent so the name is not shown twice.
-	const parts = [`<a href="/browse/">home</a>`];
+	const parts = [`<a href="${base}/browse/">home</a>`];
 	let accumulated = "";
 	for (const segment of segments.slice(0, -1)) {
 		accumulated = accumulated ? `${accumulated}/${segment}` : segment;
-		parts.push(`<a href="/browse/${encodePath(accumulated)}">${escapeHtml(segment)}</a>`);
+		parts.push(`<a href="${base}/browse/${encodePath(accumulated)}">${escapeHtml(segment)}</a>`);
 	}
 	return parts.join(`<span class="bf-crumbs__sep">/</span>`);
 }
 
-function renderTree(node: TreeNode, currentRel: string, summary?: ChangeSummary): string {
-	return `<ul>${renderTreeNode(node, currentRel, summary)}</ul>`;
+function renderTree(node: TreeNode, currentRel: string, base: string, summary?: ChangeSummary): string {
+	return `<ul>${renderTreeNode(node, currentRel, base, summary)}</ul>`;
 }
 
-function renderTreeNode(node: TreeNode, currentRel: string, summary?: ChangeSummary): string {
+function renderTreeNode(node: TreeNode, currentRel: string, base: string, summary?: ChangeSummary): string {
 	const expanded = node.children.length > 0;
 	const isDir = node.isDir;
 	const spec = isDir ? FOLDER_ICON : languageOf(node.name);
-	const href = hrefFor(node);
+	const href = hrefFor(node, base);
 	const current = node.rel === currentRel ? ` aria-current="page"` : "";
 	const twisty = isDir
 		? `<button type="button" class="bf-tree__tw bf-tree__tw--toggle" tabindex="-1" aria-hidden="true">${expanded ? "▾" : "▸"}</button>`
@@ -161,7 +176,7 @@ function renderTreeNode(node: TreeNode, currentRel: string, summary?: ChangeSumm
 	const dataPath = ` data-path="${escapeHtml(node.rel)}"`;
 	const name = isDir ? `${escapeHtml(node.name)}/` : escapeHtml(node.name);
 	const children = expanded
-		? `<ul>${node.children.map((child) => renderTreeNode(child, currentRel, summary)).join("")}</ul>`
+		? `<ul>${node.children.map((child) => renderTreeNode(child, currentRel, base, summary)).join("")}</ul>`
 		: "";
 	const label = node.broken
 		? `<span class="browse-broken" title="broken symbolic link">${name}</span><span class="browse-link-mark">↩</span>`
@@ -171,11 +186,17 @@ function renderTreeNode(node: TreeNode, currentRel: string, summary?: ChangeSumm
 	return `<li data-open="${expanded}"><div class="bf-tree__row"${current}${dataPath}>${twisty}${iconMarkup(spec)}${label}${changeMark(summary, node.rel, isDir)}</div>${children}</li>`;
 }
 
-function renderRow(entry: DirEntry, maxThumbBytes: number, thumbnails: boolean, summary?: ChangeSummary): string {
+function renderRow(
+	entry: DirEntry,
+	maxThumbBytes: number,
+	thumbnails: boolean,
+	base: string,
+	summary?: ChangeSummary,
+): string {
 	const spec = entry.isDir ? FOLDER_ICON : languageOf(entry.name);
 	const showThumb = thumbnails && entry.isImage && !entry.broken && entry.size <= maxThumbBytes;
 	const visual = showThumb
-		? `<img class="bf-table__thumb" alt="" loading="lazy" decoding="async" src="/raw/${encodePath(entry.rel)}">${iconMarkup(spec, true)}`
+		? `<img class="bf-table__thumb" alt="" loading="lazy" decoding="async" src="${base}/raw/${encodePath(entry.rel)}">${iconMarkup(spec, true)}`
 		: iconMarkup(spec);
 	const name = entry.isDir ? `${escapeHtml(entry.name)}/` : escapeHtml(entry.name);
 	const classes = [entry.name.startsWith(".") ? "browse-dotfile" : "", entry.isSymlink ? "browse-symlink" : ""]
@@ -183,7 +204,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)}" title="${escapeHtml(entry.rel)}">${name}</a>`;
+		: `<a href="${hrefFor(entry, base)}" title="${escapeHtml(entry.rel)}">${name}</a>`;
 	const mark = entry.isSymlink
 		? `<span class="browse-link-mark" title="${entry.broken ? "broken symbolic link" : "symbolic link"}">↩</span>`
 		: "";
@@ -192,6 +213,7 @@ function renderRow(entry: DirEntry, maxThumbBytes: number, thumbnails: boolean,
 }
 
 export interface DirectoryPage {
+	base: string;
 	rootLabel: string;
 	rel: string;
 	listing: Listing;
@@ -213,7 +235,7 @@ export function renderDirectoryPage(page: DirectoryPage): string {
 	let body = `<table class="bf-table browse-listing" aria-labelledby="page-title">
 <thead><tr><th scope="col" aria-sort="ascending"><button type="button" class="bf-sort" data-sort="name" title="Sort by name">Name</button></th><th scope="col" class="bf-table__size"><button type="button" class="bf-sort" data-sort="size" title="Sort by size">Size</button></th><th scope="col" class="bf-table__when"><button type="button" class="bf-sort" data-sort="mtime" title="Sort by modified time">Modified</button></th></tr></thead>
 <tbody>
-${page.listing.entries.map((entry) => renderRow(entry, page.maxThumbBytes, page.thumbnails, page.summary)).join("\n")}
+${page.listing.entries.map((entry) => renderRow(entry, page.maxThumbBytes, page.thumbnails, page.base, page.summary)).join("\n")}
 </tbody>
 </table>`;
 	if (page.listing.entries.length === 0) body = `<div class="bf-empty">This folder is empty.</div>`;
@@ -221,11 +243,12 @@ ${page.listing.entries.map((entry) => renderRow(entry, page.maxThumbBytes, page.
 		body += `<p class="bf-note">Showing the first ${page.listing.entries.length} of ${page.listing.total} entries.</p>`;
 
 	return renderLayout({
-		title: `browse · ${page.rel || folderName}`,
+		base: page.base,
+		title: tabTitle("browse", page.rel || folderName),
 		rootLabel: page.rootLabel,
 		tree: page.tree,
 		currentRel: page.rel,
-		breadcrumbs: renderBreadcrumbs(page.rel),
+		breadcrumbs: renderBreadcrumbs(page.rel, page.base),
 		keys: pageKeys(),
 		main: `    ${heading}\n    ${body}`,
 		footerNote: `${page.listing.total} entr${page.listing.total === 1 ? "y" : "ies"}`,
@@ -236,6 +259,7 @@ ${page.listing.entries.map((entry) => renderRow(entry, page.maxThumbBytes, page.
 }
 
 export interface FilePage {
+	base: string;
 	rootLabel: string;
 	rel: string;
 	file: FileView;
@@ -291,12 +315,12 @@ function numberedLines(page: FilePage): boolean {
  * plus the download the diff head keeps in the same group. */
 function renderFileActions(page: FilePage, download: string): string {
 	const isMarkdown = page.file.kind === "markdown";
-	const rawHref = `/raw/${encodePath(page.rel)}`;
-	const viewHref = `/view/${encodePath(page.rel)}`;
+	const rawHref = `${page.base}/raw/${encodePath(page.rel)}`;
+	const viewHref = `${page.base}/view/${encodePath(page.rel)}`;
 	const groups: string[] = [];
 	if (page.changed) {
 		groups.push(
-			`<a class="bf-btn" href="/diff/${encodePath(page.rel)}" title="View this file's uncommitted changes">changes</a>`,
+			`<a class="bf-btn" href="${page.base}/diff/${encodePath(page.rel)}" title="View this file's uncommitted changes">changes</a>`,
 		);
 	}
 	if (isMarkdown) {
@@ -337,7 +361,7 @@ export function renderFilePage(page: FilePage): string {
 	// Text is always served as octet-stream, so the response type says nothing
 	// about the file; the language label, size, and date are the useful metadata.
 	const meta = `${spec.label} · ${formatSize(page.file.size)} · ${formatDate(page.file.mtimeMs)}`;
-	const download = `<a class="bf-btn" href="/raw/${encodePath(page.rel)}" download>download</a>`;
+	const download = `<a class="bf-btn" href="${page.base}/raw/${encodePath(page.rel)}" download>download</a>`;
 	const head = `<div class="bf-card__head">${iconMarkup(spec)}<h1 class="bf-card__title">${escapeHtml(name)}</h1><span class="bf-card__meta">${escapeHtml(meta)}</span><span class="bf-spacer"></span>${renderFileActions(page, download)}</div>`;
 
 	const isMarkdown = page.file.kind === "markdown";
@@ -355,6 +379,7 @@ export function renderFilePage(page: FilePage): string {
 		if (page.file.kind === "markdown" && !page.markdownRaw) {
 			const html = renderMarkdown(page.file.lines.join("\n"), markdownBaseDir(page.rel), {
 				html: page.markdownHtml !== false,
+				base: page.base,
 			});
 			content = `<article class="bf-md">${html}</article>`;
 		} else {
@@ -363,7 +388,7 @@ export function renderFilePage(page: FilePage): string {
 		if (page.file.truncated)
 			note = `<p class="bf-note">Showing the first ${page.file.lines.length} of ${page.file.totalLines} lines.</p>`;
 	} else if (page.file.kind === "image") {
-		content = `<div class="bf-media"><img src="/raw/${encodePath(page.rel)}" alt="${escapeHtml(name)}"></div>`;
+		content = `<div class="bf-media"><img src="${page.base}/raw/${encodePath(page.rel)}" alt="${escapeHtml(name)}"></div>`;
 	} else if (page.file.kind === "tooLarge") {
 		content = `<div class="bf-empty"><p class="bf-empty__title">File is ${escapeHtml(formatSize(page.file.size))}.</p><p class="bf-empty__sub">Larger than the ${escapeHtml(formatSize(page.maxFileBytes))} inline limit.</p>${download}</div>`;
 	} else {
@@ -371,11 +396,12 @@ export function renderFilePage(page: FilePage): string {
 	}
 
 	return renderLayout({
-		title: `browse · ${page.rel}`,
+		base: page.base,
+		title: tabTitle("browse", page.rel),
 		rootLabel: page.rootLabel,
 		tree: page.tree,
 		currentRel: page.rel,
-		breadcrumbs: renderBreadcrumbs(page.rel),
+		breadcrumbs: renderBreadcrumbs(page.rel, page.base),
 		mainClass: rendered ? "browse-page browse-measure" : "browse-page",
 		keys,
 		main: `    <div class="bf-card">${head}${content}</div>\n    ${note}`,
@@ -419,6 +445,7 @@ function renderModeControl(mode: DiffMode, build: (mode: DiffMode) => string): s
 }
 
 export interface DiffPage {
+	base: string;
 	rootLabel: string;
 	mode: DiffMode;
 	files: ChangedFile[];
@@ -432,23 +459,24 @@ export interface DiffPage {
 
 /** The change overview: `git diff --stat` plus every changed path. */
 export function renderDiffPage(page: DiffPage): string {
-	const modeHref = (mode: DiffMode) => (mode === "head" ? "/diff" : `/diff?mode=${mode}`);
+	const modeHref = (mode: DiffMode) => (mode === "head" ? `${page.base}/diff` : `${page.base}/diff?mode=${mode}`);
 	const body =
 		page.files.length === 0
 			? `<div class="bf-empty"><p class="bf-empty__title">No changes ${escapeHtml(modeScope(page.mode))}.</p><p class="bf-empty__sub">The working tree matches this scope.</p></div>`
 			: `<table class="bf-table browse-diff" aria-labelledby="page-title">
 <thead><tr><th scope="col" class="browse-diff-status">Status</th><th scope="col">Path</th><th scope="col" class="browse-diff-word">Changes</th></tr></thead>
 <tbody>
-${page.files.map((file) => renderChangedRow(file, page.mode)).join("\n")}
+${page.files.map((file) => renderChangedRow(file, page.mode, page.base)).join("\n")}
 </tbody>
 </table>`;
 	const stat = page.stat ? `<pre class="browse-diff-stat">${escapeHtml(page.stat)}</pre>` : "";
 	return renderLayout({
-		title: "browse · changes",
+		base: page.base,
+		title: tabTitle("browse", "changes"),
 		rootLabel: page.rootLabel,
 		tree: page.tree,
 		currentRel: "",
-		breadcrumbs: renderBreadcrumbs(""),
+		breadcrumbs: renderBreadcrumbs("", page.base),
 		mainClass: "browse-page",
 		keys: pageKeys(),
 		main: `    <h1 class="bf-title browse-heading" id="page-title">Changes <span class="browse-diff-scope">${escapeHtml(modeScope(page.mode))}</span></h1>\n    <div class="browse-diff-toolbar">${renderModeControl(page.mode, modeHref)}</div>\n    ${stat}\n    ${body}`,
@@ -459,16 +487,17 @@ ${page.files.map((file) => renderChangedRow(file, page.mode)).join("\n")}
 	});
 }
 
-function renderChangedRow(file: ChangedFile, mode: DiffMode): string {
+function renderChangedRow(file: ChangedFile, mode: DiffMode, base: string): string {
 	const letter = statusLetter(file);
 	const label = statusWord(letter);
 	const badge = `browse-diff-badge browse-diff-badge--${letter === "?" ? "Q" : letter}`;
 	const orig = file.origRel ? ` <span class="browse-diff-orig">from ${escapeHtml(file.origRel)}</span>` : "";
-	const href = `/diff/${encodePath(file.rel)}${mode === "head" ? "" : `?mode=${mode}`}`;
+	const href = `${base}/diff/${encodePath(file.rel)}${mode === "head" ? "" : `?mode=${mode}`}`;
 	return `<tr data-path="${escapeHtml(file.rel)}"><td><span class="${badge}" aria-label="${escapeHtml(label)}">${escapeHtml(letter)}</span></td><td><span class="bf-table__name">${iconMarkup(languageOf(file.rel))}<a href="${href}">${escapeHtml(file.rel)}</a>${orig}</span></td><td class="browse-diff-word">${escapeHtml(label)}</td></tr>`;
 }
 
 export interface FileDiffPage {
+	base: string;
 	rootLabel: string;
 	rel: string;
 	mode: DiffMode;
@@ -484,12 +513,12 @@ export interface FileDiffPage {
 export function renderFileDiffPage(page: FileDiffPage): string {
 	const name = page.rel.slice(page.rel.lastIndexOf("/") + 1);
 	const spec = languageOf(name);
-	const base = `/diff/${encodePath(page.rel)}`;
+	const diffBase = `${page.base}/diff/${encodePath(page.rel)}`;
 	const actions = [
-		renderModeControl(page.mode, (mode) => (mode === "head" ? base : `${base}?mode=${mode}`)),
-		`<a class="bf-btn" href="/view/${encodePath(page.rel)}" title="Open the file">view file</a>`,
+		renderModeControl(page.mode, (mode) => (mode === "head" ? diffBase : `${diffBase}?mode=${mode}`)),
+		`<a class="bf-btn" href="${page.base}/view/${encodePath(page.rel)}" title="Open the file">view file</a>`,
 		`<button type="button" class="bf-btn" id="wrap-toggle" aria-pressed="false" title="Toggle line wrapping">wrap</button>`,
-		`<a class="bf-btn" href="/raw/${encodePath(page.rel)}" download>download</a>`,
+		`<a class="bf-btn" href="${page.base}/raw/${encodePath(page.rel)}" download>download</a>`,
 		`<button type="button" class="bf-btn" data-copy="path" data-value="${escapeHtml(page.rel)}" title="Copy the root-relative path">copy path</button>`,
 	];
 	// A per-file change summary and hunk count, so the scope is visible before scrolling.
@@ -508,7 +537,7 @@ export function renderFileDiffPage(page: FileDiffPage): string {
 	let content: string;
 	let note = "";
 	if (page.diff.binary) {
-		content = `<div class="bf-empty"><p class="bf-empty__title">Binary or unreadable change.</p><p class="bf-empty__sub">No text diff is shown for this file.</p><a class="bf-btn" href="/raw/${encodePath(page.rel)}" download>download</a></div>`;
+		content = `<div class="bf-empty"><p class="bf-empty__title">Binary or unreadable change.</p><p class="bf-empty__sub">No text diff is shown for this file.</p><a class="bf-btn" href="${page.base}/raw/${encodePath(page.rel)}" download>download</a></div>`;
 	} else if (page.diff.lines.length === 0) {
 		content = `<div class="bf-empty"><p class="bf-empty__title">No changes for this file.</p><p class="bf-empty__sub">It is unchanged in the selected scope.</p></div>`;
 	} else {
@@ -516,11 +545,12 @@ export function renderFileDiffPage(page: FileDiffPage): string {
 		if (page.diff.truncated) note = `<p class="bf-note">Showing the first ${page.diff.lines.length} diff lines.</p>`;
 	}
 	return renderLayout({
-		title: `browse · ${page.rel}`,
+		base: page.base,
+		title: tabTitle("browse", page.rel),
 		rootLabel: page.rootLabel,
 		tree: page.tree,
 		currentRel: page.rel,
-		breadcrumbs: renderBreadcrumbs(page.rel),
+		breadcrumbs: renderBreadcrumbs(page.rel, page.base),
 		mainClass: "browse-page",
 		keys,
 		main: `    <div class="bf-card">${head}${content}</div>\n    ${note}`,
@@ -532,6 +562,7 @@ export function renderFileDiffPage(page: FileDiffPage): string {
 }
 
 export interface ErrorPage {
+	base: string;
 	rootLabel: string;
 	status: number;
 	message: string;
@@ -544,12 +575,13 @@ export interface ErrorPage {
 /** Render a status/error page with the same chrome. */
 export function renderErrorPage(page: ErrorPage): string {
 	return renderLayout({
-		title: `browse · ${page.status}`,
+		base: page.base,
+		title: tabTitle("browse", String(page.status)),
 		rootLabel: page.rootLabel,
 		tree: page.tree,
 		currentRel: "",
-		breadcrumbs: renderBreadcrumbs(""),
-		main: `    <div class="bf-empty"><div class="bf-empty__code">${page.status}</div><p class="bf-empty__title">${escapeHtml(page.message)}</p><p class="bf-empty__sub"><a href="/browse/">back to the served folder</a></p></div>`,
+		breadcrumbs: renderBreadcrumbs("", page.base),
+		main: `    <div class="bf-empty"><div class="bf-empty__code">${page.status}</div><p class="bf-empty__title">${escapeHtml(page.message)}</p><p class="bf-empty__sub"><a href="${page.base}/browse/">back to the served folder</a></p></div>`,
 		footerNote: "error",
 		git: page.git,
 		live: page.live,

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

@@ -166,7 +166,7 @@ export const LIVE_CLIENT_JS = `	// Live status: one event stream feeds the heade
 
 		function checkLiveDir() {
 			if (document.hidden || liveTone !== "success") return;
-			fetch("/api/dir-rev?path=" + encodeURIComponent(liveDir))
+			fetch(pageBase() + "/api/dir-rev?path=" + encodeURIComponent(liveDir))
 				.then(function (response) {
 					if (!response.ok) throw new Error("check failed");
 					return response.json();
@@ -179,7 +179,7 @@ export const LIVE_CLIENT_JS = `	// Live status: one event stream feeds the heade
 		}
 
 		if (window.EventSource) {
-			var liveStream = new EventSource("/events");
+			var liveStream = new EventSource(pageBase() + "/events");
 			liveStream.addEventListener("open", function () {
 				if (liveTone !== "success") setLiveTone("accent", "connecting");
 			});