From 751ee05822d7784b4ee18d08f29a1322aa9bb545 Mon Sep 17 00:00:00 2001
From: "russell@unturf.com" <russell@unturf.com>
Date: Sun, 31 May 2026 11:52:38 -0400
Subject: [PATCH] zebra-report: zebra-spaces shows mic + music-mode controls
 before mic permission

---
 zebra-report/zebra-spaces.html | 19 +++++++++----------
 1 file changed, 9 insertions(+), 10 deletions(-)

diff --git a/zebra-report/zebra-spaces.html b/zebra-report/zebra-spaces.html
index 70ab301..c8df05f 100644
--- a/zebra-report/zebra-spaces.html
+++ b/zebra-report/zebra-spaces.html
@@ -153,12 +153,12 @@
     <button id="btn-mute" disabled>mute</button>
     <button id="btn-leave" disabled>leave</button>
   </div>
-  <div class="row" id="row-mic-controls" style="display:none">
+  <div class="row" id="row-mic-controls">
     <label class="note" for="mic-select" style="flex:0 0 3rem">input</label>
-    <select id="mic-select" title="audio input device"><option value="">default microphone</option></select>
+    <select id="mic-select" title="audio input device — applies once you have the mic"><option value="">default microphone</option></select>
   </div>
-  <div class="row" id="row-music-mode" style="display:none">
-    <label class="note"><input type="checkbox" id="music-mode"> music mode — raw mic, no echo/noise cancellation</label>
+  <div class="row" id="row-music-mode">
+    <label class="note"><input type="checkbox" id="music-mode"> music mode — raw mic, no echo/noise cancellation (for playing audio through it)</label>
   </div>
   <p class="note">
     everyone joins as a listener. host (first to enter) can invite listeners to the
@@ -721,18 +721,17 @@ async function onRoleChanged(prev, next){
   updateRoleUI();
 }
 async function ensureMicAndUI(){
+  /* mic input + music-mode rows are always visible; here we just grant the
+   * mic and unblock mute. Toggling music-mode before getting a mic is fine —
+   * micConstraints() reads the live `musicMode` flag whenever we re-acquire. */
   try {
     await getMic(); await refreshMicList();
-    $('row-mic-controls').style.display = 'flex';
-    $('row-music-mode').style.display = 'flex';
     $('btn-mute').disabled = false;
   } catch(e){ logLine('err','mic blocked: '+e.message); }
   updateRoleUI();
 }
 function dropMic(){
   if (micStream){ micStream.getTracks().forEach(t=>t.stop()); micStream = null; }
-  $('row-mic-controls').style.display = 'none';
-  $('row-music-mode').style.display = 'none';
   $('btn-mute').disabled = true;
 }
 function updateRoleUI(){
@@ -983,8 +982,8 @@ logLine('', 'ready — pick a handle, type a rendezvous code, enter the space');
 
 <footer style="max-width:720px;margin:2.2rem auto 0;font-size:0.65rem;color:#999;line-height:1.7;word-break:break-all;font-family:monospace">
   <span id="pi-seal" style="color:#777;cursor:default;user-select:none" title="">page integrity</span> &nbsp;·&nbsp; built <span class="stamp-date">2026-05-31</span><br>
-  md5 <span class="stamp-md5">7bfab8fb57fc87276b5add51ee2adc21</span><br>
-  sha256 <span class="stamp-sha">be0d788fc09365001429e4cf69340117f9583486d713101fd45999520184469f</span><br>
+  md5 <span class="stamp-md5">44e670719acc0c4214b0a3c880c15328</span><br>
+  sha256 <span class="stamp-sha">909f998b1e659881b4d99f63613d6024879a3a36ba51dc5507c7e4e2d1698199</span><br>
   <span style="color:#bbb">hashes are of this page with these two fields zeroed — to verify, blank them and re-hash</span><br>
   <span style="color:#bbb">one self-contained file — <strong>save a copy</strong> and verify against these hashes; point at your own servers with ?signal= and ?turncred=, or <a href="host-your-own.html" style="color:#999">host your own community</a></span>
 </footer>