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; }