hanna/fabrica

feat(web): repo toolbar, clone menu, commit list & signature, search hits

2980823 · hanna committed on 2026-07-25

Move the branch/Commits actions onto the tab line with a no-JS Clone
dropdown offering HTTPS and SSH URLs. Redesign the commits page as clean
rows (message, author, relative time, sha pill with copy) and add a
signature detail bar to the commit view (signer + key fingerprint). Style
search hits as a path header over a code block of matched lines. Move the
top-bar search to the right (drop the Home button), space the Unified/Split
toggle, and enlarge the repo-slug private pill.

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

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

assets/base.css +179 −20

crates/web/src/activity.rs +1 −1

crates/web/src/icons.rs +4 −4

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

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

crates/web/src/repo.rs +126 −38

crates/web/src/search.rs +14 −10

 /// Format an epoch-millisecond timestamp relative to `now_ms`, e.g. `3 hours
 /// ago`, falling back to an absolute date past a month.
-fn fmt_relative(ms: i64, now_ms: i64) -> String {
+pub(crate) fn fmt_relative(ms: i64, now_ms: i64) -> String {
     let secs = (now_ms - ms).div_euclid(1000).max(0);
     let mins = secs / 60;
     let hours = mins / 60;

 #[derive(Debug, Clone, Copy, PartialEq, Eq)]
 pub enum Icon {
     PanelLeft,
-    House,
     Folder,
     File,
     GitBranch,
     Compass,
     MapPin,
     Globe,
+    Download,
     Github,
     Mastodon,
+}
             Icon::PanelLeft => {
                 r#"<rect width="18" height="18" x="3" y="3" rx="2"/><path d="M9 3v18"/>"#
+            }
-            Icon::House => {
-                r#"<path d="M15 21v-8a1 1 0 0 0-1-1h-4a1 1 0 0 0-1 1v8"/><path d="M3 10a2 2 0 0 1 .709-1.528l7-6a2 2 0 0 1 2.582 0l7 6A2 2 0 0 1 21 10v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/>"#
-            }
             Icon::Folder => {
                 r#"<path d="M20 20a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.9a2 2 0 0 1-1.69-.9L9.6 3.9A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2Z"/>"#
+            }
             Icon::Globe => {
                 r#"<circle cx="12" cy="12" r="10"/><path d="M12 2a14.5 14.5 0 0 0 0 20 14.5 14.5 0 0 0 0-20"/><path d="M2 12h20"/>"#
+            }
+            Icon::Download => {
+                r#"<path d="M12 15V3"/><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><path d="m7 10 5 5 5-5"/>"#
+            }
             Icon::Github => {
                 r#"<path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/>"#
+            }

@@ -76,7 +76,6 @@ fn topbar(chrome: &Chrome) -> Markup {
76	input type="search" name="q" placeholder="Search…" aria-label="Search";	76	input type="search" name="q" placeholder="Search…" aria-label="Search";
77	button class="icon-btn" type="submit" aria-label="Search" { (icon(Icon::Search)) }	77	button class="icon-btn" type="submit" aria-label="Search" { (icon(Icon::Search)) }
78	}	78	}
79	a class="icon-btn" href="/" aria-label="Home" { (icon(Icon::House)) }
80	}	79	}
81	}	80	}
82	}	81	}

