Add built-in Web UI for media control and monitoring

- Add static file serving to FastAPI application
- Create responsive web interface with real-time updates
- Features:
  - Real-time status updates via WebSocket
  - Album artwork display with automatic updates
  - Playback controls (play, pause, next, previous)
  - Volume control with mute toggle
  - Seekable progress bar
  - Token authentication with localStorage persistence
  - Dark theme and responsive design
  - Auto-reconnect WebSocket support
- Update README with Web UI documentation
- Zero dependencies (vanilla HTML/CSS/JavaScript)

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>

README.md

@@ -4,14 +4,58 @@ A REST API server for controlling system media playback on Windows, Linux, macOS
 
 ## Features
 
+- **Built-in Web UI** for real-time media control and monitoring
 - Control any media player via system-wide media transport controls
 - Play/Pause/Stop/Next/Previous track
 - Volume control and mute
 - Seek within tracks
 - Get current track info (title, artist, album, artwork)
+- WebSocket support for real-time updates
 - Token-based authentication
 - Cross-platform support
 
+## Web UI
+
+The media server includes a built-in web interface for controlling and monitoring media playback.
+
+### Features
+
+- **Real-time status updates** via WebSocket connection
+- **Album artwork display** with automatic updates
+- **Playback controls** - Play, pause, next, previous
+- **Volume control** with mute toggle
+- **Seekable progress bar** - Click to jump to any position
+- **Connection status indicator** - Know when you're connected
+- **Token authentication** - Saved in browser localStorage
+- **Responsive design** - Works on desktop and mobile
+- **Dark theme** - Easy on the eyes
+
+### Accessing the Web UI
+
+1. Start the media server:
+   ```bash
+   python -m media_server.main
+   ```
+
+2. Open your browser and navigate to:
+   ```
+   http://localhost:8765/
+   ```
+
+3. Enter your API token when prompted (get it with `media-server --show-token`)
+
+4. Start playing media in any supported player and watch the UI update in real-time!
+
+### Remote Access
+
+To access the Web UI from other devices on your network:
+
+1. Find your computer's IP address (e.g., `192.168.1.100`)
+2. Navigate to `http://192.168.1.100:8765/` from any device on the same network
+3. Enter your API token
+
+**Security Note:** For remote access over the internet, use a reverse proxy with HTTPS (nginx, Caddy) to encrypt traffic.
+
 ## Requirements
 
 - Python 3.10+
@@ -71,13 +115,17 @@ Requires Termux and Termux:API apps from F-Droid.
    python -m media_server.main
    ```
 
-4. Test the connection:
-   ```bash
-   curl http://localhost:8765/api/health
-   ```
+4. **Open the Web UI** (recommended):
+   - Navigate to `http://localhost:8765/` in your browser
+   - Enter your API token from step 2
+   - Start playing media and control it from the web interface!
 
-5. Test with authentication:
+5. Or test via API:
    ```bash
+   # Health check (no auth required)
+   curl http://localhost:8765/api/health
+
+   # Get media status
    curl -H "Authorization: Bearer YOUR_TOKEN" http://localhost:8765/api/media/status
    ```
 
@@ -164,6 +212,9 @@ All control endpoints require authentication and return `{"success": true}` on s
 | `/api/media/volume` | POST | `{"volume": 75}` | Set volume (0-100) |
 | `/api/media/mute` | POST | - | Toggle mute |
 | `/api/media/seek` | POST | `{"position": 60.0}` | Seek to position (seconds) |
+| `/api/media/turn_on` | POST | - | Execute on_turn_on callback |
+| `/api/media/turn_off` | POST | - | Execute on_turn_off callback |
+| `/api/media/toggle` | POST | - | Execute on_toggle callback |
 
 ### Script Execution
 
@@ -263,6 +314,95 @@ Script configuration options:
 | `working_dir` | No | Working directory for the command |
 | `shell` | No | Run in shell (default: true) |
 
