hanna/fabrica

feat(web): commit view with highlighted unified and split diffs

4b0bedd · hanna committed on 2026-07-25

Add the commit page over the git diff layer. Each file's pre- and
post-image are highlighted as whole documents (never per-hunk) and the
resulting lines are zipped with the diff hunks, so highlight spans live
inside the added/removed rows.

- Commit metadata: subject, signature badge, short sha, author/date, body.
- A changed-files summary (N files, +adds/−dels) with anchors, and each
  file in an independently collapsible <details> with its own counts.
- Unified and split (side-by-side, del/add paired) views, toggled and
  persisted in a cookie; split forced to scroll on narrow screens.
- Between-hunk "expand N hidden lines" rows that hx-get the context
  endpoint (…/-/commit/{sha}/context?file=&from=&to=) and swap in
  highlighted context via htmx.

Verified end-to-end against a live server. diff.rs holds the pure
rendering; repo.rs loads commits on the blocking pool.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

Signed by hannaSSH key fingerprint: SHA256:4g9cWhkAAw8gwqhJUcVbSnGEvdGwklW+1Aa/fMUu59k

assets/base.css +122 −0

crates/web/src/diff.rs +296 −0

crates/web/src/lib.rs +1 −0

crates/web/src/repo.rs +264 −6

   background: var(--fb-diff-add-bg);
