Frontend Worker

Write Vitest unit tests BEFORE implementation:

• For input mapping: test scancode conversion (JS keycode -> QEMU scancode) for all key types
• For display: test pixel format conversion (BGRX -> RGBA), resolution handling
• For persistence: test storage layer (save/load/wipe operations)
• For controls: test state machine (button enabled/disabled logic)
• For error handling: test each error scenario produces correct message

Run tests — they MUST fail initially (red). Then implement to make them pass (green).

3. Implement

Follow the feature's expectedBehavior precisely. Key patterns:

For Emscripten integration:

• Load Wasm module using the generated JS glue (ES6 module import)
• Configure Module object with arguments, canvas reference, and callbacks
• Handle initialization: download progress -> Wasm compilation -> module ready
• QEMU args passed via Module['arguments'] array
• Set Module['mainScriptUrlOrBlob'] for Web Worker URL
• Error handling: catch CompileError, LinkError, RangeError (OOM), Worker creation failure

For display rendering:

• Use setInterval at ~30ms (NOT requestAnimationFrame — rAF is hijacked by PROXY_TO_PTHREAD)
• Poll framebuffer via exported functions: Module._qemu_display_data(), _qemu_display_width(), _qemu_display_height()
• Read framebuffer from Wasm memory: new Uint8ClampedArray(Module.HEAPU8.buffer, fbPtr, width * height * 4)
• BGRX -> RGBA conversion: swap byte 0 (B) and byte 2 (R) for each pixel
• Handle VGA mode switches: check width/height changes, resize canvas
• Show loading indicator until first non-blank frame

For keyboard input:

• Capture keydown and keyup on the canvas container
• Map KeyboardEvent.code to QEMU scancodes (PS/2 Set 1)
• Call Module._qemu_input_send_key(scancode, isDown ? 1 : 0)
• Call preventDefault() for F-keys, Escape, and other interceptable shortcuts
• Only forward when canvas is focused (check document.activeElement)
• On focus loss (blur event), release all currently held keys
• Support key repeat: forward repeated keydown events as-is

For mouse input:

• Capture mousemove, mousedown, mouseup on canvas
• Convert to relative movement deltas
• Call Module._qemu_input_send_mouse(dx, dy, buttons)
• Consider Pointer Lock API for accurate relative input

For controls UI:

• Start button: disabled until Module ready; on click, start QEMU; disable while running
• Reboot button: enabled only while running; show confirmation dialog; reset QEMU state
• Debug panel: toggleable div showing timestamped log entries; capture console output
• Fullscreen: use Fullscreen API on canvas container; provide exit button

For persistence (OPFS/IndexedDB):

• Check OPFS availability: navigator.storage.getDirectory()
• Fallback to IndexedDB if OPFS unavailable
• Create disk image on first visit; detect existing image on return
• Resume choice UI: show dialog with "Resume" / "Start fresh" when saved state found
• Auto-save: periodic flush (every 30 seconds) + flush on beforeunload
• Wipe & Reset: clear storage, recreate empty disk, restart
• Request navigator.storage.persist() to reduce eviction risk

For COOP/COEP headers (Vite config):

// vite.config.ts