chore: bump version to 1.4.1 [skip ci]

macOS: pyproject.toml's [tool.uv.sources] forces torch from the CUDA
index which has no macOS ARM wheels. Use `uv sync --no-sources` to
bypass this and get torch from PyPI (which includes MPS support).

Windows: Add additional uv PATH locations ($LOCALAPPDATA\uv\bin) for
robustness with different runner environments.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

.gitea/workflows/build-sidecar.yml

@@ -141,7 +141,7 @@ jobs:
 
       - name: Build sidecar (CUDA)
         run: |
-          uv sync
+          uv sync --frozen || uv sync
           uv run pyinstaller local-transcription-headless.spec
 
       - name: Package sidecar (CUDA)
@@ -151,7 +151,6 @@ jobs:
       - name: Build sidecar (CPU)
         run: |
           rm -rf dist/local-transcription-backend build/
-          # Install CPU-only PyTorch
           uv pip install torch torchaudio --index-url https://download.pytorch.org/whl/cpu --force-reinstall
           uv run pyinstaller local-transcription-headless.spec
 
@@ -228,7 +227,17 @@ jobs:
             Write-Host "uv already installed: $(uv --version)"
           } else {
             irm https://astral.sh/uv/install.ps1 | iex
-            echo "$env:USERPROFILE\.local\bin" | Out-File -FilePath $env:GITHUB_PATH -Encoding utf8 -Append
+            # Add both possible uv install locations to PATH
+            $uvPaths = @(
+              "$env:USERPROFILE\.local\bin",
+              "$env:USERPROFILE\.cargo\bin",
+              "$env:LOCALAPPDATA\uv\bin"
+            )
+            foreach ($p in $uvPaths) {
+              if (Test-Path $p) {
+                echo $p | Out-File -FilePath $env:GITHUB_PATH -Encoding utf8 -Append
+              }
+            }
           }
 
       - name: Set up Python
@@ -245,7 +254,8 @@ jobs:
       - name: Build sidecar (CUDA)
         shell: powershell
         run: |
-          uv sync
+          uv sync --frozen
+          if ($LASTEXITCODE -ne 0) { uv sync }
           uv run pyinstaller local-transcription-headless.spec
 
       - name: Package sidecar (CUDA)
@@ -356,9 +366,10 @@ jobs:
 
       - name: Build sidecar (CPU)
         run: |
-          # Install CPU-only PyTorch for macOS (MPS support included in default torch)
-          uv sync
-          uv pip install torch torchaudio --index-url https://download.pytorch.org/whl/cpu --force-reinstall
+          # --no-sources bypasses pyproject.toml's [tool.uv.sources] which forces
+          # torch from the CUDA index (no macOS ARM wheels there)
+          # Default PyPI torch includes MPS (Apple Silicon GPU) support
+          uv sync --no-sources
           uv run pyinstaller local-transcription-headless.spec
 
       - name: Package sidecar (CPU)

.gitignore

@@ -10,8 +10,8 @@ dist/
 downloads/
 eggs/
 .eggs/
-lib/
-lib64/
+/lib/
+/lib64/
 parts/
 sdist/
 var/

CLAUDE.md

@@ -4,52 +4,108 @@ This file provides guidance to Claude Code (claude.ai/code) when working with co
 
 ## Project Overview
 
-Local Transcription is a desktop application for real-time speech-to-text transcription designed for streamers. It uses Whisper models (via faster-whisper) to transcribe audio locally with optional multi-user server synchronization.
+Local Transcription is a cross-platform desktop application for real-time speech-to-text transcription designed for streamers. It supports local Whisper models and cloud-based Deepgram transcription, with OBS browser source integration and optional multi-user sync.
+
+**Architecture:** Two-process model — a Tauri v2 shell (Svelte 5 frontend) communicates with a headless Python backend (sidecar) via REST API and WebSocket.
 
 **Key Features:**
-- Standalone desktop GUI (PySide6/Qt)
-- Local transcription with CPU/GPU support
-- Built-in web server for OBS browser source integration
-- Optional Node.js-based multi-user server for syncing transcriptions across users
-- Noise suppression and Voice Activity Detection (VAD)
-- Cross-platform builds (Linux/Windows) with PyInstaller
+- Cross-platform desktop app (Windows, macOS, Linux) via Tauri v2 + Svelte 5
+- Headless Python backend with FastAPI control API
+- Dual transcription modes: local Whisper or cloud Deepgram (managed/BYOK)
+- Built-in web server for OBS browser source at `http://localhost:8080`
+- Optional multi-user sync via Node.js server
+- CUDA, MPS (Apple Silicon), and CPU support
+- Auto-updates, custom fonts, configurable colors
+
+> **Legacy GUI:** The original PySide6/Qt GUI (`main.py`, `gui/`) still works during the transition. New features should target the Tauri frontend and headless backend.
 
 ## Project Structure
 
 ```
 local-transcription/
-├── client/                   # Core transcription logic
-│   ├── audio_capture.py      # Audio input and buffering
-│   ├── transcription_engine.py # Whisper model integration
+├── src/                             # Svelte 5 frontend (Tauri UI)
+│   ├── App.svelte                   # Main app shell
+│   ├── app.css                      # Global dark theme styles
+│   ├── main.ts                      # Svelte mount point
+│   ├── lib/components/              # UI components
+│   │   ├── Header.svelte            # Title bar + settings button
+│   │   ├── StatusBar.svelte         # State indicator, device, user info
+│   │   ├── Controls.svelte          # Start/Stop, Clear, Save buttons
+│   │   ├── TranscriptionDisplay.svelte  # Scrolling transcript view
+│   │   └── Settings.svelte          # Full settings modal (all sections)
+│   └── lib/stores/                  # Svelte 5 reactive stores ($state/$derived)
+│       ├── backend.ts               # WebSocket + REST API client
+│       ├── config.ts                # App configuration fetch/update
+│       └── transcriptions.ts        # Transcript data management
+├── src-tauri/                       # Tauri v2 Rust shell
+│   ├── src/lib.rs                   # Plugin registration (shell, dialog, process)
+│   ├── src/main.rs                  # Entry point
+│   ├── tauri.conf.json              # Window, bundle, plugin config
+│   └── Cargo.toml                   # Rust dependencies
+├── backend/                         # Headless Python backend (the sidecar)
+│   ├── app_controller.py            # Core orchestration (engine, sync, config)
+│   ├── api_server.py                # FastAPI REST endpoints + /ws/control
+│   └── main_headless.py             # Headless entry point (prints JSON to stdout)
+├── client/                          # Core transcription modules (used by backend)
+│   ├── audio_capture.py             # Audio input handling
+│   ├── transcription_engine_realtime.py  # RealtimeSTT / Whisper engine
+│   ├── deepgram_transcription.py    # Deepgram WebSocket cloud transcription
 │   ├── noise_suppression.py         # VAD and noise reduction
-│   ├── device_utils.py       # CPU/GPU device management
-│   ├── config.py             # Configuration management
-│   └── server_sync.py        # Multi-user server sync client
-├── gui/                      # Desktop application UI
-│   ├── main_window_qt.py     # Main application window (PySide6)
-│   ├── settings_dialog_qt.py # Settings dialog (PySide6)
+│   ├── device_utils.py              # CPU/GPU/MPS detection
+│   ├── config.py                    # YAML config management (~/.local-transcription/)
+│   ├── server_sync.py               # Multi-user server sync client
+│   ├── instance_lock.py             # Single-instance PID lock
+│   └── update_checker.py            # Gitea release update checker
+├── gui/                             # Legacy PySide6/Qt GUI (still functional)
+│   ├── main_window_qt.py            # Main window (orchestration lives here in legacy)
+│   ├── settings_dialog_qt.py        # Settings dialog
 │   └── transcription_display_qt.py  # Display widget
-├── server/                   # Web display servers
-│   ├── web_display.py        # FastAPI server for OBS browser source (local)
-│   └── nodejs/               # Optional multi-user Node.js server
-│       ├── server.js         # Multi-user sync server with WebSocket
-│       ├── package.json      # Node.js dependencies
-│       └── README.md         # Server deployment documentation
-├── config/                   # Example configuration files
-│   └── default_config.yaml   # Default settings template
-├── main.py                   # GUI application entry point
+├── server/
+│   ├── web_display.py               # FastAPI OBS display server (WebSocket + HTML)
+│   └── nodejs/                      # Optional multi-user sync server
+├── .gitea/workflows/                # CI/CD
+│   ├── release.yml                  # Tauri app builds (Linux/Windows/macOS)
+│   └── build-sidecar.yml            # Python sidecar builds (CUDA + CPU)
+├── config/default_config.yaml       # Default settings template
+├── main.py                          # Legacy PySide6 GUI entry point
 ├── main_cli.py                      # CLI version for testing
-└── pyproject.toml           # Dependencies and build config
+├── version.py                       # Version string (__version__)
+├── local-transcription.spec         # PyInstaller config (legacy, includes PySide6)
+├── local-transcription-headless.spec # PyInstaller config (headless sidecar, no Qt)
+├── pyproject.toml                   # Python deps (uv, CUDA PyTorch index)
+├── package.json                     # Node/Tauri deps
+└── vite.config.ts                   # Vite build config ($lib alias)
 ```
 
 ## Development Commands
 
-### Installation and Setup
+### Frontend (Tauri + Svelte)
 ```bash
-# Install dependencies (creates .venv automatically)
+# Install npm dependencies
+npm install
+
+# Run Tauri in development mode (hot-reload)
+npm run tauri dev
+
+# Build frontend only (for testing)
+npx vite build
+
+# Type-check Svelte
+npx svelte-check
+
+# Check Rust compiles
+cd src-tauri && cargo check
+```
+
+### Backend (Python)
+```bash
+# Install Python dependencies
 uv sync
 
-# Run the GUI application
+# Run the headless backend standalone (for development)
+uv run python -m backend.main_headless --port 8080
+
+# Run the legacy PySide6 GUI
 uv run python main.py
 
 # Run CLI version (headless, for testing)
@@ -57,257 +113,154 @@ uv run python main_cli.py
 
 # List available audio devices
 uv run python main_cli.py --list-devices
-
-# Install with CUDA support (if needed)
-uv pip install torch --index-url https://download.pytorch.org/whl/cu121
 ```
 
-### Building Executables
+### Building
 ```bash
-# Linux (includes CUDA support - works on both GPU and CPU systems)
-./build.sh
+# Build Tauri app (produces platform installer)
+npm run tauri build
 
-# Windows (includes CUDA support - works on both GPU and CPU systems)
-build.bat
+# Build headless Python sidecar (no PySide6)
+uv run pyinstaller local-transcription-headless.spec
+# Output: dist/local-transcription-backend/
 
-# Manual build with PyInstaller
-uv sync                          # Install dependencies (includes CUDA PyTorch)
-uv pip uninstall -q enum34       # Remove incompatible enum34 package
+# Build legacy PySide6 app
 uv run pyinstaller local-transcription.spec
+# Or use: ./build.sh (Linux) / build.bat (Windows)
 ```
 
-**Important:** All builds include CUDA support via `pyproject.toml` configuration. CUDA builds can be created on systems without NVIDIA GPUs. The PyTorch CUDA runtime is bundled, and the app automatically falls back to CPU if no GPU is available.
-
 ### Testing
 ```bash
-# Run component tests
 uv run python test_components.py
-
-# Check CUDA availability
 uv run python check_cuda.py
-
-# Test web server manually
-uv run python -m uvicorn server.web_display:app --reload
 ```
 
-## Architecture
+## Architecture Details
 