+}
+/* ---- Commit view & diffs ---- */
+.commit-meta {
+  margin-bottom: 1rem;
+}
+.commit-body {
+  margin: 0.5rem 0;
+  padding: 0.5rem 0.75rem;
+  background: var(--fb-bg-inset);
+  border-radius: var(--fb-radius);
+  white-space: pre-wrap;
+  font-family: var(--fb-font-mono);
+  font-size: 0.85rem;
+}
+.diff-toolbar {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+  margin-bottom: 0.75rem;
+}
+.diff-toggle .btn {
+  padding: 0.2rem 0.6rem;
+}
+.diff-toggle .btn.active {
+  border-color: var(--fb-accent);
+  color: var(--fb-accent);
+}
+.changed-files {
+  display: flex;
+  flex-direction: column;
+  gap: 0.15rem;
+  padding: 0.5rem 0.75rem;
+  margin-bottom: 1rem;
+  background: var(--fb-bg-raised);
+  border: 1px solid var(--fb-border);
+  border-radius: var(--fb-radius);
+  font-family: var(--fb-font-mono);
+  font-size: 0.85rem;
+}
+.diff-file {
+  margin-bottom: 1rem;
+  border: 1px solid var(--fb-border);
+  border-radius: var(--fb-radius);
+  overflow: hidden;
+}
+.diff-file > summary {
+  padding: 0.5rem 0.75rem;
+  background: var(--fb-bg-raised);
+  cursor: pointer;
+}
+table.diff {
+  width: 100%;
+  border-collapse: collapse;
+  font-family: var(--fb-font-mono);
+  font-size: 0.82rem;
+  background: var(--fb-bg-inset);
+}
+table.diff td {
+  padding: 0 0.5rem;
+  white-space: pre-wrap;
+  word-break: break-word;
+  vertical-align: top;
+}
+table.diff td.lineno {
+  width: 1%;
+  min-width: 2.5rem;
+  text-align: right;
+  color: var(--fb-fg-muted);
+  user-select: none;
+  white-space: nowrap;
+}
+table.diff td.diff-marker {
+  width: 1ch;
+  text-align: center;
+  user-select: none;
+}
+tr.diff-add,
+td.diff-add {
+  background: var(--fb-diff-add-bg);
+}
+tr.diff-add td.diff-marker,
+tr.diff-add td.code-line {
+  color: var(--fb-diff-add-fg);
+}
+tr.diff-del,
+td.diff-del {
+  background: var(--fb-diff-del-bg);
+}
+tr.diff-del td.diff-marker,
+tr.diff-del td.code-line {
+  color: var(--fb-diff-del-fg);
+}
+tr.hunk-header td {
+  background: var(--fb-bg-raised);
+  color: var(--fb-fg-muted);
+}
+.diff-expander td {
+  background: var(--fb-bg-raised);
+  text-align: center;
+  padding: 0.15rem;
+}
+.expand-btn {
+  background: none;
+  border: none;
+  color: var(--fb-accent);
+  cursor: pointer;
+  font: inherit;
+}
+td.diff-empty {
+  background: var(--fb-bg-raised);
+}
+@media (max-width: 48rem) {
+  /* Force unified on narrow screens (§9.6). */
+  table.diff-split {
+    display: block;
+    overflow-x: auto;
+  }
+}
 /* ---- Footer ---- */
 .footer {
   max-width: 76rem;

 //! without JavaScript; htmx only enhances.
 mod assets;
+mod diff;
 mod error;
 mod layout;
 mod markdown;

+// This Source Code Form is subject to the terms of the Mozilla Public
+// License, v. 2.0. If a copy of the MPL was not distributed with this
+// file, You can obtain one at https://mozilla.org/MPL/2.0/.
+//! Diff rendering: highlighted unified and split views.
+//!
+//! Each file's pre- and post-image are highlighted as **whole documents** (§8) —
+//! never per-hunk, which would feed a context-dependent grammar garbage — and the
+//! resulting lines are indexed by line number and zipped with the diff hunks.
+//! Added/removed backgrounds are applied to the row; the highlight spans live
+//! inside it.
+use highlight::Line;
+use maud::{Markup, html};
+/// One file's diff plus the highlighted lines of each side, ready to zip.
+pub struct RenderedFile {
+    /// The structural diff (paths, status, hunks).
+    pub diff: git::FileDiff,
+    /// Highlighted pre-image lines (old side), indexed from 1.
+    pub old_lines: Vec<Line>,
+    /// Highlighted post-image lines (new side), indexed from 1.
+    pub new_lines: Vec<Line>,
+}
+impl RenderedFile {
+    /// The file's display path (new path, or old path for a deletion).
+    #[must_use]
+    pub fn path(&self) -> &str {
+        self.diff
+            .new_path
+            .as_deref()
+            .or(self.diff.old_path.as_deref())
+            .unwrap_or("(unknown)")
+    }
+    /// Added / removed line counts, for the summary.
+    #[must_use]
+    pub fn stats(&self) -> (usize, usize) {
+        let mut adds = 0;
+        let mut dels = 0;
+        for hunk in &self.diff.hunks {
+            for line in &hunk.lines {
+                match line.origin {
+                    git::LineOrigin::Addition => adds += 1,
+                    git::LineOrigin::Deletion => dels += 1,
+                    git::LineOrigin::Context => {}
+                }
+            }
+        }
+        (adds, dels)
+    }
+}
+/// Render the highlighted spans of line `n` (1-based) from `lines`, or the raw
+/// `fallback` text if the index is out of range.
+fn line_markup(lines: &[Line], n: u32, fallback: &str) -> Markup {
+    let idx = (n as usize).saturating_sub(1);
+    if let Some(line) = lines.get(idx) {
+        html! {
+            @for span in &line.spans {
+                @match span.class {
+                    Some(class) => { span class=(class) { (span.text) } }
+                    None => { (span.text) }
+                }
+            }
+        }
+    } else {
+        html! { (fallback.trim_end_matches(['\n', '\r'])) }
+    }
+}
+/// Render one file's diff in the unified view.
+///
+/// `hx_base`, when given, is the context-endpoint URL prefix
+/// (`…/-/commit/{sha}/context?file={path}`); it enables the "expand hidden lines"
+/// rows between hunks.
+#[must_use]
+pub fn unified(rf: &RenderedFile, hx_base: Option<&str>) -> Markup {
+    html! {
+        table class="diff diff-unified" {
+            tbody {
+                @for (i, hunk) in rf.diff.hunks.iter().enumerate() {
+                    @if let Some(base) = hx_base {
+                        @if let Some((from, to)) = gap_before(rf, i) {
+                            (expander(base, from, to))
+                        }
+                    }
+                    tr class="hunk-header" {
+                        td colspan="3" class="lineno" {}
+                        td class="code-line" { (hunk.header) }
+                    }
+                    @for line in &hunk.lines {
+                        @let (cls, marker) = row_kind(line.origin);
+                        tr class=(cls) {
+                            td class="lineno" { (opt_num(line.old_lineno)) }
+                            td class="lineno" { (opt_num(line.new_lineno)) }
+                            td class="diff-marker" { (marker) }
+                            td class="code-line" { (unified_line(rf, line)) }
+                        }
+                    }
+                }
+            }
+        }
+    }
+}
+/// The new-side line range hidden before hunk `i`, or `None` when there is no gap.
+fn gap_before(rf: &RenderedFile, i: usize) -> Option<(u32, u32)> {
+    let first_new = rf
+        .diff
+        .hunks
+        .get(i)?
+        .lines
+        .iter()
+        .find_map(|l| l.new_lineno)?;
+    let prev_last = if i == 0 {
+    } else {
+        rf.diff.hunks[i - 1]
+            .lines
+            .iter()
+            .filter_map(|l| l.new_lineno)
+            .next_back()
+            .unwrap_or(0)
+    };
+    if first_new > prev_last + 1 {
+        Some((prev_last + 1, first_new - 1))
+    } else {
+        None
+    }
+}
+/// An expander row that fetches and swaps in the hidden context lines.
+fn expander(hx_base: &str, from: u32, to: u32) -> Markup {
+    let url = format!("{hx_base}&from={from}&to={to}");
+    html! {
+        tr class="diff-expander" {
+            td colspan="4" {
+                button type="button" class="expand-btn"
+                       hx-get=(url) hx-target="closest tr" hx-swap="outerHTML" {
+                    "Expand " (to - from + 1) " hidden lines"
+                }
+            }
+        }
+    }
+}
+/// The highlighted content for a unified diff line, choosing the correct side.
+fn unified_line(rf: &RenderedFile, line: &git::DiffLine) -> Markup {
+    match line.origin {
+        git::LineOrigin::Deletion => {
+            line_markup(&rf.old_lines, line.old_lineno.unwrap_or(0), &line.content)
+        }
+        // Context and additions both take the post-image line.
+        _ => line_markup(&rf.new_lines, line.new_lineno.unwrap_or(0), &line.content),
+    }
+}
+/// Render one file's diff in the split (side-by-side) view.
+#[must_use]
+pub fn split(rf: &RenderedFile) -> Markup {
+    html! {
+        table class="diff diff-split" {
+            tbody {
+                @for hunk in &rf.diff.hunks {
+                    tr class="hunk-header" {
+                        td colspan="4" class="code-line" { (hunk.header) }
+                    }
+                    @for row in pair_hunk(hunk) {
+                        tr {
+                            @match &row.left {
+                                Some(l) => {
+                                    td class="lineno" { (l.0) }
+                                    td class=(format!("code-line {}", side_class(l.1))) {
+                                        (line_markup(&rf.old_lines, l.0, &l.2))
+                                    }
+                                }
+                                None => { td class="lineno" {} td class="code-line diff-empty" {} }
+                            }
+                            @match &row.right {
+                                Some(r) => {
+                                    td class="lineno" { (r.0) }
+                                    td class=(format!("code-line {}", side_class(r.1))) {
+                                        (line_markup(&rf.new_lines, r.0, &r.2))
+                                    }
+                                }
+                                None => { td class="lineno" {} td class="code-line diff-empty" {} }
+                            }
+                        }
+                    }
+                }
+            }
+        }
+    }
+}
+/// A paired split row: an optional left (old) and right (new) cell, each carrying
+/// `(lineno, origin, content)`.
+struct SplitRow {
+    left: Option<(u32, git::LineOrigin, String)>,
+    right: Option<(u32, git::LineOrigin, String)>,
+}
+/// Pair a hunk's lines into side-by-side rows: context aligns on both sides, and a
+/// run of deletions is paired with the following run of additions.
+fn pair_hunk(hunk: &git::Hunk) -> Vec<SplitRow> {
+    let mut rows = Vec::new();
+    let mut dels: Vec<(u32, String)> = Vec::new();
+    let mut adds: Vec<(u32, String)> = Vec::new();
+    let flush =
+        |rows: &mut Vec<SplitRow>, dels: &mut Vec<(u32, String)>, adds: &mut Vec<(u32, String)>| {
+            let n = dels.len().max(adds.len());
+            for i in 0..n {
+                rows.push(SplitRow {
+                    left: dels
+                        .get(i)
+                        .map(|(ln, c)| (*ln, git::LineOrigin::Deletion, c.clone())),
+                    right: adds
+                        .get(i)
+                        .map(|(ln, c)| (*ln, git::LineOrigin::Addition, c.clone())),
+                });
+            }
+            dels.clear();
+            adds.clear();
+        };
+    for line in &hunk.lines {
+        match line.origin {
+            git::LineOrigin::Deletion => {
+                dels.push((line.old_lineno.unwrap_or(0), line.content.clone()));
+            }
+            git::LineOrigin::Addition => {
+                adds.push((line.new_lineno.unwrap_or(0), line.content.clone()));
+            }
+            git::LineOrigin::Context => {
+                flush(&mut rows, &mut dels, &mut adds);
+                rows.push(SplitRow {
+                    left: Some((
+                        line.old_lineno.unwrap_or(0),
+                        git::LineOrigin::Context,
+                        line.content.clone(),
+                    )),
+                    right: Some((
+                        line.new_lineno.unwrap_or(0),
+                        git::LineOrigin::Context,
+                        line.content.clone(),
+                    )),
+                });
+            }
+        }
+    }
+    flush(&mut rows, &mut dels, &mut adds);
+    rows
+}
+/// The CSS class and marker glyph for a unified row.
+fn row_kind(origin: git::LineOrigin) -> (&'static str, &'static str) {
+    match origin {
+        git::LineOrigin::Addition => ("diff-add", "+"),
+        git::LineOrigin::Deletion => ("diff-del", "-"),
+        git::LineOrigin::Context => ("diff-ctx", " "),
+    }
+}
+/// The per-cell class for a split row side.
+fn side_class(origin: git::LineOrigin) -> &'static str {
+    match origin {
+        git::LineOrigin::Addition => "diff-add",
+        git::LineOrigin::Deletion => "diff-del",
+        git::LineOrigin::Context => "diff-ctx",
+    }
+}
+/// Render an optional line number as a string.
+fn opt_num(n: Option<u32>) -> String {
+    n.map_or_else(String::new, |n| n.to_string())
+}
+/// Render context lines (for the expand-context partial) as unified rows.
+#[must_use]
+pub fn context_rows(lines: &[git::DiffLine], highlighted: &[Line]) -> Markup {
+    html! {
+        @for line in lines {
+            tr class="diff-ctx" {
+                td class="lineno" { (opt_num(line.old_lineno)) }
+                td class="lineno" { (opt_num(line.new_lineno)) }
+                td class="diff-marker" {}
+                td class="code-line" {
+                    (line_markup(highlighted, line.new_lineno.unwrap_or(0), &line.content))
+                }
+            }
+        }
+    }
+}

 use std::path::Path as FsPath;