+### Configuring Callbacks
+
+Callbacks are optional commands executed after media actions. Add them in your `config.yaml`:
+
+```yaml
+callbacks:
+  # Media control callbacks (run after successful action)
+  on_play:
+    command: "echo Play triggered"
+    timeout: 10
+    shell: true
+
+  on_pause:
+    command: "echo Pause triggered"
+    timeout: 10
+    shell: true
+
+  on_stop:
+    command: "echo Stop triggered"
+    timeout: 10
+    shell: true
+
+  on_next:
+    command: "echo Next track"
+    timeout: 10
+    shell: true
+
+  on_previous:
+    command: "echo Previous track"
+    timeout: 10
+    shell: true
+
+  on_volume:
+    command: "echo Volume changed"
+    timeout: 10
+    shell: true
+
+  on_mute:
+    command: "echo Mute toggled"
+    timeout: 10
+    shell: true
+
+  on_seek:
+    command: "echo Seek triggered"
+    timeout: 10
+    shell: true
+
+  # Turn on/off/toggle (callback-only actions, no default behavior)
+  on_turn_on:
+    command: "echo PC turned on"
+    timeout: 10
+    shell: true
+
+  on_turn_off:
+    command: "rundll32.exe user32.dll,LockWorkStation"
+    timeout: 5
+    shell: true
+
+  on_toggle:
+    command: "echo Toggle triggered"
+    timeout: 10
+    shell: true
+```
+
+Available callbacks:
+
+| Callback | Triggered by | Description |
+|----------|--------------|-------------|
+| `on_play` | `/api/media/play` | After play succeeds |
+| `on_pause` | `/api/media/pause` | After pause succeeds |
+| `on_stop` | `/api/media/stop` | After stop succeeds |
+| `on_next` | `/api/media/next` | After next track succeeds |
+| `on_previous` | `/api/media/previous` | After previous track succeeds |
+| `on_volume` | `/api/media/volume` | After volume change succeeds |
+| `on_mute` | `/api/media/mute` | After mute toggle |
+| `on_seek` | `/api/media/seek` | After seek succeeds |
+| `on_turn_on` | `/api/media/turn_on` | Callback-only action |
+| `on_turn_off` | `/api/media/turn_off` | Callback-only action |
+| `on_toggle` | `/api/media/toggle` | Callback-only action |
+
+Callback configuration options:
+
+| Field | Required | Description |
+|-------|----------|-------------|
+| `command` | Yes | Command to execute |
+| `timeout` | No | Execution timeout in seconds (default: 30, max: 300) |
+| `working_dir` | No | Working directory for the command |
+| `shell` | No | Run in shell (default: true) |
+
 ## Running as a Service
 
 ### Windows Task Scheduler (Recommended)

config.example.yaml

@@ -45,3 +45,63 @@ scripts:
     description: "Restart the PC immediately"
     timeout: 10
     shell: true
+
+# Callback scripts (executed after media actions)
+# All callbacks are optional - if not defined, the action runs without callback
+callbacks:
+  # Media control callbacks (run after successful action)
+  on_play:
+    command: "echo Play triggered"
+    timeout: 10
+    shell: true
+
+  on_pause:
+    command: "echo Pause triggered"
+    timeout: 10
+    shell: true
+
+  on_stop:
+    command: "echo Stop triggered"
+    timeout: 10
+    shell: true
+
+  on_next:
+    command: "echo Next track"
+    timeout: 10
+    shell: true
+
+  on_previous:
+    command: "echo Previous track"
+    timeout: 10
+    shell: true
+
+  on_volume:
+    command: "echo Volume changed"
+    timeout: 10
+    shell: true
+
+  on_mute:
+    command: "echo Mute toggled"
+    timeout: 10
+    shell: true
+
+  on_seek:
+    command: "echo Seek triggered"
+    timeout: 10
+    shell: true
+
+  # Turn on/off/toggle (callback-only actions, no default behavior)
+  on_turn_on:
+    command: "echo Turn on callback"
+    timeout: 10
+    shell: true
+
+  on_turn_off:
+    command: "rundll32.exe user32.dll,LockWorkStation"
+    timeout: 5
+    shell: true
+
+  on_toggle:
+    command: "echo Toggle callback"
+    timeout: 10
+    shell: true

media_server/config.py

@@ -10,6 +10,15 @@ from pydantic import BaseModel, Field
 from pydantic_settings import BaseSettings, SettingsConfigDict
 
 
+class CallbackConfig(BaseModel):
+    """Configuration for a callback script (no label/description needed)."""
+
+    command: str = Field(..., description="Command or script to execute")
+    timeout: int = Field(default=30, description="Execution timeout in seconds", ge=1, le=300)
+    working_dir: Optional[str] = Field(default=None, description="Working directory")
+    shell: bool = Field(default=True, description="Run command in shell")
+
+
 class ScriptConfig(BaseModel):
     """Configuration for a custom script."""
 
@@ -47,6 +56,12 @@ class Settings(BaseSettings):
         default=1.0, description="Media status poll interval in seconds"
     )
 
+    # Audio device settings
+    audio_device: Optional[str] = Field(
+        default=None,
+        description="Audio device name to control (None = default device). Use /api/audio/devices to list available devices.",
+    )
+
     # Logging
     log_level: str = Field(default="INFO", description="Logging level")
 
@@ -56,6 +71,12 @@ class Settings(BaseSettings):
         description="Custom scripts that can be executed via API",
     )
 
+    # Callback scripts (executed by integration events, not shown in UI)
+    callbacks: dict[str, CallbackConfig] = Field(
+        default_factory=dict,
+        description="Callback scripts executed by integration events (on_turn_on, on_turn_off, on_toggle)",
+    )
+
     @classmethod
     def load_from_yaml(cls, path: Optional[Path] = None) -> "Settings":
         """Load settings from a YAML configuration file."""
@@ -110,6 +131,9 @@ def generate_default_config(path: Optional[Path] = None) -> Path:
         "api_token": secrets.token_urlsafe(32),
         "poll_interval": 1.0,
         "log_level": "INFO",
