From fd401a46bb2f6a237a6516d9fef0a681e25631ae Mon Sep 17 00:00:00 2001
From: Chad Miller <chadtmiller15@gmail.com>
Date: Fri, 21 Aug 2026 10:07:32 -0700
Subject: [PATCH 01/13] fix(account-ui): the section rail scrolls

The rail laid its sections out in a column that grew past the viewport, and a
window shorter than the list cut off everything below the fold. The nav is now
the scrolling region: `min-h-0` lets it shrink under `flex-1`, which a flex
child's `min-height: auto` otherwise prevents, and `overflow-y-auto` gives the
links their own scrollbar. The account header and the sign-out take `shrink-0`
so they hold their place, and a rule above the sign-out marks where the
scrolling list ends.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
---
 .changeset/sidebar-scrolls.md                            | 7 +++++++
 packages/account-ui/src/components/organisms/sidebar.jsx | 6 +++---
 2 files changed, 10 insertions(+), 3 deletions(-)
 create mode 100644 .changeset/sidebar-scrolls.md

diff --git a/.changeset/sidebar-scrolls.md b/.changeset/sidebar-scrolls.md
new file mode 100644
index 0000000..43ff7a9
--- /dev/null
+++ b/.changeset/sidebar-scrolls.md
@@ -0,0 +1,7 @@
+---
+'@pdsjs/core': patch
+---
+
+The account rail scrolls its section list. A short window no longer cuts off
+the sections below the fold: the links scroll on their own while the account
+header and the sign-out hold their place at the top and bottom.
diff --git a/packages/account-ui/src/components/organisms/sidebar.jsx b/packages/account-ui/src/components/organisms/sidebar.jsx
index 4e3c1bb..c71aa8a 100644
--- a/packages/account-ui/src/components/organisms/sidebar.jsx
+++ b/packages/account-ui/src/components/organisms/sidebar.jsx
@@ -24,7 +24,7 @@ export function Sidebar({
 
   const rail = (
     <div className="flex h-full flex-col gap-1">
-      <div className="flex items-center gap-3 p-3">
+      <div className="flex shrink-0 items-center gap-3 p-3">
         <Avatar
           className="size-10 border-0 bg-gradient-to-br from-beam-from to-beam-to shadow-[inset_0_1px_0_rgba(255,255,255,.35)]"
           src={account.avatarUrl}
@@ -41,7 +41,7 @@ export function Sidebar({
         </div>
       </div>
 
-      <nav className="flex flex-1 flex-col gap-0.5 px-2">
+      <nav className="flex min-h-0 flex-1 flex-col gap-0.5 overflow-y-auto overscroll-contain px-2 pb-1">
         {sections.map((section) => {
           if (section.heading) {
             return (
@@ -82,7 +82,7 @@ export function Sidebar({
         })}
       </nav>
 
-      <div className="p-2">
+      <div className="shrink-0 border-border/60 border-t p-2">
         <Button
           variant="ghost"
           onClick={onSignOut}
-- 
2.51.2


From 16ea1fe483af0150b03de4940bb8df5d9c5b3a32 Mon Sep 17 00:00:00 2001
From: Chad Miller <chadtmiller15@gmail.com>
Date: Sat, 22 Aug 2026 13:23:19 -0700
Subject: [PATCH 02/13] feat(git-ui): a language bar over the file listing

The repository page names what the repository is written in: a bar of each
language's share of the bytes, between the toolbar and the file listing,
with a chip naming the language under the pointer.

The shares follow GitHub's linguist, so the answer matches what a reader
sees on a repository page elsewhere. Only programming and markup files
count, which keeps a repository from reading as mostly JSON because of a
lockfile, and vendored and generated paths count for nothing. The colours
are linguist's own. Past the sixth language the tail adds up as Other.

Weighing the files needs every path and size at the ref, so the browser
reader grows a listFiles: a breadth-first walk that reads one depth of
directories per batch and takes each size from the pack index. No file
body is fetched. The walk is slower than one directory listing, so the
page paints the listing first and holds the bar's track empty until the
shares arrive.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
---
 .changeset/repo-languages.md                  |   9 +
 .../src/components/molecules/language-bar.jsx |  66 +++++
 packages/git-ui/src/lib/languages.js          | 266 ++++++++++++++++++
 packages/git-ui/src/pages/tree.jsx            |  26 ++
 packages/git-ui/test/languages.test.js        |  86 ++++++
 packages/git/src/browser.js                   |  61 ++++
 packages/git/test/browser.test.js             |  15 +
 7 files changed, 529 insertions(+)
 create mode 100644 .changeset/repo-languages.md
 create mode 100644 packages/git-ui/src/components/molecules/language-bar.jsx
 create mode 100644 packages/git-ui/src/lib/languages.js
 create mode 100644 packages/git-ui/test/languages.test.js

diff --git a/.changeset/repo-languages.md b/.changeset/repo-languages.md
new file mode 100644
index 0000000..da6a8f0
--- /dev/null
+++ b/.changeset/repo-languages.md
@@ -0,0 +1,9 @@
+---
+'@pdsjs/git': patch
+---
+
+The browser reader lists every file at a ref, with the size of each, from the
+pack index alone. The walk reads one depth of directories per batch, so a
+whole-tree listing costs a set of coalesced range reads per level rather than
+one per directory. The repository browser weighs the result by language and
+paints the shares as a bar.
diff --git a/packages/git-ui/src/components/molecules/language-bar.jsx b/packages/git-ui/src/components/molecules/language-bar.jsx
new file mode 100644
index 0000000..2eb29bd
--- /dev/null
+++ b/packages/git-ui/src/components/molecules/language-bar.jsx
@@ -0,0 +1,66 @@
+import { useState } from 'react';
+import { percent } from '#/lib/languages.js';
+
+/**
+ * What a repository is written in: one bar of the languages by share, with
+ * the one under the pointer named in a chip below it.
+ *
+ * The chip is drawn over what follows rather than in the flow, so the header
+ * keeps its height and nothing moves as the pointer crosses the bar. Each
+ * segment names itself, which is what a screen reader reads in place of the
+ * chip a pointer brings up.
+ */
+export function LanguageBar({ languages }) {
+  const [hovered, setHovered] = useState(null);
+
+  /**
+   * The middle of a segment, as a percent across the bar, which is where its
+   * chip points. Near an end the chip would hang off the bar, so it stops
+   * short of both.
+   * @param {number} index
+   */
+  const centerOf = (index) => {
+    let start = 0;
+    for (let i = 0; i < index; i++) start += languages[i].share;
+    return Math.min(90, Math.max(10, start + languages[index].share / 2));
+  };
+
+  return (
+    <section aria-label="Languages" className="relative mb-4">
+      <div className="flex h-1.5 overflow-hidden rounded-full bg-muted">
+        {languages.map((language, index) => (
+          <span
+            key={language.name}
+            role="img"
+            aria-label={`${language.name} ${percent(language.share)}`}
+            className="min-w-[3px]"
+            style={{
+              width: `${language.share}%`,
+              backgroundColor: language.color,
+            }}
+            onMouseEnter={() => setHovered(index)}
+            onMouseLeave={() => setHovered(null)}
+          />
+        ))}
+      </div>
+      {hovered !== null && (
+        <span
+          className="-translate-x-1/2 pointer-events-none absolute top-3.5 z-10 flex items-center gap-1.5 rounded-lg border border-border bg-card px-2.5 py-1 text-[12.5px] shadow-sm"
+          style={{ left: `${centerOf(hovered)}%` }}
+          aria-hidden="true"
+        >
+          <span
+            className="size-2.5 shrink-0 rounded-full"
+            style={{ backgroundColor: languages[hovered].color }}
+          />
+          <span className="whitespace-nowrap font-semibold text-foreground">
+            {languages[hovered].name}
+          </span>
+          <span className="text-faint tabular-nums">
+            {percent(languages[hovered].share)}
+          </span>
+        </span>
+      )}
+    </section>
+  );
+}
diff --git a/packages/git-ui/src/lib/languages.js b/packages/git-ui/src/lib/languages.js
new file mode 100644
index 0000000..2759a3f
--- /dev/null
+++ b/packages/git-ui/src/lib/languages.js
@@ -0,0 +1,266 @@
+// What a repository is written in, weighed by the bytes of its files.
+//
+// The rules are the ones GitHub's linguist applies, so a reader arriving from
+// a repository page finds the same answer. Only programming and markup files
+// count: a lockfile, a README and a CI config carry no language, which is
+// what keeps a repository from reading as mostly JSON. Vendored and generated
+// paths carry none either. The colours are linguist's own.
+
+/** Language name by lowercase extension. */
+const BY_EXTENSION = {
+  astro: 'Astro',
+  bash: 'Shell',
+  bat: 'Batchfile',
+  c: 'C',
+  'c++': 'C++',
+  cc: 'C++',
+  cjs: 'JavaScript',
+  clj: 'Clojure',
+  cljs: 'Clojure',
+  cmake: 'CMake',
+  cmd: 'Batchfile',
+  coffee: 'CoffeeScript',
+  cpp: 'C++',
+  cr: 'Crystal',
+  cs: 'C#',
+  css: 'CSS',
+  cts: 'TypeScript',
+  cxx: 'C++',
+  dart: 'Dart',
+  dockerfile: 'Dockerfile',
+  ejs: 'EJS',
+  el: 'Emacs Lisp',
+  elm: 'Elm',
+  erl: 'Erlang',
+  ex: 'Elixir',
+  exs: 'Elixir',
+  fs: 'F#',
+  fsx: 'F#',
+  gleam: 'Gleam',
+  go: 'Go',
+  gql: 'GraphQL',
+  graphql: 'GraphQL',
+  groovy: 'Groovy',
+  h: 'C',
+  handlebars: 'Handlebars',
+  hbs: 'Handlebars',
+  hcl: 'HCL',
+  hpp: 'C++',
+  hrl: 'Erlang',
+  hs: 'Haskell',
+  htm: 'HTML',
+  html: 'HTML',
+  ipynb: 'Jupyter Notebook',
+  java: 'Java',
+  jl: 'Julia',
+  js: 'JavaScript',
+  jsx: 'JavaScript',
+  just: 'Just',
+  kt: 'Kotlin',
+  kts: 'Kotlin',
+  less: 'Less',
+  lisp: 'Common Lisp',
+  lua: 'Lua',
+  m: 'Objective-C',
+  mdx: 'MDX',
+  mjs: 'JavaScript',
+  ml: 'OCaml',
+  mli: 'OCaml',
+  mts: 'TypeScript',
+  nim: 'Nim',
+  nix: 'Nix',
+  php: 'PHP',
+  pl: 'Perl',
+  pm: 'Perl',
+  ps1: 'PowerShell',
+  psm1: 'PowerShell',
+  pug: 'Pug',
+  py: 'Python',
+  pyi: 'Python',
+  r: 'R',
+  rb: 'Ruby',
+  rkt: 'Racket',
+  rs: 'Rust',
+  s: 'Assembly',
+  sass: 'Sass',
+  sbt: 'Scala',
+  scala: 'Scala',
+  scm: 'Scheme',
+  scss: 'SCSS',
+  sh: 'Shell',
+  sol: 'Solidity',
+  styl: 'Stylus',
+  svelte: 'Svelte',
+  swift: 'Swift',
+  tex: 'TeX',
+  tf: 'HCL',
+  tfvars: 'HCL',
+  ts: 'TypeScript',
+  tsx: 'TypeScript',
+  twig: 'Twig',
+  vue: 'Vue',
+  zig: 'Zig',
+  zsh: 'Shell',
+};
+
+/** Language name by lowercase filename, for the files with no extension. */
+const BY_NAME = {
+  cmakelists: 'CMake',
+  containerfile: 'Dockerfile',
+  dockerfile: 'Dockerfile',
+  gnumakefile: 'Makefile',
+  justfile: 'Just',
+  makefile: 'Makefile',
+  rakefile: 'Ruby',
+};
+
+/** Each language's colour, as linguist publishes it. */
+const COLORS = {
+  Assembly: '#6e4c13',
+  Astro: '#ff5a03',
+  Batchfile: '#c1f12e',
+  C: '#555555',
+  'C#': '#7355dd',
+  'C++': '#f34b7d',
+  CMake: '#da3434',
+  Clojure: '#db5855',
+  CoffeeScript: '#244776',
+  'Common Lisp': '#3fb68b',
+  Crystal: '#000100',
+  CSS: '#663399',
+  Dart: '#00b4ab',
+  Dockerfile: '#384d54',
+  EJS: '#a91e50',
+  Elixir: '#6e4a7e',
+  Elm: '#60b5cc',
+  'Emacs Lisp': '#c065db',
+  Erlang: '#b83998',
+  'F#': '#b845fc',
+  Gleam: '#ffaff3',
+  Go: '#00add8',
+  GraphQL: '#e10098',
+  Groovy: '#4298b8',
+  Handlebars: '#f7931e',
+  Haskell: '#5e5086',
+  HCL: '#844fba',
+  HTML: '#e34c26',
+  Java: '#b07219',
+  JavaScript: '#f1e05a',
+  Julia: '#a270ba',
+  'Jupyter Notebook': '#da5b0b',
+  Just: '#384d54',
+  Kotlin: '#a97bff',
+  Less: '#1d365d',
+  Lua: '#000080',
+  Makefile: '#427819',
+  MDX: '#fcb32c',
+  Nim: '#ffc200',
+  Nix: '#7e7eff',
+  OCaml: '#ef7a08',
+  'Objective-C': '#438eff',
+  Perl: '#0298c3',
+  PHP: '#4f5d95',
+  PowerShell: '#012456',
+  Pug: '#a86454',
+  Python: '#3572a5',
+  R: '#198ce7',
+  Racket: '#3c5caa',
+  Ruby: '#701516',
+  Rust: '#dea584',
+  Sass: '#a53b70',
+  Scala: '#c22d40',
+  Scheme: '#1e4aec',
+  SCSS: '#c6538c',
+  Shell: '#89e051',
+  Solidity: '#aa6746',
+  Stylus: '#ff6347',
+  Svelte: '#ff3e00',
+  Swift: '#f05138',
+  TeX: '#3d6117',
+  Twig: '#c1d026',
+  TypeScript: '#3178c6',
+  Vue: '#41b883',
+  Zig: '#ec915c',
+};
+
+/** The name for everything past the languages the bar names one by one. */
+const OTHER = 'Other';
+
+/** Grey, the way linguist paints a language it has no colour for. */
+const OTHER_COLOR = '#8b949e';
+
+/** Paths whose bytes belong to somebody else, or to a build. */
+const IGNORED_PATH =
+  /(^|\/)(node_modules|bower_components|vendors?|third_party|dist|\.yarn|\.pnpm)\/|\.min\.(js|css)$/;
+
+/** How many languages the bar names before the rest become Other. */
+const NAMED_LIMIT = 6;
+
+/**
+ * The language a path is written in, or '' where it carries none.
+ * @param {string} path
+ * @returns {string}
+ */
+export function languageOf(path) {
+  if (IGNORED_PATH.test(path)) return '';
+  const name = path.slice(path.lastIndexOf('/') + 1).toLowerCase();
+  const dot = name.lastIndexOf('.');
+  if (dot > 0) {
+    const language = BY_EXTENSION[name.slice(dot + 1)];
+    if (language) return language;
+  }
+  // A name like Makefile.am reads by its first segment, which is what names
+  // the language for the whole family.
+  return BY_NAME[name] ?? BY_NAME[name.split('.')[0]] ?? '';
+}
+
+/**
+ * @typedef {Object} LanguageShare
+ * @property {string} name
+ * @property {string} color
+ * @property {number} bytes
+ * @property {number} share - percent of the languaged bytes, 0 to 100
+ */
+
+/**
+ * The languages of a file list, largest first. Everything past the sixth is
+ * added together as Other, the way the repository page shows a long tail.
+ * @param {Array<{path: string, size: number}>} files
+ * @returns {LanguageShare[]}
+ */
+export function languageShares(files) {
+  /** @type {Map<string, number>} */
+  const totals = new Map();
+  let counted = 0;
+  for (const file of files) {
+    const name = languageOf(file.path);
+    if (!name) continue;
+    totals.set(name, (totals.get(name) ?? 0) + file.size);
+    counted += file.size;
+  }
+  if (counted === 0) return [];
+
+  const ranked = [...totals].sort((a, b) => b[1] - a[1]);
+  const named = ranked.slice(0, NAMED_LIMIT);
+  const rest = ranked
+    .slice(NAMED_LIMIT)
+    .reduce((sum, [, size]) => sum + size, 0);
+  if (rest > 0) named.push([OTHER, rest]);
+
+  return named.map(([name, size]) => ({
+    name,
+    color: COLORS[name] ?? OTHER_COLOR,
+    bytes: size,
+    share: (size / counted) * 100,
+  }));
+}
+
+/**
+ * A share as the bar prints it. A language too small to round to a tenth
+ * still reads as the smallest share the bar shows, because a segment is
+ * drawn for it.
+ * @param {number} share
+ * @returns {string}
+ */
+export const percent = (share) =>
+  `${share < 0.05 ? '<0.1' : share.toFixed(1)}%`;
diff --git a/packages/git-ui/src/pages/tree.jsx b/packages/git-ui/src/pages/tree.jsx
index 56a657b..7226e60 100644
--- a/packages/git-ui/src/pages/tree.jsx
+++ b/packages/git-ui/src/pages/tree.jsx
@@ -13,6 +13,7 @@ import { Skeleton } from '#/components/atoms/skeleton.jsx';
 import { Breadcrumbs } from '#/components/molecules/breadcrumbs.jsx';
 import { CodeMenu } from '#/components/molecules/code-menu.jsx';
 import { EmptyState } from '#/components/molecules/empty-state.jsx';
+import { LanguageBar } from '#/components/molecules/language-bar.jsx';
 import { LatestCommit } from '#/components/molecules/latest-commit.jsx';
 import { Markdown } from '#/components/molecules/markdown.jsx';
 import { ReadingRepo } from '#/components/molecules/reading-repo.jsx';
@@ -28,6 +29,7 @@ import {
   repoSize,
   tagRefs,
 } from '#/lib/git.js';
+import { languageShares } from '#/lib/languages.js';
 import { useNavigate } from '#/lib/navigation.jsx';
 import { loadPackages } from '#/lib/packages.js';
 import { cn } from '#/lib/utils.js';
@@ -90,6 +92,22 @@ export function TreePage({ repo, refName, path, httpClone }) {
     },
   });
 
+  // Every file at the ref, weighed by language. The walk reads the whole
+  // tree, so the file list paints first and the bar arrives after it. Only
+  // the root asks: the shares are the repository's, not a directory's.
+  const { data: languages } = useQuery({
+    queryKey: ['languages', repo, refName],
+    enabled: Boolean(record) && !isEmpty(record) && !path,
+    queryFn: async () => {
+      const listing = await readerFor(repo).listFiles(
+        account.did,
+        repo,
+        refName,
+      );
+      return languageShares(listing?.files ?? []);
+    },
+  });
+
   const { data: checks } = useQuery({
     queryKey: ['checks', repo],
     queryFn: () => loadChecks(repo),
@@ -197,6 +215,14 @@ export function TreePage({ repo, refName, path, httpClone }) {
       ) : (
         <>
           {toolbar}
+          {/* The empty track while the walk runs, so the listing keeps its
+              place when the colours arrive. */}
+          {!path && !languages && (
+            <div className="mb-4 h-1.5 rounded-full bg-muted" />
+          )}
+          {languages && languages.length > 0 && (
+            <LanguageBar languages={languages} />
+          )}
           {error && <p className="py-10 text-destructive">{error.message}</p>}
           {!data && !error && <ReadingRepo size={repoSize(record)} />}
           {data?.listing && (
diff --git a/packages/git-ui/test/languages.test.js b/packages/git-ui/test/languages.test.js
new file mode 100644
index 0000000..0d0fe3c
--- /dev/null
+++ b/packages/git-ui/test/languages.test.js
@@ -0,0 +1,86 @@
+/**
+ * Weighing a repository's files into the shares the language bar paints.
+ */
+
+import { describe, expect, it } from 'vitest';
+import { languageOf, languageShares, percent } from '../src/lib/languages.js';
+
+/** @param {string} path @param {number} size */
+const file = (path, size) => ({ path, size });
+
+describe('languageOf', () => {
+  it('reads the language from the extension', () => {
+    expect(languageOf('src/app.tsx')).toBe('TypeScript');
+    expect(languageOf('src/app.jsx')).toBe('JavaScript');
+    expect(languageOf('main.go')).toBe('Go');
+    expect(languageOf('style.scss')).toBe('SCSS');
+  });
+
+  it('reads the language from the name where there is no extension', () => {
+    expect(languageOf('Dockerfile')).toBe('Dockerfile');
+    expect(languageOf('docker/Containerfile')).toBe('Dockerfile');
+    expect(languageOf('Makefile.am')).toBe('Makefile');
+    expect(languageOf('justfile')).toBe('Just');
+  });
+
+  it('gives data and prose files no language', () => {
+    expect(languageOf('package.json')).toBe('');
+    expect(languageOf('README.md')).toBe('');
+    expect(languageOf('.github/workflows/ci.yml')).toBe('');
+    expect(languageOf('LICENSE')).toBe('');
+  });
+
+  it('gives vendored and generated paths no language', () => {
+    expect(languageOf('node_modules/left-pad/index.js')).toBe('');
+    expect(languageOf('packages/app/dist/bundle.js')).toBe('');
+    expect(languageOf('public/vendor.min.js')).toBe('');
+    expect(languageOf('vendor/github.com/pkg/errors.go')).toBe('');
+    // A directory whose name only starts with an ignored one still counts.
+    expect(languageOf('distributed/worker.js')).toBe('JavaScript');
+  });
+});
+
+describe('languageShares', () => {
+  it('ranks languages by bytes and shares out the languaged bytes', () => {
+    const shares = languageShares([
+      file('src/app.ts', 700),
+      file('src/util.ts', 100),
+      file('src/app.css', 200),
+      file('package-lock.json', 100000),
+    ]);
+    expect(shares.map((row) => row.name)).toEqual(['TypeScript', 'CSS']);
+    expect(shares[0].share).toBeCloseTo(80);
+    expect(shares[1].share).toBeCloseTo(20);
+    expect(shares[0].color).toBe('#3178c6');
+  });
+
+  it('adds everything past the sixth language together as Other', () => {
+    const shares = languageShares([
+      file('a.ts', 100),
+      file('b.js', 90),
+      file('c.py', 80),
+      file('d.go', 70),
+      file('e.rs', 60),
+      file('f.rb', 50),
+      file('g.lua', 40),
+      file('h.php', 30),
+    ]);
+    expect(shares).toHaveLength(7);
+    expect(shares[6].name).toBe('Other');
+    expect(shares[6].bytes).toBe(70);
+    expect(shares.reduce((sum, row) => sum + row.share, 0)).toBeCloseTo(100);
+  });
+
+  it('reports nothing for a repository with no languaged file', () => {
+    expect(languageShares([file('README.md', 500)])).toEqual([]);
+    expect(languageShares([])).toEqual([]);
+  });
+});
+
+describe('percent', () => {
+  it('prints one decimal, and a floor for a share below it', () => {
+    expect(percent(98.34)).toBe('98.3%');
+    expect(percent(0.1)).toBe('0.1%');
+    expect(percent(0.02)).toBe('<0.1%');
+  });
+});
diff --git a/packages/git/src/browser.js b/packages/git/src/browser.js
index fe36a11..ab40763 100644
--- a/packages/git/src/browser.js
+++ b/packages/git/src/browser.js
@@ -29,6 +29,13 @@ import { concatChunks, parseRepoRecord } from './record.js';
 /** Text preview cap; larger files report size only. */
 const MAX_PREVIEW_BYTES = 512 * 1024;
 
+/**
+ * How far a whole-tree listing walks. The walk runs over the pack index
+ * rather than file bodies, so this is a guard against a pathological
+ * repository rather than a budget.
+ */
+const MAX_LISTED_FILES = 50000;
+
 /**
  * Two ranged reads close together cost more than one read spanning the gap;
  * reads farther apart than this stay separate.
@@ -825,6 +832,60 @@ export function createGitBrowser(ctx) {
       return { ref: refEntry.name, sha: refEntry.sha, path, entries };
     },
 
+    /**
+     * Every file at a ref, with the size of each. The walk reads trees only:
+     * a blob's size comes from the pack index, so no file body is fetched.
+     * One depth of directories is read per batch, which costs one set of
+     * coalesced range reads per level rather than one per directory.
+     * @param {string} did
+     * @param {string} repoName
+     * @param {string} [ref]
+     * @param {string} [space]
+     * @returns {Promise<{ref: string, files: Array<{path: string, size: number}>, truncated: boolean}|null>}
+     */
+    async listFiles(did, repoName, ref, space) {
+      const opened = await open(did, repoName, space);
+      if (!opened) return null;
+      const refEntry = findRef(opened.repo, ref);
+      if (!refEntry) throw new Error(`no such ref: ${ref}`);
+      const rootTree = await peelToTree(opened.store, refEntry.sha);
+
+      /** @type {Array<{path: string, size: number}>} */
+      const files = [];
+      /** @type {Array<{sha: string, path: string}>} */
+      let level = [{ sha: rootTree, path: '' }];
+      let truncated = false;
+      while (level.length > 0 && !truncated) {
+        await opened.store.getMany(level.map((dir) => dir.sha));
+        /** @type {Array<{sha: string, path: string}>} */
+        const next = [];
+        for (const dir of level) {
+          const tree = opened.store.peek(dir.sha);
+          if (tree?.type !== 'tree') continue;
+          for (const entry of parseTree(tree.data)) {
+            const path = dir.path ? `${dir.path}/${entry.name}` : entry.name;
+            if (entry.type === 'dir') {
+              next.push({ sha: entry.sha, path });
+              continue;
+            }
+            // A symlink names a path and a submodule names another
+            // repository. Neither holds bytes of this one.
+            if (entry.type !== 'file') continue;
+            const size = opened.store.meta(entry.sha)?.size;
+            if (size === undefined) continue;
+            files.push({ path, size });
+            if (files.length >= MAX_LISTED_FILES) {
+              truncated = true;
+              break;
+            }
+          }
+          if (truncated) break;
+        }
+        level = next;
+      }
+      return { ref: refEntry.name, files, truncated };
+    },
+
     /**
      * Read a file at a path. Text comes back inline up to the preview cap;
      * binary or oversized files report metadata only. An image reports its
diff --git a/packages/git/test/browser.test.js b/packages/git/test/browser.test.js
index d909f84..d6149b2 100644
--- a/packages/git/test/browser.test.js
+++ b/packages/git/test/browser.test.js
@@ -325,6 +325,21 @@ describe.each(/** @type {const} */ (['eager', 'lazy']))(
       expect(listing?.entries.map((e) => e.name)).toEqual(['deep', 'index.js']);
     });
 
+    it('lists every file at a ref with its size', async () => {
+      const browser = createGitBrowser({ xrpc: fakeXrpc() });
+      const listing = await browser.listFiles(DID, 'testrepo');
+      expect(listing?.truncated).toBe(false);
+      expect(listing?.files.map((f) => f.path).sort()).toEqual([
+        'README.md',
+        'binary.bin',
+        'logo.png',
+        'src/deep/nested.txt',
+        'src/index.js',
+      ]);
+      const readme = listing?.files.find((f) => f.path === 'README.md');
+      expect(readme?.size).toBe('# browser test\n'.length);
+    });
+
     it('reads a text file, including delta-updated content', async () => {
       const browser = createGitBrowser({ xrpc: fakeXrpc() });
       const file = await browser.readFile(
-- 
2.51.2


From 0466ca67c9136dc47301a5372e92c2123fa3e45e Mon Sep 17 00:00:00 2001
From: Chad Miller <chadtmiller15@gmail.com>
Date: Sun, 23 Aug 2026 15:28:36 -0700
Subject: [PATCH 03/13] feat(git-ci): export the record-key module as ./spec

A reader that wants the latest check for one ref computes the record key
rather than paging the runner's history, and the derivation has to match
the runner's exactly. The root entry pulls in the checkout, the daemon
and the firehose reader, so a browser could not import it; ./spec holds
the key functions alone.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01Gp5VgVe393AeJL5jKARqR3
---
 .changeset/git-ci-spec-export.md | 9 +++++++++
 packages/git-ci/package.json     | 3 ++-
 2 files changed, 11 insertions(+), 1 deletion(-)
 create mode 100644 .changeset/git-ci-spec-export.md

diff --git a/.changeset/git-ci-spec-export.md b/.changeset/git-ci-spec-export.md
new file mode 100644
index 0000000..41e1d39
--- /dev/null
+++ b/.changeset/git-ci-spec-export.md
@@ -0,0 +1,9 @@
+---
+'@pdsjs/git-ci': patch
+---
+
+`@pdsjs/git-ci` exports its record-key module under `./spec`. A reader that
+wants the latest check for one ref computes the key rather than paging the
+runner's history, and the derivation has to match the runner's exactly. The
+root entry pulls in the checkout, the daemon and the firehose reader, so a
+browser could not import it; `./spec` holds the key functions alone.
diff --git a/packages/git-ci/package.json b/packages/git-ci/package.json
index 14d7be6..e401641 100644
--- a/packages/git-ci/package.json
+++ b/packages/git-ci/package.json
@@ -10,7 +10,8 @@
   "exports": {
     ".": "./src/index.js",
     "./lexicon": "./src/lexicon.js",
-    "./executor": "./src/executor.js"
+    "./executor": "./src/executor.js",
+    "./spec": "./src/spec.js"
   },
   "dependencies": {
     "@pdsjs/core": "workspace:*",
-- 
2.51.2


From 2d7efbb7e541f76a34e991cafb9800fdbf4e6e13 Mon Sep 17 00:00:00 2001
From: Chad Miller <chadtmiller15@gmail.com>
Date: Sun, 23 Aug 2026 15:29:17 -0700
Subject: [PATCH 04/13] feat(git-ui): a repository reads as one instrument

The browser now holds the window and scrolls inside itself. One bar names
where the reader is, a second names the repository's sections, and a third
carries whatever the open section is looking at, so no single row carries
three jobs. Source and a commit each read as two panes: what to open down
the left, what is open down the right. Opening a file keeps its
neighbours in view.

Checks group by the commit they ran against, headed by that commit's
subject line rather than its sha, with a filter naming each workflow and
how many runs it holds. A run has a page of its own, addressed by the
record key the runner wrote it under, so one can be linked to. The badge
beside a commit keeps the newest run of each workflow and folds them: a
single failure decides the commit, whatever its other workflows say.
Before this the newest run of any workflow spoke for all of them, so a
publish that finished later hid a failed test.

Sections come from the repository's config record, one cheap read, so
every page carries the way back to every other. Packages, checks, files
and an empty repository were each a dead end.

Surfaces are panels divided by rules rather than tiles: one radius, no
filled controls, identifiers in mono. Two gauges under the file pane read
the repository as a whole, what it is written in and how lately it was
worked on, both from walks the page already made.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01Gp5VgVe393AeJL5jKARqR3
---
 packages/git-ui/package.json                  |   1 +
 packages/git-ui/src/app.jsx                   | 223 ++++++++-----
 .../components/molecules/account-panel.jsx    |  86 +++++
 .../components/molecules/activity-ticks.jsx   |  55 ++++
 .../components/molecules/check-disclosure.jsx |  52 +++
 .../src/components/molecules/check-filter.jsx |  43 +++
 .../src/components/molecules/check-group.jsx  |  77 +++++
 .../src/components/molecules/check-log.jsx    |   2 +-
 .../src/components/molecules/check-row.jsx    |  36 ++
 .../src/components/molecules/check-run.jsx    | 133 +++-----
 .../src/components/molecules/check-status.jsx |  29 +-
 .../src/components/molecules/check-steps.jsx  |  44 +++
 .../src/components/molecules/code-menu.jsx    |  13 +-
 .../molecules/commit-check-status.jsx         |  24 ++
 .../components/molecules/commit-checks.jsx    |  51 ++-
 .../src/components/molecules/dir-table.jsx    |  59 ++++
 .../src/components/molecules/language-bar.jsx | 118 ++++---
 .../components/molecules/latest-commit.jsx    |   9 +-
 .../src/components/molecules/package-card.jsx |  15 +-
 .../components/molecules/ref-check-status.jsx |  36 ++
 .../src/components/molecules/repo-gauges.jsx  |  59 ++++
 .../molecules/repo-list-skeleton.jsx          |  27 ++
 ...ge-skeleton.jsx => repo-page-skeleton.jsx} |  40 +--
 .../src/components/molecules/repo-tabs.jsx    |  91 ++++++
 .../src/components/molecules/source-panes.jsx |  70 ++++
 .../src/components/molecules/tree-list.jsx    |  33 +-
 packages/git-ui/src/lib/activity.js           |   8 +
 packages/git-ui/src/lib/checks.js             | 236 ++++++++++++--
 packages/git-ui/src/lib/git.js                |  39 +++
 packages/git-ui/src/lib/source.js             |  88 +++++
 packages/git-ui/src/pages/check.jsx           |  48 +++
 packages/git-ui/src/pages/checks.jsx          | 109 +++++--
 packages/git-ui/src/pages/commit.jsx          | 138 ++++----
 packages/git-ui/src/pages/commits.jsx         |  96 +++---
 packages/git-ui/src/pages/file.jsx            |  93 ++++--
 packages/git-ui/src/pages/packages.jsx        |  21 +-
 packages/git-ui/src/pages/repos.jsx           | 124 ++++---
 packages/git-ui/src/pages/tree.jsx            | 307 ++++++------------
 packages/git-ui/src/style.css                 |  11 +-
 packages/git-ui/test/checks.test.js           | 249 +++++++++++++-
 pnpm-lock.yaml                                |   3 +
 41 files changed, 2237 insertions(+), 759 deletions(-)
 create mode 100644 packages/git-ui/src/components/molecules/account-panel.jsx
 create mode 100644 packages/git-ui/src/components/molecules/activity-ticks.jsx
 create mode 100644 packages/git-ui/src/components/molecules/check-disclosure.jsx
 create mode 100644 packages/git-ui/src/components/molecules/check-filter.jsx
 create mode 100644 packages/git-ui/src/components/molecules/check-group.jsx
 create mode 100644 packages/git-ui/src/components/molecules/check-row.jsx
 create mode 100644 packages/git-ui/src/components/molecules/check-steps.jsx
 create mode 100644 packages/git-ui/src/components/molecules/commit-check-status.jsx
 create mode 100644 packages/git-ui/src/components/molecules/dir-table.jsx
 create mode 100644 packages/git-ui/src/components/molecules/ref-check-status.jsx
 create mode 100644 packages/git-ui/src/components/molecules/repo-gauges.jsx
 create mode 100644 packages/git-ui/src/components/molecules/repo-list-skeleton.jsx
 rename packages/git-ui/src/components/molecules/{page-skeleton.jsx => repo-page-skeleton.jsx} (54%)
 create mode 100644 packages/git-ui/src/components/molecules/repo-tabs.jsx
 create mode 100644 packages/git-ui/src/components/molecules/source-panes.jsx
 create mode 100644 packages/git-ui/src/lib/activity.js
 create mode 100644 packages/git-ui/src/lib/source.js
 create mode 100644 packages/git-ui/src/pages/check.jsx

diff --git a/packages/git-ui/package.json b/packages/git-ui/package.json
index 1367112..d00889c 100644
--- a/packages/git-ui/package.json
+++ b/packages/git-ui/package.json
@@ -13,6 +13,7 @@
   "dependencies": {
     "@base-ui/react": "^1.6.0",
     "@pdsjs/git": "workspace:*",
+    "@pdsjs/git-ci": "workspace:*",
     "@pdsjs/npm": "workspace:*",
     "@pdsjs/oci": "workspace:*",
     "@tanstack/react-query": "^5.101.4",
diff --git a/packages/git-ui/src/app.jsx b/packages/git-ui/src/app.jsx
index c213a0b..fd7a0ad 100644
--- a/packages/git-ui/src/app.jsx
+++ b/packages/git-ui/src/app.jsx
@@ -2,10 +2,10 @@ import { useQuery, useQueryClient } from '@tanstack/react-query';
 import { useMemo } from 'react';
 import { Avatar } from '#/components/atoms/avatar.jsx';
 import { Link } from '#/components/atoms/link.jsx';
-import {
-  RepoListSkeleton,
-  RepoPageSkeleton,
-} from '#/components/molecules/page-skeleton.jsx';
+import { CodeMenu } from '#/components/molecules/code-menu.jsx';
+import { RepoListSkeleton } from '#/components/molecules/repo-list-skeleton.jsx';
+import { RepoPageSkeleton } from '#/components/molecules/repo-page-skeleton.jsx';
+import { RepoTabs, SECTION_TITLES } from '#/components/molecules/repo-tabs.jsx';
 import { initial, loadAuthors, owner } from '#/lib/authors.js';
 import {
   account as accountInfo,
@@ -20,6 +20,7 @@ import {
 } from '#/lib/git.js';
 import { NavigationProvider, useLocation } from '#/lib/navigation.jsx';
 import { cn } from '#/lib/utils.js';
+import { CheckPage } from '#/pages/check.jsx';
 import { ChecksPage } from '#/pages/checks.jsx';
 import { CommitPage } from '#/pages/commit.jsx';
 import { CommitsPage } from '#/pages/commits.jsx';
@@ -32,7 +33,7 @@ import { TreePage } from '#/pages/tree.jsx';
  * Pick the screen for a path. The repository record is already in hand, which
  * is what lets a ref carrying slashes be told apart from the path after it.
  */
-function Screen({ path, httpClone }) {
+function Screen({ path }) {
   const segments = path.split('/').filter(Boolean).map(decodeURIComponent);
   if (segments.length === 0) return <ReposPage />;
 
@@ -44,7 +45,13 @@ function Screen({ path, httpClone }) {
     return <p className="py-16 text-center text-faint">No such repository.</p>;
   }
   if (kind === 'commit') return <CommitPage repo={repo} sha={tail} />;
-  if (kind === 'checks') return <ChecksPage repo={repo} />;
+  if (kind === 'checks') {
+    return tail ? (
+      <CheckPage repo={repo} rkey={tail} />
+    ) : (
+      <ChecksPage repo={repo} />
+    );
+  }
   if (kind === 'packages') return <PackagesPage repo={repo} />;
   if (kind === 'commits') {
     return <CommitsPage repo={repo} refName={splitRefPath(record, tail).ref} />;
@@ -55,29 +62,30 @@ function Screen({ path, httpClone }) {
   }
   if (kind === 'tree') {
     const { ref, path: dirPath } = splitRefPath(record, tail);
-    return (
-      <TreePage
-        repo={repo}
-        refName={ref}
-        path={dirPath}
-        httpClone={capabilities.httpClone}
-      />
-    );
+    return <TreePage repo={repo} refName={ref} path={dirPath} />;
   }
-  return (
-    <TreePage
-      repo={repo}
-      refName={defaultRef(record)}
-      path=""
-      httpClone={httpClone}
-    />
-  );
+  return <TreePage repo={repo} refName={defaultRef(record)} path="" />;
+}
+
+/**
+ * Which section of a repository a path names. The tab bar marks it, and each
+ * page belongs to exactly one: a commit is part of the history, a run is part
+ * of the checks, a file is part of the code.
+ * @param {string|undefined} kind - the path segment after the repository
+ * @returns {string}
+ */
+function sectionOf(kind) {
+  if (kind === 'commits' || kind === 'commit') return 'commits';
+  if (kind === 'checks') return 'checks';
+  if (kind === 'packages') return 'packages';
+  return 'code';
 }
 
 export function App() {
   const { path, navigate } = useLocation();
   const queryClient = useQueryClient();
-  const wide = path.split('/').filter(Boolean)[1] === 'commit';
+  const segments = path.split('/').filter(Boolean).map(decodeURIComponent);
+  const wide = segments[1] === 'commit';
 
   // The previous visit's account and repository rows, read synchronously.
   // With them in hand every screen renders real content on the first frame,
@@ -117,66 +125,127 @@ export function App() {
     staleTime: Number.POSITIVE_INFINITY,
   });
 
+  // The repository in view, and which of its sections. Both come from the
+  // path, so every page carries the same heading and the same tabs without
+  // passing them down.
+  const repo = ready && segments.length > 0 ? segments[0] : '';
+  const known = Boolean(repo) && Boolean(repoRecord(repo));
+  const section = sectionOf(segments[1]);
+
+  // Every screen holds the window and scrolls inside itself, so the bar and
+  // whatever each page fixes above its list stay put. A screen that has not
+  // been given that shape yet reads as a column of prose instead.
+  const filled = segments.length === 0 || known;
+
   return (
     <NavigationProvider navigate={navigate}>
-      <div
-        className={cn(
-          'mx-auto px-5 pb-24',
-          // A commit shows its file tree beside the diffs, which needs more
-          // width than a page of prose wants.
-          wide ? 'max-w-6xl' : 'max-w-4xl',
-        )}
-      >
-        <header className="flex flex-wrap items-baseline justify-between gap-3 pt-8 pb-5">
-          <Link
-            href="/"
-            className="font-semibold text-[22px] text-foreground tracking-tight no-underline hover:no-underline"
-          >
-            Repositories
-          </Link>
-          {ready && (
-            <span className="flex min-w-0 items-center gap-2">
-              <Avatar
-                src={owner()?.avatar || undefined}
-                fallback={
-                  <span className="text-[10px] text-faint">
-                    {initial(owner()?.displayName || accountInfo.handle)}
-                  </span>
-                }
-                className="size-6"
-              />
-              <span className="truncate font-mono text-[13px] text-faint">
-                {accountInfo.handle}
-              </span>
-            </span>
-          )}
+      {/* The window is the app: the bar holds its place and each pane below
+          takes its own scroll, so nothing but the reading area ever moves. */}
+      <div className="flex h-dvh flex-col overflow-hidden">
+        {/* Where the reader is, and nothing else. Which section is open and
+            what that section is looking at each get a band of their own
+            below, so no one bar carries three different jobs. */}
+        <header className="shrink-0 border-border border-b bg-muted">
+          <div className="flex h-14 items-center gap-3 px-5 sm:px-7">
+            <nav className="flex min-w-0 shrink items-center gap-2 text-[15px]">
+              {/* On a narrow window the repository's own name is the one that
+                  has to survive. The avatar carries the way back to the list
+                  at every width. */}
+              <Link
+                href="/"
+                className={cn(
+                  'truncate no-underline hover:underline',
+                  known
+                    ? 'hidden text-muted-foreground sm:inline'
+                    : 'font-semibold text-foreground',
+                )}
+              >
+                {accountInfo.handle || 'Repositories'}
+              </Link>
+              {known && (
+                <>
+                  <span className="hidden text-faint sm:inline">/</span>
+                  <Link
+                    href={`/${encodeURIComponent(repo)}`}
+                    className="truncate font-semibold text-foreground no-underline hover:underline"
+                  >
+                    {repo}
+                  </Link>
+                  {/* Code is where a repository opens, so naming it here
+                      would say nothing the crumb before it has not. */}
+                  {section !== 'code' && (
+                    <>
+                      <span className="text-faint">/</span>
+                      <span className="truncate text-muted-foreground">
+                        {SECTION_TITLES[section]}
+                      </span>
+                    </>
+                  )}
+                </>
+              )}
+            </nav>
+            {ready && (
+              <div className="ml-auto flex shrink-0 items-center pl-2">
+                <Link href="/" title={accountInfo.handle} className="flex">
+                  <Avatar
+                    src={owner()?.avatar || undefined}
+                    fallback={
+                      <span className="text-[10px] text-faint">
+                        {initial(owner()?.displayName || accountInfo.handle)}
+                      </span>
+                    }
+                    className="size-7"
+                  />
+                </Link>
+              </div>
+            )}
+          </div>
         </header>
 
-        {error && !ready ? (
-          <p className="py-16 text-center text-destructive">
-            Could not reach the PDS. {error.message}
-          </p>
-        ) : !ready ? (
-          // The URL says which screen is coming, so the placeholder can hold
-          // its shape rather than a bare block.
-          path.split('/').filter(Boolean).length === 0 ? (
-            <RepoListSkeleton />
-          ) : (
-            <RepoPageSkeleton />
-          )
-        ) : (
-          <Screen path={path} httpClone={capabilities.httpClone} />
+        {/* The repository's sections, with the one action that belongs to the
+            repository rather than to any one of them. */}
+        {known && (
+          <div className="shrink-0 border-border border-b">
+            <div className="flex items-center gap-3 px-4 py-2 sm:px-6">
+              <RepoTabs repo={repo} active={section} />
+              <div className="ml-auto shrink-0">
+                <CodeMenu repo={repo} httpClone={capabilities.httpClone} />
+              </div>
+            </div>
+          </div>
         )}
 
-        <footer className="pt-14 text-center text-[12.5px] text-faint">
-          Served from an atproto repo by{' '}
-          <a
-            href="https://tangled.org/chadtmiller.com/pds.js"
-            className="hover:text-muted-foreground"
-          >
-            pds.js
-          </a>
-        </footer>
+        <main
+          className={cn(
+            'min-h-0 flex-1',
+            filled ? 'flex flex-col overflow-hidden' : 'overflow-y-auto',
+          )}
+        >
+          {error && !ready ? (
+            <p className="py-16 text-center text-destructive">
+              Could not reach the PDS. {error.message}
+            </p>
+          ) : !ready ? (
+            // The URL says which screen is coming, so the placeholder can hold
+            // its shape rather than a bare block.
+            segments.length === 0 ? (
+              <RepoListSkeleton />
+            ) : (
+              <RepoPageSkeleton />
+            )
+          ) : filled ? (
+            <Screen path={path} />
+          ) : (
+            <div
+              className={cn(
+                'mx-auto px-5 pb-20',
+                wide ? 'max-w-6xl' : 'max-w-4xl',
+              )}
+            >
+              <Screen path={path} />
+            </div>
+          )}
+        </main>
       </div>
     </NavigationProvider>
   );
diff --git a/packages/git-ui/src/components/molecules/account-panel.jsx b/packages/git-ui/src/components/molecules/account-panel.jsx
new file mode 100644
index 0000000..e252324
--- /dev/null
+++ b/packages/git-ui/src/components/molecules/account-panel.jsx
@@ -0,0 +1,86 @@
+import { Avatar } from '#/components/atoms/avatar.jsx';
+import { initial, owner } from '#/lib/authors.js';
+import { bytes } from '#/lib/format.js';
+import { account, repoSize } from '#/lib/git.js';
+
+/** One reading of the account, label above value. */
+function Field({ label, children }) {
+  return (
+    <div className="min-w-0">
+      <div className="text-[10px] text-faint uppercase tracking-[0.12em]">
+        {label}
+      </div>
+      <div className="mt-1 truncate font-mono text-[12px] text-muted-foreground">
+        {children}
+      </div>
+    </div>
+  );
+}
+
+/**
+ * Whose repositories these are, beside the list of them: the account, the
+ * name it answers to, and the server holding it. Every repository on this
+ * page is one account's, so the account is named once here rather than on
+ * each row.
+ */
+export function AccountPanel({ repos }) {
+  const profile = owner();
+  const total = (repos ?? []).reduce((sum, repo) => sum + repoSize(repo), 0);
+
+  return (
+    <div className="flex h-full flex-col">
+      <div className="flex min-h-0 flex-1 flex-col gap-5 overflow-y-auto p-5">
+        <div className="flex items-center gap-3">
+          <Avatar
+            src={profile?.avatar || undefined}
+            fallback={
+              <span className="text-[13px] text-faint">
+                {initial(profile?.displayName || account.handle)}
+              </span>
+            }
+            className="size-10 shrink-0"
+          />
+          <div className="min-w-0">
+            <div className="truncate font-semibold text-[15px] text-foreground">
+              {profile?.displayName || account.handle}
+            </div>
+            <div className="truncate font-mono text-[12px] text-faint">
+              {account.handle}
+            </div>
+          </div>
+        </div>
+
+        {profile?.description && (
+          <p className="text-[13px] text-muted-foreground">
+            {profile.description}
+          </p>
+        )}
+
+        <div className="flex flex-col gap-4 border-border border-t pt-5">
+          <Field label="Identity">
+            <span title={account.did}>{account.did}</span>
+          </Field>
+          <Field label="Server">
+            <span title={account.pds}>
+              {account.pds.replace(/^https?:\/\//, '')}
+            </span>
+          </Field>
+          <Field label="Repositories">
+            {(repos ?? []).length} · {bytes(total)}
+          </Field>
+        </div>
+      </div>
+
+      <div className="shrink-0 border-border border-t px-5 py-4">
+        <a
+          href="https://tangled.org/chadtmiller.com/pds.js"
+          target="_blank"
+          rel="noopener noreferrer"
+          className="text-[12px] text-faint hover:text-muted-foreground"
+        >
+          Served by pds.js
+        </a>
+      </div>
+    </div>
+  );
+}
diff --git a/packages/git-ui/src/components/molecules/activity-ticks.jsx b/packages/git-ui/src/components/molecules/activity-ticks.jsx
new file mode 100644
index 0000000..b2fd658
--- /dev/null
+++ b/packages/git-ui/src/components/molecules/activity-ticks.jsx
@@ -0,0 +1,55 @@
+import { ACTIVITY_WEEKS, WEEK_MS } from '#/lib/activity.js';
+import { cn } from '#/lib/utils.js';
+
+/**
+ * How often this ref was committed to, week by week, as a row of ticks read
+ * like a gauge. The dates come from the walk the page already made for its
+ * latest commit, so this costs no read of its own.
+ *
+ * A week with no commits keeps a floor tick, so the row reads as a scale
+ * rather than as gaps. Heights are against the busiest week in view, which
+ * makes the shape of the work legible whatever the repository's volume.
+ */
+export function ActivityTicks({ dates, className }) {
+  const now = Date.now();
+  /** @type {{start: number, count: number}[]} oldest first */
+  const weeks = Array.from({ length: ACTIVITY_WEEKS }, (_, index) => ({
+    start: now - (ACTIVITY_WEEKS - index) * WEEK_MS,
+    count: 0,
+  }));
+  for (const at of dates) {
+    const week = Math.floor((now - at) / WEEK_MS);
+    if (week >= 0 && week < ACTIVITY_WEEKS) {
+      weeks[ACTIVITY_WEEKS - 1 - week].count += 1;
+    }
+  }
+
+  const busiest = Math.max(...weeks.map((week) => week.count));
+  if (busiest === 0) return null;
+  const total = weeks.reduce((sum, week) => sum + week.count, 0);
+  const words = `${total} ${total === 1 ? 'commit' : 'commits'} in the last ${ACTIVITY_WEEKS} weeks`;
+
+  return (
+    <div
+      className={cn('flex h-3 shrink-0 items-end gap-[2px]', className)}
+      role="img"
+      aria-label={words}
+      title={words}
+    >
+      {weeks.map((week) => (
+        <span
+          key={week.start}
+          className={cn(
+            'w-[3px]',
+            week.count > 0 ? 'bg-key' : 'h-[2px] bg-border',
+          )}
+          style={
+            week.count > 0
+              ? { height: `${Math.max(20, (week.count / busiest) * 100)}%` }
+              : undefined
+          }
+        />
+      ))}
+    </div>
+  );
+}
diff --git a/packages/git-ui/src/components/molecules/check-disclosure.jsx b/packages/git-ui/src/components/molecules/check-disclosure.jsx
new file mode 100644
index 0000000..ad3a5de
--- /dev/null
+++ b/packages/git-ui/src/components/molecules/check-disclosure.jsx
@@ -0,0 +1,52 @@
+import { ChevronDownIcon, ChevronRightIcon } from 'lucide-react';
+import { useState } from 'react';
+import { Link } from '#/components/atoms/link.jsx';
+import { CheckLog } from '#/components/molecules/check-log.jsx';
+import { CheckRow } from '#/components/molecules/check-row.jsx';
+import { CheckSteps } from '#/components/molecules/check-steps.jsx';
+
+/**
+ * One run as a line that opens in place: the steps it ran and the log behind
+ * them. The log is fetched only once opened, so a commit checked by several
+ * workflows costs one request per run the reader actually opens.
+ *
+ * A failed run opens itself. Someone reading a commit whose check failed came
+ * for the output.
+ */
+export function CheckDisclosure({ runner, check, runHref }) {
+  const failed = check.status === 'failure' || check.status === 'error';
+  const [open, setOpen] = useState(failed);
+  const steps = Array.isArray(check.steps) ? check.steps : [];
+  const Chevron = open ? ChevronDownIcon : ChevronRightIcon;
+
+  return (
+    <div className="border-border border-t first:border-t-0">
+      <div className="flex items-center">
+        <button
+          type="button"
+          onClick={() => setOpen(!open)}
+          aria-expanded={open}
+          className="flex min-w-0 flex-1 cursor-pointer items-center gap-1 py-0 pl-2 text-left hover:bg-accent"
+        >
+          <Chevron className="size-3.5 shrink-0 text-faint" />
+          <CheckRow check={check} className="min-w-0 flex-1" />
+        </button>
+        {runHref && (
+          <Link href={runHref} className="shrink-0 px-4 text-[12px]">
+            Details
+          </Link>
+        )}
+      </div>
+      {open && (
+        <div className="border-border border-t bg-muted/40">
+          {steps.length > 0 && <CheckSteps steps={steps} />}
+          {/* A log opened beside its neighbours is capped, so one long run
+              does not push the rest of them off the page. */}
+          <div className="max-h-96 overflow-auto border-border border-t">
+            <CheckLog runner={runner} check={check} />
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}
diff --git a/packages/git-ui/src/components/molecules/check-filter.jsx b/packages/git-ui/src/components/molecules/check-filter.jsx
new file mode 100644
index 0000000..447efd7
--- /dev/null
+++ b/packages/git-ui/src/components/molecules/check-filter.jsx
@@ -0,0 +1,43 @@
+import { cn } from '#/lib/utils.js';
+
+/**
+ * Which workflow a run listing shows, with how many runs each holds. A
+ * repository checked by one workflow has nothing to choose between, so the
+ * filter appears from two workflows upwards.
+ */
+export function CheckFilter({ workflows, counts, total, value, onSelect }) {
+  if (workflows.length < 2) return null;
+
+  const options = [
+    { key: '', title: 'All workflows', count: total },
+    ...workflows.map((name) => ({
+      key: name,
+      title: name,
+      count: counts[name],
+    })),
+  ];
+
+  return (
+    <div className="flex flex-wrap items-center gap-1">
+      {options.map((option) => (
+        <button
+          key={option.key || 'all'}
+          type="button"
+          onClick={() => onSelect(option.key)}
+          aria-pressed={value === option.key}
+          className={cn(
+            'flex cursor-pointer items-center gap-2 rounded-[3px] px-3 py-1.5 text-[13px]',
+            value === option.key
+              ? 'bg-accent text-foreground'
+              : 'text-muted-foreground hover:bg-accent/60 hover:text-foreground',
+          )}
+        >
+          {option.title}
+          <span className="rounded-[3px] bg-muted px-1.5 py-px text-[11.5px] text-faint tabular-nums">
+            {option.count}
+          </span>
+        </button>
+      ))}
+    </div>
+  );
+}
diff --git a/packages/git-ui/src/components/molecules/check-group.jsx b/packages/git-ui/src/components/molecules/check-group.jsx
new file mode 100644
index 0000000..3089e79
--- /dev/null
+++ b/packages/git-ui/src/components/molecules/check-group.jsx
@@ -0,0 +1,77 @@
+import { Link } from '#/components/atoms/link.jsx';
+import { CheckRow } from '#/components/molecules/check-row.jsx';
+import {
+  checkLook,
+  latestPerWorkflow,
+  summarize,
+  summaryWords,
+} from '#/lib/checks.js';
+import { shortRef } from '#/lib/git.js';
+import { cn } from '#/lib/utils.js';
+
+/**
+ * One commit's runs, under a heading that names the commit. A sha names
+ * nothing to a reader, so the heading reads as the commit's subject line once
+ * the repository is open, and as the short sha until then.
+ *
+ * The heading's status covers the commit: the newest run of each workflow
+ * decides it, so a workflow asked for twice counts once.
+ */
+export function CheckGroup({ repo, group, label }) {
+  const summary = summarize(latestPerWorkflow(group.runs));
+  const look = checkLook(summary?.status);
+  const commitHref = `/${encodeURIComponent(repo)}/commit/${group.sha}`;
+  const short = group.sha.slice(0, 8);
+  const ref = group.runs.find((run) => run.ref)?.ref;
+
+  return (
+    <li className="border-border border-t first:border-t-0">
+      <div className="flex items-center gap-3 bg-muted px-4 py-2.5">
+        <look.Icon
+          className={cn('size-4 shrink-0', look.className)}
+          aria-hidden="true"
+        />
+        <Link
+          href={commitHref}
+          title={summary ? summaryWords(summary, group.runs) : undefined}
+          className={cn(
+            'min-w-0 flex-1 truncate font-semibold text-[13px] text-foreground no-underline hover:underline',
+            label ? '' : 'font-mono',
+          )}
+        >
+          {label?.subject ?? short}
+        </Link>
+        {ref && (
+          <span className="shrink-0 font-mono text-[12px] text-faint">
+            {shortRef(ref)}
+          </span>
+        )}
+        {label && (
+          <code className="shrink-0 font-mono text-[12px] text-key">
+            {short}
+          </code>
+        )}
+      </div>
+      <ul>
+        {group.runs.map((run) => (
+          <li
+            key={run.rkey ?? run.startedAt}
+            className="border-border border-t"
+          >
+            {/* A record read without its key has no page to open. */}
+            {run.rkey ? (
+              <Link
+                href={`/${encodeURIComponent(repo)}/checks/${run.rkey}`}
+                className="block bg-card text-foreground no-underline hover:bg-accent hover:no-underline"
+              >
+                <CheckRow check={run} className="pl-11" />
+              </Link>
+            ) : (
+              <CheckRow check={run} className="bg-card pl-11" />
+            )}
+          </li>
+        ))}
+      </ul>
+    </li>
+  );
+}
diff --git a/packages/git-ui/src/components/molecules/check-log.jsx b/packages/git-ui/src/components/molecules/check-log.jsx
index f23353f..caa29f0 100644
--- a/packages/git-ui/src/components/molecules/check-log.jsx
+++ b/packages/git-ui/src/components/molecules/check-log.jsx
@@ -37,7 +37,7 @@ export function CheckLog({ runner, check }) {
 
   return (
     <>
-      <pre className="max-h-[28rem] overflow-auto px-4 py-3 font-mono text-[12px] leading-relaxed">
+      <pre className="overflow-auto px-5 py-3 font-mono text-[12px] leading-relaxed">
         {data || 'The log is empty.'}
       </pre>
       <div className="border-border border-t px-4 py-2 text-[12px]">
diff --git a/packages/git-ui/src/components/molecules/check-row.jsx b/packages/git-ui/src/components/molecules/check-row.jsx
new file mode 100644
index 0000000..1ecf02e
--- /dev/null
+++ b/packages/git-ui/src/components/molecules/check-row.jsx
@@ -0,0 +1,36 @@
+import { checkLook, runDuration, workflowOf } from '#/lib/checks.js';
+import { timeAgo } from '#/lib/format.js';
+import { cn } from '#/lib/utils.js';
+
+/**
+ * One run as a single line: which workflow ran, how long it took, and how it
+ * ended. Every listing of runs sits under something that already names the
+ * commit, so the line carries no sha and no ref.
+ *
+ * This holds no anchor and no button of its own. The caller decides whether
+ * the line opens the run's page or expands in place.
+ */
+export function CheckRow({ check, className }) {
+  const look = checkLook(check.status);
+  const took = runDuration(check);
+
+  return (
+    <span
+      className={cn(
+        'flex items-center gap-x-3 px-4 py-2 text-[13px]',
+        className,
+      )}
+    >
+      <look.Icon className={cn('size-4 shrink-0', look.className)} />
+      <span className="min-w-0 flex-1 truncate text-foreground">
+        {workflowOf(check)}
+      </span>
+      {/* Each column holds its width whether or not the run fills it, so the
+          durations and times read down the page as columns. */}
+      <span className="flex shrink-0 items-center gap-3 text-[12px] text-faint">
+        <span className="w-14 text-right tabular-nums">{took}</span>
+        <span className="w-24 text-right">{timeAgo(check.startedAt)}</span>
+      </span>
+    </span>
+  );
+}
diff --git a/packages/git-ui/src/components/molecules/check-run.jsx b/packages/git-ui/src/components/molecules/check-run.jsx
index 1f6bd2b..8ae3532 100644
--- a/packages/git-ui/src/components/molecules/check-run.jsx
+++ b/packages/git-ui/src/components/molecules/check-run.jsx
@@ -1,107 +1,82 @@
-import { ChevronDownIcon, ChevronRightIcon } from 'lucide-react';
-import { useState } from 'react';
-import { Card } from '#/components/atoms/card.jsx';
 import { Link } from '#/components/atoms/link.jsx';
 import { CheckLog } from '#/components/molecules/check-log.jsx';
-import { checkLook, duration, runDuration } from '#/lib/checks.js';
+import { CheckSteps } from '#/components/molecules/check-steps.jsx';
+import { checkLook, runDuration, workflowOf } from '#/lib/checks.js';
 import { shortRef } from '#/lib/git.js';
 import { cn } from '#/lib/utils.js';
 
-/** A step's own line: the exit code decides how its name reads. */
-function StepRow({ step }) {
-  const failed = step.exitCode !== 0;
+/** One field of the run's summary block. */
+function Field({ label, children }) {
   return (
-    <div className="flex items-baseline gap-3 px-4 py-1.5 text-[12.5px]">
-      <span
-        className={cn(
-          'min-w-0 flex-1 truncate',
-          failed ? 'text-destructive' : 'text-muted-foreground',
-        )}
-      >
-        {step.name}
-      </span>
-      {typeof step.durationMs === 'number' && (
-        <span className="shrink-0 font-mono text-[11.5px] text-faint">
-          {duration(step.durationMs)}
-        </span>
-      )}
-      <span
-        className={cn(
-          'w-12 shrink-0 text-right font-mono text-[11.5px]',
-          failed ? 'text-destructive' : 'text-faint',
-        )}
-      >
-        {failed ? `exit ${step.exitCode}` : 'ok'}
-      </span>
+    <div className="min-w-0">
+      <div className="text-[11.5px] text-faint uppercase tracking-wide">
+        {label}
+      </div>
+      <div className="mt-1 truncate text-[13px] text-foreground">
+        {children}
+      </div>
     </div>
   );
 }
 
 /**
- * One run in full: what the runner ran, how each step ended, and the log
- * behind a disclosure. The log is fetched only once opened, so a commit with
- * several runs costs one request per run the reader actually opens.
- *
- * A failed run opens itself. Someone reading a commit whose check failed came
- * for the output.
- *
- * `commitHref` names the commit under test. A page that already names the
- * commit passes nothing, and the header leaves the sha out.
+ * One run in full, which is what the run's own page shows: what the runner
+ * ran it against, how each step ended, and the whole log. The log is on this
+ * page because a reader who opened one run came for its output.
  */
 export function CheckRun({ runner, check, commitHref }) {
-  const failed = check.status === 'failure' || check.status === 'error';
-  const [open, setOpen] = useState(failed);
   const look = checkLook(check.status);
   const took = runDuration(check);
   const steps = Array.isArray(check.steps) ? check.steps : [];
-  const Chevron = open ? ChevronDownIcon : ChevronRightIcon;
 
   return (
-    <Card className="mt-4 overflow-hidden">
-      <div className="flex flex-wrap items-center gap-x-3 gap-y-1 px-4 py-3">
-        <look.Icon className={`size-4 shrink-0 ${look.className}`} />
-        <span className={cn('font-semibold text-[13.5px]', look.className)}>
-          {check.workflow ?? 'ci'} {look.label}
-        </span>
-        {check.ref && (
-          <span className="font-mono text-[12px] text-faint">
-            {shortRef(check.ref)}
+    <div className="flex min-h-0 flex-1 flex-col">
+      <div className="shrink-0 px-5 pt-4 pb-4">
+        <div className="flex flex-wrap items-center gap-x-3 gap-y-1">
+          <look.Icon className={cn('size-5 shrink-0', look.className)} />
+          <h2 className="font-semibold text-[17px] text-foreground">
+            {workflowOf(check)}
+          </h2>
+          <span className={cn('text-[15px]', look.className)}>
+            {look.label}
           </span>
-        )}
-        {commitHref && (
-          <Link href={commitHref} className="font-mono text-[12px] text-key">
-            {check.sha.slice(0, 8)}
-          </Link>
-        )}
-        <span className="ml-auto flex shrink-0 items-center gap-3 text-[12px] text-faint">
-          {took && <span>{took}</span>}
-          <span>{new Date(check.startedAt).toLocaleString()}</span>
-        </span>
+        </div>
+
+        <div className="mt-4 grid grid-cols-2 gap-4 sm:grid-cols-4">
+          <Field label="Commit">
+            {commitHref ? (
+              <Link href={commitHref} className="font-mono">
+                {check.sha.slice(0, 8)}
+              </Link>
+            ) : (
+              <code className="font-mono">{check.sha.slice(0, 8)}</code>
+            )}
+          </Field>
+          {check.ref && (
+            <Field label="Ref">
+              <span className="font-mono">{shortRef(check.ref)}</span>
+            </Field>
+          )}
+          <Field label="Duration">
+            <span className="tabular-nums">{took ?? 'running'}</span>
+          </Field>
+          <Field label="Started">
+            {new Date(check.startedAt).toLocaleString()}
+          </Field>
+        </div>
       </div>
 
       {steps.length > 0 && (
-        <div className="border-border border-t py-1">
-          {steps.map((step) => (
-            <StepRow key={step.name} step={step} />
-          ))}
+        <div className="shrink-0 border-border border-t py-1">
+          <CheckSteps steps={steps} />
         </div>
       )}
 
-      <div className="border-border border-t">
-        <button
-          type="button"
-          onClick={() => setOpen(!open)}
-          className="flex w-full cursor-pointer items-center gap-1.5 px-4 py-2 text-left text-[12.5px] text-muted-foreground hover:text-foreground"
-        >
-          <Chevron className="size-3.5 shrink-0" />
-          {open ? 'Hide log' : 'Show log'}
-        </button>
-        {open && (
-          <div className="border-border border-t bg-muted/40">
-            <CheckLog runner={runner} check={check} />
-          </div>
-        )}
+      {/* The log takes what the window has left, so a long run reads without
+          moving the readings above it. */}
+      <div className="min-h-0 flex-1 overflow-y-auto border-border border-t">
+        <CheckLog runner={runner} check={check} />
       </div>
-    </Card>
+    </div>
   );
 }
diff --git a/packages/git-ui/src/components/molecules/check-status.jsx b/packages/git-ui/src/components/molecules/check-status.jsx
index b89ff5a..cfe7e39 100644
--- a/packages/git-ui/src/components/molecules/check-status.jsx
+++ b/packages/git-ui/src/components/molecules/check-status.jsx
@@ -1,28 +1,25 @@
-import { useQuery } from '@tanstack/react-query';
-import { checkLook, loadChecks } from '#/lib/checks.js';
+import { checkLook, summaryWords } from '#/lib/checks.js';
 import { cn } from '#/lib/utils.js';
 
 /**
- * The check the repository's runner published for one commit, as one icon.
- * Absent means the repository names no runner, or the runner has not reported
- * on this commit; neither is worth showing.
+ * How a commit's checks ended, as one icon. A commit checked by several
+ * workflows reads as one status: a single failure makes the commit failed,
+ * whatever its other workflows say.
  *
  * The icon carries its words in a title, so a commit list row stays one line
- * and one anchor. The commit page shows the run itself instead.
+ * and one anchor. The commit page shows the runs themselves instead.
  */
-export function CheckStatus({ repo, sha, className }) {
-  const { data } = useQuery({
-    queryKey: ['checks', repo],
-    queryFn: () => loadChecks(repo),
-  });
-  const check = data?.bySha.get(sha);
-  if (!check) return null;
-  const look = checkLook(check.status);
-  const words = `${check.workflow ?? 'ci'} ${look.label}`;
+export function CheckStatus({ summary, runs, className }) {
+  if (!summary) return null;
+  const look = checkLook(summary.status);
+  const words = summaryWords(summary, runs);
 
   return (
     <span title={words} className={cn('inline-flex shrink-0', className)}>
-      <look.Icon className={`size-3.5 ${look.className}`} aria-hidden="true" />
+      <look.Icon
+        className={cn('size-3.5', look.className)}
+        aria-hidden="true"
+      />
       <span className="sr-only">{words}</span>
     </span>
   );
diff --git a/packages/git-ui/src/components/molecules/check-steps.jsx b/packages/git-ui/src/components/molecules/check-steps.jsx
new file mode 100644
index 0000000..735f684
--- /dev/null
+++ b/packages/git-ui/src/components/molecules/check-steps.jsx
@@ -0,0 +1,44 @@
+import { duration } from '#/lib/checks.js';
+import { cn } from '#/lib/utils.js';
+
+/**
+ * What the runner ran, in order, and how each step ended. The exit code
+ * decides how a step's name reads.
+ */
+export function CheckSteps({ steps }) {
+  return (
+    <div className="py-1">
+      {steps.map((step) => {
+        const failed = step.exitCode !== 0;
+        return (
+          <div
+            key={step.name}
+            className="flex items-baseline gap-3 px-4 py-1.5 text-[12.5px]"
+          >
+            <span
+              className={cn(
+                'min-w-0 flex-1 truncate',
+                failed ? 'text-destructive' : 'text-muted-foreground',
+              )}
+            >
+              {step.name}
+            </span>
+            {typeof step.durationMs === 'number' && (
+              <span className="shrink-0 font-mono text-[11.5px] text-faint">
+                {duration(step.durationMs)}
+              </span>
+            )}
+            <span
+              className={cn(
+                'w-12 shrink-0 text-right font-mono text-[11.5px]',
+                failed ? 'text-destructive' : 'text-faint',
+              )}
+            >
+              {failed ? `exit ${step.exitCode}` : 'ok'}
+            </span>
+          </div>
+        );
+      })}
+    </div>
+  );
+}
diff --git a/packages/git-ui/src/components/molecules/code-menu.jsx b/packages/git-ui/src/components/molecules/code-menu.jsx
index f1bec1a..f5a5b71 100644
--- a/packages/git-ui/src/components/molecules/code-menu.jsx
+++ b/packages/git-ui/src/components/molecules/code-menu.jsx
@@ -30,15 +30,18 @@ export function CodeMenu({ repo, httpClone }) {
 
   return (
     <Popover.Root>
+      {/* The same control the ref picker is. Cloning is the one thing this
+          page offers, but a filled button for it would be the only loud
+          surface on a page of flat panels. */}
       <Popover.Trigger
         className={cn(
-          'inline-flex h-8 cursor-pointer items-center gap-1.5 rounded-xl bg-primary px-3 font-semibold text-[13px] text-primary-foreground outline-none transition-all',
-          'hover:bg-primary/90 focus-visible:ring-[3px] focus-visible:ring-ring/50',
+          'inline-flex h-8 cursor-pointer items-center gap-2 rounded-xl border border-input bg-background px-3 text-[13px] outline-none transition-colors',
+          'hover:bg-accent focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50',
         )}
       >
-        <CodeIcon className="size-3.5" />
-        Code
-        <ChevronDownIcon className="size-3.5" />
+        <CodeIcon className="size-3.5 shrink-0 text-faint" />
+        Clone
+        <ChevronDownIcon className="size-3.5 shrink-0 text-faint" />
       </Popover.Trigger>
       <Popover.Portal>
         <Popover.Positioner sideOffset={6} align="end">
diff --git a/packages/git-ui/src/components/molecules/commit-check-status.jsx b/packages/git-ui/src/components/molecules/commit-check-status.jsx
new file mode 100644
index 0000000..b986816
--- /dev/null
+++ b/packages/git-ui/src/components/molecules/commit-check-status.jsx
@@ -0,0 +1,24 @@
+import { useQuery } from '@tanstack/react-query';
+import { CheckStatus } from '#/components/molecules/check-status.jsx';
+import { loadChecks, summarize } from '#/lib/checks.js';
+
+/**
+ * The badge for one commit in a history listing, from the runner's run
+ * listing. Absent means the repository names no runner, or the runner has not
+ * reported on this commit; neither is worth showing.
+ */
+export function CommitCheckStatus({ repo, sha, className }) {
+  const { data } = useQuery({
+    queryKey: ['checks', repo],
+    queryFn: () => loadChecks(repo),
+  });
+  const latest = data?.bySha.get(sha) ?? [];
+
+  return (
+    <CheckStatus
+      summary={summarize(latest)}
+      runs={latest}
+      className={className}
+    />
+  );
+}
diff --git a/packages/git-ui/src/components/molecules/commit-checks.jsx b/packages/git-ui/src/components/molecules/commit-checks.jsx
index 21b3ed5..5626d8d 100644
--- a/packages/git-ui/src/components/molecules/commit-checks.jsx
+++ b/packages/git-ui/src/components/molecules/commit-checks.jsx
@@ -1,11 +1,21 @@
 import { useQuery } from '@tanstack/react-query';
-import { CheckRun } from '#/components/molecules/check-run.jsx';
-import { loadChecks } from '#/lib/checks.js';
+import { CheckDisclosure } from '#/components/molecules/check-disclosure.jsx';
+import {
+  checkLook,
+  loadChecks,
+  summarize,
+  summaryWords,
+} from '#/lib/checks.js';
+import { cn } from '#/lib/utils.js';
 
 /**
- * Every run the repository's runner published for one commit, newest first.
- * A commit usually has one. It has more when someone asked for the check
- * again, and each of those is a separate result worth reading.
+ * Every run the repository's runner published for one commit, newest first,
+ * one line each. A commit usually has one line per workflow. It has more when
+ * someone asked for a workflow again, and each of those is a separate result
+ * worth reading.
+ *
+ * The heading counts the workflows rather than the runs, so a commit re-run
+ * four times still reads as one workflow passing.
  */
 export function CommitChecks({ repo, sha }) {
   const { data } = useQuery({
@@ -15,7 +25,32 @@ export function CommitChecks({ repo, sha }) {
   const runs = (data?.runs ?? []).filter((run) => run.sha === sha);
   if (runs.length === 0) return null;
 
-  return runs.map((run) => (
-    <CheckRun key={run.startedAt} runner={data.runner} check={run} />
-  ));
+  const latest = data?.bySha.get(sha) ?? [];
+  const summary = summarize(latest);
+  const look = checkLook(summary?.status);
+
+  return (
+    <div className="border-border border-b">
+      {summary && (
+        <div className="flex items-center gap-2 border-border border-b bg-muted px-5 py-2.5">
+          <look.Icon className={cn('size-4 shrink-0', look.className)} />
+          <span className="font-semibold text-[13px] text-foreground">
+            {summaryWords(summary, latest)}
+          </span>
+        </div>
+      )}
+      {runs.map((run) => (
+        <CheckDisclosure
+          key={run.rkey ?? run.startedAt}
+          runner={data.runner}
+          check={run}
+          runHref={
+            run.rkey
+              ? `/${encodeURIComponent(repo)}/checks/${run.rkey}`
+              : undefined
+          }
+        />
+      ))}
+    </div>
+  );
 }
diff --git a/packages/git-ui/src/components/molecules/dir-table.jsx b/packages/git-ui/src/components/molecules/dir-table.jsx
new file mode 100644
index 0000000..1d0beb9
--- /dev/null
+++ b/packages/git-ui/src/components/molecules/dir-table.jsx
@@ -0,0 +1,59 @@
+import { FileIcon, FolderIcon, LinkIcon, PackageIcon } from 'lucide-react';
+import { Link } from '#/components/atoms/link.jsx';
+import { bytes } from '#/lib/format.js';
+import { cn } from '#/lib/utils.js';
+
+const ICONS = {
+  dir: FolderIcon,
+  file: FileIcon,
+  symlink: LinkIcon,
+  submodule: PackageIcon,
+};
+
+/**
+ * A directory's entries with their sizes, for the reading pane of a directory
+ * that says nothing about itself. The pane beside it navigates; this says how
+ * big each of those entries is, which the narrow pane has no room for.
+ */
+export function DirTable({ repo, refName, path, entries }) {
+  return (
+    <ul>
+      {entries.map((entry) => {
+        const child = path ? `${path}/${entry.name}` : entry.name;
+        const kind = entry.type === 'dir' ? 'tree' : 'blob';
+        const href = `/${encodeURIComponent(repo)}/${kind}/${encodeURI(refName)}/${encodeURI(child)}`;
+        const Icon = ICONS[entry.type] ?? FileIcon;
+        const row = (
+          <>
+            <Icon
+              className={cn(
+                'size-4 shrink-0',
+                entry.type === 'dir' ? 'text-key' : 'text-faint',
+              )}
+            />
+            <span className="min-w-0 flex-1 truncate">{entry.name}</span>
+            <span className="shrink-0 font-mono text-[12px] text-faint tabular-nums">
+              {entry.type === 'submodule' ? 'submodule' : bytes(entry.size)}
+            </span>
+          </>
+        );
+        return (
+          <li key={entry.name} className="border-border border-b">
+            {entry.type === 'submodule' ? (
+              <span className="flex items-center gap-3 px-6 py-2.5 text-[13.5px] text-faint">
+                {row}
+              </span>
+            ) : (
+              <Link
+                href={href}
+                className="flex items-center gap-3 px-6 py-2.5 text-[13.5px] text-foreground no-underline hover:bg-accent hover:no-underline"
+              >
+                {row}
+              </Link>
+            )}
+          </li>
+        );
+      })}
+    </ul>
+  );
+}
diff --git a/packages/git-ui/src/components/molecules/language-bar.jsx b/packages/git-ui/src/components/molecules/language-bar.jsx
index 2eb29bd..69d6eb7 100644
--- a/packages/git-ui/src/components/molecules/language-bar.jsx
+++ b/packages/git-ui/src/components/molecules/language-bar.jsx
@@ -1,56 +1,96 @@
-import { useState } from 'react';
+import { useRef, useState } from 'react';
 import { percent } from '#/lib/languages.js';
 
+/** Ticks across the whole scale. Each one is a share of the repository. */
+const TICKS = 72;
+
 /**
- * What a repository is written in: one bar of the languages by share, with
- * the one under the pointer named in a chip below it.
+ * What a repository is written in, as a row of ticks read like a gauge: each
+ * language holds the run of ticks its share earns, and the one under the
+ * pointer names itself in a chip below.
+ *
+ * A language too small for a whole tick still gets one, so a listed language
+ * is always visible. The chip is drawn over what follows rather than in the
+ * flow, so the row keeps its height and nothing moves as the pointer crosses
+ * it.
  *
- * The chip is drawn over what follows rather than in the flow, so the header
- * keeps its height and nothing moves as the pointer crosses the bar. Each
- * segment names itself, which is what a screen reader reads in place of the
- * chip a pointer brings up.
+ * The row answers the pointer, not the ticks: which language is under it
+ * comes from how far across the row it is. Ticks are 2px with air between
+ * them, so asking each tick would leave the gaps answering for nobody, and
+ * crossing one run would blink the chip off and on again.
  */
 export function LanguageBar({ languages }) {
   const [hovered, setHovered] = useState(null);
+  const row = useRef(null);
+
+  // Hand out the scale, one language at a time, and let the last one take
+  // whatever rounding left over so the row always ends full. Each tick
+  // carries its own place in the row, which is what names it to React.
+  /** @type {{id: number, language: {name: string, color: string}, index: number}[]} */
+  const ticks = [];
+  languages.forEach((language, index) => {
+    const last = index === languages.length - 1;
+    const count = last
+      ? TICKS - ticks.length
+      : Math.max(1, Math.round((language.share / 100) * TICKS));
+    for (let tick = 0; tick < count; tick++) {
+      ticks.push({ id: ticks.length, language, index });
+    }
+  });
+
+  const words = languages
+    .map((language) => `${language.name} ${percent(language.share)}`)
+    .join(', ');
 
-  /**
-   * The middle of a segment, as a percent across the bar, which is where its
-   * chip points. Near an end the chip would hang off the bar, so it stops
-   * short of both.
-   * @param {number} index
-   */
-  const centerOf = (index) => {
-    let start = 0;
-    for (let i = 0; i < index; i++) start += languages[i].share;
-    return Math.min(90, Math.max(10, start + languages[index].share / 2));
+  /** Which language the pointer stands over, by how far across the row it is. */
+  const track = (event) => {
+    const box = row.current?.getBoundingClientRect();
+    if (!box || box.width === 0) return;
+    const across = (event.clientX - box.left) / box.width;
+    const at = Math.floor(across * TICKS);
+    setHovered(
+      ticks[Math.min(ticks.length - 1, Math.max(0, at))]?.index ?? null,
+    );
   };
 
   return (
-    <section aria-label="Languages" className="relative mb-4">
-      <div className="flex h-1.5 overflow-hidden rounded-full bg-muted">
-        {languages.map((language, index) => (
-          <span
-            key={language.name}
-            role="img"
-            aria-label={`${language.name} ${percent(language.share)}`}
-            className="min-w-[3px]"
-            style={{
-              width: `${language.share}%`,
-              backgroundColor: language.color,
-            }}
-            onMouseEnter={() => setHovered(index)}
-            onMouseLeave={() => setHovered(null)}
-          />
-        ))}
+    <section aria-label="Languages" className="relative">
+      {/* The ticks stand a few pixels tall, which is a hard thing to keep a
+          pointer inside. The reach is taller than they are, and pulled back
+          out of the layout so nothing below it moves. */}
+      {/* biome-ignore lint/a11y/noStaticElementInteractions: the row inside carries the reading; this only widens the reach for a pointer */}
+      <div
+        className="-my-2 py-2"
+        onMouseMove={track}
+        onMouseLeave={() => setHovered(null)}
+      >
+        {/* The ticks keep their own width and spread across whatever room the
+            row has, which is what makes the scale read as an instrument
+            rather than as a filled bar. */}
+        <div
+          ref={row}
+          role="img"
+          aria-label={words}
+          className="flex h-3 items-end justify-between"
+        >
+          {ticks.map(({ id, language, index }) => (
+            <span
+              key={id}
+              aria-hidden="true"
+              className="w-[2px] shrink-0 transition-[height]"
+              style={{
+                height: hovered === index ? '100%' : '60%',
+                backgroundColor: language.color,
+                opacity: hovered === null || hovered === index ? 1 : 0.35,
+              }}
+            />
+          ))}
+        </div>
       </div>
       {hovered !== null && (
-        <span
-          className="-translate-x-1/2 pointer-events-none absolute top-3.5 z-10 flex items-center gap-1.5 rounded-lg border border-border bg-card px-2.5 py-1 text-[12.5px] shadow-sm"
-          style={{ left: `${centerOf(hovered)}%` }}
-          aria-hidden="true"
-        >
+        <span className="pointer-events-none absolute top-4 left-0 z-10 flex items-center gap-1.5 border border-border bg-card px-2 py-1 text-[12px] shadow-sm">
           <span
-            className="size-2.5 shrink-0 rounded-full"
+            className="size-2 shrink-0"
             style={{ backgroundColor: languages[hovered].color }}
           />
           <span className="whitespace-nowrap font-semibold text-foreground">
diff --git a/packages/git-ui/src/components/molecules/latest-commit.jsx b/packages/git-ui/src/components/molecules/latest-commit.jsx
index d553a30..818a20f 100644
--- a/packages/git-ui/src/components/molecules/latest-commit.jsx
+++ b/packages/git-ui/src/components/molecules/latest-commit.jsx
@@ -1,16 +1,17 @@
 import { HistoryIcon } from 'lucide-react';
 import { Link } from '#/components/atoms/link.jsx';
 import { AuthorLine } from '#/components/molecules/author-line.jsx';
-import { CheckStatus } from '#/components/molecules/check-status.jsx';
+import { RefCheckStatus } from '#/components/molecules/ref-check-status.jsx';
 import { timeAgo } from '#/lib/format.js';
 
 /**
  * The commit at the tip of the ref in view, above the file listing: who wrote
- * it, what it said, and how far the history goes.
+ * it, what it said, how its checks ended, and how far the history goes.
  *
  * The count comes from the same walk that produced the commit, so it is the
  * number of commits reachable from this ref rather than a total for the
- * repository. A walk that hit its ceiling reads as "N+".
+ * repository. A walk that hit its ceiling reads as "N+". It is the only route
+ * to the history from this page.
  */
 export function LatestCommit({ repo, refName, commit, count, truncated }) {
   const subject = commit.message.split('\n')[0];
@@ -26,7 +27,7 @@ export function LatestCommit({ repo, refName, commit, count, truncated }) {
       >
         {subject}
       </Link>
-      <CheckStatus repo={repo} sha={commit.sha} />
+      <RefCheckStatus repo={repo} refName={refName} sha={commit.sha} />
       <span className="flex shrink-0 items-center gap-2 text-[12.5px] text-faint">
         <Link
           href={`/${encodeURIComponent(repo)}/commit/${commit.sha}`}
diff --git a/packages/git-ui/src/components/molecules/package-card.jsx b/packages/git-ui/src/components/molecules/package-card.jsx
index f49db4d..2fe80d5 100644
--- a/packages/git-ui/src/components/molecules/package-card.jsx
+++ b/packages/git-ui/src/components/molecules/package-card.jsx
@@ -1,7 +1,6 @@
 import { ChevronDownIcon, ChevronRightIcon } from 'lucide-react';
 import { useState } from 'react';
 import { Badge } from '#/components/atoms/badge.jsx';
-import { Card } from '#/components/atoms/card.jsx';
 import { CopyCommand } from '#/components/molecules/copy-command.jsx';
 import { bytes, timeAgo } from '#/lib/format.js';
 
@@ -36,8 +35,8 @@ export function PackageCard({ pkg }) {
   const noun = pkg.registry === 'oci' ? 'tag' : 'version';
 
   return (
-    <Card className="mt-4 overflow-hidden">
-      <div className="flex flex-wrap items-center gap-x-3 gap-y-1 px-4 py-3">
+    <li className="border-border border-b">
+      <div className="flex flex-wrap items-center gap-x-3 gap-y-1 px-5 pt-4 pb-2">
         <span className="min-w-0 truncate font-semibold text-[13.5px]">
           {pkg.name}
         </span>
@@ -49,7 +48,7 @@ export function PackageCard({ pkg }) {
         </span>
       </div>
 
-      <div className="border-border border-t px-4 py-3">
+      <div className="px-5 pb-3">
         <CopyCommand
           command={pkg.install}
           label={`Copy the command that installs ${pkg.name}`}
@@ -57,11 +56,11 @@ export function PackageCard({ pkg }) {
       </div>
 
       {count > 0 && (
-        <div className="border-border border-t">
+        <>
           <button
             type="button"
             onClick={() => setOpen(!open)}
-            className="flex w-full cursor-pointer items-center gap-1.5 px-4 py-2 text-left text-[12.5px] text-muted-foreground hover:text-foreground"
+            className="flex w-full cursor-pointer items-center gap-1.5 px-5 pb-3 text-left text-[12.5px] text-muted-foreground hover:text-foreground"
           >
             <Chevron className="size-3.5 shrink-0" />
             {count} {count === 1 ? noun : `${noun}s`}
@@ -73,8 +72,8 @@ export function PackageCard({ pkg }) {
               ))}
             </div>
           )}
-        </div>
+        </>
       )}
-    </Card>
+    </li>
   );
 }
diff --git a/packages/git-ui/src/components/molecules/ref-check-status.jsx b/packages/git-ui/src/components/molecules/ref-check-status.jsx
new file mode 100644
index 0000000..0e0d0a5
--- /dev/null
+++ b/packages/git-ui/src/components/molecules/ref-check-status.jsx
@@ -0,0 +1,36 @@
+import { useQuery } from '@tanstack/react-query';
+import { CheckStatus } from '#/components/molecules/check-status.jsx';
+import { loadChecks, loadRefChecks, summarize } from '#/lib/checks.js';
+
+/**
+ * The badge for the commit at the tip of a ref. The runner keeps a record
+ * naming the latest run of each workflow for one ref, so this costs one
+ * record read whatever the history's length. The run listing behind the other
+ * badges reads a bounded number of pages, and a repository with more runs
+ * than that loses its oldest badges.
+ *
+ * Both sources are filtered to the tip commit. A ref whose newest run is
+ * against an earlier commit shows no badge, rather than reporting another
+ * commit's result beside this one's sha.
+ */
+export function RefCheckStatus({ repo, refName, sha, className }) {
+  const { data } = useQuery({
+    queryKey: ['ref-checks', repo, refName],
+    queryFn: () => loadRefChecks(repo, refName),
+  });
+  const { data: listing } = useQuery({
+    queryKey: ['checks', repo],
+    queryFn: () => loadChecks(repo),
+  });
+
+  const named = (data?.runs ?? []).filter((run) => run.sha === sha);
+  const latest = named.length > 0 ? named : (listing?.bySha.get(sha) ?? []);
+
+  return (
+    <CheckStatus
+      summary={summarize(latest)}
+      runs={latest}
+      className={className}
+    />
+  );
+}
diff --git a/packages/git-ui/src/components/molecules/repo-gauges.jsx b/packages/git-ui/src/components/molecules/repo-gauges.jsx
new file mode 100644
index 0000000..123d8c1
--- /dev/null
+++ b/packages/git-ui/src/components/molecules/repo-gauges.jsx
@@ -0,0 +1,59 @@
+import { useQuery } from '@tanstack/react-query';
+import { ActivityTicks } from '#/components/molecules/activity-ticks.jsx';
+import { LanguageBar } from '#/components/molecules/language-bar.jsx';
+import { ACTIVITY_WEEKS } from '#/lib/activity.js';
+import { account, isEmpty, readerFor, repoRecord } from '#/lib/git.js';
+import { languageShares, percent } from '#/lib/languages.js';
+import { useHistory } from '#/lib/source.js';
+
+/**
+ * Two readings of the repository as a whole: what it is written in, and how
+ * lately it was worked on. Both stand under the file pane, so they keep the
+ * reader's company whatever file or directory is open.
+ *
+ * Each walk reads objects the page has already downloaded, and both share
+ * their keys with the pages that want the same answers, so a gauge costs no
+ * request of its own.
+ */
+export function RepoGauges({ repo, refName }) {
+  const record = repoRecord(repo);
+  const asked = Boolean(record) && !isEmpty(record);
+
+  const { data: languages } = useQuery({
+    queryKey: ['languages', repo, refName],
+    enabled: asked,
+    queryFn: async () => {
+      const listing = await readerFor(repo).listFiles(
+        account.did,
+        repo,
+        refName,
+      );
+      return languageShares(listing?.files ?? []);
+    },
+  });
+
+  const { data: history } = useHistory(repo, refName);
+
+  if (!languages?.length && !history?.dates?.length) return null;
+
+  return (
+    <div className="flex flex-col gap-3.5">
+      {languages && languages.length > 0 && (
+        <div>
+          <LanguageBar languages={languages} />
+          <div className="mt-1.5 truncate text-[10px] text-faint uppercase tracking-[0.12em]">
+            {languages[0].name} {percent(languages[0].share)}
+          </div>
+        </div>
+      )}
+      {history?.dates && history.dates.length > 0 && (
+        <div>
+          <ActivityTicks dates={history.dates} />
+          <div className="mt-1.5 text-[10px] text-faint uppercase tracking-[0.12em]">
+            {ACTIVITY_WEEKS} weeks
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}
diff --git a/packages/git-ui/src/components/molecules/repo-list-skeleton.jsx b/packages/git-ui/src/components/molecules/repo-list-skeleton.jsx
new file mode 100644
index 0000000..21bd039
--- /dev/null
+++ b/packages/git-ui/src/components/molecules/repo-list-skeleton.jsx
@@ -0,0 +1,27 @@
+import { Skeleton } from '#/components/atoms/skeleton.jsx';
+
+/** One cell's shape: a name line, a description, a line of readings. */
+function RepoCellSkeleton() {
+  return (
+    <div className="flex flex-col gap-3 border-border border-r border-b px-4 py-4">
+      <Skeleton className="h-[18px] w-40 max-w-full" />
+      <Skeleton className="h-4 w-56 max-w-full" />
+      <Skeleton className="h-3.5 w-48 max-w-full" />
+    </div>
+  );
+}
+
+/**
+ * The repository grid, before any records arrive. Only a first visit sees it;
+ * a revisit paints the cached rows instead.
+ */
+export function RepoListSkeleton() {
+  return (
+    <div className="grid auto-rows-min grid-cols-1 sm:grid-cols-2">
+      <RepoCellSkeleton />
+      <RepoCellSkeleton />
+      <RepoCellSkeleton />
+      <RepoCellSkeleton />
+    </div>
+  );
+}
diff --git a/packages/git-ui/src/components/molecules/page-skeleton.jsx b/packages/git-ui/src/components/molecules/repo-page-skeleton.jsx
similarity index 54%
rename from packages/git-ui/src/components/molecules/page-skeleton.jsx
rename to packages/git-ui/src/components/molecules/repo-page-skeleton.jsx
index 9505f92..0f68b9b 100644
--- a/packages/git-ui/src/components/molecules/page-skeleton.jsx
+++ b/packages/git-ui/src/components/molecules/repo-page-skeleton.jsx
@@ -1,46 +1,16 @@
-import { Card } from '#/components/atoms/card.jsx';
 import { Skeleton } from '#/components/atoms/skeleton.jsx';
 
-/** One repository card's shape: a name line, a description, a fact line. */
-function RepoCardSkeleton() {
-  return (
-    <Card className="px-5 py-4">
-      <Skeleton className="h-[18px] w-44 max-w-full" />
-      <Skeleton className="mt-2 h-4 w-80 max-w-full" />
-      <Skeleton className="mt-3 h-3.5 w-64 max-w-full" />
-    </Card>
-  );
-}
-
 /**
- * The repository list, before any records arrive. Only a first visit sees
- * it; a revisit paints the cached rows instead.
- */
-export function RepoListSkeleton() {
-  return (
-    <div className="mt-2 flex flex-col gap-2.5">
-      <RepoCardSkeleton />
-      <RepoCardSkeleton />
-      <RepoCardSkeleton />
-    </div>
-  );
-}
-
-/**
- * A repository screen, shaped like the tree page it stands in for:
- * breadcrumb line, toolbar, a file table, a README block. Shown while
- * discovery still names the account, so the real page has nothing to say
- * yet.
+ * A repository screen, shaped like the tree page it stands in for: the ref
+ * and clone controls, a file table, a README block. Shown while discovery
+ * still names the account, so the real page has nothing to say yet.
  */
 export function RepoPageSkeleton() {
   return (
     <>
-      <div className="border-border border-b pb-3">
-        <Skeleton className="h-6 w-56 max-w-full" />
-      </div>
-      <div className="flex flex-wrap items-center justify-between gap-3 pt-1 pb-4">
+      <div className="flex flex-wrap items-center justify-between gap-3 pt-4 pb-4">
         <Skeleton className="h-8 w-44" />
-        <Skeleton className="h-8 w-60 max-w-full" />
+        <Skeleton className="h-8 w-28" />
       </div>
       <div className="overflow-hidden rounded-2xl border border-border">
         <div className="border-border border-b bg-muted px-4 py-3">
diff --git a/packages/git-ui/src/components/molecules/repo-tabs.jsx b/packages/git-ui/src/components/molecules/repo-tabs.jsx
new file mode 100644
index 0000000..d0be777
--- /dev/null
+++ b/packages/git-ui/src/components/molecules/repo-tabs.jsx
@@ -0,0 +1,91 @@
+import { linkedPackagesOf, runnerOf } from '@pdsjs/git/rules';
+import { useQuery } from '@tanstack/react-query';
+import {
+  CircleCheckIcon,
+  CodeIcon,
+  GitCommitVerticalIcon,
+  PackageIcon,
+} from 'lucide-react';
+import { Link } from '#/components/atoms/link.jsx';
+import { repoConfig } from '#/lib/git.js';
+import { cn } from '#/lib/utils.js';
+
+/** What each section is called, for the tabs and for the heading above them. */
+export const SECTION_TITLES = {
+  code: 'Code',
+  commits: 'Commits',
+  checks: 'Checks',
+  packages: 'Packages',
+};
+
+const ICONS = {
+  code: CodeIcon,
+  commits: GitCommitVerticalIcon,
+  checks: CircleCheckIcon,
+  packages: PackageIcon,
+};
+
+/**
+ * The sections of one repository, on a band of their own between the heading
+ * and whatever the open section puts above its list. A page that reached a
+ * dead end before, a run or a package or a file, carries the way back to
+ * everything else.
+ *
+ * Which sections exist comes from the repository's config record, one cheap
+ * read that is already in hand from elsewhere in the app. Reading the runner's
+ * check listing would answer the same question and cost a listing walk, which
+ * a reader looking at a package should not pay for.
+ */
+export function RepoTabs({ repo, active }) {
+  const { data: config } = useQuery({
+    queryKey: ['config', repo],
+    queryFn: () => repoConfig(repo),
+    staleTime: Number.POSITIVE_INFINITY,
+  });
+  const packages = linkedPackagesOf(config);
+  const base = `/${encodeURIComponent(repo)}`;
+
+  const tabs = [
+    { key: 'code', href: base },
+    { key: 'commits', href: `${base}/commits` },
+    ...(runnerOf(config) ? [{ key: 'checks', href: `${base}/checks` }] : []),
+    ...(packages.length > 0
+      ? [{ key: 'packages', href: `${base}/packages`, count: packages.length }]
+      : []),
+  ];
+
+  return (
+    <nav
+      aria-label="Repository sections"
+      className="flex min-w-0 items-center gap-1 overflow-x-auto"
+    >
+      {tabs.map((tab) => {
+        const Icon = ICONS[tab.key];
+        const open = tab.key === active;
+        return (
+          <Link
+            key={tab.key}
+            href={tab.href}
+            aria-current={open ? 'page' : undefined}
+            className={cn(
+              'flex shrink-0 items-center gap-2 rounded-[3px] px-3 py-1.5 text-[13.5px] no-underline hover:no-underline',
+              open
+                ? 'bg-accent font-semibold text-foreground'
+                : 'text-muted-foreground hover:bg-accent/60 hover:text-foreground',
+            )}
+          >
+            <Icon
+              className={cn('size-3.5', open ? 'text-key' : 'text-faint')}
+            />
+            {SECTION_TITLES[tab.key]}
+            {typeof tab.count === 'number' && (
+              <span className="rounded-[3px] bg-muted px-1.5 py-px text-[11.5px] text-faint tabular-nums">
+                {tab.count}
+              </span>
+            )}
+          </Link>
+        );
+      })}
+    </nav>
+  );
+}
diff --git a/packages/git-ui/src/components/molecules/source-panes.jsx b/packages/git-ui/src/components/molecules/source-panes.jsx
new file mode 100644
index 0000000..2e97bf8
--- /dev/null
+++ b/packages/git-ui/src/components/molecules/source-panes.jsx
@@ -0,0 +1,70 @@
+import { CornerLeftUpIcon } from 'lucide-react';
+import { Link } from '#/components/atoms/link.jsx';
+import { Skeleton } from '#/components/atoms/skeleton.jsx';
+import { RepoGauges } from '#/components/molecules/repo-gauges.jsx';
+import { TreeList } from '#/components/molecules/tree-list.jsx';
+import { parentOf, useDirectory } from '#/lib/source.js';
+
+/**
+ * The source view: one directory down the left, whatever the reader opened
+ * down the right. Opening a file keeps its neighbours in view, which is what
+ * makes reading a repository feel like reading a checkout.
+ *
+ * `dirPath` is the directory the pane lists. A directory's own page lists
+ * itself; a file's page lists the directory holding it, with that file marked.
+ * The pane keeps its own scroll, so a long listing and a long file each move
+ * on their own.
+ */
+export function SourcePanes({
+  repo,
+  refName,
+  dirPath,
+  selected = '',
+  children,
+}) {
+  const { data: entries } = useDirectory(repo, refName, dirPath);
+  const up = dirPath
+    ? `/${encodeURIComponent(repo)}/tree/${encodeURI(refName)}${
+        parentOf(dirPath) ? `/${encodeURI(parentOf(dirPath))}` : ''
+      }`
+    : '';
+
+  return (
+    // The panes fill what the window has left and each takes its own scroll,
+    // so a long listing and a long file move past each other.
+    <div className="flex min-h-0 flex-1 items-stretch border-border border-t">
+      <aside className="hidden w-72 shrink-0 flex-col border-border border-r md:flex">
+        <div className="min-h-0 flex-1 overflow-y-auto">
+          {up && (
+            <Link
+              href={up}
+              className="flex items-center gap-2.5 border-border border-b px-4 py-2 text-[13px] text-muted-foreground no-underline hover:bg-accent hover:text-foreground hover:no-underline"
+            >
+              <CornerLeftUpIcon className="size-3.5 shrink-0 text-faint" />
+              <span className="truncate font-mono">{dirPath}</span>
+            </Link>
+          )}
+          {entries ? (
+            <TreeList
+              repo={repo}
+              refName={refName}
+              path={dirPath}
+              entries={entries}
+              selected={selected}
+            />
+          ) : (
+            <div className="flex flex-col gap-2 p-4">
+              <Skeleton className="h-4 w-32" />
+              <Skeleton className="h-4 w-24" />
+              <Skeleton className="h-4 w-36" />
+            </div>
+          )}
+        </div>
+        <div className="border-border border-t px-4 py-3.5">
+          <RepoGauges repo={repo} refName={refName} />
+        </div>
+      </aside>
+      <div className="min-w-0 flex-1 overflow-y-auto">{children}</div>
+    </div>
+  );
+}
diff --git a/packages/git-ui/src/components/molecules/tree-list.jsx b/packages/git-ui/src/components/molecules/tree-list.jsx
index bcef649..97f9ae5 100644
--- a/packages/git-ui/src/components/molecules/tree-list.jsx
+++ b/packages/git-ui/src/components/molecules/tree-list.jsx
@@ -1,6 +1,5 @@
 import { FileIcon, FolderIcon, LinkIcon, PackageIcon } from 'lucide-react';
 import { Link } from '#/components/atoms/link.jsx';
-import { bytes } from '#/lib/format.js';
 import { cn } from '#/lib/utils.js';
 
 const ICONS = {
@@ -10,15 +9,21 @@ const ICONS = {
   submodule: PackageIcon,
 };
 
-/** One directory's entries, directories first, then files, both by name. */
-export function TreeList({ repo, refName, path, entries }) {
+/**
+ * One directory's entries, directories first, then files, both by name.
+ *
+ * `selected` is the path of the file open beside this listing, which reads as
+ * the row a reader is standing on.
+ */
+export function TreeList({ repo, refName, path, entries, selected = '' }) {
   return (
-    <ul>
+    <ul className="py-1">
       {entries.map((entry) => {
         const child = path ? `${path}/${entry.name}` : entry.name;
         const kind = entry.type === 'dir' ? 'tree' : 'blob';
         const href = `/${encodeURIComponent(repo)}/${kind}/${encodeURI(refName)}/${encodeURI(child)}`;
         const Icon = ICONS[entry.type] ?? FileIcon;
+        const open = child === selected;
         const row = (
           <>
             <Icon
@@ -27,25 +32,27 @@ export function TreeList({ repo, refName, path, entries }) {
                 entry.type === 'dir' ? 'text-key' : 'text-faint',
               )}
             />
-            <span className="min-w-0 flex-1 break-all">{entry.name}</span>
-            <span className="shrink-0 text-[12px] text-faint tabular-nums">
-              {entry.type === 'submodule' ? 'submodule' : bytes(entry.size)}
+            <span className="min-w-0 flex-1 truncate" title={entry.name}>
+              {entry.name}
             </span>
           </>
         );
         return (
-          <li
-            key={entry.name}
-            className="border-border border-t bg-card first:border-t-0"
-          >
+          <li key={entry.name}>
             {entry.type === 'submodule' ? (
-              <span className="flex items-center gap-2.5 px-4 py-2.5 text-sm text-muted-foreground">
+              <span className="flex items-center gap-2.5 px-4 py-[5px] text-[13px] text-faint">
                 {row}
               </span>
             ) : (
               <Link
                 href={href}
-                className="flex items-center gap-2.5 px-4 py-2.5 text-foreground text-sm no-underline hover:bg-accent hover:no-underline"
+                aria-current={open ? 'page' : undefined}
+                className={cn(
+                  'flex items-center gap-2.5 border-l-2 px-4 py-[5px] text-[13px] no-underline hover:bg-accent hover:no-underline',
+                  open
+                    ? 'border-key bg-accent font-semibold text-foreground'
+                    : 'border-transparent text-muted-foreground hover:text-foreground',
+                )}
               >
                 {row}
               </Link>
diff --git a/packages/git-ui/src/lib/activity.js b/packages/git-ui/src/lib/activity.js
new file mode 100644
index 0000000..2463d96
--- /dev/null
+++ b/packages/git-ui/src/lib/activity.js
@@ -0,0 +1,8 @@
+/** How far back the commit-activity gauge reads, and the bucket it counts in. */
+
+export const WEEK_MS = 7 * 24 * 60 * 60 * 1000;
+
+/** Weeks the gauge covers, newest at the right. */
+export const ACTIVITY_WEEKS = 24;
+
+export const ACTIVITY_WINDOW_MS = ACTIVITY_WEEKS * WEEK_MS;
diff --git a/packages/git-ui/src/lib/checks.js b/packages/git-ui/src/lib/checks.js
index d909381..560da04 100644
--- a/packages/git-ui/src/lib/checks.js
+++ b/packages/git-ui/src/lib/checks.js
@@ -13,10 +13,18 @@
 // badge, and none of them is an error worth showing.
 
 import { runnerOf } from '@pdsjs/git/rules';
+import { latestCheckKey } from '@pdsjs/git-ci/spec';
 import { CheckIcon, CircleDotIcon, XIcon } from 'lucide-react';
-import { account, didDocumentUrl, repoConfig } from './git.js';
+import {
+  account,
+  didDocumentUrl,
+  repoConfig,
+  repoRecord,
+  shortRef,
+} from './git.js';
 
 const CHECK_COLLECTION = 'dev.pdsjs.git.check';
+const LATEST_CHECK_COLLECTION = 'dev.pdsjs.git.latestCheck';
 const REPO_COLLECTION = 'dev.pdsjs.git.repo';
 
 /**
@@ -38,6 +46,7 @@ const MAX_PAGES = 3;
  * @property {string} sha
  * @property {string} status
  * @property {string} startedAt
+ * @property {string} [rkey] - the record key, which addresses the run page
  * @property {string} [ref]
  * @property {string} [workflow]
  * @property {string} [finishedAt]
@@ -45,6 +54,14 @@ const MAX_PAGES = 3;
  * @property {{ref?: {$link?: string}}} [logs]
  */
 
+/**
+ * How a whole commit reads: one status for the badge, and the count behind it.
+ * @typedef {Object} CheckSummary
+ * @property {string} status - the status the badge shows
+ * @property {number} passed - workflows that succeeded
+ * @property {number} total - workflows that reported
+ */
+
 /** How each check status reads, and the colour it reads in. */
 export const CHECK_LOOKS = {
   success: { label: 'passed', className: 'text-success', Icon: CheckIcon },
@@ -65,6 +82,14 @@ export const CHECK_LOOKS = {
 export const checkLook = (status) =>
   CHECK_LOOKS[/** @type {keyof CHECK_LOOKS} */ (status)] ?? CHECK_LOOKS.running;
 
+/**
+ * What a run's workflow is called. The field is optional in the lexicon, and a
+ * runner that publishes one workflow may leave it out.
+ * @param {{workflow?: string}} check
+ * @returns {string}
+ */
+export const workflowOf = (check) => check.workflow || 'ci';
+
 /**
  * An elapsed time in the largest units that stay readable.
  * @param {number} ms
@@ -97,7 +122,7 @@ export function runDuration(check) {
  * @property {string} service - the runner's PDS origin
  */
 
-/** @typedef {{runner: CheckRunner|null, runs: CheckRun[], bySha: Map<string, CheckRun>}} RepoChecks */
+/** @typedef {{runner: CheckRunner|null, runs: CheckRun[], bySha: Map<string, CheckRun[]>}} RepoChecks */
 
 /**
  * This repository's runs, newest first, from the runner's raw listing. The
@@ -112,35 +137,119 @@ export function runsFor(records, subjectUri) {
   /** @type {CheckRun[]} */
   const runs = [];
   for (const entry of records) {
-    const value = /** @type {{value?: unknown}|null} */ (entry)?.value;
+    const row = /** @type {{value?: unknown, uri?: unknown}|null} */ (entry);
     const check = /** @type {CheckRun & {subject?: {uri?: unknown}}} */ (
-      value ?? {}
+      row?.value ?? {}
     );
     if (check.subject?.uri !== subjectUri) continue;
     if (typeof check.sha !== 'string' || typeof check.startedAt !== 'string') {
       continue;
     }
-    runs.push(check);
+    const rkey = String(row?.uri ?? '')
+      .split('/')
+      .pop();
+    runs.push(rkey ? { ...check, rkey } : check);
   }
   return runs.sort((a, b) => b.startedAt.localeCompare(a.startedAt));
 }
 
 /**
- * The newest run per commit, which is what a one-icon badge shows. A commit
- * checked more than once, because someone asked for a re-run, keeps its most
- * recent result here.
+ * The newest run of each workflow. A workflow asked for again reports twice,
+ * and only the most recent of those says where that workflow stands.
  * @param {CheckRun[]} runs - newest first
- * @returns {Map<string, CheckRun>}
+ * @returns {CheckRun[]}
+ */
+export function latestPerWorkflow(runs) {
+  /** @type {CheckRun[]} */
+  const latest = [];
+  for (const run of runs) {
+    if (latest.some((seen) => workflowOf(seen) === workflowOf(run))) continue;
+    latest.push(run);
+  }
+  return latest;
+}
+
+/**
+ * The runs of each commit, newest commit first. A commit's group holds every
+ * run against it, re-runs included, in the order the listing gave them.
+ * @param {CheckRun[]} runs - newest first
+ * @returns {{sha: string, runs: CheckRun[]}[]}
+ */
+export function groupBySha(runs) {
+  /** @type {Map<string, {sha: string, runs: CheckRun[]}>} */
+  const groups = new Map();
+  for (const run of runs) {
+    const group = groups.get(run.sha);
+    if (group) group.runs.push(run);
+    else groups.set(run.sha, { sha: run.sha, runs: [run] });
+  }
+  return [...groups.values()];
+}
+
+/**
+ * The newest run of each workflow, per commit. One commit may be checked by
+ * several workflows, and each of them reports separately.
+ * @param {CheckRun[]} runs - newest first
+ * @returns {Map<string, CheckRun[]>}
  */
 export function latestBySha(runs) {
-  /** @type {Map<string, CheckRun>} */
+  /** @type {Map<string, CheckRun[]>} */
   const bySha = new Map();
-  for (const run of runs) {
-    if (!bySha.has(run.sha)) bySha.set(run.sha, run);
+  for (const group of groupBySha(runs)) {
+    bySha.set(group.sha, latestPerWorkflow(group.runs));
   }
   return bySha;
 }
 
+/**
+ * One status for a set of runs. A single failure decides the whole set: a
+ * commit whose test workflow failed is a failed commit, whatever its other
+ * workflows say. An unfinished run reads as running, and only a set where
+ * every workflow succeeded reads as passed.
+ * @param {CheckRun[]} runs - the latest run of each workflow
+ * @returns {CheckSummary|null} null for a commit no workflow reported on
+ */
+export function summarize(runs) {
+  if (runs.length === 0) return null;
+  const passed = runs.filter((run) => run.status === 'success').length;
+  const failed = runs.some(
+    (run) => run.status === 'failure' || run.status === 'error',
+  );
+  const status = failed
+    ? (runs.find((run) => run.status === 'error')?.status ?? 'failure')
+    : passed === runs.length
+      ? 'success'
+      : 'running';
+  return { status, passed, total: runs.length };
+}
+
+/**
+ * How a summary reads in words, for the badge's title and the commit page's
+ * heading. A single workflow names itself; several are counted.
+ * @param {CheckSummary} summary
+ * @param {CheckRun[]} runs - the runs the summary counts
+ * @returns {string}
+ */
+export function summaryWords(summary, runs) {
+  if (runs.length === 1) {
+    return `${workflowOf(runs[0])} ${checkLook(summary.status).label}`;
+  }
+  if (summary.status === 'running') {
+    return `${summary.passed} of ${summary.total} workflows passed, the rest running`;
+  }
+  return `${summary.passed} of ${summary.total} workflows passed`;
+}
+
+/**
+ * Every workflow that reported, in the order a reader meets them, for the
+ * filter above a run listing.
+ * @param {CheckRun[]} runs
+ * @returns {string[]}
+ */
+export function workflowNames(runs) {
+  return [...new Set(runs.map(workflowOf))];
+}
+
 /**
  * Where a finished check's log reads from: the blob on the runner's PDS.
  * @param {CheckRunner|null|undefined} runner
@@ -195,6 +304,98 @@ function pdsEndpoint(doc) {
   ).replace(/\/$/, '');
 }
 
+/**
+ * One runner lookup per repository, kept once it is read. Two screens want it,
+ * the run listing and the ref badge, and it changes only when the repository's
+ * owner names another runner.
+ * @type {Map<string, Promise<CheckRunner|null>>}
+ */
+const runners = new Map();
+
+/**
+ * The runner a repository names, and the PDS that answers for it. Null where
+ * the repository names no runner, or the runner's DID does not resolve.
+ * @param {string} repo - repository name, the record rkey
+ * @returns {Promise<CheckRunner|null>}
+ */
+export function repoRunner(repo) {
+  let pending = runners.get(repo);
+  if (!pending) {
+    pending = (async () => {
+      try {
+        const did = runnerOf(await repoConfig(repo));
+        if (!did) return null;
+        const doc = await (await fetch(didDocumentUrl(did))).json();
+        const service = pdsEndpoint(doc);
+        return service ? { did, service } : null;
+      } catch {
+        return null;
+      }
+    })();
+    runners.set(repo, pending);
+  }
+  return pending;
+}
+
+/**
+ * The full name of a ref the page names in short form. The repository record
+ * holds both, so this needs no round trip. A name that matches no ref reads as
+ * a branch, which is what a URL naming a deleted branch means.
+ * @param {string} repo
+ * @param {string} refName - short form, e.g. main
+ * @returns {string}
+ */
+export function fullRefName(repo, refName) {
+  const refs = /** @type {{refs?: {name: string}[]}|null} */ (repoRecord(repo))
+    ?.refs;
+  const found = (refs ?? []).find((ref) => shortRef(ref.name) === refName);
+  return found?.name ?? `refs/heads/${refName}`;
+}
+
+/**
+ * The latest run of each workflow for one ref, from the record the runner
+ * keeps for exactly this question. It costs one getRecord, where the listing
+ * below costs a page walk, and it stays right for a repository whose history
+ * runs past that walk's ceiling.
+ *
+ * The entries carry no steps and no log. They name the check record that
+ * holds both, which is what the rkey addresses.
+ * @param {string} repo - repository name, the record rkey
+ * @param {string} refName - short form, e.g. main
+ * @returns {Promise<{runner: CheckRunner|null, runs: CheckRun[]}>}
+ */
+export async function loadRefChecks(repo, refName) {
+  const runner = await repoRunner(repo);
+  if (!runner) return { runner: null, runs: [] };
+  try {
+    const params = new URLSearchParams({
+      repo: runner.did,
+      collection: LATEST_CHECK_COLLECTION,
+      rkey: latestCheckKey(account.did, repo, fullRefName(repo, refName)),
+    });
+    const res = await fetch(
+      `${runner.service}/xrpc/com.atproto.repo.getRecord?${params}`,
+    );
+    if (!res.ok) return { runner, runs: [] };
+    const value = /** @type {{value?: {checks?: unknown[]}}} */ (
+      await res.json()
+    ).value;
+    /** @type {CheckRun[]} */
+    const runs = [];
+    for (const entry of value?.checks ?? []) {
+      const check = /** @type {CheckRun & {check?: {uri?: unknown}}} */ (entry);
+      if (typeof check.sha !== 'string') continue;
+      const rkey = String(check.check?.uri ?? '')
+        .split('/')
+        .pop();
+      runs.push(rkey ? { ...check, rkey } : check);
+    }
+    return { runner, runs };
+  } catch {
+    return { runner, runs: [] };
+  }
+}
+
 /**
  * @param {string} repo - repository name, the record rkey
  * @returns {Promise<RepoChecks>}
@@ -203,12 +404,9 @@ export async function loadChecks(repo) {
   /** @type {RepoChecks} */
   const none = { runner: null, runs: [], bySha: new Map() };
   try {
-    const did = runnerOf(await repoConfig(repo));
-    if (!did) return none;
-
-    const doc = await (await fetch(didDocumentUrl(did))).json();
-    const service = pdsEndpoint(doc);
-    if (!service) return none;
+    const runner = await repoRunner(repo);
+    if (!runner) return none;
+    const { did, service } = runner;
 
     /** @type {unknown[]} */
     const records = [];
@@ -234,7 +432,7 @@ export async function loadChecks(repo) {
 
     const subjectUri = `at://${account.did}/${REPO_COLLECTION}/${repo}`;
     const runs = runsFor(records, subjectUri);
-    return { runner: { did, service }, runs, bySha: latestBySha(runs) };
+    return { runner, runs, bySha: latestBySha(runs) };
   } catch {
     return none;
   }
diff --git a/packages/git-ui/src/lib/git.js b/packages/git-ui/src/lib/git.js
index 6e23391..2af6943 100644
--- a/packages/git-ui/src/lib/git.js
+++ b/packages/git-ui/src/lib/git.js
@@ -395,6 +395,45 @@ export function repoConfig(name) {
   return pending;
 }
 
+/**
+ * @typedef {Object} CommitLabel
+ * @property {string} subject - the message's first line
+ * @property {string} author - the commit's author ident
+ */
+
+/**
+ * What to call each commit reachable from the named refs, by sha. A run names
+ * the commit it checked by sha alone, and a sha names nothing to a reader.
+ *
+ * This opens the repository, which the checks page otherwise never needs. The
+ * caller runs it behind the paint and labels its rows when it answers.
+ * @param {string} name - repository name, the record rkey
+ * @param {string[]} refs - full ref names, e.g. refs/heads/main
+ * @param {number} [limit] - commits to walk per ref
+ * @returns {Promise<Map<string, CommitLabel>>}
+ */
+export async function commitLabels(name, refs, limit = 100) {
+  const reader = readerFor(name);
+  /** @type {Map<string, CommitLabel>} */
+  const labels = new Map();
+  for (const ref of refs) {
+    try {
+      const listing = await reader.listCommits(account.did, name, ref, limit);
+      for (const commit of listing?.commits ?? []) {
+        if (labels.has(commit.sha)) continue;
+        labels.set(commit.sha, {
+          subject: String(commit.message).split('\n')[0],
+          author: commit.author,
+        });
+      }
+    } catch {
+      // A ref the repository no longer holds labels nothing, and the rows
+      // that wanted it read as their sha.
+    }
+  }
+  return labels;
+}
+
 /**
  * How much of the repository being opened has arrived. One repository opens
  * at a time, so a single value carries it.
diff --git a/packages/git-ui/src/lib/source.js b/packages/git-ui/src/lib/source.js
new file mode 100644
index 0000000..632221d
--- /dev/null
+++ b/packages/git-ui/src/lib/source.js
@@ -0,0 +1,88 @@
+// The directory behind the source view's left pane.
+//
+// Both halves of the view want the same listing: the pane lists it, and a
+// directory's own page reads it again to find the README. One query key
+// serves both, so opening a file beside a listing costs no second walk.
+
+import { useQuery } from '@tanstack/react-query';
+import { ACTIVITY_WINDOW_MS } from './activity.js';
+import { account, isEmpty, readerFor, repoRecord } from './git.js';
+
+/** Deep enough to count and date every commit a repository of this shape holds. */
+const COUNT_LIMIT = 50000;
+
+/**
+ * The directory holding a path. A path with no slash is at the root, whose
+ * parent is the root itself.
+ * @param {string} path
+ * @returns {string}
+ */
+export function parentOf(path) {
+  const cut = path.lastIndexOf('/');
+  return cut === -1 ? '' : path.slice(0, cut);
+}
+
+/**
+ * One directory's entries at one ref. An empty repository has none, and asks
+ * for nothing.
+ * @param {string} repo
+ * @param {string} refName
+ * @param {string} path - the directory, '' for the root
+ */
+export function useDirectory(repo, refName, path) {
+  const record = repoRecord(repo);
+  return useQuery({
+    queryKey: ['dir', repo, refName, path],
+    enabled: Boolean(record) && !isEmpty(record),
+    queryFn: async () => {
+      const listing = await readerFor(repo).listTree(
+        account.did,
+        repo,
+        refName,
+        path,
+      );
+      return listing?.entries ?? [];
+    },
+  });
+}
+
+/**
+ * The tip of a ref, how far its history runs, and when its recent commits
+ * were made. The walk reads every commit, which on an indexed chain is a
+ * download of its own, so a caller paints first and fills this in.
+ *
+ * Three readers want the same answer: the latest-commit line, the commit
+ * count beside it, and the activity gauge. One key serves them all.
+ * @param {string} repo
+ * @param {string} refName
+ */
+export function useHistory(repo, refName) {
+  const record = repoRecord(repo);
+  return useQuery({
+    queryKey: ['history', repo, refName],
+    enabled: Boolean(record) && !isEmpty(record),
+    queryFn: async () => {
+      const log = await readerFor(repo).listCommits(
+        account.did,
+        repo,
+        refName,
+        COUNT_LIMIT,
+      );
+      // The gauge reads dates alone, and only the recent ones. The walk may
+      // hold tens of thousands of commits; keeping the whole of it in query
+      // state to draw a line of ticks would be waste. A commit dates itself
+      // in epoch milliseconds, which is what the gauge buckets.
+      const floor = Date.now() - ACTIVITY_WINDOW_MS;
+      const dates = [];
+      for (const commit of log?.commits ?? []) {
+        if (commit.committedAt >= floor) dates.push(commit.committedAt);
+      }
+      return {
+        head: log?.commits[0] ?? null,
+        count: log?.commits.length ?? 0,
+        truncated: Boolean(log?.truncated),
+        dates,
+      };
+    },
+  });
+}
diff --git a/packages/git-ui/src/pages/check.jsx b/packages/git-ui/src/pages/check.jsx
new file mode 100644
index 0000000..6e37abd
--- /dev/null
+++ b/packages/git-ui/src/pages/check.jsx
@@ -0,0 +1,48 @@
+import { useQuery } from '@tanstack/react-query';
+import { Skeleton } from '#/components/atoms/skeleton.jsx';
+import { CheckRun } from '#/components/molecules/check-run.jsx';
+import { EmptyState } from '#/components/molecules/empty-state.jsx';
+import { loadChecks } from '#/lib/checks.js';
+import { repoRecord } from '#/lib/git.js';
+
+/**
+ * One run, addressed by the record key the runner wrote it under. The listing
+ * this reads from is the one the checks page already loaded, so arriving from
+ * that page costs no request; arriving from a shared link loads it.
+ */
+export function CheckPage({ repo, rkey }) {
+  const record = repoRecord(repo);
+  const { data } = useQuery({
+    queryKey: ['checks', repo],
+    queryFn: () => loadChecks(repo),
+  });
+
+  if (!record) {
+    return <p className="py-16 text-center text-faint">No such repository.</p>;
+  }
+
+  const check = data?.runs.find((run) => run.rkey === rkey);
+
+  return (
+    <>
+      {!data ? (
+        <div className="px-5 py-5">
+          <Skeleton className="h-64" />
+        </div>
+      ) : !check ? (
+        <div className="px-5 py-10">
+          <EmptyState
+            title="No such run"
+            description="The runner published no check under this key, or it has fallen past the runs this page reads."
+          />
+        </div>
+      ) : (
+        <CheckRun
+          runner={data.runner}
+          check={check}
+          commitHref={`/${encodeURIComponent(repo)}/commit/${check.sha}`}
+        />
+      )}
+    </>
+  );
+}
diff --git a/packages/git-ui/src/pages/checks.jsx b/packages/git-ui/src/pages/checks.jsx
index 7c39470..4b7c629 100644
--- a/packages/git-ui/src/pages/checks.jsx
+++ b/packages/git-ui/src/pages/checks.jsx
@@ -1,56 +1,99 @@
 import { useQuery } from '@tanstack/react-query';
+import { useState } from 'react';
 import { Skeleton } from '#/components/atoms/skeleton.jsx';
-import { Breadcrumbs } from '#/components/molecules/breadcrumbs.jsx';
-import { CheckRun } from '#/components/molecules/check-run.jsx';
+import { CheckFilter } from '#/components/molecules/check-filter.jsx';
+import { CheckGroup } from '#/components/molecules/check-group.jsx';
 import { EmptyState } from '#/components/molecules/empty-state.jsx';
-import { loadChecks } from '#/lib/checks.js';
-import { defaultRef, repoRecord } from '#/lib/git.js';
+import {
+  groupBySha,
+  loadChecks,
+  workflowNames,
+  workflowOf,
+} from '#/lib/checks.js';
+import { commitLabels, repoRecord } from '#/lib/git.js';
 
 /**
- * Every run the repository's runner published, newest first. One commit may
- * appear more than once: a re-run is its own record, and both results stay
- * readable.
+ * Every run the repository's runner published, newest first, grouped by the
+ * commit it ran against. One commit's group holds a line per workflow, and a
+ * second line for a workflow someone asked for again.
  */
 export function ChecksPage({ repo }) {
   const record = repoRecord(repo);
+  const [workflow, setWorkflow] = useState('');
   const { data } = useQuery({
     queryKey: ['checks', repo],
     queryFn: () => loadChecks(repo),
   });
 
+  // What each commit is called. This opens the repository, which costs the
+  // bundle download the run listing itself never needs, so it runs behind the
+  // paint: the groups render under their shas and take their subjects here.
+  const refs = [
+    ...new Set((data?.runs ?? []).map((run) => run.ref).filter(Boolean)),
+  ];
+  const { data: labels } = useQuery({
+    queryKey: ['commit-labels', repo, refs],
+    enabled: refs.length > 0,
+    queryFn: () => commitLabels(repo, /** @type {string[]} */ (refs)),
+    staleTime: Number.POSITIVE_INFINITY,
+  });
+
   if (!record) {
     return <p className="py-16 text-center text-faint">No such repository.</p>;
   }
 
+  const all = data?.runs ?? [];
+  const runs = all.filter((run) => !workflow || workflowOf(run) === workflow);
+  const counts = {};
+  for (const run of all) {
+    counts[workflowOf(run)] = (counts[workflowOf(run)] ?? 0) + 1;
+  }
+
+  if (!data) {
+    return (
+      <div className="px-5 py-5">
+        <Skeleton className="h-40" />
+      </div>
+    );
+  }
+
+  if (all.length === 0) {
+    return (
+      <div className="px-5 py-10">
+        <EmptyState
+          title="No checks"
+          description={
+            data.runner
+              ? "The repository's runner has published no results yet."
+              : 'This repository names no check runner.'
+          }
+        />
+      </div>
+    );
+  }
+
   return (
-    <>
-      <div className="border-border border-b pb-3">
-        <Breadcrumbs repo={repo} refName={defaultRef(record)} path="" />
+    <div className="flex min-h-0 flex-1 flex-col">
+      <div className="shrink-0 px-4 py-2.5">
+        <CheckFilter
+          workflows={workflowNames(all)}
+          counts={counts}
+          total={all.length}
+          value={workflow}
+          onSelect={setWorkflow}
+        />
       </div>
 
-      {!data ? (
-        <Skeleton className="mt-4 h-40" />
-      ) : data.runs.length === 0 ? (
-        <div className="mt-5">
-          <EmptyState
-            title="No checks"
-            description={
-              data.runner
-                ? "The repository's runner has published no results yet."
-                : 'This repository names no check runner.'
-            }
-          />
-        </div>
-      ) : (
-        data.runs.map((run) => (
-          <CheckRun
-            key={`${run.sha}:${run.startedAt}`}
-            runner={data.runner}
-            check={run}
-            commitHref={`/${encodeURIComponent(repo)}/commit/${run.sha}`}
+      <ul className="min-h-0 flex-1 overflow-y-auto border-border border-t">
+        {groupBySha(runs).map((group) => (
+          <CheckGroup
+            key={group.sha}
+            repo={repo}
+            group={group}
+            label={labels?.get(group.sha)}
           />
-        ))
-      )}
-    </>
+        ))}
+      </ul>
+    </div>
   );
 }
diff --git a/packages/git-ui/src/pages/commit.jsx b/packages/git-ui/src/pages/commit.jsx
index db62b27..3771fe7 100644
--- a/packages/git-ui/src/pages/commit.jsx
+++ b/packages/git-ui/src/pages/commit.jsx
@@ -1,23 +1,11 @@
 import { useQuery } from '@tanstack/react-query';
-import { GitCommitVerticalIcon } from 'lucide-react';
 import { useCallback, useRef, useState } from 'react';
-import { buttonVariants } from '#/components/atoms/button.jsx';
-import { Card } from '#/components/atoms/card.jsx';
-import { Link } from '#/components/atoms/link.jsx';
 import { AuthorLine } from '#/components/molecules/author-line.jsx';
-import { Breadcrumbs } from '#/components/molecules/breadcrumbs.jsx';
 import { CommitChecks } from '#/components/molecules/commit-checks.jsx';
 import { DiffFile } from '#/components/molecules/diff-file.jsx';
 import { DiffTree } from '#/components/molecules/diff-tree.jsx';
 import { ReadingRepo } from '#/components/molecules/reading-repo.jsx';
-import {
-  account,
-  defaultRef,
-  readerFor,
-  repoRecord,
-  repoSize,
-} from '#/lib/git.js';
-import { cn } from '#/lib/utils.js';
+import { account, readerFor, repoRecord, repoSize } from '#/lib/git.js';
 
 export function CommitPage({ repo, sha }) {
   const record = repoRecord(repo);
@@ -46,80 +34,64 @@ export function CommitPage({ repo, sha }) {
   const [subject, ...rest] = (data?.message ?? '').split('\n');
   const body = rest.join('\n').trim();
 
-  return (
-    <>
-      <div className="flex flex-wrap items-center justify-between gap-3 border-border border-b pb-3">
-        <Breadcrumbs repo={repo} refName={defaultRef(record)} path="" />
-        <Link
-          href={`/${encodeURIComponent(repo)}/commits/${encodeURI(defaultRef(record))}`}
-          className={cn(
-            buttonVariants({ variant: 'outline', size: 'sm' }),
-            'text-foreground no-underline hover:no-underline',
-          )}
-        >
-          <GitCommitVerticalIcon />
-          History
-        </Link>
+  if (error) {
+    return <p className="px-5 py-10 text-destructive">{error.message}</p>;
+  }
+  if (!data) {
+    return (
+      <div className="px-5 py-6">
+        <ReadingRepo size={repoSize(record)} />
       </div>
+    );
+  }
 
-      {error && <p className="py-10 text-destructive">{error.message}</p>}
-      {!data && !error && (
-        <div className="mt-4">
-          <ReadingRepo size={repoSize(record)} />
+  return (
+    <div className="flex min-h-0 flex-1 flex-col">
+      {/* What the commit says, above the panes and holding its place while
+          the diffs move. */}
+      <div className="shrink-0 px-5 py-4">
+        <h2 className="break-words font-semibold text-[16px]">{subject}</h2>
+        {body && (
+          <pre className="mt-2.5 whitespace-pre-wrap break-words font-mono text-[13px] text-muted-foreground">
+            {body}
+          </pre>
+        )}
+        <div className="mt-2.5 flex flex-wrap gap-x-4 gap-y-1 text-[12.5px] text-faint">
+          <AuthorLine ident={data.author} size="md" />
+          <span>{new Date(data.committedAt).toLocaleString()}</span>
+          <code className="break-all font-mono text-key">{data.sha}</code>
+          <span>
+            {data.files.length} {data.files.length === 1 ? 'file' : 'files'}{' '}
+            changed
+          </span>
+          {data.parents.length > 1 && (
+            <span>merge, shown against the first parent</span>
+          )}
         </div>
-      )}
+      </div>
 
-      {data && (
-        <>
-          <Card className="mt-4 px-5 py-4">
-            <h2 className="break-words font-semibold text-[16px]">{subject}</h2>
-            {body && (
-              <pre className="mt-2.5 whitespace-pre-wrap break-words font-mono text-[13px] text-muted-foreground">
-                {body}
-              </pre>
-            )}
-            <div className="mt-3 flex flex-wrap gap-x-4 gap-y-1 text-[12.5px] text-faint">
-              <AuthorLine ident={data.author} size="md" />
-              <span>{new Date(data.committedAt).toLocaleString()}</span>
-              <code className="break-all font-mono text-key">{data.sha}</code>
-            </div>
-            <div className="mt-3 flex flex-wrap gap-x-4 gap-y-1 border-border border-t pt-3 text-[12.5px] text-faint">
-              <span>
-                {data.files.length} {data.files.length === 1 ? 'file' : 'files'}{' '}
-                changed
-              </span>
-              {data.parents.length > 1 && (
-                <span>merge, shown against the first parent</span>
-              )}
-            </div>
-          </Card>
+      <div className="flex min-h-0 flex-1 items-stretch border-border border-t">
+        {/* The tree stays put while the diffs move under it, and steps aside
+            on a narrow screen where there is no room for two columns. */}
+        {data.files.length > 1 && (
+          <aside className="hidden w-72 shrink-0 overflow-y-auto border-border border-r px-2 py-3 lg:block">
+            <DiffTree files={data.files} onPick={pick} picked={picked} />
+          </aside>
+        )}
+        <div className="min-w-0 flex-1 overflow-y-auto">
           <CommitChecks repo={repo} sha={data.sha} />
-          {data.files.length > 1 ? (
-            <div className="mt-4 flex items-start gap-6">
-              {/* The tree stays put while the diffs scroll under it, and
-                  steps aside on a narrow screen where there is no room for
-                  two columns. */}
-              <aside className="sticky top-4 hidden max-h-[calc(100vh-2rem)] w-64 shrink-0 overflow-y-auto px-1 lg:block">
-                <DiffTree files={data.files} onPick={pick} picked={picked} />
-              </aside>
-              <div className="min-w-0 flex-1">
-                {data.files.map((file) => (
-                  <DiffFile
-                    key={file.path}
-                    file={file}
-                    ref={(node) => {
-                      if (node) sections.current.set(file.path, node);
-                      else sections.current.delete(file.path);
-                    }}
-                  />
-                ))}
-              </div>
-            </div>
-          ) : (
-            data.files.map((file) => <DiffFile key={file.path} file={file} />)
-          )}
-        </>
-      )}
-    </>
+          {data.files.map((file) => (
+            <DiffFile
+              key={file.path}
+              file={file}
+              ref={(node) => {
+                if (node) sections.current.set(file.path, node);
+                else sections.current.delete(file.path);
+              }}
+            />
+          ))}
+        </div>
+      </div>
+    </div>
   );
 }
diff --git a/packages/git-ui/src/pages/commits.jsx b/packages/git-ui/src/pages/commits.jsx
index a4a5022..df46518 100644
--- a/packages/git-ui/src/pages/commits.jsx
+++ b/packages/git-ui/src/pages/commits.jsx
@@ -1,8 +1,8 @@
 import { useQuery } from '@tanstack/react-query';
+import { GitCommitVerticalIcon } from 'lucide-react';
 import { Link } from '#/components/atoms/link.jsx';
 import { AuthorLine } from '#/components/molecules/author-line.jsx';
-import { Breadcrumbs } from '#/components/molecules/breadcrumbs.jsx';
-import { CheckStatus } from '#/components/molecules/check-status.jsx';
+import { CommitCheckStatus } from '#/components/molecules/commit-check-status.jsx';
 import { ReadingRepo } from '#/components/molecules/reading-repo.jsx';
 import { RefSelect } from '#/components/molecules/ref-select.jsx';
 import { timeAgo } from '#/lib/format.js';
@@ -27,9 +27,8 @@ export function CommitsPage({ repo, refName }) {
   }
 
   return (
-    <>
-      <div className="flex flex-wrap items-center justify-between gap-3 border-border border-b pb-3">
-        <Breadcrumbs repo={repo} refName={refName} path="" />
+    <div className="flex min-h-0 flex-1 flex-col">
+      <div className="flex shrink-0 flex-wrap items-center gap-3 px-5 py-3">
         <RefSelect
           repo={record}
           value={refName}
@@ -38,46 +37,53 @@ export function CommitsPage({ repo, refName }) {
           }
         />
       </div>
-      {error && <p className="py-10 text-destructive">{error.message}</p>}
-      {!data && !error && (
-        <div className="mt-4">
-          <ReadingRepo size={repoSize(record)} />
-        </div>
-      )}
-      {data && (
-        <ul className="mt-4 overflow-hidden rounded-2xl border border-border">
-          {data.commits.map((commit) => (
-            <li
-              key={commit.sha}
-              className="border-border border-t first:border-t-0"
-            >
-              <Link
-                href={`/${encodeURIComponent(repo)}/commit/${commit.sha}`}
-                className="block bg-card px-4 py-3 text-foreground no-underline hover:bg-accent hover:no-underline"
-              >
-                <span className="flex items-start justify-between gap-2 text-[14px]">
-                  <span className="min-w-0 break-words">
-                    {commit.message.split('\n')[0]}
+
+      <div className="min-h-0 flex-1 overflow-y-auto border-border border-t">
+        {error && (
+          <p className="px-5 py-10 text-destructive">{error.message}</p>
+        )}
+        {!data && !error && (
+          <div className="px-5 py-6">
+            <ReadingRepo size={repoSize(record)} />
+          </div>
+        )}
+        {data && (
+          <ul>
+            {data.commits.map((commit) => (
+              <li key={commit.sha} className="border-border border-b">
+                <Link
+                  href={`/${encodeURIComponent(repo)}/commit/${commit.sha}`}
+                  className="flex items-start gap-3 px-5 py-3.5 text-foreground no-underline hover:bg-accent hover:no-underline"
+                >
+                  <GitCommitVerticalIcon className="mt-0.5 size-4 shrink-0 text-faint" />
+                  <span className="min-w-0 flex-1">
+                    <span className="block break-words text-[14px]">
+                      {commit.message.split('\n')[0]}
+                    </span>
+                    <span className="mt-1 flex flex-wrap items-center gap-x-2.5 gap-y-1 text-[12.5px] text-faint">
+                      <AuthorLine ident={commit.author} />
+                      <code className="font-mono text-key">
+                        {commit.sha.slice(0, 8)}
+                      </code>
+                      <span>{timeAgo(commit.committedAt)}</span>
+                    </span>
                   </span>
-                  <CheckStatus repo={repo} sha={commit.sha} className="mt-1" />
-                </span>
-                <span className="mt-1.5 flex flex-wrap items-center gap-x-3 gap-y-1 text-[12.5px] text-faint">
-                  <code className="font-mono text-key">
-                    {commit.sha.slice(0, 8)}
-                  </code>
-                  <AuthorLine ident={commit.author} />
-                  <span>{timeAgo(commit.committedAt)}</span>
-                </span>
-              </Link>
-            </li>
-          ))}
-        </ul>
-      )}
-      {data?.truncated && (
-        <p className="py-6 text-center text-[13px] text-faint">
-          Showing the newest {LIMIT} commits.
-        </p>
-      )}
-    </>
+                  <CommitCheckStatus
+                    repo={repo}
+                    sha={commit.sha}
+                    className="mt-1"
+                  />
+                </Link>
+              </li>
+            ))}
+          </ul>
+        )}
+        {data?.truncated && (
+          <p className="px-5 py-5 text-[12.5px] text-faint">
+            Showing the newest {LIMIT} commits.
+          </p>
+        )}
+      </div>
+    </div>
   );
 }
diff --git a/packages/git-ui/src/pages/file.jsx b/packages/git-ui/src/pages/file.jsx
index 61bf67c..7770c35 100644
--- a/packages/git-ui/src/pages/file.jsx
+++ b/packages/git-ui/src/pages/file.jsx
@@ -5,6 +5,8 @@ import { buttonVariants } from '#/components/atoms/button.jsx';
 import { Card } from '#/components/atoms/card.jsx';
 import { Breadcrumbs } from '#/components/molecules/breadcrumbs.jsx';
 import { ReadingRepo } from '#/components/molecules/reading-repo.jsx';
+import { RefSelect } from '#/components/molecules/ref-select.jsx';
+import { SourcePanes } from '#/components/molecules/source-panes.jsx';
 import { bytes } from '#/lib/format.js';
 import {
   account,
@@ -15,6 +17,8 @@ import {
   repoSize,
 } from '#/lib/git.js';
 import { highlightBlock, languageFor } from '#/lib/highlight.js';
+import { useNavigate } from '#/lib/navigation.jsx';
+import { parentOf } from '#/lib/source.js';
 import { cn } from '#/lib/utils.js';
 
 /** The bytes of an image, as an object URL that lives as long as the view. */
@@ -32,6 +36,7 @@ function useObjectUrl(image) {
 }
 
 export function FilePage({ repo, refName, path }) {
+  const navigate = useNavigate();
   const record = repoRecord(repo);
 
   const { data, error } = useQuery({
@@ -55,35 +60,54 @@ export function FilePage({ repo, refName, path }) {
 
   return (
     <>
-      <div className="flex flex-wrap items-center justify-between gap-3 border-border border-b pb-3">
-        <Breadcrumbs repo={repo} refName={refName} path={path} />
-        {capabilities.rawFiles && (
-          <a
-            href={rawUrl(repo, refName, path)}
-            className={cn(
-              buttonVariants({ variant: 'outline', size: 'sm' }),
-              'text-foreground no-underline hover:no-underline',
-            )}
-          >
-            <FileCodeIcon />
-            Raw
-          </a>
-        )}
-      </div>
-      {error && <p className="py-10 text-destructive">{error.message}</p>}
-      {!data && !error && (
-        <div className="mt-4">
-          <ReadingRepo size={repoSize(repoRecord(repo))} />
+      <div className="flex flex-wrap items-center justify-between gap-3 px-5 py-3">
+        <div className="flex min-w-0 flex-wrap items-center gap-3">
+          <RefSelect
+            repo={record}
+            value={refName}
+            onSelect={(next) =>
+              navigate(
+                `/${encodeURIComponent(repo)}/blob/${encodeURI(next)}/${encodeURI(path)}`,
+              )
+            }
+          />
+          <Breadcrumbs repo={repo} refName={refName} path={path} />
         </div>
-      )}
-      {data?.file && (
-        <>
-          <div className="flex gap-4 px-1 pt-3 text-[12.5px] text-faint">
-            <span>{bytes(data.file.size)}</span>
-            {data.file.mode === '120000' && <span>symlink</span>}
+        <span className="flex items-center gap-4 text-[12.5px] text-faint">
+          <span className="font-mono">{bytes(data?.file?.size)}</span>
+          {data?.file?.mode === '120000' && <span>symlink</span>}
+          {capabilities.rawFiles && (
+            <a
+              href={rawUrl(repo, refName, path)}
+              className={cn(
+                buttonVariants({ variant: 'outline', size: 'sm' }),
+                'text-foreground no-underline hover:no-underline',
+              )}
+            >
+              <FileCodeIcon />
+              Raw
+            </a>
+          )}
+        </span>
+      </div>
+
+      <SourcePanes
+        repo={repo}
+        refName={refName}
+        dirPath={parentOf(path)}
+        selected={path}
+      >
+        {error && (
+          <p className="px-5 py-10 text-destructive">{error.message}</p>
+        )}
+        {!data && !error && (
+          <div className="px-5 py-6">
+            <ReadingRepo size={repoSize(repoRecord(repo))} />
           </div>
-          {data.image ? (
-            <Card className="mt-3 flex justify-center p-4">
+        )}
+        {data?.file &&
+          (data.image ? (
+            <Card className="m-5 flex justify-center p-4">
               {imageUrl && (
                 <img
                   src={imageUrl}
@@ -93,11 +117,11 @@ export function FilePage({ repo, refName, path }) {
               )}
             </Card>
           ) : data.file.text !== null ? (
-            <Card className="mt-3 overflow-x-auto">
+            <div className="overflow-x-auto">
               <div className="flex min-w-max font-mono text-[12.5px] leading-6">
                 <pre
                   aria-hidden="true"
-                  className="shrink-0 select-none border-border border-r py-4 pr-3 pl-4 text-right text-faint tabular-nums"
+                  className="shrink-0 select-none border-border border-r py-4 pr-3 pl-5 text-right text-faint tabular-nums"
                 >
                   {data.file.text
                     .replace(/\n$/, '')
@@ -108,7 +132,7 @@ export function FilePage({ repo, refName, path }) {
                 {/* highlight.js escapes the source it is given, so nothing
                     in the file can reach the page as markup. */}
                 <pre
-                  className="py-4 pr-4 pl-4"
+                  className="py-4 pr-5 pl-4"
                   // biome-ignore lint/security/noDangerouslySetInnerHtml: the highlighter escapes its input
                   dangerouslySetInnerHTML={{
                     __html: highlightBlock(
@@ -118,16 +142,15 @@ export function FilePage({ repo, refName, path }) {
                   }}
                 />
               </div>
-            </Card>
+            </div>
           ) : (
-            <p className="mt-3 rounded-2xl border border-border bg-card px-4 py-4 text-[13px] text-muted-foreground">
+            <p className="px-5 py-6 text-[13px] text-muted-foreground">
               {data.file.binary
                 ? `Binary file, ${bytes(data.file.size)}.`
                 : `File is ${bytes(data.file.size)}, too large to show.`}
             </p>
-          )}
-        </>
-      )}
+          ))}
+      </SourcePanes>
     </>
   );
 }
diff --git a/packages/git-ui/src/pages/packages.jsx b/packages/git-ui/src/pages/packages.jsx
index 2367313..4475004 100644
--- a/packages/git-ui/src/pages/packages.jsx
+++ b/packages/git-ui/src/pages/packages.jsx
@@ -1,10 +1,9 @@
 import { useQuery } from '@tanstack/react-query';
 import { PackageIcon } from 'lucide-react';
 import { Skeleton } from '#/components/atoms/skeleton.jsx';
-import { Breadcrumbs } from '#/components/molecules/breadcrumbs.jsx';
 import { EmptyState } from '#/components/molecules/empty-state.jsx';
 import { PackageCard } from '#/components/molecules/package-card.jsx';
-import { defaultRef, repoRecord } from '#/lib/git.js';
+import { repoRecord } from '#/lib/git.js';
 import { loadPackages } from '#/lib/packages.js';
 
 /**
@@ -25,14 +24,12 @@ export function PackagesPage({ repo }) {
 
   return (
     <>
-      <div className="border-border border-b pb-3">
-        <Breadcrumbs repo={repo} refName={defaultRef(record)} path="" />
-      </div>
-
       {!data ? (
-        <Skeleton className="mt-4 h-40" />
+        <div className="px-5 py-5">
+          <Skeleton className="h-40" />
+        </div>
       ) : data.length === 0 ? (
-        <div className="mt-5">
+        <div className="px-5 py-10">
           <EmptyState
             icon={<PackageIcon />}
             title="No packages"
@@ -40,9 +37,11 @@ export function PackagesPage({ repo }) {
           />
         </div>
       ) : (
-        data.map((pkg) => (
-          <PackageCard key={`${pkg.registry}:${pkg.name}`} pkg={pkg} />
-        ))
+        <ul className="min-h-0 flex-1 overflow-y-auto">
+          {data.map((pkg) => (
+            <PackageCard key={`${pkg.registry}:${pkg.name}`} pkg={pkg} />
+          ))}
+        </ul>
       )}
     </>
   );
diff --git a/packages/git-ui/src/pages/repos.jsx b/packages/git-ui/src/pages/repos.jsx
index fab372b..607b0b2 100644
--- a/packages/git-ui/src/pages/repos.jsx
+++ b/packages/git-ui/src/pages/repos.jsx
@@ -1,9 +1,14 @@
 import { useQuery } from '@tanstack/react-query';
-import { FolderGitIcon } from 'lucide-react';
-import { Card } from '#/components/atoms/card.jsx';
+import {
+  ArrowUpFromLineIcon,
+  FolderGitIcon,
+  GitBranchIcon,
+  TagIcon,
+} from 'lucide-react';
 import { Link } from '#/components/atoms/link.jsx';
+import { AccountPanel } from '#/components/molecules/account-panel.jsx';
 import { EmptyState } from '#/components/molecules/empty-state.jsx';
-import { RepoListSkeleton } from '#/components/molecules/page-skeleton.jsx';
+import { RepoListSkeleton } from '#/components/molecules/repo-list-skeleton.jsx';
 import { bytes, timeAgo } from '#/lib/format.js';
 import {
   branchRefs,
@@ -14,20 +19,24 @@ import {
   tagRefs,
 } from '#/lib/git.js';
 
-/** One line summarizing a repository's shape. */
-function summary(repo) {
-  const facts = [];
-  if (isEmpty(repo)) {
-    facts.push('nothing pushed yet');
-  } else {
-    const branches = branchRefs(repo).length;
-    facts.push(`${branches} ${branches === 1 ? 'branch' : 'branches'}`);
-    const tags = tagRefs(repo).length;
-    if (tags > 0) facts.push(`${tags} ${tags === 1 ? 'tag' : 'tags'}`);
-    facts.push(bytes(repoSize(repo)));
-  }
-  if (repo.updatedAt) facts.push(`pushed ${timeAgo(repo.updatedAt)}`);
-  return facts.join(' · ');
+/**
+ * How many times this repository has been pushed to. Every push appends a
+ * bundle to the chain, so the chain's length counts them, and no packfile has
+ * to be opened to know it.
+ */
+const pushes = (repo) => (repo.bundles || []).length;
+
+/** One reading: an icon, a number, and what the number counts. */
+function Metric({ icon, value, unit }) {
+  return (
+    <span className="flex items-center gap-1.5" title={`${value} ${unit}`}>
+      {icon}
+      <span className="font-semibold text-foreground tabular-nums">
+        {value}
+      </span>
+      <span className="text-faint">{unit}</span>
+    </span>
+  );
 }
 
 export function ReposPage() {
@@ -63,29 +72,68 @@ export function ReposPage() {
   }
 
   return (
-    <ul className="mt-2 flex flex-col gap-2.5">
-      {data.map((repo) => (
-        <li key={repo.name}>
-          <Link
-            href={`/${encodeURIComponent(repo.name)}`}
-            className="block no-underline hover:no-underline"
-          >
-            <Card className="px-5 py-4 transition-colors hover:border-input hover:bg-accent">
-              <span className="block font-semibold text-[15px] text-key">
+    <div className="flex min-h-0 flex-1 items-stretch">
+      <aside className="hidden w-80 shrink-0 border-border border-r lg:block">
+        <AccountPanel repos={data} />
+      </aside>
+      {/* One panel divided by rules rather than a stack of separate tiles: the
+          repositories of one account read as one instrument. */}
+      <ul className="grid min-w-0 flex-1 auto-rows-min grid-cols-1 overflow-y-auto sm:grid-cols-2">
+        {data.map((repo) => (
+          <li key={repo.name} className="border-border border-r border-b">
+            <Link
+              href={`/${encodeURIComponent(repo.name)}`}
+              className="flex h-full flex-col gap-3 px-4 py-4 text-foreground no-underline transition-colors hover:bg-accent hover:no-underline"
+            >
+              <span className="font-semibold text-[15px] text-key">
                 {repo.name}
               </span>
-              {repo.description && (
-                <span className="mt-1 block text-[14px] text-muted-foreground">
-                  {repo.description}
-                </span>
-              )}
-              <span className="mt-2 block text-[12.5px] text-faint">
-                {summary(repo)}
+              <span className="flex-1 text-[13.5px] text-muted-foreground">
+                {repo.description || (
+                  <span className="text-faint">No description</span>
+                )}
+              </span>
+              <span className="flex flex-wrap items-center gap-x-3 gap-y-1 text-[12px] text-muted-foreground">
+                {isEmpty(repo) ? (
+                  <span className="text-faint">nothing pushed yet</span>
+                ) : (
+                  <>
+                    <Metric
+                      icon={<GitBranchIcon className="size-3.5 text-faint" />}
+                      value={branchRefs(repo).length}
+                      unit={
+                        branchRefs(repo).length === 1 ? 'branch' : 'branches'
+                      }
+                    />
+                    {tagRefs(repo).length > 0 && (
+                      <Metric
+                        icon={<TagIcon className="size-3.5 text-faint" />}
+                        value={tagRefs(repo).length}
+                        unit={tagRefs(repo).length === 1 ? 'tag' : 'tags'}
+                      />
+                    )}
+                    <Metric
+                      icon={
+                        <ArrowUpFromLineIcon className="size-3.5 text-faint" />
+                      }
+                      value={pushes(repo)}
+                      unit={pushes(repo) === 1 ? 'push' : 'pushes'}
+                    />
+                    <span className="font-mono text-[11.5px] text-faint">
+                      {bytes(repoSize(repo))}
+                    </span>
+                  </>
+                )}
+                {repo.updatedAt && (
+                  <span className="ml-auto shrink-0 text-faint">
+                    {timeAgo(repo.updatedAt)}
+                  </span>
+                )}
               </span>
-            </Card>
-          </Link>
-        </li>
-      ))}
-    </ul>
+            </Link>
+          </li>
+        ))}
+      </ul>
+    </div>
   );
 }
diff --git a/packages/git-ui/src/pages/tree.jsx b/packages/git-ui/src/pages/tree.jsx
index 7226e60..1551852 100644
--- a/packages/git-ui/src/pages/tree.jsx
+++ b/packages/git-ui/src/pages/tree.jsx
@@ -1,25 +1,14 @@
 import { useQuery } from '@tanstack/react-query';
-import {
-  CircleCheckIcon,
-  GitBranchIcon,
-  GitCommitVerticalIcon,
-  PackageIcon,
-  TagIcon,
-} from 'lucide-react';
-import { buttonVariants } from '#/components/atoms/button.jsx';
-import { Card } from '#/components/atoms/card.jsx';
-import { Link } from '#/components/atoms/link.jsx';
+import { GitBranchIcon, TagIcon } from 'lucide-react';
 import { Skeleton } from '#/components/atoms/skeleton.jsx';
 import { Breadcrumbs } from '#/components/molecules/breadcrumbs.jsx';
-import { CodeMenu } from '#/components/molecules/code-menu.jsx';
+import { DirTable } from '#/components/molecules/dir-table.jsx';
 import { EmptyState } from '#/components/molecules/empty-state.jsx';
-import { LanguageBar } from '#/components/molecules/language-bar.jsx';
 import { LatestCommit } from '#/components/molecules/latest-commit.jsx';
 import { Markdown } from '#/components/molecules/markdown.jsx';
 import { ReadingRepo } from '#/components/molecules/reading-repo.jsx';
 import { RefSelect } from '#/components/molecules/ref-select.jsx';
-import { TreeList } from '#/components/molecules/tree-list.jsx';
-import { loadChecks } from '#/lib/checks.js';
+import { SourcePanes } from '#/components/molecules/source-panes.jsx';
 import {
   account,
   branchRefs,
@@ -29,94 +18,39 @@ import {
   repoSize,
   tagRefs,
 } from '#/lib/git.js';
-import { languageShares } from '#/lib/languages.js';
 import { useNavigate } from '#/lib/navigation.jsx';
-import { loadPackages } from '#/lib/packages.js';
-import { cn } from '#/lib/utils.js';
+import { useDirectory, useHistory } from '#/lib/source.js';
 
 const README = /^readme(\.md|\.txt|\.markdown)?$/i;
 
-/**
- * Deep enough to count every commit a repository of this shape holds. The
- * walk runs over the objects already in memory, so the ceiling is a guard
- * rather than a budget.
- */
-const COUNT_LIMIT = 50000;
-
-export function TreePage({ repo, refName, path, httpClone }) {
+export function TreePage({ repo, refName, path }) {
   const navigate = useNavigate();
   const record = repoRecord(repo);
 
-  const { data, error } = useQuery({
-    queryKey: ['tree', repo, refName, path],
-    enabled: Boolean(record) && !isEmpty(record),
-    queryFn: async () => {
-      const reader = readerFor(repo);
-      const listing = await reader.listTree(account.did, repo, refName, path);
-      const readme = listing?.entries.find(
-        (entry) => entry.type === 'file' && README.test(entry.name),
-      );
-      const file = readme
-        ? await reader.readFile(
-            account.did,
-            repo,
-            refName,
-            path ? `${path}/${readme.name}` : readme.name,
-          )
-        : null;
-      return {
-        listing,
-        readme: readme ? { name: readme.name, file } : null,
-      };
-    },
-  });
-
-  // The tip of the ref and how far its history runs. The walk reads every
-  // commit, which on an indexed chain is a download of its own, so the file
-  // list paints first and this line fills in.
-  const { data: history } = useQuery({
-    queryKey: ['tree-head', repo, refName],
-    enabled: Boolean(record) && !isEmpty(record),
-    queryFn: async () => {
-      const log = await readerFor(repo).listCommits(
-        account.did,
-        repo,
-        refName,
-        COUNT_LIMIT,
-      );
-      return {
-        head: log?.commits[0] ?? null,
-        count: log?.commits.length ?? 0,
-        truncated: Boolean(log?.truncated),
-      };
-    },
-  });
+  // The listing the pane beside this one draws. Reading it here too costs
+  // nothing: one query key serves both.
+  const { data: entries, error } = useDirectory(repo, refName, path);
 
-  // Every file at the ref, weighed by language. The walk reads the whole
-  // tree, so the file list paints first and the bar arrives after it. Only
-  // the root asks: the shares are the repository's, not a directory's.
-  const { data: languages } = useQuery({
-    queryKey: ['languages', repo, refName],
-    enabled: Boolean(record) && !isEmpty(record) && !path,
-    queryFn: async () => {
-      const listing = await readerFor(repo).listFiles(
+  // What this directory says about itself. A directory with no README leaves
+  // the reading pane empty, which is what a checkout looks like.
+  const readme = (entries ?? []).find(
+    (entry) => entry.type === 'file' && README.test(entry.name),
+  );
+  const { data: readmeFile } = useQuery({
+    queryKey: ['readme', repo, refName, path, readme?.name],
+    enabled: Boolean(readme),
+    queryFn: () =>
+      readerFor(repo).readFile(
         account.did,
         repo,
         refName,
-      );
-      return languageShares(listing?.files ?? []);
-    },
-  });
-
-  const { data: checks } = useQuery({
-    queryKey: ['checks', repo],
-    queryFn: () => loadChecks(repo),
+        path ? `${path}/${readme.name}` : readme.name,
+      ),
   });
 
-  const { data: packages } = useQuery({
-    queryKey: ['packages', repo],
-    queryFn: () => loadPackages(repo),
-  });
+  // The tip of the ref and how far its history runs. The gauges in the pane
+  // beside this one read the same answer.
+  const { data: history } = useHistory(repo, refName);
 
   if (!record) {
     return <p className="py-16 text-center text-faint">No such repository.</p>;
@@ -125,9 +59,11 @@ export function TreePage({ repo, refName, path, httpClone }) {
   const branches = branchRefs(record).length;
   const tags = tagRefs(record).length;
 
+  // What this view is looking at: which ref, and where inside it. The
+  // sections of the repository, and cloning it, are in the band above.
   const toolbar = (
-    <div className="flex flex-wrap items-center justify-between gap-3 pt-1 pb-4">
-      <div className="flex flex-wrap items-center gap-3">
+    <div className="flex flex-wrap items-center gap-3 px-5 py-3">
+      <div className="flex min-w-0 flex-wrap items-center gap-3">
         <RefSelect
           repo={record}
           value={refName}
@@ -135,6 +71,7 @@ export function TreePage({ repo, refName, path, httpClone }) {
             navigate(`/${encodeURIComponent(repo)}/tree/${encodeURI(next)}`)
           }
         />
+        {/* What else the reader could have picked, beside the picker. */}
         <span className="flex items-center gap-1.5 text-[13px] text-faint">
           <GitBranchIcon className="size-3.5" />
           <span className="font-semibold text-foreground">{branches}</span>
@@ -147,130 +84,92 @@ export function TreePage({ repo, refName, path, httpClone }) {
             {tags === 1 ? 'tag' : 'tags'}
           </span>
         )}
-      </div>
-      <div className="flex items-center gap-2">
-        {/* Only where there is something to open. A repository that names no
-            package has an empty packages page. */}
-        {packages && packages.length > 0 && (
-          <Link
-            href={`/${encodeURIComponent(repo)}/packages`}
-            className={cn(
-              buttonVariants({ variant: 'outline', size: 'sm' }),
-              'text-foreground no-underline hover:no-underline',
-            )}
-          >
-            <PackageIcon />
-            {packages.length === 1
-              ? '1 package'
-              : `${packages.length} packages`}
-          </Link>
-        )}
-        {/* Only where there is something to open. A repository that names no
-            runner has an empty checks page. */}
-        {checks?.runner && (
-          <Link
-            href={`/${encodeURIComponent(repo)}/checks`}
-            className={cn(
-              buttonVariants({ variant: 'outline', size: 'sm' }),
-              'text-foreground no-underline hover:no-underline',
-            )}
-          >
-            <CircleCheckIcon />
-            Checks
-          </Link>
-        )}
-        <Link
-          href={`/${encodeURIComponent(repo)}/commits/${encodeURI(refName)}`}
-          className={cn(
-            buttonVariants({ variant: 'outline', size: 'sm' }),
-            'text-foreground no-underline hover:no-underline',
-          )}
-        >
-          <GitCommitVerticalIcon />
-          History
-        </Link>
-        <CodeMenu repo={repo} httpClone={httpClone} />
+        {/* Only inside a directory. At the root the heading above already
+            names the repository. */}
+        {path && <Breadcrumbs repo={repo} refName={refName} path={path} />}
       </div>
     </div>
   );
 
+  if (isEmpty(record)) {
+    return (
+      <div className="px-5 py-10">
+        <EmptyState
+          title="Nothing pushed yet"
+          description="This repository has no commits."
+        />
+      </div>
+    );
+  }
+
   return (
     <>
-      <div className="border-border border-b pb-3">
-        <Breadcrumbs repo={repo} refName={refName} path={path} />
+      {toolbar}
+
+      {/* Only at the root, where the tip of the ref is the repository's latest
+          commit. Inside a directory a reader would take it for the last change
+          to that directory, which it is not. */}
+      {!path &&
+        (history?.head ? (
+          <LatestCommit
+            repo={repo}
+            refName={refName}
+            commit={history.head}
+            count={history.count}
+            truncated={history.truncated}
+          />
+        ) : (
+          <div className="border-border border-t bg-muted px-5 py-2.5">
+            <Skeleton className="h-4 w-72 max-w-full" />
+          </div>
+        ))}
+
+      <SourcePanes repo={repo} refName={refName} dirPath={path}>
+        {error && (
+          <p className="px-5 py-10 text-destructive">{error.message}</p>
+        )}
+        {!entries && !error && (
+          <div className="px-5 py-6">
+            <ReadingRepo size={repoSize(record)} />
+          </div>
+        )}
         {!path && record.description && (
-          <p className="mt-2 text-[14.5px] text-muted-foreground">
+          <p className="border-border border-b px-6 py-4 text-[14.5px] text-muted-foreground">
             {record.description}
           </p>
         )}
-      </div>
-
-      {isEmpty(record) ? (
-        <div className="mt-5">
-          <EmptyState
-            title="Nothing pushed yet"
-            description="This repository has no commits."
-          />
-        </div>
-      ) : (
-        <>
-          {toolbar}
-          {/* The empty track while the walk runs, so the listing keeps its
-              place when the colours arrive. */}
-          {!path && !languages && (
-            <div className="mb-4 h-1.5 rounded-full bg-muted" />
-          )}
-          {languages && languages.length > 0 && (
-            <LanguageBar languages={languages} />
-          )}
-          {error && <p className="py-10 text-destructive">{error.message}</p>}
-          {!data && !error && <ReadingRepo size={repoSize(record)} />}
-          {data?.listing && (
-            <div className="overflow-hidden rounded-2xl border border-border">
-              {/* Only at the root, where the tip of the ref is the repository's
-                  latest commit. Inside a directory a reader would take it for
-                  the last change to that directory, which it is not. */}
-              {!path &&
-                (history ? (
-                  history.head && (
-                    <LatestCommit
-                      repo={repo}
-                      refName={refName}
-                      commit={history.head}
-                      count={history.count}
-                      truncated={history.truncated}
-                    />
-                  )
-                ) : (
-                  <div className="border-border border-b bg-muted px-4 py-3">
-                    <Skeleton className="h-4 w-72 max-w-full" />
-                  </div>
-                ))}
-              <TreeList
-                repo={repo}
-                refName={refName}
-                path={path}
-                entries={data.listing.entries}
-              />
+        {readme && (
+          <>
+            <h2 className="border-border border-b px-6 py-2.5 font-mono text-[12.5px] text-muted-foreground">
+              {readme.name}
+            </h2>
+            <div className="px-6 py-6">
+              {readmeFile?.text ? (
+                <div className="max-w-3xl">
+                  <Markdown
+                    text={readmeFile.text}
+                    repo={repo}
+                    refName={refName}
+                    basePath={path}
+                  />
+                </div>
+              ) : (
+                <Skeleton className="h-40 max-w-3xl" />
+              )}
             </div>
-          )}
-          {data?.readme?.file?.text && (
-            <Card className="mt-5 overflow-hidden">
-              <h2 className="border-border border-b px-4 py-2.5 font-semibold text-[13px] text-muted-foreground">
-                {data.readme.name}
-              </h2>
-              <div className="px-5 py-5">
-                <Markdown
-                  text={data.readme.file.text}
-                  repo={repo}
-                  refName={refName}
-                  basePath={path}
-                />
-              </div>
-            </Card>
-          )}
-        </>
-      )}
+          </>
+        )}
+        {/* A directory that says nothing about itself shows what it holds,
+            with the sizes the navigating pane has no room for. */}
+        {entries && !readme && (
+          <DirTable
+            repo={repo}
+            refName={refName}
+            path={path}
+            entries={entries}
+          />
+        )}
+      </SourcePanes>
     </>
   );
 }
diff --git a/packages/git-ui/src/style.css b/packages/git-ui/src/style.css
index 1d723a4..db037b0 100644
--- a/packages/git-ui/src/style.css
+++ b/packages/git-ui/src/style.css
@@ -54,7 +54,16 @@
   --color-diff-del-ink: var(--diff-del-ink);
   --color-diff-meta: var(--diff-meta);
 
-  --radius-lg: 0.75rem;
+  /* One radius for every surface. Panels and controls are cut square with
+     the corners taken off, which is what makes a page of them read as one
+     instrument rather than a pile of tiles. Every rounded-* utility resolves
+     here, so a component asks for the shape it wants and gets this. */
+  --radius-sm: 2px;
+  --radius-md: 3px;
+  --radius-lg: 3px;
+  --radius-xl: 4px;
+  --radius-2xl: 4px;
+  --radius-3xl: 5px;
 
   --font-sans: system-ui, -apple-system, "Segoe UI", sans-serif;
   --font-mono: ui-monospace, SFMono-Regular, menlo, monospace;
diff --git a/packages/git-ui/test/checks.test.js b/packages/git-ui/test/checks.test.js
index acef095..70b17d3 100644
--- a/packages/git-ui/test/checks.test.js
+++ b/packages/git-ui/test/checks.test.js
@@ -8,10 +8,17 @@ import {
   checkLogUrl,
   checkLook,
   duration,
+  groupBySha,
   latestBySha,
+  latestPerWorkflow,
+  loadRefChecks,
   readLog,
   runDuration,
   runsFor,
+  summarize,
+  summaryWords,
+  workflowNames,
+  workflowOf,
 } from '../src/lib/checks.js';
 
 const SUBJECT = 'at://did:plc:owner/dev.pdsjs.git.repo/project';
@@ -96,14 +103,42 @@ describe('runsFor', () => {
     );
     expect(runs.map((run) => run.sha)).toEqual(['f'.repeat(40)]);
   });
+
+  it('keeps the record key, which addresses the run page', () => {
+    const [run] = runsFor(
+      [
+        {
+          uri: 'at://did:plc:runner/dev.pdsjs.git.check/3ltid',
+          value: {
+            subject: { uri: SUBJECT },
+            sha: 'a'.repeat(40),
+            status: 'success',
+            startedAt: '2026-01-01T00:00:00Z',
+          },
+        },
+      ],
+      SUBJECT,
+    );
+    expect(run.rkey).toBe('3ltid');
+  });
 });
 
 describe('latestBySha', () => {
-  it('keys the newest run by its commit', () => {
+  it('keys the newest run of each workflow by its commit', () => {
     const sha = 'a'.repeat(40);
     const map = latestBySha([
-      { sha, status: 'success', startedAt: '2026-01-02T00:00:00Z' },
-      { sha, status: 'failure', startedAt: '2026-01-01T00:00:00Z' },
+      {
+        sha,
+        workflow: 'ci',
+        status: 'success',
+        startedAt: '2026-01-02T00:00:00Z',
+      },
+      {
+        sha,
+        workflow: 'ci',
+        status: 'failure',
+        startedAt: '2026-01-01T00:00:00Z',
+      },
       {
         sha: 'b'.repeat(40),
         status: 'failure',
@@ -111,8 +146,152 @@ describe('latestBySha', () => {
       },
     ]);
     expect(map.size).toBe(2);
-    expect(map.get(sha)?.status).toBe('success');
-    expect(map.get('b'.repeat(40))?.status).toBe('failure');
+    expect(map.get(sha)?.map((run) => run.status)).toEqual(['success']);
+    expect(map.get('b'.repeat(40))?.map((run) => run.status)).toEqual([
+      'failure',
+    ]);
+  });
+
+  it('keeps one entry per workflow, so no workflow hides another', () => {
+    const sha = 'a'.repeat(40);
+    const map = latestBySha([
+      {
+        sha,
+        workflow: 'publish',
+        status: 'success',
+        startedAt: '2026-01-02T00:00:00Z',
+      },
+      {
+        sha,
+        workflow: 'ci',
+        status: 'failure',
+        startedAt: '2026-01-01T00:00:00Z',
+      },
+    ]);
+    expect(map.get(sha)?.map(workflowOf)).toEqual(['publish', 'ci']);
+  });
+});
+
+describe('groupBySha', () => {
+  const run = (sha, workflow, startedAt) => ({
+    sha,
+    workflow,
+    status: 'success',
+    startedAt,
+  });
+
+  it('gathers each commit runs, newest commit first', () => {
+    const groups = groupBySha([
+      run('b', 'ci', '2026-01-03T00:00:00Z'),
+      run('a', 'ci', '2026-01-02T00:00:00Z'),
+      run('b', 'lint', '2026-01-01T00:00:00Z'),
+    ]);
+    expect(groups.map((group) => group.sha)).toEqual(['b', 'a']);
+    expect(groups[0].runs.map(workflowOf)).toEqual(['ci', 'lint']);
+  });
+
+  it('keeps a re-run beside the run it repeated', () => {
+    const groups = groupBySha([
+      run('a', 'ci', '2026-01-02T00:00:00Z'),
+      run('a', 'ci', '2026-01-01T00:00:00Z'),
+    ]);
+    expect(groups).toHaveLength(1);
+    expect(groups[0].runs).toHaveLength(2);
+  });
+});
+
+describe('latestPerWorkflow', () => {
+  it('keeps the newest run of each workflow', () => {
+    const latest = latestPerWorkflow([
+      { sha: 'a', workflow: 'ci', status: 'success', startedAt: 'b' },
+      { sha: 'a', workflow: 'ci', status: 'failure', startedAt: 'a' },
+      { sha: 'a', workflow: 'lint', status: 'success', startedAt: 'a' },
+    ]);
+    expect(latest.map((run) => [workflowOf(run), run.status])).toEqual([
+      ['ci', 'success'],
+      ['lint', 'success'],
+    ]);
+  });
+});
+
+describe('summarize', () => {
+  const run = (workflow, status) => ({
+    sha: 'a'.repeat(40),
+    workflow,
+    status,
+    startedAt: '2026-01-01T00:00:00Z',
+  });
+
+  it('reads a set every workflow passed as passed', () => {
+    expect(
+      summarize([run('ci', 'success'), run('publish', 'success')]),
+    ).toEqual({ status: 'success', passed: 2, total: 2 });
+  });
+
+  it('lets one failure decide the whole set', () => {
+    expect(
+      summarize([run('publish', 'success'), run('ci', 'failure')]),
+    ).toEqual({ status: 'failure', passed: 1, total: 2 });
+  });
+
+  it('names an errored run rather than calling it failed', () => {
+    expect(summarize([run('ci', 'error')]).status).toBe('error');
+  });
+
+  it('reads an unfinished set as running', () => {
+    expect(
+      summarize([run('ci', 'success'), run('publish', 'running')]),
+    ).toEqual({ status: 'running', passed: 1, total: 2 });
+  });
+
+  it('answers null for a commit no workflow reported on', () => {
+    expect(summarize([])).toBe(null);
+  });
+});
+
+describe('summaryWords', () => {
+  const run = (workflow, status) => ({
+    sha: 'a'.repeat(40),
+    workflow,
+    status,
+    startedAt: '2026-01-01T00:00:00Z',
+  });
+
+  it('names the workflow where there is only one', () => {
+    const runs = [run('ci', 'failure')];
+    expect(summaryWords(summarize(runs), runs)).toBe('ci failed');
+  });
+
+  it('counts the workflows where there are several', () => {
+    const runs = [run('ci', 'failure'), run('publish', 'success')];
+    expect(summaryWords(summarize(runs), runs)).toBe('1 of 2 workflows passed');
+  });
+
+  it('says what an unfinished set is still doing', () => {
+    const runs = [run('ci', 'success'), run('publish', 'running')];
+    expect(summaryWords(summarize(runs), runs)).toBe(
+      '1 of 2 workflows passed, the rest running',
+    );
+  });
+});
+
+describe('workflowOf', () => {
+  it('reads a run that names no workflow as ci', () => {
+    expect(workflowOf({})).toBe('ci');
+    expect(workflowOf({ workflow: 'publish' })).toBe('publish');
+  });
+});
+
+describe('workflowNames', () => {
+  it('names each workflow once, in the order a reader meets it', () => {
+    expect(
+      workflowNames([
+        { workflow: 'publish' },
+        { workflow: 'ci' },
+        { workflow: 'publish' },
+        {},
+      ]),
+    ).toEqual(['publish', 'ci']);
   });
 });
 
@@ -204,6 +383,66 @@ describe('checkLogUrl', () => {
   });
 });
 
+describe('loadRefChecks', () => {
+  const original = globalThis.fetch;
+
+  afterEach(() => {
+    globalThis.fetch = original;
+  });
+
+  /**
+   * The three reads the ref badge makes: the repository's config, the
+   * runner's DID document, and the runner's latest-check record.
+   * @param {unknown} record - what getRecord answers for the latest check
+   */
+  const serve = (record) => {
+    globalThis.fetch = async (/** @type {string} */ url) => {
+      if (url.includes('dev.pdsjs.git.config')) {
+        return Response.json({ value: { runner: 'did:plc:runner' } });
+      }
+      if (url.includes('did:plc:runner') && !url.includes('xrpc')) {
+        return Response.json({
+          service: [
+            {
+              id: '#atproto_pds',
+              serviceEndpoint: 'https://runner.example.com',
+            },
+          ],
+        });
+      }
+      return Response.json({ value: record });
+    };
+  };
+
+  it('reads the latest run of each workflow, and the run each names', async () => {
+    serve({
+      ref: 'refs/heads/main',
+      checks: [
+        {
+          workflow: 'ci',
+          sha: 'a'.repeat(40),
+          status: 'success',
+          startedAt: '2026-01-01T00:00:00Z',
+          check: { uri: 'at://did:plc:runner/dev.pdsjs.git.check/3ltid' },
+        },
+      ],
+    });
+    const { runner, runs } = await loadRefChecks('project', 'main');
+    expect(runner?.service).toBe('https://runner.example.com');
+    expect(runs).toHaveLength(1);
+    expect(runs[0].rkey).toBe('3ltid');
+    expect(workflowOf(runs[0])).toBe('ci');
+  });
+
+  it('reads a record the runner has not written as no runs', async () => {
+    serve(undefined);
+    // The runner cache keys off the repository name, so this asks about
+    // another one rather than reusing the entry the test above filled.
+    const { runs } = await loadRefChecks('other', 'main');
+    expect(runs).toEqual([]);
+  });
+});
+
 describe('readLog', () => {
   const runner = { did: 'did:plc:runner', service: 'https://pds.example.com' };
   const check = {
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index eba827a..a46a549 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -288,6 +288,9 @@ importers:
       '@pdsjs/git':
         specifier: workspace:*
         version: link:../git
+      '@pdsjs/git-ci':
+        specifier: workspace:*
+        version: link:../git-ci
       '@pdsjs/npm':
         specifier: workspace:*
         version: link:../npm
-- 
2.51.2


From cc1277053c731f05a56187e389a17c9f81c8796b Mon Sep 17 00:00:00 2001
From: Chad Miller <chadtmiller15@gmail.com>
Date: Sun, 23 Aug 2026 15:29:37 -0700
Subject: [PATCH 05/13] chore(dev): seed a repository worth browsing

The demo repository was one commit of one language written in a single
second, which left the file pane with nothing to walk into, the language
gauge one colour and the activity gauge empty. It now carries nested
directories, files long enough to scroll, seven languages by size, and a
history dated across five months.

`just dev-git` also publishes check records now: several workflows over
several commits, a workflow asked for twice, a failure beside a success,
and a run still going. The account stands as its own runner, which is
what the config record's runner field names, so a reader resolves that
DID and reads its checks the same way it would read another account's.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01Gp5VgVe393AeJL5jKARqR3
---
 Justfile                   |   9 +-
 scripts/dev-git-checks.mjs | 273 +++++++++++++++++++++++++++++++++++++
 scripts/dev-git-demo.mjs   | 160 ++++++++++++++++++++--
 3 files changed, 428 insertions(+), 14 deletions(-)
 create mode 100644 scripts/dev-git-checks.mjs

diff --git a/Justfile b/Justfile
index bff9396..cb56e18 100644
--- a/Justfile
+++ b/Justfile
@@ -63,8 +63,9 @@ dev-multi: stack-up pds-start
     @echo "Both use the password test-password. Starting Vite HMR for the UI…"
     npm run dev --workspace=@pdsjs/account-ui
 
-# The repository browser with a repository, a package and an image to read.
-dev-git: plc-up (pds-start "localhost:2471") (seed base) git-demo
+# The repository browser with a repository, a package, an image and a history
+# of check runs to read.
+dev-git: plc-up (pds-start "localhost:2471") (seed base) git-demo git-checks
     @echo ""
     @echo "Open http://localhost:{{ui_port}} — the repository is demo-app."
     @echo "The account page is {{base}}/account (handle {{handle}}.localhost, password test-password)."
@@ -88,6 +89,10 @@ spaces-demo:
 git-demo:
     PDS_DEV_URL={{base}} PDS_DEV_PLC_URL={{plc}} node scripts/dev-git-demo.mjs
 
+# A few more commits, and the check records a runner would publish about them.
+git-checks:
+    PDS_DEV_URL={{base}} PDS_DEV_PLC_URL={{plc}} node scripts/dev-git-checks.mjs
+
 # Start the local PLC alone, for a stack that needs no relay.
 plc-up:
     #!/usr/bin/env bash
diff --git a/scripts/dev-git-checks.mjs b/scripts/dev-git-checks.mjs
new file mode 100644
index 0000000..ddd36eb
--- /dev/null
+++ b/scripts/dev-git-checks.mjs
@@ -0,0 +1,273 @@
+#!/usr/bin/env node
+/**
+ * Local-dev seed for the checks pages: a few more commits on the demo
+ * repository, and the check records a runner would have published about them.
+ * The account runs as its own runner, which is what the config record's
+ * `runner` field names. A reader resolves that DID and reads its checks, so
+ * one account playing both parts exercises the same path as two.
+ *
+ * The runs are shaped to cover what the pages have to render: several
+ * workflows on one commit, a workflow re-run, a failure beside a success, and
+ * a run still going.
+ *
+ * Run `node scripts/dev-git-demo.mjs` first; this pushes onto the repository
+ * that leaves behind. See `just dev-git`, which runs all three.
+ *
+ * Usage: node scripts/dev-git-checks.mjs [repo-name]
+ * Env:   PDS_DEV_URL (default http://localhost:2471)
+ *        PDS_DEV_PASSWORD (default test-password)
+ *        PDS_DEV_PLC_URL (default http://localhost:2582)
+ *        PDS_DEV_WORK_DIR (default .dev-pds/work)
+ */
+import { spawnSync } from 'node:child_process';
+import { appendFileSync } from 'node:fs';
+import { resolve } from 'node:path';
+
+const BASE = process.env.PDS_DEV_URL || 'http://localhost:2471';
+const PASSWORD = process.env.PDS_DEV_PASSWORD || 'test-password';
+const PLC_URL = process.env.PDS_DEV_PLC_URL || 'http://localhost:2582';
+const WORK = resolve(process.env.PDS_DEV_WORK_DIR || '.dev-pds/work');
+const NAME = process.argv[2] || 'demo-app';
+
+const CHECK_COLLECTION = 'dev.pdsjs.git.check';
+const LATEST_CHECK_COLLECTION = 'dev.pdsjs.git.latestCheck';
+const REF = 'refs/heads/main';
+
+/** @param {string} command @param {string[]} args @param {object} [options] */
+function run(command, args, options = {}) {
+  const result = spawnSync(command, args, {
+    cwd: `${WORK}/${NAME}`,
+    stdio: ['ignore', 'pipe', 'pipe'],
+    encoding: 'utf8',
+    ...options,
+    env: { ...process.env, ...(options.env ?? {}) },
+  });
+  if (result.status !== 0) {
+    throw new Error(
+      `${command} ${args.join(' ')} failed:\n${result.stderr || result.stdout}`,
+    );
+  }
+  return result.stdout?.trim() ?? '';
+}
+
+const did = (await (await fetch(`${BASE}/.well-known/atproto-did`)).text())
+  .trim()
+  .replace(/^"|"$/g, '');
+
+const session = await (
+  await fetch(`${BASE}/xrpc/com.atproto.server.createSession`, {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify({ identifier: did, password: PASSWORD }),
+  })
+).json();
+const AUTH = { Authorization: `Bearer ${session.accessJwt}` };
+
+/** @param {string} path @param {unknown} body */
+async function call(path, body) {
+  const res = await fetch(`${BASE}/xrpc/${path}`, {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json', ...AUTH },
+    body: JSON.stringify(body),
+  });
+  if (!res.ok) throw new Error(`${path} answered ${res.status}`);
+  return res.json();
+}
+
+// ---- 1. a history worth listing ------------------------------------------
+
+const COMMITS = [
+  ['README.md', '\nBuilt by its own runner.\n', 'document the runner'],
+  ['index.js', 'export const version = () => "1.0.1";\n', 'add version()'],
+  [
+    'index.js',
+    'export const shout = (who) => `HELLO, ${who}`;\n',
+    'add shout()',
+  ],
+];
+for (const [file, body, message] of COMMITS) {
+  appendFileSync(`${WORK}/${NAME}/${file}`, body);
+  run('git', ['add', '-A']);
+  run('git', [
+    '-c',
+    'user.email=alice@localhost',
+    '-c',
+    'user.name=Alice',
+    'commit',
+    '-qm',
+    message,
+  ]);
+}
+run('git', ['push', '-q', `atproto://${did}/${NAME}`, 'main'], {
+  env: {
+    PATH: `${WORK}/bin:${process.env.PATH}`,
+    ATPROTO_GIT_IDENTIFIER: did,
+    ATPROTO_GIT_PASSWORD: PASSWORD,
+    ATPROTO_GIT_PLC_URL: PLC_URL,
+    ATPROTO_GIT_SERVICE: BASE,
+  },
+});
+
+// Newest first, which is the order the runs below are written in.
+const shas = run('git', ['log', '-4', '--format=%H']).split('\n');
+console.log(`Pushed ${COMMITS.length} more commits to ${NAME}`);
+
+// ---- 2. what the runner would have published ------------------------------
+
+const repoRecord = await (
+  await fetch(
+    `${BASE}/xrpc/com.atproto.repo.getRecord?repo=${did}&collection=dev.pdsjs.git.repo&rkey=${NAME}`,
+  )
+).json();
+const subject = { uri: repoRecord.uri, cid: repoRecord.cid };
+
+/** A step's line in the log, the way a shell runner writes one. */
+const logFor = (steps) =>
+  steps
+    .map(({ name, exitCode }) =>
+      exitCode === 0
+        ? `$ ${name}\nran ${name} in the checkout\n${name}: ok\n`
+        : `$ ${name}\nran ${name} in the checkout\n${name}: FAILED\nexit status ${exitCode}\n`,
+    )
+    .join('\n');
+
+/** @param {string} text */
+async function uploadLog(text) {
+  const res = await fetch(`${BASE}/xrpc/com.atproto.repo.uploadBlob`, {
+    method: 'POST',
+    headers: { 'Content-Type': 'text/plain', ...AUTH },
+    body: text,
+  });
+  if (!res.ok) throw new Error(`uploadBlob answered ${res.status}`);
+  return (await res.json()).blob;
+}
+
+const MINUTE = 60_000;
+let clock = Date.now() - 90 * MINUTE;
+
+/**
+ * One run, written the way the runner writes one.
+ * @param {{sha: string, workflow: string, steps: {name: string, exitCode: number, durationMs: number}[], running?: boolean}} spec
+ */
+async function publish({ sha, workflow, steps, running }) {
+  const startedAt = new Date(clock).toISOString();
+  const took = steps.reduce((total, step) => total + step.durationMs, 0);
+  clock += took + MINUTE;
+  const failed = steps.find((step) => step.exitCode !== 0);
+  const status = running ? 'running' : failed ? 'failure' : 'success';
+  const record = {
+    $type: CHECK_COLLECTION,
+    subject,
+    ref: REF,
+    sha,
+    workflow,
+    status,
+    steps,
+    startedAt,
+    ...(running
+      ? {}
+      : {
+          finishedAt: new Date(Date.parse(startedAt) + took).toISOString(),
+          logs: await uploadLog(logFor(steps)),
+        }),
+  };
+  const { uri, cid } = await call('com.atproto.repo.createRecord', {
+    repo: did,
+    collection: CHECK_COLLECTION,
+    record,
+  });
+  return { workflow, subject, check: { uri, cid }, sha, status, startedAt };
+}
+
+const step = (name, exitCode, durationMs) => ({ name, exitCode, durationMs });
+const install = step('pnpm install --frozen-lockfile', 0, 21_400);
+
+// Oldest commit first, so the runs read in the order they happened.
+const [head, second, third, first] = shas;
+const written = [];
+for (const spec of [
+  { sha: first, workflow: 'ci', steps: [install, step('npm test', 0, 46_800)] },
+  { sha: third, workflow: 'ci', steps: [install, step('npm test', 0, 51_200)] },
+  {
+    sha: third,
+    workflow: 'lint',
+    steps: [install, step('biome check .', 0, 3_900)],
+  },
+  {
+    sha: second,
+    workflow: 'ci',
+    steps: [install, step('npm test', 1, 38_500)],
+  },
+  // The same workflow again, which is what a re-run leaves behind.
+  {
+    sha: second,
+    workflow: 'ci',
+    steps: [install, step('npm test', 0, 44_100)],
+  },
+  {
+    sha: second,
+    workflow: 'lint',
+    steps: [install, step('biome check .', 0, 4_200)],
+  },
+  {
+    sha: second,
+    workflow: 'publish',
+    steps: [install, step('npm publish', 0, 12_600)],
+  },
+  {
+    sha: head,
+    workflow: 'lint',
+    steps: [install, step('biome check .', 0, 4_050)],
+  },
+  {
+    sha: head,
+    workflow: 'ci',
+    steps: [
+      install,
+      step('npm test', 1, 62_300),
+      step('npm run typecheck', 0, 9_100),
+    ],
+  },
+  {
+    sha: head,
+    workflow: 'publish',
+    steps: [install, step('npm publish', 0, 0)],
+    running: true,
+  },
+]) {
+  written.push(await publish(spec));
+}
+console.log(`Published ${written.length} check records as ${did}`);
+
+// ---- 3. the record a reader asks for by name ------------------------------
+
+/** The newest entry per workflow, which is what this record holds. */
+const latest = new Map();
+for (const entry of written) latest.set(entry.workflow, entry);
+
+const RKEY_SAFE = /[^A-Za-z0-9._~:-]/g;
+await call('com.atproto.repo.putRecord', {
+  repo: did,
+  collection: LATEST_CHECK_COLLECTION,
+  rkey: `${did}:${NAME}:${REF}`.replace(RKEY_SAFE, '_'),
+  record: {
+    $type: LATEST_CHECK_COLLECTION,
+    ref: REF,
+    checks: [...latest.values()],
+  },
+});
+
+// ---- 4. the repository names its runner -----------------------------------
+
+const config = await (
+  await fetch(
+    `${BASE}/xrpc/com.atproto.repo.getRecord?repo=${did}&collection=dev.pdsjs.git.config&rkey=${NAME}`,
+  )
+).json();
+await call('com.atproto.repo.putRecord', {
+  repo: did,
+  collection: 'dev.pdsjs.git.config',
+  rkey: NAME,
+  record: { ...config.value, runner: did },
+});
+console.log(`${NAME} names ${did} as its runner`);
diff --git a/scripts/dev-git-demo.mjs b/scripts/dev-git-demo.mjs
index caace3a..1a6a886 100644
--- a/scripts/dev-git-demo.mjs
+++ b/scripts/dev-git-demo.mjs
@@ -17,7 +17,13 @@
  */
 import { spawnSync } from 'node:child_process';
 import { createHash } from 'node:crypto';
-import { mkdirSync, rmSync, symlinkSync, writeFileSync } from 'node:fs';
+import {
+  appendFileSync,
+  mkdirSync,
+  rmSync,
+  symlinkSync,
+  writeFileSync,
+} from 'node:fs';
 import { dirname, resolve } from 'node:path';
 import { fileURLToPath } from 'node:url';
 
@@ -85,22 +91,152 @@ const files = {
     2,
   )}\n`,
   '.npmrc': `registry=${BASE}/npm/\n//${HOST}/npm/:_authToken=${PASSWORD}\n`,
+  LICENSE: `MIT License\n\nCopyright (c) ${new Date().getFullYear()}\n`,
+
+  // Nested directories, so the file pane has somewhere to walk into, and a
+  // file long enough to scroll past a window.
+  'src/index.js':
+    "export { parse } from './lib/parse.js';\n" +
+    "export { format } from './lib/format.js';\n" +
+    "export { run } from './commands/run.js';\n",
+  'src/lib/parse.js': lines(
+    'parse',
+    'Read one line of the record stream into a value.',
+    140,
+  ),
+  'src/lib/format.js': lines(
+    'format',
+    'Write a value back out in the shape the stream expects.',
+    90,
+  ),
+  'src/lib/errors.js': lines('errors', 'The failures this package names.', 40),
+  'src/commands/run.js': lines(
+    'run',
+    'The command the CLI runs by default.',
+    70,
+  ),
+  'src/commands/list.js': lines('list', 'List what the account holds.', 55),
+  'test/parse.test.js': lines('parseTest', 'What parse promises.', 60),
+  'docs/guide.md':
+    `# Guide\n\nHow to use ${NAME}.\n\n` +
+    Array.from(
+      { length: 24 },
+      (_, index) =>
+        `## Step ${index + 1}\n\nRun the command, read what it prints, and move on.\n`,
+    ).join('\n'),
+
+  // A spread of languages, so the gauge on the repository page has a mix to
+  // draw rather than one colour. The sizes decide the shares, and the tail
+  // past the sixth largest is what the gauge adds together as Other.
+  'web/app.css': repeat(
+    (n) =>
+      `.panel-${n} {\n  border: 1px solid var(--border);\n  padding: ${n % 8}px;\n}\n`,
+    120,
+  ),
+  'web/index.html':
+    `<!doctype html>\n<html lang="en">\n  <head>\n    <meta charset="utf-8" />\n    <title>${NAME}</title>\n    <link rel="stylesheet" href="app.css" />\n  </head>\n  <body>\n` +
+    repeat((n) => `    <section id="panel-${n}">Panel ${n}</section>\n`, 60) +
+    '  </body>\n</html>\n',
+  'tools/report.py':
+    '"""Summarise a run of the toolkit."""\n\n\ndef summarise(rows):\n' +
+    repeat((n) => `    total_${n} = sum(row[${n % 5}] for row in rows)\n`, 70) +
+    '    return rows\n',
+  'tools/checksum.go':
+    'package tools\n\nimport "crypto/sha256"\n\n// Sum hashes each chunk in turn.\nfunc Sum(chunks [][]byte) []byte {\n\th := sha256.New()\n' +
+    repeat((n) => `\th.Write(chunks[${n % 9}])\n`, 45) +
+    '\treturn h.Sum(nil)\n}\n',
+  'scripts/release.sh':
+    '#!/usr/bin/env bash\nset -euo pipefail\n\n' +
+    repeat((n) => `echo "step ${n}: checking the tree"\n`, 30),
+  Makefile: `build:\n\tnode src/index.js\n\ntest:\n\tnode --test\n`,
+  Dockerfile: `FROM node:22-alpine\nWORKDIR /app\nCOPY . .\nCMD ["node", "src/index.js"]\n`,
 };
+
+/**
+ * `count` lines from one template, for the generated files above.
+ * @param {(n: number) => string} line
+ * @param {number} count
+ */
+function repeat(line, count) {
+  return Array.from({ length: count }, (_, index) => line(index + 1)).join('');
+}
+
+/**
+ * A source file of about `count` lines. Real length is what makes a pane
+ * worth scrolling, and generated length is what keeps this script short.
+ * @param {string} name
+ * @param {string} summary
+ * @param {number} count
+ */
+function lines(name, summary, count) {
+  const body = Array.from({ length: count }, (_, index) => {
+    const step = index + 1;
+    if (step % 12 === 0) return `\n  // step ${step}: nothing to do here yet`;
+    return `  const step${step} = value[${step % 7}] ?? fallback(${step});`;
+  }).join('\n');
+  return `/** ${summary} */\nexport function ${name}(value, fallback) {\n${body}\n  return value;\n}\n`;
+}
+
 for (const [path, body] of Object.entries(files)) {
-  writeFileSync(`${WORK}/${NAME}/${path}`, body);
+  const full = `${WORK}/${NAME}/${path}`;
+  mkdirSync(dirname(full), { recursive: true });
+  writeFileSync(full, body);
 }
 
 run('git', ['init', '-q', '-b', 'main']);
-run('git', ['add', '-A']);
-run('git', [
-  '-c',
-  'user.email=alice@localhost',
-  '-c',
-  'user.name=Alice',
-  'commit',
-  '-qm',
-  'the first commit',
-]);
+
+/**
+ * One commit, dated. git takes the date from the environment, which is what
+ * lets this build a history with a shape rather than a stack of commits all
+ * made in the same second.
+ * @param {string} message
+ * @param {Date} [when]
+ */
+function commit(message, when) {
+  const at = when ? when.toISOString() : undefined;
+  run('git', ['add', '-A']);
+  run(
+    'git',
+    [
+      '-c',
+      'user.email=alice@localhost',
+      '-c',
+      'user.name=Alice',
+      'commit',
+      '-qm',
+      message,
+    ],
+    {
+      env: at
+        ? { GIT_AUTHOR_DATE: at, GIT_COMMITTER_DATE: at }
+        : /** @type {Record<string, string>} */ ({}),
+    },
+  );
+}
+
+commit('the first commit', new Date(Date.now() - 154 * 86_400_000));
+
+// A run of dated commits so the repository has a history to draw: the
+// activity gauge on the repository page reads the last few months, and a
+// repository built in one second has nothing to show it.
+const DAY_MS = 86_400_000;
+const BACKDATED = [
+  [147, 'add a changelog'],
+  [140, 'note the license'],
+  [126, 'describe the layout'],
+  [119, 'tidy the readme'],
+  [98, 'add a usage example'],
+  [91, 'fix a typo in the example'],
+  [84, 'link the registry'],
+  [56, 'document the helper'],
+  [49, 'mention the runner'],
+  [21, 'refresh the readme'],
+  [14, 'add a contributing note'],
+];
+for (const [daysAgo, message] of BACKDATED) {
+  appendFileSync(`${WORK}/${NAME}/README.md`, `\n${message}.\n`);
+  commit(message, new Date(Date.now() - daysAgo * DAY_MS));
+}
 run('git', ['push', '-q', `atproto://${did}/${NAME}`, 'main'], {
   env: {
     PATH: `${WORK}/bin:${process.env.PATH}`,
-- 
2.51.2


From 3febe1c0f80a5778c10c0e9e049e466f5eb73ba5 Mon Sep 17 00:00:00 2001
From: Chad Miller <chadtmiller15@gmail.com>
Date: Sun, 23 Aug 2026 22:29:26 -0700
Subject: [PATCH 06/13] feat(git): stream a clone's pack to the client

upload-pack held every bundle in the chain, the merged pack, and the framed
response in memory at once, so a clone cost about six times the pack size. A
repository over roughly 20 MB exhausted a Cloudflare isolate's 128 MB.

The response now reads one chunk blob at a time and hashes the trailer as
the bytes go out. A chain of one bundle passes through with no rehash at
all. Cloning a 128 MB repository moves the server's peak from 640 MB to 43
MB.

bench/clone-memory.mjs is the measurement.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01Gp5VgVe393AeJL5jKARqR3
---
 .changeset/git-http-clone-streams.md |  12 ++
 packages/git/README.md               |  11 +-
 packages/git/bench/clone-memory.mjs  | 222 +++++++++++++++++++++++++++
 packages/git/package.json            |   3 +-
 packages/git/src/http.js             | 218 ++++++++++++++++++++++----
 packages/git/src/pack.js             |  85 ++++++++--
 packages/git/test/http.test.js       |  51 ++++++
 packages/git/test/wire.test.js       |  65 +++++++-
 8 files changed, 616 insertions(+), 51 deletions(-)
 create mode 100644 .changeset/git-http-clone-streams.md
 create mode 100644 packages/git/bench/clone-memory.mjs

diff --git a/.changeset/git-http-clone-streams.md b/.changeset/git-http-clone-streams.md
new file mode 100644
index 0000000..1123ae9
--- /dev/null
+++ b/.changeset/git-http-clone-streams.md
@@ -0,0 +1,12 @@
+---
+'@pdsjs/git': patch
+---
+
+Smart HTTP clones stream the merged pack instead of building it in memory.
+`upload-pack` held every bundle in the chain, the merged pack, and the
+framed response at once, so a clone cost about six times the pack size and
+a repository over roughly 20 MB exhausted a Cloudflare isolate's 128 MB. The
+response now reads one chunk blob at a time and hashes the trailer as the
+bytes go out, and a chain of one bundle passes through without a rehash at
+all. Cloning a 128 MB repository moves the server's peak from 640 MB to 43
+MB; `bench/clone-memory.mjs` is the measurement.
diff --git a/packages/git/README.md b/packages/git/README.md
index ca30fd7..378bc9a 100644
--- a/packages/git/README.md
+++ b/packages/git/README.md
@@ -99,6 +99,14 @@ read latency with and without ETag revalidation. From the workspace root:
 node packages/git/bench/push-costs.mjs --commits 60 --bytes 8192
 ```
 
+`bench/clone-memory.mjs` measures what a clone costs the server: peak memory
+and wall time by repository size, for a repacked chain and an unmerged one.
+The peak is what a Cloudflare isolate must hold, against its 128 MB.
+
+```sh
+node --expose-gc packages/git/bench/clone-memory.mjs --sizes 8,48,128
+```
+
 ## Private repositories
 
 A repository can live in a permissioned space
@@ -285,6 +293,7 @@ matching how the reference PDS treats unresolvable lexicons.
   enables the smart HTTP endpoint, and with the helper everywhere else.
 - A fresh clone downloads the whole bundle chain. Fetches skip bundles whose
   heads are already present, which approximates negotiation at personal
-  scale.
+  scale. The server streams that response one chunk blob at a time, so its
+  memory follows `ATPROTO_GIT_CHUNK_SIZE` rather than the repository size.
 - SHA-1 repositories only over HTTP; the helper itself is happy with either
   object format.
diff --git a/packages/git/bench/clone-memory.mjs b/packages/git/bench/clone-memory.mjs
new file mode 100644
index 0000000..dd8c0f9
--- /dev/null
+++ b/packages/git/bench/clone-memory.mjs
@@ -0,0 +1,222 @@
+#!/usr/bin/env node
+/**
+ * Server-side cost of a smart HTTP clone, measured against a local PDS.
+ *
+ * The upload-pack response is assembled in the server process, so the peak
+ * this reports is what a Cloudflare isolate must hold. An isolate gets 128
+ * MB, which is the number the ratio column is read against.
+ *
+ * Repository sizes are random bytes, so packs do not compress and the
+ * content size is the pack size.
+ *
+ * --gc collects on every sample, which separates memory the response holds
+ * from memory it has dropped but V8 has not swept.
+ *
+ * Run from the workspace root after `pnpm install`:
+ *
+ *   node packages/git/bench/clone-memory.mjs --sizes 8,24,48
+ */
+
+import { execFile } from 'node:child_process';
+import { randomBytes } from 'node:crypto';
+import {
+  chmodSync,
+  mkdirSync,
+  mkdtempSync,
+  rmSync,
+  writeFileSync,
+} from 'node:fs';
+import { tmpdir } from 'node:os';
+import { dirname, join } from 'node:path';
+import { fileURLToPath } from 'node:url';
+import { promisify } from 'node:util';
+import { defineLexicon } from '@bigmoves/lexicon';
+import { GIT_REPO_COLLECTION, gitRepoLexicon } from '@pdsjs/git';
+import { LexiconResolver } from '@pdsjs/lexicon-resolver';
+import { createServer } from '@pdsjs/node';
+
+const execFileAsync = promisify(execFile);
+
+function arg(name, fallback) {
+  const i = process.argv.indexOf(`--${name}`);
+  return i === -1 ? fallback : process.argv[i + 1];
+}
+
+const SIZES = String(arg('sizes', '8,24,48'))
+  .split(',')
+  .map((s) => Number(s.trim()))
+  .filter((n) => Number.isFinite(n) && n > 0);
+const COMMITS = Number(arg('commits', 6));
+const PORT = Number(arg('port', 2490));
+const BASE = `http://127.0.0.1:${PORT}`;
+const PASSWORD = 'bench-password';
+const chars = 'abcdefghijklmnopqrstuvwxyz234567';
+const DID = `did:plc:${Array.from(randomBytes(24))
+  .map((b) => chars[b % 32])
+  .join('')}`;
+
+const workDir = mkdtempSync(join(tmpdir(), 'pdsjs-git-clone-bench-'));
+const server = await createServer({
+  port: PORT,
+  dbPath: join(workDir, 'pds.db'),
+  blobsDir: join(workDir, 'blobs'),
+  jwtSecret: 'bench-secret',
+  hostname: `127.0.0.1:${PORT}`,
+  password: PASSWORD,
+  lexiconResolver: new LexiconResolver({
+    schemas: [defineLexicon(gitRepoLexicon)],
+  }),
+  experimental: { git: { http: true } },
+});
+await server.listen();
+const init = await fetch(`${BASE}/init?did=${DID}`, {
+  method: 'POST',
+  headers: { 'Content-Type': 'application/json' },
+  body: JSON.stringify({
+    did: DID,
+    privateKey: randomBytes(32).toString('hex'),
+    handle: 'bench.test',
+    password: PASSWORD,
+  }),
+});
+if (!init.ok) throw new Error('account init failed');
+
+const binDir = join(workDir, 'bin');
+mkdirSync(binDir);
+const cliPath = join(
+  dirname(fileURLToPath(import.meta.url)),
+  '..',
+  'src',
+  'cli.js',
+);
+writeFileSync(
+  join(binDir, 'git-remote-atproto'),
+  `#!/bin/sh\nexec node ${cliPath} "$@"\n`,
+);
+chmodSync(join(binDir, 'git-remote-atproto'), 0o755);
+
+const baseEnv = {
+  ...process.env,
+  PATH: `${binDir}:${process.env.PATH}`,
+  ATPROTO_GIT_SERVICE: BASE,
+  ATPROTO_GIT_IDENTIFIER: DID,
+  ATPROTO_GIT_PASSWORD: PASSWORD,
+  GIT_TERMINAL_PROMPT: '0',
+  GIT_AUTHOR_NAME: 'Bench',
+  GIT_AUTHOR_EMAIL: 'bench@example.com',
+  GIT_COMMITTER_NAME: 'Bench',
+  GIT_COMMITTER_EMAIL: 'bench@example.com',
+};
+
+function runGit(cwd, args, env) {
+  return execFileAsync('git', args, {
+    cwd,
+    env,
+    encoding: 'utf8',
+    maxBuffer: 1 << 28,
+  });
+}
+
+const mb = (n) => n / 1024 / 1024;
+const fmt = (n) => `${mb(n).toFixed(1)} MB`;
+
+/**
+ * Chain policies differ in what a clone must merge. A repacked chain is one
+ * bundle; an unmerged chain is one bundle per push.
+ */
+const POLICIES = [
+  { label: 'single bundle', factor: '2', threshold: '2' },
+  { label: 'chain of 6   ', factor: '0', threshold: '100' },
+];
+
+async function measure(sizeMb, policy) {
+  const rkey = `bench-${sizeMb}-${policy.threshold}`;
+  const env = {
+    ...baseEnv,
+    ATPROTO_GIT_COMPACT_FACTOR: policy.factor,
+    ATPROTO_GIT_REPACK_THRESHOLD: policy.threshold,
+  };
+  const repoDir = join(workDir, rkey);
+  mkdirSync(repoDir);
+  await runGit(repoDir, ['init', '-b', 'main'], env);
+  await runGit(
+    repoDir,
+    ['remote', 'add', 'origin', `atproto://${DID}/${rkey}`],
+    env,
+  );
+  const perCommit = Math.floor((sizeMb * 1024 * 1024) / COMMITS);
+  for (let i = 0; i < COMMITS; i++) {
+    writeFileSync(join(repoDir, `data-${i}.bin`), randomBytes(perCommit));
+    await runGit(repoDir, ['add', '.'], env);
+    await runGit(repoDir, ['commit', '-m', `commit ${i}`], env);
+    await runGit(repoDir, ['push', 'origin', 'main'], env);
+  }
+
+  const params = new URLSearchParams({
+    repo: DID,
+    collection: GIT_REPO_COLLECTION,
+    rkey,
+  });
+  const res = await fetch(`${BASE}/xrpc/com.atproto.repo.getRecord?${params}`);
+  const record = (await res.json()).value;
+  const packBytes = record.bundles.reduce(
+    (sum, b) => sum + b.parts.reduce((t, p) => t + p.size, 0),
+    0,
+  );
+
+  if (global.gc) global.gc();
+  await new Promise((resolve) => setTimeout(resolve, 100));
+  const before = process.memoryUsage();
+  let peakBuffers = before.arrayBuffers;
+  let peakRss = before.rss;
+  const collect = process.argv.includes('--gc');
+  const sampler = setInterval(() => {
+    if (collect && global.gc) global.gc();
+    const m = process.memoryUsage();
+    peakBuffers = Math.max(peakBuffers, m.arrayBuffers);
+    peakRss = Math.max(peakRss, m.rss);
+  }, 20);
+  const t0 = performance.now();
+  let failure = null;
+  try {
+    await runGit(
+      workDir,
+      ['clone', `${BASE}/git/${DID}/${rkey}`, join(workDir, `${rkey}-clone`)],
+      baseEnv,
+    );
+  } catch (err) {
+    failure = err.stderr?.trim().split('\n').pop() ?? String(err);
+  }
+  const secs = (performance.now() - t0) / 1000;
+  clearInterval(sampler);
+
+  return {
+    sizeMb,
+    policy: policy.label,
+    bundles: record.bundles.length,
+    packBytes,
+    buffers: peakBuffers - before.arrayBuffers,
+    rss: peakRss - before.rss,
+    secs,
+    failure,
+  };
+}
+
+console.log(
+  `clone cost by repository size, ${COMMITS} commits each, sampling the server process every 20 ms\n`,
+);
+console.log(
+  '  policy          size    bundles   peak buffers   peak rss    x pack   clone',
+);
+for (const sizeMb of SIZES) {
+  for (const policy of POLICIES) {
+    const r = await measure(sizeMb, policy);
+    const ratio = (r.buffers / r.packBytes).toFixed(1);
+    console.log(
+      `  ${r.policy}  ${String(sizeMb).padStart(3)} MB   ${String(r.bundles).padStart(4)}    ${fmt(r.buffers).padStart(9)}    ${fmt(r.rss).padStart(9)}   ${ratio.padStart(5)}x   ${r.failure ? `FAILED ${r.failure}` : `${r.secs.toFixed(1)}s`}`,
+    );
+  }
+}
+
+await server.close();
+rmSync(workDir, { recursive: true, force: true });
diff --git a/packages/git/package.json b/packages/git/package.json
index 206cdfe..d777b48 100644
--- a/packages/git/package.json
+++ b/packages/git/package.json
@@ -15,7 +15,8 @@
     "./authors": "./src/authors.js"
   },
   "scripts": {
-    "bench": "node bench/push-costs.mjs"
+    "bench": "node bench/push-costs.mjs",
+    "bench:clone": "node --expose-gc bench/clone-memory.mjs"
   },
   "dependencies": {
     "pako": "^2.1.0"
diff --git a/packages/git/src/http.js b/packages/git/src/http.js
index 11b452a..037996e 100644
--- a/packages/git/src/http.js
+++ b/packages/git/src/http.js
@@ -15,9 +15,8 @@
  */
 
 import { createGitBrowser } from './browser.js';
-import { parseBundle } from './bundle.js';
 import { GIT_REPO_COLLECTION } from './lexicon.js';
-import { emptyPack, mergePacks } from './pack.js';
+import { mergePackStream, parsePackHeader } from './pack.js';
 import { concatBytes, FLUSH, parsePkts, pktLine, pktText } from './pkt.js';
 import { concatChunks, parseRepoRecord } from './record.js';
 
@@ -38,6 +37,88 @@ const PUSH_HINT =
 // Payload byte budget for one side-band pkt-line: 65519 frame minus the
 // 4-byte length prefix and 1-byte band marker.
 const SIDE_BAND_MAX = 65514;
+// Band 1 carries pack data, band 3 an error the client prints and fails on.
+const BAND_PACK = 1;
+const BAND_ERROR = 3;
+// A bundle's text header ends at a blank line. It is small next to the
+// pack, so one read of this size finds the pack start on any ref list a
+// repository is likely to carry.
+const BUNDLE_HEAD_READ = 64 * 1024;
+
+/**
+ * The offset of the packfile inside a bundle: the byte after the blank line
+ * that ends the bundle's text header.
+ * @param {Uint8Array} bytes - the start of a bundle
+ * @returns {number} -1 when the buffer stops short of the blank line
+ */
+function packOffset(bytes) {
+  for (let i = 1; i < bytes.length; i++) {
+    if (bytes[i] === 0x0a && bytes[i - 1] === 0x0a) return i + 1;
+  }
+  return -1;
+}
+
+/**
+ * @param {number} band
+ * @param {Uint8Array} payload - at most SIDE_BAND_MAX bytes
+ * @returns {Uint8Array} one side-band pkt-line
+ */
+function bandLine(band, payload) {
+  const framed = new Uint8Array(payload.length + 1);
+  framed[0] = band;
+  framed.set(payload, 1);
+  return pktLine(framed);
+}
+
+/**
+ * The upload-pack response body after the header, in order: the NAK, the
+ * merged pack, and the terminating flush when the client took side-band.
+ * An error after the first byte is out of reach of a status code, so it
+ * goes out as a band 3 line the client reports.
+ * @param {import('./pack.js').PackSource[]} sources
+ * @param {boolean} sideBand
+ * @returns {AsyncGenerator<Uint8Array>}
+ */
+async function* uploadPackBody(sources, sideBand) {
+  yield pktLine('NAK\n');
+  try {
+    for await (const chunk of mergePackStream(sources)) {
+      if (!sideBand) {
+        yield chunk;
+        continue;
+      }
+      for (let offset = 0; offset < chunk.length; offset += SIDE_BAND_MAX) {
+        yield bandLine(
+          BAND_PACK,
+          chunk.subarray(offset, offset + SIDE_BAND_MAX),
+        );
+      }
+    }
+  } catch (err) {
+    if (!sideBand) throw err;
+    const message = err instanceof Error ? err.message : String(err);
+    yield bandLine(BAND_ERROR, new TextEncoder().encode(`${message}\n`));
+    return;
+  }
+  if (sideBand) yield FLUSH;
+}
+
+/**
+ * @param {AsyncGenerator<Uint8Array>} chunks
+ * @returns {ReadableStream<Uint8Array>}
+ */
+function toStream(chunks) {
+  return new ReadableStream({
+    async pull(controller) {
+      const { value, done } = await chunks.next();
+      if (done) controller.close();
+      else controller.enqueue(value);
+    },
+    async cancel() {
+      await chunks.return(undefined);
+    },
+  });
+}
 
 /**
  * @typedef {Object} GitHttpContext
@@ -137,22 +218,108 @@ export function createGitHttp(ctx) {
   }
 
   /**
+   * One byte range of a blob. A 206 answers the range itself; a server that
+   * ignores Range answers 200 with the whole blob, sliced here so both
+   * behave the same.
    * @param {string} did
+   * @param {string} cid
+   * @param {number} start
+   * @param {number} end - exclusive
+   * @returns {Promise<Uint8Array>}
+   */
+  async function fetchBlobRange(did, cid, start, end) {
+    const params = new URLSearchParams({ did, cid });
+    const res = await ctx.xrpc(
+      new Request(
+        `https://pds.internal/xrpc/com.atproto.sync.getBlob?${params}`,
+        { headers: { range: `bytes=${start}-${end - 1}` } },
+      ),
+    );
+    if (!res.ok) throw new Error(`bundle blob ${cid} unavailable`);
+    const bytes = new Uint8Array(await res.arrayBuffer());
+    if (res.status === 206) return bytes;
+    return bytes.subarray(start, end);
+  }
+
+  /**
    * @param {import('./record.js').BundleEntry} bundle
-   * @returns {Promise<Uint8Array>} the bundle's packfile region
+   * @returns {number} the bundle's length in bytes
    */
-  async function fetchBundlePack(did, bundle) {
-    /** @type {Uint8Array[]} */
-    const chunks = [];
+  function bundleLength(bundle) {
+    return bundle.parts.reduce((sum, part) => sum + part.size, 0);
+  }
+
+  /**
+   * Bundle bytes in [start, end), one chunk blob at a time, so a reader
+   * holds one chunk however long the bundle is.
+   * @param {string} did
+   * @param {import('./record.js').BundleEntry} bundle
+   * @param {number} start
+   * @param {number} end - exclusive
+   * @returns {AsyncGenerator<Uint8Array>}
+   */
+  async function* bundleBytes(did, bundle, start, end) {
+    let offset = 0;
     for (const part of bundle.parts) {
-      const params = new URLSearchParams({ did, cid: part.ref.$link });
-      const res = await xrpcGet(`/xrpc/com.atproto.sync.getBlob?${params}`);
-      if (!res.ok) {
-        throw new Error(`bundle blob ${part.ref.$link} unavailable`);
+      if (offset >= end) return;
+      const partEnd = offset + part.size;
+      if (partEnd > start) {
+        yield await fetchBlobRange(
+          did,
+          part.ref.$link,
+          Math.max(start, offset) - offset,
+          Math.min(end, partEnd) - offset,
+        );
       }
-      chunks.push(new Uint8Array(await res.arrayBuffer()));
+      offset = partEnd;
     }
-    return parseBundle(concatChunks(chunks)).pack;
+  }
+
+  /**
+   * Where the packfile starts inside the bundle, and how many objects it
+   * holds. Both come from the bundle's first bytes, so the pack itself
+   * stays unread until the response streams.
+   * @param {string} did
+   * @param {import('./record.js').BundleEntry} bundle
+   * @returns {Promise<{packStart: number, count: number}>}
+   */
+  async function readPackHeader(did, bundle) {
+    const total = bundleLength(bundle);
+    /** @type {Uint8Array[]} */
+    const head = [];
+    let read = 0;
+    while (read < total) {
+      const end = Math.min(total, read + BUNDLE_HEAD_READ);
+      for await (const chunk of bundleBytes(did, bundle, read, end)) {
+        head.push(chunk);
+      }
+      read = end;
+      const bytes = concatChunks(head);
+      const packStart = packOffset(bytes);
+      if (packStart !== -1 && packStart + 12 <= bytes.length) {
+        return {
+          packStart,
+          count: parsePackHeader(bytes.subarray(packStart, packStart + 12)),
+        };
+      }
+    }
+    throw new Error('bundle carries no packfile');
+  }
+
+  /**
+   * @param {string} did
+   * @param {import('./record.js').BundleEntry} bundle
+   * @returns {Promise<import('./pack.js').PackSource>}
+   */
+  async function bundlePackSource(did, bundle) {
+    const total = bundleLength(bundle);
+    const { packStart, count } = await readPackHeader(did, bundle);
+    return {
+      count,
+      length: total - packStart,
+      read: (start, end) =>
+        bundleBytes(did, bundle, packStart + start, packStart + end),
+    };
   }
 
   /**
@@ -301,28 +468,15 @@ export function createGitHttp(ctx) {
     // An empty suffix is still a valid fetch: a refs-only update (branch or
     // tag created on objects the client already has) needs no objects sent.
     const bundles = neededBundles(repo, haves);
-    /** @type {Uint8Array[]} */
-    const packs = [];
+    // The pack headers are read before the response starts, so a bundle
+    // this server cannot read is still a status code rather than a body
+    // that stops halfway.
+    /** @type {import('./pack.js').PackSource[]} */
+    const sources = [];
     for (const bundle of bundles) {
-      packs.push(await fetchBundlePack(did, bundle));
+      sources.push(await bundlePackSource(did, bundle));
     }
-    const pack = bundles.length === 0 ? emptyPack() : mergePacks(packs);
-
-    /** @type {Uint8Array[]} */
-    const parts = [pktLine('NAK\n')];
-    if (sideBand) {
-      for (let offset = 0; offset < pack.length; offset += SIDE_BAND_MAX) {
-        const slice = pack.subarray(offset, offset + SIDE_BAND_MAX);
-        const framed = new Uint8Array(slice.length + 1);
-        framed[0] = 1;
-        framed.set(slice, 1);
-        parts.push(pktLine(framed));
-      }
-      parts.push(FLUSH);
-    } else {
-      parts.push(pack);
-    }
-    return new Response(/** @type {BodyInit} */ (concatBytes(parts)), {
+    return new Response(toStream(uploadPackBody(sources, sideBand)), {
       headers: {
         'Content-Type': `application/x-${UPLOAD_PACK}-result`,
         'Cache-Control': 'no-cache',
diff --git a/packages/git/src/pack.js b/packages/git/src/pack.js
index 2474a3e..deadae2 100644
--- a/packages/git/src/pack.js
+++ b/packages/git/src/pack.js
@@ -25,16 +25,38 @@ const PACK_MAGIC = 0x5041434b;
  */
 export function splitPack(pack) {
   if (pack.length < 32) throw new Error('pack too short');
-  const view = new DataView(pack.buffer, pack.byteOffset, pack.byteLength);
+  return {
+    count: parsePackHeader(pack.subarray(0, 12)),
+    entries: pack.subarray(12, pack.length - 20),
+  };
+}
+
+/**
+ * @param {Uint8Array} header - a packfile's first 12 bytes
+ * @returns {number} the object count
+ */
+export function parsePackHeader(header) {
+  if (header.length < 12) throw new Error('pack header too short');
+  const view = new DataView(header.buffer, header.byteOffset, 12);
   if (view.getUint32(0) !== PACK_MAGIC) throw new Error('bad pack magic');
   const packVersion = view.getUint32(4);
   if (packVersion !== 2 && packVersion !== 3) {
     throw new Error(`unsupported pack version ${packVersion}`);
   }
-  return {
-    count: view.getUint32(8),
-    entries: pack.subarray(12, pack.length - 20),
-  };
+  return view.getUint32(8);
+}
+
+/**
+ * @param {number} count - objects the pack holds
+ * @returns {Uint8Array} a 12-byte packfile header
+ */
+function packHeader(count) {
+  const header = new Uint8Array(12);
+  const view = new DataView(header.buffer);
+  view.setUint32(0, PACK_MAGIC);
+  view.setUint32(4, 2);
+  view.setUint32(8, count);
+  return header;
 }
 
 /**
@@ -44,10 +66,7 @@ export function splitPack(pack) {
  */
 export function emptyPack() {
   const out = new Uint8Array(32);
-  const view = new DataView(out.buffer);
-  view.setUint32(0, PACK_MAGIC);
-  view.setUint32(4, 2);
-  view.setUint32(8, 0);
+  out.set(packHeader(0), 0);
   out.set(new Sha1().update(out.subarray(0, 12)).digest(), 12);
   return out;
 }
@@ -62,13 +81,7 @@ export function mergePacks(packs) {
   if (packs.length === 1) return packs[0];
   if (packs.length === 0) return emptyPack();
   const parts = packs.map(splitPack);
-  const count = parts.reduce((sum, p) => sum + p.count, 0);
-  const header = new Uint8Array(12);
-  const view = new DataView(header.buffer);
-  view.setUint32(0, PACK_MAGIC);
-  view.setUint32(4, 2);
-  view.setUint32(8, count);
-
+  const header = packHeader(parts.reduce((sum, p) => sum + p.count, 0));
   const total = 12 + parts.reduce((sum, p) => sum + p.entries.length, 0) + 20;
   const out = new Uint8Array(total);
   out.set(header, 0);
@@ -81,3 +94,43 @@ export function mergePacks(packs) {
   out.set(sha, offset);
   return out;
 }
+
+/**
+ * A packfile the merge reads in ranges instead of holding.
+ * @typedef {Object} PackSource
+ * @property {number} count - objects the pack holds
+ * @property {number} length - complete packfile length in bytes
+ * @property {(start: number, end: number) => AsyncIterable<Uint8Array>} read -
+ *   pack bytes in [start, end), in order
+ */
+
+/**
+ * The bytes mergePacks returns for the same packs, yielded in order and
+ * without holding any source whole. Peak memory is one source read. Pass
+ * the sources oldest first, as mergePacks wants them.
+ * @param {PackSource[]} sources
+ * @returns {AsyncGenerator<Uint8Array>}
+ */
+export async function* mergePackStream(sources) {
+  if (sources.length === 0) {
+    yield emptyPack();
+    return;
+  }
+  // A single pack is already its own merge, trailer included, so it passes
+  // through without a rehash.
+  if (sources.length === 1) {
+    yield* sources[0].read(0, sources[0].length);
+    return;
+  }
+  const header = packHeader(sources.reduce((sum, s) => sum + s.count, 0));
+  const sha = new Sha1().update(header);
+  yield header;
+  for (const source of sources) {
+    for await (const chunk of source.read(12, source.length - 20)) {
+      if (chunk.length === 0) continue;
+      sha.update(chunk);
+      yield chunk;
+    }
+  }
+  yield sha.digest();
+}
diff --git a/packages/git/test/http.test.js b/packages/git/test/http.test.js
index 2f0ea7f..b65efb3 100644
--- a/packages/git/test/http.test.js
+++ b/packages/git/test/http.test.js
@@ -24,7 +24,9 @@ import { defineLexicon } from '@bigmoves/lexicon';
 import { LexiconResolver } from '@pdsjs/lexicon-resolver';
 import { createServer } from '@pdsjs/node';
 import { afterAll, beforeAll, describe, expect, it } from 'vitest';
+import { createGitHttp } from '../src/http.js';
 import { gitRepoLexicon } from '../src/index.js';
+import { concatBytes, FLUSH, parsePkts, pktLine, pktText } from '../src/pkt.js';
 
 const execFileAsync = promisify(execFile);
 
@@ -229,6 +231,55 @@ describe('git smart HTTP e2e', () => {
   });
 });
 
+describe('upload-pack failures', () => {
+  it('reports a blob lost mid-stream on the error band', async () => {
+    const head = (await runGit(srcDir, ['rev-parse', 'main'])).trim();
+    // Every blob is served once and is gone after that, the way orphan
+    // cleanup can take a chunk between the header read and the body.
+    /** @type {Set<string>} */
+    const served = new Set();
+    const git = createGitHttp({
+      xrpc: async (request) => {
+        const url = new URL(request.url);
+        const cid = url.searchParams.get('cid');
+        if (url.pathname.endsWith('getBlob') && cid) {
+          if (served.has(cid)) return new Response('gone', { status: 404 });
+          served.add(cid);
+        }
+        return fetch(`${BASE}${url.pathname}${url.search}`, {
+          headers: request.headers,
+        });
+      },
+    });
+
+    const res = await git.handle(
+      new Request(`http://pds.internal/git/${DID}/webrepo/git-upload-pack`, {
+        method: 'POST',
+        body: /** @type {BodyInit} */ (
+          concatBytes([
+            pktLine(`want ${head} side-band-64k\n`),
+            FLUSH,
+            pktLine('done\n'),
+          ])
+        ),
+      }),
+    );
+
+    // The header is out before the read fails, so the failure rides the
+    // error band rather than a status code.
+    expect(res?.status).toBe(200);
+    const pkts = parsePkts(
+      new Uint8Array(await /** @type {Response} */ (res).arrayBuffer()),
+    );
+    expect(pktText(/** @type {{data: Uint8Array}} */ (pkts[0]).data)).toBe(
+      'NAK',
+    );
+    const last = /** @type {{data: Uint8Array}} */ (pkts[pkts.length - 1]).data;
+    expect(last[0]).toBe(3);
+    expect(pktText(last.subarray(1))).toMatch(/unavailable/);
+  });
+});
+
 describe('raw files', () => {
   /** @param {string} path */
   const raw = (path) => fetch(`${HTTP_URL}/raw/${path}`);
diff --git a/packages/git/test/wire.test.js b/packages/git/test/wire.test.js
index 3d69f62..6d64142 100644
--- a/packages/git/test/wire.test.js
+++ b/packages/git/test/wire.test.js
@@ -12,7 +12,12 @@ import { join } from 'node:path';
 import { promisify } from 'node:util';
 import { afterAll, beforeAll, describe, expect, it } from 'vitest';
 import { parseBundle } from '../src/bundle.js';
-import { emptyPack, mergePacks, splitPack } from '../src/pack.js';
+import {
+  emptyPack,
+  mergePackStream,
+  mergePacks,
+  splitPack,
+} from '../src/pack.js';
 import { concatBytes, FLUSH, parsePkts, pktLine, pktText } from '../src/pkt.js';
 import { Sha1 } from '../src/sha1.js';
 
@@ -146,6 +151,64 @@ describe('pack merging against real git', () => {
     await runGit(target, ['rev-list', '--objects', shaTwo]);
   });
 
+  it('streams the same bytes it buffers, holding one read at a time', async () => {
+    const packs = [
+      parseBundle(readFileSync(join(dir, 'b1.bundle'))).pack,
+      parseBundle(readFileSync(join(dir, 'b2.bundle'))).pack,
+    ];
+    const READ = 512;
+    let largestRead = 0;
+    const sources = packs.map((pack) => ({
+      count: splitPack(pack).count,
+      length: pack.length,
+      /**
+       * @param {number} start
+       * @param {number} end
+       */
+      read: async function* (start, end) {
+        for (let offset = start; offset < end; offset += READ) {
+          const slice = pack.subarray(offset, Math.min(end, offset + READ));
+          largestRead = Math.max(largestRead, slice.length);
+          yield slice;
+        }
+      },
+    }));
+
+    /** @type {Uint8Array[]} */
+    const chunks = [];
+    for await (const chunk of mergePackStream(sources)) chunks.push(chunk);
+    expect(concatBytes(chunks)).toEqual(mergePacks(packs));
+    expect(largestRead).toBe(READ);
+  });
+
+  it('streams a lone pack through unchanged', async () => {
+    const pack = parseBundle(readFileSync(join(dir, 'b1.bundle'))).pack;
+    /** @type {Uint8Array[]} */
+    const chunks = [];
+    const stream = mergePackStream([
+      {
+        count: splitPack(pack).count,
+        length: pack.length,
+        /**
+         * @param {number} start
+         * @param {number} end
+         */
+        read: async function* (start, end) {
+          yield pack.subarray(start, end);
+        },
+      },
+    ]);
+    for await (const chunk of stream) chunks.push(chunk);
+    expect(concatBytes(chunks)).toEqual(new Uint8Array(pack));
+  });
+
+  it('streams an empty pack for an empty source list', async () => {
+    /** @type {Uint8Array[]} */
+    const chunks = [];
+    for await (const chunk of mergePackStream([])) chunks.push(chunk);
+    expect(concatBytes(chunks)).toEqual(emptyPack());
+  });
+
   it('produces an empty pack git accepts', async () => {
     const target = join(dir, 'empty-target');
     await runGit(dir, ['init', '-b', 'main', target]);
-- 
2.51.2


From aeb61f9cff0438261390920a1f9e14b50de31855 Mon Sep 17 00:00:00 2001
From: Chad Miller <chadtmiller15@gmail.com>
Date: Sun, 23 Aug 2026 22:29:55 -0700
Subject: [PATCH 07/13] feat(git): read a space's bundles in ranges

The space reader served whole blobs only, so the account page downloaded a
private repository's whole bundle chain to list a directory, while a public
one read single objects out of the chain.

SpaceReader takes an optional getBlobRange, and both platform adapters
supply it wherever the blob store reads ranges. A space repository whose
bundles all carry an object index now reads lazily, as a public one does. A
reader without ranges still reads the chain whole.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01Gp5VgVe393AeJL5jKARqR3
---
 .changeset/git-space-ranged-reads.md | 14 ++++++
 packages/cloudflare/src/index.js     | 17 ++++++++
 packages/git/src/browser.js          | 62 +++++++++++++++++++--------
 packages/git/test/browser.test.js    | 64 ++++++++++++++++++++++++++++
 packages/node/src/index.js           | 16 +++++++
 5 files changed, 156 insertions(+), 17 deletions(-)
 create mode 100644 .changeset/git-space-ranged-reads.md

diff --git a/.changeset/git-space-ranged-reads.md b/.changeset/git-space-ranged-reads.md
new file mode 100644
index 0000000..a2c4088
--- /dev/null
+++ b/.changeset/git-space-ranged-reads.md
@@ -0,0 +1,14 @@
+---
+'@pdsjs/git': patch
+'@pdsjs/node': patch
+'@pdsjs/cloudflare': patch
+---
+
+Repositories in a permissioned space browse with ranged reads. The space
+reader served whole blobs only, so the account page downloaded a private
+repository's whole bundle chain to list a directory, while a public one read
+single objects out of the chain. `SpaceReader` takes an optional
+`getBlobRange`, and both platform adapters supply it wherever the blob store
+reads ranges. A space repository whose bundles all carry an object index now
+reads lazily, as a public one does; a reader without ranges still reads the
+chain whole.
diff --git a/packages/cloudflare/src/index.js b/packages/cloudflare/src/index.js
index ca40b68..40ccdde 100644
--- a/packages/cloudflare/src/index.js
+++ b/packages/cloudflare/src/index.js
@@ -1370,6 +1370,23 @@ export class PDSDurableObject {
                             /** @type {ArrayBuffer} */ (result.data),
                           );
                     },
+                    // A store that reads ranges lets the browser read a
+                    // space repository lazily. getStream takes inclusive
+                    // positions.
+                    getBlobRange: blobs.getStream
+                      ? async (cid, start, end) => {
+                          const did = await actorStorage.getDid();
+                          if (!did) return null;
+                          const found = await blobs.getStream?.(did, cid, {
+                            start,
+                            end: end - 1,
+                          });
+                          if (!found) return null;
+                          return new Uint8Array(
+                            await new Response(found.body).arrayBuffer(),
+                          );
+                        }
+                      : undefined,
                   }
                 : undefined,
             })
diff --git a/packages/git/src/browser.js b/packages/git/src/browser.js
index ab40763..88ffd7f 100644
--- a/packages/git/src/browser.js
+++ b/packages/git/src/browser.js
@@ -67,6 +67,10 @@ const IMAGE_MEDIA_TYPES = {
  * @typedef {Object} SpaceReader
  * @property {(space: string, rkey: string) => Promise<{cid: string, value: unknown}|null>} getRecord
  * @property {(cid: string) => Promise<Uint8Array|null>} getBlob
+ * @property {(cid: string, start: number, end: number) => Promise<Uint8Array|null>} [getBlobRange] -
+ *   Optional: one byte range of a blob, end exclusive. A reader that
+ *   answers ranges lets a space repository read lazily, as a public one
+ *   does. Absent, the chain is read whole.
  */
 
 /**
@@ -625,23 +629,46 @@ export function createGitBrowser(ctx) {
   }
 
   /**
-   * Download the whole chain and unpack it in memory.
+   * Blob reads for one open. A public repository reads through the sync
+   * endpoints; a space repository reads its own storage through the space
+   * reader, which answers ranges only when the platform gave it a
+   * getBlobRange.
    * @param {string} did
-   * @param {import('./record.js').GitRepoRecord} repo
    * @param {string|undefined} space
-   * @returns {Promise<ObjectStore>}
+   * @returns {{read: (cid: string) => Promise<Uint8Array>, readRange: ((cid: string, start: number, end: number) => Promise<Uint8Array>)|null}}
    */
-  async function openEager(did, repo, space) {
-    /** @param {string} cid */
-    async function fetchPart(cid) {
-      if (space && ctx.spaceReader) {
-        const bytes = await ctx.spaceReader.getBlob(cid);
+  function blobReaders(did, space) {
+    const reader = ctx.spaceReader;
+    if (!space || !reader) {
+      return {
+        read: (cid) => fetchBlob(did, cid),
+        readRange: (cid, start, end) => fetchBlobRange(did, cid, start, end),
+      };
+    }
+    const getBlobRange = reader.getBlobRange;
+    return {
+      read: async (cid) => {
+        const bytes = await reader.getBlob(cid);
         if (!bytes) throw new Error(`bundle blob ${cid} unavailable`);
         return bytes;
-      }
-      return fetchBlob(did, cid);
-    }
+      },
+      readRange: getBlobRange
+        ? async (cid, start, end) => {
+            const bytes = await getBlobRange(cid, start, end);
+            if (!bytes) throw new Error(`bundle blob ${cid} unavailable`);
+            return bytes;
+          }
+        : null,
+    };
+  }
 
+  /**
+   * Download the whole chain and unpack it in memory.
+   * @param {import('./record.js').GitRepoRecord} repo
+   * @param {(cid: string) => Promise<Uint8Array>} fetchPart
+   * @returns {Promise<ObjectStore>}
+   */
+  async function openEager(repo, fetchPart) {
     // Every chunk of every bundle at once. They are independent reads, and
     // asking for them one after another spends a round trip on each.
     const total = repo.bundles.reduce(
@@ -699,10 +726,11 @@ export function createGitBrowser(ctx) {
       return cached;
     }
 
-    // The space reader serves whole blobs only, so a space repository
-    // reads eagerly whatever its record carries.
+    const { read: readBlob, readRange } = blobReaders(did, space);
+    // Ranged reads need an index for every bundle, and a reader that
+    // answers ranges.
     const lazy =
-      !space &&
+      readRange !== null &&
       repo.bundles.length > 0 &&
       repo.bundles.every((bundle) => bundle.index);
     /** @type {ObjectStore|null} */
@@ -718,12 +746,12 @@ export function createGitBrowser(ctx) {
         store = await createLazyStore(
           repo,
           async (cid) => {
-            const bytes = await fetchBlob(did, cid);
+            const bytes = await readBlob(cid);
             loaded += bytes.length;
             ctx.onProgress?.({ loaded, total });
             return bytes;
           },
-          (cid, start, end) => fetchBlobRange(did, cid, start, end),
+          readRange,
         );
       } catch {
         // An index blob that is missing or unreadable costs laziness, not
@@ -731,7 +759,7 @@ export function createGitBrowser(ctx) {
         store = null;
       }
     }
-    if (!store) store = await openEager(did, repo, space);
+    if (!store) store = await openEager(repo, readBlob);
     cached = { cid: body.cid, repo, store };
     return cached;
   }
diff --git a/packages/git/test/browser.test.js b/packages/git/test/browser.test.js
index d6149b2..3e00552 100644
--- a/packages/git/test/browser.test.js
+++ b/packages/git/test/browser.test.js
@@ -759,6 +759,7 @@ describe.each(/** @type {const} */ (['eager', 'lazy']))(
 
 describe('lazy reader efficiency', () => {
   const DID = 'did:plc:lazytest';
+  const SPACE = 'at://did:plc:lazytest/com.atproto.simplespace.space/team';
   /** @type {string} */
   let bigDir = '';
   /** @type {string} */
@@ -827,6 +828,69 @@ describe('lazy reader efficiency', () => {
     expect(stats.bytes).toBeLessThan(bundleBytes.length / 4);
   });
 
+  /**
+   * The account page reads a space repository straight from storage, so
+   * these stand in for the platform's own blob access.
+   * @param {{bytes: number}} stats
+   * @param {{ranges?: boolean}} [opts] - ranges: false is a reader that
+   *   answers whole blobs only
+   * @returns {import('../src/browser.js').SpaceReader}
+   */
+  function fakeSpaceReader(stats, opts = {}) {
+    return {
+      getRecord: async () => ({ cid: 'bafyrecordcid', value: record }),
+      getBlob: async (cid) => {
+        const blob = blobs.get(cid) ?? null;
+        if (blob) stats.bytes += blob.length;
+        return blob;
+      },
+      getBlobRange:
+        opts.ranges === false
+          ? undefined
+          : async (cid, start, end) => {
+              const blob = blobs.get(cid);
+              if (!blob) return null;
+              const slice = blob.subarray(start, Math.min(end, blob.length));
+              stats.bytes += slice.length;
+              return slice;
+            },
+    };
+  }
+
+  it('reads a space repository for a fraction of the chain', async () => {
+    const stats = { bytes: 0 };
+    const browser = createGitBrowser({
+      xrpc: fakePds(record, blobs, { bytes: 0 }),
+      spaceReader: fakeSpaceReader(stats),
+    });
+    const file = await browser.readFile(
+      DID,
+      'testrepo',
+      'main',
+      'README.md',
+      SPACE,
+    );
+    expect(file?.text).toBe('# lazy test\n');
+    expect(stats.bytes).toBeLessThan(bundleBytes.length / 4);
+  });
+
+  it('reads a space repository whole when its reader has no ranges', async () => {
+    const stats = { bytes: 0 };
+    const browser = createGitBrowser({
+      xrpc: fakePds(record, blobs, { bytes: 0 }),
+      spaceReader: fakeSpaceReader(stats, { ranges: false }),
+    });
+    const file = await browser.readFile(
+      DID,
+      'testrepo',
+      'main',
+      'README.md',
+      SPACE,
+    );
+    expect(file?.text).toBe('# lazy test\n');
+    expect(stats.bytes).toBeGreaterThanOrEqual(bundleBytes.length);
+  });
+
   it('still reads the large file whole when asked', async () => {
     const browser = createGitBrowser({
       xrpc: fakePds(record, blobs, { bytes: 0 }),
diff --git a/packages/node/src/index.js b/packages/node/src/index.js
index 43e4297..9f478bd 100644
--- a/packages/node/src/index.js
+++ b/packages/node/src/index.js
@@ -616,6 +616,22 @@ export async function createServer({
                   ? result.data
                   : new Uint8Array(/** @type {ArrayBuffer} */ (result.data));
               },
+              // A store that reads ranges lets the browser read a space
+              // repository lazily. getStream takes inclusive positions.
+              getBlobRange: blobs.getStream
+                ? async (cid, start, end) => {
+                    const did = await actorStorage.getDid();
+                    if (!did) return null;
+                    const found = await blobs.getStream?.(did, cid, {
+                      start,
+                      end: end - 1,
+                    });
+                    if (!found) return null;
+                    return new Uint8Array(
+                      await new Response(found.body).arrayBuffer(),
+                    );
+                  }
+                : undefined,
             }
           : undefined,
       });
-- 
2.51.2


From 2c68bdce9c9f3f8c2d27ece09462b85177cf39ad Mon Sep 17 00:00:00 2001
From: Chad Miller <chadtmiller15@gmail.com>
Date: Sun, 23 Aug 2026 22:30:03 -0700
Subject: [PATCH 08/13] feat(git): name the commit that last changed a path

lastCommit(did, repo, ref, path) answers which commit last changed one
path, so a repository page can name the change a reader is looking at
rather than only the change at the tip.

The walk reads trees rather than diffs and remembers what it finds, so a
path untouched for a hundred commits resolves to the same object in all of
them and the answer costs a handful of reads.

A commit counts as changing the path only when what stands there differs
from every one of its parents. Matching a parent means the walk carries on
down that parent, which credits a merge's change to the branch it came from
rather than to the merge, the same answer `git log -- path` gives. The
tests check every path against real git, including across a merge.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01Gp5VgVe393AeJL5jKARqR3
---
 .changeset/git-last-commit-for-path.md |  15 +++
 packages/git/src/browser.js            | 135 +++++++++++++++++++++++++
 packages/git/test/browser.test.js      |  95 +++++++++++++++++
 3 files changed, 245 insertions(+)
 create mode 100644 .changeset/git-last-commit-for-path.md

diff --git a/.changeset/git-last-commit-for-path.md b/.changeset/git-last-commit-for-path.md
new file mode 100644
index 0000000..5e5b392
--- /dev/null
+++ b/.changeset/git-last-commit-for-path.md
@@ -0,0 +1,15 @@
+---
+'@pdsjs/git': patch
+---
+
+The browser reader answers which commit last changed one path, with
+`lastCommit(did, repo, ref, path)`. A repository page can then name the
+change a reader is looking at rather than only the change at the tip.
+
+The walk reads trees rather than diffs and remembers what it finds, so a
+path untouched for a hundred commits resolves to the same object in all of
+them and the answer costs a handful of reads. A commit counts as changing
+the path only when what stands there differs from every one of its parents;
+matching a parent means the walk carries on down that parent, which is what
+credits a merge's change to the branch it came from rather than to the
+merge, the same answer `git log -- path` gives.
diff --git a/packages/git/src/browser.js b/packages/git/src/browser.js
index 88ffd7f..a888517 100644
--- a/packages/git/src/browser.js
+++ b/packages/git/src/browser.js
@@ -1010,6 +1010,141 @@ export function createGitBrowser(ctx) {
       return { ref: refEntry.name, commits, truncated: frontier.length > 0 };
     },
 
+    /**
+     * The last commit to change one path, walking back from a ref. A commit
+     * changed the path when what stands there differs from what stood there
+     * in every one of its parents. A commit that matches one of them changed
+     * nothing, and the walk carries on down that parent, which is what
+     * credits a merge's change to the branch it came from.
+     *
+     * The walk reads trees rather than diffs, and remembers what it finds:
+     * a path untouched for a hundred commits resolves to the same object in
+     * all of them, so the answer costs a handful of reads however far back
+     * the change was made.
+     * @param {string} did
+     * @param {string} repoName
+     * @param {string} [ref]
+     * @param {string} [path]
+     * @param {number} [limit] - commits to walk before giving up
+     * @param {string} [space]
+     * @returns {Promise<import('./objects.js').CommitInfo & {sha: string}|null>}
+     *   null where nothing in the walk touched the path
+     */
+    async lastCommit(did, repoName, ref, path = '', limit = 4000, space) {
+      const opened = await open(did, repoName, space);
+      if (!opened) return null;
+      const refEntry = findRef(opened.repo, ref);
+      if (!refEntry) throw new Error(`no such ref: ${ref}`);
+      await opened.store.prefetchCommits();
+
+      const segments = path.split('/').filter(Boolean);
+      /** What stands at the path in one commit, by the commit's own id. */
+      /** @type {Map<string, string|null>} */
+      const standing = new Map();
+      /** Entries by tree, so a tree shared by many commits is read once. */
+      /** @type {Map<string, import('./objects.js').TreeEntry[]>} */
+      const parsed = new Map();
+
+      const entriesOf = (/** @type {string} */ treeSha) => {
+        let entries = parsed.get(treeSha);
+        if (!entries) {
+          const object = opened.store.peek(treeSha);
+          entries = object?.type === 'tree' ? parseTree(object.data) : [];
+          parsed.set(treeSha, entries);
+        }
+        return entries;
+      };
+
+      /**
+       * Resolve the path for a run of commits at once, a level of the path
+       * at a time. Every commit's root tree is read in one coalesced batch,
+       * then every directory below it, so the walk costs a read per level
+       * rather than a read per commit per level.
+       * @param {string[]} commitShas
+       */
+      const resolve = async (commitShas) => {
+        const wanted = commitShas.filter((sha) => !standing.has(sha));
+        if (wanted.length === 0) return;
+        await opened.store.getMany(wanted);
+        /** Where each commit has got to, as the walk descends. */
+        /** @type {Map<string, string>} */
+        let here = new Map();
+        for (const sha of wanted) {
+          const object = opened.store.peek(sha);
+          if (object?.type === 'commit') here.set(sha, commitTree(object.data));
+          else standing.set(sha, null);
+        }
+        for (const segment of segments) {
+          await opened.store.getMany(new Set(here.values()));
+          /** @type {Map<string, string>} */
+          const next = new Map();
+          for (const [sha, treeSha] of here) {
+            const found = entriesOf(treeSha).find((e) => e.name === segment);
+            if (found) next.set(sha, found.sha);
+            else standing.set(sha, null);
+          }
+          here = next;
+        }
+        for (const [sha, found] of here) standing.set(sha, found);
+      };
+
+      /** How many commits to look ahead down the first parents at a time. */
+      const RUN = 64;
+
+      let current = await peelToCommit(opened.store, refEntry.sha);
+      let walked = 0;
+      while (walked < limit) {
+        // The commits are all in memory, so the run costs no reads to
+        // collect; only resolving the path for it does.
+        /** @type {string[]} */
+        const run = [];
+        let cursor = current;
+        while (cursor && run.length < RUN) {
+          run.push(cursor);
+          const object =
+            opened.store.peek(cursor) ?? (await opened.store.get(cursor));
+          if (object?.type !== 'commit') break;
+          cursor = parseCommit(object.data).parents[0] ?? '';
+        }
+        await resolve(cursor ? [...run, cursor] : run);
+
+        let redirected = false;
+        for (let index = 0; index < run.length && walked < limit; index++) {
+          const sha = run[index];
+          walked++;
+          const object = opened.store.peek(sha);
+          if (object?.type !== 'commit') return null;
+          const commit = parseCommit(object.data);
+          const here = standing.get(sha) ?? null;
+          if (here === null) return null;
+
+          // A commit that leaves the path as one of its parents left it did
+          // not change it, and the walk carries on down that parent. Only a
+          // commit that differs from all of them made the change. That is
+          // what credits a merge's change to the commit on the branch it
+          // came from rather than to the merge.
+          let unchanged = null;
+          for (const parent of commit.parents) {
+            if (!standing.has(parent)) await resolve([parent]);
+            if (standing.get(parent) === here) {
+              unchanged = parent;
+              break;
+            }
+          }
+          if (unchanged === null) return { ...commit, sha };
+          current = unchanged;
+          // A merge sent the walk down a parent this run does not hold, so
+          // the next run starts from there.
+          if (unchanged !== run[index + 1]) {
+            redirected = true;
+            break;
+          }
+        }
+        if (!redirected && run.length < RUN) return null;
+      }
+      return null;
+    },
+
     /**
      * One commit: its metadata and the files it changed, each with unified
      * diff hunks. The comparison is against the first parent, which is how
diff --git a/packages/git/test/browser.test.js b/packages/git/test/browser.test.js
index 3e00552..b3ec099 100644
--- a/packages/git/test/browser.test.js
+++ b/packages/git/test/browser.test.js
@@ -900,3 +900,98 @@ describe('lazy reader efficiency', () => {
     expect(bytes?.binary).toBe(true);
   });
 });
+
+describe('the commit that last changed a path', () => {
+  const DID = 'did:plc:lastcommit';
+  /** @type {string} */
+  let workDir = '';
+  /** @type {string} */
+  let workRepo = '';
+  /** @type {{record: Record<string, unknown>, blobs: Map<string, Uint8Array>}} */
+  let fixture = { record: {}, blobs: new Map() };
+
+  beforeAll(async () => {
+    workDir = mkdtempSync(join(tmpdir(), 'pdsjs-git-lastcommit-'));
+    workRepo = join(workDir, 'repo');
+    await runGit(workDir, ['init', '-b', 'main', workRepo]);
+
+    mkdirSync(join(workRepo, 'dir'));
+    writeFileSync(join(workRepo, 'a.txt'), 'a one\n');
+    writeFileSync(join(workRepo, 'b.txt'), 'b one\n');
+    writeFileSync(join(workRepo, 'dir', 'c.txt'), 'c one\n');
+    await runGit(workRepo, ['add', '.']);
+    await runGit(workRepo, ['commit', '-m', 'base']);
+
+    // A branch changes one file while the trunk changes another, so the
+    // merge that follows differs from each parent in a different path.
+    await runGit(workRepo, ['checkout', '-b', 'topic']);
+    writeFileSync(join(workRepo, 'b.txt'), 'b from topic\n');
+    await runGit(workRepo, ['commit', '-am', 'change b on topic']);
+    await runGit(workRepo, ['checkout', 'main']);
+    writeFileSync(join(workRepo, 'a.txt'), 'a from main\n');
+    await runGit(workRepo, ['commit', '-am', 'change a on main']);
+    await runGit(workRepo, [
+      'merge',
+      '--no-ff',
+      'topic',
+      '-m',
+      'merge topic into main',
+    ]);
+
+    const head = await runGit(workRepo, ['rev-parse', 'HEAD']);
+    await runGit(workRepo, [
+      'bundle',
+      'create',
+      join(workDir, 'merge.bundle'),
+      'main',
+    ]);
+    fixture = await chainFixture(
+      'lazy',
+      [new Uint8Array(readFileSync(join(workDir, 'merge.bundle')))],
+      head,
+    );
+  });
+
+  afterAll(() => {
+    rmSync(workDir, { recursive: true, force: true });
+  });
+
+  const browserOf = () =>
+    createGitBrowser({
+      xrpc: fakePds(fixture.record, fixture.blobs, { bytes: 0 }),
+    });
+
+  it('names the commit git names, for every path', async () => {
+    const browser = browserOf();
+    for (const path of ['a.txt', 'b.txt', 'dir/c.txt']) {
+      const wanted = await runGit(workRepo, [
+        'log',
+        '-1',
+        '--format=%H',
+        '--',
+        path,
+      ]);
+      const answer = await browser.lastCommit(DID, 'testrepo', 'main', path);
+      expect(answer?.sha, path).toBe(wanted);
+    }
+  });
+
+  it('credits the branch a merge took a change from, not the merge', async () => {
+    const browser = browserOf();
+    const merge = await runGit(workRepo, ['rev-parse', 'HEAD']);
+    const answer = await browser.lastCommit(DID, 'testrepo', 'main', 'b.txt');
+    expect(answer?.sha).not.toBe(merge);
+    expect(answer?.message).toContain('change b on topic');
+  });
+
+  it('answers null for a path no commit holds', async () => {
+    const browser = browserOf();
+    const answer = await browser.lastCommit(
+      DID,
+      'testrepo',
+      'main',
+      'gone.txt',
+    );
+    expect(answer).toBeNull();
+  });
+});
-- 
2.51.2


From 288063adb25635232cad7c2d5316b64ccd0831d5 Mon Sep 17 00:00:00 2001
From: Chad Miller <chadtmiller15@gmail.com>
Date: Sun, 23 Aug 2026 22:30:10 -0700
Subject: [PATCH 09/13] feat(git): credit a commit's co-authors

coAuthorsOf reads the Co-authored-by trailers a message ends with,
returning each identity once in the order the message first gives it. Only
the last paragraph counts, which is where git itself looks, so a trailer
quoted in a revert credits nobody.

A claimed identity may also carry a label and an avatar, for an author with
no atproto account to name it: a tool, a bot, or a person who keeps none.
parseIdentityRecord carries both, and a did still wins where one is given,
since that account's own profile is the truer answer.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01Gp5VgVe393AeJL5jKARqR3
---
 .changeset/git-co-authors.md      | 14 +++++
 packages/git/src/authors.js       | 44 +++++++++++++++-
 packages/git/src/lexicon.js       | 13 +++++
 packages/git/test/authors.test.js | 85 +++++++++++++++++++++++++++++--
 4 files changed, 150 insertions(+), 6 deletions(-)
 create mode 100644 .changeset/git-co-authors.md

diff --git a/.changeset/git-co-authors.md b/.changeset/git-co-authors.md
new file mode 100644
index 0000000..f022615
--- /dev/null
+++ b/.changeset/git-co-authors.md
@@ -0,0 +1,14 @@
+---
+'@pdsjs/git': patch
+---
+
+A commit credits everyone who wrote it. `coAuthorsOf` reads the
+`Co-authored-by` trailers a message ends with, returning each identity once
+in the order the message first gives it. Only the last paragraph counts,
+which is where git itself looks, so a trailer quoted in a revert credits
+nobody.
+
+A claimed identity may also carry a `label` and an `avatar`, for an author
+with no atproto account to name it: a tool, a bot, or a person who keeps
+none. `parseIdentityRecord` carries both, and a `did` still wins where one is
+given, since that account's own profile is the truer answer.
diff --git a/packages/git/src/authors.js b/packages/git/src/authors.js
index 205f1c4..feadf21 100644
--- a/packages/git/src/authors.js
+++ b/packages/git/src/authors.js
@@ -22,6 +22,8 @@
  * @property {string} email
  * @property {string} did - whose identity this is, empty for the account
  *   holding the record
+ * @property {string} label - what to call an identity with no account
+ * @property {string} avatarCid - the face to show for a labelled identity
  */
 
 /**
@@ -36,6 +38,41 @@ export function splitIdent(ident) {
   return { name: match[1].trim(), email: match[2].trim() };
 }
 
+/**
+ * The people a commit message credits beside its author.
+ *
+ * Git carries them as `Co-authored-by:` trailers, one per line, in the same
+ * "Name <address>" shape the author ident uses. A message may name the same
+ * person twice, or name the author again; each identity is returned once, in
+ * the order the message first gives it.
+ *
+ * Only trailers in the message's last paragraph count, which is where git
+ * itself looks. A line further up quoting a trailer, in a revert or a quoted
+ * patch, credits nobody.
+ * @param {string} message - the whole commit message
+ * @returns {string[]} idents, as written
+ */
+export function coAuthorsOf(message) {
+  const text = String(message ?? '').trimEnd();
+  if (!text) return [];
+  const paragraph = text.slice(text.lastIndexOf('\n\n') + 1);
+  /** @type {string[]} */
+  const found = [];
+  const seen = new Set();
+  for (const line of paragraph.split('\n')) {
+    const match = /^\s*co-authored-by:\s*(.+)$/i.exec(line);
+    if (!match) continue;
+    const ident = match[1].trim();
+    const { name, email } = splitIdent(ident);
+    if (!name && !email) continue;
+    const key = `${name.toLowerCase()}\u0000${email.toLowerCase()}`;
+    if (seen.has(key)) continue;
+    seen.add(key);
+    found.push(ident);
+  }
+  return found;
+}
+
 /**
  * The claims a dev.pdsjs.git.identity record carries. Anything malformed is
  * dropped rather than failing the read: the record is advisory, and a reader
@@ -49,14 +86,17 @@ export function parseIdentityRecord(value) {
   /** @type {IdentClaim[]} */
   const idents = [];
   for (const entry of list) {
-    const { email, name, did } =
-      /** @type {{email?: unknown, name?: unknown, did?: unknown}} */ (
+    const { email, name, did, label, avatar } =
+      /** @type {{email?: unknown, name?: unknown, did?: unknown, label?: unknown, avatar?: {ref?: {$link?: unknown}}}} */ (
         entry ?? {}
       );
+    const link = avatar?.ref?.$link;
     const claim = {
       name: typeof name === 'string' ? name.trim() : '',
       email: typeof email === 'string' ? email.trim().toLowerCase() : '',
       did: typeof did === 'string' && did.startsWith('did:') ? did : '',
+      label: typeof label === 'string' ? label.trim() : '',
+      avatarCid: typeof link === 'string' ? link : '',
     };
     if (claim.email || claim.name) idents.push(claim);
   }
diff --git a/packages/git/src/lexicon.js b/packages/git/src/lexicon.js
index a215762..e4cc75c 100644
--- a/packages/git/src/lexicon.js
+++ b/packages/git/src/lexicon.js
@@ -64,6 +64,19 @@ export const gitIdentityLexicon = {
           maxLength: 512,
           description: 'Commit author name, compared exactly.',
         },
+        label: {
+          type: 'string',
+          maxLength: 128,
+          description:
+            'What to call this identity where it has no atproto account to name it: a tool, a bot, or a person who keeps none.',
+        },
+        avatar: {
+          type: 'blob',
+          accept: ['image/*'],
+          maxSize: 262144,
+          description:
+            'The face to show for a labelled identity. Ignored where a did names an account, whose own profile picture is the truer answer.',
+        },
         did: {
           type: 'string',
           format: 'did',
diff --git a/packages/git/test/authors.test.js b/packages/git/test/authors.test.js
index eac2698..b80dd99 100644
--- a/packages/git/test/authors.test.js
+++ b/packages/git/test/authors.test.js
@@ -4,6 +4,7 @@
 
 import { describe, expect, it } from 'vitest';
 import {
+  coAuthorsOf,
   identMatches,
   matchIdent,
   parseIdentityRecord,
@@ -54,8 +55,14 @@ describe('parseIdentityRecord', () => {
         ],
       }),
     ).toEqual([
-      { name: '', email: 'chad@example.com', did: '' },
-      { name: 'Chad Miller', email: '', did: '' },
+      {
+        name: '',
+        email: 'chad@example.com',
+        did: '',
+        label: '',
+        avatarCid: '',
+      },
+      { name: 'Chad Miller', email: '', did: '', label: '', avatarCid: '' },
     ]);
   });
 
@@ -68,8 +75,42 @@ describe('parseIdentityRecord', () => {
         ],
       }),
     ).toEqual([
-      { name: '', email: 'them@example.com', did: 'did:plc:someone' },
-      { name: '', email: 'bogus@example.com', did: '' },
+      {
+        name: '',
+        email: 'them@example.com',
+        did: 'did:plc:someone',
+        label: '',
+        avatarCid: '',
+      },
+      {
+        name: '',
+        email: 'bogus@example.com',
+        did: '',
+        label: '',
+        avatarCid: '',
+      },
+    ]);
+  });
+
+  it('carries the label and face of an identity with no account', () => {
+    expect(
+      parseIdentityRecord({
+        idents: [
+          {
+            email: 'noreply@anthropic.com',
+            label: 'Claude',
+            avatar: { $type: 'blob', ref: { $link: 'bafyface' } },
+          },
+        ],
+      }),
+    ).toEqual([
+      {
+        name: '',
+        email: 'noreply@anthropic.com',
+        did: '',
+        label: 'Claude',
+        avatarCid: 'bafyface',
+      },
     ]);
   });
 
@@ -132,3 +173,39 @@ describe('identMatches', () => {
     );
   });
 });
+
+describe('coAuthorsOf', () => {
+  it('reads the trailers a message ends with', () => {
+    expect(
+      coAuthorsOf(
+        'feat: a thing\n\nWhy it is here.\n\n' +
+          'Co-Authored-By: Ada <ada@example.com>\n' +
+          'Co-authored-by: Bo <bo@example.com>\n',
+      ),
+    ).toEqual(['Ada <ada@example.com>', 'Bo <bo@example.com>']);
+  });
+
+  it('credits each person once, however often they are named', () => {
+    expect(
+      coAuthorsOf(
+        'x\n\nCo-authored-by: Ada <ada@example.com>\n' +
+          'Co-authored-by: ada <ADA@example.com>\n',
+      ),
+    ).toEqual(['Ada <ada@example.com>']);
+  });
+
+  it('reads only the last paragraph, so a quoted trailer credits nobody', () => {
+    expect(
+      coAuthorsOf(
+        'revert\n\nThis reverts a commit that said:\n' +
+          'Co-authored-by: Ada <ada@example.com>\n\n' +
+          'Co-authored-by: Bo <bo@example.com>\n',
+      ),
+    ).toEqual(['Bo <bo@example.com>']);
+  });
+
+  it('answers empty for a message with no trailers', () => {
+    expect(coAuthorsOf('just a subject')).toEqual([]);
+    expect(coAuthorsOf('')).toEqual([]);
+  });
+});
-- 
2.51.2


From a67a568efae8f3e229a7b31ca3635ab362ce0326 Mon Sep 17 00:00:00 2001
From: Chad Miller <chadtmiller15@gmail.com>
Date: Sun, 23 Aug 2026 22:30:17 -0700
Subject: [PATCH 10/13] feat(sites): an account publishes a palette

dev.pdsjs.app.theme holds one palette per record key: a display name,
whether it runs light or dark, and colours by semantic name rather than by
the element they paint. A page that meets a name it does not know ignores
it, and a name left out keeps the page's own.

The record says nothing about how a page should read it. A page that has to
choose, such as one colouring a set of things apart, asks the colours: a
palette with no hue to spend answers for itself.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01Gp5VgVe393AeJL5jKARqR3
---
 .changeset/app-theme-records.md | 12 +++++++++
 packages/sites/src/lexicons.js  | 47 +++++++++++++++++++++++++++++++++
 2 files changed, 59 insertions(+)
 create mode 100644 .changeset/app-theme-records.md

diff --git a/.changeset/app-theme-records.md b/.changeset/app-theme-records.md
new file mode 100644
index 0000000..dce9d29
--- /dev/null
+++ b/.changeset/app-theme-records.md
@@ -0,0 +1,12 @@
+---
+'@pdsjs/sites': patch
+---
+
+An account can publish a palette. `dev.pdsjs.app.theme` holds one per record
+key: a display name, whether it runs light or dark, and colours by semantic
+name rather than by the element they paint. A page that meets a name it does not know ignores it, and a name left
+out keeps the page's own.
+
+The record says nothing about how a page should read it. A page that has to
+choose, such as one colouring a set of things apart, asks the colours: a
+palette with no hue to spend answers for itself.
diff --git a/packages/sites/src/lexicons.js b/packages/sites/src/lexicons.js
index f60150f..3f152da 100644
--- a/packages/sites/src/lexicons.js
+++ b/packages/sites/src/lexicons.js
@@ -187,6 +187,49 @@ export const devPdsjsAppInstall = {
   },
 };
 
+/**
+ * A palette an account publishes for the pages it serves. The record key
+ * names the theme, so an account may hold several and a reader may pick
+ * between them.
+ *
+ * The colours are the semantic names a page paints with, not the elements
+ * they paint: background, foreground, key, destructive and so on. A page
+ * that knows a name it is not given falls back to its own.
+ */
+export const devPdsjsAppTheme = {
+  lexicon: 1,
+  id: 'dev.pdsjs.app.theme',
+  defs: {
+    main: {
+      type: 'record',
+      key: 'any',
+      record: {
+        type: 'object',
+        required: ['name', 'scheme', 'colors'],
+        properties: {
+          name: {
+            type: 'string',
+            maxLength: 64,
+            description: 'What to call this palette in a theme picker.',
+          },
+          scheme: {
+            type: 'string',
+            knownValues: ['light', 'dark'],
+            description:
+              'Which way round the palette runs. A page tells the browser, so scrollbars and form controls match.',
+          },
+          colors: {
+            type: 'unknown',
+            description:
+              'Colour per semantic name. A name the page does not know is ignored, and a name left out keeps the page default.',
+          },
+          createdAt: { type: 'string', format: 'datetime' },
+        },
+      },
+    },
+  },
+};
+
 /**
  * A named live view over one collection of this repo. The record key names
  * the query; dev.pdsjs.query.run serves its rows.
@@ -232,9 +275,13 @@ export const SITE_COLLECTION = 'dev.pdsjs.site.deploy';
 /** The collection query definitions live in. */
 export const QUERY_COLLECTION = 'dev.pdsjs.query.def';
 
+/** The collection published palettes live in. */
+export const THEME_COLLECTION = 'dev.pdsjs.app.theme';
+
 export const siteLexicons = [
   devPdsjsSiteDeploy,
   devPdsjsAppManifest,
   devPdsjsAppInstall,
+  devPdsjsAppTheme,
   devPdsjsQueryDef,
 ];
-- 
2.51.2


From 820fad89b923bacd3ac3db291657170cbdb2d241 Mon Sep 17 00:00:00 2001
From: Chad Miller <chadtmiller15@gmail.com>
Date: Sun, 23 Aug 2026 22:30:25 -0700
Subject: [PATCH 11/13] feat(git-ui): a greyscale instrument, and themes an
 account publishes

The interface reads as one instrument: a fixed app shell of three bands,
a two-pane source view, and readings set in one mono face against a
greyscale ground.

Checks group by commit, and a run opens on its own page with its steps and
log. A commit page names its co-authors as a facepile. A file names the
commit that last changed it. The repository index draws each repository's
commit activity beside how lately it was pushed.

A palette comes from dev.pdsjs.app.theme, so an account can publish its
own; ten ship built in. Linguist colours stay whatever the palette, since
they name languages rather than the interface.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01Gp5VgVe393AeJL5jKARqR3
---
 packages/git-ui/src/app.jsx                   |  44 +-
 .../git-ui/src/components/atoms/button.jsx    |   4 +-
 .../components/molecules/activity-ticks.jsx   |   8 +-
 .../components/molecules/author-facepile.jsx  |  86 +++
 .../src/components/molecules/author-line.jsx  |  24 +-
 .../src/components/molecules/breadcrumbs.jsx  |  14 +-
 .../components/molecules/check-disclosure.jsx |   2 +-
 .../src/components/molecules/check-group.jsx  |  16 +-
 .../src/components/molecules/check-row.jsx    |  24 +-
 .../src/components/molecules/check-run.jsx    |   7 +-
 .../src/components/molecules/check-steps.jsx  |  17 +-
 .../src/components/molecules/code-menu.jsx    |   4 +-
 .../src/components/molecules/diff-file.jsx    | 147 +++--
 .../src/components/molecules/diff-tree.jsx    |   4 +-
 .../src/components/molecules/file-commit.jsx  |  55 ++
 .../src/components/molecules/language-bar.jsx |  41 +-
 .../components/molecules/latest-commit.jsx    |  10 +-
 .../components/molecules/repo-activity.jsx    |  30 +
 .../src/components/molecules/repo-gauges.jsx  |  40 +-
 .../src/components/molecules/repo-tabs.jsx    |  16 +-
 .../src/components/molecules/theme-menu.jsx   |  59 ++
 packages/git-ui/src/lib/authors.js            |  14 +
 packages/git-ui/src/lib/source.js             |  18 +
 packages/git-ui/src/lib/theme.js              | 274 +++++++++
 packages/git-ui/src/main.jsx                  |   5 +
 packages/git-ui/src/pages/checks.jsx          |   2 +-
 packages/git-ui/src/pages/commit.jsx          |  28 +-
 packages/git-ui/src/pages/commits.jsx         |   9 +-
 packages/git-ui/src/pages/file.jsx            |  15 +-
 packages/git-ui/src/pages/repos.jsx           | 117 ++--
 packages/git-ui/src/pages/tree.jsx            |  51 +-
 packages/git-ui/src/style.css                 | 527 +++++++++++++-----
 scripts/dev-git-checks.mjs                    |  59 ++
 33 files changed, 1437 insertions(+), 334 deletions(-)
 create mode 100644 packages/git-ui/src/components/molecules/author-facepile.jsx
 create mode 100644 packages/git-ui/src/components/molecules/file-commit.jsx
 create mode 100644 packages/git-ui/src/components/molecules/repo-activity.jsx
 create mode 100644 packages/git-ui/src/components/molecules/theme-menu.jsx
 create mode 100644 packages/git-ui/src/lib/theme.js

diff --git a/packages/git-ui/src/app.jsx b/packages/git-ui/src/app.jsx
index fd7a0ad..ef94ba4 100644
--- a/packages/git-ui/src/app.jsx
+++ b/packages/git-ui/src/app.jsx
@@ -6,6 +6,7 @@ import { CodeMenu } from '#/components/molecules/code-menu.jsx';
 import { RepoListSkeleton } from '#/components/molecules/repo-list-skeleton.jsx';
 import { RepoPageSkeleton } from '#/components/molecules/repo-page-skeleton.jsx';
 import { RepoTabs, SECTION_TITLES } from '#/components/molecules/repo-tabs.jsx';
+import { ThemeMenu } from '#/components/molecules/theme-menu.jsx';
 import { initial, loadAuthors, owner } from '#/lib/authors.js';
 import {
   account as accountInfo,
@@ -19,6 +20,7 @@ import {
   splitRefPath,
 } from '#/lib/git.js';
 import { NavigationProvider, useLocation } from '#/lib/navigation.jsx';
+import { loadThemes } from '#/lib/theme.js';
 import { cn } from '#/lib/utils.js';
 import { CheckPage } from '#/pages/check.jsx';
 import { ChecksPage } from '#/pages/checks.jsx';
@@ -99,11 +101,7 @@ export function App() {
     queryKey: ['account'],
     queryFn: async () => {
       const found = await discover();
-      // The identity claims have to be in hand before a commit renders, so
-      // an author does not change from a bare name to a handle under the
-      // reader. They cost one request each and never change while the tab
-      // is open.
-      const [repos] = await Promise.all([loadRepos(), loadAuthors()]);
+      const repos = await loadRepos();
       // The list screen may be showing the previous visit's rows; this
       // hands it the fresh ones in place.
       queryClient.setQueryData(['repos'], repos);
@@ -125,6 +123,29 @@ export function App() {
     staleTime: Number.POSITIVE_INFINITY,
   });
 
+  // The palettes the account publishes, added to the ones the page ships.
+  // A theme is decoration, so this runs beside the screen; the remembered
+  // choice is already painted below.
+  useQuery({
+    queryKey: ['themes'],
+    enabled: ready,
+    queryFn: loadThemes,
+    staleTime: Number.POSITIVE_INFINITY,
+  });
+
+  // Which atproto identity each commit author is, where the account claims
+  // one. The claims are the account's own record, but the profiles behind
+  // them belong to an appview, and nothing this page shows is worth waiting
+  // on a third party for. So this runs beside the screen rather than before
+  // it, and an author reads as the name their git client wrote until it
+  // lands.
+  useQuery({
+    queryKey: ['authors'],
+    enabled: ready,
+    queryFn: loadAuthors,
+    staleTime: Number.POSITIVE_INFINITY,
+  });
+
   // The repository in view, and which of its sections. Both come from the
   // path, so every page carries the same heading and the same tabs without
   // passing them down.
@@ -146,7 +167,7 @@ export function App() {
             what that section is looking at each get a band of their own
             below, so no one bar carries three different jobs. */}
         <header className="shrink-0 border-border border-b bg-muted">
-          <div className="flex h-14 items-center gap-3 px-5 sm:px-7">
+          <div className="flex h-14 items-center gap-3 px-(--gutter)">
             <nav className="flex min-w-0 shrink items-center gap-2 text-[15px]">
               {/* On a narrow window the repository's own name is the one that
                   has to survive. The avatar carries the way back to the list
@@ -184,8 +205,9 @@ export function App() {
                 </>
               )}
             </nav>
-            {ready && (
-              <div className="ml-auto flex shrink-0 items-center pl-2">
+            <div className="ml-auto flex shrink-0 items-center gap-1 pl-2">
+              <ThemeMenu />
+              {ready && (
                 <Link href="/" title={accountInfo.handle} className="flex">
                   <Avatar
                     src={owner()?.avatar || undefined}
@@ -197,8 +219,8 @@ export function App() {
                     className="size-7"
                   />
                 </Link>
-              </div>
-            )}
+              )}
+            </div>
           </div>
         </header>
 
@@ -206,7 +228,7 @@ export function App() {
             repository rather than to any one of them. */}
         {known && (
           <div className="shrink-0 border-border border-b">
-            <div className="flex items-center gap-3 px-4 py-2 sm:px-6">
+            <div className="flex items-center gap-3 px-(--gutter) py-2">
               <RepoTabs repo={repo} active={section} />
               <div className="ml-auto shrink-0">
                 <CodeMenu repo={repo} httpClone={capabilities.httpClone} />
diff --git a/packages/git-ui/src/components/atoms/button.jsx b/packages/git-ui/src/components/atoms/button.jsx
index d358c10..165a768 100644
--- a/packages/git-ui/src/components/atoms/button.jsx
+++ b/packages/git-ui/src/components/atoms/button.jsx
@@ -2,13 +2,13 @@ import { cva } from 'class-variance-authority';
 import { cn } from '#/lib/utils.js';
 
 const buttonVariants = cva(
-  "inline-flex shrink-0 cursor-pointer items-center justify-center gap-2 rounded-xl text-sm font-semibold whitespace-nowrap transition-all outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+  "inline-flex shrink-0 cursor-pointer items-center justify-center gap-2 rounded-xl text-sm font-semibold whitespace-nowrap transition-all outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/30 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
   {
     variants: {
       variant: {
         default: 'bg-primary text-primary-foreground hover:bg-primary/90',
         destructive:
-          'bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:bg-destructive/60 dark:focus-visible:ring-destructive/40',
+          'bg-destructive text-primary-foreground hover:bg-destructive/90 focus-visible:ring-destructive/30',
         outline:
           'border border-input bg-background hover:bg-accent hover:text-accent-foreground',
         secondary:
diff --git a/packages/git-ui/src/components/molecules/activity-ticks.jsx b/packages/git-ui/src/components/molecules/activity-ticks.jsx
index b2fd658..0dea291 100644
--- a/packages/git-ui/src/components/molecules/activity-ticks.jsx
+++ b/packages/git-ui/src/components/molecules/activity-ticks.jsx
@@ -30,8 +30,12 @@ export function ActivityTicks({ dates, className }) {
   const words = `${total} ${total === 1 ? 'commit' : 'commits'} in the last ${ACTIVITY_WEEKS} weeks`;
 
   return (
+    // The ticks spread across the whole row, as the language gauge's do, so
+    // the two read against one scale rather than as a long bar beside a
+    // short one. Each tick takes an equal share of whatever room the row
+    // has, so the gauge draws the same shape in a sidebar and in a card.
     <div
-      className={cn('flex h-3 shrink-0 items-end gap-[2px]', className)}
+      className={cn('flex h-3 w-full items-end gap-[2px]', className)}
       role="img"
       aria-label={words}
       title={words}
@@ -40,7 +44,7 @@ export function ActivityTicks({ dates, className }) {
         <span
           key={week.start}
           className={cn(
-            'w-[3px]',
+            'min-w-0 flex-1',
             week.count > 0 ? 'bg-key' : 'h-[2px] bg-border',
           )}
           style={
diff --git a/packages/git-ui/src/components/molecules/author-facepile.jsx b/packages/git-ui/src/components/molecules/author-facepile.jsx
new file mode 100644
index 0000000..f8c9fd7
--- /dev/null
+++ b/packages/git-ui/src/components/molecules/author-facepile.jsx
@@ -0,0 +1,86 @@
+import { coAuthorsOf } from '@pdsjs/git/authors';
+import { Avatar } from '#/components/atoms/avatar.jsx';
+import { describeAuthor, initial } from '#/lib/authors.js';
+import { cn } from '#/lib/utils.js';
+
+/** How many faces a pile shows before it counts the rest instead. */
+const FACES = 3;
+
+/**
+ * The author stands in front and everyone credited beside them tucks in
+ * behind, so the face a reader looks for first is the one that is whole.
+ * These are classes rather than a style, because the avatar takes a class
+ * name and nothing else.
+ */
+const DEPTH = ['z-30', 'z-20', 'z-10'];
+
+/**
+ * Everyone a commit credits: the author it names, and anyone its message
+ * credits beside them in a `Co-authored-by` trailer.
+ *
+ * The faces overlap, and the names read as a sentence, because a commit two
+ * people wrote is one piece of work rather than two rows. An author with no
+ * atproto account keeps whatever the account calls them, which is how a tool
+ * that writes commits gets a face without having a repo of its own.
+ */
+export function AuthorFacepile({ ident, message, className }) {
+  const idents = [ident, ...coAuthorsOf(message)].filter(Boolean);
+  const people = [];
+  const seen = new Set();
+  for (const one of idents) {
+    const author = describeAuthor(one);
+    const key = author.name.toLowerCase();
+    if (seen.has(key)) continue;
+    seen.add(key);
+    people.push(author);
+  }
+  if (people.length === 0) return null;
+
+  const shown = people.slice(0, FACES);
+  const named = people.map((person) => person.name);
+  // "Ada", "Ada and Bo", "Ada, Bo and Cy": the last two join with "and", the
+  // rest with commas, which is how the names would be read aloud.
+  const sentence =
+    named.length > 1
+      ? `${named.slice(0, -1).join(', ')} and ${named[named.length - 1]}`
+      : named[0];
+
+  return (
+    <span
+      className={cn('inline-flex min-w-0 items-center gap-2', className)}
+      title={people.map((person) => person.title).join('\n')}
+    >
+      <span className="flex shrink-0 items-center">
+        {shown.map((person, index) => (
+          <Avatar
+            key={person.name}
+            src={person.avatar || undefined}
+            fallback={
+              <span className="text-[9px] text-faint">
+                {initial(person.name)}
+              </span>
+            }
+            // The face in front already carries a border, and that is the
+            // edge between it and the one behind. A ring drawn here would
+            // have to guess the colour behind the pile, which differs from
+            // one band to the next.
+            className={cn(
+              'relative size-[18px] shrink-0',
+              DEPTH[index],
+              index > 0 && '-ml-1.5',
+            )}
+          />
+        ))}
+      </span>
+      <span className="truncate">
+        {sentence}
+        {people.length > shown.length && (
+          <span className="text-faint">
+            {' '}
+            and {people.length - shown.length} more
+          </span>
+        )}
+      </span>
+    </span>
+  );
+}
diff --git a/packages/git-ui/src/components/molecules/author-line.jsx b/packages/git-ui/src/components/molecules/author-line.jsx
index 1bfc1fd..f6be4ee 100644
--- a/packages/git-ui/src/components/molecules/author-line.jsx
+++ b/packages/git-ui/src/components/molecules/author-line.jsx
@@ -6,8 +6,12 @@ import { cn } from '#/lib/utils.js';
  * A commit author: their avatar and name, with the handle beside it when the
  * hosting account has claimed the ident. An unclaimed author shows the name
  * the commit carries and an initial in place of a picture.
+ *
+ * `avatar` false leaves the picture out, for a line of readings where the
+ * name is one reading among several and a picture would set it apart from
+ * the rest of them.
  */
-export function AuthorLine({ ident, className, size = 'sm' }) {
+export function AuthorLine({ ident, className, size = 'sm', avatar = true }) {
   const author = describeAuthor(ident);
   const box = size === 'md' ? 'size-6' : 'size-[18px]';
 
@@ -16,13 +20,17 @@ export function AuthorLine({ ident, className, size = 'sm' }) {
       className={cn('inline-flex min-w-0 items-center gap-1.5', className)}
       title={author.title}
     >
-      <Avatar
-        src={author.avatar || undefined}
-        fallback={
-          <span className="text-[9px] text-faint">{initial(author.name)}</span>
-        }
-        className={box}
-      />
+      {avatar && (
+        <Avatar
+          src={author.avatar || undefined}
+          fallback={
+            <span className="text-[9px] text-faint">
+              {initial(author.name)}
+            </span>
+          }
+          className={box}
+        />
+      )}
       <span className="truncate">{author.name}</span>
       {author.handle && (
         <span className="truncate font-mono text-[11.5px] text-faint">
diff --git a/packages/git-ui/src/components/molecules/breadcrumbs.jsx b/packages/git-ui/src/components/molecules/breadcrumbs.jsx
index a274993..c6fa784 100644
--- a/packages/git-ui/src/components/molecules/breadcrumbs.jsx
+++ b/packages/git-ui/src/components/molecules/breadcrumbs.jsx
@@ -1,8 +1,11 @@
 import { Link } from '#/components/atoms/link.jsx';
 
 /**
- * The repository name followed by each directory on the way to the path in
- * view. Every crumb but the last one navigates.
+ * Each directory on the way to the path in view, and then the path itself.
+ * Every crumb but the last one navigates.
+ *
+ * The repository is not among them. The heading above names it and links to
+ * its root, so a crumb for it here would say the same thing twice.
  */
 export function Breadcrumbs({ repo, refName, path }) {
   const segments = path.split('/').filter(Boolean);
@@ -11,17 +14,14 @@ export function Breadcrumbs({ repo, refName, path }) {
 
   return (
     <nav className="min-w-0 break-words text-[15px]">
-      <Link href={base} className="font-semibold">
-        {repo}
-      </Link>
       {segments.map((segment, index) => {
         walked = walked ? `${walked}/${segment}` : segment;
         const last = index === segments.length - 1;
         return (
           <span key={walked}>
-            <span className="px-1.5 text-faint">/</span>
+            {index > 0 && <span className="px-1.5 text-faint">/</span>}
             {last ? (
-              <span className="text-foreground">{segment}</span>
+              <span className="font-semibold text-foreground">{segment}</span>
             ) : (
               <Link href={`${base}/${encodeURI(walked)}`}>{segment}</Link>
             )}
diff --git a/packages/git-ui/src/components/molecules/check-disclosure.jsx b/packages/git-ui/src/components/molecules/check-disclosure.jsx
index ad3a5de..ef44ea1 100644
--- a/packages/git-ui/src/components/molecules/check-disclosure.jsx
+++ b/packages/git-ui/src/components/molecules/check-disclosure.jsx
@@ -29,7 +29,7 @@ export function CheckDisclosure({ runner, check, runHref }) {
           className="flex min-w-0 flex-1 cursor-pointer items-center gap-1 py-0 pl-2 text-left hover:bg-accent"
         >
           <Chevron className="size-3.5 shrink-0 text-faint" />
-          <CheckRow check={check} className="min-w-0 flex-1" />
+          <CheckRow check={check} className="min-w-0 flex-1" showTime={false} />
         </button>
         {runHref && (
           <Link href={runHref} className="shrink-0 px-4 text-[12px]">
diff --git a/packages/git-ui/src/components/molecules/check-group.jsx b/packages/git-ui/src/components/molecules/check-group.jsx
index 3089e79..ab023aa 100644
--- a/packages/git-ui/src/components/molecules/check-group.jsx
+++ b/packages/git-ui/src/components/molecules/check-group.jsx
@@ -31,26 +31,30 @@ export function CheckGroup({ repo, group, label }) {
           className={cn('size-4 shrink-0', look.className)}
           aria-hidden="true"
         />
+        {/* The subject takes what it needs up to a measure, and the commit
+            it names follows it. Every heading hits that measure on a wide
+            window, so the shas line up down the page. The ref closes the
+            heading at the right edge. */}
         <Link
           href={commitHref}
           title={summary ? summaryWords(summary, group.runs) : undefined}
           className={cn(
-            'min-w-0 flex-1 truncate font-semibold text-[13px] text-foreground no-underline hover:underline',
+            'min-w-0 max-w-[34rem] flex-1 truncate font-semibold text-[13px] text-foreground no-underline hover:underline',
             label ? '' : 'font-mono',
           )}
         >
           {label?.subject ?? short}
         </Link>
-        {ref && (
-          <span className="shrink-0 font-mono text-[12px] text-faint">
-            {shortRef(ref)}
-          </span>
-        )}
         {label && (
           <code className="shrink-0 font-mono text-[12px] text-key">
             {short}
           </code>
         )}
+        {ref && (
+          <span className="ml-auto hidden shrink-0 pl-3 font-mono text-[12px] text-faint sm:inline">
+            {shortRef(ref)}
+          </span>
+        )}
       </div>
       <ul>
         {group.runs.map((run) => (
diff --git a/packages/git-ui/src/components/molecules/check-row.jsx b/packages/git-ui/src/components/molecules/check-row.jsx
index 1ecf02e..ec89fec 100644
--- a/packages/git-ui/src/components/molecules/check-row.jsx
+++ b/packages/git-ui/src/components/molecules/check-row.jsx
@@ -9,8 +9,12 @@ import { cn } from '#/lib/utils.js';
  *
  * This holds no anchor and no button of its own. The caller decides whether
  * the line opens the run's page or expands in place.
+ *
+ * A caller that already names when the runs happened turns off showTime. Every
+ * run of one commit started within a minute of the others, so the column reads
+ * the same phrase down the whole list.
  */
-export function CheckRow({ check, className }) {
+export function CheckRow({ check, className, showTime = true }) {
   const look = checkLook(check.status);
   const took = runDuration(check);
 
@@ -22,15 +26,21 @@ export function CheckRow({ check, className }) {
       )}
     >
       <look.Icon className={cn('size-4 shrink-0', look.className)} />
-      <span className="min-w-0 flex-1 truncate text-foreground">
+      {/* What ran and what it cost stand together. Each holds its width
+          whether or not the run fills it, so they read down the page as
+          columns. When it ran closes the row at the right edge, the way a
+          commit's status closes a row in the commit list. */}
+      <span className="w-28 shrink-0 truncate text-foreground sm:w-40">
         {workflowOf(check)}
       </span>
-      {/* Each column holds its width whether or not the run fills it, so the
-          durations and times read down the page as columns. */}
-      <span className="flex shrink-0 items-center gap-3 text-[12px] text-faint">
-        <span className="w-14 text-right tabular-nums">{took}</span>
-        <span className="w-24 text-right">{timeAgo(check.startedAt)}</span>
+      <span className="w-14 shrink-0 text-right text-[12px] text-faint tabular-nums">
+        {took}
       </span>
+      {showTime && (
+        <span className="ml-auto shrink-0 pl-3 text-[12px] text-faint">
+          {timeAgo(check.startedAt)}
+        </span>
+      )}
     </span>
   );
 }
diff --git a/packages/git-ui/src/components/molecules/check-run.jsx b/packages/git-ui/src/components/molecules/check-run.jsx
index 8ae3532..6f0f8ec 100644
--- a/packages/git-ui/src/components/molecules/check-run.jsx
+++ b/packages/git-ui/src/components/molecules/check-run.jsx
@@ -31,7 +31,7 @@ export function CheckRun({ runner, check, commitHref }) {
 
   return (
     <div className="flex min-h-0 flex-1 flex-col">
-      <div className="shrink-0 px-5 pt-4 pb-4">
+      <div className="shrink-0 px-(--gutter) pt-4 pb-4">
         <div className="flex flex-wrap items-center gap-x-3 gap-y-1">
           <look.Icon className={cn('size-5 shrink-0', look.className)} />
           <h2 className="font-semibold text-[17px] text-foreground">
@@ -42,7 +42,10 @@ export function CheckRun({ runner, check, commitHref }) {
           </span>
         </div>
 
-        <div className="mt-4 grid grid-cols-2 gap-4 sm:grid-cols-4">
+        {/* The readings stand together rather than spread across the
+            window. A run has four of them, and four columns cut to the width
+            of a page put a sha at one edge and a date at the other. */}
+        <div className="mt-4 flex flex-wrap gap-x-10 gap-y-4">
           <Field label="Commit">
             {commitHref ? (
               <Link href={commitHref} className="font-mono">
diff --git a/packages/git-ui/src/components/molecules/check-steps.jsx b/packages/git-ui/src/components/molecules/check-steps.jsx
index 735f684..c197743 100644
--- a/packages/git-ui/src/components/molecules/check-steps.jsx
+++ b/packages/git-ui/src/components/molecules/check-steps.jsx
@@ -13,21 +13,24 @@ export function CheckSteps({ steps }) {
         return (
           <div
             key={step.name}
-            className="flex items-baseline gap-3 px-4 py-1.5 text-[12.5px]"
+            className="flex items-baseline gap-4 px-(--gutter) py-1.5 text-[12.5px]"
           >
+            {/* The step takes what it needs up to a measure, and what it
+                cost follows it. Every step reaches that measure on a wide
+                window, so the times line up down the list. */}
             <span
               className={cn(
-                'min-w-0 flex-1 truncate',
+                'min-w-0 max-w-[28rem] flex-1 truncate',
                 failed ? 'text-destructive' : 'text-muted-foreground',
               )}
             >
               {step.name}
             </span>
-            {typeof step.durationMs === 'number' && (
-              <span className="shrink-0 font-mono text-[11.5px] text-faint">
-                {duration(step.durationMs)}
-              </span>
-            )}
+            <span className="w-16 shrink-0 text-right font-mono text-[11.5px] text-faint tabular-nums">
+              {typeof step.durationMs === 'number'
+                ? duration(step.durationMs)
+                : ''}
+            </span>
             <span
               className={cn(
                 'w-12 shrink-0 text-right font-mono text-[11.5px]',
diff --git a/packages/git-ui/src/components/molecules/code-menu.jsx b/packages/git-ui/src/components/molecules/code-menu.jsx
index f5a5b71..6ea315e 100644
--- a/packages/git-ui/src/components/molecules/code-menu.jsx
+++ b/packages/git-ui/src/components/molecules/code-menu.jsx
@@ -40,7 +40,9 @@ export function CodeMenu({ repo, httpClone }) {
         )}
       >
         <CodeIcon className="size-3.5 shrink-0 text-faint" />
-        Clone
+        {/* The word goes where the bar is short, so the tabs beside it keep
+            their room. The icon still says what it opens. */}
+        <span className="hidden sm:inline">Clone</span>
         <ChevronDownIcon className="size-3.5 shrink-0 text-faint" />
       </Popover.Trigger>
       <Popover.Portal>
diff --git a/packages/git-ui/src/components/molecules/diff-file.jsx b/packages/git-ui/src/components/molecules/diff-file.jsx
index d225064..689cf5f 100644
--- a/packages/git-ui/src/components/molecules/diff-file.jsx
+++ b/packages/git-ui/src/components/molecules/diff-file.jsx
@@ -5,9 +5,11 @@ import { bytes } from '#/lib/format.js';
 import { highlightHunk, languageFor } from '#/lib/highlight.js';
 import { cn } from '#/lib/utils.js';
 
+/* A file added or taken away is a fact about the change, not a failure, so
+   the two read by weight rather than by hue. */
 const STATUS_STYLE = {
-  added: 'border-success/25 bg-success-dim text-success',
-  deleted: 'border-destructive/25 bg-destructive-dim text-destructive',
+  added: 'border-input bg-accent text-foreground',
+  deleted: 'border-border bg-muted text-faint',
   modified: '',
 };
 
@@ -29,20 +31,39 @@ export function DiffFile({ file, ref }) {
   const [open, setOpen] = useState(true);
   const Chevron = open ? ChevronDownIcon : ChevronRightIcon;
 
+  // The gutter is cut to the widest line number this file will show. A fixed
+  // width fits whatever it was measured against and clips everything longer,
+  // and a file of a few thousand lines is ordinary.
+  const widest = (file.hunks ?? []).reduce(
+    (most, hunk) =>
+      Math.max(
+        most,
+        hunk.oldStart + hunk.oldLines,
+        hunk.newStart + hunk.newLines,
+      ),
+    0,
+  );
+  const digits = Math.max(2, String(Math.max(0, widest)).length);
+  // ch is the advance of a figure in the face the gutter is set in, so the
+  // column holds exactly its digits plus its own padding.
+  const narrow = { width: `calc(${digits}ch + 0.75rem)` };
+  const wide = { width: `calc(${digits}ch + 1rem)` };
+
   return (
     <section
       ref={ref}
-      // Room for the header that stops above it, so a file reached from the
-      // tree does not land under it.
-      className="mt-4 scroll-mt-4 overflow-hidden rounded-2xl border border-border"
+      // One rule between files, the way every other listing divides its rows.
+      // scroll-mt leaves room for the header that stops above the pane, so a
+      // file reached from the tree does not land under it.
+      className="scroll-mt-4 border-border border-b"
     >
-      <header className="flex flex-wrap items-center gap-3 border-border border-b bg-card px-4 py-2.5">
+      <header className="flex flex-wrap items-center gap-3 border-border border-b bg-muted px-5 py-2.5">
         <button
           type="button"
           onClick={() => setOpen((was) => !was)}
           aria-expanded={open}
           aria-label={open ? `Hide ${file.path}` : `Show ${file.path}`}
-          className="-my-1 cursor-pointer rounded-lg p-1 text-faint transition-colors hover:bg-accent hover:text-foreground"
+          className="-my-1 cursor-pointer rounded-[3px] p-1 text-faint transition-colors hover:bg-accent hover:text-foreground"
         >
           <Chevron className="size-4" />
         </button>
@@ -54,63 +75,89 @@ export function DiffFile({ file, ref }) {
         </span>
         <span className="shrink-0 font-mono text-[12px] tabular-nums">
           {file.additions > 0 && (
-            <span className="text-success">+{file.additions}</span>
+            <span className="text-foreground">+{file.additions}</span>
           )}
           {file.additions > 0 && file.deletions > 0 && ' '}
           {file.deletions > 0 && (
-            <span className="text-destructive">-{file.deletions}</span>
+            <span className="text-faint">-{file.deletions}</span>
           )}
         </span>
       </header>
 
       {!open ? null : file.hunks ? (
-        <div className="overflow-x-auto bg-card font-mono text-[12.5px] leading-6">
-          {file.hunks.map((hunk) => {
-            const coloured = highlightHunk(hunk.lines, language);
-            return (
-              <div key={`${hunk.oldStart}-${hunk.newStart}`}>
-                <div className="flex min-w-max whitespace-pre bg-muted text-diff-meta">
-                  <span className="w-24 shrink-0" />
-                  <span className="px-3">
-                    @@ -{hunk.oldStart},{hunk.oldLines} +{hunk.newStart},
-                    {hunk.newLines} @@
-                  </span>
-                </div>
-                {hunk.lines.map((line, index) => (
-                  <div
-                    key={`${line.type}-${line.oldLine}-${line.newLine}`}
-                    className={cn(
-                      'flex min-w-max whitespace-pre',
-                      ROW_STYLE[line.type],
-                    )}
-                  >
-                    <span className="w-12 shrink-0 select-none px-2 text-right text-faint tabular-nums">
-                      {line.oldLine ?? ''}
-                    </span>
-                    <span className="w-12 shrink-0 select-none px-2 text-right text-faint tabular-nums">
-                      {line.newLine ?? ''}
-                    </span>
+        <div className="overflow-x-auto font-mono text-[12.5px] leading-6">
+          {/* One box as wide as the longest line in the file, with every row
+              filling it. Sized to each row instead, a short row's wash would
+              stop where its own text does and leave the rest of the scroll
+              unpainted. */}
+          <div className="w-max min-w-full">
+            {file.hunks.map((hunk) => {
+              const coloured = highlightHunk(hunk.lines, language);
+              return (
+                <div key={`${hunk.oldStart}-${hunk.newStart}`}>
+                  <div className="flex w-full whitespace-pre bg-muted text-diff-meta">
+                    <span style={narrow} className="shrink-0 sm:hidden" />
                     <span
+                      style={{ width: `calc(${digits * 2}ch + 2rem)` }}
+                      className="hidden shrink-0 sm:block"
+                    />
+                    <span className="px-3">
+                      @@ -{hunk.oldStart},{hunk.oldLines} +{hunk.newStart},
+                      {hunk.newLines} @@
+                    </span>
+                  </div>
+                  {hunk.lines.map((line, index) => (
+                    <div
+                      key={`${line.type}-${line.oldLine}-${line.newLine}`}
                       className={cn(
-                        'shrink-0 select-none pl-3',
-                        SIGN_STYLE[line.type],
+                        'flex w-full whitespace-pre',
+                        ROW_STYLE[line.type],
                       )}
                     >
-                      {SIGN[line.type]}
-                    </span>
-                    <span
-                      className="pr-3"
-                      // biome-ignore lint/security/noDangerouslySetInnerHtml: the highlighter escapes its input
-                      dangerouslySetInnerHTML={{ __html: coloured[index] }}
-                    />
-                  </div>
-                ))}
-              </div>
-            );
-          })}
+                      {/* Two columns of numbers cost a quarter of a phone's
+                          width before a line of code begins. One column
+                          there instead: a line belongs to one side or the
+                          other, and the sign beside it says which. */}
+                      <span
+                        style={narrow}
+                        className="shrink-0 select-none px-1.5 text-right text-faint tabular-nums sm:hidden"
+                      >
+                        {line.newLine ?? line.oldLine ?? ''}
+                      </span>
+                      <span
+                        style={wide}
+                        className="hidden shrink-0 select-none px-2 text-right text-faint tabular-nums sm:block"
+                      >
+                        {line.oldLine ?? ''}
+                      </span>
+                      <span
+                        style={wide}
+                        className="hidden shrink-0 select-none px-2 text-right text-faint tabular-nums sm:block"
+                      >
+                        {line.newLine ?? ''}
+                      </span>
+                      <span
+                        className={cn(
+                          'shrink-0 select-none pl-2 sm:pl-3',
+                          SIGN_STYLE[line.type],
+                        )}
+                      >
+                        {SIGN[line.type]}
+                      </span>
+                      <span
+                        className="pr-3"
+                        // biome-ignore lint/security/noDangerouslySetInnerHtml: the highlighter escapes its input
+                        dangerouslySetInnerHTML={{ __html: coloured[index] }}
+                      />
+                    </div>
+                  ))}
+                </div>
+              );
+            })}
+          </div>
         </div>
       ) : (
-        <p className="bg-card px-4 py-4 text-[13px] text-muted-foreground">
+        <p className="px-5 py-4 text-[13px] text-muted-foreground">
           {file.binary
             ? `Binary file, ${bytes(file.newSize ?? file.oldSize)}.`
             : 'Change too large to show.'}
diff --git a/packages/git-ui/src/components/molecules/diff-tree.jsx b/packages/git-ui/src/components/molecules/diff-tree.jsx
index f7c4c49..70708bb 100644
--- a/packages/git-ui/src/components/molecules/diff-tree.jsx
+++ b/packages/git-ui/src/components/molecules/diff-tree.jsx
@@ -11,8 +11,8 @@ import { cn } from '#/lib/utils.js';
 
 const STATUS_MARK = { added: '+', deleted: '−', modified: '±' };
 const STATUS_COLOR = {
-  added: 'text-success',
-  deleted: 'text-destructive',
+  added: 'text-foreground',
+  deleted: 'text-faint',
   modified: 'text-faint',
 };
 
diff --git a/packages/git-ui/src/components/molecules/file-commit.jsx b/packages/git-ui/src/components/molecules/file-commit.jsx
new file mode 100644
index 0000000..48a5025
--- /dev/null
+++ b/packages/git-ui/src/components/molecules/file-commit.jsx
@@ -0,0 +1,55 @@
+import { Link } from '#/components/atoms/link.jsx';
+import { Skeleton } from '#/components/atoms/skeleton.jsx';
+import { AuthorFacepile } from '#/components/molecules/author-facepile.jsx';
+import { timeAgo } from '#/lib/format.js';
+
+/**
+ * The last commit to change the file in view, above it: who changed it, what
+ * they said, and when. The repository's own latest commit reads the same way
+ * above its file listing, so a reader meets one line in both places.
+ *
+ * The walk behind it runs over objects the file view has already opened, so
+ * the line fills in behind the file rather than holding it up.
+ */
+export function FileCommit({ repo, commit, pending }) {
+  // The placeholder stands in the shape of the line it waits for, down to
+  // the round of the avatar, so the file below it does not step down the
+  // page when the walk lands.
+  if (pending) {
+    return (
+      <div className="flex min-h-[41px] items-center gap-3 border-border border-t bg-muted px-(--gutter) py-2.5 text-[13px]">
+        <Skeleton className="size-[18px] shrink-0 rounded-full" />
+        <Skeleton className="h-[18px] w-28 max-w-full" />
+        <Skeleton className="h-[18px] w-64 max-w-full" />
+      </div>
+    );
+  }
+  if (!commit) return null;
+
+  const subject = commit.message.split('\n')[0];
+  const href = `/${encodeURIComponent(repo)}/commit/${commit.sha}`;
+
+  return (
+    <div className="flex min-h-[41px] flex-wrap items-center gap-x-3 gap-y-2 border-border border-t bg-muted px-(--gutter) py-2.5 text-[13px]">
+      <AuthorFacepile
+        ident={commit.author}
+        message={commit.message}
+        className="font-semibold"
+      />
+      <Link
+        href={href}
+        className="min-w-0 flex-1 truncate text-muted-foreground"
+        title={subject}
+      >
+        {subject}
+      </Link>
+      <span className="flex shrink-0 items-center gap-2 text-[12.5px] text-faint">
+        <Link href={href} className="font-mono">
+          {commit.sha.slice(0, 7)}
+        </Link>
+        <span aria-hidden="true">·</span>
+        <span>{timeAgo(commit.committedAt)}</span>
+      </span>
+    </div>
+  );
+}
diff --git a/packages/git-ui/src/components/molecules/language-bar.jsx b/packages/git-ui/src/components/molecules/language-bar.jsx
index 69d6eb7..74a1a57 100644
--- a/packages/git-ui/src/components/molecules/language-bar.jsx
+++ b/packages/git-ui/src/components/molecules/language-bar.jsx
@@ -1,9 +1,21 @@
-import { useRef, useState } from 'react';
+import { useRef, useState, useSyncExternalStore } from 'react';
 import { percent } from '#/lib/languages.js';
+import { hasHue, onTheme } from '#/lib/theme.js';
 
 /** Ticks across the whole scale. Each one is a share of the repository. */
 const TICKS = 72;
 
+/**
+ * How solid each language's ticks read, largest first. The gauge has no hue
+ * to spend, so rank is what tells one run from the next: the language a
+ * repository is mostly written in stands at full strength and each one after
+ * it steps back. Past the last step every remaining language reads alike,
+ * which by then is a tail too thin to tell apart anyway.
+ */
+const RANKS = [1, 0.78, 0.6, 0.46, 0.36, 0.28, 0.22];
+
+const rank = (index) => RANKS[Math.min(index, RANKS.length - 1)];
+
 /**
  * What a repository is written in, as a row of ticks read like a gauge: each
  * language holds the run of ticks its share earns, and the one under the
@@ -22,6 +34,15 @@ const TICKS = 72;
 export function LanguageBar({ languages }) {
   const [hovered, setHovered] = useState(null);
   const row = useRef(null);
+  // A palette with hue to spend gives each language linguist's own colour.
+  // One without steps each back by rank instead, which is the only way a
+  // greyscale gauge can tell them apart. The palette is asked rather than
+  // consulted about: its own key colour is the honest account of it.
+  const byRank = useSyncExternalStore(
+    onTheme,
+    () => !hasHue(),
+    () => true,
+  );
 
   // Hand out the scale, one language at a time, and let the last one take
   // whatever rounding left over so the row always ends full. Each tick
@@ -80,8 +101,15 @@ export function LanguageBar({ languages }) {
               className="w-[2px] shrink-0 transition-[height]"
               style={{
                 height: hovered === index ? '100%' : '60%',
-                backgroundColor: language.color,
-                opacity: hovered === null || hovered === index ? 1 : 0.35,
+                backgroundColor: byRank ? 'var(--foreground)' : language.color,
+                opacity:
+                  hovered === null || hovered === index
+                    ? byRank
+                      ? rank(index)
+                      : 1
+                    : byRank
+                      ? rank(index) * 0.3
+                      : 0.3,
               }}
             />
           ))}
@@ -91,7 +119,12 @@ export function LanguageBar({ languages }) {
         <span className="pointer-events-none absolute top-4 left-0 z-10 flex items-center gap-1.5 border border-border bg-card px-2 py-1 text-[12px] shadow-sm">
           <span
             className="size-2 shrink-0"
-            style={{ backgroundColor: languages[hovered].color }}
+            style={{
+              backgroundColor: byRank
+                ? 'var(--foreground)'
+                : languages[hovered].color,
+              opacity: byRank ? rank(hovered) : 1,
+            }}
           />
           <span className="whitespace-nowrap font-semibold text-foreground">
             {languages[hovered].name}
diff --git a/packages/git-ui/src/components/molecules/latest-commit.jsx b/packages/git-ui/src/components/molecules/latest-commit.jsx
index 818a20f..f43fdc3 100644
--- a/packages/git-ui/src/components/molecules/latest-commit.jsx
+++ b/packages/git-ui/src/components/molecules/latest-commit.jsx
@@ -1,6 +1,6 @@
 import { HistoryIcon } from 'lucide-react';
 import { Link } from '#/components/atoms/link.jsx';
-import { AuthorLine } from '#/components/molecules/author-line.jsx';
+import { AuthorFacepile } from '#/components/molecules/author-facepile.jsx';
 import { RefCheckStatus } from '#/components/molecules/ref-check-status.jsx';
 import { timeAgo } from '#/lib/format.js';
 
@@ -18,8 +18,12 @@ export function LatestCommit({ repo, refName, commit, count, truncated }) {
   const short = commit.sha.slice(0, 7);
 
   return (
-    <div className="flex flex-wrap items-center gap-x-3 gap-y-2 border-border border-b bg-muted px-4 py-2.5 text-[13px]">
-      <AuthorLine ident={commit.author} className="font-semibold" />
+    <div className="flex flex-wrap items-center gap-x-3 gap-y-2 border-border border-t bg-muted px-(--gutter) py-2.5 text-[13px]">
+      <AuthorFacepile
+        ident={commit.author}
+        message={commit.message}
+        className="font-semibold"
+      />
       <Link
         href={`/${encodeURIComponent(repo)}/commit/${commit.sha}`}
         className="min-w-0 flex-1 truncate text-muted-foreground"
diff --git a/packages/git-ui/src/components/molecules/repo-activity.jsx b/packages/git-ui/src/components/molecules/repo-activity.jsx
new file mode 100644
index 0000000..8bb70f3
--- /dev/null
+++ b/packages/git-ui/src/components/molecules/repo-activity.jsx
@@ -0,0 +1,30 @@
+import { Skeleton } from '#/components/atoms/skeleton.jsx';
+import { ActivityTicks } from '#/components/molecules/activity-ticks.jsx';
+import { defaultRef, isEmpty } from '#/lib/git.js';
+import { useHistory } from '#/lib/source.js';
+
+/**
+ * How lately one repository was worked on, as the row of ticks its own page
+ * draws. The index knows a repository's shape from its record alone, and this
+ * walks its commits, so a card paints first and the ticks arrive after.
+ *
+ * The walk shares its key with the repository's page, so opening a card the
+ * reader has already seen costs no second walk.
+ */
+export function RepoActivity({ repo }) {
+  const { data, isPending } = useHistory(repo.name, defaultRef(repo));
+  // A repository with nothing pushed draws no gauge, and knowing that from
+  // the record costs no walk. Every other card holds the row's height from
+  // the first frame, so a card does not grow under the reader when its walk
+  // lands.
+  if (isEmpty(repo)) return null;
+  return (
+    <span className="flex h-3 w-full items-end">
+      {data?.dates?.length ? (
+        <ActivityTicks dates={data.dates} />
+      ) : isPending ? (
+        <Skeleton className="h-3 w-full" />
+      ) : null}
+    </span>
+  );
+}
diff --git a/packages/git-ui/src/components/molecules/repo-gauges.jsx b/packages/git-ui/src/components/molecules/repo-gauges.jsx
index 123d8c1..8a348bf 100644
--- a/packages/git-ui/src/components/molecules/repo-gauges.jsx
+++ b/packages/git-ui/src/components/molecules/repo-gauges.jsx
@@ -1,4 +1,5 @@
 import { useQuery } from '@tanstack/react-query';
+import { Skeleton } from '#/components/atoms/skeleton.jsx';
 import { ActivityTicks } from '#/components/molecules/activity-ticks.jsx';
 import { LanguageBar } from '#/components/molecules/language-bar.jsx';
 import { ACTIVITY_WEEKS } from '#/lib/activity.js';
@@ -19,7 +20,7 @@ export function RepoGauges({ repo, refName }) {
   const record = repoRecord(repo);
   const asked = Boolean(record) && !isEmpty(record);
 
-  const { data: languages } = useQuery({
+  const { data: languages, isPending: languagesPending } = useQuery({
     queryKey: ['languages', repo, refName],
     enabled: asked,
     queryFn: async () => {
@@ -32,23 +33,46 @@ export function RepoGauges({ repo, refName }) {
     },
   });
 
-  const { data: history } = useHistory(repo, refName);
+  const { data: history, isPending: historyPending } = useHistory(
+    repo,
+    refName,
+  );
 
-  if (!languages?.length && !history?.dates?.length) return null;
+  const showLanguages = languagesPending || Boolean(languages?.length);
+  const showActivity = historyPending || Boolean(history?.dates?.length);
+  if (!showLanguages && !showActivity) return null;
 
   return (
     <div className="flex flex-col gap-3.5">
-      {languages && languages.length > 0 && (
+      {/* Each gauge keeps its place from the first frame. Both walks run
+          over the whole repository, so they land well after the file beside
+          them, and a listing that stepped down the page twice on the way
+          would be the reader's problem rather than the walk's. */}
+      {showLanguages && (
         <div>
-          <LanguageBar languages={languages} />
+          {languages?.length ? (
+            <LanguageBar languages={languages} />
+          ) : (
+            <Skeleton className="h-3 w-full" />
+          )}
+          {/* The placeholder sits inside the line rather than replacing it,
+              so the label keeps the height its text will have. */}
           <div className="mt-1.5 truncate text-[10px] text-faint uppercase tracking-[0.12em]">
-            {languages[0].name} {percent(languages[0].share)}
+            {languages?.length ? (
+              `${languages[0].name} ${percent(languages[0].share)}`
+            ) : (
+              <Skeleton className="inline-block h-2 w-24 align-middle" />
+            )}
           </div>
         </div>
       )}
-      {history?.dates && history.dates.length > 0 && (
+      {showActivity && (
         <div>
-          <ActivityTicks dates={history.dates} />
+          {history?.dates?.length ? (
+            <ActivityTicks dates={history.dates} />
+          ) : (
+            <Skeleton className="h-3 w-full" />
+          )}
           <div className="mt-1.5 text-[10px] text-faint uppercase tracking-[0.12em]">
             {ACTIVITY_WEEKS} weeks
           </div>
diff --git a/packages/git-ui/src/components/molecules/repo-tabs.jsx b/packages/git-ui/src/components/molecules/repo-tabs.jsx
index d0be777..e20e8e2 100644
--- a/packages/git-ui/src/components/molecules/repo-tabs.jsx
+++ b/packages/git-ui/src/components/molecules/repo-tabs.jsx
@@ -6,6 +6,7 @@ import {
   GitCommitVerticalIcon,
   PackageIcon,
 } from 'lucide-react';
+import { useEffect, useRef } from 'react';
 import { Link } from '#/components/atoms/link.jsx';
 import { repoConfig } from '#/lib/git.js';
 import { cn } from '#/lib/utils.js';
@@ -45,6 +46,14 @@ export function RepoTabs({ repo, active }) {
   const packages = linkedPackagesOf(config);
   const base = `/${encodeURIComponent(repo)}`;
 
+  // The bar scrolls where a narrow window cannot hold every section. The one
+  // that is open is the one a reader needs to see, so it brings itself into
+  // view rather than sitting off the end.
+  const open = useRef(null);
+  useEffect(() => {
+    open.current?.scrollIntoView({ block: 'nearest', inline: 'nearest' });
+  }, []);
+
   const tabs = [
     { key: 'code', href: base },
     { key: 'commits', href: `${base}/commits` },
@@ -61,15 +70,16 @@ export function RepoTabs({ repo, active }) {
     >
       {tabs.map((tab) => {
         const Icon = ICONS[tab.key];
-        const open = tab.key === active;
+        const isOpen = tab.key === active;
         return (
           <Link
             key={tab.key}
+            ref={isOpen ? open : undefined}
             href={tab.href}
-            aria-current={open ? 'page' : undefined}
+            aria-current={isOpen ? 'page' : undefined}
             className={cn(
               'flex shrink-0 items-center gap-2 rounded-[3px] px-3 py-1.5 text-[13.5px] no-underline hover:no-underline',
-              open
+              isOpen
                 ? 'bg-accent font-semibold text-foreground'
                 : 'text-muted-foreground hover:bg-accent/60 hover:text-foreground',
             )}
diff --git a/packages/git-ui/src/components/molecules/theme-menu.jsx b/packages/git-ui/src/components/molecules/theme-menu.jsx
new file mode 100644
index 0000000..fba5817
--- /dev/null
+++ b/packages/git-ui/src/components/molecules/theme-menu.jsx
@@ -0,0 +1,59 @@
+import { Popover } from '@base-ui/react/popover';
+import { CheckIcon, PaletteIcon } from 'lucide-react';
+import { useSyncExternalStore } from 'react';
+import { applyTheme, onTheme, themeId, themes } from '#/lib/theme.js';
+import { cn } from '#/lib/utils.js';
+
+/**
+ * Which palette the page paints in. The account may publish its own beside
+ * the ones the page ships, and a reader's pick is theirs: it is remembered
+ * in this browser and never written back.
+ */
+export function ThemeMenu() {
+  const chosen = useSyncExternalStore(onTheme, themeId, () => '');
+  const all = themes();
+
+  return (
+    <Popover.Root>
+      <Popover.Trigger
+        aria-label="Theme"
+        title="Theme"
+        className="flex size-7 cursor-pointer items-center justify-center rounded-[3px] text-faint outline-none transition-colors hover:bg-accent hover:text-foreground focus-visible:ring-[3px] focus-visible:ring-ring/50"
+      >
+        <PaletteIcon className="size-4" />
+      </Popover.Trigger>
+      <Popover.Portal>
+        <Popover.Positioner sideOffset={6} align="end">
+          <Popover.Popup className="w-56 rounded-[4px] border border-border bg-card p-1 shadow-lg outline-none">
+            {all.map((one) => (
+              <button
+                key={one.id || 'system'}
+                type="button"
+                onClick={() => applyTheme(one.id)}
+                className={cn(
+                  'flex w-full cursor-pointer items-center gap-2 rounded-[3px] px-2 py-1.5 text-left text-[13px]',
+                  one.id === chosen
+                    ? 'bg-accent text-foreground'
+                    : 'text-muted-foreground hover:bg-accent/60 hover:text-foreground',
+                )}
+              >
+                <CheckIcon
+                  className={cn(
+                    'size-3.5 shrink-0',
+                    one.id === chosen ? 'opacity-100' : 'opacity-0',
+                  )}
+                />
+                <span className="min-w-0 flex-1 truncate">{one.name}</span>
+                {one.published && (
+                  <span className="shrink-0 text-[10px] text-faint uppercase tracking-[0.12em]">
+                    yours
+                  </span>
+                )}
+              </button>
+            ))}
+          </Popover.Popup>
+        </Popover.Positioner>
+      </Popover.Portal>
+    </Popover.Root>
+  );
+}
diff --git a/packages/git-ui/src/lib/authors.js b/packages/git-ui/src/lib/authors.js
index 9ab30f0..c18a9c3 100644
--- a/packages/git-ui/src/lib/authors.js
+++ b/packages/git-ui/src/lib/authors.js
@@ -99,6 +99,20 @@ export function describeAuthor(ident) {
   const { name, email } = splitIdent(ident);
   const claim = matchIdent(claims, ident);
   const profile = claim ? profiles.get(claim.did || account.did) : null;
+  // A claim may name a tool or a bot rather than an account. The account
+  // says what to call it and gives it a face, and the blob it names is in
+  // the account's own repo.
+  if (!profile && claim?.label) {
+    return {
+      name: claim.label,
+      handle: '',
+      avatar: claim.avatarCid
+        ? `${account.pds}/xrpc/com.atproto.sync.getBlob?did=${encodeURIComponent(account.did)}&cid=${encodeURIComponent(claim.avatarCid)}`
+        : '',
+      atproto: false,
+      title: `${ident} · named by @${owner()?.handle ?? account.handle}`,
+    };
+  }
   if (profile) {
     return {
       name: profile.displayName || profile.handle,
diff --git a/packages/git-ui/src/lib/source.js b/packages/git-ui/src/lib/source.js
index 632221d..420aaab 100644
--- a/packages/git-ui/src/lib/source.js
+++ b/packages/git-ui/src/lib/source.js
@@ -46,6 +46,24 @@ export function useDirectory(repo, refName, path) {
   });
 }
 
+/**
+ * The last commit to change one file. The walk reads trees the page has
+ * mostly downloaded already, so it costs no request of its own on a
+ * repository the reader has open.
+ * @param {string} repo
+ * @param {string} refName
+ * @param {string} path
+ */
+export function useFileCommit(repo, refName, path) {
+  const record = repoRecord(repo);
+  return useQuery({
+    queryKey: ['file-commit', repo, refName, path],
+    enabled: Boolean(record) && !isEmpty(record) && Boolean(path),
+    queryFn: () => readerFor(repo).lastCommit(account.did, repo, refName, path),
+    staleTime: Number.POSITIVE_INFINITY,
+  });
+}
+
 /**
  * The tip of a ref, how far its history runs, and when its recent commits
  * were made. The walk reads every commit, which on an indexed chain is a
diff --git a/packages/git-ui/src/lib/theme.js b/packages/git-ui/src/lib/theme.js
new file mode 100644
index 0000000..5dbf35f
--- /dev/null
+++ b/packages/git-ui/src/lib/theme.js
@@ -0,0 +1,274 @@
+// Which palette the page paints in.
+//
+// Four palettes ship with the page, and the account may publish more as
+// dev.pdsjs.app.theme records. A published one carries colours by semantic
+// name, which are set as custom properties on the root; the stylesheet's own
+// names are the fallback for anything it leaves out.
+//
+// A reader's choice is theirs alone: it is remembered in this browser and
+// never written back to the repo.
+
+import { account } from './git.js';
+
+const THEME_COLLECTION = 'dev.pdsjs.app.theme';
+const REMEMBERED = 'git-ui:theme';
+
+/**
+ * @typedef {Object} Theme
+ * @property {string} id - the data-theme value, or the record key
+ * @property {string} name - what a picker calls it
+ * @property {string} scheme - 'light' or 'dark'
+ * @property {Record<string, string>} [colors] - a published theme's own
+ * @property {boolean} [published] - written by the account rather than shipped
+ */
+
+/**
+ * The palettes the stylesheet carries. Following the system is the default,
+ * and the only one that answers to the reader's own light and dark setting.
+ * @type {Theme[]}
+ */
+export const BUILT_IN = [
+  { id: '', name: 'System', scheme: 'system' },
+  { id: 'light', name: 'Instrument light', scheme: 'light' },
+  { id: 'dark', name: 'Instrument dark', scheme: 'dark' },
+  {
+    id: 'github-light',
+    name: 'GitHub light',
+    scheme: 'light',
+  },
+  { id: 'github', name: 'GitHub dark', scheme: 'dark' },
+  {
+    id: 'catppuccin-latte',
+    name: 'Catppuccin Latte',
+    scheme: 'light',
+  },
+  {
+    id: 'catppuccin-mocha',
+    name: 'Catppuccin Mocha',
+    scheme: 'dark',
+  },
+  { id: 'cyberpunk', name: 'Cyberpunk', scheme: 'dark' },
+  { id: 'dracula', name: 'Dracula', scheme: 'dark' },
+  { id: 'tokyo-night', name: 'Tokyo Night', scheme: 'dark' },
+];
+
+/**
+ * The names a published theme may set. A record naming anything else is
+ * ignored rather than trusted: these are the whole of what the page paints
+ * with, and a palette has no business reaching past them.
+ */
+const TOKENS = new Set([
+  'background',
+  'card',
+  'muted',
+  'accent',
+  'border',
+  'input',
+  'foreground',
+  'muted-foreground',
+  'faint',
+  'primary',
+  'primary-foreground',
+  'secondary',
+  'secondary-foreground',
+  'accent-foreground',
+  'destructive',
+  'destructive-dim',
+  'success',
+  'success-dim',
+  'ring',
+  'key',
+  'diff-add',
+  'diff-add-ink',
+  'diff-del',
+  'diff-del-ink',
+  'diff-meta',
+  'code-comment',
+  'code-keyword',
+  'code-string',
+  'code-number',
+  'code-title',
+  'code-attr',
+  'code-meta',
+]);
+
+/**
+ * A colour the page will set. Custom properties are set as values rather
+ * than as text, so a stylesheet cannot be broken open through one; this
+ * keeps a published palette to colours all the same, so a record cannot
+ * point the page at anything it has to fetch.
+ * @param {unknown} value
+ * @returns {boolean}
+ */
+function isColour(value) {
+  return (
+    typeof value === 'string' &&
+    value.length <= 64 &&
+    /^(#[0-9a-f]{3,8}|(rgb|hsl|oklch|lab|lch)a?\([0-9a-z.,%/\s-]+\))$/i.test(
+      value.trim(),
+    )
+  );
+}
+
+/** Themes by id, filled by loadThemes() and read by the picker. */
+/** @type {Map<string, Theme>} */
+const known = new Map(BUILT_IN.map((theme) => [theme.id, theme]));
+
+let current = read();
+
+/** @type {Set<() => void>} */
+const listeners = new Set();
+
+function read() {
+  try {
+    return localStorage.getItem(REMEMBERED) ?? '';
+  } catch {
+    // A page that cannot read storage follows the system.
+    return '';
+  }
+}
+
+/**
+ * How saturated a colour is, 0 to 1. Only the spread matters here, not the
+ * exact figure, so this reads the hex the page is painting with rather than
+ * reaching for a colour library.
+ * @param {string} colour
+ */
+function saturation(colour) {
+  const hex = colour.trim().replace('#', '');
+  if (hex.length < 6) return 0;
+  const [r, g, b] = [0, 2, 4].map((at) => {
+    return Number.parseInt(hex.slice(at, at + 2), 16) / 255;
+  });
+  const high = Math.max(r, g, b);
+  const low = Math.min(r, g, b);
+  if (high === low) return 0;
+  const light = (high + low) / 2;
+  return (high - low) / (light > 0.5 ? 2 - high - low : high + low);
+}
+
+/**
+ * Whether the palette in force has hue to spend. A language gauge asks this
+ * to decide between linguist's colour per language and one ink stepped back
+ * by rank; anything else that wants to colour a set of things can ask the
+ * same.
+ *
+ * The palette answers rather than declares. A theme that said it had colour
+ * and did not would leave a gauge unreadable, and the colours it paints with
+ * are the honest account of it. The key is what the page reaches for first
+ * when it wants to stand something out, so it is the one to ask.
+ * @returns {boolean}
+ */
+export function hasHue() {
+  const key = getComputedStyle(document.documentElement).getPropertyValue(
+    '--key',
+  );
+  return saturation(key) > 0.25;
+}
+
+/** The theme in force, as a whole record rather than an id. */
+export function theme() {
+  return known.get(current) ?? BUILT_IN[0];
+}
+
+/** @param {() => void} listener */
+export function onTheme(listener) {
+  listeners.add(listener);
+  return () => listeners.delete(listener);
+}
+
+export function themeId() {
+  return current;
+}
+
+/** Every palette a reader may pick, shipped and published alike. */
+export function themes() {
+  return [...known.values()];
+}
+
+/**
+ * Paint the page in one palette. A shipped one is a name the stylesheet
+ * answers to; a published one is that name plus its own colours, set over
+ * the top.
+ * @param {string} id
+ */
+export function applyTheme(id) {
+  const root = document.documentElement;
+  // The choice is remembered as given, even where nothing answers to it yet:
+  // a palette the account publishes is unknown until its record is read, and
+  // forgetting the name here would lose the reader's pick every reload.
+  current = id ?? '';
+  const chosen = known.get(current) ?? BUILT_IN[0];
+
+  for (const token of TOKENS) root.style.removeProperty(`--${token}`);
+  root.style.removeProperty('color-scheme');
+
+  if (chosen.id) root.dataset.theme = chosen.id;
+  else delete root.dataset.theme;
+
+  if (chosen.published) {
+    // The record names no stylesheet block, so it starts from the shipped
+    // palette that runs the same way round and paints its own over it.
+    root.dataset.theme = chosen.scheme === 'light' ? 'light' : 'dark';
+    root.style.setProperty('color-scheme', chosen.scheme);
+    for (const [token, colour] of Object.entries(chosen.colors ?? {})) {
+      if (TOKENS.has(token) && isColour(colour)) {
+        root.style.setProperty(`--${token}`, colour.trim());
+      }
+    }
+  }
+
+  try {
+    if (current) localStorage.setItem(REMEMBERED, current);
+    else localStorage.removeItem(REMEMBERED);
+  } catch {
+    // A page that cannot write storage still paints; it just forgets.
+  }
+  for (const listener of listeners) listener();
+}
+
+/**
+ * The palettes the account publishes, added to the ones the page ships.
+ * Every failure reads as none: a theme is decoration, and a reader who
+ * cannot have one should still get the page.
+ * @returns {Promise<Theme[]>}
+ */
+export async function loadThemes() {
+  try {
+    const params = new URLSearchParams({
+      repo: account.did,
+      collection: THEME_COLLECTION,
+      limit: '50',
+    });
+    const res = await fetch(
+      `${account.pds}/xrpc/com.atproto.repo.listRecords?${params}`,
+    );
+    if (!res.ok) return [];
+    const rows =
+      /** @type {{records?: {uri: string, value: Record<string, unknown>}[]}} */ (
+        await res.json()
+      ).records;
+    /** @type {Theme[]} */
+    const published = [];
+    for (const row of rows ?? []) {
+      const id = row.uri.split('/').pop();
+      const value = row.value ?? {};
+      if (!id || typeof value.name !== 'string') continue;
+      published.push({
+        id,
+        name: value.name,
+        scheme: value.scheme === 'light' ? 'light' : 'dark',
+        colors: /** @type {Record<string, string>} */ (value.colors ?? {}),
+        published: true,
+      });
+    }
+    for (const one of published) known.set(one.id, one);
+    // A reader whose remembered choice is one of these was looking at the
+    // shipped fallback until now.
+    if (published.some((one) => one.id === current)) applyTheme(current);
+    for (const listener of listeners) listener();
+    return published;
+  } catch {
+    return [];
+  }
+}
diff --git a/packages/git-ui/src/main.jsx b/packages/git-ui/src/main.jsx
index 7b20df4..dfa1f87 100644
--- a/packages/git-ui/src/main.jsx
+++ b/packages/git-ui/src/main.jsx
@@ -2,8 +2,13 @@ import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { StrictMode } from 'react';
 import { createRoot } from 'react-dom/client';
 import { App } from '#/app.jsx';
+import { applyTheme, themeId } from '#/lib/theme.js';
 import './style.css';
 
+// Paint in the remembered palette before the first frame, so a reader who
+// chose one does not watch the page change colour under them.
+applyTheme(themeId());
+
 // Every read is of an immutable object: a tree, a blob, or a commit, named by
 // a ref that only a push moves. Nothing here goes stale while the tab is
 // open, so a view already visited comes back without touching the network.
diff --git a/packages/git-ui/src/pages/checks.jsx b/packages/git-ui/src/pages/checks.jsx
index 4b7c629..c172764 100644
--- a/packages/git-ui/src/pages/checks.jsx
+++ b/packages/git-ui/src/pages/checks.jsx
@@ -74,7 +74,7 @@ export function ChecksPage({ repo }) {
 
   return (
     <div className="flex min-h-0 flex-1 flex-col">
-      <div className="shrink-0 px-4 py-2.5">
+      <div className="shrink-0 px-(--gutter) py-2.5">
         <CheckFilter
           workflows={workflowNames(all)}
           counts={counts}
diff --git a/packages/git-ui/src/pages/commit.jsx b/packages/git-ui/src/pages/commit.jsx
index 3771fe7..3ca4f02 100644
--- a/packages/git-ui/src/pages/commit.jsx
+++ b/packages/git-ui/src/pages/commit.jsx
@@ -1,6 +1,6 @@
 import { useQuery } from '@tanstack/react-query';
 import { useCallback, useRef, useState } from 'react';
-import { AuthorLine } from '#/components/molecules/author-line.jsx';
+import { AuthorFacepile } from '#/components/molecules/author-facepile.jsx';
 import { CommitChecks } from '#/components/molecules/commit-checks.jsx';
 import { DiffFile } from '#/components/molecules/diff-file.jsx';
 import { DiffTree } from '#/components/molecules/diff-tree.jsx';
@@ -47,17 +47,16 @@ export function CommitPage({ repo, sha }) {
 
   return (
     <div className="flex min-h-0 flex-1 flex-col">
-      {/* What the commit says, above the panes and holding its place while
-          the diffs move. */}
-      <div className="shrink-0 px-5 py-4">
+      {/* The subject and who wrote it hold their place, the way the ref and
+          the path do on the source view. What the commit goes on to say is
+          as long as its author made it, so that reads with the diffs rather
+          than pushing them off the window. */}
+      <div className="shrink-0 px-(--gutter) py-3">
         <h2 className="break-words font-semibold text-[16px]">{subject}</h2>
-        {body && (
-          <pre className="mt-2.5 whitespace-pre-wrap break-words font-mono text-[13px] text-muted-foreground">
-            {body}
-          </pre>
-        )}
-        <div className="mt-2.5 flex flex-wrap gap-x-4 gap-y-1 text-[12.5px] text-faint">
-          <AuthorLine ident={data.author} size="md" />
+        {/* A line of readings about the commit, each as plain as the next,
+            starting under the subject rather than beside a picture. */}
+        <div className="mt-1.5 flex flex-wrap gap-x-4 gap-y-1 text-[12.5px] text-faint">
+          <AuthorFacepile ident={data.author} message={data.message} />
           <span>{new Date(data.committedAt).toLocaleString()}</span>
           <code className="break-all font-mono text-key">{data.sha}</code>
           <span>
@@ -79,6 +78,13 @@ export function CommitPage({ repo, sha }) {
           </aside>
         )}
         <div className="min-w-0 flex-1 overflow-y-auto">
+          {body && (
+            <div className="border-border border-b px-6 py-4">
+              <pre className="max-w-3xl whitespace-pre-wrap break-words font-mono text-[13px] text-muted-foreground">
+                {body}
+              </pre>
+            </div>
+          )}
           <CommitChecks repo={repo} sha={data.sha} />
           {data.files.map((file) => (
             <DiffFile
diff --git a/packages/git-ui/src/pages/commits.jsx b/packages/git-ui/src/pages/commits.jsx
index df46518..4cf909a 100644
--- a/packages/git-ui/src/pages/commits.jsx
+++ b/packages/git-ui/src/pages/commits.jsx
@@ -1,7 +1,7 @@
 import { useQuery } from '@tanstack/react-query';
 import { GitCommitVerticalIcon } from 'lucide-react';
 import { Link } from '#/components/atoms/link.jsx';
-import { AuthorLine } from '#/components/molecules/author-line.jsx';
+import { AuthorFacepile } from '#/components/molecules/author-facepile.jsx';
 import { CommitCheckStatus } from '#/components/molecules/commit-check-status.jsx';
 import { ReadingRepo } from '#/components/molecules/reading-repo.jsx';
 import { RefSelect } from '#/components/molecules/ref-select.jsx';
@@ -28,7 +28,7 @@ export function CommitsPage({ repo, refName }) {
 
   return (
     <div className="flex min-h-0 flex-1 flex-col">
-      <div className="flex shrink-0 flex-wrap items-center gap-3 px-5 py-3">
+      <div className="flex shrink-0 flex-wrap items-center gap-3 px-(--gutter) py-3">
         <RefSelect
           repo={record}
           value={refName}
@@ -61,7 +61,10 @@ export function CommitsPage({ repo, refName }) {
                       {commit.message.split('\n')[0]}
                     </span>
                     <span className="mt-1 flex flex-wrap items-center gap-x-2.5 gap-y-1 text-[12.5px] text-faint">
-                      <AuthorLine ident={commit.author} />
+                      <AuthorFacepile
+                        ident={commit.author}
+                        message={commit.message}
+                      />
                       <code className="font-mono text-key">
                         {commit.sha.slice(0, 8)}
                       </code>
diff --git a/packages/git-ui/src/pages/file.jsx b/packages/git-ui/src/pages/file.jsx
index 7770c35..b3c708f 100644
--- a/packages/git-ui/src/pages/file.jsx
+++ b/packages/git-ui/src/pages/file.jsx
@@ -4,6 +4,7 @@ import { useEffect, useState } from 'react';
 import { buttonVariants } from '#/components/atoms/button.jsx';
 import { Card } from '#/components/atoms/card.jsx';
 import { Breadcrumbs } from '#/components/molecules/breadcrumbs.jsx';
+import { FileCommit } from '#/components/molecules/file-commit.jsx';
 import { ReadingRepo } from '#/components/molecules/reading-repo.jsx';
 import { RefSelect } from '#/components/molecules/ref-select.jsx';
 import { SourcePanes } from '#/components/molecules/source-panes.jsx';
@@ -18,7 +19,7 @@ import {
 } from '#/lib/git.js';
 import { highlightBlock, languageFor } from '#/lib/highlight.js';
 import { useNavigate } from '#/lib/navigation.jsx';
-import { parentOf } from '#/lib/source.js';
+import { parentOf, useFileCommit } from '#/lib/source.js';
 import { cn } from '#/lib/utils.js';
 
 /** The bytes of an image, as an object URL that lives as long as the view. */
@@ -54,13 +55,21 @@ export function FilePage({ repo, refName, path }) {
 
   const imageUrl = useObjectUrl(data?.image);
 
+  // Who last changed this file. The walk reads trees rather than the file, so
+  // it runs behind the paint and fills its line in when it lands.
+  const { data: fileCommit, isPending: commitPending } = useFileCommit(
+    repo,
+    refName,
+    path,
+  );
+
   if (!record) {
     return <p className="py-16 text-center text-faint">No such repository.</p>;
   }
 
   return (
     <>
-      <div className="flex flex-wrap items-center justify-between gap-3 px-5 py-3">
+      <div className="flex flex-wrap items-center justify-between gap-3 px-(--gutter) py-3">
         <div className="flex min-w-0 flex-wrap items-center gap-3">
           <RefSelect
             repo={record}
@@ -91,6 +100,8 @@ export function FilePage({ repo, refName, path }) {
         </span>
       </div>
 
+      <FileCommit repo={repo} commit={fileCommit} pending={commitPending} />
+
       <SourcePanes
         repo={repo}
         refName={refName}
diff --git a/packages/git-ui/src/pages/repos.jsx b/packages/git-ui/src/pages/repos.jsx
index 607b0b2..290861f 100644
--- a/packages/git-ui/src/pages/repos.jsx
+++ b/packages/git-ui/src/pages/repos.jsx
@@ -1,13 +1,9 @@
 import { useQuery } from '@tanstack/react-query';
-import {
-  ArrowUpFromLineIcon,
-  FolderGitIcon,
-  GitBranchIcon,
-  TagIcon,
-} from 'lucide-react';
+import { FolderGitIcon, GitBranchIcon, TagIcon } from 'lucide-react';
 import { Link } from '#/components/atoms/link.jsx';
 import { AccountPanel } from '#/components/molecules/account-panel.jsx';
 import { EmptyState } from '#/components/molecules/empty-state.jsx';
+import { RepoActivity } from '#/components/molecules/repo-activity.jsx';
 import { RepoListSkeleton } from '#/components/molecules/repo-list-skeleton.jsx';
 import { bytes, timeAgo } from '#/lib/format.js';
 import {
@@ -18,18 +14,19 @@ import {
   repoSize,
   tagRefs,
 } from '#/lib/git.js';
+import { cn } from '#/lib/utils.js';
 
-/**
- * How many times this repository has been pushed to. Every push appends a
- * bundle to the chain, so the chain's length counts them, and no packfile has
- * to be opened to know it.
- */
-const pushes = (repo) => (repo.bundles || []).length;
+/* The separator belongs to the reading that follows it, so a row that wraps
+   never ends a line on a dot. */
+const LEAD = "before:mr-2 before:text-faint before:content-['·']";
 
 /** One reading: an icon, a number, and what the number counts. */
-function Metric({ icon, value, unit }) {
+function Metric({ icon, value, unit, lead }) {
   return (
-    <span className="flex items-center gap-1.5" title={`${value} ${unit}`}>
+    <span
+      className={cn('flex items-center gap-1.5', lead && LEAD)}
+      title={`${value} ${unit}`}
+    >
       {icon}
       <span className="font-semibold text-foreground tabular-nums">
         {value}
@@ -39,6 +36,29 @@ function Metric({ icon, value, unit }) {
   );
 }
 
+/** What this repository holds, in the order a reader asks for it. */
+function readingsOf(repo) {
+  const branches = branchRefs(repo).length;
+  const tags = tagRefs(repo).length;
+  const readings = [
+    {
+      key: 'branches',
+      icon: <GitBranchIcon className="size-3.5 text-faint" />,
+      value: branches,
+      unit: branches === 1 ? 'branch' : 'branches',
+    },
+  ];
+  if (tags > 0) {
+    readings.push({
+      key: 'tags',
+      icon: <TagIcon className="size-3.5 text-faint" />,
+      value: tags,
+      unit: tags === 1 ? 'tag' : 'tags',
+    });
+  }
+  return readings;
+}
+
 export function ReposPage() {
   // The account gate already loaded (or primed) the rows and pushes fresh
   // ones into this key, so the page opens on content and never refetches
@@ -93,42 +113,41 @@ export function ReposPage() {
                   <span className="text-faint">No description</span>
                 )}
               </span>
-              <span className="flex flex-wrap items-center gap-x-3 gap-y-1 text-[12px] text-muted-foreground">
-                {isEmpty(repo) ? (
-                  <span className="text-faint">nothing pushed yet</span>
-                ) : (
-                  <>
-                    <Metric
-                      icon={<GitBranchIcon className="size-3.5 text-faint" />}
-                      value={branchRefs(repo).length}
-                      unit={
-                        branchRefs(repo).length === 1 ? 'branch' : 'branches'
-                      }
-                    />
-                    {tagRefs(repo).length > 0 && (
-                      <Metric
-                        icon={<TagIcon className="size-3.5 text-faint" />}
-                        value={tagRefs(repo).length}
-                        unit={tagRefs(repo).length === 1 ? 'tag' : 'tags'}
-                      />
-                    )}
-                    <Metric
-                      icon={
-                        <ArrowUpFromLineIcon className="size-3.5 text-faint" />
-                      }
-                      value={pushes(repo)}
-                      unit={pushes(repo) === 1 ? 'push' : 'pushes'}
-                    />
-                    <span className="font-mono text-[11.5px] text-faint">
-                      {bytes(repoSize(repo))}
+              {/* What the repository holds reads along the bottom, and how
+                  lately it was worked on stands at the end of the same line.
+                  The gauge draws above the date it belongs to. */}
+              <span className="flex items-end justify-between gap-4 text-[12px] text-muted-foreground">
+                <span className="flex min-w-0 flex-wrap items-center gap-x-2 gap-y-1">
+                  {isEmpty(repo) ? (
+                    <span className="text-faint">nothing pushed yet</span>
+                  ) : (
+                    <>
+                      {readingsOf(repo).map((reading, index) => (
+                        <Metric
+                          key={reading.key}
+                          {...reading}
+                          lead={index > 0}
+                        />
+                      ))}
+                      <span
+                        className={cn(
+                          'font-mono text-[11.5px] text-faint',
+                          LEAD,
+                        )}
+                      >
+                        {bytes(repoSize(repo))}
+                      </span>
+                    </>
+                  )}
+                </span>
+                <span className="flex w-28 shrink-0 flex-col items-end gap-1.5 sm:w-48">
+                  <RepoActivity repo={repo} />
+                  {repo.updatedAt && (
+                    <span className="text-faint">
+                      {timeAgo(repo.updatedAt)}
                     </span>
-                  </>
-                )}
-                {repo.updatedAt && (
-                  <span className="ml-auto shrink-0 text-faint">
-                    {timeAgo(repo.updatedAt)}
-                  </span>
-                )}
+                  )}
+                </span>
               </span>
             </Link>
           </li>
diff --git a/packages/git-ui/src/pages/tree.jsx b/packages/git-ui/src/pages/tree.jsx
index 1551852..96a3ca2 100644
--- a/packages/git-ui/src/pages/tree.jsx
+++ b/packages/git-ui/src/pages/tree.jsx
@@ -62,7 +62,7 @@ export function TreePage({ repo, refName, path }) {
   // What this view is looking at: which ref, and where inside it. The
   // sections of the repository, and cloning it, are in the band above.
   const toolbar = (
-    <div className="flex flex-wrap items-center gap-3 px-5 py-3">
+    <div className="flex flex-wrap items-center gap-3 px-(--gutter) py-3">
       <div className="flex min-w-0 flex-wrap items-center gap-3">
         <RefSelect
           repo={record}
@@ -71,22 +71,28 @@ export function TreePage({ repo, refName, path }) {
             navigate(`/${encodeURIComponent(repo)}/tree/${encodeURI(next)}`)
           }
         />
-        {/* What else the reader could have picked, beside the picker. */}
-        <span className="flex items-center gap-1.5 text-[13px] text-faint">
-          <GitBranchIcon className="size-3.5" />
-          <span className="font-semibold text-foreground">{branches}</span>
-          {branches === 1 ? 'branch' : 'branches'}
-        </span>
-        {tags > 0 && (
-          <span className="flex items-center gap-1.5 text-[13px] text-faint">
-            <TagIcon className="size-3.5" />
-            <span className="font-semibold text-foreground">{tags}</span>
-            {tags === 1 ? 'tag' : 'tags'}
-          </span>
+        {/* At the root, what else the reader could have picked, beside the
+            picker. Inside a directory the room goes to the path instead:
+            how many refs the repository has says nothing about where the
+            reader is standing. */}
+        {path ? (
+          <Breadcrumbs repo={repo} refName={refName} path={path} />
+        ) : (
+          <>
+            <span className="flex items-center gap-1.5 text-[13px] text-faint">
+              <GitBranchIcon className="size-3.5" />
+              <span className="font-semibold text-foreground">{branches}</span>
+              {branches === 1 ? 'branch' : 'branches'}
+            </span>
+            {tags > 0 && (
+              <span className="flex items-center gap-1.5 text-[13px] text-faint">
+                <TagIcon className="size-3.5" />
+                <span className="font-semibold text-foreground">{tags}</span>
+                {tags === 1 ? 'tag' : 'tags'}
+              </span>
+            )}
+          </>
         )}
-        {/* Only inside a directory. At the root the heading above already
-            names the repository. */}
-        {path && <Breadcrumbs repo={repo} refName={refName} path={path} />}
       </div>
     </div>
   );
@@ -138,6 +144,19 @@ export function TreePage({ repo, refName, path }) {
             {record.description}
           </p>
         )}
+        {/* The pane beside this one is gone on a narrow window, and with it
+            the way through the repository. The listing comes first here, and
+            what the directory says about itself follows. */}
+        {readme && entries && (
+          <div className="md:hidden">
+            <DirTable
+              repo={repo}
+              refName={refName}
+              path={path}
+              entries={entries}
+            />
+          </div>
+        )}
         {readme && (
           <>
             <h2 className="border-border border-b px-6 py-2.5 font-mono text-[12.5px] text-muted-foreground">
diff --git a/packages/git-ui/src/style.css b/packages/git-ui/src/style.css
index db037b0..a2ff4fb 100644
--- a/packages/git-ui/src/style.css
+++ b/packages/git-ui/src/style.css
@@ -5,19 +5,10 @@
    build inlines every asset into one document, and a webfont would multiply
    its size. */
 
-@custom-variant dark {
-  &:where([data-theme="dark"], [data-theme="dark"] *) {
-    @slot;
-  }
-  @media (prefers-color-scheme: dark) {
-    &:where(
-        :root:not([data-theme="light"]),
-        :root:not([data-theme="light"]) *
-      ) {
-      @slot;
-    }
-  }
-}
+/* Every palette below sets the same names, so a component asks for a
+   meaning and the theme decides its colour. Nothing styles itself against
+   whether the page is dark: a theme that runs dark says so in one place,
+   `color-scheme`, and the tokens carry the rest. */
 
 @theme inline {
   --color-background: var(--background);
@@ -69,138 +60,418 @@
   --font-mono: ui-monospace, SFMono-Regular, menlo, monospace;
 }
 
+/* One ramp, no hue. A reading is told from its neighbours by how light it is
+   and where it sits, the way a segment display tells them apart. A failure is
+   the one exception: a reader must not miss one, and the shape of a glyph
+   asks too much of them on its own. */
 :root {
   color-scheme: light dark;
 
-  --background: #fafafb;
-  --card: #ffffff;
-  --muted: #f2f2f6;
-  --accent: #eaeaf1;
-  --border: #e5e5ec;
-  --input: #d4d4de;
-
-  --foreground: #18181d;
-  --muted-foreground: #63636f;
-  --faint: #8e8e9a;
-
-  --primary: #18181d;
-  --primary-foreground: #fafafb;
-  --secondary: #eeeef3;
-  --secondary-foreground: #18181d;
-  --accent-foreground: #18181d;
-
-  --destructive: #dc2626;
-  --destructive-dim: #fdecec;
-  --success: #15a34a;
-  --success-dim: #e9faf0;
-
-  --ring: #6d6df0;
-  --key: #5656d6;
-
-  --diff-add: #e6f6ec;
-  --diff-add-ink: #0f6b35;
-  --diff-del: #fdecef;
-  --diff-del-ink: #a3253c;
-  --diff-meta: #6b6b9a;
-
-  --code-comment: #7b7b8c;
-  --code-keyword: #8250df;
-  --code-string: #0a7d55;
-  --code-number: #9a5b00;
-  --code-title: #1f5fb0;
-  --code-attr: #b3452b;
-  --code-meta: #63636f;
+  /* The margin every band above the panes is set against, so the heading,
+     the sections, the view controls and the commit line all begin on one
+     line down the left. */
+  --gutter: 1.25rem;
+
+  --background: #f4f4f2;
+  --card: #fbfbf9;
+  --muted: #ebebe8;
+  --accent: #e1e1dd;
+  --border: #d8d8d3;
+  --input: #c2c2bc;
+
+  --foreground: #121212;
+  --muted-foreground: #565654;
+  --faint: #868682;
+
+  --primary: #121212;
+  --primary-foreground: #f4f4f2;
+  --secondary: #e6e6e2;
+  --secondary-foreground: #121212;
+  --accent-foreground: #121212;
+
+  --destructive: #a8291f;
+  --destructive-dim: #eee2e0;
+  --success: #4a4a48;
+  --success-dim: #e6e6e2;
+
+  --ring: #868682;
+  --key: #121212;
+
+  /* A line added reads at full contrast and one taken away at half. The sign
+     in the gutter says which; the ink says how much it matters now. */
+  --diff-add: #e2e2dd;
+  --diff-add-ink: #121212;
+  --diff-del: #f0f0ec;
+  --diff-del-ink: #868682;
+  --diff-meta: #6b6b68;
+
+  --code-comment: #8a8a86;
+  --code-keyword: #121212;
+  --code-string: #4a4a48;
+  --code-number: #333331;
+  --code-title: #1c1c1a;
+  --code-attr: #4a4a48;
+  --code-meta: #6b6b68;
 }
 
 @media (prefers-color-scheme: dark) {
-  :root:not([data-theme="light"]) {
-    --background: #0a0a0c;
-    --card: #101014;
-    --muted: #15151a;
-    --accent: #17171d;
-    --border: #1e1e25;
-    --input: #26262f;
-
-    --foreground: #f4f4f7;
-    --muted-foreground: #8b8b9c;
-    --faint: #6c6c7c;
-
-    --primary: #f4f4f7;
-    --primary-foreground: #0a0a0c;
-    --secondary: #23232b;
-    --secondary-foreground: #f4f4f7;
-    --accent-foreground: #f4f4f7;
-
-    --destructive: #ef4444;
-    --destructive-dim: #1c1216;
-    --success: #4ade80;
-    --success-dim: #10221a;
-
-    --ring: #6d6df0;
-    --key: #a6a6f0;
-
-    --diff-add: #10251a;
-    --diff-add-ink: #7ee2a0;
-    --diff-del: #26121a;
-    --diff-del-ink: #f592a8;
-    --diff-meta: #8f8fbe;
-
-    --code-comment: #74748a;
-    --code-keyword: #c4a2f5;
-    --code-string: #7fd8a8;
-    --code-number: #f0b866;
-    --code-title: #85b7f0;
-    --code-attr: #f0a58a;
-    --code-meta: #9a9ab0;
+  :root:not([data-theme]) {
+    --background: #0b0b0b;
+    --card: #111111;
+    --muted: #161616;
+    --accent: #1f1f1f;
+    --border: #282828;
+    --input: #363634;
+
+    --foreground: #ededeb;
+    --muted-foreground: #9a9a96;
+    --faint: #6b6b68;
+
+    --primary: #ededeb;
+    --primary-foreground: #0b0b0b;
+    --secondary: #242422;
+    --secondary-foreground: #ededeb;
+    --accent-foreground: #ededeb;
+
+    --destructive: #e0655c;
+    --destructive-dim: #1a1312;
+    --success: #a3a39e;
+    --success-dim: #171717;
+
+    --ring: #7a7a76;
+    --key: #ededeb;
+
+    --diff-add: #1e1e1c;
+    --diff-add-ink: #ededeb;
+    --diff-del: #121212;
+    --diff-del-ink: #868682;
+    --diff-meta: #868682;
+
+    --code-comment: #6f6f6b;
+    --code-keyword: #ededeb;
+    --code-string: #b4b4b0;
+    --code-number: #cfcfca;
+    --code-title: #e2e2de;
+    --code-attr: #b4b4b0;
+    --code-meta: #9a9a96;
   }
 }
 
 :root[data-theme="dark"] {
-  --background: #0a0a0c;
-  --card: #101014;
-  --muted: #15151a;
-  --accent: #17171d;
-  --border: #1e1e25;
-  --input: #26262f;
-
-  --foreground: #f4f4f7;
-  --muted-foreground: #8b8b9c;
-  --faint: #6c6c7c;
-
-  --primary: #f4f4f7;
-  --primary-foreground: #0a0a0c;
-  --secondary: #23232b;
-  --secondary-foreground: #f4f4f7;
-  --accent-foreground: #f4f4f7;
-
-  --destructive: #ef4444;
-  --destructive-dim: #1c1216;
-  --success: #4ade80;
-  --success-dim: #10221a;
-
-  --ring: #6d6df0;
-  --key: #a6a6f0;
-
-  --diff-add: #10251a;
-  --diff-add-ink: #7ee2a0;
-  --diff-del: #26121a;
-  --diff-del-ink: #f592a8;
-  --diff-meta: #8f8fbe;
-
-  --code-comment: #74748a;
-  --code-keyword: #c4a2f5;
-  --code-string: #7fd8a8;
-  --code-number: #f0b866;
-  --code-title: #85b7f0;
-  --code-attr: #f0a58a;
-  --code-meta: #9a9ab0;
+  --background: #0b0b0b;
+  --card: #111111;
+  --muted: #161616;
+  --accent: #1f1f1f;
+  --border: #282828;
+  --input: #363634;
+
+  --foreground: #ededeb;
+  --muted-foreground: #9a9a96;
+  --faint: #6b6b68;
+
+  --primary: #ededeb;
+  --primary-foreground: #0b0b0b;
+  --secondary: #242422;
+  --secondary-foreground: #ededeb;
+  --accent-foreground: #ededeb;
+
+  --destructive: #e0655c;
+  --destructive-dim: #1a1312;
+  --success: #a3a39e;
+  --success-dim: #171717;
+
+  --ring: #7a7a76;
+  --key: #ededeb;
+
+  --diff-add: #1e1e1c;
+  --diff-add-ink: #ededeb;
+  --diff-del: #121212;
+  --diff-del-ink: #868682;
+  --diff-meta: #868682;
+
+  --code-comment: #6f6f6b;
+  --code-keyword: #ededeb;
+  --code-string: #b4b4b0;
+  --code-number: #cfcfca;
+  --code-title: #e2e2de;
+  --code-attr: #b4b4b0;
+  --code-meta: #9a9a96;
+}
+
+@media (min-width: 640px) {
+  :root {
+    --gutter: 1.75rem;
+  }
 }
 
+:root[data-theme="github"] {
+  color-scheme: dark;
+  --background: #0d1117;
+  --card: #161b22;
+  --muted: #161b22;
+  --accent: #21262d;
+  --border: #30363d;
+  --input: #484f58;
+  --foreground: #e6edf3;
+  --muted-foreground: #8b949e;
+  --faint: #6e7681;
+  --primary: #e6edf3;
+  --primary-foreground: #0d1117;
+  --secondary: #21262d;
+  --secondary-foreground: #e6edf3;
+  --accent-foreground: #e6edf3;
+  --destructive: #f85149;
+  --destructive-dim: #2a1416;
+  --success: #3fb950;
+  --success-dim: #12261e;
+  --ring: #2f81f7;
+  --key: #2f81f7;
+  --diff-add: #0f2e1a;
+  --diff-add-ink: #aff5b4;
+  --diff-del: #2d1214;
+  --diff-del-ink: #ffdcd7;
+  --diff-meta: #8b949e;
+  --code-comment: #8b949e;
+  --code-keyword: #ff7b72;
+  --code-string: #a5d6ff;
+  --code-number: #79c0ff;
+  --code-title: #d2a8ff;
+  --code-attr: #7ee787;
+  --code-meta: #8b949e;
+}
+
+:root[data-theme="github-light"] {
+  color-scheme: light;
+  --background: #ffffff;
+  --card: #ffffff;
+  --muted: #f6f8fa;
+  --accent: #eaeef2;
+  --border: #d0d7de;
+  --input: #afb8c1;
+  --foreground: #1f2328;
+  --muted-foreground: #656d76;
+  --faint: #8c959f;
+  --primary: #1f2328;
+  --primary-foreground: #ffffff;
+  --secondary: #eaeef2;
+  --secondary-foreground: #1f2328;
+  --accent-foreground: #1f2328;
+  --destructive: #cf222e;
+  --destructive-dim: #ffebe9;
+  --success: #1a7f37;
+  --success-dim: #dafbe1;
+  --ring: #0969da;
+  --key: #0969da;
+  --diff-add: #e6ffec;
+  --diff-add-ink: #1f2328;
+  --diff-del: #ffebe9;
+  --diff-del-ink: #82071e;
+  --diff-meta: #656d76;
+  --code-comment: #6e7781;
+  --code-keyword: #cf222e;
+  --code-string: #0a3069;
+  --code-number: #0550ae;
+  --code-title: #8250df;
+  --code-attr: #116329;
+  --code-meta: #656d76;
+}
+
+:root[data-theme="catppuccin-mocha"] {
+  color-scheme: dark;
+  --background: #1e1e2e;
+  --card: #181825;
+  --muted: #181825;
+  --accent: #313244;
+  --border: #313244;
+  --input: #45475a;
+  --foreground: #cdd6f4;
+  --muted-foreground: #a6adc8;
+  --faint: #6c7086;
+  --primary: #cdd6f4;
+  --primary-foreground: #1e1e2e;
+  --secondary: #313244;
+  --secondary-foreground: #cdd6f4;
+  --accent-foreground: #cdd6f4;
+  --destructive: #f38ba8;
+  --destructive-dim: #2a1c26;
+  --success: #a6e3a1;
+  --success-dim: #1c2a22;
+  --ring: #cba6f7;
+  --key: #cba6f7;
+  --diff-add: #1f2d26;
+  --diff-add-ink: #cdd6f4;
+  --diff-del: #302430;
+  --diff-del-ink: #bac2de;
+  --diff-meta: #9399b2;
+  --code-comment: #6c7086;
+  --code-keyword: #cba6f7;
+  --code-string: #a6e3a1;
+  --code-number: #fab387;
+  --code-title: #89b4fa;
+  --code-attr: #f9e2af;
+  --code-meta: #9399b2;
+}
+
+:root[data-theme="catppuccin-latte"] {
+  color-scheme: light;
+  --background: #eff1f5;
+  --card: #ffffff;
+  --muted: #e6e9ef;
+  --accent: #dce0e8;
+  --border: #ccd0da;
+  --input: #bcc0cc;
+  --foreground: #4c4f69;
+  --muted-foreground: #6c6f85;
+  --faint: #9ca0b0;
+  --primary: #4c4f69;
+  --primary-foreground: #eff1f5;
+  --secondary: #dce0e8;
+  --secondary-foreground: #4c4f69;
+  --accent-foreground: #4c4f69;
+  --destructive: #d20f39;
+  --destructive-dim: #f6e0e4;
+  --success: #40a02b;
+  --success-dim: #e3f0e0;
+  --ring: #8839ef;
+  --key: #8839ef;
+  --diff-add: #e3f0e0;
+  --diff-add-ink: #4c4f69;
+  --diff-del: #f6e0e4;
+  --diff-del-ink: #6c6f85;
+  --diff-meta: #7c7f93;
+  --code-comment: #9ca0b0;
+  --code-keyword: #8839ef;
+  --code-string: #40a02b;
+  --code-number: #fe640b;
+  --code-title: #1e66f5;
+  --code-attr: #df8e1d;
+  --code-meta: #6c6f85;
+}
+
+:root[data-theme="cyberpunk"] {
+  color-scheme: dark;
+  --background: #0a0714;
+  --card: #100b1f;
+  --muted: #100b1f;
+  --accent: #1b1136;
+  --border: #2a1b4d;
+  --input: #3d2a66;
+  --foreground: #e8e2ff;
+  --muted-foreground: #a294cf;
+  --faint: #7565ab;
+  --primary: #e8e2ff;
+  --primary-foreground: #0a0714;
+  --secondary: #1b1136;
+  --secondary-foreground: #e8e2ff;
+  --accent-foreground: #e8e2ff;
+  --destructive: #ff3864;
+  --destructive-dim: #26091a;
+  --success: #39ff88;
+  --success-dim: #07220f;
+  --ring: #ff2bd6;
+  --key: #00f0ff;
+  --diff-add: #0b2419;
+  --diff-add-ink: #7dffb8;
+  --diff-del: #2a0a1c;
+  --diff-del-ink: #ff90b8;
+  --diff-meta: #a294cf;
+  --code-comment: #7565ab;
+  --code-keyword: #ff2bd6;
+  --code-string: #39ff88;
+  --code-number: #ffd23f;
+  --code-title: #00f0ff;
+  --code-attr: #c77dff;
+  --code-meta: #a294cf;
+}
+
+:root[data-theme="dracula"] {
+  color-scheme: dark;
+  --background: #282a36;
+  --card: #21222c;
+  --muted: #21222c;
+  --accent: #343746;
+  --border: #44475a;
+  --input: #6272a4;
+  --foreground: #f8f8f2;
+  --muted-foreground: #b6b9cc;
+  --faint: #6272a4;
+  --primary: #f8f8f2;
+  --primary-foreground: #282a36;
+  --secondary: #343746;
+  --secondary-foreground: #f8f8f2;
+  --accent-foreground: #f8f8f2;
+  --destructive: #ff5555;
+  --destructive-dim: #2f1f26;
+  --success: #50fa7b;
+  --success-dim: #1d2b21;
+  --ring: #bd93f9;
+  --key: #bd93f9;
+  --diff-add: #23372a;
+  --diff-add-ink: #f8f8f2;
+  --diff-del: #3a2430;
+  --diff-del-ink: #d9d6e0;
+  --diff-meta: #6272a4;
+  --code-comment: #6272a4;
+  --code-keyword: #ff79c6;
+  --code-string: #f1fa8c;
+  --code-number: #bd93f9;
+  --code-title: #50fa7b;
+  --code-attr: #8be9fd;
+  --code-meta: #6272a4;
+}
+
+:root[data-theme="tokyo-night"] {
+  color-scheme: dark;
+  --background: #1a1b26;
+  --card: #16161e;
+  --muted: #16161e;
+  --accent: #292e42;
+  --border: #292e42;
+  --input: #414868;
+  --foreground: #c0caf5;
+  --muted-foreground: #a9b1d6;
+  --faint: #565f89;
+  --primary: #c0caf5;
+  --primary-foreground: #1a1b26;
+  --secondary: #292e42;
+  --secondary-foreground: #c0caf5;
+  --accent-foreground: #c0caf5;
+  --destructive: #f7768e;
+  --destructive-dim: #2a1a22;
+  --success: #9ece6a;
+  --success-dim: #1b2418;
+  --ring: #7aa2f7;
+  --key: #7aa2f7;
+  --diff-add: #1e2b22;
+  --diff-add-ink: #c0caf5;
+  --diff-del: #2c1f28;
+  --diff-del-ink: #a9b1d6;
+  --diff-meta: #565f89;
+  --code-comment: #565f89;
+  --code-keyword: #bb9af7;
+  --code-string: #9ece6a;
+  --code-number: #ff9e64;
+  --code-title: #7aa2f7;
+  --code-attr: #7dcfff;
+  --code-meta: #a9b1d6;
+}
+
+/* The instrument is set in mono: every reading lines up under the one above
+   it, and a figure keeps its width as it counts. Prose is the exception, and
+   asks for the sans below. */
 body {
   margin: 0;
   background: var(--background);
   color: var(--foreground);
+  font-family: var(--font-mono);
+  font-variant-numeric: tabular-nums;
+  -webkit-font-smoothing: antialiased;
+}
+
+/* A readme is read, not scanned, so it keeps the proportional face. */
+.markdown {
   font-family: var(--font-sans);
+  font-variant-numeric: normal;
 }
 
 /* highlight.js token classes. The grammars emit many names for a handful of
diff --git a/scripts/dev-git-checks.mjs b/scripts/dev-git-checks.mjs
index ddd36eb..9efa93e 100644
--- a/scripts/dev-git-checks.mjs
+++ b/scripts/dev-git-checks.mjs
@@ -271,3 +271,62 @@ await call('com.atproto.repo.putRecord', {
   record: { ...config.value, runner: did },
 });
 console.log(`${NAME} names ${did} as its runner`);
+
+// ---- 5. a palette the account publishes ----------------------------------
+
+// Proves the theme record path: the page ships four palettes and reads any
+// the account publishes beside them.
+await call('com.atproto.repo.putRecord', {
+  repo: did,
+  collection: 'dev.pdsjs.app.theme',
+  rkey: 'ember',
+  record: {
+    $type: 'dev.pdsjs.app.theme',
+    name: 'Ember',
+    scheme: 'dark',
+    colors: {
+      background: '#160f0c',
+      card: '#1d1512',
+      muted: '#1d1512',
+      accent: '#2a1e19',
+      border: '#33241d',
+      input: '#4a3529',
+      foreground: '#f4e7de',
+      'muted-foreground': '#b39b8c',
+      faint: '#7d6357',
+      key: '#e8873c',
+      ring: '#e8873c',
+      destructive: '#e2564a',
+      success: '#8fb15c',
+      'diff-add': '#1d2416',
+      'diff-del': '#2a1614',
+      'code-keyword': '#e8873c',
+      'code-string': '#8fb15c',
+      'code-number': '#e0b64a',
+      'code-title': '#f4e7de',
+      'code-comment': '#7d6357',
+    },
+    createdAt: new Date().toISOString(),
+  },
+});
+console.log(`${did} publishes the Ember palette`);
+
+// ---- 6. an identity the account claims -----------------------------------
+
+// The commits above are co-authored, and the tool that co-wrote them holds no
+// atproto account. The account says what to call it, which is what lets a
+// facepile name it. A real one would give it a face too, as an avatar blob.
+await call('com.atproto.repo.putRecord', {
+  repo: did,
+  collection: 'dev.pdsjs.git.identity',
+  rkey: 'self',
+  record: {
+    $type: 'dev.pdsjs.git.identity',
+    idents: [
+      { email: 'alice@localhost', did },
+      { email: 'noreply@anthropic.com', label: 'Claude' },
+    ],
+    createdAt: new Date().toISOString(),
+  },
+});
+console.log('Claimed the identities behind the commits');
-- 
2.51.2


From f45352c89b7f19c63bff25bd7fad588a8ce7d7cc Mon Sep 17 00:00:00 2001
From: Chad Miller <chadtmiller15@gmail.com>
Date: Sun, 23 Aug 2026 22:30:37 -0700
Subject: [PATCH 12/13] chore(git-ci): mark the CLI executable

package.json names src/cli.js as the pdsjs-git-ci bin and the file carries
a node shebang, so it needs the execute bit to run as installed.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01Gp5VgVe393AeJL5jKARqR3
---
 packages/git-ci/src/cli.js | 0
 1 file changed, 0 insertions(+), 0 deletions(-)
 mode change 100644 => 100755 packages/git-ci/src/cli.js

diff --git a/packages/git-ci/src/cli.js b/packages/git-ci/src/cli.js
old mode 100644
new mode 100755
-- 
2.51.2


From 617df4a45376738fc42706a98805afb6ab28e71f Mon Sep 17 00:00:00 2001
From: Chad Miller <chadtmiller15@gmail.com>
Date: Sun, 23 Aug 2026 22:53:41 -0700
Subject: [PATCH 13/13] fix(git-ui): a labelled author keeps its own name

describeAuthor asked for the profile of `claim.did || account.did`, so a
claim naming a tool, a bot, or a person who keeps no account fell through to
the hosting account's own profile. On pdsjs.dev every commit Claude
co-wrote read as "pds.js", under the account's face.

The label branch was guarded by the account profile being absent, which is
why the local stack looked right: its account has no profile to find.

A label with no DID names something that holds no account, so nothing
answers in its place. The account still speaks for a claim naming neither
DID nor label, which is the claim it makes about its own address.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01Gp5VgVe393AeJL5jKARqR3
---
 .changeset/labelled-author-keeps-its-name.md |  13 ++
 packages/git-ui/src/lib/authors.js           |   7 +-
 packages/git-ui/test/authors.test.js         | 124 +++++++++++++++++++
 3 files changed, 143 insertions(+), 1 deletion(-)
 create mode 100644 .changeset/labelled-author-keeps-its-name.md
 create mode 100644 packages/git-ui/test/authors.test.js

diff --git a/.changeset/labelled-author-keeps-its-name.md b/.changeset/labelled-author-keeps-its-name.md
new file mode 100644
index 0000000..44ea06f
--- /dev/null
+++ b/.changeset/labelled-author-keeps-its-name.md
@@ -0,0 +1,13 @@
+---
+'@pdsjs/git': patch
+---
+
+A commit author the account claims by label reads under that label rather
+than under the account. The browser asked for the profile of `claim.did ||
+account.did`, so a claim naming a tool, a bot, or a person who keeps no
+account fell through to the hosting account's own profile: every commit the
+tool co-wrote showed the account's name and face. A label with no DID names
+something that holds no account, and now nothing answers in its place.
+
+The account still speaks for a claim that names neither DID nor label, which
+is the claim an account makes about its own address.
diff --git a/packages/git-ui/src/lib/authors.js b/packages/git-ui/src/lib/authors.js
index c18a9c3..3fced55 100644
--- a/packages/git-ui/src/lib/authors.js
+++ b/packages/git-ui/src/lib/authors.js
@@ -98,7 +98,12 @@ export function initial(text) {
 export function describeAuthor(ident) {
   const { name, email } = splitIdent(ident);
   const claim = matchIdent(claims, ident);
-  const profile = claim ? profiles.get(claim.did || account.did) : null;
+  // Whose profile speaks for this author: the DID the claim names, or the
+  // account itself where the claim names no one else. A label with no DID
+  // names something that holds no account at all, so the hosting account
+  // must not answer in its place.
+  const named = claim?.did || (claim && !claim.label ? account.did : '');
+  const profile = named ? profiles.get(named) : null;
   // A claim may name a tool or a bot rather than an account. The account
   // says what to call it and gives it a face, and the blob it names is in
   // the account's own repo.
diff --git a/packages/git-ui/test/authors.test.js b/packages/git-ui/test/authors.test.js
new file mode 100644
index 0000000..6bf4877
--- /dev/null
+++ b/packages/git-ui/test/authors.test.js
@@ -0,0 +1,124 @@
+/**
+ * Showing a commit author as the identity the hosting account claims: an
+ * atproto profile where the claim names a DID, and a label with a face where
+ * it names something that holds no account.
+ */
+
+import { afterEach, beforeEach, describe, expect, it } from 'vitest';
+import { describeAuthor, loadAuthors } from '../src/lib/authors.js';
+import { account } from '../src/lib/git.js';
+
+const OWNER = 'did:plc:owner';
+const FRIEND = 'did:plc:friend';
+const AVATAR_CID = 'bafkreiavatar';
+
+/**
+ * @param {Array<Record<string, unknown>>} idents
+ * @param {Array<Record<string, unknown>>} profiles
+ */
+function serve(idents, profiles) {
+  globalThis.fetch = async (/** @type {string|URL|Request} */ input) => {
+    const url = String(input);
+    if (url.includes('com.atproto.repo.getRecord')) {
+      return Response.json({
+        uri: `at://${OWNER}/dev.pdsjs.git.identity/self`,
+        value: {
+          $type: 'dev.pdsjs.git.identity',
+          idents,
+          createdAt: '2026-01-01T00:00:00.000Z',
+        },
+      });
+    }
+    if (url.includes('app.bsky.actor.getProfiles')) {
+      const wanted = new URL(url).searchParams.getAll('actors');
+      return Response.json({
+        profiles: profiles.filter((p) => wanted.includes(String(p.did))),
+      });
+    }
+    return Response.json({ error: 'NotFound' }, { status: 404 });
+  };
+}
+
+describe('describing a commit author', () => {
+  const original = globalThis.fetch;
+
+  beforeEach(() => {
+    account.did = OWNER;
+    account.pds = 'https://pds.example';
+    account.handle = 'owner.example';
+  });
+
+  afterEach(() => {
+    globalThis.fetch = original;
+    account.did = '';
+    account.pds = '';
+    account.handle = '';
+  });
+
+  it('names a labelled identity itself, not the account holding the claim', async () => {
+    // The account has a profile of its own, and the claim carries no DID.
+    // Reading the account's profile here would show every commit the tool
+    // co-wrote under the account's own name and face.
+    serve(
+      [
+        {
+          email: 'noreply@anthropic.com',
+          label: 'Claude',
+          avatar: { $type: 'blob', ref: { $link: AVATAR_CID } },
+        },
+      ],
+      [{ did: OWNER, handle: 'owner.example', displayName: 'The Account' }],
+    );
+    await loadAuthors();
+
+    const author = describeAuthor('Claude <noreply@anthropic.com>');
+    expect(author.name).toBe('Claude');
+    expect(author.atproto).toBe(false);
+    expect(author.handle).toBe('');
+    expect(author.avatar).toContain(AVATAR_CID);
+    expect(author.avatar).toContain(encodeURIComponent(OWNER));
+  });
+
+  it('shows the profile of a claim that names a DID', async () => {
+    serve(
+      [{ email: 'friend@example.com', did: FRIEND }],
+      [
+        { did: OWNER, handle: 'owner.example', displayName: 'The Account' },
+        {
+          did: FRIEND,
+          handle: 'friend.example',
+          displayName: 'A Friend',
+          avatar: 'https://cdn.example/friend.jpg',
+        },
+      ],
+    );
+    await loadAuthors();
+
+    const author = describeAuthor('Friend <friend@example.com>');
+    expect(author.name).toBe('A Friend');
+    expect(author.handle).toBe('friend.example');
+    expect(author.atproto).toBe(true);
+  });
+
+  it('reads a claim with neither DID nor label as the account itself', async () => {
+    serve(
+      [{ email: 'owner@example.com' }],
+      [{ did: OWNER, handle: 'owner.example', displayName: 'The Account' }],
+    );
+    await loadAuthors();
+
+    const author = describeAuthor('Owner <owner@example.com>');
+    expect(author.name).toBe('The Account');
+    expect(author.atproto).toBe(true);
+  });
+
+  it('leaves an unclaimed author as the name the commit carries', async () => {
+    serve([{ email: 'owner@example.com' }], []);
+    await loadAuthors();
+
+    const author = describeAuthor('Stranger <stranger@example.com>');
+    expect(author.name).toBe('Stranger');
+    expect(author.atproto).toBe(false);
+    expect(author.avatar).toBe('');
+  });
+});
-- 
2.51.2