fix: switch overlay dismiss — use display:none and named callback

[deploy: frontend]

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

crates/ericrfb-frontend/src/pages/console.ts

@@ -192,6 +192,8 @@ async function loadPortList() {
   } catch { /* port list optional */ }
 }
 
+let switchTimerId = 0
+
 function switchToPort(port: number) {
   selectedPort = port
   const hotkey = portHotkeys[port]
@@ -199,11 +201,11 @@ function switchToPort(port: number) {
 
   // Count pause tokens to calculate total switch duration
   const pauseCount = (hotkey.match(/\*/g) || []).length
-  const totalDelay = (pauseCount * keyPauseDuration) + 500 // +500ms buffer
+  const duration = Math.max((pauseCount * keyPauseDuration) + 500, 1000)
 
   // Suspend input and show overlay
   inputSuspended = true
-  const duration = Math.max(totalDelay, 1000)
+  if (switchTimerId) window.clearTimeout(switchTimerId)
   showSwitchOverlay(duration)
 
   // Send the hotkey sequence
@@ -220,12 +222,15 @@ function switchToPort(port: number) {
   }).catch(() => {})
 
   // Resume input after the switch completes
-  window.setTimeout(() => {
+  switchTimerId = window.setTimeout(dismissOverlay, duration)
-    inputSuspended = false
+}
-    const overlay = document.getElementById('switch-overlay')
+
-    if (overlay) overlay.hidden = true
+function dismissOverlay() {
-    document.getElementById('canvas')?.focus()
+  switchTimerId = 0
-  }, duration)
+  inputSuspended = false
+  const overlay = document.getElementById('switch-overlay')
+  if (overlay) overlay.style.display = 'none'
+  document.getElementById('canvas')?.focus()
 }
 
 function showSwitchOverlay(duration: number) {
@@ -236,6 +241,7 @@ function showSwitchOverlay(duration: number) {
     overlay.className = 'switch-overlay'
     document.querySelector('.console-wrap')?.appendChild(overlay)
   }
+  overlay.style.display = ''
   overlay.innerHTML = `
     <div class="switch-overlay-content">
       <div class="switch-spinner"></div>
@@ -243,14 +249,13 @@ function showSwitchOverlay(duration: number) {
       <div class="switch-timer" id="switch-timer"></div>
     </div>
   `
-  overlay.hidden = false
 
   // Countdown timer
-  const start = Date.now()
+  const endTime = Date.now() + duration
-  const timerEl = document.getElementById('switch-timer')
   const tick = () => {
-    if (!timerEl || overlay!.hidden) return
+    const timerEl = document.getElementById('switch-timer')
-    const remaining = Math.max(0, duration - (Date.now() - start))
+    if (!timerEl) return
+    const remaining = Math.max(0, endTime - Date.now())
     timerEl.textContent = `${(remaining / 1000).toFixed(1)}s`
     if (remaining > 0) requestAnimationFrame(tick)
   }