-### Audio Processing Pipeline
+### Communication: Tauri <-> Python Backend
 
-1. **Audio Capture** ([client/audio_capture.py](client/audio_capture.py))
-   - Captures audio from microphone/system using sounddevice
-   - Handles automatic sample rate detection and resampling
-   - Uses chunking with overlap for better transcription quality
-   - Default: 3-second chunks with 0.5s overlap
+The Svelte frontend connects to the Python backend via two channels:
 
-2. **Noise Suppression** ([client/noise_suppression.py](client/noise_suppression.py))
-   - Applies noisereduce for background noise reduction
-   - Voice Activity Detection (VAD) using webrtcvad
-   - Skips silent segments to improve performance
+**REST API** (on port 8081 by default):
+- `GET /api/status` — app state, device info, version
+- `POST /api/start` / `POST /api/stop` — transcription control
+- `GET /api/config` / `PUT /api/config` — read/write settings (dot-notation keys)
+- `GET /api/audio-devices` / `GET /api/compute-devices` — device enumeration
+- `POST /api/reload-engine` — reload with new model/device
+- `GET /api/transcriptions` / `POST /api/clear` — transcript management
+- `POST /api/save-file` — write text to a file path
+- `GET /api/check-update` / `POST /api/skip-version` — update management
+- `POST /api/login` / `POST /api/register` / `GET /api/balance` — managed mode proxy
 
-3. **Transcription** ([client/transcription_engine.py](client/transcription_engine.py))
-   - Uses faster-whisper for efficient inference
-   - Supports CPU, CUDA, and Apple MPS (Mac)
-   - Models: tiny, base, small, medium, large
-   - Thread-safe model loading with locks
+**WebSocket** `/ws/control`:
+- Pushes real-time events: `state_changed`, `transcription`, `preview`, `error`, `credits_low`
+- Client sends keepalive pings
 
-4. **Display** ([gui/main_window_qt.py](gui/main_window_qt.py))
-   - PySide6/Qt-based desktop GUI
-   - Real-time transcription display with scrolling
-   - Settings panel with live updates (no restart needed)
+The OBS display server runs separately on port 8080 (`GET /` for HTML, `WebSocket /ws` for transcriptions).
 
-### Web Server Architecture
+### Backend Process Lifecycle
 
-**Local Web Server** ([server/web_display.py](server/web_display.py))
-- Always runs when GUI starts (port 8080 by default)
-- FastAPI with WebSocket for real-time updates
-- Used for OBS browser source integration
-- Single-user (displays only local transcriptions)
+1. `main_headless.py` starts, acquires instance lock, creates `AppController`
+2. `AppController.initialize()` starts the OBS web server (port 8080) and engine init thread
+3. `APIServer` wraps the controller with FastAPI routes, runs on port 8081
+4. Backend prints `{"event": "ready", "port": 8080}` to stdout for Tauri to discover
+5. On shutdown: engine stopped, web server stopped, lock released
 
-**Multi-User Server** (Optional - for syncing across multiple users)
+### Headless Backend vs Legacy GUI
 
-**Node.js WebSocket Server** ([server/nodejs/](server/nodejs/)) - **RECOMMENDED**
-- Real-time WebSocket support (< 100ms latency)
-- Handles 100+ concurrent users
-- Easy deployment to VPS/cloud hosting (Railway, Heroku, DigitalOcean, or any VPS)
-- Configurable display options via URL parameters:
-  - `timestamps=true/false` - Show/hide timestamps
-  - `maxlines=50` - Maximum visible lines (prevents scroll bars in OBS)
-  - `fontsize=16` - Font size in pixels
-  - `fontfamily=Arial` - Font family
-  - `fade=10` - Seconds before text fades (0 = never)
+The `AppController` class (`backend/app_controller.py`) extracts all orchestration logic from `gui/main_window_qt.py` into a Qt-free class. The mapping:
 
-See [server/nodejs/README.md](server/nodejs/README.md) for deployment instructions
+| Legacy (MainWindow) | Headless (AppController) |
+|---------------------|--------------------------|
+| `_initialize_components()` | `_initialize_engine()` |
+| `_start_transcription()` | `start_transcription()` |
+| `_stop_transcription()` | `stop_transcription()` |
+| `_on_settings_saved()` | `apply_settings()` |
+| `_reload_engine()` | `reload_engine()` |
+| `_start_web_server_if_enabled()` | `_start_web_server()` |
+| `_start_server_sync()` | `_start_server_sync()` |
+| Qt signals | Callbacks (`on_state_changed`, `on_transcription`, etc.) |
 
-### Configuration System
+### Threading Model (Headless)
 
-- Config stored at `~/.local-transcription/config.yaml`
-- Managed by [client/config.py](client/config.py)
-- Settings apply immediately without restart (except model changes)
-- YAML format with nested keys (e.g., `transcription.model`)
+- Main thread: Uvicorn (FastAPI) event loop
+- Engine init thread: Downloads models, initializes VAD
+- Web server thread: Separate asyncio loop for OBS display
+- Audio capture: Runs in engine callback threads
+- All results flow through `AppController` callbacks -> `APIServer` WebSocket broadcast
 
-### Device Management
+### Svelte Frontend
 
-- [client/device_utils.py](client/device_utils.py) handles CPU/GPU detection
-- Auto-detects CUDA, MPS (Mac), or falls back to CPU
-- Compute types: float32 (best quality), float16 (GPU), int8 (fastest)
-- Thread-safe device selection
+Uses Svelte 5 runes throughout (`$state`, `$derived`, `$effect`, `$props`). No Svelte 4 patterns.
 
-## Key Implementation Details
+**Stores** (`src/lib/stores/`):
+- `backend.ts` — WebSocket connection + REST helpers (`apiGet`, `apiPost`, `apiPut`), auto-reconnect
+- `config.ts` — fetches/updates config from backend API
+- `transcriptions.ts` — manages transcript list, listens for `CustomEvent`s from backend store
 
-### PyInstaller Build Configuration
+**Key patterns:**
+- Backend store dispatches `CustomEvent`s on `window` for cross-store communication
+- Settings component collects all changed values into a `Record<string, any>` with dot-notation keys, sends via `PUT /api/config`
+- Controls use Tauri dialog plugin for native file save, falls back to blob download
 
-- [local-transcription.spec](local-transcription.spec) controls build
-- UPX compression enabled for smaller executables
-- Hidden imports required for PySide6, faster-whisper, torch
-- Console mode enabled by default (set `console=False` to hide)
+## CI/CD
 
-### Threading Model
+Two Gitea Actions workflows in `.gitea/workflows/`:
 
-- Main thread: Qt GUI event loop
-- Audio thread: Captures and processes audio chunks
-- Web server thread: Runs FastAPI server
-- Transcription: Runs in callback thread from audio capture
-- All transcription results communicated via Qt signals
+- **`release.yml`**: Triggers on push to `main`. Auto-bumps version, builds Tauri app on Linux/Windows/macOS, uploads `.deb`, `.rpm`, `.msi`, `.dmg` to Gitea release.
+- **`build-sidecar.yml`**: Triggers on changes to `client/`, `server/`, `backend/`, `pyproject.toml`. Builds headless Python sidecar via PyInstaller. CUDA + CPU for Linux/Windows, CPU-only for macOS.
 
-### Server Sync (Optional Multi-User Feature)
-
-- [client/server_sync.py](client/server_sync.py) handles server communication
-- Toggle in Settings: "Enable Server Sync"
-- Sends transcriptions to Node.js server via HTTP POST
-- Real-time updates via WebSocket to display page
-- Per-speaker font support (Web-Safe, Google Fonts, Custom uploads)
-- Falls back gracefully if server unavailable
+Both require a `BUILD_TOKEN` secret (Gitea API token with release write access).
 
 ## Common Patterns
 
 ### Adding a New Setting
 
-1. Add to [config/default_config.yaml](config/default_config.yaml)
-2. Update [client/config.py](client/config.py) if validation needed
-3. Add UI control in [gui/settings_dialog_qt.py](gui/settings_dialog_qt.py)
-4. Apply setting in relevant component (no restart if possible)
-5. Emit signal to update display if needed
+1. Add default to [config/default_config.yaml](config/default_config.yaml)
+2. Add UI control in [src/lib/components/Settings.svelte](src/lib/components/Settings.svelte)
+3. Ensure the setting is included in the save handler's config update
+4. Apply in `AppController.apply_settings()` or the relevant component
+5. For legacy GUI: also update [gui/settings_dialog_qt.py](gui/settings_dialog_qt.py)
+
+### Adding a New API Endpoint
+
+1. Add route in [backend/api_server.py](backend/api_server.py) `_setup_routes()`
+2. Add supporting logic in [backend/app_controller.py](backend/app_controller.py) if needed
+3. Call from Svelte via `backendStore.apiGet/apiPost/apiPut`
 
 ### Modifying Transcription Display
 
-- Local GUI: [gui/transcription_display_qt.py](gui/transcription_display_qt.py)
-- Local web display (OBS): [server/web_display.py](server/web_display.py) (HTML in `_get_html()`)
+- Tauri UI: [src/lib/components/TranscriptionDisplay.svelte](src/lib/components/TranscriptionDisplay.svelte)
+- OBS display: [server/web_display.py](server/web_display.py) (HTML in `_get_html()`)
 - Multi-user display: [server/nodejs/server.js](server/nodejs/server.js) (display page in `/display` route)
 
-### Adding a New Model Size
-
-- Update [client/transcription_engine.py](client/transcription_engine.py)
-- Add to model selector in [gui/settings_dialog_qt.py](gui/settings_dialog_qt.py)
-- Update CLI argument choices in [main_cli.py](main_cli.py)
-
 ## Dependencies
 
-**Core:**
-- `faster-whisper`: Optimized Whisper inference
-- `torch`: ML framework (CUDA-enabled via special index)
-- `PySide6`: Qt6 bindings for GUI
-- `sounddevice`: Cross-platform audio I/O
-- `noisereduce`, `webrtcvad`: Audio preprocessing
-
-**Web Server:**
-- `fastapi`, `uvicorn`: Web server and ASGI
-- `websockets`: Real-time communication
-
-**Build:**
-- `pyinstaller`: Create standalone executables
-- `uv`: Fast package manager
-
-**PyTorch CUDA Index:**
-- Configured in [pyproject.toml](pyproject.toml) under `[[tool.uv.index]]`
-- Uses PyTorch's custom wheel repository for CUDA builds
-- Automatically installed with `uv sync` when using CUDA build scripts
+**Frontend:** Tauri v2, Svelte 5, Vite, TypeScript
+**Backend:** Python 3.9+, FastAPI, Uvicorn, RealtimeSTT, faster-whisper, PyTorch (CUDA), sounddevice
+**Build:** PyInstaller (sidecar), Tauri CLI (app), uv (Python packages)
+**CI:** Gitea Actions with platform-specific runners
 
 ## Platform-Specific Notes
 
 ### Linux
-- Uses PulseAudio/ALSA for audio
-- Build scripts use bash (`.sh` files)
-- Executable: `dist/LocalTranscription/LocalTranscription`
+- Tauri needs: `libgtk-3-dev`, `libwebkit2gtk-4.1-dev`, `libappindicator3-dev`, `librsvg2-dev`, `patchelf`
+- Audio: PulseAudio/ALSA via sounddevice
 
 ### Windows
-- Uses Windows Audio/WASAPI
-- Build scripts use batch (`.bat` files)
-- Executable: `dist\LocalTranscription\LocalTranscription.exe`
-- Requires Visual C++ Redistributable on target systems
+- Tauri needs: WebView2 (usually pre-installed on Windows 10+)
+- Audio: WASAPI via sounddevice
 
