Improve microphone permission UX: add Dev Log, re-request flow, active Voice Input highlighting, and Puppeteer permission-check script

index.html

@@ -43,6 +43,8 @@
           <option value="kn">Kannada</option>
         </select>
       </label>
+
+      <button id="swapBtn" class="swap-btn">↔ Swap</button>
     </div>
 
     <div class="panel">
@@ -52,15 +54,30 @@
         <button id="speakBtn">🔊 Speak</button>
         <button id="clearBtn">🧹 Clear</button>
       </div>
+      <div class="microphone-hint">Allow microphone access when prompted to use voice input.</div>
+      <div id="ttsNotice" class="tts-notice">Select a language and click Speak to use browser or server TTS.</div>
+      <div class="panel-footer">
+        <span id="charCount">0</span> characters
+        <span id="voiceStatus" class="voice-status"></span>
+      </div>
       <div id="status" class="status">Ready</div>
     </div>
 
     <div class="panel output">
-      <h2>Translation</h2>
+      <div class="output-header">
+        <h2>Translation</h2>
+        <button id="copyBtn">📋 Copy</button>
+      </div>
       <div id="translatedText">Translation will appear here...</div>
+      <div id="copyFeedback" class="copy-feedback"></div>
     </div>
   </div>
 
+  <div id="devLog" class="dev-log">
+    <div class="dev-log-header">Dev Log <button id="clearLogBtn" class="clear-log">Clear</button></div>
+    <div id="devLogBody" class="dev-log-body">(permission-state and debug messages appear here)</div>
+  </div>
+
   <script src="script.js"></script>
 </body>
 </html>