Bump version: 0.1.5 → 0.1.6

- Cleaned up import statements for better structure and consistency.
- Adjusted formatting and spacing in the FloatingGenerateBox component for enhanced readability.
- Streamlined the use of hooks and state management within the component.
- Ensured consistent styling and layout adjustments for better user experience.

.bumpversion.cfg

@@ -0,0 +1,39 @@
+[bumpversion]
+current_version = 0.1.6
+commit = True
+tag = True
+tag_name = v{new_version}
+tag_message = Release v{new_version}
+message = Bump version: {current_version} → {new_version}
+
+[bumpversion:file:tauri/src-tauri/tauri.conf.json]
+search = "version": "{current_version}"
+replace = "version": "{new_version}"
+
+[bumpversion:file:tauri/src-tauri/Cargo.toml]
+search = version = "{current_version}"
+replace = version = "{new_version}"
+
+[bumpversion:file:package.json]
+search = "version": "{current_version}"
+replace = "version": "{new_version}"
+
+[bumpversion:file:app/package.json]
+search = "version": "{current_version}"
+replace = "version": "{new_version}"
+
+[bumpversion:file:tauri/package.json]
+search = "version": "{current_version}"
+replace = "version": "{new_version}"
+
+[bumpversion:file:landing/package.json]
+search = "version": "{current_version}"
+replace = "version": "{new_version}"
+
+[bumpversion:file:web/package.json]
+search = "version": "{current_version}"
+replace = "version": "{new_version}"
+
+[bumpversion:file:backend/main.py]
+search = "version": "{current_version}"
+replace = "version": "{new_version}"

.github/workflows/release.yml

@@ -20,9 +20,9 @@ jobs:
           - platform: 'macos-15-intel'
             args: '--target x86_64-apple-darwin'
             python-version: '3.12'
-          - platform: 'ubuntu-22.04'
+          # - platform: 'ubuntu-22.04'
-            args: ''
+          #   args: ''
-            python-version: '3.12'
+          #   python-version: '3.12'
           - platform: 'windows-latest'
             args: ''
             python-version: '3.12'
@@ -41,9 +41,9 @@ jobs:
       - name: Install LLVM (macOS)
         if: matrix.platform == 'macos-latest' || matrix.platform == 'macos-15-intel'
         run: |
-          brew install llvm
+          brew install llvm@20
-          echo "$(brew --prefix llvm)/bin" >> $GITHUB_PATH
+          echo "$(brew --prefix llvm@20)/bin" >> $GITHUB_PATH
-          echo "LLVM_CONFIG=$(brew --prefix llvm)/bin/llvm-config" >> $GITHUB_ENV
+          echo "LLVM_CONFIG=$(brew --prefix llvm@20)/bin/llvm-config" >> $GITHUB_ENV
 
       - name: Setup Python
         uses: actions/setup-python@v5
@@ -96,11 +96,34 @@ jobs:
       - name: Install dependencies
         run: bun install
 
+      - name: Install Apple API key
+        if: matrix.platform == 'macos-latest' || matrix.platform == 'macos-15-intel'
+        run: |
+          mkdir -p ~/.appstoreconnect/private_keys/
+          cd ~/.appstoreconnect/private_keys/
+          echo ${{ secrets.APPLE_API_KEY_BASE64 }} >> AuthKey_${{ secrets.APPLE_API_KEY }}.p8.base64
+          base64 --decode -i AuthKey_${{ secrets.APPLE_API_KEY }}.p8.base64 -o AuthKey_${{ secrets.APPLE_API_KEY }}.p8
+          rm AuthKey_${{ secrets.APPLE_API_KEY }}.p8.base64
+
+      - name: Install Codesigning Certificate
+        if: matrix.platform == 'macos-latest' || matrix.platform == 'macos-15-intel'
+        uses: apple-actions/import-codesign-certs@v3
+        with:
+          p12-file-base64: ${{ secrets.APPLE_CERTIFICATE }}
+          p12-password: ${{ secrets.APPLE_CERTIFICATE_PASSWORD }}
+
       - uses: tauri-apps/tauri-action@v0
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
           TAURI_SIGNING_PRIVATE_KEY: ${{ secrets.TAURI_SIGNING_PRIVATE_KEY }}
           TAURI_SIGNING_PRIVATE_KEY_PASSWORD: ${{ secrets.TAURI_SIGNING_PRIVATE_KEY_PASSWORD }}
+          ENABLE_CODE_SIGNING: ${{ secrets.APPLE_CERTIFICATE }}
+          APPLE_CERTIFICATE: ${{ secrets.APPLE_CERTIFICATE }}
+          APPLE_CERTIFICATE_PASSWORD: ${{ secrets.APPLE_CERTIFICATE_PASSWORD }}
+          APPLE_SIGNING_IDENTITY: ${{ secrets.APPLE_SIGNING_IDENTITY }}
+          APPLE_PROVIDER_SHORT_NAME: ${{ secrets.APPLE_PROVIDER_SHORT_NAME }}
+          APPLE_API_ISSUER: ${{ secrets.APPLE_API_ISSUER }}
+          APPLE_API_KEY: ${{ secrets.APPLE_API_KEY }}
         with:
           projectPath: tauri
           tagName: v__VERSION__

CHANGELOG.md

@@ -0,0 +1,68 @@
+# Changelog
+
+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).
+
+## [0.1.0] - 2026-01-25
+
+### Added
+
+#### Core Features
+- **Voice Cloning** - Clone voices from audio samples using Qwen3-TTS (1.7B and 0.6B models)
+- **Voice Profile Management** - Create, edit, and organize voice profiles with multiple samples
+- **Speech Generation** - Generate high-quality speech from text using cloned voices
+- **Generation History** - Track all generations with search and filtering capabilities
+- **Audio Transcription** - Automatic transcription powered by Whisper
+- **In-App Recording** - Record audio samples directly in the app with waveform visualization
+
+#### Desktop App
+- **Tauri Desktop App** - Native desktop application for macOS, Windows, and Linux
+- **Local Server Mode** - Embedded Python server runs automatically
+- **Remote Server Mode** - Connect to a remote Voicebox server on your network
+- **Auto-Updates** - Automatic update notifications and installation
+
+#### API
+- **REST API** - Full REST API for voice synthesis and profile management
+- **OpenAPI Documentation** - Interactive API docs at `/docs` endpoint
+- **Type-Safe Client** - Auto-generated TypeScript client from OpenAPI schema
+
+#### Technical
+- **Voice Prompt Caching** - Fast regeneration with cached voice prompts
+- **Multi-Sample Support** - Combine multiple audio samples for better voice quality
+- **GPU/CPU/MPS Support** - Automatic device detection and optimization
+- **Model Management** - Lazy loading and VRAM management
+- **SQLite Database** - Local data persistence
+
+### Technical Details
+
+- Built with Tauri v2 (Rust + React)
+- FastAPI backend with async Python
+- TypeScript frontend with React Query and Zustand
+- Qwen3-TTS for voice cloning
+- Whisper for transcription
+
+### Platform Support
+
+- macOS (Apple Silicon and Intel)
+- Windows
+- Linux (AppImage)
+
+---
+
+## [Unreleased]
+
+### Planned
+- Real-time streaming synthesis
+- Conversation mode with multiple speakers
+- Voice effects (pitch shift, reverb, M3GAN-style)
+- Timeline-based audio editor
+- Additional voice models (XTTS, Bark)
+- Voice design from text descriptions
+- Project system for saving sessions
+- Plugin architecture
+
+---
+
+[0.1.0]: https://github.com/jamiepine/voicebox/releases/tag/v0.1.0

CONTRIBUTING.md

@@ -0,0 +1,385 @@
+# Contributing to Voicebox
+
+Thank you for your interest in contributing to Voicebox! This document provides guidelines and instructions for contributing.
+
+## Code of Conduct
+
+- Be respectful and inclusive
+- Welcome newcomers and help them learn
+- Focus on constructive feedback
+- Respect different viewpoints and experiences
+
+## Getting Started
+
+### 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
+  ```
+
+- **Git** - Version control
+
+### Development Setup
+
+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 Qwen3-TTS (required for voice synthesis)
+   pip install git+https://github.com/QwenLM/Qwen3-TTS.git
+   ```
+
+4. **Initialize database**
+   ```bash
+   cd backend
+   python -c "from database import init_db; init_db()"
+   ```
+   This creates the SQLite database at `data/voicebox.db`.
+
+5. **Start development servers**
+   
+   **Terminal 1: Backend server**
+   ```bash
+   cd backend
+   source venv/bin/activate  # Activate venv if not already active
+   bun run dev:server
+   # Or manually: uvicorn main:app --reload --port 8000
+   ```
+   Backend will be available at `http://localhost:8000`
+   
+   **Terminal 2: Desktop app**
+   ```bash
+   bun run dev
+   ```
+   This will:
+   - Start Vite dev server on port 5173
+   - Launch Tauri window pointing to localhost:5173
+   - Enable hot reload
+
+   **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.
+
+### Building
+
+**Build Python server binary:**
+```bash
+./scripts/build-server.sh
+```
+Creates platform-specific binary in `tauri/src-tauri/binaries/`
+
+**Build Tauri desktop app:**
+```bash
+cd tauri
+bun run tauri build
+```
+Creates platform-specific installers (`.dmg`, `.msi`, `.AppImage`)
+
+**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/`
+
+## Development Workflow
+
+### 1. Create a Branch
+
+```bash
+git checkout -b feature/your-feature-name
+# or
+git checkout -b fix/your-bug-fix
+```
+
+### 2. Make Your Changes
+
+- Write clean, readable code
+- Follow existing code style
+- Add comments for complex logic
+- Update documentation as needed
+
+### 3. Test Your Changes
+
+- Test manually in the app
+- Ensure backend API endpoints work
+- Check for TypeScript/Python errors
+- Verify UI components render correctly
+
+### 4. Commit Your Changes
+
+Write clear, descriptive commit messages:
+
+```bash
+git commit -m "Add feature: voice profile export"
+git commit -m "Fix: audio playback stops after 30 seconds"
+```
+
+### 5. Push and Create Pull Request
+
+```bash
+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
+
+## Code Style
+
+### TypeScript/React
+
+- Use TypeScript strict mode
+- Follow React best practices
+- Use functional components with hooks
+- Prefer named exports
+- Format with Biome (runs automatically)
+
+```typescript
+// Good
+export function ProfileCard({ profile }: { profile: Profile }) {
+  return <div>{profile.name}</div>;
+}
+
+// Avoid
+export const ProfileCard = (props) => { ... }
+```
+
+### Python
+
+- Follow PEP 8 style guide
+- Use type hints
+- Use async/await for I/O operations
+- Format with Black (if configured)
+
+```python
+# Good
+async def create_profile(name: str, language: str) -> Profile:
+    """Create a new voice profile."""
+    ...
+
+# Avoid
+def create_profile(name, language):
+    ...
+```
+
+### Rust
+
+- Follow Rust conventions
+- Use meaningful variable names
+- Handle errors explicitly
+- Format with `rustfmt`
+
+## Project Structure
+
+```
+voicebox/
+├── app/              # Shared React frontend
+│   └── src/
+│       ├── components/   # UI components
+│       ├── lib/          # Utilities and API client
+│       └── hooks/        # React hooks
+├── backend/          # Python FastAPI server
+│   ├── main.py       # API routes
+│   ├── tts.py        # Voice synthesis
+│   └── ...
+├── tauri/            # Desktop app wrapper
+│   └── src-tauri/    # Rust backend
+└── scripts/          # Build scripts
+```
+
+## Areas for Contribution
+
+### 🐛 Bug Fixes
+
+- Check existing issues for bugs to fix
+- Test your fix thoroughly
+- Add tests if possible
+
+### ✨ New Features
+
+- Check the roadmap in README.md
+- Discuss major features in an issue first
+- Keep features focused and well-scoped
+
+### 📚 Documentation
+
+- Improve README clarity
+- Add code comments
+- Write API documentation
+- Create tutorials or guides
+
+### 🎨 UI/UX Improvements
+
+- Improve accessibility
+- Enhance visual design
+- Optimize performance
+- Add animations/transitions
+
+### 🔧 Infrastructure
+
+- Improve build process
+- Add CI/CD improvements
+- Optimize bundle size
+- Add testing infrastructure
+
+## API Development
+
+When adding new API endpoints:
+
+1. **Add route in `backend/main.py`**
+2. **Create Pydantic models in `backend/models.py`**
+3. **Implement business logic in appropriate module**
+4. **Update OpenAPI schema** (automatic with FastAPI)
+5. **Regenerate TypeScript client:**
+   ```bash
+   bun run generate:api
+   ```
+6. **Update `backend/README.md`** with endpoint documentation
+
+## Testing
+
+Currently, testing is primarily manual. When adding tests:
+
+- **Backend**: Use pytest for Python tests
+- **Frontend**: Use Vitest for React component tests
+- **E2E**: Use Playwright for end-to-end tests (future)
+
+## Pull Request Process
+
+1. **Update documentation** if needed
+2. **Ensure code follows style guidelines**
+3. **Test your changes thoroughly**
+4. **Update CHANGELOG.md** with your changes
+5. **Request review** from maintainers
+
+### PR Checklist
+
+- [ ] Code follows style guidelines
+- [ ] Documentation updated
+- [ ] Changes tested
+- [ ] No breaking changes (or documented)
+- [ ] CHANGELOG.md updated
+
+## Release Process
+
+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`)
+
+2. **Update CHANGELOG.md** with release notes
+
+3. **Push commits and tags:**
+   ```bash
+   git push
+   git push --tags
+   ```
+
+4. **GitHub Actions builds and releases** automatically when tags are pushed
+
+## Troubleshooting
+
+See [docs/TROUBLESHOOTING.md](docs/TROUBLESHOOTING.md) for common issues and solutions.
+
+**Quick fixes:**
+
+- **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`
+
+## Questions?
+
+- Open an issue for bugs or feature requests
+- Check existing issues and discussions
+- Review the codebase to understand patterns
+- See [docs/TROUBLESHOOTING.md](docs/TROUBLESHOOTING.md) for common issues
+
+## Additional Resources
+
+- [README.md](README.md) - Project overview
+- [backend/README.md](backend/README.md) - API documentation
+- [docs/AUTOUPDATER_QUICKSTART.md](docs/AUTOUPDATER_QUICKSTART.md) - Auto-updater setup
+- [SECURITY.md](SECURITY.md) - Security policy
+- [CHANGELOG.md](CHANGELOG.md) - Version history
+
+## License
+
+By contributing, you agree that your contributions will be licensed under the MIT License.
+
+---
+
+Thank you for contributing to Voicebox! 🎉

CURRENT_STATE.md

@@ -1,447 +0,0 @@
-# voicebox - Current State Overview
-
-**Last Updated:** January 25, 2026  
-**Status:** ✅ MVP Core Features Working - Voice generation from Tauri app successful!
-
----
-
-## 🎯 What We Have
-
-### ✅ **Fully Implemented & Working**
-
-#### **Backend (Python FastAPI)**
-- **Voice Profile Management**
-  - Create, read, update, delete profiles
-  - Add multiple audio samples per profile
-  - Multi-reference voice combination (combines multiple samples)
-  - Profile storage in SQLite + file system (`data/profiles/`)
-  
-- **Voice Generation**
-  - Qwen3-TTS model integration (1.7B and 0.6B support)
-  - Automatic model downloading from HuggingFace Hub
-  - Voice prompt caching for instant re-generation
-  - Support for English and Chinese
-  - Seed-based reproducibility
-  - GPU/CPU/MPS device detection
-  
-- **Generation History**
-  - Full CRUD operations
-  - Search by text content
-  - Filter by profile
-  - Pagination support
-  - Statistics endpoint
-  - Audio file storage (`data/generations/`)
-  
-- **Audio Transcription**
-  - Whisper integration for speech-to-text
-  - Language detection/selection
-  - Used for reference text extraction from samples
-  
-- **Database**
-  - SQLite with SQLAlchemy ORM
-  - Tables: `profiles`, `profile_samples`, `generations`, `projects` (ready for future)
-  - Automatic schema initialization
-  
-- **API Endpoints**
-  - RESTful API with FastAPI
-  - OpenAPI schema generation
-  - CORS enabled
-  - Health check endpoint
-  - File serving for audio files
-
-#### **Frontend (React + TypeScript + Tauri)**
-- **Voice Profile UI**
-  - Profile list with cards
-  - Create/edit profile dialog
-  - Upload audio samples with transcription
-  - Sample management (view/delete)
-  - Profile detail view
-  
-- **Generation UI**
-  - Form with profile selection
-  - Text input (up to 5000 chars)
-  - Language selection (en/zh)
-  - Optional seed input
-  - Loading states and error handling
-  
-- **History UI**
-  - Table view with pagination
-  - Search functionality
-  - Play audio inline
-  - Download audio files
-  - Delete generations
-  
-- **Server Settings**
-  - Connection form (local/remote mode)
-  - Server status display
-  - Health check integration
-  
-- **State Management**
-  - React Query for server state
-  - Zustand for client state (server URL, connection status)
-  - Type-safe API client
-  
-- **UI Components**
-  - shadcn/ui component library
-  - Tailwind CSS styling
-  - Responsive design
-  - Toast notifications
-  - Form validation with Zod
-
-#### **Tauri Desktop App**
-- **Rust Backend**
-  - Sidecar management for Python server
-  - Start/stop server commands
-  - Remote mode support (0.0.0.0 binding)
-  - Process lifecycle management
-  
-- **Build System**
-  - Tauri v2 configuration
-  - Platform-specific builds
-  - Dev tools in debug mode
-
----
-
-## 🏗️ Architecture
-
-### **Project Structure**
-```
-voicebox/
-├── app/                    # Shared React frontend
-│   ├── src/
-│   │   ├── components/    # React components
-│   │   │   ├── VoiceProfiles/  ✅ Complete
-│   │   │   ├── Generation/     ✅ Complete
-│   │   │   ├── History/        ✅ Complete
-│   │   │   ├── ServerSettings/ ✅ Complete
-│   │   │   └── AudioStudio/    📦 Placeholder (future)
-│   │   ├── lib/
-│   │   │   ├── api/       # Type-safe API client ✅
-│   │   │   ├── hooks/     # React Query hooks ✅
-│   │   │   └── utils/     # Utilities ✅
-│   │   └── stores/        # Zustand stores ✅
-│
-├── backend/               # Python FastAPI server
-│   ├── main.py           # FastAPI app + routes ✅
-│   ├── models.py         # Pydantic models ✅
-│   ├── database.py       # SQLAlchemy ORM ✅
-│   ├── profiles.py        # Profile management ✅
-│   ├── history.py         # History management ✅
-│   ├── tts.py            # Qwen3-TTS integration ✅
-│   ├── transcribe.py     # Whisper integration ✅
-│   ├── studio.py         # Audio studio (future)
-│   └── utils/
-│       ├── audio.py      # Audio processing ✅
-│       ├── cache.py      # Voice prompt caching ✅
-│       └── validation.py # Validation helpers ✅
-│
-├── tauri/                # Tauri desktop wrapper
-│   ├── src/             # React entry point ✅
-│   └── src-tauri/       # Rust backend ✅
-│       └── src/main.rs  # Sidecar management ✅
-│
-├── data/                 # User data directory
-│   ├── profiles/         # Profile audio samples
-│   ├── generations/      # Generated audio files
-│   ├── cache/            # Cached voice prompts
-│   └── voicebox.db       # SQLite database
-│
-└── scripts/              # Build & generation scripts
-    ├── generate-api.sh   # OpenAPI client generation
-    └── build-server.sh   # Python binary build
-```
-
-### **Data Flow**
-
-```
-User Action (Tauri App)
-    ↓
-React Component (Form Submit)
-    ↓
-React Query Hook (useGeneration)
-    ↓
-API Client (apiClient.generateSpeech)
-    ↓
-HTTP Request → FastAPI Backend
-    ↓
-Backend Route Handler (/generate)
-    ↓
-Business Logic:
-  1. Get profile from DB
-  2. Create voice prompt (with caching)
-  3. Generate audio with Qwen3-TTS
-  4. Save audio file
-  5. Create history entry
-    ↓
-Response (GenerationResponse)
-    ↓
-React Query Cache Update
-    ↓
-UI Refresh (History table updates)
-```
-
-### **Key Technologies**
-
-| Layer | Technology | Purpose |
-|-------|-----------|---------|
-| **Desktop Framework** | Tauri v2 | Native desktop app wrapper |
-| **Frontend Framework** | React 18 | UI components |
-| **Language** | TypeScript | Type safety |
-| **Styling** | Tailwind CSS | Utility-first CSS |
-| **UI Components** | shadcn/ui | Component library |
-| **State Management** | React Query + Zustand | Server & client state |
-| **Form Handling** | React Hook Form + Zod | Form validation |
-| **Backend Framework** | FastAPI | Async REST API |
-| **Database** | SQLite + SQLAlchemy | Data persistence |
-| **ML Models** | Qwen3-TTS + Whisper | Voice cloning + transcription |
-| **Audio Processing** | librosa + soundfile | Audio I/O and processing |
-| **Package Manager** | Bun | Fast JS/TS package management |
-| **Build Tool** | Vite | Frontend bundling |
-
----
-
-## 🔑 Key Features & Capabilities
-
-### **1. Voice Profile System**
-- **Multi-sample support**: Add multiple audio samples per profile
-- **Automatic combination**: Multiple samples are combined for better quality
-- **Voice prompt caching**: Re-use voice prompts for instant re-generation
-- **Audio validation**: Ensures samples meet quality requirements
-
-### **2. Generation Pipeline**
-- **Lazy model loading**: Model loads on first use
-- **Device detection**: Automatically uses GPU if available
-- **Caching layer**: Voice prompts cached by audio hash + text
-- **Error handling**: Graceful degradation and clear error messages
-
-### **3. History & Search**
-- **Full-text search**: Search generations by text content
-- **Pagination**: Efficient loading of large histories
-- **Audio playback**: Inline audio player
-- **File management**: Download and delete operations
-
-### **4. Server/Client Architecture**
-- **Local mode**: Backend runs alongside Tauri app
-- **Remote mode**: Connect to remote GPU machine
-- **One-click server**: Start server from UI
-- **Connection management**: Persistent server URL storage
-
----
-
-## 📊 Database Schema
-
-### **Tables**
-
-```sql
--- Voice Profiles
-profiles
-  - id (PK, UUID)
-  - name (unique)
-  - description
-  - language (en/zh)
-  - created_at
-  - updated_at
-
--- Profile Samples
-profile_samples
-  - id (PK, UUID)
-  - profile_id (FK → profiles.id)
-  - audio_path
-  - reference_text
-
--- Generations
-generations
-  - id (PK, UUID)
-  - profile_id (FK → profiles.id)
-  - text
-  - language
-  - audio_path
-  - duration (seconds)
-  - seed (optional)
-  - created_at
-
--- Projects (ready for future)
-projects
-  - id (PK, UUID)
-  - name
-  - data (JSON)
-  - created_at
-  - updated_at
-```
-
----
-
-## 🎨 UI Components Status
-
-| Component | Status | Features |
-|-----------|--------|----------|
-| **ProfileList** | ✅ Complete | List, create, empty state |
-| **ProfileCard** | ✅ Complete | Display profile info |
-| **ProfileForm** | ✅ Complete | Create/edit dialog |
-| **ProfileDetail** | ✅ Complete | View samples, add samples |
-| **SampleUpload** | ✅ Complete | File upload + transcription |
-| **GenerationForm** | ✅ Complete | Full generation form |
-| **HistoryTable** | ✅ Complete | Table, search, pagination, play/download |
-| **ConnectionForm** | ✅ Complete | Server URL input |
-| **ServerStatus** | ✅ Complete | Health check display |
-| **AudioStudio** | 📦 Placeholder | Timeline editor (future) |
-
----
-
-## 🔌 API Endpoints
-
-### **Profiles**
-- `POST /profiles` - Create profile
-- `GET /profiles` - List all profiles
-- `GET /profiles/{id}` - Get profile
-- `PUT /profiles/{id}` - Update profile
-- `DELETE /profiles/{id}` - Delete profile
-- `POST /profiles/{id}/samples` - Add sample
-- `GET /profiles/{id}/samples` - List samples
-- `DELETE /profiles/samples/{id}` - Delete sample
-
-### **Generation**
-- `POST /generate` - Generate speech
-
-### **History**
-- `GET /history` - List generations (with filters)
-- `GET /history/{id}` - Get generation
-- `DELETE /history/{id}` - Delete generation
-- `GET /history/stats` - Get statistics
-
-### **Transcription**
-- `POST /transcribe` - Transcribe audio
-
-### **Audio**
-- `GET /audio/{id}` - Serve audio file
-
-### **Health**
-- `GET /health` - Health check with model status
-
-### **Model Management**
-- `POST /models/load` - Load TTS model
-- `POST /models/unload` - Unload TTS model
-
----
-
-## 🚀 What's Next (Planned Features)
-
-### **Phase 2: Advanced Features**
-- [ ] Multi-reference voice combination UI
-- [ ] Batch generation (multiple variations)
-- [ ] Advanced audio normalization
-- [ ] Export options (MP3, OGG, etc.)
-- [ ] M3GAN voice effect
-
-### **Phase 3: Audio Studio**
-- [ ] Timeline-based audio editor
-- [ ] Word-level timestamps
-- [ ] Project system (save/load sessions)
-- [ ] Audio effects and filters
-- [ ] Multi-track editing
-
-### **Phase 4: Voice Design**
-- [ ] Text-to-voice (no reference needed)
-- [ ] Preset voices with style control
-- [ ] Conversation mode (multi-speaker)
-- [ ] Custom audio effects library
-
----
-
-## 📝 Code Quality Standards
-
-- ✅ **Type safety**: TypeScript strict mode, Pydantic models
-- ✅ **Modular architecture**: No files over 500 lines
-- ✅ **Error handling**: Comprehensive error messages
-- ✅ **Caching**: Voice prompt caching for performance
-- ✅ **Database**: SQLAlchemy ORM with proper relationships
-- ✅ **API design**: RESTful with OpenAPI schema
-- ✅ **UI/UX**: Responsive, accessible, loading states
-
----
-
-## 🧪 Testing Status
-
-- ✅ **Manual testing**: Voice generation working end-to-end
-- 📦 **Unit tests**: Not yet implemented
-- 📦 **Integration tests**: Not yet implemented
-- 📦 **E2E tests**: Not yet implemented
-
----
-
-## 📦 Dependencies
-
-### **Backend**
-- FastAPI - Web framework
-- SQLAlchemy - ORM
-- Pydantic - Validation
-- Qwen3-TTS - Voice cloning model
-- Whisper - Speech recognition
-- librosa - Audio processing
-- soundfile - Audio I/O
-- PyTorch - ML framework
-
-### **Frontend**
-- React 18 - UI framework
-- TypeScript - Type safety
-- React Query - Server state
-- Zustand - Client state
-- React Hook Form - Forms
-- Zod - Schema validation
-- Tailwind CSS - Styling
-- shadcn/ui - Components
-- Lucide React - Icons
-
-### **Desktop**
-- Tauri v2 - Desktop framework
-- Rust - System backend
-
----
-
-## 🎯 Current Capabilities Summary
-
-✅ **Working End-to-End:**
-1. Create voice profiles with audio samples
-2. Generate speech from text using cloned voices
-3. View and manage generation history
-4. Play and download generated audio
-5. Search and filter history
-6. Connect to local or remote backend
-7. Automatic model downloading
-8. Voice prompt caching for speed
-
-🎉 **You just successfully generated voice from the Tauri app!**
-
----
-
-## 🔍 Key Files Reference
-
-### **Backend Core**
-- `backend/main.py` - FastAPI app and routes
-- `backend/tts.py` - Qwen3-TTS model wrapper
-- `backend/profiles.py` - Profile business logic
-- `backend/history.py` - History business logic
-- `backend/database.py` - Database models
-
-### **Frontend Core**
-- `app/src/App.tsx` - Main app component
-- `app/src/lib/api/client.ts` - API client
-- `app/src/lib/hooks/` - React Query hooks
-- `app/src/stores/` - Zustand stores
-
-### **Tauri**
-- `tauri/src-tauri/src/main.rs` - Rust backend
-- `tauri/src/main.tsx` - React entry point
-
----
-
-## 💡 Development Workflow
-
-1. **Start backend**: `bun run dev:server` (or via Tauri)
-2. **Start frontend**: `bun run dev` (Tauri) or `bun run dev:web` (web)
-3. **Generate API client**: `bun run generate:api` (after backend changes)
-4. **Build server binary**: `bun run build:server` (for Tauri bundling)
-
----
-
-**Ready to build more features! 🚀**

LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Voicebox Contributors
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

README.md

@@ -1,409 +1,243 @@
-# voicebox
+<p align="center">
+  <img src=".github/assets/icon-dark.webp" alt="Voicebox" width="120" height="120" />
+</p>
 
-A production-quality desktop app for Qwen3-TTS voice cloning and generation.
+<h1 align="center">Voicebox</h1>
 
-**Domain:** voicebox.sh
+<p align="center">
+  <strong>The open-source voice synthesis studio.</strong><br/>
+  Clone voices. Generate speech. Build voice-powered apps.<br/>
+  All running locally on your machine.
+</p>
+
+<p align="center">
+  <a href="https://voicebox.sh">voicebox.sh</a> •
+  <a href="#download">Download</a> •
+  <a href="#features">Features</a> •
+  <a href="#api">API</a> •
+  <a href="#roadmap">Roadmap</a>
+</p>
+
+<br/>
+
+<p align="center">
+  <a href="https://voicebox.sh">
+    <img src=".github/assets/screenshot.webp" alt="Voicebox App Screenshot" width="800" />
+  </a>
+</p>
+
+<p align="center">
+  <em>Click the image above to watch the demo video on <a href="https://voicebox.sh">voicebox.sh</a></em>
+</p>
+
+<br/>
+
+## Why Voicebox?
+
+Voice AI is exploding, but most tools are either cloud-locked, expensive, or a nightmare to set up. Voicebox is different:
+
+- **100% Local** — Your voice data never leaves your machine
+- **Lightweight** — No bloated Electron, native Tauri performance
+- **Fast** — Near-instant on CUDA, optimized for Apple Silicon
+- **Flexible** — Use the app, integrate the API, or both
+- **Open Source** — No subscriptions, no limits, no lock-in
+
+Built with **Tauri** (Rust), **TypeScript**, **React**, and **Python**. Native performance meets modern DX.
 
 ---
 
-## Vision
+## Download
 
-Qwen3-TTS is a breakthrough model from Alibaba that achieves near-perfect voice cloning. The existing implementations (Voice-Clone-Studio, mimic, etc.) are either feature-rich but architecturally messy, or well-structured but limited in scope.
+Voicebox is available now for macOS and Windows.
 
-voicebox aims to build the definitive Qwen3-TTS application by combining the best patterns from existing projects while avoiding their architectural mistakes.
+| Platform | Download |
+|----------|----------|
+| macOS (Apple Silicon) | [voicebox_aarch64.app.tar.gz](https://github.com/jamiepine/voicebox/releases/download/v0.1.0/voicebox_aarch64.app.tar.gz) |
+| macOS (Intel) | [voicebox_x64.app.tar.gz](https://github.com/jamiepine/voicebox/releases/download/v0.1.0/voicebox_x64.app.tar.gz) |
+| Windows (MSI) | [voicebox_0.1.0_x64_en-US.msi](https://github.com/jamiepine/voicebox/releases/download/v0.1.0/voicebox_0.1.0_x64_en-US.msi) |
+| Windows (Setup) | [voicebox_0.1.0_x64-setup.exe](https://github.com/jamiepine/voicebox/releases/download/v0.1.0/voicebox_0.1.0_x64-setup.exe) |
 
-## Design Principles
+> **Linux builds coming soon** — Currently blocked by GitHub runner disk space limitations.
 
-1. **Clean architecture from day one** - No monolithic files, proper separation of concerns
+---
-2. **Desktop-first experience** - Native feel via Tauri, not a web app in disguise
-3. **Production code quality** - Type safety, modularity, maintainability
-4. **Performance and UX** - Smart caching, async operations, responsive UI
-5. **Extensible design** - Easy to add new models, effects, and features
-6. **Flexible deployment** - Run backend locally or connect to remote GPU machine with one click
 
-## Technology Stack
+## Features
 
-### Backend (Python)
+### Voice Cloning with Qwen3-TTS
-- **FastAPI** - Async REST API
-- **SQLAlchemy** - Database ORM with migrations
-- **Pydantic** - Request/response validation
-- **Qwen3-TTS** - Voice cloning model
-- **Whisper** - Speech-to-text transcription
-- **librosa + soundfile** - Audio processing
 
-### Frontend (Tauri + TypeScript)
+Powered by Alibaba's **Qwen3-TTS** — a breakthrough model that achieves near-perfect voice cloning from just a few seconds of audio.
-- **Tauri** - Native desktop framework
-- **React** - UI framework
-- **TypeScript** - Type safety throughout
-- **Bun** - Fast package manager and JavaScript runtime
-- **React Query** - Server state management and API calls
-- **OpenAPI (generated)** - Type-safe API client from FastAPI schema
-- **Tailwind CSS** - Styling
-- **Zustand** - Client-side state management
-- **WaveSurfer.js** - Audio visualization
 
-### Database
+- **Instant cloning** — Upload a sample, get a voice profile
-- **SQLite** - Local storage
+- **High fidelity** — Natural prosody, emotion, and cadence
-- **Alembic** - Schema migrations
+- **Multi-language** — English, Chinese, and more coming
 
-## Server/Client Mode
+### Voice Profile Management
 
-voicebox supports flexible deployment for users with multiple machines:
+- **Create profiles** from audio files or record directly in-app
+- **Import/Export** profiles to share or backup
+- **Organize** with descriptions and language tags
 
-### Local Mode (Default)
+### Speech Generation
-- Backend runs locally alongside the Tauri app
-- Best for users with GPU on their primary machine
 
-### Remote Mode (One-Click Setup)
+- **Text-to-speech** with any cloned voice
-- **Use case:** Your laptop doesn't have a GPU, but your desktop does
+- **Batch generation** for long-form content
-- **Server:** Run voicebox on GPU machine, click "Start Server"
+- **Smart caching** — regenerate instantly with voice prompt caching
-  - Starts FastAPI backend on local network
-  - Shows connection URL (e.g., `http://192.168.1.100:8000`)
-- **Client:** Run voicebox on laptop, enter server URL
-  - Connects to remote backend
-  - Full UI functionality, inference happens on GPU machine
-- **Security:** Local network only for now (no internet exposure)
 
-### How It Works
+### Recording & Transcription
-```
+
-┌─────────────────┐          ┌─────────────────┐
+- **In-app recording** with waveform visualization
-│   Laptop        │          │   Desktop       │
+- **Automatic transcription** powered by Whisper
-│   (Client)      │          │   (Server)      │
+- **Export recordings** in multiple formats
-│                 │          │                 │
+
-│  Tauri App ────────────────▶  FastAPI        │
+### Generation History
-│  React UI       │  HTTP    │  Qwen3-TTS      │
+
-│                 │          │  SQLite         │
+- **Full history** of all generated audio
-│                 │          │  CUDA/GPU       │
+- **Search & filter** by voice, text, or date
-└─────────────────┘          └─────────────────┘
+- **Re-generate** any past generation with one click
+
+### Flexible Deployment
+
+- **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
+
+---
+
+## API
+
+Voicebox exposes a full REST API, so you can integrate voice synthesis into your own apps.
+
+```bash
+# Generate speech
+curl -X POST http://localhost:8000/api/generate \
+  -H "Content-Type: application/json" \
+  -d '{"text": "Hello world", "profile_id": "abc123"}'
+
+# List voice profiles
+curl http://localhost:8000/api/profiles
+
+# Create a profile from audio
+curl -X POST http://localhost:8000/api/profiles \
+  -F "[email protected]" \
+  -F "name=My Voice"
 ```
 
-**Benefits:**
+**Use cases:**
-- Use powerful GPU machine from lightweight laptop
-- No complex setup - just click "Start Server"
-- All data (history, profiles) lives on server
-- Client is just a UI - no local storage needed in remote mode
 
-## Core Features
+- Game dialogue systems
+- Podcast/video production pipelines
+- Accessibility tools
+- Voice assistants
+- Content creation automation
 
-### Phase 1 (MVP)
+Full API documentation available at `http://localhost:8000/docs` when running.
-- Voice profile management
-- Single-reference voice cloning
-- Generation history with search
-- Basic audio playback and preview
-- Server/client mode (local network)
-- One-click server startup
 
-### Phase 2
+---
-- Multi-reference voice combination
-- Batch variation generation
-- Advanced audio normalization
-- Export options and formats
 
-### Phase 3
+## Tech Stack
-- Audio studio with timeline editing
-- Word-level timestamps
-- Project system (save/load sessions)
-- Export options
 
-### Phase 4
+| Layer | Technology |
-- Voice design (text-to-voice)
+|-------|------------|
-- Preset voices with style control
+| Desktop App | Tauri (Rust) |
-- Conversation mode (multi-speaker)
+| Frontend | React, TypeScript, Tailwind CSS |
-- Custom audio effects
+| State | Zustand, React Query |
+| Backend | FastAPI (Python) |
+| Voice Model | Qwen3-TTS |
+| Transcription | Whisper |
+| Database | SQLite |
+| Audio | WaveSurfer.js, librosa |
 
-## Key Differentiators
+**Why this stack?**
 
-What makes voicebox better than existing implementations:
+- **Tauri over Electron** — 10x smaller bundle, native performance, lower memory
+- **FastAPI** — Async Python with automatic OpenAPI schema generation
+- **Type-safe end-to-end** — Generated TypeScript client from OpenAPI spec
 
-1. **Clean codebase** - Modular architecture, no 2,000+ line files
+---
-2. **Type safety end-to-end** - OpenAPI-generated TypeScript client, Pydantic backend, React Query
-3. **Smart caching** - Voice prompt caching for instant re-generation
-4. **Desktop UX** - Native performance, keyboard shortcuts, native dialogs
-5. **Server/client mode** - One-click remote GPU access from any device
-6. **Multi-reference** - Combine voice samples for higher quality
-7. **Audio studio** - Timeline-based editing with word-level precision
-8. **Production patterns** - Cross-platform, graceful degradation, error recovery
-9. **Database-backed** - Searchable history, project persistence
-10. **Extensible** - Clean plugin system for models and features
 
-## Architecture Overview
+## Roadmap
+
+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 |
+
+### Future Vision
+
+- **Voice Design** — Create new voices from text descriptions
+- **Project System** — Save and load complex multi-voice sessions
+- **Plugin Architecture** — Extend with custom models and effects
+- **Mobile Companion** — Control Voicebox from your phone
+
+Voicebox aims to be the **one-stop shop for everything voice** — cloning, synthesis, editing, effects, and beyond.
+
+---
+
+## Development
+
+See [CONTRIBUTING.md](CONTRIBUTING.md) for detailed setup and contribution guidelines.
+
+### Quick Start
+
+```bash
+# Clone the repo
+git clone https://github.com/voicebox-sh/voicebox.git
+cd voicebox
+
+# 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). CUDA-capable GPU recommended (CPU inference supported but slower).
+
+### Project Structure
 
 ```
 voicebox/
-├── app/                  # Shared React frontend (used by web & desktop)
+├── app/              # Shared React frontend
-│   ├── src/
+├── tauri/            # Desktop app (Tauri + Rust)
-│   │   ├── components/  # React components
+├── web/              # Web deployment
-│   │   │   ├── VoiceProfiles/
+├── backend/          # Python FastAPI server
-│   │   │   ├── Generation/
+├── landing/          # Marketing website
-│   │   │   ├── AudioStudio/
+└── scripts/          # Build & release scripts
-│   │   │   ├── History/
-│   │   │   └── ServerSettings/
-│   │   ├── lib/
-│   │   │   ├── api/     # Generated OpenAPI client
-│   │   │   ├── hooks/   # React Query hooks
-│   │   │   └── utils/
-│   │   ├── types/
-│   │   └── App.tsx
-│   ├── package.json
-│   └── vite.config.ts
-│
-├── tauri/               # Tauri desktop app (thin wrapper)
-│   ├── src/
-│   │   └── main.tsx     # Entry point, imports from ../app
-│   ├── src-tauri/       # Rust backend
-│   │   ├── src/
-│   │   │   └── main.rs  # Sidecar management, IPC
-│   │   ├── binaries/    # Bundled Python server
-│   │   │   └── voicebox-server-{platform}
-│   │   ├── Cargo.toml
-│   │   └── tauri.conf.json
-│   └── package.json
-│
-├── web/                 # Web deployment (thin wrapper)
-│   ├── src/
-│   │   └── main.tsx     # Entry point, imports from ../app
-│   ├── package.json
-│   └── vite.config.ts
-│
-├── backend/             # Python FastAPI server
-│   ├── main.py         # FastAPI app + server mode
-│   ├── models.py       # Pydantic models
-│   ├── tts.py         # TTS inference
-│   ├── transcribe.py  # Whisper ASR
-│   ├── profiles.py    # Voice profiles
-│   ├── history.py     # Generation history
-│   ├── studio.py      # Audio editing
-│   ├── database.py    # SQLite ORM
-│   ├── utils/
-│   │   ├── audio.py   # Audio processing
-│   │   ├── cache.py   # Prompt caching
-│   │   └── validation.py
-│   ├── requirements.txt
-│   └── build_binary.py # PyInstaller build script
-│
-├── scripts/
-│   ├── build-server.sh    # Build Python binary for all platforms
-│   └── generate-api.sh    # Generate OpenAPI client
-│
-├── data/                  # User data
-│   ├── profiles/
-│   ├── generations/
-│   ├── projects/
-│   └── voicebox.db
-│
-├── package.json           # Root workspace config
-└── docs/
-    ├── ANALYSIS.md        # Analysis of existing projects
-    ├── TAURI_PLAN.md      # Tauri app structure and bundling strategy
-    └── ARCHITECTURE.md    # Detailed architecture docs
 ```
 
-**Key architectural decisions:**
+---
-- **Shared frontend** - `app/` contains all React code, used by both desktop and web
-- **Thin wrappers** - `tauri/` and `web/` just configure build tools and entry points
-- **Bundled backend** - Python server packaged as sidecar binary with PyInstaller
-- **Type-safe API** - OpenAPI schema generated from FastAPI, TypeScript client auto-generated
 
-See [TAURI_PLAN.md](./docs/TAURI_PLAN.md) for detailed bundling strategy.
+## Contributing
 
-## Lessons from Existing Projects
+Contributions welcome! See [CONTRIBUTING.md](CONTRIBUTING.md) for guidelines.
 
-voicebox learns from five existing Qwen3-TTS implementations:
+1. Fork the repo
+2. Create a feature branch
+3. Make your changes
+4. Submit a PR
 
-### voice (Rust CLI)
+## Security
-- ✅ Clean Rust/Python IPC pattern
-- ✅ M3GAN voice effect
-- ✅ Voice profile abstraction
-- ❌ No concurrent requests
-- ❌ No generation history
 
-### Voice-Clone-Studio
+Found a security vulnerability? Please report it responsibly. See [SECURITY.md](SECURITY.md) for details.
-- ✅ Brilliant voice prompt caching
-- ✅ Feature-rich (voice design, presets, conversations)
-- ✅ VRAM-efficient model management
-- ❌ 2,815-line single file
-- ❌ Global state everywhere
 
-### Qwen3-TTS_server
+---
-- ✅ Clean modular structure
-- ✅ FastAPI REST API design
-- ✅ Health endpoint for monitoring
-- ❌ No authentication or rate limiting
-- ❌ No caching or streaming
-- ❌ No OpenAPI client generation
-
-### mimic
-- ✅ Excellent backend architecture (async, modular)
-- ✅ Audio studio with timeline
-- ✅ Database-backed history
-- ✅ Multi-sample voice profiles
-- ❌ 2,794-line app.js frontend
-- ❌ Global state in UI
-
-### qwen3-tts-enhanced
-- ✅ Multi-reference combination
-- ✅ Cross-platform graceful degradation
-- ✅ Audio validation
-- ✅ Production error handling
-- ❌ Still monolithic (1,892 lines)
-- ❌ No API layer
-
-See [ANALYSIS.md](./docs/ANALYSIS.md) for detailed breakdown of each project.
-
-## Development Roadmap
-
-### Week 1: Foundation
-- Project structure setup
-- Backend skeleton (FastAPI + SQLite)
-- OpenAPI schema generation
-- Frontend skeleton (Tauri + React)
-- TypeScript client generation from OpenAPI
-- React Query setup
-- Basic voice profile CRUD
-- Server mode implementation
-- Client connection UI
-
-### Week 2: Core Features
-- TTS integration
-- Voice cloning pipeline
-- Voice prompt caching
-- Generation history
-
-### Week 3: UX Polish
-- Audio playback and preview
-- Profile management UI
-- History search and filters
-- Error handling and validation
-
-### Week 4: Advanced Features
-- Multi-reference combination
-- Batch generation
-- Audio normalization
-- M3GAN effect
-
-### Week 5+: Studio Features
-- Timeline editor
-- Word-level timestamps
-- Project system
-- Export pipeline
-
-## Technical Decisions
-
-### Why Tauri over Electron?
-- Smaller bundle size (Rust vs. Node.js)
-- Better performance (native vs. V8)
-- Lower memory usage
-- Rust for system-level operations
-
-### Why FastAPI over Flask?
-- Native async/await support
-- Automatic OpenAPI schema generation
-- Pydantic validation built-in
-- Better performance
-
-### Why OpenAPI + React Query?
-- **Type safety end-to-end** - FastAPI generates OpenAPI schema, we generate TypeScript client
-- **No manual API code** - Client generated from `openapi.json` using openapi-typescript-codegen
-- **Automatic caching** - React Query handles request deduplication and background refetching
-- **Optimistic updates** - Update UI immediately, rollback on error
-- **DevX** - Full autocomplete and type checking for all API calls
-
-**Example workflow:**
-```bash
-# Backend generates OpenAPI schema
-python backend/main.py --openapi > openapi.json
-
-# Frontend generates TypeScript client
-bun run generate-client
-
-# Use type-safe hooks in React
-import { useQuery } from '@tanstack/react-query';
-import { ProfilesService } from '@/lib/api';
-
-const { data: profiles } = useQuery({
-  queryKey: ['profiles'],
-  queryFn: () => ProfilesService.listProfiles()
-});
-```
-
-### Why Bun over npm/yarn/pnpm?
-- **Speed** - 20-30x faster than npm for install operations
-- **Drop-in replacement** - Compatible with npm ecosystem, no migration needed
-- **Built-in tooling** - Bundler, test runner, and package manager in one
-- **Performance** - Faster script execution than Node.js
-- **Developer experience** - Better error messages, workspaces support
-
-### Why SQLite over file-based storage?
-- Full-text search
-- Transactions and integrity
-- Migrations via Alembic
-- Easy to backup/restore
-
-### Why React over Vue/Svelte?
-- Larger ecosystem
-- Better TypeScript support
-- Familiar to most developers
-- Mature tooling
-
-### Why bundle Python server with PyInstaller?
-- **No Python installation required** - Users don't need Python on their system
-- **Consistent environment** - Exact dependencies bundled, no version conflicts
-- **Single-click install** - One installer includes everything
-- **Tauri sidecar pattern** - Rust spawns/manages Python process lifecycle
-- **Platform-specific binaries** - PyInstaller creates native executables for each platform
-
-**Tradeoffs:**
-- Larger bundle size (~500MB with models vs ~50MB without backend)
-- Need separate build for each platform (macOS Intel/ARM, Windows, Linux)
-- First launch slower (model loading time)
-
-**Alternative considered:** Require users to install Python and run `pip install` - rejected for poor UX
-
-### Why no Docker initially?
-- Desktop app, not server deployment
-- Users install locally
-- Can add later for server mode
-
-## Performance Targets
-
-- **First generation:** < 10 seconds (cold start)
-- **Cached generation:** < 2 seconds (warm start)
-- **UI responsiveness:** 60 FPS at all times
-- **Memory usage:** < 4GB VRAM for small models
-- **Startup time:** < 3 seconds to UI
-- **Database queries:** < 100ms for history search
-
-## Quality Standards
-
-- **No files over 500 lines** (except auto-generated)
-- **Type hints on all Python functions**
-- **TypeScript strict mode enabled**
-- **OpenAPI client auto-generated from schema**
-- **ESLint + Prettier for frontend**
-- **Black + isort for backend**
-- **All user-facing errors have context**
-- **No global mutable state**
-- **React Query for all server state**
-
-## Project Status
-
-**Current phase:** Planning and analysis
-
-**Documentation:**
-- [ANALYSIS.md](./docs/ANALYSIS.md) - Comprehensive analysis of existing implementations
-- [TAURI_PLAN.md](./docs/TAURI_PLAN.md) - Tauri app architecture and Python server bundling strategy
 
 ## License
 
-TBD
+MIT License — see [LICENSE](LICENSE) for details.
 
-## Credits
+---
 
-Built by analyzing and learning from:
+<p align="center">
-- voice (Rust CLI)
+  <a href="https://voicebox.sh">voicebox.sh</a>
-- Voice-Clone-Studio
+</p>
-- Qwen3-TTS_server
-- mimic
-- qwen3-tts-enhanced
-
-Powered by Alibaba's Qwen3-TTS model.

SECURITY.md

@@ -0,0 +1,92 @@
+# Security Policy
+
+## Supported Versions
+
+We release patches for security vulnerabilities. Which versions are eligible for receiving such patches depends on the CVSS v3.0 Rating:
+
+| Version | Supported          |
+| ------- | ------------------ |
+| 0.1.x   | :white_check_mark: |
+| < 0.1   | :x:                |
+
+## Reporting a Vulnerability
+
+If you discover a security vulnerability, please report it responsibly:
+
+1. **Do not** open a public GitHub issue
+2. Email security details to: [[email protected]](mailto:[email protected])
+3. Include:
+   - Description of the vulnerability
+   - Steps to reproduce
+   - Potential impact
+   - Suggested fix (if any)
+
+We will:
+- Acknowledge receipt within 48 hours
+- Provide a timeline for addressing the issue
+- Keep you informed of progress
+- Credit you in the security advisory (if desired)
+
+## Security Best Practices
+
+### For Users
+
+- **Keep Voicebox updated** - Updates include security patches
+- **Verify downloads** - Only download from official releases
+- **Local processing** - Voice data stays on your machine
+- **Network security** - Use HTTPS when connecting to remote servers
+
+### For Developers
+
+- **Dependencies** - Keep all dependencies up to date
+- **Code review** - All PRs require review before merging
+- **Secrets** - Never commit API keys or signing keys
+- **Signing** - All releases are cryptographically signed
+
+## Known Security Considerations
+
+### Local Processing
+
+Voicebox processes all audio locally by default. Your voice data never leaves your machine unless you explicitly enable remote server mode.
+
+### Remote Server Mode
+
+When connecting to a remote server:
+- Ensure the server is on a trusted network
+- Use HTTPS for remote connections
+- Verify server identity before connecting
+
+### Auto-Updates
+
+- Updates are cryptographically signed
+- Signature verification happens before installation
+- Only HTTPS endpoints are allowed
+
+### Python Server
+
+The embedded Python server:
+- Runs locally by default (localhost only)
+- Can be configured for remote access
+- Uses standard FastAPI security practices
+
+## Disclosure Timeline
+
+- **Day 0**: Vulnerability reported
+- **Day 1-2**: Initial assessment and acknowledgment
+- **Day 3-7**: Investigation and fix development
+- **Day 8-14**: Testing and release preparation
+- **Day 15+**: Public disclosure (if applicable)
+
+Timeline may vary based on severity and complexity.
+
+## Security Updates
+
+Security updates will be:
+- Released as patch versions (e.g., 0.1.1)
+- Documented in CHANGELOG.md
+- Announced via GitHub releases
+- Automatically delivered via auto-updater
+
+---
+
+Thank you for helping keep Voicebox secure! 🔒

SETUP.md

@@ -1,207 +0,0 @@
-# voicebox Setup Guide
-
-Quick start guide for setting up the voicebox development environment.
-
-## Prerequisites
-
-- **Bun** - Fast JavaScript runtime and package manager
-  ```bash
-  curl -fsSL https://bun.sh/install | bash
-  ```
-
-- **Python 3.11+** - For backend development
-  ```bash
-  python --version  # Should be 3.11 or higher
-  ```
-
-- **Rust** - For Tauri desktop app (installed automatically by Tauri CLI)
-  ```bash
-  rustc --version  # Check if installed
-  ```
-
-- **Node.js 18+** (optional) - Fallback if Bun is not available
-
-## Initial Setup
-
-### 1. Install Dependencies
-
-```bash
-# Install all workspace dependencies
-bun install
-```
-
-This will install dependencies for:
-- `app/` - Shared React frontend
-- `tauri/` - Tauri desktop wrapper
-- `web/` - Web deployment wrapper
-
-### 2. Setup 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
-```
-
-### 3. Initialize Database
-
-```bash
-cd backend
-python -c "from database import init_db; init_db()"
-```
-
-This creates the SQLite database at `data/voicebox.db`.
-
-### 4. Install Qwen3-TTS (Optional)
-
-The Qwen3-TTS models are automatically downloaded from HuggingFace Hub on first use. However, you need to install the `qwen_tts` package:
-
-```bash
-pip install git+https://github.com/QwenLM/Qwen3-TTS.git
-```
-
-**Note:** Models (~2-4GB) will be automatically downloaded on first generation. This may take a few minutes depending on your internet connection.
-
-## Development
-
-### Start Backend Server
-
-```bash
-cd backend
-source venv/bin/activate  # Activate venv if not already active
-uvicorn main:app --reload --port 8000
-```
-
-Backend will be available at `http://localhost:8000`
-
-### Start Tauri Desktop App
-
-```bash
-# From project root
-bun run dev
-```
-
-Or manually:
-```bash
-cd tauri
-bun run tauri dev
-```
-
-This will:
-1. Start Vite dev server on port 5173
-2. Launch Tauri window pointing to localhost:5173
-3. Enable hot reload
-
-### Start Web App
-
-```bash
-# From project root
-bun run dev:web
-```
-
-Or manually:
-```bash
-cd web
-bun run dev
-```
-
-Web app will be available at `http://localhost:5174` (or next available port)
-
-## Building
-
-### Build Python Server Binary
-
-```bash
-./scripts/build-server.sh
-```
-
-This creates a platform-specific binary in `tauri/src-tauri/binaries/`
-
-### Build Tauri Desktop App
-
-```bash
-cd tauri
-bun run tauri build
-```
-
-Creates platform-specific installers:
-- macOS: `.app`, `.dmg`
-- Windows: `.exe`, `.msi`
-- Linux: `.deb`, `.AppImage`
-
-### 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 will:
-1. Download OpenAPI schema from backend
-2. Generate TypeScript client in `app/src/lib/api/`
-
-## Project Structure
-
-```
-voicebox/
-├── app/              # Shared React frontend
-├── tauri/            # Tauri desktop wrapper
-├── web/              # Web deployment wrapper
-├── backend/          # Python FastAPI server
-├── scripts/          # Build and utility scripts
-├── data/             # User data (gitignored)
-└── docs/             # Documentation
-```
-
-## Troubleshooting
-
-### Backend won't start
-- Check Python version: `python --version` (needs 3.11+)
-- Ensure virtual environment is activated
-- Install dependencies: `pip install -r requirements.txt`
-
-### Tauri build fails
-- Ensure Rust is installed: `rustc --version`
-- Install Tauri CLI: `bunx @tauri-apps/cli install`
-- Check `tauri/src-tauri/Cargo.toml` for correct dependencies
-
-### OpenAPI client generation fails
-- Ensure backend is running on port 8000
-- Check `curl http://localhost:8000/openapi.json` returns valid JSON
-- Install openapi-typescript-codegen: `bun add -d openapi-typescript-codegen`
-
-## 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
-
-First-time usage will be slower due to model downloads, but subsequent runs will use cached models.
-
-## Next Steps
-
-1. ✅ TTS model loading implemented in `backend/tts.py`
-2. ✅ API routes implemented in `backend/main.py`
-3. Build React components in `app/src/components/`
-4. Connect frontend to backend via generated API client
-
-See [README.md](./README.md) for architecture details and [docs/](./docs/) for detailed documentation.

app/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@voicebox/app",
-  "version": "0.1.0",
+  "version": "0.1.6",
   "private": true,
   "type": "module",
   "scripts": {
@@ -13,6 +13,9 @@
     "check": "biome check --write src"
   },
   "dependencies": {
+    "@dnd-kit/core": "^6.3.1",
+    "@dnd-kit/sortable": "^10.0.0",
+    "@dnd-kit/utilities": "^3.2.2",
     "@hookform/resolvers": "^3.9.0",
     "@radix-ui/react-alert-dialog": "^1.1.1",
     "@radix-ui/react-avatar": "^1.1.0",
@@ -30,7 +33,10 @@
     "@radix-ui/react-toast": "^1.2.1",
     "@tanstack/react-query": "^5.0.0",
     "@tanstack/react-query-devtools": "^5.0.0",
+    "@tanstack/react-router": "^1.157.16",
     "@tauri-apps/api": "^2.0.0",
+    "@tauri-apps/plugin-dialog": "^2.0.0",
+    "@tauri-apps/plugin-fs": "^2.0.0",
     "@tauri-apps/plugin-process": "^2.3.1",
     "@tauri-apps/plugin-updater": "^2.9.0",
     "class-variance-authority": "^0.7.0",
@@ -38,6 +44,7 @@
     "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",
     "react-hook-form": "^7.53.0",

app/src/App.tsx

@@ -1,23 +1,56 @@
-import { useState, useEffect } from 'react';
+import { useEffect, useRef, useState } from 'react';
-import { GenerationForm } from '@/components/Generation/GenerationForm';
+import { RouterProvider } from '@tanstack/react-router';
-import { HistoryTable } from '@/components/History/HistoryTable';
+import voiceboxLogo from '@/assets/voicebox-logo.png';
-import { ConnectionForm } from '@/components/ServerSettings/ConnectionForm';
+import ShinyText from '@/components/ShinyText';
-import { ServerStatus } from '@/components/ServerSettings/ServerStatus';
+import { TitleBarDragRegion } from '@/components/TitleBarDragRegion';
-import { UpdateStatus } from '@/components/ServerSettings/UpdateStatus';
+import { TOP_SAFE_AREA_PADDING } from '@/lib/constants/ui';
-import { ModelManagement } from '@/components/ServerSettings/ModelManagement';
+import {
-import { Toaster } from '@/components/ui/toaster';
+  isTauri,
-import { ProfileList } from '@/components/VoiceProfiles/ProfileList';
+  setKeepServerRunning,
-import { Sidebar } from '@/components/Sidebar';
+  setupWindowCloseHandler,
-import { AudioPlayer } from '@/components/AudioPlayer/AudioPlayer';
+  startServer,
-import { UpdateNotification } from '@/components/UpdateNotification';
+} from '@/lib/tauri';
-import { isTauri, startServer, setupWindowCloseHandler } from '@/lib/tauri';
+import { cn } from '@/lib/utils/cn';
+import { router } from '@/router';
+import { useServerStore } from '@/stores/serverStore';
 
-// Track if server is starting to prevent duplicate starts
+const LOADING_MESSAGES = [
-let serverStarting = false;
+  'Warming up tensors...',
+  'Calibrating synthesizer engine...',
+  'Initializing voice models...',
+  'Loading neural networks...',
+  'Preparing audio pipelines...',
+  'Optimizing waveform generators...',
+  'Tuning frequency analyzers...',
+  'Building voice embeddings...',
+  'Configuring text-to-speech cores...',
+  'Syncing audio buffers...',
+  'Establishing model connections...',
+  'Preprocessing training data...',
+  'Validating voice samples...',
+  'Compiling inference engines...',
+  'Mapping phoneme sequences...',
+  'Aligning prosody parameters...',
+  'Activating speech synthesis...',
+  'Fine-tuning acoustic models...',
+  'Preparing voice cloning matrices...',
+  'Initializing Qwen TTS framework...',
+];
 
 function App() {
-  const [activeTab, setActiveTab] = useState('main');
   const [serverReady, setServerReady] = useState(false);
+  const [loadingMessageIndex, setLoadingMessageIndex] = useState(0);
+  const serverStartingRef = useRef(false);
+
+  // Sync stored setting to Rust on startup
+  useEffect(() => {
+    if (isTauri()) {
+      const keepRunning = useServerStore.getState().keepServerRunningOnClose;
+      setKeepServerRunning(keepRunning).catch((error) => {
+        console.error('Failed to sync initial setting to Rust:', error);
+      });
+    }
+  }, []);
 
   // Setup window close handler and auto-start server when running in Tauri (production only)
   useEffect(() => {
@@ -43,25 +76,25 @@ function App() {
     }
 
     // Auto-start server in production
-    if (serverStarting) {
+    if (serverStartingRef.current) {
       return;
     }
 
-    serverStarting = true;
+    serverStartingRef.current = true;
     console.log('Production mode: Starting bundled server...');
 
     startServer(false)
-      .then(() => {
+      .then((serverUrl) => {
-        console.log('Server is ready');
+        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)
-        // @ts-expect-error - adding property to window
         window.__voiceboxServerStartedByApp = true;
       })
       .catch((error) => {
         console.error('Failed to auto-start server:', error);
-        serverStarting = false;
+        serverStartingRef.current = false;
-        // @ts-expect-error - adding property to window
         window.__voiceboxServerStartedByApp = false;
       });
 
@@ -69,72 +102,59 @@ function App() {
     // Note: Window close is handled separately in Tauri Rust code
     return () => {
       // Window close event handles server shutdown based on setting
-      serverStarting = false;
+      serverStartingRef.current = false;
     };
   }, []);
 
+  // Cycle through loading messages every 3 seconds
+  useEffect(() => {
+    if (!isTauri() || serverReady) {
+      return;
+    }
+
+    const interval = setInterval(() => {
+      setLoadingMessageIndex((prev) => (prev + 1) % LOADING_MESSAGES.length);
+    }, 3000);
+
+    return () => clearInterval(interval);
+  }, [serverReady]);
+
   // Show loading screen while server is starting in Tauri
   if (isTauri() && !serverReady) {
     return (
-      <div className="min-h-screen bg-background flex items-center justify-center">
+      <div
-        <div className="text-center space-y-4">
+        className={cn(
-          <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-primary mx-auto"></div>
+          'min-h-screen bg-background flex items-center justify-center',
-          <p className="text-muted-foreground">Starting server...</p>
+          TOP_SAFE_AREA_PADDING,
+        )}
+      >
+        <TitleBarDragRegion />
+        <div className="text-center space-y-6">
+          <div className="flex justify-center relative">
+            <div className="absolute inset-0 flex items-center justify-center">
+              <div className="w-48 h-48 rounded-full bg-accent/20 blur-3xl" />
+            </div>
+            <img
+              src={voiceboxLogo}
+              alt="Voicebox"
+              className="w-48 h-48 object-contain animate-fade-in-scale relative z-10"
+            />
+          </div>
+          <div className="animate-fade-in-delayed">
+            <ShinyText
+              text={LOADING_MESSAGES[loadingMessageIndex]}
+              className="text-lg font-medium text-muted-foreground"
+              speed={2}
+              color="hsl(var(--muted-foreground))"
+              shineColor="hsl(var(--foreground))"
+            />
+          </div>
         </div>
       </div>
     );
   }
 
-  return (
+  return <RouterProvider router={router} />;
-    <div className="h-screen bg-background flex flex-col overflow-hidden">
-      <div className="flex flex-1 min-h-0 overflow-hidden">
-        <Sidebar activeTab={activeTab} onTabChange={setActiveTab} />
-
-        <main className="flex-1 ml-20 overflow-hidden flex flex-col">
-          <div className="container mx-auto px-8 py-8 max-w-[1800px] h-full overflow-hidden flex flex-col">
-            <UpdateNotification />
-
-            {activeTab === 'settings' ? (
-              <div className="space-y-4 overflow-y-auto">
-                <div className="grid gap-4 md:grid-cols-2">
-                  <ConnectionForm />
-                  <ServerStatus />
-                </div>
-                {isTauri() && <UpdateStatus />}
-                <ModelManagement />
-              </div>
-            ) : (
-              // 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">
-                {/* Left Column */}
-                <div className="flex flex-col gap-6 min-h-0 overflow-y-auto pb-32">
-                  {/* Profiles - Top Left */}
-                  <div className="shrink-0 flex flex-col">
-                    <ProfileList />
-                  </div>
-
-                  {/* Generator - Bottom Left */}
-                  <div className="shrink-0">
-                    <GenerationForm />
-                  </div>
-                </div>
-
-                {/* Right Column - History */}
-                <div className="flex flex-col min-h-0 overflow-hidden">
-                  <HistoryTable />
-                </div>
-              </div>
-            )}
-          </div>
-        </main>
-      </div>
-
-      {/* Audio Player - always visible except on settings */}
-      {activeTab !== 'settings' && <AudioPlayer />}
-
-      <Toaster />
-    </div>
-  );
 }
 
 export default App;

app/src/components/AppFrame/AppFrame.tsx

@@ -0,0 +1,35 @@
+import { useRouterState } from '@tanstack/react-router';
+import { TitleBarDragRegion } from '@/components/TitleBarDragRegion';
+import { AudioPlayer } from '@/components/AudioPlayer/AudioPlayer';
+import { StoryTrackEditor } from '@/components/StoriesTab/StoryTrackEditor';
+import { TOP_SAFE_AREA_PADDING } from '@/lib/constants/ui';
+import { cn } from '@/lib/utils/cn';
+import { useStoryStore } from '@/stores/storyStore';
+import { useStory } from '@/lib/hooks/useStories';
+
+interface AppFrameProps {
+  children: React.ReactNode;
+}
+
+export function AppFrame({ children }: AppFrameProps) {
+  const routerState = useRouterState();
+  const isStoriesRoute = routerState.location.pathname === '/stories';
+  
+  const selectedStoryId = useStoryStore((state) => state.selectedStoryId);
+  const { data: story } = useStory(selectedStoryId);
+  
+  // Show track editor when on stories route with a selected story that has items
+  const showTrackEditor = isStoriesRoute && selectedStoryId && story && story.items.length > 0;
+
+  return (
+    <div className={cn('h-screen bg-background flex flex-col overflow-hidden', TOP_SAFE_AREA_PADDING)}>
+      <TitleBarDragRegion />
+      {children}
+      {showTrackEditor ? (
+        <StoryTrackEditor storyId={story.id} items={story.items} />
+      ) : (
+        <AudioPlayer />
+      )}
+    </div>
+  );
+}

app/src/components/AudioPlayer/AudioPlayer.tsx

@@ -1,30 +1,75 @@
-import { Pause, Play, Repeat, Volume2, VolumeX } from 'lucide-react';
+import { useQuery } from '@tanstack/react-query';
-import { useEffect, useRef, useState } from 'react';
+import { invoke } from '@tauri-apps/api/core';
+import { Pause, Play, Repeat, Volume2, VolumeX, X } from 'lucide-react';
+import { useEffect, 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 { isTauri } from '@/lib/tauri';
 import { formatAudioDuration } from '@/lib/utils/audio';
+import { debug } from '@/lib/utils/debug';
 import { usePlayerStore } from '@/stores/playerStore';
 
 export function AudioPlayer() {
   const {
     audioUrl,
+    audioId,
+    profileId,
     title,
     isPlaying,
     currentTime,
     duration,
     volume,
     isLooping,
+    shouldRestart,
     setIsPlaying,
     setCurrentTime,
     setDuration,
     setVolume,
     toggleLoop,
+    clearRestartFlag,
+    reset,
   } = usePlayerStore();
 
+  // Check if profile has assigned channels (for native audio routing)
+  const { data: profileChannels } = useQuery({
+    queryKey: ['profile-channels', profileId],
+    queryFn: () => {
+      if (!profileId) return { channel_ids: [] };
+      return apiClient.getProfileChannels(profileId);
+    },
+    enabled: !!profileId && isTauri(),
+  });
+
+  const { data: channels } = useQuery({
+    queryKey: ['channels'],
+    queryFn: () => apiClient.listChannels(),
+    enabled: !!profileChannels && profileChannels.channel_ids.length > 0,
+  });
+
+  // Determine if we should use native playback
+  const useNativePlayback = useMemo(() => {
+    if (!isTauri() || !profileChannels || !channels) {
+      return false;
+    }
+
+    const assignedChannels = channels.filter((ch) => profileChannels.channel_ids.includes(ch.id));
+
+    // Use native playback if any assigned channel has non-default devices
+    const shouldUseNative = assignedChannels.some(
+      (ch) => ch.device_ids.length > 0 && !ch.is_default,
+    );
+
+    return shouldUseNative;
+  }, [profileChannels, channels, profileId]);
+
   const waveformRef = useRef<HTMLDivElement>(null);
   const wavesurferRef = useRef<WaveSurfer | null>(null);
   const loadingRef = useRef(false);
+  const previousAudioIdRef = useRef<string | null>(null);
+  const hasInitializedRef = useRef(false);
+  const isUsingNativePlaybackRef = useRef(false);
   const [isLoading, setIsLoading] = useState(false);
   const [error, setError] = useState<string | null>(null);
 
@@ -36,11 +81,11 @@ export function AudioPlayer() {
     }
 
     if (wavesurferRef.current) {
-      console.log('WaveSurfer already initialized, skipping');
+      debug.log('WaveSurfer already initialized, skipping');
       return;
     }
 
-    console.log('Creating NEW WaveSurfer instance');
+    debug.log('Creating NEW WaveSurfer instance');
 
     // Wait for container to be properly rendered
     const initWaveSurfer = () => {
@@ -66,7 +111,7 @@ export function AudioPlayer() {
         return;
       }
 
-      console.log('Initializing WaveSurfer...', {
+      debug.log('Initializing WaveSurfer...', {
         container,
         width: rect.width,
         height: rect.height,
@@ -99,9 +144,9 @@ export function AudioPlayer() {
         });
 
         wavesurferRef.current = wavesurfer;
-        console.log('WaveSurfer created successfully');
+        debug.log('WaveSurfer created successfully');
       } catch (error) {
-        console.error('Failed to create WaveSurfer:', error);
+        debug.error('Failed to create WaveSurfer:', error);
         setError(
           `Failed to initialize waveform: ${error instanceof Error ? error.message : String(error)}`,
         );
@@ -117,32 +162,206 @@ export function AudioPlayer() {
       });
 
       // Update store when duration is loaded
-      wavesurfer.on('ready', () => {
+      wavesurfer.on('ready', async () => {
         const dur = wavesurfer.getDuration();
         setDuration(dur);
         loadingRef.current = false;
         setIsLoading(false);
         setError(null);
-        console.log('Audio ready, duration:', dur);
+        debug.log('Audio ready, duration:', dur);
-        console.log('Waveform should be visible now');
+        debug.log('Waveform should be visible now');
 
         // Ensure volume is set
         const currentVolume = usePlayerStore.getState().volume;
         wavesurfer.setVolume(currentVolume);
 
         // Get the underlying audio element and ensure it's not muted
+        // (unless we're using native playback, which will be set later)
         const mediaElement = wavesurfer.getMediaElement();
-        if (mediaElement) {
+        if (mediaElement && !isUsingNativePlaybackRef.current) {
           mediaElement.volume = currentVolume;
           mediaElement.muted = false;
-          console.log('Audio element volume:', mediaElement.volume, 'muted:', mediaElement.muted);
+          debug.log('Audio element volume:', mediaElement.volume, 'muted:', mediaElement.muted);
         }
 
-        // Auto-play when ready
+        // Auto-play when ready - check if we should use native playback
+        // Get current values from the store and queries at runtime (not captured closure values)
+        const currentAudioUrl = usePlayerStore.getState().audioUrl;
+        const currentProfileId = usePlayerStore.getState().profileId;
+
+        debug.log('Auto-play check - capturing runtime values...');
+
+        // Fetch profile channels at runtime (not using captured value)
+        let runtimeProfileChannels = null;
+        let runtimeChannels = null;
+
+        if (isTauri() && currentProfileId) {
+          try {
+            runtimeProfileChannels = await apiClient.getProfileChannels(currentProfileId);
+            debug.log('Runtime profileChannels:', runtimeProfileChannels);
+
+            if (runtimeProfileChannels && runtimeProfileChannels.channel_ids.length > 0) {
+              runtimeChannels = await apiClient.listChannels();
+              debug.log('Runtime channels:', runtimeChannels);
+            }
+          } catch (error) {
+            debug.error('Failed to fetch runtime channel data:', error);
+          }
+        }
+
+        debug.log('Auto-play check:', {
+          isTauri: isTauri(),
+          currentAudioUrl,
+          currentProfileId,
+          hasProfileChannels: !!runtimeProfileChannels,
+          hasChannels: !!runtimeChannels,
+        });
+
+        if (
+          isTauri() &&
+          currentAudioUrl &&
+          currentProfileId &&
+          runtimeProfileChannels &&
+          runtimeChannels
+        ) {
+          debug.log('Attempting native audio playback...');
+
+          // Stop any existing native playback first
+          if (isUsingNativePlaybackRef.current) {
+            try {
+              await invoke('stop_audio_playback');
+              debug.log('Stopped existing native playback before starting new one');
+            } catch (error) {
+              debug.error('Failed to stop existing playback:', error);
+            }
+          }
+
+          try {
+            // Collect all device IDs from assigned channels
+            const assignedChannels = runtimeChannels.filter((ch: any) =>
+              runtimeProfileChannels.channel_ids.includes(ch.id),
+            );
+            debug.log('Assigned channels for playback:', assignedChannels);
+
+            // Check if any assigned channel has non-default devices
+            const shouldUseNative = assignedChannels.some(
+              (ch: any) => ch.device_ids.length > 0 && !ch.is_default,
+            );
+            debug.log('Should use native playback:', shouldUseNative);
+
+            if (!shouldUseNative) {
+              debug.log('No custom devices assigned, falling back to WaveSurfer');
+              // Reset native playback flag and unmute WaveSurfer
+              isUsingNativePlaybackRef.current = false;
+              const mediaElement = wavesurfer.getMediaElement();
+              if (mediaElement) {
+                const currentVolume = usePlayerStore.getState().volume;
+                mediaElement.volume = currentVolume;
+                mediaElement.muted = false;
+                debug.log(
+                  'WaveSurfer unmuted for normal playback - volume:',
+                  mediaElement.volume,
+                  'muted:',
+                  mediaElement.muted,
+                );
+              }
+            } else {
+              const deviceIds = assignedChannels.flatMap((ch: any) => ch.device_ids);
+              debug.log('Device IDs to play to:', deviceIds);
+
+              if (deviceIds.length > 0) {
+                debug.log('Fetching audio data from:', currentAudioUrl);
+                // Fetch audio data
+                const response = await fetch(currentAudioUrl);
+                const audioData = new Uint8Array(await response.arrayBuffer());
+                debug.log('Audio data size:', audioData.length);
+
+                // Play via native audio
+                debug.log('Invoking play_audio_to_devices...');
+                try {
+                  const result = await invoke('play_audio_to_devices', {
+                    audioData: Array.from(audioData),
+                    deviceIds: deviceIds,
+                  });
+                  debug.log('play_audio_to_devices completed successfully, result:', result);
+
+                  // Mark that we're using native playback
+                  isUsingNativePlaybackRef.current = true;
+
+                  // Mute WaveSurfer's audio element to prevent UI audio output
+                  // Keep WaveSurfer running for visualization
+                  const mediaElement = wavesurfer.getMediaElement();
+                  if (mediaElement) {
+                    mediaElement.volume = 0;
+                    mediaElement.muted = true;
+                    debug.log(
+                      'WaveSurfer muted for native playback - volume:',
+                      mediaElement.volume,
+                      'muted:',
+                      mediaElement.muted,
+                    );
+                  }
+
+                  // Start WaveSurfer playback for visualization (muted)
+                  wavesurfer.play().catch((error) => {
+                    debug.error('Failed to start WaveSurfer visualization:', error);
+                  });
+
+                  setIsPlaying(true);
+                  debug.log('Auto-playing via native audio routing - SUCCESS');
+                  return;
+                } catch (invokeError) {
+                  debug.error('play_audio_to_devices invoke failed:', invokeError);
+                  throw invokeError;
+                }
+              } else {
+                debug.log('No device IDs found, falling back to WaveSurfer');
+              }
+            }
+          } catch (error) {
+            debug.error(
+              'Native playback failed during auto-play, falling back to WaveSurfer:',
+              error,
+            );
+            // Reset native playback flag and unmute WaveSurfer
+            isUsingNativePlaybackRef.current = false;
+            const mediaElement = wavesurfer.getMediaElement();
+            if (mediaElement) {
+              const currentVolume = usePlayerStore.getState().volume;
+              mediaElement.volume = currentVolume;
+              mediaElement.muted = false;
+              debug.log(
+                'WaveSurfer unmuted after native playback failure - volume:',
+                mediaElement.volume,
+                'muted:',
+                mediaElement.muted,
+              );
+            }
+            // Fall through to WaveSurfer playback
+          }
+        } else {
+          debug.log('Not using native playback, using WaveSurfer');
+          // Reset native playback flag and unmute WaveSurfer
+          isUsingNativePlaybackRef.current = false;
+          const mediaElement = wavesurfer.getMediaElement();
+          if (mediaElement) {
+            const currentVolume = usePlayerStore.getState().volume;
+            mediaElement.volume = currentVolume;
+            mediaElement.muted = false;
+            debug.log(
+              'WaveSurfer unmuted for normal playback - volume:',
+              mediaElement.volume,
+              'muted:',
+              mediaElement.muted,
+            );
+          }
+        }
+
+        // Standard WaveSurfer auto-play
         // Use a small delay to ensure audio element is fully ready
         setTimeout(() => {
           wavesurfer.play().catch((error) => {
-            console.error('Failed to autoplay:', error);
+            debug.error('Failed to autoplay:', error);
             // Don't show error for autoplay failures (browser restrictions)
           });
         }, 100);
@@ -151,13 +370,27 @@ export function AudioPlayer() {
       // Handle play/pause
       wavesurfer.on('play', () => {
         setIsPlaying(true);
-        // Ensure audio element is not muted when playing
+        // Ensure audio element volume is set correctly
         const mediaElement = wavesurfer.getMediaElement();
         if (mediaElement) {
-          mediaElement.muted = false;
+          // Double-check: if using native playback, keep WaveSurfer muted
-          const currentVolume = usePlayerStore.getState().volume;
+          // Otherwise, ensure it's unmuted
-          mediaElement.volume = currentVolume;
+          if (isUsingNativePlaybackRef.current) {
-          console.log('Playing - volume:', mediaElement.volume, 'muted:', mediaElement.muted);
+            mediaElement.volume = 0;
+            mediaElement.muted = true;
+            debug.log('Playing (native mode) - WaveSurfer muted for visualization only');
+          } else {
+            // Ensure WaveSurfer is unmuted for normal playback
+            const currentVolume = usePlayerStore.getState().volume;
+            mediaElement.volume = currentVolume;
+            mediaElement.muted = false;
+            debug.log(
+              'Playing (normal mode) - volume:',
+              mediaElement.volume,
+              'muted:',
+              mediaElement.muted,
+            );
+          }
         }
       });
       wavesurfer.on('pause', () => setIsPlaying(false));
@@ -169,12 +402,17 @@ export function AudioPlayer() {
           wavesurfer.play();
         } else {
           setIsPlaying(false);
+          // Trigger finish callback if set
+          const onFinish = usePlayerStore.getState().onFinish;
+          if (onFinish) {
+            onFinish();
+          }
         }
       });
 
       // Handle errors
       wavesurfer.on('error', (error) => {
-        console.error('WaveSurfer error:', error);
+        debug.error('WaveSurfer error:', error);
         setIsLoading(false);
         setError(`Audio error: ${error instanceof Error ? error.message : String(error)}`);
       });
@@ -189,7 +427,7 @@ export function AudioPlayer() {
 
       // Load audio immediately if audioUrl is already set
       if (audioUrl) {
-        console.log('WaveSurfer ready, loading audio:', audioUrl);
+        debug.log('WaveSurfer ready, loading audio:', audioUrl);
         loadingRef.current = true;
         setIsLoading(true);
         // Stop any current playback before loading new audio
@@ -199,11 +437,11 @@ export function AudioPlayer() {
         wavesurfer
           .load(audioUrl)
           .then(() => {
-            console.log('Audio loaded into WaveSurfer');
+            debug.log('Audio loaded into WaveSurfer');
             loadingRef.current = false;
           })
           .catch((error) => {
-            console.error('Failed to load audio into WaveSurfer:', error);
+            debug.error('Failed to load audio into WaveSurfer:', error);
             loadingRef.current = false;
             setIsLoading(false);
             setError(
@@ -228,12 +466,12 @@ export function AudioPlayer() {
     });
 
     return () => {
-      console.log('Cleaning up WaveSurfer initialization effect');
+      debug.log('Cleaning up WaveSurfer initialization effect');
       if (rafId1) cancelAnimationFrame(rafId1);
       if (rafId2) cancelAnimationFrame(rafId2);
       if (timeoutId) clearTimeout(timeoutId);
       if (wavesurferRef.current) {
-        console.log('Destroying WaveSurfer instance');
+        debug.log('Destroying WaveSurfer instance');
         try {
           const mediaElement = wavesurferRef.current.getMediaElement();
           if (mediaElement) {
@@ -242,7 +480,7 @@ export function AudioPlayer() {
           }
           wavesurferRef.current.destroy();
         } catch (error) {
-          console.error('Error destroying WaveSurfer:', error);
+          debug.error('Error destroying WaveSurfer:', error);
         }
         wavesurferRef.current = null;
       }
@@ -263,36 +501,61 @@ export function AudioPlayer() {
         setDuration(0);
         setCurrentTime(0);
         setError(null);
+        // Reset native playback flag
+        isUsingNativePlaybackRef.current = false;
       }
       return;
     }
 
+    // Stop native playback if it was active
+    if (isUsingNativePlaybackRef.current && isTauri()) {
+      (async () => {
+        try {
+          await invoke('stop_audio_playback');
+          debug.log('Stopped native audio playback');
+        } catch (error) {
+          debug.error('Failed to stop native playback:', error);
+        }
+      })();
+    }
+
+    // Reset native playback flag when loading new audio
+    // Also unmute WaveSurfer if it was muted
+    if (isUsingNativePlaybackRef.current) {
+      const mediaElement = wavesurfer.getMediaElement();
+      if (mediaElement) {
+        mediaElement.muted = false;
+        mediaElement.volume = usePlayerStore.getState().volume;
+      }
+    }
+    isUsingNativePlaybackRef.current = false;
+
     // CRITICAL: Force stop any current playback and cancel any pending loads
     // This must happen BEFORE any early returns
-    console.log('Audio URL changed to:', audioUrl);
+    debug.log('Audio URL changed to:', audioUrl);
 
     // COMPLETELY stop and destroy the current audio
     try {
       // First pause if playing
       if (wavesurfer.isPlaying()) {
-        console.log('Pausing current playback');
+        debug.log('Pausing current playback');
         wavesurfer.pause();
       }
 
       // Stop the media element explicitly
       const mediaElement = wavesurfer.getMediaElement();
       if (mediaElement) {
-        console.log('Stopping media element');
+        debug.log('Stopping media element');
         mediaElement.pause();
         mediaElement.currentTime = 0;
         mediaElement.src = '';
       }
 
       // Use empty() to completely destroy the waveform and media element
-      console.log('Calling wavesurfer.empty() to destroy audio');
+      debug.log('Calling wavesurfer.empty() to destroy audio');
       wavesurfer.empty();
     } catch (error) {
-      console.error('Error stopping previous audio:', error);
+      debug.error('Error stopping previous audio:', error);
       // Continue anyway to load new audio
     }
 
@@ -307,16 +570,16 @@ export function AudioPlayer() {
     setDuration(0);
 
     // Load new audio
-    console.log('Starting new audio load for:', audioUrl);
+    debug.log('Starting new audio load for:', audioUrl);
     wavesurfer
       .load(audioUrl)
       .then(() => {
-        console.log('Audio load promise resolved');
+        debug.log('Audio load promise resolved');
         // Don't set loading to false here - wait for 'ready' event
       })
       .catch((error) => {
-        console.error('Failed to load audio:', error);
+        debug.error('Failed to load audio:', error);
-        console.error('Audio URL:', audioUrl);
+        debug.error('Audio URL:', audioUrl);
         loadingRef.current = false;
         setIsLoading(false);
         setError(`Failed to load audio: ${error instanceof Error ? error.message : String(error)}`);
@@ -331,7 +594,7 @@ export function AudioPlayer() {
     if (isPlaying && wavesurferRef.current.isPlaying() === false) {
       // Only auto-play if audio is ready
       wavesurferRef.current.play().catch((error) => {
-        console.error('Failed to play:', error);
+        debug.error('Failed to play:', error);
         setIsPlaying(false);
         setError(`Playback error: ${error instanceof Error ? error.message : String(error)}`);
       });
@@ -347,33 +610,176 @@ export function AudioPlayer() {
       // Also ensure the underlying audio element volume is set
       const mediaElement = wavesurferRef.current.getMediaElement();
       if (mediaElement) {
-        mediaElement.volume = volume;
+        // If using native playback, keep WaveSurfer muted regardless of volume setting
-        mediaElement.muted = volume === 0;
+        if (isUsingNativePlaybackRef.current) {
-        console.log('Volume synced:', volume, 'muted:', mediaElement.muted);
+          mediaElement.volume = 0;
+          mediaElement.muted = true;
+          debug.log('Volume sync: Using native playback, keeping WaveSurfer muted');
+        } else {
+          mediaElement.volume = volume;
+          mediaElement.muted = volume === 0;
+          debug.log('Volume synced:', volume, 'muted:', mediaElement.muted);
+        }
       }
     }
   }, [volume]);
 
+  // Mark as initialized when audio is ready, reset when audioId changes
+  useEffect(() => {
+    if (duration > 0 && audioId) {
+      hasInitializedRef.current = true;
+    }
+    // Reset initialization flag when audioId changes to a new audio
+    if (audioId !== previousAudioIdRef.current && previousAudioIdRef.current !== null) {
+      hasInitializedRef.current = false;
+    }
+    if (audioId !== null) {
+      previousAudioIdRef.current = audioId;
+    }
+  }, [duration, audioId]);
+
+  // Handle restart flag - when history item is clicked again, restart from beginning
+  useEffect(() => {
+    const wavesurfer = wavesurferRef.current;
+    if (!wavesurfer || !shouldRestart || duration === 0) {
+      return;
+    }
+
+    // Reset to beginning and play
+    debug.log('Restarting current audio from beginning');
+    wavesurfer.seekTo(0);
+    wavesurfer.play().catch((error) => {
+      debug.error('Failed to play after restart:', error);
+      setIsPlaying(false);
+      setError(`Playback error: ${error instanceof Error ? error.message : String(error)}`);
+    });
+
+    // Clear the restart flag
+    clearRestartFlag();
+  }, [shouldRestart, duration, setIsPlaying, clearRestartFlag]);
+
+  // 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) {
+      return;
+    }
+
+    // Auto-play the newly loaded audio
+    debug.log('Auto-playing next track in story mode');
+    wavesurfer.seekTo(0);
+    wavesurfer.play().catch((error) => {
+      debug.error('Failed to auto-play:', error);
+      setIsPlaying(false);
+      setError(`Playback error: ${error instanceof Error ? error.message : String(error)}`);
+    });
+
+    // Clear the auto-play flag
+    clearAutoPlayFlag();
+  }, [shouldAutoPlay, duration, setIsPlaying, clearAutoPlayFlag]);
+
   // Handle loop - WaveSurfer handles this via the 'finish' event
 
-  const handlePlayPause = () => {
+  const handlePlayPause = async () => {
+    // Standard WaveSurfer playback (works for both normal and native playback modes)
+    // When using native playback, WaveSurfer is muted but still controls visualization
     if (!wavesurferRef.current) {
-      console.error('WaveSurfer not initialized');
+      debug.error('WaveSurfer not initialized');
       return;
     }
 
     // Check if audio is loaded
     if (duration === 0 && !isLoading) {
-      console.error('Audio not loaded yet');
+      debug.error('Audio not loaded yet');
       setError('Audio not loaded. Please wait...');
       return;
     }
 
+    // If using native playback
+    if (useNativePlayback && audioUrl && profileChannels && channels) {
+      if (isPlaying) {
+        // Pause: stop native playback and pause WaveSurfer visualization
+        try {
+          await invoke('stop_audio_playback');
+          debug.log('Stopped native audio playback');
+        } catch (error) {
+          debug.error('Failed to stop native playback:', error);
+        }
+        wavesurferRef.current.pause();
+        return;
+      }
+
+      // Play: trigger native playback
+      try {
+        // Stop any existing native playback first
+        try {
+          await invoke('stop_audio_playback');
+        } catch (_error) {
+          // Ignore errors when stopping (might not be playing)
+          debug.log('No existing playback to stop');
+        }
+
+        // Collect all device IDs from assigned channels
+        const assignedChannels = channels.filter((ch) =>
+          profileChannels.channel_ids.includes(ch.id),
+        );
+        const deviceIds = assignedChannels.flatMap((ch) => ch.device_ids);
+
+        if (deviceIds.length > 0) {
+          // Fetch audio data
+          const response = await fetch(audioUrl);
+          const audioData = new Uint8Array(await response.arrayBuffer());
+
+          // Play via native audio
+          await invoke('play_audio_to_devices', {
+            audioData: Array.from(audioData),
+            deviceIds: deviceIds,
+          });
+
+          // Mark that we're using native playback
+          isUsingNativePlaybackRef.current = true;
+
+          // Mute WaveSurfer and start it for visualization
+          const mediaElement = wavesurferRef.current.getMediaElement();
+          if (mediaElement) {
+            mediaElement.volume = 0;
+            mediaElement.muted = true;
+          }
+
+          // Start WaveSurfer for visualization (muted)
+          wavesurferRef.current.play().catch((error) => {
+            debug.error('Failed to start WaveSurfer visualization:', error);
+            setIsPlaying(false);
+            setError(`Playback error: ${error instanceof Error ? error.message : String(error)}`);
+          });
+
+          return;
+        }
+      } catch (error) {
+        debug.error('Native playback failed, falling back to WaveSurfer:', error);
+        // Fall through to WaveSurfer playback
+        isUsingNativePlaybackRef.current = false;
+      }
+    }
+
+    // Standard WaveSurfer playback (or fallback from native playback failure)
     if (wavesurferRef.current.isPlaying()) {
       wavesurferRef.current.pause();
     } else {
+      // Ensure WaveSurfer is not muted if not using native playback
+      if (!isUsingNativePlaybackRef.current) {
+        const mediaElement = wavesurferRef.current.getMediaElement();
+        if (mediaElement) {
+          mediaElement.muted = false;
+          mediaElement.volume = volume;
+        }
+      }
+
       wavesurferRef.current.play().catch((error) => {
-        console.error('Failed to play:', error);
+        debug.error('Failed to play:', error);
         setIsPlaying(false);
         setError(`Playback error: ${error instanceof Error ? error.message : String(error)}`);
       });
@@ -390,6 +796,22 @@ export function AudioPlayer() {
     setVolume(value[0] / 100);
   };
 
+  const handleClose = () => {
+    // Stop any native playback
+    if (isUsingNativePlaybackRef.current && isTauri()) {
+      invoke('stop_audio_playback').catch((error) => {
+        debug.error('Failed to stop native playback:', error);
+      });
+    }
+    // Stop WaveSurfer
+    if (wavesurferRef.current) {
+      wavesurferRef.current.pause();
+      wavesurferRef.current.seekTo(0);
+    }
+    // Reset player state
+    reset();
+  };
+
   // Don't render if no audio
   if (!audioUrl) {
     return null;
@@ -470,6 +892,17 @@ export function AudioPlayer() {
               className="flex-1"
             />
           </div>
+
+          {/* Close Button */}
+          <Button
+            variant="ghost"
+            size="icon"
+            onClick={handleClose}
+            className="shrink-0"
+            title="Close player"
+          >
+            <X className="h-5 w-5" />
+          </Button>
         </div>
       </div>
     </div>

app/src/components/AudioTab/AudioTab.tsx

@@ -0,0 +1,672 @@
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
+import { invoke } from '@tauri-apps/api/core';
+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';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '@/components/ui/dialog';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select';
+import { apiClient } from '@/lib/api/client';
+import { BOTTOM_SAFE_AREA_PADDING } from '@/lib/constants/ui';
+import { isTauri } from '@/lib/tauri';
+import { cn } from '@/lib/utils/cn';
+import { usePlayerStore } from '@/stores/playerStore';
+
+interface AudioDevice {
+  id: string;
+  name: string;
+  is_default: boolean;
+}
+
+export function AudioTab() {
+  const [createDialogOpen, setCreateDialogOpen] = useState(false);
+  const [editingChannel, setEditingChannel] = useState<string | null>(null);
+  const [selectedChannelId, setSelectedChannelId] = useState<string | null>(null);
+  const queryClient = useQueryClient();
+  const audioUrl = usePlayerStore((state) => state.audioUrl);
+  const isPlayerVisible = !!audioUrl;
+
+  const { data: channels, isLoading: channelsLoading } = useQuery({
+    queryKey: ['channels'],
+    queryFn: () => apiClient.listChannels(),
+  });
+
+  const { data: devices, isLoading: devicesLoading } = useQuery({
+    queryKey: ['audio-devices'],
+    queryFn: async () => {
+      if (!isTauri()) {
+        return [];
+      }
+      try {
+        const result = await invoke<AudioDevice[]>('list_audio_output_devices');
+        return result;
+      } catch (error) {
+        console.error('Failed to list audio devices:', error);
+        return [];
+      }
+    },
+    enabled: isTauri(),
+  });
+
+  const { data: profiles } = useQuery({
+    queryKey: ['profiles'],
+    queryFn: () => apiClient.listProfiles(),
+  });
+
+  const createChannel = useMutation({
+    mutationFn: (data: { name: string; device_ids: string[] }) => apiClient.createChannel(data),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['channels'] });
+      setCreateDialogOpen(false);
+    },
+  });
+
+  const updateChannel = useMutation({
+    mutationFn: ({
+      channelId,
+      data,
+    }: {
+      channelId: string;
+      data: { name?: string; device_ids?: string[] };
+    }) => apiClient.updateChannel(channelId, data),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['channels'] });
+      queryClient.invalidateQueries({ queryKey: ['profile-channels'] });
+      setEditingChannel(null);
+    },
+  });
+
+  const deleteChannel = useMutation({
+    mutationFn: (channelId: string) => apiClient.deleteChannel(channelId),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['channels'] });
+      queryClient.invalidateQueries({ queryKey: ['profile-channels'] });
+    },
+  });
+
+  const { data: channelVoices } = useQuery({
+    queryKey: ['channel-voices', editingChannel],
+    queryFn: async () => {
+      if (!editingChannel) return { profile_ids: [] };
+      return apiClient.getChannelVoices(editingChannel);
+    },
+    enabled: !!editingChannel,
+  });
+
+  const setChannelVoices = useMutation({
+    mutationFn: ({ channelId, profileIds }: { channelId: string; profileIds: string[] }) =>
+      apiClient.setChannelVoices(channelId, profileIds),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['channel-voices'] });
+      queryClient.invalidateQueries({ queryKey: ['profile-channels'] });
+    },
+  });
+
+  if (channelsLoading || devicesLoading) {
+    return (
+      <div className="flex items-center justify-center h-full">
+        <div className="text-muted-foreground">Loading...</div>
+      </div>
+    );
+  }
+
+  const allChannels = channels || [];
+  const allDevices = devices || [];
+  const selectedChannel = selectedChannelId
+    ? allChannels.find((c) => c.id === selectedChannelId)
+    : null;
+
+  return (
+    <div className="h-full flex flex-col">
+      <div className="flex items-center justify-between mb-6 shrink-0">
+        <h2 className="text-2xl font-bold">Audio Channels</h2>
+        <Button onClick={() => setCreateDialogOpen(true)}>
+          <Plus className="h-4 w-4 mr-2" />
+          New Channel
+        </Button>
+      </div>
+
+      <div className="grid grid-cols-1 lg:grid-cols-2 gap-6 h-full min-h-0">
+        {/* Left Column - Channels */}
+        <div
+          className={cn(
+            'flex flex-col min-h-0 overflow-y-auto',
+            isPlayerVisible && BOTTOM_SAFE_AREA_PADDING,
+          )}
+        >
+          {allChannels.length === 0 ? (
+            <div className="flex flex-col items-center justify-center py-12 border-2 border-dashed border-muted rounded-md">
+              <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)}>
+                <Plus className="h-4 w-4 mr-2" />
+                Create Channel
+              </Button>
+            </div>
+          ) : (
+            <div className="space-y-3 p-2">
+              {allChannels.map((channel) => {
+                const isSelected = selectedChannelId === channel.id;
+                return (
+                  <button
+                    key={channel.id}
+                    type="button"
+                    className={cn(
+                      'group border rounded-lg p-4 transition-colors cursor-pointer text-left w-full',
+                      isSelected && 'ring-2 ring-primary bg-primary/5 border-primary',
+                    )}
+                    onClick={() => setSelectedChannelId(isSelected ? null : channel.id)}
+                  >
+                    <div className="flex items-start justify-between gap-4">
+                      <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">
+                            <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>
+                          </div>
+                        </div>
+
+                        <div className="space-y-2.5 ml-10">
+                          <div>
+                            <div className="text-xs font-medium text-muted-foreground mb-1">
+                              Output Devices
+                            </div>
+                            <div className="flex flex-wrap gap-1.5">
+                              {channel.device_ids.length > 0
+                                ? channel.device_ids.map((deviceId) => {
+                                    const device = allDevices.find((d) => d.id === deviceId);
+                                    return (
+                                      <Badge
+                                        key={deviceId}
+                                        variant="outline"
+                                        className="text-xs font-normal"
+                                      >
+                                        {device?.name || deviceId}
+                                      </Badge>
+                                    );
+                                  })
+                                : (() => {
+                                    const defaultDevice = allDevices.find((d) => d.is_default);
+                                    return defaultDevice ? (
+                                      <Badge variant="outline" className="text-xs font-normal">
+                                        {defaultDevice.name}
+                                      </Badge>
+                                    ) : null;
+                                  })()}
+                            </div>
+                          </div>
+
+                          <div>
+                            <div className="text-xs font-medium text-muted-foreground mb-1">
+                              Assigned Voices
+                            </div>
+                            <ChannelVoicesList channelId={channel.id} />
+                          </div>
+                        </div>
+                      </div>
+
+                      {!channel.is_default && (
+                        <div className="flex gap-1 shrink-0 opacity-0 group-hover:opacity-100 transition-opacity">
+                          <Button
+                            variant="ghost"
+                            size="sm"
+                            className="h-8 w-8 p-0"
+                            onClick={(e) => {
+                              e.stopPropagation();
+                              setEditingChannel(channel.id);
+                            }}
+                          >
+                            <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);
+                              }
+                            }}
+                          >
+                            <Trash2 className="h-4 w-4" />
+                          </Button>
+                        </div>
+                      )}
+                    </div>
+                  </button>
+                );
+              })}
+            </div>
+          )}
+        </div>
+
+        {/* Right Column - Available Devices */}
+        <div
+          className={cn(
+            'flex flex-col min-h-0 overflow-y-auto',
+            isPlayerVisible && BOTTOM_SAFE_AREA_PADDING,
+          )}
+        >
+          <div className="shrink-0 mb-4">
+            <h3 className="text-lg font-semibold">Available Devices</h3>
+            <p className="text-sm text-muted-foreground mt-1">
+              {selectedChannelId
+                ? selectedChannel?.is_default
+                  ? 'Default channel uses system default device'
+                  : 'Click devices to add or remove them from the selected channel'
+                : 'Select a channel to assign devices'}
+            </p>
+          </div>
+          {allDevices.length > 0 ? (
+            <div className="space-y-2">
+              {allDevices.map((device) => {
+                const isConnected =
+                  selectedChannelId &&
+                  selectedChannel &&
+                  (selectedChannel.device_ids.length === 0
+                    ? device.is_default
+                    : selectedChannel.device_ids.includes(device.id));
+                const canToggle =
+                  selectedChannelId && selectedChannel && !selectedChannel.is_default;
+
+                const handleDeviceClick = () => {
+                  if (!canToggle || !selectedChannel) return;
+
+                  const currentDeviceIds = selectedChannel.device_ids;
+                  const newDeviceIds = isConnected
+                    ? currentDeviceIds.filter((id) => id !== device.id)
+                    : [...currentDeviceIds, device.id];
+
+                  updateChannel.mutate({
+                    channelId: selectedChannelId,
+                    data: { device_ids: newDeviceIds },
+                  });
+                };
+
+                return (
+                  <button
+                    key={device.id}
+                    type="button"
+                    onClick={handleDeviceClick}
+                    disabled={!canToggle}
+                    className={cn(
+                      'flex items-center gap-2 text-sm p-3 rounded-lg border transition-colors text-left w-full',
+                      isConnected
+                        ? 'bg-primary/10 border-primary ring-1 ring-primary/20'
+                        : 'hover:bg-muted/50',
+                      !canToggle && 'cursor-default opacity-60',
+                      canToggle && 'cursor-pointer',
+                    )}
+                  >
+                    {canToggle ? (
+                      <div
+                        className={cn(
+                          'h-4 w-4 rounded border-2 flex items-center justify-center shrink-0',
+                          isConnected ? 'bg-accent border-accent' : 'border-muted-foreground/30',
+                        )}
+                      >
+                        {isConnected && <Check className="h-3 w-3 text-accent-foreground" />}
+                      </div>
+                    ) : device.is_default ? (
+                      <CheckCircle2 className="h-4 w-4 text-primary shrink-0" />
+                    ) : null}
+                    <span className={cn('truncate flex-1', device.is_default && 'font-medium')}>
+                      {device.name}
+                    </span>
+                  </button>
+                );
+              })}
+            </div>
+          ) : (
+            <div className="flex flex-col items-center justify-center py-12 border-2 border-dashed border-muted rounded-md">
+              <CheckCircle2 className="h-12 w-12 text-muted-foreground mb-4" />
+              <p className="text-muted-foreground text-center">
+                {isTauri() ? 'No audio devices found' : 'Audio device selection requires Tauri'}
+              </p>
+            </div>
+          )}
+        </div>
+      </div>
+
+      {/* Create Channel Dialog */}
+      <CreateChannelDialog
+        open={createDialogOpen}
+        onOpenChange={setCreateDialogOpen}
+        devices={devices || []}
+        onCreate={(name, deviceIds) => {
+          createChannel.mutate({ name, device_ids: deviceIds });
+        }}
+      />
+
+      {/* Edit Channel Dialog */}
+      {editingChannel &&
+        (() => {
+          const channel = channels?.find((c) => c.id === editingChannel);
+          return channel ? (
+            <EditChannelDialog
+              open={!!editingChannel}
+              onOpenChange={(open) => !open && setEditingChannel(null)}
+              channel={channel}
+              devices={devices || []}
+              profiles={profiles || []}
+              channelVoices={channelVoices?.profile_ids || []}
+              onUpdate={(name, deviceIds) => {
+                updateChannel.mutate({
+                  channelId: editingChannel,
+                  data: { name, device_ids: deviceIds },
+                });
+              }}
+              onSetVoices={(profileIds) => {
+                setChannelVoices.mutate({
+                  channelId: editingChannel,
+                  profileIds,
+                });
+              }}
+            />
+          ) : null;
+        })()}
+    </div>
+  );
+}
+
+function ChannelVoicesList({ channelId }: { channelId: string }) {
+  const { data: voices } = useQuery({
+    queryKey: ['channel-voices', channelId],
+    queryFn: () => apiClient.getChannelVoices(channelId),
+  });
+
+  const { data: profiles } = useQuery({
+    queryKey: ['profiles'],
+    queryFn: () => apiClient.listProfiles(),
+  });
+
+  const voiceNames =
+    voices?.profile_ids.map((id) => profiles?.find((p) => p.id === id)?.name).filter(Boolean) || [];
+
+  return (
+    <div className="flex flex-wrap gap-1.5">
+      {voiceNames.length > 0 ? (
+        voiceNames.map((name) => (
+          <Badge key={name} variant="outline" className="text-xs font-normal">
+            {name}
+          </Badge>
+        ))
+      ) : (
+        <span className="text-sm text-muted-foreground">No voices assigned</span>
+      )}
+    </div>
+  );
+}
+
+interface CreateChannelDialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  devices: AudioDevice[];
+  onCreate: (name: string, deviceIds: string[]) => void;
+}
+
+function CreateChannelDialog({ open, onOpenChange, devices, onCreate }: CreateChannelDialogProps) {
+  const [name, setName] = useState('');
+  const [selectedDevices, setSelectedDevices] = useState<string[]>([]);
+
+  const handleSubmit = () => {
+    if (name.trim()) {
+      onCreate(name.trim(), selectedDevices);
+      setName('');
+      setSelectedDevices([]);
+    }
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>Create Audio Channel</DialogTitle>
+          <DialogDescription>
+            Create a new audio channel (bus) to route voices to specific output devices.
+          </DialogDescription>
+        </DialogHeader>
+        <div className="space-y-4">
+          <div>
+            <Label htmlFor="channel-name">Channel Name</Label>
+            <Input
+              id="channel-name"
+              value={name}
+              onChange={(e) => setName(e.target.value)}
+              placeholder="e.g., Virtual Cable, Broadcast"
+            />
+          </div>
+          <div>
+            <Label>Output Devices</Label>
+            <Select
+              value={selectedDevices[0] || ''}
+              onValueChange={(value) => {
+                if (value && !selectedDevices.includes(value)) {
+                  setSelectedDevices([...selectedDevices, value]);
+                }
+              }}
+            >
+              <SelectTrigger>
+                <SelectValue placeholder="Select device" />
+              </SelectTrigger>
+              <SelectContent>
+                {devices.map((device) => (
+                  <SelectItem key={device.id} value={device.id}>
+                    {device.name} {device.is_default && '(default)'}
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+            {selectedDevices.length > 0 && (
+              <div className="mt-2 space-y-1">
+                {selectedDevices.map((deviceId) => {
+                  const device = devices.find((d) => d.id === deviceId);
+                  return (
+                    <div
+                      key={deviceId}
+                      className="flex items-center justify-between text-sm bg-muted p-2 rounded"
+                    >
+                      <span>{device?.name || deviceId}</span>
+                      <Button
+                        variant="ghost"
+                        size="sm"
+                        onClick={() =>
+                          setSelectedDevices(selectedDevices.filter((id) => id !== deviceId))
+                        }
+                      >
+                        <Trash2 className="h-3 w-3" />
+                      </Button>
+                    </div>
+                  );
+                })}
+              </div>
+            )}
+          </div>
+        </div>
+        <DialogFooter>
+          <Button variant="outline" onClick={() => onOpenChange(false)}>
+            Cancel
+          </Button>
+          <Button onClick={handleSubmit} disabled={!name.trim()}>
+            Create
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}
+
+interface EditChannelDialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  channel: {
+    id: string;
+    name: string;
+    device_ids: string[];
+  };
+  devices: AudioDevice[];
+  profiles: Array<{ id: string; name: string }>;
+  channelVoices: string[];
+  onUpdate: (name: string, deviceIds: string[]) => void;
+  onSetVoices: (profileIds: string[]) => void;
+}
+
+function EditChannelDialog({
+  open,
+  onOpenChange,
+  channel,
+  devices,
+  profiles,
+  channelVoices,
+  onUpdate,
+  onSetVoices,
+}: EditChannelDialogProps) {
+  const [name, setName] = useState(channel.name);
+  const [selectedDevices, setSelectedDevices] = useState<string[]>(channel.device_ids);
+  const [selectedVoices, setSelectedVoices] = useState<string[]>(channelVoices);
+
+  const handleSubmit = () => {
+    if (name.trim()) {
+      onUpdate(name.trim(), selectedDevices);
+      onSetVoices(selectedVoices);
+    }
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="max-w-2xl">
+        <DialogHeader>
+          <DialogTitle>Edit Channel</DialogTitle>
+          <DialogDescription>Update channel settings and voice assignments.</DialogDescription>
+        </DialogHeader>
+        <div className="space-y-4">
+          <div>
+            <Label htmlFor="edit-channel-name">Channel Name</Label>
+            <Input id="edit-channel-name" value={name} onChange={(e) => setName(e.target.value)} />
+          </div>
+          <div>
+            <Label>Output Devices</Label>
+            <Select
+              value=""
+              onValueChange={(value) => {
+                if (value && !selectedDevices.includes(value)) {
+                  setSelectedDevices([...selectedDevices, value]);
+                }
+              }}
+            >
+              <SelectTrigger>
+                <SelectValue placeholder="Add device" />
+              </SelectTrigger>
+              <SelectContent>
+                {devices.map((device) => (
+                  <SelectItem key={device.id} value={device.id}>
+                    {device.name} {device.is_default && '(default)'}
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+            {selectedDevices.length > 0 && (
+              <div className="mt-2 space-y-1">
+                {selectedDevices.map((deviceId) => {
+                  const device = devices.find((d) => d.id === deviceId);
+                  return (
+                    <div
+                      key={deviceId}
+                      className="flex items-center justify-between text-sm bg-muted p-2 rounded"
+                    >
+                      <span>{device?.name || deviceId}</span>
+                      <Button
+                        variant="ghost"
+                        size="sm"
+                        onClick={() =>
+                          setSelectedDevices(selectedDevices.filter((id) => id !== deviceId))
+                        }
+                      >
+                        <Trash2 className="h-3 w-3" />
+                      </Button>
+                    </div>
+                  );
+                })}
+              </div>
+            )}
+          </div>
+          <div>
+            <Label>Assigned Voices</Label>
+            <Select
+              value=""
+              onValueChange={(value) => {
+                if (value && !selectedVoices.includes(value)) {
+                  setSelectedVoices([...selectedVoices, value]);
+                }
+              }}
+            >
+              <SelectTrigger>
+                <SelectValue placeholder="Add voice" />
+              </SelectTrigger>
+              <SelectContent>
+                {profiles.map((profile) => (
+                  <SelectItem key={profile.id} value={profile.id}>
+                    {profile.name}
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+            {selectedVoices.length > 0 && (
+              <div className="mt-2 space-y-1">
+                {selectedVoices.map((profileId) => {
+                  const profile = profiles.find((p) => p.id === profileId);
+                  return (
+                    <div
+                      key={profileId}
+                      className="flex items-center justify-between text-sm bg-muted p-2 rounded"
+                    >
+                      <span>{profile?.name || profileId}</span>
+                      <Button
+                        variant="ghost"
+                        size="sm"
+                        onClick={() =>
+                          setSelectedVoices(selectedVoices.filter((id) => id !== profileId))
+                        }
+                      >
+                        <Trash2 className="h-3 w-3" />
+                      </Button>
+                    </div>
+                  );
+                })}
+              </div>
+            )}
+          </div>
+        </div>
+        <DialogFooter>
+          <Button variant="outline" onClick={() => onOpenChange(false)}>
+            Cancel
+          </Button>
+          <Button onClick={handleSubmit} disabled={!name.trim()}>
+            Save
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}

app/src/components/Generation/.gitkeep

@@ -1 +0,0 @@
-# Voice generation components

app/src/components/Generation/FloatingGenerateBox.tsx

@@ -0,0 +1,378 @@
+import { useMatchRoute } from '@tanstack/react-router';
+import { AnimatePresence, motion } from 'framer-motion';
+import { Loader2, MessageSquare, Sparkles } from 'lucide-react';
+import { useEffect, useRef, useState } from 'react';
+import { Button } from '@/components/ui/button';
+import { Form, FormControl, FormField, FormItem, FormMessage } from '@/components/ui/form';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  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 { useGenerationForm } from '@/lib/hooks/useGenerationForm';
+import { useProfile, useProfiles } from '@/lib/hooks/useProfiles';
+import { useAddStoryItem, useStory } from '@/lib/hooks/useStories';
+import { cn } from '@/lib/utils/cn';
+import { useStoryStore } from '@/stores/storyStore';
+import { useUIStore } from '@/stores/uiStore';
+
+interface FloatingGenerateBoxProps {
+  isPlayerOpen?: boolean;
+  showVoiceSelector?: boolean;
+}
+
+export function FloatingGenerateBox({
+  isPlayerOpen = false,
+  showVoiceSelector = false,
+}: FloatingGenerateBoxProps) {
+  const selectedProfileId = useUIStore((state) => state.selectedProfileId);
+  const setSelectedProfileId = useUIStore((state) => state.setSelectedProfileId);
+  const { data: selectedProfile } = useProfile(selectedProfileId || '');
+  const { data: profiles } = useProfiles();
+  const [isExpanded, setIsExpanded] = useState(false);
+  const [isInstructMode, setIsInstructMode] = useState(false);
+  const containerRef = useRef<HTMLDivElement>(null);
+  const textareaRef = useRef<HTMLTextAreaElement | null>(null);
+  const matchRoute = useMatchRoute();
+  const isStoriesRoute = matchRoute({ to: '/stories' });
+  const selectedStoryId = useStoryStore((state) => state.selectedStoryId);
+  const trackEditorHeight = useStoryStore((state) => state.trackEditorHeight);
+  const { data: currentStory } = useStory(selectedStoryId);
+  const addStoryItem = useAddStoryItem();
+  const { toast } = useToast();
+
+  // Calculate if track editor is visible (on stories route with items)
+  const hasTrackEditor = isStoriesRoute && currentStory && currentStory.items.length > 0;
+
+  const { form, handleSubmit, isPending } = useGenerationForm({
+    onSuccess: async (generationId) => {
+      setIsExpanded(false);
+      // If on stories route and a story is selected, add generation to story
+      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',
+          });
+        }
+      }
+    },
+  });
+
+  // Click away handler to collapse the box
+  useEffect(() => {
+    function handleClickOutside(event: MouseEvent) {
+      const target = event.target as HTMLElement;
+
+      // Don't collapse if clicking inside the container
+      if (containerRef.current?.contains(target)) {
+        return;
+      }
+
+      // Don't collapse if clicking on a Select dropdown (which renders in a portal)
+      if (
+        target.closest('[role="listbox"]') ||
+        target.closest('[data-radix-popper-content-wrapper]')
+      ) {
+        return;
+      }
+
+      setIsExpanded(false);
+    }
+
+    if (isExpanded) {
+      document.addEventListener('mousedown', handleClickOutside);
+    }
+
+    return () => {
+      document.removeEventListener('mousedown', handleClickOutside);
+    };
+  }, [isExpanded]);
+
+  // Set first voice as default if none selected
+  useEffect(() => {
+    if (!selectedProfileId && profiles && profiles.length > 0) {
+      setSelectedProfileId(profiles[0].id);
+    }
+  }, [selectedProfileId, profiles, setSelectedProfileId]);
+
+  // Get current form value to trigger resize when it changes
+  const formValue = form.watch(isInstructMode ? 'instruct' : 'text');
+
+  // Auto-resize textarea based on content (only when expanded)
+  useEffect(() => {
+    if (!isExpanded) {
+      // Reset textarea height after collapse animation completes
+      const timeoutId = setTimeout(() => {
+        const textarea = textareaRef.current;
+        if (textarea) {
+          textarea.style.height = '32px';
+          textarea.style.overflowY = 'hidden';
+        }
+      }, 200); // Wait for animation to complete
+      return () => clearTimeout(timeoutId);
+    }
+
+    const textarea = textareaRef.current;
+    if (!textarea) return;
+
+    const adjustHeight = () => {
+      textarea.style.height = 'auto';
+      const scrollHeight = textarea.scrollHeight;
+      const minHeight = 100; // Expanded minimum
+      const maxHeight = 300; // Max height in pixels
+      const targetHeight = Math.max(minHeight, Math.min(scrollHeight, maxHeight));
+      textarea.style.height = `${targetHeight}px`;
+
+      // Show scrollbar if content exceeds max height
+      if (scrollHeight > maxHeight) {
+        textarea.style.overflowY = 'auto';
+      } else {
+        textarea.style.overflowY = 'hidden';
+      }
+    };
+
+    // Small delay to let framer animation complete
+    const timeoutId = setTimeout(() => {
+      adjustHeight();
+    }, 200);
+
+    // Adjust on mount and when value changes
+    adjustHeight();
+
+    // Watch for input changes
+    textarea.addEventListener('input', adjustHeight);
+
+    return () => {
+      clearTimeout(timeoutId);
+      textarea.removeEventListener('input', adjustHeight);
+    };
+  }, [isExpanded]);
+
+  async function onSubmit(data: Parameters<typeof handleSubmit>[0]) {
+    await handleSubmit(data, selectedProfileId);
+  }
+
+  return (
+    <motion.div
+      ref={containerRef}
+      className={cn(
+        'fixed right-auto',
+        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)]',
+      )}
+      style={{
+        // On stories route: offset by track editor height when visible
+        // On other routes: offset by audio player height when visible
+        bottom: hasTrackEditor
+          ? `${trackEditorHeight + 24}px`
+          : isPlayerOpen
+            ? 'calc(7rem + 1.5rem)'
+            : '1.5rem',
+      }}
+    >
+      <motion.div
+        className="bg-background/30 backdrop-blur-2xl border border-accent/20 rounded-[2rem] shadow-2xl hover:bg-background/40 hover:border-accent/20 transition-all duration-300 overflow-hidden p-3"
+        transition={{ duration: 0.6, ease: 'easeInOut' }}
+      >
+        <Form {...form}>
+          <form onSubmit={form.handleSubmit(onSubmit)}>
+            <div className="flex gap-2">
+              <motion.div className="flex-1" transition={{ duration: 0.3, ease: 'easeOut' }}>
+                {isInstructMode && (
+                  <span className="text-xs text-accent font-medium mb-1 block">
+                    Delivery instructions:
+                  </span>
+                )}
+                <FormField
+                  control={form.control}
+                  name={isInstructMode ? 'instruct' : 'text'}
+                  render={({ field }) => (
+                    <FormItem>
+                      <FormControl>
+                        <motion.div
+                          animate={{
+                            height: isExpanded ? 'auto' : '32px',
+                          }}
+                          transition={{ duration: 0.15, ease: 'easeOut' }}
+                          style={{ overflow: 'hidden' }}
+                        >
+                          <Textarea
+                            {...field}
+                            ref={(node: HTMLTextAreaElement | null) => {
+                              // Store ref for auto-resize
+                              textareaRef.current = node;
+                              // Forward ref to react-hook-form
+                              if (typeof field.ref === 'function') {
+                                field.ref(node);
+                              }
+                            }}
+                            placeholder={
+                              isInstructMode
+                                ? 'Add delivery instructions...'
+                                : 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)}
+                          />
+                        </motion.div>
+                      </FormControl>
+                      <FormMessage className="text-xs" />
+                    </FormItem>
+                  )}
+                />
+              </motion.div>
+
+              <div className="relative shrink-0">
+                <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 hover:shadow-accent/50 transition-all duration-200"
+                  size="icon"
+                >
+                  {isPending ? (
+                    <Loader2 className="h-4 w-4 animate-spin" />
+                  ) : (
+                    <Sparkles className="h-4 w-4" />
+                  )}
+                </Button>
+                <AnimatePresence>
+                  {isExpanded && (
+                    <motion.div
+                      initial={{ opacity: 0, scale: 0.8 }}
+                      animate={{ opacity: 1, scale: 1 }}
+                      exit={{ opacity: 0, scale: 0.8 }}
+                      transition={{ duration: 0.2 }}
+                      className="absolute top-0 right-[calc(100%+0.5rem)]"
+                    >
+                      <Button
+                        type="button"
+                        variant="ghost"
+                        size="icon"
+                        onClick={() => setIsInstructMode(!isInstructMode)}
+                        className={`h-10 w-10 rounded-full bg-card border border-border hover:bg-background/50 transition-all duration-200 ${
+                          isInstructMode ? 'text-accent' : ''
+                        }`}
+                      >
+                        <MessageSquare className="h-4 w-4" />
+                      </Button>
+                    </motion.div>
+                  )}
+                </AnimatePresence>
+              </div>
+            </div>
+
+            <AnimatePresence>
+              <motion.div
+                initial={{ height: 0, opacity: 0 }}
+                animate={{ height: 'auto', opacity: 1 }}
+                exit={{ height: 0, opacity: 0 }}
+                transition={{ duration: 0.3, ease: 'easeOut' }}
+                className=" mt-3"
+              >
+                <div className="flex items-center gap-2">
+                  {showVoiceSelector && (
+                    <div className="flex-1">
+                      <Select
+                        value={selectedProfileId || ''}
+                        onValueChange={(value) => setSelectedProfileId(value || null)}
+                      >
+                        <SelectTrigger className="h-8 text-xs bg-card border-border rounded-full hover:bg-background/50 transition-all w-full">
+                          <SelectValue placeholder="Select a voice..." />
+                        </SelectTrigger>
+                        <SelectContent>
+                          {profiles?.map((profile) => (
+                            <SelectItem key={profile.id} value={profile.id} className="text-xs">
+                              {profile.name}
+                            </SelectItem>
+                          ))}
+                        </SelectContent>
+                      </Select>
+                    </div>
+                  )}
+
+                  <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>
+                    )}
+                  />
+
+                  <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>
+                    )}
+                  />
+                </div>
+              </motion.div>
+            </AnimatePresence>
+          </form>
+        </Form>
+      </motion.div>
+    </motion.div>
+  );
+}

app/src/components/Generation/GenerationForm.tsx

@@ -1,8 +1,4 @@
-import { zodResolver } from '@hookform/resolvers/zod';
 import { Loader2, Mic } from 'lucide-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 {
@@ -23,71 +19,19 @@ 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 { useGeneration } from '@/lib/hooks/useGeneration';
+import { useGenerationForm } from '@/lib/hooks/useGenerationForm';
 import { useProfile } from '@/lib/hooks/useProfiles';
 import { useUIStore } from '@/stores/uiStore';
 
-const generationSchema = z.object({
-  text: z.string().min(1, 'Text is required').max(5000),
-  language: z.enum(['en', 'zh']),
-  seed: z.number().int().optional(),
-  modelSize: z.enum(['1.7B', '0.6B']).optional(),
-  instruct: z.string().max(500).optional(),
-});
-
-type GenerationFormValues = z.infer<typeof generationSchema>;
-
 export function GenerationForm() {
   const selectedProfileId = useUIStore((state) => state.selectedProfileId);
   const { data: selectedProfile } = useProfile(selectedProfileId || '');
-  const generation = useGeneration();
-  const { toast } = useToast();
 
-  const form = useForm<GenerationFormValues>({
+  const { form, handleSubmit, isPending } = useGenerationForm();
-    resolver: zodResolver(generationSchema),
-    defaultValues: {
-      text: '',
-      language: 'en',
-      seed: undefined,
-      modelSize: '1.7B',
-      instruct: '',
-    },
-  });
 
-  async function onSubmit(data: GenerationFormValues) {
+  async function onSubmit(data: Parameters<typeof handleSubmit>[0]) {
-    if (!selectedProfileId) {
+    await handleSubmit(data, selectedProfileId);
-      toast({
-        title: 'No profile selected',
-        description: 'Please select a voice profile from the cards above.',
-        variant: 'destructive',
-      });
-      return;
-    }
-
-    try {
-      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,
-      });
-
-      toast({
-        title: 'Generation complete!',
-        description: `Audio generated (${result.duration.toFixed(2)}s)`,
-      });
-
-      form.reset();
-    } catch (error) {
-      toast({
-        title: 'Generation failed',
-        description: error instanceof Error ? error.message : 'Failed to generate audio',
-        variant: 'destructive',
-      });
-    }
   }
 
   return (
@@ -104,7 +48,7 @@ export function GenerationForm() {
                 <div className="mt-2 p-3 border rounded-md bg-muted/50 flex items-center gap-2">
                   <Mic className="h-4 w-4 text-muted-foreground" />
                   <span className="font-medium">{selectedProfile.name}</span>
-                  <Badge variant="outline">{selectedProfile.language}</Badge>
+                  <span className="text-sm text-muted-foreground">{selectedProfile.language}</span>
                 </div>
               ) : (
                 <div className="mt-2 p-3 border border-dashed rounded-md text-sm text-muted-foreground">
@@ -168,8 +112,11 @@ export function GenerationForm() {
                         </SelectTrigger>
                       </FormControl>
                       <SelectContent>
-                        <SelectItem value="en">English</SelectItem>
+                        {LANGUAGE_OPTIONS.map((lang) => (
-                        <SelectItem value="zh">Chinese</SelectItem>
+                          <SelectItem key={lang.value} value={lang.value}>
+                            {lang.label}
+                          </SelectItem>
+                        ))}
                       </SelectContent>
                     </Select>
                     <FormMessage />
@@ -226,9 +173,9 @@ export function GenerationForm() {
             <Button
               type="submit"
               className="w-full"
-              disabled={generation.isPending || !selectedProfileId}
+              disabled={isPending || !selectedProfileId}
             >
-              {generation.isPending ? (
+              {isPending ? (
                 <>
                   <Loader2 className="mr-2 h-4 w-4 animate-spin" />
                   Generating...

app/src/components/History/.gitkeep

@@ -1 +0,0 @@
-# Generation history components

app/src/components/History/HistoryTable.tsx

@@ -1,30 +1,48 @@
-import { Download, MoreHorizontal, Play, Trash2 } from 'lucide-react';
+import { AudioWaveform, Download, FileArchive, MoreHorizontal, Play, Trash2 } from 'lucide-react';
-import { useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
-import { Badge } from '@/components/ui/badge';
 import { Button } from '@/components/ui/button';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '@/components/ui/dialog';
 import {
   DropdownMenu,
   DropdownMenuContent,
   DropdownMenuItem,
   DropdownMenuTrigger,
 } from '@/components/ui/dropdown-menu';
-import {
+import { Textarea } from '@/components/ui/textarea';
-  Table,
+import { useToast } from '@/components/ui/use-toast';
-  TableBody,
-  TableCell,
-  TableHead,
-  TableHeader,
-  TableRow,
-} from '@/components/ui/table';
 import { apiClient } from '@/lib/api/client';
-import { useDeleteGeneration, useHistory } from '@/lib/hooks/useHistory';
+import { BOTTOM_SAFE_AREA_PADDING } from '@/lib/constants/ui';
+import {
+  useDeleteGeneration,
+  useExportGeneration,
+  useExportGenerationAudio,
+  useHistory,
+  useImportGeneration,
+} from '@/lib/hooks/useHistory';
 import { cn } from '@/lib/utils/cn';
 import { formatDate, formatDuration } from '@/lib/utils/format';
 import { usePlayerStore } from '@/stores/playerStore';
 
+// OLD TABLE-BASED COMPONENT - REMOVED (can be found in git history)
+// This is the new alternate history view with fixed height rows
+
+// NEW ALTERNATE HISTORY VIEW - FIXED HEIGHT ROWS
 export function HistoryTable() {
-  const [page, setPage] = useState(0);
+  const [page, _setPage] = useState(0);
+  const [isScrolled, setIsScrolled] = useState(false);
+  const scrollRef = useRef<HTMLDivElement>(null);
+  const fileInputRef = useRef<HTMLInputElement>(null);
+  const [importDialogOpen, setImportDialogOpen] = useState(false);
+  const [selectedFile, setSelectedFile] = useState<File | null>(null);
   const limit = 20;
+  const { toast } = useToast();
 
   const { data: historyData, isLoading } = useHistory({
     limit,
@@ -32,144 +50,271 @@ export function HistoryTable() {
   });
 
   const deleteGeneration = useDeleteGeneration();
+  const exportGeneration = useExportGeneration();
+  const exportGenerationAudio = useExportGenerationAudio();
+  const importGeneration = useImportGeneration();
   const setAudio = usePlayerStore((state) => state.setAudio);
+  const restartCurrentAudio = usePlayerStore((state) => state.restartCurrentAudio);
   const currentAudioId = usePlayerStore((state) => state.audioId);
   const isPlaying = usePlayerStore((state) => state.isPlaying);
   const audioUrl = usePlayerStore((state) => state.audioUrl);
   const isPlayerVisible = !!audioUrl;
 
-  const handlePlay = (audioId: string, text: string) => {
+  useEffect(() => {
-    const audioUrl = apiClient.getAudioUrl(audioId);
+    const scrollEl = scrollRef.current;
-    // If clicking the same audio that's playing, it will be handled by the player
+    if (!scrollEl) return;
-    setAudio(audioUrl, audioId, text.substring(0, 50));
+
+    const handleScroll = () => {
+      setIsScrolled(scrollEl.scrollTop > 0);
+    };
+
+    scrollEl.addEventListener('scroll', handleScroll);
+    return () => scrollEl.removeEventListener('scroll', handleScroll);
+  }, []);
+
+  const handlePlay = (audioId: string, text: string, profileId: string) => {
+    // If clicking the same audio, restart it from the beginning
+    if (currentAudioId === audioId) {
+      restartCurrentAudio();
+    } else {
+      // Otherwise, load the new audio
+      const audioUrl = apiClient.getAudioUrl(audioId);
+      setAudio(audioUrl, audioId, profileId, text.substring(0, 50));
+    }
   };
 
-  const handleDownload = (audioId: string, text: string) => {
+  const handleDownloadAudio = (generationId: string, text: string) => {
-    const audioUrl = apiClient.getAudioUrl(audioId);
+    exportGenerationAudio.mutate(
-    const filename = `${text.substring(0, 30).replace(/[^a-z0-9]/gi, '_')}.wav`;
+      { generationId, text },
-    const link = document.createElement('a');
+      {
-    link.href = audioUrl;
+        onError: (error) => {
-    link.download = filename;
+          toast({
-    document.body.appendChild(link);
+            title: 'Failed to download audio',
-    link.click();
+            description: error.message,
-    document.body.removeChild(link);
+            variant: 'destructive',
+          });
+        },
+      },
+    );
+  };
+
+  const handleExportPackage = (generationId: string, text: string) => {
+    exportGeneration.mutate(
+      { generationId, text },
+      {
+        onError: (error) => {
+          toast({
+            title: 'Failed to export generation',
+            description: error.message,
+            variant: 'destructive',
+          });
+        },
+      },
+    );
+  };
+
+  const _handleImportClick = () => {
+    file_handleImportClickk.click();
+  };
+
+  const _handleFileChange = (_e: React.ChangeEvent<HTMLInputElement>) => {
+    cons_handleFileChangeet.files?.[0];
+    if (file) {
+      // Validate file extension
+      if (!file.name.endsWith('.voicebox.zip')) {
+        toast({
+          title: 'Invalid file type',
+          description: 'Please select a valid .voicebox.zip file',
+          variant: 'destructive',
+        });
+        return;
+      }
+      setSelectedFile(file);
+      setImportDialogOpen(true);
+    }
+  };
+
+  const handleImportConfirm = () => {
+    if (selectedFile) {
+      importGeneration.mutate(selectedFile, {
+        onSuccess: (data) => {
+          setImportDialogOpen(false);
+          setSelectedFile(null);
+          if (fileInputRef.current) {
+            fileInputRef.current.value = '';
+          }
+          toast({
+            title: 'Generation imported',
+            description: data.message || 'Generation imported successfully',
+          });
+        },
+        onError: (error) => {
+          toast({
+            title: 'Failed to import generation',
+            description: error.message,
+            variant: 'destructive',
+          });
+        },
+      });
+    }
   };
 
   if (isLoading) {
-    return (
+    return null;
-      <div className="flex items-center justify-center p-8">
-        <div className="text-muted-foreground">Loading history...</div>
-      </div>
-    );
   }
 
   const history = historyData?.items || [];
   const total = historyData?.total || 0;
-  const hasMore = history.length === limit && (page + 1) * limit < total;
+  const _hasMore = history.length === limit && (page + 1) * limit < total;
 
   return (
-    <div className="flex flex-col h-full min-h-0">
+    <div className="flex flex-col h-full min-h-0 relative">
       {history.length === 0 ? (
-        <div className="text-center py-12 text-muted-foreground flex-1 flex items-center justify-center">
+        <div className="text-center py-12 px-5 border-2 border-dashed mb-5 border-muted rounded-md text-muted-foreground flex-1 flex items-center justify-center">
-          No generation history yet. Generate your first audio to see it here.
+          No voice generations, yet...
         </div>
       ) : (
         <>
+          {isScrolled && (
+            <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
+            ref={scrollRef}
             className={cn(
-              'flex-1 min-h-0 overflow-y-auto border rounded-md overflow-x-hidden',
+              'flex-1 min-h-0 overflow-y-auto space-y-2 pb-4',
-              isPlayerVisible && 'max-h-[calc(100vh-220px)]',
+              isPlayerVisible && BOTTOM_SAFE_AREA_PADDING,
             )}
           >
-            <Table className="w-full table-fixed">
+            {history.map((gen) => {
-              <TableHeader className="sticky top-0 bg-background z-10">
+              const isCurrentlyPlaying = currentAudioId === gen.id && isPlaying;
-                <TableRow>
+              return (
-                  <TableHead className="w-[38%]">Input</TableHead>
+                <div
-                  <TableHead className="w-[13%]">Voice</TableHead>
+                  key={gen.id}
-                  <TableHead className="w-[9%]">Lang</TableHead>
+                  className={cn(
-                  <TableHead className="w-[9%]">Length</TableHead>
+                    'flex items-stretch gap-4 h-26 border rounded-md p-3 bg-card hover:bg-muted/70 transition-colors text-left w-full',
-                  <TableHead className="w-[13%]">Date</TableHead>
+                    isCurrentlyPlaying && 'bg-muted/70',
-                  <TableHead className="w-[8%] text-right"></TableHead>
+                  )}
-                </TableRow>
+                  onMouseDown={(e) => {
-              </TableHeader>
+                    // Don't trigger play if clicking on textarea or if text is selected
-              <TableBody>
+                    const target = e.target as HTMLElement;
-                {history.map((gen) => {
+                    if (target.closest('textarea') || window.getSelection()?.toString()) {
-                  const isCurrentlyPlaying = currentAudioId === gen.id && isPlaying;
+                      return;
-                  return (
+                    }
-                    <TableRow
+                    handlePlay(gen.id, gen.text, gen.profile_id);
-                      key={gen.id}
+                  }}
-                      className={cn(isCurrentlyPlaying && 'bg-muted/50', 'cursor-pointer')}
+                >
-                      onClick={() => handlePlay(gen.id, gen.text)}
+                  {/* Waveform icon */}
-                    >
+                  <div className="flex items-center shrink-0">
-                      <TableCell className="truncate">{gen.text}</TableCell>
+                    <AudioWaveform className="h-5 w-5 text-muted-foreground" />
-                      <TableCell className="truncate">{gen.profile_name}</TableCell>
+                  </div>
-                      <TableCell>
-                        <Badge variant="outline" className="text-xs text-muted-foreground">
-                          {gen.language}
-                        </Badge>
-                      </TableCell>
-                      <TableCell className="text-sm">{formatDuration(gen.duration)}</TableCell>
-                      <TableCell className="text-xs text-muted-foreground/60">
-                        {formatDate(gen.created_at)}
-                      </TableCell>
-                      <TableCell className="text-right">
-                        <div className="flex justify-end" onClick={(e) => e.stopPropagation()}>
-                          <DropdownMenu>
-                            <DropdownMenuTrigger asChild>
-                              <Button
-                                variant="ghost"
-                                size="icon"
-                                className="h-7 w-7 rounded-full"
-                                aria-label="Actions"
-                              >
-                                <MoreHorizontal className="h-3.5 w-3.5" />
-                              </Button>
-                            </DropdownMenuTrigger>
-                            <DropdownMenuContent align="end">
-                              <DropdownMenuItem onClick={() => handlePlay(gen.id, gen.text)}>
-                                <Play className="mr-2 h-4 w-4" />
-                                Play
-                              </DropdownMenuItem>
-                              <DropdownMenuItem onClick={() => handleDownload(gen.id, gen.text)}>
-                                <Download className="mr-2 h-4 w-4" />
-                                Download
-                              </DropdownMenuItem>
-                              <DropdownMenuItem
-                                onClick={() => deleteGeneration.mutate(gen.id)}
-                                disabled={deleteGeneration.isPending}
-                                className="text-destructive focus:text-destructive"
-                              >
-                                <Trash2 className="mr-2 h-4 w-4" />
-                                Delete
-                              </DropdownMenuItem>
-                            </DropdownMenuContent>
-                          </DropdownMenu>
-                        </div>
-                      </TableCell>
-                    </TableRow>
-                  );
-                })}
-              </TableBody>
-            </Table>
-          </div>
 
-          <div className="flex justify-between items-center mt-4 shrink-0">
+                  {/* Left side - Meta information */}
-            <Button
+                  <div className="flex flex-col gap-1.5 w-48 shrink-0 justify-center">
-              variant="outline"
+                    <div className="font-medium text-sm truncate" title={gen.profile_name}>
-              onClick={() => setPage((p) => Math.max(0, p - 1))}
+                      {gen.profile_name}
-              disabled={page === 0}
+                    </div>
-            >
+                    <div className="flex items-center gap-2">
-              Previous
+                      <span className="text-xs text-muted-foreground">{gen.language}</span>
-            </Button>
+                      <span className="text-xs text-muted-foreground">
-            <div className="text-sm text-muted-foreground">
+                        {formatDuration(gen.duration)}
-              Page {page + 1} • {total} total
+                      </span>
-            </div>
+                    </div>
-            <Button variant="outline" onClick={() => setPage((p) => p + 1)} disabled={!hasMore}>
+                    <div className="text-xs text-muted-foreground">
-              Next
+                      {formatDate(gen.created_at)}
-            </Button>
+                    </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"
+                    />
+                  </div>
+
+                  {/* Far right - Ellipsis actions */}
+                  <div className="w-10 shrink-0 flex justify-end">
+                    <DropdownMenu>
+                      <DropdownMenuTrigger asChild>
+                        <Button
+                          variant="ghost"
+                          size="icon"
+                          className="h-8 w-8"
+                          aria-label="Actions"
+                          onClick={(e) => e.stopPropagation()}
+                        >
+                          <MoreHorizontal className="h-4 w-4" />
+                        </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={() => deleteGeneration.mutate(gen.id)}
+                          disabled={deleteGeneration.isPending}
+                          className="text-destructive focus:text-destructive"
+                        >
+                          <Trash2 className="mr-2 h-4 w-4" />
+                          Delete
+                        </DropdownMenuItem>
+                      </DropdownMenuContent>
+                    </DropdownMenu>
+                  </div>
+                </div>
+              );
+            })}
           </div>
         </>
       )}
+
+      <Dialog open={importDialogOpen} onOpenChange={setImportDialogOpen}>
+        <DialogContent>
+          <DialogHeader>
+            <DialogTitle>Import Generation</DialogTitle>
+            <DialogDescription>
+              Import the generation from "{selectedFile?.name}". This will add it to your history.
+            </DialogDescription>
+          </DialogHeader>
+          <DialogFooter>
+            <Button
+              variant="outline"
+              onClick={() => {
+                setImportDialogOpen(false);
+                setSelectedFile(null);
+                if (fileInputRef.current) {
+                  fileInputRef.current.value = '';
+                }
+              }}
+            >
+              Cancel
+            </Button>
+            <Button
+              onClick={handleImportConfirm}
+              disabled={importGeneration.isPending || !selectedFile}
+            >
+              {importGeneration.isPending ? 'Importing...' : 'Import'}
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
     </div>
   );
 }

app/src/components/MainEditor/MainEditor.tsx

@@ -0,0 +1,168 @@
+import { Sparkles, Upload } from 'lucide-react';
+import { useRef, useState } from 'react';
+import { FloatingGenerateBox } from '@/components/Generation/FloatingGenerateBox';
+import { HistoryTable } from '@/components/History/HistoryTable';
+import { Button } from '@/components/ui/button';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} 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';
+import { useUIStore } from '@/stores/uiStore';
+
+export function MainEditor() {
+  const audioUrl = usePlayerStore((state) => state.audioUrl);
+  const isPlayerVisible = !!audioUrl;
+  const scrollRef = useRef<HTMLDivElement>(null);
+  const setDialogOpen = useUIStore((state) => state.setProfileDialogOpen);
+  const importProfile = useImportProfile();
+  const fileInputRef = useRef<HTMLInputElement>(null);
+  const [importDialogOpen, setImportDialogOpen] = useState(false);
+  const [selectedFile, setSelectedFile] = useState<File | null>(null);
+  const { toast } = useToast();
+
+  const handleImportClick = () => {
+    fileInputRef.current?.click();
+  };
+
+  const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const file = e.target.files?.[0];
+    if (file) {
+      if (!file.name.endsWith('.voicebox.zip')) {
+        toast({
+          title: 'Invalid file type',
+          description: 'Please select a valid .voicebox.zip file',
+          variant: 'destructive',
+        });
+        return;
+      }
+      setSelectedFile(file);
+      setImportDialogOpen(true);
+    }
+  };
+
+  const handleImportConfirm = () => {
+    if (selectedFile) {
+      importProfile.mutate(selectedFile, {
+        onSuccess: () => {
+          setImportDialogOpen(false);
+          setSelectedFile(null);
+          if (fileInputRef.current) {
+            fileInputRef.current.value = '';
+          }
+          toast({
+            title: 'Profile imported',
+            description: 'Voice profile imported successfully',
+          });
+        },
+        onError: (error) => {
+          toast({
+            title: 'Failed to import profile',
+            description: error.message,
+            variant: 'destructive',
+          });
+        },
+      });
+    }
+  };
+
+  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">
+      {/* Left Column */}
+      <div className="flex flex-col min-h-0 overflow-hidden relative">
+        {/* 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" />
+
+        {/* Fixed Header */}
+        <div className="absolute top-0 left-0 right-0 z-10">
+          <div className="flex items-center justify-between mb-4 px-1">
+            <h2 className="text-2xl font-bold">Voicebox</h2>
+            <div className="flex gap-2">
+              <Button variant="outline" onClick={handleImportClick}>
+                <Upload className="mr-2 h-4 w-4" />
+                Import Voice
+              </Button>
+              <input
+                ref={fileInputRef}
+                type="file"
+                accept=".voicebox.zip"
+                onChange={handleFileChange}
+                className="hidden"
+              />
+              <Button onClick={() => setDialogOpen(true)}>
+                <Sparkles className="mr-2 h-4 w-4" />
+                Create Voice
+              </Button>
+            </div>
+          </div>
+        </div>
+
+        {/* Scrollable Content */}
+        <div
+          ref={scrollRef}
+          className={cn(
+            'flex-1 min-h-0 overflow-y-auto pt-14',
+            isPlayerVisible ? BOTTOM_SAFE_AREA_PADDING : 'pb-4',
+          )}
+        >
+          <div className="flex flex-col gap-6">
+            <div className="shrink-0 flex flex-col">
+              <ProfileList />
+            </div>
+          </div>
+        </div>
+      </div>
+
+      {/* Right Column - History */}
+      <div className="flex flex-col min-h-0 overflow-hidden">
+        <HistoryTable />
+      </div>
+
+      {/* Floating Generate Box */}
+      <FloatingGenerateBox isPlayerOpen={!!audioUrl} />
+
+      {/* Import Dialog */}
+      <Dialog open={importDialogOpen} onOpenChange={setImportDialogOpen}>
+        <DialogContent>
+          <DialogHeader>
+            <DialogTitle>Import Profile</DialogTitle>
+            <DialogDescription>
+              Import the profile from "{selectedFile?.name}". This will create a new profile with
+              all samples.
+            </DialogDescription>
+          </DialogHeader>
+          <DialogFooter>
+            <Button
+              variant="outline"
+              onClick={() => {
+                setImportDialogOpen(false);
+                setSelectedFile(null);
+                if (fileInputRef.current) {
+                  fileInputRef.current.value = '';
+                }
+              }}
+            >
+              Cancel
+            </Button>
+            <Button
+              onClick={handleImportConfirm}
+              disabled={importProfile.isPending || !selectedFile}
+            >
+              {importProfile.isPending ? 'Importing...' : 'Import'}
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+    </div>
+  );
+}

app/src/components/ModelsTab/ModelsTab.tsx

@@ -0,0 +1,9 @@
+import { ModelManagement } from '@/components/ServerSettings/ModelManagement';
+
+export function ModelsTab() {
+  return (
+    <div className="space-y-4 overflow-y-auto flex flex-col">
+      <ModelManagement />
+    </div>
+  );
+}

app/src/components/ServerSettings/.gitkeep

@@ -1 +0,0 @@
-# Server settings and connection components

app/src/components/ServerSettings/ConnectionForm.tsx

@@ -1,6 +1,6 @@
 import { zodResolver } from '@hookform/resolvers/zod';
-import { useForm } from 'react-hook-form';
 import { useEffect } from 'react';
+import { useForm } from 'react-hook-form';
 import * as z from 'zod';
 import { Button } from '@/components/ui/button';
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
@@ -17,6 +17,7 @@ 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 { setKeepServerRunning } from '@/lib/tauri';
 
 const connectionSchema = z.object({
   serverUrl: z.string().url('Please enter a valid URL'),
@@ -69,7 +70,7 @@ export function ConnectionForm() {
                 <FormItem>
                   <FormLabel>Server URL</FormLabel>
                   <FormControl>
-                    <Input placeholder="http://localhost:8000" {...field} />
+                    <Input placeholder="http://127.0.0.1:17493" {...field} />
                   </FormControl>
                   <FormDescription>Enter the URL of your voicebox backend server</FormDescription>
                   <FormMessage />
@@ -88,6 +89,9 @@ export function ConnectionForm() {
               checked={keepServerRunningOnClose}
               onCheckedChange={(checked: boolean) => {
                 setKeepServerRunningOnClose(checked);
+                setKeepServerRunning(checked).catch((error) => {
+                  console.error('Failed to sync setting to Rust:', error);
+                });
                 toast({
                   title: 'Setting updated',
                   description: checked

app/src/components/ServerSettings/ModelManagement.tsx

@@ -1,17 +1,29 @@
-import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
+import { Download, Loader2, Trash2 } from 'lucide-react';
 import { useState } from 'react';
-import { apiClient } from '@/lib/api/client';
+import {
-import { Card, CardContent, CardHeader, CardTitle, CardDescription } from '@/components/ui/card';
+  AlertDialog,
-import { Button } from '@/components/ui/button';
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from '@/components/ui/alert-dialog';
 import { Badge } from '@/components/ui/badge';
-import { Loader2, Download, CheckCircle2 } from 'lucide-react';
+import { Button } from '@/components/ui/button';
-import { ModelProgress } from './ModelProgress';
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
 import { useToast } from '@/components/ui/use-toast';
+import { apiClient } from '@/lib/api/client';
+import { useModelDownloadToast } from '@/lib/hooks/useModelDownloadToast';
+import { ModelProgress } from './ModelProgress';
 
 export function ModelManagement() {
   const { toast } = useToast();
   const queryClient = useQueryClient();
   const [downloadingModel, setDownloadingModel] = useState<string | null>(null);
+  const [downloadingDisplayName, setDownloadingDisplayName] = useState<string | null>(null);
 
   const { data: modelStatus, isLoading } = useQuery({
     queryKey: ['modelStatus'],
@@ -19,34 +31,63 @@ export function ModelManagement() {
     refetchInterval: 5000, // Refresh every 5 seconds
   });
 
+  // Use progress toast hook for the downloading model
+  useModelDownloadToast({
+    modelName: downloadingModel || '',
+    displayName: downloadingDisplayName || '',
+    enabled: !!downloadingModel && !!downloadingDisplayName,
+  });
+
+  const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);
+  const [modelToDelete, setModelToDelete] = useState<{
+    name: string;
+    displayName: string;
+    sizeMb?: number;
+  } | null>(null);
+
   const downloadMutation = useMutation({
     mutationFn: (modelName: string) => {
       setDownloadingModel(modelName);
+      // Find display name from model status
+      const model = modelStatus?.models.find((m) => m.model_name === modelName);
+      setDownloadingDisplayName(model?.display_name || modelName);
       return apiClient.triggerModelDownload(modelName);
     },
-    onSuccess: (_, modelName) => {
+    onSuccess: () => {
-      toast({
+      // Download completed - clear state and refetch status
-        title: 'Download started',
+      setDownloadingModel(null);
-        description: `Downloading ${modelName}...`,
+      setDownloadingDisplayName(null);
-      });
+      queryClient.invalidateQueries({ queryKey: ['modelStatus'] });
-      // Refetch status after a delay to see progress
-      setTimeout(() => {
-        queryClient.invalidateQueries({ queryKey: ['modelStatus'] });
-      }, 1000);
     },
     onError: (error: Error) => {
       setDownloadingModel(null);
+      setDownloadingDisplayName(null);
       toast({
         title: 'Download failed',
         description: error.message,
         variant: 'destructive',
       });
     },
-    onSettled: () => {
+  });
-      // Clear downloading state after a delay to allow progress to show
+
-      setTimeout(() => {
+  const deleteMutation = useMutation({
-        setDownloadingModel(null);
+    mutationFn: (modelName: string) => apiClient.deleteModel(modelName),
-      }, 2000);
+    onSuccess: () => {
+      toast({
+        title: 'Model deleted',
+        description: `${modelToDelete?.displayName || 'Model'} has been deleted successfully.`,
+      });
+      setDeleteDialogOpen(false);
+      setModelToDelete(null);
+      // Refetch status to update UI
+      queryClient.invalidateQueries({ queryKey: ['modelStatus'] });
+    },
+    onError: (error: Error) => {
+      toast({
+        title: 'Delete failed',
+        description: error.message,
+        variant: 'destructive',
+      });
     },
   });
 
@@ -84,6 +125,14 @@ export function ModelManagement() {
                       key={model.model_name}
                       model={model}
                       onDownload={() => downloadMutation.mutate(model.model_name)}
+                      onDelete={() => {
+                        setModelToDelete({
+                          name: model.model_name,
+                          displayName: model.display_name,
+                          sizeMb: model.size_mb,
+                        });
+                        setDeleteDialogOpen(true);
+                      }}
                       isDownloading={downloadingModel === model.model_name}
                       formatSize={formatSize}
                     />
@@ -104,6 +153,14 @@ export function ModelManagement() {
                       key={model.model_name}
                       model={model}
                       onDownload={() => downloadMutation.mutate(model.model_name)}
+                      onDelete={() => {
+                        setModelToDelete({
+                          name: model.model_name,
+                          displayName: model.display_name,
+                          sizeMb: model.size_mb,
+                        });
+                        setDeleteDialogOpen(true);
+                      }}
                       isDownloading={downloadingModel === model.model_name}
                       formatSize={formatSize}
                     />
@@ -129,6 +186,46 @@ export function ModelManagement() {
           </div>
         ) : null}
       </CardContent>
+
+      {/* Delete Confirmation Dialog */}
+      <AlertDialog open={deleteDialogOpen} onOpenChange={setDeleteDialogOpen}>
+        <AlertDialogContent>
+          <AlertDialogHeader>
+            <AlertDialogTitle>Delete Model</AlertDialogTitle>
+            <AlertDialogDescription>
+              Are you sure you want to delete <strong>{modelToDelete?.displayName}</strong>?
+              {modelToDelete?.sizeMb && (
+                <>
+                  {' '}
+                  This will free up {formatSize(modelToDelete.sizeMb)} of disk space. The model will
+                  need to be re-downloaded if you want to use it again.
+                </>
+              )}
+            </AlertDialogDescription>
+          </AlertDialogHeader>
+          <AlertDialogFooter>
+            <AlertDialogCancel>Cancel</AlertDialogCancel>
+            <AlertDialogAction
+              onClick={() => {
+                if (modelToDelete) {
+                  deleteMutation.mutate(modelToDelete.name);
+                }
+              }}
+              disabled={deleteMutation.isPending}
+              className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
+            >
+              {deleteMutation.isPending ? (
+                <>
+                  <Loader2 className="h-4 w-4 mr-2 animate-spin" />
+                  Deleting...
+                </>
+              ) : (
+                'Delete'
+              )}
+            </AlertDialogAction>
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      </AlertDialog>
     </Card>
   );
 }
@@ -142,11 +239,12 @@ interface ModelItemProps {
     loaded: boolean;
   };
   onDownload: () => void;
+  onDelete: () => void;
   isDownloading: boolean;
   formatSize: (sizeMb?: number) => string;
 }
 
-function ModelItem({ model, onDownload, isDownloading, formatSize }: ModelItemProps) {
+function ModelItem({ model, onDownload, onDelete, isDownloading, formatSize }: ModelItemProps) {
   return (
     <div className="flex items-center justify-between p-3 border rounded-lg">
       <div className="flex-1">
@@ -171,9 +269,19 @@ function ModelItem({ model, onDownload, isDownloading, formatSize }: ModelItemPr
       </div>
       <div className="flex items-center gap-2">
         {model.downloaded ? (
-          <div className="flex items-center gap-1 text-sm text-muted-foreground">
+          <div className="flex items-center gap-2">
-            <CheckCircle2 className="h-4 w-4 text-green-500" />
+            <div className="flex items-center gap-1 text-sm text-muted-foreground">
-            <span>Ready</span>
+              <span>Ready</span>
+            </div>
+            <Button
+              size="sm"
+              onClick={onDelete}
+              variant="outline"
+              disabled={model.loaded}
+              title={model.loaded ? 'Unload model before deleting' : 'Delete model'}
+            >
+              <Trash2 className="h-4 w-4" />
+            </Button>
           </div>
         ) : (
           <Button size="sm" onClick={onDownload} disabled={isDownloading} variant="outline">

app/src/components/ServerSettings/ModelProgress.tsx

@@ -1,9 +1,9 @@
+import { Loader2, XCircle } from 'lucide-react';
 import { useEffect, useState } from 'react';
-import { Progress } from '@/components/ui/progress';
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
-import { useServerStore } from '@/stores/serverStore';
+import { Progress } from '@/components/ui/progress';
 import type { ModelProgress as ModelProgressType } from '@/lib/api/types';
-import { Loader2, CheckCircle2, XCircle } from 'lucide-react';
+import { useServerStore } from '@/stores/serverStore';
 
 interface ModelProgressProps {
   modelName: string;
@@ -63,13 +63,11 @@ export function ModelProgress({ modelName, displayName }: ModelProgressProps) {
     const k = 1024;
     const sizes = ['B', 'KB', 'MB', 'GB'];
     const i = Math.floor(Math.log(bytes) / Math.log(k));
-    return `${(bytes / Math.pow(k, i)).toFixed(1)} ${sizes[i]}`;
+    return `${(bytes / k ** i).toFixed(1)} ${sizes[i]}`;
   };
 
   const getStatusIcon = () => {
     switch (progress.status) {
-      case 'complete':
-        return <CheckCircle2 className="h-4 w-4 text-green-500" />;
       case 'error':
         return <XCircle className="h-4 w-4 text-destructive" />;
       case 'downloading':

app/src/components/ServerSettings/ServerStatus.tsx

@@ -1,4 +1,4 @@
-import { CheckCircle2, Loader2, XCircle } from 'lucide-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';
@@ -43,7 +43,6 @@ export function ServerStatus() {
         ) : health ? (
           <div className="space-y-2">
             <div className="flex items-center gap-2">
-              <CheckCircle2 className="h-4 w-4 text-green-500" />
               <span className="text-sm">Connected</span>
             </div>
             <div className="flex flex-wrap gap-2">

app/src/components/ServerSettings/UpdateStatus.tsx

@@ -1,14 +1,14 @@
-import { useState, useEffect } from 'react';
+import { getVersion } from '@tauri-apps/api/app';
-import { RefreshCw, Download, CheckCircle2, AlertCircle } from 'lucide-react';
+import { AlertCircle, Download, RefreshCw } from 'lucide-react';
+import { useEffect, useState } from 'react';
+import { Badge } from '@/components/ui/badge';
 import { Button } from '@/components/ui/button';
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
-import { Badge } from '@/components/ui/badge';
 import { Progress } from '@/components/ui/progress';
 import { useAutoUpdater } from '@/hooks/useAutoUpdater';
-import { getVersion } from '@tauri-apps/api/app';
 
 export function UpdateStatus() {
-  const { status, checkForUpdates, downloadAndInstall } = useAutoUpdater(false);
+  const { status, checkForUpdates, downloadAndInstall, restartAndInstall } = useAutoUpdater(false);
   const [currentVersion, setCurrentVersion] = useState<string>('');
 
   useEffect(() => {
@@ -30,7 +30,7 @@ export function UpdateStatus() {
           </div>
           <Button
             onClick={checkForUpdates}
-            disabled={status.checking || status.downloading || status.installing}
+            disabled={status.checking || status.downloading || status.readyToInstall}
             variant="outline"
             size="sm"
           >
@@ -53,7 +53,7 @@ export function UpdateStatus() {
           </div>
         )}
 
-        {status.available && !status.downloading && !status.installing && (
+        {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>
@@ -64,34 +64,57 @@ export function UpdateStatus() {
             </div>
             <Button onClick={downloadAndInstall} className="w-full" size="sm">
               <Download className="h-4 w-4 mr-2" />
-              Install Update
+              Download Update
             </Button>
           </div>
         )}
 
         {status.downloading && (
           <div className="space-y-2">
-            <div className="flex items-center gap-2 text-sm">
+            <div className="flex items-center justify-between text-sm">
-              <Download className="h-4 w-4" />
+              <div className="flex items-center gap-2">
-              Downloading update...
+                <Download className="h-4 w-4" />
+                Downloading update...
+              </div>
+              {status.downloadProgress !== undefined && (
+                <span className="text-muted-foreground">{status.downloadProgress}%</span>
+              )}
             </div>
-            <Progress />
+            <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.installing && (
+        {status.readyToInstall && (
-          <div className="space-y-2">
+          <div className="space-y-3 p-4 border rounded-lg bg-accent/30 border-accent/50">
-            <div className="flex items-center gap-2 text-sm">
+            <div className="flex items-center gap-2">
-              <RefreshCw className="h-4 w-4 animate-spin" />
+              <div>
-              Installing update...
+                <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-xs text-muted-foreground">App will restart automatically</div>
+            <div className="text-sm text-muted-foreground">
+              The app needs to restart to complete the installation. You can do this now or later at
+              your convenience.
+            </div>
+            <Button onClick={restartAndInstall} className="w-full" size="sm">
+              <RefreshCw className="h-4 w-4 mr-2" />
+              Restart Now
+            </Button>
           </div>
         )}
 
         {!status.available && !status.checking && !status.error && status.checking === false && (
           <div className="flex items-center gap-2 text-sm text-muted-foreground">
-            <CheckCircle2 className="h-4 w-4 text-green-500" />
             You're up to date
           </div>
         )}

app/src/components/ServerTab/ServerTab.tsx

@@ -0,0 +1,27 @@
+import { ConnectionForm } from '@/components/ServerSettings/ConnectionForm';
+import { ServerStatus } from '@/components/ServerSettings/ServerStatus';
+import { UpdateStatus } from '@/components/ServerSettings/UpdateStatus';
+import { isTauri } from '@/lib/tauri';
+
+export function ServerTab() {
+  return (
+    <div className="space-y-4 overflow-y-auto flex flex-col">
+      <div className="grid gap-4 md:grid-cols-2">
+        <ConnectionForm />
+        <ServerStatus />
+      </div>
+      {isTauri() && <UpdateStatus />}
+      <div className="py-8 text-center text-sm text-muted-foreground">
+        Created by{' '}
+        <a
+          href="https://github.com/jamiepine"
+          target="_blank"
+          rel="noopener noreferrer"
+          className="text-accent hover:underline"
+        >
+          Jamie Pine
+        </a>
+      </div>
+    </div>
+  );
+}

app/src/components/ShinyText.tsx

@@ -0,0 +1,134 @@
+import { motion, useAnimationFrame, useMotionValue, useTransform } from 'motion/react';
+import type React from 'react';
+import { useCallback, useEffect, useRef, useState } from 'react';
+
+interface ShinyTextProps {
+  text: string;
+  disabled?: boolean;
+  speed?: number;
+  className?: string;
+  color?: string;
+  shineColor?: string;
+  spread?: number;
+  yoyo?: boolean;
+  pauseOnHover?: boolean;
+  direction?: 'left' | 'right';
+  delay?: number;
+}
+
+const ShinyText: React.FC<ShinyTextProps> = ({
+  text,
+  disabled = false,
+  speed = 2,
+  className = '',
+  color = '#b5b5b5',
+  shineColor = '#ffffff',
+  spread = 120,
+  yoyo = false,
+  pauseOnHover = false,
+  direction = 'left',
+  delay = 0,
+}) => {
+  const [isPaused, setIsPaused] = useState(false);
+  const progress = useMotionValue(0);
+  const elapsedRef = useRef(0);
+  const lastTimeRef = useRef<number | null>(null);
+  const directionRef = useRef(direction === 'left' ? 1 : -1);
+
+  const animationDuration = speed * 1000;
+  const delayDuration = delay * 1000;
+
+  useAnimationFrame((time) => {
+    if (disabled || isPaused) {
+      lastTimeRef.current = null;
+      return;
+    }
+
+    if (lastTimeRef.current === null) {
+      lastTimeRef.current = time;
+      return;
+    }
+
+    const deltaTime = time - lastTimeRef.current;
+    lastTimeRef.current = time;
+
+    elapsedRef.current += deltaTime;
+
+    // Animation goes from 0 to 100
+    if (yoyo) {
+      const cycleDuration = animationDuration + delayDuration;
+      const fullCycle = cycleDuration * 2;
+      const cycleTime = elapsedRef.current % fullCycle;
+
+      if (cycleTime < animationDuration) {
+        // Forward animation: 0 -> 100
+        const p = (cycleTime / animationDuration) * 100;
+        progress.set(directionRef.current === 1 ? p : 100 - p);
+      } else if (cycleTime < cycleDuration) {
+        // Delay at end
+        progress.set(directionRef.current === 1 ? 100 : 0);
+      } else if (cycleTime < cycleDuration + animationDuration) {
+        // Reverse animation: 100 -> 0
+        const reverseTime = cycleTime - cycleDuration;
+        const p = 100 - (reverseTime / animationDuration) * 100;
+        progress.set(directionRef.current === 1 ? p : 100 - p);
+      } else {
+        // Delay at start
+        progress.set(directionRef.current === 1 ? 0 : 100);
+      }
+    } else {
+      const cycleDuration = animationDuration + delayDuration;
+      const cycleTime = elapsedRef.current % cycleDuration;
+
+      if (cycleTime < animationDuration) {
+        // Animation phase: 0 -> 100
+        const p = (cycleTime / animationDuration) * 100;
+        progress.set(directionRef.current === 1 ? p : 100 - p);
+      } else {
+        // Delay phase - hold at end (shine off-screen)
+        progress.set(directionRef.current === 1 ? 100 : 0);
+      }
+    }
+  });
+
+  useEffect(() => {
+    directionRef.current = direction === 'left' ? 1 : -1;
+    elapsedRef.current = 0;
+    progress.set(0);
+    // eslint-d, progress.setisable-next-line react-hooks/exhaustive-deps
+  }, [direction]);
+
+  // Transform: p=0 -> 150% (shine off right), p=100 -> -50% (shine off left)
+  const backgroundPosition = useTransform(progress, (p) => `${150 - p * 2}% center`);
+
+  const handleMouseEnter = useCallback(() => {
+    if (pauseOnHover) setIsPaused(true);
+  }, [pauseOnHover]);
+
+  const handleMouseLeave = useCallback(() => {
+    if (pauseOnHover) setIsPaused(false);
+  }, [pauseOnHover]);
+
+  const gradientStyle: React.CSSProperties = {
+    backgroundImage: `linear-gradient(${spread}deg, ${color} 0%, ${color} 35%, ${shineColor} 50%, ${color} 65%, ${color} 100%)`,
+    backgroundSize: '200% auto',
+    WebkitBackgroundClip: 'text',
+    backgroundClip: 'text',
+    WebkitTextFillColor: 'transparent',
+  };
+
+  return (
+    <motion.span
+      className={`inline-block ${className}`}
+      style={{ ...gradientStyle, backgroundPosition }}
+      onMouseEnter={handleMouseEnter}
+      onMouseLeave={handleMouseLeave}
+    >
+      {text}
+    </motion.span>
+  );
+};
+
+export default ShinyText;
+//   plugins: [],
+// };

app/src/components/Sidebar.tsx

@@ -1,53 +1,83 @@
-import { Home, Settings } from 'lucide-react';
+import { Link, useMatchRoute } from '@tanstack/react-router';
-import { cn } from '@/lib/utils/cn';
+import { Box, BookOpen, Loader2, Mic, Server, Speaker, Volume2 } 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';
 
 interface SidebarProps {
-  activeTab: string;
+  isMacOS?: boolean;
-  onTabChange: (tab: string) => void;
 }
 
 const tabs = [
-  { id: 'main', icon: Home, label: 'Main' },
+  { id: 'main', path: '/', icon: Volume2, label: 'Generate' },
-  { id: 'settings', icon: Settings, label: 'Settings' },
+  { id: 'stories', path: '/stories', icon: BookOpen, label: 'Stories' },
+  { id: 'voices', path: '/voices', icon: Mic, label: 'Voices' },
+  { 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({ activeTab, onTabChange }: SidebarProps) {
+export function Sidebar({ isMacOS }: SidebarProps) {
+  const isGenerating = useGenerationStore((state) => state.isGenerating);
+  const audioUrl = usePlayerStore((state) => state.audioUrl);
+  const isPlayerVisible = !!audioUrl;
+  const matchRoute = useMatchRoute();
+
   return (
-    <div className="fixed left-0 top-0 h-full w-20 bg-sidebar border-r border-border flex flex-col items-center py-6 gap-6">
+    <div
+      className={cn(
+        'fixed left-0 top-0 h-full w-20 bg-sidebar border-r border-border flex flex-col items-center py-6 gap-6',
+        isMacOS && 'pt-14',
+      )}
+    >
       {/* Logo */}
       <div className="mb-2">
-        <img
+        <img src={voiceboxLogo} alt="Voicebox" className="w-12 h-12 object-contain" />
-          src={voiceboxLogo}
-          alt="Voicebox"
-          className="w-12 h-12 object-contain"
-        />
       </div>
 
       {/* Navigation Buttons */}
       <div className="flex flex-col gap-3">
         {tabs.map((tab) => {
           const Icon = tab.icon;
-          const isActive = activeTab === tab.id;
+          // For index route, use exact match; for others, use default matching
+          const isActive =
+            tab.path === '/'
+              ? matchRoute({ to: '/', exact: true })
+              : matchRoute({ to: tab.path });
 
           return (
-            <button
+            <Link
               key={tab.id}
-              type="button"
+              to={tab.path}
-              onClick={() => onTabChange(tab.id)}
               className={cn(
                 'w-12 h-12 rounded-full flex items-center justify-center transition-all duration-200',
-                'hover:bg-accent hover:text-accent-foreground',
+                'hover:bg-muted/50',
-                isActive ? 'bg-accent text-accent-foreground shadow-lg' : 'text-muted-foreground',
+                isActive ? 'bg-muted/50 text-foreground shadow-lg' : 'text-muted-foreground',
               )}
               title={tab.label}
               aria-label={tab.label}
             >
               <Icon className="h-5 w-5" />
-            </button>
+            </Link>
           );
         })}
       </div>
+
+      {/* Spacer to push loader to bottom */}
+      <div className="flex-1" />
+
+      {/* Generation Loader */}
+      {isGenerating && (
+        <div
+          className={cn(
+            'w-full flex items-center justify-center transition-all duration-200',
+            isPlayerVisible ? 'mb-[120px]' : 'mb-0',
+          )}
+        >
+          <Loader2 className="h-6 w-6 text-accent animate-spin" />
+        </div>
+      )}
     </div>
   );
 }

app/src/components/StoriesTab/StoriesTab.tsx

@@ -0,0 +1,25 @@
+import { FloatingGenerateBox } from '@/components/Generation/FloatingGenerateBox';
+import { StoryContent } from './StoryContent';
+import { StoryList } from './StoryList';
+
+export function StoriesTab() {
+  return (
+    <div className="flex flex-col h-full min-h-0 overflow-hidden">
+      {/* Main content area */}
+      <div className="flex-1 min-h-0 flex gap-6 overflow-hidden relative">
+        {/* Left Column - Story List */}
+        <div className="flex flex-col min-h-0 overflow-hidden w-full max-w-[360px] shrink-0">
+          <StoryList />
+        </div>
+
+        {/* Right Column - Story Content */}
+        <div className="flex flex-col min-h-0 overflow-hidden flex-1">
+          <StoryContent />
+        </div>
+
+        {/* Floating Generate Box - position is managed via storyStore.trackEditorHeight */}
+        <FloatingGenerateBox showVoiceSelector />
+      </div>
+    </div>
+  );
+}

app/src/components/StoriesTab/StoryChatItem.tsx

@@ -0,0 +1,148 @@
+import { useSortable } from '@dnd-kit/sortable';
+import { CSS } from '@dnd-kit/utilities';
+import { GripVertical, Mic, MoreHorizontal, Play, Trash2 } from 'lucide-react';
+import { Button } from '@/components/ui/button';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from '@/components/ui/dropdown-menu';
+import { Textarea } from '@/components/ui/textarea';
+import type { StoryItemDetail } from '@/lib/api/types';
+import { cn } from '@/lib/utils/cn';
+import { useStoryStore } from '@/stores/storyStore';
+
+interface StoryChatItemProps {
+  item: StoryItemDetail;
+  storyId: string;
+  index: number;
+  onRemove: () => void;
+  currentTimeMs: number;
+  isPlaying: boolean;
+  dragHandleProps?: React.HTMLAttributes<HTMLButtonElement>;
+  isDragging?: boolean;
+}
+
+export function StoryChatItem({
+  item,
+  onRemove,
+  currentTimeMs,
+  isPlaying,
+  dragHandleProps,
+  isDragging,
+}: StoryChatItemProps) {
+  const seek = useStoryStore((state) => state.seek);
+
+  // Check if this item is currently playing based on timecode
+  const itemStartMs = item.start_time_ms;
+  const itemEndMs = item.start_time_ms + item.duration * 1000;
+  const isCurrentlyPlaying = isPlaying && currentTimeMs >= itemStartMs && currentTimeMs < itemEndMs;
+
+  const handlePlay = () => {
+    // Seek to the start of this item
+    seek(itemStartMs);
+  };
+
+  const formatTime = (ms: number): string => {
+    const totalSeconds = Math.floor(ms / 1000);
+    const minutes = Math.floor(totalSeconds / 60);
+    const seconds = totalSeconds % 60;
+    const milliseconds = Math.floor((ms % 1000) / 100);
+    return `${minutes}:${seconds.toString().padStart(2, '0')}.${milliseconds}`;
+  };
+
+  return (
+    <div
+      className={cn(
+        'flex items-start gap-3 p-4 rounded-lg border transition-colors',
+        isCurrentlyPlaying && 'bg-muted/70 border-primary',
+        !isCurrentlyPlaying && 'hover:bg-muted/50',
+        isDragging && 'opacity-50 shadow-lg',
+      )}
+    >
+      {/* Drag Handle */}
+      {dragHandleProps && (
+        <button
+          type="button"
+          className="shrink-0 cursor-grab active:cursor-grabbing touch-none text-muted-foreground hover:text-foreground transition-colors"
+          {...dragHandleProps}
+        >
+          <GripVertical className="h-5 w-5" />
+        </button>
+      )}
+
+      {/* Voice Icon */}
+      <div className="shrink-0">
+        <div className="h-10 w-10 rounded-full bg-muted flex items-center justify-center">
+          <Mic className="h-5 w-5 text-muted-foreground" />
+        </div>
+      </div>
+
+      {/* Content */}
+      <div className="flex-1 min-w-0">
+        <div className="flex items-center gap-2 mb-2">
+          <span className="font-medium text-sm">{item.profile_name}</span>
+          <span className="text-xs text-muted-foreground">{item.language}</span>
+          <span className="text-xs text-muted-foreground tabular-nums ml-auto">
+            {formatTime(itemStartMs)}
+          </span>
+        </div>
+        <Textarea
+          value={item.text}
+          className="flex-1 resize-none text-sm text-muted-foreground select-text bg-card cursor-text"
+          readOnly
+          onDoubleClick={handlePlay}
+        />
+      </div>
+
+      {/* Actions */}
+      <div className="shrink-0">
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <Button variant="ghost" size="icon" className="h-8 w-8" aria-label="Actions">
+              <MoreHorizontal className="h-4 w-4" />
+            </Button>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent align="end">
+            <DropdownMenuItem onClick={handlePlay}>
+              <Play className="mr-2 h-4 w-4" />
+              Play from here
+            </DropdownMenuItem>
+            <DropdownMenuItem onClick={onRemove} className="text-destructive focus:text-destructive">
+              <Trash2 className="mr-2 h-4 w-4" />
+              Remove from Story
+            </DropdownMenuItem>
+          </DropdownMenuContent>
+        </DropdownMenu>
+      </div>
+    </div>
+  );
+}
+
+// Sortable wrapper component
+export function SortableStoryChatItem(props: Omit<StoryChatItemProps, 'dragHandleProps' | 'isDragging'>) {
+  const {
+    attributes,
+    listeners,
+    setNodeRef,
+    transform,
+    transition,
+    isDragging,
+  } = useSortable({ id: props.item.generation_id });
+
+  const style = {
+    transform: CSS.Transform.toString(transform),
+    transition,
+  };
+
+  return (
+    <div ref={setNodeRef} style={style} {...attributes}>
+      <StoryChatItem
+        {...props}
+        dragHandleProps={listeners}
+        isDragging={isDragging}
+      />
+    </div>
+  );
+}

app/src/components/StoriesTab/StoryContent.tsx

@@ -0,0 +1,376 @@
+import {
+  closestCenter,
+  DndContext,
+  type DragEndEvent,
+  KeyboardSensor,
+  PointerSensor,
+  useSensor,
+  useSensors,
+} from '@dnd-kit/core';
+import {
+  arrayMove,
+  SortableContext,
+  sortableKeyboardCoordinates,
+  verticalListSortingStrategy,
+} from '@dnd-kit/sortable';
+import { Download, Plus } from 'lucide-react';
+import { useEffect, useMemo, useRef, useState } from 'react';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover';
+import { useToast } from '@/components/ui/use-toast';
+import { useHistory } from '@/lib/hooks/useHistory';
+import {
+  useAddStoryItem,
+  useExportStoryAudio,
+  useRemoveStoryItem,
+  useReorderStoryItems,
+  useStory,
+} from '@/lib/hooks/useStories';
+import { useStoryPlayback } from '@/lib/hooks/useStoryPlayback';
+import { useStoryStore } from '@/stores/storyStore';
+import { SortableStoryChatItem } from './StoryChatItem';
+
+export function StoryContent() {
+  const selectedStoryId = useStoryStore((state) => state.selectedStoryId);
+  const { data: story, isLoading } = useStory(selectedStoryId);
+  const removeItem = useRemoveStoryItem();
+  const reorderItems = useReorderStoryItems();
+  const exportAudio = useExportStoryAudio();
+  const addStoryItem = useAddStoryItem();
+  const { toast } = useToast();
+  const scrollRef = useRef<HTMLDivElement>(null);
+
+  // Add generation popover state
+  const [searchQuery, setSearchQuery] = useState('');
+  const [isAddOpen, setIsAddOpen] = useState(false);
+  const { data: historyData } = useHistory();
+
+  // Filter generations not in story and matching search
+  const availableGenerations = useMemo(() => {
+    if (!historyData?.items || !story) return [];
+    const storyGenerationIds = new Set(story.items.map((i) => i.generation_id));
+    const query = searchQuery.toLowerCase();
+    return historyData.items.filter(
+      (gen) =>
+        !storyGenerationIds.has(gen.id) &&
+        (gen.text.toLowerCase().includes(query) ||
+          gen.profile_name.toLowerCase().includes(query)),
+    );
+  }, [historyData, story, searchQuery]);
+
+  // Get track editor height from store for dynamic padding
+  const trackEditorHeight = useStoryStore((state) => state.trackEditorHeight);
+
+  // Track editor is shown when story has items
+  const hasBottomBar = story && story.items.length > 0;
+
+  // Calculate dynamic bottom padding: track editor + gap
+  const bottomPadding = hasBottomBar ? trackEditorHeight + 24 : 0;
+
+  // Drag and drop sensors
+  const sensors = useSensors(
+    useSensor(PointerSensor, {
+      activationConstraint: {
+        distance: 8,
+      },
+    }),
+    useSensor(KeyboardSensor, {
+      coordinateGetter: sortableKeyboardCoordinates,
+    }),
+  );
+
+  // Playback state (for auto-scroll and item highlighting)
+  const isPlaying = useStoryStore((state) => state.isPlaying);
+  const currentTimeMs = useStoryStore((state) => state.currentTimeMs);
+  const playbackStoryId = useStoryStore((state) => state.playbackStoryId);
+
+  // Refs for auto-scrolling to playing item
+  const itemRefsMap = useRef<Map<string, HTMLDivElement>>(new Map());
+  const lastScrolledItemRef = useRef<string | null>(null);
+
+  // Use playback hook
+  useStoryPlayback(story?.items);
+
+  // Sort items by start_time_ms
+  const sortedItems = useMemo(() => {
+    if (!story?.items) return [];
+    return [...story.items].sort((a, b) => a.start_time_ms - b.start_time_ms);
+  }, [story?.items]);
+
+  // Find the currently playing item based on timecode
+  const currentlyPlayingItemId = useMemo(() => {
+    if (!isPlaying || playbackStoryId !== story?.id || !sortedItems.length) {
+      return null;
+    }
+    const playingItem = sortedItems.find((item) => {
+      const itemStart = item.start_time_ms;
+      const itemEnd = item.start_time_ms + item.duration * 1000;
+      return currentTimeMs >= itemStart && currentTimeMs < itemEnd;
+    });
+    return playingItem?.generation_id ?? null;
+  }, [isPlaying, playbackStoryId, story?.id, sortedItems, currentTimeMs]);
+
+  // Auto-scroll to the currently playing item
+  useEffect(() => {
+    if (!currentlyPlayingItemId || currentlyPlayingItemId === lastScrolledItemRef.current) {
+      return;
+    }
+
+    const element = itemRefsMap.current.get(currentlyPlayingItemId);
+    if (element && scrollRef.current) {
+      element.scrollIntoView({ behavior: 'smooth', block: 'start' });
+      lastScrolledItemRef.current = currentlyPlayingItemId;
+    }
+  }, [currentlyPlayingItemId]);
+
+  // Reset last scrolled item when playback stops
+  useEffect(() => {
+    if (!isPlaying) {
+      lastScrolledItemRef.current = null;
+    }
+  }, [isPlaying]);
+
+  const handleRemoveItem = (generationId: string) => {
+    if (!story) return;
+
+    removeItem.mutate(
+      {
+        storyId: story.id,
+        generationId,
+      },
+      {
+        onError: (error) => {
+          toast({
+            title: 'Failed to remove item',
+            description: error.message,
+            variant: 'destructive',
+          });
+        },
+      },
+    );
+  };
+
+  const handleDragEnd = (event: DragEndEvent) => {
+    const { active, over } = event;
+
+    if (!story || !over || active.id === over.id) return;
+
+    const oldIndex = sortedItems.findIndex((item) => item.generation_id === active.id);
+    const newIndex = sortedItems.findIndex((item) => item.generation_id === over.id);
+
+    if (oldIndex === -1 || newIndex === -1) return;
+
+    // Calculate the new order
+    const newOrder = arrayMove(sortedItems, oldIndex, newIndex);
+    const generationIds = newOrder.map((item) => item.generation_id);
+
+    // Send reorder request to backend
+    reorderItems.mutate(
+      {
+        storyId: story.id,
+        data: { generation_ids: generationIds },
+      },
+      {
+        onError: (error) => {
+          toast({
+            title: 'Failed to reorder items',
+            description: error.message,
+            variant: 'destructive',
+          });
+        },
+      },
+    );
+  };
+
+  const handleExportAudio = () => {
+    if (!story) return;
+
+    exportAudio.mutate(
+      {
+        storyId: story.id,
+        storyName: story.name,
+      },
+      {
+        onError: (error) => {
+          toast({
+            title: 'Failed to export audio',
+            description: error.message,
+            variant: 'destructive',
+          });
+        },
+      },
+    );
+  };
+
+  const handleAddGeneration = (generationId: string) => {
+    if (!story) return;
+
+    addStoryItem.mutate(
+      {
+        storyId: story.id,
+        data: { generation_id: generationId },
+      },
+      {
+        onSuccess: () => {
+          setIsAddOpen(false);
+          setSearchQuery('');
+        },
+        onError: (error) => {
+          toast({
+            title: 'Failed to add generation',
+            description: error.message,
+            variant: 'destructive',
+          });
+        },
+      },
+    );
+  };
+
+  if (!selectedStoryId) {
+    return (
+      <div className="flex items-center justify-center h-full text-muted-foreground">
+        <div className="text-center">
+          <p className="text-lg font-medium mb-2">Select a story</p>
+          <p className="text-sm">Choose a story from the list to view its content</p>
+        </div>
+      </div>
+    );
+  }
+
+  if (isLoading) {
+    return (
+      <div className="flex items-center justify-center h-full">
+        <div className="text-muted-foreground">Loading story...</div>
+      </div>
+    );
+  }
+
+  if (!story) {
+    return (
+      <div className="flex items-center justify-center h-full text-muted-foreground">
+        <div className="text-center">
+          <p className="text-lg font-medium mb-2">Story not found</p>
+          <p className="text-sm">The selected story could not be loaded</p>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="flex flex-col h-full min-h-0">
+      {/* Header */}
+      <div className="flex items-center justify-between mb-4 px-1">
+        <div>
+          <h2 className="text-2xl font-bold">{story.name}</h2>
+          {story.description && (
+            <p className="text-sm text-muted-foreground mt-1">{story.description}</p>
+          )}
+        </div>
+        <div className="flex gap-2">
+          <Popover open={isAddOpen} onOpenChange={setIsAddOpen}>
+            <PopoverTrigger asChild>
+              <Button variant="outline" size="sm">
+                <Plus className="mr-2 h-4 w-4" />
+                Add
+              </Button>
+            </PopoverTrigger>
+            <PopoverContent className="w-80 p-0" align="end">
+              <div className="p-2 border-b">
+                <Input
+                  placeholder="Search by name or transcript..."
+                  value={searchQuery}
+                  onChange={(e) => setSearchQuery(e.target.value)}
+                  autoFocus
+                />
+              </div>
+              <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'}
+                  </div>
+                ) : (
+                  availableGenerations.map((gen) => (
+                    <button
+                      key={gen.id}
+                      type="button"
+                      className="w-full text-left px-3 py-2 hover:bg-muted transition-colors border-b last:border-b-0"
+                      onClick={() => handleAddGeneration(gen.id)}
+                    >
+                      <div className="font-medium text-sm">{gen.profile_name}</div>
+                      <div className="text-xs text-muted-foreground truncate">
+                        {gen.text.length > 50 ? `${gen.text.substring(0, 50)}...` : gen.text}
+                      </div>
+                    </button>
+                  ))
+                )}
+              </div>
+            </PopoverContent>
+          </Popover>
+          {story.items.length > 0 && (
+            <Button
+              variant="outline"
+              size="sm"
+              onClick={handleExportAudio}
+              disabled={exportAudio.isPending}
+            >
+              <Download className="mr-2 h-4 w-4" />
+              Export Audio
+            </Button>
+          )}
+        </div>
+      </div>
+
+      {/* Content */}
+      <div
+        ref={scrollRef}
+        className="flex-1 min-h-0 overflow-y-auto space-y-3"
+        style={{ paddingBottom: bottomPadding > 0 ? `${bottomPadding}px` : undefined }}
+      >
+        {sortedItems.length === 0 ? (
+          <div className="text-center py-12 px-5 border-2 border-dashed border-muted rounded-md text-muted-foreground">
+            <p className="text-sm">No items in this story</p>
+            <p className="text-xs mt-2">Generate speech using the box below to add items</p>
+          </div>
+        ) : (
+          <DndContext
+            sensors={sensors}
+            collisionDetection={closestCenter}
+            onDragEnd={handleDragEnd}
+          >
+            <SortableContext
+              items={sortedItems.map((item) => item.generation_id)}
+              strategy={verticalListSortingStrategy}
+            >
+              <div className="space-y-3">
+                {sortedItems.map((item, index) => (
+                  <div
+                    key={item.id}
+                    ref={(el) => {
+                      if (el) {
+                        itemRefsMap.current.set(item.generation_id, el);
+                      } else {
+                        itemRefsMap.current.delete(item.generation_id);
+                      }
+                    }}
+                  >
+                    <SortableStoryChatItem
+                      item={item}
+                      storyId={story.id}
+                      index={index}
+                      onRemove={() => handleRemoveItem(item.generation_id)}
+                      currentTimeMs={currentTimeMs}
+                      isPlaying={isPlaying && playbackStoryId === story.id}
+                    />
+                  </div>
+                ))}
+              </div>
+            </SortableContext>
+          </DndContext>
+        )}
+      </div>
+    </div>
+  );
+}

app/src/components/StoriesTab/StoryList.tsx

@@ -0,0 +1,369 @@
+import { Plus, BookOpen, MoreHorizontal, Pencil, Trash2 } from 'lucide-react';
+import { useState } from 'react';
+import { Button } from '@/components/ui/button';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '@/components/ui/dialog';
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from '@/components/ui/alert-dialog';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from '@/components/ui/dropdown-menu';
+import { Input } from '@/components/ui/input';
+import { Textarea } from '@/components/ui/textarea';
+import { Label } from '@/components/ui/label';
+import { useToast } from '@/components/ui/use-toast';
+import {
+  useStories,
+  useCreateStory,
+  useUpdateStory,
+  useDeleteStory,
+} from '@/lib/hooks/useStories';
+import { useStoryStore } from '@/stores/storyStore';
+import { cn } from '@/lib/utils/cn';
+import { formatDate } from '@/lib/utils/format';
+
+export function StoryList() {
+  const { data: stories, isLoading } = useStories();
+  const selectedStoryId = useStoryStore((state) => state.selectedStoryId);
+  const setSelectedStoryId = useStoryStore((state) => state.setSelectedStoryId);
+  const createStory = useCreateStory();
+  const updateStory = useUpdateStory();
+  const deleteStory = useDeleteStory();
+  const [createDialogOpen, setCreateDialogOpen] = useState(false);
+  const [editDialogOpen, setEditDialogOpen] = useState(false);
+  const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);
+  const [editingStory, setEditingStory] = useState<{ id: string; name: string; description?: string } | null>(null);
+  const [deletingStoryId, setDeletingStoryId] = useState<string | null>(null);
+  const [newStoryName, setNewStoryName] = useState('');
+  const [newStoryDescription, setNewStoryDescription] = useState('');
+  const { toast } = useToast();
+
+  const handleCreateStory = () => {
+    if (!newStoryName.trim()) {
+      toast({
+        title: 'Name required',
+        description: 'Please enter a story name',
+        variant: 'destructive',
+      });
+      return;
+    }
+
+    createStory.mutate(
+      {
+        name: newStoryName.trim(),
+        description: newStoryDescription.trim() || undefined,
+      },
+      {
+        onSuccess: (story) => {
+          setSelectedStoryId(story.id);
+          setCreateDialogOpen(false);
+          setNewStoryName('');
+          setNewStoryDescription('');
+          toast({
+            title: 'Story created',
+            description: `"${story.name}" has been created`,
+          });
+        },
+        onError: (error) => {
+          toast({
+            title: 'Failed to create story',
+            description: error.message,
+            variant: 'destructive',
+          });
+        },
+      },
+    );
+  };
+
+  const handleEditClick = (story: { id: string; name: string; description?: string }) => {
+    setEditingStory(story);
+    setNewStoryName(story.name);
+    setNewStoryDescription(story.description || '');
+    setEditDialogOpen(true);
+  };
+
+  const handleUpdateStory = () => {
+    if (!editingStory || !newStoryName.trim()) {
+      toast({
+        title: 'Name required',
+        description: 'Please enter a story name',
+        variant: 'destructive',
+      });
+      return;
+    }
+
+    updateStory.mutate(
+      {
+        storyId: editingStory.id,
+        data: {
+          name: newStoryName.trim(),
+          description: newStoryDescription.trim() || undefined,
+        },
+      },
+      {
+        onSuccess: () => {
+          setEditDialogOpen(false);
+          setEditingStory(null);
+          setNewStoryName('');
+          setNewStoryDescription('');
+        },
+        onError: (error) => {
+          toast({
+            title: 'Failed to update story',
+            description: error.message,
+            variant: 'destructive',
+          });
+        },
+      },
+    );
+  };
+
+  const handleDeleteClick = (storyId: string) => {
+    setDeletingStoryId(storyId);
+    setDeleteDialogOpen(true);
+  };
+
+  const handleDeleteConfirm = () => {
+    if (!deletingStoryId) return;
+
+    deleteStory.mutate(deletingStoryId, {
+      onSuccess: () => {
+        // Clear selection if deleting the currently selected story
+        if (selectedStoryId === deletingStoryId) {
+          setSelectedStoryId(null);
+        }
+        setDeleteDialogOpen(false);
+        setDeletingStoryId(null);
+      },
+      onError: (error) => {
+        toast({
+          title: 'Failed to delete story',
+          description: error.message,
+          variant: 'destructive',
+        });
+      },
+    });
+  };
+
+  if (isLoading) {
+    return (
+      <div className="flex items-center justify-center h-full">
+        <div className="text-muted-foreground">Loading stories...</div>
+      </div>
+    );
+  }
+
+  const storyList = stories || [];
+
+  return (
+    <div className="flex flex-col h-full min-h-0">
+      {/* Header */}
+      <div className="flex items-center justify-between mb-4 px-1">
+        <h2 className="text-2xl font-bold">Stories</h2>
+        <Button onClick={() => setCreateDialogOpen(true)} size="sm">
+          <Plus className="mr-2 h-4 w-4" />
+          New Story
+        </Button>
+      </div>
+
+      {/* Story List */}
+      <div className="flex-1 min-h-0 overflow-y-auto space-y-2">
+        {storyList.length === 0 ? (
+          <div className="text-center py-12 px-5 border-2 border-dashed border-muted rounded-md text-muted-foreground">
+            <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-md 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>
+                </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()}
+                    >
+                      <MoreHorizontal className="h-4 w-4" />
+                    </Button>
+                  </DropdownMenuTrigger>
+                  <DropdownMenuContent align="end">
+                    <DropdownMenuItem onClick={() => handleEditClick(story)}>
+                      <Pencil className="mr-2 h-4 w-4" />
+                      Edit
+                    </DropdownMenuItem>
+                    <DropdownMenuItem
+                      onClick={() => handleDeleteClick(story.id)}
+                      className="text-destructive focus:text-destructive"
+                    >
+                      <Trash2 className="mr-2 h-4 w-4" />
+                      Delete
+                    </DropdownMenuItem>
+                  </DropdownMenuContent>
+                </DropdownMenu>
+              </div>
+            </div>
+          ))
+        )}
+      </div>
+
+      {/* Create Story Dialog */}
+      <Dialog open={createDialogOpen} onOpenChange={setCreateDialogOpen}>
+        <DialogContent>
+          <DialogHeader>
+            <DialogTitle>Create New Story</DialogTitle>
+            <DialogDescription>
+              Create a new story to organize your voice generations into conversations.
+            </DialogDescription>
+          </DialogHeader>
+          <div className="space-y-4 py-4">
+            <div className="space-y-2">
+              <Label htmlFor="story-name">Name</Label>
+              <Input
+                id="story-name"
+                placeholder="My Story"
+                value={newStoryName}
+                onChange={(e) => setNewStoryName(e.target.value)}
+                onKeyDown={(e) => {
+                  if (e.key === 'Enter') {
+                    handleCreateStory();
+                  }
+                }}
+              />
+            </div>
+            <div className="space-y-2">
+              <Label htmlFor="story-description">Description (optional)</Label>
+              <Textarea
+                id="story-description"
+                placeholder="A conversation between..."
+                value={newStoryDescription}
+                onChange={(e) => setNewStoryDescription(e.target.value)}
+                rows={3}
+              />
+            </div>
+          </div>
+          <DialogFooter>
+            <Button variant="outline" onClick={() => setCreateDialogOpen(false)}>
+              Cancel
+            </Button>
+            <Button onClick={handleCreateStory} disabled={createStory.isPending}>
+              {createStory.isPending ? 'Creating...' : 'Create'}
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      {/* Edit Story Dialog */}
+      <Dialog open={editDialogOpen} onOpenChange={setEditDialogOpen}>
+        <DialogContent>
+          <DialogHeader>
+            <DialogTitle>Edit Story</DialogTitle>
+            <DialogDescription>
+              Update the story name and description.
+            </DialogDescription>
+          </DialogHeader>
+          <div className="space-y-4 py-4">
+            <div className="space-y-2">
+              <Label htmlFor="edit-story-name">Name</Label>
+              <Input
+                id="edit-story-name"
+                placeholder="My Story"
+                value={newStoryName}
+                onChange={(e) => setNewStoryName(e.target.value)}
+                onKeyDown={(e) => {
+                  if (e.key === 'Enter') {
+                    handleUpdateStory();
+                  }
+                }}
+              />
+            </div>
+            <div className="space-y-2">
+              <Label htmlFor="edit-story-description">Description (optional)</Label>
+              <Textarea
+                id="edit-story-description"
+                placeholder="A conversation between..."
+                value={newStoryDescription}
+                onChange={(e) => setNewStoryDescription(e.target.value)}
+                rows={3}
+              />
+            </div>
+          </div>
+          <DialogFooter>
+            <Button variant="outline" onClick={() => setEditDialogOpen(false)}>
+              Cancel
+            </Button>
+            <Button onClick={handleUpdateStory} disabled={updateStory.isPending}>
+              {updateStory.isPending ? 'Saving...' : 'Save'}
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      {/* Delete Story Confirmation Dialog */}
+      <AlertDialog open={deleteDialogOpen} onOpenChange={setDeleteDialogOpen}>
+        <AlertDialogContent>
+          <AlertDialogHeader>
+            <AlertDialogTitle>Are you sure?</AlertDialogTitle>
+            <AlertDialogDescription>
+              This will permanently delete the story and all its items. This action cannot be undone.
+            </AlertDialogDescription>
+          </AlertDialogHeader>
+          <AlertDialogFooter>
+            <AlertDialogCancel>Cancel</AlertDialogCancel>
+            <AlertDialogAction asChild>
+              <Button
+                onClick={handleDeleteConfirm}
+                disabled={deleteStory.isPending}
+                className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
+              >
+                {deleteStory.isPending ? 'Deleting...' : 'Delete'}
+              </Button>
+            </AlertDialogAction>
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      </AlertDialog>
+    </div>
+  );
+}

app/src/components/StoriesTab/StoryTrackEditor.tsx

@@ -0,0 +1,520 @@
+import { GripHorizontal, Minus, Pause, Play, Plus, Square } from 'lucide-react';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import WaveSurfer from 'wavesurfer.js';
+import { Button } from '@/components/ui/button';
+import { useToast } from '@/components/ui/use-toast';
+import { apiClient } from '@/lib/api/client';
+import { useMoveStoryItem } from '@/lib/hooks/useStories';
+import { useStoryStore } from '@/stores/storyStore';
+import type { StoryItemDetail } from '@/lib/api/types';
+import { cn } from '@/lib/utils/cn';
+
+// Clip waveform component
+function ClipWaveform({ generationId, width }: { generationId: string; width: number }) {
+  const containerRef = useRef<HTMLDivElement>(null);
+  const wavesurferRef = useRef<WaveSurfer | null>(null);
+
+  useEffect(() => {
+    if (!containerRef.current || width < 20) return;
+
+    // Get CSS colors
+    const root = document.documentElement;
+    const getCSSVar = (varName: string) => {
+      const value = getComputedStyle(root).getPropertyValue(varName).trim();
+      return value ? `hsl(${value})` : '';
+    };
+
+    const waveColor = getCSSVar('--accent-foreground');
+
+    const wavesurfer = WaveSurfer.create({
+      container: containerRef.current,
+      waveColor,
+      progressColor: waveColor,
+      cursorWidth: 0,
+      barWidth: 1,
+      barRadius: 1,
+      barGap: 1,
+      height: 28,
+      normalize: true,
+      interact: false,
+    });
+
+    wavesurferRef.current = wavesurfer;
+
+    const audioUrl = apiClient.getAudioUrl(generationId);
+    wavesurfer.load(audioUrl).catch(() => {
+      // Ignore load errors
+    });
+
+    return () => {
+      wavesurfer.destroy();
+      wavesurferRef.current = null;
+    };
+  }, [generationId, width]);
+
+  return <div ref={containerRef} className="w-full h-full opacity-60" />;
+}
+
+interface StoryTrackEditorProps {
+  storyId: string;
+  items: StoryItemDetail[];
+}
+
+const TRACK_HEIGHT = 48;
+const MIN_PIXELS_PER_SECOND = 10;
+const MAX_PIXELS_PER_SECOND = 200;
+const DEFAULT_PIXELS_PER_SECOND = 50;
+const DEFAULT_TRACKS = [1, 0, -1]; // Default 3 tracks
+const MIN_EDITOR_HEIGHT = 120;
+const MAX_EDITOR_HEIGHT = 500;
+
+export function StoryTrackEditor({ storyId, items }: StoryTrackEditorProps) {
+  const [pixelsPerSecond, setPixelsPerSecond] = useState(DEFAULT_PIXELS_PER_SECOND);
+  const [draggingItem, setDraggingItem] = useState<string | null>(null);
+  const [dragOffset, setDragOffset] = useState({ x: 0, y: 0 });
+  const [dragPosition, setDragPosition] = useState({ x: 0, y: 0 });
+  const [isResizing, setIsResizing] = useState(false);
+  const [containerWidth, setContainerWidth] = useState(0);
+  const containerRef = useRef<HTMLDivElement>(null);
+  const tracksRef = useRef<HTMLDivElement>(null);
+  const resizeStartY = useRef(0);
+  const resizeStartHeight = useRef(0);
+  const moveItem = useMoveStoryItem();
+  const { toast } = useToast();
+
+  // Track editor height from store (shared with FloatingGenerateBox)
+  const editorHeight = useStoryStore((state) => state.trackEditorHeight);
+  const setEditorHeight = useStoryStore((state) => state.setTrackEditorHeight);
+
+  // Playback state
+  const isPlaying = useStoryStore((state) => state.isPlaying);
+  const currentTimeMs = useStoryStore((state) => state.currentTimeMs);
+  const storeTotalDurationMs = useStoryStore((state) => state.totalDurationMs);
+  const playbackStoryId = useStoryStore((state) => state.playbackStoryId);
+  const play = useStoryStore((state) => state.play);
+  const pause = useStoryStore((state) => state.pause);
+  const stop = useStoryStore((state) => state.stop);
+  const seek = useStoryStore((state) => state.seek);
+
+  const isActiveStory = playbackStoryId === storyId;
+  const isCurrentlyPlaying = isPlaying && isActiveStory;
+
+  // Sort items by start time for play
+  const sortedItems = useMemo(() => {
+    return [...items].sort((a, b) => a.start_time_ms - b.start_time_ms);
+  }, [items]);
+
+  const handlePlayPause = () => {
+    if (isCurrentlyPlaying) {
+      pause();
+    } else {
+      play(storyId, sortedItems);
+    }
+  };
+
+  const handleStop = () => {
+    stop();
+  };
+
+  // Calculate unique tracks from items, always showing at least 3 default tracks
+  const tracks = useMemo(() => {
+    const trackSet = new Set([...DEFAULT_TRACKS, ...items.map((item) => item.track)]);
+    return Array.from(trackSet).sort((a, b) => b - a); // Higher tracks on top
+  }, [items]);
+
+  // Track container width for full-width minimum
+  useEffect(() => {
+    const container = tracksRef.current;
+    if (!container) return;
+
+    const observer = new ResizeObserver((entries) => {
+      for (const entry of entries) {
+        setContainerWidth(entry.contentRect.width);
+      }
+    });
+
+    observer.observe(container);
+    // Set initial width
+    setContainerWidth(container.clientWidth);
+
+    return () => observer.disconnect();
+  }, []);
+
+  // Calculate total duration
+  const totalDurationMs = useMemo(() => {
+    if (items.length === 0) return 10000; // Default 10 seconds
+    return Math.max(
+      ...items.map((item) => item.start_time_ms + item.duration * 1000),
+      10000
+    );
+  }, [items]);
+
+  // Calculate timeline width - at least full container width
+  const contentWidth = (totalDurationMs / 1000) * pixelsPerSecond + 200; // Content width with padding
+  const timelineWidth = Math.max(contentWidth, containerWidth);
+
+  // Generate time markers
+  const timeMarkers = useMemo(() => {
+    const markers: number[] = [];
+    // Determine interval based on zoom level
+    let intervalMs = 5000; // 5 seconds
+    if (pixelsPerSecond > 100) intervalMs = 1000;
+    else if (pixelsPerSecond > 50) intervalMs = 2000;
+    else if (pixelsPerSecond < 20) intervalMs = 10000;
+
+    for (let ms = 0; ms <= totalDurationMs + intervalMs; ms += intervalMs) {
+      markers.push(ms);
+    }
+    return markers;
+  }, [totalDurationMs, pixelsPerSecond]);
+
+  const formatTime = (ms: number): string => {
+    const totalSeconds = Math.floor(ms / 1000);
+    const minutes = Math.floor(totalSeconds / 60);
+    const seconds = totalSeconds % 60;
+    return `${minutes}:${seconds.toString().padStart(2, '0')}`;
+  };
+
+  const msToPixels = useCallback(
+    (ms: number) => (ms / 1000) * pixelsPerSecond,
+    [pixelsPerSecond]
+  );
+
+  const pixelsToMs = useCallback(
+    (px: number) => (px / pixelsPerSecond) * 1000,
+    [pixelsPerSecond]
+  );
+
+  const handleZoomIn = () => {
+    setPixelsPerSecond((prev) => Math.min(prev * 1.5, MAX_PIXELS_PER_SECOND));
+  };
+
+  const handleZoomOut = () => {
+    setPixelsPerSecond((prev) => Math.max(prev / 1.5, MIN_PIXELS_PER_SECOND));
+  };
+
+  // Resize handlers
+  const handleResizeStart = useCallback((e: React.MouseEvent) => {
+    e.preventDefault();
+    setIsResizing(true);
+    resizeStartY.current = e.clientY;
+    resizeStartHeight.current = editorHeight;
+  }, [editorHeight]);
+
+  const handleResizeMove = useCallback((e: MouseEvent) => {
+    if (!isResizing) return;
+    const deltaY = resizeStartY.current - e.clientY;
+    const newHeight = Math.min(
+      MAX_EDITOR_HEIGHT,
+      Math.max(MIN_EDITOR_HEIGHT, resizeStartHeight.current + deltaY)
+    );
+    setEditorHeight(newHeight);
+  }, [isResizing, setEditorHeight]);
+
+  const handleResizeEnd = useCallback(() => {
+    setIsResizing(false);
+  }, []);
+
+  // Add global mouse listeners for resizing
+  useEffect(() => {
+    if (isResizing) {
+      window.addEventListener('mousemove', handleResizeMove);
+      window.addEventListener('mouseup', handleResizeEnd);
+      return () => {
+        window.removeEventListener('mousemove', handleResizeMove);
+        window.removeEventListener('mouseup', handleResizeEnd);
+      };
+    }
+  }, [isResizing, handleResizeMove, handleResizeEnd]);
+
+  const handleTimelineClick = (e: React.MouseEvent<HTMLDivElement>) => {
+    if (!tracksRef.current || draggingItem) return;
+    const rect = tracksRef.current.getBoundingClientRect();
+    const x = e.clientX - rect.left + tracksRef.current.scrollLeft;
+    const timeMs = Math.max(0, pixelsToMs(x));
+    seek(timeMs);
+  };
+
+  const handleDragStart = (
+    e: React.MouseEvent,
+    item: StoryItemDetail
+  ) => {
+    e.stopPropagation();
+    if (!tracksRef.current) return;
+
+    const rect = e.currentTarget.getBoundingClientRect();
+    setDragOffset({
+      x: e.clientX - rect.left,
+      y: e.clientY - rect.top,
+    });
+    setDragPosition({
+      x: rect.left - tracksRef.current.getBoundingClientRect().left + tracksRef.current.scrollLeft,
+      y: rect.top - tracksRef.current.getBoundingClientRect().top,
+    });
+    setDraggingItem(item.generation_id);
+  };
+
+  const handleDragMove = useCallback(
+    (e: React.MouseEvent) => {
+      if (!draggingItem || !tracksRef.current) return;
+
+      const rect = tracksRef.current.getBoundingClientRect();
+      const x = e.clientX - rect.left + tracksRef.current.scrollLeft - dragOffset.x;
+      const y = e.clientY - rect.top - dragOffset.y;
+
+      setDragPosition({ x: Math.max(0, x), y });
+    },
+    [draggingItem, dragOffset]
+  );
+
+  const handleDragEnd = useCallback(() => {
+    if (!draggingItem || !tracksRef.current) {
+      setDraggingItem(null);
+      return;
+    }
+
+    const item = items.find((i) => i.generation_id === draggingItem);
+    if (!item) {
+      setDraggingItem(null);
+      return;
+    }
+
+    // Calculate new time from x position
+    const newTimeMs = Math.max(0, Math.round(pixelsToMs(dragPosition.x)));
+
+    // Calculate new track from y position
+    const trackIndex = Math.floor(dragPosition.y / TRACK_HEIGHT);
+    const clampedTrackIndex = Math.max(0, Math.min(trackIndex, tracks.length - 1));
+    const newTrack = tracks[clampedTrackIndex] ?? 0;
+
+    // Check if position changed
+    if (newTimeMs !== item.start_time_ms || newTrack !== item.track) {
+      moveItem.mutate(
+        {
+          storyId,
+          generationId: item.generation_id,
+          data: {
+            start_time_ms: newTimeMs,
+            track: newTrack,
+          },
+        },
+        {
+          onError: (error) => {
+            toast({
+              title: 'Failed to move item',
+              description: error.message,
+              variant: 'destructive',
+            });
+          },
+        }
+      );
+    }
+
+    setDraggingItem(null);
+  }, [draggingItem, dragPosition, items, tracks, pixelsToMs, storyId, moveItem, toast]);
+
+  // Get track index for rendering
+  const getTrackIndex = (trackNumber: number) => tracks.indexOf(trackNumber);
+
+  // Calculate clip position and dimensions
+  const getClipStyle = (item: StoryItemDetail) => {
+    const isDragging = draggingItem === item.generation_id;
+    const trackIndex = getTrackIndex(item.track);
+    const width = msToPixels(item.duration * 1000);
+    const left = isDragging ? dragPosition.x : msToPixels(item.start_time_ms);
+    const top = isDragging ? dragPosition.y : trackIndex * TRACK_HEIGHT;
+
+    return {
+      width: `${width}px`,
+      left: `${left}px`,
+      top: `${top}px`,
+      height: `${TRACK_HEIGHT - 4}px`,
+    };
+  };
+
+  // Playhead position
+  const playheadLeft = msToPixels(currentTimeMs);
+
+  // Calculate tracks area height
+  const tracksAreaHeight = tracks.length * TRACK_HEIGHT;
+  const timelineContainerHeight = editorHeight - 40; // Subtract toolbar height
+
+  if (items.length === 0) {
+    return null;
+  }
+
+  return (
+    <div className="fixed bottom-0 left-0 right-0 border-t bg-background/95 backdrop-blur supports-backdrop-filter:bg-background/60 z-50">
+      <div className="border-t bg-background/30 backdrop-blur-2xl overflow-hidden relative" ref={containerRef}>
+      {/* Resize handle at top */}
+      <button
+        type="button"
+        className="absolute top-0 left-0 right-0 h-2 cursor-ns-resize flex items-center justify-center hover:bg-muted/50 transition-colors z-20 group"
+        onMouseDown={handleResizeStart}
+        aria-label="Resize track editor"
+      >
+        <GripHorizontal className="h-3 w-3 text-muted-foreground/50 group-hover:text-muted-foreground" />
+      </button>
+
+      {/* Toolbar */}
+      <div className="flex items-center justify-between px-3 py-2 border-b bg-muted/30 mt-2">
+        {/* Play controls - left side */}
+        <div className="flex items-center gap-2">
+          <Button variant="ghost" size="icon" className="h-7 w-7" onClick={handlePlayPause}>
+            {isCurrentlyPlaying ? (
+              <Pause className="h-4 w-4" />
+            ) : (
+              <Play className="h-4 w-4" />
+            )}
+          </Button>
+          <Button variant="ghost" size="icon" className="h-7 w-7" onClick={handleStop} disabled={!isActiveStory}>
+            <Square className="h-3 w-3" />
+          </Button>
+          <span className="text-xs text-muted-foreground tabular-nums ml-2">
+            {formatTime(isActiveStory ? currentTimeMs : 0)} / {formatTime(isActiveStory ? storeTotalDurationMs : 0)}
+          </span>
+        </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}>
+            <Minus className="h-3 w-3" />
+          </Button>
+          <Button variant="ghost" size="icon" className="h-6 w-6" onClick={handleZoomIn}>
+            <Plus className="h-3 w-3" />
+          </Button>
+        </div>
+      </div>
+
+      {/* Timeline container with track labels sidebar */}
+      <div className="flex" style={{ height: `${timelineContainerHeight}px` }}>
+        {/* Track labels sidebar - fixed width */}
+        <div className="w-16 shrink-0 border-r bg-muted/20 overflow-hidden">
+          {/* Spacer for time ruler */}
+          <div className="h-6 border-b bg-muted/30" />
+          {/* Track labels */}
+          <div style={{ height: `${tracksAreaHeight}px` }}>
+            {tracks.map((trackNumber, index) => (
+              <div
+                key={trackNumber}
+                className={cn(
+                  'border-b flex items-center justify-center',
+                  index % 2 === 0 ? 'bg-background' : 'bg-muted/10'
+                )}
+                style={{ height: `${TRACK_HEIGHT}px` }}
+              >
+                <span className="text-[10px] text-muted-foreground select-none">
+                  {trackNumber}
+                </span>
+              </div>
+            ))}
+          </div>
+        </div>
+
+        {/* Scrollable timeline area */}
+        {/* biome-ignore lint/a11y/noStaticElementInteractions: Container handles drag events for child clips */}
+        <div
+          ref={tracksRef}
+          className="overflow-auto relative flex-1"
+          onMouseMove={draggingItem ? handleDragMove : undefined}
+          onMouseUp={draggingItem ? handleDragEnd : undefined}
+          onMouseLeave={draggingItem ? handleDragEnd : undefined}
+        >
+          {/* Time ruler */}
+          <div
+            className="h-6 border-b bg-muted/20 sticky top-0 z-10"
+            style={{ width: `${timelineWidth}px` }}
+          >
+            {timeMarkers.map((ms) => (
+              <div
+                key={ms}
+                className="absolute top-0 h-full flex flex-col justify-end"
+                style={{ left: `${msToPixels(ms)}px` }}
+              >
+                <div className="h-2 w-px bg-border" />
+                <span className="text-[10px] text-muted-foreground ml-1 select-none">
+                  {formatTime(ms)}
+                </span>
+              </div>
+            ))}
+          </div>
+
+          {/* Tracks area */}
+          <div
+            className="relative"
+            style={{ width: `${timelineWidth}px`, height: `${tracksAreaHeight}px` }}
+          >
+            {/* Track backgrounds */}
+            {tracks.map((trackNumber, index) => (
+              <div
+                key={trackNumber}
+                className={cn(
+                  'absolute left-0 right-0 border-b',
+                  index % 2 === 0 ? 'bg-background' : 'bg-muted/10'
+                )}
+                style={{
+                  top: `${index * TRACK_HEIGHT}px`,
+                  height: `${TRACK_HEIGHT}px`,
+                }}
+              />
+            ))}
+
+            {/* Click area for seeking - z-index lower than clips */}
+            <button
+              type="button"
+              className="absolute inset-0 z-0 cursor-pointer"
+              onClick={handleTimelineClick}
+              aria-label="Seek timeline"
+            />
+
+          {/* Audio clips */}
+          {items.map((item) => {
+            const isDragging = draggingItem === item.generation_id;
+            const style = getClipStyle(item);
+            const clipWidth = msToPixels(item.duration * 1000);
+
+            return (
+              <button
+                type="button"
+                key={item.generation_id}
+                className={cn(
+                  'absolute rounded cursor-move select-none overflow-hidden z-10',
+                  'bg-accent/80 hover:bg-accent border border-accent-foreground/20',
+                  'flex flex-col justify-center',
+                  isDragging && 'opacity-80 shadow-lg z-20',
+                  !isDragging && 'transition-all duration-100'
+                )}
+                style={style}
+                onMouseDown={(e) => handleDragStart(e, item)}
+              >
+                {/* Clip label */}
+                <div className="absolute top-0 left-1 right-1 z-10">
+                  <p className="text-[9px] font-medium text-accent-foreground truncate">
+                    {item.profile_name}
+                  </p>
+                </div>
+                {/* Waveform */}
+                <div className="absolute inset-0 top-3">
+                  <ClipWaveform generationId={item.generation_id} width={clipWidth} />
+                </div>
+              </button>
+            );
+          })}
+
+          {/* Playhead */}
+          {isActiveStory && (
+            <div
+              className="absolute top-0 bottom-0 w-1 bg-accent z-30 pointer-events-none rounded-full"
+              style={{ left: `${playheadLeft}px` }}
+            >
+              <div className="absolute -top-1 left-1/2 -translate-x-1/2 w-3 h-3 bg-accent rounded-full" />
+            </div>
+          )}
+        </div>
+        </div>
+      </div>
+      </div>
+    </div>
+  );
+}

app/src/components/TitleBarDragRegion.tsx

@@ -0,0 +1,8 @@
+export function TitleBarDragRegion() {
+  return (
+    <div
+      data-tauri-drag-region
+      className="fixed top-0 left-0 right-0 h-12 z-[9999]"
+    />
+  );
+}

app/src/components/UpdateNotification.tsx

@@ -1,69 +0,0 @@
-import { useAutoUpdater } from '../hooks/useAutoUpdater';
-import { Button } from './ui/button';
-import { Card } from './ui/card';
-import { Progress } from './ui/progress';
-
-export function UpdateNotification() {
-  const { status, checkForUpdates, downloadAndInstall } = useAutoUpdater(true);
-
-  if (status.error) {
-    return null;
-  }
-
-  if (!status.available && !status.checking) {
-    return null;
-  }
-
-  if (status.checking) {
-    return (
-      <Card className="p-4 mb-4">
-        <div className="flex items-center gap-3">
-          <div className="animate-spin h-4 w-4 border-2 border-primary border-t-transparent rounded-full" />
-          <span className="text-sm">Checking for updates...</span>
-        </div>
-      </Card>
-    );
-  }
-
-  if (status.available) {
-    return (
-      <Card className="p-4 mb-4 border-primary">
-        <div className="space-y-3">
-          <div>
-            <h3 className="font-semibold">Update Available</h3>
-            <p className="text-sm text-muted-foreground">
-              Version {status.version} is ready to install
-            </p>
-          </div>
-
-          {status.downloading && (
-            <div className="space-y-2">
-              <p className="text-sm">Downloading update...</p>
-              <Progress />
-            </div>
-          )}
-
-          {status.installing && (
-            <div className="space-y-2">
-              <p className="text-sm">Installing update...</p>
-              <p className="text-xs text-muted-foreground">App will restart automatically</p>
-            </div>
-          )}
-
-          {!status.downloading && !status.installing && (
-            <div className="flex gap-2">
-              <Button onClick={downloadAndInstall} size="sm">
-                Install Now
-              </Button>
-              <Button onClick={() => window.location.reload()} variant="outline" size="sm">
-                Later
-              </Button>
-            </div>
-          )}
-        </div>
-      </Card>
-    );
-  }
-
-  return null;
-}

app/src/components/VoiceProfiles/.gitkeep

@@ -1 +0,0 @@
-# Voice profile management components

app/src/components/VoiceProfiles/AudioSampleRecording.tsx

@@ -0,0 +1,110 @@
+import { Mic, Pause, Play, Square } from 'lucide-react';
+import { Button } from '@/components/ui/button';
+import { FormControl, FormItem, FormLabel, FormMessage } from '@/components/ui/form';
+import { formatAudioDuration } from '@/lib/utils/audio';
+
+interface AudioSampleRecordingProps {
+  file: File | null | undefined;
+  isRecording: boolean;
+  duration: number;
+  onStart: () => void;
+  onStop: () => void;
+  onCancel: () => void;
+  onTranscribe: () => void;
+  onPlayPause: () => void;
+  isPlaying: boolean;
+  isTranscribing?: boolean;
+}
+
+export function AudioSampleRecording({
+  file,
+  isRecording,
+  duration,
+  onStart,
+  onStop,
+  onCancel,
+  onTranscribe,
+  onPlayPause,
+  isPlaying,
+  isTranscribing = false,
+}: AudioSampleRecordingProps) {
+  return (
+    <FormItem>
+      <FormLabel>Record Audio</FormLabel>
+      <FormControl>
+        <div className="space-y-4">
+          {!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">
+                <Mic className="h-5 w-5" />
+                Start Recording
+              </Button>
+              <p className="text-sm text-muted-foreground text-center">
+                Click to start recording. Maximum duration: 30 seconds.
+              </p>
+            </div>
+          )}
+
+          {isRecording && (
+            <div className="flex flex-col items-center justify-center gap-4 p-4 border-2 border-destructive rounded-lg bg-destructive/5 min-h-[180px]">
+              <div className="flex items-center gap-4">
+                <div className="flex items-center gap-2">
+                  <div className="h-3 w-3 rounded-full bg-destructive animate-pulse" />
+                  <span className="text-lg font-mono font-semibold">
+                    {formatAudioDuration(duration)}
+                  </span>
+                </div>
+              </div>
+              <Button
+                type="button"
+                onClick={onStop}
+                variant="destructive"
+                className="flex items-center gap-2"
+              >
+                <Square className="h-4 w-4" />
+                Stop Recording
+              </Button>
+              <p className="text-sm text-muted-foreground text-center">
+                {formatAudioDuration(30 - duration)} remaining
+              </p>
+            </div>
+          )}
+
+          {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">
+                <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 ? <Pause className="h-4 w-4" /> : <Play className="h-4 w-4" />}
+                </Button>
+                <Button
+                  type="button"
+                  variant="outline"
+                  onClick={onTranscribe}
+                  disabled={isTranscribing}
+                  className="flex items-center gap-2"
+                >
+                  <Mic className="h-4 w-4" />
+                  {isTranscribing ? 'Transcribing...' : 'Transcribe'}
+                </Button>
+                <Button
+                  type="button"
+                  variant="outline"
+                  onClick={onCancel}
+                  className="flex items-center gap-2"
+                >
+                  Record Again
+                </Button>
+              </div>
+            </div>
+          )}
+        </div>
+      </FormControl>
+      <FormMessage />
+    </FormItem>
+  );
+}

app/src/components/VoiceProfiles/AudioSampleSystem.tsx

@@ -0,0 +1,110 @@
+import { Mic, Monitor, Pause, Play, Square } from 'lucide-react';
+import { Button } from '@/components/ui/button';
+import { FormControl, FormItem, FormLabel, FormMessage } from '@/components/ui/form';
+import { formatAudioDuration } from '@/lib/utils/audio';
+
+interface AudioSampleSystemProps {
+  file: File | null | undefined;
+  isRecording: boolean;
+  duration: number;
+  onStart: () => void;
+  onStop: () => void;
+  onCancel: () => void;
+  onTranscribe: () => void;
+  onPlayPause: () => void;
+  isPlaying: boolean;
+  isTranscribing?: boolean;
+}
+
+export function AudioSampleSystem({
+  file,
+  isRecording,
+  duration,
+  onStart,
+  onStop,
+  onCancel,
+  onTranscribe,
+  onPlayPause,
+  isPlaying,
+  isTranscribing = false,
+}: AudioSampleSystemProps) {
+  return (
+    <FormItem>
+      <FormLabel>Capture System Audio</FormLabel>
+      <FormControl>
+        <div className="space-y-4">
+          {!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">
+                <Monitor className="h-5 w-5" />
+                Start Capture
+              </Button>
+              <p className="text-sm text-muted-foreground text-center">
+                Capture audio from your system. Maximum duration: 30 seconds.
+              </p>
+            </div>
+          )}
+
+          {isRecording && (
+            <div className="flex flex-col items-center justify-center gap-4 p-4 border-2 border-destructive rounded-lg bg-destructive/5 min-h-[180px]">
+              <div className="flex items-center gap-4">
+                <div className="flex items-center gap-2">
+                  <div className="h-3 w-3 rounded-full bg-destructive animate-pulse" />
+                  <span className="text-lg font-mono font-semibold">
+                    {formatAudioDuration(duration)}
+                  </span>
+                </div>
+              </div>
+              <Button
+                type="button"
+                onClick={onStop}
+                variant="destructive"
+                className="flex items-center gap-2"
+              >
+                <Square className="h-4 w-4" />
+                Stop Capture
+              </Button>
+              <p className="text-sm text-muted-foreground text-center">
+                {formatAudioDuration(30 - duration)} remaining
+              </p>
+            </div>
+          )}
+
+          {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">
+                <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 ? <Pause className="h-4 w-4" /> : <Play className="h-4 w-4" />}
+                </Button>
+                <Button
+                  type="button"
+                  variant="outline"
+                  onClick={onTranscribe}
+                  disabled={isTranscribing}
+                  className="flex items-center gap-2"
+                >
+                  <Mic className="h-4 w-4" />
+                  {isTranscribing ? 'Transcribing...' : 'Transcribe'}
+                </Button>
+                <Button
+                  type="button"
+                  variant="outline"
+                  onClick={onCancel}
+                  className="flex items-center gap-2"
+                >
+                  Capture Again
+                </Button>
+              </div>
+            </div>
+          )}
+        </div>
+      </FormControl>
+      <FormMessage />
+    </FormItem>
+  );
+}

app/src/components/VoiceProfiles/AudioSampleUpload.tsx

@@ -0,0 +1,148 @@
+import { Mic, Pause, Play, Upload } from 'lucide-react';
+import { useRef, useState } from 'react';
+import { Button } from '@/components/ui/button';
+import { FormControl, FormItem, FormLabel, FormMessage } from '@/components/ui/form';
+
+interface AudioSampleUploadProps {
+  file: File | null | undefined;
+  onFileChange: (file: File | undefined) => void;
+  onTranscribe: () => void;
+  onPlayPause: () => void;
+  isPlaying: boolean;
+  isValidating?: boolean;
+  isTranscribing?: boolean;
+  isDisabled?: boolean;
+  fieldName: string;
+}
+
+export function AudioSampleUpload({
+  file,
+  onFileChange,
+  onTranscribe,
+  onPlayPause,
+  isPlaying,
+  isValidating = false,
+  isTranscribing = false,
+  isDisabled = false,
+  fieldName,
+}: AudioSampleUploadProps) {
+  const [isDragging, setIsDragging] = useState(false);
+  const fileInputRef = useRef<HTMLInputElement>(null);
+
+  return (
+    <FormItem>
+      <FormLabel>Audio File</FormLabel>
+      <FormControl>
+        <div className="flex flex-col gap-2">
+          <input
+            type="file"
+            accept="audio/*"
+            name={fieldName}
+            ref={fileInputRef}
+            onChange={(e) => {
+              const selectedFile = e.target.files?.[0];
+              if (selectedFile) {
+                onFileChange(selectedFile);
+              } else {
+                onFileChange(undefined);
+              }
+            }}
+            className="hidden"
+          />
+          <div
+            role="button"
+            tabIndex={0}
+            onDragOver={(e) => {
+              e.preventDefault();
+              setIsDragging(true);
+            }}
+            onDragLeave={(e) => {
+              e.preventDefault();
+              setIsDragging(false);
+            }}
+            onDrop={(e) => {
+              e.preventDefault();
+              setIsDragging(false);
+              const droppedFile = e.dataTransfer.files?.[0];
+              if (droppedFile?.type.startsWith('audio/')) {
+                onFileChange(droppedFile);
+              }
+            }}
+            onKeyDown={(e) => {
+              if (e.key === 'Enter' || e.key === ' ') {
+                e.preventDefault();
+                fileInputRef.current?.click();
+              }
+            }}
+            className={`flex flex-col items-center justify-center gap-4 p-4 border-2 rounded-lg transition-colors min-h-[180px] ${
+              file
+                ? 'border-primary bg-primary/5'
+                : isDragging
+                  ? 'border-primary bg-primary/5'
+                  : 'border-dashed border-muted-foreground/25 hover:border-muted-foreground/50'
+            }`}
+          >
+            {!file ? (
+              <>
+                <Button
+                  type="button"
+                  size="lg"
+                  onClick={() => fileInputRef.current?.click()}
+                  className="flex items-center gap-2"
+                >
+                  <Upload className="h-5 w-5" />
+                  Choose File
+                </Button>
+                <p className="text-sm text-muted-foreground text-center">
+                  Click to choose a file or drag and drop. Maximum duration: 30 seconds.
+                </p>
+              </>
+            ) : (
+              <>
+                <div className="flex items-center gap-2">
+                  <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>
+                <div className="flex gap-2">
+                  <Button
+                    type="button"
+                    size="icon"
+                    variant="outline"
+                    onClick={onPlayPause}
+                    disabled={isValidating}
+                  >
+                    {isPlaying ? <Pause className="h-4 w-4" /> : <Play className="h-4 w-4" />}
+                  </Button>
+                  <Button
+                    type="button"
+                    variant="outline"
+                    onClick={onTranscribe}
+                    disabled={isTranscribing || isValidating || isDisabled}
+                    className="flex items-center gap-2"
+                  >
+                    <Mic className="h-4 w-4" />
+                    {isTranscribing ? 'Transcribing...' : 'Transcribe'}
+                  </Button>
+                  <Button
+                    type="button"
+                    variant="outline"
+                    onClick={() => {
+                      onFileChange(undefined);
+                      if (fileInputRef.current) {
+                        fileInputRef.current.value = '';
+                      }
+                    }}
+                  >
+                    Remove
+                  </Button>
+                </div>
+              </>
+            )}
+          </div>
+        </div>
+      </FormControl>
+      <FormMessage />
+    </FormItem>
+  );
+}

app/src/components/VoiceProfiles/ProfileCard.tsx

@@ -1,4 +1,4 @@
-import { Edit, Eye, Mic, Trash2 } from 'lucide-react';
+import { Download, Edit, Mic, Trash2 } from 'lucide-react';
 import { useState } from 'react';
 import { Badge } from '@/components/ui/badge';
 import { Button } from '@/components/ui/button';
@@ -13,19 +13,18 @@ import {
   DialogTitle,
 } from '@/components/ui/dialog';
 import type { VoiceProfileResponse } from '@/lib/api/types';
-import { useDeleteProfile } from '@/lib/hooks/useProfiles';
+import { useDeleteProfile, useExportProfile } from '@/lib/hooks/useProfiles';
 import { cn } from '@/lib/utils/cn';
 import { useUIStore } from '@/stores/uiStore';
-import { ProfileDetail } from './ProfileDetail';
 
 interface ProfileCardProps {
   profile: VoiceProfileResponse;
 }
 
 export function ProfileCard({ profile }: ProfileCardProps) {
-  const [detailOpen, setDetailOpen] = useState(false);
   const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);
   const deleteProfile = useDeleteProfile();
+  const exportProfile = useExportProfile();
   const setEditingProfileId = useUIStore((state) => state.setEditingProfileId);
   const setProfileDialogOpen = useUIStore((state) => state.setProfileDialogOpen);
   const selectedProfileId = useUIStore((state) => state.selectedProfileId);
@@ -52,6 +51,11 @@ export function ProfileCard({ profile }: ProfileCardProps) {
     setDeleteDialogOpen(false);
   };
 
+  const handleExport = (e: React.MouseEvent) => {
+    e.stopPropagation();
+    exportProfile.mutate(profile.id);
+  };
+
   return (
     <>
       <Card
@@ -80,12 +84,10 @@ export function ProfileCard({ profile }: ProfileCardProps) {
           </div>
           <div className="flex gap-0.5 justify-end items-end mt-auto">
             <CircleButton
-              icon={Eye}
+              icon={Download}
-              onClick={(e) => {
+              onClick={handleExport}
-                e.stopPropagation();
+              disabled={exportProfile.isPending}
-                setDetailOpen(true);
+              aria-label="Export profile"
-              }}
-              aria-label="View details"
             />
             <CircleButton
               icon={Edit}
@@ -105,8 +107,6 @@ export function ProfileCard({ profile }: ProfileCardProps) {
         </CardContent>
       </Card>
 
-      <ProfileDetail profileId={profile.id} open={detailOpen} onOpenChange={setDetailOpen} />
-
       <Dialog open={deleteDialogOpen} onOpenChange={setDeleteDialogOpen}>
         <DialogContent>
           <DialogHeader>

app/src/components/VoiceProfiles/ProfileDetail.tsx

@@ -1,66 +0,0 @@
-import { Badge } from '@/components/ui/badge';
-import {
-  Dialog,
-  DialogContent,
-  DialogDescription,
-  DialogHeader,
-  DialogTitle,
-} from '@/components/ui/dialog';
-import { useProfile } from '@/lib/hooks/useProfiles';
-import { formatDate } from '@/lib/utils/format';
-import { SampleList } from './SampleList';
-
-interface ProfileDetailProps {
-  profileId: string;
-  open: boolean;
-  onOpenChange: (open: boolean) => void;
-}
-
-export function ProfileDetail({ profileId, open, onOpenChange }: ProfileDetailProps) {
-  const { data: profile, isLoading } = useProfile(profileId);
-
-  if (isLoading) {
-    return (
-      <Dialog open={open} onOpenChange={onOpenChange}>
-        <DialogContent>
-          <div className="text-muted-foreground">Loading profile...</div>
-        </DialogContent>
-      </Dialog>
-    );
-  }
-
-  if (!profile) {
-    return null;
-  }
-
-  return (
-    <Dialog open={open} onOpenChange={onOpenChange}>
-      <DialogContent className="max-w-3xl max-h-[90vh] overflow-y-auto">
-        <DialogHeader>
-          <DialogTitle>{profile.name}</DialogTitle>
-          <DialogDescription>Manage samples and view profile details</DialogDescription>
-        </DialogHeader>
-
-        <div className="space-y-4">
-          {profile.description && (
-            <div>
-              <h3 className="text-sm font-medium mb-1">Description</h3>
-              <p className="text-sm text-muted-foreground">{profile.description}</p>
-            </div>
-          )}
-
-          <div className="flex gap-2">
-            <Badge variant="outline">{profile.language}</Badge>
-            <span className="text-xs text-muted-foreground">
-              Created {formatDate(profile.created_at)}
-            </span>
-          </div>
-
-          <div className="border-t pt-4">
-            <SampleList profileId={profileId} />
-          </div>
-        </div>
-      </DialogContent>
-    </Dialog>
-  );
-}

app/src/components/VoiceProfiles/ProfileForm.tsx

@@ -1,4 +1,5 @@
 import { zodResolver } from '@hookform/resolvers/zod';
+import { Mic, Monitor, Upload } from 'lucide-react';
 import { useEffect, useState } from 'react';
 import { useForm } from 'react-hook-form';
 import * as z from 'zod';
@@ -13,7 +14,6 @@ import {
 import {
   Form,
   FormControl,
-  FormDescription,
   FormField,
   FormItem,
   FormLabel,
@@ -27,65 +27,51 @@ import {
   SelectTrigger,
   SelectValue,
 } from '@/components/ui/select';
-import { Textarea } from '@/components/ui/textarea';
 import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
+import { Textarea } from '@/components/ui/textarea';
 import { useToast } from '@/components/ui/use-toast';
+import { LANGUAGE_CODES, LANGUAGE_OPTIONS, type LanguageCode } from '@/lib/constants/languages';
+import { useAudioPlayer } from '@/lib/hooks/useAudioPlayer';
+import { useAudioRecording } from '@/lib/hooks/useAudioRecording';
 import {
+  useAddSample,
   useCreateProfile,
   useProfile,
   useUpdateProfile,
-  useAddSample,
 } from '@/lib/hooks/useProfiles';
+import { useSystemAudioCapture } from '@/lib/hooks/useSystemAudioCapture';
 import { useTranscription } from '@/lib/hooks/useTranscription';
-import { useAudioRecording } from '@/lib/hooks/useAudioRecording';
+import { isTauri } from '@/lib/tauri';
+import { formatAudioDuration, getAudioDuration } from '@/lib/utils/audio';
 import { useUIStore } from '@/stores/uiStore';
-import { Mic, Square, Upload } from 'lucide-react';
+import { AudioSampleRecording } from './AudioSampleRecording';
-import { formatAudioDuration } from '@/lib/utils/audio';
+import { AudioSampleSystem } from './AudioSampleSystem';
-
+import { AudioSampleUpload } from './AudioSampleUpload';
-// Helper function to get audio duration from File
+import { SampleList } from './SampleList';
-async function getAudioDuration(file: File): Promise<number> {
-  return new Promise((resolve, reject) => {
-    const audio = new Audio();
-    const url = URL.createObjectURL(file);
-    
-    audio.addEventListener('loadedmetadata', () => {
-      URL.revokeObjectURL(url);
-      resolve(audio.duration);
-    });
-    
-    audio.addEventListener('error', () => {
-      URL.revokeObjectURL(url);
-      reject(new Error('Failed to load audio file'));
-    });
-    
-    audio.src = url;
-  });
-}
 
 const MAX_AUDIO_DURATION_SECONDS = 30;
 
-const profileSchema = z
+const baseProfileSchema = z.object({
-  .object({
+  name: z.string().min(1, 'Name is required').max(100),
-    name: z.string().min(1, 'Name is required').max(100),
+  description: z.string().max(500).optional(),
-    description: z.string().max(500).optional(),
+  language: z.enum(LANGUAGE_CODES as [LanguageCode, ...LanguageCode[]]),
-    language: z.enum(['en', 'zh']),
+  sampleFile: z.instanceof(File).optional(),
-    // Sample fields - only required when creating (not editing)
+  referenceText: z.string().max(1000).optional(),
-    sampleFile: z.instanceof(File).optional(),
+});
-    referenceText: z.string().max(1000).optional(),
+
-  })
+const profileSchema = baseProfileSchema.refine(
-  .refine(
+  (data) => {
-    (data) => {
+    // If sample file is provided, reference text is required
-      // If sample file is provided, reference text is required
+    if (data.sampleFile && (!data.referenceText || data.referenceText.trim().length === 0)) {
-      if (data.sampleFile && (!data.referenceText || data.referenceText.trim().length === 0)) {
+      return false;
-        return false;
+    }
-      }
+    return true;
-      return true;
+  },
-    },
+  {
-    {
+    message: 'Reference text is required when adding a sample',
-      message: 'Reference text is required when adding a sample',
+    path: ['referenceText'],
-      path: ['referenceText'],
+  },
-    },
+);
-  );
 
 type ProfileFormValues = z.infer<typeof profileSchema>;
 
@@ -100,9 +86,10 @@ export function ProfileForm() {
   const addSample = useAddSample();
   const transcribe = useTranscription();
   const { toast } = useToast();
-  const [sampleMode, setSampleMode] = useState<'upload' | 'record'>('upload');
+  const [sampleMode, setSampleMode] = useState<'upload' | 'record' | 'system'>('upload');
   const [audioDuration, setAudioDuration] = useState<number | null>(null);
   const [isValidatingAudio, setIsValidatingAudio] = useState(false);
+  const { isPlaying, playPause, cleanup: cleanupAudio } = useAudioPlayer();
   const isCreating = !editingProfileId;
 
   const form = useForm<ProfileFormValues>({
@@ -111,6 +98,8 @@ export function ProfileForm() {
       name: '',
       description: '',
       language: 'en',
+      sampleFile: undefined,
+      referenceText: '',
     },
   });
 
@@ -120,7 +109,7 @@ export function ProfileForm() {
   useEffect(() => {
     if (selectedFile && selectedFile instanceof File) {
       setIsValidatingAudio(true);
-      getAudioDuration(selectedFile)
+      getAudioDuration(selectedFile as File & { recordedDuration?: number })
         .then((duration) => {
           setAudioDuration(duration);
           if (duration > MAX_AUDIO_DURATION_SECONDS) {
@@ -135,10 +124,19 @@ export function ProfileForm() {
         .catch((error) => {
           console.error('Failed to get audio duration:', error);
           setAudioDuration(null);
-          form.setError('sampleFile', {
+          // For recordings, we auto-stop at max duration, so we can skip validation errors
-            type: 'manual',
+          const isRecordedFile =
-            message: 'Failed to validate audio file. Please try a different file.',
+            selectedFile.name.startsWith('recording-') ||
-          });
+            selectedFile.name.startsWith('system-audio-');
+          if (!isRecordedFile) {
+            form.setError('sampleFile', {
+              type: 'manual',
+              message: 'Failed to validate audio file. Please try a different file.',
+            });
+          } else {
+            // Clear any existing errors for recorded files
+            form.clearErrors('sampleFile');
+          }
         })
         .finally(() => {
           setIsValidatingAudio(false);
@@ -157,11 +155,15 @@ export function ProfileForm() {
     stopRecording,
     cancelRecording,
   } = useAudioRecording({
-    maxDurationSeconds: 30,
+    maxDurationSeconds: 29,
-    onRecordingComplete: (blob) => {
+    onRecordingComplete: (blob, recordedDuration) => {
       const file = new File([blob], `recording-${Date.now()}.webm`, {
         type: blob.type || 'audio/webm',
-      });
+      }) as File & { recordedDuration?: number };
+      // Store the actual recorded duration to bypass metadata reading issues on Windows
+      if (recordedDuration !== undefined) {
+        file.recordedDuration = recordedDuration;
+      }
       form.setValue('sampleFile', file, { shouldValidate: true });
       toast({
         title: 'Recording complete',
@@ -170,6 +172,32 @@ export function ProfileForm() {
     },
   });
 
+  const {
+    isRecording: isSystemRecording,
+    duration: systemDuration,
+    error: systemRecordingError,
+    isSupported: isSystemAudioSupported,
+    startRecording: startSystemRecording,
+    stopRecording: stopSystemRecording,
+    cancelRecording: cancelSystemRecording,
+  } = useSystemAudioCapture({
+    maxDurationSeconds: 29,
+    onRecordingComplete: (blob, recordedDuration) => {
+      const file = new File([blob], `system-audio-${Date.now()}.wav`, {
+        type: blob.type || 'audio/wav',
+      }) as File & { recordedDuration?: number };
+      // Store the actual recorded duration to bypass metadata reading issues on Windows
+      if (recordedDuration !== undefined) {
+        file.recordedDuration = recordedDuration;
+      }
+      form.setValue('sampleFile', file, { shouldValidate: true });
+      toast({
+        title: 'System audio captured',
+        description: 'Audio has been captured successfully.',
+      });
+    },
+  });
+
   // Show recording errors
   useEffect(() => {
     if (recordingError) {
@@ -181,12 +209,23 @@ export function ProfileForm() {
     }
   }, [recordingError, toast]);
 
+  // Show system audio recording errors
+  useEffect(() => {
+    if (systemRecordingError) {
+      toast({
+        title: 'System audio capture error',
+        description: systemRecordingError,
+        variant: 'destructive',
+      });
+    }
+  }, [systemRecordingError, toast]);
+
   useEffect(() => {
     if (editingProfile) {
       form.reset({
         name: editingProfile.name,
         description: editingProfile.description || '',
-        language: editingProfile.language as 'en' | 'zh',
+        language: editingProfile.language as LanguageCode,
         sampleFile: undefined,
         referenceText: undefined,
       });
@@ -214,15 +253,10 @@ export function ProfileForm() {
     }
 
     try {
-      const language = form.getValues('language') as 'en' | 'zh' | undefined;
+      const language = form.getValues('language');
       const result = await transcribe.mutateAsync({ file, language });
 
       form.setValue('referenceText', result.text, { shouldValidate: true });
-
-      toast({
-        title: 'Transcription complete',
-        description: 'Audio has been transcribed successfully.',
-      });
     } catch (error) {
       toast({
         title: 'Transcription failed',
@@ -233,8 +267,18 @@ export function ProfileForm() {
   }
 
   function handleCancelRecording() {
-    cancelRecording();
+    if (sampleMode === 'record') {
+      cancelRecording();
+    } else if (sampleMode === 'system') {
+      cancelSystemRecording();
+    }
     form.resetField('sampleFile');
+    cleanupAudio();
+  }
+
+  function handlePlayPause() {
+    const file = form.getValues('sampleFile');
+    playPause(file);
   }
 
   async function onSubmit(data: ProfileFormValues) {
@@ -250,75 +294,91 @@ export function ProfileForm() {
           },
         });
         toast({
-          title: 'Profile updated',
+          title: 'Voice updated',
           description: `"${data.name}" has been updated successfully.`,
         });
       } else {
-        // Get file and reference text directly from form state to ensure we have the values
+        // Creating: require sample file and reference text
         const sampleFile = form.getValues('sampleFile');
         const referenceText = form.getValues('referenceText');
 
+        if (!sampleFile) {
+          form.setError('sampleFile', {
+            type: 'manual',
+            message: 'Audio sample is required',
+          });
+          toast({
+            title: 'Audio sample required',
+            description: 'Please provide an audio sample to create the voice profile.',
+            variant: 'destructive',
+          });
+          return;
+        }
+
+        if (!referenceText || referenceText.trim().length === 0) {
+          form.setError('referenceText', {
+            type: 'manual',
+            message: 'Reference text is required',
+          });
+          toast({
+            title: 'Reference text required',
+            description: 'Please provide the reference text for the audio sample.',
+            variant: 'destructive',
+          });
+          return;
+        }
+
         // Validate audio duration before creating profile
-        if (sampleFile) {
+        try {
-          try {
+          const duration = await getAudioDuration(sampleFile);
-            const duration = await getAudioDuration(sampleFile);
+          if (duration > MAX_AUDIO_DURATION_SECONDS) {
-            if (duration > MAX_AUDIO_DURATION_SECONDS) {
-              form.setError('sampleFile', {
-                type: 'manual',
-                message: `Audio is too long (${formatAudioDuration(duration)}). Maximum duration is ${formatAudioDuration(MAX_AUDIO_DURATION_SECONDS)}.`,
-              });
-              toast({
-                title: 'Invalid audio file',
-                description: `Audio duration is ${formatAudioDuration(duration)}, but maximum is ${formatAudioDuration(MAX_AUDIO_DURATION_SECONDS)}.`,
-                variant: 'destructive',
-              });
-              return; // Prevent form submission
-            }
-          } catch (error) {
             form.setError('sampleFile', {
               type: 'manual',
-              message: 'Failed to validate audio file. Please try a different file.',
+              message: `Audio is too long (${formatAudioDuration(duration)}). Maximum duration is ${formatAudioDuration(MAX_AUDIO_DURATION_SECONDS)}.`,
             });
             toast({
-              title: 'Validation error',
+              title: 'Invalid audio file',
-              description: error instanceof Error ? error.message : 'Failed to validate audio file',
+              description: `Audio duration is ${formatAudioDuration(duration)}, but maximum is ${formatAudioDuration(MAX_AUDIO_DURATION_SECONDS)}.`,
               variant: 'destructive',
             });
             return; // Prevent form submission
           }
+        } catch (error) {
+          form.setError('sampleFile', {
+            type: 'manual',
+            message: 'Failed to validate audio file. Please try a different file.',
+          });
+          toast({
+            title: 'Validation error',
+            description: error instanceof Error ? error.message : 'Failed to validate audio file',
+            variant: 'destructive',
+          });
+          return; // Prevent form submission
         }
 
-        // Creating: create profile, then optionally add sample
+        // Creating: create profile, then add sample
         const profile = await createProfile.mutateAsync({
           name: data.name,
           description: data.description,
           language: data.language,
         });
 
-        // If sample file and reference text provided, add it
+        try {
-        if (sampleFile && referenceText && referenceText.trim().length > 0) {
+          await addSample.mutateAsync({
-          try {
+            profileId: profile.id,
-            await addSample.mutateAsync({
+            file: sampleFile,
-              profileId: profile.id,
+            referenceText: referenceText,
-              file: sampleFile,
+          });
-              referenceText: referenceText,
-            });
-            toast({
-              title: 'Profile created',
-              description: `"${data.name}" has been created with a sample.`,
-            });
-          } catch (sampleError) {
-            // Profile was created but sample failed - still show success for profile
-            toast({
-              title: 'Profile created',
-              description: `"${data.name}" has been created, but failed to add sample: ${sampleError instanceof Error ? sampleError.message : 'Unknown error'}`,
-              variant: 'destructive',
-            });
-          }
-        } else {
           toast({
             title: 'Profile created',
-            description: `"${data.name}" has been created successfully. You can add samples later.`,
+            description: `"${data.name}" has been created with a sample.`,
+          });
+        } catch (sampleError) {
+          // Profile was created but sample failed - still show error
+          toast({
+            title: 'Failed to add sample',
+            description: `Profile "${data.name}" was created, but failed to add sample: ${sampleError instanceof Error ? sampleError.message : 'Unknown error'}`,
+            variant: 'destructive',
           });
         }
       }
@@ -344,6 +404,10 @@ export function ProfileForm() {
       if (isRecording) {
         cancelRecording();
       }
+      if (isSystemRecording) {
+        cancelSystemRecording();
+      }
+      cleanupAudio();
     }
   }
 
@@ -351,17 +415,17 @@ export function ProfileForm() {
     <Dialog open={open} onOpenChange={handleOpenChange}>
       <DialogContent className="max-w-4xl">
         <DialogHeader>
-          <DialogTitle>{editingProfileId ? 'Edit Profile' : 'Create Voice Profile'}</DialogTitle>
+          <DialogTitle>{editingProfileId ? 'Edit Voice' : 'Create Voice Profile'}</DialogTitle>
           <DialogDescription>
             {editingProfileId
-              ? 'Update your voice profile details.'
+              ? 'Update your voice profile details and manage samples.'
-              : 'Create a new voice profile. You can add a sample now or later.'}
+              : 'Create a new voice profile with an audio sample to clone the voice.'}
           </DialogDescription>
         </DialogHeader>
 
         <Form {...form}>
           <form onSubmit={form.handleSubmit(onSubmit)}>
-            <div className={`grid gap-6 ${isCreating ? 'grid-cols-2' : 'grid-cols-1'}`}>
+            <div className="grid gap-6 grid-cols-2">
               {/* Left column: Profile info */}
               <div className="space-y-4">
                 <FormField
@@ -405,8 +469,11 @@ export function ProfileForm() {
                           </SelectTrigger>
                         </FormControl>
                         <SelectContent>
-                          <SelectItem value="en">English</SelectItem>
+                          {LANGUAGE_OPTIONS.map((lang) => (
-                          <SelectItem value="zh">Chinese</SelectItem>
+                            <SelectItem key={lang.value} value={lang.value}>
+                              {lang.label}
+                            </SelectItem>
+                          ))}
                         </SelectContent>
                       </Select>
                       <FormMessage />
@@ -415,223 +482,144 @@ export function ProfileForm() {
                 />
               </div>
 
-              {/* Right column: Sample upload section - only show when creating */}
+              {/* Right column: Sample management */}
-              {isCreating && (
+              <div className="space-y-4 border-l pl-6">
-                <div className="space-y-4 border-l pl-6">
+                {isCreating ? (
-                  <div>
+                  <>
-                    <h3 className="text-sm font-medium mb-2">Add Sample (Optional)</h3>
+                    <div>
-                    <p className="text-sm text-muted-foreground mb-4">
+                      <h3 className="text-sm font-medium mb-2">Add Sample</h3>
-                      Add an audio sample to get started immediately. You can add more samples
+                      <p className="text-sm text-muted-foreground mb-4">
-                      later.
+                        Provide an audio sample to clone the voice. You can add more samples later.
-                    </p>
+                      </p>
-                  </div>
+                    </div>
 
-                  <Tabs
+                    <Tabs
-                    value={sampleMode}
+                      value={sampleMode}
-                    onValueChange={(v) => setSampleMode(v as 'upload' | 'record')}
+                      onValueChange={(v) => {
-                  >
+                        const newMode = v as 'upload' | 'record' | 'system';
-                    <TabsList className="grid w-full grid-cols-2">
+                        // Cancel any active recordings when switching modes
-                      <TabsTrigger value="upload" className="flex items-center gap-2">
+                        if (isRecording && newMode !== 'record') {
-                        <Upload className="h-4 w-4" />
+                          cancelRecording();
-                        Upload
+                        }
-                      </TabsTrigger>
+                        if (isSystemRecording && newMode !== 'system') {
-                      <TabsTrigger value="record" className="flex items-center gap-2">
+                          cancelSystemRecording();
-                        <Mic className="h-4 w-4" />
+                        }
-                        Record
+                        setSampleMode(newMode);
-                      </TabsTrigger>
+                      }}
-                    </TabsList>
+                    >
-
+                      <TabsList
-                    <TabsContent value="upload" className="space-y-4">
+                        className={`grid w-full ${isTauri() && isSystemAudioSupported ? 'grid-cols-3' : 'grid-cols-2'}`}
-                      <FormField
+                      >
-                        control={form.control}
+                        <TabsTrigger value="upload" className="flex items-center gap-2">
-                        name="sampleFile"
+                          <Upload className="h-4 w-4 shrink-0" />
-                        render={({ field: { onChange, name, ref } }) => (
+                          Upload
-                          <FormItem>
+                        </TabsTrigger>
-                            <FormLabel>Audio File</FormLabel>
+                        <TabsTrigger value="record" className="flex items-center gap-2">
-                            <FormControl>
+                          <Mic className="h-4 w-4 shrink-0" />
-                              <div className="flex flex-col gap-2">
+                          Record
-                                <Input
+                        </TabsTrigger>
-                                  type="file"
+                        {isTauri() && isSystemAudioSupported && (
-                                  accept="audio/*"
+                          <TabsTrigger value="system" className="flex items-center gap-2">
-                                  name={name}
+                            <Monitor className="h-4 w-4 shrink-0" />
-                                  ref={ref}
+                            System Audio
-                                  onChange={(e) => {
+                          </TabsTrigger>
-                                    const file = e.target.files?.[0];
-                                    if (file) {
-                                      onChange(file);
-                                    } else {
-                                      onChange(undefined);
-                                    }
-                                  }}
-                                />
-                                {selectedFile && (
-                                  <>
-                                    {isValidatingAudio && (
-                                      <p className="text-sm text-muted-foreground">
-                                        Validating audio...
-                                      </p>
-                                    )}
-                                    {!isValidatingAudio && audioDuration !== null && (
-                                      <div className="flex items-center gap-2 text-sm">
-                                        <span className="text-muted-foreground">Duration:</span>
-                                        <span
-                                          className={
-                                            audioDuration > MAX_AUDIO_DURATION_SECONDS
-                                              ? 'text-destructive font-medium'
-                                              : 'text-foreground'
-                                          }
-                                        >
-                                          {formatAudioDuration(audioDuration)}
-                                        </span>
-                                        <span className="text-muted-foreground">
-                                          / {formatAudioDuration(MAX_AUDIO_DURATION_SECONDS)} max
-                                        </span>
-                                      </div>
-                                    )}
-                                    <Button
-                                      type="button"
-                                      variant="outline"
-                                      onClick={handleTranscribe}
-                                      disabled={transcribe.isPending || isValidatingAudio || (audioDuration !== null && audioDuration > MAX_AUDIO_DURATION_SECONDS)}
-                                      className="flex items-center gap-2 w-full"
-                                    >
-                                      <Mic className="h-4 w-4" />
-                                      {transcribe.isPending ? 'Transcribing...' : 'Transcribe'}
-                                    </Button>
-                                  </>
-                                )}
-                              </div>
-                            </FormControl>
-                            <FormDescription>
-                              Supported formats: WAV, MP3, M4A. Maximum duration:{' '}
-                              {formatAudioDuration(MAX_AUDIO_DURATION_SECONDS)}. Click "Transcribe"
-                              to automatically extract text from the audio.
-                            </FormDescription>
-                            <FormMessage />
-                          </FormItem>
                         )}
-                      />
+                      </TabsList>
-                    </TabsContent>
 
-                    <TabsContent value="record" className="space-y-4">
+                      <TabsContent value="upload" className="space-y-4">
-                      <FormField
+                        <FormField
-                        control={form.control}
+                          control={form.control}
-                        name="sampleFile"
+                          name="sampleFile"
-                        render={() => (
+                          render={({ field: { onChange, name } }) => (
-                          <FormItem>
+                            <AudioSampleUpload
-                            <FormLabel>Record Audio</FormLabel>
+                              file={selectedFile}
-                            <FormControl>
+                              onFileChange={onChange}
-                              <div className="space-y-4">
+                              onTranscribe={handleTranscribe}
-                                {!isRecording && !selectedFile && (
+                              onPlayPause={handlePlayPause}
-                                  <div className="flex flex-col items-center gap-4 p-4 border-2 border-dashed rounded-lg">
+                              isPlaying={isPlaying}
-                                    <Button
+                              isValidating={isValidatingAudio}
-                                      type="button"
+                              isTranscribing={transcribe.isPending}
-                                      onClick={startRecording}
+                              isDisabled={
-                                      size="lg"
+                                audioDuration !== null && audioDuration > MAX_AUDIO_DURATION_SECONDS
-                                      className="flex items-center gap-2"
+                              }
-                                    >
+                              fieldName={name}
-                                      <Mic className="h-5 w-5" />
+                            />
-                                      Start Recording
+                          )}
-                                    </Button>
+                        />
-                                    <p className="text-sm text-muted-foreground text-center">
+                      </TabsContent>
-                                      Click to start recording. Maximum duration: 30 seconds.
-                                    </p>
-                                  </div>
-                                )}
 
-                                {isRecording && (
+                      <TabsContent value="record" className="space-y-4">
-                                  <div className="flex flex-col items-center gap-4 p-4 border-2 border-destructive rounded-lg bg-destructive/5">
+                        <FormField
-                                    <div className="flex items-center gap-4">
+                          control={form.control}
-                                      <div className="flex items-center gap-2">
+                          name="sampleFile"
-                                        <div className="h-3 w-3 rounded-full bg-destructive animate-pulse" />
+                          render={() => (
-                                        <span className="text-lg font-mono font-semibold">
+                            <AudioSampleRecording
-                                          {formatAudioDuration(duration)}
+                              file={selectedFile}
-                                        </span>
+                              isRecording={isRecording}
-                                      </div>
+                              duration={duration}
-                                    </div>
+                              onStart={startRecording}
-                                    <Button
+                              onStop={stopRecording}
-                                      type="button"
+                              onCancel={handleCancelRecording}
-                                      onClick={stopRecording}
+                              onTranscribe={handleTranscribe}
-                                      variant="destructive"
+                              onPlayPause={handlePlayPause}
-                                      className="flex items-center gap-2"
+                              isPlaying={isPlaying}
-                                    >
+                              isTranscribing={transcribe.isPending}
-                                      <Square className="h-4 w-4" />
+                            />
-                                      Stop Recording
+                          )}
-                                    </Button>
+                        />
-                                    <p className="text-sm text-muted-foreground text-center">
+                      </TabsContent>
-                                      Recording in progress... ({formatAudioDuration(30 - duration)}{' '}
-                                      remaining)
-                                    </p>
-                                  </div>
-                                )}
 
-                                {selectedFile && !isRecording && (
+                      {isTauri() && isSystemAudioSupported && (
-                                  <div className="flex flex-col items-center gap-4 p-4 border-2 border-primary rounded-lg bg-primary/5">
+                        <TabsContent value="system" className="space-y-4">
-                                    <div className="flex items-center gap-2">
+                          <FormField
-                                      <Mic className="h-5 w-5 text-primary" />
+                            control={form.control}
-                                      <span className="font-medium">Recording complete</span>
+                            name="sampleFile"
-                                    </div>
+                            render={() => (
-                                    <p className="text-sm text-muted-foreground text-center">
+                              <AudioSampleSystem
-                                      File: {selectedFile.name}
+                                file={selectedFile}
-                                    </p>
+                                isRecording={isSystemRecording}
-                                    <div className="flex gap-2">
+                                duration={systemDuration}
-                                      <Button
+                                onStart={startSystemRecording}
-                                        type="button"
+                                onStop={stopSystemRecording}
-                                        variant="outline"
+                                onCancel={handleCancelRecording}
-                                        onClick={handleTranscribe}
+                                onTranscribe={handleTranscribe}
-                                        disabled={transcribe.isPending}
+                                onPlayPause={handlePlayPause}
-                                        className="flex items-center gap-2"
+                                isPlaying={isPlaying}
-                                      >
+                                isTranscribing={transcribe.isPending}
-                                        <Mic className="h-4 w-4" />
+                              />
-                                        {transcribe.isPending ? 'Transcribing...' : 'Transcribe'}
+                            )}
-                                      </Button>
-                                      <Button
-                                        type="button"
-                                        variant="outline"
-                                        onClick={handleCancelRecording}
-                                        className="flex items-center gap-2"
-                                      >
-                                        Record Again
-                                      </Button>
-                                    </div>
-                                  </div>
-                                )}
-                              </div>
-                            </FormControl>
-                            <FormDescription>
-                              Record audio directly from your microphone. Maximum duration is 30
-                              seconds.
-                            </FormDescription>
-                            <FormMessage />
-                          </FormItem>
-                        )}
-                      />
-                    </TabsContent>
-                  </Tabs>
-
-                  <FormField
-                    control={form.control}
-                    name="referenceText"
-                    render={({ field }) => (
-                      <FormItem>
-                        <FormLabel>Reference Text</FormLabel>
-                        <FormControl>
-                          <Textarea
-                            placeholder="Enter the exact text spoken in the audio..."
-                            className="min-h-[100px]"
-                            {...field}
                           />
-                        </FormControl>
+                        </TabsContent>
-                        <FormDescription>
+                      )}
-                          This should match exactly what is spoken in the audio file. Required if
+                    </Tabs>
-                          you add a sample.
+
-                        </FormDescription>
+                    <FormField
-                        <FormMessage />
+                      control={form.control}
-                      </FormItem>
+                      name="referenceText"
-                    )}
+                      render={({ field }) => (
-                  />
+                        <FormItem>
-                </div>
+                          <FormLabel>Reference Text</FormLabel>
-              )}
+                          <FormControl>
+                            <Textarea
+                              placeholder="Enter the exact text spoken in the audio..."
+                              className="min-h-[100px]"
+                              {...field}
+                            />
+                          </FormControl>
+                          <FormMessage />
+                        </FormItem>
+                      )}
+                    />
+                  </>
+                ) : (
+                  // Show sample list when editing
+                  editingProfileId && (
+                    <div>
+                      <SampleList profileId={editingProfileId} />
+                    </div>
+                  )
+                )}
+              </div>
             </div>
 
             <div className="flex gap-2 justify-end mt-6 pt-4 border-t">
@@ -645,7 +633,7 @@ export function ProfileForm() {
                 {createProfile.isPending || updateProfile.isPending || addSample.isPending
                   ? 'Saving...'
                   : editingProfileId
-                    ? 'Update Profile'
+                    ? 'Save Changes'
                     : 'Create Profile'}
               </Button>
             </div>

app/src/components/VoiceProfiles/ProfileList.tsx

@@ -11,11 +11,7 @@ export function ProfileList() {
   const setDialogOpen = useUIStore((state) => state.setProfileDialogOpen);
 
   if (isLoading) {
-    return (
+    return null;
-      <div className="flex items-center justify-center p-8">
-        <div className="text-muted-foreground">Loading profiles...</div>
-      </div>
-    );
   }
 
   if (error) {
@@ -30,14 +26,6 @@ export function ProfileList() {
 
   return (
     <div className="flex flex-col">
-      <div className="flex items-center justify-between mb-4 shrink-0">
-        <h2 className="text-2xl font-bold">Voicebox</h2>
-        <Button onClick={() => setDialogOpen(true)}>
-          <Sparkles className="mr-2 h-4 w-4" />
-          New Profile
-        </Button>
-      </div>
-
       <div className="shrink-0">
         {allProfiles.length === 0 ? (
           <Card>
@@ -48,12 +36,12 @@ export function ProfileList() {
               </p>
               <Button onClick={() => setDialogOpen(true)}>
                 <Sparkles className="mr-2 h-4 w-4" />
-                Create Profile
+                Create Voice
               </Button>
             </CardContent>
           </Card>
         ) : (
-          <div className="grid gap-4 grid-cols-3 auto-rows-auto p-1">
+          <div className="grid gap-4 grid-cols-3 auto-rows-auto p-1 pb-[150px]">
             {allProfiles.map((profile) => (
               <ProfileCard key={profile.id} profile={profile} />
             ))}

app/src/components/VoiceProfiles/SampleList.tsx

@@ -1,10 +1,9 @@
 import { Plus, Trash2, Play } from 'lucide-react';
 import { useState } from 'react';
 import { Button } from '@/components/ui/button';
-import { useToast } from '@/components/ui/use-toast';
 import { useDeleteSample, useProfileSamples } from '@/lib/hooks/useProfiles';
-import { useServerStore } from '@/stores/serverStore';
 import { usePlayerStore } from '@/stores/playerStore';
+import { apiClient } from '@/lib/api/client';
 import { SampleUpload } from './SampleUpload';
 
 interface SampleListProps {
@@ -15,8 +14,6 @@ export function SampleList({ profileId }: SampleListProps) {
   const { data: samples, isLoading } = useProfileSamples(profileId);
   const deleteSample = useDeleteSample();
   const [uploadOpen, setUploadOpen] = useState(false);
-  const { toast } = useToast();
-  const serverUrl = useServerStore((state) => state.serverUrl);
   const setAudio = usePlayerStore((state) => state.setAudio);
   const currentAudioId = usePlayerStore((state) => state.audioId);
   const isPlaying = usePlayerStore((state) => state.isPlaying);
@@ -27,8 +24,8 @@ export function SampleList({ profileId }: SampleListProps) {
     }
   };
 
-  const handlePlay = (audioPath: string, referenceText: string, sampleId: string) => {
+  const handlePlay = (referenceText: string, sampleId: string) => {
-    const audioUrl = `${serverUrl}${audioPath}`;
+    const audioUrl = apiClient.getSampleUrl(sampleId);
     setAudio(audioUrl, sampleId, referenceText.substring(0, 50));
   };
 
@@ -40,7 +37,7 @@ export function SampleList({ profileId }: SampleListProps) {
     <div className="space-y-4">
       <div className="flex items-center justify-between">
         <h3 className="text-lg font-semibold">Audio Samples</h3>
-        <Button size="sm" onClick={() => setUploadOpen(true)}>
+        <Button type="button" size="sm" onClick={() => setUploadOpen(true)}>
           <Plus className="mr-2 h-4 w-4" />
           Add Sample
         </Button>
@@ -63,15 +60,17 @@ export function SampleList({ profileId }: SampleListProps) {
               </div>
               <div className="flex gap-2">
                 <Button
+                  type="button"
                   variant="ghost"
                   size="sm"
-                  onClick={() => handlePlay(sample.audio_path, sample.reference_text, sample.id)}
+                  onClick={() => handlePlay(sample.reference_text, sample.id)}
                   className={currentAudioId === sample.id && isPlaying ? 'text-primary' : ''}
                 >
                   <Play className="h-4 w-4 mr-1" />
                   Play
                 </Button>
                 <Button
+                  type="button"
                   variant="ghost"
                   size="sm"
                   onClick={() => handleDelete(sample.id)}

app/src/components/VoiceProfiles/SampleUpload.tsx

@@ -1,6 +1,7 @@
 import { zodResolver } from '@hookform/resolvers/zod';
+import { Mic, Monitor, Upload } from 'lucide-react';
+import { useEffect, useState } from 'react';
 import { useForm } from 'react-hook-form';
-import { useState, useEffect } from 'react';
 import * as z from 'zod';
 import { Button } from '@/components/ui/button';
 import {
@@ -13,21 +14,23 @@ import {
 import {
   Form,
   FormControl,
-  FormDescription,
   FormField,
   FormItem,
   FormLabel,
   FormMessage,
 } from '@/components/ui/form';
-import { Input } from '@/components/ui/input';
-import { Textarea } from '@/components/ui/textarea';
 import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
+import { Textarea } from '@/components/ui/textarea';
 import { useToast } from '@/components/ui/use-toast';
-import { useAddSample, useProfile } from '@/lib/hooks/useProfiles';
+import { useAudioPlayer } from '@/lib/hooks/useAudioPlayer';
-import { useTranscription } from '@/lib/hooks/useTranscription';
 import { useAudioRecording } from '@/lib/hooks/useAudioRecording';
-import { Mic, Square, Upload } from 'lucide-react';
+import { useAddSample, useProfile } from '@/lib/hooks/useProfiles';
-import { formatAudioDuration } from '@/lib/utils/audio';
+import { useSystemAudioCapture } from '@/lib/hooks/useSystemAudioCapture';
+import { useTranscription } from '@/lib/hooks/useTranscription';
+import { isTauri } from '@/lib/tauri';
+import { AudioSampleRecording } from './AudioSampleRecording';
+import { AudioSampleSystem } from './AudioSampleSystem';
+import { AudioSampleUpload } from './AudioSampleUpload';
 
 const sampleSchema = z.object({
   file: z.instanceof(File, { message: 'Please select an audio file' }),
@@ -50,7 +53,8 @@ export function SampleUpload({ profileId, open, onOpenChange }: SampleUploadProp
   const transcribe = useTranscription();
   const { data: profile } = useProfile(profileId);
   const { toast } = useToast();
-  const [mode, setMode] = useState<'upload' | 'record'>('upload');
+  const [mode, setMode] = useState<'upload' | 'record' | 'system'>('upload');
+  const { isPlaying, playPause, cleanup: cleanupAudio } = useAudioPlayer();
 
   const form = useForm<SampleFormValues>({
     resolver: zodResolver(sampleSchema),
@@ -69,12 +73,16 @@ export function SampleUpload({ profileId, open, onOpenChange }: SampleUploadProp
     stopRecording,
     cancelRecording,
   } = useAudioRecording({
-    maxDurationSeconds: 30,
+    maxDurationSeconds: 29,
-    onRecordingComplete: (blob) => {
+    onRecordingComplete: (blob, recordedDuration) => {
       // Convert blob to File object
       const file = new File([blob], `recording-${Date.now()}.webm`, {
         type: blob.type || 'audio/webm',
-      });
+      }) as File & { recordedDuration?: number };
+      // Store the actual recorded duration to bypass metadata reading issues on Windows
+      if (recordedDuration !== undefined) {
+        file.recordedDuration = recordedDuration;
+      }
       form.setValue('file', file, { shouldValidate: true });
       toast({
         title: 'Recording complete',
@@ -83,6 +91,33 @@ export function SampleUpload({ profileId, open, onOpenChange }: SampleUploadProp
     },
   });
 
+  const {
+    isRecording: isSystemRecording,
+    duration: systemDuration,
+    error: systemRecordingError,
+    isSupported: isSystemAudioSupported,
+    startRecording: startSystemRecording,
+    stopRecording: stopSystemRecording,
+    cancelRecording: cancelSystemRecording,
+  } = useSystemAudioCapture({
+    maxDurationSeconds: 29,
+    onRecordingComplete: (blob, recordedDuration) => {
+      // Convert blob to File object
+      const file = new File([blob], `system-audio-${Date.now()}.wav`, {
+        type: blob.type || 'audio/wav',
+      }) as File & { recordedDuration?: number };
+      // Store the actual recorded duration to bypass metadata reading issues on Windows
+      if (recordedDuration !== undefined) {
+        file.recordedDuration = recordedDuration;
+      }
+      form.setValue('file', file, { shouldValidate: true });
+      toast({
+        title: 'System audio captured',
+        description: 'Audio has been captured successfully.',
+      });
+    },
+  });
+
   // Show recording errors
   useEffect(() => {
     if (recordingError) {
@@ -94,6 +129,17 @@ export function SampleUpload({ profileId, open, onOpenChange }: SampleUploadProp
     }
   }, [recordingError, toast]);
 
+  // Show system audio recording errors
+  useEffect(() => {
+    if (systemRecordingError) {
+      toast({
+        title: 'System audio capture error',
+        description: systemRecordingError,
+        variant: 'destructive',
+      });
+    }
+  }, [systemRecordingError, toast]);
+
   async function handleTranscribe() {
     const file = form.getValues('file');
     if (!file) {
@@ -110,11 +156,6 @@ export function SampleUpload({ profileId, open, onOpenChange }: SampleUploadProp
       const result = await transcribe.mutateAsync({ file, language });
 
       form.setValue('referenceText', result.text, { shouldValidate: true });
-
-      toast({
-        title: 'Transcription complete',
-        description: 'Audio has been transcribed successfully.',
-      });
     } catch (error) {
       toast({
         title: 'Transcription failed',
@@ -154,14 +195,27 @@ export function SampleUpload({ profileId, open, onOpenChange }: SampleUploadProp
       if (isRecording) {
         cancelRecording();
       }
+      if (isSystemRecording) {
+        cancelSystemRecording();
+      }
+      cleanupAudio();
     }
     onOpenChange(newOpen);
   }
 
   function handleCancelRecording() {
-    cancelRecording();
+    if (mode === 'record') {
-    // Reset file field by clearing the input
+      cancelRecording();
+    } else if (mode === 'system') {
+      cancelSystemRecording();
+    }
     form.resetField('file');
+    cleanupAudio();
+  }
+
+  function handlePlayPause() {
+    const file = form.getValues('file');
+    playPause(file);
   }
 
   return (
@@ -176,58 +230,40 @@ export function SampleUpload({ profileId, open, onOpenChange }: SampleUploadProp
 
         <Form {...form}>
           <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
-            <Tabs value={mode} onValueChange={(v) => setMode(v as 'upload' | 'record')}>
+            <Tabs value={mode} onValueChange={(v) => setMode(v as 'upload' | 'record' | 'system')}>
-              <TabsList className="grid w-full grid-cols-2">
+              <TabsList
+                className={`grid w-full ${isTauri() && isSystemAudioSupported ? 'grid-cols-3' : 'grid-cols-2'}`}
+              >
                 <TabsTrigger value="upload" className="flex items-center gap-2">
-                  <Upload className="h-4 w-4" />
+                  <Upload className="h-4 w-4 shrink-0" />
                   Upload
                 </TabsTrigger>
                 <TabsTrigger value="record" className="flex items-center gap-2">
-                  <Mic className="h-4 w-4" />
+                  <Mic className="h-4 w-4 shrink-0" />
                   Record
                 </TabsTrigger>
+                {isTauri() && isSystemAudioSupported && (
+                  <TabsTrigger value="system" className="flex items-center gap-2">
+                    <Monitor className="h-4 w-4 shrink-0" />
+                    System Audio
+                  </TabsTrigger>
+                )}
               </TabsList>
 
               <TabsContent value="upload" className="space-y-4">
                 <FormField
                   control={form.control}
                   name="file"
-                  render={({ field: { onChange, value, ...field } }) => (
+                  render={({ field: { onChange, name } }) => (
-                    <FormItem>
+                    <AudioSampleUpload
-                      <FormLabel>Audio File</FormLabel>
+                      file={selectedFile}
-                      <FormControl>
+                      onFileChange={onChange}
-                        <div className="flex items-center gap-2">
+                      onTranscribe={handleTranscribe}
-                          <Input
+                      onPlayPause={handlePlayPause}
-                            type="file"
+                      isPlaying={isPlaying}
-                            accept="audio/*"
+                      isTranscribing={transcribe.isPending}
-                            onChange={(e) => {
+                      fieldName={name}
-                              const file = e.target.files?.[0];
+                    />
-                              if (file) {
-                                onChange(file);
-                              }
-                            }}
-                            {...field}
-                          />
-                          {selectedFile && (
-                            <Button
-                              type="button"
-                              variant="outline"
-                              onClick={handleTranscribe}
-                              disabled={transcribe.isPending}
-                              className="flex items-center gap-2"
-                            >
-                              <Mic className="h-4 w-4" />
-                              {transcribe.isPending ? 'Transcribing...' : 'Transcribe'}
-                            </Button>
-                          )}
-                        </div>
-                      </FormControl>
-                      <FormDescription>
-                        Supported formats: WAV, MP3, M4A. Click "Transcribe" to automatically
-                        extract text from the audio.
-                      </FormDescription>
-                      <FormMessage />
-                    </FormItem>
                   )}
                 />
               </TabsContent>
@@ -237,94 +273,44 @@ export function SampleUpload({ profileId, open, onOpenChange }: SampleUploadProp
                   control={form.control}
                   name="file"
                   render={() => (
-                    <FormItem>
+                    <AudioSampleRecording
-                      <FormLabel>Record Audio</FormLabel>
+                      file={selectedFile}
-                      <FormControl>
+                      isRecording={isRecording}
-                        <div className="space-y-4">
+                      duration={duration}
-                          {!isRecording && !selectedFile && (
+                      onStart={startRecording}
-                            <div className="flex flex-col items-center gap-4 p-6 border-2 border-dashed rounded-lg">
+                      onStop={stopRecording}
-                              <Button
+                      onCancel={handleCancelRecording}
-                                type="button"
+                      onTranscribe={handleTranscribe}
-                                onClick={startRecording}
+                      onPlayPause={handlePlayPause}
-                                size="lg"
+                      isPlaying={isPlaying}
-                                className="flex items-center gap-2"
+                      isTranscribing={transcribe.isPending}
-                              >
+                    />
-                                <Mic className="h-5 w-5" />
-                                Start Recording
-                              </Button>
-                              <p className="text-sm text-muted-foreground text-center">
-                                Click to start recording. Maximum duration: 30 seconds.
-                              </p>
-                            </div>
-                          )}
-
-                          {isRecording && (
-                            <div className="flex flex-col items-center gap-4 p-6 border-2 border-destructive rounded-lg bg-destructive/5">
-                              <div className="flex items-center gap-4">
-                                <div className="flex items-center gap-2">
-                                  <div className="h-3 w-3 rounded-full bg-destructive animate-pulse" />
-                                  <span className="text-lg font-mono font-semibold">
-                                    {formatAudioDuration(duration)}
-                                  </span>
-                                </div>
-                              </div>
-                              <Button
-                                type="button"
-                                onClick={stopRecording}
-                                variant="destructive"
-                                className="flex items-center gap-2"
-                              >
-                                <Square className="h-4 w-4" />
-                                Stop Recording
-                              </Button>
-                              <p className="text-sm text-muted-foreground text-center">
-                                Recording in progress... ({formatAudioDuration(30 - duration)}{' '}
-                                remaining)
-                              </p>
-                            </div>
-                          )}
-
-                          {selectedFile && !isRecording && (
-                            <div className="flex flex-col items-center gap-4 p-6 border-2 border-primary rounded-lg bg-primary/5">
-                              <div className="flex items-center gap-2">
-                                <Mic className="h-5 w-5 text-primary" />
-                                <span className="font-medium">Recording complete</span>
-                              </div>
-                              <p className="text-sm text-muted-foreground">
-                                File: {selectedFile.name}
-                              </p>
-                              <div className="flex gap-2">
-                                <Button
-                                  type="button"
-                                  variant="outline"
-                                  onClick={handleTranscribe}
-                                  disabled={transcribe.isPending}
-                                  className="flex items-center gap-2"
-                                >
-                                  <Mic className="h-4 w-4" />
-                                  {transcribe.isPending ? 'Transcribing...' : 'Transcribe'}
-                                </Button>
-                                <Button
-                                  type="button"
-                                  variant="outline"
-                                  onClick={handleCancelRecording}
-                                  className="flex items-center gap-2"
-                                >
-                                  Record Again
-                                </Button>
-                              </div>
-                            </div>
-                          )}
-                        </div>
-                      </FormControl>
-                      <FormDescription>
-                        Record audio directly from your microphone. Maximum duration is 30 seconds.
-                      </FormDescription>
-                      <FormMessage />
-                    </FormItem>
                   )}
                 />
               </TabsContent>
+
+              {isTauri() && isSystemAudioSupported && (
+                <TabsContent value="system" className="space-y-4">
+                  <FormField
+                    control={form.control}
+                    name="file"
+                    render={() => (
+                      <AudioSampleSystem
+                        file={selectedFile}
+                        isRecording={isSystemRecording}
+                        duration={systemDuration}
+                        onStart={startSystemRecording}
+                        onStop={stopSystemRecording}
+                        onCancel={handleCancelRecording}
+                        onTranscribe={handleTranscribe}
+                        onPlayPause={handlePlayPause}
+                        isPlaying={isPlaying}
+                        isTranscribing={transcribe.isPending}
+                      />
+                    )}
+                  />
+                </TabsContent>
+              )}
             </Tabs>
 
             <FormField
@@ -340,9 +326,6 @@ export function SampleUpload({ profileId, open, onOpenChange }: SampleUploadProp
                       {...field}
                     />
                   </FormControl>
-                  <FormDescription>
-                    This should match exactly what is spoken in the audio file.
-                  </FormDescription>
                   <FormMessage />
                 </FormItem>
               )}

app/src/components/VoicesTab/VoicesTab.tsx

@@ -0,0 +1,234 @@
+import { useQuery, useQueryClient } from '@tanstack/react-query';
+import { Edit, MoreHorizontal, Plus, Trash2, Mic } from 'lucide-react';
+import { useMemo, useRef } from 'react';
+import { Button } from '@/components/ui/button';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from '@/components/ui/dropdown-menu';
+import { MultiSelect } from '@/components/ui/multi-select';
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from '@/components/ui/table';
+import { ProfileForm } from '@/components/VoiceProfiles/ProfileForm';
+import { apiClient } from '@/lib/api/client';
+import type { VoiceProfileResponse } from '@/lib/api/types';
+import { BOTTOM_SAFE_AREA_PADDING } from '@/lib/constants/ui';
+import { useHistory } from '@/lib/hooks/useHistory';
+import { useDeleteProfile, useProfileSamples, useProfiles } from '@/lib/hooks/useProfiles';
+import { cn } from '@/lib/utils/cn';
+import { usePlayerStore } from '@/stores/playerStore';
+import { useUIStore } from '@/stores/uiStore';
+
+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 scrollRef = useRef<HTMLDivElement>(null);
+  const audioUrl = usePlayerStore((state) => state.audioUrl);
+  const isPlayerVisible = !!audioUrl;
+
+  // 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;
+      });
+    }
+    return counts;
+  }, [historyData]);
+
+  // Get channel assignments for each profile
+  const { data: channelAssignments } = useQuery({
+    queryKey: ['profile-channels'],
+    queryFn: async () => {
+      if (!profiles) return {};
+      const assignments: Record<string, string[]> = {};
+      for (const profile of profiles) {
+        try {
+          const result = await apiClient.getProfileChannels(profile.id);
+          assignments[profile.id] = result.channel_ids;
+        } catch {
+          assignments[profile.id] = [];
+        }
+      }
+      return assignments;
+    },
+    enabled: !!profiles,
+  });
+
+  // Get all channels
+  const { data: channels } = useQuery({
+    queryKey: ['channels'],
+    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);
+      queryClient.invalidateQueries({ queryKey: ['profile-channels'] });
+    } catch (error) {
+      console.error('Failed to update channels:', error);
+    }
+  };
+
+  if (isLoading) {
+    return (
+      <div className="flex items-center justify-center h-full">
+        <div className="text-muted-foreground">Loading voices...</div>
+      </div>
+    );
+  }
+
+  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" />
+
+      {/* Fixed Header */}
+      <div className="absolute top-0 left-0 right-0 z-20">
+        <div className="flex items-center justify-between mb-6">
+          <h1 className="text-2xl font-bold">Voices</h1>
+          <Button onClick={() => setDialogOpen(true)}>
+            <Plus className="h-4 w-4 mr-2" />
+            New Voice
+          </Button>
+        </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>
+
+      <ProfileForm />
+    </div>
+  );
+}
+
+interface VoiceRowProps {
+  profile: VoiceProfileResponse;
+  generationCount: number;
+  channelIds: string[];
+  channels: Array<{ id: string; name: string; is_default: boolean }>;
+  onChannelChange: (channelIds: string[]) => void;
+  onEdit: () => void;
+  onDelete: () => void;
+}
+
+function VoiceRow({
+  profile,
+  generationCount,
+  channelIds,
+  channels,
+  onChannelChange,
+  onEdit,
+  onDelete,
+}: VoiceRowProps) {
+  const { data: samples } = useProfileSamples(profile.id);
+
+  return (
+    <TableRow className="cursor-pointer" onClick={onEdit}>
+      <TableCell>
+        <div className="flex items-center gap-2">
+          <div className="h-8 w-8 rounded-lg bg-muted flex items-center justify-center shrink-0">
+            <Mic className="h-4 w-4 text-muted-foreground" />
+          </div>
+          <div>
+            <div className="font-medium">{profile.name}</div>
+            {profile.description && (
+              <div className="text-sm text-muted-foreground">{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 onClick={(e) => e.stopPropagation()}>
+        <MultiSelect
+          options={channels.map((ch) => ({
+            value: ch.id,
+            label: `${ch.name}${ch.is_default ? ' (Default)' : ''}`,
+          }))}
+          value={channelIds}
+          onChange={onChannelChange}
+          placeholder="Select channels..."
+          className="min-w-[200px]"
+        />
+      </TableCell>
+      <TableCell onClick={(e) => e.stopPropagation()}>
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <Button variant="ghost" size="icon">
+              <MoreHorizontal className="h-4 w-4" />
+            </Button>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent>
+            <DropdownMenuItem onClick={onEdit}>
+              <Edit className="h-4 w-4 mr-2" />
+              Edit
+            </DropdownMenuItem>
+            <DropdownMenuItem onClick={onDelete} className="text-destructive">
+              <Trash2 className="h-4 w-4 mr-2" />
+              Delete
+            </DropdownMenuItem>
+          </DropdownMenuContent>
+        </DropdownMenu>
+      </TableCell>
+    </TableRow>
+  );
+}

app/src/components/ui/alert-dialog.tsx

@@ -0,0 +1,114 @@
+import * as AlertDialogPrimitive from '@radix-ui/react-alert-dialog';
+import * as React from 'react';
+import { cn } from '@/lib/utils/cn';
+import { buttonVariants } from './button';
+
+const AlertDialog = AlertDialogPrimitive.Root;
+
+const AlertDialogTrigger = AlertDialogPrimitive.Trigger;
+
+const AlertDialogPortal = AlertDialogPrimitive.Portal;
+
+const AlertDialogOverlay = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Overlay>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Overlay>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPrimitive.Overlay
+    className={cn(
+      'fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',
+      className,
+    )}
+    {...props}
+    ref={ref}
+  />
+));
+AlertDialogOverlay.displayName = AlertDialogPrimitive.Overlay.displayName;
+
+const AlertDialogContent = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Content>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPortal>
+    <AlertDialogOverlay />
+    <AlertDialogPrimitive.Content
+      ref={ref}
+      className={cn(
+        'fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg',
+        className,
+      )}
+      {...props}
+    />
+  </AlertDialogPortal>
+));
+AlertDialogContent.displayName = AlertDialogPrimitive.Content.displayName;
+
+const AlertDialogHeader = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
+  <div className={cn('flex flex-col space-y-2 text-center sm:text-left', className)} {...props} />
+);
+AlertDialogHeader.displayName = 'AlertDialogHeader';
+
+const AlertDialogFooter = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn('flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2', className)}
+    {...props}
+  />
+);
+AlertDialogFooter.displayName = 'AlertDialogFooter';
+
+const AlertDialogTitle = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Title>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Title>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPrimitive.Title
+    ref={ref}
+    className={cn('text-lg font-semibold', className)}
+    {...props}
+  />
+));
+AlertDialogTitle.displayName = AlertDialogPrimitive.Title.displayName;
+
+const AlertDialogDescription = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Description>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Description>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPrimitive.Description
+    ref={ref}
+    className={cn('text-sm text-muted-foreground', className)}
+    {...props}
+  />
+));
+AlertDialogDescription.displayName = AlertDialogPrimitive.Description.displayName;
+
+const AlertDialogAction = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Action>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Action>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPrimitive.Action ref={ref} className={cn(buttonVariants(), className)} {...props} />
+));
+AlertDialogAction.displayName = AlertDialogPrimitive.Action.displayName;
+
+const AlertDialogCancel = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Cancel>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Cancel>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPrimitive.Cancel
+    ref={ref}
+    className={cn(buttonVariants({ variant: 'outline' }), 'mt-2 sm:mt-0', className)}
+    {...props}
+  />
+));
+AlertDialogCancel.displayName = AlertDialogPrimitive.Cancel.displayName;
+
+export {
+  AlertDialog,
+  AlertDialogPortal,
+  AlertDialogOverlay,
+  AlertDialogTrigger,
+  AlertDialogContent,
+  AlertDialogHeader,
+  AlertDialogFooter,
+  AlertDialogTitle,
+  AlertDialogDescription,
+  AlertDialogAction,
+  AlertDialogCancel,
+};

app/src/components/ui/checkbox.tsx

@@ -1,33 +1,41 @@
 import * as React from 'react';
+import { Check } from 'lucide-react';
 import { cn } from '@/lib/utils/cn';
 
-export interface CheckboxProps extends React.InputHTMLAttributes<HTMLInputElement> {
+export interface CheckboxProps {
+  checked?: boolean;
   onCheckedChange?: (checked: boolean) => void;
+  disabled?: boolean;
+  className?: string;
+  id?: string;
 }
 
-const Checkbox = React.forwardRef<HTMLInputElement, CheckboxProps>(
+const Checkbox = React.forwardRef<HTMLButtonElement, CheckboxProps>(
-  ({ className, onCheckedChange, ...props }, ref) => {
+  ({ checked = false, onCheckedChange, disabled = false, className, id, ...props }, ref) => {
-    const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-      if (onCheckedChange) {
-        onCheckedChange(e.target.checked);
-      }
-      // Call original onChange if provided
-      if (props.onChange) {
-        props.onChange(e);
-      }
-    };
-
     return (
-      <input
+      <button
-        type="checkbox"
+        type="button"
+        ref={ref}
+        id={id}
+        role="checkbox"
+        aria-checked={checked}
+        disabled={disabled}
+        onClick={() => {
+          if (!disabled && onCheckedChange) {
+            onCheckedChange(!checked);
+          }
+        }}
         className={cn(
-          'h-4 w-4 rounded border-gray-300 text-primary focus:ring-2 focus:ring-primary focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
+          'h-4 w-4 rounded border-2 flex items-center justify-center shrink-0 transition-colors',
+          checked ? 'bg-accent border-accent' : 'border-muted-foreground/30',
+          disabled && 'opacity-50 cursor-not-allowed',
+          !disabled && 'cursor-pointer',
           className,
         )}
-        ref={ref}
-        onChange={handleChange}
         {...props}
-      />
+      >
+        {checked && <Check className="h-3 w-3 text-accent-foreground" />}
+      </button>
     );
   },
 );

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

@@ -0,0 +1,102 @@
+import * as React from 'react';
+import { ChevronDown, Check } from 'lucide-react';
+import { cn } from '@/lib/utils/cn';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuTrigger,
+} from '@/components/ui/dropdown-menu';
+import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
+
+export interface MultiSelectOption {
+  value: string;
+  label: string;
+}
+
+export interface MultiSelectProps {
+  options: MultiSelectOption[];
+  value: string[];
+  onChange: (value: string[]) => void;
+  placeholder?: string;
+  className?: string;
+}
+
+const MultiSelectCheckboxItem = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.CheckboxItem>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.CheckboxItem>
+>(({ className, children, checked, ...props }, ref) => (
+  <DropdownMenuPrimitive.CheckboxItem
+    ref={ref}
+    className={cn(
+      'relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-xs outline-none focus:bg-accent focus:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50',
+      className,
+    )}
+    checked={checked}
+    {...props}
+  >
+    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+      <DropdownMenuPrimitive.ItemIndicator>
+        <Check className="h-4 w-4" />
+      </DropdownMenuPrimitive.ItemIndicator>
+    </span>
+    {children}
+  </DropdownMenuPrimitive.CheckboxItem>
+));
+MultiSelectCheckboxItem.displayName = DropdownMenuPrimitive.CheckboxItem.displayName;
+
+export function MultiSelect({
+  options,
+  value,
+  onChange,
+  placeholder = 'Select...',
+  className,
+}: MultiSelectProps) {
+  const [open, setOpen] = React.useState(false);
+
+  const handleSelect = (optionValue: string) => {
+    const newValue = value.includes(optionValue)
+      ? value.filter((v) => v !== optionValue)
+      : [...value, optionValue];
+    onChange(newValue);
+  };
+
+  const displayText =
+    value.length === 0
+      ? placeholder
+      : value.length === 1
+        ? options.find((opt) => opt.value === value[0])?.label || placeholder
+        : `${value.length} selected`;
+
+  return (
+    <DropdownMenu open={open} onOpenChange={setOpen}>
+      <DropdownMenuTrigger asChild>
+        <button
+          type="button"
+          className={cn(
+            'flex h-8 w-full items-center justify-between rounded-full border border-border bg-card px-3 py-2 text-xs ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 hover:bg-background/50 transition-all',
+            className,
+          )}
+        >
+          <span className="line-clamp-1">{displayText}</span>
+          <ChevronDown className="h-4 w-4 opacity-50" />
+        </button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent
+        className="max-h-96 overflow-auto"
+        align="start"
+        onCloseAutoFocus={(e) => e.preventDefault()}
+      >
+        {options.map((option) => (
+          <MultiSelectCheckboxItem
+            key={option.value}
+            checked={value.includes(option.value)}
+            onSelect={() => handleSelect(option.value)}
+            onCheckedChange={() => handleSelect(option.value)}
+          >
+            {option.label}
+          </MultiSelectCheckboxItem>
+        ))}
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}

app/src/components/ui/popover.tsx

@@ -0,0 +1,28 @@
+import * as PopoverPrimitive from '@radix-ui/react-popover';
+import * as React from 'react';
+import { cn } from '@/lib/utils/cn';
+
+const Popover = PopoverPrimitive.Root;
+
+const PopoverTrigger = PopoverPrimitive.Trigger;
+
+const PopoverContent = React.forwardRef<
+  React.ElementRef<typeof PopoverPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content>
+>(({ className, align = 'center', sideOffset = 4, ...props }, ref) => (
+  <PopoverPrimitive.Portal>
+    <PopoverPrimitive.Content
+      ref={ref}
+      align={align}
+      sideOffset={sideOffset}
+      className={cn(
+        'z-50 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
+        className,
+      )}
+      {...props}
+    />
+  </PopoverPrimitive.Portal>
+));
+PopoverContent.displayName = PopoverPrimitive.Content.displayName;
+
+export { Popover, PopoverTrigger, PopoverContent };

app/src/components/ui/progress.tsx

@@ -12,7 +12,7 @@ const Progress = React.forwardRef<
     {...props}
   >
     <ProgressPrimitive.Indicator
-      className="h-full w-full flex-1 bg-primary transition-all"
+      className="h-full w-full flex-1 bg-accent transition-all"
       style={{ transform: `translateX(-${100 - (value || 0)}%)` }}
     />
   </ProgressPrimitive.Root>

app/src/components/ui/toaster.tsx

@@ -15,7 +15,7 @@ export function Toaster() {
     <ToastProvider>
       {toasts.map(({ id, title, description, action, ...props }) => (
         <Toast key={id} {...props}>
-          <div className="grid gap-1">
+          <div className="grid gap-1 flex-1 min-w-0">
             {title && <ToastTitle>{title}</ToastTitle>}
             {description && <ToastDescription>{description}</ToastDescription>}
           </div>

app/src/global.d.ts

@@ -0,0 +1,3 @@
+interface Window {
+  __voiceboxServerStartedByApp?: boolean;
+}

app/src/hooks/useAutoUpdater.ts

@@ -1,6 +1,6 @@
-import { useEffect, useState } from 'react';
-import { check, type Update } from '@tauri-apps/plugin-updater';
 import { relaunch } from '@tauri-apps/plugin-process';
+import { check, type Update } from '@tauri-apps/plugin-updater';
+import { useCallback, useEffect, useState } from 'react';
 
 export interface UpdateStatus {
   checking: boolean;
@@ -8,9 +8,18 @@ export interface UpdateStatus {
   version?: string;
   downloading: boolean;
   installing: boolean;
+  readyToInstall: boolean;
   error?: string;
+  downloadProgress?: number; // 0-100 percentage
+  downloadedBytes?: number;
+  totalBytes?: number;
 }
 
+// Check if we're on Windows (NSIS installer handles restart automatically)
+const isWindows = () => {
+  return navigator.userAgent.includes('Windows');
+};
+
 const isTauri = () => {
   return '__TAURI_INTERNALS__' in window;
 };
@@ -21,11 +30,12 @@ export function useAutoUpdater(checkOnMount = false) {
     available: false,
     downloading: false,
     installing: false,
+    readyToInstall: false,
   });
 
   const [update, setUpdate] = useState<Update | null>(null);
 
-  const checkForUpdates = async () => {
+  const checkForUpdates = useCallback(async () => {
     if (!isTauri()) {
       return;
     }
@@ -43,6 +53,7 @@ export function useAutoUpdater(checkOnMount = false) {
           version: foundUpdate.version,
           downloading: false,
           installing: false,
+          readyToInstall: false,
         });
       } else {
         setStatus({
@@ -50,6 +61,7 @@ export function useAutoUpdater(checkOnMount = false) {
           available: false,
           downloading: false,
           installing: false,
+          readyToInstall: false,
         });
       }
     } catch (error) {
@@ -58,41 +70,93 @@ export function useAutoUpdater(checkOnMount = false) {
         available: false,
         downloading: false,
         installing: false,
+        readyToInstall: false,
         error: error instanceof Error ? error.message : 'Failed to check for updates',
       });
     }
-  };
+  }, []);
 
+  // Download the update (but don't install yet)
   const downloadAndInstall = async () => {
     if (!update || !isTauri()) return;
 
     try {
       setStatus((prev) => ({ ...prev, downloading: true, error: undefined }));
 
-      await update.downloadAndInstall((event) => {
+      let downloadedBytes = 0;
+      let totalBytes = 0;
+
+      // Just download the update
+      await update.download((event) => {
         switch (event.event) {
           case 'Started':
-            setStatus((prev) => ({ ...prev, downloading: true }));
+            totalBytes = event.data.contentLength || 0;
+            downloadedBytes = 0;
+            setStatus((prev) => ({
+              ...prev,
+              downloading: true,
+              totalBytes,
+              downloadedBytes: 0,
+              downloadProgress: 0,
+            }));
             break;
-          case 'Progress':
+          case 'Progress': {
-            console.log(`Downloaded ${event.data.chunkLength} bytes`);
+            downloadedBytes += event.data.chunkLength;
+            const progress =
+              totalBytes > 0 ? Math.round((downloadedBytes / totalBytes) * 100) : undefined;
+            setStatus((prev) => ({
+              ...prev,
+              downloadedBytes,
+              downloadProgress: progress,
+            }));
             break;
+          }
           case 'Finished':
             setStatus((prev) => ({
               ...prev,
               downloading: false,
-              installing: true,
+              readyToInstall: true,
+              downloadProgress: 100,
             }));
             break;
         }
       });
-
-      await relaunch();
     } catch (error) {
       setStatus((prev) => ({
         ...prev,
         downloading: false,
         installing: false,
+        readyToInstall: false,
+        downloadProgress: undefined,
+        downloadedBytes: undefined,
+        totalBytes: undefined,
+        error: error instanceof Error ? error.message : 'Failed to download update',
+      }));
+    }
+  };
+
+  // Install the downloaded update and restart the app
+  const restartAndInstall = async () => {
+    if (!update || !isTauri()) return;
+
+    try {
+      setStatus((prev) => ({ ...prev, installing: true, error: undefined }));
+
+      // Install the update
+      await update.install();
+
+      // On Windows with NSIS, the installer handles the restart automatically.
+      // The process will be killed by the NSIS installer, so we won't reach here.
+      // On macOS/Linux, we need to manually relaunch.
+      if (!isWindows()) {
+        await relaunch();
+      }
+      // If we're on Windows and somehow still running, the NSIS installer
+      // should have already handled everything. Just wait for the process to end.
+    } catch (error) {
+      setStatus((prev) => ({
+        ...prev,
+        installing: false,
         error: error instanceof Error ? error.message : 'Failed to install update',
       }));
     }
@@ -102,11 +166,12 @@ export function useAutoUpdater(checkOnMount = false) {
     if (checkOnMount && isTauri()) {
       checkForUpdates();
     }
-  }, [checkOnMount]);
+  }, [checkOnMount, checkForUpdates]);
 
   return {
     status,
     checkForUpdates,
     downloadAndInstall,
+    restartAndInstall,
   };
 }

app/src/index.css

@@ -126,3 +126,32 @@
     letter-spacing: 0.1em;
   }
 }
+
+@keyframes fadeInScale {
+  from {
+    opacity: 0;
+    transform: scale(0.8);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+.animate-fade-in-scale {
+  animation: fadeInScale 0.5s ease-out forwards;
+}
+
+.animate-fade-in-delayed {
+  animation: fadeIn 0.5s ease-out 0.15s forwards;
+  opacity: 0;
+}

app/src/lib/api/client.ts

@@ -12,6 +12,15 @@ import type {
   HealthResponse,
   ModelStatusListResponse,
   ModelDownloadRequest,
+  ActiveTasksResponse,
+  StoryCreate,
+  StoryResponse,
+  StoryDetailResponse,
+  StoryItemCreate,
+  StoryItemDetail,
+  StoryItemBatchUpdate,
+  StoryItemReorder,
+  StoryItemMove,
 } from './types';
 
 class ApiClient {
@@ -109,6 +118,40 @@ class ApiClient {
     });
   }
 
+  async exportProfile(profileId: string): Promise<Blob> {
+    const url = `${this.getBaseUrl()}/profiles/${profileId}/export`;
+    const response = await fetch(url);
+
+    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();
+  }
+
+  async importProfile(file: File): Promise<VoiceProfileResponse> {
+    const url = `${this.getBaseUrl()}/profiles/import`;
+    const formData = new FormData();
+    formData.append('file', file);
+
+    const response = await fetch(url, {
+      method: 'POST',
+      body: formData,
+    });
+
+    if (!response.ok) {
+      const error = await response.json().catch(() => ({
+        detail: response.statusText,
+      }));
+      throw new Error(error.detail || `HTTP error! status: ${response.status}`);
+    }
+
+    return response.json();
+  }
+
   // Generation
   async generateSpeech(data: GenerationRequest): Promise<GenerationResponse> {
     return this.request<GenerationResponse>('/generate', {
@@ -141,11 +184,63 @@ class ApiClient {
     });
   }
 
+  async exportGeneration(generationId: string): Promise<Blob> {
+    const url = `${this.getBaseUrl()}/history/${generationId}/export`;
+    const response = await fetch(url);
+
+    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();
+  }
+
+  async exportGenerationAudio(generationId: string): Promise<Blob> {
+    const url = `${this.getBaseUrl()}/history/${generationId}/export-audio`;
+    const response = await fetch(url);
+
+    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();
+  }
+
+  async importGeneration(file: File): Promise<{ id: string; profile_id: string; profile_name: string; text: string; message: string }> {
+    const url = `${this.getBaseUrl()}/history/import`;
+    const formData = new FormData();
+    formData.append('file', file);
+
+    const response = await fetch(url, {
+      method: 'POST',
+      body: formData,
+    });
+
+    if (!response.ok) {
+      const error = await response.json().catch(() => ({
+        detail: response.statusText,
+      }));
+      throw new Error(error.detail || `HTTP error! status: ${response.status}`);
+    }
+
+    return response.json();
+  }
+
   // Audio
   getAudioUrl(audioId: string): string {
     return `${this.getBaseUrl()}/audio/${audioId}`;
   }
 
+  getSampleUrl(sampleId: string): string {
+    return `${this.getBaseUrl()}/samples/${sampleId}`;
+  }
+
   // Transcription
   async transcribeAudio(file: File, language?: 'en' | 'zh'): Promise<TranscriptionResponse> {
     const formData = new FormData();
@@ -181,6 +276,176 @@ class ApiClient {
       body: JSON.stringify({ model_name: modelName } as ModelDownloadRequest),
     });
   }
+
+  async deleteModel(modelName: string): Promise<{ message: string }> {
+    return this.request<{ message: string }>(`/models/${modelName}`, {
+      method: 'DELETE',
+    });
+  }
+
+  // Task Management
+  async getActiveTasks(): Promise<ActiveTasksResponse> {
+    return this.request<ActiveTasksResponse>('/tasks/active');
+  }
+
+  // Audio Channels
+  async listChannels(): Promise<
+    Array<{
+      id: string;
+      name: string;
+      is_default: boolean;
+      device_ids: string[];
+      created_at: string;
+    }>
+  > {
+    return this.request('/channels');
+  }
+
+  async createChannel(data: {
+    name: string;
+    device_ids: string[];
+  }): Promise<{
+    id: string;
+    name: string;
+    is_default: boolean;
+    device_ids: string[];
+    created_at: string;
+  }> {
+    return this.request('/channels', {
+      method: 'POST',
+      body: JSON.stringify(data),
+    });
+  }
+
+  async updateChannel(
+    channelId: string,
+    data: {
+      name?: string;
+      device_ids?: string[];
+    },
+  ): Promise<{
+    id: string;
+    name: string;
+    is_default: boolean;
+    device_ids: string[];
+    created_at: string;
+  }> {
+    return this.request(`/channels/${channelId}`, {
+      method: 'PUT',
+      body: JSON.stringify(data),
+    });
+  }
+
+  async deleteChannel(channelId: string): Promise<{ message: string }> {
+    return this.request(`/channels/${channelId}`, {
+      method: 'DELETE',
+    });
+  }
+
+  async getChannelVoices(channelId: string): Promise<{ profile_ids: string[] }> {
+    return this.request(`/channels/${channelId}/voices`);
+  }
+
+  async setChannelVoices(
+    channelId: string,
+    profileIds: string[],
+  ): Promise<{ message: string }> {
+    return this.request(`/channels/${channelId}/voices`, {
+      method: 'PUT',
+      body: JSON.stringify({ profile_ids: profileIds }),
+    });
+  }
+
+  async getProfileChannels(profileId: string): Promise<{ channel_ids: string[] }> {
+    return this.request(`/profiles/${profileId}/channels`);
+  }
+
+  async setProfileChannels(
+    profileId: string,
+    channelIds: string[],
+  ): Promise<{ message: string }> {
+    return this.request(`/profiles/${profileId}/channels`, {
+      method: 'PUT',
+      body: JSON.stringify({ channel_ids: channelIds }),
+    });
+  }
+
+  // Stories
+  async listStories(): Promise<StoryResponse[]> {
+    return this.request<StoryResponse[]>('/stories');
+  }
+
+  async createStory(data: StoryCreate): Promise<StoryResponse> {
+    return this.request<StoryResponse>('/stories', {
+      method: 'POST',
+      body: JSON.stringify(data),
+    });
+  }
+
+  async getStory(storyId: string): Promise<StoryDetailResponse> {
+    return this.request<StoryDetailResponse>(`/stories/${storyId}`);
+  }
+
+  async updateStory(storyId: string, data: StoryCreate): Promise<StoryResponse> {
+    return this.request<StoryResponse>(`/stories/${storyId}`, {
+      method: 'PUT',
+      body: JSON.stringify(data),
+    });
+  }
+
+  async deleteStory(storyId: string): Promise<void> {
+    await this.request<void>(`/stories/${storyId}`, {
+      method: 'DELETE',
+    });
+  }
+
+  async addStoryItem(storyId: string, data: StoryItemCreate): Promise<StoryItemDetail> {
+    return this.request<StoryItemDetail>(`/stories/${storyId}/items`, {
+      method: 'POST',
+      body: JSON.stringify(data),
+    });
+  }
+
+  async removeStoryItem(storyId: string, generationId: string): Promise<void> {
+    await this.request<void>(`/stories/${storyId}/items/${generationId}`, {
+      method: 'DELETE',
+    });
+  }
+
+  async updateStoryItemTimes(storyId: string, data: StoryItemBatchUpdate): Promise<void> {
+    await this.request<void>(`/stories/${storyId}/items/times`, {
+      method: 'PUT',
+      body: JSON.stringify(data),
+    });
+  }
+
+  async reorderStoryItems(storyId: string, data: StoryItemReorder): Promise<StoryItemDetail[]> {
+    return this.request<StoryItemDetail[]>(`/stories/${storyId}/items/reorder`, {
+      method: 'PUT',
+      body: JSON.stringify(data),
+    });
+  }
+
+  async moveStoryItem(storyId: string, generationId: string, data: StoryItemMove): Promise<StoryItemDetail> {
+    return this.request<StoryItemDetail>(`/stories/${storyId}/items/${generationId}/move`, {
+      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);
+
+    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

@@ -105,3 +105,86 @@ export interface ModelStatusListResponse {
 export interface ModelDownloadRequest {
   model_name: string;
 }
+
+export interface ActiveDownloadTask {
+  model_name: string;
+  status: string;
+  started_at: string;
+}
+
+export interface ActiveGenerationTask {
+  task_id: string;
+  profile_id: string;
+  text_preview: string;
+  started_at: string;
+}
+
+export interface ActiveTasksResponse {
+  downloads: ActiveDownloadTask[];
+  generations: ActiveGenerationTask[];
+}
+
+export interface StoryCreate {
+  name: string;
+  description?: string;
+}
+
+export interface StoryResponse {
+  id: string;
+  name: string;
+  description?: string;
+  created_at: string;
+  updated_at: string;
+  item_count: number;
+}
+
+export interface StoryItemDetail {
+  id: string;
+  story_id: string;
+  generation_id: string;
+  start_time_ms: number;
+  track: number;
+  created_at: string;
+  profile_id: string;
+  profile_name: string;
+  text: string;
+  language: string;
+  audio_path: string;
+  duration: number;
+  seed?: number;
+  instruct?: string;
+  generation_created_at: string;
+}
+
+export interface StoryDetailResponse {
+  id: string;
+  name: string;
+  description?: string;
+  created_at: string;
+  updated_at: string;
+  items: StoryItemDetail[];
+}
+
+export interface StoryItemCreate {
+  generation_id: string;
+  start_time_ms?: number;
+  track?: number;
+}
+
+export interface StoryItemUpdateTime {
+  generation_id: string;
+  start_time_ms: number;
+}
+
+export interface StoryItemBatchUpdate {
+  updates: StoryItemUpdateTime[];
+}
+
+export interface StoryItemReorder {
+  generation_ids: string[];
+}
+
+export interface StoryItemMove {
+  start_time_ms: number;
+  track: number;
+}

app/src/lib/constants/languages.ts

@@ -0,0 +1,26 @@
+/**
+ * Supported languages for Qwen3-TTS
+ * Based on: https://github.com/QwenLM/Qwen3-TTS
+ */
+
+export const SUPPORTED_LANGUAGES = {
+  zh: 'Chinese',
+  en: 'English',
+  ja: 'Japanese',
+  ko: 'Korean',
+  de: 'German',
+  fr: 'French',
+  ru: 'Russian',
+  pt: 'Portuguese',
+  es: 'Spanish',
+  it: 'Italian',
+} as const;
+
+export type LanguageCode = keyof typeof SUPPORTED_LANGUAGES;
+
+export const LANGUAGE_CODES = Object.keys(SUPPORTED_LANGUAGES) as LanguageCode[];
+
+export const LANGUAGE_OPTIONS = LANGUAGE_CODES.map((code) => ({
+  value: code,
+  label: SUPPORTED_LANGUAGES[code],
+}));

app/src/lib/constants/ui.ts

@@ -0,0 +1,15 @@
+/**
+ * UI layout constants for safe area padding
+ */
+
+/**
+ * Top safe area padding - height of the drag region bar
+ * Corresponds to Tailwind's pt-12 (3rem / 48px)
+ */
+export const TOP_SAFE_AREA_PADDING = 'pt-12';
+
+/**
+ * Bottom safe area padding - height of the audio player
+ * Corresponds to Tailwind's pb-32 (8rem / 128px)
+ */
+export const BOTTOM_SAFE_AREA_PADDING = 'pb-32';

app/src/lib/hooks/.gitkeep

@@ -1 +0,0 @@
-# React Query hooks will be placed here

app/src/lib/hooks/useAudioPlayer.ts

@@ -0,0 +1,66 @@
+import { useRef, useState } from 'react';
+import { useToast } from '@/components/ui/use-toast';
+
+export function useAudioPlayer() {
+  const [isPlaying, setIsPlaying] = useState(false);
+  const audioRef = useRef<HTMLAudioElement | null>(null);
+  const { toast } = useToast();
+
+  const playPause = (file: File | null | undefined) => {
+    if (!file) return;
+
+    if (audioRef.current) {
+      if (isPlaying) {
+        audioRef.current.pause();
+        setIsPlaying(false);
+      } else {
+        audioRef.current.play();
+        setIsPlaying(true);
+      }
+    } else {
+      const audio = new Audio(URL.createObjectURL(file));
+      audioRef.current = audio;
+
+      audio.addEventListener('ended', () => {
+        setIsPlaying(false);
+        if (audioRef.current) {
+          URL.revokeObjectURL(audioRef.current.src);
+        }
+        audioRef.current = null;
+      });
+
+      audio.addEventListener('error', () => {
+        setIsPlaying(false);
+        toast({
+          title: 'Playback error',
+          description: 'Failed to play audio file',
+          variant: 'destructive',
+        });
+        if (audioRef.current) {
+          URL.revokeObjectURL(audioRef.current.src);
+        }
+        audioRef.current = null;
+      });
+
+      audio.play();
+      setIsPlaying(true);
+    }
+  };
+
+  const cleanup = () => {
+    if (audioRef.current) {
+      audioRef.current.pause();
+      if (audioRef.current.src.startsWith('blob:')) {
+        URL.revokeObjectURL(audioRef.current.src);
+      }
+      audioRef.current = null;
+    }
+    setIsPlaying(false);
+  };
+
+  return {
+    isPlaying,
+    playPause,
+    cleanup,
+  };
+}

app/src/lib/hooks/useAudioRecording.ts

@@ -1,13 +1,14 @@
-import { useState, useRef, useCallback, useEffect } from 'react';
+import { useCallback, useEffect, useRef, useState } from 'react';
 import { isTauri } from '@/lib/tauri';
+import { convertToWav } from '@/lib/utils/audio';
 
 interface UseAudioRecordingOptions {
   maxDurationSeconds?: number;
-  onRecordingComplete?: (blob: Blob) => void;
+  onRecordingComplete?: (blob: Blob, duration?: number) => void;
 }
 
 export function useAudioRecording({
-  maxDurationSeconds = 30,
+  maxDurationSeconds = 29,
   onRecordingComplete,
 }: UseAudioRecordingOptions = {}) {
   const [isRecording, setIsRecording] = useState(false);
@@ -85,9 +86,26 @@ export function useAudioRecording({
         }
       };
 
-      mediaRecorder.onstop = () => {
+      mediaRecorder.onstop = async () => {
-        const blob = new Blob(chunksRef.current, { type: 'audio/webm' });
+        const webmBlob = new Blob(chunksRef.current, { type: 'audio/webm' });
-        onRecordingComplete?.(blob);
+
+        // 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
         streamRef.current?.getTracks().forEach((track) => {

app/src/lib/hooks/useGenerationForm.ts

@@ -0,0 +1,122 @@
+import { zodResolver } from '@hookform/resolvers/zod';
+import { useState } from 'react';
+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 { 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';
+
+const generationSchema = z.object({
+  text: z.string().min(1, 'Text is required').max(5000),
+  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(),
+});
+
+export type GenerationFormValues = z.infer<typeof generationSchema>;
+
+interface UseGenerationFormOptions {
+  onSuccess?: (generationId: string) => void;
+  defaultValues?: Partial<GenerationFormValues>;
+}
+
+export function useGenerationForm(options: UseGenerationFormOptions = {}) {
+  const { toast } = useToast();
+  const generation = useGeneration();
+  const setAudio = usePlayerStore((state) => state.setAudio);
+  const setIsGenerating = useGenerationStore((state) => state.setIsGenerating);
+  const [downloadingModelName, setDownloadingModelName] = useState<string | null>(null);
+  const [downloadingDisplayName, setDownloadingDisplayName] = useState<string | null>(null);
+
+  useModelDownloadToast({
+    modelName: downloadingModelName || '',
+    displayName: downloadingDisplayName || '',
+    enabled: !!downloadingModelName,
+  });
+
+  const form = useForm<GenerationFormValues>({
+    resolver: zodResolver(generationSchema),
+    defaultValues: {
+      text: '',
+      language: 'en',
+      seed: undefined,
+      modelSize: '1.7B',
+      instruct: '',
+      ...options.defaultValues,
+    },
+  });
+
+  async function handleSubmit(
+    data: GenerationFormValues,
+    selectedProfileId: string | null,
+  ): Promise<void> {
+    if (!selectedProfileId) {
+      toast({
+        title: 'No profile selected',
+        description: 'Please select a voice profile from the cards above.',
+        variant: 'destructive',
+      });
+      return;
+    }
+
+    try {
+      setIsGenerating(true);
+
+      const modelName = `qwen-tts-${data.modelSize}`;
+      const displayName = data.modelSize === '1.7B' ? 'Qwen TTS 1.7B' : 'Qwen TTS 0.6B';
+
+      try {
+        const modelStatus = await apiClient.getModelStatus();
+        const model = modelStatus.models.find((m) => m.model_name === modelName);
+
+        if (model && !model.downloaded) {
+          setDownloadingModelName(modelName);
+          setDownloadingDisplayName(displayName);
+        }
+      } catch (error) {
+        console.error('Failed to check model status:', error);
+      }
+
+      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,
+      });
+
+      toast({
+        title: 'Generation complete!',
+        description: `Audio generated (${result.duration.toFixed(2)}s)`,
+      });
+
+      const audioUrl = apiClient.getAudioUrl(result.id);
+      setAudio(audioUrl, result.id, selectedProfileId, data.text.substring(0, 50));
+
+      form.reset();
+      options.onSuccess?.(result.id);
+    } catch (error) {
+      toast({
+        title: 'Generation failed',
+        description: error instanceof Error ? error.message : 'Failed to generate audio',
+        variant: 'destructive',
+      });
+    } finally {
+      setIsGenerating(false);
+      setDownloadingModelName(null);
+      setDownloadingDisplayName(null);
+    }
+  }
+
+  return {
+    form,
+    handleSubmit,
+    isPending: generation.isPending,
+  };
+}

app/src/lib/hooks/useHistory.ts

@@ -1,6 +1,7 @@
 import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
 import { apiClient } from '@/lib/api/client';
 import type { HistoryQuery } from '@/lib/api/types';
+import { isTauri } from '@/lib/tauri';
 
 export function useHistory(query?: HistoryQuery) {
   return useQuery({
@@ -27,3 +28,130 @@ export function useDeleteGeneration() {
     },
   });
 }
+
+export function useExportGeneration() {
+  return useMutation({
+    mutationFn: async ({ generationId, text }: { generationId: string; text: string }) => {
+      const blob = await apiClient.exportGeneration(generationId);
+      
+      // Create safe filename from text
+      const safeText = text.substring(0, 30).replace(/[^a-z0-9]/gi, '-').toLowerCase();
+      const filename = `generation-${safeText}.voicebox.zip`;
+      
+      if (isTauri()) {
+        // Use Tauri's native save dialog
+        try {
+          const { save } = await import('@tauri-apps/plugin-dialog');
+          const filePath = await save({
+            defaultPath: filename,
+            filters: [
+              {
+                name: 'Voicebox Generation',
+                extensions: ['voicebox.zip', 'zip'],
+              },
+            ],
+          });
+          
+          if (filePath) {
+            // Write file using Tauri's filesystem API
+            const { writeBinaryFile } = await import('@tauri-apps/plugin-fs');
+            const arrayBuffer = await blob.arrayBuffer();
+            await writeBinaryFile(filePath, new Uint8Array(arrayBuffer));
+          }
+        } catch (error) {
+          console.error('Failed to use Tauri dialog, falling back to browser download:', error);
+          // Fall back to browser download if Tauri dialog fails
+          const url = window.URL.createObjectURL(blob);
+          const a = document.createElement('a');
+          a.href = url;
+          a.download = filename;
+          document.body.appendChild(a);
+          a.click();
+          window.URL.revokeObjectURL(url);
+          document.body.removeChild(a);
+        }
+      } else {
+        // Browser: trigger download
+        const url = window.URL.createObjectURL(blob);
+        const a = document.createElement('a');
+        a.href = url;
+        a.download = filename;
+        document.body.appendChild(a);
+        a.click();
+        window.URL.revokeObjectURL(url);
+        document.body.removeChild(a);
+      }
+      
+      return blob;
+    },
+  });
+}
+
+export function useExportGenerationAudio() {
+  return useMutation({
+    mutationFn: async ({ generationId, text }: { generationId: string; text: string }) => {
+      const blob = await apiClient.exportGenerationAudio(generationId);
+      
+      // Create safe filename from text
+      const safeText = text.substring(0, 30).replace(/[^a-z0-9]/gi, '-').toLowerCase();
+      const filename = `${safeText}.wav`;
+      
+      if (isTauri()) {
+        // Use Tauri's native save dialog
+        try {
+          const { save } = await import('@tauri-apps/plugin-dialog');
+          const filePath = await save({
+            defaultPath: filename,
+            filters: [
+              {
+                name: 'Audio File',
+                extensions: ['wav'],
+              },
+            ],
+          });
+          
+          if (filePath) {
+            // Write file using Tauri's filesystem API
+            const { writeBinaryFile } = await import('@tauri-apps/plugin-fs');
+            const arrayBuffer = await blob.arrayBuffer();
+            await writeBinaryFile(filePath, new Uint8Array(arrayBuffer));
+          }
+        } catch (error) {
+          console.error('Failed to use Tauri dialog, falling back to browser download:', error);
+          // Fall back to browser download if Tauri dialog fails
+          const url = window.URL.createObjectURL(blob);
+          const a = document.createElement('a');
+          a.href = url;
+          a.download = filename;
+          document.body.appendChild(a);
+          a.click();
+          window.URL.revokeObjectURL(url);
+          document.body.removeChild(a);
+        }
+      } else {
+        // Browser: trigger download
+        const url = window.URL.createObjectURL(blob);
+        const a = document.createElement('a');
+        a.href = url;
+        a.download = filename;
+        document.body.appendChild(a);
+        a.click();
+        window.URL.revokeObjectURL(url);
+        document.body.removeChild(a);
+      }
+      
+      return blob;
+    },
+  });
+}
+
+export function useImportGeneration() {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: (file: File) => apiClient.importGeneration(file),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['history'] });
+    },
+  });
+}

app/src/lib/hooks/useModelDownloadToast.tsx

@@ -0,0 +1,176 @@
+import { useEffect, useRef } from 'react';
+import { useToast } from '@/components/ui/use-toast';
+import { useServerStore } from '@/stores/serverStore';
+import { Progress } from '@/components/ui/progress';
+import { Loader2, CheckCircle2, XCircle } from 'lucide-react';
+import type { ModelProgress } from '@/lib/api/types';
+
+interface UseModelDownloadToastOptions {
+  modelName: string;
+  displayName: string;
+  enabled?: boolean;
+}
+
+/**
+ * Hook to show and update a toast notification with model download progress.
+ * Subscribes to Server-Sent Events for real-time progress updates.
+ */
+export function useModelDownloadToast({
+  modelName,
+  displayName,
+  enabled = false,
+}: UseModelDownloadToastOptions) {
+  const { toast } = useToast();
+  const serverUrl = useServerStore((state) => state.serverUrl);
+  const toastIdRef = useRef<string | null>(null);
+  const toastUpdateRef = useRef<
+    ((props: {
+      title?: React.ReactNode;
+      description?: React.ReactNode;
+      duration?: number;
+      variant?: 'default' | 'destructive';
+      open?: boolean;
+    }) => void) | null
+  >(null);
+  const eventSourceRef = useRef<EventSource | null>(null);
+
+  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 / Math.pow(k, i)).toFixed(1)} ${sizes[i]}`;
+  };
+
+  useEffect(() => {
+    if (!enabled || !serverUrl || !modelName) {
+      return;
+    }
+
+    // Create initial toast
+    const toastResult = toast({
+      title: displayName,
+      description: 'Starting download...',
+      duration: Infinity, // Don't auto-dismiss, we'll handle it manually
+    });
+    toastIdRef.current = toastResult.id;
+    toastUpdateRef.current = toastResult.update;
+
+    // Subscribe to progress updates via Server-Sent Events
+    const eventSource = new EventSource(`${serverUrl}/models/progress/${modelName}`);
+
+    eventSource.onmessage = (event) => {
+      try {
+        const progress = JSON.parse(event.data) as ModelProgress;
+
+        // Update toast with progress
+        if (toastIdRef.current && toastUpdateRef.current) {
+          const progressPercent = progress.total > 0 ? progress.progress : 0;
+          const progressText =
+            progress.total > 0
+              ? `${formatBytes(progress.current)} / ${formatBytes(progress.total)} (${progress.progress.toFixed(1)}%)`
+              : '';
+
+          // Determine status icon and text
+          let statusIcon: React.ReactNode = null;
+          let statusText = 'Processing...';
+
+          switch (progress.status) {
+            case 'complete':
+              statusIcon = <CheckCircle2 className="h-4 w-4 text-green-500" />;
+              statusText = 'Download complete';
+              break;
+            case 'error':
+              statusIcon = <XCircle className="h-4 w-4 text-destructive" />;
+              statusText = `Error: ${progress.error || 'Unknown error'}`;
+              break;
+            case 'downloading':
+              statusIcon = <Loader2 className="h-4 w-4 animate-spin" />;
+              statusText = progress.filename ? `Downloading ${progress.filename}...` : 'Downloading...';
+              break;
+            case 'extracting':
+              statusIcon = <Loader2 className="h-4 w-4 animate-spin" />;
+              statusText = 'Extracting...';
+              break;
+          }
+
+          toastUpdateRef.current({
+            title: (
+              <div className="flex items-center gap-2">
+                {statusIcon}
+                <span>{displayName}</span>
+              </div>
+            ),
+            description: (
+              <div className="space-y-2">
+                <div className="text-sm">{statusText}</div>
+                {progress.total > 0 && (
+                  <>
+                    <Progress value={progressPercent} className="h-2" />
+                    <div className="text-xs text-muted-foreground">{progressText}</div>
+                  </>
+                )}
+              </div>
+            ),
+            duration: progress.status === 'complete' ? 5000 : Infinity,
+            variant: progress.status === 'error' ? 'destructive' : 'default',
+          });
+
+          // Close connection and dismiss toast on completion or error
+          if (progress.status === 'complete' || progress.status === 'error') {
+            eventSource.close();
+            eventSourceRef.current = null;
+
+            // Auto-dismiss on completion after delay
+            if (progress.status === 'complete') {
+              setTimeout(() => {
+                if (toastIdRef.current && toastUpdateRef.current) {
+                  toastUpdateRef.current({
+                    open: false,
+                  });
+                  toastIdRef.current = null;
+                  toastUpdateRef.current = null;
+                }
+              }, 5000);
+            }
+          }
+        }
+      } catch (error) {
+        console.error('Error parsing progress event:', error);
+      }
+    };
+
+    eventSource.onerror = () => {
+      console.error('SSE error');
+      eventSource.close();
+      eventSourceRef.current = null;
+
+      // Show error toast
+      if (toastIdRef.current && toastUpdateRef.current) {
+        toastUpdateRef.current({
+          title: displayName,
+          description: 'Failed to track download progress',
+          variant: 'destructive',
+          duration: 5000,
+        });
+        toastIdRef.current = null;
+        toastUpdateRef.current = null;
+      }
+    };
+
+    eventSourceRef.current = eventSource;
+
+    // Cleanup on unmount or when disabled
+    return () => {
+      if (eventSourceRef.current) {
+        eventSourceRef.current.close();
+        eventSourceRef.current = null;
+      }
+      // Note: We don't dismiss the toast here as it might still be showing completion state
+    };
+  }, [enabled, serverUrl, modelName, displayName, toast]);
+
+  return {
+    isTracking: enabled && eventSourceRef.current !== null,
+  };
+}

app/src/lib/hooks/useProfiles.ts

@@ -1,6 +1,7 @@
 import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
 import { apiClient } from '@/lib/api/client';
 import type { VoiceProfileCreate } from '@/lib/api/types';
+import { isTauri } from '@/lib/tauri';
 
 export function useProfiles() {
   return useQuery({
@@ -96,3 +97,73 @@ export function useDeleteSample() {
     },
   });
 }
+
+export function useExportProfile() {
+  return useMutation({
+    mutationFn: async (profileId: string) => {
+      const blob = await apiClient.exportProfile(profileId);
+      
+      // Get profile name for filename
+      const profile = await apiClient.getProfile(profileId);
+      const safeName = profile.name.replace(/[^a-z0-9]/gi, '-').toLowerCase();
+      const filename = `profile-${safeName}.voicebox.zip`;
+      
+      if (isTauri()) {
+        // Use Tauri's native save dialog
+        try {
+          const { save } = await import('@tauri-apps/plugin-dialog');
+          const filePath = await save({
+            defaultPath: filename,
+            filters: [
+              {
+                name: 'Voicebox Profile',
+                extensions: ['voicebox.zip', 'zip'],
+              },
+            ],
+          });
+          
+          if (filePath) {
+            // Write file using Tauri's filesystem API
+            const { writeBinaryFile } = await import('@tauri-apps/plugin-fs');
+            const arrayBuffer = await blob.arrayBuffer();
+            await writeBinaryFile(filePath, new Uint8Array(arrayBuffer));
+          }
+        } catch (error) {
+          console.error('Failed to use Tauri dialog, falling back to browser download:', error);
+          // Fall back to browser download if Tauri dialog fails
+          const url = window.URL.createObjectURL(blob);
+          const a = document.createElement('a');
+          a.href = url;
+          a.download = filename;
+          document.body.appendChild(a);
+          a.click();
+          window.URL.revokeObjectURL(url);
+          document.body.removeChild(a);
+        }
+      } else {
+        // Browser: trigger download
+        const url = window.URL.createObjectURL(blob);
+        const a = document.createElement('a');
+        a.href = url;
+        a.download = filename;
+        document.body.appendChild(a);
+        a.click();
+        window.URL.revokeObjectURL(url);
+        document.body.removeChild(a);
+      }
+      
+      return blob;
+    },
+  });
+}
+
+export function useImportProfile() {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: (file: File) => apiClient.importProfile(file),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['profiles'] });
+    },
+  });
+}

app/src/lib/hooks/useRestoreActiveTasks.tsx

@@ -0,0 +1,87 @@
+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';
+
+// Polling interval in milliseconds
+const POLL_INTERVAL = 2000;
+
+/**
+ * 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);
+  
+  // Track which downloads we've seen to detect new ones
+  const seenDownloadsRef = useRef<Set<string>>(new Set());
+
+  const fetchActiveTasks = useCallback(async () => {
+    try {
+      const tasks = await apiClient.getActiveTasks();
+
+      // Update generation state
+      if (tasks.generations.length > 0) {
+        setIsGenerating(true);
+        setActiveGenerationId(tasks.generations[0].task_id);
+      } else {
+        // Only clear if we were tracking a generation
+        const currentId = useGenerationStore.getState().activeGenerationId;
+        if (currentId) {
+          setIsGenerating(false);
+          setActiveGenerationId(null);
+        }
+      }
+
+      // 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);
+      }
+
+      setActiveDownloads(tasks.downloads);
+    } catch (error) {
+      // Silently fail - server might be temporarily unavailable
+      console.debug('Failed to fetch active tasks:', error);
+    }
+  }, [setIsGenerating, setActiveGenerationId]);
+
+  useEffect(() => {
+    // Fetch immediately on mount
+    fetchActiveTasks();
+
+    // Poll for active tasks
+    const interval = setInterval(fetchActiveTasks, POLL_INTERVAL);
+
+    return () => clearInterval(interval);
+  }, [fetchActiveTasks]);
+
+  return activeDownloads;
+}
+
+/**
+ * Map model names to display names for download toasts.
+ */
+export const MODEL_DISPLAY_NAMES: Record<string, string> = {
+  'qwen-tts-1.7B': 'Qwen TTS 1.7B',
+  'qwen-tts-0.6B': 'Qwen TTS 0.6B',
+  'whisper-base': 'Whisper Base',
+  'whisper-small': 'Whisper Small',
+  'whisper-medium': 'Whisper Medium',
+  'whisper-large': 'Whisper Large',
+};

app/src/lib/hooks/useStories.ts

@@ -0,0 +1,177 @@
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
+import { apiClient } from '@/lib/api/client';
+import type { StoryCreate, StoryItemCreate, StoryItemBatchUpdate, StoryItemReorder, StoryItemMove } from '@/lib/api/types';
+import { isTauri } from '@/lib/tauri';
+
+export function useStories() {
+  return useQuery({
+    queryKey: ['stories'],
+    queryFn: () => apiClient.listStories(),
+  });
+}
+
+export function useStory(storyId: string | null) {
+  return useQuery({
+    queryKey: ['stories', storyId],
+    queryFn: () => apiClient.getStory(storyId!),
+    enabled: !!storyId,
+  });
+}
+
+export function useCreateStory() {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: (data: StoryCreate) => apiClient.createStory(data),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['stories'] });
+    },
+  });
+}
+
+export function useUpdateStory() {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: ({ storyId, data }: { storyId: string; data: StoryCreate }) =>
+      apiClient.updateStory(storyId, data),
+    onSuccess: (_, variables) => {
+      queryClient.invalidateQueries({ queryKey: ['stories'] });
+      queryClient.invalidateQueries({ queryKey: ['stories', variables.storyId] });
+    },
+  });
+}
+
+export function useDeleteStory() {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: (storyId: string) => apiClient.deleteStory(storyId),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['stories'] });
+    },
+  });
+}
+
+export function useAddStoryItem() {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: ({ storyId, data }: { storyId: string; data: StoryItemCreate }) =>
+      apiClient.addStoryItem(storyId, data),
+    onSuccess: (_, variables) => {
+      queryClient.invalidateQueries({ queryKey: ['stories'] });
+      queryClient.invalidateQueries({ queryKey: ['stories', variables.storyId] });
+    },
+  });
+}
+
+export function useRemoveStoryItem() {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: ({ storyId, generationId }: { storyId: string; generationId: string }) =>
+      apiClient.removeStoryItem(storyId, generationId),
+    onSuccess: (_, variables) => {
+      queryClient.invalidateQueries({ queryKey: ['stories'] });
+      queryClient.invalidateQueries({ queryKey: ['stories', variables.storyId] });
+    },
+  });
+}
+
+export function useUpdateStoryItemTimes() {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: ({ storyId, data }: { storyId: string; data: StoryItemBatchUpdate }) =>
+      apiClient.updateStoryItemTimes(storyId, data),
+    onSuccess: (_, variables) => {
+      queryClient.invalidateQueries({ queryKey: ['stories'] });
+      queryClient.invalidateQueries({ queryKey: ['stories', variables.storyId] });
+    },
+  });
+}
+
+export function useReorderStoryItems() {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: ({ storyId, data }: { storyId: string; data: StoryItemReorder }) =>
+      apiClient.reorderStoryItems(storyId, data),
+    onSuccess: (_, variables) => {
+      queryClient.invalidateQueries({ queryKey: ['stories'] });
+      queryClient.invalidateQueries({ queryKey: ['stories', variables.storyId] });
+    },
+  });
+}
+
+export function useMoveStoryItem() {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: ({ storyId, generationId, data }: { storyId: string; generationId: string; data: StoryItemMove }) =>
+      apiClient.moveStoryItem(storyId, generationId, data),
+    onSuccess: (_, variables) => {
+      queryClient.invalidateQueries({ queryKey: ['stories'] });
+      queryClient.invalidateQueries({ queryKey: ['stories', variables.storyId] });
+    },
+  });
+}
+
+export function useExportStoryAudio() {
+  return useMutation({
+    mutationFn: async ({ storyId, storyName }: { storyId: string; storyName: string }) => {
+      const blob = await apiClient.exportStoryAudio(storyId);
+
+      // Create safe filename
+      const safeName = storyName.substring(0, 50).replace(/[^a-z0-9]/gi, '-').toLowerCase();
+      const filename = `${safeName || 'story'}.wav`;
+
+      if (isTauri()) {
+        // Use Tauri's native save dialog
+        try {
+          const { save } = await import('@tauri-apps/plugin-dialog');
+          const filePath = await save({
+            defaultPath: filename,
+            filters: [
+              {
+                name: 'Audio File',
+                extensions: ['wav'],
+              },
+            ],
+          });
+
+          if (filePath) {
+            // Write file using Tauri's filesystem API
+            const { writeBinaryFile } = await import('@tauri-apps/plugin-fs');
+            const arrayBuffer = await blob.arrayBuffer();
+            await writeBinaryFile(filePath, new Uint8Array(arrayBuffer));
+          }
+        } catch (error) {
+          console.error('Failed to use Tauri dialog, falling back to browser download:', error);
+          // Fall back to browser download if Tauri dialog fails
+          const url = window.URL.createObjectURL(blob);
+          const a = document.createElement('a');
+          a.href = url;
+          a.download = filename;
+          document.body.appendChild(a);
+          a.click();
+          window.URL.revokeObjectURL(url);
+          document.body.removeChild(a);
+        }
+      } else {
+        // Browser: trigger download
+        const url = window.URL.createObjectURL(blob);
+        const a = document.createElement('a');
+        a.href = url;
+        a.download = filename;
+        document.body.appendChild(a);
+        a.click();
+        window.URL.revokeObjectURL(url);
+        document.body.removeChild(a);
+      }
+
+      return blob;
+    },
+  });
+}

app/src/lib/hooks/useStoryPlayback.ts

@@ -0,0 +1,375 @@
+import { useCallback, useEffect, useRef } from 'react';
+import { apiClient } from '@/lib/api/client';
+import type { StoryItemDetail } from '@/lib/api/types';
+import { useStoryStore } from '@/stores/storyStore';
+
+interface ActiveSource {
+  source: AudioBufferSourceNode;
+  generationId: string;
+  startTimeMs: number;
+  endTimeMs: number;
+}
+
+/**
+ * Hook for managing timecode-based story playback using Web Audio API.
+ * Supports multiple simultaneous audio sources for overlapping clips on different tracks.
+ * Uses AudioContext for sample-accurate timing synchronization.
+ */
+export function useStoryPlayback(items: StoryItemDetail[] | undefined) {
+  const isPlaying = useStoryStore((state) => state.isPlaying);
+  const playbackItems = useStoryStore((state) => state.playbackItems);
+  const playbackStartContextTime = useStoryStore((state) => state.playbackStartContextTime);
+  const playbackStartStoryTime = useStoryStore((state) => state.playbackStartStoryTime);
+  const setPlaybackTiming = useStoryStore((state) => state.setPlaybackTiming);
+
+  // AudioContext instance (created once)
+  const audioContextRef = useRef<AudioContext | null>(null);
+  // Master gain for volume control
+  const masterGainRef = useRef<GainNode | null>(null);
+  // Preloaded AudioBuffers by generation_id
+  const audioBuffersRef = useRef<Map<string, AudioBuffer>>(new Map());
+  // Currently playing AudioBufferSourceNodes by generation_id
+  const activeSourcesRef = useRef<Map<string, ActiveSource>>(new Map());
+  // Animation frame for syncing visual playhead
+  const animationFrameRef = useRef<number | null>(null);
+
+  // Get or create AudioContext and audio graph
+  const getAudioContext = useCallback(() => {
+    if (!audioContextRef.current) {
+      audioContextRef.current = new AudioContext();
+      console.log(
+        '[StoryPlayback] Created AudioContext, sample rate:',
+        audioContextRef.current.sampleRate,
+      );
+
+      // Create master gain node for volume control
+      masterGainRef.current = audioContextRef.current.createGain();
+      masterGainRef.current.gain.value = 1;
+      masterGainRef.current.connect(audioContextRef.current.destination);
+    }
+    // Resume context if suspended (browser autoplay policy)
+    if (audioContextRef.current.state === 'suspended') {
+      audioContextRef.current.resume().catch(() => {
+        // Ignore resume errors
+      });
+    }
+    return audioContextRef.current;
+  }, []);
+
+  // Stop a source
+  const stopSource = useCallback((generationId: string) => {
+    const activeSource = activeSourcesRef.current.get(generationId);
+    if (activeSource) {
+      try {
+        activeSource.source.stop();
+      } catch {
+        // Source may have already stopped
+      }
+      activeSourcesRef.current.delete(generationId);
+    }
+  }, []);
+
+  // Preload audio files as AudioBuffers
+  useEffect(() => {
+    if (!items || items.length === 0) {
+      // Clear preloaded buffers when no items
+      audioBuffersRef.current.clear();
+      return;
+    }
+
+    const currentIds = new Set(items.map((item) => item.generation_id));
+    const audioContext = getAudioContext();
+
+    // Remove buffers for items that no longer exist
+    for (const [id] of audioBuffersRef.current) {
+      if (!currentIds.has(id)) {
+        audioBuffersRef.current.delete(id);
+      }
+    }
+
+    // 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 preloadPromise = fetch(audioUrl)
+          .then((response) => response.arrayBuffer())
+          .then((arrayBuffer) => audioContext.decodeAudioData(arrayBuffer))
+          .then((audioBuffer) => {
+            audioBuffersRef.current.set(item.generation_id, audioBuffer);
+            console.log(
+              '[StoryPlayback] Preloaded buffer:',
+              item.generation_id,
+              'duration:',
+              audioBuffer.duration,
+            );
+          })
+          .catch((err) => {
+            console.error('[StoryPlayback] Failed to preload audio:', item.generation_id, err);
+          });
+
+        preloadPromises.push(preloadPromise);
+      }
+    }
+
+    Promise.all(preloadPromises).then(() => {
+      console.log('[StoryPlayback] Preloaded', audioBuffersRef.current.size, 'audio buffers');
+    });
+  }, [items, getAudioContext]);
+
+  // Cleanup AudioContext on unmount
+  useEffect(() => {
+    return () => {
+      // Stop all sources
+      for (const [generationId] of activeSourcesRef.current) {
+        stopSource(generationId);
+      }
+      activeSourcesRef.current.clear();
+
+      // Clean up audio graph
+      if (masterGainRef.current) {
+        masterGainRef.current.disconnect();
+        masterGainRef.current = null;
+      }
+      if (audioContextRef.current && audioContextRef.current.state !== 'closed') {
+        audioContextRef.current.close().catch(() => {
+          // Ignore errors when closing
+        });
+        audioContextRef.current = null;
+      }
+
+      if (animationFrameRef.current !== null) {
+        cancelAnimationFrame(animationFrameRef.current);
+      }
+    };
+  }, [stopSource]);
+
+  // Find ALL items that should be playing at a given story time
+  const findActiveItems = useCallback(
+    (storyTimeMs: number, itemList: StoryItemDetail[]): StoryItemDetail[] => {
+      return itemList.filter((item) => {
+        const itemStart = item.start_time_ms;
+        const itemEnd = item.start_time_ms + item.duration * 1000;
+        return storyTimeMs >= itemStart && storyTimeMs < itemEnd;
+      });
+    },
+    [],
+  );
+
+  // Convert AudioContext time to story time (ms)
+  const contextTimeToStoryTime = useCallback(
+    (contextTime: number): number => {
+      if (playbackStartContextTime === null || playbackStartStoryTime === null) {
+        return 0;
+      }
+      const elapsedContextTime = contextTime - playbackStartContextTime;
+      return playbackStartStoryTime + elapsedContextTime * 1000;
+    },
+    [playbackStartContextTime, playbackStartStoryTime],
+  );
+
+  // Convert story time (ms) to AudioContext time
+  const storyTimeToContextTime = useCallback(
+    (storyTimeMs: number): number => {
+      if (playbackStartContextTime === null || playbackStartStoryTime === null) {
+        return 0;
+      }
+      const elapsedStoryTime = (storyTimeMs - playbackStartStoryTime) / 1000;
+      return playbackStartContextTime + elapsedStoryTime;
+    },
+    [playbackStartContextTime, playbackStartStoryTime],
+  );
+
+  // Stop all sources
+  const stopAllSources = useCallback(() => {
+    console.log('[StoryPlayback] Stopping all sources');
+    for (const [generationId] of activeSourcesRef.current) {
+      stopSource(generationId);
+    }
+    activeSourcesRef.current.clear();
+  }, [stopSource]);
+
+  // Schedule playback for all items that should be playing
+  const schedulePlayback = useCallback(
+    (storyTimeMs: number, itemList: StoryItemDetail[]) => {
+      const audioContext = getAudioContext();
+      const currentContextTime = audioContext.currentTime;
+
+      // Find all items that should be playing
+      const shouldBePlaying = findActiveItems(storyTimeMs, itemList);
+      const shouldBePlayingIds = new Set(shouldBePlaying.map((item) => item.generation_id));
+
+      // Stop sources that shouldn't be playing anymore
+      for (const [generationId] of activeSourcesRef.current) {
+        if (!shouldBePlayingIds.has(generationId)) {
+          stopSource(generationId);
+        }
+      }
+
+      // Schedule new sources for items that should be playing
+      for (const item of shouldBePlaying) {
+        if (!activeSourcesRef.current.has(item.generation_id)) {
+          const buffer = audioBuffersRef.current.get(item.generation_id);
+          if (!buffer) {
+            console.warn('[StoryPlayback] Buffer not loaded for:', item.generation_id);
+            continue;
+          }
+
+          // Calculate when this item should start in AudioContext time
+          const itemStartContextTime = storyTimeToContextTime(item.start_time_ms);
+          const itemEndStoryTime = item.start_time_ms + item.duration * 1000;
+
+          // Calculate offset into the buffer (if seeking mid-way)
+          const offsetIntoBuffer = Math.max(0, (storyTimeMs - item.start_time_ms) / 1000);
+          const duration = item.duration - offsetIntoBuffer;
+
+          // If the item should have already started, schedule it to start immediately
+          const startAtContextTime = Math.max(currentContextTime, itemStartContextTime);
+
+          console.log('[StoryPlayback] Scheduling source:', {
+            generationId: item.generation_id,
+            storyTimeMs,
+            itemStart: item.start_time_ms,
+            offsetIntoBuffer,
+            startAtContextTime,
+            duration,
+          });
+
+          const source = audioContext.createBufferSource();
+          source.buffer = buffer;
+          source.connect(masterGainRef.current || audioContext.destination);
+
+          const activeSource: ActiveSource = {
+            source,
+            generationId: item.generation_id,
+            startTimeMs: item.start_time_ms,
+            endTimeMs: itemEndStoryTime,
+          };
+
+          activeSourcesRef.current.set(item.generation_id, activeSource);
+
+          // Schedule playback
+          source.start(startAtContextTime, offsetIntoBuffer, duration);
+
+          // Clean up when source ends
+          source.onended = () => {
+            console.log('[StoryPlayback] Source ended:', item.generation_id);
+            activeSourcesRef.current.delete(item.generation_id);
+          };
+        }
+      }
+    },
+    [getAudioContext, findActiveItems, storyTimeToContextTime, stopSource],
+  );
+
+  // Sync visual playhead from AudioContext time
+  useEffect(() => {
+    if (!isPlaying || playbackStartContextTime === null || playbackStartStoryTime === null) {
+      if (animationFrameRef.current !== null) {
+        cancelAnimationFrame(animationFrameRef.current);
+        animationFrameRef.current = null;
+      }
+      return;
+    }
+
+    const audioContext = getAudioContext();
+    const itemList = playbackItems || [];
+
+    const syncPlayhead = () => {
+      if (!useStoryStore.getState().isPlaying) {
+        return;
+      }
+
+      const currentContextTime = audioContext.currentTime;
+      const currentStoryTime = contextTimeToStoryTime(currentContextTime);
+      const totalDuration = useStoryStore.getState().totalDurationMs;
+
+      // Update store with current story time
+      useStoryStore.setState({ currentTimeMs: Math.min(currentStoryTime, totalDuration) });
+
+      // Schedule any items that should be playing
+      schedulePlayback(currentStoryTime, itemList);
+
+      // Check if we've reached the end
+      if (currentStoryTime >= totalDuration) {
+        // Check if all sources have ended
+        if (activeSourcesRef.current.size === 0) {
+          console.log('[StoryPlayback] Reached end');
+          useStoryStore.getState().stop();
+          return;
+        }
+      }
+
+      // Continue sync loop
+      animationFrameRef.current = requestAnimationFrame(syncPlayhead);
+    };
+
+    // Initial sync
+    const currentContextTime = audioContext.currentTime;
+    const currentStoryTime = contextTimeToStoryTime(currentContextTime);
+    schedulePlayback(currentStoryTime, itemList);
+
+    // Start sync loop
+    animationFrameRef.current = requestAnimationFrame(syncPlayhead);
+
+    return () => {
+      if (animationFrameRef.current !== null) {
+        cancelAnimationFrame(animationFrameRef.current);
+        animationFrameRef.current = null;
+      }
+    };
+  }, [
+    isPlaying,
+    playbackItems,
+    playbackStartContextTime,
+    playbackStartStoryTime,
+    getAudioContext,
+    contextTimeToStoryTime,
+    schedulePlayback,
+  ]);
+
+  // Handle play/pause changes - stop sources when paused
+  useEffect(() => {
+    if (!isPlaying) {
+      console.log('[StoryPlayback] Stopping playback');
+      stopAllSources();
+    }
+  }, [isPlaying, stopAllSources]);
+
+  // Handle seek - reset timing anchors when they become null (triggered by seek)
+  useEffect(() => {
+    if (!isPlaying || !playbackItems || playbackItems.length === 0) {
+      return;
+    }
+
+    // Only run when timing anchors are null (after a seek)
+    if (playbackStartContextTime !== null && playbackStartStoryTime !== null) {
+      return;
+    }
+
+    const audioContext = getAudioContext();
+    const currentContextTime = audioContext.currentTime;
+    const currentStoryTime = useStoryStore.getState().currentTimeMs;
+
+    console.log('[StoryPlayback] Setting timing anchors after seek:', {
+      contextTime: currentContextTime,
+      storyTime: currentStoryTime,
+    });
+    setPlaybackTiming(currentContextTime, currentStoryTime);
+
+    // Stop all existing sources and reschedule from new position
+    stopAllSources();
+    schedulePlayback(currentStoryTime, playbackItems);
+  }, [
+    isPlaying,
+    playbackItems,
+    playbackStartContextTime,
+    playbackStartStoryTime,
+    getAudioContext,
+    stopAllSources,
+    schedulePlayback,
+    setPlaybackTiming,
+  ]);
+}

app/src/lib/hooks/useSystemAudioCapture.ts

@@ -0,0 +1,177 @@
+import { useState, useRef, useCallback, useEffect } from 'react';
+import { invoke } from '@tauri-apps/api/core';
+import { isTauri } from '@/lib/tauri';
+
+interface UseSystemAudioCaptureOptions {
+  maxDurationSeconds?: number;
+  onRecordingComplete?: (blob: Blob, duration?: number) => void;
+}
+
+/**
+ * Hook for native system audio capture using Tauri commands.
+ * Uses ScreenCaptureKit on macOS and WASAPI loopback on Windows.
+ */
+export function useSystemAudioCapture({
+  maxDurationSeconds = 29,
+  onRecordingComplete,
+}: UseSystemAudioCaptureOptions = {}) {
+  const [isRecording, setIsRecording] = useState(false);
+  const [duration, setDuration] = useState(0);
+  const [error, setError] = useState<string | null>(null);
+  const [isSupported, setIsSupported] = useState(false);
+  const timerRef = useRef<number | null>(null);
+  const startTimeRef = useRef<number | null>(null);
+  const stopRecordingRef = useRef<(() => Promise<void>) | null>(null);
+  const isRecordingRef = useRef(false);
+
+  // Check if system audio capture is supported
+  useEffect(() => {
+    if (!isTauri()) {
+      setIsSupported(false);
+      return;
+    }
+
+    invoke<boolean>('is_system_audio_supported')
+      .then((supported) => {
+        setIsSupported(supported);
+      })
+      .catch(() => {
+        setIsSupported(false);
+      });
+  }, []);
+
+  const startRecording = useCallback(async () => {
+    if (!isTauri()) {
+      const errorMsg = 'System audio capture is only available in the desktop app.';
+      setError(errorMsg);
+      return;
+    }
+
+    if (!isSupported) {
+      const errorMsg = 'System audio capture is not supported on this platform.';
+      setError(errorMsg);
+      return;
+    }
+
+    try {
+      setError(null);
+      setDuration(0);
+
+      // Start native capture
+      await invoke('start_system_audio_capture', {
+        maxDurationSecs: maxDurationSeconds,
+      });
+
+      setIsRecording(true);
+      isRecordingRef.current = true;
+      startTimeRef.current = Date.now();
+
+      // Start timer
+      timerRef.current = window.setInterval(() => {
+        if (startTimeRef.current) {
+          const elapsed = (Date.now() - startTimeRef.current) / 1000;
+          setDuration(elapsed);
+
+          // Auto-stop at max duration
+          if (elapsed >= maxDurationSeconds && stopRecordingRef.current) {
+            void stopRecordingRef.current();
+          }
+        }
+      }, 100);
+    } catch (err) {
+      const errorMessage =
+        err instanceof Error
+          ? err.message
+          : 'Failed to start system audio capture. Please check permissions.';
+      setError(errorMessage);
+      setIsRecording(false);
+    }
+  }, [maxDurationSeconds, isSupported]);
+
+  const stopRecording = useCallback(async () => {
+    if (!isRecording || !isTauri()) {
+      return;
+    }
+
+    try {
+      setIsRecording(false);
+      isRecordingRef.current = false;
+
+      if (timerRef.current !== null) {
+        clearInterval(timerRef.current);
+        timerRef.current = null;
+      }
+
+      // Stop capture and get base64 WAV data
+      const base64Data = await invoke<string>('stop_system_audio_capture');
+
+      // Convert base64 to Blob
+      const binaryString = atob(base64Data);
+      const bytes = new Uint8Array(binaryString.length);
+      for (let i = 0; i < binaryString.length; i++) {
+        bytes[i] = binaryString.charCodeAt(i);
+      }
+
+      const blob = new Blob([bytes], { type: 'audio/wav' });
+      // Pass the actual recorded duration
+      const recordedDuration = startTimeRef.current 
+        ? (Date.now() - startTimeRef.current) / 1000 
+        : undefined;
+      onRecordingComplete?.(blob, recordedDuration);
+    } catch (err) {
+      const errorMessage =
+        err instanceof Error
+          ? err.message
+          : 'Failed to stop system audio capture.';
+      setError(errorMessage);
+    }
+  }, [isRecording, onRecordingComplete]);
+
+  // Store stopRecording in ref for use in timer
+  useEffect(() => {
+    stopRecordingRef.current = stopRecording;
+  }, [stopRecording]);
+
+  const cancelRecording = useCallback(async () => {
+    if (isRecordingRef.current) {
+      await stopRecording();
+    }
+
+    setIsRecording(false);
+    isRecordingRef.current = false;
+    setDuration(0);
+
+    if (timerRef.current !== null) {
+      clearInterval(timerRef.current);
+      timerRef.current = null;
+    }
+  }, [stopRecording]);
+
+  // Cleanup on unmount only
+  useEffect(() => {
+    return () => {
+      if (timerRef.current !== null) {
+        clearInterval(timerRef.current);
+        timerRef.current = null;
+      }
+      // Cancel recording on unmount if still recording
+      if (isRecordingRef.current && isTauri()) {
+        // Call stop directly without the callback to avoid stale closure
+        invoke('stop_system_audio_capture').catch((err) => {
+          console.error('Error stopping audio capture on unmount:', err);
+        });
+      }
+    };
+    // biome-ignore lint/correctness/useExhaustiveDependencies: Only run on unmount
+  }, []);
+
+  return {
+    isRecording,
+    duration,
+    error,
+    isSupported,
+    startRecording,
+    stopRecording,
+    cancelRecording,
+  };
+}

app/src/lib/tauri.ts

@@ -12,6 +12,13 @@ export function isTauri(): boolean {
   return '__TAURI_INTERNALS__' in window;
 }
 
+/**
+ * Check if running on macOS
+ */
+export function isMacOS(): boolean {
+  return navigator.platform.toLowerCase().includes('mac');
+}
+
 /**
  * Start the bundled Python server (Tauri only)
  */
@@ -47,6 +54,21 @@ export async function stopServer(): Promise<void> {
   }
 }
 
+/**
+ * Set whether the server should keep running when the app closes (Tauri only)
+ */
+export async function setKeepServerRunning(keepRunning: boolean): Promise<void> {
+  if (!isTauri()) {
+    return;
+  }
+
+  try {
+    await invoke('set_keep_server_running', { keepRunning });
+  } catch (error) {
+    console.error('Failed to set keep server running setting:', error);
+  }
+}
+
 /**
  * Setup window close handler to check setting and stop server if needed
  */

app/src/lib/utils/audio.ts

@@ -16,3 +16,139 @@ export function formatAudioDuration(seconds: number): string {
   const secs = Math.floor(seconds % 60);
   return `${mins}:${secs.toString().padStart(2, '0')}`;
 }
+
+/**
+ * Get audio duration from a File.
+ * 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.
+ */
+export async function getAudioDuration(
+  file: File & { recordedDuration?: number },
+): Promise<number> {
+  if (file.recordedDuration !== undefined && Number.isFinite(file.recordedDuration)) {
+    return file.recordedDuration;
+  }
+
+  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('error', () => {
+      URL.revokeObjectURL(url);
+      reject(new Error('Failed to load audio file'));
+    });
+
+    audio.src = url;
+  });
+}
+
+/**
+ * Convert any audio blob to WAV format using Web Audio API.
+ * This ensures compatibility without requiring ffmpeg on the backend.
+ */
+export async function convertToWav(audioBlob: Blob): Promise<Blob> {
+  // Create audio context
+  const audioContext = new AudioContext();
+
+  // Read blob as array buffer
+  const arrayBuffer = await audioBlob.arrayBuffer();
+
+  // Decode audio data
+  const audioBuffer = await audioContext.decodeAudioData(arrayBuffer);
+
+  // Convert to WAV
+  const wavBlob = audioBufferToWav(audioBuffer);
+
+  // Close audio context to free resources
+  await audioContext.close();
+
+  return wavBlob;
+}
+
+/**
+ * Convert AudioBuffer to WAV blob.
+ */
+function audioBufferToWav(buffer: AudioBuffer): Blob {
+  const numberOfChannels = buffer.numberOfChannels;
+  const sampleRate = buffer.sampleRate;
+  const format = 1; // PCM
+  const bitDepth = 16;
+
+  const bytesPerSample = bitDepth / 8;
+  const blockAlign = numberOfChannels * bytesPerSample;
+
+  // Interleave channels
+  const interleaved = interleaveChannels(buffer);
+
+  // Create WAV file
+  const dataLength = interleaved.length * bytesPerSample;
+  const buffer2 = new ArrayBuffer(44 + dataLength);
+  const view = new DataView(buffer2);
+
+  // Write WAV header
+  writeString(view, 0, 'RIFF');
+  view.setUint32(4, 36 + dataLength, true);
+  writeString(view, 8, 'WAVE');
+  writeString(view, 12, 'fmt ');
+  view.setUint32(16, 16, true); // fmt chunk size
+  view.setUint16(20, format, true); // audio format (PCM)
+  view.setUint16(22, numberOfChannels, true);
+  view.setUint32(24, sampleRate, true);
+  view.setUint32(28, sampleRate * blockAlign, true); // byte rate
+  view.setUint16(32, blockAlign, true);
+  view.setUint16(34, bitDepth, true);
+  writeString(view, 36, 'data');
+  view.setUint32(40, dataLength, true);
+
+  // Write audio data
+  floatTo16BitPCM(view, 44, interleaved);
+
+  return new Blob([buffer2], { type: 'audio/wav' });
+}
+
+/**
+ * Interleave multiple channels into a single array.
+ */
+function interleaveChannels(buffer: AudioBuffer): Float32Array {
+  const numberOfChannels = buffer.numberOfChannels;
+  const length = buffer.length;
+  const interleaved = new Float32Array(length * numberOfChannels);
+
+  for (let channel = 0; channel < numberOfChannels; channel++) {
+    const channelData = buffer.getChannelData(channel);
+    for (let i = 0; i < length; i++) {
+      interleaved[i * numberOfChannels + channel] = channelData[i];
+    }
+  }
+
+  return interleaved;
+}
+
+/**
+ * Write string to DataView.
+ */
+function writeString(view: DataView, offset: number, string: string): void {
+  for (let i = 0; i < string.length; i++) {
+    view.setUint8(offset + i, string.charCodeAt(i));
+  }
+}
+
+/**
+ * Convert float32 audio data to 16-bit PCM.
+ */
+function floatTo16BitPCM(view: DataView, offset: number, input: Float32Array): void {
+  for (let i = 0; i < input.length; i++, offset += 2) {
+    const s = Math.max(-1, Math.min(1, input[i]));
+    view.setInt16(offset, s < 0 ? s * 0x8000 : s * 0x7fff, true);
+  }
+}

app/src/lib/utils/debug.ts

@@ -0,0 +1,19 @@
+const DEBUG = import.meta.env.DEV;
+
+export const debug = {
+  log: (...args: unknown[]) => {
+    if (DEBUG) {
+      console.log(...args);
+    }
+  },
+  error: (...args: unknown[]) => {
+    if (DEBUG) {
+      console.error(...args);
+    }
+  },
+  warn: (...args: unknown[]) => {
+    if (DEBUG) {
+      console.warn(...args);
+    }
+  },
+};

app/src/lib/utils/format.ts

@@ -7,7 +7,22 @@ export function formatDuration(seconds: number): string {
 }
 
 export function formatDate(date: string | Date): string {
-  return formatDistance(new Date(date), new Date(), { addSuffix: true });
+  // Parse the date string - if it doesn't have timezone info, treat it as UTC
+  let dateObj: Date;
+  if (typeof date === 'string') {
+    // If the string doesn't end with Z or have timezone offset, assume it's UTC
+    const dateStr = date.trim();
+    if (!dateStr.includes('Z') && !dateStr.match(/[+-]\d{2}:\d{2}$/)) {
+      // No timezone info, treat as UTC
+      dateObj = new Date(dateStr + 'Z');
+    } else {
+      dateObj = new Date(dateStr);
+    }
+  } else {
+    dateObj = date;
+  }
+  
+  return formatDistance(dateObj, new Date(), { addSuffix: true }).replace(/^about /i, '');
 }
 
 export function formatFileSize(bytes: number): string {

app/src/main.tsx

@@ -1,5 +1,5 @@
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
-import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
+// import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
 import React from 'react';
 import ReactDOM from 'react-dom/client';
 import App from './App';
@@ -20,7 +20,7 @@ ReactDOM.createRoot(document.getElementById('root')!).render(
   <React.StrictMode>
     <QueryClientProvider client={queryClient}>
       <App />
-      <ReactQueryDevtools initialIsOpen={false} />
+      {/* <ReactQueryDevtools initialIsOpen={false} /> */}
     </QueryClientProvider>
   </React.StrictMode>,
 );

app/src/router.tsx

@@ -0,0 +1,134 @@
+import { createRootRoute, createRoute, createRouter, Outlet } from '@tanstack/react-router';
+import { AppFrame } from '@/components/AppFrame/AppFrame';
+import { AudioTab } from '@/components/AudioTab/AudioTab';
+import { MainEditor } from '@/components/MainEditor/MainEditor';
+import { ModelsTab } from '@/components/ModelsTab/ModelsTab';
+import { ServerTab } from '@/components/ServerTab/ServerTab';
+import { Sidebar } from '@/components/Sidebar';
+import { StoriesTab } from '@/components/StoriesTab/StoriesTab';
+import { Toaster } from '@/components/ui/toaster';
+import { VoicesTab } from '@/components/VoicesTab/VoicesTab';
+import { useModelDownloadToast } from '@/lib/hooks/useModelDownloadToast';
+import { MODEL_DISPLAY_NAMES, useRestoreActiveTasks } from '@/lib/hooks/useRestoreActiveTasks';
+import { isMacOS } from '@/lib/tauri';
+
+// Root layout component
+function RootLayout() {
+  // Monitor active downloads/generations and show toasts for them
+  const activeDownloads = useRestoreActiveTasks();
+
+  return (
+    <AppFrame>
+      <div className="flex flex-1 min-h-0 overflow-hidden">
+        <Sidebar isMacOS={isMacOS()} />
+
+        <main className="flex-1 ml-20 overflow-hidden flex flex-col">
+          <div className="container mx-auto px-8 max-w-[1800px] h-full overflow-hidden flex flex-col">
+            <Outlet />
+          </div>
+        </main>
+      </div>
+
+      {/* Show download toasts for any active downloads (from anywhere) */}
+      {activeDownloads.map((download) => {
+        const displayName = MODEL_DISPLAY_NAMES[download.model_name] || download.model_name;
+        return (
+          <DownloadToastRestorer
+            key={download.model_name}
+            modelName={download.model_name}
+            displayName={displayName}
+          />
+        );
+      })}
+
+      <Toaster />
+    </AppFrame>
+  );
+}
+
+/**
+ * Component that restores a download toast for a specific model.
+ */
+function DownloadToastRestorer({
+  modelName,
+  displayName,
+}: {
+  modelName: string;
+  displayName: string;
+}) {
+  // Use the download toast hook to restore the toast
+  useModelDownloadToast({
+    modelName,
+    displayName,
+    enabled: true,
+  });
+
+  return null;
+}
+
+// Root route with layout
+const rootRoute = createRootRoute({
+  component: RootLayout,
+});
+
+// Index route (main/generate)
+const indexRoute = createRoute({
+  getParentRoute: () => rootRoute,
+  path: '/',
+  component: MainEditor,
+});
+
+// Stories route
+const storiesRoute = createRoute({
+  getParentRoute: () => rootRoute,
+  path: '/stories',
+  component: StoriesTab,
+});
+
+// Voices route
+const voicesRoute = createRoute({
+  getParentRoute: () => rootRoute,
+  path: '/voices',
+  component: VoicesTab,
+});
+
+// Audio route
+const audioRoute = createRoute({
+  getParentRoute: () => rootRoute,
+  path: '/audio',
+  component: AudioTab,
+});
+
+// Models route
+const modelsRoute = createRoute({
+  getParentRoute: () => rootRoute,
+  path: '/models',
+  component: ModelsTab,
+});
+
+// Server route
+const serverRoute = createRoute({
+  getParentRoute: () => rootRoute,
+  path: '/server',
+  component: ServerTab,
+});
+
+// Route tree
+const routeTree = rootRoute.addChildren([
+  indexRoute,
+  storiesRoute,
+  voicesRoute,
+  audioRoute,
+  modelsRoute,
+  serverRoute,
+]);
+
+// Create router
+export const router = createRouter({ routeTree });
+
+// Register router for type safety
+declare module '@tanstack/react-router' {
+  interface Register {
+    router: typeof router;
+  }
+}

app/src/stores/audioChannelStore.ts

@@ -0,0 +1,42 @@
+import { create } from 'zustand';
+import { persist } from 'zustand/middleware';
+
+export interface AudioChannel {
+  id: string;
+  name: string;
+  is_default: boolean;
+  device_ids: string[];
+  created_at: string;
+}
+
+interface AudioChannelStore {
+  channels: AudioChannel[];
+  setChannels: (channels: AudioChannel[]) => void;
+  addChannel: (channel: AudioChannel) => void;
+  updateChannel: (id: string, channel: Partial<AudioChannel>) => void;
+  removeChannel: (id: string) => void;
+}
+
+export const useAudioChannelStore = create<AudioChannelStore>()(
+  persist(
+    (set) => ({
+      channels: [],
+      setChannels: (channels) => set({ channels }),
+      addChannel: (channel) =>
+        set((state) => ({
+          channels: [...state.channels, channel],
+        })),
+      updateChannel: (id, updates) =>
+        set((state) => ({
+          channels: state.channels.map((ch) => (ch.id === id ? { ...ch, ...updates } : ch)),
+        })),
+      removeChannel: (id) =>
+        set((state) => ({
+          channels: state.channels.filter((ch) => ch.id !== id),
+        })),
+    }),
+    {
+      name: 'voicebox-audio-channels',
+    },
+  ),
+);

app/src/stores/generationStore.ts

@@ -0,0 +1,15 @@
+import { create } from 'zustand';
+
+interface GenerationState {
+  isGenerating: boolean;
+  activeGenerationId: string | null;
+  setIsGenerating: (generating: boolean) => void;
+  setActiveGenerationId: (id: string | null) => void;
+}
+
+export const useGenerationStore = create<GenerationState>((set) => ({
+  isGenerating: false,
+  activeGenerationId: null,
+  setIsGenerating: (generating) => set({ isGenerating: generating }),
+  setActiveGenerationId: (id) => set({ activeGenerationId: id }),
+}));

app/src/stores/playerStore.ts

@@ -3,53 +3,88 @@ import { create } from 'zustand';
 interface PlayerState {
   audioUrl: string | null;
   audioId: string | null;
+  profileId: string | null;
   title: string | null;
   isPlaying: boolean;
   currentTime: number;
   duration: number;
   volume: number;
   isLooping: boolean;
+  shouldRestart: boolean;
+  shouldAutoPlay: boolean;
+  onFinish: (() => void) | null;
 
-  setAudio: (url: string, id: string, title?: string) => void;
+  setAudio: (url: string, id: string, profileId: string | null, title?: string) => void;
+  setAudioWithAutoPlay: (url: string, id: string, profileId: string | null, title?: string) => void;
   setIsPlaying: (playing: boolean) => void;
   setCurrentTime: (time: number) => void;
   setDuration: (duration: number) => void;
   setVolume: (volume: number) => void;
   toggleLoop: () => void;
+  restartCurrentAudio: () => void;
+  clearRestartFlag: () => void;
+  clearAutoPlayFlag: () => void;
+  setOnFinish: (callback: (() => void) | null) => void;
   reset: () => void;
 }
 
 export const usePlayerStore = create<PlayerState>((set) => ({
   audioUrl: null,
   audioId: null,
+  profileId: null,
   title: null,
   isPlaying: false,
   currentTime: 0,
   duration: 0,
   volume: 1,
   isLooping: false,
+  shouldRestart: false,
+  shouldAutoPlay: false,
+  onFinish: null,
 
-  setAudio: (url, id, title) =>
+  setAudio: (url, id, profileId, title) =>
     set({
       audioUrl: url,
       audioId: id,
+      profileId: profileId || null,
       title: title || null,
       currentTime: 0,
       isPlaying: false,
+      shouldRestart: false,
+      shouldAutoPlay: false,
+    }),
+  setAudioWithAutoPlay: (url, id, profileId, title) =>
+    set({
+      audioUrl: url,
+      audioId: id,
+      profileId: profileId || null,
+      title: title || null,
+      currentTime: 0,
+      isPlaying: false,
+      shouldRestart: false,
+      shouldAutoPlay: true,
     }),
   setIsPlaying: (playing) => set({ isPlaying: playing }),
   setCurrentTime: (time) => set({ currentTime: time }),
   setDuration: (duration) => set({ duration }),
   setVolume: (volume) => set({ volume }),
   toggleLoop: () => set((state) => ({ isLooping: !state.isLooping })),
+  restartCurrentAudio: () => set({ shouldRestart: true }),
+  clearRestartFlag: () => set({ shouldRestart: false }),
+  clearAutoPlayFlag: () => set({ shouldAutoPlay: false }),
+  setOnFinish: (callback) => set({ onFinish: callback }),
   reset: () =>
     set({
       audioUrl: null,
       audioId: null,
+      profileId: null,
       title: null,
       isPlaying: false,
       currentTime: 0,
       duration: 0,
       isLooping: false,
+      shouldRestart: false,
+      shouldAutoPlay: false,
+      onFinish: null,
     }),
 }));

app/src/stores/serverStore.ts

@@ -18,7 +18,7 @@ interface ServerStore {
 export const useServerStore = create<ServerStore>()(
   persist(
     (set) => ({
-      serverUrl: 'http://localhost:8000',
+      serverUrl: 'http://127.0.0.1:17493',
       setServerUrl: (url) => set({ serverUrl: url }),
 
       isConnected: false,

app/src/stores/storyStore.ts

@@ -0,0 +1,125 @@
+import { create } from 'zustand';
+import type { StoryItemDetail } from '@/lib/api/types';
+
+interface StoryPlaybackState {
+  // Selection
+  selectedStoryId: string | null;
+  setSelectedStoryId: (id: string | null) => void;
+
+  // Track editor UI state
+  trackEditorHeight: number;
+  setTrackEditorHeight: (height: number) => void;
+
+  // Playback state
+  isPlaying: boolean;
+  currentTimeMs: number;
+  totalDurationMs: number;
+  playbackStoryId: string | null;
+  playbackItems: StoryItemDetail[] | null;
+  // Web Audio API timing (null when not playing)
+  playbackStartContextTime: number | null; // AudioContext.currentTime when playback started
+  playbackStartStoryTime: number | null; // Story time (ms) when playback started
+
+  // Actions
+  play: (storyId: string, items: StoryItemDetail[]) => void;
+  pause: () => void;
+  stop: () => void;
+  seek: (timeMs: number) => void;
+  setPlaybackTiming: (contextTime: number, storyTime: number) => void; // Set timing anchors for Web Audio API
+}
+
+const DEFAULT_TRACK_EDITOR_HEIGHT = 250;
+
+export const useStoryStore = create<StoryPlaybackState>((set, get) => ({
+  // Selection
+  selectedStoryId: null,
+  setSelectedStoryId: (id) => set({ selectedStoryId: id }),
+
+  // Track editor UI state
+  trackEditorHeight: DEFAULT_TRACK_EDITOR_HEIGHT,
+  setTrackEditorHeight: (height) => set({ trackEditorHeight: height }),
+
+  // Playback state
+  isPlaying: false,
+  currentTimeMs: 0,
+  totalDurationMs: 0,
+  playbackStoryId: null,
+  playbackItems: null,
+  playbackStartContextTime: null,
+  playbackStartStoryTime: null,
+
+  // Actions
+  play: (storyId, items) => {
+    // Calculate total duration from items
+    const maxEndTimeMs = Math.max(
+      ...items.map((item) => item.start_time_ms + item.duration * 1000),
+      0
+    );
+
+    // Find the minimum start time (first item)
+    const minStartTimeMs = Math.min(
+      ...items.map((item) => item.start_time_ms),
+      0
+    );
+
+    // If resuming the same story, keep position; otherwise start at first item
+    const currentState = get();
+    const shouldResume = currentState.playbackStoryId === storyId && currentState.currentTimeMs > 0;
+    const startTimeMs = shouldResume ? currentState.currentTimeMs : minStartTimeMs;
+
+    console.log('[StoryStore] Play called:', {
+      storyId,
+      itemCount: items.length,
+      items: items.map(i => ({ id: i.generation_id, start: i.start_time_ms, duration: i.duration })),
+      maxEndTimeMs,
+      minStartTimeMs,
+      startTimeMs,
+      shouldResume,
+    });
+
+    set({
+      isPlaying: true,
+      playbackStoryId: storyId,
+      playbackItems: items,
+      totalDurationMs: maxEndTimeMs,
+      currentTimeMs: startTimeMs,
+    });
+  },
+
+  pause: () => {
+    set({ 
+      isPlaying: false,
+      // Keep timing anchors so we can resume from same position
+    });
+  },
+
+  stop: () => {
+    set({
+      isPlaying: false,
+      currentTimeMs: 0,
+      playbackStoryId: null,
+      playbackItems: null,
+      totalDurationMs: 0,
+      playbackStartContextTime: null,
+      playbackStartStoryTime: null,
+    });
+  },
+
+  seek: (timeMs) => {
+    const state = get();
+    const clampedTime = Math.max(0, Math.min(timeMs, state.totalDurationMs));
+    set({ 
+      currentTimeMs: clampedTime,
+      // Reset timing anchors - will be set by hook when playback resumes
+      playbackStartContextTime: null,
+      playbackStartStoryTime: null,
+    });
+  },
+
+  setPlaybackTiming: (contextTime, storyTime) => {
+    set({
+      playbackStartContextTime: contextTime,
+      playbackStartStoryTime: storyTime,
+    });
+  },
+}));

backend/build_binary.py

@@ -26,18 +26,6 @@ def build_server():
         args.extend(['--paths', str(local_qwen_path)])
         print(f"Using local qwen_tts source from: {local_qwen_path}")
 
-    # Exclude unnecessary modules to reduce size
-    args.extend([
-        '--exclude-module', 'matplotlib',
-        '--exclude-module', 'IPython',
-        '--exclude-module', 'notebook',
-        '--exclude-module', 'pytest',
-        '--exclude-module', 'setuptools',
-        '--exclude-module', 'torch.distributions',
-        '--exclude-module', 'torch.testing',
-        '--exclude-module', 'tensorboard',
-    ])
-
     # Add hidden imports
     args.extend([
         '--hidden-import', 'backend',
@@ -70,6 +58,9 @@ def build_server():
         '--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',
         '--noconfirm',
         '--clean',
     ])

backend/channels.py

@@ -0,0 +1,263 @@
+"""
+Audio channel management module.
+"""
+
+from typing import List, Optional
+from datetime import datetime
+import uuid
+from sqlalchemy.orm import Session
+
+from .models import (
+    AudioChannelCreate,
+    AudioChannelUpdate,
+    AudioChannelResponse,
+    ChannelVoiceAssignment,
+    ProfileChannelAssignment,
+)
+from .database import (
+    AudioChannel as DBAudioChannel,
+    ChannelDeviceMapping as DBChannelDeviceMapping,
+    ProfileChannelMapping as DBProfileChannelMapping,
+    VoiceProfile as DBVoiceProfile,
+)
+
+
+async def list_channels(db: Session) -> List[AudioChannelResponse]:
+    """List all audio channels."""
+    channels = db.query(DBAudioChannel).all()
+    result = []
+    
+    for channel in channels:
+        # Get device IDs for this channel
+        device_mappings = db.query(DBChannelDeviceMapping).filter_by(
+            channel_id=channel.id
+        ).all()
+        device_ids = [m.device_id for m in device_mappings]
+        
+        result.append(AudioChannelResponse(
+            id=channel.id,
+            name=channel.name,
+            is_default=channel.is_default,
+            device_ids=device_ids,
+            created_at=channel.created_at,
+        ))
+    
+    return result
+
+
+async def get_channel(channel_id: str, db: Session) -> Optional[AudioChannelResponse]:
+    """Get a channel by ID."""
+    channel = db.query(DBAudioChannel).filter_by(id=channel_id).first()
+    if not channel:
+        return None
+    
+    # Get device IDs
+    device_mappings = db.query(DBChannelDeviceMapping).filter_by(
+        channel_id=channel.id
+    ).all()
+    device_ids = [m.device_id for m in device_mappings]
+    
+    return AudioChannelResponse(
+        id=channel.id,
+        name=channel.name,
+        is_default=channel.is_default,
+        device_ids=device_ids,
+        created_at=channel.created_at,
+    )
+
+
+async def create_channel(
+    data: AudioChannelCreate,
+    db: Session,
+) -> AudioChannelResponse:
+    """Create a new audio channel."""
+    # Check if name already exists
+    existing = db.query(DBAudioChannel).filter_by(name=data.name).first()
+    if existing:
+        raise ValueError(f"Channel with name '{data.name}' already exists")
+    
+    # Create channel
+    channel = DBAudioChannel(
+        id=str(uuid.uuid4()),
+        name=data.name,
+        is_default=False,
+        created_at=datetime.utcnow(),
+    )
+    db.add(channel)
+    db.flush()
+    
+    # Add device mappings
+    for device_id in data.device_ids:
+        mapping = DBChannelDeviceMapping(
+            id=str(uuid.uuid4()),
+            channel_id=channel.id,
+            device_id=device_id,
+        )
+        db.add(mapping)
+    
+    db.commit()
+    db.refresh(channel)
+    
+    return AudioChannelResponse(
+        id=channel.id,
+        name=channel.name,
+        is_default=channel.is_default,
+        device_ids=data.device_ids,
+        created_at=channel.created_at,
+    )
+
+
+async def update_channel(
+    channel_id: str,
+    data: AudioChannelUpdate,
+    db: Session,
+) -> Optional[AudioChannelResponse]:
+    """Update an audio channel."""
+    channel = db.query(DBAudioChannel).filter_by(id=channel_id).first()
+    if not channel:
+        return None
+    
+    if channel.is_default:
+        raise ValueError("Cannot modify the default channel")
+    
+    # Update name if provided
+    if data.name is not None:
+        # Check if name already exists (excluding current channel)
+        existing = db.query(DBAudioChannel).filter(
+            DBAudioChannel.name == data.name,
+            DBAudioChannel.id != channel_id
+        ).first()
+        if existing:
+            raise ValueError(f"Channel with name '{data.name}' already exists")
+        channel.name = data.name
+    
+    # Update device mappings if provided
+    if data.device_ids is not None:
+        # Delete existing mappings
+        db.query(DBChannelDeviceMapping).filter_by(channel_id=channel_id).delete()
+        
+        # Add new mappings
+        for device_id in data.device_ids:
+            mapping = DBChannelDeviceMapping(
+                id=str(uuid.uuid4()),
+                channel_id=channel.id,
+                device_id=device_id,
+            )
+            db.add(mapping)
+    
+    db.commit()
+    db.refresh(channel)
+    
+    # Get updated device IDs
+    device_mappings = db.query(DBChannelDeviceMapping).filter_by(
+        channel_id=channel.id
+    ).all()
+    device_ids = [m.device_id for m in device_mappings]
+    
+    return AudioChannelResponse(
+        id=channel.id,
+        name=channel.name,
+        is_default=channel.is_default,
+        device_ids=device_ids,
+        created_at=channel.created_at,
+    )
+
+
+async def delete_channel(channel_id: str, db: Session) -> bool:
+    """Delete an audio channel."""
+    channel = db.query(DBAudioChannel).filter_by(id=channel_id).first()
+    if not channel:
+        return False
+    
+    if channel.is_default:
+        raise ValueError("Cannot delete the default channel")
+    
+    # Delete device mappings
+    db.query(DBChannelDeviceMapping).filter_by(channel_id=channel_id).delete()
+    
+    # Delete profile-channel mappings
+    db.query(DBProfileChannelMapping).filter_by(channel_id=channel_id).delete()
+    
+    # Delete channel
+    db.delete(channel)
+    db.commit()
+    
+    return True
+
+
+async def get_channel_voices(channel_id: str, db: Session) -> List[str]:
+    """Get list of profile IDs assigned to a channel."""
+    mappings = db.query(DBProfileChannelMapping).filter_by(
+        channel_id=channel_id
+    ).all()
+    return [m.profile_id for m in mappings]
+
+
+async def set_channel_voices(
+    channel_id: str,
+    data: ChannelVoiceAssignment,
+    db: Session,
+) -> None:
+    """Set which voices are assigned to a channel."""
+    # Verify channel exists
+    channel = db.query(DBAudioChannel).filter_by(id=channel_id).first()
+    if not channel:
+        raise ValueError(f"Channel {channel_id} not found")
+    
+    # Verify all profiles exist
+    for profile_id in data.profile_ids:
+        profile = db.query(DBVoiceProfile).filter_by(id=profile_id).first()
+        if not profile:
+            raise ValueError(f"Profile {profile_id} not found")
+    
+    # Delete existing mappings for this channel
+    db.query(DBProfileChannelMapping).filter_by(channel_id=channel_id).delete()
+    
+    # Add new mappings
+    for profile_id in data.profile_ids:
+        mapping = DBProfileChannelMapping(
+            profile_id=profile_id,
+            channel_id=channel_id,
+        )
+        db.add(mapping)
+    
+    db.commit()
+
+
+async def get_profile_channels(profile_id: str, db: Session) -> List[str]:
+    """Get list of channel IDs assigned to a profile."""
+    mappings = db.query(DBProfileChannelMapping).filter_by(
+        profile_id=profile_id
+    ).all()
+    return [m.channel_id for m in mappings]
+
+
+async def set_profile_channels(
+    profile_id: str,
+    data: ProfileChannelAssignment,
+    db: Session,
+) -> None:
+    """Set which channels a profile is assigned to."""
+    # Verify profile exists
+    profile = db.query(DBVoiceProfile).filter_by(id=profile_id).first()
+    if not profile:
+        raise ValueError(f"Profile {profile_id} not found")
+    
+    # Verify all channels exist
+    for channel_id in data.channel_ids:
+        channel = db.query(DBAudioChannel).filter_by(id=channel_id).first()
+        if not channel:
+            raise ValueError(f"Channel {channel_id} not found")
+    
+    # Delete existing mappings for this profile
+    db.query(DBProfileChannelMapping).filter_by(profile_id=profile_id).delete()
+    
+    # Add new mappings
+    for channel_id in data.channel_ids:
+        mapping = DBProfileChannelMapping(
+            profile_id=profile_id,
+            channel_id=channel_id,
+        )
+        db.add(mapping)
+    
+    db.commit()

backend/database.py

@@ -2,7 +2,7 @@
 SQLite database ORM using SQLAlchemy.
 """
 
-from sqlalchemy import create_engine, Column, String, Integer, Float, DateTime, Text, ForeignKey
+from sqlalchemy import create_engine, Column, String, Integer, Float, DateTime, Text, ForeignKey, Boolean
 from sqlalchemy.ext.declarative import declarative_base
 from sqlalchemy.orm import sessionmaker, Session
 from datetime import datetime
@@ -51,6 +51,29 @@ class Generation(Base):
     created_at = Column(DateTime, default=datetime.utcnow)
 
 
+class Story(Base):
+    """Story database model."""
+    __tablename__ = "stories"
+    
+    id = Column(String, primary_key=True, default=lambda: str(uuid.uuid4()))
+    name = Column(String, nullable=False)
+    description = Column(Text)
+    created_at = Column(DateTime, default=datetime.utcnow)
+    updated_at = Column(DateTime, default=datetime.utcnow, onupdate=datetime.utcnow)
+
+
+class StoryItem(Base):
+    """Story item database model (links generations to stories)."""
+    __tablename__ = "story_items"
+    
+    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)
+    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)
+    created_at = Column(DateTime, default=datetime.utcnow)
+
+
 class Project(Base):
     """Audio studio project database model."""
     __tablename__ = "projects"
@@ -62,6 +85,33 @@ class Project(Base):
     updated_at = Column(DateTime, default=datetime.utcnow, onupdate=datetime.utcnow)
 
 
+class AudioChannel(Base):
+    """Audio channel (bus) database model."""
+    __tablename__ = "audio_channels"
+    
+    id = Column(String, primary_key=True, default=lambda: str(uuid.uuid4()))
+    name = Column(String, nullable=False)
+    is_default = Column(Boolean, default=False)
+    created_at = Column(DateTime, default=datetime.utcnow)
+
+
+class ChannelDeviceMapping(Base):
+    """Mapping between channels and OS audio devices."""
+    __tablename__ = "channel_device_mappings"
+    
+    id = Column(String, primary_key=True, default=lambda: str(uuid.uuid4()))
+    channel_id = Column(String, ForeignKey("audio_channels.id"), nullable=False)
+    device_id = Column(String, nullable=False)  # OS device identifier
+
+
+class ProfileChannelMapping(Base):
+    """Mapping between voice profiles and audio channels (many-to-many)."""
+    __tablename__ = "profile_channel_mappings"
+    
+    profile_id = Column(String, ForeignKey("profiles.id"), primary_key=True)
+    channel_id = Column(String, ForeignKey("audio_channels.id"), primary_key=True)
+
+
 # Database setup will be initialized in init_db()
 engine = None
 SessionLocal = None
@@ -81,7 +131,131 @@ def init_db():
     )
 
     SessionLocal = sessionmaker(autocommit=False, autoflush=False, bind=engine)
+    
+    # Run migrations before creating tables
+    _run_migrations(engine)
+    
     Base.metadata.create_all(bind=engine)
+    
+    # Create default channel if it doesn't exist
+    db = SessionLocal()
+    try:
+        default_channel = db.query(AudioChannel).filter(AudioChannel.is_default == True).first()
+        if not default_channel:
+            default_channel = AudioChannel(
+                id=str(uuid.uuid4()),
+                name="Default",
+                is_default=True
+            )
+            db.add(default_channel)
+            
+            # Assign all existing profiles to default channel
+            profiles = db.query(VoiceProfile).all()
+            for profile in profiles:
+                mapping = ProfileChannelMapping(
+                    profile_id=profile.id,
+                    channel_id=default_channel.id
+                )
+                db.add(mapping)
+            
+            db.commit()
+    finally:
+        db.close()
+
+
+def _run_migrations(engine):
+    """Run database migrations."""
+    from sqlalchemy import inspect, text
+    
+    inspector = inspect(engine)
+    
+    # Check if story_items table exists
+    if 'story_items' not in inspector.get_table_names():
+        return  # Table doesn't exist yet, will be created fresh
+    
+    # Get columns in story_items table
+    columns = {col['name'] for col in inspector.get_columns('story_items')}
+    
+    # Migration: Remove position column and ensure start_time_ms exists
+    # SQLite doesn't support DROP COLUMN easily, so we recreate the table
+    if 'position' in columns:
+        print("Migrating story_items: removing position column, using start_time_ms")
+        
+        with engine.connect() as conn:
+            # Check if start_time_ms already exists
+            has_start_time = 'start_time_ms' in columns
+            
+            if not has_start_time:
+                # First, add the new column temporarily
+                conn.execute(text("ALTER TABLE story_items ADD COLUMN start_time_ms INTEGER DEFAULT 0"))
+                
+                # Calculate timecodes from position ordering
+                result = conn.execute(text("""
+                    SELECT si.id, si.story_id, si.position, g.duration
+                    FROM story_items si
+                    JOIN generations g ON si.generation_id = g.id
+                    ORDER BY si.story_id, si.position
+                """))
+                
+                rows = result.fetchall()
+                
+                current_story_id = None
+                current_time_ms = 0
+                
+                for row in rows:
+                    item_id, story_id, position, duration = row
+                    
+                    if story_id != current_story_id:
+                        current_story_id = story_id
+                        current_time_ms = 0
+                    
+                    conn.execute(
+                        text("UPDATE story_items SET start_time_ms = :time WHERE id = :id"),
+                        {"time": current_time_ms, "id": item_id}
+                    )
+                    
+                    current_time_ms += int(duration * 1000) + 200
+                
+                conn.commit()
+            
+            # Now recreate the table without the position column
+            # 1. Create new table
+            conn.execute(text("""
+                CREATE TABLE story_items_new (
+                    id VARCHAR PRIMARY KEY,
+                    story_id VARCHAR NOT NULL,
+                    generation_id VARCHAR NOT NULL,
+                    start_time_ms INTEGER NOT NULL DEFAULT 0,
+                    created_at DATETIME,
+                    FOREIGN KEY (story_id) REFERENCES stories(id),
+                    FOREIGN KEY (generation_id) REFERENCES generations(id)
+                )
+            """))
+            
+            # 2. Copy data
+            conn.execute(text("""
+                INSERT INTO story_items_new (id, story_id, generation_id, start_time_ms, created_at)
+                SELECT id, story_id, generation_id, start_time_ms, created_at FROM story_items
+            """))
+            
+            # 3. Drop old table
+            conn.execute(text("DROP TABLE story_items"))
+            
+            # 4. Rename new table
+            conn.execute(text("ALTER TABLE story_items_new RENAME TO story_items"))
+            
+            conn.commit()
+            print("Migrated story_items table to use start_time_ms (removed position column)")
+    
+    # Migration: Add track column if it doesn't exist
+    # Re-check columns after potential position migration
+    columns = {col['name'] for col in inspector.get_columns('story_items')}
+    if 'track' not in columns:
+        print("Migrating story_items: adding track column")
+        with engine.connect() as conn:
+            conn.execute(text("ALTER TABLE story_items ADD COLUMN track INTEGER NOT NULL DEFAULT 0"))
+            conn.commit()
+            print("Added track column to story_items")
 
 
 def get_db():

backend/export_import.py

@@ -0,0 +1,407 @@
+"""
+Voice profile export/import module.
+
+Handles exporting profiles to ZIP archives and importing them back.
+Also handles exporting individual generations.
+"""
+
+import json
+import zipfile
+import io
+from pathlib import Path
+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 .profiles import create_profile, add_profile_sample
+from .models import VoiceProfileCreate
+from . import config
+
+
+def _get_profiles_dir() -> Path:
+    """Get profiles directory from config."""
+    return config.get_profiles_dir()
+
+
+def _get_unique_profile_name(name: str, db: Session) -> str:
+    """
+    Get a unique profile name by appending a number if needed.
+    
+    Args:
+        name: Original profile name
+        db: Database session
+        
+    Returns:
+        Unique profile name
+    """
+    base_name = name
+    counter = 1
+    
+    while True:
+        existing = db.query(DBVoiceProfile).filter_by(name=name).first()
+        if not existing:
+            return name
+        
+        name = f"{base_name} ({counter})"
+        counter += 1
+
+
+def export_profile_to_zip(profile_id: str, db: Session) -> bytes:
+    """
+    Export a voice profile to a ZIP archive.
+    
+    Args:
+        profile_id: Profile ID to export
+        db: Database session
+        
+    Returns:
+        ZIP file contents as bytes
+        
+    Raises:
+        ValueError: If profile not found or has no samples
+    """
+    # Get profile
+    profile = db.query(DBVoiceProfile).filter_by(id=profile_id).first()
+    if not profile:
+        raise ValueError(f"Profile {profile_id} not found")
+    
+    # Get all samples
+    samples = db.query(DBProfileSample).filter_by(profile_id=profile_id).all()
+    if not samples:
+        raise ValueError(f"Profile {profile_id} has no samples")
+    
+    # Create ZIP in memory
+    zip_buffer = io.BytesIO()
+    
+    with zipfile.ZipFile(zip_buffer, 'w', zipfile.ZIP_DEFLATED) as zip_file:
+        # Create manifest.json
+        manifest = {
+            "version": "1.0",
+            "profile": {
+                "name": profile.name,
+                "description": profile.description,
+                "language": profile.language,
+            }
+        }
+        zip_file.writestr("manifest.json", json.dumps(manifest, indent=2))
+        
+        # Create samples.json mapping
+        samples_data = {}
+        profile_dir = _get_profiles_dir() / profile_id
+        
+        for sample in samples:
+            # Get filename from audio_path (should be {sample_id}.wav)
+            audio_path = Path(sample.audio_path)
+            filename = audio_path.name
+            
+            # Read audio file
+            if not audio_path.exists():
+                raise ValueError(f"Audio file not found: {audio_path}")
+            
+            # Add to samples directory in ZIP
+            zip_path = f"samples/{filename}"
+            zip_file.write(audio_path, zip_path)
+            
+            # Map filename to reference text
+            samples_data[filename] = sample.reference_text
+        
+        zip_file.writestr("samples.json", json.dumps(samples_data, indent=2))
+    
+    zip_buffer.seek(0)
+    return zip_buffer.read()
+
+
+async def import_profile_from_zip(file_bytes: bytes, db: Session) -> VoiceProfileResponse:
+    """
+    Import a voice profile from a ZIP archive.
+    
+    Args:
+        file_bytes: ZIP file contents
+        db: Database session
+        
+    Returns:
+        Created profile
+        
+    Raises:
+        ValueError: If ZIP is invalid or missing required files
+    """
+    zip_buffer = io.BytesIO(file_bytes)
+    
+    try:
+        with zipfile.ZipFile(zip_buffer, 'r') as zip_file:
+            # Validate ZIP structure
+            namelist = zip_file.namelist()
+            
+            if "manifest.json" not in namelist:
+                raise ValueError("ZIP archive missing manifest.json")
+            
+            if "samples.json" not in namelist:
+                raise ValueError("ZIP archive missing samples.json")
+            
+            # Read manifest
+            manifest_data = json.loads(zip_file.read("manifest.json"))
+            
+            if "version" not in manifest_data:
+                raise ValueError("Invalid manifest.json: missing version")
+            
+            if "profile" not in manifest_data:
+                raise ValueError("Invalid manifest.json: missing profile")
+            
+            profile_data = manifest_data["profile"]
+            
+            # Read samples mapping
+            samples_data = json.loads(zip_file.read("samples.json"))
+            
+            if not isinstance(samples_data, dict):
+                raise ValueError("Invalid samples.json: must be a dictionary")
+            
+            # Get unique profile name
+            original_name = profile_data.get("name", "Imported Profile")
+            unique_name = _get_unique_profile_name(original_name, db)
+            
+            # Create profile
+            profile_create = VoiceProfileCreate(
+                name=unique_name,
+                description=profile_data.get("description"),
+                language=profile_data.get("language", "en"),
+            )
+            
+            profile = await create_profile(profile_create, db)
+            
+            # Extract and add samples
+            profile_dir = _get_profiles_dir() / profile.id
+            profile_dir.mkdir(parents=True, exist_ok=True)
+            
+            for filename, reference_text in samples_data.items():
+                # Validate filename
+                if not filename.endswith('.wav'):
+                    raise ValueError(f"Invalid sample filename: {filename} (must be .wav)")
+                
+                # Extract audio file to temp location
+                zip_path = f"samples/{filename}"
+                
+                if zip_path not in namelist:
+                    raise ValueError(f"Sample file not found in ZIP: {zip_path}")
+                
+                # Extract to temporary file
+                import tempfile
+                with tempfile.NamedTemporaryFile(suffix=".wav", delete=False) as tmp:
+                    tmp.write(zip_file.read(zip_path))
+                    tmp_path = tmp.name
+                
+                try:
+                    # Add sample to profile
+                    await add_profile_sample(
+                        profile.id,
+                        tmp_path,
+                        reference_text,
+                        db,
+                    )
+                finally:
+                    # Clean up temp file
+                    Path(tmp_path).unlink(missing_ok=True)
+            
+            return profile
+            
+    except zipfile.BadZipFile:
+        raise ValueError("Invalid ZIP file")
+    except json.JSONDecodeError as e:
+        raise ValueError(f"Invalid JSON in archive: {e}")
+    except Exception as e:
+        if isinstance(e, ValueError):
+            raise
+        raise ValueError(f"Error importing profile: {str(e)}")
+
+
+def export_generation_to_zip(generation_id: str, db: Session) -> bytes:
+    """
+    Export a generation to a ZIP archive.
+    
+    Args:
+        generation_id: Generation ID to export
+        db: Database session
+        
+    Returns:
+        ZIP file contents as bytes
+        
+    Raises:
+        ValueError: If generation not found
+    """
+    # Get generation
+    generation = db.query(DBGeneration).filter_by(id=generation_id).first()
+    if not generation:
+        raise ValueError(f"Generation {generation_id} not found")
+    
+    # Get profile info
+    profile = db.query(DBVoiceProfile).filter_by(id=generation.profile_id).first()
+    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}")
+    
+    # Create ZIP in memory
+    zip_buffer = io.BytesIO()
+    
+    with zipfile.ZipFile(zip_buffer, 'w', zipfile.ZIP_DEFLATED) as zip_file:
+        # Create manifest.json
+        manifest = {
+            "version": "1.0",
+            "generation": {
+                "id": generation.id,
+                "text": generation.text,
+                "language": generation.language,
+                "duration": generation.duration,
+                "seed": generation.seed,
+                "instruct": generation.instruct,
+                "created_at": generation.created_at.isoformat(),
+            },
+            "profile": {
+                "id": profile.id,
+                "name": profile.name,
+                "description": profile.description,
+                "language": profile.language,
+            }
+        }
+        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}")
+    
+    zip_buffer.seek(0)
+    return zip_buffer.read()
+
+
+async def import_generation_from_zip(file_bytes: bytes, db: Session) -> dict:
+    """
+    Import a generation from a ZIP archive.
+    
+    Args:
+        file_bytes: ZIP file contents
+        db: Database session
+        
+    Returns:
+        Dictionary with generation ID and profile info
+        
+    Raises:
+        ValueError: If ZIP is invalid or missing required files
+    """
+    from pathlib import Path
+    import tempfile
+    import shutil
+    from datetime import datetime
+    from . import config
+    
+    zip_buffer = io.BytesIO(file_bytes)
+    
+    try:
+        with zipfile.ZipFile(zip_buffer, 'r') as zip_file:
+            # Validate ZIP structure
+            namelist = zip_file.namelist()
+            
+            if "manifest.json" not in namelist:
+                raise ValueError("ZIP archive missing manifest.json")
+            
+            # Read manifest
+            manifest_data = json.loads(zip_file.read("manifest.json"))
+            
+            if "version" not in manifest_data:
+                raise ValueError("Invalid manifest.json: missing version")
+            
+            if "generation" not in manifest_data:
+                raise ValueError("Invalid manifest.json: missing generation data")
+            
+            generation_data = manifest_data["generation"]
+            profile_data = manifest_data.get("profile", {})
+            
+            # Validate required fields
+            required_fields = ["text", "language", "duration"]
+            for field in required_fields:
+                if field not in generation_data:
+                    raise ValueError(f"Invalid manifest.json: missing generation.{field}")
+            
+            # Find audio file in archive
+            audio_files = [f for f in namelist if f.startswith("audio/") and f.endswith(".wav")]
+            if not audio_files:
+                raise ValueError("No audio file found in ZIP archive")
+            
+            audio_file_path = audio_files[0]
+            
+            # Check if we should match an existing profile or create metadata
+            profile_id = None
+            profile_name = profile_data.get("name", "Unknown Profile")
+            
+            # Try to find matching profile by name
+            if profile_name and profile_name != "Unknown Profile":
+                existing_profile = db.query(DBVoiceProfile).filter_by(name=profile_name).first()
+                if existing_profile:
+                    profile_id = existing_profile.id
+            
+            # If no matching profile, use a placeholder or the first available profile
+            if not profile_id:
+                # Get any profile, or None if no profiles exist
+                any_profile = db.query(DBVoiceProfile).first()
+                if any_profile:
+                    profile_id = any_profile.id
+                    profile_name = any_profile.name
+                else:
+                    raise ValueError("No voice profiles found. Please create a profile before importing generations.")
+            
+            # Extract audio file to temporary location
+            with tempfile.NamedTemporaryFile(suffix=".wav", delete=False) as tmp:
+                tmp.write(zip_file.read(audio_file_path))
+                tmp_path = tmp.name
+            
+            try:
+                # Create generations directory
+                generations_dir = config.get_generations_dir()
+                generations_dir.mkdir(parents=True, exist_ok=True)
+                
+                # Generate new ID for this generation
+                new_generation_id = str(__import__('uuid').uuid4())
+                
+                # Copy audio to generations directory
+                audio_dest = generations_dir / f"{new_generation_id}.wav"
+                shutil.copy(tmp_path, audio_dest)
+                
+                # Create generation record
+                db_generation = DBGeneration(
+                    id=new_generation_id,
+                    profile_id=profile_id,
+                    text=generation_data["text"],
+                    language=generation_data["language"],
+                    audio_path=str(audio_dest),
+                    duration=generation_data["duration"],
+                    seed=generation_data.get("seed"),
+                    instruct=generation_data.get("instruct"),
+                    created_at=datetime.utcnow(),
+                )
+                
+                db.add(db_generation)
+                db.commit()
+                db.refresh(db_generation)
+                
+                return {
+                    "id": db_generation.id,
+                    "profile_id": profile_id,
+                    "profile_name": profile_name,
+                    "text": db_generation.text,
+                    "message": f"Generation imported successfully (assigned to profile: {profile_name})"
+                }
+                
+            finally:
+                # Clean up temp file
+                Path(tmp_path).unlink(missing_ok=True)
+            
+    except zipfile.BadZipFile:
+        raise ValueError("Invalid ZIP file")
+    except json.JSONDecodeError as e:
+        raise ValueError(f"Invalid JSON in archive: {e}")
+    except Exception as e:
+        if isinstance(e, ValueError):
+            raise
+        raise ValueError(f"Error importing generation: {str(e)}")

backend/main.py

@@ -6,20 +6,23 @@ Handles voice cloning, generation history, and server mode.
 
 from fastapi import FastAPI, Depends, UploadFile, File, Form, HTTPException
 from fastapi.middleware.cors import CORSMiddleware
-from fastapi.responses import FileResponse
+from fastapi.responses import FileResponse, StreamingResponse
 from fastapi.staticfiles import StaticFiles
 from sqlalchemy.orm import Session
 from typing import List, Optional
+from datetime import datetime
 import uvicorn
 import argparse
 import torch
 import tempfile
+import io
 from pathlib import Path
 import uuid
 
-from . import database, models, profiles, history, tts, transcribe, config
+from . import database, models, profiles, history, tts, transcribe, config, export_import, channels, stories
 from .database import get_db, Generation as DBGeneration, VoiceProfile as DBVoiceProfile
 from .utils.progress import get_progress_manager
+from .utils.tasks import get_task_manager
 
 app = FastAPI(
     title="voicebox API",
@@ -44,7 +47,7 @@ app.add_middleware(
 @app.get("/")
 async def root():
     """Root endpoint."""
-    return {"message": "voicebox API", "version": "0.1.0"}
+    return {"message": "voicebox API", "version": "0.1.6"}
 
 
 @app.get("/health", response_model=models.HealthResponse)
@@ -55,10 +58,14 @@ async def health():
     import os
     
     tts_model = tts.get_tts_model()
-    gpu_available = torch.cuda.is_available()
+
-    
+    # Check for GPU availability (CUDA or MPS)
+    has_cuda = torch.cuda.is_available()
+    has_mps = hasattr(torch.backends, 'mps') and torch.backends.mps.is_available()
+    gpu_available = has_cuda or has_mps
+
     vram_used = None
-    if gpu_available:
+    if has_cuda:
         vram_used = torch.cuda.memory_allocated() / 1024 / 1024  # MB
     
     # Check if model is loaded - use the same logic as model status endpoint
@@ -140,6 +147,33 @@ async def list_profiles(db: Session = Depends(get_db)):
     return await profiles.list_profiles(db)
 
 
+@app.post("/profiles/import", response_model=models.VoiceProfileResponse)
+async def import_profile(
+    file: UploadFile = File(...),
+    db: Session = Depends(get_db),
+):
+    """Import a voice profile from a ZIP archive."""
+    # Validate file size (max 100MB)
+    MAX_FILE_SIZE = 100 * 1024 * 1024  # 100MB
+    
+    # Read file content
+    content = await file.read()
+    
+    if len(content) > MAX_FILE_SIZE:
+        raise HTTPException(
+            status_code=400,
+            detail=f"File too large. Maximum size is {MAX_FILE_SIZE / (1024 * 1024)}MB"
+        )
+    
+    try:
+        profile = await export_import.import_profile_from_zip(content, db)
+        return profile
+    except ValueError as e:
+        raise HTTPException(status_code=400, detail=str(e))
+    except Exception as e:
+        raise HTTPException(status_code=500, detail=str(e))
+
+
 @app.get("/profiles/{profile_id}", response_model=models.VoiceProfileResponse)
 async def get_profile(
     profile_id: str,
@@ -227,6 +261,160 @@ async def delete_profile_sample(
     return {"message": "Sample deleted successfully"}
 
 
+@app.get("/profiles/{profile_id}/export")
+async def export_profile(
+    profile_id: str,
+    db: Session = Depends(get_db),
+):
+    """Export a voice profile as a ZIP archive."""
+    try:
+        # Get profile to get name for filename
+        profile = await profiles.get_profile(profile_id, db)
+        if not profile:
+            raise HTTPException(status_code=404, detail="Profile not found")
+        
+        # Export to ZIP
+        zip_bytes = export_import.export_profile_to_zip(profile_id, db)
+        
+        # Create safe filename
+        safe_name = "".join(c for c in profile.name if c.isalnum() or c in (' ', '-', '_')).strip()
+        if not safe_name:
+            safe_name = "profile"
+        filename = f"profile-{safe_name}.voicebox.zip"
+        
+        # Return as streaming response
+        return StreamingResponse(
+            io.BytesIO(zip_bytes),
+            media_type="application/zip",
+            headers={
+                "Content-Disposition": f'attachment; filename="{filename}"'
+            }
+        )
+    except ValueError as e:
+        raise HTTPException(status_code=400, detail=str(e))
+    except Exception as e:
+        raise HTTPException(status_code=500, detail=str(e))
+
+
+# ============================================
+# AUDIO CHANNEL ENDPOINTS
+# ============================================
+
+@app.get("/channels", response_model=List[models.AudioChannelResponse])
+async def list_channels(db: Session = Depends(get_db)):
+    """List all audio channels."""
+    return await channels.list_channels(db)
+
+
+@app.post("/channels", response_model=models.AudioChannelResponse)
+async def create_channel(
+    data: models.AudioChannelCreate,
+    db: Session = Depends(get_db),
+):
+    """Create a new audio channel."""
+    try:
+        return await channels.create_channel(data, db)
+    except ValueError as e:
+        raise HTTPException(status_code=400, detail=str(e))
+
+
+@app.get("/channels/{channel_id}", response_model=models.AudioChannelResponse)
+async def get_channel(
+    channel_id: str,
+    db: Session = Depends(get_db),
+):
+    """Get an audio channel by ID."""
+    channel = await channels.get_channel(channel_id, db)
+    if not channel:
+        raise HTTPException(status_code=404, detail="Channel not found")
+    return channel
+
+
+@app.put("/channels/{channel_id}", response_model=models.AudioChannelResponse)
+async def update_channel(
+    channel_id: str,
+    data: models.AudioChannelUpdate,
+    db: Session = Depends(get_db),
+):
+    """Update an audio channel."""
+    try:
+        channel = await channels.update_channel(channel_id, data, db)
+        if not channel:
+            raise HTTPException(status_code=404, detail="Channel not found")
+        return channel
+    except ValueError as e:
+        raise HTTPException(status_code=400, detail=str(e))
+
+
+@app.delete("/channels/{channel_id}")
+async def delete_channel(
+    channel_id: str,
+    db: Session = Depends(get_db),
+):
+    """Delete an audio channel."""
+    try:
+        success = await channels.delete_channel(channel_id, db)
+        if not success:
+            raise HTTPException(status_code=404, detail="Channel not found")
+        return {"message": "Channel deleted successfully"}
+    except ValueError as e:
+        raise HTTPException(status_code=400, detail=str(e))
+
+
+@app.get("/channels/{channel_id}/voices")
+async def get_channel_voices(
+    channel_id: str,
+    db: Session = Depends(get_db),
+):
+    """Get list of profile IDs assigned to a channel."""
+    try:
+        profile_ids = await channels.get_channel_voices(channel_id, db)
+        return {"profile_ids": profile_ids}
+    except ValueError as e:
+        raise HTTPException(status_code=400, detail=str(e))
+
+
+@app.put("/channels/{channel_id}/voices")
+async def set_channel_voices(
+    channel_id: str,
+    data: models.ChannelVoiceAssignment,
+    db: Session = Depends(get_db),
+):
+    """Set which voices are assigned to a channel."""
+    try:
+        await channels.set_channel_voices(channel_id, data, db)
+        return {"message": "Channel voices updated successfully"}
+    except ValueError as e:
+        raise HTTPException(status_code=400, detail=str(e))
+
+
+@app.get("/profiles/{profile_id}/channels")
+async def get_profile_channels(
+    profile_id: str,
+    db: Session = Depends(get_db),
+):
+    """Get list of channel IDs assigned to a profile."""
+    try:
+        channel_ids = await channels.get_profile_channels(profile_id, db)
+        return {"channel_ids": channel_ids}
+    except ValueError as e:
+        raise HTTPException(status_code=400, detail=str(e))
+
+
+@app.put("/profiles/{profile_id}/channels")
+async def set_profile_channels(
+    profile_id: str,
+    data: models.ProfileChannelAssignment,
+    db: Session = Depends(get_db),
+):
+    """Set which channels a profile is assigned to."""
+    try:
+        await channels.set_profile_channels(profile_id, data, db)
+        return {"message": "Profile channels updated successfully"}
+    except ValueError as e:
+        raise HTTPException(status_code=400, detail=str(e))
+
+
 # ============================================
 # GENERATION ENDPOINTS
 # ============================================
@@ -237,7 +425,17 @@ async def generate_speech(
     db: Session = Depends(get_db),
 ):
     """Generate speech from text using a voice profile."""
+    task_manager = get_task_manager()
+    generation_id = str(uuid.uuid4())
+    
     try:
+        # Start tracking generation
+        task_manager.start_generation(
+            task_id=generation_id,
+            profile_id=data.profile_id,
+            text=data.text,
+        )
+        
         # Get profile
         profile = await profiles.get_profile(data.profile_id, db)
         if not profile:
@@ -251,9 +449,9 @@ async def generate_speech(
         
         # Generate audio
         tts_model = tts.get_tts_model()
-        # Load the requested model size if different from current
+        # Load the requested model size if different from current (async to not block)
         model_size = data.model_size or "1.7B"
-        tts_model.load_model(model_size)
+        await tts_model.load_model_async(model_size)
         audio, sample_rate = await tts_model.generate(
             data.text,
             voice_prompt,
@@ -266,7 +464,6 @@ async def generate_speech(
         duration = len(audio) / sample_rate
 
         # Save audio
-        generation_id = str(uuid.uuid4())
         audio_path = config.get_generations_dir() / f"{generation_id}.wav"
 
         from .utils.audio import save_audio
@@ -284,11 +481,16 @@ async def generate_speech(
             instruct=data.instruct,
         )
         
+        # Mark generation as complete
+        task_manager.complete_generation(generation_id)
+        
         return generation
         
     except ValueError as e:
+        task_manager.complete_generation(generation_id)
         raise HTTPException(status_code=400, detail=str(e))
     except Exception as e:
+        task_manager.complete_generation(generation_id)
         raise HTTPException(status_code=500, detail=str(e))
 
 
@@ -314,6 +516,39 @@ async def list_history(
     return await history.list_generations(query, db)
 
 
+@app.get("/history/stats")
+async def get_stats(db: Session = Depends(get_db)):
+    """Get generation statistics."""
+    return await history.get_generation_stats(db)
+
+
+@app.post("/history/import")
+async def import_generation(
+    file: UploadFile = File(...),
+    db: Session = Depends(get_db),
+):
+    """Import a generation from a ZIP archive."""
+    # Validate file size (max 50MB)
+    MAX_FILE_SIZE = 50 * 1024 * 1024  # 50MB
+    
+    # Read file content
+    content = await file.read()
+    
+    if len(content) > MAX_FILE_SIZE:
+        raise HTTPException(
+            status_code=400,
+            detail=f"File too large. Maximum size is {MAX_FILE_SIZE / (1024 * 1024)}MB"
+        )
+    
+    try:
+        result = await export_import.import_generation_from_zip(content, db)
+        return result
+    except ValueError as e:
+        raise HTTPException(status_code=400, detail=str(e))
+    except Exception as e:
+        raise HTTPException(status_code=500, detail=str(e))
+
+
 @app.get("/history/{generation_id}", response_model=models.HistoryResponse)
 async def get_generation(
     generation_id: str,
@@ -361,10 +596,68 @@ async def delete_generation(
     return {"message": "Generation deleted successfully"}
 
 
-@app.get("/history/stats")
+@app.get("/history/{generation_id}/export")
-async def get_stats(db: Session = Depends(get_db)):
+async def export_generation(
-    """Get generation statistics."""
+    generation_id: str,
-    return await history.get_generation_stats(db)
+    db: Session = Depends(get_db),
+):
+    """Export a generation as a ZIP archive."""
+    try:
+        # Get generation to create filename
+        generation = db.query(DBGeneration).filter_by(id=generation_id).first()
+        if not generation:
+            raise HTTPException(status_code=404, detail="Generation not found")
+        
+        # Export to ZIP
+        zip_bytes = export_import.export_generation_to_zip(generation_id, db)
+        
+        # Create safe filename from text
+        safe_text = "".join(c for c in generation.text[:30] if c.isalnum() or c in (' ', '-', '_')).strip()
+        if not safe_text:
+            safe_text = "generation"
+        filename = f"generation-{safe_text}.voicebox.zip"
+        
+        # Return as streaming response
+        return StreamingResponse(
+            io.BytesIO(zip_bytes),
+            media_type="application/zip",
+            headers={
+                "Content-Disposition": f'attachment; filename="{filename}"'
+            }
+        )
+    except ValueError as e:
+        raise HTTPException(status_code=400, detail=str(e))
+    except Exception as e:
+        raise HTTPException(status_code=500, detail=str(e))
+
+
+@app.get("/history/{generation_id}/export-audio")
+async def export_generation_audio(
+    generation_id: str,
+    db: Session = Depends(get_db),
+):
+    """Export only the audio file from a generation."""
+    generation = db.query(DBGeneration).filter_by(id=generation_id).first()
+    if not generation:
+        raise HTTPException(status_code=404, detail="Generation not found")
+    
+    audio_path = Path(generation.audio_path)
+    if not audio_path.exists():
+        raise HTTPException(status_code=404, detail="Audio file not found")
+    
+    # Create safe filename from text
+    safe_text = "".join(c for c in generation.text[:30] if c.isalnum() or c in (' ', '-', '_')).strip()
+    if not safe_text:
+        safe_text = "generation"
+    filename = f"{safe_text}.wav"
+    
+    return FileResponse(
+        audio_path,
+        media_type="audio/wav",
+        headers={
+            "Content-Disposition": f'attachment; filename="{filename}"'
+        }
+    )
 
 
 # ============================================
@@ -405,6 +698,168 @@ async def transcribe_audio(
         Path(tmp_path).unlink(missing_ok=True)
 
 
+# ============================================
+# STORY ENDPOINTS
+# ============================================
+
+@app.get("/stories", response_model=List[models.StoryResponse])
+async def list_stories(db: Session = Depends(get_db)):
+    """List all stories."""
+    return await stories.list_stories(db)
+
+
+@app.post("/stories", response_model=models.StoryResponse)
+async def create_story(
+    data: models.StoryCreate,
+    db: Session = Depends(get_db),
+):
+    """Create a new story."""
+    try:
+        return await stories.create_story(data, db)
+    except Exception as e:
+        raise HTTPException(status_code=400, detail=str(e))
+
+
+@app.get("/stories/{story_id}", response_model=models.StoryDetailResponse)
+async def get_story(
+    story_id: str,
+    db: Session = Depends(get_db),
+):
+    """Get a story with all its items."""
+    story = await stories.get_story(story_id, db)
+    if not story:
+        raise HTTPException(status_code=404, detail="Story not found")
+    return story
+
+
+@app.put("/stories/{story_id}", response_model=models.StoryResponse)
+async def update_story(
+    story_id: str,
+    data: models.StoryCreate,
+    db: Session = Depends(get_db),
+):
+    """Update a story."""
+    story = await stories.update_story(story_id, data, db)
+    if not story:
+        raise HTTPException(status_code=404, detail="Story not found")
+    return story
+
+
+@app.delete("/stories/{story_id}")
+async def delete_story(
+    story_id: str,
+    db: Session = Depends(get_db),
+):
+    """Delete a story."""
+    success = await stories.delete_story(story_id, db)
+    if not success:
+        raise HTTPException(status_code=404, detail="Story not found")
+    return {"message": "Story deleted successfully"}
+
+
+@app.post("/stories/{story_id}/items", response_model=models.StoryItemDetail)
+async def add_story_item(
+    story_id: str,
+    data: models.StoryItemCreate,
+    db: Session = Depends(get_db),
+):
+    """Add a generation to a story."""
+    item = await stories.add_item_to_story(story_id, data, db)
+    if not item:
+        raise HTTPException(status_code=404, detail="Story or generation not found")
+    return item
+
+
+@app.delete("/stories/{story_id}/items/{generation_id}")
+async def remove_story_item(
+    story_id: str,
+    generation_id: str,
+    db: Session = Depends(get_db),
+):
+    """Remove a generation from a story."""
+    success = await stories.remove_item_from_story(story_id, generation_id, db)
+    if not success:
+        raise HTTPException(status_code=404, detail="Story item not found")
+    return {"message": "Item removed successfully"}
+
+
+@app.put("/stories/{story_id}/items/times")
+async def update_story_item_times(
+    story_id: str,
+    data: models.StoryItemBatchUpdate,
+    db: Session = Depends(get_db),
+):
+    """Update story item timecodes."""
+    success = await stories.update_story_item_times(story_id, data, db)
+    if not success:
+        raise HTTPException(status_code=400, detail="Invalid timecode update request")
+    return {"message": "Item timecodes updated successfully"}
+
+
+@app.put("/stories/{story_id}/items/reorder", response_model=List[models.StoryItemDetail])
+async def reorder_story_items(
+    story_id: str,
+    data: models.StoryItemReorder,
+    db: Session = Depends(get_db),
+):
+    """Reorder story items and recalculate timecodes."""
+    items = await stories.reorder_story_items(story_id, data.generation_ids, db)
+    if items is None:
+        raise HTTPException(status_code=400, detail="Invalid reorder request - ensure all generation IDs belong to this story")
+    return items
+
+
+@app.put("/stories/{story_id}/items/{generation_id}/move", response_model=models.StoryItemDetail)
+async def move_story_item(
+    story_id: str,
+    generation_id: str,
+    data: models.StoryItemMove,
+    db: Session = Depends(get_db),
+):
+    """Move a story item (update position and/or track)."""
+    item = await stories.move_story_item(story_id, generation_id, data, db)
+    if item is None:
+        raise HTTPException(status_code=404, detail="Story item not found")
+    return item
+
+
+@app.get("/stories/{story_id}/export-audio")
+async def export_story_audio(
+    story_id: str,
+    db: Session = Depends(get_db),
+):
+    """Export story as single mixed audio file with timecode-based mixing."""
+    try:
+        # Get story to create filename
+        story = db.query(database.Story).filter_by(id=story_id).first()
+        if not story:
+            raise HTTPException(status_code=404, detail="Story not found")
+        
+        # Export audio
+        audio_bytes = await stories.export_story_audio(story_id, db)
+        if not audio_bytes:
+            raise HTTPException(status_code=400, detail="Story has no audio items")
+        
+        # Create safe filename
+        safe_name = "".join(c for c in story.name if c.isalnum() or c in (' ', '-', '_')).strip()
+        if not safe_name:
+            safe_name = "story"
+        filename = f"{safe_name}.wav"
+        
+        # Return as streaming response
+        return StreamingResponse(
+            io.BytesIO(audio_bytes),
+            media_type="audio/wav",
+            headers={
+                "Content-Disposition": f'attachment; filename="{filename}"'
+            }
+        )
+    except HTTPException:
+        raise
+    except Exception as e:
+        raise HTTPException(status_code=500, detail=str(e))
+
+
 # ============================================
 # FILE SERVING
 # ============================================
@@ -427,6 +882,26 @@ async def get_audio(generation_id: str, db: Session = Depends(get_db)):
     )
 
 
+@app.get("/samples/{sample_id}")
+async def get_sample_audio(sample_id: str, db: Session = Depends(get_db)):
+    """Serve profile sample audio file."""
+    from .database import ProfileSample as DBProfileSample
+    
+    sample = db.query(DBProfileSample).filter_by(id=sample_id).first()
+    if not sample:
+        raise HTTPException(status_code=404, detail="Sample not found")
+    
+    audio_path = Path(sample.audio_path)
+    if not audio_path.exists():
+        raise HTTPException(status_code=404, detail="Audio file not found")
+    
+    return FileResponse(
+        audio_path,
+        media_type="audio/wav",
+        filename=f"sample_{sample_id}.wav",
+    )
+
+
 # ============================================
 # MODEL MANAGEMENT
 # ============================================
@@ -436,7 +911,7 @@ async def load_model(model_size: str = "1.7B"):
     """Manually load TTS model."""
     try:
         tts_model = tts.get_tts_model()
-        tts_model.load_model(model_size)
+        await tts_model.load_model_async(model_size)
         return {"message": f"Model {model_size} loaded successfully"}
     except Exception as e:
         raise HTTPException(status_code=500, detail=str(e))
@@ -659,6 +1134,8 @@ async def trigger_model_download(request: models.ModelDownloadRequest):
     """Trigger download of a specific model."""
     import asyncio
     
+    task_manager = get_task_manager()
+    
     model_configs = {
         "qwen-tts-1.7B": {
             "model_size": "1.7B",
@@ -692,26 +1169,191 @@ async def trigger_model_download(request: models.ModelDownloadRequest):
     config = model_configs[request.model_name]
     
     try:
+        # Start tracking download
+        task_manager.start_download(request.model_name)
+        
         # Trigger download by loading the model (which will download if not cached)
         # Run in background to avoid blocking
         await asyncio.to_thread(config["load_func"])
         
+        # Mark download as complete
+        task_manager.complete_download(request.model_name)
+        
         return {"message": f"Model {request.model_name} download started"}
     except Exception as e:
+        # Mark download as failed
+        task_manager.error_download(request.model_name, str(e))
         raise HTTPException(status_code=500, detail=str(e))
 
 
+@app.delete("/models/{model_name}")
+async def delete_model(model_name: str):
+    """Delete a downloaded model from the HuggingFace cache."""
+    import shutil
+    import os
+    
+    # Map model names to HuggingFace repo IDs
+    model_configs = {
+        "qwen-tts-1.7B": {
+            "hf_repo_id": "Qwen/Qwen3-TTS-12Hz-1.7B-Base",
+            "model_size": "1.7B",
+            "model_type": "tts",
+        },
+        "qwen-tts-0.6B": {
+            "hf_repo_id": "Qwen/Qwen3-TTS-12Hz-0.6B-Base",
+            "model_size": "0.6B",
+            "model_type": "tts",
+        },
+        "whisper-base": {
+            "hf_repo_id": "openai/whisper-base",
+            "model_size": "base",
+            "model_type": "whisper",
+        },
+        "whisper-small": {
+            "hf_repo_id": "openai/whisper-small",
+            "model_size": "small",
+            "model_type": "whisper",
+        },
+        "whisper-medium": {
+            "hf_repo_id": "openai/whisper-medium",
+            "model_size": "medium",
+            "model_type": "whisper",
+        },
+        "whisper-large": {
+            "hf_repo_id": "openai/whisper-large",
+            "model_size": "large",
+            "model_type": "whisper",
+        },
+    }
+    
+    if model_name not in model_configs:
+        raise HTTPException(status_code=400, detail=f"Unknown model: {model_name}")
+    
+    config = model_configs[model_name]
+    hf_repo_id = config["hf_repo_id"]
+    
+    try:
+        # Check if model is loaded and unload it first
+        if config["model_type"] == "tts":
+            tts_model = tts.get_tts_model()
+            if tts_model.is_loaded() and tts_model.model_size == config["model_size"]:
+                tts.unload_tts_model()
+        elif config["model_type"] == "whisper":
+            whisper_model = transcribe.get_whisper_model()
+            if whisper_model.is_loaded() and whisper_model.model_size == config["model_size"]:
+                transcribe.unload_whisper_model()
+        
+        # Find and delete the cache directory
+        cache_dir = os.path.expanduser("~/.cache/huggingface/hub")
+        repo_cache_dir = Path(cache_dir) / ("models--" + hf_repo_id.replace("/", "--"))
+        
+        # Check if the cache directory exists
+        if not repo_cache_dir.exists():
+            raise HTTPException(status_code=404, detail=f"Model {model_name} not found in cache")
+        
+        # Delete the entire cache directory for this model
+        try:
+            shutil.rmtree(repo_cache_dir)
+        except OSError as e:
+            raise HTTPException(
+                status_code=500,
+                detail=f"Failed to delete model cache directory: {str(e)}"
+            )
+        
+        return {"message": f"Model {model_name} deleted successfully"}
+        
+    except HTTPException:
+        raise
+    except Exception as e:
+        raise HTTPException(status_code=500, detail=f"Failed to delete model: {str(e)}")
+
+
+# ============================================
+# TASK MANAGEMENT
+# ============================================
+
+@app.get("/tasks/active", response_model=models.ActiveTasksResponse)
+async def get_active_tasks():
+    """Return all currently active downloads and generations."""
+    task_manager = get_task_manager()
+    progress_manager = get_progress_manager()
+    
+    # Get active downloads from both task manager and progress manager
+    # Task manager tracks which downloads are active
+    # Progress manager has the actual progress data
+    active_downloads = []
+    task_manager_downloads = task_manager.get_active_downloads()
+    progress_active = progress_manager.get_all_active()
+    
+    # Combine data from both sources
+    download_map = {task.model_name: task for task in task_manager_downloads}
+    progress_map = {p["model_name"]: p for p in progress_active}
+    
+    # Create unified list
+    all_model_names = set(download_map.keys()) | set(progress_map.keys())
+    for model_name in all_model_names:
+        task = download_map.get(model_name)
+        progress = progress_map.get(model_name)
+        
+        if task:
+            active_downloads.append(models.ActiveDownloadTask(
+                model_name=model_name,
+                status=task.status,
+                started_at=task.started_at,
+            ))
+        elif progress:
+            # Progress exists but no task - create from progress data
+            timestamp_str = progress.get("timestamp")
+            if timestamp_str:
+                try:
+                    started_at = datetime.fromisoformat(timestamp_str.replace('Z', '+00:00'))
+                except (ValueError, AttributeError):
+                    started_at = datetime.utcnow()
+            else:
+                started_at = datetime.utcnow()
+            
+            active_downloads.append(models.ActiveDownloadTask(
+                model_name=model_name,
+                status=progress.get("status", "downloading"),
+                started_at=started_at,
+            ))
+    
+    # Get active generations
+    active_generations = []
+    for gen_task in task_manager.get_active_generations():
+        active_generations.append(models.ActiveGenerationTask(
+            task_id=gen_task.task_id,
+            profile_id=gen_task.profile_id,
+            text_preview=gen_task.text_preview,
+            started_at=gen_task.started_at,
+        ))
+    
+    return models.ActiveTasksResponse(
+        downloads=active_downloads,
+        generations=active_generations,
+    )
+
+
 # ============================================
 # STARTUP & SHUTDOWN
 # ============================================
 
+def _get_gpu_status() -> str:
+    """Get GPU availability status."""
+    if torch.cuda.is_available():
+        return f"CUDA ({torch.cuda.get_device_name(0)})"
+    elif hasattr(torch.backends, 'mps') and torch.backends.mps.is_available():
+        return "MPS (Apple Silicon)"
+    return "None (CPU only)"
+
+
 @app.on_event("startup")
 async def startup_event():
     """Run on application startup."""
     print("voicebox API starting up...")
     database.init_db()
     print(f"Database initialized at {database._db_path}")
-    print(f"GPU available: {torch.cuda.is_available()}")
+    print(f"GPU available: {_get_gpu_status()}")
 
 
 @app.on_event("shutdown")

backend/models.py

@@ -11,7 +11,7 @@ class VoiceProfileCreate(BaseModel):
     """Request model for creating a voice profile."""
     name: str = Field(..., min_length=1, max_length=100)
     description: Optional[str] = Field(None, max_length=500)
-    language: str = Field(default="en", pattern="^(en|zh)$")
+    language: str = Field(default="en", pattern="^(zh|en|ja|ko|de|fr|ru|pt|es|it)$")
 
 
 class VoiceProfileResponse(BaseModel):
@@ -47,7 +47,7 @@ class GenerationRequest(BaseModel):
     """Request model for voice generation."""
     profile_id: str
     text: str = Field(..., min_length=1, max_length=5000)
-    language: str = Field(default="en", pattern="^(en|zh)$")
+    language: str = Field(default="en", pattern="^(zh|en|ja|ko|de|fr|ru|pt|es|it)$")
     seed: Optional[int] = Field(None, ge=0)
     model_size: Optional[str] = Field(default="1.7B", pattern="^(1\\.7B|0\\.6B)$")
     instruct: Optional[str] = Field(None, max_length=500)
@@ -138,3 +138,142 @@ class ModelStatusListResponse(BaseModel):
 class ModelDownloadRequest(BaseModel):
     """Request model for triggering model download."""
     model_name: str
+
+
+class ActiveDownloadTask(BaseModel):
+    """Response model for active download task."""
+    model_name: str
+    status: str
+    started_at: datetime
+
+
+class ActiveGenerationTask(BaseModel):
+    """Response model for active generation task."""
+    task_id: str
+    profile_id: str
+    text_preview: str
+    started_at: datetime
+
+
+class ActiveTasksResponse(BaseModel):
+    """Response model for active tasks."""
+    downloads: List[ActiveDownloadTask]
+    generations: List[ActiveGenerationTask]
+
+
+class AudioChannelCreate(BaseModel):
+    """Request model for creating an audio channel."""
+    name: str = Field(..., min_length=1, max_length=100)
+    device_ids: List[str] = Field(default_factory=list)
+
+
+class AudioChannelUpdate(BaseModel):
+    """Request model for updating an audio channel."""
+    name: Optional[str] = Field(None, min_length=1, max_length=100)
+    device_ids: Optional[List[str]] = None
+
+
+class AudioChannelResponse(BaseModel):
+    """Response model for audio channel."""
+    id: str
+    name: str
+    is_default: bool
+    device_ids: List[str]
+    created_at: datetime
+
+    class Config:
+        from_attributes = True
+
+
+class ChannelVoiceAssignment(BaseModel):
+    """Request model for assigning voices to a channel."""
+    profile_ids: List[str]
+
+
+class ProfileChannelAssignment(BaseModel):
+    """Request model for assigning channels to a profile."""
+    channel_ids: List[str]
+
+
+class StoryCreate(BaseModel):
+    """Request model for creating a story."""
+    name: str = Field(..., min_length=1, max_length=100)
+    description: Optional[str] = Field(None, max_length=500)
+
+
+class StoryResponse(BaseModel):
+    """Response model for story (list view)."""
+    id: str
+    name: str
+    description: Optional[str]
+    created_at: datetime
+    updated_at: datetime
+    item_count: int = 0
+
+    class Config:
+        from_attributes = True
+
+
+class StoryItemDetail(BaseModel):
+    """Detail model for story item with generation info."""
+    id: str
+    story_id: str
+    generation_id: str
+    start_time_ms: int
+    track: int = 0
+    created_at: datetime
+    # Generation details
+    profile_id: str
+    profile_name: str
+    text: str
+    language: str
+    audio_path: str
+    duration: float
+    seed: Optional[int]
+    instruct: Optional[str]
+    generation_created_at: datetime
+
+    class Config:
+        from_attributes = True
+
+
+class StoryDetailResponse(BaseModel):
+    """Response model for story with items."""
+    id: str
+    name: str
+    description: Optional[str]
+    created_at: datetime
+    updated_at: datetime
+    items: List[StoryItemDetail] = []
+
+    class Config:
+        from_attributes = True
+
+
+class StoryItemCreate(BaseModel):
+    """Request model for adding a generation to a story."""
+    generation_id: str
+    start_time_ms: Optional[int] = None  # If not provided, will be calculated automatically
+    track: Optional[int] = 0  # Track number (0 = main track)
+
+
+class StoryItemUpdateTime(BaseModel):
+    """Request model for updating a story item's timecode."""
+    generation_id: str
+    start_time_ms: int = Field(..., ge=0)
+
+
+class StoryItemBatchUpdate(BaseModel):
+    """Request model for batch updating story item timecodes."""
+    updates: List[StoryItemUpdateTime]
+
+
+class StoryItemReorder(BaseModel):
+    """Request model for reordering story items."""
+    generation_ids: List[str] = Field(..., min_length=1)
+
+
+class StoryItemMove(BaseModel):
+    """Request model for moving a story item (position and/or track)."""
+    start_time_ms: int = Field(..., ge=0)
+    track: int = 0

backend/server.py

@@ -5,45 +5,85 @@ This module provides an entry point that works with PyInstaller by using
 absolute imports instead of relative imports.
 """
 
-import argparse
+import sys
-import uvicorn
+import logging
 
-# Import the FastAPI app from the backend package
+# Set up logging FIRST, before any imports that might fail
-from backend.main import app
+logging.basicConfig(
-from backend import config, database
+    level=logging.INFO,
+    format='%(asctime)s - %(name)s - %(levelname)s - %(message)s',
+    stream=sys.stderr,  # Log to stderr so it's captured by Tauri
+)
+logger = logging.getLogger(__name__)
+
+# Log startup immediately to confirm binary execution
+logger.info("=" * 60)
+logger.info("voicebox-server starting up...")
+logger.info(f"Python version: {sys.version}")
+logger.info(f"Executable: {sys.executable}")
+logger.info(f"Arguments: {sys.argv}")
+logger.info("=" * 60)
+
+try:
+    logger.info("Importing argparse...")
+    import argparse
+    logger.info("Importing uvicorn...")
+    import uvicorn
+    logger.info("Standard library imports successful")
+
+    # Import the FastAPI app from the backend package
+    logger.info("Importing backend.config...")
+    from backend import config
+    logger.info("Importing backend.database...")
+    from backend import database
+    logger.info("Importing backend.main (this may take a while due to torch/transformers)...")
+    from backend.main import app
+    logger.info("Backend imports successful")
+except Exception as e:
+    logger.error(f"Failed to import required modules: {e}", exc_info=True)
+    sys.exit(1)
 
 if __name__ == "__main__":
-    parser = argparse.ArgumentParser(description="voicebox backend server")
+    try:
-    parser.add_argument(
+        parser = argparse.ArgumentParser(description="voicebox backend server")
-        "--host",
+        parser.add_argument(
-        type=str,
+            "--host",
-        default="127.0.0.1",
+            type=str,
-        help="Host to bind to (use 0.0.0.0 for remote access)",
+            default="127.0.0.1",
-    )
+            help="Host to bind to (use 0.0.0.0 for remote access)",
-    parser.add_argument(
+        )
-        "--port",
+        parser.add_argument(
-        type=int,
+            "--port",
-        default=8000,
+            type=int,
-        help="Port to bind to",
+            default=8000,
-    )
+            help="Port to bind to",
-    parser.add_argument(
+        )
-        "--data-dir",
+        parser.add_argument(
-        type=str,
+            "--data-dir",
-        default=None,
+            type=str,
-        help="Data directory for database, profiles, and generated audio",
+            default=None,
-    )
+            help="Data directory for database, profiles, and generated audio",
-    args = parser.parse_args()
+        )
+        args = parser.parse_args()
+        logger.info(f"Parsed arguments: host={args.host}, port={args.port}, data_dir={args.data_dir}")
 
-    # Set data directory if provided
+        # Set data directory if provided
-    if args.data_dir:
+        if args.data_dir:
-        config.set_data_dir(args.data_dir)
+            logger.info(f"Setting data directory to: {args.data_dir}")
+            config.set_data_dir(args.data_dir)
 
-    # Initialize database after data directory is set
+        # Initialize database after data directory is set
-    database.init_db()
+        logger.info("Initializing database...")
+        database.init_db()
+        logger.info("Database initialized successfully")
 
-    uvicorn.run(
+        logger.info(f"Starting uvicorn server on {args.host}:{args.port}...")
-        app,
+        uvicorn.run(
-        host=args.host,
+            app,
-        port=args.port,
+            host=args.host,
-        log_level="info",
+            port=args.port,
-    )
+            log_level="info",
+        )
+    except Exception as e:
+        logger.error(f"Server startup failed: {e}", exc_info=True)
+        sys.exit(1)

backend/stories.py

@@ -0,0 +1,672 @@
+"""
+Story management module.
+"""
+
+from typing import List, Optional
+from datetime import datetime
+import uuid
+import tempfile
+from pathlib import Path
+from sqlalchemy.orm import Session
+from sqlalchemy import func
+
+from .models import (
+    StoryCreate,
+    StoryResponse,
+    StoryDetailResponse,
+    StoryItemDetail,
+    StoryItemCreate,
+    StoryItemBatchUpdate,
+    StoryItemMove,
+)
+from .database import Story as DBStory, StoryItem as DBStoryItem, Generation as DBGeneration, VoiceProfile as DBVoiceProfile
+from .utils.audio import load_audio, save_audio
+import numpy as np
+
+
+async def create_story(
+    data: StoryCreate,
+    db: Session,
+) -> StoryResponse:
+    """
+    Create a new story.
+
+    Args:
+        data: Story creation data
+        db: Database session
+
+    Returns:
+        Created story
+    """
+    db_story = DBStory(
+        id=str(uuid.uuid4()),
+        name=data.name,
+        description=data.description,
+        created_at=datetime.utcnow(),
+        updated_at=datetime.utcnow(),
+    )
+
+    db.add(db_story)
+    db.commit()
+    db.refresh(db_story)
+
+    # Get item count
+    item_count = db.query(func.count(DBStoryItem.id)).filter(
+        DBStoryItem.story_id == db_story.id
+    ).scalar()
+
+    response = StoryResponse.model_validate(db_story)
+    response.item_count = item_count
+    return response
+
+
+async def list_stories(
+    db: Session,
+) -> List[StoryResponse]:
+    """
+    List all stories.
+
+    Args:
+        db: Database session
+
+    Returns:
+        List of stories with item counts
+    """
+    stories = db.query(DBStory).order_by(DBStory.updated_at.desc()).all()
+    
+    result = []
+    for story in stories:
+        item_count = db.query(func.count(DBStoryItem.id)).filter(
+            DBStoryItem.story_id == story.id
+        ).scalar()
+        
+        response = StoryResponse.model_validate(story)
+        response.item_count = item_count
+        result.append(response)
+    
+    return result
+
+
+async def get_story(
+    story_id: str,
+    db: Session,
+) -> Optional[StoryDetailResponse]:
+    """
+    Get a story with all its items.
+
+    Args:
+        story_id: Story ID
+        db: Database session
+
+    Returns:
+        Story with items or None if not found
+    """
+    story = db.query(DBStory).filter_by(id=story_id).first()
+    if not story:
+        return None
+
+    # Get all items ordered by start_time_ms
+    items = db.query(
+        DBStoryItem,
+        DBGeneration,
+        DBVoiceProfile.name.label('profile_name')
+    ).join(
+        DBGeneration,
+        DBStoryItem.generation_id == DBGeneration.id
+    ).join(
+        DBVoiceProfile,
+        DBGeneration.profile_id == DBVoiceProfile.id
+    ).filter(
+        DBStoryItem.story_id == story_id
+    ).order_by(DBStoryItem.start_time_ms).all()
+
+    # Build item details
+    item_details = []
+    for item, generation, profile_name in items:
+        item_detail = StoryItemDetail(
+            id=item.id,
+            story_id=item.story_id,
+            generation_id=item.generation_id,
+            start_time_ms=item.start_time_ms,
+            track=item.track,
+            created_at=item.created_at,
+            profile_id=generation.profile_id,
+            profile_name=profile_name,
+            text=generation.text,
+            language=generation.language,
+            audio_path=generation.audio_path,
+            duration=generation.duration,
+            seed=generation.seed,
+            instruct=generation.instruct,
+            generation_created_at=generation.created_at,
+        )
+        item_details.append(item_detail)
+
+    response = StoryDetailResponse.model_validate(story)
+    response.items = item_details
+    return response
+
+
+async def update_story(
+    story_id: str,
+    data: StoryCreate,
+    db: Session,
+) -> Optional[StoryResponse]:
+    """
+    Update a story.
+
+    Args:
+        story_id: Story ID
+        data: Update data
+        db: Database session
+
+    Returns:
+        Updated story or None if not found
+    """
+    story = db.query(DBStory).filter_by(id=story_id).first()
+    if not story:
+        return None
+
+    story.name = data.name
+    story.description = data.description
+    story.updated_at = datetime.utcnow()
+
+    db.commit()
+    db.refresh(story)
+
+    # Get item count
+    item_count = db.query(func.count(DBStoryItem.id)).filter(
+        DBStoryItem.story_id == story.id
+    ).scalar()
+
+    response = StoryResponse.model_validate(story)
+    response.item_count = item_count
+    return response
+
+
+async def delete_story(
+    story_id: str,
+    db: Session,
+) -> bool:
+    """
+    Delete a story and all its items.
+
+    Args:
+        story_id: Story ID
+        db: Database session
+
+    Returns:
+        True if deleted, False if not found
+    """
+    story = db.query(DBStory).filter_by(id=story_id).first()
+    if not story:
+        return False
+
+    # Delete all items
+    db.query(DBStoryItem).filter_by(story_id=story_id).delete()
+
+    # Delete story
+    db.delete(story)
+    db.commit()
+
+    return True
+
+
+async def add_item_to_story(
+    story_id: str,
+    data: StoryItemCreate,
+    db: Session,
+) -> Optional[StoryItemDetail]:
+    """
+    Add a generation to a story.
+
+    Args:
+        story_id: Story ID
+        data: Item creation data
+        db: Database session
+
+    Returns:
+        Created item detail or None if story/generation not found
+    """
+    # Verify story exists
+    story = db.query(DBStory).filter_by(id=story_id).first()
+    if not story:
+        return None
+
+    # Verify generation exists
+    generation = db.query(DBGeneration).filter_by(id=data.generation_id).first()
+    if not generation:
+        return None
+
+    # Check if generation is already in story
+    existing = db.query(DBStoryItem).filter_by(
+        story_id=story_id,
+        generation_id=data.generation_id
+    ).first()
+    if existing:
+        # Return existing item
+        profile = db.query(DBVoiceProfile).filter_by(id=generation.profile_id).first()
+        return StoryItemDetail(
+            id=existing.id,
+            story_id=existing.story_id,
+            generation_id=existing.generation_id,
+            start_time_ms=existing.start_time_ms,
+            track=existing.track,
+            created_at=existing.created_at,
+            profile_id=generation.profile_id,
+            profile_name=profile.name if profile else "Unknown",
+            text=generation.text,
+            language=generation.language,
+            audio_path=generation.audio_path,
+            duration=generation.duration,
+            seed=generation.seed,
+            instruct=generation.instruct,
+            generation_created_at=generation.created_at,
+        )
+
+    # Calculate start_time_ms if not provided
+    if data.start_time_ms is not None:
+        start_time_ms = data.start_time_ms
+    else:
+        # Find the maximum end time (start_time_ms + duration_ms) of existing items
+        existing_items = db.query(
+            DBStoryItem,
+            DBGeneration
+        ).join(
+            DBGeneration,
+            DBStoryItem.generation_id == DBGeneration.id
+        ).filter(
+            DBStoryItem.story_id == story_id
+        ).all()
+        
+        if not existing_items:
+            # First item starts at 0
+            start_time_ms = 0
+        else:
+            max_end_time_ms = 0
+            for item, gen in existing_items:
+                item_end_ms = item.start_time_ms + int(gen.duration * 1000)
+                max_end_time_ms = max(max_end_time_ms, item_end_ms)
+            
+            # Add 200ms gap after the last item
+            start_time_ms = max_end_time_ms + 200
+
+    # Get track from data or default to 0
+    track = data.track if data.track is not None else 0
+
+    # Create item
+    item = DBStoryItem(
+        id=str(uuid.uuid4()),
+        story_id=story_id,
+        generation_id=data.generation_id,
+        start_time_ms=start_time_ms,
+        track=track,
+        created_at=datetime.utcnow(),
+    )
+
+    db.add(item)
+    
+    # Update story updated_at
+    story.updated_at = datetime.utcnow()
+    
+    db.commit()
+    db.refresh(item)
+
+    # Get profile name
+    profile = db.query(DBVoiceProfile).filter_by(id=generation.profile_id).first()
+
+    return StoryItemDetail(
+        id=item.id,
+        story_id=item.story_id,
+        generation_id=item.generation_id,
+        start_time_ms=item.start_time_ms,
+        track=item.track,
+        created_at=item.created_at,
+        profile_id=generation.profile_id,
+        profile_name=profile.name if profile else "Unknown",
+        text=generation.text,
+        language=generation.language,
+        audio_path=generation.audio_path,
+        duration=generation.duration,
+        seed=generation.seed,
+        instruct=generation.instruct,
+        generation_created_at=generation.created_at,
+    )
+
+
+async def move_story_item(
+    story_id: str,
+    generation_id: str,
+    data: StoryItemMove,
+    db: Session,
+) -> Optional[StoryItemDetail]:
+    """
+    Move a story item (update position and/or track).
+
+    Args:
+        story_id: Story ID
+        generation_id: Generation ID of the item to move
+        data: New position and track data
+        db: Database session
+
+    Returns:
+        Updated item detail or None if not found
+    """
+    # Get the item
+    item = db.query(DBStoryItem).filter_by(
+        story_id=story_id,
+        generation_id=generation_id
+    ).first()
+    if not item:
+        return None
+
+    # Get the generation
+    generation = db.query(DBGeneration).filter_by(id=generation_id).first()
+    if not generation:
+        return None
+
+    # Update position and track
+    item.start_time_ms = data.start_time_ms
+    item.track = data.track
+
+    # Update story updated_at
+    story = db.query(DBStory).filter_by(id=story_id).first()
+    if story:
+        story.updated_at = datetime.utcnow()
+
+    db.commit()
+    db.refresh(item)
+
+    # Get profile name
+    profile = db.query(DBVoiceProfile).filter_by(id=generation.profile_id).first()
+
+    return StoryItemDetail(
+        id=item.id,
+        story_id=item.story_id,
+        generation_id=item.generation_id,
+        start_time_ms=item.start_time_ms,
+        track=item.track,
+        created_at=item.created_at,
+        profile_id=generation.profile_id,
+        profile_name=profile.name if profile else "Unknown",
+        text=generation.text,
+        language=generation.language,
+        audio_path=generation.audio_path,
+        duration=generation.duration,
+        seed=generation.seed,
+        instruct=generation.instruct,
+        generation_created_at=generation.created_at,
+    )
+
+
+async def remove_item_from_story(
+    story_id: str,
+    generation_id: str,
+    db: Session,
+) -> bool:
+    """
+    Remove a generation from a story.
+
+    Args:
+        story_id: Story ID
+        generation_id: Generation ID to remove
+        db: Database session
+
+    Returns:
+        True if removed, False if not found
+    """
+    item = db.query(DBStoryItem).filter_by(
+        story_id=story_id,
+        generation_id=generation_id
+    ).first()
+    if not item:
+        return False
+
+    # Delete item
+    db.delete(item)
+
+    # Update story updated_at
+    story = db.query(DBStory).filter_by(id=story_id).first()
+    if story:
+        story.updated_at = datetime.utcnow()
+
+    db.commit()
+    return True
+
+
+async def update_story_item_times(
+    story_id: str,
+    data: StoryItemBatchUpdate,
+    db: Session,
+) -> bool:
+    """
+    Update story item timecodes.
+
+    Args:
+        story_id: Story ID
+        data: Batch update data with timecodes
+        db: Database session
+
+    Returns:
+        True if updated, False if story not found or invalid
+    """
+    story = db.query(DBStory).filter_by(id=story_id).first()
+    if not story:
+        return False
+
+    # Get all items for this story
+    items = db.query(DBStoryItem).filter_by(story_id=story_id).all()
+    item_map = {item.generation_id: item for item in items}
+
+    # Verify all generation IDs belong to this story and update timecodes
+    for update in data.updates:
+        if update.generation_id not in item_map:
+            return False
+        item_map[update.generation_id].start_time_ms = update.start_time_ms
+
+    # Update story updated_at
+    story.updated_at = datetime.utcnow()
+
+    db.commit()
+    return True
+
+
+async def reorder_story_items(
+    story_id: str,
+    generation_ids: List[str],
+    db: Session,
+    gap_ms: int = 200,
+) -> Optional[List[StoryItemDetail]]:
+    """
+    Reorder story items and recalculate timecodes.
+
+    Args:
+        story_id: Story ID
+        generation_ids: List of generation IDs in the desired order
+        db: Database session
+        gap_ms: Gap in milliseconds between items (default 200ms)
+
+    Returns:
+        Updated list of story items with new timecodes, or None if invalid
+    """
+    story = db.query(DBStory).filter_by(id=story_id).first()
+    if not story:
+        return None
+
+    # Get all items for this story with their generation data
+    items_with_gen = db.query(
+        DBStoryItem,
+        DBGeneration,
+        DBVoiceProfile.name.label('profile_name')
+    ).join(
+        DBGeneration,
+        DBStoryItem.generation_id == DBGeneration.id
+    ).join(
+        DBVoiceProfile,
+        DBGeneration.profile_id == DBVoiceProfile.id
+    ).filter(
+        DBStoryItem.story_id == story_id
+    ).all()
+
+    # Create maps for quick lookup
+    item_map = {item.generation_id: (item, gen, profile_name) for item, gen, profile_name in items_with_gen}
+
+    # Verify all generation IDs belong to this story
+    if set(generation_ids) != set(item_map.keys()):
+        return None
+
+    # Recalculate timecodes based on new order
+    current_time_ms = 0
+    updated_items = []
+
+    for gen_id in generation_ids:
+        item, generation, profile_name = item_map[gen_id]
+        
+        # Update the item's start time
+        item.start_time_ms = current_time_ms
+        
+        # Calculate the duration in ms
+        duration_ms = int(generation.duration * 1000)
+        
+        # Move to next position (current end + gap)
+        current_time_ms += duration_ms + gap_ms
+
+        # Build the response item
+        updated_items.append(StoryItemDetail(
+            id=item.id,
+            story_id=item.story_id,
+            generation_id=item.generation_id,
+            start_time_ms=item.start_time_ms,
+            track=item.track,
+            created_at=item.created_at,
+            profile_id=generation.profile_id,
+            profile_name=profile_name,
+            text=generation.text,
+            language=generation.language,
+            audio_path=generation.audio_path,
+            duration=generation.duration,
+            seed=generation.seed,
+            instruct=generation.instruct,
+            generation_created_at=generation.created_at,
+        ))
+
+    # Update story updated_at
+    story.updated_at = datetime.utcnow()
+
+    db.commit()
+    return updated_items
+
+
+async def export_story_audio(
+    story_id: str,
+    db: Session,
+) -> Optional[bytes]:
+    """
+    Export story as single mixed audio file with timecode-based mixing.
+
+    Args:
+        story_id: Story ID
+        db: Database session
+
+    Returns:
+        Audio file bytes or None if story not found
+    """
+    story = db.query(DBStory).filter_by(id=story_id).first()
+    if not story:
+        return None
+
+    # Get all items ordered by start_time_ms
+    items = db.query(
+        DBStoryItem,
+        DBGeneration
+    ).join(
+        DBGeneration,
+        DBStoryItem.generation_id == DBGeneration.id
+    ).filter(
+        DBStoryItem.story_id == story_id
+    ).order_by(DBStoryItem.start_time_ms).all()
+
+    if not items:
+        return None
+
+    # Load all audio files and calculate total duration
+    audio_data = []
+    sample_rate = 24000  # Default sample rate
+
+    for item, generation in items:
+        audio_path = Path(generation.audio_path)
+        if not audio_path.exists():
+            continue
+
+        try:
+            audio, sr = load_audio(str(audio_path), sample_rate=sample_rate)
+            sample_rate = sr  # Use actual sample rate from first file
+            
+            # Store audio with its timecode info
+            start_time_ms = item.start_time_ms
+            duration_ms = int(generation.duration * 1000)
+            
+            audio_data.append({
+                'audio': audio,
+                'start_time_ms': start_time_ms,
+                'duration_ms': duration_ms,
+            })
+        except Exception:
+            # Skip files that can't be loaded
+            continue
+
+    if not audio_data:
+        return None
+
+    # Calculate total duration: max(start_time_ms + duration_ms)
+    max_end_time_ms = max(
+        (data['start_time_ms'] + data['duration_ms'] for data in audio_data),
+        default=0
+    )
+    
+    # Convert to samples
+    total_samples = int((max_end_time_ms / 1000.0) * sample_rate)
+    
+    # Create output buffer initialized to zeros
+    final_audio = np.zeros(total_samples, dtype=np.float32)
+
+    # Mix each audio segment at its timecode position
+    for data in audio_data:
+        audio = data['audio']
+        start_time_ms = data['start_time_ms']
+        
+        # Calculate start sample index
+        start_sample = int((start_time_ms / 1000.0) * sample_rate)
+        
+        # Ensure we don't exceed buffer bounds
+        audio_length = len(audio)
+        end_sample = min(start_sample + audio_length, total_samples)
+        
+        if start_sample < total_samples:
+            # Trim audio if it extends beyond buffer
+            audio_to_mix = audio[:end_sample - start_sample]
+            
+            # Mix: add audio to existing buffer (overlapping audio will sum)
+            # Normalize to prevent clipping (simple approach: divide by max)
+            final_audio[start_sample:end_sample] += audio_to_mix
+
+    # Normalize to prevent clipping
+    max_val = np.abs(final_audio).max()
+    if max_val > 1.0:
+        final_audio = final_audio / max_val
+
+    # Save to temporary file
+    with tempfile.NamedTemporaryFile(suffix='.wav', delete=False) as tmp:
+        tmp_path = tmp.name
+
+    try:
+        save_audio(final_audio, tmp_path, sample_rate)
+
+        # Read file bytes
+        with open(tmp_path, 'rb') as f:
+            audio_bytes = f.read()
+
+        return audio_bytes
+    finally:
+        # Clean up temp file
+        Path(tmp_path).unlink(missing_ok=True)

backend/transcribe.py

@@ -3,11 +3,13 @@ Whisper ASR module for transcription.
 """
 
 from typing import Optional, List, Dict
+import asyncio
 import torch
 import numpy as np
 from pathlib import Path
 from .utils.progress import get_progress_manager
 from .utils.hf_progress import HFProgressTracker, create_hf_progress_callback
+from .utils.tasks import get_task_manager
 
 
 class WhisperModel:
@@ -54,8 +56,21 @@ class WhisperModel:
             progress_manager = get_progress_manager()
             progress_model_name = f"whisper-{model_size}"
             
+            # Start tracking download task
+            task_manager = get_task_manager()
+            task_manager.start_download(progress_model_name)
+            
             print(f"Loading Whisper model {model_size} on {self.device}...")
             
+            # Initialize progress state to show download has started
+            progress_manager.update_progress(
+                model_name=progress_model_name,
+                current=0,
+                total=1,  # Set to 1 initially, will be updated by callback
+                filename="",
+                status="downloading",
+            )
+            
             # Set up progress callback
             progress_callback = create_hf_progress_callback(progress_model_name, progress_manager)
             tracker = HFProgressTracker(progress_callback)
@@ -70,15 +85,35 @@ class WhisperModel:
             
             # Mark as complete
             progress_manager.mark_complete(progress_model_name)
+            task_manager.complete_download(progress_model_name)
             
             print(f"Whisper model {model_size} loaded successfully")
             
         except Exception as e:
             print(f"Error loading Whisper model: {e}")
             progress_manager = get_progress_manager()
-            progress_manager.mark_error(f"whisper-{model_size}", str(e))
+            task_manager = get_task_manager()
+            progress_model_name = f"whisper-{model_size}"
+            progress_manager.mark_error(progress_model_name, str(e))
+            task_manager.error_download(progress_model_name, str(e))
             raise
     
+    async def load_model_async(self, model_size: Optional[str] = None):
+        """
+        Async version of load_model that runs in thread pool.
+        
+        This prevents blocking the event loop during model loading.
+        """
+        if model_size is None:
+            model_size = self.model_size
+            
+        # If already loaded with correct size, return immediately
+        if self.model is not None and self.model_size == model_size:
+            return
+        
+        # Run the blocking load operation in a thread pool
+        await asyncio.to_thread(self.load_model, model_size)
+    
     def unload_model(self):
         """Unload the model to free memory."""
         if self.model is not None:
@@ -107,44 +142,49 @@ class WhisperModel:
         Returns:
             Transcribed text
         """
-        self.load_model()
+        await self.load_model_async()
         
         from .utils.audio import load_audio
         
-        # Load audio
+        def _transcribe_sync():
-        audio, sr = load_audio(audio_path, sample_rate=16000)
+            """Run synchronous transcription in thread pool."""
-        
+            # Load audio
-        # Process audio
+            audio, sr = load_audio(audio_path, sample_rate=16000)
-        inputs = self.processor(
+            
-            audio,
+            # Process audio
-            sampling_rate=16000,
+            inputs = self.processor(
-            return_tensors="pt",
+                audio,
-        )
+                sampling_rate=16000,
-        inputs = inputs.to(self.device)
+                return_tensors="pt",
-        
-        # Set language if provided
-        forced_decoder_ids = None
-        if language:
-            lang_code = "en" if language == "en" else "zh"
-            forced_decoder_ids = self.processor.get_decoder_prompt_ids(
-                language=lang_code,
-                task="transcribe",
             )
+            inputs = inputs.to(self.device)
+            
+            # Set language if provided
+            forced_decoder_ids = None
+            if language:
+                lang_code = "en" if language == "en" else "zh"
+                forced_decoder_ids = self.processor.get_decoder_prompt_ids(
+                    language=lang_code,
+                    task="transcribe",
+                )
+            
+            # Generate transcription
+            with torch.no_grad():
+                predicted_ids = self.model.generate(
+                    inputs["input_features"],
+                    forced_decoder_ids=forced_decoder_ids,
+                )
+            
+            # Decode
+            transcription = self.processor.batch_decode(
+                predicted_ids,
+                skip_special_tokens=True,
+            )[0]
+            
+            return transcription.strip()
         
-        # Generate transcription
+        # Run blocking transcription in thread pool
-        with torch.no_grad():
+        return await asyncio.to_thread(_transcribe_sync)
-            predicted_ids = self.model.generate(
-                inputs["input_features"],
-                forced_decoder_ids=forced_decoder_ids,
-            )
-        
-        # Decode
-        transcription = self.processor.batch_decode(
-            predicted_ids,
-            skip_special_tokens=True,
-        )[0]
-        
-        return transcription.strip()
     
     async def transcribe_with_timestamps(
         self,
@@ -161,59 +201,58 @@ class WhisperModel:
         Returns:
             List of word segments with timestamps
         """
-        self.load_model()
+        await self.load_model_async()
         
         from .utils.audio import load_audio
         
-        # Load audio
+        def _transcribe_timestamps_sync():
-        audio, sr = load_audio(audio_path, sample_rate=16000)
+            """Run synchronous transcription with timestamps in thread pool."""
-        
+            # Load audio
-        # Process audio
+            audio, sr = load_audio(audio_path, sample_rate=16000)
-        inputs = self.processor(
+            
-            audio,
+            # Process audio
-            sampling_rate=16000,
+            inputs = self.processor(
-            return_tensors="pt",
+                audio,
-        )
+                sampling_rate=16000,
-        inputs = inputs.to(self.device)
+                return_tensors="pt",
-        
-        # Set language if provided
-        forced_decoder_ids = None
-        if language:
-            lang_code = "en" if language == "en" else "zh"
-            forced_decoder_ids = self.processor.get_decoder_prompt_ids(
-                language=lang_code,
-                task="transcribe",
             )
+            inputs = inputs.to(self.device)
+            
+            # Set language if provided
+            forced_decoder_ids = None
+            if language:
+                lang_code = "en" if language == "en" else "zh"
+                forced_decoder_ids = self.processor.get_decoder_prompt_ids(
+                    language=lang_code,
+                    task="transcribe",
+                )
+            
+            # Generate with timestamps
+            with torch.no_grad():
+                predicted_ids = self.model.generate(
+                    inputs["input_features"],
+                    forced_decoder_ids=forced_decoder_ids,
+                    return_timestamps=True,
+                )
+            
+            # Parse timestamps (simplified - would need more robust parsing)
+            # For now, return basic transcription
+            # TODO: Implement proper timestamp parsing
+            transcription = self.processor.batch_decode(
+                predicted_ids,
+                skip_special_tokens=True,
+            )[0]
+            
+            return [
+                {
+                    "text": transcription,
+                    "start": 0.0,
+                    "end": len(audio) / sr,
+                }
+            ]
         
-        # Generate with timestamps
+        # Run blocking transcription in thread pool
-        with torch.no_grad():
+        return await asyncio.to_thread(_transcribe_timestamps_sync)
-            predicted_ids = self.model.generate(
-                inputs["input_features"],
-                forced_decoder_ids=forced_decoder_ids,
-                return_timestamps=True,
-            )
-        
-        # Decode with timestamps
-        result = self.processor.batch_decode(
-            predicted_ids,
-            skip_special_tokens=False,
-        )[0]
-        
-        # Parse timestamps (simplified - would need more robust parsing)
-        # For now, return basic transcription
-        # TODO: Implement proper timestamp parsing
-        transcription = self.processor.batch_decode(
-            predicted_ids,
-            skip_special_tokens=True,
-        )[0]
-        
-        return [
-            {
-                "text": transcription,
-                "start": 0.0,
-                "end": len(audio) / sr,
-            }
-        ]
 
 
 # Global model instance

backend/tts.py

@@ -3,6 +3,7 @@ TTS inference module using Qwen3-TTS.
 """
 
 from typing import Optional, List, Tuple
+import asyncio
 import torch
 import numpy as np
 import io
@@ -13,6 +14,7 @@ from .utils.cache import get_cache_key, get_cached_voice_prompt, cache_voice_pro
 from .utils.audio import normalize_audio
 from .utils.progress import get_progress_manager
 from .utils.hf_progress import HFProgressTracker, create_hf_progress_callback
+from .utils.tasks import get_task_manager
 from . import config
 
 
@@ -110,6 +112,19 @@ class TTSModel:
             if model_path.startswith("Qwen/"):
                 print(f"Loading TTS model {model_size} on {self.device}...")
                 
+                # Start tracking download task
+                task_manager = get_task_manager()
+                task_manager.start_download(model_name)
+                
+                # Initialize progress state to show download has started
+                progress_manager.update_progress(
+                    model_name=model_name,
+                    current=0,
+                    total=1,  # Set to 1 initially, will be updated by callback
+                    filename="",
+                    status="downloading",
+                )
+                
                 # Set up progress callback
                 progress_callback = create_hf_progress_callback(model_name, progress_manager)
                 tracker = HFProgressTracker(progress_callback)
@@ -125,6 +140,7 @@ class TTSModel:
                 
                 # Mark as complete
                 progress_manager.mark_complete(model_name)
+                task_manager.complete_download(model_name)
             else:
                 # Local model, no download needed
                 print(f"Loading TTS model {model_size} on {self.device}...")
@@ -142,15 +158,37 @@ class TTSModel:
         except ImportError as e:
             print(f"Error: qwen_tts package not found. Install with: pip install git+https://github.com/QwenLM/Qwen3-TTS.git")
             progress_manager = get_progress_manager()
-            progress_manager.mark_error(f"qwen-tts-{model_size}", str(e))
+            task_manager = get_task_manager()
+            model_name = f"qwen-tts-{model_size}"
+            progress_manager.mark_error(model_name, str(e))
+            task_manager.error_download(model_name, str(e))
             raise
         except Exception as e:
             print(f"Error loading TTS model: {e}")
             print(f"Tip: The model will be automatically downloaded from HuggingFace Hub on first use.")
             progress_manager = get_progress_manager()
-            progress_manager.mark_error(f"qwen-tts-{model_size}", str(e))
+            task_manager = get_task_manager()
+            model_name = f"qwen-tts-{model_size}"
+            progress_manager.mark_error(model_name, str(e))
+            task_manager.error_download(model_name, str(e))
             raise
     
+    async def load_model_async(self, model_size: Optional[str] = None):
+        """
+        Async version of load_model that runs in thread pool.
+        
+        This prevents blocking the event loop during model loading.
+        """
+        if model_size is None:
+            model_size = self.model_size
+            
+        # If already loaded with correct size, return immediately
+        if self.model is not None and self._current_model_size == model_size:
+            return
+        
+        # Run the blocking load operation in a thread pool
+        await asyncio.to_thread(self.load_model, model_size)
+    
     def unload_model(self):
         """Unload the model to free memory."""
         if self.model is not None:
@@ -180,7 +218,7 @@ class TTSModel:
         Returns:
             Tuple of (voice_prompt_dict, was_cached)
         """
-        self.load_model()
+        await self.load_model_async()
         
         # Check cache if enabled
         if use_cache:
@@ -189,12 +227,16 @@ class TTSModel:
             if cached_prompt is not None:
                 return cached_prompt, True
         
-        # Create new voice prompt
+        def _create_prompt_sync():
-        voice_prompt_items = self.model.create_voice_clone_prompt(
+            """Run synchronous voice prompt creation in thread pool."""
-            ref_audio=str(audio_path),
+            return self.model.create_voice_clone_prompt(
-            ref_text=reference_text,
+                ref_audio=str(audio_path),
-            x_vector_only_mode=False,
+                ref_text=reference_text,
-        )
+                x_vector_only_mode=False,
+            )
+        
+        # Run blocking operation in thread pool
+        voice_prompt_items = await asyncio.to_thread(_create_prompt_sync)
         
         # Cache if enabled
         if use_cache:
@@ -256,22 +298,27 @@ class TTSModel:
         Returns:
             Tuple of (audio_array, sample_rate)
         """
-        self.load_model()
+        # Load model (already handles async via to_thread if needed)
+        await self.load_model_async()
 
-        # Set seed if provided
+        def _generate_sync():
-        if seed is not None:
+            """Run synchronous generation in thread pool."""
-            torch.manual_seed(seed)
+            # Set seed if provided
-            if torch.cuda.is_available():
+            if seed is not None:
-                torch.cuda.manual_seed(seed)
+                torch.manual_seed(seed)
+                if torch.cuda.is_available():
+                    torch.cuda.manual_seed(seed)
 
-        # Generate audio
+            # Generate audio - this is the blocking operation
-        wavs, sample_rate = self.model.generate_voice_clone(
+            wavs, sample_rate = self.model.generate_voice_clone(
-            text=text,
+                text=text,
-            voice_clone_prompt=voice_prompt,
+                voice_clone_prompt=voice_prompt,
-            instruct=instruct,
+                instruct=instruct,
-        )
+            )
+            return wavs[0], sample_rate
 
-        audio = wavs[0]  # Get first result
+        # Run blocking inference in thread pool to avoid blocking event loop
+        audio, sample_rate = await asyncio.to_thread(_generate_sync)
 
         return audio, sample_rate
     

backend/utils/hf_progress.py

@@ -5,89 +5,202 @@ HuggingFace Hub download progress tracking.
 from typing import Optional, Callable
 from contextlib import contextmanager
 import threading
+import sys
 
 
 class HFProgressTracker:
-    """Tracks HuggingFace Hub download progress by intercepting hf_hub_download."""
+    """Tracks HuggingFace Hub download progress by intercepting tqdm."""
     
     def __init__(self, progress_callback: Optional[Callable] = None):
         self.progress_callback = progress_callback
-        self._original_hf_hub_download = None
+        self._original_tqdm_class = None
         self._lock = threading.Lock()
         self._total_downloaded = 0
         self._total_size = 0
+        self._file_sizes = {}  # Track sizes of individual files
+        self._file_downloaded = {}  # Track downloaded bytes per file
+        self._current_filename = ""
+        self._active_tqdms = {}  # Track active tqdm instances
     
-    def _tracked_hf_hub_download(self, *args, **kwargs):
+    def _create_tracked_tqdm_class(self):
-        """Wrapper for hf_hub_download with progress tracking."""
+        """Create a tqdm subclass that tracks progress."""
-        import huggingface_hub
+        tracker = self
+        original_tqdm = self._original_tqdm_class
         
-        # Get original callback if present
+        class TrackedTqdm(original_tqdm):
-        original_resume_callback = kwargs.get("resume_download", None)
+            """A tqdm subclass that reports progress to our tracker."""
-        
-        def combined_callback(downloaded: int, total: int):
-            """Combined callback that tracks progress."""
-            # Update totals
-            with self._lock:
-                # Estimate: assume each file contributes equally
-                # This is a simplification - in reality we'd track per-file
-                if total > 0:
-                    self._total_size = max(self._total_size, total)
-                    self._total_downloaded = downloaded
             
-            # Call original callback if present
+            def __init__(self, *args, **kwargs):
-            if original_resume_callback:
+                # Extract filename from desc before passing to parent
-                original_resume_callback(downloaded, total)
+                desc = kwargs.get("desc", "")
+                if not desc and args:
+                    first_arg = args[0]
+                    if isinstance(first_arg, str):
+                        desc = first_arg
+                
+                filename = ""
+                if desc:
+                    # Try to extract filename from description
+                    # HuggingFace Hub uses format like "model.safetensors: 0%|..."
+                    if ":" in desc:
+                        filename = desc.split(":")[0].strip()
+                    else:
+                        filename = desc.strip()
+                
+                # Filter out non-standard kwargs that huggingface_hub might pass
+                # These are custom kwargs that tqdm doesn't understand
+                filtered_kwargs = {}
+                # Known tqdm kwargs - pass these through
+                tqdm_kwargs = {
+                    'iterable', 'desc', 'total', 'leave', 'file', 'ncols', 'mininterval',
+                    'maxinterval', 'miniters', 'ascii', 'disable', 'unit', 'unit_scale',
+                    'dynamic_ncols', 'smoothing', 'bar_format', 'initial', 'position',
+                    'postfix', 'unit_divisor', 'write_bytes', 'lock_args', 'nrows',
+                    'colour', 'color', 'delay', 'gui', 'disable_default', 'pos'
+                }
+                for key, value in kwargs.items():
+                    if key in tqdm_kwargs:
+                        filtered_kwargs[key] = value
+                
+                # Try to initialize with filtered kwargs, fall back to all kwargs if that fails
+                try:
+                    super().__init__(*args, **filtered_kwargs)
+                except TypeError:
+                    # If filtering failed, try with all kwargs (maybe tqdm version accepts them)
+                    super().__init__(*args, **kwargs)
+                
+                self._tracker_filename = filename or "unknown"
+                
+                with tracker._lock:
+                    if filename:
+                        tracker._current_filename = filename
+                    tracker._active_tqdms[id(self)] = {
+                        "filename": self._tracker_filename,
+                    }
             
-            # Call our progress callback
+            def update(self, n=1):
-            if self.progress_callback:
+                result = super().update(n)
-                with self._lock:
+                
-                    self.progress_callback(self._total_downloaded, self._total_size)
+                # Report progress
+                with tracker._lock:
+                    if id(self) in tracker._active_tqdms:
+                        filename = tracker._active_tqdms[id(self)]["filename"]
+                        current = getattr(self, "n", 0)
+                        total = getattr(self, "total", 0)
+                        
+                        if total and total > 0:
+                            # Update per-file tracking
+                            tracker._file_sizes[filename] = total
+                            tracker._file_downloaded[filename] = current
+                            
+                            # Calculate totals across all files
+                            tracker._total_size = sum(tracker._file_sizes.values())
+                            tracker._total_downloaded = sum(tracker._file_downloaded.values())
+                            
+                            # Call progress callback
+                            if tracker.progress_callback:
+                                tracker.progress_callback(
+                                    tracker._total_downloaded,
+                                    tracker._total_size,
+                                    filename
+                                )
+                
+                return result
+            
+            def close(self):
+                with tracker._lock:
+                    if id(self) in tracker._active_tqdms:
+                        del tracker._active_tqdms[id(self)]
+                return super().close()
         
-        # Replace callback
+        return TrackedTqdm
-        kwargs["resume_download"] = combined_callback
-        
-        # Call original download
-        return self._original_hf_hub_download(*args, **kwargs)
     
     @contextmanager
     def patch_download(self):
-        """Context manager to patch hf_hub_download for progress tracking."""
+        """Context manager to patch tqdm for progress tracking."""
         try:
-            import huggingface_hub
+            import tqdm as tqdm_module
-            self._original_hf_hub_download = huggingface_hub.hf_hub_download
+            
+            # Store original tqdm class
+            self._original_tqdm_class = tqdm_module.tqdm
             
             # Reset totals
             with self._lock:
                 self._total_downloaded = 0
                 self._total_size = 0
+                self._file_sizes = {}
+                self._file_downloaded = {}
+                self._current_filename = ""
+                self._active_tqdms = {}
             
-            # Patch the function
+            # Create our tracked tqdm class
-            huggingface_hub.hf_hub_download = self._tracked_hf_hub_download
+            tracked_tqdm = self._create_tracked_tqdm_class()
+            
+            # Patch tqdm.tqdm
+            tqdm_module.tqdm = tracked_tqdm
+            
+            # Also patch tqdm.auto.tqdm if it exists (used by huggingface_hub)
+            self._original_tqdm_auto = None
+            if hasattr(tqdm_module, "auto") and hasattr(tqdm_module.auto, "tqdm"):
+                self._original_tqdm_auto = tqdm_module.auto.tqdm
+                tqdm_module.auto.tqdm = tracked_tqdm
+            
+            # Patch in sys.modules to catch already-imported references
+            self._patched_modules = {}
+            for module_name in list(sys.modules.keys()):
+                if "huggingface" in module_name or module_name.startswith("tqdm"):
+                    try:
+                        module = sys.modules[module_name]
+                        if hasattr(module, "tqdm"):
+                            attr = getattr(module, "tqdm")
+                            # Only patch if it's the original tqdm class (not already patched)
+                            if attr is self._original_tqdm_class or (
+                                hasattr(attr, "__name__") and attr.__name__ == "tqdm"
+                            ):
+                                self._patched_modules[module_name] = attr
+                                setattr(module, "tqdm", tracked_tqdm)
+                    except (AttributeError, TypeError):
+                        pass
             
             yield
+            
         except ImportError:
-            # If huggingface_hub not available, just yield without patching
+            # If tqdm not available, just yield without patching
             yield
         finally:
-            # Restore original
+            # Restore original tqdm
-            if self._original_hf_hub_download:
+            if self._original_tqdm_class:
                 try:
-                    import huggingface_hub
+                    import tqdm as tqdm_module
-                    huggingface_hub.hf_hub_download = self._original_hf_hub_download
+                    tqdm_module.tqdm = self._original_tqdm_class
-                except ImportError:
+                    
+                    if self._original_tqdm_auto:
+                        tqdm_module.auto.tqdm = self._original_tqdm_auto
+                    
+                    # Restore patched modules
+                    for module_name, original in self._patched_modules.items():
+                        try:
+                            module = sys.modules.get(module_name)
+                            if module and original:
+                                setattr(module, "tqdm", original)
+                        except (AttributeError, TypeError):
+                            pass
+                    self._patched_modules = {}
+                    
+                except (ImportError, AttributeError):
                     pass
 
 
 def create_hf_progress_callback(model_name: str, progress_manager):
     """Create a progress callback for HuggingFace downloads."""
-    def callback(downloaded: int, total: int):
+    def callback(downloaded: int, total: int, filename: str = ""):
         """Progress callback."""
         if total > 0:
             progress_manager.update_progress(
                 model_name=model_name,
                 current=downloaded,
                 total=total,
-                filename="",
+                filename=filename or "",
                 status="downloading",
             )
     return callback

backend/utils/progress.py

@@ -2,7 +2,7 @@
 Progress tracking for model downloads using Server-Sent Events.
 """
 
-from typing import Optional, Callable, Dict
+from typing import Optional, Callable, Dict, List
 from fastapi.responses import StreamingResponse
 import asyncio
 import json
@@ -58,6 +58,15 @@ class ProgressManager:
         """Get current progress for a model."""
         return self._progress.get(model_name)
     
+    def get_all_active(self) -> List[Dict]:
+        """Get all active downloads (status is 'downloading' or 'extracting')."""
+        active = []
+        for model_name, progress in self._progress.items():
+            status = progress.get("status", "")
+            if status in ("downloading", "extracting"):
+                active.append(progress.copy())
+        return active
+    
     def create_progress_callback(self, model_name: str, filename: Optional[str] = None):
         """
         Create a progress callback function for HuggingFace downloads.

backend/utils/tasks.py

@@ -0,0 +1,93 @@
+"""
+Task tracking for active downloads and generations.
+"""
+
+from typing import Optional, Dict, List
+from datetime import datetime
+from dataclasses import dataclass, field
+
+
+@dataclass
+class DownloadTask:
+    """Represents an active download task."""
+    model_name: str
+    status: str = "downloading"  # downloading, extracting, complete, error
+    started_at: datetime = field(default_factory=datetime.utcnow)
+    error: Optional[str] = None
+
+
+@dataclass
+class GenerationTask:
+    """Represents an active generation task."""
+    task_id: str
+    profile_id: str
+    text_preview: str  # First 50 chars of text
+    started_at: datetime = field(default_factory=datetime.utcnow)
+
+
+class TaskManager:
+    """Manages active downloads and generations."""
+    
+    def __init__(self):
+        self._active_downloads: Dict[str, DownloadTask] = {}
+        self._active_generations: Dict[str, GenerationTask] = {}
+    
+    def start_download(self, model_name: str) -> None:
+        """Mark a download as started."""
+        self._active_downloads[model_name] = DownloadTask(
+            model_name=model_name,
+            status="downloading",
+        )
+    
+    def complete_download(self, model_name: str) -> None:
+        """Mark a download as complete."""
+        if model_name in self._active_downloads:
+            del self._active_downloads[model_name]
+    
+    def error_download(self, model_name: str, error: str) -> None:
+        """Mark a download as failed."""
+        if model_name in self._active_downloads:
+            self._active_downloads[model_name].status = "error"
+            self._active_downloads[model_name].error = error
+    
+    def start_generation(self, task_id: str, profile_id: str, text: str) -> None:
+        """Mark a generation as started."""
+        text_preview = text[:50] + "..." if len(text) > 50 else text
+        self._active_generations[task_id] = GenerationTask(
+            task_id=task_id,
+            profile_id=profile_id,
+            text_preview=text_preview,
+        )
+    
+    def complete_generation(self, task_id: str) -> None:
+        """Mark a generation as complete."""
+        if task_id in self._active_generations:
+            del self._active_generations[task_id]
+    
+    def get_active_downloads(self) -> List[DownloadTask]:
+        """Get all active downloads."""
+        return list(self._active_downloads.values())
+    
+    def get_active_generations(self) -> List[GenerationTask]:
+        """Get all active generations."""
+        return list(self._active_generations.values())
+    
+    def is_download_active(self, model_name: str) -> bool:
+        """Check if a download is active."""
+        return model_name in self._active_downloads
+    
+    def is_generation_active(self, task_id: str) -> bool:
+        """Check if a generation is active."""
+        return task_id in self._active_generations
+
+
+# Global task manager instance
+_task_manager: Optional[TaskManager] = None
+
+
+def get_task_manager() -> TaskManager:
+    """Get or create the global task manager."""
+    global _task_manager
+    if _task_manager is None:
+        _task_manager = TaskManager()
+    return _task_manager

backend/utils/validation.py

@@ -29,17 +29,20 @@ def validate_text(text: str, max_length: int = 5000) -> Tuple[bool, Optional[str
 def validate_language(language: str) -> Tuple[bool, Optional[str]]:
     """
     Validate language code.
-    
+
+    Supported languages for Qwen3-TTS:
+    Chinese, English, Japanese, Korean, German, French, Russian, Portuguese, Spanish, Italian
+
     Args:
         language: Language code
-        
+
     Returns:
         Tuple of (is_valid, error_message)
     """
-    valid_languages = ["en", "zh"]
+    valid_languages = ["zh", "en", "ja", "ko", "de", "fr", "ru", "pt", "es", "it"]
     if language not in valid_languages:
         return False, f"Invalid language (must be one of: {', '.join(valid_languages)})"
-    
+
     return True, None
 
 

backend/voicebox-server.spec

@@ -4,15 +4,16 @@ from PyInstaller.utils.hooks import collect_submodules
 from PyInstaller.utils.hooks import copy_metadata
 
 datas = []
-hiddenimports = ['backend', 'backend.main', 'backend.config', 'backend.database', 'backend.models', 'backend.profiles', 'backend.history', 'backend.tts', 'backend.transcribe', 'backend.utils.audio', 'backend.utils.cache', 'backend.utils.progress', 'backend.utils.hf_progress', 'backend.utils.validation', 'torch', 'transformers', 'fastapi', 'uvicorn', 'sqlalchemy', 'librosa', 'soundfile', 'qwen_tts', 'qwen_tts.inference', 'qwen_tts.inference.qwen3_tts_model', 'qwen_tts.inference.qwen3_tts_tokenizer', 'qwen_tts.core', 'qwen_tts.cli']
+hiddenimports = ['backend', 'backend.main', 'backend.config', 'backend.database', 'backend.models', 'backend.profiles', 'backend.history', 'backend.tts', 'backend.transcribe', 'backend.utils.audio', 'backend.utils.cache', 'backend.utils.progress', 'backend.utils.hf_progress', 'backend.utils.validation', 'torch', 'transformers', 'fastapi', 'uvicorn', 'sqlalchemy', 'librosa', 'soundfile', 'qwen_tts', 'qwen_tts.inference', 'qwen_tts.inference.qwen3_tts_model', 'qwen_tts.inference.qwen3_tts_tokenizer', 'qwen_tts.core', 'qwen_tts.cli', 'pkg_resources.extern']
 datas += collect_data_files('qwen_tts')
 datas += copy_metadata('qwen-tts')
 hiddenimports += collect_submodules('qwen_tts')
+hiddenimports += collect_submodules('jaraco')
 
 
 a = Analysis(
     ['server.py'],
-    pathex=['/Users/jamespine/Projects/voice/Qwen3-TTS'],
+    pathex=['C:\\Users\\ijame\\Projects\\voice\\Qwen3-TTS'],
     binaries=[],
     datas=datas,
     hiddenimports=hiddenimports,