yaze/docs/internal/agents/archive/wasm-planning-2025/wasm-web-features-roadmap.md

WASM Web Features Roadmap

This document captures planned features for the browser-based yaze editor.

Foundation (Completed)

The following infrastructure is in place:

• Phase 1: File System Layer (WasmStorage, WasmFileDialog) - IndexedDB storage
• Phase 2: Error Handling (WasmErrorHandler) - Browser UI integration
• Phase 3: Progressive Loading (WasmLoadingManager) - Cancellable loading with progress
• Phase 4: Offline Support (service-worker.js, manifest.json) - PWA capabilities
• Phase 5: AI Integration (BrowserAIService, WasmSecureStorage) - WebLLM ready
• Phase 6: Local Storage (WasmSettings, WasmAutosave) - Preferences persistence
• Phase 7: Web Workers (WasmWorkerPool) - Background task processing
• Phase 8: WebAudio (WasmAudio) - SPC700 audio playback

---

Phase 9: Enhanced File Handling

9.1 Drag & Drop ROM Loading

• Status: Planned
• Priority: High
• Description: Enhanced drag-and-drop interface for ROM files
• Features:
  • Visual drop zone with hover effects
  • File type validation before processing
  • Preview panel showing ROM metadata
  • Multiple file support (load ROM + patch together)
• Files: src/app/platform/wasm/wasm_drop_handler.{h,cc}, src/web/drop_zone.{js,css}

9.2 Export Options

• Status: Planned
• Priority: High
• Description: Export modifications as patches instead of full ROMs
• Features:
  • BPS patch generation (standard format)
  • IPS patch generation (legacy support)
  • UPS patch generation (alternative)
  • Patch preview showing changed bytes
  • Direct download or save to IndexedDB
• Files: src/app/platform/wasm/wasm_patch_export.{h,cc}

---

Phase 10: Collaboration

10.1 Real-time Collaboration

• Status: Planned
• Priority: High
• Description: Multi-user editing via WebSocket
• Features:
  • Session creation/joining with room codes
  • User presence indicators (cursors, selections)
  • Change synchronization via operational transforms
  • Chat/comments sidebar
  • Permission levels (owner, editor, viewer)
• Files: src/app/platform/wasm/wasm_collaboration.{h,cc}, src/web/collaboration_ui.{js,css}
• Dependencies: EmscriptenWebSocket (completed)

10.2 ShareLink Generation

• Status: Future
• Priority: Medium
• Description: Create shareable URLs with embedded patches
• Features:
  • Base64-encoded diff in URL hash
  • Short URL generation via service
  • QR code generation for mobile sharing

10.3 Comment Annotations

• Status: Future
• Priority: Low
• Description: Add notes to map locations/rooms
• Features:
  • Pin comments to coordinates
  • Threaded discussions
  • Export annotations as JSON

---

Phase 11: Browser-Specific Enhancements

11.1 Keyboard Shortcut Overlay

• Status: Future
• Priority: Medium
• Description: Help panel showing all keyboard shortcuts
• Features:
  • Toggle with ? key
  • Context-aware (shows relevant shortcuts for current editor)
  • Searchable

11.2 Touch Support

• Status: Future
• Priority: Medium
• Description: Touch gestures for tablet/mobile browsers
• Features:
  • Pinch to zoom
  • Two-finger pan
  • Long press for context menu
  • Touch-friendly toolbar

11.3 Fullscreen Mode

• Status: Future
• Priority: Low
• Description: Dedicated fullscreen API integration
• Features:
  • F11 toggle
  • Auto-hide toolbar in fullscreen
  • Escape to exit

11.4 Browser Notifications

• Status: Future
• Priority: Low
• Description: Alert when long operations complete
• Features:
  • Permission request flow
  • Build/export completion notifications
  • Background tab awareness

---

Phase 12: AI Integration Enhancements

12.1 Browser-Local LLM

• Status: Future
• Priority: Medium
• Description: In-browser AI using WebLLM
• Features:
  • Model download/caching
  • Chat interface for ROM hacking questions
  • Code generation for ASM patches
• Dependencies: BrowserAIService (completed)

12.2 ROM Analysis Reports

• Status: Future
• Priority: Low
• Description: Generate sharable HTML reports
• Features:
  • Modification summary
  • Changed areas visualization
  • Exportable as standalone HTML

---

Phase 13: Performance Optimizations

13.1 WebGPU Rendering

• Status: Future
• Priority: Medium
• Description: Modern GPU acceleration
• Features:
  • Feature detection with fallback to WebGL
  • Hardware-accelerated tile rendering
  • Shader-based effects

13.2 Lazy Tile Loading

• Status: Future
• Priority: Medium
• Description: Load only visible map sections
• Features:
  • Virtual scrolling for large maps
  • Tile cache management
  • Preload adjacent areas

---

Phase 14: Cloud Features

14.1 Cloud ROM Storage

• Status: Future
• Priority: Low
• Description: Optional cloud sync for projects
• Features:
  • User accounts
  • Project backup/restore
  • Cross-device sync

14.2 Screenshot Gallery

• Status: Future
• Priority: Low
• Description: Save emulator screenshots
• Features:
  • Auto-capture on emulator test
  • Gallery view in IndexedDB
  • Share to social media

---

Implementation Notes

Technology Stack

• Storage: IndexedDB via WasmStorage
• Networking: EmscriptenWebSocket for real-time features
• Background Processing: WasmWorkerPool (pthread-based)
• Audio: WebAudio API via WasmAudio
• UI: ImGui with HTML overlays for browser-specific elements

File Organization

src/app/platform/wasm/
├── wasm_storage.{h,cc}         # Phase 1 ✓
├── wasm_file_dialog.{h,cc}     # Phase 1 ✓
├── wasm_error_handler.{h,cc}   # Phase 2 ✓
├── wasm_loading_manager.{h,cc} # Phase 3 ✓
├── wasm_settings.{h,cc}        # Phase 6 ✓
├── wasm_autosave.{h,cc}        # Phase 6 ✓
├── wasm_browser_storage.{h,cc} # Phase 5 ✓
├── wasm_worker_pool.{h,cc}     # Phase 7 ✓
├── wasm_drop_handler.{h,cc}    # Phase 9 (planned)
├── wasm_patch_export.{h,cc}    # Phase 9 (planned)
└── wasm_collaboration.{h,cc}   # Phase 10 (planned)

src/app/emu/platform/wasm/
└── wasm_audio.{h,cc}           # Phase 8 ✓

src/web/
├── error_handler.{js,css}      # Phase 2 ✓
├── loading_indicator.{js,css}  # Phase 3 ✓
├── service-worker.js           # Phase 4 ✓
├── manifest.json               # Phase 4 ✓
├── drop_zone.{js,css}          # Phase 9 (planned)
└── collaboration_ui.{js,css}   # Phase 10 (planned)