Add version number + About dialog with changelog (v1)

Start tracking a version number and a player-facing changelog, surfaced from
the ☰ menu via a new About item.

- frontend/src/lib/changelog.js: VERSION (bump every commit) + CHANGELOG.
- AboutModal.svelte: shows the version and changelog using the shared modal CSS;
  closes via ×, backdrop click, or Escape.
- CornerMenu.svelte: new 'ℹ️ About' menu item, modal rendered outside the menu's
  stacking context so it overlays correctly on every page.
- AGENTS.md: documents the bump-every-commit / log-only-user-facing convention.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

frontend/src/components/AboutModal.svelte

@@ -0,0 +1,82 @@
+<script>
+    import { createEventDispatcher } from 'svelte';
+    import { VERSION, CHANGELOG } from '../lib/changelog';
+
+    const dispatch = createEventDispatcher();
+    function close() { dispatch('close'); }
+</script>
+
+<svelte:window on:keydown={(e) => e.key === 'Escape' && close()} />
+
+<div class="modal-backdrop" on:click|self={close}>
+    <div class="modal-box sheet-modal glass-panel about-modal">
+        <button class="modal-close" on:click={close} aria-label="Close">×</button>
+        <h3>About</h3>
+        <p class="about-tagline">A remote-play companion for <em>Rats with Gats</em>.</p>
+        <p class="about-version">Version {VERSION}</p>
+
+        <h4 class="about-heading">What's New</h4>
+        <ul class="changelog">
+            {#each CHANGELOG as entry (entry.version)}
+                <li class="changelog-entry">
+                    <div class="changelog-head">
+                        <span class="changelog-ver">v{entry.version}</span>
+                        <span class="changelog-date text-muted">{entry.date}</span>
+                    </div>
+                    <ul class="changelog-changes">
+                        {#each entry.changes as change}
+                            <li>{change}</li>
+                        {/each}
+                    </ul>
+                </li>
+            {/each}
+        </ul>
+    </div>
+</div>
+
+<style>
+    .about-tagline {
+        margin: 0.25rem 0 0.75rem;
+        color: var(--text-muted);
+    }
+    .about-version {
+        font-family: var(--font-heading);
+        font-weight: 700;
+        color: var(--accent);
+        margin: 0;
+    }
+    .about-heading {
+        margin: 1.25rem 0 0.5rem;
+        border-top: 1px solid var(--edge-soft);
+        padding-top: 1rem;
+    }
+    .changelog {
+        list-style: none;
+        margin: 0;
+        padding: 0;
+        display: flex;
+        flex-direction: column;
+        gap: 1rem;
+    }
+    .changelog-head {
+        display: flex;
+        align-items: baseline;
+        gap: 0.6rem;
+        margin-bottom: 0.25rem;
+    }
+    .changelog-ver {
+        font-family: var(--font-heading);
+        font-weight: 700;
+        color: var(--accent);
+    }
+    .changelog-date {
+        font-size: 0.85rem;
+    }
+    .changelog-changes {
+        margin: 0;
+        padding-left: 1.2rem;
+        display: flex;
+        flex-direction: column;
+        gap: 0.3rem;
+    }
+</style>

frontend/src/components/CornerMenu.svelte

@@ -1,8 +1,10 @@
 <script>
+    import AboutModal from './AboutModal.svelte';
     import { extraMenuLinks } from '../lib/menu';
     import { theme, toggleTheme } from '../lib/theme';
 
     let open = false;
+    let showAbout = false;
 
     $: themeLink = $theme === 'dark'
         ? { label: '☀️ Light Mode', action: toggleTheme, keepOpen: true, title: 'Switch to the light theme' }
@@ -11,6 +13,7 @@
     $: baseLinks = [
         { label: '📖 Rules', href: '/rules', external: true, title: 'Open the rulebook in a new tab' },
         themeLink,
+        { label: 'ℹ️ About', action: () => (showAbout = true), title: 'Version and changelog' },
     ];
 
     $: links = [...$extraMenuLinks, ...baseLinks];
@@ -52,6 +55,10 @@
     {/if}
 </div>
 
+{#if showAbout}
+    <AboutModal on:close={() => (showAbout = false)} />
+{/if}
+
 <style>
     .corner-menu {
         position: fixed;

frontend/src/lib/changelog.js

@@ -0,0 +1,21 @@
+// App version and player-facing changelog, surfaced in the ☰ menu → About
+// (rendered by AboutModal.svelte).
+//
+// Maintenance (see AGENTS.md "Versioning & changelog"):
+//   - Bump VERSION by one on every commit.
+//   - Add a CHANGELOG entry only when a commit changes something players can
+//     see. Skip refactors, tests, and tooling. Keep wording player-facing.
+
+export const VERSION = 1;
+
+// Newest first. Each entry: { version, date: 'YYYY-MM-DD', changes: [string, ...] }.
+export const CHANGELOG = [
+    {
+        version: 1,
+        date: '2026-06-15',
+        changes: [
+            'First tracked version — the app now reports its version here in the ☰ menu → About, with a log of player-facing changes.',
+            'Home screen lists crews you can rejoin above “Muster a New Crew”.',
+        ],
+    },
+];