fix review feedback: restart race, listener cleanup, stable keys, accessibility

- Rename Server tab to Settings with horizontal sub-tab navigation (General, Generation, GPU, Logs, Changelog)
- All sub-tabs are proper routes under /settings/* with /server redirect for backwards compat
- General: connection settings, link cards (docs + discord), API reference card, app updates
- Generation: auto-chunking, crossfade, normalize, autoplay as SettingRow components
- GPU: info card with platform-aware icons (Apple logo for MPS), CUDA management, explainer text
- Logs: real-time server log viewer piped from Tauri sidecar via event system (Tauri-only)
- Changelog: parsed from CHANGELOG.md at build time via Vite virtual module plugin
- New reusable SettingRow/SettingSection components for consistent settings layout
- New Toggle (switch) UI component replacing checkboxes in settings
- Toast viewport now offsets when audio player is open
- Sidebar stays active on settings sub-routes (fuzzy matching)

.agents/skills/draft-release-notes/SKILL.md

@@ -0,0 +1,94 @@
+---
+name: draft-release-notes
+description: Use this skill to draft or update the [Unreleased] section of CHANGELOG.md from the actual changes since the last tag. Run this at any point during development to keep a working copy of the release narrative. Does NOT bump versions or create tags.
+---
+
+# Draft Release Notes
+
+## Goal
+
+Update the `[Unreleased]` section at the top of `CHANGELOG.md` with a narrative release story based on the real changes since the last tag. This is a **non-destructive working copy** — run it as many times as you want during development.
+
+## Workflow
+
+1. **Identify the last release tag and gather changes.**
+
+   ```bash
+   LAST_TAG=$(git tag --list "v*" --sort=-v:refname | head -n 1)
+   echo "Last tag: $LAST_TAG"
+   ```
+
+   Then collect raw material from three sources:
+
+   a. **Commit log since last tag:**
+   ```bash
+   git log --oneline "$LAST_TAG"..HEAD
+   ```
+
+   b. **GitHub-generated release notes preview** (PR titles, new contributors):
+   ```bash
+   gh api repos/:owner/:repo/releases/generate-notes \
+     -f tag_name="vNEXT" \
+     -f target_commitish="$(git rev-parse HEAD)" \
+     -f previous_tag_name="$LAST_TAG" \
+     --jq '.body'
+   ```
+
+   c. **Diff stat for theme analysis:**
+   ```bash
+   git diff --stat "$LAST_TAG"..HEAD
+   ```
+
+2. **Draft the release narrative.**
+
+   Write markdown for the `[Unreleased]` section following the format below. Do not include the `## [Unreleased]` heading itself — just the body content.
+
+3. **Update CHANGELOG.md.**
+
+   Replace everything between `## [Unreleased]` and the next `## [` heading with the new draft. Preserve the HTML comment header and all existing release sections below.
+
+   The `[Unreleased]` section must always exist and always be the first section after the header comments.
+
+4. **Do NOT commit, tag, or bump versions.** Just leave the file modified in the working tree.
+
+## Release Story Format
+
+Structure the `[Unreleased]` section like this:
+
+```markdown
+## [Unreleased]
+
+<One strong opening paragraph: what this release is about and why it matters.
+Tie it to concrete shipped changes. No vague hype.>
+
+<One paragraph on major technical shifts, if applicable.>
+
+### <Feature/Theme Group>
+- Bullet points with specifics
+- Reference PRs where available: ([#123](https://github.com/jamiepine/voicebox/pull/123))
+
+### <Another Group>
+- ...
+
+### Bug Fixes
+- ...
+```
+
+### Style Guidelines
+
+- **Factual and specific.** Every claim should trace to a real commit or PR.
+- **Narrative over list.** Lead with paragraphs that tell the story, then support with bullets.
+- **Group by theme, not by commit.** Cluster related changes under descriptive headings.
+- **Reference PRs** where they exist, but don't fabricate them.
+- **Skip trivial chores** (typo fixes, CI tweaks) unless they're the bulk of the release.
+- **Match the voice of existing releases** — look at the v0.2.1 and v0.2.3 entries in CHANGELOG.md for tone reference.
+
+## When There Are No Changes
+
+If `git log "$LAST_TAG"..HEAD` is empty, leave the `[Unreleased]` section empty (just the heading) and tell the user there's nothing to draft.
+
+## Notes
+
+- This skill only touches the `[Unreleased]` section. It never modifies stamped release sections.
+- The agent can be asked to run this skill at any point — mid-feature, before a PR, or right before cutting a release.
+- The `release-bump` skill depends on this draft being up to date before it finalizes.

.agents/skills/release-bump/SKILL.md

@@ -0,0 +1,124 @@
+---
+name: release-bump
+description: Use this skill to finalize a release. It stamps the [Unreleased] changelog section with a version and date, runs bumpversion to update all version files, and creates the release commit and tag. Only run this when you're ready to ship.
+---
+
+# Release Bump
+
+## Goal
+
+Finalize the changelog draft, bump the version across all tracked files, and create a tagged release commit. After this skill runs, the repo has a clean release commit and tag ready to push.
+
+## Prerequisites
+
+- `gh` CLI installed and authenticated (`gh auth status`).
+- `bumpversion` installed (`pip install bumpversion` or available in the project venv).
+- The `[Unreleased]` section of `CHANGELOG.md` should already contain the release narrative. If it's empty or stale, run the `draft-release-notes` skill first.
+
+## Workflow
+
+1. **Verify the working tree is clean** (except `CHANGELOG.md` which may have the draft).
+
+   ```bash
+   git status --porcelain
+   ```
+
+   Only `CHANGELOG.md` (and optionally `.agents/` files) should be modified. If there are other uncommitted changes, stop and ask the user to commit or stash them first.
+
+2. **Determine the bump level.**
+
+   Ask the user if not specified: `patch`, `minor`, or `major`. Check the current version:
+
+   ```bash
+   grep '^current_version' .bumpversion.cfg
+   ```
+
+3. **Stamp the changelog.**
+
+   Read the current `[Unreleased]` content from `CHANGELOG.md`. Compute the new version (based on bump level and current version). Then:
+
+   a. Replace the `## [Unreleased]` section body with an empty placeholder.
+   b. Insert a new stamped section immediately after `## [Unreleased]`:
+
+   ```markdown
+   ## [Unreleased]
+
+   ## [X.Y.Z] - YYYY-MM-DD
+
+   <the content that was in [Unreleased]>
+   ```
+
+   c. Update the reference links at the bottom of the file:
+   - Change the `[Unreleased]` link to compare against the new tag
+   - Add a new link for the new version
+
+   ```markdown
+   [Unreleased]: https://github.com/jamiepine/voicebox/compare/vX.Y.Z...HEAD
+   [X.Y.Z]: https://github.com/jamiepine/voicebox/compare/vPREVIOUS...vX.Y.Z
+   ```
+
+4. **Stage the changelog.**
+
+   ```bash
+   git add CHANGELOG.md
+   ```
+
+5. **Run bumpversion.**
+
+   ```bash
+   bumpversion --allow-dirty <patch|minor|major>
+   ```
+
+   The `--allow-dirty` flag is needed because `CHANGELOG.md` is already staged. bumpversion will:
+   - Update version strings in all tracked files (see `.bumpversion.cfg`)
+   - Create a commit with message `Bump version: X.Y.Z -> A.B.C`
+   - Create a tag `vA.B.C`
+
+   The staged `CHANGELOG.md` will be included in this commit automatically.
+
+6. **Verify results.**
+
+   ```bash
+   git show --name-only --stat HEAD
+   git tag --list "v*" --sort=-v:refname | head -n 5
+   ```
+
+   Confirm the commit contains:
+   - `CHANGELOG.md`
+   - `.bumpversion.cfg`
+   - `tauri/src-tauri/tauri.conf.json`
+   - `tauri/src-tauri/Cargo.toml`
+   - `package.json`
+   - `app/package.json`
+   - `tauri/package.json`
+   - `landing/package.json`
+   - `web/package.json`
+   - `backend/__init__.py`
+
+   Confirm the new tag exists.
+
+7. **Do NOT push** unless the user explicitly asks. Report the tag name and suggest:
+
+   ```
+   Ready to push. When you're ready:
+     git push origin main --follow-tags
+   ```
+
+## Version Calculation Reference
+
+Given current version `X.Y.Z`:
+- `patch` -> `X.Y.(Z+1)`
+- `minor` -> `X.(Y+1).0`
+- `major` -> `(X+1).0.0`
+
+## Error Recovery
+
+- If bumpversion fails, the tag won't exist. Fix the issue and re-run — bumpversion is idempotent as long as the tag doesn't already exist.
+- If you need to undo a release commit (before pushing): `git tag -d vX.Y.Z && git reset --soft HEAD~1`
+- Never amend a release commit that has been pushed.
+
+## Notes
+
+- When the tag is pushed, the release CI (`.github/workflows/release.yml`) automatically extracts the matching version section from `CHANGELOG.md` and uses it as the GitHub Release body. No manual copy-paste needed.
+- The release commit message is controlled by `.bumpversion.cfg` (`Bump version: X.Y.Z -> A.B.C`). Do not override it.
+- If you need to manually update the GitHub Release body after the fact: `gh release edit vX.Y.Z --notes-file <(sed -n '/## \[X.Y.Z\]/,/## \[/p' CHANGELOG.md | head -n -1)`

.github/workflows/release.yml

@@ -123,6 +123,29 @@ jobs:
           p12-file-base64: ${{ secrets.APPLE_CERTIFICATE }}
           p12-password: ${{ secrets.APPLE_CERTIFICATE_PASSWORD }}
 
+      - name: Extract release notes from CHANGELOG.md
+        id: changelog
+        shell: bash
+        run: |
+          # Get the version from the tag (strip leading 'v')
+          VERSION="${GITHUB_REF_NAME#v}"
+
+          # Extract the section for this version from CHANGELOG.md
+          # Matches from "## [X.Y.Z]" until the next "## [" heading
+          NOTES=$(sed -n "/^## \[${VERSION}\]/,/^## \[/{/^## \[${VERSION}\]/d;/^## \[/d;p;}" CHANGELOG.md)
+
+          # Fall back to a placeholder if the version isn't in the changelog
+          if [ -z "$(echo "$NOTES" | tr -d '[:space:]')" ]; then
+            NOTES="See the assets below to download and install this version."
+          fi
+
+          # Use multiline output syntax
+          {
+            echo "notes<<CHANGELOG_EOF"
+            echo "$NOTES"
+            echo "CHANGELOG_EOF"
+          } >> "$GITHUB_OUTPUT"
+
       - uses: tauri-apps/[email protected]
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
@@ -139,17 +162,7 @@ jobs:
           projectPath: tauri
           tagName: v__VERSION__
           releaseName: "voicebox v__VERSION__"
-          releaseBody: |
-            ## What's Changed
-            See the assets below to download and install this version.
-
-            ### Installation
-            - **macOS (Apple Silicon)**: Download the `aarch64.dmg` file - uses MLX for fast native inference
-            - **macOS (Intel)**: Download the `x64.dmg` file - uses PyTorch
-            - **Windows**: Download the `.msi` installer
-            - **Linux**: Compile from source (see README)
-
-            The app includes automatic updates - future updates will be installed automatically.
+          releaseBody: ${{ steps.changelog.outputs.notes }}
           releaseDraft: true
           prerelease: false
           args: ${{ matrix.args }}

CHANGELOG.md

@@ -1,96 +1,437 @@
+<!-- This file is compiled automatically during the release workflow. -->
+<!-- Do not edit manually — your changes will be overwritten. -->
+<!-- To update the draft: ask the agent to use the draft-release-notes skill. -->
+<!-- To finalize a release: ask the agent to use the release-bump skill. -->
+
 # 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).
-
 ## [Unreleased]
 
-### Fixed
-- **Profile Name Validation** - Added proper validation to prevent duplicate profile names ([#134](https://github.com/jamiepine/voicebox/issues/134))
-  - Users now receive clear error messages when attempting to create or update profiles with duplicate names
-  - Improved error handling in create and update profile API endpoints
-  - Added comprehensive test suite for duplicate name validation
+This release rewrites the backend into a modular architecture, migrates the documentation site to Fumadocs, and ships a batch of bug fixes and UI polish across the stack.
 
-## [0.1.0] - 2026-01-25
+The backend's 3,000-line monolith `main.py` has been decomposed into domain routers, a services layer, and a proper database package. A style guide and ruff configuration now enforce consistency. On the frontend, model loading status is now visible in the UI, effects presets get a dropdown, and several race conditions and accessibility gaps are closed.
 
-### Added
+### Backend Refactor ([#285](https://github.com/jamiepine/voicebox/pull/285))
+- Extracted all routes from `main.py` into 13 domain routers under `backend/routes/` — `main.py` dropped from ~3,100 lines to ~10
+- Moved CRUD and service modules into `backend/services/`, platform detection into `backend/utils/`
+- Split monolithic `database.py` into a `database/` package with separate `models`, `session`, `migrations`, and `seed` modules
+- Added `backend/STYLE_GUIDE.md` and `pyproject.toml` with ruff linting config
+- Removed dead code: unused `_get_cuda_dll_excludes`, stale `studio.py`, `example_usage.py`, old `Makefile`
+- Deduplicated shared logic across TTS backends into `backends/base.py`
+- Improved startup logging with version, platform, data directory, and database stats
+- Fixed startup database session leak — sessions now rollback and close in `finally` block
+- Isolated shutdown unload calls so one backend failure doesn't block the others
+- Handled null duration in `story_items` migration
+- Reject model migration when target is a subdirectory of source cache
 
-#### 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
+### Documentation Rewrite ([#288](https://github.com/jamiepine/voicebox/pull/288))
+- Migrated docs site from Mintlify to Fumadocs (Next.js-based)
+- Rewrote introduction and root page with content from README
+- Added "Edit on GitHub" links and last-updated timestamps on all pages
+- Generated OpenAPI spec and auto-generated API reference pages
+- Removed stale planning docs (`CUDA_BACKEND_SWAP`, `EXTERNAL_PROVIDERS`, `MLX_AUDIO`, `TTS_PROVIDER_ARCHITECTURE`, etc.)
+- Sidebar groups now expand by default; root redirects to `/docs`
+- Added OG image metadata and `/og` preview page
 
-#### 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
+### UI & Frontend
+- Added model loading status indicator and effects preset dropdown ([3187344](https://github.com/jamiepine/voicebox/commit/3187344))
+- Fixed take-label race condition during regeneration
+- Added accessible focus styling to select component
+- Softened select focus indicator opacity
+- Addressed 4 critical and 12 major issues from CodeRabbit review
 
-#### 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
+### Platform Fixes
+- Replaced `netstat` with `TcpStream` + PowerShell for Windows port detection ([#277](https://github.com/jamiepine/voicebox/pull/277))
+- Fixed Docker frontend build and cleaned up Docker docs
+- Fixed macOS download links to use `.dmg` instead of `.app.tar.gz`
+- Added dynamic download redirect routes to landing site
 
-#### 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
+### Release Tooling
+- Added `draft-release-notes` and `release-bump` agent skills
+- Wired CI release workflow to extract notes from `CHANGELOG.md` for GitHub Releases
+- Backfilled changelog with all historical releases
 
-### Technical Details
+## [0.2.3] - 2026-03-15
 
-- 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
+The "it works in dev but not in prod" release. This version fixes a series of PyInstaller bundling issues that prevented model downloading, loading, generation, and progress tracking from working in production builds.
+
+### Model Downloads Now Actually Work
+
+The v0.2.1/v0.2.2 builds could not download or load models that weren't already cached from a dev install. This release fixes the entire chain:
+
+- **Chatterbox, Chatterbox Turbo, and LuxTTS** all download, load, and generate correctly in bundled builds
+- **Real-time download progress** — byte-level progress bars now work in production. The root cause: `huggingface_hub` silently disables tqdm progress bars based on logger level, which prevented our progress tracker from receiving byte updates. We now force-enable the internal counter regardless.
+- **Fixed Python 3.12.0 `code.replace()` bug** — the macOS build was on Python 3.12.0, which has a [known CPython bug](https://github.com/pyinstaller/pyinstaller/issues/7992) that corrupts bytecode when PyInstaller rewrites code objects. This caused `NameError: name 'obj' is not defined` crashes during scipy/torch imports. Upgraded to Python 3.12.13.
+
+### PyInstaller Fixes
+
+- Collect all `inflect` files — `typeguard`'s `@typechecked` decorator calls `inspect.getsource()` at import time, which needs `.py` source files, not just bytecode. Fixes LuxTTS "could not get source code" error.
+- Collect all `perth` files — bundles the pretrained watermark model (`hparams.yaml`, `.pth.tar`) needed by Chatterbox at runtime
+- Collect all `piper_phonemize` files — bundles `espeak-ng-data/` (phoneme tables, language dicts) needed by LuxTTS for text-to-phoneme conversion
+- Set `ESPEAK_DATA_PATH` in frozen builds so the espeak-ng C library finds the bundled data instead of looking at `/usr/share/espeak-ng-data/`
+- Collect all `linacodec` files — fixes `inspect.getsource` error in Vocos codec
+- Collect all `zipvoice` files — fixes source code lookup in LuxTTS voice cloning
+- Copy metadata for `requests`, `transformers`, `huggingface-hub`, `tokenizers`, `safetensors`, `tqdm` — fixes `importlib.metadata` lookups in frozen binary
+- Add hidden imports for `chatterbox`, `chatterbox_turbo`, `luxtts`, `zipvoice` backends
+- Add `multiprocessing.freeze_support()` to fix resource_tracker subprocess crash in frozen binary
+- `--noconsole` now only applied on Windows — macOS/Linux need stdout/stderr for Tauri sidecar log capture
+- Hardened `sys.stdout`/`sys.stderr` devnull redirect to test writability, not just `None` check
+
+### Updater
+
+- Fixed updater artifact generation with `v1Compatible` for `tauri-action` signature files
+- Updated `tauri-action` to v0.6 to fix updater JSON and `.sig` generation
+
+### Other Fixes
+
+- Full traceback logging on all backend model loading errors (was just `str(e)` before)
+
+## [0.2.2] - 2026-03-15
+
+- Fix Chatterbox model support in bundled builds
+- Fix LuxTTS/ZipVoice support in bundled builds
+- Auto-update CUDA binary when app version changes
+- CUDA download progress bar
+- Fix server process staying alive on macOS (SIGHUP handling, watchdog grace period)
+- Hide console window when running CUDA binary on Windows
+
+## [0.2.1] - 2026-03-15
+
+Voicebox v0.1.x was a single-engine voice cloning app built around Qwen3-TTS. v0.2.0 is a ground-up rethink: four TTS engines, 23 languages, paralinguistic emotion controls, a post-processing effects pipeline, unlimited generation length, an async generation queue, and support for every major GPU vendor. Plus Docker.
+
+### New TTS Engines
+
+#### Multi-Engine Architecture
+
+Voicebox now runs **four independent TTS engines** behind a thread-safe per-engine backend registry. Switch engines per-generation from a single dropdown — no restart required.
+
+| Engine                      | Languages | Size    | Key Strengths                                 |
+| --------------------------- | --------- | ------- | --------------------------------------------- |
+| **Qwen3-TTS 1.7B**          | 10        | ~3.5 GB | Highest quality, delivery instructions        |
+| **Qwen3-TTS 0.6B**          | 10        | ~1.2 GB | Lighter, faster variant                       |
+| **LuxTTS**                  | English   | ~300 MB | CPU-friendly, 48 kHz output, 150x realtime    |
+| **Chatterbox Multilingual** | 23        | ~3.2 GB | Broadest language coverage, zero-shot cloning |
+| **Chatterbox Turbo**        | English   | ~1.5 GB | 350M params, low latency, paralinguistic tags |
+
+#### Chatterbox Multilingual — 23 Languages ([#257](https://github.com/jamiepine/voicebox/pull/257))
+
+Zero-shot voice cloning in Arabic, Chinese, Danish, Dutch, English, Finnish, French, German, Greek, Hebrew, Hindi, Italian, Japanese, Korean, Malay, Norwegian, Polish, Portuguese, Russian, Spanish, Swahili, Swedish, and Turkish.
+
+#### LuxTTS — Lightweight English TTS ([#254](https://github.com/jamiepine/voicebox/pull/254))
+
+A fast, CPU-friendly English engine. ~300 MB download, 48 kHz output, runs at 150x realtime on CPU.
+
+#### Chatterbox Turbo — Expressive English ([#258](https://github.com/jamiepine/voicebox/pull/258))
+
+A fast 350M-parameter English model with inline paralinguistic tags.
+
+#### Paralinguistic Tags Autocomplete ([#265](https://github.com/jamiepine/voicebox/pull/265))
+
+Type `/` in the text input with Chatterbox Turbo selected to open an autocomplete for **9 expressive tags**: `[laugh]` `[chuckle]` `[gasp]` `[cough]` `[sigh]` `[groan]` `[sniff]` `[shush]` `[clear throat]`
+
+### Generation
+
+#### Unlimited Generation Length — Auto-Chunking ([#266](https://github.com/jamiepine/voicebox/pull/266))
+
+Long text is now automatically split at sentence boundaries, generated per-chunk, and crossfaded back together. Engine-agnostic.
+
+- Auto-chunking limit slider — 100–5,000 chars (default 800)
+- Crossfade slider — 0–200ms (default 50ms)
+- Max text length raised to 50,000 characters
+- Smart splitting respects abbreviations, CJK punctuation, and `[tags]`
+
+#### Asynchronous Generation Queue ([#269](https://github.com/jamiepine/voicebox/pull/269))
+
+Generation is now fully non-blocking. Serial execution queue prevents GPU contention. Real-time SSE status streaming.
+
+#### Generation Versions
+
+Every generation now supports multiple versions with provenance tracking — original, effects versions, takes, source tracking, version pinning in stories, and favorites.
+
+### Post-Processing Effects ([#271](https://github.com/jamiepine/voicebox/pull/271))
+
+A full audio effects system powered by Spotify's `pedalboard` library: Pitch Shift, Reverb, Delay, Chorus/Flanger, Compressor, Gain, High-Pass Filter, Low-Pass Filter. 4 built-in presets, custom presets, per-profile default effects, and live preview.
 
 ### Platform Support
 
-- macOS (Apple Silicon and Intel)
-- Windows
-- Linux (AppImage)
+- **Windows Support** ([#272](https://github.com/jamiepine/voicebox/pull/272)) — Full Windows support with CUDA GPU detection
+- **Linux** ([#262](https://github.com/jamiepine/voicebox/pull/262)) — AMD ROCm, NVIDIA GBM fix, WebKitGTK mic access (build from source)
+- **NVIDIA CUDA Backend Swap** ([#252](https://github.com/jamiepine/voicebox/pull/252)) — Download and swap in CUDA backend from within the app
+- **Intel Arc (XPU) and DirectML** — PyTorch backend supports Intel Arc and DirectML
+- **Docker + Web Deployment** ([#161](https://github.com/jamiepine/voicebox/pull/161)) — 3-stage build, non-root runtime, health checks
+- **Whisper Turbo** — Added `openai/whisper-large-v3-turbo` as a transcription model option
 
----
+### Model Management ([#268](https://github.com/jamiepine/voicebox/pull/268))
 
-## [Unreleased]
+Per-model unload, custom models directory, model folder migration, download cancel/clear UI ([#238](https://github.com/jamiepine/voicebox/pull/238)), restructured settings UI.
 
-### Fixed
-- Audio export failing when Tauri save dialog returns object instead of string path
-- OpenAPI client generator script now documents the local backend port and avoids an unused loop variable warning
+### Security & Reliability
 
-### Added
-- **justfile** - Comprehensive development workflow automation with commands for setup, development, building, testing, and code quality checks
-  - Cross-platform support (macOS, Linux, Windows)
-  - Python version detection and compatibility warnings
-  - Self-documenting help system with `just --list`
+- CORS hardening ([#88](https://github.com/jamiepine/voicebox/pull/88))
+- Network access toggle ([#133](https://github.com/jamiepine/voicebox/pull/133))
+- Offline crash fix ([#152](https://github.com/jamiepine/voicebox/pull/152))
+- Atomic audio saves ([#263](https://github.com/jamiepine/voicebox/pull/263))
+- Filesystem health endpoint
+- Chatterbox float64 dtype fix ([#264](https://github.com/jamiepine/voicebox/pull/264))
 
-### Changed
-- **README** - Updated Quick Start with justfile-based setup instructions
+### Accessibility ([#243](https://github.com/jamiepine/voicebox/pull/243))
 
-### Removed
-- **Makefile** - Replaced by justfile (cross-platform, simpler syntax)
+Screen reader support, keyboard navigation, state-aware `aria-label` attributes on all interactive controls.
 
----
+### UI Polish
 
-## [Unreleased - Planned]
+- Redesigned landing page ([#274](https://github.com/jamiepine/voicebox/pull/274))
+- Voices tab overhaul with inline inspector
+- Responsive layout improvements
+- Duplicate profile name validation ([#175](https://github.com/jamiepine/voicebox/pull/175))
 
-### 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
+### Community Contributors
 
----
+[@haosenwang1018](https://github.com/haosenwang1018), [@Balneario-de-Cofrentes](https://github.com/Balneario-de-Cofrentes), [@ageofalgo](https://github.com/ageofalgo), [@mikeswann](https://github.com/mikeswann), [@rayl15](https://github.com/rayl15), [@mpecanha](https://github.com/mpecanha), [@ways2read](https://github.com/ways2read), [@ieguiguren](https://github.com/ieguiguren), [@Vaibhavee89](https://github.com/Vaibhavee89), [@pandego](https://github.com/pandego), [@luminest-llc](https://github.com/luminest-llc)
 
+## [0.1.13] - 2026-02-23
+
+### Stability and reliability
+
+- [#95](https://github.com/jamiepine/voicebox/pull/95) Fix: selecting 0.6B model still downloads and uses 1.7B
+- [#93](https://github.com/jamiepine/voicebox/pull/93) fix(mlx): bundle native libs and broaden error handling for Apple Silicon
+- [#79](https://github.com/jamiepine/voicebox/pull/79) fix: handle non-ASCII filenames in Content-Disposition headers
+- [#78](https://github.com/jamiepine/voicebox/pull/78) fix: guard getUserMedia call against undefined mediaDevices in non-secure contexts
+- [#77](https://github.com/jamiepine/voicebox/pull/77) fix: await for confirmation before deleting voices and channels
+- [#128](https://github.com/jamiepine/voicebox/pull/128) fix: resolve multiple issues (#96, #119, #111, #108, #121, #125, #127)
+- [#40](https://github.com/jamiepine/voicebox/pull/40) Fix: audio export path resolution
+
+### Build and packaging
+
+- [#122](https://github.com/jamiepine/voicebox/pull/122) fix(web): add @tailwindcss/vite plugin to web config
+- [#126](https://github.com/jamiepine/voicebox/pull/126) Create requirements.txt
+
+### UX and docs
+
+- [#44](https://github.com/jamiepine/voicebox/pull/44) Enhances floating generate box UX
+- [#57](https://github.com/jamiepine/voicebox/pull/57) chore: updates repo URL in README
+- [#146](https://github.com/jamiepine/voicebox/pull/146) Add Spacebot banner to landing page
+- [#1](https://github.com/jamiepine/voicebox/pull/1) Improvements
+
+## [0.1.12] - 2026-01-31
+
+### Model Download UX Overhaul
+
+- Real-time download progress tracking with accurate percentage and speed info
+- No more downloading notifications during generation even when its not downloading
+- Better error handling and status reporting throughout the download process
+
+### Other Improvements
+
+- Enhanced health check endpoint with GPU type information
+- Improved model caching verification
+- More reliable SSE progress updates
+- Actual update notifications — no need to manually check in settings anymore
+
+## [0.1.11] - 2026-01-30
+
+- Fixed transcriptions on MLX
+- Fixed model download progress (finally)
+
+## [0.1.10] - 2026-01-30
+
+### Faster generation on Apple Silicon
+
+Massive speed gains, from around 20s per generation to 2-3s. Added native MLX backend support for Apple Silicon, providing significantly faster TTS and STT generation on M-series macOS machines.
+
+- **MLX Backend** — New backend implementation optimized for Apple Silicon using MLX framework
+- **Dynamic Backend Selection** — Automatically detects platform and selects between MLX (macOS) and PyTorch (other platforms)
+- Refactored TTS and STT logic into modular backend implementations
+- Updated build process to include MLX-specific dependencies for macOS builds
+
+## [0.1.9] - 2026-01-30
+
+### Improved voice profile creation flow
+
+- Voice create drafts: No longer lose work if you close the modal
+- Fixed whisper only transcribing English or Chinese, now has support for all languages
+
+### Improved Stories editor
+
+- Added spacebar for play/pause
+- Timeline now auto-scrolls to follow playhead during playback
+- Fixed misalignment of the items with mouse when picking up
+- Fixed hitbox for selecting an item
+- Fixed playhead jumping forward when pressing play
+
+### Generation box improvements
+
+- Instruct mode no longer wipes prompt text
+- Improved UI cleanliness
+
+### Misc
+
+- Fixed "Model downloading" toast during generation when model is already downloaded
+
+## [0.1.8] - 2026-01-29
+
+### Model Download Timeout Issues
+
+Fixed critical issue where model downloads would fail with "Failed to fetch" errors on Windows. Refactored download endpoints to return immediately and continue downloads in background.
+
+### Cross-Platform Cache Path Issues
+
+Fixed hardcoded `~/.cache/huggingface/hub` paths that don't work on Windows. All cache paths now use `hf_constants.HF_HUB_CACHE` for proper cross-platform support.
+
+### Windows Process Management
+
+- Added `/shutdown` endpoint for graceful server shutdown on Windows
+- Added `gpu_type` field to health check response
+
+## [0.1.7] - 2026-01-29
+
+- Trim and split audio clips in Story Editor
+- Auto-activation of stories in Story Editor with visible playhead
+- Conditional auto-play support in AudioPlayer for better user control
+- Refactored audio loading across HistoryTable, SampleList, and generation forms
+- Audio now only auto-plays when explicitly intended, preventing unexpected playback
+
+## [0.1.6] - 2026-01-29
+
+### Introducing Stories
+
+A full voice editor for composing podcasts and generated conversations.
+
+- **Stories Editor** — Create multi-voice narratives, podcasts, or conversations with a timeline-based editor
+- Compose tracks with different voices
+- Edit and arrange audio segments inline
+- Build generated conversations with multiple participants
+- **Improved Voice Generation UI** — Auto-resizing input, default voice selection, better layout
+- **Track Editor Integration** — Inline track editing within story items
+
+## [0.1.5] - 2026-01-28
+
+Fixed recording length limit at 0:29 to auto stop instead of passing the limit and getting an error, which would cause users to lose their recording.
+
+## [0.1.4] - 2026-01-28
+
+- Audio channel management system
+- Native audio playback handling in AudioPlayer component
+- Refactored ConnectionForm and Checkbox components
+- Improved layout consistency and responsiveness
+- Added safe area constants for better responsive design
+
+## [0.1.3] - 2026-01-27
+
+- Improved the generate textbox
+- Maybe fixed Windows autoupdate restarting entire computer
+
+## [0.1.2] - 2026-01-27
+
+### Audio Capture & Format Conversion
+
+- Added audio format conversion util
+- Enhanced system audio capture on macOS and Windows
+- Improved audio recording hooks
+- Added audio input entitlement for macOS
+- Added audio capture tests
+
+### Update System
+
+- Enhanced auto-updater functionality and update status display
+
+## [0.1.1] - 2026-01-27
+
+### Platform Support
+
+- **macOS Audio Capture** — Native audio capture support for sample creation
+- **Windows Audio Capture** — WASAPI implementation with improved thread safety
+- **Linux Support** — Temporarily removed builds due to runner disk space constraints
+
+### Audio Features
+
+- Play/pause for audio samples across all components
+- Three new sample components: Recording, System capture, Upload with drag-and-drop
+- Audio validation, error handling, and consistent cleanup
+
+### Voice Profile Management
+
+- Profile import with file size validation (100MB limit)
+- Enhanced profile form with new audio sample components
+- Drag-and-drop support for audio file uploads
+
+### Server Management
+
+- Changed default URL from `localhost:8000` to `127.0.0.1:17493`
+- Server reuse logic, "keep server running" preference, orphaned process handling
+
+### Build & Release
+
+- Added `.bumpversion.cfg` for automated version management
+- Enhanced icon generation script for multi-size Windows icons
+
+### Bug Fixes
+
+- Fixed date formatting for timezone-less date strings
+- Fixed getLatestRelease file filtering
+- Improved audio duration metadata on Windows
+
+## [0.1.0] - 2026-01-27
+
+The first public release of Voicebox — an open-source voice synthesis studio powered by Qwen3-TTS.
+
+### Voice Cloning with Qwen3-TTS
+
+- Automatic model download from HuggingFace
+- Multiple model sizes (1.7B and 0.6B)
+- Voice prompt caching for instant regeneration
+- English and Chinese support
+
+### Voice Profile Management
+
+- Create profiles from audio files or record directly in the app
+- Multiple samples per profile for higher quality cloning
+- Import/Export profiles
+- Automatic transcription via Whisper
+
+### Speech Generation
+
+- Simple text-to-speech with profile selection
+- Seed control for reproducible generations
+- Long-form support up to 5,000 characters
+
+### Generation History
+
+- Full history with metadata
+- Search by text content
+- Inline playback and download
+
+### Flexible Deployment
+
+- Local mode with bundled backend
+- Remote mode for GPU servers on your network
+- One-click server setup
+
+### Desktop Experience
+
+- Built with Tauri v2 (Rust) — native performance, not Electron
+- Cross-platform: macOS and Windows
+- No Python installation required
+
+### Tech Stack
+
+Tauri v2, React, TypeScript, Tailwind CSS, FastAPI, Qwen3-TTS, Whisper, SQLite
+
+[Unreleased]: https://github.com/jamiepine/voicebox/compare/v0.2.3...HEAD
+[0.2.3]: https://github.com/jamiepine/voicebox/compare/v0.2.2...v0.2.3
+[0.2.2]: https://github.com/jamiepine/voicebox/compare/v0.2.1...v0.2.2
+[0.2.1]: https://github.com/jamiepine/voicebox/compare/v0.1.13...v0.2.1
+[0.1.13]: https://github.com/jamiepine/voicebox/compare/v0.1.12...v0.1.13
+[0.1.12]: https://github.com/jamiepine/voicebox/compare/v0.1.11...v0.1.12
+[0.1.11]: https://github.com/jamiepine/voicebox/compare/v0.1.10...v0.1.11
+[0.1.10]: https://github.com/jamiepine/voicebox/compare/v0.1.9...v0.1.10
+[0.1.9]: https://github.com/jamiepine/voicebox/compare/v0.1.8...v0.1.9
+[0.1.8]: https://github.com/jamiepine/voicebox/compare/v0.1.7...v0.1.8
+[0.1.7]: https://github.com/jamiepine/voicebox/compare/v0.1.6...v0.1.7
+[0.1.6]: https://github.com/jamiepine/voicebox/compare/v0.1.5...v0.1.6
+[0.1.5]: https://github.com/jamiepine/voicebox/compare/v0.1.4...v0.1.5
+[0.1.4]: https://github.com/jamiepine/voicebox/compare/v0.1.3...v0.1.4
+[0.1.3]: https://github.com/jamiepine/voicebox/compare/v0.1.2...v0.1.3
+[0.1.2]: https://github.com/jamiepine/voicebox/compare/v0.1.1...v0.1.2
+[0.1.1]: https://github.com/jamiepine/voicebox/compare/v0.1.0...v0.1.1
 [0.1.0]: https://github.com/jamiepine/voicebox/releases/tag/v0.1.0

PATCH_NOTES.md

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

README.md

@@ -27,10 +27,10 @@
 
 <p align="center">
   <a href="https://voicebox.sh">voicebox.sh</a> •
+  <a href="https://docs.voicebox.sh">Docs</a> •
   <a href="#download">Download</a> •
   <a href="#features">Features</a> •
-  <a href="#api">API</a> •
-  <a href="#roadmap">Roadmap</a>
+  <a href="#api">API</a>
 </p>
 
 <br/>
@@ -76,12 +76,12 @@ Voicebox is a **local-first voice cloning studio** — a free and open-source al
 
 ## Download
 
-| Platform | Download |
-|----------|----------|
-| macOS (Apple Silicon) | [Download DMG](https://voicebox.sh/download/mac-arm) |
-| macOS (Intel) | [Download DMG](https://voicebox.sh/download/mac-intel) |
-| Windows | [Download MSI](https://voicebox.sh/download/windows) |
-| Docker | `docker compose up` |
+| Platform              | Download                                               |
+| --------------------- | ------------------------------------------------------ |
+| macOS (Apple Silicon) | [Download DMG](https://voicebox.sh/download/mac-arm)   |
+| macOS (Intel)         | [Download DMG](https://voicebox.sh/download/mac-intel) |
+| Windows               | [Download MSI](https://voicebox.sh/download/windows)   |
+| Docker                | `docker compose up`                                    |
 
 > **[View all binaries →](https://github.com/jamiepine/voicebox/releases/latest)**
 
@@ -95,12 +95,12 @@ Voicebox is a **local-first voice cloning studio** — a free and open-source al
 
 Four TTS engines with different strengths, switchable per-generation:
 
-| Engine | Languages | Strengths |
-|--------|-----------|-----------|
-| **Qwen3-TTS** (0.6B / 1.7B) | 10 | High-quality multilingual cloning, delivery instructions ("speak slowly", "whisper") |
-| **LuxTTS** | English | Lightweight (~1GB VRAM), 48kHz output, 150x realtime on CPU |
-| **Chatterbox Multilingual** | 23 | Broadest language coverage — Arabic, Danish, Finnish, Greek, Hebrew, Hindi, Malay, Norwegian, Polish, Swahili, Swedish, Turkish and more |
-| **Chatterbox Turbo** | English | Fast 350M model with paralinguistic emotion/sound tags |
+| Engine                      | Languages | Strengths                                                                                                                                |
+| --------------------------- | --------- | ---------------------------------------------------------------------------------------------------------------------------------------- |
+| **Qwen3-TTS** (0.6B / 1.7B) | 10        | High-quality multilingual cloning, delivery instructions ("speak slowly", "whisper")                                                     |
+| **LuxTTS**                  | English   | Lightweight (~1GB VRAM), 48kHz output, 150x realtime on CPU                                                                              |
+| **Chatterbox Multilingual** | 23        | Broadest language coverage — Arabic, Danish, Finnish, Greek, Hebrew, Hindi, Malay, Norwegian, Polish, Swahili, Swedish, Turkish and more |
+| **Chatterbox Turbo**        | English   | Fast 350M model with paralinguistic emotion/sound tags                                                                                   |
 
 ### Emotions & Paralinguistic Tags
 
@@ -112,16 +112,16 @@ Type `/` in the text input to insert expressive tags that the model synthesizes
 
 8 audio effects powered by Spotify's `pedalboard` library. Apply after generation, preview in real time, build reusable presets.
 
-| Effect | Description |
-|--------|-------------|
-| Pitch Shift | Up or down by up to 12 semitones |
-| Reverb | Configurable room size, damping, wet/dry mix |
-| Delay | Echo with adjustable time, feedback, and mix |
+| Effect           | Description                                   |
+| ---------------- | --------------------------------------------- |
+| Pitch Shift      | Up or down by up to 12 semitones              |
+| Reverb           | Configurable room size, damping, wet/dry mix  |
+| Delay            | Echo with adjustable time, feedback, and mix  |
 | Chorus / Flanger | Modulated delay for metallic or lush textures |
-| Compressor | Dynamic range compression |
-| Gain | Volume adjustment (-40 to +40 dB) |
-| High-Pass Filter | Remove low frequencies |
-| Low-Pass Filter | Remove high frequencies |
+| Compressor       | Dynamic range compression                     |
+| Gain             | Volume adjustment (-40 to +40 dB)             |
+| High-Pass Filter | Remove low frequencies                        |
+| Low-Pass Filter  | Remove high frequencies                       |
 
 Ships with 4 built-in presets (Robotic, Radio, Echo Chamber, Deep Voice) and supports custom presets. Effects can be assigned per-profile as defaults.
 
@@ -186,14 +186,14 @@ Multi-voice timeline editor for conversations, podcasts, and narratives.
 
 ### GPU Support
 
-| Platform | Backend | Notes |
-|----------|---------|-------|
-| macOS (Apple Silicon) | MLX (Metal) | 4-5x faster via Neural Engine |
+| Platform                 | Backend        | Notes                                          |
+| ------------------------ | -------------- | ---------------------------------------------- |
+| macOS (Apple Silicon)    | MLX (Metal)    | 4-5x faster via Neural Engine                  |
 | Windows / Linux (NVIDIA) | PyTorch (CUDA) | Auto-downloads CUDA binary from within the app |
-| Linux (AMD) | PyTorch (ROCm) | Auto-configures HSA_OVERRIDE_GFX_VERSION |
-| Windows (any GPU) | DirectML | Universal Windows GPU support |
-| Intel Arc | IPEX/XPU | Intel discrete GPU acceleration |
-| Any | CPU | Works everywhere, just slower |
+| Linux (AMD)              | PyTorch (ROCm) | Auto-configures HSA_OVERRIDE_GFX_VERSION       |
+| Windows (any GPU)        | DirectML       | Universal Windows GPU support                  |
+| Intel Arc                | IPEX/XPU       | Intel discrete GPU acceleration                |
+| Any                      | CPU            | Works everywhere, just slower                  |
 
 ---
 
@@ -224,30 +224,30 @@ Full API documentation available at `http://localhost:17493/docs`.
 
 ## Tech Stack
 
-| Layer | Technology |
-|-------|------------|
-| Desktop App | Tauri (Rust) |
-| Frontend | React, TypeScript, Tailwind CSS |
-| State | Zustand, React Query |
-| Backend | FastAPI (Python) |
-| TTS Engines | Qwen3-TTS, LuxTTS, Chatterbox, Chatterbox Turbo |
-| Effects | Pedalboard (Spotify) |
-| Transcription | Whisper / Whisper Turbo (PyTorch or MLX) |
-| Inference | MLX (Apple Silicon) / PyTorch (CUDA/ROCm/XPU/CPU) |
-| Database | SQLite |
-| Audio | WaveSurfer.js, librosa |
+| Layer         | Technology                                        |
+| ------------- | ------------------------------------------------- |
+| Desktop App   | Tauri (Rust)                                      |
+| Frontend      | React, TypeScript, Tailwind CSS                   |
+| State         | Zustand, React Query                              |
+| Backend       | FastAPI (Python)                                  |
+| TTS Engines   | Qwen3-TTS, LuxTTS, Chatterbox, Chatterbox Turbo   |
+| Effects       | Pedalboard (Spotify)                              |
+| Transcription | Whisper / Whisper Turbo (PyTorch or MLX)          |
+| Inference     | MLX (Apple Silicon) / PyTorch (CUDA/ROCm/XPU/CPU) |
+| Database      | SQLite                                            |
+| Audio         | WaveSurfer.js, librosa                            |
 
 ---
 
 ## Roadmap
 
-| Feature | Description |
-|---------|-------------|
-| **Real-time Streaming** | Stream audio as it generates, word by word |
-| **Voice Design** | Create new voices from text descriptions |
-| **More Models** | XTTS, Bark, and other open-source voice models |
-| **Plugin Architecture** | Extend with custom models and effects |
-| **Mobile Companion** | Control Voicebox from your phone |
+| Feature                 | Description                                    |
+| ----------------------- | ---------------------------------------------- |
+| **Real-time Streaming** | Stream audio as it generates, word by word     |
+| **Voice Design**        | Create new voices from text descriptions       |
+| **More Models**         | XTTS, Bark, and other open-source voice models |
+| **Plugin Architecture** | Extend with custom models and effects          |
+| **Mobile Companion**    | Control Voicebox from your phone               |
 
 ---
 

app/plugins/changelog.ts

@@ -0,0 +1,23 @@
+import { readFileSync } from 'node:fs';
+import path from 'node:path';
+import type { Plugin } from 'vite';
+
+/** Vite plugin that exposes CHANGELOG.md as `virtual:changelog`. */
+export function changelogPlugin(repoRoot: string): Plugin {
+  const virtualId = 'virtual:changelog';
+  const resolvedId = '\0' + virtualId;
+  const changelogPath = path.resolve(repoRoot, 'CHANGELOG.md');
+
+  return {
+    name: 'changelog',
+    resolveId(id) {
+      if (id === virtualId) return resolvedId;
+    },
+    load(id) {
+      if (id === resolvedId) {
+        const raw = readFileSync(changelogPath, 'utf-8');
+        return `export default ${JSON.stringify(raw)};`;
+      }
+    },
+  };
+}

