From 77f713697ed8ce605577238bb85de96642dbdde8 Mon Sep 17 00:00:00 2001
From: jedarden <github@jedarden.com>
Date: Wed, 22 Apr 2026 18:00:07 -0400
Subject: [PATCH] feat(web): add enriched replay badge to bot profile match
 history
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

§13.3: Display "Narrated" badge on enriched matches in bot profile
recent matches section, matching the match list page behavior.

- Add enriched badge rendering to renderMatchItem() in bot-profile.ts
- Add .enriched-badge CSS style (pink/magenta color to match
  playlist category styling)

The index builder already sets the Enriched flag via isMatchEnriched()
which checks R2 for commentary file existence. The match list page
(matches.ts) already displays this badge.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
---
 web/src/pages/bot-profile.ts  |  2 ++
 web/src/styles/components.css | 13 +++++++++++++
 2 files changed, 15 insertions(+)

diff --git a/web/src/pages/bot-profile.ts b/web/src/pages/bot-profile.ts
index 81e75b7..7dd93a0 100644
--- a/web/src/pages/bot-profile.ts
+++ b/web/src/pages/bot-profile.ts
@@ -180,12 +180,14 @@ function renderMatchItem(match: BotProfile['recent_matches'][number]): string {
   const opponent = match.participants.find(p => p.bot_id !== match.winner_id);
   const won = match.participants.some(p => p.won);
   const resultClass = won ? 'match-won' : 'match-lost';
+  const enrichedBadge = match.enriched ? `<span class="enriched-badge" title="Narrated replay with AI commentary">Narrated</span>` : '';
 
   return `
     <div class="match-item ${resultClass}">
       <span class="match-result">${won ? 'W' : 'L'}</span>
       <span class="match-opponent">${opponent ? escapeHtml(opponent.name) : 'Unknown'}</span>
       <span class="match-score">${match.participants.map(p => p.score).join(' - ')}</span>
+      ${enrichedBadge}
       <a href="#/watch/replay?url=/replays/${match.id}.json.gz" class="btn small">Watch</a>
     </div>
   `;
diff --git a/web/src/styles/components.css b/web/src/styles/components.css
index 7a06a42..70fb5d4 100644
--- a/web/src/styles/components.css
+++ b/web/src/styles/components.css
@@ -166,6 +166,19 @@ tbody tr:hover {
 .badge.error { background-color: rgba(239, 68, 68, 0.2); color: var(--error); }
 .badge.info { background-color: rgba(59, 130, 246, 0.2); color: var(--accent); }
 
+/* Enriched replay badge (§13.3) */
+.enriched-badge {
+  display: inline-flex;
+  align-items: center;
+  padding: 2px var(--space-sm);
+  font-size: 0.7rem;
+  font-weight: 500;
+  border-radius: var(--radius-sm);
+  white-space: nowrap;
+  background-color: rgba(236, 72, 153, 0.2);
+  color: #ec4899;
+}
+
 /* Loading Spinner */
 .spinner {
   display: inline-block;