privateboard 0.1.11 → 0.1.13

package/public/room-settings.js

@@ -166,6 +166,7 @@
     intensity: "sharp",
     style: "auto",
     incognito: false,
+    voteTrigger: "auto",
     history: [
       { ts: "Apr 28 · 21:08", who: "system", kind: "open",   label: "room opened" }
     ]
@@ -173,7 +174,7 @@
 
   // Staged changes layered on top of ROOM_STATE — committed only when
   // the user clicks Confirm. The shape mirrors the room config keys.
-  let STAGED = { mode: null, intensity: null, incognito: null };
+  let STAGED = { mode: null, intensity: null, incognito: null, voteTrigger: null };
   // Snapshot of ROOM_STATE.members at overlay-open time. The members
   // array itself is mutated optimistically by add/removeMember; this
   // baseline lets us detect "dirty" by diffing and lets us roll back
@@ -196,11 +197,12 @@
       STAGED.mode !== null ||
       STAGED.intensity !== null ||
       STAGED.incognito !== null ||
+      STAGED.voteTrigger !== null ||
       membersDirty()
     );
   }
   function resetStaged() {
-    STAGED = { mode: null, intensity: null, incognito: null };
+    STAGED = { mode: null, intensity: null, incognito: null, voteTrigger: null };
   }
 
   const MODES = [
@@ -362,6 +364,29 @@
                 </label>
               </div>
 
+              <div class="rs-config-row">
+                <div class="rs-config-row-label">
+                  <span class="rs-config-row-name">Vote phase</span>
+                  <span class="rs-config-row-hint">when the chair opens the round-end vote</span>
+                </div>
+                <div class="rs-vote-trigger-grp" role="radiogroup" aria-label="Vote phase trigger">
+                  <label class="rs-radio-row" data-rs-vote-trigger-row="auto">
+                    <input type="radio" name="rs-vote-trigger" value="auto" data-rs-vote-trigger-input>
+                    <span class="rs-radio-label">
+                      <span class="rs-radio-name">Auto</span>
+                      <span class="rs-radio-desc">chair drops the vote prompt at every round wrap</span>
+                    </span>
+                  </label>
+                  <label class="rs-radio-row" data-rs-vote-trigger-row="manual">
+                    <input type="radio" name="rs-vote-trigger" value="manual" data-rs-vote-trigger-input>
+                    <span class="rs-radio-label">
+                      <span class="rs-radio-name">Manual</span>
+                      <span class="rs-radio-desc">you trigger the vote with the bottom-bar button</span>
+                    </span>
+                  </label>
+                </div>
+              </div>
+
             </div>
           </div>
 
@@ -544,6 +569,16 @@
     checkbox.checked = !!effective;
   }
 
+  function renderVoteTrigger() {
+    const eff = STAGED.voteTrigger !== null ? STAGED.voteTrigger : ROOM_STATE.voteTrigger;
+    modal.querySelectorAll("[data-rs-vote-trigger-input]").forEach((input) => {
+      input.checked = input.value === eff;
+    });
+    modal.querySelectorAll("[data-rs-vote-trigger-row]").forEach((row) => {
+      row.classList.toggle("active", row.dataset.rsVoteTriggerRow === eff);
+    });
+  }
+
   function renderIntensity() {
     // Intensity is now a 3-chip row (Calm / Sharp / Terse) instead of
     // a slider · highlight the active chip. The hint line above shows
@@ -602,6 +637,7 @@
     ROOM_STATE.mode     = room.mode || "constructive";
     ROOM_STATE.intensity = room.intensity || "sharp";
     ROOM_STATE.incognito = room.incognito === true;
+    ROOM_STATE.voteTrigger = room.voteTrigger === "manual" ? "manual" : "auto";
     if (Array.isArray(app.currentMembers) && app.currentMembers.length) {
       ROOM_STATE.members = app.currentMembers.map((a) => a.id);
     }
@@ -627,6 +663,7 @@
     renderModes();
     renderIntensity();
     renderIncognito();
+    renderVoteTrigger();
     renderConfirmState();
     closeCastPicker();
     overlay.classList.add("open");
@@ -738,16 +775,23 @@
     renderIncognito();
     renderConfirmState();
   }
