repoview 0.2.0 → 0.3.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "repoview",
-  "version": "0.2.0",
+  "version": "0.3.0",
   "private": false,
   "type": "module",
   "description": "GitHub-like repo browsing for local Git repositories (Markdown, live reload, broken link scanner).",
@@ -44,6 +44,7 @@
   },
   "dependencies": {
     "chokidar": "^4.0.3",
+    "diff2html": "^3.4.56",
     "express": "^4.21.2",
     "github-markdown-css": "^5.8.1",
     "github-slugger": "^2.0.0",

package/public/app.css

@@ -543,6 +543,305 @@ a {
   }
 }
 
+.base-selector {
+  font-size: 14px;
+  font-weight: 600;
+  padding: 5px 10px;
+  border-radius: 6px;
+  border: 1px solid var(--border);
+  background: var(--btn);
+  color: var(--text);
+  cursor: pointer;
+}
+
+.base-selector:hover {
+  background: var(--btnHover);
+}
+
+.diff-wrap {
+  overflow-x: auto;
+  -webkit-text-size-adjust: 100%;
+  text-size-adjust: 100%;
+}
+
+.diff-empty {
+  margin: 12px;
+}
+
+/* diff2html theme overrides */
+.d2h-wrapper {
+  border: none;
+}
+
+/* --- File list panel --- */
+.d2h-file-list-wrapper {
+  border: 1px solid var(--border);
+  border-radius: 6px;
+  margin-bottom: 16px;
+  overflow: hidden;
+  -webkit-text-size-adjust: 100%;
+  text-size-adjust: 100%;
+}
+
+.d2h-file-list-header {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 10px 14px;
+  background: var(--subtleBg);
+  border-bottom: 1px solid var(--border);
+}
+
+.d2h-file-list-title {
+  font-weight: 600;
+  font-size: 14px;
+  color: var(--text);
+}
+
+.d2h-file-switch {
+  display: none;
+}
+
+.d2h-file-list {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+.d2h-file-list-line {
+  display: flex;
+  align-items: center;
+  padding: 8px 14px;
+  border-bottom: 1px solid var(--border);
+  font-size: 13px;
+}
+
+.d2h-file-list-line:last-child {
+  border-bottom: none;
+}
+
+.d2h-file-list-line:hover {
+  background: var(--subtleBg);
+}
+
+.d2h-file-name-wrapper {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  width: 100%;
+  min-width: 0;
+}
+
+.d2h-file-list-line .d2h-file-name {
+  color: var(--accent);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
+}
+
+.d2h-file-list-line .d2h-file-name:hover {
+  text-decoration: underline;
+}
+
+.d2h-file-stats {
+  margin-left: auto;
+  display: flex;
+  gap: 4px;
+  flex-shrink: 0;
+  font-size: 12px;
+  font-weight: 600;
+  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
+}
+
+.d2h-lines-added {
+  color: #1a7f37;
+}
+
+.d2h-lines-deleted {
+  color: #cf222e;
+}
+
+.d2h-file-list-line .d2h-icon {
+  flex-shrink: 0;
+  color: var(--muted);
+}
+
+/* --- Individual file diffs --- */
+.d2h-file-wrapper {
+  border: 1px solid var(--border);
+  border-radius: 6px;
+  margin-bottom: 12px;
+  overflow: hidden;
+  -webkit-text-size-adjust: 100%;
+  text-size-adjust: 100%;
+}
+
+.d2h-file-header {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 10px 14px;
+  background: var(--subtleBg);
+  border-bottom: 1px solid var(--border);
+  color: var(--text);
+  cursor: pointer;
+  user-select: none;
+}
+
+.d2h-file-header:hover {
+  background: var(--btnHover);
+}
+
+.d2h-file-header .d2h-file-name-wrapper {
+  gap: 8px;
+}
+
+.d2h-file-header .d2h-file-name {
+  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
+  font-size: 13px;
+  font-weight: 600;
+}
+
+.d2h-file-header .d2h-tag {
+  font-size: 11px;
+  padding: 2px 6px;
+  border-radius: 4px;
+  border: 1px solid var(--border);
+  background: var(--btn);
+  color: var(--muted);
+}
+
+.d2h-file-collapse {
+  margin-left: auto;
+  display: flex;
+  align-items: center;
+  font-size: 12px;
+  color: var(--muted);
+  cursor: pointer;
+  padding: 2px 8px;
+  border-radius: 4px;
+  border: 1px solid var(--border);
+  background: var(--btn);
+}
+
+.d2h-file-collapse:hover {
+  background: var(--btnHover);
+  color: var(--text);
+}
+
+.d2h-file-collapse,
+.d2h-file-collapse-input {
+  display: none;
+}
+
+/* Collapse toggle button (injected by JS) */
+.diff-toggle {
+  margin-left: auto;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  border-radius: 4px;
+  border: 1px solid var(--border);
+  background: var(--btn);
+  color: var(--muted);
+  cursor: pointer;
+  flex-shrink: 0;
+  font-size: 14px;
+  line-height: 1;
+  transition: transform 0.15s ease;
+}
+
+.diff-toggle:hover {
+  background: var(--btnHover);
+  color: var(--text);
+}
+
+.diff-toggle[aria-expanded="false"] {
+  transform: rotate(-90deg);
+}
+
+.d2h-file-diff[hidden] {
+  display: none;
+}
+
+.d2h-file-diff {
+  border-color: var(--border);
+}
+
+.d2h-info {
+  background: var(--subtleBg);
+  color: var(--muted);
+  border-color: var(--border);
+}
+
+@media (prefers-color-scheme: dark) {
+  .d2h-lines-added {
+    color: #3fb950;
+  }
+
+  .d2h-lines-deleted {
+    color: #f85149;
+  }
+
+  .d2h-code-line,
+  .d2h-code-side-line {
+    background: var(--panel);
+    color: var(--text);
+  }
+
+  .d2h-code-line-ctn {
+    color: var(--text);
+  }
+
+  .d2h-file-diff .d2h-del.d2h-change,
+  .d2h-file-diff .d2h-del {
+    background-color: rgba(248, 81, 73, 0.1);
+  }
+
+  .d2h-file-diff .d2h-ins.d2h-change,
+  .d2h-file-diff .d2h-ins {
+    background-color: rgba(63, 185, 80, 0.1);
+  }
+
+  .d2h-del .d2h-code-line-ctn {
+    background-color: rgba(248, 81, 73, 0.15);
+  }
+
+  .d2h-ins .d2h-code-line-ctn {
+    background-color: rgba(63, 185, 80, 0.15);
+  }
+
+  .d2h-code-linenumber {
+    background: var(--panel);
+    color: var(--muted);
+    border-color: var(--border);
+  }
+
+  .d2h-del .d2h-code-linenumber {
+    background-color: rgba(248, 81, 73, 0.1);
+    border-color: var(--border);
+  }
+
+  .d2h-ins .d2h-code-linenumber {
+    background-color: rgba(63, 185, 80, 0.1);
+    border-color: var(--border);
+  }
+}
+
+/* Normalize diff2html font sizes to prevent iOS text inflation */
+.d2h-code-linenumber,
+.d2h-code-line-ctn,
+.d2h-code-line-prefix {
+  font-size: 13px !important;
+}
+
+.d2h-tag {
+  font-size: 11px;
+}
+
 @media (max-width: 560px) {
   .file-table {
     min-width: 0;
@@ -561,4 +860,39 @@ a {
   .meta-menu {
     display: inline-block;
   }
+
+  /* Diff mobile overrides */
+  .d2h-file-list-wrapper {
+    margin-bottom: 12px;
+  }
+
+  .d2h-file-list-line {
+    padding: 6px 10px;
+  }
+
+  .d2h-file-header {
+    padding: 8px 10px;
+    gap: 6px;
+  }
+
+  .d2h-file-header .d2h-file-name {
+    font-size: 12px;
+  }
+
+  .d2h-code-linenumber {
+    padding: 0 4px !important;
+    min-width: 28px;
+  }
+
+  .d2h-code-line-ctn {
+    font-size: 12px !important;
+  }
+
+  .d2h-code-line-prefix {
+    font-size: 12px !important;
+  }
+
+  .d2h-file-wrapper {
+    margin-bottom: 10px;
+  }
 }

package/public/app.js

@@ -106,7 +106,12 @@ async function renderMermaid() {
   try {
     const mod = await import("/static/vendor/mermaid/mermaid.esm.min.mjs");
     const mermaid = mod.default ?? mod.mermaid ?? mod;
-    mermaid.initialize?.({ startOnLoad: false, securityLevel: "strict" });
+    const isDark = window.matchMedia("(prefers-color-scheme: dark)").matches;
+    mermaid.initialize?.({
+      startOnLoad: false,
+      securityLevel: "strict",
+      theme: isDark ? "dark" : "default",
+    });
     if (typeof mermaid.run === "function") {
       await mermaid.run({ nodes });
     }
@@ -175,9 +180,52 @@ function initTimezoneToggle() {
   update();
 }
 
+function initDiffCollapse() {
+  const wrappers = document.querySelectorAll(".d2h-file-wrapper");
+  if (!wrappers.length) return;
+
+  for (const wrapper of wrappers) {
+    const header = wrapper.querySelector(".d2h-file-header");
+    const diff = wrapper.querySelector(".d2h-file-diff");
+    if (!header || !diff) continue;
+
+    const toggle = document.createElement("button");
+    toggle.className = "diff-toggle";
+    toggle.type = "button";
+    toggle.setAttribute("aria-expanded", "true");
+    toggle.setAttribute("aria-label", "Toggle file diff");
+    toggle.textContent = "\u25BE";
+    header.appendChild(toggle);
+
+    header.addEventListener("click", (e) => {
+      if (e.target.closest("a")) return;
+      const expanded = toggle.getAttribute("aria-expanded") === "true";
+      toggle.setAttribute("aria-expanded", String(!expanded));
+      toggle.textContent = expanded ? "\u25B8" : "\u25BE";
+      diff.hidden = expanded;
+    });
+  }
+}
+
+function initBaseSelector() {
+  const sel = document.getElementById("base-selector");
+  if (!sel) return;
+  sel.addEventListener("change", () => {
+    const u = new URL(location.href);
+    if (sel.value === "HEAD") {
+      u.searchParams.delete("base");
+    } else {
+      u.searchParams.set("base", sel.value);
+    }
+    location.href = u.pathname + u.search;
+  });
+}
+
 window.addEventListener("load", () => {
-  preserveQueryParamsOnInternalLinks(["ignored", "watch"]);
+  preserveQueryParamsOnInternalLinks(["ignored", "watch", "base"]);
   renderMath();
   renderMermaid();
   initTimezoneToggle();
+  initBaseSelector();
+  initDiffCollapse();
 });

package/src/server.js

@@ -11,9 +11,11 @@ import mime from "mime-types";
 import { createMarkdownRenderer } from "./markdown.js";
 import { loadGitIgnoreMatcher } from "./gitignore.js";
 import { createRepoLinkScanner } from "./linkcheck.js";
+import diff2html from "diff2html";
 import {
   escapeHtml,
   renderBrokenLinksPage,
+  renderDiffPage,
   renderErrorPage,
   renderFilePage,
   renderTreePage,
@@ -93,6 +95,51 @@ function renderCsvTable(rows, escFn) {
   return `<div class="csv-table-wrap"><table class="csv-table"><thead><tr>${ths}</tr></thead><tbody>${trs}</tbody></table></div>`;
 }
 
+function execGit(repoRootReal, args, maxBytes = 1024 * 1024) {
+  return new Promise((resolve) => {
+    const child = spawn("git", args, { cwd: repoRootReal });
+    let out = "";
+    let size = 0;
+    let killed = false;
+    child.stdout.on("data", (chunk) => {
+      size += chunk.length;
+      if (size > maxBytes) {
+        if (!killed) { killed = true; child.kill(); }
+        return;
+      }
+      out += String(chunk);
+    });
+    child.on("close", (code) => {
+      if (killed) return resolve({ output: out, tooLarge: true, code });
+      resolve({ output: code === 0 ? out.trim() : null, tooLarge: false, code });
+    });
+    child.on("error", () => resolve({ output: null, tooLarge: false, code: -1 }));
+  });
+}
+
+function validateGitRef(ref) {
+  if (!ref || typeof ref !== "string") return false;
+  return /^[a-zA-Z0-9_.\/\-~^]+$/.test(ref);
+}
+
+async function getGitBranches(repoRootReal) {
+  const { output } = await execGit(repoRootReal, ["branch", "--format=%(refname:short)"]);
+  if (!output) return [];
+  return output.split("\n").filter(Boolean);
+}
+
+async function getGitTags(repoRootReal) {
+  const { output } = await execGit(repoRootReal, ["tag", "-l"]);
+  if (!output) return [];
+  return output.split("\n").filter(Boolean);
+}
+
+async function getGitDiffRaw(repoRootReal, base) {
+  const maxBytes = 512 * 1024;
+  const { output, tooLarge } = await execGit(repoRootReal, ["diff", base], maxBytes);
+  return { raw: output || "", tooLarge };
+}
+
 async function getGitInfo(repoRootReal) {
   const gitDir = path.join(repoRootReal, ".git");
   try {
@@ -102,20 +149,12 @@ async function getGitInfo(repoRootReal) {
     return { branch: null, commit: null };
   }
 
-  const execGit = async (args) => {
-    return await new Promise((resolve) => {
-      const child = spawn("git", args, { cwd: repoRootReal });
-      let out = "";
-      child.stdout.on("data", (chunk) => (out += String(chunk)));
-      child.on("close", (code) => resolve(code === 0 ? out.trim() : null));
-      child.on("error", () => resolve(null));
-    });
-  };
-
-  const [branch, commit] = await Promise.all([
-    execGit(["rev-parse", "--abbrev-ref", "HEAD"]),
-    execGit(["rev-parse", "HEAD"]),
+  const [branchResult, commitResult] = await Promise.all([
+    execGit(repoRootReal, ["rev-parse", "--abbrev-ref", "HEAD"]),
+    execGit(repoRootReal, ["rev-parse", "HEAD"]),
   ]);
+  const branch = branchResult.output;
+  const commit = commitResult.output;
   return { branch: branch && branch !== "HEAD" ? branch : branch, commit };
 }
 
@@ -144,13 +183,20 @@ async function safeRealpath(rootReal, requestPath) {
 }
 
 async function statSafe(p, { followSymlinks = true } = {}) {
-  const stat = followSymlinks ? await fs.stat(p) : await fs.lstat(p);
-  return {
-    isFile: stat.isFile(),
-    isDir: stat.isDirectory(),
-    size: stat.size,
-    mtimeMs: stat.mtimeMs,
-  };
+  try {
+    const stat = followSymlinks ? await fs.stat(p) : await fs.lstat(p);
+    return {
+      isFile: stat.isFile(),
+      isDir: stat.isDirectory(),
+      size: stat.size,
+      mtimeMs: stat.mtimeMs,
+    };
+  } catch (e) {
+    if (e.code === "EACCES" || e.code === "EPERM") {
+      return null;
+    }
+    throw e;
+  }
 }
 
 function formatBytes(bytes) {
@@ -249,6 +295,12 @@ export async function startServer({ repoRoot, host, port, watch }) {
       fallthrough: false,
     }),
   );
+  app.use(
+    "/static/vendor/diff2html",
+    express.static(path.join(resolvePackageDir("diff2html"), "bundles", "css"), {
+      fallthrough: false,
+    }),
+  );
 
   app.use((req, res, next) => {
     if (!req.path.startsWith("/static/")) res.setHeader("Cache-Control", "no-store");
@@ -316,6 +368,63 @@ export async function startServer({ repoRoot, host, port, watch }) {
     res.on("close", () => clearInterval(interval));
   });
 
+  app.get("/diff", async (req, res) => {
+    try {
+      const base = req.query.base || "HEAD";
+      if (!validateGitRef(base)) {
+        const err = new Error("Invalid base ref");
+        err.statusCode = 400;
+        throw err;
+      }
+
+      if (!gitInfo.commit) {
+        const err = new Error("Not a git repository");
+        err.statusCode = 400;
+        throw err;
+      }
+
+      const query = new URLSearchParams();
+      if (req.query.watch === "0") query.set("watch", "0");
+      if (req.query.ignored === "1") query.set("ignored", "1");
+      if (base !== "HEAD") query.set("base", base);
+      const querySuffix = query.toString() ? `?${query.toString()}` : "";
+
+      const [branches, tags, diffResult] = await Promise.all([
+        getGitBranches(repoRootReal),
+        getGitTags(repoRootReal),
+        getGitDiffRaw(repoRootReal, base),
+      ]);
+
+      let diffHtml = "";
+      if (!diffResult.tooLarge && diffResult.raw) {
+        diffHtml = diff2html.html(diffResult.raw, {
+          outputFormat: "line-by-line",
+          drawFileList: true,
+        });
+      }
+
+      res.status(200).send(
+        renderDiffPage({
+          title: `${repoName} · Diff`,
+          repoName,
+          gitInfo,
+          relPathPosix: "",
+          querySuffix,
+          base,
+          branches,
+          tags,
+          diffHtml,
+          tooLarge: diffResult.tooLarge,
+          empty: !diffResult.raw,
+        }),
+      );
+    } catch (e) {
+      res
+        .status(e.statusCode || 500)
+        .send(renderErrorPage({ title: "Error", message: e.message }));
+    }
+  });
+
   app.get(["/tree/*", "/tree"], async (req, res) => {
     try {
       const showIgnored = req.query.ignored === "1";
@@ -336,43 +445,61 @@ export async function startServer({ repoRoot, host, port, watch }) {
         toPosixPath(stripped),
       )}${toggleIgnoredSuffix}`;
       const st = await statSafe(resolved);
+      if (st === null) {
+        const err = new Error("Permission denied");
+        err.statusCode = 403;
+        throw err;
+      }
       if (st.isFile)
         return res.redirect(
           `/blob/${encodePathForUrl(toPosixPath(stripped))}${querySuffix}`,
         );
 
-      const entries = await fs.readdir(resolved, { withFileTypes: true });
+      let entries;
+      try {
+        entries = await fs.readdir(resolved, { withFileTypes: true });
+      } catch (e) {
+        if (e.code === "EACCES" || e.code === "EPERM") {
+          const err = new Error("Permission denied");
+          err.statusCode = 403;
+          throw err;
+        }
+        throw e;
+      }
       const readmeEntry = entries.find(
         (e) =>
           e.isFile() &&
           /^readme(?:\.(?:md|markdown|mdown|mkd|mkdn))?$/i.test(e.name),
       );
-      const rows = await Promise.all(
-        entries
-          .filter((e) => {
-            if (e.name === ".git") return false;
-            if (showIgnored) return true;
-            const relPosix = toPosixPath(path.posix.join(toPosixPath(stripped), e.name));
-            return !ignoreMatcher.ignores(relPosix, { isDir: e.isDirectory() });
-          })
-          .map(async (e) => {
-            const relPosix = toPosixPath(path.posix.join(toPosixPath(stripped), e.name));
-            const full = path.join(resolved, e.name);
-            const info = await statSafe(full, { followSymlinks: false });
-            const isDir = e.isDirectory();
-            const href = isDir
-              ? `/tree/${encodePathForUrl(relPosix)}${querySuffix}`
-              : `/blob/${encodePathForUrl(relPosix)}${querySuffix}`;
-            return {
-              name: e.name,
-              isDir,
-              href,
-              size: isDir ? "" : formatBytes(info.size),
-              mtime: formatDate(info.mtimeMs),
-              mtimeMs: info.mtimeMs,
-            };
-          }),
-      );
+      const rows = (
+        await Promise.all(
+          entries
+            .filter((e) => {
+              if (e.name === ".git") return false;
+              if (showIgnored) return true;
+              const relPosix = toPosixPath(path.posix.join(toPosixPath(stripped), e.name));
+              return !ignoreMatcher.ignores(relPosix, { isDir: e.isDirectory() });
+            })
+            .map(async (e) => {
+              const relPosix = toPosixPath(path.posix.join(toPosixPath(stripped), e.name));
+              const full = path.join(resolved, e.name);
+              const info = await statSafe(full, { followSymlinks: false });
+              if (info === null) return null;
+              const isDir = e.isDirectory();
+              const href = isDir
+                ? `/tree/${encodePathForUrl(relPosix)}${querySuffix}`
+                : `/blob/${encodePathForUrl(relPosix)}${querySuffix}`;
+              return {
+                name: e.name,
+                isDir,
+                href,
+                size: isDir ? "" : formatBytes(info.size),
+                mtime: formatDate(info.mtimeMs),
+                mtimeMs: info.mtimeMs,
+              };
+            }),
+        )
+      ).filter((row) => row !== null);
 
       rows.sort((a, b) => {
         if (a.isDir !== b.isDir) return a.isDir ? -1 : 1;
@@ -439,6 +566,11 @@ export async function startServer({ repoRoot, host, port, watch }) {
         toPosixPath(stripped),
       )}${toggleIgnoredSuffix}`;
       const st = await statSafe(resolved);
+      if (st === null) {
+        const err = new Error("Permission denied");
+        err.statusCode = 403;
+        throw err;
+      }
       if (st.isDir)
         return res.redirect(
           `/tree/${encodePathForUrl(toPosixPath(stripped))}${querySuffix}`,
@@ -563,6 +695,11 @@ export async function startServer({ repoRoot, host, port, watch }) {
       const p = req.params[0] ?? "";
       const { resolved } = await safeRealpath(repoRootReal, p);
       const st = await statSafe(resolved);
+      if (st === null) {
+        const err = new Error("Permission denied");
+        err.statusCode = 403;
+        throw err;
+      }
       if (!st.isFile) {
         const err = new Error("Not a file");
         err.statusCode = 400;
@@ -589,6 +726,10 @@ export async function startServer({ repoRoot, host, port, watch }) {
         /(^|[/\\])node_modules([/\\]|$)/,
       ],
       ignoreInitial: true,
+      ignorePermissionErrors: true,
+    });
+    watcher.on("error", () => {
+      // Silently ignore watch errors (e.g., permission denied)
     });
     let pending = null;
     watcher.on("all", () => {

package/src/views.js

@@ -105,9 +105,12 @@ function renderMetaMenu({ gitInfo, brokenLinks, querySuffix, toggleIgnoredHref,
   const ignoredHref = toggleIgnoredHref || "#";
   const ignoredLabel = showIgnored ? "Hide ignored files" : "Show ignored files";
 
+  const diffHref = `/diff${querySuffix || ""}`;
+
   return `<details class="meta-menu">
   <summary class="pill link" aria-label="More">More</summary>
   <div class="menu-panel" role="menu">
+    <a class="menu-item link" href="${diffHref}" role="menuitem">Diff view</a>
     <a class="menu-item link" href="${brokenHref}" role="menuitem">${escapeHtml(brokenLabel)}</a>
     <a class="menu-item link" data-no-preserve="ignored" href="${ignoredHref}" role="menuitem">${escapeHtml(
       ignoredLabel,
@@ -153,6 +156,7 @@ function pageTemplateWithLinks({
           <span class="pill">${branch}</span>
           ${commit ? `<span class="pill mono meta-commit">${commit}</span>` : ""}
           <span class="meta-actions">
+            <a class="pill link" href="/diff${querySuffix || ""}">Diff</a>
             ${brokenPill}
             ${ignoredPill}
           </span>
@@ -277,6 +281,89 @@ export function renderFilePage({
   });
 }
 
+export function renderDiffPage({
+  title,
+  repoName,
+  gitInfo,
+  relPathPosix,
+  querySuffix,
+  base,
+  branches,
+  tags,
+  diffHtml,
+  tooLarge,
+  empty,
+}) {
+  const branchOptions = branches
+    .map((b) => {
+      const sel = b === base ? " selected" : "";
+      return `<option value="${escapeHtml(b)}"${sel}>${escapeHtml(b)}</option>`;
+    })
+    .join("\n");
+  const tagOptions = tags
+    .map((t) => {
+      const sel = t === base ? " selected" : "";
+      return `<option value="${escapeHtml(t)}"${sel}>${escapeHtml(t)}</option>`;
+    })
+    .join("\n");
+  const headSelected = base === "HEAD" ? " selected" : "";
+
+  const selector = `<select id="base-selector" class="base-selector">
+    <option value="HEAD"${headSelected}>HEAD</option>
+    ${branches.length ? `<optgroup label="Branches">${branchOptions}</optgroup>` : ""}
+    ${tags.length ? `<optgroup label="Tags">${tagOptions}</optgroup>` : ""}
+  </select>`;
+
+  let content = "";
+  if (tooLarge) {
+    content = `<div class="diff-empty note">Diff output exceeded 512KB and was truncated. Try narrowing the comparison range.</div>`;
+  } else if (empty) {
+    content = `<div class="diff-empty note">No changes found.</div>`;
+  } else {
+    content = diffHtml;
+  }
+
+  const body = `<section class="panel">
+  <div class="panel-title">
+    <span>Compare working tree against</span>
+    ${selector}
+    <span class="spacer"></span>
+    <a class="btn" href="/tree/${querySuffix || ""}">Back</a>
+  </div>
+  <div class="diff-wrap">
+    ${content}
+  </div>
+</section>`;
+
+  const branch = gitInfo?.branch ? escapeHtml(gitInfo.branch) : "no-git";
+  const commit = gitInfo?.commit ? escapeHtml(gitInfo.commit.slice(0, 7)) : "";
+  return `<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>${escapeHtml(title)}</title>
+    <link rel="stylesheet" href="/static/vendor/diff2html/diff2html.min.css" />
+    <link rel="stylesheet" href="/static/app.css" />
+  </head>
+  <body>
+    <header class="topbar">
+      <div class="topbar-row">
+        <a class="brand" href="/tree/${querySuffix || ""}">${escapeHtml(repoName)}</a>
+        <div class="meta">
+          <span class="pill">${branch}</span>
+          ${commit ? `<span class="pill mono">${commit}</span>` : ""}
+        </div>
+      </div>
+    </header>
+    <main class="container">
+      ${body}
+    </main>
+    <script type="module" src="/static/app.js"></script>
+  </body>
+</html>`;
+}
+
 export function renderErrorPage({ title, message }) {
   return `<!doctype html>
 <html lang="en">