The host may let the Peanut Gallery talk

A gallery line wears the eye and a name that no wizard at the table
holds; the host opens or hushes it from the lobby or the mast, on the
ledger, and the gallery is reined per address.

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01Jm2auWk6RP71CjaAb4FMoG

packages/web/src/App.svelte

@@ -1872,6 +1872,24 @@
   </form>
 {/snippet}
 
+{#snippet gallerySayBox(extra: string)}
+  <form class="say-box gallery-say {extra}" onsubmit={(e) => {
+    e.preventDefault();
+    const t = chatDraft.trim();
+    const who = name.trim();
+    if (!t || !who) return;
+    setPref("wizardName", who);
+    if (net.sendChat(t, who)) chatDraft = "";
+    else net.flash("Not sent — the table is out of reach; your words wait in the box");
+  }}>
+    {#if net.chatPending}<span class="sending">sending…</span>{/if}
+    <input class="say-name" bind:value={name} maxlength="20" placeholder="your name" aria-label="your name in the gallery" />
+    <input class="say-input" bind:value={chatDraft} maxlength="300"
+      placeholder="say something from the gallery…" aria-label="gallery talk" />
+    <button class="stamp tiny" type="submit" disabled={!chatDraft.trim() || !name.trim()}>say</button>
+  </form>
+{/snippet}
+
 
 <svelte:window onkeydown={onBoardKey} />
 
@@ -1909,8 +1927,12 @@
         onclick={copyInvite}>
         {#if net.spectating}watching{:else}<span class="mast-invite">invite friends · </span>room{/if} <b>{net.roomId}</b>{inviteCopied ? " — link copied!" : ""}
       </button>
-      {#if net.audience > 0}
-        <span class="mast-audience" title="the Peanut Gallery">👁 {net.audience}</span>
+      {#if net.you === net.hostId && net.roomId && (net.audience > 0 || net.galleryTalk)}
+        <button class="mast-audience as-button" class:talking={net.galleryTalk}
+          title={net.galleryTalk ? "the Peanut Gallery may talk — click to hush it" : "the Peanut Gallery listens — click to let it talk"}
+          onclick={() => net.setGalleryTalk(!net.galleryTalk)}>👁 {net.audience}{net.galleryTalk ? " 💬" : ""}</button>
+      {:else if net.audience > 0}
+        <span class="mast-audience" title={net.galleryTalk ? "the Peanut Gallery, allowed to talk" : "the Peanut Gallery"}>👁 {net.audience}{net.galleryTalk ? " 💬" : ""}</span>
       {/if}
       {#if !net.spectating}
         <button class="mast-leave" onclick={() => net.requestTransferCode()}>transfer seat</button>
@@ -2798,6 +2820,18 @@
                 Add computer wizard</button>
             </div>
           {/if}
+        {:else}
+          {@const galleryTalkLines = net.log.filter((l) => l.text.startsWith("\u{1F4AC}")).slice(-6)}
+          <div class="lobby-talk">
+            {#each galleryTalkLines as line, i (i)}
+              <div class="lobby-line">{line.text}</div>
+            {/each}
+            {#if net.galleryTalk}
+              {@render gallerySayBox("lobby-say")}
+            {:else}
+              <p class="waiting">👁 The gallery listens; the host has not opened its mouth.</p>
+            {/if}
+          </div>
         {/if}
 
         {#if net.you === net.hostId}
@@ -2805,6 +2839,10 @@
             <input type="checkbox" bind:checked={withExpansion} />
             Include Expansion Set #1 — monsters &amp; wands
           </label>
+          <label class="check option">
+            <input type="checkbox" checked={net.galleryTalk} onchange={(e) => net.setGalleryTalk(e.currentTarget.checked)} />
+            Let the Peanut Gallery talk at the table
+          </label>
           <div class="ready">
             {#if net.players.length < 2}
               <div class="ready-note">Waiting for one more wizard</div>
@@ -3450,6 +3488,8 @@
         {/if}
         {#if !local.active && net.roomId && !net.spectating}
           {@render sayBox("", true)}
+        {:else if net.spectating && net.galleryTalk}
+          {@render gallerySayBox("")}
         {/if}
       </aside>
 
@@ -3781,6 +3821,9 @@
     padding: 0 0.3rem;
   }
   .mast-audience { font-size: 0.85rem; color: #a49c86; white-space: nowrap; }
+  .mast-audience.as-button { background: none; border: 0; padding: 0; cursor: pointer; font: inherit; font-size: 0.85rem; }
+  .mast-audience.talking { color: #6b5a41; }
+  .gallery-say .say-name { width: 7rem; flex: 0 0 auto; }
   .mind-read { max-width: min(92vw, 46rem); }
   .caution-reason { padding: 0.15rem 0; }
   .caution-reason + .caution-reason { border-top: 1px dotted #4a4536; }

packages/web/src/net.svelte.ts

@@ -385,6 +385,8 @@ class Net {
   keeper = $state<string | null>(null);
   /** The keeper's time zone (IANA), for telling a caller what hour it is there. */
   keeperZone = $state<string | null>(null);
+  /** The host lets the Peanut Gallery talk. */
+  galleryTalk = $state(false);
   view = $state<GameView | null>(null);
   log = $state<LogLine[]>([]);
   error = $state<string | null>(null);
@@ -544,6 +546,7 @@ class Net {
         this.challenge = msg.challenge ?? null;
         if (typeof msg.keeper === "string") this.keeper = msg.keeper;
         if (typeof msg.keeperZone === "string") this.keeperZone = msg.keeperZone;
+        this.galleryTalk = msg.galleryTalk === true;
         if (this.you && this.token) {
           const seat: Seat = { name: this.you, roomId: msg.roomId, token: this.token };
           localStorage.setItem(SEAT_KEY, JSON.stringify(seat));
@@ -656,7 +659,7 @@ class Net {
         this.roomIdPending = msg.roomId;
         break;
       case "chat": {
-        if (msg.player === this.you && this.chatPending === msg.text) this.chatPending = null;
+        if ((msg.player === this.you || this.spectating) && this.chatPending === msg.text) this.chatPending = null;
         this.lastTalkBy = msg.player;
         this.log = [...this.log, { text: `\u{1F4AC} ${msg.player}: ${msg.text}`, turn: null, notable: false, actor: msg.player }];
         this.chatCount += 1;
@@ -834,12 +837,17 @@ class Net {
   }
 
   /** True when the line left; the composer keeps it otherwise. */
-  sendChat(text: string): boolean {
-    if (!this.send({ type: "chat", text })) return false;
+  sendChat(text: string, galleryName?: string): boolean {
+    if (!this.send(galleryName ? { type: "chat", text, name: galleryName } : { type: "chat", text })) return false;
     this.chatPending = text;
     return true;
   }
 
+  /** Host only: let the Peanut Gallery talk at this table, or hush it. */
+  setGalleryTalk(on: boolean): void {
+    this.send({ type: "galleryTalk", on });
+  }
+
   /** Call the keeper of this site to the table: a seat is held, and their phone rings. */
   challengeKeeper(): void {
     this.send({ type: "challengeKeeper" });