-### Cross-Building
-- **Cannot cross-compile** - must build on target platform
-- CI/CD should use platform-specific runners
-
-## Troubleshooting
-
-### Model Loading Issues
-- Models download to `~/.cache/huggingface/`
-- First run requires internet connection
-- Check disk space (models: 75MB-3GB depending on size)
-
-### Audio Device Issues
-- Run `uv run python main_cli.py --list-devices`
-- Check permissions (microphone access)
-- Try different device indices in settings
-
-### GPU Not Detected
-- Run `uv run python check_cuda.py`
-- Install CUDA drivers (not CUDA toolkit - bundled in build)
-- Verify PyTorch sees GPU: `python -c "import torch; print(torch.cuda.is_available())"`
-
-### Web Server Port Conflicts
-- Default port: 8080
-- Change in [gui/main_window_qt.py](gui/main_window_qt.py) or config
-- Use `lsof -i :8080` (Linux) or `netstat -ano | findstr :8080` (Windows)
-
-## OBS Integration
-
-### Local Display (Single User)
-1. Start Local Transcription app
-2. In OBS: Add "Browser" source
-3. URL: `http://localhost:8080`
-4. Set dimensions (e.g., 1920x300)
-
-### Multi-User Display (Node.js Server)
-1. Deploy Node.js server (see [server/nodejs/README.md](server/nodejs/README.md))
-2. Each user configures Server URL: `http://your-server:3000/api/send`
-3. Enter same room name and passphrase
-4. In OBS: Add "Browser" source
-5. URL: `http://your-server:3000/display?room=ROOM&fade=10&timestamps=true&maxlines=50&fontsize=16`
-6. Customize URL parameters as needed:
-   - `timestamps=false` - Hide timestamps
-   - `maxlines=30` - Show max 30 lines (prevents scroll bars)
-   - `fontsize=18` - Larger font
-   - `fontfamily=Courier` - Different font
-
-## Performance Optimization
-
-**For Real-Time Transcription:**
-- Use `tiny` or `base` model (faster)
-- Enable GPU if available (5-10x faster)
-- Increase chunk_duration for better accuracy (higher latency)
-- Decrease chunk_duration for lower latency (less context)
-- Enable VAD to skip silent audio
-
-**For Build Size Reduction:**
-- Don't bundle models (download on demand)
-- Use CPU-only build if no GPU users
-- Enable UPX compression (already in spec)
-
-## Phase Status
-
-- ✅ **Phase 1**: Standalone desktop application (complete)
-- ✅ **Web Server**: Local OBS integration (complete)
-- ✅ **Builds**: PyInstaller executables (complete)
-- ✅ **Phase 2**: Multi-user Node.js server (complete, optional)
-- ⏸️ **Phase 3+**: Advanced features (see [NEXT_STEPS.md](NEXT_STEPS.md))
+### macOS
+- Tauri needs: Xcode Command Line Tools
+- Audio: CoreAudio via sounddevice
+- GPU: MPS (Apple Silicon) detected by `device_utils.py`
+- `Info.plist` must include `NSMicrophoneUsageDescription` for mic access
+- No CUDA builds — CPU/MPS only
 
 ## Related Documentation
 
-- [README.md](README.md) - User-facing documentation
-- [BUILD.md](BUILD.md) - Detailed build instructions
-- [INSTALL.md](INSTALL.md) - Installation guide
-- [NEXT_STEPS.md](NEXT_STEPS.md) - Future enhancements
-- [server/nodejs/README.md](server/nodejs/README.md) - Node.js server setup and deployment
+- [README.md](README.md) — User-facing documentation
+- [BUILD.md](BUILD.md) — Detailed build instructions
+- [INSTALL.md](INSTALL.md) — Installation guide
+- [server/nodejs/README.md](server/nodejs/README.md) — Node.js server setup

README.md

@@ -1,13 +1,14 @@
 # Local Transcription
 
-A real-time speech-to-text desktop application for streamers. Run locally on your machine with GPU or CPU, display transcriptions via OBS browser source, and optionally sync with other users through a multi-user server.
+A real-time speech-to-text desktop application for streamers. Runs locally on your machine with GPU or CPU, displays transcriptions via OBS browser source, and optionally syncs with other users through a multi-user server.
 
 **Version 1.4.0**
 
 ## Features
 
 - **Real-Time Transcription**: Live speech-to-text using Whisper models with minimal latency
