Improve playback stability and screenshot editor defaults

[richiemcilroy]

• Increase audio playback buffer size and sync threshold for smoother playback
  • Prefer device default buffer size strategy over fixed sizes
  • Clamp audio samples to prevent overflow
  • Update screenshot editor defaults: pixelate mask, larger arrow heads, white background
  • Add CORS handling for screenshot image loading
  • Improve background image error handling with fallback to white
  • Clean up unused padding fields in composite frame uniforms
  • Replace eprintln with proper tracing for error logging

Greptile Summary

This PR enhances audio playback stability and updates screenshot editor UX defaults.

Audio playback improvements:

• Doubled buffer size from 256 to 512 samples for smoother playback
• Prioritized device default buffer size over fixed sizes to better adapt to hardware capabilities
• Increased audio/video sync threshold from 0.05s to 0.12s to reduce unnecessary re-syncing
• Added sample clamping to prevent audio overflow artifacts

Screenshot editor default changes:

• Changed default background from macOS wallpaper to clean white color
• Updated mask tool default from blur (level 16) to pixelate (level 7)
• Increased arrow head sizing for better visibility (length 3x→6x, width 2x→5x multipliers)

Robustness improvements:

• Added CORS handling for screenshot image loading
• Implemented graceful fallback to white background when image loading fails
• Replaced eprintln! with proper tracing::error! for structured logging
• Updated camera frame metadata handling to match 24-byte protocol
• Cleaned up unused padding fields in composite frame uniforms

Confidence Score: 5/5

• This PR is safe to merge with minimal risk
• All changes are well-scoped improvements to stability and UX defaults. Audio changes increase buffer sizes and thresholds for smoother playback. Screenshot editor changes update sensible defaults and add proper error handling. No breaking changes or security concerns. Code follows repository patterns and includes appropriate error handling.
• No files require special attention

Important Files Changed

Filename	Overview
crates/audio/src/renderer.rs	Added audio sample clamping to prevent overflow, ensuring output stays within [-1.0, 1.0] range
crates/editor/src/audio.rs	Doubled playback buffer size from 256 to 512 samples for smoother audio playback
crates/editor/src/playback.rs	Prioritized device default buffer size strategy and increased sync threshold from 0.05s to 0.12s
apps/desktop/src/routes/screenshot-editor/context.tsx	Changed default background from wallpaper to white color and replaced frame WebSocket helper with inline implementation
crates/rendering/src/layers/background.rs	Added error handling with white background fallback when image loading fails, plus debug/warning tracing

Sequence Diagram

sequenceDiagram
    participant User
    participant EditorUI as Screenshot Editor UI
    participant WS as WebSocket
    participant Rendering as Rendering Layer
    participant Audio as Audio Playback
    participant Device as Audio Device

    Note over User,Device: Audio Playback Improvements
    User->>Audio: Start playback
    Audio->>Device: Try DeviceDefault buffer size (prioritized)
    alt DeviceDefault succeeds
        Device-->>Audio: Stream ready
    else DeviceDefault fails
        Audio->>Device: Fallback to Fixed(512) buffer size
        Device-->>Audio: Stream ready
    end
    loop Audio callback
        Audio->>Audio: Render samples & clamp to [-1.0, 1.0]
        Audio->>Audio: Check video/audio drift
        alt Drift > 0.12s (increased threshold)
            Audio->>Audio: Resync to video playhead
        end
        Audio->>Device: Output clamped samples
    end

    Note over User,Device: Screenshot Editor Defaults & Frame Handling
    User->>EditorUI: Open screenshot editor
    EditorUI->>EditorUI: Apply defaults (white bg, pixelate mask)
    EditorUI->>WS: Connect to frame WebSocket
    loop Frame updates
        WS->>EditorUI: Send frame (24-byte metadata)
        EditorUI->>EditorUI: Parse stride, width, height
        EditorUI->>EditorUI: Process frame data
        EditorUI->>EditorUI: Create ImageBitmap
    end
    
    User->>EditorUI: Add arrow annotation
    EditorUI->>EditorUI: Apply larger arrow head sizing (6x/5x multipliers)
    
    User->>EditorUI: Export screenshot
    EditorUI->>EditorUI: Load image with CORS header
    EditorUI->>Rendering: Render with background
    alt Background image exists
        Rendering->>Rendering: Load background image
    else Image load fails
        Rendering->>Rendering: Fallback to white background
        Rendering->>Rendering: Log warning via tracing
    end
    Rendering-->>User: Export complete

Loading