jpremill/clarity-helper
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(ui): redesign voice cockpit with clinical companion drawer, Svelte 5 migration, and Gemini 3.8 voice

Browse Source 
- 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
This commit is contained in:
jpremill committed 2026-09-29 23:35:05 -04:00
1 parent c82b112624
commit 1feea40684
148 files changed
+11230 -1706
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

changelogs/unreleased/gemini-3-8-openrouter-upgrade.md
+21
View File
@@ -0,0 +1,21 @@
---
title: "Upgrade to Google Gemini 3.8 Flash & OpenRouter API Key Governance"
ticket: "GEMINI-3.8-UPGRADE"
type: "feature"
author: "Antigravity Autonomous Swarm"
date: "2026-09-29"
---
### Added
- **Gemini 3.8 Model Catalog Support**: Upgraded default roleplay and clinical supervisor models across the entire application to `google/gemini-3.8-flash` via OpenRouter.
- **Enhanced Model Selection**: Added `google/gemini-3.8-flash` (Frontier Ultra Low Latency) and `google/gemini-3.7-flash` (Hybrid Reasoning) to `AVAILABLE_MODELS` in `SettingsModal.tsx`.
- **TDD Test Suite**: Added zero-dependency automated unit test suite (`npm test`) using `node:test` + `tsx`, covering API key resolution, OpenRouter mock requests/SSE streaming, and scenario schemas.
- **Azure Functions Local Template**: Added `api/local.settings.example.json` with `OPENROUTER_API_KEY` configuration.
### Changed
- **Parameter & Key Propagation**: Wired `userSettings` through `App.tsx` down to `ChatSession`, `ScenarioGenerator`, `VoiceSession`, and `useLiveSession`, ensuring custom OpenRouter API keys and selected model IDs are respected on every call.
- **Azure Functions Default Models**: Updated `AnalysisFunction.cs`, `ChatFunction.cs`, and `ScenarioFunction.cs` default fallback models to `google/gemini-3.8-flash`.
- **Environment Template**: Updated `.env.example` to provide `VITE_OPENROUTER_API_KEY` and `OPENROUTER_API_KEY`.
### Removed
- **Dead Dependency Residue**: Stripped `@google/genai` from `package.json` dependencies and `vite.config.ts` rollup chunks.
changelogs/unreleased/svelte-5-rewrite.md
+42
View File
@@ -0,0 +1,42 @@
---
title: "Full Frontend Rewrite to Svelte 5 (Runes & Bits UI Architecture)"
ticket: "SVELTE-5-REWRITE"
type: "refactor"
author: "Antigravity Autonomous Swarm"
date: "2026-09-29"
---
### Added
- **Svelte 5 Runes Architecture**: Fully rewritten frontend in Svelte 5 using runes (`$state`, `$derived`, `$effect`, `$props`, `$bindable`), eliminating virtual DOM overhead and React dependency chains.
- **AudioEngine Reactive Controller**: Engineered `src/lib/audio/AudioEngine.svelte.ts` managing WebAudio contexts, FFT analyser frequency extraction, Web Speech recognition, OpenRouter TTS synthesis, and parallel clinical supervision in microtasks.
- **Svelte 5 Reactive Stores**: Implemented `src/lib/stores/UserSettingsStore.svelte.ts` and `src/lib/stores/AppStateStore.svelte.ts` with local storage persistence and derived filters.
- **Svelte 5 Design System Primitives (`src/lib/components/ui/`)**:
- `Button.svelte`, `Badge.svelte`, `Card.svelte` (+ `Header`, `Title`, `Description`, `Content`, `Footer`)
- `Input.svelte`, `Textarea.svelte`, `Tooltip.svelte`, `Dialog.svelte`
- `Tabs.svelte`, `TabsList.svelte`, `TabsTrigger.svelte`, `TabsContent.svelte`, `tabsContext.ts`
- `ScrollArea.svelte`, `Label.svelte`, `Separator.svelte`
- **Recomposed Clinical Feature Components (`src/lib/components/`)**:
- `ScenarioCard.svelte`: Scenario card with difficulty badges, CBT protocol chips, and text/voice launching.
- `AudioVisualizer.svelte`: Canvas/CSS audio level visualizer with dynamic bar animations.
- `AudioDeviceSelector.svelte`: Microphone input device switcher.
- `LiveInsightPanel.svelte`: Turn-by-turn parallel supervisor feedback drawer.
- `SessionReport.svelte`: Comprehensive post-session CBT assessment report with Markdown and JSON exports.
- `ScenarioGenerator.svelte`: AI scenario generator modal with difficulty presets and clinical concept selection.
- `CBTReference.svelte`: Searchable glossary reference covering all 18 clinical terms and techniques.
- `SettingsModal.svelte`: Voice profile and OpenRouter API key/model selector modal.
- `TranscriptPanel.svelte`: Slide-over voice transcript drawer with role styling.
- `ChatMessage.svelte` & `ChatInput.svelte`: Roleplay message bubbles and character input box.
- `ChatSession.svelte`: Streaming text chat controller wired to OpenRouter and live supervisor.
- `VoiceSession/VoiceHeader.svelte`, `VoiceControls.svelte`, `ConnectionState.svelte`, `AnalyzingState.svelte`.
- `VoiceSession.svelte`: Full voice roleplay cockpit coordinating AudioEngine and visualizer.
- `ReloadPrompt.svelte` & `VersionBadge.svelte`: PWA reload prompt and app version indicator.
- **App Shell & Mounting (`src/`)**:
- `src/App.svelte`: Root application coordinator.
- `src/main.ts`: Svelte 5 `mount()` entry point targeting `#root`.
- **Vitest & Svelte-Check Verification Suites**:
- Upgraded test harness to `vitest` with 16/16 unit tests passing.
- `npx svelte-check`: 0 errors, 0 warnings across all 20 Svelte components.
### Changed
- **Entry Point**: Updated `index.html` to mount `/src/main.ts` and removed obsolete React importmap.
- **Vite Bundler**: Configured `svelte()` plugin alongside PWA injectManifest, tuning rollup manual chunks for `@lucide/svelte`, `svelte`, and `workbox`.
changelogs/unreleased/voice-demo-and-playwright-snapshots.md
+33
View File
@@ -0,0 +1,33 @@
# 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.