+    }
+}
+/// The current time in Unix milliseconds UTC.
+pub(crate) fn now_ms() -> i64 {
+    use std::time::{SystemTime, UNIX_EPOCH};
+    SystemTime::now()
+        .duration_since(UNIX_EPOCH)
+        .map_or(0, |d| i64::try_from(d.as_millis()).unwrap_or(i64::MAX))
+}
 /// Build the application router with all middleware wired.
 pub fn build_router(state: AppState) -> Router {
     let x_request_id = HeaderName::from_static("x-request-id");

@@ -445,23 +445,27 @@ fn repo_content(owner: &str, repo_path: &str, rev: &str, files: &[FileResult]) -
445	/// One file's matches. `blob_base` links each line to the blob (with `#L{n}`).	445	/// One file's matches. `blob_base` links each line to the blob (with `#L{n}`).
446	fn file_result(blob_base: &str, in_repo: Option<&str>, file: &FileResult) -> Markup {	446	fn file_result(blob_base: &str, in_repo: Option<&str>, file: &FileResult) -> Markup {
447	html! {	447	html! {
448	div class="card" style="margin-bottom:0.5rem" {	448	div class="search-hit card" {
449	div class="mono" {	449	div class="search-hit-path mono" {
450	@if in_repo.is_some() {	450	@if in_repo.is_some() {
451	a href=(format!("{blob_base}/{}", file.path)) { (file.path) }	451	a href=(format!("{blob_base}/{}", file.path)) { (file.path) }
452	} @else {	452	} @else {
453	(file.path)	453	(file.path)
454	}	454	}
455	}	455	}
456	@for m in &file.lines {	456	@if !file.lines.is_empty() {
457	div class="mono" style="font-size:0.85em" {	457	div class="search-hit-lines" {
458	@if in_repo.is_some() {	458	@for m in &file.lines {
459	a href=(format!("{blob_base}/{}#L{}", file.path, m.line))	459	div class="search-hit-line" {
460	class="muted" { (m.line) }	460	@if in_repo.is_some() {
461	} @else {	461	a href=(format!("{blob_base}/{}#L{}", file.path, m.line))
462	span class="muted" { (m.line) }	462	class="lineno" { (m.line) }
		463	} @else {
		464	span class="lineno" { (m.line) }
		465	}
		466	code { (m.text) }
		467	}
463	}	468	}
464	" " (m.text)
465	}	469	}
466	}	470	}
467	}	471	}

   align-items: center;
   gap: 0.25rem;
   flex: 1;
-  max-width: 34rem;
+  max-width: 28rem;
-  margin: 0 auto;
+  margin-left: auto;
+}
 .topbar-search input[type="search"] {
   width: 100%;
   min-width: 15rem;
+}
+/* ---- Search hits ---- */
+.search-hit {
+  padding: 0;
+  overflow: hidden;
+  margin-bottom: 0.75rem;
+}
+.search-hit-path {
+  padding: 0.55rem 0.85rem;
+  font-weight: 600;
+  border-bottom: 1px solid var(--fb-border);
+}
+.search-hit-lines {
+  margin: 0;
+  padding: 0.4rem 0;
+  background: var(--fb-bg-inset);
+  font-family: var(--fb-font-mono);
+  font-size: 0.85rem;
+  overflow-x: auto;
+}
+.search-hit-line {
+  display: flex;
+  gap: 1rem;
+  padding: 0 0.85rem;
+  white-space: pre;
+}
+.search-hit-line .lineno {
+  flex: none;
+  min-width: 2.5rem;
+  text-align: right;
+  color: var(--fb-fg-muted);
+  user-select: none;
+}
+.search-hit-line code {
+  white-space: pre;
+}
 /* ---- Tables ---- */
 table.list {
   width: 100%;
   color: var(--fb-fg-muted);
+}
 .repo-slug .badge {
-  font-size: 0.6em;
+  font-size: 0.7rem;
+  padding: 0.12rem 0.55rem;
   align-self: center;
+}
 /* Tab strips (repo sub-nav, explore sub-nav): active-pill style. */
 .subnav {
   justify-content: center;
+}
-.repo-toolbar {
+/* Tabs share their line with the branch/commits/clone actions. */
+.repo-nav {
   display: flex;
-  gap: 0.5rem;
   align-items: center;
+  justify-content: space-between;
+  gap: 1rem;
   flex-wrap: wrap;
-  margin-top: 0.5rem;
+}
-.repo-codesearch {
+.repo-nav .repo-tabs {
-  margin: 0 0 1.25rem;
+  margin: 0.75rem 0 0;
+  flex: 1;
+}
-.clone-row {
+.repo-actions {
   display: flex;
-  gap: 0.5rem;
   align-items: center;
-  margin: 0 0 1rem;
+  gap: 0.5rem;
+  flex-wrap: wrap;
+}
+.repo-codesearch {
+  margin: 1rem 0 1.25rem;
+}
+/* Clone dropdown: a no-JS details/summary popover. */
+.clone-menu {
+  position: relative;
+}
+.clone-menu > summary {
+  list-style: none;
+  cursor: pointer;
+}
+.clone-menu > summary::-webkit-details-marker {
+  display: none;
+}
+.clone-pop {
+  position: absolute;
+  right: 0;
+  top: calc(100% + 0.35rem);
+  z-index: 30;
+  width: 24rem;
+  max-width: 88vw;
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.35);
+}
-.clone-label {
+.clone-field-label {
+  display: block;
+  margin-bottom: 0.3rem;
+  font-size: 0.78em;
   font-weight: 600;
+}
-.clone-row input {
+.clone-input {
-  max-width: 26rem;
+  display: flex;
+  gap: 0.4rem;
+}
+.clone-input input {
   font-family: var(--fb-font-mono);
-  font-size: 0.85em;
+  font-size: 0.8em;
+}
 .breadcrumb {
   margin-bottom: 0.75rem;
   background: var(--fb-diff-add-bg);
+}
+/* ---- Commit list ---- */
+.commit-list {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+.commit-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 1rem;
+  padding: 0.7rem 1rem;
+  border-bottom: 1px solid var(--fb-border);
+}
+.commit-row:last-child {
+  border-bottom: none;
+}
+.commit-row-body {
+  min-width: 0;
+}
+.commit-row-msg {
+  display: block;
+  font-weight: 600;
+  color: var(--fb-fg);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.commit-row-msg:hover {
+  color: var(--fb-accent);
+}
+.commit-row-meta {
+  display: flex;
+  gap: 0.4rem;
+  margin-top: 0.15rem;
+  font-size: 0.85em;
+}
+.commit-row-actions {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  flex: none;
+}
+.commit-sha-pill {
+  padding: 0.1rem 0.45rem;
+  background: var(--fb-bg-inset);
+  border: 1px solid var(--fb-border);
+  border-radius: 5px;
+  font-size: 0.82em;
+  color: var(--fb-fg);
+}
+.commit-sha-pill:hover {
+  border-color: var(--fb-accent);
+  text-decoration: none;
+}
+.commit-copy {
+  width: 1.75rem;
+  height: 1.75rem;
+}
+/* Commit signature detail bar. */
+.sig-detail {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 1rem;
+  flex-wrap: wrap;
+  padding: 0.5rem 0.85rem;
+  margin-bottom: 1rem;
+  border: 1px solid var(--fb-border);
+  border-radius: var(--fb-radius);
+  font-size: 0.9em;
+}
+.sig-verified {
+  border-color: var(--fb-success);
+}
+.sig-verified .sig-signer {
+  color: var(--fb-success);
+}
+.sig-unverified {
+  border-color: var(--fb-warning);
+}
+.sig-fp {
+  color: var(--fb-fg-muted);
+  word-break: break-all;
+}
 /* ---- Commit view & diffs ---- */
 .commit-meta {
   margin-bottom: 1rem;
   gap: 0.5rem;
   margin-bottom: 0.75rem;
+}
+.diff-toggle {
+  display: inline-flex;
+  gap: 0.5rem;
+}
 .diff-toggle .btn {
   padding: 0.2rem 0.6rem;
+}
     justify-content: center;
     min-width: 44px;
+  }
-  .repo-tabs,
+  .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 {

         "branches" => branches_view(state, viewer, jar, uri, ctx).await,
         "tags" => tags_view(state, viewer, jar, uri, ctx).await,
         "search" => {
-            let header = repo_header(&ctx, Tab::Search, &ctx.repo.default_branch);
+            let header = repo_header(state, &ctx, Tab::Search, &ctx.repo.default_branch);
             let raw_query = dq.q.clone().unwrap_or_default();
             crate::search::in_repo(state, viewer, jar, uri, &ctx, &raw_query, header).await
+        }
             let readme = load_readme(state, &ctx.repo.id, &rev, &entries).await;
             let base = format!("/{}/{}", ctx.owner.username, ctx.repo.path);
             html! {
-                (repo_header(&ctx, Tab::Code, &rev_name))
+                (repo_header(state, &ctx, Tab::Code, &rev_name))
-                (clone_widget(state, &ctx))
                 form class="search-row repo-codesearch" method="get" action=(format!("{base}/-/search")) {
                     input type="search" name="q" placeholder="Search this repository…"
                           aria-label="Search this repository";
 /// The "empty repository" landing with clone instructions.
 fn empty_repo_body(state: &AppState, ctx: &RepoCtx) -> Markup {
     html! {
-        (repo_header(ctx, Tab::Code, &ctx.repo.default_branch))
+        (repo_header(state, ctx, Tab::Code, &ctx.repo.default_branch))
         div class="card" {
             h2 { "This repository is empty" }
             p class="muted" { "Push a commit to get started:" }
     .await?;
     let body = html! {
-        (repo_header(&ctx, Tab::Code, &rev_name))
+        (repo_header(state, &ctx, Tab::Code, &rev_name))
         (breadcrumb(&ctx.owner.username, &ctx.repo.path, &rev_name, &path))
         (tree_table(&ctx.owner.username, &ctx.repo.path, &rev_name, &path, &entries))
     };
         source_view,
     );
     let body = html! {
-        (repo_header(&ctx, Tab::Code, &rev_name))
+        (repo_header(state, &ctx, Tab::Code, &rev_name))
         (breadcrumb(&ctx.owner.username, &ctx.repo.path, &rev_name, &path))
         (content_body)
     };
 ) -> AppResult<Response> {
     let branches = git_read(state, &ctx.repo.id, git::Repo::branches).await?;
     let body = html! {
-        (repo_header(&ctx, Tab::Branches, &ctx.repo.default_branch))
+        (repo_header(state, &ctx, Tab::Branches, &ctx.repo.default_branch))
         h2 { "Branches" }
         table class="list" {
             thead { tr { th { "Branch" } th { "Ahead" } th { "Behind" } th { "Updated" } } }
 ) -> AppResult<Response> {
     let tags = git_read(state, &ctx.repo.id, git::Repo::tags).await?;
     let body = html! {
-        (repo_header(&ctx, Tab::Tags, &ctx.repo.default_branch))
+        (repo_header(state, &ctx, Tab::Tags, &ctx.repo.default_branch))
         h2 { "Tags" }
         table class="list" {
             thead { tr { th { "Tag" } th { "Commit" } th { "Kind" } } }
     })
     .await?;
+    let base = format!("/{}/{}", ctx.owner.username, ctx.repo.path);
+    let now = crate::now_ms();
     let body = html! {
-        (repo_header(&ctx, Tab::Code, &rev_name))
+        (repo_header(state, &ctx, Tab::Code, &rev_name))
         h2 { "Commits" }
-        ul class="repo-list" {
+        ul class="commit-list card" {
             @for (commit, sig) in commits.iter().zip(states.iter()) {
-                li {
+                @let commit_url = format!("{base}/-/commit/{}", commit.oid);
-                    div class="name" {
+                li class="commit-row" {
-                        a href={ "/" (ctx.owner.username) "/" (ctx.repo.path) "/-/commit/" (commit.oid) } {
+                    div class="commit-row-body" {
-                            (commit.summary)
+                        a class="commit-row-msg" href=(commit_url) { (commit.summary) }
+                        div class="commit-row-meta muted" {
+                            span { (commit.author.name) }
+                            span { "·" }
+                            span { (crate::activity::fmt_relative(commit.author.time_ms, now)) }
+                        }
-                        " " (signature_badge(sig))
+                    }
-                    p class="muted" {
+                    div class="commit-row-actions" {
-                        span class="mono" { (commit.oid.short()) }
+                        (signature_badge(sig))
-                        " · " (commit.author.name) " · " (fmt_date(commit.author.time_ms))
+                        a class="mono commit-sha-pill" href=(commit_url) { (commit.oid.short()) }
+                        button class="icon-btn commit-copy" type="button"
+                               data-clipboard=(commit.oid.to_string()) aria-label="Copy commit id" {
+                            (icon(Icon::Copy))
+                        }
+                    }
+                }
+            }
     let keys = signing_keys(state.store.all_keys().await?);
     let (detail, files, sig) = load_commit(state, &ctx.repo.id, sha, keys).await?;
+    // Resolve the signer's username for a verified signature's detail line.
+    let signer = match &sig {
+        git::SignatureState::Verified { user_id, .. } => state
+            .store
+            .user_by_id(user_id)
+            .await
+            .ok()
+            .flatten()
+            .map(|u| u.username),
+        _ => None,
+    };
     // 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 repo_base = format!("/{}/{}", ctx.owner.username, ctx.repo.path);
     let body = html! {
-        (repo_header(&ctx, Tab::Code, &ctx.repo.default_branch))
+        (repo_header(state, &ctx, Tab::Code, &ctx.repo.default_branch))
         (commit_meta(&detail, &sig))
+        (signature_detail(&sig, signer.as_deref()))
         div class="diff-toolbar" {
             span {
                 (files.len()) " files changed · "
     html! { span { (icon(Icon::Mastodon)) span { (handle) } } }
+}
-/// The repo sub-header: slug, tabs, and clone URLs.
+/// The repo sub-header: slug, description, and a tab strip sharing its line with
-fn repo_header(ctx: &RepoCtx, active: Tab, rev: &str) -> Markup {
+/// the branch / commits / clone actions.
+fn repo_header(state: &AppState, ctx: &RepoCtx, active: Tab, rev: &str) -> Markup {
     let base = format!("/{}/{}", ctx.owner.username, ctx.repo.path);
     let tab = |t: Tab, label: &str, glyph: Icon, href: String| {
         html! {
                 @if ctx.repo.is_private { span class="badge badge-private" { "private" } }
+            }
             @if let Some(desc) = &ctx.repo.description { p class="muted" { (desc) } }
-            nav class="tabs repo-tabs" {
+            div class="repo-nav" {
-                (tab(Tab::Code, "Code", Icon::File, base.clone()))
+                nav class="tabs repo-tabs" {
-                (tab(Tab::Branches, "Branches", Icon::GitBranch, format!("{base}/-/branches")))
+                    (tab(Tab::Code, "Code", Icon::File, base.clone()))
-                (tab(Tab::Tags, "Tags", Icon::Box, format!("{base}/-/tags")))
+                    (tab(Tab::Branches, "Branches", Icon::GitBranch, format!("{base}/-/branches")))
-            }
+                    (tab(Tab::Tags, "Tags", Icon::Box, format!("{base}/-/tags")))
-            div class="repo-toolbar" {
+                }
-                a class="btn" href=(format!("{base}/-/branches")) {
+                div class="repo-actions" {
-                    (icon(Icon::GitBranch)) span { (rev) }
+                    a class="btn" href=(format!("{base}/-/branches")) {
+                        (icon(Icon::GitBranch)) span { (rev) }
+                    }
+                    a class="btn" href=(format!("{base}/-/commits/{rev}")) { "Commits" }
+                    (clone_menu(state, ctx))
+                }
-                a class="btn" href=(format!("{base}/-/commits/{rev}")) { "Commits" }
+            }
+        }
+    }
+}
-/// The HTTPS clone widget, shown only on the repo overview.
+/// The Clone dropdown: a no-JS `details` menu offering the HTTPS and SSH URLs.
-fn clone_widget(state: &AppState, ctx: &RepoCtx) -> Markup {
+fn clone_menu(state: &AppState, ctx: &RepoCtx) -> Markup {
+    let https = clone_https(state, ctx);
+    let ssh = clone_ssh(state, ctx);
+    let field = |label: &str, url: &str| {
+        html! {
+            div class="clone-field" {
+                span class="clone-field-label muted" { (label) }
+                div class="clone-input" {
+                    input type="text" readonly value=(url) aria-label=(format!("{label} clone URL"));
+                    button class="btn" type="button" data-clipboard=(url)
+                           aria-label=(format!("Copy {label} URL")) { (icon(Icon::Copy)) }
+                }
+            }
+        }
+    };
     html! {
-        div class="clone-row" {
+        details class="clone-menu" {
-            span class="muted clone-label" { "Clone" }
+            summary class="btn btn-primary" { (icon(Icon::Download)) span { "Clone" } }
-            input type="text" readonly value=(clone_https(state, ctx))
+            div class="clone-pop card" {
-                  aria-label="HTTPS clone URL";
+                (field("HTTPS", &https))
-            button class="btn" type="button" data-clipboard=(clone_https(state, ctx)) {
+                (field("SSH", &ssh))
-                (icon(Icon::Copy)) span { "Copy" }
+            }
+        }
+    }
+    )
+}
+/// The SSH clone URL — scp-style on the default port, `ssh://` otherwise.
+fn clone_ssh(state: &AppState, ctx: &RepoCtx) -> String {
+    let host = &state.config.ssh.clone_host;
+    let port = state.config.ssh.clone_port;
+    let (owner, repo) = (&ctx.owner.username, &ctx.repo.path);
+    if port == 22 {
+        format!("git@{host}:{owner}/{repo}.git")
+    } else {
+        format!("ssh://git@{host}:{port}/{owner}/{repo}.git")
+    }
+}
 /// A path breadcrumb for tree/blob views.
 fn breadcrumb(owner: &str, repo_path: &str, rev: &str, path: &str) -> Markup {
     let root = format!("/{owner}/{repo_path}/-/tree/{rev}");
+    }
+}
+/// The detail bar under a commit's metadata describing its signature: who signed
+/// it and with which key fingerprint. Renders nothing for an unsigned commit.
+fn signature_detail(state: &git::SignatureState, signer: Option<&str>) -> Markup {
+    let kind_label = |k: model::KeyKind| match k {
+        model::KeyKind::Ssh => "SSH",
+        model::KeyKind::Gpg => "GPG",
+    };
+    match state {
+        git::SignatureState::Unsigned => html! {},
+        git::SignatureState::Verified {
+            kind,
+            fingerprint,
+            user_id,
+            ..
+        } => html! {
+            div class="sig-detail sig-verified" {
+                span class="sig-signer" {
+                    "Signed by " strong { (signer.unwrap_or(user_id)) }
+                }
+                span class="sig-fp mono" {
+                    (kind_label(*kind)) " key fingerprint: " (fingerprint)
+                }
+            }
+        },
+        git::SignatureState::UnknownKey { kind, fingerprint } => html! {
+            div class="sig-detail sig-unverified" {
+                span { "Signed by an unregistered " (kind_label(*kind)) " key" }
+                span class="sig-fp mono" { (fingerprint) }
+            }
+        },
+        git::SignatureState::Invalid { reason, .. } => html! {
+            div class="sig-detail sig-unverified" {
+                span { "Signature could not be verified: " (reason) }
+            }
+        },
+    }
+}
 /// Map registered keys to the verification input type.
 fn signing_keys(keys: Vec<model::Key>) -> Vec<git::SigningKey> {
     keys.into_iter()