-use axum::extract::{Path, State};
+use axum::extract::{Path, Query, State};
 use axum::http::{Uri, header};
-use axum::response::{IntoResponse, Response};
+use axum::response::{Html, IntoResponse, Response};
-use axum_extra::extract::cookie::CookieJar;
+use axum_extra::extract::cookie::{Cookie, CookieJar, SameSite};
 use maud::{Markup, html};
 use model::{Repo, User};
+use serde::Deserialize;
 use crate::AppState;
+use crate::diff::{self, RenderedFile};
 use crate::error::{AppError, AppResult};
 use crate::layout::page;
 use crate::markdown;
 use crate::pages::build_chrome;
 use crate::session::MaybeUser;
+/// The diff-view preference cookie (`unified` | `split`).
+const DIFF_COOKIE: &str = "fabrica_diffview";
+/// Query parameters for the commit view and its context-expansion partial.
+#[derive(Debug, Default, Deserialize)]
+pub struct DiffQuery {
+    /// `unified` or `split`.
+    view: Option<String>,
+    /// The file whose context to expand.
+    file: Option<String>,
+    /// The 1-based first line of the context window.
+    from: Option<u32>,
+    /// The 1-based last line of the context window.
+    to: Option<u32>,
+}
 /// The candidate README filenames, in lookup order.
 const README_NAMES: &[&str] = &["README.md", "README", "readme.md", "README.txt"];
     MaybeUser(viewer): MaybeUser,
     jar: CookieJar,
     uri: Uri,