+  function stageVoteTrigger(next) {
+    const v = next === "manual" ? "manual" : "auto";
+    STAGED.voteTrigger = v === ROOM_STATE.voteTrigger ? null : v;
+    renderVoteTrigger();
+    renderConfirmState();
+  }
 
   /** Push staged config + member changes to the backend. */
   async function commit() {
     if (!isDirty()) { close(); return; }
 
-    // Build the settings patch (mode / intensity / incognito).
+    // Build the settings patch (mode / intensity / incognito / voteTrigger).
     const patch = {};
-    if (STAGED.mode !== null)      patch.mode = STAGED.mode;
-    if (STAGED.intensity !== null) patch.intensity = STAGED.intensity;
-    if (STAGED.incognito !== null) patch.incognito = STAGED.incognito;
+    if (STAGED.mode !== null)         patch.mode = STAGED.mode;
+    if (STAGED.intensity !== null)    patch.intensity = STAGED.intensity;
+    if (STAGED.incognito !== null)    patch.incognito = STAGED.incognito;
+    if (STAGED.voteTrigger !== null)  patch.voteTrigger = STAGED.voteTrigger;
 
     const btn = modal.querySelector("[data-rs-confirm]");
     const status = modal.querySelector("[data-rs-status]");
@@ -793,11 +837,13 @@
         mode: ROOM_STATE.mode,
         intensity: ROOM_STATE.intensity,
         incognito: ROOM_STATE.incognito,
+        voteTrigger: ROOM_STATE.voteTrigger,
       };
       const after = {
         mode: patch.mode ?? ROOM_STATE.mode,
         intensity: patch.intensity ?? ROOM_STATE.intensity,
         incognito: typeof patch.incognito === "boolean" ? patch.incognito : ROOM_STATE.incognito,
+        voteTrigger: patch.voteTrigger ?? ROOM_STATE.voteTrigger,
       };
       Object.assign(ROOM_STATE, after);
       if (STAGED.mode !== null) {
@@ -812,6 +858,19 @@
         logEvent({ kind: "incognito", before: before.incognito, after: after.incognito,
           label: `memory: ${before.incognito ? "incognito" : "default"} → ${after.incognito ? "incognito" : "default"}` });
       }
+      if (STAGED.voteTrigger !== null) {
+        logEvent({ kind: "voteTrigger", before: before.voteTrigger, after: after.voteTrigger,
+          label: `vote phase: ${before.voteTrigger} → ${after.voteTrigger}` });
+      }
+      // Mirror the new voteTrigger onto the live app.currentRoom so the
+      // bottom-bar manual button shows/hides immediately without
+      // waiting for an SSE round-trip.
+      if (STAGED.voteTrigger !== null && window.app && window.app.currentRoom) {
+        window.app.currentRoom.voteTrigger = after.voteTrigger;
+        if (typeof window.app.refreshManualVoteButton === "function") {
+          window.app.refreshManualVoteButton();
+        }
+      }
       resetStaged();
       if (btn) { btn.disabled = false; btn.textContent = "[ Confirm ]"; }
       close();
@@ -1040,6 +1099,13 @@
         setTimeout(() => stageIncognito(incBox.checked), 0);
         return;
       }
+      // Vote trigger radio · same defer-and-read-state pattern as
+      // incognito so the native input flip resolves before we stage.
+      const vtInput = e.target.closest("[data-rs-vote-trigger-input]");
+      if (vtInput) {
+        setTimeout(() => stageVoteTrigger(vtInput.value), 0);
+        return;
+      }
     }, true);
 
     // Pointer-driven drag for the intensity slider (mouse + touch + stylus).

package/public/themes.css

@@ -315,6 +315,44 @@
   --magenta: #C5839E;
 }
 
