Add crew/player/rat name to page title

Each routed page now sets a descriptive document.title so tabs and
browser history entries are distinguishable: the dashboard shows the
Pi-Rat (and human player) name plus crew, the admin panel shows
"Admin · {crew}", the join page is labeled, and home resets to the
app name. New lib/title.js helper composes "{parts} — Rats with Gats".

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

frontend/src/lib/title.js

@@ -0,0 +1,9 @@
+// Sets document.title to a " · "-joined set of page specifics followed by the
+// app name, so tabs and browser history entries are easy to tell apart.
+// Falsy parts are dropped; with no parts the title is just the app name.
+const BASE = 'Rats with Gats';
+
+export function setPageTitle(...parts) {
+    const prefix = parts.filter(Boolean).join(' · ');
+    document.title = prefix ? `${prefix} — ${BASE}` : BASE;
+}

frontend/src/pages/Admin.svelte

@@ -1,6 +1,7 @@
 <script>
     import { onMount } from 'svelte';
     import { apiRequest } from '../lib/api';
+    import { setPageTitle } from '../lib/title';
 
     export let params = {};
     let gameId = params.id;
@@ -13,6 +14,8 @@
     let copiedInvite = false;
     let copiedInviteTimer = null;
 
+    $: setPageTitle('Admin', data?.game?.crew_name);
+
     function rejoinLink(playerId) {
         return `${window.location.origin}/#/game/${gameId}/player/${playerId}`;
     }

frontend/src/pages/Dashboard.svelte

@@ -3,6 +3,8 @@
     import { apiRequest } from '../lib/api';
     import { extraMenuLinks } from '../lib/menu';
     import { getSuggestion } from '../lib/suggestions';
+    import { displayName } from '../lib/cards';
+    import { setPageTitle } from '../lib/title';
 
     import LobbyPhase from '../components/LobbyPhase.svelte';
     import CharacterCreationPhase from '../components/CharacterCreationPhase.svelte';
@@ -103,6 +105,9 @@
         }
     }
 
+    // Distinguish tabs/history by the Pi-Rat (and crew) this dashboard is for
+    $: setPageTitle(state ? displayName(state.player) : null, state?.game?.crew_name);
+
     // Admins get the admin key in their state blob; stash it so the Admin page works for them too
     $: if (state?.player?.is_admin && state?.game?.admin_key) {
         localStorage.setItem(`admin_key_${gameId}`, state.game.admin_key);

frontend/src/pages/Home.svelte

@@ -1,6 +1,10 @@
 <script>
+    import { onMount } from 'svelte';
     import { push } from 'svelte-spa-router';
     import { apiRequest } from '../lib/api';
+    import { setPageTitle } from '../lib/title';
+
+    onMount(() => setPageTitle());
 
     let crewName = '';
     let error = '';

frontend/src/pages/Join.svelte

@@ -1,7 +1,11 @@
 <script>
+    import { onMount } from 'svelte';
     import { push } from 'svelte-spa-router';
     import { apiRequest } from '../lib/api';
+    import { setPageTitle } from '../lib/title';
     export let params = {};
+
+    onMount(() => setPageTitle('Join the Crew'));
     let gameId = params.id;
     let playerName = '';
     let error = '';