hanna/fabrica

feat(web): polish — signature cache, third theme, a11y, mobile 380px

6748436 · hanna committed on 2026-07-25

- Wire the moka SignatureCache (bounded, 10-min TTL) into AppState and the
  commit list / commit page, so list views stop re-verifying every row —
  the measured hot path (§18 caching where measured).
- Add a third embedded theme (nord) that sets only the documented --fb-*
  tokens, proving the themeability acceptance test: a complete UI from
  tokens alone. Verified the picker lists it and it renders.
- Accessibility: the drawer toggle now aria-controls the drawer.
- Mobile 380px: >=44px touch targets, no horizontal body scroll, and
  blob/diff/clone rows scroll within their own box.

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

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

assets/base.css +33 −0

assets/themes/nord.css +46 −0

crates/git/src/signature.rs +6 −2

crates/web/src/layout.rs +2 −2

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

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

docs/decisions.md +18 −0

   .page {
     padding: 0.75rem;
+  }
+  /* The body never scrolls horizontally; wide content scrolls within itself. */
+  body {
+    overflow-x: hidden;
+  }
+  /* Comfortable touch targets (>= 44px) for the primary interactive elements. */
+  .topbar .tabs a,
+  .repo-tabs a,
+  .drawer nav a,
+  .drawer .drawer-item,
+  .btn,
+  .icon-btn {
+    min-height: 44px;
+    display: inline-flex;
+    align-items: center;
+  }
+  .icon-btn {
+    justify-content: center;
+    min-width: 44px;
+  }
+  .repo-tabs,
+  .clone-row {
+    overflow-x: auto;
+    -webkit-overflow-scrolling: touch;
+  }
+  .clone-row input {
+    min-width: 0;
+  }
+  /* Blob and diff tables scroll within their own box. */
+  table.blob,
+  table.diff {
+    display: block;
+    overflow-x: auto;
+  }
+}

+/* 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/.
+ *
+ * nord — a third, community-style theme. It sets ONLY the documented --fb-*
+ * tokens (docs/theming.md) and nothing else, which is the themeability
+ * acceptance test: a complete, coherent UI from tokens alone, no base.css edits. */
+:root {
+  --fb-color-scheme: dark;
+  /* Surfaces & text */
+  --fb-bg: #2e3440;
+  --fb-bg-raised: #3b4252;
+  --fb-bg-inset: #434c5e;
+  --fb-border: #4c566a;
+  --fb-fg: #eceff4;
+  --fb-fg-muted: #99a3b3;
+  /* Accents & status */
+  --fb-accent: #88c0d0;
+  --fb-accent-fg: #2e3440;
+  --fb-success: #a3be8c;
+  --fb-warning: #ebcb8b;
+  --fb-danger: #bf616a;
+  /* Diff row backgrounds & gutters */
+  --fb-diff-add-bg: rgba(163, 190, 140, 0.16);
+  --fb-diff-del-bg: rgba(191, 97, 106, 0.16);
+  --fb-diff-add-fg: #a3be8c;
+  --fb-diff-del-fg: #bf616a;
+  /* Syntax highlighting */
+  --fb-hl-keyword: #81a1c1;
+  --fb-hl-function: #88c0d0;
+  --fb-hl-type: #8fbcbb;
+  --fb-hl-string: #a3be8c;
+  --fb-hl-number: #b48ead;
+  --fb-hl-comment: #616e88;
+  --fb-hl-constant: #b48ead;
+  --fb-hl-variable: #d8dee9;
+  --fb-hl-operator: #81a1c1;
+  --fb-hl-punctuation: #eceff4;
+  --fb-hl-attribute: #8fbcbb;
+  --fb-hl-tag: #81a1c1;
+}