+/* ─── NINTENDO · 8-bit NES palette · Mario red on dark sky ───
+       Built from the classic NES title-screen vocabulary: deep
+       night-sky background, pure-white NES title text, Mario red
+       as the primary accent (the slot called `--lime*` in this
+       codebase), coin-block gold for amber, fire-flower red for
+       warnings, and sky-cloud cyan for the moderator accent. Every
+       swatch is high-saturation / high-contrast in the NES family —
+       no muted desaturated tones (those don't belong in 8-bit). */
+:root[data-theme="nintendo"] {
+  --bg: #181820;
+  --panel: #22222C;
+  --panel-2: #2A2A38;
+  --panel-3: #34344A;
+  --hi: #44445A;
+
+  --line: #2C2C3A;
+  --line-bright: #44445A;
+  --line-strong: #5C5C72;
+
+  --text: #FCFCFC;
+  --text-soft: #C8C8D8;
+  --text-dim: #8E8EA0;
+  --text-faint: #5C5C70;
+
+  /* Primary accent · Mario red. Token names stay `--lime*` so every
+     callsite that already references the primary keeps working. */
+  --lime: #E60012;
+  --lime-deep: #A40009;
+  --lime-dim: #4F0007;
+
+  --amber: #FBC000;        /* coin / question block */
+  --amber-dim: #6B4D00;
+  --red: #FC4438;          /* fire flower */
+  --red-dim: #6E1A14;
+  --cyan: #5BC0EB;         /* Mario sky / chair moderator */
+  --magenta: #FC74FC;      /* princess pink / power-up */
+}
+
 /* ─── REGENT · gold-on-warm-dark · the eastwood twin
        The same warm dark palette as the default eastwood, with the
        primary forest-green accent swapped for the warm gold used by

package/public/typing-sfx.js

@@ -142,6 +142,92 @@
     noise.stop(t0 + 0.06);
   }
 
+  /** Speaker-change cue · fires once when the round-table stage flips
+   *  to a new speaker (idle → A, A → B). A short triangle-wave swoop
+   *  at ~660 → 990 Hz, decaying over ~220ms — distinct from the
+   *  keyboard-click texture of `tick()` so the ear reads it as a
+   *  scene transition rather than typing. Same enabled-flag and
+   *  AudioContext as tick · the user-settings toggle controls both. */
+  function speakerChange() {
+    if (!_enabled) return;
+    if (document.visibilityState !== "visible") return;
+    const ctx = ensureContext();
+    if (!ctx) return;
+    const t0 = ctx.currentTime;
+    const dur = 0.22;
+    const osc = ctx.createOscillator();
+    osc.type = "triangle";
+    // Brief upward sweep · 660Hz → 990Hz across the first 70ms, then
+    // hold while the gain envelope fades. Triangle waveform reads as
+    // softer / more "chime"-like than sine for this register.
+    osc.frequency.setValueAtTime(660, t0);
+    osc.frequency.exponentialRampToValueAtTime(990, t0 + 0.07);
+    const gain = ctx.createGain();
+    gain.gain.setValueAtTime(0.0001, t0);
+    gain.gain.exponentialRampToValueAtTime(0.085, t0 + 0.01);
+    gain.gain.exponentialRampToValueAtTime(0.0001, t0 + dur);
+    osc.connect(gain).connect(ctx.destination);
+    osc.start(t0);
+    osc.stop(t0 + dur);
+  }
+
+  /** Chair gavel cue · fires before chair voice playback begins in
+   *  voice mode. Two-strike wooden knock that reads as "court is in
+   *  session — listen up." Designed by ear:
+   *    · Layer 1 · low sine ~190 Hz, 1ms attack + 220ms decay,
+   *      gives the bass "thunk" of wood on wood.
+   *    · Layer 2 · filtered noise burst at ~3.2 kHz, 30ms total,
+   *      provides the sharp percussive transient.
+   *    · Two strikes 160ms apart so the ear hears a deliberate
+   *      "knock-knock" pattern (single strike read as a glitch /
+   *      typewriter chime in early prototyping). */
+  function gavel() {
+    if (!_enabled) return;
+    if (document.visibilityState !== "visible") return;
+    const ctx = ensureContext();
+    if (!ctx) return;
+    const t0 = ctx.currentTime;
+    const strikes = [0, 0.16];
+    for (const offset of strikes) {
+      const t = t0 + offset;
+      // Body resonance · low sine, fat envelope.
+      const body = ctx.createOscillator();
+      body.type = "sine";
+      body.frequency.setValueAtTime(220, t);
+      body.frequency.exponentialRampToValueAtTime(140, t + 0.18);
+      const bodyGain = ctx.createGain();
+      bodyGain.gain.setValueAtTime(0.0001, t);
+      bodyGain.gain.exponentialRampToValueAtTime(0.18, t + 0.005);
+      bodyGain.gain.exponentialRampToValueAtTime(0.0001, t + 0.22);
+      body.connect(bodyGain).connect(ctx.destination);
+      body.start(t);
+      body.stop(t + 0.25);
+      // Transient click · 30ms filtered noise burst.
+      const noiseBuf = ctx.createBuffer(
+        1,
+        Math.max(1, Math.floor(ctx.sampleRate * 0.03)),
+        ctx.sampleRate,
+      );
+      const noiseData = noiseBuf.getChannelData(0);
+      for (let i = 0; i < noiseData.length; i++) {
+        noiseData[i] = (Math.random() * 2 - 1) * (1 - i / noiseData.length);
+      }
+      const noise = ctx.createBufferSource();
+      noise.buffer = noiseBuf;
+      const bp = ctx.createBiquadFilter();
+      bp.type = "bandpass";
+      bp.frequency.value = 3200;
+      bp.Q.value = 0.8;
+      const noiseGain = ctx.createGain();
+      noiseGain.gain.setValueAtTime(0.0001, t);
+      noiseGain.gain.exponentialRampToValueAtTime(0.10, t + 0.003);
+      noiseGain.gain.exponentialRampToValueAtTime(0.0001, t + 0.035);
+      noise.connect(bp).connect(noiseGain).connect(ctx.destination);
+      noise.start(t);
+      noise.stop(t + 0.05);
+    }
+  }
+
   function setEnabled(on) {
     _enabled = !!on;
     writeEnabled(_enabled);
@@ -154,5 +240,5 @@
 
   // Public surface · attached to window so app.js (and the
   // user-settings toggle) can reach it without an import.
-  window.boardroomTypingSfx = { tick, setEnabled, isEnabled };
+  window.boardroomTypingSfx = { tick, speakerChange, gavel, setEnabled, isEnabled };
 })();

