Merge branch 'main' into feat/post-processing-effects

- Story items can be pinned to a specific generation version via
  toolbar dropdown (shows when clip is selected and has >1 version)
- version_id column on story_items with migration, validated against
  the generation's versions before saving
- Split/duplicate preserve the source clip's pinned version
- Export and playback resolve version-specific audio paths
- Extracted _build_item_detail helper in stories.py (DRY cleanup)
- Story list restyled from rounded cards to flat rows with rounded
  hover/active states, gradient header fade, and dynamic bottom
  padding that accounts for track editor + generate box

.bumpversion.cfg

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

.dockerignore

@@ -1,55 +1,46 @@
-# Dependencies
+# Version control
+.git
+.github
+.gitignore
+
+# Desktop-only (not needed in web container)
+tauri/
+landing/
+docs/
+mlx-test/
+scripts/
+
+# Dependencies & build artifacts (rebuilt in Docker)
 node_modules/
 __pycache__/
 *.pyc
 *.pyo
-*.pyd
-.Python
-env/
-venv/
-
-# Build outputs
-build/
 *.egg-info/
-.eggs/
-target/
+dist/
+build/
+*.spec
 
-# Keep web/dist for the Docker image
-!web/dist
+# Data (will be bind-mounted)
+data/
+backend/data/
 
-# Development
-.git/
-.github/
+# IDE & OS
 .vscode/
 .idea/
 *.swp
 *.swo
-*~
-
-# Data and logs
-data/
-*.log
-*.sqlite
-*.db
-
-# OS
 .DS_Store
 Thumbs.db
 
-# Documentation
-docs/
-landing/
-mlx-test/
-
-# Test files
-*.test.ts
-*.test.tsx
-*.spec.ts
-*.spec.tsx
-
-# Keep these out
-.env
-.env.local
-*.pem
-*.key
-credentials.json
+# Config files not needed in container
+biome.json
+.biomeignore
+.bumpversion.cfg
+.npmrc
+Makefile
+CHANGELOG.md
+CONTRIBUTING.md
+SECURITY.md
+LICENSE
+README.md
+backend/README.md

.github/workflows/build-windows.yml

@@ -0,0 +1,63 @@
+name: Build Windows
+
+on:
+  workflow_dispatch:
+
+jobs:
+  build-windows:
+    permissions:
+      contents: write
+    runs-on: windows-latest
+
+    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: Build Python server
+        shell: bash
+        run: |
+          cd backend
+          python build_binary.py
+
+          PLATFORM=$(rustc --print host-tuple)
+          mkdir -p ../tauri/src-tauri/binaries
+          cp dist/voicebox-server.exe ../tauri/src-tauri/binaries/voicebox-server-${PLATFORM}.exe
+          echo "Built voicebox-server-${PLATFORM}.exe"
+
+      - name: Setup Bun
+        uses: oven-sh/setup-bun@v2
+
+      - name: Install Rust stable
+        uses: dtolnay/rust-toolchain@stable
+
+      - name: Rust cache
+        uses: swatinem/rust-cache@v2
+        with:
+          workspaces: "./tauri/src-tauri -> target"
+
+      - name: Install dependencies
+        run: bun install
+
+      - uses: tauri-apps/tauri-action@v0
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+        with:
+          projectPath: tauri
+          tagName: v__VERSION__
+          releaseName: "voicebox v__VERSION__ (test build)"
+          releaseBody: "Test build for audio export fix"
+          releaseDraft: true
+          prerelease: true
+          args: ""
+          includeUpdaterJson: false

.github/workflows/release.yml

@@ -6,151 +6,7 @@ on:
     tags:
       - "v*"
 
-env:
-  PROVIDER_VERSION: "1.0.0"
-
 jobs:
-  # ============================================
-  # Build TTS Providers (uploaded to R2, not GitHub)
-  # ============================================
-  build-providers:
-    runs-on: ${{ matrix.platform }}
-    strategy:
-      fail-fast: false
-      matrix:
-        include:
-          # PyTorch CPU provider (Windows)
-          - platform: "windows-latest"
-            provider: "pytorch-cpu"
-            python-version: "3.12"
-          # PyTorch CUDA provider (Windows) - large binary, uploaded to R2
-          - platform: "windows-latest"
-            provider: "pytorch-cuda"
-            python-version: "3.12"
-          # PyTorch CPU provider (Linux)
-          - platform: "ubuntu-22.04"
-            provider: "pytorch-cpu"
-            python-version: "3.12"
-          # PyTorch CUDA provider (Linux) - large binary, uploaded to R2
-          - platform: "ubuntu-22.04"
-            provider: "pytorch-cuda"
-            python-version: "3.12"
-          # PyTorch CPU provider (macOS Apple Silicon)
-          - platform: "macos-latest"
-            provider: "pytorch-cpu"
-            python-version: "3.12"
-          # PyTorch CPU provider (macOS Intel)
-          - platform: "macos-15-intel"
-            provider: "pytorch-cpu"
-            python-version: "3.12"
-
-    steps:
-      - uses: actions/checkout@v4
-
-      - name: Install dependencies (ubuntu only)
-        if: matrix.platform == 'ubuntu-22.04'
-        run: |
-          sudo apt-get update
-          sudo apt-get install -y llvm-dev
-
-      - name: Setup Python
-        uses: actions/setup-python@v5
-        with:
-          python-version: ${{ matrix.python-version }}
-          cache: "pip"
-
-      - name: Install CPU-only torch (Linux)
-        if: matrix.provider == 'pytorch-cpu' && matrix.platform == 'ubuntu-22.04'
-        run: |
-          python -m pip install --upgrade pip
-          pip install pyinstaller
-          pip install torch torchvision torchaudio --index-url https://download.pytorch.org/whl/cpu
-          pip install -r providers/pytorch-cpu/requirements.txt
-          pip install -r backend/requirements.txt
-
-      - name: Install Python dependencies (CPU - non-Linux)
-        if: matrix.provider == 'pytorch-cpu' && matrix.platform != 'ubuntu-22.04'
-        run: |
-          python -m pip install --upgrade pip
-          pip install pyinstaller
-          pip install -r providers/pytorch-cpu/requirements.txt
-          pip install -r backend/requirements.txt
-
-      - name: Install Python dependencies (CUDA)
-        if: matrix.provider == 'pytorch-cuda'
-        run: |
-          python -m pip install --upgrade pip
-          pip install pyinstaller
-          pip install torch torchvision torchaudio --index-url https://download.pytorch.org/whl/cu121
-          pip install -r providers/pytorch-cuda/requirements.txt
-          pip install -r backend/requirements.txt
-
-      - name: Build provider binary
-        shell: bash
-        run: |
-          cd providers/${{ matrix.provider }}
-          python build.py
-
-      - name: Package provider for distribution
-        shell: bash
-        run: |
-          cd providers/${{ matrix.provider }}/dist
-
-          # Add platform suffix for archive name
-          if [ "${{ matrix.platform }}" == "windows-latest" ]; then
-            ARCHIVE_NAME="tts-provider-${{ matrix.provider }}-windows.zip"
-            # On Windows, zip the directory
-            powershell Compress-Archive -Path "tts-provider-${{ matrix.provider }}/*" -DestinationPath "$ARCHIVE_NAME"
-          elif [ "${{ matrix.platform }}" == "macos-latest" ]; then
-            ARCHIVE_NAME="tts-provider-${{ matrix.provider }}-macos-arm64.tar.gz"
-            tar -czf "$ARCHIVE_NAME" tts-provider-${{ matrix.provider }}/
-          elif [ "${{ matrix.platform }}" == "macos-15-intel" ]; then
-            ARCHIVE_NAME="tts-provider-${{ matrix.provider }}-macos-x64.tar.gz"
-            tar -czf "$ARCHIVE_NAME" tts-provider-${{ matrix.provider }}/
-          else
-            ARCHIVE_NAME="tts-provider-${{ matrix.provider }}-linux.tar.gz"
-            tar -czf "$ARCHIVE_NAME" tts-provider-${{ matrix.provider }}/
-          fi
-
-          echo "Created archive: $ARCHIVE_NAME"
-          ls -lh "$ARCHIVE_NAME"
-
-      - name: Upload provider to R2
-        shell: bash
-        env:
-          R2_ACCESS_KEY_ID: ${{ secrets.R2_ACCESS_KEY_ID }}
-          R2_SECRET_ACCESS_KEY: ${{ secrets.R2_SECRET_ACCESS_KEY }}
-          R2_ENDPOINT: ${{ secrets.R2_ENDPOINT }}
-        run: |
-          # Install AWS CLI (compatible with R2)
-          pip install awscli
-
-          # Configure AWS CLI for R2
-          aws configure set aws_access_key_id $R2_ACCESS_KEY_ID
-          aws configure set aws_secret_access_key $R2_SECRET_ACCESS_KEY
-          aws configure set region auto
-
-          # Determine archive name based on platform
-          if [ "${{ matrix.platform }}" == "windows-latest" ]; then
-            ARCHIVE_NAME="tts-provider-${{ matrix.provider }}-windows.zip"
-          elif [ "${{ matrix.platform }}" == "macos-latest" ]; then
-            ARCHIVE_NAME="tts-provider-${{ matrix.provider }}-macos-arm64.tar.gz"
-          elif [ "${{ matrix.platform }}" == "macos-15-intel" ]; then
-            ARCHIVE_NAME="tts-provider-${{ matrix.provider }}-macos-x64.tar.gz"
-          else
-            ARCHIVE_NAME="tts-provider-${{ matrix.provider }}-linux.tar.gz"
-          fi
-
-          # Upload to R2 (bucket: voicebox)
-          aws s3 cp "providers/${{ matrix.provider }}/dist/$ARCHIVE_NAME" \
-            "s3://voicebox/providers/v${{ env.PROVIDER_VERSION }}/$ARCHIVE_NAME" \
-            --endpoint-url "$R2_ENDPOINT"
-
-          echo "Uploaded $ARCHIVE_NAME to R2"
-
-  # ============================================
-  # Build Main App (without bundled TTS on Win/Linux)
-  # ============================================
   release:
     permissions:
       contents: write
@@ -158,22 +14,14 @@ jobs:
       fail-fast: false
       matrix:
         include:
-          # macOS Apple Silicon - MLX bundled (works out of the box)
           - platform: "macos-latest"
             args: "--target aarch64-apple-darwin"
             python-version: "3.12"
             backend: "mlx"
-          # macOS Intel - PyTorch bundled (smaller user base, keep simple)
           - platform: "macos-15-intel"
             args: "--target x86_64-apple-darwin"
             python-version: "3.12"
             backend: "pytorch"
-          # Linux - No TTS bundled, providers downloaded separately
-          - platform: "ubuntu-22.04"
-            args: ""
-            python-version: "3.12"
-            backend: "none"
-          # Windows - PyTorch CPU bundled (works out of the box)
           - platform: "windows-latest"
             args: ""
             python-version: "3.12"
@@ -185,7 +33,7 @@ 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 libasound2-dev
@@ -203,22 +51,17 @@ jobs:
           python-version: ${{ matrix.python-version }}
           cache: "pip"
 
-      - name: Install Python dependencies (with TTS)
-        if: matrix.backend != 'none'
+      - 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
           pip install pyinstaller
           pip install -r backend/requirements.txt
 
-      - name: Install Python dependencies (without TTS)
-        if: matrix.backend == 'none'
-        run: |
-          python -m pip install --upgrade pip
-          pip install pyinstaller
-          # Install base requirements without PyTorch/Qwen-TTS
-          pip install fastapi uvicorn sqlalchemy librosa soundfile numpy httpx
-          pip install huggingface_hub  # For Whisper downloads
-
       - name: Install MLX dependencies (Apple Silicon only)
         if: matrix.backend == 'mlx'
         run: |
@@ -300,15 +143,10 @@ jobs:
             See the assets below to download and install this version.
 
             ### Installation
-            - **macOS (Apple Silicon)**: Download the `aarch64.dmg` file - uses MLX for fast native inference (works out of the box)
+            - **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 - requires downloading a TTS provider on first use
-            - **Linux**: Download the `.AppImage` or `.deb` package - requires downloading a TTS provider on first use
-
-            ### TTS Providers
-            Windows and Linux users will be prompted to download a TTS provider on first launch:
-            - **Windows**: PyTorch CPU (~300MB) or PyTorch CUDA (~2.4GB for NVIDIA GPUs)
-            - **Linux**: PyTorch CUDA (~2.4GB) - requires NVIDIA GPU
+            - **Windows**: Download the `.msi` installer
+            - **Linux**: Compile from source (see README)
 
             The app includes automatic updates - future updates will be installed automatically.
           releaseDraft: true
@@ -316,68 +154,62 @@ jobs:
           args: ${{ matrix.args }}
           includeUpdaterJson: true
 
-  # ============================================
-  # Build and Push Docker Images
-  # ============================================
-  docker:
-    runs-on: ubuntu-latest
+  build-cuda-windows:
+    runs-on: windows-latest
     permissions:
-      contents: read
-      packages: write
+      contents: write
+
     steps:
       - uses: actions/checkout@v4
 
-      - name: Set up Docker Buildx
-        uses: docker/setup-buildx-action@v3
-
-      - name: Login to GitHub Container Registry
-        uses: docker/login-action@v3
+      - name: Setup Python
+        uses: actions/setup-python@v5
         with:
-          registry: ghcr.io
-          username: ${{ github.actor }}
-          password: ${{ secrets.GITHUB_TOKEN }}
+          python-version: "3.12"
+          cache: "pip"
 
-      - name: Setup Bun
-        uses: oven-sh/setup-bun@v2
-
-      - name: Install dependencies and build web UI
+      - name: Install Python dependencies
         run: |
-          bun install
-          cd web
-          bun run build
+          python -m pip install --upgrade pip
+          pip install pyinstaller
+          pip install -r backend/requirements.txt
 
-      - name: Extract version from tag
-        id: version
+      - name: Install PyTorch with CUDA 12.1
         run: |
-          if [[ $GITHUB_REF == refs/tags/v* ]]; then
-            VERSION=${GITHUB_REF#refs/tags/v}
-          else
-            VERSION="dev"
-          fi
-          echo "version=$VERSION" >> $GITHUB_OUTPUT
+          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: Build and push CPU image
-        uses: docker/build-push-action@v5
-        with:
-          context: .
-          file: ./Dockerfile
-          platforms: linux/amd64,linux/arm64
-          push: true
-          tags: |
-            ghcr.io/jamiepine/voicebox:latest
-            ghcr.io/jamiepine/voicebox:${{ steps.version.outputs.version }}
-          cache-from: type=gha
-          cache-to: type=gha,mode=max
+      - 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 and push CUDA image
-        uses: docker/build-push-action@v5
+      - 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:
-          context: .
-          file: ./Dockerfile.cuda
-          platforms: linux/amd64
-          push: true
-          tags: |
-            ghcr.io/jamiepine/voicebox:latest-cuda
-            ghcr.io/jamiepine/voicebox:${{ steps.version.outputs.version }}-cuda
-          cache-from: type=gha
-          cache-to: type=gha,mode=max
+          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

@@ -15,7 +15,6 @@ dist/
 build/
 *.egg-info/
 *.egg
-*.spec
 target/
 *.app
 *.dmg
@@ -36,10 +35,7 @@ target/
 Thumbs.db
 
 # Data (user-generated)
-data/profiles/*
-data/generations/*
-data/projects/*
-data/voicebox.db
+data/
 !data/.gitkeep
 
 # Logs

CHANGELOG.md

@@ -5,6 +5,14 @@ All notable changes to Voicebox will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [Unreleased]
+
+### Fixed
+- **Profile Name Validation** - Added proper validation to prevent duplicate profile names ([#134](https://github.com/jamiepine/voicebox/issues/134))
+  - Users now receive clear error messages when attempting to create or update profiles with duplicate names
+  - Improved error handling in create and update profile API endpoints
+  - Added comprehensive test suite for duplicate name validation
+
 ## [0.1.0] - 2026-01-25
 
 ### Added
@@ -55,6 +63,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Fixed
 - Audio export failing when Tauri save dialog returns object instead of string path
+- OpenAPI client generator script now documents the local backend port and avoids an unused loop variable warning
 
 ### Added
 - **Makefile** - Comprehensive development workflow automation with commands for setup, development, building, testing, and code quality checks

CONTRIBUTING.md

@@ -14,72 +14,84 @@ Thank you for your interest in contributing to Voicebox! This document provides
 ### Prerequisites
 
 - **[Bun](https://bun.sh)** - Fast JavaScript runtime and package manager
-
   ```bash
   curl -fsSL https://bun.sh/install | bash
   ```
 
 - **[Python 3.11+](https://python.org)** - For backend development
-
   ```bash
   python --version  # Should be 3.11 or higher
   ```
 
 - **[Rust](https://rustup.rs)** - For Tauri desktop app (installed automatically by Tauri CLI)
-
   ```bash
   rustc --version  # Check if installed
   ```
+- **[Tauri Prerequisites](https://v2.tauri.app/start/prerequisites)** - Tauri-specific system dependencies (varies by OS).
 
 - **Git** - Version control
 
 ### Development Setup
 
-**Using the Makefile (recommended for macOS/Linux):** Run `make setup` to install all dependencies, then `make dev` to start development servers. See `make help` for all available commands.
+**Using `just` (recommended):**
+
+Install [just](https://github.com/casey/just) (`brew install just` or `cargo install just`), then:
+
+```bash
+just setup   # creates venv, installs Python + JS deps
+just dev     # starts backend + desktop app in one terminal
+```
+
+Other useful commands:
+
+```bash
+just dev-web       # backend + web app (no Tauri/Rust build)
+just dev-backend   # backend only
+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.
 
 **Manual setup (required for Windows):**
 
 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
    ```
@@ -89,24 +101,19 @@ Thank you for your interest in contributing to Voicebox! This document provides
    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
@@ -117,133 +124,26 @@ Thank you for your interest in contributing to Voicebox! This document provides
    > 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`
 
 ### Model Downloads
 
 Models are automatically downloaded from HuggingFace Hub on first use:
-
 - **Whisper** (transcription): Auto-downloads on first transcription
 - **Qwen3-TTS** (voice cloning): Auto-downloads on first generation (~2-4GB)
 
 First-time usage will be slower due to model downloads, but subsequent runs will use cached models.
 
-### TTS Provider Development
-
-Voicebox uses a modular provider system to support different inference backends. Understanding this architecture is important when working on TTS features.
-
-#### Provider Types
-
-**Bundled Providers** — Included with the app binary:
-
-- `apple-mlx` — Bundled with macOS Apple Silicon builds (`.dmg` for aarch64)
-  - Uses MLX for native Metal acceleration
-  - Configured in `.github/workflows/release.yml` with `backend: "mlx"`
-
-**Hybrid Provider:**
-
-- `pytorch-cpu` — Can be bundled OR downloaded depending on platform
-  - **Bundled** with Windows and macOS Intel builds
-    - macOS Intel: `.dmg` for x64 with `backend: "pytorch"`
-    - Windows: `.exe` installer with PyTorch CPU included
-  - **Downloaded** on first use for Linux builds (~300MB)
-  - Falls back to bundled version if external binary not found
-
-**External-Only Providers:**
-
-- `pytorch-cuda` — NVIDIA GPU-accelerated provider (~2.4GB)
-  - Windows/Linux only (no NVIDIA GPUs on macOS)
-  - Downloaded on demand, not bundled
-  - Optional for users with CUDA-capable GPUs
-
-#### Provider Architecture
-
-```
-backend/providers/
-├── __init__.py         # ProviderManager - lifecycle management
-├── base.py             # TTSProvider protocol
-├── bundled.py          # BundledProvider - wraps built-in backends
-├── local.py            # LocalProvider - wraps external subprocess
-├── installer.py        # Download and install external providers
-└── types.py            # Provider type definitions
-
-providers/
-├── pytorch-cpu/        # External PyTorch CPU provider
-│   ├── main.py         # FastAPI server
-│   ├── build.py        # PyInstaller build script
-│   └── build_and_install.py  # Build and install locally
-└── pytorch-cuda/       # External PyTorch CUDA provider
-    ├── main.py
-    ├── build.py
-    └── build_and_install.py
-```
-
-**How it works:**
-
-1. **Bundled providers** run in-process within the main backend
-2. **External providers** run as separate subprocess servers
-3. **LocalProvider** communicates with external providers via HTTP
-4. **ProviderManager** handles starting/stopping and health checks
-
-#### Building Providers Locally
-
-When developing provider features, you'll need to build and test external providers:
-
-**Build a single provider:**
-
-```bash
-cd providers/pytorch-cpu
-python build_and_install.py
-```
-
-**Build all providers:**
-
-```bash
-bun run build:providers
-```
-
-This script:
-
-- Builds the provider binary with PyInstaller
-- Detects your platform (Windows/macOS/Linux)
-- Copies to the correct location:
-  - macOS: `~/Library/Application Support/voicebox/providers/`
-  - Windows: `%APPDATA%\voicebox\providers\`
-  - Linux: `~/.local/share/voicebox/providers/`
-- Sets executable permissions on Unix
-
-**Testing provider changes:**
-
-1. Make changes to `providers/pytorch-cpu/main.py`
-2. Run `bun run build:providers`
-3. Restart the Voicebox app
-4. Select the provider in Settings → TTS Provider
-
-#### Provider Binary Distribution
-
-For production releases, provider binaries are:
-
-1. Built by GitHub Actions for all platforms
-2. Uploaded to Cloudflare R2 at `downloads.voicebox.sh/providers/v{VERSION}/`
-3. Downloaded on-demand by users based on their platform and GPU
-
-See `.github/workflows/release.yml` for the build matrix.
-
 ### Building
 
 **Build everything (recommended):**
-
 ```bash
 bun run build
 ```
-
 This automatically:
-
 1. Builds the Python server binary (`./scripts/build-server.sh`)
 2. Builds the Tauri desktop app (`cd tauri && bun run tauri build`)
 
@@ -252,23 +152,13 @@ Creates platform-specific installers (`.dmg`, `.msi`, `.AppImage`) in `tauri/src
 **Note:** The build process detects your platform and includes the appropriate backend (MLX for Apple Silicon, PyTorch for others).
 
 **Build server binary only:**
-
 ```bash
 bun run build:server
 # or
 ./scripts/build-server.sh
 ```
-
 Creates platform-specific binary in `tauri/src-tauri/binaries/`
 
-**Build provider binaries (for development):**
-
-```bash
-bun run build:providers
-```
-
-Builds all external provider binaries and installs them to the system provider directory. See [TTS Provider Development](#tts-provider-development) for details.
-
 **Building with local Qwen3-TTS development version:**
 
 If you're actively developing or modifying the Qwen3-TTS library, set the `QWEN_TTS_PATH` environment variable to point to your local clone:
@@ -281,41 +171,34 @@ bun run 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/`
 
 ### Generate OpenAPI Client
 
 After starting the backend server:
-
 ```bash
 ./scripts/generate-api.sh
 ```
-
 This downloads the OpenAPI schema and generates the TypeScript client in `app/src/lib/api/`
 
 ### Convert Assets to Web Formats
 
 To optimize images and videos for the web, run:
-
 ```bash
 bun run convert:assets
 ```
 
 This script:
-
 - Converts PNG → WebP (better compression, same quality)
 - Converts MOV → WebM (VP9 codec, smaller file size)
 - Processes files in `landing/public/` and `docs/public/`
 - **Deletes original files** after successful conversion
 
 **Requirements:** Install `webp` and `ffmpeg`:
-
 ```bash
 brew install webp ffmpeg
 ```
@@ -362,7 +245,6 @@ git push origin feature/your-feature-name
 ```
 
 Then create a pull request on GitHub with:
-
 - Clear description of changes
 - Screenshots (for UI changes)
 - Reference to related issues
@@ -508,23 +390,21 @@ Currently, testing is primarily manual. When adding tests:
 Releases are managed by maintainers:
 
 1. **Bump version using bumpversion:**
-
    ```bash
    # Install bumpversion (if not already installed)
    pip install bumpversion
-
+   
    # Bump patch version (0.1.0 -> 0.1.1)
    bumpversion patch
-
+   
    # Or bump minor version (0.1.0 -> 0.2.0)
    bumpversion minor
-
+   
    # Or bump major version (0.1.0 -> 1.0.0)
    bumpversion major
    ```
-
+   
    This automatically:
-
    - Updates version numbers in all files (`tauri.conf.json`, `Cargo.toml`, all `package.json` files, `backend/main.py`)
    - Creates a git commit with the version bump
    - Creates a git tag (e.g., `v0.1.1`, `v0.2.0`)
@@ -532,7 +412,6 @@ Releases are managed by maintainers:
 2. **Update CHANGELOG.md** with release notes
 
 3. **Push commits and tags:**
-
    ```bash
    git push
    git push --tags
@@ -548,7 +427,7 @@ See [docs/TROUBLESHOOTING.md](docs/TROUBLESHOOTING.md) for common issues and sol
 
 - **Backend won't start:** Check Python version (3.11+), ensure venv is activated, install dependencies
 - **Tauri build fails:** Ensure Rust is installed, clean build with `cd tauri/src-tauri && cargo clean`
-- **OpenAPI client generation fails:** Ensure backend is running, check `curl http://localhost:8000/openapi.json`
+- **OpenAPI client generation fails:** Ensure backend is running, check `curl http://localhost:17493/openapi.json`
 
 ## Questions?
 

Dockerfile

@@ -1,43 +1,79 @@
-# Base Dockerfile for Voicebox (CPU-only)
-# For GPU support, use Dockerfile.cuda
+# ============================================================
+# Voicebox — Local TTS Server with Web UI (CPU)
+# 3-stage build: Frontend → Python deps → Runtime
+# ============================================================
 
-FROM python:3.12-slim
+# === Stage 1: Build frontend ===
+FROM oven/bun:1 AS frontend
 
-# Prevent interactive prompts during build
-ENV DEBIAN_FRONTEND=noninteractive
-ENV TZ=UTC
+WORKDIR /build
+
+# Copy workspace config and frontend source
+COPY package.json bun.lock ./
+COPY app/ ./app/
+COPY web/ ./web/
+
+# Strip workspaces not needed for web build, and fix trailing comma
+RUN sed -i '/"tauri"/d; /"landing"/d' package.json && \
+    sed -i -z 's/,\n  ]/\n  ]/' package.json
+RUN bun install --no-save
+# Build frontend (skip tsc — upstream has pre-existing type errors)
+RUN cd web && bunx --bun vite build
+
+
+# === Stage 2: Build Python dependencies ===
+FROM python:3.11-slim AS backend-builder
+
+WORKDIR /build
+
+RUN apt-get update && apt-get install -y --no-install-recommends \
+    git \
+    build-essential \
+    && rm -rf /var/lib/apt/lists/*
+
+COPY backend/requirements.txt .
+RUN pip install --no-cache-dir --prefix=/install -r requirements.txt
+RUN pip install --no-cache-dir --prefix=/install \
+    git+https://github.com/QwenLM/Qwen3-TTS.git
+
+
+# === Stage 3: Runtime ===
+FROM python:3.11-slim
+
+# Create non-root user for security
+RUN groupadd -r voicebox && \
+    useradd -r -g voicebox -m -s /bin/bash voicebox
 
 WORKDIR /app
 
-# Install system dependencies
-RUN apt-get update && apt-get install -y \
+# Install only runtime system dependencies
+RUN apt-get update && apt-get install -y --no-install-recommends \
     ffmpeg \
     curl \
-    tzdata \
     && rm -rf /var/lib/apt/lists/*
 
-# Copy backend
-COPY backend/ /app/backend/
-COPY providers/ /app/providers/
+# Copy installed Python packages from builder stage
+COPY --from=backend-builder /install /usr/local
 
-# Copy pre-built web UI
-COPY web/dist/ /app/web/dist/
+# Copy backend application code
+COPY --chown=voicebox:voicebox backend/ /app/backend/
 
-# Install Python dependencies (without PyTorch - will be downloaded via provider system)
-RUN python -m pip install --upgrade pip && \
-    pip install --no-cache-dir \
-    fastapi uvicorn[standard] pydantic sqlalchemy alembic \
-    librosa soundfile numpy python-multipart Pillow \
-    huggingface_hub transformers accelerate
+# Copy built frontend from frontend stage
+COPY --from=frontend --chown=voicebox:voicebox /build/web/dist /app/frontend/
 
-# Create data directory for profiles/generations
-RUN mkdir -p /app/data
+# Create data directories owned by non-root user
+RUN mkdir -p /app/data/generations /app/data/profiles /app/data/cache \
+    && chown -R voicebox:voicebox /app/data
 
-# Health check
-HEALTHCHECK --interval=30s --timeout=10s --retries=3 --start-period=40s \
-  CMD curl -f http://localhost:8000/health || exit 1
+# Switch to non-root user
+USER voicebox
 
-EXPOSE 8000
+# Expose the API port
+EXPOSE 17493
 
-# Run server with web UI
-CMD ["uvicorn", "backend.main:app", "--host", "0.0.0.0", "--port", "8000"]
+# Health check — auto-restart if the server hangs
+HEALTHCHECK --interval=30s --timeout=10s --retries=3 --start-period=60s \
+    CMD curl -f http://localhost:17493/health || exit 1
+
+# Start the FastAPI server
+CMD ["uvicorn", "backend.main:app", "--host", "0.0.0.0", "--port", "17493"]

Dockerfile.cuda

@@ -1,58 +0,0 @@
-# Dockerfile for Voicebox with NVIDIA GPU support (CUDA)
-
-FROM nvidia/cuda:12.1.1-runtime-ubuntu22.04
-
-# Prevent interactive prompts during build
-ENV DEBIAN_FRONTEND=noninteractive
-ENV TZ=UTC
-
-WORKDIR /app
-
-# Install Python 3.12
-RUN apt-get update && apt-get install -y \
-    software-properties-common \
-    && add-apt-repository ppa:deadsnakes/ppa \
-    && apt-get update && apt-get install -y \
-    python3.12 \
-    python3.12-dev \
-    python3.12-venv \
-    ffmpeg \
-    curl \
-    tzdata \
-    && rm -rf /var/lib/apt/lists/*
-
-# Set Python 3.12 as default and bootstrap pip
-RUN update-alternatives --install /usr/bin/python3 python3 /usr/bin/python3.12 1 && \
-    update-alternatives --install /usr/bin/python python /usr/bin/python3.12 1 && \
-    python3.12 -m ensurepip --upgrade && \
-    python3.12 -m pip install --upgrade pip
-
-# Copy backend
-COPY backend/ /app/backend/
-COPY providers/ /app/providers/
-
-# Copy pre-built web UI
-COPY web/dist/ /app/web/dist/
-
-# Install PyTorch with CUDA support first
-RUN pip install --no-cache-dir \
-    torch torchvision torchaudio --index-url https://download.pytorch.org/whl/cu121
-
-# Install remaining dependencies
-RUN pip install --no-cache-dir \
-    fastapi uvicorn[standard] pydantic sqlalchemy alembic \
-    transformers accelerate huggingface_hub \
-    librosa soundfile numpy python-multipart Pillow \
-    qwen-tts
-
-# Create data directory
-RUN mkdir -p /app/data
-
-# Health check
-HEALTHCHECK --interval=30s --timeout=10s --retries=3 --start-period=40s \
-  CMD curl -f http://localhost:8000/health || exit 1
-
-EXPOSE 8000
-
-# Run server with web UI
-CMD ["uvicorn", "backend.main:app", "--host", "0.0.0.0", "--port", "8000"]

Makefile

@@ -48,6 +48,7 @@ setup-python: $(VENV)/bin/activate ## Set up Python virtual environment and depe
 	@echo -e "$(BLUE)Installing Python dependencies...$(NC)"
 	$(PIP) install --upgrade pip
 	$(PIP) install -r $(BACKEND_DIR)/requirements.txt
+	$(PIP) install --no-deps chatterbox-tts
 	@if [ "$$(uname -m)" = "arm64" ] && [ "$$(uname)" = "Darwin" ]; then \
 		echo -e "$(BLUE)Detected Apple Silicon - installing MLX dependencies...$(NC)"; \
 		$(PIP) install -r $(BACKEND_DIR)/requirements-mlx.txt; \
@@ -79,7 +80,11 @@ dev: ## Start backend + desktop app (parallel)
 	@echo -e "$(YELLOW)Note: If Tauri fails, run 'make build-server' first or use separate terminals$(NC)"
 	@trap 'kill 0' EXIT; \
 		$(MAKE) dev-backend & \
-		sleep 2 && $(MAKE) dev-frontend & \
+		sleep 2 && if [ "$$(uname)" = "Linux" ] && lspci 2>/dev/null | grep -qi nvidia; then \
+			WEBKIT_DISABLE_DMABUF_RENDERER=1 $(MAKE) dev-frontend; \
+		else \
+			$(MAKE) dev-frontend; \
+		fi & \
 		wait
 
 dev-backend: ## Start FastAPI backend server

PATCH_NOTES.md

@@ -0,0 +1,58 @@
+# Voicebox Offline Mode Fix
+
+## Problem
+Voicebox crashes when generating speech if HuggingFace is unreachable, even when models are fully cached locally.
+
+**Root Cause:**
+- Voicebox downloads `mlx-community/Qwen3-TTS-12Hz-1.7B-Base-bf16` (MLX optimized version)
+- But `mlx_audio.tts.load()` tries to fetch `config.json` from original repo `Qwen/Qwen3-TTS-12Hz-1.7B-Base`
+- This network request fails → server crashes with `RemoteDisconnected`
+
+**Related Issues:**
+- Issue #150: "Internet connection required, even though models are downloaded?"
+- Issue #151: "API Stability Issues: Model Loading Hangs and Server Crashes"
+
+## Solution
+Two-part fix:
+
+### 1. Monkey-patch huggingface_hub (`backend/utils/hf_offline_patch.py`)
+- Intercepts cache lookup functions
+- Forces offline mode early (before mlx_audio imports)
+- Adds debug logging for cache hits/misses
+
+### 2. Symlink original repo to MLX version (`ensure_original_qwen_config_cached()`)
+- When original `Qwen/Qwen3-TTS-12Hz-1.7B-Base` cache doesn't exist
+- But MLX `mlx-community/Qwen3-TTS-12Hz-1.7B-Base-bf16` does exist
+- Creates a symlink so cache lookups succeed
+
+## Files Changed
+- `backend/backends/mlx_backend.py` - Added patch imports at top
+- `backend/utils/hf_offline_patch.py` - New patch module
+
+## Testing
+To test this fix:
+1. Build Voicebox from source: `make build`
+2. Disconnect from internet
+3. Try generating speech
+4. Should work without network requests
+
+## Build Instructions
+
+```bash
+# Install dependencies
+pip install -r requirements.txt
+
+# Build the app
+make build
+
+# Or build just the server
+make build-server
+```
+
+## Notes
+- The patch is applied automatically when `mlx_backend.py` is imported
+- Set `VOICEBOX_OFFLINE_PATCH=0` to disable the patch
+- The symlink approach works because the config.json is compatible between versions
+
+---
+*Patch contributed by community*

README.md

@@ -76,39 +76,16 @@ Download a voice model, clone any voice from a few seconds of audio, and compose
 
 ## Download
 
-### Desktop App
+Voicebox is available now for macOS and Windows.
 
-| Platform              | Download                                                                                                                    |
-| --------------------- | --------------------------------------------------------------------------------------------------------------------------- |
-| macOS (Apple Silicon) | [Download latest release](https://github.com/jamiepine/voicebox/releases/latest)   |
-| macOS (Intel)         | [Download latest release](https://github.com/jamiepine/voicebox/releases/latest)           |
-| Windows (MSI)         | [Download latest release](https://github.com/jamiepine/voicebox/releases/latest) |
-| Windows (Setup)       | [Download latest release](https://github.com/jamiepine/voicebox/releases/latest) |
-| Linux (AppImage)      | [Download latest release](https://github.com/jamiepine/voicebox/releases/latest) |
-| Linux (Deb)           | [Download latest release](https://github.com/jamiepine/voicebox/releases/latest) |
+| Platform | Download |
+|----------|----------|
+| macOS (Apple Silicon) | [Voicebox_aarch64.app.tar.gz](https://github.com/jamiepine/voicebox/releases/latest/download/Voicebox_aarch64.app.tar.gz) |
+| macOS (Intel) | [Voicebox_x64.app.tar.gz](https://github.com/jamiepine/voicebox/releases/latest/download/Voicebox_x64.app.tar.gz) |
+| Windows (MSI) | [Latest Windows MSI](https://github.com/jamiepine/voicebox/releases/latest) |
+| Windows (Setup) | [Latest Windows Setup](https://github.com/jamiepine/voicebox/releases/latest) |
 
-### Docker
-
-Run Voicebox with the web UI in Docker - perfect for servers and headless deployments:
-
-```bash
-# CPU-only (supports amd64 and arm64)
-docker run -p 8000:8000 -v voicebox-data:/app/data \
-  ghcr.io/jamiepine/voicebox:latest
-
-# NVIDIA GPU (recommended for performance)
-docker run --gpus all -p 8000:8000 -v voicebox-data:/app/data \
-  ghcr.io/jamiepine/voicebox:latest-cuda
-```
-
-Or use Docker Compose:
-```bash
-docker compose up -d
-```
-
-Open http://localhost:8000 to access the web UI.
-
-See [Docker Deployment Guide](docs/overview/docker.mdx) for cloud deployments, GPU setup, and more.
+> **Linux** — Pre-built binaries are not yet available. Linux users can compile from source, see [Development](#development) below.
 
 ---
 
@@ -121,12 +98,12 @@ Powered by Alibaba's **Qwen3-TTS** — a breakthrough model that achieves near-p
 - **Instant cloning** — Upload a sample, get a voice profile
 - **High fidelity** — Natural prosody, emotion, and cadence
 - **Multi-language** — English, Chinese, and more coming
-- **Lightning fast on Mac** — MLX backend leverages Apple Silicon's Neural Engine for super fast generation
+- **Lightning fast on Mac** — MLX backend leverages Apple Silicon's Neural Engine for super-fast generation
 
 ### Voice Profile Management
 
 - **Create profiles** from audio files or record directly in-app
-- **Import/Export** profiles to share or backup
+- **Import/Export** profiles to share or back up
 - **Multi-sample support** — combine multiple samples for higher quality cloning
 - **Organize** with descriptions and language tags
 
@@ -160,10 +137,9 @@ Create multi-voice narratives, podcasts, and conversations with a timeline-based
 
 ### Flexible Deployment
 
-- **Desktop app** — Native apps for macOS, Windows, and Linux
-- **Docker** — Deploy to servers with the web UI included
-- **Remote mode** — Connect desktop app to a remote GPU server
-- **Cloud ready** — Deploy to AWS, GCP, DigitalOcean, or any cloud provider
+- **Local mode** — Everything runs on your machine
+- **Remote mode** — Connect to a GPU server on your network
+- **One-click server** — Turn any machine into a Voicebox server
 
 ---
 
@@ -171,17 +147,20 @@ Create multi-voice narratives, podcasts, and conversations with a timeline-based
 
 Voicebox exposes a full REST API, so you can integrate voice synthesis into your own apps.
 
+For the current local app and development workflow, the backend is typically available at `http://localhost:17493`.
+If you launch the backend manually with a different host or port, use that address instead.
+
 ```bash
 # Generate speech
-curl -X POST http://localhost:8000/generate \
+curl -X POST http://localhost:17493/generate \
   -H "Content-Type: application/json" \
   -d '{"text": "Hello world", "profile_id": "abc123", "language": "en"}'
 
 # List voice profiles
-curl http://localhost:8000/profiles
+curl http://localhost:17493/profiles
 
 # Create a profile
-curl -X POST http://localhost:8000/profiles \
+curl -X POST http://localhost:17493/profiles \
   -H "Content-Type: application/json" \
   -d '{"name": "My Voice", "language": "en"}'
 ```
@@ -194,23 +173,23 @@ curl -X POST http://localhost:8000/profiles \
 - Voice assistants
 - Content creation automation
 
-Full API documentation available at `http://localhost:8000/docs` when running.
+Full API documentation is available at `http://localhost:17493/docs` in the default local workflow, or at `/docs` on whatever server address you configured.
 
 ---
 
 ## Tech Stack
 
-| Layer            | Technology                                          |
-| ---------------- | --------------------------------------------------- |
-| Desktop App      | Tauri (Rust)                                        |
-| Frontend         | React, TypeScript, Tailwind CSS                     |
-| State            | Zustand, React Query                                |
-| Backend          | FastAPI (Python)                                    |
-| Voice Model      | Qwen3-TTS (PyTorch or MLX)                          |
-| Transcription    | Whisper (PyTorch or MLX)                            |
+| Layer | Technology |
+|-------|------------|
+| Desktop App | Tauri (Rust) |
+| Frontend | React, TypeScript, Tailwind CSS |
+| State | Zustand, React Query |
+| Backend | FastAPI (Python) |
+| Voice Model | Qwen3-TTS (PyTorch or MLX) |
+| Transcription | Whisper (PyTorch or MLX) |
 | Inference Engine | MLX (Apple Silicon) / PyTorch (Windows/Linux/Intel) |
-| Database         | SQLite                                              |
-| Audio            | WaveSurfer.js, librosa                              |
+| Database | SQLite |
+| Audio | WaveSurfer.js, librosa |
 
 **Why this stack?**
 
@@ -218,26 +197,6 @@ Full API documentation available at `http://localhost:8000/docs` when running.
 - **FastAPI** — Async Python with automatic OpenAPI schema generation
 - **Type-safe end-to-end** — Generated TypeScript client from OpenAPI spec
 
-### TTS Provider Architecture
-
-Voicebox uses a modular provider system to support different inference backends:
-
-- **`apple-mlx`** — Bundled with macOS Apple Silicon builds
-
-  - Uses MLX with native Metal acceleration (4-5x faster)
-  - Works out of the box, no download required
-
-- **`pytorch-cpu`** — Universal CPU provider (bundled or downloaded)
-
-  - Bundled with Windows and macOS Intel builds
-  - Downloaded on first use for Linux (~300MB)
-
-- **`pytorch-cuda`** — Optional NVIDIA GPU-accelerated provider
-  - Windows/Linux only (~2.4GB)
-  - 4-5x faster inference on CUDA-capable GPUs
-
-macOS and Windows builds work out of the box with bundled providers. Linux users download a provider on first launch. The app automatically detects your hardware and recommends the best option. All downloadable providers are distributed via Cloudflare R2 for fast, global delivery.
-
 ---
 
 ## Roadmap
@@ -246,13 +205,13 @@ Voicebox is the beginning of something bigger. Here's what's coming:
 
 ### Coming Soon
 
-| Feature                 | Description                                        |
-| ----------------------- | -------------------------------------------------- |
-| **Real-time Synthesis** | Stream audio as it generates, word by word         |
-| **Conversation Mode**   | Multi-speaker dialogues with automatic turn-taking |
-| **Voice Effects**       | Pitch shift, reverb, M3GAN-style effects           |
-| **Timeline Editor**     | Audio studio with word-level precision editing     |
-| **More Models**         | XTTS, Bark, and other open-source voice models     |
+| Feature | Description |
+|---------|-------------|
+| **Real-time Synthesis** | Stream audio as it generates, word by word |
+| **Conversation Mode** | Multi-speaker dialogues with automatic turn-taking |
+| **Voice Effects** | Pitch shift, reverb, M3GAN-style effects |
+| **Timeline Editor** | Audio studio with word-level precision editing |
+| **More Models** | XTTS, Bark, and other open-source voice models |
 
 ### Future Vision
 
@@ -269,45 +228,23 @@ Voicebox aims to be the **one-stop shop for everything voice** — cloning, synt
 
 See [CONTRIBUTING.md](CONTRIBUTING.md) for detailed setup and contribution guidelines.
 
-**Using the Makefile (recommended):** Run `make help` to see all available commands for setup, development, building, and testing.
-
 ### Quick Start
 
-**With Makefile (Unix/macOS/Linux):**
-
 ```bash
-# Clone the repo
-git clone https://github.com/voicebox-sh/voicebox.git
+git clone https://github.com/jamiepine/voicebox.git
 cd voicebox
 
-# Setup everything
-make setup
-
-# Start development
-make dev
+just setup   # creates Python venv, installs all deps
+just dev     # starts backend + desktop app
 ```
 
-**Manual setup (all platforms):**
+Install [just](https://github.com/casey/just): `brew install just` or `cargo install just`. Run `just --list` to see all commands.
 
-```bash
-# Clone the repo
-git clone https://github.com/voicebox-sh/voicebox.git
-cd voicebox
+Also available via Makefile: `make setup && make dev` (run `make help` for all commands).
 
-# Install dependencies
-bun install
-
-# Install Python dependencies
-cd backend && pip install -r requirements.txt && cd ..
-
-# Start development
-bun run dev
-```
-
-**Prerequisites:** [Bun](https://bun.sh), [Rust](https://rustup.rs), [Python 3.11+](https://python.org).
-
-**Performance:**
+**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/).
 
+**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)
 

app/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@voicebox/app",
-  "version": "0.1.13",
+  "version": "0.2.0",
   "private": true,
   "type": "module",
   "scripts": {
@@ -17,10 +17,6 @@
     "@dnd-kit/sortable": "^10.0.0",
     "@dnd-kit/utilities": "^3.2.2",
     "@hookform/resolvers": "^3.9.0",
-    "@hugeicons/core-free-icons": "^3.1.1",
-    "@hugeicons/react": "^1.1.4",
-    "@iconify-json/svg-spinners": "^1.2.4",
-    "@iconify/react": "^6.0.2",
     "@radix-ui/react-alert-dialog": "^1.1.1",
     "@radix-ui/react-avatar": "^1.1.0",
     "@radix-ui/react-dialog": "^1.1.1",
@@ -28,7 +24,6 @@
     "@radix-ui/react-label": "^2.1.0",
     "@radix-ui/react-popover": "^1.1.1",
     "@radix-ui/react-progress": "^1.1.0",
-    "@radix-ui/react-radio-group": "^1.2.0",
     "@radix-ui/react-scroll-area": "^1.1.0",
     "@radix-ui/react-select": "^2.1.1",
     "@radix-ui/react-separator": "^1.1.0",
@@ -48,6 +43,7 @@
     "clsx": "^2.1.1",
     "date-fns": "^3.6.0",
     "framer-motion": "^12.29.0",
+    "lucide-react": "^0.454.0",
     "motion": "^12.29.0",
     "react": "^18.3.0",
     "react-dom": "^18.3.0",

app/src/App.tsx

@@ -40,7 +40,7 @@ function App() {
   const serverStartingRef = useRef(false);
 
   // Automatically check for app updates on startup and show toast notifications
-  useAutoUpdater(true);
+  useAutoUpdater({ checkOnMount: true, showToast: true });
 
   // Sync stored setting to Rust on startup
   useEffect(() => {
@@ -82,7 +82,8 @@ function App() {
       console.log('Dev mode: Skipping auto-start of server (run it separately)');
       setServerReady(true); // Mark as ready so UI doesn't show loading screen
       // Mark that server was not started by app (so we don't try to stop it on close)
-      (window as any).__voiceboxServerStartedByApp = false;
+      // @ts-expect-error - adding property to window
+      window.__voiceboxServerStartedByApp = false;
       return;
     }
 
@@ -92,22 +93,26 @@ function App() {
     }
 
     serverStartingRef.current = true;
-    console.log('Production mode: Starting bundled server...');
+    const isRemote = useServerStore.getState().mode === 'remote';
+    const customModelsDir = useServerStore.getState().customModelsDir;
+    console.log(`Production mode: Starting bundled server... (remote: ${isRemote})`);
 
     platform.lifecycle
-      .startServer(false)
+      .startServer(isRemote, customModelsDir)
       .then((serverUrl) => {
         console.log('Server is ready at:', serverUrl);
         // Update the server URL in the store with the dynamically assigned port
         useServerStore.getState().setServerUrl(serverUrl);
         setServerReady(true);
         // Mark that we started the server (so we know to stop it on close)
-        (window as any).__voiceboxServerStartedByApp = true;
+        // @ts-expect-error - adding property to window
+        window.__voiceboxServerStartedByApp = true;
       })
       .catch((error) => {
         console.error('Failed to auto-start server:', error);
         serverStartingRef.current = false;
-        (window as any).__voiceboxServerStartedByApp = false;
+        // @ts-expect-error - adding property to window
+        window.__voiceboxServerStartedByApp = false;
       });
 
     // Cleanup: stop server on actual unmount (not StrictMode remount)

app/src/components/AudioPlayer/AudioPlayer.tsx

@@ -1,18 +1,18 @@
 import { useQuery } from '@tanstack/react-query';
-import { HugeiconsIcon } from '@hugeicons/react';
-import { PauseIcon, PlayIcon, RepeatIcon, VolumeHighIcon, VolumeMuteIcon, Cancel01Icon } from '@hugeicons/core-free-icons';
-import { useEffect, useMemo, useRef, useState } from 'react';
+import { Pause, Play, Repeat, Volume2, VolumeX, X } from 'lucide-react';
+import { useEffect, useId, useMemo, useRef, useState } from 'react';
 import WaveSurfer from 'wavesurfer.js';
 import { Button } from '@/components/ui/button';
 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();
+  const volumeLabelId = useId();
   const {
     audioUrl,
     audioId,
@@ -157,8 +157,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);
       });
 
@@ -360,7 +373,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) => {
@@ -460,7 +473,7 @@ export function AudioPlayer() {
     // Use double requestAnimationFrame to ensure DOM is fully rendered
     let rafId1: number;
     let rafId2: number;
-    let timeoutId: ReturnType<typeof setTimeout> | null = null;
+    let timeoutId: number | null = null;
 
     rafId1 = requestAnimationFrame(() => {
       rafId2 = requestAnimationFrame(() => {
@@ -665,7 +678,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) {
@@ -832,8 +845,11 @@ export function AudioPlayer() {
             disabled={isLoading || duration === 0}
             className="shrink-0"
             title={duration === 0 && !isLoading ? 'Audio not loaded' : ''}
+            aria-label={
+              duration === 0 && !isLoading ? 'Audio not loaded' : isPlaying ? 'Pause' : 'Play'
+            }
           >
-            {isPlaying ? <HugeiconsIcon icon={PauseIcon} size={20} className="h-5 w-5" /> : <HugeiconsIcon icon={PlayIcon} size={20} className="h-5 w-5" />}
+            {isPlaying ? <Pause className="h-5 w-5" /> : <Play className="h-5 w-5" />}
           </Button>
 
           {/* Waveform */}