+        # Audio device to control (use GET /api/audio/devices to list available devices)
+        # Set to null or remove to use default device
+        # "audio_device": "Speakers (Realtek",
         "scripts": {
             "example_script": {
                 "command": "echo Hello from Media Server!",

media_server/main.py

@@ -4,14 +4,17 @@ import argparse
 import logging
 import sys
 from contextlib import asynccontextmanager
+from pathlib import Path
 
 import uvicorn
 from fastapi import FastAPI
 from fastapi.middleware.cors import CORSMiddleware
+from fastapi.responses import FileResponse
+from fastapi.staticfiles import StaticFiles
 
 from . import __version__
 from .config import settings, generate_default_config, get_config_dir
-from .routes import health_router, media_router, scripts_router
+from .routes import audio_router, health_router, media_router, scripts_router
 from .services import get_media_controller
 from .services.websocket_manager import ws_manager
 
@@ -64,10 +67,21 @@ def create_app() -> FastAPI:
     )
 
     # Register routers
+    app.include_router(audio_router)
     app.include_router(health_router)
     app.include_router(media_router)
     app.include_router(scripts_router)
 
+    # Mount static files and serve UI at root
+    static_dir = Path(__file__).parent / "static"
+    if static_dir.exists():
+        app.mount("/static", StaticFiles(directory=str(static_dir)), name="static")
+
+        @app.get("/", include_in_schema=False)
+        async def serve_ui():
+            """Serve the Web UI."""
+            return FileResponse(static_dir / "index.html")
+
     return app
 
 

media_server/routes/__init__.py

@@ -1,7 +1,8 @@
 """API route modules."""
 
+from .audio import router as audio_router
 from .health import router as health_router
 from .media import router as media_router
 from .scripts import router as scripts_router
 
-__all__ = ["health_router", "media_router", "scripts_router"]
+__all__ = ["audio_router", "health_router", "media_router", "scripts_router"]

media_server/routes/media.py

@@ -1,5 +1,6 @@
 """Media control API endpoints."""
 
+import asyncio
 import logging
 
 from fastapi import APIRouter, Depends, HTTPException, Query, WebSocket, WebSocketDisconnect
@@ -17,6 +18,33 @@ logger = logging.getLogger(__name__)
 router = APIRouter(prefix="/api/media", tags=["media"])
 
 
+async def _run_callback(callback_name: str) -> None:
+    """Run a callback if configured. Failures are logged but don't raise."""
+    if not settings.callbacks or callback_name not in settings.callbacks:
+        return
+
+    from .scripts import _run_script
+
+    callback = settings.callbacks[callback_name]
+    loop = asyncio.get_event_loop()
+    result = await loop.run_in_executor(
+        None,
+        lambda: _run_script(
+            command=callback.command,
+            timeout=callback.timeout,
+            shell=callback.shell,
+            working_dir=callback.working_dir,
+        ),
+    )
+    if result["exit_code"] != 0:
+        logger.warning(
+            "Callback %s failed with exit code %s: %s",
+            callback_name,
+            result["exit_code"],
+            result["stderr"],
+        )
+
+
 @router.get("/status", response_model=MediaStatus)
 async def get_media_status(_: str = Depends(verify_token)) -> MediaStatus:
     """Get current media playback status.
@@ -42,6 +70,7 @@ async def play(_: str = Depends(verify_token)) -> dict:
             status_code=status.HTTP_503_SERVICE_UNAVAILABLE,
             detail="Failed to start playback - no active media session",
         )
+    await _run_callback("on_play")
     return {"success": True}
 
 
@@ -59,6 +88,7 @@ async def pause(_: str = Depends(verify_token)) -> dict:
             status_code=status.HTTP_503_SERVICE_UNAVAILABLE,
             detail="Failed to pause - no active media session",
         )
+    await _run_callback("on_pause")
     return {"success": True}
 
 
@@ -76,6 +106,7 @@ async def stop(_: str = Depends(verify_token)) -> dict:
             status_code=status.HTTP_503_SERVICE_UNAVAILABLE,
             detail="Failed to stop - no active media session",
         )
+    await _run_callback("on_stop")
     return {"success": True}
 
 
@@ -93,6 +124,7 @@ async def next_track(_: str = Depends(verify_token)) -> dict:
             status_code=status.HTTP_503_SERVICE_UNAVAILABLE,
             detail="Failed to skip - no active media session",
         )
+    await _run_callback("on_next")
     return {"success": True}
 
 
@@ -110,6 +142,7 @@ async def previous_track(_: str = Depends(verify_token)) -> dict:
             status_code=status.HTTP_503_SERVICE_UNAVAILABLE,
             detail="Failed to go back - no active media session",
         )
+    await _run_callback("on_previous")
     return {"success": True}
 
 
@@ -132,6 +165,7 @@ async def set_volume(
             status_code=status.HTTP_503_SERVICE_UNAVAILABLE,
             detail="Failed to set volume",
         )
+    await _run_callback("on_volume")
     return {"success": True, "volume": request.volume}
 
 
@@ -144,6 +178,7 @@ async def toggle_mute(_: str = Depends(verify_token)) -> dict:
     """
     controller = get_media_controller()
     muted = await controller.toggle_mute()
+    await _run_callback("on_mute")
     return {"success": True, "muted": muted}
 
 
@@ -164,9 +199,43 @@ async def seek(request: SeekRequest, _: str = Depends(verify_token)) -> dict:
             status_code=status.HTTP_503_SERVICE_UNAVAILABLE,
             detail="Failed to seek - no active media session or seek not supported",
         )