@@ -255,11 +255,15 @@ pub struct SignatureCache {
255	}	255	}
256		256
257	impl SignatureCache {	257	impl SignatureCache {
258	/// A cache holding up to `capacity` results.	258	/// A cache holding up to `capacity` results, each expiring after 10 minutes so
		259	/// a key change is reflected without an explicit invalidation.
259	#[must_use]	260	#[must_use]
260	pub fn new(capacity: u64) -> Self {	261	pub fn new(capacity: u64) -> Self {
261	Self {	262	Self {
262	inner: moka::sync::Cache::new(capacity),	263	inner: moka::sync::Cache::builder()
		264	.max_capacity(capacity)
		265	.time_to_live(std::time::Duration::from_secs(600))
		266	.build(),
263	}	267	}
264	}	268	}
265		269

     html! {
         header class="topbar" {
             button class="icon-btn" type="button" data-drawer-toggle aria-label="Menu"
-                   aria-expanded="false" { "☰" }
+                   aria-controls="drawer" aria-expanded="false" { "☰" }
             span class="slug" { a href="/" { (chrome.instance_name) } }
             nav class="tabs" aria-label="Primary" {}
             a class="icon-btn" href="/" aria-label="Home" { "⌂" }
 /// The off-canvas navigation drawer.
 fn drawer(chrome: &Chrome) -> Markup {
     html! {
-        aside class="drawer" aria-label="Navigation" {
+        aside id="drawer" class="drawer" aria-label="Navigation" {
             h2 { (chrome.instance_name) }
             nav {
                 a href="/" { "Home" }

     pub mailer: Arc<Mailer>,
     /// The instance signing secret (API tokens, future session signing).
     pub secret: Arc<String>,
+    /// Commit/tag signature-verification cache (verification is expensive; list
+    /// views reuse results, bounded and TTL'd).
+    pub signatures: git::SignatureCache,
     /// Theme/asset registry, behind a lock so `SIGHUP` can re-scan it.
     assets: Arc<RwLock<Assets>>,
+}
             store,
             mailer: Arc::new(mailer),
             secret: Arc::new(secret),
+            signatures: git::SignatureCache::new(4096),
             assets: Arc::new(RwLock::new(assets)),
         })
+    }

     })
     .await?;
-    // Verify signatures against all registered keys (bounded to this page's rows).
+    // Verify signatures against all registered keys (bounded to this page's rows),
+    // reusing the TTL'd signature cache.
     let keys = signing_keys(state.store.all_keys().await?);
+    let cache = state.signatures.clone();
     let states = git_read(state, &ctx.repo.id, {
         let oids: Vec<git::Oid> = commits.iter().map(|c| c.oid.clone()).collect();
         move |repo| {
             Ok(oids
                 .iter()
-                .map(|o| repo.signature_state(o, &keys))
+                .map(|o| (*cache.get(repo, o, &keys)).clone())
                 .collect::<Vec<_>>())
+        }
     })
     let oid = git::Oid::new(sha);
     let context_lines = state.config.ui.diff_context_lines;
     let sha_owned = sha.to_string();
+    let cache = state.signatures.clone();
     git_read(state, repo_id, move |repo| {
         let detail = repo.commit(&oid)?;
         let base = detail.parents.first().cloned();
             .into_iter()
             .map(|file| render_one_file(repo, &head_rev, base_rev.as_ref(), file))
             .collect();
-        let sig = repo.signature_state(&oid, &keys);
+        let sig = (*cache.get(repo, &oid, &keys)).clone();
         Ok((detail, rendered, sig))
     })
     .await

 **Rationale:** Foreground is correct for systemd and Docker, which own process
 lifecycle. This deviates from an earlier `server start`/`server stop` sketch.
+## 2026-07-25 — Polish: signature cache wired; `theme list`/`gc` CLI deferred
+**Decision:** The `moka` `SignatureCache` (bounded 4096, 10-minute TTL) is wired
+into `AppState` and used by the commit list and commit page. The
+`fabrica theme list` and `fabrica gc` CLI subcommands are **not** shipped.
+**Alternatives:** Also cache attributes/highlight; implement `theme list`/`gc`.
+**Rationale:** Signature verification is the measured hot path (list views verify
+every row), so it is the one place caching earns its keep (§18 "moka where
+measured"); the TTL bounds staleness after a key change without explicit
+invalidation. `theme list` would need the embedded theme registry, which lives in
+`web` and cannot be reached from `cli` (nothing may depend on `web`); the web theme
+picker already lists every theme, so the CLI command is low value. `gc`
+(trash reaping) is a maintenance convenience with no correctness impact; both are
+tracked gaps, not blockers. The per-file highlight **timeout** guard (§8) also
+remains deferred as noted earlier.
 ## 2026-07-25 — API nested into web via `nest_service`; web may depend on api
 **Decision:** The `/api/v1` JSON surface is a self-contained `Router` built by