From 64c397e256b01a2e542e84529e947e237c07edd6 Mon Sep 17 00:00:00 2001
From: Joe Mou <dev@mou.fo>
Date: Tue, 27 Jan 2026 16:58:56 -0500
Subject: Split branch and path bread crumbs into separate section

---
 cgithub/views/_nav.eta | 18 ++++++++++++++++++
 1 file changed, 18 insertions(+)
 create mode 100644 cgithub/views/_nav.eta

(limited to 'cgithub/views/_nav.eta')

diff --git a/cgithub/views/_nav.eta b/cgithub/views/_nav.eta
new file mode 100644
index 0000000..338a6a6
--- /dev/null
+++ b/cgithub/views/_nav.eta
@@ -0,0 +1,18 @@
+<section>
+  <div class="branch"><img src="/static/icons/git-branch.svg" alt="branch" class="icon"> <%= it.branch %></div>
+  <% if (it.path && it.path !== "/") { %>
+    <a href="/<%= it.repo.owner %>/<%= it.repo.name %>/tree/<%= it.branch %>">(top)</a><%
+    const pathParts = it.path.split('/').filter(p => p);
+    let currentPath = '';
+    for (let i = 0; i < pathParts.length; i++) {
+      const part = pathParts[i];
+      currentPath += (currentPath ? '/' : '') + part;
+      const isLast = i === pathParts.length - 1;
+      if (isLast) {
+        %>/<%= part %><%= it.isTree ? "/" : "" %><%
+      } else {
+        %>/<a href="/<%= it.repo.owner %>/<%= it.repo.name %>/tree/<%= it.branch %>/<%= currentPath %>"><%= part %></a><%
+      }
+    } %>
+  <% } %>
+</section>
-- 
cgit v1.3.1


From 6240cf1c6b73b7ed34ff5816b53333382c229f5c Mon Sep 17 00:00:00 2001
From: Joe Mou <dev@mou.fo>
Date: Tue, 21 Jul 2026 17:46:58 -0400
Subject: Add async branch/tag dropdown and latest-commit bar

Adds two lazily-fetched UI pieces to match vanilla GitHub while keeping
initial page loads plain server-rendered HTML: a branch/tag selector
(native <dialog>, CSS anchor-positioned to its button, light-dismissed
via closedby="any") and a latest-commit bar above the file listing.
Both are populated by new /api/:owner/:repo/refs/:type and
/api/:owner/:repo/latest-commit/:branch/:path routes; the latter calls
GitHub's own /latest-commit JSON endpoint (the same one the React UI
uses) rather than scraping the full commit history page.
---
 cgithub/public/static/refs.js   |  60 ++++++++++++++
 cgithub/public/static/style.css |  62 ++++++++++++++
 cgithub/src/app.ts              |  46 +++++++++++
 cgithub/src/scraper.test.ts     |  41 ++++++++++
 cgithub/src/scraper.ts          | 177 ++++++++++++++++++++++++++++++++++++++--
 cgithub/views/_latestCommit.eta |  16 ++++
 cgithub/views/_nav.eta          |  11 ++-
 cgithub/views/_refs.eta         |  17 ++++
 cgithub/views/_tree.eta         |   3 +
 cgithub/views/layout.eta        |   1 +
 10 files changed, 426 insertions(+), 8 deletions(-)
 create mode 100644 cgithub/public/static/refs.js
 create mode 100644 cgithub/views/_latestCommit.eta
 create mode 100644 cgithub/views/_refs.eta

(limited to 'cgithub/views/_nav.eta')

diff --git a/cgithub/public/static/refs.js b/cgithub/public/static/refs.js
new file mode 100644
index 0000000..28b8373
--- /dev/null
+++ b/cgithub/public/static/refs.js
@@ -0,0 +1,60 @@
+// Progressive enhancement for two bits of data GitHub itself loads lazily:
+// the branch/tag dropdown and the latest-commit bar above a file listing.
+// Both degrade gracefully without JS: the button's command/commandfor still
+// opens the (empty) dialog natively; the commit placeholder just never fills
+// in.
+document.addEventListener("DOMContentLoaded", () => {
+  const dialog = document.querySelector(".ref-selector-menu");
+  if (dialog) {
+    const list = dialog.querySelector(".ref-selector-list");
+    const { owner, repo } = dialog.dataset;
+    const cache = {};
+
+    async function load(type) {
+      if (Object.prototype.hasOwnProperty.call(cache, type)) {
+        list.innerHTML = cache[type];
+        return;
+      }
+      list.textContent = "Loading…";
+      try {
+        const res = await fetch(`/api/${owner}/${repo}/refs/${type}`);
+        const html = res.ok ? await res.text() : "";
+        cache[type] = html || "Failed to load.";
+        list.innerHTML = cache[type];
+      } catch {
+        list.textContent = "Failed to load.";
+      }
+    }
+
+    let opened = false;
+    dialog.addEventListener("toggle", () => {
+      if (dialog.open && !opened) {
+        opened = true;
+        load("branches");
+      }
+    });
+
+    for (const tab of dialog.querySelectorAll("[data-ref-type]")) {
+      tab.addEventListener("click", () => {
+        for (const other of dialog.querySelectorAll("[data-ref-type]")) {
+          other.classList.toggle("active", other === tab);
+        }
+        load(tab.dataset.refType);
+      });
+    }
+  }
+
+  const commitPlaceholder = document.querySelector(".latest-commit-placeholder");
+  if (commitPlaceholder) {
+    fetch(commitPlaceholder.dataset.src)
+      .then((res) => (res.ok ? res.text() : ""))
+      .then((html) => {
+        if (html.trim()) {
+          commitPlaceholder.outerHTML = html;
+        } else {
+          commitPlaceholder.remove();
+        }
+      })
+      .catch(() => commitPlaceholder.remove());
+  }
+});
diff --git a/cgithub/public/static/style.css b/cgithub/public/static/style.css
index e698993..983cb86 100644
--- a/cgithub/public/static/style.css
+++ b/cgithub/public/static/style.css
@@ -160,6 +160,68 @@ body > footer {
   border: 1px solid var(--border-color);
 }
 
