feat: keyboard HUD overlay shows pressed keys in video

Injects a persistent overlay in bottom-right corner that displays
currently held keys (e.g. "⌨ Space", "⌨ CTRL+C"). Makes keyboard
interactions visible in the recording for both human and AI reviewers.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

scripts/qa-record.ts

@@ -1610,6 +1610,65 @@ async function launchSessionAndLogin(
   await loginAsQaCi(page, opts.serverUrl)
   await sleep(1000)
 
+  // Inject keyboard HUD — shows pressed keys in bottom-right corner of video
+  await page.evaluate(() => {
+    const hud = document.createElement('div')
+    Object.assign(hud.style, {
+      position: 'fixed',
+      bottom: '8px',
+      right: '8px',
+      zIndex: '2147483647',
+      padding: '3px 8px',
+      borderRadius: '4px',
+      background: 'rgba(0,0,0,0.7)',
+      border: '1px solid rgba(120,200,255,0.4)',
+      color: 'rgba(120,200,255,0.9)',
+      fontSize: '11px',
+      fontFamily: 'monospace',
+      fontWeight: '500',
+      pointerEvents: 'none',
+      display: 'none',
+      whiteSpace: 'nowrap'
+    })
+    document.body.appendChild(hud)
+    const held = new Set<string>()
+    const update = () => {
+      if (held.size === 0) {
+        hud.style.display = 'none'
+      } else {
+        hud.style.display = 'block'
+        hud.textContent =
+          '⌨ ' +
+          [...held]
+            .map((k) =>
+              k === ' ' ? 'Space' : k.length === 1 ? k.toUpperCase() : k
+            )
+            .join('+')
+      }
+    }
+    document.addEventListener(
+      'keydown',
+      (e) => {
+        held.add(e.key)
+        update()
+      },
+      true
+    )
+    document.addEventListener(
+      'keyup',
+      (e) => {
+        held.delete(e.key)
+        update()
+      },
+      true
+    )
+    // Also clear on blur (tab switch etc)
+    window.addEventListener('blur', () => {
+      held.clear()
+      update()
+    })
+  })
+
   return { browser, context, page }
 }