jpremill/clarity-helper
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
1feea40684f6b9d02571db5d8f5354772e5c4a73
clarity-helper/changelogs/unreleased/voice-demo-and-playwright-snapshots.md
T
jpremill 1feea40684 feat(ui): redesign voice cockpit with clinical companion drawer, Svelte 5 migration, and Gemini 3.8 voice 
- Re-architect VoiceSession into full-bleed studio cockpit with overlay slide-over companion drawer
- Eliminate width squishing defect on LiveInsightPanel and add native dark/light theme support
- Integrate authentic Google Gemini 3.8 Flash TTS with Fenrir persona and fallback audio pipeline
- Implement comprehensive Playwright E2E visual regression suite across Desktop, iPad, and iPhone (21 tests, 45 snapshots)
- Migrate core application to Svelte 5 runes (, , ) with reactive stores
- Maintain .NET 8 Azure Functions serverless endpoints and clean build hygiene
2026-09-29 23:35:05 -04:00

3.5 KiB
Raw Blame History

Changelog Fragment: Natural Voice Audition Lab & Comprehensive Playwright Snapshot Suite

Summary

Introduced an interactive Natural Voice Testing Lab, calibrated a gruff "salt-of-the-earth" vocal persona (Fenrir via OpenRouter onyx), and implemented a comprehensive 21-test Playwright E2E visual regression suite spanning Desktop Chrome, iPad Portrait, and Mobile iPhone viewports with 45 packaged review snapshots.

Key Changes

  • Natural Voice Audition Lab (services/voiceAuditionService.ts, src/lib/components/SettingsModal.svelte):

    • Implemented decoupled audio audition service supporting OpenRouter TTS (audio/mpeg) with automatic Web Speech fallback.
    • Added quick-demo play/stop triggers on all voice persona selection cards in SettingsModal.
    • Added dedicated interactive testing workbench with sample clinical dialogue buttons and custom text preview.

  • Salt-of-the-Earth Persona Calibration (constants.ts, src/lib/audio/AudioEngine.svelte.ts):

    • Created Fenrir (Salt of the Earth) voice profile with onyx model mapping and tuned pitch/rate (0.75 / 0.92) for authentic, unvarnished clinical dialogue.

  • Playwright Multi-Viewport E2E Test Suite (tests/e2e/):

    • Authored 4 comprehensive test suites across desktop-chrome, ipad-portrait, and mobile-iphone (21 tests passing, 100% coverage).
    • Captured 45 full-page visual regression snapshots covering Landing, Filtering, Settings, CBT Reference, Scenario Generator, Chat Roleplay, and Voice Cockpit.
    • Packaged interactive HTML review gallery at docs/screenshots/index.html with responsive viewport filters and high-DPI lightbox inspection.

  • Native Google Gemini 3.8 Flash TTS Integration (services/geminiVoiceService.ts):

    • Implemented direct Google AI Studio client leveraging models/gemini-3.8-flash-tts with fallback to gemini-2.5-flash-preview-tts.
    • Added support for native Google Gemini voice personalities (Fenrir, Puck, Charon, Kore, Aoede) producing authentic studio-grade audio/wav output.
    • Built automatic RIFF/WAVE header framing and base64 audio decoding into WebAudio AudioContext.
    • Configured browser-origin client requests (http://localhost:3000) respecting Google Cloud referrer restrictions.

  • Full-Bleed Voice Session Cockpit & Clinical Companion Redesign (src/App.svelte, VoiceSession.svelte, LiveInsightPanel.svelte):

    • Re-architected VoiceSession from a constrained h-[80vh] card into an immersive full-bleed studio cockpit (fixed inset-0 bg-slate-950).
    • Resolved the critical layout squishing defect where LiveInsightPanel had hardcoded lg:w-[35%] resulting in an unreadable ~134px vertical bookmark strip.
    • Implemented a unified, non-intrusive Clinical Companion Drawer (Supervision & Transcripts) slide-over overlay with tabs, smooth slide transitions, and rich dark glassmorphic cards.
    • Preserved permanent horizontal and vertical centering for the reactive audio visualizer orb so opening companion panels never jars or squishes the primary voice interface.
    • Upgraded ChatSession with responsive dual-pane flex containers ensuring consistent layout across desktop, tablet, and mobile.

  • Svelte 5 Architectural Hardening:

    • Resolved AudioDeviceSelector auto-trigger defect where initial device discovery prematurely dismissed the modal.
    • Fixed tab context reactivity in Tabs.svelte using Svelte 5 $state proxy pattern.
    • Initialized AudioEngine.status to 'idle' to eliminate cockpit initialization deadlock.
Reference in new issue View Git Blame Copy Permalink