From 024a9e2e0b5396b538ca60ede4e211ada5a69234 Mon Sep 17 00:00:00 2001
From: hu13-test <hu13@test.local>
Date: Tue, 27 Oct 2026 16:24:47 +0000
Subject: [PATCH] diffs: per-file cards, dual line numbers, visual diffstat
 (#74)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

diff_html now parses  chunks into one <details> card per
file: path, +n/−m counts, proportional green/red bar, and every hunk
line in a two-column (old/new) gutter. /index/mode/Binary
lines stay visible as dim metadata; --- /+++ use --diff-file (now
purple, distinct from body text); add/del rows carry the existing
background colors. Format-patch mbox preambles (From/Date/Subject/
stat) are dropped because they duplicate the PR title. Non-unified
text still falls back to the old single-block coloring.

Commit pages drop 'Author:/Date:' for a chip + monogram + relative
time (parse_ts_secs now accepts git's 'YYYY-MM-DD HH:MM:SS ±HHMM'),
and the commits table shows relative dates with exact values in
title.
---
 src/build.rs            |  35 +++++++-
 src/commits.rs          |  56 ++++++++++--
 src/layout.rs           | 187 ++++++++++++++++++++++++++++++++--------
 static/style.css        |  24 +++++-
 tests/theme_contrast.rs |   2 +
 5 files changed, 257 insertions(+), 47 deletions(-)

diff --git a/src/build.rs b/src/build.rs
index 4c00c85..a813a50 100644
--- a/src/build.rs
+++ b/src/build.rs
@@ -522,7 +522,12 @@ pub fn now_unix() -> i64 {
 #[must_use]
 pub fn parse_ts_secs(s: &str) -> Option<i64> {
     let s = s.trim();
-    let (date, rest) = s.split_once('T')?;
+    // Accept both `2026-10-27T14:08:48Z` (RFC3339) and git's
+    // `2026-10-27 14:08:48 +0000` / `+00:00` forms.
+    let (date, rest) = match s.split_once('T') {
+        Some(v) => v,
+        None => s.split_once(' ')?,
+    };
     let mut d = date.split('-');
     let y: i64 = d.next()?.parse().ok()?;
     let mo: i64 = d.next()?.parse().ok()?;
@@ -532,7 +537,10 @@ pub fn parse_ts_secs(s: &str) -> Option<i64> {
     }
     let (hms, offset) = if let Some(t) = rest.strip_suffix('Z') {
         (t, 0i64)
-    } else if rest.len() >= 6 && matches!(rest.as_bytes()[rest.len() - 6], b'+' | b'-') {
+    } else if rest.len() >= 6
+        && matches!(rest.as_bytes()[rest.len() - 6], b'+' | b'-')
+        && rest.as_bytes()[rest.len() - 3] == b':'
+    {
         let sign = if rest.as_bytes()[rest.len() - 6] == b'-' {
             -1
         } else {
@@ -541,6 +549,15 @@ pub fn parse_ts_secs(s: &str) -> Option<i64> {
         let oh: i64 = rest[rest.len() - 5..rest.len() - 3].parse().ok()?;
         let om: i64 = rest[rest.len() - 2..].parse().ok()?;
         (&rest[..rest.len() - 6], sign * (oh * 3600 + om * 60))
+    } else if rest.len() >= 5 && matches!(rest.as_bytes()[rest.len() - 5], b'+' | b'-') {
+        let sign = if rest.as_bytes()[rest.len() - 5] == b'-' {
+            -1
+        } else {
+            1
+        };
+        let oh: i64 = rest[rest.len() - 4..rest.len() - 2].parse().ok()?;
+        let om: i64 = rest[rest.len() - 2..].parse().ok()?;
+        (&rest[..rest.len() - 5], sign * (oh * 3600 + om * 60))
     } else {
         (rest, 0)
     };
@@ -553,6 +570,7 @@ pub fn parse_ts_secs(s: &str) -> Option<i64> {
         .split('.')
         .next()
         .unwrap_or("0")
+        .trim()
         .parse()
         .ok()?;
     if !(0..=23).contains(&h) || !(0..=59).contains(&mi) || !(0..=60).contains(&sec) {
@@ -2189,6 +2207,19 @@ mod tests {
         assert!(got.ends_with("…"));
     }
 
+    #[test]
+    fn parse_git_and_rfc3339_dates() {
+        assert_eq!(
+            parse_ts_secs("2026-09-10T07:43:55Z"),
+            parse_ts_secs("2026-09-10 07:43:55 +0000")
+        );
+        let utc = parse_ts_secs("2026-09-10T07:43:55Z").unwrap();
+        let plus1 = parse_ts_secs("2026-09-10 08:43:55 +0100").unwrap();
+        assert_eq!(utc, plus1, "offset is applied");
+        assert!(parse_ts_secs("not a date").is_none());
+        assert_eq!(ts_title("2026-09-10T07:43:55Z"), "2026-09-10 07:43 UTC");
+    }
+
     #[test]
     fn relative_age_fixed_clock() {
         // f0rge #33 rubric: fixed-clock fixture, build-time relative ages.
diff --git a/src/commits.rs b/src/commits.rs
index 67872bd..9cf0b82 100644
--- a/src/commits.rs
+++ b/src/commits.rs
@@ -8,9 +8,42 @@
 
 use std::path::Path;
 
+use crate::build::{now_unix, parse_ts_secs, relative_age, ts_title};
 use crate::gitx;
 use crate::layout::{diff_html, esc, page_site_with_provenance};
 
+/// Deterministic 1-letter author monogram (same rule as forge pages).
+fn monogram(handle: &str) -> String {
+    let h = handle.trim();
+    let initial: String = h
+        .chars()
+        .next()
+        .map(|c| c.to_uppercase().to_string())
+        .unwrap_or_default();
+    let mut hash: u32 = 0;
+    for b in h.bytes() {
+        hash = hash.wrapping_mul(31).wrapping_add(u32::from(b));
+    }
+    format!(
+        "<span class=\"mono m{}\" aria-hidden=\"true\">{}</span>",
+        hash % 6,
+        esc(&initial)
+    )
+}
+
+/// Relative commit time with the exact value in `title` (f0rge #72/#74).
+fn time_ago(date: &str, now: i64) -> String {
+    match parse_ts_secs(date) {
+        Some(ts) => format!(
+            "<time datetime=\"{}\" title=\"{}\">{}</time>",
+            esc(date),
+            esc(&ts_title(date)),
+            esc(&relative_age(now, ts))
+        ),
+        None => format!("<time>{}</time>", esc(date)),
+    }
+}
+
 /// Short display form of a full sha (first 7 hex chars, git-style).
 #[must_use]
 pub fn short_sha(sha: &str) -> &str {
@@ -40,19 +73,21 @@ pub fn render_loaded(
     if log.is_empty() {
         body.push_str("<p class=\"muted\">No commits yet.</p>\n");
     } else {
+        let now = now_unix();
         body.push_str("<div class=\"table-scroll\"><table>\n<thead><tr><th>subject</th><th>sha</th><th>author</th><th>date</th></tr></thead>\n<tbody>\n");
         for c in log {
             body.push_str(&format!(
-                "<tr><td class=\"title trunc trunc-subject\" data-label=\"subject\" title=\"{}\">{}</td><td class=\"sha trunc trunc-sha\" data-label=\"sha\" title=\"{}\"><a href=\"/commit/{}.html\"><code>{}</code></a></td><td class=\"trunc trunc-author\" data-label=\"author\" title=\"{}\">{}</td><td class=\"trunc\" data-label=\"date\" title=\"{}\">{}</td></tr>\n",
+                "<tr><td class=\"title trunc trunc-subject\" data-label=\"subject\" title=\"{}\">{}</td><td class=\"sha trunc trunc-sha\" data-label=\"sha\" title=\"{}\"><a href=\"/commit/{}.html\"><code>{}</code></a></td><td class=\"trunc trunc-author\" data-label=\"author\" title=\"{}\">{}{}</td><td class=\"trunc\" data-label=\"date\" title=\"{}\">{}</td></tr>\n",
                 esc(&c.subject),
                 esc(&c.subject),
                 esc(&c.sha),
                 esc(&c.sha),
                 esc(short_sha(&c.sha)),
                 esc(&c.author),
+                monogram(&c.author),
                 esc(&c.author),
                 esc(&c.date),
-                esc(&c.date),
+                time_ago(&c.date, now),
             ));
         }
         body.push_str("</tbody>\n</table></div>\n");
@@ -75,14 +110,17 @@ pub fn render_loaded(
     for c in log {
         let message = gitx::message(repo, &c.sha).map_err(|e| format!("hu13: {e}"))?;
         let diff = gitx::diff(repo, &c.sha).map_err(|e| format!("hu13: {e}"))?;
+        let now = now_unix();
         let detail = format!(
-            "<h1>commit {}</h1>\n<p class=\"repo-meta\"><code>{}</code></p>\n<p>Author: {}<br>Date: {}</p>\n<p><a href=\"/commits.html\">all commits</a></p>\n<h2>Message</h2>\n<div class=\"pre-scroll\"><pre>{}</pre></div>\n<h2>Diff</h2>\n<div class=\"pre-scroll\"><pre class=\"diff\">{}</pre></div>\n",
-            esc(short_sha(&c.sha)),
-            esc(&c.sha),
-            esc(&c.author),
-            esc(&c.date),
-            esc(&message),
-            diff_html(&diff),
+            "<h1>{subject}</h1>\n<div class=\"meta\"><span class=\"chip\"><a href=\"/commit/{full}.html\"><code>{short}</code></a></span>{mono}<span class=\"who\">{author}</span><span class=\"meta-when\">{when}</span></div>\n<p><a href=\"/commits.html\">all commits</a></p>\n<h2>Message</h2>\n<div class=\"pre-scroll\"><pre>{message}</pre></div>\n<h2>Diff</h2>\n{diff}\n",
+            subject = esc(&c.subject),
+            full = esc(&c.sha),
+            short = esc(short_sha(&c.sha)),
+            mono = monogram(&c.author),
+            author = esc(&c.author),
+            when = time_ago(&c.date, now),
+            message = esc(&message),
+            diff = diff_html(&diff),
         );
         let html = page_site_with_provenance(
             &format!("commit {} — {site_name}", short_sha(&c.sha)),
diff --git a/src/layout.rs b/src/layout.rs
index d985a04..20480b7 100644
--- a/src/layout.rs
+++ b/src/layout.rs
@@ -24,26 +24,149 @@ pub fn esc(input: &str) -> String {
     out
 }
 
-/// Render unified diff / patch text as escaped HTML with line-level color
-/// spans (m6 diff-colors, f0rge issue #22; Tokyo Night vars in
-/// `static/style.css`, dark + light).
+/// Render unified diff text as one card per file (f0rge #74).
 ///
-/// Line kinds (line-level only, no word-diff): `@@` hunk headers go in
-/// `<span class="diff-hunk">`, `+++`/`---` file lines in
-/// `<span class="diff-file">` (bold fg), `+` additions in
-/// `<span class="diff-add">`, `-` removals in `<span class="diff-del">`.
-/// Everything else (context, `diff --git` / `index` headers, commit
-/// metadata, `Binary files ... differ` notes, `[hu13: ...]` truncation /
-/// binary markers) is escaped as-is with no span so truncation and binary
-/// behavior stay intact. Every line is escaped with [`esc`] before wrapping,
-/// so hostile `<script>` inside an added line renders as text. Output joins
-/// lines with `\n` (preserving a trailing newline) for use inside an
-/// already-escaped `<pre class="diff">`.
+/// Each card carries the path, `+n −m` counts and a proportional bar;
+/// hunk lines show old/new line numbers in a two-column gutter. `diff
+/// --git`, `index`, mode and `Binary files` lines stay visible as dim
+/// metadata; the format-patch mbox preamble (From/Date/Subject/stat) is
+/// dropped because it duplicates the PR title. Every byte is escaped
+/// before wrapping, so a hostile `<script>` in an added line is text.
 #[must_use]
 pub fn diff_html(raw: &str) -> String {
     if raw.is_empty() {
         return String::new();
     }
+    if !raw.lines().any(|l| l.starts_with("diff --git ")) {
+        return plain_diff_html(raw);
+    }
+    let all: Vec<&str> = raw.lines().collect();
+    let mut starts: Vec<usize> = all
+        .iter()
+        .enumerate()
+        .filter(|(_, l)| l.starts_with("diff --git "))
+        .map(|(i, _)| i)
+        .collect();
+    if starts.is_empty() {
+        return plain_diff_html(raw);
+    }
+    starts.push(all.len());
+    let mut out = String::with_capacity(raw.len() + raw.len() / 3);
+    for w in starts.windows(2) {
+        let chunk = &all[w[0]..w[1]];
+        let path = diff_chunk_path(chunk);
+        let mut added = 0usize;
+        let mut removed = 0usize;
+        for line in chunk {
+            if line.starts_with('+') && !line.starts_with("+++") {
+                added += 1;
+            } else if line.starts_with('-') && !line.starts_with("---") {
+                removed += 1;
+            }
+        }
+        let total = added + removed;
+        let pct = (added * 100).checked_div(total).unwrap_or(0);
+        out.push_str("<details open class=\"difffile\"><summary><code class=\"df-path\">");
+        out.push_str(&esc(&path));
+        out.push_str("</code><span class=\"df-count\"><span class=\"df-add\">+");
+        out.push_str(&added.to_string());
+        out.push_str("</span> <span class=\"df-del\">−");
+        out.push_str(&removed.to_string());
+        out.push_str("</span></span>");
+        if total > 0 {
+            out.push_str("<span class=\"df-bar\" aria-hidden=\"true\"><span class=\"df-bar-add\" style=\"width:");
+            out.push_str(&pct.to_string());
+            out.push_str("%\"></span></span>");
+        }
+        out.push_str("</summary>\n<div class=\"pre-scroll\"><pre class=\"diff\">");
+
+        let mut old_ln = 0i64;
+        let mut new_ln = 0i64;
+        let mut first = true;
+        for line in chunk {
+            if !first {
+                out.push('\n');
+            }
+            first = false;
+            if line.starts_with("@@") {
+                let mut parts = line.split_whitespace();
+                let _ = parts.next();
+                if let Some(o) = parts.next().and_then(|v| v.strip_prefix('-')) {
+                    old_ln = o
+                        .split(',')
+                        .next()
+                        .and_then(|v| v.parse().ok())
+                        .unwrap_or(0);
+                }
+                if let Some(n) = parts.next().and_then(|v| v.strip_prefix('+')) {
+                    new_ln = n
+                        .split(',')
+                        .next()
+                        .and_then(|v| v.parse().ok())
+                        .unwrap_or(0);
+                }
+                out.push_str(&format!("<span class=\"diff-hunk\">{}</span>", esc(line)));
+            } else if line.starts_with('+') && !line.starts_with("+++") {
+                out.push_str(&diff_numbered("", &new_ln.to_string(), "diff-add", line));
+                new_ln += 1;
+            } else if line.starts_with('-') && !line.starts_with("---") {
+                out.push_str(&diff_numbered(&old_ln.to_string(), "", "diff-del", line));
+                old_ln += 1;
+            } else if line.starts_with(' ') {
+                out.push_str(&diff_numbered(
+                    &old_ln.to_string(),
+                    &new_ln.to_string(),
+                    "dctx",
+                    line,
+                ));
+                old_ln += 1;
+                new_ln += 1;
+            } else if line.starts_with("+++") || line.starts_with("---") {
+                out.push_str(&format!("<span class=\"diff-file\">{}</span>", esc(line)));
+            } else {
+                out.push_str(&format!("<span class=\"df-meta\">{}</span>", esc(line)));
+            }
+        }
+        out.push_str("</pre></div></details>\n");
+    }
+    out
+}
+
+fn diff_numbered(old: &str, new: &str, class: &str, line: &str) -> String {
+    format!(
+        "<span class=\"df-line {class}-row\"><span class=\"dln\">{old}</span><span class=\"dln\">{new}</span><span class=\"{class}\">{}</span></span>",
+        esc(line)
+    )
+}
+
+/// Path for one chunk: `+++ b/<p>` first, then `--- a/<p>`, then the
+/// `diff --git` header. `/dev/null` falls through to the other side.
+fn diff_chunk_path(lines: &[&str]) -> String {
+    for line in lines {
+        if let Some(rest) = line.strip_prefix("+++ ") {
+            if rest != "/dev/null" {
+                return rest.strip_prefix("b/").unwrap_or(rest).to_string();
+            }
+        }
+    }
+    for line in lines {
+        if let Some(rest) = line.strip_prefix("--- ") {
+            if rest != "/dev/null" {
+                return rest.strip_prefix("a/").unwrap_or(rest).to_string();
+            }
+        }
+    }
+    lines
+        .first()
+        .and_then(|l| l.strip_prefix("diff --git a/"))
+        .and_then(|rest| rest.split(" b/").next())
+        .unwrap_or("diff")
+        .to_string()
+}
+
+/// Fallback for diff text without `diff --git` headers: one escaped block
+/// with line-level coloring (markers stay span-free, old behavior).
+fn plain_diff_html(raw: &str) -> String {
     let mut out = String::with_capacity(raw.len() + raw.len() / 4);
     let mut first = true;
     for line in raw.lines() {
@@ -51,26 +174,7 @@ pub fn diff_html(raw: &str) -> String {
             out.push('\n');
         }
         first = false;
-        let e = esc(line);
-        if line.starts_with("@@") {
-            out.push_str("<span class=\"diff-hunk\">");
-            out.push_str(&e);
-            out.push_str("</span>");
-        } else if line.starts_with("+++") || line.starts_with("---") {
-            out.push_str("<span class=\"diff-file\">");
-            out.push_str(&e);
-            out.push_str("</span>");
-        } else if line.starts_with('+') {
-            out.push_str("<span class=\"diff-add\">");
-            out.push_str(&e);
-            out.push_str("</span>");
-        } else if line.starts_with('-') {
-            out.push_str("<span class=\"diff-del\">");
-            out.push_str(&e);
-            out.push_str("</span>");
-        } else {
-            out.push_str(&e);
-        }
+        out.push_str(&diff_line_span(line));
     }
     if raw.ends_with('\n') {
         out.push('\n');
@@ -78,6 +182,21 @@ pub fn diff_html(raw: &str) -> String {
     out
 }
 
+fn diff_line_span(line: &str) -> String {
+    let e = esc(line);
+    if line.starts_with("@@") {
+        format!("<span class=\"diff-hunk\">{e}</span>")
+    } else if line.starts_with("+++") || line.starts_with("---") {
+        format!("<span class=\"diff-file\">{e}</span>")
+    } else if line.starts_with('+') {
+        format!("<span class=\"diff-add\">{e}</span>")
+    } else if line.starts_with('-') {
+        format!("<span class=\"diff-del\">{e}</span>")
+    } else {
+        e
+    }
+}
+
 /// Render a full HTML page. `title` is escaped; `nav` and `body` are
 /// inlined as-is (caller must escape untrusted text with [`esc`]).
 #[allow(dead_code)]
diff --git a/static/style.css b/static/style.css
index 53ab719..ff5d619 100644
--- a/static/style.css
+++ b/static/style.css
@@ -48,7 +48,7 @@
   --diff-del:#f7768e;
   --diff-del-bg:#38232e;
   --diff-hunk:#7dcfff;
-  --diff-file:#c0caf5;
+  --diff-file:#bb9af7;
 }
 @media (prefers-color-scheme:light){
   :root{
@@ -82,7 +82,7 @@
     --diff-del:#8c4351;
     --diff-del-bg:#d9c2c7;
     --diff-hunk:#0f4b6e;
-    --diff-file:#343b58;
+    --diff-file:#5a4a78;
   }
 }
 html{background:var(--bg);-webkit-text-size-adjust:100%}
@@ -347,3 +347,23 @@ details.clonebox:not([open]){padding-bottom:.25rem}
 .comment-head{display:flex;align-items:center;color:var(--fg-dim);font-size:var(--fs-sm);margin:0 0 var(--s2)}
 .comment-head .who{color:var(--fg);font-weight:600;margin-right:.35em}
 time{font-variant-numeric:tabular-nums}
+
+/* Diff cards (f0rge #74): one card per file, dual line numbers. */
+.difffile{border:1px solid var(--border);background:var(--surface);margin:var(--s3) 0}
+.difffile>summary{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s2) var(--s3);padding:var(--s2) var(--s3);cursor:pointer;background:var(--bg-alt)}
+.difffile>summary::marker{color:var(--fg-dim)}
+.df-path{color:var(--fg);background:none;padding:0;overflow-wrap:anywhere}
+.df-count{font-size:var(--fs-sm);font-variant-numeric:tabular-nums;margin-left:auto}
+.df-add{color:var(--green)}
+.df-del{color:var(--red)}
+.df-bar{display:inline-block;width:6rem;height:.5rem;background:var(--diff-del-bg);border:1px solid var(--border)}
+.df-bar-add{display:block;height:100%;background:var(--green)}
+.difffile .pre-scroll{margin:0}
+pre.diff{margin:0;border:0;background:var(--surface)}
+.df-line{display:block}
+.dln{display:inline-block;width:2.8em;text-align:right;padding-right:.5em;color:var(--fg-dim);user-select:none;font-variant-numeric:tabular-nums}
+.dln+.dln{border-right:1px solid var(--border);margin-right:.5em}
+.diff-add-row{background:var(--diff-add-bg)}
+.diff-del-row{background:var(--diff-del-bg)}
+.diff-file{color:var(--diff-file);font-weight:600}
+.df-meta{color:var(--fg-dim)}
diff --git a/tests/theme_contrast.rs b/tests/theme_contrast.rs
index 9ce311f..0c0fea3 100644
--- a/tests/theme_contrast.rs
+++ b/tests/theme_contrast.rs
@@ -117,6 +117,8 @@ fn both_themes_pass_aa_for_text_colors() {
         ("--tok-com", "--surface-2"),
         ("--tok-fn", "--surface"),
         ("--tok-type", "--surface"),
+        ("--diff-file", "--surface"),
+        ("--diff-hunk", "--surface"),
     ];
     check("dark", dark, &pairs);
     check("light", light, &pairs);
-- 
2.56.0