Add luxtts/zipvoice hidden imports to PyInstaller build

Fetches download counts across all GitHub releases (paginated) and
displays version, total downloads, and platform list below the CTA.

.bumpversion.cfg

@@ -1,5 +1,5 @@
 [bumpversion]
-current_version = 0.1.13
+current_version = 0.2.2
 commit = True
 tag = True
 tag_name = v{new_version}

.github/workflows/build-cuda.yml

@@ -1,73 +0,0 @@
-name: Build CUDA Backend
-
-on:
-  workflow_dispatch:
-  push:
-    tags:
-      - "v*"
-
-jobs:
-  build-cuda-windows:
-    runs-on: windows-latest
-    permissions:
-      contents: write
-
-    steps:
-      - uses: actions/checkout@v4
-
-      - name: Setup Python
-        uses: actions/setup-python@v5
-        with:
-          python-version: "3.12"
-          cache: "pip"
-
-      - name: Install Python dependencies
-        run: |
-          python -m pip install --upgrade pip
-          pip install pyinstaller
-          pip install -r backend/requirements.txt
-
-      - name: Install PyTorch with CUDA 12.1
-        run: |
-          pip install torch --index-url https://download.pytorch.org/whl/cu121 --force-reinstall --no-deps
-          pip install torchaudio --index-url https://download.pytorch.org/whl/cu121
-
-      - name: Verify CUDA support in torch
-        run: |
-          python -c "import torch; print(f'CUDA available in build: {torch.cuda.is_available()}'); print(f'CUDA version: {torch.version.cuda}')"
-
-      - name: Build CUDA server binary
-        shell: bash
-        working-directory: backend
-        run: python build_binary.py --cuda
-
-      - name: Split binary for GitHub Releases
-        shell: bash
-        run: |
-          python scripts/split_binary.py \
-            backend/dist/voicebox-server-cuda.exe \
-            --output release-assets/
-
-      - name: Upload split parts to GitHub Release
-        if: startsWith(github.ref, 'refs/tags/')
-        uses: softprops/action-gh-release@v1
-        with:
-          files: |
-            release-assets/voicebox-server-cuda.part*.exe
-            release-assets/voicebox-server-cuda.sha256
-            release-assets/voicebox-server-cuda.manifest
-          draft: true
-        env:
-          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
-
-      - name: Upload binary as workflow artifact (for testing)
-        uses: actions/upload-artifact@v4
-        with:
-          name: voicebox-server-cuda-windows
-          path: backend/dist/voicebox-server-cuda.exe
-          retention-days: 7
-
-  # Linux CUDA build can be added later with:
-  # build-cuda-linux:
-  #   runs-on: ubuntu-22.04
-  #   ...

.github/workflows/release.yml

@@ -22,10 +22,6 @@ jobs:
             args: "--target x86_64-apple-darwin"
             python-version: "3.12"
             backend: "pytorch"
-          - platform: "ubuntu-22.04"
-            args: ""
-            python-version: "3.12"
-            backend: "pytorch"
           - platform: "windows-latest"
             args: ""
             python-version: "3.12"
@@ -37,10 +33,10 @@ jobs:
       - uses: actions/checkout@v4
 
       - name: Install dependencies (ubuntu only)
-        if: matrix.platform == 'ubuntu-22.04'
+        if: contains(matrix.platform, 'ubuntu') || contains(matrix.platform, 'namespace')
         run: |
           sudo apt-get update
-          sudo apt-get install -y libwebkit2gtk-4.1-dev libappindicator3-dev librsvg2-dev patchelf llvm-dev
+          sudo apt-get install -y libwebkit2gtk-4.1-dev libappindicator3-dev librsvg2-dev patchelf llvm-dev libasound2-dev
 
       - name: Install LLVM (macOS)
         if: matrix.platform == 'macos-latest' || matrix.platform == 'macos-15-intel'
@@ -55,6 +51,11 @@ jobs:
           python-version: ${{ matrix.python-version }}
           cache: "pip"
 
+      - name: Install CPU-only PyTorch (Linux)
+        if: contains(matrix.platform, 'ubuntu') || contains(matrix.platform, 'namespace')
+        run: |
+          pip install torch torchaudio --index-url https://download.pytorch.org/whl/cpu
+
       - name: Install Python dependencies
         run: |
           python -m pip install --upgrade pip
@@ -66,12 +67,6 @@ jobs:
         run: |
           pip install -r backend/requirements-mlx.txt
 
-      # - name: Install PyTorch with CUDA (Windows only)
-      #   if: matrix.platform == 'windows-latest'
-      #   run: |
-      #     pip install torch --index-url https://download.pytorch.org/whl/cu121 --force-reinstall --no-deps
-      #     pip install torchvision torchaudio --index-url https://download.pytorch.org/whl/cu121
-
       - name: Build Python server (Linux/macOS)
         if: matrix.platform != 'windows-latest'
         run: |
@@ -151,10 +146,70 @@ jobs:
             - **macOS (Apple Silicon)**: Download the `aarch64.dmg` file - uses MLX for fast native inference
             - **macOS (Intel)**: Download the `x64.dmg` file - uses PyTorch
             - **Windows**: Download the `.msi` installer
-            - **Linux**: Download the `.AppImage` or `.deb` package
+            - **Linux**: Compile from source (see README)
 
             The app includes automatic updates - future updates will be installed automatically.
           releaseDraft: true
           prerelease: false
           args: ${{ matrix.args }}
           includeUpdaterJson: true
+
+  build-cuda-windows:
+    runs-on: windows-latest
+    permissions:
+      contents: write
+
+    steps:
+      - uses: actions/checkout@v4
+
+      - name: Setup Python
+        uses: actions/setup-python@v5
+        with:
+          python-version: "3.12"
+          cache: "pip"
+
+      - name: Install Python dependencies
+        run: |
+          python -m pip install --upgrade pip
+          pip install pyinstaller
+          pip install -r backend/requirements.txt
+
+      - name: Install PyTorch with CUDA 12.1
+        run: |
+          pip install torch --index-url https://download.pytorch.org/whl/cu121 --force-reinstall --no-deps
+          pip install torchaudio --index-url https://download.pytorch.org/whl/cu121
+
+      - name: Verify CUDA support in torch
+        run: |
+          python -c "import torch; print(f'CUDA available in build: {torch.cuda.is_available()}'); print(f'CUDA version: {torch.version.cuda}')"
+
+      - name: Build CUDA server binary
+        shell: bash
+        working-directory: backend
+        run: python build_binary.py --cuda
+
+      - name: Split binary for GitHub Releases
+        shell: bash
+        run: |
+          python scripts/split_binary.py \
+            backend/dist/voicebox-server-cuda.exe \
+            --output release-assets/
+
+      - name: Upload split parts to GitHub Release
+        if: startsWith(github.ref, 'refs/tags/')
+        uses: softprops/action-gh-release@v1
+        with:
+          files: |
+            release-assets/voicebox-server-cuda.part*.exe
+            release-assets/voicebox-server-cuda.sha256
+            release-assets/voicebox-server-cuda.manifest
+          draft: true
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+
+      - name: Upload binary as workflow artifact
+        uses: actions/upload-artifact@v4
+        with:
+          name: voicebox-server-cuda-windows
+          path: backend/dist/voicebox-server-cuda.exe
+          retention-days: 7

.gitignore

@@ -35,10 +35,7 @@ target/
 Thumbs.db
 
 # Data (user-generated)
-data/profiles/*
-data/generations/*
-data/projects/*
-data/voicebox.db
+data/
 !data/.gitkeep
 
 # Logs

CONTRIBUTING.md

@@ -33,101 +33,41 @@ Thank you for your interest in contributing to Voicebox! This document provides
 
 ### Development Setup
 
-**Using `just` (recommended):**
-
-Install [just](https://github.com/casey/just) (`brew install just` or `cargo install just`), then:
+Install [just](https://github.com/casey/just) (`brew install just`, `cargo install just`, or `winget install Casey.Just`), then:
 
 ```bash
+git clone https://github.com/YOUR_USERNAME/voicebox.git
+cd voicebox
+
 just setup   # creates venv, installs Python + JS deps
-just dev     # starts backend + desktop app in one terminal
+just dev     # starts backend + desktop app
 ```
 
+`just setup` handles everything automatically, including:
+- Creating a Python virtual environment
+- Installing Python dependencies (with CUDA PyTorch on Windows if an NVIDIA GPU is detected)
+- Installing MLX dependencies on Apple Silicon
+- Installing JavaScript dependencies
+
+`just dev` starts the backend and desktop app together. If a backend is already running (e.g. from `just dev-backend` in another terminal), it detects it and only starts the frontend.
+
 Other useful commands:
 
 ```bash
 just dev-web       # backend + web app (no Tauri/Rust build)
 just dev-backend   # backend only
+just dev-frontend  # Tauri app only (backend must be running)
 just kill          # stop all dev processes
 just clean-all     # nuke everything and start fresh
 just --list        # see all available commands
 ```
 
-**Using the Makefile:** Run `make setup` then `make dev`. See `make help` for all commands.
+> **Note:** In dev mode, the app connects to a manually-started Python server.
+> The bundled server binary is only used in production builds.
 
-**Manual setup (required for Windows):**
+#### Windows Notes
 
-1. **Fork and clone the repository**
-   ```bash
-   git clone https://github.com/YOUR_USERNAME/voicebox.git
-   cd voicebox
-   ```
-
-2. **Install JavaScript dependencies**
-   ```bash
-   bun install
-   ```
-   This installs dependencies for:
-   - `app/` - Shared React frontend
-   - `tauri/` - Tauri desktop wrapper
-   - `web/` - Web deployment wrapper
-
-3. **Set up Python backend**
-   ```bash
-   cd backend
-   
-   # Create virtual environment
-   python -m venv venv
-   
-   # Activate virtual environment
-   source venv/bin/activate  # On macOS/Linux
-   # or
-   venv\Scripts\activate  # On Windows
-   
-   # Install Python dependencies
-   pip install -r requirements.txt
-   
-   # Install MLX dependencies (Apple Silicon only - for faster inference)
-   # On Apple Silicon, this enables native Metal acceleration
-   if [[ $(uname -m) == "arm64" ]]; then
-     pip install -r requirements-mlx.txt
-   fi
-   
-   # Install Qwen3-TTS (required for voice synthesis)
-   pip install git+https://github.com/QwenLM/Qwen3-TTS.git
-   ```
-
-4. **Start development servers**
-
-   Development requires two terminals: one for the Python backend, one for the Tauri app.
-
-   **Terminal 1: Backend server** (start this first)
-   ```bash
-   cd backend
-   source venv/bin/activate  # Activate venv if not already active
-   bun run dev:server
-   # Or manually: uvicorn main:app --reload --port 17493
-   ```
-   Backend will be available at `http://localhost:17493`
-
-   **Terminal 2: Desktop app**
-   ```bash
-   bun run dev
-   ```
-   This will:
-   - Create a placeholder sidecar binary (for Tauri compilation)
-   - Start Vite dev server on port 5173
-   - Launch Tauri window pointing to localhost:5173
-   - Connect to the Python server you started in Terminal 1
-   - Enable hot reload
-
-   > **Note:** In dev mode, the app connects to your manually-started Python server.
-   > The bundled server binary is only used in production builds.
-
-   **Optional: Web app**
-   ```bash
-   bun run dev:web
-   ```
-   Web app will be available at `http://localhost:5174`
+The justfile works natively on Windows via PowerShell. No WSL or Git Bash required. On Windows with an NVIDIA GPU, `just setup` automatically installs CUDA-enabled PyTorch for GPU acceleration.
 
 ### Model Downloads
 
@@ -139,25 +79,30 @@ First-time usage will be slower due to model downloads, but subsequent runs will
 
 ### Building
 
-**Build everything (recommended):**
+**Build production app:**
+
 ```bash
-bun run build
+just build        # Build CPU server binary + Tauri installer
 ```
-This automatically:
-1. Builds the Python server binary (`./scripts/build-server.sh`)
-2. Builds the Tauri desktop app (`cd tauri && bun run tauri build`)
+
+On Windows, to build with CUDA support for local testing:
+
+```bash
+just build-local  # Build CPU + CUDA server binaries + Tauri installer
+```
+
+This builds the CPU sidecar (bundled with the app), the CUDA binary (placed in `%APPDATA%/com.voicebox.app/backends/` for runtime GPU switching), and the installable Tauri app.
 
 Creates platform-specific installers (`.dmg`, `.msi`, `.AppImage`) in `tauri/src-tauri/target/release/bundle/`.
 
-**Note:** The build process detects your platform and includes the appropriate backend (MLX for Apple Silicon, PyTorch for others).
+**Individual build targets:**
 
-**Build server binary only:**
 ```bash
-bun run build:server
-# or
-./scripts/build-server.sh
+just build-server       # CPU server binary only
+just build-server-cuda  # CUDA server binary only (Windows)
+just build-tauri        # Tauri desktop app only
+just build-web          # Web app only
 ```
-Creates platform-specific binary in `tauri/src-tauri/binaries/`
 
 **Building with local Qwen3-TTS development version:**
 
@@ -165,17 +110,10 @@ If you're actively developing or modifying the Qwen3-TTS library, set the `QWEN_
 
 ```bash
 export QWEN_TTS_PATH=~/path/to/your/Qwen3-TTS
-bun run build:server
+just build-server
 ```
 
-This makes PyInstaller use your local qwen-tts version instead of the pip-installed package. Useful when testing changes to the TTS library before they're published to PyPI or when using an editable install (`pip install -e`).
-
-**Build web app:**
-```bash
-cd web
-bun run build
-```
-Output in `web/dist/`
+This makes PyInstaller use your local qwen-tts version instead of the pip-installed package.
 
 ### Generate OpenAPI Client
 

README.md

@@ -85,7 +85,7 @@ Voicebox is available now for macOS and Windows.
 | Windows (MSI) | [Latest Windows MSI](https://github.com/jamiepine/voicebox/releases/latest) |
 | Windows (Setup) | [Latest Windows Setup](https://github.com/jamiepine/voicebox/releases/latest) |
 
-> **Linux builds coming soon** — Currently blocked by GitHub runner disk space limitations.
+> **Linux** — Pre-built binaries are not yet available. Linux users can compile from source, see [Development](#development) below.
 
 ---
 
@@ -240,13 +240,24 @@ just dev     # starts backend + desktop app
 
 Install [just](https://github.com/casey/just): `brew install just` or `cargo install just`. Run `just --list` to see all commands.
 
-Also available via Makefile: `make setup && make dev` (run `make help` for all commands).
+**Prerequisites:** [Bun](https://bun.sh), [Rust](https://rustup.rs), [Python 3.11+](https://python.org), [Tauri Prerequisites](https://v2.tauri.app/start/prerequisites/), and [Xcode](https://developer.apple.com/xcode/) on macOS.
 
-**Prerequisites:** [Bun](https://bun.sh), [Rust](https://rustup.rs), [Python 3.11+](https://python.org), [XCode on macOS](https://developer.apple.com/xcode/), [Tauri Prerequisites](https://v2.tauri.app/start/prerequisites/).
+### Platform Notes
 
-**Performance:** 
-- **Apple Silicon (M1/M2/M3)**: Uses MLX backend with native Metal acceleration for 4-5x faster inference
-- **Windows/Linux/Intel Mac**: Uses PyTorch backend (CUDA GPU recommended, CPU supported but slower)
+| Platform | GPU Backend | Notes |
+|----------|-------------|-------|
+| macOS (Apple Silicon) | MLX (Metal) | 4-5x faster inference via Neural Engine |
+| Windows (NVIDIA) | PyTorch (CUDA) | `just setup` auto-installs CUDA PyTorch |
+| Windows/Linux (no NVIDIA) | PyTorch (CPU) | Works but slower |
+
+### Building Locally
+
+```bash
+just build          # Build CPU server binary + Tauri app
+just build-local    # (Windows) Build CPU + CUDA server binaries + Tauri app
+```
+
+`just build-local` produces a production-ready installer with the CUDA binary pre-placed for GPU switching.
 
 ### Project Structure
 

app/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@voicebox/app",
-  "version": "0.1.13",
+  "version": "0.2.2",
   "private": true,
   "type": "module",
   "scripts": {

app/src/App.tsx

@@ -94,10 +94,11 @@ function App() {
 
     serverStartingRef.current = true;
     const isRemote = useServerStore.getState().mode === 'remote';
+    const customModelsDir = useServerStore.getState().customModelsDir;
     console.log(`Production mode: Starting bundled server... (remote: ${isRemote})`);
 
     platform.lifecycle
-      .startServer(isRemote)
+      .startServer(isRemote, customModelsDir)
       .then((serverUrl) => {
         console.log('Server is ready at:', serverUrl);
         // Update the server URL in the store with the dynamically assigned port

app/src/components/AudioPlayer/AudioPlayer.tsx

@@ -7,8 +7,8 @@ import { Slider } from '@/components/ui/slider';
 import { apiClient } from '@/lib/api/client';
 import { formatAudioDuration } from '@/lib/utils/audio';
 import { debug } from '@/lib/utils/debug';
-import { usePlayerStore } from '@/stores/playerStore';
 import { usePlatform } from '@/platform/PlatformContext';
+import { usePlayerStore } from '@/stores/playerStore';
 
 export function AudioPlayer() {
   const platform = usePlatform();
@@ -139,7 +139,11 @@ export function AudioPlayer() {
           barRadius: 2,
           height: 80,
           normalize: true,
-          backend: 'WebAudio',
+          // Use MediaElement backend (default). Unlike the WebAudio backend,
+          // MediaElement uses a standard <audio> element for playback which
+          // benefits from the browser/webview's built-in audio session recovery.
+          // This prevents audio loss when another app steals audio output or
+          // the system audio session is interrupted.
           interact: true, // Enable interaction (click to seek)
           mediaControls: false, // Don't show native controls
         });
@@ -157,8 +161,21 @@ export function AudioPlayer() {
       const wavesurfer = wavesurferRef.current;
       if (!wavesurfer) return;
 
-      // Update store when time changes
+      // Update store when time changes, stop if past duration
       wavesurfer.on('timeupdate', (time) => {
+        const dur = usePlayerStore.getState().duration;
+        if (dur > 0 && time >= dur) {
+          setCurrentTime(dur);
+          const loop = usePlayerStore.getState().isLooping;
+          if (loop) {
+            wavesurfer.seekTo(0);
+            wavesurfer.play();
+          } else {
+            wavesurfer.pause();
+            setIsPlaying(false);
+          }
+          return;
+        }
         setCurrentTime(time);
       });
 
@@ -176,15 +193,6 @@ export function AudioPlayer() {
         const currentVolume = usePlayerStore.getState().volume;
         wavesurfer.setVolume(currentVolume);
 
-        // Get the underlying audio element and ensure it's not muted
-        // (unless we're using native playback, which will be set later)
-        const mediaElement = wavesurfer.getMediaElement();
-        if (mediaElement && !isUsingNativePlaybackRef.current) {
-          mediaElement.volume = currentVolume;
-          mediaElement.muted = false;
-          debug.log('Audio element volume:', mediaElement.volume, 'muted:', mediaElement.muted);
-        }
-
         // Auto-play when ready - check if we should use native playback
         // Get current values from the store and queries at runtime (not captured closure values)
         const currentAudioUrl = usePlayerStore.getState().audioUrl;
@@ -251,21 +259,8 @@ export function AudioPlayer() {
             debug.log('Should use native playback:', shouldUseNative);
 
             if (!shouldUseNative) {
-              debug.log('No custom devices assigned, falling back to WaveSurfer');
-              // Reset native playback flag and unmute WaveSurfer
+              debug.log('No custom devices assigned, using standard playback');
               isUsingNativePlaybackRef.current = false;
-              const mediaElement = wavesurfer.getMediaElement();
-              if (mediaElement) {
-                const currentVolume = usePlayerStore.getState().volume;
-                mediaElement.volume = currentVolume;
-                mediaElement.muted = false;
-                debug.log(
-                  'WaveSurfer unmuted for normal playback - volume:',
-                  mediaElement.volume,
-                  'muted:',
-                  mediaElement.muted,
-                );
-              }
             } else {
               const deviceIds = assignedChannels.flatMap((ch: any) => ch.device_ids);
               debug.log('Device IDs to play to:', deviceIds);
@@ -286,19 +281,10 @@ export function AudioPlayer() {
                   // Mark that we're using native playback
                   isUsingNativePlaybackRef.current = true;
 
-                  // Mute WaveSurfer's audio element to prevent UI audio output
-                  // Keep WaveSurfer running for visualization
-                  const mediaElement = wavesurfer.getMediaElement();
-                  if (mediaElement) {
-                    mediaElement.volume = 0;
-                    mediaElement.muted = true;
-                    debug.log(
-                      'WaveSurfer muted for native playback - volume:',
-                      mediaElement.volume,
-                      'muted:',
-                      mediaElement.muted,
-                    );
-                  }
+                  // Mute WaveSurfer's audio output — native handles the actual sound
+                  // Keep WaveSurfer running for waveform visualization
+                  wavesurfer.setVolume(0);
+                  wavesurfer.setMuted(true);
 
                   // Start WaveSurfer playback for visualization (muted)
                   wavesurfer.play().catch((error) => {
@@ -321,38 +307,15 @@ export function AudioPlayer() {
               'Native playback failed during auto-play, falling back to WaveSurfer:',
               error,
             );
-            // Reset native playback flag and unmute WaveSurfer
             isUsingNativePlaybackRef.current = false;
-            const mediaElement = wavesurfer.getMediaElement();
-            if (mediaElement) {
-              const currentVolume = usePlayerStore.getState().volume;
-              mediaElement.volume = currentVolume;
-              mediaElement.muted = false;
-              debug.log(
-                'WaveSurfer unmuted after native playback failure - volume:',
-                mediaElement.volume,
-                'muted:',
-                mediaElement.muted,
-              );
-            }
             // Fall through to WaveSurfer playback
           }
-        } else {
-          debug.log('Not using native playback, using WaveSurfer');
-          // Reset native playback flag and unmute WaveSurfer
-          isUsingNativePlaybackRef.current = false;
-          const mediaElement = wavesurfer.getMediaElement();
-          if (mediaElement) {
-            const currentVolume = usePlayerStore.getState().volume;
-            mediaElement.volume = currentVolume;
-            mediaElement.muted = false;
-            debug.log(
-              'WaveSurfer unmuted for normal playback - volume:',
-              mediaElement.volume,
-              'muted:',
-              mediaElement.muted,
-            );
-          }
+        }
+
+        // Standard playback path — ensure WaveSurfer is unmuted
+        if (!isUsingNativePlaybackRef.current) {
+          wavesurfer.setMuted(false);
+          wavesurfer.setVolume(usePlayerStore.getState().volume);
         }
 
         // Only auto-play if shouldAutoPlay flag is set (user explicitly clicked to play)
@@ -360,7 +323,7 @@ export function AudioPlayer() {
         if (shouldAutoPlayNow) {
           // Clear the flag first
           usePlayerStore.getState().clearAutoPlayFlag();
-          
+
           // Use a small delay to ensure audio element is fully ready
           setTimeout(() => {
             wavesurfer.play().catch((error) => {
@@ -376,28 +339,6 @@ export function AudioPlayer() {
       // Handle play/pause
       wavesurfer.on('play', () => {
         setIsPlaying(true);
-        // Ensure audio element volume is set correctly
-        const mediaElement = wavesurfer.getMediaElement();
-        if (mediaElement) {
-          // Double-check: if using native playback, keep WaveSurfer muted
-          // Otherwise, ensure it's unmuted
-          if (isUsingNativePlaybackRef.current) {
-            mediaElement.volume = 0;
-            mediaElement.muted = true;
-            debug.log('Playing (native mode) - WaveSurfer muted for visualization only');
-          } else {
-            // Ensure WaveSurfer is unmuted for normal playback
-            const currentVolume = usePlayerStore.getState().volume;
-            mediaElement.volume = currentVolume;
-            mediaElement.muted = false;
-            debug.log(
-              'Playing (normal mode) - volume:',
-              mediaElement.volume,
-              'muted:',
-              mediaElement.muted,
-            );
-          }
-        }
       });
       wavesurfer.on('pause', () => setIsPlaying(false));
       wavesurfer.on('finish', () => {
@@ -479,11 +420,6 @@ export function AudioPlayer() {
       if (wavesurferRef.current) {
         debug.log('Destroying WaveSurfer instance');
         try {
-          const mediaElement = wavesurferRef.current.getMediaElement();
-          if (mediaElement) {
-            mediaElement.pause();
-            mediaElement.src = '';
-          }
           wavesurferRef.current.destroy();
         } catch (error) {
           debug.error('Error destroying WaveSurfer:', error);
@@ -524,13 +460,10 @@ export function AudioPlayer() {
     }
 
     // Reset native playback flag when loading new audio
-    // Also unmute WaveSurfer if it was muted
+    // Unmute WaveSurfer if it was muted for native playback
     if (isUsingNativePlaybackRef.current) {
-      const mediaElement = wavesurfer.getMediaElement();
-      if (mediaElement) {
-        mediaElement.muted = false;
-        mediaElement.volume = usePlayerStore.getState().volume;
-      }
+      wavesurfer.setMuted(false);
+      wavesurfer.setVolume(usePlayerStore.getState().volume);
     }
     isUsingNativePlaybackRef.current = false;
 
@@ -546,16 +479,7 @@ export function AudioPlayer() {
         wavesurfer.pause();
       }
 
-      // Stop the media element explicitly
-      const mediaElement = wavesurfer.getMediaElement();
-      if (mediaElement) {
-        debug.log('Stopping media element');
-        mediaElement.pause();
-        mediaElement.currentTime = 0;
-        mediaElement.src = '';
-      }
-
-      // Use empty() to completely destroy the waveform and media element
+      // Use empty() to completely destroy the waveform and reset media
       debug.log('Calling wavesurfer.empty() to destroy audio');
       wavesurfer.empty();
     } catch (error) {
@@ -610,20 +534,13 @@ export function AudioPlayer() {
   // Sync volume
   useEffect(() => {
     if (wavesurferRef.current) {
-      wavesurferRef.current.setVolume(volume);
-      // Also ensure the underlying audio element volume is set
-      const mediaElement = wavesurferRef.current.getMediaElement();
-      if (mediaElement) {
-        // If using native playback, keep WaveSurfer muted regardless of volume setting
-        if (isUsingNativePlaybackRef.current) {
-          mediaElement.volume = 0;
-          mediaElement.muted = true;
-          debug.log('Volume sync: Using native playback, keeping WaveSurfer muted');
-        } else {
-          mediaElement.volume = volume;
-          mediaElement.muted = volume === 0;
-          debug.log('Volume synced:', volume, 'muted:', mediaElement.muted);
-        }
+      // If using native playback, keep WaveSurfer muted regardless of volume setting
+      if (isUsingNativePlaybackRef.current) {
+        wavesurferRef.current.setVolume(0);
+        debug.log('Volume sync: Using native playback, keeping WaveSurfer muted');
+      } else {
+        wavesurferRef.current.setVolume(volume);
+        debug.log('Volume synced:', volume);
       }
     }
   }, [volume]);
@@ -665,7 +582,7 @@ export function AudioPlayer() {
   // Handle shouldAutoPlay flag - for story mode auto-advance
   const shouldAutoPlay = usePlayerStore((state) => state.shouldAutoPlay);
   const clearAutoPlayFlag = usePlayerStore((state) => state.clearAutoPlayFlag);
-  
+
   useEffect(() => {
     const wavesurfer = wavesurferRef.current;
     if (!wavesurfer || !shouldAutoPlay || duration === 0) {
@@ -744,11 +661,8 @@ export function AudioPlayer() {
           isUsingNativePlaybackRef.current = true;
 
           // Mute WaveSurfer and start it for visualization
-          const mediaElement = wavesurferRef.current.getMediaElement();
-          if (mediaElement) {
-            mediaElement.volume = 0;
-            mediaElement.muted = true;
-          }
+          wavesurferRef.current.setVolume(0);
+          wavesurferRef.current.setMuted(true);
 
           // Start WaveSurfer for visualization (muted)
           wavesurferRef.current.play().catch((error) => {
@@ -772,11 +686,8 @@ export function AudioPlayer() {
     } else {
       // Ensure WaveSurfer is not muted if not using native playback
       if (!isUsingNativePlaybackRef.current) {
-        const mediaElement = wavesurferRef.current.getMediaElement();
-        if (mediaElement) {
-          mediaElement.muted = false;
-          mediaElement.volume = volume;
-        }
+        wavesurferRef.current.setMuted(false);
+        wavesurferRef.current.setVolume(volume);
       }
 
       wavesurferRef.current.play().catch((error) => {
@@ -833,11 +744,7 @@ export function AudioPlayer() {
             className="shrink-0"
             title={duration === 0 && !isLoading ? 'Audio not loaded' : ''}
             aria-label={
-              duration === 0 && !isLoading
-                ? 'Audio not loaded'
-                : isPlaying
-                  ? 'Pause'
-                  : 'Play'
+              duration === 0 && !isLoading ? 'Audio not loaded' : isPlaying ? 'Pause' : 'Play'
             }
           >
             {isPlaying ? <Pause className="h-5 w-5" /> : <Play className="h-5 w-5" />}
@@ -872,7 +779,9 @@ export function AudioPlayer() {
 
           {/* Title */}
           {title && (
-            <div className="text-sm font-medium truncate max-w-[200px] shrink-0">{title}</div>
+            <div className="text-sm font-medium truncate max-w-[200px] shrink-0 hidden lg:block">
+              {title}
+            </div>
           )}
 
           {/* Loop Button */}
@@ -888,7 +797,11 @@ export function AudioPlayer() {
           </Button>
 
           {/* Volume Control */}
-          <div className="flex items-center gap-2 shrink-0 w-[120px]" role="group" aria-label="Volume">
+          <div
+            className="flex items-center gap-2 shrink-0 w-[120px]"
+            role="group"
+            aria-label="Volume"
+          >
             <Button
               variant="ghost"
               size="icon"

app/src/components/AudioTab/AudioTab.tsx

@@ -23,8 +23,8 @@ import {
 import { apiClient } from '@/lib/api/client';
 import { BOTTOM_SAFE_AREA_PADDING } from '@/lib/constants/ui';
 import { cn } from '@/lib/utils/cn';
-import { usePlayerStore } from '@/stores/playerStore';
 import { usePlatform } from '@/platform/PlatformContext';
+import { usePlayerStore } from '@/stores/playerStore';
 
 interface AudioDevice {
   id: string;
@@ -129,7 +129,7 @@ export function AudioTab() {
     if (await confirm('Delete this channel?')) {
       deleteChannel.mutate(channelId);
     }
-  }
+  };
 
   const allChannels = channels || [];
   const allDevices = devices || [];
@@ -168,7 +168,7 @@ export function AudioTab() {
               </Button>
             </div>
           ) : (
-            <div className="space-y-3 p-2">
+            <div className="space-y-3">
               {allChannels.map((channel) => {
                 const isSelected = selectedChannelId === channel.id;
                 return (
@@ -343,7 +343,9 @@ export function AudioTab() {
             <div className="flex flex-col items-center justify-center py-12 border-2 border-dashed border-muted rounded-md">
               <CheckCircle2 className="h-12 w-12 text-muted-foreground mb-4" />
               <p className="text-muted-foreground text-center">
-                {platform.metadata.isTauri ? 'No audio devices found' : 'Audio device selection requires Tauri'}
+                {platform.metadata.isTauri
+                  ? 'No audio devices found'
+                  : 'Audio device selection requires Tauri'}
               </p>
             </div>
           )}

app/src/components/Effects/EffectsChainEditor.tsx

@@ -0,0 +1,377 @@
+import {
+  closestCenter,
+  DndContext,
+  type DragEndEvent,
+  KeyboardSensor,
+  PointerSensor,
+  useSensor,
+  useSensors,
+} from '@dnd-kit/core';
+import {
+  arrayMove,
+  SortableContext,
+  sortableKeyboardCoordinates,
+  useSortable,
+  verticalListSortingStrategy,
+} from '@dnd-kit/sortable';
+import { CSS } from '@dnd-kit/utilities';
+import { useQuery } from '@tanstack/react-query';
+import { ChevronDown, ChevronRight, GripVertical, Plus, Power, Trash2 } from 'lucide-react';
+import { useCallback, useMemo, useRef, useState } from 'react';
+import { Button } from '@/components/ui/button';
+import { Label } from '@/components/ui/label';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select';
+import { Slider } from '@/components/ui/slider';
+import { apiClient } from '@/lib/api/client';
+import type { AvailableEffect, EffectConfig, EffectPresetResponse } from '@/lib/api/types';
+import { cn } from '@/lib/utils/cn';
+
+// Each effect in the chain gets a stable ID for dnd-kit
+interface EffectWithId extends EffectConfig {
+  _id: string;
+}
+
+let nextId = 0;
+function makeId() {
+  return `fx-${++nextId}`;
+}
+
+interface EffectsChainEditorProps {
+  value: EffectConfig[];
+  onChange: (chain: EffectConfig[]) => void;
+  compact?: boolean;
+  showPresets?: boolean;
+}
+
+export function EffectsChainEditor({
+  value,
+  onChange,
+  compact = false,
+  showPresets = true,
+}: EffectsChainEditorProps) {
+  const [expandedId, setExpandedId] = useState<string | null>(null);
+
+  // Maintain stable IDs for each effect across renders.
+  // We use a ref to map value items to IDs, rebuilding when length changes.
+  const idsRef = useRef<string[]>([]);
+  const items: EffectWithId[] = useMemo(() => {
+    // Grow ID array if effects were added
+    while (idsRef.current.length < value.length) {
+      idsRef.current.push(makeId());
+    }
+    // Shrink if effects were removed
+    if (idsRef.current.length > value.length) {
+      idsRef.current = idsRef.current.slice(0, value.length);
+    }
+    return value.map((e, i) => ({ ...e, _id: idsRef.current[i] }));
+  }, [value]);
+
+  const sensors = useSensors(
+    useSensor(PointerSensor, { activationConstraint: { distance: 5 } }),
+    useSensor(KeyboardSensor, { coordinateGetter: sortableKeyboardCoordinates }),
+  );
+
+  const { data: availableEffects } = useQuery({
+    queryKey: ['available-effects'],
+    queryFn: () => apiClient.getAvailableEffects(),
+    staleTime: Infinity,
+  });
+
+  const { data: presets } = useQuery({
+    queryKey: ['effect-presets'],
+    queryFn: () => apiClient.listEffectPresets(),
+    staleTime: 30_000,
+  });
+
+  const effectsMap = useMemo(() => {
+    const m = new Map<string, AvailableEffect>();
+    if (availableEffects) {
+      for (const e of availableEffects.effects) {
+        m.set(e.type, e);
+      }
+    }
+    return m;
+  }, [availableEffects]);
+
+  function addEffect(type: string) {
+    const def = effectsMap.get(type);
+    if (!def) return;
+    const params: Record<string, number> = {};
+    for (const [key, p] of Object.entries(def.params)) {
+      params[key] = p.default;
+    }
+    const newEffect: EffectConfig = { type, enabled: true, params };
+    const newId = makeId();
+    idsRef.current = [...idsRef.current, newId];
+    onChange([...value, newEffect]);
+    setExpandedId(newId);
+  }
+
+  const removeEffect = useCallback(
+    (index: number) => {
+      const removedId = idsRef.current[index];
+      idsRef.current = idsRef.current.filter((_, i) => i !== index);
+      onChange(value.filter((_, i) => i !== index));
+      if (expandedId === removedId) setExpandedId(null);
+    },
+    [value, onChange, expandedId],
+  );
+
+  const toggleEnabled = useCallback(
+    (index: number) => {
+      onChange(value.map((e, i) => (i === index ? { ...e, enabled: !e.enabled } : e)));
+    },
+    [value, onChange],
+  );
+
+  const updateParam = useCallback(
+    (index: number, paramName: string, paramValue: number) => {
+      onChange(
+        value.map((e, i) =>
+          i === index ? { ...e, params: { ...e.params, [paramName]: paramValue } } : e,
+        ),
+      );
+    },
+    [value, onChange],
+  );
+
+  function loadPreset(preset: EffectPresetResponse) {
+    idsRef.current = preset.effects_chain.map(() => makeId());
+    onChange(preset.effects_chain);
+    setExpandedId(null);
+  }
+
+  function clearAll() {
+    idsRef.current = [];
+    onChange([]);
+    setExpandedId(null);
+  }
+
+  function handleDragEnd(event: DragEndEvent) {
+    const { active, over } = event;
+    if (!over || active.id === over.id) return;
+
+    const oldIndex = idsRef.current.indexOf(active.id as string);
+    const newIndex = idsRef.current.indexOf(over.id as string);
+    if (oldIndex === -1 || newIndex === -1) return;
+
+    idsRef.current = arrayMove(idsRef.current, oldIndex, newIndex);
+    onChange(arrayMove([...value], oldIndex, newIndex));
+  }
+
+  return (
+    <div className={cn('space-y-2', compact && 'text-sm')}>
+      {/* Preset selector row */}
+      {showPresets && (
+        <div className="flex items-center gap-2">
+          <Select
+            onValueChange={(id) => {
+              const preset = presets?.find((p) => p.id === id);
+              if (preset) loadPreset(preset);
+            }}
+          >
+            <SelectTrigger className="h-8 flex-1 text-xs focus:ring-0 focus:ring-offset-0">
+              <SelectValue placeholder="Load preset..." />
+            </SelectTrigger>
+            <SelectContent>
+              {presets?.map((p) => (
+                <SelectItem key={p.id} value={p.id}>
+                  {p.name}
+                  {p.description && (
+                    <span className="ml-1 text-muted-foreground">- {p.description}</span>
+                  )}
+                </SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
+
+          {value.length > 0 && (
+            <Button
+              variant="ghost"
+              size="sm"
+              className="h-8 px-2 text-xs text-muted-foreground"
+              onClick={clearAll}
+            >
+              Clear
+            </Button>
+          )}
+        </div>
+      )}
+
+      {/* Sortable effects chain */}
+      <DndContext sensors={sensors} collisionDetection={closestCenter} onDragEnd={handleDragEnd}>
+        <SortableContext items={items.map((i) => i._id)} strategy={verticalListSortingStrategy}>
+          {items.map((effect, index) => (
+            <SortableEffectItem
+              key={effect._id}
+              id={effect._id}
+              effect={effect}
+              index={index}
+              effectDef={effectsMap.get(effect.type)}
+              isExpanded={expandedId === effect._id}
+              onToggleExpand={() => setExpandedId(expandedId === effect._id ? null : effect._id)}
+              onRemove={() => removeEffect(index)}
+              onToggleEnabled={() => toggleEnabled(index)}
+              onUpdateParam={(paramName, paramValue) => updateParam(index, paramName, paramValue)}
+            />
+          ))}
+        </SortableContext>
+      </DndContext>
+
+      {/* Add effect */}
+      {availableEffects && (
+        <Select onValueChange={addEffect}>
+          <SelectTrigger className="h-8 border-dashed text-xs text-muted-foreground focus:ring-0 focus:ring-offset-0">
+            <Plus className="mr-1 h-3.5 w-3.5" />
+            <SelectValue placeholder="Add effect..." />
+          </SelectTrigger>
+          <SelectContent>
+            {availableEffects.effects.map((e) => (
+              <SelectItem key={e.type} value={e.type}>
+                {e.label}
+              </SelectItem>
+            ))}
+          </SelectContent>
+        </Select>
+      )}
+    </div>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// Sortable effect item
+// ---------------------------------------------------------------------------
+
+interface SortableEffectItemProps {
+  id: string;
+  effect: EffectConfig;
+  index: number;
+  effectDef?: AvailableEffect;
+  isExpanded: boolean;
+  onToggleExpand: () => void;
+  onRemove: () => void;
+  onToggleEnabled: () => void;
+  onUpdateParam: (paramName: string, paramValue: number) => void;
+}
+
+function SortableEffectItem({
+  id,
+  effect,
+  effectDef,
+  isExpanded,
+  onToggleExpand,
+  onRemove,
+  onToggleEnabled,
+  onUpdateParam,
+}: SortableEffectItemProps) {
+  const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({
+    id,
+  });
+
+  const style = {
+    transform: CSS.Transform.toString(transform),
+    transition,
+    zIndex: isDragging ? 10 : undefined,
+  };
+
+  const label = effectDef?.label ?? effect.type;
+
+  return (
+    <div
+      ref={setNodeRef}
+      style={style}
+      className={cn(
+        'rounded-md border',
+        effect.enabled ? 'border-border bg-card' : 'border-border/50 bg-muted/30',
+        isDragging && 'opacity-80 shadow-lg',
+      )}
+    >
+      {/* Header */}
+      <div className="flex items-center gap-1 px-2 py-1.5">
+        <button
+          type="button"
+          className="p-0.5 text-muted-foreground hover:text-foreground"
+          onClick={onToggleExpand}
+        >
+          {isExpanded ? (
+            <ChevronDown className="h-3.5 w-3.5" />
+          ) : (
+            <ChevronRight className="h-3.5 w-3.5" />
+          )}
+        </button>
+
+        <button
+          type="button"
+          className="p-0.5 text-muted-foreground/50 hover:text-muted-foreground cursor-grab active:cursor-grabbing touch-none"
+          {...attributes}
+          {...listeners}
+        >
+          <GripVertical className="h-3.5 w-3.5" />
+        </button>
+
+        <span
+          className={cn('flex-1 text-xs font-medium', !effect.enabled && 'text-muted-foreground')}
+        >
+          {label}
+        </span>
+
+        <button
+          type="button"
+          className={cn(
+            'p-0.5 transition-colors',
+            effect.enabled ? 'text-primary' : 'text-muted-foreground hover:text-foreground',
+          )}
+          onClick={onToggleEnabled}
+          title={effect.enabled ? 'Disable' : 'Enable'}
+        >
+          <Power className="h-3.5 w-3.5" />
+        </button>
+
+        <button
+          type="button"
+          className="p-0.5 text-muted-foreground hover:text-destructive"
+          onClick={onRemove}
+          title="Remove"
+        >
+          <Trash2 className="h-3.5 w-3.5" />
+        </button>
+      </div>
+
+      {/* Params */}
+      {isExpanded && effectDef && (
+        <div className="space-y-3 border-t px-3 py-2.5">
+          {Object.entries(effectDef.params).map(([paramName, paramDef]) => {
+            const currentValue = effect.params[paramName] ?? paramDef.default;
+            return (
+              <div key={paramName} className="space-y-1">
+                <div className="flex items-center justify-between">
+                  <Label className="text-[11px] text-muted-foreground">
+                    {paramDef.description}
+                  </Label>
+                  <span className="text-[11px] font-mono tabular-nums text-foreground">
+                    {currentValue.toFixed(
+                      paramDef.step < 1 ? Math.max(1, -Math.floor(Math.log10(paramDef.step))) : 0,
+                    )}
+                  </span>
+                </div>
+                <Slider
+                  min={paramDef.min}
+                  max={paramDef.max}
+                  step={paramDef.step}
+                  value={[currentValue]}
+                  onValueChange={([v]) => onUpdateParam(paramName, v)}
+                />
+              </div>
+            );
+          })}
+        </div>
+      )}
+    </div>
+  );
+}

app/src/components/Effects/GenerationPicker.tsx

@@ -0,0 +1,103 @@
+import { ChevronDown, Search } from 'lucide-react';
+import { useMemo, useState } from 'react';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover';
+import type { HistoryResponse } from '@/lib/api/types';
+import { useHistory } from '@/lib/hooks/useHistory';
+import { cn } from '@/lib/utils/cn';
+
+interface GenerationPickerProps {
+  selectedId: string | null;
+  onSelect: (generation: HistoryResponse) => void;
+  className?: string;
+}
+
+export function GenerationPicker({ selectedId, onSelect, className }: GenerationPickerProps) {
+  const [open, setOpen] = useState(false);
+  const [searchQuery, setSearchQuery] = useState('');
+
+  const { data: historyData } = useHistory({ limit: 50 });
+
+  const completedGenerations = useMemo(() => {
+    if (!historyData?.items) return [];
+    return historyData.items.filter((gen) => gen.status === 'completed');
+  }, [historyData]);
+
+  const filtered = useMemo(() => {
+    if (!searchQuery) return completedGenerations;
+    const q = searchQuery.toLowerCase();
+    return completedGenerations.filter(
+      (gen) => gen.text.toLowerCase().includes(q) || gen.profile_name.toLowerCase().includes(q),
+    );
+  }, [completedGenerations, searchQuery]);
+
+  const selectedGeneration = completedGenerations.find((g) => g.id === selectedId);
+
+  return (
+    <Popover open={open} onOpenChange={setOpen}>
+      <PopoverTrigger asChild>
+        <Button
+          variant="outline"
+          size="sm"
+          className={cn('h-8 justify-between gap-2 text-xs font-normal', className)}
+        >
+          {selectedGeneration ? (
+            <span className="truncate">
+              <span className="font-medium">{selectedGeneration.profile_name}</span>
+              <span className="text-muted-foreground ml-1.5">
+                {selectedGeneration.text.length > 30
+                  ? `${selectedGeneration.text.substring(0, 30)}...`
+                  : selectedGeneration.text}
+              </span>
+            </span>
+          ) : (
+            <span className="text-muted-foreground">Select a generation...</span>
+          )}
+          <ChevronDown className="h-3.5 w-3.5 shrink-0 opacity-50" />
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent className="w-80 p-0" align="start">
+        <div className="p-2 border-b">
+          <div className="relative">
+            <Search className="absolute left-2 top-1/2 -translate-y-1/2 h-3.5 w-3.5 text-muted-foreground" />
+            <Input
+              placeholder="Search by voice or text..."
+              value={searchQuery}
+              onChange={(e) => setSearchQuery(e.target.value)}
+              className="h-8 pl-7 text-xs"
+            />
+          </div>
+        </div>
+        <div className="max-h-60 overflow-y-auto">
+          {filtered.length === 0 ? (
+            <div className="p-4 text-center text-xs text-muted-foreground">
+              No generations found
+            </div>
+          ) : (
+            filtered.map((gen) => (
+              <button
+                key={gen.id}
+                type="button"
+                className={cn(
+                  'w-full text-left px-3 py-2 hover:bg-muted/50 transition-colors border-b border-border/30 last:border-0',
+                  gen.id === selectedId && 'bg-accent/10',
+                )}
+                onClick={() => {
+                  onSelect(gen);
+                  setOpen(false);
+                  setSearchQuery('');
+                }}
+              >
+                <div className="font-medium text-sm">{gen.profile_name}</div>
+                <div className="text-xs text-muted-foreground truncate">
+                  {gen.text.length > 60 ? `${gen.text.substring(0, 60)}...` : gen.text}
+                </div>
+              </button>
+            ))
+          )}
+        </div>
+      </PopoverContent>
+    </Popover>
+  );
+}

app/src/components/EffectsTab/EffectsDetail.tsx

@@ -0,0 +1,422 @@
+import { useQuery, useQueryClient } from '@tanstack/react-query';
+import { Loader2, Play, Save, Trash2, Wand2 } from 'lucide-react';
+import { useEffect, useRef, useState } from 'react';
+
+import { EffectsChainEditor } from '@/components/Effects/EffectsChainEditor';
+import { GenerationPicker } from '@/components/Effects/GenerationPicker';
+import { Button } from '@/components/ui/button';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '@/components/ui/dialog';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import { Separator } from '@/components/ui/separator';
+import { Textarea } from '@/components/ui/textarea';
+import { useToast } from '@/components/ui/use-toast';
+import { apiClient } from '@/lib/api/client';
+import type { HistoryResponse } from '@/lib/api/types';
+import { useHistory } from '@/lib/hooks/useHistory';
+import { useEffectsStore } from '@/stores/effectsStore';
+import { usePlayerStore } from '@/stores/playerStore';
+
+export function EffectsDetail() {
+  const selectedPresetId = useEffectsStore((s) => s.selectedPresetId);
+  const isCreatingNew = useEffectsStore((s) => s.isCreatingNew);
+  const workingChain = useEffectsStore((s) => s.workingChain);
+  const setWorkingChain = useEffectsStore((s) => s.setWorkingChain);
+  const setSelectedPresetId = useEffectsStore((s) => s.setSelectedPresetId);
+  const setIsCreatingNew = useEffectsStore((s) => s.setIsCreatingNew);
+
+  const [name, setName] = useState('');
+  const [description, setDescription] = useState('');
+  const [saving, setSaving] = useState(false);
+  const [deleting, setDeleting] = useState(false);
+
+  // "Save as Custom" dialog state
+  const [saveAsDialogOpen, setSaveAsDialogOpen] = useState(false);
+  const [saveAsName, setSaveAsName] = useState('');
+  const [saveAsDescription, setSaveAsDescription] = useState('');
+
+  // Preview state
+  const [previewGenId, setPreviewGenId] = useState<string | null>(null);
+  const [previewLoading, setPreviewLoading] = useState(false);
+  const blobUrlRef = useRef<string | null>(null);
+  const setAudioWithAutoPlay = usePlayerStore((s) => s.setAudioWithAutoPlay);
+
+  const { toast } = useToast();
+  const queryClient = useQueryClient();
+
+  // Auto-select the most recent generation as preview source
+  const { data: historyData } = useHistory({ limit: 1 });
+  useEffect(() => {
+    if (!previewGenId && historyData?.items?.length) {
+      const first = historyData.items.find((g) => g.status === 'completed');
+      if (first) setPreviewGenId(first.id);
+    }
+  }, [historyData, previewGenId]);
+
+  const { data: preset } = useQuery({
+    queryKey: ['effect-preset', selectedPresetId],
+    queryFn: () =>
+      selectedPresetId
+        ? apiClient
+            .listEffectPresets()
+            .then((all) => all.find((p) => p.id === selectedPresetId) ?? null)
+        : null,
+    enabled: !!selectedPresetId,
+    staleTime: 30_000,
+  });
+
+  // Sync name/description when selecting a preset
+  useEffect(() => {
+    if (preset) {
+      setName(preset.name);
+      setDescription(preset.description ?? '');
+    } else if (isCreatingNew) {
+      setName('');
+      setDescription('');
+    }
+  }, [preset, isCreatingNew]);
+
+  // Cleanup blob URL on unmount
+  useEffect(() => {
+    return () => {
+      if (blobUrlRef.current) {
+        URL.revokeObjectURL(blobUrlRef.current);
+        blobUrlRef.current = null;
+      }
+    };
+  }, []);
+
+  const isEditing = !!selectedPresetId || isCreatingNew;
+  const isBuiltIn = preset?.is_builtin ?? false;
+
+  async function handlePreview() {
+    if (!previewGenId || workingChain.length === 0) return;
+
+    setPreviewLoading(true);
+    try {
+      const blob = await apiClient.previewEffects(previewGenId, workingChain);
+
+      // Revoke old blob URL
+      if (blobUrlRef.current) {
+        URL.revokeObjectURL(blobUrlRef.current);
+      }
+
+      const url = URL.createObjectURL(blob);
+      blobUrlRef.current = url;
+
+      // Play through the main audio player
+      setAudioWithAutoPlay(url, `preview-${Date.now()}`, null, 'Effects Preview');
+    } catch (error) {
+      toast({
+        title: 'Preview failed',
+        description: error instanceof Error ? error.message : 'Unknown error',
+        variant: 'destructive',
+      });
+    } finally {
+      setPreviewLoading(false);
+    }
+  }
+
+  function handleSelectGeneration(gen: HistoryResponse) {
+    setPreviewGenId(gen.id);
+  }
+
+  async function handleSaveNew() {
+    if (!name.trim()) {
+      toast({ title: 'Name required', variant: 'destructive' });
+      return;
+    }
+    setSaving(true);
+    try {
+      const created = await apiClient.createEffectPreset({
+        name: name.trim(),
+        description: description.trim() || undefined,
+        effects_chain: workingChain,
+      });
+      queryClient.invalidateQueries({ queryKey: ['effect-presets'] });
+      setIsCreatingNew(false);
+      setSelectedPresetId(created.id);
+      toast({ title: 'Preset saved', description: `"${created.name}" has been created.` });
+    } catch (error) {
+      toast({
+        title: 'Failed to save',
+        description: error instanceof Error ? error.message : 'Unknown error',
+        variant: 'destructive',
+      });
+    } finally {
+      setSaving(false);
+    }
+  }
+
+  async function handleSaveExisting() {
+    if (!selectedPresetId || !name.trim()) return;
+    setSaving(true);
+    try {
+      await apiClient.updateEffectPreset(selectedPresetId, {
+        name: name.trim(),
+        description: description.trim() || undefined,
+        effects_chain: workingChain,
+      });
+      queryClient.invalidateQueries({ queryKey: ['effect-presets'] });
+      queryClient.invalidateQueries({ queryKey: ['effect-preset', selectedPresetId] });
+      toast({ title: 'Preset updated' });
+    } catch (error) {
+      toast({
+        title: 'Failed to save',
+        description: error instanceof Error ? error.message : 'Unknown error',
+        variant: 'destructive',
+      });
+    } finally {
+      setSaving(false);
+    }
+  }
+
+  function handleSaveAsNew() {
+    // Open the dialog with a suggested name based on the current preset
+    setSaveAsName(`${name} (Copy)`);
+    setSaveAsDescription(description);
+    setSaveAsDialogOpen(true);
+  }
+
+  async function handleSaveAsConfirm() {
+    if (!saveAsName.trim()) {
+      toast({ title: 'Name required', variant: 'destructive' });
+      return;
+    }
+    setSaving(true);
+    try {
+      const created = await apiClient.createEffectPreset({
+        name: saveAsName.trim(),
+        description: saveAsDescription.trim() || undefined,
+        effects_chain: workingChain,
+      });
+      queryClient.invalidateQueries({ queryKey: ['effect-presets'] });
+      setSaveAsDialogOpen(false);
+      setSelectedPresetId(created.id);
+      toast({ title: 'Preset saved', description: `"${created.name}" has been created.` });
+    } catch (error) {
+      toast({
+        title: 'Failed to save',
+        description: error instanceof Error ? error.message : 'Unknown error',
+        variant: 'destructive',
+      });
+    } finally {
+      setSaving(false);
+    }
+  }
+
+  async function handleDelete() {
+    if (!selectedPresetId) return;
+    setDeleting(true);
+    try {
+      await apiClient.deleteEffectPreset(selectedPresetId);
+      queryClient.invalidateQueries({ queryKey: ['effect-presets'] });
+      setSelectedPresetId(null);
+      setWorkingChain([]);
+      toast({ title: 'Preset deleted' });
+    } catch (error) {
+      toast({
+        title: 'Failed to delete',
+        description: error instanceof Error ? error.message : 'Unknown error',
+        variant: 'destructive',
+      });
+    } finally {
+      setDeleting(false);
+    }
+  }
+
+  if (!isEditing) {
+    return (
+      <div className="flex-1 flex items-center justify-center text-muted-foreground">
+        <div className="text-center space-y-2">
+          <Wand2 className="h-10 w-10 mx-auto opacity-30" />
+          <p className="text-sm">Select a preset or create a new one</p>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="flex flex-col h-full min-h-0">
+      {/* Header */}
+      <div className="flex items-center justify-between mb-4">
+        <h2 className="text-lg font-semibold">
+          {isCreatingNew ? 'New Preset' : isBuiltIn ? preset?.name : 'Edit Preset'}
+        </h2>
+        <div className="flex items-center gap-2">
+          {!isBuiltIn && !isCreatingNew && (
+            <>
+              <Button
+                variant="ghost"
+                size="sm"
+                className="h-8 text-destructive hover:text-destructive gap-1.5"
+                onClick={handleDelete}
+                disabled={deleting}
+              >
+                <Trash2 className="h-3.5 w-3.5" />
+                {deleting ? 'Deleting...' : 'Delete'}
+              </Button>
+              <Button
+                size="sm"
+                className="h-8 gap-1.5"
+                onClick={handleSaveExisting}
+                disabled={saving || workingChain.length === 0}
+              >
+                <Save className="h-3.5 w-3.5" />
+                {saving ? 'Saving...' : 'Save'}
+              </Button>
+            </>
+          )}
+          {isCreatingNew && (
+            <Button
+              size="sm"
+              className="h-8 gap-1.5"
+              onClick={handleSaveNew}
+              disabled={saving || workingChain.length === 0}
+            >
+              <Save className="h-3.5 w-3.5" />
+              {saving ? 'Saving...' : 'Save Preset'}
+            </Button>
+          )}
+          {isBuiltIn && (
+            <Button
+              size="sm"
+              variant="outline"
+              className="h-8 gap-1.5"
+              onClick={handleSaveAsNew}
+              disabled={saving}
+            >
+              <Save className="h-3.5 w-3.5" />
+              {saving ? 'Saving...' : 'Save as Custom'}
+            </Button>
+          )}
+        </div>
+      </div>
+
+      {/* Scrollable content */}
+      <div className="flex-1 min-h-0 overflow-y-auto space-y-5 pr-1">
+        {/* Name & description */}
+        {(isCreatingNew || !isBuiltIn) && (
+          <div className="space-y-3">
+            <div className="space-y-1.5">
+              <Label className="text-xs">Name</Label>
+              <Input
+                value={name}
+                onChange={(e) => setName(e.target.value)}
+                placeholder="My preset..."
+                className="h-9"
+              />
+            </div>
+            <div className="space-y-1.5">
+              <Label className="text-xs">Description</Label>
+              <Textarea
+                value={description}
+                onChange={(e) => setDescription(e.target.value)}
+                placeholder="Describe what this preset does..."
+                className="min-h-[60px] resize-none"
+              />
+            </div>
+          </div>
+        )}
+
+        {/* Built-in description (read-only) */}
+        {isBuiltIn && preset?.description && (
+          <p className="text-sm text-muted-foreground">{preset.description}</p>
+        )}
+
+        {/* Effects chain editor */}
+        <EffectsChainEditor value={workingChain} onChange={setWorkingChain} showPresets={false} />
+
+        <Separator />
+
+        {/* Preview section */}
+        <div className="space-y-3">
+          <Label className="text-xs">Preview</Label>
+          <div className="flex items-center gap-2">
+            <GenerationPicker
+              selectedId={previewGenId}
+              onSelect={handleSelectGeneration}
+              className="flex-1"
+            />
+            <Button
+              variant="outline"
+              size="sm"
+              className="h-8 gap-1.5 shrink-0"
+              onClick={handlePreview}
+              disabled={!previewGenId || workingChain.length === 0 || previewLoading}
+            >
+              {previewLoading ? (
+                <>
+                  <Loader2 className="h-3.5 w-3.5 animate-spin" />
+                  Processing...
+                </>
+              ) : (
+                <>
+                  <Play className="h-3.5 w-3.5" />
+                  Preview
+                </>
+              )}
+            </Button>
+          </div>
+          <p className="text-[11px] text-muted-foreground">
+            Preview applies effects to the clean version without saving.
+          </p>
+        </div>
+      </div>
+
+      {/* Save as Custom dialog */}
+      <Dialog open={saveAsDialogOpen} onOpenChange={setSaveAsDialogOpen}>
+        <DialogContent className="sm:max-w-md">
+          <DialogHeader>
+            <DialogTitle>Save as Custom Preset</DialogTitle>
+            <DialogDescription>
+              Create a new custom preset based on the current effects chain.
+            </DialogDescription>
+          </DialogHeader>
+          <div className="space-y-3 py-2">
+            <div className="space-y-1.5">
+              <Label className="text-xs">Name</Label>
+              <Input
+                value={saveAsName}
+                onChange={(e) => setSaveAsName(e.target.value)}
+                placeholder="My preset..."
+                className="h-9"
+                autoFocus
+                onKeyDown={(e) => {
+                  if (e.key === 'Enter' && saveAsName.trim()) {
+                    handleSaveAsConfirm();
+                  }
+                }}
+              />
+            </div>
+            <div className="space-y-1.5">
+              <Label className="text-xs">Description</Label>
+              <Textarea
+                value={saveAsDescription}
+                onChange={(e) => setSaveAsDescription(e.target.value)}
+                placeholder="Describe what this preset does..."
+                className="min-h-[60px] resize-none"
+              />
+            </div>
+          </div>
+          <DialogFooter>
+            <Button variant="outline" onClick={() => setSaveAsDialogOpen(false)} disabled={saving}>
+              Cancel
+            </Button>
+            <Button onClick={handleSaveAsConfirm} disabled={saving || !saveAsName.trim()}>
+              <Save className="h-3.5 w-3.5 mr-1.5" />
+              {saving ? 'Saving...' : 'Save'}
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+    </div>
+  );
+}

app/src/components/EffectsTab/EffectsList.tsx

@@ -0,0 +1,165 @@
+import { useQuery } from '@tanstack/react-query';
+import { Loader2, Plus, Sparkles, Wand2 } from 'lucide-react';
+import { Button } from '@/components/ui/button';
+import { apiClient } from '@/lib/api/client';
+import type { EffectPresetResponse } from '@/lib/api/types';
+import { cn } from '@/lib/utils/cn';
+import { useEffectsStore } from '@/stores/effectsStore';
+
+export function EffectsList() {
+  const selectedPresetId = useEffectsStore((s) => s.selectedPresetId);
+  const setSelectedPresetId = useEffectsStore((s) => s.setSelectedPresetId);
+  const setWorkingChain = useEffectsStore((s) => s.setWorkingChain);
+  const setIsCreatingNew = useEffectsStore((s) => s.setIsCreatingNew);
+  const isCreatingNew = useEffectsStore((s) => s.isCreatingNew);
+
+  const { data: presets, isLoading } = useQuery({
+    queryKey: ['effect-presets'],
+    queryFn: () => apiClient.listEffectPresets(),
+    staleTime: 30_000,
+  });
+
+  const builtIn = presets?.filter((p) => p.is_builtin) ?? [];
+  const userPresets = presets?.filter((p) => !p.is_builtin) ?? [];
+
+  function handleSelect(preset: EffectPresetResponse) {
+    setSelectedPresetId(preset.id);
+    setWorkingChain(preset.effects_chain);
+  }
+
+  function handleCreateNew() {
+    setIsCreatingNew(true);
+    setWorkingChain([]);
+  }
+
+  if (isLoading) {
+    return (
+      <div className="flex items-center justify-center h-full">
+        <Loader2 className="h-6 w-6 animate-spin text-muted-foreground" />
+      </div>
+    );
+  }
+
+  return (
+    <div className="flex flex-col h-full min-h-0">
+      {/* Header */}
+      <div className="flex items-center justify-between mb-4">
+        <h2 className="text-lg font-semibold">Effects</h2>
+        <Button variant="outline" size="sm" className="h-8 gap-1.5" onClick={handleCreateNew}>
+          <Plus className="h-3.5 w-3.5" />
+          New Preset
+        </Button>
+      </div>
+
+      {/* Scrollable list */}
+      <div className="flex-1 min-h-0 overflow-y-auto space-y-4">
+        {/* Built-in presets */}
+        {builtIn.length > 0 && (
+          <div>
+            <div className="text-[11px] text-muted-foreground font-medium uppercase tracking-wider mb-2 px-1">
+              Built-in
+            </div>
+            <div className="space-y-1.5">
+              {builtIn.map((preset) => (
+                <PresetCard
+                  key={preset.id}
+                  preset={preset}
+                  isSelected={selectedPresetId === preset.id && !isCreatingNew}
+                  onSelect={() => handleSelect(preset)}
+                />
+              ))}
+            </div>
+          </div>
+        )}
+
+        {/* User presets */}
+        {userPresets.length > 0 && (
+          <div>
+            <div className="text-[11px] text-muted-foreground font-medium uppercase tracking-wider mb-2 px-1">
+              Custom
+            </div>
+            <div className="space-y-1.5">
+              {userPresets.map((preset) => (
+                <PresetCard
+                  key={preset.id}
+                  preset={preset}
+                  isSelected={selectedPresetId === preset.id && !isCreatingNew}
+                  onSelect={() => handleSelect(preset)}
+                />
+              ))}
+            </div>
+          </div>
+        )}
+
+        {/* New preset placeholder */}
+        {isCreatingNew && (
+          <div>
+            <div className="text-[11px] text-muted-foreground font-medium uppercase tracking-wider mb-2 px-1">
+              New
+            </div>
+            <div className="rounded-xl border-2 border-accent/40 bg-accent/5 p-3">
+              <div className="flex items-center gap-2">
+                <Sparkles className="h-4 w-4 text-accent" />
+                <span className="text-sm font-medium">Unsaved Preset</span>
+              </div>
+              <p className="text-xs text-muted-foreground mt-1">
+                Configure effects in the panel on the right.
+              </p>
+            </div>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}
+
+function PresetCard({
+  preset,
+  isSelected,
+  onSelect,
+}: {
+  preset: EffectPresetResponse;
+  isSelected: boolean;
+  onSelect: () => void;
+}) {
+  const effectCount = preset.effects_chain.length;
+
+  return (
+    <button
+      type="button"
+      className={cn(
+        'w-full text-left rounded-xl border p-3 h-[88px] transition-all duration-150',
+        isSelected
+          ? 'border-accent/50 bg-accent/10'
+          : 'border-border bg-card hover:bg-muted/50 hover:border-border',
+      )}
+      onClick={onSelect}
+    >
+      <div className="flex items-center gap-2">
+        <Wand2
+          className={cn('h-4 w-4 shrink-0', isSelected ? 'text-accent' : 'text-muted-foreground')}
+        />
+        <span className="text-sm font-medium truncate">{preset.name}</span>
+        {preset.is_builtin && (
+          <span className="text-[10px] bg-muted text-muted-foreground px-1.5 py-0.5 rounded-full shrink-0">
+            built-in
+          </span>
+        )}
+      </div>
+      <p className="text-xs text-muted-foreground mt-1 line-clamp-1 pl-6">
+        {preset.description || 'No description'}
+      </p>
+      <div className="flex items-center gap-2 mt-1.5 pl-6">
+        <span className="text-[10px] text-muted-foreground">
+          {effectCount} effect{effectCount !== 1 ? 's' : ''}
+        </span>
+        <span className="text-[10px] text-muted-foreground/50">
+          {preset.effects_chain
+            .filter((e) => e.enabled)
+            .map((e) => e.type)
+            .join(' → ')}
+        </span>
+      </div>
+    </button>
+  );
+}

app/src/components/EffectsTab/EffectsTab.tsx

@@ -0,0 +1,20 @@
+import {EffectsDetail} from "./EffectsDetail";
+import {EffectsList} from "./EffectsList";
+
+export function EffectsTab() {
+	return (
+		<div className="flex flex-col h-full min-h-0 overflow-hidden">
+			<div className="flex-1 min-h-0 flex gap-6 overflow-hidden">
+				{/* Left - Presets list */}
+				<div className="w-full max-w-[360px] shrink-0 flex flex-col min-h-0">
+					<EffectsList />
+				</div>
+
+				{/* Right - Detail / editor */}
+				<div className="flex-1 min-h-0 flex flex-col">
+					<EffectsDetail />
+				</div>
+			</div>
+		</div>
+	);
+}

app/src/components/Generation/FloatingGenerateBox.tsx

@@ -2,6 +2,7 @@ import { useMatchRoute } from '@tanstack/react-router';
 import { AnimatePresence, motion } from 'framer-motion';
 import { Loader2, SlidersHorizontal, Sparkles } from 'lucide-react';
 import { useEffect, useRef, useState } from 'react';
+import { EffectsChainEditor } from '@/components/Effects/EffectsChainEditor';
 import { Button } from '@/components/ui/button';
 import { Form, FormControl, FormField, FormItem, FormMessage } from '@/components/ui/form';
 import {
@@ -12,14 +13,16 @@ import {
   SelectValue,
 } from '@/components/ui/select';
 import { Textarea } from '@/components/ui/textarea';
-import { useToast } from '@/components/ui/use-toast';
+import type { EffectConfig } from '@/lib/api/types';
 import { getLanguageOptionsForEngine, type LanguageCode } from '@/lib/constants/languages';
 import { useGenerationForm } from '@/lib/hooks/useGenerationForm';
 import { useProfile, useProfiles } from '@/lib/hooks/useProfiles';
-import { useAddStoryItem, useStory } from '@/lib/hooks/useStories';
+import { useStory } from '@/lib/hooks/useStories';
 import { cn } from '@/lib/utils/cn';
+import { useGenerationStore } from '@/stores/generationStore';
 import { useStoryStore } from '@/stores/storyStore';
 import { useUIStore } from '@/stores/uiStore';
+import { ParalinguisticInput } from './ParalinguisticInput';
 
 interface FloatingGenerateBoxProps {
   isPlayerOpen?: boolean;
@@ -36,6 +39,7 @@ export function FloatingGenerateBox({
   const { data: profiles } = useProfiles();
   const [isExpanded, setIsExpanded] = useState(false);
   const [isInstructMode, setIsInstructMode] = useState(false);
+  const [effectsChain, setEffectsChain] = useState<EffectConfig[]>([]);
   const containerRef = useRef<HTMLDivElement>(null);
   const textareaRef = useRef<HTMLTextAreaElement | null>(null);
   const matchRoute = useMatchRoute();
@@ -43,8 +47,7 @@ export function FloatingGenerateBox({
   const selectedStoryId = useStoryStore((state) => state.selectedStoryId);
   const trackEditorHeight = useStoryStore((state) => state.trackEditorHeight);
   const { data: currentStory } = useStory(selectedStoryId);
-  const addStoryItem = useAddStoryItem();
-  const { toast } = useToast();
+  const addPendingStoryAdd = useGenerationStore((s) => s.addPendingStoryAdd);
 
   // Calculate if track editor is visible (on stories route with items)
   const hasTrackEditor = isStoriesRoute && currentStory && currentStory.items.length > 0;
@@ -52,27 +55,12 @@ export function FloatingGenerateBox({
   const { form, handleSubmit, isPending } = useGenerationForm({
     onSuccess: async (generationId) => {
       setIsExpanded(false);
-      // If on stories route and a story is selected, add generation to story
+      // Defer the story add until TTS completes — useGenerationProgress handles it
       if (isStoriesRoute && selectedStoryId && generationId) {
-        try {
-          await addStoryItem.mutateAsync({
-            storyId: selectedStoryId,
-            data: { generation_id: generationId },
-          });
-          toast({
-            title: 'Added to story',
-            description: `Generation added to "${currentStory?.name || 'story'}"`,
-          });
-        } catch (error) {
-          toast({
-            title: 'Failed to add to story',
-            description:
-              error instanceof Error ? error.message : 'Could not add generation to story',
-            variant: 'destructive',
-          });
-        }
+        addPendingStoryAdd(generationId, selectedStoryId);
       }
     },
+    getEffectsChain: () => (effectsChain.length > 0 ? effectsChain : undefined),
   });
 
   // Click away handler to collapse the box
@@ -181,7 +169,7 @@ export function FloatingGenerateBox({
         isStoriesRoute
           ? // Position aligned with story list: after sidebar + padding, width 360px
             'left-[calc(5rem+2rem)] w-[360px]'
-          : 'left-[calc(5rem+2rem)] w-[calc((100%-5rem-4rem)/2-1rem)]',
+          : 'left-[calc(5rem+2rem)] right-8 lg:right-auto lg:w-[calc((100%-5rem-4rem)/2-1rem)]',
       )}
       style={{
         // On stories route: offset by track editor height when visible
@@ -219,34 +207,57 @@ export function FloatingGenerateBox({
                             transition={{ duration: 0.15, ease: 'easeOut' }}
                             style={{ overflow: 'hidden' }}
                           >
-                            <Textarea
-                              {...field}
-                              ref={(node: HTMLTextAreaElement | null) => {
-                                // Store ref for auto-resize (only for active field)
-                                if (!isInstructMode) {
-                                  textareaRef.current = node;
+                            {form.watch('engine') === 'chatterbox_turbo' ? (
+                              <ParalinguisticInput
+                                value={field.value}
+                                onChange={field.onChange}
+                                placeholder={
+                                  isStoriesRoute && currentStory
+                                    ? `Generate speech for "${currentStory.name}"... (type / for effects)`
+                                    : selectedProfile
+                                      ? `Type / for effects like [laugh], [sigh]...`
+                                      : 'Select a voice profile above...'
                                 }
-                                // Forward ref to react-hook-form
-                                if (typeof field.ref === 'function') {
-                                  field.ref(node);
+                                className="px-3 py-2 resize-none bg-transparent border-none focus-visible:ring-0 focus-visible:ring-offset-0 focus:outline-none focus:ring-0 outline-none ring-0 rounded-2xl text-sm w-full"
+                                style={{
+                                  minHeight: isExpanded ? '100px' : '32px',
+                                  maxHeight: '300px',
+                                  overflowY: 'auto',
+                                }}
+                                disabled={!selectedProfileId}
+                                onClick={() => setIsExpanded(true)}
+                                onFocus={() => setIsExpanded(true)}
+                              />
+                            ) : (
+                              <Textarea
+                                {...field}
+                                ref={(node: HTMLTextAreaElement | null) => {
+                                  // Store ref for auto-resize (only for active field)
+                                  if (!isInstructMode) {
+                                    textareaRef.current = node;
+                                  }
+                                  // Forward ref to react-hook-form
+                                  if (typeof field.ref === 'function') {
+                                    field.ref(node);
+                                  }
+                                }}
+                                placeholder={
+                                  isStoriesRoute && currentStory
+                                    ? `Generate speech for "${currentStory.name}"...`
+                                    : selectedProfile
+                                      ? `Generate speech using ${selectedProfile.name}...`
+                                      : 'Select a voice profile above...'
                                 }
-                              }}
-                              placeholder={
-                                isStoriesRoute && currentStory
-                                  ? `Generate speech for "${currentStory.name}"...`
-                                  : selectedProfile
-                                    ? `Generate speech using ${selectedProfile.name}...`
-                                    : 'Select a voice profile above...'
-                              }
-                              className="resize-none bg-transparent border-none focus-visible:ring-0 focus-visible:ring-offset-0 focus:outline-none focus:ring-0 outline-none ring-0 rounded-2xl text-sm placeholder:text-muted-foreground/60 w-full"
-                              style={{
-                                minHeight: isExpanded ? '100px' : '32px',
-                                maxHeight: '300px',
-                              }}
-                              disabled={!selectedProfileId}
-                              onClick={() => setIsExpanded(true)}
-                              onFocus={() => setIsExpanded(true)}
-                            />
+                                className="resize-none bg-transparent border-none focus-visible:ring-0 focus-visible:ring-offset-0 focus:outline-none focus:ring-0 outline-none ring-0 rounded-2xl text-sm placeholder:text-muted-foreground/60 w-full"
+                                style={{
+                                  minHeight: isExpanded ? '100px' : '32px',
+                                  maxHeight: '300px',
+                                }}
+                                disabled={!selectedProfileId}
+                                onClick={() => setIsExpanded(true)}
+                                onFocus={() => setIsExpanded(true)}
+                              />
+                            )}
                           </motion.div>
                         </FormControl>
                         <FormMessage className="text-xs" />
@@ -348,7 +359,9 @@ export function FloatingGenerateBox({
                             'h-10 w-10 rounded-full transition-all duration-200',
                             isInstructMode
                               ? 'bg-accent text-accent-foreground border border-accent hover:bg-accent/90'
-                              : 'bg-card border border-border hover:bg-background/50',
+                              : effectsChain.length > 0
+                                ? 'bg-accent/50 text-accent-foreground border border-accent/50 hover:bg-accent/70'
+                                : 'bg-card border border-border hover:bg-background/50',
                           )}
                           aria-label={
                             isInstructMode ? 'Fine tune instructions, on' : 'Fine tune instructions'
@@ -357,7 +370,7 @@ export function FloatingGenerateBox({
                           <SlidersHorizontal className="h-4 w-4" />
                         </Button>
                         <span className="pointer-events-none absolute bottom-full left-1/2 -translate-x-1/2 mb-2 whitespace-nowrap rounded-md bg-popover px-3 py-1.5 text-xs text-popover-foreground border border-border opacity-0 transition-opacity group-hover:opacity-100 z-[9999]">
-                          Fine tune instructions
+                          Fine tune instructions & effects
                         </span>
                       </div>
                     </motion.div>
@@ -366,6 +379,23 @@ export function FloatingGenerateBox({
               </div>
             </div>
 
+            {/* Effects chain editor panel - shown alongside instruct */}
+            <AnimatePresence>
+              {isExpanded && isInstructMode && (
+                <motion.div
+                  initial={{ height: 0, opacity: 0 }}
+                  animate={{ height: 'auto', opacity: 1 }}
+                  exit={{ height: 0, opacity: 0 }}
+                  transition={{ duration: 0.2 }}
+                  className="overflow-hidden mt-2"
+                >
+                  <div className="border-t border-border/50 pt-2 pb-1">
+                    <EffectsChainEditor value={effectsChain} onChange={setEffectsChain} compact />
+                  </div>
+                </motion.div>
+              )}
+            </AnimatePresence>
+
             <AnimatePresence>
               <motion.div
                 initial={{ height: 0, opacity: 0 }}

app/src/components/Generation/GenerationForm.tsx

@@ -23,6 +23,7 @@ import { getLanguageOptionsForEngine } from '@/lib/constants/languages';
 import { useGenerationForm } from '@/lib/hooks/useGenerationForm';
 import { useProfile } from '@/lib/hooks/useProfiles';
 import { useUIStore } from '@/stores/uiStore';
+import { ParalinguisticInput } from './ParalinguisticInput';
 
 export function GenerationForm() {
   const selectedProfileId = useUIStore((state) => state.selectedProfileId);
@@ -64,13 +65,26 @@ export function GenerationForm() {
                 <FormItem>
                   <FormLabel>Text to Speak</FormLabel>
                   <FormControl>
-                    <Textarea
-                      placeholder="Enter the text you want to generate..."
-                      className="min-h-[150px]"
-                      {...field}
-                    />
+                    {form.watch('engine') === 'chatterbox_turbo' ? (
+                      <ParalinguisticInput
+                        value={field.value}
+                        onChange={field.onChange}
+                        placeholder="Enter text... type / for effects like [laugh], [sigh]"
+                        className="min-h-[150px] rounded-md border border-input bg-background px-3 py-2"
+                      />
+                    ) : (
+                      <Textarea
+                        placeholder="Enter the text you want to generate..."
+                        className="min-h-[150px]"
+                        {...field}
+                      />
+                    )}
                   </FormControl>
-                  <FormDescription>Max 5000 characters</FormDescription>
+                  <FormDescription>
+                    {form.watch('engine') === 'chatterbox_turbo'
+                      ? 'Max 5000 characters. Type / to insert sound effects.'
+                      : 'Max 5000 characters'}
+                  </FormDescription>
                   <FormMessage />
                 </FormItem>
               )}

app/src/components/Generation/ParalinguisticInput.tsx

@@ -0,0 +1,422 @@
+/**
+ * ParalinguisticInput — a contentEditable rich text input that renders
+ * Chatterbox Turbo paralinguistic tags (e.g. [laugh]) as inline badges.
+ *
+ * Trigger: typing "/" opens an autocomplete dropdown.
+ * Paste:   pasting text with [tag] patterns auto-converts to badges.
+ * Output:  serializes badges back to plain [tag] text for the API.
+ */
+
+import { AnimatePresence, motion } from 'framer-motion';
+import { forwardRef, useCallback, useEffect, useImperativeHandle, useRef, useState } from 'react';
+import { createPortal } from 'react-dom';
+import { cn } from '@/lib/utils/cn';
+
+// ── Tag definitions ─────────────────────────────────────────────────
+const PARALINGUISTIC_TAGS = [
+  { tag: '[laugh]', label: 'laugh', emoji: '\u{1F602}' },
+  { tag: '[chuckle]', label: 'chuckle', emoji: '\u{1F60F}' },
+  { tag: '[gasp]', label: 'gasp', emoji: '\u{1F62E}' },
+  { tag: '[cough]', label: 'cough', emoji: '\u{1F637}' },
+  { tag: '[sigh]', label: 'sigh', emoji: '\u{1F614}' },
+  { tag: '[groan]', label: 'groan', emoji: '\u{1F629}' },
+  { tag: '[sniff]', label: 'sniff', emoji: '\u{1F443}' },
+  { tag: '[shush]', label: 'shush', emoji: '\u{1F92B}' },
+  { tag: '[clear throat]', label: 'clear throat', emoji: '\u{1F64A}' },
+] as const;
+
+const TAG_REGEX = /\[(laugh|chuckle|gasp|cough|sigh|groan|sniff|shush|clear throat)\]/gi;
+
+// Data attribute used to identify badge spans in the DOM
+const BADGE_ATTR = 'data-ptag';
+
+// ── Helpers ─────────────────────────────────────────────────────────
+
+/** Build an inline badge <span> for a tag. */
+function makeBadgeHTML(tag: string): string {
+  const entry = PARALINGUISTIC_TAGS.find((t) => t.tag.toLowerCase() === tag.toLowerCase());
+  const label = entry?.label ?? tag.replace(/[[\]]/g, '');
+  const emoji = entry?.emoji ?? '';
+  // Non-editable inline badge. Zero-width spaces around it let the
+  // caret sit on either side so the user can type before/after.
+  return `\u200B<span ${BADGE_ATTR}="${tag}" contenteditable="false" class="ptag-badge">${emoji ? `${emoji}\u00A0` : ''}${label}</span>\u200B`;
+}
+
+/** Convert plain text with [tag] patterns into HTML with badge spans. */
+function textToHTML(text: string): string {
+  // Escape HTML entities first
+  const escaped = text.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
+  // Replace tag patterns with badge HTML
+  return escaped.replace(TAG_REGEX, (match) => makeBadgeHTML(match));
+}
+
+/** Serialize the contentEditable innerHTML back to plain text with [tag] syntax. */
+function htmlToText(container: HTMLElement): string {
+  let result = '';
+  for (const node of container.childNodes) {
+    if (node.nodeType === Node.TEXT_NODE) {
+      // Strip zero-width spaces we added around badges
+      result += (node.textContent ?? '').replace(/\u200B/g, '');
+    } else if (node.nodeType === Node.ELEMENT_NODE) {
+      const el = node as HTMLElement;
+      if (el.hasAttribute(BADGE_ATTR)) {
+        result += el.getAttribute(BADGE_ATTR) ?? '';
+      } else if (el.tagName === 'BR') {
+        result += '\n';
+      } else {
+        // Recurse for nested elements (e.g. spans from paste)
+        result += htmlToText(el);
+      }
+    }
+  }
+  return result;
+}
+
+/** Get the text content from the current caret position back to the last
+ *  whitespace or start of container, to detect the "/" trigger. */
+function getWordBeforeCaret(_container: HTMLElement): { word: string; range: Range | null } {
+  const sel = window.getSelection();
+  if (!sel || sel.rangeCount === 0) return { word: '', range: null };
+  const range = sel.getRangeAt(0).cloneRange();
+  range.collapse(true);
+
+  // Walk backwards from caret through the text node
+  const textNode = range.startContainer;
+  if (textNode.nodeType !== Node.TEXT_NODE) return { word: '', range: null };
+  const text = textNode.textContent ?? '';
+  const offset = range.startOffset;
+
+  let start = offset;
+  while (
+    start > 0 &&
+    text[start - 1] !== ' ' &&
+    text[start - 1] !== '\n' &&
+    text[start - 1] !== '\u00A0'
+  ) {
+    start--;
+  }
+
+  const word = text.slice(start, offset);
+  const wordRange = document.createRange();
+  wordRange.setStart(textNode, start);
+  wordRange.setEnd(textNode, offset);
+
+  return { word, range: wordRange };
+}
+
+// ── Component ───────────────────────────────────────────────────────
+
+export interface ParalinguisticInputProps {
+  value?: string;
+  onChange?: (value: string) => void;
+  placeholder?: string;
+  disabled?: boolean;
+  className?: string;
+  style?: React.CSSProperties;
+  onClick?: () => void;
+  onFocus?: () => void;
+}
+
+export interface ParalinguisticInputRef {
+  focus: () => void;
+  element: HTMLDivElement | null;
+}
+
+export const ParalinguisticInput = forwardRef<ParalinguisticInputRef, ParalinguisticInputProps>(
+  function ParalinguisticInput(
+    { value, onChange, placeholder, disabled, className, style, onClick, onFocus },
+    ref,
+  ) {
+    const editorRef = useRef<HTMLDivElement>(null);
+    const [showMenu, setShowMenu] = useState(false);
+    const [menuFilter, setMenuFilter] = useState('');
+    const [menuIndex, setMenuIndex] = useState(0);
+    const [menuPosition, setMenuPosition] = useState<{ bottom: number; left: number }>({
+      bottom: 0,
+      left: 0,
+    });
+    const triggerRangeRef = useRef<Range | null>(null);
+    const lastSerializedRef = useRef<string>('');
+    const isComposingRef = useRef(false);
+
+    useImperativeHandle(ref, () => ({
+      focus: () => editorRef.current?.focus(),
+      element: editorRef.current,
+    }));
+
+    // Filtered tag list for the autocomplete menu
+    const filteredTags = PARALINGUISTIC_TAGS.filter((t) =>
+      t.label.toLowerCase().includes(menuFilter.toLowerCase()),
+    );
+
+    // ── Sync external value → editor ──────────────────────────────
+    useEffect(() => {
+      const el = editorRef.current;
+      if (!el) return;
+      // Only update DOM if the external value differs from what we last emitted
+      if (value !== undefined && value !== lastSerializedRef.current) {
+        lastSerializedRef.current = value;
+        el.innerHTML = value ? textToHTML(value) : '';
+      }
+    }, [value]);
+
+    // ── Emit plain-text value on input ────────────────────────────
+    const emitChange = useCallback(() => {
+      const el = editorRef.current;
+      if (!el || !onChange) return;
+      const text = htmlToText(el);
+      lastSerializedRef.current = text;
+      onChange(text);
+    }, [onChange]);
+
+    // ── Insert a tag badge at the caret ───────────────────────────
+    const insertTag = useCallback(
+      (tag: string) => {
+        const el = editorRef.current;
+        if (!el) return;
+
+        // Delete the /filter text
+        const wordRange = triggerRangeRef.current;
+        if (wordRange) {
+          wordRange.deleteContents();
+        }
+
+        // Insert badge HTML
+        const temp = document.createElement('span');
+        temp.innerHTML = makeBadgeHTML(tag);
+        const frag = document.createDocumentFragment();
+        let lastNode: Node | null = null;
+        while (temp.firstChild) {
+          lastNode = frag.appendChild(temp.firstChild);
+        }
+
+        const sel = window.getSelection();
+        if (sel && sel.rangeCount > 0) {
+          const range = sel.getRangeAt(0);
+          range.deleteContents();
+          range.insertNode(frag);
+
+          // Move caret after the badge
+          if (lastNode) {
+            const newRange = document.createRange();
+            newRange.setStartAfter(lastNode);
+            newRange.collapse(true);
+            sel.removeAllRanges();
+            sel.addRange(newRange);
+          }
+        }
+
+        setShowMenu(false);
+        setMenuFilter('');
+        emitChange();
+        el.focus();
+      },
+      [emitChange],
+    );
+
+    // ── Handle keydown for autocomplete navigation ────────────────
+    const handleKeyDown = useCallback(
+      (e: React.KeyboardEvent) => {
+        if (showMenu) {
+          if (filteredTags.length === 0) {
+            if (e.key === 'Escape') {
+              e.preventDefault();
+              setShowMenu(false);
+            }
+            return;
+          }
+          if (e.key === 'ArrowDown') {
+            e.preventDefault();
+            setMenuIndex((i) => (i + 1) % filteredTags.length);
+          } else if (e.key === 'ArrowUp') {
+            e.preventDefault();
+            setMenuIndex((i) => (i - 1 + filteredTags.length) % filteredTags.length);
+          } else if (e.key === 'Enter' || e.key === 'Tab') {
+            e.preventDefault();
+            if (filteredTags[menuIndex]) {
+              insertTag(filteredTags[menuIndex].tag);
+            }
+          } else if (e.key === 'Escape') {
+            e.preventDefault();
+            setShowMenu(false);
+          }
+        } else {
+          // Prevent Enter from creating <div> blocks in contentEditable
+          if (e.key === 'Enter' && !e.shiftKey) {
+            // Let the form handle submit
+          }
+        }
+      },
+      [showMenu, filteredTags, menuIndex, insertTag],
+    );
+
+    // ── Handle input (check for / trigger) ────────────────────────
+    const handleInput = useCallback(() => {
+      if (isComposingRef.current) return;
+      const el = editorRef.current;
+      if (!el) return;
+
+      const { word, range } = getWordBeforeCaret(el);
+
+      if (word.startsWith('/')) {
+        const filter = word.slice(1); // strip the /
+        setMenuFilter(filter);
+        setMenuIndex(0);
+        triggerRangeRef.current = range;
+
+        // Position the menu above the caret using viewport coords (portalled)
+        const sel = window.getSelection();
+        if (sel && sel.rangeCount > 0) {
+          const rect = sel.getRangeAt(0).getBoundingClientRect();
+          setMenuPosition({
+            bottom: window.innerHeight - rect.top + 4,
+            left: rect.left,
+          });
+        }
+
+        setShowMenu(true);
+      } else {
+        setShowMenu(false);
+      }
+
+      emitChange();
+    }, [emitChange]);
+
+    // ── Handle paste — convert [tag] patterns to badges ───────────
+    const handlePaste = useCallback(
+      (e: React.ClipboardEvent) => {
+        e.preventDefault();
+        const text = e.clipboardData.getData('text/plain');
+        if (!text) return;
+
+        const el = editorRef.current;
+        if (!el) return;
+
+        const html = textToHTML(text);
+
+        // Insert at caret
+        const sel = window.getSelection();
+        if (sel && sel.rangeCount > 0) {
+          const range = sel.getRangeAt(0);
+          range.deleteContents();
+          const temp = document.createElement('div');
+          temp.innerHTML = html;
+          const frag = document.createDocumentFragment();
+          let lastNode: Node | null = null;
+          while (temp.firstChild) {
+            lastNode = frag.appendChild(temp.firstChild);
+          }
+          range.insertNode(frag);
+          if (lastNode) {
+            const newRange = document.createRange();
+            newRange.setStartAfter(lastNode);
+            newRange.collapse(true);
+            sel.removeAllRanges();
+            sel.addRange(newRange);
+          }
+        }
+
+        emitChange();
+      },
+      [emitChange],
+    );
+
+    // ── Show placeholder ──────────────────────────────────────────
+    const isEmpty = !value || value.trim() === '';
+
+    return (
+      <div className="relative">
+        {/* Placeholder */}
+        {isEmpty && placeholder && (
+          <div
+            className="pointer-events-none absolute inset-0 text-sm text-muted-foreground/60 px-3 py-2 select-none"
+            aria-hidden
+          >
+            {placeholder}
+          </div>
+        )}
+
+        {/* Editable area */}
+        <div
+          ref={editorRef}
+          contentEditable={!disabled}
+          suppressContentEditableWarning
+          role={disabled ? undefined : 'textbox'}
+          aria-multiline={disabled ? undefined : true}
+          aria-placeholder={placeholder}
+          aria-disabled={disabled}
+          tabIndex={disabled ? -1 : 0}
+          className={cn(
+            'min-h-[32px] text-sm whitespace-pre-wrap break-words outline-none',
+            '[&_.ptag-badge]:inline-flex [&_.ptag-badge]:items-center [&_.ptag-badge]:rounded-full',
+            '[&_.ptag-badge]:bg-accent/20 [&_.ptag-badge]:text-accent [&_.ptag-badge]:border [&_.ptag-badge]:border-accent/30',
+            '[&_.ptag-badge]:px-2 [&_.ptag-badge]:py-0 [&_.ptag-badge]:text-xs [&_.ptag-badge]:font-medium',
+            '[&_.ptag-badge]:mx-0.5 [&_.ptag-badge]:select-none [&_.ptag-badge]:cursor-default',
+            '[&_.ptag-badge]:align-baseline',
+            disabled && 'opacity-50 cursor-not-allowed',
+            className,
+          )}
+          style={style}
+          onInput={!disabled ? handleInput : undefined}
+          onKeyDown={!disabled ? handleKeyDown : undefined}
+          onPaste={!disabled ? handlePaste : undefined}
+          onClick={!disabled ? onClick : undefined}
+          onFocus={!disabled ? onFocus : undefined}
+          onBlur={() => {
+            setShowMenu(false);
+            triggerRangeRef.current = null;
+          }}
+          onCompositionStart={() => {
+            isComposingRef.current = true;
+          }}
+          onCompositionEnd={() => {
+            isComposingRef.current = false;
+            handleInput();
+          }}
+        />
+
+        {/* Autocomplete dropdown — portalled to body, positioned above the caret */}
+        {showMenu &&
+          filteredTags.length > 0 &&
+          createPortal(
+            <AnimatePresence>
+              <motion.div
+                initial={{ opacity: 0, y: 4 }}
+                animate={{ opacity: 1, y: 0 }}
+                exit={{ opacity: 0, y: 4 }}
+                transition={{ duration: 0.12 }}
+                className="fixed z-[9999] min-w-[200px] max-h-[280px] overflow-y-auto rounded-lg border border-border bg-popover shadow-lg"
+                style={{
+                  bottom: menuPosition.bottom,
+                  left: menuPosition.left,
+                }}
+              >
+                {filteredTags.map((t, i) => (
+                  <button
+                    key={t.tag}
+                    type="button"
+                    className={cn(
+                      'flex items-center gap-2 w-full px-3 py-1.5 text-sm text-left transition-colors',
+                      i === menuIndex
+                        ? 'bg-accent/20 text-accent-foreground'
+                        : 'text-popover-foreground hover:bg-muted/50',
+                    )}
+                    onMouseDown={(e) => {
+                      e.preventDefault(); // Keep focus in editor
+                      insertTag(t.tag);
+                    }}
+                    onMouseEnter={() => setMenuIndex(i)}
+                  >
+                    <span className="text-base leading-none">{t.emoji}</span>
+                    <span>{t.label}</span>
+                    <span className="ml-auto text-xs text-muted-foreground font-mono">{t.tag}</span>
+                  </button>
+                ))}
+              </motion.div>
+            </AnimatePresence>,
+            document.body,
+          )}
+      </div>
+    );
+  },
+);

app/src/components/History/HistoryTable.tsx

@@ -1,13 +1,22 @@
+import { useQueryClient } from '@tanstack/react-query';
+import { AnimatePresence, motion } from 'framer-motion';
 import {
+  AlignCenter,
+  AudioLines,
   AudioWaveform,
   Download,
   FileArchive,
   Loader2,
   MoreHorizontal,
   Play,
+  RotateCcw,
+  Star,
   Trash2,
+  Wand2,
 } from 'lucide-react';
 import { useEffect, useRef, useState } from 'react';
+import Loader from 'react-loaders';
+import { EffectsChainEditor } from '@/components/Effects/EffectsChainEditor';
 import { Button } from '@/components/ui/button';
 import {
   Dialog,
@@ -23,10 +32,17 @@ import {
   DropdownMenuItem,
   DropdownMenuTrigger,
 } from '@/components/ui/dropdown-menu';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select';
 import { Textarea } from '@/components/ui/textarea';
 import { useToast } from '@/components/ui/use-toast';
 import { apiClient } from '@/lib/api/client';
-import type { HistoryResponse } from '@/lib/api/types';
+import type { EffectConfig, GenerationVersionResponse, HistoryResponse } from '@/lib/api/types';
 import { BOTTOM_SAFE_AREA_PADDING } from '@/lib/constants/ui';
 import {
   useDeleteGeneration,
@@ -36,7 +52,8 @@ import {
   useImportGeneration,
 } from '@/lib/hooks/useHistory';
 import { cn } from '@/lib/utils/cn';
-import { formatDate, formatDuration } from '@/lib/utils/format';
+import { formatDate, formatDuration, formatEngineName } from '@/lib/utils/format';
+import { useGenerationStore } from '@/stores/generationStore';
 import { usePlayerStore } from '@/stores/playerStore';
 
 // OLD TABLE-BASED COMPONENT - REMOVED (can be found in git history)
@@ -54,9 +71,21 @@ export function HistoryTable() {
   const [importDialogOpen, setImportDialogOpen] = useState(false);
   const [selectedFile, setSelectedFile] = useState<File | null>(null);
   const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);
-  const [generationToDelete, setGenerationToDelete] = useState<{ id: string; name: string } | null>(null);
+  const [generationToDelete, setGenerationToDelete] = useState<{ id: string; name: string } | null>(
+    null,
+  );
+  const [effectsDialogOpen, setEffectsDialogOpen] = useState(false);
+  const [effectsTargetId, setEffectsTargetId] = useState<string | null>(null);
+  const [effectsTargetVersions, setEffectsTargetVersions] = useState<GenerationVersionResponse[]>(
+    [],
+  );
+  const [effectsSourceVersionId, setEffectsSourceVersionId] = useState<string | null>(null);
+  const [effectsChain, setEffectsChain] = useState<EffectConfig[]>([]);
+  const [applyingEffects, setApplyingEffects] = useState(false);
+  const [expandedVersionsId, setExpandedVersionsId] = useState<string | null>(null);
   const limit = 20;
   const { toast } = useToast();
+  const queryClient = useQueryClient();
 
   const {
     data: historyData,
@@ -71,6 +100,7 @@ export function HistoryTable() {
   const exportGeneration = useExportGeneration();
   const exportGenerationAudio = useExportGenerationAudio();
   const importGeneration = useImportGeneration();
+  const addPendingGeneration = useGenerationStore((state) => state.addPendingGeneration);
   const setAudioWithAutoPlay = usePlayerStore((state) => state.setAudioWithAutoPlay);
   const restartCurrentAudio = usePlayerStore((state) => state.restartCurrentAudio);
   const currentAudioId = usePlayerStore((state) => state.audioId);
@@ -194,6 +224,120 @@ export function HistoryTable() {
     }
   };
 
+  const handleRetry = async (generationId: string) => {
+    try {
+      const result = await apiClient.retryGeneration(generationId);
+      addPendingGeneration(result.id);
+      queryClient.invalidateQueries({ queryKey: ['history'] });
+    } catch (error) {
+      toast({
+        title: 'Retry failed',
+        description: error instanceof Error ? error.message : 'Could not retry generation',
+        variant: 'destructive',
+      });
+    }
+  };
+
+  const handleRegenerate = async (generationId: string) => {
+    try {
+      await apiClient.regenerateGeneration(generationId);
+      addPendingGeneration(generationId);
+      queryClient.invalidateQueries({ queryKey: ['history'] });
+    } catch (error) {
+      toast({
+        title: 'Regenerate failed',
+        description: error instanceof Error ? error.message : 'Could not regenerate',
+        variant: 'destructive',
+      });
+    }
+  };
+
+  const handleToggleFavorite = async (generationId: string) => {
+    try {
+      await apiClient.toggleFavorite(generationId);
+      queryClient.invalidateQueries({ queryKey: ['history'] });
+    } catch (error) {
+      toast({
+        title: 'Failed to update favorite',
+        description: error instanceof Error ? error.message : 'Unknown error',
+        variant: 'destructive',
+      });
+    }
+  };
+
+  const handleApplyEffects = (generationId: string) => {
+    const gen = allHistory.find((g) => g.id === generationId);
+    const versions = gen?.versions ?? [];
+    setEffectsTargetId(generationId);
+    setEffectsTargetVersions(versions);
+    // Default to clean/original version (no effects chain)
+    const cleanVersion = versions.find((v) => !v.effects_chain || v.effects_chain.length === 0);
+    setEffectsSourceVersionId(cleanVersion?.id ?? null);
+    setEffectsChain([]);
+    setEffectsDialogOpen(true);
+  };
+
+  const handleApplyEffectsConfirm = async () => {
+    if (!effectsTargetId || effectsChain.length === 0) return;
+    setApplyingEffects(true);
+    try {
+      const newVersion = await apiClient.applyEffectsToGeneration(effectsTargetId, {
+        effects_chain: effectsChain,
+        source_version_id: effectsSourceVersionId ?? undefined,
+        set_as_default: true,
+      });
+      queryClient.invalidateQueries({ queryKey: ['history'] });
+
+      // If the player is currently on this generation, reload with the new version audio
+      if (currentAudioId === effectsTargetId) {
+        const gen = allHistory.find((g) => g.id === effectsTargetId);
+        if (gen) {
+          const versionUrl = apiClient.getVersionAudioUrl(newVersion.id);
+          setAudioWithAutoPlay(
+            versionUrl,
+            effectsTargetId,
+            gen.profile_id,
+            gen.text.substring(0, 50),
+          );
+        }
+      }
+
+      setEffectsDialogOpen(false);
+      toast({ title: 'Effects applied', description: 'A new version has been created.' });
+    } catch (error) {
+      toast({
+        title: 'Failed to apply effects',
+        description: error instanceof Error ? error.message : 'Unknown error',
+        variant: 'destructive',
+      });
+    } finally {
+      setApplyingEffects(false);
+    }
+  };
+
+  const handleSwitchVersion = async (generationId: string, versionId: string) => {
+    try {
+      await apiClient.setDefaultVersion(generationId, versionId);
+      queryClient.invalidateQueries({ queryKey: ['history'] });
+    } catch (error) {
+      toast({
+        title: 'Failed to switch version',
+        description: error instanceof Error ? error.message : 'Unknown error',
+        variant: 'destructive',
+      });
+    }
+  };
+
+  const handlePlayVersion = (
+    generationId: string,
+    versionId: string,
+    text: string,
+    profileId: string,
+  ) => {
+    const audioUrl = apiClient.getVersionAudioUrl(versionId);
+    setAudioWithAutoPlay(audioUrl, generationId, profileId, text.substring(0, 50));
+  };
+
   const handleImportConfirm = () => {
     if (selectedFile) {
       importGeneration.mutate(selectedFile, {
@@ -250,117 +394,266 @@ export function HistoryTable() {
           >
             {history.map((gen) => {
               const isCurrentlyPlaying = currentAudioId === gen.id && isPlaying;
+              const isGenerating = gen.status === 'generating';
+              const isFailed = gen.status === 'failed';
+              const isPlayable = !isGenerating && !isFailed;
+              const hasVersions = gen.versions && gen.versions.length > 1;
+              const isVersionsExpanded = expandedVersionsId === gen.id;
               return (
                 <div
                   key={gen.id}
-                  role="button"
-                  tabIndex={0}
                   className={cn(
-                    'flex items-stretch gap-4 h-26 border rounded-md p-3 bg-card hover:bg-muted/70 transition-colors text-left w-full',
+                    'border rounded-md bg-card transition-colors text-left w-full',
                     isCurrentlyPlaying && 'bg-muted/70',
                   )}
-                  aria-label={
-                    isCurrentlyPlaying
-                      ? `Sample from ${gen.profile_name}, ${formatDuration(gen.duration)}, ${formatDate(gen.created_at)}. Playing. Press Enter to restart.`
-                      : `Sample from ${gen.profile_name}, ${formatDuration(gen.duration)}, ${formatDate(gen.created_at)}. Press Enter to play.`
-                  }
-                  onMouseDown={(e) => {
-                    // Don't trigger play if clicking on textarea or if text is selected
-                    const target = e.target as HTMLElement;
-                    if (target.closest('textarea') || window.getSelection()?.toString()) {
-                      return;
-                    }
-                    handlePlay(gen.id, gen.text, gen.profile_id);
-                  }}
-                  onKeyDown={(e) => {
-                    const target = e.target as HTMLElement;
-                    if (target.closest('textarea') || target.closest('button')) return;
-                    if (e.key === 'Enter' || e.key === ' ') {
-                      e.preventDefault();
-                      handlePlay(gen.id, gen.text, gen.profile_id);
-                    }
-                  }}
                 >
-                  {/* Waveform icon */}
-                  <div className="flex items-center shrink-0">
-                    <AudioWaveform className="h-5 w-5 text-muted-foreground" />
-                  </div>
-
-                  {/* Left side - Meta information */}
-                  <div className="flex flex-col gap-1.5 w-48 shrink-0 justify-center">
-                    <div className="font-medium text-sm truncate" title={gen.profile_name}>
-                      {gen.profile_name}
-                    </div>
-                    <div className="flex items-center gap-2">
-                      <span className="text-xs text-muted-foreground">{gen.language}</span>
-                      <span className="text-xs text-muted-foreground">
-                        {formatDuration(gen.duration)}
-                      </span>
-                    </div>
-                    <div className="text-xs text-muted-foreground">
-                      {formatDate(gen.created_at)}
-                    </div>
-                  </div>
-
-                  {/* Right side - Transcript textarea */}
-                  <div className="flex-1 min-w-0 flex">
-                    <Textarea
-                      value={gen.text}
-                      className="flex-1 resize-none text-sm text-muted-foreground select-text"
-                      readOnly
-                      aria-label={`Transcript for sample from ${gen.profile_name}, ${formatDuration(gen.duration)}`}
-                    />
-                  </div>
-
-                  {/* Far right - Ellipsis actions */}
+                  {/* Main row */}
                   <div
-                    className="w-10 shrink-0 flex justify-end"
-                    onMouseDown={(e) => e.stopPropagation()}
-                    onClick={(e) => e.stopPropagation()}
+                    role={isPlayable ? 'button' : undefined}
+                    tabIndex={isPlayable ? 0 : undefined}
+                    className={cn(
+                      'flex items-stretch gap-4 h-26 p-3',
+                      isPlayable && 'hover:bg-muted/70 cursor-pointer rounded-md',
+                      isVersionsExpanded && 'rounded-b-none',
+                    )}
+                    aria-label={
+                      isGenerating
+                        ? `Generating speech for ${gen.profile_name}...`
+                        : isFailed
+                          ? `Generation failed for ${gen.profile_name}`
+                          : isCurrentlyPlaying
+                            ? `Sample from ${gen.profile_name}, ${formatDuration(gen.duration ?? 0)}, ${formatDate(gen.created_at)}. Playing. Press Enter to restart.`
+                            : `Sample from ${gen.profile_name}, ${formatDuration(gen.duration ?? 0)}, ${formatDate(gen.created_at)}. Press Enter to play.`
+                    }
+                    onMouseDown={(e) => {
+                      if (!isPlayable) return;
+                      const target = e.target as HTMLElement;
+                      if (target.closest('textarea') || window.getSelection()?.toString()) {
+                        return;
+                      }
+                      handlePlay(gen.id, gen.text, gen.profile_id);
+                    }}
+                    onKeyDown={(e) => {
+                      if (!isPlayable) return;
+                      const target = e.target as HTMLElement;
+                      if (target.closest('textarea') || target.closest('button')) return;
+                      if (e.key === 'Enter' || e.key === ' ') {
+                        e.preventDefault();
+                        handlePlay(gen.id, gen.text, gen.profile_id);
+                      }
+                    }}
                   >
-                    <DropdownMenu>
-                      <DropdownMenuTrigger asChild>
+                    {/* Status icon */}
+                    <div className="flex items-center shrink-0 w-10 justify-center overflow-hidden">
+                      <div className="scale-50">
+                        <Loader
+                          type={isGenerating ? 'line-scale' : 'line-scale-pulse-out-rapid'}
+                          active={isGenerating || isCurrentlyPlaying}
+                        />
+                      </div>
+                    </div>
+
+                    {/* Left side - Meta information */}
+                    <div className="flex flex-col gap-1.5 w-48 shrink-0 justify-center">
+                      <div className="font-medium text-sm truncate" title={gen.profile_name}>
+                        {gen.profile_name}
+                      </div>
+                      <div className="flex items-center gap-2">
+                        <span className="text-xs text-muted-foreground">{gen.language}</span>
+                        <span className="text-xs text-muted-foreground">
+                          {formatEngineName(gen.engine, gen.model_size)}
+                        </span>
+                        {isFailed ? (
+                          <span className="text-xs text-destructive">Failed</span>
+                        ) : !isGenerating ? (
+                          <span className="text-xs text-muted-foreground">
+                            {formatDuration(gen.duration ?? 0)}
+                          </span>
+                        ) : null}
+                      </div>
+                      <div className="text-xs text-muted-foreground">
+                        {isGenerating ? (
+                          <span className="text-accent">Generating...</span>
+                        ) : (
+                          formatDate(gen.created_at)
+                        )}
+                      </div>
+                    </div>
+
+                    {/* Right side - Transcript textarea */}
+                    <div className="flex-1 min-w-0 flex">
+                      <Textarea
+                        value={gen.text}
+                        className="flex-1 resize-none text-sm text-muted-foreground select-text"
+                        readOnly
+                        aria-label={`Transcript for sample from ${gen.profile_name}, ${formatDuration(gen.duration ?? 0)}`}
+                      />
+                    </div>
+
+                    {/* Far right - Actions */}
+                    <div
+                      className="shrink-0 flex flex-col justify-center items-center gap-0.5"
+                      onMouseDown={(e) => e.stopPropagation()}
+                      onClick={(e) => e.stopPropagation()}
+                    >
+                      <Button
+                        variant="ghost"
+                        size="icon"
+                        className={cn(
+                          'h-6 w-6 text-muted-foreground/50 hover:bg-muted-foreground/20 hover:text-muted-foreground',
+                          gen.is_favorited && 'text-accent hover:text-accent',
+                        )}
+                        aria-label={gen.is_favorited ? 'Unfavorite' : 'Favorite'}
+                        onClick={() => handleToggleFavorite(gen.id)}
+                      >
+                        <Star
+                          className="h-2 w-2"
+                          fill={gen.is_favorited ? 'currentColor' : 'none'}
+                        />
+                      </Button>
+                      {hasVersions && (
                         <Button
                           variant="ghost"
                           size="icon"
-                          className="h-8 w-8"
-                          aria-label="Actions"
+                          className={cn(
+                            'h-6 w-6 text-muted-foreground/50 hover:bg-muted-foreground/20 hover:text-muted-foreground',
+                            isVersionsExpanded && 'text-accent hover:text-accent',
+                          )}
+                          aria-label="Toggle versions"
+                          onClick={() => setExpandedVersionsId(isVersionsExpanded ? null : gen.id)}
                         >
-                          <MoreHorizontal className="h-4 w-4" />
+                          <AudioLines className="h-2 w-2" />
                         </Button>
-                      </DropdownMenuTrigger>
-                      <DropdownMenuContent align="end">
-                        <DropdownMenuItem
-                          onClick={() => handlePlay(gen.id, gen.text, gen.profile_id)}
+                      )}
+
+                      {isFailed ? (
+                        <Button
+                          variant="ghost"
+                          size="icon"
+                          className="h-6 w-6 text-muted-foreground/50 hover:bg-muted-foreground/20 hover:text-muted-foreground"
+                          aria-label="Retry generation"
+                          onClick={() => handleRetry(gen.id)}
                         >
-                          <Play className="mr-2 h-4 w-4" />
-                          Play
-                        </DropdownMenuItem>
-                        <DropdownMenuItem
-                          onClick={() => handleDownloadAudio(gen.id, gen.text)}
-                          disabled={exportGenerationAudio.isPending}
-                        >
-                          <Download className="mr-2 h-4 w-4" />
-                          Export Audio
-                        </DropdownMenuItem>
-                        <DropdownMenuItem
-                          onClick={() => handleExportPackage(gen.id, gen.text)}
-                          disabled={exportGeneration.isPending}
-                        >
-                          <FileArchive className="mr-2 h-4 w-4" />
-                          Export Package
-                        </DropdownMenuItem>
-                        <DropdownMenuItem
-                          onClick={() => handleDeleteClick(gen.id, gen.profile_name)}
-                          disabled={deleteGeneration.isPending}
-                          className="text-destructive focus:text-destructive"
-                        >
-                          <Trash2 className="mr-2 h-4 w-4" />
-                          Delete
-                        </DropdownMenuItem>
-                      </DropdownMenuContent>
-                    </DropdownMenu>
+                          <RotateCcw className="h-2 w-2" />
+                        </Button>
+                      ) : (
+                        <>
+                          <DropdownMenu>
+                            <DropdownMenuTrigger asChild>
+                              <Button
+                                variant="ghost"
+                                size="icon"
+                                className="h-6 w-6 text-muted-foreground/50 hover:bg-muted-foreground/20 hover:text-muted-foreground"
+                                aria-label="Actions"
+                                disabled={isGenerating}
+                              >
+                                <MoreHorizontal className="h-2 w-2" />
+                              </Button>
+                            </DropdownMenuTrigger>
+                            <DropdownMenuContent align="end">
+                              <DropdownMenuItem
+                                onClick={() => handlePlay(gen.id, gen.text, gen.profile_id)}
+                              >
+                                <Play className="mr-2 h-4 w-4" />
+                                Play
+                              </DropdownMenuItem>
+                              <DropdownMenuItem
+                                onClick={() => handleDownloadAudio(gen.id, gen.text)}
+                                disabled={exportGenerationAudio.isPending}
+                              >
+                                <Download className="mr-2 h-4 w-4" />
+                                Export Audio
+                              </DropdownMenuItem>
+                              <DropdownMenuItem
+                                onClick={() => handleExportPackage(gen.id, gen.text)}
+                                disabled={exportGeneration.isPending}
+                              >
+                                <FileArchive className="mr-2 h-4 w-4" />
+                                Export Package
+                              </DropdownMenuItem>
+                              <DropdownMenuItem onClick={() => handleApplyEffects(gen.id)}>
+                                <Wand2 className="mr-2 h-4 w-4" />
+                                Apply Effects
+                              </DropdownMenuItem>
+                              <DropdownMenuItem onClick={() => handleRegenerate(gen.id)}>
+                                <RotateCcw className="mr-2 h-4 w-4" />
+                                Regenerate
+                              </DropdownMenuItem>
+                              <DropdownMenuItem
+                                onClick={() => handleDeleteClick(gen.id, gen.profile_name)}
+                                disabled={deleteGeneration.isPending}
+                                // className="text-destructive focus:text-destructive"
+                              >
+                                <Trash2 className="mr-2 h-4 w-4" />
+                                Delete
+                              </DropdownMenuItem>
+                            </DropdownMenuContent>
+                          </DropdownMenu>
+                        </>
+                      )}
+                    </div>
                   </div>
+
+                  {/* Expandable versions panel */}
+                  <AnimatePresence>
+                    {isVersionsExpanded && gen.versions && (
+                      <motion.div
+                        initial={{ height: 0, opacity: 0 }}
+                        animate={{ height: 'auto', opacity: 1 }}
+                        exit={{ height: 0, opacity: 0 }}
+                        transition={{ duration: 0.2, ease: 'easeOut' }}
+                        className="overflow-hidden"
+                      >
+                        <div className="border-t border-border/50">
+                          <div className="divide-y divide-border/40">
+                            {gen.versions.map((v) => {
+                              // Show source provenance when effects were applied to a non-clean version
+                              const sourceVersion = v.source_version_id
+                                ? gen.versions?.find((sv) => sv.id === v.source_version_id)
+                                : null;
+                              const showSource =
+                                sourceVersion &&
+                                sourceVersion.effects_chain &&
+                                sourceVersion.effects_chain.length > 0;
+
+                              return (
+                                <button
+                                  key={v.id}
+                                  type="button"
+                                  className="flex items-center gap-2 w-full h-9 px-3 text-left hover:bg-muted/50 transition-colors"
+                                  onClick={() => {
+                                    handlePlayVersion(gen.id, v.id, gen.text, gen.profile_id);
+                                    if (!v.is_default) {
+                                      handleSwitchVersion(gen.id, v.id);
+                                    }
+                                  }}
+                                >
+                                  <AudioLines className="h-3 w-3 shrink-0 text-muted-foreground" />
+                                  <span className="truncate text-xs font-medium">{v.label}</span>
+                                  {v.effects_chain && v.effects_chain.length > 0 && (
+                                    <span className="text-[10px] text-muted-foreground truncate">
+                                      {v.effects_chain.map((e) => e.type).join(' → ')}
+                                    </span>
+                                  )}
+                                  {showSource && (
+                                    <span className="text-[10px] text-muted-foreground/60 truncate">
+                                      from {sourceVersion.label}
+                                    </span>
+                                  )}
+                                  <span className="flex-1" />
+                                  {v.is_default && (
+                                    <span className="text-[10px] bg-accent/15 text-accent px-1.5 py-0.5 rounded-full">
+                                      active
+                                    </span>
+                                  )}
+                                </button>
+                              );
+                            })}
+                          </div>
+                        </div>
+                      </motion.div>
+                    )}
+                  </AnimatePresence>
                 </div>
               );
             })}
@@ -387,7 +680,8 @@ export function HistoryTable() {
           <DialogHeader>
             <DialogTitle>Delete Generation</DialogTitle>
             <DialogDescription>
-              Are you sure you want to delete this generation from "{generationToDelete?.name}"? This action cannot be undone.
+              Are you sure you want to delete this generation from "{generationToDelete?.name}"?
+              This action cannot be undone.
             </DialogDescription>
           </DialogHeader>
           <DialogFooter>
@@ -441,6 +735,57 @@ export function HistoryTable() {
           </DialogFooter>
         </DialogContent>
       </Dialog>
+
+      <Dialog open={effectsDialogOpen} onOpenChange={setEffectsDialogOpen}>
+        <DialogContent className="max-w-md">
+          <DialogHeader>
+            <DialogTitle>Apply Effects</DialogTitle>
+            <DialogDescription>
+              Configure post-processing effects to apply to this generation. A new version will be
+              created.
+            </DialogDescription>
+          </DialogHeader>
+          {effectsTargetVersions.length > 1 && (
+            <div className="space-y-1.5">
+              <label className="text-xs font-medium text-muted-foreground">Source</label>
+              <Select
+                value={effectsSourceVersionId ?? ''}
+                onValueChange={(val) => setEffectsSourceVersionId(val || null)}
+              >
+                <SelectTrigger className="h-8 text-xs">
+                  <SelectValue placeholder="Select source version" />
+                </SelectTrigger>
+                <SelectContent>
+                  {effectsTargetVersions.map((v) => (
+                    <SelectItem key={v.id} value={v.id} className="text-xs">
+                      {v.label}
+                      {v.effects_chain && v.effects_chain.length > 0 && (
+                        <span className="text-muted-foreground ml-1.5">
+                          ({v.effects_chain.map((e) => e.type).join(' + ')})
+                        </span>
+                      )}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </div>
+          )}
+          <div className="py-2 max-h-80 overflow-y-auto">
+            <EffectsChainEditor value={effectsChain} onChange={setEffectsChain} />
+          </div>
+          <DialogFooter>
+            <Button variant="outline" onClick={() => setEffectsDialogOpen(false)}>
+              Cancel
+            </Button>
+            <Button
+              onClick={handleApplyEffectsConfirm}
+              disabled={applyingEffects || effectsChain.length === 0}
+            >
+              {applyingEffects ? 'Applying...' : 'Apply'}
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
     </div>
   );
 }

app/src/components/MainEditor/MainEditor.tsx

@@ -13,7 +13,7 @@ import {
 } from '@/components/ui/dialog';
 import { useToast } from '@/components/ui/use-toast';
 import { ProfileList } from '@/components/VoiceProfiles/ProfileList';
-import { BOTTOM_SAFE_AREA_PADDING } from '@/lib/constants/ui';
+
 import { useImportProfile } from '@/lib/hooks/useProfiles';
 import { cn } from '@/lib/utils/cn';
 import { usePlayerStore } from '@/stores/playerStore';
@@ -77,9 +77,9 @@ export function MainEditor() {
 
   return (
     // Main view: Profiles top left, Generator bottom left, History right
-    <div className="grid grid-cols-1 lg:grid-cols-2 gap-6 h-full min-h-0 overflow-hidden relative">
+    <div className="grid grid-cols-1 lg:grid-cols-2 lg:gap-6 h-full min-h-0 overflow-hidden relative">
       {/* Left Column */}
-      <div className="flex flex-col min-h-0 overflow-hidden relative">
+      <div className="flex flex-col min-h-0 overflow-hidden relative lg:overflow-hidden">
         {/* Scroll Mask - Always visible, behind content */}
         <div className="absolute top-0 left-0 right-0 h-16 bg-gradient-to-b from-background to-transparent z-0 pointer-events-none" />
 
@@ -110,10 +110,7 @@ export function MainEditor() {
         {/* Scrollable Content */}
         <div
           ref={scrollRef}
-          className={cn(
-            'flex-1 min-h-0 overflow-y-auto pt-14',
-            isPlayerVisible ? BOTTOM_SAFE_AREA_PADDING : 'pb-4',
-          )}
+          className={cn('flex-1 min-h-0 overflow-y-auto pt-14 pb-4', isPlayerVisible && 'lg:pb-32')}
         >
           <div className="flex flex-col gap-6">
             <div className="shrink-0 flex flex-col">
@@ -123,6 +120,9 @@ export function MainEditor() {
         </div>
       </div>
 
+      {/* Divider - single column only */}
+      {/* <div className="border-t border-border -my-3 lg:hidden" /> */}
+
       {/* Right Column - History */}
       <div className="flex flex-col min-h-0 overflow-hidden">
         <HistoryTable />

app/src/components/ModelsTab/ModelsTab.tsx

@@ -2,7 +2,7 @@ import { ModelManagement } from '@/components/ServerSettings/ModelManagement';
 
 export function ModelsTab() {
   return (
-    <div className="h-full flex flex-col p-4">
+    <div className="h-full flex flex-col">
       <ModelManagement />
     </div>
   );

app/src/components/ServerSettings/ConnectionForm.tsx

@@ -1,9 +1,12 @@
 import { zodResolver } from '@hookform/resolvers/zod';
+import { Loader2, XCircle } from 'lucide-react';
 import { useEffect } from 'react';
 import { useForm } from 'react-hook-form';
 import * as z from 'zod';
+import { Badge } from '@/components/ui/badge';
 import { Button } from '@/components/ui/button';
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import { Checkbox } from '@/components/ui/checkbox';
 import {
   Form,
   FormControl,
@@ -14,10 +17,10 @@ import {
   FormMessage,
 } from '@/components/ui/form';
 import { Input } from '@/components/ui/input';
-import { Checkbox } from '@/components/ui/checkbox';
 import { useToast } from '@/components/ui/use-toast';
-import { useServerStore } from '@/stores/serverStore';
+import { useServerHealth } from '@/lib/hooks/useServer';
 import { usePlatform } from '@/platform/PlatformContext';
+import { useServerStore } from '@/stores/serverStore';
 
 const connectionSchema = z.object({
   serverUrl: z.string().url('Please enter a valid URL'),
@@ -34,6 +37,7 @@ export function ConnectionForm() {
   const mode = useServerStore((state) => state.mode);
   const setMode = useServerStore((state) => state.setMode);
   const { toast } = useToast();
+  const { data: health, isLoading, error: healthError } = useServerHealth();
 
   const form = useForm<ConnectionFormValues>({
     resolver: zodResolver(connectionSchema),
@@ -51,7 +55,7 @@ export function ConnectionForm() {
 
   function onSubmit(data: ConnectionFormValues) {
     setServerUrl(data.serverUrl);
-    form.reset(data); // Reset form state after successful submission
+    form.reset(data);
     toast({
       title: 'Server URL updated',
       description: `Connected to ${data.serverUrl}`,
@@ -59,11 +63,7 @@ export function ConnectionForm() {
   }
 
   return (
-    <Card
-      role="region"
-      aria-label="Server Connection"
-      tabIndex={0}
-    >
+    <Card role="region" aria-label="Server Connection" tabIndex={0}>
       <CardHeader>
         <CardTitle>Server Connection</CardTitle>
       </CardHeader>
@@ -89,10 +89,42 @@ export function ConnectionForm() {
           </form>
         </Form>
 
+        {/* Connection status */}
+        <div className="mt-4">
+          {isLoading ? (
+            <div className="flex items-center gap-2">
+              <Loader2 className="h-4 w-4 animate-spin" />
+              <span className="text-sm text-muted-foreground">Checking connection...</span>
+            </div>
+          ) : healthError ? (
+            <div className="flex items-center gap-2">
+              <XCircle className="h-4 w-4 text-destructive" />
+              <span className="text-sm text-destructive">
+                Connection failed: {healthError.message}
+              </span>
+            </div>
+          ) : health ? (
+            <div className="flex flex-wrap gap-2">
+              <Badge
+                variant={health.model_loaded || health.model_downloaded ? 'default' : 'secondary'}
+              >
+                {health.model_loaded || health.model_downloaded ? 'Model Ready' : 'No Model'}
+              </Badge>
+              <Badge variant={health.gpu_available ? 'default' : 'secondary'}>
+                GPU: {health.gpu_available ? 'Available' : 'Not Available'}
+              </Badge>
+              {health.vram_used_mb != null && health.vram_used_mb > 0 && (
+                <Badge variant="outline">VRAM: {health.vram_used_mb.toFixed(0)} MB</Badge>
+              )}
+            </div>
+          ) : null}
+        </div>
+
         <div className="mt-6 pt-6 border-t">
           <div className="flex items-start space-x-3">
             <Checkbox
               id="keepServerRunning"
+              className="mt-[6px]"
               checked={keepServerRunningOnClose}
               onCheckedChange={(checked: boolean) => {
                 setKeepServerRunningOnClose(checked);
@@ -127,6 +159,7 @@ export function ConnectionForm() {
             <div className="flex items-start space-x-3">
               <Checkbox
                 id="allowNetworkAccess"
+                className="mt-[6px]"
                 checked={mode === 'remote'}
                 onCheckedChange={(checked: boolean) => {
                   setMode(checked ? 'remote' : 'local');

app/src/components/ServerSettings/GenerationSettings.tsx

@@ -0,0 +1,116 @@
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
+import { Checkbox } from '@/components/ui/checkbox';
+import { Slider } from '@/components/ui/slider';
+import { useServerStore } from '@/stores/serverStore';
+
+export function GenerationSettings() {
+  const maxChunkChars = useServerStore((state) => state.maxChunkChars);
+  const setMaxChunkChars = useServerStore((state) => state.setMaxChunkChars);
+  const crossfadeMs = useServerStore((state) => state.crossfadeMs);
+  const setCrossfadeMs = useServerStore((state) => state.setCrossfadeMs);
+  const normalizeAudio = useServerStore((state) => state.normalizeAudio);
+  const setNormalizeAudio = useServerStore((state) => state.setNormalizeAudio);
+  const autoplayOnGenerate = useServerStore((state) => state.autoplayOnGenerate);
+  const setAutoplayOnGenerate = useServerStore((state) => state.setAutoplayOnGenerate);
+
+  return (
+    <Card role="region" aria-label="Generation Settings" tabIndex={0}>
+      <CardHeader>
+        <CardTitle>Generation Settings</CardTitle>
+        <CardDescription>
+          Controls for long text generation. These settings apply to all engines.
+        </CardDescription>
+      </CardHeader>
+      <CardContent>
+        <div className="space-y-6">
+          <div className="space-y-3">
+            <div className="flex items-center justify-between">
+              <label htmlFor="maxChunkChars" className="text-sm font-medium leading-none">
+                Auto-chunking limit
+              </label>
+              <span className="text-sm tabular-nums text-muted-foreground">
+                {maxChunkChars} chars
+              </span>
+            </div>
+            <Slider
+              id="maxChunkChars"
+              value={[maxChunkChars]}
+              onValueChange={([value]) => setMaxChunkChars(value)}
+              min={100}
+              max={5000}
+              step={50}
+              aria-label="Auto-chunking character limit"
+            />
+            <p className="text-sm text-muted-foreground">
+              Long text is split into chunks at sentence boundaries before generating. Lower values
+              can improve quality for long outputs.
+            </p>
+          </div>
+
+          <div className="space-y-3">
+            <div className="flex items-center justify-between">
+              <label htmlFor="crossfadeMs" className="text-sm font-medium leading-none">
+                Chunk crossfade
+              </label>
+              <span className="text-sm tabular-nums text-muted-foreground">
+                {crossfadeMs === 0 ? 'Cut' : `${crossfadeMs}ms`}
+              </span>
+            </div>
+            <Slider
+              id="crossfadeMs"
+              value={[crossfadeMs]}
+              onValueChange={([value]) => setCrossfadeMs(value)}
+              min={0}
+              max={200}
+              step={10}
+              aria-label="Chunk crossfade duration"
+            />
+            <p className="text-sm text-muted-foreground">
+              Blends audio between chunks to smooth transitions. Set to 0 for a hard cut.
+            </p>
+          </div>
+
+          <div className="flex items-start gap-3">
+            <Checkbox
+              id="normalizeAudio"
+              checked={normalizeAudio}
+              onCheckedChange={setNormalizeAudio}
+              className="mt-[6px]"
+            />
+            <div className="space-y-1">
+              <label
+                htmlFor="normalizeAudio"
+                className="text-sm font-medium leading-none cursor-pointer"
+              >
+                Normalize audio
+              </label>
+              <p className="text-sm text-muted-foreground">
+                Adjusts output volume to a consistent level across generations.
+              </p>
+            </div>
+          </div>
+
+          <div className="flex items-start gap-3">
+            <Checkbox
+              id="autoplayOnGenerate"
+              checked={autoplayOnGenerate}
+              onCheckedChange={setAutoplayOnGenerate}
+              className="mt-[6px]"
+            />
+            <div className="space-y-1">
+              <label
+                htmlFor="autoplayOnGenerate"
+                className="text-sm font-medium leading-none cursor-pointer"
+              >
+                Autoplay on generate
+              </label>
+              <p className="text-sm text-muted-foreground">
+                Automatically play audio when a generation completes.
+              </p>
+            </div>
+          </div>
+        </div>
+      </CardContent>
+    </Card>
+  );
+}

app/src/components/ServerSettings/GpuAcceleration.tsx

@@ -1,7 +1,6 @@
 import { useQuery, useQueryClient } from '@tanstack/react-query';
-import { AlertCircle, Cpu, Download, Loader2, RotateCw, Trash2, Zap } from 'lucide-react';
+import { AlertCircle, Download, Loader2, RotateCw, Trash2 } from 'lucide-react';
 import { useCallback, useEffect, useRef, useState } from 'react';
-import { Badge } from '@/components/ui/badge';
 import { Button } from '@/components/ui/button';
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
 import { Progress } from '@/components/ui/progress';
@@ -27,7 +26,7 @@ export function GpuAcceleration() {
   // Query CUDA backend status
   const {
     data: cudaStatus,
-    isLoading: cudaStatusLoading,
+    isLoading: _cudaStatusLoading,
     refetch: refetchCudaStatus,
   } = useQuery({
     queryKey: ['cuda-status', serverUrl],
@@ -216,66 +215,49 @@ export function GpuAcceleration() {
   return (
     <Card>
       <CardHeader>
-        <CardTitle className="flex items-center gap-2">
-          <Zap className="h-4 w-4" />
-          GPU Acceleration
-        </CardTitle>
+        <CardTitle>GPU Acceleration</CardTitle>
       </CardHeader>
       <CardContent className="space-y-4">
-        {/* Current status */}
-        <div className="flex items-center justify-between">
-          <div className="space-y-1">
-            <div className="text-sm font-medium">Backend</div>
-            <div className="text-sm text-muted-foreground">
-              {isCurrentlyCuda ? 'CUDA (GPU accelerated)' : 'CPU'}
-            </div>
-          </div>
-          <Badge variant={isCurrentlyCuda ? 'default' : 'secondary'}>
-            {isCurrentlyCuda ? (
-              <>
-                <Zap className="h-3 w-3 mr-1" /> CUDA
-              </>
-            ) : (
-              <>
-                <Cpu className="h-3 w-3 mr-1" /> CPU
-              </>
-            )}
-          </Badge>
+        {/* GPU status */}
+        <div className="space-y-1">
+          {health.gpu_available && health.gpu_type ? (
+            <>
+              <div className="text-sm font-medium">
+                {health.gpu_type.replace(/^(CUDA|ROCm|MPS|Metal|XPU|DirectML)\s*\((.+)\)$/, '$2') ||
+                  health.gpu_type}
+              </div>
+              <div className="text-sm text-muted-foreground">
+                {health.gpu_type.replace(/\s*\(.+\)$/, '')}
+                {health.vram_used_mb != null && health.vram_used_mb > 0
+                  ? ` \u00b7 ${health.vram_used_mb.toFixed(0)} MB VRAM used`
+                  : ''}
+              </div>
+            </>
+          ) : (
+            <>
+              <div className="text-sm font-medium">CPU</div>
+              <div className="text-sm text-muted-foreground">No GPU acceleration available</div>
+            </>
+          )}
         </div>
 
-        {/* GPU info from health */}
-        {health.gpu_type && (
-          <div className="space-y-1">
-            <div className="text-sm font-medium">GPU</div>
-            <div className="text-sm text-muted-foreground">{health.gpu_type}</div>
-            {health.vram_used_mb != null && (
-              <div className="text-xs text-muted-foreground">
-                VRAM: {health.vram_used_mb.toFixed(0)} MB used
-              </div>
-            )}
-          </div>
-        )}
-
         {/* Native GPU detected - no CUDA download needed */}
-        {hasNativeGpu && (
-          <div className="p-3 rounded-lg bg-accent/10 border border-accent/20">
-            <div className="text-sm">
-              Your system uses <strong>{health.gpu_type}</strong> for acceleration. No additional
-              downloads needed.
-            </div>
-          </div>
-        )}
 
-        {/* CUDA download section - only show when native GPU is NOT detected (i.e., Windows/Linux NVIDIA users) */}
-        {!hasNativeGpu && (
+        {/* CUDA download section - only show when no GPU is active (native or CUDA) */}
+        {!hasNativeGpu && !isCurrentlyCuda && (
           <>
-            {/* Download progress */}
+            {/* Download progress (manual download or auto-update) */}
             {cudaDownloading && downloadProgress && (
               <div className="space-y-2">
                 <div className="flex items-center justify-between text-sm">
                   <div className="flex items-center gap-2">
                     <Loader2 className="h-4 w-4 animate-spin" />
-                    <span>{downloadProgress.filename || 'Downloading CUDA backend...'}</span>
+                    <span>
+                      {downloadProgress.filename ||
+                        (cudaAvailable
+                          ? 'Updating CUDA backend...'
+                          : 'Downloading CUDA backend...')}
+                    </span>
                   </div>
                   {downloadProgress.total > 0 && (
                     <span className="text-muted-foreground">

app/src/components/ServerSettings/ModelManagement.tsx

@@ -7,6 +7,7 @@ import {
   CircleX,
   Download,
   ExternalLink,
+  FolderOpen,
   HardDrive,
   Heart,
   Loader2,
@@ -41,6 +42,8 @@ import { useToast } from '@/components/ui/use-toast';
 import { apiClient } from '@/lib/api/client';
 import type { ActiveDownloadTask, HuggingFaceModelInfo, ModelStatus } from '@/lib/api/types';
 import { useModelDownloadToast } from '@/lib/hooks/useModelDownloadToast';
+import { usePlatform } from '@/platform/PlatformContext';
+import { useServerStore } from '@/stores/serverStore';
 
 async function fetchHuggingFaceModelInfo(repoId: string): Promise<HuggingFaceModelInfo> {
   const response = await fetch(`https://huggingface.co/api/models/${repoId}`);
@@ -48,6 +51,29 @@ async function fetchHuggingFaceModelInfo(repoId: string): Promise<HuggingFaceMod
   return response.json();
 }
 
+const MODEL_DESCRIPTIONS: Record<string, string> = {
+  'qwen-tts-1.7B':
+    'High-quality multilingual TTS by Alibaba. Supports 10 languages with natural prosody and voice cloning from short reference audio.',
+  'qwen-tts-0.6B':
+    'Lightweight version of Qwen TTS. Same language support with faster inference, ideal for lower-end hardware.',
+  luxtts:
+    'Lightweight ZipVoice-based TTS designed for high quality voice cloning and 48kHz speech generation at speeds exceeding 150x realtime.',
+  'chatterbox-tts':
+    'Production-grade open source TTS by Resemble AI. Supports 23 languages with voice cloning and emotion exaggeration control.',
+  'chatterbox-turbo':
+    'Streamlined 350M parameter TTS by Resemble AI. High-quality English speech with less compute and VRAM than larger models.',
+  'whisper-base':
+    'Smallest Whisper model (74M parameters). Fast transcription with moderate accuracy.',
+  'whisper-small':
+    'Whisper Small (244M parameters). Good balance of speed and accuracy for transcription.',
+  'whisper-medium':
+    'Whisper Medium (769M parameters). Higher accuracy transcription at moderate speed.',
+  'whisper-large':
+    'Whisper Large (1.5B parameters). Best accuracy for speech-to-text across multiple languages.',
+  'whisper-turbo':
+    'Whisper Large v3 Turbo. Pruned for significantly faster inference while maintaining near-large accuracy.',
+};
+
 function formatDownloads(n: number): string {
   if (n >= 1_000_000) return `${(n / 1_000_000).toFixed(1)}M`;
   if (n >= 1_000) return `${(n / 1_000).toFixed(1)}k`;
@@ -85,6 +111,18 @@ function formatBytes(bytes: number): string {
 export function ModelManagement() {
   const { toast } = useToast();
   const queryClient = useQueryClient();
+  const platform = usePlatform();
+  const customModelsDir = useServerStore((state) => state.customModelsDir);
+  const setCustomModelsDir = useServerStore((state) => state.setCustomModelsDir);
+  const [migrating, setMigrating] = useState(false);
+  const [migrationProgress, setMigrationProgress] = useState<{
+    current: number;
+    total: number;
+    progress: number;
+    filename?: string;
+    status: string;
+  } | null>(null);
+  const [pendingMigrateDir, setPendingMigrateDir] = useState<string | null>(null);
   const [downloadingModel, setDownloadingModel] = useState<string | null>(null);
   const [downloadingDisplayName, setDownloadingDisplayName] = useState<string | null>(null);
   const [consoleOpen, setConsoleOpen] = useState(false);
@@ -104,6 +142,12 @@ export function ModelManagement() {
     refetchInterval: 5000,
   });
 
+  const { data: cacheDir } = useQuery({
+    queryKey: ['modelsCacheDir'],
+    queryFn: () => apiClient.getModelsCacheDir(),
+    staleTime: 1000 * 60 * 5,
+  });
+
   const { data: activeTasks } = useQuery({
     queryKey: ['activeTasks'],
     queryFn: () => apiClient.getActiveTasks(),
@@ -342,17 +386,18 @@ export function ModelManagement() {
     setDetailOpen(true);
   };
 
-  const ttsModels = modelStatus?.models.filter((m) => m.model_name.startsWith('qwen-tts')) ?? [];
-  const otherTtsModels =
+  const voiceModels =
     modelStatus?.models.filter(
-      (m) => m.model_name.startsWith('luxtts') || m.model_name.startsWith('chatterbox'),
+      (m) =>
+        m.model_name.startsWith('qwen-tts') ||
+        m.model_name.startsWith('luxtts') ||
+        m.model_name.startsWith('chatterbox'),
     ) ?? [];
   const whisperModels = modelStatus?.models.filter((m) => m.model_name.startsWith('whisper')) ?? [];
 
   // Build sections
   const sections: { label: string; models: ModelStatus[] }[] = [
-    { label: 'Voice Generation', models: ttsModels },
-    ...(otherTtsModels.length > 0 ? [{ label: 'Other Voice Models', models: otherTtsModels }] : []),
+    { label: 'Voice Generation', models: voiceModels },
     { label: 'Transcription', models: whisperModels },
   ];
 
@@ -381,6 +426,81 @@ export function ModelManagement() {
         </p>
       </div>
 
+      {/* Model storage location */}
+      {platform.metadata.isTauri && cacheDir && (
+        <div className="shrink-0 pb-4 border-b mb-4">
+          <div className="flex items-center justify-between gap-2">
+            <div className="min-w-0">
+              <span className="text-xs text-muted-foreground">Storage location</span>
+              <p
+                className="text-xs font-mono text-muted-foreground/70 truncate"
+                title={cacheDir.path}
+              >
+                {cacheDir.path}
+              </p>
+            </div>
+            <div className="flex items-center gap-1 shrink-0">
+              <Button
+                variant="ghost"
+                size="sm"
+                className="text-xs text-muted-foreground h-7 px-2"
+                onClick={async () => {
+                  try {
+                    await platform.filesystem.openPath(cacheDir.path);
+                  } catch {
+                    toast({ title: 'Failed to open model folder', variant: 'destructive' });
+                  }
+                }}
+              >
+                <FolderOpen className="h-3 w-3" />
+                Open
+              </Button>
+              <Button
+                variant="ghost"
+                size="sm"
+                className="text-xs text-muted-foreground h-7 px-2"
+                onClick={async () => {
+                  try {
+                    const newDir = await platform.filesystem.pickDirectory(
+                      'Choose model storage folder',
+                    );
+                    if (!newDir) return;
+                    setPendingMigrateDir(newDir);
+                  } catch {
+                    toast({ title: 'Failed to open folder picker', variant: 'destructive' });
+                  }
+                }}
+                disabled={migrating}
+              >
+                {migrating ? (
+                  <Loader2 className="h-3 w-3 animate-spin" />
+                ) : (
+                  <FolderOpen className="h-3 w-3" />
+                )}
+                {migrating ? 'Migrating...' : 'Change'}
+              </Button>
+              {customModelsDir && (
+                <Button
+                  variant="ghost"
+                  size="sm"
+                  className="text-xs text-muted-foreground h-7 px-2"
+                  disabled={migrating}
+                  onClick={async () => {
+                    setCustomModelsDir(null);
+                    toast({ title: 'Reset to default location. Restarting server...' });
+                    await platform.lifecycle.restartServer('');
+                    queryClient.invalidateQueries();
+                  }}
+                >
+                  <RotateCcw className="h-3 w-3" />
+                  Reset
+                </Button>
+              )}
+            </div>
+          </div>
+        </div>
+      )}
+
       {/* Model list */}
       {isLoading ? (
         <div className="flex items-center justify-center py-16">
@@ -456,9 +576,7 @@ export function ModelManagement() {
                             {formatSize(model.size_mb)}
                           </span>
                         )}
-                        {!model.downloaded && !isDownloading && !hasError && (
-                          <span className="text-xs text-muted-foreground/60">Not downloaded</span>
-                        )}
+
                         <ChevronRight className="h-4 w-4 text-muted-foreground/40 group-hover:text-muted-foreground transition-colors" />
                       </div>
                     </button>
@@ -564,25 +682,12 @@ export function ModelManagement() {
                       Loaded
                     </Badge>
                   )}
-                  {freshSelectedModel.downloaded && !freshSelectedModel.loaded && (
-                    <Badge variant="secondary" className="text-xs">
-                      <CircleCheck className="h-3 w-3 mr-1" />
-                      Downloaded
-                    </Badge>
-                  )}
                   {selectedState?.hasError && (
                     <Badge variant="destructive" className="text-xs">
                       <CircleX className="h-3 w-3 mr-1" />
                       Error
                     </Badge>
                   )}
-                  {!freshSelectedModel.downloaded &&
-                    !selectedState?.isDownloading &&
-                    !selectedState?.hasError && (
-                      <Badge variant="outline" className="text-xs text-muted-foreground">
-                        Not downloaded
-                      </Badge>
-                    )}
                 </div>
 
                 {/* HuggingFace model card info */}
@@ -593,26 +698,15 @@ export function ModelManagement() {
                   </div>
                 )}
 
+                {/* Description */}
+                {MODEL_DESCRIPTIONS[freshSelectedModel.model_name] && (
+                  <p className="text-xs text-muted-foreground leading-relaxed">
+                    {MODEL_DESCRIPTIONS[freshSelectedModel.model_name]}
+                  </p>
+                )}
+
                 {hfModelInfo && (
                   <div className="space-y-3">
-                    {/* Stats row */}
-                    <div className="flex items-center gap-4 text-xs text-muted-foreground">
-                      <span className="flex items-center gap-1" title="Downloads">
-                        <Download className="h-3.5 w-3.5" />
-                        {formatDownloads(hfModelInfo.downloads)}
-                      </span>
-                      <span className="flex items-center gap-1" title="Likes">
-                        <Heart className="h-3.5 w-3.5" />
-                        {formatDownloads(hfModelInfo.likes)}
-                      </span>
-                      {license && (
-                        <span className="flex items-center gap-1" title="License">
-                          <Scale className="h-3.5 w-3.5" />
-                          {formatLicense(license)}
-                        </span>
-                      )}
-                    </div>
-
                     {/* Pipeline tag + author */}
                     <div className="flex flex-wrap gap-1.5">
                       {hfModelInfo.pipeline_tag && (
@@ -632,6 +726,24 @@ export function ModelManagement() {
                       )}
                     </div>
 
+                    {/* Stats row */}
+                    <div className="flex items-center gap-4 text-xs text-muted-foreground">
+                      <span className="flex items-center gap-1" title="Downloads">
+                        <Download className="h-3.5 w-3.5" />
+                        {formatDownloads(hfModelInfo.downloads)}
+                      </span>
+                      <span className="flex items-center gap-1" title="Likes">
+                        <Heart className="h-3.5 w-3.5" />
+                        {formatDownloads(hfModelInfo.likes)}
+                      </span>
+                      {license && (
+                        <span className="flex items-center gap-1" title="License">
+                          <Scale className="h-3.5 w-3.5" />
+                          {formatLicense(license)}
+                        </span>
+                      )}
+                    </div>
+
                     {/* Languages */}
                     {hfModelInfo.cardData?.language && hfModelInfo.cardData.language.length > 0 && (
                       <div>
@@ -647,8 +759,8 @@ export function ModelManagement() {
 
                 {/* Disk size */}
                 {freshSelectedModel.downloaded && freshSelectedModel.size_mb && (
-                  <div className="flex items-center gap-2 text-sm text-muted-foreground">
-                    <HardDrive className="h-4 w-4" />
+                  <div className="flex items-center gap-2 text-xs text-muted-foreground">
+                    <HardDrive className="h-3.5 w-3.5" />
                     <span>{formatSize(freshSelectedModel.size_mb)} on disk</span>
                   </div>
                 )}
@@ -661,7 +773,7 @@ export function ModelManagement() {
                 )}
 
                 {/* Actions */}
-                <div className="flex items-center gap-2 pt-2 border-t">
+                <div className="flex items-center gap-2 pt-2">
                   {selectedState?.hasError ? (
                     <>
                       <Button
@@ -815,6 +927,126 @@ export function ModelManagement() {
           </AlertDialogFooter>
         </AlertDialogContent>
       </AlertDialog>
+
+      {/* Migration confirmation dialog */}
+      <AlertDialog
+        open={!!pendingMigrateDir}
+        onOpenChange={(open) => !open && setPendingMigrateDir(null)}
+      >
+        <AlertDialogContent>
+          <AlertDialogHeader>
+            <AlertDialogTitle>Move models to new location?</AlertDialogTitle>
+            <AlertDialogDescription>
+              The server will shut down while models are being moved to the new folder. It will
+              restart automatically once the migration is complete.
+            </AlertDialogDescription>
+          </AlertDialogHeader>
+          <div
+            className="text-xs font-mono text-muted-foreground bg-muted/50 rounded px-3 py-2 truncate"
+            title={pendingMigrateDir ?? ''}
+          >
+            {pendingMigrateDir}
+          </div>
+          <AlertDialogFooter>
+            <AlertDialogCancel>Cancel</AlertDialogCancel>
+            <AlertDialogAction
+              onClick={async () => {
+                if (!pendingMigrateDir) return;
+                const newDir = pendingMigrateDir;
+                setPendingMigrateDir(null);
+                setMigrating(true);
+                setMigrationProgress({
+                  current: 0,
+                  total: 0,
+                  progress: 0,
+                  status: 'downloading',
+                  filename: 'Preparing...',
+                });
+                try {
+                  // Start the migration (background task)
+                  await apiClient.migrateModels(newDir);
+
+                  // Connect to SSE for progress
+                  await new Promise<void>((resolve, reject) => {
+                    const es = new EventSource(apiClient.getMigrationProgressUrl());
+                    es.onmessage = (event) => {
+                      try {
+                        const data = JSON.parse(event.data);
+                        setMigrationProgress(data);
+                        if (data.status === 'complete') {
+                          es.close();
+                          resolve();
+                        } else if (data.status === 'error') {
+                          es.close();
+                          reject(new Error(data.error || 'Migration failed'));
+                        }
+                      } catch {
+                        /* ignore parse errors */
+                      }
+                    };
+                    es.onerror = () => {
+                      es.close();
+                      reject(new Error('Lost connection during migration'));
+                    };
+                  });
+
+                  setCustomModelsDir(newDir);
+                  setMigrationProgress({
+                    current: 1,
+                    total: 1,
+                    progress: 100,
+                    status: 'complete',
+                    filename: 'Restarting server...',
+                  });
+                  await platform.lifecycle.restartServer(newDir);
+                  queryClient.invalidateQueries();
+                  toast({ title: 'Models moved successfully' });
+                } catch (e) {
+                  toast({
+                    title: 'Migration failed',
+                    description: e instanceof Error ? e.message : 'Failed to migrate models',
+                    variant: 'destructive',
+                  });
+                } finally {
+                  setMigrating(false);
+                  setMigrationProgress(null);
+                }
+              }}
+            >
+              Move Models
+            </AlertDialogAction>
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      </AlertDialog>
+
+      {/* Migration progress overlay */}
+      {migrating && migrationProgress && (
+        <div className="fixed inset-0 z-50 bg-background/95 backdrop-blur-sm flex items-center justify-center">
+          <div className="w-full max-w-md px-8 space-y-6 text-center">
+            <div className="space-y-2">
+              <Loader2 className="h-8 w-8 animate-spin mx-auto text-muted-foreground" />
+              <h2 className="text-lg font-semibold">Moving models</h2>
+              <p className="text-sm text-muted-foreground">
+                {migrationProgress.status === 'complete'
+                  ? 'Restarting server...'
+                  : 'The server is offline while models are being moved.'}
+              </p>
+            </div>
+            {migrationProgress.total > 0 && (
+              <div className="space-y-2">
+                <Progress value={migrationProgress.progress} className="h-2" />
+                <div className="flex justify-between text-xs text-muted-foreground">
+                  <span className="truncate max-w-[60%]">{migrationProgress.filename}</span>
+                  <span>
+                    {formatBytes(migrationProgress.current)} /{' '}
+                    {formatBytes(migrationProgress.total)}
+                  </span>
+                </div>
+              </div>
+            )}
+          </div>
+        </div>
+      )}
     </div>
   );
 }

app/src/components/ServerSettings/ServerStatus.tsx

@@ -3,18 +3,13 @@ import { Badge } from '@/components/ui/badge';
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
 import { useServerHealth } from '@/lib/hooks/useServer';
 import { useServerStore } from '@/stores/serverStore';
-import { ModelProgress } from './ModelProgress';
 
 export function ServerStatus() {
   const { data: health, isLoading, error } = useServerHealth();
   const serverUrl = useServerStore((state) => state.serverUrl);
 
   return (
-    <Card
-      role="region"
-      aria-label="Server Status"
-      tabIndex={0}
-    >
+    <Card role="region" aria-label="Server Status" tabIndex={0}>
       <CardHeader>
         <CardTitle>Server Status</CardTitle>
       </CardHeader>
@@ -24,16 +19,6 @@ export function ServerStatus() {
           <div className="font-mono text-sm">{serverUrl}</div>
         </div>
 
-        {/* Model download progress */}
-        <div className="space-y-2">
-          <ModelProgress modelName="qwen-tts-1.7B" displayName="Qwen TTS 1.7B" />
-          <ModelProgress modelName="qwen-tts-0.6B" displayName="Qwen TTS 0.6B" />
-          <ModelProgress modelName="whisper-base" displayName="Whisper Base" />
-          <ModelProgress modelName="whisper-small" displayName="Whisper Small" />
-          <ModelProgress modelName="whisper-medium" displayName="Whisper Medium" />
-          <ModelProgress modelName="whisper-large" displayName="Whisper Large" />
-        </div>
-
         {isLoading ? (
           <div className="flex items-center gap-2">
             <Loader2 className="h-4 w-4 animate-spin" />

app/src/components/ServerSettings/UpdateStatus.tsx

@@ -11,6 +11,7 @@ export function UpdateStatus() {
   const platform = usePlatform();
   const { status, checkForUpdates, downloadAndInstall, restartAndInstall } = useAutoUpdater(false);
   const [currentVersion, setCurrentVersion] = useState<string>('');
+  const isDev = !import.meta.env?.PROD;
 
   useEffect(() => {
     platform.metadata
@@ -20,11 +21,7 @@ export function UpdateStatus() {
   }, [platform]);
 
   return (
-    <Card
-      role="region"
-      aria-label="App Updates"
-      tabIndex={0}
-    >
+    <Card role="region" aria-label="App Updates" tabIndex={0}>
       <CardHeader>
         <CardTitle>App Updates</CardTitle>
       </CardHeader>
@@ -32,97 +29,110 @@ export function UpdateStatus() {
         <div className="flex items-center justify-between">
           <div className="space-y-1">
             <div className="text-sm font-medium">Current Version</div>
-            <div className="text-sm text-muted-foreground">v{currentVersion}</div>
+            <div className="text-sm text-muted-foreground">
+              v{currentVersion}
+              {isDev ? ' (dev)' : ''}
+            </div>
           </div>
-          <Button
-            onClick={checkForUpdates}
-            disabled={status.checking || status.downloading || status.readyToInstall}
-            variant="outline"
-            size="sm"
-          >
-            <RefreshCw className={`h-4 w-4 mr-2 ${status.checking ? 'animate-spin' : ''}`} />
-            Check for Updates
-          </Button>
+          {!isDev && (
+            <Button
+              onClick={checkForUpdates}
+              disabled={status.checking || status.downloading || status.readyToInstall}
+              variant="outline"
+              size="sm"
+            >
+              <RefreshCw className={`h-4 w-4 mr-2 ${status.checking ? 'animate-spin' : ''}`} />
+              Check for Updates
+            </Button>
+          )}
         </div>
 
-        {status.checking && (
-          <div className="flex items-center gap-2 text-sm text-muted-foreground">
-            <RefreshCw className="h-4 w-4 animate-spin" />
-            Checking for updates...
+        {isDev ? (
+          <div className="text-sm text-muted-foreground">
+            Auto-updates are disabled in development mode.
           </div>
-        )}
-
-        {status.error && (
-          <div className="flex items-center gap-2 text-sm text-destructive">
-            <AlertCircle className="h-4 w-4" />
-            {status.error}
-          </div>
-        )}
-
-        {status.available && !status.downloading && !status.readyToInstall && (
-          <div className="space-y-3 p-4 border rounded-lg bg-primary/5">
-            <div className="flex items-center justify-between">
-              <div>
-                <div className="font-semibold">Update Available</div>
-                <div className="text-sm text-muted-foreground">Version {status.version}</div>
+        ) : (
+          <>
+            {status.checking && (
+              <div className="flex items-center gap-2 text-sm text-muted-foreground">
+                <RefreshCw className="h-4 w-4 animate-spin" />
+                Checking for updates...
               </div>
-              <Badge>New</Badge>
-            </div>
-            <Button onClick={downloadAndInstall} className="w-full" size="sm">
-              <Download className="h-4 w-4 mr-2" />
-              Download Update
-            </Button>
-          </div>
-        )}
+            )}
 
-        {status.downloading && (
-          <div className="space-y-2">
-            <div className="flex items-center justify-between text-sm">
-              <div className="flex items-center gap-2">
-                <Download className="h-4 w-4" />
-                Downloading update...
+            {status.error && (
+              <div className="flex items-center gap-2 text-sm text-destructive">
+                <AlertCircle className="h-4 w-4" />
+                {status.error}
               </div>
-              {status.downloadProgress !== undefined && (
-                <span className="text-muted-foreground">{status.downloadProgress}%</span>
-              )}
-            </div>
-            <Progress value={status.downloadProgress} />
-            {status.downloadedBytes !== undefined &&
-              status.totalBytes !== undefined &&
-              status.totalBytes > 0 && (
-                <div className="text-xs text-muted-foreground">
-                  {(status.downloadedBytes / 1024 / 1024).toFixed(1)} MB /{' '}
-                  {(status.totalBytes / 1024 / 1024).toFixed(1)} MB
+            )}
+
+            {status.available && !status.downloading && !status.readyToInstall && (
+              <div className="space-y-3 p-4 border rounded-lg bg-primary/5">
+                <div className="flex items-center justify-between">
+                  <div>
+                    <div className="font-semibold">Update Available</div>
+                    <div className="text-sm text-muted-foreground">Version {status.version}</div>
+                  </div>
+                  <Badge>New</Badge>
                 </div>
-              )}
-          </div>
-        )}
+                <Button onClick={downloadAndInstall} className="w-full" size="sm">
+                  <Download className="h-4 w-4 mr-2" />
+                  Download Update
+                </Button>
+              </div>
+            )}
 
-        {status.readyToInstall && (
-          <div className="space-y-3 p-4 border rounded-lg bg-accent/30 border-accent/50">
-            <div className="flex items-center gap-2">
-              <div>
-                <div className="font-semibold">Update Ready to Install</div>
+            {status.downloading && (
+              <div className="space-y-2">
+                <div className="flex items-center justify-between text-sm">
+                  <div className="flex items-center gap-2">
+                    <Download className="h-4 w-4" />
+                    Downloading update...
+                  </div>
+                  {status.downloadProgress !== undefined && (
+                    <span className="text-muted-foreground">{status.downloadProgress}%</span>
+                  )}
+                </div>
+                <Progress value={status.downloadProgress} />
+                {status.downloadedBytes !== undefined &&
+                  status.totalBytes !== undefined &&
+                  status.totalBytes > 0 && (
+                    <div className="text-xs text-muted-foreground">
+                      {(status.downloadedBytes / 1024 / 1024).toFixed(1)} MB /{' '}
+                      {(status.totalBytes / 1024 / 1024).toFixed(1)} MB
+                    </div>
+                  )}
+              </div>
+            )}
+
+            {status.readyToInstall && (
+              <div className="space-y-3 p-4 border rounded-lg bg-accent/30 border-accent/50">
+                <div className="flex items-center gap-2">
+                  <div>
+                    <div className="font-semibold">Update Ready to Install</div>
+                    <div className="text-sm text-muted-foreground">
+                      Version {status.version} has been downloaded
+                    </div>
+                  </div>
+                </div>
                 <div className="text-sm text-muted-foreground">
-                  Version {status.version} has been downloaded
+                  The app needs to restart to complete the installation. You can do this now or
+                  later at your convenience.
                 </div>
+                <Button onClick={restartAndInstall} className="w-full" size="sm">
+                  <RefreshCw className="h-4 w-4 mr-2" />
+                  Restart Now
+                </Button>
               </div>
-            </div>
-            <div className="text-sm text-muted-foreground">
-              The app needs to restart to complete the installation. You can do this now or later at
-              your convenience.
-            </div>
-            <Button onClick={restartAndInstall} className="w-full" size="sm">
-              <RefreshCw className="h-4 w-4 mr-2" />
-              Restart Now
-            </Button>
-          </div>
-        )}
+            )}
 
-        {!status.available && !status.checking && !status.error && status.checking === false && (
-          <div className="flex items-center gap-2 text-sm text-muted-foreground">
-            You're up to date
-          </div>
+            {!status.available && !status.checking && !status.error && (
+              <div className="flex items-center gap-2 text-sm text-muted-foreground">
+                You're up to date
+              </div>
+            )}
+          </>
         )}
       </CardContent>
     </Card>

app/src/components/ServerTab/ServerTab.tsx

@@ -1,19 +1,25 @@
 import { ConnectionForm } from '@/components/ServerSettings/ConnectionForm';
+import { GenerationSettings } from '@/components/ServerSettings/GenerationSettings';
 import { GpuAcceleration } from '@/components/ServerSettings/GpuAcceleration';
-import { ServerStatus } from '@/components/ServerSettings/ServerStatus';
 import { UpdateStatus } from '@/components/ServerSettings/UpdateStatus';
+import { BOTTOM_SAFE_AREA_PADDING } from '@/lib/constants/ui';
+import { cn } from '@/lib/utils/cn';
 import { usePlatform } from '@/platform/PlatformContext';
+import { usePlayerStore } from '@/stores/playerStore';
 
 export function ServerTab() {
   const platform = usePlatform();
+  const isPlayerVisible = !!usePlayerStore((state) => state.audioUrl);
   return (
-    <div className="space-y-4 overflow-y-auto flex flex-col">
+    <div
+      className={cn('overflow-y-auto flex flex-col', isPlayerVisible && BOTTOM_SAFE_AREA_PADDING)}
+    >
       <div className="grid gap-4 md:grid-cols-2">
         <ConnectionForm />
-        <ServerStatus />
+        <GenerationSettings />
+        {platform.metadata.isTauri && <GpuAcceleration />}
+        {platform.metadata.isTauri && <UpdateStatus />}
       </div>
-      {platform.metadata.isTauri && <GpuAcceleration />}
-      {platform.metadata.isTauri && <UpdateStatus />}
       <div className="py-8 text-center text-sm text-muted-foreground">
         Created by{' '}
         <a

app/src/components/Sidebar.tsx

@@ -1,9 +1,9 @@
 import { Link, useMatchRoute } from '@tanstack/react-router';
-import { Box, BookOpen, Loader2, Mic, Server, Speaker, Volume2 } from 'lucide-react';
+import { AudioLines, Box, Mic, Server, Speaker, Volume2, Wand2 } from 'lucide-react';
 import voiceboxLogo from '@/assets/voicebox-logo.png';
 import { cn } from '@/lib/utils/cn';
-import { useGenerationStore } from '@/stores/generationStore';
 import { usePlayerStore } from '@/stores/playerStore';
+import { version } from '../../package.json';
 
 interface SidebarProps {
   isMacOS?: boolean;
@@ -11,18 +11,17 @@ interface SidebarProps {
 
 const tabs = [
   { id: 'main', path: '/', icon: Volume2, label: 'Generate' },
-  { id: 'stories', path: '/stories', icon: BookOpen, label: 'Stories' },
+  { id: 'stories', path: '/stories', icon: AudioLines, label: 'Stories' },
   { id: 'voices', path: '/voices', icon: Mic, label: 'Voices' },
+  { id: 'effects', path: '/effects', icon: Wand2, label: 'Effects' },
   { id: 'audio', path: '/audio', icon: Speaker, label: 'Audio' },
   { id: 'models', path: '/models', icon: Box, label: 'Models' },
   { id: 'server', path: '/server', icon: Server, label: 'Server' },
 ];
 
 export function Sidebar({ isMacOS }: SidebarProps) {
-  const isGenerating = useGenerationStore((state) => state.isGenerating);
-  const audioUrl = usePlayerStore((state) => state.audioUrl);
-  const isPlayerVisible = !!audioUrl;
   const matchRoute = useMatchRoute();
+  const isPlayerOpen = !!usePlayerStore((s) => s.audioUrl);
 
   return (
     <div
@@ -33,51 +32,64 @@ export function Sidebar({ isMacOS }: SidebarProps) {
     >
       {/* Logo */}
       <div className="mb-2">
-        <img src={voiceboxLogo} alt="Voicebox" className="w-12 h-12 object-contain" />
+        <img
+          src={voiceboxLogo}
+          alt="Voicebox"
+          className="w-12 h-12 object-contain"
+          style={{
+            filter:
+              'drop-shadow(0 0 6px hsl(var(--accent) / 0.5)) drop-shadow(0 0 14px hsl(var(--accent) / 0.35)) drop-shadow(0 0 28px hsl(var(--accent) / 0.2))',
+          }}
+        />
       </div>
 
       {/* Navigation Buttons */}
       <div className="flex flex-col gap-3">
-        {tabs.map((tab) => {
+        {tabs.map((tab, index) => {
           const Icon = tab.icon;
           // For index route, use exact match; for others, use default matching
           const isActive =
-            tab.path === '/'
-              ? matchRoute({ to: '/', exact: true })
-              : matchRoute({ to: tab.path });
+            tab.path === '/' ? matchRoute({ to: '/', exact: true }) : matchRoute({ to: tab.path });
+
+          // Accent fades as buttons get further from the logo
+          const accentOpacity = Math.max(0.08, 0.5 - index * 0.07);
 
           return (
             <Link
               key={tab.id}
               to={tab.path}
               className={cn(
-                'w-12 h-12 rounded-full flex items-center justify-center transition-all duration-200',
-                'hover:bg-muted/50',
-                isActive ? 'bg-muted/50 text-foreground shadow-lg' : 'text-muted-foreground',
+                'relative w-12 h-12 rounded-full flex items-center justify-center transition-all duration-200 overflow-hidden',
+                isActive
+                  ? 'bg-white/[0.07] text-foreground shadow-lg backdrop-blur-sm border border-white/[0.08]'
+                  : 'text-muted-foreground hover:bg-muted/50',
               )}
               title={tab.label}
               aria-label={tab.label}
             >
-              <Icon className="h-5 w-5" />
+              {isActive && (
+                <div
+                  className="absolute inset-0 rounded-full pointer-events-none"
+                  style={{
+                    maskImage: 'linear-gradient(to bottom, black, transparent 60%)',
+                    WebkitMaskImage: 'linear-gradient(to bottom, black, transparent 60%)',
+                    border: `1px solid hsl(var(--accent) / ${accentOpacity})`,
+                  }}
+                />
+              )}
+              <Icon className="h-5 w-5 relative z-10" />
             </Link>
           );
         })}
       </div>
 
-      {/* Spacer to push loader to bottom */}
-      <div className="flex-1" />
-
-      {/* Generation Loader */}
-      {isGenerating && (
-        <div
-          className={cn(
-            'w-full flex items-center justify-center transition-all duration-200',
-            isPlayerVisible ? 'mb-[120px]' : 'mb-0',
-          )}
-        >
-          <Loader2 className="h-6 w-6 text-accent animate-spin" />
-        </div>
-      )}
+      {/* Version */}
+      <div
+        className="mt-auto text-[10px] text-muted-foreground/50 transition-all duration-300"
+        style={{ paddingBottom: isPlayerOpen ? '7rem' : undefined }}
+      >
+        v{version}
+      </div>
     </div>
   );
 }

app/src/components/StoriesTab/StoryContent.tsx

@@ -13,8 +13,11 @@ import {
   sortableKeyboardCoordinates,
   verticalListSortingStrategy,
 } from '@dnd-kit/sortable';
+import { Link } from '@tanstack/react-router';
+import { AnimatePresence, motion } from 'framer-motion';
 import { Download, Plus } from 'lucide-react';
 import { useEffect, useMemo, useRef, useState } from 'react';
+import Loader from 'react-loaders';
 import { Button } from '@/components/ui/button';
 import { Input } from '@/components/ui/input';
 import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover';
@@ -28,6 +31,7 @@ import {
   useStory,
 } from '@/lib/hooks/useStories';
 import { useStoryPlayback } from '@/lib/hooks/useStoryPlayback';
+import { useGenerationStore } from '@/stores/generationStore';
 import { useStoryStore } from '@/stores/storyStore';
 import { SortableStoryChatItem } from './StoryChatItem';
 
@@ -40,6 +44,7 @@ export function StoryContent() {
   const addStoryItem = useAddStoryItem();
   const { toast } = useToast();
   const scrollRef = useRef<HTMLDivElement>(null);
+  const pendingCount = useGenerationStore((s) => s.pendingGenerationIds.size);
 
   // Add generation popover state
   const [searchQuery, setSearchQuery] = useState('');
@@ -53,9 +58,9 @@ export function StoryContent() {
     const query = searchQuery.toLowerCase();
     return historyData.items.filter(
       (gen) =>
+        gen.status === 'completed' &&
         !storyGenerationIds.has(gen.id) &&
-        (gen.text.toLowerCase().includes(query) ||
-          gen.profile_name.toLowerCase().includes(query)),
+        (gen.text.toLowerCase().includes(query) || gen.profile_name.toLowerCase().includes(query)),
     );
   }, [historyData, story, searchQuery]);
 
@@ -267,7 +272,31 @@ export function StoryContent() {
             <p className="text-sm text-muted-foreground mt-1">{story.description}</p>
           )}
         </div>
-        <div className="flex gap-2">
+        <div className="flex gap-2 items-center">
+          <AnimatePresence>
+            {pendingCount > 0 && (
+              <motion.div
+                initial={{ opacity: 0, scale: 0.9, width: 0 }}
+                animate={{ opacity: 1, scale: 1, width: 'auto' }}
+                exit={{ opacity: 0, scale: 0.9, width: 0 }}
+                transition={{ duration: 0.2 }}
+              >
+                <Link
+                  to="/"
+                  className="flex items-center gap-2 h-8 pl-1.5 pr-3 rounded-full bg-card border border-border hover:bg-muted/50 transition-all duration-200 cursor-pointer"
+                >
+                  <div className="shrink-0 w-10 h-5 overflow-hidden flex items-center justify-center">
+                    <div className="scale-[0.45]">
+                      <Loader type="line-scale" active />
+                    </div>
+                  </div>
+                  <span className="text-xs text-muted-foreground whitespace-nowrap">
+                    Generating {pendingCount} {pendingCount === 1 ? 'audio' : 'audios'}
+                  </span>
+                </Link>
+              </motion.div>
+            )}
+          </AnimatePresence>
           <Popover open={isAddOpen} onOpenChange={setIsAddOpen}>
             <PopoverTrigger asChild>
               <Button variant="outline" size="sm">
@@ -287,9 +316,7 @@ export function StoryContent() {
               <div className="max-h-60 overflow-y-auto">
                 {availableGenerations.length === 0 ? (
                   <div className="p-4 text-center text-sm text-muted-foreground">
-                    {searchQuery
-                      ? 'No matching generations found'
-                      : 'No available generations'}
+                    {searchQuery ? 'No matching generations found' : 'No available generations'}
                   </div>
                 ) : (
                   availableGenerations.map((gen) => (

app/src/components/StoriesTab/StoryList.tsx

@@ -1,5 +1,5 @@
-import { Plus, BookOpen, MoreHorizontal, Pencil, Trash2 } from 'lucide-react';
-import { useState } from 'react';
+import { BookOpen, MoreHorizontal, Pencil, Plus, Trash2 } from 'lucide-react';
+import { useEffect, useState } from 'react';
 import {
   AlertDialog,
   AlertDialogAction,
@@ -29,7 +29,13 @@ import { Input } from '@/components/ui/input';
 import { Label } from '@/components/ui/label';
 import { Textarea } from '@/components/ui/textarea';
 import { useToast } from '@/components/ui/use-toast';
-import { useStories, useCreateStory, useUpdateStory, useDeleteStory } from '@/lib/hooks/useStories';
+import {
+  useCreateStory,
+  useDeleteStory,
+  useStories,
+  useStory,
+  useUpdateStory,
+} from '@/lib/hooks/useStories';
 import { cn } from '@/lib/utils/cn';
 import { formatDate } from '@/lib/utils/format';
 import { useStoryStore } from '@/stores/storyStore';
@@ -38,6 +44,8 @@ export function StoryList() {
   const { data: stories, isLoading } = useStories();
   const selectedStoryId = useStoryStore((state) => state.selectedStoryId);
   const setSelectedStoryId = useStoryStore((state) => state.setSelectedStoryId);
+  const trackEditorHeight = useStoryStore((state) => state.trackEditorHeight);
+  const { data: selectedStory } = useStory(selectedStoryId);
   const createStory = useCreateStory();
   const updateStory = useUpdateStory();
   const deleteStory = useDeleteStory();
@@ -54,6 +62,13 @@ export function StoryList() {
   const [newStoryDescription, setNewStoryDescription] = useState('');
   const { toast } = useToast();
 
+  // Auto-select the first story when the list loads with no selection
+  useEffect(() => {
+    if (!selectedStoryId && stories && stories.length > 0) {
+      setSelectedStoryId(stories[0].id);
+    }
+  }, [selectedStoryId, stories, setSelectedStoryId]);
+
   const handleCreateStory = () => {
     if (!newStoryName.trim()) {
       toast({
@@ -170,20 +185,29 @@ export function StoryList() {
   }
 
   const storyList = stories || [];
+  const hasTrackEditor = selectedStoryId && selectedStory && selectedStory.items.length > 0;
 
   return (
-    <div className="flex flex-col h-full min-h-0">
-      {/* Header */}
-      <div className="flex items-center justify-between mb-4 px-1">
-        <h2 className="text-2xl font-bold">Stories</h2>
-        <Button onClick={() => setCreateDialogOpen(true)} size="sm">
-          <Plus className="mr-2 h-4 w-4" />
-          New Story
-        </Button>
+    <div className="h-full flex flex-col relative overflow-hidden">
+      {/* Scroll Mask */}
+      <div className="absolute top-0 left-0 right-0 h-16 bg-gradient-to-b from-background to-transparent z-10 pointer-events-none" />
+
+      {/* Fixed Header */}
+      <div className="absolute top-0 left-0 right-0 z-20">
+        <div className="flex items-center justify-between mb-4 px-1">
+          <h2 className="text-2xl font-bold">Stories</h2>
+          <Button onClick={() => setCreateDialogOpen(true)} size="sm">
+            <Plus className="mr-2 h-4 w-4" />
+            New Story
+          </Button>
+        </div>
       </div>
 
-      {/* Story List */}
-      <div className="flex-1 min-h-0 overflow-y-auto space-y-2">
+      {/* Scrollable Story List */}
+      <div
+        className="flex-1 overflow-y-auto pt-14 relative z-0"
+        style={{ paddingBottom: hasTrackEditor ? `${trackEditorHeight + 140}px` : '170px' }}
+      >
         {storyList.length === 0 ? (
           <div className="text-center py-12 px-5 border-2 border-dashed border-muted rounded-2xl text-muted-foreground">
             <BookOpen className="h-12 w-12 mx-auto mb-4 opacity-50" />
@@ -191,75 +215,68 @@ export function StoryList() {
             <p className="text-xs mt-2">Create your first story to get started</p>
           </div>
         ) : (
-          storyList.map((story) => (
-            <div
-              key={story.id}
-              role="button"
-              tabIndex={0}
-              className={cn(
-                'h-24 p-4 border rounded-2xl transition-colors group flex items-center cursor-pointer',
-                selectedStoryId === story.id && 'bg-muted border-primary',
-              )}
-              aria-label={
-                selectedStoryId === story.id
-                  ? `Story ${story.name}, ${story.item_count} ${story.item_count === 1 ? 'item' : 'items'}, ${formatDate(story.updated_at)}. Selected. Press Enter to select.`
-                  : `Story ${story.name}, ${story.item_count} ${story.item_count === 1 ? 'item' : 'items'}, ${formatDate(story.updated_at)}. Press Enter to select.`
-              }
-              aria-pressed={selectedStoryId === story.id}
-              onClick={() => setSelectedStoryId(story.id)}
-              onKeyDown={(e) => {
-                if (e.target !== e.currentTarget) return;
-                if (e.key === 'Enter' || e.key === ' ') {
-                  e.preventDefault();
-                  setSelectedStoryId(story.id);
-                }
-              }}
-            >
-              <div className="flex items-start justify-between gap-2 w-full min-w-0">
-                <div className="flex-1 min-w-0 text-left overflow-hidden">
-                  <h3 className="font-medium truncate">{story.name}</h3>
-                  {story.description && (
-                    <p className="text-sm text-muted-foreground mt-1 truncate">
-                      {story.description}
-                    </p>
-                  )}
-                  <div className="flex items-center gap-3 mt-2 text-xs text-muted-foreground">
-                    <span>
-                      {story.item_count} {story.item_count === 1 ? 'item' : 'items'}
-                    </span>
-                    <span>•</span>
-                    <span>{formatDate(story.updated_at)}</span>
+          <div className="space-y-0.5">
+            {storyList.map((story) => (
+              <div
+                key={story.id}
+                role="button"
+                tabIndex={0}
+                className={cn(
+                  'px-5 py-3 rounded-lg transition-colors group flex items-center cursor-pointer',
+                  selectedStoryId === story.id ? 'bg-muted' : 'hover:bg-muted/50',
+                )}
+                aria-label={`Story ${story.name}, ${story.item_count} ${story.item_count === 1 ? 'item' : 'items'}, ${formatDate(story.updated_at)}`}
+                aria-pressed={selectedStoryId === story.id}
+                onClick={() => setSelectedStoryId(story.id)}
+                onKeyDown={(e) => {
+                  if (e.target !== e.currentTarget) return;
+                  if (e.key === 'Enter' || e.key === ' ') {
+                    e.preventDefault();
+                    setSelectedStoryId(story.id);
+                  }
+                }}
+              >
+                <div className="flex items-start justify-between gap-2 w-full min-w-0">
+                  <div className="flex-1 min-w-0 text-left overflow-hidden">
+                    <h3 className="text-sm font-medium truncate">{story.name}</h3>
+                    <div className="flex items-center gap-2 mt-1 text-xs text-muted-foreground">
+                      <span>
+                        {story.item_count} {story.item_count === 1 ? 'item' : 'items'}
+                      </span>
+                      <span>·</span>
+                      <span>{formatDate(story.updated_at)}</span>
+                    </div>
                   </div>
+                  <DropdownMenu>
+                    <DropdownMenuTrigger asChild>
+                      <Button
+                        variant="ghost"
+                        size="icon"
+                        className="h-7 w-7 opacity-0 group-hover:opacity-100 transition-opacity"
+                        onClick={(e) => e.stopPropagation()}
+                        aria-label={`Actions for ${story.name}`}
+                      >
+                        <MoreHorizontal className="h-3.5 w-3.5" />
+                      </Button>
+                    </DropdownMenuTrigger>
+                    <DropdownMenuContent align="end">
+                      <DropdownMenuItem onClick={() => handleEditClick(story)}>
+                        <Pencil className="mr-2 h-4 w-4" />
+                        Edit
+                      </DropdownMenuItem>
+                      <DropdownMenuItem
+                        onClick={() => handleDeleteClick(story.id)}
+                        className="text-destructive focus:text-destructive"
+                      >
+                        <Trash2 className="mr-2 h-4 w-4" />
+                        Delete
+                      </DropdownMenuItem>
+                    </DropdownMenuContent>
+                  </DropdownMenu>
                 </div>
-                <DropdownMenu>
-                  <DropdownMenuTrigger asChild>
-                    <Button
-                      variant="ghost"
-                      size="icon"
-                      className="h-8 w-8 opacity-0 group-hover:opacity-100 transition-opacity"
-                      onClick={(e) => e.stopPropagation()}
-                      aria-label={`Actions for ${story.name}`}
-                    >
-                      <MoreHorizontal className="h-4 w-4" />
-                    </Button>
-                  </DropdownMenuTrigger>
-                  <DropdownMenuContent align="end">
-                    <DropdownMenuItem onClick={() => handleEditClick(story)}>
-                      <Pencil className="mr-2 h-4 w-4" />
-                      Edit
-                    </DropdownMenuItem>
-                    <DropdownMenuItem
-                      onClick={() => handleDeleteClick(story.id)}
-                      className="text-destructive focus:text-destructive"
-                    >
-                      <Trash2 className="mr-2 h-4 w-4" />
-                      Delete
-                    </DropdownMenuItem>
-                  </DropdownMenuContent>
-                </DropdownMenu>
               </div>
-            </div>
-          ))
+            ))}
+          </div>
         )}
       </div>
 

app/src/components/StoriesTab/StoryTrackEditor.tsx

@@ -1,5 +1,7 @@
 import {
+  Check,
   Copy,
+  GalleryVerticalEnd,
   GripHorizontal,
   Minus,
   Pause,
@@ -12,6 +14,12 @@ import {
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import WaveSurfer from 'wavesurfer.js';
 import { Button } from '@/components/ui/button';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from '@/components/ui/dropdown-menu';
 import { useToast } from '@/components/ui/use-toast';
 import { apiClient } from '@/lib/api/client';
 import type { StoryItemDetail } from '@/lib/api/types';
@@ -19,6 +27,7 @@ import {
   useDuplicateStoryItem,
   useMoveStoryItem,
   useRemoveStoryItem,
+  useSetStoryItemVersion,
   useSplitStoryItem,
   useTrimStoryItem,
 } from '@/lib/hooks/useStories';
@@ -28,12 +37,14 @@ import { useStoryStore } from '@/stores/storyStore';
 // Clip waveform component with trim support
 function ClipWaveform({
   generationId,
+  versionId,
   width,
   trimStartMs,
   trimEndMs,
   duration,
 }: {
   generationId: string;
+  versionId?: string;
   width: number;
   trimStartMs: number;
   trimEndMs: number;
@@ -79,7 +90,9 @@ function ClipWaveform({
 
     wavesurferRef.current = wavesurfer;
 
-    const audioUrl = apiClient.getAudioUrl(generationId);
+    const audioUrl = versionId
+      ? apiClient.getVersionAudioUrl(versionId)
+      : apiClient.getAudioUrl(generationId);
     wavesurfer.load(audioUrl).catch(() => {
       // Ignore load errors
     });
@@ -88,7 +101,7 @@ function ClipWaveform({
       wavesurfer.destroy();
       wavesurferRef.current = null;
     };
-  }, [generationId, fullWaveformWidth]);
+  }, [generationId, versionId, fullWaveformWidth]);
 
   return (
     <div className="w-full h-full opacity-60 overflow-hidden">
@@ -135,12 +148,57 @@ export function StoryTrackEditor({ storyId, items }: StoryTrackEditorProps) {
   const splitItem = useSplitStoryItem();
   const duplicateItem = useDuplicateStoryItem();
   const removeItem = useRemoveStoryItem();
+  const setItemVersion = useSetStoryItemVersion();
   const { toast } = useToast();
 
   // Selection state
   const selectedClipId = useStoryStore((state) => state.selectedClipId);
   const setSelectedClipId = useStoryStore((state) => state.setSelectedClipId);
 
+  // Selected clip item (for version picker)
+  const selectedItem = useMemo(
+    () => (selectedClipId ? items.find((i) => i.id === selectedClipId) : undefined),
+    [selectedClipId, items],
+  );
+  const selectedItemVersions = selectedItem?.versions;
+  const hasMultipleVersions = selectedItemVersions && selectedItemVersions.length > 1;
+
+  // Determine which version label is active for the selected clip
+  const activeVersionLabel = useMemo(() => {
+    if (!selectedItem || !selectedItemVersions) return null;
+    // If the item has a pinned version_id, find its label
+    if (selectedItem.version_id) {
+      const pinned = selectedItemVersions.find((v) => v.id === selectedItem.version_id);
+      return pinned?.label ?? null;
+    }
+    // Otherwise use the generation's default version
+    const defaultVersion = selectedItemVersions.find((v) => v.is_default);
+    return defaultVersion?.label ?? null;
+  }, [selectedItem, selectedItemVersions]);
+
+  const handleSetVersion = useCallback(
+    (versionId: string | null) => {
+      if (!selectedClipId) return;
+      setItemVersion.mutate(
+        {
+          storyId,
+          itemId: selectedClipId,
+          data: { version_id: versionId },
+        },
+        {
+          onError: (error) => {
+            toast({
+              title: 'Failed to set version',
+              description: error instanceof Error ? error.message : String(error),
+              variant: 'destructive',
+            });
+          },
+        },
+      );
+    },
+    [selectedClipId, storyId, setItemVersion, toast],
+  );
+
   // Trim state
   const [trimmingItem, setTrimmingItem] = useState<string | null>(null);
   const [trimSide, setTrimSide] = useState<'start' | 'end' | null>(null);
@@ -788,6 +846,49 @@ export function StoryTrackEditor({ storyId, items }: StoryTrackEditorProps) {
               >
                 <Trash2 className="h-4 w-4" />
               </Button>
+              {hasMultipleVersions && (
+                <>
+                  <div className="w-px h-4 bg-border mx-1" />
+                  <DropdownMenu>
+                    <DropdownMenuTrigger asChild>
+                      <Button
+                        variant="ghost"
+                        className="h-7 gap-1.5 px-2 text-xs"
+                        title="Change version/take"
+                      >
+                        <GalleryVerticalEnd className="h-3.5 w-3.5" />
+                        <span className="max-w-[80px] truncate">
+                          {activeVersionLabel ?? 'default'}
+                        </span>
+                      </Button>
+                    </DropdownMenuTrigger>
+                    <DropdownMenuContent align="center" className="min-w-[160px]">
+                      {selectedItemVersions.map((version) => {
+                        const isActive = selectedItem?.version_id
+                          ? version.id === selectedItem.version_id
+                          : version.is_default;
+                        return (
+                          <DropdownMenuItem
+                            key={version.id}
+                            onClick={() => handleSetVersion(version.id)}
+                            className="gap-2 text-xs"
+                          >
+                            <Check
+                              className={cn('h-3 w-3', isActive ? 'opacity-100' : 'opacity-0')}
+                            />
+                            <span className="truncate">{version.label}</span>
+                            {version.effects_chain && version.effects_chain.length > 0 && (
+                              <span className="text-muted-foreground ml-auto text-[10px]">
+                                {version.effects_chain.length} fx
+                              </span>
+                            )}
+                          </DropdownMenuItem>
+                        );
+                      })}
+                    </DropdownMenuContent>
+                  </DropdownMenu>
+                </>
+              )}
             </div>
           )}
 
@@ -958,6 +1059,7 @@ export function StoryTrackEditor({ storyId, items }: StoryTrackEditorProps) {
                       <div className="absolute inset-0 top-3">
                         <ClipWaveform
                           generationId={item.generation_id}
+                          versionId={item.version_id}
                           width={clipWidth}
                           trimStartMs={displayTrimStart}
                           trimEndMs={displayTrimEnd}

app/src/components/TitleBarDragRegion.tsx

@@ -1,8 +1,7 @@
+const isWindows = navigator.userAgent.includes('Windows');
+
 export function TitleBarDragRegion() {
-  return (
-    <div
-      data-tauri-drag-region
-      className="fixed top-0 left-0 right-0 h-12 z-[9999]"
-    />
-  );
+  if (isWindows) return null;
+
+  return <div data-tauri-drag-region className="fixed top-0 left-0 right-0 h-12 z-[9999]" />;
 }

app/src/components/VoiceProfiles/ProfileCard.tsx

@@ -1,4 +1,4 @@
-import { Download, Edit, Mic, Trash2 } from 'lucide-react';
+import { Download, Edit, Sparkles, Trash2 } from 'lucide-react';
 import { useState } from 'react';
 import { Badge } from '@/components/ui/badge';
 import { Button } from '@/components/ui/button';
@@ -15,7 +15,6 @@ import {
 import type { VoiceProfileResponse } from '@/lib/api/types';
 import { useDeleteProfile, useExportProfile } from '@/lib/hooks/useProfiles';
 import { cn } from '@/lib/utils/cn';
-import { useServerStore } from '@/stores/serverStore';
 import { useUIStore } from '@/stores/uiStore';
 
 interface ProfileCardProps {
@@ -24,19 +23,16 @@ interface ProfileCardProps {
 
 export function ProfileCard({ profile }: ProfileCardProps) {
   const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);
-  const [avatarError, setAvatarError] = useState(false);
+
   const deleteProfile = useDeleteProfile();
   const exportProfile = useExportProfile();
   const setEditingProfileId = useUIStore((state) => state.setEditingProfileId);
   const setProfileDialogOpen = useUIStore((state) => state.setProfileDialogOpen);
   const selectedProfileId = useUIStore((state) => state.selectedProfileId);
   const setSelectedProfileId = useUIStore((state) => state.setSelectedProfileId);
-  const serverUrl = useServerStore((state) => state.serverUrl);
 
   const isSelected = selectedProfileId === profile.id;
 
-  const avatarUrl = profile.avatar_path ? `${serverUrl}/profiles/${profile.id}/avatar` : null;
-
   const handleSelect = () => {
     setSelectedProfileId(isSelected ? null : profile.id);
   };
@@ -78,8 +74,8 @@ export function ProfileCard({ profile }: ProfileCardProps) {
     <>
       <Card
         className={cn(
-          'cursor-pointer hover:shadow-md transition-all flex flex-col',
-          isSelected && 'ring-2 ring-primary shadow-md',
+          'cursor-pointer hover:shadow-md transition-all flex flex-col h-[162px]',
+          isSelected && 'ring-2 ring-accent shadow-md',
         )}
         onClick={handleSelect}
         tabIndex={0}
@@ -89,22 +85,7 @@ export function ProfileCard({ profile }: ProfileCardProps) {
         onKeyDown={handleKeyDown}
       >
         <CardHeader className="p-3 pb-2">
-          <CardTitle className="flex items-center gap-1.5 text-base font-medium">
-            <div className="h-6 w-6 rounded-full bg-muted flex items-center justify-center shrink-0 overflow-hidden">
-              {avatarUrl && !avatarError ? (
-                <img
-                  src={avatarUrl}
-                  alt={`${profile.name} avatar`}
-                  className={cn(
-                    'h-full w-full object-cover transition-all duration-200',
-                    !isSelected && 'grayscale',
-                  )}
-                  onError={() => setAvatarError(true)}
-                />
-              ) : (
-                <Mic className="h-3.5 w-3.5 text-muted-foreground" />
-              )}
-            </div>
+          <CardTitle className="text-base font-medium">
             <span className="break-words">{profile.name}</span>
           </CardTitle>
         </CardHeader>
@@ -112,10 +93,13 @@ export function ProfileCard({ profile }: ProfileCardProps) {
           <p className="text-xs text-muted-foreground mb-1.5 line-clamp-2 leading-relaxed">
             {profile.description || 'No description'}
           </p>
-          <div className="mb-2">
+          <div className="mb-2 flex items-center gap-1.5">
             <Badge variant="outline" className="text-xs h-5 px-1.5 text-muted-foreground">
               {profile.language}
             </Badge>
+            {profile.effects_chain && profile.effects_chain.length > 0 && (
+              <Sparkles className="h-3.5 w-3.5 text-accent fill-accent" />
+            )}
           </div>
           <div className="flex gap-0.5 justify-end items-end mt-auto">
             <CircleButton

app/src/components/VoiceProfiles/ProfileForm.tsx

@@ -3,6 +3,7 @@ import { Edit2, Mic, Monitor, Upload, X } from 'lucide-react';
 import { useEffect, useRef, useState } from 'react';
 import { useForm } from 'react-hook-form';
 import * as z from 'zod';
+import { EffectsChainEditor } from '@/components/Effects/EffectsChainEditor';
 import { Button } from '@/components/ui/button';
 import {
   Dialog,
@@ -30,6 +31,8 @@ import {
 import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
 import { Textarea } from '@/components/ui/textarea';
 import { useToast } from '@/components/ui/use-toast';
+import { apiClient } from '@/lib/api/client';
+import type { EffectConfig } from '@/lib/api/types';
 import { LANGUAGE_CODES, LANGUAGE_OPTIONS, type LanguageCode } from '@/lib/constants/languages';
 import { useAudioPlayer } from '@/lib/hooks/useAudioPlayer';
 import { useAudioRecording } from '@/lib/hooks/useAudioRecording';
@@ -125,6 +128,8 @@ export function ProfileForm() {
   const { isPlaying, playPause, cleanup: cleanupAudio } = useAudioPlayer();
   const isCreating = !editingProfileId;
   const serverUrl = useServerStore((state) => state.serverUrl);
+  const [profileEffectsChain, setProfileEffectsChain] = useState<EffectConfig[]>([]);
+  const [effectsDirty, setEffectsDirty] = useState(false);
 
   const form = useForm<ProfileFormValues>({
     resolver: zodResolver(profileSchema),
@@ -280,6 +285,8 @@ export function ProfileForm() {
         referenceText: undefined,
         avatarFile: undefined,
       });
+      setProfileEffectsChain(editingProfile.effects_chain ?? []);
+      setEffectsDirty(false);
     } else if (profileFormDraft && open) {
       // Restore from draft when opening in create mode
       form.reset({
@@ -435,6 +442,24 @@ export function ProfileForm() {
           }
         }
 
+        // Save effects chain if changed
+        if (effectsDirty) {
+          try {
+            await apiClient.updateProfileEffects(
+              editingProfileId,
+              profileEffectsChain.length > 0 ? profileEffectsChain : null,
+            );
+          } catch (fxError) {
+            toast({
+              title: 'Effects update failed',
+              description:
+                fxError instanceof Error ? fxError.message : 'Failed to save effects chain',
+              variant: 'destructive',
+            });
+            return;
+          }
+        }
+
         toast({
           title: 'Voice updated',
           description: `"${data.name}" has been updated successfully.`,
@@ -898,6 +923,23 @@ export function ProfileForm() {
                       </FormItem>
                     )}
                   />
+
+                  {editingProfileId && (
+                    <div className="space-y-2">
+                      <FormLabel>Default Effects</FormLabel>
+                      <p className="text-xs text-muted-foreground">
+                        Effects applied automatically to all new generations with this voice.
+                      </p>
+                      <EffectsChainEditor
+                        value={profileEffectsChain}
+                        onChange={(chain) => {
+                          setProfileEffectsChain(chain);
+                          setEffectsDirty(true);
+                        }}
+                        compact
+                      />
+                    </div>
+                  )}
                 </div>
               </div>
 

app/src/components/VoiceProfiles/ProfileList.tsx

@@ -41,9 +41,11 @@ export function ProfileList() {
             </CardContent>
           </Card>
         ) : (
-          <div className="grid gap-4 grid-cols-3 auto-rows-auto p-1 pb-[150px]">
+          <div className="flex gap-4 overflow-x-auto p-1 pb-1 lg:grid lg:grid-cols-3 lg:auto-rows-auto lg:overflow-x-visible lg:pb-[150px]">
             {allProfiles.map((profile) => (
-              <ProfileCard key={profile.id} profile={profile} />
+              <div key={profile.id} className="shrink-0 w-[200px] lg:w-auto lg:shrink">
+                <ProfileCard profile={profile} />
+              </div>
             ))}
           </div>
         )}

app/src/components/VoicesTab/VoiceInspector.tsx

@@ -0,0 +1,340 @@
+import { zodResolver } from '@hookform/resolvers/zod';
+import { Edit2, Mic, X } from 'lucide-react';
+import { useEffect, useRef, useState } from 'react';
+import { useForm } from 'react-hook-form';
+import * as z from 'zod';
+import { EffectsChainEditor } from '@/components/Effects/EffectsChainEditor';
+import { Button } from '@/components/ui/button';
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from '@/components/ui/form';
+import { Input } from '@/components/ui/input';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select';
+import { Textarea } from '@/components/ui/textarea';
+import { useToast } from '@/components/ui/use-toast';
+import { SampleList } from '@/components/VoiceProfiles/SampleList';
+import { apiClient } from '@/lib/api/client';
+import type { EffectConfig } from '@/lib/api/types';
+import { LANGUAGE_CODES, LANGUAGE_OPTIONS, type LanguageCode } from '@/lib/constants/languages';
+import { BOTTOM_SAFE_AREA_PADDING } from '@/lib/constants/ui';
+import {
+  useDeleteAvatar,
+  useProfile,
+  useUpdateProfile,
+  useUploadAvatar,
+} from '@/lib/hooks/useProfiles';
+import { cn } from '@/lib/utils/cn';
+import { usePlayerStore } from '@/stores/playerStore';
+import { useServerStore } from '@/stores/serverStore';
+
+const profileSchema = z.object({
+  name: z.string().min(1, 'Name is required').max(100),
+  description: z.string().max(500).optional(),
+  language: z.enum(LANGUAGE_CODES as [LanguageCode, ...LanguageCode[]]),
+});
+
+type ProfileFormValues = z.infer<typeof profileSchema>;
+
+interface VoiceInspectorProps {
+  profileId: string;
+}
+
+export function VoiceInspector({ profileId }: VoiceInspectorProps) {
+  const { data: profile } = useProfile(profileId);
+  const audioUrl = usePlayerStore((state) => state.audioUrl);
+  const isPlayerVisible = !!audioUrl;
+  const updateProfile = useUpdateProfile();
+  const uploadAvatar = useUploadAvatar();
+  const deleteAvatar = useDeleteAvatar();
+  const serverUrl = useServerStore((state) => state.serverUrl);
+  const { toast } = useToast();
+
+  const [avatarPreview, setAvatarPreview] = useState<string | null>(null);
+  const [avatarError, setAvatarError] = useState(false);
+  const avatarInputRef = useRef<HTMLInputElement>(null);
+
+  const [effectsChain, setEffectsChain] = useState<EffectConfig[]>([]);
+  const [effectsDirty, setEffectsDirty] = useState(false);
+
+  const form = useForm<ProfileFormValues>({
+    resolver: zodResolver(profileSchema),
+    defaultValues: {
+      name: '',
+      description: '',
+      language: 'en',
+    },
+  });
+
+  // Populate form when profile loads
+  useEffect(() => {
+    if (profile) {
+      form.reset({
+        name: profile.name,
+        description: profile.description || '',
+        language: profile.language as LanguageCode,
+      });
+      setEffectsChain(profile.effects_chain ?? []);
+      setEffectsDirty(false);
+    }
+  }, [profile, form]);
+
+  // Avatar preview
+  useEffect(() => {
+    if (profile?.avatar_path) {
+      setAvatarPreview(`${serverUrl}/profiles/${profile.id}/avatar`);
+    } else {
+      setAvatarPreview(null);
+    }
+    setAvatarError(false);
+  }, [profile, serverUrl]);
+
+  function handleAvatarFileChange(e: React.ChangeEvent<HTMLInputElement>) {
+    const file = e.target.files?.[0];
+    if (!file) return;
+    if (!file.type.startsWith('image/')) {
+      toast({
+        title: 'Invalid file type',
+        description: 'Please select PNG, JPG, or WebP',
+        variant: 'destructive',
+      });
+      return;
+    }
+    if (file.size > 5 * 1024 * 1024) {
+      toast({
+        title: 'File too large',
+        description: 'Image must be less than 5MB',
+        variant: 'destructive',
+      });
+      return;
+    }
+    // Upload immediately
+    uploadAvatar.mutate(
+      { profileId, file },
+      {
+        onSuccess: () => {
+          setAvatarPreview(URL.createObjectURL(file));
+          toast({ title: 'Avatar updated' });
+        },
+        onError: (err) => {
+          toast({
+            title: 'Avatar upload failed',
+            description: err instanceof Error ? err.message : 'Unknown error',
+            variant: 'destructive',
+          });
+        },
+      },
+    );
+  }
+
+  async function handleRemoveAvatar() {
+    if (profile?.avatar_path) {
+      try {
+        await deleteAvatar.mutateAsync(profileId);
+        toast({ title: 'Avatar removed' });
+      } catch (err) {
+        toast({
+          title: 'Failed to remove avatar',
+          description: err instanceof Error ? err.message : 'Unknown error',
+          variant: 'destructive',
+        });
+      }
+    }
+    setAvatarPreview(null);
+    if (avatarInputRef.current) avatarInputRef.current.value = '';
+  }
+
+  async function onSubmit(data: ProfileFormValues) {
+    try {
+      await updateProfile.mutateAsync({
+        profileId,
+        data: {
+          name: data.name,
+          description: data.description,
+          language: data.language,
+        },
+      });
+
+      if (effectsDirty) {
+        try {
+          await apiClient.updateProfileEffects(
+            profileId,
+            effectsChain.length > 0 ? effectsChain : null,
+          );
+          setEffectsDirty(false);
+        } catch (fxError) {
+          toast({
+            title: 'Effects update failed',
+            description: fxError instanceof Error ? fxError.message : 'Failed to save effects',
+            variant: 'destructive',
+          });
+          return;
+        }
+      }
+
+      toast({ title: 'Voice updated', description: `"${data.name}" saved.` });
+    } catch (error) {
+      toast({
+        title: 'Error',
+        description: error instanceof Error ? error.message : 'Failed to save profile',
+        variant: 'destructive',
+      });
+    }
+  }
+
+  if (!profile) {
+    return (
+      <div className="flex items-center justify-center h-full text-muted-foreground text-sm">
+        Loading...
+      </div>
+    );
+  }
+
+  const isDirty = form.formState.isDirty || effectsDirty;
+
+  return (
+    <div className="h-full flex flex-col overflow-hidden">
+      <div className={cn('flex-1 overflow-y-auto', isPlayerVisible && BOTTOM_SAFE_AREA_PADDING)}>
+        <Form {...form}>
+          <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-0">
+            {/* Avatar */}
+            <div className="flex justify-center pt-5 pb-3">
+              <div className="relative group">
+                <div className="h-20 w-20 rounded-full bg-muted flex items-center justify-center shrink-0 overflow-hidden border-2 border-border">
+                  {avatarPreview && !avatarError ? (
+                    <img
+                      src={avatarPreview}
+                      alt={profile.name}
+                      className="h-full w-full object-cover"
+                      onError={() => setAvatarError(true)}
+                    />
+                  ) : (
+                    <Mic className="h-8 w-8 text-muted-foreground" />
+                  )}
+                </div>
+                <button
+                  type="button"
+                  onClick={() => avatarInputRef.current?.click()}
+                  className="absolute inset-0 rounded-full bg-accent/60 opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center cursor-pointer"
+                >
+                  <Edit2 className="h-5 w-5 text-accent-foreground" />
+                </button>
+                {avatarPreview && (
+                  <button
+                    type="button"
+                    onClick={handleRemoveAvatar}
+                    disabled={deleteAvatar.isPending}
+                    className="absolute bottom-0 right-0 h-5 w-5 rounded-full bg-background/60 backdrop-blur-sm text-muted-foreground flex items-center justify-center hover:bg-background/80 hover:text-foreground transition-colors shadow-sm border border-border/50"
+                  >
+                    <X className="h-3 w-3" />
+                  </button>
+                )}
+              </div>
+              <input
+                ref={avatarInputRef}
+                type="file"
+                accept="image/png,image/jpeg,image/webp"
+                onChange={handleAvatarFileChange}
+                className="hidden"
+              />
+            </div>
+
+            {/* Fields */}
+            <div className="space-y-3 px-5">
+              <FormField
+                control={form.control}
+                name="name"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>Name</FormLabel>
+                    <FormControl>
+                      <Input placeholder="My Voice" {...field} />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+
+              <FormField
+                control={form.control}
+                name="description"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>Description</FormLabel>
+                    <FormControl>
+                      <Textarea placeholder="Describe this voice..." rows={2} {...field} />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+
+              <FormField
+                control={form.control}
+                name="language"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>Language</FormLabel>
+                    <Select onValueChange={field.onChange} value={field.value}>
+                      <FormControl>
+                        <SelectTrigger>
+                          <SelectValue />
+                        </SelectTrigger>
+                      </FormControl>
+                      <SelectContent>
+                        {LANGUAGE_OPTIONS.map((lang) => (
+                          <SelectItem key={lang.value} value={lang.value}>
+                            {lang.label}
+                          </SelectItem>
+                        ))}
+                      </SelectContent>
+                    </Select>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+
+              {/* Effects */}
+              <div className="space-y-2">
+                <FormLabel>Default Effects</FormLabel>
+                <p className="text-xs text-muted-foreground">
+                  Applied automatically to new generations with this voice.
+                </p>
+                <EffectsChainEditor
+                  value={effectsChain}
+                  onChange={(chain) => {
+                    setEffectsChain(chain);
+                    setEffectsDirty(true);
+                  }}
+                  compact
+                />
+              </div>
+
+              {/* Save */}
+              {isDirty && (
+                <Button type="submit" className="w-full" disabled={updateProfile.isPending}>
+                  {updateProfile.isPending ? 'Saving...' : 'Save Changes'}
+                </Button>
+              )}
+            </div>
+
+            {/* Samples */}
+            <div className="px-5 pb-5">
+              <SampleList profileId={profileId} />
+            </div>
+          </form>
+        </Form>
+      </div>
+    </div>
+  );
+}

app/src/components/VoicesTab/VoicesTab.tsx

@@ -1,13 +1,9 @@
 import { useQuery, useQueryClient } from '@tanstack/react-query';
-import { Edit, MoreHorizontal, Plus, Trash2, Mic } from 'lucide-react';
-import { useMemo, useRef } from 'react';
+import { Mic, Plus, Search, Sparkles } from 'lucide-react';
+import { useEffect, useMemo, useRef, useState } from 'react';
 import { Button } from '@/components/ui/button';
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuTrigger,
-} from '@/components/ui/dropdown-menu';
+import { Input } from '@/components/ui/input';
+
 import { MultiSelect } from '@/components/ui/multi-select';
 import {
   Table,
@@ -21,33 +17,46 @@ import { ProfileForm } from '@/components/VoiceProfiles/ProfileForm';
 import { apiClient } from '@/lib/api/client';
 import type { VoiceProfileResponse } from '@/lib/api/types';
 import { BOTTOM_SAFE_AREA_PADDING } from '@/lib/constants/ui';
-import { useHistory } from '@/lib/hooks/useHistory';
-import { useDeleteProfile, useProfileSamples, useProfiles } from '@/lib/hooks/useProfiles';
+import { useProfiles } from '@/lib/hooks/useProfiles';
 import { cn } from '@/lib/utils/cn';
 import { usePlayerStore } from '@/stores/playerStore';
+import { useServerStore } from '@/stores/serverStore';
 import { useUIStore } from '@/stores/uiStore';
+import { VoiceInspector } from './VoiceInspector';
 
 export function VoicesTab() {
   const { data: profiles, isLoading } = useProfiles();
-  const { data: historyData } = useHistory({ limit: 1000 });
   const queryClient = useQueryClient();
   const setDialogOpen = useUIStore((state) => state.setProfileDialogOpen);
-  const setEditingProfileId = useUIStore((state) => state.setEditingProfileId);
-  const deleteProfile = useDeleteProfile();
+  const selectedVoiceId = useUIStore((state) => state.selectedVoiceId);
+  const setSelectedVoiceId = useUIStore((state) => state.setSelectedVoiceId);
   const scrollRef = useRef<HTMLDivElement>(null);
   const audioUrl = usePlayerStore((state) => state.audioUrl);
   const isPlayerVisible = !!audioUrl;
+  const [search, setSearch] = useState('');
 
-  // Get generation counts per profile
-  const generationCounts = useMemo(() => {
-    const counts: Record<string, number> = {};
-    if (historyData?.items) {
-      historyData.items.forEach((item) => {
-        counts[item.profile_id] = (counts[item.profile_id] || 0) + 1;
-      });
+  const filteredProfiles = useMemo(() => {
+    if (!profiles) return [];
+    if (!search.trim()) return profiles;
+    const q = search.toLowerCase();
+    return profiles.filter(
+      (p) =>
+        p.name.toLowerCase().includes(q) ||
+        p.description?.toLowerCase().includes(q) ||
+        p.language.toLowerCase().includes(q),
+    );
+  }, [profiles, search]);
+
+  // Auto-select first profile if none selected
+  useEffect(() => {
+    if (!selectedVoiceId && profiles && profiles.length > 0) {
+      setSelectedVoiceId(profiles[0].id);
     }
-    return counts;
-  }, [historyData]);
+    // Clear selection if selected profile was deleted
+    if (selectedVoiceId && profiles && !profiles.find((p) => p.id === selectedVoiceId)) {
+      setSelectedVoiceId(profiles.length > 0 ? profiles[0].id : null);
+    }
+  }, [profiles, selectedVoiceId, setSelectedVoiceId]);
 
   // Get channel assignments for each profile
   const { data: channelAssignments } = useQuery({
@@ -74,17 +83,6 @@ export function VoicesTab() {
     queryFn: () => apiClient.listChannels(),
   });
 
-  const handleEdit = (profileId: string) => {
-    setEditingProfileId(profileId);
-    setDialogOpen(true);
-  };
-
-  const handleProfileDelete = async (profileId: string) => {
-    if (await confirm('Are you sure you want to delete this profile?')) {
-      deleteProfile.mutate(profileId);
-    }
-  };
-
   const handleChannelChange = async (profileId: string, channelIds: string[]) => {
     try {
       await apiClient.setProfileChannels(profileId, channelIds);
@@ -103,56 +101,76 @@ export function VoicesTab() {
   }
 
   return (
-    <div className="h-full flex flex-col relative overflow-hidden">
-      {/* Scroll Mask - Always visible, behind content */}
-      <div className="absolute top-0 left-0 right-0 h-16 bg-gradient-to-b from-background to-transparent z-10 pointer-events-none" />
+    <div className="h-full flex gap-0 overflow-hidden -mx-8">
+      {/* Left: Table */}
+      <div className="flex-1 min-w-0 flex flex-col relative overflow-hidden">
+        {/* Scroll Mask */}
+        <div className="absolute top-0 left-0 right-0 h-16 bg-gradient-to-b from-background to-transparent z-10 pointer-events-none" />
 
-      {/* Fixed Header */}
-      <div className="absolute top-0 left-0 right-0 z-20">
-        <div className="flex items-center justify-between mb-6">
-          <h1 className="text-2xl font-bold">Voices</h1>
-          <Button onClick={() => setDialogOpen(true)}>
-            <Plus className="h-4 w-4 mr-2" />
-            New Voice
-          </Button>
+        {/* Fixed Header */}
+        <div className="absolute top-0 left-0 right-0 z-20 pl-8 pr-8">
+          <div className="flex items-center gap-3 mb-6">
+            <h1 className="text-2xl font-bold">Voices</h1>
+            <div className="flex-1" />
+            <div className="relative w-[240px]">
+              <Search className="absolute left-2.5 top-1/2 -translate-y-1/2 h-3.5 w-3.5 text-muted-foreground" />
+              <Input
+                placeholder="Search voices..."
+                value={search}
+                onChange={(e) => setSearch(e.target.value)}
+                className="h-10 pl-8 text-sm rounded-full focus-visible:ring-0 focus-visible:ring-offset-0"
+              />
+            </div>
+            <Button onClick={() => setDialogOpen(true)}>
+              <Plus className="h-4 w-4 mr-2" />
+              New Voice
+            </Button>
+          </div>
+        </div>
+
+        {/* Scrollable Content */}
+        <div
+          ref={scrollRef}
+          className={cn(
+            'flex-1 overflow-y-auto overflow-x-hidden pt-16 relative z-0',
+            isPlayerVisible && BOTTOM_SAFE_AREA_PADDING,
+          )}
+        >
+          <Table className="table-fixed [&_td:first-child]:pl-8 [&_th:first-child]:pl-8">
+            <TableHeader>
+              <TableRow>
+                <TableHead className="w-[30%]">Name</TableHead>
+                <TableHead className="w-[10%]">Language</TableHead>
+                <TableHead className="w-[10%]">Generations</TableHead>
+                <TableHead className="w-[8%]">Samples</TableHead>
+                <TableHead className="w-[8%]">Effects</TableHead>
+                <TableHead className="w-[24%]">Channels</TableHead>
+                <TableHead className="w-6"></TableHead>
+              </TableRow>
+            </TableHeader>
+            <TableBody>
+              {filteredProfiles.map((profile) => (
+                <VoiceRow
+                  key={profile.id}
+                  profile={profile}
+                  isSelected={selectedVoiceId === profile.id}
+                  onSelect={() => setSelectedVoiceId(profile.id)}
+                  channelIds={channelAssignments?.[profile.id] || []}
+                  channels={channels || []}
+                  onChannelChange={(channelIds) => handleChannelChange(profile.id, channelIds)}
+                />
+              ))}
+            </TableBody>
+          </Table>
         </div>
       </div>
 
-      {/* Scrollable Content */}
-      <div
-        ref={scrollRef}
-        className={cn(
-          'flex-1 overflow-y-auto pt-16 relative z-0',
-          isPlayerVisible && BOTTOM_SAFE_AREA_PADDING,
-        )}
-      >
-        <Table>
-          <TableHeader>
-            <TableRow>
-              <TableHead>Name</TableHead>
-              <TableHead>Language</TableHead>
-              <TableHead>Generations</TableHead>
-              <TableHead>Samples</TableHead>
-              <TableHead>Channels</TableHead>
-              <TableHead className="w-[50px]"></TableHead>
-            </TableRow>
-          </TableHeader>
-          <TableBody>
-            {profiles?.map((profile) => (
-              <VoiceRow
-                key={profile.id}
-                profile={profile}
-                generationCount={generationCounts[profile.id] || 0}
-                channelIds={channelAssignments?.[profile.id] || []}
-                channels={channels || []}
-                onChannelChange={(channelIds) => handleChannelChange(profile.id, channelIds)}
-                onEdit={() => handleEdit(profile.id)}
-                onDelete={() => handleProfileDelete(profile.id)}
-              />
-            ))}
-          </TableBody>
-        </Table>
-      </div>
+      {/* Right: Inspector */}
+      {selectedVoiceId && (
+        <div className="w-[340px] shrink-0 border-l border-t rounded-tl-xl bg-muted/30">
+          <VoiceInspector key={selectedVoiceId} profileId={selectedVoiceId} />
+        </div>
+      )}
 
       <ProfileForm />
     </div>
@@ -161,42 +179,46 @@ export function VoicesTab() {
 
 interface VoiceRowProps {
   profile: VoiceProfileResponse;
-  generationCount: number;
+  isSelected: boolean;
+  onSelect: () => void;
   channelIds: string[];
   channels: Array<{ id: string; name: string; is_default: boolean }>;
   onChannelChange: (channelIds: string[]) => void;
-  onEdit: () => void;
-  onDelete: () => void;
 }
 
 function VoiceRow({
   profile,
-  generationCount,
+  isSelected,
+  onSelect,
   channelIds,
   channels,
   onChannelChange,
-  onEdit,
-  onDelete,
 }: VoiceRowProps) {
-  const { data: samples } = useProfileSamples(profile.id);
-  const sampleCount = samples?.length || 0;
+  const serverUrl = useServerStore((state) => state.serverUrl);
+  const [avatarError, setAvatarError] = useState(false);
+  const avatarUrl = profile.avatar_path ? `${serverUrl}/profiles/${profile.id}/avatar` : null;
 
-  const rowLabel = `${profile.name}, ${profile.language}, ${generationCount} generations, ${sampleCount} samples. Press Enter to edit.`;
+  const enabledEffects = profile.effects_chain?.filter((e) => e.enabled) ?? [];
+  const effectsSummary = enabledEffects.map((e) => e.type).join(' → ');
 
   return (
-    <TableRow className="cursor-pointer" onClick={onEdit}>
+    <TableRow
+      className={cn('cursor-pointer', isSelected ? 'bg-muted/50' : 'hover:bg-muted/50')}
+      onClick={onSelect}
+    >
       <TableCell>
-        <button
-          type="button"
-          className="flex w-full min-w-0 items-center gap-2 text-left focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 rounded"
-          aria-label={rowLabel}
-          onClick={(e) => {
-            e.stopPropagation();
-            onEdit();
-          }}
-        >
-          <div className="h-8 w-8 rounded-lg bg-muted flex items-center justify-center shrink-0">
-            <Mic className="h-4 w-4 text-muted-foreground" />
+        <div className="flex w-full min-w-0 items-center gap-2">
+          <div className="h-8 w-8 rounded-full bg-muted flex items-center justify-center shrink-0 overflow-hidden">
+            {avatarUrl && !avatarError ? (
+              <img
+                src={avatarUrl}
+                alt={`${profile.name} avatar`}
+                className="h-full w-full object-cover"
+                onError={() => setAvatarError(true)}
+              />
+            ) : (
+              <Mic className="h-4 w-4 text-muted-foreground" />
+            )}
           </div>
           <div className="min-w-0">
             <div className="font-medium truncate">{profile.name}</div>
@@ -204,11 +226,24 @@ function VoiceRow({
               <div className="text-sm text-muted-foreground truncate">{profile.description}</div>
             )}
           </div>
-        </button>
+        </div>
+      </TableCell>
+      <TableCell>{profile.language}</TableCell>
+      <TableCell>{profile.generation_count}</TableCell>
+      <TableCell>{profile.sample_count}</TableCell>
+      <TableCell>
+        {enabledEffects.length > 0 ? (
+          <span
+            className="inline-flex items-center gap-1 text-xs text-accent"
+            title={effectsSummary}
+          >
+            <Sparkles className="h-3 w-3 fill-accent" />
+            {enabledEffects.length}
+          </span>
+        ) : (
+          <span className="text-xs text-muted-foreground">—</span>
+        )}
       </TableCell>
-      <TableCell onClick={(e) => e.stopPropagation()}>{profile.language}</TableCell>
-      <TableCell onClick={(e) => e.stopPropagation()}>{generationCount}</TableCell>
-      <TableCell onClick={(e) => e.stopPropagation()}>{sampleCount}</TableCell>
       <TableCell onClick={(e) => e.stopPropagation()}>
         <MultiSelect
           options={channels.map((ch) => ({
@@ -218,28 +253,10 @@ function VoiceRow({
           value={channelIds}
           onChange={onChannelChange}
           placeholder="Select channels..."
-          className="min-w-[200px]"
+          className="w-full"
         />
       </TableCell>
-      <TableCell onClick={(e) => e.stopPropagation()}>
-        <DropdownMenu>
-          <DropdownMenuTrigger asChild>
-            <Button variant="ghost" size="icon" aria-label={`Actions for ${profile.name}`}>
-              <MoreHorizontal className="h-4 w-4" />
-            </Button>
-          </DropdownMenuTrigger>
-          <DropdownMenuContent>
-            <DropdownMenuItem onClick={onEdit}>
-              <Edit className="h-4 w-4 mr-2" />
-              Edit
-            </DropdownMenuItem>
-            <DropdownMenuItem onClick={onDelete} className="text-destructive">
-              <Trash2 className="h-4 w-4 mr-2" />
-              Delete
-            </DropdownMenuItem>
-          </DropdownMenuContent>
-        </DropdownMenu>
-      </TableCell>
+      <TableCell />
     </TableRow>
   );
 }

app/src/components/ui/checkbox.tsx

@@ -1,5 +1,5 @@
-import * as React from 'react';
 import { Check } from 'lucide-react';
+import * as React from 'react';
 import { cn } from '@/lib/utils/cn';
 
 export interface CheckboxProps {

app/src/components/ui/dropdown-menu.tsx

@@ -1,6 +1,6 @@
-import * as React from 'react';
 import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
 import { MoreHorizontal } from 'lucide-react';
+import * as React from 'react';
 import { cn } from '@/lib/utils/cn';
 
 const DropdownMenu = DropdownMenuPrimitive.Root;
@@ -73,7 +73,7 @@ const DropdownMenuItem = React.forwardRef<
   <DropdownMenuPrimitive.Item
     ref={ref}
     className={cn(
-      'relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+      'relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
       inset && 'pl-8',
       className,
     )}
@@ -154,7 +154,9 @@ const DropdownMenuSeparator = React.forwardRef<
 DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName;
 
 const DropdownMenuShortcut = ({ className, ...props }: React.HTMLAttributes<HTMLSpanElement>) => {
-  return <span className={cn('ml-auto text-xs tracking-widest opacity-60', className)} {...props} />;
+  return (
+    <span className={cn('ml-auto text-xs tracking-widest opacity-60', className)} {...props} />
+  );
 };
 DropdownMenuShortcut.displayName = 'DropdownMenuShortcut';
 

app/src/components/ui/select.tsx

@@ -108,7 +108,7 @@ const SelectItem = React.forwardRef<
   <SelectPrimitive.Item
     ref={ref}
     className={cn(
-      'relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+      'relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground focus:[&_*]:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
       className,
     )}
     {...props}

app/src/components/ui/table.tsx

@@ -14,7 +14,11 @@ const TableHeader = React.forwardRef<
   HTMLTableSectionElement,
   React.HTMLAttributes<HTMLTableSectionElement>
 >(({ className, ...props }, ref) => (
-  <thead ref={ref} className={cn('[&_tr]:border-b', className)} {...props} />
+  <thead
+    ref={ref}
+    className={cn('[&_tr]:border-b [&_tr]:hover:bg-transparent', className)}
+    {...props}
+  />
 ));
 TableHeader.displayName = 'TableHeader';
 
@@ -42,10 +46,7 @@ const TableRow = React.forwardRef<HTMLTableRowElement, React.HTMLAttributes<HTML
   ({ className, ...props }, ref) => (
     <tr
       ref={ref}
-      className={cn(
-        'border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted',
-        className,
-      )}
+      className={cn('border-b hover:bg-muted/50 data-[state=selected]:bg-muted', className)}
       {...props}
     />
   ),

app/src/index.css

@@ -1,4 +1,5 @@
 @import "tailwindcss" source(".");
+@import "loaders.css/loaders.min.css";
 
 @theme {
   --radius-sm: calc(var(--radius) - 4px);
@@ -155,3 +156,18 @@
   animation: fadeIn 0.5s ease-out 0.15s forwards;
   opacity: 0;
 }
+
+/* react-loaders */
+.line-scale-pulse-out-rapid > div,
+.line-scale > div {
+  background-color: hsl(var(--accent)) !important;
+}
+
+.loader-hidden {
+  display: block;
+}
+
+.loader-hidden > div > div {
+  animation-play-state: paused !important;
+  background-color: hsl(var(--muted-foreground)) !important;
+}

app/src/lib/api/client.ts

@@ -2,9 +2,15 @@ import type { LanguageCode } from '@/lib/constants/languages';
 import { useServerStore } from '@/stores/serverStore';
 import type {
   ActiveTasksResponse,
+  ApplyEffectsRequest,
+  AvailableEffectsResponse,
   CudaStatus,
+  EffectConfig,
+  EffectPresetCreate,
+  EffectPresetResponse,
   GenerationRequest,
   GenerationResponse,
+  GenerationVersionResponse,
   HealthResponse,
   HistoryListResponse,
   HistoryQuery,
@@ -21,6 +27,7 @@ import type {
   StoryItemReorder,
   StoryItemSplit,
   StoryItemTrim,
+  StoryItemVersionUpdate,
   StoryResponse,
   TranscriptionResponse,
   VoiceProfileCreate,
@@ -200,6 +207,24 @@ class ApiClient {
     });
   }
 
+  async retryGeneration(generationId: string): Promise<GenerationResponse> {
+    return this.request<GenerationResponse>(`/generate/${generationId}/retry`, {
+      method: 'POST',
+    });
+  }
+
+  async regenerateGeneration(generationId: string): Promise<GenerationResponse> {
+    return this.request<GenerationResponse>(`/generate/${generationId}/regenerate`, {
+      method: 'POST',
+    });
+  }
+
+  async toggleFavorite(generationId: string): Promise<{ is_favorited: boolean }> {
+    return this.request<{ is_favorited: boolean }>(`/history/${generationId}/favorite`, {
+      method: 'POST',
+    });
+  }
+
   // History
   async listHistory(query?: HistoryQuery): Promise<HistoryListResponse> {
     const params = new URLSearchParams();
@@ -278,6 +303,11 @@ class ApiClient {
     return response.json();
   }
 
+  // Generation status SSE
+  getGenerationStatusUrl(generationId: string): string {
+    return `${this.getBaseUrl()}/generate/${generationId}/status`;
+  }
+
   // Audio
   getAudioUrl(audioId: string): string {
     return `${this.getBaseUrl()}/audio/${audioId}`;
@@ -316,6 +346,21 @@ class ApiClient {
     return this.request<ModelStatusListResponse>('/models/status');
   }
 
+  async getModelsCacheDir(): Promise<{ path: string }> {
+    return this.request<{ path: string }>('/models/cache-dir');
+  }
+
+  async migrateModels(destination: string): Promise<{ source: string; destination: string }> {
+    return this.request('/models/migrate', {
+      method: 'POST',
+      body: JSON.stringify({ destination }),
+    });
+  }
+
+  getMigrationProgressUrl(): string {
+    return `${this.getBaseUrl()}/models/migrate/progress`;
+  }
+
   async triggerModelDownload(modelName: string): Promise<{ message: string }> {
     console.log(
       '[API] triggerModelDownload called for:',
@@ -544,6 +589,17 @@ class ApiClient {
     });
   }
 
+  async setStoryItemVersion(
+    storyId: string,
+    itemId: string,
+    data: StoryItemVersionUpdate,
+  ): Promise<StoryItemDetail> {
+    return this.request<StoryItemDetail>(`/stories/${storyId}/items/${itemId}/version`, {
+      method: 'PUT',
+      body: JSON.stringify(data),
+    });
+  }
+
   async exportStoryAudio(storyId: string): Promise<Blob> {
     const url = `${this.getBaseUrl()}/stories/${storyId}/export-audio`;
     const response = await fetch(url);
@@ -557,6 +613,103 @@ class ApiClient {
 
     return response.blob();
   }
+
+  // Effects & Versions
+  async getAvailableEffects(): Promise<AvailableEffectsResponse> {
+    return this.request<AvailableEffectsResponse>('/effects/available');
+  }
+
+  async listEffectPresets(): Promise<EffectPresetResponse[]> {
+    return this.request<EffectPresetResponse[]>('/effects/presets');
+  }
+
+  async createEffectPreset(data: EffectPresetCreate): Promise<EffectPresetResponse> {
+    return this.request<EffectPresetResponse>('/effects/presets', {
+      method: 'POST',
+      body: JSON.stringify(data),
+    });
+  }
+
+  async updateEffectPreset(
+    presetId: string,
+    data: { name?: string; description?: string; effects_chain?: EffectConfig[] },
+  ): Promise<EffectPresetResponse> {
+    return this.request<EffectPresetResponse>(`/effects/presets/${presetId}`, {
+      method: 'PUT',
+      body: JSON.stringify(data),
+    });
+  }
+
+  async deleteEffectPreset(presetId: string): Promise<void> {
+    await this.request<void>(`/effects/presets/${presetId}`, {
+      method: 'DELETE',
+    });
+  }
+
+  async listGenerationVersions(generationId: string): Promise<GenerationVersionResponse[]> {
+    return this.request<GenerationVersionResponse[]>(`/generations/${generationId}/versions`);
+  }
+
+  async applyEffectsToGeneration(
+    generationId: string,
+    data: ApplyEffectsRequest,
+  ): Promise<GenerationVersionResponse> {
+    return this.request<GenerationVersionResponse>(
+      `/generations/${generationId}/versions/apply-effects`,
+      {
+        method: 'POST',
+        body: JSON.stringify(data),
+      },
+    );
+  }
+
+  async setDefaultVersion(
+    generationId: string,
+    versionId: string,
+  ): Promise<GenerationVersionResponse> {
+    return this.request<GenerationVersionResponse>(
+      `/generations/${generationId}/versions/${versionId}/set-default`,
+      { method: 'PUT' },
+    );
+  }
+
+  async deleteGenerationVersion(generationId: string, versionId: string): Promise<void> {
+    await this.request<void>(`/generations/${generationId}/versions/${versionId}`, {
+      method: 'DELETE',
+    });
+  }
+
+  getVersionAudioUrl(versionId: string): string {
+    return `${this.getBaseUrl()}/audio/version/${versionId}`;
+  }
+
+  async updateProfileEffects(
+    profileId: string,
+    effectsChain: EffectConfig[] | null,
+  ): Promise<VoiceProfileResponse> {
+    return this.request<VoiceProfileResponse>(`/profiles/${profileId}/effects`, {
+      method: 'PUT',
+      body: JSON.stringify({ effects_chain: effectsChain }),
+    });
+  }
+
+  async previewEffects(generationId: string, effectsChain: EffectConfig[]): Promise<Blob> {
+    const url = `${this.getBaseUrl()}/effects/preview/${generationId}`;
+    const response = await fetch(url, {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ effects_chain: effectsChain }),
+    });
+
+    if (!response.ok) {
+      const error = await response.json().catch(() => ({
+        detail: response.statusText,
+      }));
+      throw new Error(error.detail || `HTTP error! status: ${response.status}`);
+    }
+
+    return response.blob();
+  }
 }
 
 export const apiClient = new ApiClient();

app/src/lib/api/types.ts

@@ -13,6 +13,9 @@ export interface VoiceProfileResponse {
   description?: string;
   language: string;
   avatar_path?: string;
+  effects_chain?: EffectConfig[];
+  generation_count: number;
+  sample_count: number;
   created_at: string;
   updated_at: string;
 }
@@ -28,6 +31,12 @@ export interface ProfileSampleResponse {
   reference_text: string;
 }
 
+export interface EffectConfig {
+  type: string;
+  enabled: boolean;
+  params: Record<string, number>;
+}
+
 export interface GenerationRequest {
   profile_id: string;
   text: string;
@@ -36,6 +45,21 @@ export interface GenerationRequest {
   model_size?: '1.7B' | '0.6B';
   engine?: 'qwen' | 'luxtts' | 'chatterbox' | 'chatterbox_turbo';
   instruct?: string;
+  max_chunk_chars?: number;
+  crossfade_ms?: number;
+  normalize?: boolean;
+  effects_chain?: EffectConfig[];
+}
+
+export interface GenerationVersionResponse {
+  id: string;
+  generation_id: string;
+  label: string;
+  audio_path: string;
+  effects_chain?: EffectConfig[];
+  source_version_id?: string;
+  is_default: boolean;
+  created_at: string;
 }
 
 export interface GenerationResponse {
@@ -43,10 +67,18 @@ export interface GenerationResponse {
   profile_id: string;
   text: string;
   language: string;
-  audio_path: string;
-  duration: number;
+  audio_path?: string;
+  duration?: number;
   seed?: number;
+  instruct?: string;
+  engine?: string;
+  model_size?: string;
+  status: 'generating' | 'completed' | 'failed';
+  error?: string;
+  is_favorited?: boolean;
   created_at: string;
+  versions?: GenerationVersionResponse[];
+  active_version_id?: string;
 }
 
 export interface HistoryQuery {
@@ -58,6 +90,8 @@ export interface HistoryQuery {
 
 export interface HistoryResponse extends GenerationResponse {
   profile_name: string;
+  versions?: GenerationVersionResponse[];
+  active_version_id?: string;
 }
 
 export interface HistoryListResponse {
@@ -191,6 +225,7 @@ export interface StoryItemDetail {
   id: string;
   story_id: string;
   generation_id: string;
+  version_id?: string;
   start_time_ms: number;
   track: number;
   trim_start_ms: number;
@@ -205,6 +240,12 @@ export interface StoryItemDetail {
   seed?: number;
   instruct?: string;
   generation_created_at: string;
+  versions?: GenerationVersionResponse[];
+  active_version_id?: string;
+}
+
+export interface StoryItemVersionUpdate {
+  version_id: string | null;
 }
 
 export interface StoryDetailResponse {
@@ -248,3 +289,52 @@ export interface StoryItemTrim {
 export interface StoryItemSplit {
   split_time_ms: number;
 }
+
+// Effects
+
+export interface EffectPresetResponse {
+  id: string;
+  name: string;
+  description?: string;
+  effects_chain: EffectConfig[];
+  is_builtin: boolean;
+  created_at: string;
+}
+
+export interface EffectPresetCreate {
+  name: string;
+  description?: string;
+  effects_chain: EffectConfig[];
+}
+
+export interface EffectPresetUpdate {
+  name?: string;
+  description?: string;
+  effects_chain?: EffectConfig[];
+}
+
+export interface AvailableEffectParam {
+  default: number;
+  min: number;
+  max: number;
+  step: number;
+  description: string;
+}
+
+export interface AvailableEffect {
+  type: string;
+  label: string;
+  description: string;
+  params: Record<string, AvailableEffectParam>;
+}
+
+export interface AvailableEffectsResponse {
+  effects: AvailableEffect[];
+}
+
+export interface ApplyEffectsRequest {
+  effects_chain: EffectConfig[];
+  source_version_id?: string;
+  label?: string;
+  set_as_default?: boolean;
+}

app/src/lib/constants/ui.ts

@@ -2,11 +2,14 @@
  * UI layout constants for safe area padding
  */
 
+const isWindows = typeof navigator !== 'undefined' && navigator.userAgent.includes('Windows');
+
 /**
  * Top safe area padding - height of the drag region bar
- * Corresponds to Tailwind's pt-12 (3rem / 48px)
+ * On macOS this accounts for the overlay titlebar (48px).
+ * On Windows the native title bar is outside the webview, so no padding is needed.
  */
-export const TOP_SAFE_AREA_PADDING = 'pt-12';
+export const TOP_SAFE_AREA_PADDING = isWindows ? 'pt-8' : 'pt-12';
 
 /**
  * Bottom safe area padding - height of the audio player

app/src/lib/hooks/useGenerationForm.ts

@@ -4,14 +4,15 @@ import { useForm } from 'react-hook-form';
 import * as z from 'zod';
 import { useToast } from '@/components/ui/use-toast';
 import { apiClient } from '@/lib/api/client';
+import type { EffectConfig } from '@/lib/api/types';
 import { LANGUAGE_CODES, type LanguageCode } from '@/lib/constants/languages';
 import { useGeneration } from '@/lib/hooks/useGeneration';
 import { useModelDownloadToast } from '@/lib/hooks/useModelDownloadToast';
 import { useGenerationStore } from '@/stores/generationStore';
-import { usePlayerStore } from '@/stores/playerStore';
+import { useServerStore } from '@/stores/serverStore';
 
 const generationSchema = z.object({
-  text: z.string().min(1, 'Text is required').max(5000),
+  text: z.string().min(1, '').max(50000),
   language: z.enum(LANGUAGE_CODES as [LanguageCode, ...LanguageCode[]]),
   seed: z.number().int().optional(),
   modelSize: z.enum(['1.7B', '0.6B']).optional(),
@@ -24,13 +25,16 @@ export type GenerationFormValues = z.infer<typeof generationSchema>;
 interface UseGenerationFormOptions {
   onSuccess?: (generationId: string) => void;
   defaultValues?: Partial<GenerationFormValues>;
+  getEffectsChain?: () => EffectConfig[] | undefined;
 }
 
 export function useGenerationForm(options: UseGenerationFormOptions = {}) {
   const { toast } = useToast();
   const generation = useGeneration();
-  const setAudioWithAutoPlay = usePlayerStore((state) => state.setAudioWithAutoPlay);
-  const setIsGenerating = useGenerationStore((state) => state.setIsGenerating);
+  const addPendingGeneration = useGenerationStore((state) => state.addPendingGeneration);
+  const maxChunkChars = useServerStore((state) => state.maxChunkChars);
+  const crossfadeMs = useServerStore((state) => state.crossfadeMs);
+  const normalizeAudio = useServerStore((state) => state.normalizeAudio);
   const [downloadingModelName, setDownloadingModelName] = useState<string | null>(null);
   const [downloadingDisplayName, setDownloadingDisplayName] = useState<string | null>(null);
 
@@ -67,8 +71,6 @@ export function useGenerationForm(options: UseGenerationFormOptions = {}) {
     }
 
     try {
-      setIsGenerating(true);
-
       const engine = data.engine || 'qwen';
       const modelName =
         engine === 'luxtts'
@@ -89,6 +91,7 @@ export function useGenerationForm(options: UseGenerationFormOptions = {}) {
                 ? 'Qwen TTS 1.7B'
                 : 'Qwen TTS 0.6B';
 
+      // Check if model needs downloading
       try {
         const modelStatus = await apiClient.getModelStatus();
         const model = modelStatus.models.find((m) => m.model_name === modelName);
@@ -102,6 +105,8 @@ export function useGenerationForm(options: UseGenerationFormOptions = {}) {
       }
 
       const isQwen = engine === 'qwen';
+      const effectsChain = options.getEffectsChain?.();
+      // This now returns immediately with status="generating"
       const result = await generation.mutateAsync({
         profile_id: selectedProfileId,
         text: data.text,
@@ -110,16 +115,16 @@ export function useGenerationForm(options: UseGenerationFormOptions = {}) {
         model_size: isQwen ? data.modelSize : undefined,
         engine,
         instruct: isQwen ? data.instruct || undefined : undefined,
+        max_chunk_chars: maxChunkChars,
+        crossfade_ms: crossfadeMs,
+        normalize: normalizeAudio,
+        effects_chain: effectsChain?.length ? effectsChain : undefined,
       });
 
-      toast({
-        title: 'Generation complete!',
-        description: `Audio generated (${result.duration.toFixed(2)}s)`,
-      });
-
-      const audioUrl = apiClient.getAudioUrl(result.id);
-      setAudioWithAutoPlay(audioUrl, result.id, selectedProfileId, data.text.substring(0, 50));
+      // Track this generation for SSE status updates
+      addPendingGeneration(result.id);
 
+      // Reset form immediately — user can start typing again
       form.reset({
         text: '',
         language: data.language,
@@ -136,7 +141,6 @@ export function useGenerationForm(options: UseGenerationFormOptions = {}) {
         variant: 'destructive',
       });
     } finally {
-      setIsGenerating(false);
       setDownloadingModelName(null);
       setDownloadingDisplayName(null);
     }

app/src/lib/hooks/useGenerationProgress.ts

@@ -0,0 +1,154 @@
+import { useQueryClient } from '@tanstack/react-query';
+import { useEffect, useRef } from 'react';
+import { useToast } from '@/components/ui/use-toast';
+import { apiClient } from '@/lib/api/client';
+import { useGenerationStore } from '@/stores/generationStore';
+import { usePlayerStore } from '@/stores/playerStore';
+import { useServerStore } from '@/stores/serverStore';
+
+interface GenerationStatusEvent {
+  id: string;
+  status: 'generating' | 'completed' | 'failed' | 'not_found';
+  duration?: number;
+  error?: string;
+}
+
+/**
+ * Subscribes to SSE for all pending generations. When a generation completes,
+ * invalidates the history query, removes it from pending, and auto-plays
+ * if the player is idle.
+ */
+export function useGenerationProgress() {
+  const queryClient = useQueryClient();
+  const { toast } = useToast();
+  const pendingIds = useGenerationStore((s) => s.pendingGenerationIds);
+  const removePendingGeneration = useGenerationStore((s) => s.removePendingGeneration);
+  const removePendingStoryAdd = useGenerationStore((s) => s.removePendingStoryAdd);
+  const isPlaying = usePlayerStore((s) => s.isPlaying);
+  const setAudioWithAutoPlay = usePlayerStore((s) => s.setAudioWithAutoPlay);
+  const autoplayOnGenerate = useServerStore((s) => s.autoplayOnGenerate);
+
+  // Keep refs to avoid stale closures in EventSource handlers
+  const isPlayingRef = useRef(isPlaying);
+  const autoplayRef = useRef(autoplayOnGenerate);
+  isPlayingRef.current = isPlaying;
+  autoplayRef.current = autoplayOnGenerate;
+
+  // Track active EventSource instances
+  const eventSourcesRef = useRef<Map<string, EventSource>>(new Map());
+
+  // Unmount-only cleanup — close all SSE connections when the hook is torn down
+  useEffect(() => {
+    const sources = eventSourcesRef.current;
+    return () => {
+      for (const source of sources.values()) {
+        source.close();
+      }
+      sources.clear();
+    };
+  }, []);
+
+  useEffect(() => {
+    const currentSources = eventSourcesRef.current;
+
+    // Close SSE connections for IDs no longer pending
+    for (const [id, source] of currentSources.entries()) {
+      if (!pendingIds.has(id)) {
+        source.close();
+        currentSources.delete(id);
+      }
+    }
+
+    // Open SSE connections for new pending IDs
+    for (const id of pendingIds) {
+      if (currentSources.has(id)) continue;
+
+      const url = apiClient.getGenerationStatusUrl(id);
+      const source = new EventSource(url);
+
+      source.onmessage = (event) => {
+        try {
+          const data: GenerationStatusEvent = JSON.parse(event.data);
+
+          if (data.status === 'completed') {
+            source.close();
+            currentSources.delete(id);
+            removePendingGeneration(id);
+
+            // Refresh history to pick up the completed generation
+            queryClient.invalidateQueries({ queryKey: ['history'] });
+
+            // If this generation was queued for a story, add it now
+            const storyId = removePendingStoryAdd(id);
+            if (storyId) {
+              apiClient
+                .addStoryItem(storyId, { generation_id: id })
+                .then(() => {
+                  queryClient.invalidateQueries({ queryKey: ['stories'] });
+                  queryClient.invalidateQueries({ queryKey: ['stories', storyId] });
+                  toast({
+                    title: 'Added to story',
+                    description: data.duration
+                      ? `Audio generated (${data.duration.toFixed(2)}s) and added to story`
+                      : 'Audio generated and added to story',
+                  });
+                })
+                .catch(() => {
+                  toast({
+                    title: 'Generation complete',
+                    description: 'Audio generated but failed to add to story',
+                    variant: 'destructive',
+                  });
+                });
+            } else {
+              // toast({
+              //   title: 'Generation complete!',
+              //   description: data.duration
+              //     ? `Audio generated (${data.duration.toFixed(2)}s)`
+              //     : 'Audio generated',
+              // });
+            }
+
+            // Auto-play if enabled and nothing is currently playing
+            if (autoplayRef.current && !isPlayingRef.current) {
+              const genAudioUrl = apiClient.getAudioUrl(id);
+              setAudioWithAutoPlay(genAudioUrl, id, '', '');
+            }
+          } else if (data.status === 'failed' || data.status === 'not_found') {
+            source.close();
+            currentSources.delete(id);
+            removePendingGeneration(id);
+            removePendingStoryAdd(id);
+
+            queryClient.invalidateQueries({ queryKey: ['history'] });
+
+            toast({
+              title: data.status === 'not_found' ? 'Generation not found' : 'Generation failed',
+              description: data.error || 'An error occurred during generation',
+              variant: 'destructive',
+            });
+          }
+        } catch {
+          // Ignore parse errors from heartbeats etc
+        }
+      };
+
+      source.onerror = () => {
+        // EventSource auto-reconnects, but if we get repeated errors
+        // just clean up
+        source.close();
+        currentSources.delete(id);
+        removePendingGeneration(id);
+      };
+
+      currentSources.set(id, source);
+    }
+  }, [
+    pendingIds,
+    removePendingGeneration,
+    removePendingStoryAdd,
+    queryClient,
+    toast,
+    setAudioWithAutoPlay,
+  ]);
+}

app/src/lib/hooks/useRestoreActiveTasks.tsx

@@ -1,23 +1,23 @@
 import { useCallback, useEffect, useRef, useState } from 'react';
 import { apiClient } from '@/lib/api/client';
-import { useGenerationStore } from '@/stores/generationStore';
 import type { ActiveDownloadTask } from '@/lib/api/types';
+import { useGenerationStore } from '@/stores/generationStore';
 
 // Polling interval in milliseconds
-const POLL_INTERVAL = 2000;
+const POLL_INTERVAL = 30000;
 
 /**
  * Hook to monitor active tasks (downloads and generations).
  * Polls the server periodically to catch downloads triggered from anywhere
  * (transcription, generation, explicit download, etc.).
- * 
+ *
  * Returns the active downloads so components can render download toasts.
  */
 export function useRestoreActiveTasks() {
   const [activeDownloads, setActiveDownloads] = useState<ActiveDownloadTask[]>([]);
-  const setIsGenerating = useGenerationStore((state) => state.setIsGenerating);
   const setActiveGenerationId = useGenerationStore((state) => state.setActiveGenerationId);
-  
+  const addPendingGeneration = useGenerationStore((state) => state.addPendingGeneration);
+
   // Track which downloads we've seen to detect new ones
   const seenDownloadsRef = useRef<Set<string>>(new Set());
 
@@ -25,15 +25,15 @@ export function useRestoreActiveTasks() {
     try {
       const tasks = await apiClient.getActiveTasks();
 
-      // Update generation state
+      // Restore pending generations (e.g., after page refresh)
       if (tasks.generations.length > 0) {
-        setIsGenerating(true);
         setActiveGenerationId(tasks.generations[0].task_id);
+        for (const gen of tasks.generations) {
+          addPendingGeneration(gen.task_id);
+        }
       } else {
-        // Only clear if we were tracking a generation
         const currentId = useGenerationStore.getState().activeGenerationId;
         if (currentId) {
-          setIsGenerating(false);
           setActiveGenerationId(null);
         }
       }
@@ -41,14 +41,14 @@ export function useRestoreActiveTasks() {
       // Update active downloads
       // Keep track of all active downloads (including new ones)
       const currentDownloadNames = new Set(tasks.downloads.map((d) => d.model_name));
-      
+
       // Remove completed downloads from our seen set
       for (const name of seenDownloadsRef.current) {
         if (!currentDownloadNames.has(name)) {
           seenDownloadsRef.current.delete(name);
         }
       }
-      
+
       // Add new downloads to seen set
       for (const download of tasks.downloads) {
         seenDownloadsRef.current.add(download.model_name);
@@ -59,7 +59,7 @@ export function useRestoreActiveTasks() {
       // Silently fail - server might be temporarily unavailable
       console.debug('Failed to fetch active tasks:', error);
     }
-  }, [setIsGenerating, setActiveGenerationId]);
+  }, [setActiveGenerationId, addPendingGeneration]);
 
   useEffect(() => {
     // Fetch immediately on mount

app/src/lib/hooks/useStories.ts

@@ -1,6 +1,15 @@
 import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
 import { apiClient } from '@/lib/api/client';
-import type { StoryCreate, StoryItemCreate, StoryItemBatchUpdate, StoryItemReorder, StoryItemMove, StoryItemTrim, StoryItemSplit } from '@/lib/api/types';
+import type {
+  StoryCreate,
+  StoryItemBatchUpdate,
+  StoryItemCreate,
+  StoryItemMove,
+  StoryItemReorder,
+  StoryItemSplit,
+  StoryItemTrim,
+  StoryItemVersionUpdate,
+} from '@/lib/api/types';
 import { usePlatform } from '@/platform/PlatformContext';
 
 export function useStories() {
@@ -109,8 +118,15 @@ export function useMoveStoryItem() {
   const queryClient = useQueryClient();
 
   return useMutation({
-    mutationFn: ({ storyId, itemId, data }: { storyId: string; itemId: string; data: StoryItemMove }) =>
-      apiClient.moveStoryItem(storyId, itemId, data),
+    mutationFn: ({
+      storyId,
+      itemId,
+      data,
+    }: {
+      storyId: string;
+      itemId: string;
+      data: StoryItemMove;
+    }) => apiClient.moveStoryItem(storyId, itemId, data),
     onSuccess: (_, variables) => {
       queryClient.invalidateQueries({ queryKey: ['stories'] });
       queryClient.invalidateQueries({ queryKey: ['stories', variables.storyId] });
@@ -122,8 +138,15 @@ export function useTrimStoryItem() {
   const queryClient = useQueryClient();
 
   return useMutation({
-    mutationFn: ({ storyId, itemId, data }: { storyId: string; itemId: string; data: StoryItemTrim }) =>
-      apiClient.trimStoryItem(storyId, itemId, data),
+    mutationFn: ({
+      storyId,
+      itemId,
+      data,
+    }: {
+      storyId: string;
+      itemId: string;
+      data: StoryItemTrim;
+    }) => apiClient.trimStoryItem(storyId, itemId, data),
     onSuccess: (_, variables) => {
       queryClient.invalidateQueries({ queryKey: ['stories'] });
       queryClient.invalidateQueries({ queryKey: ['stories', variables.storyId] });
@@ -135,8 +158,15 @@ export function useSplitStoryItem() {
   const queryClient = useQueryClient();
 
   return useMutation({
-    mutationFn: ({ storyId, itemId, data }: { storyId: string; itemId: string; data: StoryItemSplit }) =>
-      apiClient.splitStoryItem(storyId, itemId, data),
+    mutationFn: ({
+      storyId,
+      itemId,
+      data,
+    }: {
+      storyId: string;
+      itemId: string;
+      data: StoryItemSplit;
+    }) => apiClient.splitStoryItem(storyId, itemId, data),
     onSuccess: (_, variables) => {
       queryClient.invalidateQueries({ queryKey: ['stories'] });
       queryClient.invalidateQueries({ queryKey: ['stories', variables.storyId] });
@@ -157,6 +187,26 @@ export function useDuplicateStoryItem() {
   });
 }
 
+export function useSetStoryItemVersion() {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: ({
+      storyId,
+      itemId,
+      data,
+    }: {
+      storyId: string;
+      itemId: string;
+      data: StoryItemVersionUpdate;
+    }) => apiClient.setStoryItemVersion(storyId, itemId, data),
+    onSuccess: (_, variables) => {
+      queryClient.invalidateQueries({ queryKey: ['stories'] });
+      queryClient.invalidateQueries({ queryKey: ['stories', variables.storyId] });
+    },
+  });
+}
+
 export function useExportStoryAudio() {
   const platform = usePlatform();
 
@@ -165,7 +215,10 @@ export function useExportStoryAudio() {
       const blob = await apiClient.exportStoryAudio(storyId);
 
       // Create safe filename
-      const safeName = storyName.substring(0, 50).replace(/[^a-z0-9]/gi, '-').toLowerCase();
+      const safeName = storyName
+        .substring(0, 50)
+        .replace(/[^a-z0-9]/gi, '-')
+        .toLowerCase();
       const filename = `${safeName || 'story'}.wav`;
 
       await platform.filesystem.saveFile(filename, blob, [

app/src/lib/hooks/useStoryPlayback.ts

@@ -70,6 +70,16 @@ export function useStoryPlayback(items: StoryItemDetail[] | undefined) {
     }
   }, []);
 
+  // Resolve the audio buffer key and URL for an item.
+  // When a version_id is pinned, use that version's audio; otherwise use the generation default.
+  const getAudioKey = (item: StoryItemDetail) =>
+    item.version_id ? `v:${item.version_id}` : item.generation_id;
+
+  const getAudioUrlForItem = (item: StoryItemDetail) =>
+    item.version_id
+      ? apiClient.getVersionAudioUrl(item.version_id)
+      : apiClient.getAudioUrl(item.generation_id);
+
   // Preload audio files as AudioBuffers
   useEffect(() => {
     if (!items || items.length === 0) {
@@ -78,12 +88,12 @@ export function useStoryPlayback(items: StoryItemDetail[] | undefined) {
       return;
     }
 
-    const currentIds = new Set(items.map((item) => item.generation_id));
+    const currentKeys = new Set(items.map(getAudioKey));
     const audioContext = getAudioContext();
 
     // Remove buffers for items that no longer exist
     for (const [id] of audioBuffersRef.current) {
-      if (!currentIds.has(id)) {
+      if (!currentKeys.has(id)) {
         audioBuffersRef.current.delete(id);
       }
     }
@@ -91,24 +101,25 @@ export function useStoryPlayback(items: StoryItemDetail[] | undefined) {
     // Preload audio for new items
     const preloadPromises: Promise<void>[] = [];
     for (const item of items) {
-      if (!audioBuffersRef.current.has(item.generation_id)) {
-        const audioUrl = apiClient.getAudioUrl(item.generation_id);
-        console.log('[StoryPlayback] Preloading audio buffer:', item.generation_id);
+      const key = getAudioKey(item);
+      if (!audioBuffersRef.current.has(key)) {
+        const audioUrl = getAudioUrlForItem(item);
+        console.log('[StoryPlayback] Preloading audio buffer:', key);
 
         const preloadPromise = fetch(audioUrl)
           .then((response) => response.arrayBuffer())
           .then((arrayBuffer) => audioContext.decodeAudioData(arrayBuffer))
           .then((audioBuffer) => {
-            audioBuffersRef.current.set(item.generation_id, audioBuffer);
+            audioBuffersRef.current.set(key, audioBuffer);
             console.log(
               '[StoryPlayback] Preloaded buffer:',
-              item.generation_id,
+              key,
               'duration:',
               audioBuffer.duration,
             );
           })
           .catch((err) => {
-            console.error('[StoryPlayback] Failed to preload audio:', item.generation_id, err);
+            console.error('[StoryPlayback] Failed to preload audio:', key, err);
           });
 
         preloadPromises.push(preloadPromise);
@@ -216,15 +227,16 @@ export function useStoryPlayback(items: StoryItemDetail[] | undefined) {
       // Schedule new sources for items that should be playing
       for (const item of shouldBePlaying) {
         if (!activeSourcesRef.current.has(item.id)) {
-          const buffer = audioBuffersRef.current.get(item.generation_id);
+          const bufferKey = getAudioKey(item);
+          const buffer = audioBuffersRef.current.get(bufferKey);
           if (!buffer) {
-            console.warn('[StoryPlayback] Buffer not loaded for:', item.generation_id);
+            console.warn('[StoryPlayback] Buffer not loaded for:', bufferKey);
             continue;
           }
 
           // Calculate when this item should start in AudioContext time
           const itemStartContextTime = storyTimeToContextTime(item.start_time_ms);
-          
+
           // Calculate effective duration and trim offsets
           const trimStartSec = (item.trim_start_ms || 0) / 1000;
           const trimEndSec = (item.trim_end_ms || 0) / 1000;

app/src/lib/utils/format.ts

@@ -21,10 +21,25 @@ export function formatDate(date: string | Date): string {
   } else {
     dateObj = date;
   }
-  
+
   return formatDistance(dateObj, new Date(), { addSuffix: true }).replace(/^about /i, '');
 }
 
+const ENGINE_DISPLAY_NAMES: Record<string, string> = {
+  qwen: 'Qwen',
+  luxtts: 'LuxTTS',
+  chatterbox: 'Chatterbox',
+  chatterbox_turbo: 'Chatterbox Turbo',
+};
+
+export function formatEngineName(engine?: string, modelSize?: string): string {
+  const name = ENGINE_DISPLAY_NAMES[engine ?? 'qwen'] ?? engine ?? 'Qwen';
+  if (engine === 'qwen' && modelSize) {
+    return `${name} ${modelSize}`;
+  }
+  return name;
+}
+
 export function formatFileSize(bytes: number): string {
   if (bytes === 0) return '0 Bytes';
   const k = 1024;

app/src/platform/types.ts

@@ -10,6 +10,8 @@ export interface FileFilter {
 
 export interface PlatformFilesystem {
   saveFile(filename: string, blob: Blob, filters?: FileFilter[]): Promise<void>;
+  openPath(path: string): Promise<void>;
+  pickDirectory(title: string): Promise<string | null>;
 }
 
 export interface UpdateStatus {
@@ -49,9 +51,9 @@ export interface PlatformAudio {
 }
 
 export interface PlatformLifecycle {
-  startServer(remote?: boolean): Promise<string>;
+  startServer(remote?: boolean, modelsDir?: string | null): Promise<string>;
   stopServer(): Promise<void>;
-  restartServer(): Promise<string>;
+  restartServer(modelsDir?: string | null): Promise<string>;
   setKeepServerRunning(keep: boolean): Promise<void>;
   setupWindowCloseHandler(): Promise<void>;
   onServerReady?: () => void;

app/src/router.tsx

@@ -1,6 +1,7 @@
 import { createRootRoute, createRoute, createRouter, Outlet } from '@tanstack/react-router';
 import { AppFrame } from '@/components/AppFrame/AppFrame';
 import { AudioTab } from '@/components/AudioTab/AudioTab';
+import { EffectsTab } from '@/components/EffectsTab/EffectsTab';
 import { MainEditor } from '@/components/MainEditor/MainEditor';
 import { ModelsTab } from '@/components/ModelsTab/ModelsTab';
 import { ServerTab } from '@/components/ServerTab/ServerTab';
@@ -8,8 +9,10 @@ import { Sidebar } from '@/components/Sidebar';
 import { StoriesTab } from '@/components/StoriesTab/StoriesTab';
 import { Toaster } from '@/components/ui/toaster';
 import { VoicesTab } from '@/components/VoicesTab/VoicesTab';
+import { useGenerationProgress } from '@/lib/hooks/useGenerationProgress';
 import { useModelDownloadToast } from '@/lib/hooks/useModelDownloadToast';
 import { MODEL_DISPLAY_NAMES, useRestoreActiveTasks } from '@/lib/hooks/useRestoreActiveTasks';
+
 // Simple platform check that works in both web and Tauri
 const isMacOS = () => navigator.platform.toLowerCase().includes('mac');
 
@@ -18,6 +21,9 @@ function RootLayout() {
   // Monitor active downloads/generations and show toasts for them
   const activeDownloads = useRestoreActiveTasks();
 
+  // Subscribe to SSE for pending generations — handles completion, auto-play, and history refresh
+  useGenerationProgress();
+
   return (
     <AppFrame>
       <div className="flex flex-1 min-h-0 overflow-hidden">
@@ -100,6 +106,13 @@ const audioRoute = createRoute({
   component: AudioTab,
 });
 
+// Effects route
+const effectsRoute = createRoute({
+  getParentRoute: () => rootRoute,
+  path: '/effects',
+  component: EffectsTab,
+});
+
 // Models route
 const modelsRoute = createRoute({
   getParentRoute: () => rootRoute,
@@ -120,6 +133,7 @@ const routeTree = rootRoute.addChildren([
   storiesRoute,
   voicesRoute,
   audioRoute,
+  effectsRoute,
   modelsRoute,
   serverRoute,
 ]);

app/src/stores/effectsStore.ts

@@ -0,0 +1,26 @@
+import { create } from 'zustand';
+import type { EffectConfig } from '@/lib/api/types';
+
+interface EffectsStore {
+  selectedPresetId: string | null;
+  setSelectedPresetId: (id: string | null) => void;
+
+  // Working chain for the detail panel (editing a preset or building a new one)
+  workingChain: EffectConfig[];
+  setWorkingChain: (chain: EffectConfig[]) => void;
+
+  // Track if editing an existing preset vs creating new
+  isCreatingNew: boolean;
+  setIsCreatingNew: (v: boolean) => void;
+}
+
+export const useEffectsStore = create<EffectsStore>((set) => ({
+  selectedPresetId: null,
+  setSelectedPresetId: (id) => set({ selectedPresetId: id, isCreatingNew: false }),
+
+  workingChain: [],
+  setWorkingChain: (chain) => set({ workingChain: chain }),
+
+  isCreatingNew: false,
+  setIsCreatingNew: (v) => set({ isCreatingNew: v, ...(v && { selectedPresetId: null }) }),
+}));

app/src/stores/generationStore.ts

@@ -1,15 +1,58 @@
 import { create } from 'zustand';
 
 interface GenerationState {
+  /** IDs of generations currently in progress */
+  pendingGenerationIds: Set<string>;
+  /** Whether any generation is in progress (derived from pendingGenerationIds) */
   isGenerating: boolean;
-  activeGenerationId: string | null;
-  setIsGenerating: (generating: boolean) => void;
+  /** Map of generationId → storyId for deferred story additions */
+  pendingStoryAdds: Map<string, string>;
+  addPendingGeneration: (id: string) => void;
+  removePendingGeneration: (id: string) => void;
+  addPendingStoryAdd: (generationId: string, storyId: string) => void;
+  removePendingStoryAdd: (generationId: string) => string | undefined;
   setActiveGenerationId: (id: string | null) => void;
+  activeGenerationId: string | null;
 }
 
-export const useGenerationStore = create<GenerationState>((set) => ({
+export const useGenerationStore = create<GenerationState>((set, get) => ({
+  pendingGenerationIds: new Set(),
   isGenerating: false,
   activeGenerationId: null,
-  setIsGenerating: (generating) => set({ isGenerating: generating }),
+  pendingStoryAdds: new Map(),
+
+  addPendingGeneration: (id) =>
+    set((state) => {
+      const next = new Set(state.pendingGenerationIds);
+      next.add(id);
+      return { pendingGenerationIds: next, isGenerating: true };
+    }),
+
+  removePendingGeneration: (id) =>
+    set((state) => {
+      const next = new Set(state.pendingGenerationIds);
+      next.delete(id);
+      return { pendingGenerationIds: next, isGenerating: next.size > 0 };
+    }),
+
+  addPendingStoryAdd: (generationId, storyId) =>
+    set((state) => {
+      const next = new Map(state.pendingStoryAdds);
+      next.set(generationId, storyId);
+      return { pendingStoryAdds: next };
+    }),
+
+  removePendingStoryAdd: (generationId) => {
+    const storyId = get().pendingStoryAdds.get(generationId);
+    if (storyId) {
+      set((state) => {
+        const next = new Map(state.pendingStoryAdds);
+        next.delete(generationId);
+        return { pendingStoryAdds: next };
+      });
+    }
+    return storyId;
+  },
+
   setActiveGenerationId: (id) => set({ activeGenerationId: id }),
 }));

app/src/stores/serverStore.ts

@@ -13,6 +13,21 @@ interface ServerStore {
 
   keepServerRunningOnClose: boolean;
   setKeepServerRunningOnClose: (keepRunning: boolean) => void;
+
+  maxChunkChars: number;
+  setMaxChunkChars: (value: number) => void;
+
+  crossfadeMs: number;
+  setCrossfadeMs: (value: number) => void;
+
+  normalizeAudio: boolean;
+  setNormalizeAudio: (value: boolean) => void;
+
+  autoplayOnGenerate: boolean;
+  setAutoplayOnGenerate: (value: boolean) => void;
+
+  customModelsDir: string | null;
+  setCustomModelsDir: (dir: string | null) => void;
 }
 
 export const useServerStore = create<ServerStore>()(
@@ -29,6 +44,21 @@ export const useServerStore = create<ServerStore>()(
 
       keepServerRunningOnClose: false,
       setKeepServerRunningOnClose: (keepRunning) => set({ keepServerRunningOnClose: keepRunning }),
+
+      maxChunkChars: 800,
+      setMaxChunkChars: (value) => set({ maxChunkChars: value }),
+
+      crossfadeMs: 50,
+      setCrossfadeMs: (value) => set({ crossfadeMs: value }),
+
+      normalizeAudio: true,
+      setNormalizeAudio: (value) => set({ normalizeAudio: value }),
+
+      autoplayOnGenerate: true,
+      setAutoplayOnGenerate: (value) => set({ autoplayOnGenerate: value }),
+
+      customModelsDir: null,
+      setCustomModelsDir: (dir) => set({ customModelsDir: dir }),
     }),
     {
       name: 'voicebox-server',

app/src/stores/uiStore.ts

@@ -31,6 +31,10 @@ interface UIStore {
   selectedProfileId: string | null;
   setSelectedProfileId: (id: string | null) => void;
 
+  // Selected voice in Voices tab inspector
+  selectedVoiceId: string | null;
+  setSelectedVoiceId: (id: string | null) => void;
+
   // Profile form draft (for persisting create voice modal state)
   profileFormDraft: ProfileFormDraft | null;
   setProfileFormDraft: (draft: ProfileFormDraft | null) => void;
@@ -55,6 +59,9 @@ export const useUIStore = create<UIStore>((set) => ({
   selectedProfileId: null,
   setSelectedProfileId: (id) => set({ selectedProfileId: id }),
 
+  selectedVoiceId: null,
+  setSelectedVoiceId: (id) => set({ selectedVoiceId: id }),
+
   profileFormDraft: null,
   setProfileFormDraft: (draft) => set({ profileFormDraft: draft }),
 

backend/__init__.py

@@ -1,3 +1,3 @@
 # Backend package
 
-__version__ = "0.1.13"
+__version__ = "0.2.2"

backend/build_binary.py

@@ -10,6 +10,7 @@ import PyInstaller.__main__
 import argparse
 import os
 import platform
+import sys
 from pathlib import Path
 
 
@@ -33,6 +34,7 @@ def build_server(cuda=False):
     args = [
         'server.py',  # Use server.py as entry point instead of main.py
         '--onefile',
+        '--noconsole',  # No visible console window on Windows
         '--name', binary_name,
     ]
 
@@ -62,6 +64,18 @@ def build_server(cuda=False):
         '--hidden-import', 'backend.utils.hf_progress',
         '--hidden-import', 'backend.utils.validation',
         '--hidden-import', 'backend.cuda_download',
+        '--hidden-import', 'backend.effects',
+        '--hidden-import', 'backend.utils.effects',
+        '--hidden-import', 'backend.versions',
+        '--hidden-import', 'pedalboard',
+        '--hidden-import', 'chatterbox',
+        '--hidden-import', 'chatterbox.tts_turbo',
+        '--hidden-import', 'chatterbox.mtl_tts',
+        '--hidden-import', 'backend.backends.chatterbox_backend',
+        '--hidden-import', 'backend.backends.chatterbox_turbo_backend',
+        '--hidden-import', 'backend.backends.luxtts_backend',
+        '--hidden-import', 'zipvoice',
+        '--hidden-import', 'zipvoice.luxvoice',
         '--hidden-import', 'torch',
         '--hidden-import', 'transformers',
         '--hidden-import', 'fastapi',
@@ -90,6 +104,19 @@ def build_server(cuda=False):
             '--hidden-import', 'torch.cuda',
             '--hidden-import', 'torch.backends.cudnn',
         ])
+    else:
+        # Exclude NVIDIA CUDA packages from CPU-only builds to keep binary small.
+        # When building from a venv with CUDA torch installed, PyInstaller would
+        # bundle ~3GB of NVIDIA shared libraries. We exclude both the Python
+        # modules and the binary DLLs.
+        nvidia_packages = [
+            'nvidia', 'nvidia.cublas', 'nvidia.cuda_cupti', 'nvidia.cuda_nvrtc',
+            'nvidia.cuda_runtime', 'nvidia.cudnn', 'nvidia.cufft', 'nvidia.curand',
+            'nvidia.cusolver', 'nvidia.cusparse', 'nvidia.nccl', 'nvidia.nvjitlink',
+            'nvidia.nvtx',
+        ]
+        for pkg in nvidia_packages:
+            args.extend(['--exclude-module', pkg])
 
     # Add MLX-specific imports if building on Apple Silicon (never for CUDA builds)
     if is_apple_silicon() and not cuda:
@@ -115,7 +142,12 @@ def build_server(cuda=False):
     elif not cuda:
         print("Building for non-Apple Silicon platform - PyTorch only")
 
+    dist_dir = str(backend_dir / 'dist')
+    build_dir = str(backend_dir / 'build')
+
     args.extend([
+        '--distpath', dist_dir,
+        '--workpath', build_dir,
         '--noconfirm',
         '--clean',
     ])
@@ -123,12 +155,79 @@ def build_server(cuda=False):
     # Change to backend directory
     os.chdir(backend_dir)
     
+    # For CPU builds on Windows, ensure we're using CPU-only torch.
+    # If CUDA torch is installed (local dev), swap to CPU torch before building,
+    # then restore CUDA torch after. This prevents PyInstaller from bundling
+    # ~3GB of CUDA DLLs into the CPU binary.
+    restore_cuda = False
+    if not cuda and platform.system() == "Windows":
+        import subprocess
+        result = subprocess.run(
+            [sys.executable, "-c", "import torch; print(torch.version.cuda or '')"],
+            capture_output=True, text=True
+        )
+        has_cuda_torch = bool(result.stdout.strip())
+        if has_cuda_torch:
+            print("CUDA torch detected — installing CPU torch for CPU build...")
+            subprocess.run(
+                [sys.executable, "-m", "pip", "install", "torch", "torchvision", "torchaudio",
+                 "--index-url", "https://download.pytorch.org/whl/cpu", "--force-reinstall", "-q"],
+                check=True
+            )
+            restore_cuda = True
+
     # Run PyInstaller
-    PyInstaller.__main__.run(args)
+    try:
+        PyInstaller.__main__.run(args)
+    finally:
+        # Restore CUDA torch if we swapped it out (even on build failure)
+        if restore_cuda:
+            print("Restoring CUDA torch...")
+            import subprocess
+            subprocess.run(
+                [sys.executable, "-m", "pip", "install", "torch", "torchvision", "torchaudio",
+                 "--index-url", "https://download.pytorch.org/whl/cu126", "--force-reinstall", "-q"],
+                check=True
+            )
     
     print(f"Binary built in {backend_dir / 'dist' / binary_name}")
 
 
+def _get_cuda_dll_excludes():
+    """Get list of CUDA DLL filenames to exclude from CPU builds.
+    
+    When building locally with CUDA torch installed, PyInstaller bundles ~3GB of
+    CUDA DLLs from torch/lib/. Returns a list of DLL filenames to exclude.
+    """
+    try:
+        import torch
+        torch_lib = Path(torch.__file__).parent / 'lib'
+    except ImportError:
+        return []
+    
+    cuda_prefixes = (
+        'torch_cuda', 'cublas', 'cublasLt', 'cudnn', 'cusparse', 'cufft',
+        'cusolver', 'cusolverMg', 'curand', 'nvrtc', 'nvJitLink', 'nccl',
+        'nvperf', 'nvrtc-builtins',
+    )
+    
+    exclude_dlls = []
+    if torch_lib.exists():
+        for f in torch_lib.iterdir():
+            if f.suffix == '.dll' and any(f.name.startswith(p) for p in cuda_prefixes):
+                exclude_dlls.append(f.name)
+    
+    if exclude_dlls:
+        total_mb = sum(
+            (torch_lib / dll).stat().st_size 
+            for dll in exclude_dlls 
+            if (torch_lib / dll).exists()
+        ) / 1024 / 1024
+        print(f"CPU build: will exclude {len(exclude_dlls)} CUDA DLLs ({total_mb:.0f} MB)")
+    
+    return exclude_dlls
+
+
 if __name__ == '__main__':
     parser = argparse.ArgumentParser(description="Build voicebox-server binary")
     parser.add_argument(

backend/cuda_download.py

@@ -129,6 +129,17 @@ async def download_cuda_binary(version: Optional[str] = None):
             except Exception as e:
                 logger.warning(f"Could not fetch checksum file — skipping verification: {e}")
 
+            # Get total size across all parts by issuing HEAD requests
+            total_size = 0
+            for part_name in parts:
+                try:
+                    head_resp = await client.head(f"{base_url}/{part_name}")
+                    content_length = int(head_resp.headers.get("content-length", 0))
+                    total_size += content_length
+                except Exception:
+                    pass
+            logger.info(f"Total download size: {total_size / 1024 / 1024:.1f} MB")
+
             # Download and concatenate parts
             total_downloaded = 0
             with open(temp_path, "wb") as f:
@@ -142,8 +153,8 @@ async def download_cuda_binary(version: Optional[str] = None):
                             f.write(chunk)
                             total_downloaded += len(chunk)
                             progress.update_progress(
-                                PROGRESS_KEY, current=total_downloaded, total=0,
-                                filename=f"Part {i + 1}/{len(parts)}",
+                                PROGRESS_KEY, current=total_downloaded, total=total_size,
+                                filename=f"Downloading CUDA backend ({i + 1}/{len(parts)})",
                                 status="downloading",
                             )
 
@@ -188,6 +199,56 @@ async def download_cuda_binary(version: Optional[str] = None):
         raise
 
 
+def get_cuda_binary_version() -> Optional[str]:
+    """Get the version of the installed CUDA binary, or None if not installed."""
+    import subprocess
+    cuda_path = get_cuda_binary_path()
+    if not cuda_path:
+        return None
+    try:
+        result = subprocess.run(
+            [str(cuda_path), "--version"],
+            capture_output=True, text=True, timeout=30,
+        )
+        # Output format: "voicebox-server 0.2.0"
+        for line in result.stdout.strip().splitlines():
+            if "voicebox-server" in line:
+                return line.split()[-1]
+    except Exception as e:
+        logger.warning(f"Could not get CUDA binary version: {e}")
+    return None
+
+
+async def check_and_update_cuda_binary():
+    """Check if the CUDA binary is outdated and auto-download if so.
+
+    Called on server startup. If a CUDA binary exists but its version
+    doesn't match the current app version, triggers a background download
+    of the updated CUDA binary. The download progress is visible to the
+    frontend via the existing SSE progress endpoint.
+    """
+    cuda_path = get_cuda_binary_path()
+    if not cuda_path:
+        return  # No CUDA binary installed, nothing to update
+
+    cuda_version = get_cuda_binary_version()
+    current_version = __version__
+
+    if cuda_version == current_version:
+        logger.info(f"CUDA binary is up to date (v{current_version})")
+        return
+
+    logger.info(
+        f"CUDA binary version mismatch: binary=v{cuda_version}, app=v{current_version}. "
+        f"Auto-downloading updated CUDA backend..."
+    )
+
+    try:
+        await download_cuda_binary()
+    except Exception as e:
+        logger.error(f"Auto-update of CUDA binary failed: {e}")
+
+
 async def delete_cuda_binary() -> bool:
     """Delete the downloaded CUDA binary. Returns True if deleted."""
     path = get_cuda_binary_path()

backend/database.py

@@ -23,6 +23,7 @@ class VoiceProfile(Base):
     description = Column(Text)
     language = Column(String, default="en")
     avatar_path = Column(String, nullable=True)
+    effects_chain = Column(Text, nullable=True)  # JSON-serialized default effects chain
     created_at = Column(DateTime, default=datetime.utcnow)
     updated_at = Column(DateTime, default=datetime.utcnow, onupdate=datetime.utcnow)
 
@@ -45,10 +46,15 @@ class Generation(Base):
     profile_id = Column(String, ForeignKey("profiles.id"), nullable=False)
     text = Column(Text, nullable=False)
     language = Column(String, default="en")
-    audio_path = Column(String, nullable=False)
-    duration = Column(Float, nullable=False)
+    audio_path = Column(String, nullable=True)
+    duration = Column(Float, nullable=True)
     seed = Column(Integer)
     instruct = Column(Text)
+    engine = Column(String, default="qwen")
+    model_size = Column(String, nullable=True)
+    status = Column(String, default="completed")  # generating, completed, failed
+    error = Column(Text, nullable=True)
+    is_favorited = Column(Boolean, default=False)
     created_at = Column(DateTime, default=datetime.utcnow)
 
 
@@ -70,6 +76,7 @@ class StoryItem(Base):
     id = Column(String, primary_key=True, default=lambda: str(uuid.uuid4()))
     story_id = Column(String, ForeignKey("stories.id"), nullable=False)
     generation_id = Column(String, ForeignKey("generations.id"), nullable=False)
+    version_id = Column(String, ForeignKey("generation_versions.id"), nullable=True)  # Pin to specific version, null = use generation default
     start_time_ms = Column(Integer, nullable=False, default=0)  # Milliseconds from story start
     track = Column(Integer, nullable=False, default=0)  # Track number (0 = main track)
     trim_start_ms = Column(Integer, nullable=False, default=0)  # Milliseconds trimmed from start
@@ -88,6 +95,33 @@ class Project(Base):
     updated_at = Column(DateTime, default=datetime.utcnow, onupdate=datetime.utcnow)
 
 
+class GenerationVersion(Base):
+    """A version of a generation's audio (clean, processed, alternate takes)."""
+    __tablename__ = "generation_versions"
+
+    id = Column(String, primary_key=True, default=lambda: str(uuid.uuid4()))
+    generation_id = Column(String, ForeignKey("generations.id"), nullable=False)
+    label = Column(String, nullable=False)  # "clean", "processed", or user-defined
+    audio_path = Column(String, nullable=False)
+    effects_chain = Column(Text, nullable=True)  # JSON-serialized effects config, null for clean
+    source_version_id = Column(String, ForeignKey("generation_versions.id"), nullable=True)  # Which version was used as input
+    is_default = Column(Boolean, default=False)
+    created_at = Column(DateTime, default=datetime.utcnow)
+
+
+class EffectPreset(Base):
+    """Saved effect chain preset."""
+    __tablename__ = "effect_presets"
+
+    id = Column(String, primary_key=True, default=lambda: str(uuid.uuid4()))
+    name = Column(String, unique=True, nullable=False)
+    description = Column(Text, nullable=True)
+    effects_chain = Column(Text, nullable=False)  # JSON-serialized effects config
+    is_builtin = Column(Boolean, default=False)
+    sort_order = Column(Integer, default=100)
+    created_at = Column(DateTime, default=datetime.utcnow)
+
+
 class AudioChannel(Base):
     """Audio channel (bus) database model."""
     __tablename__ = "audio_channels"
@@ -165,6 +199,12 @@ def init_db():
     finally:
         db.close()
 
+    # Backfill: create "clean" GenerationVersion entries for existing generations
+    _backfill_generation_versions()
+
+    # Seed built-in effect presets
+    _seed_builtin_presets()
+
 
 def _run_migrations(engine):
     """Run database migrations."""
@@ -288,6 +328,155 @@ def _run_migrations(engine):
                 conn.commit()
                 print("Added avatar_path column to profiles")
 
+    # Migration: Add status and error columns to generations table
+    if 'generations' in inspector.get_table_names():
+        columns = {col['name'] for col in inspector.get_columns('generations')}
+        if 'status' not in columns:
+            print("Migrating generations: adding status column")
+            with engine.connect() as conn:
+                conn.execute(text("ALTER TABLE generations ADD COLUMN status VARCHAR DEFAULT 'completed'"))
+                conn.commit()
+                print("Added status column to generations")
+        if 'error' not in columns:
+            print("Migrating generations: adding error column")
+            with engine.connect() as conn:
+                conn.execute(text("ALTER TABLE generations ADD COLUMN error TEXT"))
+                conn.commit()
+                print("Added error column to generations")
+        if 'engine' not in columns:
+            print("Migrating generations: adding engine column")
+            with engine.connect() as conn:
+                conn.execute(text("ALTER TABLE generations ADD COLUMN engine VARCHAR DEFAULT 'qwen'"))
+                conn.commit()
+                print("Added engine column to generations")
+        # Re-read columns after engine migration (variable name shadows outer `engine`)
+        columns = {col['name'] for col in inspector.get_columns('generations')}
+        if 'model_size' not in columns:
+            print("Migrating generations: adding model_size column")
+            with engine.connect() as conn:
+                conn.execute(text("ALTER TABLE generations ADD COLUMN model_size VARCHAR"))
+                conn.commit()
+                print("Added model_size column to generations")
+
+    # Migration: Add effects_chain to profiles table
+    if 'profiles' in inspector.get_table_names():
+        columns = {col['name'] for col in inspector.get_columns('profiles')}
+        if 'effects_chain' not in columns:
+            print("Migrating profiles: adding effects_chain column")
+            with engine.connect() as conn:
+                conn.execute(text("ALTER TABLE profiles ADD COLUMN effects_chain TEXT"))
+                conn.commit()
+                print("Added effects_chain column to profiles")
+
+    # Migration: Add sort_order to effect_presets table
+    if 'effect_presets' in inspector.get_table_names():
+        columns = {col['name'] for col in inspector.get_columns('effect_presets')}
+        if 'sort_order' not in columns:
+            print("Migrating effect_presets: adding sort_order column")
+            with engine.connect() as conn:
+                conn.execute(text("ALTER TABLE effect_presets ADD COLUMN sort_order INTEGER DEFAULT 100"))
+                conn.commit()
+                print("Added sort_order column to effect_presets")
+
+    # Migration: Add version_id column to story_items table
+    if 'story_items' in inspector.get_table_names():
+        columns = {col['name'] for col in inspector.get_columns('story_items')}
+        if 'version_id' not in columns:
+            print("Migrating story_items: adding version_id column")
+            with engine.connect() as conn:
+                conn.execute(text("ALTER TABLE story_items ADD COLUMN version_id VARCHAR"))
+                conn.commit()
+                print("Added version_id column to story_items")
+
+    # Migration: Add source_version_id to generation_versions table
+    if 'generation_versions' in inspector.get_table_names():
+        columns = {col['name'] for col in inspector.get_columns('generation_versions')}
+        if 'source_version_id' not in columns:
+            print("Migrating generation_versions: adding source_version_id column")
+            with engine.connect() as conn:
+                conn.execute(text("ALTER TABLE generation_versions ADD COLUMN source_version_id VARCHAR"))
+                conn.commit()
+                print("Added source_version_id column to generation_versions")
+
+    if 'generations' in inspector.get_table_names():
+        columns = {col['name'] for col in inspector.get_columns('generations')}
+        if 'is_favorited' not in columns:
+            print("Migrating generations: adding is_favorited column")
+            with engine.connect() as conn:
+                conn.execute(text("ALTER TABLE generations ADD COLUMN is_favorited BOOLEAN DEFAULT 0"))
+                conn.commit()
+                print("Added is_favorited column to generations")
+
+    # Migration: Create generation_versions for existing generations
+    # (populate after tables are created, handled in init_db)
+
+
+def _backfill_generation_versions():
+    """Create 'clean' version entries for existing generations that don't have any."""
+    db = SessionLocal()
+    try:
+        from pathlib import Path as _Path
+
+        # Find generations that have no version entries
+        existing_version_gen_ids = {
+            row[0] for row in db.query(GenerationVersion.generation_id).all()
+        }
+        generations = db.query(Generation).filter(
+            Generation.status == "completed",
+            Generation.audio_path.isnot(None),
+            Generation.audio_path != "",
+        ).all()
+
+        count = 0
+        for gen in generations:
+            if gen.id in existing_version_gen_ids:
+                continue
+            if not _Path(gen.audio_path).exists():
+                continue
+            version = GenerationVersion(
+                id=str(uuid.uuid4()),
+                generation_id=gen.id,
+                label="clean",
+                audio_path=gen.audio_path,
+                effects_chain=None,
+                is_default=True,
+            )
+            db.add(version)
+            count += 1
+
+        if count > 0:
+            db.commit()
+            print(f"Backfilled {count} generation version entries")
+    finally:
+        db.close()
+
+
+def _seed_builtin_presets():
+    """Ensure built-in effect presets exist in the database."""
+    import json
+    from .utils.effects import BUILTIN_PRESETS
+
+    db = SessionLocal()
+    try:
+        for idx, (key, preset_data) in enumerate(BUILTIN_PRESETS.items()):
+            sort_order = preset_data.get("sort_order", idx)
+            existing = db.query(EffectPreset).filter_by(name=preset_data["name"]).first()
+            if not existing:
+                preset = EffectPreset(
+                    id=str(uuid.uuid4()),
+                    name=preset_data["name"],
+                    description=preset_data.get("description"),
+                    effects_chain=json.dumps(preset_data["effects_chain"]),
+                    is_builtin=True,
+                    sort_order=sort_order,
+                )
+                db.add(preset)
+            elif existing.sort_order != sort_order:
+                existing.sort_order = sort_order
+        db.commit()
+    finally:
+        db.close()
+
 
 def get_db():
     """Get database session (generator for dependency injection)."""

backend/effects.py

@@ -0,0 +1,120 @@
+"""
+Effect presets CRUD operations.
+"""
+
+from __future__ import annotations
+
+import json
+import uuid
+from typing import List, Optional
+
+from sqlalchemy.orm import Session
+from sqlalchemy.exc import IntegrityError
+
+from .database import EffectPreset as DBEffectPreset
+from .models import EffectPresetResponse, EffectPresetCreate, EffectPresetUpdate, EffectConfig
+
+
+def _preset_response(p: DBEffectPreset) -> EffectPresetResponse:
+    """Convert a DB preset row to a Pydantic response."""
+    effects_chain = [EffectConfig(**e) for e in json.loads(p.effects_chain)]
+    return EffectPresetResponse(
+        id=p.id,
+        name=p.name,
+        description=p.description,
+        effects_chain=effects_chain,
+        is_builtin=p.is_builtin or False,
+        created_at=p.created_at,
+    )
+
+
+def list_presets(db: Session) -> List[EffectPresetResponse]:
+    """List all effect presets (built-in + user-created)."""
+    presets = db.query(DBEffectPreset).order_by(DBEffectPreset.sort_order, DBEffectPreset.name).all()
+    return [_preset_response(p) for p in presets]
+
+
+def get_preset(preset_id: str, db: Session) -> Optional[EffectPresetResponse]:
+    """Get a preset by ID."""
+    p = db.query(DBEffectPreset).filter_by(id=preset_id).first()
+    if not p:
+        return None
+    return _preset_response(p)
+
+
+def get_preset_by_name(name: str, db: Session) -> Optional[EffectPresetResponse]:
+    """Get a preset by name."""
+    p = db.query(DBEffectPreset).filter_by(name=name).first()
+    if not p:
+        return None
+    return _preset_response(p)
+
+
+def create_preset(data: EffectPresetCreate, db: Session) -> EffectPresetResponse:
+    """Create a new user effect preset."""
+    from .utils.effects import validate_effects_chain
+
+    chain_dicts = [e.model_dump() for e in data.effects_chain]
+    error = validate_effects_chain(chain_dicts)
+    if error:
+        raise ValueError(error)
+
+    # Check for duplicate name before insert
+    existing = db.query(DBEffectPreset).filter_by(name=data.name).first()
+    if existing:
+        raise ValueError(f"A preset named '{data.name}' already exists")
+
+    preset = DBEffectPreset(
+        id=str(uuid.uuid4()),
+        name=data.name,
+        description=data.description,
+        effects_chain=json.dumps(chain_dicts),
+        is_builtin=False,
+    )
+    db.add(preset)
+    try:
+        db.commit()
+    except IntegrityError:
+        db.rollback()
+        raise ValueError(f"A preset named '{data.name}' already exists")
+    db.refresh(preset)
+    return _preset_response(preset)
+
+
+def update_preset(preset_id: str, data: EffectPresetUpdate, db: Session) -> Optional[EffectPresetResponse]:
+    """Update a user effect preset. Cannot modify built-in presets."""
+    preset = db.query(DBEffectPreset).filter_by(id=preset_id).first()
+    if not preset:
+        return None
+    if preset.is_builtin:
+        raise ValueError("Cannot modify built-in presets")
+
+    if data.name is not None:
+        preset.name = data.name
+    if data.description is not None:
+        preset.description = data.description
+    if data.effects_chain is not None:
+        from .utils.effects import validate_effects_chain
+
+        chain_dicts = [e.model_dump() for e in data.effects_chain]
+        error = validate_effects_chain(chain_dicts)
+        if error:
+            raise ValueError(error)
+        preset.effects_chain = json.dumps(chain_dicts)
+
+    db.commit()
+    db.refresh(preset)
+    return _preset_response(preset)
+
+
+def delete_preset(preset_id: str, db: Session) -> bool:
+    """Delete a user effect preset. Cannot delete built-in presets."""
+    preset = db.query(DBEffectPreset).filter_by(id=preset_id).first()
+    if not preset:
+        return False
+    if preset.is_builtin:
+        raise ValueError("Cannot delete built-in presets")
+
+    db.delete(preset)
+    db.commit()
+    return True

backend/export_import.py

@@ -13,7 +13,7 @@ from typing import Optional
 from sqlalchemy.orm import Session
 
 from .models import VoiceProfileResponse
-from .database import VoiceProfile as DBVoiceProfile, ProfileSample as DBProfileSample, Generation as DBGeneration
+from .database import VoiceProfile as DBVoiceProfile, ProfileSample as DBProfileSample, Generation as DBGeneration, GenerationVersion as DBGenerationVersion
 from .profiles import create_profile, add_profile_sample
 from .models import VoiceProfileCreate
 from . import config
@@ -269,16 +269,33 @@ def export_generation_to_zip(generation_id: str, db: Session) -> bytes:
     if not profile:
         raise ValueError(f"Profile {generation.profile_id} not found")
     
-    # Get audio file
-    audio_path = Path(generation.audio_path)
-    if not audio_path.exists():
-        raise ValueError(f"Audio file not found: {audio_path}")
-    
+    # Get all versions for this generation
+    versions = (
+        db.query(DBGenerationVersion)
+        .filter_by(generation_id=generation_id)
+        .order_by(DBGenerationVersion.created_at)
+        .all()
+    )
+
     # Create ZIP in memory
     zip_buffer = io.BytesIO()
     
     with zipfile.ZipFile(zip_buffer, 'w', zipfile.ZIP_DEFLATED) as zip_file:
-        # Create manifest.json
+        # Build version manifest entries
+        version_entries = []
+        for v in versions:
+            v_path = Path(v.audio_path)
+            effects_chain = None
+            if v.effects_chain:
+                effects_chain = json.loads(v.effects_chain)
+            version_entries.append({
+                "id": v.id,
+                "label": v.label,
+                "is_default": v.is_default,
+                "effects_chain": effects_chain,
+                "filename": v_path.name,
+            })
+
         manifest = {
             "version": "1.0",
             "generation": {
@@ -295,13 +312,22 @@ def export_generation_to_zip(generation_id: str, db: Session) -> bytes:
                 "name": profile.name,
                 "description": profile.description,
                 "language": profile.language,
-            }
+            },
+            "versions": version_entries,
         }
         zip_file.writestr("manifest.json", json.dumps(manifest, indent=2))
         
-        # Add audio file
-        filename = audio_path.name
-        zip_file.write(audio_path, f"audio/{filename}")
+        # Add all version audio files
+        for v in versions:
+            v_path = Path(v.audio_path)
+            if v_path.exists():
+                zip_file.write(v_path, f"audio/{v_path.name}")
+
+        # Fallback: if no versions exist, include the generation's main audio
+        if not versions:
+            audio_path = Path(generation.audio_path)
+            if audio_path.exists():
+                zip_file.write(audio_path, f"audio/{audio_path.name}")
     
     zip_buffer.seek(0)
     return zip_buffer.read()

backend/history.py

@@ -10,8 +10,8 @@ from pathlib import Path
 from sqlalchemy.orm import Session
 from sqlalchemy import or_
 
-from .models import GenerationRequest, GenerationResponse, HistoryQuery, HistoryResponse, HistoryListResponse
-from .database import Generation as DBGeneration, VoiceProfile as DBVoiceProfile
+from .models import GenerationRequest, GenerationResponse, HistoryQuery, HistoryResponse, HistoryListResponse, GenerationVersionResponse, EffectConfig
+from .database import Generation as DBGeneration, GenerationVersion as DBGenerationVersion, VoiceProfile as DBVoiceProfile
 from . import config
 
 
@@ -20,6 +20,43 @@ def _get_generations_dir() -> Path:
     return config.get_generations_dir()
 
 
+def _get_versions_for_generation(generation_id: str, db: Session) -> tuple:
+    """Get versions list and active version ID for a generation."""
+    import json
+    versions_rows = (
+        db.query(DBGenerationVersion)
+        .filter_by(generation_id=generation_id)
+        .order_by(DBGenerationVersion.created_at)
+        .all()
+    )
+    if not versions_rows:
+        return None, None
+
+    versions = []
+    active_version_id = None
+    for v in versions_rows:
+        effects_chain = None
+        if v.effects_chain:
+            try:
+                raw = json.loads(v.effects_chain)
+                effects_chain = [EffectConfig(**e) for e in raw]
+            except Exception:
+                pass
+        versions.append(GenerationVersionResponse(
+            id=v.id,
+            generation_id=v.generation_id,
+            label=v.label,
+            audio_path=v.audio_path,
+            effects_chain=effects_chain,
+            is_default=v.is_default,
+            created_at=v.created_at,
+        ))
+        if v.is_default:
+            active_version_id = v.id
+
+    return versions, active_version_id
+
+
 async def create_generation(
     profile_id: str,
     text: str,
@@ -29,6 +66,10 @@ async def create_generation(
     seed: Optional[int],
     db: Session,
     instruct: Optional[str] = None,
+    generation_id: Optional[str] = None,
+    status: str = "completed",
+    engine: Optional[str] = "qwen",
+    model_size: Optional[str] = None,
 ) -> GenerationResponse:
     """
     Create a new generation history entry.
@@ -42,12 +83,16 @@ async def create_generation(
         seed: Random seed used (if any)
         db: Database session
         instruct: Natural language instruction used (if any)
+        generation_id: Pre-assigned ID (for async generation flow)
+        status: Generation status (generating, completed, failed)
+        engine: TTS engine used (qwen, luxtts, chatterbox, chatterbox_turbo)
+        model_size: Model size variant (1.7B, 0.6B) — only relevant for qwen
 
     Returns:
         Created generation entry
     """
     db_generation = DBGeneration(
-        id=str(uuid.uuid4()),
+        id=generation_id or str(uuid.uuid4()),
         profile_id=profile_id,
         text=text,
         language=language,
@@ -55,6 +100,9 @@ async def create_generation(
         duration=duration,
         seed=seed,
         instruct=instruct,
+        engine=engine,
+        model_size=model_size,
+        status=status,
         created_at=datetime.utcnow(),
     )
 
@@ -65,6 +113,32 @@ async def create_generation(
     return GenerationResponse.model_validate(db_generation)
 
 
+async def update_generation_status(
+    generation_id: str,
+    status: str,
+    db: Session,
+    audio_path: Optional[str] = None,
+    duration: Optional[float] = None,
+    error: Optional[str] = None,
+) -> Optional[GenerationResponse]:
+    """Update the status of a generation (used by async generation flow)."""
+    generation = db.query(DBGeneration).filter_by(id=generation_id).first()
+    if not generation:
+        return None
+
+    generation.status = status
+    if audio_path is not None:
+        generation.audio_path = audio_path
+    if duration is not None:
+        generation.duration = duration
+    if error is not None:
+        generation.error = error
+
+    db.commit()
+    db.refresh(generation)
+    return GenerationResponse.model_validate(generation)
+
+
 async def get_generation(
     generation_id: str,
     db: Session,
@@ -133,6 +207,7 @@ async def list_generations(
     # Convert to HistoryResponse with profile_name
     items = []
     for generation, profile_name in results:
+        versions, active_version_id = _get_versions_for_generation(generation.id, db)
         items.append(HistoryResponse(
             id=generation.id,
             profile_id=generation.profile_id,
@@ -143,7 +218,14 @@ async def list_generations(
             duration=generation.duration,
             seed=generation.seed,
             instruct=generation.instruct,
+            engine=generation.engine or "qwen",
+            model_size=generation.model_size,
+            status=generation.status or "completed",
+            error=generation.error,
+            is_favorited=bool(generation.is_favorited),
             created_at=generation.created_at,
+            versions=versions,
+            active_version_id=active_version_id,
         ))
     
     return HistoryListResponse(
@@ -169,12 +251,17 @@ async def delete_generation(
     generation = db.query(DBGeneration).filter_by(id=generation_id).first()
     if not generation:
         return False
-    
-    # Delete audio file
-    audio_path = Path(generation.audio_path)
-    if audio_path.exists():
-        audio_path.unlink()
-    
+
+    # Delete all version files and records
+    from . import versions as versions_mod
+    versions_mod.delete_versions_for_generation(generation_id, db)
+
+    # Delete main audio file (if not already removed by version cleanup)
+    if generation.audio_path:
+        audio_path = Path(generation.audio_path)
+        if audio_path.exists():
+            audio_path.unlink()
+
     # Delete from database
     db.delete(generation)
     db.commit()

backend/models.py

@@ -21,6 +21,9 @@ class VoiceProfileResponse(BaseModel):
     description: Optional[str]
     language: str
     avatar_path: Optional[str] = None
+    effects_chain: Optional[List["EffectConfig"]] = None
+    generation_count: int = 0
+    sample_count: int = 0
     created_at: datetime
     updated_at: datetime
 
@@ -52,12 +55,16 @@ class ProfileSampleResponse(BaseModel):
 class GenerationRequest(BaseModel):
     """Request model for voice generation."""
     profile_id: str
-    text: str = Field(..., min_length=1, max_length=5000)
+    text: str = Field(..., min_length=1, max_length=50000)
     language: str = Field(default="en", pattern="^(zh|en|ja|ko|de|fr|ru|pt|es|it|he)$")
     seed: Optional[int] = Field(None, ge=0)
     model_size: Optional[str] = Field(default="1.7B", pattern="^(1\\.7B|0\\.6B)$")
     instruct: Optional[str] = Field(None, max_length=500)
     engine: Optional[str] = Field(default="qwen", pattern="^(qwen|luxtts|chatterbox|chatterbox_turbo)$")
+    max_chunk_chars: int = Field(default=800, ge=100, le=5000, description="Max characters per chunk for long text splitting")
+    crossfade_ms: int = Field(default=50, ge=0, le=500, description="Crossfade duration in ms between chunks (0 for hard cut)")
+    normalize: bool = Field(default=True, description="Normalize output audio volume")
+    effects_chain: Optional[List["EffectConfig"]] = Field(None, description="Effects chain to apply after generation (overrides profile default)")
 
 
 class GenerationResponse(BaseModel):
@@ -66,11 +73,18 @@ class GenerationResponse(BaseModel):
     profile_id: str
     text: str
     language: str
-    audio_path: str
-    duration: float
-    seed: Optional[int]
-    instruct: Optional[str]
+    audio_path: Optional[str] = None
+    duration: Optional[float] = None
+    seed: Optional[int] = None
+    instruct: Optional[str] = None
+    engine: Optional[str] = "qwen"
+    model_size: Optional[str] = None
+    status: str = "completed"
+    error: Optional[str] = None
+    is_favorited: bool = False
     created_at: datetime
+    versions: Optional[List["GenerationVersionResponse"]] = None
+    active_version_id: Optional[str] = None
 
     class Config:
         from_attributes = True
@@ -91,11 +105,18 @@ class HistoryResponse(BaseModel):
     profile_name: str
     text: str
     language: str
-    audio_path: str
-    duration: float
-    seed: Optional[int]
-    instruct: Optional[str]
+    audio_path: Optional[str] = None
+    duration: Optional[float] = None
+    seed: Optional[int] = None
+    instruct: Optional[str] = None
+    engine: Optional[str] = "qwen"
+    model_size: Optional[str] = None
+    status: str = "completed"
+    error: Optional[str] = None
+    is_favorited: bool = False
     created_at: datetime
+    versions: Optional[List["GenerationVersionResponse"]] = None
+    active_version_id: Optional[str] = None
 
     class Config:
         from_attributes = True
@@ -168,6 +189,11 @@ class ModelDownloadRequest(BaseModel):
     model_name: str
 
 
+class ModelMigrateRequest(BaseModel):
+    """Request model for migrating models to a new directory."""
+    destination: str
+
+
 class ActiveDownloadTask(BaseModel):
     """Response model for active download task."""
     model_name: str
@@ -252,6 +278,7 @@ class StoryItemDetail(BaseModel):
     id: str
     story_id: str
     generation_id: str
+    version_id: Optional[str] = None
     start_time_ms: int
     track: int = 0
     trim_start_ms: int = 0
@@ -267,6 +294,9 @@ class StoryItemDetail(BaseModel):
     seed: Optional[int]
     instruct: Optional[str]
     generation_created_at: datetime
+    # Versions available for this generation
+    versions: Optional[List["GenerationVersionResponse"]] = None
+    active_version_id: Optional[str] = None
 
     class Config:
         from_attributes = True
@@ -323,3 +353,101 @@ class StoryItemTrim(BaseModel):
 class StoryItemSplit(BaseModel):
     """Request model for splitting a story item."""
     split_time_ms: int = Field(..., ge=0)  # Time within the clip to split at (relative to clip start)
+
+
+class StoryItemVersionUpdate(BaseModel):
+    """Request model for setting a story item's pinned version."""
+    version_id: Optional[str] = None  # null = use generation default
+
+
+# ============================================
+# Effects & Versions
+# ============================================
+
+class EffectConfig(BaseModel):
+    """A single effect in an effects chain."""
+    type: str
+    enabled: bool = True
+    params: dict = Field(default_factory=dict)
+
+
+class EffectsChain(BaseModel):
+    """An ordered list of effects to apply."""
+    effects: List[EffectConfig] = Field(default_factory=list)
+
+
+class EffectPresetCreate(BaseModel):
+    """Request model for creating an effect preset."""
+    name: str = Field(..., min_length=1, max_length=100)
+    description: Optional[str] = Field(None, max_length=500)
+    effects_chain: List[EffectConfig]
+
+
+class EffectPresetUpdate(BaseModel):
+    """Request model for updating an effect preset."""
+    name: Optional[str] = Field(None, min_length=1, max_length=100)
+    description: Optional[str] = None
+    effects_chain: Optional[List[EffectConfig]] = None
+
+
+class EffectPresetResponse(BaseModel):
+    """Response model for effect preset."""
+    id: str
+    name: str
+    description: Optional[str] = None
+    effects_chain: List[EffectConfig]
+    is_builtin: bool = False
+    created_at: datetime
+
+    class Config:
+        from_attributes = True
+
+
+class GenerationVersionResponse(BaseModel):
+    """Response model for a generation version."""
+    id: str
+    generation_id: str
+    label: str
+    audio_path: str
+    effects_chain: Optional[List[EffectConfig]] = None
+    source_version_id: Optional[str] = None
+    is_default: bool
+    created_at: datetime
+
+    class Config:
+        from_attributes = True
+
+
+class ApplyEffectsRequest(BaseModel):
+    """Request to apply effects to an existing generation."""
+    effects_chain: List[EffectConfig]
+    source_version_id: Optional[str] = Field(None, description="Version to use as source audio (defaults to clean/original)")
+    label: Optional[str] = Field(None, max_length=100, description="Label for this version (auto-generated if omitted)")
+    set_as_default: bool = Field(default=True, description="Set this version as the default")
+
+
+class ProfileEffectsUpdate(BaseModel):
+    """Request to update the default effects chain on a profile."""
+    effects_chain: Optional[List[EffectConfig]] = Field(None, description="Effects chain (null to remove)")
+
+
+class AvailableEffectParam(BaseModel):
+    """Description of a single effect parameter."""
+    default: float
+    min: float
+    max: float
+    step: float
+    description: str
+
+
+class AvailableEffect(BaseModel):
+    """Description of an available effect type."""
+    type: str
+    label: str
+    description: str
+    params: dict  # param_name -> AvailableEffectParam
+
+
+class AvailableEffectsResponse(BaseModel):
+    """Response listing all available effect types."""
+    effects: List[AvailableEffect]

backend/profiles.py

@@ -8,7 +8,7 @@ import uuid
 import shutil
 from pathlib import Path
 from sqlalchemy.orm import Session
-from sqlalchemy import select
+from sqlalchemy import func, select
 
 from .models import (
     VoiceProfileCreate,
@@ -19,12 +19,43 @@ from .models import (
 from .database import (
     VoiceProfile as DBVoiceProfile,
     ProfileSample as DBProfileSample,
+    Generation as DBGeneration,
 )
+from .models import EffectConfig
 from .utils.audio import validate_reference_audio, load_audio, save_audio
 from .utils.images import validate_image, process_avatar
 from .utils.cache import _get_cache_dir, clear_profile_cache
 from .tts import get_tts_model
 from . import config
+import json as _json
+
+
+def _profile_to_response(
+    profile: DBVoiceProfile,
+    generation_count: int = 0,
+    sample_count: int = 0,
+) -> VoiceProfileResponse:
+    """Convert a DB profile to a VoiceProfileResponse, deserializing effects_chain."""
+    effects_chain = None
+    if profile.effects_chain:
+        try:
+            raw = _json.loads(profile.effects_chain)
+            effects_chain = [EffectConfig(**e) for e in raw]
+        except Exception as e:
+            import logging
+            logging.warning(f"Failed to parse effects_chain for profile {profile.id}: {e}")
+    return VoiceProfileResponse(
+        id=profile.id,
+        name=profile.name,
+        description=profile.description,
+        language=profile.language,
+        avatar_path=profile.avatar_path,
+        effects_chain=effects_chain,
+        generation_count=generation_count,
+        sample_count=sample_count,
+        created_at=profile.created_at,
+        updated_at=profile.updated_at,
+    )
 
 
 def _get_profiles_dir() -> Path:
@@ -72,7 +103,7 @@ async def create_profile(
     profile_dir = _get_profiles_dir() / db_profile.id
     profile_dir.mkdir(parents=True, exist_ok=True)
 
-    return VoiceProfileResponse.model_validate(db_profile)
+    return _profile_to_response(db_profile)
 
 
 async def add_profile_sample(
@@ -154,7 +185,7 @@ async def get_profile(
     if not profile:
         return None
     
-    return VoiceProfileResponse.model_validate(profile)
+    return _profile_to_response(profile)
 
 
 async def get_profile_samples(
@@ -177,7 +208,7 @@ async def get_profile_samples(
 
 async def list_profiles(db: Session) -> List[VoiceProfileResponse]:
     """
-    List all voice profiles.
+    List all voice profiles with generation and sample counts.
     
     Args:
         db: Database session
@@ -188,8 +219,34 @@ async def list_profiles(db: Session) -> List[VoiceProfileResponse]:
     profiles = db.query(DBVoiceProfile).order_by(
         DBVoiceProfile.created_at.desc()
     ).all()
-    
-    return [VoiceProfileResponse.model_validate(p) for p in profiles]
+
+    if not profiles:
+        return []
+
+    # Batch-fetch generation counts
+    gen_counts_rows = (
+        db.query(DBGeneration.profile_id, func.count(DBGeneration.id))
+        .group_by(DBGeneration.profile_id)
+        .all()
+    )
+    gen_counts = {row[0]: row[1] for row in gen_counts_rows}
+
+    # Batch-fetch sample counts
+    sample_counts_rows = (
+        db.query(DBProfileSample.profile_id, func.count(DBProfileSample.id))
+        .group_by(DBProfileSample.profile_id)
+        .all()
+    )
+    sample_counts = {row[0]: row[1] for row in sample_counts_rows}
+
+    return [
+        _profile_to_response(
+            p,
+            generation_count=gen_counts.get(p.id, 0),
+            sample_count=sample_counts.get(p.id, 0),
+        )
+        for p in profiles
+    ]
 
 
 async def update_profile(
@@ -230,7 +287,7 @@ async def update_profile(
     db.commit()
     db.refresh(profile)
 
-    return VoiceProfileResponse.model_validate(profile)
+    return _profile_to_response(profile)
 
 
 async def delete_profile(
@@ -472,7 +529,7 @@ async def upload_avatar(
     db.commit()
     db.refresh(profile)
 
-    return VoiceProfileResponse.model_validate(profile)
+    return _profile_to_response(profile)
 
 
 async def delete_avatar(

backend/requirements.txt

@@ -38,6 +38,7 @@ librosa>=0.10.0
 soundfile>=0.12.0
 numpy>=1.24.0
 numba>=0.60.0,<0.61.0
+pedalboard>=0.9.0
 
 # HTTP client (for CUDA backend download)
 httpx>=0.27.0

backend/server.py

@@ -6,6 +6,14 @@ absolute imports instead of relative imports.
 """
 
 import sys
+
+# Fast path: handle --version before any heavy imports so the Rust
+# version check doesn't block for 30+ seconds loading torch etc.
+if "--version" in sys.argv:
+    from backend import __version__
+    print(f"voicebox-server {__version__}")
+    sys.exit(0)
+
 import logging
 
 # Set up logging FIRST, before any imports that might fail
@@ -43,6 +51,115 @@ except Exception as e:
     logger.error(f"Failed to import required modules: {e}", exc_info=True)
     sys.exit(1)
 
+_watchdog_disabled = False
+
+
+def disable_watchdog():
+    """Disable the parent watchdog so the server keeps running after parent exits."""
+    global _watchdog_disabled
+    _watchdog_disabled = True
+    # Ignore SIGHUP so the server survives when the parent Tauri process exits.
+    # On Unix, child processes receive SIGHUP when the parent's session leader
+    # exits, which would kill the server even though we want it to persist.
+    if sys.platform != "win32":
+        import signal
+        signal.signal(signal.SIGHUP, signal.SIG_IGN)
+
+
+def _start_parent_watchdog(parent_pid, data_dir=None):
+    """Monitor parent process and exit if it dies.
+
+    This is the clean shutdown mechanism: instead of the Tauri app trying to
+    forcefully kill the server (which spawns console windows on Windows),
+    the server monitors its parent and shuts itself down gracefully.
+    """
+    import os
+    import signal
+    import threading
+    import time
+
+    # Set up a file logger so we can debug in production
+    watchdog_logger = logging.getLogger("watchdog")
+    if data_dir:
+        try:
+            log_dir = os.path.join(data_dir, "logs")
+            os.makedirs(log_dir, exist_ok=True)
+            fh = logging.FileHandler(os.path.join(log_dir, "watchdog.log"))
+            fh.setFormatter(logging.Formatter('%(asctime)s - %(message)s'))
+            watchdog_logger.addHandler(fh)
+        except Exception:
+            pass
+    watchdog_logger.setLevel(logging.INFO)
+
+    def _is_pid_alive(pid):
+        """Check if a process with the given PID exists (cross-platform)."""
+        try:
+            if sys.platform == "win32":
+                import ctypes
+                kernel32 = ctypes.windll.kernel32
+                PROCESS_QUERY_LIMITED_INFORMATION = 0x1000
+                handle = kernel32.OpenProcess(PROCESS_QUERY_LIMITED_INFORMATION, False, pid)
+                if handle:
+                    # Check if process has actually exited
+                    STILL_ACTIVE = 259
+                    exit_code = ctypes.c_ulong()
+                    result = kernel32.GetExitCodeProcess(handle, ctypes.byref(exit_code))
+                    kernel32.CloseHandle(handle)
+                    if result and exit_code.value == STILL_ACTIVE:
+                        return True
+                    watchdog_logger.info(f"PID {pid}: exited with code {exit_code.value}")
+                    return False
+                # OpenProcess failed — check if it's an access error (process exists
+                # but we can't open it) vs process not found
+                error = ctypes.GetLastError()
+                ACCESS_DENIED = 5
+                if error == ACCESS_DENIED:
+                    return True  # process exists, we just can't open it
+                watchdog_logger.info(f"PID {pid}: OpenProcess failed, error={error}")
+                return False
+            else:
+                os.kill(pid, 0)
+                return True
+        except (OSError, PermissionError):
+            return False
+
+    def _watch():
+        watchdog_logger.info(f"Parent watchdog started, monitoring PID {parent_pid}, server PID {os.getpid()}")
+        # Verify parent is alive before starting the loop
+        alive = _is_pid_alive(parent_pid)
+        watchdog_logger.info(f"Parent PID {parent_pid} initial check: alive={alive}")
+        if not alive:
+            watchdog_logger.warning(f"Parent PID {parent_pid} not found on first check — disabling watchdog")
+            return
+        while True:
+            if _watchdog_disabled:
+                watchdog_logger.info("Watchdog disabled (keep server running), stopping monitor")
+                return
+            if not _is_pid_alive(parent_pid):
+                # Parent is gone. Before shutting down, give the app a moment
+                # to send /watchdog/disable — there is a race where the Tauri
+                # RunEvent::Exit handler sends the disable request while we are
+                # mid-iteration (already past the _watchdog_disabled check above).
+                watchdog_logger.info(f"Parent process {parent_pid} gone, waiting for possible disable request...")
+                time.sleep(1)
+                if _watchdog_disabled:
+                    watchdog_logger.info("Watchdog was disabled during grace period, keeping server alive")
+                    return
+                watchdog_logger.info("Watchdog still enabled after grace period, shutting down server...")
+                if sys.platform == "win32":
+                    # sys.exit triggers SystemExit, allowing uvicorn to run
+                    # shutdown handlers. os.kill(SIGTERM) on Windows calls
+                    # TerminateProcess which hard-kills without cleanup.
+                    os._exit(0)
+                else:
+                    os.kill(os.getpid(), signal.SIGTERM)
+                return
+            time.sleep(2)
+
+    t = threading.Thread(target=_watch, daemon=True)
+    t.start()
+
+
 if __name__ == "__main__":
     try:
         parser = argparse.ArgumentParser(description="voicebox backend server")
@@ -64,17 +181,21 @@ if __name__ == "__main__":
             default=None,
             help="Data directory for database, profiles, and generated audio",
         )
+        parser.add_argument(
+            "--parent-pid",
+            type=int,
+            default=None,
+            help="PID of parent process to monitor; server exits when parent dies",
+        )
         parser.add_argument(
             "--version",
             action="store_true",
-            help="Print version and exit",
+            help="Print version and exit (handled above, kept for argparse help)",
         )
         args = parser.parse_args()
 
-        if args.version:
-            from backend import __version__
-            print(f"voicebox-server {__version__}")
-            sys.exit(0)
+        if args.parent_pid is not None and args.parent_pid <= 0:
+            parser.error("--parent-pid must be a positive integer")
 
         # Detect backend variant from binary name
         # voicebox-server-cuda → sets VOICEBOX_BACKEND_VARIANT=cuda
@@ -87,6 +208,14 @@ if __name__ == "__main__":
             os.environ["VOICEBOX_BACKEND_VARIANT"] = "cpu"
             logger.info("Backend variant: CPU")
 
+        # Register parent watchdog to start after server is fully ready
+        if args.parent_pid is not None:
+            _parent_pid = args.parent_pid
+            _data_dir = args.data_dir
+            @app.on_event("startup")
+            async def _on_startup():
+                _start_parent_watchdog(_parent_pid, _data_dir)
+
         logger.info(f"Parsed arguments: host={args.host}, port={args.port}, data_dir={args.data_dir}")
 
         # Set data directory if provided

backend/stories.py

@@ -20,12 +20,55 @@ from .models import (
     StoryItemMove,
     StoryItemTrim,
     StoryItemSplit,
+    StoryItemVersionUpdate,
 )
 from .database import Story as DBStory, StoryItem as DBStoryItem, Generation as DBGeneration, VoiceProfile as DBVoiceProfile
+from .history import _get_versions_for_generation
 from .utils.audio import load_audio, save_audio
 import numpy as np
 
 
+def _build_item_detail(
+    item: DBStoryItem,
+    generation: DBGeneration,
+    profile_name: str,
+    db: Session,
+) -> StoryItemDetail:
+    """Build a StoryItemDetail with version info from a story item and its generation."""
+    versions, active_version_id = _get_versions_for_generation(generation.id, db)
+
+    # Resolve the audio path: if version_id is set, use that version's audio
+    audio_path = generation.audio_path
+    if item.version_id and versions:
+        for v in versions:
+            if v.id == item.version_id:
+                audio_path = v.audio_path
+                break
+
+    return StoryItemDetail(
+        id=item.id,
+        story_id=item.story_id,
+        generation_id=item.generation_id,
+        version_id=getattr(item, 'version_id', None),
+        start_time_ms=item.start_time_ms,
+        track=item.track,
+        trim_start_ms=getattr(item, 'trim_start_ms', 0),
+        trim_end_ms=getattr(item, 'trim_end_ms', 0),
+        created_at=item.created_at,
+        profile_id=generation.profile_id,
+        profile_name=profile_name,
+        text=generation.text,
+        language=generation.language,
+        audio_path=audio_path,
+        duration=generation.duration,
+        seed=generation.seed,
+        instruct=generation.instruct,
+        generation_created_at=generation.created_at,
+        versions=versions,
+        active_version_id=active_version_id,
+    )
+
+
 async def create_story(
     data: StoryCreate,
     db: Session,
@@ -125,26 +168,7 @@ async def get_story(
     # Build item details
     item_details = []
     for item, generation, profile_name in items:
-        item_detail = StoryItemDetail(
-            id=item.id,
-            story_id=item.story_id,
-            generation_id=item.generation_id,
-            start_time_ms=item.start_time_ms,
-            track=item.track,
-            trim_start_ms=getattr(item, 'trim_start_ms', 0),
-            trim_end_ms=getattr(item, 'trim_end_ms', 0),
-            created_at=item.created_at,
-            profile_id=generation.profile_id,
-            profile_name=profile_name,
-            text=generation.text,
-            language=generation.language,
-            audio_path=generation.audio_path,
-            duration=generation.duration,
-            seed=generation.seed,
-            instruct=generation.instruct,
-            generation_created_at=generation.created_at,
-        )
-        item_details.append(item_detail)
+        item_details.append(_build_item_detail(item, generation, profile_name, db))
 
     response = StoryDetailResponse.model_validate(story)
     response.items = item_details
@@ -250,31 +274,16 @@ async def add_item_to_story(
     if existing:
         # Return existing item
         profile = db.query(DBVoiceProfile).filter_by(id=generation.profile_id).first()
-        return StoryItemDetail(
-            id=existing.id,
-            story_id=existing.story_id,
-            generation_id=existing.generation_id,
-            start_time_ms=existing.start_time_ms,
-            track=existing.track,
-            trim_start_ms=getattr(existing, 'trim_start_ms', 0),
-            trim_end_ms=getattr(existing, 'trim_end_ms', 0),
-            created_at=existing.created_at,
-            profile_id=generation.profile_id,
-            profile_name=profile.name if profile else "Unknown",
-            text=generation.text,
-            language=generation.language,
-            audio_path=generation.audio_path,
-            duration=generation.duration,
-            seed=generation.seed,
-            instruct=generation.instruct,
-            generation_created_at=generation.created_at,
-        )
+        return _build_item_detail(existing, generation, profile.name if profile else "Unknown", db)
+
+    # Get track from data or default to 0
+    track = data.track if data.track is not None else 0
 
     # Calculate start_time_ms if not provided
     if data.start_time_ms is not None:
         start_time_ms = data.start_time_ms
     else:
-        # Find the maximum end time (start_time_ms + duration_ms) of existing items
+        # Find the maximum end time on the target track only
         existing_items = db.query(
             DBStoryItem,
             DBGeneration
@@ -282,11 +291,11 @@ async def add_item_to_story(
             DBGeneration,
             DBStoryItem.generation_id == DBGeneration.id
         ).filter(
-            DBStoryItem.story_id == story_id
+            DBStoryItem.story_id == story_id,
+            DBStoryItem.track == track,
         ).all()
         
         if not existing_items:
-            # First item starts at 0
             start_time_ms = 0
         else:
             max_end_time_ms = 0
@@ -297,9 +306,6 @@ async def add_item_to_story(
             # Add 200ms gap after the last item
             start_time_ms = max_end_time_ms + 200
 
-    # Get track from data or default to 0
-    track = data.track if data.track is not None else 0
-
     # Create item
     item = DBStoryItem(
         id=str(uuid.uuid4()),
@@ -321,25 +327,7 @@ async def add_item_to_story(
     # Get profile name
     profile = db.query(DBVoiceProfile).filter_by(id=generation.profile_id).first()
 
-    return StoryItemDetail(
-        id=item.id,
-        story_id=item.story_id,
-        generation_id=item.generation_id,
-        start_time_ms=item.start_time_ms,
-        track=item.track,
-        trim_start_ms=getattr(item, 'trim_start_ms', 0),
-        trim_end_ms=getattr(item, 'trim_end_ms', 0),
-        created_at=item.created_at,
-        profile_id=generation.profile_id,
-        profile_name=profile.name if profile else "Unknown",
-        text=generation.text,
-        language=generation.language,
-        audio_path=generation.audio_path,
-        duration=generation.duration,
-        seed=generation.seed,
-        instruct=generation.instruct,
-        generation_created_at=generation.created_at,
-    )
+    return _build_item_detail(item, generation, profile.name if profile else "Unknown", db)
 
 
 async def move_story_item(
@@ -388,25 +376,7 @@ async def move_story_item(
     # Get profile name
     profile = db.query(DBVoiceProfile).filter_by(id=generation.profile_id).first()
 
-    return StoryItemDetail(
-        id=item.id,
-        story_id=item.story_id,
-        generation_id=item.generation_id,
-        start_time_ms=item.start_time_ms,
-        track=item.track,
-        trim_start_ms=getattr(item, 'trim_start_ms', 0),
-        trim_end_ms=getattr(item, 'trim_end_ms', 0),
-        created_at=item.created_at,
-        profile_id=generation.profile_id,
-        profile_name=profile.name if profile else "Unknown",
-        text=generation.text,
-        language=generation.language,
-        audio_path=generation.audio_path,
-        duration=generation.duration,
-        seed=generation.seed,
-        instruct=generation.instruct,
-        generation_created_at=generation.created_at,
-    )
+    return _build_item_detail(item, generation, profile.name if profile else "Unknown", db)
 
 
 async def remove_item_from_story(
@@ -495,25 +465,7 @@ async def trim_story_item(
     # Get profile name
     profile = db.query(DBVoiceProfile).filter_by(id=generation.profile_id).first()
 
-    return StoryItemDetail(
-        id=item.id,
-        story_id=item.story_id,
-        generation_id=item.generation_id,
-        start_time_ms=item.start_time_ms,
-        track=item.track,
-        trim_start_ms=item.trim_start_ms,
-        trim_end_ms=item.trim_end_ms,
-        created_at=item.created_at,
-        profile_id=generation.profile_id,
-        profile_name=profile.name if profile else "Unknown",
-        text=generation.text,
-        language=generation.language,
-        audio_path=generation.audio_path,
-        duration=generation.duration,
-        seed=generation.seed,
-        instruct=generation.instruct,
-        generation_created_at=generation.created_at,
-    )
+    return _build_item_detail(item, generation, profile.name if profile else "Unknown", db)
 
 
 async def split_story_item(
@@ -568,6 +520,7 @@ async def split_story_item(
         id=str(uuid.uuid4()),
         story_id=story_id,
         generation_id=item.generation_id,  # Same generation, different trim
+        version_id=getattr(item, 'version_id', None),  # Preserve pinned version
         start_time_ms=item.start_time_ms + data.split_time_ms,
         track=item.track,
         trim_start_ms=absolute_split_ms,
@@ -590,48 +543,10 @@ async def split_story_item(
     profile = db.query(DBVoiceProfile).filter_by(id=generation.profile_id).first()
     profile_name = profile.name if profile else "Unknown"
 
-    # Build response items
-    original_item_detail = StoryItemDetail(
-        id=item.id,
-        story_id=item.story_id,
-        generation_id=item.generation_id,
-        start_time_ms=item.start_time_ms,
-        track=item.track,
-        trim_start_ms=item.trim_start_ms,
-        trim_end_ms=item.trim_end_ms,
-        created_at=item.created_at,
-        profile_id=generation.profile_id,
-        profile_name=profile_name,
-        text=generation.text,
-        language=generation.language,
-        audio_path=generation.audio_path,
-        duration=generation.duration,
-        seed=generation.seed,
-        instruct=generation.instruct,
-        generation_created_at=generation.created_at,
-    )
-
-    new_item_detail = StoryItemDetail(
-        id=new_item.id,
-        story_id=new_item.story_id,
-        generation_id=new_item.generation_id,
-        start_time_ms=new_item.start_time_ms,
-        track=new_item.track,
-        trim_start_ms=new_item.trim_start_ms,
-        trim_end_ms=new_item.trim_end_ms,
-        created_at=new_item.created_at,
-        profile_id=generation.profile_id,
-        profile_name=profile_name,
-        text=generation.text,
-        language=generation.language,
-        audio_path=generation.audio_path,
-        duration=generation.duration,
-        seed=generation.seed,
-        instruct=generation.instruct,
-        generation_created_at=generation.created_at,
-    )
-
-    return [original_item_detail, new_item_detail]
+    return [
+        _build_item_detail(item, generation, profile_name, db),
+        _build_item_detail(new_item, generation, profile_name, db),
+    ]
 
 
 async def duplicate_story_item(
@@ -674,6 +589,7 @@ async def duplicate_story_item(
         id=str(uuid.uuid4()),
         story_id=story_id,
         generation_id=original_item.generation_id,  # Same generation as original
+        version_id=getattr(original_item, 'version_id', None),  # Preserve pinned version
         start_time_ms=original_item.start_time_ms + effective_duration_ms + 200,  # 200ms gap
         track=original_item.track,
         trim_start_ms=current_trim_start,
@@ -694,25 +610,7 @@ async def duplicate_story_item(
     # Get profile name
     profile = db.query(DBVoiceProfile).filter_by(id=generation.profile_id).first()
 
-    return StoryItemDetail(
-        id=new_item.id,
-        story_id=new_item.story_id,
-        generation_id=new_item.generation_id,
-        start_time_ms=new_item.start_time_ms,
-        track=new_item.track,
-        trim_start_ms=new_item.trim_start_ms,
-        trim_end_ms=new_item.trim_end_ms,
-        created_at=new_item.created_at,
-        profile_id=generation.profile_id,
-        profile_name=profile.name if profile else "Unknown",
-        text=generation.text,
-        language=generation.language,
-        audio_path=generation.audio_path,
-        duration=generation.duration,
-        seed=generation.seed,
-        instruct=generation.instruct,
-        generation_created_at=generation.created_at,
-    )
+    return _build_item_detail(new_item, generation, profile.name if profile else "Unknown", db)
 
 
 async def update_story_item_times(
@@ -813,25 +711,7 @@ async def reorder_story_items(
         current_time_ms += duration_ms + gap_ms
 
         # Build the response item
-        updated_items.append(StoryItemDetail(
-            id=item.id,
-            story_id=item.story_id,
-            generation_id=item.generation_id,
-            start_time_ms=item.start_time_ms,
-            track=item.track,
-            trim_start_ms=getattr(item, 'trim_start_ms', 0),
-            trim_end_ms=getattr(item, 'trim_end_ms', 0),
-            created_at=item.created_at,
-            profile_id=generation.profile_id,
-            profile_name=profile_name,
-            text=generation.text,
-            language=generation.language,
-            audio_path=generation.audio_path,
-            duration=generation.duration,
-            seed=generation.seed,
-            instruct=generation.instruct,
-            generation_created_at=generation.created_at,
-        ))
+        updated_items.append(_build_item_detail(item, generation, profile_name, db))
 
     # Update story updated_at
     story.updated_at = datetime.utcnow()
@@ -840,6 +720,60 @@ async def reorder_story_items(
     return updated_items
 
 
+async def set_story_item_version(
+    story_id: str,
+    item_id: str,
+    data: StoryItemVersionUpdate,
+    db: Session,
+) -> Optional[StoryItemDetail]:
+    """
+    Pin a story item to a specific generation version.
+
+    Args:
+        story_id: Story ID
+        item_id: Story item ID
+        data: Version update data (version_id or null for default)
+        db: Database session
+
+    Returns:
+        Updated item detail or None if not found
+    """
+    item = db.query(DBStoryItem).filter_by(
+        id=item_id,
+        story_id=story_id,
+    ).first()
+    if not item:
+        return None
+
+    generation = db.query(DBGeneration).filter_by(id=item.generation_id).first()
+    if not generation:
+        return None
+
+    # Validate version_id belongs to this generation if provided
+    if data.version_id:
+        from .database import GenerationVersion as DBGenerationVersion
+        version = db.query(DBGenerationVersion).filter_by(
+            id=data.version_id,
+            generation_id=item.generation_id,
+        ).first()
+        if not version:
+            return None
+
+    item.version_id = data.version_id
+
+    # Update story updated_at
+    story = db.query(DBStory).filter_by(id=story_id).first()
+    if story:
+        story.updated_at = datetime.utcnow()
+
+    db.commit()
+    db.refresh(item)
+
+    profile = db.query(DBVoiceProfile).filter_by(id=generation.profile_id).first()
+
+    return _build_item_detail(item, generation, profile.name if profile else "Unknown", db)
+
+
 async def export_story_audio(
     story_id: str,
     db: Session,
@@ -877,7 +811,15 @@ async def export_story_audio(
     sample_rate = 24000  # Default sample rate
 
     for item, generation in items:
-        audio_path = Path(generation.audio_path)
+        # Resolve audio path: use pinned version if set, otherwise generation default
+        resolved_audio_path = generation.audio_path
+        if getattr(item, 'version_id', None):
+            from .database import GenerationVersion as DBGenerationVersion
+            version = db.query(DBGenerationVersion).filter_by(id=item.version_id).first()
+            if version:
+                resolved_audio_path = version.audio_path
+
+        audio_path = Path(resolved_audio_path)
         if not audio_path.exists():
             continue
 

backend/utils/chunked_tts.py

@@ -0,0 +1,302 @@
+"""
+Chunked TTS generation utilities.
+
+Splits long text into sentence-boundary chunks, generates audio per-chunk
+via any TTSBackend, and concatenates with crossfade.  All logic is
+engine-agnostic — it wraps the standard ``TTSBackend.generate()`` interface.
+
+Short text (≤ max_chunk_chars) uses the single-shot fast path with zero
+overhead.
+"""
+
+import logging
+import re
+from typing import List, Tuple
+
+import numpy as np
+
+logger = logging.getLogger("voicebox.chunked-tts")
+
+# Default chunk size in characters.  Can be overridden per-request via
+# the ``max_chunk_chars`` field on GenerationRequest.
+DEFAULT_MAX_CHUNK_CHARS = 800
+
+# Common abbreviations that should NOT be treated as sentence endings.
+# Lowercase for case-insensitive matching.
+_ABBREVIATIONS = frozenset(
+    {
+        "mr",
+        "mrs",
+        "ms",
+        "dr",
+        "prof",
+        "sr",
+        "jr",
+        "st",
+        "ave",
+        "blvd",
+        "inc",
+        "ltd",
+        "corp",
+        "dept",
+        "est",
+        "approx",
+        "vs",
+        "etc",
+        "e.g",
+        "i.e",
+        "a.m",
+        "p.m",
+        "u.s",
+        "u.s.a",
+        "u.k",
+    }
+)
+
+# Paralinguistic tags used by Chatterbox Turbo.  The splitter must never
+# cut inside one of these.
+_PARA_TAG_RE = re.compile(r"\[[^\]]*\]")
+
+
+# ---------------------------------------------------------------------------
+# Text splitting
+# ---------------------------------------------------------------------------
+
+
+def split_text_into_chunks(text: str, max_chars: int = DEFAULT_MAX_CHUNK_CHARS) -> List[str]:
+    """Split *text* at natural boundaries into chunks of at most *max_chars*.
+
+    Priority: sentence-end (``.!?`` not preceded by an abbreviation and not
+    inside brackets) → clause boundary (``;:,—``) → whitespace → hard cut.
+
+    Paralinguistic tags like ``[laugh]`` are treated as atomic and will not
+    be split across chunks.
+    """
+    text = text.strip()
+    if not text:
+        return []
+    if len(text) <= max_chars:
+        return [text]
+
+    chunks: List[str] = []
+    remaining = text
+
+    while remaining:
+        remaining = remaining.lstrip()
+        if not remaining:
+            break
+        if len(remaining) <= max_chars:
+            chunks.append(remaining)
+            break
+
+        segment = remaining[:max_chars]
+
+        # Try to split at the last real sentence ending
+        split_pos = _find_last_sentence_end(segment)
+        if split_pos == -1:
+            split_pos = _find_last_clause_boundary(segment)
+        if split_pos == -1:
+            split_pos = segment.rfind(" ")
+        if split_pos == -1:
+            # Absolute fallback: hard cut but avoid splitting inside a tag
+            split_pos = _safe_hard_cut(segment, max_chars)
+
+        chunk = remaining[: split_pos + 1].strip()
+        if chunk:
+            chunks.append(chunk)
+        remaining = remaining[split_pos + 1 :]
+
+    return chunks
+
+
+def _find_last_sentence_end(text: str) -> int:
+    """Return the index of the last sentence-ending punctuation in *text*.
+
+    Skips periods that follow common abbreviations (``Dr.``, ``Mr.``, etc.)
+    and periods inside bracket tags (``[laugh]``).  Also handles CJK
+    sentence-ending punctuation (``。！？``).
+    """
+    best = -1
+    # ASCII sentence ends
+    for m in re.finditer(r"[.!?](?:\s|$)", text):
+        pos = m.start()
+        char = text[pos]
+        # Skip periods after abbreviations
+        if char == ".":
+            # Walk backwards to find the preceding word
+            word_start = pos - 1
+            while word_start >= 0 and text[word_start].isalpha():
+                word_start -= 1
+            word = text[word_start + 1 : pos].lower()
+            if word in _ABBREVIATIONS:
+                continue
+            # Skip decimal numbers (digit immediately before the period)
+            if word_start >= 0 and text[word_start].isdigit():
+                continue
+        # Skip if we're inside a bracket tag
+        if _inside_bracket_tag(text, pos):
+            continue
+        best = pos
+    # CJK sentence-ending punctuation
+    for m in re.finditer(r"[\u3002\uff01\uff1f]", text):
+        if m.start() > best:
+            best = m.start()
+    return best
+
+
+def _find_last_clause_boundary(text: str) -> int:
+    """Return the index of the last clause-boundary punctuation."""
+    best = -1
+    for m in re.finditer(r"[;:,\u2014](?:\s|$)", text):
+        pos = m.start()
+        # Skip if inside a bracket tag
+        if _inside_bracket_tag(text, pos):
+            continue
+        best = pos
+    return best
+
+
+def _inside_bracket_tag(text: str, pos: int) -> bool:
+    """Return True if *pos* falls inside a ``[...]`` tag."""
+    for m in _PARA_TAG_RE.finditer(text):
+        if m.start() < pos < m.end():
+            return True
+    return False
+
+
+def _safe_hard_cut(segment: str, max_chars: int) -> int:
+    """Find a hard-cut position that doesn't split a ``[tag]``."""
+    cut = max_chars - 1
+    # Check if the cut falls inside a bracket tag; if so, move before it
+    for m in _PARA_TAG_RE.finditer(segment):
+        if m.start() < cut < m.end():
+            return m.start() - 1 if m.start() > 0 else cut
+    return cut
+
+
+# ---------------------------------------------------------------------------
+# Audio concatenation
+# ---------------------------------------------------------------------------
+
+
+def concatenate_audio_chunks(
+    chunks: List[np.ndarray],
+    sample_rate: int,
+    crossfade_ms: int = 50,
+) -> np.ndarray:
+    """Concatenate audio arrays with a short crossfade to eliminate clicks.
+
+    Each chunk is expected to be a 1-D float32 ndarray at *sample_rate* Hz.
+    """
+    if not chunks:
+        return np.array([], dtype=np.float32)
+    if len(chunks) == 1:
+        return chunks[0]
+
+    crossfade_samples = int(sample_rate * crossfade_ms / 1000)
+    result = np.array(chunks[0], dtype=np.float32, copy=True)
+
+    for chunk in chunks[1:]:
+        if len(chunk) == 0:
+            continue
+        overlap = min(crossfade_samples, len(result), len(chunk))
+        if overlap > 0:
+            fade_out = np.linspace(1.0, 0.0, overlap, dtype=np.float32)
+            fade_in = np.linspace(0.0, 1.0, overlap, dtype=np.float32)
+            result[-overlap:] = result[-overlap:] * fade_out + chunk[:overlap] * fade_in
+            result = np.concatenate([result, chunk[overlap:]])
+        else:
+            result = np.concatenate([result, chunk])
+
+    return result
+
+
+# ---------------------------------------------------------------------------
+# Engine-agnostic chunked generation
+# ---------------------------------------------------------------------------
+
+
+async def generate_chunked(
+    backend,
+    text: str,
+    voice_prompt: dict,
+    language: str = "en",
+    seed: int | None = None,
+    instruct: str | None = None,
+    max_chunk_chars: int = DEFAULT_MAX_CHUNK_CHARS,
+    crossfade_ms: int = 50,
+    trim_fn=None,
+) -> Tuple[np.ndarray, int]:
+    """Generate audio with automatic chunking for long text.
+
+    For text shorter than *max_chunk_chars* this is a thin wrapper around
+    ``backend.generate()`` with zero overhead.
+
+    For longer text the input is split at natural sentence boundaries,
+    each chunk is generated independently, optionally trimmed (useful for
+    Chatterbox engines that hallucinate trailing noise), and the results
+    are concatenated with a crossfade (or hard cut if *crossfade_ms* is 0).
+
+    Parameters
+    ----------
+    backend : TTSBackend
+        Any backend implementing the ``generate()`` protocol.
+    text : str
+        Input text (may be arbitrarily long).
+    voice_prompt, language, seed, instruct
+        Forwarded to ``backend.generate()`` verbatim.
+    max_chunk_chars : int
+        Maximum characters per chunk (default 800).
+    crossfade_ms : int
+        Crossfade duration in milliseconds between chunks.  0 for a hard
+        cut with no overlap (default 50).
+    trim_fn : callable | None
+        Optional ``(audio, sample_rate) -> audio`` post-processing
+        function applied to each chunk before concatenation (e.g.
+        ``trim_tts_output`` for Chatterbox engines).
+
+    Returns
+    -------
+    (audio, sample_rate) : Tuple[np.ndarray, int]
+    """
+    chunks = split_text_into_chunks(text, max_chunk_chars)
+
+    if len(chunks) <= 1:
+        # Short text — single-shot fast path
+        audio, sample_rate = await backend.generate(
+            text, voice_prompt, language, seed, instruct,
+        )
+        if trim_fn is not None:
+            audio = trim_fn(audio, sample_rate)
+        return audio, sample_rate
+
+    # Long text — chunked generation
+    logger.info(
+        "Splitting %d chars into %d chunks (max %d chars each)",
+        len(text), len(chunks), max_chunk_chars,
+    )
+    audio_chunks: List[np.ndarray] = []
+    sample_rate: int | None = None
+
+    for i, chunk_text in enumerate(chunks):
+        logger.info(
+            "Generating chunk %d/%d (%d chars)",
+            i + 1, len(chunks), len(chunk_text),
+        )
+        # Vary the seed per chunk to avoid correlated RNG artefacts,
+        # but keep it deterministic so the same (text, seed) pair
+        # always produces the same output.
+        chunk_seed = (seed + i) if seed is not None else None
+
+        chunk_audio, chunk_sr = await backend.generate(
+            chunk_text, voice_prompt, language, chunk_seed, instruct,
+        )
+        if trim_fn is not None:
+            chunk_audio = trim_fn(chunk_audio, chunk_sr)
+
+        audio_chunks.append(np.asarray(chunk_audio, dtype=np.float32))
+        if sample_rate is None:
+            sample_rate = chunk_sr
+
+    audio = concatenate_audio_chunks(audio_chunks, sample_rate, crossfade_ms=crossfade_ms)
+    return audio, sample_rate

backend/utils/effects.py

@@ -0,0 +1,356 @@
+"""
+Audio post-processing effects engine.
+
+Uses Spotify's pedalboard library to apply professional-grade DSP effects
+to generated audio. Effects are described as a JSON-serializable chain
+(list of effect dicts) so they can be stored in the database and sent
+over the API.
+
+Supported effect types:
+  - chorus      (flanger-style with short delays)
+  - reverb      (room reverb)
+  - delay       (echo / delay line)
+  - compressor  (dynamic range compression)
+  - gain        (volume adjustment in dB)
+  - highpass     (high-pass filter)
+  - lowpass      (low-pass filter)
+  - pitch_shift (semitone pitch shifting)
+"""
+
+from __future__ import annotations
+
+import numpy as np
+from typing import Any, Dict, List, Optional
+
+from pedalboard import (
+    Pedalboard,
+    Chorus,
+    Reverb,
+    Compressor,
+    Gain,
+    HighpassFilter,
+    LowpassFilter,
+    Delay,
+    PitchShift,
+)
+
+
+# ---------------------------------------------------------------------------
+# Effect registry: maps type names -> (pedalboard class, param definitions)
+# ---------------------------------------------------------------------------
+
+# Each param definition: (default, min, max, description)
+EFFECT_REGISTRY: Dict[str, Dict[str, Any]] = {
+    "chorus": {
+        "cls": Chorus,
+        "label": "Chorus / Flanger",
+        "description": "Modulated delay for flanging or chorus effects. Short centre_delay_ms (<10) gives flanger; longer gives chorus.",
+        "params": {
+            "rate_hz":          {"default": 1.0,  "min": 0.01, "max": 20.0,  "step": 0.01, "description": "LFO speed (Hz)"},
+            "depth":            {"default": 0.5,  "min": 0.0,  "max": 1.0,   "step": 0.01, "description": "Modulation depth"},
+            "feedback":         {"default": 0.0,  "min": 0.0,  "max": 0.95,  "step": 0.01, "description": "Feedback amount"},
+            "centre_delay_ms":  {"default": 7.0,  "min": 0.5,  "max": 50.0,  "step": 0.1,  "description": "Centre delay (ms)"},
+            "mix":              {"default": 0.5,  "min": 0.0,  "max": 1.0,   "step": 0.01, "description": "Wet/dry mix"},
+        },
+    },
+    "reverb": {
+        "cls": Reverb,
+        "label": "Reverb",
+        "description": "Room reverb effect.",
+        "params": {
+            "room_size":  {"default": 0.5,  "min": 0.0,  "max": 1.0,  "step": 0.01, "description": "Room size"},
+            "damping":    {"default": 0.5,  "min": 0.0,  "max": 1.0,  "step": 0.01, "description": "High frequency damping"},
+            "wet_level":  {"default": 0.33, "min": 0.0,  "max": 1.0,  "step": 0.01, "description": "Wet level"},
+            "dry_level":  {"default": 0.4,  "min": 0.0,  "max": 1.0,  "step": 0.01, "description": "Dry level"},
+            "width":      {"default": 1.0,  "min": 0.0,  "max": 1.0,  "step": 0.01, "description": "Stereo width"},
+        },
+    },
+    "delay": {
+        "cls": Delay,
+        "label": "Delay",
+        "description": "Echo / delay line.",
+        "params": {
+            "delay_seconds": {"default": 0.3,  "min": 0.01, "max": 2.0,  "step": 0.01, "description": "Delay time (seconds)"},
+            "feedback":      {"default": 0.3,  "min": 0.0,  "max": 0.95, "step": 0.01, "description": "Feedback amount"},
+            "mix":           {"default": 0.3,  "min": 0.0,  "max": 1.0,  "step": 0.01, "description": "Wet/dry mix"},
+        },
+    },
+    "compressor": {
+        "cls": Compressor,
+        "label": "Compressor",
+        "description": "Dynamic range compression for consistent loudness.",
+        "params": {
+            "threshold_db": {"default": -20.0, "min": -60.0, "max": 0.0,   "step": 0.5, "description": "Threshold (dB)"},
+            "ratio":        {"default": 4.0,   "min": 1.0,   "max": 20.0,  "step": 0.1, "description": "Compression ratio"},
+            "attack_ms":    {"default": 10.0,  "min": 0.1,   "max": 100.0, "step": 0.1, "description": "Attack time (ms)"},
+            "release_ms":   {"default": 100.0, "min": 10.0,  "max": 1000.0,"step": 1.0, "description": "Release time (ms)"},
+        },
+    },
+    "gain": {
+        "cls": Gain,
+        "label": "Gain",
+        "description": "Volume adjustment in decibels.",
+        "params": {
+            "gain_db": {"default": 0.0, "min": -40.0, "max": 40.0, "step": 0.5, "description": "Gain (dB)"},
+        },
+    },
+    "highpass": {
+        "cls": HighpassFilter,
+        "label": "High-Pass Filter",
+        "description": "Removes frequencies below the cutoff.",
+        "params": {
+            "cutoff_frequency_hz": {"default": 80.0, "min": 20.0, "max": 8000.0, "step": 1.0, "description": "Cutoff frequency (Hz)"},
+        },
+    },
+    "lowpass": {
+        "cls": LowpassFilter,
+        "label": "Low-Pass Filter",
+        "description": "Removes frequencies above the cutoff.",
+        "params": {
+            "cutoff_frequency_hz": {"default": 8000.0, "min": 200.0, "max": 20000.0, "step": 1.0, "description": "Cutoff frequency (Hz)"},
+        },
+    },
+    "pitch_shift": {
+        "cls": PitchShift,
+        "label": "Pitch Shift",
+        "description": "Shift pitch up or down by semitones.",
+        "params": {
+            "semitones": {"default": 0.0, "min": -12.0, "max": 12.0, "step": 0.5, "description": "Semitones to shift"},
+        },
+    },
+}
+
+
+# ---------------------------------------------------------------------------
+# Built-in presets
+# ---------------------------------------------------------------------------
+
+BUILTIN_PRESETS: Dict[str, Dict[str, Any]] = {
+    "robotic": {
+        "name": "Robotic",
+        "sort_order": 0,
+        "description": "Metallic robotic voice (flanger with slow LFO and high feedback)",
+        "effects_chain": [
+            {
+                "type": "chorus",
+                "enabled": True,
+                "params": {
+                    "rate_hz": 0.2,
+                    "depth": 1.0,
+                    "feedback": 0.35,
+                    "centre_delay_ms": 7.0,
+                    "mix": 0.5,
+                },
+            },
+        ],
+    },
+    "radio": {
+        "name": "Radio",
+        "sort_order": 1,
+        "description": "Thin AM-radio voice with band-pass filtering and light compression",
+        "effects_chain": [
+            {
+                "type": "highpass",
+                "enabled": True,
+                "params": {"cutoff_frequency_hz": 300.0},
+            },
+            {
+                "type": "lowpass",
+                "enabled": True,
+                "params": {"cutoff_frequency_hz": 3500.0},
+            },
+            {
+                "type": "compressor",
+                "enabled": True,
+                "params": {
+                    "threshold_db": -15.0,
+                    "ratio": 6.0,
+                    "attack_ms": 5.0,
+                    "release_ms": 50.0,
+                },
+            },
+            {
+                "type": "gain",
+                "enabled": True,
+                "params": {"gain_db": 6.0},
+            },
+        ],
+    },
+    "echo_chamber": {
+        "name": "Echo Chamber",
+        "sort_order": 2,
+        "description": "Spacious reverb with trailing echo",
+        "effects_chain": [
+            {
+                "type": "reverb",
+                "enabled": True,
+                "params": {
+                    "room_size": 0.85,
+                    "damping": 0.3,
+                    "wet_level": 0.45,
+                    "dry_level": 0.55,
+                    "width": 1.0,
+                },
+            },
+            {
+                "type": "delay",
+                "enabled": True,
+                "params": {
+                    "delay_seconds": 0.25,
+                    "feedback": 0.3,
+                    "mix": 0.2,
+                },
+            },
+        ],
+    },
+    "deep_voice": {
+        "name": "Deep Voice",
+        "sort_order": 99,
+        "description": "Lower pitch with added warmth",
+        "effects_chain": [
+            {
+                "type": "pitch_shift",
+                "enabled": True,
+                "params": {"semitones": -3.0},
+            },
+            {
+                "type": "lowpass",
+                "enabled": True,
+                "params": {"cutoff_frequency_hz": 6000.0},
+            },
+            {
+                "type": "compressor",
+                "enabled": True,
+                "params": {
+                    "threshold_db": -18.0,
+                    "ratio": 3.0,
+                    "attack_ms": 10.0,
+                    "release_ms": 150.0,
+                },
+            },
+        ],
+    },
+}
+
+
+# ---------------------------------------------------------------------------
+# Public API
+# ---------------------------------------------------------------------------
+
+def get_available_effects() -> List[Dict[str, Any]]:
+    """Return the list of available effect types with their parameter definitions.
+
+    Used by the frontend to build the effects chain editor UI.
+    """
+    result = []
+    for effect_type, info in EFFECT_REGISTRY.items():
+        result.append({
+            "type": effect_type,
+            "label": info["label"],
+            "description": info["description"],
+            "params": {
+                name: {k: v for k, v in pdef.items()}
+                for name, pdef in info["params"].items()
+            },
+        })
+    return result
+
+
+def get_builtin_presets() -> Dict[str, Dict[str, Any]]:
+    """Return all built-in effect presets."""
+    return BUILTIN_PRESETS
+
+
+def validate_effects_chain(effects_chain: List[Dict[str, Any]]) -> Optional[str]:
+    """Validate an effects chain configuration.
+
+    Returns None if valid, or an error message string.
+    """
+    if not isinstance(effects_chain, list):
+        return "effects_chain must be a list"
+
+    for i, effect in enumerate(effects_chain):
+        if not isinstance(effect, dict):
+            return f"Effect at index {i} must be a dict"
+
+        effect_type = effect.get("type")
+        if effect_type not in EFFECT_REGISTRY:
+            return f"Unknown effect type '{effect_type}' at index {i}. Available: {list(EFFECT_REGISTRY.keys())}"
+
+        params = effect.get("params", {})
+        if not isinstance(params, dict):
+            return f"Effect '{effect_type}' at index {i}: params must be a dict"
+
+        registry = EFFECT_REGISTRY[effect_type]
+        for param_name, value in params.items():
+            if param_name not in registry["params"]:
+                return f"Effect '{effect_type}' at index {i}: unknown param '{param_name}'"
+
+            pdef = registry["params"][param_name]
+            if not isinstance(value, (int, float)):
+                return f"Effect '{effect_type}' at index {i}: param '{param_name}' must be a number"
+            if value < pdef["min"] or value > pdef["max"]:
+                return (
+                    f"Effect '{effect_type}' at index {i}: param '{param_name}' "
+                    f"must be between {pdef['min']} and {pdef['max']} (got {value})"
+                )
+
+    return None
+
+
+def build_pedalboard(effects_chain: List[Dict[str, Any]]) -> Pedalboard:
+    """Build a Pedalboard instance from an effects chain config.
+
+    Skips effects where ``enabled`` is ``False``.
+    """
+    plugins = []
+    for effect in effects_chain:
+        if not effect.get("enabled", True):
+            continue
+
+        effect_type = effect["type"]
+        registry = EFFECT_REGISTRY[effect_type]
+        cls = registry["cls"]
+
+        # Merge defaults with provided params
+        params = {}
+        for pname, pdef in registry["params"].items():
+            params[pname] = effect.get("params", {}).get(pname, pdef["default"])
+
+        plugins.append(cls(**params))
+
+    return Pedalboard(plugins)
+
+
+def apply_effects(
+    audio: np.ndarray,
+    sample_rate: int,
+    effects_chain: List[Dict[str, Any]],
+) -> np.ndarray:
+    """Apply an effects chain to audio data.
+
+    Args:
+        audio: Input audio array (1-D mono float32).
+        sample_rate: Sample rate in Hz.
+        effects_chain: List of effect configuration dicts.
+
+    Returns:
+        Processed audio array.
+    """
+    if not effects_chain:
+        return audio
+
+    board = build_pedalboard(effects_chain)
+
+    # pedalboard expects shape (channels, samples)
+    if audio.ndim == 1:
+        audio_2d = audio[np.newaxis, :]
+    else:
+        audio_2d = audio
+
+    processed = board(audio_2d.astype(np.float32), sample_rate)
+
+    # Return same dimensionality as input
+    if audio.ndim == 1:
+        return processed[0]
+    return processed

backend/versions.py

@@ -0,0 +1,211 @@
+"""
+Generation versions management module.
+
+Each generation can have multiple audio versions: a clean (unprocessed)
+version and any number of processed versions with different effects chains.
+"""
+
+from __future__ import annotations
+
+import json
+import uuid
+from pathlib import Path
+from typing import List, Optional
+
+from sqlalchemy.orm import Session
+
+from .database import (
+    GenerationVersion as DBGenerationVersion,
+    Generation as DBGeneration,
+)
+from .models import GenerationVersionResponse, EffectConfig
+from . import config
+
+
+def _version_response(v: DBGenerationVersion) -> GenerationVersionResponse:
+    """Convert a DB version row to a Pydantic response."""
+    effects_chain = None
+    if v.effects_chain:
+        raw = json.loads(v.effects_chain)
+        effects_chain = [EffectConfig(**e) for e in raw]
+    return GenerationVersionResponse(
+        id=v.id,
+        generation_id=v.generation_id,
+        label=v.label,
+        audio_path=v.audio_path,
+        effects_chain=effects_chain,
+        source_version_id=v.source_version_id,
+        is_default=v.is_default,
+        created_at=v.created_at,
+    )
+
+
+def list_versions(generation_id: str, db: Session) -> List[GenerationVersionResponse]:
+    """List all versions for a generation."""
+    versions = (
+        db.query(DBGenerationVersion)
+        .filter_by(generation_id=generation_id)
+        .order_by(DBGenerationVersion.created_at)
+        .all()
+    )
+    return [_version_response(v) for v in versions]
+
+
+def get_version(version_id: str, db: Session) -> Optional[GenerationVersionResponse]:
+    """Get a specific version by ID."""
+    v = db.query(DBGenerationVersion).filter_by(id=version_id).first()
+    if not v:
+        return None
+    return _version_response(v)
+
+
+def get_default_version(generation_id: str, db: Session) -> Optional[GenerationVersionResponse]:
+    """Get the default version for a generation."""
+    v = (
+        db.query(DBGenerationVersion)
+        .filter_by(generation_id=generation_id, is_default=True)
+        .first()
+    )
+    if not v:
+        # Fallback: return the first version
+        v = (
+            db.query(DBGenerationVersion)
+            .filter_by(generation_id=generation_id)
+            .order_by(DBGenerationVersion.created_at)
+            .first()
+        )
+    if not v:
+        return None
+    return _version_response(v)
+
+
+def create_version(
+    generation_id: str,
+    label: str,
+    audio_path: str,
+    db: Session,
+    effects_chain: Optional[List[dict]] = None,
+    is_default: bool = False,
+    source_version_id: Optional[str] = None,
+) -> GenerationVersionResponse:
+    """Create a new version for a generation.
+
+    If ``is_default`` is True, all other versions for this generation
+    are un-defaulted first.
+    """
+    if is_default:
+        _clear_defaults(generation_id, db)
+
+    version = DBGenerationVersion(
+        id=str(uuid.uuid4()),
+        generation_id=generation_id,
+        label=label,
+        audio_path=audio_path,
+        effects_chain=json.dumps(effects_chain) if effects_chain else None,
+        source_version_id=source_version_id,
+        is_default=is_default,
+    )
+    db.add(version)
+    db.commit()
+    db.refresh(version)
+
+    # If this version is the default, update the generation's audio_path
+    if is_default:
+        gen = db.query(DBGeneration).filter_by(id=generation_id).first()
+        if gen:
+            gen.audio_path = audio_path
+            db.commit()
+
+    return _version_response(version)
+
+
+def set_default_version(version_id: str, db: Session) -> Optional[GenerationVersionResponse]:
+    """Set a version as the default for its generation."""
+    version = db.query(DBGenerationVersion).filter_by(id=version_id).first()
+    if not version:
+        return None
+
+    _clear_defaults(version.generation_id, db)
+    version.is_default = True
+    db.commit()
+    db.refresh(version)
+
+    # Update generation's audio_path to point to this version
+    gen = db.query(DBGeneration).filter_by(id=version.generation_id).first()
+    if gen:
+        gen.audio_path = version.audio_path
+        db.commit()
+
+    return _version_response(version)
+
+
+def delete_version(version_id: str, db: Session) -> bool:
+    """Delete a version. Cannot delete the last remaining version."""
+    version = db.query(DBGenerationVersion).filter_by(id=version_id).first()
+    if not version:
+        return False
+
+    # Don't allow deleting the last version
+    count = (
+        db.query(DBGenerationVersion)
+        .filter_by(generation_id=version.generation_id)
+        .count()
+    )
+    if count <= 1:
+        return False
+
+    was_default = version.is_default
+    gen_id = version.generation_id
+
+    # Delete audio file
+    audio_path = Path(version.audio_path)
+    if audio_path.exists():
+        audio_path.unlink()
+
+    db.delete(version)
+    db.commit()
+
+    # If this was the default, promote the first remaining version
+    if was_default:
+        first = (
+            db.query(DBGenerationVersion)
+            .filter_by(generation_id=gen_id)
+            .order_by(DBGenerationVersion.created_at)
+            .first()
+        )
+        if first:
+            first.is_default = True
+            db.commit()
+            gen = db.query(DBGeneration).filter_by(id=gen_id).first()
+            if gen:
+                gen.audio_path = first.audio_path
+                db.commit()
+
+    return True
+
+
+def delete_versions_for_generation(generation_id: str, db: Session) -> int:
+    """Delete all versions for a generation (used when deleting a generation)."""
+    versions = (
+        db.query(DBGenerationVersion)
+        .filter_by(generation_id=generation_id)
+        .all()
+    )
+    count = 0
+    for v in versions:
+        audio_path = Path(v.audio_path)
+        if audio_path.exists():
+            audio_path.unlink()
+        db.delete(v)
+        count += 1
+    if count > 0:
+        db.commit()
+    return count
+
+
+def _clear_defaults(generation_id: str, db: Session) -> None:
+    """Clear the is_default flag on all versions for a generation."""
+    db.query(DBGenerationVersion).filter_by(
+        generation_id=generation_id, is_default=True
+    ).update({"is_default": False})
+    db.flush()

backend/voicebox-server.spec

@@ -1,35 +1,34 @@
 # -*- mode: python ; coding: utf-8 -*-
 from PyInstaller.utils.hooks import collect_data_files
 from PyInstaller.utils.hooks import collect_submodules
+from PyInstaller.utils.hooks import collect_all
 from PyInstaller.utils.hooks import copy_metadata
 
 datas = []
-hiddenimports = ['backend', 'backend.main', 'backend.config', 'backend.database', 'backend.models', 'backend.profiles', 'backend.history', 'backend.tts', 'backend.transcribe', 'backend.platform_detect', 'backend.backends', 'backend.backends.pytorch_backend', 'backend.utils.audio', 'backend.utils.cache', 'backend.utils.progress', 'backend.utils.hf_progress', 'backend.utils.validation', 'torch', 'transformers', 'fastapi', 'uvicorn', 'sqlalchemy', 'librosa', 'soundfile', 'qwen_tts', 'qwen_tts.inference', 'qwen_tts.inference.qwen3_tts_model', 'qwen_tts.inference.qwen3_tts_tokenizer', 'qwen_tts.core', 'qwen_tts.cli', 'pkg_resources.extern', 'backend.backends.mlx_backend', 'mlx', 'mlx.core', 'mlx.nn', 'mlx_audio', 'mlx_audio.tts', 'mlx_audio.stt']
+binaries = []
+hiddenimports = ['backend', 'backend.main', 'backend.config', 'backend.database', 'backend.models', 'backend.profiles', 'backend.history', 'backend.tts', 'backend.transcribe', 'backend.platform_detect', 'backend.backends', 'backend.backends.pytorch_backend', 'backend.utils.audio', 'backend.utils.cache', 'backend.utils.progress', 'backend.utils.hf_progress', 'backend.utils.validation', 'backend.cuda_download', 'backend.effects', 'backend.utils.effects', 'backend.versions', 'pedalboard', 'torch', 'transformers', 'fastapi', 'uvicorn', 'sqlalchemy', 'librosa', 'soundfile', 'qwen_tts', 'qwen_tts.inference', 'qwen_tts.inference.qwen3_tts_model', 'qwen_tts.inference.qwen3_tts_tokenizer', 'qwen_tts.core', 'qwen_tts.cli', 'pkg_resources.extern', 'backend.backends.mlx_backend', 'mlx', 'mlx.core', 'mlx.nn', 'mlx_audio', 'mlx_audio.tts', 'mlx_audio.stt']
 datas += collect_data_files('qwen_tts')
-# Use collect_all (not collect_data_files) so native .dylib and .metallib
-# files are bundled as binaries, not data. Without this, MLX raises OSError
-# when loading Metal shaders inside the PyInstaller bundle.
-from PyInstaller.utils.hooks import collect_all as _collect_all
-_mlx_datas, _mlx_bins, _mlx_hidden = _collect_all('mlx')
-_mlxa_datas, _mlxa_bins, _mlxa_hidden = _collect_all('mlx_audio')
-datas += _mlx_datas + _mlxa_datas
 datas += copy_metadata('qwen-tts')
 hiddenimports += collect_submodules('qwen_tts')
 hiddenimports += collect_submodules('jaraco')
 hiddenimports += collect_submodules('mlx')
 hiddenimports += collect_submodules('mlx_audio')
+tmp_ret = collect_all('mlx')
+datas += tmp_ret[0]; binaries += tmp_ret[1]; hiddenimports += tmp_ret[2]
+tmp_ret = collect_all('mlx_audio')
+datas += tmp_ret[0]; binaries += tmp_ret[1]; hiddenimports += tmp_ret[2]
 
 
 a = Analysis(
     ['server.py'],
     pathex=[],
-    binaries=_mlx_bins + _mlxa_bins,
+    binaries=binaries,
     datas=datas,
     hiddenimports=hiddenimports,
     hookspath=[],
     hooksconfig={},
     runtime_hooks=[],
-    excludes=[],
+    excludes=['nvidia', 'nvidia.cublas', 'nvidia.cuda_cupti', 'nvidia.cuda_nvrtc', 'nvidia.cuda_runtime', 'nvidia.cudnn', 'nvidia.cufft', 'nvidia.curand', 'nvidia.cusolver', 'nvidia.cusparse', 'nvidia.nccl', 'nvidia.nvjitlink', 'nvidia.nvtx'],
     noarchive=False,
     optimize=0,
 )

bun.lock

@@ -4,6 +4,10 @@
   "workspaces": {
     "": {
       "name": "voicebox",
+      "dependencies": {
+        "loaders.css": "^0.1.2",
+        "react-loaders": "^3.0.1",
+      },
       "devDependencies": {
         "@biomejs/biome": "2.3.12",
         "@types/node": "^20.0.0",
@@ -13,7 +17,7 @@
     },
     "app": {
       "name": "@voicebox/app",
-      "version": "0.1.11",
+      "version": "0.2.0",
       "dependencies": {
         "@dnd-kit/core": "^6.3.1",
         "@dnd-kit/sortable": "^10.0.0",
@@ -68,13 +72,15 @@
     },
     "landing": {
       "name": "@voicebox/landing",
-      "version": "0.1.11",
+      "version": "0.2.0",
       "dependencies": {
+        "@fontsource/space-grotesk": "^5.2.10",
         "@radix-ui/react-separator": "^1.1.8",
         "@radix-ui/react-slot": "^1.2.4",
         "autoprefixer": "^10.4.17",
         "class-variance-authority": "^0.7.1",
         "clsx": "^2.1.1",
+        "framer-motion": "^12.36.0",
         "lucide-react": "^0.316.0",
         "next": "^16.1.3",
         "postcss": "^8.4.33",
@@ -83,6 +89,7 @@
         "tailwind-merge": "^3.4.0",
         "tailwindcss": "^3.4.1",
         "tailwindcss-animate": "^1.0.7",
+        "wavesurfer.js": "^7.12.2",
       },
       "devDependencies": {
         "@types/node": "^20.11.5",
@@ -93,7 +100,7 @@
     },
     "tauri": {
       "name": "@voicebox/tauri",
-      "version": "0.1.11",
+      "version": "0.2.0",
       "dependencies": {
         "@tauri-apps/api": "^2.0.0",
         "@tauri-apps/plugin-dialog": "^2.0.0",
@@ -116,7 +123,7 @@
     },
     "web": {
       "name": "@voicebox/web",
-      "version": "0.1.11",
+      "version": "0.2.0",
       "dependencies": {
         "@tanstack/react-query": "^5.0.0",
         "react": "^18.3.0",
@@ -125,6 +132,7 @@
         "zustand": "^4.5.0",
       },
       "devDependencies": {
+        "@tailwindcss/vite": "^4.0.0",
         "@types/react": "^18.3.0",
         "@types/react-dom": "^18.3.0",
         "@typescript-eslint/eslint-plugin": "^7.0.0",
@@ -269,6 +277,8 @@
 
     "@floating-ui/utils": ["@floating-ui/[email protected]", "", {}, "sha512-aGTxbpbg8/b5JfU1HXSrbH3wXZuLPJcNEcZQFMxLs3oSzgtVu6nFPkbbGGUvBcUjKV2YyB9Wxxabo+HEH9tcRQ=="],
 
+    "@fontsource/space-grotesk": ["@fontsource/[email protected]", "", {}, "sha512-XNXEbT74OIITPqw2H6HXwPDp85fy43uxfBwFR5PU+9sLnjuLj12KlhVM9nZVN6q6dlKjkuN8JisW/OBxwxgUew=="],
+
     "@hookform/resolvers": ["@hookform/[email protected]", "", { "peerDependencies": { "react-hook-form": "^7.0.0" } }, "sha512-79Dv+3mDF7i+2ajj7SkypSKHhl1cbln1OGavqrsF7p6mbUv11xpqpacPsGDCTRvCSjEEIez2ef1NveSVL3b0Ag=="],
 
     "@humanwhocodes/config-array": ["@humanwhocodes/[email protected]", "", { "dependencies": { "@humanwhocodes/object-schema": "^2.0.3", "debug": "^4.3.1", "minimatch": "^3.0.5" } }, "sha512-DZLEEqFWQFiyK6h5YIeynKx7JlvCYWL0cImfSRXZ9l4Sg2efkFGTuFf6vzXjK1cq6IYkU+Eg/JizXw+TD2vRNw=="],
@@ -677,6 +687,8 @@
 
     "class-variance-authority": ["[email protected]", "", { "dependencies": { "clsx": "^2.1.1" } }, "sha512-Ka+9Trutv7G8M6WT6SeiRWz792K5qEqIGEGzXKhAE6xOWAY6pPH8U+9IY3oCMv6kqTmLsv7Xh/2w2RigkePMsg=="],
 
+    "classnames": ["[email protected]", "", {}, "sha512-saHYOzhIQs6wy2sVxTM6bUDsQO4F50V9RQ22qBpEdCW+I+/Wmke2HOl6lS6dTpdxVhb88/I6+Hs+438c3lfUow=="],
+
     "client-only": ["[email protected]", "", {}, "sha512-IV3Ou0jSMzZrd3pZ48nLkT9DA7Ag1pnPzaiQhpW7c3RbcqqzvzzVu+L8gfqMp/8IM2MQtSiqaCxrrcfu8I8rMA=="],
 
     "clsx": ["[email protected]", "", {}, "sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA=="],
@@ -873,6 +885,8 @@
 
     "lines-and-columns": ["[email protected]", "", {}, "sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg=="],
 
+    "loaders.css": ["[email protected]", "", {}, "sha512-Rhowlq24ey1VOeor+3wYOt9+MjaxBOJm1u4KlQgNC3+0xJ0LS4wq4iG57D/BPzvuD/7HHDGQOWJ+81oR2EI9bQ=="],
+
     "locate-path": ["[email protected]", "", { "dependencies": { "p-locate": "^5.0.0" } }, "sha512-iPZK6eYjbxRu3uB4/WZ3EsEIMJFMqAoopl3R+zuq0UjcAm/MO6KCweDgPfP3elTztoKP3KtnVHxTn2NHBSDVUw=="],
 
     "lodash.merge": ["[email protected]", "", {}, "sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ=="],
@@ -959,6 +973,8 @@
 
     "prelude-ls": ["[email protected]", "", {}, "sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g=="],
 
+    "prop-types": ["[email protected]", "", { "dependencies": { "loose-envify": "^1.4.0", "object-assign": "^4.1.1", "react-is": "^16.13.1" } }, "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg=="],
+
     "punycode": ["[email protected]", "", {}, "sha512-vYt7UD1U9Wg6138shLtLOvdAu+8DsC/ilFtEVHcH+wydcSpNE20AfSOduf6MkRFahL5FY7X1oU7nKVZFtfq8Fg=="],
 
     "queue-microtask": ["[email protected]", "", {}, "sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A=="],
@@ -969,6 +985,10 @@
 
     "react-hook-form": ["[email protected]", "", { "peerDependencies": { "react": "^16.8.0 || ^17 || ^18 || ^19" } }, "sha512-9SUJKCGKo8HUSsCO+y0CtqkqI5nNuaDqTxyqPsZPqIwudpj4rCrAz/jZV+jn57bx5gtZKOh3neQu94DXMc+w5w=="],
 
+    "react-is": ["[email protected]", "", {}, "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="],
+
+    "react-loaders": ["[email protected]", "", { "dependencies": { "classnames": "^2.2.3" }, "peerDependencies": { "prop-types": ">=15.6.0", "react": ">=15" } }, "sha512-4igMNqs9Fb3d4Z+0UHIGQNJsw/37gX0nUO8QxupnEKRn1dtyYC1LGwk5GuaoDciMQCQc/MmPwb4Fn6ZfdoX1FQ=="],
+
     "react-refresh": ["[email protected]", "", {}, "sha512-z6F7K9bV85EfseRCp2bzrpyQ0Gkw1uLoCel9XBVWPg/TjRj94SkJzUTGfOa4bs7iJvBWtQG0Wq7wnI0syw3EBQ=="],
 
     "react-remove-scroll": ["[email protected]", "", { "dependencies": { "react-remove-scroll-bar": "^2.3.7", "react-style-singleton": "^2.2.3", "tslib": "^2.1.0", "use-callback-ref": "^1.3.3", "use-sidecar": "^1.1.3" }, "peerDependencies": { "@types/react": "*", "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-Iqb9NjCCTt6Hf+vOdNIZGdTiH1QSqr27H/Ek9sv/a97gfueI/5h1s3yRi1nngzMUaOOToin5dI1dXKdXiF+u0Q=="],
@@ -1137,12 +1157,16 @@
 
     "@typescript-eslint/typescript-estree/semver": ["[email protected]", "", { "bin": { "semver": "bin/semver.js" } }, "sha512-SdsKMrI9TdgjdweUSR9MweHA4EJ8YxHn8DFaDisvhVlUOe4BF1tLD7GAj0lIqWVl+dPb/rExr0Btby5loQm20Q=="],
 
+    "@voicebox/landing/framer-motion": ["[email protected]", "", { "dependencies": { "motion-dom": "^12.36.0", "motion-utils": "^12.36.0", "tslib": "^2.4.0" }, "peerDependencies": { "@emotion/is-prop-valid": "*", "react": "^18.0.0 || ^19.0.0", "react-dom": "^18.0.0 || ^19.0.0" }, "optionalPeers": ["@emotion/is-prop-valid", "react", "react-dom"] }, "sha512-4PqYHAT7gev0ke0wos+PyrcFxI0HScjm3asgU8nSYa8YzJFuwgIvdj3/s3ZaxLq0bUSboIn19A2WS/MHwLCvfw=="],
+
     "@voicebox/landing/lucide-react": ["[email protected]", "", { "peerDependencies": { "react": "^16.5.1 || ^17.0.0 || ^18.0.0" } }, "sha512-dTmYX1H4IXsRfVcj/KUxworV6814ApTl7iXaS21AimK2RUEl4j4AfOmqD3VR8phe5V91m4vEJ8tCK4uT1jE5nA=="],
 
     "@voicebox/landing/tailwind-merge": ["[email protected]", "", {}, "sha512-uSaO4gnW+b3Y2aWoWfFpX62vn2sR3skfhbjsEnaBI81WD1wBLlHZe5sWf0AqjksNdYTbGBEd0UasQMT3SNV15g=="],
 
     "@voicebox/landing/tailwindcss": ["[email protected]", "", { "dependencies": { "@alloc/quick-lru": "^5.2.0", "arg": "^5.0.2", "chokidar": "^3.6.0", "didyoumean": "^1.2.2", "dlv": "^1.1.3", "fast-glob": "^3.3.2", "glob-parent": "^6.0.2", "is-glob": "^4.0.3", "jiti": "^1.21.7", "lilconfig": "^3.1.3", "micromatch": "^4.0.8", "normalize-path": "^3.0.0", "object-hash": "^3.0.0", "picocolors": "^1.1.1", "postcss": "^8.4.47", "postcss-import": "^15.1.0", "postcss-js": "^4.0.1", "postcss-load-config": "^4.0.2 || ^5.0 || ^6.0", "postcss-nested": "^6.2.0", "postcss-selector-parser": "^6.1.2", "resolve": "^1.22.8", "sucrase": "^3.35.0" }, "bin": { "tailwind": "lib/cli.js", "tailwindcss": "lib/cli.js" } }, "sha512-3ofp+LL8E+pK/JuPLPggVAIaEuhvIz4qNcf3nA1Xn2o/7fb7s/TYpHhwGDv1ZU3PkBluUVaF8PyCHcm48cKLWQ=="],
 
+    "@voicebox/landing/wavesurfer.js": ["[email protected]", "", {}, "sha512-akVYISAHCw2gNw/7n8Pk/zH1Zz91WJyL/2MaNQCLD1XV3A226gKlWoDHWp9UdWqQ3zXnWttDf9ewZQQ3cxbOmQ=="],
+
     "chokidar/glob-parent": ["[email protected]", "", { "dependencies": { "is-glob": "^4.0.1" } }, "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow=="],
 
     "fast-glob/glob-parent": ["[email protected]", "", { "dependencies": { "is-glob": "^4.0.1" } }, "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow=="],
@@ -1154,5 +1178,9 @@
     "tinyglobby/picomatch": ["[email protected]", "", {}, "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q=="],
 
     "@typescript-eslint/typescript-estree/minimatch/brace-expansion": ["[email protected]", "", { "dependencies": { "balanced-match": "^1.0.0" } }, "sha512-Jt0vHyM+jmUBqojB7E1NIYadt0vI0Qxjxd2TErW94wDz+E2LAm5vKMXXwg6ZZBTHPuUlDgQHKXvjGBdfcF1ZDQ=="],
+
+    "@voicebox/landing/framer-motion/motion-dom": ["[email protected]", "", { "dependencies": { "motion-utils": "^12.36.0" } }, "sha512-Ep1pq8P88rGJ75om8lTCA13zqd7ywPGwCqwuWwin6BKc0hMLkVfcS6qKlRqEo2+t0DwoUcgGJfXwaiFn4AOcQA=="],
+
+    "@voicebox/landing/framer-motion/motion-utils": ["[email protected]", "", {}, "sha512-eHWisygbiwVvf6PZ1vhaHCLamvkSbPIeAYxWUuL3a2PD/TROgE7FvfHWTIH4vMl798QLfMw15nRqIaRDXTlYRg=="],
   }
 }

docs/RELEASE_v0.2.0.md

@@ -0,0 +1,163 @@
+# Voicebox v0.2.0 -- Release Notes
+
+## The story
+
+Voicebox v0.1.x shipped as a single-engine voice cloning app built around Qwen3-TTS. It worked, but it was limited: one model family, 10 languages, English-centric emotion, a synchronous generation pipeline that locked the UI, and a hard ceiling on how much text you could generate at once.
+
+v0.2.0 is a ground-up rethink. Voicebox is now a **multi-engine voice cloning platform**. Four TTS engines. 23 languages. Expressive paralinguistic controls. A full post-processing effects pipeline. Unlimited generation length. Asynchronous everything. And it runs on every major GPU vendor -- NVIDIA, AMD, Intel Arc, Apple Silicon -- plus Docker for headless deployment.
+
+This is the release where Voicebox stops being a proof of concept and starts being a real tool.
+
+---
+
+## Major New Features
+
+### Multi-Engine Architecture
+Voicebox now supports **four TTS engines**, each with different strengths. Switch between them per-generation from a single unified interface:
+
+| Engine | Languages | Strengths |
+|--------|-----------|-----------|
+| **Qwen3-TTS** (0.6B / 1.7B) | 10 | High-quality multilingual cloning, delivery instructions ("speak slowly", "whisper") |
+| **LuxTTS** | English | Lightweight (~1GB VRAM), 48kHz output, 150x realtime on CPU |
+| **Chatterbox Multilingual** | 23 | Broadest language coverage -- Arabic, Danish, Finnish, Greek, Hebrew, Hindi, Malay, Norwegian, Polish, Swahili, Swedish, Turkish and more |
+| **Chatterbox Turbo** | English | Fast 350M model with paralinguistic emotion/sound tags |
+
+### Emotions and Paralinguistic Tags (Chatterbox Turbo)
+Type `/` in the text input to open an autocomplete for **9 expressive tags** that the model synthesizes inline with speech:
+
+`[laugh]` `[chuckle]` `[gasp]` `[cough]` `[sigh]` `[groan]` `[sniff]` `[shush]` `[clear throat]`
+
+Tags render as inline badges in a rich text editor and serialize cleanly to the API. This makes generated speech sound natural and expressive in a way that plain TTS can't.
+
+### 23 Languages via Chatterbox Multilingual
+The Chatterbox Multilingual engine brings zero-shot voice cloning to **23 languages**: Arabic, Chinese, Danish, Dutch, English, Finnish, French, German, Greek, Hebrew, Hindi, Italian, Japanese, Korean, Malay, Norwegian, Polish, Portuguese, Russian, Spanish, Swahili, Swedish, and Turkish. The language dropdown dynamically filters to show only languages supported by the selected engine.
+
+### Unlimited Generation Length (Auto-Chunking)
+Previously, long text would hit model context limits and degrade. Now, text is **automatically split at sentence boundaries** and each chunk is generated independently, then crossfaded back together. This is fully engine-agnostic and works with all four engines.
+
+- **Auto-chunking limit slider** (100-5,000 chars, default 800) -- controls when text gets split
+- **Crossfade slider** (0-200ms, default 50ms) -- blends chunk boundaries smoothly, or set to 0 for a hard cut
+- **Max text length raised to 50,000 characters** -- generate entire scripts, chapters, or articles in one go
+- Smart splitting respects abbreviations (Dr., e.g., a.m.), CJK punctuation, and never breaks inside paralinguistic `[tags]`
+
+### Asynchronous Generation Queue
+Generation is now fully **non-blocking**. Submit a generation and immediately start typing the next one -- no more frozen UI waiting for inference to complete.
+
+- Serial execution queue prevents GPU contention across all backends
+- Real-time SSE status streaming (`generating` -> `completed` / `failed`)
+- Failed generations can be retried without re-entering text
+- Stale generations from crashes are auto-recovered on startup
+- Generating status pill shown inline in the story editor
+
+### Post-Processing Effects Pipeline
+A full audio effects system powered by Spotify's `pedalboard` library. Apply effects after generation, preview them in real time, and build reusable presets -- all without leaving the app.
+
+**8 effects available:**
+
+| Effect | What it does |
+|--------|-------------|
+| **Pitch Shift** | Shift pitch up or down by up to 12 semitones |
+| **Reverb** | Room reverb with configurable size, damping, and wet/dry mix |
+| **Delay** | Echo with adjustable delay time, feedback, and mix |
+| **Chorus / Flanger** | Modulated delay -- short for metallic flanger, longer for lush chorus |
+| **Compressor** | Dynamic range compression with threshold, ratio, attack, and release |
+| **Gain** | Volume adjustment from -40 to +40 dB |
+| **High-Pass Filter** | Remove low frequencies below a configurable cutoff |
+| **Low-Pass Filter** | Remove high frequencies above a configurable cutoff |
+
+**Effects presets** -- Four built-in presets ship out of the box (Robotic, Radio, Echo Chamber, Deep Voice), and you can create unlimited custom presets. Presets are drag-and-drop chains of effects with per-parameter sliders.
+
+**Per-profile default effects** -- Assign an effects chain to a voice profile and it applies automatically to every generation with that voice. Override per-generation from the generate box.
+
+**Live preview** -- Audition any effects chain against an existing generation before committing. The preview streams processed audio without saving anything.
+
+### Generation Versions
+Every generation now supports **multiple versions** with full provenance tracking:
+
+- **Original** -- the clean, unprocessed TTS output (always preserved)
+- **Effects versions** -- apply different effects chains to create new versions from any source version
+- **Takes** -- regenerate with the same text and voice but a new seed for variation
+- **Source tracking** -- each version records which version it was derived from
+- **Version pinning in stories** -- pin a specific version to a track clip in the story editor, independent of the generation's default
+- **Favorites** -- star generations to mark them for quick access
+
+---
+
+## New Platform Support
+
+### Linux (Native)
+Full Linux support with `.deb` and `.rpm` packages. Includes PulseAudio/PipeWire audio capture for voice sample recording.
+
+### AMD ROCm GPU Acceleration
+AMD GPU users now get hardware-accelerated inference via ROCm, with automatic `HSA_OVERRIDE_GFX_VERSION` configuration for GPUs not officially in the ROCm compatibility list (e.g., RX 6600).
+
+### NVIDIA CUDA Backend Swap
+The CPU-only release can download and swap in a CUDA-accelerated backend binary from within the app -- no reinstall required. Handles GitHub's 2GB asset limit by downloading split parts and verifying SHA-256 checksums.
+
+### Intel Arc (XPU) and DirectML
+PyTorch backend also supports Intel Arc GPUs via IPEX/XPU and Windows any-GPU via DirectML.
+
+### Docker + Web Deployment
+Run Voicebox headless as a Docker container with the full web UI:
+```bash
+docker compose up
+```
+3-stage build, non-root runtime, health checks, persistent model cache across rebuilds. Binds to localhost only by default.
+
+---
+
+## Model Management
+- **Per-model unload** -- free GPU memory without deleting downloaded models
+- **Custom models directory** -- set `VOICEBOX_MODELS_DIR` to store models anywhere
+- **Model folder migration** -- move all models to a new location with progress tracking
+- **Whisper Turbo** -- added `openai/whisper-large-v3-turbo` as a transcription model option
+- **Download cancel/clear UI** -- cancel in-progress downloads, VS Code-style problems panel for errors
+
+---
+
+## Security
+- **CORS hardening** -- replaced wildcard `*` with an explicit allowlist of local origins; extensible via `VOICEBOX_CORS_ORIGINS` env var
+- **Network access toggle** -- fully disable outbound network requests for air-gapped deployments
+
+## Accessibility
+- Comprehensive screen reader support (tested with NVDA/Narrator) across all major UI surfaces
+- Keyboard navigation for voice cards, history rows, model management, and story editor
+- State-aware `aria-label` attributes on all interactive controls
+
+## Reliability
+- **Atomic audio saves** -- two-phase write prevents corrupted files on crash/interrupt
+- **Filesystem health endpoint** -- proactive disk space and directory writability checks
+- **Errno-specific error messages** -- clear feedback for permission denied, disk full, missing directory
+
+## UX Polish
+- Responsive layout with horizontal-scroll voice cards on mobile
+- App version shown in sidebar
+- Voice card heights normalized
+- Audio player title hidden at narrow widths to prevent overflow
+
+---
+
+## Installation
+
+| Platform | Download |
+|----------|----------|
+| **macOS (Apple Silicon)** | `Voicebox_0.2.0_aarch64.dmg` |
+| **macOS (Intel)** | `Voicebox_0.2.0_x64.dmg` |
+| **Windows** | `Voicebox_0.2.0_x64_en-US.msi` or `x64-setup.exe` |
+| **Linux** | `.deb` / `.rpm` packages |
+| **Docker** | `docker compose up` |
+
+The app includes automatic updates -- future patches will be installed automatically.
+
+---
+
+## Video Script Beats
+
+For the marketing video, focus on these six beats:
+
+1. **"Four engines, one app"** -- show the engine dropdown switching between Qwen, LuxTTS, Chatterbox, and Turbo
+2. **"23 languages"** -- generate the same voice clone in Arabic, Japanese, Hindi, etc.
+3. **"Make it expressive"** -- type `/laugh` and `/sigh` with Chatterbox Turbo, play back the result
+4. **"Shape your sound"** -- apply the Robotic or Deep Voice preset, preview it live, then build a custom effects chain with drag-and-drop
+5. **"No limits"** -- paste a long script, show it auto-chunk and generate seamlessly
+6. **"Queue and go"** -- fire off multiple generations back-to-back without waiting

docs/issue-pain-points.md

@@ -0,0 +1,67 @@
+# Voicebox Issue Pain Points (Snapshot)
+
+## Scope
+
+- Dataset: **128 total issues** (**107 open**, **21 closed**)
+- Source: GitHub issues in `jamiepine/voicebox`
+- Classification: keyword/theme clustering
+- Note: counts below are **non-exclusive** (one issue can belong to multiple pain points)
+
+## Most Common Pain Points (Open Issues)
+
+| Rank | Pain Point | Open Issues | What users are reporting |
+|---|---|---:|---|
+| 1 | Model download & offline reliability | **32** | Downloads failing/stalling, cache/offline behavior inconsistent, wrong model size selected, Errno issues |
+| 2 | GPU/backend compatibility | **22** | GPU not detected, backend fallback surprises, platform-specific runtime failures (Windows/Mac) |
+| 3 | Export/save/file persistence | **15** | Export fails, "failed to fetch/download audio", samples/profiles not saving |
+| 4 | Language/accent quality & coverage | **14** | Missing language support, accent mismatch, robotic outputs |
+| 5 | Update/restart safety + long-op controls | **4** | Auto-restart without warning, update confusion, lack of cancel/pause controls |
+
+## Representative Issues by Pain Point
+
+### 1) Model download & offline reliability (32)
+
+- [#159](https://github.com/jamiepine/voicebox/issues/159) - Qwen download fails with Errno 22
+- [#151](https://github.com/jamiepine/voicebox/issues/151) - Model loading hangs / server crashes
+- [#150](https://github.com/jamiepine/voicebox/issues/150) - Internet required despite downloaded models
+- [#149](https://github.com/jamiepine/voicebox/issues/149) - Cancel/pause controls for large downloads
+- [#96](https://github.com/jamiepine/voicebox/issues/96) - 0.6B selection still uses/downloads 1.7B
+
+### 2) GPU/backend compatibility (22)
+
+- [#164](https://github.com/jamiepine/voicebox/issues/164) - Windows: no GPU usage + multiple breakages
+- [#141](https://github.com/jamiepine/voicebox/issues/141) - Using CPU only, GPU not used
+- [#131](https://github.com/jamiepine/voicebox/issues/131) - Numpy ABI mismatch in bundled app
+- [#130](https://github.com/jamiepine/voicebox/issues/130) - Intel Mac tensor/padding generation error
+- [#127](https://github.com/jamiepine/voicebox/issues/127) - GPU not found
+
+### 3) Export/save/file persistence (15)
+
+- [#148](https://github.com/jamiepine/voicebox/issues/148) - Japanese export fails on 0.1.12
+- [#143](https://github.com/jamiepine/voicebox/issues/143) - Samples not saving
+- [#134](https://github.com/jamiepine/voicebox/issues/134) - Can't save profile
+- [#105](https://github.com/jamiepine/voicebox/issues/105) - Export audio fails (failed to fetch)
+- [#49](https://github.com/jamiepine/voicebox/issues/49) - Export filename/location ignored on Windows
+
+### 4) Language/accent quality & coverage (14)
+
+- [#162](https://github.com/jamiepine/voicebox/issues/162) - Persian audio request/problem
+- [#117](https://github.com/jamiepine/voicebox/issues/117) - Arabic language support
+- [#113](https://github.com/jamiepine/voicebox/issues/113) - Polish language support
+- [#109](https://github.com/jamiepine/voicebox/issues/109) - Ukrainian support
+- [#100](https://github.com/jamiepine/voicebox/issues/100) - Non-US accent quality issues
+
+### 5) Update/restart safety + controls (4)
+
+- [#164](https://github.com/jamiepine/voicebox/issues/164) - Update behavior + usability failures
+- [#136](https://github.com/jamiepine/voicebox/issues/136) - Auto-restart without warning
+- [#86](https://github.com/jamiepine/voicebox/issues/86) - Unexpected restart with no confirmation
+- [#149](https://github.com/jamiepine/voicebox/issues/149) - Need pause/cancel and pre-download confirmation
+
+## Additional Signal
+
+- There is also a large **feature-request/misc** bucket (**36 open**) that is competing with stability triage (audiobook, Linux build, additional ASR/TTS models, integrations).
+
+## Takeaway
+
+Most user pain is concentrated in four stability areas: **download/offline path**, **GPU/backend detection**, **save/export reliability**, and **language/accent correctness**. Addressing those first should reduce the majority of current support friction.

docs/plans/PROJECT_STATUS.md

@@ -321,7 +321,7 @@ Notable requests:
 
 ## New Model Integration — Landscape
 
-### Models Worth Supporting (2026 SOTA)
+### Models Worth Supporting (2026 SOTA — updated March 13)
 
 | Model | Cloning | Speed | Sample Rate | Languages | VRAM | Integration Ease | Status |
 |-------|---------|-------|-------------|-----------|------|-----------------|--------|
@@ -329,10 +329,23 @@ Notable requests:
 | **LuxTTS** | 3s zero-shot | 150x RT, CPU ok | 48 kHz | English | <1 GB | **Shipped** | PR #254 |
 | **Chatterbox MTL** | 5s zero-shot | Medium | 24 kHz | 23 | Medium | **Shipped** | PR #257 |
 | **Chatterbox Turbo** | 5s zero-shot | Fast | 24 kHz | English | Low | **PR #258** | In review |
+| **HumeAI TADA 1B/3B** | Zero-shot | 5× faster than LLM-TTS | — | EN (1B), Multilingual (3B) | Medium | Needs vetting | MIT, 700s+ coherent, synced transcript output |
+| **MOSS-TTS Family** | Zero-shot | — | — | Multilingual | Medium | Needs vetting | Apache 2.0, multi-speaker dialogue, text-to-voice design (no ref audio) |
+| **VoxCPM 1.5** | Zero-shot (seconds) | ~0.15 RTF streaming | — | Bilingual (EN/ZH) | Medium | Needs vetting | Apache 2.0, tokenizer-free continuous diffusion, LoRA-friendly |
+| **Pocket TTS** | Zero-shot + streaming | >1× RT on CPU | — | English | ~100M params, CPU-first | Needs vetting | MIT, Kyutai Labs, no GPU required |
+| **Kokoro-82M** | 3s instant | CPU realtime | 24 kHz | English | Tiny (82M) | Ready | Apache 2.0, multi-engine arch in place |
 | **XTTS-v2** | 6s zero-shot | Mid-GPU | 24 kHz | 17+ | Medium | Ready | Multi-engine arch in place |
 | **Fish Speech** | 10-30s few-shot | Real-time | 24-44 kHz | 50+ | Medium | Ready | Multi-engine arch in place |
 | **CosyVoice2-0.5B** | 3-10s zero-shot | Very fast | 24 kHz | Multilingual | Low | Ready | Multi-engine arch in place |
-| **Kokoro-82M** | 3s instant | CPU realtime | 24 kHz | English | Tiny | Ready | Multi-engine arch in place |
+
+#### Notes on New Candidates (March 2026)
+
+- **HumeAI TADA** — Text-Audio Dual Alignment arch. Near-zero hallucinations/drift, free synced transcript. 700+ seconds coherent audio. Best candidate for Stories long-form reliability. [HF: HumeAI/tada-1b](https://huggingface.co/HumeAI/tada-1b) | [GitHub: HumeAI/tada](https://github.com/HumeAI/tada)
+- **MOSS-TTS** — Modular suite: flagship cloning, MOSS-TTSD (multi-speaker dialogue), MOSS-VoiceGenerator (create voices from text descriptions, no ref audio). Unique UX for Stories voice design. [GitHub: OpenMOSS/MOSS-TTS](https://github.com/OpenMOSS/MOSS-TTS)
+- **VoxCPM 1.5** — Tokenizer-free continuous diffusion + autoregressive. No discrete token artifacts. Context-aware prosody/emotion, real-time streaming, LoRA fine-tuning. Trained on 1.8M+ hours. [GitHub: OpenBMB/VoxCPM](https://github.com/OpenBMB/VoxCPM)
+- **Pocket TTS** — 100M param CPU-first model from Kyutai Labs (Moshi team). Runs >1× realtime without GPU. Broadens hardware support significantly. [GitHub: kyutai-labs/pocket-tts](https://github.com/kyutai-labs/pocket-tts)
+- **Watch list:** MioTTS-2.6B (fast LLM-based EN/JP, vLLM compatible), Oolel-Voices (Soynade Research, expressive modular control)
+- **Skipped:** Fish Audio S2 — restrictive research license (commercial use requires approval), despite strong features
 
 ### Adding a New Engine (Now Straightforward)
 
@@ -402,16 +415,21 @@ The generation form now uses a flat model dropdown with engine-based routing. Pe
 
 ### Tier 3 — Future (v0.3.0+)
 
-| Item | Notes |
-|------|-------|
-| XTTS-v2 / Fish Speech / CosyVoice | Multi-engine arch is ready; just needs backend implementation |
-| OpenAI-compatible API (plan doc exists) | Low effort once API is stable |
-| LoRA fine-tuning (PR #195) | Complex, needs rework for multi-engine |
-| External/remote providers | Depends on use case demand |
-| GGUF support (#226) | Depends on model ecosystem maturity |
-| Queue system (#234) | Batch generation |
-| Streaming for non-MLX engines | Currently MLX-only |
-| Kokoro-82M | Tiny model, great for CPU-only machines |
+| Priority | Item | Notes |
+|----------|------|-------|
+| 1 | **HumeAI TADA** | Long-form reliability for Stories, synced transcripts. Addresses #234, #203, #191, #111, #69. Needs API vetting. |
+| 2 | **Pocket TTS** (Kyutai) | CPU-first 100M model, broadens hardware support. Kyutai ships clean code. Needs API vetting. |
+| 3 | **MOSS-TTS** | Text-to-voice design (no ref audio) is unique. Multi-speaker dialogue for Stories. Needs thorough API vetting. |
+| 4 | **Kokoro-82M** | 82M params, CPU realtime, Apache 2.0. Easy win. |
+| 5 | **Model config registry refactor** | Reduce 5-dispatch-point duplication in main.py — do before adding 3+ more engines |
+| 6 | XTTS-v2 / Fish Speech / CosyVoice | Multi-engine arch is ready; just needs backend implementation |
+| 7 | **VoxCPM 1.5** | Tokenizer-free streaming, interesting but uncertain integration surface |
+| 8 | OpenAI-compatible API (plan doc exists) | Low effort once API is stable |
+| 9 | LoRA fine-tuning (PR #195) | Complex, needs rework for multi-engine |
+| 10 | External/remote providers | Depends on use case demand |
+| 11 | GGUF support (#226) | Depends on model ecosystem maturity |
+| 12 | Queue system (#234) | Batch generation |
+| 13 | Streaming for non-MLX engines | Currently MLX-only |
 
 ---
 

justfile

@@ -8,12 +8,17 @@ tauri_dir := "tauri"
 app_dir := "app"
 web_dir := "web"
 venv := backend_dir / "venv"
-venv_bin := venv / "bin"
-python := venv_bin / "python"
-pip := venv_bin / "pip"
 
-# Detect best python for venv creation
-system_python := `command -v python3.12 2>/dev/null || command -v python3.13 2>/dev/null || echo python3`
+# Platform-aware paths
+venv_bin := if os() == "windows" { venv / "Scripts" } else { venv / "bin" }
+python := if os() == "windows" { venv_bin / "python.exe" } else { venv_bin / "python" }
+pip := if os() == "windows" { venv_bin / "pip.exe" } else { venv_bin / "pip" }
+
+# Shell selection: use powershell on Windows, bash elsewhere
+set windows-shell := ["powershell", "-NoProfile", "-Command"]
+
+# Detect best python for venv creation (platform-aware)
+system_python := if os() == "windows" { "python" } else { `command -v python3.12 2>/dev/null || command -v python3.13 2>/dev/null || echo python3` }
 
 # ─── Setup ────────────────────────────────────────────────────────────
 
@@ -23,6 +28,7 @@ setup: setup-python setup-js
     @echo "Setup complete! Run: just dev"
 
 # Create venv and install Python dependencies
+[unix]
 setup-python:
     #!/usr/bin/env bash
     set -euo pipefail
@@ -46,70 +52,186 @@ setup-python:
         {{ pip }} install -r {{ backend_dir }}/requirements-mlx.txt
     fi
     {{ pip }} install git+https://github.com/QwenLM/Qwen3-TTS.git
+    {{ pip }} install pyinstaller -q
     echo "Python environment ready."
 
+[windows]
+setup-python:
+    if (-not (Test-Path "{{ venv }}")) { \
+        Write-Host "Creating Python virtual environment..."; \
+        $pyMinor = & {{ system_python }} -c "import sys; print(sys.version_info[1])"; \
+        if ([int]$pyMinor -gt 13) { \
+            Write-Host "Warning: Python 3.$pyMinor detected. ML packages may not be compatible."; \
+        }; \
+        & {{ system_python }} -m venv {{ venv }}; \
+    }
+    Write-Host "Installing Python dependencies..."
+    & "{{ python }}" -m pip install --upgrade pip -q
+    $hasNvidia = $null -ne (Get-WmiObject Win32_VideoController | Where-Object { $_.Name -match 'NVIDIA' })
+    if ($hasNvidia) { \
+        Write-Host "NVIDIA GPU detected — installing PyTorch with CUDA support..."; \
+        & "{{ pip }}" install torch torchvision torchaudio --index-url https://download.pytorch.org/whl/cu126; \
+    }
+    & "{{ pip }}" install -r {{ backend_dir }}/requirements.txt
+    & "{{ pip }}" install --no-deps chatterbox-tts
+    & "{{ pip }}" install git+https://github.com/QwenLM/Qwen3-TTS.git
+    & "{{ pip }}" install pyinstaller -q
+    Write-Host "Python environment ready."
+
 # Install JavaScript dependencies
 setup-js:
     bun install
 
 # ─── Development ──────────────────────────────────────────────────────
 
-# Start backend + frontend for development (two processes, one terminal)
+# Start backend (if not already running) + frontend for development
+[unix]
 dev: _ensure-venv _ensure-sidecar
     #!/usr/bin/env bash
     set -euo pipefail
-    trap 'kill 0' EXIT
 
-    echo "Starting backend on http://localhost:17493 ..."
-    {{ venv_bin }}/uvicorn backend.main:app --reload --port 17493 &
-    sleep 2
+    backend_pid=""
+    if curl -sf http://127.0.0.1:17493/health > /dev/null 2>&1; then
+        echo "Backend already running on http://localhost:17493"
+    else
+        echo "Starting backend on http://localhost:17493 ..."
+        {{ venv_bin }}/uvicorn backend.main:app --reload --port 17493 &
+        backend_pid=$!
+        sleep 2
+    fi
+
+    trap '[ -n "$backend_pid" ] && kill "$backend_pid" 2>/dev/null; wait' EXIT
 
     echo "Starting Tauri desktop app..."
-    cd {{ tauri_dir }} && bun run tauri dev &
+    cd {{ tauri_dir }} && bun run tauri dev
 
-    wait
+[windows]
+dev: _ensure-venv _ensure-sidecar
+    $backendJob = $null; \
+    try { $null = Invoke-WebRequest -Uri "http://127.0.0.1:17493/health" -UseBasicParsing -TimeoutSec 2 -ErrorAction Stop; Write-Host "Backend already running on http://localhost:17493" } catch { \
+        Write-Host "Starting backend on http://localhost:17493 ..."; \
+        $backendJob = Start-Process -PassThru -NoNewWindow -FilePath "{{ python }}" -ArgumentList "-m","uvicorn","backend.main:app","--reload","--port","17493"; \
+        Start-Sleep -Seconds 2; \
+    }; \
+    Write-Host "Starting Tauri desktop app..."; \
+    try { Set-Location "{{ tauri_dir }}"; bun run tauri dev } finally { if ($backendJob) { taskkill /PID $backendJob.Id /T /F 2>$null | Out-Null } }
 
 # Start backend only
+[unix]
 dev-backend: _ensure-venv
     {{ venv_bin }}/uvicorn backend.main:app --reload --port 17493
 
+[windows]
+dev-backend: _ensure-venv
+    & "{{ python }}" -m uvicorn backend.main:app --reload --port 17493
+
 # Start Tauri desktop app only (backend must be running separately)
+[unix]
 dev-frontend: _ensure-sidecar
     cd {{ tauri_dir }} && bun run tauri dev
 
-# Start backend + web app (no Tauri)
+[windows]
+dev-frontend: _ensure-sidecar
+    Set-Location "{{ tauri_dir }}"; bun run tauri dev
+
+# Start backend (if not already running) + web app (no Tauri)
+[unix]
 dev-web: _ensure-venv
     #!/usr/bin/env bash
     set -euo pipefail
-    trap 'kill 0' EXIT
-    {{ venv_bin }}/uvicorn backend.main:app --reload --port 17493 &
-    sleep 2
-    cd {{ web_dir }} && bun run dev &
-    wait
+
+    backend_pid=""
+    if curl -sf http://127.0.0.1:17493/health > /dev/null 2>&1; then
+        echo "Backend already running on http://localhost:17493"
+    else
+        echo "Starting backend on http://localhost:17493 ..."
+        {{ venv_bin }}/uvicorn backend.main:app --reload --port 17493 &
+        backend_pid=$!
+        sleep 2
+    fi
+
+    trap '[ -n "$backend_pid" ] && kill "$backend_pid" 2>/dev/null; wait' EXIT
+
+    cd {{ web_dir }} && bun run dev
+
+[windows]
+dev-web: _ensure-venv
+    $backendJob = $null; \
+    try { $null = Invoke-WebRequest -Uri "http://127.0.0.1:17493/health" -UseBasicParsing -TimeoutSec 2 -ErrorAction Stop; Write-Host "Backend already running on http://localhost:17493" } catch { \
+        Write-Host "Starting backend on http://localhost:17493 ..."; \
+        $backendJob = Start-Process -PassThru -NoNewWindow -FilePath "{{ python }}" -ArgumentList "-m","uvicorn","backend.main:app","--reload","--port","17493"; \
+        Start-Sleep -Seconds 2; \
+    }; \
+    Write-Host "Starting web app..."; \
+    try { Set-Location "{{ web_dir }}"; bun run dev } finally { if ($backendJob) { taskkill /PID $backendJob.Id /T /F 2>$null | Out-Null } }
 
 # Kill all dev processes
+[unix]
 kill:
     -pkill -f "uvicorn backend.main:app" 2>/dev/null || true
     -pkill -f "vite" 2>/dev/null || true
     @echo "Dev processes killed."
 
+[windows]
+kill:
+    Get-Process -ErrorAction SilentlyContinue | Where-Object { $_.CommandLine -like '*uvicorn*backend.main*' -or $_.CommandLine -like '*vite*' } | Stop-Process -Force -ErrorAction SilentlyContinue
+    Write-Host "Dev processes killed."
+
 # ─── Build ────────────────────────────────────────────────────────────
 
 # Build everything (server binary + desktop app)
 build: build-server build-tauri
 
-# Build Python server binary
+# Build Python server binary (CPU)
+[unix]
 build-server: _ensure-venv
     PATH="{{ venv_bin }}:$PATH" ./scripts/build-server.sh
 
+[windows]
+build-server: _ensure-venv
+    $ErrorActionPreference = "Stop"; \
+    $env:PATH = "{{ venv_bin }};$env:PATH"; \
+    & "{{ python }}" backend/build_binary.py; \
+    if ($LASTEXITCODE -ne 0) { throw "build_binary.py failed with exit code $LASTEXITCODE" }; \
+    $triple = (rustc --print host-tuple); \
+    New-Item -ItemType Directory -Path "{{ tauri_dir }}/src-tauri/binaries" -Force | Out-Null; \
+    Copy-Item "backend/dist/voicebox-server.exe" "{{ tauri_dir }}/src-tauri/binaries/voicebox-server-$triple.exe" -Force; \
+    Write-Host "Copied sidecar: voicebox-server-$triple.exe"
+
+# Build CUDA server binary and place in app data dir for local testing
+[windows]
+build-server-cuda: _ensure-venv
+    $ErrorActionPreference = "Stop"; \
+    $env:PATH = "{{ venv_bin }};$env:PATH"; \
+    & "{{ python }}" backend/build_binary.py --cuda; \
+    if ($LASTEXITCODE -ne 0) { throw "build_binary.py --cuda failed with exit code $LASTEXITCODE" }; \
+    $dest = "$env:APPDATA/com.voicebox.app/backends"; \
+    New-Item -ItemType Directory -Path $dest -Force | Out-Null; \
+    Copy-Item "backend/dist/voicebox-server-cuda.exe" "$dest/voicebox-server-cuda.exe" -Force; \
+    Write-Host "Copied CUDA binary to $dest"
+
+# Build everything locally: CPU server + CUDA server + installable Tauri app
+[windows]
+build-local: build-server build-server-cuda build-tauri
+
 # Build Tauri desktop app
+[unix]
 build-tauri:
     cd {{ tauri_dir }} && bun run tauri build
 
+[windows]
+build-tauri:
+    Set-Location "{{ tauri_dir }}"; bun run tauri build
+
 # Build web app
+[unix]
 build-web:
     cd {{ web_dir }} && bun run build
 
+[windows]
+build-web:
+    Set-Location "{{ web_dir }}"; bun run build
+
 # ─── Code Quality ────────────────────────────────────────────────────
 
 # Run all checks (lint + format + typecheck)
@@ -131,42 +253,82 @@ fix:
 # ─── Database ─────────────────────────────────────────────────────────
 
 # Initialize SQLite database
+[unix]
 db-init: _ensure-venv
-    cd {{ backend_dir }} && {{ python }} -c "from database import init_db; init_db()"
+    {{ python }} -c "from backend.database import init_db; init_db()"
+
+[windows]
+db-init: _ensure-venv
+    & "{{ python }}" -c "from backend.database import init_db; init_db()"
 
 # Reset database (delete + reinit)
+[unix]
 db-reset:
     rm -f {{ backend_dir }}/data/voicebox.db
     just db-init
 
+[windows]
+db-reset:
+    if (Test-Path "{{ backend_dir }}/data/voicebox.db") { Remove-Item -Force "{{ backend_dir }}/data/voicebox.db" }
+    just db-init
+
 # ─── Utilities ────────────────────────────────────────────────────────
 
 # Generate TypeScript API client (backend must be running)
+[unix]
 generate-api:
     ./scripts/generate-api.sh
 
+[windows]
+generate-api:
+    bash scripts/generate-api.sh
+
 # Open API docs in browser
+[unix]
 docs:
     open http://localhost:17493/docs 2>/dev/null || xdg-open http://localhost:17493/docs
 
+[windows]
+docs:
+    Start-Process "http://localhost:17493/docs"
+
 # Tail backend logs
+[unix]
 logs:
     tail -f {{ backend_dir }}/logs/*.log 2>/dev/null || echo "No log files found"
 
+[windows]
+logs:
+    Get-ChildItem {{ backend_dir }}/logs/*.log -ErrorAction SilentlyContinue | ForEach-Object { Get-Content $_.FullName -Tail 50 -Wait } ; if (-not $?) { Write-Host "No log files found" }
+
 # ─── Clean ────────────────────────────────────────────────────────────
 
 # Clean build artifacts
+[unix]
 clean:
     rm -rf {{ tauri_dir }}/src-tauri/target/release
     rm -rf {{ web_dir }}/dist
     rm -rf {{ app_dir }}/dist
 
+[windows]
+clean:
+    if (Test-Path "{{ tauri_dir }}/src-tauri/target/release") { Remove-Item -Recurse -Force "{{ tauri_dir }}/src-tauri/target/release" }
+    if (Test-Path "{{ web_dir }}/dist") { Remove-Item -Recurse -Force "{{ web_dir }}/dist" }
+    if (Test-Path "{{ app_dir }}/dist") { Remove-Item -Recurse -Force "{{ app_dir }}/dist" }
+
 # Clean Python venv and cache
+[unix]
 clean-python:
     rm -rf {{ venv }}
     find {{ backend_dir }} -type d -name "__pycache__" -exec rm -rf {} + 2>/dev/null || true
 
+[windows]
+clean-python:
+    if (Test-Path "{{ venv }}") { Remove-Item -Recurse -Force "{{ venv }}" }
+    Get-ChildItem -Path "{{ backend_dir }}" -Directory -Recurse -Filter "__pycache__" -ErrorAction SilentlyContinue | Remove-Item -Recurse -Force
+
 # Nuclear clean (everything including node_modules)
+[unix]
 clean-all: clean clean-python
     rm -rf node_modules
     rm -rf {{ app_dir }}/node_modules
@@ -174,10 +336,18 @@ clean-all: clean clean-python
     rm -rf {{ web_dir }}/node_modules
     cd {{ tauri_dir }}/src-tauri && cargo clean
 
+[windows]
+clean-all: clean clean-python
+    if (Test-Path "node_modules") { Remove-Item -Recurse -Force "node_modules" }
+    if (Test-Path "{{ app_dir }}/node_modules") { Remove-Item -Recurse -Force "{{ app_dir }}/node_modules" }
+    if (Test-Path "{{ tauri_dir }}/node_modules") { Remove-Item -Recurse -Force "{{ tauri_dir }}/node_modules" }
+    if (Test-Path "{{ web_dir }}/node_modules") { Remove-Item -Recurse -Force "{{ web_dir }}/node_modules" }
+    Push-Location "{{ tauri_dir }}/src-tauri"; cargo clean; Pop-Location
+
 # ─── Internal ─────────────────────────────────────────────────────────
 
 # Ensure venv exists (prompt to run setup if not)
-[private]
+[private, unix]
 _ensure-venv:
     #!/usr/bin/env bash
     if [ ! -d "{{ venv }}" ]; then
@@ -185,6 +355,10 @@ _ensure-venv:
         exit 1
     fi
 
+[private, windows]
+_ensure-venv:
+    if (-not (Test-Path "{{ venv }}")) { Write-Host "Python venv not found. Run: just setup"; exit 1 }
+
 # Ensure Tauri dev sidecar placeholder exists
 [private]
 _ensure-sidecar:

landing/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@voicebox/landing",
-  "version": "0.1.13",
+  "version": "0.2.2",
   "description": "Landing page for voicebox.sh",
   "scripts": {
     "dev": "bun --bun next dev --turbo",
@@ -9,11 +9,13 @@
     "lint": "next lint"
   },
   "dependencies": {
+    "@fontsource/space-grotesk": "^5.2.10",
     "@radix-ui/react-separator": "^1.1.8",
     "@radix-ui/react-slot": "^1.2.4",
     "autoprefixer": "^10.4.17",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
+    "framer-motion": "^12.36.0",
     "lucide-react": "^0.316.0",
     "next": "^16.1.3",
     "postcss": "^8.4.33",
@@ -21,7 +23,8 @@
     "react-dom": "^18.2.0",
     "tailwind-merge": "^3.4.0",
     "tailwindcss": "^3.4.1",
-    "tailwindcss-animate": "^1.0.7"
+    "tailwindcss-animate": "^1.0.7",
+    "wavesurfer.js": "^7.12.2"
   },
   "devDependencies": {
     "@types/node": "^20.11.5",

landing/src/app/api/stars/route.ts

@@ -0,0 +1,15 @@
+import { NextResponse } from 'next/server';
+import { getStarCount } from '@/lib/releases';
+
+export const dynamic = 'force-dynamic';
+export const revalidate = 600;
+
+export async function GET() {
+  try {
+    const count = await getStarCount();
+    return NextResponse.json({ count });
+  } catch (error) {
+    console.error('Error fetching star count:', error);
+    return NextResponse.json({ error: 'Failed to fetch star count' }, { status: 500 });
+  }
+}

landing/src/app/globals.css

@@ -16,7 +16,7 @@
     --secondary-foreground: 0 0% 0%;
     --muted: 0 0% 96%;
     --muted-foreground: 0 0% 45%;
-    --accent: 0 0% 96%;
+    --accent: 43 50% 50%;
     --accent-foreground: 0 0% 0%;
     --destructive: 0 0% 0%;
     --destructive-foreground: 0 0% 100%;
@@ -27,26 +27,52 @@
   }
 
   .dark {
-    --background: 0 0% 3%;
-    --foreground: 0 0% 98%;
-    --card: 0 0% 8% / 0.6;
-    --card-foreground: 0 0% 98%;
-    --popover: 0 0% 8% / 0.8;
-    --popover-foreground: 0 0% 98%;
-    --primary: 0 0% 98%;
-    --primary-foreground: 0 0% 8%;
-    --secondary: 0 0% 12% / 0.5;
-    --secondary-foreground: 0 0% 98%;
-    --muted: 0 0% 12% / 0.4;
-    --muted-foreground: 0 0% 65%;
-    --accent: 0 0% 15% / 0.5;
-    --accent-foreground: 0 0% 98%;
+    /* Surfaces -- slightly warm-tinted darks */
+    --background: 30 4% 4%;
+    --foreground: 30 10% 94%;
+    --card: 30 4% 7%;
+    --card-foreground: 30 10% 94%;
+    --popover: 30 4% 7%;
+    --popover-foreground: 30 10% 94%;
+    --primary: 30 10% 94%;
+    --primary-foreground: 30 4% 7%;
+    --secondary: 30 4% 10%;
+    --secondary-foreground: 30 10% 94%;
+    --muted: 30 3% 12%;
+    --muted-foreground: 30 5% 55%;
+    --accent: 43 50% 45%;
+    --accent-foreground: 30 10% 94%;
     --destructive: 0 62% 50%;
-    --destructive-foreground: 0 0% 98%;
-    --border: 0 0% 15% / 0.5;
-    --input: 0 0% 15% / 0.5;
-    --ring: 0 0% 98% / 0.2;
-    --radius: 1rem;
+    --destructive-foreground: 30 10% 94%;
+    --border: 30 4% 13%;
+    --input: 30 4% 13%;
+    --ring: 30 10% 94% / 0.2;
+    --radius: 0.75rem;
+
+    /* App-specific surface tokens */
+    --app: 30 4% 4%;
+    --app-box: 30 4% 7%;
+    --app-dark-box: 30 4% 5%;
+    --app-darker-box: 30 4% 3%;
+    --app-light-box: 30 4% 14%;
+    --app-line: 30 4% 13%;
+    --app-button: 30 4% 11%;
+    --app-hover: 30 4% 15%;
+    --app-selected: 30 4% 17%;
+
+    /* Text hierarchy */
+    --ink: 30 10% 94%;
+    --ink-dull: 30 5% 55%;
+    --ink-faint: 30 3% 38%;
+
+    /* Accent shades */
+    --accent-faint: 43 45% 55%;
+    --accent-deep: 43 55% 35%;
+    --accent-glow: 43 60% 50%;
+
+    /* Sidebar */
+    --sidebar: 30 4% 3%;
+    --sidebar-line: 30 4% 10%;
   }
 }
 
@@ -60,9 +86,9 @@
   body {
     @apply bg-background text-foreground antialiased;
     overflow-x: hidden;
-    background-image:
-      radial-gradient(at 0% 0%, rgba(255, 255, 255, 0.03) 0px, transparent 50%),
-      radial-gradient(at 100% 100%, rgba(255, 255, 255, 0.02) 0px, transparent 50%);
+    font-family:
+      ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
+      "Helvetica Neue", Arial, sans-serif;
   }
 }
 
@@ -71,3 +97,56 @@
     text-wrap: balance;
   }
 }
+
+/* Staggered fade-in animation for hero elements */
+@keyframes fadeUp {
+  from {
+    opacity: 0;
+    transform: translateY(16px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.fade-in {
+  opacity: 0;
+  animation: fadeUp 0.6s ease-out forwards;
+}
+
+.hero-glow-fade {
+  opacity: 0;
+  animation: fadeIn 2s ease-out 0.3s forwards;
+}
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+/* Noise texture overlay for hero glow */
+/* .hero-glow::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  z-index: 5;
+  pointer-events: none;
+  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='2048' height='2048'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.5' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
+  opacity: 0.35;
+  mix-blend-mode: overlay;
+  will-change: transform;
+} */
+
+/* Scrollbar hiding */
+::-webkit-scrollbar {
+  display: none;
+}
+
+* {
+  scrollbar-width: none;
+}

landing/src/app/layout.tsx

@@ -1,17 +1,19 @@
 import type { Metadata } from 'next';
-import { Inter } from 'next/font/google';
 import './globals.css';
-import { Banner } from '@/components/Banner';
-import { Footer } from '@/components/Footer';
-import { Header } from '@/components/Header';
-
-const inter = Inter({ subsets: ['latin'], variable: '--font-sans' });
 
 export const metadata: Metadata = {
-  title: 'Voicebox - Open Source Voice Cloning Desktop App Powered by Qwen3-TTS',
+  title: 'Voicebox - Open Source Voice Cloning Desktop App',
   description:
-    'Near-perfect voice cloning powered by Qwen3-TTS. Desktop app for Mac, Windows, and Linux. Multi-sample support, smart caching, local or remote inference.',
-  keywords: ['voice cloning', 'TTS', 'Qwen3', 'desktop app', 'AI voice'],
+    'Near-perfect voice cloning with multiple TTS engines. Desktop app for Mac, Windows, and Linux. Multi-sample support, smart caching, local or remote inference.',
+  keywords: [
+    'voice cloning',
+    'TTS',
+    'multi-engine',
+    'desktop app',
+    'AI voice',
+    'open source',
+    'text to speech',
+  ],
   icons: {
     icon: [
       { url: '/favicon.png', type: 'image/png' },
@@ -20,8 +22,8 @@ export const metadata: Metadata = {
     apple: [{ url: '/apple-touch-icon.png', sizes: '180x180', type: 'image/png' }],
   },
   openGraph: {
-    title: 'voicebox',
-    description: 'Professional voice cloning with Qwen3-TTS',
+    title: 'Voicebox',
+    description: 'Open source voice cloning. Local-first. Free forever.',
     type: 'website',
     url: 'https://voicebox.sh',
   },
@@ -30,15 +32,16 @@ export const metadata: Metadata = {
 export default function RootLayout({ children }: { children: React.ReactNode }) {
   return (
     <html lang="en" suppressHydrationWarning className="dark">
-      <body className={inter.variable}>
-        <div className="relative min-h-screen bg-background font-sans flex flex-col">
-          <Banner />
-          <Header />
-          <main className="container mx-auto px-4 sm:px-6 md:px-4 flex-1 py-4 sm:py-6 md:py-0">
-            {children}
-          </main>
-          <Footer />
-        </div>
+      <head>
+        <link rel="preconnect" href="https://fonts.googleapis.com" />
+        <link rel="preconnect" href="https://fonts.gstatic.com" crossOrigin="anonymous" />
+        <link
+          href="https://fonts.googleapis.com/css2?family=Caveat:wght@400;500&display=swap"
+          rel="stylesheet"
+        />
+      </head>
+      <body>
+        <div className="relative min-h-screen bg-background font-sans">{children}</div>
       </body>
     </html>
   );

landing/src/app/page.tsx

@@ -1,304 +1,328 @@
 'use client';
 
-import { Cloud, Code, Cpu, Github, Shield, Zap } from 'lucide-react';
-import Image from 'next/image';
+import { Github, Globe, Languages, MessageSquare, Zap } from 'lucide-react';
 import { useEffect, useState } from 'react';
+import { ControlUI } from '@/components/ControlUI';
+import { Features } from '@/components/Features';
+import { Footer } from '@/components/Footer';
+import { Navbar } from '@/components/Navbar';
 import { AppleIcon, LinuxIcon, WindowsIcon } from '@/components/PlatformIcons';
-import { Button } from '@/components/ui/button';
-import { Section } from '@/components/ui/section';
+import { VoiceCreator } from '@/components/VoiceCreator';
 import { DOWNLOAD_LINKS, GITHUB_REPO } from '@/lib/constants';
 import type { DownloadLinks } from '@/lib/releases';
-import { FeatureCard } from '../components/ui/feature-card';
 
 export default function Home() {
   const [downloadLinks, setDownloadLinks] = useState<DownloadLinks>(DOWNLOAD_LINKS);
+  const [version, setVersion] = useState<string | null>(null);
+  const [totalDownloads, setTotalDownloads] = useState<number | null>(null);
 
   useEffect(() => {
-    // Fetch latest release info
     fetch('/api/releases')
       .then((res) => {
-        if (!res.ok) {
-          throw new Error('Failed to fetch releases');
-        }
+        if (!res.ok) throw new Error('Failed to fetch releases');
         return res.json();
       })
       .then((data) => {
-        if (data.downloadLinks) {
-          setDownloadLinks(data.downloadLinks);
-        }
+        if (data.downloadLinks) setDownloadLinks(data.downloadLinks);
+        if (data.version) setVersion(data.version);
+        if (data.totalDownloads != null) setTotalDownloads(data.totalDownloads);
       })
       .catch((error) => {
         console.error('Failed to fetch release info:', error);
-        // Keep fallback links (releases page) on error
       });
   }, []);
-  const features = [
-    {
-      title: 'Near-Perfect Voice Cloning',
-      description:
-        "Powered by Alibaba's Qwen3-TTS model for exceptional voice quality and accuracy.",
-      icon: <Zap className="h-6 w-6" />,
-    },
-    {
-      title: 'Stories Editor',
-      description:
-        'Create multi-voice narratives with a timeline-based editor. Arrange tracks, trim clips, and mix conversations.',
-      icon: <Code className="h-6 w-6" />,
-    },
-    {
-      title: 'Multi-Sample Support',
-      description:
-        'Combine multiple voice samples for higher quality and more natural-sounding results.',
-      icon: <Code className="h-6 w-6" />,
-    },
-
-    {
-      title: 'Local or Remote',
-      description:
-        'Run GPU inference locally or connect to a remote machine. One-click server setup.',
-      icon: <Cloud className="h-6 w-6" />,
-    },
-    {
-      title: 'Audio Transcription',
-      description:
-        'Powered by Whisper for accurate speech-to-text. Extract reference text from voice samples automatically.',
-      icon: <Shield className="h-6 w-6" />,
-    },
-    {
-      title: 'Cross-Platform',
-      description: 'Available for macOS, Windows, and Linux. No Python installation required.',
-      icon: <Cpu className="h-6 w-6" />,
-    },
-  ];
 
   return (
-    <div className="space-y-12 sm:space-y-16 md:space-y-20">
-      {/* Hero Section */}
-      <section className="relative py-12 sm:py-16 md:py-20 lg:py-24">
-        <div className="container mx-auto px-4 sm:px-6 lg:px-8 relative max-w-7xl">
-          <div className="grid grid-cols-1 lg:grid-cols-2 gap-8 lg:gap-12 items-start">
-            {/* Left side - Content */}
-            <div className="space-y-6 lg:pr-8">
-              <div className="flex lg:justify-start justify-center mb-6">
-                <Image
-                  src="/voicebox-logo-2.png"
-                  alt="Voicebox Logo"
-                  width={1024}
-                  height={1024}
-                  className="w-32 sm:w-40 md:w-48 h-auto"
-                  priority
-                />
-              </div>
-              <h1 className="text-5xl sm:text-6xl md:text-7xl lg:text-8xl font-bold leading-tight text-center lg:text-left">
-                Voicebox
-              </h1>
-              <p className="text-lg sm:text-xl md:text-2xl text-foreground/70 max-w-xl text-center lg:text-left mx-auto lg:mx-0">
-                Open source voice cloning powered by Qwen3-TTS. Create natural-sounding speech from
-                text with near-perfect voice replication.
-              </p>
+    <>
+      <Navbar />
 
-              {/* Mobile: centered screenshot above download buttons */}
-              <div className="flex justify-center lg:hidden my-8">
-                <div className="w-full max-w-2xl">
-                  <Image
-                    src="/assets/app-screenshot-1.webp"
-                    alt="Voicebox Application Screenshot"
-                    width={1920}
-                    height={1080}
-                    className="w-full h-auto rounded-lg shadow-lg"
-                    priority
-                  />
-                </div>
-              </div>
-
-              {/* Download buttons under left content */}
-              <div className="space-y-4 pt-4">
-                <div className="grid grid-cols-1 sm:grid-cols-2 gap-3 w-full max-w-2xl">
-                  <Button asChild size="lg" className="w-full px-0">
-                    <a
-                      href={downloadLinks.macArm}
-                      download
-                      className="flex items-center w-full relative"
-                    >
-                      <div className="flex items-center gap-2 flex-shrink-0 pl-4">
-                        <AppleIcon className="h-5 w-5" />
-                        <div className="h-5 w-px bg-border" />
-                      </div>
-                      <span className="flex-1 text-center px-4">macOS (ARM)</span>
-                    </a>
-                  </Button>
-                  <Button asChild size="lg" className="w-full px-0">
-                    <a
-                      href={downloadLinks.macIntel}
-                      download
-                      className="flex items-center w-full relative"
-                    >
-                      <div className="flex items-center gap-2 flex-shrink-0 pl-4">
-                        <AppleIcon className="h-5 w-5" />
-                        <div className="h-5 w-px bg-border" />
-                      </div>
-                      <span className="flex-1 text-center px-4">macOS (Intel)</span>
-                    </a>
-                  </Button>
-                  <Button asChild size="lg" className="w-full px-0">
-                    <a
-                      href={downloadLinks.windows}
-                      download
-                      className="flex items-center w-full relative"
-                    >
-                      <div className="flex items-center gap-2 flex-shrink-0 pl-4">
-                        <WindowsIcon className="h-5 w-5" />
-                        <div className="h-5 w-px bg-border" />
-                      </div>
-                      <span className="flex-1 text-center px-4">Windows</span>
-                    </a>
-                  </Button>
-                  <Button asChild size="lg" className="w-full px-0" disabled>
-                    <a
-                      href={downloadLinks.linux}
-                      onClick={(e) => e.preventDefault()}
-                      className="flex items-center w-full relative opacity-50 cursor-not-allowed"
-                      title="Linux builds coming soon — Currently blocked by GitHub runner disk space limitations."
-                      aria-label="Linux builds coming soon — Currently blocked by GitHub runner disk space limitations."
-                    >
-                      <div className="flex items-center gap-2 flex-shrink-0 pl-4">
-                        <LinuxIcon className="h-5 w-5" />
-                        <div className="h-5 w-px bg-border" />
-                      </div>
-                      <span className="flex-1 text-center px-4">Linux</span>
-                    </a>
-                  </Button>
-                </div>
-                <Button variant="outline" size="lg" asChild className="w-full max-w-2xl">
-                  <a href={GITHUB_REPO} target="_blank" rel="noopener noreferrer">
-                    <Github className="h-4 w-4 mr-2" />
-                    View on GitHub
-                  </a>
-                </Button>
-              </div>
-            </div>
-
-            {/* Desktop: Large screenshot positioned off-screen */}
-            <div className="hidden lg:block relative">
-              <div className="absolute right-0 top-0 -mt-10 w-[200%] -mr-[100%]">
-                <Image
-                  src="/assets/app-screenshot-1.webp"
-                  alt="Voicebox Application Screenshot"
-                  width={1920}
-                  height={1080}
-                  className="w-full h-auto"
-                  priority
-                />
-              </div>
-            </div>
-          </div>
+      {/* ── Hero Section ─────────────────────────────────────────────── */}
+      <section className="relative pt-32 pb-16">
+        {/* Background glow */}
+        <div className="hero-glow hero-glow-fade pointer-events-none absolute inset-0 -top-32">
+          <div className="absolute left-1/2 top-0 -translate-x-1/2 w-[800px] h-[600px] rounded-full bg-accent/15 blur-[150px]" />
+          <div className="absolute left-1/2 top-12 -translate-x-1/2 w-[500px] h-[400px] rounded-full bg-accent/10 blur-[80px]" />
         </div>
-      </section>
 
-      {/* Screenshots Section */}
-      <section className="py-12 sm:py-16 md:py-20">
-        <div className="w-full md:w-[150%] md:-ml-[25%]">
-          <div className="grid grid-cols-1 md:grid-cols-3 gap-6 px-8">
-            <div className="w-full">
-              <Image
-                src="/assets/app-screenshot-2.webp"
-                alt="Voicebox Screenshot 2"
-                width={1920}
-                height={1080}
-                className="w-full h-auto rounded-lg shadow-lg"
-              />
-            </div>
-            <div className="w-full">
-              <Image
-                src="/assets/app-screenshot-1.webp"
-                alt="Voicebox Screenshot 1"
-                width={1920}
-                height={1080}
-                className="w-full h-auto rounded-lg shadow-lg"
-              />
-            </div>
-            <div className="w-full">
-              <Image
-                src="/assets/app-screenshot-3.webp"
-                alt="Voicebox Screenshot 3"
-                width={1920}
-                height={1080}
-                className="w-full h-auto rounded-lg shadow-lg"
-              />
-            </div>
-          </div>
-        </div>
-      </section>
-
-      {/* Description Section */}
-      <section className="py-12 sm:py-16 md:py-20">
-        <div className="container mx-auto px-4 sm:px-6 lg:px-8 max-w-4xl">
-          <h2 className="text-3xl sm:text-4xl md:text-5xl font-bold text-center mb-6 sm:mb-8">
-            What is Voicebox?
-          </h2>
-          <div className="space-y-6 text-lg text-foreground/80 text-center">
-            <p>
-              Voicebox is a <strong>local-first voice cloning studio</strong> with DAW-like features
-              for professional voice synthesis. Think of it as a{' '}
-              <strong>local, free and open-source alternative to ElevenLabs</strong> — download
-              models, clone voices, and generate speech entirely on your machine.
-            </p>
-            <p>
-              Unlike cloud services that lock your voice data behind subscriptions, Voicebox gives
-              you complete privacy, professional tools, and native performance. Download a voice
-              model, clone any voice from a few seconds of audio, and compose multi-voice projects
-              with studio-grade editing tools.
-            </p>
-            <p>
-              Optimized for performance with <strong>Metal acceleration on Mac</strong> and{' '}
-              <strong>CUDA acceleration on Windows/Linux</strong> for fast, local inference.
-            </p>
-            <p className="text-foreground/60">No Python install required.</p>
-          </div>
-        </div>
-      </section>
-
-      {/* Demo Video Section */}
-      <section className="py-12 sm:py-16 md:py-20">
-        <div className="container mx-auto px-4 sm:px-6 lg:px-8 max-w-7xl">
-          <h2 className="text-3xl sm:text-4xl md:text-5xl font-bold text-center mb-8 sm:mb-12">
-            See it in action...
-          </h2>
-          <div className="flex justify-center">
-            <div className="w-full max-w-5xl">
-              {/** biome-ignore lint/a11y/useMediaCaption: not generating captions for this, ya damn linter */}
-              <video
-                className="w-full h-auto rounded-lg shadow-lg"
-                controls
-                playsInline
-                preload="metadata"
-                poster="/assets/app-screenshot-1.webp"
-              >
-                <source
-                  src="/voicebox-demo.webm"
-                  type="video/webm"
-                  aria-label="Voicebox Demo Video"
-                />
-                Your browser does not support the video tag.
-              </video>
-            </div>
-          </div>
-        </div>
-      </section>
-
-      {/* Features Section */}
-      <Section id="features">
-        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 sm:gap-6">
-          {features.map((feature) => (
-            <FeatureCard
-              key={feature.title}
-              title={feature.title}
-              description={feature.description}
-              icon={feature.icon}
+        <div className="relative mx-auto max-w-7xl px-6 text-center">
+          {/* Logo */}
+          <div
+            className="fade-in mx-auto mb-8 h-[120px] w-[120px] md:h-[160px] md:w-[160px]"
+            style={{ animationDelay: '0ms' }}
+          >
+            {/* eslint-disable-next-line @next/next/no-img-element */}
+            <img
+              src="/voicebox-logo-app.webp"
+              alt="Voicebox"
+              className="h-full w-full object-contain"
             />
-          ))}
+          </div>
+
+          {/* Headline */}
+          <div className="fade-in relative" style={{ animationDelay: '100ms' }}>
+            <h1 className="text-5xl font-bold tracking-tighter leading-[0.9] text-foreground md:text-7xl lg:text-8xl">
+              Your voice, your machine.
+            </h1>
+          </div>
+
+          {/* Subtitle */}
+          <p
+            className="fade-in mx-auto mt-6 max-w-2xl text-lg text-muted-foreground md:text-xl"
+            style={{ animationDelay: '200ms' }}
+          >
+            Open source voice cloning studio with support for multiple TTS engines. Clone any voice,
+            generate natural speech, and compose multi-voice projects — all running locally.
+          </p>
+
+          {/* CTAs */}
+          <div
+            className="fade-in mt-10 flex flex-col sm:flex-row items-center justify-center gap-4"
+            style={{ animationDelay: '300ms' }}
+          >
+            <a
+              href="#download"
+              className="rounded-full bg-accent px-8 py-3.5 text-sm font-semibold uppercase tracking-wider text-white shadow-[0_4px_20px_hsl(43_60%_50%/0.3),inset_0_2px_0_rgba(255,255,255,0.2),inset_0_-2px_0_rgba(0,0,0,0.1)] transition-all hover:bg-accent-faint active:shadow-[0_2px_10px_hsl(43_60%_50%/0.3),inset_0_4px_8px_rgba(0,0,0,0.3)]"
+            >
+              Download
+            </a>
+            <a
+              href={GITHUB_REPO}
+              target="_blank"
+              rel="noopener noreferrer"
+              className="flex items-center gap-2 rounded-full border border-border/60 bg-card/40 backdrop-blur-sm px-6 py-3 text-sm font-medium text-muted-foreground transition-colors hover:text-foreground hover:border-border"
+            >
+              <Github className="h-4 w-4" />
+              View on GitHub
+            </a>
+          </div>
+
+          {/* Version + downloads */}
+          <p
+            className="fade-in mt-4 text-xs text-muted-foreground/50"
+            style={{ animationDelay: '400ms' }}
+          >
+            {version ?? ''}
+            {version && totalDownloads != null ? ' \u00b7 ' : ''}
+            {totalDownloads != null ? `${totalDownloads.toLocaleString()} downloads` : ''}
+            {version || totalDownloads != null ? ' \u00b7 ' : ''}
+            macOS, Windows, Linux
+          </p>
         </div>
-      </Section>
-    </div>
+
+        {/* ── ControlUI mockup ─────────────────────────────────────── */}
+        <div className="mt-16">
+          <ControlUI />
+        </div>
+      </section>
+
+      {/* ── Features ─────────────────────────────────────────────── */}
+      <Features />
+
+      {/* ── Voice Creator ────────────────────────────────────────── */}
+      <VoiceCreator />
+
+      {/* ── Models ─────────────────────────────────────────────────── */}
+      <section id="about" className="border-t border-border py-24">
+        <div className="mx-auto max-w-5xl px-6">
+          <div className="text-center mb-14">
+            <h2 className="text-3xl font-semibold tracking-tight text-foreground md:text-4xl mb-4">
+              Multi-Engine Architecture
+            </h2>
+            <p className="text-muted-foreground max-w-2xl mx-auto">
+              Choose the right model for every job. All models run locally on your hardware —
+              download once, use forever.
+            </p>
+          </div>
+
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+            {/* Qwen3-TTS */}
+            <div className="rounded-xl border border-border bg-card/60 backdrop-blur-sm p-6 transition-colors hover:border-accent/30">
+              <div className="flex items-start justify-between mb-3">
+                <div>
+                  <h3 className="text-base font-semibold text-foreground">Qwen3-TTS</h3>
+                  <span className="text-xs text-muted-foreground/60">by Alibaba</span>
+                </div>
+                <div className="flex gap-1.5">
+                  <span className="text-[10px] px-2 py-0.5 rounded-full border border-border bg-background text-muted-foreground">
+                    1.7B
+                  </span>
+                  <span className="text-[10px] px-2 py-0.5 rounded-full border border-border bg-background text-muted-foreground">
+                    0.6B
+                  </span>
+                </div>
+              </div>
+              <p className="text-sm text-muted-foreground leading-relaxed mb-4">
+                High-quality multilingual voice cloning with natural prosody. The only engine with
+                delivery instructions — control tone, pace, and emotion with natural language.
+              </p>
+              <div className="flex flex-wrap gap-2">
+                <span className="flex items-center gap-1 text-[11px] text-muted-foreground/70">
+                  <Globe className="h-3 w-3" />
+                  10 languages
+                </span>
+                <span className="flex items-center gap-1 text-[11px] text-muted-foreground/70">
+                  <MessageSquare className="h-3 w-3" />
+                  Delivery instructions
+                </span>
+              </div>
+            </div>
+
+            {/* Chatterbox */}
+            <div className="rounded-xl border border-border bg-card/60 backdrop-blur-sm p-6 transition-colors hover:border-accent/30">
+              <div className="flex items-start justify-between mb-3">
+                <div>
+                  <h3 className="text-base font-semibold text-foreground">Chatterbox</h3>
+                  <span className="text-xs text-muted-foreground/60">by Resemble AI</span>
+                </div>
+              </div>
+              <p className="text-sm text-muted-foreground leading-relaxed mb-4">
+                Production-grade voice cloning with the broadest language support. 23 languages with
+                zero-shot cloning and emotion exaggeration control.
+              </p>
+              <div className="flex flex-wrap gap-2">
+                <span className="flex items-center gap-1 text-[11px] text-muted-foreground/70">
+                  <Languages className="h-3 w-3" />
+                  23 languages
+                </span>
+              </div>
+            </div>
+
+            {/* Chatterbox Turbo */}
+            <div className="rounded-xl border border-border bg-card/60 backdrop-blur-sm p-6 transition-colors hover:border-accent/30">
+              <div className="flex items-start justify-between mb-3">
+                <div>
+                  <h3 className="text-base font-semibold text-foreground">Chatterbox Turbo</h3>
+                  <span className="text-xs text-muted-foreground/60">by Resemble AI</span>
+                </div>
+                <span className="text-[10px] px-2 py-0.5 rounded-full border border-border bg-background text-muted-foreground">
+                  350M
+                </span>
+              </div>
+              <p className="text-sm text-muted-foreground leading-relaxed mb-4">
+                Lightweight and fast. Supports paralinguistic tags — embed [laugh], [sigh], [gasp]
+                and more directly in your text for expressive, natural speech.
+              </p>
+              <div className="flex flex-wrap gap-2">
+                <span className="flex items-center gap-1 text-[11px] text-muted-foreground/70">
+                  <Zap className="h-3 w-3" />
+                  350M params
+                </span>
+                <span className="flex items-center gap-1 text-[11px] text-muted-foreground/70">
+                  <MessageSquare className="h-3 w-3" />
+                  [laugh] [sigh] tags
+                </span>
+              </div>
+            </div>
+
+            {/* LuxTTS */}
+            <div className="rounded-xl border border-border bg-card/60 backdrop-blur-sm p-6 transition-colors hover:border-accent/30">
+              <div className="flex items-start justify-between mb-3">
+                <div>
+                  <h3 className="text-base font-semibold text-foreground">LuxTTS</h3>
+                  <span className="text-xs text-muted-foreground/60">by ZipVoice</span>
+                </div>
+              </div>
+              <p className="text-sm text-muted-foreground leading-relaxed mb-4">
+                Ultra-fast, CPU-friendly voice cloning at 48kHz. Exceeds 150x realtime on CPU with
+                ~1GB VRAM. The fastest engine for quick iterations.
+              </p>
+              <div className="flex flex-wrap gap-2">
+                <span className="flex items-center gap-1 text-[11px] text-muted-foreground/70">
+                  <Zap className="h-3 w-3" />
+                  150x realtime
+                </span>
+                <span className="flex items-center gap-1 text-[11px] text-muted-foreground/70">
+                  48kHz output
+                </span>
+              </div>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      {/* ── Download Section ─────────────────────────────────────── */}
+      <section id="download" className="border-t border-border py-24">
+        <div className="mx-auto max-w-4xl px-6">
+          <div className="text-center mb-12">
+            <h2 className="text-3xl font-semibold tracking-tight text-foreground md:text-4xl mb-4">
+              Download Voicebox
+            </h2>
+            <p className="text-muted-foreground">
+              Available for macOS, Windows, and Linux. No dependencies required.
+            </p>
+          </div>
+
+          <div className="grid grid-cols-1 sm:grid-cols-2 gap-3 max-w-2xl mx-auto">
+            {/* macOS ARM */}
+            <a
+              href={downloadLinks.macArm}
+              download
+              className="flex items-center rounded-xl border border-border bg-card/60 backdrop-blur-sm px-5 py-4 transition-all hover:border-accent/30 hover:bg-card group"
+            >
+              <AppleIcon className="h-6 w-6 shrink-0 text-muted-foreground group-hover:text-foreground transition-colors" />
+              <div className="ml-4">
+                <div className="text-sm font-medium">macOS</div>
+                <div className="text-xs text-muted-foreground">Apple Silicon (ARM)</div>
+              </div>
+            </a>
+
+            {/* macOS Intel */}
+            <a
+              href={downloadLinks.macIntel}
+              download
+              className="flex items-center rounded-xl border border-border bg-card/60 backdrop-blur-sm px-5 py-4 transition-all hover:border-accent/30 hover:bg-card group"
+            >
+              <AppleIcon className="h-6 w-6 shrink-0 text-muted-foreground group-hover:text-foreground transition-colors" />
+              <div className="ml-4">
+                <div className="text-sm font-medium">macOS</div>
+                <div className="text-xs text-muted-foreground">Intel (x64)</div>
+              </div>
+            </a>
+
+            {/* Windows */}
+            <a
+              href={downloadLinks.windows}
+              download
+              className="flex items-center rounded-xl border border-border bg-card/60 backdrop-blur-sm px-5 py-4 transition-all hover:border-accent/30 hover:bg-card group"
+            >
+              <WindowsIcon className="h-6 w-6 shrink-0 text-muted-foreground group-hover:text-foreground transition-colors" />
+              <div className="ml-4">
+                <div className="text-sm font-medium">Windows</div>
+                <div className="text-xs text-muted-foreground">64-bit (MSI)</div>
+              </div>
+            </a>
+
+            {/* Linux */}
+            <a
+              href={downloadLinks.linux}
+              download
+              className="flex items-center rounded-xl border border-border bg-card/60 backdrop-blur-sm px-5 py-4 transition-all hover:border-accent/30 hover:bg-card group"
+            >
+              <LinuxIcon className="h-6 w-6 shrink-0 text-muted-foreground group-hover:text-foreground transition-colors" />
+              <div className="ml-4">
+                <div className="text-sm font-medium">Linux</div>
+                <div className="text-xs text-muted-foreground">AppImage (x64)</div>
+              </div>
+            </a>
+          </div>
+
+          {/* GitHub link */}
+          <div className="mt-6 text-center">
+            <a
+              href={`${GITHUB_REPO}/releases`}
+              target="_blank"
+              rel="noopener noreferrer"
+              className="inline-flex items-center gap-2 text-sm text-muted-foreground hover:text-foreground transition-colors"
+            >
+              <Github className="h-4 w-4" />
+              View all releases on GitHub
+            </a>
+          </div>
+        </div>
+      </section>
+
+      {/* ── Footer ───────────────────────────────────────────────── */}
+      <Footer />
+    </>
   );
 }

landing/src/components/ControlUI.tsx

@@ -0,0 +1,889 @@
+'use client';
+
+import { motion } from 'framer-motion';
+import {
+  AudioLines,
+  Box,
+  Download,
+  Mic,
+  MoreHorizontal,
+  Pencil,
+  Server,
+  Sparkles,
+  Speaker,
+  Star,
+  Trash2,
+  Volume2,
+  Wand2,
+} from 'lucide-react';
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { LandingAudioPlayer, unlockAudioContext } from './LandingAudioPlayer';
+
+// ─── Data ───────────────────────────────────────────────────────────────────
+// Edit this section to customise all the content shown in the ControlUI demo.
+
+interface VoiceProfile {
+  name: string;
+  description: string;
+  language: string;
+  hasEffects: boolean;
+}
+
+/** Voice profiles shown in the grid / scroll strip. Index matters — DemoScript references profiles by index. */
+const PROFILES: VoiceProfile[] = [
+  {
+    name: 'Jarvis',
+    description: 'Dry wit, composed British AI assistant',
+    language: 'en',
+    hasEffects: true,
+  },
+  {
+    name: 'Samuel L. Jackson',
+    description: 'Commanding intensity with sharp, punchy delivery',
+    language: 'en',
+    hasEffects: true,
+  },
+  {
+    name: 'Bob Ross',
+    description: 'Gentle, soothing voice full of quiet encouragement',
+    language: 'en',
+    hasEffects: false,
+  },
+  {
+    name: 'Sam Altman',
+    description: 'Measured, thoughtful Silicon Valley cadence',
+    language: 'en',
+    hasEffects: false,
+  },
+  {
+    name: 'Morgan Freeman',
+    description: 'Rich, warm baritone with gravitas and calm authority',
+    language: 'en',
+    hasEffects: false,
+  },
+  {
+    name: 'Linus Tech Tips',
+    description: 'Enthusiastic, fast-paced tech explainer energy',
+    language: 'en',
+    hasEffects: false,
+  },
+  {
+    name: 'Fireship',
+    description: 'Rapid-fire, deadpan tech humor with zero filler',
+    language: 'en',
+    hasEffects: false,
+  },
+  {
+    name: 'Scarlett Johansson',
+    description: 'Smooth, low alto with understated warmth',
+    language: 'en',
+    hasEffects: false,
+  },
+  {
+    name: 'Dario Amodei',
+    description: 'Calm, precise articulation with academic depth',
+    language: 'en',
+    hasEffects: false,
+  },
+  {
+    name: 'David Attenborough',
+    description: 'Warm, reverent narration with wonder and precision',
+    language: 'en',
+    hasEffects: false,
+  },
+  {
+    name: 'Zendaya',
+    description: 'Relaxed, modern delivery with effortless cool',
+    language: 'en',
+    hasEffects: false,
+  },
+  {
+    name: 'Barack Obama',
+    description: 'Measured cadence with rhythmic pauses and gravitas',
+    language: 'en',
+    hasEffects: false,
+  },
+];
+
+/** Each entry is one cycle of the demo animation: select a profile → type text → generate → play audio. */
+interface DemoStep {
+  profileIndex: number;
+  text: string;
+  audioUrl: string;
+  engine: string;
+  duration: string;
+  effect?: string;
+}
+
+const DEMO_SCRIPT: DemoStep[] = [
+  {
+    profileIndex: 0,
+    text: 'Sir, I have completed the analysis. Your code has twelve critical vulnerabilities, your coffee is cold, and frankly your commit messages could use some work.',
+    audioUrl: '/audio/jarvis.webm',
+    engine: 'Qwen 1.7B',
+    duration: '0:10',
+    effect: 'Robot',
+  },
+  {
+    profileIndex: 4,
+    text: "I've narrated penguins, galaxies, and the entire history of mankind. But nothing prepared me for the moment a computer learned to do my job from a five second audio clip.",
+    audioUrl: '/audio/morganfreeman.webm',
+    engine: 'Qwen 1.7B',
+    duration: '0:11',
+    effect: 'Radio',
+  },
+  {
+    profileIndex: 3,
+    text: "Open source? [laugh] What's that?",
+    audioUrl: '/audio/samaltman.webm',
+    engine: 'Chatterbox',
+    duration: '0:03',
+  },
+  {
+    profileIndex: 1,
+    text: "So let me get this straight. You downloaded an app, pressed a button, and now there's two of me? The world was not ready for one",
+    audioUrl: '/audio/samjackson.webm',
+    engine: 'Qwen 1.7B',
+    duration: '0:10',
+  },
+  {
+    profileIndex: 5,
+    text: "So we got this voice cloning software and honestly it's kind of terrifying. Like, my wife could not tell the difference. Voicebox dot s h, link in the description!",
+    audioUrl: '/audio/linus.webm',
+    engine: 'Qwen 1.7B',
+    duration: '0:11',
+  },
+  {
+    profileIndex: 6,
+    text: 'This is Voicebox in one hundred seconds. It clones voices locally, it runs on your GPU, and no, OpenAI cannot hear you. Lets go.',
+    audioUrl: '/audio/fireship.webm',
+    engine: 'Qwen 0.6B',
+    duration: '0:09',
+  },
+];
+
+/** History rows pre-populated on first load. Oldest first visually (array index 0 = top row). */
+interface Generation {
+  id: number;
+  profileName: string;
+  text: string;
+  language: string;
+  engine: string;
+  duration: string;
+  timeAgo: string;
+  favorited: boolean;
+  versions: number;
+}
+
+const INITIAL_GENERATIONS: Generation[] = [
+  {
+    id: 1,
+    profileName: 'Morgan Freeman',
+    text: 'The neural pathways of human speech contain more complexity than any language model can fully capture, yet we keep pushing the boundaries of what is possible.',
+    language: 'en',
+    engine: 'Qwen 1.7B',
+    duration: '0:08',
+    timeAgo: '2 minutes ago',
+    favorited: true,
+    versions: 3,
+  },
+  {
+    id: 2,
+    profileName: 'Samuel L. Jackson',
+    text: 'In a world increasingly shaped by artificial intelligence, the human voice remains our most powerful tool for connection and storytelling.',
+    language: 'en',
+    engine: 'Qwen 1.7B',
+    duration: '0:07',
+    timeAgo: '15 minutes ago',
+    favorited: false,
+    versions: 1,
+  },
+  {
+    id: 3,
+    profileName: 'Jarvis',
+    text: 'The architecture of modern text-to-speech systems reveals an elegant interplay between transformer models and acoustic feature prediction.',
+    language: 'en',
+    engine: 'Qwen 0.6B',
+    duration: '0:09',
+    timeAgo: '1 hour ago',
+    favorited: false,
+    versions: 2,
+  },
+  {
+    id: 4,
+    profileName: 'Bob Ross',
+    text: 'Welcome to the next chapter. Every great story begins with a single voice, and today that voice can be yours.',
+    language: 'en',
+    engine: 'Chatterbox',
+    duration: '0:06',
+    timeAgo: '3 hours ago',
+    favorited: true,
+    versions: 1,
+  },
+  {
+    id: 5,
+    profileName: 'Linus Tech Tips',
+    text: 'Local inference gives you complete control over your voice data. No cloud, no subscriptions, no compromises.',
+    language: 'en',
+    engine: 'Qwen 1.7B',
+    duration: '0:05',
+    timeAgo: '5 hours ago',
+    favorited: false,
+    versions: 1,
+  },
+];
+
+const SIDEBAR_ITEMS = [
+  { icon: Volume2, label: 'Generate' },
+  { icon: AudioLines, label: 'Stories' },
+  { icon: Mic, label: 'Voices' },
+  { icon: Wand2, label: 'Effects' },
+  { icon: Speaker, label: 'Audio' },
+  { icon: Box, label: 'Models' },
+  { icon: Server, label: 'Server' },
+];
+
+// ─── Phase system ───────────────────────────────────────────────────────────
+
+type Phase = 'idle' | 'selecting' | 'typing' | 'generating' | 'complete' | 'playing';
+
+const PHASE_DURATIONS: Record<Phase, number> = {
+  idle: 2500,
+  selecting: 800,
+  typing: 6000,
+  generating: 2800,
+  complete: 1200,
+  playing: 4000,
+};
+
+// ─── Typewriter ─────────────────────────────────────────────────────────────
+
+function TypewriterText({ text, speed }: { text: string; speed?: number }) {
+  // Default: fill the typing phase duration, leaving 500ms buffer at the end
+  const resolvedSpeed =
+    speed ?? Math.max(20, Math.floor((PHASE_DURATIONS.typing - 500) / text.length));
+  const [displayed, setDisplayed] = useState('');
+  const indexRef = useRef(0);
+
+  useEffect(() => {
+    indexRef.current = 0;
+    setDisplayed('');
+    const interval = setInterval(() => {
+      indexRef.current += 1;
+      if (indexRef.current <= text.length) {
+        setDisplayed(text.slice(0, indexRef.current));
+      } else {
+        clearInterval(interval);
+      }
+    }, resolvedSpeed);
+    return () => clearInterval(interval);
+  }, [text, resolvedSpeed]);
+
+  return (
+    <>
+      {displayed}
+      <span className="inline-block h-3.5 w-[2px] animate-pulse bg-foreground/70 ml-[1px] align-middle" />
+    </>
+  );
+}
+
+// ─── Loading bars (simplified react-loaders replacement) ────────────────────
+
+function LoadingBars({ mode }: { mode: 'idle' | 'generating' | 'playing' }) {
+  const barColor = mode !== 'idle' ? 'bg-accent' : 'bg-muted-foreground/40';
+  return (
+    <div className="flex items-center gap-[2px] h-5">
+      {[0, 1, 2, 3, 4].map((i) => (
+        <motion.div
+          key={`${i}-${mode}`}
+          className={`w-[3px] rounded-full ${barColor}`}
+          animate={
+            mode === 'generating'
+              ? { height: ['6px', '16px', '6px'] }
+              : mode === 'playing'
+                ? { height: ['8px', '14px', '4px', '12px', '8px'] }
+                : { height: '8px' }
+          }
+          transition={
+            mode === 'generating'
+              ? { duration: 0.6, repeat: Infinity, delay: i * 0.08, ease: 'easeInOut' }
+              : mode === 'playing'
+                ? { duration: 1.2, repeat: Infinity, delay: i * 0.15, ease: 'easeInOut' }
+                : {}
+          }
+        />
+      ))}
+    </div>
+  );
+}
+
+// ─── Profile Card ───────────────────────────────────────────────────────────
+
+const ProfileCard = ({
+  profile,
+  selected,
+  selecting,
+  cardRef,
+}: {
+  profile: VoiceProfile;
+  selected: boolean;
+  selecting: boolean;
+  cardRef?: React.Ref<HTMLDivElement>;
+}) => {
+  return (
+    <motion.div
+      ref={cardRef}
+      className={`rounded-xl border-2 bg-card p-3.5 flex flex-col h-[143px] transition-all duration-200 ${
+        selected ? 'border-accent shadow-md' : 'border-border/50 hover:shadow-sm'
+      } ${selecting && !selected ? 'opacity-60' : ''}`}
+      animate={selecting && selected ? { scale: [1, 1.02, 1] } : {}}
+      transition={{ duration: 0.3 }}
+    >
+      <div className="text-[15px] font-bold leading-tight line-clamp-2">{profile.name}</div>
+      <div className="text-[10px] text-muted-foreground line-clamp-2 leading-relaxed mt-1">
+        {profile.description}
+      </div>
+      <div className="flex items-center gap-1.5 mt-2">
+        <span className="text-[10px] px-1.5 py-0.5 rounded-md border border-border text-muted-foreground">
+          {profile.language}
+        </span>
+        {profile.hasEffects && <Sparkles className="h-3 w-3 text-accent fill-accent" />}
+      </div>
+      <div className="flex items-center gap-1 mt-auto justify-end">
+        <Download className="h-3.5 w-3.5 text-muted-foreground/40" />
+        <Pencil className="h-3.5 w-3.5 text-muted-foreground/40" />
+        <Trash2 className="h-3.5 w-3.5 text-muted-foreground/40" />
+      </div>
+    </motion.div>
+  );
+};
+
+// ─── History Row ────────────────────────────────────────────────────────────
+
+function HistoryRow({
+  gen,
+  mode,
+  isNew,
+}: {
+  gen: Generation;
+  mode: 'idle' | 'generating' | 'playing';
+  isNew: boolean;
+}) {
+  return (
+    <motion.div
+      className={`border rounded-md transition-colors text-left w-full ${
+        mode === 'playing' ? 'bg-muted/70' : 'bg-card'
+      }`}
+      initial={isNew ? { opacity: 0, y: -8 } : false}
+      animate={{ opacity: 1, y: 0 }}
+      transition={{ duration: 0.3, ease: 'easeOut' }}
+    >
+      <div className="flex items-stretch gap-3 h-[80px] p-2.5">
+        {/* Status icon */}
+        <div className="w-8 flex items-center justify-center shrink-0">
+          <LoadingBars mode={mode} />
+        </div>
+
+        {/* Meta info */}
+        <div className="flex flex-col gap-1 w-36 shrink-0 justify-center">
+          <div className="text-[12px] font-medium truncate">{gen.profileName}</div>
+          <div className="flex items-center gap-2 text-[10px] text-muted-foreground">
+            <span>{gen.language}</span>
+            <span>{gen.engine}</span>
+            {mode !== 'generating' && <span>{gen.duration}</span>}
+          </div>
+          <div className="text-[10px] text-muted-foreground">
+            {mode === 'generating' ? (
+              <span className="text-accent">Generating...</span>
+            ) : (
+              gen.timeAgo
+            )}
+          </div>
+        </div>
+
+        {/* Transcript */}
+        <div className="flex-1 min-w-0 flex items-center">
+          <div className="text-[11px] text-muted-foreground line-clamp-3 leading-relaxed">
+            {gen.text}
+          </div>
+        </div>
+
+        {/* Action buttons */}
+        <div className="flex flex-col justify-center items-center gap-0.5 shrink-0">
+          <button className="h-5 w-5 flex items-center justify-center rounded-sm hover:bg-muted">
+            <Star
+              className={`h-2.5 w-2.5 ${
+                gen.favorited ? 'text-accent fill-accent' : 'text-muted-foreground/50'
+              }`}
+            />
+          </button>
+          {gen.versions > 1 && (
+            <button className="h-5 w-5 flex items-center justify-center rounded-sm hover:bg-muted">
+              <AudioLines className="h-2.5 w-2.5 text-muted-foreground/50" />
+            </button>
+          )}
+          <button className="h-5 w-5 flex items-center justify-center rounded-sm hover:bg-muted">
+            <MoreHorizontal className="h-2.5 w-2.5 text-muted-foreground/50" />
+          </button>
+        </div>
+      </div>
+    </motion.div>
+  );
+}
+
+// ─── Floating Generate Box ──────────────────────────────────────────────────
+
+function FloatingGenerateBox({
+  phase,
+  typingText,
+  selectedProfile,
+  engine,
+  effect,
+}: {
+  phase: Phase;
+  typingText: string;
+  selectedProfile: VoiceProfile | null;
+  engine: string;
+  effect?: string;
+}) {
+  const isFocused = phase === 'typing' || phase === 'generating';
+  const isGenerating = phase === 'generating';
+
+  return (
+    <motion.div
+      className="bg-background/30 backdrop-blur-2xl border border-accent/20 rounded-[1.5rem] shadow-2xl p-2.5"
+      animate={{
+        borderColor: isGenerating
+          ? 'hsl(43 50% 45% / 0.35)'
+          : isFocused
+            ? 'hsl(43 50% 45% / 0.25)'
+            : 'hsl(43 50% 45% / 0.15)',
+      }}
+      transition={{ duration: 0.3 }}
+    >
+      {/* Text area + generate button */}
+      <div className="flex items-start gap-2">
+        <div className="flex-1 min-w-0">
+          <motion.div
+            className="overflow-hidden"
+            animate={{ height: isFocused ? 100 : 32 }}
+            transition={{ duration: 0.25, ease: 'easeOut' }}
+          >
+            <div
+              className="text-[12.5px] text-muted-foreground/60 px-2 py-1 leading-relaxed"
+              style={{ minHeight: isFocused ? 100 : 32 }}
+            >
+              {phase === 'typing' ? (
+                <span className="text-foreground">
+                  <TypewriterText text={typingText} />
+                </span>
+              ) : phase === 'generating' ? (
+                <span className="text-muted-foreground/40">{typingText}</span>
+              ) : (
+                <span>
+                  {selectedProfile
+                    ? `Generate speech using ${selectedProfile.name}...`
+                    : 'Select a voice profile above...'}
+                </span>
+              )}
+            </div>
+          </motion.div>
+        </div>
+
+        {/* Generate button */}
+        <button className="h-8 w-8 rounded-full bg-accent flex items-center justify-center shrink-0 shadow-lg">
+          <Sparkles className="h-3.5 w-3.5 text-white fill-white" />
+        </button>
+      </div>
+
+      {/* Bottom selectors */}
+      <div className="flex items-center gap-1.5 mt-2">
+        <span className="text-[10px] px-2 py-1 rounded-full border border-border bg-card text-muted-foreground">
+          English
+        </span>
+        <span className="text-[10px] px-2 py-1 rounded-full border border-border bg-card text-muted-foreground">
+          {engine}
+        </span>
+        <span
+          className={`text-[10px] px-2 py-1 rounded-full border flex items-center gap-1 ${
+            effect
+              ? 'border-accent/30 bg-accent/10 text-accent'
+              : 'border-border bg-card text-muted-foreground'
+          }`}
+        >
+          <Sparkles className={`h-2.5 w-2.5 ${effect ? 'fill-accent' : ''}`} />
+          {effect || 'Effect'}
+        </span>
+      </div>
+    </motion.div>
+  );
+}
+
+// ─── Main ControlUI ─────────────────────────────────────────────────────────
+
+export function ControlUI() {
+  const [phase, setPhase] = useState<Phase>('idle');
+  const [selectedIndex, setSelectedIndex] = useState(DEMO_SCRIPT[0].profileIndex);
+  const [cycle, setCycle] = useState(0);
+  const [newGenId, setNewGenId] = useState<number | null>(null);
+  const [generations, setGenerations] = useState<Generation[]>([...INITIAL_GENERATIONS]);
+  const [isMuted, setIsMuted] = useState(true);
+  const [isVisible, setIsVisible] = useState(true);
+  const [pageHidden, setPageHidden] = useState(false);
+  const containerRef = useRef<HTMLDivElement>(null);
+  const phaseRef = useRef(phase);
+  const mobileCardRefs = useRef<Map<number, HTMLDivElement>>(new Map());
+  const desktopCardRefs = useRef<Map<number, HTMLDivElement>>(new Map());
+  const profileGridRef = useRef<HTMLDivElement>(null);
+  const [scrollLeft, setScrollLeft] = useState(0);
+  phaseRef.current = phase;
+
+  const step = DEMO_SCRIPT[cycle % DEMO_SCRIPT.length];
+  const selectedProfile = PROFILES[selectedIndex];
+
+  // Scroll to selected profile card — accounts for generate box overlay on desktop
+  useEffect(() => {
+    const isMobile = window.innerWidth < 768;
+
+    if (isMobile) {
+      const el = mobileCardRefs.current.get(selectedIndex);
+      if (el) el.scrollIntoView({ behavior: 'smooth', block: 'nearest', inline: 'center' });
+      return;
+    }
+
+    // Desktop
+    const el = desktopCardRefs.current.get(selectedIndex);
+    const scrollContainer = profileGridRef.current;
+    if (!el || !scrollContainer) return;
+
+    const containerTop = scrollContainer.getBoundingClientRect().top;
+    const elTop = el.getBoundingClientRect().top;
+    const elRelTop = elTop - containerTop + scrollContainer.scrollTop;
+
+    const rowHeight = 145;
+    const generateBoxHeight = 200;
+    const visibleTop = scrollContainer.scrollTop;
+    const visibleBottom = visibleTop + scrollContainer.clientHeight - generateBoxHeight;
+    const elRelBottom = elRelTop + el.offsetHeight;
+
+    if (elRelTop >= visibleTop && elRelBottom <= visibleBottom) {
+      return;
+    }
+
+    const target = elRelTop - rowHeight;
+    scrollContainer.scrollTo({ top: Math.max(0, target), behavior: 'smooth' });
+  }, [selectedIndex]);
+
+  // Visibility detection
+  useEffect(() => {
+    const observer = new IntersectionObserver(([entry]) => setIsVisible(entry.isIntersecting), {
+      threshold: 0,
+    });
+    if (containerRef.current) observer.observe(containerRef.current);
+
+    const handleVisibility = () => setPageHidden(document.visibilityState !== 'visible');
+    document.addEventListener('visibilitychange', handleVisibility);
+
+    return () => {
+      observer.disconnect();
+      document.removeEventListener('visibilitychange', handleVisibility);
+    };
+  }, []);
+
+  const paused = !isVisible || pageHidden;
+
+  // Phase cycling — `playing` phase is driven by audio finish, not a timeout
+  useEffect(() => {
+    if (paused || phase === 'playing') return;
+
+    const duration = PHASE_DURATIONS[phase];
+    const timer = setTimeout(() => {
+      console.log(
+        '[ControlUI] phase transition',
+        phase,
+        '→ next, cycle:',
+        cycle,
+        'step profile:',
+        PROFILES[step.profileIndex].name,
+      );
+      switch (phase) {
+        case 'idle': {
+          setSelectedIndex(step.profileIndex);
+          setPhase('selecting');
+          break;
+        }
+        case 'selecting':
+          setPhase('typing');
+          break;
+        case 'typing': {
+          const profile = PROFILES[step.profileIndex];
+          const newGen: Generation = {
+            id: Date.now(),
+            profileName: profile.name,
+            text: step.text,
+            language: profile.language,
+            engine: step.engine,
+            duration: step.duration,
+            timeAgo: 'just now',
+            favorited: false,
+            versions: 1,
+          };
+          setGenerations((prev) => [newGen, ...prev.slice(0, 5)]);
+          setNewGenId(newGen.id);
+          setPhase('generating');
+          break;
+        }
+        case 'generating':
+          setPhase('playing');
+          break;
+      }
+    }, duration);
+
+    return () => clearTimeout(timer);
+  }, [phase, paused, step, cycle]);
+
+  const handleAudioFinish = useCallback(() => {
+    if (phaseRef.current !== 'playing') return;
+    setPhase('idle');
+    setCycle((c) => c + 1);
+    setNewGenId(null);
+  }, []);
+
+  const isGenerating = phase === 'generating';
+
+  return (
+    <div ref={containerRef} className="relative z-20 mx-auto w-full max-w-6xl px-6">
+      {/* Unmute button with handwritten hint */}
+      <div className="flex justify-end mb-3">
+        <div className="relative">
+          {/* Handwritten hint — absolutely positioned above the button */}
+          {isMuted && (
+            <motion.div
+              className="absolute select-none pointer-events-none"
+              style={{ top: -30, right: 100 }}
+              initial={{ opacity: 0, y: 6 }}
+              animate={{ opacity: 1, y: 0 }}
+              transition={{ delay: 2, duration: 0.6, ease: 'easeOut' }}
+            >
+              <span
+                className="text-xl text-accent/80 whitespace-nowrap"
+                style={{
+                  fontFamily: "'Caveat', 'Segoe Script', 'Comic Sans MS', cursive",
+                  letterSpacing: '0.02em',
+                }}
+              >
+                try me!
+              </span>
+              {/* Curved arrow from text down-right toward the button */}
+              <svg
+                width="22"
+                height="11"
+                viewBox="0 0 80 40"
+                fill="none"
+                className="text-accent/70 absolute"
+                style={{ top: 14, left: 60 }}
+                aria-hidden="true"
+              >
+                <title>Arrow</title>
+                <path
+                  d="M4 4 C20 4, 40 8, 55 20 C62 26, 66 32, 70 36"
+                  stroke="currentColor"
+                  strokeWidth="3"
+                  strokeLinecap="round"
+                  fill="none"
+                />
+                <path
+                  d="M58 42 L70 36 L64 22"
+                  stroke="currentColor"
+                  strokeWidth="3"
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  transform="rotate(35, 70, 36)"
+                  fill="none"
+                />
+              </svg>
+            </motion.div>
+          )}
+          <button
+            onClick={() => {
+              unlockAudioContext();
+              setIsMuted(!isMuted);
+            }}
+            className="flex items-center gap-2 px-3 py-1.5 rounded-full border border-border bg-card/50 backdrop-blur text-xs text-muted-foreground hover:text-foreground transition-colors"
+          >
+            {isMuted ? (
+              <>
+                <Volume2 className="h-3.5 w-3.5" />
+                <span>Unmute</span>
+              </>
+            ) : (
+              <>
+                <Volume2 className="h-3.5 w-3.5 text-accent" />
+                <span>Mute</span>
+              </>
+            )}
+          </button>
+        </div>
+      </div>
+
+      <div className="overflow-hidden rounded-2xl border border-app-line bg-app-box shadow-[0_25px_60px_rgba(0,0,0,0.5),0_8px_20px_rgba(0,0,0,0.3)] md:h-[640px] pointer-events-none select-none">
+        <div className="flex flex-col md:flex-row h-full">
+          {/* ── Sidebar (hidden on mobile) ─────────────────────────── */}
+          <div className="hidden md:flex w-16 shrink-0 border-r border-app-line bg-sidebar flex-col items-center py-4 gap-4">
+            {/* Logo */}
+            <div className="mb-1">
+              <div
+                className="w-9 h-9 rounded-lg overflow-hidden"
+                style={{
+                  filter:
+                    'drop-shadow(0 0 6px hsl(43 50% 45% / 0.5)) drop-shadow(0 0 14px hsl(43 50% 45% / 0.35))',
+                }}
+              >
+                <img
+                  src="/voicebox-logo-app.webp"
+                  alt=""
+                  className="w-full h-full object-contain"
+                />
+              </div>
+            </div>
+
+            {/* Nav items */}
+            <div className="flex flex-col gap-2">
+              {SIDEBAR_ITEMS.map((item, i) => {
+                const Icon = item.icon;
+                const active = i === 0;
+                return (
+                  <div
+                    key={item.label}
+                    className={`w-9 h-9 rounded-full flex items-center justify-center transition-all duration-200 ${
+                      active
+                        ? 'bg-white/[0.07] text-foreground shadow-lg backdrop-blur-sm border border-white/[0.08]'
+                        : 'text-muted-foreground/60'
+                    }`}
+                  >
+                    <Icon className="h-4 w-4" />
+                  </div>
+                );
+              })}
+            </div>
+
+            {/* Version */}
+            <div className="mt-auto text-[8px] text-muted-foreground/40">v0.2.0</div>
+          </div>
+
+          {/* ── Main content ──────────────────────────────────────── */}
+          <div className="flex-1 flex flex-col md:flex-row min-w-0 relative">
+            {/* Left: Profiles + Generate box */}
+            <div className="flex flex-col min-w-0 relative md:flex-1 md:overflow-hidden">
+              {/* Gradient fade overlay — sits between header and scroll content */}
+              <div className="hidden md:block absolute top-0 left-0 right-0 h-16 bg-gradient-to-b from-app-box to-transparent z-[1] pointer-events-none" />
+
+              {/* Header — floats above everything */}
+              <div className="absolute top-0 left-0 right-0 z-10 px-4 pt-4 md:pt-6 pb-2 flex items-center justify-between">
+                <h2 className="text-base font-bold">Voicebox</h2>
+                <div className="flex items-center gap-1.5">
+                  <button className="h-6 text-[10px] px-2.5 rounded-full border border-border bg-card text-muted-foreground flex items-center gap-1">
+                    Import Voice
+                  </button>
+                  <button className="h-6 text-[10px] px-2.5 rounded-full bg-accent text-accent-foreground flex items-center">
+                    Create Voice
+                  </button>
+                </div>
+              </div>
+
+              {/* Scrollable profile cards — scrolls behind header + gradient */}
+              <div
+                ref={profileGridRef}
+                className="flex-1 min-h-0 md:overflow-y-auto md:pt-14 pt-12"
+              >
+                <div className="px-4">
+                  {/* Mobile: horizontal scroll strip with edge fade */}
+                  <div className="relative md:hidden">
+                    {scrollLeft > 0 && (
+                      <div className="absolute left-0 top-0 bottom-0 w-6 bg-gradient-to-r from-app-box to-transparent z-10" />
+                    )}
+                    <div className="absolute right-0 top-0 bottom-0 w-6 bg-gradient-to-l from-app-box to-transparent z-10" />
+                    <div
+                      className="flex gap-2 overflow-x-auto pb-2"
+                      onScroll={(e) => setScrollLeft(e.currentTarget.scrollLeft)}
+                    >
+                      {PROFILES.map((profile, i) => (
+                        <div
+                          key={profile.name}
+                          className="shrink-0 w-[140px]"
+                          ref={(el) => {
+                            if (el) mobileCardRefs.current.set(i, el);
+                          }}
+                        >
+                          <ProfileCard
+                            profile={profile}
+                            selected={i === selectedIndex}
+                            selecting={phase === 'selecting'}
+                          />
+                        </div>
+                      ))}
+                    </div>
+                  </div>
+
+                  {/* Desktop: 3-col grid */}
+                  <div className="hidden md:grid grid-cols-3 gap-2 mt-1 pb-44">
+                    {PROFILES.map((profile, i) => (
+                      <ProfileCard
+                        key={profile.name}
+                        profile={profile}
+                        selected={i === selectedIndex}
+                        selecting={phase === 'selecting'}
+                        cardRef={(el: HTMLDivElement | null) => {
+                          if (el) desktopCardRefs.current.set(i, el);
+                        }}
+                      />
+                    ))}
+                  </div>
+                </div>
+              </div>
+
+              {/* Floating generate box — desktop: absolute overlay, mobile: inline */}
+              <div className="px-3 pt-2 pb-3 md:pt-0 md:absolute md:left-4 md:right-4 md:bottom-[117px] md:z-20 md:pb-0 md:px-0">
+                <FloatingGenerateBox
+                  phase={phase}
+                  typingText={step.text}
+                  selectedProfile={selectedProfile}
+                  engine={step.engine}
+                  effect={step.effect}
+                />
+              </div>
+            </div>
+
+            {/* Right/Below: History */}
+            <div className="md:w-[48%] shrink-0 flex flex-col min-w-0 border-t md:border-t-0 border-app-line">
+              <div className="max-h-[360px] md:max-h-none flex-1 overflow-hidden px-3 pt-3 md:pt-6 pb-3">
+                <div className="flex flex-col gap-2">
+                  {generations.map((gen) => {
+                    const isThisNew = gen.id === newGenId;
+                    const rowMode: 'idle' | 'generating' | 'playing' =
+                      isThisNew && isGenerating
+                        ? 'generating'
+                        : isThisNew && phase === 'playing'
+                          ? 'playing'
+                          : 'idle';
+                    return <HistoryRow key={gen.id} gen={gen} mode={rowMode} isNew={isThisNew} />;
+                  })}
+                </div>
+              </div>
+            </div>
+
+            {/* Audio player */}
+            <LandingAudioPlayer
+              audioUrl={step.audioUrl}
+              title={selectedProfile.name}
+              playing={phase === 'playing'}
+              muted={isMuted}
+              onFinish={handleAudioFinish}
+              onClose={() => {}}
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

landing/src/components/Features.tsx

@@ -0,0 +1,855 @@
+'use client';
+
+import { motion } from 'framer-motion';
+import { AudioLines, Cloud, MessageSquareText, Mic, Sparkles, TextCursorInput } from 'lucide-react';
+import { useEffect, useMemo, useRef, useState } from 'react';
+
+// ─── Lazy load wrapper ──────────────────────────────────────────────────────
+
+function LazyLoad({
+  children,
+  className,
+  rootMargin = '200px',
+}: {
+  children: React.ReactNode;
+  className?: string;
+  rootMargin?: string;
+}) {
+  const ref = useRef<HTMLDivElement>(null);
+  const [visible, setVisible] = useState(false);
+
+  useEffect(() => {
+    const el = ref.current;
+    if (!el) return;
+    const observer = new IntersectionObserver(
+      ([entry]) => {
+        if (entry.isIntersecting) {
+          setVisible(true);
+          observer.disconnect();
+        }
+      },
+      { rootMargin },
+    );
+    observer.observe(el);
+    return () => observer.disconnect();
+  }, [rootMargin]);
+
+  return (
+    <div ref={ref} className={className}>
+      {visible ? children : null}
+    </div>
+  );
+}
+
+// ─── Animation: Voice Cloning ───────────────────────────────────────────────
+
+function VoiceCloningAnimation() {
+  const [phase, setPhase] = useState(0);
+
+  useEffect(() => {
+    const interval = setInterval(() => {
+      setPhase((p) => (p + 1) % 3);
+    }, 2400);
+    return () => clearInterval(interval);
+  }, []);
+
+  const samples = ['Sample 1', 'Sample 2', 'Sample 3'];
+  const bars = [0.4, 0.7, 0.5, 0.9, 0.3, 0.6, 0.8, 0.4, 0.7, 0.5, 0.3, 0.6];
+
+  return (
+    <div className="h-40 w-full flex items-center justify-center overflow-hidden rounded-md bg-app-darkerBox/50 p-4">
+      <div className="flex flex-col items-center gap-3 w-full max-w-[200px]">
+        {/* Sample pills */}
+        <div className="flex gap-1.5">
+          {samples.map((s, i) => (
+            <motion.div
+              key={s}
+              className="text-[9px] px-2 py-1 rounded-full border font-medium"
+              animate={{
+                borderColor: i === phase ? 'hsl(43 50% 45% / 0.5)' : 'rgba(255,255,255,0.06)',
+                backgroundColor: i === phase ? 'hsl(43 50% 45% / 0.08)' : 'rgba(255,255,255,0.02)',
+                color: i === phase ? 'hsl(43 50% 45%)' : 'rgba(255,255,255,0.4)',
+              }}
+              transition={{ duration: 0.3 }}
+            >
+              {s}
+            </motion.div>
+          ))}
+        </div>
+
+        {/* Waveform visualization */}
+        <div className="flex items-center gap-[2px] h-10 w-full justify-center">
+          {bars.map((h, i) => (
+            <motion.div
+              key={i}
+              className="w-[4px] rounded-full"
+              animate={{
+                height: `${h * 100}%`,
+                backgroundColor: phase === 2 ? 'hsl(43 50% 45%)' : 'rgba(255,255,255,0.15)',
+              }}
+              transition={{
+                height: { duration: 0.6, delay: i * 0.04, ease: 'easeInOut' },
+                backgroundColor: { duration: 0.3 },
+              }}
+            />
+          ))}
+        </div>
+
+        {/* Result label */}
+        <motion.div
+          className="text-[9px] font-mono"
+          animate={{
+            opacity: phase === 2 ? 1 : 0.3,
+            color: phase === 2 ? 'hsl(43 50% 45%)' : 'rgba(255,255,255,0.3)',
+          }}
+          transition={{ duration: 0.3 }}
+        >
+          voice profile ready
+        </motion.div>
+      </div>
+    </div>
+  );
+}
+
+// ─── Mini waveform for clips ────────────────────────────────────────────────
+// Fixed-width dense waveform that overflows — the clip container clips it.
+// This way resizing a clip just reveals/hides bars instead of re-rendering.
+
+const WAVEFORM_BAR_COUNT = 60;
+
+function MiniWaveform({ seed, color }: { seed: number; color: string }) {
+  // Deterministic pseudo-random waveform that looks like real speech audio.
+  // Uses layered noise at different frequencies for natural envelope + detail.
+  const bars = useMemo(() => {
+    // Seeded pseudo-random number generator (deterministic per seed)
+    let s = seed * 9301 + 49297;
+    const rand = () => {
+      s = (s * 16807 + 0) % 2147483647;
+      return s / 2147483647;
+    };
+
+    // Pre-generate random values
+    const r = Array.from({ length: WAVEFORM_BAR_COUNT }, () => rand());
+
+    return Array.from({ length: WAVEFORM_BAR_COUNT }, (_, i) => {
+      const t = i / WAVEFORM_BAR_COUNT;
+
+      // Slow envelope — broad amplitude shape (words / phrases)
+      const envelope =
+        0.3 +
+        0.35 *
+          Math.sin(t * Math.PI * (2 + (seed % 3))) *
+          Math.sin(t * Math.PI * (1.3 + seed * 0.7)) +
+        0.2 * Math.sin(t * Math.PI * (4.7 + seed * 1.3));
+
+      // Medium variation — syllable-level bumps
+      const mid = 0.15 * Math.sin(i * 0.8 + seed * 3.1) * Math.cos(i * 1.3 + seed);
+
+      // High-frequency noise — individual sample jitter
+      const noise = (r[i] - 0.5) * 0.25;
+
+      // Combine and clamp
+      const raw = envelope + mid + noise;
+      return Math.max(0.06, Math.min(1, raw));
+    });
+  }, [seed]);
+
+  return (
+    <div className="flex items-center h-full overflow-hidden">
+      {bars.map((h, i) => (
+        <div
+          key={`w-${seed}-${i}`}
+          className="shrink-0 rounded-full opacity-50"
+          style={{
+            width: 2,
+            marginRight: 1,
+            height: `${h * 100}%`,
+            backgroundColor: color,
+          }}
+        />
+      ))}
+    </div>
+  );
+}
+
+// ─── Animation: Stories Editor ───────────────────────────────────────────────
+
+// Clip shape: id, profile, track, left (px out of 220), width (px), waveform seed
+type DemoClip = { id: string; profile: string; track: number; x: number; w: number; seed: number };
+
+const INITIAL_CLIPS: DemoClip[] = [
+  { id: 'n1', profile: 'Morgan', track: 0, x: 4, w: 70, seed: 1 },
+  { id: 'n2', profile: 'Morgan', track: 0, x: 135, w: 35, seed: 2 },
+  { id: 'a1', profile: 'Scarlett', track: 1, x: 25, w: 40, seed: 3 },
+  { id: 'a2', profile: 'Scarlett', track: 1, x: 120, w: 35, seed: 4 },
+  { id: 'b1', profile: 'Jarvis', track: 2, x: 70, w: 45, seed: 5 },
+];
+
+// Timeline width the clips live inside
+const TL_W = 220;
+// Each action returns a new clips array (or modifies in place)
+type Action = { label: string; apply: (clips: DemoClip[]) => DemoClip[] };
+
+const ACTIONS: Action[] = [
+  // 0 — move Jarvis clip earlier
+  { label: 'Move clip', apply: (c) => c.map((cl) => (cl.id === 'b1' ? { ...cl, x: 55 } : cl)) },
+  // 1 — split Morgan's first clip into two with visible gap
+  {
+    label: 'Split clip',
+    apply: (c) => {
+      // Idempotent: if n1b already exists, the split already happened
+      if (c.some((cl) => cl.id === 'n1b')) return c;
+      const clip = c.find((cl) => cl.id === 'n1');
+      if (!clip) return c;
+      const leftW = 25;
+      const gap = 8;
+      const rightW = clip.w - leftW - gap;
+      return [
+        ...c.filter((cl) => cl.id !== 'n1'),
+        { ...clip, w: leftW, id: 'n1' },
+        {
+          id: 'n1b',
+          profile: clip.profile,
+          track: clip.track,
+          x: clip.x + leftW + gap,
+          w: rightW,
+          seed: 6,
+        },
+      ];
+    },
+  },
+  // 2 — trim Scarlett's second clip shorter
+  { label: 'Trim clip', apply: (c) => c.map((cl) => (cl.id === 'a2' ? { ...cl, w: 25 } : cl)) },
+  // 3 — duplicate Jarvis to track 0
+  {
+    label: 'Duplicate',
+    apply: (c) => {
+      // Idempotent: if b1d already exists, the duplicate already happened
+      if (c.some((cl) => cl.id === 'b1d')) return c;
+      const clip = c.find((cl) => cl.id === 'b1');
+      if (!clip) return c;
+      return [...c, { ...clip, id: 'b1d', track: 0, x: 180, w: 35, seed: 7 }];
+    },
+  },
+  // 4 — reset
+  { label: '', apply: () => INITIAL_CLIPS },
+];
+
+function StoriesAnimation() {
+  const [clips, setClips] = useState<DemoClip[]>(INITIAL_CLIPS);
+  const [actionIndex, setActionIndex] = useState(-1);
+  const [playheadX, setPlayheadX] = useState(0);
+  const [selectedId, setSelectedId] = useState<string | null>(null);
+  const playheadRef = useRef<ReturnType<typeof requestAnimationFrame>>(0);
+
+  // Animate the playhead continuously
+  useEffect(() => {
+    let start: number | null = null;
+    const speed = 12; // px per second
+    const animate = (ts: number) => {
+      if (start === null) start = ts;
+      const elapsed = (ts - start) / 1000;
+      setPlayheadX((elapsed * speed) % TL_W);
+      playheadRef.current = requestAnimationFrame(animate);
+    };
+    playheadRef.current = requestAnimationFrame(animate);
+    return () => cancelAnimationFrame(playheadRef.current);
+  }, []);
+
+  // Step through actions
+  useEffect(() => {
+    const interval = setInterval(() => {
+      setActionIndex((prev) => {
+        const next = (prev + 1) % ACTIONS.length;
+        setClips((current) => ACTIONS[next].apply(current));
+        // Highlight the clip being acted on
+        if (next === 0) setSelectedId('b1');
+        else if (next === 1) setSelectedId('n1');
+        else if (next === 2) setSelectedId('a2');
+        else if (next === 3) setSelectedId('b1');
+        else setSelectedId(null);
+        return next;
+      });
+    }, 2600);
+    return () => clearInterval(interval);
+  }, []);
+
+  const trackLabels = ['1', '0', '-1'];
+  const timeMarkers = [0, 2, 4, 6, 8];
+  const accentColor = 'hsl(43 50% 45%)';
+  const accentFg = 'hsl(30 10% 94%)';
+
+  return (
+    <div className="h-40 w-full flex flex-col overflow-hidden rounded-md bg-app-darkerBox/50">
+      {/* Toolbar */}
+      <div className="flex items-center gap-1.5 px-2 py-1 border-b border-app-line bg-app-darkBox/60 shrink-0">
+        <div className="w-1.5 h-1.5 rounded-full bg-ink-faint/40" />
+        <div className="flex items-center gap-1">
+          <div className="w-4 h-4 rounded flex items-center justify-center bg-app-button">
+            <div className="border-l-[4px] border-l-ink-faint border-t-[3px] border-t-transparent border-b-[3px] border-b-transparent ml-0.5" />
+          </div>
+          <div className="w-4 h-4 rounded flex items-center justify-center bg-app-button">
+            <div className="w-2 h-2 rounded-sm bg-ink-faint/60" />
+          </div>
+        </div>
+        <span className="text-[8px] text-ink-faint font-mono ml-1 tabular-nums">0:03 / 0:10</span>
+        <div className="flex-1" />
+        {actionIndex >= 0 && actionIndex < ACTIONS.length - 1 && (
+          <motion.span
+            key={actionIndex}
+            className="text-[7px] font-medium px-1.5 py-0.5 rounded-full"
+            style={{
+              backgroundColor: `${accentColor.replace(')', ' / 0.15)')}`,
+              color: accentColor,
+            }}
+            initial={{ opacity: 0, y: 3 }}
+            animate={{ opacity: 1, y: 0 }}
+            exit={{ opacity: 0 }}
+            transition={{ duration: 0.25 }}
+          >
+            {ACTIONS[actionIndex].label}
+          </motion.span>
+        )}
+        <div className="flex items-center gap-0.5">
+          <span className="text-[7px] text-ink-faint">Zoom</span>
+          <div className="w-3 h-3 rounded flex items-center justify-center bg-app-button text-[8px] text-ink-faint">
+            -
+          </div>
+          <div className="w-3 h-3 rounded flex items-center justify-center bg-app-button text-[8px] text-ink-faint">
+            +
+          </div>
+        </div>
+      </div>
+
+      {/* Timeline */}
+      <div className="flex flex-1 min-h-0">
+        {/* Track labels sidebar */}
+        <div className="w-7 shrink-0 border-r border-app-line bg-app-darkBox/30 flex flex-col">
+          <div className="h-5 border-b border-app-line" />
+          {trackLabels.map((label) => (
+            <div
+              key={label}
+              className="flex-1 flex items-center justify-center border-b border-app-line"
+            >
+              <span className="text-[7px] text-ink-faint select-none">{label}</span>
+            </div>
+          ))}
+        </div>
+
+        {/* Tracks area */}
+        <div className="flex-1 relative overflow-hidden flex flex-col">
+          {/* Time ruler */}
+          <div className="h-5 shrink-0 border-b border-app-line bg-app-darkBox/20 relative">
+            {timeMarkers.map((t) => (
+              <div
+                key={`tm-${t}`}
+                className="absolute top-0 h-full flex flex-col justify-end pb-0.5"
+                style={{ left: `${(t / 10) * 100}%` }}
+              >
+                <div className="h-1.5 w-px bg-app-line" />
+                <span className="text-[7px] text-ink-faint ml-0.5 select-none">{`0:0${t}`}</span>
+              </div>
+            ))}
+          </div>
+
+          {/* Track rows + clips — same parent so percentages match */}
+          <div className="flex-1 relative min-h-0">
+            {/* Track rows background */}
+            {trackLabels.map((label, i) => (
+              <div
+                key={`bg-${label}`}
+                className="border-b border-app-line absolute left-0 right-0"
+                style={{
+                  height: `${100 / 3}%`,
+                  top: `${(i * 100) / 3}%`,
+                  backgroundColor: i % 2 === 0 ? 'transparent' : 'rgba(255,255,255,0.01)',
+                }}
+              />
+            ))}
+
+            {/* Clips */}
+            {clips.map((clip) => {
+              const trackIdx = clip.track;
+              const isSelected = clip.id === selectedId;
+              const clipTop = `calc(${(trackIdx * 100) / 3}% + 2px)`;
+              const clipHeight = `calc(${100 / 3}% - 4px)`;
+              return (
+                <motion.div
+                  key={clip.id}
+                  className="absolute rounded overflow-hidden"
+                  initial={false}
+                  style={{
+                    height: clipHeight,
+                    left: `${(clip.x / TL_W) * 100}%`,
+                    width: `${(clip.w / TL_W) * 100}%`,
+                    top: clipTop,
+                  }}
+                  animate={{
+                    left: `${(clip.x / TL_W) * 100}%`,
+                    width: `${(clip.w / TL_W) * 100}%`,
+                    top: clipTop,
+                  }}
+                  transition={{ type: 'spring', stiffness: 200, damping: 25 }}
+                >
+                  <div
+                    className="w-full h-full rounded overflow-hidden flex flex-col"
+                    style={{
+                      backgroundColor: isSelected ? 'hsl(43 50% 45%)' : 'hsl(43 45% 40%)',
+                      boxShadow: isSelected
+                        ? 'inset 0 0 0 1px hsl(43 50% 55%), 0 0 0 1px hsl(30 10% 94% / 0.4)'
+                        : 'inset 0 0 0 1px hsl(30 10% 94% / 0.1)',
+                    }}
+                  >
+                    {/* Profile label — scaled to bypass browser min font size */}
+                    <div className="shrink-0 relative" style={{ height: 9 }}>
+                      <span
+                        className="text-[10px] font-medium leading-none absolute top-0 left-0.5 origin-top-left opacity-80 whitespace-nowrap"
+                        style={{ color: accentFg, transform: 'scale(0.75)' }}
+                      >
+                        {clip.profile}
+                      </span>
+                    </div>
+                    {/* Waveform — absolutely positioned so it never affects clip width */}
+                    <div className="absolute left-0 right-0 bottom-0" style={{ top: 9 }}>
+                      <MiniWaveform seed={clip.seed} color={accentFg} />
+                    </div>
+                  </div>
+                  {/* Trim handles on selected */}
+                  {isSelected && (
+                    <>
+                      <div
+                        className="absolute left-0 top-0 bottom-0 w-1 rounded-l"
+                        style={{ backgroundColor: 'hsl(30 10% 94% / 0.25)' }}
+                      />
+                      <div
+                        className="absolute right-0 top-0 bottom-0 w-1 rounded-r"
+                        style={{ backgroundColor: 'hsl(30 10% 94% / 0.25)' }}
+                      />
+                    </>
+                  )}
+                </motion.div>
+              );
+            })}
+
+            {/* Playhead */}
+            <motion.div
+              className="absolute top-0 bottom-0 w-[2px] rounded-full z-20 pointer-events-none"
+              style={{ backgroundColor: accentColor }}
+              animate={{ left: `${(playheadX / TL_W) * 100}%` }}
+              transition={{ duration: 0.05, ease: 'linear' }}
+            >
+              <div
+                className="absolute -top-0.5 left-1/2 -translate-x-1/2 w-2 h-2 rounded-full"
+                style={{ backgroundColor: accentColor }}
+              />
+            </motion.div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+// ─── Animation: Effects Pipeline ────────────────────────────────────────────
+
+function EffectsAnimation() {
+  const [activeEffect, setActiveEffect] = useState(0);
+  const effects = [
+    { name: 'Pitch Shift', param: '-3 semitones', color: '#3b82f6' },
+    { name: 'Reverb', param: 'Room 0.7', color: '#8b5cf6' },
+    { name: 'Compressor', param: '-15 dB', color: '#ec4899' },
+    { name: 'Low-Pass', param: '6000 Hz', color: '#14b8a6' },
+  ];
+
+  // Waveform bars — original shape
+  const rawBars = [0.3, 0.6, 0.8, 0.5, 0.9, 0.4, 0.7, 0.3, 0.6, 0.5, 0.8, 0.4, 0.7, 0.9, 0.3];
+
+  useEffect(() => {
+    const interval = setInterval(() => {
+      setActiveEffect((p) => (p + 1) % effects.length);
+    }, 2200);
+    return () => clearInterval(interval);
+  }, [effects.length]);
+
+  return (
+    <div className="h-40 w-full flex flex-col items-center justify-center overflow-hidden rounded-md bg-app-darkerBox/50 p-4 gap-3">
+      {/* Effects chain */}
+      <div className="flex items-center gap-1">
+        {effects.map((fx, i) => (
+          <div key={fx.name} className="flex items-center gap-1">
+            <motion.div
+              className="text-[8px] px-2 py-0.5 rounded-full border font-medium"
+              animate={{
+                borderColor: i <= activeEffect ? `${fx.color}60` : 'rgba(255,255,255,0.06)',
+                backgroundColor: i <= activeEffect ? `${fx.color}15` : 'rgba(255,255,255,0.02)',
+                color: i <= activeEffect ? fx.color : 'rgba(255,255,255,0.3)',
+              }}
+              transition={{ duration: 0.3 }}
+            >
+              {fx.name}
+            </motion.div>
+            {i < effects.length - 1 && (
+              <motion.span
+                className="text-[8px]"
+                animate={{
+                  color: i < activeEffect ? 'rgba(255,255,255,0.3)' : 'rgba(255,255,255,0.08)',
+                }}
+                transition={{ duration: 0.3 }}
+              >
+                &rarr;
+              </motion.span>
+            )}
+          </div>
+        ))}
+      </div>
+
+      {/* Waveform that morphs as effects are applied */}
+      <div className="flex items-center gap-[2px] h-10 w-full max-w-[200px] justify-center">
+        {rawBars.map((h, i) => {
+          // Each effect stage progressively transforms the shape
+          const shifted = activeEffect >= 0 ? h * (0.7 + 0.3 * Math.sin(i * 0.8)) : h;
+          const dampened = activeEffect >= 1 ? shifted * (0.6 + 0.4 * Math.cos(i * 0.3)) : shifted;
+          const compressed = activeEffect >= 2 ? 0.3 + dampened * 0.5 : dampened;
+          const filtered = activeEffect >= 3 ? compressed * (1 - i * 0.03) : compressed;
+          const finalH = Math.max(0.08, Math.min(1, filtered));
+
+          return (
+            <motion.div
+              key={`bar-${i}`}
+              className="w-[3px] rounded-full"
+              animate={{
+                height: `${finalH * 100}%`,
+                backgroundColor: effects[activeEffect].color,
+              }}
+              transition={{
+                height: { duration: 0.5, delay: i * 0.02, ease: 'easeInOut' },
+                backgroundColor: { duration: 0.4 },
+              }}
+            />
+          );
+        })}
+      </div>
+
+      {/* Active effect detail */}
+      <motion.div
+        className="text-[9px] font-mono text-ink-faint"
+        key={activeEffect}
+        initial={{ opacity: 0, y: 4 }}
+        animate={{ opacity: 1, y: 0 }}
+        transition={{ duration: 0.3 }}
+      >
+        {effects[activeEffect].name}: {effects[activeEffect].param}
+      </motion.div>
+    </div>
+  );
+}
+
+// ─── Animation: Local or Remote ─────────────────────────────────────────────
+
+function LocalRemoteAnimation() {
+  const [mode, setMode] = useState(0);
+  const modes = ['Local GPU', 'Remote Server'];
+
+  useEffect(() => {
+    const interval = setInterval(() => {
+      setMode((p) => (p + 1) % 2);
+    }, 2800);
+    return () => clearInterval(interval);
+  }, []);
+
+  return (
+    <div className="h-40 w-full flex items-center justify-center overflow-hidden rounded-md bg-app-darkerBox/50 p-4">
+      <div className="flex flex-col items-center gap-4 w-full max-w-[180px]">
+        {/* Toggle */}
+        <div className="flex gap-1 p-0.5 rounded-full border border-app-line bg-app-darkerBox">
+          {modes.map((m, i) => (
+            <motion.div
+              key={m}
+              className="text-[9px] px-3 py-1 rounded-full font-medium"
+              animate={{
+                backgroundColor: i === mode ? 'hsl(43 50% 45%)' : 'transparent',
+                color: i === mode ? 'hsl(30 10% 94%)' : 'rgba(255,255,255,0.35)',
+              }}
+              transition={{ duration: 0.25 }}
+            >
+              {m}
+            </motion.div>
+          ))}
+        </div>
+
+        {/* Status */}
+        <div className="flex flex-col items-center gap-2">
+          <motion.div
+            className="w-2 h-2 rounded-full"
+            animate={{
+              backgroundColor: mode === 0 ? '#4ade80' : '#3b82f6',
+              boxShadow: mode === 0 ? '0 0 8px #4ade80' : '0 0 8px #3b82f6',
+            }}
+            transition={{ duration: 0.3 }}
+          />
+          <span className="text-[9px] text-ink-faint font-mono">
+            {mode === 0 ? 'Metal acceleration active' : 'Connected to 192.168.1.50'}
+          </span>
+          <span className="text-[8px] text-ink-faint/60 font-mono">
+            {mode === 0 ? 'VRAM: 8.2 / 16.0 GB' : 'Latency: 12ms | CUDA'}
+          </span>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+// ─── Animation: Transcription ───────────────────────────────────────────────
+
+function TranscriptionAnimation() {
+  const [charIndex, setCharIndex] = useState(0);
+  const text = 'The quick brown fox jumps over the lazy dog near the riverbank.';
+
+  useEffect(() => {
+    const interval = setInterval(() => {
+      setCharIndex((p) => {
+        if (p >= text.length) return 0;
+        return p + 1;
+      });
+    }, 80);
+    return () => clearInterval(interval);
+  }, [text.length]);
+
+  return (
+    <div className="h-40 w-full flex flex-col items-center justify-center overflow-hidden rounded-md bg-app-darkerBox/50 p-4 gap-3">
+      {/* Fake waveform */}
+      <div className="flex items-center gap-[1px] h-6 w-full max-w-[180px] justify-center">
+        {Array.from({ length: 30 }, (_, i) => {
+          const h = 0.2 + 0.8 * Math.abs(Math.sin(i * 0.5 + charIndex * 0.1));
+          const active = i < (charIndex / text.length) * 30;
+          return (
+            <div
+              key={i}
+              className={`w-[3px] rounded-full transition-colors duration-100 ${
+                active ? 'bg-accent' : 'bg-app-line'
+              }`}
+              style={{ height: `${h * 100}%` }}
+            />
+          );
+        })}
+      </div>
+
+      {/* Transcribed text */}
+      <div className="text-[10px] text-ink-dull font-mono max-w-[200px] text-center leading-relaxed min-h-[32px]">
+        {text.slice(0, charIndex)}
+        {charIndex < text.length && (
+          <span className="inline-block w-[2px] h-3 bg-accent animate-pulse ml-[1px] align-middle" />
+        )}
+      </div>
+    </div>
+  );
+}
+
+// ─── Animation: Unlimited Length ─────────────────────────────────────────────
+
+function UnlimitedLengthAnimation() {
+  const [phase, setPhase] = useState(0);
+
+  const chunks = [
+    'The morning sun crept over the mountains, casting long shadows across the valley below.',
+    'Birds stirred in the canopy, their songs weaving through the cool air like threads of gold.',
+    'Far below, a river wound its way through ancient stones, carrying whispers of the night.',
+  ];
+
+  useEffect(() => {
+    const interval = setInterval(() => {
+      setPhase((p) => (p + 1) % 4); // 0-2 = processing chunks, 3 = crossfade/done
+    }, 2000);
+    return () => clearInterval(interval);
+  }, []);
+
+  return (
+    <div className="h-40 w-full flex flex-col items-center justify-center overflow-hidden rounded-md bg-app-darkerBox/50 p-4 gap-2.5">
+      {/* Chunk pills */}
+      <div className="flex flex-col gap-1 w-full max-w-[220px]">
+        {chunks.map((chunk, i) => (
+          <motion.div
+            key={`chunk-${i}`}
+            className="flex items-center gap-1.5 px-2 py-1 rounded border text-[8px]"
+            animate={{
+              borderColor:
+                phase === 3
+                  ? 'hsl(43 50% 45% / 0.3)'
+                  : i === phase
+                    ? 'hsl(43 50% 45% / 0.5)'
+                    : i < phase
+                      ? 'rgba(255,255,255,0.12)'
+                      : 'rgba(255,255,255,0.06)',
+              backgroundColor:
+                phase === 3
+                  ? 'hsl(43 50% 45% / 0.04)'
+                  : i === phase
+                    ? 'hsl(43 50% 45% / 0.08)'
+                    : i < phase
+                      ? 'rgba(255,255,255,0.04)'
+                      : 'rgba(255,255,255,0.02)',
+            }}
+            transition={{ duration: 0.4 }}
+          >
+            {/* Status indicator */}
+            <motion.div
+              className="w-1.5 h-1.5 rounded-full shrink-0"
+              animate={{
+                backgroundColor:
+                  phase === 3
+                    ? 'hsl(43 50% 50%)'
+                    : i === phase
+                      ? 'hsl(43 50% 50%)'
+                      : i < phase
+                        ? 'rgba(255,255,255,0.3)'
+                        : 'rgba(255,255,255,0.1)',
+                boxShadow:
+                  i === phase && phase < 3 ? '0 0 6px hsl(43 50% 50%)' : '0 0 0px transparent',
+              }}
+              transition={{ duration: 0.3 }}
+            />
+            <span
+              className={`truncate font-mono ${
+                phase === 3 || i <= phase ? 'text-ink-dull' : 'text-ink-faint/50'
+              }`}
+            >
+              {chunk}
+            </span>
+          </motion.div>
+        ))}
+      </div>
+
+      {/* Crossfade / result bar */}
+      <div className="flex items-center gap-1 w-full max-w-[220px]">
+        {chunks.map((_, i) => (
+          <motion.div
+            key={`seg-${i}`}
+            className="h-1.5 flex-1 rounded-full"
+            animate={{
+              backgroundColor:
+                phase === 3
+                  ? 'hsl(43 50% 45%)'
+                  : i < phase
+                    ? 'rgba(255,255,255,0.2)'
+                    : i === phase
+                      ? 'hsl(43 50% 45% / 0.5)'
+                      : 'rgba(255,255,255,0.06)',
+            }}
+            transition={{ duration: 0.4 }}
+          />
+        ))}
+      </div>
+
+      {/* Status text */}
+      <motion.div
+        className="text-[9px] font-mono"
+        key={phase}
+        initial={{ opacity: 0 }}
+        animate={{ opacity: 1 }}
+        transition={{ duration: 0.3 }}
+      >
+        <span className={phase === 3 ? 'text-accent' : 'text-ink-faint'}>
+          {phase < 3
+            ? `generating chunk ${phase + 1} of ${chunks.length}...`
+            : 'crossfaded & ready'}
+        </span>
+      </motion.div>
+    </div>
+  );
+}
+
+// ─── Feature data ───────────────────────────────────────────────────────────
+
+const FEATURES = [
+  {
+    title: 'Near-Perfect Voice Cloning',
+    description:
+      'Multiple TTS engines for exceptional voice quality. Clone any voice from a few seconds of audio with natural intonation and emotion.',
+    icon: Mic,
+    animation: VoiceCloningAnimation,
+  },
+  {
+    title: 'Stories Editor',
+    description:
+      'Create multi-voice narratives with a timeline-based editor. Arrange tracks, trim clips, and mix conversations between characters.',
+    icon: AudioLines,
+    animation: StoriesAnimation,
+  },
+  {
+    title: 'Audio Effects Pipeline',
+    description:
+      'Apply pitch shift, reverb, delay, compression, and more — then save as presets. Preview effects live and set defaults per voice profile.',
+    icon: Sparkles,
+    animation: EffectsAnimation,
+  },
+  {
+    title: 'Local or Remote',
+    description:
+      'Run GPU inference locally with Metal, CUDA, ROCm, Intel Arc, or DirectML — or connect to a remote machine. One-click server setup with automatic discovery.',
+    icon: Cloud,
+    animation: LocalRemoteAnimation,
+  },
+  {
+    title: 'Audio Transcription',
+    description:
+      'Powered by Whisper for accurate speech-to-text. Automatically extract reference text from voice samples.',
+    icon: MessageSquareText,
+    animation: TranscriptionAnimation,
+  },
+  {
+    title: 'Unlimited Generation Length',
+    description:
+      'Generate up to 50,000 characters in one go. Text is auto-split at sentence boundaries, generated per-chunk, and crossfaded seamlessly.',
+    icon: TextCursorInput,
+    animation: UnlimitedLengthAnimation,
+  },
+];
+
+// ─── Feature Card ───────────────────────────────────────────────────────────
+
+function FeatureCard({ feature }: { feature: (typeof FEATURES)[number] }) {
+  const Icon = feature.icon;
+  const Animation = feature.animation;
+
+  return (
+    <div className="rounded-lg border border-app-line bg-app-darkBox overflow-hidden">
+      <LazyLoad>
+        <div className="pointer-events-none select-none">
+          <Animation />
+        </div>
+      </LazyLoad>
+      <div className="p-5">
+        <div className="flex items-center gap-2 mb-2">
+          <Icon className="h-4 w-4 text-accent" />
+          <h3 className="text-[15px] font-medium text-foreground">{feature.title}</h3>
+        </div>
+        <p className="text-sm leading-relaxed text-muted-foreground">{feature.description}</p>
+      </div>
+    </div>
+  );
+}
+
+// ─── Features Section ───────────────────────────────────────────────────────
+
+export function Features() {
+  return (
+    <section id="features" className="border-t border-border py-24">
+      <div className="mx-auto max-w-7xl px-6">
+        <div className="mb-16 text-center">
+          <h2 className="text-3xl font-semibold tracking-tight text-foreground md:text-4xl mb-4">
+            Professional voice tools, zero compromise
+          </h2>
+          <p className="text-muted-foreground max-w-2xl mx-auto">
+            Everything you need to clone voices, generate speech, and produce multi-voice content —
+            running entirely on your machine.
+          </p>
+        </div>
+        <div className="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
+          {FEATURES.map((feature) => (
+            <FeatureCard key={feature.title} feature={feature} />
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+}

landing/src/components/Footer.tsx

@@ -1,22 +1,33 @@
+import Image from 'next/image';
 import Link from 'next/link';
-import { Separator } from '@/components/ui/separator';
 import { GITHUB_REPO } from '@/lib/constants';
 
 export function Footer() {
   return (
-    <footer className="border-t border-border pt-8 sm:pt-12 pb-6 sm:pb-8 mt-12 sm:mt-16 md:mt-20">
-      <div className="container mx-auto px-4">
-        <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-6 sm:gap-8 mb-6 sm:mb-8">
-          <div>
-            <h3 className="font-bold text-lg mb-4">voicebox</h3>
-            <p className="text-muted-foreground text-sm">
-              Professional voice cloning powered by Qwen3-TTS. Desktop app for Mac, Windows, and
-              Linux.
+    <footer className="border-t border-border py-12">
+      <div className="mx-auto max-w-7xl px-6">
+        <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-4 gap-8 mb-10">
+          {/* Brand */}
+          <div className="md:col-span-1">
+            <div className="flex items-center gap-2.5 mb-4">
+              <Image
+                src="/voicebox-logo-app.webp"
+                alt="Voicebox"
+                width={24}
+                height={24}
+                className="h-6 w-6"
+              />
+              <span className="text-sm font-semibold">Voicebox</span>
+            </div>
+            <p className="text-sm text-muted-foreground leading-relaxed">
+              Open source voice cloning studio. Local-first, free forever.
             </p>
           </div>
+
+          {/* Product */}
           <div>
-            <h4 className="font-semibold mb-3">Product</h4>
-            <ul className="space-y-2 text-muted-foreground text-sm">
+            <h4 className="text-sm font-semibold mb-3">Product</h4>
+            <ul className="space-y-2 text-sm text-muted-foreground">
               <li>
                 <a href="#features" className="hover:text-foreground transition-colors">
                   Features
@@ -28,20 +39,17 @@ export function Footer() {
                 </a>
               </li>
               <li>
-                <Link
-                  href={GITHUB_REPO}
-                  target="_blank"
-                  rel="noopener noreferrer"
-                  className="hover:text-foreground transition-colors"
-                >
-                  GitHub
-                </Link>
+                <a href="#about" className="hover:text-foreground transition-colors">
+                  About
+                </a>
               </li>
             </ul>
           </div>
+
+          {/* Resources */}
           <div>
-            <h4 className="font-semibold mb-3">Resources</h4>
-            <ul className="space-y-2 text-muted-foreground text-sm">
+            <h4 className="text-sm font-semibold mb-3">Resources</h4>
+            <ul className="space-y-2 text-sm text-muted-foreground">
               <li>
                 <Link
                   href={GITHUB_REPO}
@@ -74,10 +82,39 @@ export function Footer() {
               </li>
             </ul>
           </div>
+
+          {/* Also by */}
+          <div>
+            <h4 className="text-sm font-semibold mb-3">Also By</h4>
+            <ul className="space-y-2 text-sm text-muted-foreground">
+              <li>
+                <a
+                  href="https://spacebot.sh"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="hover:text-foreground transition-colors"
+                >
+                  Spacebot
+                </a>
+              </li>
+              <li>
+                <a
+                  href="https://spacedrive.com"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="hover:text-foreground transition-colors"
+                >
+                  Spacedrive
+                </a>
+              </li>
+            </ul>
+          </div>
         </div>
-        <Separator className="my-8" />
-        <div className="text-center text-muted-foreground text-sm space-y-2">
-          <p>© 2026 voicebox. All rights reserved.</p>
+
+        <div className="border-t border-border pt-6">
+          <p className="text-center text-sm text-muted-foreground">
+            &copy; {new Date().getFullYear()} Voicebox. Open source under MIT license.
+          </p>
         </div>
       </div>
     </footer>

landing/src/components/LandingAudioPlayer.tsx

@@ -0,0 +1,296 @@
+'use client';
+
+import { Pause, Play, Repeat, Volume2, VolumeX } from 'lucide-react';
+import { useCallback, useEffect, useRef, useState } from 'react';
+import WaveSurfer from 'wavesurfer.js';
+
+function formatDuration(seconds: number): string {
+  const m = Math.floor(seconds / 60);
+  const s = Math.floor(seconds % 60);
+  return `${m}:${s.toString().padStart(2, '0')}`;
+}
+
+// Shared ref so the unmute button can unlock WaveSurfer's audio on iOS Safari
+// Must call .play() on WaveSurfer's actual media element during a user gesture
+let sharedWaveSurfer: WaveSurfer | null = null;
+let audioUnlocked = false;
+
+export function unlockAudioContext() {
+  if (audioUnlocked) return;
+  audioUnlocked = true;
+
+  // Unlock WaveSurfer's internal audio element
+  if (sharedWaveSurfer) {
+    const media = sharedWaveSurfer.getMediaElement();
+    if (media) {
+      media.muted = true;
+      media
+        .play()
+        .then(() => {
+          media.pause();
+          media.muted = false;
+          media.currentTime = 0;
+        })
+        .catch(() => {});
+    }
+  }
+
+  // Also unlock a standalone AudioContext as fallback
+  try {
+    const ctx = new (
+      window.AudioContext ||
+      (window as unknown as { webkitAudioContext: typeof AudioContext }).webkitAudioContext
+    )();
+    const buffer = ctx.createBuffer(1, 1, 22050);
+    const source = ctx.createBufferSource();
+    source.buffer = buffer;
+    source.connect(ctx.destination);
+    source.start(0);
+  } catch {
+    // Silently fail
+  }
+}
+
+interface LandingAudioPlayerProps {
+  audioUrl: string;
+  title: string;
+  playing: boolean;
+  muted: boolean;
+  onFinish: () => void;
+  onClose: () => void;
+}
+
+export function LandingAudioPlayer({
+  audioUrl,
+  title,
+  playing,
+  muted,
+  onFinish,
+  onClose,
+}: LandingAudioPlayerProps) {
+  const waveformRef = useRef<HTMLDivElement>(null);
+  const wavesurferRef = useRef<WaveSurfer | null>(null);
+  const [isPlaying, setIsPlaying] = useState(false);
+  const [currentTime, setCurrentTime] = useState(0);
+  const [duration, setDuration] = useState(0);
+  const [volume, setVolume] = useState(0.75);
+  const [isLooping, setIsLooping] = useState(false);
+  const [isReady, setIsReady] = useState(false);
+  const onFinishRef = useRef(onFinish);
+  onFinishRef.current = onFinish;
+  const playingRef = useRef(playing);
+  playingRef.current = playing;
+  const mutedRef = useRef(muted);
+  mutedRef.current = muted;
+
+  // Initialize WaveSurfer
+  useEffect(() => {
+    const initWaveSurfer = () => {
+      const container = waveformRef.current;
+      if (!container) {
+        setTimeout(initWaveSurfer, 50);
+        return;
+      }
+
+      const rect = container.getBoundingClientRect();
+      if (rect.width === 0 || rect.height === 0) {
+        setTimeout(initWaveSurfer, 50);
+        return;
+      }
+
+      // Clean up existing instance
+      if (wavesurferRef.current) {
+        wavesurferRef.current.destroy();
+        wavesurferRef.current = null;
+      }
+
+      const root = document.documentElement;
+      const getCSSVar = (varName: string) => {
+        const value = getComputedStyle(root).getPropertyValue(varName).trim();
+        return value ? `hsl(${value})` : '';
+      };
+
+      const ws = WaveSurfer.create({
+        container,
+        waveColor: getCSSVar('--muted'),
+        progressColor: getCSSVar('--accent'),
+        cursorColor: getCSSVar('--accent'),
+        barWidth: 2,
+        barRadius: 2,
+        height: 80,
+        normalize: true,
+        interact: true,
+        mediaControls: false,
+      });
+
+      ws.on('ready', () => {
+        setDuration(ws.getDuration());
+        ws.setVolume(mutedRef.current ? 0 : volume);
+        setIsReady(true);
+      });
+
+      ws.on('play', () => {
+        console.log('[Player] play event');
+        setIsPlaying(true);
+      });
+      ws.on('pause', () => {
+        console.log('[Player] pause event');
+        setIsPlaying(false);
+      });
+
+      ws.on('timeupdate', (time: number) => {
+        setCurrentTime(Math.min(time, ws.getDuration()));
+      });
+
+      let didFinish = false;
+      ws.on('finish', () => {
+        if (didFinish) return;
+        didFinish = true;
+        console.log(
+          '[Player] finish event, currentTime:',
+          ws.getCurrentTime(),
+          'duration:',
+          ws.getDuration(),
+        );
+        setIsPlaying(false);
+        onFinishRef.current();
+      });
+
+      ws.load(audioUrl);
+      wavesurferRef.current = ws;
+      sharedWaveSurfer = ws;
+    };
+
+    setIsReady(false);
+    setCurrentTime(0);
+    setDuration(0);
+
+    requestAnimationFrame(() => {
+      requestAnimationFrame(() => {
+        setTimeout(initWaveSurfer, 10);
+      });
+    });
+
+    return () => {
+      if (wavesurferRef.current) {
+        wavesurferRef.current.destroy();
+        wavesurferRef.current = null;
+      }
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [audioUrl]);
+
+  // Respond to external play/stop signals
+  useEffect(() => {
+    const ws = wavesurferRef.current;
+    console.log('[Player] effect', { playing, isReady, hasWs: !!ws });
+    if (!ws || !isReady) return;
+
+    if (playing) {
+      // Resume the AudioContext first (required for iOS Safari after unlock)
+      const backend = ws.getMediaElement();
+      if (backend && 'context' in backend) {
+        const ctx = (backend as unknown as { context: AudioContext }).context;
+        if (ctx?.state === 'suspended') ctx.resume();
+      }
+      ws.play()
+        .then(() => {
+          console.log('[Player] play succeeded');
+        })
+        .catch((e: Error) => {
+          if (e.name === 'NotAllowedError') {
+            console.warn('[Player] Autoplay blocked by browser — waiting for user gesture');
+          } else {
+            console.error('[Player] play failed', e);
+          }
+        });
+    } else {
+      ws.pause();
+    }
+  }, [playing, isReady]);
+
+  // Sync volume and muted state
+  useEffect(() => {
+    if (wavesurferRef.current) {
+      wavesurferRef.current.setVolume(muted ? 0 : volume);
+    }
+  }, [volume, muted]);
+
+  const handlePlayPause = useCallback(() => {
+    if (!wavesurferRef.current) return;
+    wavesurferRef.current.playPause();
+  }, []);
+
+  return (
+    <div className="absolute bottom-0 left-0 right-0 border-t border-border bg-background/95 backdrop-blur supports-backdrop-filter:bg-background/60 z-30">
+      <div className="px-4 py-3 flex flex-col md:flex-row md:items-center gap-2 md:gap-4">
+        {/* Waveform — full width row on mobile, inline on desktop */}
+        <div className="min-w-0 min-h-[60px] md:min-h-[80px] md:flex-1 md:order-2">
+          <div ref={waveformRef} className="w-full h-full min-h-[60px] md:min-h-[80px]" />
+        </div>
+
+        {/* Controls row */}
+        <div className="flex items-center gap-3 md:contents">
+          {/* Play/Pause */}
+          <button
+            onClick={handlePlayPause}
+            disabled={!isReady}
+            className="h-10 w-10 rounded-full bg-accent flex items-center justify-center shrink-0 disabled:opacity-50 md:order-1 shadow-lg"
+          >
+            {isPlaying ? (
+              <Pause className="h-5 w-5 text-accent-foreground fill-accent-foreground" />
+            ) : (
+              <Play className="h-5 w-5 ml-0.5 text-accent-foreground fill-accent-foreground" />
+            )}
+          </button>
+
+          {/* Time */}
+          <div className="flex items-center gap-1 text-sm text-muted-foreground shrink-0 md:order-3">
+            <span className="font-mono text-xs">{formatDuration(currentTime)}</span>
+            <span className="text-xs">/</span>
+            <span className="font-mono text-xs">{formatDuration(duration)}</span>
+          </div>
+
+          {/* Title */}
+          {title && (
+            <div className="text-sm font-medium truncate max-w-[200px] shrink-0 hidden lg:block md:order-4">
+              {title}
+            </div>
+          )}
+
+          {/* Loop */}
+          <button
+            onClick={() => setIsLooping(!isLooping)}
+            className={`h-8 w-8 flex items-center justify-center rounded-sm shrink-0 hover:bg-muted md:order-5 ${
+              isLooping ? 'text-foreground' : 'text-muted-foreground'
+            }`}
+          >
+            <Repeat className="h-4 w-4" />
+          </button>
+
+          {/* Volume */}
+          <div className="flex items-center gap-2 shrink-0 w-[140px] md:order-6 mr-3">
+            <button
+              onClick={() => setVolume(volume > 0 ? 0 : 0.75)}
+              className="h-8 w-8 flex items-center justify-center hover:bg-muted rounded-sm"
+            >
+              {volume > 0 ? (
+                <Volume2 className="h-4 w-4 text-muted-foreground" />
+              ) : (
+                <VolumeX className="h-4 w-4 text-muted-foreground" />
+              )}
+            </button>
+            <input
+              type="range"
+              min={0}
+              max={100}
+              value={volume * 100}
+              onChange={(e) => setVolume(Number(e.target.value) / 100)}
+              className="flex-1 h-1 appearance-none bg-muted rounded-full accent-foreground cursor-pointer [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:h-3 [&::-webkit-slider-thumb]:w-3 [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:bg-foreground"
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

landing/src/components/Navbar.tsx

@@ -0,0 +1,88 @@
+'use client';
+
+import { Github } from 'lucide-react';
+import Image from 'next/image';
+import { useEffect, useState } from 'react';
+import { GITHUB_REPO } from '@/lib/constants';
+
+function formatStarCount(count: number): string {
+  if (count >= 1000) {
+    const k = count / 1000;
+    return k % 1 === 0 ? `${k}k` : `${k.toFixed(1)}k`;
+  }
+  return count.toString();
+}
+
+export function Navbar() {
+  const [starCount, setStarCount] = useState<number | null>(null);
+
+  useEffect(() => {
+    fetch('/api/stars')
+      .then((res) => {
+        if (!res.ok) throw new Error('Failed to fetch stars');
+        return res.json();
+      })
+      .then((data) => {
+        if (typeof data.count === 'number') setStarCount(data.count);
+      })
+      .catch((error) => {
+        console.error('Failed to fetch star count:', error);
+      });
+  }, []);
+
+  return (
+    <nav className="fixed inset-x-0 top-0 z-50 border-b border-border/50 bg-background/80 backdrop-blur-xl">
+      <div className="mx-auto flex max-w-7xl items-center justify-between px-6 py-3">
+        {/* Logo + wordmark */}
+        <a href="/" className="flex items-center gap-2.5">
+          <Image
+            src="/voicebox-logo-app.webp"
+            alt="Voicebox"
+            width={28}
+            height={28}
+            className="h-7 w-7"
+          />
+          <span className="text-[15px] font-semibold text-foreground">Voicebox</span>
+        </a>
+
+        {/* Nav links */}
+        <div className="hidden sm:flex items-center gap-1">
+          <a
+            href="#features"
+            className="rounded-md px-3 py-1.5 text-sm font-medium text-muted-foreground transition-colors hover:text-foreground"
+          >
+            Features
+          </a>
+          <a
+            href="#about"
+            className="rounded-md px-3 py-1.5 text-sm font-medium text-muted-foreground transition-colors hover:text-foreground"
+          >
+            About
+          </a>
+          <a
+            href="#download"
+            className="rounded-md px-3 py-1.5 text-sm font-medium text-muted-foreground transition-colors hover:text-foreground"
+          >
+            Download
+          </a>
+        </div>
+
+        {/* GitHub star button */}
+        <a
+          href={GITHUB_REPO}
+          target="_blank"
+          rel="noopener noreferrer"
+          className="flex items-center gap-2 rounded-lg border border-border/60 bg-card/60 px-3 py-1.5 text-sm text-muted-foreground transition-colors hover:text-foreground hover:border-border"
+        >
+          <Github className="h-4 w-4" />
+          <span className="text-[13px] font-medium">Star</span>
+          {starCount !== null && (
+            <span className="border-l border-border/60 pl-2 text-[13px] font-semibold text-foreground">
+              {formatStarCount(starCount)}
+            </span>
+          )}
+        </a>
+      </div>
+    </nav>
+  );
+}

landing/src/components/VoiceCreator.tsx

@@ -0,0 +1,479 @@
+'use client';
+
+import { AnimatePresence, motion } from 'framer-motion';
+import { Mic, Monitor, Upload } from 'lucide-react';
+import { useEffect, useMemo, useState } from 'react';
+
+// ─── Waveform bars generator ────────────────────────────────────────────────
+
+function generateWaveformBars(count: number, seed: number): number[] {
+  const bars: number[] = [];
+  for (let i = 0; i < count; i++) {
+    const x = i / count;
+    // Speech-like envelope: ramp up, sustain, taper
+    const envelope = Math.sin(x * Math.PI) * 0.8 + 0.2;
+    // Layered pseudo-random noise
+    const n1 = Math.sin(seed * 127.1 + i * 43.7) * 0.5 + 0.5;
+    const n2 = Math.sin(seed * 269.5 + i * 17.3) * 0.3 + 0.5;
+    const n3 = Math.sin(seed * 53.9 + i * 97.1) * 0.2 + 0.5;
+    const noise = (n1 + n2 + n3) / 3;
+    bars.push(envelope * noise);
+  }
+  return bars;
+}
+
+// ─── Animated waveform background ───────────────────────────────────────────
+
+function WaveformBackground({ active }: { active: boolean }) {
+  const bars = useMemo(() => generateWaveformBars(60, 42), []);
+
+  return (
+    <div className="absolute inset-0 pointer-events-none flex items-end justify-center overflow-hidden">
+      <div className="flex items-end gap-[2px] w-full h-full px-4 pb-4">
+        {bars.map((h, i) => {
+          const maxH = 120; // max bar height in px
+          const baseH = 4;
+          const activeH = baseH + h * maxH;
+          const idleH = baseH + h * maxH * 0.25;
+          return (
+            <motion.div
+              key={i}
+              className="flex-1 rounded-full bg-accent"
+              animate={{
+                opacity: active ? 0.35 : 0.1,
+                height: active ? [idleH, activeH, idleH * 1.5, activeH * 0.7, idleH] : idleH,
+              }}
+              transition={
+                active
+                  ? {
+                      duration: 1.0 + (i % 5) * 0.12,
+                      repeat: Infinity,
+                      repeatType: 'mirror',
+                      delay: (i % 7) * 0.04,
+                      ease: 'easeInOut',
+                    }
+                  : { duration: 0.6 }
+              }
+            />
+          );
+        })}
+      </div>
+    </div>
+  );
+}
+
+// ─── Tab content panels ─────────────────────────────────────────────────────
+
+function UploadPanel() {
+  const [hasFile, setHasFile] = useState(false);
+
+  useEffect(() => {
+    // Simulate file drop after 2s
+    const t1 = setTimeout(() => setHasFile(true), 2000);
+    const t2 = setTimeout(() => setHasFile(false), 5000);
+    return () => {
+      clearTimeout(t1);
+      clearTimeout(t2);
+    };
+  }, []);
+
+  return (
+    <div
+      className={`relative flex flex-col items-center justify-center gap-3 p-6 border-2 rounded-lg min-h-[180px] transition-colors duration-300 ${
+        hasFile ? 'border-accent bg-accent/5' : 'border-dashed border-muted-foreground/25'
+      }`}
+    >
+      <AnimatePresence mode="wait">
+        {!hasFile ? (
+          <motion.div
+            key="idle"
+            initial={{ opacity: 0 }}
+            animate={{ opacity: 1 }}
+            exit={{ opacity: 0 }}
+            className="flex flex-col items-center gap-3"
+          >
+            <div className="h-10 px-5 rounded-md bg-accent text-accent-foreground flex items-center gap-2 text-sm font-medium">
+              <Upload className="h-4 w-4" />
+              Choose File
+            </div>
+            <p className="text-xs text-muted-foreground text-center">
+              Drag and drop an audio file, or click to browse.
+              <br />
+              Maximum duration: 30 seconds.
+            </p>
+          </motion.div>
+        ) : (
+          <motion.div
+            key="file"
+            initial={{ opacity: 0, scale: 0.95 }}
+            animate={{ opacity: 1, scale: 1 }}
+            exit={{ opacity: 0 }}
+            className="flex flex-col items-center gap-3"
+          >
+            <div className="flex items-center gap-2">
+              <Upload className="h-4 w-4 text-accent" />
+              <span className="text-sm font-medium">sample-voice-clip.wav</span>
+            </div>
+            <div className="flex gap-2">
+              <div className="h-8 px-3 rounded-md border border-border flex items-center gap-1.5 text-xs text-muted-foreground">
+                <span>0:04</span>
+              </div>
+              <div className="h-8 px-3 rounded-md border border-border flex items-center gap-1.5 text-xs text-muted-foreground">
+                <Mic className="h-3 w-3" />
+                Transcribe
+              </div>
+            </div>
+          </motion.div>
+        )}
+      </AnimatePresence>
+    </div>
+  );
+}
+
+function RecordPanel() {
+  const [state, setState] = useState<'idle' | 'recording' | 'done'>('idle');
+  const [elapsed, setElapsed] = useState(0);
+
+  useEffect(() => {
+    const t1 = setTimeout(() => setState('recording'), 1500);
+    const t2 = setTimeout(() => setState('done'), 5500);
+    const t3 = setTimeout(() => {
+      setState('idle');
+      setElapsed(0);
+    }, 8000);
+    return () => {
+      clearTimeout(t1);
+      clearTimeout(t2);
+      clearTimeout(t3);
+    };
+  }, []);
+
+  // Timer
+  useEffect(() => {
+    if (state !== 'recording') return;
+    setElapsed(0);
+    const interval = setInterval(() => setElapsed((e) => e + 1), 1000);
+    return () => clearInterval(interval);
+  }, [state]);
+
+  const formatTime = (s: number) => `${Math.floor(s / 60)}:${(s % 60).toString().padStart(2, '0')}`;
+
+  return (
+    <div
+      className={`relative flex flex-col items-center justify-center gap-3 p-6 border-2 rounded-lg min-h-[180px] overflow-hidden transition-colors duration-300 ${
+        state === 'recording'
+          ? 'border-accent bg-accent/5'
+          : state === 'done'
+            ? 'border-accent bg-accent/5'
+            : 'border-dashed border-muted-foreground/25'
+      }`}
+    >
+      <WaveformBackground active={state === 'recording'} />
+
+      <AnimatePresence mode="wait">
+        {state === 'idle' && (
+          <motion.div
+            key="idle"
+            initial={{ opacity: 0 }}
+            animate={{ opacity: 1 }}
+            exit={{ opacity: 0 }}
+            className="relative z-10 flex flex-col items-center gap-3"
+          >
+            <div className="h-10 px-5 rounded-md bg-accent text-accent-foreground flex items-center gap-2 text-sm font-medium">
+              <Mic className="h-4 w-4" />
+              Start Recording
+            </div>
+            <p className="text-xs text-muted-foreground text-center">
+              Click to record from your microphone.
+              <br />
+              Maximum duration: 30 seconds.
+            </p>
+          </motion.div>
+        )}
+
+        {state === 'recording' && (
+          <motion.div
+            key="recording"
+            initial={{ opacity: 0 }}
+            animate={{ opacity: 1 }}
+            exit={{ opacity: 0 }}
+            className="relative z-10 flex flex-col items-center gap-3"
+          >
+            <div className="flex items-center gap-3">
+              <div className="h-3 w-3 rounded-full bg-accent animate-pulse" />
+              <span className="text-lg font-mono font-semibold">{formatTime(elapsed)}</span>
+            </div>
+            <div className="h-9 px-4 rounded-md bg-accent text-accent-foreground flex items-center gap-2 text-sm font-medium">
+              <div className="h-3 w-3 rounded-sm bg-accent-foreground" />
+              Stop Recording
+            </div>
+            <p className="text-xs text-muted-foreground">{formatTime(30 - elapsed)} remaining</p>
+          </motion.div>
+        )}
+
+        {state === 'done' && (
+          <motion.div
+            key="done"
+            initial={{ opacity: 0, scale: 0.95 }}
+            animate={{ opacity: 1, scale: 1 }}
+            exit={{ opacity: 0 }}
+            className="relative z-10 flex flex-col items-center gap-3"
+          >
+            <div className="flex items-center gap-2">
+              <Mic className="h-4 w-4 text-accent" />
+              <span className="text-sm font-medium">Recording complete</span>
+            </div>
+            <div className="flex gap-2">
+              <div className="h-8 px-3 rounded-md border border-border flex items-center gap-1.5 text-xs text-muted-foreground">
+                <span>0:04</span>
+              </div>
+              <div className="h-8 px-3 rounded-md border border-border flex items-center gap-1.5 text-xs text-muted-foreground">
+                <Mic className="h-3 w-3" />
+                Transcribe
+              </div>
+            </div>
+          </motion.div>
+        )}
+      </AnimatePresence>
+    </div>
+  );
+}
+
+function SystemPanel() {
+  const [state, setState] = useState<'idle' | 'capturing' | 'done'>('idle');
+  const [elapsed, setElapsed] = useState(0);
+
+  useEffect(() => {
+    const t1 = setTimeout(() => setState('capturing'), 1500);
+    const t2 = setTimeout(() => setState('done'), 5500);
+    const t3 = setTimeout(() => {
+      setState('idle');
+      setElapsed(0);
+    }, 8000);
+    return () => {
+      clearTimeout(t1);
+      clearTimeout(t2);
+      clearTimeout(t3);
+    };
+  }, []);
+
+  useEffect(() => {
+    if (state !== 'capturing') return;
+    setElapsed(0);
+    const interval = setInterval(() => setElapsed((e) => e + 1), 1000);
+    return () => clearInterval(interval);
+  }, [state]);
+
+  const formatTime = (s: number) => `${Math.floor(s / 60)}:${(s % 60).toString().padStart(2, '0')}`;
+
+  return (
+    <div
+      className={`relative flex flex-col items-center justify-center gap-3 p-6 border-2 rounded-lg min-h-[180px] overflow-hidden transition-colors duration-300 ${
+        state === 'capturing'
+          ? 'border-accent bg-accent/5'
+          : state === 'done'
+            ? 'border-accent bg-accent/5'
+            : 'border-dashed border-muted-foreground/25'
+      }`}
+    >
+      <WaveformBackground active={state === 'capturing'} />
+
+      <AnimatePresence mode="wait">
+        {state === 'idle' && (
+          <motion.div
+            key="idle"
+            initial={{ opacity: 0 }}
+            animate={{ opacity: 1 }}
+            exit={{ opacity: 0 }}
+            className="relative z-10 flex flex-col items-center gap-3"
+          >
+            <div className="h-10 px-5 rounded-md bg-accent text-accent-foreground flex items-center gap-2 text-sm font-medium">
+              <Monitor className="h-4 w-4" />
+              Start Capture
+            </div>
+            <p className="text-xs text-muted-foreground text-center">
+              Capture audio playing on your system.
+              <br />
+              Maximum duration: 30 seconds.
+            </p>
+          </motion.div>
+        )}
+
+        {state === 'capturing' && (
+          <motion.div
+            key="capturing"
+            initial={{ opacity: 0 }}
+            animate={{ opacity: 1 }}
+            exit={{ opacity: 0 }}
+            className="relative z-10 flex flex-col items-center gap-3"
+          >
+            <div className="flex items-center gap-3">
+              <div className="h-3 w-3 rounded-full bg-accent animate-pulse" />
+              <span className="text-lg font-mono font-semibold">{formatTime(elapsed)}</span>
+            </div>
+            <div className="h-9 px-4 rounded-md bg-accent text-accent-foreground flex items-center gap-2 text-sm font-medium">
+              <div className="h-3 w-3 rounded-sm bg-accent-foreground" />
+              Stop Capture
+            </div>
+            <p className="text-xs text-muted-foreground">{formatTime(30 - elapsed)} remaining</p>
+          </motion.div>
+        )}
+
+        {state === 'done' && (
+          <motion.div
+            key="done"
+            initial={{ opacity: 0, scale: 0.95 }}
+            animate={{ opacity: 1, scale: 1 }}
+            exit={{ opacity: 0 }}
+            className="relative z-10 flex flex-col items-center gap-3"
+          >
+            <div className="flex items-center gap-2">
+              <Monitor className="h-4 w-4 text-accent" />
+              <span className="text-sm font-medium">Capture complete</span>
+            </div>
+            <div className="flex gap-2">
+              <div className="h-8 px-3 rounded-md border border-border flex items-center gap-1.5 text-xs text-muted-foreground">
+                <span>0:04</span>
+              </div>
+              <div className="h-8 px-3 rounded-md border border-border flex items-center gap-1.5 text-xs text-muted-foreground">
+                <Mic className="h-3 w-3" />
+                Transcribe
+              </div>
+            </div>
+          </motion.div>
+        )}
+      </AnimatePresence>
+    </div>
+  );
+}
+
+// ─── Tab selector ───────────────────────────────────────────────────────────
+
+const TABS = [
+  { id: 'upload' as const, label: 'Upload', icon: Upload },
+  { id: 'record' as const, label: 'Microphone', icon: Mic },
+  { id: 'system' as const, label: 'System Audio', icon: Monitor },
+];
+
+type TabId = (typeof TABS)[number]['id'];
+
+// ─── Main section ───────────────────────────────────────────────────────────
+
+export function VoiceCreator() {
+  const [activeTab, setActiveTab] = useState<TabId>('record');
+  const [cycleKey, setCycleKey] = useState(0);
+
+  // Auto-cycle tabs
+  useEffect(() => {
+    const tabOrder: TabId[] = ['record', 'upload', 'system'];
+    let idx = tabOrder.indexOf(activeTab);
+
+    const interval = setInterval(() => {
+      idx = (idx + 1) % tabOrder.length;
+      setActiveTab(tabOrder[idx]);
+      setCycleKey((k) => k + 1);
+    }, 9000);
+
+    return () => clearInterval(interval);
+  }, [activeTab]);
+
+  return (
+    <section className="border-t border-border py-24">
+      <div className="mx-auto max-w-5xl px-6">
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-12 md:gap-16 items-center">
+          {/* Left: Copy */}
+          <div>
+            <h2 className="text-3xl font-semibold tracking-tight text-foreground md:text-4xl mb-4">
+              Clone any voice in seconds
+            </h2>
+            <p className="text-muted-foreground mb-6">
+              Three ways to capture a voice sample. Upload a clip, record from your microphone, or
+              capture audio playing on your system. Voicebox clones the voice from as little as 3
+              seconds of audio.
+            </p>
+            <div className="space-y-3">
+              <div className="flex items-start gap-3">
+                <div className="h-8 w-8 rounded-lg bg-accent/10 flex items-center justify-center shrink-0 mt-0.5">
+                  <Upload className="h-4 w-4 text-accent" />
+                </div>
+                <div>
+                  <div className="text-sm font-medium">Upload a clip</div>
+                  <div className="text-xs text-muted-foreground">
+                    Drag and drop any audio file — WAV, MP3, FLAC, or WebM.
+                  </div>
+                </div>
+              </div>
+              <div className="flex items-start gap-3">
+                <div className="h-8 w-8 rounded-lg bg-accent/10 flex items-center justify-center shrink-0 mt-0.5">
+                  <Mic className="h-4 w-4 text-accent" />
+                </div>
+                <div>
+                  <div className="text-sm font-medium">Record from microphone</div>
+                  <div className="text-xs text-muted-foreground">
+                    Live waveform preview while you record. Up to 30 seconds.
+                  </div>
+                </div>
+              </div>
+              <div className="flex items-start gap-3">
+                <div className="h-8 w-8 rounded-lg bg-accent/10 flex items-center justify-center shrink-0 mt-0.5">
+                  <Monitor className="h-4 w-4 text-accent" />
+                </div>
+                <div>
+                  <div className="text-sm font-medium">System audio capture</div>
+                  <div className="text-xs text-muted-foreground">
+                    Clone a voice from a YouTube video, podcast, or any app playing audio.
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          {/* Right: Animated UI mock */}
+          <div className="rounded-xl border border-app-line bg-app-darkBox overflow-hidden pointer-events-none select-none">
+            <div className="p-5">
+              {/* Tab bar */}
+              <div className="flex rounded-lg border border-border bg-card/50 p-1 mb-4">
+                {TABS.map((tab) => {
+                  const Icon = tab.icon;
+                  const isActive = activeTab === tab.id;
+                  return (
+                    <button
+                      key={tab.id}
+                      onClick={() => {
+                        setActiveTab(tab.id);
+                        setCycleKey((k) => k + 1);
+                      }}
+                      className={`flex-1 flex items-center justify-center gap-1.5 px-3 py-1.5 rounded-md text-xs font-medium transition-colors ${
+                        isActive
+                          ? 'bg-background text-foreground shadow-sm'
+                          : 'text-muted-foreground hover:text-foreground'
+                      }`}
+                    >
+                      <Icon className="h-3.5 w-3.5" />
+                      <span className="hidden sm:inline">{tab.label}</span>
+                    </button>
+                  );
+                })}
+              </div>
+
+              {/* Panel */}
+              <AnimatePresence mode="wait">
+                <motion.div
+                  key={`${activeTab}-${cycleKey}`}
+                  initial={{ opacity: 0, y: 6 }}
+                  animate={{ opacity: 1, y: 0 }}
+                  exit={{ opacity: 0, y: -6 }}
+                  transition={{ duration: 0.2 }}
+                >
+                  {activeTab === 'upload' && <UploadPanel />}
+                  {activeTab === 'record' && <RecordPanel />}
+                  {activeTab === 'system' && <SystemPanel />}
+                </motion.div>
+              </AnimatePresence>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}

landing/src/lib/releases.ts

@@ -9,6 +9,7 @@ export interface DownloadLinks {
 export interface ReleaseInfo {
   version: string;
   downloadLinks: DownloadLinks;
+  totalDownloads: number;
 }
 
 const GITHUB_REPO = 'jamiepine/voicebox';
@@ -19,6 +20,10 @@ let cachedReleaseInfo: ReleaseInfo | null = null;
 let cacheTimestamp: number = 0;
 const CACHE_DURATION = 1000 * 60 * 10; // 10 minutes
 
+// Cache for star count
+let cachedStarCount: number | null = null;
+let starCacheTimestamp: number = 0;
+
 /**
  * Fetches the latest release from GitHub and extracts download links
  */
@@ -68,11 +73,15 @@ export async function getLatestRelease(): Promise<ReleaseInfo> {
       }
     }
 
+    // Fetch total downloads across ALL releases
+    const totalDownloads = await getTotalDownloads();
+
     // Fallback: construct URLs if not found in assets
     const baseUrl = `https://github.com/${GITHUB_REPO}/releases/download/${version}`;
 
     const releaseInfo: ReleaseInfo = {
       version,
+      totalDownloads,
       downloadLinks: {
         macArm: downloadLinks.macArm || `${baseUrl}/voicebox_aarch64.app.tar.gz`,
         macIntel: downloadLinks.macIntel || `${baseUrl}/voicebox_x64.app.tar.gz`,
@@ -92,3 +101,88 @@ export async function getLatestRelease(): Promise<ReleaseInfo> {
     throw error;
   }
 }
+
+// Cache for total download count
+let cachedTotalDownloads: number | null = null;
+let downloadsCacheTimestamp: number = 0;
+
+/**
+ * Fetches download counts across ALL releases (paginated)
+ */
+async function getTotalDownloads(): Promise<number> {
+  const now = Date.now();
+  if (cachedTotalDownloads !== null && now - downloadsCacheTimestamp < CACHE_DURATION) {
+    return cachedTotalDownloads;
+  }
+
+  let total = 0;
+  let page = 1;
+
+  try {
+    while (true) {
+      const response = await fetch(
+        `${GITHUB_API_BASE}/repos/${GITHUB_REPO}/releases?per_page=100&page=${page}`,
+        {
+          headers: { Accept: 'application/vnd.github.v3+json' },
+        },
+      );
+
+      if (!response.ok) break;
+
+      const releases = await response.json();
+      if (!Array.isArray(releases) || releases.length === 0) break;
+
+      for (const release of releases) {
+        for (const asset of release.assets || []) {
+          total += asset.download_count || 0;
+        }
+      }
+
+      if (releases.length < 100) break;
+      page++;
+    }
+
+    cachedTotalDownloads = total;
+    downloadsCacheTimestamp = now;
+  } catch (error) {
+    console.error('Failed to fetch total downloads:', error);
+    if (cachedTotalDownloads !== null) return cachedTotalDownloads;
+  }
+
+  return total;
+}
+
+/**
+ * Fetches the star count for the repo from GitHub
+ */
+export async function getStarCount(): Promise<number> {
+  const now = Date.now();
+  if (cachedStarCount !== null && now - starCacheTimestamp < CACHE_DURATION) {
+    return cachedStarCount;
+  }
+
+  try {
+    const response = await fetch(`${GITHUB_API_BASE}/repos/${GITHUB_REPO}`, {
+      next: { revalidate: 600 },
+      headers: {
+        Accept: 'application/vnd.github.v3+json',
+      },
+    });
+
+    if (!response.ok) {
+      throw new Error(`GitHub API error: ${response.status}`);
+    }
+
+    const repo = await response.json();
+    const count = repo.stargazers_count ?? 0;
+
+    cachedStarCount = count;
+    starCacheTimestamp = now;
+
+    return count;
+  } catch (error) {
+    console.error('Failed to fetch star count:', error);
+    if (cachedStarCount !== null) return cachedStarCount;
+    throw error;
+  }
+}

landing/tailwind.config.js

@@ -8,6 +8,9 @@ module.exports = {
   ],
   theme: {
     extend: {
+      fontFamily: {
+        sans: ['var(--font-sans)', 'system-ui', 'sans-serif'],
+      },
       colors: {
         border: 'hsl(var(--border))',
         input: 'hsl(var(--input))',
@@ -33,6 +36,9 @@ module.exports = {
         accent: {
           DEFAULT: 'hsl(var(--accent))',
           foreground: 'hsl(var(--accent-foreground))',
+          faint: 'hsl(var(--accent-faint))',
+          deep: 'hsl(var(--accent-deep))',
+          glow: 'hsl(var(--accent-glow))',
         },
         popover: {
           DEFAULT: 'hsl(var(--popover))',
@@ -42,6 +48,27 @@ module.exports = {
           DEFAULT: 'hsl(var(--card))',
           foreground: 'hsl(var(--card-foreground))',
         },
+        // App surface tokens
+        app: {
+          DEFAULT: 'hsl(var(--app))',
+          box: 'hsl(var(--app-box))',
+          darkBox: 'hsl(var(--app-dark-box))',
+          darkerBox: 'hsl(var(--app-darker-box))',
+          lightBox: 'hsl(var(--app-light-box))',
+          line: 'hsl(var(--app-line))',
+          button: 'hsl(var(--app-button))',
+          hover: 'hsl(var(--app-hover))',
+          selected: 'hsl(var(--app-selected))',
+        },
+        ink: {
+          DEFAULT: 'hsl(var(--ink))',
+          dull: 'hsl(var(--ink-dull))',
+          faint: 'hsl(var(--ink-faint))',
+        },
+        sidebar: {
+          DEFAULT: 'hsl(var(--sidebar))',
+          line: 'hsl(var(--sidebar-line))',
+        },
       },
       borderRadius: {
         lg: 'var(--radius)',