SPA transitions + autoplay for match type; add no-refresh rule to CLAUDE.md

Co-Authored-By: Claude Sonnet 4.6 <[email protected]>

CLAUDE.md

@@ -98,6 +98,13 @@ All managed via `MatchEventController` under authenticated routes.
 
 ## Rules
 
+**Never navigate between videos with a page refresh** — all video-to-video transitions (Up Next recommendations, playlist tracks, prev/next) must use JavaScript SPA transitions. Never use `window.location.href` or `<a>` tags with hard navigation for video card clicks. The established pattern is:
+- **Video player (generic, match types):** `recTransitionTo(url)` / `plTransitionTo(url)` — fetch `/videos/{key}/player-data` JSON, call `window._ytpLoadSource(hlsUrl, mp4Url)`, then `recSwapContent(url)` / `plSwapContent(url)` in the background to update description, comments, and sidebar.
+- **Audio player (music type):** same pattern but swap `audio.src` and `audio.play()` instead of `_ytpLoadSource`.
+- **Sidebar cards** must have `data-rec-url` (Up Next) or `data-pl-id` (playlist) attributes and call `recGoTo(url)` / `plGoTo(url)` onclick — never `window.location.href`.
+- **Autoplay on track end** is wired via `window._plOnVideoEnd` (video) or `window._plOnTrackEnd` (audio) hooks — the player calls these hooks on `ended`; the SPA script sets them.
+- The only fallback to `window.location.href` is inside `catch` blocks when the fetch itself fails.
+
 **Database changes require confirmation** — if any task requires a migration, schema change, or new column, always ask before proceeding.
 
 **Never use `alert()`, `confirm()`, or `prompt()`** — use toast notifications or inline UI feedback instead.