clarity-helper/changelogs/unreleased/svelte-5-rewrite.md at 1feea40684f6b9d02571db5d8f5354772e5c4a73

0 Fork 0

Files

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.2 KiB

Raw Blame History

title, ticket, type, author, date

title	ticket	type	author	date
Full Frontend Rewrite to Svelte 5 (Runes & Bits UI Architecture)	SVELTE-5-REWRITE	refactor	Antigravity Autonomous Swarm	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.

3.2 KiB Raw Blame History

Added

Changed

3.2 KiB

Raw Blame History