Refactor voice HUD with improved state management and settings #4036

Originally written by @ccantynz-alt on GitHub.
Imported from https://github.com/ccantynz-alt/48co.v1/pull/1

Summary

Refactored the main HUD component (app/page.jsx) with improved state management, enhanced voice command processing, and a more robust settings system. The changes focus on better separation of concerns, cleaner transcript handling, and more reliable command execution.

Key Changes

• Improved State Management: Refactored transcript processing to use a ref-based approach (transcriptRef) that ensures the latest transcript value is available in the onend callback, fixing potential race conditions in voice command detection.

• Enhanced Voice Commands: Updated command prompts to be more descriptive and actionable (e.g., "Refactor the following code..." instead of emoji-based descriptions). Added support for the __SUBMIT__ command to simulate Enter key presses on focused elements.

• Settings Persistence: Converted settings from component-level state to a structured settings object with proper update handlers, enabling future persistence and more granular control over features like noise suppression, auto-coding mode, type speed, and auto-submit behavior.

• Improved Coding Mode: Replaced the simple mode toggle with a more flexible codingMode boolean and autoCoding setting, allowing both manual override and automatic detection based on coding keywords.

• Better Transcript Handling: Enhanced the transcript processing flow to properly handle edge cases (empty transcripts, command cancellation) and improved the lifecycle management of the recording state.

• UI/UX Refinements:

  • Settings panel now slides in from the right with smooth transitions instead of appearing inline
  • Added backdrop overlay when settings are open
  • Improved visual feedback with better color consistency (using hex values instead of CSS variables)
  • Enhanced footer hint text with better Unicode symbols

• Component Cleanup: Refactored MicToggle component with clearer comments and improved accessibility. Updated Waveform component with better animation organization and static bar height variation.

• Configuration Updates: Simplified .gitignore to focus on essential entries, updated tailwind.config.js with explicit color definitions, and improved CSS comments for clarity.

Notable Implementation Details

• The transcriptRef pattern ensures that the onend callback always has access to the latest transcript value, preventing stale closures.
• Voice command processing now happens in a dedicated processTranscript callback that handles all command types (Claude prompts, submit, cancel) in a single flow.
• Settings are now properly typed and managed through an updateSetting function, making it easier to add new settings in the future.
• The waveform component now uses a predefined BAR_CLASSES array for consistent animation staggering.

https://claude.ai/code/session_01KRs33M5QaFJVw6ZqLYszUV