+.ref-selector-button {
+  anchor-name: --ref-selector-anchor;
+}
+
+.ref-selector-menu {
+  position: absolute;
+  position-anchor: --ref-selector-anchor;
+  position-area: bottom span-right;
+  width: 16rem;
+  max-height: 20rem;
+  overflow-y: auto;
+  overflow-wrap: break-word;
+  background: var(--body-background);
+  border: 1px solid var(--border-color);
+  padding: 0.5rem;
+
+  &::backdrop {
+    background: transparent;
+  }
+}
+
+.ref-selector-tabs {
+  display: flex;
+  margin-bottom: 0.5rem;
+
+  button {
+    flex: 1;
+    padding: 0.25rem;
+    cursor: pointer;
+    &.active {
+      font-weight: bold;
+      border-bottom: 2px solid var(--link-color);
+    }
+  }
+}
+
+.ref-selector-items {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+
+  li {
+    padding: 0.2rem 0;
+  }
+}
+
+.ref-selector-badge {
+  margin-left: 0.3rem;
+  font-size: 0.75rem;
+  opacity: 0.7;
+}
+
+.ref-selector-empty,
+.ref-selector-more {
+  padding: 0.2rem 0;
+  font-size: 0.85rem;
+}
+
+.latest-commit-placeholder {
+  opacity: 0.7;
+}
+
 .repo-info {
   .description {
     margin-bottom: .2rem;
diff --git a/cgithub/src/app.ts b/cgithub/src/app.ts
index 78b59ae..ca79b1f 100644
--- a/cgithub/src/app.ts
+++ b/cgithub/src/app.ts
@@ -5,8 +5,10 @@ import {
   getGitHubBlob,
   getGitHubCommits,
   getGitHubIssues,
+  getGitHubLatestCommit,
   getGitHubOwner,
   getGitHubPulls,
+  getGitHubRefs,
   getGitHubRelease,
   getGitHubReleases,
   getGitHubRepo,
@@ -44,6 +46,29 @@ export function createApp(eta: Eta) {
     return c.html(eta.render(template, data));
   }
 
+  // For fragments fetched asynchronously by client-side JS (see public/static/refs.js):
+  // errors render as an empty body rather than the full error.eta page.
+  async function tryRenderFragment<T extends object>(
+    c: Context,
+    template: string,
+    promise: Promise<T>,
+  ) {
+    let data: T;
+    try {
+      data = await promise;
+    } catch (e) {
+      const status =
+        e instanceof GitHubHTTPError
+          ? (e.status as StatusCode)
+          : e instanceof RedirectError
+            ? 404
+            : 500;
+      c.status(status);
+      return c.body(null);
+    }
+    return c.html(eta.render(template, data));
+  }
+
   app.get("/:owner", async (c) => {
     const { owner } = c.req.param();
     return tryRender(c, "owner.eta", getGitHubOwner(owner));
@@ -112,6 +137,27 @@ export function createApp(eta: Eta) {
     return tryRender(c, "commits.eta", getGitHubCommits(owner, repo, branch, path));
   });
 
+  // Internal endpoints fetched asynchronously by client-side JS, not meant to
+  // be visited directly. Keep the site's initial page loads plain server-
+  // rendered HTML while still surfacing data (branches/tags, latest commit)
+  // that would otherwise require an extra scrape on every page view.
+  app.get("/api/:owner/:repo/refs/:type", async (c) => {
+    const { owner, repo, type } = c.req.param();
+    if (type !== "branches" && type !== "tags") {
+      return c.notFound();
+    }
+    return tryRenderFragment(c, "_refs.eta", getGitHubRefs(owner, repo, type));
+  });
+
+  app.get("/api/:owner/:repo/latest-commit/:branch/:path{.*}?", async (c) => {
+    const { owner, repo, branch, path = "" } = c.req.param();
+    return tryRenderFragment(
+      c,
+      "_latestCommit.eta",
+      getGitHubLatestCommit(owner, repo, branch, path),
+    );
+  });
+
   app.get("/:owner/:repo/releases/tag/:tag", async (c) => {
     const { owner, repo, tag } = c.req.param();
     return tryRender(c, "release.eta", getGitHubRelease(owner, repo, tag));
diff --git a/cgithub/src/scraper.test.ts b/cgithub/src/scraper.test.ts
index f9b60e8..56f14b0 100644
--- a/cgithub/src/scraper.test.ts
+++ b/cgithub/src/scraper.test.ts
@@ -4,7 +4,9 @@ import {
   getGitHubBlob,
   getGitHubCommits,
   getGitHubIssues,
+  getGitHubLatestCommit,
   getGitHubPulls,
+  getGitHubRefs,
   getGitHubRelease,
   getGitHubReleases,
   getGitHubRepo,
@@ -205,6 +207,45 @@ describe("GitHub scraper", () => {
       assert.ok(firstRelease.bodyHtml.length > 0);
     });
 
+    it("should fetch latest commit for a path", async () => {
+      const data = await getGitHubLatestCommit("actions", "deploy-pages", "main", "src");
+
+      assert.strictEqual(data.repo.owner, "actions");
+      assert.strictEqual(data.repo.name, "deploy-pages");
+      assert.ok(data.commit);
+      assert.strictEqual(data.commit.oid.length, 40);
+      assert.ok(data.commit.shortMessageHtml.length > 0);
+      assert.ok(data.commit.date.length > 0);
+      assert.ok(data.commit.authors.length > 0);
+    });
+
+    it("should fetch branches", async () => {
+      const data = await getGitHubRefs("actions", "deploy-pages", "branches");
+
+      assert.strictEqual(data.repo.owner, "actions");
+      assert.strictEqual(data.repo.name, "deploy-pages");
+      assert.strictEqual(data.type, "branches");
+
+      assert.ok(data.refs.length > 0);
+      const main = data.refs.find((ref) => ref.name === "main");
+      assert.ok(main);
+      assert.strictEqual(main.isDefault, true);
+    });
+
+    it("should fetch tags", async () => {
+      const data = await getGitHubRefs("actions", "deploy-pages", "tags");
+
+      assert.strictEqual(data.repo.owner, "actions");
+      assert.strictEqual(data.repo.name, "deploy-pages");
+      assert.strictEqual(data.type, "tags");
+
+      assert.ok(data.refs.length > 0);
+      const tag = data.refs.find((ref) => ref.name === "v5.0.0");
+      assert.ok(tag);
+      assert.ok(tag.date?.length);
+      assert.strictEqual(data.hasMore, true);
+    });
+
     it("should fetch single release", async () => {
       const data = await getGitHubRelease("actions", "deploy-pages", "v4.0.5");
 
diff --git a/cgithub/src/scraper.ts b/cgithub/src/scraper.ts
index 53f2bb1..39ad2cd 100644
--- a/cgithub/src/scraper.ts
+++ b/cgithub/src/scraper.ts
@@ -70,7 +70,7 @@ interface IssueIndexPageQuery {
 
 type StylingDirective = [number, number, string];
 
-interface Commit {
+export interface Commit {
   oid: string;
   url: string;
   authoredDate: string;
@@ -270,6 +270,34 @@ export interface GitHubCommits extends GitHubNav {
   commitGroups: CommitGroup[];
 }
 
+export interface LatestCommit {
+  oid: string;
+  date: string;
+  shortMessageHtml: string;
+  authors: {
+    login: string;
+    displayName: string;
+    avatarUrl: string;
+  }[];
+}
+
+export interface GitHubLatestCommit extends GitHubCommon {
+  commit: LatestCommit;
+}
+
+export interface Ref {
+  name: string;
+  isDefault?: boolean;
+  date?: string;
+  authorLogin?: string;
+}
+
+export interface GitHubRefs extends GitHubCommon {
+  type: "branches" | "tags";
+  refs: Ref[];
+  hasMore: boolean;
+}
+
 interface Release {
   tagName: string;
   title: string;
@@ -325,13 +353,13 @@ export interface GitHubOwner {
   repos: OwnerRepo[];
 }
 
-async function fetchGitHubPage(path: string): Promise<string> {
+async function fetchGitHubResponse(path: string, accept: string): Promise<Response> {
   // GitHub throttles/blocks requests without realistic browser headers.
   // These headers make the request appear as a standard browser visit.
   const headers = {
     "User-Agent":
       "Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/131.0.0.0 Safari/537.36",
-    Accept: "text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,*/*;q=0.8",
+    Accept: accept,
     "Accept-Language": "en-US,en;q=0.5",
   };
   const response = await fetch(`https://github.com/${path}`, { headers, redirect: "manual" });
@@ -345,10 +373,25 @@ async function fetchGitHubPage(path: string): Promise<string> {
     }
   }
   if (!response.ok) throw new GitHubHTTPError(response.status, response.statusText);
+  return response;
+}
+
+async function fetchGitHubPage(path: string): Promise<string> {
+  const response = await fetchGitHubResponse(
+    path,
+    "text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,*/*;q=0.8",
+  );
   return response.text();
 }
 
-function parsePayload(html: string): AppPayload | null {
+// Some routes (e.g. latest-commit) are the same endpoints the React UI itself
+// calls to lazily fill in data; they 406 without an explicit JSON Accept.
+async function fetchGitHubJson<T>(path: string): Promise<T> {
+  const response = await fetchGitHubResponse(path, "application/json");
+  return (await response.json()) as T;
+}
+
+function parseEmbeddedPayload<T>(html: string): T | null {
   const regex = new RegExp(
     `<script type="application/json" data-target="react-app.embeddedData">([^<]+)</script>`,
     "g",
@@ -367,6 +410,10 @@ function parsePayload(html: string): AppPayload | null {
   return null;
 }
 
+function parsePayload(html: string): AppPayload | null {
+  return parseEmbeddedPayload<AppPayload>(html);
+}
+
 function parseRepoInfo(html: string): RepoInfo {
   const document = parseDocument(html);
 
@@ -639,6 +686,121 @@ export async function getGitHubCommits(
   };
 }
 
+interface LatestCommitPayload {
+  oid: string;
+  date: string;
+  shortMessageHtmlLink: string;
+  authors: {
+    login: string;
+    displayName: string;
+    avatarUrl: string;
+  }[];
+}
+
+// This is the same endpoint the React UI itself calls to lazily fill in the
+// commit bar above a file listing, rather than the much heavier /commits
+// history page: it returns just the single latest commit as JSON.
+export async function getGitHubLatestCommit(
+  owner: string,
+  repo: string,
+  branch: string,
+  path: string,
+): Promise<GitHubLatestCommit> {
+  const urlPath = path
+    ? `${owner}/${repo}/latest-commit/${branch}/${path}`
+    : `${owner}/${repo}/latest-commit/${branch}`;
+  const payload = await fetchGitHubJson<LatestCommitPayload>(urlPath);
+
+  return {
+    repo: { owner, name: repo },
+    commit: {
+      oid: payload.oid,
+      date: payload.date,
+      shortMessageHtml: payload.shortMessageHtmlLink,
+      authors: payload.authors,
+    },
+  };
+}
+
+interface BranchRefEntry {
+  name: string;
+  isDefault: boolean;
+  authoredDate?: string;
+  author?: { login: string };
+}
+
+interface BranchesPayload {
+  branches: {
+    default?: BranchRefEntry;
+    yours?: BranchRefEntry[];
+    active?: BranchRefEntry[];
+    stale?: BranchRefEntry[];
+  };
+  hasMore?: Record<string, boolean>;
+}
+
+async function getGitHubBranchRefs(owner: string, repo: string): Promise<GitHubRefs> {
+  const html = await fetchGitHubPage(`${owner}/${repo}/branches`);
+  const payload = parseEmbeddedPayload<BranchesPayload>(html);
+
+  if (payload?.branches === undefined) {
+    throw new Error("Could not find branches data in embedded JSON");
+  }
+
+  const { default: defaultBranch, yours = [], active = [], stale = [] } = payload.branches;
+  const entries = [...(defaultBranch ? [defaultBranch] : []), ...yours, ...active, ...stale];
+
+  const seen = new Set<string>();
+  const refs: Ref[] = [];
+  for (const entry of entries) {
+    if (seen.has(entry.name)) continue;
+    seen.add(entry.name);
+    refs.push({
+      name: entry.name,
+      isDefault: entry.isDefault || undefined,
+      date: entry.authoredDate,
+      authorLogin: entry.author?.login,
+    });
+  }
+
+  const hasMore = Object.values(payload.hasMore ?? {}).some(Boolean);
+
+  return { repo: { owner, name: repo }, type: "branches", refs, hasMore };
+}
+
+async function getGitHubTagRefs(owner: string, repo: string): Promise<GitHubRefs> {
+  const html = await fetchGitHubPage(`${owner}/${repo}/tags`);
+  const document = parseDocument(html);
+
+  const refs: Ref[] = [];
+  for (const row of cssSelect.selectAll(".Box-row", document) as unknown as Element[]) {
+    const nameElem = cssSelect.selectOne("h2 a", row);
+    if (!nameElem) continue;
+    const name = textContent(nameElem).trim();
+    if (!name) continue;
+
+    // The row has two <relative-time> elements: a release/tag creation
+    // timestamp, then the tagged commit's authored date. We want the latter.
+    const timeElems = cssSelect.selectAll("relative-time", row);
+    const timeElem = timeElems[1] as Element | undefined;
+    const date = timeElem ? getAttributeValue(timeElem, "datetime") || undefined : undefined;
+
+    refs.push({ name, date });
+  }
+
+  const hasMore = cssSelect.selectOne(".pagination a", document) !== null;
+
+  return { repo: { owner, name: repo }, type: "tags", refs, hasMore };
+}
+
+export async function getGitHubRefs(
+  owner: string,
+  repo: string,
+  type: "branches" | "tags",
+): Promise<GitHubRefs> {
+  return type === "branches" ? getGitHubBranchRefs(owner, repo) : getGitHubTagRefs(owner, repo);
+}
+
 function parseRelease(section: Element, title: string): Release {
   // Extract tag name from link
   const tagLink = cssSelect.selectOne('a[href*="/tree/"]', section);
@@ -867,9 +1029,10 @@ function parseUser(document: AnyNode, login: string): GitHubOwner {
 }
 
 function parseOrganization(document: AnyNode, owner: string): GitHubOwner {
-  const avatarElem = cssSelect.selectOne(".orghead img[itemprop='image']", document) as
-    | Element
-    | null;
+  const avatarElem = cssSelect.selectOne(
+    ".orghead img[itemprop='image']",
+    document,
+  ) as Element | null;
   const avatarUrl = avatarElem ? getAttributeValue(avatarElem, "src") || null : null;
   // The login only appears in the avatar's "@login" alt text.
   const alt = avatarElem ? getAttributeValue(avatarElem, "alt") : undefined;
diff --git a/cgithub/views/_latestCommit.eta b/cgithub/views/_latestCommit.eta
new file mode 100644
index 0000000..18d22a1
--- /dev/null
+++ b/cgithub/views/_latestCommit.eta
@@ -0,0 +1,16 @@
+<div class="commit box">
+  <div>
+    <div>
+      <%~ it.commit.shortMessageHtml %>
+    </div>
+    <div class="commit-author">
+      <% for (const author of it.commit.authors) { %>
+        <a href="/<%= author.login %>"><%= author.login %></a>
+      <% } %>
+      <time class="timestamp" title="<%= it.commit.date %>"><%= it.commit.date.split("T")[0] %></time>
+    </div>
+  </div>
+  <div class="commit-sha">
+    <code><%= it.commit.oid.substring(0, 7) %></code>
+  </div>
+</div>
diff --git a/cgithub/views/_nav.eta b/cgithub/views/_nav.eta
index 338a6a6..e3fbdcf 100644
--- a/cgithub/views/_nav.eta
+++ b/cgithub/views/_nav.eta
@@ -1,5 +1,14 @@
 <section>
-  <div class="branch"><img src="/static/icons/git-branch.svg" alt="branch" class="icon"> <%= it.branch %></div>
+  <button type="button" class="ref-selector-button branch" command="show-modal" commandfor="ref-selector-menu">
+    <img src="/static/icons/git-branch.svg" alt="branch" class="icon"> <%= it.branch %> ▾
+  </button>
+  <dialog class="ref-selector-menu" id="ref-selector-menu" closedby="any" data-owner="<%= it.repo.owner %>" data-repo="<%= it.repo.name %>">
+    <div class="ref-selector-tabs">
+      <button type="button" class="active" data-ref-type="branches">Branches</button>
+      <button type="button" data-ref-type="tags">Tags</button>
+    </div>
+    <div class="ref-selector-list">Loading…</div>
+  </dialog>
   <% if (it.path && it.path !== "/") { %>
     <a href="/<%= it.repo.owner %>/<%= it.repo.name %>/tree/<%= it.branch %>">(top)</a><%
     const pathParts = it.path.split('/').filter(p => p);
diff --git a/cgithub/views/_refs.eta b/cgithub/views/_refs.eta
new file mode 100644
index 0000000..2450c4b
--- /dev/null
+++ b/cgithub/views/_refs.eta
@@ -0,0 +1,17 @@
+<% if (it.refs.length === 0) { %>
+  <div class="ref-selector-empty">No <%= it.type %> found.</div>
+<% } else { %>
+  <ul class="ref-selector-items">
+    <% for (const ref of it.refs) { %>
+      <li>
+        <a href="/<%= it.repo.owner %>/<%= it.repo.name %>/tree/<%= ref.name %>"><%= ref.name %></a>
+        <% if (ref.isDefault) { %><span class="ref-selector-badge">default</span><% } %>
+      </li>
+    <% } %>
+  </ul>
+<% } %>
+<% if (it.hasMore) { %>
+  <div class="ref-selector-more">
+    <a href="/<%= it.repo.owner %>/<%= it.repo.name %>/<%= it.type %>">View all <%= it.type %></a>
+  </div>
+<% } %>
diff --git a/cgithub/views/_tree.eta b/cgithub/views/_tree.eta
index ed6eee9..a0ecfab 100644
--- a/cgithub/views/_tree.eta
+++ b/cgithub/views/_tree.eta
@@ -1,5 +1,8 @@
 <%~ include("./_nav.eta", {...it, isTree: true}) %>
 
+<% const commitPath = it.path && it.path !== "/" ? it.path : ""; %>
+<div class="latest-commit-placeholder box" data-src="/api/<%= it.repo.owner %>/<%= it.repo.name %>/latest-commit/<%= it.branch %>/<%= commitPath %>">Loading latest commit…</div>
+
 <table>
   <% for (const item of it.items) { %>
     <tr>
diff --git a/cgithub/views/layout.eta b/cgithub/views/layout.eta
index dd523d1..a80bd1d 100644
--- a/cgithub/views/layout.eta
+++ b/cgithub/views/layout.eta
@@ -5,6 +5,7 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title><%= it.repo.owner %>/<%= it.repo.name %> - <%= it.path || '/' %></title>
   <link rel="stylesheet" href="/static/style.css">
+  <script src="/static/refs.js" defer></script>
 </head>
 <body>
   <div class="box">
-- 
cgit v1.3.1


From 5526d976f645def4caae9fbd2c1d75349029764e Mon Sep 17 00:00:00 2001
From: Joe Mou <dev@mou.fo>
Date: Tue, 11 Aug 2026 08:25:08 -0400
Subject: Abbreviate commit hashes in branch picker

---
 cgithub/views/_nav.eta | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

(limited to 'cgithub/views/_nav.eta')

diff --git a/cgithub/views/_nav.eta b/cgithub/views/_nav.eta
index e3fbdcf..eb7ed42 100644
--- a/cgithub/views/_nav.eta
+++ b/cgithub/views/_nav.eta
@@ -1,6 +1,10 @@
 <section>
+  <%
+  const isCommitHash = /^[0-9a-f]{40}$/.test(it.branch);
+  const refLabel = isCommitHash ? it.branch.slice(0, 7) : it.branch;
+  %>
   <button type="button" class="ref-selector-button branch" command="show-modal" commandfor="ref-selector-menu">
-    <img src="/static/icons/git-branch.svg" alt="branch" class="icon"> <%= it.branch %> ▾
+    <img src="/static/icons/git-branch.svg" alt="branch" class="icon"> <%= refLabel %> ▾
   </button>
   <dialog class="ref-selector-menu" id="ref-selector-menu" closedby="any" data-owner="<%= it.repo.owner %>" data-repo="<%= it.repo.name %>">
     <div class="ref-selector-tabs">
-- 
cgit v1.3.1


From 866f99c414cb3d102483ce21c68a0e62b394baaa Mon Sep 17 00:00:00 2001
From: Joe Mou <dev@mou.fo>
Date: Tue, 11 Aug 2026 13:32:44 -0400
Subject: Keep the ref picker on the current view and path

---
 cgithub/public/static/refs.js |  6 +++--
 cgithub/src/app.test.ts       | 52 ++++++++++++++++++++++++++++++++++++++++++-
 cgithub/src/app.ts            | 12 +++++++---
 cgithub/views/_nav.eta        |  4 ++--
 cgithub/views/_refs.eta       |  6 ++++-
 cgithub/views/_tree.eta       |  2 +-
 cgithub/views/blob.eta        |  2 +-
 cgithub/views/commits.eta     |  2 +-
 8 files changed, 74 insertions(+), 12 deletions(-)

(limited to 'cgithub/views/_nav.eta')

diff --git a/cgithub/public/static/refs.js b/cgithub/public/static/refs.js
index ffff505..f3e07e8 100644
--- a/cgithub/public/static/refs.js
+++ b/cgithub/public/static/refs.js
@@ -7,7 +7,9 @@ document.addEventListener("DOMContentLoaded", () => {
   const dialog = document.querySelector(".ref-selector-menu");
   if (dialog) {
     const list = dialog.querySelector(".ref-selector-list");
-    const { owner, repo } = dialog.dataset;
+    // The view and path let the picker link to the same place on another ref
+    // rather than to the repository root.
+    const { owner, repo, view, path = "" } = dialog.dataset;
     const cache = {};
 
     async function load(type) {
@@ -17,7 +19,7 @@ document.addEventListener("DOMContentLoaded", () => {
       }
       list.textContent = "Loading…";
       try {
-        const res = await fetch(`/api/${owner}/${repo}/refs/${type}`);
+        const res = await fetch(`/api/${owner}/${repo}/refs/${type}/${view}/${path}`);
         const html = res.ok ? await res.text() : "";
         cache[type] = html || "Failed to load.";
         list.innerHTML = cache[type];
diff --git a/cgithub/src/app.test.ts b/cgithub/src/app.test.ts
index 498d8a6..6544f03 100644
--- a/cgithub/src/app.test.ts
+++ b/cgithub/src/app.test.ts
@@ -8,6 +8,56 @@ import { createApp } from "./app.ts";
 const eta = new Eta({ views: path.join(import.meta.dirname, "..", "views") });
 const app = createApp(eta);
 
+describe("branch picker", () => {
+  const repo = { owner: "actions", name: "deploy-pages" };
+  const refs = [{ name: "main", isDefault: true }, { name: "v4" }];
+
+  it("should keep the current view and path", () => {
+    const blob = eta.render("_refs.eta", {
+      repo,
+      refs,
+      type: "branches",
+      view: "blob",
+      path: "src/main.ts",
+    });
+    const tree = eta.render("_refs.eta", {
+      repo,
+      refs,
+      type: "branches",
+      view: "tree",
+      path: "src",
+    });
+
+    assert.match(blob, /href="\/actions\/deploy-pages\/blob\/main\/src\/main.ts"/);
+    assert.match(blob, /href="\/actions\/deploy-pages\/blob\/v4\/src\/main.ts"/);
+    assert.match(tree, /href="\/actions\/deploy-pages\/tree\/v4\/src"/);
+  });
+
+  it("should link to the root tree without a path", () => {
+    const html = eta.render("_refs.eta", { repo, refs, type: "branches", view: "tree", path: "" });
+
+    assert.match(html, /href="\/actions\/deploy-pages\/tree\/main"/);
+  });
+
+  it("should not build ref links for views it does not serve", async () => {
+    const res = await app.request("http://cgithub.example/api/a/b/refs/branches/raw/README.md");
+
+    assert.strictEqual(res.status, 404);
+  });
+
+  it("should tell the refs endpoint where the picker was opened", () => {
+    const nav = { repo, branch: "main", path: "src" };
+
+    const blob = eta.render("_nav.eta", { ...nav, view: "blob", path: "src/main.ts" });
+    assert.match(blob, /data-view="blob" data-path="src\/main.ts"/);
+    assert.match(
+      eta.render("_nav.eta", { ...nav, view: "tree" }),
+      /data-view="tree" data-path="src"/,
+    );
+    assert.doesNotMatch(eta.render("_nav.eta", { ...nav, view: "tree", path: "" }), /data-path=/);
+  });
+});
+
 describe("redirects to GitHub", () => {
   // An HTTP redirect would be caught by the extension's declarativeNetRequest
   // rules and bounced straight back here.
@@ -21,7 +71,7 @@ describe("redirects to GitHub", () => {
     const body = await res.text();
     assert.match(
       body,
-      /<meta http-equiv="refresh" content="2; url=https:\/\/github.com\/a\/b\/c\?x=1">/,
+      /<meta http-equiv="refresh" content="1; url=https:\/\/github.com\/a\/b\/c\?x=1">/,
     );
     assert.doesNotMatch(body, /<script/);
   });
diff --git a/cgithub/src/app.ts b/cgithub/src/app.ts
index 9a7ee8e..81e47fd 100644
--- a/cgithub/src/app.ts
+++ b/cgithub/src/app.ts
@@ -155,12 +155,18 @@ export function createApp(eta: Eta) {
   // be visited directly. Keep the site's initial page loads plain server-
   // rendered HTML while still surfacing data (branches/tags, latest commit)
   // that would otherwise require an extra scrape on every page view.
-  app.get("/api/:owner/:repo/refs/:type", async (c) => {
-    const { owner, repo, type } = c.req.param();
+  // The view and path are where the picker was opened, so each ref can link to
+  // the same page on another ref.
+  app.get("/api/:owner/:repo/refs/:type/:view/:path{.*}?", async (c) => {
+    const { owner, repo, type, view, path = "" } = c.req.param();
     if (type !== "branches" && type !== "tags") {
       return c.notFound();
     }
-    return tryRenderFragment(c, "_refs.eta", getGitHubRefs(owner, repo, type));
+    if (view !== "tree" && view !== "blob" && view !== "commits") {
+      return c.notFound();
+    }
+    const refs = getGitHubRefs(owner, repo, type).then((data) => ({ ...data, view, path }));
+    return tryRenderFragment(c, "_refs.eta", refs);
   });
 
   app.get("/api/:owner/:repo/latest-commit/:branch/:path{.*}?", async (c) => {
diff --git a/cgithub/views/_nav.eta b/cgithub/views/_nav.eta
index eb7ed42..a20fbbc 100644
--- a/cgithub/views/_nav.eta
+++ b/cgithub/views/_nav.eta
@@ -6,7 +6,7 @@
   <button type="button" class="ref-selector-button branch" command="show-modal" commandfor="ref-selector-menu">
     <img src="/static/icons/git-branch.svg" alt="branch" class="icon"> <%= refLabel %> ▾
   </button>
-  <dialog class="ref-selector-menu" id="ref-selector-menu" closedby="any" data-owner="<%= it.repo.owner %>" data-repo="<%= it.repo.name %>">
+  <dialog class="ref-selector-menu" id="ref-selector-menu" closedby="any" data-owner="<%= it.repo.owner %>" data-repo="<%= it.repo.name %>" data-view="<%= it.view %>"<% if (it.path && it.path !== "/") { %> data-path="<%= it.path %>"<% } %>>
     <div class="ref-selector-tabs">
       <button type="button" class="active" data-ref-type="branches">Branches</button>
       <button type="button" data-ref-type="tags">Tags</button>
@@ -22,7 +22,7 @@
       currentPath += (currentPath ? '/' : '') + part;
       const isLast = i === pathParts.length - 1;
       if (isLast) {
-        %>/<%= part %><%= it.isTree ? "/" : "" %><%
+        %>/<%= part %><%= it.view === "tree" ? "/" : "" %><%
       } else {
         %>/<a href="/<%= it.repo.owner %>/<%= it.repo.name %>/tree/<%= it.branch %>/<%= currentPath %>"><%= part %></a><%
       }
diff --git a/cgithub/views/_refs.eta b/cgithub/views/_refs.eta
index 2450c4b..9d951cc 100644
--- a/cgithub/views/_refs.eta
+++ b/cgithub/views/_refs.eta
@@ -1,10 +1,14 @@
+<%
+const linkPrefix = `/${it.repo.owner}/${it.repo.name}/${it.view}/`;
+const linkSuffix = it.path ? `/${it.path}` : "";
+%>
 <% if (it.refs.length === 0) { %>
   <div class="ref-selector-empty">No <%= it.type %> found.</div>
 <% } else { %>
   <ul class="ref-selector-items">
     <% for (const ref of it.refs) { %>
       <li>
-        <a href="/<%= it.repo.owner %>/<%= it.repo.name %>/tree/<%= ref.name %>"><%= ref.name %></a>
+        <a href="<%= linkPrefix %><%= ref.name %><%= linkSuffix %>"><%= ref.name %></a>
         <% if (ref.isDefault) { %><span class="ref-selector-badge">default</span><% } %>
       </li>
     <% } %>
diff --git a/cgithub/views/_tree.eta b/cgithub/views/_tree.eta
index fc7707b..a3c943d 100644
--- a/cgithub/views/_tree.eta
+++ b/cgithub/views/_tree.eta
@@ -1,4 +1,4 @@
-<%~ include("./_nav.eta", {...it, isTree: true}) %>
+<%~ include("./_nav.eta", {...it, view: "tree"}) %>
 
 <% const commitPath = it.path && it.path !== "/" ? it.path : ""; %>
 <div class="placeholder commit box" data-src="/api/<%= it.repo.owner %>/<%= it.repo.name %>/latest-commit/<%= it.branch %>/<%= commitPath %>">
diff --git a/cgithub/views/blob.eta b/cgithub/views/blob.eta
index 50f92a9..ed1e84b 100644
--- a/cgithub/views/blob.eta
+++ b/cgithub/views/blob.eta
@@ -1,6 +1,6 @@
 <% layout("./layout.eta"); it.searchType = "code" %>
 
-<%~ include("./_nav.eta", it) %>
+<%~ include("./_nav.eta", {...it, view: "blob"}) %>
 
 <div>
   <% if (it.language) { %>
diff --git a/cgithub/views/commits.eta b/cgithub/views/commits.eta
index 2ddcba3..5cf0beb 100644
--- a/cgithub/views/commits.eta
+++ b/cgithub/views/commits.eta
@@ -1,6 +1,6 @@
 <% layout("./layout.eta") %>
 
-<%~ include("./_nav.eta", {...it, isTree: false}) %>
+<%~ include("./_nav.eta", {...it, view: "commits"}) %>
 
 <% for (const group of it.commitGroups) { %>
   <h3><%= group.title %></h3>
-- 
cgit v1.3.1


From a61a96c6d72d4297b2539f4033fbfbd0a3d178ab Mon Sep 17 00:00:00 2001
From: Joe Mou <dev@mou.fo>
Date: Thu, 3 Sep 2026 01:37:35 -0400
Subject: Link blobs to their history and back

Nothing in a commits payload says whether the path it lists is a file or
a directory: currentBlobPath, despite the name, is only the path filter,
and is set for a directory just the same. GitHub's own UI cannot tell
either, and points its browse button at /blob/<oid>/<path> so that the
redirect resolves a file to its blob. We do the same, and the blob route
already turns that redirect into one of our own tree URLs.

Breadcrumbs now stay in the view they were clicked from, so walking up
from a history lands in the history of each parent directory rather than
in its listing. The last crumb remains the page you are already on.

A path with no commits now says so rather than rendering an empty page.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01R7pRKdmTvNDgT4ZXrwkbH8
---
 cgithub/CLAUDE.md           |  1 +
 cgithub/src/app.test.ts     | 56 +++++++++++++++++++++++++++++++++++++++++++++
 cgithub/src/scraper.test.ts | 33 ++++++++++++++++++++++++++
 cgithub/views/_nav.eta      |  7 ++++--
 cgithub/views/blob.eta      |  3 +++
 cgithub/views/commits.eta   |  8 +++++++
 6 files changed, 106 insertions(+), 2 deletions(-)

(limited to 'cgithub/views/_nav.eta')

diff --git a/cgithub/CLAUDE.md b/cgithub/CLAUDE.md
index c0c211d..3f0cd61 100644
--- a/cgithub/CLAUDE.md
+++ b/cgithub/CLAUDE.md
@@ -33,6 +33,7 @@ pnpm test
 - `GET /:owner/:repo` - Repository info with directory listing
 - `GET /:owner/:repo/tree/:branch/:path*` - Directory listing
 - `GET /:owner/:repo/blob/:branch/:path` - File content view
+- `GET /:owner/:repo/commits/:branch/:path*` - Commit history of the repository, a directory, or a file
 - `GET /:owner/:repo/wiki` - Wiki home page
 - `GET /:owner/:repo/wiki/:page` - Wiki page (also `/:page/:oid` for a revision)
 - `GET /:owner/:repo/wiki/_pages` - Wiki page index
diff --git a/cgithub/src/app.test.ts b/cgithub/src/app.test.ts
index 265465e..8519d91 100644
--- a/cgithub/src/app.test.ts
+++ b/cgithub/src/app.test.ts
@@ -155,6 +155,62 @@ describe("blob view", () => {
   });
 });
 
+describe("commit history", () => {
+  const repo = { owner: "actions", name: "deploy-pages" };
+  const oid = "b39c421b98f49d83ae50ec502c3ddfc3bf28f2c6";
+  const commitGroups = [
+    {
+      title: "Apr 18, 2023",
+      commits: [
+        { oid, shortMessage: "Remove deprecated input parameters", authors: [{ login: "jmg" }] },
+      ],
+    },
+  ];
+  const history = { repo, branch: "main", path: "src/index.js", commitGroups };
+
+  // A commits payload never says whether its path is a file or a directory, so
+  // every link goes to the tree and GitHub redirects a file's to its blob.
+  it("should browse a file's history at each of its commits", () => {
+    const html = eta.render("commits.eta", history);
+
+    assert.match(html, new RegExp(`href="/actions/deploy-pages/blob/${oid}/src/index.js">Browse`));
+  });
+
+  it("should browse a directory's history the same way", () => {
+    const html = eta.render("commits.eta", { ...history, path: "src" });
+
+    assert.match(html, new RegExp(`href="/actions/deploy-pages/blob/${oid}/src">Browse`));
+  });
+
+  it("should browse the whole repository when the history has no path", () => {
+    const html = eta.render("commits.eta", { ...history, path: "" });
+
+    assert.match(html, new RegExp(`href="/actions/deploy-pages/blob/${oid}">Browse`));
+  });
+
+  // Walking up from a history stays in the history, and its last crumb is the
+  // page you are already on, just as a blob or a tree ends on itself.
+  it("should walk up through the history of each parent directory", () => {
+    const html = eta.render("commits.eta", { ...history, path: "src/lib/index.js" });
+
+    assert.match(html, /href="\/actions\/deploy-pages\/commits\/main">\(top\)</);
+    assert.match(html, /href="\/actions\/deploy-pages\/commits\/main\/src">src</);
+    assert.match(html, /href="\/actions\/deploy-pages\/commits\/main\/src\/lib">lib<\/a>\/index\.js/);
+  });
+
+  it("should say so when a path has no history", () => {
+    const html = eta.render("commits.eta", { ...history, commitGroups: [] });
+
+    assert.match(html, /No commits found\./);
+  });
+
+  it("should link a blob to its own history", () => {
+    const html = eta.render("blob.eta", { ...history, textLines: ["x"] });
+
+    assert.match(html, /href="\/actions\/deploy-pages\/commits\/main\/src\/index.js">History/);
+  });
+});
+
 describe("embedded files", () => {
   function stubGitHub(t: TestContext, body: string, contentType: string, status = 200) {
     t.mock.method(
diff --git a/cgithub/src/scraper.test.ts b/cgithub/src/scraper.test.ts
index 2690f71..f6be2b6 100644
--- a/cgithub/src/scraper.test.ts
+++ b/cgithub/src/scraper.test.ts
@@ -195,6 +195,39 @@ describe("GitHub scraper", () => {
       assert.ok(data.commitGroups.length > 0);
     });
 
+    // GitHub serves a file's history from the same route as a directory's.
+    it("should fetch the history of a blob", async () => {
+      const data = await getGitHubCommits("actions", "deploy-pages", "main", "src/index.js");
+
+      assert.strictEqual(data.path, "src/index.js");
+
+      assert.ok(data.commitGroups.length > 0);
+      const commit = data.commitGroups[0].commits[0];
+      assert.strictEqual(commit.oid.length, 40);
+      assert.ok(commit.shortMessage.length > 0);
+    });
+
+    // What a history page's "Browse" link resolves to: the file as it stood at
+    // one of its commits. Nothing in a commits payload says whether the path is
+    // a file or a directory, so those links all point at the tree and rely on
+    // GitHub redirecting a file's to its blob.
+    it("should redirect a blob browsed at a commit to its blob view", async () => {
+      const oid = "b39c421b98f49d83ae50ec502c3ddfc3bf28f2c6";
+
+      await assert.rejects(getGitHubTree("actions", "deploy-pages", oid, "src/index.js"), (err) => {
+        assert(err instanceof RedirectError, "error should be a RedirectError");
+        assert.strictEqual(err.location, `/actions/deploy-pages/blob/${oid}/src/index.js`);
+        return true;
+      });
+
+      const data = await getGitHubBlob("actions", "deploy-pages", oid, "src/index.js");
+
+      assert.strictEqual(data.branch, oid);
+      assert.strictEqual(data.path, "src/index.js");
+      assert.strictEqual(data.size, "1.37 KB / 51 lines / 40 loc");
+      assert.strictEqual(data.textLines?.length, 51);
+    });
+
     it("should fetch releases", async () => {
       const data = await getGitHubReleases("actions", "deploy-pages");
 
diff --git a/cgithub/views/_nav.eta b/cgithub/views/_nav.eta
index a20fbbc..a20741b 100644
--- a/cgithub/views/_nav.eta
+++ b/cgithub/views/_nav.eta
@@ -14,7 +14,10 @@
     <div class="ref-selector-list">Loading…</div>
   </dialog>
   <% if (it.path && it.path !== "/") { %>
-    <a href="/<%= it.repo.owner %>/<%= it.repo.name %>/tree/<%= it.branch %>">(top)</a><%
+    <%
+    const crumbHrefBase = `/${it.repo.owner}/${it.repo.name}/${it.view === "blob" ? "tree" : it.view}/${it.branch}`;
+    %>
+    <a href="<%= crumbHrefBase %>">(top)</a><%
     const pathParts = it.path.split('/').filter(p => p);
     let currentPath = '';
     for (let i = 0; i < pathParts.length; i++) {
@@ -24,7 +27,7 @@
       if (isLast) {
         %>/<%= part %><%= it.view === "tree" ? "/" : "" %><%
       } else {
-        %>/<a href="/<%= it.repo.owner %>/<%= it.repo.name %>/tree/<%= it.branch %>/<%= currentPath %>"><%= part %></a><%
+        %>/<a href="<%= crumbHrefBase %>/<%= currentPath %>"><%= part %></a><%
       }
     } %>
   <% } %>
diff --git a/cgithub/views/blob.eta b/cgithub/views/blob.eta
index be9a57e..2014b14 100644
--- a/cgithub/views/blob.eta
+++ b/cgithub/views/blob.eta
@@ -7,6 +7,9 @@
     <div>language: <%= it.language %></div>
   <% } %>
   <div><%= it.size %></div>
+  <div>
+    <a href="/<%= it.repo.owner %>/<%= it.repo.name %>/commits/<%= it.branch %>/<%= it.path %>">History</a>
+  </div>
   <div>
     <a href="/<%= it.repo.owner %>/<%= it.repo.name %>/raw/<%= it.branch %>/<%= it.path %>">View raw</a>
   </div>
diff --git a/cgithub/views/commits.eta b/cgithub/views/commits.eta
index 5cf0beb..c29693d 100644
--- a/cgithub/views/commits.eta
+++ b/cgithub/views/commits.eta
@@ -2,6 +2,12 @@
 
 <%~ include("./_nav.eta", {...it, view: "commits"}) %>
 
+<% const pathSuffix = it.path && it.path !== "/" ? "/" + it.path : "" %>
+
+<% if (it.commitGroups.length === 0) { %>
+  <div class="box">No commits found.</div>
+<% } %>
+
 <% for (const group of it.commitGroups) { %>
   <h3><%= group.title %></h3>
   <% for (const commit of group.commits) { %>
@@ -19,6 +25,8 @@
       </div>
       <div class="commit-sha">
         <code><%= commit.oid.substring(0, 7) %></code>
+        <% /* Like GitHub, blindly link to blob and redirect for trees */ %>
+        <a href="/<%= it.repo.owner %>/<%= it.repo.name %>/blob/<%= commit.oid %><%= pathSuffix %>">Browse</a>
       </div>
     </div>
   <% } %>
-- 
cgit v1.3.1