From 123e7b41a9ff8ad2cdf560fc2e2cdbd88fe5a337 Mon Sep 17 00:00:00 2001
From: Eric Wagoner <ewagoner@gmail.com>
Date: Sat, 1 Aug 2026 16:49:57 -0400
Subject: [PATCH] Review UI polish: done-card layout, clickable photo names,
 favicon
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The token-day command no longer wraps mid-command inside the sentence —
the waiting note gets a readable measure and the command sits on its
own non-wrapping line. Catalog photo names link to the photo (dotted
underline, brass on hover), rows highlight on hover, and an inline-SVG
die favicon stops the console 404.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 src/bggpipe/templates/review.html | 31 +++++++++++++++++++++++--------
 1 file changed, 23 insertions(+), 8 deletions(-)

diff --git a/src/bggpipe/templates/review.html b/src/bggpipe/templates/review.html
index 1614e19..7f9a702 100644
--- a/src/bggpipe/templates/review.html
+++ b/src/bggpipe/templates/review.html
@@ -4,6 +4,7 @@
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <title>bggpipe review</title>
+<link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>🎲</text></svg>">
 <style>
   :root {
     --felt: #2c4136;
@@ -165,16 +166,28 @@
     font-family: ui-monospace, "SF Mono", Menlo, monospace;
     background: var(--felt); color: var(--paper);
     padding: .3rem .8rem; border-radius: 6px;
+    display: inline-block; white-space: nowrap;
   }
-  .done .waiting { color: var(--brass-deep); font-weight: 600; }
+  .done .waiting {
+    color: var(--brass-deep);
+    max-width: 34rem; margin: 1rem auto .2rem; line-height: 1.5;
+  }
+  .done .next { margin: .8rem 0 .2rem; }
 
   /* catalog: read-only status ledger, quieter than decision cards */
   .catalog { background: var(--paper); border-radius: 8px; padding: .4rem 1rem; box-shadow: 0 1px 3px rgba(0,0,0,.3); }
   .catalog table { width: 100%; border-collapse: collapse; font-size: .85rem; }
-  .catalog td { padding: .3rem .5rem; border-top: 1px solid var(--paper-edge); vertical-align: top; }
+  .catalog td { padding: .38rem .5rem; border-top: 1px solid var(--paper-edge); vertical-align: top; }
   .catalog tr:first-child td { border-top: none; }
-  .catalog .t { font-weight: 600; }
+  .catalog tr:hover td { background: #f0ebdd; }
+  .catalog .t { font-weight: 600; max-width: 22rem; }
   .catalog .meta { color: var(--ink-soft); }
+  .catalog a {
+    color: inherit;
+    text-decoration: underline dotted;
+    text-underline-offset: 2px;
+  }
+  .catalog a:hover { color: var(--brass-deep); }
   .chip {
     font-size: .68rem; text-transform: uppercase; letter-spacing: .06em;
     border-radius: 999px; padding: .1rem .55rem; white-space: nowrap;
@@ -346,10 +359,10 @@ function render() {
         <div>${s.summary.rejected}<span>rejected</span></div>
       </div>
       ${waiting
-        ? `<p class="waiting">${waiting} title(s) extracted but not yet matched to BGG —
-           they're waiting on the API token. When it arrives:
-           <code>uv run bggpipe resolve</code>, then review the new arrivals here.</p>`
-        : `<p>Next: <code>uv run bggpipe diff</code></p>`}
+        ? `<p class="waiting">${waiting} titles are extracted but not yet matched
+             to BGG — they're waiting on the API token.</p>
+           <p class="next">When it arrives: <code>uv run bggpipe resolve</code></p>`
+        : `<p class="next">Next: <code>uv run bggpipe diff</code></p>`}
       ${s.unidentified.length ? `<p class="status">${s.unidentified.length} reshoot ticket(s) below — they don't block anything.</p>` : ""}
     </div>`;
   }
@@ -379,7 +392,9 @@ function render() {
         <td>${chip(c)}</td>
         <td class="meta">${c.bgg_name ? esc(c.bgg_name) + (c.bgg_id ? " · " + esc(c.bgg_id) : "") : ""}
             ${c.version_name ? " · " + esc(c.version_name) : ""}</td>
-        <td class="meta">${esc(c.photos.join(", "))}</td>
+        <td class="meta">${c.photos.map(p =>
+          `<a href="/photos/${encodeURIComponent(p)}" target="_blank">${esc(p)}</a>`
+        ).join(", ")}</td>
       </tr>`).join("") + `</table></div>`;
   }
   m.innerHTML = html;