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>

AGENTS.md

@@ -17,6 +17,14 @@ Do NOT add ad-hoc `ALTER TABLE` statements to `database.py` — that legacy list
 
 When you run into a repeatable problem during testing (e.g. port assignment collision, missing executable, etc), note down the problem and solution in this file so that you'll have access to it in future sessions.
 
+## Versioning & changelog
+
+The app shows its version number and a player-facing changelog in the ☰ menu → About. Both come from `frontend/src/lib/changelog.js` (rendered by `frontend/src/components/AboutModal.svelte`).
+
+- Bump `VERSION` by one on **every** commit.
+- When a commit changes something players can see, add an entry to the **top** of `CHANGELOG` (`{ version, date, changes: [...] }`) describing it in player-facing terms. Group everything shipping under one version into a single entry.
+- The changelog is for players: skip refactors, tests, tooling, and other internal-only changes. A commit with no user-facing change bumps `VERSION` but adds no entry.
+
 ## Work order
 
 You will be working on tasks in [TODO.md](./TODO.md]. Work on at most two tasks at a time (one is preferable, but two is fine if they dove tail really nicely), and after you finish each task, make a git commit and update the TODO list to check off the completed task.

TODO.md

@@ -1,8 +1,9 @@
 ## Polish
 
 - [x] On the home page, rejoin a crew should be above muster a crew, and there should be a gap between the two boxes
-- [ ] **Version number and change log** Start keeping track of version number. It's fine to just start with v1 and increment on every commit. In the hamburger menu, add an "About" item that pops up a modal with the current version number and a change log. The change log should only cover user-facing changes. Add a note to AGENTS.md about maintaining the change log.
+- [x] **Version number and change log** Start keeping track of version number. It's fine to just start with v1 and increment on every commit. In the hamburger menu, add an "About" item that pops up a modal with the current version number and a change log. The change log should only cover user-facing changes. Add a note to AGENTS.md about maintaining the change log.
 - [ ] **Example Play formatting.** The Example Play section of the Rules page could use a bit more formatting for legibility. Make diagrams of the card state at each step rather than just a text listing. 
+- [ ] **Condense Obstacle card display**: Change how the cards in an Obstacle are laid out. Instead of being one big card and a bunch of little ones under it in a row, they should be a single column, with the cards overlapping so that you can just see the numbers and suits of the previous cards peeking out behind the latest card. This is more compact, puts the focus on the most relevant information, and is in line with the rulebook describing the card layout as a column. This is probably also how the cards in the example play section should be laid out.
 
 ## Words Words Words
 

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”.',
+        ],
+    },
+];