@@ -846,6 +862,8 @@ export function AudioPlayer() {
                 max={100}
                 step={0.1}
                 className="w-full"
+                aria-label="Playback position"
+                aria-valuetext={`${formatAudioDuration(currentTime)} of ${formatAudioDuration(duration)}`}
               />
             )}
             {isLoading && (
@@ -863,7 +881,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 */}
@@ -873,26 +893,37 @@ export function AudioPlayer() {
             onClick={toggleLoop}
             className={isLooping ? 'text-primary' : ''}
             title="Toggle loop"
+            aria-label={isLooping ? 'Stop looping' : 'Loop'}
           >
-            <HugeiconsIcon icon={RepeatIcon} size={16} className="h-4 w-4" />
+            <Repeat className="h-4 w-4" />
           </Button>
 
           {/* Volume Control */}
-          <div className="flex items-center gap-2 shrink-0 w-[120px]">
+          <div
+            className="flex items-center gap-2 shrink-0 w-[120px]"
+            role="group"
+            aria-label="Volume"
+          >
             <Button
               variant="ghost"
               size="icon"
               onClick={() => setVolume(volume > 0 ? 0 : 1)}
               className="h-8 w-8"
+              aria-label={volume > 0 ? 'Mute' : 'Unmute'}
             >
-              {volume > 0 ? <HugeiconsIcon icon={VolumeHighIcon} size={16} className="h-4 w-4" /> : <HugeiconsIcon icon={VolumeMuteIcon} size={16} className="h-4 w-4" />}
+              {volume > 0 ? <Volume2 className="h-4 w-4" /> : <VolumeX className="h-4 w-4" />}
             </Button>
+            <span id={volumeLabelId} className="sr-only">
+              Volume level, {Math.round(volume * 100)}%
+            </span>
             <Slider
               value={[volume * 100]}
               onValueChange={handleVolumeChange}
               max={100}
               step={1}
               className="flex-1"
+              aria-labelledby={volumeLabelId}
+              aria-valuetext={`${Math.round(volume * 100)}%`}
             />
           </div>
 
@@ -903,8 +934,9 @@ export function AudioPlayer() {
             onClick={handleClose}
             className="shrink-0"
             title="Close player"
+            aria-label="Close player"
           >
-            <HugeiconsIcon icon={Cancel01Icon} size={20} className="h-5 w-5" />
+            <X className="h-5 w-5" />
           </Button>
         </div>
       </div>

app/src/components/AudioTab/AudioTab.tsx

@@ -1,6 +1,5 @@
 import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
-import { HugeiconsIcon } from '@hugeicons/react';
-import { CheckmarkCircle01Icon, CheckmarkCircle02Icon, Edit01Icon, Add01Icon, SpeakerIcon, Delete01Icon } from '@hugeicons/core-free-icons';
+import { Check, CheckCircle2, Edit, Plus, Speaker, Trash2 } from 'lucide-react';
 import { useState } from 'react';
 import { Badge } from '@/components/ui/badge';
 import { Button } from '@/components/ui/button';
@@ -24,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;
@@ -125,6 +124,13 @@ export function AudioTab() {
     );
   }
 
+  const handleChannelDelete = async (e, channelId) => {
+    e.stopPropagation();
+    if (await confirm('Delete this channel?')) {
+      deleteChannel.mutate(channelId);
+    }
+  };
+
   const allChannels = channels || [];
   const allDevices = devices || [];
   const selectedChannel = selectedChannelId
@@ -136,7 +142,7 @@ export function AudioTab() {
       <div className="flex items-center justify-between mb-6 shrink-0">
         <h2 className="text-2xl font-bold">Audio Channels</h2>
         <Button onClick={() => setCreateDialogOpen(true)}>
-          <HugeiconsIcon icon={Add01Icon} size={16} className="h-4 w-4 mr-2" />
+          <Plus className="h-4 w-4 mr-2" />
           New Channel
         </Button>
       </div>
@@ -151,18 +157,18 @@ export function AudioTab() {
         >
           {allChannels.length === 0 ? (
             <div className="flex flex-col items-center justify-center py-12 border-2 border-dashed border-muted rounded-md">
-              <HugeiconsIcon icon={SpeakerIcon} size={48} className="h-12 w-12 text-muted-foreground mb-4" />
+              <Speaker className="h-12 w-12 text-muted-foreground mb-4" />
               <p className="text-muted-foreground mb-4">
                 No audio channels yet. Create your first channel to route voices to specific
                 devices.
               </p>
               <Button onClick={() => setCreateDialogOpen(true)}>
-                <HugeiconsIcon icon={Add01Icon} size={16} className="h-4 w-4 mr-2" />
+                <Plus className="h-4 w-4 mr-2" />
                 Create Channel
               </Button>
             </div>
           ) : (
-            <div className="space-y-3 p-2">
+            <div className="space-y-3">
               {allChannels.map((channel) => {
                 const isSelected = selectedChannelId === channel.id;
                 return (
@@ -179,7 +185,7 @@ export function AudioTab() {
                       <div className="flex-1 min-w-0">
                         <div className="flex items-center gap-2 mb-3">
                           <div className="h-8 w-8 rounded-lg bg-muted flex items-center justify-center shrink-0">
-                            <HugeiconsIcon icon={SpeakerIcon} size={16} className="h-4 w-4 text-muted-foreground" />
+                            <Speaker className="h-4 w-4 text-muted-foreground" />
                           </div>
                           <div className="flex items-center gap-2 min-w-0">
                             <h3 className="font-semibold text-base truncate">{channel.name}</h3>
@@ -236,20 +242,15 @@ export function AudioTab() {
                               setEditingChannel(channel.id);
                             }}
                           >
-                            <HugeiconsIcon icon={Edit01Icon} size={16} className="h-4 w-4" />
+                            <Edit className="h-4 w-4" />
                           </Button>
                           <Button
                             variant="ghost"
                             size="sm"
                             className="h-8 w-8 p-0"
-                            onClick={(e) => {
-                              e.stopPropagation();
-                              if (confirm('Delete this channel?')) {
-                                deleteChannel.mutate(channel.id);
-                              }
-                            }}
+                            onClick={(e) => handleChannelDelete(e, channel.id)}
                           >
-                            <HugeiconsIcon icon={Delete01Icon} size={16} className="h-4 w-4" />
+                            <Trash2 className="h-4 w-4" />
                           </Button>
                         </div>
                       )}
@@ -326,10 +327,10 @@ export function AudioTab() {
                           isConnected ? 'bg-accent border-accent' : 'border-muted-foreground/30',
                         )}
                       >
-                        {isConnected && <HugeiconsIcon icon={CheckmarkCircle01Icon} size={12} className="h-3 w-3 text-accent-foreground" />}
+                        {isConnected && <Check className="h-3 w-3 text-accent-foreground" />}
                       </div>
                     ) : device.is_default ? (
-                      <HugeiconsIcon icon={CheckmarkCircle02Icon} size={16} className="h-4 w-4 text-primary shrink-0" />
+                      <CheckCircle2 className="h-4 w-4 text-primary shrink-0" />
                     ) : null}
                     <span className={cn('truncate flex-1', device.is_default && 'font-medium')}>
                       {device.name}
@@ -340,9 +341,11 @@ export function AudioTab() {
             </div>
           ) : (
             <div className="flex flex-col items-center justify-center py-12 border-2 border-dashed border-muted rounded-md">
-              <HugeiconsIcon icon={CheckmarkCircle02Icon} size={48} className="h-12 w-12 text-muted-foreground mb-4" />
+              <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>
           )}
@@ -495,7 +498,7 @@ function CreateChannelDialog({ open, onOpenChange, devices, onCreate }: CreateCh
                           setSelectedDevices(selectedDevices.filter((id) => id !== deviceId))
                         }
                       >
-                        <HugeiconsIcon icon={Delete01Icon} size={12} className="h-3 w-3" />
+                        <Trash2 className="h-3 w-3" />
                       </Button>
                     </div>
                   );
@@ -603,7 +606,7 @@ function EditChannelDialog({
                           setSelectedDevices(selectedDevices.filter((id) => id !== deviceId))
                         }
                       >
-                        <HugeiconsIcon icon={Delete01Icon} size={12} className="h-3 w-3" />
+                        <Trash2 className="h-3 w-3" />
                       </Button>
                     </div>
                   );
@@ -649,7 +652,7 @@ function EditChannelDialog({
                           setSelectedVoices(selectedVoices.filter((id) => id !== profileId))
                         }
                       >
-                        <HugeiconsIcon icon={Delete01Icon} size={12} className="h-3 w-3" />
+                        <Trash2 className="h-3 w-3" />
                       </Button>
                     </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,332 @@
+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 { 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);
+
+  // 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);
+    }
+  }
+
+  async function handleSaveAsNew() {
+    await handleSaveNew();
+  }
+
+  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>
+    </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

@@ -1,9 +1,8 @@
-import { SparklesIcon, TextSquareIcon } from '@hugeicons/core-free-icons';
-import { HugeiconsIcon } from '@hugeicons/react';
-import { Icon } from '@iconify/react';
 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 {
@@ -14,14 +13,16 @@ import {
   SelectValue,
 } from '@/components/ui/select';
 import { Textarea } from '@/components/ui/textarea';
-import { useToast } from '@/components/ui/use-toast';
-import { LANGUAGE_OPTIONS } from '@/lib/constants/languages';
+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;
@@ -38,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();
@@ -45,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;
@@ -54,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
@@ -114,6 +100,13 @@ export function FloatingGenerateBox({
     }
   }, [selectedProfileId, profiles, setSelectedProfileId]);
 
+  // Sync generation form language with selected profile's language
+  useEffect(() => {
+    if (selectedProfile?.language) {
+      form.setValue('language', selectedProfile.language as LanguageCode);
+    }
+  }, [selectedProfile, form]);
+
   // Auto-resize textarea based on content (only when expanded)
   useEffect(() => {
     if (!isExpanded) {
@@ -176,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
@@ -214,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" />
@@ -300,13 +316,20 @@ export function FloatingGenerateBox({
                   <Button
                     type="submit"
                     disabled={isPending || !selectedProfileId}
-                    className="h-10 w-10 rounded-full bg-accent hover:bg-accent/90 hover:scale-105 text-accent-foreground shadow-lg transition-all duration-200"
+                    className="h-10 w-10 rounded-full bg-accent hover:bg-accent/90 hover:scale-105 text-accent-foreground shadow-lg hover:shadow-accent/50 transition-all duration-200"
                     size="icon"
+                    aria-label={
+                      isPending
+                        ? 'Generating...'
+                        : !selectedProfileId
+                          ? 'Select a voice profile first'
+                          : 'Generate speech'
+                    }
                   >
                     {isPending ? (
-                      <Icon icon="svg-spinners:ring-resize" className="h-4 w-4 animate-spin" />
+                      <Loader2 className="h-4 w-4 animate-spin" />
                     ) : (
-                      <HugeiconsIcon icon={SparklesIcon} size={16} className="h-4 w-4" />
+                      <Sparkles 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]">
@@ -318,7 +341,7 @@ export function FloatingGenerateBox({
                   </span>
                 </div>
                 <AnimatePresence>
-                  {isExpanded && (
+                  {isExpanded && form.watch('engine') === 'qwen' && (
                     <motion.div
                       initial={{ opacity: 0, scale: 0.8 }}
                       animate={{ opacity: 1, scale: 1 }}
@@ -336,13 +359,18 @@ 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'
+                          }
                         >
-                          <HugeiconsIcon icon={TextSquareIcon} size={16} className="h-4 w-4" />
+                          <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>
@@ -351,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 }}
@@ -383,51 +428,86 @@ export function FloatingGenerateBox({
                   <FormField
                     control={form.control}
                     name="language"
-                    render={({ field }) => (
-                      <FormItem className="flex-1 space-y-0">
-                        <Select onValueChange={field.onChange} defaultValue={field.value}>
-                          <FormControl>
-                            <SelectTrigger className="h-8 text-xs bg-card border-border rounded-full hover:bg-background/50 transition-all">
-                              <SelectValue />
-                            </SelectTrigger>
-                          </FormControl>
-                          <SelectContent>
-                            {LANGUAGE_OPTIONS.map((lang) => (
-                              <SelectItem key={lang.value} value={lang.value} className="text-xs">
-                                {lang.label}
-                              </SelectItem>
-                            ))}
-                          </SelectContent>
-                        </Select>
-                        <FormMessage className="text-xs" />
-                      </FormItem>
-                    )}
+                    render={({ field }) => {
+                      const engineLangs = getLanguageOptionsForEngine(
+                        form.watch('engine') || 'qwen',
+                      );
+                      return (
+                        <FormItem className="flex-1 space-y-0">
+                          <Select onValueChange={field.onChange} value={field.value}>
+                            <FormControl>
+                              <SelectTrigger className="h-8 text-xs bg-card border-border rounded-full hover:bg-background/50 transition-all">
+                                <SelectValue />
+                              </SelectTrigger>
+                            </FormControl>
+                            <SelectContent>
+                              {engineLangs.map((lang) => (
+                                <SelectItem key={lang.value} value={lang.value} className="text-xs">
+                                  {lang.label}
+                                </SelectItem>
+                              ))}
+                            </SelectContent>
+                          </Select>
+                          <FormMessage className="text-xs" />
+                        </FormItem>
+                      );
+                    }}
                   />
 
-                  <FormField
-                    control={form.control}
-                    name="modelSize"
-                    render={({ field }) => (
-                      <FormItem className="flex-1 space-y-0">
-                        <Select onValueChange={field.onChange} defaultValue={field.value}>
-                          <FormControl>
-                            <SelectTrigger className="h-8 text-xs bg-card border-border rounded-full hover:bg-background/50 transition-all">
-                              <SelectValue />
-                            </SelectTrigger>
-                          </FormControl>
-                          <SelectContent>
-                            <SelectItem value="1.7B" className="text-xs text-muted-foreground">
-                              Qwen3-TTS 1.7B
-                            </SelectItem>
-                            <SelectItem value="0.6B" className="text-xs text-muted-foreground">
-                              Qwen3-TTS 0.6B
-                            </SelectItem>
-                          </SelectContent>
-                        </Select>
-                        <FormMessage className="text-xs" />
-                      </FormItem>
-                    )}
-                  />
+                  <FormItem className="flex-1 space-y-0">
+                    <Select
+                      value={
+                        form.watch('engine') === 'luxtts'
+                          ? 'luxtts'
+                          : form.watch('engine') === 'chatterbox'
+                            ? 'chatterbox'
+                            : form.watch('engine') === 'chatterbox_turbo'
+                              ? 'chatterbox_turbo'
+                              : `qwen:${form.watch('modelSize') || '1.7B'}`
+                      }
+                      onValueChange={(value) => {
+                        if (value === 'luxtts') {
+                          form.setValue('engine', 'luxtts');
+                          form.setValue('language', 'en');
+                        } else if (value === 'chatterbox') {
+                          form.setValue('engine', 'chatterbox');
+                        } else if (value === 'chatterbox_turbo') {
+                          form.setValue('engine', 'chatterbox_turbo');
+                          form.setValue('language', 'en');
+                        } else {
+                          const [, modelSize] = value.split(':');
+                          form.setValue('engine', 'qwen');
+                          form.setValue('modelSize', modelSize as '1.7B' | '0.6B');
+                        }
+                      }}
+                    >
+                      <FormControl>
+                        <SelectTrigger className="h-8 text-xs bg-card border-border rounded-full hover:bg-background/50 transition-all">
+                          <SelectValue />
+                        </SelectTrigger>
+                      </FormControl>
+                      <SelectContent>
+                        <SelectItem value="qwen:1.7B" className="text-xs text-muted-foreground">
+                          Qwen3-TTS 1.7B
+                        </SelectItem>
+                        <SelectItem value="qwen:0.6B" className="text-xs text-muted-foreground">
+                          Qwen3-TTS 0.6B
+                        </SelectItem>
+                        <SelectItem value="luxtts" className="text-xs text-muted-foreground">
+                          LuxTTS
+                        </SelectItem>
+                        <SelectItem value="chatterbox" className="text-xs text-muted-foreground">
+                          Chatterbox
+                        </SelectItem>
+                        <SelectItem
+                          value="chatterbox_turbo"
+                          className="text-xs text-muted-foreground"
+                        >
+                          Chatterbox Turbo
+                        </SelectItem>
+                      </SelectContent>
+                    </Select>
+                  </FormItem>
                 </div>
               </motion.div>
             </AnimatePresence>

app/src/components/Generation/GenerationForm.tsx

@@ -1,6 +1,4 @@
-import { Mic01Icon } from '@hugeicons/core-free-icons';
-import { HugeiconsIcon } from '@hugeicons/react';
-import { Icon } from '@iconify/react';
+import { Loader2, Mic } from 'lucide-react';
 import { Button } from '@/components/ui/button';
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
 import {
@@ -21,10 +19,11 @@ import {
   SelectValue,
 } from '@/components/ui/select';
 import { Textarea } from '@/components/ui/textarea';
-import { LANGUAGE_OPTIONS } from '@/lib/constants/languages';
+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);
@@ -48,11 +47,7 @@ export function GenerationForm() {
               <FormLabel>Voice Profile</FormLabel>
               {selectedProfile ? (
                 <div className="mt-2 p-3 border rounded-md bg-muted/50 flex items-center gap-2">
-                  <HugeiconsIcon
-                    icon={Mic01Icon}
-                    size={16}
-                    className="h-4 w-4 text-muted-foreground"
-                  />
+                  <Mic className="h-4 w-4 text-muted-foreground" />
                   <span className="font-medium">{selectedProfile.name}</span>
                   <span className="text-sm text-muted-foreground">{selectedProfile.language}</span>
                 </div>
@@ -70,87 +65,134 @@ export function GenerationForm() {
                 <FormItem>
                   <FormLabel>Text to Speak</FormLabel>
                   <FormControl>
-                    <Textarea
-                      placeholder="Enter the text you want to generate..."
-                      className="min-h-[150px]"
-                      {...field}
-                    />
-                  </FormControl>
-                  <FormDescription>Max 5000 characters</FormDescription>
-                  <FormMessage />
-                </FormItem>
-              )}
-            />
-
-            <FormField
-              control={form.control}
-              name="instruct"
-              render={({ field }) => (
-                <FormItem>
-                  <FormLabel>Delivery Instructions (optional)</FormLabel>
-                  <FormControl>
-                    <Textarea
-                      placeholder="e.g. Speak slowly with emphasis, Warm and friendly tone, Professional and authoritative..."
-                      className="min-h-[80px]"
-                      {...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>
-                    Natural language instructions to control speech delivery (tone, emotion, pace).
-                    Max 500 characters
+                    {form.watch('engine') === 'chatterbox_turbo'
+                      ? 'Max 5000 characters. Type / to insert sound effects.'
+                      : 'Max 5000 characters'}
                   </FormDescription>
                   <FormMessage />
                 </FormItem>
               )}
             />
 
-            <div className="grid gap-4 md:grid-cols-3">
+            {form.watch('engine') === 'qwen' && (
               <FormField
                 control={form.control}
-                name="language"
+                name="instruct"
                 render={({ field }) => (
                   <FormItem>
-                    <FormLabel>Language</FormLabel>
-                    <Select onValueChange={field.onChange} defaultValue={field.value}>
-                      <FormControl>
-                        <SelectTrigger>
-                          <SelectValue />
-                        </SelectTrigger>
-                      </FormControl>
-                      <SelectContent>
-                        {LANGUAGE_OPTIONS.map((lang) => (
-                          <SelectItem key={lang.value} value={lang.value}>
-                            {lang.label}
-                          </SelectItem>
-                        ))}
-                      </SelectContent>
-                    </Select>
+                    <FormLabel>Delivery Instructions (optional)</FormLabel>
+                    <FormControl>
+                      <Textarea
+                        placeholder="e.g. Speak slowly with emphasis, Warm and friendly tone, Professional and authoritative..."
+                        className="min-h-[80px]"
+                        {...field}
+                      />
+                    </FormControl>
+                    <FormDescription>
+                      Natural language instructions to control speech delivery (tone, emotion,
+                      pace). Max 500 characters
+                    </FormDescription>
                     <FormMessage />
                   </FormItem>
                 )}
               />
+            )}
+
+            <div className="grid gap-4 md:grid-cols-3">
+              <FormItem>
+                <FormLabel>Model</FormLabel>
+                <Select
+                  value={
+                    form.watch('engine') === 'luxtts'
+                      ? 'luxtts'
+                      : form.watch('engine') === 'chatterbox'
+                        ? 'chatterbox'
+                        : form.watch('engine') === 'chatterbox_turbo'
+                          ? 'chatterbox_turbo'
+                          : `qwen:${form.watch('modelSize') || '1.7B'}`
+                  }
+                  onValueChange={(value) => {
+                    if (value === 'luxtts') {
+                      form.setValue('engine', 'luxtts');
+                      form.setValue('language', 'en');
+                    } else if (value === 'chatterbox') {
+                      form.setValue('engine', 'chatterbox');
+                    } else if (value === 'chatterbox_turbo') {
+                      form.setValue('engine', 'chatterbox_turbo');
+                      form.setValue('language', 'en');
+                    } else {
+                      const [, modelSize] = value.split(':');
+                      form.setValue('engine', 'qwen');
+                      form.setValue('modelSize', modelSize as '1.7B' | '0.6B');
+                    }
+                  }}
+                >
+                  <FormControl>
+                    <SelectTrigger>
+                      <SelectValue />
+                    </SelectTrigger>
+                  </FormControl>
+                  <SelectContent>
+                    <SelectItem value="qwen:1.7B">Qwen3-TTS 1.7B</SelectItem>
+                    <SelectItem value="qwen:0.6B">Qwen3-TTS 0.6B</SelectItem>
+                    <SelectItem value="luxtts">LuxTTS</SelectItem>
+                    <SelectItem value="chatterbox">Chatterbox</SelectItem>
+                    <SelectItem value="chatterbox_turbo">Chatterbox Turbo</SelectItem>
+                  </SelectContent>
+                </Select>
+                <FormDescription>
+                  {form.watch('engine') === 'luxtts'
+                    ? 'Fast, English-focused'
+                    : form.watch('engine') === 'chatterbox'
+                      ? '23 languages, incl. Hebrew'
+                      : form.watch('engine') === 'chatterbox_turbo'
+                        ? 'English, [laugh] [cough] tags'
+                        : 'Multi-language, two sizes'}
+                </FormDescription>
+              </FormItem>
 
               <FormField
                 control={form.control}
-                name="modelSize"
-                render={({ field }) => (
-                  <FormItem>
-                    <FormLabel>Model Size</FormLabel>
-                    <Select onValueChange={field.onChange} defaultValue={field.value}>
-                      <FormControl>
-                        <SelectTrigger>
-                          <SelectValue />
-                        </SelectTrigger>
-                      </FormControl>
-                      <SelectContent>
-                        <SelectItem value="1.7B">Qwen TTS 1.7B (Higher Quality)</SelectItem>
-                        <SelectItem value="0.6B">Qwen TTS 0.6B (Faster)</SelectItem>
-                      </SelectContent>
-                    </Select>
-                    <FormDescription>Larger models produce better quality</FormDescription>
-                    <FormMessage />
-                  </FormItem>
-                )}
+                name="language"
+                render={({ field }) => {
+                  const engineLangs = getLanguageOptionsForEngine(form.watch('engine') || 'qwen');
+                  return (
+                    <FormItem>
+                      <FormLabel>Language</FormLabel>
+                      <Select onValueChange={field.onChange} value={field.value}>
+                        <FormControl>
+                          <SelectTrigger>
+                            <SelectValue />
+                          </SelectTrigger>
+                        </FormControl>
+                        <SelectContent>
+                          {engineLangs.map((lang) => (
+                            <SelectItem key={lang.value} value={lang.value}>
+                              {lang.label}
+                            </SelectItem>
+                          ))}
+                        </SelectContent>
+                      </Select>
+                      <FormMessage />
+                    </FormItem>
+                  );
+                }}
               />
 
               <FormField
@@ -179,7 +221,7 @@ export function GenerationForm() {
             <Button type="submit" className="w-full" disabled={isPending || !selectedProfileId}>
               {isPending ? (
                 <>
-                  <Icon icon="svg-spinners:ring-resize" className="mr-2 h-4 w-4 animate-spin" />
+                  <Loader2 className="mr-2 h-4 w-4 animate-spin" />
                   Generating...
                 </>
               ) : (

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,14 +1,22 @@
+import { useQueryClient } from '@tanstack/react-query';
+import { AnimatePresence, motion } from 'framer-motion';
 import {
-  Archive01Icon,
-  Delete01Icon,
-  Download01Icon,
-  MoreHorizontalIcon,
-  PlayIcon,
-  WaveIcon,
-} from '@hugeicons/core-free-icons';
-import { HugeiconsIcon } from '@hugeicons/react';
-import { Icon } from '@iconify/react';
+  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,
@@ -24,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,
@@ -37,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)
@@ -58,8 +74,18 @@ export function HistoryTable() {
   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,
@@ -74,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);
@@ -197,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, {
@@ -225,10 +366,7 @@ export function HistoryTable() {
   if (isLoading && page === 0) {
     return (
       <div className="flex items-center justify-center h-full">
-        <Icon
-          icon="svg-spinners:ring-resize"
-          className="h-8 w-8 animate-spin text-muted-foreground"
-        />
+        <Loader2 className="h-8 w-8 animate-spin text-muted-foreground" />
       </div>
     );
   }
@@ -256,104 +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}
                   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',
                   )}
-                  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);
-                  }}
                 >
-                  {/* Waveform icon */}
-                  <div className="flex items-center shrink-0">
-                    <HugeiconsIcon
-                      icon={WaveIcon}
-                      size={20}
-                      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
-                    />
-                  </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)}
                         >
-                          <HugeiconsIcon icon={MoreHorizontalIcon} size={16} 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)}
                         >
-                          <HugeiconsIcon icon={PlayIcon} size={16} className="mr-2 h-4 w-4" />
-                          Play
-                        </DropdownMenuItem>
-                        <DropdownMenuItem
-                          onClick={() => handleDownloadAudio(gen.id, gen.text)}
-                          disabled={exportGenerationAudio.isPending}
-                        >
-                          <HugeiconsIcon icon={Download01Icon} size={16} className="mr-2 h-4 w-4" />
-                          Export Audio
-                        </DropdownMenuItem>
-                        <DropdownMenuItem
-                          onClick={() => handleExportPackage(gen.id, gen.text)}
-                          disabled={exportGeneration.isPending}
-                        >
-                          <HugeiconsIcon icon={Archive01Icon} size={16} className="mr-2 h-4 w-4" />
-                          Export Package
-                        </DropdownMenuItem>
-                        <DropdownMenuItem
-                          onClick={() => handleDeleteClick(gen.id, gen.profile_name)}
-                          disabled={deleteGeneration.isPending}
-                        >
-                          <HugeiconsIcon icon={Delete01Icon} size={16} 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>
               );
             })}
@@ -361,12 +661,7 @@ export function HistoryTable() {
             {/* Load more trigger element */}
             {hasMore && (
               <div ref={loadMoreRef} className="flex items-center justify-center py-4">
-                {isFetching && (
-                  <Icon
-                    icon="svg-spinners:ring-resize"
-                    className="h-6 w-6 animate-spin text-muted-foreground"
-                  />
-                )}
+                {isFetching && <Loader2 className="h-6 w-6 animate-spin text-muted-foreground" />}
               </div>
             )}
 
@@ -440,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

@@ -1,5 +1,4 @@
-import { HugeiconsIcon } from '@hugeicons/react';
-import { SparklesIcon, Upload01Icon } from '@hugeicons/core-free-icons';
+import { Sparkles, Upload } from 'lucide-react';
 import { useRef, useState } from 'react';
 import { FloatingGenerateBox } from '@/components/Generation/FloatingGenerateBox';
 import { HistoryTable } from '@/components/History/HistoryTable';
@@ -14,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';
@@ -78,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" />
 
@@ -90,7 +89,7 @@ export function MainEditor() {
             <h2 className="text-2xl font-bold">Voicebox</h2>
             <div className="flex gap-2">
               <Button variant="outline" onClick={handleImportClick}>
-                <HugeiconsIcon icon={Upload01Icon} size={16} className="mr-2 h-4 w-4" />
+                <Upload className="mr-2 h-4 w-4" />
                 Import Voice
               </Button>
               <input
@@ -101,7 +100,7 @@ export function MainEditor() {
                 className="hidden"
               />
               <Button onClick={() => setDialogOpen(true)}>
-                <HugeiconsIcon icon={SparklesIcon} size={16} className="mr-2 h-4 w-4" />
+                <Sparkles className="mr-2 h-4 w-4" />
                 Create Voice
               </Button>
             </div>
@@ -111,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">
@@ -124,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="space-y-4 overflow-y-auto flex flex-col">
+    <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'),
@@ -31,7 +34,10 @@ export function ConnectionForm() {
   const setServerUrl = useServerStore((state) => state.setServerUrl);
   const keepServerRunningOnClose = useServerStore((state) => state.keepServerRunningOnClose);
   const setKeepServerRunningOnClose = useServerStore((state) => state.setKeepServerRunningOnClose);
+  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),
@@ -49,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}`,
@@ -57,7 +63,7 @@ export function ConnectionForm() {
   }
 
   return (
-    <Card>
+    <Card role="region" aria-label="Server Connection" tabIndex={0}>
       <CardHeader>
         <CardTitle>Server Connection</CardTitle>
       </CardHeader>
@@ -83,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);
@@ -115,6 +153,39 @@ export function ConnectionForm() {
             </div>
           </div>
         </div>
+
+        {platform.metadata.isTauri && (
+          <div className="mt-6 pt-6 border-t">
+            <div className="flex items-start space-x-3">
+              <Checkbox
+                id="allowNetworkAccess"
+                className="mt-[6px]"
+                checked={mode === 'remote'}
+                onCheckedChange={(checked: boolean) => {
+                  setMode(checked ? 'remote' : 'local');
+                  toast({
+                    title: 'Setting updated',
+                    description: checked
+                      ? 'Network access enabled. Restart the app to apply.'
+                      : 'Network access disabled. Restart the app to apply.',
+                  });
+                }}
+              />
+              <div className="space-y-1">
+                <label
+                  htmlFor="allowNetworkAccess"
+                  className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70 cursor-pointer"
+                >
+                  Allow network access
+                </label>
+                <p className="text-sm text-muted-foreground">
+                  Makes the server accessible from other devices on your network. Restart the app
+                  after changing this setting.
+                </p>
+              </div>
+            </div>
+          </div>
+        )}
       </CardContent>
     </Card>
   );

app/src/components/ServerSettings/DataFolders.tsx

@@ -1,112 +0,0 @@
-import { Folder01Icon, FolderOpenIcon } from '@hugeicons/core-free-icons';
-import { HugeiconsIcon } from '@hugeicons/react';
-import { Icon } from '@iconify/react';
-import { Button } from '@/components/ui/button';
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
-import { Input } from '@/components/ui/input';
-import { useSystemFolders } from '@/lib/hooks/useSystemFolders';
-import { usePlatform } from '@/platform/PlatformContext';
-
-interface FolderRowProps {
-  label: string;
-  description: string;
-  path: string | undefined;
-  isLoading: boolean;
-  canOpen: boolean;
-  onOpen: () => void;
-}
-
-function FolderRow({ label, description, path, isLoading, canOpen, onOpen }: FolderRowProps) {
-  return (
-    <div className="space-y-1.5">
-      <div className="flex items-center justify-between">
-        <div>
-          <div className="text-sm font-medium">{label}</div>
-          <div className="text-xs text-muted-foreground">{description}</div>
-        </div>
-        {canOpen && path && (
-          <Button
-            variant="outline"
-            size="sm"
-            onClick={onOpen}
-            disabled={isLoading || !path}
-            className="shrink-0"
-          >
-            <HugeiconsIcon icon={FolderOpenIcon} size={16} className="h-4 w-4 mr-2" />
-            Open
-          </Button>
-        )}
-      </div>
-      <Input
-        value={isLoading ? 'Loading...' : path || 'Not available'}
-        readOnly
-        className="font-mono text-xs text-muted-foreground select-all cursor-text"
-      />
-    </div>
-  );
-}
-
-export function DataFolders() {
-  const { data: folders, isLoading, error } = useSystemFolders();
-  const platform = usePlatform();
-  const isTauri = platform.metadata.isTauri;
-
-  const handleOpenFolder = async (path: string | undefined) => {
-    if (!path) return;
-    const success = await platform.filesystem.openFolder(path);
-    if (!success && isTauri) {
-      console.error('Failed to open folder:', path);
-    }
-  };
-
-  return (
-    <Card>
-      <CardHeader>
-        <CardTitle className="flex items-center gap-2">
-          <HugeiconsIcon icon={Folder01Icon} size={20} className="h-5 w-5" />
-          Data Folders
-        </CardTitle>
-        <CardDescription>
-          {isTauri
-            ? 'Click "Open" to view folders in your file explorer, or copy the paths below.'
-            : 'These are the server-side folder paths where your data is stored.'}
-        </CardDescription>
-      </CardHeader>
-      <CardContent className="space-y-4">
-        {error ? (
-          <div className="flex items-center gap-2 text-sm text-destructive">
-            <Icon icon="lucide:alert-circle" className="h-4 w-4" />
-            <span>Failed to load folder paths: {error.message}</span>
-          </div>
-        ) : (
-          <>
-            <FolderRow
-              label="App Data"
-              description="Voices, generations, and app database"
-              path={folders?.data_dir}
-              isLoading={isLoading}
-              canOpen={isTauri}
-              onOpen={() => handleOpenFolder(folders?.data_dir)}
-            />
-            <FolderRow
-              label="Models"
-              description="Downloaded AI models from HuggingFace Hub"
-              path={folders?.models_dir}
-              isLoading={isLoading}
-              canOpen={isTauri}
-              onOpen={() => handleOpenFolder(folders?.models_dir)}
-            />
-            <FolderRow
-              label="Providers"
-              description="External TTS provider binaries (PyTorch CPU/CUDA)"
-              path={folders?.providers_dir}
-              isLoading={isLoading}
-              canOpen={isTauri}
-              onOpen={() => handleOpenFolder(folders?.providers_dir)}
-            />
-          </>
-        )}
-      </CardContent>
-    </Card>
-  );
-}

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

@@ -0,0 +1,364 @@
+import { useQuery, useQueryClient } from '@tanstack/react-query';
+import { AlertCircle, Download, Loader2, RotateCw, Trash2 } from 'lucide-react';
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { Button } from '@/components/ui/button';
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import { Progress } from '@/components/ui/progress';
+import { apiClient } from '@/lib/api/client';
+import type { CudaDownloadProgress } from '@/lib/api/types';
+import { useServerHealth } from '@/lib/hooks/useServer';
+import { usePlatform } from '@/platform/PlatformContext';
+import { useServerStore } from '@/stores/serverStore';
+
+type RestartPhase = 'idle' | 'stopping' | 'waiting' | 'ready';
+
+export function GpuAcceleration() {
+  const platform = usePlatform();
+  const queryClient = useQueryClient();
+  const serverUrl = useServerStore((state) => state.serverUrl);
+  const { data: health } = useServerHealth();
+
+  const [restartPhase, setRestartPhase] = useState<RestartPhase>('idle');
+  const [error, setError] = useState<string | null>(null);
+  const [downloadProgress, setDownloadProgress] = useState<CudaDownloadProgress | null>(null);
+  const healthPollRef = useRef<ReturnType<typeof setInterval> | null>(null);
+
+  // Query CUDA backend status
+  const {
+    data: cudaStatus,
+    isLoading: _cudaStatusLoading,
+    refetch: refetchCudaStatus,
+  } = useQuery({
+    queryKey: ['cuda-status', serverUrl],
+    queryFn: () => apiClient.getCudaStatus(),
+    refetchInterval: (query) => (query.state.status === 'pending' ? false : 10000),
+    retry: 1,
+    enabled: !!health, // Only fetch when backend is reachable
+  });
+
+  // Derived state
+  const isCurrentlyCuda = health?.backend_variant === 'cuda';
+  const cudaAvailable = cudaStatus?.available ?? false;
+  const cudaDownloading = cudaStatus?.downloading ?? false;
+
+  // Clean up health poll on unmount
+  useEffect(() => {
+    return () => {
+      if (healthPollRef.current) {
+        clearInterval(healthPollRef.current);
+        healthPollRef.current = null;
+      }
+    };
+  }, []);
+
+  // SSE progress tracking during download
+  useEffect(() => {
+    if (!cudaDownloading || !serverUrl) {
+      return;
+    }
+
+    const eventSource = new EventSource(`${serverUrl}/backend/cuda-progress`);
+
+    eventSource.onmessage = (event) => {
+      try {
+        const data = JSON.parse(event.data) as CudaDownloadProgress;
+        setDownloadProgress(data);
+
+        if (data.status === 'complete') {
+          eventSource.close();
+          setDownloadProgress(null);
+          refetchCudaStatus();
+        } else if (data.status === 'error') {
+          eventSource.close();
+          setError(data.error || 'Download failed');
+          setDownloadProgress(null);
+          refetchCudaStatus();
+        }
+      } catch (e) {
+        console.error('Error parsing CUDA progress event:', e);
+      }
+    };
+
+    eventSource.onerror = () => {
+      eventSource.close();
+    };
+
+    return () => {
+      eventSource.close();
+    };
+  }, [cudaDownloading, serverUrl, refetchCudaStatus]);
+
+  // Start aggressive health polling during restart
+  const startHealthPolling = useCallback(() => {
+    if (healthPollRef.current) return;
+
+    healthPollRef.current = setInterval(async () => {
+      try {
+        const result = await apiClient.getHealth();
+        if (result.status === 'healthy') {
+          // Server is back up
+          if (healthPollRef.current) {
+            clearInterval(healthPollRef.current);
+            healthPollRef.current = null;
+          }
+          setRestartPhase('ready');
+          // Invalidate all queries to refresh UI
+          queryClient.invalidateQueries();
+          // Reset after a moment
+          setTimeout(() => setRestartPhase('idle'), 2000);
+        }
+      } catch {
+        // Server still down, keep polling
+      }
+    }, 1000);
+  }, [queryClient]);
+
+  const handleDownload = async () => {
+    setError(null);
+    try {
+      await apiClient.downloadCudaBackend();
+      refetchCudaStatus();
+    } catch (e: unknown) {
+      const msg = e instanceof Error ? e.message : 'Failed to start download';
+      if (msg.includes('already downloaded')) {
+        refetchCudaStatus();
+      } else {
+        setError(msg);
+      }
+    }
+  };
+
+  const handleRestart = async () => {
+    setError(null);
+    setRestartPhase('stopping');
+
+    try {
+      setRestartPhase('waiting');
+      startHealthPolling();
+      await platform.lifecycle.restartServer();
+      // Invoke resolved — server is likely ready. Stop polling and refresh.
+      if (healthPollRef.current) {
+        clearInterval(healthPollRef.current);
+        healthPollRef.current = null;
+      }
+      setRestartPhase('ready');
+      queryClient.invalidateQueries();
+      setTimeout(() => setRestartPhase('idle'), 2000);
+    } catch (e: unknown) {
+      setRestartPhase('idle');
+      if (healthPollRef.current) {
+        clearInterval(healthPollRef.current);
+        healthPollRef.current = null;
+      }
+      setError(e instanceof Error ? e.message : 'Restart failed');
+    }
+  };
+
+  const handleSwitchToCpu = async () => {
+    // To switch to CPU: delete the CUDA binary, then restart.
+    // start_server always prefers CUDA if present, so we must remove it first.
+    setError(null);
+    setRestartPhase('stopping');
+
+    try {
+      await apiClient.deleteCudaBackend();
+      setRestartPhase('waiting');
+      startHealthPolling();
+      await platform.lifecycle.restartServer();
+      // Invoke resolved — server is likely ready
+      if (healthPollRef.current) {
+        clearInterval(healthPollRef.current);
+        healthPollRef.current = null;
+      }
+      setRestartPhase('ready');
+      queryClient.invalidateQueries();
+      setTimeout(() => setRestartPhase('idle'), 2000);
+    } catch (e: unknown) {
+      setRestartPhase('idle');
+      if (healthPollRef.current) {
+        clearInterval(healthPollRef.current);
+        healthPollRef.current = null;
+      }
+      setError(e instanceof Error ? e.message : 'Failed to switch to CPU');
+      refetchCudaStatus();
+    }
+  };
+
+  const handleDelete = async () => {
+    setError(null);
+    try {
+      await apiClient.deleteCudaBackend();
+      refetchCudaStatus();
+    } catch (e: unknown) {
+      setError(e instanceof Error ? e.message : 'Failed to delete CUDA backend');
+    }
+  };
+
+  const formatBytes = (bytes: number): string => {
+    if (bytes === 0) return '0 B';
+    const k = 1024;
+    const sizes = ['B', 'KB', 'MB', 'GB'];
+    const i = Math.floor(Math.log(bytes) / Math.log(k));
+    return `${(bytes / k ** i).toFixed(1)} ${sizes[i]}`;
+  };
+
+  // Don't render until health data is available
+  if (!health) return null;
+
+  // If the system already has native GPU (MPS, etc.), only show info - no CUDA needed
+  const hasNativeGpu =
+    health.gpu_available &&
+    !isCurrentlyCuda &&
+    health.gpu_type &&
+    !health.gpu_type.includes('CUDA');
+
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>GPU Acceleration</CardTitle>
+      </CardHeader>
+      <CardContent className="space-y-4">
+        {/* 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>
+
+        {/* Native GPU detected - no CUDA download needed */}
+
+        {/* CUDA download section - only show when no GPU is active (native or CUDA) */}
+        {!hasNativeGpu && !isCurrentlyCuda && (
+          <>
+            {/* Download progress */}
+            {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>
+                  </div>
+                  {downloadProgress.total > 0 && (
+                    <span className="text-muted-foreground">
+                      {downloadProgress.progress.toFixed(1)}%
+                    </span>
+                  )}
+                </div>
+                {downloadProgress.total > 0 && (
+                  <>
+                    <Progress value={downloadProgress.progress} className="h-2" />
+                    <div className="text-xs text-muted-foreground">
+                      {formatBytes(downloadProgress.current)} /{' '}
+                      {formatBytes(downloadProgress.total)}
+                    </div>
+                  </>
+                )}
+              </div>
+            )}
+
+            {/* Restart in progress */}
+            {restartPhase !== 'idle' && (
+              <div className="flex items-center gap-2 p-3 rounded-lg bg-primary/5 border">
+                <Loader2 className="h-4 w-4 animate-spin" />
+                <span className="text-sm">
+                  {restartPhase === 'stopping' && 'Stopping server...'}
+                  {restartPhase === 'waiting' && 'Restarting server...'}
+                  {restartPhase === 'ready' && 'Server restarted successfully!'}
+                </span>
+              </div>
+            )}
+
+            {/* Error display */}
+            {error && (
+              <div className="flex items-center gap-2 text-sm text-destructive">
+                <AlertCircle className="h-4 w-4 shrink-0" />
+                <span>{error}</span>
+              </div>
+            )}
+
+            {/* Actions */}
+            {restartPhase === 'idle' && !cudaDownloading && (
+              <div className="space-y-2">
+                {/* Not downloaded yet - show download button */}
+                {!cudaAvailable && (
+                  <div className="space-y-3">
+                    <p className="text-sm text-muted-foreground">
+                      Download the CUDA backend (~2.4 GB) for NVIDIA GPU acceleration. Requires an
+                      NVIDIA GPU with CUDA support.
+                    </p>
+                    <Button onClick={handleDownload} className="w-full" size="sm">
+                      <Download className="h-4 w-4 mr-2" />
+                      Download CUDA Backend
+                    </Button>
+                  </div>
+                )}
+
+                {/* Downloaded but not active - show switch button */}
+                {cudaAvailable && !isCurrentlyCuda && platform.metadata.isTauri && (
+                  <div className="space-y-3">
+                    <p className="text-sm text-muted-foreground">
+                      CUDA backend is downloaded and ready. Restart the server to enable GPU
+                      acceleration.
+                    </p>
+                    <Button onClick={handleRestart} className="w-full" size="sm">
+                      <RotateCw className="h-4 w-4 mr-2" />
+                      Switch to CUDA Backend
+                    </Button>
+                  </div>
+                )}
+
+                {/* Currently active - show switch back to CPU */}
+                {isCurrentlyCuda && platform.metadata.isTauri && (
+                  <div className="space-y-3">
+                    <p className="text-sm text-muted-foreground">
+                      Running with CUDA GPU acceleration. Switch back to CPU if needed (you can
+                      re-download later).
+                    </p>
+                    <Button
+                      onClick={handleSwitchToCpu}
+                      variant="outline"
+                      className="w-full"
+                      size="sm"
+                    >
+                      <RotateCw className="h-4 w-4 mr-2" />
+                      Switch to CPU Backend
+                    </Button>
+                  </div>
+                )}
+
+                {/* Delete option when downloaded (and not active) */}
+                {cudaAvailable && !isCurrentlyCuda && (
+                  <Button
+                    onClick={handleDelete}
+                    variant="ghost"
+                    className="w-full text-muted-foreground hover:text-destructive"
+                    size="sm"
+                  >
+                    <Trash2 className="h-4 w-4 mr-2" />
+                    Remove CUDA Backend
+                  </Button>
+                )}
+              </div>
+            )}
+          </>
+        )}
+      </CardContent>
+    </Card>
+  );
+}

app/src/components/ServerSettings/ModelProgress.tsx

@@ -1,6 +1,4 @@
-import { CancelCircleIcon } from '@hugeicons/core-free-icons';
-import { HugeiconsIcon } from '@hugeicons/react';
-import { Icon } from '@iconify/react';
+import { Loader2, XCircle } from 'lucide-react';
 import { useEffect, useState } from 'react';
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
 import { Progress } from '@/components/ui/progress';
@@ -14,11 +12,7 @@ interface ModelProgressProps {
   isDownloading?: boolean;
 }
 
-export function ModelProgress({
-  modelName,
-  displayName,
-  isDownloading = false,
-}: ModelProgressProps) {
+export function ModelProgress({ modelName, displayName, isDownloading = false }: ModelProgressProps) {
   const [progress, setProgress] = useState<ModelProgressType | null>(null);
   const serverUrl = useServerStore((state) => state.serverUrl);
 
@@ -80,12 +74,10 @@ export function ModelProgress({
   const getStatusIcon = () => {
     switch (progress.status) {
       case 'error':
-        return (
-          <HugeiconsIcon icon={CancelCircleIcon} size={16} className="h-4 w-4 text-destructive" />
-        );
+        return <XCircle className="h-4 w-4 text-destructive" />;
       case 'downloading':
       case 'extracting':
-        return <Icon icon="svg-spinners:ring-resize" className="h-4 w-4 animate-spin" />;
+        return <Loader2 className="h-4 w-4 animate-spin" />;
       default:
         return null;
     }

app/src/components/ServerSettings/ProviderSettings.tsx

@@ -1,400 +0,0 @@
-import { Delete01Icon, Download01Icon } from '@hugeicons/core-free-icons';
-import { HugeiconsIcon } from '@hugeicons/react';
-import { Icon } from '@iconify/react';
-import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
-import { useCallback, useState } from 'react';
-import {
-  AlertDialog,
-  AlertDialogAction,
-  AlertDialogCancel,
-  AlertDialogContent,
-  AlertDialogDescription,
-  AlertDialogFooter,
-  AlertDialogHeader,
-  AlertDialogTitle,
-} from '@/components/ui/alert-dialog';
-import { Button } from '@/components/ui/button';
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
-import { Label } from '@/components/ui/label';
-import { RadioGroup, RadioGroupItem } from '@/components/ui/radio-group';
-import { useToast } from '@/components/ui/use-toast';
-import { apiClient } from '@/lib/api/client';
-import { useModelDownloadToast } from '@/lib/hooks/useModelDownloadToast';
-
-const isMacOS = () => navigator.platform.toLowerCase().includes('mac');
-const isWindows = () => navigator.platform.toLowerCase().includes('win');
-const getPlatformName = () => {
-  if (isMacOS()) return 'macOS';
-  if (isWindows()) return 'Windows';
-  return 'Linux';
-};
-
-type ProviderType =
-  | 'auto'
-  | 'apple-mlx'
-  | 'bundled-pytorch'
-  | 'pytorch-cpu'
-  | 'pytorch-cuda'
-  | 'remote'
-  | 'openai';
-
-export function ProviderSettings() {
-  const { toast } = useToast();
-  const queryClient = useQueryClient();
-  const [downloadingProvider, setDownloadingProvider] = useState<string | null>(null);
-
-  const { data: providersData, isLoading } = useQuery({
-    queryKey: ['providers'],
-    queryFn: async () => {
-      return await apiClient.listProviders();
-    },
-    refetchInterval: 5000,
-  });
-
-  const { data: activeProvider } = useQuery({
-    queryKey: ['activeProvider'],
-    queryFn: async () => {
-      return await apiClient.getActiveProvider();
-    },
-    refetchInterval: 5000,
-  });
-
-  // Callbacks for download completion
-  const handleDownloadComplete = useCallback(() => {
-    setDownloadingProvider(null);
-    queryClient.invalidateQueries({ queryKey: ['providers'] });
-  }, [queryClient]);
-
-  const handleDownloadError = useCallback(() => {
-    setDownloadingProvider(null);
-  }, []);
-
-  // Use progress toast hook for the downloading provider
-  useModelDownloadToast({
-    modelName: downloadingProvider || '',
-    displayName: downloadingProvider || '',
-    enabled: !!downloadingProvider,
-    onComplete: handleDownloadComplete,
-    onError: handleDownloadError,
-  });
-
-  const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);
-  const [providerToDelete, setProviderToDelete] = useState<string | null>(null);
-
-  const downloadMutation = useMutation({
-    mutationFn: async (providerType: string) => {
-      return await apiClient.downloadProvider(providerType);
-    },
-    onSuccess: (_, providerType) => {
-      setDownloadingProvider(providerType);
-      queryClient.invalidateQueries({ queryKey: ['providers'] });
-    },
-    onError: (error: Error) => {
-      toast({
-        title: 'Download failed',
-        description: error.message,
-        variant: 'destructive',
-      });
-    },
-  });
-
-  const startMutation = useMutation({
-    mutationFn: async (providerType: string) => {
-      return await apiClient.startProvider(providerType);
-    },
-    onSuccess: () => {
-      queryClient.invalidateQueries({ queryKey: ['activeProvider'] });
-      toast({
-        title: 'Provider started',
-        description: 'The provider has been started successfully',
-      });
-    },
-    onError: (error: Error) => {
-      toast({
-        title: 'Failed to start provider',
-        description: error.message,
-        variant: 'destructive',
-      });
-    },
-  });
-
-  const deleteMutation = useMutation({
-    mutationFn: async (providerType: string) => {
-      return await apiClient.deleteProvider(providerType);
-    },
-    onSuccess: () => {
-      queryClient.invalidateQueries({ queryKey: ['providers'] });
-      toast({
-        title: 'Provider deleted',
-        description: 'The provider has been deleted successfully',
-      });
-    },
-    onError: (error: Error) => {
-      toast({
-        title: 'Failed to delete provider',
-        description: error.message,
-        variant: 'destructive',
-      });
-    },
-  });
-
-  const handleDownload = async (providerType: string) => {
-    downloadMutation.mutate(providerType);
-  };
-
-  const handleStart = async (providerType: string) => {
-    startMutation.mutate(providerType);
-  };
-
-  const handleDelete = (providerType: string) => {
-    setProviderToDelete(providerType);
-    setDeleteDialogOpen(true);
-  };
-
-  const confirmDelete = () => {
-    if (providerToDelete) {
-      deleteMutation.mutate(providerToDelete);
-      setDeleteDialogOpen(false);
-      setProviderToDelete(null);
-    }
-  };
-
-  if (isLoading) {
-    return (
-      <Card>
-        <CardHeader>
-          <CardTitle>TTS Provider</CardTitle>
-          <CardDescription>Choose how Voicebox generates speech</CardDescription>
-        </CardHeader>
-        <CardContent>
-          <div className="flex items-center justify-center py-8">
-            <Icon icon="svg-spinners:ring-resize" className="h-6 w-6 animate-spin" />
-          </div>
-        </CardContent>
-      </Card>
-    );
-  }
-
-  const installedProviders = providersData?.installed || [];
-
-  // Determine current active provider
-  const currentProvider = activeProvider?.provider;
-  console.log('currentProvider', currentProvider);
-  const selectedProvider = currentProvider as ProviderType;
-
-  const isStarting = startMutation.isPending;
-
-  return (
-    <>
-      <Card>
-        <CardHeader>
-          <CardTitle>TTS Provider</CardTitle>
-          <CardDescription>Choose how Voicebox generates speech.</CardDescription>
-        </CardHeader>
-        <CardContent className="relative">
-          {isStarting && (
-            <div className="absolute inset-0 bg-background/80 backdrop-blur-sm flex items-center justify-center z-10 rounded-lg">
-              <div className="flex items-center gap-2 text-muted-foreground">
-                <Icon icon="svg-spinners:ring-resize" className="h-5 w-5" />
-                <span>Starting provider...</span>
-              </div>
-            </div>
-          )}
-          <RadioGroup
-            value={selectedProvider}
-            onValueChange={(value) => handleStart(value)}
-            disabled={isStarting}
-          >
-            {/* PyTorch CUDA */}
-            <div className="flex items-center justify-between py-2">
-              <div className={`flex items-center space-x-3 flex-1 ${isMacOS() || !installedProviders.includes('pytorch-cuda') ? 'opacity-50' : ''}`}>
-                <RadioGroupItem value="pytorch-cuda" id="cuda" disabled={isMacOS() || isStarting || !installedProviders.includes('pytorch-cuda')} />
-                <Label
-                  htmlFor="cuda"
-                  className={`flex-1 ${isMacOS() || isStarting || !installedProviders.includes('pytorch-cuda') ? 'cursor-not-allowed' : 'cursor-pointer'}`}
-                >
-                  <div className="font-medium">PyTorch CUDA</div>
-                  <div className="text-sm text-muted-foreground">
-                    NVIDIA GPU-accelerated provider
-                  </div>
-                </Label>
-              </div>
-              <div className="flex items-center gap-2">
-                {isMacOS() && (
-                  <>
-                    <span className="text-xs text-muted-foreground">2.4GB</span>
-                    <Button size="sm" variant="secondary" disabled>
-                      Not Available on macOS
-                    </Button>
-                  </>
-                )}
-                {!isMacOS() && !installedProviders.includes('pytorch-cuda') && (
-                  <>
-                    <span className="text-xs text-muted-foreground">2.4GB</span>
-                    <Button
-                      onClick={() => handleDownload('pytorch-cuda')}
-                      size="sm"
-                      variant="outline"
-                      disabled={downloadingProvider === 'pytorch-cuda' || isStarting}
-                      className="shrink-0"
-                    >
-                      {downloadingProvider === 'pytorch-cuda' ? (
-                        <Icon icon="svg-spinners:ring-resize" className="h-4 w-4 animate-spin" />
-                      ) : (
-                        <>
-                          <HugeiconsIcon icon={Download01Icon} size={16} className="h-4 w-4 mr-2" />
-                          Download
-                        </>
-                      )}
-                    </Button>
-                  </>
-                )}
-                {installedProviders.includes('pytorch-cuda') && (
-                  <Button
-                    onClick={() => handleDelete('pytorch-cuda')}
-                    size="sm"
-                    variant="outline"
-                    disabled={isStarting}
-                    className="shrink-0"
-                  >
-                    <HugeiconsIcon icon={Delete01Icon} size={16} className="h-4 w-4 mr-2" />
-                    Uninstall
-                  </Button>
-                )}
-              </div>
-            </div>
-
-            {/* PyTorch CPU */}
-            <div className="flex items-center justify-between py-2">
-              <div className={`flex items-center space-x-3 flex-1 ${!installedProviders.includes('pytorch-cpu') ? 'opacity-50' : ''}`}>
-                <RadioGroupItem value="pytorch-cpu" id="cpu" disabled={isStarting || !installedProviders.includes('pytorch-cpu')} />
-                <Label
-                  htmlFor="cpu"
-                  className={`flex-1 ${isStarting || !installedProviders.includes('pytorch-cpu') ? 'cursor-not-allowed' : 'cursor-pointer'}`}
-                >
-                  <div className="font-medium">PyTorch CPU</div>
-                  <div className="text-sm text-muted-foreground">
-                    Works on any system, slower inference
-                  </div>
-                </Label>
-              </div>
-              <div className="flex items-center gap-2">
-                {!installedProviders.includes('pytorch-cpu') && (
-                  <>
-                    <span className="text-xs text-muted-foreground">242MB</span>
-                    <Button
-                      onClick={() => handleDownload('pytorch-cpu')}
-                      size="sm"
-                      variant="outline"
-                      disabled={downloadingProvider === 'pytorch-cpu' || isStarting}
-                      className="shrink-0"
-                    >
-                      {downloadingProvider === 'pytorch-cpu' ? (
-                        <Icon icon="svg-spinners:ring-resize" className="h-4 w-4 animate-spin" />
-                      ) : (
-                        <>
-                          <HugeiconsIcon icon={Download01Icon} size={16} className="h-4 w-4 mr-2" />
-                          Download
-                        </>
-                      )}
-                    </Button>
-                  </>
-                )}
-                {installedProviders.includes('pytorch-cpu') && (
-                  <Button
-                    onClick={() => handleDelete('pytorch-cpu')}
-                    size="sm"
-                    variant="outline"
-                    disabled={isStarting}
-                    className="shrink-0"
-                  >
-                    <HugeiconsIcon icon={Delete01Icon} size={16} className="h-4 w-4 mr-2" />
-                    Uninstall
-                  </Button>
-                )}
-              </div>
-            </div>
-
-            {/* MLX bundled (macOS Apple Silicon only) */}
-            <div className="flex items-center justify-between py-2">
-              <div className={`flex items-center space-x-3 flex-1 ${!isMacOS() ? 'opacity-50' : ''}`}>
-                <RadioGroupItem value="apple-mlx" id="mlx" disabled={isStarting || !isMacOS()} />
-                <Label
-                  htmlFor="mlx"
-                  className={`flex-1 ${isStarting || !isMacOS() ? 'cursor-not-allowed' : 'cursor-pointer'}`}
-                >
-                  <div className="font-medium">Apple MLX</div>
-                  <div className="text-sm text-muted-foreground">
-                    {isMacOS()
-                      ? 'Bundled with this version, optimized for Apple Silicon'
-                      : 'Only available on Apple Silicon'}
-                  </div>
-                </Label>
-              </div>
-              {!isMacOS() && (
-                <Button size="sm" variant="secondary" disabled>
-                  Not Available on {getPlatformName()}
-                </Button>
-              )}
-            </div>
-
-            {/* Remote */}
-            <div className="flex items-center justify-between py-2">
-              <div className="flex items-center space-x-3 flex-1 opacity-50">
-                <RadioGroupItem value="remote" id="remote" disabled />
-                <Label htmlFor="remote" className="flex-1 cursor-not-allowed">
-                  <div className="font-medium">Remote Server</div>
-                  <div className="text-sm text-muted-foreground">
-                    Connect to your own TTS server
-                  </div>
-                </Label>
-              </div>
-              <Button size="sm" variant="secondary" disabled>
-                Coming Soon
-              </Button>
-            </div>
-
-            {/* OpenAI */}
-            <div className="flex items-center justify-between py-2">
-              <div className="flex items-center space-x-3 flex-1 opacity-50">
-                <RadioGroupItem value="openai" id="openai" disabled />
-                <Label htmlFor="openai" className="flex-1 cursor-not-allowed">
-                  <div className="font-medium">OpenAI API</div>
-                  <div className="text-sm text-muted-foreground">Use OpenAI's TTS API</div>
-                </Label>
-              </div>
-              <Button size="sm" variant="secondary" disabled>
-                Coming Soon
-              </Button>
-            </div>
-          </RadioGroup>
-          <p className="text-xs text-muted-foreground mt-5">
-            Note: PyTorch and MLX use different versions of the same model. When switching between
-            them, you will need to redownload the model.
-          </p>
-        </CardContent>
-      </Card>
-
-      <AlertDialog open={deleteDialogOpen} onOpenChange={setDeleteDialogOpen}>
-        <AlertDialogContent>
-          <AlertDialogHeader>
-            <AlertDialogTitle>Delete Provider</AlertDialogTitle>
-            <AlertDialogDescription>
-              Are you sure you want to delete {providerToDelete}? This will remove the provider
-              binary from your system. You can download it again later if needed.
-            </AlertDialogDescription>
-          </AlertDialogHeader>
-          <AlertDialogFooter>
-            <AlertDialogCancel>Cancel</AlertDialogCancel>
-            <AlertDialogAction
-              onClick={confirmDelete}
-              className="bg-destructive text-destructive-foreground"
-            >
-              Delete
-            </AlertDialogAction>
-          </AlertDialogFooter>
-        </AlertDialogContent>
-      </AlertDialog>
-    </>
-  );
-}

app/src/components/ServerSettings/ServerStatus.tsx

@@ -1,18 +1,15 @@
-import { CancelCircleIcon } from '@hugeicons/core-free-icons';
-import { HugeiconsIcon } from '@hugeicons/react';
-import { Icon } from '@iconify/react';
+import { Loader2, XCircle } from 'lucide-react';
 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>
+    <Card role="region" aria-label="Server Status" tabIndex={0}>
       <CardHeader>
         <CardTitle>Server Status</CardTitle>
       </CardHeader>
@@ -22,24 +19,14 @@ 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">
-            <Icon icon="svg-spinners:ring-resize" className="h-4 w-4 animate-spin" />
+            <Loader2 className="h-4 w-4 animate-spin" />
             <span className="text-sm">Checking connection...</span>
           </div>
         ) : error ? (
           <div className="flex items-center gap-2">
-            <HugeiconsIcon icon={CancelCircleIcon} size={16} className="h-4 w-4 text-destructive" />
+            <XCircle className="h-4 w-4 text-destructive" />
             <span className="text-sm text-destructive">Connection failed: {error.message}</span>
           </div>
         ) : health ? (

app/src/components/ServerSettings/UpdateStatus.tsx

@@ -1,5 +1,4 @@
-import { HugeiconsIcon } from '@hugeicons/react';
-import { AlertCircleIcon, Download01Icon, Refresh01Icon } from '@hugeicons/core-free-icons';
+import { AlertCircle, Download, RefreshCw } from 'lucide-react';
 import { useEffect, useState } from 'react';
 import { Badge } from '@/components/ui/badge';
 import { Button } from '@/components/ui/button';
@@ -12,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
@@ -21,7 +21,7 @@ export function UpdateStatus() {
   }, [platform]);
 
   return (
-    <Card>
+    <Card role="region" aria-label="App Updates" tabIndex={0}>
       <CardHeader>
         <CardTitle>App Updates</CardTitle>
       </CardHeader>
@@ -29,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"
-          >
-            <HugeiconsIcon icon={Refresh01Icon} size={16} 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">
-            <HugeiconsIcon icon={Refresh01Icon} size={16} 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">
-            <HugeiconsIcon icon={AlertCircleIcon} size={16} 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">
-              <HugeiconsIcon icon={Download01Icon} size={16} 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">
-                <HugeiconsIcon icon={Download01Icon} size={16} 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">
-              <HugeiconsIcon icon={Refresh01Icon} size={16} 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,21 +1,25 @@
 import { ConnectionForm } from '@/components/ServerSettings/ConnectionForm';
-import { DataFolders } from '@/components/ServerSettings/DataFolders';
-import { ProviderSettings } from '@/components/ServerSettings/ProviderSettings';
-import { ServerStatus } from '@/components/ServerSettings/ServerStatus';
+import { GenerationSettings } from '@/components/ServerSettings/GenerationSettings';
+import { GpuAcceleration } from '@/components/ServerSettings/GpuAcceleration';
 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>
-      <ProviderSettings />
-      <DataFolders />
-      {platform.metadata.isTauri && <UpdateStatus />}
       <div className="py-8 text-center text-sm text-muted-foreground">
         Created by{' '}
         <a

app/src/components/Sidebar.tsx

@@ -1,37 +1,27 @@
-import {
-  Book01Icon,
-  Mic01Icon,
-  PackageIcon,
-  ServerStack01Icon,
-  SpeakerIcon,
-  VolumeHighIcon,
-} from '@hugeicons/core-free-icons';
-import { HugeiconsIcon } from '@hugeicons/react';
-import { Icon } from '@iconify/react';
 import { Link, useMatchRoute } from '@tanstack/react-router';
+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;
 }
 
 const tabs = [
-  { id: 'main', path: '/', icon: VolumeHighIcon, label: 'Generate' },
-  { id: 'stories', path: '/stories', icon: Book01Icon, label: 'Stories' },
-  { id: 'voices', path: '/voices', icon: Mic01Icon, label: 'Voices' },
-  { id: 'audio', path: '/audio', icon: SpeakerIcon, label: 'Audio' },
-  { id: 'models', path: '/models', icon: PackageIcon, label: 'Models' },
-  { id: 'server', path: '/server', icon: ServerStack01Icon, label: 'Server' },
+  { id: 'main', path: '/', icon: Volume2, label: 'Generate' },
+  { 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
@@ -42,7 +32,15 @@ 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 */}
@@ -51,40 +49,44 @@ export function Sidebar({ isMacOS }: SidebarProps) {
           const Icon = tab.icon;
           // For index route, use exact match; for others, use default matching
           const isActive =
-            tab.path === '/' ? matchRoute({ to: '/' }) : matchRoute({ to: tab.path });
+            tab.path === '/' ? matchRoute({ to: '/', exact: true }) : matchRoute({ to: tab.path });
 
           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}
             >
-              <HugeiconsIcon icon={Icon} size={20} 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) / 0.5)',
+                  }}
+                />
+              )}
+              <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',
-          )}
-        >
-          <Icon icon="svg-spinners:ring-resize" 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/StoriesTab.tsx

@@ -1,8 +1,11 @@
 import { FloatingGenerateBox } from '@/components/Generation/FloatingGenerateBox';
+import { usePlayerStore } from '@/stores/playerStore';
 import { StoryContent } from './StoryContent';
 import { StoryList } from './StoryList';
 
 export function StoriesTab() {
+  const audioUrl = usePlayerStore((state) => state.audioUrl);
+
   return (
     <div className="flex flex-col h-full min-h-0 overflow-hidden">
       {/* Main content area */}
@@ -18,7 +21,7 @@ export function StoriesTab() {
         </div>
 
         {/* Floating Generate Box - position is managed via storyStore.trackEditorHeight */}
-        <FloatingGenerateBox showVoiceSelector />
+        <FloatingGenerateBox showVoiceSelector isPlayerOpen={!!audioUrl} />
       </div>
     </div>
   );

app/src/components/StoriesTab/StoryChatItem.tsx

@@ -1,7 +1,7 @@
 import { useSortable } from '@dnd-kit/sortable';
 import { CSS } from '@dnd-kit/utilities';
-import { HugeiconsIcon } from '@hugeicons/react';
-import { DragDropVerticalIcon, MoreHorizontalIcon, PlayIcon, Delete01Icon } from '@hugeicons/core-free-icons';
+import { GripVertical, Mic, MoreHorizontal, Play, Trash2 } from 'lucide-react';
+import { useState } from 'react';
 import { Button } from '@/components/ui/button';
 import {
   DropdownMenu,
@@ -10,10 +10,10 @@ import {
   DropdownMenuTrigger,
 } from '@/components/ui/dropdown-menu';
 import { Textarea } from '@/components/ui/textarea';
-import { ProfileAvatar } from '@/components/VoiceProfiles/ProfileAvatar';
 import type { StoryItemDetail } from '@/lib/api/types';
 import { cn } from '@/lib/utils/cn';
 import { useStoryStore } from '@/stores/storyStore';
+import { useServerStore } from '@/stores/serverStore';
 
 interface StoryChatItemProps {
   item: StoryItemDetail;
@@ -35,6 +35,10 @@ export function StoryChatItem({
   isDragging,
 }: StoryChatItemProps) {
   const seek = useStoryStore((state) => state.seek);
+  const serverUrl = useServerStore((state) => state.serverUrl);
+  const [avatarError, setAvatarError] = useState(false);
+
+  const avatarUrl = `${serverUrl}/profiles/${item.profile_id}/avatar`;
 
   // Check if this item is currently playing based on timecode
   const itemStartMs = item.start_time_ms;
@@ -70,18 +74,27 @@ export function StoryChatItem({
           className="shrink-0 cursor-grab active:cursor-grabbing touch-none text-muted-foreground hover:text-foreground transition-colors"
           {...dragHandleProps}
         >
-          <HugeiconsIcon icon={DragDropVerticalIcon} size={20} className="h-5 w-5" />
+          <GripVertical className="h-5 w-5" />
         </button>
       )}
 
       {/* Voice Avatar */}
       <div className="shrink-0">
-        <ProfileAvatar
-          profileId={item.profile_id}
-          size="lg"
-          grayscale={!isCurrentlyPlaying}
-          alt={`${item.profile_name} avatar`}
-        />
+        <div className="h-10 w-10 rounded-full bg-muted flex items-center justify-center overflow-hidden">
+          {!avatarError ? (
+            <img
+              src={avatarUrl}
+              alt={`${item.profile_name} avatar`}
+              className={cn(
+                'h-full w-full object-cover transition-all duration-200',
+                !isCurrentlyPlaying && 'grayscale'
+              )}
+              onError={() => setAvatarError(true)}
+            />
+          ) : (
+            <Mic className="h-5 w-5 text-muted-foreground" />
+          )}
+        </div>
       </div>
 
       {/* Content */}
@@ -106,16 +119,16 @@ export function StoryChatItem({
         <DropdownMenu>
           <DropdownMenuTrigger asChild>
             <Button variant="ghost" size="icon" className="h-8 w-8" aria-label="Actions">
-              <HugeiconsIcon icon={MoreHorizontalIcon} size={16} className="h-4 w-4" />
+              <MoreHorizontal className="h-4 w-4" />
             </Button>
           </DropdownMenuTrigger>
           <DropdownMenuContent align="end">
             <DropdownMenuItem onClick={handlePlay}>
-              <HugeiconsIcon icon={PlayIcon} size={16} className="mr-2 h-4 w-4" />
+              <Play className="mr-2 h-4 w-4" />
               Play from here
             </DropdownMenuItem>
             <DropdownMenuItem onClick={onRemove} className="text-destructive focus:text-destructive">
-              <HugeiconsIcon icon={Delete01Icon} size={16} className="mr-2 h-4 w-4" />
+              <Trash2 className="mr-2 h-4 w-4" />
               Remove from Story
             </DropdownMenuItem>
           </DropdownMenuContent>

app/src/components/StoriesTab/StoryContent.tsx

@@ -13,9 +13,11 @@ import {
   sortableKeyboardCoordinates,
   verticalListSortingStrategy,
 } from '@dnd-kit/sortable';
-import { HugeiconsIcon } from '@hugeicons/react';
-import { Download01Icon, Add01Icon } from '@hugeicons/core-free-icons';
+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';
@@ -29,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';
 
@@ -41,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('');
@@ -54,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]);
 
@@ -268,11 +272,35 @@ 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">
-                <HugeiconsIcon icon={Add01Icon} size={16} className="mr-2 h-4 w-4" />
+                <Plus className="mr-2 h-4 w-4" />
                 Add
               </Button>
             </PopoverTrigger>
@@ -288,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) => (
@@ -317,7 +343,7 @@ export function StoryContent() {
               onClick={handleExportAudio}
               disabled={exportAudio.isPending}
             >
-              <HugeiconsIcon icon={Download01Icon} size={16} className="mr-2 h-4 w-4" />
+              <Download className="mr-2 h-4 w-4" />
               Export Audio
             </Button>
           )}

app/src/components/StoriesTab/StoryList.tsx

@@ -1,6 +1,5 @@
-import { HugeiconsIcon } from '@hugeicons/react';
-import { Add01Icon, Book01Icon, MoreHorizontalIcon, PencilIcon, Delete01Icon } from '@hugeicons/core-free-icons';
-import { useState, useMemo } from 'react';
+import { BookOpen, MoreHorizontal, Pencil, Plus, Trash2 } from 'lucide-react';
+import { useEffect, useState } from 'react';
 import {
   AlertDialog,
   AlertDialogAction,
@@ -30,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, useStory } 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';
@@ -40,7 +45,7 @@ export function StoryList() {
   const selectedStoryId = useStoryStore((state) => state.selectedStoryId);
   const setSelectedStoryId = useStoryStore((state) => state.setSelectedStoryId);
   const trackEditorHeight = useStoryStore((state) => state.trackEditorHeight);
-  const { data: currentStory } = useStory(selectedStoryId);
+  const { data: selectedStory } = useStory(selectedStoryId);
   const createStory = useCreateStory();
   const updateStory = useUpdateStory();
   const deleteStory = useDeleteStory();
@@ -57,15 +62,12 @@ export function StoryList() {
   const [newStoryDescription, setNewStoryDescription] = useState('');
   const { toast } = useToast();
 
-  // Calculate bottom padding to account for FloatingGenerateBox and StoryTrackEditor
-  const hasTrackEditor = currentStory && currentStory.items.length > 0;
-  const bottomPadding = useMemo(() => {
-    // FloatingGenerateBox height (~100px) + gap (24px)
-    const generateBoxHeight = 124;
-    // Track editor height when visible
-    const editorHeight = hasTrackEditor ? trackEditorHeight + 24 : 0;
-    return generateBoxHeight + editorHeight;
-  }, [hasTrackEditor, trackEditorHeight]);
+  // 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()) {
@@ -183,86 +185,98 @@ 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">
-          <HugeiconsIcon icon={Add01Icon} size={16} 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"
-        style={{ paddingBottom: `${bottomPadding}px` }}
+      {/* 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">
-            <HugeiconsIcon icon={Book01Icon} size={48} className="h-12 w-12 mx-auto mb-4 opacity-50" />
+            <BookOpen className="h-12 w-12 mx-auto mb-4 opacity-50" />
             <p className="text-sm">No stories yet</p>
             <p className="text-xs mt-2">Create your first story to get started</p>
           </div>
         ) : (
-          storyList.map((story) => (
-            <div
-              key={story.id}
-              className={cn(
-                'h-24 p-4 border rounded-2xl transition-colors group flex items-center',
-                selectedStoryId === story.id && 'bg-muted border-primary',
-              )}
-            >
-              <div className="flex items-start justify-between gap-2 w-full min-w-0">
-                <button
-                  type="button"
-                  className="flex-1 min-w-0 text-left cursor-pointer overflow-hidden"
-                  onClick={() => setSelectedStoryId(story.id)}
-                >
-                  <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>
-                </button>
-                <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()}
-                    >
-                      <HugeiconsIcon icon={MoreHorizontalIcon} size={16} className="h-4 w-4" />
-                    </Button>
-                  </DropdownMenuTrigger>
-                  <DropdownMenuContent align="end">
-                    <DropdownMenuItem onClick={() => handleEditClick(story)}>
-                      <HugeiconsIcon icon={PencilIcon} size={16} className="mr-2 h-4 w-4" />
-                      Edit
-                    </DropdownMenuItem>
-                    <DropdownMenuItem
-                      onClick={() => handleDeleteClick(story.id)}
-                      className="text-destructive focus:text-destructive"
-                    >
-                      <HugeiconsIcon icon={Delete01Icon} size={16} className="mr-2 h-4 w-4" />
-                      Delete
-                    </DropdownMenuItem>
-                  </DropdownMenuContent>
-                </DropdownMenu>
+                  <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>
               </div>
-            </div>
-          ))
+            ))}
+          </div>
         )}
       </div>
 

app/src/components/StoriesTab/StoryTrackEditor.tsx

@@ -1,18 +1,25 @@
-import { HugeiconsIcon } from '@hugeicons/react';
 import {
-  Copy01Icon,
-  DragDropHorizontalIcon,
-  RemoveIcon,
-  PauseIcon,
-  PlayIcon,
-  Add01Icon,
-  Scissor01Icon,
-  SquareIcon,
-  Delete01Icon,
-} from '@hugeicons/core-free-icons';
+  Check,
+  Copy,
+  GalleryVerticalEnd,
+  GripHorizontal,
+  Minus,
+  Pause,
+  Play,
+  Plus,
+  Scissors,
+  Square,
+  Trash2,
+} from 'lucide-react';
 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';
@@ -20,6 +27,7 @@ import {
   useDuplicateStoryItem,
   useMoveStoryItem,
   useRemoveStoryItem,
+  useSetStoryItemVersion,
   useSplitStoryItem,
   useTrimStoryItem,
 } from '@/lib/hooks/useStories';
@@ -29,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;
@@ -80,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
     });
@@ -89,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">
@@ -136,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);
@@ -724,7 +781,7 @@ export function StoryTrackEditor({ storyId, items }: StoryTrackEditorProps) {
           onMouseDown={handleResizeStart}
           aria-label="Resize track editor"
         >
-          <HugeiconsIcon icon={DragDropHorizontalIcon} size={12} className="h-3 w-3 text-muted-foreground/50 group-hover:text-muted-foreground" />
+          <GripHorizontal className="h-3 w-3 text-muted-foreground/50 group-hover:text-muted-foreground" />
         </button>
 
         {/* Toolbar */}
@@ -737,8 +794,9 @@ export function StoryTrackEditor({ storyId, items }: StoryTrackEditorProps) {
               className="h-7 w-7"
               onClick={handlePlayPause}
               title="Play/Pause (Space)"
+              aria-label={isCurrentlyPlaying ? 'Pause' : 'Play'}
             >
-              {isCurrentlyPlaying ? <HugeiconsIcon icon={PauseIcon} size={16} className="h-4 w-4" /> : <HugeiconsIcon icon={PlayIcon} size={16} className="h-4 w-4" />}
+              {isCurrentlyPlaying ? <Pause className="h-4 w-4" /> : <Play className="h-4 w-4" />}
             </Button>
             <Button
               variant="ghost"
@@ -746,8 +804,9 @@ export function StoryTrackEditor({ storyId, items }: StoryTrackEditorProps) {
               className="h-7 w-7"
               onClick={handleStop}
               disabled={!isCurrentlyPlaying}
+              aria-label="Stop"
             >
-              <HugeiconsIcon icon={SquareIcon} size={12} className="h-3 w-3" />
+              <Square className="h-3 w-3" />
             </Button>
             <span className="text-xs text-muted-foreground tabular-nums ml-2">
               {formatTime(currentTimeMs)} / {formatTime(totalDurationMs)}
@@ -763,8 +822,9 @@ export function StoryTrackEditor({ storyId, items }: StoryTrackEditorProps) {
                 className="h-7 w-7"
                 onClick={handleSplit}
                 title="Split at playhead (S)"
+                aria-label="Split at playhead"
               >
-                <HugeiconsIcon icon={Scissor01Icon} size={16} className="h-4 w-4" />
+                <Scissors className="h-4 w-4" />
               </Button>
               <Button
                 variant="ghost"
@@ -772,8 +832,9 @@ export function StoryTrackEditor({ storyId, items }: StoryTrackEditorProps) {
                 className="h-7 w-7"
                 onClick={handleDuplicate}
                 title="Duplicate (Cmd/Ctrl+D)"
+                aria-label="Duplicate clip"
               >
-                <HugeiconsIcon icon={Copy01Icon} size={16} className="h-4 w-4" />
+                <Copy className="h-4 w-4" />
               </Button>
               <Button
                 variant="ghost"
@@ -781,20 +842,76 @@ export function StoryTrackEditor({ storyId, items }: StoryTrackEditorProps) {
                 className="h-7 w-7"
                 onClick={handleDelete}
                 title="Delete (Delete/Backspace)"
+                aria-label="Delete clip"
               >
-                <HugeiconsIcon icon={Delete01Icon} size={16} className="h-4 w-4" />
+                <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>
           )}
 
           {/* Zoom controls - right side */}
           <div className="flex items-center gap-2">
             <span className="text-xs text-muted-foreground">Zoom:</span>
-            <Button variant="ghost" size="icon" className="h-6 w-6" onClick={handleZoomOut}>
-              <HugeiconsIcon icon={RemoveIcon} size={12} className="h-3 w-3" />
+            <Button
+              variant="ghost"
+              size="icon"
+              className="h-6 w-6"
+              onClick={handleZoomOut}
+              aria-label="Zoom out"
+            >
+              <Minus className="h-3 w-3" />
             </Button>
-            <Button variant="ghost" size="icon" className="h-6 w-6" onClick={handleZoomIn}>
-              <HugeiconsIcon icon={Add01Icon} size={12} className="h-3 w-3" />
+            <Button
+              variant="ghost"
+              size="icon"
+              className="h-6 w-6"
+              onClick={handleZoomIn}
+              aria-label="Zoom in"
+            >
+              <Plus className="h-3 w-3" />
             </Button>
           </div>
         </div>
@@ -838,7 +955,7 @@ export function StoryTrackEditor({ storyId, items }: StoryTrackEditorProps) {
               type="button"
               className="h-6 border-b bg-muted/20 sticky top-0 z-10 cursor-pointer text-left"
               style={{ width: `${timelineWidth}px` }}
-              onClick={(e) => handleTimelineClick(e as unknown as React.MouseEvent<HTMLDivElement>)}
+              onClick={handleTimelineClick}
               aria-label="Seek timeline"
             >
               {timeMarkers.map((ms) => (
@@ -879,7 +996,7 @@ export function StoryTrackEditor({ storyId, items }: StoryTrackEditorProps) {
               <button
                 type="button"
                 className="absolute inset-0 z-0 cursor-pointer"
-                onClick={(e) => handleTimelineClick(e as unknown as React.MouseEvent<HTMLDivElement>)}
+                onClick={handleTimelineClick}
                 aria-label="Seek timeline"
               />
 
@@ -942,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/AudioSampleRecording.tsx

@@ -1,5 +1,4 @@
-import { HugeiconsIcon } from '@hugeicons/react';
-import { Mic01Icon, PauseIcon, PlayIcon, SquareIcon } from '@hugeicons/core-free-icons';
+import { Mic, Pause, Play, Square } from 'lucide-react';
 import { memo, useEffect, useState } from 'react';
 import { Visualizer } from 'react-sound-visualizer';
 import { Button } from '@/components/ui/button';
@@ -59,6 +58,7 @@ export function AudioSampleRecording({
   // Request microphone access when component mounts
   useEffect(() => {
     if (!showWaveform) return;
+    if (!navigator.mediaDevices || !navigator.mediaDevices.getUserMedia) return;
 
     let stream: MediaStream | null = null;
 
@@ -96,7 +96,7 @@ export function AudioSampleRecording({
                 size="lg"
                 className="relative z-10 flex items-center gap-2"
               >
-                <HugeiconsIcon icon={Mic01Icon} size={20} className="h-5 w-5" />
+                <Mic className="h-5 w-5" />
                 Start Recording
               </Button>
               <p className="relative z-10 text-sm text-muted-foreground text-center">
@@ -123,7 +123,7 @@ export function AudioSampleRecording({
                 onClick={onStop}
                 className="relative z-10 flex items-center gap-2 bg-accent text-accent-foreground hover:bg-accent/90"
               >
-                <HugeiconsIcon icon={SquareIcon} size={16} className="h-4 w-4" />
+                <Square className="h-4 w-4" />
                 Stop Recording
               </Button>
               <p className="relative z-10 text-sm text-muted-foreground text-center">
@@ -135,13 +135,19 @@ export function AudioSampleRecording({
           {file && !isRecording && (
             <div className="flex flex-col items-center justify-center gap-4 p-4 border-2 border-primary rounded-lg bg-primary/5 min-h-[180px]">
               <div className="flex items-center gap-2">
-                <HugeiconsIcon icon={Mic01Icon} size={20} className="h-5 w-5 text-primary" />
+                <Mic className="h-5 w-5 text-primary" />
                 <span className="font-medium">Recording complete</span>
               </div>
               <p className="text-sm text-muted-foreground text-center">File: {file.name}</p>
               <div className="flex gap-2">
-                <Button type="button" size="icon" variant="outline" onClick={onPlayPause}>
-                  {isPlaying ? <HugeiconsIcon icon={PauseIcon} size={16} className="h-4 w-4" /> : <HugeiconsIcon icon={PlayIcon} size={16} className="h-4 w-4" />}
+                <Button
+                  type="button"
+                  size="icon"
+                  variant="outline"
+                  onClick={onPlayPause}
+                  aria-label={isPlaying ? 'Pause' : 'Play'}
+                >
+                  {isPlaying ? <Pause className="h-4 w-4" /> : <Play className="h-4 w-4" />}
                 </Button>
                 <Button
                   type="button"
@@ -150,7 +156,7 @@ export function AudioSampleRecording({
                   disabled={isTranscribing}
                   className="flex items-center gap-2"
                 >
-                  <HugeiconsIcon icon={Mic01Icon} size={16} className="h-4 w-4" />
+                  <Mic className="h-4 w-4" />
                   {isTranscribing ? 'Transcribing...' : 'Transcribe'}
                 </Button>
                 <Button

app/src/components/VoiceProfiles/AudioSampleSystem.tsx

@@ -1,5 +1,4 @@
-import { HugeiconsIcon } from '@hugeicons/react';
-import { Mic01Icon, DeskIcon, PauseIcon, PlayIcon, SquareIcon } from '@hugeicons/core-free-icons';
+import { Mic, Monitor, Pause, Play, Square } from 'lucide-react';
 import { Button } from '@/components/ui/button';
 import { FormControl, FormItem, FormMessage } from '@/components/ui/form';
 import { formatAudioDuration } from '@/lib/utils/audio';
@@ -36,7 +35,7 @@ export function AudioSampleSystem({
           {!isRecording && !file && (
             <div className="flex flex-col items-center justify-center gap-4 p-4 border-2 border-dashed rounded-lg min-h-[180px]">
               <Button type="button" onClick={onStart} size="lg" className="flex items-center gap-2">
-                <HugeiconsIcon icon={DeskIcon} size={20} className="h-5 w-5" />
+                <Monitor className="h-5 w-5" />
                 Start Capture
               </Button>
               <p className="text-sm text-muted-foreground text-center">
@@ -61,7 +60,7 @@ export function AudioSampleSystem({
                 variant="destructive"
                 className="flex items-center gap-2"
               >
-                <HugeiconsIcon icon={SquareIcon} size={16} className="h-4 w-4" />
+                <Square className="h-4 w-4" />
                 Stop Capture
               </Button>
               <p className="text-sm text-muted-foreground text-center">
@@ -73,13 +72,19 @@ export function AudioSampleSystem({
           {file && !isRecording && (
             <div className="flex flex-col items-center justify-center gap-4 p-4 border-2 border-primary rounded-lg bg-primary/5 min-h-[180px]">
               <div className="flex items-center gap-2">
-                <HugeiconsIcon icon={DeskIcon} size={20} className="h-5 w-5 text-primary" />
+                <Monitor className="h-5 w-5 text-primary" />
                 <span className="font-medium">Capture complete</span>
               </div>
               <p className="text-sm text-muted-foreground text-center">File: {file.name}</p>
               <div className="flex gap-2">
-                <Button type="button" size="icon" variant="outline" onClick={onPlayPause}>
-                  {isPlaying ? <HugeiconsIcon icon={PauseIcon} size={16} className="h-4 w-4" /> : <HugeiconsIcon icon={PlayIcon} size={16} className="h-4 w-4" />}
+                <Button
+                  type="button"
+                  size="icon"
+                  variant="outline"
+                  onClick={onPlayPause}
+                  aria-label={isPlaying ? 'Pause' : 'Play'}
+                >
+                  {isPlaying ? <Pause className="h-4 w-4" /> : <Play className="h-4 w-4" />}
                 </Button>
                 <Button
                   type="button"
@@ -88,7 +93,7 @@ export function AudioSampleSystem({
                   disabled={isTranscribing}
                   className="flex items-center gap-2"
                 >
-                  <HugeiconsIcon icon={Mic01Icon} size={16} className="h-4 w-4" />
+                  <Mic className="h-4 w-4" />
                   {isTranscribing ? 'Transcribing...' : 'Transcribe'}
                 </Button>
                 <Button

app/src/components/VoiceProfiles/AudioSampleUpload.tsx

@@ -1,5 +1,4 @@
-import { HugeiconsIcon } from '@hugeicons/react';
-import { Mic01Icon, PauseIcon, PlayIcon, Upload01Icon } from '@hugeicons/core-free-icons';
+import { Mic, Pause, Play, Upload } from 'lucide-react';
 import { useRef, useState } from 'react';
 import { Button } from '@/components/ui/button';
 import { FormControl, FormItem, FormMessage } from '@/components/ui/form';
@@ -90,7 +89,7 @@ export function AudioSampleUpload({
                   onClick={() => fileInputRef.current?.click()}
                   className="flex items-center gap-2"
                 >
-                  <HugeiconsIcon icon={Upload01Icon} size={20} className="h-5 w-5" />
+                  <Upload className="h-5 w-5" />
                   Choose File
                 </Button>
                 <p className="text-sm text-muted-foreground text-center">
@@ -100,7 +99,7 @@ export function AudioSampleUpload({
             ) : (
               <>
                 <div className="flex items-center gap-2">
-                  <HugeiconsIcon icon={Upload01Icon} size={20} className="h-5 w-5 text-primary" />
+                  <Upload className="h-5 w-5 text-primary" />
                   <span className="font-medium">File uploaded</span>
                 </div>
                 <p className="text-sm text-muted-foreground text-center">File: {file.name}</p>
@@ -111,8 +110,9 @@ export function AudioSampleUpload({
                     variant="outline"
                     onClick={onPlayPause}
                     disabled={isValidating}
+                    aria-label={isPlaying ? 'Pause' : 'Play'}
                   >
-                    {isPlaying ? <HugeiconsIcon icon={PauseIcon} size={16} className="h-4 w-4" /> : <HugeiconsIcon icon={PlayIcon} size={16} className="h-4 w-4" />}
+                    {isPlaying ? <Pause className="h-4 w-4" /> : <Play className="h-4 w-4" />}
                   </Button>
                   <Button
                     type="button"
@@ -121,7 +121,7 @@ export function AudioSampleUpload({
                     disabled={isTranscribing || isValidating || isDisabled}
                     className="flex items-center gap-2"
                   >
-                    <HugeiconsIcon icon={Mic01Icon} size={16} className="h-4 w-4" />
+                    <Mic className="h-4 w-4" />
                     {isTranscribing ? 'Transcribing...' : 'Transcribe'}
                   </Button>
                   <Button

app/src/components/VoiceProfiles/ProfileAvatar.tsx

@@ -1,80 +0,0 @@
-import { HugeiconsIcon } from '@hugeicons/react';
-import { Mic01Icon } from '@hugeicons/core-free-icons';
-import { useState } from 'react';
-import { cn } from '@/lib/utils/cn';
-import { useServerStore } from '@/stores/serverStore';
-
-interface ProfileAvatarProps {
-  profileId: string;
-  avatarPath?: string | null;
-  size?: 'sm' | 'md' | 'lg' | 'xl';
-  grayscale?: boolean;
-  className?: string;
-  alt?: string;
-}
-
-const sizeClasses = {
-  sm: 'h-6 w-6',
-  md: 'h-8 w-8',
-  lg: 'h-10 w-10',
-  xl: 'h-24 w-24',
-};
-
-const iconSizes = {
-  sm: 14,
-  md: 16,
-  lg: 20,
-  xl: 40,
-};
-
-const iconClassNames = {
-  sm: 'h-3.5 w-3.5',
-  md: 'h-4 w-4',
-  lg: 'h-5 w-5',
-  xl: 'h-10 w-10',
-};
-
-export function ProfileAvatar({
-  profileId,
-  avatarPath,
-  size = 'md',
-  grayscale = false,
-  className,
-  alt = 'Profile avatar',
-}: ProfileAvatarProps) {
-  const [avatarError, setAvatarError] = useState(false);
-  const serverUrl = useServerStore((state) => state.serverUrl);
-
-  // If avatarPath is explicitly null or empty string, don't try to load avatar
-  // Otherwise, always try to load (avatarPath might not be available in all contexts)
-  const avatarUrl =
-    avatarPath === null || avatarPath === '' ? null : `${serverUrl}/profiles/${profileId}/avatar`;
-
-  return (
-    <div
-      className={cn(
-        sizeClasses[size],
-        'rounded-full bg-muted flex items-center justify-center shrink-0 overflow-hidden',
-        className,
-      )}
-    >
-      {avatarUrl && !avatarError ? (
-        <img
-          src={avatarUrl}
-          alt={alt}
-          className={cn(
-            'h-full w-full object-cover transition-all duration-200',
-            grayscale && 'grayscale',
-          )}
-          onError={() => setAvatarError(true)}
-        />
-      ) : (
-        <HugeiconsIcon
-          icon={Mic01Icon}
-          size={iconSizes[size]}
-          className={cn(iconClassNames[size], 'text-muted-foreground')}
-        />
-      )}
-    </div>
-  );
-}

app/src/components/VoiceProfiles/ProfileCard.tsx

@@ -1,5 +1,4 @@
-import { HugeiconsIcon } from '@hugeicons/react';
-import { Download01Icon, Edit01Icon, Delete01Icon } from '@hugeicons/core-free-icons';
+import { Download, Edit, Sparkles, Trash2 } from 'lucide-react';
 import { useState } from 'react';
 import { Badge } from '@/components/ui/badge';
 import { Button } from '@/components/ui/button';
@@ -13,7 +12,6 @@ import {
   DialogHeader,
   DialogTitle,
 } from '@/components/ui/dialog';
-import { ProfileAvatar } from '@/components/VoiceProfiles/ProfileAvatar';
 import type { VoiceProfileResponse } from '@/lib/api/types';
 import { useDeleteProfile, useExportProfile } from '@/lib/hooks/useProfiles';
 import { cn } from '@/lib/utils/cn';
@@ -25,6 +23,7 @@ interface ProfileCardProps {
 
 export function ProfileCard({ profile }: ProfileCardProps) {
   const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);
+
   const deleteProfile = useDeleteProfile();
   const exportProfile = useExportProfile();
   const setEditingProfileId = useUIStore((state) => state.setEditingProfileId);
@@ -58,24 +57,35 @@ export function ProfileCard({ profile }: ProfileCardProps) {
     exportProfile.mutate(profile.id);
   };
 
+  const handleKeyDown = (e: React.KeyboardEvent) => {
+    const target = e.target as HTMLElement;
+    if (target.closest('button')) return;
+    if (e.key === 'Enter' || e.key === ' ') {
+      e.preventDefault();
+      handleSelect();
+    }
+  };
+
+  const selectLabel = isSelected
+    ? `${profile.name}, ${profile.language}. Selected as voice for generation.`
+    : `${profile.name}, ${profile.language}. Select as voice for generation.`;
+
   return (
     <>
       <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}
+        role="button"
+        aria-label={selectLabel}
+        aria-pressed={isSelected}
+        onKeyDown={handleKeyDown}
       >
         <CardHeader className="p-3 pb-2">
-          <CardTitle className="flex items-center gap-1.5 text-base font-medium">
-            <ProfileAvatar
-              profileId={profile.id}
-              avatarPath={profile.avatar_path}
-              size="sm"
-              grayscale={!isSelected}
-              alt={`${profile.name} avatar`}
-            />
+          <CardTitle className="text-base font-medium">
             <span className="break-words">{profile.name}</span>
           </CardTitle>
         </CardHeader>
@@ -83,20 +93,23 @@ 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
-              icon={(props) => <HugeiconsIcon icon={Download01Icon} size={14} {...props} />}
+              icon={Download}
               onClick={handleExport}
               disabled={exportProfile.isPending}
               aria-label="Export profile"
             />
             <CircleButton
-              icon={(props) => <HugeiconsIcon icon={Edit01Icon} size={14} {...props} />}
+              icon={Edit}
               onClick={(e) => {
                 e.stopPropagation();
                 handleEdit();
@@ -104,7 +117,7 @@ export function ProfileCard({ profile }: ProfileCardProps) {
               aria-label="Edit profile"
             />
             <CircleButton
-              icon={(props) => <HugeiconsIcon icon={Delete01Icon} size={14} {...props} />}
+              icon={Trash2}
               onClick={handleDeleteClick}
               disabled={deleteProfile.isPending}
               aria-label="Delete profile"

app/src/components/VoiceProfiles/ProfileForm.tsx

@@ -1,9 +1,9 @@
 import { zodResolver } from '@hookform/resolvers/zod';
-import { HugeiconsIcon } from '@hugeicons/react';
-import { Edit02Icon, Mic01Icon, DeskIcon, Upload01Icon, Cancel01Icon } from '@hugeicons/core-free-icons';
+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,
@@ -31,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';
@@ -44,7 +46,7 @@ import {
 } from '@/lib/hooks/useProfiles';
 import { useSystemAudioCapture } from '@/lib/hooks/useSystemAudioCapture';
 import { useTranscription } from '@/lib/hooks/useTranscription';
-import { formatAudioDuration, getAudioDuration } from '@/lib/utils/audio';
+import { convertToWav, formatAudioDuration, getAudioDuration } from '@/lib/utils/audio';
 import { usePlatform } from '@/platform/PlatformContext';
 import { useServerStore } from '@/stores/serverStore';
 import { type ProfileFormDraft, useUIStore } from '@/stores/uiStore';
@@ -126,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),
@@ -281,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({
@@ -436,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.`,
@@ -506,10 +530,23 @@ export function ProfileForm() {
           language: data.language,
         });
 
+        // Convert non-WAV uploads to WAV so the backend can always use soundfile.
+        // Recorded audio is already WAV (from useAudioRecording's convertToWav call).
+        let fileToUpload: File = sampleFile;
+        if (!sampleFile.type.includes('wav') && !sampleFile.name.toLowerCase().endsWith('.wav')) {
+          try {
+            const wavBlob = await convertToWav(sampleFile);
+            const wavName = sampleFile.name.replace(/\.[^.]+$/, '.wav');
+            fileToUpload = new File([wavBlob], wavName, { type: 'audio/wav' });
+          } catch {
+            // If browser can't decode the format, send the original and let the backend try.
+          }
+        }
+
         try {
           await addSample.mutateAsync({
             profileId: profile.id,
-            file: sampleFile,
+            file: fileToUpload,
             referenceText: referenceText,
           });
 
@@ -636,7 +673,7 @@ export function ProfileForm() {
                     setSampleMode('record');
                   }}
                 >
-                  <HugeiconsIcon icon={Cancel01Icon} size={12} className="h-3 w-3 mr-1" />
+                  <X className="h-3 w-3 mr-1" />
                   Discard
                 </Button>
               </div>
@@ -669,16 +706,16 @@ export function ProfileForm() {
                           className={`grid w-full ${platform.metadata.isTauri && isSystemAudioSupported ? 'grid-cols-3' : 'grid-cols-2'}`}
                         >
                           <TabsTrigger value="upload" className="flex items-center gap-2">
-                            <HugeiconsIcon icon={Upload01Icon} size={16} className="h-4 w-4 shrink-0" />
+                            <Upload className="h-4 w-4 shrink-0" />
                             Upload
                           </TabsTrigger>
                           <TabsTrigger value="record" className="flex items-center gap-2">
-                            <HugeiconsIcon icon={Mic01Icon} size={16} className="h-4 w-4 shrink-0" />
+                            <Mic className="h-4 w-4 shrink-0" />
                             Record
                           </TabsTrigger>
                           {platform.metadata.isTauri && isSystemAudioSupported && (
                             <TabsTrigger value="system" className="flex items-center gap-2">
-                              <HugeiconsIcon icon={DeskIcon} size={16} className="h-4 w-4 shrink-0" />
+                              <Monitor className="h-4 w-4 shrink-0" />
                               System Audio
                             </TabsTrigger>
                           )}
@@ -799,7 +836,7 @@ export function ProfileForm() {
                                     className="h-full w-full object-cover"
                                   />
                                 ) : (
-                                  <HugeiconsIcon icon={Mic01Icon} size={40} className="h-10 w-10 text-muted-foreground" />
+                                  <Mic className="h-10 w-10 text-muted-foreground" />
                                 )}
                               </div>
                               <button
@@ -807,7 +844,7 @@ export function ProfileForm() {
                                 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"
                               >
-                                <HugeiconsIcon icon={Edit02Icon} size={24} className="h-6 w-6 text-accent-foreground" />
+                                <Edit2 className="h-6 w-6 text-accent-foreground" />
                               </button>
                               {(avatarPreview || editingProfile?.avatar_path) && (
                                 <button
@@ -816,7 +853,7 @@ export function ProfileForm() {
                                   disabled={deleteAvatar.isPending}
                                   className="absolute bottom-0 right-0 h-6 w-6 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"
                                 >
-                                  <HugeiconsIcon icon={Cancel01Icon} size={14} className="h-3.5 w-3.5" />
+                                  <X className="h-3.5 w-3.5" />
                                 </button>
                               )}
                             </div>
@@ -886,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

@@ -1,5 +1,4 @@
-import { HugeiconsIcon } from '@hugeicons/react';
-import { Mic01Icon, SparklesIcon } from '@hugeicons/core-free-icons';
+import { Mic, Sparkles } from 'lucide-react';
 import { Button } from '@/components/ui/button';
 import { Card, CardContent } from '@/components/ui/card';
 import { useProfiles } from '@/lib/hooks/useProfiles';
@@ -31,20 +30,22 @@ export function ProfileList() {
         {allProfiles.length === 0 ? (
           <Card>
             <CardContent className="flex flex-col items-center justify-center py-12">
-              <HugeiconsIcon icon={Mic01Icon} size={48} className="h-12 w-12 text-muted-foreground mb-4" />
+              <Mic className="h-12 w-12 text-muted-foreground mb-4" />
               <p className="text-muted-foreground mb-4">
                 No voice profiles yet. Create your first profile to get started.
               </p>
               <Button onClick={() => setDialogOpen(true)}>
-                <HugeiconsIcon icon={SparklesIcon} size={16} className="mr-2 h-4 w-4" />
+                <Sparkles className="mr-2 h-4 w-4" />
                 Create Voice
               </Button>
             </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/VoiceProfiles/SampleList.tsx

@@ -1,5 +1,4 @@
-import { HugeiconsIcon } from '@hugeicons/react';
-import { CheckmarkCircle01Icon, Edit01Icon, PauseIcon, PlayIcon, Add01Icon, Delete01Icon, VolumeHighIcon, Cancel01Icon } from '@hugeicons/core-free-icons';
+import { Check, Edit, Pause, Play, Plus, Trash2, Volume2, X } from 'lucide-react';
 import { useEffect, useRef, useState } from 'react';
 import { Button } from '@/components/ui/button';
 import { CircleButton } from '@/components/ui/circle-button';
@@ -103,8 +102,9 @@ function MiniSamplePlayer({ audioUrl }: MiniSamplePlayerProps) {
           className="h-7 w-7 shrink-0"
           onClick={handlePlayPause}
           disabled={isLoading}
+          aria-label={isPlaying ? 'Pause sample' : 'Play sample'}
         >
-          {isPlaying ? <HugeiconsIcon icon={PauseIcon} size={14} className="h-3.5 w-3.5" /> : <HugeiconsIcon icon={PlayIcon} size={14} className="h-3.5 w-3.5 ml-0.5" />}
+          {isPlaying ? <Pause className="h-3.5 w-3.5" /> : <Play className="h-3.5 w-3.5 ml-0.5" />}
         </Button>
 
         <div className="flex-1 min-w-0 flex items-center gap-2">
@@ -114,6 +114,8 @@ function MiniSamplePlayer({ audioUrl }: MiniSamplePlayerProps) {
             max={100}
             step={0.1}
             className="flex-1"
+            aria-label="Sample playback position"
+            aria-valuetext={`${formatAudioDuration(currentTime)} of ${formatAudioDuration(duration)}`}
           />
           <div className="flex items-center gap-1 text-xs text-muted-foreground shrink-0 min-w-[70px]">
             <span className="font-mono">{formatAudioDuration(currentTime)}</span>
@@ -129,8 +131,9 @@ function MiniSamplePlayer({ audioUrl }: MiniSamplePlayerProps) {
           className="h-7 w-7 shrink-0"
           onClick={handleStop}
           title="Stop"
+          aria-label="Stop playback"
         >
-          <HugeiconsIcon icon={Cancel01Icon} size={14} className="h-3.5 w-3.5" />
+          <X className="h-3.5 w-3.5" />
         </Button>
       </div>
     </div>
@@ -210,7 +213,7 @@ export function SampleList({ profileId }: SampleListProps) {
     <div className="space-y-4 pt-4">
       {samples && samples.length === 0 ? (
         <div className="flex flex-col items-center justify-center py-8 text-center border border-dashed rounded-lg">
-          <HugeiconsIcon icon={VolumeHighIcon} size={32} className="h-8 w-8 text-muted-foreground/50 mb-2" />
+          <Volume2 className="h-8 w-8 text-muted-foreground/50 mb-2" />
           <p className="text-sm text-muted-foreground">No samples yet</p>
           <p className="text-xs text-muted-foreground/70 mt-1">
             Add your first audio sample to get started
@@ -233,7 +236,7 @@ export function SampleList({ profileId }: SampleListProps) {
                   /* Edit Mode */
                   <div className="p-4 space-y-3">
                     <div className="flex items-center gap-2 text-xs text-muted-foreground mb-2">
-                      <HugeiconsIcon icon={Edit01Icon} size={12} className="h-3 w-3" />
+                      <Edit className="h-3 w-3" />
                       <span>Editing transcription</span>
                     </div>
                     <Textarea
@@ -251,7 +254,7 @@ export function SampleList({ profileId }: SampleListProps) {
                         onClick={handleCancelEdit}
                         disabled={updateSample.isPending}
                       >
-                        <HugeiconsIcon icon={Cancel01Icon} size={16} className="h-4 w-4 mr-1" />
+                        <X className="h-4 w-4 mr-1" />
                         Cancel
                       </Button>
                       <Button
@@ -260,7 +263,7 @@ export function SampleList({ profileId }: SampleListProps) {
                         onClick={() => handleSaveEdit(sample.id)}
                         disabled={updateSample.isPending}
                       >
-                        <HugeiconsIcon icon={CheckmarkCircle01Icon} size={16} className="h-4 w-4 mr-1" />
+                        <Check className="h-4 w-4 mr-1" />
                         {updateSample.isPending ? 'Saving...' : 'Save'}
                       </Button>
                     </div>
@@ -279,12 +282,12 @@ export function SampleList({ profileId }: SampleListProps) {
                       {/* Action Buttons */}
                       <div className="shrink-0 flex items-center gap-0.5 opacity-0 group-hover:opacity-100 transition-opacity">
                         <CircleButton
-                          icon={(props) => <HugeiconsIcon icon={Edit01Icon} size={14} {...props} />}
+                          icon={Edit}
                           title="Edit transcription"
                           onClick={() => handleStartEdit(sample.id, sample.reference_text)}
                         />
                         <CircleButton
-                          icon={(props) => <HugeiconsIcon icon={Delete01Icon} size={14} {...props} />}
+                          icon={Trash2}
                           title="Delete sample"
                           onClick={() => handleDeleteClick(sample.id)}
                           disabled={deleteSample.isPending}
@@ -313,7 +316,7 @@ export function SampleList({ profileId }: SampleListProps) {
         className="w-full"
         onClick={() => setUploadOpen(true)}
       >
-        <HugeiconsIcon icon={Add01Icon} size={16} className="mr-2 h-4 w-4" />
+        <Plus className="mr-2 h-4 w-4" />
         Add Sample
       </Button>
 

app/src/components/VoiceProfiles/SampleUpload.tsx

@@ -1,6 +1,5 @@
 import { zodResolver } from '@hookform/resolvers/zod';
-import { HugeiconsIcon } from '@hugeicons/react';
-import { Mic01Icon, DeskIcon, Upload01Icon } from '@hugeicons/core-free-icons';
+import { Mic, Monitor, Upload } from 'lucide-react';
 import { useEffect, useState } from 'react';
 import { useForm } from 'react-hook-form';
 import * as z from 'zod';
@@ -237,16 +236,16 @@ export function SampleUpload({ profileId, open, onOpenChange }: SampleUploadProp
                 className={`grid w-full ${platform.metadata.isTauri && isSystemAudioSupported ? 'grid-cols-3' : 'grid-cols-2'}`}
               >
                 <TabsTrigger value="upload" className="flex items-center gap-2">
-                  <HugeiconsIcon icon={Upload01Icon} size={16} className="h-4 w-4 shrink-0" />
+                  <Upload className="h-4 w-4 shrink-0" />
                   Upload
                 </TabsTrigger>
                 <TabsTrigger value="record" className="flex items-center gap-2">
-                  <HugeiconsIcon icon={Mic01Icon} size={16} className="h-4 w-4 shrink-0" />
+                  <Mic className="h-4 w-4 shrink-0" />
                   Record
                 </TabsTrigger>
                 {platform.metadata.isTauri && isSystemAudioSupported && (
                   <TabsTrigger value="system" className="flex items-center gap-2">
-                    <HugeiconsIcon icon={DeskIcon} size={16} className="h-4 w-4 shrink-0" />
+                    <Monitor className="h-4 w-4 shrink-0" />
                     System Audio
                   </TabsTrigger>
                 )}

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,14 +1,9 @@
 import { useQuery, useQueryClient } from '@tanstack/react-query';
-import { HugeiconsIcon } from '@hugeicons/react';
-import { Edit01Icon, MoreHorizontalIcon, Add01Icon, Delete01Icon } from '@hugeicons/core-free-icons';
-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,
@@ -19,37 +14,49 @@ import {
   TableRow,
 } from '@/components/ui/table';
 import { ProfileForm } from '@/components/VoiceProfiles/ProfileForm';
-import { ProfileAvatar } from '@/components/VoiceProfiles/ProfileAvatar';
 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({
@@ -76,17 +83,6 @@ export function VoicesTab() {
     queryFn: () => apiClient.listChannels(),
   });
 
-  const handleEdit = (profileId: string) => {
-    setEditingProfileId(profileId);
-    setDialogOpen(true);
-  };
-
-  const handleDelete = (profileId: string) => {
-    if (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);
@@ -105,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)}>
-            <HugeiconsIcon icon={Add01Icon} size={16} 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={() => handleDelete(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>
@@ -163,46 +179,71 @@ 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 serverUrl = useServerStore((state) => state.serverUrl);
+  const [avatarError, setAvatarError] = useState(false);
+  const avatarUrl = profile.avatar_path ? `${serverUrl}/profiles/${profile.id}/avatar` : null;
+
+  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>
-        <div className="flex items-center gap-2">
-          <ProfileAvatar
-            profileId={profile.id}
-            avatarPath={profile.avatar_path}
-            size="md"
-            alt={`${profile.name} avatar`}
-          />
-          <div>
-            <div className="font-medium">{profile.name}</div>
+        <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>
             {profile.description && (
-              <div className="text-sm text-muted-foreground">{profile.description}</div>
+              <div className="text-sm text-muted-foreground truncate">{profile.description}</div>
             )}
           </div>
         </div>
       </TableCell>
-      <TableCell onClick={(e) => e.stopPropagation()}>{profile.language}</TableCell>
-      <TableCell onClick={(e) => e.stopPropagation()}>{generationCount}</TableCell>
-      <TableCell onClick={(e) => e.stopPropagation()}>{samples?.length || 0}</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()}>
         <MultiSelect
           options={channels.map((ch) => ({
@@ -212,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">
-              <HugeiconsIcon icon={MoreHorizontalIcon} size={16} className="h-4 w-4" />
-            </Button>
-          </DropdownMenuTrigger>
-          <DropdownMenuContent>
-            <DropdownMenuItem onClick={onEdit}>
-              <HugeiconsIcon icon={Edit01Icon} size={16} className="h-4 w-4 mr-2" />
-              Edit
-            </DropdownMenuItem>
-            <DropdownMenuItem onClick={onDelete} className="text-destructive">
-              <HugeiconsIcon icon={Delete01Icon} size={16} className="h-4 w-4 mr-2" />
-              Delete
-            </DropdownMenuItem>
-          </DropdownMenuContent>
-        </DropdownMenu>
-      </TableCell>
+      <TableCell />
     </TableRow>
   );
 }

app/src/components/ui/checkbox.tsx

@@ -1,6 +1,5 @@
+import { Check } from 'lucide-react';
 import * as React from 'react';
-import { HugeiconsIcon } from '@hugeicons/react';
-import { CheckmarkCircle01Icon } from '@hugeicons/core-free-icons';
 import { cn } from '@/lib/utils/cn';
 
 export interface CheckboxProps {
@@ -35,7 +34,7 @@ const Checkbox = React.forwardRef<HTMLButtonElement, CheckboxProps>(
         )}
         {...props}
       >
-        {checked && <HugeiconsIcon icon={CheckmarkCircle01Icon} size={12} className="h-3 w-3 text-accent-foreground" />}
+        {checked && <Check className="h-3 w-3 text-accent-foreground" />}
       </button>
     );
   },

app/src/components/ui/dialog.tsx

@@ -1,6 +1,5 @@
 import * as DialogPrimitive from '@radix-ui/react-dialog';
-import { HugeiconsIcon } from '@hugeicons/react';
-import { Cancel01Icon } from '@hugeicons/core-free-icons';
+import { X } from 'lucide-react';
 import * as React from 'react';
 import { cn } from '@/lib/utils/cn';
 
@@ -43,7 +42,7 @@ const DialogContent = React.forwardRef<
     >
       {children}
       <DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">
-        <HugeiconsIcon icon={Cancel01Icon} size={16} className="h-4 w-4" />
+        <X className="h-4 w-4" />
         <span className="sr-only">Close</span>
       </DialogPrimitive.Close>
     </DialogPrimitive.Content>

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

@@ -1,6 +1,5 @@
-import { MoreHorizontalIcon } from '@hugeicons/core-free-icons';
-import { HugeiconsIcon } from '@hugeicons/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';
 
@@ -27,7 +26,7 @@ const DropdownMenuSubTrigger = React.forwardRef<
     {...props}
   >
     {children}
-    <HugeiconsIcon icon={MoreHorizontalIcon} size={16} className="ml-auto h-4 w-4" />
+    <MoreHorizontal className="ml-auto h-4 w-4" />
   </DropdownMenuPrimitive.SubTrigger>
 ));
 DropdownMenuSubTrigger.displayName = DropdownMenuPrimitive.SubTrigger.displayName;
@@ -98,7 +97,7 @@ const DropdownMenuCheckboxItem = React.forwardRef<
   >
     <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
       <DropdownMenuPrimitive.ItemIndicator>
-        <HugeiconsIcon icon={MoreHorizontalIcon} size={16} className="h-4 w-4" />
+        <MoreHorizontal className="h-4 w-4" />
       </DropdownMenuPrimitive.ItemIndicator>
     </span>
     {children}
@@ -120,7 +119,7 @@ const DropdownMenuRadioItem = React.forwardRef<
   >
     <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
       <DropdownMenuPrimitive.ItemIndicator>
-        <HugeiconsIcon icon={MoreHorizontalIcon} size={8} className="h-2 w-2 fill-current" />
+        <MoreHorizontal className="h-2 w-2 fill-current" />
       </DropdownMenuPrimitive.ItemIndicator>
     </span>
     {children}

app/src/components/ui/multi-select.tsx

@@ -1,6 +1,5 @@
 import * as React from 'react';
-import { HugeiconsIcon } from '@hugeicons/react';
-import { ArrowDown01Icon, CheckmarkCircle01Icon } from '@hugeicons/core-free-icons';
+import { ChevronDown, Check } from 'lucide-react';
 import { cn } from '@/lib/utils/cn';
 import {
   DropdownMenu,
@@ -37,7 +36,7 @@ const MultiSelectCheckboxItem = React.forwardRef<
   >
     <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
       <DropdownMenuPrimitive.ItemIndicator>
-        <HugeiconsIcon icon={CheckmarkCircle01Icon} size={16} className="h-4 w-4" />
+        <Check className="h-4 w-4" />
       </DropdownMenuPrimitive.ItemIndicator>
     </span>
     {children}
@@ -79,7 +78,7 @@ export function MultiSelect({
           )}
         >
           <span className="line-clamp-1">{displayText}</span>
-          <HugeiconsIcon icon={ArrowDown01Icon} size={16} className="h-4 w-4 opacity-50" />
+          <ChevronDown className="h-4 w-4 opacity-50" />
         </button>
       </DropdownMenuTrigger>
       <DropdownMenuContent

app/src/components/ui/radio-group.tsx

@@ -1,43 +0,0 @@
-'use client';
-
-import { CircleIcon } from '@hugeicons/core-free-icons';
-import { HugeiconsIcon } from '@hugeicons/react';
-import * as RadioGroupPrimitive from '@radix-ui/react-radio-group';
-import * as React from 'react';
-
-import { cn } from '@/lib/utils/cn';
-
-const RadioGroup = React.forwardRef<
-  React.ElementRef<typeof RadioGroupPrimitive.Root>,
-  React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Root>
->(({ className, ...props }, ref) => {
-  return <RadioGroupPrimitive.Root className={cn('grid gap-2', className)} {...props} ref={ref} />;
-});
-RadioGroup.displayName = RadioGroupPrimitive.Root.displayName;
-
-const RadioGroupItem = React.forwardRef<
-  React.ElementRef<typeof RadioGroupPrimitive.Item>,
-  React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Item>
->(({ className, ...props }, ref) => {
-  return (
-    <RadioGroupPrimitive.Item
-      ref={ref}
-      className={cn(
-        'aspect-square h-4 w-4 rounded-full border border-accent text-accent ring-offset-background focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
-        className,
-      )}
-      {...props}
-    >
-      <RadioGroupPrimitive.Indicator className="flex items-center justify-center">
-        <HugeiconsIcon
-          icon={CircleIcon}
-          size={10}
-          className="h-2.5 w-2.5 fill-current text-current"
-        />
-      </RadioGroupPrimitive.Indicator>
-    </RadioGroupPrimitive.Item>
-  );
-});
-RadioGroupItem.displayName = RadioGroupPrimitive.Item.displayName;
-
-export { RadioGroup, RadioGroupItem };

app/src/components/ui/select.tsx

@@ -1,6 +1,5 @@
 import * as SelectPrimitive from '@radix-ui/react-select';
-import { HugeiconsIcon } from '@hugeicons/react';
-import { CheckmarkCircle01Icon, ArrowDown01Icon, ArrowUp01Icon } from '@hugeicons/core-free-icons';
+import { Check, ChevronDown, ChevronUp } from 'lucide-react';
 import * as React from 'react';
 import { cn } from '@/lib/utils/cn';
 
@@ -24,7 +23,7 @@ const SelectTrigger = React.forwardRef<
   >
     {children}
     <SelectPrimitive.Icon asChild>
-      <HugeiconsIcon icon={ArrowDown01Icon} size={16} className="h-4 w-4 opacity-50" />
+      <ChevronDown className="h-4 w-4 opacity-50" />
     </SelectPrimitive.Icon>
   </SelectPrimitive.Trigger>
 ));
@@ -39,7 +38,7 @@ const SelectScrollUpButton = React.forwardRef<
     className={cn('flex cursor-default items-center justify-center py-1', className)}
     {...props}
   >
-    <HugeiconsIcon icon={ArrowUp01Icon} size={16} className="h-4 w-4" />
+    <ChevronUp className="h-4 w-4" />
   </SelectPrimitive.ScrollUpButton>
 ));
 SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName;
@@ -53,7 +52,7 @@ const SelectScrollDownButton = React.forwardRef<
     className={cn('flex cursor-default items-center justify-center py-1', className)}
     {...props}
   >
-    <HugeiconsIcon icon={ArrowDown01Icon} size={16} className="h-4 w-4" />
+    <ChevronDown className="h-4 w-4" />
   </SelectPrimitive.ScrollDownButton>
 ));
 SelectScrollDownButton.displayName = SelectPrimitive.ScrollDownButton.displayName;
@@ -109,14 +108,14 @@ 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}
   >
     <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
       <SelectPrimitive.ItemIndicator>
-        <HugeiconsIcon icon={CheckmarkCircle01Icon} size={16} className="h-4 w-4" />
+        <Check className="h-4 w-4" />
       </SelectPrimitive.ItemIndicator>
     </span>
 

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/components/ui/toast.tsx

@@ -1,7 +1,6 @@
 import * as ToastPrimitives from '@radix-ui/react-toast';
 import { cva, type VariantProps } from 'class-variance-authority';
-import { HugeiconsIcon } from '@hugeicons/react';
-import { Cancel01Icon } from '@hugeicons/core-free-icons';
+import { X } from 'lucide-react';
 import * as React from 'react';
 import { cn } from '@/lib/utils/cn';
 
@@ -80,7 +79,7 @@ const ToastClose = React.forwardRef<
     toast-close=""
     {...props}
   >
-    <HugeiconsIcon icon={Cancel01Icon} size={16} className="h-4 w-4" />
+    <X className="h-4 w-4" />
   </ToastPrimitives.Close>
 ));
 ToastClose.displayName = ToastPrimitives.Close.displayName;

app/src/hooks/useAutoUpdater.ts

@@ -0,0 +1,52 @@
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { usePlatform } from '@/platform/PlatformContext';
+import type { UpdateStatus } from '@/platform/types';
+
+// Re-export UpdateStatus for backwards compatibility
+export type { UpdateStatus };
+
+export function useAutoUpdater(checkOnMount = false) {
+  const platform = usePlatform();
+  const [status, setStatus] = useState<UpdateStatus>(platform.updater.getStatus());
+  const hasCheckedRef = useRef(false);
+
+  // Subscribe to updater status changes
+  useEffect(() => {
+    const unsubscribe = platform.updater.subscribe((newStatus) => {
+      setStatus(newStatus);
+    });
+    return unsubscribe;
+    // Empty dependency array - platform is stable from context
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [platform.updater.subscribe]);
+
+  const checkForUpdates = useCallback(async () => {
+    await platform.updater.checkForUpdates();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [platform.updater.checkForUpdates]);
+
+  const downloadAndInstall = useCallback(async () => {
+    await platform.updater.downloadAndInstall();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [platform.updater.downloadAndInstall]);
+
+  const restartAndInstall = useCallback(async () => {
+    await platform.updater.restartAndInstall();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [platform.updater.restartAndInstall]);
+
+  useEffect(() => {
+    if (checkOnMount && platform.metadata.isTauri && !hasCheckedRef.current) {
+      hasCheckedRef.current = true;
+      checkForUpdates();
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [platform.metadata.isTauricheckOnMountcheckForUpdates]);
+
+  return {
+    status,
+    checkForUpdates,
+    downloadAndInstall,
+    restartAndInstall,
+  };
+}

app/src/hooks/useAutoUpdater.tsx

@@ -1,5 +1,4 @@
-import { Download01Icon, Refresh01Icon } from '@hugeicons/core-free-icons';
-import { HugeiconsIcon } from '@hugeicons/react';
+import { Download, RefreshCw } from 'lucide-react';
 import { useCallback, useEffect, useRef, useState } from 'react';
 import { Progress } from '@/components/ui/progress';
 import { ToastAction } from '@/components/ui/toast';
@@ -74,7 +73,7 @@ export function useAutoUpdater(options: boolean | UseAutoUpdaterOptions = false)
     }
     // Empty dependency array - only run once on mount
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [platform.metadata.isTauri, checkOnMount, checkForUpdates]);
+  }, [platform.metadata.isTauricheckOnMountcheckForUpdates]);
 
   // Show toast when update is available
   useEffect(() => {
@@ -133,7 +132,7 @@ export function useAutoUpdater(options: boolean | UseAutoUpdaterOptions = false)
     toastUpdateRef.current({
       title: (
         <div className="flex items-center gap-2">
-          <HugeiconsIcon icon={Download01Icon} size={16} className="h-4 w-4 animate-pulse" />
+          <Download className="h-4 w-4 animate-pulse" />
           <span>Downloading Update</span>
         </div>
       ),
@@ -175,7 +174,7 @@ export function useAutoUpdater(options: boolean | UseAutoUpdaterOptions = false)
       duration: Infinity,
       action: (
         <ToastAction altText="Restart now" onClick={handleRestartNow}>
-          <HugeiconsIcon icon={Refresh01Icon} size={12} className="h-3 w-3 mr-1" />
+          <RefreshCw className="h-3 w-3 mr-1" />
           Restart Now
         </ToastAction>
       ),

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,
-  FolderPathsResponse,
+  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,
@@ -58,11 +65,6 @@ class ApiClient {
     return this.request<HealthResponse>('/health');
   }
 
-  // System
-  async getSystemFolders(): Promise<FolderPathsResponse> {
-    return this.request<FolderPathsResponse>('/system/folders');
-  }
-
   // Profiles
   async createProfile(data: VoiceProfileCreate): Promise<VoiceProfileResponse> {
     return this.request<VoiceProfileResponse>('/profiles', {
@@ -205,74 +207,21 @@ class ApiClient {
     });
   }
 
-  // Providers
-  async listProviders(): Promise<{
-    providers: Array<{
-      type: string;
-      name: string;
-      installed: boolean;
-      size_mb: number | null;
-    }>;
-    installed: string[];
-  }> {
-    return this.request('/providers');
-  }
-
-  async getActiveProvider(): Promise<{
-    provider: string;
-    health: {
-      status: string;
-      provider: string;
-      version: string | null;
-      model: string | null;
-      device: string | null;
-    };
-    status: {
-      model_loaded: boolean;
-      model_size: string | null;
-      available_sizes: string[];
-      gpu_available: boolean | null;
-      vram_used_mb: number | null;
-    };
-  }> {
-    return this.request('/providers/active');
-  }
-
-  async startProvider(providerType: string): Promise<{
-    message: string;
-    provider: {
-      status: string;
-      provider: string;
-      version: string | null;
-      model: string | null;
-      device: string | null;
-    };
-  }> {
-    return this.request('/providers/start', {
-      method: 'POST',
-      body: JSON.stringify({ provider_type: providerType }),
-    });
-  }
-
-  async stopProvider(): Promise<{ message: string }> {
-    return this.request('/providers/stop', {
+  async retryGeneration(generationId: string): Promise<GenerationResponse> {
+    return this.request<GenerationResponse>(`/generate/${generationId}/retry`, {
       method: 'POST',
     });
   }
 
-  async downloadProvider(providerType: string): Promise<{
-    message: string;
-    provider_type: string;
-  }> {
-    return this.request('/providers/download', {
+  async regenerateGeneration(generationId: string): Promise<GenerationResponse> {
+    return this.request<GenerationResponse>(`/generate/${generationId}/regenerate`, {
       method: 'POST',
-      body: JSON.stringify({ provider_type: providerType }),
     });
   }
 
-  async deleteProvider(providerType: string): Promise<{ message: string }> {
-    return this.request(`/providers/${providerType}`, {
-      method: 'DELETE',
+  async toggleFavorite(generationId: string): Promise<{ is_favorited: boolean }> {
+    return this.request<{ is_favorited: boolean }>(`/history/${generationId}/favorite`, {
+      method: 'POST',
     });
   }
 
@@ -328,9 +277,7 @@ class ApiClient {
     return response.blob();
   }
 
-  async importGeneration(
-    file: File,
-  ): Promise<{
+  async importGeneration(file: File): Promise<{
     id: string;
     profile_id: string;
     profile_name: string;
@@ -356,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}`;
@@ -394,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:',
@@ -415,11 +382,28 @@ class ApiClient {
     });
   }
 
+  async unloadModel(modelName: string): Promise<{ message: string }> {
+    return this.request<{ message: string }>(`/models/${modelName}/unload`, {
+      method: 'POST',
+    });
+  }
+
+  async cancelDownload(modelName: string): Promise<{ message: string }> {
+    return this.request<{ message: string }>('/models/download/cancel', {
+      method: 'POST',
+      body: JSON.stringify({ model_name: modelName } as ModelDownloadRequest),
+    });
+  }
+
   // Task Management
   async getActiveTasks(): Promise<ActiveTasksResponse> {
     return this.request<ActiveTasksResponse>('/tasks/active');
   }
 
+  async clearAllTasks(): Promise<{ message: string }> {
+    return this.request<{ message: string }>('/tasks/clear', { method: 'POST' });
+  }
+
   // Audio Channels
   async listChannels(): Promise<
     Array<{
@@ -493,6 +477,23 @@ class ApiClient {
     });
   }
 
+  // CUDA Backend Management
+  async getCudaStatus(): Promise<CudaStatus> {
+    return this.request<CudaStatus>('/backend/cuda-status');
+  }
+
+  async downloadCudaBackend(): Promise<{ message: string; progress_key: string }> {
+    return this.request<{ message: string; progress_key: string }>('/backend/download-cuda', {
+      method: 'POST',
+    });
+  }
+
+  async deleteCudaBackend(): Promise<{ message: string }> {
+    return this.request<{ message: string }>('/backend/cuda', {
+      method: 'DELETE',
+    });
+  }
+
   // Stories
   async listStories(): Promise<StoryResponse[]> {
     return this.request<StoryResponse[]>('/stories');
@@ -588,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);
@@ -601,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,13 +31,35 @@ 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;
   language: LanguageCode;
   seed?: number;
   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 {
@@ -42,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 {
@@ -57,6 +90,8 @@ export interface HistoryQuery {
 
 export interface HistoryResponse extends GenerationResponse {
   profile_name: string;
+  versions?: GenerationVersionResponse[];
+  active_version_id?: string;
 }
 
 export interface HistoryListResponse {
@@ -79,7 +114,29 @@ export interface HealthResponse {
   model_downloaded?: boolean;
   model_size?: string;
   gpu_available: boolean;
+  gpu_type?: string;
   vram_used_mb?: number;
+  backend_type?: string;
+  backend_variant?: string; // "cpu" or "cuda"
+}
+
+export interface CudaDownloadProgress {
+  model_name: string;
+  current: number;
+  total: number;
+  progress: number;
+  filename?: string;
+  status: 'downloading' | 'extracting' | 'complete' | 'error';
+  timestamp: string;
+  error?: string;
+}
+
+export interface CudaStatus {
+  available: boolean; // CUDA binary exists on disk
+  active: boolean; // Currently running the CUDA binary
+  binary_path?: string;
+  downloading: boolean; // Download in progress
+  download_progress?: CudaDownloadProgress;
 }
 
 export interface ModelProgress {
@@ -96,12 +153,29 @@ export interface ModelProgress {
 export interface ModelStatus {
   model_name: string;
   display_name: string;
+  hf_repo_id?: string; // HuggingFace repository ID
   downloaded: boolean;
-  downloading: boolean;  // True if download is in progress
+  downloading: boolean; // True if download is in progress
   size_mb?: number;
   loaded: boolean;
 }
 
+export interface HuggingFaceModelInfo {
+  id: string;
+  author: string;
+  lastModified: string;
+  pipeline_tag?: string;
+  library_name?: string;
+  downloads: number;
+  likes: number;
+  tags: string[];
+  cardData?: {
+    license?: string;
+    language?: string[];
+    pipeline_tag?: string;
+  };
+}
+
 export interface ModelStatusListResponse {
   models: ModelStatus[];
 }
@@ -114,6 +188,11 @@ export interface ActiveDownloadTask {
   model_name: string;
   status: string;
   started_at: string;
+  error?: string;
+  progress?: number; // 0-100 percentage
+  current?: number; // bytes downloaded
+  total?: number; // total bytes
+  filename?: string; // current file being downloaded
 }
 
 export interface ActiveGenerationTask {
@@ -128,12 +207,6 @@ export interface ActiveTasksResponse {
   generations: ActiveGenerationTask[];
 }
 
-export interface FolderPathsResponse {
-  data_dir: string;
-  models_dir: string;
-  providers_dir: string;
-}
-
 export interface StoryCreate {
   name: string;
   description?: string;
@@ -152,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;
@@ -166,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 {
@@ -209,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/languages.ts

@@ -1,26 +1,86 @@
 /**
- * Supported languages for Qwen3-TTS
- * Based on: https://github.com/QwenLM/Qwen3-TTS
+ * Supported languages for voice generation, per engine.
+ *
+ * Qwen3-TTS supports 10 languages.
+ * LuxTTS is English-only.
+ * Chatterbox Multilingual supports 23 languages.
+ * Chatterbox Turbo is English-only.
  */
 
-export const SUPPORTED_LANGUAGES = {
-  zh: 'Chinese',
+/** All languages that any engine supports. */
+export const ALL_LANGUAGES = {
+  ar: 'Arabic',
+  da: 'Danish',
+  de: 'German',
+  el: 'Greek',
   en: 'English',
+  es: 'Spanish',
+  fi: 'Finnish',
+  fr: 'French',
+  he: 'Hebrew',
+  hi: 'Hindi',
+  it: 'Italian',
   ja: 'Japanese',
   ko: 'Korean',
-  de: 'German',
-  fr: 'French',
-  ru: 'Russian',
+  ms: 'Malay',
+  nl: 'Dutch',
+  no: 'Norwegian',
+  pl: 'Polish',
   pt: 'Portuguese',
-  es: 'Spanish',
-  it: 'Italian',
+  ru: 'Russian',
+  sv: 'Swedish',
+  sw: 'Swahili',
+  tr: 'Turkish',
+  zh: 'Chinese',
 } as const;
 
-export type LanguageCode = keyof typeof SUPPORTED_LANGUAGES;
+export type LanguageCode = keyof typeof ALL_LANGUAGES;
 
-export const LANGUAGE_CODES = Object.keys(SUPPORTED_LANGUAGES) as LanguageCode[];
+/** Per-engine supported language codes. */
+export const ENGINE_LANGUAGES: Record<string, readonly LanguageCode[]> = {
+  qwen: ['zh', 'en', 'ja', 'ko', 'de', 'fr', 'ru', 'pt', 'es', 'it'],
+  luxtts: ['en'],
+  chatterbox: [
+    'ar',
+    'da',
+    'de',
+    'el',
+    'en',
+    'es',
+    'fi',
+    'fr',
+    'he',
+    'hi',
+    'it',
+    'ja',
+    'ko',
+    'ms',
+    'nl',
+    'no',
+    'pl',
+    'pt',
+    'ru',
+    'sv',
+    'sw',
+    'tr',
+    'zh',
+  ],
+  chatterbox_turbo: ['en'],
+} as const;
 
+/** Helper: get language options for a given engine. */
+export function getLanguageOptionsForEngine(engine: string) {
+  const codes = ENGINE_LANGUAGES[engine] ?? ENGINE_LANGUAGES.qwen;
+  return codes.map((code) => ({
+    value: code,
+    label: ALL_LANGUAGES[code],
+  }));
+}
+
+// ── Backwards-compatible exports used elsewhere ──────────────────────
+export const SUPPORTED_LANGUAGES = ALL_LANGUAGES;
+export const LANGUAGE_CODES = Object.keys(ALL_LANGUAGES) as LanguageCode[];
 export const LANGUAGE_OPTIONS = LANGUAGE_CODES.map((code) => ({
   value: code,
-  label: SUPPORTED_LANGUAGES[code],
+  label: ALL_LANGUAGES[code],
 }));

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/useAudioRecording.ts

@@ -20,11 +20,13 @@ export function useAudioRecording({
   const streamRef = useRef<MediaStream | null>(null);
   const timerRef = useRef<number | null>(null);
   const startTimeRef = useRef<number | null>(null);
+  const cancelledRef = useRef<boolean>(false);
 
   const startRecording = useCallback(async () => {
     try {
       setError(null);
       chunksRef.current = [];
+      cancelledRef.current = false;
       setDuration(0);
 
       // Check if getUserMedia is available
@@ -87,31 +89,34 @@ export function useAudioRecording({
       };
 
       mediaRecorder.onstop = async () => {
+        // Snapshot the cancellation flag and recorded duration immediately —
+        // cancelRecording() clears chunks and sets cancelledRef synchronously
+        // before this async handler runs, so we must check it first.
+        const wasCancelled = cancelledRef.current;
+        const recordedDuration = startTimeRef.current
+          ? (Date.now() - startTimeRef.current) / 1000
+          : undefined;
+
         const webmBlob = new Blob(chunksRef.current, { type: 'audio/webm' });
 
-        // Convert to WAV format to avoid needing ffmpeg on backend
-        try {
-          const wavBlob = await convertToWav(webmBlob);
-
-          // Pass the actual recorded duration
-          const recordedDuration = startTimeRef.current
-            ? (Date.now() - startTimeRef.current) / 1000
-            : undefined;
-          onRecordingComplete?.(wavBlob, recordedDuration);
-        } catch (err) {
-          console.error('Error converting audio to WAV:', err);
-          // Fallback to original blob if conversion fails
-          const recordedDuration = startTimeRef.current
-            ? (Date.now() - startTimeRef.current) / 1000
-            : undefined;
-          onRecordingComplete?.(webmBlob, recordedDuration);
-        }
-
-        // Stop all tracks
+        // Stop all tracks now that we have the data
         streamRef.current?.getTracks().forEach((track) => {
           track.stop();
         });
         streamRef.current = null;
+
+        // Don't fire completion callback if the recording was cancelled
+        if (wasCancelled) return;
+
+        // Convert to WAV format to avoid needing ffmpeg on backend
+        try {
+          const wavBlob = await convertToWav(webmBlob);
+          onRecordingComplete?.(wavBlob, recordedDuration);
+        } catch (err) {
+          console.error('Error converting audio to WAV:', err);
+          // Fallback to original blob if conversion fails
+          onRecordingComplete?.(webmBlob, recordedDuration);
+        }
       };
 
       mediaRecorder.onerror = (event) => {
@@ -167,9 +172,10 @@ export function useAudioRecording({
 
   const cancelRecording = useCallback(() => {
     if (mediaRecorderRef.current) {
+      cancelledRef.current = true; // Must be set before stop() triggers onstop
+      chunksRef.current = [];
       mediaRecorderRef.current.stop();
       setIsRecording(false);
-      chunksRef.current = [];
       setDuration(0);
     }
 

app/src/lib/hooks/useGenerationForm.ts

@@ -4,18 +4,20 @@ 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(),
   instruct: z.string().max(500).optional(),
+  engine: z.enum(['qwen', 'luxtts', 'chatterbox', 'chatterbox_turbo']).optional(),
 });
 
 export type GenerationFormValues = z.infer<typeof generationSchema>;
@@ -23,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);
 
@@ -47,6 +52,7 @@ export function useGenerationForm(options: UseGenerationFormOptions = {}) {
       seed: undefined,
       modelSize: '1.7B',
       instruct: '',
+      engine: 'qwen',
       ...options.defaultValues,
     },
   });
@@ -65,11 +71,27 @@ export function useGenerationForm(options: UseGenerationFormOptions = {}) {
     }
 
     try {
-      setIsGenerating(true);
-
-      const modelName = `qwen-tts-${data.modelSize}`;
-      const displayName = data.modelSize === '1.7B' ? 'Qwen TTS 1.7B' : 'Qwen TTS 0.6B';
+      const engine = data.engine || 'qwen';
+      const modelName =
+        engine === 'luxtts'
+          ? 'luxtts'
+          : engine === 'chatterbox'
+            ? 'chatterbox-tts'
+            : engine === 'chatterbox_turbo'
+              ? 'chatterbox-turbo'
+              : `qwen-tts-${data.modelSize}`;
+      const displayName =
+        engine === 'luxtts'
+          ? 'LuxTTS'
+          : engine === 'chatterbox'
+            ? 'Chatterbox TTS'
+            : engine === 'chatterbox_turbo'
+              ? 'Chatterbox Turbo'
+              : data.modelSize === '1.7B'
+                ? '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);
@@ -82,19 +104,35 @@ export function useGenerationForm(options: UseGenerationFormOptions = {}) {
         console.error('Failed to check model status:', error);
       }
 
+      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,
         language: data.language,
         seed: data.seed,
-        model_size: data.modelSize,
-        instruct: data.instruct || undefined,
+        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,
       });
 
-      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);
 
-      form.reset();
+      // Reset form immediately — user can start typing again
+      form.reset({
+        text: '',
+        language: data.language,
+        seed: undefined,
+        modelSize: data.modelSize,
+        instruct: '',
+        engine: data.engine,
+      });
       options.onSuccess?.(result.id);
     } catch (error) {
       toast({
@@ -103,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/useModelDownloadToast.tsx

@@ -1,6 +1,4 @@
-import { CancelCircleIcon, CheckmarkCircle02Icon } from '@hugeicons/core-free-icons';
-import { HugeiconsIcon } from '@hugeicons/react';
-import { Icon } from '@iconify/react';
+import { CheckCircle2, Loader2, XCircle } from 'lucide-react';
 import { useCallback, useEffect, useRef } from 'react';
 import { Progress } from '@/components/ui/progress';
 import { useToast } from '@/components/ui/use-toast';
@@ -12,7 +10,7 @@ interface UseModelDownloadToastOptions {
   displayName: string;
   enabled?: boolean;
   onComplete?: () => void;
-  onError?: () => void;
+  onError?: (error: string) => void;
 }
 
 /**
@@ -61,7 +59,7 @@ export function useModelDownloadToast({
       title: displayName,
       description: (
         <div className="flex items-center gap-2">
-          <Icon icon="svg-spinners:ring-resize" className="h-4 w-4 animate-spin" />
+          <Loader2 className="h-4 w-4 animate-spin" />
           <span>Connecting to download...</span>
         </div>
       ),
@@ -98,35 +96,19 @@ export function useModelDownloadToast({
 
           switch (progress.status) {
             case 'complete':
-              statusIcon = (
-                <HugeiconsIcon
-                  icon={CheckmarkCircle02Icon}
-                  size={16}
-                  className="h-4 w-4 text-green-500"
-                />
-              );
+              statusIcon = <CheckCircle2 className="h-4 w-4 text-green-500" />;
               statusText = 'Download complete';
               break;
             case 'error':
-              statusIcon = (
-                <HugeiconsIcon
-                  icon={CancelCircleIcon}
-                  size={16}
-                  className="h-4 w-4 text-destructive"
-                />
-              );
-              statusText = `Error: ${progress.error || 'Unknown error'}`;
+              statusIcon = <XCircle className="h-4 w-4 text-destructive" />;
+              statusText = 'Download failed. See Problems panel for details.';
               break;
             case 'downloading':
-              statusIcon = (
-                <Icon icon="svg-spinners:ring-resize" className="h-4 w-4 animate-spin" />
-              );
+              statusIcon = <Loader2 className="h-4 w-4 animate-spin" />;
               statusText = progress.filename || 'Downloading...';
               break;
             case 'extracting':
-              statusIcon = (
-                <Icon icon="svg-spinners:ring-resize" className="h-4 w-4 animate-spin" />
-              );
+              statusIcon = <Loader2 className="h-4 w-4 animate-spin" />;
               statusText = 'Extracting...';
               break;
           }
@@ -149,8 +131,7 @@ export function useModelDownloadToast({
                 )}
               </div>
             ),
-            duration: progress.status === 'complete' ? 5000 : Infinity,
-            variant: progress.status === 'error' ? 'destructive' : 'default',
+            duration: progress.status === 'complete' || progress.status === 'error' ? 5000 : Infinity,
           });
 
           // Close connection and dismiss toast on completion or error
@@ -172,11 +153,7 @@ export function useModelDownloadToast({
               toastUpdateRef.current({
                 title: (
                   <div className="flex items-center gap-2">
-                    <HugeiconsIcon
-                      icon={CheckmarkCircle02Icon}
-                      size={16}
-                      className="h-4 w-4 text-green-500"
-                    />
+                    <CheckCircle2 className="h-4 w-4 text-green-500" />
                     <span>{displayName}</span>
                   </div>
                 ),
@@ -191,7 +168,7 @@ export function useModelDownloadToast({
               onComplete();
             } else if (isError && onError) {
               console.log('[useModelDownloadToast] Download error, calling onError callback');
-              onError();
+              onError(progress.error || 'Unknown error');
             }
           }
         }

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/hooks/useSystemFolders.ts

@@ -1,14 +0,0 @@
-import { useQuery } from '@tanstack/react-query';
-import { apiClient } from '@/lib/api/client';
-import { useServerStore } from '@/stores/serverStore';
-
-export function useSystemFolders() {
-  const serverUrl = useServerStore((state) => state.serverUrl);
-
-  return useQuery({
-    queryKey: ['system', 'folders', serverUrl],
-    queryFn: () => apiClient.getSystemFolders(),
-    staleTime: 60000, // Cache for 1 minute - folder paths don't change often
-    retry: 1,
-  });
-}

app/src/lib/utils/audio.ts

@@ -22,6 +22,11 @@ export function formatAudioDuration(seconds: number): string {
  * If the file has a recordedDuration property (from recording hooks),
  * use that instead of trying to read metadata. This fixes issues on Windows
  * where WebM files from MediaRecorder don't have proper duration metadata.
+ *
+ * For uploaded files we use AudioContext.decodeAudioData which fully decodes
+ * the audio and returns the exact duration. This is more reliable than
+ * HTMLMediaElement.duration which can return incorrect large values for VBR
+ * MP3 files that lack a proper XING/VBRI header.
  */
 export async function getAudioDuration(
   file: File & { recordedDuration?: number },
@@ -30,26 +35,39 @@ export async function getAudioDuration(
     return file.recordedDuration;
   }
 
-  return new Promise((resolve, reject) => {
-    const audio = new Audio();
-    const url = URL.createObjectURL(file);
+  // Use Web Audio API for accurate duration — avoids VBR MP3 metadata issues.
+  try {
+    const audioContext = new AudioContext();
+    try {
+      const arrayBuffer = await file.arrayBuffer();
+      const audioBuffer = await audioContext.decodeAudioData(arrayBuffer);
+      return audioBuffer.duration;
+    } finally {
+      await audioContext.close();
+    }
+  } catch {
+    // Fallback: read duration from the media element (less accurate but works for WAV).
+    return new Promise((resolve, reject) => {
+      const audio = new Audio();
+      const url = URL.createObjectURL(file);
 
-    audio.addEventListener('loadedmetadata', () => {
-      URL.revokeObjectURL(url);
-      if (Number.isFinite(audio.duration) && audio.duration > 0) {
-        resolve(audio.duration);
-      } else {
-        reject(new Error('Audio file has invalid duration metadata'));
-      }
+      audio.addEventListener('loadedmetadata', () => {
+        URL.revokeObjectURL(url);
+        if (Number.isFinite(audio.duration) && audio.duration > 0) {
+          resolve(audio.duration);
+        } else {
+          reject(new Error('Audio file has invalid duration metadata'));
+        }
+      });
+
+      audio.addEventListener('error', () => {
+        URL.revokeObjectURL(url);
+        reject(new Error('Failed to load audio file'));
+      });
+
+      audio.src = url;
     });
-
-    audio.addEventListener('error', () => {
-      URL.revokeObjectURL(url);
-      reject(new Error('Failed to load audio file'));
-    });
-
-    audio.src = url;
-  });
+  }
 }
 
 /**

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,13 +10,8 @@ export interface FileFilter {
 
 export interface PlatformFilesystem {
   saveFile(filename: string, blob: Blob, filters?: FileFilter[]): Promise<void>;
-  /**
-   * Open a folder in the native file explorer.
-   * On web, this is a no-op since browsers cannot open folders.
-   * @param path - The absolute path to the folder to open
-   * @returns true if the folder was opened, false if not supported
-   */
-  openFolder(path: string): Promise<boolean>;
+  openPath(path: string): Promise<void>;
+  pickDirectory(title: string): Promise<string | null>;
 }
 
 export interface UpdateStatus {
@@ -56,8 +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(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/README.md

@@ -334,18 +334,21 @@ python -m backend.main --host 0.0.0.0 --port 8000
 
 ## Usage Examples
 
+The desktop app, web client, and current development workflow use `http://localhost:17493` by default.
+If you launch the backend manually with a different host or port, substitute that address in the examples below.
+
 ### Creating a Voice Profile
 
 ```bash
 # 1. Create profile
-curl -X POST http://localhost:8000/profiles \
+curl -X POST http://localhost:17493/profiles \
   -H "Content-Type: application/json" \
   -d '{"name": "My Voice", "language": "en"}'
 
 # Response: {"id": "abc-123", ...}
 
 # 2. Add sample
-curl -X POST http://localhost:8000/profiles/abc-123/samples \
+curl -X POST http://localhost:17493/profiles/abc-123/samples \
   -F "[email protected]" \
   -F "reference_text=This is my voice sample"
 ```
@@ -353,7 +356,7 @@ curl -X POST http://localhost:8000/profiles/abc-123/samples \
 ### Generating Speech
 
 ```bash
-curl -X POST http://localhost:8000/generate \
+curl -X POST http://localhost:17493/generate \
   -H "Content-Type: application/json" \
   -d '{
     "profile_id": "abc-123",
@@ -365,13 +368,13 @@ curl -X POST http://localhost:8000/generate \
 # Response: {"id": "gen-456", "audio_path": "/path/to/audio.wav", ...}
 
 # Download audio
-curl http://localhost:8000/audio/gen-456 -o output.wav
+curl http://localhost:17493/audio/gen-456 -o output.wav
 ```
 
 ### Transcribing Audio
 
 ```bash
-curl -X POST http://localhost:8000/transcribe \
+curl -X POST http://localhost:17493/transcribe \
   -F "[email protected]" \
   -F "language=en"
 
@@ -386,12 +389,12 @@ Add multiple samples to a profile for better quality:
 
 ```bash
 # Add first sample
-curl -X POST http://localhost:8000/profiles/abc-123/samples \
+curl -X POST http://localhost:17493/profiles/abc-123/samples \
   -F "[email protected]" \
   -F "reference_text=First sample"
 
 # Add second sample
-curl -X POST http://localhost:8000/profiles/abc-123/samples \
+curl -X POST http://localhost:17493/profiles/abc-123/samples \
   -F "[email protected]" \
   -F "reference_text=Second sample"
 
@@ -412,10 +415,10 @@ Models are lazy-loaded and can be manually unloaded:
 
 ```bash
 # Unload TTS model
-curl -X POST http://localhost:8000/models/unload
+curl -X POST http://localhost:17493/models/unload
 
 # Load specific model size
-curl -X POST "http://localhost:8000/models/load?model_size=0.6B"
+curl -X POST "http://localhost:17493/models/load?model_size=0.6B"
 ```
 
 ## Error Handling

backend/__init__.py

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

backend/backends/__init__.py

@@ -4,6 +4,7 @@ Backend abstraction layer for TTS and STT.
 Provides a unified interface for MLX and PyTorch backends.
 """
 
+import threading
 from typing import Protocol, Optional, Tuple, List
 from typing_extensions import runtime_checkable
 import numpy as np
@@ -112,44 +113,73 @@ class STTBackend(Protocol):
 
 # Global backend instances
 _tts_backend: Optional[TTSBackend] = None
+_tts_backends: dict[str, TTSBackend] = {}
+_tts_backends_lock = threading.Lock()
 _stt_backend: Optional[STTBackend] = None
 
+# Supported TTS engines
+TTS_ENGINES = {
+    "qwen": "Qwen TTS",
+    "luxtts": "LuxTTS",
+    "chatterbox": "Chatterbox TTS",
+    "chatterbox_turbo": "Chatterbox Turbo",
+}
+
 
 def get_tts_backend() -> TTSBackend:
     """
-    Get or create TTS backend instance based on platform.
-
+    Get or create the default (Qwen) TTS backend instance based on platform.
+    
     Returns:
         TTS backend instance (MLX or PyTorch)
-
-    Raises:
-        ImportError: If required dependencies (mlx or torch) are not available
     """
-    global _tts_backend
+    return get_tts_backend_for_engine("qwen")
 
-    if _tts_backend is None:
-        backend_type = get_backend_type()
 
-        if backend_type == "mlx":
-            try:
+def get_tts_backend_for_engine(engine: str) -> TTSBackend:
+    """
+    Get or create a TTS backend for the given engine.
+    
+    Args:
+        engine: Engine name ("qwen" or "luxtts")
+    
+    Returns:
+        TTS backend instance
+    """
+    global _tts_backends
+    
+    # Fast path: check without lock
+    if engine in _tts_backends:
+        return _tts_backends[engine]
+    
+    # Slow path: create with lock to avoid duplicate instantiation
+    with _tts_backends_lock:
+        # Double-check after acquiring lock
+        if engine in _tts_backends:
+            return _tts_backends[engine]
+        
+        if engine == "qwen":
+            backend_type = get_backend_type()
+            if backend_type == "mlx":
                 from .mlx_backend import MLXTTSBackend
-                _tts_backend = MLXTTSBackend()
-            except ImportError as e:
-                raise ImportError(
-                    f"MLX backend dependencies not available. "
-                    f"Please install mlx and mlx_audio or download a provider. Error: {e}"
-                )
-        else:
-            try:
+                backend = MLXTTSBackend()
+            else:
                 from .pytorch_backend import PyTorchTTSBackend
-                _tts_backend = PyTorchTTSBackend()
-            except ImportError as e:
-                raise ImportError(
-                    f"PyTorch backend dependencies not available. "
-                    f"Please download a TTS provider (pytorch-cpu or pytorch-cuda) from the Downloads page. Error: {e}"
-                )
-
-    return _tts_backend
+                backend = PyTorchTTSBackend()
+        elif engine == "luxtts":
+            from .luxtts_backend import LuxTTSBackend
+            backend = LuxTTSBackend()
+        elif engine == "chatterbox":
+            from .chatterbox_backend import ChatterboxTTSBackend
+            backend = ChatterboxTTSBackend()
+        elif engine == "chatterbox_turbo":
+            from .chatterbox_turbo_backend import ChatterboxTurboTTSBackend
+            backend = ChatterboxTurboTTSBackend()
+        else:
+            raise ValueError(f"Unknown TTS engine: {engine}. Supported: {list(TTS_ENGINES.keys())}")
+        
+        _tts_backends[engine] = backend
+        return backend
 
 
 def get_stt_backend() -> STTBackend:
@@ -176,6 +206,7 @@ def get_stt_backend() -> STTBackend:
 
 def reset_backends():
     """Reset backend instances (useful for testing)."""
-    global _tts_backend, _stt_backend
+    global _tts_backend, _tts_backends, _stt_backend
     _tts_backend = None
+    _tts_backends.clear()
     _stt_backend = None

backend/backends/chatterbox_backend.py

@@ -0,0 +1,360 @@
+"""
+Chatterbox TTS backend implementation.
+
+Wraps ChatterboxMultilingualTTS from chatterbox-tts for zero-shot
+voice cloning. Supports 23 languages including Hebrew. Forces CPU
+on macOS due to known MPS tensor issues.
+"""
+
+import asyncio
+import logging
+import platform
+import threading
+from pathlib import Path
+from typing import ClassVar, List, Optional, Tuple
+
+import numpy as np
+
+from . import TTSBackend
+from ..utils.audio import normalize_audio, load_audio
+from ..utils.progress import get_progress_manager
+from ..utils.tasks import get_task_manager
+
+logger = logging.getLogger(__name__)
+
+CHATTERBOX_HF_REPO = "ResembleAI/chatterbox"
+
+# Files that must be present for the multilingual model
+_MTL_WEIGHT_FILES = [
+    "t3_mtl23ls_v2.safetensors",
+    "s3gen.pt",
+    "ve.pt",
+]
+
+
+class ChatterboxTTSBackend:
+    """Chatterbox Multilingual TTS backend for voice cloning."""
+
+    # Class-level lock for torch.load monkey-patching
+    _load_lock: ClassVar[threading.Lock] = threading.Lock()
+
+    def __init__(self):
+        self.model = None
+        self.model_size = "default"
+        self._device = None
+        self._model_load_lock = asyncio.Lock()
+
+    def _get_device(self) -> str:
+        """Get the best available device. Forces CPU on macOS (MPS issue)."""
+        if platform.system() == "Darwin":
+            return "cpu"
+        try:
+            import torch
+
+            if torch.cuda.is_available():
+                return "cuda"
+        except ImportError:
+            pass
+        return "cpu"
+
+    def is_loaded(self) -> bool:
+        return self.model is not None
+
+    def _get_model_path(self, model_size: str = "default") -> str:
+        return CHATTERBOX_HF_REPO
+
+    def _is_model_cached(self, model_size: str = "default") -> bool:
+        """Check if the Chatterbox multilingual model is cached locally."""
+        try:
+            from huggingface_hub import constants as hf_constants
+
+            repo_cache = Path(hf_constants.HF_HUB_CACHE) / (
+                "models--" + CHATTERBOX_HF_REPO.replace("/", "--")
+            )
+
+            if not repo_cache.exists():
+                return False
+
+            blobs_dir = repo_cache / "blobs"
+            if blobs_dir.exists() and any(blobs_dir.glob("*.incomplete")):
+                return False
+
+            # Check for multilingual weight files
+            snapshots_dir = repo_cache / "snapshots"
+            if snapshots_dir.exists():
+                for fname in _MTL_WEIGHT_FILES:
+                    if not any(snapshots_dir.rglob(fname)):
+                        return False
+                return True
+
+            return False
+        except Exception as e:
+            logger.warning(f"Error checking Chatterbox cache: {e}")
+            return False
+
+    async def load_model(self, model_size: str = "default") -> None:
+        """Load the Chatterbox multilingual model."""
+        if self.model is not None:
+            return
+        async with self._model_load_lock:
+            if self.model is not None:
+                return
+            await asyncio.to_thread(self._load_model_sync)
+
+    def _load_model_sync(self):
+        """Synchronous model loading."""
+        from ..utils.hf_progress import HFProgressTracker, create_hf_progress_callback
+
+        progress_manager = get_progress_manager()
+        task_manager = get_task_manager()
+        model_name = "chatterbox-tts"
+
+        is_cached = self._is_model_cached()
+
+        # Set up HF progress tracking (intercepts tqdm for file-level progress)
+        progress_callback = create_hf_progress_callback(model_name, progress_manager)
+        tracker = HFProgressTracker(progress_callback, filter_non_downloads=is_cached)
+        tracker_context = tracker.patch_download()
+        tracker_context.__enter__()
+
+        if not is_cached:
+            task_manager.start_download(model_name)
+            progress_manager.update_progress(
+                model_name=model_name,
+                current=0,
+                total=0,
+                filename="Connecting to HuggingFace...",
+                status="downloading",
+            )
+
+        try:
+            device = self._get_device()
+            self._device = device
+
+            logger.info(f"Loading Chatterbox Multilingual TTS on {device}...")
+
+            import torch
+            from chatterbox.mtl_tts import ChatterboxMultilingualTTS
+
+            # Load into a local variable first, apply all patches, then
+            # assign to self.model.  This avoids leaving a half-initialised
+            # model on self.model if any patch step raises an exception.
+            #
+            # Monkey-patch torch.load for CPU loading. The model's .pt files
+            # were saved on CUDA; from_pretrained() doesn't pass map_location
+            # so loading on CPU fails without this.
+            try:
+                if device == "cpu":
+                    _orig_torch_load = torch.load
+
+                    def _patched_load(*args, **kwargs):
+                        kwargs.setdefault("map_location", "cpu")
+                        return _orig_torch_load(*args, **kwargs)
+
+                    with ChatterboxTTSBackend._load_lock:
+                        torch.load = _patched_load
+                        try:
+                            model = ChatterboxMultilingualTTS.from_pretrained(
+                                device=device,
+                            )
+                        finally:
+                            torch.load = _orig_torch_load
+                else:
+                    model = ChatterboxMultilingualTTS.from_pretrained(
+                        device=device,
+                    )
+            finally:
+                tracker_context.__exit__(None, None, None)
+
+            # Fix: transformers >= 4.36 defaults LlamaModel to sdpa attention
+            # which doesn't support output_attentions=True (needed by
+            # Chatterbox's AlignmentStreamAnalyzer). Force eager attention.
+            t3_tfmr = model.t3.tfmr
+            if hasattr(t3_tfmr, "config") and hasattr(
+                t3_tfmr.config, "_attn_implementation"
+            ):
+                t3_tfmr.config._attn_implementation = "eager"
+                for layer in getattr(t3_tfmr, "layers", []):
+                    if hasattr(layer, "self_attn"):
+                        layer.self_attn._attn_implementation = "eager"
+
+            if not is_cached:
+                progress_manager.mark_complete(model_name)
+                task_manager.complete_download(model_name)
+
+            # Patch float64 → float32 dtype mismatches in upstream chatterbox.
+            # librosa.load returns float64 numpy; multiple upstream code paths
+            # convert it to a torch tensor via torch.from_numpy() without
+            # casting, then matmul it against float32 model weights.
+            import types
+
+            # Patch S3Tokenizer (used by s3gen.tokenizer)
+            _tokzr = model.s3gen.tokenizer
+            _orig_log_mel = _tokzr.log_mel_spectrogram.__func__
+
+            def _f32_log_mel(self_tokzr, audio, padding=0):
+                import torch as _torch
+                if _torch.is_tensor(audio):
+                    audio = audio.float()
+                return _orig_log_mel(self_tokzr, audio, padding)
+
+            _tokzr.log_mel_spectrogram = types.MethodType(_f32_log_mel, _tokzr)
+
+            # Patch VoiceEncoder
+            _ve = model.ve
+            _orig_ve_forward = _ve.forward.__func__
+
+            def _f32_ve_forward(self_ve, mels):
+                return _orig_ve_forward(self_ve, mels.float())
+
+            _ve.forward = types.MethodType(_f32_ve_forward, _ve)
+
+            # All patches applied successfully — publish the model
+            self.model = model
+
+            logger.info("Chatterbox Multilingual TTS loaded successfully")
+
+        except ImportError as e:
+            logger.error(
+                "chatterbox-tts package not found. "
+                "Install with: pip install chatterbox-tts"
+            )
+            if not is_cached:
+                progress_manager.mark_error(model_name, str(e))
+                task_manager.error_download(model_name, str(e))
+            raise
+        except Exception as e:
+            logger.error(f"Failed to load Chatterbox: {e}")
+            if not is_cached:
+                progress_manager.mark_error(model_name, str(e))
+                task_manager.error_download(model_name, str(e))
+            raise
+
+    def unload_model(self) -> None:
+        """Unload model to free memory."""
+        if self.model is not None:
+            device = self._device
+            del self.model
+            self.model = None
+            self._device = None
+            if device == "cuda":
+                import torch
+
+                torch.cuda.empty_cache()
+            logger.info("Chatterbox unloaded")
+
+    async def create_voice_prompt(
+        self,
+        audio_path: str,
+        reference_text: str,
+        use_cache: bool = True,
+    ) -> Tuple[dict, bool]:
+        """
+        Create voice prompt from reference audio.
+
+        Chatterbox processes reference audio at generation time, so the
+        prompt just stores the file path. The actual audio is loaded by
+        model.generate() via audio_prompt_path.
+        """
+        voice_prompt = {
+            "ref_audio": str(audio_path),
+            "ref_text": reference_text,
+        }
+        return voice_prompt, False
+
+    async def combine_voice_prompts(
+        self,
+        audio_paths: List[str],
+        reference_texts: List[str],
+    ) -> Tuple[np.ndarray, str]:
+        """Combine multiple reference samples."""
+        combined_audio = []
+        for path in audio_paths:
+            audio, _sr = load_audio(path)
+            audio = normalize_audio(audio)
+            combined_audio.append(audio)
+
+        mixed = np.concatenate(combined_audio)
+        mixed = normalize_audio(mixed)
+        combined_text = " ".join(reference_texts)
+        return mixed, combined_text
+
+    # Per-language generation defaults. Lower temp + higher cfg = clearer speech.
+    _LANG_DEFAULTS: ClassVar[dict] = {
+        "he": {
+            "exaggeration": 0.4,
+            "cfg_weight": 0.7,
+            "temperature": 0.65,
+            "repetition_penalty": 2.5,
+        },
+    }
+    _GLOBAL_DEFAULTS: ClassVar[dict] = {
+        "exaggeration": 0.5,
+        "cfg_weight": 0.5,
+        "temperature": 0.8,
+        "repetition_penalty": 2.0,
+    }
+
+    async def generate(
+        self,
+        text: str,
+        voice_prompt: dict,
+        language: str = "en",
+        seed: Optional[int] = None,
+        instruct: Optional[str] = None,
+    ) -> Tuple[np.ndarray, int]:
+        """
+        Generate audio using Chatterbox Multilingual TTS.
+
+        Args:
+            text: Text to synthesize
+            voice_prompt: Dict with ref_audio path
+            language: BCP-47 language code
+            seed: Random seed for reproducibility
+            instruct: Unused (protocol compatibility)
+
+        Returns:
+            Tuple of (audio_array, sample_rate)
+        """
+        await self.load_model()
+
+        ref_audio = voice_prompt.get("ref_audio")
+        if ref_audio and not Path(ref_audio).exists():
+            logger.warning(f"Reference audio not found: {ref_audio}")
+            ref_audio = None
+
+        # Merge language-specific defaults with global defaults
+        lang_defaults = self._LANG_DEFAULTS.get(language, self._GLOBAL_DEFAULTS)
+
+        def _generate_sync():
+            import torch
+
+            if seed is not None:
+                torch.manual_seed(seed)
+
+            logger.info(f"[Chatterbox] Generating: lang={language}")
+
+            wav = self.model.generate(
+                text,
+                language_id=language,
+                audio_prompt_path=ref_audio,
+                exaggeration=lang_defaults["exaggeration"],
+                cfg_weight=lang_defaults["cfg_weight"],
+                temperature=lang_defaults["temperature"],
+                repetition_penalty=lang_defaults["repetition_penalty"],
+            )
+
+            # Convert tensor -> numpy
+            if isinstance(wav, torch.Tensor):
+                audio = wav.squeeze().cpu().numpy().astype(np.float32)
+            else:
+                audio = np.asarray(wav, dtype=np.float32)
+
+            sample_rate = (
+                getattr(self.model, "sr", None)
+                or getattr(self.model, "sample_rate", 24000)
+            )
+
+            return audio, sample_rate
+
+        return await asyncio.to_thread(_generate_sync)

backend/backends/chatterbox_turbo_backend.py

@@ -0,0 +1,345 @@
+"""
+Chatterbox Turbo TTS backend implementation.
+
+Wraps ChatterboxTurboTTS from chatterbox-tts for fast, English-only
+voice cloning with paralinguistic tag support ([laugh], [cough], etc.).
+Forces CPU on macOS due to known MPS tensor issues.
+"""
+
+import asyncio
+import logging
+import platform
+import threading
+from pathlib import Path
+from typing import ClassVar, List, Optional, Tuple
+
+import numpy as np
+
+from . import TTSBackend
+from ..utils.audio import normalize_audio, load_audio
+from ..utils.progress import get_progress_manager
+from ..utils.tasks import get_task_manager
+
+logger = logging.getLogger(__name__)
+
+CHATTERBOX_TURBO_HF_REPO = "ResembleAI/chatterbox-turbo"
+
+# Files that must be present for the turbo model
+_TURBO_WEIGHT_FILES = [
+    "t3_turbo_v1.safetensors",
+    "s3gen_meanflow.safetensors",
+    "ve.safetensors",
+]
+
+
+class ChatterboxTurboTTSBackend:
+    """Chatterbox Turbo TTS backend — fast, English-only, with paralinguistic tags."""
+
+    # Class-level lock for torch.load monkey-patching
+    _load_lock: ClassVar[threading.Lock] = threading.Lock()
+
+    def __init__(self):
+        self.model = None
+        self.model_size = "default"
+        self._device = None
+        self._model_load_lock = asyncio.Lock()
+
+    def _get_device(self) -> str:
+        """Get the best available device. Forces CPU on macOS (MPS issue)."""
+        if platform.system() == "Darwin":
+            return "cpu"
+        try:
+            import torch
+
+            if torch.cuda.is_available():
+                return "cuda"
+        except ImportError:
+            pass
+        return "cpu"
+
+    def is_loaded(self) -> bool:
+        return self.model is not None
+
+    def _get_model_path(self, model_size: str = "default") -> str:
+        return CHATTERBOX_TURBO_HF_REPO
+
+    def _is_model_cached(self, model_size: str = "default") -> bool:
+        """Check if the Chatterbox Turbo model is cached locally."""
+        try:
+            from huggingface_hub import constants as hf_constants
+
+            repo_cache = Path(hf_constants.HF_HUB_CACHE) / (
+                "models--" + CHATTERBOX_TURBO_HF_REPO.replace("/", "--")
+            )
+
+            if not repo_cache.exists():
+                return False
+
+            blobs_dir = repo_cache / "blobs"
+            if blobs_dir.exists() and any(blobs_dir.glob("*.incomplete")):
+                return False
+
+            # Check for turbo weight files
+            snapshots_dir = repo_cache / "snapshots"
+            if snapshots_dir.exists():
+                for fname in _TURBO_WEIGHT_FILES:
+                    if not any(snapshots_dir.rglob(fname)):
+                        return False
+                return True
+
+            return False
+        except Exception as e:
+            logger.warning(f"Error checking Chatterbox Turbo cache: {e}")
+            return False
+
+    async def load_model(self, model_size: str = "default") -> None:
+        """Load the Chatterbox Turbo model."""
+        if self.model is not None:
+            return
+        async with self._model_load_lock:
+            if self.model is not None:
+                return
+            await asyncio.to_thread(self._load_model_sync)
+
+    def _load_model_sync(self):
+        """Synchronous model loading."""
+        from ..utils.hf_progress import HFProgressTracker, create_hf_progress_callback
+
+        progress_manager = get_progress_manager()
+        task_manager = get_task_manager()
+        model_name = "chatterbox-turbo"
+
+        is_cached = self._is_model_cached()
+
+        # Set up HF progress tracking (intercepts tqdm for file-level progress)
+        progress_callback = create_hf_progress_callback(model_name, progress_manager)
+        tracker = HFProgressTracker(progress_callback, filter_non_downloads=is_cached)
+        tracker_context = tracker.patch_download()
+        tracker_context.__enter__()
+
+        if not is_cached:
+            task_manager.start_download(model_name)
+            progress_manager.update_progress(
+                model_name=model_name,
+                current=0,
+                total=0,
+                filename="Connecting to HuggingFace...",
+                status="downloading",
+            )
+
+        try:
+            device = self._get_device()
+            self._device = device
+
+            logger.info(f"Loading Chatterbox Turbo TTS on {device}...")
+
+            import torch
+            from huggingface_hub import snapshot_download
+            from chatterbox.tts_turbo import ChatterboxTurboTTS
+
+            # Download model files ourselves so we can pass token=None
+            # (upstream from_pretrained passes token=True which requires
+            # a stored HF token even though the repo is public).
+            try:
+                local_path = snapshot_download(
+                    repo_id=CHATTERBOX_TURBO_HF_REPO,
+                    token=None,
+                    allow_patterns=[
+                        "*.safetensors", "*.json", "*.txt", "*.pt", "*.model",
+                    ],
+                )
+            finally:
+                tracker_context.__exit__(None, None, None)
+
+            # Monkey-patch torch.load for CPU loading. The model's .pt files
+            # were saved on CUDA; from_local() doesn't pass map_location
+            # so loading on CPU fails without this.
+            # Load into a local var, apply patches, then publish to
+            # self.model so a failed patch doesn't leave us half-initialised.
+            if device == "cpu":
+                _orig_torch_load = torch.load
+
+                def _patched_load(*args, **kwargs):
+                    kwargs.setdefault("map_location", "cpu")
+                    return _orig_torch_load(*args, **kwargs)
+
+                with ChatterboxTurboTTSBackend._load_lock:
+                    torch.load = _patched_load
+                    try:
+                        model = ChatterboxTurboTTS.from_local(
+                            local_path, device,
+                        )
+                    finally:
+                        torch.load = _orig_torch_load
+            else:
+                model = ChatterboxTurboTTS.from_local(
+                    local_path, device,
+                )
+
+            if not is_cached:
+                progress_manager.mark_complete(model_name)
+                task_manager.complete_download(model_name)
+
+            # Patch float64 → float32 dtype mismatches in upstream chatterbox.
+            # librosa.load returns float64 numpy; multiple upstream code paths
+            # convert it to a torch tensor via torch.from_numpy() without
+            # casting, then matmul it against float32 model weights.
+            # We patch the two known entry points:
+            #
+            # 1. S3Tokenizer.log_mel_spectrogram — the audio tensor from
+            #    librosa hits _mel_filters (float32) in a matmul.
+            # 2. VoiceEncoder.forward — float64 mel spectrograms hit the
+            #    float32 LSTM weights.
+            import types
+
+            # Patch S3Tokenizer (used by s3gen.tokenizer)
+            _tokzr = model.s3gen.tokenizer
+            _orig_log_mel = _tokzr.log_mel_spectrogram.__func__
+
+            def _f32_log_mel(self_tokzr, audio, padding=0):
+                import torch as _torch
+                if _torch.is_tensor(audio):
+                    audio = audio.float()
+                return _orig_log_mel(self_tokzr, audio, padding)
+
+            _tokzr.log_mel_spectrogram = types.MethodType(_f32_log_mel, _tokzr)
+
+            # Patch VoiceEncoder
+            _ve = model.ve
+            _orig_ve_forward = _ve.forward.__func__
+
+            def _f32_ve_forward(self_ve, mels):
+                return _orig_ve_forward(self_ve, mels.float())
+
+            _ve.forward = types.MethodType(_f32_ve_forward, _ve)
+
+            # Only publish after all patches succeed
+            self.model = model
+
+            logger.info("Chatterbox Turbo TTS loaded successfully")
+
+        except ImportError as e:
+            logger.error(
+                "chatterbox-tts package not found. "
+                "Install with: pip install chatterbox-tts"
+            )
+            if not is_cached:
+                progress_manager.mark_error(model_name, str(e))
+                task_manager.error_download(model_name, str(e))
+            raise
+        except Exception as e:
+            logger.error(f"Failed to load Chatterbox Turbo: {e}")
+            if not is_cached:
+                progress_manager.mark_error(model_name, str(e))
+                task_manager.error_download(model_name, str(e))
+            raise
+
+    def unload_model(self) -> None:
+        """Unload model to free memory."""
+        if self.model is not None:
+            device = self._device
+            del self.model
+            self.model = None
+            self._device = None
+            if device == "cuda":
+                import torch
+
+                torch.cuda.empty_cache()
+            logger.info("Chatterbox Turbo unloaded")
+
+    async def create_voice_prompt(
+        self,
+        audio_path: str,
+        reference_text: str,
+        use_cache: bool = True,
+    ) -> Tuple[dict, bool]:
+        """
+        Create voice prompt from reference audio.
+
+        Chatterbox Turbo processes reference audio at generation time, so the
+        prompt just stores the file path.
+        """
+        voice_prompt = {
+            "ref_audio": str(audio_path),
+            "ref_text": reference_text,
+        }
+        return voice_prompt, False
+
+    async def combine_voice_prompts(
+        self,
+        audio_paths: List[str],
+        reference_texts: List[str],
+    ) -> Tuple[np.ndarray, str]:
+        """Combine multiple reference samples."""
+        combined_audio = []
+        for path in audio_paths:
+            audio, _sr = load_audio(path)
+            audio = normalize_audio(audio)
+            combined_audio.append(audio)
+
+        mixed = np.concatenate(combined_audio)
+        mixed = normalize_audio(mixed)
+        combined_text = " ".join(reference_texts)
+        return mixed, combined_text
+
+    async def generate(
+        self,
+        text: str,
+        voice_prompt: dict,
+        language: str = "en",
+        seed: Optional[int] = None,
+        instruct: Optional[str] = None,
+    ) -> Tuple[np.ndarray, int]:
+        """
+        Generate audio using Chatterbox Turbo TTS.
+
+        Supports paralinguistic tags in text: [laugh], [cough], [chuckle], etc.
+
+        Args:
+            text: Text to synthesize (may include paralinguistic tags)
+            voice_prompt: Dict with ref_audio path
+            language: Ignored (Turbo is English-only)
+            seed: Random seed for reproducibility
+            instruct: Unused (protocol compatibility)
+
+        Returns:
+            Tuple of (audio_array, sample_rate)
+        """
+        await self.load_model()
+
+        ref_audio = voice_prompt.get("ref_audio")
+        if ref_audio and not Path(ref_audio).exists():
+            logger.warning(f"Reference audio not found: {ref_audio}")
+            ref_audio = None
+
+        def _generate_sync():
+            import torch
+
+            if seed is not None:
+                torch.manual_seed(seed)
+
+            logger.info("[Chatterbox Turbo] Generating (English)")
+
+            wav = self.model.generate(
+                text,
+                audio_prompt_path=ref_audio,
+                temperature=0.8,
+                top_k=1000,
+                top_p=0.95,
+                repetition_penalty=1.2,
+            )
+
+            # Convert tensor -> numpy
+            if isinstance(wav, torch.Tensor):
+                audio = wav.squeeze().cpu().numpy().astype(np.float32)
+            else:
+                audio = np.asarray(wav, dtype=np.float32)
+
+            sample_rate = (
+                getattr(self.model, "sr", None)
+                or getattr(self.model, "sample_rate", 24000)
+            )
+
+            return audio, sample_rate
+
+        return await asyncio.to_thread(_generate_sync)

backend/backends/luxtts_backend.py

@@ -0,0 +1,275 @@
+"""
+LuxTTS backend implementation.
+
+Wraps the LuxTTS (ZipVoice) model for zero-shot voice cloning.
+~1GB VRAM, 48kHz output, 150x realtime on CPU.
+"""
+
+import asyncio
+import logging
+from pathlib import Path
+from typing import List, Optional, Tuple
+
+import numpy as np
+
+from . import TTSBackend
+from ..utils.audio import normalize_audio, load_audio
+from ..utils.cache import get_cache_key, get_cached_voice_prompt, cache_voice_prompt
+from ..utils.progress import get_progress_manager
+from ..utils.tasks import get_task_manager
+
+logger = logging.getLogger(__name__)
+
+# HuggingFace repo for model weight detection
+LUXTTS_HF_REPO = "YatharthS/LuxTTS"
+
+
+class LuxTTSBackend:
+    """LuxTTS backend for zero-shot voice cloning."""
+
+    def __init__(self):
+        self.model = None
+        self.model_size = "default"  # LuxTTS has only one model size
+        self._device = None
+
+    def _get_device(self) -> str:
+        """Get the best available device."""
+        import torch
+
+        if torch.cuda.is_available():
+            return "cuda"
+        if hasattr(torch.backends, "mps") and torch.backends.mps.is_available():
+            return "mps"
+        return "cpu"
+
+    def is_loaded(self) -> bool:
+        return self.model is not None
+
+    @property
+    def device(self) -> str:
+        if self._device is None:
+            self._device = self._get_device()
+        return self._device
+
+    def _get_model_path(self, model_size: str) -> str:
+        return LUXTTS_HF_REPO
+
+    def _is_model_cached(self, model_size: str = "default") -> bool:
+        """Check if LuxTTS model weights are cached locally."""
+        try:
+            from huggingface_hub import constants as hf_constants
+
+            repo_cache = (
+                Path(hf_constants.HF_HUB_CACHE)
+                / ("models--" + LUXTTS_HF_REPO.replace("/", "--"))
+            )
+
+            if not repo_cache.exists():
+                return False
+
+            blobs_dir = repo_cache / "blobs"
+            if blobs_dir.exists() and any(blobs_dir.glob("*.incomplete")):
+                return False
+
+            snapshots_dir = repo_cache / "snapshots"
+            if snapshots_dir.exists():
+                has_weights = any(snapshots_dir.rglob("*.pt")) or any(
+                    snapshots_dir.rglob("*.safetensors")
+                ) or any(snapshots_dir.rglob("*.onnx")) or any(
+                    snapshots_dir.rglob("*.bin")
+                )
+                return has_weights
+
+            return False
+        except Exception as e:
+            logger.warning(f"Error checking LuxTTS cache: {e}")
+            return False
+
+    async def load_model(self, model_size: str = "default") -> None:
+        """Load the LuxTTS model."""
+        if self.model is not None:
+            return
+
+        await asyncio.to_thread(self._load_model_sync)
+
+    def _load_model_sync(self):
+        """Synchronous model loading."""
+        from ..utils.hf_progress import HFProgressTracker, create_hf_progress_callback
+
+        progress_manager = get_progress_manager()
+        task_manager = get_task_manager()
+        model_name = "luxtts"
+
+        is_cached = self._is_model_cached()
+
+        # Set up HF progress tracking (intercepts tqdm for file-level progress)
+        progress_callback = create_hf_progress_callback(model_name, progress_manager)
+        tracker = HFProgressTracker(progress_callback, filter_non_downloads=is_cached)
+        tracker_context = tracker.patch_download()
+        tracker_context.__enter__()
+
+        if not is_cached:
+            task_manager.start_download(model_name)
+            progress_manager.update_progress(
+                model_name=model_name,
+                current=0,
+                total=0,
+                filename="Connecting to HuggingFace...",
+                status="downloading",
+            )
+
+        try:
+            from zipvoice.luxvoice import LuxTTS
+
+            device = self.device
+            logger.info(f"Loading LuxTTS on {device}...")
+
+            # LuxTTS constructor downloads model and loads everything
+            try:
+                if device == "cpu":
+                    import os
+                    threads = os.cpu_count() or 4
+                    self.model = LuxTTS(
+                        model_path=LUXTTS_HF_REPO,
+                        device="cpu",
+                        threads=min(threads, 8),
+                    )
+                else:
+                    self.model = LuxTTS(
+                        model_path=LUXTTS_HF_REPO,
+                        device=device,
+                    )
+            finally:
+                tracker_context.__exit__(None, None, None)
+
+            if not is_cached:
+                progress_manager.mark_complete(model_name)
+                task_manager.complete_download(model_name)
+
+            logger.info("LuxTTS loaded successfully")
+
+        except Exception as e:
+            logger.error(f"Failed to load LuxTTS: {e}")
+            if not is_cached:
+                progress_manager.mark_error(model_name, str(e))
+                task_manager.error_download(model_name, str(e))
+            raise
+
+    def unload_model(self) -> None:
+        """Unload model to free memory."""
+        if self.model is not None:
+            del self.model
+            self.model = None
+
+            import torch
+            if torch.cuda.is_available():
+                torch.cuda.empty_cache()
+
+            logger.info("LuxTTS unloaded")
+
+    async def create_voice_prompt(
+        self,
+        audio_path: str,
+        reference_text: str,
+        use_cache: bool = True,
+    ) -> Tuple[dict, bool]:
+        """
+        Create voice prompt from reference audio.
+
+        LuxTTS uses its own encode_prompt() which runs Whisper ASR internally
+        to transcribe the reference. The reference_text parameter is not used
+        by LuxTTS itself, but we include it in the cache key for consistency.
+        """
+        await self.load_model()
+
+        # Compute cache key once for both lookup and storage
+        cache_key = ("luxtts_" + get_cache_key(audio_path, reference_text)) if use_cache else None
+
+        if cache_key:
+            cached = get_cached_voice_prompt(cache_key)
+            if cached is not None and isinstance(cached, dict):
+                return cached, True
+
+        def _encode_sync():
+            return self.model.encode_prompt(
+                prompt_audio=str(audio_path),
+                duration=5,
+                rms=0.01,
+            )
+
+        encoded = await asyncio.to_thread(_encode_sync)
+
+        if cache_key:
+            cache_voice_prompt(cache_key, encoded)
+
+        return encoded, False
+
+    async def combine_voice_prompts(
+        self,
+        audio_paths: List[str],
+        reference_texts: List[str],
+    ) -> Tuple[np.ndarray, str]:
+        """
+        Combine multiple reference samples.
+
+        LuxTTS doesn't have native multi-prompt support, so we concatenate
+        the audio and let encode_prompt handle the combined clip.
+        """
+        combined_audio = []
+        for path in audio_paths:
+            audio, _sr = load_audio(path, sample_rate=24000)
+            audio = normalize_audio(audio)
+            combined_audio.append(audio)
+
+        mixed = np.concatenate(combined_audio)
+        mixed = normalize_audio(mixed)
+        combined_text = " ".join(reference_texts)
+
+        return mixed, combined_text
+
+    async def generate(
+        self,
+        text: str,
+        voice_prompt: dict,
+        language: str = "en",
+        seed: Optional[int] = None,
+        instruct: Optional[str] = None,
+    ) -> Tuple[np.ndarray, int]:
+        """
+        Generate audio from text using LuxTTS.
+
+        Args:
+            text: Text to synthesize
+            voice_prompt: Encoded prompt dict from encode_prompt()
+            language: Language code (LuxTTS is English-focused)
+            seed: Random seed for reproducibility
+            instruct: Not supported by LuxTTS (ignored)
+
+        Returns:
+            Tuple of (audio_array, sample_rate)
+        """
+        await self.load_model()
+
+        def _generate_sync():
+            import torch
+
+            if seed is not None:
+                torch.manual_seed(seed)
+                if torch.cuda.is_available():
+                    torch.cuda.manual_seed(seed)
+
+            wav = self.model.generate_speech(
+                text=text,
+                encode_dict=voice_prompt,
+                num_steps=4,
+                guidance_scale=3.0,
+                t_shift=0.5,
+                speed=1.0,
+                return_smooth=False,  # 48kHz output
+            )
+
+            # LuxTTS returns a tensor (may be on GPU/MPS), move to CPU first
+            audio = wav.detach().cpu().numpy().squeeze()
+            return audio, 48000
+
+        return await asyncio.to_thread(_generate_sync)

backend/backends/mlx_backend.py

@@ -5,8 +5,15 @@ MLX backend implementation for TTS and STT using mlx-audio.
 from typing import Optional, List, Tuple
 import asyncio
 import numpy as np
+import os
 from pathlib import Path
 
+# PATCH: Import and apply offline patch BEFORE any huggingface_hub usage
+# This prevents mlx_audio from making network requests when models are cached
+from ..utils.hf_offline_patch import patch_huggingface_hub_offline, ensure_original_qwen_config_cached
+patch_huggingface_hub_offline()
+ensure_original_qwen_config_cached()
+
 from . import TTSBackend, STTBackend
 from ..utils.cache import get_cache_key, get_cached_voice_prompt, cache_voice_prompt
 from ..utils.audio import normalize_audio, load_audio
@@ -14,6 +21,12 @@ from ..utils.progress import get_progress_manager
 from ..utils.hf_progress import HFProgressTracker, create_hf_progress_callback
 from ..utils.tasks import get_task_manager
 
+LANGUAGE_CODE_TO_NAME = {
+    "zh": "chinese", "en": "english", "ja": "japanese", "ko": "korean",
+    "de": "german", "fr": "french", "ru": "russian", "pt": "portuguese",
+    "es": "spanish", "it": "italian",
+}
+
 
 class MLXTTSBackend:
     """MLX-based TTS backend using mlx-audio."""
@@ -159,15 +172,35 @@ class MLXTTSBackend:
             tracker_context = tracker.patch_download()
             tracker_context.__enter__()
             
+            # PATCH: Force offline mode when model is already cached
+            # This prevents crashes when HuggingFace is unreachable
+            original_hf_hub_offline = os.environ.get("HF_HUB_OFFLINE")
+            if is_cached:
+                os.environ["HF_HUB_OFFLINE"] = "1"
+                print(f"[PATCH] Model {model_size} is cached, forcing HF_HUB_OFFLINE=1 to avoid network requests")
+            
             # Import mlx_audio AFTER patching tqdm
             from mlx_audio.tts import load
             
             # Load MLX model (downloads automatically)
             try:
                 self.model = load(model_path)
+            except Exception as load_error:
+                # If offline mode failed, try with network enabled as fallback
+                if is_cached and "offline" in str(load_error).lower():
+                    print(f"[PATCH] Offline load failed, trying with network: {load_error}")
+                    os.environ.pop("HF_HUB_OFFLINE", None)
+                    self.model = load(model_path)
+                else:
+                    raise
             finally:
                 # Exit the patch context
                 tracker_context.__exit__(None, None, None)
+                # Restore original HF_HUB_OFFLINE setting
+                if original_hf_hub_offline is not None:
+                    os.environ["HF_HUB_OFFLINE"] = original_hf_hub_offline
+                else:
+                    os.environ.pop("HF_HUB_OFFLINE", None)
             
             # Only mark download as complete if we were tracking it
             if not is_cached:
@@ -316,7 +349,8 @@ class MLXTTSBackend:
             # MLX generate() returns a generator yielding GenerationResult objects
             audio_chunks = []
             sample_rate = 24000
-            
+            lang = LANGUAGE_CODE_TO_NAME.get(language, "auto")
+
             # Set seed if provided (MLX uses numpy random)
             if seed is not None:
                 import mlx.core as mx
@@ -344,23 +378,23 @@ class MLXTTSBackend:
                     sig = inspect.signature(self.model.generate)
                     if "ref_audio" in sig.parameters:
                         # Generate with voice cloning
-                        for result in self.model.generate(text, ref_audio=ref_audio, ref_text=ref_text):
+                        for result in self.model.generate(text, ref_audio=ref_audio, ref_text=ref_text, lang_code=lang):
                             audio_chunks.append(np.array(result.audio))
                             sample_rate = result.sample_rate
                     else:
                         # Fallback: generate without voice cloning
-                        for result in self.model.generate(text):
+                        for result in self.model.generate(text, lang_code=lang):
                             audio_chunks.append(np.array(result.audio))
                             sample_rate = result.sample_rate
                 else:
                     # No voice prompt, generate normally
-                    for result in self.model.generate(text):
+                    for result in self.model.generate(text, lang_code=lang):
                         audio_chunks.append(np.array(result.audio))
                         sample_rate = result.sample_rate
             except Exception as e:
                 # If voice cloning fails, try without it
                 print(f"Warning: Voice cloning failed, generating without voice prompt: {e}")
-                for result in self.model.generate(text):
+                for result in self.model.generate(text, lang_code=lang):
                     audio_chunks.append(np.array(result.audio))
                     sample_rate = result.sample_rate
             
@@ -379,9 +413,17 @@ class MLXTTSBackend:
         return audio, sample_rate
 
 
+WHISPER_HF_REPOS = {
+    "base": "openai/whisper-base",
+    "small": "openai/whisper-small",
+    "medium": "openai/whisper-medium",
+    "large": "openai/whisper-large-v3",
+}
+
+
 class MLXSTTBackend:
     """MLX-based STT backend using mlx-audio Whisper."""
-    
+
     def __init__(self, model_size: str = "base"):
         self.model = None
         self.model_size = model_size
@@ -402,8 +444,8 @@ class MLXSTTBackend:
         """
         try:
             from huggingface_hub import constants as hf_constants
-            model_name = f"openai/whisper-{model_size}"
-            repo_cache = Path(hf_constants.HF_HUB_CACHE) / ("models--" + model_name.replace("/", "--"))
+            hf_repo = WHISPER_HF_REPOS.get(model_size, f"openai/whisper-{model_size}")
+            repo_cache = Path(hf_constants.HF_HUB_CACHE) / ("models--" + hf_repo.replace("/", "--"))
             
             if not repo_cache.exists():
                 return False
@@ -474,7 +516,7 @@ class MLXSTTBackend:
             from mlx_audio.stt import load
 
             # MLX Whisper uses the standard OpenAI models
-            model_name = f"openai/whisper-{model_size}"
+            model_name = WHISPER_HF_REPOS.get(model_size, f"openai/whisper-{model_size}")
 
             print(f"Loading MLX Whisper model {model_size}...")
 

backend/backends/pytorch_backend.py

@@ -15,6 +15,12 @@ from ..utils.progress import get_progress_manager
 from ..utils.hf_progress import HFProgressTracker, create_hf_progress_callback
 from ..utils.tasks import get_task_manager
 
+LANGUAGE_CODE_TO_NAME = {
+    "zh": "chinese", "en": "english", "ja": "japanese", "ko": "korean",
+    "de": "german", "fr": "french", "ru": "russian", "pt": "portuguese",
+    "es": "spanish", "it": "italian",
+}
+
 
 class PyTorchTTSBackend:
     """PyTorch-based TTS backend using Qwen3-TTS."""
@@ -29,9 +35,23 @@ class PyTorchTTSBackend:
         """Get the best available device."""
         if torch.cuda.is_available():
             return "cuda"
-        elif hasattr(torch.backends, 'mps') and torch.backends.mps.is_available():
-            # MPS can have issues, use CPU for stability
-            return "cpu"
+        # Intel Arc / Intel Xe GPU via intel-extension-for-pytorch (IPEX)
+        try:
+            import intel_extension_for_pytorch  # noqa: F401
+            if hasattr(torch, 'xpu') and torch.xpu.is_available():
+                return "xpu"
+        except ImportError:
+            pass
+        # Any GPU on Windows via DirectML (torch-directml)
+        try:
+            import torch_directml
+            if torch_directml.device_count() > 0:
+                return torch_directml.device(0)
+        except ImportError:
+            pass
+        # MPS (Apple Silicon) — kept for completeness but MLX backend is preferred
+        if hasattr(torch.backends, 'mps') and torch.backends.mps.is_available():
+            return "cpu"  # MPS disabled for stability; MLX backend handles Apple Silicon
         return "cpu"
     
     def is_loaded(self) -> bool:
@@ -166,11 +186,21 @@ class PyTorchTTSBackend:
 
             # Load the model (tqdm is patched, but filters out non-download progress)
             try:
-                self.model = Qwen3TTSModel.from_pretrained(
-                    model_path,
-                    device_map=self.device,
-                    torch_dtype=torch.float32 if self.device == "cpu" else torch.bfloat16,
-                )
+                # Don't pass device_map on CPU: accelerate's meta-tensor mechanism
+                # causes "Cannot copy out of meta tensor" when moving to CPU.
+                # Instead load directly then call .to(device) if needed.
+                if self.device == "cpu":
+                    self.model = Qwen3TTSModel.from_pretrained(
+                        model_path,
+                        torch_dtype=torch.float32,
+                        low_cpu_mem_usage=False,
+                    )
+                else:
+                    self.model = Qwen3TTSModel.from_pretrained(
+                        model_path,
+                        device_map=self.device,
+                        torch_dtype=torch.bfloat16,
+                    )
             finally:
                 # Exit the patch context
                 tracker_context.__exit__(None, None, None)
@@ -335,6 +365,7 @@ class PyTorchTTSBackend:
             wavs, sample_rate = self.model.generate_voice_clone(
                 text=text,
                 voice_clone_prompt=voice_prompt,
+                language=LANGUAGE_CODE_TO_NAME.get(language, "auto"),
                 instruct=instruct,
             )
             return wavs[0], sample_rate
@@ -345,9 +376,18 @@ class PyTorchTTSBackend:
         return audio, sample_rate
 
 
+WHISPER_HF_REPOS = {
+    "base": "openai/whisper-base",
+    "small": "openai/whisper-small",
+    "medium": "openai/whisper-medium",
+    "large": "openai/whisper-large-v3",
+    "turbo": "openai/whisper-large-v3-turbo",
+}
+
+
 class PyTorchSTTBackend:
     """PyTorch-based STT backend using Whisper."""
-    
+
     def __init__(self, model_size: str = "base"):
         self.model = None
         self.processor = None
@@ -358,9 +398,22 @@ class PyTorchSTTBackend:
         """Get the best available device."""
         if torch.cuda.is_available():
             return "cuda"
-        elif hasattr(torch.backends, 'mps') and torch.backends.mps.is_available():
-            # MPS support for Whisper
-            return "cpu"  # Use CPU for stability
+        # Intel Arc / Intel Xe GPU via intel-extension-for-pytorch (IPEX)
+        try:
+            import intel_extension_for_pytorch  # noqa: F401
+            if hasattr(torch, 'xpu') and torch.xpu.is_available():
+                return "xpu"
+        except ImportError:
+            pass
+        # Any GPU on Windows via DirectML (torch-directml)
+        try:
+            import torch_directml
+            if torch_directml.device_count() > 0:
+                return torch_directml.device(0)
+        except ImportError:
+            pass
+        if hasattr(torch.backends, 'mps') and torch.backends.mps.is_available():
+            return "cpu"  # MPS disabled for stability
         return "cpu"
     
     def is_loaded(self) -> bool:
@@ -379,18 +432,18 @@ class PyTorchSTTBackend:
         """
         try:
             from huggingface_hub import constants as hf_constants
-            model_name = f"openai/whisper-{model_size}"
-            repo_cache = Path(hf_constants.HF_HUB_CACHE) / ("models--" + model_name.replace("/", "--"))
-            
+            hf_repo = WHISPER_HF_REPOS.get(model_size, f"openai/whisper-{model_size}")
+            repo_cache = Path(hf_constants.HF_HUB_CACHE) / ("models--" + hf_repo.replace("/", "--"))
+
             if not repo_cache.exists():
                 return False
-            
+
             # Check for .incomplete files - if any exist, download is still in progress
             blobs_dir = repo_cache / "blobs"
             if blobs_dir.exists() and any(blobs_dir.glob("*.incomplete")):
                 print(f"[_is_model_cached] Found .incomplete files for whisper-{model_size}, treating as not cached")
                 return False
-            
+
             # Check that actual model weight files exist in snapshots
             snapshots_dir = repo_cache / "snapshots"
             if snapshots_dir.exists():
@@ -401,12 +454,12 @@ class PyTorchSTTBackend:
                 if not has_weights:
                     print(f"[_is_model_cached] No model weights found for whisper-{model_size}, treating as not cached")
                     return False
-            
+
             return True
         except Exception as e:
             print(f"[_is_model_cached] Error checking cache for whisper-{model_size}: {e}")
             return False
-    
+
     async def load_model_async(self, model_size: Optional[str] = None):
         """
         Lazy load the Whisper model.
@@ -457,7 +510,7 @@ class PyTorchSTTBackend:
             # Import transformers
             from transformers import WhisperProcessor, WhisperForConditionalGeneration
 
-            model_name = f"openai/whisper-{model_size}"
+            model_name = WHISPER_HF_REPOS.get(model_size, f"openai/whisper-{model_size}")
             print(f"[DEBUG] Model name: {model_name}")
 
             print(f"Loading Whisper model {model_size} on {self.device}...")
@@ -546,21 +599,20 @@ class PyTorchSTTBackend:
             )
             inputs = inputs.to(self.device)
             
-            # Set language if provided
-            forced_decoder_ids = None
+            # Generate transcription
+            # If language is provided, force it; otherwise let Whisper auto-detect
+            generate_kwargs = {}
             if language:
-                # Support all languages from frontend: en, zh, ja, ko, de, fr, ru, pt, es, it
-                # Whisper supports these and many more
                 forced_decoder_ids = self.processor.get_decoder_prompt_ids(
                     language=language,
                     task="transcribe",
                 )
+                generate_kwargs["forced_decoder_ids"] = forced_decoder_ids
             
-            # Generate transcription
             with torch.no_grad():
                 predicted_ids = self.model.generate(
                     inputs["input_features"],
-                    forced_decoder_ids=forced_decoder_ids,
+                    **generate_kwargs,
                 )
             
             # Decode

backend/build_binary.py

@@ -1,8 +1,13 @@
 """
 PyInstaller build script for creating standalone Python server binary.
+
+Usage:
+    python build_binary.py           # Build default (CPU) server binary
+    python build_binary.py --cuda    # Build CUDA-enabled server binary
 """
 
 import PyInstaller.__main__
+import argparse
 import os
 import platform
 from pathlib import Path
@@ -13,15 +18,22 @@ def is_apple_silicon():
     return platform.system() == "Darwin" and platform.machine() == "arm64"
 
 
-def build_server():
-    """Build Python server as standalone binary."""
+def build_server(cuda=False):
+    """Build Python server as standalone binary.
+
+    Args:
+        cuda: If True, build with CUDA support and name the binary
+              voicebox-server-cuda instead of voicebox-server.
+    """
     backend_dir = Path(__file__).parent
 
+    binary_name = 'voicebox-server-cuda' if cuda else 'voicebox-server'
+
     # PyInstaller arguments
     args = [
         'server.py',  # Use server.py as entry point instead of main.py
         '--onefile',
-        '--name', 'voicebox-server',
+        '--name', binary_name,
     ]
 
     # Add local qwen_tts path if specified (for editable installs)
@@ -30,7 +42,7 @@ def build_server():
         args.extend(['--paths', str(qwen_tts_path)])
         print(f"Using local qwen_tts source from: {qwen_tts_path}")
 
-    # Add common hidden imports (always included)
+    # Add common hidden imports
     args.extend([
         '--hidden-import', 'backend',
         '--hidden-import', 'backend.main',
@@ -42,42 +54,59 @@ def build_server():
         '--hidden-import', 'backend.tts',
         '--hidden-import', 'backend.transcribe',
         '--hidden-import', 'backend.platform_detect',
-        '--hidden-import', 'backend.providers',
-        '--hidden-import', 'backend.providers.base',
-        '--hidden-import', 'backend.providers.bundled',
-        '--hidden-import', 'backend.providers.types',
+        '--hidden-import', 'backend.backends',
+        '--hidden-import', 'backend.backends.pytorch_backend',
         '--hidden-import', 'backend.utils.audio',
         '--hidden-import', 'backend.utils.cache',
         '--hidden-import', 'backend.utils.progress',
         '--hidden-import', 'backend.utils.hf_progress',
         '--hidden-import', 'backend.utils.validation',
-        '--hidden-import', 'numpy',
-        '--hidden-import', 'numpy.core',
-        '--hidden-import', 'numpy.core._multiarray_umath',
-        '--hidden-import', 'scipy',
-        '--hidden-import', 'scipy.signal',
+        '--hidden-import', 'backend.cuda_download',
+        '--hidden-import', 'torch',
+        '--hidden-import', 'transformers',
         '--hidden-import', 'fastapi',
         '--hidden-import', 'uvicorn',
         '--hidden-import', 'sqlalchemy',
         '--hidden-import', 'librosa',
         '--hidden-import', 'soundfile',
+        '--hidden-import', 'qwen_tts',
+        '--hidden-import', 'qwen_tts.inference',
+        '--hidden-import', 'qwen_tts.inference.qwen3_tts_model',
+        '--hidden-import', 'qwen_tts.inference.qwen3_tts_tokenizer',
+        '--hidden-import', 'qwen_tts.core',
+        '--hidden-import', 'qwen_tts.cli',
+        '--copy-metadata', 'qwen-tts',
+        '--collect-submodules', 'qwen_tts',
+        '--collect-data', 'qwen_tts',
         # Fix for pkg_resources and jaraco namespace packages
         '--hidden-import', 'pkg_resources.extern',
         '--collect-submodules', 'jaraco',
-        # Asyncio and threading support for PyInstaller
-        '--hidden-import', 'asyncio',
-        '--hidden-import', 'asyncio.subprocess',
-        '--hidden-import', 'concurrent.futures',
-        '--hidden-import', 'concurrent.futures.thread',
     ])
 
-    # Platform-specific TTS backend handling
-    system = platform.system()
-
-    if is_apple_silicon():
-        print("Building for Apple Silicon - including MLX dependencies (bundled)")
+    # Add CUDA-specific hidden imports
+    if cuda:
+        print("Building with CUDA support")
+        args.extend([
+            '--hidden-import', 'torch.cuda',
+            '--hidden-import', 'torch.backends.cudnn',
+        ])
+    else:
+        # Exclude NVIDIA CUDA packages from CPU-only builds to keep binary under 4GB.
+        # On Linux, pip may pull CUDA-enabled PyTorch by default which includes ~3GB
+        # of NVIDIA shared libraries that PyInstaller would bundle.
+        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:
+        print("Building for Apple Silicon - including MLX dependencies")
         args.extend([
-            '--hidden-import', 'backend.backends',
             '--hidden-import', 'backend.backends.mlx_backend',
             '--hidden-import', 'mlx',
             '--hidden-import', 'mlx.core',
@@ -87,35 +116,16 @@ def build_server():
             '--hidden-import', 'mlx_audio.stt',
             '--collect-submodules', 'mlx',
             '--collect-submodules', 'mlx_audio',
-            # Collect MLX data files including Metal shader libraries (.metallib)
-            '--collect-data', 'mlx',
-            '--collect-data', 'mlx_audio',
-        ])
-    elif system == "Windows" or (system == "Darwin" and not is_apple_silicon()):
-        # Windows and Intel macOS: Bundle PyTorch CPU provider
-        print(f"Building for {system} - including PyTorch CPU provider (bundled)")
-        args.extend([
-            '--hidden-import', 'backend.backends',
-            '--hidden-import', 'backend.backends.pytorch_backend',
-            '--hidden-import', 'torch',
-            '--hidden-import', 'transformers',
-            '--hidden-import', 'qwen_tts',
-            '--hidden-import', 'qwen_tts.inference',
-            '--hidden-import', 'qwen_tts.inference.qwen3_tts_model',
-            '--hidden-import', 'qwen_tts.inference.qwen3_tts_tokenizer',
-            '--hidden-import', 'qwen_tts.core',
-            '--hidden-import', 'qwen_tts.cli',
-            '--copy-metadata', 'qwen-tts',
-            '--collect-submodules', 'qwen_tts',
-            '--collect-data', 'qwen_tts',
-        ])
-    else:
-        # Linux: No bundled provider - users download providers separately
-        print("Building for Linux - no bundled provider (users download separately)")
-        args.extend([
-            '--hidden-import', 'backend.backends',
-            '--hidden-import', 'backend.backends.pytorch_backend',
+            # Use --collect-all so PyInstaller bundles both data files AND
+            # native shared libraries (.dylib, .metallib) for MLX.
+            # Previously only --collect-data was used, which caused MLX to
+            # raise OSError at runtime inside the bundled binary because
+            # the Metal shader libraries were missing.
+            '--collect-all', 'mlx',
+            '--collect-all', 'mlx_audio',
         ])
+    elif not cuda:
+        print("Building for non-Apple Silicon platform - PyTorch only")
 
     args.extend([
         '--noconfirm',
@@ -128,8 +138,15 @@ def build_server():
     # Run PyInstaller
     PyInstaller.__main__.run(args)
     
-    print(f"Binary built in {backend_dir / 'dist' / 'voicebox-server'}")
+    print(f"Binary built in {backend_dir / 'dist' / binary_name}")
 
 
 if __name__ == '__main__':
-    build_server()
+    parser = argparse.ArgumentParser(description="Build voicebox-server binary")
+    parser.add_argument(
+        '--cuda',
+        action='store_true',
+        help="Build CUDA-enabled binary (voicebox-server-cuda)",
+    )
+    cli_args = parser.parse_args()
+    build_server(cuda=cli_args.cuda)

backend/config.py

@@ -4,8 +4,17 @@ Configuration module for voicebox backend.
 Handles data directory configuration for production bundling.
 """
 
+import os
 from pathlib import Path
 
+# Allow users to override the HuggingFace model download directory.
+# Set VOICEBOX_MODELS_DIR to an absolute path before starting the server.
+# This sets HF_HUB_CACHE so all huggingface_hub downloads go to that path.
+_custom_models_dir = os.environ.get("VOICEBOX_MODELS_DIR")
+if _custom_models_dir:
+    os.environ["HF_HUB_CACHE"] = _custom_models_dir
+    print(f"[config] Model download path set to: {_custom_models_dir}")
+
 # Default data directory (used in development)
 _data_dir = Path("data")
 

backend/cuda_download.py

@@ -0,0 +1,198 @@
+"""
+CUDA backend binary download, assembly, and verification.
+
+Downloads split parts of the CUDA-enabled voicebox-server binary from
+GitHub Releases, reassembles them, verifies integrity via SHA-256,
+and places the binary in the app's data directory for use on next
+backend restart.
+"""
+
+import hashlib
+import logging
+import os
+import sys
+from pathlib import Path
+from typing import Optional
+
+from .config import get_data_dir
+from .utils.progress import get_progress_manager
+from . import __version__
+
+logger = logging.getLogger(__name__)
+
+GITHUB_RELEASES_URL = "https://github.com/jamiepine/voicebox/releases/download"
+
+PROGRESS_KEY = "cuda-backend"
+
+
+def get_backends_dir() -> Path:
+    """Directory where downloaded backend binaries are stored."""
+    d = get_data_dir() / "backends"
+    d.mkdir(parents=True, exist_ok=True)
+    return d
+
+
+def get_cuda_binary_name() -> str:
+    """Platform-specific CUDA binary filename."""
+    if sys.platform == "win32":
+        return "voicebox-server-cuda.exe"
+    return "voicebox-server-cuda"
+
+
+def get_cuda_binary_path() -> Optional[Path]:
+    """Return path to CUDA binary if it exists."""
+    p = get_backends_dir() / get_cuda_binary_name()
+    if p.exists():
+        return p
+    return None
+
+
+def is_cuda_active() -> bool:
+    """Check if the current process is the CUDA binary.
+
+    The CUDA binary sets this env var on startup (see server.py).
+    """
+    return os.environ.get("VOICEBOX_BACKEND_VARIANT") == "cuda"
+
+
+def get_cuda_status() -> dict:
+    """Get current CUDA backend status for the API."""
+    progress_manager = get_progress_manager()
+    cuda_path = get_cuda_binary_path()
+    progress = progress_manager.get_progress(PROGRESS_KEY)
+
+    return {
+        "available": cuda_path is not None,
+        "active": is_cuda_active(),
+        "binary_path": str(cuda_path) if cuda_path else None,
+        "downloading": progress is not None and progress.get("status") == "downloading",
+        "download_progress": progress,
+    }
+
+
+async def download_cuda_binary(version: Optional[str] = None):
+    """Download the CUDA backend binary from GitHub Releases.
+
+    Downloads split parts listed in a manifest file, concatenates them,
+    and verifies the SHA-256 checksum for integrity. Atomic write
+    (temp file -> rename).
+
+    Args:
+        version: Version tag (e.g. "v0.2.0"). Defaults to current app version.
+    """
+    import httpx
+
+    if version is None:
+        version = f"v{__version__}"
+
+    progress = get_progress_manager()
+    binary_name = get_cuda_binary_name()
+    dest_dir = get_backends_dir()
+    final_path = dest_dir / binary_name
+    temp_path = dest_dir / f"{binary_name}.download"
+
+    # Clean up any leftover partial download
+    if temp_path.exists():
+        temp_path.unlink()
+
+    logger.info(f"Starting CUDA backend download for {version}")
+    progress.update_progress(
+        PROGRESS_KEY, current=0, total=0,
+        filename="Fetching manifest...", status="downloading",
+    )
+
+    base_url = f"{GITHUB_RELEASES_URL}/{version}"
+    stem = Path(binary_name).stem  # voicebox-server-cuda
+
+    try:
+        async with httpx.AsyncClient(follow_redirects=True, timeout=30.0) as client:
+            # Fetch the manifest (list of split part filenames)
+            manifest_url = f"{base_url}/{stem}.manifest"
+            manifest_resp = await client.get(manifest_url)
+            manifest_resp.raise_for_status()
+            parts = [p.strip() for p in manifest_resp.text.strip().splitlines() if p.strip()]
+
+            if not parts:
+                raise ValueError("Empty manifest — no split parts found")
+
+            logger.info(f"Found {len(parts)} split parts to download")
+
+            # Fetch expected checksum (optional — for integrity verification)
+            expected_sha = None
+            try:
+                sha_url = f"{base_url}/{stem}.sha256"
+                sha_resp = await client.get(sha_url)
+                if sha_resp.status_code == 200:
+                    # Format: "sha256hex  filename\n"
+                    expected_sha = sha_resp.text.strip().split()[0]
+                    logger.info(f"Expected SHA-256: {expected_sha[:16]}...")
+            except Exception as e:
+                logger.warning(f"Could not fetch checksum file — skipping verification: {e}")
+
+            # Download and concatenate parts
+            total_downloaded = 0
+            with open(temp_path, "wb") as f:
+                for i, part_name in enumerate(parts):
+                    part_url = f"{base_url}/{part_name}"
+                    logger.info(f"Downloading part {i + 1}/{len(parts)}: {part_name}")
+
+                    async with client.stream("GET", part_url) as response:
+                        response.raise_for_status()
+                        async for chunk in response.aiter_bytes(chunk_size=1024 * 1024):
+                            f.write(chunk)
+                            total_downloaded += len(chunk)
+                            progress.update_progress(
+                                PROGRESS_KEY, current=total_downloaded, total=0,
+                                filename=f"Part {i + 1}/{len(parts)}",
+                                status="downloading",
+                            )
+
+        # Verify integrity if checksum was available
+        if expected_sha:
+            progress.update_progress(
+                PROGRESS_KEY, current=total_downloaded, total=total_downloaded,
+                filename="Verifying integrity...", status="downloading",
+            )
+            sha256 = hashlib.sha256()
+            with open(temp_path, "rb") as f:
+                while True:
+                    chunk = f.read(1024 * 1024)
+                    if not chunk:
+                        break
+                    sha256.update(chunk)
+
+            actual = sha256.hexdigest()
+            if actual != expected_sha:
+                raise ValueError(
+                    f"Integrity check failed: expected {expected_sha[:16]}..., "
+                    f"got {actual[:16]}..."
+                )
+            logger.info(f"Integrity verified: {actual[:16]}...")
+
+        # Atomic move into place (replace handles existing target on all platforms)
+        temp_path.replace(final_path)
+
+        # Make executable on Unix
+        if sys.platform != "win32":
+            final_path.chmod(0o755)
+
+        logger.info(f"CUDA backend downloaded to {final_path}")
+        progress.mark_complete(PROGRESS_KEY)
+
+    except Exception as e:
+        # Clean up on failure
+        if temp_path.exists():
+            temp_path.unlink()
+        logger.error(f"CUDA backend download failed: {e}")
+        progress.mark_error(PROGRESS_KEY, str(e))
+        raise
+
+
+async def delete_cuda_binary() -> bool:
+    """Delete the downloaded CUDA binary. Returns True if deleted."""
+    path = get_cuda_binary_path()
+    if path and path.exists():
+        path.unlink()
+        logger.info(f"Deleted CUDA binary: {path}")
+        return True
+    return False

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()