+    Query(dq): Query<DiffQuery>,
     Path((owner_name, rest)): Path<(String, String)>,
 ) -> AppResult<Response> {
     if let Some((repo_path, view)) = rest.split_once("/-/") {
         let ctx = resolve(&state, &owner_name, repo_path, viewer.as_ref())
             .await?
             .ok_or(AppError::NotFound)?;
-        dispatch_view(&state, viewer, jar, &uri, ctx, view).await
+        dispatch_view(&state, viewer, jar, &uri, ctx, view, &dq).await
     } else {
         match resolve(&state, &owner_name, &rest, viewer.as_ref()).await? {
             Some(ctx) => repo_home(&state, viewer, jar, &uri, ctx).await,
     uri: &Uri,
     ctx: RepoCtx,
     view: &str,
+    dq: &DiffQuery,
 ) -> AppResult<Response> {
     let (kind, rest) = view.split_once('/').unwrap_or((view, ""));
     match kind {
         "blob" => blob_view(state, viewer, jar, uri, ctx, rest, false).await,
         "raw" => raw_view(state, ctx, rest).await,
         "commits" => commits_view(state, viewer, jar, uri, ctx, rest).await,
+        "commit" => match rest.split_once('/') {
+            Some((sha, "context")) => context_partial(state, ctx, sha, dq).await,
+            _ => commit_view(state, viewer, jar, uri, ctx, rest, dq).await,
+        },
         "branches" => branches_view(state, viewer, jar, uri, ctx).await,
         "tags" => tags_view(state, viewer, jar, uri, ctx).await,
-        // `commit` (single-commit diff) lands with the commit-view phase; the
+        // Reserved `runs`/`search`/`settings` slots return 404 until built.
-        // reserved `runs`/`search`/`settings` slots return 404 until built.
         _ => Err(AppError::NotFound),
+    }
+}
     Ok((jar, page(&chrome, &title, body)).into_response())
+}
+// ---- Commit view ----
+async fn commit_view(
+    state: &AppState,
+    viewer: Option<User>,
+    jar: CookieJar,
+    uri: &Uri,
+    ctx: RepoCtx,
+    sha: &str,
+    dq: &DiffQuery,
+) -> AppResult<Response> {
+    let keys = signing_keys(state.store.all_keys().await?);
+    let (detail, files, sig) = load_commit(state, &ctx.repo.id, sha, keys).await?;
+    // View mode: an explicit `?view=` wins and is remembered; else the cookie;
+    // else unified.
+    let chosen = dq.view.clone().filter(|v| v == "split" || v == "unified");
+    let cookie_mode = jar.get(DIFF_COOKIE).map(|c| c.value().to_string());
+    let split = chosen.clone().or(cookie_mode).as_deref() == Some("split");
+    let (adds, dels) = files.iter().fold((0, 0), |(a, d), f| {
+        let (fa, fd) = f.stats();
+        (a + fa, d + fd)
+    });
+    let repo_base = format!("/{}/{}", ctx.owner.username, ctx.repo.path);
+    let body = html! {
+        (repo_header(state, &ctx, Tab::Code, &ctx.repo.default_branch))
+        (commit_meta(&detail, &sig))
+        div class="diff-toolbar" {
+            span {
+                (files.len()) " files changed · "
+                span style="color:var(--fb-diff-add-fg)" { "+" (adds) }
+                " "
+                span style="color:var(--fb-diff-del-fg)" { "−" (dels) }
+            }
+            span class="diff-toggle" {
+                a class=(toggle_class(!split)) href=(format!("{repo_base}/-/commit/{sha}?view=unified")) { "Unified" }
+                a class=(toggle_class(split)) href=(format!("{repo_base}/-/commit/{sha}?view=split")) { "Split" }
+            }
+        }
+        nav class="changed-files" aria-label="Changed files" {
+            @for (i, f) in files.iter().enumerate() {
+                @let (fa, fd) = f.stats();
+                a href=(format!("#file-{i}")) {
+                    (f.path()) " " span class="muted" { "+" (fa) " −" (fd) }
+                }
+            }
+        }
+        @for (i, f) in files.iter().enumerate() {
+            details open id=(format!("file-{i}")) class="diff-file" {
+                summary {
+                    @let (fa, fd) = f.stats();
+                    span class="mono" { (f.path()) }
+                    " " span class="muted" { "+" (fa) " −" (fd) }
+                }
+                @if f.diff.is_binary {
+                    p class="muted" style="padding:0.5rem" { "Binary file not shown." }
+                } @else if f.diff.hunks.is_empty() {
+                    p class="muted" style="padding:0.5rem" { "No textual changes." }
+                } @else if split {
+                    (diff::split(f))
+                } @else {
+                    (diff::unified(f, Some(&format!("{repo_base}/-/commit/{sha}/context?file={}", f.path()))))
+                }
+            }
+        }
+    };
+    let (jar, chrome) = build_chrome(state, jar, viewer, uri.path().to_string());
+    let jar = match chosen {
+        Some(mode) => jar.add(diff_cookie(mode, state.config.auth.cookie_secure)),
+        None => jar,
+    };
+    let title = format!(
+        "{}/{}: {}",
+        ctx.owner.username,
+        ctx.repo.path,
+        detail.oid.short()
+    );
+    Ok((jar, page(&chrome, &title, body)).into_response())
+}
+/// Load a commit, its diff against the first parent, the highlighted pre/post
+/// images of each file, and its signature — all on the blocking pool.
+type LoadedCommit = (git::CommitDetail, Vec<RenderedFile>, git::SignatureState);
+async fn load_commit(
+    state: &AppState,
+    repo_id: &str,
+    sha: &str,
+    keys: Vec<git::SigningKey>,
+) -> AppResult<LoadedCommit> {
+    let oid = git::Oid::new(sha);
+    let context_lines = state.config.ui.diff_context_lines;
+    let sha_owned = sha.to_string();
+    git_read(state, repo_id, move |repo| {
+        let detail = repo.commit(&oid)?;
+        let base = detail.parents.first().cloned();
+        let diffs = repo.diff(base.as_ref(), &oid, git::DiffOpts { context_lines })?;
+        let head_rev = git::Resolved {
+            oid: oid.clone(),
+            kind: git::RefKind::Commit,
+            name: sha_owned,
+        };
+        let base_rev = base.as_ref().map(|o| git::Resolved {
+            oid: o.clone(),
+            kind: git::RefKind::Commit,
+            name: o.to_string(),
+        });
+        let rendered = diffs
+            .files
+            .into_iter()
+            .map(|file| render_one_file(repo, &head_rev, base_rev.as_ref(), file))
+            .collect();
+        let sig = repo.signature_state(&oid, &keys);
+        Ok((detail, rendered, sig))
+    })
+    .await
+}
+/// Build a [`RenderedFile`] for one diff entry, highlighting each side as a whole
+/// document.
+fn render_one_file(
+    repo: &git::Repo,
+    head_rev: &git::Resolved,
+    base_rev: Option<&git::Resolved>,
+    file: git::FileDiff,
+) -> RenderedFile {
+    let text_at = |rev: &git::Resolved, path: &str| {
+        repo.blob(rev, FsPath::new(path))
+            .ok()
+            .filter(|b| !b.is_binary)
+            .map(|b| String::from_utf8_lossy(&b.content).into_owned())
+    };
+    let new_text = file.new_path.as_deref().and_then(|p| text_at(head_rev, p));
+    let old_text = match (base_rev, file.old_path.as_deref()) {
+        (Some(rev), Some(p)) => text_at(rev, p),
+        _ => None,
+    };
+    let lang_path = file
+        .new_path
+        .clone()
+        .or_else(|| file.old_path.clone())
+        .unwrap_or_default();
+    let probe = new_text.as_deref().or(old_text.as_deref()).unwrap_or("");
+    let lang = highlight::resolve(FsPath::new(&lang_path), probe.as_bytes(), None);
+    let highlight_side = |text: Option<&str>| {
+        text.map(|t| highlight::highlight_document(&lang, t))
+            .unwrap_or_default()
+    };
+    RenderedFile {
+        old_lines: highlight_side(old_text.as_deref()),
+        new_lines: highlight_side(new_text.as_deref()),
+        diff: file,
+    }
+}
+/// The commit metadata block: subject, signature badge, sha, author, and body.
+fn commit_meta(detail: &git::CommitDetail, sig: &git::SignatureState) -> Markup {
+    let (subject, body) = detail
+        .message
+        .split_once("\n\n")
+        .map_or((detail.message.as_str(), ""), |(s, b)| (s.trim(), b));
+    html! {
+        div class="commit-meta" {
+            h2 { (subject.lines().next().unwrap_or("")) " " (signature_badge(sig)) }
+            p class="muted" {
+                span class="mono" { (detail.oid.short()) }
+                " · " (detail.author.name)
+                " committed on " (fmt_date(detail.committer.time_ms))
+            }
+            @if !body.trim().is_empty() {
+                pre class="commit-body" { (body.trim_end()) }
+            }
+        }
+    }
+}
+/// `GET …/-/commit/{sha}/context` — the highlighted hidden-context rows, as an
+/// htmx partial that replaces its expander.
+async fn context_partial(
+    state: &AppState,
+    ctx: RepoCtx,
+    sha: &str,
+    dq: &DiffQuery,
+) -> AppResult<Response> {
+    let (Some(file), Some(from), Some(to)) = (dq.file.clone(), dq.from, dq.to) else {
+        return Err(AppError::BadRequest(
+            "missing context parameters".to_string(),
+        ));
+    };
+    let oid = git::Oid::new(sha);
+    let sha_owned = sha.to_string();
+    let (lines, highlighted) = git_read(state, &ctx.repo.id, move |repo| {
+        let lines = repo.diff_context(&oid, FsPath::new(&file), from, to)?;
+        let rev = git::Resolved {
+            oid: oid.clone(),
+            kind: git::RefKind::Commit,
+            name: sha_owned,
+        };
+        let highlighted = repo
+            .blob(&rev, FsPath::new(&file))
+            .ok()
+            .filter(|b| !b.is_binary)
+            .map(|b| {
+                let text = String::from_utf8_lossy(&b.content).into_owned();
+                let lang = highlight::resolve(FsPath::new(&file), text.as_bytes(), None);
+                highlight::highlight_document(&lang, &text)
+            })
+            .unwrap_or_default();
+        Ok((lines, highlighted))
+    })
+    .await?;
+    Ok(Html(diff::context_rows(&lines, &highlighted).into_string()).into_response())
+}
+/// The active/inactive class for a diff-view toggle button.
+fn toggle_class(active: bool) -> &'static str {
+    if active { "btn active" } else { "btn" }
+}
+/// Build the diff-view preference cookie.
+fn diff_cookie(mode: String, secure: bool) -> Cookie<'static> {
+    Cookie::build((DIFF_COOKIE, mode))
+        .http_only(false)
+        .same_site(SameSite::Lax)
+        .secure(secure)
+        .path("/")
+        .max_age(time::Duration::days(365))
+        .build()
+}
 // ---- Group listing ----
 async fn group_listing(