Catch-up replays and named attention for async games

"While you were away": returning to a game with unseen moves shows a
banner — "You missed N moves. Watch what happened" — that opens a
replay reel. The server rebuilds the game and captures a redacted
per-move view for the viewer (own hand only, capped at the last 200
moves); the client plays the reel on a full board with the actor and
humanized events captioned per step, auto-advancing with pause,
step-back/forward, arrow-key control, and skip-to-now. Seen progress
is tracked per room in the browser (every state broadcast now carries
the log sequence), so the banner only appears when there is genuinely
something to watch.

Attention between turns is now named, not just signaled: game
summaries carry WHY a game waits on you — your turn, counteract
(you're being attacked mid-someone-else's-turn), forced discard, or a
pending interruption — the ledger prints it ("UNDER ATTACK —
respond!"), and browser notifications say "you are under attack in
GNSK!" rather than a generic your-turn.

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

packages/web/src/net.svelte.ts

@@ -137,6 +137,12 @@ export function humanize(e: GameEvent): string | null {
 
 const SEAT_KEY = "wizwar-seat";
 const SEATS_KEY = "wizwar-seats";
+const SEEN_KEY = "wizwar-seen";
+
+function loadSeen(): Record<string, number> {
+  try { return JSON.parse(localStorage.getItem(SEEN_KEY) ?? "{}"); }
+  catch { return {}; }
+}
 
 export interface Seat { name: string; roomId: string; token: string }
 export interface GameSummary {
@@ -148,10 +154,20 @@ export interface GameSummary {
   winner: string | null;
   activePlayerId: string | null;
   yourTurn: boolean;
+  attention: "turn" | "counteract" | "discard" | "interrupt" | null;
   round: number | null;
   lastMoveAt: string | null;
 }
 
+export function attentionLabel(a: GameSummary["attention"]): string {
+  switch (a) {
+    case "counteract": return "UNDER ATTACK — respond!";
+    case "discard": return "DISCARD to your hand limit";
+    case "interrupt": return "your interruption is waiting";
+    default: return "YOUR TURN";
+  }
+}
+
 function loadSeats(): Seat[] {
   try { return JSON.parse(localStorage.getItem(SEATS_KEY) ?? "[]"); }
   catch { return []; }
@@ -181,6 +197,12 @@ class Net {
   );
   /** A transfer phrase we minted, to show the user. */
   transferCode = $state<{ code: string; expiresAt: number } | null>(null);
+  /** Moves you haven't watched yet in the current room. */
+  missedMoves = $state(0);
+  /** A catch-up reel delivered by the server. */
+  catchUp = $state<{ seq: number; actor: string; events: GameEvent[]; view: GameView }[] | null>(null);
+  private seen: Record<string, number> = loadSeen();
+  private currentSeq = 0;
   private lastYourTurn = new Map<string, boolean>();
   private pollTimer: ReturnType<typeof setInterval> | null = null;
 
@@ -237,8 +259,22 @@ class Net {
           this.hostId = msg.hostId;
           this.started = msg.started;
           break;
-        case "state":
+        case "state": {
           this.view = msg.view;
+          if (typeof msg.seq === "number" && this.roomId) {
+            this.currentSeq = msg.seq;
+            const last = this.seen[this.roomId] ?? 0;
+            this.missedMoves = Math.max(0, msg.seq - last);
+            // Watching live counts as seeing; only a fresh arrival has a gap.
+            if (this.missedMoves === 0 || document.visibilityState === "visible") {
+              // A live update while present marks itself seen.
+              if (last >= msg.seq - 1) this.markSeen();
+            }
+          }
+          break;
+        }
+        case "catchUp":
+          this.catchUp = msg.steps;
           break;
         case "events":
           for (const e of msg.events as GameEvent[]) {
@@ -349,10 +385,15 @@ class Net {
     if (!this.notificationsEnabled || typeof Notification === "undefined") return;
     if (this.roomId === g.roomId && !document.hidden) return; // already looking at it
     try {
-      new Notification(`Wiz-War — your turn in ${g.roomId}`, {
-        body: `${g.players.join(" vs ")} · round ${g.round ?? "?"}`,
-        tag: `wizwar-${g.roomId}`,
-      });
+      new Notification(
+        g.attention === "counteract"
+          ? `Wiz-War — you are under attack in ${g.roomId}!`
+          : `Wiz-War — your turn in ${g.roomId}`,
+        {
+          body: `${g.players.join(" vs ")} · round ${g.round ?? "?"}`,
+          tag: `wizwar-${g.roomId}`,
+        },
+      );
     } catch { /* blocked at the OS level; the tab title still shows it */ }
   }
 
@@ -376,6 +417,25 @@ class Net {
     this.send({ type: "pickColor", color });
   }
 
+  /** Ask for the reel of everything since we last watched. */
+  requestCatchUp(): void {
+    if (!this.roomId) return;
+    this.send({ type: "catchUp", sinceSeq: this.seen[this.roomId] ?? 0 });
+  }
+
+  /** All caught up: remember it and clear the banner. */
+  markSeen(): void {
+    if (!this.roomId) return;
+    this.seen[this.roomId] = this.currentSeq;
+    localStorage.setItem(SEEN_KEY, JSON.stringify(this.seen));
+    this.missedMoves = 0;
+  }
+
+  closeCatchUp(): void {
+    this.catchUp = null;
+    this.markSeen();
+  }
+
   command(command: Command): void {
     this.send({ type: "command", command });
   }