@youtyan/code-viewer 0.1.0 → 0.1.1

package/web/app.js

@@ -33,6 +33,16 @@
   function mapNewToOld(newLine, prevHunkEndNew, prevHunkEndOld) {
     return prevHunkEndOld + (newLine - prevHunkEndNew);
   }
+  function trailingClickRange(hunkEndNew, step) {
+    return { start: hunkEndNew, end: hunkEndNew + step - 1 };
+  }
+  function applyTrailingResult(state, receivedCount, step) {
+    return {
+      newStart: state.newStart + receivedCount,
+      oldStart: state.oldStart + receivedCount,
+      eof: receivedCount === 0 || receivedCount < step
+    };
+  }
   var GdpExpandLogic = {
     initExpandState,
     remainingGap,
@@ -41,9 +51,137 @@
     downClickRange,
     applyUp,
     applyDown,
-    mapNewToOld
+    mapNewToOld,
+    trailingClickRange,
+    applyTrailingResult
   };
 
+  // web-src/file-navigation.ts
+  function nextVisibleFileIndex(currentIndex, itemCount, direction) {
+    if (itemCount <= 0)
+      return -1;
+    if (currentIndex < 0)
+      return direction > 0 ? 0 : itemCount - 1;
+    return Math.max(0, Math.min(itemCount - 1, currentIndex + direction));
+  }
+
+  // web-src/file-path-copy.ts
+  function filePathClipboardText(path) {
+    return path || "";
+  }
+
+  // web-src/file-filter.ts
+  function normalizeFileFilterQuery(value) {
+    return (value || "").toLowerCase().trim();
+  }
+  function parseSlashRegex(query) {
+    if (!query.startsWith("/") || query.length < 2)
+      return null;
+    const lastSlash = query.lastIndexOf("/");
+    if (lastSlash <= 0)
+      return null;
+    return {
+      source: query.slice(1, lastSlash),
+      flags: query.slice(lastSlash + 1)
+    };
+  }
+  function compileFileFilter(value) {
+    const raw = (value || "").trim();
+    if (!raw)
+      return { kind: "empty", match: () => true };
+    const slashRegex = parseSlashRegex(raw);
+    if (slashRegex) {
+      try {
+        const regex = new RegExp(slashRegex.source, slashRegex.flags);
+        return { kind: "regex", match: (path) => regex.test(path) };
+      } catch (error) {
+        return {
+          kind: "invalid",
+          match: () => false,
+          error: error instanceof Error ? error.message : String(error)
+        };
+      }
+    }
+    const q = normalizeFileFilterQuery(raw.startsWith("/") ? raw.slice(1) : raw);
+    return {
+      kind: "substring",
+      match: (path) => path.toLowerCase().includes(q)
+    };
+  }
+
+  // web-src/routes.ts
+  function assertNever(value) {
+    throw new Error("unhandled route: " + JSON.stringify(value));
+  }
+  function parseLegacyRange(value, fallback) {
+    const raw = value || "";
+    const sep = raw.indexOf("..");
+    if (sep < 0)
+      return fallback;
+    return {
+      from: raw.slice(0, sep) || fallback.from,
+      to: raw.slice(sep + 2) || fallback.to
+    };
+  }
+  function parseRoute(pathname, search, fallbackRange) {
+    const params = new URLSearchParams(search);
+    const legacyRange = parseLegacyRange(params.get("range"), fallbackRange);
+    const range = {
+      from: params.get("from") || legacyRange.from,
+      to: params.get("to") || legacyRange.to
+    };
+    switch (pathname) {
+      case "/":
+      case "/index.html":
+        return {
+          screen: "repo",
+          ref: params.get("ref") || params.get("target") || "worktree",
+          path: params.get("path") || "",
+          range
+        };
+      case "/todif":
+      case "/todiff":
+        return { screen: "diff", range };
+      case "/file": {
+        const path = params.get("path") || "";
+        const target = params.get("target") || "";
+        const ref = target || params.get("ref") || "worktree";
+        if (!path)
+          return { screen: "unknown", reason: "missing-path", rawPathname: pathname, rawSearch: search, range };
+        return { screen: "file", path, ref, range, view: target ? "blob" : "detail" };
+      }
+      default:
+        return { screen: "unknown", reason: "unknown-pathname", rawPathname: pathname, rawSearch: search, range };
+    }
+  }
+  function buildRoute(route) {
+    switch (route.screen) {
+      case "repo": {
+        const params = new URLSearchParams;
+        if (route.ref && route.ref !== "worktree")
+          params.set("ref", route.ref);
+        if (route.path)
+          params.set("path", route.path);
+        const qs = params.toString();
+        return "/" + (qs ? "?" + qs : "");
+      }
+      case "file":
+        if (route.view === "blob") {
+          return "/file?path=" + encodeURIComponent(route.path) + "&target=" + encodeURIComponent(route.ref || "worktree");
+        }
+        return "/file?path=" + encodeURIComponent(route.path) + "&ref=" + encodeURIComponent(route.ref || "worktree") + "&from=" + encodeURIComponent(route.range.from || "") + "&to=" + encodeURIComponent(route.range.to || "worktree");
+      case "diff":
+        return "/todif?from=" + encodeURIComponent(route.range.from || "") + "&to=" + encodeURIComponent(route.range.to || "worktree");
+      case "unknown":
+        return "/todif?from=" + encodeURIComponent(route.range.from || "") + "&to=" + encodeURIComponent(route.range.to || "worktree");
+      default:
+        return assertNever(route);
+    }
+  }
+  function buildRawFileUrl(target) {
+    return "/_file?path=" + encodeURIComponent(target.path) + "&ref=" + encodeURIComponent(target.ref || "worktree");
+  }
+
   // web-src/ws-highlight.ts
   function isWhitespaceOnlyInlineHighlight(text) {
     return !!text && !/\S/.test(text);
@@ -62,14 +200,35 @@
   // web-src/app.ts
   window.GdpExpandLogic = GdpExpandLogic;
   (() => {
+    const FOLDER_ICON_PATHS = {
+      closed: "M1.75 1A1.75 1.75 0 0 0 0 2.75v10.5C0 14.216.784 15 1.75 15h12.5A1.75 1.75 0 0 0 16 13.25v-8.5A1.75 1.75 0 0 0 14.25 3H7.5a.25.25 0 0 1-.2-.1l-.9-1.2C6.07 1.26 5.55 1 5 1H1.75Z",
+      open: "M.513 1.513A1.75 1.75 0 0 1 1.75 1h3.5c.55 0 1.07.26 1.4.7l.9 1.2a.25.25 0 0 0 .2.1H13a1 1 0 0 1 1 1v.5H2.75a.75.75 0 0 0 0 1.5h11.978a1 1 0 0 1 .994 1.117L15 13.25A1.75 1.75 0 0 1 13.25 15H1.75A1.75 1.75 0 0 1 0 13.25V2.75c0-.464.184-.91.513-1.237Z"
+    };
+    const CHEVRON_DOWN_12_PATH = "M6 8.825c-.2 0-.4-.1-.5-.2l-3.3-3.3c-.3-.3-.3-.8 0-1.1.3-.3.8-.3 1.1 0l2.7 2.7 2.7-2.7c.3-.3.8-.3 1.1 0 .3.3.3.8 0 1.1l-3.2 3.2c-.2.2-.4.3-.6.3Z";
+    const CHEVRON_DOWN_16_PATH = "M12.78 5.22a.749.749 0 0 1 0 1.06l-4.25 4.25a.749.749 0 0 1-1.06 0L3.22 6.28a.749.749 0 1 1 1.06-1.06L8 8.939l3.72-3.719a.749.749 0 0 1 1.06 0Z";
+    const COPY_16_PATHS = [
+      "M0 6.75C0 5.784.784 5 1.75 5h1.5a.75.75 0 0 1 0 1.5h-1.5a.25.25 0 0 0-.25.25v7.5c0 .138.112.25.25.25h7.5a.25.25 0 0 0 .25-.25v-1.5a.75.75 0 0 1 1.5 0v1.5A1.75 1.75 0 0 1 9.25 16h-7.5A1.75 1.75 0 0 1 0 14.25Z",
+      "M5 1.75C5 .784 5.784 0 6.75 0h7.5C15.216 0 16 .784 16 1.75v7.5A1.75 1.75 0 0 1 14.25 11h-7.5A1.75 1.75 0 0 1 5 9.25Zm1.75-.25a.25.25 0 0 0-.25.25v7.5c0 .138.112.25.25.25h7.5a.25.25 0 0 0 .25-.25v-7.5a.25.25 0 0 0-.25-.25Z"
+    ];
+    const FILE_16_PATH = "M2 1.75C2 .784 2.784 0 3.75 0h5.586c.464 0 .909.184 1.237.513l2.914 2.914c.329.328.513.773.513 1.237v9.586A1.75 1.75 0 0 1 12.25 16h-8.5A1.75 1.75 0 0 1 2 14.25Zm1.75-.25a.25.25 0 0 0-.25.25v12.5c0 .138.112.25.25.25h8.5a.25.25 0 0 0 .25-.25V6h-2.75A1.75 1.75 0 0 1 8 4.25V1.5Zm5.75.062V4.25c0 .138.112.25.25.25h2.688Z";
+    const UNFOLD_16_PATH = "m8.177.677 2.896 2.896a.25.25 0 0 1-.177.427H8.75v1.25a.75.75 0 0 1-1.5 0V4H5.104a.25.25 0 0 1-.177-.427L7.823.677a.25.25 0 0 1 .354 0ZM7.25 10.75a.75.75 0 0 1 1.5 0V12h2.146a.25.25 0 0 1 .177.427l-2.896 2.896a.25.25 0 0 1-.354 0l-2.896-2.896A.25.25 0 0 1 5.104 12H7.25v-1.25Zm-5-2a.75.75 0 0 0 0-1.5h-.5a.75.75 0 0 0 0 1.5h.5ZM6 8a.75.75 0 0 1-.75.75h-.5a.75.75 0 0 1 0-1.5h.5A.75.75 0 0 1 6 8Zm2.25.75a.75.75 0 0 0 0-1.5h-.5a.75.75 0 0 0 0 1.5h.5ZM12 8a.75.75 0 0 1-.75.75h-.5a.75.75 0 0 1 0-1.5h.5A.75.75 0 0 1 12 8Zm2.25.75a.75.75 0 0 0 0-1.5h-.5a.75.75 0 0 0 0 1.5h.5Z";
+    const FOLD_16_PATH = "M10.896 2H8.75V.75a.75.75 0 0 0-1.5 0V2H5.104a.25.25 0 0 0-.177.427l2.896 2.896a.25.25 0 0 0 .354 0l2.896-2.896A.25.25 0 0 0 10.896 2ZM8.75 15.25a.75.75 0 0 1-1.5 0V14H5.104a.25.25 0 0 1-.177-.427l2.896-2.896a.25.25 0 0 1 .354 0l2.896 2.896a.25.25 0 0 1-.177.427H8.75v1.25Zm-6.5-6.5a.75.75 0 0 0 0-1.5h-.5a.75.75 0 0 0 0 1.5h.5ZM6 8a.75.75 0 0 1-.75.75h-.5a.75.75 0 0 1 0-1.5h.5A.75.75 0 0 1 6 8Zm2.25.75a.75.75 0 0 0 0-1.5h-.5a.75.75 0 0 0 0 1.5h.5ZM12 8a.75.75 0 0 1-.75.75h-.5a.75.75 0 0 1 0-1.5h.5A.75.75 0 0 1 12 8Zm2.25.75a.75.75 0 0 0 0-1.5h-.5a.75.75 0 0 0 0 1.5h.5Z";
     const $ = (sel) => document.querySelector(sel);
     const $$ = (sel) => Array.from(document.querySelectorAll(sel));
     const diffCardSelector = (path) => '.gdp-file-shell[data-path="' + (window.CSS && CSS.escape ? CSS.escape(path) : path) + '"]';
     const HIGHLIGHT_SRC = "/vendor/highlight.js/highlight.min.js";
+    const DEFAULT_RANGE = { from: "HEAD", to: "worktree" };
     let highlightLoadPromise = null;
     let highlightConfigured = false;
+    let PROJECT_NAME = "";
     const STATE = (() => {
       const igRaw = localStorage.getItem("gdp:ignore-ws");
+      const fallbackRange = {
+        from: localStorage.getItem("gdp:from") || DEFAULT_RANGE.from,
+        to: localStorage.getItem("gdp:to") || DEFAULT_RANGE.to
+      };
+      const parsedRoute = parseRoute(window.location.pathname, window.location.search, fallbackRange);
+      const route = parsedRoute.screen === "unknown" ? { screen: "diff", range: parsedRoute.range } : parsedRoute;
       return {
         layout: localStorage.getItem("gdp:layout") || "side-by-side",
         theme: localStorage.getItem("gdp:theme") || (matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"),
@@ -77,14 +236,17 @@
         sbWidth: parseInt(localStorage.getItem("gdp:sbwidth")) || 308,
         collapsedDirs: new Set(JSON.parse(localStorage.getItem("gdp:collapsed-dirs") || "[]")),
         ignoreWs: igRaw === null ? true : igRaw === "1",
-        from: localStorage.getItem("gdp:from") || "HEAD",
-        to: localStorage.getItem("gdp:to") || "worktree",
+        from: route.range.from,
+        to: route.range.to,
         collapsed: false,
         files: [],
         activeFile: null,
         autoReload: localStorage.getItem("gdp:auto-reload") !== "0",
         hideTests: localStorage.getItem("gdp:hide-tests") === "1",
-        syntaxHighlight: localStorage.getItem("gdp:syntax-highlight") !== "0"
+        syntaxHighlight: localStorage.getItem("gdp:syntax-highlight") !== "0",
+        viewedFiles: new Set(JSON.parse(localStorage.getItem("gdp:viewed-files") || "[]")),
+        route,
+        repoRef: route.screen === "repo" ? route.ref : "worktree"
       };
     })();
     function setStatus(s) {
@@ -191,6 +353,35 @@
       span.title = { M: "modified", A: "added", D: "deleted", R: "renamed" }[ch] || ch;
       return span;
     }
+    function persistViewedFiles() {
+      localStorage.setItem("gdp:viewed-files", JSON.stringify([...STATE.viewedFiles]));
+    }
+    function setFileViewed(path, viewed) {
+      if (viewed)
+        STATE.viewedFiles.add(path);
+      else
+        STATE.viewedFiles.delete(path);
+      persistViewedFiles();
+      applyViewedState();
+    }
+    function setFolderIcon(el, collapsed) {
+      const path = collapsed ? FOLDER_ICON_PATHS.closed : FOLDER_ICON_PATHS.open;
+      el.innerHTML = '<svg class="octicon octicon-file-directory-' + (collapsed ? "fill" : "open-fill") + '" viewBox="0 0 16 16" width="16" height="16" fill="currentColor" aria-hidden="true">' + '<path fill="currentColor" d="' + path + '"></path></svg>';
+    }
+    function setChevronIcon(el) {
+      el.innerHTML = '<svg class="octicon octicon-chevron-down" viewBox="0 0 12 12" width="12" height="12" fill="currentColor" aria-hidden="true">' + '<path fill="currentColor" d="' + CHEVRON_DOWN_12_PATH + '"></path></svg>';
+    }
+    function iconSvg(className, paths) {
+      const pathList = Array.isArray(paths) ? paths : [paths];
+      return '<svg class="octicon ' + className + '" viewBox="0 0 16 16" width="16" height="16" fill="currentColor" aria-hidden="true">' + pathList.map((path) => '<path fill="currentColor" d="' + path + '"></path>').join("") + "</svg>";
+    }
+    function setUnfoldButtonState(button, expanded) {
+      if (!button)
+        return;
+      button.setAttribute("aria-pressed", expanded ? "true" : "false");
+      button.title = expanded ? "Collapse expanded lines" : "Expand all lines";
+      button.innerHTML = expanded ? iconSvg("octicon-fold", FOLD_16_PATH) : iconSvg("octicon-unfold", UNFOLD_16_PATH);
+    }
     function buildTree(files) {
       const root = { name: "", dirs: {}, files: [], path: "", minOrder: Infinity };
       for (const f of files) {
@@ -226,7 +417,7 @@
       Object.values(root.dirs).forEach(compress);
       return root;
     }
-    function renderTreeNode(node, depth, ul) {
+    function renderTreeNode(node, depth, ul, onFileClick) {
       const items = [];
       for (const k of Object.keys(node.dirs)) {
         const d = node.dirs[k];
@@ -245,7 +436,7 @@
           li.style.setProperty("--lvl-pad", 12 + depth * 14 + "px");
           const chev = document.createElement("span");
           chev.className = "chev";
-          chev.textContent = "▾";
+          setChevronIcon(chev);
           li.appendChild(chev);
           const dirIcon = document.createElement("span");
           dirIcon.className = "dir-icon";
@@ -259,12 +450,12 @@
           if (collapsed)
             li.classList.add("collapsed");
           const updateIcon = () => {
-            dirIcon.textContent = li.classList.contains("collapsed") ? "\uD83D\uDCC1" : "\uD83D\uDCC2";
+            setFolderIcon(dirIcon, li.classList.contains("collapsed"));
           };
           updateIcon();
           const childUl = document.createElement("ul");
           childUl.className = "tree-children";
-          renderTreeNode(dir, depth + 1, childUl);
+          renderTreeNode(dir, depth + 1, childUl, onFileClick);
           li.addEventListener("click", (e) => {
             e.stopPropagation();
             li.classList.toggle("collapsed");
@@ -282,45 +473,76 @@
           const li = document.createElement("li");
           li.className = "tree-file";
           li.dataset.path = f.path;
+          li.classList.toggle("viewed", STATE.viewedFiles.has(f.path));
           li.style.setProperty("--lvl-pad", 12 + depth * 14 + "px");
-          li.appendChild(fileBadge(f.status));
+          const spacer = document.createElement("span");
+          spacer.className = "chev-spacer";
+          li.appendChild(spacer);
+          if (f.status) {
+            li.appendChild(fileBadge(f.status));
+          } else {
+            const icon = document.createElement("span");
+            icon.className = "d2h-icon-wrapper";
+            icon.innerHTML = fileEntryIcon();
+            li.appendChild(icon);
+          }
           const name = document.createElement("span");
           name.className = "name";
           name.textContent = f.path.split("/").pop();
           name.title = f.path;
           li.appendChild(name);
-          li.addEventListener("click", () => scrollToFile(f.path));
-          li.addEventListener("mouseenter", () => prefetchByPath(f.path), { passive: true });
+          li.addEventListener("click", () => {
+            if (onFileClick)
+              onFileClick(f);
+            else
+              scrollToFile(f.path);
+          });
+          if (!onFileClick)
+            li.addEventListener("mouseenter", () => prefetchByPath(f.path), { passive: true });
           ul.appendChild(li);
         }
       }
     }
-    function renderFlat(files, ul) {
+    function renderFlat(files, ul, onFileClick) {
       files.forEach((f, i) => {
         const li = document.createElement("li");
         li.dataset.index = String(i);
         li.dataset.path = f.path;
-        li.appendChild(fileBadge(f.status));
+        li.classList.toggle("viewed", STATE.viewedFiles.has(f.path));
+        if (f.status) {
+          li.appendChild(fileBadge(f.status));
+        } else {
+          const icon = document.createElement("span");
+          icon.className = "d2h-icon-wrapper";
+          icon.innerHTML = fileEntryIcon();
+          li.appendChild(icon);
+        }
         const name = document.createElement("span");
         name.className = "name";
         name.textContent = f.path;
         name.title = f.path;
         li.appendChild(name);
-        li.addEventListener("click", () => scrollToFile(f.path));
-        li.addEventListener("mouseenter", () => prefetchByPath(f.path), { passive: true });
+        li.addEventListener("click", () => {
+          if (onFileClick)
+            onFileClick(f);
+          else
+            scrollToFile(f.path);
+        });
+        if (!onFileClick)
+          li.addEventListener("mouseenter", () => prefetchByPath(f.path), { passive: true });
         ul.appendChild(li);
       });
     }
-    function renderSidebar(files) {
+    function renderSidebar(files, onFileClick) {
       const ul = $("#filelist");
       ul.innerHTML = "";
       ul.classList.toggle("tree", STATE.sbView === "tree");
       STATE.files = files;
       if (STATE.sbView === "tree") {
         const root = buildTree(files);
-        renderTreeNode(root, 0, ul);
+        renderTreeNode(root, 0, ul, onFileClick);
       } else {
-        renderFlat(files, ul);
+        renderFlat(files, ul, onFileClick);
       }
       $("#totals").textContent = files.length ? files.length + " file" + (files.length === 1 ? "" : "s") : "";
       $$(".sb-view-seg button").forEach((b) => {
@@ -330,20 +552,23 @@
         markActive(STATE.activeFile);
       applyFilter();
     }
+    function syncRepoTargetInput(ref) {
+      const input = document.querySelector("#repo-target");
+      const wrap = document.querySelector("#repo-target-wrap");
+      if (!input || !wrap)
+        return;
+      input.value = ref || "worktree";
+      wrap.hidden = !(STATE.route.screen === "file" && STATE.route.view === "blob");
+    }
     function renderMeta(meta) {
       const el = $("#meta");
       if (!meta) {
         el.textContent = "";
         return;
       }
+      PROJECT_NAME = meta.project || PROJECT_NAME;
       document.title = (meta.project ? meta.project + " - " : "") + "git diff preview";
       el.innerHTML = "";
-      if (meta.range) {
-        const r = document.createElement("span");
-        r.className = "ref";
-        r.textContent = meta.range;
-        el.appendChild(r);
-      }
       if (meta.branch) {
         const b = document.createElement("span");
         b.className = "ref";
@@ -397,19 +622,46 @@
           li.classList.toggle("active", li.dataset.path === path);
       });
     }
+    function applyViewedState() {
+      $$("#filelist li[data-path]").forEach((li) => {
+        const path = li.dataset.path || "";
+        li.classList.toggle("viewed", STATE.viewedFiles.has(path));
+      });
+      $$(".gdp-file-shell[data-path]").forEach((card) => {
+        const path = card.dataset.path || "";
+        const viewed = STATE.viewedFiles.has(path);
+        card.classList.toggle("viewed", viewed);
+        card.querySelectorAll(".d2h-file-collapse-input").forEach((checkbox) => {
+          checkbox.checked = viewed;
+        });
+      });
+    }
     function applyFilter() {
-      const q = ($("#filter").value || "").toLowerCase().trim();
+      const input = $("#sb-filter");
+      const filter = compileFileFilter(input.value);
+      const invalid = filter.kind === "invalid";
+      input.toggleAttribute("aria-invalid", invalid);
+      input.title = invalid ? filter.error || "invalid regular expression" : "";
+      const matches = invalid ? () => true : filter.match;
       $$("#filelist li[data-path]").forEach((li) => {
-        const match = !q || li.dataset.path.toLowerCase().includes(q);
+        const match = matches(li.dataset.path || "");
         li.classList.toggle("hidden", !match);
       });
+      document.querySelectorAll(".gdp-file-shell").forEach((card) => {
+        const match = matches(card.dataset.path || "");
+        card.classList.toggle("hidden-by-filter", !match);
+      });
+      updateTreeDirVisibility();
+      if (typeof applyViewedState === "function")
+        applyViewedState();
+    }
+    function updateTreeDirVisibility() {
       $$("#filelist .tree-dir").forEach((dir) => {
         const childUl = dir.nextElementSibling;
         if (!childUl || !childUl.classList.contains("tree-children"))
           return;
-        const anyVisible = !!childUl.querySelector(".tree-file:not(.hidden)");
-        const fullVisible = !q;
-        dir.classList.toggle("hidden", !(fullVisible || anyVisible));
+        const anyVisible = !!childUl.querySelector(".tree-file:not(.hidden):not(.hidden-by-tests)");
+        dir.classList.toggle("hidden", !anyVisible);
       });
     }
     let SERVER_GENERATION = 0;
@@ -418,6 +670,7 @@
     let ACTIVE_LOADS = 0;
     const MAX_PARALLEL = 2;
     let lazyObserver = null;
+    let SOURCE_REQ_SEQ = 0;
     let IN_FLIGHT = 0;
     function updateLoadBar() {
       const el = $("#load-bar");
@@ -442,6 +695,65 @@
     function escapeHtml(s) {
       return String(s == null ? "" : s).replace(/[&<>"']/g, (c) => ({ "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;", "'": "&#39;" })[c]);
     }
+    function sourceTargetsEqual(a, b) {
+      return !!a && !!b && a.path === b.path && a.ref === b.ref;
+    }
+    function fileSourceTarget(file) {
+      if ((file.status || "").startsWith("D")) {
+        return { path: file.old_path || file.path, ref: STATE.from || "HEAD" };
+      }
+      const ref = STATE.to && STATE.to !== "worktree" ? STATE.to : "worktree";
+      return { path: file.path, ref };
+    }
+    function currentRange() {
+      return { from: STATE.from || DEFAULT_RANGE.from, to: STATE.to || DEFAULT_RANGE.to };
+    }
+    function sourceTargetFromRoute() {
+      return STATE.route.screen === "file" ? { path: STATE.route.path, ref: STATE.route.ref } : null;
+    }
+    function repoFileTargetFromRoute() {
+      return STATE.route.screen === "file" && STATE.route.view === "blob" ? STATE.route.ref : null;
+    }
+    function setRoute(route, replace = false) {
+      const nextRoute = route.screen === "unknown" ? { screen: "diff", range: route.range } : route;
+      STATE.route = nextRoute;
+      STATE.from = nextRoute.range.from;
+      STATE.to = nextRoute.range.to;
+      if (nextRoute.screen === "repo" || nextRoute.screen === "file" && nextRoute.view === "blob") {
+        STATE.repoRef = nextRoute.ref || "worktree";
+      }
+      const url = buildRoute(nextRoute);
+      const state = nextRoute.screen === "file" ? { screen: "file", path: nextRoute.path, ref: nextRoute.ref, view: nextRoute.view || "detail" } : { view: nextRoute.screen };
+      if (replace)
+        history.replaceState(state, "", url);
+      else
+        history.pushState(state, "", url);
+      syncHeaderMenu();
+    }
+    function setPageMode() {
+      document.body.classList.toggle("gdp-file-detail-page", STATE.route.screen === "file");
+      document.body.classList.toggle("gdp-repo-blob-page", STATE.route.screen === "file" && STATE.route.view === "blob");
+      document.body.classList.toggle("gdp-repo-page", STATE.route.screen === "repo");
+      syncRepoTargetInput(repoFileTargetFromRoute() || "worktree");
+    }
+    function syncHeaderMenu() {
+      document.querySelectorAll(".app-menu-item").forEach((link) => {
+        const fileRouteOwner = STATE.route.screen === "file" && STATE.route.view === "blob" ? "repo" : "diff";
+        const active = link.dataset.route === STATE.route.screen || STATE.route.screen === "file" && link.dataset.route === fileRouteOwner;
+        link.classList.toggle("active", active);
+        link.setAttribute("aria-current", active ? "page" : "false");
+        if (link.dataset.route === "repo") {
+          link.href = buildRoute({ screen: "repo", ref: STATE.repoRef || "worktree", path: "", range: currentRange() });
+        }
+        if (link.dataset.route === "diff") {
+          link.href = buildRoute({ screen: "diff", range: currentRange() });
+        }
+      });
+    }
+    function removeStandaloneSource() {
+      document.querySelectorAll(".gdp-standalone-source").forEach((el) => el.remove());
+      document.querySelectorAll(".gdp-repo-blob-layout").forEach((el) => el.remove());
+    }
     function renderShell(meta) {
       const newFiles = meta.files || [];
       STATE.files = newFiles;
@@ -506,9 +818,229 @@
       }
       setupLazyObserver();
       enqueueInitialLoads();
+      applySourceRouteToShell();
       setupScrollSpy();
       if (typeof applyHideTests === "function")
         applyHideTests();
+      applyFilter();
+      applyViewedState();
+    }
+    function fileEntryIcon() {
+      return iconSvg("octicon-file", FILE_16_PATH);
+    }
+    function repoRoute(ref, path) {
+      return { screen: "repo", ref: ref || "worktree", path, range: currentRange() };
+    }
+    function wireRepoTargetPicker(input, onPick) {
+      input.addEventListener("focus", () => openPopover(input));
+      input.addEventListener("click", (e) => {
+        e.stopPropagation();
+        openPopover(input);
+      });
+      input.addEventListener("mousedown", (e) => {
+        if (popover.hidden) {
+          e.preventDefault();
+          input.focus();
+        }
+      });
+      input.addEventListener("keydown", (e) => {
+        if (e.key === "Enter") {
+          e.preventDefault();
+          closePopover();
+        } else if (e.key === "Escape") {
+          closePopover();
+          input.blur();
+        }
+      });
+      input.addEventListener("change", () => onPick(input.value || "worktree"));
+    }
+    function createRepoBreadcrumb(target, path) {
+      const nav = document.createElement("nav");
+      nav.className = "gdp-file-breadcrumb gdp-repo-breadcrumb";
+      const root = document.createElement("button");
+      root.type = "button";
+      root.className = path ? "gdp-file-breadcrumb-part" : "gdp-file-breadcrumb-current";
+      root.textContent = PROJECT_NAME || "repository";
+      root.addEventListener("click", () => {
+        setRoute(repoRoute(target, ""));
+        loadRepo();
+      });
+      nav.appendChild(root);
+      const parts = path ? path.split("/") : [];
+      parts.forEach((part, index) => {
+        const sep = document.createElement("span");
+        sep.className = "gdp-file-breadcrumb-sep";
+        sep.textContent = "/";
+        nav.appendChild(sep);
+        const currentPath = parts.slice(0, index + 1).join("/");
+        const button = document.createElement("button");
+        button.type = "button";
+        button.className = index === parts.length - 1 ? "gdp-file-breadcrumb-current" : "gdp-file-breadcrumb-part";
+        button.textContent = part;
+        button.disabled = index === parts.length - 1;
+        button.addEventListener("click", () => {
+          setRoute(repoRoute(target, currentPath));
+          loadRepo();
+        });
+        nav.appendChild(button);
+      });
+      return nav;
+    }
+    function renderRepo(meta) {
+      PROJECT_NAME = meta.project || PROJECT_NAME;
+      setPageMode();
+      removeStandaloneSource();
+      $("#empty").classList.add("hidden");
+      $("#diff").replaceChildren();
+      $("#filelist").replaceChildren();
+      $("#totals").textContent = "";
+      STATE.files = [];
+      LOAD_QUEUE.length = 0;
+      const target = $("#diff");
+      const shell = document.createElement("section");
+      shell.className = "gdp-repo-shell";
+      const targetPicker = document.createElement("input");
+      targetPicker.className = "ref-input gdp-repo-target";
+      targetPicker.id = "repo-ref";
+      targetPicker.readOnly = true;
+      targetPicker.autocomplete = "off";
+      targetPicker.value = meta.ref || "worktree";
+      targetPicker.placeholder = "ref...";
+      targetPicker.title = "repository ref";
+      wireRepoTargetPicker(targetPicker, (ref) => {
+        setRoute(repoRoute(ref, ""));
+        loadRepo();
+      });
+      const toolbar = document.createElement("div");
+      toolbar.className = "gdp-file-detail-header gdp-repo-toolbar";
+      toolbar.append(createRepoBreadcrumb(meta.ref, meta.path || ""), targetPicker);
+      shell.appendChild(toolbar);
+      const listCard = document.createElement("section");
+      listCard.className = "gdp-file-shell loaded gdp-repo-list-shell";
+      const listWrapper = document.createElement("div");
+      listWrapper.className = "d2h-file-wrapper";
+      const listHeader = document.createElement("div");
+      listHeader.className = "d2h-file-header";
+      const listName = document.createElement("div");
+      listName.className = "d2h-file-name-wrapper";
+      const listIcon = document.createElement("span");
+      listIcon.className = "dir-icon";
+      setFolderIcon(listIcon, false);
+      const listTitle = document.createElement("span");
+      listTitle.className = "d2h-file-name";
+      listTitle.textContent = meta.path || meta.project || "Files";
+      listName.append(listIcon, listTitle);
+      listHeader.appendChild(listName);
+      listWrapper.appendChild(listHeader);
+      const list = document.createElement("div");
+      list.className = "gdp-source-viewer gdp-repo-file-list";
+      if (meta.path) {
+        const parent = meta.path.split("/").slice(0, -1).join("/");
+        const row = document.createElement("button");
+        row.type = "button";
+        row.className = "gdp-repo-row parent";
+        const parentIcon = document.createElement("span");
+        parentIcon.className = "dir-icon";
+        setFolderIcon(parentIcon, false);
+        const parentName = document.createElement("span");
+        parentName.className = "name";
+        parentName.textContent = "..";
+        const parentKind = document.createElement("span");
+        parentKind.className = "kind";
+        parentKind.textContent = "parent";
+        row.append(parentIcon, parentName, parentKind);
+        row.addEventListener("click", () => {
+          setRoute(repoRoute(meta.ref, parent));
+          loadRepo();
+        });
+        list.appendChild(row);
+      }
+      meta.entries.forEach((entry) => {
+        const row = document.createElement("button");
+        row.type = "button";
+        row.className = "gdp-repo-row " + entry.type;
+        const icon = document.createElement("span");
+        icon.className = entry.type === "tree" ? "dir-icon" : "d2h-icon-wrapper";
+        if (entry.type === "tree")
+          setFolderIcon(icon, true);
+        else
+          icon.innerHTML = fileEntryIcon();
+        const name = document.createElement("span");
+        name.className = "name";
+        name.textContent = entry.name;
+        const kind = document.createElement("span");
+        kind.className = "kind";
+        kind.textContent = entry.type === "tree" ? "directory" : entry.type === "commit" ? "submodule" : "file";
+        row.append(icon, name, kind);
+        row.addEventListener("click", () => {
+          if (entry.type === "tree") {
+            setRoute(repoRoute(meta.ref, entry.path));
+            loadRepo();
+          } else if (entry.type === "blob") {
+            setRoute({ screen: "file", path: entry.path, ref: meta.ref, view: "blob", range: currentRange() });
+            renderStandaloneSource({ path: entry.path, ref: meta.ref });
+          }
+        });
+        list.appendChild(row);
+      });
+      if (!meta.entries.length) {
+        const empty = document.createElement("div");
+        empty.className = "gdp-repo-empty";
+        empty.textContent = "No files in this directory.";
+        list.appendChild(empty);
+      }
+      listWrapper.appendChild(list);
+      listCard.appendChild(listWrapper);
+      shell.appendChild(listCard);
+      if (meta.readme && meta.readme.text) {
+        const readme = document.createElement("section");
+        readme.className = "gdp-file-shell loaded gdp-repo-readme";
+        const wrapper = document.createElement("div");
+        wrapper.className = "d2h-file-wrapper";
+        const readmeHeader = document.createElement("div");
+        readmeHeader.className = "d2h-file-header";
+        const nameWrapper = document.createElement("div");
+        nameWrapper.className = "d2h-file-name-wrapper";
+        const icon = document.createElement("span");
+        icon.className = "d2h-icon-wrapper";
+        icon.innerHTML = iconSvg("octicon-file", FILE_16_PATH);
+        const name = document.createElement("span");
+        name.className = "d2h-file-name";
+        name.textContent = meta.readme.path;
+        nameWrapper.append(icon, name);
+        readmeHeader.appendChild(nameWrapper);
+        wrapper.appendChild(readmeHeader);
+        wrapper.appendChild(renderMarkdownPreview(meta.readme.text, { path: meta.readme.path, ref: meta.ref }, getHljs()));
+        readme.appendChild(wrapper);
+        shell.appendChild(readme);
+      }
+      target.appendChild(shell);
+    }
+    function renderRepoBlobSidebar(currentPath, ref) {
+      syncRepoTargetInput(ref);
+      const params = new URLSearchParams;
+      params.set("ref", ref || "worktree");
+      params.set("recursive", "1");
+      return trackLoad(fetch("/_tree?" + params.toString()).then((r) => {
+        if (!r.ok)
+          throw new Error("failed to load repository tree");
+        return r.json();
+      })).then((meta) => {
+        const files = meta.entries.filter((entry) => entry.type !== "tree").map((entry, index) => ({
+          order: index + 1,
+          path: entry.path,
+          display_path: entry.path
+        }));
+        renderSidebar(files, (file) => {
+          setRoute({ screen: "file", path: file.path, ref, view: "blob", range: currentRange() });
+          renderStandaloneSource({ path: file.path, ref });
+        });
+        markActive(currentPath);
+        applyFilter();
+      }).catch(() => {
+        renderSidebar([], undefined);
+        $("#totals").textContent = "Cannot load tree";
+      });
     }
     function createPlaceholder(f) {
       const card = document.createElement("div");
@@ -517,6 +1049,7 @@
       card.dataset.key = f.key || f.path;
       card.dataset.sizeClass = f.size_class || "small";
       card.dataset.status = f.status || "M";
+      card.classList.toggle("viewed", STATE.viewedFiles.has(f.path));
       if (f.estimated_height_px) {
         card.style.minHeight = f.estimated_height_px + "px";
       }
@@ -733,7 +1266,8 @@
         outputFormat: layout,
         synchronisedScroll: true,
         highlight: !!(STATE.syntaxHighlight && file.highlight && hljsRef),
-        fileListToggle: false
+        fileListToggle: false,
+        fileContentToggle: false
       }, hljsRef);
       ui.draw();
       if (STATE.ignoreWs)
@@ -889,8 +1423,8 @@
           else
             item.bottomExpandedEnd = end;
           for (const sib of item.siblings || [{ tr: item.tr }]) {
-            const ln2 = sib.tr.querySelector(".d2h-code-linenumber.d2h-info, .d2h-code-side-linenumber.d2h-info");
-            const old = ln2 && ln2.querySelector(".gdp-expand-stack");
+            const ln = sib.tr.querySelector(".d2h-code-linenumber.d2h-info, .d2h-code-side-linenumber.d2h-info");
+            const old = ln && ln.querySelector(".gdp-expand-stack");
             if (old)
               old.remove();
           }
@@ -903,46 +1437,131 @@
       const remainingSize = remainingEnd - remainingStart + 1;
       const isFirst = prevHunkEndNew === 0;
       const buildStack = () => {
-        const stack = document.createElement("div");
-        stack.className = "gdp-expand-stack";
-        const mkBtn = (path, title, fn) => {
-          const b = document.createElement("button");
-          b.className = "gdp-expand-btn";
-          b.title = title;
-          b.innerHTML = '<svg viewBox="0 0 16 16" width="12" height="12" aria-hidden="true">' + '<path fill="currentColor" d="' + path + '"/></svg>';
-          b.addEventListener("click", (e) => {
-            e.stopPropagation();
-            if (b.disabled)
-              return;
-            fn();
-          });
-          return b;
-        };
-        const upPath = "M8 3.5 3.75 7.75l1.06 1.06L7.25 6.37V13h1.5V6.37l2.44 2.44 1.06-1.06L8 3.5z";
-        const downPath = "M8 12.5 12.25 8.25l-1.06-1.06L8.75 9.63V3h-1.5v6.63L4.81 7.19 3.75 8.25 8 12.5z";
+        const buttons = [];
         if (isFirst) {
-          stack.appendChild(mkBtn(upPath, "Show " + Math.min(STEP, remainingSize) + " more lines", () => fetchAndInsert(Math.max(remainingStart, remainingEnd - STEP + 1), remainingEnd, "after")));
+          buttons.push({
+            direction: "up",
+            title: "Show " + Math.min(STEP, remainingSize) + " more lines",
+            onClick: () => fetchAndInsert(Math.max(remainingStart, remainingEnd - STEP + 1), remainingEnd, "after")
+          });
         } else {
-          stack.appendChild(mkBtn(upPath, "Show " + Math.min(STEP, remainingSize) + " more lines", () => fetchAndInsert(remainingStart, Math.min(remainingEnd, remainingStart + STEP - 1), "before")));
-          stack.appendChild(mkBtn(downPath, "Show " + Math.min(STEP, remainingSize) + " more lines", () => fetchAndInsert(Math.max(remainingStart, remainingEnd - STEP + 1), remainingEnd, "after")));
+          buttons.push({
+            direction: "up",
+            title: "Show " + Math.min(STEP, remainingSize) + " more lines",
+            onClick: () => fetchAndInsert(remainingStart, Math.min(remainingEnd, remainingStart + STEP - 1), "before")
+          });
+          buttons.push({
+            direction: "down",
+            title: "Show " + Math.min(STEP, remainingSize) + " more lines",
+            onClick: () => fetchAndInsert(Math.max(remainingStart, remainingEnd - STEP + 1), remainingEnd, "after")
+          });
         }
-        return stack;
+        return createExpandStack(buttons);
       };
-      const firstSib = item.siblings && item.siblings[0] || { tr: item.tr };
-      const ln = firstSib.tr.querySelector(".d2h-code-linenumber.d2h-info, .d2h-code-side-linenumber.d2h-info");
-      if (ln && !ln.querySelector(".gdp-expand-stack")) {
-        ln.appendChild(buildStack());
+      const siblings = item.siblings || [{ tr: item.tr }];
+      siblings.forEach((sib) => {
+        const ln = sib.tr.querySelector(".d2h-code-linenumber.d2h-info, .d2h-code-side-linenumber.d2h-info");
+        if (ln && !ln.querySelector(".gdp-expand-stack")) {
+          ln.appendChild(buildStack());
+        }
+      });
+      const firstSib = siblings[0];
+      if (firstSib) {
+        syncExpandRowHeights(siblings.map((sib) => sib.tr), firstSib.tr);
       }
+    }
+    const EXPAND_ICON_PATHS = {
+      up: "M8 3.5 3.75 7.75l1.06 1.06L7.25 6.37V13h1.5V6.37l2.44 2.44 1.06-1.06L8 3.5z",
+      down: "M8 12.5 12.25 8.25l-1.06-1.06L8.75 9.63V3h-1.5v6.63L4.81 7.19 3.75 8.25 8 12.5z"
+    };
+    function createExpandStack(buttons) {
+      const stack = document.createElement("div");
+      stack.className = "gdp-expand-stack";
+      buttons.forEach((spec) => {
+        const button = document.createElement("button");
+        button.className = "gdp-expand-btn";
+        button.title = spec.title;
+        button.innerHTML = '<svg viewBox="0 0 16 16" width="12" height="12" aria-hidden="true">' + '<path fill="currentColor" d="' + EXPAND_ICON_PATHS[spec.direction] + '"/></svg>';
+        button.addEventListener("click", (e) => {
+          e.stopPropagation();
+          if (button.disabled)
+            return;
+          spec.onClick();
+        });
+        stack.appendChild(button);
+      });
+      return stack;
+    }
+    function syncExpandRowHeights(rows, stackRow) {
       const syncHeight = () => {
-        const stack = firstSib.tr.querySelector(".gdp-expand-stack");
+        const stack = stackRow.querySelector(".gdp-expand-stack");
         const targetH = stack ? Math.max(20, stack.getBoundingClientRect().height) : 20;
-        for (const sib of item.siblings || [{ tr: item.tr }]) {
-          sib.tr.style.setProperty("height", targetH + "px", "important");
-        }
+        rows.forEach((row) => row.style.setProperty("height", targetH + "px", "important"));
       };
       requestAnimationFrame(syncHeight);
       setTimeout(syncHeight, 100);
     }
+    function attachTrailingExpandControls(item, file, ref, refPath) {
+      const STEP = 20;
+      let nextNewStart = nextNewLine(item.hunk);
+      let nextOldStart = nextOldLine(item.hunk);
+      const rows = (item.siblings || [{ tr: item.tr, sideIndex: 0 }]).map((sib) => {
+        const tbody = sib.tr.parentElement;
+        if (!tbody)
+          return null;
+        const isSplit = !!sib.tr.querySelector("td.d2h-code-side-linenumber");
+        const tr = document.createElement("tr");
+        tr.className = "gdp-hunk-row gdp-trailing-expand-row";
+        const ln = document.createElement("td");
+        ln.className = isSplit ? "d2h-code-side-linenumber d2h-info" : "d2h-code-linenumber d2h-info";
+        const info = document.createElement("td");
+        info.className = "d2h-info";
+        const spacer = document.createElement("div");
+        spacer.className = isSplit ? "d2h-code-side-line" : "d2h-code-line";
+        info.appendChild(spacer);
+        tr.appendChild(ln);
+        tr.appendChild(info);
+        tbody.appendChild(tr);
+        return { tr, ln, sideIndex: sib.sideIndex || 0 };
+      }).filter(Boolean);
+      if (!rows.length)
+        return;
+      const setBusy = (busy) => {
+        rows.forEach((row) => row.ln.querySelectorAll(".gdp-expand-btn").forEach((btn) => {
+          btn.disabled = busy;
+        }));
+      };
+      const fetchAndInsert = () => {
+        const range = window.GdpExpandLogic.trailingClickRange(nextNewStart, STEP);
+        setBusy(true);
+        const url = "/file_range?path=" + refPath + "&ref=" + encodeURIComponent(ref) + "&start=" + range.start + "&end=" + range.end;
+        trackLoad(fetch(url).then((r) => r.json())).then((data) => {
+          const lines = data && data.lines || [];
+          if (!lines.length) {
+            rows.forEach((row) => row.tr.remove());
+            return;
+          }
+          const card = item.tr.closest(".d2h-file-wrapper");
+          rows.forEach((row) => insertContextRows(row.tr, lines, range.start, nextOldStart, "before", row.sideIndex));
+          const next = window.GdpExpandLogic.applyTrailingResult({ newStart: nextNewStart, oldStart: nextOldStart }, lines.length, STEP);
+          nextNewStart = next.newStart;
+          nextOldStart = next.oldStart;
+          if (card)
+            highlightInsertedSpans(card, file);
+          if (next.eof) {
+            rows.forEach((row) => row.tr.remove());
+            return;
+          }
+          setBusy(false);
+        }).catch(() => {
+          setBusy(false);
+        });
+      };
+      rows.forEach((row) => {
+        row.ln.appendChild(createExpandStack([{ direction: "down", title: "Show more lines", onClick: fetchAndInsert }]));
+      });
+      syncExpandRowHeights(rows.map((row) => row.tr), rows[0].tr);
+    }
     function insertContextRows(targetTr, lines, newStart, oldStart, dir, sideIndex) {
       const tbody = targetTr.parentElement;
       if (!tbody)
@@ -970,10 +1589,556 @@
     function escapeHtmlText(s) {
       return String(s == null ? "" : s).replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
     }
+    function setFileCollapsed(card, collapsed) {
+      card.classList.toggle("gdp-file-collapsed", collapsed);
+      card.querySelectorAll(".d2h-files-diff, .d2h-file-diff, .gdp-source-viewer, .gdp-media").forEach((body) => {
+        body.classList.toggle("d2h-d-none", collapsed);
+      });
+      const button = card.querySelector(".gdp-file-toggle");
+      if (button) {
+        button.setAttribute("aria-expanded", collapsed ? "false" : "true");
+        button.title = collapsed ? "Expand file" : "Collapse file";
+      }
+      const unfold = card.querySelector(".gdp-file-unfold");
+      if (unfold)
+        unfold.disabled = collapsed;
+      const viewFile = card.querySelector(".gdp-view-file");
+      if (viewFile)
+        viewFile.disabled = collapsed;
+    }
+    function setViewFileButtonState(button, sourceMode) {
+      if (!button)
+        return;
+      button.classList.add("gdp-btn", "gdp-btn-sm");
+      button.textContent = sourceMode ? "View Diff" : "View File";
+      button.setAttribute("aria-pressed", sourceMode ? "true" : "false");
+      button.title = sourceMode ? "View diff" : "View file";
+    }
+    function renderSourceLoading(card, target) {
+      const body = card.querySelector(".gdp-file-detail-body, .d2h-files-diff, .d2h-file-diff, .gdp-media, .gdp-source-viewer");
+      const view = document.createElement("div");
+      view.className = "gdp-source-viewer loading";
+      view.textContent = "Loading " + target.path + " at " + target.ref + "...";
+      if (body)
+        body.replaceWith(view);
+      else
+        card.appendChild(view);
+    }
+    function renderSourceError(card, target, message) {
+      const body = card.querySelector(".gdp-file-detail-body, .d2h-files-diff, .d2h-file-diff, .gdp-media, .gdp-source-viewer");
+      const view = document.createElement("div");
+      view.className = "gdp-source-viewer error";
+      view.textContent = message || "Cannot load " + target.path + " at " + target.ref;
+      if (body)
+        body.replaceWith(view);
+      else
+        card.appendChild(view);
+    }
+    function isPreviewableSource(path) {
+      return /\.(md|markdown|mdown|mkdn|mdx)$/i.test(path);
+    }
+    function appendInlineMarkdown(parent, text) {
+      const parts = text.split(/(`[^`]+`)/g);
+      parts.forEach((part) => {
+        if (part.startsWith("`") && part.endsWith("`") && part.length > 1) {
+          const code = document.createElement("code");
+          code.textContent = part.slice(1, -1);
+          parent.appendChild(code);
+        } else {
+          parent.appendChild(document.createTextNode(part));
+        }
+      });
+    }
+    function appendMarkdownParagraph(markdown, lines) {
+      if (!lines.length)
+        return;
+      const p = document.createElement("p");
+      appendInlineMarkdown(p, lines.join(" ").trim());
+      markdown.appendChild(p);
+    }
+    function renderMarkdownPreview(textValue, target, hljsRef) {
+      const markdown = document.createElement("div");
+      markdown.className = "gdp-markdown-preview markdown-body";
+      const lines = textValue.replace(/\r\n/g, `
+`).replace(/\r/g, `
+`).split(`
+`);
+      let paragraph = [];
+      let list = null;
+      const flushParagraph = () => {
+        appendMarkdownParagraph(markdown, paragraph);
+        paragraph = [];
+      };
+      const flushList = () => {
+        list = null;
+      };
+      for (let i = 0;i < lines.length; i++) {
+        const line = lines[i];
+        const fence = line.match(/^```(\S*)\s*$/);
+        if (fence) {
+          flushParagraph();
+          flushList();
+          const codeLines = [];
+          i++;
+          while (i < lines.length && !/^```\s*$/.test(lines[i])) {
+            codeLines.push(lines[i]);
+            i++;
+          }
+          const pre = document.createElement("pre");
+          const code = document.createElement("code");
+          const lang = fence[1] || inferLang(target.path) || "";
+          const raw = codeLines.join(`
+`);
+          if (hljsRef && hljsRef.highlight && lang && (!hljsRef.getLanguage || hljsRef.getLanguage(lang))) {
+            try {
+              code.innerHTML = hljsRef.highlight(raw, { language: lang, ignoreIllegals: true }).value;
+              code.classList.add("hljs");
+            } catch {
+              code.textContent = raw;
+            }
+          } else {
+            code.textContent = raw;
+          }
+          pre.appendChild(code);
+          markdown.appendChild(pre);
+          continue;
+        }
+        if (!line.trim()) {
+          flushParagraph();
+          flushList();
+          continue;
+        }
+        const heading = line.match(/^(#{1,6})\s+(.+)$/);
+        if (heading) {
+          flushParagraph();
+          flushList();
+          const level = String(Math.min(heading[1].length, 6));
+          const h = document.createElement("h" + level);
+          appendInlineMarkdown(h, heading[2]);
+          markdown.appendChild(h);
+          continue;
+        }
+        if (/^\s*---+\s*$/.test(line)) {
+          flushParagraph();
+          flushList();
+          markdown.appendChild(document.createElement("hr"));
+          continue;
+        }
+        const bullet = line.match(/^\s*[-*+]\s+(.+)$/);
+        const ordered = line.match(/^\s*\d+\.\s+(.+)$/);
+        if (bullet || ordered) {
+          flushParagraph();
+          const tag = ordered ? "ol" : "ul";
+          if (!list || list.tagName.toLowerCase() !== tag) {
+            list = document.createElement(tag);
+            markdown.appendChild(list);
+          }
+          const li = document.createElement("li");
+          appendInlineMarkdown(li, (bullet || ordered)[1]);
+          list.appendChild(li);
+          continue;
+        }
+        const quote = line.match(/^\s*>\s?(.*)$/);
+        if (quote) {
+          flushParagraph();
+          flushList();
+          const blockquote = document.createElement("blockquote");
+          appendInlineMarkdown(blockquote, quote[1]);
+          markdown.appendChild(blockquote);
+          continue;
+        }
+        flushList();
+        paragraph.push(line);
+      }
+      flushParagraph();
+      return markdown;
+    }
+    async function renderSourceText(card, target, textValue) {
+      const lines = textValue.length ? textValue.replace(/\r\n/g, `
+`).replace(/\r/g, `
+`).split(`
+`) : [""];
+      const body = card.querySelector(".gdp-file-detail-body, .d2h-files-diff, .d2h-file-diff, .gdp-media, .gdp-source-viewer");
+      const isStandalone = card.classList.contains("gdp-standalone-source");
+      const view = document.createElement("div");
+      view.className = "gdp-source-viewer";
+      const header = isStandalone ? null : document.createElement("div");
+      if (header) {
+        header.className = "gdp-source-meta";
+        header.textContent = target.path + " @ " + target.ref;
+      }
+      const table = document.createElement("table");
+      table.className = "gdp-source-table";
+      const tbody = document.createElement("tbody");
+      const hljsRef = await loadSyntaxHighlighter();
+      const lang = inferLang(target.path);
+      lines.forEach((line, index) => {
+        const tr = document.createElement("tr");
+        const num = document.createElement("td");
+        num.className = "gdp-source-line-number";
+        num.textContent = String(index + 1);
+        const code = document.createElement("td");
+        code.className = "gdp-source-line-code";
+        if (hljsRef && hljsRef.highlight && lang && (!hljsRef.getLanguage || hljsRef.getLanguage(lang))) {
+          try {
+            code.innerHTML = hljsRef.highlight(line || " ", { language: lang, ignoreIllegals: true }).value;
+            code.classList.add("hljs");
+          } catch {
+            code.textContent = line || " ";
+          }
+        } else {
+          code.textContent = line || " ";
+        }
+        tr.appendChild(num);
+        tr.appendChild(code);
+        tbody.appendChild(tr);
+      });
+      table.appendChild(tbody);
+      if (isPreviewableSource(target.path)) {
+        const tabsHost = card.querySelector(".gdp-file-detail-tabs");
+        const tabs = document.createElement("div");
+        tabs.className = "gdp-source-tabs";
+        const previewButton = document.createElement("button");
+        previewButton.type = "button";
+        previewButton.className = "active";
+        previewButton.textContent = "Preview";
+        const codeButton = document.createElement("button");
+        codeButton.type = "button";
+        codeButton.textContent = "Code";
+        const preview = renderMarkdownPreview(textValue, target, hljsRef);
+        table.hidden = true;
+        previewButton.addEventListener("click", () => {
+          previewButton.classList.add("active");
+          codeButton.classList.remove("active");
+          preview.hidden = false;
+          table.hidden = true;
+        });
+        codeButton.addEventListener("click", () => {
+          codeButton.classList.add("active");
+          previewButton.classList.remove("active");
+          preview.hidden = true;
+          table.hidden = false;
+        });
+        tabs.appendChild(previewButton);
+        tabs.appendChild(codeButton);
+        if (header)
+          view.appendChild(header);
+        if (tabsHost) {
+          tabsHost.hidden = false;
+          tabsHost.replaceChildren(tabs);
+        }
+        view.appendChild(preview);
+        view.appendChild(table);
+        if (body)
+          body.replaceWith(view);
+        else
+          card.appendChild(view);
+        return;
+      }
+      if (header)
+        view.appendChild(header);
+      view.appendChild(table);
+      if (body)
+        body.replaceWith(view);
+      else
+        card.appendChild(view);
+    }
+    function renderSourceMedia(card, target, mediaKind) {
+      const body = card.querySelector(".gdp-file-detail-body, .d2h-files-diff, .d2h-file-diff, .gdp-media, .gdp-source-viewer");
+      const isStandalone = card.classList.contains("gdp-standalone-source");
+      const view = document.createElement("div");
+      view.className = "gdp-source-viewer media";
+      if (!isStandalone) {
+        const meta = document.createElement("div");
+        meta.className = "gdp-source-meta";
+        meta.textContent = target.path + " @ " + target.ref;
+        view.appendChild(meta);
+      }
+      const url = buildRawFileUrl(target);
+      if (mediaKind === "video") {
+        const video = document.createElement("video");
+        video.src = url;
+        video.controls = true;
+        video.preload = "metadata";
+        view.appendChild(video);
+      } else {
+        const img = document.createElement("img");
+        img.src = url;
+        img.alt = "";
+        view.appendChild(img);
+      }
+      if (body)
+        body.replaceWith(view);
+      else
+        card.appendChild(view);
+    }
+    function renderSourceBinary(card, target) {
+      const body = card.querySelector(".gdp-file-detail-body, .d2h-files-diff, .d2h-file-diff, .gdp-media, .gdp-source-viewer");
+      const isStandalone = card.classList.contains("gdp-standalone-source");
+      const view = document.createElement("div");
+      view.className = "gdp-source-viewer binary";
+      const link = document.createElement("a");
+      link.href = buildRawFileUrl(target);
+      link.textContent = "Open raw file";
+      link.target = "_blank";
+      link.rel = "noreferrer";
+      if (!isStandalone) {
+        const meta = document.createElement("div");
+        meta.className = "gdp-source-meta";
+        meta.textContent = target.path + " @ " + target.ref;
+        view.appendChild(meta);
+      }
+      view.appendChild(link);
+      if (body)
+        body.replaceWith(view);
+      else
+        card.appendChild(view);
+    }
+    function createFileBreadcrumb(path) {
+      const nav = document.createElement("nav");
+      nav.className = "gdp-file-breadcrumb";
+      nav.setAttribute("aria-label", "File path");
+      const parts = path.split("/").filter(Boolean);
+      const allParts = PROJECT_NAME ? [PROJECT_NAME, ...parts] : parts;
+      allParts.forEach((part, index) => {
+        if (index > 0) {
+          const sep = document.createElement("span");
+          sep.className = "gdp-file-breadcrumb-sep";
+          sep.textContent = "/";
+          nav.appendChild(sep);
+        }
+        const crumb = document.createElement("span");
+        crumb.className = index === allParts.length - 1 ? "gdp-file-breadcrumb-current" : "gdp-file-breadcrumb-part";
+        crumb.textContent = part;
+        nav.appendChild(crumb);
+      });
+      if (!allParts.length) {
+        const crumb = document.createElement("span");
+        crumb.className = "gdp-file-breadcrumb-current";
+        crumb.textContent = path;
+        nav.appendChild(crumb);
+      }
+      return nav;
+    }
+    async function renderStandaloneSource(target) {
+      const req = ++SOURCE_REQ_SEQ;
+      const root = $("#diff");
+      const repoTarget = repoFileTargetFromRoute();
+      setPageMode();
+      removeStandaloneSource();
+      document.querySelectorAll(".gdp-repo-blob-layout").forEach((el) => el.remove());
+      const card = document.createElement("article");
+      card.className = "gdp-file-shell loaded gdp-standalone-source gdp-source-mode";
+      card.dataset.path = target.path;
+      const wrapper = document.createElement("div");
+      wrapper.className = "gdp-file-detail-wrapper";
+      const sticky = document.createElement("div");
+      sticky.className = "gdp-file-detail-sticky";
+      const header = document.createElement("div");
+      header.className = "gdp-file-detail-header";
+      const name = document.createElement("div");
+      name.className = "gdp-file-detail-path";
+      name.appendChild(createFileBreadcrumb(target.path));
+      const copy = document.createElement("button");
+      copy.type = "button";
+      copy.className = "gdp-file-header-icon gdp-copy-path";
+      copy.title = "copy file path";
+      copy.innerHTML = iconSvg("octicon-copy", COPY_16_PATHS);
+      copy.addEventListener("click", async (e) => {
+        e.stopPropagation();
+        try {
+          await navigator.clipboard.writeText(target.path);
+          copy.classList.add("copied");
+          setTimeout(() => {
+            copy.classList.remove("copied");
+          }, 1200);
+        } catch {
+          copy.classList.add("failed");
+          setTimeout(() => {
+            copy.classList.remove("failed");
+          }, 1200);
+        }
+      });
+      name.appendChild(copy);
+      header.appendChild(name);
+      if (!repoTarget) {
+        const back = document.createElement("button");
+        back.type = "button";
+        back.className = "gdp-view-file gdp-btn gdp-btn-sm";
+        setViewFileButtonState(back, true);
+        back.addEventListener("click", () => {
+          setRoute({ screen: "diff", range: currentRange() });
+          setPageMode();
+          removeStandaloneSource();
+        });
+        header.appendChild(back);
+      }
+      sticky.appendChild(header);
+      const tabsHost = document.createElement("div");
+      tabsHost.className = "gdp-file-detail-tabs";
+      tabsHost.hidden = true;
+      sticky.appendChild(tabsHost);
+      wrapper.appendChild(sticky);
+      const detailBody = document.createElement("div");
+      detailBody.className = "gdp-file-detail-body";
+      wrapper.appendChild(detailBody);
+      card.appendChild(wrapper);
+      if (repoTarget) {
+        const layout = document.createElement("div");
+        layout.className = "gdp-repo-blob-layout";
+        renderRepoBlobSidebar(target.path, repoTarget);
+        layout.appendChild(card);
+        root.replaceChildren(layout);
+      } else {
+        root.prepend(card);
+      }
+      renderSourceLoading(card, target);
+      try {
+        const mediaKind = isVideo(target.path) ? "video" : isMedia(target.path) ? "image" : null;
+        if (mediaKind === "image" || mediaKind === "video") {
+          if (req !== SOURCE_REQ_SEQ || !sourceTargetsEqual(sourceTargetFromRoute(), target))
+            return;
+          renderSourceMedia(card, target, mediaKind);
+          return;
+        }
+        const response = await trackLoad(fetch(buildRawFileUrl(target)));
+        if (req !== SOURCE_REQ_SEQ || !sourceTargetsEqual(sourceTargetFromRoute(), target))
+          return;
+        if (!response.ok) {
+          renderSourceError(card, target, "Cannot load " + target.path + " at " + target.ref);
+          return;
+        }
+        const textValue = await response.text();
+        if (req !== SOURCE_REQ_SEQ || !sourceTargetsEqual(sourceTargetFromRoute(), target))
+          return;
+        await renderSourceText(card, target, textValue);
+      } catch {
+        if (req !== SOURCE_REQ_SEQ || !sourceTargetsEqual(sourceTargetFromRoute(), target))
+          return;
+        renderSourceError(card, target, "Cannot load " + target.path + " at " + target.ref);
+      }
+    }
+    function applySourceRouteToShell() {
+      const target = sourceTargetFromRoute();
+      setPageMode();
+      if (!target) {
+        removeStandaloneSource();
+        document.querySelectorAll(".gdp-view-file").forEach((button) => {
+          setViewFileButtonState(button, false);
+        });
+        return;
+      }
+      renderStandaloneSource(target);
+    }
+    async function expandAllFileContext(card, file) {
+      if (card.classList.contains("gdp-context-expanded")) {
+        const data = card._diffData;
+        if (!data)
+          return;
+        card.classList.remove("gdp-context-expanded");
+        mountDiff(card, file, data);
+        if (data.truncated && data.mode === "preview")
+          addExpandHunksUI(file, data, card);
+        scheduleIdleHighlight(card, file);
+        setUnfoldButtonState(card.querySelector(".gdp-file-unfold"), false);
+        return;
+      }
+      if (card._diffData && (card._diffData.truncated || card._diffData.mode === "preview")) {
+        await loadFile(file, card, file.load_url);
+        card.classList.add("gdp-context-expanded");
+        setUnfoldButtonState(card.querySelector(".gdp-file-unfold"), true);
+        return;
+      }
+      const button = card.querySelector(".gdp-file-unfold");
+      if (button)
+        button.disabled = true;
+      try {
+        for (let i = 0;i < 200; i++) {
+          const next = card.querySelector(".gdp-expand-btn:not(:disabled)");
+          if (!next)
+            break;
+          next.click();
+          await new Promise((resolve) => setTimeout(resolve, 80));
+        }
+        card.classList.add("gdp-context-expanded");
+        setUnfoldButtonState(button || null, true);
+      } finally {
+        if (button)
+          button.disabled = false;
+      }
+    }
     function appendStatSquaresToHeader(card, file) {
       const header = card.querySelector(".d2h-file-header");
-      if (!header || header.querySelector(".gdp-stat-squares"))
+      if (!header)
         return;
+      if (!header.querySelector(".gdp-file-toggle")) {
+        const toggle = document.createElement("button");
+        toggle.type = "button";
+        toggle.className = "gdp-file-header-icon gdp-file-toggle";
+        toggle.title = "Collapse file";
+        toggle.setAttribute("aria-expanded", "true");
+        toggle.innerHTML = iconSvg("octicon-chevron-down", CHEVRON_DOWN_16_PATH);
+        toggle.addEventListener("click", (e) => {
+          e.stopPropagation();
+          setFileCollapsed(card, !card.classList.contains("gdp-file-collapsed"));
+        });
+        header.insertBefore(toggle, header.firstChild);
+      }
+      header.querySelectorAll(".d2h-file-collapse-input").forEach((checkbox) => {
+        checkbox.checked = STATE.viewedFiles.has(file.path);
+        if (checkbox.dataset.gdpBound !== "1") {
+          checkbox.dataset.gdpBound = "1";
+          checkbox.addEventListener("change", () => setFileViewed(file.path, checkbox.checked));
+        }
+      });
+      if (!header.querySelector(".gdp-copy-path")) {
+        const nameWrapper = header.querySelector(".d2h-file-name-wrapper");
+        const copy = document.createElement("button");
+        copy.type = "button";
+        copy.className = "gdp-file-header-icon gdp-copy-path";
+        copy.title = "copy file path";
+        copy.innerHTML = iconSvg("octicon-copy", COPY_16_PATHS);
+        copy.addEventListener("click", async (e) => {
+          e.stopPropagation();
+          const path = filePathClipboardText(file.path);
+          if (!path)
+            return;
+          try {
+            await navigator.clipboard.writeText(path);
+            copy.classList.add("copied");
+            setTimeout(() => {
+              copy.classList.remove("copied");
+            }, 1200);
+          } catch {
+            copy.classList.add("failed");
+            setTimeout(() => {
+              copy.classList.remove("failed");
+            }, 1200);
+          }
+        });
+        const statusTag = nameWrapper ? nameWrapper.querySelector(".d2h-tag") : null;
+        if (statusTag)
+          statusTag.insertAdjacentElement("afterend", copy);
+        else if (nameWrapper)
+          nameWrapper.insertAdjacentElement("beforeend", copy);
+        else
+          header.insertBefore(copy, header.firstChild);
+      }
+      if (!header.querySelector(".gdp-file-unfold")) {
+        const unfold = document.createElement("button");
+        unfold.type = "button";
+        unfold.className = "gdp-file-header-icon gdp-file-unfold";
+        setUnfoldButtonState(unfold, card.classList.contains("gdp-context-expanded"));
+        unfold.addEventListener("click", (e) => {
+          e.stopPropagation();
+          expandAllFileContext(card, file);
+        });
+        const copy = header.querySelector(".gdp-copy-path");
+        if (copy)
+          copy.insertAdjacentElement("afterend", unfold);
+        else
+          header.appendChild(unfold);
+      }
       if (!header.querySelector(".gdp-stat-text")) {
         const stats = document.createElement("span");
         stats.className = "gdp-stat-text";
@@ -1010,6 +2175,21 @@
         wrap.appendChild(box);
       }
       header.appendChild(wrap);
+      if (!header.querySelector(".gdp-view-file")) {
+        const viewFile = document.createElement("button");
+        viewFile.type = "button";
+        viewFile.className = "gdp-view-file gdp-btn gdp-btn-sm";
+        setViewFileButtonState(viewFile, false);
+        viewFile.addEventListener("click", (e) => {
+          e.stopPropagation();
+          const target = fileSourceTarget(file);
+          setRoute({ screen: "file", path: target.path, ref: target.ref, range: currentRange() });
+          applySourceRouteToShell();
+        });
+        header.appendChild(viewFile);
+      } else {
+        setViewFileButtonState(header.querySelector(".gdp-view-file"), false);
+      }
     }
     function renderFile(file, data, card) {
       card._diffData = data;
@@ -1379,29 +2559,72 @@
       localStorage.setItem("gdp:theme", STATE.theme);
       applyTheme();
     });
-    $("#collapse").addEventListener("click", () => collapseAll());
-    function syncFilters(srcEl) {
-      const v = srcEl.value;
-      ["#filter", "#sb-filter"].forEach((sel) => {
-        const el = $(sel);
-        if (el && el !== srcEl)
-          el.value = v;
-      });
-      applyFilter();
+    function visibleFileItems() {
+      return $$("#filelist li[data-path]:not(.hidden):not(.hidden-by-tests)");
+    }
+    function moveActiveVisibleFile(direction) {
+      const items = visibleFileItems();
+      if (!items.length)
+        return;
+      const current = items.findIndex((li) => li.classList.contains("active"));
+      const idx = nextVisibleFileIndex(current, items.length, direction);
+      const target = items[idx];
+      if (!target)
+        return;
+      if (target.dataset.path)
+        markActive(target.dataset.path);
+      target.scrollIntoView({ block: "nearest" });
+      if (target.dataset.path)
+        prefetchByPath(target.dataset.path);
+    }
+    function jumpToActiveOrFirstFilteredFile() {
+      const items = visibleFileItems();
+      const active = items.find((li) => li.classList.contains("active"));
+      const target = active || items[0];
+      if (target) {
+        target.click();
+        $("#sb-filter").blur();
+      }
     }
-    $("#filter").addEventListener("input", (e) => syncFilters(e.target));
     const sbFilter = $("#sb-filter");
-    if (sbFilter)
-      sbFilter.addEventListener("input", (e) => syncFilters(e.target));
+    if (sbFilter) {
+      sbFilter.addEventListener("input", () => applyFilter());
+      sbFilter.addEventListener("keydown", (e) => {
+        if (e.key === "Enter") {
+          e.preventDefault();
+          jumpToActiveOrFirstFilteredFile();
+        } else if (e.key === "ArrowDown" || e.key === "ArrowUp") {
+          e.preventDefault();
+          moveActiveVisibleFile(e.key === "ArrowDown" ? 1 : -1);
+        } else if (e.key === "Escape") {
+          if (sbFilter.value) {
+            sbFilter.value = "";
+            applyFilter();
+          } else {
+            sbFilter.blur();
+          }
+        }
+      });
+    }
+    function focusFileFilter() {
+      const input = $("#sb-filter");
+      input.focus();
+      input.select();
+    }
     document.addEventListener("keydown", (e) => {
+      if ((e.metaKey || e.ctrlKey) && e.key.toLowerCase() === "k") {
+        e.preventDefault();
+        focusFileFilter();
+        return;
+      }
       const targetEl = e.target;
       if (targetEl && (targetEl.tagName === "INPUT" || targetEl.tagName === "TEXTAREA"))
         return;
       if (e.key === "/") {
         e.preventDefault();
-        $("#filter").focus();
+        focusFileFilter();
       } else if (e.key === "j" || e.key === "k") {
-        const items = $$("#filelist li[data-path]:not(.hidden)");
+        const items = visibleFileItems();
         if (!items.length)
           return;
         let idx = items.findIndex((li) => li.classList.contains("active"));
@@ -1427,7 +2650,31 @@
     });
     applyTheme();
     setLayout(STATE.layout);
+    setPageMode();
+    if (window.location.pathname === "/") {
+      setRoute(STATE.route, true);
+    }
+    function loadRepo() {
+      if (STATE.route.screen !== "repo")
+        return Promise.resolve();
+      setStatus("refreshing");
+      const params = new URLSearchParams;
+      params.set("ref", STATE.route.ref || "worktree");
+      if (STATE.route.path)
+        params.set("path", STATE.route.path);
+      return trackLoad(fetch("/_tree?" + params.toString()).then((r) => {
+        if (!r.ok)
+          throw new Error("failed to load repository tree");
+        return r.json();
+      })).then((data) => {
+        renderRepo(data);
+        setStatus("live");
+        syncHeaderMenu();
+      }).catch(() => setStatus("error"));
+    }
     function load(opts) {
+      if (STATE.route.screen === "repo")
+        return loadRepo();
       setStatus("refreshing");
       const params = new URLSearchParams;
       if (STATE.ignoreWs)
@@ -1444,7 +2691,10 @@
         setStatus("live");
       }).catch(() => setStatus("error"));
     }
-    load();
+    if (STATE.route.screen === "repo")
+      loadRepo();
+    else
+      load();
     function syncRefInputs() {
       const fi = $("#ref-from"), ti = $("#ref-to");
       if (fi)
@@ -1458,9 +2708,16 @@
       localStorage.setItem("gdp:from", STATE.from);
       localStorage.setItem("gdp:to", STATE.to);
       syncRefInputs();
+      const range = currentRange();
+      if (STATE.route.screen === "file") {
+        setRoute({ screen: "file", path: STATE.route.path, ref: STATE.route.ref, range }, true);
+      } else {
+        setRoute({ screen: "diff", range }, true);
+      }
       load();
     }
     syncRefInputs();
+    syncHeaderMenu();
     const REFS = { branches: [], tags: [], commits: [], current: "" };
     const popover = $("#ref-popover");
     const popBody = popover.querySelector(".rp-body");
@@ -1544,7 +2801,8 @@
       });
       popover.hidden = false;
       const r = input.getBoundingClientRect();
-      popover.style.left = Math.max(8, r.left) + "px";
+      const popWidth = Math.min(560, Math.floor(window.innerWidth * 0.9));
+      popover.style.left = Math.max(8, Math.min(r.left, window.innerWidth - popWidth - 8)) + "px";
       popover.style.top = r.bottom + 4 + "px";
       setTimeout(() => popSearch.focus(), 0);
     }
@@ -1561,17 +2819,31 @@
           el.focus();
         }
       });
+      el.addEventListener("click", (e) => {
+        e.stopPropagation();
+        openPopover(el);
+      });
       el.addEventListener("keydown", (e) => {
         if (e.key === "Enter") {
           e.preventDefault();
           closePopover();
-          setRange($("#ref-from").value, $("#ref-to").value);
         } else if (e.key === "Escape") {
           closePopover();
           el.blur();
         }
       });
     });
+    wireRepoTargetPicker($("#repo-target"), (ref) => {
+      if (STATE.route.screen !== "file")
+        return;
+      setRoute({ screen: "file", path: STATE.route.path, ref, view: "blob", range: currentRange() });
+      renderStandaloneSource({ path: STATE.route.path, ref });
+    });
+    document.addEventListener("focusin", (e) => {
+      const el = e.target;
+      if (el instanceof HTMLInputElement && (el.id === "repo-ref" || el.id === "repo-target"))
+        openPopover(el);
+    });
     popSearch.addEventListener("input", () => buildPopBody(popSearch.value));
     popSearch.addEventListener("keydown", (e) => {
       if (e.key === "Escape") {
@@ -1586,8 +2858,19 @@
     function handlePicked(val) {
       if (!popTarget || !val)
         return;
-      popTarget.value = val;
-      const targetWasFrom = popTarget.id === "ref-from";
+      const pickedTarget = popTarget;
+      pickedTarget.value = val;
+      if (pickedTarget.id === "repo-ref") {
+        closePopover();
+        pickedTarget.dispatchEvent(new Event("change"));
+        return;
+      }
+      if (pickedTarget.id === "repo-target") {
+        closePopover();
+        pickedTarget.dispatchEvent(new Event("change"));
+        return;
+      }
+      const targetWasFrom = pickedTarget.id === "ref-from";
       const otherEmpty = !$("#ref-to").value;
       closePopover();
       setRange($("#ref-from").value, $("#ref-to").value);
@@ -1618,12 +2901,36 @@
       const target = e.target;
       if (popover.contains(target))
         return;
-      if (target.id === "ref-from" || target.id === "ref-to")
+      if (target.id === "ref-from" || target.id === "ref-to" || target.id === "repo-ref" || target.id === "repo-target")
         return;
       closePopover();
     });
-    $("#ref-apply").addEventListener("click", () => setRange($("#ref-from").value, $("#ref-to").value));
     $("#ref-reset").addEventListener("click", () => setRange("HEAD", "worktree"));
+    window.addEventListener("popstate", () => {
+      const parsedRoute = parseRoute(window.location.pathname, window.location.search, currentRange());
+      STATE.route = parsedRoute.screen === "unknown" ? { screen: "diff", range: parsedRoute.range } : parsedRoute;
+      STATE.from = STATE.route.range.from;
+      STATE.to = STATE.route.range.to;
+      if (STATE.route.screen === "repo")
+        STATE.repoRef = STATE.route.ref || "worktree";
+      syncRefInputs();
+      syncHeaderMenu();
+      if (STATE.route.screen === "repo") {
+        SOURCE_REQ_SEQ++;
+        setPageMode();
+        removeStandaloneSource();
+        loadRepo();
+        return;
+      }
+      if (STATE.route.screen !== "file") {
+        SOURCE_REQ_SEQ++;
+        setPageMode();
+        removeStandaloneSource();
+        load();
+        return;
+      }
+      applySourceRouteToShell();
+    });
     function applyIgnoreWs() {
       const btn = $("#ignore-ws");
       if (btn)
@@ -1704,13 +3011,9 @@
         const isTest = TEST_RE.test(li.dataset.path || "");
         li.classList.toggle("hidden-by-tests", STATE.hideTests && isTest);
       });
-      document.querySelectorAll("#filelist .tree-dir").forEach((dir) => {
-        const childUl = dir.nextElementSibling;
-        if (!childUl)
-          return;
-        const anyVisible = !!childUl.querySelector(".tree-file:not(.hidden):not(.hidden-by-tests)");
-        dir.classList.toggle("hidden-by-tests", STATE.hideTests && !anyVisible);
-      });
+      updateTreeDirVisibility();
+      if (typeof applyViewedState === "function")
+        applyViewedState();
     }
     applyHideTests();
     $("#hide-tests").addEventListener("click", () => {