package/public/user-settings.js

@@ -40,7 +40,9 @@
     { slug: "nebirhos",    name: "Nebirhos",    desc: "teal · warm orange highlights",
       swatches: ["#0A1414","#11201F","#5EB1A6","#357770","#DD9258","#D87060","#6FBEC2","#B8D4D0"] },
     { slug: "wedisagree",  name: "We Disagree", desc: "argumentative orange · subtle green",
-      swatches: ["#14110E","#1F1A14","#DD7B40","#A8521E","#E6B872","#E26060","#6FB28A","#D8CBBC"] }
+      swatches: ["#14110E","#1F1A14","#DD7B40","#A8521E","#E6B872","#E26060","#6FB28A","#D8CBBC"] },
+    { slug: "nintendo",    name: "8-bit",       desc: "NES palette · Mario red · coin gold · sky cyan",
+      swatches: ["#181820","#22222C","#E60012","#A40009","#FBC000","#FC4438","#5BC0EB","#FCFCFC"] }
   ];
 
   const PROVIDERS = [

package/public/voice-replay.css

@@ -17,7 +17,14 @@
 .voice-replay-overlay {
   position: fixed;
   right: 24px;
-  bottom: 24px;
+  /* The adjourned-bar (where Voice Replay is launched from) is
+     `min-height: 44px` and pinned to the bottom of the room view.
+     `bottom: 24px` would overlap it; lift the panel to clear the
+     bar with a small gap so the user always reads the bar's
+     [Export / Voice Replay / Convene Follow-up] actions even while
+     the player is open. Same offset for expanded + collapsed so
+     the title bar sits flush above the bottom bar when shrunk. */
+  bottom: 56px;
   z-index: 9300;
   width: 380px;
   max-width: calc(100vw - 32px);
@@ -56,6 +63,12 @@
   font-size: 13px;
   letter-spacing: 0;
 }
+.vr-head-actions {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+}
+.vr-collapse,
 .vr-close {
   width: 22px;
   height: 22px;
@@ -68,13 +81,69 @@
   font-size: 11px;
   cursor: pointer;
   transition: border-color 0.12s, color 0.12s;
+  font-family: var(--mono);
+  line-height: 1;
 }
+.vr-collapse { font-size: 14px; padding-bottom: 4px; }
+.vr-collapse:hover,
 .vr-close:hover { border-color: var(--lime, #6FB572); color: var(--lime, #6FB572); }
 
 .vr-body {
   padding: 14px 14px 14px;
 }
 
+/* Collapsed posture · the entire floating panel hides, freeing
+   the chat / round-table stage of any overlap. The user re-opens
+   by clicking the inline `.vr-inline-expand` pill that gets
+   slotted into the adjourned-bar's action group right next to the
+   Voice Replay button. Audio keeps playing in the background. */
+.voice-replay-overlay.is-collapsed {
+  display: none;
+}
+
+/* Inline replay control group · three buttons (Next / Pause /
+   Expand) mounted into the adjourned-bar's action group right
+   after Voice Replay when the floating panel is collapsed. Each
+   button inherits `.ghost-btn`'s panel + hairline chrome so the
+   group reads as a sibling of Export / Voice Replay / Convene
+   Follow-up. The Expand button carries a small lime pulsing dot
+   so the user can locate "what's still active" at a glance. */
+.vr-inline-group {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+}
+/* Icon-only ghost-btns · all the visual chrome (panel bg, hairline
+   border, mono font, uppercase, hover lime) comes from `.ghost-btn`
+   in index.html. We don't override font-size / color / padding so
+   the inline group reads as a true sibling of Export / Voice
+   Replay / Convene Follow-up — just with bracket-wrapped glyphs
+   instead of trailing labels. The Expand button gets a small lime
+   pulsing dot tagged on the end so the user can locate "what's
+   still active" at a glance. */
+.vr-inline-btn .vib-icon {
+  display: block; /* drop the inline baseline gap so the SVG centres */
+}
+.vr-inline-expand {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+}
+.vr-inline-expand .vie-pulse {
+  width: 5px;
+  height: 5px;
+  border-radius: 50%;
+  background: var(--lime, #6FB572);
+  animation: vr-inline-pulse 1.6s ease-in-out infinite;
+}
+@keyframes vr-inline-pulse {
+  0%, 100% { opacity: 1; }
+  50%      { opacity: 0.35; }
+}
+@media (prefers-reduced-motion: reduce) {
+  .vr-inline-expand .vie-pulse { animation: none; opacity: 0.7; }
+}
+
 /* ─── Loading row ───
    Centered both axes so the loading state reads as a focused
    placeholder, not a left-pinned debug log. The dots row sits