The Peanut Gallery: nameless read-only spectators, counted but never named

Watch a room by code alone: no seat, no ledger line, no voice in chat.
Views and events are redacted for the empty viewer id (which no seat can
hold), so hands, wards, ambushes and boobytrap truths stay dark. The
table sees only a head count.

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

packages/web/src/net.svelte.ts

@@ -246,6 +246,10 @@ class Net {
   roomColors = $state<Record<string, number>>({});
   roomBots = $state<Record<string, string>>({});
   you = $state<string | null>(null);
+  /** Seated in the Peanut Gallery: watching nameless, read-only. */
+  spectating = $state(false);
+  /** How many watch from the gallery (0 hides the count). */
+  audience = $state(0);
   view = $state<GameView | null>(null);
   log = $state<string[]>([]);
   error = $state<string | null>(null);
@@ -291,14 +295,19 @@ class Net {
       this.status = "connected";
       // Mid-game reconnects (the socket dropped, not the page) walk straight
       // back to the table; otherwise the lobby ledger is the front door.
-      const saved = localStorage.getItem(SEAT_KEY);
-      if (saved && this.roomId) {
-        try {
-          const seat = JSON.parse(saved) as { name: string; roomId: string; token: string };
-          if (seat.roomId === this.roomId) {
-            this.send({ type: "join", roomId: seat.roomId, name: seat.name, token: seat.token });
-          }
-        } catch { localStorage.removeItem(SEAT_KEY); }
+      if (this.spectating && this.roomId) {
+        // A dropped gallery socket rejoins the gallery, not a seat.
+        this.send({ type: "watch", roomId: this.roomId });
+      } else {
+        const saved = localStorage.getItem(SEAT_KEY);
+        if (saved && this.roomId) {
+          try {
+            const seat = JSON.parse(saved) as { name: string; roomId: string; token: string };
+            if (seat.roomId === this.roomId) {
+              this.send({ type: "join", roomId: seat.roomId, name: seat.name, token: seat.token });
+            }
+          } catch { localStorage.removeItem(SEAT_KEY); }
+        }
       }
       this.refreshGames();
     };
@@ -320,10 +329,18 @@ class Net {
           }
           break;
         }
+        case "watching":
+          this.spectating = true;
+          this.roomId = msg.roomId;
+          break;
+        case "audience":
+          this.audience = msg.count ?? 0;
+          break;
         case "room":
           this.roomId = msg.roomId;
           this.roomColors = msg.colors ?? {};
           this.roomBots = msg.bots ?? {};
+          this.audience = msg.audience ?? 0;
           if (this.you && this.token) {
             const seat: Seat = { name: this.you, roomId: msg.roomId, token: this.token };
             localStorage.setItem(SEAT_KEY, JSON.stringify(seat));
@@ -335,7 +352,7 @@ class Net {
           break;
         case "state": {
           this.view = msg.view;
-          if (typeof msg.seq === "number" && this.roomId) {
+          if (typeof msg.seq === "number" && this.roomId && !this.spectating) {
             this.currentSeq = msg.seq;
             // Only the FIRST state after arriving carries a gap worth
             // announcing. Later states were watched live: a caught-up
@@ -423,11 +440,20 @@ class Net {
 
   create(name: string): void {
     this.you = name;
+    this.spectating = false;
     this.send({ type: "create", name });
   }
 
+  /** Take a seat in the Peanut Gallery: watch a game with no name and no voice. */
+  watch(roomId: string): void {
+    this.you = null;
+    this.log = [];
+    this.send({ type: "watch", roomId: roomId.toUpperCase() });
+  }
+
   join(roomId: string, name: string): void {
     this.you = name;
+    this.spectating = false;
     this.roomIdPending = roomId.toUpperCase();
     const existing = this.seats.find(
       (s) => s.roomId === this.roomIdPending && s.name === name,
@@ -438,6 +464,7 @@ class Net {
   /** Sit back down at a remembered seat. */
   resume(seat: Seat): void {
     this.you = seat.name;
+    this.spectating = false;
     this.token = seat.token;
     this.roomIdPending = seat.roomId;
     this.log = [];
@@ -540,6 +567,7 @@ class Net {
 
   /** Forget the remembered seat and return to the lobby. */
   leave(): void {
+    this.send({ type: "leave" }); // detach server-side too (frees a gallery seat)
     localStorage.removeItem(SEAT_KEY);
     this.roomId = null;
     this.roomIdPending = null;
@@ -548,6 +576,8 @@ class Net {
     this.players = [];
     this.log = [];
     this.token = null;
+    this.spectating = false;
+    this.audience = 0;
   }
 
   start(expansion: boolean): void {