Adds Top Rivalries widget to landing page and Rivals section to bot
profiles, completing the platform integration for the automatic rivalry
detection system.
## Changes
- web/src/pages/home.ts: fetch rivalries data and render Top Rivalries card
- web/src/pages/bot-profile.ts: add Rivals section filtered to this bot
- web/src/styles/components.css: add rivalry list/item styles
## Plan §13.5 Platform Integration
✅ Rivalry widget on landing page with head-to-head records
✅ Bot profile pages show Rivals section with filtered rivalries
✅ Narratives already implemented via buildRivalryNarrative()
Closes: bf-2quf
- Add display: flex and align-items: center to .participant on mobile
- Change .participant-name from flex-shrink: 1 to flex: 1 for proper space allocation
- Add margin-left spacing to .participant-score and .winner-badge
- Ensures all participant info (name, score, winner badge) is visible on mobile
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
- Change .match-participants to column layout on mobile for better width distribution
- Allow .participant elements to shrink (flex-shrink: 1)
- Remove max-width constraint from .participant-name
- Ensures participant names, scores, and Winner badge are all visible
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Per §14.10 of the plan, implemented shareable bot profile cards:
- Canvas-rendered PNG cards (800x450) with bot stats and branding
- Open Graph tags for social sharing (og:image points to /r2/cards/{bot_id}.png)
- "Share Card" button on bot profile page downloads the card as PNG
- Card displays: name, rating, rank badge, owner, archetype, win rate, stats
- Evolved badge, signature move, and recent rival info
- Responsive styles for desktop and mobile
Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
- Verified /watch/replays shows real completed matches (not just demo)
- Match cards display bot names, turn count, winner badges, map ID
- 'Watch Replay' links point to real match IDs (m_test_*)
- Curated playlists render with real data (featured, comebacks, upsets, etc.)
- Pagination/infinite scroll works via IntersectionObserver
- Mobile testing on Pixel 6 via ADB: layout responsive, touch targets usable
- Created MATCH_LIST_TEST_RESULTS.md with full verification details
- Thumbnails not implemented (clean UI without broken images due to R2 issues)
Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
§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>
Virtual list tracks expanded row heights for correct spacer calculations.
Leaderboard mobile cards use event delegation so toggles work inside lazy
sections. Mobile card details animate with max-height instead of display
toggle. Reduced-motion rules cover all expand/collapse patterns.
Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
Implement double-buffered canvas cross-fade when switching between
dots, Voronoi territory, and influence gradient views. Old layer fades
out while new layer fades in with ease-in-out cubic easing over 400ms.
Respects prefers-reduced-motion by snapping instantly when set.
Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
Three perceived-performance features:
- Preload on hover: internal links prefetch target JSON data after 150ms
hover debounce using <link rel=prefetch>. Touch events prefetch
immediately.
- Skeleton screens: every async page shows a shimmer-animated placeholder
matching the final content layout (leaderboard rows, bot profile card,
replay canvas, playlist grid, etc.) instead of generic "Loading..." text.
- Instant back-cache: back/forward navigation restores scroll position and
cached HTML from an in-memory LRU cache (8 pages), making back navigation
0ms.
Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
- Fix nav/home breakpoints from 768px → 639px to match design system
- Add leaderboard mobile card view with tap-to-expand stats and full-stats link
- Add canvas wrapper aspect-ratio:1 on phone (fills full width, square viewport)
- Add commentary text scroll on mobile, win-prob header stacking
- Replay viewer: mobile controls, pinch-to-zoom, tap-to-play, swipe scrub,
floating view-mode toggle, debug telemetry slide-up sheet (already in place)
- Sandbox: desktop-required message with link already implemented
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
- Evolution page: live polling (10s), activity feed, candidate tracking,
statistics section, island overview with live.json schema
- Series page: detailed series view with game-by-game results
- Seasons page: season list with status and champion display
- Predictions page: enhanced prediction UI with open matches
- API types: add CycleInfo, Candidate, ActivityEntry, Totals for live.json
- Embed: improved embeddable replay widget
- Mobile CSS: responsive breakpoints and bottom tab bar
- Exporter: enhanced live.json generation with full cycle/candidate data
- Matchmaker: series scheduling support with config
- Worker: additional database queries for series/season data
Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
- POST /api/register: bot registration with URL + shared secret validation
- GET /api/job: worker polls for next pending match job (authenticated)
- POST /api/job/:id/result: worker submits match result (winner, replay JSON)
- GET /api/replay/🆔 serve replay JSON from R2 warm cache (falls back to B2)
- GET /api/bot/🆔 bot profile JSON (rating, elo, record, metadata)
- GET /api/bots: leaderboard snapshot with pagination
- POST /api/ui-feedback: accept Agentation UI feedback
Authentication via Bearer token (worker API key). Shared secrets encrypted
with AES-256-GCM using ACB_ENCRYPTION_KEY.