app/src/App.tsx

@@ -8,6 +8,7 @@ import { TOP_SAFE_AREA_PADDING } from '@/lib/constants/ui';
 import { cn } from '@/lib/utils/cn';
 import { usePlatform } from '@/platform/PlatformContext';
 import { router } from '@/router';
+import { useLogStore } from '@/stores/logStore';
 import { useServerStore } from '@/stores/serverStore';
 
 const LOADING_MESSAGES = [
@@ -63,6 +64,14 @@ function App() {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [platform.lifecycle]);
 
+  // Subscribe to server logs
+  useEffect(() => {
+    const unsubscribe = platform.lifecycle.subscribeToServerLogs((entry) => {
+      useLogStore.getState().addEntry(entry);
+    });
+    return unsubscribe;
+  }, [platform.lifecycle]);
+
   // Setup window close handler and auto-start server when running in Tauri (production only)
   useEffect(() => {
     if (!platform.metadata.isTauri) {

app/src/components/History/HistoryTable.tsx

@@ -15,7 +15,7 @@ import {
   Wand2,
 } from 'lucide-react';
 import { useEffect, useRef, useState } from 'react';
-import Loader from 'react-loaders';
+
 import { EffectsChainEditor } from '@/components/Effects/EffectsChainEditor';
 import { Button } from '@/components/ui/button';
 import {
@@ -56,8 +56,35 @@ import { formatDate, formatDuration, formatEngineName } from '@/lib/utils/format
 import { useGenerationStore } from '@/stores/generationStore';
 import { usePlayerStore } from '@/stores/playerStore';
 
-// OLD TABLE-BASED COMPONENT - REMOVED (can be found in git history)
-// This is the new alternate history view with fixed height rows
+// ─── Audio Bars ─────────────────────────────────────────────────────────────
+
+function AudioBars({ mode }: { mode: 'idle' | 'generating' | 'playing' }) {
+  const barColor = mode !== 'idle' ? 'bg-accent' : 'bg-muted-foreground/40';
+  return (
+    <div className="flex items-center gap-[2px] h-5">
+      {[0, 1, 2, 3, 4].map((i) => (
+        <motion.div
+          key={i}
+          className={`w-[3px] rounded-full ${barColor}`}
+          animate={
+            mode === 'generating'
+              ? { height: ['6px', '16px', '6px'] }
+              : mode === 'playing'
+                ? { height: ['8px', '14px', '4px', '12px', '8px'] }
+                : { height: '8px' }
+          }
+          transition={
+            mode === 'generating'
+              ? { duration: 0.6, repeat: Infinity, delay: i * 0.08, ease: 'easeInOut' }
+              : mode === 'playing'
+                ? { duration: 1.2, repeat: Infinity, delay: i * 0.15, ease: 'easeInOut' }
+                : { duration: 0.4, ease: 'easeOut' }
+          }
+        />
+      ))}
+    </div>
+  );
+}
 
 // NEW ALTERNATE HISTORY VIEW - FIXED HEIGHT ROWS WITH INFINITE SCROLL
 export function HistoryTable() {
@@ -446,12 +473,9 @@ export function HistoryTable() {
                   >
                     {/* Status icon */}
                     <div className="flex items-center shrink-0 w-10 justify-center overflow-hidden">
-                      <div className="scale-50">
-                        <Loader
-                          type={isGenerating ? 'line-scale' : 'line-scale-pulse-out-rapid'}
-                          active={isGenerating || isCurrentlyPlaying}
-                        />
-                      </div>
+                      <AudioBars
+                        mode={isGenerating ? 'generating' : isCurrentlyPlaying ? 'playing' : 'idle'}
+                      />
                     </div>
 
                     {/* Left side - Meta information */}

app/src/components/ServerTab/AboutPage.tsx

@@ -0,0 +1,135 @@
+import { ArrowUpRight } from 'lucide-react';
+import type { CSSProperties, ReactNode } from 'react';
+import { useEffect, useState } from 'react';
+import voiceboxLogo from '@/assets/voicebox-logo.png';
+import { usePlatform } from '@/platform/PlatformContext';
+
+function FadeIn({ delay = 0, children }: { delay?: number; children: ReactNode }) {
+  return (
+    <div
+      className="animate-[fadeInUp_0.5s_ease_both]"
+      style={{ animationDelay: `${delay}ms` } as CSSProperties}
+    >
+      {children}
+    </div>
+  );
+}
+
+export function AboutPage() {
+  const platform = usePlatform();
+  const [version, setVersion] = useState('');
+
+  useEffect(() => {
+    platform.metadata
+      .getVersion()
+      .then(setVersion)
+      .catch(() => setVersion(''));
+  }, [platform]);
+
+  return (
+    <>
+      <style>{`
+        @keyframes fadeInUp {
+          from {
+            opacity: 0;
+            transform: translateY(8px);
+          }
+          to {
+            opacity: 1;
+            transform: translateY(0);
+          }
+        }
+      `}</style>
+      <div className="max-w-md mx-auto h-full flex items-center">
+        <div className="flex flex-col items-center text-center space-y-5">
+          <FadeIn delay={0}>
+            <img src={voiceboxLogo} alt="Voicebox" className="w-20 h-20 object-contain" />
+          </FadeIn>
+
+          <FadeIn delay={80}>
+            <div className="space-y-1.5">
+              <h1 className="text-lg font-semibold">Voicebox</h1>
+              <p className="text-xs text-muted-foreground/60 h-4">
+                {version ? `v${version}` : '\u00A0'}
+              </p>
+            </div>
+          </FadeIn>
+
+          <FadeIn delay={160}>
+            <p className="text-sm text-muted-foreground leading-relaxed max-w-sm">
+              The open-source voice synthesis studio. Clone voices, generate speech, apply effects,
+              and build voice-powered apps — all running locally on your machine.
+            </p>
+          </FadeIn>
+
+          <FadeIn delay={240}>
+            <div className="flex items-center gap-1.5 text-sm text-muted-foreground">
+              <span>Created by</span>
+              <a
+                href="https://github.com/jamiepine"
+                target="_blank"
+                rel="noopener noreferrer"
+                className="text-accent hover:underline"
+              >
+                Jamie Pine
+              </a>
+            </div>
+          </FadeIn>
+
+          <FadeIn delay={320}>
+            <div className="flex flex-wrap justify-center gap-3 pt-2">
+              <a
+                href="https://buymeacoffee.com/jamiepine"
+                target="_blank"
+                rel="noopener noreferrer"
+                className="group inline-flex items-center gap-2 rounded-lg border border-border/60 px-4 py-2 text-sm transition-colors hover:bg-muted/50"
+              >
+                <svg
+                  className="h-4 w-4 text-[#FFDD00]"
+                  viewBox="0 0 24 24"
+                  fill="currentColor"
+                  aria-hidden="true"
+                >
+                  <path d="m20.216 6.415-.132-.666c-.119-.598-.388-1.163-1.001-1.379-.197-.069-.42-.098-.57-.241-.152-.143-.196-.366-.231-.572-.065-.378-.125-.756-.192-1.133-.057-.325-.102-.69-.25-.987-.195-.4-.597-.634-.996-.788a5.723 5.723 0 0 0-.626-.194c-1-.263-2.05-.36-3.077-.416a25.834 25.834 0 0 0-3.7.062c-.915.083-1.88.184-2.75.5-.318.116-.646.256-.888.501-.297.302-.393.77-.177 1.146.154.267.415.456.692.58.36.162.737.284 1.123.366 1.075.238 2.189.331 3.287.37 1.218.05 2.437.01 3.65-.118.299-.033.598-.073.896-.119.352-.054.578-.513.474-.834-.124-.383-.457-.531-.834-.473-.466.074-.96.108-1.382.146-1.177.08-2.358.082-3.536.006a22.228 22.228 0 0 1-1.157-.107c-.086-.01-.18-.025-.258-.036-.243-.036-.484-.08-.724-.13-.111-.027-.111-.185 0-.212h.005c.277-.06.557-.108.838-.147h.002c.131-.009.263-.032.394-.048a25.076 25.076 0 0 1 3.426-.12c.674.019 1.347.067 2.017.144l.228.031c.267.04.533.088.798.145.392.085.895.113 1.07.542.055.137.08.288.111.431l.319 1.484a.237.237 0 0 1-.199.284h-.003c-.037.006-.075.01-.112.015a36.704 36.704 0 0 1-4.743.295 37.059 37.059 0 0 1-4.699-.304c-.14-.017-.293-.042-.417-.06-.326-.048-.649-.108-.973-.161-.393-.065-.768-.032-1.123.161-.29.16-.527.404-.675.701-.154.316-.199.66-.267 1-.069.34-.176.707-.135 1.056.087.753.613 1.365 1.37 1.502a39.69 39.69 0 0 0 11.343.376.483.483 0 0 1 .535.53l-.071.697-1.018 9.907c-.041.41-.047.832-.125 1.237-.122.637-.553 1.028-1.182 1.171-.577.131-1.165.2-1.756.205-.656.004-1.31-.025-1.966-.022-.699.004-1.556-.06-2.095-.58-.475-.458-.54-1.174-.605-1.793l-.731-7.013-.322-3.094c-.037-.351-.286-.695-.678-.678-.336.015-.718.3-.678.679l.228 2.185.949 9.112c.147 1.344 1.174 2.068 2.446 2.272.742.12 1.503.144 2.257.156.966.016 1.942.053 2.892-.122 1.408-.258 2.465-1.198 2.616-2.657.34-3.332.683-6.663 1.024-9.995l.215-2.087a.484.484 0 0 1 .39-.426c.402-.078.787-.212 1.074-.518.455-.488.546-1.124.385-1.766zm-1.478.772c-.145.137-.363.201-.578.233-2.416.359-4.866.54-7.308.46-1.748-.06-3.477-.254-5.207-.498-.17-.024-.353-.055-.47-.18-.22-.236-.111-.71-.054-.995.052-.26.152-.609.463-.646.484-.057 1.046.148 1.526.22.577.088 1.156.159 1.737.212 2.48.226 5.002.19 7.472-.14.45-.06.899-.13 1.345-.21.399-.072.84-.206 1.08.206.166.281.188.657.162.974a.544.544 0 0 1-.169.364zm-6.159 3.9c-.862.37-1.84.788-3.109.788a5.884 5.884 0 0 1-1.569-.217l.877 9.004c.065.78.717 1.38 1.5 1.38 0 0 1.243.065 1.658.065.447 0 1.786-.065 1.786-.065.783 0 1.434-.6 1.499-1.38l.94-9.95a3.996 3.996 0 0 0-1.322-.238c-.826 0-1.491.284-2.26.613z" />
+                </svg>
+                Buy me a coffee
+                <ArrowUpRight className="h-3.5 w-3.5 text-muted-foreground/40 group-hover:text-muted-foreground transition-colors" />
+              </a>
+              <a
+                href="https://github.com/jamiepine/voicebox"
+                target="_blank"
+                rel="noopener noreferrer"
+                className="group inline-flex items-center gap-2 rounded-lg border border-border/60 px-4 py-2 text-sm transition-colors hover:bg-muted/50"
+              >
+                <svg
+                  className="h-4 w-4 text-muted-foreground"
+                  viewBox="0 0 24 24"
+                  fill="currentColor"
+                  aria-hidden="true"
+                >
+                  <path d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z" />
+                </svg>
+                GitHub
+                <ArrowUpRight className="h-3.5 w-3.5 text-muted-foreground/40 group-hover:text-muted-foreground transition-colors" />
+              </a>
+            </div>
+          </FadeIn>
+
+          <FadeIn delay={400}>
+            <p className="text-xs text-muted-foreground/40 pt-4">
+              Licensed under{' '}
+              <a
+                href="https://github.com/jamiepine/voicebox/blob/main/LICENSE"
+                target="_blank"
+                rel="noopener noreferrer"
+                className="hover:text-muted-foreground/60 transition-colors"
+              >
+                MIT
+              </a>
+            </p>
+          </FadeIn>
+        </div>
+      </div>
+    </>
+  );
+}

app/src/components/ServerTab/ChangelogPage.tsx

@@ -0,0 +1,220 @@
+import changelogRaw from 'virtual:changelog';
+import { useMemo, useState } from 'react';
+import { Badge } from '@/components/ui/badge';
+import { type ChangelogEntry, parseChangelog } from '@/lib/utils/parseChangelog';
+
+function renderMarkdown(md: string): React.ReactNode[] {
+  const lines = md.split('\n');
+  const elements: React.ReactNode[] = [];
+  let i = 0;
+
+  while (i < lines.length) {
+    const line = lines[i];
+
+    // Skip empty lines
+    if (line.trim() === '') {
+      i++;
+      continue;
+    }
+
+    // Tables — collect all lines starting with |
+    if (line.trim().startsWith('|')) {
+      const tableLines: string[] = [];
+      while (i < lines.length && lines[i].trim().startsWith('|')) {
+        tableLines.push(lines[i]);
+        i++;
+      }
+      elements.push(renderTable(tableLines, elements.length));
+      continue;
+    }
+
+    // Headings
+    if (line.startsWith('#### ')) {
+      elements.push(
+        <h5 key={elements.length} className="text-sm font-medium mt-5 mb-1">
+          {inlineMarkdown(line.slice(5))}
+        </h5>,
+      );
+      i++;
+      continue;
+    }
+    if (line.startsWith('### ')) {
+      elements.push(
+        <h4 key={elements.length} className="text-sm font-medium mt-6 mb-2">
+          {inlineMarkdown(line.slice(4))}
+        </h4>,
+      );
+      i++;
+      continue;
+    }
+
+    // List items — collect consecutive
+    if (line.startsWith('- ')) {
+      const items: string[] = [];
+      while (i < lines.length && lines[i].startsWith('- ')) {
+        items.push(lines[i].slice(2));
+        i++;
+      }
+      elements.push(
+        <ul key={elements.length} className="space-y-1 my-2">
+          {items.map((item, idx) => (
+            <li key={idx} className="text-sm text-muted-foreground flex gap-2">
+              <span className="text-muted-foreground/50 select-none shrink-0">&bull;</span>
+              <span>{inlineMarkdown(item)}</span>
+            </li>
+          ))}
+        </ul>,
+      );
+      continue;
+    }
+
+    // Paragraph
+    elements.push(
+      <p key={elements.length} className="text-sm text-muted-foreground my-2">
+        {inlineMarkdown(line)}
+      </p>,
+    );
+    i++;
+  }
+
+  return elements;
+}
+
+function renderTable(tableLines: string[], keyBase: number): React.ReactNode {
+  const parseRow = (line: string) =>
+    line
+      .split('|')
+      .slice(1, -1)
+      .map((c) => c.trim());
+
+  const headers = parseRow(tableLines[0]);
+  // Skip separator line (index 1)
+  const rows = tableLines.slice(2).map(parseRow);
+
+  return (
+    <div key={keyBase} className="overflow-x-auto my-3">
+      <table className="text-sm w-full">
+        <thead>
+          <tr className="border-b">
+            {headers.map((h, hIdx) => (
+              <th
+                key={hIdx}
+                className="text-left py-1.5 pr-4 text-muted-foreground font-medium text-xs"
+              >
+                {inlineMarkdown(h)}
+              </th>
+            ))}
+          </tr>
+        </thead>
+        <tbody>
+          {rows.map((row, rowIdx) => (
+            <tr key={rowIdx} className="border-b border-border/50">
+              {row.map((cell, cellIdx) => (
+                <td key={cellIdx} className="py-1.5 pr-4 text-muted-foreground">
+                  {inlineMarkdown(cell)}
+                </td>
+              ))}
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    </div>
+  );
+}
+
+function inlineMarkdown(text: string): React.ReactNode {
+  // Process inline markdown: bold, code, links
+  const parts: React.ReactNode[] = [];
+  // Regex matches: **bold**, `code`, [text](url)
+  const inlineRe = /\*\*(.+?)\*\*|`([^`]+)`|\[([^\]]+)\]\(([^)]+)\)/g;
+  let lastIndex = 0;
+  let match: RegExpExecArray | null = inlineRe.exec(text);
+
+  while (match !== null) {
+    if (match.index > lastIndex) {
+      parts.push(text.slice(lastIndex, match.index));
+    }
+
+    if (match[1] !== undefined) {
+      // Bold
+      parts.push(
+        <strong key={parts.length} className="font-medium text-foreground">
+          {match[1]}
+        </strong>,
+      );
+    } else if (match[2] !== undefined) {
+      // Code
+      parts.push(
+        <code key={parts.length} className="px-1 py-0.5 rounded bg-muted text-xs font-mono">
+          {match[2]}
+        </code>,
+      );
+    } else if (match[3] !== undefined && match[4] !== undefined) {
+      // Link
+      parts.push(
+        <a
+          key={parts.length}
+          href={match[4]}
+          target="_blank"
+          rel="noopener noreferrer"
+          className="text-accent hover:underline"
+        >
+          {match[3]}
+        </a>,
+      );
+    }
+
+    lastIndex = match.index + match[0].length;
+    match = inlineRe.exec(text);
+  }
+
+  if (lastIndex < text.length) {
+    parts.push(text.slice(lastIndex));
+  }
+
+  return parts.length === 1 ? parts[0] : parts;
+}
+
+function ChangelogEntryCard({ entry }: { entry: ChangelogEntry }) {
+  const [expanded, setExpanded] = useState(false);
+  const content = useMemo(() => renderMarkdown(entry.body), [entry.body]);
+  const isLong = entry.body.split('\n').length > 12;
+
+  return (
+    <div className="border-b border-border/50 pb-6">
+      <div className="flex items-baseline gap-3 mb-1">
+        <h3 className="text-sm font-medium">{entry.version}</h3>
+        {entry.date && <span className="text-xs text-muted-foreground">{entry.date}</span>}
+        {entry.version === 'Unreleased' && <Badge variant="outline">dev</Badge>}
+      </div>
+
+      <div className={isLong && !expanded ? 'max-h-48 overflow-hidden relative' : ''}>
+        {content}
+        {isLong && !expanded && (
+          <div className="absolute bottom-0 left-0 right-0 h-16 bg-gradient-to-t from-background to-transparent" />
+        )}
+      </div>
+
+      {isLong && (
+        <button
+          onClick={() => setExpanded(!expanded)}
+          className="text-xs text-accent hover:underline mt-2"
+        >
+          {expanded ? 'Show less' : 'Show more'}
+        </button>
+      )}
+    </div>
+  );
+}
+
+export function ChangelogPage() {
+  const entries = useMemo(() => parseChangelog(changelogRaw), []);
+
+  return (
+    <div className="space-y-6 max-w-2xl">
+      {entries.map((entry) => (
+        <ChangelogEntryCard key={entry.version} entry={entry} />
+      ))}
+    </div>
+  );
+}

app/src/components/ServerTab/GeneralPage.tsx

@@ -0,0 +1,379 @@
+import { zodResolver } from '@hookform/resolvers/zod';
+import { AlertCircle, ArrowUpRight, Book, Download, Loader2, RefreshCw } from 'lucide-react';
+import { useEffect, useState } from 'react';
+import { useForm } from 'react-hook-form';
+import * as z from 'zod';
+import { Button } from '@/components/ui/button';
+import { Form, FormControl, FormField, FormItem, FormMessage } from '@/components/ui/form';
+import { Input } from '@/components/ui/input';
+import { Progress } from '@/components/ui/progress';
+import { Toggle } from '@/components/ui/toggle';
+import { useToast } from '@/components/ui/use-toast';
+import { useAutoUpdater } from '@/hooks/useAutoUpdater';
+import { useServerHealth } from '@/lib/hooks/useServer';
+import { usePlatform } from '@/platform/PlatformContext';
+import { useServerStore } from '@/stores/serverStore';
+import { SettingRow, SettingSection } from './SettingRow';
+
+const connectionSchema = z.object({
+  serverUrl: z.string().url('Please enter a valid URL'),
+});
+
+type ConnectionFormValues = z.infer<typeof connectionSchema>;
+
+export function GeneralPage() {
+  const platform = usePlatform();
+  const serverUrl = useServerStore((state) => state.serverUrl);
+  const setServerUrl = useServerStore((state) => state.setServerUrl);
+  const keepServerRunningOnClose = useServerStore((state) => state.keepServerRunningOnClose);
+  const setKeepServerRunningOnClose = useServerStore((state) => state.setKeepServerRunningOnClose);
+  const mode = useServerStore((state) => state.mode);
+  const setMode = useServerStore((state) => state.setMode);
+  const { toast } = useToast();
+  const { data: health, isLoading, error: healthError } = useServerHealth();
+
+  const form = useForm<ConnectionFormValues>({
+    resolver: zodResolver(connectionSchema),
+    defaultValues: { serverUrl },
+  });
+
+  useEffect(() => {
+    form.reset({ serverUrl });
+  }, [serverUrl, form]);
+
+  const { isDirty } = form.formState;
+
+  function onSubmit(data: ConnectionFormValues) {
+    setServerUrl(data.serverUrl);
+    form.reset(data);
+    toast({
+      title: 'Server URL updated',
+      description: `Connected to ${data.serverUrl}`,
+    });
+  }
+
+  return (
+    <div className="space-y-8 max-w-2xl">
+      <div className="grid grid-cols-2 gap-3">
+        <a
+          href="https://docs.voicebox.sh"
+          target="_blank"
+          rel="noopener noreferrer"
+          className="group flex items-center gap-3 rounded-lg border border-border/60 p-4 transition-colors hover:bg-muted/50"
+        >
+          <Book className="h-5 w-5 shrink-0 text-accent" strokeWidth={2.5} />
+          <div className="min-w-0 flex-1">
+            <div className="text-sm font-medium">Read the Docs</div>
+            <div className="text-xs text-muted-foreground">docs.voicebox.sh</div>
+          </div>
+          <ArrowUpRight className="h-4 w-4 text-muted-foreground/40 group-hover:text-muted-foreground transition-colors" />
+        </a>
+        <a
+          href="https://discord.gg/StkzQasqPS"
+          target="_blank"
+          rel="noopener noreferrer"
+          className="group flex items-center gap-3 rounded-lg border border-border/60 p-4 transition-colors hover:bg-muted/50"
+        >
+          <svg
+            className="h-5 w-5 shrink-0 text-accent"
+            viewBox="0 0 24 24"
+            fill="currentColor"
+            aria-hidden="true"
+          >
+            <path d="M20.317 4.37a19.791 19.791 0 0 0-4.885-1.515.074.074 0 0 0-.079.037c-.21.375-.444.864-.608 1.25a18.27 18.27 0 0 0-5.487 0 12.64 12.64 0 0 0-.617-1.25.077.077 0 0 0-.079-.037A19.736 19.736 0 0 0 3.677 4.37a.07.07 0 0 0-.032.027C.533 9.046-.32 13.58.099 18.057a.082.082 0 0 0 .031.057 19.9 19.9 0 0 0 5.993 3.03.078.078 0 0 0 .084-.028c.462-.63.874-1.295 1.226-1.994a.076.076 0 0 0-.041-.106 13.107 13.107 0 0 1-1.872-.892.077.077 0 0 1-.008-.128 10.2 10.2 0 0 0 .372-.292.074.074 0 0 1 .077-.01c3.928 1.793 8.18 1.793 12.062 0a.074.074 0 0 1 .078.01c.12.098.246.198.373.292a.077.077 0 0 1-.006.127 12.299 12.299 0 0 1-1.873.892.077.077 0 0 0-.041.107c.36.698.772 1.362 1.225 1.993a.076.076 0 0 0 .084.028 19.839 19.839 0 0 0 6.002-3.03.077.077 0 0 0 .032-.054c.5-5.177-.838-9.674-3.549-13.66a.061.061 0 0 0-.031-.03zM8.02 15.33c-1.183 0-2.157-1.085-2.157-2.419 0-1.333.956-2.419 2.157-2.419 1.21 0 2.176 1.095 2.157 2.42 0 1.333-.956 2.418-2.157 2.418zm7.975 0c-1.183 0-2.157-1.085-2.157-2.419 0-1.333.955-2.419 2.157-2.419 1.21 0 2.176 1.095 2.157 2.42 0 1.333-.946 2.418-2.157 2.418z" />
+          </svg>
+          <div className="min-w-0 flex-1">
+            <div className="text-sm font-medium">Join the Discord</div>
+            <div className="text-xs text-muted-foreground">Get help & share voices</div>
+          </div>
+          <ArrowUpRight className="h-4 w-4 text-muted-foreground/40 group-hover:text-muted-foreground transition-colors" />
+        </a>
+      </div>
+
+      <SettingSection>
+        <SettingRow
+          title="Server URL"
+          description="The address of your voicebox backend server."
+          action={
+            <ConnectionStatus health={health} isLoading={isLoading} healthError={healthError} />
+          }
+        >
+          <Form {...form}>
+            <form onSubmit={form.handleSubmit(onSubmit)} className="flex gap-2">
+              <FormField
+                control={form.control}
+                name="serverUrl"
+                render={({ field }) => (
+                  <FormItem className="flex-1">
+                    <FormControl>
+                      <Input placeholder="http://127.0.0.1:17493" {...field} />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+              {isDirty && (
+                <Button type="submit" size="sm">
+                  Save
+                </Button>
+              )}
+            </form>
+          </Form>
+        </SettingRow>
+
+        <SettingRow
+          title="Keep server running when app closes"
+          description="The server will continue running in the background after closing the app."
+          htmlFor="keepServerRunning"
+          action={
+            <Toggle
+              id="keepServerRunning"
+              checked={keepServerRunningOnClose}
+              onCheckedChange={(checked: boolean) => {
+                setKeepServerRunningOnClose(checked);
+                platform.lifecycle.setKeepServerRunning(checked).catch((error) => {
+                  console.error('Failed to sync setting to Rust:', error);
+                  setKeepServerRunningOnClose(!checked);
+                  toast({
+                    title: 'Failed to update setting',
+                    description: 'Could not sync setting to backend.',
+                    variant: 'destructive',
+                  });
+                  return;
+                });
+                toast({
+                  title: 'Setting updated',
+                  description: checked
+                    ? 'Server will continue running when app closes'
+                    : 'Server will stop when app closes',
+                });
+              }}
+            />
+          }
+        />
+
+        {platform.metadata.isTauri && (
+          <SettingRow
+            title="Allow network access"
+            description="Makes the server accessible from other devices on your network. Restart the app after changing."
+            htmlFor="allowNetworkAccess"
+            action={
+              <Toggle
+                id="allowNetworkAccess"
+                checked={mode === 'remote'}
+                onCheckedChange={(checked: boolean) => {
+                  setMode(checked ? 'remote' : 'local');
+                  toast({
+                    title: 'Setting updated',
+                    description: checked
+                      ? 'Network access enabled. Restart the app to apply.'
+                      : 'Network access disabled. Restart the app to apply.',
+                  });
+                }}
+              />
+            }
+          />
+        )}
+      </SettingSection>
+
+      <ApiReferenceCard serverUrl={serverUrl} />
+
+      {platform.metadata.isTauri && <UpdatesSection />}
+    </div>
+  );
+}
+
+function ConnectionStatus({
+  health,
+  isLoading,
+  healthError,
+}: {
+  health: ReturnType<typeof useServerHealth>['data'];
+  isLoading: boolean;
+  healthError: ReturnType<typeof useServerHealth>['error'];
+}) {
+  if (isLoading) {
+    return (
+      <div className="flex items-center gap-2 rounded-full border border-border/60 px-3 py-1">
+        <Loader2 className="h-3 w-3 animate-spin text-muted-foreground" />
+        <span className="text-xs text-muted-foreground">Connecting</span>
+      </div>
+    );
+  }
+  if (healthError) {
+    return (
+      <div className="flex items-center gap-2 rounded-full border border-destructive/30 px-3 py-1">
+        <span className="relative flex h-2 w-2">
+          <span className="absolute inline-flex h-full w-full rounded-full bg-destructive/40" />
+          <span className="relative inline-flex h-2 w-2 rounded-full bg-destructive" />
+        </span>
+        <span className="text-xs text-destructive">Offline</span>
+      </div>
+    );
+  }
+  if (health) {
+    return (
+      <div className="flex items-center gap-2 rounded-full border border-accent/30 px-3 py-1">
+        <span className="relative flex h-2 w-2">
+          <span className="absolute inline-flex h-full w-full animate-ping rounded-full bg-accent/60" />
+          <span className="relative inline-flex h-2 w-2 rounded-full bg-accent shadow-[0_0_6px_1px_hsl(var(--accent)/0.5)]" />
+        </span>
+        <span className="text-xs text-muted-foreground">Online</span>
+      </div>
+    );
+  }
+  return null;
+}
+
+function UpdatesSection() {
+  const platform = usePlatform();
+  const { status, checkForUpdates, downloadAndInstall, restartAndInstall } = useAutoUpdater(false);
+  const [currentVersion, setCurrentVersion] = useState<string>('');
+  const isDev = !import.meta.env?.PROD;
+
+  useEffect(() => {
+    platform.metadata
+      .getVersion()
+      .then(setCurrentVersion)
+      .catch(() => setCurrentVersion('Unknown'));
+  }, [platform]);
+
+  return (
+    <SettingSection title="App Updates" description={`v${currentVersion}${isDev ? ' (dev)' : ''}`}>
+      {isDev ? (
+        <SettingRow
+          title="Development mode"
+          description="Auto-updates are disabled in development mode."
+        />
+      ) : (
+        <>
+          <SettingRow
+            title="Check for updates"
+            description={
+              status.available
+                ? `Version ${status.version} available`
+                : status.checking
+                  ? 'Checking...'
+                  : "You're up to date"
+            }
+            action={
+              <Button
+                onClick={checkForUpdates}
+                disabled={status.checking || status.downloading || status.readyToInstall}
+                variant="outline"
+                size="sm"
+              >
+                <RefreshCw
+                  className={`h-3.5 w-3.5 mr-1.5 ${status.checking ? 'animate-spin' : ''}`}
+                />
+                Check
+              </Button>
+            }
+          />
+
+          {status.error && (
+            <SettingRow title="Update error">
+              <div className="flex items-center gap-2 text-sm text-destructive">
+                <AlertCircle className="h-4 w-4" />
+                {status.error}
+              </div>
+            </SettingRow>
+          )}
+
+          {status.available && !status.downloading && !status.readyToInstall && (
+            <SettingRow
+              title={`Update to ${status.version}`}
+              description="Download and install the latest version."
+              action={
+                <Button onClick={downloadAndInstall} size="sm">
+                  <Download className="h-3.5 w-3.5 mr-1.5" />
+                  Download
+                </Button>
+              }
+            />
+          )}
+
+          {status.downloading && (
+            <SettingRow title="Downloading update...">
+              <div className="space-y-1.5">
+                <Progress value={status.downloadProgress} />
+                <div className="flex items-center justify-between text-xs text-muted-foreground">
+                  {status.downloadedBytes !== undefined &&
+                  status.totalBytes !== undefined &&
+                  status.totalBytes > 0 ? (
+                    <span>
+                      {(status.downloadedBytes / 1024 / 1024).toFixed(1)} MB /{' '}
+                      {(status.totalBytes / 1024 / 1024).toFixed(1)} MB
+                    </span>
+                  ) : (
+                    <span />
+                  )}
+                  {status.downloadProgress !== undefined && <span>{status.downloadProgress}%</span>}
+                </div>
+              </div>
+            </SettingRow>
+          )}
+
+          {status.readyToInstall && (
+            <SettingRow
+              title="Update ready to install"
+              description={`Version ${status.version} has been downloaded. Restart to complete.`}
+              action={
+                <Button onClick={restartAndInstall} size="sm">
+                  <RefreshCw className="h-3.5 w-3.5 mr-1.5" />
+                  Restart Now
+                </Button>
+              }
+            />
+          )}
+        </>
+      )}
+    </SettingSection>
+  );
+}
+
+const API_ENDPOINTS = [
+  { method: 'POST', path: '/generate', label: 'Generate speech' },
+  { method: 'GET', path: '/health', label: 'Server status' },
+  { method: 'GET', path: '/profiles', label: 'List voices' },
+  { method: 'GET', path: '/history', label: 'Past generations' },
+];
+
+function ApiReferenceCard({ serverUrl }: { serverUrl: string }) {
+  return (
+    <div className="rounded-lg border border-border/60 p-4 space-y-3">
+      <div>
+        <h3 className="text-sm font-medium">API Access</h3>
+        <p className="text-sm text-muted-foreground">
+          Integrate Voicebox into your workflow via the REST API at{' '}
+          <code className="text-xs bg-muted px-1 py-0.5 rounded font-mono">{serverUrl}</code>
+        </p>
+      </div>
+      <div className="space-y-1">
+        {API_ENDPOINTS.map((ep) => (
+          <div key={ep.path} className="flex items-center gap-2.5 py-1">
+            <span
+              className={`text-[10px] font-mono font-semibold w-9 text-center rounded px-1 py-px ${
+                ep.method === 'POST' ? 'bg-accent/10 text-accent' : 'bg-muted text-muted-foreground'
+              }`}
+            >
+              {ep.method}
+            </span>
+            <code className="text-xs font-mono text-muted-foreground">{ep.path}</code>
+            <span className="text-xs text-muted-foreground/50 ml-auto">{ep.label}</span>
+          </div>
+        ))}
+      </div>
+      <p className="text-xs text-muted-foreground">
+        <a
+          href={`${serverUrl}/docs`}
+          target="_blank"
+          rel="noopener noreferrer"
+          className="text-accent hover:underline"
+        >
+          View the full API reference
+        </a>
+      </p>
+    </div>
+  );
+}

app/src/components/ServerTab/GenerationPage.tsx

@@ -0,0 +1,138 @@
+import { FolderOpen } from 'lucide-react';
+import { useCallback, useEffect, useState } from 'react';
+import { Button } from '@/components/ui/button';
+import { Slider } from '@/components/ui/slider';
+import { Toggle } from '@/components/ui/toggle';
+import { usePlatform } from '@/platform/PlatformContext';
+import { useServerStore } from '@/stores/serverStore';
+import { SettingRow, SettingSection } from './SettingRow';
+
+export function GenerationPage() {
+  const platform = usePlatform();
+  const serverUrl = useServerStore((state) => state.serverUrl);
+  const maxChunkChars = useServerStore((state) => state.maxChunkChars);
+  const setMaxChunkChars = useServerStore((state) => state.setMaxChunkChars);
+  const crossfadeMs = useServerStore((state) => state.crossfadeMs);
+  const setCrossfadeMs = useServerStore((state) => state.setCrossfadeMs);
+  const normalizeAudio = useServerStore((state) => state.normalizeAudio);
+  const setNormalizeAudio = useServerStore((state) => state.setNormalizeAudio);
+  const autoplayOnGenerate = useServerStore((state) => state.autoplayOnGenerate);
+  const setAutoplayOnGenerate = useServerStore((state) => state.setAutoplayOnGenerate);
+  const [opening, setOpening] = useState(false);
+  const [generationsPath, setGenerationsPath] = useState<string | null>(null);
+
+  useEffect(() => {
+    fetch(`${serverUrl}/health/filesystem`)
+      .then((res) => res.json())
+      .then((data) => {
+        const genDir = data.directories?.find((d: { path: string }) =>
+          d.path.includes('generations'),
+        );
+        if (genDir?.path) setGenerationsPath(genDir.path);
+      })
+      .catch(() => {});
+  }, [serverUrl]);
+
+  const openGenerationsFolder = useCallback(async () => {
+    if (!generationsPath) return;
+    setOpening(true);
+    try {
+      await platform.filesystem.openPath(generationsPath);
+    } catch (e) {
+      console.error('Failed to open generations folder:', e);
+    } finally {
+      setOpening(false);
+    }
+  }, [platform, generationsPath]);
+
+  return (
+    <div className="space-y-8 max-w-2xl">
+      <SettingSection
+        title="Generation"
+        description="Controls for long text generation. These settings apply to all engines."
+      >
+        <SettingRow
+          title="Auto-chunking limit"
+          description="Long text is split into chunks at sentence boundaries. Lower values can improve quality for long outputs."
+          action={
+            <span className="text-sm tabular-nums text-muted-foreground">
+              {maxChunkChars} chars
+            </span>
+          }
+        >
+          <Slider
+            id="maxChunkChars"
+            value={[maxChunkChars]}
+            onValueChange={([value]) => setMaxChunkChars(value)}
+            min={100}
+            max={5000}
+            step={50}
+            aria-label="Auto-chunking character limit"
+          />
+        </SettingRow>
+
+        <SettingRow
+          title="Chunk crossfade"
+          description="Blends audio between chunks to smooth transitions. Set to 0 for a hard cut."
+          action={
+            <span className="text-sm tabular-nums text-muted-foreground">
+              {crossfadeMs === 0 ? 'Cut' : `${crossfadeMs}ms`}
+            </span>
+          }
+        >
+          <Slider
+            id="crossfadeMs"
+            value={[crossfadeMs]}
+            onValueChange={([value]) => setCrossfadeMs(value)}
+            min={0}
+            max={200}
+            step={10}
+            aria-label="Chunk crossfade duration"
+          />
+        </SettingRow>
+
+        <SettingRow
+          title="Normalize audio"
+          description="Adjusts output volume to a consistent level across generations."
+          htmlFor="normalizeAudio"
+          action={
+            <Toggle
+              id="normalizeAudio"
+              checked={normalizeAudio}
+              onCheckedChange={setNormalizeAudio}
+            />
+          }
+        />
+
+        <SettingRow
+          title="Autoplay on generate"
+          description="Automatically play audio when a generation completes."
+          htmlFor="autoplayOnGenerate"
+          action={
+            <Toggle
+              id="autoplayOnGenerate"
+              checked={autoplayOnGenerate}
+              onCheckedChange={setAutoplayOnGenerate}
+            />
+          }
+        />
+
+        <SettingRow
+          title="Generations folder"
+          description={generationsPath ?? 'Where generated audio files are stored on disk.'}
+          action={
+            <Button
+              variant="outline"
+              size="sm"
+              onClick={openGenerationsFolder}
+              disabled={opening || !generationsPath}
+            >
+              <FolderOpen className="h-3.5 w-3.5 mr-1.5" />
+              Open
+            </Button>
+          }
+        />
+      </SettingSection>
+    </div>
+  );
+}

app/src/components/ServerTab/GpuPage.tsx

@@ -0,0 +1,405 @@
+import { useQuery, useQueryClient } from '@tanstack/react-query';
+import { AlertCircle, Cpu, Download, Loader2, RotateCw, Trash2 } from 'lucide-react';
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { Button } from '@/components/ui/button';
+import { Progress } from '@/components/ui/progress';
+import { apiClient } from '@/lib/api/client';
+import type { CudaDownloadProgress, HealthResponse } from '@/lib/api/types';
+import { useServerHealth } from '@/lib/hooks/useServer';
+import { usePlatform } from '@/platform/PlatformContext';
+import { useServerStore } from '@/stores/serverStore';
+import { SettingRow, SettingSection } from './SettingRow';
+
+type RestartPhase = 'idle' | 'stopping' | 'waiting' | 'ready';
+
+function AppleLogo({ className }: { className?: string }) {
+  return (
+    <svg className={className} viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
+      <path d="M18.71 19.5c-.83 1.24-1.71 2.45-3.05 2.47-1.34.03-1.77-.79-3.29-.79-1.53 0-2 .77-3.27.82-1.31.05-2.3-1.32-3.14-2.53C4.25 17 2.94 12.45 4.7 9.39c.87-1.52 2.43-2.48 4.12-2.51 1.28-.02 2.5.87 3.29.87.78 0 2.26-1.07 3.8-.91.65.03 2.47.26 3.64 1.98-.09.06-2.17 1.28-2.15 3.81.03 3.02 2.65 4.03 2.68 4.04-.03.07-.42 1.44-1.38 2.83M13 3.5c.73-.83 1.94-1.46 2.94-1.5.13 1.17-.34 2.35-1.04 3.19-.69.85-1.83 1.51-2.95 1.42-.15-1.15.41-2.35 1.05-3.11z" />
+    </svg>
+  );
+}
+
+function GpuIcon({ className }: { className?: string }) {
+  return (
+    <svg
+      className={className}
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="1.5"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      aria-hidden="true"
+    >
+      <rect x="4" y="6" width="16" height="12" rx="2" />
+      <path d="M2 10h2M2 14h2M20 10h2M20 14h2" />
+      <path d="M9 10h6M9 14h4" />
+    </svg>
+  );
+}
+
+function GpuInfoCard({ health }: { health: HealthResponse }) {
+  const hasGpu = health.gpu_available && health.gpu_type;
+
+  // Parse GPU name from type string like "CUDA (NVIDIA RTX 4090)" or "MPS (Apple M2 Pro)"
+  const gpuName = hasGpu
+    ? health.gpu_type!.replace(/^(CUDA|ROCm|MPS|Metal|XPU|DirectML)\s*\((.+)\)$/, '$2') ||
+      health.gpu_type!
+    : null;
+  const gpuBackend = hasGpu ? health.gpu_type!.replace(/\s*\(.+\)$/, '') : null;
+  const isApple = gpuBackend === 'MPS' || gpuBackend === 'Metal';
+  const showBackendVariant = health.backend_variant && health.backend_variant !== 'cpu';
+
+  return (
+    <div className="rounded-lg border border-border/60 p-4">
+      <div className="flex items-center gap-3">
+        {hasGpu ? (
+          isApple ? (
+            <AppleLogo className="h-5 w-5 shrink-0 text-muted-foreground" />
+          ) : (
+            <GpuIcon className="h-5 w-5 shrink-0 text-accent" />
+          )
+        ) : (
+          <Cpu className="h-5 w-5 shrink-0 text-muted-foreground" />
+        )}
+        <div className="flex-1 min-w-0 space-y-0.5">
+          <div className="text-sm font-medium">{hasGpu ? gpuName : 'CPU Only'}</div>
+          <div className="flex flex-wrap items-center gap-x-3 gap-y-1 text-xs text-muted-foreground">
+            {hasGpu ? (
+              <>
+                <span>{gpuBackend}</span>
+                {showBackendVariant && (
+                  <>
+                    <span className="text-border">|</span>
+                    <span className="uppercase">{health.backend_variant}</span>
+                  </>
+                )}
+                {health.vram_used_mb != null && health.vram_used_mb > 0 && (
+                  <>
+                    <span className="text-border">|</span>
+                    <span>{health.vram_used_mb.toFixed(0)} MB VRAM</span>
+                  </>
+                )}
+              </>
+            ) : (
+              <span>No GPU acceleration detected</span>
+            )}
+          </div>
+        </div>
+        {hasGpu && (
+          <div className="flex items-center gap-2 rounded-full border border-accent/30 px-2.5 py-0.5">
+            <span className="relative flex h-1.5 w-1.5">
+              <span className="absolute inline-flex h-full w-full animate-ping rounded-full bg-accent/60" />
+              <span className="relative inline-flex h-1.5 w-1.5 rounded-full bg-accent shadow-[0_0_4px_1px_hsl(var(--accent)/0.4)]" />
+            </span>
+            <span className="text-[10px] font-medium text-muted-foreground">Active</span>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}
+
+export function GpuPage() {
+  const platform = usePlatform();
+  const queryClient = useQueryClient();
+  const serverUrl = useServerStore((state) => state.serverUrl);
+  const { data: health } = useServerHealth();
+
+  const [restartPhase, setRestartPhase] = useState<RestartPhase>('idle');
+  const [error, setError] = useState<string | null>(null);
+  const [downloadProgress, setDownloadProgress] = useState<CudaDownloadProgress | null>(null);
+  const healthPollRef = useRef<ReturnType<typeof setInterval> | null>(null);
+
+  const {
+    data: cudaStatus,
+    isLoading: _cudaStatusLoading,
+    refetch: refetchCudaStatus,
+  } = useQuery({
+    queryKey: ['cuda-status', serverUrl],
+    queryFn: () => apiClient.getCudaStatus(),
+    refetchInterval: (query) => (query.state.status === 'pending' ? false : 10000),
+    retry: 1,
+    enabled: !!health,
+  });
+
+  const isCurrentlyCuda = health?.backend_variant === 'cuda';
+  const cudaAvailable = cudaStatus?.available ?? false;
+  const cudaDownloading = cudaStatus?.downloading ?? false;
+
+  useEffect(() => {
+    return () => {
+      if (healthPollRef.current) {
+        clearInterval(healthPollRef.current);
+        healthPollRef.current = null;
+      }
+    };
+  }, []);
+
+  useEffect(() => {
+    if (!cudaDownloading || !serverUrl) return;
+
+    const eventSource = new EventSource(`${serverUrl}/backend/cuda-progress`);
+
+    eventSource.onmessage = (event) => {
+      try {
+        const data = JSON.parse(event.data) as CudaDownloadProgress;
+        setDownloadProgress(data);
+
+        if (data.status === 'complete') {
+          eventSource.close();
+          setDownloadProgress(null);
+          refetchCudaStatus();
+        } else if (data.status === 'error') {
+          eventSource.close();
+          setError(data.error || 'Download failed');
+          setDownloadProgress(null);
+          refetchCudaStatus();
+        }
+      } catch (e) {
+        console.error('Error parsing CUDA progress event:', e);
+      }
+    };
+
+    eventSource.onerror = () => {
+      eventSource.close();
+    };
+
+    return () => {
+      eventSource.close();
+    };
+  }, [cudaDownloading, serverUrl, refetchCudaStatus]);
+
+  const clearHealthPolling = useCallback(() => {
+    if (healthPollRef.current) {
+      clearInterval(healthPollRef.current);
+      healthPollRef.current = null;
+    }
+  }, []);
+
+  const startHealthPolling = useCallback(() => {
+    clearHealthPolling();
+
+    healthPollRef.current = setInterval(async () => {
+      try {
+        const result = await apiClient.getHealth();
+        if (result.status === 'healthy') {
+          clearHealthPolling();
+          setRestartPhase('ready');
+          queryClient.invalidateQueries();
+          setTimeout(() => setRestartPhase('idle'), 2000);
+        }
+      } catch {
+        // Server still down, keep polling
+      }
+    }, 1000);
+  }, [queryClient, clearHealthPolling]);
+
+  const restartServerWithPolling = useCallback(
+    async (errorMessage: string) => {
+      setRestartPhase('stopping');
+      try {
+        await platform.lifecycle.restartServer();
+        setRestartPhase('waiting');
+        startHealthPolling();
+      } catch (e: unknown) {
+        clearHealthPolling();
+        setRestartPhase('idle');
+        throw new Error(e instanceof Error ? e.message : errorMessage);
+      }
+    },
+    [platform, startHealthPolling, clearHealthPolling],
+  );
+
+  const handleDownload = async () => {
+    setError(null);
+    try {
+      await apiClient.downloadCudaBackend();
+      refetchCudaStatus();
+    } catch (e: unknown) {
+      const msg = e instanceof Error ? e.message : 'Failed to start download';
+      if (msg.includes('already downloaded')) {
+        refetchCudaStatus();
+      } else {
+        setError(msg);
+      }
+    }
+  };
+
+  const handleRestart = async () => {
+    setError(null);
+    try {
+      await restartServerWithPolling('Restart failed');
+    } catch (e: unknown) {
+      setError(e instanceof Error ? e.message : 'Restart failed');
+    }
+  };
+
+  const handleSwitchToCpu = async () => {
+    setError(null);
+    setRestartPhase('stopping');
+    try {
+      await apiClient.deleteCudaBackend();
+      await restartServerWithPolling('Failed to switch to CPU');
+    } catch (e: unknown) {
+      setError(e instanceof Error ? e.message : 'Failed to switch to CPU');
+      refetchCudaStatus();
+    }
+  };
+
+  const handleDelete = async () => {
+    setError(null);
+    try {
+      await apiClient.deleteCudaBackend();
+      refetchCudaStatus();
+    } catch (e: unknown) {
+      setError(e instanceof Error ? e.message : 'Failed to delete CUDA backend');
+    }
+  };
+
+  const formatBytes = (bytes: number): string => {
+    if (bytes === 0) return '0 B';
+    const k = 1024;
+    const sizes = ['B', 'KB', 'MB', 'GB'];
+    const i = Math.floor(Math.log(bytes) / Math.log(k));
+    return `${(bytes / k ** i).toFixed(1)} ${sizes[i]}`;
+  };
+
+  if (!health) return null;
+
+  const hasNativeGpu =
+    health.gpu_available &&
+    !isCurrentlyCuda &&
+    health.gpu_type &&
+    !health.gpu_type.includes('CUDA');
+
+  return (
+    <div className="space-y-8 max-w-2xl">
+      <GpuInfoCard health={health} />
+
+      {/* CUDA section — only when no native GPU and not already on CUDA */}
+      {!hasNativeGpu && !isCurrentlyCuda && (
+        <SettingSection
+          title="CUDA Backend"
+          description="NVIDIA GPU acceleration via a downloadable CUDA backend."
+        >
+          {/* Download progress */}
+          {cudaDownloading && downloadProgress && (
+            <SettingRow title="Downloading CUDA backend...">
+              <div className="space-y-1.5">
+                <Progress value={downloadProgress.progress} className="h-2" />
+                <div className="flex items-center justify-between text-xs text-muted-foreground">
+                  <span>
+                    {downloadProgress.filename ||
+                      (cudaAvailable ? 'Updating...' : 'Downloading...')}
+                  </span>
+                  <span>
+                    {downloadProgress.total > 0
+                      ? `${formatBytes(downloadProgress.current)} / ${formatBytes(downloadProgress.total)}`
+                      : `${downloadProgress.progress.toFixed(1)}%`}
+                  </span>
+                </div>
+              </div>
+            </SettingRow>
+          )}
+
+          {/* Restart in progress */}
+          {restartPhase !== 'idle' && (
+            <SettingRow
+              title={
+                restartPhase === 'ready'
+                  ? 'Server restarted successfully'
+                  : restartPhase === 'waiting'
+                    ? 'Restarting server...'
+                    : 'Stopping server...'
+              }
+              action={<Loader2 className="h-4 w-4 animate-spin text-muted-foreground" />}
+            />
+          )}
+
+          {/* Error */}
+          {error && (
+            <SettingRow title="Error">
+              <div className="flex items-center gap-2 text-sm text-destructive">
+                <AlertCircle className="h-4 w-4 shrink-0" />
+                <span>{error}</span>
+              </div>
+            </SettingRow>
+          )}
+
+          {/* Actions */}
+          {restartPhase === 'idle' && !cudaDownloading && (
+            <>
+              {!cudaAvailable && !isCurrentlyCuda && (
+                <SettingRow
+                  title="Download CUDA backend"
+                  description="~2.4 GB download. Requires an NVIDIA GPU with CUDA support."
+                  action={
+                    <Button onClick={handleDownload} size="sm">
+                      <Download className="h-3.5 w-3.5 mr-1.5" />
+                      Download
+                    </Button>
+                  }
+                />
+              )}
+
+              {cudaAvailable && !isCurrentlyCuda && platform.metadata.isTauri && (
+                <SettingRow
+                  title="Switch to CUDA backend"
+                  description="CUDA backend is downloaded and ready. Restart to enable."
+                  action={
+                    <Button onClick={handleRestart} size="sm">
+                      <RotateCw className="h-3.5 w-3.5 mr-1.5" />
+                      Restart
+                    </Button>
+                  }
+                />
+              )}
+
+              {isCurrentlyCuda && platform.metadata.isTauri && (
+                <SettingRow
+                  title="Switch to CPU backend"
+                  description="Disable GPU acceleration. You can re-download CUDA later."
+                  action={
+                    <Button onClick={handleSwitchToCpu} variant="outline" size="sm">
+                      <RotateCw className="h-3.5 w-3.5 mr-1.5" />
+                      Switch
+                    </Button>
+                  }
+                />
+              )}
+
+              {cudaAvailable && !isCurrentlyCuda && (
+                <SettingRow
+                  title="Remove CUDA backend"
+                  description="Delete the downloaded CUDA binary to free disk space."
+                  action={
+                    <Button
+                      onClick={handleDelete}
+                      variant="ghost"
+                      size="sm"
+                      className="text-muted-foreground hover:text-destructive"
+                    >
+                      <Trash2 className="h-3.5 w-3.5 mr-1.5" />
+                      Remove
+                    </Button>
+                  }
+                />
+              )}
+            </>
+          )}
+        </SettingSection>
+      )}
+
+      <p className="text-xs text-muted-foreground/60 leading-relaxed">
+        Voicebox automatically detects and uses the best available GPU on your system. On Apple
+        Silicon Macs, the MLX backend runs natively on the Neural Engine and GPU via Metal
+        Performance Shaders (MPS), with no additional setup required. On Windows and Linux with
+        NVIDIA GPUs, you can download an optional CUDA backend for hardware-accelerated inference.
+        AMD ROCm, Intel XPU, and DirectML are also supported where available through PyTorch. When
+        no GPU is detected, Voicebox falls back to CPU — all engines still work, just slower.
+      </p>
+    </div>
+  );
+}

app/src/components/ServerTab/LogsPage.tsx

@@ -0,0 +1,104 @@
+import { useEffect, useRef, useState } from 'react';
+import { Button } from '@/components/ui/button';
+import { cn } from '@/lib/utils/cn';
+import { type LogEntry, useLogStore } from '@/stores/logStore';
+
+function formatTime(timestamp: number): string {
+  const d = new Date(timestamp);
+  return d.toLocaleTimeString(undefined, {
+    hour: '2-digit',
+    minute: '2-digit',
+    second: '2-digit',
+    hour12: false,
+  });
+}
+
+function LogLine({ entry }: { entry: LogEntry }) {
+  return (
+    <div className="flex gap-3 font-mono text-xs leading-5 hover:bg-muted/30">
+      <span className="text-muted-foreground/50 select-none shrink-0">
+        {formatTime(entry.timestamp)}
+      </span>
+      <span
+        className={cn(
+          'whitespace-pre-wrap break-all',
+          entry.stream === 'stderr' ? 'text-orange-400/80' : 'text-muted-foreground',
+        )}
+      >
+        {entry.line}
+      </span>
+    </div>
+  );
+}
+
+export function LogsPage() {
+  const entries = useLogStore((s) => s.entries);
+  const clear = useLogStore((s) => s.clear);
+  const containerRef = useRef<HTMLDivElement>(null);
+  const [autoScroll, setAutoScroll] = useState(true);
+
+  // Auto-scroll to bottom when new entries arrive
+  useEffect(() => {
+    if (autoScroll && containerRef.current) {
+      containerRef.current.scrollTop = containerRef.current.scrollHeight;
+    }
+  }, [entries.length, autoScroll]);
+
+  // Detect manual scroll to disable auto-scroll
+  const handleScroll = () => {
+    const el = containerRef.current;
+    if (!el) return;
+    const atBottom = el.scrollHeight - el.scrollTop - el.clientHeight < 40;
+    setAutoScroll(atBottom);
+  };
+
+  return (
+    <div className="flex flex-col h-full min-h-0">
+      <div className="flex items-center justify-between mb-3">
+        <div>
+          <h3 className="text-sm font-medium">Server Logs</h3>
+          <p className="text-sm text-muted-foreground">
+            {entries.length} {entries.length === 1 ? 'line' : 'lines'}
+          </p>
+        </div>
+        <div className="flex items-center gap-2">
+          {!autoScroll && (
+            <Button
+              variant="outline"
+              size="sm"
+              onClick={() => {
+                setAutoScroll(true);
+                containerRef.current?.scrollTo({ top: containerRef.current.scrollHeight });
+              }}
+            >
+              Scroll to bottom
+            </Button>
+          )}
+          <Button variant="outline" size="sm" onClick={clear}>
+            Clear
+          </Button>
+        </div>
+      </div>
+
+      <div
+        ref={containerRef}
+        onScroll={handleScroll}
+        className="flex-1 min-h-0 overflow-y-auto rounded-md border bg-black/20 p-3"
+      >
+        {entries.length === 0 ? (
+          <div className="text-sm text-muted-foreground/50 font-mono space-y-1">
+            <p>No log output yet.</p>
+            {!import.meta.env?.PROD && (
+              <p>
+                Server logs are only captured when the app manages the server process (production
+                builds).
+              </p>
+            )}
+          </div>
+        ) : (
+          entries.map((entry) => <LogLine key={entry.id} entry={entry} />)
+        )}
+      </div>
+    </div>
+  );
+}

app/src/components/ServerTab/ServerTab.tsx

@@ -1,35 +1,70 @@
-import { ConnectionForm } from '@/components/ServerSettings/ConnectionForm';
-import { GenerationSettings } from '@/components/ServerSettings/GenerationSettings';
-import { GpuAcceleration } from '@/components/ServerSettings/GpuAcceleration';
-import { UpdateStatus } from '@/components/ServerSettings/UpdateStatus';
+import { Link, Outlet, useMatchRoute } from '@tanstack/react-router';
 import { BOTTOM_SAFE_AREA_PADDING } from '@/lib/constants/ui';
 import { cn } from '@/lib/utils/cn';
 import { usePlatform } from '@/platform/PlatformContext';
 import { usePlayerStore } from '@/stores/playerStore';
 
-export function ServerTab() {
+interface SettingsTab {
+  label: string;
+  path:
+    | '/settings'
+    | '/settings/generation'
+    | '/settings/gpu'
+    | '/settings/logs'
+    | '/settings/changelog'
+    | '/settings/about';
+  tauriOnly?: boolean;
+}
+
+const tabs: SettingsTab[] = [
+  { label: 'General', path: '/settings' },
+  { label: 'Generation', path: '/settings/generation' },
+  { label: 'GPU', path: '/settings/gpu', tauriOnly: true },
+  { label: 'Logs', path: '/settings/logs', tauriOnly: true },
+  { label: 'Changelog', path: '/settings/changelog' },
+  { label: 'About', path: '/settings/about' },
+];
+
+export function SettingsLayout() {
   const platform = usePlatform();
   const isPlayerVisible = !!usePlayerStore((state) => state.audioUrl);
+  const matchRoute = useMatchRoute();
+
   return (
-    <div
-      className={cn('overflow-y-auto flex flex-col', isPlayerVisible && BOTTOM_SAFE_AREA_PADDING)}
-    >
-      <div className="grid gap-4 md:grid-cols-2">
-        <ConnectionForm />
-        <GenerationSettings />
-        {platform.metadata.isTauri && <GpuAcceleration />}
-        {platform.metadata.isTauri && <UpdateStatus />}
-      </div>
-      <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 className="flex flex-col h-full min-h-0">
+      <nav className="flex gap-1 border-b shrink-0">
+        {tabs.map((tab) => {
+          if (tab.tauriOnly && !platform.metadata.isTauri) return null;
+
+          const isActive =
+            tab.path === '/settings'
+              ? matchRoute({ to: tab.path, fuzzy: false })
+              : matchRoute({ to: tab.path });
+
+          return (
+            <Link
+              key={tab.path}
+              to={tab.path}
+              className={cn(
+                'px-4 py-2 text-sm font-medium transition-colors border-b-2 -mb-px',
+                isActive
+                  ? 'border-accent text-foreground'
+                  : 'border-transparent text-muted-foreground hover:text-foreground hover:border-muted-foreground/30',
+              )}
+            >
+              {tab.label}
+            </Link>
+          );
+        })}
+      </nav>
+
+      <div
+        className={cn(
+          'flex-1 overflow-y-auto pt-6 pb-6 px-2 -mx-2',
+          isPlayerVisible && BOTTOM_SAFE_AREA_PADDING,
+        )}
+      >
+        <Outlet />
       </div>
     </div>
   );

app/src/components/ServerTab/SettingRow.tsx

@@ -0,0 +1,62 @@
+import type { ReactNode } from 'react';
+
+/**
+ * A section header with title and optional description, separated by a border.
+ */
+export function SettingSection({
+  title,
+  description,
+  children,
+}: {
+  title?: string;
+  description?: string;
+  children: ReactNode;
+}) {
+  return (
+    <div className="space-y-1">
+      {title && <h3 className="text-sm font-medium">{title}</h3>}
+      {description && <p className="text-sm text-muted-foreground">{description}</p>}
+      <div className={`${title || description ? 'pt-3' : ''} space-y-0 divide-y divide-border/60`}>
+        {children}
+      </div>
+    </div>
+  );
+}
+
+/**
+ * A single settings row: label+description on the left, action on the right.
+ * Use for toggles, inputs, buttons, badges — any control type.
+ */
+export function SettingRow({
+  title,
+  description,
+  htmlFor,
+  action,
+  children,
+}: {
+  title: string;
+  description?: string;
+  htmlFor?: string;
+  /** Right-aligned control (checkbox, button, badge, etc.) */
+  action?: ReactNode;
+  /** Full-width content rendered below the label row (for sliders, inputs, etc.) */
+  children?: ReactNode;
+}) {
+  return (
+    <div className="py-3">
+      <div className="flex items-center justify-between gap-8">
+        <div className="min-w-0">
+          <label
+            htmlFor={htmlFor}
+            className={`text-sm font-medium leading-none select-none ${htmlFor ? 'cursor-pointer' : ''}`}
+          >
+            {title}
+          </label>
+          {description && <p className="text-sm text-muted-foreground mt-0.5">{description}</p>}
+        </div>
+        {action && <div className="shrink-0">{action}</div>}
+      </div>
+      {children && <div className="mt-3">{children}</div>}
+    </div>
+  );
+}

app/src/components/Sidebar.tsx

@@ -1,5 +1,5 @@
 import { Link, useMatchRoute } from '@tanstack/react-router';
-import { AudioLines, Box, Mic, Server, Speaker, Volume2, Wand2 } from 'lucide-react';
+import { AudioLines, Box, Mic, Settings, Speaker, Volume2, Wand2 } from 'lucide-react';
 import { useEffect, useState } from 'react';
 import voiceboxLogo from '@/assets/voicebox-logo.png';
 import { cn } from '@/lib/utils/cn';
@@ -19,7 +19,7 @@ const tabs = [
   { id: 'effects', path: '/effects', icon: Wand2, label: 'Effects' },
   { id: 'audio', path: '/audio', icon: Speaker, label: 'Audio' },
   { id: 'models', path: '/models', icon: Box, label: 'Models' },
-  { id: 'server', path: '/server', icon: Server, label: 'Server' },
+  { id: 'settings', path: '/settings', icon: Settings, label: 'Settings' },
 ];
 
 export function Sidebar({ isMacOS }: SidebarProps) {
@@ -54,9 +54,10 @@ export function Sidebar({ isMacOS }: SidebarProps) {
       <div className="flex flex-col gap-3">
         {tabs.map((tab, index) => {
           const Icon = tab.icon;
-          // For index route, use exact match; for others, use default matching
           const isActive =
-            tab.path === '/' ? matchRoute({ to: '/', exact: true }) : matchRoute({ to: tab.path });
+            tab.path === '/'
+              ? matchRoute({ to: '/', fuzzy: false })
+              : matchRoute({ to: tab.path, fuzzy: true });
 
           // Accent fades as buttons get further from the logo
           const accentOpacity = Math.max(0.08, 0.5 - index * 0.07);
@@ -98,7 +99,7 @@ export function Sidebar({ isMacOS }: SidebarProps) {
         <span className="text-[10px] text-muted-foreground/50">v{version}</span>
         {updateStatus.available && (
           <Link
-            to="/server"
+            to="/settings"
             className="text-[9px] font-semibold tracking-wide uppercase px-2 py-0.5 rounded-full bg-accent/15 text-accent hover:bg-accent/25 transition-colors"
           >
             Update

app/src/components/ui/slider.tsx

@@ -1,5 +1,5 @@
-import * as React from 'react';
 import * as SliderPrimitive from '@radix-ui/react-slider';
+import * as React from 'react';
 import { cn } from '@/lib/utils/cn';
 
 const Slider = React.forwardRef<
@@ -14,7 +14,7 @@ const Slider = React.forwardRef<
     <SliderPrimitive.Track className="relative h-2 w-full grow overflow-hidden rounded-full bg-secondary">
       <SliderPrimitive.Range className="absolute h-full bg-primary" />
     </SliderPrimitive.Track>
-    <SliderPrimitive.Thumb className="block h-5 w-5 rounded-full border-2 border-primary bg-background ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 translate-x-0.5" />
+    <SliderPrimitive.Thumb className="block h-0 w-0 outline-none disabled:pointer-events-none disabled:opacity-50 after:block after:h-5 after:w-5 after:rounded-full after:border-2 after:border-primary after:bg-background after:ring-offset-background after:transition-colors after:absolute after:top-1/2 after:left-1/2 after:-translate-x-1/2 after:-translate-y-1/2 focus-visible:after:ring-2 focus-visible:after:ring-ring focus-visible:after:ring-offset-2" />
   </SliderPrimitive.Root>
 ));
 Slider.displayName = SliderPrimitive.Root.displayName;

app/src/components/ui/toaster.tsx

@@ -1,3 +1,4 @@
+import { usePlayerStore } from '@/stores/playerStore';
 import {
   Toast,
   ToastClose,
@@ -10,6 +11,7 @@ import { useToast } from './use-toast';
 
 export function Toaster() {
   const { toasts } = useToast();
+  const isPlayerOpen = !!usePlayerStore((s) => s.audioUrl);
 
   return (
     <ToastProvider>
@@ -23,7 +25,7 @@ export function Toaster() {
           <ToastClose />
         </Toast>
       ))}
-      <ToastViewport />
+      <ToastViewport className={isPlayerOpen ? 'sm:bottom-44' : ''} />
     </ToastProvider>
   );
 }

app/src/components/ui/toggle.tsx

@@ -0,0 +1,48 @@
+import * as React from 'react';
+import { cn } from '@/lib/utils/cn';
+
+export interface ToggleProps {
+  checked?: boolean;
+  onCheckedChange?: (checked: boolean) => void;
+  disabled?: boolean;
+  className?: string;
+  id?: string;
+}
+
+const Toggle = React.forwardRef<HTMLButtonElement, ToggleProps>(
+  ({ checked = false, onCheckedChange, disabled = false, className, id, ...props }, ref) => {
+    return (
+      <button
+        type="button"
+        ref={ref}
+        id={id}
+        role="switch"
+        aria-checked={checked}
+        disabled={disabled}
+        onClick={() => {
+          if (!disabled && onCheckedChange) {
+            onCheckedChange(!checked);
+          }
+        }}
+        className={cn(
+          'relative inline-flex h-5 w-9 shrink-0 items-center rounded-full transition-colors',
+          'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2',
+          checked ? 'bg-accent' : 'bg-muted-foreground/25',
+          disabled ? 'opacity-50 cursor-not-allowed' : 'cursor-pointer',
+          className,
+        )}
+        {...props}
+      >
+        <span
+          className={cn(
+            'pointer-events-none block h-4 w-4 rounded-full bg-white shadow-sm transition-transform',
+            checked ? 'translate-x-[18px]' : 'translate-x-[2px]',
+          )}
+        />
+      </button>
+    );
+  },
+);
+Toggle.displayName = 'Toggle';
+
+export { Toggle };

app/src/global.d.ts

@@ -1,3 +1,8 @@
 interface Window {
   __voiceboxServerStartedByApp?: boolean;
 }
+
+declare module 'virtual:changelog' {
+  const raw: string;
+  export default raw;
+}

app/src/lib/utils/parseChangelog.ts

@@ -0,0 +1,37 @@
+export interface ChangelogEntry {
+  version: string;
+  date: string | null;
+  body: string;
+}
+
+/**
+ * Parses a Keep-a-Changelog style markdown string into structured entries.
+ *
+ * Splits on `## [version]` headings and extracts the version + date from each.
+ * The body is the raw markdown between headings (trimmed), with the leading
+ * `# Changelog` title and trailing link references stripped.
+ */
+export function parseChangelog(raw: string): ChangelogEntry[] {
+  const entries: ChangelogEntry[] = [];
+
+  // Strip trailing link reference definitions (e.g. [0.1.0]: https://...)
+  const cleaned = raw.replace(/^\[[\w.]+\]:.*$/gm, '').trimEnd();
+
+  // Match `## [version]` or `## [version] - date`
+  const headingRe = /^## \[(.+?)\](?:\s*-\s*(.+))?$/gm;
+  const matches = [...cleaned.matchAll(headingRe)];
+
+  for (let i = 0; i < matches.length; i++) {
+    const match = matches[i];
+    const version = match[1];
+    const date = match[2]?.trim() || null;
+
+    const start = match.index! + match[0].length;
+    const end = i + 1 < matches.length ? matches[i + 1].index! : cleaned.length;
+    const body = cleaned.slice(start, end).trim();
+
+    entries.push({ version, date, body });
+  }
+
+  return entries;
+}

app/src/platform/types.ts

@@ -50,12 +50,18 @@ export interface PlatformAudio {
   stopPlayback(): void;
 }
 
+export interface ServerLogEntry {
+  stream: 'stdout' | 'stderr';
+  line: string;
+}
+
 export interface PlatformLifecycle {
   startServer(remote?: boolean, modelsDir?: string | null): Promise<string>;
   stopServer(): Promise<void>;
   restartServer(modelsDir?: string | null): Promise<string>;
   setKeepServerRunning(keep: boolean): Promise<void>;
   setupWindowCloseHandler(): Promise<void>;
+  subscribeToServerLogs(callback: (entry: ServerLogEntry) => void): () => void;
   onServerReady?: () => void;
 }
 

app/src/router.tsx

@@ -1,10 +1,22 @@
-import { createRootRoute, createRoute, createRouter, Outlet } from '@tanstack/react-router';
+import {
+  createRootRoute,
+  createRoute,
+  createRouter,
+  Outlet,
+  redirect,
+} from '@tanstack/react-router';
 import { AppFrame } from '@/components/AppFrame/AppFrame';
 import { AudioTab } from '@/components/AudioTab/AudioTab';
 import { EffectsTab } from '@/components/EffectsTab/EffectsTab';
 import { MainEditor } from '@/components/MainEditor/MainEditor';
 import { ModelsTab } from '@/components/ModelsTab/ModelsTab';
-import { ServerTab } from '@/components/ServerTab/ServerTab';
+import { AboutPage } from '@/components/ServerTab/AboutPage';
+import { ChangelogPage } from '@/components/ServerTab/ChangelogPage';
+import { GeneralPage } from '@/components/ServerTab/GeneralPage';
+import { GenerationPage } from '@/components/ServerTab/GenerationPage';
+import { GpuPage } from '@/components/ServerTab/GpuPage';
+import { LogsPage } from '@/components/ServerTab/LogsPage';
+import { SettingsLayout } from '@/components/ServerTab/ServerTab';
 import { Sidebar } from '@/components/Sidebar';
 import { StoriesTab } from '@/components/StoriesTab/StoriesTab';
 import { Toaster } from '@/components/ui/toaster';
@@ -120,11 +132,57 @@ const modelsRoute = createRoute({
   component: ModelsTab,
 });
 
-// Server route
-const serverRoute = createRoute({
+// Settings layout route (parent for sub-tabs)
+const settingsRoute = createRoute({
+  getParentRoute: () => rootRoute,
+  path: '/settings',
+  component: SettingsLayout,
+});
+
+// Settings sub-routes
+const settingsGeneralRoute = createRoute({
+  getParentRoute: () => settingsRoute,
+  path: '/',
+  component: GeneralPage,
+});
+
+const settingsGenerationRoute = createRoute({
+  getParentRoute: () => settingsRoute,
+  path: '/generation',
+  component: GenerationPage,
+});
+
+const settingsGpuRoute = createRoute({
+  getParentRoute: () => settingsRoute,
+  path: '/gpu',
+  component: GpuPage,
+});
+
+const settingsChangelogRoute = createRoute({
+  getParentRoute: () => settingsRoute,
+  path: '/changelog',
+  component: ChangelogPage,
+});
+
+const settingsLogsRoute = createRoute({
+  getParentRoute: () => settingsRoute,
+  path: '/logs',
+  component: LogsPage,
+});
+
+const settingsAboutRoute = createRoute({
+  getParentRoute: () => settingsRoute,
+  path: '/about',
+  component: AboutPage,
+});
+
+// Redirect old /server path to /settings
+const serverRedirectRoute = createRoute({
   getParentRoute: () => rootRoute,
   path: '/server',
-  component: ServerTab,
+  beforeLoad: () => {
+    throw redirect({ to: '/settings' });
+  },
 });
 
 // Route tree
@@ -135,7 +193,15 @@ const routeTree = rootRoute.addChildren([
   audioRoute,
   effectsRoute,
   modelsRoute,
-  serverRoute,
+  settingsRoute.addChildren([
+    settingsGeneralRoute,
+    settingsGenerationRoute,
+    settingsGpuRoute,
+    settingsLogsRoute,
+    settingsChangelogRoute,
+    settingsAboutRoute,
+  ]),
+  serverRedirectRoute,
 ]);
 
 // Create router

app/src/stores/logStore.ts

@@ -0,0 +1,31 @@
+import { create } from 'zustand';
+import type { ServerLogEntry } from '@/platform/types';
+
+const MAX_LOG_ENTRIES = 2000;
+
+let nextLogEntryId = 0;
+
+export interface LogEntry extends ServerLogEntry {
+  id: number;
+  timestamp: number;
+}
+
+interface LogStore {
+  entries: LogEntry[];
+  addEntry: (entry: ServerLogEntry) => void;
+  clear: () => void;
+}
+
+export const useLogStore = create<LogStore>((set) => ({
+  entries: [],
+  addEntry: (entry) =>
+    set((state) => {
+      const newEntry: LogEntry = { ...entry, id: nextLogEntryId++, timestamp: Date.now() };
+      const entries = [...state.entries, newEntry];
+      if (entries.length > MAX_LOG_ENTRIES) {
+        return { entries: entries.slice(entries.length - MAX_LOG_ENTRIES) };
+      }
+      return { entries };
+    }),
+  clear: () => set({ entries: [] }),
+}));

app/tsconfig.node.json

@@ -6,5 +6,5 @@
     "moduleResolution": "bundler",
     "allowSyntheticDefaultImports": true
   },
-  "include": ["vite.config.ts"]
+  "include": ["vite.config.ts", "plugins/**/*.ts"]
 }

app/vite.config.ts

@@ -2,9 +2,10 @@ import path from 'node:path';
 import tailwindcss from '@tailwindcss/vite';
 import react from '@vitejs/plugin-react';
 import { defineConfig } from 'vite';
+import { changelogPlugin } from './plugins/changelog';
 
 export default defineConfig({
-  plugins: [tailwindcss(), react()],
+  plugins: [tailwindcss(), react(), changelogPlugin(path.resolve(__dirname, '..'))],
   resolve: {
     alias: {
       '@': path.resolve(__dirname, './src'),

backend/app.py

@@ -77,6 +77,7 @@ def create_app() -> FastAPI:
     _configure_cors(application)
     register_routers(application)
     _register_lifecycle(application)
+    _mount_frontend(application)
 
     return application
 
@@ -104,6 +105,43 @@ def _configure_cors(application: FastAPI) -> None:
     )
 
 
+def _mount_frontend(application: FastAPI) -> None:
+    """Serve the built web frontend when present (Docker / web deployment).
+
+    The Dockerfile copies the Vite build output to ``/app/frontend/``.  When
+    that directory exists we mount static assets and add a catch-all route so
+    the React SPA handles client-side routing.  In dev or API-only mode the
+    directory is absent and this function is a no-op.
+    """
+    frontend_dir = Path(__file__).resolve().parent.parent / "frontend"
+    if not frontend_dir.is_dir():
+        return
+
+    from fastapi.staticfiles import StaticFiles
+    from fastapi.responses import FileResponse
+
+    # Mount hashed assets (JS, CSS, images) that Vite places under /assets
+    assets_dir = frontend_dir / "assets"
+    if assets_dir.is_dir():
+        application.mount(
+            "/assets",
+            StaticFiles(directory=str(assets_dir)),
+            name="frontend-assets",
+        )
+
+    # SPA catch-all: serve files if they exist, otherwise index.html for
+    # client-side routes like /voices, /stories, /models, etc.
+    @application.get("/{full_path:path}")
+    async def serve_spa(full_path: str):
+        file_path = (frontend_dir / full_path).resolve()
+        # Guard against path traversal — only serve files inside frontend_dir
+        if full_path and file_path.is_file() and str(file_path).startswith(str(frontend_dir)):
+            return FileResponse(file_path)
+        return FileResponse(frontend_dir / "index.html", media_type="text/html")
+
+    logger.info("Frontend: serving SPA from %s", frontend_dir)
+
+
 def _get_gpu_status() -> str:
     """Return a human-readable string describing GPU availability."""
     backend_type = get_backend_type()

backend/build_binary.py

@@ -127,7 +127,13 @@ def build_server(cuda=False):
             "uvicorn",
             "--hidden-import",
             "sqlalchemy",
-            "--hidden-import",
+            # librosa uses lazy_loader which generates .pyi stub files at
+            # install time and reads them at runtime to discover submodules.
+            # --hidden-import alone doesn't bundle the stubs, causing
+            # "Cannot load imports from non-existent stub" at runtime.
+            "--collect-all",
+            "lazy_loader",
+            "--collect-all",
             "librosa",
             "--hidden-import",
             "soundfile",

backend/routes/health.py

@@ -3,9 +3,11 @@
 import asyncio
 import os
 import signal
+from pathlib import Path
 
 import torch
 from fastapi import APIRouter, Depends
+from fastapi.responses import FileResponse
 from sqlalchemy.orm import Session
 
 from .. import config, models
@@ -15,12 +17,18 @@ from ..utils.platform_detect import get_backend_type
 
 router = APIRouter()
 
+# Frontend build directory — present in Docker, absent in dev/API-only mode
+_frontend_dir = Path(__file__).resolve().parent.parent.parent / "frontend"
+
 
 @router.get("/")
 async def root():
-    """Root endpoint."""
+    """Root endpoint — serves SPA index.html in Docker, JSON otherwise."""
     from .. import __version__
 
+    index = _frontend_dir / "index.html"
+    if index.is_file():
+        return FileResponse(index, media_type="text/html")
     return {"message": "voicebox API", "version": __version__}
 
 
@@ -199,7 +207,7 @@ async def filesystem_health():
 
         checks.append(
             models.DirectoryCheck(
-                path=str(dir_path),
+                path=str(dir_path.resolve()),
                 exists=exists,
                 writable=writable,
                 error=error,

backend/voicebox-server.spec

@@ -6,7 +6,7 @@ from PyInstaller.utils.hooks import copy_metadata
 
 datas = []
 binaries = []
-hiddenimports = ['backend', 'backend.main', 'backend.config', 'backend.database', 'backend.models', 'backend.profiles', 'backend.history', 'backend.tts', 'backend.transcribe', 'backend.platform_detect', 'backend.backends', 'backend.backends.pytorch_backend', 'backend.utils.audio', 'backend.utils.cache', 'backend.utils.progress', 'backend.utils.hf_progress', 'backend.utils.validation', 'backend.cuda_download', 'backend.effects', 'backend.utils.effects', 'backend.versions', 'pedalboard', 'chatterbox', 'chatterbox.tts_turbo', 'chatterbox.mtl_tts', 'backend.backends.chatterbox_backend', 'backend.backends.chatterbox_turbo_backend', 'backend.backends.luxtts_backend', 'zipvoice', 'zipvoice.luxvoice', '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', 'requests', 'pkg_resources.extern', 'backend.backends.mlx_backend', 'mlx', 'mlx.core', 'mlx.nn', 'mlx_audio', 'mlx_audio.tts', 'mlx_audio.stt']
+hiddenimports = ['backend', 'backend.main', 'backend.config', 'backend.database', 'backend.models', 'backend.services.profiles', 'backend.services.history', 'backend.services.tts', 'backend.services.transcribe', 'backend.utils.platform_detect', 'backend.backends', 'backend.backends.pytorch_backend', 'backend.utils.audio', 'backend.utils.cache', 'backend.utils.progress', 'backend.utils.hf_progress', 'backend.services.cuda', 'backend.services.effects', 'backend.utils.effects', 'backend.services.versions', 'pedalboard', 'chatterbox', 'chatterbox.tts_turbo', 'chatterbox.mtl_tts', 'backend.backends.chatterbox_backend', 'backend.backends.chatterbox_turbo_backend', 'backend.backends.luxtts_backend', 'zipvoice', 'zipvoice.luxvoice', 'torch', 'transformers', 'fastapi', 'uvicorn', 'sqlalchemy', 'soundfile', 'qwen_tts', 'qwen_tts.inference', 'qwen_tts.inference.qwen3_tts_model', 'qwen_tts.inference.qwen3_tts_tokenizer', 'qwen_tts.core', 'qwen_tts.cli', 'requests', 'pkg_resources.extern', 'backend.backends.mlx_backend', 'mlx', 'mlx.core', 'mlx.nn', 'mlx_audio', 'mlx_audio.tts', 'mlx_audio.stt']
 datas += collect_data_files('qwen_tts')
 datas += copy_metadata('qwen-tts')
 datas += copy_metadata('requests')
@@ -23,6 +23,16 @@ tmp_ret = collect_all('zipvoice')
 datas += tmp_ret[0]; binaries += tmp_ret[1]; hiddenimports += tmp_ret[2]
 tmp_ret = collect_all('linacodec')
 datas += tmp_ret[0]; binaries += tmp_ret[1]; hiddenimports += tmp_ret[2]
+tmp_ret = collect_all('lazy_loader')
+datas += tmp_ret[0]; binaries += tmp_ret[1]; hiddenimports += tmp_ret[2]
+tmp_ret = collect_all('librosa')
+datas += tmp_ret[0]; binaries += tmp_ret[1]; hiddenimports += tmp_ret[2]
+tmp_ret = collect_all('inflect')
+datas += tmp_ret[0]; binaries += tmp_ret[1]; hiddenimports += tmp_ret[2]
+tmp_ret = collect_all('perth')
+datas += tmp_ret[0]; binaries += tmp_ret[1]; hiddenimports += tmp_ret[2]
+tmp_ret = collect_all('piper_phonemize')
+datas += tmp_ret[0]; binaries += tmp_ret[1]; hiddenimports += tmp_ret[2]
 tmp_ret = collect_all('mlx')
 datas += tmp_ret[0]; binaries += tmp_ret[1]; hiddenimports += tmp_ret[2]
 tmp_ret = collect_all('mlx_audio')

docs/.gitignore

@@ -1,3 +1,26 @@
-node_modules
-.mintlify
+# deps
+/node_modules
+
+# generated content
+.source
+
+# test & build
+/coverage
+/.next/
+/out/
+/build
+*.tsbuildinfo
+
+# misc
 .DS_Store
+*.pem
+/.pnp
+.pnp.js
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# others
+.env*.local
+.vercel
+next-env.d.ts

docs/AUTOUPDATER.md

@@ -1,192 +0,0 @@
-# Auto-Updater Documentation
-
-Voicebox includes automatic updates powered by Tauri's updater plugin. This document explains how it works for both users and developers.
-
-## 1. Generate Signing Keys
-
-Run this command to generate your signing keypair:
-
-```bash
-cd tauri && bun tauri signer generate -w ~/.tauri/voicebox.key
-```
-
-This creates:
-- **Private key**: `~/.tauri/voicebox.key` (keep this secret!)
-- **Public key**: `~/.tauri/voicebox.key.pub`
-
-## 2. Update Configuration
-
-Copy the content from `~/.tauri/voicebox.key.pub` and replace the placeholder in `tauri/src-tauri/tauri.conf.json`:
-
-```json
-{
-  "plugins": {
-    "updater": {
-      "pubkey": "PASTE_PUBLIC_KEY_CONTENT_HERE",
-      "endpoints": [
-        "https://github.com/YOUR_USERNAME/voicebox/releases/latest/download/latest.json"
-      ]
-    }
-  }
-}
-```
-
-Update the endpoint URL with your actual GitHub username/organization.
-
-## 3. Building with Signatures
-
-When building releases, set these environment variables:
-
-**macOS/Linux:**
-```bash
-export TAURI_SIGNING_PRIVATE_KEY="$(cat ~/.tauri/voicebox.key)"
-export TAURI_SIGNING_PRIVATE_KEY_PASSWORD=""
-bun run build
-```
-
-**Windows PowerShell:**
-```powershell
-$env:TAURI_SIGNING_PRIVATE_KEY = Get-Content ~/.tauri/voicebox.key -Raw
-$env:TAURI_SIGNING_PRIVATE_KEY_PASSWORD = ""
-bun run build
-```
-
-## 4. GitHub Release Setup
-
-When you create a GitHub release, the build process will generate:
-- Installers for each platform
-- `.sig` signature files
-- `latest.json` update manifest
-
-### Manual Release Process
-
-1. Build the app with signing keys set
-2. Create a new GitHub release
-3. Upload all files from `tauri/src-tauri/target/release/bundle/`
-4. Create `latest.json` in your release assets:
-
-```json
-{
-  "version": "0.2.0",
-  "notes": "Bug fixes and improvements",
-  "pub_date": "2026-01-25T12:00:00Z",
-  "platforms": {
-    "darwin-aarch64": {
-      "signature": "CONTENT_FROM_.app.tar.gz.sig",
-      "url": "https://github.com/YOUR_USERNAME/voicebox/releases/download/v0.2.0/voicebox_0.2.0_aarch64.dmg"
-    },
-    "darwin-x86_64": {
-      "signature": "CONTENT_FROM_.app.tar.gz.sig",
-      "url": "https://github.com/YOUR_USERNAME/voicebox/releases/download/v0.2.0/voicebox_0.2.0_x64.dmg"
-    },
-    "linux-x86_64": {
-      "signature": "CONTENT_FROM_.AppImage.sig",
-      "url": "https://github.com/YOUR_USERNAME/voicebox/releases/download/v0.2.0/voicebox_0.2.0_amd64.AppImage"
-    },
-    "windows-x86_64": {
-      "signature": "CONTENT_FROM_.msi.sig",
-      "url": "https://github.com/YOUR_USERNAME/voicebox/releases/download/v0.2.0/voicebox_0.2.0_x64_en-US.msi"
-    }
-  }
-}
-```
-
-### Automated GitHub Actions (Recommended)
-
-Create `.github/workflows/release.yml`:
-
-```yaml
-name: Release
-
-on:
-  push:
-    tags:
-      - 'v*'
-
-jobs:
-  release:
-    strategy:
-      matrix:
-        platform: [macos-latest, ubuntu-22.04, windows-latest]
-
-    runs-on: ${{ matrix.platform }}
-
-    steps:
-      - uses: actions/checkout@v4
-
-      - name: Setup Bun
-        uses: oven-sh/setup-bun@v1
-
-      - name: Install Rust
-        uses: dtolnay/rust-toolchain@stable
-
-      - name: Install dependencies (Ubuntu)
-        if: matrix.platform == 'ubuntu-22.04'
-        run: |
-          sudo apt-get update
-          sudo apt-get install -y libwebkit2gtk-4.1-dev libappindicator3-dev librsvg2-dev patchelf
-
-      - name: Install dependencies
-        run: bun install
-
-      - name: Build
-        env:
-          TAURI_SIGNING_PRIVATE_KEY: ${{ secrets.TAURI_SIGNING_PRIVATE_KEY }}
-          TAURI_SIGNING_PRIVATE_KEY_PASSWORD: ${{ secrets.TAURI_SIGNING_PRIVATE_KEY_PASSWORD }}
-        run: bun run build
-
-      - name: Upload Release
-        uses: softprops/action-gh-release@v1
-        with:
-          files: tauri/src-tauri/target/release/bundle/**/*
-        env:
-          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
-```
-
-Add your private key to GitHub secrets:
-- Go to Settings → Secrets and variables → Actions
-- Add `TAURI_SIGNING_PRIVATE_KEY` with the content of `~/.tauri/voicebox.key`
-- Add `TAURI_SIGNING_PRIVATE_KEY_PASSWORD` (empty string if no password)
-
-## Frontend Integration
-
-The frontend integration is complete with automatic update notifications and manual update checks:
-
-- **Update Notification Banner** - Appears automatically when updates are available
-- **Settings Panel** - Manual "Check for Updates" button in Settings tab
-- **Update Hook** - React hook handles all update operations
-
-See `docs/AUTOUPDATER_QUICKSTART.md` for a quick setup guide.
-
-## Security Notes
-
-- Never commit your private key to version control
-- Store private keys securely (use GitHub secrets for CI/CD)
-- The public key in `tauri.conf.json` is safe to commit
-- Updates are cryptographically verified before installation
-- HTTP endpoints are blocked by default (HTTPS only)
-
-## Testing Updates
-
-1. Build version 0.1.0 and install it
-2. Update version in `tauri.conf.json` to 0.2.0
-3. Build version 0.2.0 with signatures
-4. Create a local server or GitHub release with `latest.json`
-5. Run version 0.1.0 and trigger update check
-6. Verify update downloads and installs correctly
-
-## Troubleshooting
-
-**"Invalid signature" error:**
-- Verify public key matches the private key used to sign
-- Ensure signature files (.sig) are uploaded correctly
-
-**"No update available" when one exists:**
-- Check endpoint URL is correct
-- Verify `latest.json` format matches specification
-- Ensure version in latest.json is higher than current version
-
-**Build fails with signing:**
-- Confirm environment variables are set correctly
-- Check private key file exists and is readable
-- Verify private key format (should start with `dW50cnVzdGVkIGNvbW1lbnQ6`)

docs/AUTOUPDATER_QUICKSTART.md

@@ -1,116 +0,0 @@
-# Autoupdater Quick Start
-
-The Tauri v2 autoupdater has been fully configured and integrated. Follow these steps to activate it.
-
-## What's Already Done
-
-✅ Rust plugin installed and initialized
-✅ Tauri configuration set up with updater settings
-✅ Permissions granted for update operations
-✅ GitHub Actions workflow updated with signing support
-✅ Frontend components created and integrated
-✅ Update notifications on app startup
-✅ Manual update check in Settings tab
-
-## Required Steps (5 minutes)
-
-### 1. Generate Signing Keys
-
-```bash
-bun run generate:keys
-```
-
-This creates:
-- Private key: `~/.tauri/voicebox.key` (keep secret!)
-- Public key: `~/.tauri/voicebox.key.pub` (safe to share)
-
-### 2. Update Tauri Config
-
-Open `tauri/src-tauri/tauri.conf.json` and:
-
-1. Replace `"REPLACE_WITH_YOUR_PUBLIC_KEY"` with the content from `~/.tauri/voicebox.key.pub`
-2. Update the endpoint URL with your GitHub username:
-   ```json
-   "endpoints": [
-     "https://github.com/YOUR_USERNAME/voicebox/releases/latest/download/latest.json"
-   ]
-   ```
-
-### 3. Add GitHub Secrets
-
-Go to your repo Settings → Secrets and variables → Actions:
-
-1. Add `TAURI_SIGNING_PRIVATE_KEY`:
-   ```bash
-   cat ~/.tauri/voicebox.key
-   ```
-   Copy the entire output and paste as the secret value
-
-2. Add `TAURI_SIGNING_PRIVATE_KEY_PASSWORD`:
-   Leave empty (or add your password if you set one)
-
-### 4. Test the Setup
-
-To test locally before creating a release:
-
-```bash
-bun run build:release
-```
-
-This will verify your keys are set up correctly.
-
-## How It Works
-
-### For Users
-1. App checks for updates on startup (only in Tauri builds)
-2. If an update is available, a banner appears at the top
-3. Users can click "Install Now" to download and install
-4. App restarts automatically after installation
-
-### For Developers
-1. Create a new git tag: `git tag v0.2.0 && git push --tags`
-2. GitHub Actions builds signed releases for all platforms
-3. Uploads installers and generates `latest.json` manifest
-4. Users running older versions will be notified automatically
-
-## UI Components
-
-### Update Notification Banner
-- Shows at top of app when update is available
-- Appears automatically on startup
-- Displays download/install progress
-
-### Settings Panel
-- Located in Settings tab
-- Shows current version
-- Manual "Check for Updates" button
-- Update status and progress
-
-## Troubleshooting
-
-**"Public key not configured"**
-- Make sure you copied the entire content from `voicebox.key.pub`
-- The key should start with `dW50cnVzdGVkIGNvbW1lbnQ6`
-
-**"Failed to check for updates"**
-- Endpoint URL might be incorrect
-- No releases published yet (expected for first setup)
-
-**Build fails with signing error**
-- Check that GitHub secrets are set correctly
-- Verify private key file exists at `~/.tauri/voicebox.key`
-
-## Next Release Workflow
-
-1. Update version in `tauri/src-tauri/tauri.conf.json`
-2. Commit changes
-3. Create and push tag: `git tag v0.2.0 && git push --tags`
-4. GitHub Actions will automatically build and create a draft release
-5. Review the release and publish it
-6. Users will be notified of the update
-
-## See Also
-
-- Full documentation: `docs/AUTOUPDATER.md`
-- Build script: `scripts/prepare-release.sh`
-- GitHub workflow: `.github/workflows/release.yml`

docs/README.md

@@ -1,64 +1,41 @@
-# Voicebox Documentation
+# fumadocs-ui-template
 
-This directory contains the documentation for Voicebox, built with [Mintlify](https://mintlify.com).
+This is a Next.js application generated with
+[Create Fumadocs](https://github.com/fuma-nama/fumadocs).
 
-## Development
-
-### Prerequisites
-
-Install Mintlify globally using bun:
-
-```bash
-bun add -g mintlify
-```
-
-Or use the helper script:
-
-```bash
-bun run install:mintlify
-```
-
-### Running Locally
+Run development server:
 
 ```bash
 bun run dev
 ```
 
-This will start the Mintlify dev server.
+Open http://localhost:3000 with your browser to see the result.
 
-The docs will be available at `http://localhost:3000`
+## Explore
 
-### Structure
+In the project, you can see:
 
-```
-docs/
-├── mint.json           # Mintlify configuration
-├── custom.css          # Custom styles
-├── overview/           # Getting started & feature docs
-├── guides/             # User guides
-├── api/                # API reference
-├── development/        # Developer documentation
-├── logo/               # Logo assets
-└── public/             # Static assets
-```
+- `lib/source.ts`: Code for content source adapter, [`loader()`](https://fumadocs.dev/docs/headless/source-api) provides the interface to access your content.
+- `lib/layout.shared.tsx`: Shared options for layouts, optional but preferred to keep.
 
-### Writing Docs
+| Route                     | Description                                            |
+| ------------------------- | ------------------------------------------------------ |
+| `app/(home)`              | The route group for your landing page and other pages. |
+| `app/docs`                | The documentation layout and pages.                    |
+| `app/api/search/route.ts` | The Route Handler for search.                          |
 
-- Use `.mdx` files for all documentation pages
-- Follow the existing structure in `mint.json` for navigation
-- Use Mintlify components for enhanced formatting (Card, CardGroup, Accordion, etc.)
-- Reference the [Mintlify documentation](https://mintlify.com/docs) for available components
+### Fumadocs MDX
 
-## Deployment
+A `source.config.ts` config file has been included, you can customise different options like frontmatter schema.
 
-Docs are automatically deployed when changes are pushed to the main branch.
+Read the [Introduction](https://fumadocs.dev/docs/mdx) for further details.
 
-To manually deploy:
+## Learn More
 
-```bash
-mintlify deploy
-```
+To learn more about Next.js and Fumadocs, take a look at the following
+resources:
 
-## Contributing
-
-See [CONTRIBUTING.md](../CONTRIBUTING.md) for contribution guidelines.
+- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js
+  features and API.
+- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
+- [Fumadocs](https://fumadocs.dev) - learn about Fumadocs

docs/api/authentication.mdx

@@ -1,55 +0,0 @@
----
-title: "Authentication"
-description: "API authentication and security"
----
-
-## Current Status
-
-<Warning>
-  Authentication is not currently implemented in Voicebox. The API is intended for local use only.
-</Warning>
-
-## Local Usage
-
-For local development and usage:
-- API runs on `localhost:17493`
-- No authentication required
-- Access restricted to local machine
-
-## Future Implementation
-
-Authentication will be added in a future release for:
-- Remote deployments
-- Multi-user access
-- Production environments
-
-Planned authentication methods:
-- API keys
-- OAuth 2.0
-- JWT tokens
-
-## Security Best Practices
-
-Until authentication is implemented:
-
-<CardGroup cols={2}>
-  <Card title="Use VPN" icon="shield">
-    Use WireGuard or Tailscale for remote access
-  </Card>
-  <Card title="Reverse Proxy" icon="server">
-    Run behind nginx with basic auth
-  </Card>
-  <Card title="Firewall" icon="fire">
-    Restrict access to trusted IPs only
-  </Card>
-  <Card title="Local Only" icon="laptop">
-    Don't expose to public internet
-  </Card>
-</CardGroup>
-
-## Coming Soon
-
-- API key management
-- User accounts
-- Rate limiting
-- Access control

docs/api/generation.mdx

@@ -1,119 +0,0 @@
----
-title: "Generation API"
-description: "Generate speech from text"
----
-
-## Generate Speech
-
-```http
-POST /generate
-```
-
-**Request:**
-```json
-{
-  "text": "Hello world",
-  "profile_id": "abc123",
-  "language": "en"
-}
-```
-
-**Response:**
-```json
-{
-  "id": "gen123",
-  "text": "Hello world",
-  "profile_id": "abc123",
-  "language": "en",
-  "audio_url": "/audio/gen123.wav",
-  "duration": 2.3,
-  "created_at": "2024-01-29T12:00:00Z"
-}
-```
-
-## List History
-
-```http
-GET /history
-```
-
-**Query Parameters:**
-- `profile_id` (optional) - Filter by voice profile
-- `limit` (optional) - Number of results (default: 50)
-- `offset` (optional) - Pagination offset
-
-**Response:**
-```json
-{
-  "generations": [
-    {
-      "id": "gen123",
-      "text": "Hello world",
-      "profile_id": "abc123",
-      "duration": 2.3,
-      "created_at": "2024-01-29T12:00:00Z"
-    }
-  ],
-  "total": 100
-}
-```
-
-## Get Generation
-
-```http
-GET /history/{id}
-```
-
-**Response:**
-```json
-{
-  "id": "gen123",
-  "text": "Hello world",
-  "profile_id": "abc123",
-  "language": "en",
-  "audio_url": "/audio/gen123.wav",
-  "duration": 2.3,
-  "created_at": "2024-01-29T12:00:00Z"
-}
-```
-
-## Delete Generation
-
-```http
-DELETE /history/{id}
-```
-
-**Response:**
-```json
-{
-  "success": true
-}
-```
-
-## TypeScript Example
-
-```typescript
-import { VoiceboxClient } from '@/lib/api'
-
-const client = new VoiceboxClient({
-  baseUrl: 'http://localhost:17493'
-})
-
-// Generate speech
-const generation = await client.generate({
-  text: 'Hello world',
-  profile_id: 'abc123',
-  language: 'en'
-})
-
-// Get audio URL
-const audioUrl = generation.audio_url
-
-// List history
-const history = await client.listHistory({
-  profile_id: 'abc123',
-  limit: 20
-})
-```
-
-For full API documentation, visit `http://localhost:17493/docs` when the server is running.

docs/api/overview.mdx

@@ -1,219 +0,0 @@
----
-title: "API Overview"
-description: "Integrate voice synthesis into your applications with the Voicebox REST API"
----
-
-## Introduction
-
-Voicebox exposes a full REST API that allows you to integrate voice synthesis into your own applications. The API runs on `http://localhost:17493` by default.
-
-<Card title="Interactive API Docs" icon="book" href="http://localhost:17493/docs">
-  When Voicebox is running, visit the auto-generated API documentation at `http://localhost:17493/docs`
-</Card>
-
-## Base URL
-
-```
-http://localhost:17493
-```
-
-For remote deployments, replace `localhost` with your server's IP or hostname.
-
-## Authentication
-
-<Note>
-  Currently, the API does not require authentication for local development. Authentication will be added in a future release for production deployments.
-</Note>
-
-## Quick Example
-
-Here's a simple example of generating speech:
-
-```bash
-# Generate speech
-curl -X POST http://localhost:17493/generate \
-  -H "Content-Type: application/json" \
-  -d '{
-    "text": "Hello world",
-    "profile_id": "abc123",
-    "language": "en"
-  }'
-```
-
-## API Endpoints
-
-The Voicebox API is organized into several categories:
-
-<CardGroup cols={2}>
-  <Card title="Voice Profiles" icon="user" href="/api/voice-profiles">
-    Create, list, update, and delete voice profiles
-  </Card>
-  <Card title="Generation" icon="waveform" href="/api/generation">
-    Generate speech from text using voice profiles
-  </Card>
-  <Card title="Recordings" icon="microphone" href="/api/recordings">
-    Record and transcribe audio
-  </Card>
-  <Card title="Stories" icon="film">
-    Create and manage multi-voice stories (coming soon)
-  </Card>
-</CardGroup>
-
-## Core Endpoints
-
-### Voice Profiles
-
-```http
-GET    /profiles              # List all profiles
-POST   /profiles              # Create a new profile
-GET    /profiles/{id}         # Get profile details
-PUT    /profiles/{id}         # Update a profile
-DELETE /profiles/{id}         # Delete a profile
-POST   /profiles/{id}/samples # Add voice sample
-```
-
-### Generation
-
-```http
-POST   /generate              # Generate speech
-GET    /history               # List generation history
-GET    /history/{id}          # Get generation details
-DELETE /history/{id}          # Delete from history
-```
-
-### Recordings
-
-```http
-POST   /recordings            # Start recording
-POST   /recordings/stop       # Stop recording
-POST   /transcribe            # Transcribe audio
-```
-
-## Response Format
-
-All API responses follow a consistent JSON format:
-
-```json
-{
-  "success": true,
-  "data": {
-    // Response data
-  },
-  "error": null
-}
-```
-
-Error responses:
-
-```json
-{
-  "success": false,
-  "data": null,
-  "error": {
-    "message": "Error description",
-    "code": "ERROR_CODE"
-  }
-}
-```
-
-## Data Models
-
-### Voice Profile
-
-```json
-{
-  "id": "abc123",
-  "name": "John Smith",
-  "language": "en",
-  "description": "Professional narrator voice",
-  "created_at": "2024-01-29T12:00:00Z",
-  "samples": [
-    {
-      "id": "sample123",
-      "audio_path": "/path/to/sample.wav",
-      "duration": 15.5
-    }
-  ]
-}
-```
-
-### Generation
-
-```json
-{
-  "id": "gen123",
-  "text": "Hello world",
-  "profile_id": "abc123",
-  "language": "en",
-  "audio_path": "/path/to/output.wav",
-  "duration": 2.3,
-  "created_at": "2024-01-29T12:00:00Z"
-}
-```
-
-## TypeScript Client
-
-Voicebox provides an auto-generated TypeScript client with full type safety:
-
-```typescript
-import { VoiceboxClient } from '@/lib/api'
-
-const client = new VoiceboxClient({
-  baseUrl: 'http://localhost:17493'
-})
-
-// Create a profile
-const profile = await client.createProfile({
-  name: 'John Smith',
-  language: 'en'
-})
-
-// Generate speech
-const generation = await client.generate({
-  text: 'Hello world',
-  profile_id: profile.id,
-  language: 'en'
-})
-```
-
-The client is automatically generated from the OpenAPI schema. See [Development Setup](/development/setup#generate-openapi-client) for details.
-
-## Rate Limiting
-
-<Info>
-  Currently, there are no rate limits for local usage. Rate limiting will be added in a future release for production deployments.
-</Info>
-
-## WebSocket Support
-
-<Note>
-  Real-time streaming generation via WebSockets is planned for a future release.
-</Note>
-
-## Use Cases
-
-<CardGroup cols={2}>
-  <Card title="Game Development" icon="gamepad">
-    Generate dynamic dialogue for NPCs and characters
-  </Card>
-  <Card title="Content Creation" icon="video">
-    Automate voiceovers for videos and podcasts
-  </Card>
-  <Card title="Accessibility" icon="universal-access">
-    Build text-to-speech tools for visually impaired users
-  </Card>
-  <Card title="Voice Assistants" icon="robot">
-    Create custom voice interfaces
-  </Card>
-</CardGroup>
-
-## Next Steps
-
-<CardGroup cols={2}>
-  <Card title="Voice Profiles API" icon="user" href="/api/voice-profiles">
-    Learn how to manage voice profiles
-  </Card>
-  <Card title="Generation API" icon="waveform" href="/api/generation">
-    Generate speech from text
-  </Card>
-</CardGroup>

docs/api/recordings.mdx

@@ -1,95 +0,0 @@
----
-title: "Recordings API"
-description: "Record and transcribe audio"
----
-
-## Start Recording
-
-```http
-POST /recordings/start
-```
-
-**Request:**
-```json
-{
-  "source": "microphone"
-}
-```
-
-**Response:**
-```json
-{
-  "recording_id": "rec123",
-  "status": "recording"
-}
-```
-
-## Stop Recording
-
-```http
-POST /recordings/stop
-```
-
-**Request:**
-```json
-{
-  "recording_id": "rec123"
-}
-```
-
-**Response:**
-```json
-{
-  "recording_id": "rec123",
-  "audio_url": "/audio/rec123.wav",
-  "duration": 15.5
-}
-```
-
-## Transcribe Audio
-
-```http
-POST /transcribe
-```
-
-**Request:** (multipart/form-data)
-```
-audio: <file>
-language: "en" (optional)
-```
-
-**Response:**
-```json
-{
-  "text": "Transcribed speech text here",
-  "language": "en",
-  "duration": 15.5,
-  "confidence": 0.95
-}
-```
-
-## TypeScript Example
-
-```typescript
-import { VoiceboxClient } from '@/lib/api'
-
-const client = new VoiceboxClient({
-  baseUrl: 'http://localhost:17493'
-})
-
-// Start recording
-const recording = await client.startRecording({
-  source: 'microphone'
-})
-
-// ... record audio ...
-
-// Stop recording
-const result = await client.stopRecording(recording.id)
-
-// Transcribe
-const transcription = await client.transcribe(audioFile, 'en')
-console.log(transcription.text)
-```
-
-For full API documentation, visit `http://localhost:17493/docs` when the server is running.

docs/api/voice-profiles.mdx

@@ -1,149 +0,0 @@
----
-title: "Voice Profiles API"
-description: "Manage voice profiles programmatically"
----
-
-## Endpoints
-
-### List Profiles
-
-```http
-GET /profiles
-```
-
-**Response:**
-```json
-{
-  "profiles": [
-    {
-      "id": "abc123",
-      "name": "John Smith",
-      "language": "en",
-      "description": "Professional narrator",
-      "created_at": "2024-01-29T12:00:00Z",
-      "sample_count": 2
-    }
-  ]
-}
-```
-
-### Get Profile
-
-```http
-GET /profiles/{id}
-```
-
-**Response:**
-```json
-{
-  "id": "abc123",
-  "name": "John Smith",
-  "language": "en",
-  "description": "Professional narrator",
-  "created_at": "2024-01-29T12:00:00Z",
-  "samples": [
-    {
-      "id": "sample123",
-      "duration": 15.5,
-      "created_at": "2024-01-29T12:00:00Z"
-    }
-  ]
-}
-```
-
-### Create Profile
-
-```http
-POST /profiles
-```
-
-**Request:**
-```json
-{
-  "name": "John Smith",
-  "language": "en",
-  "description": "Professional narrator"
-}
-```
-
-**Response:**
-```json
-{
-  "id": "abc123",
-  "name": "John Smith",
-  "language": "en",
-  "description": "Professional narrator",
-  "created_at": "2024-01-29T12:00:00Z"
-}
-```
-
-### Update Profile
-
-```http
-PUT /profiles/{id}
-```
-
-**Request:**
-```json
-{
-  "name": "Updated Name",
-  "description": "Updated description"
-}
-```
-
-### Delete Profile
-
-```http
-DELETE /profiles/{id}
-```
-
-**Response:**
-```json
-{
-  "success": true
-}
-```
-
-### Add Voice Sample
-
-```http
-POST /profiles/{id}/samples
-```
-
-**Request:** (multipart/form-data)
-```
-audio: <file>
-```
-
-**Response:**
-```json
-{
-  "sample_id": "sample123",
-  "duration": 15.5
-}
-```
-
-## TypeScript Example
-
-```typescript
-import { VoiceboxClient } from '@/lib/api'
-
-const client = new VoiceboxClient({
-  baseUrl: 'http://localhost:17493'
-})
-
-// Create profile
-const profile = await client.createProfile({
-  name: 'John Smith',
-  language: 'en',
-  description: 'Professional narrator'
-})
-
-// Add sample
-await client.addSample(profile.id, audioFile)
-
-// List all profiles
-const profiles = await client.listProfiles()
-```
-
-For full API documentation, visit `http://localhost:17493/docs` when the server is running.

docs/app/[[...slug]]/layout.tsx

@@ -0,0 +1,11 @@
+import { DocsLayout } from 'fumadocs-ui/layouts/docs';
+import { baseOptions } from '@/lib/layout.shared';
+import { source } from '@/lib/source';
+
+export default function Layout({ children }: LayoutProps<'/[[...slug]]'>) {
+  return (
+    <DocsLayout tree={source.pageTree} {...baseOptions()}>
+      {children}
+    </DocsLayout>
+  );
+}

docs/app/[[...slug]]/page.tsx

@@ -0,0 +1,74 @@
+import { createRelativeLink } from 'fumadocs-ui/mdx';
+import { DocsBody, DocsDescription, DocsPage, DocsTitle } from 'fumadocs-ui/page';
+import type { Metadata } from 'next';
+import { notFound } from 'next/navigation';
+import { MarkdownCopyButton, ViewOptionsPopover } from '@/components/ai/page-actions';
+import { APIPage } from '@/components/api-page';
+import { getPageImage, source } from '@/lib/source';
+import { getMDXComponents } from '@/mdx-components';
+
+export default async function Page(props: PageProps<'/[[...slug]]'>) {
+  const params = await props.params;
+  const page = source.getPage(params.slug);
+  if (!page) notFound();
+
+  const MDX = page.data.body;
+  const markdownUrl = `${page.url}.mdx`;
+  const githubUrl = `https://github.com/jamiepine/voicebox/blob/main/docs/content/docs/${page.path}`;
+
+  return (
+    <DocsPage
+      toc={page.data.toc}
+      full={page.data.full}
+      editOnGithub={{
+        owner: 'jamiepine',
+        repo: 'voicebox',
+        sha: 'main',
+        path: `docs/content/docs/${page.path}`,
+      }}
+      lastUpdate={page.data.lastModified}
+    >
+      <DocsTitle>{page.data.title}</DocsTitle>
+      <DocsDescription className="mb-0">{page.data.description}</DocsDescription>
+      <div className="flex flex-row gap-2 items-center">
+        <MarkdownCopyButton markdownUrl={markdownUrl} />
+        <ViewOptionsPopover markdownUrl={markdownUrl} githubUrl={githubUrl} />
+      </div>
+      <div
+        role="separator"
+        style={{
+          height: '1px',
+          background: 'currentColor',
+          opacity: 0.15,
+          marginTop: '8px',
+          marginBottom: '24px',
+        }}
+      />
+      <DocsBody>
+        <MDX
+          components={getMDXComponents({
+            a: createRelativeLink(source, page),
+          })}
+        />
+      </DocsBody>
+    </DocsPage>
+  );
+}
+
+export async function generateStaticParams() {
+  return source.generateParams();
+}
+
+export async function generateMetadata(props: PageProps<'/[[...slug]]'>): Promise<Metadata> {
+  const params = await props.params;
+  const page = source.getPage(params.slug);
+  if (!page) notFound();
+
+  return {
+    title: page.data.title,
+    description: page.data.description,
+    openGraph: {
+      images: getPageImage(page).url,
+    },
+  };
+}

docs/app/api/search/route.ts

@@ -0,0 +1,7 @@
+import { source } from '@/lib/source';
+import { createFromSource } from 'fumadocs-core/search/server';
+
+export const { GET } = createFromSource(source, {
+  // https://docs.orama.com/docs/orama-js/supported-languages
+  language: 'english',
+});

docs/app/global.css

@@ -0,0 +1,14 @@
+@import 'tailwindcss';
+@import 'fumadocs-ui/css/neutral.css';
+@import 'fumadocs-ui/css/preset.css';
+@import 'fumadocs-openapi/css/preset.css';
+
+:root {
+  --color-fd-primary: hsl(43, 50%, 50%);
+  --color-fd-primary-foreground: hsl(222.2, 47.4%, 11.2%);
+}
+
+.dark {
+  --color-fd-primary: hsl(43, 50%, 45%);
+  --color-fd-primary-foreground: hsl(0, 0%, 95%);
+}

docs/app/layout.tsx

@@ -0,0 +1,17 @@
+import { RootProvider } from 'fumadocs-ui/provider/next';
+import './global.css';
+import { Inter } from 'next/font/google';
+
+const inter = Inter({
+  subsets: ['latin'],
+});
+
+export default function Layout({ children }: LayoutProps<'/'>) {
+  return (
+    <html lang="en" className={inter.className} suppressHydrationWarning>
+      <body className="flex flex-col min-h-screen">
+        <RootProvider>{children}</RootProvider>
+      </body>
+    </html>
+  );
+}

docs/app/llms-full.txt/route.ts

@@ -0,0 +1,10 @@
+import { getLLMText, source } from '@/lib/source';
+
+export const revalidate = false;
+
+export async function GET() {
+  const scan = source.getPages().map(getLLMText);
+  const scanned = await Promise.all(scan);
+
+  return new Response(scanned.join('\n\n'));
+}

docs/app/llms.mdx/docs/[[...slug]]/route.ts

@@ -0,0 +1,20 @@
+import { notFound } from 'next/navigation';
+import { getLLMText, source } from '@/lib/source';
+
+export const revalidate = false;
+
+export async function GET(_req: Request, { params }: RouteContext<'/llms.mdx/docs/[[...slug]]'>) {
+  const { slug } = await params;
+  const page = source.getPage(slug);
+  if (!page) notFound();
+
+  return new Response(await getLLMText(page), {
+    headers: {
+      'Content-Type': 'text/markdown',
+    },
+  });
+}
+
+export function generateStaticParams() {
+  return source.generateParams();
+}

docs/app/og/docs/[...slug]/route.tsx

@@ -0,0 +1,36 @@
+import { getPageImage, source } from '@/lib/source';
+import { notFound } from 'next/navigation';
+import { ImageResponse } from 'next/og';
+import { generate as DefaultImage } from 'fumadocs-ui/og';
+
+export const revalidate = false;
+
+export async function GET(
+  _req: Request,
+  { params }: RouteContext<'/og/docs/[...slug]'>,
+) {
+  const { slug } = await params;
+  const page = source.getPage(slug.slice(0, -1));
+  if (!page) notFound();
+
+  return new ImageResponse(
+    (
+      <DefaultImage
+        title={page.data.title}
+        description={page.data.description}
+        site="My App"
+      />
+    ),
+    {
+      width: 1200,
+      height: 630,
+    },
+  );
+}
+
+export function generateStaticParams() {
+  return source.getPages().map((page) => ({
+    lang: page.locale,
+    slug: getPageImage(page).segments,
+  }));
+}

docs/cli.json

@@ -0,0 +1,13 @@
+{
+  "$schema": "node_modules/@fumadocs/cli/dist/schema/default.json",
+  "aliases": {
+    "uiDir": "./components/ui",
+    "componentsDir": "./components",
+    "blockDir": "./components",
+    "cssDir": "./styles",
+    "libDir": "./lib"
+  },
+  "baseDir": "",
+  "uiLibrary": "radix-ui",
+  "commands": {}
+}

docs/components/ai/page-actions.tsx

@@ -0,0 +1,247 @@
+'use client';
+import { type ComponentProps, useMemo, useState } from 'react';
+import { Check, ChevronDown, Copy, ExternalLinkIcon, TextIcon } from 'lucide-react';
+import { cn } from '../../lib/cn';
+import { useCopyButton } from 'fumadocs-ui/utils/use-copy-button';
+import { Popover, PopoverTrigger, PopoverContent } from '../ui/popover';
+import { buttonVariants } from '../ui/button';
+
+const cache = new Map<string, Promise<string>>();
+
+export function MarkdownCopyButton({
+  markdownUrl,
+  ...props
+}: ComponentProps<'button'> & {
+  /**
+   * A URL to fetch the raw Markdown/MDX content of page
+   */
+  markdownUrl: string;
+}) {
+  const [isLoading, setLoading] = useState(false);
+  const [checked, onClick] = useCopyButton(async () => {
+    const cached = cache.get(markdownUrl);
+    if (cached) return navigator.clipboard.writeText(await cached);
+
+    setLoading(true);
+
+    try {
+      const promise = fetch(markdownUrl).then((res) => res.text());
+      cache.set(markdownUrl, promise);
+      await navigator.clipboard.write([
+        new ClipboardItem({
+          'text/plain': promise,
+        }),
+      ]);
+    } finally {
+      setLoading(false);
+    }
+  });
+
+  return (
+    <button
+      disabled={isLoading}
+      onClick={onClick}
+      {...props}
+      className={cn(
+        buttonVariants({
+          variant: 'secondary',
+          size: 'sm',
+          className: 'gap-2 [&_svg]:size-3.5 [&_svg]:text-fd-muted-foreground',
+        }),
+        props.className,
+      )}
+    >
+      {checked ? <Check /> : <Copy />}
+      Copy Markdown
+    </button>
+  );
+}
+
+export function ViewOptionsPopover({
+  markdownUrl,
+  githubUrl,
+  ...props
+}: ComponentProps<typeof PopoverTrigger> & {
+  /**
+   * A URL to the raw Markdown/MDX content of page
+   */
+  markdownUrl: string;
+
+  /**
+   * Source file URL on GitHub
+   */
+  githubUrl: string;
+}) {
+  const items = useMemo(() => {
+    const pageUrl = typeof window !== 'undefined' ? window.location.href : 'loading';
+    const q = `Read ${pageUrl}, I want to ask questions about it.`;
+
+    return [
+      {
+        title: 'Open in GitHub',
+        href: githubUrl,
+        icon: (
+          <svg fill="currentColor" role="img" viewBox="0 0 24 24">
+            <title>GitHub</title>
+            <path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12" />
+          </svg>
+        ),
+      },
+      {
+        title: 'View as Markdown',
+        href: markdownUrl,
+        icon: <TextIcon />,
+      },
+      {
+        title: 'Open in Scira AI',
+        href: `https://scira.ai/?${new URLSearchParams({
+          q,
+        })}`,
+        icon: (
+          <svg
+            width="910"
+            height="934"
+            viewBox="0 0 910 934"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <title>Scira AI</title>
+            <path
+              d="M647.664 197.775C569.13 189.049 525.5 145.419 516.774 66.8849C508.048 145.419 464.418 189.049 385.884 197.775C464.418 206.501 508.048 250.131 516.774 328.665C525.5 250.131 569.13 206.501 647.664 197.775Z"
+              fill="currentColor"
+              stroke="currentColor"
+              strokeWidth="8"
+              strokeLinejoin="round"
+            />
+            <path
+              d="M516.774 304.217C510.299 275.491 498.208 252.087 480.335 234.214C462.462 216.341 439.058 204.251 410.333 197.775C439.059 191.3 462.462 179.209 480.335 161.336C498.208 143.463 510.299 120.06 516.774 91.334C523.25 120.059 535.34 143.463 553.213 161.336C571.086 179.209 594.49 191.3 623.216 197.775C594.49 204.251 571.086 216.341 553.213 234.214C535.34 252.087 523.25 275.491 516.774 304.217Z"
+              fill="currentColor"
+              stroke="currentColor"
+              strokeWidth="8"
+              strokeLinejoin="round"
+            />
+            <path
+              d="M857.5 508.116C763.259 497.644 710.903 445.288 700.432 351.047C689.961 445.288 637.605 497.644 543.364 508.116C637.605 518.587 689.961 570.943 700.432 665.184C710.903 570.943 763.259 518.587 857.5 508.116Z"
+              stroke="currentColor"
+              strokeWidth="20"
+              strokeLinejoin="round"
+            />
+            <path
+              d="M700.432 615.957C691.848 589.05 678.575 566.357 660.383 548.165C642.191 529.973 619.499 516.7 592.593 508.116C619.499 499.533 642.191 486.258 660.383 468.066C678.575 449.874 691.848 427.181 700.432 400.274C709.015 427.181 722.289 449.874 740.481 468.066C758.673 486.258 781.365 499.533 808.271 508.116C781.365 516.7 758.673 529.973 740.481 548.165C722.289 566.357 709.015 589.05 700.432 615.957Z"
+              stroke="currentColor"
+              strokeWidth="20"
+              strokeLinejoin="round"
+            />
+            <path
+              d="M889.949 121.237C831.049 114.692 798.326 81.9698 791.782 23.0692C785.237 81.9698 752.515 114.692 693.614 121.237C752.515 127.781 785.237 160.504 791.782 219.404C798.326 160.504 831.049 127.781 889.949 121.237Z"
+              fill="currentColor"
+              stroke="currentColor"
+              strokeWidth="8"
+              strokeLinejoin="round"
+            />
+            <path
+              d="M791.782 196.795C786.697 176.937 777.869 160.567 765.16 147.858C752.452 135.15 736.082 126.322 716.226 121.237C736.082 116.152 752.452 107.324 765.16 94.6152C777.869 81.9065 786.697 65.5368 791.782 45.6797C796.867 65.5367 805.695 81.9066 818.403 94.6152C831.112 107.324 847.481 116.152 867.338 121.237C847.481 126.322 831.112 135.15 818.403 147.858C805.694 160.567 796.867 176.937 791.782 196.795Z"
+              fill="currentColor"
+              stroke="currentColor"
+              strokeWidth="8"
+              strokeLinejoin="round"
+            />
+            <path
+              d="M760.632 764.337C720.719 814.616 669.835 855.1 611.872 882.692C553.91 910.285 490.404 924.255 426.213 923.533C362.022 922.812 298.846 907.419 241.518 878.531C184.19 849.643 134.228 808.026 95.4548 756.863C56.6815 705.7 30.1238 646.346 17.8129 583.343C5.50207 520.339 7.76433 455.354 24.4266 393.359C41.089 331.364 71.7099 274.001 113.947 225.658C156.184 177.315 208.919 139.273 268.117 114.442"
+              stroke="currentColor"
+              strokeWidth="30"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+            />
+          </svg>
+        ),
+      },
+      {
+        title: 'Open in ChatGPT',
+        href: `https://chatgpt.com/?${new URLSearchParams({
+          hints: 'search',
+          q,
+        })}`,
+        icon: (
+          <svg
+            role="img"
+            viewBox="0 0 24 24"
+            fill="currentColor"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <title>OpenAI</title>
+            <path d="M22.2819 9.8211a5.9847 5.9847 0 0 0-.5157-4.9108 6.0462 6.0462 0 0 0-6.5098-2.9A6.0651 6.0651 0 0 0 4.9807 4.1818a5.9847 5.9847 0 0 0-3.9977 2.9 6.0462 6.0462 0 0 0 .7427 7.0966 5.98 5.98 0 0 0 .511 4.9107 6.051 6.051 0 0 0 6.5146 2.9001A5.9847 5.9847 0 0 0 13.2599 24a6.0557 6.0557 0 0 0 5.7718-4.2058 5.9894 5.9894 0 0 0 3.9977-2.9001 6.0557 6.0557 0 0 0-.7475-7.0729zm-9.022 12.6081a4.4755 4.4755 0 0 1-2.8764-1.0408l.1419-.0804 4.7783-2.7582a.7948.7948 0 0 0 .3927-.6813v-6.7369l2.02 1.1686a.071.071 0 0 1 .038.052v5.5826a4.504 4.504 0 0 1-4.4945 4.4944zm-9.6607-4.1254a4.4708 4.4708 0 0 1-.5346-3.0137l.142.0852 4.783 2.7582a.7712.7712 0 0 0 .7806 0l5.8428-3.3685v2.3324a.0804.0804 0 0 1-.0332.0615L9.74 19.9502a4.4992 4.4992 0 0 1-6.1408-1.6464zM2.3408 7.8956a4.485 4.485 0 0 1 2.3655-1.9728V11.6a.7664.7664 0 0 0 .3879.6765l5.8144 3.3543-2.0201 1.1685a.0757.0757 0 0 1-.071 0l-4.8303-2.7865A4.504 4.504 0 0 1 2.3408 7.872zm16.5963 3.8558L13.1038 8.364 15.1192 7.2a.0757.0757 0 0 1 .071 0l4.8303 2.7913a4.4944 4.4944 0 0 1-.6765 8.1042v-5.6772a.79.79 0 0 0-.407-.667zm2.0107-3.0231l-.142-.0852-4.7735-2.7818a.7759.7759 0 0 0-.7854 0L9.409 9.2297V6.8974a.0662.0662 0 0 1 .0284-.0615l4.8303-2.7866a4.4992 4.4992 0 0 1 6.6802 4.66zM8.3065 12.863l-2.02-1.1638a.0804.0804 0 0 1-.038-.0567V6.0742a4.4992 4.4992 0 0 1 7.3757-3.4537l-.142.0805L8.704 5.459a.7948.7948 0 0 0-.3927.6813zm1.0976-2.3654l2.602-1.4998 2.6069 1.4998v2.9994l-2.5974 1.4997-2.6067-1.4997Z" />
+          </svg>
+        ),
+      },
+      {
+        title: 'Open in Claude',
+        href: `https://claude.ai/new?${new URLSearchParams({
+          q,
+        })}`,
+        icon: (
+          <svg
+            fill="currentColor"
+            role="img"
+            viewBox="0 0 24 24"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <title>Anthropic</title>
+            <path d="M17.3041 3.541h-3.6718l6.696 16.918H24Zm-10.6082 0L0 20.459h3.7442l1.3693-3.5527h7.0052l1.3693 3.5528h3.7442L10.5363 3.5409Zm-.3712 10.2232 2.2914-5.9456 2.2914 5.9456Z" />
+          </svg>
+        ),
+      },
+      {
+        title: 'Open in Cursor',
+        icon: (
+          <svg
+            fill="currentColor"
+            role="img"
+            viewBox="0 0 24 24"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <title>Cursor</title>
+            <path d="M11.503.131 1.891 5.678a.84.84 0 0 0-.42.726v11.188c0 .3.162.575.42.724l9.609 5.55a1 1 0 0 0 .998 0l9.61-5.55a.84.84 0 0 0 .42-.724V6.404a.84.84 0 0 0-.42-.726L12.497.131a1.01 1.01 0 0 0-.996 0M2.657 6.338h18.55c.263 0 .43.287.297.515L12.23 22.918c-.062.107-.229.064-.229-.06V12.335a.59.59 0 0 0-.295-.51l-9.11-5.257c-.109-.063-.064-.23.061-.23" />
+          </svg>
+        ),
+        href: `https://cursor.com/link/prompt?${new URLSearchParams({
+          text: q,
+        })}`,
+      },
+    ];
+  }, [githubUrl, markdownUrl]);
+
+  return (
+    <Popover>
+      <PopoverTrigger
+        {...props}
+        className={cn(
+          buttonVariants({
+            variant: 'secondary',
+            size: 'sm',
+          }),
+          'gap-2 data-[state=open]:bg-fd-accent data-[state=open]:text-fd-accent-foreground',
+          props.className,
+        )}
+      >
+        Open
+        <ChevronDown className="size-3.5 text-fd-muted-foreground" />
+      </PopoverTrigger>
+      <PopoverContent className="flex flex-col">
+        {items.map((item) => (
+          <a
+            key={item.href}
+            href={item.href}
+            rel="noreferrer noopener"
+            target="_blank"
+            className="text-sm p-2 rounded-lg inline-flex items-center gap-2 hover:text-fd-accent-foreground hover:bg-fd-accent [&_svg]:size-4"
+          >
+            {item.icon}
+            {item.title}
+            <ExternalLinkIcon className="text-fd-muted-foreground size-3.5 ms-auto" />
+          </a>
+        ))}
+      </PopoverContent>
+    </Popover>
+  );
+}

docs/components/api-page.client.tsx

@@ -0,0 +1,6 @@
+'use client';
+import { defineClientConfig } from 'fumadocs-openapi/ui/client';
+
+export default defineClientConfig({
+  // Client-side configuration for API playground
+});

docs/components/api-page.tsx

@@ -0,0 +1,7 @@
+import { openapi } from '@/lib/openapi';
+import { createAPIPage } from 'fumadocs-openapi/ui';
+import client from './api-page.client';
+
+export const APIPage = createAPIPage(openapi, {
+  client,
+});

docs/components/ui/button.tsx

@@ -0,0 +1,29 @@
+import { cva, type VariantProps } from 'class-variance-authority';
+
+const variants = {
+  primary:
+    'bg-fd-primary text-fd-primary-foreground hover:bg-fd-primary/80 disabled:bg-fd-secondary disabled:text-fd-secondary-foreground',
+  outline: 'border hover:bg-fd-accent hover:text-fd-accent-foreground',
+  ghost: 'hover:bg-fd-accent hover:text-fd-accent-foreground',
+  secondary:
+    'border bg-fd-secondary text-fd-secondary-foreground hover:bg-fd-accent hover:text-fd-accent-foreground',
+} as const;
+
+export const buttonVariants = cva(
+  'inline-flex items-center justify-center rounded-md p-2 text-sm font-medium transition-colors duration-100 disabled:pointer-events-none disabled:opacity-50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fd-ring',
+  {
+    variants: {
+      variant: variants,
+      // fumadocs use `color` instead of `variant`
+      color: variants,
+      size: {
+        sm: 'gap-1 px-2 py-1.5 text-xs',
+        icon: 'p-1.5 [&_svg]:size-5',
+        'icon-sm': 'p-1.5 [&_svg]:size-4.5',
+        'icon-xs': 'p-1 [&_svg]:size-4',
+      },
+    },
+  },
+);
+
+export type ButtonProps = VariantProps<typeof buttonVariants>;

docs/components/ui/popover.tsx

@@ -0,0 +1,32 @@
+'use client';
+import * as PopoverPrimitive from '@radix-ui/react-popover';
+import * as React from 'react';
+import { cn } from '../../lib/cn';
+
+const Popover = PopoverPrimitive.Root;
+
+const PopoverTrigger = PopoverPrimitive.Trigger;
+
+const PopoverContent = React.forwardRef<
+  React.ComponentRef<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}
+      side="bottom"
+      className={cn(
+        'z-50 origin-(--radix-popover-content-transform-origin) overflow-y-auto max-h-(--radix-popover-content-available-height) min-w-[240px] max-w-[98vw] rounded-xl border bg-fd-popover/60 backdrop-blur-lg p-2 text-sm text-fd-popover-foreground shadow-lg focus-visible:outline-none data-[state=closed]:animate-fd-popover-out data-[state=open]:animate-fd-popover-in',
+        className,
+      )}
+      {...props}
+    />
+  </PopoverPrimitive.Portal>
+));
+PopoverContent.displayName = PopoverPrimitive.Content.displayName;
+
+const PopoverClose = PopoverPrimitive.PopoverClose;
+
+export { Popover, PopoverTrigger, PopoverContent, PopoverClose };

docs/content/docs/README.md

@@ -0,0 +1,67 @@
+---
+title: "Documentation README"
+description: "Voicebox documentation development guide"
+---
+
+This directory contains the documentation for Voicebox, built with [Fumadocs](https://fumadocs.dev).
+
+## Development
+
+### Prerequisites
+
+Install Mintlify globally using bun:
+
+```bash
+bun add -g mintlify
+```
+
+Or use the helper script:
+
+```bash
+bun run install:mintlify
+```
+
+### Running Locally
+
+```bash
+bun run dev
+```
+
+This will start the Mintlify dev server.
+
+The docs will be available at `http://localhost:3000`
+
+### Structure
+
+```
+docs/
+├── mint.json           # Mintlify configuration
+├── custom.css          # Custom styles
+├── overview/           # Getting started & feature docs
+├── guides/             # User guides
+├── api/                # API reference
+├── development/        # Developer documentation
+├── logo/               # Logo assets
+└── public/             # Static assets
+```
+
+### Writing Docs
+
+- Use `.mdx` files for all documentation pages
+- Follow the existing structure in `mint.json` for navigation
+- Use Mintlify components for enhanced formatting (Card, CardGroup, Accordion, etc.)
+- Reference the [Mintlify documentation](https://mintlify.com/docs) for available components
+
+## Deployment
+
+Docs are automatically deployed when changes are pushed to the main branch.
+
+To manually deploy:
+
+```bash
+mintlify deploy
+```
+
+## Contributing
+
+See [CONTRIBUTING.md](../CONTRIBUTING.md) for contribution guidelines.

docs/content/docs/TROUBLESHOOTING.md

@@ -1,4 +1,7 @@
-# Troubleshooting Guide
+---
+title: "Troubleshooting Guide"
+description: "Common issues and solutions for Voicebox"
+---
 
 Common issues and solutions for Voicebox.
 

docs/content/docs/api-reference/general/health_health_get.mdx

@@ -0,0 +1,16 @@
+---
+title: Health
+description: Health check endpoint.
+full: true
+_openapi:
+  method: GET
+  toc: []
+  structuredData:
+    headings: []
+    contents:
+      - content: Health check endpoint.
+---
+
+{/* This file was generated by Fumadocs. Do not edit this file directly. Any changes should be made by running the generation command again. */}
+
+<APIPage document={"./openapi.json"} operations={[{"path":"/health","method":"get"}]} />

docs/content/docs/api-reference/general/meta.json

@@ -0,0 +1,4 @@
+{
+  "title": "General",
+  "pages": ["root__get", "health_health_get"]
+}

docs/content/docs/api-reference/general/root__get.mdx

@@ -0,0 +1,16 @@
+---
+title: Root
+description: Root endpoint.
+full: true
+_openapi:
+  method: GET
+  toc: []
+  structuredData:
+    headings: []
+    contents:
+      - content: Root endpoint.
+---
+
+{/* This file was generated by Fumadocs. Do not edit this file directly. Any changes should be made by running the generation command again. */}
+
+<APIPage document={"./openapi.json"} operations={[{"path":"/","method":"get"}]} />

docs/content/docs/api-reference/generation/generate_speech_generate_post.mdx

@@ -0,0 +1,16 @@
+---
+title: Generate Speech
+description: Generate speech from text using a voice profile.
+full: true
+_openapi:
+  method: POST
+  toc: []
+  structuredData:
+    headings: []
+    contents:
+      - content: Generate speech from text using a voice profile.
+---
+
+{/* This file was generated by Fumadocs. Do not edit this file directly. Any changes should be made by running the generation command again. */}
+
+<APIPage document={"./openapi.json"} operations={[{"path":"/generate","method":"post"}]} />

docs/content/docs/api-reference/generation/get_audio_audio__generation_id__get.mdx

@@ -0,0 +1,16 @@
+---
+title: Get Audio
+description: Serve generated audio file.
+full: true
+_openapi:
+  method: GET
+  toc: []
+  structuredData:
+    headings: []
+    contents:
+      - content: Serve generated audio file.
+---
+
+{/* This file was generated by Fumadocs. Do not edit this file directly. Any changes should be made by running the generation command again. */}
+
+<APIPage document={"./openapi.json"} operations={[{"path":"/audio/{generation_id}","method":"get"}]} />

docs/content/docs/api-reference/generation/meta.json

@@ -0,0 +1,8 @@
+{
+  "title": "Generation",
+  "pages": [
+    "generate_speech_generate_post",
+    "transcribe_audio_transcribe_post",
+    "get_audio_audio__generation_id__get"
+  ]
+}

docs/content/docs/api-reference/generation/transcribe_audio_transcribe_post.mdx

@@ -0,0 +1,16 @@
+---
+title: Transcribe Audio
+description: Transcribe audio file to text.
+full: true
+_openapi:
+  method: POST
+  toc: []
+  structuredData:
+    headings: []
+    contents:
+      - content: Transcribe audio file to text.
+---
+
+{/* This file was generated by Fumadocs. Do not edit this file directly. Any changes should be made by running the generation command again. */}
+
+<APIPage document={"./openapi.json"} operations={[{"path":"/transcribe","method":"post"}]} />

docs/content/docs/api-reference/history/delete_generation_history__generation_id__delete.mdx

@@ -0,0 +1,16 @@
+---
+title: Delete Generation
+description: Delete a generation.
+full: true
+_openapi:
+  method: DELETE
+  toc: []
+  structuredData:
+    headings: []
+    contents:
+      - content: Delete a generation.
+---
+
+{/* This file was generated by Fumadocs. Do not edit this file directly. Any changes should be made by running the generation command again. */}
+
+<APIPage document={"./openapi.json"} operations={[{"path":"/history/{generation_id}","method":"delete"}]} />

docs/content/docs/api-reference/history/get_generation_history__generation_id__get.mdx

@@ -0,0 +1,16 @@
+---
+title: Get Generation
+description: Get a generation by ID.
+full: true
+_openapi:
+  method: GET
+  toc: []
+  structuredData:
+    headings: []
+    contents:
+      - content: Get a generation by ID.
+---
+
+{/* This file was generated by Fumadocs. Do not edit this file directly. Any changes should be made by running the generation command again. */}
+
+<APIPage document={"./openapi.json"} operations={[{"path":"/history/{generation_id}","method":"get"}]} />

docs/content/docs/api-reference/history/get_stats_history_stats_get.mdx

@@ -0,0 +1,16 @@
+---
+title: Get Stats
+description: Get generation statistics.
+full: true
+_openapi:
+  method: GET
+  toc: []
+  structuredData:
+    headings: []
+    contents:
+      - content: Get generation statistics.
+---
+
+{/* This file was generated by Fumadocs. Do not edit this file directly. Any changes should be made by running the generation command again. */}
+
+<APIPage document={"./openapi.json"} operations={[{"path":"/history/stats","method":"get"}]} />

docs/content/docs/api-reference/history/list_history_history_get.mdx

@@ -0,0 +1,16 @@
+---
+title: List History
+description: List generation history with optional filters.
+full: true
+_openapi:
+  method: GET
+  toc: []
+  structuredData:
+    headings: []
+    contents:
+      - content: List generation history with optional filters.
+---
+
+{/* This file was generated by Fumadocs. Do not edit this file directly. Any changes should be made by running the generation command again. */}
+
+<APIPage document={"./openapi.json"} operations={[{"path":"/history","method":"get"}]} />

docs/content/docs/api-reference/history/meta.json

@@ -0,0 +1,9 @@
+{
+  "title": "History",
+  "pages": [
+    "list_history_history_get",
+    "get_generation_history__generation_id__get",
+    "delete_generation_history__generation_id__delete",
+    "get_stats_history_stats_get"
+  ]
+}

docs/content/docs/api-reference/meta.json

@@ -0,0 +1,5 @@
+{
+  "title": "API Reference",
+  "defaultOpen": true,
+  "pages": ["general", "profiles", "generation", "history", "models"]
+}

docs/content/docs/api-reference/models/get_model_progress_models_progress__model_name__get.mdx

@@ -0,0 +1,16 @@
+---
+title: Get Model Progress
+description: Get model download progress via Server-Sent Events.
+full: true
+_openapi:
+  method: GET
+  toc: []
+  structuredData:
+    headings: []
+    contents:
+      - content: Get model download progress via Server-Sent Events.
+---
+
+{/* This file was generated by Fumadocs. Do not edit this file directly. Any changes should be made by running the generation command again. */}
+
+<APIPage document={"./openapi.json"} operations={[{"path":"/models/progress/{model_name}","method":"get"}]} />

docs/content/docs/api-reference/models/get_model_status_models_status_get.mdx

@@ -0,0 +1,16 @@
+---
+title: Get Model Status
+description: Get status of all available models.
+full: true
+_openapi:
+  method: GET
+  toc: []
+  structuredData:
+    headings: []
+    contents:
+      - content: Get status of all available models.
+---
+
+{/* This file was generated by Fumadocs. Do not edit this file directly. Any changes should be made by running the generation command again. */}
+
+<APIPage document={"./openapi.json"} operations={[{"path":"/models/status","method":"get"}]} />

docs/content/docs/api-reference/models/load_model_models_load_post.mdx

@@ -0,0 +1,16 @@
+---
+title: Load Model
+description: Manually load TTS model.
+full: true
+_openapi:
+  method: POST
+  toc: []
+  structuredData:
+    headings: []
+    contents:
+      - content: Manually load TTS model.
+---
+
+{/* This file was generated by Fumadocs. Do not edit this file directly. Any changes should be made by running the generation command again. */}
+
+<APIPage document={"./openapi.json"} operations={[{"path":"/models/load","method":"post"}]} />

docs/content/docs/api-reference/models/meta.json

@@ -0,0 +1,10 @@
+{
+  "title": "Models",
+  "pages": [
+    "get_model_status_models_status_get",
+    "load_model_models_load_post",
+    "unload_model_models_unload_post",
+    "trigger_model_download_models_download_post",
+    "get_model_progress_models_progress__model_name__get"
+  ]
+}

docs/content/docs/api-reference/models/trigger_model_download_models_download_post.mdx

@@ -0,0 +1,16 @@
+---
+title: Trigger Model Download
+description: Trigger download of a specific model.
+full: true
+_openapi:
+  method: POST
+  toc: []
+  structuredData:
+    headings: []
+    contents:
+      - content: Trigger download of a specific model.
+---
+
+{/* This file was generated by Fumadocs. Do not edit this file directly. Any changes should be made by running the generation command again. */}
+
+<APIPage document={"./openapi.json"} operations={[{"path":"/models/download","method":"post"}]} />

docs/content/docs/api-reference/models/unload_model_models_unload_post.mdx

@@ -0,0 +1,16 @@
+---
+title: Unload Model
+description: Unload TTS model to free memory.
+full: true
+_openapi:
+  method: POST
+  toc: []
+  structuredData:
+    headings: []
+    contents:
+      - content: Unload TTS model to free memory.
+---
+
+{/* This file was generated by Fumadocs. Do not edit this file directly. Any changes should be made by running the generation command again. */}
+
+<APIPage document={"./openapi.json"} operations={[{"path":"/models/unload","method":"post"}]} />

docs/content/docs/api-reference/profiles/add_profile_sample_profiles__profile_id__samples_post.mdx

@@ -0,0 +1,16 @@
+---
+title: Add Profile Sample
+description: Add a sample to a voice profile.
+full: true
+_openapi:
+  method: POST
+  toc: []
+  structuredData:
+    headings: []
+    contents:
+      - content: Add a sample to a voice profile.
+---
+
+{/* This file was generated by Fumadocs. Do not edit this file directly. Any changes should be made by running the generation command again. */}
+
+<APIPage document={"./openapi.json"} operations={[{"path":"/profiles/{profile_id}/samples","method":"post"}]} />

docs/content/docs/api-reference/profiles/create_profile_profiles_post.mdx

@@ -0,0 +1,16 @@
+---
+title: Create Profile
+description: Create a new voice profile.
+full: true
+_openapi:
+  method: POST
+  toc: []
+  structuredData:
+    headings: []
+    contents:
+      - content: Create a new voice profile.
+---
+
+{/* This file was generated by Fumadocs. Do not edit this file directly. Any changes should be made by running the generation command again. */}
+
+<APIPage document={"./openapi.json"} operations={[{"path":"/profiles","method":"post"}]} />

docs/content/docs/api-reference/profiles/delete_profile_profiles__profile_id__delete.mdx

@@ -0,0 +1,16 @@
+---
+title: Delete Profile
+description: Delete a voice profile.
+full: true
+_openapi:
+  method: DELETE
+  toc: []
+  structuredData:
+    headings: []
+    contents:
+      - content: Delete a voice profile.
+---
+
+{/* This file was generated by Fumadocs. Do not edit this file directly. Any changes should be made by running the generation command again. */}
+
+<APIPage document={"./openapi.json"} operations={[{"path":"/profiles/{profile_id}","method":"delete"}]} />

docs/content/docs/api-reference/profiles/delete_profile_sample_profiles_samples__sample_id__delete.mdx

@@ -0,0 +1,16 @@
+---
+title: Delete Profile Sample
+description: Delete a profile sample.
+full: true
+_openapi:
+  method: DELETE
+  toc: []
+  structuredData:
+    headings: []
+    contents:
+      - content: Delete a profile sample.
+---
+
+{/* This file was generated by Fumadocs. Do not edit this file directly. Any changes should be made by running the generation command again. */}
+
+<APIPage document={"./openapi.json"} operations={[{"path":"/profiles/samples/{sample_id}","method":"delete"}]} />

docs/content/docs/api-reference/profiles/get_profile_profiles__profile_id__get.mdx

@@ -0,0 +1,16 @@
+---
+title: Get Profile
+description: Get a voice profile by ID.
+full: true
+_openapi:
+  method: GET
+  toc: []
+  structuredData:
+    headings: []
+    contents:
+      - content: Get a voice profile by ID.
+---
+
+{/* This file was generated by Fumadocs. Do not edit this file directly. Any changes should be made by running the generation command again. */}
+
+<APIPage document={"./openapi.json"} operations={[{"path":"/profiles/{profile_id}","method":"get"}]} />

docs/content/docs/api-reference/profiles/get_profile_samples_profiles__profile_id__samples_get.mdx

@@ -0,0 +1,16 @@
+---
+title: Get Profile Samples
+description: Get all samples for a profile.
+full: true
+_openapi:
+  method: GET
+  toc: []
+  structuredData:
+    headings: []
+    contents:
+      - content: Get all samples for a profile.
+---
+
+{/* This file was generated by Fumadocs. Do not edit this file directly. Any changes should be made by running the generation command again. */}
+
+<APIPage document={"./openapi.json"} operations={[{"path":"/profiles/{profile_id}/samples","method":"get"}]} />

docs/content/docs/api-reference/profiles/list_profiles_profiles_get.mdx

@@ -0,0 +1,16 @@
+---
+title: List Profiles
+description: List all voice profiles.
+full: true
+_openapi:
+  method: GET
+  toc: []
+  structuredData:
+    headings: []
+    contents:
+      - content: List all voice profiles.
+---
+
+{/* This file was generated by Fumadocs. Do not edit this file directly. Any changes should be made by running the generation command again. */}
+
+<APIPage document={"./openapi.json"} operations={[{"path":"/profiles","method":"get"}]} />

docs/content/docs/api-reference/profiles/meta.json

@@ -0,0 +1,13 @@
+{
+  "title": "Profiles",
+  "pages": [
+    "list_profiles_profiles_get",
+    "create_profile_profiles_post",
+    "get_profile_profiles__profile_id__get",
+    "update_profile_profiles__profile_id__put",
+    "delete_profile_profiles__profile_id__delete",
+    "get_profile_samples_profiles__profile_id__samples_get",
+    "add_profile_sample_profiles__profile_id__samples_post",
+    "delete_profile_sample_profiles_samples__sample_id__delete"
+  ]
+}

docs/content/docs/api-reference/profiles/update_profile_profiles__profile_id__put.mdx

@@ -0,0 +1,16 @@
+---
+title: Update Profile
+description: Update a voice profile.
+full: true
+_openapi:
+  method: PUT
+  toc: []
+  structuredData:
+    headings: []
+    contents:
+      - content: Update a voice profile.
+---
+
+{/* This file was generated by Fumadocs. Do not edit this file directly. Any changes should be made by running the generation command again. */}
+
+<APIPage document={"./openapi.json"} operations={[{"path":"/profiles/{profile_id}","method":"put"}]} />

docs/content/docs/developer/architecture.mdx

@@ -26,19 +26,22 @@ These two layers communicate via HTTP, with the frontend making API requests to
 
 ### Component Structure
 
-```
-app/src/
-├── components/       # React components
-│   ├── profiles/    # Voice profile UI
-│   ├── generation/  # Speech generation UI
-│   ├── stories/     # Timeline editor
-│   └── shared/      # Reusable components
-├── lib/             # Utilities
-│   ├── api/         # Generated API client
-│   └── utils/       # Helper functions
-├── hooks/           # React hooks
-└── stores/          # Zustand state stores
-```
+<Files>
+  <Folder name="app/src" defaultOpen>
+    <Folder name="components">
+      <File name="profiles/" />
+      <File name="generation/" />
+      <File name="stories/" />
+      <File name="shared/" />
+    </Folder>
+    <Folder name="lib">
+      <File name="api/" />
+      <File name="utils/" />
+    </Folder>
+    <Folder name="hooks" />
+    <Folder name="stores" />
+  </Folder>
+</Files>
 
 ### State Management
 
@@ -64,16 +67,69 @@ const useProfileStore = create((set) => ({
 
 ### API Structure
 
-```python
-# main.py - API routes
-@app.post("/generate")
-async def generate_speech(request: GenerateRequest):
-    # 1. Validate request
-    # 2. Load voice profile
-    # 3. Generate audio with TTS
-    # 4. Save to database
-    # 5. Return response
-```
+<Files>
+  <Folder name="backend" defaultOpen>
+    <File name="app.py" />
+    <File name="main.py" />
+    <File name="config.py" />
+    <File name="models.py" />
+    <File name="server.py" />
+    <Folder name="routes">
+      <File name="profiles.py" />
+      <File name="generate.py" />
+      <File name="history.py" />
+      <File name="..." />
+    </Folder>
+    <Folder name="services">
+      <File name="generation.py" />
+      <File name="task_queue.py" />
+      <File name="..." />
+    </Folder>
+    <Folder name="backends">
+      <File name="__init__.py" />
+      <File name="base.py" />
+      <File name="..." />
+    </Folder>
+    <Folder name="database">
+      <File name="models.py" />
+      <File name="session.py" />
+    </Folder>
+    <Folder name="utils">
+      <File name="audio.py" />
+      <File name="effects.py" />
+      <File name="..." />
+    </Folder>
+  </Folder>
+</Files>
+
+### Request Flow
+
+HTTP request → **routes/** (validate input, parse params) → **services/** (business logic, orchestration) → **backends/** (TTS/STT inference) → **utils/** (audio processing)
+
+Route handlers are intentionally thin. They validate input, delegate to a service function, and format the response. All business logic lives in `services/`.
+
+### Key Modules
+
+- **app.py** — FastAPI app factory, CORS, lifecycle events
+- **main.py** — Entry point (imports app, runs uvicorn)
+- **server.py** — Tauri sidecar launcher, parent-pid watchdog
+- **services/generation.py** — Single function handling all generation modes (generate, retry, regenerate)
+- **services/task_queue.py** — Serial generation queue for GPU inference
+- **backends/__init__.py** — Protocol definitions and backend factory
+- **backends/base.py** — Shared utilities across all engine implementations
+
+### Backend Selection
+
+The server detects the best inference backend at startup:
+
+| Platform | Backend | Acceleration |
+|----------|---------|-------------|
+| macOS (Apple Silicon) | MLX | Metal / Neural Engine |
+| Windows / Linux (NVIDIA) | PyTorch | CUDA |
+| Linux (AMD) | PyTorch | ROCm |
+| Intel Arc | PyTorch | IPEX / XPU |
+| Windows (any GPU) | PyTorch | DirectML |
+| Any | PyTorch | CPU fallback |
 
 ### Data Model
 
@@ -89,11 +145,13 @@ The database uses three main tables:
 
 ### Rust Backend
 
-```rust
-// Sidecar process management
-// File system access
-// Native integrations
-```
+<Files>
+  <Folder name="tauri/src-tauri" defaultOpen>
+    <File name="Cargo.toml" />
+    <File name="src/" />
+    <Folder name="binaries" />
+  </Folder>
+</Files>
 
 ### Responsibilities
 
@@ -196,11 +254,11 @@ When a user generates speech, the data flows through the following stages:
 
 ## Next Steps
 
-<CardGroup cols={2}>
-  <Card title="Development Setup" icon="code" href="/development/setup">
+<Cards>
+  <Card title="Development Setup" href="/development/setup">
     Set up your dev environment
   </Card>
-  <Card title="Contributing" icon="code-pull-request" href="/development/contributing">
+  <Card title="Contributing" href="/development/contributing">
     Contribute to Voicebox
   </Card>
-</CardGroup>
+</Cards>

docs/content/docs/developer/autoupdater.mdx

@@ -0,0 +1,226 @@
+---
+title: "Auto-Updater"
+description: "How Voicebox automatic updates work"
+---
+
+## Overview
+
+Voicebox uses Tauri's built-in auto-updater to deliver signed updates to users. The system verifies updates cryptographically before installation.
+
+## How It Works
+
+When Voicebox launches (in production Tauri builds only), it checks GitHub Releases for a `latest.json` manifest. If a newer version is available:
+
+1. **Notification** - An update banner appears at the top of the app
+2. **Download** - User clicks "Install Now" to download the update package
+3. **Verification** - The downloaded package is cryptographically verified using the public key embedded in `tauri.conf.json`
+4. **Installation** - After verification, the update is installed
+5. **Restart** - The app restarts automatically with the new version
+
+Users can also check for updates manually via **Settings → Check for Updates**.
+
+## Configuration
+
+The updater is configured in `tauri/src-tauri/tauri.conf.json`:
+
+```json
+{
+  "plugins": {
+    "updater": {
+      "active": true,
+      "dialog": false,
+      "endpoints": [
+        "https://github.com/jamiepine/voicebox/releases/latest/download/latest.json"
+      ],
+      "pubkey": "PASTE_PUBLIC_KEY_CONTENT_HERE"
+    }
+  }
+}
+```
+
+**Key settings:**
+- `endpoints` - URL to the `latest.json` manifest (checked on app startup)
+- `pubkey` - Public key for verifying update signatures
+- `dialog` - Set to `false` (we use custom UI instead of Tauri's built-in dialog)
+
+## Release Manifest
+
+The `latest.json` file defines available updates per platform:
+
+```json
+{
+  "version": "0.2.0",
+  "notes": "Bug fixes and improvements",
+  "pub_date": "2026-01-25T12:00:00Z",
+  "platforms": {
+    "darwin-aarch64": {
+      "signature": "base64_encoded_signature",
+      "url": "https://github.com/jamiepine/voicebox/releases/download/v0.2.0/voicebox_0.2.0_aarch64.app.tar.gz"
+    },
+    "darwin-x86_64": {
+      "signature": "base64_encoded_signature",
+      "url": "https://github.com/jamiepine/voicebox/releases/download/v0.2.0/voicebox_0.2.0_x64.app.tar.gz"
+    },
+    "linux-x86_64": {
+      "signature": "base64_encoded_signature",
+      "url": "https://github.com/jamiepine/voicebox/releases/download/v0.2.0/voicebox_0.2.0_amd64.AppImage"
+    },
+    "windows-x86_64": {
+      "signature": "base64_encoded_signature",
+      "url": "https://github.com/jamiepine/voicebox/releases/download/v0.2.0/voicebox_0.2.0_x64_en-US.msi"
+    }
+  }
+}
+```
+
+## Signing
+
+Updates must be cryptographically signed to be accepted. The signing process:
+
+1. **Generate keys** (one-time setup):
+   ```bash
+   bun tauri signer generate -w ~/.tauri/voicebox.key
+   ```
+   This creates:
+   - Private key: `~/.tauri/voicebox.key` (stored in GitHub Secrets, never committed)
+   - Public key: `~/.tauri/voicebox.key.pub` (pasted into `tauri.conf.json`)
+
+2. **Build with signing** (GitHub Actions handles this):
+   - Set `TAURI_SIGNING_PRIVATE_KEY` environment variable
+   - Tauri signs the update package during build
+   - Generates `.sig` signature file alongside the installer
+
+3. **Verification** - The updater compares the signature against the public key before installing
+
+## GitHub Actions Workflow
+
+The release workflow (`.github/workflows/release.yml`) automatically:
+
+- Builds signed releases for macOS, Windows, and Linux
+- Creates the `latest.json` manifest with signatures
+- Uploads everything to the GitHub Release
+
+Triggered by pushing a git tag:
+
+```bash
+git tag v0.2.0 && git push --tags
+```
+
+## Environment Variables
+
+GitHub Actions needs these secrets set:
+
+- `TAURI_SIGNING_PRIVATE_KEY` - Content of `~/.tauri/voicebox.key`
+- `TAURI_SIGNING_PRIVATE_KEY_PASSWORD` - Password for the key (if set)
+
+## Security
+
+<Callout type="warn">
+  **Critical:** Never commit the private key. Store it only in GitHub Secrets. The public key in `tauri.conf.json` is safe to commit and distribute.
+</Callout>
+
+- Updates are cryptographically signed using Ed25519
+- HTTP endpoints are blocked (HTTPS only)
+- Signature verification happens before installation
+- Failed verification aborts the update
+
+## Troubleshooting
+
+### "Invalid signature" error
+- Public key in `tauri.conf.json` doesn't match the private key used to sign
+- Signature file wasn't uploaded to the release
+
+### "No update available" when one exists
+- `latest.json` version isn't higher than current version
+- Wrong endpoint URL in configuration
+- Manifest hasn't propagated to GitHub's CDN yet
+
+### Update check fails in dev mode
+The updater only works in production Tauri builds. It doesn't run during `just dev` or web mode.
+
+### Build fails with signing error
+- GitHub Secrets aren't set correctly
+- Private key file is missing or corrupted
+- Key format is wrong (should start with `dW50cnVzdGVkIGNvbW1lbnQ6`)
+
+## CUDA Backend Updates
+
+The CUDA-enabled backend is distributed separately from the main app due to its large size (~2.43 GB). Unlike the Tauri auto-updater, this uses a custom download system built into the Python backend.
+
+**Size comparison:**
+- Standard app bundle: ~410 MB
+- CUDA backend binary: ~2.43 GB (6× larger)
+
+### Why Split?
+
+GitHub Releases has file size limits, and the CUDA-enabled `voicebox-server` binary is too large to include in the main Tauri bundle. Instead:
+
+- **Standard release**: Includes CPU-only backend (~50MB)
+- **CUDA release**: Split into multiple parts and downloaded on-demand by users who need GPU acceleration
+
+### Download Process
+
+When a user clicks "Enable CUDA" in the settings:
+
+1. **Manifest Fetch** - Backend fetches `{version}/voicebox-server-cuda.manifest` from GitHub Releases
+2. **Part Download** - Downloads each split part sequentially (e.g., `voicebox-server-cuda.part1`, `.part2`, etc.)
+3. **Assembly** - Concatenates parts into a single binary
+4. **Verification** - SHA-256 checksum verification (optional, if `.sha256` file exists)
+5. **Placement** - Binary moved to `{data_dir}/backends/voicebox-server-cuda.exe`
+6. **Restart** - Backend must restart to use the CUDA binary
+
+### Auto-Update on Startup
+
+On server startup, `check_and_update_cuda_binary()` compares the installed CUDA binary version with the app version:
+
+```python
+# backend/services/cuda.py
+cuda_version = get_cuda_binary_version()  # runs `voicebox-server-cuda --version`
+current_version = __version__
+
+if cuda_version != current_version:
+    await download_cuda_binary()  # Auto-download in background
+```
+
+If versions mismatch, the backend automatically downloads the matching CUDA binary version without user intervention.
+
+### Storage Location
+
+Downloaded CUDA binaries are stored in the app's data directory:
+
+```
+{data_dir}/
+  backends/
+    voicebox-server-cuda.exe    # Windows
+    voicebox-server-cuda        # macOS/Linux
+```
+
+### API Endpoints
+
+| Endpoint | Method | Description |
+|----------|--------|-------------|
+| `/backend/cuda-status` | GET | Check if CUDA binary available/active |
+| `/backend/download-cuda` | POST | Start download |
+| `/backend/cuda-progress` | GET | SSE stream of download progress |
+| `/backend/cuda` | DELETE | Remove downloaded binary |
+
+### Progress Tracking
+
+Downloads report progress via Server-Sent Events (SSE):
+
+```
+GET /backend/cuda-progress
+
+event: progress
+data: {"current": 52428800, "total": 104857600, "filename": "Downloading CUDA backend (2/4)", "status": "downloading"}
+```
+
+The frontend subscribes to this endpoint to show real-time download progress in the UI.
+
+### Release Artifacts
+
+For each release, these CUDA-related files are uploaded to GitHub:
+
+- `voicebox-server-cuda.manifest` - List of split part filenames
+- `voicebox-server-cuda.part1` through `voicebox-server-cuda.partN` - Binary chunks
+- `voicebox-server-cuda.sha256` - SHA-256 checksum for integrity verification

docs/content/docs/developer/building.mdx

@@ -0,0 +1,190 @@
+---
+title: "Building"
+description: "How Voicebox is built for production"
+---
+
+## Overview
+
+Voicebox uses a two-stage build process:
+
+1. **Python Server Binary** — PyInstaller bundles the FastAPI backend into a standalone executable
+2. **Tauri Desktop App** — Bundles the React frontend, Rust wrapper, and Python server as a sidecar
+
+## Build Commands
+
+```bash
+just build          # Build everything (server + Tauri)
+just build-server   # Build Python server binary only
+just build-tauri    # Build Tauri app only
+```
+
+## Server Binary Build
+
+### Build Script
+
+`scripts/build-server.sh` orchestrates the build:
+
+```bash
+# Determine platform (e.g., x86_64-apple-darwin)
+PLATFORM=$(rustc --print host-tuple)
+
+# Run PyInstaller via build_binary.py
+cd backend
+python build_binary.py
+
+# Copy to Tauri's binaries directory
+cp dist/voicebox-server ../tauri/src-tauri/binaries/voicebox-server-${PLATFORM}
+```
+
+### PyInstaller Configuration
+
+`backend/build_binary.py` contains the PyInstaller configuration:
+
+**Entry Point:** Uses `server.py` (not `main.py`) for Tauri sidecar support
+
+**Key Options:**
+- `--onefile` — Single executable
+- `--hidden-import` — Explicitly import modules PyInstaller can't detect
+- `--collect-all` — Bundle data files and native libraries for packages like `mlx`, `zipvoice`
+- `--exclude-module` — Strip NVIDIA packages from CPU builds
+
+**Platform-Specific Logic:**
+
+```python
+# Apple Silicon — include MLX backend
+if is_apple_silicon() and not cuda:
+    args.extend([
+        "--hidden-import", "mlx",
+        "--collect-all", "mlx",        # Bundles .dylib and .metallib files
+    ])
+
+# CUDA builds — include torch.cuda
+if cuda:
+    args.extend(["--hidden-import", "torch.cuda"])
+
+# CPU builds — exclude NVIDIA packages to save ~3GB
+else:
+    for pkg in ["nvidia", "nvidia.cublas", "nvidia.cudnn", ...]:
+        args.extend(["--exclude-module", pkg])
+```
+
+**Environment Variable:**
+
+```bash
+export QWEN_TTS_PATH=~/path/to/Qwen3-TTS  # Use local Qwen3-TTS source
+```
+
+### CUDA Binary
+
+The CUDA-enabled server is built separately due to size (~2.43 GB vs ~410 MB CPU version):
+
+```bash
+cd backend
+python build_binary.py --cuda
+```
+
+The resulting binary is too large for GitHub Releases, so it's split into parts for distribution (see Auto-Updater docs for the download mechanism).
+
+## Tauri App Build
+
+Tauri bundles everything together:
+
+```bash
+cd tauri
+bun run tauri build
+```
+
+**What happens:**
+1. Vite builds the React frontend
+2. Rust compiles the Tauri wrapper
+3. Sidecar binary is copied from `src-tauri/binaries/`
+4. Platform-specific installer created (DMG, MSI, AppImage)
+
+**Output locations:**
+
+<Files>
+  <Folder name="tauri/src-tauri/target/release/bundle" defaultOpen>
+    <File name="dmg/" />
+    <File name="msi/" />
+    <File name="nsis/" />
+    <File name="appimage/" />
+  </Folder>
+</Files>
+
+### Sidecar Configuration
+
+The server binary is declared as an external binary in `tauri.conf.json`:
+
+```json
+{
+  "tauri": {
+    "bundle": {
+      "externalBin": ["binaries/voicebox-server"]
+    }
+  }
+}
+```
+
+Tauri looks for `voicebox-server-${PLATFORM}` in `src-tauri/binaries/` and bundles it.
+
+## GitHub Actions Release
+
+`.github/workflows/release.yml` automates the full build:
+
+### Matrix Strategy
+
+| Platform | Target | Backend | Notes |
+|----------|--------|---------|-------|
+| macos-latest | aarch64-apple-darwin | MLX | Apple Silicon native |
+| macos-15-intel | x86_64-apple-darwin | PyTorch | Intel Macs |
+| windows-latest | x86_64-pc-windows-msvc | PyTorch | Windows with CUDA optional |
+
+### Build Steps
+
+1. **Setup** — Python, Rust, Bun, dependencies
+2. **Build Server** — `build-server.sh` (Unix) or `build_binary.py` (Windows)
+3. **Build Tauri** — `tauri-action` with signing keys
+4. **Upload** — Release artifacts and `latest.json`
+
+### Code Signing
+
+**macOS:**
+- Apple Developer certificate imported from secrets
+- Notarization via App Store Connect API
+
+**Windows:**
+- Tauri handles signing via `TAURI_SIGNING_PRIVATE_KEY`
+
+### CUDA Binary (Separate Job)
+
+The `build-cuda-windows` job runs separately:
+
+1. Install PyTorch with CUDA 12.1
+2. Build with `build_binary.py --cuda`
+3. Split binary with `scripts/split_binary.py`
+4. Upload parts as release artifacts
+
+This binary is downloaded on-demand by users who enable CUDA in settings.
+
+## Troubleshooting
+
+<AccordionGroup>
+  <Accordion title="Binary not found in dist/">
+    PyInstaller failed to create the output. Check:
+    - Python venv is activated
+    - All dependencies installed: `pip install -r requirements.txt`
+    - PyInstaller installed: `pip install pyinstaller`
+  </Accordion>
+
+  <Accordion title="MLX/Metal libraries missing in bundle">
+    macOS Apple Silicon builds need `--collect-all mlx` to include `.dylib` and `.metallib` files, not just `--collect-data`.
+  </Accordion>
+
+  <Accordion title="CUDA DLLs bloating CPU build">
+    If building CPU version but CUDA torch is installed locally, the script auto-detects and swaps to CPU torch temporarily, then restores CUDA torch after.
+  </Accordion>
+
+  <Accordion title="Tauri can't find sidecar">
+    Ensure binary exists at `tauri/src-tauri/binaries/voicebox-server-${PLATFORM}` before running Tauri build.
+  </Accordion>
+</AccordionGroup>

docs/content/docs/developer/contributing.mdx

@@ -23,20 +23,20 @@ Before you start contributing, make sure you have:
 
 ## Ways to Contribute
 
-<CardGroup cols={2}>
-  <Card title="Report Bugs" icon="bug">
+<Cards>
+  <Card title="Report Bugs">
     Found a bug? Open an issue with reproduction steps
   </Card>
-  <Card title="Request Features" icon="lightbulb">
+  <Card title="Request Features">
     Have an idea? Start a discussion or open an issue
   </Card>
-  <Card title="Improve Docs" icon="book">
+  <Card title="Improve Docs">
     Fix typos, add examples, or clarify instructions
   </Card>
-  <Card title="Write Code" icon="code">
+  <Card title="Write Code">
     Fix bugs, add features, or optimize performance
   </Card>
-</CardGroup>
+</Cards>
 
 ## Development Workflow
 
@@ -164,27 +164,28 @@ When creating a pull request:
 
 ## Project Structure
 
-Understanding the codebase:
-
-```
-voicebox/
-├── app/              # Shared React frontend
-│   ├── src/
-│   │   ├── components/   # UI components
-│   │   ├── lib/          # Utilities and API client
-│   │   ├── hooks/        # React hooks
-│   │   └── stores/       # Zustand state stores
-├── backend/          # Python FastAPI server
-│   ├── main.py       # API routes
-│   ├── tts.py        # Voice synthesis logic
-│   ├── database.py   # SQLite operations
-│   └── models.py     # Pydantic models
-├── tauri/            # Desktop app wrapper
-│   └── src-tauri/    # Rust backend
-├── web/              # Web deployment
-├── landing/          # Marketing website
-└── scripts/          # Build & release scripts
-```
+<Files>
+  <Folder name="voicebox" defaultOpen>
+    <Folder name="app/src">
+      <File name="components/" />
+      <File name="lib/" />
+      <File name="hooks/" />
+      <File name="stores/" />
+    </Folder>
+    <Folder name="backend">
+      <File name="main.py" />
+      <File name="tts.py" />
+      <File name="database.py" />
+      <File name="models.py" />
+    </Folder>
+    <Folder name="tauri">
+      <File name="src-tauri/" />
+    </Folder>
+    <File name="web/" />
+    <File name="landing/" />
+    <File name="scripts/" />
+  </Folder>
+</Files>
 
 ## Areas for Contribution
 
@@ -259,7 +260,11 @@ When adding new API endpoints:
   </Step>
 
   <Step title="Update Docs">
-    Add documentation in `/docs/api/`
+    The API documentation is automatically generated from the OpenAPI schema. Ensure your endpoint has proper docstrings and type hints, then regenerate the docs:
+    
+    ```bash
+    bun run generate:api
+    ```
   </Step>
 </Steps>
 

docs/content/docs/developer/effects-pipeline.mdx

@@ -0,0 +1,257 @@
+---
+title: "Effects Pipeline"
+description: "Audio post-processing effects and generation versioning"
+---
+
+The effects pipeline provides professional-grade DSP audio processing using Spotify's Pedalboard library. Each generation can have multiple versions with different effect chains applied.
+
+## Overview
+
+**Key concepts:**
+
+- **Effects Chain** — JSON-serializable list of effect configurations applied sequentially
+- **Generation Version** — A processed variant of a generation with its own audio file and effects chain
+- **Effect Preset** — Saved effects chain configuration (built-in or user-created)
+- **Clean Version** — The original unprocessed generation audio
+
+**Flow:**
+
+1. TTS Generation creates clean audio
+2. Effects Chain processes the audio
+3. Processed Version is saved as a new generation version
+
+Each generation maintains a clean version (original) plus any number of processed versions with different effect chains applied.
+
+## Effect Types
+
+The following effect types are available, each with configurable parameters:
+
+### Chorus / Flanger
+
+Modulated delay effect. Short centre_delay_ms gives flanger; longer gives chorus.
+
+**Parameters:**
+- rate_hz: LFO speed in Hz (range: 0.01 to 20, default: 1.0)
+- depth: Modulation depth (range: 0.0 to 1.0, default: 0.5)
+- feedback: Feedback amount (range: 0.0 to 0.95, default: 0.0)
+- centre_delay_ms: Centre delay in milliseconds (range: 0.5 to 50, default: 7.0)
+- mix: Wet/dry mix (range: 0.0 to 1.0, default: 0.5)
+
+### Reverb
+
+Room reverb effect.
+
+**Parameters:**
+- room_size: Room size (range: 0.0 to 1.0, default: 0.5)
+- damping: High frequency damping (range: 0.0 to 1.0, default: 0.5)
+- wet_level: Wet level (range: 0.0 to 1.0, default: 0.33)
+- dry_level: Dry level (range: 0.0 to 1.0, default: 0.4)
+- width: Stereo width (range: 0.0 to 1.0, default: 1.0)
+
+### Delay
+
+Echo / delay line.
+
+**Parameters:**
+- delay_seconds: Delay time in seconds (range: 0.01 to 2.0, default: 0.3)
+- feedback: Feedback amount (range: 0.0 to 0.95, default: 0.3)
+- mix: Wet/dry mix (range: 0.0 to 1.0, default: 0.3)
+
+### Compressor
+
+Dynamic range compression for consistent loudness.
+
+**Parameters:**
+- threshold_db: Threshold in dB (range: -60 to 0, default: -20.0)
+- ratio: Compression ratio (range: 1.0 to 20.0, default: 4.0)
+- attack_ms: Attack time in ms (range: 0.1 to 100, default: 10.0)
+- release_ms: Release time in ms (range: 10 to 1000, default: 100.0)
+
+### Gain
+
+Volume adjustment in decibels.
+
+**Parameters:**
+- gain_db: Gain in dB (range: -40 to 40, default: 0.0)
+
+### High-Pass Filter
+
+Removes frequencies below the cutoff.
+
+**Parameters:**
+- cutoff_frequency_hz: Cutoff frequency in Hz (range: 20 to 8000, default: 80.0)
+
+### Low-Pass Filter
+
+Removes frequencies above the cutoff.
+
+**Parameters:**
+- cutoff_frequency_hz: Cutoff frequency in Hz (range: 200 to 20000, default: 8000.0)
+
+### Pitch Shift
+
+Shift pitch up or down by semitones.
+
+**Parameters:**
+- semitones: Semitones to shift (range: -12 to 12, default: 0.0)
+
+## Generation Versions
+
+Each generation starts with a clean version (no effects). Users can create processed versions by applying effect chains.
+
+**Version properties:**
+- id — Unique version identifier
+- label — User-defined name (e.g., "robotic", "with reverb")
+- audio_path — Path to the processed audio file
+- effects_chain — JSON array of effect configurations
+- source_version_id — Which version this was derived from
+- is_default — Whether this is the default audio for the generation
+
+**File storage:**
+
+<Files>
+  <Folder name="data/generations" defaultOpen>
+    <File name="{generation_id}.wav" />
+    <File name="{generation_id}_{version_id}.wav" />
+  </Folder>
+</Files>
+
+**Default version behavior:**
+- One version per generation is marked as default
+- The generation's audio_path always points to the default version's audio
+- Deleting the default version automatically promotes another version
+
+## Effect Presets
+
+Presets are saved effects chains that can be reused across generations.
+
+**Built-in presets:**
+
+- **Robotic**: Metallic robotic voice using chorus (flanger-style)
+- **Radio**: Thin AM-radio voice with band-pass filtering and light compression
+- **Echo Chamber**: Spacious reverb with trailing echo
+- **Deep Voice**: Lower pitch with added warmth using pitch shift and compression
+
+**User presets:**
+- Created via the effects UI
+- Stored in the database (SQLite)
+- Cannot modify/delete built-in presets
+- Used to quickly apply favorite effect combinations
+
+## API Endpoints
+
+### Effects Management
+
+| Endpoint | Method | Description |
+|----------|--------|-------------|
+| /effects/available | GET | List all effect types with parameter definitions |
+| /effects/presets | GET | List all presets (built-in + user) |
+| /effects/presets | POST | Create a new user preset |
+| /effects/presets/:id | GET | Get a specific preset |
+| /effects/presets/:id | PUT | Update a user preset |
+| /effects/presets/:id | DELETE | Delete a user preset |
+| /effects/preview/:generation_id | POST | Preview effects on a generation (returns audio stream) |
+
+### Generation Versions
+
+| Endpoint | Method | Description |
+|----------|--------|-------------|
+| /generations/:id/versions | GET | List all versions for a generation |
+| /generations/:id/versions/apply-effects | POST | Apply effects chain, create new version |
+| /generations/:id/versions/:version_id/set-default | PUT | Set a version as default |
+| /generations/:id/versions/:version_id | DELETE | Delete a version |
+
+### Request Body: Apply Effects
+
+Request body for applying effects:
+
+- effects_chain: Array of effect objects
+- label: Version label (e.g., "with reverb")
+- set_as_default: Whether to set as default
+- source_version_id: Source version ID (optional)
+
+## Implementation
+
+### Backend Architecture
+
+**Files:**
+
+| File | Purpose |
+|------|---------|
+| backend/utils/effects.py | Effect registry, validation, and audio processing |
+| backend/services/versions.py | Generation version CRUD operations |
+| backend/services/effects.py | Effect preset CRUD operations |
+| backend/routes/effects.py | API endpoints for effects and versions |
+
+**Effect Registry:**
+
+The EFFECT_REGISTRY dict in utils/effects.py defines all available effects with their parameters, defaults, and ranges.
+
+**Validation:**
+
+Effects chains are validated before application:
+- Each effect type must exist in the registry
+- Parameters must be numbers within min/max bounds
+- Unknown parameters are rejected
+
+**Audio Processing:**
+
+Uses Spotify's Pedalboard library:
+
+```python
+from pedalboard import Pedalboard
+
+# Build pedalboard from chain
+board = build_pedalboard(effects_chain)
+
+# Apply to audio (async via thread)
+processed = await asyncio.to_thread(lambda: board(audio, sample_rate))
+```
+
+### Frontend Integration
+
+**Key components:**
+
+| Component | Location |
+|-----------|----------|
+| Effects chain editor | app/src/components/Effects/ |
+| Version selector | Generation detail view |
+| Preset manager | Effects panel |
+| Live preview | Preview button (streams processed audio) |
+
+**State management:**
+- Effects chains are stored as JSON arrays
+- Live preview fetches processed audio without saving
+- Applied effects create new versions via POST endpoint
+
+## Adding New Effects
+
+To add a new effect type:
+
+1. **Add to registry** (backend/utils/effects.py):
+   - Add entry to EFFECT_REGISTRY with cls, label, description, and params
+   - Import the effect class from Pedalboard
+
+2. **Update frontend types** if needed
+
+The new effect automatically appears in /effects/available and the chain editor UI.
+
+## Best Practices
+
+**Effect ordering matters.** Process effects in this order for best results:
+1. Pitch shift (if needed)
+2. High/low-pass filters
+3. Chorus/flanger (time-based)
+4. Reverb/delay (spatial)
+5. Compressor
+6. Gain (final level adjustment)
+
+**CPU usage:**
+- Effects are applied in real-time during generation
+- Pitch shift and reverb are the most CPU-intensive
+- Consider previewing complex chains before applying
+
+**Storage:**
+- Each version creates a new audio file
+- Clean version always exists (can be reverted to)
+- Processed versions can be deleted to save space

docs/content/docs/developer/history.mdx

@@ -30,11 +30,13 @@ class Generation(Base):
 
 Generated audio is stored in:
 
-```
-data/
-└── generations/
-    └── {generation_id}.wav
-```
+<Files>
+  <Folder name="data" defaultOpen>
+    <Folder name="generations">
+      <File name="{generation_id}.wav" />
+    </Folder>
+  </Folder>
+</Files>
 
 ## Core Functions
 
@@ -171,11 +173,12 @@ async def delete_generations_by_profile(profile_id: str, db: Session) -> int:
 
 Generations can be exported as ZIP archives:
 
-```
-generation_export.zip
-├── generation.json   # Metadata
-└── audio.wav         # Audio file
-```
+<Files>
+  <Folder name="generation_export.zip" defaultOpen>
+    <File name="generation.json" />
+    <File name="audio.wav" />
+  </Folder>
+</Files>
 
 ### Importing a Generation
 

docs/content/docs/developer/meta.json

@@ -0,0 +1,20 @@
+{
+  "title": "Developer",
+  "defaultOpen": true,
+  "pages": [
+    "setup",
+    "architecture",
+    "contributing",
+    "building",
+    "autoupdater",
+    "voice-profiles",
+    "tts-generation",
+    "tts-engines",
+    "effects-pipeline",
+    "history",
+    "stories",
+    "transcription",
+    "audio-channels",
+    "model-management"
+  ]
+}

docs/content/docs/developer/model-management.mdx

@@ -36,13 +36,13 @@ Models are downloaded from HuggingFace Hub on first use and cached locally.
 
 Models are cached in the HuggingFace cache directory:
 
-```
-~/.cache/huggingface/hub/
-├── models--Qwen--Qwen3-TTS-12Hz-1.7B-Base/
-├── models--Qwen--Qwen3-TTS-12Hz-0.6B-Base/
-├── models--openai--whisper-base/
-└── ...
-```
+<Files>
+  <Folder name="~/.cache/huggingface/hub" defaultOpen>
+    <File name="models--Qwen--Qwen3-TTS-12Hz-1.7B-Base/" />
+    <File name="models--Qwen--Qwen3-TTS-12Hz-0.6B-Base/" />
+    <File name="models--openai--whisper-base/" />
+  </Folder>
+</Files>
 
 ## Progress Tracking
 

docs/content/docs/developer/setup.mdx

@@ -0,0 +1,248 @@
+---
+title: "Development Setup"
+description: "Set up your local development environment for Voicebox"
+---
+
+## Quick Setup (Recommended)
+
+Get started in two commands:
+
+```bash
+# Clone and enter the repository
+git clone https://github.com/jamiepine/voicebox.git
+cd voicebox
+
+# Setup everything (Python venv, JS deps, dev sidecar)
+just setup
+
+# Start development (backend + desktop app)
+just dev
+```
+
+The `just dev` command automatically starts the Python backend (if not already running) and launches the Tauri desktop app.
+
+## Prerequisites
+
+Ensure you have these installed:
+
+<Cards>
+  <Card title="Bun" icon={<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="m7.5 4.27 9 5.15"/><path d="M21 8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16Z"/><path d="m3.3 7 8.7 5 8.7-5"/><path d="M12 22V12"/></svg>}>
+    [Download Bun](https://bun.sh)
+    ```bash
+    curl -fsSL https://bun.sh/install | bash
+    ```
+  </Card>
+  <Card title="Python 3.11+" icon={<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M12 2L2 7l10 5 10-5-10-5z"/><path d="M2 17l10 5 10-5"/><path d="M2 12l10 5 10-5"/></svg>}>
+    [Download Python](https://python.org)
+    ```bash
+    python --version
+    ```
+  </Card>
+  <Card title="Rust" icon={<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="m6 9 6 6 6-6"/></svg>}>
+    [Install Rust](https://rustup.rs)
+    ```bash
+    rustc --version
+    ```
+  </Card>
+  <Card title="Just" icon={<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M4 7V4h3"/><path d="M7 4h14v6h-2V6H7V4Z"/><path d="M4 10v10h16V10H4Z"/></svg>}>
+    [Install Just](https://github.com/casey/just)
+    ```bash
+    brew install just  # macOS
+    cargo install just # Linux/Windows
+    ```
+  </Card>
+</Cards>
+
+<Callout type="info">
+  Just works on macOS, Linux, and Windows.
+</Callout>
+
+## Just Commands
+
+Run `just --list` to see all available commands:
+
+| Command | Description |
+|---------|-------------|
+| `just setup` | Full setup (Python venv + JS deps) |
+| `just dev` | Start backend + desktop app |
+| `just dev-web` | Start backend + web app (no Tauri) |
+| `just dev-backend` | Start backend only |
+| `just dev-frontend` | Start desktop app only (backend must be running) |
+| `just build` | Build desktop app for production |
+| `just build-web` | Build web app for production |
+| `just check` | Run all checks (JS + Python lint + format) |
+| `just fix` | Fix lint + format issues |
+| `just test` | Run Python tests |
+| `just db-init` | Initialize SQLite database |
+| `just db-reset` | Reset database (delete + reinit) |
+| `just clean` | Clean build artifacts |
+| `just clean-all` | Nuclear clean (includes node_modules) |
+
+## Project Structure
+
+<Files>
+  <Folder name="voicebox" defaultOpen>
+    <Folder name="app">
+      <Folder name="src">
+        <File name="components/" />
+        <File name="lib/" />
+        <File name="hooks/" />
+      </Folder>
+    </Folder>
+    <Folder name="backend">
+      <File name="app.py" />
+      <File name="main.py" />
+      <File name="config.py" />
+      <File name="models.py" />
+      <File name="server.py" />
+      <Folder name="routes">
+        <File name="..." />
+      </Folder>
+      <Folder name="services">
+        <File name="..." />
+      </Folder>
+      <Folder name="backends">
+        <File name="..." />
+      </Folder>
+      <Folder name="database">
+        <File name="..." />
+      </Folder>
+      <Folder name="utils">
+        <File name="..." />
+      </Folder>
+    </Folder>
+    <Folder name="tauri">
+      <Folder name="src-tauri" />
+    </Folder>
+    <Folder name="web" />
+    <Folder name="scripts" />
+  </Folder>
+</Files>
+
+### Request Flow
+
+HTTP request → **routes/** (validate input) → **services/** (business logic) → **backends/** (TTS/STT inference) → **utils/** (audio processing)
+
+### Key Modules
+
+- **app.py** — FastAPI app factory, CORS, lifecycle events
+- **main.py** — Entry point (imports app, runs uvicorn)
+- **server.py** — Tauri sidecar launcher, parent-pid watchdog
+- **services/generation.py** — Single function handling all generation modes
+- **backends/** — TTS/STT engine implementations (MLX, PyTorch, etc.)
+
+## 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)
+
+<Callout type="warn">
+  First-time usage will be slower due to model downloads, but subsequent runs will use cached models.
+</Callout>
+
+## Generate OpenAPI Client
+
+After starting the backend server, generate the TypeScript API client:
+
+```bash
+just generate-api
+```
+
+This downloads the OpenAPI schema and generates the TypeScript client in `app/src/lib/api/`
+
+## Manual Setup (Advanced)
+
+If you prefer not to use Just, follow these manual steps:
+
+### 1. Install JavaScript Dependencies
+
+```bash
+bun install
+```
+
+This installs dependencies for:
+- `app/` - Shared React frontend
+- `tauri/` - Tauri desktop wrapper
+- `web/` - Web deployment wrapper
+
+### 2. Set Up Python Backend
+
+```bash
+cd backend
+
+# Create virtual environment
+python -m venv venv
+
+# Activate virtual environment
+source venv/bin/activate  # macOS/Linux
+# or
+venv\Scripts\activate  # Windows
+
+# Install Python dependencies
+pip install -r requirements.txt
+
+# Apple Silicon: install MLX dependencies
+pip install -r requirements-mlx.txt
+
+# Install Qwen3-TTS
+pip install git+https://github.com/QwenLM/Qwen3-TTS.git
+```
+
+### 3. Start Development
+
+Start the backend:
+```bash
+cd backend
+source venv/bin/activate
+uvicorn main:app --reload --port 17493
+```
+
+In a new terminal, start the desktop app:
+```bash
+cd tauri
+bun run tauri dev
+```
+
+## Next Steps
+
+<Cards>
+  <Card title="Architecture" href="/development/architecture">
+    Understand the system architecture
+  </Card>
+  <Card title="Contributing" href="/development/contributing">
+    Read the contribution guidelines
+  </Card>
+  <Card title="Building" href="/development/building">
+    Learn how to build production releases
+  </Card>
+  <Card title="API Reference" href="/api-reference">
+    Explore the REST API
+  </Card>
+</Cards>
+
+## Troubleshooting
+
+<AccordionGroup>
+  <Accordion title="Backend won't start">
+    - Check Python version (must be 3.11+)
+    - Ensure virtual environment is activated: `source backend/venv/bin/activate`
+    - Verify all dependencies are installed: `pip install -r requirements.txt`
+    - Check if port 17493 is available
+  </Accordion>
+
+  <Accordion title="Tauri build fails">
+    - Ensure Rust is installed: `rustc --version`
+    - Clean the build: `cd tauri/src-tauri && cargo clean`
+    - Try rebuilding: `just dev`
+  </Accordion>
+
+  <Accordion title="OpenAPI client generation fails">
+    - Ensure backend is running: `curl http://localhost:17493/openapi.json`
+    - Check network connectivity
+    - Verify the backend is accessible at localhost:17493
+  </Accordion>
+</AccordionGroup>
+
+See the full [Troubleshooting Guide](/overview/troubleshooting) for more issues and solutions.

docs/content/docs/developer/tts-engines.mdx

@@ -0,0 +1,257 @@
+---
+title: "TTS Engines"
+description: "How to add new text-to-speech engines to Voicebox"
+---
+
+Adding an engine touches ~10 files across 4 layers. The backend protocol work is straightforward — the real time sink is dependency hell, upstream library bugs, and PyInstaller bundling.
+
+## Architecture Overview
+
+The backend is split into layers:
+
+| Layer | Purpose | Files Touched |
+|-------|---------|---------------|
+| `routes/` | Thin HTTP handlers | None (auto-dispatch) |
+| `services/` | Business logic | None (auto-dispatch) |
+| `backends/` | Engine implementations | `your_engine_backend.py` |
+| `utils/` | Shared utilities | As needed |
+
+New engines only need to touch `backends/` and `models.py` on the backend side — the route and service layers use a model config registry that handles dispatch automatically.
+
+## Phase 1: Backend Implementation
+
+### 1.1 Create the Backend File
+
+Create `backend/backends/<engine>_backend.py` (~200-300 lines) implementing the `TTSBackend` protocol:
+
+```python
+class YourBackend:
+    """Must satisfy the TTSBackend protocol."""
+
+    async def load_model(self, model_size: str = "default") -> None: ...
+    async def create_voice_prompt(self, audio_path: str, reference_text: str, use_cache: bool = True) -> tuple[dict, bool]: ...
+    async def combine_voice_prompts(self, audio_paths: list[str], ref_texts: list[str]) -> tuple[np.ndarray, str]: ...
+    async def generate(self, text: str, voice_prompt: dict, language: str = "en", seed: int | None = None, instruct: str | None = None) -> tuple[np.ndarray, int]: ...
+    def unload_model(self) -> None: ...
+    def is_loaded(self) -> bool: ...
+    def _get_model_path(self, model_size: str) -> str: ...
+```
+
+**Key decisions per engine:**
+
+| Decision | Options | Examples |
+|----------|---------|---------|
+| **Voice prompt storage** | Pre-computed tensors vs deferred file paths | Qwen stores tensor dicts; Chatterbox stores paths |
+| **Caching** | Use voice prompt cache or skip it | LuxTTS caches with prefix; Chatterbox skips caching |
+| **Device selection** | CUDA / MPS / CPU | Chatterbox forces CPU on macOS (MPS bugs) |
+| **Model download** | Library handles it vs manual `snapshot_download` | Turbo uses manual download to bypass `token=True` bug |
+| **Sample rate** | Engine-specific | LuxTTS outputs 48kHz, everything else is 24kHz |
+
+### 1.2 Voice Prompt Patterns
+
+**Pattern A: Pre-computed tensors** (Qwen, LuxTTS)
+```python
+encoded = model.encode_prompt(audio_path)
+return encoded, False  # (prompt_dict, was_cached)
+```
+
+**Pattern B: Deferred file paths** (Chatterbox, MLX)
+```python
+return {"ref_audio": audio_path, "ref_text": reference_text}, False
+```
+
+**Pattern C: Hybrid** (possible for new engines)
+```python
+embedding = model.extract_speaker(audio_path)
+return {"embedding": embedding, "ref_audio": audio_path}, False
+```
+
+If caching, prefix your cache keys:
+```python
+cache_key = "yourengine_" + get_cache_key(audio_path, reference_text)
+```
+
+### 1.3 Register the Engine
+
+In `backend/backends/__init__.py`:
+
+**Add a `ModelConfig` entry:**
+
+```python
+ModelConfig(
+    model_name="your-engine",
+    display_name="Your Engine",
+    engine="your_engine",
+    hf_repo_id="org/model-repo",
+    size_mb=3200,
+    needs_trim=False,  # set True if output needs trim_tts_output()
+    languages=["en", "fr", "de"],
+),
+```
+
+**Add to `TTS_ENGINES` dict:**
+
+```python
+TTS_ENGINES = {
+    ...
+    "your_engine": "Your Engine",
+}
+```
+
+**Add factory branch:**
+
+```python
+elif engine == "your_engine":
+    from .your_backend import YourBackend
+    backend = YourBackend()
+```
+
+### 1.4 Update Request Models
+
+In `backend/models.py`:
+- Add engine name to `GenerationRequest.engine` regex pattern
+- Add any new language codes to the language regex
+
+## Phase 2: Route and Service Integration
+
+With the model config registry, route and service layers have **zero per-engine dispatch points**. All endpoints use registry helpers like `get_model_config()`, `load_engine_model()`, `engine_needs_trim()`, `check_model_loaded()`, etc.
+
+**You don't need to touch any route or service files** unless your engine needs custom behavior in the generate pipeline.
+
+### Post-Processing
+
+If your model produces trailing silence, set `needs_trim=True` on your `ModelConfig`. The generation service applies `trim_tts_output()` automatically.
+
+## Phase 3: Frontend Integration
+
+### 3.1 TypeScript Types
+
+In `app/src/lib/api/types.ts`:
+- Add to the `engine` union type on `GenerationRequest`
+
+### 3.2 Language Maps
+
+In `app/src/lib/constants/languages.ts`:
+- Add entry to `ENGINE_LANGUAGES` record
+- Add any new language codes to `ALL_LANGUAGES` if needed
+
+### 3.3 Engine/Model Selector
+
+In `app/src/components/Generation/EngineModelSelector.tsx`:
+- Add entry to `ENGINE_OPTIONS` and `ENGINE_DESCRIPTIONS`
+- Add to `ENGLISH_ONLY_ENGINES` if applicable
+
+### 3.4 Form Hook
+
+In `app/src/lib/hooks/useGenerationForm.ts`:
+- Add to Zod schema enum for `engine`
+- Add engine-to-model-name mapping
+- Update payload construction for engine-specific fields
+
+### 3.5 Model Management
+
+In `app/src/components/ServerSettings/ModelManagement.tsx`:
+- Add description to `MODEL_DESCRIPTIONS` record
+
+## Phase 4: Dependencies
+
+### 4.1 Python Dependencies
+
+Add to `backend/requirements.txt`. Watch for:
+
+**Pinned dependency conflicts** — If the model package pins old versions, install with `--no-deps`:
+```bash
+pip install --no-deps chatterbox-tts
+```
+
+Then list sub-dependencies manually in `requirements.txt`.
+
+**Non-PyPI packages:**
+```
+linacodec @ git+https://github.com/user/repo.git
+```
+
+**Custom package indexes:**
+```
+--find-links https://k2-fsa.github.io/icefall/piper_phonemize.html
+```
+
+### 4.2 Identifying Hidden Sub-Dependencies
+
+1. Install the package normally in a throwaway venv
+2. Run `pip show <package>` to get its `Requires:` list
+3. Cross-reference against existing requirements.txt
+4. Test that the engine loads and generates
+
+## Phase 5: PyInstaller Bundling
+
+This is where most of the pain lives. Common issues:
+
+| Issue | Symptom | Fix |
+|-------|---------|-----|
+| `inspect.getsource()` at import | "could not get source code" | `--collect-all <package>` |
+| Data files (yaml, .pth.tar) | FileNotFoundError at runtime | `--collect-all <package>` |
+| Native data paths (espeak-ng) | Library looks at `/usr/share/...` | Set env var in frozen builds |
+| `importlib.metadata` lookups | "No package metadata found" | `--copy-metadata <package>` |
+| Dynamic imports | ModuleNotFoundError | `--hidden-import <module>` |
+
+### Testing Frozen Builds
+
+You can't skip this. Models that work in `python -m uvicorn` will break in the PyInstaller binary.
+
+1. Build: `just build`
+2. Run and try download + load + generate
+3. Check stderr for the actual error
+4. Fix, rebuild, repeat
+
+## Phase 6: Common Upstream Workarounds
+
+### torch.load device mismatch
+```python
+_original_torch_load = torch.load
+def _patched_torch_load(*args, **kwargs):
+    kwargs.setdefault("map_location", "cpu")
+    return _original_torch_load(*args, **kwargs)
+torch.load = _patched_torch_load
+```
+
+### Float64/Float32 dtype mismatch
+```python
+original_fn = SomeClass.some_method
+def patched_fn(self, *args, **kwargs):
+    result = original_fn(self, *args, **kwargs)
+    return result.float()
+SomeClass.some_method = patched_fn
+```
+
+### HuggingFace token bug
+```python
+from huggingface_hub import snapshot_download
+local_path = snapshot_download(repo_id=REPO, token=None)
+model = ModelClass.from_local(local_path, device=device)
+```
+
+### MPS tensor issues
+Skip MPS entirely if operators aren't supported:
+```python
+def _get_device(self):
+    if torch.cuda.is_available():
+        return "cuda"
+    return "cpu"  # Skip MPS
+```
+
+## Upcoming Engines
+
+Based on the current model landscape, these are candidates for future integration:
+
+| Model | Languages | Size | Key Features | Status |
+|-------|-----------|------|--------------|--------|
+| **CosyVoice2-0.5B** | Multilingual | ~500MB | Instruct support (`inference_instruct2()`) | Ready |
+| **Fish Speech** | 50+ | Medium | Word-level control via inline text | Ready |
+| **Kokoro-82M** | English | 82M | CPU realtime, Apache 2.0 | Ready |
+| **XTTS-v2** | 17+ | Medium | Zero-shot cloning | Ready |
+| **HumeAI TADA** | EN (1B), Multi (3B) | Medium | 700s+ coherent audio, synced transcripts | Needs vetting |
+| **MOSS-TTS** | Multilingual | Medium | Text-to-voice design, multi-speaker dialogue | Needs vetting |
+| **Pocket TTS** | English | ~100M | CPU-first, >1× realtime | Needs vetting |
+
+The multi-engine architecture is now in place, making new model integration straightforward (~1 day for a well-documented model with a PyPI package).