-- **Standalone Desktop App**: PySide6/Qt GUI that works without any server
+- **Cross-Platform**: Native desktop app for Windows, macOS, and Linux via [Tauri](https://tauri.app/)
+- **Dual Transcription Modes**: Local (Whisper) or cloud (Deepgram) with managed billing or BYOK
 - **CPU & GPU Support**: Automatic detection of CUDA (NVIDIA), MPS (Apple Silicon), or CPU fallback
 - **Advanced Voice Detection**: Dual-layer VAD (WebRTC + Silero) for accurate speech detection
 - **OBS Integration**: Built-in web server for browser source capture at `http://localhost:8080`
@@ -16,36 +17,70 @@ A real-time speech-to-text desktop application for streamers. Run locally on you
 - **Customizable Colors**: User-configurable colors for name, text, and background
 - **Noise Suppression**: Built-in audio preprocessing to reduce background noise
 - **Auto-Updates**: Automatic update checking with release notes display
-- **Cross-Platform**: Builds available for Windows and Linux
+
+## Architecture
+
+The application uses a two-process architecture:
+
+1. **Tauri Shell** (Svelte 5 frontend) — lightweight native window (~50MB) rendering the UI
+2. **Python Backend** (sidecar) — headless process running transcription, audio capture, and the OBS web server
+
+The Tauri frontend communicates with the Python backend via REST API and WebSocket, following the same pattern as [voice-to-notes](https://repo.anhonesthost.net/MacroPad/voice-to-notes).
+
+```
+Tauri App (user launches this)
+  └─ Spawns Python backend as sidecar
+       ├─ FastAPI REST API (control endpoints)
+       ├─ WebSocket /ws/control (real-time state + transcriptions)
+       ├─ OBS web display at http://localhost:8080
+       └─ Transcription engine (Whisper or Deepgram)
+```
+
+> **Legacy GUI**: The original PySide6/Qt desktop GUI (`main.py`) still works alongside the new Tauri frontend during the transition period.
 
 ## Quick Start
 
 ### Running from Source
 
 ```bash
-# Install dependencies
+# Install Python dependencies
 uv sync
 
-# Run the application
+# Run the Tauri app (frontend + backend)
+npm install
+npm run tauri dev
+
+# Or run just the headless backend (for development)
+uv run python -m backend.main_headless
+
+# Or run the legacy PySide6 GUI
 uv run python main.py
 ```
 
 ### Using Pre-Built Executables
 
-Download the latest release from the [releases page](https://repo.anhonesthost.net/streamer-tools/local-transcription/releases) and run the executable for your platform.
+Download the latest release from the [releases page](https://repo.anhonesthost.net/streamer-tools/local-transcription/releases):
+
+- **App installer** (Tauri shell): `.msi` (Windows), `.dmg` (macOS), `.deb`/`.rpm`/`.AppImage` (Linux)
+- **Sidecar** (Python backend): Download the matching `sidecar-*` zip for your platform (CUDA or CPU)
 
 ### Building from Source
 
-**Linux:**
 ```bash
-./build.sh
-# Output: dist/LocalTranscription/LocalTranscription
-```
+# Build the Tauri app
+npm install
+npm run tauri build
+# Output: src-tauri/target/release/bundle/
 
-**Windows:**
-```cmd
+# Build the Python sidecar (headless, no Qt)
+uv sync
+uv run pyinstaller local-transcription-headless.spec
+# Output: dist/local-transcription-backend/
+
+# Build the legacy PySide6 app (Linux)
+./build.sh
+# Build the legacy PySide6 app (Windows)
 build.bat
-# Output: dist\LocalTranscription\LocalTranscription.exe
 ```
 
 For detailed build instructions, see [BUILD.md](BUILD.md).
@@ -57,14 +92,23 @@ For detailed build instructions, see [BUILD.md](BUILD.md).
 1. Launch the application
 2. Select your microphone from the audio device dropdown
 3. Choose a Whisper model (smaller = faster, larger = more accurate):
-   - `tiny.en` / `tiny` - Fastest, good for quick captions
-   - `base.en` / `base` - Balanced speed and accuracy
-   - `small.en` / `small` - Better accuracy
-   - `medium.en` / `medium` - High accuracy
-   - `large-v3` - Best accuracy (requires more resources)
+   - `tiny.en` / `tiny` — Fastest, good for quick captions
+   - `base.en` / `base` — Balanced speed and accuracy
+   - `small.en` / `small` — Better accuracy
+   - `medium.en` / `medium` — High accuracy
+   - `large-v3` — Best accuracy (requires more resources)
 4. Click **Start** to begin transcription
 5. Transcriptions appear in the main window and at `http://localhost:8080`
 
+### Remote Transcription (Deepgram)
+
+Instead of local Whisper models, you can use cloud-based transcription:
+
+- **Managed mode**: Sign up via the transcription proxy for metered billing
+- **BYOK mode**: Bring your own Deepgram API key for direct access
+
+Configure in Settings > Remote Transcription.
+
 ### OBS Browser Source Setup
 
 1. Start the Local Transcription app
@@ -88,7 +132,7 @@ For syncing transcriptions across multiple users (e.g., multi-host streams or tr
 
 ## Configuration
 
-Settings are stored at `~/.local-transcription/config.yaml` and can be modified through the GUI settings panel.
+Settings are stored at `~/.local-transcription/config.yaml` and can be modified through the GUI settings panel or the REST API.
 
 ### Key Settings
 
@@ -100,6 +144,7 @@ Settings are stored at `~/.local-transcription/config.yaml` and can be modified
 | `transcription.silero_sensitivity` | VAD sensitivity (0-1, lower = more sensitive) | `0.4` |
 | `transcription.post_speech_silence_duration` | Silence before finalizing (seconds) | `0.3` |
 | `transcription.continuous_mode` | Fast speaker mode for quick talkers | `false` |
+| `remote.mode` | Transcription mode (local/managed/byok) | `local` |
 | `display.show_timestamps` | Show timestamps with transcriptions | `true` |
 | `display.fade_after_seconds` | Fade out time (0 = never) | `10` |
 | `display.font_source` | Font type (System Font/Web-Safe/Google Font/Custom File) | `System Font` |
@@ -111,67 +156,114 @@ See [config/default_config.yaml](config/default_config.yaml) for all available o
 
 ```
 local-transcription/
+├── src/                             # Svelte 5 frontend (Tauri UI)
+│   ├── App.svelte                   # Main app shell
+│   ├── lib/components/              # UI components
+│   │   ├── Header.svelte
+│   │   ├── StatusBar.svelte
+│   │   ├── Controls.svelte
+│   │   ├── TranscriptionDisplay.svelte
+│   │   └── Settings.svelte
+│   └── lib/stores/                  # Reactive state management
+│       ├── backend.ts               # WebSocket + REST API client
+│       ├── config.ts                # App configuration
+│       └── transcriptions.ts        # Transcription data
+├── src-tauri/                       # Tauri v2 Rust shell
+│   ├── src/main.rs
+│   └── tauri.conf.json
+├── backend/                         # Headless Python backend (sidecar)
+│   ├── app_controller.py            # Orchestration logic (engine, sync, config)
+│   ├── api_server.py                # FastAPI REST + WebSocket control API
+│   └── main_headless.py             # Headless entry point
 ├── client/                          # Core transcription modules
 │   ├── audio_capture.py             # Audio input handling
-│   ├── transcription_engine_realtime.py  # RealtimeSTT integration
+│   ├── transcription_engine_realtime.py  # RealtimeSTT / Whisper
+│   ├── deepgram_transcription.py    # Deepgram cloud transcription
 │   ├── noise_suppression.py         # VAD and noise reduction
-│   ├── device_utils.py          # CPU/GPU detection
+│   ├── device_utils.py              # CPU/GPU/MPS detection
 │   ├── config.py                    # Configuration management
 │   ├── server_sync.py               # Multi-user server client
 │   └── update_checker.py            # Auto-update functionality
-├── gui/                         # Desktop application UI
-│   ├── main_window_qt.py        # Main application window
-│   ├── settings_dialog_qt.py    # Settings dialog
-│   └── transcription_display_qt.py  # Display widget
+├── gui/                             # Legacy PySide6/Qt GUI
+│   ├── main_window_qt.py
+│   ├── settings_dialog_qt.py
+│   └── transcription_display_qt.py
 ├── server/                          # Web servers
 │   ├── web_display.py               # Local FastAPI server for OBS
 │   └── nodejs/                      # Multi-user sync server
-│       ├── server.js            # Express + WebSocket server
-│       └── README.md            # Deployment instructions
+├── .gitea/workflows/                # CI/CD
+│   ├── release.yml                  # Tauri app builds (all platforms)
+│   └── build-sidecar.yml            # Python sidecar builds (CUDA + CPU)
 ├── config/
 │   └── default_config.yaml          # Default settings template
-├── main.py                      # GUI entry point
+├── main.py                          # Legacy GUI entry point
 ├── main_cli.py                      # CLI version (for testing)
-├── build.sh                     # Linux build script
-├── build.bat                    # Windows build script
-└── local-transcription.spec     # PyInstaller configuration
+├── local-transcription.spec         # PyInstaller config (legacy, with PySide6)
+├── local-transcription-headless.spec # PyInstaller config (headless sidecar)
+├── pyproject.toml                   # Python dependencies
+└── package.json                     # Node.js / Tauri dependencies
 ```
 
 ## Technology Stack
 
-### Desktop Application
+### Frontend (Tauri)
+- **Tauri v2** — Native cross-platform shell (Rust)
+- **Svelte 5** — Reactive UI framework (TypeScript)
+- **Vite** — Frontend build tool
+
+### Backend (Python Sidecar)
 - **Python 3.9+**
-- **PySide6** - Qt6 GUI framework
-- **RealtimeSTT** - Real-time speech-to-text with advanced VAD
-- **faster-whisper** - Optimized Whisper model inference
-- **PyTorch** - ML framework (CUDA-enabled)
-- **sounddevice** - Cross-platform audio capture
-- **webrtcvad + silero_vad** - Voice activity detection
-- **noisereduce** - Noise suppression
+- **FastAPI + Uvicorn** — REST API and WebSocket server
+- **RealtimeSTT** — Real-time speech-to-text with advanced VAD
+- **faster-whisper** — Optimized Whisper model inference (CTranslate2)
+- **PyTorch** — ML framework (CUDA-enabled builds available)
+- **sounddevice** — Cross-platform audio capture
+- **webrtcvad + silero_vad** — Voice activity detection
 
-### Web Servers
-- **FastAPI + Uvicorn** - Local web display server
-- **Node.js + Express + WebSocket** - Multi-user sync server
+### Multi-User Server (Optional)
+- **Node.js + Express + WebSocket** — Real-time sync server
 
-### Build Tools
-- **PyInstaller** - Executable packaging
-- **uv** - Fast Python package manager
+### Build & CI/CD
+- **PyInstaller** — Python sidecar packaging
+- **Tauri CLI** — App bundling (.msi, .dmg, .deb, .rpm, .AppImage)
+- **Gitea Actions** — Automated cross-platform builds
+- **uv** — Fast Python package manager
+
+## CI/CD
+
+Two Gitea Actions workflows in `.gitea/workflows/`:
+
+| Workflow | Trigger | Produces |
+|----------|---------|----------|
+| `release.yml` | Push to `main` | Tauri app installers for all platforms |
+| `build-sidecar.yml` | Changes to `client/`, `server/`, `backend/`, or `pyproject.toml` | Python sidecar zips (CUDA + CPU) |
+
+Both workflows require a `BUILD_TOKEN` secret in the repo settings (Gitea API token with release write access).
+
+### Release Artifacts
+
+| Platform | App Installer | Sidecar (CUDA) | Sidecar (CPU) |
+|----------|--------------|----------------|---------------|
+| Linux x86_64 | `.deb`, `.rpm`, `.AppImage` | `sidecar-linux-x86_64-cuda.zip` | `sidecar-linux-x86_64-cpu.zip` |
+| Windows x86_64 | `.msi`, `-setup.exe` | `sidecar-windows-x86_64-cuda.zip` | `sidecar-windows-x86_64-cpu.zip` |
+| macOS ARM64 | `.dmg` | — | `sidecar-macos-aarch64-cpu.zip` |
 
 ## System Requirements
 
 ### Minimum
-- Python 3.9+
 - 4GB RAM
 - Any modern CPU
 
-### Recommended (for real-time performance)
+### Recommended (for local real-time transcription)
 - 8GB+ RAM
 - NVIDIA GPU with CUDA support (for GPU acceleration)
-- FFmpeg (installed automatically with dependencies)
 
 ### For Building
-- **Linux**: gcc, Python dev headers
-- **Windows**: Visual Studio Build Tools, Python dev headers
+- **Tauri app**: Node.js 20+, Rust stable, platform SDK (see [Tauri prerequisites](https://tauri.app/start/prerequisites/))
+- **Python sidecar**: Python 3.9+, uv, PyInstaller
+- **Linux**: `libgtk-3-dev`, `libwebkit2gtk-4.1-dev`, `libappindicator3-dev`, `librsvg2-dev`, `patchelf`
+- **Windows**: Visual Studio Build Tools, WebView2
+- **macOS**: Xcode Command Line Tools
 
 ## Troubleshooting
 
@@ -185,7 +277,7 @@ local-transcription/
 # List available audio devices
 uv run python main_cli.py --list-devices
 ```
-- Ensure microphone permissions are granted
+- Ensure microphone permissions are granted (especially on macOS)
 - Try different device indices in settings
 
 ### GPU Not Detected
@@ -193,13 +285,13 @@ uv run python main_cli.py --list-devices
 # Check CUDA availability
 uv run python -c "import torch; print(torch.cuda.is_available())"
 ```
-- Install NVIDIA drivers (CUDA toolkit is bundled)
+- Install NVIDIA drivers (CUDA toolkit is bundled in CUDA sidecar builds)
 - The app automatically falls back to CPU if no GPU is available
 
 ### Web Server Port Conflicts
-- Default port is 8080
+- Default port is 8080; the app tries ports 8080-8084 automatically
 - Change in settings or edit config file
-- Check for conflicts: `lsof -i :8080` (Linux) or `netstat -ano | findstr :8080` (Windows)
+- Check for conflicts: `lsof -i :8080` (Linux/macOS) or `netstat -ano | findstr :8080` (Windows)
 
 ## Use Cases
 
@@ -222,3 +314,5 @@ MIT License
 - [OpenAI Whisper](https://github.com/openai/whisper) for the speech recognition model
 - [RealtimeSTT](https://github.com/KoljaB/RealtimeSTT) for real-time transcription capabilities
 - [faster-whisper](https://github.com/guillaumekln/faster-whisper) for optimized inference
+- [Tauri](https://tauri.app/) for the cross-platform desktop framework
+- [Deepgram](https://deepgram.com/) for cloud transcription API

package.json

@@ -1,7 +1,7 @@
 {
   "name": "local-transcription",
   "private": true,
-  "version": "1.4.0",
+  "version": "1.4.1",
   "type": "module",
   "scripts": {
     "dev": "vite dev",

pyproject.toml

@@ -1,6 +1,6 @@
 [project]
 name = "local-transcription"
-version = "1.0.0"
+version = "1.0.1"
 description = "A standalone desktop application for real-time speech-to-text transcription using Whisper models"
 readme = "README.md"
 requires-python = ">=3.9"

src-tauri/Cargo.toml

@@ -1,6 +1,6 @@
 [package]
 name = "local-transcription"
-version = "1.4.0"
+version = "1.4.1"
 description = "Real-time speech-to-text transcription for streamers"
 authors = ["Local Transcription Contributors"]
 edition = "2021"

src-tauri/tauri.conf.json

@@ -1,6 +1,6 @@
 {
   "productName": "Local Transcription",
-  "version": "1.4.0",
+  "version": "1.4.1",
   "identifier": "com.localtranscription.app",
   "build": {
     "frontendDist": "../dist",

src/lib/components/Controls.svelte

@@ -0,0 +1,116 @@
+<script lang="ts">
+  import { backendStore } from "$lib/stores/backend";
+  import { transcriptionStore } from "$lib/stores/transcriptions";
+
+  let isTranscribing = $derived(backendStore.appState === "transcribing");
+  let isReady = $derived(
+    backendStore.appState === "ready" || backendStore.appState === "transcribing"
+  );
+  let isLoading = $state(false);
+
+  async function toggleTranscription() {
+    if (isLoading) return;
+    isLoading = true;
+    try {
+      if (isTranscribing) {
+        await backendStore.apiPost("/api/stop");
+      } else {
+        await backendStore.apiPost("/api/start");
+      }
+    } catch (err) {
+      console.error("Failed to toggle transcription:", err);
+    } finally {
+      isLoading = false;
+    }
+  }
+
+  async function clearTranscriptions() {
+    try {
+      await backendStore.apiPost("/api/clear");
+      transcriptionStore.clearAll();
+    } catch (err) {
+      console.error("Failed to clear:", err);
+    }
+  }
+
+  async function saveTranscriptions() {
+    try {
+      // Get transcription text from backend or local store
+      let text: string;
+      try {
+        const data = await backendStore.apiGet<{ text: string }>("/api/transcriptions");
+        text = data.text || transcriptionStore.getPlainText();
+      } catch {
+        text = transcriptionStore.getPlainText();
+      }
+
+      if (!text.trim()) {
+        console.warn("No transcriptions to save");
+        return;
+      }
+
+      // Try Tauri dialog for native save, fall back to browser download
+      try {
+        const { save } = await import("@tauri-apps/plugin-dialog");
+        const filePath = await save({
+          defaultPath: "transcription.txt",
+          filters: [
+            { name: "Text Files", extensions: ["txt"] },
+            { name: "All Files", extensions: ["*"] },
+          ],
+        });
+        if (filePath) {
+          // Write via backend API
+          await backendStore.apiPost("/api/save-file", { path: filePath, text });
+        }
+      } catch {
+        // Fallback: browser-style download
+        const blob = new Blob([text], { type: "text/plain" });
+        const url = URL.createObjectURL(blob);
+        const a = document.createElement("a");
+        a.href = url;
+        a.download = "transcription.txt";
+        a.click();
+        URL.revokeObjectURL(url);
+      }
+    } catch (err) {
+      console.error("Failed to save:", err);
+    }
+  }
+</script>
+
+<div class="controls">
+  <button
+    class={isTranscribing ? "danger" : "primary"}
+    onclick={toggleTranscription}
+    disabled={!isReady || isLoading}
+  >
+    {#if isLoading}
+      ...
+    {:else if isTranscribing}
+      Stop Transcription
+    {:else}
+      Start Transcription
+    {/if}
+  </button>
+
+  <button onclick={clearTranscriptions} disabled={!backendStore.connected}>
+    Clear
+  </button>
+
+  <button onclick={saveTranscriptions} disabled={!backendStore.connected}>
+    Save
+  </button>
+</div>
+
+<style>
+  .controls {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    padding: 10px 20px;
+    background-color: var(--bg-secondary);
+    border-top: 1px solid var(--border-color);
+    flex-shrink: 0;
+  }
+</style>

src/lib/components/Header.svelte

@@ -0,0 +1,82 @@
+<script lang="ts">
+  interface Props {
+    onSettingsClick: () => void;
+  }
+
+  let { onSettingsClick }: Props = $props();
+</script>
+
+<header class="app-header">
+  <h1 class="app-title">Local Transcription</h1>
+  <button class="settings-btn" onclick={onSettingsClick} title="Settings">
+    <svg
+      width="20"
+      height="20"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      stroke-width="2"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    >
+      <circle cx="12" cy="12" r="3"></circle>
+      <path
+        d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1
+        0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0
+        0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2
+        2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65
+        1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2
+        0 0 1 0-2.83l.06-.06A1.65 1.65 0 0 0 4.68
+        15a1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0
+        0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0
+        0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1
+        2.83 0l.06.06A1.65 1.65 0 0 0 9 4.68a1.65 1.65 0
+        0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2
+        2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0
+        1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0
+        2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65
+        0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0
+        1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"
+      ></path>
+    </svg>
+  </button>
+</header>
+
+<style>
+  .app-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 12px 20px;
+    background-color: var(--bg-secondary);
+    border-bottom: 1px solid var(--border-color);
+    flex-shrink: 0;
+  }
+
+  .app-title {
+    font-size: 24px;
+    font-weight: 700;
+    color: var(--text-primary);
+    letter-spacing: -0.5px;
+  }
+
+  .settings-btn {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 36px;
+    height: 36px;
+    padding: 0;
+    border: 1px solid var(--border-color);
+    border-radius: 8px;
+    background-color: transparent;
+    color: var(--text-secondary);
+    cursor: pointer;
+    transition: color 0.15s ease, background-color 0.15s ease;
+  }
+
+  .settings-btn:hover {
+    color: var(--text-primary);
+    background-color: var(--bg-tertiary);
+  }
+</style>

src/lib/components/Settings.svelte

@@ -0,0 +1,780 @@
+<script lang="ts">
+  import { configStore } from "$lib/stores/config";
+  import { backendStore } from "$lib/stores/backend";
+
+  interface Props {
+    onClose: () => void;
+  }
+
+  let { onClose }: Props = $props();
+
+  // Local copies of config values for editing
+  let userName = $state("");
+  let audioDevice = $state("default");
+  let model = $state("base.en");
+  let language = $state("en");
+  let computeDevice = $state("auto");
+  let computeType = $state("default");
+  let enableRealtime = $state(false);
+  let realtimeModel = $state("tiny.en");
+  let realtimeProcessingPause = $state(0.1);
+  let sileroSensitivity = $state(0.4);
+  let webrtcSensitivity = $state(3);
+  let postSpeechSilence = $state(0.3);
+  let minRecordingLength = $state(0.5);
+  let minGapBetween = $state(0);
+  let continuousMode = $state(false);
+  let showTimestamps = $state(true);
+  let fadeSeconds = $state(10);
+  let maxLines = $state(100);
+  let fontSize = $state(12);
+  let userColor = $state("#4CAF50");
+  let textColor = $state("#FFFFFF");
+  let backgroundColor = $state("#000000");
+  let syncEnabled = $state(false);
+  let syncUrl = $state("");
+  let syncRoom = $state("default");
+  let syncPassphrase = $state("");
+  let remoteMode = $state("local");
+  let remoteServerUrl = $state("");
+  let managedEmail = $state("");
+  let managedPassword = $state("");
+  let autoCheckUpdates = $state(true);
+
+  // Fetched device lists
+  let audioDevices = $state<{ id: string; name: string }[]>([]);
+  let computeDevices = $state<{ id: string; name: string }[]>([]);
+
+  // Model options
+  const modelOptions = [
+    "tiny",
+    "tiny.en",
+    "base",
+    "base.en",
+    "small",
+    "small.en",
+    "medium",
+    "medium.en",
+    "large-v1",
+    "large-v2",
+    "large-v3",
+  ];
+
+  const computeTypeOptions = [
+    { value: "default", label: "Default" },
+    { value: "int8", label: "int8 (Fastest)" },
+    { value: "float16", label: "float16 (GPU)" },
+    { value: "float32", label: "float32 (Best Quality)" },
+  ];
+
+  const webrtcOptions = [
+    { value: 0, label: "0 (Most Sensitive)" },
+    { value: 1, label: "1" },
+    { value: 2, label: "2" },
+    { value: 3, label: "3 (Least Sensitive)" },
+  ];
+
+  // Load config values on mount
+  $effect(() => {
+    const cfg = configStore.config;
+    userName = cfg.user.name;
+    audioDevice = cfg.audio.input_device;
+    model = cfg.transcription.model;
+    language = cfg.transcription.language;
+    computeDevice = cfg.transcription.device;
+    computeType = cfg.transcription.compute_type;
+    enableRealtime = cfg.transcription.enable_realtime_transcription;
+    realtimeModel = cfg.transcription.realtime_model;
+    realtimeProcessingPause = cfg.transcription.realtime_processing_pause;
+    sileroSensitivity = cfg.transcription.silero_sensitivity;
+    webrtcSensitivity = cfg.transcription.webrtc_sensitivity;
+    postSpeechSilence = cfg.transcription.post_speech_silence_duration;
+    minRecordingLength = cfg.transcription.min_length_of_recording;
+    minGapBetween = cfg.transcription.min_gap_between_recordings;
+    continuousMode = cfg.transcription.continuous_mode;
+    showTimestamps = cfg.display.show_timestamps;
+    fadeSeconds = cfg.display.fade_after_seconds;
+    maxLines = cfg.display.max_lines;
+    fontSize = cfg.display.font_size;
+    userColor = cfg.display.user_color;
+    textColor = cfg.display.text_color;
+    // Strip alpha from background color for the color picker (only supports 6-char hex)
+    const bgHex = cfg.display.background_color.replace("#", "");
+    backgroundColor = "#" + bgHex.substring(0, 6);
+    syncEnabled = cfg.server_sync.enabled;
+    syncUrl = cfg.server_sync.url;
+    syncRoom = cfg.server_sync.room;
+    syncPassphrase = cfg.server_sync.passphrase;
+    remoteMode = cfg.remote.mode;
+    remoteServerUrl = cfg.remote.server_url;
+    autoCheckUpdates = cfg.updates.auto_check;
+  });
+
+  // Fetch audio devices and compute devices on mount
+  $effect(() => {
+    fetchAudioDevices();
+    fetchComputeDevices();
+  });
+
+  async function fetchAudioDevices() {
+    try {
+      const data = await backendStore.apiGet<{
+        devices: { id: string; name: string }[];
+      }>("/api/audio-devices");
+      audioDevices = data.devices ?? [];
+    } catch {
+      audioDevices = [];
+    }
+  }
+
+  async function fetchComputeDevices() {
+    try {
+      const data = await backendStore.apiGet<{
+        devices: { id: string; name: string }[];
+      }>("/api/compute-devices");
+      computeDevices = data.devices ?? [];
+    } catch {
+      computeDevices = [
+        { id: "auto", name: "Auto" },
+        { id: "cpu", name: "CPU" },
+        { id: "cuda", name: "CUDA (GPU)" },
+      ];
+    }
+  }
+
+  async function handleSave() {
+    const updates = {
+      user: {
+        name: userName,
+      },
+      audio: {
+        input_device: audioDevice,
+      },
+      transcription: {
+        model,
+        device: computeDevice,
+        language,
+        compute_type: computeType,
+        enable_realtime_transcription: enableRealtime,
+        realtime_model: realtimeModel,
+        realtime_processing_pause: realtimeProcessingPause,
+        silero_sensitivity: sileroSensitivity,
+        webrtc_sensitivity: webrtcSensitivity,
+        post_speech_silence_duration: postSpeechSilence,
+        min_length_of_recording: minRecordingLength,
+        min_gap_between_recordings: minGapBetween,
+        continuous_mode: continuousMode,
+      },
+      display: {
+        show_timestamps: showTimestamps,
+        fade_after_seconds: fadeSeconds,
+        max_lines: maxLines,
+        font_size: fontSize,
+        user_color: userColor,
+        text_color: textColor,
+        background_color: backgroundColor,
+      },
+      server_sync: {
+        enabled: syncEnabled,
+        url: syncUrl,
+        room: syncRoom,
+        passphrase: syncPassphrase,
+      },
+      remote: {
+        mode: remoteMode,
+        server_url: remoteServerUrl,
+      },
+      updates: {
+        auto_check: autoCheckUpdates,
+      },
+    };
+
+    try {
+      await configStore.saveConfig(updates);
+      onClose();
+    } catch (err) {
+      console.error("Failed to save settings:", err);
+    }
+  }
+
+  function handleCancel() {
+    onClose();
+  }
+
+  async function handleCheckUpdates() {
+    try {
+      await backendStore.apiPost("/api/check-updates");
+    } catch (err) {
+      console.error("Failed to check for updates:", err);
+    }
+  }
+
+  async function handleManagedLogin() {
+    try {
+      await backendStore.apiPost("/api/remote/login", {
+        email: managedEmail,
+        password: managedPassword,
+      });
+    } catch (err) {
+      console.error("Login failed:", err);
+    }
+  }
+
+  async function handleManagedRegister() {
+    try {
+      await backendStore.apiPost("/api/remote/register", {
+        email: managedEmail,
+        password: managedPassword,
+      });
+    } catch (err) {
+      console.error("Register failed:", err);
+    }
+  }
+
+  function handleOverlayClick(e: MouseEvent) {
+    if ((e.target as HTMLElement).classList.contains("settings-overlay")) {
+      handleCancel();
+    }
+  }
+
+  function handleKeydown(e: KeyboardEvent) {
+    if (e.key === "Escape") {
+      handleCancel();
+    }
+  }
+</script>
+
+<svelte:window onkeydown={handleKeydown} />
+
+<!-- svelte-ignore a11y_click_events_have_key_events a11y_no_static_element_interactions -->
+<div class="settings-overlay" role="presentation" onclick={handleOverlayClick}>
+  <div class="settings-panel">
+    <div class="settings-header">
+      <h2>Settings</h2>
+      <button class="close-btn" aria-label="Close settings" onclick={handleCancel}>
+        <svg
+          width="18"
+          height="18"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="2"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        >
+          <line x1="18" y1="6" x2="6" y2="18"></line>
+          <line x1="6" y1="6" x2="18" y2="18"></line>
+        </svg>
+      </button>
+    </div>
+
+    <div class="settings-content">
+      <!-- User Settings -->
+      <section class="settings-section">
+        <h3>User Settings</h3>
+        <div class="field">
+          <label for="user-name">Display Name</label>
+          <input id="user-name" type="text" bind:value={userName} />
+        </div>
+      </section>
+
+      <!-- Audio Settings -->
+      <section class="settings-section">
+        <h3>Audio Settings</h3>
+        <div class="field">
+          <label for="audio-device">Audio Device</label>
+          <select id="audio-device" bind:value={audioDevice}>
+            <option value="default">Default</option>
+            {#each audioDevices as device}
+              <option value={device.id}>{device.name}</option>
+            {/each}
+          </select>
+        </div>
+      </section>
+
+      <!-- Transcription Settings -->
+      <section class="settings-section">
+        <h3>Transcription Settings</h3>
+        <div class="field">
+          <label for="model">Model</label>
+          <select id="model" bind:value={model}>
+            {#each modelOptions as opt}
+              <option value={opt}>{opt}</option>
+            {/each}
+          </select>
+        </div>
+        <div class="field">
+          <label for="language">Language</label>
+          <input id="language" type="text" bind:value={language} placeholder="en" />
+        </div>
+        <div class="field">
+          <label for="compute-device">Compute Device</label>
+          <select id="compute-device" bind:value={computeDevice}>
+            {#each computeDevices as dev}
+              <option value={dev.id}>{dev.name}</option>
+            {/each}
+          </select>
+        </div>
+        <div class="field">
+          <label for="compute-type">Compute Type</label>
+          <select id="compute-type" bind:value={computeType}>
+            {#each computeTypeOptions as opt}
+              <option value={opt.value}>{opt.label}</option>
+            {/each}
+          </select>
+        </div>
+      </section>
+
+      <!-- Realtime Preview -->
+      <section class="settings-section">
+        <h3>Realtime Preview</h3>
+        <div class="field-row">
+          <label for="enable-realtime">Enable Realtime Preview</label>
+          <input
+            id="enable-realtime"
+            type="checkbox"
+            bind:checked={enableRealtime}
+          />
+        </div>
+        {#if enableRealtime}
+          <div class="field">
+            <label for="realtime-model">Realtime Model</label>
+            <select id="realtime-model" bind:value={realtimeModel}>
+              {#each modelOptions as opt}
+                <option value={opt}>{opt}</option>
+              {/each}
+            </select>
+          </div>
+          <div class="field">
+            <label for="realtime-pause"
+              >Processing Pause: {realtimeProcessingPause.toFixed(2)}s</label
+            >
+            <input
+              id="realtime-pause"
+              type="range"
+              min="0.01"
+              max="1.0"
+              step="0.01"
+              bind:value={realtimeProcessingPause}
+            />
+          </div>
+        {/if}
+      </section>
+
+      <!-- VAD Settings -->
+      <section class="settings-section">
+        <h3>VAD Settings</h3>
+        <div class="field">
+          <label for="silero-sensitivity"
+            >Silero Sensitivity: {sileroSensitivity.toFixed(2)}</label
+          >
+          <input
+            id="silero-sensitivity"
+            type="range"
+            min="0.0"
+            max="1.0"
+            step="0.05"
+            bind:value={sileroSensitivity}
+          />
+        </div>
+        <div class="field">
+          <label for="webrtc-sensitivity">WebRTC Sensitivity</label>
+          <select id="webrtc-sensitivity" bind:value={webrtcSensitivity}>
+            {#each webrtcOptions as opt}
+              <option value={opt.value}>{opt.label}</option>
+            {/each}
+          </select>
+        </div>
+      </section>
+
+      <!-- Timing -->
+      <section class="settings-section">
+        <h3>Timing</h3>
+        <div class="field">
+          <label for="post-speech-silence"
+            >Post-Speech Silence: {postSpeechSilence.toFixed(2)}s</label
+          >
+          <input
+            id="post-speech-silence"
+            type="range"
+            min="0.1"
+            max="3.0"
+            step="0.1"
+            bind:value={postSpeechSilence}
+          />
+        </div>
+        <div class="field">
+          <label for="min-recording"
+            >Min Recording Length: {minRecordingLength.toFixed(2)}s</label
+          >
+          <input
+            id="min-recording"
+            type="range"
+            min="0.1"
+            max="5.0"
+            step="0.1"
+            bind:value={minRecordingLength}
+          />
+        </div>
+        <div class="field">
+          <label for="min-gap"
+            >Min Gap Between Recordings: {minGapBetween.toFixed(2)}s</label
+          >
+          <input
+            id="min-gap"
+            type="range"
+            min="0"
+            max="3.0"
+            step="0.1"
+            bind:value={minGapBetween}
+          />
+        </div>
+        <div class="field-row">
+          <label for="continuous-mode">Continuous Mode</label>
+          <input
+            id="continuous-mode"
+            type="checkbox"
+            bind:checked={continuousMode}
+          />
+        </div>
+      </section>
+
+      <!-- Display Settings -->
+      <section class="settings-section">
+        <h3>Display Settings</h3>
+        <div class="field-row">
+          <label for="show-timestamps">Show Timestamps</label>
+          <input
+            id="show-timestamps"
+            type="checkbox"
+            bind:checked={showTimestamps}
+          />
+        </div>
+        <div class="field">
+          <label for="fade-seconds"
+            >Fade After Seconds: {fadeSeconds} (0 = never)</label
+          >
+          <input
+            id="fade-seconds"
+            type="range"
+            min="0"
+            max="60"
+            step="1"
+            bind:value={fadeSeconds}
+          />
+        </div>
+        <div class="field">
+          <label for="max-lines">Max Lines: {maxLines}</label>
+          <input
+            id="max-lines"
+            type="range"
+            min="10"
+            max="500"
+            step="10"
+            bind:value={maxLines}
+          />
+        </div>
+        <div class="field">
+          <label for="font-size">Font Size: {fontSize}px</label>
+          <input
+            id="font-size"
+            type="range"
+            min="8"
+            max="32"
+            step="1"
+            bind:value={fontSize}
+          />
+        </div>
+      </section>
+
+      <!-- Color Settings -->
+      <section class="settings-section">
+        <h3>Color Settings</h3>
+        <div class="field-row">
+          <label for="user-color">User Color</label>
+          <input id="user-color" type="color" bind:value={userColor} />
+        </div>
+        <div class="field-row">
+          <label for="text-color">Text Color</label>
+          <input id="text-color" type="color" bind:value={textColor} />
+        </div>
+        <div class="field-row">
+          <label for="bg-color">Background Color</label>
+          <input id="bg-color" type="color" bind:value={backgroundColor} />
+        </div>
+      </section>
+
+      <!-- Server Sync -->
+      <section class="settings-section">
+        <h3>Server Sync</h3>
+        <div class="field-row">
+          <label for="sync-enabled">Enable Server Sync</label>
+          <input
+            id="sync-enabled"
+            type="checkbox"
+            bind:checked={syncEnabled}
+          />
+        </div>
+        {#if syncEnabled}
+          <div class="field">
+            <label for="sync-url">Server URL</label>
+            <input
+              id="sync-url"
+              type="url"
+              bind:value={syncUrl}
+              placeholder="http://localhost:3000/api/send"
+            />
+          </div>
+          <div class="field">
+            <label for="sync-room">Room</label>
+            <input id="sync-room" type="text" bind:value={syncRoom} />
+          </div>
+          <div class="field">
+            <label for="sync-passphrase">Passphrase</label>
+            <input
+              id="sync-passphrase"
+              type="password"
+              bind:value={syncPassphrase}
+            />
+          </div>
+        {/if}
+      </section>
+
+      <!-- Remote Transcription -->
+      <section class="settings-section">
+        <h3>Remote Transcription</h3>
+        <div class="radio-group">
+          <label>
+            <input
+              type="radio"
+              name="remote-mode"
+              value="local"
+              bind:group={remoteMode}
+            />
+            Local
+          </label>
+          <label>
+            <input
+              type="radio"
+              name="remote-mode"
+              value="managed"
+              bind:group={remoteMode}
+            />
+            Managed
+          </label>
+          <label>
+            <input
+              type="radio"
+              name="remote-mode"
+              value="byok"
+              bind:group={remoteMode}
+            />
+            BYOK (Bring Your Own Key)
+          </label>
+        </div>
+        {#if remoteMode !== "local"}
+          <div class="field">
+            <label for="remote-url">Server URL</label>
+            <input
+              id="remote-url"
+              type="url"
+              bind:value={remoteServerUrl}
+              placeholder="wss://your-proxy.com"
+            />
+          </div>
+        {/if}
+        {#if remoteMode === "managed"}
+          <div class="managed-auth">
+            <div class="field">
+              <label for="managed-email">Email</label>
+              <input
+                id="managed-email"
+                type="email"
+                bind:value={managedEmail}
+                placeholder="email@example.com"
+              />
+            </div>
+            <div class="field">
+              <label for="managed-password">Password</label>
+              <input
+                id="managed-password"
+                type="password"
+                bind:value={managedPassword}
+              />
+            </div>
+            <div class="auth-buttons">
+              <button onclick={handleManagedLogin}>Login</button>
+              <button onclick={handleManagedRegister}>Register</button>
+            </div>
+          </div>
+        {/if}
+      </section>
+
+      <!-- Updates -->
+      <section class="settings-section">
+        <h3>Updates</h3>
+        <div class="field-row">
+          <label for="auto-check-updates">Auto-Check for Updates</label>
+          <input
+            id="auto-check-updates"
+            type="checkbox"
+            bind:checked={autoCheckUpdates}
+          />
+        </div>
+        <button onclick={handleCheckUpdates}>Check Now</button>
+      </section>
+    </div>
+
+    <div class="settings-footer">
+      <button onclick={handleCancel}>Cancel</button>
+      <button class="primary" onclick={handleSave}>Save</button>
+    </div>
+  </div>
+</div>
+
+<style>
+  .settings-overlay {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-color: rgba(0, 0, 0, 0.6);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 1000;
+  }
+
+  .settings-panel {
+    background-color: var(--bg-primary);
+    border: 1px solid var(--border-color);
+    border-radius: 12px;
+    width: 560px;
+    max-width: 95vw;
+    max-height: 85vh;
+    display: flex;
+    flex-direction: column;
+    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
+  }
+
+  .settings-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 16px 20px;
+    border-bottom: 1px solid var(--border-color);
+    flex-shrink: 0;
+  }
+
+  .settings-header h2 {
+    font-size: 18px;
+    font-weight: 600;
+    color: var(--text-primary);
+  }
+
+  .close-btn {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 32px;
+    height: 32px;
+    padding: 0;
+    border: none;
+    border-radius: 6px;
+    background-color: transparent;
+    color: var(--text-secondary);
+    cursor: pointer;
+  }
+
+  .close-btn:hover {
+    background-color: var(--bg-tertiary);
+    color: var(--text-primary);
+  }
+
+  .settings-content {
+    flex: 1;
+    overflow-y: auto;
+    padding: 16px 20px;
+  }
+
+  .settings-section {
+    margin-bottom: 24px;
+  }
+
+  .settings-section:last-child {
+    margin-bottom: 0;
+  }
+
+  .settings-section h3 {
+    font-size: 14px;
+    font-weight: 600;
+    color: var(--accent-blue);
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+    margin-bottom: 12px;
+    padding-bottom: 6px;
+    border-bottom: 1px solid var(--border-color);
+  }
+
+  .field {
+    margin-bottom: 12px;
+  }
+
+  .field label {
+    display: block;
+    margin-bottom: 4px;
+    font-size: 12px;
+    color: var(--text-secondary);
+  }
+
+  .field-row {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 12px;
+  }
+
+  .field-row label {
+    font-size: 13px;
+    color: var(--text-primary);
+  }
+
+  .radio-group {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+    margin-bottom: 12px;
+  }
+
+  .radio-group label {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    font-size: 13px;
+    color: var(--text-primary);
+    cursor: pointer;
+  }
+
+  .managed-auth {
+    margin-top: 8px;
+    padding: 12px;
+    background-color: var(--bg-secondary);
+    border-radius: 8px;
+  }
+
+  .auth-buttons {
+    display: flex;
+    gap: 8px;
+    margin-top: 8px;
+  }
+
+  .settings-footer {
+    display: flex;
+    justify-content: flex-end;
+    gap: 8px;
+    padding: 16px 20px;
+    border-top: 1px solid var(--border-color);
+    flex-shrink: 0;
+  }
+</style>

src/lib/components/StatusBar.svelte

@@ -0,0 +1,106 @@
+<script lang="ts">
+  import { backendStore } from "$lib/stores/backend";
+  import { configStore } from "$lib/stores/config";
+
+  let statusColor = $derived.by(() => {
+    switch (backendStore.appState) {
+      case "initializing":
+        return "#ff9800";
+      case "ready":
+        return "#4caf50";
+      case "transcribing":
+        return "#f44336";
+      case "error":
+        return "#f44336";
+      default:
+        return "#888";
+    }
+  });
+
+  let isPulsing = $derived(backendStore.appState === "transcribing");
+  let userName = $derived(configStore.config.user.name);
+</script>
+
+<div class="status-bar">
+  <div class="status-left">
+    <span
+      class="status-indicator"
+      class:pulsing={isPulsing}
+      style="background-color: {statusColor}"
+    ></span>
+    <span class="state-message">{backendStore.stateMessage}</span>
+  </div>
+  <div class="status-right">
+    {#if backendStore.deviceInfo}
+      <span class="device-info">{backendStore.deviceInfo}</span>
+      <span class="separator">|</span>
+    {/if}
+    <span class="user-name">{userName}</span>
+  </div>
+</div>
+
+<style>
+  .status-bar {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 6px 20px;
+    background-color: var(--bg-secondary);
+    border-bottom: 1px solid var(--border-color);
+    font-size: 12px;
+    flex-shrink: 0;
+  }
+
+  .status-left {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+  }
+
+  .status-right {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    color: var(--text-secondary);
+  }
+
+  .status-indicator {
+    width: 10px;
+    height: 10px;
+    border-radius: 50%;
+    flex-shrink: 0;
+  }
+
+  .status-indicator.pulsing {
+    animation: pulse 1.5s ease-in-out infinite;
+  }
+
+  @keyframes pulse {
+    0%,
+    100% {
+      opacity: 1;
+      box-shadow: 0 0 0 0 rgba(244, 67, 54, 0.4);
+    }
+    50% {
+      opacity: 0.7;
+      box-shadow: 0 0 0 6px rgba(244, 67, 54, 0);
+    }
+  }
+
+  .state-message {
+    color: var(--text-primary);
+  }
+
+  .device-info {
+    color: var(--text-secondary);
+  }
+
+  .separator {
+    color: var(--text-muted);
+  }
+
+  .user-name {
+    color: var(--accent-green);
+    font-weight: 500;
+  }
+</style>

src/lib/components/TranscriptionDisplay.svelte

@@ -0,0 +1,110 @@
+<script lang="ts">
+  import { transcriptionStore } from "$lib/stores/transcriptions";
+  import { configStore } from "$lib/stores/config";
+
+  let container: HTMLDivElement | undefined = $state();
+  let showTimestamps = $derived(configStore.config.display.show_timestamps);
+  let items = $derived(transcriptionStore.items);
+
+  $effect(() => {
+    // Trigger on items length change to auto-scroll
+    const _len = items.length;
+    if (container) {
+      requestAnimationFrame(() => {
+        if (container) {
+          container.scrollTop = container.scrollHeight;
+        }
+      });
+    }
+  });
+</script>
+
+<div class="transcription-display" bind:this={container}>
+  {#each items as item (item.id)}
+    <div class="transcription-item" class:preview={item.isPreview}>
+      {#if showTimestamps && item.timestamp}
+        <span class="timestamp">[{item.timestamp}]</span>
+      {/if}
+      {#if item.userName}
+        <span class="user-name">{item.userName}:</span>
+      {/if}
+      {#if item.isPreview}
+        <span class="preview-indicator">[...]</span>
+      {/if}
+      <span class="text">{item.text}</span>
+    </div>
+  {:else}
+    <div class="empty-state">
+      Transcriptions will appear here...
+    </div>
+  {/each}
+</div>
+
+<style>
+  .transcription-display {
+    flex: 1;
+    overflow-y: auto;
+    padding: 12px 20px;
+    display: flex;
+    flex-direction: column;
+    gap: 6px;
+  }
+
+  .transcription-item {
+    padding: 6px 10px;
+    border-radius: 4px;
+    background-color: rgba(255, 255, 255, 0.03);
+    animation: fadeIn 0.2s ease-out;
+    line-height: 1.6;
+    word-wrap: break-word;
+  }
+
+  .transcription-item.preview {
+    font-style: italic;
+    opacity: 0.7;
+  }
+
+  .timestamp {
+    color: #888;
+    font-size: 0.85em;
+    margin-right: 8px;
+    font-family: monospace;
+  }
+
+  .user-name {
+    color: #4caf50;
+    font-weight: 700;
+    margin-right: 6px;
+  }
+
+  .preview-indicator {
+    color: #888;
+    font-size: 0.85em;
+    margin-right: 4px;
+  }
+
+  .text {
+    color: #ffffff;
+  }
+
+  .empty-state {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 100%;
+    color: var(--text-muted);
+    font-size: 15px;
+    font-style: italic;
+  }
+
+  @keyframes fadeIn {
+    from {
+      opacity: 0;
+      transform: translateY(4px);
+    }
+    to {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
+</style>

src/lib/stores/backend.ts

@@ -0,0 +1,266 @@
+/**
+ * Backend store - manages WebSocket connection and REST API communication
+ * with the Python backend server running on localhost.
+ *
+ * The backend port defaults to 8081 but can be updated at runtime via
+ * `setPort()`. The WebSocket connects to /ws/control for real-time push
+ * of transcriptions, previews, and state changes.
+ */
+
+export type ConnectionState = "connecting" | "connected" | "disconnected" | "error";
+export type AppState = "initializing" | "ready" | "transcribing" | "reloading" | "error";
+
+interface BackendState {
+  port: number;
+  connectionState: ConnectionState;
+  appState: AppState;
+  stateMessage: string;
+  deviceInfo: string;
+  wsConnection: WebSocket | null;
+  version: string;
+  lastError: string;
+}
+
+let state = $state<BackendState>({
+  port: 8081,
+  connectionState: "disconnected",
+  appState: "initializing",
+  stateMessage: "Connecting to backend...",
+  deviceInfo: "",
+  wsConnection: null,
+  version: "1.4.0",
+  lastError: "",
+});
+
+let reconnectTimer: ReturnType<typeof setTimeout> | null = null;
+let reconnectAttempts = 0;
+const MAX_RECONNECT_DELAY_MS = 30_000;
+const BASE_RECONNECT_DELAY_MS = 1_000;
+
+// ── URL helpers ──────────────────────────────────────────────────────
+
+function apiUrl(path: string): string {
+  const normalised = path.startsWith("/") ? path : `/${path}`;
+  return `http://localhost:${state.port}${normalised}`;
+}
+
+async function apiFetch(path: string, options?: RequestInit): Promise<Response> {
+  const url = apiUrl(path);
+  const method = options?.method?.toUpperCase() ?? "GET";
+  const headers = new Headers(options?.headers);
+  if (method !== "GET" && !headers.has("Content-Type")) {
+    headers.set("Content-Type", "application/json");
+  }
+  return fetch(url, { ...options, headers });
+}
+
+// ── WebSocket management ─────────────────────────────────────────────
+
+function connectWebSocket() {
+  // Tear down any existing connection
+  disconnect();
+
+  state.connectionState = "connecting";
+  reconnectAttempts = 0;
+
+  _openSocket();
+}
+
+function _openSocket() {
+  const wsUrl = `ws://localhost:${state.port}/ws/control`;
+
+  try {
+    const ws = new WebSocket(wsUrl);
+
+    ws.onopen = () => {
+      state.connectionState = "connected";
+      state.lastError = "";
+      reconnectAttempts = 0;
+      if (reconnectTimer) {
+        clearTimeout(reconnectTimer);
+        reconnectTimer = null;
+      }
+    };
+
+    ws.onmessage = (event) => {
+      try {
+        const data = JSON.parse(event.data);
+        handleWebSocketMessage(data);
+      } catch {
+        // ignore parse errors
+      }
+    };
+
+    ws.onclose = () => {
+      state.wsConnection = null;
+      if (state.connectionState !== "disconnected") {
+        state.connectionState = "error";
+        state.stateMessage = "Disconnected from backend";
+        _scheduleReconnect();
+      }
+    };
+
+    ws.onerror = () => {
+      state.lastError = "WebSocket error";
+      // onclose fires after this, which handles reconnect
+    };
+
+    state.wsConnection = ws;
+  } catch {
+    state.connectionState = "error";
+    state.stateMessage = "Failed to connect";
+    _scheduleReconnect();
+  }
+}
+
+function _scheduleReconnect() {
+  if (reconnectTimer) return;
+
+  const delay = Math.min(
+    BASE_RECONNECT_DELAY_MS * Math.pow(2, reconnectAttempts),
+    MAX_RECONNECT_DELAY_MS,
+  );
+  reconnectAttempts++;
+
+  reconnectTimer = setTimeout(() => {
+    reconnectTimer = null;
+    if (state.connectionState !== "disconnected") {
+      state.connectionState = "connecting";
+      _openSocket();
+    }
+  }, delay);
+}
+
+function disconnect() {
+  if (reconnectTimer) {
+    clearTimeout(reconnectTimer);
+    reconnectTimer = null;
+  }
+  state.connectionState = "disconnected";
+  if (state.wsConnection) {
+    const ws = state.wsConnection;
+    ws.onclose = null;
+    ws.onerror = null;
+    ws.close();
+    state.wsConnection = null;
+  }
+}
+
+// ── WebSocket message handling ───────────────────────────────────────
+
+function handleWebSocketMessage(data: Record<string, unknown>) {
+  // Handle state changes locally
+  if (data.type === "state_changed") {
+    if (data.state) {
+      state.appState = data.state as AppState;
+    }
+    if (data.message) {
+      state.stateMessage = data.message as string;
+    }
+  }
+
+  if (data.type === "error") {
+    state.lastError = (data.message as string) ?? "Unknown error";
+  }
+
+  // Dispatch to window for other stores (transcriptions, etc.)
+  if (data.type === "transcription") {
+    window.dispatchEvent(
+      new CustomEvent("backend:transcription", { detail: data })
+    );
+  } else if (data.type === "preview") {
+    window.dispatchEvent(
+      new CustomEvent("backend:preview", { detail: data })
+    );
+  } else if (data.type === "credits_low") {
+    window.dispatchEvent(
+      new CustomEvent("backend:credits_low", { detail: data })
+    );
+  }
+}
+
+// ── Port management ──────────────────────────────────────────────────
+
+function setPort(newPort: number) {
+  if (newPort === state.port) return;
+  state.port = newPort;
+  // Reconnect with new port if we had a connection
+  if (state.connectionState !== "disconnected") {
+    connectWebSocket();
+  }
+}
+
+// ── Typed REST helpers ───────────────────────────────────────────────
+
+async function apiGet<T = unknown>(path: string): Promise<T> {
+  const resp = await apiFetch(path);
+  if (!resp.ok) throw new Error(`GET ${path} failed: ${resp.status}`);
+  return resp.json();
+}
+
+async function apiPost<T = unknown>(
+  path: string,
+  body?: unknown
+): Promise<T> {
+  const resp = await apiFetch(path, {
+    method: "POST",
+    body: body !== undefined ? JSON.stringify(body) : undefined,
+  });
+  if (!resp.ok) throw new Error(`POST ${path} failed: ${resp.status}`);
+  return resp.json();
+}
+
+async function apiPut<T = unknown>(
+  path: string,
+  body?: unknown
+): Promise<T> {
+  const resp = await apiFetch(path, {
+    method: "PUT",
+    body: body !== undefined ? JSON.stringify(body) : undefined,
+  });
+  if (!resp.ok) throw new Error(`PUT ${path} failed: ${resp.status}`);
+  return resp.json();
+}
+
+// ── Public API ───────────────────────────────────────────────────────
+
+export const backendStore = {
+  get port() {
+    return state.port;
+  },
+  get connectionState() {
+    return state.connectionState;
+  },
+  get connected() {
+    return state.connectionState === "connected";
+  },
+  get appState() {
+    return state.appState;
+  },
+  get stateMessage() {
+    return state.stateMessage;
+  },
+  get deviceInfo() {
+    return state.deviceInfo;
+  },
+  get version() {
+    return state.version;
+  },
+  get lastError() {
+    return state.lastError;
+  },
+  get apiBaseUrl() {
+    return `http://localhost:${state.port}`;
+  },
+  get wsUrl() {
+    return `ws://localhost:${state.port}/ws/control`;
+  },
+  setPort,
+  connect: connectWebSocket,
+  disconnect,
+  apiUrl,
+  apiFetch,
+  apiGet,
+  apiPost,
+  apiPut,
+};

src/lib/stores/config.ts

@@ -0,0 +1,243 @@
+/**
+ * Config store - manages application configuration loaded from
+ * and saved to the Python backend via the backend store's API helpers.
+ *
+ * The backend accepts PUT /api/config with `{ settings: { "dot.key": value } }`.
+ */
+
+import { backendStore } from "$lib/stores/backend";
+
+export interface AppConfig {
+  user: {
+    name: string;
+    id: string;
+  };
+  audio: {
+    input_device: string;
+    sample_rate: number;
+  };
+  transcription: {
+    model: string;
+    device: string;
+    language: string;
+    compute_type: string;
+    enable_realtime_transcription: boolean;
+    realtime_model: string;
+    realtime_processing_pause: number;
+    silero_sensitivity: number;
+    silero_use_onnx: boolean;
+    webrtc_sensitivity: number;
+    post_speech_silence_duration: number;
+    min_length_of_recording: number;
+    min_gap_between_recordings: number;
+    pre_recording_buffer_duration: number;
+    beam_size: number;
+    initial_prompt: string;
+    no_log_file: boolean;
+    continuous_mode: boolean;
+  };
+  server_sync: {
+    enabled: boolean;
+    url: string;
+    room: string;
+    passphrase: string;
+  };
+  display: {
+    show_timestamps: boolean;
+    max_lines: number;
+    font_source: string;
+    font_family: string;
+    websafe_font: string;
+    google_font: string;
+    custom_font_file: string;
+    font_size: number;
+    theme: string;
+    fade_after_seconds: number;
+    user_color: string;
+    text_color: string;
+    background_color: string;
+  };
+  web_server: {
+    port: number;
+    host: string;
+  };
+  remote: {
+    mode: string;
+    server_url: string;
+    auth_token: string;
+    byok_api_key: string;
+    deepgram_model: string;
+    language: string;
+    fallback_to_local: boolean;
+  };
+  updates: {
+    auto_check: boolean;
+    gitea_url: string;
+    owner: string;
+    repo: string;
+    skipped_versions: string[];
+    last_check: string;
+    check_interval_hours: number;
+  };
+}
+
+function getDefaultConfig(): AppConfig {
+  return {
+    user: { name: "User", id: "" },
+    audio: { input_device: "default", sample_rate: 16000 },
+    transcription: {
+      model: "base.en",
+      device: "auto",
+      language: "en",
+      compute_type: "default",
+      enable_realtime_transcription: false,
+      realtime_model: "tiny.en",
+      realtime_processing_pause: 0.1,
+      silero_sensitivity: 0.4,
+      silero_use_onnx: true,
+      webrtc_sensitivity: 3,
+      post_speech_silence_duration: 0.3,
+      min_length_of_recording: 0.5,
+      min_gap_between_recordings: 0,
+      pre_recording_buffer_duration: 0.2,
+      beam_size: 5,
+      initial_prompt: "",
+      no_log_file: true,
+      continuous_mode: false,
+    },
+    server_sync: {
+      enabled: false,
+      url: "http://localhost:3000/api/send",
+      room: "default",
+      passphrase: "",
+    },
+    display: {
+      show_timestamps: true,
+      max_lines: 100,
+      font_source: "System Font",
+      font_family: "Courier",
+      websafe_font: "Arial",
+      google_font: "Roboto",
+      custom_font_file: "",
+      font_size: 12,
+      theme: "dark",
+      fade_after_seconds: 10,
+      user_color: "#4CAF50",
+      text_color: "#FFFFFF",
+      background_color: "#000000B3",
+    },
+    web_server: { port: 8080, host: "127.0.0.1" },
+    remote: {
+      mode: "local",
+      server_url: "",
+      auth_token: "",
+      byok_api_key: "",
+      deepgram_model: "nova-2",
+      language: "en-US",
+      fallback_to_local: true,
+    },
+    updates: {
+      auto_check: true,
+      gitea_url: "https://repo.anhonesthost.net",
+      owner: "streamer-tools",
+      repo: "local-transcription",
+      skipped_versions: [],
+      last_check: "",
+      check_interval_hours: 24,
+    },
+  };
+}
+
+let config = $state<AppConfig>(getDefaultConfig());
+let loading = $state(false);
+let error = $state("");
+
+/**
+ * Fetch the full configuration tree from the backend.
+ * GET /api/config
+ */
+async function fetchConfig(): Promise<void> {
+  loading = true;
+  error = "";
+
+  try {
+    const data = await backendStore.apiGet<Record<string, unknown>>("/api/config");
+    // Deep merge with defaults to ensure all keys exist
+    config = deepMerge(getDefaultConfig(), data) as AppConfig;
+  } catch (err) {
+    error = err instanceof Error ? err.message : String(err);
+    console.error("[config] fetchConfig failed:", error);
+  } finally {
+    loading = false;
+  }
+}
+
+function deepMerge(target: Record<string, unknown>, source: Record<string, unknown>): Record<string, unknown> {
+  const result = { ...target };
+  for (const key of Object.keys(source)) {
+    if (
+      source[key] &&
+      typeof source[key] === "object" &&
+      !Array.isArray(source[key]) &&
+      target[key] &&
+      typeof target[key] === "object" &&
+      !Array.isArray(target[key])
+    ) {
+      result[key] = deepMerge(
+        target[key] as Record<string, unknown>,
+        source[key] as Record<string, unknown>
+      );
+    } else {
+      result[key] = source[key];
+    }
+  }
+  return result;
+}
+
+/**
+ * Send a batch of setting updates to the backend.
+ * PUT /api/config with body `{ settings: { "dot.key": value, ... } }`
+ *
+ * Keys use dot-notation, e.g. `{ "transcription.model": "small.en" }`.
+ *
+ * Returns the response payload on success, or throws on failure.
+ */
+async function updateConfig(
+  settings: Record<string, unknown>,
+): Promise<{ status: string; message: string; engine_reloaded: boolean }> {
+  loading = true;
+  error = "";
+
+  try {
+    const result = await backendStore.apiPut<{
+      status: string;
+      message: string;
+      engine_reloaded: boolean;
+    }>("/api/config", { settings });
+
+    // Refresh the local config tree so the UI stays in sync
+    await fetchConfig();
+
+    return result;
+  } catch (err) {
+    error = err instanceof Error ? err.message : String(err);
+    console.error("[config] updateConfig failed:", error);
+    throw err;
+  } finally {
+    loading = false;
+  }
+}
+
+export const configStore = {
+  get config() {
+    return config;
+  },
+  get loading() {
+    return loading;
+  },
+  get error() {
+    return error;
+  },
+  fetchConfig,
+  updateConfig,
+};

src/lib/stores/transcriptions.ts

@@ -0,0 +1,109 @@
+/**
+ * Transcriptions store - manages the list of transcription items
+ * received from the backend via WebSocket.
+ */
+
+export interface TranscriptionItem {
+  id: string;
+  text: string;
+  userName: string;
+  timestamp: string;
+  isPreview: boolean;
+}
+
+let items = $state<TranscriptionItem[]>([]);
+let nextId = 0;
+
+function generateId(): string {
+  return `t-${Date.now()}-${nextId++}`;
+}
+
+function addTranscription(data: {
+  text?: string;
+  user_name?: string;
+  timestamp?: string;
+}) {
+  // When a final transcription arrives, remove any existing preview
+  const previewIndex = items.findIndex((item) => item.isPreview);
+  if (previewIndex !== -1) {
+    items.splice(previewIndex, 1);
+  }
+
+  items.push({
+    id: generateId(),
+    text: data.text ?? "",
+    userName: data.user_name ?? "",
+    timestamp: data.timestamp ?? "",
+    isPreview: false,
+  });
+
+  // Keep a reasonable limit
+  if (items.length > 500) {
+    items.splice(0, items.length - 500);
+  }
+}
+
+function setPreview(data: {
+  text?: string;
+  user_name?: string;
+  timestamp?: string;
+}) {
+  const existingIndex = items.findIndex((item) => item.isPreview);
+  const previewItem: TranscriptionItem = {
+    id: existingIndex !== -1 ? items[existingIndex].id : generateId(),
+    text: data.text ?? "",
+    userName: data.user_name ?? "",
+    timestamp: data.timestamp ?? "",
+    isPreview: true,
+  };
+
+  if (existingIndex !== -1) {
+    items[existingIndex] = previewItem;
+  } else {
+    items.push(previewItem);
+  }
+}
+
+function clearAll() {
+  items.length = 0;
+}
+
+function getPlainText(): string {
+  return items
+    .filter((item) => !item.isPreview)
+    .map((item) => {
+      let line = "";
+      if (item.timestamp) line += `[${item.timestamp}] `;
+      if (item.userName) line += `${item.userName}: `;
+      line += item.text;
+      return line;
+    })
+    .join("\n");
+}
+
+// Listen for backend events
+if (typeof window !== "undefined") {
+  window.addEventListener("backend:transcription", ((e: CustomEvent) => {
+    addTranscription(e.detail);
+  }) as EventListener);
+
+  window.addEventListener("backend:preview", ((e: CustomEvent) => {
+    setPreview(e.detail);
+  }) as EventListener);
+}
+
+export const transcriptionStore = {
+  get items() {
+    return items;
+  },
+  get currentPreview(): TranscriptionItem | null {
+    return items.find((item) => item.isPreview) ?? null;
+  },
+  get transcriptions(): TranscriptionItem[] {
+    return items.filter((item) => !item.isPreview);
+  },
+  addTranscription,
+  setPreview,
+  clearAll,
+  getPlainText,
+};

version.py

@@ -1,7 +1,7 @@
 """Version information for Local Transcription."""
 
-__version__ = "1.4.0"
-__version_info__ = (1, 4, 0)
+__version__ = "1.4.1"
+__version_info__ = (1, 4, 1)
 
 # Version history:
 # 1.4.0 - Auto-update feature: