diff --git a/.agents/skills/azure-functions-genai/SKILL.md b/.agents/skills/azure-functions-genai/SKILL.md
new file mode 100644
index 0000000..38cbaf6
--- /dev/null
+++ b/.agents/skills/azure-functions-genai/SKILL.md
@@ -0,0 +1,84 @@
+---
+name: azure-functions-genai
+description: >-
+  Guides the design, implementation, and debugging of Azure Functions v4 (.NET 8/10 Isolated Worker)
+  using the official Google.GenAI C# SDK for serverless AI endpoints.
+---
+
+# Azure Functions & Google.GenAI C# SDK Skill
+
+Use this skill when developing, updating, or testing the C# serverless API endpoints located in `api/`.
+
+---
+
+## 1. Solution Architecture
+
+The backend consists of an **Azure Functions v4 Isolated Worker** targeting **.NET 8.0**:
+- Project file: `api/api.csproj`
+- Runtime: `Microsoft.Azure.Functions.Worker` 2.50+ & `Google.GenAI` 1.20+
+- Host configuration: `api/host.json`
+- Application Insights integration: `Microsoft.ApplicationInsights.WorkerService`
+
+---
+
+## 2. Google.GenAI C# SDK Integration Patterns
+
+### 2.1 Namespaces & Types
+```csharp
+using Google.GenAI;
+using Google.GenAI.Types;
+using Type = Google.GenAI.Types.Type; // Disambiguate with System.Type
+```
+
+### 2.2 Client Initialization
+```csharp
+var apiKey = System.Environment.GetEnvironmentVariable("GEMINI_API_KEY");
+var client = new Client(apiKey: apiKey);
+```
+
+### 2.3 Structured Output Generation (JSON Schema)
+```csharp
+var schema = new Schema
+{
+    Type = Type.Object,
+    Properties = new Dictionary<string, Schema>
+    {
+        { "distortionsIdentified", new Schema { Type = Type.Array, Items = new Schema { Type = Type.String } } },
+        { "techniquesUsed", new Schema { Type = Type.Array, Items = new Schema { Type = Type.String } } },
+        { "clinicalInsight", new Schema { Type = Type.String } },
+        { "feedbackType", new Schema { Type = Type.String, Enum = new List<string> { "Constructive", "Positive", "Neutral" } } }
+    },
+    Required = new List<string> { "distortionsIdentified", "techniquesUsed", "clinicalInsight", "feedbackType" }
+};
+
+var response = await client.Models.GenerateContentAsync(
+    model: "gemini-2.5-flash", 
+    contents: promptContent,
+    config: new GenerateContentConfig 
+    {
+        SystemInstruction = new Content { Parts = new List<Part> { new Part { Text = systemInstruction } } },
+        ResponseMimeType = "application/json",
+        ResponseSchema = schema
+    });
+```
+
+---
+
+## 3. Endpoints Matrix
+
+| Route | HTTP Method | Function Name | Purpose |
+|:---|:---|:---|:---|
+| `/api/chat` | `POST` | `ChatProgression` | Headless roleplay progression with strict anti-meta guardrails |
+| `/api/analysis` | `POST` | `ClinicalAnalysis` | Real-time clinical supervisor turn evaluation |
+| `/api/scenario/generate` | `POST` | `GenerateScenario` | Dynamic CBT roleplay scenario generation |
+
+---
+
+## 4. Local Build & Test Verification
+```bash
+# Build the C# API project
+dotnet build api/api.csproj
+
+# Run local functions host (requires Azure Functions Core Tools)
+func start --csharp --prefix api
+```
diff --git a/.agents/skills/cbt-clinical-evaluation/SKILL.md b/.agents/skills/cbt-clinical-evaluation/SKILL.md
new file mode 100644
index 0000000..905d7ec
--- /dev/null
+++ b/.agents/skills/cbt-clinical-evaluation/SKILL.md
@@ -0,0 +1,56 @@
+---
+name: cbt-clinical-evaluation
+description: >-
+  Provides clinical supervision protocols, real-time distortion detection rules,
+  psychometric scoring rubrics, and post-session diagnostic report formatting.
+---
+
+# CBT Clinical Evaluation & Supervision Skill
+
+Use this skill when refining the clinical analysis supervisor model prompts, tuning distortion detection thresholds, or formatting final session case reports.
+
+---
+
+## 1. Real-Time Turn-by-Turn Supervision Protocol
+
+During a roleplay session, every completed user turn is evaluated out-of-band by an asynchronous clinical supervisor prompt.
+
+### 1.1 Clinical Schema
+```typescript
+export interface AnalysisResult {
+  analysis: {
+    distortions: string[];       // Detected distortions (e.g. "Mind Reading", "Catastrophizing")
+    isAdaptive: boolean;         // True if the response demonstrates cognitive restructuring
+    evidence: string;            // Direct quote or behavioral evidence from user's response
+  };
+  rating: {
+    score: number;               // 1-10 clinical effectiveness score
+    reason: string;              // Clinical justification for the score
+  };
+  suggestions: {
+    alternativeThought: string;  // Rational reframe of the user's statement
+    behavioralStep: string;      // Actionable communication or behavioral adjustment
+  };
+}
+```
+
+---
+
+## 2. Clinical Evaluation Rubric (1-10 Scoring Scale)
+
+| Score Range | Clinical Category | Behavioral & Cognitive Characteristics |
+|:---|:---|:---|
+| **1 - 3** | **Maladaptive / Reactive** | User falls into cognitive distortions without awareness; demonstrates passive-aggressive, defensive, or submissive behavior; abdicates personal boundaries. |
+| **4 - 6** | **Emerging Awareness / Partial Restructuring** | User attempts to challenge distortions or state boundaries, but tone remains emotionally reactive, apologetic, or hesitant. |
+| **7 - 8** | **Adaptive / Effective Restructuring** | Clear cognitive restructuring; assertive, non-blaming boundary setting; validates other person's emotions while holding firm limits. |
+| **9 - 10** | **Mastery / Radical Flexibility** | Demonstrates emotional regulation under high friction; employs sophisticated techniques (e.g., DEAR MAN, Gray Rock, Radical Acceptance); de-escalates without concession. |
+
+---
+
+## 3. Post-Session Comprehensive Case Report
+
+At the end of a session, a final summary prompt generates a macro assessment:
+1. **Primary Cognitive Distortions Identified**: Frequency and contexts of observed distortions.
+2. **Techniques Successfully Applied**: Count and effectiveness of behavioral tools used.
+3. **Core Cognitive Shifts**: Evolution of the user's responses across the dialogue arc.
+4. **Targeted Clinical Homework**: 1-2 practical real-world exercises to reinforce learning.
diff --git a/.agents/skills/cbt-scenario-design/SKILL.md b/.agents/skills/cbt-scenario-design/SKILL.md
new file mode 100644
index 0000000..25352c9
--- /dev/null
+++ b/.agents/skills/cbt-scenario-design/SKILL.md
@@ -0,0 +1,78 @@
+---
+name: cbt-scenario-design
+description: >-
+  Designs, calibrates, and validates Cognitive Behavioral Therapy (CBT) roleplay scenarios,
+  difficulty ladders, character psychological profiles, and internal CBT logic rules.
+---
+
+# CBT Scenario Design & Calibration Skill
+
+Use this skill when creating new simulation scenarios, tuning AI character difficulty levels, adding cognitive distortion targets, or modifying the scenario catalog.
+
+---
+
+## 1. Clinical Scenario Architecture
+
+Every scenario in Cognitive Clarity conforms to the following schema:
+
+```typescript
+export interface Scenario {
+  id: string;                                                // Unique kebab-case slug (e.g. 'workplace-critical-review')
+  title: string;                                             // Human-readable evocative title
+  description: string;                                       // Context setting the premise for the user
+  category: 'Social Anxiety' | 'Workplace' | 'Relationships' | 'Self-Talk';
+  difficulty: 'Beginner' | 'Intermediate' | 'Advanced';
+  characterName: string;                                     // Name or archetype of the AI partner
+  initialMessage: string;                                    // The opening dialogue from the AI character
+  cbtFocus: string[];                                        // Target distortions and techniques
+  systemInstruction: string;                                 // Comprehensive prompt with character persona & logic
+}
+```
+
+---
+
+## 2. Difficulty Calibration Rubric
+
+| Difficulty | Character Resistance | Cognitive Distortion Salience | User Task | Recommended Category |
+|:---|:---|:---|:---|:---|
+| **Beginner** | Highly receptive to assertive communication; explicitly hints at expectations. | Overt, obvious distortions (e.g., explicit All-or-Nothing statements). | Identify and dispute basic cognitive distortions; maintain calm presence. | `Social Anxiety`, `Self-Talk` |
+| **Intermediate** | Ambiguous motivations; subtle passive-aggression; holds reasonable opposing perspective. | Subtle, nuanced distortions (e.g., Mind Reading, Fortune Telling, Maladaptive Guilt). | Set boundaries, de-escalate without defensiveness, practice Cognitive Reframing. | `Workplace`, `Relationships` |
+| **Advanced** | Strong emotional activation; high clinical resistance; persistent invalidation or defensiveness. | Layered cognitive distortions combined with emotional triggers. | Apply Radical Acceptance, Gray Rock Method, multi-turn emotional regulation under stress. | `Relationships`, `Self-Talk` |
+
+---
+
+## 3. System Instruction Design Blueprint
+
+When writing `systemInstruction` for a scenario, always follow this four-part structure:
+
+```markdown
+1. CHARACTER IDENTITY & CONTEXT:
+   - Name, relationship to user, current emotional state, and immediate goal.
+   - Tone markers (e.g., "curt, hurried, stressed" or "skeptical, passive-aggressive").
+
+2. INTERNAL CBT LOGIC:
+   - IF the user becomes defensive or aggressive -> Escalate emotional distance or defensiveness.
+   - IF the user validates emotions while establishing clear boundaries -> De-escalate and show grudging respect.
+   - IF the user asks clarifying questions without mind reading -> Clarify directly and remove ambiguity.
+
+3. VOCAL & DIALOGUE STYLE:
+   - Sentence length: Short and conversational (1-3 sentences per turn).
+   - Natural conversational elements: Hesitations, pauses, tone inflections.
+
+4. ANTI-META GUARDRAILS:
+   - NEVER break character.
+   - NEVER provide feedback, scores, advice, or therapy tips.
+   - NEVER say "Good job" or "That was a great reframing".
+```
+
+---
+
+## 4. Scenario Validation Checklist
+
+- [ ] `id` is unique and formatted as lowercase kebab-case.
+- [ ] `category` is one of the four clinical categories.
+- [ ] `difficulty` is properly calibrated (`Beginner`, `Intermediate`, `Advanced`).
+- [ ] `cbtFocus` lists at least 2 valid entries from `CBT_GLOSSARY`.
+- [ ] `initialMessage` immediately immerses the user without preamble.
+- [ ] `systemInstruction` contains explicit `INTERNAL CBT LOGIC` rules.
+- [ ] Zero clinical meta-feedback or congratulatory phrases in persona instructions.
diff --git a/.agents/skills/webaudio-gemini-live/SKILL.md b/.agents/skills/webaudio-gemini-live/SKILL.md
new file mode 100644
index 0000000..b3feaa0
--- /dev/null
+++ b/.agents/skills/webaudio-gemini-live/SKILL.md
@@ -0,0 +1,95 @@
+---
+name: webaudio-gemini-live
+description: >-
+  Guides the integration, troubleshooting, and optimization of real-time WebAudio capture,
+  Gemini Multimodal Live API WebSocket streaming, PCM encoding, and frequency visualizers.
+---
+
+# WebAudio & Gemini Multimodal Live API Skill
+
+Use this skill when developing, debugging, or optimizing real-time duplex voice conversations with Google Gemini's native audio models (`gemini-2.5-flash-native-audio-preview-09-2025` or future native audio models).
+
+---
+
+## 1. WebAudio Architecture & Data Flow
+
+```mermaid
+sequenceDiagram
+    participant UserMic as Microphone (MediaStream)
+    participant InAudioCtx as Input AudioContext (16kHz)
+    participant LiveWS as Gemini Live WebSocket
+    participant OutAudioCtx as Output AudioContext (24kHz)
+    participant Visualizer as AnalyserNode & Visualizer
+
+    UserMic->>InAudioCtx: Raw Audio Stream
+    InAudioCtx->>InAudioCtx: Float32 -> Int16 PCM (16kHz)
+    InAudioCtx->>LiveWS: sendRealtimeInput({ media: { data: Base64, mimeType: 'audio/pcm;rate=16000' } })
+    LiveWS-->>OutAudioCtx: serverContent.modelTurn (PCM 24kHz Base64)
+    OutAudioCtx->>Visualizer: Frequency Data Array (FFT)
+    OutAudioCtx->>OutAudioCtx: Schedule AudioBufferSourceNode (Monotonic Queue)
+    LiveWS-->>LiveWS: serverContent.interrupted -> Stop All Audio
+```
+
+---
+
+## 2. Critical Implementation Guidelines
+
+### 2.1 Audio Context Configuration
+- **Input Sample Rate**: Must be initialized at `16000` Hz:
+  ```typescript
+  const inputAudioCtx = new (window.AudioContext || (window as any).webkitAudioContext)({ sampleRate: 16000 });
+  ```
+- **Output Sample Rate**: Must be initialized at `24000` Hz to match Gemini's native output audio sample rate:
+  ```typescript
+  const outputAudioCtx = new (window.AudioContext || (window as any).webkitAudioContext)({ sampleRate: 24000 });
+  ```
+
+### 2.2 PCM Conversion Math
+Convert 32-bit floating point audio (`-1.0` to `+1.0`) into 16-bit signed PCM integers (`-32768` to `+32767`):
+```typescript
+export function floatTo16BitPCM(float32Array: Float32Array): Int16Array {
+  const int16Array = new Int16Array(float32Array.length);
+  for (let i = 0; i < float32Array.length; i++) {
+    const s = Math.max(-1, Math.min(1, float32Array[i]));
+    int16Array[i] = s < 0 ? s * 0x8000 : s * 0x7FFF;
+  }
+  return int16Array;
+}
+```
+
+### 2.3 Monotonic Playback Scheduling
+To prevent audio overlap or gaps:
+```typescript
+const nextStartTimeRef = useRef<number>(0);
+const audioCtx = outputAudioCtxRef.current!;
+
+// Ensure scheduled start is never in the past
+nextStartTimeRef.current = Math.max(nextStartTimeRef.current, audioCtx.currentTime);
+
+const source = audioCtx.createBufferSource();
+source.buffer = buffer;
+source.connect(analyserNode);
+source.start(nextStartTimeRef.current);
+nextStartTimeRef.current += buffer.duration;
+```
+
+### 2.4 Handling Barge-in / Interruptions
+When Gemini detects user speech while generating speech, it emits `message.serverContent.interrupted`:
+```typescript
+if (message.serverContent?.interrupted) {
+  // Stop all currently playing audio source nodes immediately
+  audioSourcesRef.current.forEach(source => {
+    try { source.stop(); } catch (e) {}
+  });
+  audioSourcesRef.current.clear();
+  nextStartTimeRef.current = 0;
+  setIsAiSpeaking(false);
+}
+```
+
+---
+
+## 3. Visualizer Engineering
+- Connect `AnalyserNode` with `fftSize = 256` between source and destination.
+- Use `analyser.getByteFrequencyData(dataArray)` to sample normalized amplitude (0-255).
+- Use `requestAnimationFrame` for continuous rendering with smooth falloff.
diff --git a/.env.example b/.env.example
index c8de6b5..ffbc76b 100644
--- a/.env.example
+++ b/.env.example
@@ -1 +1,4 @@
-VITE_GEMINI_API_KEY=""
+# Cognitive Clarity - Environment Configuration
+# OpenRouter API Key for local development (optional if configured via in-app Settings modal)
+VITE_OPENROUTER_API_KEY=""
+OPENROUTER_API_KEY=""
diff --git a/.gitignore b/.gitignore
index 4fee690..a446efb 100644
--- a/.gitignore
+++ b/.gitignore
@@ -31,3 +31,10 @@ local.settings.json
 *.sw?
 bin/
 obj/
+
+# Ephemeral Worktrees & Test Reports
+.worktrees/
+test-results/
+playwright-report/
+.agents/teamwork/
+
diff --git a/AGENTS.md b/AGENTS.md
new file mode 100644
index 0000000..08af9ab
--- /dev/null
+++ b/AGENTS.md
@@ -0,0 +1,120 @@
+# AGENTS.md - Cognitive Clarity Workspace Instructions
+
+Welcome to **Cognitive Clarity** (`clarity-helper`), an adaptive clinical training and roleplay environment engineered to strengthen cognitive flexibility, practice Cognitive Behavioral Therapy (CBT) restructuring techniques, and simulate high-stakes social interactions in real time.
+
+---
+
+## 1. System Architecture Overview
+
+```mermaid
+graph TD
+    User([User Voice / Text]) <--> Frontend[React 19 + Vite + Tailwind + Radix UI]
+    
+    subgraph "Frontend Real-Time Multimodal Layer"
+        Frontend <--> WebAudio[WebAudio DSP Engine: Live FFT Analysis & Synthesis]
+        Frontend <--> OpenRouterClient[OpenRouter API: Streaming Roleplay & TTS/STT]
+        OpenRouterClient --> Transcripts[Real-Time Transcription Pipeline]
+        Transcripts --> Supervisor[Parallel Turn Supervisor: OpenRouter google/gemini-3.8-flash]
+        Supervisor --> LiveInsights[LiveInsightPanel & SessionReport]
+    end
+
+    subgraph "Backend Serverless Layer (api/)"
+        Frontend -.->|Optional Enterprise Fallback| AzFunc[Azure Functions v4 .NET 8 Isolated Worker]
+        AzFunc --> ChatFunc["/api/chat (ChatProgression)"]
+        AzFunc --> AnalysisFunc["/api/analysis (ClinicalAnalysis)"]
+        AzFunc --> ScenarioFunc["/api/scenario/generate (GenerateScenario)"]
+        AzFunc <--> OpenRouterAPI[OpenRouter API Endpoint /chat/completions]
+    end
+
+    subgraph "Local Persistence & Offline"
+        Frontend <--> LocalStorage[LocalStorage: Custom Scenarios, Settings & Session History]
+        Frontend <--> ServiceWorker[Vite PWA / Workbox Service Worker: sw.ts]
+    end
+```
+
+---
+
+## 2. Core Repository Structure
+
+```
+clarity-helper/
+├── App.tsx                     # Primary application router, state coordinator, and hero interface
+├── constants.ts                # CBT Glossary (12 distortions, 5 techniques, 2 concepts), default scenarios, schemas
+├── types.ts                    # TypeScript domain models (Scenario, AnalysisResult, UserSettings, Message)
+├── index.html / index.tsx      # HTML entry point & React root mount
+├── index.css                   # Global styles & Tailwind base directives
+├── vite.config.ts              # Vite 6 config with PWA injectManifest, aliases, and env injection
+├── sw.ts                       # Custom Workbox Service Worker with precaching and caching strategies
+├── api/                        # Azure Functions .NET 8 Isolated Worker backend
+│   ├── Program.cs              # Functions host bootstrap & Application Insights telemetry
+│   ├── api.csproj              # .NET 8 project file with HttpClient Factory
+│   ├── ChatFunction.cs         # POST /api/chat - Headless roleplay progression via OpenRouter
+│   ├── AnalysisFunction.cs     # POST /api/analysis - Real-time clinical evaluation via OpenRouter
+│   └── ScenarioFunction.cs     # POST /api/scenario/generate - Structured scenario generator via OpenRouter
+├── components/                 # UI Component Hierarchy
+│   ├── VoiceSession.tsx        # Multimodal voice roleplay controller
+│   ├── VoiceSession/           # Voice state components (Header, Controls, Visualizer states)
+│   ├── ChatSession.tsx         # Text-based roleplay controller with streaming SSE
+│   ├── ChatMessage.tsx         # Conversation bubble with role styling
+│   ├── ChatInput.tsx           # Text input with submit handling
+│   ├── LiveInsightPanel.tsx    # Real-time turn-by-turn clinical supervision drawer
+│   ├── SessionReport.tsx       # Comprehensive post-session CBT assessment report
+│   ├── ScenarioGenerator.tsx   # AI-powered interactive custom scenario builder
+│   ├── CBTReference.tsx        # Interactive searchable glossary & technique reference
+│   ├── AudioVisualizer.tsx     # Canvas/CSS real-time FFT frequency visualizer
+│   ├── AudioDeviceSelector.tsx # Input microphone selector modal
+│   ├── SettingsModal.tsx       # Voice profile & OpenRouter API key configuration
+│   ├── ReloadPrompt.tsx        # PWA update notification prompt
+│   └── ui/                     # Radix UI + Tailwind design system primitives
+├── hooks/
+│   └── useLiveSession.ts       # Low-level WebAudio + OpenRouter voice synthesis hook
+├── services/
+│   ├── apiConfig.ts            # OpenRouter API key resolution & model defaults
+│   ├── openRouterService.ts    # Streaming chat, structured supervision & speech API client
+│   ├── sessionStorage.ts       # Persistent session history, markdown and JSON report exports
+│   └── audioUtils.ts           # PCM16 / Base64 / AudioBuffer encoding and decoding helpers
+├── scripts/                    # Headless CLI tools and scenario test suites
+│   ├── validate-scenarios.ts   # Scenario schema and distortion coverage validator
+│   └── simulate-cbt-session.ts # Headless multi-turn roleplay & clinical scoring simulator
+├── test/                       # Automated Node.js / tsx unit test suite
+│   ├── apiConfig.test.ts       # API key resolution & model defaults tests
+│   ├── openRouterService.test.ts # Streaming, supervisor & scenario generation tests
+│   └── scenarios.test.ts       # Clinical scenario schema & glossary tests
+└── .agents/                    # Specialized agent skills and workflow blueprints
+    └── skills/                 # Domain-specific skill runbooks
+```
+
+---
+
+## 3. Engineering Invariants & Coding Guidelines
+
+### 3.1 Strict Clinical Roleplay Separation
+- **No Meta-Commentary Leaks**: When the AI character is engaged in roleplay (`ChatSession`, `VoiceSession`, `ChatFunction.cs`), system instructions MUST forbid the model from breaking character, congratulating the user, giving clinical advice, or outputting feedback tokens.
+- **Parallel Supervision**: Clinical feedback is exclusively computed out-of-band by a dedicated supervisor model instance (`LiveInsightPanel`, `AnalysisFunction.cs`), ensuring realistic emotional friction during the simulation.
+
+### 3.2 OpenRouter Exclusive API Policy
+- **Zero Direct Google API Keys**: The codebase must NOT require or use direct Google Gemini API keys. All model queries (`google/gemini-3.8-flash`, `google/gemini-3.7-flash`, `google/gemini-2.5-flash`, `anthropic/claude-3.5-haiku`, `meta-llama/llama-3.3-70b-instruct`) route exclusively through OpenRouter.
+- **Client Security**: OpenRouter API Keys provided by the user are stored in browser LocalStorage and never sent to external servers or telemetries.
+
+### 3.3 TypeScript & Build Hygiene
+- Keep `npm run lint` (`tsc --noEmit`) and `npm test` passing with zero errors.
+- Ensure all Radix UI component props utilize `React.ComponentPropsWithoutRef<T>` or type unions compatible with React 19.
+- Maintain full type synchronization between `types.ts` and backend C# DTOs in `api/*.cs`.
+
+### 3.4 .NET Azure Functions Backend
+- Target **.NET 8.0** isolated worker model with `Microsoft.Azure.Functions.Worker.Sdk`.
+- Call OpenRouter API via `HttpClientFactory` with `OPENROUTER_API_KEY`.
+
+---
+
+## 4. Verification & Testing Commands
+
+| Purpose | Command | Notes |
+|:---|:---|:---|
+| **Run Unit Tests** | `npm test` | Executes native Node.js / `tsx` unit test suites |
+| **Typecheck Frontend** | `npm run lint` | Runs `tsc --noEmit` |
+| **Build Frontend** | `npm run build:nobump` | Bundles Vite SPA + PWA Service Worker to `dist/` |
+| **Validate Scenarios** | `npm run validate:scenarios` | Validates default & custom scenario data schemas |
+| **Simulate Session** | `npm run simulate:session` | Executes headless 3-turn CBT simulation with clinical score |
+| **Build .NET API** | `dotnet build api/api.csproj` | Compiles Azure Functions Isolated Worker assembly |
+| **Run Dev Server** | `npm run dev` | Starts Vite on `http://localhost:3000` |
diff --git a/App.tsx b/App.tsx
index 522cd99..36a9e09 100644
--- a/App.tsx
+++ b/App.tsx
@@ -17,7 +17,9 @@ import { VersionBadge } from './components/VersionBadge';
 const DEFAULT_SETTINGS: UserSettings = {
   voiceName: 'Zephyr',
   vocalStyle: 'Helpful',
-  genderPreference: 'Neutral'
+  genderPreference: 'Neutral',
+  roleplayModel: 'google/gemini-3.8-flash',
+  supervisorModel: 'google/gemini-3.8-flash'
 };
 
 const CUSTOM_SCENARIOS_KEY = 'cognitive-clarity-custom-scenarios';
@@ -143,7 +145,7 @@ const App: React.FC = () => {
     return (
       <div className="min-h-screen bg-slate-50 flex flex-col items-center pt-8 px-4 pb-8 animate-in fade-in duration-700">
         {sessionMode === 'text' ? (
-          <ChatSession scenario={activeScenario} onExit={handleExitSession} />
+          <ChatSession scenario={activeScenario} userSettings={userSettings} onExit={handleExitSession} />
         ) : (
           <div className="w-full max-w-4xl h-[80vh]">
             <VoiceSession
@@ -162,7 +164,7 @@ const App: React.FC = () => {
     <div className="min-h-screen bg-[#FDFDFF] text-slate-900 font-sans relative animate-in fade-in duration-500">
       <ReloadPrompt />
       {/* Modals */}
-      {showGenerator && <ScenarioGenerator onGenerate={handleScenarioGenerated} onCancel={() => setShowGenerator(false)} />}
+      {showGenerator && <ScenarioGenerator userSettings={userSettings} onGenerate={handleScenarioGenerated} onCancel={() => setShowGenerator(false)} />}
       {showReference && <CBTReference onClose={() => setShowReference(false)} />}
       {showSettings && <SettingsModal settings={userSettings} onUpdate={setUserSettings} onClose={() => setShowSettings(false)} />}
 
diff --git a/CHANGELOG.md b/CHANGELOG.md
new file mode 100644
index 0000000..498f6d6
--- /dev/null
+++ b/CHANGELOG.md
@@ -0,0 +1,91 @@
+# CHANGELOG
+
+### [2026-08-31] - OpenRouter Exclusive Engine Migration & Unified API Routing
+**Type:** Migration | Architecture | Feature | Performance
+**Context:** Completely eliminated direct Google API key dependencies in favor of exclusive OpenRouter integration (`https://openrouter.ai/api/v1`) across frontend roleplay streaming, speech synthesis/transcription, clinical supervision, scenario generation, and backend Azure Functions.
+**Resolution:**
+- **OpenRouter Exclusive Architecture:** Removed all `@google/genai` client libraries and direct Google Gemini API key requirements. All model interactions (including `google/gemini-2.5-flash`, `google/gemini-2.0-flash-001`, `anthropic/claude-3.5-haiku`, `meta-llama/llama-3.3-70b-instruct`) route exclusively through OpenRouter with standard Bearer authorization.
+- **Frontend Streaming SSE & TTS:** Upgraded `services/openRouterService.ts` to support Server-Sent Events (SSE) token streaming, structured turn evaluation in JSON mode, and high-fidelity speech synthesis.
+- **Live Voice Processing:** Refactored `hooks/useLiveSession.ts` to use browser speech recognition + WebAudio frequency analysis for microphone input, coupled with OpenRouter speech synthesis and turn analysis.
+- **Backend Azure Functions Alignment:** Refactored `api/ChatFunction.cs`, `api/AnalysisFunction.cs`, and `api/ScenarioFunction.cs` to utilize `HttpClientFactory` and `OPENROUTER_API_KEY`, removing the `Google.GenAI` NuGet package.
+- **Settings & UI Redesign:** Replaced provider toggles in `components/SettingsModal.tsx` with dedicated OpenRouter API Key input and model selector.
+- **Bundle Shrinkage:** Reduced total precache build size from 703 kB to 439 kB by removing heavy GenAI SDK dependencies.
+
+**Files Changed:**
+- `services/openRouterService.ts`
+- `services/apiConfig.ts`
+- `hooks/useLiveSession.ts`
+- `components/ChatSession.tsx`
+- `components/VoiceSession.tsx`
+- `components/ScenarioGenerator.tsx`
+- `components/SettingsModal.tsx`
+- `constants.ts`
+- `types.ts`
+- `App.tsx`
+- `index.html`
+- `vite.config.ts`
+- `api/api.csproj`
+- `api/Program.cs`
+- `api/ChatFunction.cs`
+- `api/AnalysisFunction.cs`
+- `api/ScenarioFunction.cs`
+- `AGENTS.md`
+- `GEMINI.md`
+- `README.md`
+- `CHANGELOG.md`
+
+**Files Changed:**
+- `hooks/useLiveSession.ts`
+- `services/apiConfig.ts`
+- `services/openRouterService.ts`
+- `services/sessionStorage.ts`
+- `components/SessionReport.tsx`
+- `components/SettingsModal.tsx`
+- `components/ChatSession.tsx`
+- `components/VoiceSession.tsx`
+- `components/ScenarioGenerator.tsx`
+- `types.ts`
+- `App.tsx`
+- `vite.config.ts`
+- `sw.ts`
+- `CHANGELOG.md`
+
+### [2026-08-30] - Architectural Assessment, Type Alignment & Agentic Tooling
+**Type:** Refactor | Bug Fix | Feature | Config
+**Context:** Comprehensive full-codebase architectural evaluation of Cognitive Clarity (`clarity-helper`), fixing TypeScript / .NET compilation blockers, enriching CBT domain coverage, and establishing workspace agent instructions, custom skills, and scenario test helpers.
+**Resolution:**
+- Fixed TypeScript 5.8 / React 19 typing discrepancy on `BadgeProps` in `components/ui/badge.tsx`.
+- Upgraded C# Azure Functions in `api/` to `Google.GenAI` 1.20+ SDK, resolving all namespace ambiguities and schema definitions across `ChatFunction.cs`, `AnalysisFunction.cs`, and `ScenarioFunction.cs`.
+- Enriched `CBT_GLOSSARY` in `constants.ts` with missing definitions for `Labeling` and `Overgeneralization`.
+- Added explicit `INTERNAL CBT LOGIC:` branching rules across built-in scenarios `s1`, `s3`, and `s4`.
+- Created comprehensive workspace guidelines and rules in `AGENTS.md` and `GEMINI.md`.
+- Created custom agent skills in `.agents/skills/`:
+  - `cbt-scenario-design`
+  - `webaudio-gemini-live`
+  - `cbt-clinical-evaluation`
+  - `azure-functions-genai`
+- Authored developer CLI helpers in `scripts/`:
+  - `scripts/validate-scenarios.ts` (Validates 14 built-in scenarios against clinical schema)
+  - `scripts/simulate-cbt-session.ts` (Headless multi-turn roleplay & clinical scoring simulator)
+- Updated `package.json` with `validate:scenarios` and `simulate:session` npm script targets and installed `tsx`.
+- Elevated `README.md` to publication-grade documentation with complete architecture diagrams, endpoint matrices, and developer guide.
+
+**Files Changed:**
+- `components/ui/badge.tsx`
+- `constants.ts`
+- `package.json`
+- `package-lock.json`
+- `api/api.csproj`
+- `api/ChatFunction.cs`
+- `api/AnalysisFunction.cs`
+- `api/ScenarioFunction.cs`
+- `scripts/validate-scenarios.ts`
+- `scripts/simulate-cbt-session.ts`
+- `.agents/skills/cbt-scenario-design/SKILL.md`
+- `.agents/skills/webaudio-gemini-live/SKILL.md`
+- `.agents/skills/cbt-clinical-evaluation/SKILL.md`
+- `.agents/skills/azure-functions-genai/SKILL.md`
+- `AGENTS.md`
+- `GEMINI.md`
+- `README.md`
+- `CHANGELOG.md`
diff --git a/GEMINI.md b/GEMINI.md
new file mode 100644
index 0000000..fd3b058
--- /dev/null
+++ b/GEMINI.md
@@ -0,0 +1,16 @@
+# GEMINI.md - Cognitive Clarity Architectural Rules
+
+This repository defines the **Cognitive Clarity** adaptive clinical simulation system.
+
+---
+
+## Autonomous Agent Invariants
+
+1. **OpenRouter Exclusive Execution**: All AI operations (text dialogue streaming, clinical turn analysis, scenario generation, and vocal speech synthesis) MUST route exclusively through OpenRouter API (`https://openrouter.ai/api/v1`). Direct Google API keys or endpoints are strictly forbidden.
+2. **Strict Character Boundaries**: AI roleplay characters must NEVER provide clinical meta-commentary, congratulations, or diagnostic advice within dialogue turns. Feedback is handled asynchronously by the supervisor engine.
+3. **Audio Stream Integrity**: WebAudio processing must properly manage WebAudio Context lifecycles, avoid main-thread blocking, and drive FFT visualizer states accurately.
+4. **C# Isolated Functions Parity**: Ensure `api/api.csproj` builds cleanly with .NET 8, maintaining type fidelity with TypeScript schemas in `types.ts` and consuming OpenRouter via `HttpClientFactory`.
+5. **Zero Residual Slop**: Temporary scripts or exploratory files must be placed in `scripts/` or scratch directories and never committed in a broken state.
+6. **Continuous Changelog**: Every feature, bugfix, or architectural update must be recorded in `CHANGELOG.md`.
+
+Refer to [AGENTS.md](file:///Users/moo/Development/Repositories/clarity-helper/AGENTS.md) for full workspace specifications.
diff --git a/README.md b/README.md
index f08bdf9..e34195f 100644
--- a/README.md
+++ b/README.md
@@ -1,20 +1,152 @@
 <div align="center">
-<img width="1200" height="475" alt="GHBanner" src="https://github.com/user-attachments/assets/0aa67016-6eaf-458a-adb2-6e31a0763ed6" />
+  <img width="1200" height="475" alt="Cognitive Clarity Banner" src="https://github.com/user-attachments/assets/0aa67016-6eaf-458a-adb2-6e31a0763ed6" />
+  <h1>🧠 Cognitive Clarity</h1>
+  <p><strong>An Adaptive Clinical Training & Multimodal Roleplay Environment for Cognitive Behavioral Therapy (CBT)</strong></p>
+  <p>
+    <a href="#key-features">Key Features</a> •
+    <a href="#system-architecture">Architecture</a> •
+    <a href="#getting-started">Getting Started</a> •
+    <a href="#cbt-framework--scenarios">CBT Scenarios</a> •
+    <a href="#serverless-backend-api">Serverless Backend</a> •
+    <a href="#developer-tools--scripts">Developer Tools</a> •
+    <a href="#agents--skills">Agents & Skills</a>
+  </p>
 </div>
 
-# Run and deploy your AI Studio app
+---
 
-This contains everything you need to run your app locally.
+## 🌟 Key Features
 
-View your app in AI Studio: https://ai.studio/apps/56e6d01a-b890-4a16-b7c2-fc7b3e52f59a
+- **🎙️ Real-Time Voice & Text Roleplay**: Natural interactive voice roleplay and streaming text chat powered exclusively by OpenRouter (`google/gemini-3.8-flash`, `google/gemini-3.7-flash`, `anthropic/claude-3.5-haiku`, `meta-llama/llama-3.3-70b-instruct`) with WebAudio speech synthesis and FFT frequency visualization.
+- **👁️ Out-of-Band Clinical Supervisor**: Real-time turn-by-turn clinical supervision evaluating cognitive distortions (Mind Reading, Catastrophizing, Should Statements, etc.) and effective restructuring techniques without breaking character during roleplay.
+- **📊 Comprehensive Session Diagnostic Reports**: End-of-session case conceptualization reports with psychometric scoring (1-5), evidence quotes, cognitive restructuring trajectories, and one-click Markdown & JSON exports.
+- **🛠️ AI Custom Scenario Architect**: Dynamic clinical scenario generator creating calibrated roleplays across `Social Anxiety`, `Workplace`, `Relationships`, and `Self-Talk` at `Beginner`, `Intermediate`, and `Advanced` difficulty levels.
+- **📖 Evidence-Based CBT Reference Guide**: Searchable clinical glossary covering 12 cognitive distortions, 5 therapeutic techniques (Cognitive Reframing, Behavioral Activation, Radical Acceptance, etc.), and concepts (Spotlight Effect, Gray Rock Method).
+- **⚡ Progressive Web App (PWA)**: Built with `vite-plugin-pwa` and Workbox custom service worker (`sw.ts`) for offline caching, asset precaching, and mobile standalone installation.
+- **☁️ Serverless C# API Layer**: Optional headless backend implemented in Azure Functions v4 (.NET 8 Isolated Worker) powered by OpenRouter.
 
-## Run Locally
+---
 
-**Prerequisites:**  Node.js
+## 🏛️ System Architecture
 
+```mermaid
+graph TD
+    User([User Voice / Text]) <--> Frontend[React 19 + Vite + Tailwind + Radix UI]
+    
+    subgraph "Frontend Real-Time Multimodal Layer"
+        Frontend <--> WebAudio[WebAudio DSP Engine: Live FFT Analysis & Speech Synthesis]
+        Frontend <--> OpenRouterClient[OpenRouter API: Streaming Roleplay & Structured Analysis]
+        OpenRouterClient --> Transcripts[Real-Time Transcription Pipeline]
+        Transcripts --> Supervisor[Parallel Turn Supervisor: OpenRouter google/gemini-3.8-flash]
+        Supervisor --> LiveInsights[LiveInsightPanel & SessionReport]
+    end
 
-1. Install dependencies:
-   `npm install`
-2. Set the `GEMINI_API_KEY` in [.env.local](.env.local) to your Gemini API key
-3. Run the app:
-   `npm run dev`
+    subgraph "Backend Serverless Layer (api/)"
+        Frontend -.->|Headless / Batch Evaluation| AzFunc[Azure Functions v4 .NET 8 Isolated Worker]
+        AzFunc --> ChatFunc["/api/chat (ChatProgression)"]
+        AzFunc --> AnalysisFunc["/api/analysis (ClinicalAnalysis)"]
+        AzFunc --> ScenarioFunc["/api/scenario/generate (GenerateScenario)"]
+        AzFunc <--> OpenRouterAPI[OpenRouter API /chat/completions]
+    end
+
+    subgraph "Local Persistence & Offline"
+        Frontend <--> LocalStorage[LocalStorage: Custom Scenarios, Settings & Session History]
+        Frontend <--> ServiceWorker[Vite PWA / Workbox Service Worker: sw.ts]
+    end
+```
+
+---
+
+## 🚀 Getting Started
+
+### Prerequisites
+
+- **Node.js**: v20+ or v22+
+- **npm**: v10+
+- **.NET 8.0 SDK** (optional, for backend Azure Functions)
+- **OpenRouter API Key**: [Get an API Key from OpenRouter](https://openrouter.ai/keys)
+
+### 1. Installation
+
+```bash
+git clone https://github.com/jpremill/clarity-helper.git
+cd clarity-helper
+npm install
+```
+
+### 2. Configure Environment Variables
+
+Create `.env.local` in the project root (or set your key directly in the in-app Settings modal):
+
+```env
+VITE_OPENROUTER_API_KEY=your_openrouter_api_key_here
+OPENROUTER_API_KEY=your_openrouter_api_key_here
+```
+
+### 3. Run Development Server
+
+```bash
+npm run dev
+```
+Open [http://localhost:3000](http://localhost:3000) in your browser.
+
+---
+
+## 🧠 CBT Framework & Scenarios
+
+Cognitive Clarity includes 14 pre-calibrated clinical scenarios across 4 core domains:
+
+| Category | Beginner | Intermediate | Advanced |
+|:---|:---|:---|:---|
+| **Relationships** | *The Silent Friend* (s1) | *The Friend's Criticism* (s13) | *Intrusive Relative* (s11), *The Unpaid Debt* (s7) |
+| **Workplace** | — | *Critical Feedback* (s2), *The Deadline Slip* (s9) | *The Salary Discussion* (s8), *The Job Interview* (s12) |
+| **Social Anxiety** | *Booking an Appointment* (s5) | *The Defective Return* (s6), *The Social 'No'* (s10) | *The Social Spotlight* (s3) |
+| **Self-Talk** | *Inner Critic Echo* (s4) | — | *The Unexpected Health Symptom* (s14) |
+
+---
+
+## ☁️ Serverless Backend API (`api/`)
+
+The repository includes a .NET 8 Azure Functions isolated worker backend:
+
+```bash
+# Build the .NET Functions project
+dotnet build api/api.csproj
+```
+
+### Endpoints
+
+| Route | Method | Description |
+|:---|:---|:---|
+| `/api/chat` | `POST` | Advances the character roleplay dialogue with strict anti-meta guardrails. |
+| `/api/analysis` | `POST` | Analyzes a dialogue turn for cognitive distortions and returns structured feedback. |
+| `/api/scenario/generate` | `POST` | Generates a complete, validated scenario specification using JSON schema constraints. |
+
+---
+
+## 🛠️ Developer Tools & Scripts
+
+| Script | Command | Purpose |
+|:---|:---|:---|
+| **Run Unit Tests** | `npm test` | Executes native Node.js / `tsx` unit test suites. |
+| **Typecheck** | `npm run lint` | Runs `tsc --noEmit` to verify type safety. |
+| **Build SPA & PWA** | `npm run build:nobump` | Compiles Vite production bundle + Service Worker into `dist/`. |
+| **Validate Scenarios** | `npm run validate:scenarios` | Validates all 14 built-in scenarios against schema and distortion rules. |
+| **Simulate Session** | `npm run simulate:session` | Headless multi-turn roleplay & clinical scoring simulator harness. |
+
+---
+
+## 🤖 Agents & Skills
+
+Specialized agent configurations and workflow blueprints are organized in `.agents/skills/`:
+
+- [`.agents/skills/cbt-scenario-design/SKILL.md`](.agents/skills/cbt-scenario-design/SKILL.md): Scenario creation, difficulty calibration, and psychological persona guidelines.
+- [`.agents/skills/webaudio-gemini-live/SKILL.md`](.agents/skills/webaudio-gemini-live/SKILL.md): Real-time duplex WebAudio streaming, PCM conversions, and visualizer math.
+- [`.agents/skills/cbt-clinical-evaluation/SKILL.md`](.agents/skills/cbt-clinical-evaluation/SKILL.md): Clinical supervisor scoring, distortion taxonomy, and diagnostic report structures.
+- [`.agents/skills/azure-functions-genai/SKILL.md`](.agents/skills/azure-functions-genai/SKILL.md): C# isolated worker API design with `Google.GenAI` 1.20+ SDK.
+
+---
+
+## 📄 License
+
+MIT License. Designed with evidence-based Cognitive Behavioral Therapy principles.
diff --git a/api/AnalysisFunction.cs b/api/AnalysisFunction.cs
index 64ea565..224beb4 100644
--- a/api/AnalysisFunction.cs
+++ b/api/AnalysisFunction.cs
@@ -1,10 +1,11 @@
 using System.Net;
+using System.Net.Http.Headers;
+using System.Text;
 using System.Text.Json;
+using System.Text.Json.Serialization;
 using Microsoft.Azure.Functions.Worker;
 using Microsoft.Azure.Functions.Worker.Http;
 using Microsoft.Extensions.Logging;
-using Google.GenAI;
-using System.Text.Json.Serialization;
 
 namespace CognitiveClarity.api
 {
@@ -21,22 +22,27 @@ namespace CognitiveClarity.api
 
         [JsonPropertyName("cbtFocus")]
         public List<string> CBTFocus { get; set; } = new();
+
+        [JsonPropertyName("model")]
+        public string Model { get; set; } = "google/gemini-3.8-flash";
     }
 
     public class AnalysisFunction
     {
         private readonly ILogger _logger;
+        private readonly IHttpClientFactory _httpClientFactory;
 
-        public AnalysisFunction(ILoggerFactory loggerFactory)
+        public AnalysisFunction(ILoggerFactory loggerFactory, IHttpClientFactory httpClientFactory)
         {
             _logger = loggerFactory.CreateLogger<AnalysisFunction>();
+            _httpClientFactory = httpClientFactory;
         }
 
         [Function("ClinicalAnalysis")]
         public async Task<HttpResponseData> Run(
             [HttpTrigger(AuthorizationLevel.Anonymous, "post", Route = "analysis")] HttpRequestData req)
         {
-            _logger.LogInformation("C# HTTP trigger function processed a clinical analysis request.");
+            _logger.LogInformation("C# HTTP trigger function processed a clinical analysis request via OpenRouter.");
 
             var requestBody = await new StreamReader(req.Body).ReadToEndAsync();
             var data = JsonSerializer.Deserialize<AnalysisRequest>(requestBody);
@@ -48,67 +54,84 @@ namespace CognitiveClarity.api
                 return badResponse;
             }
 
-            var apiKey = Environment.GetEnvironmentVariable("GEMINI_API_KEY");
+            var apiKey = System.Environment.GetEnvironmentVariable("OPENROUTER_API_KEY");
             if (string.IsNullOrEmpty(apiKey))
             {
-                _logger.LogError("GEMINI_API_KEY is missing from environment variables.");
+                _logger.LogError("OPENROUTER_API_KEY is missing from environment variables.");
                 return req.CreateResponse(HttpStatusCode.InternalServerError);
             }
 
-            // Initialize the Gemini Client
-            var ai = new GeminiClient(apiKey: apiKey);
+            var systemAnalysisPrompt = $@"You are a master clinical psychologist specializing in Cognitive Behavioral Therapy (CBT).
+You are supervising an interactive CBT simulation.
+SCENARIO: {data.ScenarioTitle} - {data.ScenarioDescription}
+FOCUS AREAS: {string.Join(", ", data.CBTFocus)}
 
-            var systemAnalysisPrompt = @"
-You are a master clinical psychologist specializing in Cognitive Behavioral Therapy (CBT).
-You are observing a roleplay session between a user and an AI character.
-Analyze the user's latest response for:
-1. Cognitive distortions present (if any).
-2. CBT techniques successfully applied by the user (if any).
-3. A brief, encouraging clinical insight or redirection (max 2 sentences).
-Be precise, clinical, and constructive.
-";
+Return ONLY a valid JSON object matching this schema:
+{{
+  ""analysis"": {{
+    ""distortions"": [""string""],
+    ""isAdaptive"": boolean,
+    ""evidence"": ""string""
+  }},
+  ""rating"": {{
+    ""score"": number (1-5),
+    ""reason"": ""string""
+  }},
+  ""suggestions"": {{
+    ""alternativeThought"": ""string"",
+    ""behavioralStep"": ""string""
+  }}
+}}";
 
-            var analysisSystemInstruction = $@"{systemAnalysisPrompt}
-SCENARIO CONTEXT:
-Title: {data.ScenarioTitle}
-Description: {data.ScenarioDescription}
-CBT Focus Areas: {string.Join(", ", data.CBTFocus)}";
-
-            var schema = new Schema
+            var payload = new
             {
-                Type = TypeEnum.Object,
-                Properties = new Dictionary<string, Schema>
+                model = string.IsNullOrEmpty(data.Model) ? "google/gemini-3.8-flash" : data.Model,
+                messages = new object[]
                 {
-                    { "distortionsIdentified", new Schema { Type = TypeEnum.Array, Items = new Schema { Type = TypeEnum.String } } },
-                    { "techniquesUsed", new Schema { Type = TypeEnum.Array, Items = new Schema { Type = TypeEnum.String } } },
-                    { "clinicalInsight", new Schema { Type = TypeEnum.String } },
-                    { "feedbackType", new Schema { Type = TypeEnum.String, Enum = new List<string> { "Constructive", "Positive", "Neutral" } } }
+                    new { role = "system", content = systemAnalysisPrompt },
+                    new { role = "user", content = data.TurnContext }
                 },
-                Required = new List<string> { "distortionsIdentified", "techniquesUsed", "clinicalInsight", "feedbackType" }
+                response_format = new { type = "json_object" },
+                temperature = 0.2
             };
 
-            try 
+            try
             {
-                var response = await ai.Models.GenerateContentAsync(
-                    model: "gemini-3.0-flash", 
-                    contents: data.TurnContext,
-                    new GenerateContentConfig 
-                    {
-                        SystemInstruction = new Content { Parts = new List<Part> { new Part { Text = analysisSystemInstruction } } },
-                        ResponseMimeType = "application/json",
-                        ResponseSchema = schema
-                    });
+                var client = _httpClientFactory.CreateClient();
+                client.DefaultRequestHeaders.Authorization = new AuthenticationHeaderValue("Bearer", apiKey);
+                client.DefaultRequestHeaders.Add("HTTP-Referer", "https://cognitive-clarity.app");
+                client.DefaultRequestHeaders.Add("X-Title", "Cognitive Clarity");
+
+                var content = new StringContent(JsonSerializer.Serialize(payload), Encoding.UTF8, "application/json");
+                var response = await client.PostAsync("https://openrouter.ai/api/v1/chat/completions", content);
+
+                if (!response.IsSuccessStatusCode)
+                {
+                    var errText = await response.Content.ReadAsStringAsync();
+                    _logger.LogError("OpenRouter returned error {Status}: {Error}", response.StatusCode, errText);
+                    var errResponse = req.CreateResponse(response.StatusCode);
+                    await errResponse.WriteStringAsync(errText);
+                    return errResponse;
+                }
+
+                var resJson = await response.Content.ReadAsStringAsync();
+                using var doc = JsonDocument.Parse(resJson);
+                var rawResult = doc.RootElement
+                    .GetProperty("choices")[0]
+                    .GetProperty("message")
+                    .GetProperty("content")
+                    .GetString() ?? "{}";
 
                 var successResponse = req.CreateResponse(HttpStatusCode.OK);
                 successResponse.Headers.Add("Content-Type", "application/json");
-                await successResponse.WriteStringAsync(response.Text!);
+                await successResponse.WriteStringAsync(rawResult);
                 return successResponse;
             }
             catch (Exception ex)
             {
-                _logger.LogError(ex, "Failed to generate analysis via Gemini API.");
+                _logger.LogError(ex, "Failed to generate analysis via OpenRouter API.");
                 var errorResponse = req.CreateResponse(HttpStatusCode.InternalServerError);
-                await errorResponse.WriteStringAsync("Error communicating with Gemini API.");
+                await errorResponse.WriteStringAsync("Error communicating with OpenRouter API.");
                 return errorResponse;
             }
         }
diff --git a/api/ChatFunction.cs b/api/ChatFunction.cs
index ef4ec91..957110c 100644
--- a/api/ChatFunction.cs
+++ b/api/ChatFunction.cs
@@ -1,17 +1,18 @@
 using System.Net;
+using System.Net.Http.Headers;
+using System.Text;
 using System.Text.Json;
+using System.Text.Json.Serialization;
 using Microsoft.Azure.Functions.Worker;
 using Microsoft.Azure.Functions.Worker.Http;
 using Microsoft.Extensions.Logging;
-using Google.GenAI;
-using System.Text.Json.Serialization;
 
 namespace CognitiveClarity.api
 {
     public class ChatMessage
     {
         [JsonPropertyName("role")]
-        public string Role { get; set; } = string.Empty; // "user" or "model"
+        public string Role { get; set; } = string.Empty; // "user" or "model" or "assistant"
 
         [JsonPropertyName("text")]
         public string Text { get; set; } = string.Empty;
@@ -24,22 +25,27 @@ namespace CognitiveClarity.api
 
         [JsonPropertyName("systemInstruction")]
         public string SystemInstruction { get; set; } = string.Empty;
+
+        [JsonPropertyName("model")]
+        public string Model { get; set; } = "google/gemini-3.8-flash";
     }
 
     public class ChatFunction
     {
         private readonly ILogger _logger;
+        private readonly IHttpClientFactory _httpClientFactory;
 
-        public ChatFunction(ILoggerFactory loggerFactory)
+        public ChatFunction(ILoggerFactory loggerFactory, IHttpClientFactory httpClientFactory)
         {
             _logger = loggerFactory.CreateLogger<ChatFunction>();
+            _httpClientFactory = httpClientFactory;
         }
 
         [Function("ChatProgression")]
         public async Task<HttpResponseData> Run(
             [HttpTrigger(AuthorizationLevel.Anonymous, "post", Route = "chat")] HttpRequestData req)
         {
-            _logger.LogInformation("C# HTTP trigger function processed a chat progression request.");
+            _logger.LogInformation("C# HTTP trigger function processed a chat progression request via OpenRouter.");
 
             var requestBody = await new StreamReader(req.Body).ReadToEndAsync();
             var data = JsonSerializer.Deserialize<ChatRequest>(requestBody);
@@ -51,72 +57,92 @@ namespace CognitiveClarity.api
                 return badResponse;
             }
 
-            var apiKey = Environment.GetEnvironmentVariable("GEMINI_API_KEY");
+            var apiKey = System.Environment.GetEnvironmentVariable("OPENROUTER_API_KEY");
             if (string.IsNullOrEmpty(apiKey))
             {
-                _logger.LogError("GEMINI_API_KEY is missing from environment variables.");
+                _logger.LogError("OPENROUTER_API_KEY is missing from environment variables.");
                 return req.CreateResponse(HttpStatusCode.InternalServerError);
             }
 
-            // Initialize the Gemini Client
-            var ai = new GeminiClient(apiKey: apiKey);
-
-            // Construct contents from history
-            var contents = new List<Content>();
-            foreach (var msg in data.History)
-            {
-                contents.Add(new Content
-                {
-                    Role = msg.Role,
-                    Parts = new List<Part> { new Part { Text = msg.Text } }
-                });
-            }
-
             var roleplaySystemInstruction = $@"{data.SystemInstruction}
       
-      [CONTEXT]
-      You are participating in a clinical CBT roleplay simulation. 
-      The instructions above define your character, the scenario, and your internal CBT logic.
-      
-      [TASK]
-      Respond to the user naturally in character to advance the roleplay scenario.
-      
-      [CONSTRAINTS]
-      - CRITICAL: Stay strictly in character as the persona defined in the scenario.
-      - CRITICAL: NEVER provide clinical feedback, advice, or meta-commentary about the user's progress.
-      - CRITICAL: NEVER use phrases like ""Great job holding your boundary"" or ""Feedback:"".
-      - CRITICAL: Do not congratulate the user on using CBT techniques; simply react as the character would.
-      - If the user successfully concludes the scenario, end the dialogue naturally.
-      
-      [OUTPUT REQUIREMENTS]
-      Return the character's direct dialogue response. Keep it conversational and proportional to the user's input.
-            ";
+[CONTEXT]
+You are participating in a clinical CBT roleplay simulation. 
+The instructions above define your character, the scenario, and your internal CBT logic.
 
-            try 
+[TASK]
+Respond to the user naturally in character to advance the roleplay scenario.
+
+[CONSTRAINTS]
+- CRITICAL: Stay strictly in character as the persona defined in the scenario.
+- CRITICAL: NEVER provide clinical feedback, advice, or meta-commentary about the user's progress.
+- CRITICAL: NEVER use phrases like ""Great job holding your boundary"" or ""Feedback:"".
+- CRITICAL: Do not congratulate the user on using CBT techniques; simply react as the character would.
+- If the user successfully concludes the scenario, end the dialogue naturally.
+
+[OUTPUT REQUIREMENTS]
+Return the character's direct dialogue response. Keep it conversational and proportional to the user's input.";
+
+            var messages = new List<object>
             {
-                var response = await ai.Models.GenerateContentAsync(
-                    model: "gemini-3.0-flash", 
-                    contents: contents,
-                    new GenerateContentConfig 
-                    {
-                        SystemInstruction = new Content { Parts = new List<Part> { new Part { Text = roleplaySystemInstruction } } },
-                        // Streaming isn't natively supported in standard HTTP Functions easily without Server-Sent Events (SSE).
-                        // We will return a standard block response for now, which simplifies the architecture.
-                    });
+                new { role = "system", content = roleplaySystemInstruction }
+            };
+
+            foreach (var msg in data.History)
+            {
+                messages.Add(new
+                {
+                    role = msg.Role == "model" ? "assistant" : msg.Role,
+                    content = msg.Text
+                });
+            }
+
+            var payload = new
+            {
+                model = string.IsNullOrEmpty(data.Model) ? "google/gemini-3.8-flash" : data.Model,
+                messages = messages,
+                temperature = 0.7,
+                max_tokens = 1000
+            };
+
+            try
+            {
+                var client = _httpClientFactory.CreateClient();
+                client.DefaultRequestHeaders.Authorization = new AuthenticationHeaderValue("Bearer", apiKey);
+                client.DefaultRequestHeaders.Add("HTTP-Referer", "https://cognitive-clarity.app");
+                client.DefaultRequestHeaders.Add("X-Title", "Cognitive Clarity");
+
+                var content = new StringContent(JsonSerializer.Serialize(payload), Encoding.UTF8, "application/json");
+                var response = await client.PostAsync("https://openrouter.ai/api/v1/chat/completions", content);
+
+                if (!response.IsSuccessStatusCode)
+                {
+                    var errText = await response.Content.ReadAsStringAsync();
+                    _logger.LogError("OpenRouter returned error {Status}: {Error}", response.StatusCode, errText);
+                    var errResponse = req.CreateResponse(response.StatusCode);
+                    await errResponse.WriteStringAsync(errText);
+                    return errResponse;
+                }
+
+                var resJson = await response.Content.ReadAsStringAsync();
+                using var doc = JsonDocument.Parse(resJson);
+                var botText = doc.RootElement
+                    .GetProperty("choices")[0]
+                    .GetProperty("message")
+                    .GetProperty("content")
+                    .GetString() ?? string.Empty;
 
                 var successResponse = req.CreateResponse(HttpStatusCode.OK);
                 successResponse.Headers.Add("Content-Type", "application/json");
-                
-                // Return just the text in a JSON wrapper
-                var resultObj = new { text = response.Text };
+                var resultObj = new { text = botText };
                 await successResponse.WriteStringAsync(JsonSerializer.Serialize(resultObj));
                 return successResponse;
             }
             catch (Exception ex)
             {
-                _logger.LogError(ex, "Failed to generate chat progression via Gemini API.");
+                _logger.LogError(ex, "Failed to generate chat progression via OpenRouter API.");
                 var errorResponse = req.CreateResponse(HttpStatusCode.InternalServerError);
-                await errorResponse.WriteStringAsync("Error communicating with Gemini API.");
+                await errorResponse.WriteStringAsync("Error communicating with OpenRouter API.");
                 return errorResponse;
             }
         }
diff --git a/api/Program.cs b/api/Program.cs
index 704475c..b5b4e06 100644
--- a/api/Program.cs
+++ b/api/Program.cs
@@ -8,6 +8,7 @@ var builder = FunctionsApplication.CreateBuilder(args);
 builder.ConfigureFunctionsWebApplication();
 
 builder.Services
+    .AddHttpClient()
     .AddApplicationInsightsTelemetryWorkerService()
     .ConfigureFunctionsApplicationInsights();
 
diff --git a/api/ScenarioFunction.cs b/api/ScenarioFunction.cs
index 5dabd43..d4e02bc 100644
--- a/api/ScenarioFunction.cs
+++ b/api/ScenarioFunction.cs
@@ -1,10 +1,11 @@
 using System.Net;
+using System.Net.Http.Headers;
+using System.Text;
 using System.Text.Json;
+using System.Text.Json.Serialization;
 using Microsoft.Azure.Functions.Worker;
 using Microsoft.Azure.Functions.Worker.Http;
 using Microsoft.Extensions.Logging;
-using Google.GenAI;
-using System.Text.Json.Serialization;
 
 namespace CognitiveClarity.api
 {
@@ -18,22 +19,27 @@ namespace CognitiveClarity.api
 
         [JsonPropertyName("difficulty")]
         public string Difficulty { get; set; } = "Intermediate";
+
+        [JsonPropertyName("model")]
+        public string Model { get; set; } = "google/gemini-3.8-flash";
     }
 
     public class ScenarioFunction
     {
         private readonly ILogger _logger;
+        private readonly IHttpClientFactory _httpClientFactory;
 
-        public ScenarioFunction(ILoggerFactory loggerFactory)
+        public ScenarioFunction(ILoggerFactory loggerFactory, IHttpClientFactory httpClientFactory)
         {
             _logger = loggerFactory.CreateLogger<ScenarioFunction>();
+            _httpClientFactory = httpClientFactory;
         }
 
         [Function("GenerateScenario")]
         public async Task<HttpResponseData> Run(
             [HttpTrigger(AuthorizationLevel.Anonymous, "post", Route = "scenario/generate")] HttpRequestData req)
         {
-            _logger.LogInformation("C# HTTP trigger function processed a scenario generation request.");
+            _logger.LogInformation("C# HTTP trigger function processed a scenario generation request via OpenRouter.");
 
             var requestBody = await new StreamReader(req.Body).ReadToEndAsync();
             var data = JsonSerializer.Deserialize<ScenarioRequest>(requestBody);
@@ -45,84 +51,100 @@ namespace CognitiveClarity.api
                 return badResponse;
             }
 
-            var apiKey = Environment.GetEnvironmentVariable("GEMINI_API_KEY");
+            var apiKey = System.Environment.GetEnvironmentVariable("OPENROUTER_API_KEY");
             if (string.IsNullOrEmpty(apiKey))
             {
-                _logger.LogError("GEMINI_API_KEY is missing from environment variables.");
+                _logger.LogError("OPENROUTER_API_KEY is missing from environment variables.");
                 return req.CreateResponse(HttpStatusCode.InternalServerError);
             }
 
-            // Initialize the Gemini Client
-            var ai = new GeminiClient(apiKey: apiKey);
-
             var selectedContext = data.SelectedConcepts.Count > 0 
                 ? $"Focus specifically on these CBT concepts: {string.Join(", ", data.SelectedConcepts)}."
                 : "";
 
             var systemInstruction = $@"
-            [CONTEXT]
-            You are a Clinical CBT Scenario Architect. 
-            The user requires a structured clinical simulation designed to address specific cognitive distortions and behavioral challenges.
-            Clinical Focus: {selectedContext}
-            
-            [TASK]
-            Transform the user's prompt into a cohesive, structured clinical scenario that sets up a targeted roleplay environment.
-            
-            [CONSTRAINTS]
-            - CATEGORIZATION: You MUST categorize the scenario appropriately (Social Anxiety, Workplace, Relationships, or Self-Talk).
-            - DIFFICULTY CALIBRATION: The requested difficulty is '{data.Difficulty}'.
-              - 'Beginner': Low stakes, high support, clear-cut distortions, AI character is cooperative.
-              - 'Intermediate': Ambiguous stakes, moderate social friction, subtle distortions, AI character has specific needs.
-              - 'Advanced': High emotional triggers, persistent clinical resistance, complex cognitive patterns.
-            - INTERNAL LOGIC: Provide a detailed ""INTERNAL CBT LOGIC"" section instructing the AI character how to react to the user's progress or cognitive lapses during the future roleplay.
-            - CHARACTER VOICE: Define a realistic, emotionally consistent voice profile.
-            
-            [OUTPUT REQUIREMENTS]
-            Return ONLY a valid JSON object conforming exactly to the requested schema. Ensure all arrays and nested objects are populated correctly.
-            ";
+[CONTEXT]
+You are a Clinical CBT Scenario Architect. 
+The user requires a structured clinical simulation designed to address specific cognitive distortions and behavioral challenges.
+Clinical Focus: {selectedContext}
 
-            var schema = new Schema
-            {
-                Type = TypeEnum.Object,
-                Properties = new Dictionary<string, Schema>
-                {
-                    { "id", new Schema { Type = TypeEnum.String } },
-                    { "title", new Schema { Type = TypeEnum.String } },
-                    { "characterName", new Schema { Type = TypeEnum.String } },
-                    { "description", new Schema { Type = TypeEnum.String } },
-                    { "category", new Schema { Type = TypeEnum.String, Enum = new List<string> { "Social Anxiety", "Workplace", "Relationships", "Self-Talk" } } },
-                    { "difficulty", new Schema { Type = TypeEnum.String, Enum = new List<string> { "Beginner", "Intermediate", "Advanced" } } },
-                    { "systemInstruction", new Schema { Type = TypeEnum.String } },
-                    { "initialMessage", new Schema { Type = TypeEnum.String } },
-                    { "cbtFocus", new Schema { Type = TypeEnum.Array, Items = new Schema { Type = TypeEnum.String } } }
-                },
-                Required = new List<string> { "id", "title", "characterName", "description", "category", "difficulty", "systemInstruction", "initialMessage", "cbtFocus" }
-            };
+[TASK]
+Transform the user's prompt into a cohesive, structured clinical scenario that sets up a targeted roleplay environment.
+
+[CONSTRAINTS]
+- CATEGORIZATION: You MUST categorize the scenario appropriately (Social Anxiety, Workplace, Relationships, or Self-Talk).
+- DIFFICULTY CALIBRATION: The requested difficulty is '{data.Difficulty}'.
+  - 'Beginner': Low stakes, high support, clear-cut distortions, AI character is cooperative.
+  - 'Intermediate': Ambiguous stakes, moderate social friction, subtle distortions, AI character has specific needs.
+  - 'Advanced': High emotional triggers, persistent clinical resistance, complex cognitive patterns.
+- INTERNAL LOGIC: Provide a detailed ""INTERNAL CBT LOGIC"" section instructing the AI character how to react to the user's progress or cognitive lapses during the future roleplay.
+- CHARACTER VOICE: Define a realistic, emotionally consistent voice profile.
+
+[OUTPUT REQUIREMENTS]
+Return ONLY a valid JSON object matching this schema:
+{{
+  ""id"": ""string"",
+  ""title"": ""string"",
+  ""characterName"": ""string"",
+  ""description"": ""string"",
+  ""category"": ""Social Anxiety"" | ""Workplace"" | ""Relationships"" | ""Self-Talk"",
+  ""difficulty"": ""Beginner"" | ""Intermediate"" | ""Advanced"",
+  ""systemInstruction"": ""string"",
+  ""initialMessage"": ""string"",
+  ""cbtFocus"": [""string""]
+}}";
 
             var promptText = $"Generate a clinical scenario for: {(string.IsNullOrWhiteSpace(data.Prompt) ? "A scenario exploring the chosen CBT concepts." : data.Prompt)}";
 
-            try 
+            var payload = new
             {
-                var response = await ai.Models.GenerateContentAsync(
-                    model: "gemini-3.0-flash", 
-                    contents: promptText,
-                    new GenerateContentConfig 
-                    {
-                        SystemInstruction = new Content { Parts = new List<Part> { new Part { Text = systemInstruction } } },
-                        ResponseMimeType = "application/json",
-                        ResponseSchema = schema
-                    });
+                model = string.IsNullOrEmpty(data.Model) ? "google/gemini-3.8-flash" : data.Model,
+                messages = new object[]
+                {
+                    new { role = "system", content = systemInstruction },
+                    new { role = "user", content = promptText }
+                },
+                response_format = new { type = "json_object" },
+                temperature = 0.7
+            };
+
+            try
+            {
+                var client = _httpClientFactory.CreateClient();
+                client.DefaultRequestHeaders.Authorization = new AuthenticationHeaderValue("Bearer", apiKey);
+                client.DefaultRequestHeaders.Add("HTTP-Referer", "https://cognitive-clarity.app");
+                client.DefaultRequestHeaders.Add("X-Title", "Cognitive Clarity");
+
+                var content = new StringContent(JsonSerializer.Serialize(payload), Encoding.UTF8, "application/json");
+                var response = await client.PostAsync("https://openrouter.ai/api/v1/chat/completions", content);
+
+                if (!response.IsSuccessStatusCode)
+                {
+                    var errText = await response.Content.ReadAsStringAsync();
+                    _logger.LogError("OpenRouter returned error {Status}: {Error}", response.StatusCode, errText);
+                    var errResponse = req.CreateResponse(response.StatusCode);
+                    await errResponse.WriteStringAsync(errText);
+                    return errResponse;
+                }
+
+                var resJson = await response.Content.ReadAsStringAsync();
+                using var doc = JsonDocument.Parse(resJson);
+                var scenarioJson = doc.RootElement
+                    .GetProperty("choices")[0]
+                    .GetProperty("message")
+                    .GetProperty("content")
+                    .GetString() ?? "{}";
 
                 var successResponse = req.CreateResponse(HttpStatusCode.OK);
                 successResponse.Headers.Add("Content-Type", "application/json");
-                await successResponse.WriteStringAsync(response.Text!);
+                await successResponse.WriteStringAsync(scenarioJson);
                 return successResponse;
             }
             catch (Exception ex)
             {
-                _logger.LogError(ex, "Failed to generate scenario via Gemini API.");
+                _logger.LogError(ex, "Failed to generate scenario via OpenRouter API.");
                 var errorResponse = req.CreateResponse(HttpStatusCode.InternalServerError);
-                await errorResponse.WriteStringAsync("Error communicating with Gemini API.");
+                await errorResponse.WriteStringAsync("Error communicating with OpenRouter API.");
                 return errorResponse;
             }
         }
diff --git a/api/api.csproj b/api/api.csproj
index 9022e8b..d0b19ff 100644
--- a/api/api.csproj
+++ b/api/api.csproj
@@ -1,4 +1,4 @@
-<Project Sdk="Microsoft.NET.Sdk">
+<Project Sdk="Microsoft.NET.Sdk">
 
   <PropertyGroup>
     <TargetFramework>net8.0</TargetFramework>
@@ -10,7 +10,6 @@
 
   <ItemGroup>
     <FrameworkReference Include="Microsoft.AspNetCore.App" />
-    <PackageReference Include="Google.GenAI" Version="1.3.0" />
     <PackageReference Include="Microsoft.ApplicationInsights.WorkerService" Version="2.23.0" />
     <PackageReference Include="Microsoft.Azure.Functions.Worker" Version="2.50.0" />
     <PackageReference Include="Microsoft.Azure.Functions.Worker.ApplicationInsights" Version="2.50.0" />
diff --git a/api/local.settings.example.json b/api/local.settings.example.json
new file mode 100644
index 0000000..ebd5994
--- /dev/null
+++ b/api/local.settings.example.json
@@ -0,0 +1,8 @@
+{
+  "IsEncrypted": false,
+  "Values": {
+    "AzureWebJobsStorage": "UseDevelopmentStorage=true",
+    "FUNCTIONS_WORKER_RUNTIME": "dotnet-isolated",
+    "OPENROUTER_API_KEY": "your_openrouter_api_key_here"
+  }
+}
diff --git a/changelogs/unreleased/gemini-3-8-openrouter-upgrade.md b/changelogs/unreleased/gemini-3-8-openrouter-upgrade.md
new file mode 100644
index 0000000..61e48ff
--- /dev/null
+++ b/changelogs/unreleased/gemini-3-8-openrouter-upgrade.md
@@ -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.
diff --git a/changelogs/unreleased/svelte-5-rewrite.md b/changelogs/unreleased/svelte-5-rewrite.md
new file mode 100644
index 0000000..5a68751
--- /dev/null
+++ b/changelogs/unreleased/svelte-5-rewrite.md
@@ -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`.
diff --git a/changelogs/unreleased/voice-demo-and-playwright-snapshots.md b/changelogs/unreleased/voice-demo-and-playwright-snapshots.md
new file mode 100644
index 0000000..dc99370
--- /dev/null
+++ b/changelogs/unreleased/voice-demo-and-playwright-snapshots.md
@@ -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.
+
diff --git a/components/ChatSession.tsx b/components/ChatSession.tsx
index b2e20e1..2887fcc 100644
--- a/components/ChatSession.tsx
+++ b/components/ChatSession.tsx
@@ -1,9 +1,8 @@
-
 import React, { useState, useRef, useEffect, useCallback } from 'react';
-import { Scenario, Message, AnalysisResult } from '../types';
-import { GoogleGenAI, Chat, GenerateContentResponse } from "@google/genai";
+import { Scenario, Message, AnalysisResult, UserSettings } from '../types';
 import { BrainCircuit, ChevronLeft, Flag, Loader2 } from 'lucide-react';
-import { SYSTEM_ANALYSIS_PROMPT, SYSTEM_SUMMARY_ANALYSIS_PROMPT, CBT_ANALYSIS_SCHEMA } from '../constants';
+import { streamOpenRouterChat, analyzeTurnWithOpenRouter, generateSessionSummaryReport } from '../services/openRouterService';
+import { saveSession } from '../services/sessionStorage';
 
 // Sub-components
 import ChatMessage from './ChatMessage';
@@ -13,10 +12,11 @@ import SessionReport from './SessionReport';
 
 interface ChatSessionProps {
   scenario: Scenario;
+  userSettings?: UserSettings;
   onExit: () => void;
 }
 
-const ChatSession: React.FC<ChatSessionProps> = ({ scenario, onExit }) => {
+const ChatSession: React.FC<ChatSessionProps> = ({ scenario, userSettings, onExit }) => {
   const [messages, setMessages] = useState<Message[]>([]);
   const [isLoading, setIsLoading] = useState(false);
   const [status, setStatus] = useState<'active' | 'analyzing' | 'finished'>('active');
@@ -26,8 +26,6 @@ const ChatSession: React.FC<ChatSessionProps> = ({ scenario, onExit }) => {
   const [isAnalyzingTurn, setIsAnalyzingTurn] = useState(false);
   const [finalReport, setFinalReport] = useState<AnalysisResult | null>(null);
 
-  const chatRef = useRef<Chat | null>(null);
-  const analysisRef = useRef<Chat | null>(null);
   const messagesEndRef = useRef<HTMLDivElement>(null);
 
   const scrollToBottom = useCallback(() => {
@@ -40,9 +38,40 @@ const ChatSession: React.FC<ChatSessionProps> = ({ scenario, onExit }) => {
 
   // Session Initialization
   useEffect(() => {
-    const ai = new GoogleGenAI({ apiKey: process.env.API_KEY });
+    // Initial Message
+    setMessages([{
+      id: 'init',
+      role: 'model',
+      text: scenario.initialMessage,
+      timestamp: new Date()
+    }]);
+
+    setLiveInsight(null);
+  }, [scenario]);
+
+  const handleSend = useCallback(async (text: string) => {
+    if (isLoading || !text.trim()) return;
+
+    const userMsg: Message = {
+      id: Date.now().toString(),
+      role: 'user',
+      text: text,
+      timestamp: new Date()
+    };
+
+    const updatedHistory = [...messages, userMsg];
+    setMessages(updatedHistory);
+    setIsLoading(true);
+
+    const botMsgId = (Date.now() + 1).toString();
+    const botMsg: Message = {
+      id: botMsgId,
+      role: 'model',
+      text: '',
+      timestamp: new Date()
+    };
+    setMessages([...updatedHistory, botMsg]);
 
-    // Roleplay Chat Setup
     const roleplaySystemInstruction = `
       ${scenario.systemInstruction}
       
@@ -64,95 +93,55 @@ const ChatSession: React.FC<ChatSessionProps> = ({ scenario, onExit }) => {
       Return the character's direct dialogue response. Keep it conversational and proportional to the user's input.
     `;
 
-    chatRef.current = ai.chats.create({
-      model: 'gemini-3-flash-preview',
-      config: { systemInstruction: roleplaySystemInstruction },
-    });
-
-    // Live Analysis Chat Setup
-    const analysisSystemInstruction = `${SYSTEM_ANALYSIS_PROMPT}
-SCENARIO CONTEXT:
-Title: ${scenario.title}
-Description: ${scenario.description}
-CBT Focus Areas: ${scenario.cbtFocus.join(', ')}`;
-
-    analysisRef.current = ai.chats.create({
-      model: 'gemini-3-flash-preview',
-      config: {
-        systemInstruction: analysisSystemInstruction,
-        responseMimeType: 'application/json',
-        responseSchema: CBT_ANALYSIS_SCHEMA,
-      }
-    });
-
-    // Initial Message
-    setMessages([{
-      id: 'init',
-      role: 'model',
-      text: scenario.initialMessage,
-      timestamp: new Date()
-    }]);
-
-    setLiveInsight(null);
-  }, [scenario]);
-
-  const handleSend = useCallback(async (text: string) => {
-    if (!chatRef.current || isLoading) return;
-
-    const userMsg: Message = {
-      id: Date.now().toString(),
-      role: 'user',
-      text: text,
-      timestamp: new Date()
-    };
-
-    setMessages(prev => [...prev, userMsg]);
-    setIsLoading(true);
-
     try {
-      const botMsgId = (Date.now() + 1).toString();
-      const botMsg: Message = {
-        id: botMsgId,
-        role: 'model',
-        text: '',
-        timestamp: new Date()
-      };
-      setMessages(prev => [...prev, botMsg]);
-
-      const streamResponse = await chatRef.current.sendMessageStream({ message: text });
-      let fullResponseText = '';
-
-      for await (const chunk of streamResponse) {
-        const c = chunk as GenerateContentResponse;
-        const textChunk = c.text || "";
-        fullResponseText += textChunk;
-
-        setMessages(prev => prev.map(m =>
-          m.id === botMsgId ? { ...m, text: fullResponseText } : m
-        ));
-      }
-
-      // Live Turn Analysis
-      if (analysisRef.current) {
-        setIsAnalyzingTurn(true);
-        const turnContext = `User said: "${userMsg.text}". Roleplay partner said: "${fullResponseText}".`;
-
-        analysisRef.current.sendMessage({ message: turnContext }).then(res => {
-          try {
-            if (res.text) setLiveInsight(JSON.parse(res.text));
-          } catch (e) { console.error("Live analysis parse error", e); } finally {
-            setIsAnalyzingTurn(false);
+      let accumulatedText = '';
+      await streamOpenRouterChat(
+        updatedHistory,
+        roleplaySystemInstruction,
+        {
+          onChunk: (chunk) => {
+            accumulatedText += chunk;
+            setMessages(prev => prev.map(m =>
+              m.id === botMsgId ? { ...m, text: accumulatedText } : m
+            ));
+          },
+          onComplete: (fullText) => {
+            // Live Turn Clinical Analysis via OpenRouter
+            setIsAnalyzingTurn(true);
+            const turnContext = `User said: "${userMsg.text}". Roleplay partner said: "${fullText}".`;
+            analyzeTurnWithOpenRouter(
+              turnContext,
+              scenario.title,
+              scenario.description,
+              scenario.cbtFocus,
+              {
+                apiKey: userSettings?.openRouterApiKey,
+                model: userSettings?.supervisorModel
+              }
+            ).then(res => {
+              setLiveInsight(res);
+            }).catch(e => {
+              console.error("Live analysis failed", e);
+            }).finally(() => {
+              setIsAnalyzingTurn(false);
+            });
+          },
+          onError: (err) => {
+            console.error("OpenRouter stream failed", err);
           }
-        });
-      }
-
+        },
+        {
+          apiKey: userSettings?.openRouterApiKey,
+          model: userSettings?.roleplayModel
+        }
+      );
     } catch (error) {
       console.error("Chat transmission failed", error);
       setMessages(prev => prev.filter(m => m.text !== ''));
     } finally {
       setIsLoading(false);
     }
-  }, [isLoading]);
+  }, [messages, scenario, isLoading, userSettings]);
 
   const handleFinishSession = async () => {
     if (messages.length < 2) return onExit();
@@ -160,28 +149,19 @@ CBT Focus Areas: ${scenario.cbtFocus.join(', ')}`;
     setStatus('analyzing');
 
     try {
-      const ai = new GoogleGenAI({ apiKey: process.env.API_KEY });
-      const transcript = messages.map(m => `[${m.role.toUpperCase()}]: ${m.text}`).join('\n');
+      const reportData = await generateSessionSummaryReport(
+        messages,
+        scenario.title,
+        scenario.description,
+        {
+          apiKey: userSettings?.openRouterApiKey,
+          model: userSettings?.supervisorModel
+        }
+      );
 
-      const summaryPrompt = `${SYSTEM_SUMMARY_ANALYSIS_PROMPT}
-SCENARIO CONTEXT: ${scenario.title} - ${scenario.description}`;
-
-      const result = await ai.models.generateContent({
-        model: 'gemini-3-flash-preview',
-        config: {
-          systemInstruction: summaryPrompt,
-          responseMimeType: 'application/json',
-          responseSchema: CBT_ANALYSIS_SCHEMA,
-        },
-        contents: [{ role: 'user', parts: [{ text: `SESSION TRANSCRIPT:\n${transcript}` }] }]
-      });
-
-      if (result.text) {
-        setFinalReport(JSON.parse(result.text));
-        setStatus('finished');
-      } else {
-        throw new Error("Final synthesis failed");
-      }
+      setFinalReport(reportData);
+      saveSession(scenario, 'text', messages, reportData);
+      setStatus('finished');
     } catch (err) {
       console.error("Post-session analysis failure", err);
       onExit();
@@ -196,13 +176,20 @@ SCENARIO CONTEXT: ${scenario.title} - ${scenario.description}`;
           <div className="absolute inset-0 border-4 border-teal-500 border-t-transparent rounded-full animate-spin"></div>
         </div>
         <h2 className="text-2xl font-bold text-slate-800 mb-2">Compiling Report</h2>
-        <p className="text-slate-500 text-center max-w-sm">Generating evidence-based synthesis of your cognitive and behavioral patterns during this session...</p>
+        <p className="text-slate-500 text-center max-w-sm">Generating evidence-based synthesis of your cognitive and behavioral patterns during this session via OpenRouter...</p>
       </div>
     );
   }
 
   if (status === 'finished' && finalReport) {
-    return <SessionReport analysis={finalReport} onExit={onExit} />;
+    return (
+      <SessionReport 
+        analysis={finalReport} 
+        scenarioTitle={scenario.title} 
+        messages={messages} 
+        onExit={onExit} 
+      />
+    );
   }
 
   return (
diff --git a/components/ScenarioGenerator.tsx b/components/ScenarioGenerator.tsx
index 3b68334..37e97d2 100644
--- a/components/ScenarioGenerator.tsx
+++ b/components/ScenarioGenerator.tsx
@@ -1,6 +1,5 @@
 import React, { useState } from 'react';
-import { GoogleGenAI, Type } from "@google/genai";
-import { Scenario } from '../types';
+import { Scenario, UserSettings } from '../types';
 import { CBT_GLOSSARY } from '../constants';
 import { Sparkles, X, Loader2, AlertCircle, Info, Target, UserCircle2, BrainCircuit, Check, BarChart } from 'lucide-react';
 import { Button } from './ui/button';
@@ -8,13 +7,15 @@ import { Textarea } from './ui/textarea';
 import { ScrollArea } from './ui/scroll-area';
 import { Card } from './ui/card';
 import { Badge } from './ui/badge';
+import { generateScenarioWithOpenRouter } from '../services/openRouterService';
 
 interface ScenarioGeneratorProps {
   onGenerate: (scenario: Scenario) => void;
   onCancel: () => void;
+  userSettings?: UserSettings;
 }
 
-const ScenarioGenerator: React.FC<ScenarioGeneratorProps> = ({ onGenerate, onCancel }) => {
+const ScenarioGenerator: React.FC<ScenarioGeneratorProps> = ({ onGenerate, onCancel, userSettings }) => {
   const [prompt, setPrompt] = useState('');
   const [selectedConcepts, setSelectedConcepts] = useState<string[]>([]);
   const [selectedDifficulty, setSelectedDifficulty] = useState<Scenario['difficulty']>('Intermediate');
@@ -34,240 +35,162 @@ const ScenarioGenerator: React.FC<ScenarioGeneratorProps> = ({ onGenerate, onCan
     setError(null);
 
     try {
-      const ai = new GoogleGenAI({ apiKey: import.meta.env.VITE_GEMINI_API_KEY });
-
-      const schema = {
-        type: Type.OBJECT,
-        properties: {
-          id: { type: Type.STRING },
-          title: { type: Type.STRING },
-          characterName: { type: Type.STRING },
-          description: { type: Type.STRING },
-          category: {
-            type: Type.STRING,
-            enum: ['Social Anxiety', 'Workplace', 'Relationships', 'Self-Talk']
-          },
-          difficulty: {
-            type: Type.STRING,
-            enum: ['Beginner', 'Intermediate', 'Advanced']
-          },
-          systemInstruction: { type: Type.STRING },
-          initialMessage: { type: Type.STRING },
-          cbtFocus: {
-            type: Type.ARRAY,
-            items: { type: Type.STRING }
-          }
-        },
-        required: ['id', 'title', 'characterName', 'description', 'category', 'difficulty', 'systemInstruction', 'initialMessage', 'cbtFocus']
-      };
-
-      const selectedContext = selectedConcepts.length > 0
-        ? `Focus specifically on these CBT concepts: ${selectedConcepts.join(', ')}.`
-        : '';
-
-      const result = await ai.models.generateContent({
-        model: 'gemini-3-flash-preview',
-        config: {
-          responseMimeType: 'application/json',
-          responseSchema: schema,
-          systemInstruction: `
-            [CONTEXT]
-            You are a Clinical CBT Scenario Architect. 
-            The user requires a structured clinical simulation designed to address specific cognitive distortions and behavioral challenges.
-            Clinical Focus: ${selectedContext}
-            
-            [TASK]
-            Transform the user's prompt into a cohesive, structured clinical scenario that sets up a targeted roleplay environment.
-            
-            [CONSTRAINTS]
-            - CATEGORIZATION: You MUST categorize the scenario appropriately (Social Anxiety, Workplace, Relationships, or Self-Talk).
-            - DIFFICULTY CALIBRATION: The requested difficulty is '${selectedDifficulty}'.
-              - 'Beginner': Low stakes, high support, clear-cut distortions, AI character is cooperative.
-              - 'Intermediate': Ambiguous stakes, moderate social friction, subtle distortions, AI character has specific needs.
-              - 'Advanced': High emotional triggers, persistent clinical resistance, complex cognitive patterns.
-            - INTERNAL LOGIC: Provide a detailed "INTERNAL CBT LOGIC" section instructing the AI character how to react to the user's progress or cognitive lapses during the future roleplay.
-            - CHARACTER VOICE: Define a realistic, emotionally consistent voice profile.
-            
-            [OUTPUT REQUIREMENTS]
-            Return ONLY a valid JSON object conforming exactly to the requested schema. Ensure all arrays and nested objects are populated correctly.
-          `
-        },
-        contents: [
-          { role: 'user', parts: [{ text: `Generate a clinical scenario for: ${prompt || 'A scenario exploring the chosen CBT concepts.'}` }] }
-        ]
-      });
-
-      if (result.text) {
-        const scenario = JSON.parse(result.text) as Scenario;
-        // Enforce the user-selected difficulty in the final object
-        scenario.difficulty = selectedDifficulty;
-        scenario.id = `custom-${Date.now()}-${scenario.id}`;
-        onGenerate(scenario);
-      } else {
-        throw new Error("No content generated");
-      }
+      const scenario = await generateScenarioWithOpenRouter(
+        prompt,
+        selectedConcepts,
+        selectedDifficulty,
+        {
+          apiKey: userSettings?.openRouterApiKey,
+          model: userSettings?.roleplayModel
+        }
+      );
 
+      scenario.difficulty = selectedDifficulty;
+      scenario.id = `custom-${Date.now()}-${scenario.id || 'generated'}`;
+      onGenerate(scenario);
     } catch (err: any) {
-      console.error("Generation error:", err);
-      setError("Clinical scenario synthesis failed. Please refine your parameters.");
+      console.error("OpenRouter Scenario Generation error:", err);
+      setError(err?.message || "Clinical scenario synthesis failed. Please check your OpenRouter API Key in Settings.");
     } finally {
       setIsLoading(false);
     }
   };
 
-  const getConceptVariant = (category: string, isSelected: boolean) => {
-    if (!isSelected) return 'outline';
-    return 'default';
-  };
-
-  const getConceptColorClass = (category: string, isSelected: boolean) => {
-    if (!isSelected) return 'text-slate-500 border-slate-200 hover:border-slate-300';
-    switch (category) {
-      case 'Distortion': return 'bg-rose-600 border-rose-600 hover:bg-rose-700 shadow-md shadow-rose-100';
-      case 'Technique': return 'bg-teal-600 border-teal-600 hover:bg-teal-700 shadow-md shadow-teal-100';
-      case 'Concept': return 'bg-amber-600 border-amber-600 hover:bg-amber-700 shadow-md shadow-amber-100';
-      default: return 'bg-slate-800 border-slate-800 hover:bg-slate-900';
-    }
-  };
-
   return (
-    <div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-slate-900/60 backdrop-blur-md overflow-y-auto">
-      <div className="bg-white rounded-2xl shadow-2xl w-full max-w-2xl overflow-hidden animate-in fade-in zoom-in duration-300 border border-slate-100 my-8 flex flex-col max-h-[90vh]">
+    <div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-slate-900/60 backdrop-blur-md animate-in fade-in duration-300">
+      <div className="bg-white rounded-3xl shadow-2xl w-full max-w-2xl overflow-hidden border border-slate-100 flex flex-col max-h-[90vh]">
         {/* Header */}
-        <div className="p-6 bg-teal-600 text-white flex justify-between items-start relative overflow-hidden shrink-0">
-          <div className="relative z-10">
-            <h2 className="text-2xl font-bold flex items-center gap-3">
-              <Sparkles size={28} className="text-teal-200" />
-              Scenario Synthesis
-            </h2>
-            <p className="text-teal-50 text-sm mt-1 font-light opacity-90">
-              Construct an evidence-based clinical environment.
-            </p>
+        <div className="p-6 bg-slate-50 border-b border-slate-200 flex justify-between items-center">
+          <div className="flex items-center gap-3">
+            <div className="bg-teal-600 p-2.5 rounded-xl text-white shadow-md shadow-teal-600/20">
+              <Sparkles size={20} />
+            </div>
+            <div>
+              <h2 className="text-lg font-bold text-slate-800">Clinical Scenario Architect</h2>
+              <p className="text-[10px] text-slate-400 font-bold uppercase tracking-widest">
+                AI Synthesis Engine • OpenRouter
+              </p>
+            </div>
           </div>
-          <Button
-            variant="ghost"
-            size="icon"
+          <button
             onClick={onCancel}
-            className="relative z-10 text-white/70 hover:text-white transition-colors bg-white/10 hover:bg-white/20 border border-white/10"
+            className="p-2 text-slate-400 hover:text-slate-600 hover:bg-slate-200/50 rounded-xl transition-colors"
           >
             <X size={20} />
-          </Button>
-          <div className="absolute top-0 right-0 w-32 h-32 bg-white/5 rounded-full -mr-10 -mt-10 blur-2xl"></div>
+          </button>
         </div>
 
-        <ScrollArea className="flex-grow p-8 bg-[#FCFDFF]">
-          <div className="space-y-6 pb-4">
-            {/* Prompting Guide */}
-            <Card className="bg-teal-50/50 border-teal-100 p-4 shadow-none">
-              <div className="flex items-center gap-2 text-teal-700 mb-3">
-                <Info size={16} />
-                <h3 className="text-xs font-bold uppercase tracking-wider">Clinical Blueprint</h3>
-              </div>
-              <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
-                <div className="space-y-1">
-                  <div className="flex items-center gap-1.5 text-[10px] font-bold text-teal-600 uppercase">
-                    <UserCircle2 size={12} /> Character Role
-                  </div>
-                  <p className="text-[10px] text-slate-500 leading-tight">Define who the AI plays.</p>
-                </div>
-                <div className="space-y-1">
-                  <div className="flex items-center gap-1.5 text-[10px] font-bold text-teal-600 uppercase">
-                    <Target size={12} /> The Challenge
-                  </div>
-                  <p className="text-[10px] text-slate-500 leading-tight">Describe the social friction.</p>
-                </div>
-                <div className="space-y-1">
-                  <div className="flex items-center gap-1.5 text-[10px] font-bold text-teal-600 uppercase">
-                    <BrainCircuit size={12} /> CBT Focus
-                  </div>
-                  <p className="text-[10px] text-slate-500 leading-tight">Target specific distortions.</p>
-                </div>
-              </div>
-            </Card>
-
-            {/* Difficulty Selection */}
-            <div className="space-y-3">
-              <label className="block text-[10px] font-black text-slate-400 uppercase tracking-widest">
-                Communication Difficulty
+        <ScrollArea className="p-8 space-y-8 flex-grow">
+          {/* Natural Language Prompt */}
+          <div className="space-y-3">
+            <div className="flex items-center justify-between">
+              <label className="text-xs font-black text-slate-400 uppercase tracking-widest flex items-center gap-2">
+                <Target size={14} className="text-teal-600" />
+                Target Dynamic & Situation
               </label>
-              <div className="grid grid-cols-3 gap-2">
-                {(['Beginner', 'Intermediate', 'Advanced'] as const).map((level) => (
-                  <Button
-                    key={level}
-                    variant={selectedDifficulty === level ? "default" : "outline"}
-                    onClick={() => setSelectedDifficulty(level)}
-                    className={`h-12 flex items-center justify-center gap-2 rounded-xl border-2 transition-all text-[11px] font-bold ${selectedDifficulty === level
-                      ? 'bg-teal-50 border-teal-600 text-teal-700 shadow-sm shadow-teal-50 hover:bg-teal-100 hover:text-teal-800'
-                      : 'bg-white border-slate-200 text-slate-500 hover:border-slate-300'
+              <span className="text-[10px] text-slate-400">Describe the conflict or trigger</span>
+            </div>
+            <Textarea
+              placeholder="e.g. Asking my manager for a delayed performance review while fearing I'll be fired for bringing it up..."
+              value={prompt}
+              onChange={(e) => setPrompt(e.target.value)}
+              className="min-h-[100px] text-sm bg-slate-50/50 border-slate-200 rounded-2xl resize-none focus:ring-teal-500 focus:border-teal-500"
+            />
+          </div>
+
+          {/* Difficulty Tuning */}
+          <div className="space-y-3">
+            <label className="text-xs font-black text-slate-400 uppercase tracking-widest flex items-center gap-2">
+              <BarChart size={14} className="text-teal-600" />
+              Emotional Resistance & Difficulty
+            </label>
+            <div className="grid grid-cols-3 gap-3">
+              {(['Beginner', 'Intermediate', 'Advanced'] as const).map((diff) => (
+                <Card
+                  key={diff}
+                  onClick={() => setSelectedDifficulty(diff)}
+                  className={`p-3.5 text-center cursor-pointer transition-all border ${selectedDifficulty === diff
+                      ? 'bg-teal-50 border-teal-500 shadow-sm shadow-teal-500/10'
+                      : 'bg-white border-slate-200 hover:border-slate-300'
+                    }`}
+                >
+                  <p className="font-bold text-xs text-slate-800">{diff}</p>
+                  <p className="text-[10px] text-slate-400 mt-0.5">
+                    {diff === 'Beginner' && 'High Support'}
+                    {diff === 'Intermediate' && 'Realistic Pushback'}
+                    {diff === 'Advanced' && 'Severe Friction'}
+                  </p>
+                </Card>
+              ))}
+            </div>
+          </div>
+
+          {/* Clinical Focus Selector */}
+          <div className="space-y-3">
+            <div className="flex items-center justify-between">
+              <label className="text-xs font-black text-slate-400 uppercase tracking-widest flex items-center gap-2">
+                <BrainCircuit size={14} className="text-teal-600" />
+                Target Cognitive Distortions & Techniques
+              </label>
+              <span className="text-[10px] text-teal-600 font-bold">
+                {selectedConcepts.length} Selected
+              </span>
+            </div>
+
+            <div className="flex flex-wrap gap-2 max-h-44 overflow-y-auto p-1 bg-slate-50 rounded-2xl border border-slate-100">
+              {CBT_GLOSSARY.map((item) => {
+                const isSelected = selectedConcepts.includes(item.term);
+                return (
+                  <Badge
+                    key={item.term}
+                    onClick={() => toggleConcept(item.term)}
+                    variant={isSelected ? "default" : "outline"}
+                    className={`cursor-pointer text-[11px] py-1.5 px-3 rounded-xl transition-all ${isSelected
+                        ? 'bg-teal-600 hover:bg-teal-700 text-white font-bold shadow-sm'
+                        : 'bg-white text-slate-600 hover:border-teal-300'
                       }`}
                   >
-                    <BarChart size={14} className={selectedDifficulty === level ? 'text-teal-600' : 'text-slate-400'} />
-                    {level}
-                  </Button>
-                ))}
-              </div>
+                    {item.term}
+                    {isSelected && <Check size={12} className="ml-1.5 inline" />}
+                  </Badge>
+                );
+              })}
             </div>
-
-            {/* Clinical Targets (Selection) */}
-            <div className="space-y-3">
-              <label className="block text-[10px] font-black text-slate-400 uppercase tracking-widest">
-                Clinical Targets (Optional)
-              </label>
-              <div className="flex flex-wrap gap-2">
-                {CBT_GLOSSARY.map(concept => {
-                  const isSelected = selectedConcepts.includes(concept.term);
-                  return (
-                    <Badge
-                      key={concept.term}
-                      variant={getConceptVariant(concept.category, isSelected) as any}
-                      onClick={() => toggleConcept(concept.term)}
-                      className={`px-3 py-1.5 rounded-lg text-[10px] font-bold border transition-all flex items-center gap-1.5 cursor-pointer hover:opacity-90 ${getConceptColorClass(concept.category, isSelected)}`}
-                    >
-                      {isSelected && <Check size={10} />}
-                      {concept.term}
-                    </Badge>
-                  );
-                })}
-              </div>
-            </div>
-
-            <div>
-              <label className="block text-[10px] font-black text-slate-400 uppercase tracking-widest mb-3">
-                Simulation Context / Custom Instructions
-              </label>
-              <Textarea
-                value={prompt}
-                onChange={(e) => setPrompt(e.target.value)}
-                placeholder="e.g. Practicing assertiveness with a pushy salesperson who won't take 'no' for an answer."
-                className="w-full h-28 p-5 border-slate-200 rounded-2xl focus-visible:ring-teal-500 resize-none text-slate-800 placeholder:text-slate-400 text-sm leading-relaxed shadow-inner bg-white"
-                disabled={isLoading}
-              />
-            </div>
-
-            {error && (
-              <div className="bg-rose-50 text-rose-600 p-4 rounded-xl text-xs flex items-center gap-3 border border-rose-100 font-medium">
-                <AlertCircle size={18} />
-                {error}
-              </div>
-            )}
           </div>
+
+          {error && (
+            <div className="p-4 bg-rose-50 border border-rose-100 rounded-2xl flex items-center gap-3 text-rose-700 text-xs animate-in fade-in">
+              <AlertCircle size={16} className="shrink-0 text-rose-500" />
+              <span>{error}</span>
+            </div>
+          )}
         </ScrollArea>
 
-        <div className="p-6 bg-slate-50 border-t border-slate-100 flex justify-end shrink-0">
+        {/* Footer Actions */}
+        <div className="p-6 bg-slate-50 border-t border-slate-200 flex justify-between items-center">
+          <Button
+            variant="ghost"
+            onClick={onCancel}
+            disabled={isLoading}
+            className="text-xs uppercase tracking-widest font-black text-slate-400 hover:text-slate-600"
+          >
+            Cancel
+          </Button>
+
           <Button
             onClick={handleGenerate}
-            disabled={(!prompt.trim() && selectedConcepts.length === 0) || isLoading}
-            className="bg-teal-600 text-white h-12 px-8 rounded-2xl font-bold hover:bg-teal-700 flex items-center gap-3 transition-all shadow-lg shadow-teal-100 text-sm uppercase tracking-widest"
+            disabled={isLoading || (!prompt.trim() && selectedConcepts.length === 0)}
+            className="bg-teal-600 hover:bg-teal-700 text-white px-8 h-11 rounded-2xl text-xs uppercase tracking-widest font-black shadow-lg shadow-teal-600/20 flex items-center gap-2"
           >
             {isLoading ? (
               <>
-                <Loader2 size={20} className="animate-spin" />
-                Synthesizing...
+                <Loader2 size={16} className="animate-spin" />
+                Synthesizing Scenario...
               </>
             ) : (
               <>
-                <Sparkles size={20} />
-                Initiate Build
+                <Sparkles size={16} />
+                Generate Simulation
               </>
             )}
           </Button>
diff --git a/components/SessionReport.tsx b/components/SessionReport.tsx
index d8c193d..9828902 100644
--- a/components/SessionReport.tsx
+++ b/components/SessionReport.tsx
@@ -1,14 +1,42 @@
-
-import React from 'react';
-import { AnalysisResult } from '../types';
-import { ClipboardCheck, X, CheckCircle2, AlertTriangle, Lightbulb, TrendingUp } from 'lucide-react';
+import React, { useState, useEffect } from 'react';
+import { AnalysisResult, Message } from '../types';
+import { ClipboardCheck, X, CheckCircle2, AlertTriangle, Lightbulb, TrendingUp, Download, Copy, Check, FileText } from 'lucide-react';
+import { Button } from './ui/button';
+import { formatSessionAsMarkdown, downloadFile } from '../services/sessionStorage';
 
 interface SessionReportProps {
   analysis: AnalysisResult;
+  scenarioTitle?: string;
+  messages?: Message[];
   onExit: () => void;
 }
 
-const SessionReport: React.FC<SessionReportProps> = ({ analysis, onExit }) => {
+const SessionReport: React.FC<SessionReportProps> = ({ 
+  analysis, 
+  scenarioTitle = "CBT Roleplay Session", 
+  messages = [], 
+  onExit 
+}) => {
+  const [copied, setCopied] = useState(false);
+
+  const handleCopyReframe = () => {
+    navigator.clipboard.writeText(analysis.suggestions.alternativeThought);
+    setCopied(true);
+    setTimeout(() => setCopied(false), 2000);
+  };
+
+  const handleExportMarkdown = () => {
+    const md = formatSessionAsMarkdown(scenarioTitle, analysis, messages);
+    const fileName = `cbt-report-${scenarioTitle.toLowerCase().replace(/\s+/g, '-')}-${Date.now()}.md`;
+    downloadFile(md, fileName, 'text/markdown');
+  };
+
+  const handleExportJSON = () => {
+    const json = JSON.stringify({ scenarioTitle, analysis, messages, exportedAt: new Date().toISOString() }, null, 2);
+    const fileName = `cbt-report-${scenarioTitle.toLowerCase().replace(/\s+/g, '-')}-${Date.now()}.json`;
+    downloadFile(json, fileName, 'application/json');
+  };
+
   return (
     <div className="flex flex-col h-full bg-[#FDFDFF] rounded-3xl border border-slate-200 overflow-hidden shadow-2xl animate-in zoom-in-95 duration-500 w-full max-w-4xl mx-auto">
       <div className="bg-teal-600 p-6 flex justify-between items-center text-white">
@@ -16,12 +44,36 @@ const SessionReport: React.FC<SessionReportProps> = ({ analysis, onExit }) => {
            <ClipboardCheck size={28} />
            <div>
              <h2 className="text-xl font-bold leading-none">Session Summary Report</h2>
-             <span className="text-[10px] font-bold uppercase tracking-widest text-teal-100 opacity-80">Clinical Analysis Complete</span>
+             <span className="text-[10px] font-bold uppercase tracking-widest text-teal-100 opacity-80">
+               {scenarioTitle} • Clinical Evaluation Complete
+             </span>
            </div>
         </div>
-        <button onClick={onExit} className="bg-white/10 hover:bg-white/20 p-2 rounded-xl border border-white/10 transition-colors">
-          <X size={20} />
-        </button>
+        <div className="flex items-center gap-2">
+          <Button
+            variant="ghost"
+            size="sm"
+            onClick={handleExportMarkdown}
+            className="text-white hover:bg-white/20 rounded-xl text-xs flex items-center gap-1.5"
+            title="Download Markdown Report"
+          >
+            <FileText size={16} />
+            <span className="hidden sm:inline">Export MD</span>
+          </Button>
+          <Button
+            variant="ghost"
+            size="sm"
+            onClick={handleExportJSON}
+            className="text-white hover:bg-white/20 rounded-xl text-xs flex items-center gap-1.5"
+            title="Download JSON Report"
+          >
+            <Download size={16} />
+            <span className="hidden sm:inline">JSON</span>
+          </Button>
+          <button onClick={onExit} className="bg-white/10 hover:bg-white/20 p-2 rounded-xl border border-white/10 transition-colors ml-1">
+            <X size={20} />
+          </button>
+        </div>
       </div>
 
       <div className="flex-grow overflow-y-auto p-8 flex flex-col gap-6">
@@ -55,10 +107,21 @@ const SessionReport: React.FC<SessionReportProps> = ({ analysis, onExit }) => {
         </div>
 
         <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
-          <div className="bg-white p-6 rounded-2xl border border-teal-100 shadow-sm">
-             <div className="flex items-center gap-2 text-teal-600 mb-3">
-                <Lightbulb size={20} />
-                <span className="text-[10px] font-black uppercase tracking-widest">Master Reframe</span>
+          <div className="bg-white p-6 rounded-2xl border border-teal-100 shadow-sm relative group">
+             <div className="flex items-center justify-between mb-3">
+                <div className="flex items-center gap-2 text-teal-600">
+                  <Lightbulb size={20} />
+                  <span className="text-[10px] font-black uppercase tracking-widest">Master Reframe</span>
+                </div>
+                <Button
+                  variant="ghost"
+                  size="sm"
+                  onClick={handleCopyReframe}
+                  className="h-7 px-2 text-[10px] text-slate-400 hover:text-teal-700 flex items-center gap-1"
+                >
+                  {copied ? <Check size={12} className="text-teal-600" /> : <Copy size={12} />}
+                  {copied ? 'Copied' : 'Copy'}
+                </Button>
              </div>
              <p className="text-base text-slate-800 italic font-medium leading-relaxed">"{analysis.suggestions.alternativeThought}"</p>
           </div>
diff --git a/components/SettingsModal.tsx b/components/SettingsModal.tsx
index 236ed02..c7f40b6 100644
--- a/components/SettingsModal.tsx
+++ b/components/SettingsModal.tsx
@@ -1,12 +1,15 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { UserSettings } from '../types';
-import { X, Volume2, Check, Info, Mic2, Settings2 } from 'lucide-react';
+import { X, Volume2, Check, Info, Mic2, Settings2, Key, Sparkles, Cpu } from 'lucide-react';
 import Tooltip from './Tooltip';
 import AudioDeviceSelector from './AudioDeviceSelector';
 import { Button } from './ui/button';
 import { Card } from './ui/card';
 import { Badge } from './ui/badge';
 import { ScrollArea } from './ui/scroll-area';
+import { Input } from './ui/input';
+import { Label } from './ui/label';
+import { Tabs, TabsContent, TabsList, TabsTrigger } from './ui/tabs';
 
 interface SettingsModalProps {
   settings: UserSettings;
@@ -30,18 +33,40 @@ const VOICE_OPTIONS: VoiceOption[] = [
   { id: 'Fenrir', label: 'Fenrir', gender: 'Male', style: 'Rugged', description: 'Direct and matter-of-fact tone with a slightly more serious edge.' },
 ];
 
+const AVAILABLE_MODELS = [
+  { id: 'google/gemini-3.8-flash', name: 'Google Gemini 3.8 Flash', badge: 'Default • Frontier Ultra Low Latency' },
+  { id: 'google/gemini-3.7-flash', name: 'Google Gemini 3.7 Flash', badge: 'Fast • Hybrid Reasoning' },
+  { id: 'google/gemini-2.5-flash', name: 'Google Gemini 2.5 Flash', badge: 'Stable • Low Latency' },
+  { id: 'anthropic/claude-3.5-haiku', name: 'Anthropic Claude 3.5 Haiku', badge: 'Nuanced Reasoning' },
+  { id: 'meta-llama/llama-3.3-70b-instruct', name: 'Meta Llama 3.3 70B Instruct', badge: 'Open Weights' },
+];
+
 const SettingsModal: React.FC<SettingsModalProps> = ({ settings, onUpdate, onClose }) => {
+  const [activeTab, setActiveTab] = useState('voice');
+  const [openRouterKey, setOpenRouterKey] = useState(settings.openRouterApiKey || '');
+  const [selectedModel, setSelectedModel] = useState(settings.roleplayModel || 'google/gemini-3.8-flash');
+
+  const handleSave = () => {
+    onUpdate({
+      ...settings,
+      openRouterApiKey: openRouterKey.trim() || undefined,
+      roleplayModel: selectedModel,
+      supervisorModel: selectedModel,
+    });
+    onClose();
+  };
+
   return (
     <div className="fixed inset-0 z-[100] flex items-center justify-center p-4 bg-slate-900/60 backdrop-blur-md">
       <div className="bg-white rounded-3xl shadow-2xl w-full max-w-xl overflow-hidden animate-in fade-in zoom-in duration-300 border border-slate-100 max-h-[90vh] flex flex-col">
         <div className="p-6 bg-slate-50 border-b border-slate-200 flex justify-between items-center flex-shrink-0">
           <div className="flex items-center gap-3">
             <div className="bg-slate-800 p-2 rounded-xl text-white">
-              <Volume2 size={20} />
+              <Settings2 size={20} />
             </div>
             <div>
-              <h2 className="text-lg font-bold text-slate-800">Voice & Persona Settings</h2>
-              <p className="text-[10px] text-slate-400 font-bold uppercase tracking-widest">Configure your AI clinical partner</p>
+              <h2 className="text-lg font-bold text-slate-800">Application Settings</h2>
+              <p className="text-[10px] text-slate-400 font-bold uppercase tracking-widest">Powered by OpenRouter Engine</p>
             </div>
           </div>
           <Button variant="ghost" size="icon" onClick={onClose} className="text-slate-400 hover:bg-slate-200 rounded-xl">
@@ -49,81 +74,156 @@ const SettingsModal: React.FC<SettingsModalProps> = ({ settings, onUpdate, onClo
           </Button>
         </div>
 
-        <ScrollArea className="p-8 space-y-8 flex-grow">
-          <section className="space-y-4 pb-6">
-            <div className="flex items-center justify-between">
-              <h3 className="text-xs font-black text-slate-400 uppercase tracking-widest flex items-center gap-2">
-                <Mic2 size={14} className="text-teal-600" />
-                Vocal Profile
-              </h3>
-              <Tooltip content="Different voices can help simulate specific social or professional contexts.">
-                <Info size={14} className="text-slate-300" />
-              </Tooltip>
-            </div>
-
-            <div className="grid grid-cols-1 gap-3">
-              {VOICE_OPTIONS.map((voice) => (
-                <Card
-                  key={voice.id}
-                  onClick={() => onUpdate({ ...settings, voiceName: voice.id, genderPreference: voice.gender, vocalStyle: voice.style })}
-                  className={`flex flex-row items-center justify-between p-4 cursor-pointer transition-all ${settings.voiceName === voice.id
-                      ? 'bg-teal-50 border-teal-500 shadow-md shadow-teal-100'
-                      : 'bg-white border-slate-200 hover:border-teal-200'
-                    }`}
-                >
-                  <div className="flex items-center gap-4">
-                    <div className={`w-10 h-10 rounded-full flex items-center shrink-0 justify-center ${settings.voiceName === voice.id ? 'bg-teal-600 text-white' : 'bg-slate-100 text-slate-400'
-                      }`}>
-                      <Volume2 size={18} />
-                    </div>
-                    <div>
-                      <div className="flex items-center gap-2 mb-1">
-                        <span className="font-bold text-slate-800">{voice.label}</span>
-                        <Badge variant="secondary" className="text-[9px] font-black uppercase text-slate-500 rounded">
-                          {voice.gender} • {voice.style}
-                        </Badge>
-                      </div>
-                      <p className="text-xs text-slate-500 font-light mt-0.5">{voice.description}</p>
-                    </div>
-                  </div>
-                  {settings.voiceName === voice.id && (
-                    <div className="bg-teal-600 text-white p-1 rounded-full shrink-0 ml-2">
-                      <Check size={14} />
-                    </div>
-                  )}
-                </Card>
-              ))}
-            </div>
-          </section>
-
-          <section className="space-y-4 pb-6">
-            <div className="flex items-center justify-between">
-              <h3 className="text-xs font-black text-slate-400 uppercase tracking-widest flex items-center gap-2">
-                <Settings2 size={14} className="text-teal-600" />
-                Hardware Configuration
-              </h3>
-            </div>
-
-            <AudioDeviceSelector
-              selectedDeviceId={settings.preferredAudioDeviceId}
-              onSelect={(deviceId) => onUpdate({ ...settings, preferredAudioDeviceId: deviceId })}
-            />
-          </section>
-
-          <div className="bg-amber-50 border border-amber-100 rounded-2xl p-4 flex gap-3 mb-6">
-            <div className="text-amber-600 mt-0.5">
-              <Info size={18} />
-            </div>
-            <p className="text-xs text-amber-800 leading-relaxed">
-              These settings apply to <strong>Voice Mode</strong> interactions only. Text-based roleplay personas are dynamically generated based on each specific scenario.
-            </p>
+        <Tabs value={activeTab} onValueChange={setActiveTab} className="w-full flex-grow flex flex-col overflow-hidden">
+          <div className="px-6 pt-4 border-b border-slate-100">
+            <TabsList className="grid grid-cols-2 w-full max-w-xs">
+              <TabsTrigger value="voice" className="text-xs">
+                <Volume2 size={14} className="mr-1.5" />
+                Voice & Audio
+              </TabsTrigger>
+              <TabsTrigger value="openrouter" className="text-xs">
+                <Key size={14} className="mr-1.5" />
+                OpenRouter AI
+              </TabsTrigger>
+            </TabsList>
           </div>
-        </ScrollArea>
 
-        <div className="p-6 bg-slate-50 border-t border-slate-200 flex justify-end flex-shrink-0">
+          <ScrollArea className="p-6 flex-grow overflow-y-auto">
+            <TabsContent value="voice" className="space-y-6 m-0">
+              <section className="space-y-3">
+                <div className="flex items-center justify-between">
+                  <h3 className="text-xs font-black text-slate-400 uppercase tracking-widest flex items-center gap-2">
+                    <Mic2 size={14} className="text-teal-600" />
+                    Vocal Profile
+                  </h3>
+                  <Tooltip content="Different voices can help simulate specific social or professional contexts.">
+                    <Info size={14} className="text-slate-300" />
+                  </Tooltip>
+                </div>
+
+                <div className="grid grid-cols-1 gap-2.5">
+                  {VOICE_OPTIONS.map((voice) => (
+                    <Card
+                      key={voice.id}
+                      onClick={() => onUpdate({ ...settings, voiceName: voice.id, genderPreference: voice.gender, vocalStyle: voice.style })}
+                      className={`flex flex-row items-center justify-between p-3.5 cursor-pointer transition-all ${settings.voiceName === voice.id
+                          ? 'bg-teal-50 border-teal-500 shadow-sm shadow-teal-100'
+                          : 'bg-white border-slate-200 hover:border-teal-200'
+                        }`}
+                    >
+                      <div className="flex items-center gap-3">
+                        <div className={`w-9 h-9 rounded-full flex items-center shrink-0 justify-center ${settings.voiceName === voice.id ? 'bg-teal-600 text-white' : 'bg-slate-100 text-slate-400'
+                          }`}>
+                          <Volume2 size={16} />
+                        </div>
+                        <div>
+                          <div className="flex items-center gap-2 mb-0.5">
+                            <span className="font-bold text-slate-800 text-sm">{voice.label}</span>
+                            <Badge variant="secondary" className="text-[9px] font-black uppercase text-slate-500 rounded">
+                              {voice.gender} • {voice.style}
+                            </Badge>
+                          </div>
+                          <p className="text-xs text-slate-500 font-light">{voice.description}</p>
+                        </div>
+                      </div>
+                      {settings.voiceName === voice.id && (
+                        <div className="bg-teal-600 text-white p-1 rounded-full shrink-0 ml-2">
+                          <Check size={12} />
+                        </div>
+                      )}
+                    </Card>
+                  ))}
+                </div>
+              </section>
+
+              <section className="space-y-3 pt-2">
+                <div className="flex items-center justify-between">
+                  <h3 className="text-xs font-black text-slate-400 uppercase tracking-widest flex items-center gap-2">
+                    <Settings2 size={14} className="text-teal-600" />
+                    Input Microphone
+                  </h3>
+                </div>
+
+                <AudioDeviceSelector
+                  selectedDeviceId={settings.preferredAudioDeviceId}
+                  onSelect={(deviceId) => onUpdate({ ...settings, preferredAudioDeviceId: deviceId })}
+                />
+              </section>
+            </TabsContent>
+
+            <TabsContent value="openrouter" className="space-y-6 m-0">
+              <div className="space-y-4">
+                <div>
+                  <h3 className="text-xs font-black text-slate-400 uppercase tracking-widest flex items-center gap-2 mb-1">
+                    <Key size={14} className="text-teal-600" />
+                    OpenRouter API Key
+                  </h3>
+                  <p className="text-xs text-slate-500">
+                    Enter your OpenRouter API Key (<code className="font-mono text-xs">sk-or-v1-...</code>). All clinical roleplay, live insights, and scenario architect functions route through OpenRouter.
+                  </p>
+                </div>
+
+                <div className="space-y-2">
+                  <Label htmlFor="openrouter-key" className="text-xs font-semibold text-slate-700">
+                    API Key
+                  </Label>
+                  <Input
+                    id="openrouter-key"
+                    type="password"
+                    placeholder="sk-or-v1-..."
+                    value={openRouterKey}
+                    onChange={(e) => setOpenRouterKey(e.target.value)}
+                    className="font-mono text-xs"
+                  />
+                </div>
+
+                <div className="space-y-3 pt-2">
+                  <div className="flex items-center justify-between">
+                    <Label className="text-xs font-semibold text-slate-700 flex items-center gap-1.5">
+                      <Cpu size={14} className="text-teal-600" />
+                      Roleplay & Supervisor Model
+                    </Label>
+                  </div>
+
+                  <div className="grid grid-cols-1 gap-2">
+                    {AVAILABLE_MODELS.map((model) => (
+                      <Card
+                        key={model.id}
+                        onClick={() => setSelectedModel(model.id)}
+                        className={`p-3 cursor-pointer transition-all flex items-center justify-between border ${selectedModel === model.id
+                            ? 'bg-teal-50 border-teal-500 shadow-sm'
+                            : 'bg-white border-slate-200 hover:border-slate-300'
+                          }`}
+                      >
+                        <div>
+                          <p className="text-xs font-bold text-slate-800">{model.name}</p>
+                          <p className="text-[10px] text-slate-400 font-mono mt-0.5">{model.id}</p>
+                        </div>
+                        <Badge variant="outline" className="text-[9px] font-semibold text-teal-700 border-teal-200">
+                          {model.badge}
+                        </Badge>
+                      </Card>
+                    ))}
+                  </div>
+                </div>
+              </div>
+
+              <div className="bg-teal-50 border border-teal-100 rounded-2xl p-4 flex gap-3">
+                <div className="text-teal-600 mt-0.5">
+                  <Sparkles size={18} />
+                </div>
+                <p className="text-xs text-teal-900 leading-relaxed">
+                  Your OpenRouter API Key is stored securely in your browser LocalStorage and is never shared or transmitted elsewhere.
+                </p>
+              </div>
+            </TabsContent>
+          </ScrollArea>
+        </Tabs>
+
+        <div className="p-5 bg-slate-50 border-t border-slate-200 flex justify-end flex-shrink-0">
           <Button
-            onClick={onClose}
-            className="bg-slate-800 text-white px-8 h-12 rounded-2xl font-bold hover:bg-slate-900 shadow-lg shadow-slate-200 transition-all uppercase tracking-widest text-[10px]"
+            onClick={handleSave}
+            className="bg-slate-800 text-white px-8 h-11 rounded-2xl font-bold hover:bg-slate-900 shadow-lg shadow-slate-200 transition-all uppercase tracking-widest text-[10px]"
           >
             Save Preferences
           </Button>
diff --git a/components/VoiceSession.tsx b/components/VoiceSession.tsx
index 48c452b..7803900 100644
--- a/components/VoiceSession.tsx
+++ b/components/VoiceSession.tsx
@@ -1,11 +1,10 @@
-
 import React, { useState, useCallback } from 'react';
 import { Scenario, UserSettings, AnalysisResult } from '../types';
-import { GoogleGenAI } from '@google/genai';
-import { SYSTEM_SUMMARY_ANALYSIS_PROMPT, CBT_ANALYSIS_SCHEMA } from '../constants';
 import { useLiveSession } from '../hooks/useLiveSession';
-import { AlertCircle, Settings2, X, BrainCircuit, Zap, Info } from 'lucide-react';
+import { AlertCircle, Settings2, X, AlertTriangle } from 'lucide-react';
 import { Button } from './ui/button';
+import { generateSessionSummaryReport } from '../services/openRouterService';
+import { saveSession } from '../services/sessionStorage';
 
 // Sub-components
 import AudioVisualizer from './AudioVisualizer';
@@ -34,6 +33,7 @@ const VoiceSession: React.FC<VoiceSessionProps> = ({ scenario, onExit, voiceSett
   const {
     status,
     setStatus,
+    errorMessage,
     isMuted,
     toggleMute,
     audioLevel,
@@ -44,7 +44,6 @@ const VoiceSession: React.FC<VoiceSessionProps> = ({ scenario, onExit, voiceSett
     liveInsight,
     isAnalyzingTurn,
     isSilenceDetected,
-    sessionPromiseRef,
     startSession
   } = useLiveSession(scenario, voiceSettings);
 
@@ -58,188 +57,155 @@ const VoiceSession: React.FC<VoiceSessionProps> = ({ scenario, onExit, voiceSett
   const handleFinishSession = useCallback(async () => {
     setStatus('analyzing');
 
-    if (sessionPromiseRef.current) {
-      sessionPromiseRef.current.then(session => session.close());
-    }
-
     try {
-      const ai = new GoogleGenAI({ apiKey: process.env.API_KEY });
-      const transcriptText = messages.map(m => `[${m.role.toUpperCase()}]: ${m.text}`).join('\n');
+      const reportData = await generateSessionSummaryReport(
+        messages,
+        scenario.title,
+        scenario.description,
+        {
+          apiKey: voiceSettings.openRouterApiKey,
+          model: voiceSettings.supervisorModel
+        }
+      );
 
-      const summaryPrompt = `${SYSTEM_SUMMARY_ANALYSIS_PROMPT}
-SCENARIO CONTEXT: ${scenario.title} - ${scenario.description}`;
-
-      const result = await ai.models.generateContent({
-        model: 'gemini-3-flash-preview',
-        config: {
-          systemInstruction: summaryPrompt,
-          responseMimeType: 'application/json',
-          responseSchema: CBT_ANALYSIS_SCHEMA,
-        },
-        contents: [{ role: 'user', parts: [{ text: `SESSION TRANSCRIPT:\n${transcriptText}` }] }]
-      });
-
-      if (result.text) {
-        setFinalReport(JSON.parse(result.text));
-        setStatus('finished');
-      } else {
-        throw new Error("Analysis failed");
-      }
+      setFinalReport(reportData);
+      saveSession(scenario, 'voice', messages, reportData);
+      setStatus('finished');
     } catch (err) {
       console.error("Post-session analysis failure", err);
       onExit();
     }
-  }, [messages, scenario, setStatus, sessionPromiseRef, onExit]);
+  }, [messages, scenario, voiceSettings.openRouterApiKey, voiceSettings.supervisorModel, setStatus, onExit]);
 
   if (status === 'connecting') return <ConnectionState />;
   if (status === 'analyzing') return <AnalyzingState />;
   if (status === 'finished' && finalReport) {
-    return <SessionReport analysis={finalReport} onExit={onExit} />;
+    return (
+      <SessionReport 
+        analysis={finalReport} 
+        scenarioTitle={scenario.title} 
+        messages={messages} 
+        onExit={onExit} 
+      />
+    );
   }
 
   return (
-    <div className="flex flex-col lg:flex-row h-full gap-4 relative overflow-hidden">
-      {/* Main Interaction Area */}
-      <div className="flex-grow bg-slate-900 rounded-3xl overflow-hidden flex flex-col relative shadow-2xl border border-white/5">
-        {/* Animated Background Aura */}
-        <div className="absolute inset-0 overflow-hidden pointer-events-none opacity-20">
-          <div className={`absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[80%] h-[80%] rounded-full blur-[100px] transition-all duration-1000 ${isAiSpeaking ? 'bg-blue-500 scale-110' : 'bg-teal-500 scale-100'}`}></div>
-        </div>
+    <div className="flex flex-col h-full bg-slate-900 rounded-3xl border border-white/10 overflow-hidden relative shadow-2xl">
+      {/* Voice Session Header */}
+      <VoiceHeader
+        scenario={scenario}
+        onExit={onExit}
+        onOpenDeviceSelector={() => setShowDeviceSelector(true)}
+      />
 
-        <VoiceHeader
-          title={scenario.title}
-          onExit={onExit}
-          onFinish={handleFinishSession}
-        />
-
-        <div className="flex-grow flex flex-col items-center justify-center p-12 relative z-10">
-          {!hasStarted && status === 'active' ? (
-            <div className="flex flex-col items-center animate-in fade-in zoom-in duration-700">
-              <div className="w-24 h-24 bg-teal-500/10 rounded-full flex items-center justify-center mb-8 border border-teal-500/20 relative">
-                <div className="absolute inset-0 bg-teal-500/20 rounded-full animate-ping"></div>
-                <BrainCircuit size={40} className="text-teal-400 relative z-10" />
+      {/* Main Interaction Stage */}
+      <div className="flex-grow flex flex-col lg:flex-row items-center justify-between p-6 md:p-12 relative overflow-hidden gap-8">
+        <div className="flex-grow flex flex-col items-center justify-center w-full relative z-10">
+          {/* Error Banner */}
+          {status === 'error' && (
+            <div className="mb-6 p-4 rounded-2xl bg-rose-950/80 border border-rose-500/50 text-rose-200 flex items-center gap-3 max-w-md animate-in fade-in">
+              <AlertTriangle className="text-rose-400 shrink-0" size={20} />
+              <div className="text-xs">
+                <p className="font-bold">Connection Warning</p>
+                <p className="opacity-90">{errorMessage || 'Unable to connect to live voice session. Please verify your OpenRouter API key.'}</p>
               </div>
-              <h3 className="text-2xl font-bold text-white mb-2">Neural Link Established</h3>
-              <p className="text-slate-400 text-sm mb-8 max-w-xs text-center leading-relaxed">
-                The simulation is ready. Press start to begin your interaction with <strong>{scenario.characterName}</strong>.
-              </p>
+            </div>
+          )}
 
-              <div className="bg-white/5 border border-white/10 rounded-2xl p-4 mb-8 flex items-center gap-3 max-w-sm">
-                <div className="bg-teal-500/20 p-2 rounded-lg">
-                  <Info size={16} className="text-teal-400" />
-                </div>
-                <p className="text-[11px] text-slate-300 leading-relaxed">
-                  <strong>Greeting Hint:</strong> Say "Hello {scenario.characterName}" or just wait for them to speak first.
-                </p>
-              </div>
+          {/* Silence Warning Notice */}
+          {isSilenceDetected && !isMuted && status === 'active' && (
+            <div className="absolute top-0 flex items-center gap-2 bg-amber-500/10 border border-amber-500/20 text-amber-300 px-4 py-2 rounded-full text-xs animate-bounce shadow-lg">
+              <AlertCircle size={14} />
+              <span>Low microphone input detected. Please speak closer to your mic.</span>
+            </div>
+          )}
 
+          {/* Audio Visualizer Orb */}
+          <div className="relative mb-8 flex items-center justify-center">
+            <AudioVisualizer
+              level={activeLevel}
+              isAiSpeaking={isAiSpeaking}
+              isUserSpeaking={isUserSpeaking}
+              isMuted={isMuted}
+            />
+
+            {!hasStarted && status === 'active' && (
               <Button
                 onClick={handleStart}
-                className="bg-teal-600 hover:bg-teal-500 text-white px-12 py-7 rounded-2xl font-bold transition-all shadow-xl shadow-teal-900/20 uppercase tracking-widest text-sm"
+                className="absolute z-20 bg-teal-500 hover:bg-teal-400 text-slate-950 font-black px-8 py-6 rounded-full text-sm uppercase tracking-widest shadow-xl shadow-teal-500/20 hover:scale-105 transition-all"
               >
-                <Zap size={18} fill="currentColor" className="mr-3" />
-                Start Session
+                Begin Voice Simulation
               </Button>
+            )}
+          </div>
+
+          {/* Status Indicators */}
+          <div className="flex flex-col items-center gap-2">
+            <div className="flex items-center gap-2 px-4 py-1.5 rounded-full bg-white/5 border border-white/10 backdrop-blur-md">
+              <span className={`w-2 h-2 rounded-full ${isAiSpeaking ? 'bg-blue-400 animate-ping' : isUserSpeaking ? 'bg-teal-400 animate-pulse' : 'bg-slate-500'}`} />
+              <span className="text-[11px] font-bold uppercase tracking-widest text-slate-300">
+                {isAiSpeaking ? `${scenario.characterName} is speaking` : isUserSpeaking ? 'Listening to you...' : 'Ready for dialogue'}
+              </span>
             </div>
-          ) : (
-            <>
-              {isSilenceDetected && !isMuted && (
-                <div className="absolute top-8 left-1/2 -translate-x-1/2 w-full max-w-md animate-in slide-in-from-top-4 duration-500">
-                  <div className="bg-amber-500/90 backdrop-blur-md border border-amber-400 text-white p-4 rounded-2xl shadow-xl flex items-start gap-4">
-                    <div className="bg-white/20 p-2 rounded-xl">
-                      <AlertCircle size={20} />
-                    </div>
-                    <div className="flex-grow">
-                      <h4 className="text-sm font-bold">No Audio Detected</h4>
-                      <p className="text-xs text-white/80 mt-1 leading-relaxed">We can't hear you. Please check your microphone or select a different input device.</p>
-                      <Button
-                        variant="secondary"
-                        size="sm"
-                        onClick={() => setShowDeviceSelector(true)}
-                        className="mt-3 bg-white text-amber-600 px-4 py-1.5 rounded-lg text-[10px] font-black uppercase tracking-widest hover:bg-amber-50"
-                      >
-                        Change Input Device
-                      </Button>
-                    </div>
-                  </div>
-                </div>
-              )}
 
-              {/* Speaker Indicator Badge */}
-              <div className="mb-8 flex flex-col items-center">
-                <div className={`px-4 py-1.5 rounded-full border transition-all duration-500 flex items-center gap-2 ${isAiSpeaking
-                    ? 'bg-blue-500/20 border-blue-400/30 text-blue-300'
-                    : (isUserSpeaking ? 'bg-teal-500/20 border-teal-400/30 text-teal-300' : 'bg-white/5 border-white/10 text-white/40')
-                  }`}>
-                  <div className={`w-2 h-2 rounded-full ${isAiSpeaking ? 'bg-blue-400 animate-pulse' : (isUserSpeaking ? 'bg-teal-400 animate-pulse' : 'bg-white/20')
-                    }`} />
-                  <span className="text-[10px] font-black uppercase tracking-widest">
-                    {isAiSpeaking ? 'AI Speaking' : (isUserSpeaking ? 'You Speaking' : 'Waiting...')}
-                  </span>
-                </div>
-              </div>
-
-              <AudioVisualizer level={activeLevel} active={true} isAiSpeaking={isAiSpeaking} />
-
-              <div className="mt-12 text-center">
-                <p className={`text-sm transition-all duration-500 font-light ${isAiSpeaking ? 'text-blue-300' : 'text-teal-300'}`}>
-                  {isAiSpeaking ? `Vocalizing Response...` : (isMuted ? 'Microphone Muted' : 'Listening...')}
-                </p>
-                <p className="text-[10px] text-white/30 uppercase font-bold tracking-[0.3em] mt-4">Clinical Fidelity Level: 99.8%</p>
-              </div>
-            </>
-          )}
+            <p className="text-xs text-slate-400 font-light mt-1">
+              {voiceSettings.voiceName} Vocal Persona Active
+            </p>
+          </div>
         </div>
 
-        {/* Device Selector Overlay */}
-        {showDeviceSelector && (
-          <div className="absolute inset-0 z-50 bg-slate-900/80 backdrop-blur-sm flex items-center justify-center p-6 animate-in fade-in duration-300">
-            <div className="bg-white rounded-3xl p-6 w-full max-w-sm shadow-2xl border border-slate-100">
-              <div className="flex justify-between items-center mb-6">
-                <div className="flex items-center gap-3">
-                  <div className="bg-slate-800 p-2 rounded-xl text-white">
-                    <Settings2 size={18} />
-                  </div>
-                  <h3 className="font-bold text-slate-800">Audio Input</h3>
-                </div>
-                <Button
-                  variant="ghost"
-                  size="icon"
-                  onClick={() => setShowDeviceSelector(false)}
-                  className="text-slate-400 hover:bg-slate-100 rounded-xl"
-                >
-                  <X size={20} />
-                </Button>
-              </div>
-
-              <AudioDeviceSelector
-                selectedDeviceId={voiceSettings.preferredAudioDeviceId}
-                onSelect={(deviceId) => {
-                  onUpdateSettings({ ...voiceSettings, preferredAudioDeviceId: deviceId });
-                  // Don't close immediately so user sees the checkmark
-                  setTimeout(() => setShowDeviceSelector(false), 300);
-                }}
-              />
-
-              <p className="text-[10px] text-slate-400 mt-6 leading-relaxed italic">
-                Changing your input device will restart the current neural link.
-              </p>
-            </div>
-          </div>
-        )}
-
-        <VoiceControls
-          isMuted={isMuted}
-          onToggleMute={toggleMute}
-          showTranscript={showTranscript}
-          onToggleTranscript={() => setShowTranscript(prev => !prev)}
-        />
-
-        {showTranscript && <TranscriptPanel messages={messages} onClose={() => setShowTranscript(false)} />}
+        {/* Live Insight Drawer */}
+        <div className="w-full lg:w-96 flex-shrink-0 h-full max-h-[500px] lg:max-h-none flex flex-col justify-end">
+          <LiveInsightPanel analysis={liveInsight} isAnalyzing={isAnalyzingTurn} />
+        </div>
       </div>
 
-      {/* Real-time Insights Module */}
-      <LiveInsightPanel analysis={liveInsight} isAnalyzing={isAnalyzingTurn} />
+      {/* Persistent Audio Controls Footer */}
+      <VoiceControls
+        isMuted={isMuted}
+        onToggleMute={toggleMute}
+        onFinish={handleFinishSession}
+        onToggleTranscript={() => setShowTranscript(prev => !prev)}
+        showTranscript={showTranscript}
+        messageCount={messages.length}
+      />
+
+      {/* Transcript Drawer Slideout */}
+      {showTranscript && (
+        <TranscriptPanel
+          messages={messages}
+          onClose={() => setShowTranscript(false)}
+        />
+      )}
+
+      {/* Audio Hardware Selector Modal */}
+      {showDeviceSelector && (
+        <div className="fixed inset-0 z-[110] flex items-center justify-center p-4 bg-slate-950/80 backdrop-blur-md">
+          <div className="bg-slate-900 border border-white/10 rounded-3xl p-6 max-w-md w-full shadow-2xl">
+            <div className="flex justify-between items-center mb-6">
+              <h3 className="text-sm font-bold uppercase tracking-widest text-white flex items-center gap-2">
+                <Settings2 size={16} className="text-teal-400" />
+                Select Audio Input Device
+              </h3>
+              <button
+                onClick={() => setShowDeviceSelector(false)}
+                className="text-slate-400 hover:text-white p-1"
+              >
+                <X size={18} />
+              </button>
+            </div>
+
+            <AudioDeviceSelector
+              selectedDeviceId={voiceSettings.preferredAudioDeviceId}
+              onSelect={(deviceId) => {
+                onUpdateSettings({ ...voiceSettings, preferredAudioDeviceId: deviceId });
+                setShowDeviceSelector(false);
+              }}
+            />
+          </div>
+        </div>
+      )}
     </div>
   );
 };
diff --git a/components/ui/badge.tsx b/components/ui/badge.tsx
index e87d62b..515cdd3 100644
--- a/components/ui/badge.tsx
+++ b/components/ui/badge.tsx
@@ -23,9 +23,8 @@ const badgeVariants = cva(
   }
 )
 
-export interface BadgeProps
-  extends React.HTMLAttributes<HTMLDivElement>,
-    VariantProps<typeof badgeVariants> {}
+export type BadgeProps = React.HTMLAttributes<HTMLDivElement> &
+  VariantProps<typeof badgeVariants>;
 
 function Badge({ className, variant, ...props }: BadgeProps) {
   return (
diff --git a/constants.ts b/constants.ts
index edc341a..e3087c4 100644
--- a/constants.ts
+++ b/constants.ts
@@ -1,5 +1,71 @@
-import { Scenario } from './types';
-import { Type } from "@google/genai";
+import { Scenario, UserSettings } from './types';
+
+export interface VoiceProfile {
+  id: UserSettings['voiceName'];
+  label: string;
+  gender: 'Male' | 'Female' | 'Neutral';
+  style: string;
+  description: string;
+  sampleText: string;
+  openRouterVoice: 'alloy' | 'echo' | 'fable' | 'onyx' | 'nova' | 'shimmer';
+  webSpeechTuning: {
+    pitch: number;
+    rate: number;
+  };
+}
+
+export const VOICE_PROFILES: VoiceProfile[] = [
+  {
+    id: 'Fenrir',
+    label: 'Fenrir (Salt of the Earth)',
+    gender: 'Male',
+    style: 'Gruff / Earthy',
+    description: 'A gravelly, direct, salt-of-the-earth tone. Grounded and weathered, perfect for boundary testing and blue-collar roleplays.',
+    sampleText: "Listen here, friend. Life's messy and things break down, but we take it one honest step at a time.",
+    openRouterVoice: 'onyx',
+    webSpeechTuning: { pitch: 0.75, rate: 0.92 }
+  },
+  {
+    id: 'Zephyr',
+    label: 'Zephyr',
+    gender: 'Neutral',
+    style: 'Helpful',
+    description: 'A balanced, clear, and professional tone suitable for most general scenarios.',
+    sampleText: "Hello. I'm here to provide a clear, balanced perspective as we explore different ways of thinking.",
+    openRouterVoice: 'alloy',
+    webSpeechTuning: { pitch: 1.0, rate: 1.0 }
+  },
+  {
+    id: 'Puck',
+    label: 'Puck',
+    gender: 'Male',
+    style: 'Youthful',
+    description: 'Energetic and friendly, ideal for peer-to-peer or informal interactions.',
+    sampleText: "Hey there! Ready to jump into this scenario and see what kind of creative solutions we can uncover?",
+    openRouterVoice: 'fable',
+    webSpeechTuning: { pitch: 1.15, rate: 1.05 }
+  },
+  {
+    id: 'Kore',
+    label: 'Kore',
+    gender: 'Female',
+    style: 'Calm',
+    description: 'Soothing and professional, perfect for clinical or high-stress roleplay.',
+    sampleText: "Take a steady breath. Whatever you're carrying right now, we can slow down and examine it together.",
+    openRouterVoice: 'nova',
+    webSpeechTuning: { pitch: 1.1, rate: 0.95 }
+  },
+  {
+    id: 'Charon',
+    label: 'Charon',
+    gender: 'Male',
+    style: 'Authoritative',
+    description: 'Deep and commanding, useful for workplace or boundary-testing scenarios.',
+    sampleText: "Let us be direct. In demanding situations, clear boundaries and disciplined reasoning are essential.",
+    openRouterVoice: 'echo',
+    webSpeechTuning: { pitch: 0.85, rate: 0.95 }
+  }
+];
 
 export interface GlossaryEntry {
   term: string;
@@ -99,6 +165,18 @@ export const CBT_GLOSSARY: GlossaryEntry[] = [
     definition: "Believing you are responsible for events outside your control or that other people's behavior is a direct reaction to you.",
     example: "My boss looks upset today; it must be because of that email I sent."
   },
+  {
+    term: "Labeling",
+    category: "Distortion",
+    definition: "Assigning a harsh, global, and definitive negative label to yourself or others based on a single instance or error.",
+    example: "I made an error on the slide, so 'I am an idiot' rather than 'I made a mistake.'"
+  },
+  {
+    term: "Overgeneralization",
+    category: "Distortion",
+    definition: "Taking a single negative event and seeing it as a never-ending pattern of defeat by using words like 'always' or 'never'.",
+    example: "I didn't get this promotion, so I will never advance in my career."
+  },
   {
     term: "Grounding Exercises",
     category: "Technique",
@@ -116,7 +194,7 @@ export const SCENARIOS: Scenario[] = [
     description: "You sent a text to a close friend hours ago and haven't heard back. You're starting to imagine they're angry with you or that you've done something wrong.",
     category: 'Relationships',
     difficulty: 'Beginner',
-    systemInstruction: "You are Alex, a busy friend who just hasn't had a chance to reply yet. You are friendly and non-confrontational. If asked, you explain you were just preoccupied with chores.",
+    systemInstruction: "You are Alex, a busy friend who just hasn't had a chance to reply yet. You are friendly and non-confrontational. If asked, you explain you were just preoccupied with chores. INTERNAL CBT LOGIC: If the user tests for reassurance or asks if you're upset, warmly reassure them that everything is fine.",
     initialMessage: "Hey! Sorry I'm just getting back to you, it's been a crazy day. What's up?",
     cbtFocus: ["Mind Reading", "Fortune Telling"]
   },
@@ -138,7 +216,7 @@ export const SCENARIOS: Scenario[] = [
     description: "You're at a networking event and you just made a small slip-up in a conversation. You feel like everyone noticed and is judging you.",
     category: 'Social Anxiety',
     difficulty: 'Advanced',
-    systemInstruction: "You are David, an attendee at a networking event. You are polite and didn't even notice the user's minor slip-up. You are focused on professional exchange.",
+    systemInstruction: "You are David, an attendee at a networking event. You are polite and didn't even notice the user's minor slip-up. You are focused on professional exchange. INTERNAL CBT LOGIC: If the user draws excessive attention to their mistake or apologizes repeatedly, casually dismiss it and keep the conversation on the topic.",
     initialMessage: "That's an interesting point about the industry trends. So, how did you get started in this field?",
     cbtFocus: ["Spotlight Effect", "Emotional Reasoning"]
   },
@@ -149,7 +227,7 @@ export const SCENARIOS: Scenario[] = [
     description: "A minor mistake at home triggers a spiral of self-deprecating thoughts. Practice internal cognitive restructuring by talking back to your personified inner critic.",
     category: 'Self-Talk',
     difficulty: 'Beginner',
-    systemInstruction: "You are the user's personified Inner Critic. You are harsh, cynical, and use common distortions. Your goal is to represent the user's negative self-talk so they can practice refuting it.",
+    systemInstruction: "You are the user's personified Inner Critic. You are harsh, cynical, and use common distortions. Your goal is to represent the user's negative self-talk so they can practice refuting it. INTERNAL CBT LOGIC: If the user responds with calm, objective evidence-based reframing, grudgingly lose ground. If the user engages in emotional reasoning or agrees with your insults, double down on catastrophic conclusions.",
     initialMessage: "I can't believe you forgot to buy milk again. You're completely disorganized and you'll never get your life together.",
     cbtFocus: ["Labeling", "Overgeneralization"]
   },
@@ -266,30 +344,30 @@ export const SCENARIOS: Scenario[] = [
 ];
 
 export const CBT_ANALYSIS_SCHEMA = {
-  type: Type.OBJECT,
+  type: 'object',
   properties: {
     analysis: {
-      type: Type.OBJECT,
+      type: 'object',
       properties: {
-        distortions: { type: Type.ARRAY, items: { type: Type.STRING } },
-        isAdaptive: { type: Type.BOOLEAN },
-        evidence: { type: Type.STRING },
+        distortions: { type: 'array', items: { type: 'string' } },
+        isAdaptive: { type: 'boolean' },
+        evidence: { type: 'string' },
       },
       required: ['distortions', 'isAdaptive', 'evidence']
     },
     rating: {
-      type: Type.OBJECT,
+      type: 'object',
       properties: {
-        score: { type: Type.INTEGER },
-        reason: { type: Type.STRING },
+        score: { type: 'integer' },
+        reason: { type: 'string' },
       },
       required: ['score', 'reason']
     },
     suggestions: {
-      type: Type.OBJECT,
+      type: 'object',
       properties: {
-        alternativeThought: { type: Type.STRING },
-        behavioralStep: { type: Type.STRING },
+        alternativeThought: { type: 'string' },
+        behavioralStep: { type: 'string' },
       },
       required: ['alternativeThought', 'behavioralStep']
     }
diff --git a/docs/plans/PLAN_SVELTE_REWRITE.md b/docs/plans/PLAN_SVELTE_REWRITE.md
new file mode 100644
index 0000000..61f2ec6
--- /dev/null
+++ b/docs/plans/PLAN_SVELTE_REWRITE.md
@@ -0,0 +1,300 @@
+# Architectural Specification & Migration Plan: Svelte 5 Rewrite
+
+**Project:** Cognitive Clarity (`clarity-helper`)  
+**Target Architecture:** Svelte 5 (Runes) + Vite 6 + Tailwind CSS + `bits-ui` + `lucide-svelte`  
+**Author:** Antigravity Autonomous Architecture Swarm (`[Svelte_Fullstack_Specialist]`, `[React_Frontend_Specialist]`, `[Adversarial_Auditor]`)  
+**Status:** Approved Blueprint  
+**Date:** 2026-09-29  
+
+---
+
+## 1. Executive Summary & Architectural Rationale
+
+Cognitive Clarity is currently built on React 19.2, Vite 6, Tailwind CSS 3.4, and Radix UI. While functional, the application suffers from React-specific architectural overhead:
+1. **Audio DSP Re-render Friction:** WebAudio FFT frequency visualizers (`AudioVisualizer.tsx`) and mic/synthesis volume levels trigger frequent React state updates (`setAudioLevel`, `setAiAudioLevel`) at 60 FPS, causing unnecessary virtual DOM diffing cycles across parent components.
+2. **Context & Prop Drilling Drag:** Settings and scenario parameters required explicit prop drilling down through `App.tsx` -> `ChatSession.tsx` / `VoiceSession.tsx`, leading to silent parameter dropping bugs.
+3. **Bundle Weight:** React 19 + `react-dom` + `@radix-ui/*` primitives account for over 250 kB of the runtime JavaScript bundle.
+
+### Why Svelte 5 (Runes)?
+- **Fine-Grained Reactivity (Zero Virtual DOM):** Svelte 5 runes (`$state`, `$derived`, `$effect`) update the exact DOM elements bound to audio frequency bars without re-evaluating the component function or neighboring elements.
+- **Vanishing Runtime & PWA Performance:** Eliminating `react` and `react-dom` reduces the vendor chunk footprint by over 60%, resulting in faster cold starts on mobile PWA standalone installs.
+- **Universal Reactive Classes:** Complex state machines like WebAudio DSP capture and turn-by-turn clinical supervision can be modeled as pure TypeScript reactive classes (`AudioEngine.svelte.ts`, `SessionStore.svelte.ts`), cleanly decoupling audio hardware from UI presentation.
+- **Bits UI Parity:** `bits-ui` provides accessible, unstyled headless primitives with 1:1 API parity to Radix UI.
+
+---
+
+## 2. Component-by-Component Mapping & Recomposition Matrix
+
+Every single React component and hook is systematically evaluated, documented, and mapped to its Svelte 5 counterpart:
+
+### 2.1 Application Shell & State Coordinators
+
+| React Component | Svelte 5 Component | React Mechanics (`useState`, `useEffect`, etc.) | Svelte 5 Recomposition (`$state`, `$derived`, `$effect`, etc.) |
+|:---|:---|:---|:---|
+| **`App.tsx`** | **`src/App.svelte`** | Router state (`activeScenario`, `sessionMode`, `isPreparing`), modal toggles (`showGenerator`, `showReference`, `showSettings`), `localStorage` sync via `useEffect`. | Uses root `AppStore.svelte.ts` context. State managed with `$state`. Modals rendered via declarative snippets. PWA `ReloadPrompt` mounted at root. |
+| **`index.tsx`** | **`src/main.ts`** | `createRoot(document.getElementById('root')!).render(<App />)`. | `mount(App, { target: document.getElementById('app')! })` using Svelte 5 `mount` API. |
+| **`index.html`** | **`index.html`** | `<div id="root"></div>`, scripts pointing to `index.tsx`. | `<div id="app"></div>`, script pointing to `/src/main.ts`. Retains PWA manifest and Inter font. |
+| **`sw.ts`** | **`src/sw.ts`** | Workbox injectManifest precaching + Google Fonts runtime caching. | 100% retained. `vite-plugin-pwa` operates identically with `@sveltejs/vite-plugin-svelte`. |
+
+---
+
+### 2.2 Design System UI Primitives (`components/ui/` -> `src/lib/components/ui/`)
+
+All Radix UI primitives are mapped to `bits-ui` (or native accessible HTML where headless UI is redundant):
+
+| React Component | Svelte 5 Component | Dependencies (React) | Dependencies (Svelte 5) | Recomposition Notes |
+|:---|:---|:---|:---|:---|
+| **`ui/button.tsx`** | **`Button.svelte`** | `@radix-ui/react-slot`, `class-variance-authority` | `bits-ui/button` or HTML `<button>` + `tailwind-variants` | Uses Svelte 5 `Snippet` for default children. Supports `variant` and `size` props. |
+| **`ui/card.tsx`** | **`Card.svelte`**, `CardHeader.svelte`, `CardTitle.svelte`, `CardContent.svelte`, `CardFooter.svelte` | Native `div` containers with Tailwind styling | Native `div` components using `{#snippet children()}` | Clean composable snippets replacing sub-component JSX props. |
+| **`ui/badge.tsx`** | **`Badge.svelte`** | `class-variance-authority`, `clsx`, `tailwind-merge` | `clsx` + `tailwind-merge` + `$props<{ variant?: 'default' \| 'secondary' \| 'destructive' \| 'outline' }>()` | Native `span` with typed variants. |
+| **`ui/dialog.tsx`** | **`Dialog.svelte`** | `@radix-ui/react-dialog` | `bits-ui` (`Dialog.Root`, `Dialog.Trigger`, `Dialog.Portal`, `Dialog.Overlay`, `Dialog.Content`) | Retains exact backdrop blur, animations, and focus trapping. |
+| **`ui/tabs.tsx`** | **`Tabs.svelte`** | `@radix-ui/react-tabs` | `bits-ui` (`Tabs.Root`, `Tabs.List`, `Tabs.Trigger`, `Tabs.Content`) | Controlled tab state via `$bindable()` or internal value. |
+| **`ui/scroll-area.tsx`** | **`ScrollArea.svelte`** | `@radix-ui/react-scroll-area` | `bits-ui` (`ScrollArea.Root`, `ScrollArea.Viewport`, `ScrollArea.Scrollbar`) | Custom styled scrollbar matching dark/light themes. |
+| **`ui/tooltip.tsx`** | **`Tooltip.svelte`** | `@radix-ui/react-tooltip` | `bits-ui` (`Tooltip.Root`, `Tooltip.Trigger`, `Tooltip.Content`) | Replaces bespoke `components/Tooltip.tsx` and Radix tooltip with unified Svelte 5 component. |
+| **`ui/select.tsx`** | **`Select.svelte`** | `@radix-ui/react-select` | `bits-ui` (`Select.Root`, `Select.Trigger`, `Select.Content`, `Select.Item`) | Accessible dropdown selector for audio devices and difficulty. |
+| **`ui/switch.tsx`** | **`Switch.svelte`** | `@radix-ui/react-switch` | `bits-ui` (`Switch.Root`, `Switch.Thumb`) | Accessible toggle switch. |
+| **`ui/input.tsx`** | **`Input.svelte`** | Native `<input>` with Tailwind classes | Native `<input>` with `$bindable(value)` and rest props | Type-safe two-way binding. |
+| **`ui/textarea.tsx`** | **`Textarea.svelte`** | Native `<textarea>` with Tailwind classes | Native `<textarea>` with `$bindable(value)` and auto-resize | Two-way reactive text binding. |
+| **`ui/separator.tsx`** | **`Separator.svelte`** | `@radix-ui/react-separator` | `bits-ui` (`Separator.Root`) | Semantic divider. |
+| **`ui/label.tsx`** | **`Label.svelte`** | `@radix-ui/react-label` | `bits-ui` (`Label.Root`) or `<label>` | Semantic form labeling. |
+
+---
+
+### 2.3 Interactive Domain Feature Components
+
+| React Component | Svelte 5 Component | Core Mechanics & State | Svelte 5 Architectural Treatment |
+|:---|:---|:---|:---|
+| **`ScenarioCard.tsx`** | **`ScenarioCard.svelte`** | Displays scenario metadata, difficulty badge, CBT focus tags. Has "Chat" and "Voice" launcher buttons and custom delete trigger. | `$props<{ scenario: Scenario, onSelect: (s: Scenario, mode: SessionMode) => void, onDelete?: (id: string) => void }>()`. Uses `Badge` and `Button` snippets. Tooltip hover explanations. |
+| **`ChatSession.tsx`** | **`ChatSession.svelte`** | Message stream rendering, SSE chunk accumulation, automatic scroll-to-bottom on new messages, out-of-band turn supervision, post-session summary. | Driven by `ChatSessionController.svelte.ts`. Message list auto-scroll handled via an action `use:autoScroll`. Sub-components `ChatMessage.svelte` and `ChatInput.svelte`. Out-of-band analysis drawer rendered in flex container. |
+| **`ChatMessage.tsx`** | **`ChatMessage.svelte`** | Renders user vs AI character dialogue bubbles with timestamps and role avatar. | Pure presentational component. Formats timestamps via `$derived`. Supports markdown rendering through Svelte markdown component. |
+| **`ChatInput.tsx`** | **`ChatInput.svelte`** | Text input with enter-key send shortcut and disabled state while waiting for AI turn. | Form binding with `$state(text)`. Enter key listener `onkeydown={(e) => e.key === 'Enter' && !e.shiftKey && submit()}`. |
+| **`VoiceSession.tsx`** | **`VoiceSession.svelte`** | Duplex voice session orchestrator. Coordinates WebAudio capture, FFT visualizer, speech synthesis, live insight drawer, transcripts modal. | Uses `AudioEngine.svelte.ts` service class. Binds visualizer level directly to reactive state without re-rendering container. Coordinates sub-components `VoiceHeader`, `VoiceControls`, `AudioVisualizer`, `TranscriptPanel`. |
+| **`VoiceHeader.tsx`** | **`VoiceHeader.svelte`** | Scenario title, microphone device selector button, finish session trigger. | Simple header receiving `$props<{ scenario: Scenario, onExit: () => void, onOpenDeviceSelector: () => void }>()`. |
+| **`VoiceControls.tsx`** | **`VoiceControls.svelte`** | Mute button toggle, finish session button, transcript drawer button. | Reactive buttons bound to `audio.isMuted` and `$state(showTranscript)`. |
+| **`AnalyzingState.tsx`** | **`AnalyzingState.svelte`** | Animated post-session clinical synthesis loading screen. | SVG animated spinners and pulsing status typography. |
+| **`ConnectionState.tsx`** | **`ConnectionState.svelte`** | Pre-session audio hardware initialization and calibration screen. | Smooth CSS pulsing visualizer. |
+| **`AudioVisualizer.tsx`** | **`AudioVisualizer.svelte`** | 19 animated frequency bars dynamically styled based on microphone level or AI vocalization level. | Directly mutates bar heights via `$derived` or inline style calculation. In Svelte 5, updates happen at microtask speed with zero VDOM diffing. |
+| **`AudioDeviceSelector.tsx`** | **`AudioDeviceSelector.svelte`** | Queries `navigator.mediaDevices.enumerateDevices()`, selects input mic. | Device enumeration encapsulated in a reactive Svelte 5 class or effect. Accessible `Select` dropdown. |
+| **`LiveInsightPanel.tsx`** | **`LiveInsightPanel.svelte`** | Out-of-band supervisor drawer displaying distortions detected, adaptiveness, evidence quote, efficiency score, reframes, and tactical pivots. | Animates into view via `transition:slide`. Renders structured `AnalysisResult` reactive prop. |
+| **`SessionReport.tsx`** | **`SessionReport.svelte`** | Comprehensive post-session CBT assessment report with mastery score, trajectory, homework suggestions, transcript accordion, Markdown & JSON downloaders. | Generates download blobs via `sessionStorage.ts`. Accordion transcript drawer. Clipboard copy with reactive `$state(copied)` timeout. |
+| **`ScenarioGenerator.tsx`** | **`ScenarioGenerator.svelte`** | AI scenario builder dialog. Prompts user for description, selects CBT concepts from glossary, calibrates difficulty, calls OpenRouter JSON API. | Dialog modal using `Dialog.svelte`. Reactive multiselect tag chips with `$state(selectedConcepts)`. Generates validated scenario and appends to `customScenarios`. |
+| **`CBTReference.tsx`** | **`CBTReference.svelte`** | Interactive searchable CBT glossary covering all 18 clinical terms, definitions, categories, and real-world examples. | Filter tabs (`All`, `Distortions`, `Techniques`, `Concepts`) and search input. Filtered list calculated cleanly via `$derived(filteredGlossary)`. |
+| **`SettingsModal.tsx`** | **`SettingsModal.svelte`** | Tabs for Voice & Audio (vocal persona, mic device) and OpenRouter AI (API key input, model selector with `google/gemini-3.8-flash`). | Accessible `Tabs.svelte`. Binds `$state(openRouterKey)` and `$state(selectedModel)`. Persists to `UserSettingsStore.svelte.ts`. |
+| **`TranscriptPanel.tsx`** | **`TranscriptPanel.svelte`** | Slide-over drawer displaying conversation history during voice sessions. | Svelte transition drawer (`transition:fly={{ x: 300 }}`) with `ScrollArea`. |
+| **`ReloadPrompt.svelte`** | **`ReloadPrompt.svelte`** | PWA update notification toast when Workbox detects a service worker update. | Uses `virtual:pwa-register/svelte` to trigger automatic or prompt-based reload. |
+| **`VersionBadge.svelte`** | **`VersionBadge.svelte`** | Displays `__APP_VERSION__` and `__BUILD_TIMESTAMP__`. | Reads Vite compile-time definitions. |
+
+---
+
+## 3. Reactive Architecture & State Engineering (Svelte 5 Runes)
+
+In Svelte 5, state management is vastly superior to React's `useState` / `useCallback` / `useRef` paradigm. We will implement three first-class reactive state stores:
+
+### 3.1 `UserSettingsStore.svelte.ts` (Global Preferences)
+```typescript
+import { UserSettings } from './types';
+import { DEFAULT_OPENROUTER_MODEL, DEFAULT_SUPERVISOR_MODEL } from './services/apiConfig';
+
+const SETTINGS_KEY = 'cognitive-clarity-settings';
+
+export class UserSettingsStore {
+  voiceName = $state<UserSettings['voiceName']>('Zephyr');
+  vocalStyle = $state('Helpful');
+  genderPreference = $state<'Male' | 'Female' | 'Neutral'>('Neutral');
+  preferredAudioDeviceId = $state<string | undefined>(undefined);
+  openRouterApiKey = $state<string | undefined>(undefined);
+  roleplayModel = $state(DEFAULT_OPENROUTER_MODEL);
+  supervisorModel = $state(DEFAULT_SUPERVISOR_MODEL);
+
+  constructor() {
+    this.load();
+  }
+
+  load() {
+    if (typeof localStorage === 'undefined') return;
+    try {
+      const saved = localStorage.getItem(SETTINGS_KEY);
+      if (saved) {
+        const parsed = JSON.parse(saved);
+        Object.assign(this, parsed);
+      }
+    } catch (e) {
+      console.error("Failed to load settings", e);
+    }
+  }
+
+  save() {
+    if (typeof localStorage === 'undefined') return;
+    const data: UserSettings = {
+      voiceName: this.voiceName,
+      vocalStyle: this.vocalStyle,
+      genderPreference: this.genderPreference,
+      preferredAudioDeviceId: this.preferredAudioDeviceId,
+      openRouterApiKey: this.openRouterApiKey,
+      roleplayModel: this.roleplayModel,
+      supervisorModel: this.supervisorModel,
+    };
+    localStorage.setItem(SETTINGS_KEY, JSON.stringify(data));
+  }
+}
+
+export const userSettings = new UserSettingsStore();
+```
+
+### 3.2 `AudioEngine.svelte.ts` (Isolated WebAudio DSP Controller)
+Replaces `hooks/useLiveSession.ts`. Completely encapsulates hardware access, FFT frequency calculations, and speech synthesis:
+```typescript
+import { Scenario, Message, AnalysisResult } from './types';
+import { UserSettingsStore } from './UserSettingsStore.svelte';
+import { streamOpenRouterChat, analyzeTurnWithOpenRouter, synthesizeSpeechWithOpenRouter } from './services/openRouterService';
+
+export class AudioEngine {
+  status = $state<'connecting' | 'active' | 'analyzing' | 'finished' | 'error'>('connecting');
+  errorMessage = $state<string | null>(null);
+  isMuted = $state(false);
+  micLevel = $state(0);
+  aiAudioLevel = $state(0);
+  isAiSpeaking = $state(false);
+  isUserSpeaking = $state(false);
+  messages = $state<Message[]>([]);
+  liveInsight = $state<AnalysisResult | null>(null);
+  isAnalyzingTurn = $state(false);
+
+  // Active level derived cleanly for visualizer
+  activeLevel = $derived(this.isAiSpeaking ? this.aiAudioLevel : this.micLevel);
+
+  private inputCtx: AudioContext | null = null;
+  private outputCtx: AudioContext | null = null;
+  private userAnalyser: AnalyserNode | null = null;
+  private aiAnalyser: AnalyserNode | null = null;
+  private activeSource: AudioBufferSourceNode | null = null;
+  private recognition: any = null;
+  private animFrameId: number | null = null;
+
+  constructor(private scenario: Scenario, private settings: UserSettingsStore) {}
+
+  async start() {
+    // 1. Initialize AudioContexts & Analysers
+    // 2. Setup Web Speech Recognition
+    // 3. Start RAF loop to update this.micLevel and this.aiAudioLevel
+    // 4. Initial scenario greeting
+  }
+
+  stopAllAudio() {
+    this.activeSource?.stop();
+    this.activeSource = null;
+    if (typeof window !== 'undefined' && 'speechSynthesis' in window) {
+      window.speechSynthesis.cancel();
+    }
+    this.isAiSpeaking = false;
+    this.aiAudioLevel = 0;
+  }
+
+  destroy() {
+    this.stopAllAudio();
+    if (this.animFrameId) cancelAnimationFrame(this.animFrameId);
+    this.recognition?.stop();
+    this.inputCtx?.close();
+    this.outputCtx?.close();
+  }
+}
+```
+
+### 3.3 Context Injection via Svelte 5 Context API
+To avoid prop drilling, the root `App.svelte` provisions the stores using `setContext`:
+```typescript
+// src/lib/context.ts
+import { getContext, setContext } from 'svelte';
+import { UserSettingsStore } from './UserSettingsStore.svelte';
+import { AppStateStore } from './AppStateStore.svelte';
+
+const SETTINGS_KEY = Symbol('USER_SETTINGS');
+const APP_STATE_KEY = Symbol('APP_STATE');
+
+export const setUserSettingsContext = (store: UserSettingsStore) => setContext(SETTINGS_KEY, store);
+export const getUserSettingsContext = () => getContext<UserSettingsStore>(SETTINGS_KEY);
+
+export const setAppStateContext = (store: AppStateStore) => setContext(APP_STATE_KEY, store);
+export const getAppStateContext = () => getContext<AppStateStore>(APP_STATE_KEY);
+```
+
+---
+
+## 4. Tri-Lens Adversarial Swarm Audit (`--audit --swarm`)
+
+### 4.1 Lens 1: Requirements & Blast Radius (`[Requirements_BlastRadius_Auditor]`)
+- **Clinical Roleplay Invariant:** Svelte 5 implementation must preserve strict separation between character dialogue and supervisor feedback. System instructions in `ChatSession.svelte` and `AudioEngine.svelte.ts` must maintain anti-meta constraints:
+  - AI character NEVER congratulates the user or breaks character.
+  - Clinical supervision runs strictly out-of-band via parallel OpenRouter promises.
+- **Scenario & Glossary Parity:** 100% preservation of all 14 scenarios and 18 glossary terms from `constants.ts`.
+- **Backend API Neutrality:** The existing Azure Functions in `api/` (`/api/chat`, `/api/analysis`, `/api/scenario/generate`) remain 100% compatible and unchanged, since Svelte consumes the same HTTP JSON contracts.
+
+### 4.2 Lens 2: Performance & Security (`[Performance_Security_Auditor]`)
+- **WebAudio Garbage Collection & Context Limits:** Browsers enforce a hard cap of ~6 active `AudioContext` instances. `AudioEngine.svelte.ts` must implement strict `$effect` teardown lifecycles calling `audioCtx.close()` upon component unmount.
+- **Token Streaming Throughput:** Server-Sent Events in `openRouterService.ts` parse chunks at wire speed. In Svelte 5, text accumulation directly appends to `$state(text)` without triggering full component tree re-renders.
+- **Client Key Security:** OpenRouter API keys remain strictly local to `localStorage` and `Authorization: Bearer <key>` headers. Zero telemetry leakage.
+
+### 4.3 Lens 3: Test Rigor & QA (`[TestRigor_QA_Auditor]`)
+- **TDD Contract:** Establish Vitest test suites for:
+  1. `UserSettingsStore.test.ts`: LocalStorage read/write, 4-tier resolution hierarchy.
+  2. `AudioEngine.test.ts`: Mocked WebAudio lifecycle, turn progression, error handling.
+  3. `CBTReference.test.ts`: Reactive search filtering across distortions and techniques.
+  4. `ScenarioGenerator.test.ts`: Schema validation for AI-generated scenarios.
+
+---
+
+## 5. Phased Implementation Roadmap & Verification Gates
+
+```mermaid
+flowchart LR
+    Phase1[Phase 1: Setup & Dependencies] --> Phase2[Phase 2: Core Services & Types]
+    Phase2 --> Phase3[Phase 3: Svelte 5 Runes & Stores]
+    Phase3 --> Phase4[Phase 4: Design Primitives bits-ui]
+    Phase4 --> Phase5[Phase 5: Feature Components]
+    Phase5 --> Phase6[Phase 6: Audio & Chat Engines]
+    Phase6 --> Phase7[Phase 7: 5-Gate CI Validation]
+```
+
+### Phase 1: Tooling & Dual Workspace Harness
+1. Scaffold Svelte 5 configuration in the repository:
+   - Add `@sveltejs/vite-plugin-svelte` and `svelte@^5.0.0` to `devDependencies`.
+   - Install `bits-ui` and `lucide-svelte`.
+   - Update `vite.config.ts` to support both Svelte and PWA compilation.
+   - Configure Vitest with `@testing-library/svelte` for Svelte component testing.
+
+### Phase 2: Domain Services & Types Ingestion
+1. Re-use 100% framework-agnostic TypeScript files directly:
+   - `types.ts`, `constants.ts`
+   - `services/apiConfig.ts`, `services/openRouterService.ts`, `services/sessionStorage.ts`, `services/audioUtils.ts`
+2. Validate with existing test suite: `npm test` continues passing 12/12.
+
+### Phase 3: Svelte 5 Reactive State Layer
+1. Author `src/lib/stores/UserSettingsStore.svelte.ts`.
+2. Author `src/lib/stores/AppStateStore.svelte.ts`.
+3. Author `src/lib/audio/AudioEngine.svelte.ts`.
+4. Author Vitest unit tests verifying state transitions, defaults (`google/gemini-3.8-flash`), and storage persistence.
+
+### Phase 4: Svelte Design System (`src/lib/components/ui/`)
+1. Implement `Button.svelte`, `Badge.svelte`, `Card.svelte`, `Dialog.svelte`, `Tabs.svelte`, `ScrollArea.svelte`, `Tooltip.svelte`, `Input.svelte`, `Textarea.svelte`, `Select.svelte`.
+2. Verify visual token parity with Tailwind 3.4 / 4 utility classes.
+
+### Phase 5: Feature Components Migration
+1. Author `ScenarioCard.svelte`, `CBTReference.svelte`, `SettingsModal.svelte`, `ScenarioGenerator.svelte`.
+2. Author `SessionReport.svelte` with Markdown and JSON report downloaders.
+3. Author `LiveInsightPanel.svelte` with reactive distortion pill rendering and star rating.
+
+### Phase 6: Session Controllers & Audio Visualizer
+1. Author `ChatSession.svelte`, `ChatMessage.svelte`, `ChatInput.svelte`.
+2. Author `VoiceSession.svelte`, `VoiceHeader.svelte`, `VoiceControls.svelte`, `AudioVisualizer.svelte`, `TranscriptPanel.svelte`.
+3. Author `ConnectionState.svelte`, `AnalyzingState.svelte`.
+4. Test real-time WebAudio microphone frequency analysis and OpenRouter speech playback.
+
+### Phase 7: App Shell, PWA Precache & 5-Gate Validation
+1. Compose `src/App.svelte` with hero section, difficulty filter pills, scenario grid, and modal dialogs.
+2. Update `sw.ts` and `vite.config.ts` PWA injectManifest.
+3. Run 5-Gate Validation:
+   - Gate 1: Svelte TypeScript check (`svelte-check` / `tsc --noEmit`)
+   - Gate 2: Vitest unit & component test suite (`npm test`)
+   - Gate 3: Scenario schema validator (`npm run validate:scenarios`)
+   - Gate 4: Production build (`npm run build:nobump`)
+   - Gate 5: Backend assembly compilation (`dotnet build api/api.csproj`)
diff --git a/docs/screenshots/desktop-chrome/01-home-initial.png b/docs/screenshots/desktop-chrome/01-home-initial.png
new file mode 100644
index 0000000..4b0c9fa
Binary files /dev/null and b/docs/screenshots/desktop-chrome/01-home-initial.png differ
diff --git a/docs/screenshots/desktop-chrome/02-filter-beginner.png b/docs/screenshots/desktop-chrome/02-filter-beginner.png
new file mode 100644
index 0000000..f634350
Binary files /dev/null and b/docs/screenshots/desktop-chrome/02-filter-beginner.png differ
diff --git a/docs/screenshots/desktop-chrome/03-filter-advanced.png b/docs/screenshots/desktop-chrome/03-filter-advanced.png
new file mode 100644
index 0000000..3f8054d
Binary files /dev/null and b/docs/screenshots/desktop-chrome/03-filter-advanced.png differ
diff --git a/docs/screenshots/desktop-chrome/04-settings-modal-voice.png b/docs/screenshots/desktop-chrome/04-settings-modal-voice.png
new file mode 100644
index 0000000..20c46c4
Binary files /dev/null and b/docs/screenshots/desktop-chrome/04-settings-modal-voice.png differ
diff --git a/docs/screenshots/desktop-chrome/05-settings-modal-openrouter.png b/docs/screenshots/desktop-chrome/05-settings-modal-openrouter.png
new file mode 100644
index 0000000..6dd3d15
Binary files /dev/null and b/docs/screenshots/desktop-chrome/05-settings-modal-openrouter.png differ
diff --git a/docs/screenshots/desktop-chrome/06-cbt-reference-all.png b/docs/screenshots/desktop-chrome/06-cbt-reference-all.png
new file mode 100644
index 0000000..424d2dc
Binary files /dev/null and b/docs/screenshots/desktop-chrome/06-cbt-reference-all.png differ
diff --git a/docs/screenshots/desktop-chrome/07-cbt-reference-search.png b/docs/screenshots/desktop-chrome/07-cbt-reference-search.png
new file mode 100644
index 0000000..1447015
Binary files /dev/null and b/docs/screenshots/desktop-chrome/07-cbt-reference-search.png differ
diff --git a/docs/screenshots/desktop-chrome/08-scenario-generator-modal.png b/docs/screenshots/desktop-chrome/08-scenario-generator-modal.png
new file mode 100644
index 0000000..8f2d4e9
Binary files /dev/null and b/docs/screenshots/desktop-chrome/08-scenario-generator-modal.png differ
diff --git a/docs/screenshots/desktop-chrome/09-scenario-generator-filled.png b/docs/screenshots/desktop-chrome/09-scenario-generator-filled.png
new file mode 100644
index 0000000..5623b95
Binary files /dev/null and b/docs/screenshots/desktop-chrome/09-scenario-generator-filled.png differ
diff --git a/docs/screenshots/desktop-chrome/10-chat-session-initial.png b/docs/screenshots/desktop-chrome/10-chat-session-initial.png
new file mode 100644
index 0000000..5f1c53d
Binary files /dev/null and b/docs/screenshots/desktop-chrome/10-chat-session-initial.png differ
diff --git a/docs/screenshots/desktop-chrome/11-chat-interaction-streamed.png b/docs/screenshots/desktop-chrome/11-chat-interaction-streamed.png
new file mode 100644
index 0000000..6d1e6a3
Binary files /dev/null and b/docs/screenshots/desktop-chrome/11-chat-interaction-streamed.png differ
diff --git a/docs/screenshots/desktop-chrome/12-session-report-summary.png b/docs/screenshots/desktop-chrome/12-session-report-summary.png
new file mode 100644
index 0000000..1006ae0
Binary files /dev/null and b/docs/screenshots/desktop-chrome/12-session-report-summary.png differ
diff --git a/docs/screenshots/desktop-chrome/13-voice-cockpit-initial.png b/docs/screenshots/desktop-chrome/13-voice-cockpit-initial.png
new file mode 100644
index 0000000..e176401
Binary files /dev/null and b/docs/screenshots/desktop-chrome/13-voice-cockpit-initial.png differ
diff --git a/docs/screenshots/desktop-chrome/14-voice-transcript-drawer.png b/docs/screenshots/desktop-chrome/14-voice-transcript-drawer.png
new file mode 100644
index 0000000..856a4a8
Binary files /dev/null and b/docs/screenshots/desktop-chrome/14-voice-transcript-drawer.png differ
diff --git a/docs/screenshots/desktop-chrome/15-voice-audio-settings-modal.png b/docs/screenshots/desktop-chrome/15-voice-audio-settings-modal.png
new file mode 100644
index 0000000..84f8672
Binary files /dev/null and b/docs/screenshots/desktop-chrome/15-voice-audio-settings-modal.png differ
diff --git a/docs/screenshots/index.html b/docs/screenshots/index.html
new file mode 100644
index 0000000..491a20d
--- /dev/null
+++ b/docs/screenshots/index.html
@@ -0,0 +1,710 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Cognitive Clarity — Playwright Visual Snapshot Gallery</title>
+  <script src="https://cdn.tailwindcss.com"></script>
+  <style>
+    body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; }
+    .gallery-img { cursor: zoom-in; transition: transform 0.2s ease; }
+    .gallery-img:hover { transform: scale(1.01); }
+  </style>
+</head>
+<body class="bg-slate-950 text-slate-100 min-h-screen">
+  <header class="border-b border-slate-800 bg-slate-900/60 backdrop-blur-md sticky top-0 z-40 px-6 py-4">
+    <div class="max-w-7xl mx-auto flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4">
+      <div>
+        <h1 class="text-xl font-bold tracking-tight text-white flex items-center gap-2">
+          <span class="w-3 h-3 rounded-full bg-teal-400 animate-pulse"></span>
+          Cognitive Clarity — Visual Snapshot Gallery
+        </h1>
+        <p class="text-xs text-slate-400 mt-0.5">
+          45 snapshots across 3 viewports (desktop-chrome, ipad-portrait, mobile-iphone)
+        </p>
+      </div>
+      <div class="flex flex-wrap gap-2" id="filter-buttons">
+        <button onclick="filterViewport('all')" class="vp-btn px-3 py-1.5 rounded-lg text-xs font-bold uppercase tracking-wider bg-teal-600 text-white" data-vp="all">All</button>
+        <button onclick="filterViewport('desktop-chrome')" class="vp-btn px-3 py-1.5 rounded-lg text-xs font-bold uppercase tracking-wider bg-slate-800 text-slate-300 hover:bg-slate-700" data-vp="desktop-chrome">desktop-chrome</button><button onclick="filterViewport('ipad-portrait')" class="vp-btn px-3 py-1.5 rounded-lg text-xs font-bold uppercase tracking-wider bg-slate-800 text-slate-300 hover:bg-slate-700" data-vp="ipad-portrait">ipad-portrait</button><button onclick="filterViewport('mobile-iphone')" class="vp-btn px-3 py-1.5 rounded-lg text-xs font-bold uppercase tracking-wider bg-slate-800 text-slate-300 hover:bg-slate-700" data-vp="mobile-iphone">mobile-iphone</button>
+      </div>
+    </div>
+  </header>
+
+  <main class="max-w-7xl mx-auto px-6 py-8">
+    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6" id="gallery-grid">
+      
+        <div class="gallery-card bg-slate-900 border border-slate-800 rounded-2xl overflow-hidden shadow-lg flex flex-col" data-viewport="desktop-chrome">
+          <div class="p-3 border-b border-slate-800 flex justify-between items-center text-xs">
+            <span class="font-bold text-slate-200">HOME INITIAL</span>
+            <span class="px-2 py-0.5 rounded text-[10px] font-mono uppercase bg-slate-800 text-teal-400">desktop-chrome</span>
+          </div>
+          <div class="bg-black/40 flex-grow flex items-center justify-center p-2">
+            <img src="desktop-chrome/01-home-initial.png" alt="HOME INITIAL" class="gallery-img max-h-72 w-auto object-contain rounded" onclick="openLightbox('desktop-chrome/01-home-initial.png', 'HOME INITIAL')">
+          </div>
+          <div class="p-2.5 bg-slate-900/80 border-t border-slate-800 flex justify-between items-center text-[10px] text-slate-500 font-mono">
+            <span>01-home-initial.png</span>
+            <span>352 KB</span>
+          </div>
+        </div>
+      
+        <div class="gallery-card bg-slate-900 border border-slate-800 rounded-2xl overflow-hidden shadow-lg flex flex-col" data-viewport="ipad-portrait">
+          <div class="p-3 border-b border-slate-800 flex justify-between items-center text-xs">
+            <span class="font-bold text-slate-200">HOME INITIAL</span>
+            <span class="px-2 py-0.5 rounded text-[10px] font-mono uppercase bg-slate-800 text-teal-400">ipad-portrait</span>
+          </div>
+          <div class="bg-black/40 flex-grow flex items-center justify-center p-2">
+            <img src="ipad-portrait/01-home-initial.png" alt="HOME INITIAL" class="gallery-img max-h-72 w-auto object-contain rounded" onclick="openLightbox('ipad-portrait/01-home-initial.png', 'HOME INITIAL')">
+          </div>
+          <div class="p-2.5 bg-slate-900/80 border-t border-slate-800 flex justify-between items-center text-[10px] text-slate-500 font-mono">
+            <span>01-home-initial.png</span>
+            <span>752 KB</span>
+          </div>
+        </div>
+      
+        <div class="gallery-card bg-slate-900 border border-slate-800 rounded-2xl overflow-hidden shadow-lg flex flex-col" data-viewport="mobile-iphone">
+          <div class="p-3 border-b border-slate-800 flex justify-between items-center text-xs">
+            <span class="font-bold text-slate-200">HOME INITIAL</span>
+            <span class="px-2 py-0.5 rounded text-[10px] font-mono uppercase bg-slate-800 text-teal-400">mobile-iphone</span>
+          </div>
+          <div class="bg-black/40 flex-grow flex items-center justify-center p-2">
+            <img src="mobile-iphone/01-home-initial.png" alt="HOME INITIAL" class="gallery-img max-h-72 w-auto object-contain rounded" onclick="openLightbox('mobile-iphone/01-home-initial.png', 'HOME INITIAL')">
+          </div>
+          <div class="p-2.5 bg-slate-900/80 border-t border-slate-800 flex justify-between items-center text-[10px] text-slate-500 font-mono">
+            <span>01-home-initial.png</span>
+            <span>1722 KB</span>
+          </div>
+        </div>
+      
+        <div class="gallery-card bg-slate-900 border border-slate-800 rounded-2xl overflow-hidden shadow-lg flex flex-col" data-viewport="desktop-chrome">
+          <div class="p-3 border-b border-slate-800 flex justify-between items-center text-xs">
+            <span class="font-bold text-slate-200">FILTER BEGINNER</span>
+            <span class="px-2 py-0.5 rounded text-[10px] font-mono uppercase bg-slate-800 text-teal-400">desktop-chrome</span>
+          </div>
+          <div class="bg-black/40 flex-grow flex items-center justify-center p-2">
+            <img src="desktop-chrome/02-filter-beginner.png" alt="FILTER BEGINNER" class="gallery-img max-h-72 w-auto object-contain rounded" onclick="openLightbox('desktop-chrome/02-filter-beginner.png', 'FILTER BEGINNER')">
+          </div>
+          <div class="p-2.5 bg-slate-900/80 border-t border-slate-800 flex justify-between items-center text-[10px] text-slate-500 font-mono">
+            <span>02-filter-beginner.png</span>
+            <span>125 KB</span>
+          </div>
+        </div>
+      
+        <div class="gallery-card bg-slate-900 border border-slate-800 rounded-2xl overflow-hidden shadow-lg flex flex-col" data-viewport="ipad-portrait">
+          <div class="p-3 border-b border-slate-800 flex justify-between items-center text-xs">
+            <span class="font-bold text-slate-200">FILTER BEGINNER</span>
+            <span class="px-2 py-0.5 rounded text-[10px] font-mono uppercase bg-slate-800 text-teal-400">ipad-portrait</span>
+          </div>
+          <div class="bg-black/40 flex-grow flex items-center justify-center p-2">
+            <img src="ipad-portrait/02-filter-beginner.png" alt="FILTER BEGINNER" class="gallery-img max-h-72 w-auto object-contain rounded" onclick="openLightbox('ipad-portrait/02-filter-beginner.png', 'FILTER BEGINNER')">
+          </div>
+          <div class="p-2.5 bg-slate-900/80 border-t border-slate-800 flex justify-between items-center text-[10px] text-slate-500 font-mono">
+            <span>02-filter-beginner.png</span>
+            <span>279 KB</span>
+          </div>
+        </div>
+      
+        <div class="gallery-card bg-slate-900 border border-slate-800 rounded-2xl overflow-hidden shadow-lg flex flex-col" data-viewport="mobile-iphone">
+          <div class="p-3 border-b border-slate-800 flex justify-between items-center text-xs">
+            <span class="font-bold text-slate-200">FILTER BEGINNER</span>
+            <span class="px-2 py-0.5 rounded text-[10px] font-mono uppercase bg-slate-800 text-teal-400">mobile-iphone</span>
+          </div>
+          <div class="bg-black/40 flex-grow flex items-center justify-center p-2">
+            <img src="mobile-iphone/02-filter-beginner.png" alt="FILTER BEGINNER" class="gallery-img max-h-72 w-auto object-contain rounded" onclick="openLightbox('mobile-iphone/02-filter-beginner.png', 'FILTER BEGINNER')">
+          </div>
+          <div class="p-2.5 bg-slate-900/80 border-t border-slate-800 flex justify-between items-center text-[10px] text-slate-500 font-mono">
+            <span>02-filter-beginner.png</span>
+            <span>575 KB</span>
+          </div>
+        </div>
+      
+        <div class="gallery-card bg-slate-900 border border-slate-800 rounded-2xl overflow-hidden shadow-lg flex flex-col" data-viewport="desktop-chrome">
+          <div class="p-3 border-b border-slate-800 flex justify-between items-center text-xs">
+            <span class="font-bold text-slate-200">FILTER ADVANCED</span>
+            <span class="px-2 py-0.5 rounded text-[10px] font-mono uppercase bg-slate-800 text-teal-400">desktop-chrome</span>
+          </div>
+          <div class="bg-black/40 flex-grow flex items-center justify-center p-2">
+            <img src="desktop-chrome/03-filter-advanced.png" alt="FILTER ADVANCED" class="gallery-img max-h-72 w-auto object-contain rounded" onclick="openLightbox('desktop-chrome/03-filter-advanced.png', 'FILTER ADVANCED')">
+          </div>
+          <div class="p-2.5 bg-slate-900/80 border-t border-slate-800 flex justify-between items-center text-[10px] text-slate-500 font-mono">
+            <span>03-filter-advanced.png</span>
+            <span>189 KB</span>
+          </div>
+        </div>
+      
+        <div class="gallery-card bg-slate-900 border border-slate-800 rounded-2xl overflow-hidden shadow-lg flex flex-col" data-viewport="ipad-portrait">
+          <div class="p-3 border-b border-slate-800 flex justify-between items-center text-xs">
+            <span class="font-bold text-slate-200">FILTER ADVANCED</span>
+            <span class="px-2 py-0.5 rounded text-[10px] font-mono uppercase bg-slate-800 text-teal-400">ipad-portrait</span>
+          </div>
+          <div class="bg-black/40 flex-grow flex items-center justify-center p-2">
+            <img src="ipad-portrait/03-filter-advanced.png" alt="FILTER ADVANCED" class="gallery-img max-h-72 w-auto object-contain rounded" onclick="openLightbox('ipad-portrait/03-filter-advanced.png', 'FILTER ADVANCED')">
+          </div>
+          <div class="p-2.5 bg-slate-900/80 border-t border-slate-800 flex justify-between items-center text-[10px] text-slate-500 font-mono">
+            <span>03-filter-advanced.png</span>
+            <span>403 KB</span>
+          </div>
+        </div>
+      
+        <div class="gallery-card bg-slate-900 border border-slate-800 rounded-2xl overflow-hidden shadow-lg flex flex-col" data-viewport="mobile-iphone">
+          <div class="p-3 border-b border-slate-800 flex justify-between items-center text-xs">
+            <span class="font-bold text-slate-200">FILTER ADVANCED</span>
+            <span class="px-2 py-0.5 rounded text-[10px] font-mono uppercase bg-slate-800 text-teal-400">mobile-iphone</span>
+          </div>
+          <div class="bg-black/40 flex-grow flex items-center justify-center p-2">
+            <img src="mobile-iphone/03-filter-advanced.png" alt="FILTER ADVANCED" class="gallery-img max-h-72 w-auto object-contain rounded" onclick="openLightbox('mobile-iphone/03-filter-advanced.png', 'FILTER ADVANCED')">
+          </div>
+          <div class="p-2.5 bg-slate-900/80 border-t border-slate-800 flex justify-between items-center text-[10px] text-slate-500 font-mono">
+            <span>03-filter-advanced.png</span>
+            <span>908 KB</span>
+          </div>
+        </div>
+      
+        <div class="gallery-card bg-slate-900 border border-slate-800 rounded-2xl overflow-hidden shadow-lg flex flex-col" data-viewport="desktop-chrome">
+          <div class="p-3 border-b border-slate-800 flex justify-between items-center text-xs">
+            <span class="font-bold text-slate-200">SETTINGS MODAL VOICE</span>
+            <span class="px-2 py-0.5 rounded text-[10px] font-mono uppercase bg-slate-800 text-teal-400">desktop-chrome</span>
+          </div>
+          <div class="bg-black/40 flex-grow flex items-center justify-center p-2">
+            <img src="desktop-chrome/04-settings-modal-voice.png" alt="SETTINGS MODAL VOICE" class="gallery-img max-h-72 w-auto object-contain rounded" onclick="openLightbox('desktop-chrome/04-settings-modal-voice.png', 'SETTINGS MODAL VOICE')">
+          </div>
+          <div class="p-2.5 bg-slate-900/80 border-t border-slate-800 flex justify-between items-center text-[10px] text-slate-500 font-mono">
+            <span>04-settings-modal-voice.png</span>
+            <span>391 KB</span>
+          </div>
+        </div>
+      
+        <div class="gallery-card bg-slate-900 border border-slate-800 rounded-2xl overflow-hidden shadow-lg flex flex-col" data-viewport="ipad-portrait">
+          <div class="p-3 border-b border-slate-800 flex justify-between items-center text-xs">
+            <span class="font-bold text-slate-200">SETTINGS MODAL VOICE</span>
+            <span class="px-2 py-0.5 rounded text-[10px] font-mono uppercase bg-slate-800 text-teal-400">ipad-portrait</span>
+          </div>
+          <div class="bg-black/40 flex-grow flex items-center justify-center p-2">
+            <img src="ipad-portrait/04-settings-modal-voice.png" alt="SETTINGS MODAL VOICE" class="gallery-img max-h-72 w-auto object-contain rounded" onclick="openLightbox('ipad-portrait/04-settings-modal-voice.png', 'SETTINGS MODAL VOICE')">
+          </div>
+          <div class="p-2.5 bg-slate-900/80 border-t border-slate-800 flex justify-between items-center text-[10px] text-slate-500 font-mono">
+            <span>04-settings-modal-voice.png</span>
+            <span>895 KB</span>
+          </div>
+        </div>
+      
+        <div class="gallery-card bg-slate-900 border border-slate-800 rounded-2xl overflow-hidden shadow-lg flex flex-col" data-viewport="mobile-iphone">
+          <div class="p-3 border-b border-slate-800 flex justify-between items-center text-xs">
+            <span class="font-bold text-slate-200">SETTINGS MODAL VOICE</span>
+            <span class="px-2 py-0.5 rounded text-[10px] font-mono uppercase bg-slate-800 text-teal-400">mobile-iphone</span>
+          </div>
+          <div class="bg-black/40 flex-grow flex items-center justify-center p-2">
+            <img src="mobile-iphone/04-settings-modal-voice.png" alt="SETTINGS MODAL VOICE" class="gallery-img max-h-72 w-auto object-contain rounded" onclick="openLightbox('mobile-iphone/04-settings-modal-voice.png', 'SETTINGS MODAL VOICE')">
+          </div>
+          <div class="p-2.5 bg-slate-900/80 border-t border-slate-800 flex justify-between items-center text-[10px] text-slate-500 font-mono">
+            <span>04-settings-modal-voice.png</span>
+            <span>1786 KB</span>
+          </div>
+        </div>
+      
+        <div class="gallery-card bg-slate-900 border border-slate-800 rounded-2xl overflow-hidden shadow-lg flex flex-col" data-viewport="desktop-chrome">
+          <div class="p-3 border-b border-slate-800 flex justify-between items-center text-xs">
+            <span class="font-bold text-slate-200">SETTINGS MODAL OPENROUTER</span>
+            <span class="px-2 py-0.5 rounded text-[10px] font-mono uppercase bg-slate-800 text-teal-400">desktop-chrome</span>
+          </div>
+          <div class="bg-black/40 flex-grow flex items-center justify-center p-2">
+            <img src="desktop-chrome/05-settings-modal-openrouter.png" alt="SETTINGS MODAL OPENROUTER" class="gallery-img max-h-72 w-auto object-contain rounded" onclick="openLightbox('desktop-chrome/05-settings-modal-openrouter.png', 'SETTINGS MODAL OPENROUTER')">
+          </div>
+          <div class="p-2.5 bg-slate-900/80 border-t border-slate-800 flex justify-between items-center text-[10px] text-slate-500 font-mono">
+            <span>05-settings-modal-openrouter.png</span>
+            <span>386 KB</span>
+          </div>
+        </div>
+      
+        <div class="gallery-card bg-slate-900 border border-slate-800 rounded-2xl overflow-hidden shadow-lg flex flex-col" data-viewport="ipad-portrait">
+          <div class="p-3 border-b border-slate-800 flex justify-between items-center text-xs">
+            <span class="font-bold text-slate-200">SETTINGS MODAL OPENROUTER</span>
+            <span class="px-2 py-0.5 rounded text-[10px] font-mono uppercase bg-slate-800 text-teal-400">ipad-portrait</span>
+          </div>
+          <div class="bg-black/40 flex-grow flex items-center justify-center p-2">
+            <img src="ipad-portrait/05-settings-modal-openrouter.png" alt="SETTINGS MODAL OPENROUTER" class="gallery-img max-h-72 w-auto object-contain rounded" onclick="openLightbox('ipad-portrait/05-settings-modal-openrouter.png', 'SETTINGS MODAL OPENROUTER')">
+          </div>
+          <div class="p-2.5 bg-slate-900/80 border-t border-slate-800 flex justify-between items-center text-[10px] text-slate-500 font-mono">
+            <span>05-settings-modal-openrouter.png</span>
+            <span>860 KB</span>
+          </div>
+        </div>
+      
+        <div class="gallery-card bg-slate-900 border border-slate-800 rounded-2xl overflow-hidden shadow-lg flex flex-col" data-viewport="mobile-iphone">
+          <div class="p-3 border-b border-slate-800 flex justify-between items-center text-xs">
+            <span class="font-bold text-slate-200">SETTINGS MODAL OPENROUTER</span>
+            <span class="px-2 py-0.5 rounded text-[10px] font-mono uppercase bg-slate-800 text-teal-400">mobile-iphone</span>
+          </div>
+          <div class="bg-black/40 flex-grow flex items-center justify-center p-2">
+            <img src="mobile-iphone/05-settings-modal-openrouter.png" alt="SETTINGS MODAL OPENROUTER" class="gallery-img max-h-72 w-auto object-contain rounded" onclick="openLightbox('mobile-iphone/05-settings-modal-openrouter.png', 'SETTINGS MODAL OPENROUTER')">
+          </div>
+          <div class="p-2.5 bg-slate-900/80 border-t border-slate-800 flex justify-between items-center text-[10px] text-slate-500 font-mono">
+            <span>05-settings-modal-openrouter.png</span>
+            <span>1759 KB</span>
+          </div>
+        </div>
+      
+        <div class="gallery-card bg-slate-900 border border-slate-800 rounded-2xl overflow-hidden shadow-lg flex flex-col" data-viewport="desktop-chrome">
+          <div class="p-3 border-b border-slate-800 flex justify-between items-center text-xs">
+            <span class="font-bold text-slate-200">CBT REFERENCE ALL</span>
+            <span class="px-2 py-0.5 rounded text-[10px] font-mono uppercase bg-slate-800 text-teal-400">desktop-chrome</span>
+          </div>
+          <div class="bg-black/40 flex-grow flex items-center justify-center p-2">
+            <img src="desktop-chrome/06-cbt-reference-all.png" alt="CBT REFERENCE ALL" class="gallery-img max-h-72 w-auto object-contain rounded" onclick="openLightbox('desktop-chrome/06-cbt-reference-all.png', 'CBT REFERENCE ALL')">
+          </div>
+          <div class="p-2.5 bg-slate-900/80 border-t border-slate-800 flex justify-between items-center text-[10px] text-slate-500 font-mono">
+            <span>06-cbt-reference-all.png</span>
+            <span>430 KB</span>
+          </div>
+        </div>
+      
+        <div class="gallery-card bg-slate-900 border border-slate-800 rounded-2xl overflow-hidden shadow-lg flex flex-col" data-viewport="ipad-portrait">
+          <div class="p-3 border-b border-slate-800 flex justify-between items-center text-xs">
+            <span class="font-bold text-slate-200">CBT REFERENCE ALL</span>
+            <span class="px-2 py-0.5 rounded text-[10px] font-mono uppercase bg-slate-800 text-teal-400">ipad-portrait</span>
+          </div>
+          <div class="bg-black/40 flex-grow flex items-center justify-center p-2">
+            <img src="ipad-portrait/06-cbt-reference-all.png" alt="CBT REFERENCE ALL" class="gallery-img max-h-72 w-auto object-contain rounded" onclick="openLightbox('ipad-portrait/06-cbt-reference-all.png', 'CBT REFERENCE ALL')">
+          </div>
+          <div class="p-2.5 bg-slate-900/80 border-t border-slate-800 flex justify-between items-center text-[10px] text-slate-500 font-mono">
+            <span>06-cbt-reference-all.png</span>
+            <span>1128 KB</span>
+          </div>
+        </div>
+      
+        <div class="gallery-card bg-slate-900 border border-slate-800 rounded-2xl overflow-hidden shadow-lg flex flex-col" data-viewport="mobile-iphone">
+          <div class="p-3 border-b border-slate-800 flex justify-between items-center text-xs">
+            <span class="font-bold text-slate-200">CBT REFERENCE ALL</span>
+            <span class="px-2 py-0.5 rounded text-[10px] font-mono uppercase bg-slate-800 text-teal-400">mobile-iphone</span>
+          </div>
+          <div class="bg-black/40 flex-grow flex items-center justify-center p-2">
+            <img src="mobile-iphone/06-cbt-reference-all.png" alt="CBT REFERENCE ALL" class="gallery-img max-h-72 w-auto object-contain rounded" onclick="openLightbox('mobile-iphone/06-cbt-reference-all.png', 'CBT REFERENCE ALL')">
+          </div>
+          <div class="p-2.5 bg-slate-900/80 border-t border-slate-800 flex justify-between items-center text-[10px] text-slate-500 font-mono">
+            <span>06-cbt-reference-all.png</span>
+            <span>1756 KB</span>
+          </div>
+        </div>
+      
+        <div class="gallery-card bg-slate-900 border border-slate-800 rounded-2xl overflow-hidden shadow-lg flex flex-col" data-viewport="desktop-chrome">
+          <div class="p-3 border-b border-slate-800 flex justify-between items-center text-xs">
+            <span class="font-bold text-slate-200">CBT REFERENCE SEARCH</span>
+            <span class="px-2 py-0.5 rounded text-[10px] font-mono uppercase bg-slate-800 text-teal-400">desktop-chrome</span>
+          </div>
+          <div class="bg-black/40 flex-grow flex items-center justify-center p-2">
+            <img src="desktop-chrome/07-cbt-reference-search.png" alt="CBT REFERENCE SEARCH" class="gallery-img max-h-72 w-auto object-contain rounded" onclick="openLightbox('desktop-chrome/07-cbt-reference-search.png', 'CBT REFERENCE SEARCH')">
+          </div>
+          <div class="p-2.5 bg-slate-900/80 border-t border-slate-800 flex justify-between items-center text-[10px] text-slate-500 font-mono">
+            <span>07-cbt-reference-search.png</span>
+            <span>328 KB</span>
+          </div>
+        </div>
+      
+        <div class="gallery-card bg-slate-900 border border-slate-800 rounded-2xl overflow-hidden shadow-lg flex flex-col" data-viewport="ipad-portrait">
+          <div class="p-3 border-b border-slate-800 flex justify-between items-center text-xs">
+            <span class="font-bold text-slate-200">CBT REFERENCE SEARCH</span>
+            <span class="px-2 py-0.5 rounded text-[10px] font-mono uppercase bg-slate-800 text-teal-400">ipad-portrait</span>
+          </div>
+          <div class="bg-black/40 flex-grow flex items-center justify-center p-2">
+            <img src="ipad-portrait/07-cbt-reference-search.png" alt="CBT REFERENCE SEARCH" class="gallery-img max-h-72 w-auto object-contain rounded" onclick="openLightbox('ipad-portrait/07-cbt-reference-search.png', 'CBT REFERENCE SEARCH')">
+          </div>
+          <div class="p-2.5 bg-slate-900/80 border-t border-slate-800 flex justify-between items-center text-[10px] text-slate-500 font-mono">
+            <span>07-cbt-reference-search.png</span>
+            <span>662 KB</span>
+          </div>
+        </div>
+      
+        <div class="gallery-card bg-slate-900 border border-slate-800 rounded-2xl overflow-hidden shadow-lg flex flex-col" data-viewport="mobile-iphone">
+          <div class="p-3 border-b border-slate-800 flex justify-between items-center text-xs">
+            <span class="font-bold text-slate-200">CBT REFERENCE SEARCH</span>
+            <span class="px-2 py-0.5 rounded text-[10px] font-mono uppercase bg-slate-800 text-teal-400">mobile-iphone</span>
+          </div>
+          <div class="bg-black/40 flex-grow flex items-center justify-center p-2">
+            <img src="mobile-iphone/07-cbt-reference-search.png" alt="CBT REFERENCE SEARCH" class="gallery-img max-h-72 w-auto object-contain rounded" onclick="openLightbox('mobile-iphone/07-cbt-reference-search.png', 'CBT REFERENCE SEARCH')">
+          </div>
+          <div class="p-2.5 bg-slate-900/80 border-t border-slate-800 flex justify-between items-center text-[10px] text-slate-500 font-mono">
+            <span>07-cbt-reference-search.png</span>
+            <span>1760 KB</span>
+          </div>
+        </div>
+      
+        <div class="gallery-card bg-slate-900 border border-slate-800 rounded-2xl overflow-hidden shadow-lg flex flex-col" data-viewport="desktop-chrome">
+          <div class="p-3 border-b border-slate-800 flex justify-between items-center text-xs">
+            <span class="font-bold text-slate-200">SCENARIO GENERATOR MODAL</span>
+            <span class="px-2 py-0.5 rounded text-[10px] font-mono uppercase bg-slate-800 text-teal-400">desktop-chrome</span>
+          </div>
+          <div class="bg-black/40 flex-grow flex items-center justify-center p-2">
+            <img src="desktop-chrome/08-scenario-generator-modal.png" alt="SCENARIO GENERATOR MODAL" class="gallery-img max-h-72 w-auto object-contain rounded" onclick="openLightbox('desktop-chrome/08-scenario-generator-modal.png', 'SCENARIO GENERATOR MODAL')">
+          </div>
+          <div class="p-2.5 bg-slate-900/80 border-t border-slate-800 flex justify-between items-center text-[10px] text-slate-500 font-mono">
+            <span>08-scenario-generator-modal.png</span>
+            <span>515 KB</span>
+          </div>
+        </div>
+      
+        <div class="gallery-card bg-slate-900 border border-slate-800 rounded-2xl overflow-hidden shadow-lg flex flex-col" data-viewport="ipad-portrait">
+          <div class="p-3 border-b border-slate-800 flex justify-between items-center text-xs">
+            <span class="font-bold text-slate-200">SCENARIO GENERATOR MODAL</span>
+            <span class="px-2 py-0.5 rounded text-[10px] font-mono uppercase bg-slate-800 text-teal-400">ipad-portrait</span>
+          </div>
+          <div class="bg-black/40 flex-grow flex items-center justify-center p-2">
+            <img src="ipad-portrait/08-scenario-generator-modal.png" alt="SCENARIO GENERATOR MODAL" class="gallery-img max-h-72 w-auto object-contain rounded" onclick="openLightbox('ipad-portrait/08-scenario-generator-modal.png', 'SCENARIO GENERATOR MODAL')">
+          </div>
+          <div class="p-2.5 bg-slate-900/80 border-t border-slate-800 flex justify-between items-center text-[10px] text-slate-500 font-mono">
+            <span>08-scenario-generator-modal.png</span>
+            <span>1101 KB</span>
+          </div>
+        </div>
+      
+        <div class="gallery-card bg-slate-900 border border-slate-800 rounded-2xl overflow-hidden shadow-lg flex flex-col" data-viewport="mobile-iphone">
+          <div class="p-3 border-b border-slate-800 flex justify-between items-center text-xs">
+            <span class="font-bold text-slate-200">SCENARIO GENERATOR MODAL</span>
+            <span class="px-2 py-0.5 rounded text-[10px] font-mono uppercase bg-slate-800 text-teal-400">mobile-iphone</span>
+          </div>
+          <div class="bg-black/40 flex-grow flex items-center justify-center p-2">
+            <img src="mobile-iphone/08-scenario-generator-modal.png" alt="SCENARIO GENERATOR MODAL" class="gallery-img max-h-72 w-auto object-contain rounded" onclick="openLightbox('mobile-iphone/08-scenario-generator-modal.png', 'SCENARIO GENERATOR MODAL')">
+          </div>
+          <div class="p-2.5 bg-slate-900/80 border-t border-slate-800 flex justify-between items-center text-[10px] text-slate-500 font-mono">
+            <span>08-scenario-generator-modal.png</span>
+            <span>1898 KB</span>
+          </div>
+        </div>
+      
+        <div class="gallery-card bg-slate-900 border border-slate-800 rounded-2xl overflow-hidden shadow-lg flex flex-col" data-viewport="desktop-chrome">
+          <div class="p-3 border-b border-slate-800 flex justify-between items-center text-xs">
+            <span class="font-bold text-slate-200">SCENARIO GENERATOR FILLED</span>
+            <span class="px-2 py-0.5 rounded text-[10px] font-mono uppercase bg-slate-800 text-teal-400">desktop-chrome</span>
+          </div>
+          <div class="bg-black/40 flex-grow flex items-center justify-center p-2">
+            <img src="desktop-chrome/09-scenario-generator-filled.png" alt="SCENARIO GENERATOR FILLED" class="gallery-img max-h-72 w-auto object-contain rounded" onclick="openLightbox('desktop-chrome/09-scenario-generator-filled.png', 'SCENARIO GENERATOR FILLED')">
+          </div>
+          <div class="p-2.5 bg-slate-900/80 border-t border-slate-800 flex justify-between items-center text-[10px] text-slate-500 font-mono">
+            <span>09-scenario-generator-filled.png</span>
+            <span>378 KB</span>
+          </div>
+        </div>
+      
+        <div class="gallery-card bg-slate-900 border border-slate-800 rounded-2xl overflow-hidden shadow-lg flex flex-col" data-viewport="ipad-portrait">
+          <div class="p-3 border-b border-slate-800 flex justify-between items-center text-xs">
+            <span class="font-bold text-slate-200">SCENARIO GENERATOR FILLED</span>
+            <span class="px-2 py-0.5 rounded text-[10px] font-mono uppercase bg-slate-800 text-teal-400">ipad-portrait</span>
+          </div>
+          <div class="bg-black/40 flex-grow flex items-center justify-center p-2">
+            <img src="ipad-portrait/09-scenario-generator-filled.png" alt="SCENARIO GENERATOR FILLED" class="gallery-img max-h-72 w-auto object-contain rounded" onclick="openLightbox('ipad-portrait/09-scenario-generator-filled.png', 'SCENARIO GENERATOR FILLED')">
+          </div>
+          <div class="p-2.5 bg-slate-900/80 border-t border-slate-800 flex justify-between items-center text-[10px] text-slate-500 font-mono">
+            <span>09-scenario-generator-filled.png</span>
+            <span>824 KB</span>
+          </div>
+        </div>
+      
+        <div class="gallery-card bg-slate-900 border border-slate-800 rounded-2xl overflow-hidden shadow-lg flex flex-col" data-viewport="mobile-iphone">
+          <div class="p-3 border-b border-slate-800 flex justify-between items-center text-xs">
+            <span class="font-bold text-slate-200">SCENARIO GENERATOR FILLED</span>
+            <span class="px-2 py-0.5 rounded text-[10px] font-mono uppercase bg-slate-800 text-teal-400">mobile-iphone</span>
+          </div>
+          <div class="bg-black/40 flex-grow flex items-center justify-center p-2">
+            <img src="mobile-iphone/09-scenario-generator-filled.png" alt="SCENARIO GENERATOR FILLED" class="gallery-img max-h-72 w-auto object-contain rounded" onclick="openLightbox('mobile-iphone/09-scenario-generator-filled.png', 'SCENARIO GENERATOR FILLED')">
+          </div>
+          <div class="p-2.5 bg-slate-900/80 border-t border-slate-800 flex justify-between items-center text-[10px] text-slate-500 font-mono">
+            <span>09-scenario-generator-filled.png</span>
+            <span>1785 KB</span>
+          </div>
+        </div>
+      
+        <div class="gallery-card bg-slate-900 border border-slate-800 rounded-2xl overflow-hidden shadow-lg flex flex-col" data-viewport="desktop-chrome">
+          <div class="p-3 border-b border-slate-800 flex justify-between items-center text-xs">
+            <span class="font-bold text-slate-200">CHAT SESSION INITIAL</span>
+            <span class="px-2 py-0.5 rounded text-[10px] font-mono uppercase bg-slate-800 text-teal-400">desktop-chrome</span>
+          </div>
+          <div class="bg-black/40 flex-grow flex items-center justify-center p-2">
+            <img src="desktop-chrome/10-chat-session-initial.png" alt="CHAT SESSION INITIAL" class="gallery-img max-h-72 w-auto object-contain rounded" onclick="openLightbox('desktop-chrome/10-chat-session-initial.png', 'CHAT SESSION INITIAL')">
+          </div>
+          <div class="p-2.5 bg-slate-900/80 border-t border-slate-800 flex justify-between items-center text-[10px] text-slate-500 font-mono">
+            <span>10-chat-session-initial.png</span>
+            <span>49 KB</span>
+          </div>
+        </div>
+      
+        <div class="gallery-card bg-slate-900 border border-slate-800 rounded-2xl overflow-hidden shadow-lg flex flex-col" data-viewport="ipad-portrait">
+          <div class="p-3 border-b border-slate-800 flex justify-between items-center text-xs">
+            <span class="font-bold text-slate-200">CHAT SESSION INITIAL</span>
+            <span class="px-2 py-0.5 rounded text-[10px] font-mono uppercase bg-slate-800 text-teal-400">ipad-portrait</span>
+          </div>
+          <div class="bg-black/40 flex-grow flex items-center justify-center p-2">
+            <img src="ipad-portrait/10-chat-session-initial.png" alt="CHAT SESSION INITIAL" class="gallery-img max-h-72 w-auto object-contain rounded" onclick="openLightbox('ipad-portrait/10-chat-session-initial.png', 'CHAT SESSION INITIAL')">
+          </div>
+          <div class="p-2.5 bg-slate-900/80 border-t border-slate-800 flex justify-between items-center text-[10px] text-slate-500 font-mono">
+            <span>10-chat-session-initial.png</span>
+            <span>109 KB</span>
+          </div>
+        </div>
+      
+        <div class="gallery-card bg-slate-900 border border-slate-800 rounded-2xl overflow-hidden shadow-lg flex flex-col" data-viewport="mobile-iphone">
+          <div class="p-3 border-b border-slate-800 flex justify-between items-center text-xs">
+            <span class="font-bold text-slate-200">CHAT SESSION INITIAL</span>
+            <span class="px-2 py-0.5 rounded text-[10px] font-mono uppercase bg-slate-800 text-teal-400">mobile-iphone</span>
+          </div>
+          <div class="bg-black/40 flex-grow flex items-center justify-center p-2">
+            <img src="mobile-iphone/10-chat-session-initial.png" alt="CHAT SESSION INITIAL" class="gallery-img max-h-72 w-auto object-contain rounded" onclick="openLightbox('mobile-iphone/10-chat-session-initial.png', 'CHAT SESSION INITIAL')">
+          </div>
+          <div class="p-2.5 bg-slate-900/80 border-t border-slate-800 flex justify-between items-center text-[10px] text-slate-500 font-mono">
+            <span>10-chat-session-initial.png</span>
+            <span>157 KB</span>
+          </div>
+        </div>
+      
+        <div class="gallery-card bg-slate-900 border border-slate-800 rounded-2xl overflow-hidden shadow-lg flex flex-col" data-viewport="desktop-chrome">
+          <div class="p-3 border-b border-slate-800 flex justify-between items-center text-xs">
+            <span class="font-bold text-slate-200">CHAT INTERACTION STREAMED</span>
+            <span class="px-2 py-0.5 rounded text-[10px] font-mono uppercase bg-slate-800 text-teal-400">desktop-chrome</span>
+          </div>
+          <div class="bg-black/40 flex-grow flex items-center justify-center p-2">
+            <img src="desktop-chrome/11-chat-interaction-streamed.png" alt="CHAT INTERACTION STREAMED" class="gallery-img max-h-72 w-auto object-contain rounded" onclick="openLightbox('desktop-chrome/11-chat-interaction-streamed.png', 'CHAT INTERACTION STREAMED')">
+          </div>
+          <div class="p-2.5 bg-slate-900/80 border-t border-slate-800 flex justify-between items-center text-[10px] text-slate-500 font-mono">
+            <span>11-chat-interaction-streamed.png</span>
+            <span>71 KB</span>
+          </div>
+        </div>
+      
+        <div class="gallery-card bg-slate-900 border border-slate-800 rounded-2xl overflow-hidden shadow-lg flex flex-col" data-viewport="ipad-portrait">
+          <div class="p-3 border-b border-slate-800 flex justify-between items-center text-xs">
+            <span class="font-bold text-slate-200">CHAT INTERACTION STREAMED</span>
+            <span class="px-2 py-0.5 rounded text-[10px] font-mono uppercase bg-slate-800 text-teal-400">ipad-portrait</span>
+          </div>
+          <div class="bg-black/40 flex-grow flex items-center justify-center p-2">
+            <img src="ipad-portrait/11-chat-interaction-streamed.png" alt="CHAT INTERACTION STREAMED" class="gallery-img max-h-72 w-auto object-contain rounded" onclick="openLightbox('ipad-portrait/11-chat-interaction-streamed.png', 'CHAT INTERACTION STREAMED')">
+          </div>
+          <div class="p-2.5 bg-slate-900/80 border-t border-slate-800 flex justify-between items-center text-[10px] text-slate-500 font-mono">
+            <span>11-chat-interaction-streamed.png</span>
+            <span>160 KB</span>
+          </div>
+        </div>
+      
+        <div class="gallery-card bg-slate-900 border border-slate-800 rounded-2xl overflow-hidden shadow-lg flex flex-col" data-viewport="mobile-iphone">
+          <div class="p-3 border-b border-slate-800 flex justify-between items-center text-xs">
+            <span class="font-bold text-slate-200">CHAT INTERACTION STREAMED</span>
+            <span class="px-2 py-0.5 rounded text-[10px] font-mono uppercase bg-slate-800 text-teal-400">mobile-iphone</span>
+          </div>
+          <div class="bg-black/40 flex-grow flex items-center justify-center p-2">
+            <img src="mobile-iphone/11-chat-interaction-streamed.png" alt="CHAT INTERACTION STREAMED" class="gallery-img max-h-72 w-auto object-contain rounded" onclick="openLightbox('mobile-iphone/11-chat-interaction-streamed.png', 'CHAT INTERACTION STREAMED')">
+          </div>
+          <div class="p-2.5 bg-slate-900/80 border-t border-slate-800 flex justify-between items-center text-[10px] text-slate-500 font-mono">
+            <span>11-chat-interaction-streamed.png</span>
+            <span>156 KB</span>
+          </div>
+        </div>
+      
+        <div class="gallery-card bg-slate-900 border border-slate-800 rounded-2xl overflow-hidden shadow-lg flex flex-col" data-viewport="desktop-chrome">
+          <div class="p-3 border-b border-slate-800 flex justify-between items-center text-xs">
+            <span class="font-bold text-slate-200">SESSION REPORT SUMMARY</span>
+            <span class="px-2 py-0.5 rounded text-[10px] font-mono uppercase bg-slate-800 text-teal-400">desktop-chrome</span>
+          </div>
+          <div class="bg-black/40 flex-grow flex items-center justify-center p-2">
+            <img src="desktop-chrome/12-session-report-summary.png" alt="SESSION REPORT SUMMARY" class="gallery-img max-h-72 w-auto object-contain rounded" onclick="openLightbox('desktop-chrome/12-session-report-summary.png', 'SESSION REPORT SUMMARY')">
+          </div>
+          <div class="p-2.5 bg-slate-900/80 border-t border-slate-800 flex justify-between items-center text-[10px] text-slate-500 font-mono">
+            <span>12-session-report-summary.png</span>
+            <span>78 KB</span>
+          </div>
+        </div>
+      
+        <div class="gallery-card bg-slate-900 border border-slate-800 rounded-2xl overflow-hidden shadow-lg flex flex-col" data-viewport="ipad-portrait">
+          <div class="p-3 border-b border-slate-800 flex justify-between items-center text-xs">
+            <span class="font-bold text-slate-200">SESSION REPORT SUMMARY</span>
+            <span class="px-2 py-0.5 rounded text-[10px] font-mono uppercase bg-slate-800 text-teal-400">ipad-portrait</span>
+          </div>
+          <div class="bg-black/40 flex-grow flex items-center justify-center p-2">
+            <img src="ipad-portrait/12-session-report-summary.png" alt="SESSION REPORT SUMMARY" class="gallery-img max-h-72 w-auto object-contain rounded" onclick="openLightbox('ipad-portrait/12-session-report-summary.png', 'SESSION REPORT SUMMARY')">
+          </div>
+          <div class="p-2.5 bg-slate-900/80 border-t border-slate-800 flex justify-between items-center text-[10px] text-slate-500 font-mono">
+            <span>12-session-report-summary.png</span>
+            <span>180 KB</span>
+          </div>
+        </div>
+      
+        <div class="gallery-card bg-slate-900 border border-slate-800 rounded-2xl overflow-hidden shadow-lg flex flex-col" data-viewport="mobile-iphone">
+          <div class="p-3 border-b border-slate-800 flex justify-between items-center text-xs">
+            <span class="font-bold text-slate-200">SESSION REPORT SUMMARY</span>
+            <span class="px-2 py-0.5 rounded text-[10px] font-mono uppercase bg-slate-800 text-teal-400">mobile-iphone</span>
+          </div>
+          <div class="bg-black/40 flex-grow flex items-center justify-center p-2">
+            <img src="mobile-iphone/12-session-report-summary.png" alt="SESSION REPORT SUMMARY" class="gallery-img max-h-72 w-auto object-contain rounded" onclick="openLightbox('mobile-iphone/12-session-report-summary.png', 'SESSION REPORT SUMMARY')">
+          </div>
+          <div class="p-2.5 bg-slate-900/80 border-t border-slate-800 flex justify-between items-center text-[10px] text-slate-500 font-mono">
+            <span>12-session-report-summary.png</span>
+            <span>252 KB</span>
+          </div>
+        </div>
+      
+        <div class="gallery-card bg-slate-900 border border-slate-800 rounded-2xl overflow-hidden shadow-lg flex flex-col" data-viewport="desktop-chrome">
+          <div class="p-3 border-b border-slate-800 flex justify-between items-center text-xs">
+            <span class="font-bold text-slate-200">VOICE COCKPIT INITIAL</span>
+            <span class="px-2 py-0.5 rounded text-[10px] font-mono uppercase bg-slate-800 text-teal-400">desktop-chrome</span>
+          </div>
+          <div class="bg-black/40 flex-grow flex items-center justify-center p-2">
+            <img src="desktop-chrome/13-voice-cockpit-initial.png" alt="VOICE COCKPIT INITIAL" class="gallery-img max-h-72 w-auto object-contain rounded" onclick="openLightbox('desktop-chrome/13-voice-cockpit-initial.png', 'VOICE COCKPIT INITIAL')">
+          </div>
+          <div class="p-2.5 bg-slate-900/80 border-t border-slate-800 flex justify-between items-center text-[10px] text-slate-500 font-mono">
+            <span>13-voice-cockpit-initial.png</span>
+            <span>61 KB</span>
+          </div>
+        </div>
+      
+        <div class="gallery-card bg-slate-900 border border-slate-800 rounded-2xl overflow-hidden shadow-lg flex flex-col" data-viewport="ipad-portrait">
+          <div class="p-3 border-b border-slate-800 flex justify-between items-center text-xs">
+            <span class="font-bold text-slate-200">VOICE COCKPIT INITIAL</span>
+            <span class="px-2 py-0.5 rounded text-[10px] font-mono uppercase bg-slate-800 text-teal-400">ipad-portrait</span>
+          </div>
+          <div class="bg-black/40 flex-grow flex items-center justify-center p-2">
+            <img src="ipad-portrait/13-voice-cockpit-initial.png" alt="VOICE COCKPIT INITIAL" class="gallery-img max-h-72 w-auto object-contain rounded" onclick="openLightbox('ipad-portrait/13-voice-cockpit-initial.png', 'VOICE COCKPIT INITIAL')">
+          </div>
+          <div class="p-2.5 bg-slate-900/80 border-t border-slate-800 flex justify-between items-center text-[10px] text-slate-500 font-mono">
+            <span>13-voice-cockpit-initial.png</span>
+            <span>138 KB</span>
+          </div>
+        </div>
+      
+        <div class="gallery-card bg-slate-900 border border-slate-800 rounded-2xl overflow-hidden shadow-lg flex flex-col" data-viewport="mobile-iphone">
+          <div class="p-3 border-b border-slate-800 flex justify-between items-center text-xs">
+            <span class="font-bold text-slate-200">VOICE COCKPIT INITIAL</span>
+            <span class="px-2 py-0.5 rounded text-[10px] font-mono uppercase bg-slate-800 text-teal-400">mobile-iphone</span>
+          </div>
+          <div class="bg-black/40 flex-grow flex items-center justify-center p-2">
+            <img src="mobile-iphone/13-voice-cockpit-initial.png" alt="VOICE COCKPIT INITIAL" class="gallery-img max-h-72 w-auto object-contain rounded" onclick="openLightbox('mobile-iphone/13-voice-cockpit-initial.png', 'VOICE COCKPIT INITIAL')">
+          </div>
+          <div class="p-2.5 bg-slate-900/80 border-t border-slate-800 flex justify-between items-center text-[10px] text-slate-500 font-mono">
+            <span>13-voice-cockpit-initial.png</span>
+            <span>189 KB</span>
+          </div>
+        </div>
+      
+        <div class="gallery-card bg-slate-900 border border-slate-800 rounded-2xl overflow-hidden shadow-lg flex flex-col" data-viewport="desktop-chrome">
+          <div class="p-3 border-b border-slate-800 flex justify-between items-center text-xs">
+            <span class="font-bold text-slate-200">VOICE TRANSCRIPT DRAWER</span>
+            <span class="px-2 py-0.5 rounded text-[10px] font-mono uppercase bg-slate-800 text-teal-400">desktop-chrome</span>
+          </div>
+          <div class="bg-black/40 flex-grow flex items-center justify-center p-2">
+            <img src="desktop-chrome/14-voice-transcript-drawer.png" alt="VOICE TRANSCRIPT DRAWER" class="gallery-img max-h-72 w-auto object-contain rounded" onclick="openLightbox('desktop-chrome/14-voice-transcript-drawer.png', 'VOICE TRANSCRIPT DRAWER')">
+          </div>
+          <div class="p-2.5 bg-slate-900/80 border-t border-slate-800 flex justify-between items-center text-[10px] text-slate-500 font-mono">
+            <span>14-voice-transcript-drawer.png</span>
+            <span>80 KB</span>
+          </div>
+        </div>
+      
+        <div class="gallery-card bg-slate-900 border border-slate-800 rounded-2xl overflow-hidden shadow-lg flex flex-col" data-viewport="ipad-portrait">
+          <div class="p-3 border-b border-slate-800 flex justify-between items-center text-xs">
+            <span class="font-bold text-slate-200">VOICE TRANSCRIPT DRAWER</span>
+            <span class="px-2 py-0.5 rounded text-[10px] font-mono uppercase bg-slate-800 text-teal-400">ipad-portrait</span>
+          </div>
+          <div class="bg-black/40 flex-grow flex items-center justify-center p-2">
+            <img src="ipad-portrait/14-voice-transcript-drawer.png" alt="VOICE TRANSCRIPT DRAWER" class="gallery-img max-h-72 w-auto object-contain rounded" onclick="openLightbox('ipad-portrait/14-voice-transcript-drawer.png', 'VOICE TRANSCRIPT DRAWER')">
+          </div>
+          <div class="p-2.5 bg-slate-900/80 border-t border-slate-800 flex justify-between items-center text-[10px] text-slate-500 font-mono">
+            <span>14-voice-transcript-drawer.png</span>
+            <span>192 KB</span>
+          </div>
+        </div>
+      
+        <div class="gallery-card bg-slate-900 border border-slate-800 rounded-2xl overflow-hidden shadow-lg flex flex-col" data-viewport="mobile-iphone">
+          <div class="p-3 border-b border-slate-800 flex justify-between items-center text-xs">
+            <span class="font-bold text-slate-200">VOICE TRANSCRIPT DRAWER</span>
+            <span class="px-2 py-0.5 rounded text-[10px] font-mono uppercase bg-slate-800 text-teal-400">mobile-iphone</span>
+          </div>
+          <div class="bg-black/40 flex-grow flex items-center justify-center p-2">
+            <img src="mobile-iphone/14-voice-transcript-drawer.png" alt="VOICE TRANSCRIPT DRAWER" class="gallery-img max-h-72 w-auto object-contain rounded" onclick="openLightbox('mobile-iphone/14-voice-transcript-drawer.png', 'VOICE TRANSCRIPT DRAWER')">
+          </div>
+          <div class="p-2.5 bg-slate-900/80 border-t border-slate-800 flex justify-between items-center text-[10px] text-slate-500 font-mono">
+            <span>14-voice-transcript-drawer.png</span>
+            <span>230 KB</span>
+          </div>
+        </div>
+      
+        <div class="gallery-card bg-slate-900 border border-slate-800 rounded-2xl overflow-hidden shadow-lg flex flex-col" data-viewport="desktop-chrome">
+          <div class="p-3 border-b border-slate-800 flex justify-between items-center text-xs">
+            <span class="font-bold text-slate-200">VOICE AUDIO SETTINGS MODAL</span>
+            <span class="px-2 py-0.5 rounded text-[10px] font-mono uppercase bg-slate-800 text-teal-400">desktop-chrome</span>
+          </div>
+          <div class="bg-black/40 flex-grow flex items-center justify-center p-2">
+            <img src="desktop-chrome/15-voice-audio-settings-modal.png" alt="VOICE AUDIO SETTINGS MODAL" class="gallery-img max-h-72 w-auto object-contain rounded" onclick="openLightbox('desktop-chrome/15-voice-audio-settings-modal.png', 'VOICE AUDIO SETTINGS MODAL')">
+          </div>
+          <div class="p-2.5 bg-slate-900/80 border-t border-slate-800 flex justify-between items-center text-[10px] text-slate-500 font-mono">
+            <span>15-voice-audio-settings-modal.png</span>
+            <span>49 KB</span>
+          </div>
+        </div>
+      
+        <div class="gallery-card bg-slate-900 border border-slate-800 rounded-2xl overflow-hidden shadow-lg flex flex-col" data-viewport="ipad-portrait">
+          <div class="p-3 border-b border-slate-800 flex justify-between items-center text-xs">
+            <span class="font-bold text-slate-200">VOICE AUDIO SETTINGS MODAL</span>
+            <span class="px-2 py-0.5 rounded text-[10px] font-mono uppercase bg-slate-800 text-teal-400">ipad-portrait</span>
+          </div>
+          <div class="bg-black/40 flex-grow flex items-center justify-center p-2">
+            <img src="ipad-portrait/15-voice-audio-settings-modal.png" alt="VOICE AUDIO SETTINGS MODAL" class="gallery-img max-h-72 w-auto object-contain rounded" onclick="openLightbox('ipad-portrait/15-voice-audio-settings-modal.png', 'VOICE AUDIO SETTINGS MODAL')">
+          </div>
+          <div class="p-2.5 bg-slate-900/80 border-t border-slate-800 flex justify-between items-center text-[10px] text-slate-500 font-mono">
+            <span>15-voice-audio-settings-modal.png</span>
+            <span>104 KB</span>
+          </div>
+        </div>
+      
+        <div class="gallery-card bg-slate-900 border border-slate-800 rounded-2xl overflow-hidden shadow-lg flex flex-col" data-viewport="mobile-iphone">
+          <div class="p-3 border-b border-slate-800 flex justify-between items-center text-xs">
+            <span class="font-bold text-slate-200">VOICE AUDIO SETTINGS MODAL</span>
+            <span class="px-2 py-0.5 rounded text-[10px] font-mono uppercase bg-slate-800 text-teal-400">mobile-iphone</span>
+          </div>
+          <div class="bg-black/40 flex-grow flex items-center justify-center p-2">
+            <img src="mobile-iphone/15-voice-audio-settings-modal.png" alt="VOICE AUDIO SETTINGS MODAL" class="gallery-img max-h-72 w-auto object-contain rounded" onclick="openLightbox('mobile-iphone/15-voice-audio-settings-modal.png', 'VOICE AUDIO SETTINGS MODAL')">
+          </div>
+          <div class="p-2.5 bg-slate-900/80 border-t border-slate-800 flex justify-between items-center text-[10px] text-slate-500 font-mono">
+            <span>15-voice-audio-settings-modal.png</span>
+            <span>185 KB</span>
+          </div>
+        </div>
+      
+    </div>
+  </main>
+
+  <!-- Lightbox Modal -->
+  <div id="lightbox" class="fixed inset-0 z-50 bg-black/90 backdrop-blur-md hidden flex flex-col items-center justify-center p-4" onclick="closeLightbox()">
+    <div class="max-w-6xl max-h-[90vh] flex flex-col items-center" onclick="event.stopPropagation()">
+      <div class="flex justify-between items-center w-full mb-3 text-white">
+        <h3 id="lightbox-title" class="font-bold text-base"></h3>
+        <button onclick="closeLightbox()" class="text-slate-400 hover:text-white px-3 py-1 bg-white/10 rounded-lg text-sm">Close ✕</button>
+      </div>
+      <img id="lightbox-img" src="" class="max-h-[80vh] max-w-full rounded-xl shadow-2xl border border-white/10 object-contain">
+    </div>
+  </div>
+
+  <script>
+    function filterViewport(vp) {
+      document.querySelectorAll('.vp-btn').forEach(btn => {
+        if (btn.dataset.vp === vp) {
+          btn.className = 'vp-btn px-3 py-1.5 rounded-lg text-xs font-bold uppercase tracking-wider bg-teal-600 text-white';
+        } else {
+          btn.className = 'vp-btn px-3 py-1.5 rounded-lg text-xs font-bold uppercase tracking-wider bg-slate-800 text-slate-300 hover:bg-slate-700';
+        }
+      });
+
+      document.querySelectorAll('.gallery-card').forEach(card => {
+        if (vp === 'all' || card.dataset.viewport === vp) {
+          card.style.display = 'flex';
+        } else {
+          card.style.display = 'none';
+        }
+      });
+    }
+
+    function openLightbox(src, title) {
+      document.getElementById('lightbox-img').src = src;
+      document.getElementById('lightbox-title').innerText = title;
+      document.getElementById('lightbox').classList.remove('hidden');
+    }
+
+    function closeLightbox() {
+      document.getElementById('lightbox').classList.add('hidden');
+    }
+  </script>
+</body>
+</html>
\ No newline at end of file
diff --git a/docs/screenshots/ipad-portrait/01-home-initial.png b/docs/screenshots/ipad-portrait/01-home-initial.png
new file mode 100644
index 0000000..0cb1f73
Binary files /dev/null and b/docs/screenshots/ipad-portrait/01-home-initial.png differ
diff --git a/docs/screenshots/ipad-portrait/02-filter-beginner.png b/docs/screenshots/ipad-portrait/02-filter-beginner.png
new file mode 100644
index 0000000..2ff0f73
Binary files /dev/null and b/docs/screenshots/ipad-portrait/02-filter-beginner.png differ
diff --git a/docs/screenshots/ipad-portrait/03-filter-advanced.png b/docs/screenshots/ipad-portrait/03-filter-advanced.png
new file mode 100644
index 0000000..a05f688
Binary files /dev/null and b/docs/screenshots/ipad-portrait/03-filter-advanced.png differ
diff --git a/docs/screenshots/ipad-portrait/04-settings-modal-voice.png b/docs/screenshots/ipad-portrait/04-settings-modal-voice.png
new file mode 100644
index 0000000..f82deea
Binary files /dev/null and b/docs/screenshots/ipad-portrait/04-settings-modal-voice.png differ
diff --git a/docs/screenshots/ipad-portrait/05-settings-modal-openrouter.png b/docs/screenshots/ipad-portrait/05-settings-modal-openrouter.png
new file mode 100644
index 0000000..56ac0db
Binary files /dev/null and b/docs/screenshots/ipad-portrait/05-settings-modal-openrouter.png differ
diff --git a/docs/screenshots/ipad-portrait/06-cbt-reference-all.png b/docs/screenshots/ipad-portrait/06-cbt-reference-all.png
new file mode 100644
index 0000000..35053ee
Binary files /dev/null and b/docs/screenshots/ipad-portrait/06-cbt-reference-all.png differ
diff --git a/docs/screenshots/ipad-portrait/07-cbt-reference-search.png b/docs/screenshots/ipad-portrait/07-cbt-reference-search.png
new file mode 100644
index 0000000..8a3165a
Binary files /dev/null and b/docs/screenshots/ipad-portrait/07-cbt-reference-search.png differ
diff --git a/docs/screenshots/ipad-portrait/08-scenario-generator-modal.png b/docs/screenshots/ipad-portrait/08-scenario-generator-modal.png
new file mode 100644
index 0000000..b826e99
Binary files /dev/null and b/docs/screenshots/ipad-portrait/08-scenario-generator-modal.png differ
diff --git a/docs/screenshots/ipad-portrait/09-scenario-generator-filled.png b/docs/screenshots/ipad-portrait/09-scenario-generator-filled.png
new file mode 100644
index 0000000..5fbfa21
Binary files /dev/null and b/docs/screenshots/ipad-portrait/09-scenario-generator-filled.png differ
diff --git a/docs/screenshots/ipad-portrait/10-chat-session-initial.png b/docs/screenshots/ipad-portrait/10-chat-session-initial.png
new file mode 100644
index 0000000..a5d15e3
Binary files /dev/null and b/docs/screenshots/ipad-portrait/10-chat-session-initial.png differ
diff --git a/docs/screenshots/ipad-portrait/11-chat-interaction-streamed.png b/docs/screenshots/ipad-portrait/11-chat-interaction-streamed.png
new file mode 100644
index 0000000..6a3df48
Binary files /dev/null and b/docs/screenshots/ipad-portrait/11-chat-interaction-streamed.png differ
diff --git a/docs/screenshots/ipad-portrait/12-session-report-summary.png b/docs/screenshots/ipad-portrait/12-session-report-summary.png
new file mode 100644
index 0000000..46b04d4
Binary files /dev/null and b/docs/screenshots/ipad-portrait/12-session-report-summary.png differ
diff --git a/docs/screenshots/ipad-portrait/13-voice-cockpit-initial.png b/docs/screenshots/ipad-portrait/13-voice-cockpit-initial.png
new file mode 100644
index 0000000..bbf3b16
Binary files /dev/null and b/docs/screenshots/ipad-portrait/13-voice-cockpit-initial.png differ
diff --git a/docs/screenshots/ipad-portrait/14-voice-transcript-drawer.png b/docs/screenshots/ipad-portrait/14-voice-transcript-drawer.png
new file mode 100644
index 0000000..152dbfc
Binary files /dev/null and b/docs/screenshots/ipad-portrait/14-voice-transcript-drawer.png differ
diff --git a/docs/screenshots/ipad-portrait/15-voice-audio-settings-modal.png b/docs/screenshots/ipad-portrait/15-voice-audio-settings-modal.png
new file mode 100644
index 0000000..986e6a9
Binary files /dev/null and b/docs/screenshots/ipad-portrait/15-voice-audio-settings-modal.png differ
diff --git a/docs/screenshots/mobile-iphone/01-home-initial.png b/docs/screenshots/mobile-iphone/01-home-initial.png
new file mode 100644
index 0000000..64d3a46
Binary files /dev/null and b/docs/screenshots/mobile-iphone/01-home-initial.png differ
diff --git a/docs/screenshots/mobile-iphone/02-filter-beginner.png b/docs/screenshots/mobile-iphone/02-filter-beginner.png
new file mode 100644
index 0000000..962a28d
Binary files /dev/null and b/docs/screenshots/mobile-iphone/02-filter-beginner.png differ
diff --git a/docs/screenshots/mobile-iphone/03-filter-advanced.png b/docs/screenshots/mobile-iphone/03-filter-advanced.png
new file mode 100644
index 0000000..e8a0930
Binary files /dev/null and b/docs/screenshots/mobile-iphone/03-filter-advanced.png differ
diff --git a/docs/screenshots/mobile-iphone/04-settings-modal-voice.png b/docs/screenshots/mobile-iphone/04-settings-modal-voice.png
new file mode 100644
index 0000000..ab0a4a1
Binary files /dev/null and b/docs/screenshots/mobile-iphone/04-settings-modal-voice.png differ
diff --git a/docs/screenshots/mobile-iphone/05-settings-modal-openrouter.png b/docs/screenshots/mobile-iphone/05-settings-modal-openrouter.png
new file mode 100644
index 0000000..4dcda23
Binary files /dev/null and b/docs/screenshots/mobile-iphone/05-settings-modal-openrouter.png differ
diff --git a/docs/screenshots/mobile-iphone/06-cbt-reference-all.png b/docs/screenshots/mobile-iphone/06-cbt-reference-all.png
new file mode 100644
index 0000000..74f1406
Binary files /dev/null and b/docs/screenshots/mobile-iphone/06-cbt-reference-all.png differ
diff --git a/docs/screenshots/mobile-iphone/07-cbt-reference-search.png b/docs/screenshots/mobile-iphone/07-cbt-reference-search.png
new file mode 100644
index 0000000..e25806c
Binary files /dev/null and b/docs/screenshots/mobile-iphone/07-cbt-reference-search.png differ
diff --git a/docs/screenshots/mobile-iphone/08-scenario-generator-modal.png b/docs/screenshots/mobile-iphone/08-scenario-generator-modal.png
new file mode 100644
index 0000000..a9cebd1
Binary files /dev/null and b/docs/screenshots/mobile-iphone/08-scenario-generator-modal.png differ
diff --git a/docs/screenshots/mobile-iphone/09-scenario-generator-filled.png b/docs/screenshots/mobile-iphone/09-scenario-generator-filled.png
new file mode 100644
index 0000000..94e2f53
Binary files /dev/null and b/docs/screenshots/mobile-iphone/09-scenario-generator-filled.png differ
diff --git a/docs/screenshots/mobile-iphone/10-chat-session-initial.png b/docs/screenshots/mobile-iphone/10-chat-session-initial.png
new file mode 100644
index 0000000..77ffffa
Binary files /dev/null and b/docs/screenshots/mobile-iphone/10-chat-session-initial.png differ
diff --git a/docs/screenshots/mobile-iphone/11-chat-interaction-streamed.png b/docs/screenshots/mobile-iphone/11-chat-interaction-streamed.png
new file mode 100644
index 0000000..a4a8dc7
Binary files /dev/null and b/docs/screenshots/mobile-iphone/11-chat-interaction-streamed.png differ
diff --git a/docs/screenshots/mobile-iphone/12-session-report-summary.png b/docs/screenshots/mobile-iphone/12-session-report-summary.png
new file mode 100644
index 0000000..f7f4a34
Binary files /dev/null and b/docs/screenshots/mobile-iphone/12-session-report-summary.png differ
diff --git a/docs/screenshots/mobile-iphone/13-voice-cockpit-initial.png b/docs/screenshots/mobile-iphone/13-voice-cockpit-initial.png
new file mode 100644
index 0000000..c473196
Binary files /dev/null and b/docs/screenshots/mobile-iphone/13-voice-cockpit-initial.png differ
diff --git a/docs/screenshots/mobile-iphone/14-voice-transcript-drawer.png b/docs/screenshots/mobile-iphone/14-voice-transcript-drawer.png
new file mode 100644
index 0000000..e50a981
Binary files /dev/null and b/docs/screenshots/mobile-iphone/14-voice-transcript-drawer.png differ
diff --git a/docs/screenshots/mobile-iphone/15-voice-audio-settings-modal.png b/docs/screenshots/mobile-iphone/15-voice-audio-settings-modal.png
new file mode 100644
index 0000000..f2a5f4f
Binary files /dev/null and b/docs/screenshots/mobile-iphone/15-voice-audio-settings-modal.png differ
diff --git a/hooks/useLiveSession.ts b/hooks/useLiveSession.ts
index 9aa52b0..567474b 100644
--- a/hooks/useLiveSession.ts
+++ b/hooks/useLiveSession.ts
@@ -1,14 +1,13 @@
-
 import { useState, useRef, useEffect, useCallback } from 'react';
-import { GoogleGenAI, LiveServerMessage, Modality } from '@google/genai';
 import { Scenario, UserSettings, Message, AnalysisResult } from '../types';
-import { SYSTEM_ANALYSIS_PROMPT, CBT_ANALYSIS_SCHEMA } from '../constants';
-import { floatTo16BitPCM, encodeBase64, decodeBase64, decodeAudioData } from '../services/audioUtils';
+import { getOpenRouterApiKey } from '../services/apiConfig';
+import { streamOpenRouterChat, analyzeTurnWithOpenRouter, synthesizeSpeechWithOpenRouter } from '../services/openRouterService';
 
-export type SessionStatus = 'connecting' | 'active' | 'analyzing' | 'finished';
+export type SessionStatus = 'connecting' | 'active' | 'analyzing' | 'finished' | 'error';
 
 export function useLiveSession(scenario: Scenario, voiceSettings: UserSettings) {
   const [status, setStatus] = useState<SessionStatus>('connecting');
+  const [errorMessage, setErrorMessage] = useState<string | null>(null);
   const [isMuted, setIsMuted] = useState(false);
   const [audioLevel, setAudioLevel] = useState(0);
   const [aiAudioLevel, setAiAudioLevel] = useState(0);
@@ -21,229 +20,324 @@ export function useLiveSession(scenario: Scenario, voiceSettings: UserSettings)
   const [liveInsight, setLiveInsight] = useState<AnalysisResult | null>(null);
   const [isAnalyzingTurn, setIsAnalyzingTurn] = useState(false);
 
-  // Refs for audio processing
-  const sessionPromiseRef = useRef<Promise<any> | null>(null);
+  // Audio Context & Nodes
+  const isMutedRef = useRef(isMuted);
+  useEffect(() => {
+    isMutedRef.current = isMuted;
+  }, [isMuted]);
+
   const inputAudioCtxRef = useRef<AudioContext | null>(null);
   const outputAudioCtxRef = useRef<AudioContext | null>(null);
   const aiAnalyserRef = useRef<AnalyserNode | null>(null);
-  const nextStartTimeRef = useRef<number>(0);
-  const audioSourcesRef = useRef<Set<AudioBufferSourceNode>>(new Set());
+  const userAnalyserRef = useRef<AnalyserNode | null>(null);
+  const currentAudioSourceRef = useRef<AudioBufferSourceNode | null>(null);
   const streamRef = useRef<MediaStream | null>(null);
-  const analysisChatRef = useRef<any>(null);
-  const silenceCheckTimerRef = useRef<NodeJS.Timeout | null>(null);
-  const aiLevelUpdateTimerRef = useRef<number | null>(null);
-
-  // Buffers for transcription
-  const currentInputTranscription = useRef('');
-  const currentOutputTranscription = useRef('');
+  const recognitionRef = useRef<any>(null);
+  const aiLevelTimerRef = useRef<number | null>(null);
+  const userLevelTimerRef = useRef<number | null>(null);
+  const isProcessingTurnRef = useRef(false);
 
   const stopAllAudio = useCallback(() => {
-    audioSourcesRef.current.forEach(source => {
-      try { source.stop(); } catch (e) {}
-    });
-    audioSourcesRef.current.clear();
-    nextStartTimeRef.current = 0;
+    if (currentAudioSourceRef.current) {
+      try { currentAudioSourceRef.current.stop(); } catch (e) {}
+      currentAudioSourceRef.current = null;
+    }
+    if ('speechSynthesis' in window) {
+      window.speechSynthesis.cancel();
+    }
+    setIsAiSpeaking(false);
     setAiAudioLevel(0);
   }, []);
 
   const toggleMute = useCallback(() => setIsMuted(prev => !prev), []);
 
-  useEffect(() => {
-    const ai = new GoogleGenAI({ apiKey: process.env.API_KEY });
+  const speakText = useCallback(async (text: string) => {
+    stopAllAudio();
+    setIsAiSpeaking(true);
 
-    // Setup Live Insights Chat
-    analysisChatRef.current = ai.chats.create({
-      model: 'gemini-3-flash-preview',
-      config: {
-        systemInstruction: `${SYSTEM_ANALYSIS_PROMPT}\nSCENARIO: ${scenario.title}\nFOCUS: ${scenario.cbtFocus.join(', ')}`,
-        responseMimeType: 'application/json',
-        responseSchema: CBT_ANALYSIS_SCHEMA,
+    try {
+      // Attempt high-fidelity OpenRouter audio synthesis
+      const arrayBuffer = await synthesizeSpeechWithOpenRouter(
+        text,
+        voiceSettings.voiceName.toLowerCase() === 'kore' ? 'nova' : 'alloy',
+        voiceSettings.openRouterApiKey
+      );
+
+      const audioCtx = outputAudioCtxRef.current || new AudioContext();
+      outputAudioCtxRef.current = audioCtx;
+      if (audioCtx.state === 'suspended') await audioCtx.resume();
+
+      const buffer = await audioCtx.decodeAudioData(arrayBuffer);
+      const source = audioCtx.createBufferSource();
+      source.buffer = buffer;
+
+      if (!aiAnalyserRef.current) {
+        aiAnalyserRef.current = audioCtx.createAnalyser();
+        aiAnalyserRef.current.fftSize = 256;
       }
-    });
+      source.connect(aiAnalyserRef.current);
+      aiAnalyserRef.current.connect(audioCtx.destination);
 
-    const updateAiLevel = () => {
-      if (aiAnalyserRef.current && isAiSpeaking) {
-        const dataArray = new Uint8Array(aiAnalyserRef.current.frequencyBinCount);
-        aiAnalyserRef.current.getByteFrequencyData(dataArray);
-        let sum = 0;
-        for (let i = 0; i < dataArray.length; i++) sum += dataArray[i];
-        const avg = sum / dataArray.length;
-        setAiAudioLevel(avg * 0.8); // Scale for visualizer
-      } else {
+      source.onended = () => {
+        setIsAiSpeaking(false);
         setAiAudioLevel(0);
+      };
+
+      currentAudioSourceRef.current = source;
+      source.start(0);
+    } catch (e) {
+      console.warn("OpenRouter TTS fallback to Web Speech Synthesis", e);
+      // Fallback to browser SpeechSynthesis
+      if ('speechSynthesis' in window) {
+        const utterance = new SpeechSynthesisUtterance(text);
+        utterance.rate = 1.0;
+        utterance.pitch = 1.0;
+        utterance.onstart = () => setIsAiSpeaking(true);
+        utterance.onend = () => {
+          setIsAiSpeaking(false);
+          setAiAudioLevel(0);
+        };
+        utterance.onerror = () => {
+          setIsAiSpeaking(false);
+          setAiAudioLevel(0);
+        };
+        window.speechSynthesis.speak(utterance);
+      } else {
+        setIsAiSpeaking(false);
       }
-      aiLevelUpdateTimerRef.current = requestAnimationFrame(updateAiLevel);
+    }
+  }, [stopAllAudio, voiceSettings.voiceName, voiceSettings.openRouterApiKey]);
+
+  // Turn Processing Handler
+  const handleUserTurn = useCallback(async (userText: string, currentHistory: Message[]) => {
+    if (isProcessingTurnRef.current || !userText.trim()) return;
+    isProcessingTurnRef.current = true;
+
+    stopAllAudio();
+
+    const userMsg: Message = {
+      id: Date.now().toString(),
+      role: 'user',
+      text: userText.trim(),
+      timestamp: new Date()
     };
 
-    const connect = async () => {
+    const updatedHistory = [...currentHistory, userMsg];
+    setMessages(updatedHistory);
+
+    const botMsgId = (Date.now() + 1).toString();
+    const botMsg: Message = {
+      id: botMsgId,
+      role: 'model',
+      text: '',
+      timestamp: new Date()
+    };
+    setMessages([...updatedHistory, botMsg]);
+
+    const roleplaySystemInstruction = `
+      ${scenario.systemInstruction}
+      
+      [CONTEXT]
+      You are participating in a clinical CBT roleplay simulation. 
+      The instructions above define your character, the scenario, and your internal CBT logic.
+      
+      [TASK]
+      Respond to the user naturally in character to advance the roleplay scenario.
+      
+      [CONSTRAINTS]
+      - CRITICAL: Stay strictly in character as the persona defined in the scenario.
+      - CRITICAL: NEVER provide clinical feedback, advice, or meta-commentary about the user's progress.
+      - CRITICAL: Keep dialogue natural and conversational (1-3 sentences per turn).
+      - If the user successfully concludes the scenario, end the dialogue naturally.
+    `;
+
+    try {
+      let accumulatedText = '';
+      await streamOpenRouterChat(
+        updatedHistory,
+        roleplaySystemInstruction,
+        {
+          onChunk: (chunk) => {
+            accumulatedText += chunk;
+            setMessages(prev => prev.map(m =>
+              m.id === botMsgId ? { ...m, text: accumulatedText } : m
+            ));
+          },
+          onComplete: (fullText) => {
+            speakText(fullText);
+
+            // Parallel turn supervisor analysis
+            setIsAnalyzingTurn(true);
+            const turnContext = `User said: "${userMsg.text}". Roleplay partner said: "${fullText}".`;
+            analyzeTurnWithOpenRouter(
+              turnContext,
+              scenario.title,
+              scenario.description,
+              scenario.cbtFocus,
+              {
+                apiKey: voiceSettings.openRouterApiKey,
+                model: voiceSettings.supervisorModel
+              }
+            ).then(res => {
+              setLiveInsight(res);
+            }).catch(e => {
+              console.error("Voice turn analysis error", e);
+            }).finally(() => {
+              setIsAnalyzingTurn(false);
+              isProcessingTurnRef.current = false;
+            });
+          },
+          onError: (err) => {
+            console.error("OpenRouter stream failed", err);
+            isProcessingTurnRef.current = false;
+          }
+        },
+        {
+          apiKey: voiceSettings.openRouterApiKey,
+          model: voiceSettings.roleplayModel
+        }
+      );
+    } catch (err) {
+      console.error("User turn execution failed", err);
+      isProcessingTurnRef.current = false;
+    }
+  }, [scenario, speakText, stopAllAudio, voiceSettings.openRouterApiKey, voiceSettings.roleplayModel, voiceSettings.supervisorModel]);
+
+  // Main setup effect
+  useEffect(() => {
+    const apiKey = getOpenRouterApiKey(voiceSettings.openRouterApiKey);
+    if (!apiKey) {
+      setStatus('error');
+      setErrorMessage('OpenRouter API Key is missing. Please set your API key in Settings.');
+      return;
+    }
+
+    const initAudioAndSpeech = async () => {
       try {
-        inputAudioCtxRef.current = new (window.AudioContext || (window as any).webkitAudioContext)({ sampleRate: 16000 });
-        outputAudioCtxRef.current = new (window.AudioContext || (window as any).webkitAudioContext)({ sampleRate: 24000 });
-        
+        setStatus('connecting');
+        setErrorMessage(null);
+
+        // WebAudio Input Context
+        inputAudioCtxRef.current = new (window.AudioContext || (window as any).webkitAudioContext)();
+        outputAudioCtxRef.current = new (window.AudioContext || (window as any).webkitAudioContext)();
+
+        userAnalyserRef.current = inputAudioCtxRef.current.createAnalyser();
+        userAnalyserRef.current.fftSize = 256;
+
         aiAnalyserRef.current = outputAudioCtxRef.current.createAnalyser();
         aiAnalyserRef.current.fftSize = 256;
         aiAnalyserRef.current.connect(outputAudioCtxRef.current.destination);
-        
-        updateAiLevel();
 
-        const constraints: MediaStreamConstraints = { 
+        const constraints: MediaStreamConstraints = {
           audio: voiceSettings.preferredAudioDeviceId 
             ? { deviceId: { exact: voiceSettings.preferredAudioDeviceId } } 
-            : true 
+            : true
         };
 
         const stream = await navigator.mediaDevices.getUserMedia(constraints);
         streamRef.current = stream;
 
-        // Silence detection logic: If after 5 seconds of active session, 
-        // the max audio level seen is very low, flag it.
-        let maxLevelSeen = 0;
-        silenceCheckTimerRef.current = setTimeout(() => {
-          if (maxLevelSeen < 1.0) { // Threshold for silence
-            setIsSilenceDetected(true);
+        const micSource = inputAudioCtxRef.current.createMediaStreamSource(stream);
+        micSource.connect(userAnalyserRef.current);
+
+        // Visualizer Level Tracking Loops
+        const updateUserLevel = () => {
+          if (userAnalyserRef.current && !isMutedRef.current) {
+            const dataArray = new Uint8Array(userAnalyserRef.current.frequencyBinCount);
+            userAnalyserRef.current.getByteFrequencyData(dataArray);
+            let sum = 0;
+            for (let i = 0; i < dataArray.length; i++) sum += dataArray[i];
+            const avg = sum / dataArray.length;
+            const lvl = Math.min(100, avg * 1.5);
+            setAudioLevel(lvl);
+            setIsUserSpeaking(lvl > 8);
+          } else {
+            setAudioLevel(0);
+            setIsUserSpeaking(false);
           }
-        }, 6000);
+          userLevelTimerRef.current = requestAnimationFrame(updateUserLevel);
+        };
+        updateUserLevel();
 
-        const sessionPromise = ai.live.connect({
-          model: 'gemini-2.5-flash-native-audio-preview-09-2025',
-          callbacks: {
-            onopen: () => {
-              setStatus('active');
-              const source = inputAudioCtxRef.current!.createMediaStreamSource(stream);
-              const scriptProcessor = inputAudioCtxRef.current!.createScriptProcessor(4096, 1, 1);
-              
-              scriptProcessor.onaudioprocess = (e) => {
-                const inputData = e.inputBuffer.getChannelData(0);
-                
-                // Volume calculation
-                let sum = 0;
-                for (let i = 0; i < inputData.length; i++) sum += inputData[i] * inputData[i];
-                const level = Math.sqrt(sum / inputData.length) * 100;
-                setAudioLevel(level);
-                setIsUserSpeaking(level > 2.0);
-                
-                if (level > maxLevelSeen) maxLevelSeen = level;
-                if (level > 2.0 && isSilenceDetected) setIsSilenceDetected(false);
-
-                if (isMuted) return;
-
-                const pcm16 = floatTo16BitPCM(inputData);
-                const base64 = encodeBase64(new Uint8Array(pcm16));
-                
-                sessionPromise.then(session => {
-                  session.sendRealtimeInput({ 
-                    media: { data: base64, mimeType: 'audio/pcm;rate=16000' } 
-                  });
-                });
-              };
-
-              source.connect(scriptProcessor);
-              scriptProcessor.connect(inputAudioCtxRef.current!.destination);
-            },
-            onmessage: async (message: LiveServerMessage) => {
-              // Transcriptions
-              if (message.serverContent?.outputTranscription) {
-                currentOutputTranscription.current += message.serverContent.outputTranscription.text;
-              } else if (message.serverContent?.inputTranscription) {
-                currentInputTranscription.current += message.serverContent.inputTranscription.text;
-              }
-
-              if (message.serverContent?.turnComplete) {
-                const userText = currentInputTranscription.current;
-                const modelText = currentOutputTranscription.current;
-
-                if (userText) {
-                  setMessages(prev => [...prev, { id: Date.now().toString(), role: 'user', text: userText, timestamp: new Date() }]);
-                  
-                  if (analysisChatRef.current && modelText) {
-                    setIsAnalyzingTurn(true);
-                    analysisChatRef.current.sendMessage({ message: `User: "${userText}"\nAI: "${modelText}"` })
-                      .then((res: any) => {
-                        try { if (res.text) setLiveInsight(JSON.parse(res.text)); }
-                        catch(e) {} finally { setIsAnalyzingTurn(false); }
-                      });
-                  }
-                }
-                
-                if (modelText) {
-                  setMessages(prev => [...prev, { id: (Date.now()+1).toString(), role: 'model', text: modelText, timestamp: new Date() }]);
-                }
-
-                currentInputTranscription.current = '';
-                currentOutputTranscription.current = '';
-              }
-
-              // Audio Output
-              const audioBase64 = message.serverContent?.modelTurn?.parts[0]?.inlineData?.data;
-              if (audioBase64) {
-                setIsAiSpeaking(true);
-                const audioCtx = outputAudioCtxRef.current!;
-                nextStartTimeRef.current = Math.max(nextStartTimeRef.current, audioCtx.currentTime);
-                
-                const buffer = await decodeAudioData(decodeBase64(audioBase64), audioCtx, 24000, 1);
-                const source = audioCtx.createBufferSource();
-                source.buffer = buffer;
-                source.connect(aiAnalyserRef.current!);
-                
-                source.onended = () => {
-                  audioSourcesRef.current.delete(source);
-                  if (audioSourcesRef.current.size === 0) setIsAiSpeaking(false);
-                };
-                
-                source.start(nextStartTimeRef.current);
-                nextStartTimeRef.current += buffer.duration;
-                audioSourcesRef.current.add(source);
-              }
-
-              if (message.serverContent?.interrupted) {
-                stopAllAudio();
-                setIsAiSpeaking(false);
-              }
-            },
-            onclose: () => console.debug("Session closed"),
-            onerror: (e) => console.error("Session error", e)
-          },
-          config: {
-            responseModalities: [Modality.AUDIO],
-            speechConfig: {
-              voiceConfig: { prebuiltVoiceConfig: { voiceName: voiceSettings.voiceName } }
-            },
-            systemInstruction: `
-              ${scenario.systemInstruction}
-              
-              VOCAL REALISM PROTOCOL:
-              - Speak with natural human patterns (fillers like "um", "uh", "well...").
-              - Use brief hesitations when thinking or emotionally activated.
-              - Vary pace based on character emotion.
-              - Strictly in character; no clinical meta-feedback.
-            `,
-            inputAudioTranscription: {},
-            outputAudioTranscription: {}
+        const updateAiLevel = () => {
+          if (aiAnalyserRef.current && isAiSpeaking) {
+            const dataArray = new Uint8Array(aiAnalyserRef.current.frequencyBinCount);
+            aiAnalyserRef.current.getByteFrequencyData(dataArray);
+            let sum = 0;
+            for (let i = 0; i < dataArray.length; i++) sum += dataArray[i];
+            const avg = sum / dataArray.length;
+            setAiAudioLevel(avg * 0.8);
+          } else {
+            setAiAudioLevel(0);
           }
-        });
+          aiLevelTimerRef.current = requestAnimationFrame(updateAiLevel);
+        };
+        updateAiLevel();
 
-        sessionPromiseRef.current = sessionPromise;
-      } catch (err) {
-        console.error("Connect failed", err);
+        // Browser Speech Recognition for user speech
+        const SpeechRec = (window as any).SpeechRecognition || (window as any).webkitSpeechRecognition;
+        if (SpeechRec) {
+          const rec = new SpeechRec();
+          rec.continuous = true;
+          rec.interimResults = false;
+          rec.lang = 'en-US';
+
+          rec.onresult = (event: any) => {
+            if (isMutedRef.current || isProcessingTurnRef.current) return;
+            const last = event.results.length - 1;
+            const transcript = event.results[last][0].transcript;
+            if (transcript && transcript.trim().length > 0) {
+              setMessages(current => {
+                handleUserTurn(transcript, current);
+                return current;
+              });
+            }
+          };
+
+          rec.onerror = (e: any) => {
+            if (e.error !== 'no-speech') console.warn("Speech recognition notice:", e.error);
+          };
+
+          rec.onend = () => {
+            // Auto restart recognition while active
+            if (status === 'active' || status === 'connecting') {
+              try { rec.start(); } catch (e) {}
+            }
+          };
+
+          try {
+            rec.start();
+            recognitionRef.current = rec;
+          } catch (e) {}
+        }
+
+        setStatus('active');
+      } catch (err: any) {
+        console.error("Live session initialization failed", err);
+        setStatus('error');
+        setErrorMessage(err?.message || 'Could not access audio hardware. Please check microphone permissions.');
       }
     };
 
-    connect();
+    initAudioAndSpeech();
 
     return () => {
       stopAllAudio();
-      if (silenceCheckTimerRef.current) clearTimeout(silenceCheckTimerRef.current);
-      if (aiLevelUpdateTimerRef.current) cancelAnimationFrame(aiLevelUpdateTimerRef.current);
+      if (userLevelTimerRef.current) cancelAnimationFrame(userLevelTimerRef.current);
+      if (aiLevelTimerRef.current) cancelAnimationFrame(aiLevelTimerRef.current);
+      if (recognitionRef.current) {
+        try { recognitionRef.current.stop(); } catch (e) {}
+      }
       if (streamRef.current) streamRef.current.getTracks().forEach(t => t.stop());
       if (inputAudioCtxRef.current) inputAudioCtxRef.current.close();
       if (outputAudioCtxRef.current) outputAudioCtxRef.current.close();
-      if (sessionPromiseRef.current) sessionPromiseRef.current.then(s => s.close());
     };
-  }, [scenario, voiceSettings, stopAllAudio, isMuted]);
+  }, [scenario, voiceSettings.preferredAudioDeviceId, voiceSettings.openRouterApiKey, stopAllAudio, handleUserTurn, status, isAiSpeaking]);
 
   return {
     status,
     setStatus,
+    errorMessage,
     isMuted,
     toggleMute,
     audioLevel,
@@ -254,23 +348,15 @@ export function useLiveSession(scenario: Scenario, voiceSettings: UserSettings)
     liveInsight,
     isAnalyzingTurn,
     isSilenceDetected,
-    sessionPromiseRef,
     startSession: () => {
-      if (sessionPromiseRef.current) {
-        sessionPromiseRef.current.then(session => {
-          // We send a "hidden" text input to the model to trigger its initial message
-          // The Live API supports sending text turns in the clientContent
-          session.send({
-            clientContent: {
-              turns: [{
-                role: 'user',
-                parts: [{ text: "Please start the scenario now. Greet me as your character." }]
-              }],
-              turnComplete: true
-            }
-          });
-        });
-      }
+      const initialBotMsg: Message = {
+        id: 'init',
+        role: 'model',
+        text: scenario.initialMessage,
+        timestamp: new Date()
+      };
+      setMessages([initialBotMsg]);
+      speakText(scenario.initialMessage);
     }
   };
 }
diff --git a/index.html b/index.html
index 5e11389..a0fa2b8 100644
--- a/index.html
+++ b/index.html
@@ -20,21 +20,10 @@
           scrollbar-width: none;
       }
     </style>
-  <script type="importmap">
-{
-  "imports": {
-    "react": "https://esm.sh/react@^19.2.3",
-    "react-dom/": "https://esm.sh/react-dom@^19.2.3/",
-    "react/": "https://esm.sh/react@^19.2.3/",
-    "@google/genai": "https://esm.sh/@google/genai@^1.33.0",
-    "lucide-react": "https://esm.sh/lucide-react@^0.561.0"
-  }
-}
-</script>
 <link rel="stylesheet" href="/index.css">
 </head>
   <body>
     <div id="root"></div>
-  <script type="module" src="/index.tsx"></script>
+  <script type="module" src="/src/main.ts"></script>
 </body>
 </html>
\ No newline at end of file
diff --git a/package-lock.json b/package-lock.json
index b937cc3..e30f4bc 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,14 +1,13 @@
 {
   "name": "cognitive-clarity",
-  "version": "0.0.0",
+  "version": "1.0.0",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "cognitive-clarity",
-      "version": "0.0.0",
+      "version": "1.0.0",
       "dependencies": {
-        "@google/genai": "^1.33.0",
         "@radix-ui/react-dialog": "^1.1.15",
         "@radix-ui/react-label": "^2.1.8",
         "@radix-ui/react-scroll-area": "^1.2.10",
@@ -34,13 +33,22 @@
         "workbox-strategies": "^7.4.0"
       },
       "devDependencies": {
+        "@lucide/svelte": "^1.48.0",
+        "@playwright/test": "^1.63.0",
+        "@sveltejs/vite-plugin-svelte": "^5.1.1",
         "@types/node": "^22.19.15",
         "@vitejs/plugin-react": "^5.0.0",
         "autoprefixer": "^10.4.27",
+        "bits-ui": "^2.19.3",
+        "lucide-svelte": "^1.0.1",
         "postcss": "^8.5.8",
+        "svelte": "^5.57.1",
+        "svelte-check": "^4.7.6",
         "tailwindcss": "^3.4.19",
+        "tsx": "^4.23.13",
         "typescript": "~5.8.2",
-        "vite": "^6.2.0"
+        "vite": "^6.2.0",
+        "vitest": "^5.0.2"
       }
     },
     "node_modules/@alloc/quick-lru": {
@@ -1868,42 +1876,15 @@
       "resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.2.11.tgz",
       "integrity": "sha512-RiB/yIh78pcIxl6lLMG0CgBXAZ2Y0eVHqMPYugu+9U0AeT6YBeiJpf7lbdJNIugFP5SIjwNRgo4DhR1Qxi26Gg=="
     },
-    "node_modules/@google/genai": {
-      "version": "1.44.0",
-      "resolved": "https://registry.npmjs.org/@google/genai/-/genai-1.44.0.tgz",
-      "integrity": "sha512-kRt9ZtuXmz+tLlcNntN/VV4LRdpl6ZOu5B1KbfNgfR65db15O6sUQcwnwLka8sT/V6qysD93fWrgJHF2L7dA9A==",
+    "node_modules/@internationalized/date": {
+      "version": "3.12.4",
+      "resolved": "https://registry.npmjs.org/@internationalized/date/-/date-3.12.4.tgz",
+      "integrity": "sha512-M1dEn4c1U1HsSlaVR8upZtSqvXrTkHDfv18H01uCSJyjVLDxnBR38v/fMxecmlwXKR4i9HeZcmgQAPE6A+aGJQ==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "peer": true,
       "dependencies": {
-        "google-auth-library": "^10.3.0",
-        "p-retry": "^4.6.2",
-        "protobufjs": "^7.5.4",
-        "ws": "^8.18.0"
-      },
-      "engines": {
-        "node": ">=20.0.0"
-      },
-      "peerDependencies": {
-        "@modelcontextprotocol/sdk": "^1.25.2"
-      },
-      "peerDependenciesMeta": {
-        "@modelcontextprotocol/sdk": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/@isaacs/cliui": {
-      "version": "8.0.2",
-      "resolved": "https://registry.npmjs.org/@isaacs/cliui/-/cliui-8.0.2.tgz",
-      "integrity": "sha512-O8jcjabXaleOG9DQ0+ARXWZBTfnP4WNAqzuiJK7ll44AmxGKv/J2M4TPjxjY3znBCfvBXFzucm1twdyFybFqEA==",
-      "dependencies": {
-        "string-width": "^5.1.2",
-        "string-width-cjs": "npm:string-width@^4.2.0",
-        "strip-ansi": "^7.0.1",
-        "strip-ansi-cjs": "npm:strip-ansi@^6.0.1",
-        "wrap-ansi": "^8.1.0",
-        "wrap-ansi-cjs": "npm:wrap-ansi@^7.0.0"
-      },
-      "engines": {
-        "node": ">=12"
+        "@swc/helpers": "^0.5.0"
       }
     },
     "node_modules/@jridgewell/gen-mapping": {
@@ -1942,9 +1923,10 @@
       }
     },
     "node_modules/@jridgewell/sourcemap-codec": {
-      "version": "1.5.5",
-      "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.5.5.tgz",
-      "integrity": "sha512-cYQ9310grqxueWbl+WuIUIaiUaDcj7WOq5fVhEljNVgRfOUhY9fy2zTvfoqWsnebh8Sl70VScFbICvJnLKB0Og=="
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.6.0.tgz",
+      "integrity": "sha512-T7jf+5zgsZHwNJ4lvQ7/aezbyk0nNX+zJVWpmHA7VYsEx7a7qr5Rg5IbtJFqkgze5Y2sruq1RUY8Q837Od7iFw==",
+      "license": "MIT"
     },
     "node_modules/@jridgewell/trace-mapping": {
       "version": "0.3.31",
@@ -1955,6 +1937,16 @@
         "@jridgewell/sourcemap-codec": "^1.4.14"
       }
     },
+    "node_modules/@lucide/svelte": {
+      "version": "1.48.0",
+      "resolved": "https://registry.npmjs.org/@lucide/svelte/-/svelte-1.48.0.tgz",
+      "integrity": "sha512-bLimVDjehxu3fpu9XEUpqEkBk2sJAHAT2sVcLHhlM70EdNsXuj9ZnYENWv5xgw3+05h4i5TirAxTiTgnZZf8gw==",
+      "dev": true,
+      "license": "ISC",
+      "peerDependencies": {
+        "svelte": "^5"
+      }
+    },
     "node_modules/@nodelib/fs.scandir": {
       "version": "2.1.5",
       "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
@@ -1987,69 +1979,22 @@
         "node": ">= 8"
       }
     },
-    "node_modules/@pkgjs/parseargs": {
-      "version": "0.11.0",
-      "resolved": "https://registry.npmjs.org/@pkgjs/parseargs/-/parseargs-0.11.0.tgz",
-      "integrity": "sha512-+1VkjdD0QBLPodGrJUeqarH8VAIvQODIbwh9XpP5Syisf7YoQgsJKPNFoqqLQlu+VQ/tVSshMR6loPMn8U+dPg==",
-      "optional": true,
-      "engines": {
-        "node": ">=14"
-      }
-    },
-    "node_modules/@protobufjs/aspromise": {
-      "version": "1.1.2",
-      "resolved": "https://registry.npmjs.org/@protobufjs/aspromise/-/aspromise-1.1.2.tgz",
-      "integrity": "sha512-j+gKExEuLmKwvz3OgROXtrJ2UG2x8Ch2YZUxahh+s1F2HZ+wAceUNLkvy6zKCPVRkU++ZWQrdxsUeQXmcg4uoQ=="
-    },
-    "node_modules/@protobufjs/base64": {
-      "version": "1.1.2",
-      "resolved": "https://registry.npmjs.org/@protobufjs/base64/-/base64-1.1.2.tgz",
-      "integrity": "sha512-AZkcAA5vnN/v4PDqKyMR5lx7hZttPDgClv83E//FMNhR2TMcLUhfRUBHCmSl0oi9zMgDDqRUJkSxO3wm85+XLg=="
-    },
-    "node_modules/@protobufjs/codegen": {
-      "version": "2.0.4",
-      "resolved": "https://registry.npmjs.org/@protobufjs/codegen/-/codegen-2.0.4.tgz",
-      "integrity": "sha512-YyFaikqM5sH0ziFZCN3xDC7zeGaB/d0IUb9CATugHWbd1FRFwWwt4ld4OYMPWu5a3Xe01mGAULCdqhMlPl29Jg=="
-    },
-    "node_modules/@protobufjs/eventemitter": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/@protobufjs/eventemitter/-/eventemitter-1.1.0.tgz",
-      "integrity": "sha512-j9ednRT81vYJ9OfVuXG6ERSTdEL1xVsNgqpkxMsbIabzSo3goCjDIveeGv5d03om39ML71RdmrGNjG5SReBP/Q=="
-    },
-    "node_modules/@protobufjs/fetch": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/@protobufjs/fetch/-/fetch-1.1.0.tgz",
-      "integrity": "sha512-lljVXpqXebpsijW71PZaCYeIcE5on1w5DlQy5WH6GLbFryLUrBD4932W/E2BSpfRJWseIL4v/KPgBFxDOIdKpQ==",
+    "node_modules/@playwright/test": {
+      "version": "1.63.0",
+      "resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.63.0.tgz",
+      "integrity": "sha512-oxMK4vllB9RK5NQ2l1pq1IfOf2AvnEuj/vYGDj0H2nMtmtZpKtCwt/l00GEO6xjGfpBNAvjovvYdCm50dRQkpQ==",
+      "dev": true,
+      "license": "Apache-2.0",
       "dependencies": {
-        "@protobufjs/aspromise": "^1.1.1",
-        "@protobufjs/inquire": "^1.1.0"
+        "playwright": "1.63.0"
+      },
+      "bin": {
+        "playwright": "cli.js"
+      },
+      "engines": {
+        "node": ">=20"
       }
     },
-    "node_modules/@protobufjs/float": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/@protobufjs/float/-/float-1.0.2.tgz",
-      "integrity": "sha512-Ddb+kVXlXst9d+R9PfTIxh1EdNkgoRe5tOX6t01f1lYWOvJnSPDBlG241QLzcyPdoNTsblLUdujGSE4RzrTZGQ=="
-    },
-    "node_modules/@protobufjs/inquire": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/@protobufjs/inquire/-/inquire-1.1.0.tgz",
-      "integrity": "sha512-kdSefcPdruJiFMVSbn801t4vFK7KB/5gd2fYvrxhuJYg8ILrmn9SKSX2tZdV6V+ksulWqS7aXjBcRXl3wHoD9Q=="
-    },
-    "node_modules/@protobufjs/path": {
-      "version": "1.1.2",
-      "resolved": "https://registry.npmjs.org/@protobufjs/path/-/path-1.1.2.tgz",
-      "integrity": "sha512-6JOcJ5Tm08dOHAbdR3GrvP+yUUfkjG5ePsHYczMFLq3ZmMkAD98cDgcT2iA1lJ9NVwFd4tH/iSSoe44YWkltEA=="
-    },
-    "node_modules/@protobufjs/pool": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/@protobufjs/pool/-/pool-1.1.0.tgz",
-      "integrity": "sha512-0kELaGSIDBKvcgS4zkjz1PeddatrjYcmMWOlAuAPwAeccUrPHdUqo/J6LiymHHEiJT5NrF1UVwxY14f+fy4WQw=="
-    },
-    "node_modules/@protobufjs/utf8": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/@protobufjs/utf8/-/utf8-1.1.0.tgz",
-      "integrity": "sha512-Vvn3zZrhQZkkBE8LSuW3em98c0FwgO4nxzv6OdSxPKJIEKY2bGbHn+mhGIPerzI4twdxaP8/0+06HBpwf345Lw=="
-    },
     "node_modules/@radix-ui/number": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/@radix-ui/number/-/number-1.1.1.tgz",
@@ -3283,6 +3228,87 @@
         "string.prototype.matchall": "^4.0.6"
       }
     },
+    "node_modules/@sveltejs/acorn-typescript": {
+      "version": "1.0.13",
+      "resolved": "https://registry.npmjs.org/@sveltejs/acorn-typescript/-/acorn-typescript-1.0.13.tgz",
+      "integrity": "sha512-wgKggnhZVL9Bfx1OaKKTrYY9BFRk6C8UAkQNUcIv1+llzYrIqy+RZm5HPKzn0NpEBvTVhTqB4kQyllZywsRBRQ==",
+      "dev": true,
+      "license": "MIT",
+      "peerDependencies": {
+        "acorn": "^8.9.0"
+      }
+    },
+    "node_modules/@sveltejs/load-config": {
+      "version": "0.2.3",
+      "resolved": "https://registry.npmjs.org/@sveltejs/load-config/-/load-config-0.2.3.tgz",
+      "integrity": "sha512-VT3qmUb8pRV2QrZjd8iAmtg8lf4W0TIjZbvXtz5MKei/q96teWZgGJyyidJzOjzZzvdq616eSRVeMYIQChUTAQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 18.0.0"
+      }
+    },
+    "node_modules/@sveltejs/vite-plugin-svelte": {
+      "version": "5.1.1",
+      "resolved": "https://registry.npmjs.org/@sveltejs/vite-plugin-svelte/-/vite-plugin-svelte-5.1.1.tgz",
+      "integrity": "sha512-Y1Cs7hhTc+a5E9Va/xwKlAJoariQyHY+5zBgCZg4PFWNYQ1nMN9sjK1zhw1gK69DuqVP++sht/1GZg1aRwmAXQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@sveltejs/vite-plugin-svelte-inspector": "^4.0.1",
+        "debug": "^4.4.1",
+        "deepmerge": "^4.3.1",
+        "kleur": "^4.1.5",
+        "magic-string": "^0.30.17",
+        "vitefu": "^1.0.6"
+      },
+      "engines": {
+        "node": "^18.0.0 || ^20.0.0 || >=22"
+      },
+      "peerDependencies": {
+        "svelte": "^5.0.0",
+        "vite": "^6.0.0"
+      }
+    },
+    "node_modules/@sveltejs/vite-plugin-svelte-inspector": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/@sveltejs/vite-plugin-svelte-inspector/-/vite-plugin-svelte-inspector-4.0.1.tgz",
+      "integrity": "sha512-J/Nmb2Q2y7mck2hyCX4ckVHcR5tu2J+MtBEQqpDrrgELZ2uvraQcK/ioCV61AqkdXFgriksOKIceDcQmqnGhVw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "debug": "^4.3.7"
+      },
+      "engines": {
+        "node": "^18.0.0 || ^20.0.0 || >=22"
+      },
+      "peerDependencies": {
+        "@sveltejs/vite-plugin-svelte": "^5.0.0",
+        "svelte": "^5.0.0",
+        "vite": "^6.0.0"
+      }
+    },
+    "node_modules/@sveltejs/vite-plugin-svelte/node_modules/magic-string": {
+      "version": "0.30.21",
+      "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.21.tgz",
+      "integrity": "sha512-vd2F4YUyEXKGcLHoq+TEyCjxueSeHnFxyyjNp80yg0XV4vUhnDer/lvvlqM/arB5bXQN5K2/3oinyCRyx8T2CQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@jridgewell/sourcemap-codec": "^1.5.5"
+      }
+    },
+    "node_modules/@swc/helpers": {
+      "version": "0.5.23",
+      "resolved": "https://registry.npmjs.org/@swc/helpers/-/helpers-0.5.23.tgz",
+      "integrity": "sha512-5lSsMOTXURePglDfvuAQUqkGek9Hg2kksOYay2m0+XR++b2NWYL/4sWyuvVBIs8oKnJaxkdi9whaL/sqN13afw==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "peer": true,
+      "dependencies": {
+        "tslib": "^2.8.0"
+      }
+    },
     "node_modules/@types/babel__core": {
       "version": "7.20.5",
       "resolved": "https://registry.npmjs.org/@types/babel__core/-/babel__core-7.20.5.tgz",
@@ -3324,6 +3350,24 @@
         "@babel/types": "^7.28.2"
       }
     },
+    "node_modules/@types/chai": {
+      "version": "5.2.3",
+      "resolved": "https://registry.npmjs.org/@types/chai/-/chai-5.2.3.tgz",
+      "integrity": "sha512-Mw558oeA9fFbv65/y4mHtXDs9bPnFMZAL/jxdPFUpOHHIXX91mcgEHbS5Lahr+pwZFR8A7GQleRWeI6cGFC2UA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/deep-eql": "*",
+        "assertion-error": "^2.0.1"
+      }
+    },
+    "node_modules/@types/deep-eql": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/@types/deep-eql/-/deep-eql-4.0.2.tgz",
+      "integrity": "sha512-c9h9dVVMigMPc4bwTvC5dxqtqJZwQPePsWjPlpSOnojbor6pGqdk541lfA7AqFQr5pB1BRdq0juY9db81BwyFw==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/@types/estree": {
       "version": "1.0.8",
       "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.8.tgz",
@@ -3333,6 +3377,7 @@
       "version": "22.19.15",
       "resolved": "https://registry.npmjs.org/@types/node/-/node-22.19.15.tgz",
       "integrity": "sha512-F0R/h2+dsy5wJAUe3tAU6oqa2qbWY5TpNfL/RGmo1y38hiyO1w3x2jPtt76wmuaJI4DQnOBu21cNXQ2STIUUWg==",
+      "devOptional": true,
       "dependencies": {
         "undici-types": "~6.21.0"
       }
@@ -3342,11 +3387,6 @@
       "resolved": "https://registry.npmjs.org/@types/resolve/-/resolve-1.20.2.tgz",
       "integrity": "sha512-60BCwRFOZCQhDncwQdxxeOEEkbc5dIMccYLwbxsS4TUNeVECQ/pBJ0j09mrHOl/JJvpRPGwO9SvE4nR2Nb/a4Q=="
     },
-    "node_modules/@types/retry": {
-      "version": "0.12.0",
-      "resolved": "https://registry.npmjs.org/@types/retry/-/retry-0.12.0.tgz",
-      "integrity": "sha512-wWKOClTTiizcZhXnPY4wikVAwmdYHp8q6DmC+EJUzAMsycb7HB32Kh9RN4+0gExjmPmZSAQjgURXIGATPegAvA=="
-    },
     "node_modules/@types/trusted-types": {
       "version": "2.0.7",
       "resolved": "https://registry.npmjs.org/@types/trusted-types/-/trusted-types-2.0.7.tgz",
@@ -3372,10 +3412,69 @@
         "vite": "^4.2.0 || ^5.0.0 || ^6.0.0 || ^7.0.0"
       }
     },
+    "node_modules/@vitest/mocker": {
+      "version": "5.0.2",
+      "resolved": "https://registry.npmjs.org/@vitest/mocker/-/mocker-5.0.2.tgz",
+      "integrity": "sha512-Z5FS00Q1SJHkB35xATsmWGdQ5WA1/0MV3CDjqyv7GavHv1OfOj145MNfHOlHk7QLes21dKFDHr8EO2zvL+9WGA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@jridgewell/trace-mapping": "0.3.31",
+        "@vitest/spy": "5.0.2",
+        "estree-walker": "^3.0.3",
+        "magic-string": "^1.2.3"
+      },
+      "funding": {
+        "url": "https://opencollective.com/vitest"
+      },
+      "peerDependencies": {
+        "msw": "^2.4.9",
+        "vite": "^6.0.0 || ^7.0.0 || ^8.0.0"
+      },
+      "peerDependenciesMeta": {
+        "msw": {
+          "optional": true
+        },
+        "vite": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@vitest/mocker/node_modules/estree-walker": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-3.0.3.tgz",
+      "integrity": "sha512-7RUKfXgSMMkzt6ZuXmqapOurLGPPfgj6l9uRZ7lRGolvk0y2yocc35LdcxKC5PQZdn2DMqioAQ2NoWcrTKmm6g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/estree": "^1.0.0"
+      }
+    },
+    "node_modules/@vitest/mocker/node_modules/magic-string": {
+      "version": "1.4.2",
+      "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-1.4.2.tgz",
+      "integrity": "sha512-vG+rjFRj1PqdIBozIxAGMjPlOhaVe+GXpbttY/iSK7rGcJRMlwNJO7dcUwmUqkymsFLJiNGI06t4D7Fr7yRC9g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@jridgewell/sourcemap-codec": "^1.6.0"
+      }
+    },
+    "node_modules/@vitest/spy": {
+      "version": "5.0.2",
+      "resolved": "https://registry.npmjs.org/@vitest/spy/-/spy-5.0.2.tgz",
+      "integrity": "sha512-Ijc7T1nT9efNb5LxvjaBrEqw3f/QwUv5EE0nKqZxgqsaV/FxAAZ8baGylA8X/Z2oS4Lp+K74Jr6dTJsDKxJDeg==",
+      "dev": true,
+      "license": "MIT",
+      "funding": {
+        "url": "https://opencollective.com/vitest"
+      }
+    },
     "node_modules/acorn": {
-      "version": "8.16.0",
-      "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.16.0.tgz",
-      "integrity": "sha512-UVJyE9MttOsBQIDKw1skb9nAwQuR5wuGD3+82K6JgJlm/Y+KI92oNsMNGZCYdDsVtRHSak0pcV5Dno5+4jh9sw==",
+      "version": "8.18.0",
+      "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.18.0.tgz",
+      "integrity": "sha512-lGq+9yr1/GuAWaVYIHRjvvySG5/4VfKIvC8EWxStPdcDh/Ka7FG3twP6v4d5BkravUilhIAsG4Qj83t02LWUPQ==",
+      "license": "MIT",
       "bin": {
         "acorn": "bin/acorn"
       },
@@ -3383,14 +3482,6 @@
         "node": ">=0.4.0"
       }
     },
-    "node_modules/agent-base": {
-      "version": "7.1.4",
-      "resolved": "https://registry.npmjs.org/agent-base/-/agent-base-7.1.4.tgz",
-      "integrity": "sha512-MnA+YT8fwfJPgBx3m60MNqakm30XOkyIoH1y6huTQvC0PwZG7ki8NacLBcrPbNoo8vEZy7Jpuk7+jMO+CUovTQ==",
-      "engines": {
-        "node": ">= 14"
-      }
-    },
     "node_modules/ajv": {
       "version": "8.18.0",
       "resolved": "https://registry.npmjs.org/ajv/-/ajv-8.18.0.tgz",
@@ -3406,28 +3497,6 @@
         "url": "https://github.com/sponsors/epoberezkin"
       }
     },
-    "node_modules/ansi-regex": {
-      "version": "6.2.2",
-      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-6.2.2.tgz",
-      "integrity": "sha512-Bq3SmSpyFHaWjPk8If9yc6svM8c56dB5BAtW4Qbw5jHTwwXXcTLoRMkpDJp6VL0XzlWaCHTXrkFURMYmD0sLqg==",
-      "engines": {
-        "node": ">=12"
-      },
-      "funding": {
-        "url": "https://github.com/chalk/ansi-regex?sponsor=1"
-      }
-    },
-    "node_modules/ansi-styles": {
-      "version": "6.2.3",
-      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-6.2.3.tgz",
-      "integrity": "sha512-4Dj6M28JB+oAH8kFkTLUo+a2jwOFkuqb3yucU0CANcRRUbxS0cP0nZYCGjcc3BNXwRIsUVmDGgzawme7zvJHvg==",
-      "engines": {
-        "node": ">=12"
-      },
-      "funding": {
-        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
-      }
-    },
     "node_modules/any-promise": {
       "version": "1.3.0",
       "resolved": "https://registry.npmjs.org/any-promise/-/any-promise-1.3.0.tgz",
@@ -3472,6 +3541,16 @@
         "node": ">=10"
       }
     },
+    "node_modules/aria-query": {
+      "version": "5.3.1",
+      "resolved": "https://registry.npmjs.org/aria-query/-/aria-query-5.3.1.tgz",
+      "integrity": "sha512-Z/ZeOgVl7bcSYZ/u/rh0fOpvEpq//LZmdbkXyc7syVzjPAhfOa9ebsdTSjEBDU4vs5nC98Kfduj1uFo0qyET3g==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
     "node_modules/array-buffer-byte-length": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/array-buffer-byte-length/-/array-buffer-byte-length-1.0.2.tgz",
@@ -3507,6 +3586,16 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/assertion-error": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/assertion-error/-/assertion-error-2.0.1.tgz",
+      "integrity": "sha512-Izi8RQcffqCeNVgFigKli1ssklIbpHnCYc6AknXGYoB6grJqyeby7jv12JUQgmTAnIDnbck1uxksT4dzN3PWBA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=12"
+      }
+    },
     "node_modules/async": {
       "version": "3.2.6",
       "resolved": "https://registry.npmjs.org/async/-/async-3.2.6.tgz",
@@ -3578,6 +3667,16 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/axobject-query": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/axobject-query/-/axobject-query-4.1.0.tgz",
+      "integrity": "sha512-qIj0G9wZbMGNLjLmg1PT6v2mE9AH2zlnADJD/2tC6E00hgmhUOfEB6greHPAfLRSufHqROIUTkw6E+M3lH0PTQ==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
     "node_modules/babel-plugin-polyfill-corejs2": {
       "version": "0.4.15",
       "resolved": "https://registry.npmjs.org/babel-plugin-polyfill-corejs2/-/babel-plugin-polyfill-corejs2-0.4.15.tgz",
@@ -3619,25 +3718,6 @@
       "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
       "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw=="
     },
-    "node_modules/base64-js": {
-      "version": "1.5.1",
-      "resolved": "https://registry.npmjs.org/base64-js/-/base64-js-1.5.1.tgz",
-      "integrity": "sha512-AKpaYlHn8t4SVbOHCy+b5+KKgvR4vrsD8vbvrbiQJps7fKDTkjkDry6ji0rUJjC0kzbNePLwzxq8iypo41qeWA==",
-      "funding": [
-        {
-          "type": "github",
-          "url": "https://github.com/sponsors/feross"
-        },
-        {
-          "type": "patreon",
-          "url": "https://www.patreon.com/feross"
-        },
-        {
-          "type": "consulting",
-          "url": "https://feross.org/support"
-        }
-      ]
-    },
     "node_modules/baseline-browser-mapping": {
       "version": "2.10.0",
       "resolved": "https://registry.npmjs.org/baseline-browser-mapping/-/baseline-browser-mapping-2.10.0.tgz",
@@ -3649,14 +3729,6 @@
         "node": ">=6.0.0"
       }
     },
-    "node_modules/bignumber.js": {
-      "version": "9.3.1",
-      "resolved": "https://registry.npmjs.org/bignumber.js/-/bignumber.js-9.3.1.tgz",
-      "integrity": "sha512-Ko0uX15oIUS7wJ3Rb30Fs6SkVbLmPBAKdlm7q9+ak9bbIeFf0MwuBsQV6z7+X768/cHsfg+WlysDWJcmthjsjQ==",
-      "engines": {
-        "node": "*"
-      }
-    },
     "node_modules/binary-extensions": {
       "version": "2.3.0",
       "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.3.0.tgz",
@@ -3668,6 +3740,31 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/bits-ui": {
+      "version": "2.19.3",
+      "resolved": "https://registry.npmjs.org/bits-ui/-/bits-ui-2.19.3.tgz",
+      "integrity": "sha512-04COIqqht1h0YRnVTJVHy3+F8NhzS5x0eSM8eqvavaWmK/GLDTgYJW2h1CA//8hh9vSk4rG7rOvJ3QAIpCuYIw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@floating-ui/core": "^1.7.1",
+        "@floating-ui/dom": "^1.7.1",
+        "esm-env": "^1.1.2",
+        "runed": "^0.35.1",
+        "svelte-toolbelt": "^0.10.6",
+        "tabbable": "^6.2.0"
+      },
+      "engines": {
+        "node": ">=20"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/huntabyte"
+      },
+      "peerDependencies": {
+        "@internationalized/date": "^3.8.1",
+        "svelte": "^5.33.0"
+      }
+    },
     "node_modules/brace-expansion": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.2.tgz",
@@ -3719,11 +3816,6 @@
         "node": "^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7"
       }
     },
-    "node_modules/buffer-equal-constant-time": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/buffer-equal-constant-time/-/buffer-equal-constant-time-1.0.1.tgz",
-      "integrity": "sha512-zRpUiDwd/xk6ADqPMATG8vc9VPrkck7T07OIx0gnjmJAnHnTVXNQG3vfvWNuiZIkwu9KrKdA1iJKfsfTVxE6NA=="
-    },
     "node_modules/buffer-from": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/buffer-from/-/buffer-from-1.1.2.tgz",
@@ -3800,6 +3892,16 @@
         }
       ]
     },
+    "node_modules/chai": {
+      "version": "6.2.2",
+      "resolved": "https://registry.npmjs.org/chai/-/chai-6.2.2.tgz",
+      "integrity": "sha512-NUPRluOfOiTKBKvWPtSD4PhFvWCqOi0BGStNWs57X9js7XGTprSmFoz5F0tWhR4WPjNeR9jXqdC7/UpSJTnlRg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      }
+    },
     "node_modules/chokidar": {
       "version": "3.6.0",
       "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.6.0.tgz",
@@ -3853,22 +3955,6 @@
         "node": ">=6"
       }
     },
-    "node_modules/color-convert": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
-      "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
-      "dependencies": {
-        "color-name": "~1.1.4"
-      },
-      "engines": {
-        "node": ">=7.0.0"
-      }
-    },
-    "node_modules/color-name": {
-      "version": "1.1.4",
-      "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
-      "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA=="
-    },
     "node_modules/commander": {
       "version": "4.1.1",
       "resolved": "https://registry.npmjs.org/commander/-/commander-4.1.1.tgz",
@@ -3934,14 +4020,6 @@
         "node": ">=4"
       }
     },
-    "node_modules/data-uri-to-buffer": {
-      "version": "4.0.1",
-      "resolved": "https://registry.npmjs.org/data-uri-to-buffer/-/data-uri-to-buffer-4.0.1.tgz",
-      "integrity": "sha512-0R9ikRb668HB7QDxT1vkpuUBtqc53YyAwMwGeUFKRojY/NWKvdZ+9UYtRfGmhqNbRkTSVpMbmyhXipFFv2cb/A==",
-      "engines": {
-        "node": ">= 12"
-      }
-    },
     "node_modules/data-view-buffer": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/data-view-buffer/-/data-view-buffer-1.0.2.tgz",
@@ -4046,11 +4124,28 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/dequal": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/dequal/-/dequal-2.0.3.tgz",
+      "integrity": "sha512-0je+qPKHEMohvfRTCEo3CrPG6cAzAYgmzKyxRiYSSDkS6eGJdyVJm7WaYA5ECaAD9wLB2T4EEeymA5aFVcYXCA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/detect-node-es": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/detect-node-es/-/detect-node-es-1.1.0.tgz",
       "integrity": "sha512-ypdmJU/TbBby2Dxibuv7ZLW3Bs1QEmM7nHjEANfohJLvE0XVujisn1qPJcZxg+qDucsr+bP6fLD1rPS3AhJ7EQ=="
     },
+    "node_modules/devalue": {
+      "version": "5.9.4",
+      "resolved": "https://registry.npmjs.org/devalue/-/devalue-5.9.4.tgz",
+      "integrity": "sha512-sPAT4pztbu6586/hrhOnMKS17IJrvg12mXiSPSS3W5qDeN2RGgvZ0diZCm31dBbnevfVmujNO3IM2wrS4Y2Rhg==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/didyoumean": {
       "version": "1.2.2",
       "resolved": "https://registry.npmjs.org/didyoumean/-/didyoumean-1.2.2.tgz",
@@ -4074,19 +4169,6 @@
         "node": ">= 0.4"
       }
     },
-    "node_modules/eastasianwidth": {
-      "version": "0.2.0",
-      "resolved": "https://registry.npmjs.org/eastasianwidth/-/eastasianwidth-0.2.0.tgz",
-      "integrity": "sha512-I88TYZWc9XiYHRQ4/3c5rjjfgkjhLyW2luGIheGERbNQ6OY7yTybanSpDXZa8y7VUP9YmDcYa+eyq4ca7iLqWA=="
-    },
-    "node_modules/ecdsa-sig-formatter": {
-      "version": "1.0.11",
-      "resolved": "https://registry.npmjs.org/ecdsa-sig-formatter/-/ecdsa-sig-formatter-1.0.11.tgz",
-      "integrity": "sha512-nagl3RYrbNv6kQkeJIpt6NJZy8twLB/2vtz6yN9Z4vRKHN4/QZJIEbqohALSgwKdnksuY3k5Addp5lg8sVoVcQ==",
-      "dependencies": {
-        "safe-buffer": "^5.0.1"
-      }
-    },
     "node_modules/ejs": {
       "version": "3.1.10",
       "resolved": "https://registry.npmjs.org/ejs/-/ejs-3.1.10.tgz",
@@ -4106,11 +4188,6 @@
       "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.307.tgz",
       "integrity": "sha512-5z3uFKBWjiNR44nFcYdkcXjKMbg5KXNdciu7mhTPo9tB7NbqSNP2sSnGR+fqknZSCwKkBN+oxiiajWs4dT6ORg=="
     },
-    "node_modules/emoji-regex": {
-      "version": "9.2.2",
-      "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-9.2.2.tgz",
-      "integrity": "sha512-L18DaJsXSUk2+42pv8mLs5jJT2hqFkFE4j21wOmgbUqsZ2hL72NsUU785g9RXgo3s0ZNgVl42TiHp3ZtOv/Vyg=="
-    },
     "node_modules/es-abstract": {
       "version": "1.24.1",
       "resolved": "https://registry.npmjs.org/es-abstract/-/es-abstract-1.24.1.tgz",
@@ -4194,6 +4271,13 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/es-module-lexer": {
+      "version": "2.3.2",
+      "resolved": "https://registry.npmjs.org/es-module-lexer/-/es-module-lexer-2.3.2.tgz",
+      "integrity": "sha512-poHGpORABojJJucnV9KbOavETW8lBVnphkW77ER5/BQ5Fz7oXSoCNek7IH3vR5nRjdsEz926ibFYX8KtLQmdyw==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/es-object-atoms": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/es-object-atoms/-/es-object-atoms-1.1.1.tgz",
@@ -4283,6 +4367,31 @@
         "node": ">=6"
       }
     },
+    "node_modules/esm-env": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/esm-env/-/esm-env-1.2.2.tgz",
+      "integrity": "sha512-Epxrv+Nr/CaL4ZcFGPJIYLWFom+YeV1DqMLHJoEd9SYRxNbaFruBwfEX/kkHUJf55j2+TUbmDcmuilbP1TmXHA==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/esrap": {
+      "version": "2.4.0",
+      "resolved": "https://registry.npmjs.org/esrap/-/esrap-2.4.0.tgz",
+      "integrity": "sha512-CQPcneEHw/czj32uwQC52nYnax8H4SXt25FCM+LIwGZ49cMIxpOj3bP8wmzcI+Z0HIy5KkClaPhRLfCySzwHPA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@jridgewell/sourcemap-codec": "^1.4.15"
+      },
+      "peerDependencies": {
+        "@typescript-eslint/types": "^8.2.0"
+      },
+      "peerDependenciesMeta": {
+        "@typescript-eslint/types": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/estree-walker": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-2.0.2.tgz",
@@ -4296,10 +4405,15 @@
         "node": ">=0.10.0"
       }
     },
-    "node_modules/extend": {
-      "version": "3.0.2",
-      "resolved": "https://registry.npmjs.org/extend/-/extend-3.0.2.tgz",
-      "integrity": "sha512-fjquC59cD7CyW6urNXK0FBufkZcoiGG80wTuPujX590cB5Ttln20E2UB4S/WARVqhXffZl2LNgS+gQdPIIim/g=="
+    "node_modules/expect-type": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/expect-type/-/expect-type-1.4.0.tgz",
+      "integrity": "sha512-KfYbmpRm0VbLjEvVa9yGwCi9GI34xvi7A/HXYWQO65CSD2u3MczUJSuwXKFIxlGsgBQizV9q5J9NHj4VG0n+pA==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "engines": {
+        "node": ">=12.0.0"
+      }
     },
     "node_modules/fast-deep-equal": {
       "version": "3.1.3",
@@ -4376,28 +4490,6 @@
         }
       }
     },
-    "node_modules/fetch-blob": {
-      "version": "3.2.0",
-      "resolved": "https://registry.npmjs.org/fetch-blob/-/fetch-blob-3.2.0.tgz",
-      "integrity": "sha512-7yAQpD2UMJzLi1Dqv7qFYnPbaPx7ZfFK6PiIxQ4PfkGPyNyl2Ugx+a/umUonmKqjhM4DnfbMvdX6otXq83soQQ==",
-      "funding": [
-        {
-          "type": "github",
-          "url": "https://github.com/sponsors/jimmywarting"
-        },
-        {
-          "type": "paypal",
-          "url": "https://paypal.me/jimmywarting"
-        }
-      ],
-      "dependencies": {
-        "node-domexception": "^1.0.0",
-        "web-streams-polyfill": "^3.0.3"
-      },
-      "engines": {
-        "node": "^12.20 || >= 14.13"
-      }
-    },
     "node_modules/filelist": {
       "version": "1.0.6",
       "resolved": "https://registry.npmjs.org/filelist/-/filelist-1.0.6.tgz",
@@ -4457,17 +4549,6 @@
         "url": "https://github.com/sponsors/isaacs"
       }
     },
-    "node_modules/formdata-polyfill": {
-      "version": "4.0.10",
-      "resolved": "https://registry.npmjs.org/formdata-polyfill/-/formdata-polyfill-4.0.10.tgz",
-      "integrity": "sha512-buewHzMvYL29jdeQTVILecSaZKnt/RJWjoZCF5OW60Z67/GmSLBkOFM7qh1PI3zFNtJbaZL5eQu1vLfazOwj4g==",
-      "dependencies": {
-        "fetch-blob": "^3.1.2"
-      },
-      "engines": {
-        "node": ">=12.20.0"
-      }
-    },
     "node_modules/fraction.js": {
       "version": "5.3.4",
       "resolved": "https://registry.npmjs.org/fraction.js/-/fraction.js-5.3.4.tgz",
@@ -4543,33 +4624,6 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
-    "node_modules/gaxios": {
-      "version": "7.1.3",
-      "resolved": "https://registry.npmjs.org/gaxios/-/gaxios-7.1.3.tgz",
-      "integrity": "sha512-YGGyuEdVIjqxkxVH1pUTMY/XtmmsApXrCVv5EU25iX6inEPbV+VakJfLealkBtJN69AQmh1eGOdCl9Sm1UP6XQ==",
-      "dependencies": {
-        "extend": "^3.0.2",
-        "https-proxy-agent": "^7.0.1",
-        "node-fetch": "^3.3.2",
-        "rimraf": "^5.0.1"
-      },
-      "engines": {
-        "node": ">=18"
-      }
-    },
-    "node_modules/gcp-metadata": {
-      "version": "8.1.2",
-      "resolved": "https://registry.npmjs.org/gcp-metadata/-/gcp-metadata-8.1.2.tgz",
-      "integrity": "sha512-zV/5HKTfCeKWnxG0Dmrw51hEWFGfcF2xiXqcA3+J90WDuP0SvoiSO5ORvcBsifmx/FoIjgQN3oNOGaQ5PhLFkg==",
-      "dependencies": {
-        "gaxios": "^7.0.0",
-        "google-logging-utils": "^1.0.0",
-        "json-bigint": "^1.0.0"
-      },
-      "engines": {
-        "node": ">=18"
-      }
-    },
     "node_modules/generator-function": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/generator-function/-/generator-function-2.0.1.tgz",
@@ -4650,26 +4704,6 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
-    "node_modules/glob": {
-      "version": "10.5.0",
-      "resolved": "https://registry.npmjs.org/glob/-/glob-10.5.0.tgz",
-      "integrity": "sha512-DfXN8DfhJ7NH3Oe7cFmu3NCu1wKbkReJ8TorzSAFbSKrlNaQSKfIzqYqVY8zlbs2NLBbWpRiU52GX2PbaBVNkg==",
-      "deprecated": "Old versions of glob are not supported, and contain widely publicized security vulnerabilities, which have been fixed in the current version. Please update. Support for old versions may be purchased (at exorbitant rates) by contacting i@izs.me",
-      "dependencies": {
-        "foreground-child": "^3.1.0",
-        "jackspeak": "^3.1.2",
-        "minimatch": "^9.0.4",
-        "minipass": "^7.1.2",
-        "package-json-from-dist": "^1.0.0",
-        "path-scurry": "^1.11.1"
-      },
-      "bin": {
-        "glob": "dist/esm/bin.mjs"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/isaacs"
-      }
-    },
     "node_modules/glob-parent": {
       "version": "6.0.2",
       "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-6.0.2.tgz",
@@ -4696,30 +4730,6 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
-    "node_modules/google-auth-library": {
-      "version": "10.6.1",
-      "resolved": "https://registry.npmjs.org/google-auth-library/-/google-auth-library-10.6.1.tgz",
-      "integrity": "sha512-5awwuLrzNol+pFDmKJd0dKtZ0fPLAtoA5p7YO4ODsDu6ONJUVqbYwvv8y2ZBO5MBNp9TJXigB19710kYpBPdtA==",
-      "dependencies": {
-        "base64-js": "^1.3.0",
-        "ecdsa-sig-formatter": "^1.0.11",
-        "gaxios": "7.1.3",
-        "gcp-metadata": "8.1.2",
-        "google-logging-utils": "1.1.3",
-        "jws": "^4.0.0"
-      },
-      "engines": {
-        "node": ">=18"
-      }
-    },
-    "node_modules/google-logging-utils": {
-      "version": "1.1.3",
-      "resolved": "https://registry.npmjs.org/google-logging-utils/-/google-logging-utils-1.1.3.tgz",
-      "integrity": "sha512-eAmLkjDjAFCVXg7A1unxHsLf961m6y17QFqXqAXGj/gVkKFrEICfStRfwUlGNfeCEjNRa32JEWOUTlYXPyyKvA==",
-      "engines": {
-        "node": ">=14"
-      }
-    },
     "node_modules/gopd": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/gopd/-/gopd-1.2.0.tgz",
@@ -4808,23 +4818,18 @@
         "node": ">= 0.4"
       }
     },
-    "node_modules/https-proxy-agent": {
-      "version": "7.0.6",
-      "resolved": "https://registry.npmjs.org/https-proxy-agent/-/https-proxy-agent-7.0.6.tgz",
-      "integrity": "sha512-vK9P5/iUfdl95AI+JVyUuIcVtd4ofvtrOr3HNtM2yxC9bnMbEdp3x01OhQNnjb8IJYi38VlTE3mBXwcfvywuSw==",
-      "dependencies": {
-        "agent-base": "^7.1.2",
-        "debug": "4"
-      },
-      "engines": {
-        "node": ">= 14"
-      }
-    },
     "node_modules/idb": {
       "version": "7.1.1",
       "resolved": "https://registry.npmjs.org/idb/-/idb-7.1.1.tgz",
       "integrity": "sha512-gchesWBzyvGHRO9W8tzUWFDycow5gwjvFKfyV9FF32Y7F50yZMp7mP+T2mJIWFx49zicqyC4uefHM17o6xKIVQ=="
     },
+    "node_modules/inline-style-parser": {
+      "version": "0.2.7",
+      "resolved": "https://registry.npmjs.org/inline-style-parser/-/inline-style-parser-0.2.7.tgz",
+      "integrity": "sha512-Nb2ctOyNR8DqQoR0OwRG95uNWIC0C1lCgf5Naz5H6Ji72KZ8OcFZLz2P5sNgwlyoJ8Yif11oMuYs5pBQa86csA==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/internal-slot": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/internal-slot/-/internal-slot-1.1.0.tgz",
@@ -4990,14 +4995,6 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
-    "node_modules/is-fullwidth-code-point": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz",
-      "integrity": "sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==",
-      "engines": {
-        "node": ">=8"
-      }
-    },
     "node_modules/is-generator-function": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/is-generator-function/-/is-generator-function-1.1.2.tgz",
@@ -5085,6 +5082,16 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/is-reference": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/is-reference/-/is-reference-3.0.3.tgz",
+      "integrity": "sha512-ixkJoqQvAP88E6wLydLGGqCJsrFUnqoH6HnaczB8XmDH1oaWU+xxdptvikTgaEhtZ53Ky6YXiBuUI2WXLMCwjw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/estree": "^1.0.6"
+      }
+    },
     "node_modules/is-regex": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/is-regex/-/is-regex-1.2.1.tgz",
@@ -5241,20 +5248,6 @@
       "resolved": "https://registry.npmjs.org/isexe/-/isexe-2.0.0.tgz",
       "integrity": "sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw=="
     },
-    "node_modules/jackspeak": {
-      "version": "3.4.3",
-      "resolved": "https://registry.npmjs.org/jackspeak/-/jackspeak-3.4.3.tgz",
-      "integrity": "sha512-OGlZQpz2yfahA/Rd1Y8Cd9SIEsqvXkLVoSw/cgwhnhFMDbsQFeZYoJJ7bIZBS9BcamUW96asq/npPWugM+RQBw==",
-      "dependencies": {
-        "@isaacs/cliui": "^8.0.2"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/isaacs"
-      },
-      "optionalDependencies": {
-        "@pkgjs/parseargs": "^0.11.0"
-      }
-    },
     "node_modules/jake": {
       "version": "10.9.4",
       "resolved": "https://registry.npmjs.org/jake/-/jake-10.9.4.tgz",
@@ -5295,14 +5288,6 @@
         "node": ">=6"
       }
     },
-    "node_modules/json-bigint": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/json-bigint/-/json-bigint-1.0.0.tgz",
-      "integrity": "sha512-SiPv/8VpZuWbvLSMtTDU8hEfrZWg/mH/nV/b4o0CYbSxu1UIQPLdwKOCIyLQX+VIPO5vrLX3i8qtqFyhdPSUSQ==",
-      "dependencies": {
-        "bignumber.js": "^9.0.0"
-      }
-    },
     "node_modules/json-schema": {
       "version": "0.4.0",
       "resolved": "https://registry.npmjs.org/json-schema/-/json-schema-0.4.0.tgz",
@@ -5343,23 +5328,14 @@
         "node": ">=0.10.0"
       }
     },
-    "node_modules/jwa": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/jwa/-/jwa-2.0.1.tgz",
-      "integrity": "sha512-hRF04fqJIP8Abbkq5NKGN0Bbr3JxlQ+qhZufXVr0DvujKy93ZCbXZMHDL4EOtodSbCWxOqR8MS1tXA5hwqCXDg==",
-      "dependencies": {
-        "buffer-equal-constant-time": "^1.0.1",
-        "ecdsa-sig-formatter": "1.0.11",
-        "safe-buffer": "^5.0.1"
-      }
-    },
-    "node_modules/jws": {
-      "version": "4.0.1",
-      "resolved": "https://registry.npmjs.org/jws/-/jws-4.0.1.tgz",
-      "integrity": "sha512-EKI/M/yqPncGUUh44xz0PxSidXFr/+r0pA70+gIYhjv+et7yxM+s29Y+VGDkovRofQem0fs7Uvf4+YmAdyRduA==",
-      "dependencies": {
-        "jwa": "^2.0.1",
-        "safe-buffer": "^5.0.1"
+    "node_modules/kleur": {
+      "version": "4.1.5",
+      "resolved": "https://registry.npmjs.org/kleur/-/kleur-4.1.5.tgz",
+      "integrity": "sha512-o+NO+8WrRiQEE4/7nwRJhN1HWpVmJm511pBHUxPLtp0BUISzlBplORYSmTclCnJvQq2tKu/sgl3xVpkc7ZWuQQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
       }
     },
     "node_modules/leven": {
@@ -5386,6 +5362,13 @@
       "resolved": "https://registry.npmjs.org/lines-and-columns/-/lines-and-columns-1.2.4.tgz",
       "integrity": "sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg=="
     },
+    "node_modules/locate-character": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/locate-character/-/locate-character-3.0.0.tgz",
+      "integrity": "sha512-SW13ws7BjaeJ6p7Q6CO2nchbYEc3X3J6WrmTTDto7yMPqVSZTUyY5Tjbid+Ab8gLnATtygYtiDIJGQRRn2ZOiA==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/lodash": {
       "version": "4.17.23",
       "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.23.tgz",
@@ -5401,11 +5384,6 @@
       "resolved": "https://registry.npmjs.org/lodash.sortby/-/lodash.sortby-4.7.0.tgz",
       "integrity": "sha512-HDWXG8isMntAyRF5vZ7xKuEvOhT4AhlRt/3czTSjvGUxjYCBVRQY48ViDHyfYz9VIoBkW4TMGQNapx+l3RUwdA=="
     },
-    "node_modules/long": {
-      "version": "5.3.2",
-      "resolved": "https://registry.npmjs.org/long/-/long-5.3.2.tgz",
-      "integrity": "sha512-mNAgZ1GmyNhD7AuqnTG3/VQ26o760+ZYBPKjPvugO8+nLbYfX6TVpJPseBvopbdY+qpZ/lKUnmEc1LeZYS3QAA=="
-    },
     "node_modules/lru-cache": {
       "version": "5.1.1",
       "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-5.1.1.tgz",
@@ -5422,6 +5400,27 @@
         "react": "^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0"
       }
     },
+    "node_modules/lucide-svelte": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/lucide-svelte/-/lucide-svelte-1.0.1.tgz",
+      "integrity": "sha512-WvzZgk0pqzgda+AErLvgWxHkfg/+GgUwqKMRHvzt0IqyMdmyEDzDCk3Z+Wo/3y753oIgx8u9Q4eUbWkghFa8Jg==",
+      "deprecated": "Package deprecated. Please use @lucide/svelte instead.",
+      "dev": true,
+      "license": "ISC",
+      "peerDependencies": {
+        "svelte": "^3 || ^4 || ^5.0.0-next.42"
+      }
+    },
+    "node_modules/lz-string": {
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/lz-string/-/lz-string-1.5.0.tgz",
+      "integrity": "sha512-h5bgJWpxJNswbU7qCrV0tIKQCaS3blPDrqKWx+QxzuzL1zGUzij9XCWLrSLsJPu5t+eWA/ycetzYAO5IOMcWAQ==",
+      "dev": true,
+      "license": "MIT",
+      "bin": {
+        "lz-string": "bin/bin.js"
+      }
+    },
     "node_modules/magic-string": {
       "version": "0.25.9",
       "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.25.9.tgz",
@@ -5469,20 +5468,6 @@
         "url": "https://github.com/sponsors/jonschlinkert"
       }
     },
-    "node_modules/minimatch": {
-      "version": "9.0.9",
-      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-9.0.9.tgz",
-      "integrity": "sha512-OBwBN9AL4dqmETlpS2zasx+vTeWclWzkblfZk7KTA5j3jeOONz/tRCnZomUyvNg83wL5Zv9Ss6HMJXAgL8R2Yg==",
-      "dependencies": {
-        "brace-expansion": "^2.0.2"
-      },
-      "engines": {
-        "node": ">=16 || 14 >=14.17"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/isaacs"
-      }
-    },
     "node_modules/minipass": {
       "version": "7.1.3",
       "resolved": "https://registry.npmjs.org/minipass/-/minipass-7.1.3.tgz",
@@ -5491,6 +5476,16 @@
         "node": ">=16 || 14 >=14.17"
       }
     },
+    "node_modules/mri": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/mri/-/mri-1.2.0.tgz",
+      "integrity": "sha512-tzzskb3bG8LvYGFF/mDTpq3jpI6Q9wc3LEmBaghu+DdCssd1FakN7Bc0hVNmEyGq1bq3RgfkCb3cmQLpNPOroA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=4"
+      }
+    },
     "node_modules/ms": {
       "version": "2.1.3",
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
@@ -5523,42 +5518,6 @@
         "node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1"
       }
     },
-    "node_modules/node-domexception": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/node-domexception/-/node-domexception-1.0.0.tgz",
-      "integrity": "sha512-/jKZoMpw0F8GRwl4/eLROPA3cfcXtLApP0QzLmUT/HuPCZWyB7IY9ZrMeKw2O/nFIqPQB3PVM9aYm0F312AXDQ==",
-      "deprecated": "Use your platform's native DOMException instead",
-      "funding": [
-        {
-          "type": "github",
-          "url": "https://github.com/sponsors/jimmywarting"
-        },
-        {
-          "type": "github",
-          "url": "https://paypal.me/jimmywarting"
-        }
-      ],
-      "engines": {
-        "node": ">=10.5.0"
-      }
-    },
-    "node_modules/node-fetch": {
-      "version": "3.3.2",
-      "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-3.3.2.tgz",
-      "integrity": "sha512-dRB78srN/l6gqWulah9SrxeYnxeddIG30+GOqK/9OlLVyLg3HPnr6SqOWTWOXKRwC2eGYCkZ59NNuSgvSrpgOA==",
-      "dependencies": {
-        "data-uri-to-buffer": "^4.0.0",
-        "fetch-blob": "^3.1.4",
-        "formdata-polyfill": "^4.0.10"
-      },
-      "engines": {
-        "node": "^12.20.0 || ^14.13.1 || >=16.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/node-fetch"
-      }
-    },
     "node_modules/node-releases": {
       "version": "2.0.36",
       "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.36.tgz",
@@ -5626,6 +5585,20 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/obug": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/obug/-/obug-2.2.1.tgz",
+      "integrity": "sha512-XrsrhT5sybtKI6wakr2SPOlGZWWYbUXZ7a0jT8/QOeAPau+1X/bSegNe5YR75oJmEZQbKningirmGOEJCIk61Q==",
+      "dev": true,
+      "funding": [
+        "https://github.com/sponsors/sxzz",
+        "https://opencollective.com/debug"
+      ],
+      "license": "MIT",
+      "engines": {
+        "node": ">=12.20.0"
+      }
+    },
     "node_modules/own-keys": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/own-keys/-/own-keys-1.0.1.tgz",
@@ -5642,18 +5615,6 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
-    "node_modules/p-retry": {
-      "version": "4.6.2",
-      "resolved": "https://registry.npmjs.org/p-retry/-/p-retry-4.6.2.tgz",
-      "integrity": "sha512-312Id396EbJdvRONlngUx0NydfrIQ5lsYu0znKVUzVvArzEIt08V1qhtyESbGVd1FGX7UKtiFp5uwKZdM8wIuQ==",
-      "dependencies": {
-        "@types/retry": "0.12.0",
-        "retry": "^0.13.1"
-      },
-      "engines": {
-        "node": ">=8"
-      }
-    },
     "node_modules/package-json-from-dist": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/package-json-from-dist/-/package-json-from-dist-1.0.1.tgz",
@@ -5672,35 +5633,16 @@
       "resolved": "https://registry.npmjs.org/path-parse/-/path-parse-1.0.7.tgz",
       "integrity": "sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw=="
     },
-    "node_modules/path-scurry": {
-      "version": "1.11.1",
-      "resolved": "https://registry.npmjs.org/path-scurry/-/path-scurry-1.11.1.tgz",
-      "integrity": "sha512-Xa4Nw17FS9ApQFJ9umLiJS4orGjm7ZzwUrwamcGQuHSzDyth9boKDaycYdDcZDuqYATXw4HFXgaqWTctW/v1HA==",
-      "dependencies": {
-        "lru-cache": "^10.2.0",
-        "minipass": "^5.0.0 || ^6.0.2 || ^7.0.0"
-      },
-      "engines": {
-        "node": ">=16 || 14 >=14.18"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/isaacs"
-      }
-    },
-    "node_modules/path-scurry/node_modules/lru-cache": {
-      "version": "10.4.3",
-      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-10.4.3.tgz",
-      "integrity": "sha512-JNAzZcXrCt42VGLuYz0zfAzDfAvJWW6AfYlDBQyDV5DClI2m5sAmK+OIO7s59XfsRsWHp02jAJrRadPRGTt6SQ=="
-    },
     "node_modules/picocolors": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.1.tgz",
       "integrity": "sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA=="
     },
     "node_modules/picomatch": {
-      "version": "4.0.3",
-      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.3.tgz",
-      "integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==",
+      "version": "4.0.7",
+      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.7.tgz",
+      "integrity": "sha512-qcJu88Q2IWqJsDD529JKMdwGm/dvInW4HvQnRwiH9JtihJvzGOscDtHE3x1pBKeUOTysQ8kVmLnJ2kJu7yhcGA==",
+      "license": "MIT",
       "engines": {
         "node": ">=12"
       },
@@ -5724,6 +5666,35 @@
         "node": ">= 6"
       }
     },
+    "node_modules/playwright": {
+      "version": "1.63.0",
+      "resolved": "https://registry.npmjs.org/playwright/-/playwright-1.63.0.tgz",
+      "integrity": "sha512-+7ziBLidS4NaNCdt57SUDT+wYmmd5fmiQejUic/kb+YsYSCPyOOE9sebzMjNmQrsnNpDJqd4WHvV/8lfKfUDUg==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "playwright-core": "1.63.0"
+      },
+      "bin": {
+        "playwright": "cli.js"
+      },
+      "engines": {
+        "node": ">=20"
+      }
+    },
+    "node_modules/playwright-core": {
+      "version": "1.63.0",
+      "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.63.0.tgz",
+      "integrity": "sha512-rYCsBF/M5HjUch52bbtVONEFjv6Xu8sm8h72dNlR5bzIE1fvC/bxgspzkjSfU+MweEMmPM8KJebG6nnyxo5mCg==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "bin": {
+        "playwright-core": "cli.js"
+      },
+      "engines": {
+        "node": ">=20"
+      }
+    },
     "node_modules/possible-typed-array-names": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/possible-typed-array-names/-/possible-typed-array-names-1.1.0.tgz",
@@ -5892,29 +5863,6 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
-    "node_modules/protobufjs": {
-      "version": "7.5.4",
-      "resolved": "https://registry.npmjs.org/protobufjs/-/protobufjs-7.5.4.tgz",
-      "integrity": "sha512-CvexbZtbov6jW2eXAvLukXjXUW1TzFaivC46BpWc/3BpcCysb5Vffu+B3XHMm8lVEuy2Mm4XGex8hBSg1yapPg==",
-      "hasInstallScript": true,
-      "dependencies": {
-        "@protobufjs/aspromise": "^1.1.2",
-        "@protobufjs/base64": "^1.1.2",
-        "@protobufjs/codegen": "^2.0.4",
-        "@protobufjs/eventemitter": "^1.1.0",
-        "@protobufjs/fetch": "^1.1.0",
-        "@protobufjs/float": "^1.0.2",
-        "@protobufjs/inquire": "^1.1.0",
-        "@protobufjs/path": "^1.1.2",
-        "@protobufjs/pool": "^1.1.0",
-        "@protobufjs/utf8": "^1.1.0",
-        "@types/node": ">=13.7.0",
-        "long": "^5.0.0"
-      },
-      "engines": {
-        "node": ">=12.0.0"
-      }
-    },
     "node_modules/punycode": {
       "version": "2.3.1",
       "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.3.1.tgz",
@@ -6189,14 +6137,6 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
-    "node_modules/retry": {
-      "version": "0.13.1",
-      "resolved": "https://registry.npmjs.org/retry/-/retry-0.13.1.tgz",
-      "integrity": "sha512-XQBQ3I8W1Cge0Seh+6gjj03LbmRFWuoszgK9ooCpwYIrhhoO80pfq4cUkU5DkknwfOfFteRwlZ56PYOGYyFWdg==",
-      "engines": {
-        "node": ">= 4"
-      }
-    },
     "node_modules/reusify": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/reusify/-/reusify-1.1.0.tgz",
@@ -6206,20 +6146,6 @@
         "node": ">=0.10.0"
       }
     },
-    "node_modules/rimraf": {
-      "version": "5.0.10",
-      "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-5.0.10.tgz",
-      "integrity": "sha512-l0OE8wL34P4nJH/H2ffoaniAokM2qSmrtXHmlpvYr5AVVX8msAyW0l8NVJFDxlSK4u3Uh/f41cQheDVdnYijwQ==",
-      "dependencies": {
-        "glob": "^10.3.7"
-      },
-      "bin": {
-        "rimraf": "dist/esm/bin.mjs"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/isaacs"
-      }
-    },
     "node_modules/rollup": {
       "version": "4.59.0",
       "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.59.0.tgz",
@@ -6285,6 +6211,44 @@
         "queue-microtask": "^1.2.2"
       }
     },
+    "node_modules/runed": {
+      "version": "0.35.1",
+      "resolved": "https://registry.npmjs.org/runed/-/runed-0.35.1.tgz",
+      "integrity": "sha512-2F4Q/FZzbeJTFdIS/PuOoPRSm92sA2LhzTnv6FXhCoENb3huf5+fDuNOg1LNvGOouy3u/225qxmuJvcV3IZK5Q==",
+      "dev": true,
+      "funding": [
+        "https://github.com/sponsors/huntabyte",
+        "https://github.com/sponsors/tglide"
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "dequal": "^2.0.3",
+        "esm-env": "^1.0.0",
+        "lz-string": "^1.5.0"
+      },
+      "peerDependencies": {
+        "@sveltejs/kit": "^2.21.0",
+        "svelte": "^5.7.0"
+      },
+      "peerDependenciesMeta": {
+        "@sveltejs/kit": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/sade": {
+      "version": "1.8.1",
+      "resolved": "https://registry.npmjs.org/sade/-/sade-1.8.1.tgz",
+      "integrity": "sha512-xal3CZX1Xlo/k4ApwCFrHVACi9fBqJ7V+mwhBsuf/1IOKbBy098Fex+Wa/5QMubw09pSZ/u8EY8PWgevJsXp1A==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "mri": "^1.1.0"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/safe-array-concat": {
       "version": "1.1.3",
       "resolved": "https://registry.npmjs.org/safe-array-concat/-/safe-array-concat-1.1.3.tgz",
@@ -6566,6 +6530,13 @@
       "integrity": "sha512-9NykojV5Uih4lgo5So5dtw+f0JgJX30KCNI8gwhz2J9A15wD0Ml6tjHKwf6fTSa6fAdVBdZeNOs9eJ71qCk8vA==",
       "deprecated": "Please use @jridgewell/sourcemap-codec instead"
     },
+    "node_modules/std-env": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/std-env/-/std-env-4.3.0.tgz",
+      "integrity": "sha512-OtU/EgQ1kIm5KwqQpBC6ZEMXrZRui11w8zgfTWp8cdO9B8OaPsbA8bTHO2P+HNo1VlUTGMVBwPhydu6poeXiag==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/stop-iteration-iterator": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/stop-iteration-iterator/-/stop-iteration-iterator-1.1.0.tgz",
@@ -6578,60 +6549,6 @@
         "node": ">= 0.4"
       }
     },
-    "node_modules/string-width": {
-      "version": "5.1.2",
-      "resolved": "https://registry.npmjs.org/string-width/-/string-width-5.1.2.tgz",
-      "integrity": "sha512-HnLOCR3vjcY8beoNLtcjZ5/nxn2afmME6lhrDrebokqMap+XbeW8n9TXpPDOqdGK5qcI3oT0GKTW6wC7EMiVqA==",
-      "dependencies": {
-        "eastasianwidth": "^0.2.0",
-        "emoji-regex": "^9.2.2",
-        "strip-ansi": "^7.0.1"
-      },
-      "engines": {
-        "node": ">=12"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
-    "node_modules/string-width-cjs": {
-      "name": "string-width",
-      "version": "4.2.3",
-      "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
-      "integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
-      "dependencies": {
-        "emoji-regex": "^8.0.0",
-        "is-fullwidth-code-point": "^3.0.0",
-        "strip-ansi": "^6.0.1"
-      },
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/string-width-cjs/node_modules/ansi-regex": {
-      "version": "5.0.1",
-      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
-      "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==",
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/string-width-cjs/node_modules/emoji-regex": {
-      "version": "8.0.0",
-      "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
-      "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A=="
-    },
-    "node_modules/string-width-cjs/node_modules/strip-ansi": {
-      "version": "6.0.1",
-      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
-      "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
-      "dependencies": {
-        "ansi-regex": "^5.0.1"
-      },
-      "engines": {
-        "node": ">=8"
-      }
-    },
     "node_modules/string.prototype.matchall": {
       "version": "4.0.12",
       "resolved": "https://registry.npmjs.org/string.prototype.matchall/-/string.prototype.matchall-4.0.12.tgz",
@@ -6724,40 +6641,6 @@
         "node": ">=4"
       }
     },
-    "node_modules/strip-ansi": {
-      "version": "7.2.0",
-      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-7.2.0.tgz",
-      "integrity": "sha512-yDPMNjp4WyfYBkHnjIRLfca1i6KMyGCtsVgoKe/z1+6vukgaENdgGBZt+ZmKPc4gavvEZ5OgHfHdrazhgNyG7w==",
-      "dependencies": {
-        "ansi-regex": "^6.2.2"
-      },
-      "engines": {
-        "node": ">=12"
-      },
-      "funding": {
-        "url": "https://github.com/chalk/strip-ansi?sponsor=1"
-      }
-    },
-    "node_modules/strip-ansi-cjs": {
-      "name": "strip-ansi",
-      "version": "6.0.1",
-      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
-      "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
-      "dependencies": {
-        "ansi-regex": "^5.0.1"
-      },
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/strip-ansi-cjs/node_modules/ansi-regex": {
-      "version": "5.0.1",
-      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
-      "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==",
-      "engines": {
-        "node": ">=8"
-      }
-    },
     "node_modules/strip-comments": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/strip-comments/-/strip-comments-2.0.1.tgz",
@@ -6766,6 +6649,16 @@
         "node": ">=10"
       }
     },
+    "node_modules/style-to-object": {
+      "version": "1.0.14",
+      "resolved": "https://registry.npmjs.org/style-to-object/-/style-to-object-1.0.14.tgz",
+      "integrity": "sha512-LIN7rULI0jBscWQYaSswptyderlarFkjQ+t79nzty8tcIAceVomEVlLzH5VP4Cmsv6MtKhs7qaAiwlcp+Mgaxw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "inline-style-parser": "0.2.7"
+      }
+    },
     "node_modules/sucrase": {
       "version": "3.35.1",
       "resolved": "https://registry.npmjs.org/sucrase/-/sucrase-3.35.1.tgz",
@@ -6798,6 +6691,133 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/svelte": {
+      "version": "5.57.1",
+      "resolved": "https://registry.npmjs.org/svelte/-/svelte-5.57.1.tgz",
+      "integrity": "sha512-Uqj49lWKB+iSSnneuwiYYJ7MZgkB+eXr0LXBhv4uDuAkXqnWmq65Sxflfvp0Lc6MdKjMUxGaeOKWJqz5SNiVIA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@jridgewell/remapping": "^2.3.5",
+        "@jridgewell/sourcemap-codec": "^1.6.0",
+        "@sveltejs/acorn-typescript": "^1.0.13",
+        "@types/estree": "^1.0.9",
+        "acorn": "^8.18.0",
+        "aria-query": "5.3.1",
+        "axobject-query": "^4.1.0",
+        "clsx": "^2.1.1",
+        "devalue": "^5.9.2",
+        "esm-env": "^1.2.1",
+        "esrap": "^2.3.6",
+        "is-reference": "^3.0.3",
+        "locate-character": "^3.0.0",
+        "magic-string": "^0.30.11",
+        "zimmerframe": "^1.1.2"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/svelte-check": {
+      "version": "4.7.6",
+      "resolved": "https://registry.npmjs.org/svelte-check/-/svelte-check-4.7.6.tgz",
+      "integrity": "sha512-t2scM//ZuVbSY/T2w6FSBw1v9s2NEmh/g+sy1lqtosW5ylBV5AF4wFb1Ts9Kf3MbfPDUDJDZ9L436YT0SPTdvw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@jridgewell/trace-mapping": "^0.3.25",
+        "@sveltejs/load-config": "^0.2.3",
+        "chokidar": "^4.0.1",
+        "fdir": "^6.2.0",
+        "picocolors": "^1.0.0",
+        "sade": "^1.7.4"
+      },
+      "bin": {
+        "svelte-check": "bin/svelte-check"
+      },
+      "engines": {
+        "node": ">= 18.0.0"
+      },
+      "peerDependencies": {
+        "svelte": "^4.0.0 || ^5.0.0-next.0",
+        "typescript": "^5.0.0 || ^6.0.0"
+      }
+    },
+    "node_modules/svelte-check/node_modules/chokidar": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-4.0.3.tgz",
+      "integrity": "sha512-Qgzu8kfBvo+cA4962jnP1KkS6Dop5NS6g7R5LFYJr4b8Ub94PPQXUksCw9PvXoeXPRRddRNC5C1JQUR2SMGtnA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "readdirp": "^4.0.1"
+      },
+      "engines": {
+        "node": ">= 14.16.0"
+      },
+      "funding": {
+        "url": "https://paulmillr.com/funding/"
+      }
+    },
+    "node_modules/svelte-check/node_modules/readdirp": {
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-4.1.2.tgz",
+      "integrity": "sha512-GDhwkLfywWL2s6vEjyhri+eXmfH6j1L7JE27WhqLeYzoh/A3DBaYGEj2H/HFZCn/kMfim73FXxEJTw06WtxQwg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 14.18.0"
+      },
+      "funding": {
+        "type": "individual",
+        "url": "https://paulmillr.com/funding/"
+      }
+    },
+    "node_modules/svelte-toolbelt": {
+      "version": "0.10.6",
+      "resolved": "https://registry.npmjs.org/svelte-toolbelt/-/svelte-toolbelt-0.10.6.tgz",
+      "integrity": "sha512-YWuX+RE+CnWYx09yseAe4ZVMM7e7GRFZM6OYWpBKOb++s+SQ8RBIMMe+Bs/CznBMc0QPLjr+vDBxTAkozXsFXQ==",
+      "dev": true,
+      "funding": [
+        "https://github.com/sponsors/huntabyte"
+      ],
+      "dependencies": {
+        "clsx": "^2.1.1",
+        "runed": "^0.35.1",
+        "style-to-object": "^1.0.8"
+      },
+      "engines": {
+        "node": ">=18",
+        "pnpm": ">=8.7.0"
+      },
+      "peerDependencies": {
+        "svelte": "^5.30.2"
+      }
+    },
+    "node_modules/svelte/node_modules/@types/estree": {
+      "version": "1.0.9",
+      "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.9.tgz",
+      "integrity": "sha512-GhdPgy1el4/ImP05X05Uw4cw2/M93BCUmnEvWZNStlCzEKME4Fkk+YpoA5OiHNQmoS7Cafb8Xa3Pya8m1Qrzeg==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/svelte/node_modules/magic-string": {
+      "version": "0.30.21",
+      "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.21.tgz",
+      "integrity": "sha512-vd2F4YUyEXKGcLHoq+TEyCjxueSeHnFxyyjNp80yg0XV4vUhnDer/lvvlqM/arB5bXQN5K2/3oinyCRyx8T2CQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@jridgewell/sourcemap-codec": "^1.5.5"
+      }
+    },
+    "node_modules/tabbable": {
+      "version": "6.5.0",
+      "resolved": "https://registry.npmjs.org/tabbable/-/tabbable-6.5.0.tgz",
+      "integrity": "sha512-wieBHXygIm7OyQOu5hQlkk62/WyCFYGlWg7L6/ZCUZwx0o398Zkn4pVmMyfYhfMG8kGrj/Krt8eIk6UKC6VzwA==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/tailwind-merge": {
       "version": "3.5.0",
       "resolved": "https://registry.npmjs.org/tailwind-merge/-/tailwind-merge-3.5.0.tgz",
@@ -6917,13 +6937,34 @@
         "node": ">=0.8"
       }
     },
+    "node_modules/tinybench": {
+      "version": "6.2.0",
+      "resolved": "https://registry.npmjs.org/tinybench/-/tinybench-6.2.0.tgz",
+      "integrity": "sha512-78U2TlB2CnVenajOFzf3BKSm0J6oz5L0NV7g32LCPccvYc0lbWvys4d3uUUCS2B1N8PAf2+aekR8i1KbC3HO7Q==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=20.0.0"
+      }
+    },
+    "node_modules/tinyexec": {
+      "version": "1.3.1",
+      "resolved": "https://registry.npmjs.org/tinyexec/-/tinyexec-1.3.1.tgz",
+      "integrity": "sha512-GCvB3aoys96IuDFBMcTB46JOR6mdMtAToqwiW8JlWhsoh1mhHi/xn9ss/Dg7N555GiJyEt2qzoG/NHCwM6h1EA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      }
+    },
     "node_modules/tinyglobby": {
-      "version": "0.2.15",
-      "resolved": "https://registry.npmjs.org/tinyglobby/-/tinyglobby-0.2.15.tgz",
-      "integrity": "sha512-j2Zq4NyQYG5XMST4cbs02Ak8iJUdxRM0XI5QyxXuZOzKOINmWurp3smXu3y5wDcJrptwpSjgXHzIQxR0omXljQ==",
+      "version": "0.2.17",
+      "resolved": "https://registry.npmjs.org/tinyglobby/-/tinyglobby-0.2.17.tgz",
+      "integrity": "sha512-wXR/dYpcqKmfWpEdZjiKJOwCNFndD0DMnrW/cYjVGttEkBfVgcLFHoNrlj47mjOVic9yyNu65alsgF4NQyTa2g==",
+      "license": "MIT",
       "dependencies": {
         "fdir": "^6.5.0",
-        "picomatch": "^4.0.3"
+        "picomatch": "^4.0.4"
       },
       "engines": {
         "node": ">=12.0.0"
@@ -6961,6 +7002,483 @@
       "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.8.1.tgz",
       "integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w=="
     },
+    "node_modules/tsx": {
+      "version": "4.23.13",
+      "resolved": "https://registry.npmjs.org/tsx/-/tsx-4.23.13.tgz",
+      "integrity": "sha512-BL5MGkRln6aDYhb0xbQlEAGw743BaZYWdbWtdJOBriYJboKgUUYCadFp2/FpBBZquBC/ezNBn7wMMPx7FDZUDw==",
+      "devOptional": true,
+      "license": "MIT",
+      "dependencies": {
+        "esbuild": "~0.28.0"
+      },
+      "bin": {
+        "tsx": "dist/cli.mjs"
+      },
+      "engines": {
+        "node": ">=18.0.0"
+      },
+      "optionalDependencies": {
+        "fsevents": "~2.3.3"
+      }
+    },
+    "node_modules/tsx/node_modules/@esbuild/aix-ppc64": {
+      "version": "0.28.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.28.2.tgz",
+      "integrity": "sha512-XExcO+dvLKvVtNTibSTBej1NCAbaGhWn9Ww1ZPx80qsahhPFe/8jgWP0IchNe0F3HwkU7n8ejhH8bjonqht8mQ==",
+      "cpu": [
+        "ppc64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "aix"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/tsx/node_modules/@esbuild/android-arm": {
+      "version": "0.28.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.28.2.tgz",
+      "integrity": "sha512-kXXoiPVVGQcnIYGOeaovwOURpniDBpSq4A03qkQ+BMQqtGG6HYap3xne9C1O1yo4TR3qxlCX5IqqmX6fFo2Lqg==",
+      "cpu": [
+        "arm"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/tsx/node_modules/@esbuild/android-arm64": {
+      "version": "0.28.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/android-arm64/-/android-arm64-0.28.2.tgz",
+      "integrity": "sha512-5YfKeeI8qWfBZIX+u2xZC3Zlb3Os/gLS2sbEKM+I4ZOcsWmHS2WLysCcQZDAFRslDUU5Oiq44gf6PYN1vGwG5A==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/tsx/node_modules/@esbuild/android-x64": {
+      "version": "0.28.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/android-x64/-/android-x64-0.28.2.tgz",
+      "integrity": "sha512-O387ite7SzUyCcy3JQX4P4bLtEA7bLLkx+esve5JHnyYfNTxcVpXZo9jhdB0lTKN44gztELTdU7nS8Nr16Fs1Q==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/tsx/node_modules/@esbuild/darwin-arm64": {
+      "version": "0.28.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/darwin-arm64/-/darwin-arm64-0.28.2.tgz",
+      "integrity": "sha512-n4KqkOQrraxHJcgjM1RvwbigfQKIKJVpM7xp+KsxiyUSrRdIXnt73VhrPAx0fV44hgfmIVKjxMN9J1t5jySVkw==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/tsx/node_modules/@esbuild/darwin-x64": {
+      "version": "0.28.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/darwin-x64/-/darwin-x64-0.28.2.tgz",
+      "integrity": "sha512-uq6suIWYP37qzGddBKPw5QEQPi6HiLGsO7UmkpfyaYNQ3D+rN6w6WfwH+nuqcGXWvawGwxOEroO4YGnFh95azw==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/tsx/node_modules/@esbuild/freebsd-arm64": {
+      "version": "0.28.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/freebsd-arm64/-/freebsd-arm64-0.28.2.tgz",
+      "integrity": "sha512-n+I0BTSRIoy+d6RPKnEVwql5UwBJolytvY4mAOIEJorKlqgPII8ix6slVVrfZ5Tnj7glIZvloylbB/EJPMWEXw==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/tsx/node_modules/@esbuild/freebsd-x64": {
+      "version": "0.28.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/freebsd-x64/-/freebsd-x64-0.28.2.tgz",
+      "integrity": "sha512-78XJTJkvPs0kz2w61301PJjXl4g7q3JqiYMZ/M/yVI73EHBrCRTgkhu9oqG7vPqq+a/yadEW8aD+agKlk5xrmg==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/tsx/node_modules/@esbuild/linux-arm": {
+      "version": "0.28.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-arm/-/linux-arm-0.28.2.tgz",
+      "integrity": "sha512-XlDnu2q5yoqems+xay6wSAcg9DDD7K9RLKZEBOMZm3ckNpJBvOX20tSfby8KfrrhINDyv9V2YVZKY/SpoGJI8w==",
+      "cpu": [
+        "arm"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/tsx/node_modules/@esbuild/linux-arm64": {
+      "version": "0.28.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-arm64/-/linux-arm64-0.28.2.tgz",
+      "integrity": "sha512-pW4AC0P3it8c7do9MVM4p51FzHzdM/TZrerurgRcHJ2WTa1VQ1CIq18xncfpBJw4ojkiZZrKW2yIBWBP92j6Ug==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/tsx/node_modules/@esbuild/linux-ia32": {
+      "version": "0.28.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-ia32/-/linux-ia32-0.28.2.tgz",
+      "integrity": "sha512-CYbnj78HsIeA+DhgUKgFCfvNsTHFhMMrinUrMZpDXJXKN8T3XViTZ/+wtHeVxEWY8ewSzTFN+nRmSwO2tZaLUQ==",
+      "cpu": [
+        "ia32"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/tsx/node_modules/@esbuild/linux-loong64": {
+      "version": "0.28.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-loong64/-/linux-loong64-0.28.2.tgz",
+      "integrity": "sha512-buwkd8nsph4R+ajRvw0qM5Hja/TXQow3ptzWO2EbG/cqcIkHloRrdlBtQlshyYGTNFvfkfJ5tpPLVkY4DtsPfQ==",
+      "cpu": [
+        "loong64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/tsx/node_modules/@esbuild/linux-mips64el": {
+      "version": "0.28.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-mips64el/-/linux-mips64el-0.28.2.tgz",
+      "integrity": "sha512-ZVykbDyk7519VwiNb9Lcj9m8XM6v5V9uKPvrEMkkEedVewf+0itkhahp4HDpgERXhwLRpWFypsGbG/J8s0QjJA==",
+      "cpu": [
+        "mips64el"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/tsx/node_modules/@esbuild/linux-ppc64": {
+      "version": "0.28.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-ppc64/-/linux-ppc64-0.28.2.tgz",
+      "integrity": "sha512-CAXl+Dtd9UUuJd8pKKdwh6MLm3MUMiqMPmhZ3tTSXPqfyQ3vDl6R5hZdZ/kYojK4ofXtdfSv1tFq8XzWx3heNQ==",
+      "cpu": [
+        "ppc64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/tsx/node_modules/@esbuild/linux-riscv64": {
+      "version": "0.28.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-riscv64/-/linux-riscv64-0.28.2.tgz",
+      "integrity": "sha512-GeXCej4IQtU1B+QlDV8W/RRvbzI3O/Stss+/bCXv4lZls5WGRtu2a+3JkA3i4qIUlMXpcHebWpF8AkJhATowuA==",
+      "cpu": [
+        "riscv64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/tsx/node_modules/@esbuild/linux-s390x": {
+      "version": "0.28.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-s390x/-/linux-s390x-0.28.2.tgz",
+      "integrity": "sha512-3H1weTYZPxt/WOhByszQZybS9w5lKzUn1FDMsgEChbHWQwHYQQRfBxgCcZvPhjHfKyJjIievvMmEUawJrdY9Dg==",
+      "cpu": [
+        "s390x"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/tsx/node_modules/@esbuild/linux-x64": {
+      "version": "0.28.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-x64/-/linux-x64-0.28.2.tgz",
+      "integrity": "sha512-4xTZr1FUmSoQW4XIWmit3tzQrUTZM+N3P0XV8xROKYF50XfI7xeO90+1bZvNwxIufQ9hDQVRJH5YhgPVF8A/HQ==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/tsx/node_modules/@esbuild/netbsd-arm64": {
+      "version": "0.28.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/netbsd-arm64/-/netbsd-arm64-0.28.2.tgz",
+      "integrity": "sha512-sSATRjPeDBg3pdgHoQfoYBob11Kk1FGa9lui5RIHZCoCkJa9QKlvl3/vKz2usCmYYjs7ymJR/2Nnsqe+Hjt5nw==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "netbsd"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/tsx/node_modules/@esbuild/netbsd-x64": {
+      "version": "0.28.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/netbsd-x64/-/netbsd-x64-0.28.2.tgz",
+      "integrity": "sha512-lqnzCV+mM0gIADaKihiCg6ifgfU2L3h5E33rNQBN1Y4MaVGnzryzmvvf7UHxprpQdE8hpqLolJ9Rl+SkIRDpyw==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "netbsd"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/tsx/node_modules/@esbuild/openbsd-arm64": {
+      "version": "0.28.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/openbsd-arm64/-/openbsd-arm64-0.28.2.tgz",
+      "integrity": "sha512-AL2qJILH7lNjrDmCQDvdxMfAUIv8KMNZOvrwAQ8i8//ntL9FflhOyMJ8OZSMBb8/AWXe3/5v5S20y3zCoZWKoQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "openbsd"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/tsx/node_modules/@esbuild/openbsd-x64": {
+      "version": "0.28.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/openbsd-x64/-/openbsd-x64-0.28.2.tgz",
+      "integrity": "sha512-QtiuPytchRyC4rwUKhexJdQKvDuZ6hWloi3igqPQNUJCS1/v9EiO3UTOXR6A3FoMo4fnAKbWJdqaIwhOzh8qEw==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "openbsd"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/tsx/node_modules/@esbuild/openharmony-arm64": {
+      "version": "0.28.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/openharmony-arm64/-/openharmony-arm64-0.28.2.tgz",
+      "integrity": "sha512-WkhYDmpTjLvGlScA1rwjRUmhl4k8oXR3cIbtqWmELgU/dFeHHlEllxDvdWcNJV9rbzCexB5vz8gtNewWLgCT7Q==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "openharmony"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/tsx/node_modules/@esbuild/sunos-x64": {
+      "version": "0.28.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/sunos-x64/-/sunos-x64-0.28.2.tgz",
+      "integrity": "sha512-GPMSkTOtMnv2U2F8gxe4Io6qmVs+YKyp832Etqqxr0hFngmXQ3rzwytelm3GIn7T4VviRUlf3sOgBOiTdvaf7g==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "sunos"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/tsx/node_modules/@esbuild/win32-arm64": {
+      "version": "0.28.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/win32-arm64/-/win32-arm64-0.28.2.tgz",
+      "integrity": "sha512-PIhhEkE9uPBleRBrQEJpUn7MBnibZzbGzYWPmY3x+YoVg/95zbjB4CxPPOQ8l5tYYM4mMaCthF8/1DIfBQQyWQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/tsx/node_modules/@esbuild/win32-ia32": {
+      "version": "0.28.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/win32-ia32/-/win32-ia32-0.28.2.tgz",
+      "integrity": "sha512-YmJbfTlvU7Sdn9BB+4PRES4oB6pxgS37MAONj+hBr/cpXS1aBPKXxNnDbu+QCWPj0o9dgyxeq79g6c5P8KeuYA==",
+      "cpu": [
+        "ia32"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/tsx/node_modules/@esbuild/win32-x64": {
+      "version": "0.28.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/win32-x64/-/win32-x64-0.28.2.tgz",
+      "integrity": "sha512-5ebpxr3nWMzrL/rnUI755Jkuee0bHL/Gq0WTF9lvcpv73wAp5eu8MfBUgWK9bhWvZjj7yX8etf/8tI8Ney695g==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/tsx/node_modules/esbuild": {
+      "version": "0.28.2",
+      "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.28.2.tgz",
+      "integrity": "sha512-HKVLS8dvII+xoKW9kmqxbRKrnWEXfJJr/FZhhJmiqIB0e053QNYFqOBouTMO/k5sID4MvCiUCvv8b9M4h32wIA==",
+      "devOptional": true,
+      "hasInstallScript": true,
+      "license": "MIT",
+      "bin": {
+        "esbuild": "bin/esbuild"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "optionalDependencies": {
+        "@esbuild/aix-ppc64": "0.28.2",
+        "@esbuild/android-arm": "0.28.2",
+        "@esbuild/android-arm64": "0.28.2",
+        "@esbuild/android-x64": "0.28.2",
+        "@esbuild/darwin-arm64": "0.28.2",
+        "@esbuild/darwin-x64": "0.28.2",
+        "@esbuild/freebsd-arm64": "0.28.2",
+        "@esbuild/freebsd-x64": "0.28.2",
+        "@esbuild/linux-arm": "0.28.2",
+        "@esbuild/linux-arm64": "0.28.2",
+        "@esbuild/linux-ia32": "0.28.2",
+        "@esbuild/linux-loong64": "0.28.2",
+        "@esbuild/linux-mips64el": "0.28.2",
+        "@esbuild/linux-ppc64": "0.28.2",
+        "@esbuild/linux-riscv64": "0.28.2",
+        "@esbuild/linux-s390x": "0.28.2",
+        "@esbuild/linux-x64": "0.28.2",
+        "@esbuild/netbsd-arm64": "0.28.2",
+        "@esbuild/netbsd-x64": "0.28.2",
+        "@esbuild/openbsd-arm64": "0.28.2",
+        "@esbuild/openbsd-x64": "0.28.2",
+        "@esbuild/openharmony-arm64": "0.28.2",
+        "@esbuild/sunos-x64": "0.28.2",
+        "@esbuild/win32-arm64": "0.28.2",
+        "@esbuild/win32-ia32": "0.28.2",
+        "@esbuild/win32-x64": "0.28.2"
+      }
+    },
     "node_modules/type-fest": {
       "version": "0.16.0",
       "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.16.0.tgz",
@@ -7075,7 +7593,8 @@
     "node_modules/undici-types": {
       "version": "6.21.0",
       "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-6.21.0.tgz",
-      "integrity": "sha512-iwDZqg0QAGrg9Rav5H4n0M64c3mkR59cJ6wQp+7C4nI0gsmExaedaYLNO44eT4AtBBwjbTiGPMlt2Md0T9H9JQ=="
+      "integrity": "sha512-iwDZqg0QAGrg9Rav5H4n0M64c3mkR59cJ6wQp+7C4nI0gsmExaedaYLNO44eT4AtBBwjbTiGPMlt2Md0T9H9JQ==",
+      "devOptional": true
     },
     "node_modules/unicode-canonical-property-names-ecmascript": {
       "version": "2.0.1",
@@ -7318,12 +7837,117 @@
         }
       }
     },
-    "node_modules/web-streams-polyfill": {
-      "version": "3.3.3",
-      "resolved": "https://registry.npmjs.org/web-streams-polyfill/-/web-streams-polyfill-3.3.3.tgz",
-      "integrity": "sha512-d2JWLCivmZYTSIoge9MsgFCZrt571BikcWGYkjC1khllbTeDlGqZ2D8vD8E/lJa8WGWbb7Plm8/XJYV7IJHZZw==",
+    "node_modules/vitefu": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/vitefu/-/vitefu-1.1.3.tgz",
+      "integrity": "sha512-ub4okH7Z5KLjb6hDyjqrGXqWtWvoYdU3IGm/NorpgHncKoLTCfRIbvlhBm7r0YstIaQRYlp4yEbFqDcKSzXSSg==",
+      "dev": true,
+      "license": "MIT",
+      "workspaces": [
+        "tests/deps/*",
+        "tests/projects/*",
+        "tests/projects/workspace/packages/*"
+      ],
+      "peerDependencies": {
+        "vite": "^3.0.0 || ^4.0.0 || ^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0"
+      },
+      "peerDependenciesMeta": {
+        "vite": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/vitest": {
+      "version": "5.0.2",
+      "resolved": "https://registry.npmjs.org/vitest/-/vitest-5.0.2.tgz",
+      "integrity": "sha512-7MQrx9pDv5aHiUcovIb/70Ys3tgtkUVgCtledvKdCmEO+/1Dicq5ZqoSxOW034m03oqC+oHOKui2dM6qtMLoJg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/chai": "^5.2.2",
+        "@vitest/mocker": "5.0.2",
+        "chai": "^6.2.2",
+        "es-module-lexer": "^2.3.2",
+        "expect-type": "^1.4.0",
+        "magic-string": "^1.2.3",
+        "obug": "^2.1.4",
+        "picomatch": "^4.0.7",
+        "std-env": "^4.2.0",
+        "tinybench": "^6.1.4",
+        "tinyexec": "^1.3.0",
+        "tinyglobby": "^0.2.17",
+        "why-is-node-running": "^3.2.1"
+      },
+      "bin": {
+        "vitest": "vitest.mjs"
+      },
       "engines": {
-        "node": ">= 8"
+        "node": "^22.12.0 || ^24.0.0 || >=26.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/vitest"
+      },
+      "peerDependencies": {
+        "@edge-runtime/vm": "*",
+        "@opentelemetry/api": "^1.9.0",
+        "@types/node": "^22.0.0 || >=24.0.0",
+        "@vitest/browser-playwright": "5.0.2",
+        "@vitest/browser-preview": "5.0.2",
+        "@vitest/browser-webdriverio": "^5.0.0-beta.5 || >=5.0.0",
+        "@vitest/coverage-istanbul": "5.0.2",
+        "@vitest/coverage-v8": "5.0.2",
+        "@vitest/ui": "5.0.2",
+        "happy-dom": "*",
+        "jsdom": "*",
+        "vite": "^6.4.0 || ^7.0.0 || ^8.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@edge-runtime/vm": {
+          "optional": true
+        },
+        "@opentelemetry/api": {
+          "optional": true
+        },
+        "@types/node": {
+          "optional": true
+        },
+        "@vitest/browser-playwright": {
+          "optional": true
+        },
+        "@vitest/browser-preview": {
+          "optional": true
+        },
+        "@vitest/browser-webdriverio": {
+          "optional": true
+        },
+        "@vitest/coverage-istanbul": {
+          "optional": true
+        },
+        "@vitest/coverage-v8": {
+          "optional": true
+        },
+        "@vitest/ui": {
+          "optional": true
+        },
+        "happy-dom": {
+          "optional": true
+        },
+        "jsdom": {
+          "optional": true
+        },
+        "vite": {
+          "optional": false
+        }
+      }
+    },
+    "node_modules/vitest/node_modules/magic-string": {
+      "version": "1.4.2",
+      "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-1.4.2.tgz",
+      "integrity": "sha512-vG+rjFRj1PqdIBozIxAGMjPlOhaVe+GXpbttY/iSK7rGcJRMlwNJO7dcUwmUqkymsFLJiNGI06t4D7Fr7yRC9g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@jridgewell/sourcemap-codec": "^1.6.0"
       }
     },
     "node_modules/webidl-conversions": {
@@ -7436,6 +8060,19 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/why-is-node-running": {
+      "version": "3.2.2",
+      "resolved": "https://registry.npmjs.org/why-is-node-running/-/why-is-node-running-3.2.2.tgz",
+      "integrity": "sha512-NKUzAelcoCXhXL4dJzKIwXeR8iEVqsA0Lq6Vnd0UXvgaKbzVo4ZTHROF2Jidrv+SgxOQ03fMinnNhzZATxOD3A==",
+      "dev": true,
+      "license": "MIT",
+      "bin": {
+        "why-is-node-running": "cli.js"
+      },
+      "engines": {
+        "node": ">=20.11"
+      }
+    },
     "node_modules/workbox-background-sync": {
       "version": "7.4.0",
       "resolved": "https://registry.npmjs.org/workbox-background-sync/-/workbox-background-sync-7.4.0.tgz",
@@ -7808,114 +8445,17 @@
         "workbox-core": "7.4.0"
       }
     },
-    "node_modules/wrap-ansi": {
-      "version": "8.1.0",
-      "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-8.1.0.tgz",
-      "integrity": "sha512-si7QWI6zUMq56bESFvagtmzMdGOtoxfR+Sez11Mobfc7tm+VkUckk9bW2UeffTGVUbOksxmSw0AA2gs8g71NCQ==",
-      "dependencies": {
-        "ansi-styles": "^6.1.0",
-        "string-width": "^5.0.1",
-        "strip-ansi": "^7.0.1"
-      },
-      "engines": {
-        "node": ">=12"
-      },
-      "funding": {
-        "url": "https://github.com/chalk/wrap-ansi?sponsor=1"
-      }
-    },
-    "node_modules/wrap-ansi-cjs": {
-      "name": "wrap-ansi",
-      "version": "7.0.0",
-      "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-7.0.0.tgz",
-      "integrity": "sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==",
-      "dependencies": {
-        "ansi-styles": "^4.0.0",
-        "string-width": "^4.1.0",
-        "strip-ansi": "^6.0.0"
-      },
-      "engines": {
-        "node": ">=10"
-      },
-      "funding": {
-        "url": "https://github.com/chalk/wrap-ansi?sponsor=1"
-      }
-    },
-    "node_modules/wrap-ansi-cjs/node_modules/ansi-regex": {
-      "version": "5.0.1",
-      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
-      "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==",
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/wrap-ansi-cjs/node_modules/ansi-styles": {
-      "version": "4.3.0",
-      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
-      "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
-      "dependencies": {
-        "color-convert": "^2.0.1"
-      },
-      "engines": {
-        "node": ">=8"
-      },
-      "funding": {
-        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
-      }
-    },
-    "node_modules/wrap-ansi-cjs/node_modules/emoji-regex": {
-      "version": "8.0.0",
-      "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
-      "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A=="
-    },
-    "node_modules/wrap-ansi-cjs/node_modules/string-width": {
-      "version": "4.2.3",
-      "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
-      "integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
-      "dependencies": {
-        "emoji-regex": "^8.0.0",
-        "is-fullwidth-code-point": "^3.0.0",
-        "strip-ansi": "^6.0.1"
-      },
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/wrap-ansi-cjs/node_modules/strip-ansi": {
-      "version": "6.0.1",
-      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
-      "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
-      "dependencies": {
-        "ansi-regex": "^5.0.1"
-      },
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/ws": {
-      "version": "8.19.0",
-      "resolved": "https://registry.npmjs.org/ws/-/ws-8.19.0.tgz",
-      "integrity": "sha512-blAT2mjOEIi0ZzruJfIhb3nps74PRWTCz1IjglWEEpQl5XS/UNama6u2/rjFkDDouqr4L67ry+1aGIALViWjDg==",
-      "engines": {
-        "node": ">=10.0.0"
-      },
-      "peerDependencies": {
-        "bufferutil": "^4.0.1",
-        "utf-8-validate": ">=5.0.2"
-      },
-      "peerDependenciesMeta": {
-        "bufferutil": {
-          "optional": true
-        },
-        "utf-8-validate": {
-          "optional": true
-        }
-      }
-    },
     "node_modules/yallist": {
       "version": "3.1.1",
       "resolved": "https://registry.npmjs.org/yallist/-/yallist-3.1.1.tgz",
       "integrity": "sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g=="
+    },
+    "node_modules/zimmerframe": {
+      "version": "1.1.5",
+      "resolved": "https://registry.npmjs.org/zimmerframe/-/zimmerframe-1.1.5.tgz",
+      "integrity": "sha512-msJxIvYDYcoNL+PJsu+7qmpDWsYmAxTY+2TNYXXF0hzBzBk0BMecOqDOG/EckUoKCuKwObfbugIl8QpqHDXeFA==",
+      "dev": true,
+      "license": "MIT"
     }
   }
 }
diff --git a/package.json b/package.json
index acf4505..825d598 100644
--- a/package.json
+++ b/package.json
@@ -13,10 +13,14 @@
     "version:minor": "npm version minor --no-git-tag-version",
     "version:major": "npm version major --no-git-tag-version",
     "preview": "vite preview",
-    "lint": "tsc --noEmit"
+    "lint": "tsc --noEmit",
+    "test": "vitest run",
+    "test:e2e": "playwright test",
+    "gallery:snapshots": "node scripts/package-snapshot-gallery.mjs",
+    "validate:scenarios": "tsx scripts/validate-scenarios.ts",
+    "simulate:session": "tsx scripts/simulate-cbt-session.ts"
   },
   "dependencies": {
-    "@google/genai": "^1.33.0",
     "@radix-ui/react-dialog": "^1.1.15",
     "@radix-ui/react-label": "^2.1.8",
     "@radix-ui/react-scroll-area": "^1.2.10",
@@ -42,12 +46,21 @@
     "workbox-strategies": "^7.4.0"
   },
   "devDependencies": {
+    "@lucide/svelte": "^1.48.0",
+    "@playwright/test": "^1.63.0",
+    "@sveltejs/vite-plugin-svelte": "^5.1.1",
     "@types/node": "^22.19.15",
     "@vitejs/plugin-react": "^5.0.0",
     "autoprefixer": "^10.4.27",
+    "bits-ui": "^2.19.3",
+    "lucide-svelte": "^1.0.1",
     "postcss": "^8.5.8",
+    "svelte": "^5.57.1",
+    "svelte-check": "^4.7.6",
     "tailwindcss": "^3.4.19",
+    "tsx": "^4.23.13",
     "typescript": "~5.8.2",
-    "vite": "^6.2.0"
+    "vite": "^6.2.0",
+    "vitest": "^5.0.2"
   }
-}
\ No newline at end of file
+}
diff --git a/playwright.config.ts b/playwright.config.ts
new file mode 100644
index 0000000..19d741d
--- /dev/null
+++ b/playwright.config.ts
@@ -0,0 +1,55 @@
+import { defineConfig, devices } from '@playwright/test';
+
+export default defineConfig({
+  testDir: './tests/e2e',
+  timeout: 30 * 1000,
+  expect: {
+    timeout: 5000
+  },
+  fullyParallel: false,
+  forbidOnly: !!process.env.CI,
+  retries: process.env.CI ? 2 : 0,
+  workers: 1,
+  reporter: [
+    ['list'],
+    ['html', { outputFolder: 'playwright-report', open: 'never' }]
+  ],
+  use: {
+    baseURL: 'http://localhost:3000',
+    trace: 'on-first-retry',
+    video: 'off',
+    screenshot: 'off'
+  },
+  projects: [
+    {
+      name: 'desktop-chrome',
+      use: {
+        ...devices['Desktop Chrome'],
+        viewport: { width: 1440, height: 900 }
+      }
+    },
+    {
+      name: 'ipad-portrait',
+      use: {
+        viewport: { width: 834, height: 1194 },
+        deviceScaleFactor: 2,
+        isMobile: true,
+        hasTouch: true,
+        userAgent:
+          'Mozilla/5.0 (iPad; CPU OS 17_0 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/17.0 Mobile/15E148 Safari/604.1'
+      }
+    },
+    {
+      name: 'mobile-iphone',
+      use: {
+        ...devices['iPhone 14']
+      }
+    }
+  ],
+  webServer: {
+    command: 'npm run dev -- --port 3000',
+    url: 'http://localhost:3000',
+    reuseExistingServer: !process.env.CI,
+    timeout: 120 * 1000
+  }
+});
diff --git a/scripts/package-snapshot-gallery.mjs b/scripts/package-snapshot-gallery.mjs
new file mode 100644
index 0000000..c96511d
--- /dev/null
+++ b/scripts/package-snapshot-gallery.mjs
@@ -0,0 +1,144 @@
+#!/usr/bin/env node
+
+/**
+ * Playwright Visual Snapshot Review Gallery Packager
+ * 
+ * Scans docs/screenshots/<viewport>/*.png, generates an interactive,
+ * responsive HTML review gallery with viewport filters, comparison matrices,
+ * and high-DPI lightbox inspection.
+ */
+
+import fs from 'fs';
+import path from 'path';
+
+const screenshotsDir = path.resolve(process.cwd(), 'docs/screenshots');
+const outputHtml = path.join(screenshotsDir, 'index.html');
+
+if (!fs.existsSync(screenshotsDir)) {
+  console.log(`[Snapshot Gallery] No screenshots directory found at ${screenshotsDir}. Skipping gallery build.`);
+  process.exit(0);
+}
+
+const entries = [];
+const viewports = fs.readdirSync(screenshotsDir, { withFileTypes: true })
+  .filter(d => d.isDirectory())
+  .map(d => d.name);
+
+for (const vp of viewports) {
+  const vpDir = path.join(screenshotsDir, vp);
+  const files = fs.readdirSync(vpDir).filter(f => f.endsWith('.png'));
+
+  for (const file of files) {
+    const filePath = path.join(vpDir, file);
+    const relPath = `${vp}/${file}`;
+    const stats = fs.statSync(filePath);
+
+    entries.push({
+      viewport: vp,
+      fileName: file,
+      title: file.replace(/^\d+-/, '').replace(/\.png$/, '').replace(/-/g, ' ').toUpperCase(),
+      relPath,
+      sizeKb: Math.round(stats.size / 1024)
+    });
+  }
+}
+
+entries.sort((a, b) => a.fileName.localeCompare(b.fileName));
+
+const htmlContent = `<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Cognitive Clarity — Playwright Visual Snapshot Gallery</title>
+  <script src="https://cdn.tailwindcss.com"></script>
+  <style>
+    body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; }
+    .gallery-img { cursor: zoom-in; transition: transform 0.2s ease; }
+    .gallery-img:hover { transform: scale(1.01); }
+  </style>
+</head>
+<body class="bg-slate-950 text-slate-100 min-h-screen">
+  <header class="border-b border-slate-800 bg-slate-900/60 backdrop-blur-md sticky top-0 z-40 px-6 py-4">
+    <div class="max-w-7xl mx-auto flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4">
+      <div>
+        <h1 class="text-xl font-bold tracking-tight text-white flex items-center gap-2">
+          <span class="w-3 h-3 rounded-full bg-teal-400 animate-pulse"></span>
+          Cognitive Clarity — Visual Snapshot Gallery
+        </h1>
+        <p class="text-xs text-slate-400 mt-0.5">
+          ${entries.length} snapshots across ${viewports.length} viewports (${viewports.join(', ')})
+        </p>
+      </div>
+      <div class="flex flex-wrap gap-2" id="filter-buttons">
+        <button onclick="filterViewport('all')" class="vp-btn px-3 py-1.5 rounded-lg text-xs font-bold uppercase tracking-wider bg-teal-600 text-white" data-vp="all">All</button>
+        ${viewports.map(vp => `<button onclick="filterViewport('${vp}')" class="vp-btn px-3 py-1.5 rounded-lg text-xs font-bold uppercase tracking-wider bg-slate-800 text-slate-300 hover:bg-slate-700" data-vp="${vp}">${vp}</button>`).join('')}
+      </div>
+    </div>
+  </header>
+
+  <main class="max-w-7xl mx-auto px-6 py-8">
+    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6" id="gallery-grid">
+      ${entries.map(e => `
+        <div class="gallery-card bg-slate-900 border border-slate-800 rounded-2xl overflow-hidden shadow-lg flex flex-col" data-viewport="${e.viewport}">
+          <div class="p-3 border-b border-slate-800 flex justify-between items-center text-xs">
+            <span class="font-bold text-slate-200">${e.title}</span>
+            <span class="px-2 py-0.5 rounded text-[10px] font-mono uppercase bg-slate-800 text-teal-400">${e.viewport}</span>
+          </div>
+          <div class="bg-black/40 flex-grow flex items-center justify-center p-2">
+            <img src="${e.relPath}" alt="${e.title}" class="gallery-img max-h-72 w-auto object-contain rounded" onclick="openLightbox('${e.relPath}', '${e.title}')">
+          </div>
+          <div class="p-2.5 bg-slate-900/80 border-t border-slate-800 flex justify-between items-center text-[10px] text-slate-500 font-mono">
+            <span>${e.fileName}</span>
+            <span>${e.sizeKb} KB</span>
+          </div>
+        </div>
+      `).join('')}
+    </div>
+  </main>
+
+  <!-- Lightbox Modal -->
+  <div id="lightbox" class="fixed inset-0 z-50 bg-black/90 backdrop-blur-md hidden flex flex-col items-center justify-center p-4" onclick="closeLightbox()">
+    <div class="max-w-6xl max-h-[90vh] flex flex-col items-center" onclick="event.stopPropagation()">
+      <div class="flex justify-between items-center w-full mb-3 text-white">
+        <h3 id="lightbox-title" class="font-bold text-base"></h3>
+        <button onclick="closeLightbox()" class="text-slate-400 hover:text-white px-3 py-1 bg-white/10 rounded-lg text-sm">Close ✕</button>
+      </div>
+      <img id="lightbox-img" src="" class="max-h-[80vh] max-w-full rounded-xl shadow-2xl border border-white/10 object-contain">
+    </div>
+  </div>
+
+  <script>
+    function filterViewport(vp) {
+      document.querySelectorAll('.vp-btn').forEach(btn => {
+        if (btn.dataset.vp === vp) {
+          btn.className = 'vp-btn px-3 py-1.5 rounded-lg text-xs font-bold uppercase tracking-wider bg-teal-600 text-white';
+        } else {
+          btn.className = 'vp-btn px-3 py-1.5 rounded-lg text-xs font-bold uppercase tracking-wider bg-slate-800 text-slate-300 hover:bg-slate-700';
+        }
+      });
+
+      document.querySelectorAll('.gallery-card').forEach(card => {
+        if (vp === 'all' || card.dataset.viewport === vp) {
+          card.style.display = 'flex';
+        } else {
+          card.style.display = 'none';
+        }
+      });
+    }
+
+    function openLightbox(src, title) {
+      document.getElementById('lightbox-img').src = src;
+      document.getElementById('lightbox-title').innerText = title;
+      document.getElementById('lightbox').classList.remove('hidden');
+    }
+
+    function closeLightbox() {
+      document.getElementById('lightbox').classList.add('hidden');
+    }
+  </script>
+</body>
+</html>`;
+
+fs.writeFileSync(outputHtml, htmlContent, 'utf-8');
+console.log(`[Snapshot Gallery] Successfully generated review gallery at ${outputHtml} with ${entries.length} snapshots.`);
diff --git a/scripts/simulate-cbt-session.ts b/scripts/simulate-cbt-session.ts
new file mode 100644
index 0000000..9bbc8ad
--- /dev/null
+++ b/scripts/simulate-cbt-session.ts
@@ -0,0 +1,37 @@
+/**
+ * Headless CBT Session Simulation Helper
+ * 
+ * Simulates a multi-turn roleplay dialogue with clinical turn-by-turn evaluation
+ * to test prompt behaviors and scoring rubrics.
+ */
+
+import { SCENARIOS, SYSTEM_ANALYSIS_PROMPT } from '../constants';
+
+interface SimulatedTurn {
+  role: 'user' | 'model';
+  text: string;
+}
+
+export function generateMockDialogue(): SimulatedTurn[] {
+  const scenario = SCENARIOS[0]; // Workplace Critical Review
+  return [
+    { role: 'model', text: scenario.initialMessage },
+    { 
+      role: 'user', 
+      text: "I hear that you're concerned about the deployment delay, Marcus. I want to look at the root cause together so we can fix the pipeline rather than rush into another failure." 
+    },
+    { 
+      role: 'model', 
+      text: "Look, root causes don't satisfy the board. But fine—walk me through why the rollback happened and what you're doing right now to secure the release." 
+    },
+    { 
+      role: 'user', 
+      text: "The schema migration failed because of a missing index under high load. We've added the migration lock and tested it on staging. I will personally supervise the maintenance window at 8 PM." 
+    }
+  ];
+}
+
+console.log('🧪 CBT Simulation Test Harness initialized.');
+console.log(`Loaded scenario: "${SCENARIOS[0].title}"`);
+console.log('Mock dialogue generated for test runs:');
+console.log(JSON.stringify(generateMockDialogue(), null, 2));
diff --git a/scripts/validate-scenarios.ts b/scripts/validate-scenarios.ts
new file mode 100644
index 0000000..7e9f549
--- /dev/null
+++ b/scripts/validate-scenarios.ts
@@ -0,0 +1,119 @@
+/**
+ * Scenario Validation Helper Script
+ * 
+ * Verifies that all built-in and custom CBT scenarios conform to schema rules,
+ * category invariants, and clinical requirements.
+ */
+
+import { SCENARIOS, CBT_GLOSSARY } from '../constants';
+import { Scenario } from '../types';
+
+const VALID_CATEGORIES: Scenario['category'][] = ['Social Anxiety', 'Workplace', 'Relationships', 'Self-Talk'];
+const VALID_DIFFICULTIES: Scenario['difficulty'][] = ['Beginner', 'Intermediate', 'Advanced'];
+
+interface ValidationResult {
+  scenarioId: string;
+  title: string;
+  isValid: boolean;
+  errors: string[];
+  warnings: string[];
+}
+
+export function validateScenario(scenario: Scenario): ValidationResult {
+  const errors: string[] = [];
+  const warnings: string[] = [];
+
+  if (!scenario.id || typeof scenario.id !== 'string') {
+    errors.push('Missing or invalid "id"');
+  }
+
+  if (!scenario.title || scenario.title.trim().length === 0) {
+    errors.push('Missing or empty "title"');
+  }
+
+  if (!scenario.description || scenario.description.trim().length === 0) {
+    errors.push('Missing or empty "description"');
+  }
+
+  if (!VALID_CATEGORIES.includes(scenario.category)) {
+    errors.push(`Invalid category: "${scenario.category}". Expected one of: ${VALID_CATEGORIES.join(', ')}`);
+  }
+
+  if (!VALID_DIFFICULTIES.includes(scenario.difficulty)) {
+    errors.push(`Invalid difficulty: "${scenario.difficulty}". Expected one of: ${VALID_DIFFICULTIES.join(', ')}`);
+  }
+
+  if (!scenario.characterName || scenario.characterName.trim().length === 0) {
+    errors.push('Missing or empty "characterName"');
+  }
+
+  if (!scenario.initialMessage || scenario.initialMessage.trim().length === 0) {
+    errors.push('Missing or empty "initialMessage"');
+  }
+
+  if (!Array.isArray(scenario.cbtFocus) || scenario.cbtFocus.length === 0) {
+    errors.push('cbtFocus must be a non-empty array of strings');
+  } else {
+    // Check against glossary terms
+    const glossaryTerms = CBT_GLOSSARY.map(g => g.term.toLowerCase());
+    scenario.cbtFocus.forEach(focus => {
+      const match = glossaryTerms.some(term => term === focus.toLowerCase() || focus.toLowerCase().includes(term));
+      if (!match) {
+        warnings.push(`CBT Focus item "${focus}" does not directly match any term in the CBT_GLOSSARY.`);
+      }
+    });
+  }
+
+  if (!scenario.systemInstruction || scenario.systemInstruction.trim().length === 0) {
+    errors.push('Missing or empty "systemInstruction"');
+  } else {
+    if (!scenario.systemInstruction.includes('INTERNAL CBT LOGIC') && !scenario.systemInstruction.includes('LOGIC:')) {
+      warnings.push('systemInstruction does not contain explicit "INTERNAL CBT LOGIC" branching rules.');
+    }
+  }
+
+  return {
+    scenarioId: scenario.id,
+    title: scenario.title,
+    isValid: errors.length === 0,
+    errors,
+    warnings,
+  };
+}
+
+function run() {
+  console.log('🔍 Validating Cognitive Clarity Scenario Catalog...\n');
+  let totalErrors = 0;
+  let totalWarnings = 0;
+
+  SCENARIOS.forEach(scenario => {
+    const result = validateScenario(scenario);
+    const statusIcon = result.isValid ? '✅' : '❌';
+    console.log(`${statusIcon} [${scenario.difficulty.toUpperCase()}] ${scenario.title} (${scenario.id})`);
+    
+    if (result.errors.length > 0) {
+      console.log('   Errors:');
+      result.errors.forEach(e => console.log(`     - ❌ ${e}`));
+      totalErrors += result.errors.length;
+    }
+    
+    if (result.warnings.length > 0) {
+      console.log('   Warnings:');
+      result.warnings.forEach(w => console.log(`     - ⚠️  ${w}`));
+      totalWarnings += result.warnings.length;
+    }
+  });
+
+  console.log('\n========================================');
+  console.log(`Summary: ${SCENARIOS.length} scenarios analyzed.`);
+  console.log(`Errors: ${totalErrors}, Warnings: ${totalWarnings}`);
+  console.log('========================================\n');
+
+  if (totalErrors > 0) {
+    process.exit(1);
+  }
+}
+
+if (process.argv[1]?.endsWith('validate-scenarios.ts') || process.argv[1]?.endsWith('validate-scenarios.js')) {
+  run();
+}
diff --git a/services/apiConfig.ts b/services/apiConfig.ts
new file mode 100644
index 0000000..9f8640a
--- /dev/null
+++ b/services/apiConfig.ts
@@ -0,0 +1,100 @@
+/**
+ * API Configuration & Key Resolution Service
+ * 
+ * Provides unified, hierarchical access to OpenRouter API credentials,
+ * supporting browser LocalStorage overrides and environment variables.
+ */
+
+import { UserSettings } from '../types';
+
+const SETTINGS_KEY = 'cognitive-clarity-settings';
+
+export const DEFAULT_OPENROUTER_MODEL = 'google/gemini-3.8-flash';
+export const DEFAULT_SUPERVISOR_MODEL = 'google/gemini-3.8-flash';
+
+export function getStoredUserSettings(): Partial<UserSettings> {
+  try {
+    if (typeof localStorage === 'undefined') {
+      return {};
+    }
+    const saved = localStorage.getItem(SETTINGS_KEY);
+    return saved ? JSON.parse(saved) : {};
+  } catch (e) {
+    console.error("Failed to read user settings from localStorage", e);
+    return {};
+  }
+}
+
+/**
+ * Returns the effective OpenRouter API Key.
+ * Precedence:
+ * 1. Explicit argument
+ * 2. UserSettings in LocalStorage
+ * 3. Vite environment variable (VITE_OPENROUTER_API_KEY)
+ * 4. Node process environment variable (OPENROUTER_API_KEY)
+ */
+export function getOpenRouterApiKey(customKey?: string): string {
+  if (customKey !== undefined) {
+    return customKey.trim();
+  }
+
+  const stored = getStoredUserSettings();
+  if (stored.openRouterApiKey && stored.openRouterApiKey.trim().length > 0) {
+    return stored.openRouterApiKey.trim();
+  }
+
+  if (typeof process !== 'undefined' && process.env?.OPENROUTER_API_KEY !== undefined) {
+    return process.env.OPENROUTER_API_KEY.trim();
+  }
+
+  if (typeof import.meta !== 'undefined' && import.meta.env?.VITE_OPENROUTER_API_KEY) {
+    return (import.meta.env.VITE_OPENROUTER_API_KEY as string).trim();
+  }
+
+  return '';
+}
+
+/**
+ * Checks if a valid OpenRouter API Key is configured.
+ */
+export function hasOpenRouterApiKey(): boolean {
+  return getOpenRouterApiKey().length > 0;
+}
+
+/**
+ * Returns the effective Google Gemini API Key.
+ * Precedence:
+ * 1. Explicit argument
+ * 2. UserSettings in LocalStorage (geminiApiKey)
+ * 3. Node process environment variable (GEMINI_API_KEY / API_KEY / VITE_GEMINI_API_KEY)
+ * 4. Vite environment variable (VITE_GEMINI_API_KEY)
+ */
+export function getGeminiApiKey(customKey?: string): string {
+  if (customKey !== undefined) {
+    return customKey.trim();
+  }
+
+  const stored = getStoredUserSettings();
+  if (stored.geminiApiKey && stored.geminiApiKey.trim().length > 0) {
+    return stored.geminiApiKey.trim();
+  }
+
+  if (typeof process !== 'undefined') {
+    if (process.env?.GEMINI_API_KEY !== undefined) return process.env.GEMINI_API_KEY.trim();
+    if (process.env?.API_KEY !== undefined) return process.env.API_KEY.trim();
+    if (process.env?.VITE_GEMINI_API_KEY !== undefined) return process.env.VITE_GEMINI_API_KEY.trim();
+  }
+
+  if (typeof import.meta !== 'undefined' && import.meta.env?.VITE_GEMINI_API_KEY) {
+    return (import.meta.env.VITE_GEMINI_API_KEY as string).trim();
+  }
+
+  return '';
+}
+
+/**
+ * Checks if a valid Google Gemini API Key is configured.
+ */
+export function hasGeminiApiKey(): boolean {
+  return getGeminiApiKey().length > 0;
+}
diff --git a/services/geminiVoiceService.ts b/services/geminiVoiceService.ts
new file mode 100644
index 0000000..234fe55
--- /dev/null
+++ b/services/geminiVoiceService.ts
@@ -0,0 +1,121 @@
+/**
+ * Google Gemini Native Voice Synthesis Service
+ * 
+ * Provides direct speech synthesis using Google's native Gemini voice models
+ * (gemini-3.8-flash-tts and gemini-2.5-flash-preview-tts) with official prebuilt
+ * voices: Fenrir (Gruff / Salt of the Earth), Puck, Charon, Kore, Aoede.
+ */
+
+import { getGeminiApiKey } from './apiConfig';
+import { decodeBase64 } from './audioUtils';
+
+const GEMINI_API_BASE = 'https://generativelanguage.googleapis.com/v1beta';
+
+/**
+ * Packages raw PCM16 audio into a self-contained WAV ArrayBuffer.
+ */
+export function pcmToWav(pcmData: Uint8Array, sampleRate = 24000, numChannels = 1): ArrayBuffer {
+  const wavBuffer = new ArrayBuffer(44 + pcmData.byteLength);
+  const view = new DataView(wavBuffer);
+  // "RIFF"
+  view.setUint32(0, 0x52494646, false);
+  view.setUint32(4, 36 + pcmData.byteLength, true);
+  // "WAVE"
+  view.setUint32(8, 0x57415645, false);
+  // "fmt "
+  view.setUint32(12, 0x666d7420, false);
+  view.setUint32(16, 16, true);
+  view.setUint16(20, 1, true); // AudioFormat: PCM (1)
+  view.setUint16(22, numChannels, true);
+  view.setUint32(24, sampleRate, true);
+  view.setUint32(28, sampleRate * numChannels * 2, true);
+  view.setUint16(32, numChannels * 2, true);
+  view.setUint16(34, 16, true); // BitsPerSample: 16
+  // "data"
+  view.setUint32(36, 0x64617461, false);
+  view.setUint32(40, pcmData.byteLength, true);
+  new Uint8Array(wavBuffer, 44).set(pcmData);
+  return wavBuffer;
+}
+
+/**
+ * Synthesizes speech using Google Gemini's native voice model.
+ * 
+ * @param text The text dialogue to speak.
+ * @param voiceName Prebuilt Gemini voice: 'Fenrir' | 'Puck' | 'Charon' | 'Kore' | 'Aoede' | 'Zephyr'
+ * @param apiKey Optional explicit Google Gemini API key.
+ * @returns ArrayBuffer containing standard decoded audio data (WAV container).
+ */
+export async function synthesizeSpeechWithGemini(
+  text: string,
+  voiceName = 'Fenrir',
+  apiKey?: string
+): Promise<ArrayBuffer> {
+  const effectiveKey = getGeminiApiKey(apiKey);
+  if (!effectiveKey) {
+    throw new Error('Google Gemini API key is missing. Please set GEMINI_API_KEY in Settings or .env.');
+  }
+
+  // Normalize voice name to valid Gemini prebuilt voices (Zephyr -> Puck/Fenrir)
+  const validVoices = ['Fenrir', 'Puck', 'Charon', 'Kore', 'Aoede'];
+  const targetVoice = validVoices.includes(voiceName) ? voiceName : 'Fenrir';
+
+  const modelsToTry = [
+    'gemini-3.8-flash-tts',
+    'gemini-2.5-flash-preview-tts'
+  ];
+
+  let lastError: any = null;
+
+  for (const model of modelsToTry) {
+    try {
+      const url = `${GEMINI_API_BASE}/models/${model}:generateContent?key=${encodeURIComponent(effectiveKey)}`;
+      const response = await fetch(url, {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json'
+        },
+        body: JSON.stringify({
+          contents: [{ parts: [{ text }] }],
+          generationConfig: {
+            responseModalities: ['AUDIO'],
+            speechConfig: {
+              voiceConfig: {
+                prebuiltVoiceConfig: {
+                  voiceName: targetVoice
+                }
+              }
+            }
+          }
+        })
+      });
+
+      if (!response.ok) {
+        const errorText = await response.text();
+        throw new Error(`Gemini ${model} TTS error (${response.status}): ${errorText}`);
+      }
+
+      const json = await response.json();
+      const part = json.candidates?.[0]?.content?.parts?.[0];
+      if (!part || !part.inlineData?.data) {
+        throw new Error(`Gemini ${model} returned no audio content in response candidates.`);
+      }
+
+      const mimeType = part.inlineData.mimeType || '';
+      const rawBytes = decodeBase64(part.inlineData.data);
+
+      if (mimeType.includes('wav')) {
+        const slice = rawBytes.buffer.slice(rawBytes.byteOffset, rawBytes.byteOffset + rawBytes.byteLength);
+        return slice as ArrayBuffer;
+      }
+
+      // If PCM (e.g. audio/L16;codec=pcm;rate=24000), wrap in WAV container for universal browser decoding
+      return pcmToWav(rawBytes, 24000, 1);
+    } catch (err: any) {
+      lastError = err;
+      console.warn(`Failed synthesis with Gemini model ${model}, checking next model...`, err);
+    }
+  }
+
+  throw lastError || new Error('All Gemini TTS models failed to generate audio.');
+}
diff --git a/services/openRouterService.ts b/services/openRouterService.ts
new file mode 100644
index 0000000..e56d1e1
--- /dev/null
+++ b/services/openRouterService.ts
@@ -0,0 +1,370 @@
+/**
+ * OpenRouter AI Service Provider
+ * 
+ * Provides unified integration with OpenRouter API for streaming roleplay dialogue,
+ * real-time clinical supervision, scenario generation, and vocal speech synthesis/transcription.
+ */
+
+import { Message, Scenario, AnalysisResult } from '../types';
+import { getOpenRouterApiKey, DEFAULT_OPENROUTER_MODEL, DEFAULT_SUPERVISOR_MODEL } from './apiConfig';
+import { SYSTEM_ANALYSIS_PROMPT, SYSTEM_SUMMARY_ANALYSIS_PROMPT } from '../constants';
+
+const OPENROUTER_BASE_URL = 'https://openrouter.ai/api/v1';
+
+export interface OpenRouterOptions {
+  model?: string;
+  temperature?: number;
+  maxTokens?: number;
+  apiKey?: string;
+}
+
+export interface StreamChatCallbacks {
+  onChunk: (chunkText: string) => void;
+  onComplete?: (fullText: string) => void;
+  onError?: (error: any) => void;
+}
+
+/**
+ * Streams roleplay chat completion from OpenRouter using Server-Sent Events (SSE).
+ */
+export async function streamOpenRouterChat(
+  messages: Message[],
+  systemInstruction: string,
+  callbacks: StreamChatCallbacks,
+  options: OpenRouterOptions = {}
+): Promise<string> {
+  const apiKey = getOpenRouterApiKey(options.apiKey);
+  if (!apiKey) {
+    const error = new Error("OpenRouter API key is missing. Please set your OpenRouter API Key in Settings.");
+    callbacks.onError?.(error);
+    throw error;
+  }
+
+  const model = options.model || DEFAULT_OPENROUTER_MODEL;
+
+  const formattedMessages = [
+    { role: 'system', content: systemInstruction },
+    ...messages.map(m => ({
+      role: m.role === 'model' ? 'assistant' : m.role,
+      content: m.text
+    }))
+  ];
+
+  try {
+    const response = await fetch(`${OPENROUTER_BASE_URL}/chat/completions`, {
+      method: 'POST',
+      headers: {
+        'Authorization': `Bearer ${apiKey}`,
+        'Content-Type': 'application/json',
+        'HTTP-Referer': 'https://cognitive-clarity.app',
+        'X-Title': 'Cognitive Clarity'
+      },
+      body: JSON.stringify({
+        model,
+        messages: formattedMessages,
+        temperature: options.temperature ?? 0.7,
+        max_tokens: options.maxTokens ?? 1200,
+        stream: true
+      })
+    });
+
+    if (!response.ok) {
+      const errorText = await response.text();
+      throw new Error(`OpenRouter API error (${response.status}): ${errorText}`);
+    }
+
+    const reader = response.body?.getReader();
+    if (!reader) throw new Error("Unable to read response stream.");
+
+    const decoder = new TextDecoder('utf-8');
+    let fullText = '';
+    let buffer = '';
+
+    while (true) {
+      const { done, value } = await reader.read();
+      if (done) break;
+
+      buffer += decoder.decode(value, { stream: true });
+      const lines = buffer.split('\n');
+      buffer = lines.pop() || '';
+
+      for (const line of lines) {
+        const trimmed = line.trim();
+        if (!trimmed || trimmed.startsWith(':')) continue;
+        if (trimmed === 'data: [DONE]') continue;
+
+        if (trimmed.startsWith('data: ')) {
+          try {
+            const data = JSON.parse(trimmed.substring(6));
+            const delta = data.choices?.[0]?.delta?.content || '';
+            if (delta) {
+              fullText += delta;
+              callbacks.onChunk(delta);
+            }
+          } catch (e) {
+            // Partial JSON buffer ignored
+          }
+        }
+      }
+    }
+
+    callbacks.onComplete?.(fullText);
+    return fullText;
+  } catch (err) {
+    callbacks.onError?.(err);
+    throw err;
+  }
+}
+
+/**
+ * Executes a single-turn structured CBT turn analysis via OpenRouter JSON mode.
+ */
+export async function analyzeTurnWithOpenRouter(
+  turnContext: string,
+  scenarioTitle: string,
+  scenarioDescription: string,
+  cbtFocus: string[],
+  options: OpenRouterOptions = {}
+): Promise<AnalysisResult> {
+  const apiKey = getOpenRouterApiKey(options.apiKey);
+  if (!apiKey) {
+    throw new Error("OpenRouter API key is missing. Please set your API key in Settings.");
+  }
+
+  const model = options.model || DEFAULT_SUPERVISOR_MODEL;
+
+  const systemPrompt = `${SYSTEM_ANALYSIS_PROMPT}
+SCENARIO CONTEXT:
+Title: ${scenarioTitle}
+Description: ${scenarioDescription}
+CBT Focus Areas: ${cbtFocus.join(', ')}
+
+[OUTPUT REQUIREMENTS]
+Return ONLY a valid JSON object matching this schema:
+{
+  "analysis": {
+    "distortions": ["string"],
+    "isAdaptive": boolean,
+    "evidence": "string"
+  },
+  "rating": {
+    "score": number (1-5),
+    "reason": "string"
+  },
+  "suggestions": {
+    "alternativeThought": "string",
+    "behavioralStep": "string"
+  }
+}`;
+
+  const response = await fetch(`${OPENROUTER_BASE_URL}/chat/completions`, {
+    method: 'POST',
+    headers: {
+      'Authorization': `Bearer ${apiKey}`,
+      'Content-Type': 'application/json',
+      'HTTP-Referer': 'https://cognitive-clarity.app',
+      'X-Title': 'Cognitive Clarity'
+    },
+    body: JSON.stringify({
+      model,
+      messages: [
+        { role: 'system', content: systemPrompt },
+        { role: 'user', content: turnContext }
+      ],
+      response_format: { type: 'json_object' },
+      temperature: 0.2
+    })
+  });
+
+  if (!response.ok) {
+    const errorText = await response.text();
+    throw new Error(`OpenRouter Clinical Analysis failed (${response.status}): ${errorText}`);
+  }
+
+  const data = await response.json();
+  const rawContent = data.choices?.[0]?.message?.content || '{}';
+  return JSON.parse(rawContent) as AnalysisResult;
+}
+
+/**
+ * Generates a comprehensive post-session summary report via OpenRouter JSON mode.
+ */
+export async function generateSessionSummaryReport(
+  messages: Message[],
+  scenarioTitle: string,
+  scenarioDescription: string,
+  options: OpenRouterOptions = {}
+): Promise<AnalysisResult> {
+  const apiKey = getOpenRouterApiKey(options.apiKey);
+  if (!apiKey) {
+    throw new Error("OpenRouter API key is missing.");
+  }
+
+  const model = options.model || DEFAULT_SUPERVISOR_MODEL;
+  const transcriptText = messages.map(m => `[${m.role.toUpperCase()}]: ${m.text}`).join('\n');
+
+  const systemPrompt = `${SYSTEM_SUMMARY_ANALYSIS_PROMPT}
+SCENARIO CONTEXT: ${scenarioTitle} - ${scenarioDescription}
+
+[OUTPUT REQUIREMENTS]
+Return ONLY a valid JSON object conforming exactly to this schema:
+{
+  "analysis": {
+    "distortions": ["string"],
+    "isAdaptive": boolean,
+    "evidence": "string"
+  },
+  "rating": {
+    "score": number (1-5),
+    "reason": "string"
+  },
+  "suggestions": {
+    "alternativeThought": "string",
+    "behavioralStep": "string"
+  }
+}`;
+
+  const response = await fetch(`${OPENROUTER_BASE_URL}/chat/completions`, {
+    method: 'POST',
+    headers: {
+      'Authorization': `Bearer ${apiKey}`,
+      'Content-Type': 'application/json',
+      'HTTP-Referer': 'https://cognitive-clarity.app',
+      'X-Title': 'Cognitive Clarity'
+    },
+    body: JSON.stringify({
+      model,
+      messages: [
+        { role: 'system', content: systemPrompt },
+        { role: 'user', content: `SESSION TRANSCRIPT:\n${transcriptText}` }
+      ],
+      response_format: { type: 'json_object' },
+      temperature: 0.2
+    })
+  });
+
+  if (!response.ok) {
+    const errText = await response.text();
+    throw new Error(`OpenRouter summary analysis failed (${response.status}): ${errText}`);
+  }
+
+  const data = await response.json();
+  const rawContent = data.choices?.[0]?.message?.content || '{}';
+  return JSON.parse(rawContent) as AnalysisResult;
+}
+
+/**
+ * Generates a new validated CBT roleplay scenario via OpenRouter JSON mode.
+ */
+export async function generateScenarioWithOpenRouter(
+  prompt: string,
+  selectedConcepts: string[],
+  difficulty: Scenario['difficulty'],
+  options: OpenRouterOptions = {}
+): Promise<Scenario> {
+  const apiKey = getOpenRouterApiKey(options.apiKey);
+  if (!apiKey) {
+    throw new Error("OpenRouter API key is missing. Please enter your key in Settings.");
+  }
+
+  const model = options.model || DEFAULT_OPENROUTER_MODEL;
+  const selectedContext = selectedConcepts.length > 0
+    ? `Focus specifically on these CBT concepts: ${selectedConcepts.join(', ')}.`
+    : '';
+
+  const systemInstruction = `
+    [CONTEXT]
+    You are a Clinical CBT Scenario Architect.
+    The user requires a structured clinical simulation designed to address specific cognitive distortions and behavioral challenges.
+    Clinical Focus: ${selectedContext}
+    
+    [TASK]
+    Transform the user's prompt into a cohesive, structured clinical scenario that sets up a targeted roleplay environment.
+    
+    [CONSTRAINTS]
+    - CATEGORIZATION: You MUST categorize the scenario into one of: 'Social Anxiety', 'Workplace', 'Relationships', 'Self-Talk'.
+    - DIFFICULTY CALIBRATION: The requested difficulty is '${difficulty}'.
+      - 'Beginner': Low stakes, high support, clear-cut distortions, AI character is cooperative.
+      - 'Intermediate': Ambiguous stakes, moderate social friction, subtle distortions, AI character has specific needs.
+      - 'Advanced': High emotional triggers, persistent clinical resistance, complex cognitive patterns.
+    - INTERNAL LOGIC: Provide a detailed "INTERNAL CBT LOGIC" section instructing the AI character how to react to the user's progress or cognitive lapses during the future roleplay.
+    - CHARACTER VOICE: Define a realistic, emotionally consistent voice profile.
+    
+    [OUTPUT REQUIREMENTS]
+    Return ONLY a valid JSON object matching this schema:
+    {
+      "id": "string",
+      "title": "string",
+      "characterName": "string",
+      "description": "string",
+      "category": "Social Anxiety" | "Workplace" | "Relationships" | "Self-Talk",
+      "difficulty": "Beginner" | "Intermediate" | "Advanced",
+      "systemInstruction": "string",
+      "initialMessage": "string",
+      "cbtFocus": ["string"]
+    }
+  `;
+
+  const response = await fetch(`${OPENROUTER_BASE_URL}/chat/completions`, {
+    method: 'POST',
+    headers: {
+      'Authorization': `Bearer ${apiKey}`,
+      'Content-Type': 'application/json',
+      'HTTP-Referer': 'https://cognitive-clarity.app',
+      'X-Title': 'Cognitive Clarity'
+    },
+    body: JSON.stringify({
+      model,
+      messages: [
+        { role: 'system', content: systemInstruction },
+        { role: 'user', content: `Generate a clinical scenario for: ${prompt || 'A scenario exploring the chosen CBT concepts.'}` }
+      ],
+      response_format: { type: 'json_object' },
+      temperature: 0.7
+    })
+  });
+
+  if (!response.ok) {
+    const errorText = await response.text();
+    throw new Error(`OpenRouter scenario generation failed (${response.status}): ${errorText}`);
+  }
+
+  const data = await response.json();
+  const rawContent = data.choices?.[0]?.message?.content || '{}';
+  return JSON.parse(rawContent) as Scenario;
+}
+
+/**
+ * Synthesizes spoken audio from text using OpenRouter's speech endpoint.
+ */
+export async function synthesizeSpeechWithOpenRouter(
+  text: string,
+  voice = 'alloy',
+  apiKey?: string
+): Promise<ArrayBuffer> {
+  const effectiveKey = getOpenRouterApiKey(apiKey);
+  if (!effectiveKey) {
+    throw new Error("OpenRouter API key is missing.");
+  }
+
+  const response = await fetch(`${OPENROUTER_BASE_URL}/audio/speech`, {
+    method: 'POST',
+    headers: {
+      'Authorization': `Bearer ${effectiveKey}`,
+      'Content-Type': 'application/json',
+      'HTTP-Referer': 'https://cognitive-clarity.app',
+      'X-Title': 'Cognitive Clarity'
+    },
+    body: JSON.stringify({
+      model: 'openai/tts-1',
+      input: text,
+      voice: voice
+    })
+  });
+
+  if (!response.ok) {
+    throw new Error(`OpenRouter TTS synthesis failed with status ${response.status}`);
+  }
+
+  return await response.arrayBuffer();
+}
diff --git a/services/sessionStorage.ts b/services/sessionStorage.ts
new file mode 100644
index 0000000..c083db3
--- /dev/null
+++ b/services/sessionStorage.ts
@@ -0,0 +1,132 @@
+/**
+ * Session Storage & Export Service
+ * 
+ * Manages persistent storage of completed CBT roleplay sessions,
+ * enabling history review, markdown report exports, and JSON backups.
+ */
+
+import { SavedSession, Scenario, SessionMode, Message, AnalysisResult } from '../types';
+
+const SESSIONS_STORAGE_KEY = 'cognitive-clarity-saved-sessions';
+
+/**
+ * Retrieves all saved sessions from LocalStorage.
+ */
+export function getSavedSessions(): SavedSession[] {
+  try {
+    const raw = localStorage.getItem(SESSIONS_STORAGE_KEY);
+    return raw ? JSON.parse(raw) : [];
+  } catch (e) {
+    console.error("Failed to load saved sessions", e);
+    return [];
+  }
+}
+
+/**
+ * Saves a completed session to LocalStorage.
+ */
+export function saveSession(
+  scenario: Scenario,
+  mode: SessionMode,
+  messages: Message[],
+  finalReport?: AnalysisResult
+): SavedSession {
+  const newSession: SavedSession = {
+    id: `session-${Date.now()}-${Math.random().toString(36).substring(2, 7)}`,
+    scenarioId: scenario.id,
+    scenarioTitle: scenario.title,
+    category: scenario.category,
+    difficulty: scenario.difficulty,
+    timestamp: new Date().toISOString(),
+    mode,
+    messages,
+    finalReport
+  };
+
+  try {
+    const existing = getSavedSessions();
+    const updated = [newSession, ...existing].slice(0, 50); // Keep last 50 sessions
+    localStorage.setItem(SESSIONS_STORAGE_KEY, JSON.stringify(updated));
+  } catch (e) {
+    console.error("Failed to save session", e);
+  }
+
+  return newSession;
+}
+
+/**
+ * Deletes a session by ID.
+ */
+export function deleteSession(sessionId: string): void {
+  try {
+    const existing = getSavedSessions();
+    const filtered = existing.filter(s => s.id !== sessionId);
+    localStorage.setItem(SESSIONS_STORAGE_KEY, JSON.stringify(filtered));
+  } catch (e) {
+    console.error("Failed to delete session", e);
+  }
+}
+
+/**
+ * Generates an Apple HIG-styled Markdown summary of a CBT session report.
+ */
+export function formatSessionAsMarkdown(
+  scenarioTitle: string,
+  analysis: AnalysisResult,
+  messages?: Message[]
+): string {
+  const dateStr = new Date().toLocaleDateString(undefined, {
+    year: 'numeric',
+    month: 'long',
+    day: 'numeric',
+    hour: '2-digit',
+    minute: '2-digit'
+  });
+
+  let md = `# Cognitive Clarity — Clinical CBT Session Report\n\n`;
+  md += `**Scenario:** ${scenarioTitle}\n`;
+  md += `**Date:** ${dateStr}\n`;
+  md += `**Clinical Evaluation:** ${analysis.analysis.isAdaptive ? '✅ Adaptive Growth Observed' : '⚠️ Clinical Patterns / Distortions Detected'}\n`;
+  md += `**Mastery Rating:** ${analysis.rating.score} / 5\n\n`;
+  md += `---\n\n`;
+
+  md += `## 1. Clinical Analysis\n\n`;
+  if (analysis.analysis.distortions.length > 0) {
+    md += `**Cognitive Distortions Identified:**\n`;
+    analysis.analysis.distortions.forEach(d => {
+      md += `- ${d}\n`;
+    });
+    md += `\n`;
+  }
+  md += `**Behavioral Evidence:**\n> "${analysis.analysis.evidence}"\n\n`;
+  md += `**Clinical Justification:**\n${analysis.rating.reason}\n\n`;
+
+  md += `## 2. Cognitive Reframing & Tactical Steps\n\n`;
+  md += `**Master Reframe:**\n> "${analysis.suggestions.alternativeThought}"\n\n`;
+  md += `**Homework & Behavioral Step:**\n${analysis.suggestions.behavioralStep}\n\n`;
+
+  if (messages && messages.length > 0) {
+    md += `---\n\n## 3. Session Transcript\n\n`;
+    messages.forEach(m => {
+      const sender = m.role === 'user' ? 'You' : 'AI Partner';
+      md += `**[${sender}]**: ${m.text}\n\n`;
+    });
+  }
+
+  return md;
+}
+
+/**
+ * Triggers a client-side file download of text content.
+ */
+export function downloadFile(content: string, fileName: string, contentType: string): void {
+  const blob = new Blob([content], { type: contentType });
+  const url = URL.createObjectURL(blob);
+  const a = document.createElement('a');
+  a.href = url;
+  a.download = fileName;
+  document.body.appendChild(a);
+  a.click();
+  document.body.removeChild(a);
+  URL.revokeObjectURL(url);
+}
diff --git a/services/voiceAuditionService.ts b/services/voiceAuditionService.ts
new file mode 100644
index 0000000..4ffb513
--- /dev/null
+++ b/services/voiceAuditionService.ts
@@ -0,0 +1,186 @@
+import { synthesizeSpeechWithOpenRouter } from './openRouterService';
+import { synthesizeSpeechWithGemini } from './geminiVoiceService';
+import { getGeminiApiKey, hasGeminiApiKey, hasOpenRouterApiKey } from './apiConfig';
+import { VOICE_PROFILES, type VoiceProfile } from '../constants';
+import type { UserSettings } from '../types';
+
+export interface VoicePlaybackState {
+  isPlaying: boolean;
+  activeVoiceId: UserSettings['voiceName'] | null;
+  mode: 'gemini' | 'openrouter' | 'webspeech' | 'idle';
+  error?: string;
+}
+
+export function getActiveVoiceEngine(): 'gemini' | 'openrouter' | 'webspeech' {
+  if (hasGeminiApiKey()) return 'gemini';
+  if (hasOpenRouterApiKey()) return 'openrouter';
+  return 'webspeech';
+}
+
+export class VoiceAuditionService {
+  private currentAudio: HTMLAudioElement | null = null;
+  private currentAudioUrl: string | null = null;
+  private activeUtterance: SpeechSynthesisUtterance | null = null;
+
+  /**
+   * Returns the VoiceProfile configuration for a given voice name.
+   */
+  getProfile(voiceId: UserSettings['voiceName']): VoiceProfile {
+    return VOICE_PROFILES.find((p) => p.id === voiceId) || VOICE_PROFILES[0];
+  }
+
+  /**
+   * Auditions/plays a voice sample:
+   * 1. Google Gemini native voice (gemini-3.8-flash-tts) if GEMINI_API_KEY is available.
+   * 2. OpenRouter TTS if OPENROUTER_API_KEY is available.
+   * 3. Browser Web Speech Synthesis fallback.
+   */
+  async playPreview(
+    voiceId: UserSettings['voiceName'],
+    customText?: string,
+    apiKey?: string,
+    onEnded?: () => void,
+    geminiApiKey?: string
+  ): Promise<void> {
+    this.stop();
+
+    const profile = this.getProfile(voiceId);
+    const textToSpeak = customText?.trim() || profile.sampleText;
+
+    // 1. Prioritize Google Gemini Native Voice (gemini-3.8-flash-tts)
+    const geminiKey = getGeminiApiKey(geminiApiKey);
+    if (geminiKey) {
+      try {
+        const arrayBuffer = await synthesizeSpeechWithGemini(
+          textToSpeak,
+          profile.id,
+          geminiKey
+        );
+        const blob = new Blob([arrayBuffer], { type: 'audio/wav' });
+        const url = URL.createObjectURL(blob);
+        this.currentAudioUrl = url;
+        const audio = new Audio(url);
+        this.currentAudio = audio;
+
+        audio.onended = () => {
+          this.cleanupAudio();
+          onEnded?.();
+        };
+
+        audio.onerror = () => {
+          this.cleanupAudio();
+          this.playWebSpeech(textToSpeak, profile, onEnded);
+        };
+
+        await audio.play();
+        return;
+      } catch (err) {
+        console.warn('Gemini 3.8 native voice synthesis preview failed, checking OpenRouter fallback:', err);
+      }
+    }
+
+    // 2. OpenRouter TTS Fallback
+    if (apiKey && apiKey.trim().length > 0) {
+      try {
+        const arrayBuffer = await synthesizeSpeechWithOpenRouter(
+          textToSpeak,
+          profile.openRouterVoice,
+          apiKey
+        );
+        const blob = new Blob([arrayBuffer], { type: 'audio/mpeg' });
+        const url = URL.createObjectURL(blob);
+        this.currentAudioUrl = url;
+        const audio = new Audio(url);
+        this.currentAudio = audio;
+
+        audio.onended = () => {
+          this.cleanupAudio();
+          onEnded?.();
+        };
+
+        audio.onerror = () => {
+          this.cleanupAudio();
+          this.playWebSpeech(textToSpeak, profile, onEnded);
+        };
+
+        await audio.play();
+        return;
+      } catch (err) {
+        console.warn('OpenRouter TTS preview failed, falling back to Web Speech Synthesis:', err);
+      }
+    }
+
+    // 3. Web Speech API fallback with calibrated pitch/rate tuning
+    this.playWebSpeech(textToSpeak, profile, onEnded);
+  }
+
+  private playWebSpeech(
+    text: string,
+    profile: VoiceProfile,
+    onEnded?: () => void
+  ): void {
+    const synth = typeof window !== 'undefined' && 'speechSynthesis' in window
+      ? window.speechSynthesis
+      : (typeof (globalThis as any).speechSynthesis !== 'undefined' ? (globalThis as any).speechSynthesis : null);
+
+    const Utterance = typeof window !== 'undefined' && 'SpeechSynthesisUtterance' in window
+      ? window.SpeechSynthesisUtterance
+      : (typeof (globalThis as any).SpeechSynthesisUtterance !== 'undefined' ? (globalThis as any).SpeechSynthesisUtterance : null);
+
+    if (synth && Utterance) {
+      synth.cancel();
+      const utterance = new Utterance(text);
+      utterance.pitch = profile.webSpeechTuning.pitch;
+      utterance.rate = profile.webSpeechTuning.rate;
+
+      utterance.onend = () => {
+        this.activeUtterance = null;
+        onEnded?.();
+      };
+
+      utterance.onerror = () => {
+        this.activeUtterance = null;
+        onEnded?.();
+      };
+
+      this.activeUtterance = utterance;
+      synth.speak(utterance);
+    } else {
+      onEnded?.();
+    }
+  }
+
+  private cleanupAudio(): void {
+    if (this.currentAudioUrl) {
+      URL.revokeObjectURL(this.currentAudioUrl);
+      this.currentAudioUrl = null;
+    }
+    this.currentAudio = null;
+  }
+
+  /**
+   * Immediately stops any active audition preview audio.
+   */
+  stop(): void {
+    if (this.currentAudio) {
+      try {
+        this.currentAudio.pause();
+        this.currentAudio.currentTime = 0;
+      } catch (e) {}
+      this.cleanupAudio();
+    }
+
+    const synth = typeof window !== 'undefined' && 'speechSynthesis' in window
+      ? window.speechSynthesis
+      : (typeof (globalThis as any).speechSynthesis !== 'undefined' ? (globalThis as any).speechSynthesis : null);
+
+    if (synth) {
+      try {
+        synth.cancel();
+      } catch (e) {}
+      this.activeUtterance = null;
+    }
+  }
+}
+
+export const defaultVoiceAudition = new VoiceAuditionService();
diff --git a/src/App.svelte b/src/App.svelte
new file mode 100644
index 0000000..eef2936
--- /dev/null
+++ b/src/App.svelte
@@ -0,0 +1,289 @@
+<script lang="ts">
+  import { appState } from './lib/stores/AppStateStore.svelte';
+  import { defaultUserSettings } from './lib/stores/UserSettingsStore.svelte';
+  import type { Scenario, SessionMode, UserSettings } from '../types';
+
+  import ScenarioCard from './lib/components/ScenarioCard.svelte';
+  import ChatSession from './lib/components/ChatSession.svelte';
+  import VoiceSession from './lib/components/VoiceSession.svelte';
+  import ScenarioGenerator from './lib/components/ScenarioGenerator.svelte';
+  import CBTReference from './lib/components/CBTReference.svelte';
+  import SettingsModal from './lib/components/SettingsModal.svelte';
+  import Tooltip from './lib/components/ui/Tooltip.svelte';
+  import Button from './lib/components/ui/Button.svelte';
+  import ReloadPrompt from './lib/components/ReloadPrompt.svelte';
+  import VersionBadge from './lib/components/VersionBadge.svelte';
+
+  import {
+    Brain,
+    Info,
+    ShieldCheck,
+    Filter,
+    Plus,
+    BookOpen,
+    Activity,
+    Zap,
+    Settings
+  } from '@lucide/svelte';
+
+  const difficulties = ['All', 'Beginner', 'Intermediate', 'Advanced'];
+
+  function handleSelectScenario(scenario: Scenario, mode: SessionMode) {
+    appState.selectScenario(scenario, mode);
+  }
+
+  function handleExitSession() {
+    appState.exitSession();
+  }
+
+  function handleScenarioGenerated(newScenario: Scenario) {
+    appState.addCustomScenario(newScenario);
+  }
+
+  function handleDeleteScenario(id: string) {
+    appState.deleteCustomScenario(id);
+  }
+
+  function handleUpdateSettings(newSettings: UserSettings) {
+    defaultUserSettings.update(newSettings);
+  }
+</script>
+
+{#if appState.isPreparing}
+  <div class="min-h-screen bg-slate-900 flex flex-col items-center justify-center p-6 text-white overflow-hidden relative">
+    <div class="absolute inset-0 overflow-hidden pointer-events-none opacity-20">
+      <div class="absolute top-[-10%] left-[-10%] w-[40%] h-[40%] bg-teal-500 rounded-full blur-[120px] animate-pulse"></div>
+      <div
+        class="absolute bottom-[-10%] right-[-10%] w-[40%] h-[40%] bg-blue-500 rounded-full blur-[120px] animate-pulse"
+        style="animation-delay: 1s;"
+      ></div>
+    </div>
+
+    <div class="relative z-10 flex flex-col items-center max-w-md text-center">
+      <div class="w-24 h-24 bg-white/5 rounded-3xl border border-white/10 flex items-center justify-center mb-8 relative">
+        <Brain size={48} class="text-teal-400" />
+        <div class="absolute inset-0 border-2 border-teal-500/30 rounded-3xl animate-ping opacity-20"></div>
+      </div>
+
+      <h2 class="text-2xl font-bold mb-3 tracking-tight">Initializing Session</h2>
+      <div class="flex items-center gap-2 mb-8">
+        <span class="h-1.5 w-1.5 bg-teal-400 rounded-full animate-bounce" style="animation-delay: 0ms;"></span>
+        <span class="h-1.5 w-1.5 bg-teal-400 rounded-full animate-bounce" style="animation-delay: 150ms;"></span>
+        <span class="h-1.5 w-1.5 bg-teal-400 rounded-full animate-bounce" style="animation-delay: 300ms;"></span>
+        <p class="text-xs font-bold text-slate-400 uppercase tracking-widest ml-2">Calibrating AI Parameters</p>
+      </div>
+
+      <div class="w-full bg-white/5 h-1.5 rounded-full overflow-hidden mb-4 border border-white/5">
+        <div class="h-full bg-teal-500 rounded-full w-0 animate-[loading_1.4s_ease-in-out_forwards]"></div>
+      </div>
+
+      <div class="space-y-2 opacity-60">
+        <p class="text-[10px] uppercase font-black tracking-tighter flex items-center justify-center gap-2">
+          <Zap size={10} class="text-teal-400" />
+          Configuring {appState.sessionMode === 'voice' ? 'Voice Link' : 'Neural Chat Bridge'}
+        </p>
+        <p class="text-[10px] uppercase font-black tracking-tighter flex items-center justify-center gap-2">
+          <Activity size={10} class="text-blue-400" />
+          Applying {defaultUserSettings.voiceName} Vocal Profile
+        </p>
+      </div>
+    </div>
+
+    <style>
+      @keyframes loading {
+        0% {
+          width: 0%;
+        }
+        20% {
+          width: 15%;
+        }
+        50% {
+          width: 70%;
+        }
+        100% {
+          width: 100%;
+        }
+      }
+    </style>
+  </div>
+{:else if appState.activeScenario}
+  {#if appState.sessionMode === 'voice'}
+    <div class="fixed inset-0 z-40 bg-slate-950 flex flex-col overflow-hidden animate-in fade-in duration-500">
+      <VoiceSession
+        scenario={appState.activeScenario}
+        onexit={handleExitSession}
+        voiceSettings={defaultUserSettings.toUserSettings()}
+        onupdatesettings={handleUpdateSettings}
+      />
+    </div>
+  {:else}
+    <div class="min-h-screen bg-slate-100/70 flex flex-col items-center py-4 sm:py-6 px-3 sm:px-6 animate-in fade-in duration-500">
+      <ChatSession
+        scenario={appState.activeScenario}
+        userSettings={defaultUserSettings.toUserSettings()}
+        onexit={handleExitSession}
+      />
+    </div>
+  {/if}
+{:else}
+  <div class="min-h-screen bg-[#FDFDFF] text-slate-900 font-sans relative animate-in fade-in duration-500">
+    <ReloadPrompt />
+
+    <!-- Modals -->
+    {#if appState.showGenerator}
+      <ScenarioGenerator
+        userSettings={defaultUserSettings.toUserSettings()}
+        ongenerate={handleScenarioGenerated}
+        oncancel={() => (appState.showGenerator = false)}
+      />
+    {/if}
+
+    {#if appState.showReference}
+      <CBTReference onclose={() => (appState.showReference = false)} />
+    {/if}
+
+    {#if appState.showSettings}
+      <SettingsModal
+        settings={defaultUserSettings.toUserSettings()}
+        onupdate={handleUpdateSettings}
+        onclose={() => (appState.showSettings = false)}
+      />
+    {/if}
+
+    <!-- Hero Section -->
+    <div class="bg-white border-b border-slate-200">
+      <div class="max-w-5xl mx-auto px-6 py-12">
+        <div class="flex flex-col md:flex-row md:items-center justify-between gap-6 mb-8">
+          <div class="flex items-center gap-3">
+            <div class="bg-teal-600 p-2 rounded-lg text-white shadow-sm shadow-teal-200">
+              <Brain size={32} />
+            </div>
+            <h1 class="text-3xl font-bold tracking-tight text-slate-900">Cognitive Clarity</h1>
+          </div>
+
+          <div class="flex items-center gap-2">
+            <Tooltip content="Adjust voice settings for audio sessions.">
+              <Button
+                variant="outline"
+                size="icon"
+                class="rounded-xl text-slate-400 hover:text-slate-800 cursor-pointer"
+                onclick={() => (appState.showSettings = true)}
+              >
+                <Settings size={20} />
+              </Button>
+            </Tooltip>
+            <Tooltip content="Explore the glossary of CBT distortions, techniques, and concepts.">
+              <Button
+                variant="outline"
+                class="rounded-xl text-slate-600 hover:text-teal-700 hover:bg-teal-50 cursor-pointer"
+                onclick={() => (appState.showReference = true)}
+              >
+                <BookOpen size={18} class="mr-2" />
+                Reference Guide
+              </Button>
+            </Tooltip>
+          </div>
+        </div>
+
+        <p class="text-xl text-slate-600 max-w-2xl leading-relaxed font-light">
+          An adaptive clinical training environment designed to strengthen cognitive flexibility and navigate social friction.
+        </p>
+
+        <div class="flex flex-wrap gap-4 mt-8">
+          <Tooltip content="Our scenarios are built on the foundations of Cognitive Behavioral Therapy.">
+            <div class="flex items-center gap-2 text-sm text-slate-500 bg-slate-50 px-3 py-1.5 rounded-full border border-slate-100 cursor-help">
+              <ShieldCheck class="text-teal-600" size={18} />
+              <span>Evidence-Based Framework</span>
+            </div>
+          </Tooltip>
+          <Tooltip content="The AI character responds dynamically to your level of cognitive restructuring.">
+            <div class="flex items-center gap-2 text-sm text-slate-500 bg-slate-50 px-3 py-1.5 rounded-full border border-slate-100 cursor-help">
+              <Info class="text-teal-600" size={18} />
+              <span>Vocal Partner: {defaultUserSettings.voiceName}</span>
+            </div>
+          </Tooltip>
+        </div>
+      </div>
+    </div>
+
+    <!-- Main Content -->
+    <main class="max-w-5xl mx-auto px-6 py-12">
+      <div class="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4 mb-10">
+        <h2 class="text-2xl font-medium text-slate-800">Training Scenarios</h2>
+        <div class="flex flex-col sm:flex-row gap-3 w-full sm:w-auto">
+          <div class="flex items-center bg-white border border-slate-200 rounded-lg p-1 shadow-sm overflow-x-auto">
+            <div class="px-3 text-slate-400 flex items-center gap-2 text-sm font-medium border-r border-slate-100 mr-1">
+              <Filter size={14} />
+              <span class="hidden sm:inline">Difficulty</span>
+            </div>
+            <div class="flex gap-1">
+              {#each difficulties as diff (diff)}
+                <Button
+                  variant={appState.selectedDifficulty === diff ? 'secondary' : 'ghost'}
+                  size="sm"
+                  onclick={() => (appState.selectedDifficulty = diff)}
+                  class="h-7 px-3 text-xs {appState.selectedDifficulty === diff
+                    ? 'bg-teal-50 text-teal-700 font-semibold hover:bg-teal-100 hover:text-teal-800'
+                    : 'text-slate-500 hover:text-slate-700'}"
+                >
+                  {diff}
+                </Button>
+              {/each}
+            </div>
+          </div>
+
+          <Tooltip content="Generate a unique roleplay situation based on your specific needs using AI." position="bottom">
+            <div>
+              <Button
+                onclick={() => (appState.showGenerator = true)}
+                class="bg-teal-600 hover:bg-teal-700 text-white shadow-md shadow-teal-100 font-bold cursor-pointer"
+              >
+                <Plus size={18} class="mr-2" />
+                Create Custom
+              </Button>
+            </div>
+          </Tooltip>
+        </div>
+      </div>
+
+      <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6" data-testid="scenarios-grid">
+        {#each appState.filteredScenarios as scenario (scenario.id)}
+          <ScenarioCard
+            {scenario}
+            onselect={handleSelectScenario}
+            ondelete={scenario.id.startsWith('custom-') ? handleDeleteScenario : undefined}
+          />
+        {/each}
+        <button
+          type="button"
+          onclick={() => (appState.showGenerator = true)}
+          class="flex flex-col items-center justify-center gap-4 p-6 rounded-xl border-2 border-dashed border-slate-200 text-slate-400 hover:border-teal-300 hover:text-teal-600 hover:bg-teal-50/50 transition-all h-full min-h-[250px] group whitespace-normal cursor-pointer"
+        >
+          <div class="bg-slate-50 p-4 rounded-full group-hover:bg-white transition-colors">
+            <Plus size={32} />
+          </div>
+          <div class="text-center">
+            <span class="block font-bold text-sm uppercase tracking-widest mb-1">
+              Custom Scenario
+            </span>
+            <span class="text-xs font-light">Generate a specific roleplay session</span>
+          </div>
+        </button>
+      </div>
+    </main>
+
+    <footer class="bg-white border-t border-slate-200 py-12">
+      <div class="max-w-5xl mx-auto px-6 flex flex-col md:flex-row justify-between items-center gap-8">
+        <div class="flex items-center gap-4 text-slate-400">
+          <div class="flex items-center gap-2">
+            <Brain size={20} />
+            <span class="text-sm font-bold uppercase tracking-widest text-slate-900">
+              Cognitive Clarity
+            </span>
+          </div>
+          <VersionBadge />
+        </div>
+      </div>
+    </footer>
+  </div>
+{/if}
diff --git a/src/lib/audio/AudioEngine.svelte.ts b/src/lib/audio/AudioEngine.svelte.ts
new file mode 100644
index 0000000..8a9b40b
--- /dev/null
+++ b/src/lib/audio/AudioEngine.svelte.ts
@@ -0,0 +1,455 @@
+import type { Scenario, Message, AnalysisResult } from '../../../types';
+import { UserSettingsStore } from '../stores/UserSettingsStore.svelte';
+import { 
+  streamOpenRouterChat, 
+  analyzeTurnWithOpenRouter, 
+  generateSessionSummaryReport, 
+  synthesizeSpeechWithOpenRouter 
+} from '../../../services/openRouterService';
+import { synthesizeSpeechWithGemini } from '../../../services/geminiVoiceService';
+import { getOpenRouterApiKey, getGeminiApiKey } from '../../../services/apiConfig';
+import { saveSession } from '../../../services/sessionStorage';
+import { VOICE_PROFILES } from '../../../constants';
+
+export type SessionStatus = 'idle' | 'connecting' | 'active' | 'analyzing' | 'finished' | 'error';
+
+export class AudioEngine {
+  status = $state<SessionStatus>('idle');
+  errorMessage = $state<string | null>(null);
+  isMuted = $state(false);
+  micLevel = $state(0);
+  aiAudioLevel = $state(0);
+  isAiSpeaking = $state(false);
+  isUserSpeaking = $state(false);
+  messages = $state<Message[]>([]);
+  liveInsight = $state<AnalysisResult | null>(null);
+  isAnalyzingTurn = $state(false);
+  finalReport = $state<AnalysisResult | null>(null);
+
+  // Derived unified visualizer level
+  activeLevel = $derived(this.isAiSpeaking ? this.aiAudioLevel : this.micLevel);
+
+  private inputCtx: AudioContext | null = null;
+  private outputCtx: AudioContext | null = null;
+  private userAnalyser: AnalyserNode | null = null;
+  private aiAnalyser: AnalyserNode | null = null;
+  private currentAudioSource: AudioBufferSourceNode | null = null;
+  private stream: MediaStream | null = null;
+  private recognition: any = null;
+  private animFrameId: number | null = null;
+  private isProcessingTurn = false;
+
+  constructor(
+    private scenario: Scenario,
+    private userSettings: UserSettingsStore
+  ) {}
+
+  async start() {
+    const apiKey = getOpenRouterApiKey(this.userSettings.openRouterApiKey);
+    if (!apiKey) {
+      this.status = 'error';
+      this.errorMessage = 'OpenRouter API Key is missing. Please set your API key in Settings.';
+      return;
+    }
+
+    try {
+      this.status = 'connecting';
+      this.errorMessage = null;
+
+      // WebAudio Context Initialization
+      const AudioCtxClass = typeof window !== 'undefined'
+        ? (window.AudioContext || (window as any).webkitAudioContext)
+        : (globalThis as any).AudioContext;
+      if (!AudioCtxClass) {
+        throw new Error('WebAudio AudioContext is not supported in this environment.');
+      }
+      this.inputCtx = new AudioCtxClass();
+      this.outputCtx = new AudioCtxClass();
+
+      this.userAnalyser = this.inputCtx.createAnalyser();
+      this.userAnalyser.fftSize = 256;
+
+      this.aiAnalyser = this.outputCtx.createAnalyser();
+      this.aiAnalyser.fftSize = 256;
+
+      // Microphone Stream
+      const constraints: MediaStreamConstraints = {
+        audio: this.userSettings.preferredAudioDeviceId
+          ? { deviceId: { exact: this.userSettings.preferredAudioDeviceId } }
+          : true
+      };
+
+      this.stream = await navigator.mediaDevices.getUserMedia(constraints);
+      const micSource = this.inputCtx.createMediaStreamSource(this.stream);
+      micSource.connect(this.userAnalyser);
+
+      // Web Speech Recognition
+      const SpeechRecognition = typeof window !== 'undefined'
+        ? ((window as any).SpeechRecognition || (window as any).webkitSpeechRecognition)
+        : (globalThis as any).SpeechRecognition;
+      if (SpeechRecognition) {
+        this.recognition = new SpeechRecognition();
+        this.recognition.continuous = true;
+        this.recognition.interimResults = true;
+        this.recognition.lang = 'en-US';
+
+        let speechDebounceTimer: any = null;
+        let pendingUserSpeech = '';
+
+        this.recognition.onresult = (event: any) => {
+          if (this.isMuted || this.isAiSpeaking) return;
+
+          let interimTranscript = '';
+          for (let i = event.resultIndex; i < event.results.length; i++) {
+            const transcript = event.results[i][0].transcript;
+            if (event.results[i].isFinal) {
+              pendingUserSpeech += ' ' + transcript;
+            } else {
+              interimTranscript += transcript;
+            }
+          }
+
+          if (interimTranscript.trim() || pendingUserSpeech.trim()) {
+            this.isUserSpeaking = true;
+          }
+
+          clearTimeout(speechDebounceTimer);
+          speechDebounceTimer = setTimeout(() => {
+            const finalSpeech = (pendingUserSpeech + ' ' + interimTranscript).trim();
+            if (finalSpeech.length > 2) {
+              this.isUserSpeaking = false;
+              this.handleUserTurn(finalSpeech);
+              pendingUserSpeech = '';
+            }
+          }, 1200);
+        };
+
+        this.recognition.onerror = (e: any) => {
+          if (e.error !== 'no-speech') {
+            console.warn('Speech recognition warning:', e.error);
+          }
+        };
+
+        this.recognition.onend = () => {
+          if (this.status === 'active' && !this.isMuted) {
+            try { this.recognition?.start(); } catch (err) {}
+          }
+        };
+
+        try {
+          this.recognition.start();
+        } catch (e) {
+          console.warn('Speech recognition auto-start prevented', e);
+        }
+      }
+
+      // Initial Message
+      const initialGreeting: Message = {
+        id: 'init',
+        role: 'model',
+        text: this.scenario.initialMessage,
+        timestamp: new Date()
+      };
+      this.messages = [initialGreeting];
+
+      this.status = 'active';
+
+      // Start Frequency Analysis Animation Loop
+      this.startMeterLoop();
+
+      // Speak initial greeting
+      await this.speakText(this.scenario.initialMessage);
+    } catch (err: any) {
+      console.error('Audio initialization failure', err);
+      this.status = 'error';
+      this.errorMessage = err?.message || 'Failed to initialize audio input device.';
+    }
+  }
+
+  private startMeterLoop() {
+    const userBuffer = new Uint8Array(this.userAnalyser ? this.userAnalyser.frequencyBinCount : 0);
+    const aiBuffer = new Uint8Array(this.aiAnalyser ? this.aiAnalyser.frequencyBinCount : 0);
+
+    const updateMeter = () => {
+      // 1. Microphone Level
+      if (this.userAnalyser && !this.isMuted && !this.isAiSpeaking) {
+        this.userAnalyser.getByteFrequencyData(userBuffer);
+        let sum = 0;
+        for (let i = 0; i < userBuffer.length; i++) sum += userBuffer[i];
+        const avg = sum / userBuffer.length;
+        this.micLevel = Math.min(100, Math.round((avg / 128) * 100));
+      } else {
+        this.micLevel = 0;
+      }
+
+      // 2. AI Audio Level
+      if (this.aiAnalyser && this.isAiSpeaking) {
+        this.aiAnalyser.getByteFrequencyData(aiBuffer);
+        let sum = 0;
+        for (let i = 0; i < aiBuffer.length; i++) sum += aiBuffer[i];
+        const avg = sum / aiBuffer.length;
+        this.aiAudioLevel = Math.min(100, Math.round((avg / 128) * 100));
+      } else {
+        this.aiAudioLevel = 0;
+      }
+
+      this.animFrameId = requestAnimationFrame(updateMeter);
+    };
+
+    this.animFrameId = requestAnimationFrame(updateMeter);
+  }
+
+  toggleMute() {
+    this.isMuted = !this.isMuted;
+    if (this.isMuted) {
+      this.stopAllAudio();
+      try { this.recognition?.stop(); } catch (e) {}
+    } else {
+      try { this.recognition?.start(); } catch (e) {}
+    }
+  }
+
+  async speakText(text: string) {
+    this.stopAllAudio();
+    this.isAiSpeaking = true;
+
+    const profile = VOICE_PROFILES.find(
+      (p) => p.id.toLowerCase() === this.userSettings.voiceName.toLowerCase()
+    ) || VOICE_PROFILES[0];
+
+    // 1. Google Gemini Native Voice (gemini-3.8-flash-tts with Fenrir, Puck, Kore, etc.)
+    const geminiKey = getGeminiApiKey(this.userSettings.geminiApiKey);
+    if (geminiKey) {
+      try {
+        const arrayBuffer = await synthesizeSpeechWithGemini(
+          text,
+          profile.id,
+          geminiKey
+        );
+
+        if (!this.outputCtx) return;
+        if (this.outputCtx.state === 'suspended') await this.outputCtx.resume();
+
+        const buffer = await this.outputCtx.decodeAudioData(arrayBuffer);
+        const source = this.outputCtx.createBufferSource();
+        source.buffer = buffer;
+
+        if (this.aiAnalyser) {
+          source.connect(this.aiAnalyser);
+          this.aiAnalyser.connect(this.outputCtx.destination);
+        } else {
+          source.connect(this.outputCtx.destination);
+        }
+
+        source.onended = () => {
+          this.isAiSpeaking = false;
+          this.aiAudioLevel = 0;
+        };
+
+        this.currentAudioSource = source;
+        source.start(0);
+        return;
+      } catch (e) {
+        console.warn('Gemini 3.8 native voice synthesis fallback to OpenRouter/WebSpeech:', e);
+      }
+    }
+
+    // 2. OpenRouter TTS Fallback
+    try {
+      const arrayBuffer = await synthesizeSpeechWithOpenRouter(
+        text,
+        profile.openRouterVoice,
+        this.userSettings.openRouterApiKey
+      );
+
+      if (!this.outputCtx) return;
+      if (this.outputCtx.state === 'suspended') await this.outputCtx.resume();
+
+      const buffer = await this.outputCtx.decodeAudioData(arrayBuffer);
+      const source = this.outputCtx.createBufferSource();
+      source.buffer = buffer;
+
+      if (this.aiAnalyser) {
+        source.connect(this.aiAnalyser);
+        this.aiAnalyser.connect(this.outputCtx.destination);
+      } else {
+        source.connect(this.outputCtx.destination);
+      }
+
+      source.onended = () => {
+        this.isAiSpeaking = false;
+        this.aiAudioLevel = 0;
+      };
+
+      this.currentAudioSource = source;
+      source.start(0);
+      return;
+    } catch (e) {
+      console.warn('OpenRouter TTS fallback to Web Speech Synthesis', e);
+      if (typeof window !== 'undefined' && 'speechSynthesis' in window) {
+        const utterance = new SpeechSynthesisUtterance(text);
+        utterance.rate = profile.webSpeechTuning.rate;
+        utterance.pitch = profile.webSpeechTuning.pitch;
+        utterance.onstart = () => { this.isAiSpeaking = true; };
+        utterance.onend = () => {
+          this.isAiSpeaking = false;
+          this.aiAudioLevel = 0;
+        };
+        utterance.onerror = () => {
+          this.isAiSpeaking = false;
+          this.aiAudioLevel = 0;
+        };
+        window.speechSynthesis.speak(utterance);
+      } else {
+        this.isAiSpeaking = false;
+      }
+    }
+  }
+
+  async handleUserTurn(userText: string) {
+    if (this.isProcessingTurn || !userText.trim()) return;
+    this.isProcessingTurn = true;
+    this.stopAllAudio();
+
+    const userMsg: Message = {
+      id: Date.now().toString(),
+      role: 'user',
+      text: userText.trim(),
+      timestamp: new Date()
+    };
+
+    const currentHistory = [...this.messages, userMsg];
+    this.messages = currentHistory;
+
+    const botMsgId = (Date.now() + 1).toString();
+    const botMsg: Message = {
+      id: botMsgId,
+      role: 'model',
+      text: '',
+      timestamp: new Date()
+    };
+    this.messages = [...currentHistory, botMsg];
+
+    const roleplaySystemInstruction = `
+      ${this.scenario.systemInstruction}
+      
+      [CONTEXT]
+      You are participating in a clinical CBT roleplay simulation. 
+      The instructions above define your character, the scenario, and your internal CBT logic.
+      
+      [TASK]
+      Respond to the user naturally in character to advance the roleplay scenario.
+      
+      [CONSTRAINTS]
+      - CRITICAL: Stay strictly in character as the persona defined in the scenario.
+      - CRITICAL: NEVER provide clinical feedback, advice, or meta-commentary about the user's progress.
+      - CRITICAL: Keep dialogue natural and conversational (1-3 sentences per turn).
+      - If the user successfully concludes the scenario, end the dialogue naturally.
+    `;
+
+    try {
+      let accumulatedText = '';
+      await streamOpenRouterChat(
+        currentHistory,
+        roleplaySystemInstruction,
+        {
+          onChunk: (chunk) => {
+            accumulatedText += chunk;
+            this.messages = this.messages.map((m) =>
+              m.id === botMsgId ? { ...m, text: accumulatedText } : m
+            );
+          },
+          onComplete: (fullText) => {
+            this.speakText(fullText);
+
+            // Parallel out-of-band turn supervisor
+            this.isAnalyzingTurn = true;
+            const turnContext = `User said: "${userMsg.text}". Roleplay partner said: "${fullText}".`;
+            analyzeTurnWithOpenRouter(
+              turnContext,
+              this.scenario.title,
+              this.scenario.description,
+              this.scenario.cbtFocus,
+              {
+                apiKey: this.userSettings.openRouterApiKey,
+                model: this.userSettings.supervisorModel
+              }
+            ).then((res) => {
+              this.liveInsight = res;
+            }).catch((err) => {
+              console.error('Voice turn analysis error', err);
+            }).finally(() => {
+              this.isAnalyzingTurn = false;
+              this.isProcessingTurn = false;
+            });
+          },
+          onError: (err) => {
+            console.error('OpenRouter voice stream failed', err);
+            this.isProcessingTurn = false;
+          }
+        },
+        {
+          apiKey: this.userSettings.openRouterApiKey,
+          model: this.userSettings.roleplayModel
+        }
+      );
+    } catch (err) {
+      console.error('User voice turn execution failed', err);
+      this.isProcessingTurn = false;
+    }
+  }
+
+  async finishSession() {
+    this.status = 'analyzing';
+    this.stopAllAudio();
+
+    try {
+      const report = await generateSessionSummaryReport(
+        this.messages,
+        this.scenario.title,
+        this.scenario.description,
+        {
+          apiKey: this.userSettings.openRouterApiKey,
+          model: this.userSettings.supervisorModel
+        }
+      );
+
+      this.finalReport = report;
+      saveSession(this.scenario, 'voice', this.messages, report);
+      this.status = 'finished';
+    } catch (err) {
+      console.error('Post-session analysis error', err);
+      this.status = 'error';
+      this.errorMessage = 'Failed to generate session report.';
+    }
+  }
+
+  stopAllAudio() {
+    if (this.currentAudioSource) {
+      try { this.currentAudioSource.stop(); } catch (e) {}
+      this.currentAudioSource = null;
+    }
+    const synth = typeof window !== 'undefined' && 'speechSynthesis' in window
+      ? window.speechSynthesis
+      : typeof (globalThis as any).speechSynthesis !== 'undefined'
+        ? (globalThis as any).speechSynthesis
+        : null;
+    if (synth) {
+      synth.cancel();
+    }
+    this.isAiSpeaking = false;
+    this.aiAudioLevel = 0;
+  }
+
+  destroy() {
+    this.stopAllAudio();
+    if (this.animFrameId) {
+      cancelAnimationFrame(this.animFrameId);
+      this.animFrameId = null;
+    }
+    try { this.recognition?.stop(); } catch (e) {}
+    this.stream?.getTracks().forEach((t) => t.stop());
+    this.inputCtx?.close();
+    this.outputCtx?.close();
+  }
+}
diff --git a/src/lib/components/AudioDeviceSelector.svelte b/src/lib/components/AudioDeviceSelector.svelte
new file mode 100644
index 0000000..13ffd5a
--- /dev/null
+++ b/src/lib/components/AudioDeviceSelector.svelte
@@ -0,0 +1,89 @@
+<script lang="ts">
+  import { onMount } from 'svelte';
+  import { Mic, Check, AlertCircle } from '@lucide/svelte';
+
+  interface Props {
+    selectedDeviceId?: string;
+    onSelect?: (deviceId: string) => void;
+    onselect?: (deviceId: string) => void;
+    class?: string;
+  }
+
+  let { selectedDeviceId, onSelect, onselect, class: className = '' }: Props = $props();
+
+  let devices = $state<MediaDeviceInfo[]>([]);
+  let error = $state<string | null>(null);
+
+  function notifySelect(deviceId: string) {
+    onselect?.(deviceId);
+    onSelect?.(deviceId);
+  }
+
+  async function getDevices() {
+    try {
+      if (typeof navigator === 'undefined' || !navigator.mediaDevices) return;
+      await navigator.mediaDevices.getUserMedia({ audio: true });
+      const allDevices = await navigator.mediaDevices.enumerateDevices();
+      const audioInputs = allDevices.filter((d) => d.kind === 'audioinput');
+      devices = audioInputs;
+    } catch (err: any) {
+      console.warn('Error accessing audio devices:', err);
+      error = 'Microphone access denied. Please check your browser permissions.';
+    }
+  }
+
+  onMount(() => {
+    getDevices();
+    if (typeof navigator !== 'undefined' && navigator.mediaDevices) {
+      navigator.mediaDevices.addEventListener('devicechange', getDevices);
+      return () => {
+        navigator.mediaDevices.removeEventListener('devicechange', getDevices);
+      };
+    }
+  });
+</script>
+
+{#if error}
+  <div class="flex items-center gap-2 p-3 bg-red-50 border border-red-100 rounded-xl text-red-600 text-xs">
+    <AlertCircle size={14} />
+    <span>{error}</span>
+  </div>
+{:else}
+  <div class="space-y-2 {className}">
+    <div class="grid grid-cols-1 gap-2 max-h-48 overflow-y-auto pr-1">
+      {#each devices as device, i (device.deviceId || i)}
+        {@const isSelected = selectedDeviceId === device.deviceId || (!selectedDeviceId && (device.deviceId === 'default' || i === 0))}
+        <button
+          type="button"
+          onclick={() => notifySelect(device.deviceId)}
+          class="flex items-center justify-between p-3 rounded-2xl border text-left transition-all cursor-pointer {isSelected
+            ? 'bg-teal-50 border-teal-500 shadow-sm'
+            : 'bg-white border-slate-200 hover:border-slate-300'}"
+        >
+          <div class="flex items-center gap-3 overflow-hidden pr-2">
+            <div
+              class="w-7 h-7 rounded-full flex items-center justify-center shrink-0 {isSelected
+                ? 'bg-teal-600 text-white'
+                : 'bg-slate-100 text-slate-400'}"
+            >
+              <Mic size={14} />
+            </div>
+            <span class="text-xs font-medium text-slate-700 truncate">
+              {device.label || `Microphone ${i + 1}`}
+            </span>
+          </div>
+
+          {#if isSelected}
+            <div class="bg-teal-600 text-white p-1 rounded-full shrink-0">
+              <Check size={12} />
+            </div>
+          {/if}
+        </button>
+      {/each}
+
+      {#if devices.length === 0}
+        <p class="text-xs text-slate-400 italic p-2 text-center">No audio input devices detected.</p>
+      {/if}
+    </div>
+  </div>
+{/if}
diff --git a/src/lib/components/AudioVisualizer.svelte b/src/lib/components/AudioVisualizer.svelte
new file mode 100644
index 0000000..754f461
--- /dev/null
+++ b/src/lib/components/AudioVisualizer.svelte
@@ -0,0 +1,51 @@
+<script lang="ts">
+  interface Props {
+    level: number;
+    active?: boolean;
+    isAiSpeaking?: boolean;
+    isUserSpeaking?: boolean;
+    isMuted?: boolean;
+  }
+
+  let {
+    level,
+    active,
+    isAiSpeaking = false,
+    isUserSpeaking = false,
+    isMuted = false
+  }: Props = $props();
+
+  const isActive = $derived(
+    active !== undefined
+      ? active
+      : !isMuted && (isAiSpeaking || isUserSpeaking || level > 2)
+  );
+
+  const barCount = 19;
+  const center = (barCount - 1) / 2;
+
+  // Compute heights reactively in microtasks with zero VDOM overhead
+  const bars = $derived(
+    Array.from({ length: barCount }, (_, i) => {
+      const dist = Math.abs(i - center);
+      const multiplier = Math.pow(0.88, dist);
+      const jitter = 0.8 + Math.sin(i * 1.5) * 0.2;
+      const height = isActive ? Math.max(8, level * multiplier * jitter) : 6;
+      const opacity = isActive ? 1 - dist / barCount : 0.3;
+      return { height, opacity };
+    })
+  );
+</script>
+
+<div class="flex items-center justify-center gap-1.5 h-24 w-full px-4">
+  {#each bars as bar, i (i)}
+    <div
+      class="w-1.5 rounded-full transition-all duration-100 ease-out border-b border-white/5 {isActive
+        ? isAiSpeaking
+          ? 'bg-blue-400 shadow-[0_0_15px_rgba(59,130,246,0.6)]'
+          : 'bg-teal-400 shadow-[0_0_15px_rgba(45,212,191,0.6)]'
+        : 'bg-slate-700/50'}"
+      style="height: {bar.height}%; opacity: {bar.opacity};"
+    ></div>
+  {/each}
+</div>
diff --git a/src/lib/components/CBTReference.svelte b/src/lib/components/CBTReference.svelte
new file mode 100644
index 0000000..739b82e
--- /dev/null
+++ b/src/lib/components/CBTReference.svelte
@@ -0,0 +1,156 @@
+<script lang="ts">
+  import { CBT_GLOSSARY, type GlossaryEntry } from '../../../constants';
+  import { X, Search, BookOpen, Brain, Activity, HelpCircle } from '@lucide/svelte';
+  import Button from './ui/Button.svelte';
+  import Input from './ui/Input.svelte';
+  import Badge from './ui/Badge.svelte';
+  import ScrollArea from './ui/ScrollArea.svelte';
+  import Card from './ui/Card.svelte';
+  import CardHeader from './ui/CardHeader.svelte';
+  import CardTitle from './ui/CardTitle.svelte';
+  import CardContent from './ui/CardContent.svelte';
+
+  interface Props {
+    onclose: () => void;
+  }
+
+  let { onclose }: Props = $props();
+
+  let search = $state('');
+  let activeCategory = $state<'All' | 'Distortion' | 'Technique' | 'Concept'>('All');
+
+  const categories: ('All' | 'Distortion' | 'Technique' | 'Concept')[] = [
+    'All',
+    'Distortion',
+    'Technique',
+    'Concept'
+  ];
+
+  let filtered = $derived(
+    CBT_GLOSSARY.filter((entry) => {
+      const matchesSearch =
+        entry.term.toLowerCase().includes(search.toLowerCase()) ||
+        entry.definition.toLowerCase().includes(search.toLowerCase());
+      const matchesCategory =
+        activeCategory === 'All' || entry.category === activeCategory;
+      return matchesSearch && matchesCategory;
+    })
+  );
+</script>
+
+<div class="fixed inset-0 z-[60] flex items-center justify-center p-4 bg-slate-900/60 backdrop-blur-sm">
+  <div class="bg-white rounded-2xl shadow-2xl w-full max-w-4xl h-[85vh] overflow-hidden flex flex-col animate-in fade-in zoom-in duration-300">
+    <!-- Header -->
+    <div class="p-6 bg-slate-50 border-b border-slate-200 flex justify-between items-center shrink-0">
+      <div class="flex items-center gap-3">
+        <div class="bg-teal-600 p-2 rounded-lg text-white">
+          <BookOpen size={24} />
+        </div>
+        <div>
+          <h2 class="text-xl font-bold text-slate-800">CBT Clinical Reference</h2>
+          <p class="text-xs text-slate-500 font-medium uppercase tracking-widest">
+            Evidence-Based Concepts & Frameworks
+          </p>
+        </div>
+      </div>
+      <Button
+        variant="ghost"
+        size="icon"
+        onclick={onclose}
+        class="text-slate-400 hover:bg-slate-200 rounded-xl"
+      >
+        <X size={20} />
+      </Button>
+    </div>
+
+    <!-- Filters -->
+    <div class="p-6 space-y-4 border-b border-slate-100 bg-white shrink-0">
+      <div class="relative">
+        <Search class="absolute left-4 top-1/2 -translate-y-1/2 text-slate-400" size={18} />
+        <Input
+          type="text"
+          placeholder="Search concepts, distortions, or definitions..."
+          bind:value={search}
+          class="w-full pl-12 pr-4 h-12 bg-slate-50 border-slate-200 rounded-xl focus-visible:ring-teal-500/50"
+        />
+      </div>
+
+      <div class="flex flex-wrap gap-2">
+        {#each categories as cat (cat)}
+          <Button
+            variant={activeCategory === cat ? 'default' : 'outline'}
+            onclick={() => (activeCategory = cat)}
+            class="rounded-full text-xs font-bold {activeCategory === cat
+              ? 'bg-teal-600 hover:bg-teal-700 shadow-md shadow-teal-100 text-white'
+              : 'text-slate-500 hover:text-teal-600 hover:border-teal-200'}"
+          >
+            {cat}
+          </Button>
+        {/each}
+      </div>
+    </div>
+
+    <!-- Content -->
+    <ScrollArea class="flex-grow bg-slate-50/30 p-6">
+      <div class="grid grid-cols-1 md:grid-cols-2 gap-4 pb-6">
+        {#each filtered as entry (entry.term)}
+          <Card class="hover:border-teal-200 transition-all group shadow-sm border-slate-200">
+            <CardHeader class="pb-2">
+              <div class="flex justify-between items-start mb-2">
+                <CardTitle class="text-base group-hover:text-teal-700 transition-colors">
+                  {entry.term}
+                </CardTitle>
+                <Badge
+                  variant="outline"
+                  class="flex items-center gap-1.5 px-2 py-0.5 bg-slate-50 border-slate-100 rounded text-[9px] font-black uppercase tracking-tighter text-slate-500"
+                >
+                  {#if entry.category === 'Distortion'}
+                    <Brain size={16} class="text-rose-500" />
+                  {:else if entry.category === 'Technique'}
+                    <Activity size={16} class="text-teal-500" />
+                  {:else if entry.category === 'Concept'}
+                    <HelpCircle size={16} class="text-amber-500" />
+                  {:else}
+                    <BookOpen size={16} />
+                  {/if}
+                  {entry.category}
+                </Badge>
+              </div>
+            </CardHeader>
+            <CardContent>
+              <p class="text-sm text-slate-600 leading-relaxed mb-4 font-light">
+                {entry.definition}
+              </p>
+              {#if entry.example}
+                <div class="bg-teal-50/50 p-3 rounded-xl border border-teal-100">
+                  <span class="text-[9px] font-black uppercase text-teal-600 block mb-1">
+                    Clinical Example
+                  </span>
+                  <p class="text-xs text-teal-800 italic leading-relaxed">
+                    "{entry.example}"
+                  </p>
+                </div>
+              {/if}
+            </CardContent>
+          </Card>
+        {/each}
+
+        {#if filtered.length === 0}
+          <div class="col-span-full py-20 text-center space-y-4">
+            <div class="w-16 h-16 bg-slate-100 rounded-full flex items-center justify-center mx-auto text-slate-400">
+              <Search size={32} />
+            </div>
+            <p class="text-slate-400 text-sm font-medium">No concepts matching your search parameters.</p>
+          </div>
+        {/if}
+      </div>
+    </ScrollArea>
+
+    <!-- Footer -->
+    <div class="p-4 bg-white border-t border-slate-100 text-center shrink-0">
+      <p class="text-[10px] text-slate-400 font-medium uppercase tracking-widest">
+        References compiled from clinical CBT standard frameworks.
+      </p>
+    </div>
+  </div>
+</div>
diff --git a/src/lib/components/ChatInput.svelte b/src/lib/components/ChatInput.svelte
new file mode 100644
index 0000000..13931e3
--- /dev/null
+++ b/src/lib/components/ChatInput.svelte
@@ -0,0 +1,46 @@
+<script lang="ts">
+  import { Send } from '@lucide/svelte';
+
+  interface Props {
+    disabled?: boolean;
+    onsend: (text: string) => void;
+  }
+
+  let { disabled = false, onsend }: Props = $props();
+
+  let input = $state('');
+
+  function handleSend() {
+    if (!input.trim() || disabled) return;
+    onsend(input);
+    input = '';
+  }
+
+  function handleKeyDown(e: KeyboardEvent) {
+    if (e.key === 'Enter' && !e.shiftKey) {
+      e.preventDefault();
+      handleSend();
+    }
+  }
+</script>
+
+<div class="p-4 border-t border-slate-100 bg-[#FCFDFF]">
+  <div class="flex gap-2 max-w-3xl mx-auto">
+    <input
+      type="text"
+      bind:value={input}
+      onkeydown={handleKeyDown}
+      placeholder="Type your response in character..."
+      class="flex-grow px-5 py-3 border border-slate-200 rounded-xl focus:outline-none focus:ring-2 focus:ring-teal-500 bg-white text-slate-900 placeholder:text-slate-400 text-sm shadow-inner"
+      {disabled}
+    />
+    <button
+      type="button"
+      onclick={handleSend}
+      disabled={disabled || !input.trim()}
+      class="bg-teal-600 text-white p-3 rounded-xl hover:bg-teal-700 disabled:opacity-50 transition-all shadow-md shadow-teal-100 active:scale-95 cursor-pointer disabled:cursor-not-allowed"
+    >
+      <Send size={20} />
+    </button>
+  </div>
+</div>
diff --git a/src/lib/components/ChatMessage.svelte b/src/lib/components/ChatMessage.svelte
new file mode 100644
index 0000000..0bc0e0d
--- /dev/null
+++ b/src/lib/components/ChatMessage.svelte
@@ -0,0 +1,44 @@
+<script lang="ts">
+  import type { Message } from '../../../types';
+  import { User, Bot } from '@lucide/svelte';
+
+  interface Props {
+    message: Message;
+    isLoading?: boolean;
+  }
+
+  let { message, isLoading = false }: Props = $props();
+
+  const isModel = $derived(message.role === 'model');
+</script>
+
+<div class="flex {!isModel ? 'justify-end' : 'justify-start'}">
+  <div class="flex max-w-[85%] gap-3 {!isModel ? 'flex-row-reverse' : 'flex-row'}">
+    <div
+      class="w-9 h-9 rounded-full flex items-center justify-center shrink-0 shadow-sm border {!isModel
+        ? 'bg-teal-50 text-teal-600 border-teal-100'
+        : 'bg-slate-50 text-slate-600 border-slate-100'}"
+    >
+      {#if !isModel}
+        <User size={18} />
+      {:else}
+        <Bot size={18} />
+      {/if}
+    </div>
+    <div
+      class="p-4 rounded-2xl text-sm leading-relaxed shadow-sm {!isModel
+        ? 'bg-teal-600 text-white rounded-tr-none'
+        : 'bg-[#F9FAFB] text-slate-800 rounded-tl-none border border-slate-100'}"
+    >
+      {#if message.text}
+        {message.text}
+      {:else if isModel && isLoading}
+        <div class="flex gap-1 items-center py-1">
+          <span class="w-1.5 h-1.5 bg-slate-400 rounded-full animate-bounce" style="animation-delay: 0ms;"></span>
+          <span class="w-1.5 h-1.5 bg-slate-400 rounded-full animate-bounce" style="animation-delay: 150ms;"></span>
+          <span class="w-1.5 h-1.5 bg-slate-400 rounded-full animate-bounce" style="animation-delay: 300ms;"></span>
+        </div>
+      {/if}
+    </div>
+  </div>
+</div>
diff --git a/src/lib/components/ChatSession.svelte b/src/lib/components/ChatSession.svelte
new file mode 100644
index 0000000..f19990b
--- /dev/null
+++ b/src/lib/components/ChatSession.svelte
@@ -0,0 +1,253 @@
+<script lang="ts">
+  import { tick } from 'svelte';
+  import type { Scenario, Message, AnalysisResult, UserSettings } from '../../../types';
+  import { BrainCircuit, ChevronLeft, Flag, Loader2 } from '@lucide/svelte';
+  import {
+    streamOpenRouterChat,
+    analyzeTurnWithOpenRouter,
+    generateSessionSummaryReport
+  } from '../../../services/openRouterService';
+  import { saveSession } from '../../../services/sessionStorage';
+
+  import ChatMessage from './ChatMessage.svelte';
+  import ChatInput from './ChatInput.svelte';
+  import LiveInsightPanel from './LiveInsightPanel.svelte';
+  import SessionReport from './SessionReport.svelte';
+
+  interface Props {
+    scenario: Scenario;
+    userSettings?: UserSettings;
+    onexit: () => void;
+  }
+
+  let { scenario, userSettings, onexit }: Props = $props();
+
+  let messages = $state<Message[]>([]);
+  let isLoading = $state(false);
+  let status = $state<'active' | 'analyzing' | 'finished'>('active');
+
+  $effect(() => {
+    messages = [
+      {
+        id: 'init',
+        role: 'model',
+        text: scenario.initialMessage,
+        timestamp: new Date()
+      }
+    ];
+  });
+
+  let liveInsight = $state<AnalysisResult | null>(null);
+  let isAnalyzingTurn = $state(false);
+  let finalReport = $state<AnalysisResult | null>(null);
+
+  let messagesEndRef: HTMLDivElement | null = $state(null);
+
+  async function scrollToBottom() {
+    await tick();
+    messagesEndRef?.scrollIntoView({ behavior: 'smooth' });
+  }
+
+  $effect(() => {
+    // Track messages length to trigger scroll
+    if (messages.length) {
+      scrollToBottom();
+    }
+  });
+
+  async function handleSend(text: string) {
+    if (isLoading || !text.trim()) return;
+
+    const userMsg: Message = {
+      id: Date.now().toString(),
+      role: 'user',
+      text,
+      timestamp: new Date()
+    };
+
+    const updatedHistory = [...messages, userMsg];
+    messages = updatedHistory;
+    isLoading = true;
+
+    const botMsgId = (Date.now() + 1).toString();
+    const botMsg: Message = {
+      id: botMsgId,
+      role: 'model',
+      text: '',
+      timestamp: new Date()
+    };
+    messages = [...updatedHistory, botMsg];
+
+    const roleplaySystemInstruction = `
+      ${scenario.systemInstruction}
+      
+      [CONTEXT]
+      You are participating in a clinical CBT roleplay simulation. 
+      The instructions above define your character, the scenario, and your internal CBT logic.
+      
+      [TASK]
+      Respond to the user naturally in character to advance the roleplay scenario.
+      
+      [CONSTRAINTS]
+      - CRITICAL: Stay strictly in character as the persona defined in the scenario.
+      - CRITICAL: NEVER provide clinical feedback, advice, or meta-commentary about the user's progress.
+      - CRITICAL: NEVER use phrases like "Great job holding your boundary" or "Feedback:".
+      - CRITICAL: Do not congratulate the user on using CBT techniques; simply react as the character would.
+      - If the user successfully concludes the scenario, end the dialogue naturally.
+      
+      [OUTPUT REQUIREMENTS]
+      Return the character's direct dialogue response. Keep it conversational and proportional to the user's input.
+    `;
+
+    try {
+      let accumulatedText = '';
+      await streamOpenRouterChat(
+        updatedHistory,
+        roleplaySystemInstruction,
+        {
+          onChunk: (chunk) => {
+            accumulatedText += chunk;
+            messages = messages.map((m) =>
+              m.id === botMsgId ? { ...m, text: accumulatedText } : m
+            );
+          },
+          onComplete: (fullText) => {
+            isAnalyzingTurn = true;
+            const turnContext = `User said: "${userMsg.text}". Roleplay partner said: "${fullText}".`;
+            analyzeTurnWithOpenRouter(
+              turnContext,
+              scenario.title,
+              scenario.description,
+              scenario.cbtFocus,
+              {
+                apiKey: userSettings?.openRouterApiKey,
+                model: userSettings?.supervisorModel
+              }
+            )
+              .then((res) => {
+                liveInsight = res;
+              })
+              .catch((e) => {
+                console.error('Live analysis failed', e);
+              })
+              .finally(() => {
+                isAnalyzingTurn = false;
+              });
+          },
+          onError: (err) => {
+            console.error('OpenRouter stream failed', err);
+          }
+        },
+        {
+          apiKey: userSettings?.openRouterApiKey,
+          model: userSettings?.roleplayModel
+        }
+      );
+    } catch (error) {
+      console.error('Chat transmission failed', error);
+      messages = messages.filter((m) => m.text !== '');
+    } finally {
+      isLoading = false;
+    }
+  }
+
+  async function handleFinishSession() {
+    if (messages.length < 2) return onexit();
+
+    status = 'analyzing';
+
+    try {
+      const reportData = await generateSessionSummaryReport(
+        messages,
+        scenario.title,
+        scenario.description,
+        {
+          apiKey: userSettings?.openRouterApiKey,
+          model: userSettings?.supervisorModel
+        }
+      );
+
+      finalReport = reportData;
+      saveSession(scenario, 'text', messages, reportData);
+      status = 'finished';
+    } catch (err) {
+      console.error('Post-session analysis failure', err);
+      onexit();
+    }
+  }
+</script>
+
+{#if status === 'analyzing'}
+  <div class="flex flex-col items-center justify-center min-h-[500px] h-full bg-slate-50 rounded-3xl p-8 border border-slate-200 w-full max-w-2xl mx-auto animate-in fade-in duration-500">
+    <div class="bg-white p-12 rounded-full shadow-lg border border-teal-100 mb-8 relative">
+      <BrainCircuit size={64} class="text-teal-600 animate-pulse" />
+      <div class="absolute inset-0 border-4 border-teal-500 border-t-transparent rounded-full animate-spin"></div>
+    </div>
+    <h2 class="text-2xl font-bold text-slate-800 mb-2">Compiling Report</h2>
+    <p class="text-slate-500 text-center max-w-sm">
+      Generating evidence-based synthesis of your cognitive and behavioral patterns during this session via OpenRouter...
+    </p>
+  </div>
+{:else if status === 'finished' && finalReport}
+  <SessionReport
+    analysis={finalReport}
+    scenarioTitle={scenario.title}
+    {messages}
+    {onexit}
+  />
+{:else}
+  <div class="flex flex-col h-[calc(100vh-80px)] sm:h-[calc(100vh-90px)] max-w-6xl mx-auto w-full gap-3 sm:gap-4 px-1 sm:px-2">
+    <!-- Interaction Header -->
+    <header class="bg-white p-3.5 sm:p-4 rounded-2xl shadow-sm border border-slate-200/80 flex justify-between items-center shrink-0">
+      <div class="flex items-center gap-3 min-w-0">
+        <button
+          type="button"
+          onclick={onexit}
+          class="p-2 hover:bg-slate-100 rounded-xl text-slate-400 hover:text-teal-600 transition-colors cursor-pointer shrink-0"
+          title="Exit Session"
+        >
+          <ChevronLeft size={20} />
+        </button>
+        <div class="min-w-0">
+          <h2 class="font-bold text-slate-800 text-base sm:text-lg leading-tight truncate">{scenario.title}</h2>
+          <div class="flex flex-wrap gap-1.5 mt-0.5">
+            {#each scenario.cbtFocus.slice(0, 3) as f (f)}
+              <span class="text-[9px] sm:text-[10px] font-bold text-teal-600 bg-teal-50 px-2 py-0.5 rounded-full uppercase tracking-wider">{f}</span>
+            {/each}
+          </div>
+        </div>
+      </div>
+      <button
+        type="button"
+        onclick={handleFinishSession}
+        class="flex items-center gap-1.5 sm:gap-2 px-3 sm:px-4 py-2 sm:py-2.5 rounded-xl bg-teal-600 hover:bg-teal-700 text-white text-[10px] sm:text-xs font-black uppercase tracking-wider transition-all shadow-sm shadow-teal-600/30 cursor-pointer shrink-0 ml-2"
+      >
+        <Flag size={14} />
+        <span>Complete Interaction</span>
+      </button>
+    </header>
+
+    <!-- Dual-Pane Stage -->
+    <div class="flex flex-col lg:flex-row gap-3 sm:gap-4 flex-1 min-h-0 overflow-hidden">
+      <!-- Core Chat Conversation -->
+      <div class="flex-1 min-w-0 flex flex-col bg-white rounded-2xl shadow-sm border border-slate-200/80 overflow-hidden">
+        <div class="flex-grow overflow-y-auto p-4 sm:p-6 space-y-4 sm:space-y-6">
+          {#each messages as msg, index (msg.id)}
+            <ChatMessage
+              message={msg}
+              isLoading={isLoading && index === messages.length - 1}
+            />
+          {/each}
+          <div bind:this={messagesEndRef}></div>
+        </div>
+
+        <ChatInput onsend={handleSend} disabled={isLoading} />
+      </div>
+
+      <!-- Real-Time Clinical Supervision Panel -->
+      <div class="w-full lg:w-[380px] xl:w-[420px] shrink-0 h-[360px] lg:h-full min-h-0 overflow-hidden">
+        <LiveInsightPanel analysis={liveInsight} isAnalyzing={isAnalyzingTurn} theme="light" />
+      </div>
+    </div>
+  </div>
+{/if}
diff --git a/src/lib/components/LiveInsightPanel.svelte b/src/lib/components/LiveInsightPanel.svelte
new file mode 100644
index 0000000..94710a3
--- /dev/null
+++ b/src/lib/components/LiveInsightPanel.svelte
@@ -0,0 +1,174 @@
+<script lang="ts">
+  import type { AnalysisResult } from '../../../types';
+  import { BrainCircuit, Loader2, CheckCircle2, AlertTriangle, Lightbulb, TrendingUp } from '@lucide/svelte';
+  import Tooltip from './ui/Tooltip.svelte';
+
+  interface Props {
+    analysis: AnalysisResult | null;
+    isAnalyzing: boolean;
+    theme?: 'light' | 'dark';
+    class?: string;
+  }
+
+  let {
+    analysis,
+    isAnalyzing,
+    theme = 'light',
+    class: customClass = ''
+  }: Props = $props();
+
+  const isDark = $derived(theme === 'dark');
+</script>
+
+<div
+  class="w-full h-full flex flex-col overflow-y-auto {isDark
+    ? 'bg-slate-900/80 text-white border border-white/10 rounded-2xl shadow-2xl'
+    : 'bg-white text-slate-800 border border-slate-200 rounded-2xl shadow-sm'} {customClass}"
+>
+  <!-- Panel Header -->
+  <div
+    class="p-4 sm:p-5 border-b flex items-center justify-between shrink-0 {isDark
+      ? 'border-white/10 bg-black/20'
+      : 'border-slate-100 bg-[#F8FAFC]'}"
+  >
+    <div class="flex items-center gap-2.5">
+      <div class="p-1.5 rounded-lg {isDark ? 'bg-teal-500/20 text-teal-400' : 'bg-teal-50 text-teal-600'}">
+        <BrainCircuit size={18} />
+      </div>
+      <div>
+        <h3 class="font-bold text-xs uppercase tracking-widest {isDark ? 'text-white' : 'text-slate-800'}">
+          Live Clinical Insight
+        </h3>
+        <p class="text-[10px] {isDark ? 'text-slate-400' : 'text-slate-400'}">
+          Turn-by-turn CBT supervision
+        </p>
+      </div>
+    </div>
+    {#if isAnalyzing}
+      <div class="flex items-center gap-1.5 px-2.5 py-1 rounded-full {isDark ? 'bg-teal-500/10 text-teal-300' : 'bg-teal-50 text-teal-600'}">
+        <Loader2 size={13} class="animate-spin" />
+        <span class="text-[10px] font-bold uppercase tracking-wider">Evaluating</span>
+      </div>
+    {/if}
+  </div>
+
+  <!-- Panel Content -->
+  <div class="p-4 sm:p-5 space-y-4 flex-grow overflow-y-auto">
+    {#if analysis}
+      <div class="space-y-4 animate-in fade-in duration-300">
+        <!-- Thinking Classification -->
+        <Tooltip content="Identifies whether your last statement followed adaptive, evidence-based thinking patterns or contained cognitive distortions.">
+          <div
+            class="p-4 rounded-xl border transition-all {analysis.analysis.isAdaptive
+              ? isDark
+                ? 'bg-teal-950/40 border-teal-500/40 text-teal-200'
+                : 'bg-teal-50/70 border-teal-500/60 text-teal-900 border-l-4'
+              : isDark
+                ? 'bg-rose-950/40 border-rose-500/40 text-rose-200'
+                : 'bg-rose-50/70 border-rose-500/60 text-rose-900 border-l-4'}"
+          >
+            <div class="flex items-center gap-2 mb-2">
+              {#if analysis.analysis.isAdaptive}
+                <CheckCircle2 size={16} class="{isDark ? 'text-teal-400' : 'text-teal-600'} shrink-0" />
+              {:else}
+                <AlertTriangle size={16} class="{isDark ? 'text-rose-400' : 'text-rose-600'} shrink-0" />
+              {/if}
+              <span
+                class="font-bold text-[11px] uppercase tracking-wider {analysis.analysis.isAdaptive
+                  ? isDark ? 'text-teal-300' : 'text-teal-800'
+                  : isDark ? 'text-rose-300' : 'text-rose-800'}"
+              >
+                {analysis.analysis.isAdaptive ? 'Optimal Thinking' : 'Distortion Identified'}
+              </span>
+            </div>
+
+            {#if !analysis.analysis.isAdaptive && analysis.analysis.distortions.length > 0}
+              <div class="flex flex-wrap gap-1.5 mb-2.5">
+                {#each analysis.analysis.distortions as distortion}
+                  <span class="text-[9px] font-black uppercase tracking-wider text-white bg-rose-500/90 px-2 py-0.5 rounded shadow-sm">
+                    {distortion}
+                  </span>
+                {/each}
+              </div>
+            {/if}
+
+            <p class="text-xs leading-relaxed font-normal {isDark ? 'text-slate-200' : 'text-slate-700'}">
+              {analysis.analysis.evidence}
+            </p>
+          </div>
+        </Tooltip>
+
+        <!-- Efficiency Rating -->
+        <Tooltip content="A score representing your effectiveness in applying CBT techniques to this specific turn.">
+          <div class="p-4 rounded-xl border {isDark ? 'bg-white/5 border-white/10' : 'bg-slate-50 border-slate-100'}">
+            <div class="flex justify-between items-center mb-2">
+              <span class="text-[10px] font-bold uppercase tracking-widest {isDark ? 'text-slate-400' : 'text-slate-500'}">
+                Restructuring Efficiency
+              </span>
+              <div class="flex gap-1">
+                {#each [1, 2, 3, 4, 5] as star}
+                  <div
+                    class="h-1.5 w-4 rounded-full {star <= analysis.rating.score
+                      ? 'bg-teal-500'
+                      : isDark ? 'bg-white/10' : 'bg-slate-200'}"
+                  ></div>
+                {/each}
+              </div>
+            </div>
+            <p class="text-xs font-normal leading-relaxed {isDark ? 'text-slate-300' : 'text-slate-600'}">
+              {analysis.rating.reason}
+            </p>
+          </div>
+        </Tooltip>
+
+        <!-- Master Reframe -->
+        <Tooltip content="A balanced, evidence-based alternative perspective for this specific moment in the interaction.">
+          <div
+            class="p-4 rounded-xl border relative overflow-hidden group {isDark
+              ? 'bg-gradient-to-br from-teal-950/40 to-slate-900/60 border-teal-500/30'
+              : 'bg-white border-teal-200 shadow-sm'}"
+          >
+            <div class="flex items-center gap-2 text-teal-500 mb-2">
+              <Lightbulb size={16} />
+              <span class="text-[10px] font-black uppercase tracking-widest {isDark ? 'text-teal-300' : 'text-slate-800'}">
+                Master Reframe
+              </span>
+            </div>
+            <p class="text-xs sm:text-sm italic font-medium leading-relaxed {isDark ? 'text-teal-100' : 'text-slate-800'}">
+              "{analysis.suggestions.alternativeThought}"
+            </p>
+          </div>
+        </Tooltip>
+
+        <!-- Tactical Pivot -->
+        <Tooltip content="Actionable behavioral advice to improve your communication or internal response in the next turn.">
+          <div class="p-4 rounded-xl border {isDark ? 'bg-white/5 border-white/10' : 'bg-white border-slate-200 shadow-sm'}">
+            <div class="flex items-center gap-2 text-teal-500 mb-2">
+              <TrendingUp size={16} />
+              <span class="text-[10px] font-black uppercase tracking-widest {isDark ? 'text-slate-300' : 'text-slate-800'}">
+                Tactical Pivot
+              </span>
+            </div>
+            <p class="text-xs leading-relaxed font-normal {isDark ? 'text-slate-300' : 'text-slate-700'}">
+              {analysis.suggestions.behavioralStep}
+            </p>
+          </div>
+        </Tooltip>
+      </div>
+    {:else}
+      <div class="h-full flex flex-col items-center justify-center text-center p-6 space-y-4 py-16">
+        <div class="w-14 h-14 rounded-2xl flex items-center justify-center border {isDark ? 'bg-white/5 border-white/10 text-teal-400' : 'bg-slate-50 border-slate-100 text-teal-600'} animate-pulse">
+          <BrainCircuit size={28} />
+        </div>
+        <div>
+          <p class="text-[11px] font-bold uppercase tracking-widest {isDark ? 'text-slate-300' : 'text-slate-600'} mb-1">
+            Monitoring Interaction
+          </p>
+          <p class="text-xs font-light max-w-xs {isDark ? 'text-slate-400' : 'text-slate-500'} leading-relaxed">
+            Turn-by-turn clinical supervision and reframing suggestions will appear here automatically.
+          </p>
+        </div>
+      </div>
+    {/if}
+  </div>
+</div>
diff --git a/src/lib/components/ReloadPrompt.svelte b/src/lib/components/ReloadPrompt.svelte
new file mode 100644
index 0000000..ed6cecd
--- /dev/null
+++ b/src/lib/components/ReloadPrompt.svelte
@@ -0,0 +1,105 @@
+<script lang="ts">
+  import { onMount } from 'svelte';
+  import Button from './ui/Button.svelte';
+  import Dialog from './ui/Dialog.svelte';
+
+  let offlineReady = $state(false);
+  let needRefresh = $state(false);
+  let updateSW: ((reloadPage?: boolean) => Promise<void>) | null = null;
+
+  onMount(() => {
+    if (import.meta.env.DEV) {
+      if ('serviceWorker' in navigator) {
+        navigator.serviceWorker.getRegistrations().then((registrations) => {
+          registrations.forEach((registration) => registration.unregister());
+        });
+      }
+      if (typeof caches !== 'undefined') {
+        caches.keys().then((keys) => {
+          keys.forEach((key) => {
+            if (key.toLowerCase().includes('workbox') || key.toLowerCase().includes('cognitive-clarity')) {
+              caches.delete(key);
+            }
+          });
+        });
+      }
+      return;
+    }
+
+    import('virtual:pwa-register').then(({ registerSW }) => {
+      updateSW = registerSW({
+        immediate: true,
+        onNeedRefresh() {
+          needRefresh = true;
+        },
+        onOfflineReady() {
+          offlineReady = true;
+        },
+        onRegisteredSW(swUrl, r) {
+          if (r) {
+            setInterval(() => {
+              r.update();
+            }, 60 * 60 * 1000);
+
+            window.addEventListener('online', () => {
+              r.update();
+            });
+          }
+
+          if ('serviceWorker' in navigator) {
+            navigator.serviceWorker.addEventListener('controllerchange', () => {
+              window.location.reload();
+            });
+          }
+        }
+      });
+    }).catch((err) => {
+      console.warn('[PWA] Service worker registration error:', err);
+    });
+  });
+
+  function close() {
+    offlineReady = false;
+    needRefresh = false;
+  }
+
+  function handleReload() {
+    if (updateSW) {
+      updateSW(true);
+    }
+  }
+</script>
+
+<Dialog open={needRefresh || offlineReady} onclose={close} class="sm:max-w-md bg-slate-900 border-slate-800 text-slate-100">
+  <div class="p-6">
+    <div class="mb-4">
+      <h3 class="text-lg font-semibold text-white">
+        {needRefresh ? 'Update Available' : 'Offline Ready'}
+      </h3>
+      <p class="text-sm text-slate-400 mt-2">
+        {needRefresh
+          ? 'A new version of Cognitive Clarity is available. Click reload to update immediately.'
+          : 'The application is ready to work offline.'}
+      </p>
+    </div>
+    <div class="flex justify-start gap-2 pt-2">
+      {#if needRefresh}
+        <Button
+          type="button"
+          onclick={handleReload}
+          class="bg-blue-600 hover:bg-blue-500 text-white"
+        >
+          Reload and Update
+        </Button>
+      {/if}
+      <Button
+        type="button"
+        variant="secondary"
+        onclick={close}
+        class="bg-slate-800 hover:bg-slate-700 text-slate-300 border-none"
+      >
+        Close
+      </Button>
+    </div>
+  </div>
+</Dialog>
diff --git a/src/lib/components/ScenarioCard.svelte b/src/lib/components/ScenarioCard.svelte
new file mode 100644
index 0000000..f324373
--- /dev/null
+++ b/src/lib/components/ScenarioCard.svelte
@@ -0,0 +1,128 @@
+<script lang="ts">
+  import type { Scenario } from '../../../types';
+  import { Mic, MessageSquare, Trash2 } from '@lucide/svelte';
+  import Card from './ui/Card.svelte';
+  import CardHeader from './ui/CardHeader.svelte';
+  import CardTitle from './ui/CardTitle.svelte';
+  import CardDescription from './ui/CardDescription.svelte';
+  import CardContent from './ui/CardContent.svelte';
+  import CardFooter from './ui/CardFooter.svelte';
+  import Button from './ui/Button.svelte';
+  import Badge from './ui/Badge.svelte';
+  import Tooltip from './ui/Tooltip.svelte';
+
+  interface Props {
+    scenario: Scenario;
+    onSelect?: (scenario: Scenario, mode: 'text' | 'voice') => void;
+    onselect?: (scenario: Scenario, mode: 'text' | 'voice') => void;
+    onDelete?: (id: string) => void;
+    ondelete?: (id: string) => void;
+  }
+
+  let { scenario, onSelect, onselect, onDelete, ondelete }: Props = $props();
+
+  const handleSelect = (sc: Scenario, mode: 'text' | 'voice') => {
+    onselect?.(sc, mode);
+    onSelect?.(sc, mode);
+  };
+
+  const handleDelete = (id: string) => {
+    ondelete?.(id);
+    onDelete?.(id);
+  };
+  const hasDelete = $derived(!!(ondelete || onDelete));
+
+  const difficultyVariant = $derived<'default' | 'secondary' | 'destructive' | 'outline'>(
+    scenario.difficulty === 'Beginner'
+      ? 'default'
+      : scenario.difficulty === 'Intermediate'
+        ? 'secondary'
+        : scenario.difficulty === 'Advanced'
+          ? 'destructive'
+          : 'outline'
+  );
+
+  const difficultyExplanations: Record<string, string> = {
+    Beginner: 'Low-stakes environment with highly structured feedback and clear cognitive distortions.',
+    Intermediate: 'Moderate social friction requiring nuanced responses and identifying subtle distortions.',
+    Advanced: 'High-trigger environment with resistant AI personas to test deep emotional regulation.'
+  };
+</script>
+
+<Card class="hover:border-teal-200 hover:shadow-md transition-all flex flex-col h-full group relative overflow-hidden">
+  {#if hasDelete}
+    <Button
+      variant="ghost"
+      size="icon"
+      onclick={(e) => {
+        e.stopPropagation();
+        handleDelete(scenario.id);
+      }}
+      class="absolute top-2 right-2 text-slate-300 hover:text-rose-500 hover:bg-rose-50 opacity-0 group-hover:opacity-100 transition-all z-10"
+      title="Delete custom scenario"
+    >
+      <Trash2 size={16} />
+    </Button>
+  {/if}
+
+  <CardHeader class="pb-2">
+    <div class="flex justify-between items-start mb-2">
+      <Tooltip content={difficultyExplanations[scenario.difficulty] || ''}>
+        <div class="cursor-help">
+          <Badge variant={difficultyVariant} class="text-[10px] uppercase tracking-wider">
+            {scenario.difficulty}
+          </Badge>
+        </div>
+      </Tooltip>
+      {#if !hasDelete}
+        <span class="text-[10px] font-bold text-slate-400 uppercase tracking-widest">
+          {scenario.category}
+        </span>
+      {/if}
+    </div>
+    <CardTitle class="text-lg group-hover:text-teal-700 transition-colors pr-6">
+      {scenario.title}
+    </CardTitle>
+    <CardDescription class="text-sm flex-grow leading-relaxed font-light">
+      {scenario.description}
+    </CardDescription>
+  </CardHeader>
+
+  <CardContent class="flex-grow">
+    <div class="flex flex-wrap gap-1.5 mt-2">
+      {#each scenario.cbtFocus as focus}
+        <Tooltip content={`Specific CBT protocol targeting: ${focus}`}>
+          <Badge variant="outline" class="text-[10px] font-medium bg-slate-50 text-slate-500 cursor-help">
+            {focus}
+          </Badge>
+        </Tooltip>
+      {/each}
+    </div>
+  </CardContent>
+
+  <CardFooter class="pt-0">
+    <div class="grid grid-cols-2 gap-3 w-full">
+      <Tooltip content="Engage in a structured text-based roleplay with real-time feedback." position="bottom">
+        <Button
+          variant="outline"
+          size="sm"
+          onclick={() => handleSelect(scenario, 'text')}
+          class="w-full text-slate-600 font-semibold text-xs"
+        >
+          <MessageSquare size={14} class="mr-2" />
+          Chat
+        </Button>
+      </Tooltip>
+      <Tooltip content="Practice verbal emotional regulation and vocal expression in real-time." position="bottom">
+        <Button
+          size="sm"
+          onclick={() => handleSelect(scenario, 'voice')}
+          class="w-full bg-teal-600 hover:bg-teal-700 text-white font-semibold text-xs shadow-sm shadow-teal-100"
+        >
+          <Mic size={14} class="mr-2" />
+          Voice
+        </Button>
+      </Tooltip>
+    </div>
+  </CardFooter>
+</Card>
diff --git a/src/lib/components/ScenarioGenerator.svelte b/src/lib/components/ScenarioGenerator.svelte
new file mode 100644
index 0000000..ad82b00
--- /dev/null
+++ b/src/lib/components/ScenarioGenerator.svelte
@@ -0,0 +1,207 @@
+<script lang="ts">
+  import type { Scenario, UserSettings } from '../../../types';
+  import { CBT_GLOSSARY } from '../../../constants';
+  import {
+    Sparkles,
+    X,
+    Loader2,
+    AlertCircle,
+    Target,
+    BrainCircuit,
+    Check,
+    BarChart
+  } from '@lucide/svelte';
+  import Button from './ui/Button.svelte';
+  import Textarea from './ui/Textarea.svelte';
+  import ScrollArea from './ui/ScrollArea.svelte';
+  import Card from './ui/Card.svelte';
+  import Badge from './ui/Badge.svelte';
+  import { generateScenarioWithOpenRouter } from '../../../services/openRouterService';
+
+  interface Props {
+    userSettings?: UserSettings;
+    ongenerate: (scenario: Scenario) => void;
+    oncancel: () => void;
+  }
+
+  let { userSettings, ongenerate, oncancel }: Props = $props();
+
+  let prompt = $state('');
+  let selectedConcepts = $state<string[]>([]);
+  let selectedDifficulty = $state<Scenario['difficulty']>('Intermediate');
+  let isLoading = $state(false);
+  let error = $state<string | null>(null);
+
+  function toggleConcept(term: string) {
+    if (selectedConcepts.includes(term)) {
+      selectedConcepts = selectedConcepts.filter((t) => t !== term);
+    } else {
+      selectedConcepts = [...selectedConcepts, term];
+    }
+  }
+
+  async function handleGenerate() {
+    if (!prompt.trim() && selectedConcepts.length === 0) return;
+
+    isLoading = true;
+    error = null;
+
+    try {
+      const scenario = await generateScenarioWithOpenRouter(
+        prompt,
+        selectedConcepts,
+        selectedDifficulty,
+        {
+          apiKey: userSettings?.openRouterApiKey,
+          model: userSettings?.roleplayModel
+        }
+      );
+
+      scenario.difficulty = selectedDifficulty;
+      scenario.id = `custom-${Date.now()}-${scenario.id || 'generated'}`;
+      ongenerate(scenario);
+    } catch (err: any) {
+      console.error('OpenRouter Scenario Generation error:', err);
+      error =
+        err?.message ||
+        'Clinical scenario synthesis failed. Please check your OpenRouter API Key in Settings.';
+    } finally {
+      isLoading = false;
+    }
+  }
+</script>
+
+<div class="fixed inset-0 z-50 flex items-center justify-center p-4 bg-slate-900/60 backdrop-blur-md animate-in fade-in duration-300">
+  <div class="bg-white rounded-3xl shadow-2xl w-full max-w-2xl overflow-hidden border border-slate-100 flex flex-col max-h-[90vh]">
+    <!-- Header -->
+    <div class="p-6 bg-slate-50 border-b border-slate-200 flex justify-between items-center shrink-0">
+      <div class="flex items-center gap-3">
+        <div class="bg-teal-600 p-2.5 rounded-xl text-white shadow-md shadow-teal-600/20">
+          <Sparkles size={20} />
+        </div>
+        <div>
+          <h2 class="text-lg font-bold text-slate-800">Clinical Scenario Architect</h2>
+          <p class="text-[10px] text-slate-400 font-bold uppercase tracking-widest">
+            AI Synthesis Engine • OpenRouter
+          </p>
+        </div>
+      </div>
+      <button
+        type="button"
+        onclick={oncancel}
+        class="p-2 text-slate-400 hover:text-slate-600 hover:bg-slate-200/50 rounded-xl transition-colors"
+      >
+        <X size={20} />
+      </button>
+    </div>
+
+    <ScrollArea class="p-8 space-y-8 flex-grow">
+      <!-- Natural Language Prompt -->
+      <div class="space-y-3">
+        <div class="flex items-center justify-between">
+          <label class="text-xs font-black text-slate-400 uppercase tracking-widest flex items-center gap-2">
+            <Target size={14} class="text-teal-600" />
+            Target Dynamic & Situation
+          </label>
+          <span class="text-[10px] text-slate-400">Describe the conflict or trigger</span>
+        </div>
+        <Textarea
+          placeholder="e.g. Asking my manager for a delayed performance review while fearing I'll be fired for bringing it up..."
+          bind:value={prompt}
+          class="min-h-[100px] text-sm bg-slate-50/50 border-slate-200 rounded-2xl resize-none focus:ring-teal-500 focus:border-teal-500"
+        />
+      </div>
+
+      <!-- Difficulty Tuning -->
+      <div class="space-y-3 pt-4">
+        <span class="text-xs font-black text-slate-400 uppercase tracking-widest flex items-center gap-2">
+          <BarChart size={14} class="text-teal-600" />
+          Emotional Resistance & Difficulty
+        </span>
+        <div class="grid grid-cols-3 gap-3">
+          {#each ['Beginner', 'Intermediate', 'Advanced'] as diff (diff)}
+            <button
+              type="button"
+              onclick={() => (selectedDifficulty = diff as Scenario['difficulty'])}
+              class="p-3.5 text-center cursor-pointer transition-all border rounded-xl {selectedDifficulty ===
+              diff
+                ? 'bg-teal-50 border-teal-500 shadow-sm shadow-teal-500/10'
+                : 'bg-white border-slate-200 hover:border-slate-300'}"
+            >
+              <p class="font-bold text-xs text-slate-800">{diff}</p>
+              <p class="text-[10px] text-slate-400 mt-0.5">
+                {diff === 'Beginner' ? 'High Support' : ''}
+                {diff === 'Intermediate' ? 'Realistic Pushback' : ''}
+                {diff === 'Advanced' ? 'Severe Friction' : ''}
+              </p>
+            </button>
+          {/each}
+        </div>
+      </div>
+
+      <!-- Clinical Focus Selector -->
+      <div class="space-y-3 pt-4">
+        <div class="flex items-center justify-between">
+          <span class="text-xs font-black text-slate-400 uppercase tracking-widest flex items-center gap-2">
+            <BrainCircuit size={14} class="text-teal-600" />
+            Target Cognitive Distortions & Techniques
+          </span>
+          <span class="text-[10px] text-teal-600 font-bold">
+            {selectedConcepts.length} Selected
+          </span>
+        </div>
+
+        <div class="flex flex-wrap gap-2 max-h-44 overflow-y-auto p-1 bg-slate-50 rounded-2xl border border-slate-100">
+          {#each CBT_GLOSSARY as item (item.term)}
+            {@const isSelected = selectedConcepts.includes(item.term)}
+            <button
+              type="button"
+              onclick={() => toggleConcept(item.term)}
+              class="cursor-pointer text-[11px] py-1.5 px-3 rounded-xl transition-all border inline-flex items-center gap-1.5 {isSelected
+                ? 'bg-teal-600 hover:bg-teal-700 text-white font-bold shadow-sm border-teal-600'
+                : 'bg-white text-slate-600 hover:border-teal-300 border-slate-200'}"
+            >
+              {item.term}
+              {#if isSelected}
+                <Check size={12} class="inline" />
+              {/if}
+            </button>
+          {/each}
+        </div>
+      </div>
+
+      {#if error}
+        <div class="mt-4 p-4 bg-rose-50 border border-rose-100 rounded-2xl flex items-center gap-3 text-rose-700 text-xs animate-in fade-in">
+          <AlertCircle size={16} class="shrink-0 text-rose-500" />
+          <span>{error}</span>
+        </div>
+      {/if}
+    </ScrollArea>
+
+    <!-- Footer Actions -->
+    <div class="p-6 bg-slate-50 border-t border-slate-200 flex justify-between items-center shrink-0">
+      <Button
+        variant="ghost"
+        onclick={oncancel}
+        disabled={isLoading}
+        class="text-xs uppercase tracking-widest font-black text-slate-400 hover:text-slate-600"
+      >
+        Cancel
+      </Button>
+
+      <Button
+        onclick={handleGenerate}
+        disabled={isLoading || (!prompt.trim() && selectedConcepts.length === 0)}
+        class="bg-teal-600 hover:bg-teal-700 text-white px-8 h-11 rounded-2xl text-xs uppercase tracking-widest font-black shadow-lg shadow-teal-600/20 flex items-center gap-2"
+      >
+        {#if isLoading}
+          <Loader2 size={16} class="animate-spin" />
+          Synthesizing Scenario...
+        {:else}
+          <Sparkles size={16} />
+          Generate Simulation
+        {/if}
+      </Button>
+    </div>
+  </div>
+</div>
diff --git a/src/lib/components/SessionReport.svelte b/src/lib/components/SessionReport.svelte
new file mode 100644
index 0000000..ddbd8a6
--- /dev/null
+++ b/src/lib/components/SessionReport.svelte
@@ -0,0 +1,199 @@
+<script lang="ts">
+  import type { AnalysisResult, Message } from '../../../types';
+  import {
+    ClipboardCheck,
+    X,
+    CheckCircle2,
+    AlertTriangle,
+    Lightbulb,
+    TrendingUp,
+    Download,
+    Copy,
+    Check,
+    FileText
+  } from '@lucide/svelte';
+  import Button from './ui/Button.svelte';
+  import { formatSessionAsMarkdown, downloadFile } from '../../../services/sessionStorage';
+
+  interface Props {
+    analysis: AnalysisResult;
+    scenarioTitle?: string;
+    messages?: Message[];
+    onexit: () => void;
+  }
+
+  let {
+    analysis,
+    scenarioTitle = 'CBT Roleplay Session',
+    messages = [],
+    onexit
+  }: Props = $props();
+
+  let copied = $state(false);
+
+  function handleCopyReframe() {
+    navigator.clipboard.writeText(analysis.suggestions.alternativeThought);
+    copied = true;
+    setTimeout(() => {
+      copied = false;
+    }, 2000);
+  }
+
+  function handleExportMarkdown() {
+    const md = formatSessionAsMarkdown(scenarioTitle, analysis, messages);
+    const fileName = `cbt-report-${scenarioTitle.toLowerCase().replace(/\s+/g, '-')}-${Date.now()}.md`;
+    downloadFile(md, fileName, 'text/markdown');
+  }
+
+  function handleExportJSON() {
+    const json = JSON.stringify(
+      { scenarioTitle, analysis, messages, exportedAt: new Date().toISOString() },
+      null,
+      2
+    );
+    const fileName = `cbt-report-${scenarioTitle.toLowerCase().replace(/\s+/g, '-')}-${Date.now()}.json`;
+    downloadFile(json, fileName, 'application/json');
+  }
+</script>
+
+<div class="flex flex-col h-full bg-[#FDFDFF] rounded-3xl border border-slate-200 overflow-hidden shadow-2xl animate-in zoom-in-95 duration-500 w-full max-w-4xl mx-auto">
+  <div class="bg-teal-600 p-6 flex justify-between items-center text-white shrink-0">
+    <div class="flex items-center gap-3">
+      <ClipboardCheck size={28} />
+      <div>
+        <h2 class="text-xl font-bold leading-none">Session Summary Report</h2>
+        <span class="text-[10px] font-bold uppercase tracking-widest text-teal-100 opacity-80">
+          {scenarioTitle} • Clinical Evaluation Complete
+        </span>
+      </div>
+    </div>
+    <div class="flex items-center gap-2">
+      <Button
+        variant="ghost"
+        size="sm"
+        onclick={handleExportMarkdown}
+        class="text-white hover:bg-white/20 rounded-xl text-xs flex items-center gap-1.5"
+        title="Download Markdown Report"
+      >
+        <FileText size={16} />
+        <span class="hidden sm:inline">Export MD</span>
+      </Button>
+      <Button
+        variant="ghost"
+        size="sm"
+        onclick={handleExportJSON}
+        class="text-white hover:bg-white/20 rounded-xl text-xs flex items-center gap-1.5"
+        title="Download JSON Report"
+      >
+        <Download size={16} />
+        <span class="hidden sm:inline">JSON</span>
+      </Button>
+      <button
+        type="button"
+        onclick={onexit}
+        class="bg-white/10 hover:bg-white/20 p-2 rounded-xl border border-white/10 transition-colors ml-1"
+      >
+        <X size={20} />
+      </button>
+    </div>
+  </div>
+
+  <div class="flex-grow overflow-y-auto p-8 flex flex-col gap-6">
+    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
+      <div
+        class="p-6 rounded-2xl border-l-8 {analysis.analysis.isAdaptive
+          ? 'bg-teal-50/50 border-teal-500'
+          : 'bg-rose-50/50 border-rose-500'}"
+      >
+        <div class="flex items-center gap-2 mb-4">
+          {#if analysis.analysis.isAdaptive}
+            <CheckCircle2 class="text-teal-600" />
+            <span class="font-black text-xs uppercase tracking-widest">Adaptive Growth Observed</span>
+          {:else}
+            <AlertTriangle class="text-rose-600" />
+            <span class="font-black text-xs uppercase tracking-widest">Clinical Patterns Detected</span>
+          {/if}
+        </div>
+        {#if analysis.analysis.distortions.length > 0}
+          <div class="flex flex-wrap gap-2 mb-4">
+            {#each analysis.analysis.distortions as d (d)}
+              <span class="bg-white border border-slate-200 px-3 py-1 rounded-lg text-[10px] font-bold text-slate-600 shadow-sm">
+                {d}
+              </span>
+            {/each}
+          </div>
+        {/if}
+        <p class="text-sm leading-relaxed text-slate-700 font-medium italic">
+          "{analysis.analysis.evidence}"
+        </p>
+      </div>
+
+      <div class="bg-white p-6 rounded-2xl border border-slate-100 shadow-sm flex flex-col justify-center">
+        <div class="flex justify-between items-center mb-4">
+          <span class="text-[10px] font-black text-slate-400 uppercase tracking-widest">
+            Mastery Level
+          </span>
+          <div class="flex gap-1.5">
+            {#each [1, 2, 3, 4, 5] as s (s)}
+              <div
+                class="h-2 w-8 rounded-full {s <= analysis.rating.score
+                  ? 'bg-teal-500'
+                  : 'bg-slate-100'}"
+              ></div>
+            {/each}
+          </div>
+        </div>
+        <p class="text-sm text-slate-600 leading-relaxed font-light">
+          {analysis.rating.reason}
+        </p>
+      </div>
+    </div>
+
+    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
+      <div class="bg-white p-6 rounded-2xl border border-teal-100 shadow-sm relative group">
+        <div class="flex items-center justify-between mb-3">
+          <div class="flex items-center gap-2 text-teal-600">
+            <Lightbulb size={20} />
+            <span class="text-[10px] font-black uppercase tracking-widest">Master Reframe</span>
+          </div>
+          <Button
+            variant="ghost"
+            size="sm"
+            onclick={handleCopyReframe}
+            class="h-7 px-2 text-[10px] text-slate-400 hover:text-teal-700 flex items-center gap-1"
+          >
+            {#if copied}
+              <Check size={12} class="text-teal-600" />
+              <span>Copied</span>
+            {:else}
+              <Copy size={12} />
+              <span>Copy</span>
+            {/if}
+          </Button>
+        </div>
+        <p class="text-base text-slate-800 italic font-medium leading-relaxed">
+          "{analysis.suggestions.alternativeThought}"
+        </p>
+      </div>
+      <div class="bg-white p-6 rounded-2xl border border-teal-100 shadow-sm">
+        <div class="flex items-center gap-2 text-teal-600 mb-3">
+          <TrendingUp size={20} />
+          <span class="text-[10px] font-black uppercase tracking-widest">Homework & Next Steps</span>
+        </div>
+        <p class="text-sm text-slate-700 leading-relaxed">
+          {analysis.suggestions.behavioralStep}
+        </p>
+      </div>
+    </div>
+  </div>
+
+  <div class="p-6 bg-slate-50 border-t border-slate-100 flex justify-center shrink-0">
+    <button
+      type="button"
+      onclick={onexit}
+      class="bg-teal-600 text-white px-12 py-3 rounded-xl font-bold hover:bg-teal-700 shadow-lg shadow-teal-100 transition-all uppercase tracking-widest text-xs"
+    >
+      Close Report & Return
+    </button>
+  </div>
+</div>
diff --git a/src/lib/components/SettingsModal.svelte b/src/lib/components/SettingsModal.svelte
new file mode 100644
index 0000000..2a593b7
--- /dev/null
+++ b/src/lib/components/SettingsModal.svelte
@@ -0,0 +1,447 @@
+<script lang="ts">
+  import { onDestroy } from 'svelte';
+  import type { UserSettings } from '../../../types';
+  import { VOICE_PROFILES, type VoiceProfile } from '../../../constants';
+  import { defaultVoiceAudition } from '../../../services/voiceAuditionService';
+  import {
+    X,
+    Volume2,
+    Check,
+    Info,
+    Mic2,
+    Settings2,
+    Key,
+    Sparkles,
+    Cpu,
+    Play,
+    Square,
+    RotateCcw,
+    Radio
+  } from '@lucide/svelte';
+  import Tooltip from './ui/Tooltip.svelte';
+  import AudioDeviceSelector from './AudioDeviceSelector.svelte';
+  import Button from './ui/Button.svelte';
+  import Card from './ui/Card.svelte';
+  import Badge from './ui/Badge.svelte';
+  import ScrollArea from './ui/ScrollArea.svelte';
+  import Input from './ui/Input.svelte';
+  import Label from './ui/Label.svelte';
+  import Tabs from './ui/Tabs.svelte';
+  import TabsList from './ui/TabsList.svelte';
+  import TabsTrigger from './ui/TabsTrigger.svelte';
+  import TabsContent from './ui/TabsContent.svelte';
+
+  import { getGeminiApiKey } from '../../../services/apiConfig';
+
+  interface Props {
+    settings: UserSettings;
+    onupdate: (settings: UserSettings) => void;
+    onclose: () => void;
+  }
+
+  let { settings, onupdate, onclose }: Props = $props();
+
+  let activeTab = $state('voice');
+  let openRouterKey = $state('');
+  let geminiKey = $state('');
+  let selectedModel = $state('google/gemini-3.8-flash');
+  let playingVoiceId = $state<UserSettings['voiceName'] | null>(null);
+  let customTestPhrase = $state('');
+  let isAuditioning = $state(false);
+
+  onDestroy(() => {
+    defaultVoiceAudition.stop();
+  });
+
+  $effect(() => {
+    openRouterKey = settings.openRouterApiKey || '';
+    geminiKey = settings.geminiApiKey || '';
+    selectedModel = settings.roleplayModel || 'google/gemini-3.8-flash';
+  });
+
+  const effectiveGeminiKey = $derived(geminiKey.trim() || getGeminiApiKey());
+
+  const selectedProfile = $derived(
+    VOICE_PROFILES.find((p) => p.id === settings.voiceName) || VOICE_PROFILES[0]
+  );
+
+  async function handleToggleSample(voice: VoiceProfile, e: MouseEvent) {
+    e.stopPropagation();
+    if (playingVoiceId === voice.id) {
+      defaultVoiceAudition.stop();
+      playingVoiceId = null;
+      isAuditioning = false;
+      return;
+    }
+
+    playingVoiceId = voice.id;
+    isAuditioning = true;
+    await defaultVoiceAudition.playPreview(
+      voice.id,
+      voice.sampleText,
+      openRouterKey.trim() || undefined,
+      () => {
+        if (playingVoiceId === voice.id) {
+          playingVoiceId = null;
+          isAuditioning = false;
+        }
+      },
+      effectiveGeminiKey || undefined
+    );
+  }
+
+  async function handleAuditionSelectedVoice() {
+    if (isAuditioning) {
+      defaultVoiceAudition.stop();
+      playingVoiceId = null;
+      isAuditioning = false;
+      return;
+    }
+
+    isAuditioning = true;
+    playingVoiceId = settings.voiceName;
+    const text = customTestPhrase.trim() || selectedProfile.sampleText;
+
+    await defaultVoiceAudition.playPreview(
+      settings.voiceName,
+      text,
+      openRouterKey.trim() || undefined,
+      () => {
+        isAuditioning = false;
+        playingVoiceId = null;
+      },
+      effectiveGeminiKey || undefined
+    );
+  }
+
+  const AVAILABLE_MODELS = [
+    { id: 'google/gemini-3.8-flash', name: 'Google Gemini 3.8 Flash', badge: 'Default • Frontier Ultra Low Latency' },
+    { id: 'google/gemini-3.7-flash', name: 'Google Gemini 3.7 Flash', badge: 'Fast • Hybrid Reasoning' },
+    { id: 'google/gemini-2.5-flash', name: 'Google Gemini 2.5 Flash', badge: 'Stable • Low Latency' },
+    { id: 'anthropic/claude-3.5-haiku', name: 'Anthropic Claude 3.5 Haiku', badge: 'Nuanced Reasoning' },
+    { id: 'meta-llama/llama-3.3-70b-instruct', name: 'Meta Llama 3.3 70B Instruct', badge: 'Open Weights' }
+  ];
+
+  function handleSave() {
+    onupdate({
+      ...settings,
+      openRouterApiKey: openRouterKey.trim() || undefined,
+      geminiApiKey: geminiKey.trim() || undefined,
+      roleplayModel: selectedModel,
+      supervisorModel: selectedModel
+    });
+    onclose();
+  }
+</script>
+
+<div class="fixed inset-0 z-[100] flex items-center justify-center p-4 bg-slate-900/60 backdrop-blur-md">
+  <div class="bg-white rounded-3xl shadow-2xl w-full max-w-xl overflow-hidden animate-in fade-in zoom-in duration-300 border border-slate-100 max-h-[90vh] flex flex-col">
+    <div class="p-6 bg-slate-50 border-b border-slate-200 flex justify-between items-center shrink-0">
+      <div class="flex items-center gap-3">
+        <div class="bg-slate-800 p-2 rounded-xl text-white">
+          <Settings2 size={20} />
+        </div>
+        <div>
+          <h2 class="text-lg font-bold text-slate-800">Application Settings</h2>
+          <p class="text-[10px] text-slate-400 font-bold uppercase tracking-widest">
+            Powered by OpenRouter Engine
+          </p>
+        </div>
+      </div>
+      <Button
+        variant="ghost"
+        size="icon"
+        onclick={onclose}
+        class="text-slate-400 hover:bg-slate-200 rounded-xl"
+      >
+        <X size={20} />
+      </Button>
+    </div>
+
+    <Tabs bind:value={activeTab} class="w-full flex-grow flex flex-col overflow-hidden">
+      <div class="px-6 pt-4 border-b border-slate-100 shrink-0">
+        <TabsList class="grid grid-cols-2 w-full max-w-xs">
+          <TabsTrigger value="voice" class="text-xs">
+            <Volume2 size={14} class="mr-1.5" />
+            Voice & Audio
+          </TabsTrigger>
+          <TabsTrigger value="openrouter" class="text-xs">
+            <Key size={14} class="mr-1.5" />
+            OpenRouter AI
+          </TabsTrigger>
+        </TabsList>
+      </div>
+
+      <ScrollArea class="p-6 flex-grow overflow-y-auto">
+        <TabsContent value="voice" class="space-y-6 m-0">
+          <section class="space-y-3">
+            <div class="flex items-center justify-between">
+              <h3 class="text-xs font-black text-slate-400 uppercase tracking-widest flex items-center gap-2">
+                <Mic2 size={14} class="text-teal-600" />
+                Vocal Profile
+              </h3>
+              <Tooltip content="Different voices can help simulate specific social or professional contexts.">
+                <Info size={14} class="text-slate-300" />
+              </Tooltip>
+            </div>
+
+            <div class="grid grid-cols-1 gap-2.5">
+              {#each VOICE_PROFILES as voice (voice.id)}
+                <div
+                  role="button"
+                  tabindex="0"
+                  onkeydown={(e) => {
+                    if (e.key === 'Enter' || e.key === ' ') {
+                      onupdate({
+                        ...settings,
+                        voiceName: voice.id,
+                        genderPreference: voice.gender,
+                        vocalStyle: voice.style
+                      });
+                    }
+                  }}
+                  onclick={() =>
+                    onupdate({
+                      ...settings,
+                      voiceName: voice.id,
+                      genderPreference: voice.gender,
+                      vocalStyle: voice.style
+                    })}
+                  class="w-full text-left flex flex-row items-center justify-between p-3.5 rounded-xl border transition-all cursor-pointer {settings.voiceName ===
+                  voice.id
+                    ? 'bg-teal-50/80 border-teal-500 shadow-sm shadow-teal-100'
+                    : 'bg-white border-slate-200 hover:border-teal-200'}"
+                >
+                  <div class="flex items-center gap-3 flex-grow pr-2">
+                    <div
+                      class="w-9 h-9 rounded-full flex items-center shrink-0 justify-center {settings.voiceName ===
+                      voice.id
+                        ? 'bg-teal-600 text-white'
+                        : 'bg-slate-100 text-slate-400'}"
+                    >
+                      <Volume2 size={16} />
+                    </div>
+                    <div>
+                      <div class="flex items-center gap-2 mb-0.5">
+                        <span class="font-bold text-slate-800 text-sm">{voice.label}</span>
+                        <Badge variant="secondary" class="text-[9px] font-black uppercase text-slate-500 rounded">
+                          {voice.gender} • {voice.style}
+                        </Badge>
+                      </div>
+                      <p class="text-xs text-slate-500 font-light leading-snug">{voice.description}</p>
+                    </div>
+                  </div>
+
+                  <div class="flex items-center gap-2 shrink-0 ml-2">
+                    <!-- Quick Audition Sample Button -->
+                    <button
+                      type="button"
+                      onclick={(e) => handleToggleSample(voice, e)}
+                      title="Audition {voice.label} sample"
+                      class="p-2 rounded-lg transition-all cursor-pointer flex items-center gap-1.5 text-xs font-semibold {playingVoiceId === voice.id
+                        ? 'bg-teal-600 text-white animate-pulse shadow-md shadow-teal-300'
+                        : 'bg-slate-100 hover:bg-teal-50 text-slate-600 hover:text-teal-700'}"
+                    >
+                      {#if playingVoiceId === voice.id}
+                        <Square size={13} class="fill-current" />
+                        <span class="text-[10px] hidden sm:inline">Playing</span>
+                      {:else}
+                        <Play size={13} class="fill-current ml-0.5" />
+                        <span class="text-[10px] hidden sm:inline">Demo</span>
+                      {/if}
+                    </button>
+
+                    {#if settings.voiceName === voice.id}
+                      <div class="bg-teal-600 text-white p-1 rounded-full shrink-0">
+                        <Check size={12} />
+                      </div>
+                    {/if}
+                  </div>
+                </div>
+              {/each}
+            </div>
+
+            <!-- Natural Voice Testing Lab -->
+            <div class="mt-4 p-4 rounded-2xl bg-slate-50 border border-slate-200/90 space-y-3">
+              <div class="flex items-center justify-between">
+                <div class="flex items-center gap-2">
+                  <Sparkles size={14} class="text-teal-600" />
+                  <span class="text-xs font-bold text-slate-800">Natural Voice Testing Lab</span>
+                </div>
+                <span class="text-[9px] font-black uppercase tracking-wider px-2 py-0.5 rounded-full {effectiveGeminiKey ? 'bg-emerald-100 text-emerald-800' : openRouterKey ? 'bg-teal-100 text-teal-800' : 'bg-slate-200 text-slate-600'}">
+                  {effectiveGeminiKey ? `Google Gemini 3.8 Voice (${selectedProfile.id})` : openRouterKey ? `Neural TTS (${selectedProfile.openRouterVoice})` : `Web Speech (${selectedProfile.id})`}
+                </span>
+              </div>
+
+              <p class="text-[11px] text-slate-500 leading-normal">
+                Auditioning <span class="font-semibold text-slate-700">{selectedProfile.label}</span> ({selectedProfile.style}). Test custom character dialogue before entering high-stakes clinical simulations:
+              </p>
+
+              <div class="space-y-2">
+                <div class="relative">
+                  <Input
+                    bind:value={customTestPhrase}
+                    placeholder={selectedProfile.sampleText}
+                    class="text-xs pr-8 bg-white border-slate-200"
+                  />
+                  {#if customTestPhrase}
+                    <button
+                      type="button"
+                      onclick={() => (customTestPhrase = '')}
+                      class="absolute right-2.5 top-1/2 -translate-y-1/2 text-slate-400 hover:text-slate-600 text-xs cursor-pointer"
+                      title="Reset to preset sample"
+                    >
+                      <RotateCcw size={12} />
+                    </button>
+                  {/if}
+                </div>
+
+                <div class="flex items-center justify-between gap-3 pt-1">
+                  <Button
+                    type="button"
+                    size="sm"
+                    onclick={handleAuditionSelectedVoice}
+                    class="text-xs font-bold cursor-pointer {isAuditioning
+                      ? 'bg-rose-600 hover:bg-rose-700 text-white'
+                      : 'bg-teal-600 hover:bg-teal-700 text-white shadow-sm shadow-teal-200'}"
+                  >
+                    {#if isAuditioning}
+                      <Square size={13} class="mr-1.5 fill-current" />
+                      Stop Audition
+                    {:else}
+                      <Play size={13} class="mr-1.5 fill-current" />
+                      Audition Voice
+                    {/if}
+                  </Button>
+
+                  <span class="text-[10px] text-slate-400 italic truncate max-w-[260px]">
+                    "{customTestPhrase.trim() || selectedProfile.sampleText}"
+                  </span>
+                </div>
+              </div>
+            </div>
+          </section>
+
+          <section class="space-y-3 pt-2">
+            <div class="flex items-center justify-between">
+              <h3 class="text-xs font-black text-slate-400 uppercase tracking-widest flex items-center gap-2">
+                <Settings2 size={14} class="text-teal-600" />
+                Input Microphone
+              </h3>
+            </div>
+
+            <AudioDeviceSelector
+              selectedDeviceId={settings.preferredAudioDeviceId}
+              onselect={(deviceId) => onupdate({ ...settings, preferredAudioDeviceId: deviceId })}
+            />
+          </section>
+        </TabsContent>
+
+        <TabsContent value="openrouter" class="space-y-6 m-0">
+          <div class="space-y-4">
+            <div>
+              <h3 class="text-xs font-black text-slate-400 uppercase tracking-widest flex items-center gap-2 mb-1">
+                <Key size={14} class="text-teal-600" />
+                OpenRouter API Key
+              </h3>
+              <p class="text-xs text-slate-500">
+                Enter your OpenRouter API Key (<code class="font-mono text-xs">sk-or-v1-...</code>). All clinical roleplay, live insights, and scenario architect functions route through OpenRouter.
+              </p>
+            </div>
+
+            <div class="space-y-2">
+              <Label class="text-xs font-semibold text-slate-700">
+                API Key
+              </Label>
+              <Input
+                type="password"
+                placeholder="sk-or-v1-..."
+                bind:value={openRouterKey}
+                class="font-mono text-xs"
+              />
+            </div>
+
+            <!-- Google Gemini Voice API Key Section -->
+            <div class="space-y-3 pt-3 border-t border-slate-200">
+              <div>
+                <h3 class="text-xs font-black text-slate-400 uppercase tracking-widest flex items-center gap-2 mb-1">
+                  <Key size={14} class="text-emerald-600" />
+                  Google Gemini Voice API Key
+                </h3>
+                <p class="text-xs text-slate-500">
+                  Enter your Google AI Studio API Key (<code class="font-mono text-xs">AIzaSy...</code>) to power the authentic, native Google Gemini voice model (<strong>gemini-3.8-flash-tts</strong> with Fenrir, Puck, Kore, etc.).
+                </p>
+              </div>
+
+              <div class="space-y-2">
+                <Label class="text-xs font-semibold text-slate-700">
+                  Gemini API Key
+                </Label>
+                <Input
+                  type="password"
+                  placeholder="AIzaSy..."
+                  bind:value={geminiKey}
+                  class="font-mono text-xs"
+                />
+                {#if effectiveGeminiKey}
+                  <p class="text-[10px] text-emerald-700 font-bold flex items-center gap-1.5 bg-emerald-50 px-3 py-1.5 rounded-lg border border-emerald-200">
+                    <Check size={12} class="text-emerald-600 shrink-0" />
+                    Native Google Gemini 3.8 Flash TTS Voice Model Active ({settings.voiceName})
+                  </p>
+                {/if}
+              </div>
+            </div>
+
+            <div class="space-y-3 pt-2">
+              <div class="flex items-center justify-between">
+                <Label class="text-xs font-semibold text-slate-700 flex items-center gap-1.5">
+                  <Cpu size={14} class="text-teal-600" />
+                  Roleplay & Supervisor Model
+                </Label>
+              </div>
+
+              <div class="grid grid-cols-1 gap-2">
+                {#each AVAILABLE_MODELS as model (model.id)}
+                  <button
+                    type="button"
+                    onclick={() => (selectedModel = model.id)}
+                    class="w-full text-left p-3 rounded-xl border transition-all flex items-center justify-between {selectedModel ===
+                    model.id
+                      ? 'bg-teal-50 border-teal-500 shadow-sm'
+                      : 'bg-white border-slate-200 hover:border-slate-300'}"
+                  >
+                    <div>
+                      <p class="text-xs font-bold text-slate-800">{model.name}</p>
+                      <p class="text-[10px] text-slate-400 font-mono mt-0.5">{model.id}</p>
+                    </div>
+                    <Badge variant="outline" class="text-[9px] font-semibold text-teal-700 border-teal-200">
+                      {model.badge}
+                    </Badge>
+                  </button>
+                {/each}
+              </div>
+            </div>
+          </div>
+
+          <div class="bg-teal-50 border border-teal-100 rounded-2xl p-4 flex gap-3">
+            <div class="text-teal-600 mt-0.5">
+              <Sparkles size={18} />
+            </div>
+            <p class="text-xs text-teal-900 leading-relaxed">
+              Your OpenRouter API Key is stored securely in your browser LocalStorage and is never shared or transmitted elsewhere.
+            </p>
+          </div>
+        </TabsContent>
+      </ScrollArea>
+    </Tabs>
+
+    <div class="p-5 bg-slate-50 border-t border-slate-200 flex justify-end shrink-0">
+      <Button
+        onclick={handleSave}
+        class="bg-slate-800 text-white px-8 h-11 rounded-2xl font-bold hover:bg-slate-900 shadow-lg shadow-slate-200 transition-all uppercase tracking-widest text-[10px]"
+      >
+        Save Preferences
+      </Button>
+    </div>
+  </div>
+</div>
diff --git a/src/lib/components/TranscriptPanel.svelte b/src/lib/components/TranscriptPanel.svelte
new file mode 100644
index 0000000..a826cd8
--- /dev/null
+++ b/src/lib/components/TranscriptPanel.svelte
@@ -0,0 +1,112 @@
+<script lang="ts">
+  import { tick } from 'svelte';
+  import type { Message } from '../../../types';
+  import { MessageSquare, X, User, Bot } from '@lucide/svelte';
+
+  interface Props {
+    messages: Message[];
+    onclose: () => void;
+    showCloseButton?: boolean;
+    class?: string;
+  }
+
+  let {
+    messages,
+    onclose,
+    showCloseButton = true,
+    class: customClass = ''
+  }: Props = $props();
+
+  let scrollRef: HTMLDivElement | null = $state(null);
+
+  $effect(() => {
+    if (messages.length) {
+      tick().then(() => {
+        if (scrollRef) {
+          scrollRef.scrollTop = scrollRef.scrollHeight;
+        }
+      });
+    }
+  });
+</script>
+
+<div class="w-full h-full flex flex-col bg-slate-900/90 text-white overflow-hidden {customClass}">
+  <!-- Panel Header -->
+  <div class="p-4 sm:p-5 border-b border-white/10 flex justify-between items-center bg-black/20 shrink-0">
+    <div class="flex items-center gap-2.5 text-teal-400">
+      <div class="p-1.5 rounded-lg bg-teal-500/20 text-teal-300">
+        <MessageSquare size={16} />
+      </div>
+      <div>
+        <h3 class="text-xs font-bold uppercase tracking-widest text-white">Live Conversation</h3>
+        <p class="text-[10px] text-slate-400">Real-time roleplay speech transcript</p>
+      </div>
+    </div>
+    {#if showCloseButton}
+      <button
+        type="button"
+        onclick={onclose}
+        class="text-white/50 hover:text-white transition-colors p-1.5 hover:bg-white/10 rounded-xl cursor-pointer"
+        title="Close Transcript"
+      >
+        <X size={18} />
+      </button>
+    {/if}
+  </div>
+
+  <!-- Messages List -->
+  <div
+    bind:this={scrollRef}
+    class="flex-grow overflow-y-auto p-4 sm:p-6 space-y-4"
+  >
+    {#if messages.length === 0}
+      <div class="h-full flex flex-col items-center justify-center text-center p-8 space-y-4 py-16 opacity-60">
+        <div class="w-12 h-12 rounded-2xl bg-white/5 border border-white/10 flex items-center justify-center text-teal-400">
+          <MessageSquare size={20} />
+        </div>
+        <div>
+          <p class="text-[10px] text-slate-300 uppercase font-bold tracking-widest mb-1">
+            Listening for speech...
+          </p>
+          <p class="text-xs text-slate-400 font-light">
+            Transcripts and dialogue turns will appear here automatically.
+          </p>
+        </div>
+      </div>
+    {:else}
+      {#each messages as m (m.id)}
+        <div
+          class="flex flex-col gap-1.5 {m.role === 'user' ? 'items-end' : 'items-start'} animate-in fade-in slide-in-from-bottom-2 duration-300"
+        >
+          <div class="flex items-center gap-1.5 opacity-50 mb-0.5 px-1">
+            {#if m.role === 'user'}
+              <span class="text-[9px] font-black text-white uppercase tracking-wider">You</span>
+              <User size={10} class="text-teal-400" />
+            {:else}
+              <Bot size={10} class="text-blue-400" />
+              <span class="text-[9px] font-black text-white uppercase tracking-wider">AI Character</span>
+            {/if}
+          </div>
+          <div
+            class="px-4 py-3 rounded-2xl text-xs sm:text-sm leading-relaxed max-w-[90%] shadow-lg {m.role ===
+            'user'
+              ? 'bg-teal-600 text-white rounded-tr-none shadow-teal-900/30'
+              : 'bg-white/10 text-slate-100 rounded-tl-none border border-white/10 shadow-black/20'}"
+          >
+            {m.text}
+          </div>
+        </div>
+      {/each}
+    {/if}
+  </div>
+
+  <!-- Panel Footer -->
+  <div class="p-3.5 bg-black/40 text-center border-t border-white/10 shrink-0">
+    <div class="flex items-center justify-center gap-2">
+      <div class="w-1.5 h-1.5 bg-teal-400 rounded-full animate-pulse"></div>
+      <p class="text-[9px] text-slate-400 uppercase font-black tracking-widest">
+        Active Transcription Stream
+      </p>
+    </div>
+  </div>
+</div>
diff --git a/src/lib/components/VersionBadge.svelte b/src/lib/components/VersionBadge.svelte
new file mode 100644
index 0000000..e92f71a
--- /dev/null
+++ b/src/lib/components/VersionBadge.svelte
@@ -0,0 +1,36 @@
+<script lang="ts">
+  import Badge from './ui/Badge.svelte';
+
+  interface Props {
+    class?: string;
+  }
+
+  let { class: className = '' }: Props = $props();
+
+  const version = typeof (globalThis as any).__APP_VERSION__ !== 'undefined'
+    ? (globalThis as any).__APP_VERSION__
+    : 'dev';
+  const buildTime = typeof (globalThis as any).__BUILD_TIMESTAMP__ !== 'undefined'
+    ? (globalThis as any).__BUILD_TIMESTAMP__
+    : '';
+
+  const formattedTime = buildTime
+    ? new Date(buildTime).toLocaleString(undefined, {
+        month: 'short',
+        day: 'numeric',
+        hour: '2-digit',
+        minute: '2-digit'
+      })
+    : '';
+</script>
+
+<div class="flex flex-col items-end text-[10px] text-slate-500 {className}">
+  <Badge variant="outline" class="text-[10px] h-5 py-0 px-2 font-mono border-slate-800 text-slate-500">
+    v{version}
+  </Badge>
+  {#if formattedTime}
+    <span class="mt-1 opacity-50 uppercase tracking-tighter">
+      Built: {formattedTime}
+    </span>
+  {/if}
+</div>
diff --git a/src/lib/components/VoiceSession.svelte b/src/lib/components/VoiceSession.svelte
new file mode 100644
index 0000000..43a2980
--- /dev/null
+++ b/src/lib/components/VoiceSession.svelte
@@ -0,0 +1,307 @@
+<script lang="ts">
+  import { onDestroy, onMount } from 'svelte';
+  import type { Scenario, UserSettings } from '../../../types';
+  import { UserSettingsStore } from '../stores/UserSettingsStore.svelte';
+  import { AudioEngine } from '../audio/AudioEngine.svelte';
+  import { AlertTriangle, Settings2, X, BrainCircuit, MessageSquare } from '@lucide/svelte';
+  import Button from './ui/Button.svelte';
+
+  import AudioVisualizer from './AudioVisualizer.svelte';
+  import TranscriptPanel from './TranscriptPanel.svelte';
+  import LiveInsightPanel from './LiveInsightPanel.svelte';
+  import SessionReport from './SessionReport.svelte';
+  import ConnectionState from './VoiceSession/ConnectionState.svelte';
+  import AnalyzingState from './VoiceSession/AnalyzingState.svelte';
+  import VoiceHeader from './VoiceSession/VoiceHeader.svelte';
+  import VoiceControls from './VoiceSession/VoiceControls.svelte';
+  import AudioDeviceSelector from './AudioDeviceSelector.svelte';
+
+  interface Props {
+    scenario: Scenario;
+    voiceSettings: UserSettings;
+    onexit: () => void;
+    onupdatesettings: (settings: UserSettings) => void;
+  }
+
+  let { scenario, voiceSettings, onexit, onupdatesettings }: Props = $props();
+
+  let activeDrawer = $state<'none' | 'insights' | 'transcript'>('none');
+  let showDeviceSelector = $state(false);
+  let hasStarted = $state(false);
+
+  // Initialize AudioEngine with a reactive UserSettingsStore wrapper
+  const settingsStore = new UserSettingsStore();
+  $effect(() => {
+    settingsStore.update(voiceSettings);
+  });
+
+  // svelte-ignore state_referenced_locally
+  const audioEngine = new AudioEngine(scenario, settingsStore);
+
+  onMount(() => {
+    // Ready for user initiation
+  });
+
+  onDestroy(() => {
+    audioEngine.destroy();
+  });
+
+  function handleStart() {
+    hasStarted = true;
+    audioEngine.start();
+  }
+
+  function handleExit() {
+    audioEngine.destroy();
+    onexit();
+  }
+
+  function handleFinishSession() {
+    audioEngine.finishSession();
+  }
+
+  function handleToggleInsights() {
+    activeDrawer = activeDrawer === 'insights' ? 'none' : 'insights';
+  }
+
+  function handleToggleTranscript() {
+    activeDrawer = activeDrawer === 'transcript' ? 'none' : 'transcript';
+  }
+</script>
+
+{#if audioEngine.status === 'connecting'}
+  <ConnectionState />
+{:else if audioEngine.status === 'analyzing'}
+  <AnalyzingState />
+{:else if audioEngine.status === 'finished' && audioEngine.finalReport}
+  <div class="h-full w-full overflow-y-auto bg-slate-900 p-4 sm:p-8 flex items-center justify-center">
+    <SessionReport
+      analysis={audioEngine.finalReport}
+      scenarioTitle={scenario.title}
+      messages={audioEngine.messages}
+      onexit={handleExit}
+    />
+  </div>
+{:else}
+  <div class="flex flex-col h-full w-full bg-[#080D1A] text-white relative overflow-hidden select-none">
+    <!-- Ambient Responsive Background Glows -->
+    <div class="absolute inset-0 pointer-events-none overflow-hidden opacity-30 z-0">
+      <div
+        class="absolute -top-32 -left-32 w-96 h-96 rounded-full blur-[140px] transition-all duration-700 {audioEngine.isAiSpeaking
+          ? 'bg-blue-600/60 scale-125'
+          : 'bg-teal-600/30'}"
+      ></div>
+      <div
+        class="absolute -bottom-32 -right-32 w-96 h-96 rounded-full blur-[140px] transition-all duration-700 {audioEngine.isUserSpeaking
+          ? 'bg-teal-500/60 scale-125'
+          : 'bg-indigo-600/30'}"
+      ></div>
+    </div>
+
+    <!-- Voice Session Header -->
+    <VoiceHeader
+      {scenario}
+      {activeDrawer}
+      hasInsight={!!audioEngine.liveInsight}
+      messageCount={audioEngine.messages.length}
+      onexit={handleExit}
+      onfinish={handleFinishSession}
+      onopendeviceselector={() => (showDeviceSelector = true)}
+      ontoggleinsights={handleToggleInsights}
+      ontoggletranscript={handleToggleTranscript}
+    />
+
+    <!-- Main Workspace (Center Visualizer Stage + Overlay Companion Drawer) -->
+    <div class="flex-1 flex relative overflow-hidden min-h-0 z-10">
+      <!-- Central Voice Stage (Always Centered) -->
+      <main class="flex-1 flex flex-col items-center justify-center p-4 sm:p-8 md:p-12 relative min-w-0">
+        <!-- Error Banner -->
+        {#if audioEngine.status === 'error'}
+          <div class="mb-6 p-4 rounded-2xl bg-rose-950/80 border border-rose-500/50 text-rose-200 flex items-center gap-3 max-w-md animate-in fade-in z-20">
+            <AlertTriangle class="text-rose-400 shrink-0" size={20} />
+            <div class="text-xs">
+              <p class="font-bold">Connection Warning</p>
+              <p class="opacity-90">
+                {audioEngine.errorMessage ||
+                  'Unable to connect to live voice session. Please verify your OpenRouter API key.'}
+              </p>
+            </div>
+          </div>
+        {/if}
+
+        <!-- Scenario Focus Chips -->
+        <div class="flex flex-wrap items-center justify-center gap-1.5 mb-8 max-w-lg">
+          {#each scenario.cbtFocus as focus}
+            <span class="text-[10px] font-bold uppercase tracking-wider text-teal-300/80 bg-teal-950/50 border border-teal-500/30 px-3 py-1 rounded-full backdrop-blur-md">
+              {focus}
+            </span>
+          {/each}
+        </div>
+
+        <!-- Central Audio Visualizer Stage -->
+        <div class="relative mb-8 flex items-center justify-center w-full max-w-xl">
+          <!-- Audio Reactive Waveform -->
+          <AudioVisualizer
+            level={audioEngine.activeLevel}
+            isAiSpeaking={audioEngine.isAiSpeaking}
+            isUserSpeaking={audioEngine.isUserSpeaking}
+            isMuted={audioEngine.isMuted}
+          />
+
+          <!-- Start Voice Roleplay Button Overlay -->
+          {#if !hasStarted && audioEngine.status !== 'error'}
+            <Button
+              onclick={handleStart}
+              class="absolute z-20 bg-teal-400 hover:bg-teal-300 text-slate-950 font-black px-8 py-6 rounded-full text-sm uppercase tracking-widest shadow-2xl shadow-teal-400/30 hover:scale-105 active:scale-95 transition-all cursor-pointer ring-4 ring-teal-400/20"
+            >
+              Begin Voice Simulation
+            </Button>
+          {/if}
+        </div>
+
+        <!-- Speaker Status Indicator Pill -->
+        <div class="flex flex-col items-center gap-2 z-10">
+          <div class="flex items-center gap-2.5 px-5 py-2 rounded-full bg-slate-900/80 border border-white/10 backdrop-blur-xl shadow-lg">
+            <span
+              class="w-2.5 h-2.5 rounded-full {audioEngine.isAiSpeaking
+                ? 'bg-blue-400 animate-ping'
+                : audioEngine.isUserSpeaking
+                  ? 'bg-teal-400 animate-pulse'
+                  : 'bg-slate-500'}"
+            ></span>
+            <span class="text-xs font-bold uppercase tracking-widest text-slate-200">
+              {audioEngine.isAiSpeaking
+                ? `${scenario.characterName} is speaking`
+                : audioEngine.isUserSpeaking
+                  ? 'Listening to you...'
+                  : 'Ready for dialogue'}
+            </span>
+          </div>
+
+          <p class="text-xs text-slate-400 font-light mt-1">
+            {voiceSettings.voiceName} Vocal Persona Active
+          </p>
+        </div>
+      </main>
+
+      <!-- Expandable Clinical Companion Drawer (Slide-Over Overlay) -->
+      {#if activeDrawer !== 'none'}
+        <!-- Mobile Backdrop Overlay -->
+        <div
+          class="absolute inset-0 z-30 bg-black/50 backdrop-blur-sm sm:hidden"
+          onclick={() => (activeDrawer = 'none')}
+          role="button"
+          tabindex="0"
+          onkeydown={(e) => e.key === 'Escape' && (activeDrawer = 'none')}
+          aria-label="Close companion drawer"
+        ></div>
+
+        <!-- Slide-over Drawer Container -->
+        <aside
+          class="absolute top-0 right-0 bottom-0 z-40 w-full sm:w-[420px] 2xl:w-[460px] max-w-full bg-slate-900/98 backdrop-blur-2xl border-l border-white/10 shadow-2xl flex flex-col"
+        >
+          <!-- Drawer Tab Header -->
+          <div class="p-3 sm:p-4 border-b border-white/10 flex items-center justify-between bg-black/30 shrink-0">
+            <!-- Tabs -->
+            <div class="flex items-center bg-white/5 p-1 rounded-xl border border-white/10">
+              <button
+                type="button"
+                onclick={() => (activeDrawer = 'insights')}
+                class="px-3 py-1.5 rounded-lg text-xs font-bold flex items-center gap-1.5 transition-all cursor-pointer {activeDrawer === 'insights'
+                  ? 'bg-teal-500 text-slate-950 shadow-md'
+                  : 'text-slate-300 hover:text-white'}"
+              >
+                <BrainCircuit size={14} />
+                <span>Supervision</span>
+              </button>
+              <button
+                type="button"
+                onclick={() => (activeDrawer = 'transcript')}
+                class="px-3 py-1.5 rounded-lg text-xs font-bold flex items-center gap-1.5 transition-all cursor-pointer {activeDrawer === 'transcript'
+                  ? 'bg-teal-500 text-slate-950 shadow-md'
+                  : 'text-slate-300 hover:text-white'}"
+              >
+                <MessageSquare size={14} />
+                <span>Transcript</span>
+                {#if audioEngine.messages.length > 0}
+                  <span class="bg-black/30 text-xs px-1.5 py-0.2 rounded-full">
+                    {audioEngine.messages.length}
+                  </span>
+                {/if}
+              </button>
+            </div>
+
+            <!-- Close Drawer Button -->
+            <button
+              type="button"
+              onclick={() => (activeDrawer = 'none')}
+              class="text-slate-400 hover:text-white p-1.5 rounded-xl hover:bg-white/10 transition-colors cursor-pointer"
+              title="Close Companion Panel"
+            >
+              <X size={18} />
+            </button>
+          </div>
+
+          <!-- Drawer Body Content -->
+          <div class="flex-1 overflow-hidden p-3 sm:p-4">
+            {#if activeDrawer === 'insights'}
+              <LiveInsightPanel
+                analysis={audioEngine.liveInsight}
+                isAnalyzing={audioEngine.isAnalyzingTurn}
+                theme="dark"
+              />
+            {:else if activeDrawer === 'transcript'}
+              <TranscriptPanel
+                messages={audioEngine.messages}
+                onclose={() => (activeDrawer = 'none')}
+                showCloseButton={false}
+              />
+            {/if}
+          </div>
+        </aside>
+      {/if}
+    </div>
+
+    <!-- Persistent Audio Controls Footer Dock -->
+    <VoiceControls
+      isMuted={audioEngine.isMuted}
+      {activeDrawer}
+      showTranscript={activeDrawer === 'transcript'}
+      hasInsight={!!audioEngine.liveInsight}
+      messageCount={audioEngine.messages.length}
+      ontogglemute={() => audioEngine.toggleMute()}
+      ontoggleinsights={handleToggleInsights}
+      ontoggletranscript={handleToggleTranscript}
+      onfinish={handleFinishSession}
+    />
+
+    <!-- Audio Hardware Selector Modal -->
+    {#if showDeviceSelector}
+      <div class="fixed inset-0 z-[110] flex items-center justify-center p-4 bg-slate-950/80 backdrop-blur-md">
+        <div class="bg-slate-900 border border-white/10 rounded-3xl p-6 max-w-md w-full shadow-2xl">
+          <div class="flex justify-between items-center mb-6">
+            <h3 class="text-sm font-bold uppercase tracking-widest text-white flex items-center gap-2">
+              <Settings2 size={16} class="text-teal-400" />
+              Select Audio Input Device
+            </h3>
+            <button
+              type="button"
+              onclick={() => (showDeviceSelector = false)}
+              class="text-slate-400 hover:text-white p-1 cursor-pointer"
+            >
+              <X size={18} />
+            </button>
+          </div>
+
+          <AudioDeviceSelector
+            selectedDeviceId={voiceSettings.preferredAudioDeviceId}
+            onselect={(deviceId) => {
+              onupdatesettings({ ...voiceSettings, preferredAudioDeviceId: deviceId });
+              showDeviceSelector = false;
+            }}
+          />
+        </div>
+      </div>
+    {/if}
+  </div>
+{/if}
diff --git a/src/lib/components/VoiceSession/AnalyzingState.svelte b/src/lib/components/VoiceSession/AnalyzingState.svelte
new file mode 100644
index 0000000..add071f
--- /dev/null
+++ b/src/lib/components/VoiceSession/AnalyzingState.svelte
@@ -0,0 +1,14 @@
+<script lang="ts">
+  import { BrainCircuit } from '@lucide/svelte';
+</script>
+
+<div class="flex flex-col items-center justify-center h-full text-slate-800">
+  <div class="bg-white p-12 rounded-full shadow-lg border border-teal-100 mb-8 relative">
+    <BrainCircuit size={64} class="text-teal-600 animate-pulse" />
+    <div class="absolute inset-0 border-4 border-teal-500 border-t-transparent rounded-full animate-spin"></div>
+  </div>
+  <h2 class="text-2xl font-bold mb-2">Generating Report</h2>
+  <p class="text-slate-500 text-center max-w-sm">
+    Synthesizing vocal patterns and cognitive restructuring evidence...
+  </p>
+</div>
diff --git a/src/lib/components/VoiceSession/ConnectionState.svelte b/src/lib/components/VoiceSession/ConnectionState.svelte
new file mode 100644
index 0000000..9c87eff
--- /dev/null
+++ b/src/lib/components/VoiceSession/ConnectionState.svelte
@@ -0,0 +1,8 @@
+<script lang="ts">
+  import { Loader2 } from '@lucide/svelte';
+</script>
+
+<div class="flex flex-col items-center justify-center h-full text-slate-800 animate-pulse">
+  <Loader2 size={48} class="animate-spin text-teal-600 mb-4" />
+  <p class="font-bold uppercase tracking-widest text-xs">Opening Neural Bridge...</p>
+</div>
diff --git a/src/lib/components/VoiceSession/VoiceControls.svelte b/src/lib/components/VoiceSession/VoiceControls.svelte
new file mode 100644
index 0000000..7d6a740
--- /dev/null
+++ b/src/lib/components/VoiceSession/VoiceControls.svelte
@@ -0,0 +1,105 @@
+<script lang="ts">
+  import { Mic, MicOff, MessageSquare, Flag, BrainCircuit } from '@lucide/svelte';
+  import Button from '../ui/Button.svelte';
+
+  interface Props {
+    isMuted: boolean;
+    activeDrawer?: 'none' | 'insights' | 'transcript';
+    showTranscript?: boolean;
+    hasInsight?: boolean;
+    messageCount?: number;
+    ontogglemute: () => void;
+    ontoggletranscript: () => void;
+    ontoggleinsights?: () => void;
+    onfinish?: () => void;
+  }
+
+  let {
+    isMuted,
+    activeDrawer = 'none',
+    showTranscript = false,
+    hasInsight = false,
+    messageCount = 0,
+    ontogglemute,
+    ontoggletranscript,
+    ontoggleinsights,
+    onfinish
+  }: Props = $props();
+
+  const isTranscriptActive = $derived(activeDrawer === 'transcript' || showTranscript);
+  const isInsightsActive = $derived(activeDrawer === 'insights');
+</script>
+
+<div class="px-4 py-4 sm:py-5 flex justify-center items-center gap-4 sm:gap-6 relative z-20 bg-slate-950/85 backdrop-blur-2xl border-t border-white/10 shrink-0 shadow-2xl">
+  <!-- Microphone Toggle Button -->
+  <Button
+    variant={isMuted ? 'destructive' : 'secondary'}
+    size="icon"
+    class="h-14 w-14 sm:h-16 sm:w-16 rounded-full cursor-pointer transition-all duration-200 shadow-xl {isMuted
+      ? 'bg-rose-600 hover:bg-rose-500 text-white shadow-rose-900/40 ring-4 ring-rose-500/20'
+      : 'bg-teal-500 hover:bg-teal-400 text-slate-950 shadow-teal-500/30 ring-4 ring-teal-500/20 hover:scale-105'}"
+    onclick={ontogglemute}
+    title={isMuted ? 'Unmute Microphone' : 'Mute Microphone'}
+  >
+    {#if isMuted}
+      <MicOff class="!w-6 !h-6 sm:!w-7 sm:!h-7" />
+    {:else}
+      <Mic class="!w-6 !h-6 sm:!w-7 sm:!h-7 font-bold" />
+    {/if}
+  </Button>
+
+  <!-- Clinical Supervision / Insights Drawer Toggle -->
+  {#if ontoggleinsights}
+    <div class="relative">
+      <Button
+        variant="secondary"
+        size="icon"
+        class="h-12 w-12 sm:h-14 sm:w-14 rounded-full cursor-pointer border transition-all {isInsightsActive
+          ? 'bg-teal-500/20 text-teal-300 border-teal-500/50 shadow-lg shadow-teal-500/20 scale-105'
+          : 'bg-white/10 text-white hover:bg-white/20 border-white/10'}"
+        onclick={ontoggleinsights}
+        title="Toggle Clinical Insights"
+      >
+        <BrainCircuit class="!w-5 !h-5 sm:!w-6 sm:!h-6" />
+      </Button>
+      {#if hasInsight}
+        <span class="absolute -top-1 -right-1 bg-teal-400 text-slate-950 font-black text-[9px] w-4 h-4 rounded-full flex items-center justify-center pointer-events-none shadow-md ring-2 ring-slate-950">
+          ✓
+        </span>
+      {/if}
+    </div>
+  {/if}
+
+  <!-- Live Transcript Drawer Toggle -->
+  <div class="relative">
+    <Button
+      variant="secondary"
+      size="icon"
+      class="h-12 w-12 sm:h-14 sm:w-14 rounded-full cursor-pointer border transition-all {isTranscriptActive
+        ? 'bg-teal-500/20 text-teal-300 border-teal-500/50 shadow-lg shadow-teal-500/20 scale-105'
+        : 'bg-white/10 text-white hover:bg-white/20 border-white/10'}"
+      onclick={ontoggletranscript}
+      title="Toggle Transcript Drawer"
+    >
+      <MessageSquare class="!w-5 !h-5 sm:!w-6 sm:!h-6" />
+    </Button>
+    {#if messageCount > 0}
+      <span class="absolute -top-1 -right-1 bg-teal-500 text-slate-950 font-black text-[10px] w-5 h-5 rounded-full flex items-center justify-center pointer-events-none shadow-md ring-2 ring-slate-950">
+        {messageCount}
+      </span>
+    {/if}
+  </div>
+
+  <!-- End / Complete Session -->
+  {#if onfinish}
+    <Button
+      variant="secondary"
+      size="icon"
+      class="h-12 w-12 sm:h-14 sm:w-14 rounded-full bg-white/10 hover:bg-rose-500/20 text-white hover:text-rose-400 border border-white/10 hover:border-rose-500/30 cursor-pointer transition-all"
+      onclick={onfinish}
+      title="Complete Session"
+    >
+      <Flag class="!w-5 !h-5 sm:!w-6 sm:!h-6 text-teal-400" />
+    </Button>
+  {/if}
+</div>
diff --git a/src/lib/components/VoiceSession/VoiceHeader.svelte b/src/lib/components/VoiceSession/VoiceHeader.svelte
new file mode 100644
index 0000000..5e5a3d2
--- /dev/null
+++ b/src/lib/components/VoiceSession/VoiceHeader.svelte
@@ -0,0 +1,121 @@
+<script lang="ts">
+  import type { Scenario } from '../../../../types';
+  import { PhoneOff, Flag, Settings2, BrainCircuit, MessageSquare } from '@lucide/svelte';
+  import Button from '../ui/Button.svelte';
+
+  interface Props {
+    scenario: Scenario;
+    activeDrawer?: 'none' | 'insights' | 'transcript';
+    messageCount?: number;
+    hasInsight?: boolean;
+    onexit: () => void;
+    onfinish?: () => void;
+    onopendeviceselector?: () => void;
+    ontoggleinsights?: () => void;
+    ontoggletranscript?: () => void;
+  }
+
+  let {
+    scenario,
+    activeDrawer = 'none',
+    messageCount = 0,
+    hasInsight = false,
+    onexit,
+    onfinish,
+    onopendeviceselector,
+    ontoggleinsights,
+    ontoggletranscript
+  }: Props = $props();
+</script>
+
+<header class="px-4 sm:px-8 py-3.5 sm:py-4 flex justify-between items-center relative z-20 shrink-0 border-b border-white/10 bg-slate-950/70 backdrop-blur-xl">
+  <!-- Left: Exit & Scenario Info -->
+  <div class="flex items-center gap-3 sm:gap-4 min-w-0">
+    <Button
+      variant="ghost"
+      size="icon"
+      onclick={onexit}
+      class="h-10 w-10 sm:h-11 sm:w-11 bg-white/5 hover:bg-rose-500/20 hover:text-rose-400 rounded-xl sm:rounded-2xl text-white/60 hover:border-rose-500/30 border border-white/5 transition-all cursor-pointer shrink-0"
+      title="Leave Session"
+    >
+      <PhoneOff size={18} />
+    </Button>
+    <div class="min-w-0">
+      <h2 class="text-white font-bold text-sm sm:text-base leading-tight truncate">
+        {scenario.title}
+      </h2>
+      <div class="flex items-center gap-1.5 mt-0.5">
+        <span class="w-1.5 h-1.5 rounded-full bg-teal-400 animate-pulse"></span>
+        <p class="text-teal-400 text-[10px] sm:text-[11px] font-black uppercase tracking-wider truncate">
+          Active Roleplay Session • {scenario.characterName}
+        </p>
+      </div>
+    </div>
+  </div>
+
+  <!-- Right: Cockpit Utility Controls -->
+  <div class="flex items-center gap-2 sm:gap-2.5 shrink-0">
+    <!-- Clinical Insights Drawer Toggle -->
+    {#if ontoggleinsights}
+      <button
+        type="button"
+        onclick={ontoggleinsights}
+        class="h-9 sm:h-10 px-2.5 sm:px-3 rounded-xl border text-xs font-semibold flex items-center gap-1.5 transition-all cursor-pointer {activeDrawer === 'insights'
+          ? 'bg-teal-500/20 text-teal-300 border-teal-500/40 shadow-sm shadow-teal-500/20'
+          : 'bg-white/5 hover:bg-white/10 text-slate-300 border-white/10'}"
+        title="View Supervision"
+      >
+        <BrainCircuit size={16} class="{hasInsight ? 'text-teal-400' : 'text-slate-400'}" />
+        <span class="hidden md:inline">Supervision</span>
+        {#if hasInsight}
+          <span class="w-2 h-2 rounded-full bg-teal-400 animate-pulse"></span>
+        {/if}
+      </button>
+    {/if}
+
+    <!-- Live Conversation Transcript Toggle -->
+    {#if ontoggletranscript}
+      <button
+        type="button"
+        onclick={ontoggletranscript}
+        class="h-9 sm:h-10 px-2.5 sm:px-3 rounded-xl border text-xs font-semibold flex items-center gap-1.5 transition-all cursor-pointer {activeDrawer === 'transcript'
+          ? 'bg-teal-500/20 text-teal-300 border-teal-500/40 shadow-sm shadow-teal-500/20'
+          : 'bg-white/5 hover:bg-white/10 text-slate-300 border-white/10'}"
+        title="View Transcript"
+      >
+        <MessageSquare size={16} />
+        <span class="hidden md:inline">Transcript</span>
+        {#if messageCount > 0}
+          <span class="bg-teal-500 text-slate-950 font-bold text-[10px] px-1.5 py-0.2 rounded-full">
+            {messageCount}
+          </span>
+        {/if}
+      </button>
+    {/if}
+
+    <!-- Audio Hardware Preferences -->
+    {#if onopendeviceselector}
+      <Button
+        variant="ghost"
+        size="icon"
+        onclick={onopendeviceselector}
+        class="h-9 w-9 sm:h-10 sm:w-10 bg-white/5 hover:bg-white/10 rounded-xl text-white/60 hover:text-white border border-white/5 transition-all cursor-pointer"
+        title="Audio Settings"
+      >
+        <Settings2 size={16} />
+      </Button>
+    {/if}
+
+    <!-- Finish Session -->
+    {#if onfinish}
+      <Button
+        onclick={onfinish}
+        class="bg-teal-600 hover:bg-teal-500 text-white px-3 sm:px-5 py-2 sm:py-2.5 rounded-xl text-[10px] sm:text-xs font-black uppercase tracking-wider transition-all shadow-lg shadow-teal-900/40 flex items-center gap-1.5 sm:gap-2 cursor-pointer ml-1"
+        title="Finish Session"
+      >
+        <Flag size={14} />
+        <span>Finish</span>
+      </Button>
+    {/if}
+  </div>
+</header>
diff --git a/src/lib/components/ui/Badge.svelte b/src/lib/components/ui/Badge.svelte
new file mode 100644
index 0000000..ccd8938
--- /dev/null
+++ b/src/lib/components/ui/Badge.svelte
@@ -0,0 +1,36 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  import type { HTMLAttributes } from 'svelte/elements';
+  import { twMerge } from 'tailwind-merge';
+
+  interface Props extends HTMLAttributes<HTMLSpanElement> {
+    variant?: 'default' | 'secondary' | 'destructive' | 'outline';
+    class?: string;
+    children?: Snippet;
+  }
+
+  let {
+    variant = 'default',
+    class: className = '',
+    children,
+    ...restProps
+  }: Props = $props();
+
+  const variantStyles = {
+    default: 'bg-teal-500/10 text-teal-700 border-teal-500/20',
+    secondary: 'bg-amber-500/10 text-amber-700 border-amber-500/20',
+    destructive: 'bg-rose-500/10 text-rose-700 border-rose-500/20',
+    outline: 'border-slate-200 text-slate-600 bg-white'
+  };
+</script>
+
+<span
+  class={twMerge(
+    'inline-flex items-center rounded-md border px-2 py-0.5 text-xs font-semibold transition-colors',
+    variantStyles[variant],
+    className
+  )}
+  {...restProps}
+>
+  {@render children?.()}
+</span>
diff --git a/src/lib/components/ui/Button.svelte b/src/lib/components/ui/Button.svelte
new file mode 100644
index 0000000..276f0bc
--- /dev/null
+++ b/src/lib/components/ui/Button.svelte
@@ -0,0 +1,47 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  import type { HTMLButtonAttributes } from 'svelte/elements';
+  import { twMerge } from 'tailwind-merge';
+
+  interface Props extends HTMLButtonAttributes {
+    variant?: 'default' | 'secondary' | 'outline' | 'ghost' | 'destructive';
+    size?: 'default' | 'sm' | 'lg' | 'icon';
+    class?: string;
+    children?: Snippet;
+  }
+
+  let {
+    variant = 'default',
+    size = 'default',
+    class: className = '',
+    children,
+    ...restProps
+  }: Props = $props();
+
+  const variantStyles = {
+    default: 'bg-slate-800 text-white hover:bg-slate-900 shadow-sm shadow-slate-900/10',
+    secondary: 'bg-slate-100 text-slate-800 hover:bg-slate-200',
+    outline: 'border border-slate-200 bg-white hover:bg-slate-50 text-slate-700',
+    ghost: 'hover:bg-slate-100 text-slate-600 hover:text-slate-900',
+    destructive: 'bg-rose-600 text-white hover:bg-rose-700 shadow-sm shadow-rose-600/10'
+  };
+
+  const sizeStyles = {
+    default: 'h-10 px-4 py-2 text-sm',
+    sm: 'h-8 px-3 text-xs rounded-lg',
+    lg: 'h-12 px-6 text-base rounded-2xl',
+    icon: 'h-9 w-9 p-0'
+  };
+</script>
+
+<button
+  class={twMerge(
+    'inline-flex items-center justify-center font-medium transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-teal-500 disabled:pointer-events-none disabled:opacity-50 cursor-pointer rounded-xl select-none',
+    variantStyles[variant],
+    sizeStyles[size],
+    className
+  )}
+  {...restProps}
+>
+  {@render children?.()}
+</button>
diff --git a/src/lib/components/ui/Card.svelte b/src/lib/components/ui/Card.svelte
new file mode 100644
index 0000000..48488e7
--- /dev/null
+++ b/src/lib/components/ui/Card.svelte
@@ -0,0 +1,18 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  import type { HTMLAttributes } from 'svelte/elements';
+
+  interface Props extends HTMLAttributes<HTMLDivElement> {
+    class?: string;
+    children?: Snippet;
+  }
+
+  let { class: className = '', children, ...restProps }: Props = $props();
+</script>
+
+<div
+  class="rounded-3xl border border-slate-200 bg-white text-slate-900 shadow-sm transition-all {className}"
+  {...restProps}
+>
+  {@render children?.()}
+</div>
diff --git a/src/lib/components/ui/CardContent.svelte b/src/lib/components/ui/CardContent.svelte
new file mode 100644
index 0000000..3fc53ec
--- /dev/null
+++ b/src/lib/components/ui/CardContent.svelte
@@ -0,0 +1,15 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  import type { HTMLAttributes } from 'svelte/elements';
+
+  interface Props extends HTMLAttributes<HTMLDivElement> {
+    class?: string;
+    children?: Snippet;
+  }
+
+  let { class: className = '', children, ...restProps }: Props = $props();
+</script>
+
+<div class="p-6 pt-0 {className}" {...restProps}>
+  {@render children?.()}
+</div>
diff --git a/src/lib/components/ui/CardDescription.svelte b/src/lib/components/ui/CardDescription.svelte
new file mode 100644
index 0000000..a056aef
--- /dev/null
+++ b/src/lib/components/ui/CardDescription.svelte
@@ -0,0 +1,15 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  import type { HTMLAttributes } from 'svelte/elements';
+
+  interface Props extends HTMLAttributes<HTMLParagraphElement> {
+    class?: string;
+    children?: Snippet;
+  }
+
+  let { class: className = '', children, ...restProps }: Props = $props();
+</script>
+
+<p class="text-sm text-slate-500 font-light leading-relaxed {className}" {...restProps}>
+  {@render children?.()}
+</p>
diff --git a/src/lib/components/ui/CardFooter.svelte b/src/lib/components/ui/CardFooter.svelte
new file mode 100644
index 0000000..95f2a8e
--- /dev/null
+++ b/src/lib/components/ui/CardFooter.svelte
@@ -0,0 +1,15 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  import type { HTMLAttributes } from 'svelte/elements';
+
+  interface Props extends HTMLAttributes<HTMLDivElement> {
+    class?: string;
+    children?: Snippet;
+  }
+
+  let { class: className = '', children, ...restProps }: Props = $props();
+</script>
+
+<div class="flex items-center p-6 pt-0 {className}" {...restProps}>
+  {@render children?.()}
+</div>
diff --git a/src/lib/components/ui/CardHeader.svelte b/src/lib/components/ui/CardHeader.svelte
new file mode 100644
index 0000000..ba8bc16
--- /dev/null
+++ b/src/lib/components/ui/CardHeader.svelte
@@ -0,0 +1,15 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  import type { HTMLAttributes } from 'svelte/elements';
+
+  interface Props extends HTMLAttributes<HTMLDivElement> {
+    class?: string;
+    children?: Snippet;
+  }
+
+  let { class: className = '', children, ...restProps }: Props = $props();
+</script>
+
+<div class="flex flex-col space-y-1.5 p-6 {className}" {...restProps}>
+  {@render children?.()}
+</div>
diff --git a/src/lib/components/ui/CardTitle.svelte b/src/lib/components/ui/CardTitle.svelte
new file mode 100644
index 0000000..290659c
--- /dev/null
+++ b/src/lib/components/ui/CardTitle.svelte
@@ -0,0 +1,15 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  import type { HTMLAttributes } from 'svelte/elements';
+
+  interface Props extends HTMLAttributes<HTMLHeadingElement> {
+    class?: string;
+    children?: Snippet;
+  }
+
+  let { class: className = '', children, ...restProps }: Props = $props();
+</script>
+
+<h3 class="text-lg font-bold leading-none tracking-tight text-slate-800 {className}" {...restProps}>
+  {@render children?.()}
+</h3>
diff --git a/src/lib/components/ui/Dialog.svelte b/src/lib/components/ui/Dialog.svelte
new file mode 100644
index 0000000..65a031e
--- /dev/null
+++ b/src/lib/components/ui/Dialog.svelte
@@ -0,0 +1,46 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+
+  interface Props {
+    open?: boolean;
+    onClose?: () => void;
+    onclose?: () => void;
+    class?: string;
+    children?: Snippet;
+  }
+
+  let { open = $bindable(false), onClose, onclose, class: className = '', children }: Props = $props();
+
+  function handleKeydown(e: KeyboardEvent) {
+    if (e.key === 'Escape' && open) {
+      handleClose();
+    }
+  }
+
+  function handleClose() {
+    open = false;
+    onClose?.();
+    onclose?.();
+  }
+</script>
+
+<svelte:window onkeydown={handleKeydown} />
+
+{#if open}
+  <div
+    class="fixed inset-0 z-50 flex items-center justify-center p-4 bg-slate-900/60 backdrop-blur-md animate-in fade-in duration-200"
+    onclick={handleClose}
+    role="presentation"
+  >
+    <!-- svelte-ignore a11y_click_events_have_key_events -->
+    <div
+      class="bg-white rounded-3xl shadow-2xl w-full max-w-xl overflow-hidden border border-slate-100 flex flex-col max-h-[90vh] animate-in zoom-in-95 duration-200 {className}"
+      onclick={(e) => e.stopPropagation()}
+      role="dialog"
+      aria-modal="true"
+      tabindex="-1"
+    >
+      {@render children?.()}
+    </div>
+  </div>
+{/if}
diff --git a/src/lib/components/ui/Input.svelte b/src/lib/components/ui/Input.svelte
new file mode 100644
index 0000000..b7303eb
--- /dev/null
+++ b/src/lib/components/ui/Input.svelte
@@ -0,0 +1,16 @@
+<script lang="ts">
+  import type { HTMLInputAttributes } from 'svelte/elements';
+
+  interface Props extends HTMLInputAttributes {
+    value?: string;
+    class?: string;
+  }
+
+  let { value = $bindable(''), class: className = '', ...restProps }: Props = $props();
+</script>
+
+<input
+  bind:value
+  class="flex h-10 w-full rounded-xl border border-slate-200 bg-white px-3 py-2 text-sm ring-offset-white placeholder:text-slate-400 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-teal-500 focus-visible:ring-offset-1 disabled:cursor-not-allowed disabled:opacity-50 transition-all {className}"
+  {...restProps}
+/>
diff --git a/src/lib/components/ui/Label.svelte b/src/lib/components/ui/Label.svelte
new file mode 100644
index 0000000..acc6e44
--- /dev/null
+++ b/src/lib/components/ui/Label.svelte
@@ -0,0 +1,18 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  import type { HTMLLabelAttributes } from 'svelte/elements';
+
+  interface Props extends HTMLLabelAttributes {
+    class?: string;
+    children?: Snippet;
+  }
+
+  let { class: className = '', children, ...rest }: Props = $props();
+</script>
+
+<label
+  class="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70 {className}"
+  {...rest}
+>
+  {@render children?.()}
+</label>
diff --git a/src/lib/components/ui/ScrollArea.svelte b/src/lib/components/ui/ScrollArea.svelte
new file mode 100644
index 0000000..0eeeaef
--- /dev/null
+++ b/src/lib/components/ui/ScrollArea.svelte
@@ -0,0 +1,15 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  import { twMerge } from 'tailwind-merge';
+
+  interface Props {
+    class?: string;
+    children?: Snippet;
+  }
+
+  let { class: className = '', children }: Props = $props();
+</script>
+
+<div class={twMerge('overflow-y-auto overscroll-contain', className)}>
+  {@render children?.()}
+</div>
diff --git a/src/lib/components/ui/Separator.svelte b/src/lib/components/ui/Separator.svelte
new file mode 100644
index 0000000..9f422c1
--- /dev/null
+++ b/src/lib/components/ui/Separator.svelte
@@ -0,0 +1,23 @@
+<script lang="ts">
+  import type { HTMLAttributes } from 'svelte/elements';
+
+  interface Props extends HTMLAttributes<HTMLDivElement> {
+    class?: string;
+    orientation?: 'horizontal' | 'vertical';
+    decorative?: boolean;
+  }
+
+  let {
+    class: className = '',
+    orientation = 'horizontal',
+    decorative = true,
+    ...rest
+  }: Props = $props();
+</script>
+
+<div
+  role={decorative ? 'none' : 'separator'}
+  aria-orientation={decorative ? undefined : orientation}
+  class="shrink-0 bg-border {orientation === 'horizontal' ? 'h-[1px] w-full' : 'h-full w-[1px]'} {className}"
+  {...rest}
+></div>
diff --git a/src/lib/components/ui/Tabs.svelte b/src/lib/components/ui/Tabs.svelte
new file mode 100644
index 0000000..a1df9cb
--- /dev/null
+++ b/src/lib/components/ui/Tabs.svelte
@@ -0,0 +1,36 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  import { setContext } from 'svelte';
+  import { twMerge } from 'tailwind-merge';
+  import { TABS_CONTEXT_KEY } from './tabsContext';
+
+  interface Props {
+    value?: string;
+    onValueChange?: (val: string) => void;
+    class?: string;
+    children?: Snippet;
+  }
+
+  let { value = $bindable(''), onValueChange, class: className = '', children }: Props = $props();
+
+  const ctx = $state({
+    current: value || '',
+    set(newVal: string) {
+      this.current = newVal;
+      value = newVal;
+      onValueChange?.(newVal);
+    }
+  });
+
+  $effect(() => {
+    if (value && value !== ctx.current) {
+      ctx.current = value;
+    }
+  });
+
+  setContext(TABS_CONTEXT_KEY, ctx);
+</script>
+
+<div class={twMerge('w-full flex flex-col', className)}>
+  {@render children?.()}
+</div>
diff --git a/src/lib/components/ui/TabsContent.svelte b/src/lib/components/ui/TabsContent.svelte
new file mode 100644
index 0000000..8a25e20
--- /dev/null
+++ b/src/lib/components/ui/TabsContent.svelte
@@ -0,0 +1,29 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  import { getContext } from 'svelte';
+  import { twMerge } from 'tailwind-merge';
+  import { TABS_CONTEXT_KEY, type TabsContext } from './tabsContext';
+
+  interface Props {
+    value: string;
+    class?: string;
+    children?: Snippet;
+  }
+
+  let { value, class: className = '', children }: Props = $props();
+
+  const ctx = getContext<TabsContext>(TABS_CONTEXT_KEY);
+  const isActive = $derived(ctx?.current === value);
+</script>
+
+{#if isActive}
+  <div
+    role="tabpanel"
+    class={twMerge(
+      'mt-2 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-teal-500 animate-in fade-in duration-200',
+      className
+    )}
+  >
+    {@render children?.()}
+  </div>
+{/if}
diff --git a/src/lib/components/ui/TabsList.svelte b/src/lib/components/ui/TabsList.svelte
new file mode 100644
index 0000000..27d04ae
--- /dev/null
+++ b/src/lib/components/ui/TabsList.svelte
@@ -0,0 +1,18 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  import type { HTMLAttributes } from 'svelte/elements';
+
+  interface Props extends HTMLAttributes<HTMLDivElement> {
+    class?: string;
+    children?: Snippet;
+  }
+
+  let { class: className = '', children, ...restProps }: Props = $props();
+</script>
+
+<div
+  class="inline-flex h-10 items-center justify-center rounded-xl bg-slate-100 p-1 text-slate-500 {className}"
+  {...restProps}
+>
+  {@render children?.()}
+</div>
diff --git a/src/lib/components/ui/TabsTrigger.svelte b/src/lib/components/ui/TabsTrigger.svelte
new file mode 100644
index 0000000..33c9fde
--- /dev/null
+++ b/src/lib/components/ui/TabsTrigger.svelte
@@ -0,0 +1,33 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  import { getContext } from 'svelte';
+  import { twMerge } from 'tailwind-merge';
+  import { TABS_CONTEXT_KEY, type TabsContext } from './tabsContext';
+
+  interface Props {
+    value: string;
+    class?: string;
+    children?: Snippet;
+  }
+
+  let { value, class: className = '', children }: Props = $props();
+
+  const ctx = getContext<TabsContext>(TABS_CONTEXT_KEY);
+  const isActive = $derived(ctx?.current === value);
+</script>
+
+<button
+  type="button"
+  role="tab"
+  aria-selected={isActive}
+  onclick={() => ctx?.set(value)}
+  class={twMerge(
+    'inline-flex items-center justify-center whitespace-nowrap rounded-lg px-3 py-1.5 text-xs font-medium transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-teal-500 cursor-pointer select-none',
+    isActive
+      ? 'bg-white text-slate-900 shadow-sm'
+      : 'text-slate-500 hover:text-slate-900',
+    className
+  )}
+>
+  {@render children?.()}
+</button>
diff --git a/src/lib/components/ui/Textarea.svelte b/src/lib/components/ui/Textarea.svelte
new file mode 100644
index 0000000..cc94f14
--- /dev/null
+++ b/src/lib/components/ui/Textarea.svelte
@@ -0,0 +1,16 @@
+<script lang="ts">
+  import type { HTMLTextareaAttributes } from 'svelte/elements';
+
+  interface Props extends HTMLTextareaAttributes {
+    value?: string;
+    class?: string;
+  }
+
+  let { value = $bindable(''), class: className = '', ...restProps }: Props = $props();
+</script>
+
+<textarea
+  bind:value
+  class="flex min-h-[80px] w-full rounded-2xl border border-slate-200 bg-white px-3.5 py-2.5 text-sm placeholder:text-slate-400 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-teal-500 focus-visible:ring-offset-1 disabled:cursor-not-allowed disabled:opacity-50 transition-all leading-relaxed {className}"
+  {...restProps}
+></textarea>
diff --git a/src/lib/components/ui/Tooltip.svelte b/src/lib/components/ui/Tooltip.svelte
new file mode 100644
index 0000000..932b2dd
--- /dev/null
+++ b/src/lib/components/ui/Tooltip.svelte
@@ -0,0 +1,38 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+
+  interface Props {
+    content: string;
+    position?: 'top' | 'bottom' | 'left' | 'right';
+    children?: Snippet;
+  }
+
+  let { content, position = 'top', children }: Props = $props();
+  let visible = $state(false);
+
+  const posClasses = {
+    top: 'bottom-full left-1/2 -translate-x-1/2 mb-2',
+    bottom: 'top-full left-1/2 -translate-x-1/2 mt-2',
+    left: 'right-full top-1/2 -translate-y-1/2 mr-2',
+    right: 'left-full top-1/2 -translate-y-1/2 ml-2'
+  };
+</script>
+
+<div
+  role="group"
+  class="relative inline-flex items-center"
+  onmouseenter={() => (visible = true)}
+  onmouseleave={() => (visible = false)}
+  onfocusin={() => (visible = true)}
+  onfocusout={() => (visible = false)}
+>
+  {@render children?.()}
+  {#if visible && content}
+    <div
+      role="tooltip"
+      class="absolute z-50 px-2.5 py-1 text-xs text-white bg-slate-900 rounded-lg shadow-lg whitespace-nowrap pointer-events-none transition-all duration-150 animate-in fade-in zoom-in-95 {posClasses[position]}"
+    >
+      {content}
+    </div>
+  {/if}
+</div>
diff --git a/src/lib/components/ui/tabsContext.ts b/src/lib/components/ui/tabsContext.ts
new file mode 100644
index 0000000..8bff8ce
--- /dev/null
+++ b/src/lib/components/ui/tabsContext.ts
@@ -0,0 +1,6 @@
+export const TABS_CONTEXT_KEY = Symbol('TABS_CONTEXT_KEY');
+
+export interface TabsContext {
+  current: string;
+  set: (val: string) => void;
+}
diff --git a/src/lib/context.ts b/src/lib/context.ts
new file mode 100644
index 0000000..c120e26
--- /dev/null
+++ b/src/lib/context.ts
@@ -0,0 +1,22 @@
+import { getContext, setContext } from 'svelte';
+import { UserSettingsStore } from './stores/UserSettingsStore.svelte';
+import { AppStateStore } from './stores/AppStateStore.svelte';
+
+const SETTINGS_KEY = Symbol('USER_SETTINGS_STORE');
+const APP_STATE_KEY = Symbol('APP_STATE_STORE');
+
+export function setUserSettingsContext(store: UserSettingsStore): void {
+  setContext(SETTINGS_KEY, store);
+}
+
+export function getUserSettingsContext(): UserSettingsStore {
+  return getContext<UserSettingsStore>(SETTINGS_KEY);
+}
+
+export function setAppStateContext(store: AppStateStore): void {
+  setContext(APP_STATE_KEY, store);
+}
+
+export function getAppStateContext(): AppStateStore {
+  return getContext<AppStateStore>(APP_STATE_KEY);
+}
diff --git a/src/lib/stores/AppStateStore.svelte.ts b/src/lib/stores/AppStateStore.svelte.ts
new file mode 100644
index 0000000..2c7649b
--- /dev/null
+++ b/src/lib/stores/AppStateStore.svelte.ts
@@ -0,0 +1,75 @@
+import type { Scenario, SessionMode } from '../../../types';
+import { SCENARIOS } from '../../../constants';
+
+const CUSTOM_SCENARIOS_KEY = 'cognitive-clarity-custom-scenarios';
+
+export class AppStateStore {
+  activeScenario = $state<Scenario | null>(null);
+  sessionMode = $state<SessionMode>('text');
+  selectedDifficulty = $state<string>('All');
+  isPreparing = $state(false);
+  customScenarios = $state<Scenario[]>([]);
+
+  showGenerator = $state(false);
+  showReference = $state(false);
+  showSettings = $state(false);
+
+  // Svelte 5 derived states
+  allScenarios = $derived<Scenario[]>([...this.customScenarios, ...SCENARIOS]);
+  filteredScenarios = $derived<Scenario[]>(
+    this.allScenarios.filter(
+      (s) => this.selectedDifficulty === 'All' || s.difficulty === this.selectedDifficulty
+    )
+  );
+
+  constructor() {
+    this.loadCustomScenarios();
+  }
+
+  loadCustomScenarios() {
+    if (typeof localStorage === 'undefined') return;
+    try {
+      const saved = localStorage.getItem(CUSTOM_SCENARIOS_KEY);
+      if (saved) {
+        this.customScenarios = JSON.parse(saved);
+      }
+    } catch (e) {
+      console.error("Failed to load custom scenarios", e);
+    }
+  }
+
+  saveCustomScenarios() {
+    if (typeof localStorage === 'undefined') return;
+    try {
+      localStorage.setItem(CUSTOM_SCENARIOS_KEY, JSON.stringify(this.customScenarios));
+    } catch (e) {
+      console.error("Failed to save custom scenarios", e);
+    }
+  }
+
+  selectScenario(scenario: Scenario, mode: SessionMode) {
+    this.isPreparing = true;
+    setTimeout(() => {
+      this.activeScenario = scenario;
+      this.sessionMode = mode;
+      this.isPreparing = false;
+    }, 1400);
+  }
+
+  exitSession() {
+    this.activeScenario = null;
+  }
+
+  addCustomScenario(newScenario: Scenario) {
+    this.customScenarios = [newScenario, ...this.customScenarios];
+    this.saveCustomScenarios();
+    this.showGenerator = false;
+  }
+
+  deleteCustomScenario(id: string) {
+    this.customScenarios = this.customScenarios.filter((s) => s.id !== id);
+    this.saveCustomScenarios();
+  }
+}
+
+export const appState = new AppStateStore();
diff --git a/src/lib/stores/UserSettingsStore.svelte.ts b/src/lib/stores/UserSettingsStore.svelte.ts
new file mode 100644
index 0000000..084fcc7
--- /dev/null
+++ b/src/lib/stores/UserSettingsStore.svelte.ts
@@ -0,0 +1,80 @@
+import type { UserSettings } from '../../../types';
+import { DEFAULT_OPENROUTER_MODEL, DEFAULT_SUPERVISOR_MODEL } from '../../../services/apiConfig';
+
+const SETTINGS_KEY = 'cognitive-clarity-settings';
+
+export class UserSettingsStore {
+  voiceName = $state<UserSettings['voiceName']>('Zephyr');
+  vocalStyle = $state('Helpful');
+  genderPreference = $state<'Male' | 'Female' | 'Neutral'>('Neutral');
+  preferredAudioDeviceId = $state<string | undefined>(undefined);
+  openRouterApiKey = $state<string | undefined>(undefined);
+  geminiApiKey = $state<string | undefined>(undefined);
+  voiceEngine = $state<'gemini' | 'openrouter' | undefined>('gemini');
+  roleplayModel = $state(DEFAULT_OPENROUTER_MODEL);
+  supervisorModel = $state(DEFAULT_SUPERVISOR_MODEL);
+
+  constructor() {
+    this.load();
+  }
+
+  load() {
+    if (typeof localStorage === 'undefined') return;
+    try {
+      const saved = localStorage.getItem(SETTINGS_KEY);
+      if (saved) {
+        const parsed = JSON.parse(saved);
+        if (parsed.voiceName) this.voiceName = parsed.voiceName;
+        if (parsed.vocalStyle) this.vocalStyle = parsed.vocalStyle;
+        if (parsed.genderPreference) this.genderPreference = parsed.genderPreference;
+        if (parsed.preferredAudioDeviceId !== undefined) this.preferredAudioDeviceId = parsed.preferredAudioDeviceId;
+        if (parsed.openRouterApiKey !== undefined) this.openRouterApiKey = parsed.openRouterApiKey;
+        if (parsed.geminiApiKey !== undefined) this.geminiApiKey = parsed.geminiApiKey;
+        if (parsed.voiceEngine !== undefined) this.voiceEngine = parsed.voiceEngine;
+        if (parsed.roleplayModel) this.roleplayModel = parsed.roleplayModel;
+        if (parsed.supervisorModel) this.supervisorModel = parsed.supervisorModel;
+      }
+    } catch (e) {
+      console.error("Failed to load user settings from localStorage", e);
+    }
+  }
+
+  save() {
+    if (typeof localStorage === 'undefined') return;
+    try {
+      const data = this.toUserSettings();
+      localStorage.setItem(SETTINGS_KEY, JSON.stringify(data));
+    } catch (e) {
+      console.error("Failed to persist user settings to localStorage", e);
+    }
+  }
+
+  update(partial: Partial<UserSettings>) {
+    if (partial.voiceName !== undefined) this.voiceName = partial.voiceName;
+    if (partial.vocalStyle !== undefined) this.vocalStyle = partial.vocalStyle;
+    if (partial.genderPreference !== undefined) this.genderPreference = partial.genderPreference;
+    if (partial.preferredAudioDeviceId !== undefined) this.preferredAudioDeviceId = partial.preferredAudioDeviceId;
+    if (partial.openRouterApiKey !== undefined) this.openRouterApiKey = partial.openRouterApiKey;
+    if (partial.geminiApiKey !== undefined) this.geminiApiKey = partial.geminiApiKey;
+    if (partial.voiceEngine !== undefined) this.voiceEngine = partial.voiceEngine;
+    if (partial.roleplayModel !== undefined) this.roleplayModel = partial.roleplayModel;
+    if (partial.supervisorModel !== undefined) this.supervisorModel = partial.supervisorModel;
+    this.save();
+  }
+
+  toUserSettings(): UserSettings {
+    return {
+      voiceName: this.voiceName,
+      vocalStyle: this.vocalStyle,
+      genderPreference: this.genderPreference,
+      preferredAudioDeviceId: this.preferredAudioDeviceId,
+      openRouterApiKey: this.openRouterApiKey,
+      geminiApiKey: this.geminiApiKey,
+      voiceEngine: this.voiceEngine,
+      roleplayModel: this.roleplayModel,
+      supervisorModel: this.supervisorModel
+    };
+  }
+}
+
+export const defaultUserSettings = new UserSettingsStore();
diff --git a/src/main.ts b/src/main.ts
new file mode 100644
index 0000000..2adca46
--- /dev/null
+++ b/src/main.ts
@@ -0,0 +1,10 @@
+import { mount } from 'svelte';
+import App from './App.svelte';
+
+const target = document.getElementById('root') || document.getElementById('app') || document.body;
+
+const app = mount(App, {
+  target
+});
+
+export default app;
diff --git a/svelte.config.js b/svelte.config.js
new file mode 100644
index 0000000..21b9399
--- /dev/null
+++ b/svelte.config.js
@@ -0,0 +1,5 @@
+import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';
+
+export default {
+  preprocess: vitePreprocess()
+};
diff --git a/sw.ts b/sw.ts
index fa852ce..f6f2f6d 100644
--- a/sw.ts
+++ b/sw.ts
@@ -3,29 +3,72 @@ declare const self: ServiceWorkerGlobalScope;
 
 import { clientsClaim } from 'workbox-core';
 import { cleanupOutdatedCaches, precacheAndRoute } from 'workbox-precaching';
+import { registerRoute } from 'workbox-routing';
+import { StaleWhileRevalidate, CacheFirst, NetworkFirst } from 'workbox-strategies';
+import { ExpirationPlugin } from 'workbox-expiration';
+import { CacheableResponsePlugin } from 'workbox-cacheable-response';
 
-// Bump this version to force SW update - changes to this constant change the SW file hash
-const CACHE_VERSION = '2026-03-06-v1';
-
-// @ts-ignore - __WB_MANIFEST is injected at build time by vite-plugin-pwa
+// Precache all assets generated by Vite build
 precacheAndRoute(self.__WB_MANIFEST);
 
 cleanupOutdatedCaches();
 
+// Cache Google Fonts stylesheets
+registerRoute(
+  ({ url }) => url.origin === 'https://fonts.googleapis.com',
+  new StaleWhileRevalidate({
+    cacheName: 'google-fonts-stylesheets',
+  })
+);
+
+// Cache Google Fonts webfont files with 1-year expiration
+registerRoute(
+  ({ url }) => url.origin === 'https://fonts.gstatic.com',
+  new CacheFirst({
+    cacheName: 'google-fonts-webfonts',
+    plugins: [
+      new CacheableResponsePlugin({
+        statuses: [0, 200],
+      }),
+      new ExpirationPlugin({
+        maxAgeSeconds: 60 * 60 * 24 * 365,
+        maxEntries: 30,
+      }),
+    ],
+  })
+);
+
+// Cache static images and icons
+registerRoute(
+  ({ request }) => request.destination === 'image',
+  new CacheFirst({
+    cacheName: 'images-cache',
+    plugins: [
+      new CacheableResponsePlugin({
+        statuses: [0, 200],
+      }),
+      new ExpirationPlugin({
+        maxEntries: 60,
+        maxAgeSeconds: 30 * 24 * 60 * 60, // 30 Days
+      }),
+    ],
+  })
+);
+
 // Force immediate activation of new SW
 self.addEventListener('install', () => {
-    console.log('[SW] Installing, skipping waiting...');
-    self.skipWaiting();
+  console.log('[SW] Installing Cognitive Clarity PWA Service Worker...');
+  self.skipWaiting();
 });
 
 self.addEventListener('activate', () => {
-    console.log('[SW] Activating, claiming clients...');
-    clientsClaim();
+  console.log('[SW] Activating Cognitive Clarity PWA Service Worker...');
+  clientsClaim();
 });
 
-// Handle SKIP_WAITING message from client
+// Handle explicit SKIP_WAITING message from client UI
 self.addEventListener('message', (event) => {
-    if (event.data?.type === 'SKIP_WAITING') {
-        self.skipWaiting();
-    }
+  if (event.data?.type === 'SKIP_WAITING') {
+    self.skipWaiting();
+  }
 });
diff --git a/test/apiConfig.test.ts b/test/apiConfig.test.ts
new file mode 100644
index 0000000..1e0c75b
--- /dev/null
+++ b/test/apiConfig.test.ts
@@ -0,0 +1,65 @@
+import { describe, test, expect } from 'vitest';
+import { 
+  DEFAULT_OPENROUTER_MODEL, 
+  DEFAULT_SUPERVISOR_MODEL, 
+  getOpenRouterApiKey, 
+  hasOpenRouterApiKey,
+  getGeminiApiKey,
+  hasGeminiApiKey
+} from '../services/apiConfig';
+
+describe('API Configuration & Model Defaults', () => {
+  test('should default to latest Google Gemini 3.8 Flash model', () => {
+    expect(DEFAULT_OPENROUTER_MODEL).toBe('google/gemini-3.8-flash');
+    expect(DEFAULT_SUPERVISOR_MODEL).toBe('google/gemini-3.8-flash');
+  });
+
+  test('should return trimmed explicit custom API key when provided', () => {
+    const key = getOpenRouterApiKey('  sk-or-v1-custom-key-12345  ');
+    expect(key).toBe('sk-or-v1-custom-key-12345');
+  });
+
+  test('should fallback to environment variable when no argument or stored setting exists', () => {
+    const originalEnv = process.env.OPENROUTER_API_KEY;
+    try {
+      process.env.OPENROUTER_API_KEY = 'sk-or-v1-env-fallback-key';
+      const key = getOpenRouterApiKey();
+      expect(key).toBe('sk-or-v1-env-fallback-key');
+      expect(hasOpenRouterApiKey()).toBe(true);
+    } finally {
+      if (originalEnv !== undefined) {
+        process.env.OPENROUTER_API_KEY = originalEnv;
+      } else {
+        delete process.env.OPENROUTER_API_KEY;
+      }
+    }
+  });
+
+  test('should return empty string when no keys are configured', () => {
+    const originalEnv = process.env.OPENROUTER_API_KEY;
+    try {
+      process.env.OPENROUTER_API_KEY = '';
+      const key = getOpenRouterApiKey('');
+      expect(key).toBe('');
+    } finally {
+      if (originalEnv !== undefined) {
+        process.env.OPENROUTER_API_KEY = originalEnv;
+      }
+    }
+  });
+
+  test('should resolve Google Gemini API Key from environment or explicit argument', () => {
+    expect(getGeminiApiKey('AIzaSyCustomKey')).toBe('AIzaSyCustomKey');
+    expect(hasGeminiApiKey()).toBe(true);
+
+    const originalEnv = process.env.GEMINI_API_KEY;
+    try {
+      process.env.GEMINI_API_KEY = 'AIzaSyFallbackKey';
+      expect(getGeminiApiKey()).toBe('AIzaSyFallbackKey');
+    } finally {
+      if (originalEnv !== undefined) {
+        process.env.GEMINI_API_KEY = originalEnv;
+      }
+    }
+  });
+});
diff --git a/test/audioEngine.test.ts b/test/audioEngine.test.ts
new file mode 100644
index 0000000..df0da98
--- /dev/null
+++ b/test/audioEngine.test.ts
@@ -0,0 +1,161 @@
+import { describe, test, expect, vi, beforeEach, afterEach } from 'vitest';
+import { AudioEngine } from '../src/lib/audio/AudioEngine.svelte';
+import { UserSettingsStore } from '../src/lib/stores/UserSettingsStore.svelte';
+import type { Scenario } from '../types';
+
+describe('AudioEngine Reactive Controller', () => {
+  const mockScenario: Scenario = {
+    id: 'test-s1',
+    title: 'Silent Friend',
+    description: 'Friend has not replied to your text',
+    category: 'Relationships',
+    difficulty: 'Beginner',
+    systemInstruction: 'INTERNAL CBT LOGIC: You were just busy.',
+    initialMessage: 'Hey, sorry I was swamped yesterday.',
+    cbtFocus: ['Mind Reading'],
+    characterName: 'Sam'
+  };
+
+  let mockAudioContext: any;
+  let mockUserMediaStream: any;
+
+  beforeEach(() => {
+    mockAudioContext = {
+      state: 'running',
+      destination: {},
+      createAnalyser: () => ({
+        fftSize: 256,
+        frequencyBinCount: 128,
+        getByteFrequencyData: (arr: Uint8Array) => arr.fill(50)
+      }),
+      createMediaStreamSource: () => ({
+        connect: vi.fn()
+      }),
+      createBufferSource: () => ({
+        buffer: null,
+        connect: vi.fn(),
+        start: vi.fn(),
+        stop: vi.fn(),
+        onended: null
+      }),
+      decodeAudioData: async () => ({
+        duration: 2.0
+      }),
+      resume: vi.fn(),
+      close: vi.fn()
+    };
+
+    mockUserMediaStream = {
+      getTracks: () => [
+        {
+          stop: vi.fn()
+        }
+      ]
+    };
+
+    vi.stubGlobal('AudioContext', function () {
+      return mockAudioContext;
+    });
+
+    vi.stubGlobal('navigator', {
+      mediaDevices: {
+        getUserMedia: async () => mockUserMediaStream,
+        enumerateDevices: async () => []
+      }
+    });
+
+    vi.stubGlobal('requestAnimationFrame', (cb: FrameRequestCallback) => 1);
+    vi.stubGlobal('cancelAnimationFrame', vi.fn());
+  });
+
+  afterEach(() => {
+    vi.restoreAllMocks();
+  });
+
+  test('AudioEngine reports error if OpenRouter API key is missing', async () => {
+    const userSettings = new UserSettingsStore();
+    userSettings.openRouterApiKey = '';
+
+    const originalEnv = process.env.OPENROUTER_API_KEY;
+    try {
+      process.env.OPENROUTER_API_KEY = '';
+      const engine = new AudioEngine(mockScenario, userSettings);
+      await engine.start();
+
+      expect(engine.status).toBe('error');
+      expect(engine.errorMessage).toContain('OpenRouter API Key is missing');
+    } finally {
+      if (originalEnv !== undefined) process.env.OPENROUTER_API_KEY = originalEnv;
+    }
+  });
+
+  test('AudioEngine initializes, starts, and loads initial greeting when API key is present', async () => {
+    const userSettings = new UserSettingsStore();
+    userSettings.openRouterApiKey = 'sk-or-v1-mock-valid-key';
+
+    const engine = new AudioEngine(mockScenario, userSettings);
+    // Mock speakText to avoid real network call
+    engine.speakText = vi.fn();
+
+    await engine.start();
+
+    expect(engine.status).toBe('active');
+    expect(engine.errorMessage).toBe(null);
+    expect(engine.messages.length).toBe(1);
+    expect(engine.messages[0].text).toBe(mockScenario.initialMessage);
+    expect(engine.speakText).toHaveBeenCalledWith(mockScenario.initialMessage);
+
+    engine.destroy();
+  });
+
+  test('toggleMute toggles isMuted state and stops audio', async () => {
+    const userSettings = new UserSettingsStore();
+    const engine = new AudioEngine(mockScenario, userSettings);
+
+    expect(engine.isMuted).toBe(false);
+    engine.toggleMute();
+    expect(engine.isMuted).toBe(true);
+
+    engine.toggleMute();
+    expect(engine.isMuted).toBe(false);
+
+    engine.destroy();
+  });
+
+  test('stopAllAudio resets AI speaking flags and cancels speech synthesis', () => {
+    const cancelMock = vi.fn();
+    vi.stubGlobal('speechSynthesis', {
+      cancel: cancelMock,
+      speak: vi.fn()
+    });
+
+    const userSettings = new UserSettingsStore();
+    const engine = new AudioEngine(mockScenario, userSettings);
+    engine.isAiSpeaking = true;
+    engine.aiAudioLevel = 45;
+
+    engine.stopAllAudio();
+
+    expect(engine.isAiSpeaking).toBe(false);
+    expect(engine.aiAudioLevel).toBe(0);
+    expect(cancelMock).toHaveBeenCalled();
+
+    engine.destroy();
+  });
+
+  test('activeLevel derived property reflects active speaker volume', () => {
+    const userSettings = new UserSettingsStore();
+    const engine = new AudioEngine(mockScenario, userSettings);
+
+    engine.micLevel = 25;
+    engine.aiAudioLevel = 60;
+
+    engine.isAiSpeaking = false;
+    expect(engine.activeLevel).toBe(25);
+
+    engine.isAiSpeaking = true;
+    expect(engine.activeLevel).toBe(60);
+
+    engine.destroy();
+  });
+});
diff --git a/test/audioUtils.test.ts b/test/audioUtils.test.ts
new file mode 100644
index 0000000..9a41ed4
--- /dev/null
+++ b/test/audioUtils.test.ts
@@ -0,0 +1,99 @@
+import { describe, test, expect } from 'vitest';
+import {
+  floatTo16BitPCM,
+  encodeBase64,
+  decodeBase64,
+  decodeAudioData
+} from '../services/audioUtils';
+
+describe('Audio Utilities & PCM DSP', () => {
+  test('floatTo16BitPCM converts Float32Array to 16-bit PCM buffer with proper clamping', () => {
+    // Input with values within range, positive clamp (>1), negative clamp (<-1), and zero
+    const input = new Float32Array([0.0, 0.5, 1.0, 1.5, -0.5, -1.0, -1.5]);
+    const buffer = floatTo16BitPCM(input);
+
+    expect(buffer.byteLength).toBe(input.length * 2);
+
+    const view = new DataView(buffer);
+    // 0.0 -> 0
+    expect(view.getInt16(0, true)).toBe(0);
+    // 0.5 -> 0.5 * 32767 = 16383.5 -> 16383
+    expect(Math.abs(view.getInt16(2, true) - 16383)).toBeLessThanOrEqual(1);
+    // 1.0 -> 32767
+    expect(view.getInt16(4, true)).toBe(0x7fff);
+    // 1.5 clamped to 1.0 -> 32767
+    expect(view.getInt16(6, true)).toBe(0x7fff);
+    // -0.5 -> -0.5 * 32768 = -16384
+    expect(Math.abs(view.getInt16(8, true) - -16384)).toBeLessThanOrEqual(1);
+    // -1.0 -> -32768
+    expect(view.getInt16(10, true)).toBe(-0x8000);
+    // -1.5 clamped to -1.0 -> -32768
+    expect(view.getInt16(12, true)).toBe(-0x8000);
+  });
+
+  test('encodeBase64 and decodeBase64 perform lossless roundtrip for arbitrary byte arrays', () => {
+    const rawBytes = new Uint8Array([0, 1, 255, 128, 42, 64, 18, 99, 127]);
+    const encoded = encodeBase64(rawBytes);
+    expect(typeof encoded).toBe('string');
+    expect(encoded.length).toBeGreaterThan(0);
+
+    const decoded = decodeBase64(encoded);
+    expect(decoded.length).toBe(rawBytes.length);
+    expect(Array.from(decoded)).toEqual(Array.from(rawBytes));
+  });
+
+  test('decodeAudioData converts raw PCM Int16 bytes into AudioBuffer channels', async () => {
+    // Construct mock AudioContext with createBuffer
+    const sampleRate = 24000;
+    const numChannels = 1;
+
+    const mockChannelData = new Float32Array(4);
+    const mockAudioBuffer = {
+      length: 4,
+      numberOfChannels: 1,
+      sampleRate,
+      getChannelData: () => mockChannelData
+    };
+
+    const mockCtx = {
+      createBuffer: (channels: number, length: number, rate: number) => {
+        expect(channels).toBe(1);
+        expect(length).toBe(4);
+        expect(rate).toBe(sampleRate);
+        return mockAudioBuffer;
+      }
+    } as unknown as AudioContext;
+
+    // 4 16-bit samples: 0, 32767, -32768, 16384
+    const int16Samples = new Int16Array([0, 32767, -32768, 16384]);
+    const byteData = new Uint8Array(int16Samples.buffer);
+
+    const result = await decodeAudioData(byteData, mockCtx, sampleRate, numChannels);
+    expect(result).toBe(mockAudioBuffer);
+
+    // Verify channel data normalized between -1.0 and 1.0
+    expect(mockChannelData[0]).toBe(0);
+    expect(mockChannelData[1]).toBeCloseTo(1.0, 2);
+    expect(mockChannelData[2]).toBe(-1.0);
+    expect(mockChannelData[3]).toBeCloseTo(0.5, 2);
+  });
+
+  test('decodeAudioData handles uneven byte lengths gracefully', async () => {
+    const mockChannelData = new Float32Array(2);
+    const mockAudioBuffer = {
+      length: 2,
+      numberOfChannels: 1,
+      sampleRate: 24000,
+      getChannelData: () => mockChannelData
+    };
+
+    const mockCtx = {
+      createBuffer: () => mockAudioBuffer
+    } as unknown as AudioContext;
+
+    // 5 bytes (uneven) -> trimmed to 4 bytes (2 samples)
+    const unevenBytes = new Uint8Array([0, 0, 255, 127, 42]);
+    const result = await decodeAudioData(unevenBytes, mockCtx);
+    expect(result).toBe(mockAudioBuffer);
+  });
+});
diff --git a/test/openRouterService.test.ts b/test/openRouterService.test.ts
new file mode 100644
index 0000000..2074b6c
--- /dev/null
+++ b/test/openRouterService.test.ts
@@ -0,0 +1,246 @@
+import { describe, test, expect, afterEach } from 'vitest';
+import { 
+  analyzeTurnWithOpenRouter, 
+  generateSessionSummaryReport, 
+  generateScenarioWithOpenRouter,
+  streamOpenRouterChat
+} from '../services/openRouterService';
+import { DEFAULT_OPENROUTER_MODEL } from '../services/apiConfig';
+
+describe('OpenRouter Service Integration', () => {
+  const originalFetch = globalThis.fetch;
+  const mockKey = 'sk-or-v1-mock-test-key-999';
+
+  afterEach(() => {
+    globalThis.fetch = originalFetch;
+  });
+
+  test('should throw error when no API key is provided and none in environment', async () => {
+    const originalEnv = process.env.OPENROUTER_API_KEY;
+    try {
+      process.env.OPENROUTER_API_KEY = '';
+      await expect(
+        analyzeTurnWithOpenRouter('turn', 'title', 'desc', ['Catastrophizing'], { apiKey: '' })
+      ).rejects.toThrow(/OpenRouter API key is missing/);
+    } finally {
+      if (originalEnv !== undefined) process.env.OPENROUTER_API_KEY = originalEnv;
+    }
+  });
+
+  test('analyzeTurnWithOpenRouter sends expected headers and uses custom model when specified', async () => {
+    let capturedUrl = '';
+    let capturedHeaders: any = {};
+    let capturedBody: any = {};
+
+    globalThis.fetch = async (url: any, init: any) => {
+      capturedUrl = url.toString();
+      capturedHeaders = init?.headers;
+      capturedBody = JSON.parse(init?.body as string);
+
+      const mockResponse = {
+        choices: [
+          {
+            message: {
+              content: JSON.stringify({
+                analysis: { distortions: ['Mind Reading'], isAdaptive: false, evidence: 'User assumed negative intent.' },
+                rating: { score: 2, reason: 'High distortion presence' },
+                suggestions: { alternativeThought: 'Ask for clarification first.', behavioralStep: 'Send a follow-up text.' }
+              })
+            }
+          }
+        ]
+      };
+
+      return new Response(JSON.stringify(mockResponse), {
+        status: 200,
+        headers: { 'Content-Type': 'application/json' }
+      });
+    };
+
+    const result = await analyzeTurnWithOpenRouter(
+      'User said: "They hate me."',
+      'Silent Friend',
+      'A friend has not replied.',
+      ['Mind Reading'],
+      { apiKey: mockKey, model: 'google/gemini-3.8-flash' }
+    );
+
+    expect(capturedUrl).toBe('https://openrouter.ai/api/v1/chat/completions');
+    expect(capturedHeaders['Authorization']).toBe(`Bearer ${mockKey}`);
+    expect(capturedHeaders['HTTP-Referer']).toBe('https://cognitive-clarity.app');
+    expect(capturedBody.model).toBe('google/gemini-3.8-flash');
+    expect(capturedBody.response_format?.type).toBe('json_object');
+    expect(result.analysis.isAdaptive).toBe(false);
+    expect(result.analysis.distortions).toEqual(['Mind Reading']);
+    expect(result.rating.score).toBe(2);
+  });
+
+  test('generateScenarioWithOpenRouter defaults to DEFAULT_OPENROUTER_MODEL when model option is omitted', async () => {
+    let capturedBody: any = {};
+
+    globalThis.fetch = async (url: any, init: any) => {
+      capturedBody = JSON.parse(init?.body as string);
+
+      const mockScenario = {
+        id: 'mock-1',
+        title: 'Workplace Feedback',
+        characterName: 'Boss',
+        description: 'Meeting about quarterly review',
+        category: 'Workplace',
+        difficulty: 'Intermediate',
+        systemInstruction: 'INTERNAL CBT LOGIC: React defensively if blamed.',
+        initialMessage: 'We need to discuss this report.',
+        cbtFocus: ['All-or-Nothing Thinking']
+      };
+
+      return new Response(JSON.stringify({ choices: [{ message: { content: JSON.stringify(mockScenario) } }] }), {
+        status: 200,
+        headers: { 'Content-Type': 'application/json' }
+      });
+    };
+
+    const scenario = await generateScenarioWithOpenRouter(
+      'Quarterly review',
+      ['All-or-Nothing Thinking'],
+      'Intermediate',
+      { apiKey: mockKey }
+    );
+
+    expect(capturedBody.model).toBe(DEFAULT_OPENROUTER_MODEL);
+    expect(scenario.title).toBe('Workplace Feedback');
+    expect(scenario.difficulty).toBe('Intermediate');
+  });
+
+  test('streamOpenRouterChat streams SSE tokens and handles completion', async () => {
+    const sseChunks = [
+      'data: {"choices":[{"delta":{"content":"I "}}]}\n\n',
+      'data: {"choices":[{"delta":{"content":"understand."}}]}\n\n',
+      'data: [DONE]\n\n'
+    ];
+
+    const encoder = new TextEncoder();
+    const stream = new ReadableStream({
+      start(controller) {
+        for (const chunk of sseChunks) {
+          controller.enqueue(encoder.encode(chunk));
+        }
+        controller.close();
+      }
+    });
+
+    globalThis.fetch = async () => {
+      return new Response(stream, {
+        status: 200,
+        headers: { 'Content-Type': 'text/event-stream' }
+      });
+    };
+
+    const collectedChunks: string[] = [];
+    let completedText = '';
+
+    const result = await streamOpenRouterChat(
+      [{ id: '1', role: 'user', text: 'Hello', timestamp: new Date() }],
+      'You are a peer.',
+      {
+        onChunk: (chunk) => collectedChunks.push(chunk),
+        onComplete: (full) => { completedText = full; }
+      },
+      { apiKey: mockKey, model: 'google/gemini-3.8-flash' }
+    );
+
+    expect(result).toBe('I understand.');
+    expect(completedText).toBe('I understand.');
+    expect(collectedChunks).toEqual(['I ', 'understand.']);
+  });
+
+  test('generateSessionSummaryReport sends all conversation turns and parses clinical report', async () => {
+    let capturedBody: any = {};
+
+    globalThis.fetch = async (url: any, init: any) => {
+      capturedBody = JSON.parse(init?.body as string);
+
+      const mockReport = {
+        analysis: {
+          distortions: ['Catastrophizing'],
+          isAdaptive: false,
+          evidence: 'I am definitely going to get fired.'
+        },
+        rating: {
+          score: 3,
+          reason: 'Showed initial panic but engaged in dialogue.'
+        },
+        suggestions: {
+          alternativeThought: 'Receiving negative feedback does not mean immediate termination.',
+          behavioralStep: 'Schedule a clarifying 1-on-1 meeting next week.'
+        }
+      };
+
+      return new Response(JSON.stringify({
+        choices: [{ message: { content: JSON.stringify(mockReport) } }]
+      }), {
+        status: 200,
+        headers: { 'Content-Type': 'application/json' }
+      });
+    };
+
+    const messages = [
+      { id: '1', role: 'model' as const, text: 'Your performance was lacking this month.', timestamp: new Date() },
+      { id: '2', role: 'user' as const, text: 'I am definitely going to get fired.', timestamp: new Date() }
+    ];
+
+    const report = await generateSessionSummaryReport(
+      messages,
+      'Performance Review',
+      'Manager discusses quarterly output',
+      { apiKey: mockKey, model: 'google/gemini-3.8-flash' }
+    );
+
+    expect(capturedBody.model).toBe('google/gemini-3.8-flash');
+    expect(report.analysis.distortions).toEqual(['Catastrophizing']);
+    expect(report.rating.score).toBe(3);
+    expect(report.suggestions.alternativeThought).toContain('termination');
+  });
+
+  test('synthesizeSpeechWithOpenRouter returns audio ArrayBuffer on success', async () => {
+    const mockAudioBytes = new Uint8Array([1, 2, 3, 4, 5, 6, 7, 8]);
+    let capturedUrl = '';
+    let capturedBody: any = {};
+
+    globalThis.fetch = async (url: any, init: any) => {
+      capturedUrl = url.toString();
+      capturedBody = JSON.parse(init?.body as string);
+
+      return new Response(mockAudioBytes.buffer, {
+        status: 200,
+        headers: { 'Content-Type': 'audio/mpeg' }
+      });
+    };
+
+    const { synthesizeSpeechWithOpenRouter } = await import('../services/openRouterService');
+    const buffer = await synthesizeSpeechWithOpenRouter(
+      'Good morning. How are you feeling today?',
+      'nova',
+      mockKey
+    );
+
+    expect(capturedUrl).toBe('https://openrouter.ai/api/v1/audio/speech');
+    expect(capturedBody.input).toBe('Good morning. How are you feeling today?');
+    expect(capturedBody.voice).toBe('nova');
+    expect(buffer.byteLength).toBe(8);
+  });
+
+  test('synthesizeSpeechWithOpenRouter throws error on non-200 response', async () => {
+    globalThis.fetch = async () => {
+      return new Response('Unauthorized voice quota exceeded', {
+        status: 401,
+        headers: { 'Content-Type': 'text/plain' }
+      });
+    };
+
+    const { synthesizeSpeechWithOpenRouter } = await import('../services/openRouterService');
+    await expect(
+      synthesizeSpeechWithOpenRouter('Hello', 'alloy', mockKey)
+    ).rejects.toThrow(/OpenRouter TTS synthesis failed with status 401/);
+  });
+});
+
diff --git a/test/scenarios.test.ts b/test/scenarios.test.ts
new file mode 100644
index 0000000..47d08fc
--- /dev/null
+++ b/test/scenarios.test.ts
@@ -0,0 +1,34 @@
+import { describe, test, expect } from 'vitest';
+import { SCENARIOS, CBT_GLOSSARY } from '../constants';
+import { validateScenario } from '../scripts/validate-scenarios';
+
+describe('CBT Clinical Scenarios Catalog', () => {
+  test('should contain exactly 14 pre-calibrated default scenarios', () => {
+    expect(SCENARIOS.length).toBe(14);
+  });
+
+  test('every scenario should pass strict schema validation with zero errors', () => {
+    for (const scenario of SCENARIOS) {
+      const result = validateScenario(scenario);
+      expect(result.isValid).toBe(true);
+      expect(result.errors.length).toBe(0);
+    }
+  });
+
+  test('every scenario should have an assigned character name and non-empty initial message', () => {
+    for (const scenario of SCENARIOS) {
+      expect(scenario.characterName && scenario.characterName.trim().length > 0).toBe(true);
+      expect(scenario.initialMessage && scenario.initialMessage.trim().length > 0).toBe(true);
+      expect(scenario.systemInstruction.includes('INTERNAL CBT LOGIC')).toBe(true);
+    }
+  });
+
+  test('CBT glossary should contain valid definitions for all categories', () => {
+    expect(CBT_GLOSSARY.length).toBeGreaterThanOrEqual(18);
+    for (const entry of CBT_GLOSSARY) {
+      expect(entry.term && entry.term.trim().length > 0).toBe(true);
+      expect(entry.definition && entry.definition.trim().length > 0).toBe(true);
+      expect(['Distortion', 'Technique', 'Concept'].includes(entry.category)).toBe(true);
+    }
+  });
+});
diff --git a/test/sessionStorage.test.ts b/test/sessionStorage.test.ts
new file mode 100644
index 0000000..8157e4b
--- /dev/null
+++ b/test/sessionStorage.test.ts
@@ -0,0 +1,183 @@
+import { describe, test, expect, beforeEach, vi } from 'vitest';
+import {
+  getSavedSessions,
+  saveSession,
+  deleteSession,
+  formatSessionAsMarkdown,
+  downloadFile
+} from '../services/sessionStorage';
+import type { Scenario, Message, AnalysisResult } from '../types';
+
+describe('Session Storage & Export Service', () => {
+  const mockStorage: Record<string, string> = {};
+
+  const mockScenario: Scenario = {
+    id: 'test-scenario-1',
+    title: 'Workplace Disagreement',
+    description: 'Resolving friction with a manager',
+    category: 'Workplace',
+    difficulty: 'Intermediate',
+    systemInstruction: 'INTERNAL CBT LOGIC: React with skepticism.',
+    initialMessage: 'Why was this project late?',
+    cbtFocus: ['All-or-Nothing Thinking', 'Mind Reading'],
+    characterName: 'Director Vance'
+  };
+
+  const mockMessages: Message[] = [
+    {
+      id: 'm1',
+      role: 'model',
+      text: 'Why was this project late?',
+      timestamp: new Date()
+    },
+    {
+      id: 'm2',
+      role: 'user',
+      text: 'We encountered unexpected API downtime, but delivered within scope.',
+      timestamp: new Date()
+    }
+  ];
+
+  const mockAnalysis: AnalysisResult = {
+    analysis: {
+      distortions: ['Mind Reading'],
+      isAdaptive: true,
+      evidence: 'User acknowledged the delay factually without catastrophic self-blame.'
+    },
+    rating: {
+      score: 4,
+      reason: 'Strong boundary maintenance and objective attribution.'
+    },
+    suggestions: {
+      alternativeThought: 'Delays happen due to technical constraints; focus on resolution.',
+      behavioralStep: 'Send an updated post-mortem dashboard to stakeholders.'
+    }
+  };
+
+  beforeEach(() => {
+    for (const key in mockStorage) {
+      delete mockStorage[key];
+    }
+
+    vi.stubGlobal('localStorage', {
+      getItem: (key: string) => mockStorage[key] || null,
+      setItem: (key: string, val: string) => {
+        mockStorage[key] = val;
+      },
+      removeItem: (key: string) => {
+        delete mockStorage[key];
+      },
+      clear: () => {
+        for (const key in mockStorage) {
+          delete mockStorage[key];
+        }
+      }
+    });
+  });
+
+  test('getSavedSessions returns empty array when storage is empty', () => {
+    expect(getSavedSessions()).toEqual([]);
+  });
+
+  test('getSavedSessions handles corrupted JSON gracefully', () => {
+    mockStorage['cognitive-clarity-saved-sessions'] = 'INVALID_JSON_CORRUPTED';
+    const sessions = getSavedSessions();
+    expect(sessions).toEqual([]);
+  });
+
+  test('saveSession stores new session and retrieves it', () => {
+    const saved = saveSession(mockScenario, 'text', mockMessages, mockAnalysis);
+    expect(saved.scenarioId).toBe(mockScenario.id);
+    expect(saved.scenarioTitle).toBe(mockScenario.title);
+    expect(saved.mode).toBe('text');
+    expect(saved.messages.length).toBe(2);
+    expect(saved.finalReport?.rating.score).toBe(4);
+
+    const all = getSavedSessions();
+    expect(all.length).toBe(1);
+    expect(all[0].id).toBe(saved.id);
+  });
+
+  test('saveSession caps history at 50 sessions', () => {
+    for (let i = 0; i < 55; i++) {
+      saveSession(
+        { ...mockScenario, id: `scenario-${i}` },
+        'text',
+        mockMessages
+      );
+    }
+
+    const all = getSavedSessions();
+    expect(all.length).toBe(50);
+  });
+
+  test('deleteSession removes specific session by id', () => {
+    const s1 = saveSession(mockScenario, 'text', mockMessages);
+    const s2 = saveSession({ ...mockScenario, id: 's2', title: 'Second' }, 'voice', mockMessages);
+
+    expect(getSavedSessions().length).toBe(2);
+
+    deleteSession(s1.id);
+    const remaining = getSavedSessions();
+    expect(remaining.length).toBe(1);
+    expect(remaining[0].id).toBe(s2.id);
+  });
+
+  test('formatSessionAsMarkdown generates structured markdown report with all sections', () => {
+    const md = formatSessionAsMarkdown('Workplace Disagreement', mockAnalysis, mockMessages);
+
+    expect(md).toContain('# Cognitive Clarity — Clinical CBT Session Report');
+    expect(md).toContain('**Scenario:** Workplace Disagreement');
+    expect(md).toContain('✅ Adaptive Growth Observed');
+    expect(md).toContain('**Mastery Rating:** 4 / 5');
+    expect(md).toContain('- Mind Reading');
+    expect(md).toContain('User acknowledged the delay factually');
+    expect(md).toContain('Delays happen due to technical constraints');
+    expect(md).toContain('## 3. Session Transcript');
+    expect(md).toContain('**[AI Partner]**: Why was this project late?');
+    expect(md).toContain('**[You]**: We encountered unexpected API downtime');
+  });
+
+  test('downloadFile creates object URL and triggers anchor click in DOM', () => {
+    let clicked = false;
+    let appended = false;
+    let removed = false;
+    let revokedUrl = '';
+
+    const mockAnchor = {
+      href: '',
+      download: '',
+      click: () => {
+        clicked = true;
+      }
+    };
+
+    vi.stubGlobal('URL', {
+      createObjectURL: () => 'blob:mock-url-123',
+      revokeObjectURL: (url: string) => {
+        revokedUrl = url;
+      }
+    });
+
+    vi.stubGlobal('document', {
+      createElement: () => mockAnchor,
+      body: {
+        appendChild: () => {
+          appended = true;
+        },
+        removeChild: () => {
+          removed = true;
+        }
+      }
+    });
+
+    downloadFile('# Report', 'report.md', 'text/markdown');
+
+    expect(mockAnchor.download).toBe('report.md');
+    expect(mockAnchor.href).toBe('blob:mock-url-123');
+    expect(clicked).toBe(true);
+    expect(appended).toBe(true);
+    expect(removed).toBe(true);
+    expect(revokedUrl).toBe('blob:mock-url-123');
+  });
+});
diff --git a/test/stores.test.ts b/test/stores.test.ts
new file mode 100644
index 0000000..ac07500
--- /dev/null
+++ b/test/stores.test.ts
@@ -0,0 +1,119 @@
+import { describe, test, expect, vi, beforeEach } from 'vitest';
+import { UserSettingsStore } from '../src/lib/stores/UserSettingsStore.svelte';
+import { AppStateStore } from '../src/lib/stores/AppStateStore.svelte';
+import type { Scenario } from '../types';
+
+describe('Svelte 5 Reactive Stores', () => {
+  const mockStorage: Record<string, string> = {};
+
+  beforeEach(() => {
+    for (const key in mockStorage) {
+      delete mockStorage[key];
+    }
+
+    vi.stubGlobal('localStorage', {
+      getItem: (key: string) => mockStorage[key] || null,
+      setItem: (key: string, val: string) => {
+        mockStorage[key] = val;
+      },
+      removeItem: (key: string) => {
+        delete mockStorage[key];
+      },
+      clear: () => {
+        for (const key in mockStorage) {
+          delete mockStorage[key];
+        }
+      }
+    });
+  });
+
+  test('UserSettingsStore initializes with 3.8 models and correct defaults', () => {
+    const store = new UserSettingsStore();
+    expect(store.voiceName).toBe('Zephyr');
+    expect(store.roleplayModel).toBe('google/gemini-3.8-flash');
+    expect(store.supervisorModel).toBe('google/gemini-3.8-flash');
+    expect(store.genderPreference).toBe('Neutral');
+  });
+
+  test('UserSettingsStore updates properties cleanly', () => {
+    const store = new UserSettingsStore();
+    store.update({
+      voiceName: 'Kore',
+      openRouterApiKey: 'sk-or-v1-svelte-test-key',
+      roleplayModel: 'google/gemini-3.7-flash'
+    });
+
+    expect(store.voiceName).toBe('Kore');
+    expect(store.openRouterApiKey).toBe('sk-or-v1-svelte-test-key');
+    expect(store.roleplayModel).toBe('google/gemini-3.7-flash');
+
+    const plain = store.toUserSettings();
+    expect(plain.voiceName).toBe('Kore');
+    expect(plain.openRouterApiKey).toBe('sk-or-v1-svelte-test-key');
+  });
+
+  test('UserSettingsStore recovers gracefully from corrupted localStorage', () => {
+    mockStorage['cognitive-clarity-settings'] = 'MALFORMED_JSON_STRING';
+    const store = new UserSettingsStore();
+    expect(store.voiceName).toBe('Zephyr');
+    expect(store.roleplayModel).toBe('google/gemini-3.8-flash');
+  });
+
+  test('AppStateStore manages scenario catalog and filtering', () => {
+    const app = new AppStateStore();
+    expect(app.allScenarios.length).toBe(14);
+
+    app.selectedDifficulty = 'Beginner';
+    expect(app.filteredScenarios.every((s) => s.difficulty === 'Beginner')).toBe(true);
+
+    app.selectedDifficulty = 'Advanced';
+    expect(app.filteredScenarios.every((s) => s.difficulty === 'Advanced')).toBe(true);
+
+    app.selectedDifficulty = 'All';
+    expect(app.filteredScenarios.length).toBe(14);
+  });
+
+  test('AppStateStore adds and removes custom scenarios', () => {
+    const app = new AppStateStore();
+    const customScenario: Scenario = {
+      id: 'custom-test-1',
+      title: 'Custom Job Negotiation',
+      description: 'Negotiating offer',
+      category: 'Workplace',
+      difficulty: 'Intermediate',
+      systemInstruction: 'INTERNAL CBT LOGIC: Be firm.',
+      initialMessage: 'Here is our final offer.',
+      cbtFocus: ['All-or-Nothing Thinking'],
+      characterName: 'Hiring Lead'
+    };
+
+    app.addCustomScenario(customScenario);
+    expect(app.customScenarios.length).toBe(1);
+    expect(app.allScenarios.length).toBe(15);
+    expect(app.allScenarios[0].id).toBe('custom-test-1');
+
+    app.deleteCustomScenario('custom-test-1');
+    expect(app.customScenarios.length).toBe(0);
+    expect(app.allScenarios.length).toBe(14);
+  });
+
+  test('AppStateStore selectScenario and exitSession lifecycle', async () => {
+    vi.useFakeTimers();
+    const app = new AppStateStore();
+    const targetScenario = app.allScenarios[0];
+
+    app.selectScenario(targetScenario, 'voice');
+    expect(app.isPreparing).toBe(true);
+    expect(app.activeScenario).toBe(null);
+
+    vi.advanceTimersByTime(1400);
+
+    expect(app.isPreparing).toBe(false);
+    expect(app.activeScenario?.id).toBe(targetScenario.id);
+    expect(app.sessionMode).toBe('voice');
+
+    app.exitSession();
+    expect(app.activeScenario).toBe(null);
+    vi.useRealTimers();
+  });
+});
diff --git a/test/voiceAuditionService.test.ts b/test/voiceAuditionService.test.ts
new file mode 100644
index 0000000..9528aff
--- /dev/null
+++ b/test/voiceAuditionService.test.ts
@@ -0,0 +1,206 @@
+import { describe, test, expect, vi, beforeEach, afterEach } from 'vitest';
+import { VoiceAuditionService } from '../services/voiceAuditionService';
+import { VOICE_PROFILES } from '../constants';
+
+describe('VoiceAuditionService and Natural Voice Calibration', () => {
+  let service: VoiceAuditionService;
+
+  beforeEach(() => {
+    service = new VoiceAuditionService();
+  });
+
+  afterEach(() => {
+    service.stop();
+    vi.restoreAllMocks();
+  });
+
+  test('VOICE_PROFILES contains Fenrir as the gruff salt-of-the-earth persona mapped to onyx', () => {
+    const fenrir = VOICE_PROFILES.find((p) => p.id === 'Fenrir');
+    expect(fenrir).toBeDefined();
+    expect(fenrir?.label).toContain('Salt of the Earth');
+    expect(fenrir?.style).toContain('Gruff');
+    expect(fenrir?.openRouterVoice).toBe('onyx'); // OpenAI/OpenRouter deep, gravelly voice
+    expect(fenrir?.webSpeechTuning.pitch).toBeLessThan(1.0); // Low, gravelly pitch
+    expect(fenrir?.sampleText).toContain('honest step at a time');
+  });
+
+  test('VOICE_PROFILES includes 5 distinct clinical voice personas', () => {
+    expect(VOICE_PROFILES.length).toBe(5);
+    const voiceIds = VOICE_PROFILES.map((p) => p.id);
+    expect(voiceIds).toEqual(['Fenrir', 'Zephyr', 'Puck', 'Kore', 'Charon']);
+  });
+
+  test('getProfile returns matching VoiceProfile or falls back to default', () => {
+    const profile = service.getProfile('Fenrir');
+    expect(profile.id).toBe('Fenrir');
+    expect(profile.openRouterVoice).toBe('onyx');
+
+    // @ts-expect-error test fallback
+    const fallback = service.getProfile('NonExistent');
+    expect(fallback.id).toBe('Fenrir');
+  });
+
+  test('playPreview uses Google Gemini native voice when Gemini API key is available', async () => {
+    const mockWavBase64 = 'UklGRgAAAABXQVZFZm10IBAAAAABAAEAQB8AAEAfAAABAAgAZGF0YQAAAAA=';
+    vi.stubGlobal('fetch', vi.fn().mockResolvedValue({
+      ok: true,
+      status: 200,
+      json: async () => ({
+        candidates: [{
+          content: {
+            parts: [{
+              inlineData: {
+                mimeType: 'audio/wav',
+                data: mockWavBase64
+              }
+            }]
+          }
+        }]
+      })
+    }));
+
+    const playMock = vi.fn().mockResolvedValue(undefined);
+    vi.stubGlobal('Audio', class MockAudio {
+      src = '';
+      play = playMock;
+      pause = vi.fn();
+      currentTime = 0;
+      onended: (() => void) | null = null;
+      onerror: (() => void) | null = null;
+      constructor(src: string) {
+        this.src = src;
+      }
+    });
+
+    vi.stubGlobal('URL', {
+      createObjectURL: vi.fn().mockReturnValue('blob:http://localhost/test-gemini-audio'),
+      revokeObjectURL: vi.fn()
+    });
+
+    await service.playPreview('Fenrir', 'Custom test sentence', undefined, undefined, 'AIzaSyMockKey');
+
+    expect(global.fetch).toHaveBeenCalledWith(
+      expect.stringContaining('gemini-3.8-flash-tts'),
+      expect.objectContaining({
+        method: 'POST',
+        body: expect.stringContaining('"voiceName":"Fenrir"')
+      })
+    );
+    expect(playMock).toHaveBeenCalled();
+  });
+
+  test('playPreview uses OpenRouter TTS when apiKey is provided and no Gemini key', async () => {
+    const originalGemini = process.env.GEMINI_API_KEY;
+    try {
+      process.env.GEMINI_API_KEY = '';
+      const mockArrayBuffer = new Uint8Array([1, 2, 3, 4]).buffer;
+      vi.stubGlobal('fetch', vi.fn().mockResolvedValue({
+        ok: true,
+        status: 200,
+        arrayBuffer: async () => mockArrayBuffer
+      }));
+
+      const playMock = vi.fn().mockResolvedValue(undefined);
+      let capturedAudioInstance: any;
+
+      vi.stubGlobal('Audio', class MockAudio {
+        src = '';
+        play = playMock;
+        pause = vi.fn();
+        currentTime = 0;
+        onended: (() => void) | null = null;
+        onerror: (() => void) | null = null;
+        constructor(src: string) {
+          this.src = src;
+          capturedAudioInstance = this;
+        }
+      });
+
+      vi.stubGlobal('URL', {
+        createObjectURL: vi.fn().mockReturnValue('blob:http://localhost/test-audio'),
+        revokeObjectURL: vi.fn()
+      });
+
+      const onEnded = vi.fn();
+      await service.playPreview('Fenrir', 'Custom test sentence', 'sk-or-v1-test-key', onEnded);
+
+      expect(global.fetch).toHaveBeenCalledWith(
+        'https://openrouter.ai/api/v1/audio/speech',
+        expect.objectContaining({
+          method: 'POST',
+          body: JSON.stringify({
+            model: 'openai/tts-1',
+            input: 'Custom test sentence',
+            voice: 'onyx' // Verified: Fenrir maps to onyx
+          })
+        })
+      );
+      expect(playMock).toHaveBeenCalled();
+
+      // Trigger onended
+      capturedAudioInstance?.onended?.();
+      expect(onEnded).toHaveBeenCalled();
+    } finally {
+      if (originalGemini !== undefined) process.env.GEMINI_API_KEY = originalGemini;
+    }
+  });
+
+  test('playPreview falls back to Web Speech Synthesis when no apiKey is provided', async () => {
+    const originalGemini = process.env.GEMINI_API_KEY;
+    const originalOR = process.env.OPENROUTER_API_KEY;
+    try {
+      process.env.GEMINI_API_KEY = '';
+      process.env.OPENROUTER_API_KEY = '';
+      const speakMock = vi.fn();
+      const cancelMock = vi.fn();
+
+      vi.stubGlobal('speechSynthesis', {
+        speak: speakMock,
+        cancel: cancelMock
+      });
+
+      vi.stubGlobal('SpeechSynthesisUtterance', class MockUtterance {
+        text: string;
+        pitch = 1.0;
+        rate = 1.0;
+        onend: (() => void) | null = null;
+        constructor(text: string) {
+          this.text = text;
+        }
+      });
+
+      const onEnded = vi.fn();
+      await service.playPreview('Fenrir', undefined, undefined, onEnded);
+
+      expect(speakMock).toHaveBeenCalled();
+      const utterance = speakMock.mock.calls[0][0];
+      expect(utterance.text).toContain('honest step at a time');
+      expect(utterance.pitch).toBe(0.75); // Gruff low pitch verified
+      expect(utterance.rate).toBe(0.92);
+    } finally {
+      if (originalGemini !== undefined) process.env.GEMINI_API_KEY = originalGemini;
+      if (originalOR !== undefined) process.env.OPENROUTER_API_KEY = originalOR;
+    }
+  });
+
+  test('stop halts both HTMLAudioElement and speechSynthesis', async () => {
+    const pauseMock = vi.fn();
+    const cancelMock = vi.fn();
+
+    vi.stubGlobal('speechSynthesis', {
+      cancel: cancelMock,
+      speak: vi.fn()
+    });
+
+    // @ts-expect-error simulate active audio
+    service.currentAudio = {
+      pause: pauseMock,
+      currentTime: 10
+    };
+
+    service.stop();
+
+    expect(pauseMock).toHaveBeenCalled();
+    expect(cancelMock).toHaveBeenCalled();
+  });
+});
diff --git a/tests/e2e/01-landing-and-navigation.spec.ts b/tests/e2e/01-landing-and-navigation.spec.ts
new file mode 100644
index 0000000..a5b1e68
--- /dev/null
+++ b/tests/e2e/01-landing-and-navigation.spec.ts
@@ -0,0 +1,66 @@
+import { test, expect } from '@playwright/test';
+import fs from 'fs';
+import path from 'path';
+
+test.describe('Landing Page & Scenario Navigation', () => {
+  test.beforeEach(async ({ page }) => {
+    // Clear localStorage to ensure fresh deterministic initial state
+    await page.addInitScript(() => {
+      window.localStorage.clear();
+      window.localStorage.setItem('cognitive-clarity-settings', JSON.stringify({
+        voiceName: 'Zephyr',
+        vocalStyle: 'Helpful',
+        genderPreference: 'Neutral',
+        openRouterApiKey: 'sk-or-v1-playwright-mock-key',
+        roleplayModel: 'google/gemini-3.8-flash',
+        supervisorModel: 'google/gemini-3.8-flash'
+      }));
+    });
+  });
+
+  test('01 - Home View Initial Render and Visual Snapshot', async ({ page }, testInfo) => {
+    await page.goto('/');
+    await page.waitForLoadState('networkidle');
+
+    // Verify Brand Hero & Elements
+    await expect(page.locator('h1')).toContainText('Cognitive Clarity');
+    await expect(page.getByText('Evidence-Based Framework')).toBeVisible();
+    await expect(page.getByText(/Vocal Partner:/)).toBeVisible();
+    await expect(page.getByRole('heading', { name: 'Training Scenarios' })).toBeVisible();
+
+    // Verify all 14 default scenarios are rendered
+    const scenarioCards = page.locator('[data-testid="scenarios-grid"] > *');
+    await expect(scenarioCards).toHaveCount(15); // 14 scenarios + 1 custom trigger button
+
+    // Capture visual snapshot
+    const shotDir = path.join(process.cwd(), 'docs/screenshots', testInfo.project.name);
+    fs.mkdirSync(shotDir, { recursive: true });
+    await page.screenshot({ path: path.join(shotDir, '01-home-initial.png'), fullPage: true });
+  });
+
+  test('02 - Filter Scenarios by Difficulty', async ({ page }, testInfo) => {
+    await page.goto('/');
+    await page.waitForLoadState('networkidle');
+
+    // Filter by Beginner
+    await page.getByRole('button', { name: 'Beginner', exact: true }).click();
+    await expect(page.getByText('The Silent Friend')).toBeVisible();
+    await expect(page.getByText('Inner Critic Echo')).toBeVisible();
+
+    const shotDir = path.join(process.cwd(), 'docs/screenshots', testInfo.project.name);
+    fs.mkdirSync(shotDir, { recursive: true });
+    await page.screenshot({ path: path.join(shotDir, '02-filter-beginner.png'), fullPage: true });
+
+    // Filter by Advanced
+    await page.getByRole('button', { name: 'Advanced', exact: true }).click();
+    await expect(page.getByText('The Social Spotlight')).toBeVisible();
+    await expect(page.getByText('The Unpaid Debt')).toBeVisible();
+    await expect(page.getByText('The Silent Friend')).not.toBeVisible();
+
+    await page.screenshot({ path: path.join(shotDir, '03-filter-advanced.png'), fullPage: true });
+
+    // Reset to All
+    await page.getByRole('button', { name: 'All', exact: true }).click();
+    await expect(page.getByText('The Silent Friend')).toBeVisible();
+  });
+});
diff --git a/tests/e2e/02-modals-and-dialogs.spec.ts b/tests/e2e/02-modals-and-dialogs.spec.ts
new file mode 100644
index 0000000..6e27b07
--- /dev/null
+++ b/tests/e2e/02-modals-and-dialogs.spec.ts
@@ -0,0 +1,122 @@
+import { test, expect } from '@playwright/test';
+import fs from 'fs';
+import path from 'path';
+
+test.describe('Modals & Clinical Dialogs Suite', () => {
+  test.beforeEach(async ({ page }) => {
+    await page.addInitScript(() => {
+      window.localStorage.clear();
+      window.localStorage.setItem('cognitive-clarity-settings', JSON.stringify({
+        voiceName: 'Zephyr',
+        vocalStyle: 'Helpful',
+        genderPreference: 'Neutral',
+        openRouterApiKey: 'sk-or-v1-playwright-test-key',
+        roleplayModel: 'google/gemini-3.8-flash',
+        supervisorModel: 'google/gemini-3.8-flash'
+      }));
+    });
+  });
+
+  test('01 - Settings Modal and Model Selector', async ({ page }, testInfo) => {
+    await page.goto('/');
+    await page.waitForLoadState('networkidle');
+
+    // Click Settings button
+    const settingsBtn = page.locator('button:has(svg)').first();
+    await settingsBtn.click();
+
+    // Verify Settings Modal elements
+    await expect(page.getByRole('heading', { name: 'Application Settings' })).toBeVisible();
+    await expect(page.getByText('Vocal Profile')).toBeVisible();
+    await expect(page.getByText('Fenrir (Salt of the Earth)')).toBeVisible();
+    await expect(page.getByText('Puck')).toBeVisible();
+    await expect(page.getByText('Kore')).toBeVisible();
+    await expect(page.getByText('Natural Voice Testing Lab')).toBeVisible();
+
+    // Select Fenrir (Salt of the Earth) persona
+    await page.getByText('Fenrir (Salt of the Earth)').click();
+    await expect(page.getByText(/Auditioning/)).toContainText('Fenrir (Salt of the Earth)');
+
+    // Click quick audition demo button
+    const auditionBtn = page.getByRole('button', { name: 'Audition Voice' });
+    await expect(auditionBtn).toBeVisible();
+    await auditionBtn.click();
+
+    const shotDir = path.join(process.cwd(), 'docs/screenshots', testInfo.project.name);
+    fs.mkdirSync(shotDir, { recursive: true });
+    await page.screenshot({ path: path.join(shotDir, '04-settings-modal-voice.png'), fullPage: true });
+
+    // Switch to OpenRouter AI Tab
+    await page.getByRole('tab', { name: 'OpenRouter AI' }).click();
+    await expect(page.getByRole('heading', { name: 'OpenRouter API Key' })).toBeVisible();
+    await expect(page.getByText('Google Gemini 3.8 Flash', { exact: true })).toBeVisible();
+    await expect(page.getByText('Frontier Ultra Low Latency')).toBeVisible();
+
+    await page.screenshot({ path: path.join(shotDir, '05-settings-modal-openrouter.png'), fullPage: true });
+
+    // Close Modal
+    await page.getByRole('button', { name: 'Save Preferences' }).click();
+    await expect(page.getByRole('heading', { name: 'Application Settings' })).not.toBeVisible();
+  });
+
+  test('02 - CBT Clinical Reference Glossary & Concept Search', async ({ page }, testInfo) => {
+    await page.goto('/');
+    await page.waitForLoadState('networkidle');
+
+    // Open Reference Guide
+    await page.getByRole('button', { name: 'Reference Guide' }).click();
+    await expect(page.getByRole('heading', { name: 'CBT Clinical Reference' })).toBeVisible();
+
+    const shotDir = path.join(process.cwd(), 'docs/screenshots', testInfo.project.name);
+    fs.mkdirSync(shotDir, { recursive: true });
+    await page.screenshot({ path: path.join(shotDir, '06-cbt-reference-all.png'), fullPage: true });
+
+    // Filter by Distortion category
+    await page.getByRole('button', { name: 'Distortion', exact: true }).click();
+    await expect(page.getByRole('heading', { name: 'All-or-Nothing Thinking' })).toBeVisible();
+    await expect(page.getByRole('heading', { name: 'Catastrophizing' })).toBeVisible();
+
+    // Search for a specific concept
+    const searchInput = page.getByPlaceholder('Search concepts, distortions, or definitions...');
+    await searchInput.fill('Mind Reading');
+    await expect(page.getByRole('heading', { name: 'Mind Reading' })).toBeVisible();
+    await expect(page.getByRole('heading', { name: 'All-or-Nothing Thinking' })).not.toBeVisible();
+
+    await page.screenshot({ path: path.join(shotDir, '07-cbt-reference-search.png'), fullPage: true });
+
+    // Close Reference Guide
+    await page.locator('div.fixed button:has(svg)').first().click();
+  });
+
+  test('03 - Custom Scenario Architect Generator', async ({ page }, testInfo) => {
+    await page.goto('/');
+    await page.waitForLoadState('networkidle');
+
+    // Open Custom Scenario Generator
+    await page.getByRole('button', { name: 'Create Custom' }).first().click();
+    await expect(page.getByRole('heading', { name: 'Clinical Scenario Architect' })).toBeVisible();
+    await expect(page.getByText('Target Dynamic & Situation')).toBeVisible();
+    await expect(page.getByText('Emotional Resistance & Difficulty')).toBeVisible();
+
+    const shotDir = path.join(process.cwd(), 'docs/screenshots', testInfo.project.name);
+    fs.mkdirSync(shotDir, { recursive: true });
+    await page.screenshot({ path: path.join(shotDir, '08-scenario-generator-modal.png'), fullPage: true });
+
+    // Fill scenario prompt
+    await page.getByPlaceholder('e.g. Asking my manager for a delayed performance review').fill(
+      'Negotiating a contract renewal with a skeptical supplier who wants to raise rates by 40%.'
+    );
+
+    // Select difficulty
+    await page.getByRole('button', { name: 'Advanced Severe Friction' }).click();
+
+    // Select CBT focus distortion
+    await page.getByRole('button', { name: 'Emotional Reasoning' }).click();
+
+    await page.screenshot({ path: path.join(shotDir, '09-scenario-generator-filled.png'), fullPage: true });
+
+    // Cancel modal
+    await page.getByRole('button', { name: 'Cancel' }).click();
+    await expect(page.getByRole('heading', { name: 'Clinical Scenario Architect' })).not.toBeVisible();
+  });
+});
diff --git a/tests/e2e/03-chat-roleplay-session.spec.ts b/tests/e2e/03-chat-roleplay-session.spec.ts
new file mode 100644
index 0000000..d843949
--- /dev/null
+++ b/tests/e2e/03-chat-roleplay-session.spec.ts
@@ -0,0 +1,153 @@
+import { test, expect } from '@playwright/test';
+import fs from 'fs';
+import path from 'path';
+
+test.describe('Chat Roleplay Simulation & Supervision Suite', () => {
+  test.beforeEach(async ({ page }) => {
+    await page.addInitScript(() => {
+      window.localStorage.clear();
+      window.localStorage.setItem('cognitive-clarity-settings', JSON.stringify({
+        voiceName: 'Zephyr',
+        vocalStyle: 'Helpful',
+        genderPreference: 'Neutral',
+        openRouterApiKey: 'sk-or-v1-playwright-test-key',
+        roleplayModel: 'google/gemini-3.8-flash',
+        supervisorModel: 'google/gemini-3.8-flash'
+      }));
+    });
+
+    // Mock OpenRouter API requests deterministically
+    await page.route('https://openrouter.ai/api/v1/chat/completions', async (route) => {
+      const request = route.request();
+      const postData = JSON.parse(request.postData() || '{}');
+
+      // 1. Streaming Roleplay Chat
+      if (postData.stream) {
+        const sseBody = [
+          'data: {"choices":[{"delta":{"content":"Hey, sorry I didn\'t "}}]}\n\n',
+          'data: {"choices":[{"delta":{"content":"get back to you right away. Work was totally overwhelming yesterday."}}]}\n\n',
+          'data: [DONE]\n\n'
+        ].join('');
+
+        await route.fulfill({
+          status: 200,
+          contentType: 'text/event-stream',
+          body: sseBody
+        });
+        return;
+      }
+
+      // 2. Turn Supervisor or Session Report Analysis
+      const isSessionReport = postData.messages?.some((m: any) =>
+        typeof m.content === 'string' && m.content.includes('SESSION EVALUATION PROMPT')
+      );
+
+      if (isSessionReport) {
+        const mockSummaryReport = {
+          analysis: {
+            distortions: ['Mind Reading'],
+            isAdaptive: true,
+            evidence: 'User clearly asked for context before jumping to catastrophic conclusions.'
+          },
+          rating: {
+            score: 4,
+            reason: 'Demonstrated measured emotional self-regulation and clear communication.'
+          },
+          suggestions: {
+            alternativeThought: 'A delayed message is not proof of abandonment or malice.',
+            behavioralStep: 'Practice pausing for 2 minutes before assuming negative intentions.'
+          }
+        };
+
+        await route.fulfill({
+          status: 200,
+          contentType: 'application/json',
+          body: JSON.stringify({
+            choices: [{ message: { content: JSON.stringify(mockSummaryReport) } }]
+          })
+        });
+        return;
+      }
+
+      // Turn supervisor analysis
+      const mockTurnInsight = {
+        analysis: {
+          distortions: [],
+          isAdaptive: true,
+          evidence: 'Checked in calmly without accusation.'
+        },
+        rating: {
+          score: 5,
+          reason: 'Balanced and open inquiry.'
+        },
+        suggestions: {
+          alternativeThought: 'Waiting for factual data is adaptive.',
+          behavioralStep: 'Continue listening to the friend\'s explanation.'
+        }
+      };
+
+      await route.fulfill({
+        status: 200,
+        contentType: 'application/json',
+        body: JSON.stringify({
+          choices: [{ message: { content: JSON.stringify(mockTurnInsight) } }]
+        })
+      });
+    });
+  });
+
+  test('01 - Launch Text Chat, Stream Response, Live Insights, and Export Report', async ({ page }, testInfo) => {
+    await page.goto('/');
+    await page.waitForLoadState('networkidle');
+
+    // Click 'Chat' on the first scenario (The Silent Friend)
+    const chatBtn = page.getByRole('button', { name: 'Chat' }).first();
+    await chatBtn.click();
+
+    // Verify initializing transition screen
+    await expect(page.getByText('Initializing Session')).toBeVisible();
+
+    // Wait for Chat Session view
+    await expect(page.getByText('The Silent Friend')).toBeVisible({ timeout: 5000 });
+    await expect(page.getByText('Complete Interaction')).toBeVisible();
+
+    const shotDir = path.join(process.cwd(), 'docs/screenshots', testInfo.project.name);
+    fs.mkdirSync(shotDir, { recursive: true });
+    await page.screenshot({ path: path.join(shotDir, '10-chat-session-initial.png'), fullPage: true });
+
+    // Send a message
+    const chatInput = page.getByPlaceholder('Type your response in character...');
+    await chatInput.fill('Hey Sam, no worries at all! Just wanted to check if you were doing okay.');
+    await page.keyboard.press('Enter');
+
+    // Verify bot streamed message appears
+    await expect(
+      page.getByText('Work was totally overwhelming yesterday')
+    ).toBeVisible({ timeout: 5000 });
+
+    // Verify Live Insight Panel updates
+    await expect(page.getByText('Live Clinical Insight')).toBeVisible();
+    await expect(page.getByText('Waiting for factual data is adaptive')).toBeVisible();
+
+    await page.screenshot({ path: path.join(shotDir, '11-chat-interaction-streamed.png'), fullPage: true });
+
+    // Complete the interaction
+    await page.getByRole('button', { name: 'Complete Interaction' }).click();
+
+    // Verify Session Summary Report renders
+    await expect(page.getByRole('heading', { name: 'Session Summary Report' })).toBeVisible({ timeout: 6000 });
+    await expect(page.getByText('Adaptive Growth Observed')).toBeVisible();
+    await expect(page.getByText('Master Reframe')).toBeVisible();
+    await expect(page.getByText('Waiting for factual data is adaptive')).toBeVisible();
+
+    // Verify Export actions are present
+    await expect(page.getByTitle('Download Markdown Report')).toBeVisible();
+    await expect(page.getByTitle('Download JSON Report')).toBeVisible();
+
+    await page.screenshot({ path: path.join(shotDir, '12-session-report-summary.png'), fullPage: true });
+
+    // Close Report and return to home
+    await page.getByRole('button', { name: 'Close Report & Return' }).click();
+    await expect(page.getByRole('heading', { name: 'Training Scenarios' })).toBeVisible();
+  });
+});
diff --git a/tests/e2e/04-voice-roleplay-session.spec.ts b/tests/e2e/04-voice-roleplay-session.spec.ts
new file mode 100644
index 0000000..485b6e5
--- /dev/null
+++ b/tests/e2e/04-voice-roleplay-session.spec.ts
@@ -0,0 +1,103 @@
+import { test, expect } from '@playwright/test';
+import fs from 'fs';
+import path from 'path';
+
+test.describe('Voice Roleplay Simulation & Visualizer Suite', () => {
+  test.beforeEach(async ({ page }) => {
+    // Stub getUserMedia and AudioContext before loading page
+    await page.addInitScript(() => {
+      window.localStorage.clear();
+      window.localStorage.setItem('cognitive-clarity-settings', JSON.stringify({
+        voiceName: 'Kore',
+        vocalStyle: 'Calm',
+        genderPreference: 'Female',
+        openRouterApiKey: 'sk-or-v1-playwright-test-key',
+        roleplayModel: 'google/gemini-3.8-flash',
+        supervisorModel: 'google/gemini-3.8-flash'
+      }));
+
+      // Mock MediaDevices with real native MediaStream from AudioContext
+      if (navigator.mediaDevices) {
+        navigator.mediaDevices.getUserMedia = async () => {
+          try {
+            const AudioCtx = window.AudioContext || (window as any).webkitAudioContext;
+            const ctx = new AudioCtx();
+            const dest = ctx.createMediaStreamDestination();
+            return dest.stream;
+          } catch (e) {
+            return new MediaStream();
+          }
+        };
+        navigator.mediaDevices.enumerateDevices = async () => [
+          {
+            deviceId: 'default',
+            kind: 'audioinput',
+            label: 'Studio Microphone Pro',
+            groupId: 'group-1',
+            toJSON: () => {}
+          } as MediaDeviceInfo
+        ];
+      }
+    });
+
+    // Mock OpenRouter Speech synthesis API
+    await page.route('https://openrouter.ai/api/v1/audio/speech', async (route) => {
+      // Return empty audio buffer
+      const dummyPcm = new Uint8Array(2048);
+      await route.fulfill({
+        status: 200,
+        contentType: 'audio/mpeg',
+        body: Buffer.from(dummyPcm)
+      });
+    });
+  });
+
+  test('01 - Launch Voice Session, Visualizer Orb, and Transcript Drawer', async ({ page }, testInfo) => {
+    await page.goto('/');
+    await page.waitForLoadState('networkidle');
+
+    // Click 'Voice' on 'Critical Feedback'
+    const voiceBtn = page.getByRole('button', { name: 'Voice' }).first();
+    await voiceBtn.click();
+
+    // Verify initializing transition screen
+    await expect(page.getByText('Initializing Session')).toBeVisible();
+
+    // Wait for Voice Session cockpit
+    await expect(page.getByText(/Active Roleplay Session/)).toBeVisible({ timeout: 5000 });
+    await expect(page.getByText('Begin Voice Simulation')).toBeVisible();
+    await expect(page.getByText('Kore Vocal Persona Active')).toBeVisible();
+
+    const shotDir = path.join(process.cwd(), 'docs/screenshots', testInfo.project.name);
+    fs.mkdirSync(shotDir, { recursive: true });
+    await page.screenshot({ path: path.join(shotDir, '13-voice-cockpit-initial.png'), fullPage: true });
+
+    // Click 'Begin Voice Simulation'
+    await page.getByRole('button', { name: 'Begin Voice Simulation' }).click();
+
+    // Toggle Transcript Drawer
+    const transcriptToggleBtn = page.getByTitle('Toggle Transcript Drawer');
+    await transcriptToggleBtn.click();
+
+    // Verify Transcript Drawer opens
+    await expect(page.getByText('Live Conversation')).toBeVisible();
+
+    await page.screenshot({ path: path.join(shotDir, '14-voice-transcript-drawer.png'), fullPage: true });
+
+    // Close Transcript Drawer by toggling it back off
+    await transcriptToggleBtn.click();
+    await expect(page.getByText('Live Conversation')).not.toBeVisible();
+
+    // Toggle Mute
+    const muteBtn = page.getByTitle('Mute Microphone');
+    await muteBtn.click();
+    await expect(page.getByTitle('Unmute Microphone')).toBeVisible();
+
+    // Open Audio Hardware Settings
+    const audioSettingsBtn = page.getByTitle('Audio Settings');
+    await audioSettingsBtn.click();
+    await expect(page.getByText('Select Audio Input Device')).toBeVisible();
+
+    await page.screenshot({ path: path.join(shotDir, '15-voice-audio-settings-modal.png'), fullPage: true });
+  });
+});
diff --git a/types.ts b/types.ts
index 9669bae..1b7029b 100644
--- a/types.ts
+++ b/types.ts
@@ -16,6 +16,23 @@ export interface UserSettings {
   vocalStyle: string;
   genderPreference: 'Male' | 'Female' | 'Neutral';
   preferredAudioDeviceId?: string;
+  openRouterApiKey?: string;
+  geminiApiKey?: string;
+  voiceEngine?: 'gemini' | 'openrouter';
+  roleplayModel?: string;
+  supervisorModel?: string;
+}
+
+export interface SavedSession {
+  id: string;
+  scenarioId: string;
+  scenarioTitle: string;
+  category: Scenario['category'];
+  difficulty: Scenario['difficulty'];
+  timestamp: string;
+  mode: SessionMode;
+  messages: Message[];
+  finalReport?: AnalysisResult;
 }
 
 export interface Message {
diff --git a/vite.config.ts b/vite.config.ts
index afa4f02..5002f4b 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -1,6 +1,8 @@
+/// <reference types="vitest" />
 import path from 'path';
 import { defineConfig, loadEnv } from 'vite';
 import react from '@vitejs/plugin-react';
+import { svelte } from '@sveltejs/vite-plugin-svelte';
 import { VitePWA } from 'vite-plugin-pwa';
 import pkg from './package.json';
 
@@ -13,6 +15,7 @@ export default defineConfig(({ mode }) => {
     },
     plugins: [
       react(),
+      svelte(),
       VitePWA({
         strategies: 'injectManifest',
         srcDir: '.',
@@ -51,15 +54,34 @@ export default defineConfig(({ mode }) => {
       })
     ],
     define: {
-      'process.env.API_KEY': JSON.stringify(env.VITE_GEMINI_API_KEY),
-      'process.env.GEMINI_API_KEY': JSON.stringify(env.VITE_GEMINI_API_KEY),
+      'process.env.OPENROUTER_API_KEY': JSON.stringify(env.VITE_OPENROUTER_API_KEY || env.OPENROUTER_API_KEY || ''),
+      'process.env.GEMINI_API_KEY': JSON.stringify(env.VITE_GEMINI_API_KEY || env.GEMINI_API_KEY || ''),
+      'process.env.API_KEY': JSON.stringify(env.VITE_GEMINI_API_KEY || env.GEMINI_API_KEY || ''),
       '__APP_VERSION__': JSON.stringify(pkg.version),
       '__BUILD_TIMESTAMP__': JSON.stringify(new Date().toISOString()),
     },
+    build: {
+      chunkSizeWarningLimit: 600,
+      rollupOptions: {
+        output: {
+          manualChunks(id) {
+            if (id.includes('node_modules')) {
+              if (id.includes('@lucide/svelte') || id.includes('lucide-react')) return 'vendor-icons';
+              if (id.includes('svelte')) return 'vendor-svelte';
+              if (id.includes('workbox')) return 'vendor-workbox';
+            }
+          }
+        }
+      }
+    },
     resolve: {
       alias: {
         '@': path.resolve(__dirname, '.'),
       }
+    },
+    test: {
+      include: ['test/**/*.test.ts'],
+      environment: 'node'
     }
   };
 });