Phase 18: internet realtime collaboration (GM-authoritative) + server

- Shared Zod wire protocol (src/lib/sync/messages.ts): hosted/joined/snapshot/
  mapImage/error; player-safe projections only (enemy HP masked on the GM before
  broadcast via src/lib/combat/playerProjection.ts).
- wsSync adapter (src/lib/sync/wsSync.ts) behind the existing SyncAdapter seam:
  GM hostSession + debounced snapshot broadcast (useSessionBroadcaster), player
  joinSession into an ephemeral playerSessionStore, exponential-backoff reconnect
  with seamless room resume (GM secret). localSync remains the offline default.
- buildSnapshot (src/lib/sync/snapshot.ts) reuses the same projection as the local
  /play view, guaranteeing parity. Player view refactored into shared PlayerBoards;
  /play?room=CODE = networked read-only mode.
- SessionControl in the header: Host (optional password) → shareable room code/link.
- Server (server/): Fastify + @fastify/websocket + @fastify/static, in-memory
  GM-authoritative rooms (crypto room id/secret hashed, optional join password,
  TTL sweep, players strictly read-only), origin allowlist, per-frame size cap +
  rate limit, Zod validation. esbuild bundle (server/build.mjs), tsconfig.server.json.
- Dockerfile (multi-stage) + deploy/ttrpg.compose.yml (own project on external
  'proxy' net, Traefik labels for ttrpg.briggen.dev, non-root, no-new-privileges).
  CSP connect-src now allows same-origin wss:.

Tests: protocol round-trip, room hub (auth/password/resume/TTL/read-only), enemy
masking, Fastify+ws integration (host→join→snapshot, player push rejected), and a
two-context Playwright realtime spec (separate config) — GM hosts, player device
sees live combat with masked enemy HP.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

src/app/RootLayout.tsx

@@ -8,6 +8,8 @@ import { ErrorBoundary } from '@/components/ui/ErrorBoundary';
 import { RollTray } from '@/components/ui/RollTray';
 import { Select } from '@/components/ui/Input';
 import { Button } from '@/components/ui/Button';
+import { SessionControl } from '@/features/play/SessionControl';
+import { useSessionBroadcaster } from '@/features/play/useSessionBroadcaster';
 
 const NAV = [
   { to: '/', label: 'Campaigns', exact: true },
@@ -56,6 +58,9 @@ function ThemeToggle() {
 export function RootLayout() {
   const pathname = useRouterState({ select: (s) => s.location.pathname });
   const [paletteOpen, setPaletteOpen] = useState(false);
+  const activeCampaign = useActiveCampaign();
+  // While the GM is hosting, mirror state to players (inert unless hosting).
+  useSessionBroadcaster(activeCampaign ?? null);
 
   // Global Ctrl/Cmd+K opens the command palette.
   useEffect(() => {
@@ -93,6 +98,7 @@ export function RootLayout() {
           })}
         </nav>
         <div className="ml-auto flex items-center gap-2">
+          <SessionControl />
           <Button size="sm" variant="ghost" onClick={() => setPaletteOpen(true)} title="Command palette (Ctrl/Cmd+K)" aria-label="Open command palette">
             ⌘K
           </Button>