+    await _run_callback("on_seek")
     return {"success": True, "position": request.position}
 
 
+@router.post("/turn_on")
+async def turn_on(_: str = Depends(verify_token)) -> dict:
+    """Execute turn on callback if configured.
+
+    Returns:
+        Success status
+    """
+    await _run_callback("on_turn_on")
+    return {"success": True}
+
+
+@router.post("/turn_off")
+async def turn_off(_: str = Depends(verify_token)) -> dict:
+    """Execute turn off callback if configured.
+
+    Returns:
+        Success status
+    """
+    await _run_callback("on_turn_off")
+    return {"success": True}
+
+
+@router.post("/toggle")
+async def toggle(_: str = Depends(verify_token)) -> dict:
+    """Execute toggle callback if configured.
+
+    Returns:
+        Success status
+    """
+    await _run_callback("on_toggle")
+    return {"success": True}
+
+
 @router.get("/artwork")
 async def get_artwork(_: str = Depends(verify_token_or_query)) -> Response:
     """Get the current album artwork.

media_server/routes/scripts.py

@@ -82,7 +82,6 @@ async def execute_script(
             status_code=status.HTTP_404_NOT_FOUND,
             detail=f"Script '{script_name}' not found. Use /api/scripts/list to see available scripts.",
         )
-
     script_config = settings.scripts[script_name]
     args = request.args if request else []
 

media_server/static/index.html

@@ -0,0 +1,801 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Media Server</title>
+    <style>
+        :root {
+            --bg-primary: #121212;
+            --bg-secondary: #1e1e1e;
+            --bg-tertiary: #282828;
+            --text-primary: #ffffff;
+            --text-secondary: #b3b3b3;
+            --text-muted: #6a6a6a;
+            --accent: #1db954;
+            --accent-hover: #1ed760;
+            --border: #404040;
+            --error: #e74c3c;
+        }
+
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+
+        body {
+            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica', 'Arial', sans-serif;
+            background: var(--bg-primary);
+            color: var(--text-primary);
+            line-height: 1.6;
+        }
+
+        .container {
+            max-width: 800px;
+            margin: 0 auto;
+            padding: 2rem;
+        }
+
+        header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-bottom: 2rem;
+            padding-bottom: 1rem;
+            border-bottom: 1px solid var(--border);
+        }
+
+        h1 {
+            font-size: 1.5rem;
+            font-weight: 600;
+        }
+
+        .status-indicator {
+            display: flex;
+            align-items: center;
+            gap: 0.5rem;
+            font-size: 0.875rem;
+            color: var(--text-secondary);
+        }
+
+        .status-dot {
+            width: 8px;
+            height: 8px;
+            border-radius: 50%;
+            background: var(--error);
+            transition: background 0.3s;
+        }
+
+        .status-dot.connected {
+            background: var(--accent);
+        }
+
+        .player-container {
+            background: var(--bg-secondary);
+            border-radius: 12px;
+            padding: 2rem;
+            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
+        }
+
+        .album-art-container {
+            display: flex;
+            justify-content: center;
+            margin-bottom: 2rem;
+        }
+
+        #album-art {
+            width: 300px;
+            height: 300px;
+            object-fit: cover;
+            border-radius: 8px;
+            box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
+            background: var(--bg-tertiary);
+        }
+
+        .track-info {
+            text-align: center;
+            margin-bottom: 2rem;
+        }
+
+        #track-title {
+            font-size: 1.75rem;
+            font-weight: 600;
+            margin-bottom: 0.5rem;
+            color: var(--text-primary);
+        }
+
+        #artist {
+            font-size: 1.125rem;
+            color: var(--text-secondary);
+            margin-bottom: 0.25rem;
+        }
+
+        #album {
+            font-size: 0.875rem;
+            color: var(--text-muted);
+        }
+
+        .playback-state {
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            gap: 0.5rem;
+            font-size: 0.875rem;
+            color: var(--text-secondary);
+            margin-top: 0.5rem;
+        }
+
+        .state-icon {
+            width: 16px;
+            height: 16px;
+        }
+
+        .progress-container {
+            margin-bottom: 2rem;
+        }
+
+        .time-display {
+            display: flex;
+            justify-content: space-between;
+            font-size: 0.75rem;
+            color: var(--text-secondary);
+            margin-bottom: 0.5rem;
+        }
+
+        .progress-bar {
+            width: 100%;
+            height: 6px;
+            background: var(--bg-tertiary);
+            border-radius: 3px;
+            cursor: pointer;
+            position: relative;
+            overflow: hidden;
+        }
+
+        .progress-fill {
+            height: 100%;
+            background: var(--accent);
+            border-radius: 3px;
+            width: 0;
+            transition: width 0.1s linear;
+        }
+
+        .controls {
+            display: flex;
+            gap: 1rem;
+            justify-content: center;
+            align-items: center;
+            margin-bottom: 2rem;
+        }
+
+        button {
+            background: var(--bg-tertiary);
+            border: none;
+            color: var(--text-primary);
+            cursor: pointer;
+            border-radius: 50%;
+            width: 48px;
+            height: 48px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            transition: all 0.2s;
+        }
+
+        button:hover:not(:disabled) {
+            background: var(--accent);
+            transform: scale(1.05);
+        }
+
+        button:disabled {
+            opacity: 0.3;
+            cursor: not-allowed;
+        }
+
+        button.primary {
+            width: 56px;
+            height: 56px;
+            background: var(--accent);
+        }
+
+        button.primary:hover:not(:disabled) {
+            background: var(--accent-hover);
+            transform: scale(1.1);
+        }
+
+        .volume-container {
+            display: flex;
+            align-items: center;
+            gap: 1rem;
+            padding: 1rem;
+            background: var(--bg-tertiary);
+            border-radius: 8px;
+            margin-bottom: 1rem;
+        }
+
+        #volume-slider {
+            flex: 1;
+            height: 6px;
+            -webkit-appearance: none;
+            appearance: none;
+            background: var(--bg-primary);
+            border-radius: 3px;
+            outline: none;
+        }
+
+        #volume-slider::-webkit-slider-thumb {
+            -webkit-appearance: none;
+            appearance: none;
+            width: 16px;
+            height: 16px;
+            background: var(--accent);
+            border-radius: 50%;
+            cursor: pointer;
+        }
+
+        #volume-slider::-moz-range-thumb {
+            width: 16px;
+            height: 16px;
+            background: var(--accent);
+            border-radius: 50%;
+            cursor: pointer;
+            border: none;
+        }
+
+        .volume-display {
+            font-size: 0.875rem;
+            color: var(--text-secondary);
+            min-width: 40px;
+            text-align: right;
+        }
+
+        .mute-btn {
+            width: 40px;
+            height: 40px;
+        }
+
+        .source-info {
+            text-align: center;
+            font-size: 0.75rem;
+            color: var(--text-muted);
+            padding-top: 1rem;
+            border-top: 1px solid var(--border);
+        }
+
+        /* Auth Modal */
+        #auth-overlay {
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background: rgba(0, 0, 0, 0.9);
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            z-index: 1000;
+        }
+
+        #auth-overlay.hidden {
+            display: none;
+        }
+
+        .auth-modal {
+            background: var(--bg-secondary);
+            padding: 2rem;
+            border-radius: 12px;
+            max-width: 400px;
+            width: 90%;
+        }
+
+        .auth-modal h2 {
+            margin-bottom: 1rem;
+            font-size: 1.5rem;
+        }
+
+        .auth-modal p {
+            margin-bottom: 1rem;
+            color: var(--text-secondary);
+            font-size: 0.875rem;
+        }
+
+        #token-input {
+            width: 100%;
+            padding: 0.75rem;
+            background: var(--bg-tertiary);
+            border: 1px solid var(--border);
+            border-radius: 6px;
+            color: var(--text-primary);
+            font-size: 0.875rem;
+            margin-bottom: 1rem;
+        }
+
+        #token-input:focus {
+            outline: none;
+            border-color: var(--accent);
+        }
+
+        .btn-connect {
+            width: 100%;
+            height: auto;
+            padding: 0.75rem;
+            border-radius: 6px;
+            background: var(--accent);
+            font-weight: 600;
+        }
+
+        .btn-connect:hover {
+            background: var(--accent-hover);
+            transform: none;
+        }
+
+        .help-text {
+            background: var(--bg-tertiary);
+            padding: 0.75rem;
+            border-radius: 6px;
+            margin-top: 1rem;
+        }
+
+        .help-text code {
+            background: var(--bg-primary);
+            padding: 0.25rem 0.5rem;
+            border-radius: 3px;
+            font-family: monospace;
+            font-size: 0.875rem;
+        }
+
+        .error-message {
+            color: var(--error);
+            font-size: 0.875rem;
+            margin-top: 0.5rem;
+            display: none;
+        }
+
+        .error-message.visible {
+            display: block;
+        }
+
+        .clear-token-btn {
+            position: fixed;
+            top: 1rem;
+            right: 1rem;
+            width: auto;
+            height: auto;
+            padding: 0.5rem 1rem;
+            border-radius: 6px;
+            font-size: 0.75rem;
+            background: var(--bg-tertiary);
+            opacity: 0.7;
+        }
+
+        .clear-token-btn:hover {
+            opacity: 1;
+            background: var(--error);
+        }
+
+        /* SVG Icons */
+        svg {
+            width: 24px;
+            height: 24px;
+            fill: currentColor;
+        }
+
+        button.primary svg {
+            width: 28px;
+            height: 28px;
+        }
+
+        @media (max-width: 600px) {
+            .container {
+                padding: 1rem;
+            }
+
+            #album-art {
+                width: 250px;
+                height: 250px;
+            }
+
+            #track-title {
+                font-size: 1.5rem;
+            }
+        }
+    </style>
+</head>
+<body>
+    <!-- Clear Token Button -->
+    <button class="clear-token-btn" onclick="clearToken()" title="Clear saved token">Logout</button>
+
+    <!-- Auth Modal -->
+    <div id="auth-overlay">
+        <div class="auth-modal">
+            <h2>Media Server</h2>
+            <p>Enter your API token to connect to the media server.</p>
+            <input type="text" id="token-input" placeholder="Enter API Token" autocomplete="off">
+            <button class="btn-connect" onclick="authenticate()">Connect</button>
+            <div class="help-text">
+                <p>To get your token, run:</p>
+                <code>media-server --show-token</code>
+            </div>
+            <div class="error-message" id="auth-error"></div>
+        </div>
+    </div>
+
+    <div class="container">
+        <header>
+            <h1>Media Server</h1>
+            <div class="status-indicator">
+                <span class="status-dot" id="status-dot"></span>
+                <span id="status-text">Disconnected</span>
+            </div>
+        </header>
+
+        <div class="player-container">
+            <div class="album-art-container">
+                <img id="album-art" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 300'%3E%3Crect fill='%23282828' width='300' height='300'/%3E%3Cpath fill='%236a6a6a' d='M150 80c-38.66 0-70 31.34-70 70s31.34 70 70 70 70-31.34 70-70-31.34-70-70-70zm0 20c27.614 0 50 22.386 50 50s-22.386 50-50 50-50-22.386-50-50 22.386-50 50-50zm0 30a20 20 0 100 40 20 20 0 000-40z'/%3E%3C/svg%3E" alt="Album Art">
+            </div>
+
+            <div class="track-info">
+                <div id="track-title">No media playing</div>
+                <div id="artist"></div>
+                <div id="album"></div>
+                <div class="playback-state">
+                    <svg class="state-icon" id="state-icon" viewBox="0 0 24 24">
+                        <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 14.5v-9l6 4.5-6 4.5z"/>
+                    </svg>
+                    <span id="playback-state">Idle</span>
+                </div>
+            </div>
+
+            <div class="progress-container">
+                <div class="time-display">
+                    <span id="current-time">0:00</span>
+                    <span id="total-time">0:00</span>
+                </div>
+                <div class="progress-bar" id="progress-bar" data-duration="0">
+                    <div class="progress-fill" id="progress-fill"></div>
+                </div>
+            </div>
+
+            <div class="controls">
+                <button onclick="previousTrack()" title="Previous" id="btn-previous">
+                    <svg viewBox="0 0 24 24">
+                        <path d="M6 6h2v12H6zm3.5 6l8.5 6V6z"/>
+                    </svg>
+                </button>
+                <button class="primary" onclick="togglePlayPause()" title="Play/Pause" id="btn-play-pause">
+                    <svg viewBox="0 0 24 24" id="play-pause-icon">
+                        <path d="M8 5v14l11-7z"/>
+                    </svg>
+                </button>
+                <button onclick="nextTrack()" title="Next" id="btn-next">
+                    <svg viewBox="0 0 24 24">
+                        <path d="M6 18l8.5-6L6 6v12zM16 6v12h2V6h-2z"/>
+                    </svg>
+                </button>
+            </div>
+
+            <div class="volume-container">
+                <button class="mute-btn" onclick="toggleMute()" title="Mute" id="btn-mute">
+                    <svg viewBox="0 0 24 24" id="mute-icon">
+                        <path d="M3 9v6h4l5 5V4L7 9H3zm13.5 3c0-1.77-1.02-3.29-2.5-4.03v8.05c1.48-.73 2.5-2.25 2.5-4.02z"/>
+                    </svg>
+                </button>
+                <input type="range" id="volume-slider" min="0" max="100" value="50">
+                <div class="volume-display" id="volume-display">50%</div>
+            </div>
+
+            <div class="source-info">
+                Source: <span id="source">Unknown</span>
+            </div>
+        </div>
+    </div>
+
+    <script>
+        let ws = null;
+        let reconnectTimeout = null;
+        let currentState = 'idle';
+        let currentDuration = 0;
+        let currentPosition = 0;
+        let isUserAdjustingVolume = false;
+
+        // Initialize on page load
+        window.addEventListener('DOMContentLoaded', () => {
+            const token = localStorage.getItem('media_server_token');
+            if (token) {
+                connectWebSocket(token);
+            } else {
+                showAuthForm();
+            }
+
+            // Volume slider event
+            const volumeSlider = document.getElementById('volume-slider');
+            volumeSlider.addEventListener('input', (e) => {
+                isUserAdjustingVolume = true;
+                const volume = parseInt(e.target.value);
+                document.getElementById('volume-display').textContent = `${volume}%`;
+            });
+
+            volumeSlider.addEventListener('change', (e) => {
+                const volume = parseInt(e.target.value);
+                setVolume(volume);
+                setTimeout(() => { isUserAdjustingVolume = false; }, 500);
+            });
+
+            // Progress bar click to seek
+            const progressBar = document.getElementById('progress-bar');
+            progressBar.addEventListener('click', (e) => {
+                if (currentDuration > 0) {
+                    const rect = progressBar.getBoundingClientRect();
+                    const x = e.clientX - rect.left;
+                    const percent = x / rect.width;
+                    const seekPos = percent * currentDuration;
+                    seek(seekPos);
+                }
+            });
+
+            // Enter key in token input
+            document.getElementById('token-input').addEventListener('keypress', (e) => {
+                if (e.key === 'Enter') {
+                    authenticate();
+                }
+            });
+        });
+
+        function showAuthForm(errorMessage = '') {
+            const overlay = document.getElementById('auth-overlay');
+            overlay.classList.remove('hidden');
+
+            const errorEl = document.getElementById('auth-error');
+            if (errorMessage) {
+                errorEl.textContent = errorMessage;
+                errorEl.classList.add('visible');
+            } else {
+                errorEl.classList.remove('visible');
+            }
+        }
+
+        function hideAuthForm() {
+            document.getElementById('auth-overlay').classList.add('hidden');
+        }
+
+        function authenticate() {
+            const token = document.getElementById('token-input').value.trim();
+            if (!token) {
+                showAuthForm('Please enter a token');
+                return;
+            }
+
+            localStorage.setItem('media_server_token', token);
+            connectWebSocket(token);
+        }
+
+        function clearToken() {
+            localStorage.removeItem('media_server_token');
+            if (ws) {
+                ws.close();
+            }
+            showAuthForm('Token cleared. Please enter a new token.');
+        }
+
+        function connectWebSocket(token) {
+            const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
+            const wsUrl = `${protocol}//${window.location.host}/api/media/ws?token=${encodeURIComponent(token)}`;
+
+            ws = new WebSocket(wsUrl);
+
+            ws.onopen = () => {
+                console.log('WebSocket connected');
+                updateConnectionStatus(true);
+                hideAuthForm();
+            };
+
+            ws.onmessage = (event) => {
+                const msg = JSON.parse(event.data);
+
+                if (msg.type === 'status' || msg.type === 'status_update') {
+                    updateUI(msg.data);
+                } else if (msg.type === 'error') {
+                    console.error('WebSocket error:', msg.message);
+                }
+            };
+
+            ws.onerror = (error) => {
+                console.error('WebSocket error:', error);
+                updateConnectionStatus(false);
+            };
+
+            ws.onclose = (event) => {
+                console.log('WebSocket closed:', event.code);
+                updateConnectionStatus(false);
+
+                if (event.code === 4001) {
+                    // Invalid token
+                    localStorage.removeItem('media_server_token');
+                    showAuthForm('Invalid token. Please try again.');
+                } else if (event.code !== 1000) {
+                    // Abnormal closure - attempt reconnect
+                    reconnectTimeout = setTimeout(() => {
+                        const savedToken = localStorage.getItem('media_server_token');
+                        if (savedToken) {
+                            console.log('Attempting to reconnect...');
+                            connectWebSocket(savedToken);
+                        }
+                    }, 3000);
+                }
+            };
+
+            // Send keepalive ping every 30 seconds
+            setInterval(() => {
+                if (ws && ws.readyState === WebSocket.OPEN) {
+                    ws.send(JSON.stringify({ type: 'ping' }));
+                }
+            }, 30000);
+        }
+
+        function updateConnectionStatus(connected) {
+            const dot = document.getElementById('status-dot');
+            const text = document.getElementById('status-text');
+
+            if (connected) {
+                dot.classList.add('connected');
+                text.textContent = 'Connected';
+            } else {
+                dot.classList.remove('connected');
+                text.textContent = 'Disconnected';
+            }
+        }
+
+        function updateUI(status) {
+            // Update track info
+            document.getElementById('track-title').textContent = status.title || 'No media playing';
+            document.getElementById('artist').textContent = status.artist || '';
+            document.getElementById('album').textContent = status.album || '';
+
+            // Update state
+            currentState = status.state;
+            updatePlaybackState(status.state);
+
+            // Update album art
+            const artImg = document.getElementById('album-art');
+            if (status.album_art_url) {
+                const token = localStorage.getItem('media_server_token');
+                artImg.src = `/api/media/artwork?token=${encodeURIComponent(token)}&_=${Date.now()}`;
+            } else {
+                artImg.src = "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 300'%3E%3Crect fill='%23282828' width='300' height='300'/%3E%3Cpath fill='%236a6a6a' d='M150 80c-38.66 0-70 31.34-70 70s31.34 70 70 70 70-31.34 70-70-31.34-70-70-70zm0 20c27.614 0 50 22.386 50 50s-22.386 50-50 50-50-22.386-50-50 22.386-50 50-50zm0 30a20 20 0 100 40 20 20 0 000-40z'/%3E%3C/svg%3E";
+            }
+
+            // Update progress
+            if (status.duration && status.position !== null) {
+                currentDuration = status.duration;
+                currentPosition = status.position;
+                updateProgress(status.position, status.duration);
+            }
+
+            // Update volume
+            if (!isUserAdjustingVolume) {
+                document.getElementById('volume-slider').value = status.volume;
+                document.getElementById('volume-display').textContent = `${status.volume}%`;
+            }
+
+            // Update mute state
+            updateMuteIcon(status.muted);
+
+            // Update source
+            document.getElementById('source').textContent = status.source || 'Unknown';
+
+            // Enable/disable controls based on state
+            const hasMedia = status.state !== 'idle';
+            document.getElementById('btn-play-pause').disabled = !hasMedia;
+            document.getElementById('btn-next').disabled = !hasMedia;
+            document.getElementById('btn-previous').disabled = !hasMedia;
+        }
+
+        function updatePlaybackState(state) {
+            const stateText = document.getElementById('playback-state');
+            const stateIcon = document.getElementById('state-icon');
+            const playPauseIcon = document.getElementById('play-pause-icon');
+
+            switch(state) {
+                case 'playing':
+                    stateText.textContent = 'Playing';
+                    stateIcon.innerHTML = '<path d="M8 5v14l11-7z"/>';
+                    playPauseIcon.innerHTML = '<path d="M6 19h4V5H6v14zm8-14v14h4V5h-4z"/>';
+                    break;
+                case 'paused':
+                    stateText.textContent = 'Paused';
+                    stateIcon.innerHTML = '<path d="M6 19h4V5H6v14zm8-14v14h4V5h-4z"/>';
+                    playPauseIcon.innerHTML = '<path d="M8 5v14l11-7z"/>';
+                    break;
+                case 'stopped':
+                    stateText.textContent = 'Stopped';
+                    stateIcon.innerHTML = '<path d="M6 6h12v12H6z"/>';
+                    playPauseIcon.innerHTML = '<path d="M8 5v14l11-7z"/>';
+                    break;
+                default:
+                    stateText.textContent = 'Idle';
+                    stateIcon.innerHTML = '<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 14.5v-9l6 4.5-6 4.5z"/>';
+                    playPauseIcon.innerHTML = '<path d="M8 5v14l11-7z"/>';
+            }
+        }
+
+        function updateProgress(position, duration) {
+            const percent = (position / duration) * 100;
+            document.getElementById('progress-fill').style.width = `${percent}%`;
+            document.getElementById('current-time').textContent = formatTime(position);
+            document.getElementById('total-time').textContent = formatTime(duration);
+            document.getElementById('progress-bar').dataset.duration = duration;
+        }
+
+        function updateMuteIcon(muted) {
+            const muteIcon = document.getElementById('mute-icon');
+            if (muted) {
+                muteIcon.innerHTML = '<path d="M16.5 12c0-1.77-1.02-3.29-2.5-4.03v2.21l2.45 2.45c.03-.2.05-.41.05-.63zm2.5 0c0 .94-.2 1.82-.54 2.64l1.51 1.51C20.63 14.91 21 13.5 21 12c0-4.28-2.99-7.86-7-8.77v2.06c2.89.86 5 3.54 5 6.71zM4.27 3L3 4.27 7.73 9H3v6h4l5 5v-6.73l4.25 4.25c-.67.52-1.42.93-2.25 1.18v2.06c1.38-.31 2.63-.95 3.69-1.81L19.73 21 21 19.73l-9-9L4.27 3zM12 4L9.91 6.09 12 8.18V4z"/>';
+            } else {
+                muteIcon.innerHTML = '<path d="M3 9v6h4l5 5V4L7 9H3zm13.5 3c0-1.77-1.02-3.29-2.5-4.03v8.05c1.48-.73 2.5-2.25 2.5-4.02z"/>';
+            }
+        }
+
+        function formatTime(seconds) {
+            if (!seconds || seconds < 0) return '0:00';
+            const mins = Math.floor(seconds / 60);
+            const secs = Math.floor(seconds % 60);
+            return `${mins}:${secs.toString().padStart(2, '0')}`;
+        }
+
+        // API Commands
+        async function sendCommand(endpoint, body = null) {
+            const token = localStorage.getItem('media_server_token');
+
+            const options = {
+                method: 'POST',
+                headers: {
+                    'Authorization': `Bearer ${token}`,
+                    'Content-Type': 'application/json'
+                }
+            };
+
+            if (body) {
+                options.body = JSON.stringify(body);
+            }
+
+            try {
+                const response = await fetch(`/api/media/${endpoint}`, options);
+                if (!response.ok) {
+                    console.error(`Command ${endpoint} failed:`, response.status);
+                }
+            } catch (error) {
+                console.error(`Error sending command ${endpoint}:`, error);
+            }
+        }
+
+        function togglePlayPause() {
+            if (currentState === 'playing') {
+                sendCommand('pause');
+            } else {
+                sendCommand('play');
+            }
+        }
+
+        function nextTrack() {
+            sendCommand('next');
+        }
+
+        function previousTrack() {
+            sendCommand('previous');
+        }
+
+        function setVolume(volume) {
+            sendCommand('volume', { volume: volume });
+        }
+
+        function toggleMute() {
+            sendCommand('mute');
+        }
+
+        function seek(position) {
+            sendCommand('seek', { position: position });
+        }
+    </script>
+</body>
+</html>