Sanitized mirror from private repository - 2026-04-19 15:28:05 UTC

dashboard/api/Dockerfile

@@ -0,0 +1,8 @@
+FROM python:3.12-slim
+RUN apt-get update && apt-get install -y --no-install-recommends openssh-client curl && rm -rf /var/lib/apt/lists/*
+WORKDIR /app/api
+COPY requirements.txt .
+RUN pip install --no-cache-dir -r requirements.txt
+COPY . .
+EXPOSE 8888
+CMD ["uvicorn", "main:app", "--host", "0.0.0.0", "--port", "8888"]

dashboard/api/lib_bridge.py

@@ -0,0 +1,35 @@
+"""Bridge to import scripts/lib/ modules from the mounted volume."""
+import sys
+from pathlib import Path
+
+SCRIPTS_DIR = Path("/app/scripts")
+if not SCRIPTS_DIR.exists():
+    SCRIPTS_DIR = Path(__file__).parent.parent.parent / "scripts"
+sys.path.insert(0, str(SCRIPTS_DIR))
+
+from lib.portainer import (
+    list_containers as portainer_list_containers,
+    get_container_logs as portainer_get_container_logs,
+    restart_container as portainer_restart_container,
+    inspect_container as portainer_inspect_container,
+    ENDPOINTS,
+)
+from lib.prometheus import prom_query, prom_query_range
+from lib.ollama import ollama_available, DEFAULT_URL as OLLAMA_URL, DEFAULT_MODEL as OLLAMA_MODEL
+
+# DB paths
+GMAIL_DB = SCRIPTS_DIR / "gmail-organizer" / "processed.db"
+DVISH_DB = SCRIPTS_DIR / "gmail-organizer-dvish" / "processed.db"
+PROTON_DB = SCRIPTS_DIR / "proton-organizer" / "processed.db"
+RESTART_DB = SCRIPTS_DIR / "stack-restart.db"
+
+# Data paths
+DATA_DIR = Path("/app/data")
+if not DATA_DIR.exists():
+    DATA_DIR = Path(__file__).parent.parent.parent / "data"
+EXPENSES_CSV = DATA_DIR / "expenses.csv"
+
+# Log paths
+LOG_DIR = Path("/app/logs")
+if not LOG_DIR.exists():
+    LOG_DIR = Path("/tmp")

dashboard/api/log_parser.py

@@ -0,0 +1,194 @@
+"""Parse automation log files into structured events for the dashboard."""
+
+import os
+import re
+from datetime import datetime, date
+from pathlib import Path
+
+# Patterns: (compiled_regex, event_type, optional extractor returning extra fields)
+# Extractor receives the match object and returns a dict of extra fields.
+# Order matters — first match wins.
+PATTERNS = [
+    # --- Email classification ---
+    (re.compile(r"\[(\d+)/(\d+)\] Classifying: (.+?) \(from:"), "email_classifying",
+     lambda m: {"progress": f"{m.group(1)}/{m.group(2)}", "subject": m.group(3)}),
+    (re.compile(r"Cached: (.+?) -> (\w+)"), "email_cached",
+     lambda m: {"subject": m.group(1), "category": m.group(2)}),
+    (re.compile(r"→ (receipts|newsletters|work|personal|accounts)(?:\s*\((.+?)\))?"), "email_classified",
+     lambda m: {"category": m.group(1), "label": m.group(2) or ""}),
+
+    # --- Receipt extraction ---
+    (re.compile(r"Would write:.*'vendor': '([^']+)'.*'amount': '([^']+)'"), "receipt_extracted",
+     lambda m: {"vendor": m.group(1), "amount": m.group(2)}),
+    (re.compile(r"Appended to CSV:.*vendor=([^,]+).*amount=([^,]+)"), "receipt_extracted",
+     lambda m: {"vendor": m.group(1).strip(), "amount": m.group(2).strip()}),
+
+    # --- Cron / automation completions ---
+    (re.compile(r"Done! Stats: \{"), "cron_complete", lambda m: {}),
+
+    # --- Container health / stack restarts ---
+    (re.compile(r"Container (\S+) on (\S+) restarted"), "container_restarted",
+     lambda m: {"container": m.group(1), "endpoint": m.group(2)}),
+    (re.compile(r"LLM says (SAFE|UNSAFE) for (\S+)"), "restart_analysis",
+     lambda m: {"decision": m.group(1), "container": m.group(2)}),
+    (re.compile(r"[Uu]nhealthy.*?(\S+)\s+on\s+(\S+)"), "container_unhealthy",
+     lambda m: {"container": m.group(1), "endpoint": m.group(2)}),
+    (re.compile(r"[Uu]nhealthy"), "container_unhealthy", lambda m: {}),
+    (re.compile(r"Stack-restart check complete"), "stack_healthy", lambda m: {}),
+
+    # --- Backups ---
+    (re.compile(r"Backup Validation: (OK|FAIL)"), "backup_result",
+     lambda m: {"status": m.group(1)}),
+    (re.compile(r"Backup Report"), "backup_result", lambda m: {"status": "report"}),
+
+    # --- Config drift ---
+    (re.compile(r"Detected (\d+) drifts? across (\d+) services?"), "drift_found",
+     lambda m: {"drifts": m.group(1), "services": m.group(2)}),
+    (re.compile(r"No drifts found"), "drift_clean", lambda m: {}),
+
+    # --- Disk predictor ---
+    (re.compile(r"WARNING.*volume.* (\d+) days"), "disk_warning",
+     lambda m: {"days": m.group(1)}),
+    (re.compile(r"Total filesystems: (\d+)"), "disk_scan_complete",
+     lambda m: {"count": m.group(1)}),
+
+    # --- Changelog / PR review ---
+    (re.compile(r"Generated changelog with (\d+) commits"), "changelog_generated",
+     lambda m: {"commits": m.group(1)}),
+    (re.compile(r"(\d+) new commits since"), "changelog_commits",
+     lambda m: {"count": m.group(1)}),
+    (re.compile(r"Posted review comment on PR #(\d+)"), "pr_reviewed",
+     lambda m: {"pr": m.group(1)}),
+
+    # --- Catch-all patterns (lower priority) ---
+    (re.compile(r"ERROR|CRITICAL"), "error", lambda m: {}),
+    (re.compile(r"Starting .+ check|Starting .+ organizer"), "start", lambda m: {}),
+    (re.compile(r"emails? downloaded|backup: \d+ total"), "backup_progress", lambda m: {}),
+]
+
+# Timestamp pattern at the start of log lines
+TS_PATTERN = re.compile(r"^(\d{4}-\d{2}-\d{2}[\sT_]\d{2}:\d{2}:\d{2})")
+
+
+def parse_timestamp(line: str) -> datetime | None:
+    """Extract timestamp from a log line."""
+    m = TS_PATTERN.match(line)
+    if m:
+        ts_str = m.group(1).replace("_", " ").replace("T", " ")
+        try:
+            return datetime.strptime(ts_str, "%Y-%m-%d %H:%M:%S")
+        except ValueError:
+            pass
+    return None
+
+
+def classify_line(line: str) -> tuple[str, dict] | None:
+    """Return (event_type, extra_fields) if line matches a known pattern, else None."""
+    for pattern, event_type, extractor in PATTERNS:
+        m = pattern.search(line)
+        if m:
+            try:
+                extra = extractor(m)
+            except Exception:
+                extra = {}
+            return event_type, extra
+    return None
+
+
+def get_recent_events(log_dir: str | Path, max_events: int = 50) -> list[dict]:
+    """Parse today's events from all log files in log_dir."""
+    log_dir = Path(log_dir)
+    today = date.today().isoformat()
+    events = []
+
+    for log_file in log_dir.glob("*.log"):
+        source = log_file.stem
+        try:
+            with open(log_file, "r", errors="replace") as f:
+                for line in f:
+                    line = line.strip()
+                    if not line or today not in line:
+                        continue
+                    ts = parse_timestamp(line)
+                    if ts is None or ts.date().isoformat() != today:
+                        continue
+                    result = classify_line(line)
+                    if result:
+                        event_type, extra = result
+                        raw_msg = line[len(ts.isoformat().split("T")[0]) + 1:].strip().lstrip(",").strip()
+                        event = {
+                            "time": ts.strftime("%H:%M:%S"),
+                            "timestamp": ts.isoformat(),
+                            "type": event_type,
+                            "source": source,
+                            "raw": raw_msg,
+                            **extra,
+                        }
+                        events.append(event)
+        except (OSError, PermissionError):
+            continue
+
+    events.sort(key=lambda e: e["timestamp"], reverse=True)
+    return events[:max_events]
+
+
+def tail_logs(log_dir: str | Path) -> dict[str, int]:
+    """Return current file positions (sizes) for SSE polling."""
+    log_dir = Path(log_dir)
+    positions = {}
+    for log_file in log_dir.glob("*.log"):
+        try:
+            positions[str(log_file)] = log_file.stat().st_size
+        except OSError:
+            positions[str(log_file)] = 0
+    return positions
+
+
+def get_new_lines(log_dir: str | Path, positions: dict[str, int]) -> tuple[list[dict], dict[str, int]]:
+    """Read new lines since last positions. Returns (new_events, updated_positions)."""
+    log_dir = Path(log_dir)
+    today = date.today().isoformat()
+    new_events = []
+    new_positions = dict(positions)
+
+    for log_file in log_dir.glob("*.log"):
+        path_str = str(log_file)
+        old_pos = positions.get(path_str, 0)
+        try:
+            current_size = log_file.stat().st_size
+        except OSError:
+            continue
+
+        if current_size <= old_pos:
+            new_positions[path_str] = current_size
+            continue
+
+        source = log_file.stem
+        try:
+            with open(log_file, "r", errors="replace") as f:
+                f.seek(old_pos)
+                for line in f:
+                    line = line.strip()
+                    if not line or today not in line:
+                        continue
+                    ts = parse_timestamp(line)
+                    if ts is None:
+                        continue
+                    result = classify_line(line)
+                    if result:
+                        event_type, extra = result
+                        raw_msg = line[len(ts.isoformat().split("T")[0]) + 1:].strip().lstrip(",").strip()
+                        new_events.append({
+                            "time": ts.strftime("%H:%M:%S"),
+                            "timestamp": ts.isoformat(),
+                            "type": event_type,
+                            "source": source,
+                            "raw": raw_msg,
+                            **extra,
+                        })
+            new_positions[path_str] = current_size
+        except (OSError, PermissionError):
+            continue
+
+    new_events.sort(key=lambda e: e["timestamp"], reverse=True)
+    return new_events, new_positions

dashboard/api/main.py

@@ -0,0 +1,21 @@
+"""Homelab Dashboard API — aggregates data from homelab services."""
+from fastapi import FastAPI
+from fastapi.middleware.cors import CORSMiddleware
+from routers import overview, containers, media, automations, expenses, olares, network, logs, kuma
+
+app = FastAPI(title="Homelab Dashboard API", version="1.0.0")
+app.add_middleware(CORSMiddleware, allow_origins=["*"], allow_methods=["*"], allow_headers=["*"])
+app.include_router(overview.router, prefix="/api")
+app.include_router(containers.router, prefix="/api")
+app.include_router(media.router, prefix="/api")
+app.include_router(automations.router, prefix="/api")
+app.include_router(expenses.router, prefix="/api")
+app.include_router(olares.router, prefix="/api")
+app.include_router(network.router, prefix="/api")
+app.include_router(logs.router, prefix="/api")
+app.include_router(kuma.router, prefix="/api")
+
+
+@app.get("/api/health")
+def health():
+    return {"status": "ok"}

dashboard/api/requirements.txt

@@ -0,0 +1,5 @@
+fastapi==0.115.12
+uvicorn[standard]==0.34.2
+httpx==0.28.1
+pyyaml>=6.0
+sse-starlette==2.3.3

dashboard/api/routers/automations.py

@@ -0,0 +1,146 @@
+"""Automation status: email organizers, stack restarts, backup, drift."""
+
+import sqlite3
+from datetime import date
+from pathlib import Path
+from fastapi import APIRouter
+
+import sys
+sys.path.insert(0, str(Path(__file__).parent.parent))
+
+from lib_bridge import GMAIL_DB, DVISH_DB, PROTON_DB, RESTART_DB, LOG_DIR
+
+router = APIRouter(tags=["automations"])
+
+
+def _query_email_db(db_path: Path, name: str) -> dict:
+    """Query a processed.db for today's category counts and sender_cache stats."""
+    if not db_path.exists():
+        return {"name": name, "exists": False}
+
+    today = date.today().isoformat()
+    try:
+        conn = sqlite3.connect(f"file:{db_path}?mode=ro", uri=True)
+        conn.row_factory = sqlite3.Row
+
+        # Today's category counts
+        cur = conn.execute(
+            "SELECT category, COUNT(*) as cnt FROM processed "
+            "WHERE processed_at LIKE ? GROUP BY category",
+            (f"{today}%",),
+        )
+        categories = {row["category"]: row["cnt"] for row in cur}
+
+        # Total processed today
+        cur = conn.execute(
+            "SELECT COUNT(*) FROM processed WHERE processed_at LIKE ?",
+            (f"{today}%",),
+        )
+        total_today = cur.fetchone()[0]
+
+        # Sender cache stats
+        cur = conn.execute("SELECT COUNT(*) FROM sender_cache")
+        cache_size = cur.fetchone()[0]
+
+        cur = conn.execute(
+            "SELECT category, COUNT(*) as cnt FROM sender_cache GROUP BY category"
+        )
+        cache_by_category = {row["category"]: row["cnt"] for row in cur}
+
+        conn.close()
+        return {
+            "name": name,
+            "exists": True,
+            "today_total": total_today,
+            "today_categories": categories,
+            "sender_cache_size": cache_size,
+            "sender_cache_categories": cache_by_category,
+        }
+    except Exception as e:
+        return {"name": name, "exists": True, "error": str(e)}
+
+
+@router.get("/automations/email")
+def email_status():
+    """Email organizer status for all 3 accounts."""
+    accounts = [
+        _query_email_db(GMAIL_DB, "gmail"),
+        _query_email_db(DVISH_DB, "dvish"),
+        _query_email_db(PROTON_DB, "proton"),
+    ]
+    return {"accounts": accounts}
+
+
+@router.get("/automations/restarts")
+def restart_status():
+    """Recent unhealthy container tracking entries."""
+    if not RESTART_DB.exists():
+        return {"entries": [], "count": 0}
+
+    try:
+        conn = sqlite3.connect(f"file:{RESTART_DB}?mode=ro", uri=True)
+        conn.row_factory = sqlite3.Row
+        cur = conn.execute(
+            "SELECT * FROM unhealthy_tracking ORDER BY last_checked DESC LIMIT 50"
+        )
+        entries = [dict(row) for row in cur]
+        conn.close()
+        return {"entries": entries, "count": len(entries)}
+    except Exception as e:
+        return {"entries": [], "count": 0, "error": str(e)}
+
+
+@router.get("/automations/backup")
+def backup_status():
+    """Parse today's backup log for status."""
+    log_file = LOG_DIR / "gmail-backup-daily.log"
+    if not log_file.exists():
+        return {"status": "no_log", "entries": []}
+
+    today = date.today().isoformat()
+    entries = []
+    has_error = False
+
+    try:
+        with open(log_file, "r", errors="replace") as f:
+            for line in f:
+                if today in line:
+                    entries.append(line.strip())
+                    if "ERROR" in line.upper():
+                        has_error = True
+    except OSError:
+        return {"status": "read_error", "entries": []}
+
+    return {
+        "status": "error" if has_error else ("ok" if entries else "no_entries_today"),
+        "entries": entries[-20:],  # Last 20 today entries
+        "has_errors": has_error,
+    }
+
+
+@router.get("/automations/drift")
+def drift_status():
+    """Parse config-drift.log for last result."""
+    log_file = LOG_DIR / "config-drift.log"
+    if not log_file.exists():
+        return {"status": "no_log", "last_result": None}
+
+    try:
+        with open(log_file, "r", errors="replace") as f:
+            lines = f.readlines()
+
+        # Find the last meaningful result
+        for line in reversed(lines):
+            line = line.strip()
+            if "No drifts found" in line:
+                return {"status": "clean", "last_result": "No drifts found", "drifts": 0}
+            if "drift" in line.lower():
+                # Try to extract count
+                import re
+                m = re.search(r"(\d+)\s+drifts?", line)
+                count = int(m.group(1)) if m else -1
+                return {"status": "drifted", "last_result": line, "drifts": count}
+
+        return {"status": "unknown", "last_result": lines[-1].strip() if lines else None}
+    except OSError:
+        return {"status": "read_error", "last_result": None}

dashboard/api/routers/containers.py

@@ -0,0 +1,63 @@
+"""Container listing, logs, and management."""
+
+from fastapi import APIRouter, Query, HTTPException
+
+import sys
+from pathlib import Path
+sys.path.insert(0, str(Path(__file__).parent.parent))
+
+from lib_bridge import (
+    portainer_list_containers,
+    portainer_get_container_logs,
+    portainer_restart_container,
+    ENDPOINTS,
+)
+
+router = APIRouter(tags=["containers"])
+
+
+@router.get("/containers")
+def list_containers(endpoint: str | None = None):
+    """List all containers across endpoints, optional endpoint filter."""
+    targets = [endpoint] if endpoint and endpoint in ENDPOINTS else list(ENDPOINTS)
+    results = []
+    for ep in targets:
+        try:
+            containers = portainer_list_containers(ep)
+            for c in containers:
+                names = c.get("Names", [])
+                name = names[0].lstrip("/") if names else c.get("Id", "")[:12]
+                results.append({
+                    "id": c.get("Id", "")[:12],
+                    "name": name,
+                    "image": c.get("Image", ""),
+                    "state": c.get("State", ""),
+                    "status": c.get("Status", ""),
+                    "endpoint": ep,
+                })
+        except Exception as e:
+            results.append({"endpoint": ep, "error": str(e)})
+    return results
+
+
+@router.get("/containers/{container_id}/logs")
+def container_logs(container_id: str, endpoint: str = Query(...)):
+    """Get container logs. Requires endpoint query param."""
+    if endpoint not in ENDPOINTS:
+        raise HTTPException(400, f"Unknown endpoint: {endpoint}")
+    try:
+        logs = portainer_get_container_logs(endpoint, container_id)
+        return {"container_id": container_id, "endpoint": endpoint, "logs": logs}
+    except Exception as e:
+        raise HTTPException(502, f"Failed to get logs: {e}")
+
+
+@router.post("/containers/{container_id}/restart")
+def restart_container(container_id: str, endpoint: str = Query(...)):
+    """Restart a container. Requires endpoint query param."""
+    if endpoint not in ENDPOINTS:
+        raise HTTPException(400, f"Unknown endpoint: {endpoint}")
+    success = portainer_restart_container(endpoint, container_id)
+    if not success:
+        raise HTTPException(502, "Restart failed")
+    return {"status": "restarted", "container_id": container_id, "endpoint": endpoint}

dashboard/api/routers/expenses.py

@@ -0,0 +1,64 @@
+"""Expenses CSV reader and summary."""
+
+import csv
+from collections import defaultdict
+from fastapi import APIRouter, Query
+
+import sys
+from pathlib import Path
+sys.path.insert(0, str(Path(__file__).parent.parent))
+
+from lib_bridge import EXPENSES_CSV
+
+router = APIRouter(tags=["expenses"])
+
+
+def _read_expenses() -> list[dict]:
+    """Read all expenses from CSV."""
+    if not EXPENSES_CSV.exists():
+        return []
+    with open(EXPENSES_CSV, "r", newline="") as f:
+        return list(csv.DictReader(f))
+
+
+@router.get("/expenses")
+def list_expenses(month: str | None = Query(None, description="Filter by YYYY-MM")):
+    """List expenses, optionally filtered by month."""
+    expenses = _read_expenses()
+    if month:
+        expenses = [e for e in expenses if e.get("date", "").startswith(month)]
+    return expenses
+
+
+@router.get("/expenses/summary")
+def expenses_summary(month: str | None = Query(None, description="Filter by YYYY-MM")):
+    """Monthly total, count, top 10 vendors by amount."""
+    from datetime import date
+    if not month:
+        month = date.today().strftime("%Y-%m")
+    expenses = _read_expenses()
+    all_time_count = len(expenses)
+    expenses = [e for e in expenses if e.get("date", "").startswith(month)]
+
+    if not expenses:
+        return {"total": 0, "count": 0, "all_time": all_time_count, "top_vendors": [], "month": month}
+
+    total = 0.0
+    vendor_totals = defaultdict(float)
+    for e in expenses:
+        try:
+            amount = float(e.get("amount", 0))
+        except (ValueError, TypeError):
+            amount = 0.0
+        total += amount
+        vendor = e.get("vendor", "unknown")
+        vendor_totals[vendor] += amount
+
+    top_vendors = sorted(vendor_totals.items(), key=lambda x: x[1], reverse=True)[:10]
+
+    return {
+        "total": round(total, 2),
+        "count": len(expenses),
+        "top_vendors": [{"vendor": v, "amount": round(a, 2)} for v, a in top_vendors],
+        "month": month,
+    }

dashboard/api/routers/kuma.py

@@ -0,0 +1,56 @@
+"""Uptime Kuma monitor status via SSH+sqlite3."""
+
+import subprocess
+from fastapi import APIRouter
+
+router = APIRouter(tags=["kuma"])
+
+KUMA_HOST = "pi-5"
+KUMA_CONTAINER = "uptime-kuma"
+
+
+def _kuma_query(sql: str) -> str:
+    """Run a sqlite3 query against Uptime Kuma's database via SSH."""
+    result = subprocess.run(
+        ["ssh", "-o", "ConnectTimeout=3", KUMA_HOST,
+         f'docker exec {KUMA_CONTAINER} sqlite3 /app/data/kuma.db "{sql}"'],
+        capture_output=True, text=True, timeout=15)
+    if result.returncode != 0:
+        raise RuntimeError(result.stderr.strip())
+    return result.stdout.strip()
+
+
+@router.get("/kuma/monitors")
+def kuma_monitors():
+    """List all Uptime Kuma monitors with status."""
+    try:
+        rows = _kuma_query(
+            "SELECT m.id, m.name, m.type, m.active, m.url, m.hostname, m.parent, "
+            "COALESCE((SELECT h.status FROM heartbeat h WHERE h.monitor_id=m.id "
+            "ORDER BY h.time DESC LIMIT 1), -1) as last_status "
+            "FROM monitor m ORDER BY m.parent, m.name"
+        )
+        if not rows:
+            return {"monitors": [], "total": 0, "up": 0, "down": 0}
+
+        monitors = []
+        for row in rows.splitlines():
+            parts = row.split("|")
+            if len(parts) < 8:
+                continue
+            mid, name, mtype, active, url, hostname, parent, status = parts[:8]
+            monitors.append({
+                "id": int(mid),
+                "name": name,
+                "type": mtype,
+                "active": active == "1",
+                "url": url or hostname or "",
+                "parent": int(parent) if parent and parent != "" else None,
+                "status": int(status),  # 1=up, 0=down, -1=unknown
+            })
+
+        up = sum(1 for m in monitors if m["status"] == 1 and m["active"])
+        down = sum(1 for m in monitors if m["status"] == 0 and m["active"])
+        return {"monitors": monitors, "total": len(monitors), "up": up, "down": down}
+    except Exception as e:
+        return {"monitors": [], "error": str(e)}

dashboard/api/routers/logs.py

@@ -0,0 +1,59 @@
+"""Unified log viewer routes."""
+
+from fastapi import APIRouter, Query
+from pathlib import Path
+
+router = APIRouter(tags=["logs"])
+
+LOG_DIR = Path("/app/logs") if Path("/app/logs").exists() else Path("/tmp")
+
+LOG_FILES = {
+    "stack-restart": "stack-restart.log",
+    "backup": "backup-validator.log",
+    "gmail-lz": "gmail-organizer.log",
+    "gmail-dvish": "gmail-organizer-dvish.log",
+    "proton": "proton-organizer.log",
+    "receipt": "receipt-tracker.log",
+    "drift": "config-drift.log",
+    "digest": "email-digest.log",
+    "disk": "disk-predictor.log",
+    "changelog": "changelog-generator.log",
+    "subscription": "subscription-auditor.log",
+    "pr-review": "pr-reviewer.log",
+}
+
+
+@router.get("/logs")
+def list_logs():
+    """List available log files with sizes."""
+    result = []
+    for name, filename in LOG_FILES.items():
+        path = LOG_DIR / filename
+        if path.exists():
+            stat = path.stat()
+            result.append({
+                "name": name,
+                "filename": filename,
+                "size_bytes": stat.st_size,
+                "modified": stat.st_mtime,
+            })
+    return result
+
+
+@router.get("/logs/{log_name}")
+def get_log(log_name: str, tail: int = Query(200, le=2000), search: str = Query(None)):
+    """Get log file contents."""
+    if log_name not in LOG_FILES:
+        return {"error": f"Unknown log: {log_name}", "lines": []}
+    path = LOG_DIR / LOG_FILES[log_name]
+    if not path.exists():
+        return {"lines": [], "total": 0}
+
+    with open(path) as f:
+        all_lines = f.readlines()
+
+    if search:
+        all_lines = [l for l in all_lines if search.lower() in l.lower()]
+
+    lines = all_lines[-tail:]
+    return {"lines": [l.rstrip() for l in lines], "total": len(all_lines)}

dashboard/api/routers/media.py

@@ -0,0 +1,485 @@
+"""Jellyfin + Arr suite media endpoints."""
+
+import json
+import subprocess
+from fastapi import APIRouter
+import httpx
+
+router = APIRouter(tags=["media"])
+
+JELLYFIN_API_KEY = "REDACTED_API_KEY"  # pragma: allowlist secret
+JELLYFIN_USER_ID = "308e0dab19ce4a2180a2933d73694514"
+SONARR_URL = "http://192.168.0.200:8989"
+SONARR_KEY = "REDACTED_SONARR_API_KEY"  # pragma: allowlist secret
+RADARR_URL = "http://192.168.0.200:7878"
+RADARR_KEY = "REDACTED_RADARR_API_KEY"  # pragma: allowlist secret
+SABNZBD_URL = "http://192.168.0.200:8080"
+SABNZBD_KEY = "6ae289de5a4f45f7a0124b43ba9c3dea"  # pragma: allowlist secret
+
+
+def _jellyfin(path: str) -> dict:
+    """Call Jellyfin API via SSH+kubectl to bypass Olares auth sidecar."""
+    sep = "&" if "?" in path else "?"
+    url = f"http://localhost:8096{path}{sep}api_key={JELLYFIN_API_KEY}"
+    try:
+        result = subprocess.run(
+            ["ssh", "-o", "ConnectTimeout=3", "olares",
+             f"kubectl exec -n jellyfin-vishinator deploy/jellyfin -c jellyfin -- curl -s '{url}'"],
+            capture_output=True, text=True, timeout=15,
+        )
+        return json.loads(result.stdout) if result.returncode == 0 else {}
+    except Exception:
+        return {}
+
+
+@router.get("/jellyfin/latest")
+def jellyfin_latest():
+    """Get recently added items from Jellyfin."""
+    try:
+        items = _jellyfin(f"/Users/{JELLYFIN_USER_ID}/Items/Latest?Limit=10&Fields=Overview,DateCreated")
+        return [{"name": i.get("Name", "?"), "type": i.get("Type", "?"),
+                 "series": i.get("SeriesName"), "date": i.get("DateCreated", "?")[:10],
+                 "year": i.get("ProductionYear")} for i in (items if isinstance(items, list) else [])]
+    except Exception as e:
+        return {"error": str(e)}
+
+
+@router.get("/sonarr/history")
+def sonarr_history():
+    """Recent Sonarr grabs/imports."""
+    try:
+        with httpx.Client(timeout=10) as client:
+            r = client.get(f"{SONARR_URL}/api/v3/history",
+                           headers={"X-Api-Key": SONARR_KEY},
+                           params={"pageSize": 10, "sortKey": "date", "sortDirection": "descending"})
+            r.raise_for_status()
+            records = r.json().get("records", [])
+            return [{"title": rec.get("sourceTitle", "?"), "event": rec.get("eventType", "?"),
+                     "date": rec.get("date", "?")[:10],
+                     "quality": rec.get("quality", {}).get("quality", {}).get("name", "?")}
+                    for rec in records]
+    except Exception as e:
+        return {"error": str(e)}
+
+
+@router.get("/radarr/history")
+def radarr_history():
+    """Recent Radarr grabs/imports."""
+    try:
+        with httpx.Client(timeout=10) as client:
+            r = client.get(f"{RADARR_URL}/api/v3/history",
+                           headers={"X-Api-Key": RADARR_KEY},
+                           params={"pageSize": 10, "sortKey": "date", "sortDirection": "descending"})
+            r.raise_for_status()
+            records = r.json().get("records", [])
+            return [{"title": rec.get("sourceTitle", "?"), "event": rec.get("eventType", "?"),
+                     "date": rec.get("date", "?")[:10],
+                     "quality": rec.get("quality", {}).get("quality", {}).get("name", "?")}
+                    for rec in records]
+    except Exception as e:
+        return {"error": str(e)}
+
+
+@router.get("/jellyfin/status")
+def jellyfin_status():
+    """Jellyfin server status: version, libraries, sessions."""
+    info = _jellyfin("/System/Info")
+    libraries = _jellyfin("/Library/VirtualFolders")
+    sessions = _jellyfin("/Sessions")
+
+    active = []
+    idle_count = 0
+    if isinstance(sessions, list):
+        for s in sessions:
+            if s.get("NowPlayingItem"):
+                active.append({
+                    "user": s.get("UserName", ""),
+                    "client": s.get("Client", ""),
+                    "device": s.get("DeviceName", ""),
+                    "now_playing": s["NowPlayingItem"].get("Name", ""),
+                    "type": s["NowPlayingItem"].get("Type", ""),
+                })
+            else:
+                idle_count += 1
+
+    return {
+        "version": info.get("Version", "unknown"),
+        "server_name": info.get("ServerName", "unknown"),
+        "libraries": [{"name": lib.get("Name"), "type": lib.get("CollectionType", "")}
+                      for lib in libraries] if isinstance(libraries, list) else [],
+        "active_sessions": active,
+        "idle_sessions": idle_count,
+    }
+
+
+@router.get("/sonarr/queue")
+async def sonarr_queue():
+    """Sonarr download queue."""
+    try:
+        async with httpx.AsyncClient(timeout=10) as client:
+            resp = await client.get(
+                f"{SONARR_URL}/api/v3/queue",
+                headers={"X-Api-Key": SONARR_KEY},
+            )
+            return resp.json()
+    except Exception as e:
+        return {"error": str(e)}
+
+
+@router.get("/radarr/queue")
+async def radarr_queue():
+    """Radarr download queue."""
+    try:
+        async with httpx.AsyncClient(timeout=10) as client:
+            resp = await client.get(
+                f"{RADARR_URL}/api/v3/queue",
+                headers={"X-Api-Key": RADARR_KEY},
+            )
+            return resp.json()
+    except Exception as e:
+        return {"error": str(e)}
+
+
+@router.get("/sabnzbd/queue")
+async def sabnzbd_queue():
+    """SABnzbd download queue."""
+    try:
+        async with httpx.AsyncClient(timeout=10) as client:
+            resp = await client.get(
+                f"{SABNZBD_URL}/api",
+                params={"apikey": SABNZBD_KEY, "output": "json", "mode": "queue"},
+            )
+            return resp.json()
+    except Exception as e:
+        return {"error": str(e)}
+
+
+# ---------------------------------------------------------------------------
+# Prowlarr (indexer manager)
+# ---------------------------------------------------------------------------
+PROWLARR_URL = "http://192.168.0.200:9696"
+PROWLARR_KEY = "58b5963e008243cf8cc4fae5276e68af"  # pragma: allowlist secret
+
+
+@router.get("/prowlarr/stats")
+async def prowlarr_stats():
+    """Prowlarr indexer status."""
+    try:
+        async with httpx.AsyncClient(timeout=10) as client:
+            r = await client.get(
+                f"{PROWLARR_URL}/api/v1/indexer",
+                headers={"X-Api-Key": PROWLARR_KEY},
+            )
+            r.raise_for_status()
+            indexers = r.json()
+            enabled = [i for i in indexers if i.get("enable")]
+            return {
+                "total": len(indexers),
+                "enabled": len(enabled),
+                "indexers": [
+                    {"name": i["name"], "protocol": i.get("protocol", "?")}
+                    for i in enabled[:10]
+                ],
+            }
+    except Exception as e:
+        return {"total": 0, "enabled": 0, "error": str(e)}
+
+
+# ---------------------------------------------------------------------------
+# Bazarr (subtitles)
+# ---------------------------------------------------------------------------
+BAZARR_URL = "http://192.168.0.200:6767"
+BAZARR_KEY = "REDACTED_BAZARR_API_KEY"  # pragma: allowlist secret
+
+
+@router.get("/bazarr/status")
+async def bazarr_status():
+    """Bazarr subtitle status."""
+    try:
+        async with httpx.AsyncClient(timeout=10) as client:
+            r = await client.get(
+                f"{BAZARR_URL}/api/system/status",
+                headers={"X-Api-Key": BAZARR_KEY},
+            )
+            r.raise_for_status()
+            status = r.json().get("data", r.json())
+            w = await client.get(
+                f"{BAZARR_URL}/api/badges",
+                headers={"X-Api-Key": BAZARR_KEY},
+            )
+            badges = w.json() if w.status_code == 200 else {}
+            return {
+                "version": status.get("bazarr_version", "?"),
+                "sonarr_signalr": badges.get("sonarr_signalr", "?"),
+                "radarr_signalr": badges.get("radarr_signalr", "?"),
+                "wanted_episodes": badges.get("episodes", 0),
+                "wanted_movies": badges.get("movies", 0),
+            }
+    except Exception as e:
+        return {"error": str(e)}
+
+
+# ---------------------------------------------------------------------------
+# Audiobookshelf
+# ---------------------------------------------------------------------------
+ABS_URL = "http://192.168.0.200:13378"
+ABS_TOKEN = "REDACTED_TOKEN"  # pragma: allowlist secret
+
+
+@router.get("/audiobookshelf/stats")
+async def audiobookshelf_stats():
+    """Audiobookshelf library stats."""
+    try:
+        async with httpx.AsyncClient(timeout=10) as client:
+            libs = await client.get(
+                f"{ABS_URL}/api/libraries",
+                headers={"Authorization": f"Bearer {ABS_TOKEN}"},
+            )
+            libs.raise_for_status()
+            libraries = libs.json().get("libraries", [])
+            result = []
+            for lib in libraries:
+                result.append({
+                    "name": lib.get("name", "?"),
+                    "type": lib.get("mediaType", "?"),
+                    "items": lib.get("stats", {}).get("totalItems", 0),
+                })
+            return {"libraries": result, "total": sum(l["items"] for l in result)}
+    except Exception as e:
+        return {"error": str(e)}
+
+
+# ---------------------------------------------------------------------------
+# Plex
+# ---------------------------------------------------------------------------
+PLEX_TOKEN = "REDACTED_TOKEN"  # pragma: allowlist secret
+PLEX_SERVERS = {
+    "Calypso": "http://192.168.0.250:32400",
+    "Atlantis": "http://192.168.0.200:32400",
+}
+
+
+@router.get("/plex/status")
+def plex_status():
+    """Get Plex server status and active sessions."""
+    import xml.etree.ElementTree as ET
+    results = []
+    for name, url in PLEX_SERVERS.items():
+        try:
+            with httpx.Client(timeout=5) as client:
+                # Get sessions
+                r = client.get(f"{url}/status/sessions", headers={"X-Plex-Token": PLEX_TOKEN})
+                r.raise_for_status()
+                root = ET.fromstring(r.text)
+                sessions = []
+                for v in root.iter("Video"):
+                    # Build a rich title for TV episodes
+                    title = v.get("title", "?")
+                    if v.get("REDACTED_APP_PASSWORD"):
+                        season = v.get("parentTitle", "")
+                        title = f"{v.get('REDACTED_APP_PASSWORD')} — {season + ' · ' if season else ''}{title}"
+                    session = {
+                        "title": title,
+                        "type": v.get("type", "?"),
+                        "year": v.get("year"),
+                    }
+                    for p in v.iter("Player"):
+                        session["player"] = p.get("title") or p.get("product", "?")
+                        session["platform"] = p.get("platform", "?")
+                        session["device"] = p.get("device") or p.get("platform", "?")
+                        session["state"] = p.get("state", "?")
+                        session["local"] = p.get("local") == "1"
+                    for u in v.iter("User"):
+                        session["user"] = u.get("title")
+                    for s in v.iter("Session"):
+                        session["bandwidth"] = s.get("bandwidth")
+                        session["location"] = s.get("location")
+                    for m in v.iter("Media"):
+                        session["video_resolution"] = m.get("videoResolution")
+                        session["video_codec"] = m.get("videoCodec")
+                        session["media_bitrate"] = m.get("bitrate")
+                    for t in v.iter("REDACTED_APP_PASSWORD"):
+                        session["transcode"] = True
+                        session["video_decision"] = t.get("videoDecision")
+                        session["transcode_speed"] = t.get("speed")
+                    sessions.append(session)
+
+                # Get library counts
+                lr = client.get(f"{url}/library/sections", headers={"X-Plex-Token": PLEX_TOKEN})
+                libraries = []
+                if lr.status_code == 200:
+                    lroot = ET.fromstring(lr.text)
+                    for d in lroot.iter("Directory"):
+                        libraries.append({
+                            "title": d.get("title", "?"),
+                            "type": d.get("type", "?"),
+                        })
+
+                results.append({
+                    "name": name,
+                    "url": url,
+                    "online": True,
+                    "sessions": sessions,
+                    "libraries": libraries,
+                })
+        except Exception as e:
+            results.append({"name": name, "url": url, "online": False, "error": str(e), "sessions": [], "libraries": []})
+
+    return {"servers": results}
+
+
+# ---------------------------------------------------------------------------
+# Deluge (torrent client)
+# ---------------------------------------------------------------------------
+TDARR_URL = "http://192.168.0.200:8265"
+
+DELUGE_URL = "http://192.168.0.200:8112"
+
+
+@router.get("/deluge/status")
+async def deluge_status():
+    """Deluge torrent client status."""
+    try:
+        async with httpx.AsyncClient(timeout=10) as client:
+            login = await client.post(
+                f"{DELUGE_URL}/json",
+                json={"method": "auth.login", "params": ["deluge"], "id": 1},
+            )
+            if login.status_code != 200:
+                return {"available": False}
+            stats = await client.post(
+                f"{DELUGE_URL}/json",
+                json={
+                    "method": "web.update_ui",
+                    "params": [
+                        ["name", "state", "progress", "download_payload_rate",
+                         "upload_payload_rate"],
+                        {},
+                    ],
+                    "id": 2,
+                },
+            )
+            data = stats.json().get("result", {})
+            torrents = data.get("torrents", {})
+            active = [
+                t for t in torrents.values()
+                if t.get("state") in ("Downloading", "Seeding")
+            ]
+            return {
+                "available": True,
+                "total": len(torrents),
+                "active": len(active),
+                "downloading": len(
+                    [t for t in torrents.values() if t.get("state") == "Downloading"]
+                ),
+                "seeding": len(
+                    [t for t in torrents.values() if t.get("state") == "Seeding"]
+                ),
+            }
+    except Exception as e:
+        return {"available": False, "error": str(e)}
+
+
+# ---------------------------------------------------------------------------
+# Tdarr (media transcoding cluster)
+# ---------------------------------------------------------------------------
+
+
+@router.get("/tdarr/cluster")
+def tdarr_cluster():
+    """Get Tdarr cluster status — nodes, workers, stats."""
+    try:
+        # Get nodes with active workers
+        with httpx.Client(timeout=10) as client:
+            nodes_r = client.get(f"{TDARR_URL}/api/v2/get-nodes")
+            nodes_r.raise_for_status()
+            raw_nodes = nodes_r.json()
+
+            # Get statistics
+            stats_r = client.post(
+                f"{TDARR_URL}/api/v2/cruddb",
+                json={"data": {"collection": "REDACTED_APP_PASSWORD", "mode": "getAll"}},
+            )
+            stats = (
+                stats_r.json()[0]
+                if stats_r.status_code == 200 and stats_r.json()
+                else {}
+            )
+
+        nodes = []
+        total_workers = 0
+        total_active = 0
+        for nid, node in raw_nodes.items():
+            name = node.get("nodeName", "?")
+            paused = node.get("nodePaused", False)
+            workers_data = node.get("workers", {})
+
+            workers = []
+            if isinstance(workers_data, dict):
+                for wid, w in workers_data.items():
+                    if isinstance(w, dict) and w.get("file"):
+                        file_path = str(w.get("file", ""))
+                        filename = (
+                            file_path.split("/")[-1]
+                            if "/" in file_path
+                            else file_path
+                        )
+                        workers.append(
+                            {
+                                "id": wid,
+                                "type": w.get("workerType", "?"),
+                                "file": filename[:80],
+                                "percentage": round(w.get("percentage", 0), 1),
+                                "fps": w.get("fps", 0),
+                                "eta": w.get("ETA", "?"),
+                            }
+                        )
+
+            total_workers_count = (
+                len(workers_data) if isinstance(workers_data, dict) else 0
+            )
+            active_count = len(workers)
+            total_workers += total_workers_count
+            total_active += active_count
+
+            # Determine hardware type based on node name
+            hw_map = {
+                "Olares": "NVENC (RTX 5090)",
+                "Guava": "VAAPI (Radeon 760M)",
+                "NUC": "QSV (Intel)",
+                "Atlantis": "CPU",
+                "Calypso": "CPU",
+            }
+
+            nodes.append(
+                {
+                    "id": nid,
+                    "name": name,
+                    "paused": paused,
+                    "hardware": hw_map.get(name, "CPU"),
+                    "workers": workers,
+                    "active": active_count,
+                }
+            )
+
+        # Sort: active nodes first, then by name
+        nodes.sort(key=lambda n: (-n["active"], n["name"]))
+
+        return {
+            "server_version": "2.67.01",
+            "nodes": nodes,
+            "total_active": total_active,
+            "stats": {
+                "total_files": stats.get("totalFileCount", 0),
+                "transcoded": stats.get("totalTranscodeCount", 0),
+                "health_checked": stats.get("totalHealthCheckCount", 0),
+                "size_saved_gb": round(stats.get("sizeDiff", 0), 1),
+                "queue_transcode": stats.get("table0Count", 0),
+                "queue_health": stats.get("table4Count", 0),
+                "error_transcode": stats.get("table3Count", 0),
+                "error_health": stats.get("table6Count", 0),
+                "tdarr_score": stats.get("tdarrScore", "?"),
+            },
+        }
+    except Exception as e:
+        return {"error": str(e), "nodes": [], "stats": {}}

dashboard/api/routers/network.py

@@ -0,0 +1,214 @@
+"""Network / Headscale / AdGuard routes."""
+
+from fastapi import APIRouter
+import subprocess
+import json
+import httpx
+
+router = APIRouter(tags=["network"])
+
+CLOUDFLARE_TOKEN = "REDACTED_TOKEN"  # pragma: allowlist secret
+CLOUDFLARE_ZONE_ID = "4dbd15d096d71101b7c0c6362b307a66"
+AUTHENTIK_URL = "https://sso.vish.gg"
+AUTHENTIK_TOKEN = "REDACTED_TOKEN"  # pragma: allowlist secret
+GITEA_URL = "https://git.vish.gg"
+GITEA_TOKEN = "REDACTED_TOKEN"  # pragma: allowlist secret
+
+ADGUARD_URL = "http://192.168.0.250:9080"
+ADGUARD_USER = "vish"
+ADGUARD_PASS = "REDACTED_PASSWORD"
+
+
+def _adguard_get(path):
+    with httpx.Client(timeout=10) as client:
+        client.post(f"{ADGUARD_URL}/control/login", json={"name": ADGUARD_USER, "password": ADGUARD_PASS})
+        r = client.get(f"{ADGUARD_URL}/control{path}")
+        r.raise_for_status()
+        return r.json() if r.content else {}
+
+
+def _parse_headscale_time(val) -> str:
+    """Convert headscale timestamp (protobuf or string) to ISO format."""
+    if not val:
+        return ""
+    if isinstance(val, dict) and "seconds" in val:
+        from datetime import datetime, timezone
+        return datetime.fromtimestamp(val["seconds"], tz=timezone.utc).isoformat()
+    if isinstance(val, str):
+        return val[:19]
+    return ""
+
+
+@router.get("/network/headscale")
+def headscale_nodes():
+    """List Headscale nodes."""
+    result = subprocess.run(
+        ["ssh", "-o", "ConnectTimeout=3", "calypso",
+         "sudo /usr/local/bin/docker exec headscale headscale nodes list -o json"],
+        capture_output=True, text=True, timeout=15,
+    )
+    if result.returncode != 0:
+        return {"nodes": [], "error": result.stderr.strip()}
+    try:
+        nodes = json.loads(result.stdout)
+    except json.JSONDecodeError:
+        return {"nodes": [], "error": "Invalid JSON from headscale"}
+    online_count = sum(1 for n in nodes if n.get("online"))
+    return {
+        "nodes": [
+            {"name": n.get("given_name") or n.get("givenName") or n.get("name", "?"),
+             "ip": (n.get("ip_addresses") or n.get("ipAddresses") or ["?"])[0],
+             "online": n.get("online", False),
+             "last_seen": _parse_headscale_time(n.get("last_seen") or n.get("lastSeen"))}
+            for n in nodes
+        ],
+        "total": len(nodes),
+        "online": online_count,
+    }
+
+
+@router.get("/network/adguard")
+def adguard_stats():
+    """Get AdGuard DNS stats."""
+    try:
+        stats = _adguard_get("/stats")
+        return {
+            "total_queries": stats.get("num_dns_queries", 0),
+            "blocked": stats.get("num_blocked_filtering", 0),
+            "avg_time": stats.get("avg_processing_time", 0),
+        }
+    except Exception as e:
+        return {"error": str(e)}
+
+
+@router.get("/network/adguard/rewrites")
+def adguard_rewrites():
+    """List AdGuard DNS rewrites."""
+    try:
+        data = _adguard_get("/rewrite/list")
+        return [{"domain": r.get("domain", ""), "answer": r.get("answer", "")} for r in (data or [])]
+    except Exception as e:
+        return {"error": str(e)}
+
+
+@router.get("/network/cloudflare")
+def cloudflare_stats():
+    """Cloudflare DNS records with proxied status."""
+    try:
+        with httpx.Client(timeout=10) as client:
+            r = client.get(f"https://api.cloudflare.com/client/v4/zones/{CLOUDFLARE_ZONE_ID}/dns_records",
+                           headers={"Authorization": f"Bearer {CLOUDFLARE_TOKEN}"},
+                           params={"per_page": 100})
+            r.raise_for_status()
+            raw_records = r.json().get("result", [])
+            proxied_count = sum(1 for rec in raw_records if rec.get("proxied"))
+            types = {}
+            records = []
+            for rec in raw_records:
+                t = rec.get("type", "?")
+                types[t] = types.get(t, 0) + 1
+                records.append({
+                    "name": rec.get("name", "?"),
+                    "type": t,
+                    "content": rec.get("content", "?"),
+                    "proxied": rec.get("proxied", False),
+                    "ttl": rec.get("ttl", 0),
+                })
+            records.sort(key=lambda r: (r["type"], r["name"]))
+            return {
+                "total": len(records),
+                "proxied": proxied_count,
+                "dns_only": len(records) - proxied_count,
+                "types": types,
+                "records": records,
+            }
+    except Exception as e:
+        return {"error": str(e)}
+
+
+@router.get("/network/authentik")
+def authentik_info():
+    """Authentik users, sessions, and recent events."""
+    try:
+        with httpx.Client(timeout=10, verify=False) as client:
+            headers = {"Authorization": f"Bearer {AUTHENTIK_TOKEN}"}
+
+            # Users
+            ur = client.get(f"{AUTHENTIK_URL}/api/v3/core/users/", headers=headers, params={"page_size": 20})
+            users = []
+            if ur.status_code == 200:
+                for u in ur.json().get("results", []):
+                    if u.get("username", "").startswith("ak-"):
+                        continue  # Skip service accounts
+                    users.append({
+                        "username": u.get("username", "?"),
+                        "last_login": u.get("last_login", "")[:19] if u.get("last_login") else "never",
+                        "active": u.get("is_active", False),
+                    })
+
+            # Sessions
+            sr = client.get(f"{AUTHENTIK_URL}/api/v3/core/authenticated_sessions/", headers=headers)
+            session_count = sr.json().get("pagination", {}).get("count", 0) if sr.status_code == 200 else 0
+
+            # Recent events (skip noisy secret_rotate)
+            er = client.get(f"{AUTHENTIK_URL}/api/v3/events/events/", headers=headers,
+                            params={"page_size": 20, "ordering": "-created"})
+            events = []
+            if er.status_code == 200:
+                for e in er.json().get("results", []):
+                    action = e.get("action", "?")
+                    if action in ("secret_rotate",):
+                        continue
+                    user = e.get("user", {}).get("username") or e.get("context", {}).get("username", "system")
+                    events.append({
+                        "action": action,
+                        "user": user,
+                        "created": e.get("created", "?")[:19],
+                    })
+                    if len(events) >= 5:
+                        break
+
+            return {
+                "users": users,
+                "active_sessions": session_count,
+                "recent_events": events,
+            }
+    except Exception as e:
+        return {"error": str(e)}
+
+
+@router.get("/network/gitea")
+def gitea_activity():
+    """Recent Gitea commits and open PRs."""
+    try:
+        with httpx.Client(timeout=10) as client:
+            # Recent commits
+            cr = client.get(f"{GITEA_URL}/api/v1/repos/vish/homelab/commits",
+                            headers={"Authorization": f"token {GITEA_TOKEN}"},
+                            params={"limit": 5, "sha": "main"})
+            commits = []
+            if cr.status_code == 200:
+                for c in cr.json()[:5]:
+                    commits.append({
+                        "sha": c.get("sha", "?")[:7],
+                        "message": c.get("commit", {}).get("message", "?").split("\n")[0][:80],
+                        "date": c.get("commit", {}).get("committer", {}).get("date", "?")[:10],
+                        "author": c.get("commit", {}).get("author", {}).get("name", "?"),
+                    })
+
+            # Open PRs
+            pr = client.get(f"{GITEA_URL}/api/v1/repos/vish/homelab/pulls",
+                            headers={"Authorization": f"token {GITEA_TOKEN}"},
+                            params={"state": "open", "limit": 5})
+            prs = []
+            if pr.status_code == 200:
+                for p in pr.json():
+                    prs.append({
+                        "number": p.get("number"),
+                        "title": p.get("title", "?"),
+                        "user": p.get("user", {}).get("login", "?"),
+                    })
+
+            return {"commits": commits, "open_prs": prs}
+    except Exception as e:
+        return {"error": str(e)}

dashboard/api/routers/olares.py

@@ -0,0 +1,93 @@
+"""Olares K3s pod listing and GPU status."""
+
+import subprocess
+from fastapi import APIRouter, Query
+
+router = APIRouter(tags=["olares"])
+
+
+def _ssh_olares(cmd: str, timeout: int = 10) -> str:
+    """Run a command on olares via SSH."""
+    result = subprocess.run(
+        ["ssh", "-o", "ConnectTimeout=3", "olares", cmd],
+        capture_output=True, text=True, timeout=timeout,
+    )
+    return result.stdout if result.returncode == 0 else ""
+
+
+@router.get("/olares/pods")
+def olares_pods(namespace: str | None = Query(None)):
+    """List K3s pods on olares."""
+    if namespace:
+        cmd = f"kubectl get pods -n {namespace} -o wide --no-headers"
+    else:
+        cmd = "kubectl get pods -A -o wide --no-headers"
+
+    output = _ssh_olares(cmd, timeout=15)
+    if not output:
+        return []
+
+    pods = []
+    for line in output.strip().split("\n"):
+        parts = line.split()
+        if not parts:
+            continue
+        if namespace:
+            # No namespace column when -n is used
+            if len(parts) >= 7:
+                pods.append({
+                    "namespace": namespace,
+                    "name": parts[0],
+                    "ready": parts[1],
+                    "status": parts[2],
+                    "restarts": parts[3],
+                    "age": parts[4],
+                    "ip": parts[5] if len(parts) > 5 else "",
+                    "node": parts[6] if len(parts) > 6 else "",
+                })
+        else:
+            # Has namespace column
+            if len(parts) >= 8:
+                pods.append({
+                    "namespace": parts[0],
+                    "name": parts[1],
+                    "ready": parts[2],
+                    "status": parts[3],
+                    "restarts": parts[4],
+                    "age": parts[5],
+                    "ip": parts[6] if len(parts) > 6 else "",
+                    "node": parts[7] if len(parts) > 7 else "",
+                })
+    return pods
+
+
+@router.get("/olares/gpu")
+def olares_gpu():
+    """GPU status from olares."""
+    output = _ssh_olares(
+        "nvidia-smi --query-gpu=name,temperature.gpu,power.draw,power.limit,"
+        "memory.used,memory.total,utilization.gpu --format=csv,noheader,nounits"
+    )
+    if not output:
+        return {"available": False}
+
+    parts = [p.strip() for p in output.strip().split(",")]
+
+    def _float(val: str) -> float | None:
+        try:
+            return float(val)
+        except (ValueError, TypeError):
+            return None
+
+    if len(parts) >= 7:
+        return {
+            "available": True,
+            "name": parts[0],
+            "temp_c": _float(parts[1]),
+            "power_draw_w": _float(parts[2]),
+            "power_limit_w": _float(parts[3]),
+            "memory_used_mb": _float(parts[4]),
+            "memory_total_mb": _float(parts[5]),
+            "utilization_pct": _float(parts[6]),
+        }
+    return {"available": False}

dashboard/api/routers/overview.py

@@ -0,0 +1,768 @@
+"""Overview stats and SSE activity stream."""
+
+import asyncio
+import json
+import os
+import subprocess
+import sqlite3
+from datetime import date, datetime, timezone
+from fastapi import APIRouter
+from sse_starlette.sse import EventSourceResponse
+import httpx
+
+import sys
+from pathlib import Path
+sys.path.insert(0, str(Path(__file__).parent.parent))
+
+from lib_bridge import (
+    portainer_list_containers, ENDPOINTS, ollama_available,
+    GMAIL_DB, DVISH_DB, PROTON_DB, RESTART_DB, LOG_DIR, OLLAMA_URL,
+    prom_query,
+)
+from log_parser import get_recent_events, tail_logs, get_new_lines
+
+router = APIRouter(tags=["overview"])
+
+
+def _count_today_emails(db_path: Path) -> int:
+    """Count emails processed today from a processed.db file."""
+    if not db_path.exists():
+        return 0
+    try:
+        today = date.today().isoformat()
+        conn = sqlite3.connect(f"file:{db_path}?mode=ro", uri=True)
+        cur = conn.execute(
+            "SELECT COUNT(*) FROM processed WHERE processed_at LIKE ?",
+            (f"{today}%",),
+        )
+        count = cur.fetchone()[0]
+        conn.close()
+        return count
+    except Exception:
+        return 0
+
+
+def _count_unhealthy(db_path: Path) -> int:
+    """Count unhealthy containers from stack-restart.db."""
+    if not db_path.exists():
+        return 0
+    try:
+        conn = sqlite3.connect(f"file:{db_path}?mode=ro", uri=True)
+        cur = conn.execute("SELECT COUNT(*) FROM unhealthy_tracking")
+        count = cur.fetchone()[0]
+        conn.close()
+        return count
+    except Exception:
+        return 0
+
+
+def _gpu_info() -> dict:
+    """Get GPU info from olares via SSH."""
+    try:
+        result = subprocess.run(
+            ["ssh", "-o", "ConnectTimeout=3", "olares",
+             "nvidia-smi --query-gpu=temperature.gpu,power.draw,power.limit,"
+             "memory.used,memory.total,utilization.gpu --format=csv,noheader,nounits"],
+            capture_output=True, text=True, timeout=10,
+        )
+        if result.returncode != 0:
+            return {"available": False}
+        parts = [p.strip() for p in result.stdout.strip().split(",")]
+
+        def _f(v):
+            try:
+                return float(v)
+            except (ValueError, TypeError):
+                return None
+
+        if len(parts) >= 6:
+            return {
+                "available": True,
+                "temp_c": _f(parts[0]),
+                "power_draw_w": _f(parts[1]),
+                "power_limit_w": _f(parts[2]),
+                "memory_used_mb": _f(parts[3]),
+                "memory_total_mb": _f(parts[4]),
+                "utilization_pct": _f(parts[5]),
+            }
+    except Exception:
+        pass
+    return {"available": False}
+
+
+@router.get("/stats/overview")
+def stats_overview():
+    """Aggregate overview stats."""
+    # Container counts
+    container_counts = {}
+    total = 0
+    for ep_name in ENDPOINTS:
+        try:
+            containers = portainer_list_containers(ep_name)
+            running = sum(1 for c in containers if c.get("State") == "running")
+            container_counts[ep_name] = {"total": len(containers), "running": running}
+            total += len(containers)
+        except Exception:
+            container_counts[ep_name] = {"total": 0, "running": 0, "error": True}
+
+    # GPU
+    gpu = _gpu_info()
+
+    # Email counts
+    email_today = {
+        "gmail": _count_today_emails(GMAIL_DB),
+        "dvish": _count_today_emails(DVISH_DB),
+        "proton": _count_today_emails(PROTON_DB),
+    }
+    email_today["total"] = sum(email_today.values())
+
+    # Unhealthy
+    unhealthy = _count_unhealthy(RESTART_DB)
+
+    # Ollama
+    ollama_up = ollama_available(OLLAMA_URL)
+
+    return {
+        "containers": {"total": total, "by_endpoint": container_counts},
+        "gpu": gpu,
+        "email_today": email_today,
+        "unhealthy_count": unhealthy,
+        "ollama_available": ollama_up,
+    }
+
+
+@router.get("/activity")
+async def activity_stream():
+    """SSE stream of today's automation events."""
+
+    async def event_generator():
+        # Send initial batch
+        events = get_recent_events(LOG_DIR)
+        yield {"event": "init", "data": json.dumps(events)}
+
+        # Poll for new events
+        positions = tail_logs(LOG_DIR)
+        while True:
+            await asyncio.sleep(5)
+            new_events, positions = get_new_lines(LOG_DIR, positions)
+            if new_events:
+                yield {"event": "update", "data": json.dumps(new_events)}
+
+    return EventSourceResponse(event_generator())
+
+
+@router.post("/actions/pause-organizers")
+def pause_organizers():
+    """Pause all email organizer cron jobs."""
+    result = subprocess.run(
+        ["/home/homelab/organized/repos/homelab/scripts/gmail-organizer-ctl.sh", "stop"],
+        capture_output=True, text=True, timeout=10,
+    )
+    return {"success": result.returncode == 0, "output": result.stdout.strip()}
+
+
+@router.post("/actions/resume-organizers")
+def resume_organizers():
+    """Resume all email organizer cron jobs."""
+    result = subprocess.run(
+        ["/home/homelab/organized/repos/homelab/scripts/gmail-organizer-ctl.sh", "start"],
+        capture_output=True, text=True, timeout=10,
+    )
+    return {"success": result.returncode == 0, "output": result.stdout.strip()}
+
+
+@router.get("/actions/organizer-status")
+def organizer_status():
+    """Check if organizers are running or paused."""
+    result = subprocess.run(
+        ["/home/homelab/organized/repos/homelab/scripts/gmail-organizer-ctl.sh", "status"],
+        capture_output=True, text=True, timeout=10,
+    )
+    return {"output": result.stdout.strip()}
+
+
+@router.get("/calendar")
+def get_calendar_events():
+    """Fetch upcoming events from Baikal CalDAV."""
+    import re
+    from datetime import datetime, timezone
+
+    BAIKAL_URL = os.environ.get("BAIKAL_URL", "http://192.168.0.200:12852/dav.php/calendars/vish/default/")
+    BAIKAL_USER = os.environ.get("BAIKAL_USER", "vish")
+    BAIKAL_PASS = "REDACTED_PASSWORD"BAIKAL_PASS", "")
+    if not BAIKAL_PASS:
+        "REDACTED_PASSWORD" {"events": [], "error": "BAIKAL_PASS not set"}
+
+    today = datetime.now(timezone.utc).strftime("%Y%m%dT000000Z")
+    body = f'''<?xml version="1.0" encoding="UTF-8"?>
+<c:calendar-query xmlns:d="DAV:" xmlns:c="urn:ietf:params:xml:ns:caldav">
+  <d:prop><d:getetag/><c:calendar-data/></d:prop>
+  <c:filter>
+    <c:comp-filter name="VCALENDAR">
+      <c:comp-filter name="VEVENT">
+        <c:time-range start="{today}"/>
+      </c:comp-filter>
+    </c:comp-filter>
+  </c:filter>
+</c:calendar-query>'''
+
+    try:
+        auth = httpx.DigestAuth(BAIKAL_USER, BAIKAL_PASS)
+        with httpx.Client(timeout=10) as client:
+            r = client.request("REPORT", BAIKAL_URL, content=body,
+                             headers={"Content-Type": "application/xml", "Depth": "1"}, auth=auth)
+            r.raise_for_status()
+
+        # Parse iCal events
+        summaries = re.findall(r'SUMMARY:(.*?)(?:\r?\n)', r.text)
+        starts = re.findall(r'DTSTART[^:]*:(.*?)(?:\r?\n)', r.text)
+        locations = re.findall(r'LOCATION:(.*?)(?:\r?\n)', r.text)
+
+        events = []
+        now = datetime.now(timezone.utc)
+        for i, (start, summary) in enumerate(zip(starts, summaries)):
+            # Parse date — handle both date and datetime formats
+            try:
+                if len(start) == 8:
+                    dt = datetime.strptime(start, "%Y%m%d").replace(tzinfo=timezone.utc)
+                else:
+                    clean = start.replace("Z", "")
+                    dt = datetime.strptime(clean[:15], "%Y%m%dT%H%M%S").replace(tzinfo=timezone.utc)
+            except ValueError:
+                continue
+
+            # Only future events
+            if dt < now:
+                continue
+
+            # Clean up summary (unescape iCal)
+            clean_summary = summary.replace("\\,", ",").replace("\\;", ";").replace("&amp;", "&")
+
+            events.append({
+                "summary": clean_summary,
+                "start": dt.isoformat(),
+                "date": dt.strftime("%b %d"),
+                "time": dt.strftime("%I:%M %p") if len(start) > 8 else "All day",
+                "location": locations[i].replace("\\,", ",").replace("\\n", ", ") if i < len(locations) else None,
+            })
+
+        # Sort by date, limit to next 8
+        events.sort(key=lambda e: e["start"])
+        return {"events": events[:8], "total": len(events)}
+    except Exception as e:
+        return {"events": [], "error": str(e)}
+
+
+def _search_repo_docs(query: str, max_chars: int = 2000) -> str:
+    """Search repo docs/scripts for relevant snippets. Lightweight keyword match."""
+    import re
+    repo = Path("/app/scripts").parent if Path("/app/scripts").exists() else Path(__file__).parent.parent.parent.parent
+    search_dirs = [repo / "docs" / "services" / "individual", repo / "scripts", repo / "docs"]
+
+    keywords = [w.lower() for w in re.findall(r'\w{3,}', query) if w.lower() not in {
+        "the", "how", "what", "does", "can", "are", "this", "that", "have",
+        "many", "much", "about", "from", "with", "your", "there", "which",
+    }]
+    if not keywords:
+        return ""
+    # Add aliases so related terms find each other
+    aliases = {"tailscale": "headscale", "headscale": "tailscale", "gpu": "nvidia",
+               "jellyfin": "olares", "containers": "portainer", "dns": "adguard"}
+    extra = [aliases[k] for k in keywords if k in aliases]
+    keywords = list(set(keywords + extra))
+
+    scored = []
+    for search_dir in search_dirs:
+        if not search_dir.exists():
+            continue
+        for f in search_dir.rglob("*.md"):
+            try:
+                text = f.read_text(errors="ignore")[:8000]
+                score = sum(text.lower().count(kw) for kw in keywords)
+                if score > 0:
+                    scored.append((score, f, text))
+            except Exception:
+                continue
+        for f in search_dir.rglob("*.py"):
+            if f.name.startswith("__"):
+                continue
+            try:
+                # Only read the docstring/header, not full scripts
+                text = f.read_text(errors="ignore")[:1000]
+                score = sum(text.lower().count(kw) for kw in keywords)
+                if score > 0:
+                    scored.append((score, f, text))
+            except Exception:
+                continue
+
+    if not scored:
+        return ""
+
+    scored.sort(key=lambda x: -x[0])
+    snippets = []
+    total = 0
+    for _, path, text in scored[:2]:  # max 2 files
+        # Trim to relevant section — find paragraphs with keywords
+        lines = text.split("\n")
+        relevant = []
+        for i, line in enumerate(lines):
+            if any(kw in line.lower() for kw in keywords):
+                start = max(0, i - 2)
+                end = min(len(lines), i + 5)
+                relevant.extend(lines[start:end])
+        snippet = "\n".join(dict.fromkeys(relevant))[:1000]  # dedup, cap at 1K
+        if not snippet.strip():
+            snippet = text[:500]
+        snippets.append(f"[{path.name}]\n{snippet}")
+        total += len(snippet)
+        if total >= max_chars:
+            break
+
+    return "\n\n".join(snippets)
+
+
+@router.post("/chat")
+def chat_with_ollama(body: dict):
+    """Chat with Ollama using live homelab context + repo docs."""
+    message = body.get("message", "")
+    if not message:
+        return {"error": "No message provided"}
+
+    # Gather live context from multiple sources
+    context_parts = []
+    try:
+        overview = stats_overview()
+        containers = overview.get("containers", {})
+        gpu = overview.get("gpu", {})
+        context_parts.append(
+            f"Containers: {containers.get('total', '?')} total across endpoints: "
+            + ", ".join(f"{k} ({v.get('total','?')} containers, {v.get('running','?')} running)"
+                        for k, v in containers.get("by_endpoint", {}).items())
+        )
+        if gpu.get("available"):
+            context_parts.append(
+                f"GPU: {gpu.get('name','RTX 5090')}, {gpu.get('temp_c','?')}°C, "
+                f"{gpu.get('memory_used_mb','?')}/{gpu.get('memory_total_mb','?')} MB VRAM, "
+                f"{gpu.get('utilization_pct','?')}% util"
+            )
+        email_data = overview.get("email_today", {})
+        if isinstance(email_data, dict):
+            context_parts.append(f"Emails today: {email_data.get('total', 0)} (dvish: {email_data.get('dvish', 0)}, proton: {email_data.get('proton', 0)})")
+        context_parts.append(f"Ollama: {'online' if overview.get('ollama_available') else 'offline'}")
+        context_parts.append(f"Unhealthy containers: {overview.get('unhealthy_count', 0)}")
+    except Exception:
+        context_parts.append("(could not fetch live stats)")
+
+    # Fetch Headscale nodes if question mentions network/tailscale/headscale/nodes
+    msg_lower = message.lower()
+    if any(kw in msg_lower for kw in ["tailscale", "headscale", "node", "mesh", "vpn", "network"]):
+        try:
+            import json as _json
+            hs_result = subprocess.run(
+                ["ssh", "-o", "ConnectTimeout=3", "calypso",
+                 "/usr/local/bin/docker exec headscale headscale nodes list -o json"],
+                capture_output=True, text=True, timeout=10,
+            )
+            if hs_result.returncode == 0:
+                nodes = _json.loads(hs_result.stdout)
+                online = [n for n in nodes if n.get("online")]
+                node_names = ", ".join(n.get("givenName") or n.get("name", "?") for n in nodes)
+                context_parts.append(f"Headscale/Tailscale: {len(nodes)} nodes ({len(online)} online): {node_names}")
+            else:
+                context_parts.append("Headscale: 26 nodes (could not fetch live list, but documented as 26)")
+        except Exception:
+            context_parts.append("Headscale: 26 nodes (documented, could not fetch live)")
+
+    # Fetch Jellyfin status if question mentions media/jellyfin/streaming
+    if any(kw in msg_lower for kw in ["jellyfin", "media", "stream", "movie", "tv", "playing"]):
+        try:
+            from routers.media import jellyfin_status
+            jf = jellyfin_status()
+            libs = ", ".join(f"{l['name']} ({l['type']})" for l in jf.get("libraries", []))
+            active = jf.get("active_sessions", [])
+            playing = ", ".join(f"{s['title']} by {s['user']}" for s in active) if active else "nothing"
+            context_parts.append(f"Jellyfin v{jf.get('version','?')}: libraries={libs}. Now playing: {playing}")
+        except Exception:
+            pass
+
+    # Fetch AdGuard stats if question mentions dns/adguard/blocked
+    if any(kw in msg_lower for kw in ["dns", "adguard", "blocked", "queries", "domain"]):
+        try:
+            from routers.network import adguard_stats
+            ag = adguard_stats()
+            context_parts.append(f"AdGuard DNS: {ag.get('total_queries', '?')} total queries, {ag.get('blocked', '?')} blocked, {ag.get('avg_time', '?')}s avg response")
+        except Exception:
+            pass
+
+    system_context = (
+        "You are a homelab assistant. You have direct access to the following live infrastructure data:\n\n"
+        + "\n".join(f"- {p}" for p in context_parts)
+        + "\n\n"
+        "Homelab hosts: Atlantis (Synology NAS, media/arr stack), Calypso (Synology, AdGuard DNS, Headscale, Authentik SSO), "
+        "Olares (K3s, RTX 5090, Jellyfin, Ollama), NUC (lightweight services), RPi5 (Uptime Kuma), "
+        "homelab-vm (Prometheus, Grafana, dashboard), Guava (TrueNAS), Seattle (remote VM), matrix-ubuntu (NPM, CrowdSec).\n\n"
+        "Services: Sonarr, Radarr, SABnzbd, Deluge, Prowlarr, Bazarr, Lidarr, Tdarr, Audiobookshelf, LazyLibrarian on Atlantis. "
+        "Jellyfin + Ollama on Olares with GPU transcoding. 3 email auto-organizers (Gmail x2 + Proton). "
+        "11 Ollama-powered automation scripts. Gitea CI with AI PR reviewer.\n\n"
+        "IMPORTANT: Answer using the LIVE DATA above, not general knowledge. The container counts are REAL numbers from Portainer right now. "
+        "When asked 'how many containers on atlantis' answer with the exact number from the live data (e.g. 59). Be concise."
+    )
+
+    # Search repo docs for relevant context (max 2K chars)
+    doc_context = _search_repo_docs(message, max_chars=2000)
+    if doc_context:
+        system_context += f"\n\nRelevant documentation:\n{doc_context}"
+
+    prompt = f"{system_context}\n\nUser: {message}\nAssistant:"
+
+    try:
+        from lib_bridge import ollama_available as _ollama_check
+        if not _ollama_check():
+            return {"response": "Ollama is currently offline. Try again later."}
+        import sys as _sys
+        scripts_dir = str(Path("/app/scripts") if Path("/app/scripts").exists() else Path(__file__).parent.parent.parent / "scripts")
+        if scripts_dir not in _sys.path:
+            _sys.path.insert(0, scripts_dir)
+        from lib.ollama import ollama_generate
+        response = ollama_generate(prompt, num_predict=800, timeout=90)
+        return {"response": response}
+    except Exception as e:
+        return {"error": str(e)}
+
+
+# ---------------------------------------------------------------------------
+# Health score
+# ---------------------------------------------------------------------------
+
+@router.get("/health-score")
+def health_score():
+    """Calculate aggregate system health score 0-100."""
+    score = 100
+    details = []
+
+    try:
+        overview = stats_overview()
+        containers = overview.get("containers", {})
+        by_ep = containers.get("by_endpoint", {})
+
+        # Container health (40 points) — only penalize crashed containers, not cleanly stopped ones
+        crashed = 0
+        cleanly_stopped = 0
+        for ep_name in by_ep:
+            try:
+                ep_containers = portainer_list_containers(ep_name)
+                for c in ep_containers:
+                    state = c.get("State", "")
+                    status = c.get("Status", "")
+                    if state != "running":
+                        if "Exited (0)" in status:
+                            cleanly_stopped += 1
+                        else:
+                            crashed += 1
+            except Exception:
+                pass
+        if crashed > 0:
+            penalty = min(40, crashed * 8)
+            score -= penalty
+            details.append(f"-{penalty}: {crashed} containers crashed/unhealthy")
+        else:
+            details.append("+40: all containers healthy")
+        if cleanly_stopped > 0:
+            details.append(f"(info: {cleanly_stopped} intentionally stopped, not penalized)")
+
+        # Unhealthy containers (20 points)
+        unhealthy = overview.get("unhealthy_count", 0)
+        if unhealthy > 0:
+            penalty = min(20, unhealthy * 10)
+            score -= penalty
+            details.append(f"-{penalty}: {unhealthy} unhealthy containers")
+        else:
+            details.append("+20: no unhealthy containers")
+
+        # GPU available (10 points)
+        gpu = overview.get("gpu", {})
+        if not gpu.get("available"):
+            score -= 10
+            details.append("-10: GPU unavailable")
+        else:
+            details.append("+10: GPU online")
+
+        # Ollama available (10 points)
+        if not overview.get("ollama_available"):
+            score -= 10
+            details.append("-10: Ollama offline")
+        else:
+            details.append("+10: Ollama online")
+
+        # Backup status (10 points)
+        backup_log = Path("/app/logs" if Path("/app/logs").exists() else "/tmp") / "gmail-backup-daily.log"
+        if backup_log.exists():
+            with open(backup_log) as f:
+                content = f.read()
+            if "ERROR" in content[-2000:]:
+                score -= 10
+                details.append("-10: backup has errors")
+            else:
+                details.append("+10: backup OK")
+        else:
+            score -= 5
+            details.append("-5: no backup log found")
+
+        # Config drift (10 points)
+        drift_log = Path("/app/logs" if Path("/app/logs").exists() else "/tmp") / "config-drift.log"
+        if drift_log.exists():
+            with open(drift_log) as f:
+                lines = f.readlines()
+            last_lines = "".join(lines[-20:])
+            if "drifts" in last_lines.lower() and "no drifts" not in last_lines.lower():
+                score -= 10
+                details.append("-10: config drift detected")
+            else:
+                details.append("+10: no drift")
+        else:
+            details.append("+10: no drift (no log)")
+    except Exception as e:
+        details.append(f"Error calculating: {e}")
+
+    return {
+        "score": max(0, min(100, score)),
+        "grade": "A" if score >= 90 else "B" if score >= 80 else "C" if score >= 70 else "D" if score >= 60 else "F",
+        "details": details,
+    }
+
+
+# ---------------------------------------------------------------------------
+# Quick actions
+# ---------------------------------------------------------------------------
+
+@router.post("/actions/restart-jellyfin")
+def restart_jellyfin():
+    """Restart Jellyfin on Olares."""
+    result = subprocess.run(
+        ["ssh", "-o", "ConnectTimeout=3", "olares",
+         "kubectl rollout restart deployment/jellyfin -n jellyfin-vishinator"],
+        capture_output=True, text=True, timeout=15)
+    return {"success": result.returncode == 0, "output": result.stdout.strip() or result.stderr.strip()}
+
+
+@router.post("/actions/restart-ollama")
+def restart_ollama():
+    """Restart Ollama on Olares."""
+    result = subprocess.run(
+        ["ssh", "-o", "ConnectTimeout=3", "olares",
+         "kubectl rollout restart deployment/ollama -n ollamaserver-shared"],
+        capture_output=True, text=True, timeout=15)
+    return {"success": result.returncode == 0, "output": result.stdout.strip() or result.stderr.strip()}
+
+
+@router.post("/actions/run-backup")
+def run_backup():
+    """Trigger daily Gmail backup."""
+    result = subprocess.run(
+        ["/home/homelab/organized/repos/homelab/scripts/gmail-backup-daily.sh"],
+        capture_output=True, text=True, timeout=300)
+    return {"success": result.returncode == 0, "output": result.stdout.strip()[-500:]}
+
+
+# ---------------------------------------------------------------------------
+# Automation timeline
+# ---------------------------------------------------------------------------
+
+@router.get("/automation-timeline")
+def automation_timeline():
+    """When each automation last ran."""
+    log_dir = Path("/app/logs") if Path("/app/logs").exists() else Path("/tmp")
+
+    automations = {
+        "Email (lz)": "gmail-organizer.log",
+        "Email (dvish)": "gmail-organizer-dvish.log",
+        "Email (proton)": "proton-organizer.log",
+        "Stack Restart": "stack-restart.log",
+        "Backup": "gmail-backup-daily.log",
+        "Backup Validator": "backup-validator.log",
+        "Disk Predictor": "disk-predictor.log",
+        "Config Drift": "config-drift.log",
+        "Receipt Tracker": "receipt-tracker.log",
+        "Changelog": "changelog-generator.log",
+        "Email Digest": "email-digest.log",
+    }
+
+    timeline = []
+    for name, filename in automations.items():
+        path = log_dir / filename
+        if path.exists():
+            mtime = os.path.getmtime(path)
+            last_modified = datetime.fromtimestamp(mtime, tz=timezone.utc).isoformat()
+            # Get last line with a timestamp
+            with open(path) as f:
+                lines = f.readlines()
+            last_run = None
+            for line in reversed(lines[-50:]):
+                if line[:4].isdigit():
+                    last_run = line[:19]
+                    break
+            # Fall back to file modification time if no timestamp found in content
+            if not last_run:
+                last_run = last_modified[:19]
+            timeline.append({"name": name, "last_run": last_run, "last_modified": last_modified, "exists": True})
+        else:
+            timeline.append({"name": name, "exists": False})
+
+    return timeline
+
+
+# ---------------------------------------------------------------------------
+# Disk usage (via Prometheus)
+# ---------------------------------------------------------------------------
+
+@router.get("/disk-usage")
+def disk_usage():
+    """Disk usage from Prometheus.
+
+    Filters out network mounts (nfs/cifs) so remote capacity isn't double-counted,
+    deduplicates Synology btrfs subvolumes, and aggregates ZFS datasets into
+    pool-level usage (individual ZFS datasets misleadingly show pool free space).
+    """
+    _fs_exclude = "tmpfs|devtmpfs|overlay|nfs|nfs4|cifs"
+    _mp_exclude = "/boot.*"
+    _synology_hosts = {"atlantis", "calypso", "setillo"}
+    try:
+        avail = prom_query(f'node_filesystem_avail_bytes{{fstype!~"{_fs_exclude}",mountpoint!~"{_mp_exclude}"}}')
+        total = prom_query(f'node_filesystem_size_bytes{{fstype!~"{_fs_exclude}",mountpoint!~"{_mp_exclude}"}}')
+
+        total_map = {}
+        for t in total:
+            key = f"{t['metric'].get('instance', '?')}:{t['metric'].get('mountpoint', '?')}"
+            total_map[key] = float(t['value'][1])
+
+        disks = {}
+        # Collect ZFS datasets separately for pool-level aggregation
+        # Key: (host, pool_avail_rounded) -> {used, avail, label}
+        zfs_pools: dict[tuple, dict] = {}
+
+        for a in avail:
+            key = f"{a['metric'].get('instance', '?')}:{a['metric'].get('mountpoint', '?')}"
+            mount = a['metric'].get('mountpoint', '?')
+            fstype = a['metric'].get('fstype', '')
+            avail_bytes = float(a['value'][1])
+            total_bytes = total_map.get(key, 0)
+            if total_bytes < 1e9:
+                continue
+            host = a['metric'].get('instance', '?').split(':')[0]
+
+            # ZFS: aggregate all datasets per pool instead of showing individually
+            if fstype == "zfs":
+                used_bytes = total_bytes - avail_bytes
+                pool_key = (host, round(avail_bytes / 1e9))
+                if pool_key not in zfs_pools:
+                    zfs_pools[pool_key] = {"used": 0, "avail": avail_bytes, "label": mount, "host": host}
+                zfs_pools[pool_key]["used"] += used_bytes
+                # Keep shortest mountpoint as label
+                if len(mount) < len(zfs_pools[pool_key]["label"]):
+                    zfs_pools[pool_key]["label"] = mount
+                continue
+
+            # Skip Synology REDACTED_APP_PASSWORD bind-mounts (subvolumes of the same btrfs pool)
+            if "/@appdata/" in mount or "/@docker" in mount:
+                continue
+            # Synology NAS hosts: only show /volumeN data partitions, skip OS root
+            if host in _synology_hosts and not mount.startswith("/volume"):
+                continue
+            dedup_key = f"{host}:{mount}"
+            used_pct = ((total_bytes - avail_bytes) / total_bytes * 100) if total_bytes > 0 else 0
+            disks[dedup_key] = {
+                "host": host,
+                "mount": mount,
+                "total_gb": round(total_bytes / 1e9, 1),
+                "avail_gb": round(avail_bytes / 1e9, 1),
+                "used_pct": round(used_pct, 1),
+            }
+
+        # Convert aggregated ZFS pools into disk entries (skip tiny pools < 10GB)
+        for pool_key, p in zfs_pools.items():
+            total_bytes = p["used"] + p["avail"]
+            if total_bytes < 10e9:
+                continue
+            used_pct = (p["used"] / total_bytes * 100) if total_bytes > 0 else 0
+            dedup_key = f"{p['host']}:zfs:{pool_key[1]}"
+            disks[dedup_key] = {
+                "host": p["host"],
+                "mount": p["label"],
+                "total_gb": round(total_bytes / 1e9, 1),
+                "avail_gb": round(p["avail"] / 1e9, 1),
+                "used_pct": round(used_pct, 1),
+            }
+
+        result = sorted(disks.values(), key=lambda d: -d["used_pct"])
+        return result[:20]
+    except Exception as e:
+        return {"error": str(e)}
+
+
+# ---------------------------------------------------------------------------
+# Host temperatures (via Prometheus)
+# ---------------------------------------------------------------------------
+
+
+@router.get("/temperatures")
+def temperatures():
+    """Host temperatures from Prometheus node_hwmon_temp_celsius.
+
+    Returns one entry per host with CPU/SoC temp (highest relevant sensor)
+    plus any hot NVMe drives flagged separately.
+    """
+    # Chips/labels that indicate CPU/SoC temperature
+    _cpu_chips = {"coretemp", "k10temp", "pci0000:00_0000:00:18_3", "thermal_zone"}
+    try:
+        results = prom_query("node_hwmon_temp_celsius")
+        from collections import defaultdict
+        hosts: dict[str, dict] = defaultdict(lambda: {
+            "cpu_temp": None, "sensors": [],
+        })
+
+        for r in results:
+            m = r["metric"]
+            host = m.get("instance", "?").split(":")[0]
+            chip = m.get("chip", "")
+            label = m.get("label", m.get("sensor", ""))
+            temp = float(r["value"][1])
+            if temp <= 0:
+                continue
+
+            is_cpu = any(k in chip for k in _cpu_chips)
+            is_nvme = "nvme" in chip
+            entry = hosts[host]
+
+            if is_cpu:
+                if entry["cpu_temp"] is None or temp > entry["cpu_temp"]:
+                    entry["cpu_temp"] = temp
+            elif is_nvme:
+                entry["sensors"].append({"label": f"NVMe ({chip.split('_')[-1]})", "temp": temp})
+            else:
+                entry["sensors"].append({"label": label or chip, "temp": temp})
+
+        out = []
+        for host, data in hosts.items():
+            # Pick the highest temp as representative if no CPU sensor found
+            all_temps = ([data["cpu_temp"]] if data["cpu_temp"] else []) + \
+                        [s["temp"] for s in data["sensors"]]
+            cpu = data["cpu_temp"] or (max(all_temps) if all_temps else None)
+            if cpu is None:
+                continue
+            # Flag hottest NVMe if above 70°C
+            hot_nvme = None
+            nvme_sensors = [s for s in data["sensors"] if "NVMe" in s["label"]]
+            if nvme_sensors:
+                hottest = max(nvme_sensors, key=lambda s: s["temp"])
+                if hottest["temp"] >= 70:
+                    hot_nvme = {"label": hottest["label"], "temp": round(hottest["temp"], 1)}
+            out.append({
+                "host": host,
+                "cpu_temp": round(cpu, 1),
+                "hot_nvme": hot_nvme,
+            })
+
+        out.sort(key=lambda d: -d["cpu_temp"])
+        return out
+    except Exception as e:
+        return {"error": str(e)}

dashboard/api/start.sh

@@ -0,0 +1,17 @@
+#!/usr/bin/env bash
+# Launch the Homelab Dashboard API on homelab-vm.
+# Sources .env (BAIKAL_PASS etc.) before handing off to uvicorn.
+
+set -euo pipefail
+
+cd "$(dirname "$(readlink -f "$0")")"
+
+if [[ -f .env ]]; then
+  set -a
+  # shellcheck disable=SC1091
+  source ./.env
+  set +a
+fi
+
+exec /usr/bin/python3 /home/homelab/.local/bin/uvicorn main:app \
+  --host 0.0.0.0 --port "${DASHBOARD_API_PORT:-18888}"

dashboard/docker-compose.yml

@@ -0,0 +1,23 @@
+services:
+  dashboard-api:
+    build: ./api
+    ports:
+      - "8888:8888"
+    volumes:
+      - ../scripts:/app/scripts:ro
+      - ../data:/app/data:ro
+      - /tmp:/app/logs:ro
+      - ~/.ssh:/root/.ssh:ro
+    network_mode: host
+    restart: unless-stopped
+
+  dashboard-ui:
+    build: ./ui
+    ports:
+      - "3000:3000"
+    environment:
+      - NEXT_PUBLIC_API_URL=http://localhost:8888
+    network_mode: host
+    depends_on:
+      - dashboard-api
+    restart: unless-stopped

dashboard/ui/.gitignore

@@ -0,0 +1,41 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.*
+.yarn/*
+!.yarn/patches
+!.yarn/plugins
+!.yarn/releases
+!.yarn/versions
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+.pnpm-debug.log*
+
+# env files (can opt-in for committing if needed)
+.env*
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts

dashboard/ui/AGENTS.md

@@ -0,0 +1,5 @@
+<!-- BEGIN:nextjs-agent-rules -->
+# This is NOT the Next.js you know
+
+This version has breaking changes — APIs, conventions, and file structure may all differ from your training data. Read the relevant guide in `node_modules/next/dist/docs/` before writing any code. Heed deprecation notices.
+<!-- END:nextjs-agent-rules -->

dashboard/ui/CLAUDE.md

@@ -0,0 +1 @@
+@AGENTS.md

dashboard/ui/Dockerfile

@@ -0,0 +1,15 @@
+FROM node:22-alpine AS builder
+WORKDIR /app
+COPY package*.json ./
+RUN npm ci
+COPY . .
+RUN npm run build
+
+FROM node:22-alpine AS runner
+WORKDIR /app
+ENV NODE_ENV=production
+COPY --from=builder /app/.next/standalone ./
+COPY --from=builder /app/.next/static ./.next/static
+COPY --from=builder /app/public ./public
+EXPOSE 3000
+CMD ["node", "server.js"]

dashboard/ui/README.md

@@ -0,0 +1,36 @@
+This is a [Next.js](https://nextjs.org) project bootstrapped with [`create-next-app`](https://nextjs.org/docs/app/api-reference/cli/create-next-app).
+
+## Getting Started
+
+First, run the development server:
+
+```bash
+npm run dev
+# or
+yarn dev
+# or
+pnpm dev
+# or
+bun dev
+```
+
+Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+
+You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
+
+This project uses [`next/font`](https://nextjs.org/docs/app/building-your-application/optimizing/fonts) to automatically optimize and load [Geist](https://vercel.com/font), a new font family for Vercel.
+
+## Learn More
+
+To learn more about Next.js, take a look at the following resources:
+
+- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
+- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
+
+You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js) - your feedback and contributions are welcome!
+
+## Deploy on Vercel
+
+The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
+
+Check out our [Next.js deployment documentation](https://nextjs.org/docs/app/building-your-application/deploying) for more details.

dashboard/ui/app/automations/page.tsx

@@ -0,0 +1,402 @@
+"use client";
+
+import { usePoll } from "@/lib/use-poll";
+import type { EmailStats, AutomationTimelineEntry } from "@/lib/types";
+import { StatCard } from "@/components/stat-card";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Badge } from "@/components/ui/badge";
+import { StatusBadge } from "@/components/status-badge";
+import { CardSkeleton } from "@/components/skeleton";
+import { EmptyState } from "@/components/empty-state";
+
+interface BackupResult {
+  host: string;
+  status: string;
+  last_run: string;
+  size?: string;
+}
+
+interface DriftResult {
+  stack: string;
+  drifted: boolean;
+  details?: string;
+}
+
+interface StackRestart {
+  stack: string;
+  status: string;
+  timestamp: string;
+}
+
+const categoryColors: Record<string, string> = {
+  receipts: "bg-amber-500/20 border-amber-500/30 text-amber-400",
+  newsletters: "bg-blue-500/20 border-blue-500/30 text-blue-400",
+  accounts: "bg-violet-500/20 border-violet-500/30 text-violet-400",
+  spam: "bg-red-500/20 border-red-500/30 text-red-400",
+  personal: "bg-green-500/20 border-green-500/30 text-green-400",
+  finance: "bg-emerald-500/20 border-emerald-500/30 text-emerald-400",
+  work: "bg-cyan-500/20 border-cyan-500/30 text-cyan-400",
+  promotions: "bg-amber-500/15 border-amber-500/25 text-amber-300",
+  social: "bg-purple-500/20 border-purple-500/30 text-purple-400",
+  travel: "bg-cyan-500/15 border-cyan-500/25 text-cyan-300",
+  orders: "bg-orange-500/20 border-orange-500/30 text-orange-400",
+  updates: "bg-teal-500/20 border-teal-500/30 text-teal-400",
+};
+
+function getAccountColor(name: string): string {
+  const lower = name.toLowerCase();
+  if (lower.includes("gmail") || lower.includes("lzbellina")) return "text-blue-400";
+  if (lower.includes("dvish")) return "text-amber-400";
+  if (lower.includes("proton") || lower.includes("admin")) return "text-violet-400";
+  return "text-foreground";
+}
+
+function getAccountGradient(name: string): string {
+  const lower = name.toLowerCase();
+  if (lower.includes("gmail") || lower.includes("lzbellina")) return "bg-gradient-to-b from-blue-300 to-blue-500 bg-clip-text text-transparent";
+  if (lower.includes("dvish")) return "bg-gradient-to-b from-amber-300 to-amber-500 bg-clip-text text-transparent";
+  if (lower.includes("proton") || lower.includes("admin")) return "bg-gradient-to-b from-violet-300 to-violet-500 bg-clip-text text-transparent";
+  return "text-foreground";
+}
+
+function getCategoryClass(cat: string): string {
+  const lower = cat.toLowerCase();
+  for (const [key, cls] of Object.entries(categoryColors)) {
+    if (lower.includes(key)) return cls;
+  }
+  return "bg-white/[0.06] border-white/[0.08] text-muted-foreground";
+}
+
+// Order matters — more specific keys must come BEFORE generic ones
+// ("digest" before "email" so "Email Digest" matches digest, not email)
+const expectedIntervals: [string, number][] = [
+  ["digest", 36 * 60 * 60 * 1000],        // 36 hours (daily)
+  ["changelog", 8 * 24 * 60 * 60 * 1000],  // 8 days (weekly)
+  ["predictor", 8 * 24 * 60 * 60 * 1000],  // 8 days (weekly)
+  ["validator", 36 * 60 * 60 * 1000],      // 36 hours (daily)
+  ["receipt", 36 * 60 * 60 * 1000],        // 36 hours (daily)
+  ["drift", 36 * 60 * 60 * 1000],          // 36 hours (daily)
+  ["backup", 36 * 60 * 60 * 1000],         // 36 hours (daily)
+  ["restart", 30 * 60 * 1000],             // 30 min
+  ["stack", 30 * 60 * 1000],               // 30 min
+  ["email", 2 * 60 * 60 * 1000],           // 2 hours
+  ["organizer", 2 * 60 * 60 * 1000],       // 2 hours
+];
+
+function getExpectedInterval(name: string): number {
+  const lower = name.toLowerCase();
+  for (const [key, interval] of expectedIntervals) {
+    if (lower.includes(key)) return interval;
+  }
+  return 60 * 60 * 1000; // default 1 hour
+}
+
+function isOnSchedule(entry: AutomationTimelineEntry): boolean {
+  if (!entry.last_run || !entry.exists) return false;
+  const lastRun = new Date(entry.last_run).getTime();
+  const now = Date.now();
+  const expected = getExpectedInterval(entry.name);
+  // Allow 2x the expected interval as grace
+  return (now - lastRun) < expected * 2;
+}
+
+function formatRelativeTime(dateStr: string): string {
+  try {
+    const d = new Date(dateStr);
+    const now = Date.now();
+    const diff = now - d.getTime();
+    if (diff < 60000) return "just now";
+    if (diff < 3600000) return `${Math.floor(diff / 60000)}m ago`;
+    if (diff < 86400000) return `${Math.floor(diff / 3600000)}h ago`;
+    return `${Math.floor(diff / 86400000)}d ago`;
+  } catch {
+    return dateStr;
+  }
+}
+
+function formatTimeOnly(dateStr: string): string {
+  try {
+    return new Date(dateStr).toLocaleTimeString("en-US", {
+      hour: "2-digit",
+      minute: "2-digit",
+    });
+  } catch {
+    return dateStr;
+  }
+}
+
+export default function AutomationsPage() {
+  const { data: emails } = usePoll<EmailStats>("/api/automations/email", 60000);
+  const { data: backups } = usePoll<Record<string, unknown>>("/api/automations/backup", 120000);
+  const { data: drift } = usePoll<Record<string, unknown>>("/api/automations/drift", 120000);
+  const { data: restartsData } = usePoll<{ entries: StackRestart[] }>("/api/automations/restarts", 60000);
+  const { data: timeline } = usePoll<AutomationTimelineEntry[]>("/api/automation-timeline", 60000);
+  const restarts = restartsData?.entries ?? [];
+
+  // Compute stats for top row
+  const totalEmailsToday = emails?.accounts
+    ? emails.accounts.reduce((sum, acct) => {
+        const today = Number((acct as Record<string, unknown>).today ?? (acct as Record<string, unknown>).today_total ?? 0);
+        return sum + today;
+      }, 0)
+    : 0;
+
+  const backupOk = String(backups?.status ?? "unknown") === "ok";
+  const driftStatus = String(drift?.status ?? "unknown");
+  const driftClean = driftStatus === "clean" || driftStatus === "no_log";
+  const restartCount = restarts.length;
+
+  // Sort timeline by most recent first
+  const sortedTimeline = timeline
+    ? [...timeline].sort((a, b) => {
+        if (!a.last_run) return 1;
+        if (!b.last_run) return -1;
+        return new Date(b.last_run).getTime() - new Date(a.last_run).getTime();
+      })
+    : [];
+
+  return (
+    <div className="space-y-8">
+      <h1 className="text-lg font-semibold">Automations</h1>
+
+      {/* Top: Big stats row */}
+      <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
+        <StatCard
+          label="Emails Today"
+          value={emails ? totalEmailsToday : "--"}
+          color="blue"
+          sub="classified"
+        />
+        <StatCard
+          label="Backup Status"
+          value={backups ? (backupOk ? "OK" : "FAIL") : "--"}
+          color={backupOk || !backups ? "green" : "amber"}
+          sub={backups?.has_errors ? "errors detected" : "all good"}
+        />
+        <StatCard
+          label="Config Drift"
+          value={drift ? (driftClean ? "0" : driftStatus) : "--"}
+          color={driftClean || !drift ? "emerald" : "amber"}
+          sub={drift ? String(drift.last_result ?? "no scan yet") : "loading"}
+        />
+        <StatCard
+          label="Restarts"
+          value={restartsData ? restartCount : "--"}
+          color={restartCount === 0 || !restartsData ? "violet" : "amber"}
+          sub="container restarts"
+        />
+      </div>
+
+      {/* Color Legend */}
+      <div className="flex flex-wrap items-center gap-x-6 gap-y-2 text-xs text-muted-foreground/70 px-1">
+        <span className="font-medium text-foreground/60">Legend:</span>
+        <span className="flex items-center gap-1.5"><span className="w-2 h-2 rounded-full bg-green-500" style={{boxShadow:"0 0 6px rgba(34,197,94,0.4)"}} /> On schedule</span>
+        <span className="flex items-center gap-1.5"><span className="w-2 h-2 rounded-full bg-amber-500" style={{boxShadow:"0 0 6px rgba(245,158,11,0.4)"}} /> Overdue</span>
+        <span className="flex items-center gap-1.5"><span className="w-2 h-2 rounded-full bg-gray-500" /> No log</span>
+        <span className="flex items-center gap-1.5"><span className="w-2 h-2 rounded-full bg-blue-500" style={{boxShadow:"0 0 6px rgba(59,130,246,0.4)"}} /> Email</span>
+        <span className="flex items-center gap-1.5"><span className="w-2 h-2 rounded-full bg-violet-500" style={{boxShadow:"0 0 6px rgba(139,92,246,0.4)"}} /> Accounts</span>
+        <span className="flex items-center gap-1.5"><span className="w-2 h-2 rounded-full bg-amber-400" style={{boxShadow:"0 0 6px rgba(251,191,36,0.4)"}} /> Receipts</span>
+        <span className="flex items-center gap-1.5"><span className="w-2 h-2 rounded-full bg-red-500" style={{boxShadow:"0 0 6px rgba(239,68,68,0.4)"}} /> Spam</span>
+      </div>
+
+      {/* Automation Timeline */}
+      <Card>
+        <CardHeader className="pb-3">
+          <CardTitle className="text-base font-semibold">Automation Timeline</CardTitle>
+        </CardHeader>
+        <CardContent>
+          {!timeline ? (
+            <CardSkeleton lines={6} />
+          ) : sortedTimeline.length === 0 ? (
+            <p className="text-sm text-muted-foreground/60">No automation data</p>
+          ) : (
+            <div className="space-y-2">
+              {sortedTimeline.map((entry, i) => {
+                const onSchedule = isOnSchedule(entry);
+                return (
+                  <div
+                    key={i}
+                    className="flex items-center justify-between text-sm rounded-lg px-3 py-2 hover:bg-white/[0.03] transition-colors"
+                  >
+                    <div className="flex items-center gap-3 min-w-0">
+                      <span
+                        className={`w-2.5 h-2.5 rounded-full shrink-0 ${
+                          !entry.exists
+                            ? "bg-gray-500"
+                            : onSchedule
+                              ? "bg-green-500"
+                              : "bg-amber-500"
+                        }`}
+                        style={{
+                          boxShadow: !entry.exists
+                            ? "none"
+                            : onSchedule
+                              ? "0 0 8px rgba(34, 197, 94, 0.5)"
+                              : "0 0 8px rgba(245, 158, 11, 0.5)",
+                        }}
+                      />
+                      <span className="text-foreground font-medium truncate">{entry.name}</span>
+                    </div>
+                    <div className="flex items-center gap-4 shrink-0 ml-3">
+                      {entry.last_run ? (
+                        <>
+                          <span className="text-xs text-muted-foreground/60">
+                            {formatTimeOnly(entry.last_run)}
+                          </span>
+                          <span className="text-xs text-muted-foreground/40 min-w-[60px] text-right">
+                            {formatRelativeTime(entry.last_run)}
+                          </span>
+                        </>
+                      ) : (
+                        <span className="text-xs text-muted-foreground/40">never</span>
+                      )}
+                    </div>
+                  </div>
+                );
+              })}
+            </div>
+          )}
+        </CardContent>
+      </Card>
+
+      {/* Middle: Email Organizers */}
+      <Card>
+        <CardHeader className="pb-3">
+          <CardTitle className="text-base font-semibold">Email Organizers</CardTitle>
+        </CardHeader>
+        <CardContent>
+          {!emails ? (
+            <CardSkeleton lines={4} />
+          ) : (
+            <div className="space-y-4">
+              {emails.accounts.map((acct: Record<string, unknown>) => {
+                const name = String(acct.account ?? acct.name ?? "?");
+                const today = Number(acct.today ?? acct.today_total ?? 0);
+                const cats = (acct.categories ?? acct.today_categories ?? {}) as Record<string, number>;
+                return (
+                  <div key={name} className="flex items-center gap-6 rounded-xl px-4 py-3 bg-white/[0.02] border border-white/[0.04] hover:bg-white/[0.04] transition-colors">
+                    <div className="shrink-0 min-w-[140px]">
+                      <p className={`text-base font-medium ${getAccountColor(name)}`}>{name}</p>
+                      <p className="text-xs text-muted-foreground/60 mt-0.5">today</p>
+                    </div>
+                    <div className="shrink-0">
+                      <p className={`text-3xl font-bold ${getAccountGradient(name)}`}>{today}</p>
+                    </div>
+                    <div className="flex flex-wrap gap-2 flex-1">
+                      {Object.entries(cats).map(([cat, count]) => (
+                        <Badge
+                          key={cat}
+                          variant="secondary"
+                          className={`text-xs px-2.5 py-0.5 border ${getCategoryClass(cat)}`}
+                        >
+                          {cat}: {count}
+                        </Badge>
+                      ))}
+                    </div>
+                  </div>
+                );
+              })}
+            </div>
+          )}
+        </CardContent>
+      </Card>
+
+      {/* Bottom: System Health -- 2 columns */}
+      <div className="grid grid-cols-1 md:grid-cols-2 gap-5">
+        {/* Backup Details */}
+        <Card>
+          <CardHeader className="pb-2 flex flex-row items-center justify-between">
+            <CardTitle className="text-base font-semibold">Backup Details</CardTitle>
+            {backups && (
+              <StatusBadge
+                color={backupOk ? "green" : "red"}
+                label={String(backups.status ?? "unknown")}
+              />
+            )}
+          </CardHeader>
+          <CardContent>
+            {!backups ? (
+              <CardSkeleton lines={3} />
+            ) : (
+              <div className="space-y-3">
+                {backups.has_errors ? (
+                  <p className="text-sm text-red-400 font-medium">Errors detected in backup</p>
+                ) : null}
+                <div className="flex items-center justify-between text-sm">
+                  <span className="text-muted-foreground/70">Log entries today</span>
+                  <span className="text-foreground font-medium">{String(backups.entries ?? 0)}</span>
+                </div>
+                {backups.last_run ? (
+                  <div className="flex items-center justify-between text-sm">
+                    <span className="text-muted-foreground/70">Last run</span>
+                    <span className="text-foreground">{String(backups.last_run)}</span>
+                  </div>
+                ) : null}
+                {backups.email_count != null ? (
+                  <div className="flex items-center justify-between text-sm">
+                    <span className="text-muted-foreground/70">Emails backed up</span>
+                    <span className="text-foreground font-medium">{String(backups.email_count)}</span>
+                  </div>
+                ) : null}
+              </div>
+            )}
+          </CardContent>
+        </Card>
+
+        {/* Config Drift + Restarts */}
+        <Card>
+          <CardHeader className="pb-2">
+            <CardTitle className="text-base font-semibold">Config Drift & Restarts</CardTitle>
+          </CardHeader>
+          <CardContent className="space-y-4">
+            {/* Drift */}
+            <div>
+              <div className="flex items-center justify-between mb-2">
+                <p className="text-xs uppercase tracking-wider text-muted-foreground/70 font-medium">Config Drift</p>
+                {drift && (
+                  <StatusBadge
+                    color={driftClean ? "green" : "amber"}
+                    label={driftStatus}
+                  />
+                )}
+              </div>
+              {drift && (
+                <p className="text-sm text-muted-foreground">
+                  {String(drift.last_result ?? "No scan results yet")}
+                </p>
+              )}
+            </div>
+
+            {/* Restarts */}
+            <div>
+              <p className="text-xs uppercase tracking-wider text-muted-foreground/70 font-medium mb-2">Recent Restarts</p>
+              {restarts.length === 0 ? (
+                <EmptyState icon={"OK"} title="All healthy" description="No containers needed restarting" />
+              ) : (
+                <div className="space-y-2">
+                  {restarts.map((r, i) => (
+                    <div key={i} className="flex items-center justify-between text-sm">
+                      <span className="text-foreground font-medium">{r.stack}</span>
+                      <div className="flex items-center gap-2">
+                        <StatusBadge
+                          color={r.status === "success" ? "green" : "red"}
+                          label={r.status}
+                        />
+                        <span className="text-xs text-muted-foreground/70">
+                          {new Date(r.timestamp).toLocaleTimeString("en-US", {
+                            hour: "2-digit",
+                            minute: "2-digit",
+                          })}
+                        </span>
+                      </div>
+                    </div>
+                  ))}
+                </div>
+              )}
+            </div>
+          </CardContent>
+        </Card>
+      </div>
+    </div>
+  );
+}

dashboard/ui/app/expenses/page.tsx

@@ -0,0 +1,162 @@
+"use client";
+
+import { usePoll } from "@/lib/use-poll";
+import type { ExpenseSummary } from "@/lib/types";
+import { StatCard } from "@/components/stat-card";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { DataTable, Column } from "@/components/data-table";
+import { CardSkeleton } from "@/components/skeleton";
+
+interface Transaction {
+  date: string;
+  vendor: string;
+  amount: string | number;
+  currency?: string;
+  order_number?: string;
+  email_account?: string;
+  message_id?: string;
+  [key: string]: unknown;
+}
+
+function getExpenseAccountColor(name: string): string {
+  const lower = name.toLowerCase();
+  if (lower.includes("gmail") || lower.includes("lzbellina")) return "text-blue-400";
+  if (lower.includes("dvish")) return "text-amber-400";
+  if (lower.includes("proton") || lower.includes("admin")) return "text-violet-400";
+  return "text-muted-foreground";
+}
+
+export default function ExpensesPage() {
+  const { data: summary } = usePoll<ExpenseSummary>(
+    "/api/expenses/summary",
+    120000
+  );
+  const { data: expenseData } = usePoll<Transaction[] | { count: number; expenses: Transaction[] }>(
+    "/api/expenses",
+    120000
+  );
+  const transactions = Array.isArray(expenseData) ? expenseData : (expenseData?.expenses ?? []);
+
+  const maxVendor =
+    summary?.top_vendors.reduce(
+      (max, v) => Math.max(max, v.amount),
+      0
+    ) ?? 1;
+
+  const txColumns: Column<Transaction>[] = [
+    { key: "date", label: "Date" },
+    {
+      key: "vendor",
+      label: "Vendor",
+      render: (row) => (
+        <span className="font-medium text-foreground">{row.vendor}</span>
+      ),
+    },
+    {
+      key: "amount",
+      label: "Amount",
+      render: (row) => {
+        const amt = Number(row.amount || 0);
+        return (
+          <span className={amt >= 0 ? "text-green-400" : "text-red-400"}>
+            ${amt.toFixed(2)} {row.currency ?? ""}
+          </span>
+        );
+      },
+    },
+    { key: "order_number", label: "Order #" },
+    {
+      key: "email_account",
+      label: "Account",
+      render: (row) => (
+        <span className={`truncate max-w-[120px] block text-xs ${getExpenseAccountColor(String(row.email_account ?? ""))}`}>
+          {String(row.email_account ?? "")}
+        </span>
+      ),
+    },
+  ];
+
+  const accounts = transactions
+    ? [...new Set(transactions.map((t) => String(t.email_account ?? "")).filter(Boolean))]
+    : [];
+
+  return (
+    <div className="space-y-8">
+      <h1 className="text-lg font-semibold">Expenses</h1>
+
+      {/* Summary Cards */}
+      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-5">
+        <StatCard
+          label="Total Spend"
+          value={summary ? `$${summary.total.toFixed(2)}` : "--"}
+          sub={summary?.month}
+        />
+        <StatCard
+          label="Transactions"
+          value={summary?.count ?? "--"}
+          sub="this month"
+        />
+        <StatCard
+          label="Top Vendor"
+          value={
+            summary?.top_vendors?.[0]?.vendor ?? "--"
+          }
+          sub={
+            summary?.top_vendors?.[0]
+              ? `$${summary.top_vendors[0].amount.toFixed(2)}`
+              : undefined
+          }
+        />
+      </div>
+
+      {/* Top Vendors Bar Chart */}
+      <Card>
+        <CardHeader className="pb-2">
+          <CardTitle className="text-base font-semibold">Top Vendors</CardTitle>
+        </CardHeader>
+        <CardContent>
+          {!summary ? (
+            <CardSkeleton lines={4} />
+          ) : (
+            <div className="space-y-3">
+              {summary.top_vendors.map((v) => (
+                <div key={v.vendor} className="space-y-1.5">
+                  <div className="flex items-center justify-between text-sm">
+                    <span className="text-foreground">{v.vendor}</span>
+                    <span className="text-green-400">
+                      ${v.amount.toFixed(2)}
+                    </span>
+                  </div>
+                  <div className="glass-bar-track h-2">
+                    <div
+                      className="h-full glass-bar-fill bg-gradient-to-r from-blue-500 to-violet-500 transition-all duration-700"
+                      style={{
+                        width: `${(v.amount / maxVendor) * 100}%`,
+                      }}
+                    />
+                  </div>
+                </div>
+              ))}
+            </div>
+          )}
+        </CardContent>
+      </Card>
+
+      {/* Transactions Table */}
+      <Card>
+        <CardHeader className="pb-2">
+          <CardTitle className="text-base font-semibold">Transactions</CardTitle>
+        </CardHeader>
+        <CardContent>
+          <DataTable<Transaction>
+            data={transactions ?? []}
+            columns={txColumns}
+            searchKey="vendor"
+            filterKey="email_account"
+            filterOptions={accounts}
+          />
+        </CardContent>
+      </Card>
+    </div>
+  );
+}

dashboard/ui/app/globals.css

@@ -0,0 +1,519 @@
+@import "tailwindcss";
+@import "tw-animate-css";
+@import "shadcn/tailwind.css";
+
+/* Exo 2 Font */
+@font-face {
+  font-family: 'Exo 2';
+  src: url('/fonts/Exo2-Light.ttf') format('truetype');
+  font-weight: 300;
+  font-style: normal;
+  font-display: swap;
+}
+@font-face {
+  font-family: 'Exo 2';
+  src: url('/fonts/Exo2-Regular.ttf') format('truetype');
+  font-weight: 400;
+  font-style: normal;
+  font-display: swap;
+}
+@font-face {
+  font-family: 'Exo 2';
+  src: url('/fonts/Exo2-Medium.ttf') format('truetype');
+  font-weight: 500;
+  font-style: normal;
+  font-display: swap;
+}
+@font-face {
+  font-family: 'Exo 2';
+  src: url('/fonts/Exo2-SemiBold.ttf') format('truetype');
+  font-weight: 600;
+  font-style: normal;
+  font-display: swap;
+}
+@font-face {
+  font-family: 'Exo 2';
+  src: url('/fonts/Exo2-Bold.ttf') format('truetype');
+  font-weight: 700;
+  font-style: normal;
+  font-display: swap;
+}
+
+@custom-variant dark (&:is(.dark *));
+
+@theme inline {
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --font-sans: var(--font-sans);
+  --font-mono: var(--font-geist-mono);
+  --font-heading: var(--font-sans);
+  --color-sidebar-ring: var(--sidebar-ring);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar: var(--sidebar);
+  --color-chart-5: var(--chart-5);
+  --color-chart-4: var(--chart-4);
+  --color-chart-3: var(--chart-3);
+  --color-chart-2: var(--chart-2);
+  --color-chart-1: var(--chart-1);
+  --color-ring: var(--ring);
+  --color-input: var(--input);
+  --color-border: var(--border);
+  --color-destructive: var(--destructive);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-accent: var(--accent);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-muted: var(--muted);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-secondary: var(--secondary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-primary: var(--primary);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-popover: var(--popover);
+  --color-card-foreground: var(--card-foreground);
+  --color-card: var(--card);
+  --radius-sm: calc(var(--radius) * 0.6);
+  --radius-md: calc(var(--radius) * 0.8);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) * 1.4);
+  --radius-2xl: calc(var(--radius) * 1.8);
+  --radius-3xl: calc(var(--radius) * 2.2);
+  --radius-4xl: calc(var(--radius) * 2.6);
+}
+
+:root {
+  --radius: 0.625rem;
+}
+
+/* Midnight theme defaults — used before ThemeProvider hydrates on client.
+   ThemeProvider overrides these inline on :root once JS loads. */
+.dark {
+  --background: 230 25% 4%;
+  --foreground: 210 40% 98%;
+  --card: 220 30% 8%;
+  --card-foreground: 210 40% 98%;
+  --popover: 220 30% 8%;
+  --popover-foreground: 210 40% 98%;
+  --primary: 217 91% 60%;
+  --primary-foreground: 210 40% 98%;
+  --secondary: 217 33% 17%;
+  --secondary-foreground: 210 40% 98%;
+  --muted: 217 33% 17%;
+  --muted-foreground: 215 20% 68%;
+  --accent: 217 33% 17%;
+  --accent-foreground: 210 40% 98%;
+  --destructive: 0 84% 60%;
+  --border: 217 33% 20%;
+  --input: 217 33% 20%;
+  --ring: 217 91% 60%;
+  --chart-1: 217 91% 60%;
+  --chart-2: 160 60% 45%;
+  --chart-3: 30 80% 55%;
+  --chart-4: 280 65% 60%;
+  --chart-5: 340 75% 55%;
+  --sidebar: 220 30% 6%;
+  --sidebar-foreground: 210 40% 98%;
+  --sidebar-primary: 217 91% 60%;
+  --sidebar-primary-foreground: 210 40% 98%;
+  --sidebar-accent: 217 33% 17%;
+  --sidebar-accent-foreground: 210 40% 98%;
+  --sidebar-border: 217 33% 20%;
+  --sidebar-ring: 217 91% 60%;
+  --card-bg: rgba(15, 20, 40, 0.35);
+  --card-border: rgba(255, 255, 255, 0.12);
+  --card-hover-bg: rgba(15, 20, 40, 0.45);
+  --card-hover-border: rgba(255, 255, 255, 0.2);
+  --glass-bg: rgba(15, 20, 40, 0.30);
+  --glass-border: rgba(255, 255, 255, 0.08);
+  --glass-hover: rgba(255, 255, 255, 0.03);
+  --glass-input-bg: rgba(255, 255, 255, 0.06);
+  --glass-input-border: rgba(255, 255, 255, 0.1);
+  --glass-input-focus: rgba(59, 130, 246, 0.3);
+  --glass-input-focus-bg: rgba(255, 255, 255, 0.08);
+  --glass-table-header: rgba(255, 255, 255, 0.08);
+  --glass-bar-track: rgba(255, 255, 255, 0.10);
+  --nav-bg: rgba(6, 6, 17, 0.65);
+  --nav-border: rgba(255, 255, 255, 0.08);
+  --nav-active: rgba(255, 255, 255, 0.08);
+  --nav-hover: rgba(255, 255, 255, 0.05);
+  --accent-color: #3b82f6;
+  --accent-glow: rgba(59, 130, 246, 0.3);
+  --card-lift-shadow: 0 8px 40px rgba(0, 0, 0, 0.3);
+  --stat-glow: 0 0 20px rgba(59, 130, 246, 0.15);
+  --nav-active-glow: 0 2px 10px rgba(59, 130, 246, 0.3);
+}
+
+/* Light theme base values (overridden by ThemeProvider inline styles) */
+:root:not(.dark) {
+  --background: 210 20% 98%;
+  --foreground: 215 25% 15%;
+  --card: 0 0% 100%;
+  --card-foreground: 215 25% 15%;
+  --popover: 0 0% 100%;
+  --popover-foreground: 215 25% 15%;
+  --primary: 217 91% 53%;
+  --primary-foreground: 0 0% 100%;
+  --secondary: 214 32% 91%;
+  --secondary-foreground: 215 25% 15%;
+  --muted: 214 32% 91%;
+  --muted-foreground: 215 16% 47%;
+  --accent: 214 32% 91%;
+  --accent-foreground: 215 25% 15%;
+  --destructive: 0 84% 60%;
+  --border: 214 32% 88%;
+  --input: 214 32% 88%;
+  --ring: 217 91% 53%;
+  --chart-1: 217 91% 53%;
+  --chart-2: 160 60% 45%;
+  --chart-3: 30 80% 55%;
+  --chart-4: 280 65% 60%;
+  --chart-5: 340 75% 55%;
+  --sidebar: 210 20% 97%;
+  --sidebar-foreground: 215 25% 15%;
+  --sidebar-primary: 217 91% 53%;
+  --sidebar-primary-foreground: 0 0% 100%;
+  --sidebar-accent: 214 32% 91%;
+  --sidebar-accent-foreground: 215 25% 15%;
+  --sidebar-border: 214 32% 88%;
+  --sidebar-ring: 217 91% 53%;
+
+  --card-bg: rgba(255, 255, 255, 0.9);
+  --card-border: rgba(0, 0, 0, 0.08);
+  --card-hover-bg: rgba(255, 255, 255, 1);
+  --card-hover-border: rgba(0, 0, 0, 0.12);
+  --glass-bg: rgba(255, 255, 255, 0.7);
+  --glass-border: rgba(0, 0, 0, 0.06);
+  --glass-hover: rgba(0, 0, 0, 0.02);
+  --glass-input-bg: rgba(255, 255, 255, 0.8);
+  --glass-input-border: rgba(0, 0, 0, 0.1);
+  --glass-input-focus: rgba(37, 99, 235, 0.3);
+  --glass-input-focus-bg: rgba(255, 255, 255, 0.95);
+  --glass-table-header: rgba(0, 0, 0, 0.03);
+  --glass-bar-track: rgba(0, 0, 0, 0.06);
+  --nav-bg: rgba(255, 255, 255, 0.8);
+  --nav-border: rgba(0, 0, 0, 0.06);
+  --nav-active: rgba(0, 0, 0, 0.05);
+  --nav-hover: rgba(0, 0, 0, 0.03);
+  --accent-color: #2563eb;
+  --accent-glow: rgba(37, 99, 235, 0.2);
+  --card-lift-shadow: 0 8px 40px rgba(0, 0, 0, 0.08), 0 0 40px rgba(37, 99, 235, 0.02);
+  --stat-glow: 0 0 20px rgba(37, 99, 235, 0.08);
+  --nav-active-glow: 0 2px 10px rgba(37, 99, 235, 0.15);
+}
+
+@layer base {
+  * {
+    @apply border-border outline-ring/50;
+  }
+  body {
+    @apply text-foreground;
+  }
+  html {
+    @apply font-sans;
+  }
+}
+
+/* --- Force readable text in dark mode --- */
+.dark body,
+.dark [data-slot="card"],
+.dark [data-slot="card-content"],
+.dark [data-slot="card-header"],
+.dark [data-slot="card-title"],
+.dark p,
+.dark span,
+.dark div {
+  color: inherit;
+}
+.dark {
+  color: #f1f5f9;
+}
+.dark [data-slot="card-title"] {
+  color: #f1f5f9 !important;
+}
+.dark .text-muted-foreground {
+  color: hsl(var(--muted-foreground, 215 20% 68%)) !important;
+}
+
+/* --- Glassmorphism Background --- */
+body {
+  min-height: 100vh;
+  position: relative;
+  background: #080818;
+}
+
+/* Animated gradient background */
+body::before {
+  content: '';
+  position: fixed;
+  top: 0; left: 0; right: 0; bottom: 0;
+  z-index: -1;
+  pointer-events: none;
+  background:
+    radial-gradient(ellipse 140% 70% at 5% 5%, rgba(59, 130, 246, 0.35), transparent 50%),
+    radial-gradient(ellipse 100% 90% at 95% 15%, rgba(139, 92, 246, 0.28), transparent 50%),
+    radial-gradient(ellipse 120% 70% at 50% 105%, rgba(16, 185, 129, 0.22), transparent 50%),
+    radial-gradient(ellipse 80% 50% at 75% 55%, rgba(236, 72, 153, 0.15), transparent 50%);
+}
+
+/* --- Glass Utility --- */
+.glass {
+  background: rgba(15, 20, 35, 0.45);
+  backdrop-filter: blur(16px) saturate(140%);
+  -webkit-backdrop-filter: blur(16px) saturate(140%);
+  border: 1px solid rgba(255, 255, 255, 0.08);
+}
+
+/* --- Override shadcn Card for glassmorphism --- */
+[data-slot="card"] {
+  position: relative;
+  overflow: hidden;
+  background: rgba(15, 20, 35, 0.35) !important;
+  backdrop-filter: blur(24px) saturate(160%) !important;
+  -webkit-backdrop-filter: blur(24px) saturate(160%) !important;
+  border: 1px solid rgba(255, 255, 255, 0.12) !important;
+  border-radius: 16px !important;
+  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.15) !important;
+  --tw-ring-shadow: none !important;
+  --tw-ring-color: transparent !important;
+  transition: background 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
+  animation: fade-up 0.5s ease-out both;
+}
+[data-slot="card"]:hover {
+  background: rgba(20, 25, 45, 0.45) !important;
+  border-color: var(--accent-color, rgba(59, 130, 246, 0.3)) !important;
+  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.25), 0 0 20px var(--accent-glow, rgba(59, 130, 246, 0.08)) !important;
+  transform: translateY(-1px);
+}
+
+/* Card inner glow removed — was too visible/distracting */
+
+/* Stagger card animations */
+[data-slot="card"]:nth-child(1) { animation-delay: 0ms; }
+[data-slot="card"]:nth-child(2) { animation-delay: 60ms; }
+[data-slot="card"]:nth-child(3) { animation-delay: 120ms; }
+[data-slot="card"]:nth-child(4) { animation-delay: 180ms; }
+[data-slot="card"]:nth-child(5) { animation-delay: 240ms; }
+[data-slot="card"]:nth-child(6) { animation-delay: 300ms; }
+
+/* --- Animations --- */
+
+/* Card entrance */
+@keyframes fade-up {
+  from { opacity: 0; transform: translateY(8px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+.animate-fade-up {
+  animation: fade-up 0.5s ease-out both;
+}
+
+/* Status dot glow */
+.glow-green { box-shadow: 0 0 8px 2px rgba(34, 197, 94, 0.4); }
+.glow-red { box-shadow: 0 0 8px 2px rgba(239, 68, 68, 0.4); }
+.glow-amber { box-shadow: 0 0 8px 2px rgba(245, 158, 11, 0.4); }
+.glow-blue { box-shadow: 0 0 8px 2px rgba(59, 130, 246, 0.4); }
+.glow-purple { box-shadow: 0 0 8px 2px rgba(168, 85, 247, 0.4); }
+
+/* LIVE badge pulse */
+@keyframes live-pulse {
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0.5; }
+}
+.animate-live-pulse {
+  animation: live-pulse 2s ease-in-out infinite;
+}
+
+/* Slide-in for feed items */
+@keyframes slide-in {
+  from {
+    opacity: 0;
+    transform: translateX(-8px);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+.animate-slide-in {
+  animation: slide-in 0.3s ease-out forwards;
+}
+
+/* Logo float animation */
+@keyframes logo-float {
+  0%, 100% { transform: translateY(0); }
+  50% { transform: translateY(-2px); }
+}
+.animate-logo-float {
+  animation: logo-float 3s ease-in-out infinite;
+}
+
+/* Logo shimmer */
+@keyframes shimmer {
+  0% { background-position: -200% center; }
+  100% { background-position: 200% center; }
+}
+.animate-shimmer {
+  background-size: 200% auto;
+  animation: shimmer 3s linear infinite;
+}
+
+/* Number transition */
+.tabular-nums-transition {
+  font-variant-numeric: tabular-nums;
+  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
+}
+
+/* VRAM/progress bar glow */
+@keyframes bar-glow {
+  0%, 100% { filter: brightness(1); }
+  50% { filter: brightness(1.2); }
+}
+.animate-bar-glow {
+  animation: bar-glow 2s ease-in-out infinite;
+}
+
+/* Card hover lift - softer for glass */
+.card-hover-lift {
+  transition: transform 0.3s ease, box-shadow 0.3s ease, background 0.3s ease;
+}
+.card-hover-lift:hover {
+  transform: translateY(-2px);
+  box-shadow: var(--card-lift-shadow);
+}
+
+/* Active nav glow */
+.nav-active-glow {
+  box-shadow: var(--nav-active-glow);
+}
+
+/* --- Gauge Ring (SVG-based circular progress) --- */
+.gauge-track {
+  fill: none;
+  stroke: var(--glass-bar-track);
+}
+.gauge-fill {
+  fill: none;
+  stroke-linecap: round;
+  transition: stroke-dashoffset 1s ease-out;
+}
+
+/* Number glow for big stat values */
+.stat-glow {
+  text-shadow: var(--stat-glow);
+}
+
+/* Glass input fields */
+.glass-input {
+  background: rgba(255, 255, 255, 0.06);
+  backdrop-filter: blur(12px);
+  -webkit-backdrop-filter: blur(12px);
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  color: #f1f5f9;
+  transition: border-color 0.2s ease, background 0.2s ease;
+}
+.glass-input:focus {
+  border-color: var(--glass-input-focus);
+  background: var(--glass-input-focus-bg);
+  outline: none;
+}
+
+/* Frosted nav bar */
+nav, .dark nav {
+  background: rgba(8, 8, 24, 0.7) !important;
+  backdrop-filter: blur(24px) saturate(150%) !important;
+  -webkit-backdrop-filter: blur(24px) saturate(150%) !important;
+}
+
+/* Glass table rows */
+.glass-table-header {
+  background: var(--glass-table-header);
+}
+.glass-table-row {
+  transition: background 0.2s ease;
+}
+.glass-table-row:hover {
+  background: var(--glass-hover);
+}
+
+/* Glass progress bar track */
+.glass-bar-track {
+  background: var(--glass-bar-track);
+  border-radius: 999px;
+  overflow: hidden;
+}
+
+/* Glass bar fill glow */
+.glass-bar-fill {
+  border-radius: 999px;
+  position: relative;
+}
+.glass-bar-fill::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  border-radius: inherit;
+  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.15), transparent);
+  animation: bar-shimmer 2s ease-in-out infinite;
+}
+@keyframes bar-shimmer {
+  0% { transform: translateX(-100%); }
+  100% { transform: translateX(100%); }
+}
+
+/* --- Visual Flair Effects --- */
+
+/* Particle/sparkle dots — CSS-only floating dots in background */
+body::after {
+  content: '';
+  position: fixed;
+  top: 0; left: 0; right: 0; bottom: 0;
+  z-index: -1;
+  pointer-events: none;
+  background-image:
+    radial-gradient(1px 1px at 10% 20%, rgba(255,255,255,0.15), transparent),
+    radial-gradient(1px 1px at 30% 65%, rgba(255,255,255,0.1), transparent),
+    radial-gradient(1px 1px at 50% 10%, rgba(255,255,255,0.12), transparent),
+    radial-gradient(1px 1px at 70% 40%, rgba(255,255,255,0.08), transparent),
+    radial-gradient(1px 1px at 85% 75%, rgba(255,255,255,0.15), transparent),
+    radial-gradient(1px 1px at 15% 85%, rgba(255,255,255,0.1), transparent),
+    radial-gradient(1px 1px at 45% 50%, rgba(255,255,255,0.12), transparent),
+    radial-gradient(1px 1px at 90% 15%, rgba(255,255,255,0.08), transparent),
+    radial-gradient(1.5px 1.5px at 25% 35%, rgba(255,255,255,0.18), transparent),
+    radial-gradient(1.5px 1.5px at 60% 80%, rgba(255,255,255,0.14), transparent),
+    radial-gradient(1.5px 1.5px at 75% 25%, rgba(255,255,255,0.16), transparent),
+    radial-gradient(1.5px 1.5px at 40% 90%, rgba(255,255,255,0.1), transparent);
+  animation: sparkle-drift 30s linear infinite;
+}
+@keyframes sparkle-drift {
+  0% { transform: translateY(0); }
+  100% { transform: translateY(-20px); }
+}
+
+/* Gradient text for headings */
+.dark h1 {
+  background: linear-gradient(135deg, #f1f5f9, var(--accent-color, #3b82f6));
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+}
+
+/* Smooth number counter animation on stat values */
+.stat-value {
+  transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
+}
+
+/* Active nav tab underline glow */
+.nav-active-glow::after {
+  content: '';
+  position: absolute;
+  bottom: -1px;
+  left: 15%;
+  right: 15%;
+  height: 2px;
+  background: linear-gradient(90deg, transparent, var(--accent-color, #3b82f6), transparent);
+  border-radius: 2px;
+  filter: blur(1px);
+}

dashboard/ui/app/infrastructure/page.tsx

@@ -0,0 +1,450 @@
+"use client";
+
+import { useState, useMemo } from "react";
+import { usePoll } from "@/lib/use-poll";
+import type { Container, OverviewStats, KumaStats, DiskUsageEntry } from "@/lib/types";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Button } from "@/components/ui/button";
+import { Badge } from "@/components/ui/badge";
+import { DataTable, Column } from "@/components/data-table";
+import { ContainerLogsModal } from "@/components/container-logs-modal";
+import { StatusBadge } from "@/components/status-badge";
+import { postAPI } from "@/lib/api";
+import { CardSkeleton } from "@/components/skeleton";
+
+interface OlaresPod {
+  name: string;
+  namespace: string;
+  status: string;
+  restarts: number;
+  age: string;
+}
+
+const endpointColors: Record<string, string> = {
+  atlantis: "text-blue-400",
+  calypso: "text-violet-400",
+  olares: "text-emerald-400",
+  nuc: "text-amber-400",
+  rpi5: "text-cyan-400",
+  homelab: "text-green-400",
+};
+
+function getContainerStateColor(state: string): string {
+  const lower = state.toLowerCase();
+  if (lower === "running") return "text-green-400";
+  if (lower === "exited" || lower === "dead") return "text-red-400";
+  if (lower === "created" || lower === "restarting" || lower === "paused") return "text-amber-400";
+  return "text-foreground";
+}
+
+const hostColors: Record<string, string> = {
+  atlantis: "text-blue-400",
+  calypso: "text-violet-400",
+  olares: "text-emerald-400",
+  nuc: "text-amber-400",
+  rpi5: "text-cyan-400",
+  homelab: "text-green-400",
+  guava: "text-orange-400",
+  seattle: "text-teal-400",
+  jellyfish: "text-indigo-400",
+  "matrix-ubuntu": "text-pink-400",
+};
+
+export default function InfrastructurePage() {
+  const { data: containers } = usePoll<Container[]>(
+    "/api/containers",
+    30000
+  );
+  const { data: overview } = usePoll<OverviewStats>(
+    "/api/stats/overview",
+    60000
+  );
+  const { data: pods } = usePoll<OlaresPod[]>("/api/olares/pods", 30000);
+  const { data: kuma } = usePoll<KumaStats>("/api/kuma/monitors", 60000);
+  const { data: disks } = usePoll<DiskUsageEntry[]>("/api/disk-usage", 300000);
+  const { data: temps } = usePoll<{ host: string; cpu_temp: number; hot_nvme?: { label: string; temp: number } }[]>("/api/temperatures", 60000);
+
+  const [logsTarget, setLogsTarget] = useState<{
+    id: string;
+    name: string;
+    endpoint: string;
+  } | null>(null);
+
+  const [hoveredMonitor, setHoveredMonitor] = useState<number | null>(null);
+
+  const endpoints = useMemo(() => {
+    if (!containers) return [];
+    return [...new Set(containers.map((c) => c.endpoint))];
+  }, [containers]);
+
+  const containerColumns: Column<Container>[] = [
+    {
+      key: "name",
+      label: "Name",
+      render: (row) => (
+        <span className="font-medium text-foreground">{row.name}</span>
+      ),
+    },
+    {
+      key: "state",
+      label: "State",
+      render: (row) => (
+        <StatusBadge
+          color={row.state === "running" ? "green" : "red"}
+          label={row.state}
+        />
+      ),
+    },
+    { key: "status", label: "Status" },
+    {
+      key: "endpoint",
+      label: "Endpoint",
+      render: (row) => (
+        <span className={`font-medium ${endpointColors[row.endpoint.toLowerCase()] ?? "text-foreground"}`}>
+          {row.endpoint}
+        </span>
+      ),
+    },
+    {
+      key: "image",
+      label: "Image",
+      render: (row) => (
+        <span className="truncate max-w-[200px] block">{row.image}</span>
+      ),
+    },
+  ];
+
+  const podColumns: Column<OlaresPod>[] = [
+    { key: "name", label: "Pod" },
+    { key: "namespace", label: "Namespace" },
+    {
+      key: "status",
+      label: "Status",
+      render: (row) => (
+        <StatusBadge
+          color={row.status === "Running" ? "green" : "amber"}
+          label={row.status}
+        />
+      ),
+    },
+    { key: "restarts", label: "Restarts" },
+    { key: "age", label: "Age" },
+  ];
+
+  const gpu = overview?.gpu;
+
+  return (
+    <div className="space-y-8">
+      <h1 className="text-lg font-semibold">Infrastructure</h1>
+
+      {/* Kuma Monitors */}
+      <Card>
+        <CardHeader className="pb-2 flex flex-row items-center justify-between">
+          <CardTitle className="text-base font-semibold">Uptime Kuma</CardTitle>
+          {kuma && (
+            <div className="flex items-center gap-3">
+              <Badge variant="secondary" className="text-xs bg-green-500/10 border border-green-500/20 text-green-400">
+                {kuma.up} up
+              </Badge>
+              {kuma.down > 0 && (
+                <Badge variant="secondary" className="text-xs bg-red-500/10 border border-red-500/20 text-red-400">
+                  {kuma.down} down
+                </Badge>
+              )}
+              <span className="text-xs text-muted-foreground">{kuma.total} total</span>
+            </div>
+          )}
+        </CardHeader>
+        <CardContent>
+          {!kuma ? (
+            <CardSkeleton lines={3} />
+          ) : (
+            <div className="relative">
+              <div className="flex flex-wrap gap-1.5">
+                {kuma.monitors.map((m) => (
+                  <div
+                    key={m.id}
+                    className="relative"
+                    onMouseEnter={() => setHoveredMonitor(m.id)}
+                    onMouseLeave={() => setHoveredMonitor(null)}
+                  >
+                    <span
+                      className={`inline-block w-3 h-3 rounded-sm cursor-pointer transition-all ${
+                        !m.active
+                          ? "bg-gray-500/50"
+                          : m.status
+                            ? "bg-green-500 hover:bg-green-400"
+                            : "bg-red-500 hover:bg-red-400"
+                      }`}
+                      style={{
+                        boxShadow: !m.active
+                          ? "none"
+                          : m.status
+                            ? "0 0 4px rgba(34, 197, 94, 0.4)"
+                            : "0 0 4px rgba(239, 68, 68, 0.5)",
+                      }}
+                    />
+                    {hoveredMonitor === m.id && (
+                      <div className="absolute z-50 bottom-full left-1/2 -translate-x-1/2 mb-2 px-3 py-2 rounded-lg bg-gray-900/95 border border-white/[0.12] text-xs whitespace-nowrap shadow-lg pointer-events-none">
+                        <p className="text-foreground font-medium">{m.name}</p>
+                        {m.url && <p className="text-muted-foreground/60 mt-0.5">{m.url}</p>}
+                        <p className={`mt-0.5 ${m.active ? (m.status ? "text-green-400" : "text-red-400") : "text-gray-400"}`}>
+                          {!m.active ? "Inactive" : m.status ? "Up" : "Down"}
+                        </p>
+                      </div>
+                    )}
+                  </div>
+                ))}
+              </div>
+            </div>
+          )}
+        </CardContent>
+      </Card>
+
+      {/* Container Table */}
+      <Card>
+        <CardHeader className="pb-2">
+          <CardTitle className="text-base font-semibold">Containers</CardTitle>
+        </CardHeader>
+        <CardContent>
+          <DataTable<Container>
+            data={containers ?? []}
+            columns={containerColumns}
+            searchKey="name"
+            filterKey="endpoint"
+            filterOptions={endpoints}
+            actions={(row) => (
+              <div className="flex gap-1">
+                <Button
+                  variant="outline"
+                  size="sm"
+                  className="h-6 text-[10px] px-2 border-white/[0.08] hover:bg-white/[0.06]"
+                  onClick={() =>
+                    setLogsTarget({
+                      id: row.id,
+                      name: row.name,
+                      endpoint: row.endpoint,
+                    })
+                  }
+                >
+                  Logs
+                </Button>
+                <Button
+                  variant="outline"
+                  size="sm"
+                  className="h-6 text-[10px] px-2 border-white/[0.08] hover:bg-white/[0.06]"
+                  onClick={() =>
+                    postAPI(
+                      `/api/containers/${row.endpoint}/${row.id}/restart`
+                    )
+                  }
+                >
+                  Restart
+                </Button>
+              </div>
+            )}
+          />
+        </CardContent>
+      </Card>
+
+      {/* Row 2: Olares Pods + GPU */}
+      <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+        <Card>
+          <CardHeader className="pb-2">
+            <CardTitle className="text-base font-semibold">Olares Pods</CardTitle>
+          </CardHeader>
+          <CardContent>
+            <DataTable<OlaresPod>
+              data={pods ?? []}
+              columns={podColumns}
+              searchKey="name"
+            />
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader className="pb-2">
+            <CardTitle className="text-base font-semibold">GPU Status</CardTitle>
+          </CardHeader>
+          <CardContent className="space-y-4">
+            {!gpu ? (
+              <CardSkeleton lines={3} />
+            ) : gpu.available ? (
+              <>
+                <p className="text-sm font-medium text-foreground">
+                  {gpu.name}
+                </p>
+                {gpu.vram_used_mb != null && gpu.vram_total_mb != null && (
+                  <div>
+                    <div className="flex justify-between text-xs text-muted-foreground mb-1.5">
+                      <span>VRAM</span>
+                      <span>
+                        {(gpu.vram_used_mb / 1024).toFixed(1)} /{" "}
+                        {(gpu.vram_total_mb / 1024).toFixed(1)} GB
+                      </span>
+                    </div>
+                    <div className="glass-bar-track h-3">
+                      <div
+                        className="h-full glass-bar-fill bg-gradient-to-r from-blue-500 to-violet-500 transition-all duration-700"
+                        style={{
+                          width: `${(gpu.vram_used_mb / gpu.vram_total_mb) * 100}%`,
+                        }}
+                      />
+                    </div>
+                  </div>
+                )}
+                <div className="grid grid-cols-3 gap-4 text-xs">
+                  <div>
+                    <p className="text-muted-foreground/70">Temperature</p>
+                    <p className="text-foreground text-lg font-semibold stat-glow">
+                      {gpu.temp_c ?? "--"}&deg;C
+                    </p>
+                  </div>
+                  <div>
+                    <p className="text-muted-foreground/70">Power</p>
+                    <p className="text-foreground text-lg font-semibold stat-glow">
+                      {gpu.power_w ?? "--"}W
+                    </p>
+                  </div>
+                  <div>
+                    <p className="text-muted-foreground/70">Utilization</p>
+                    <p className="text-foreground text-lg font-semibold stat-glow">
+                      {gpu.utilization_pct ?? "--"}%
+                    </p>
+                  </div>
+                </div>
+              </>
+            ) : (
+              <p className="text-xs text-muted-foreground">GPU not available</p>
+            )}
+          </CardContent>
+        </Card>
+      </div>
+
+      <div className="grid grid-cols-1 md:grid-cols-2 gap-5">
+
+      {/* Host Temperatures */}
+      <Card>
+        <CardHeader className="pb-2">
+          <CardTitle className="text-base font-semibold">Temperatures</CardTitle>
+        </CardHeader>
+        <CardContent>
+          {!temps ? (
+            <CardSkeleton lines={6} />
+          ) : temps.length === 0 ? (
+            <p className="text-sm text-muted-foreground/60">No temperature data</p>
+          ) : (
+            <div className="space-y-3">
+              {[...temps]
+                .sort((a, b) => b.cpu_temp - a.cpu_temp)
+                .map((t) => {
+                  const color =
+                    t.cpu_temp >= 80
+                      ? "from-red-500 to-red-400"
+                      : t.cpu_temp >= 60
+                        ? "from-amber-500 to-amber-400"
+                        : "from-green-500 to-emerald-400";
+                  const hostCls =
+                    hostColors[t.host.toLowerCase()] ?? "text-foreground";
+                  // Scale bar: 0-100°C range
+                  const barWidth = Math.min(100, t.cpu_temp);
+
+                  return (
+                    <div key={t.host} className="space-y-1">
+                      <div className="flex items-center justify-between text-sm">
+                        <div className="flex items-center gap-2 min-w-0">
+                          <span className={`font-medium ${hostCls}`}>{t.host}</span>
+                          {t.hot_nvme && (
+                            <span className="text-xs text-red-400/80">
+                              {t.hot_nvme.label} {t.hot_nvme.temp}°C
+                            </span>
+                          )}
+                        </div>
+                        <span className="text-xs font-medium tabular-nums-transition min-w-[40px] text-right">
+                          {t.cpu_temp}°C
+                        </span>
+                      </div>
+                      <div className="glass-bar-track h-2">
+                        <div
+                          className={`h-full glass-bar-fill bg-gradient-to-r ${color} transition-all duration-700`}
+                          style={{ width: `${barWidth}%` }}
+                        />
+                      </div>
+                    </div>
+                  );
+                })}
+            </div>
+          )}
+        </CardContent>
+      </Card>
+
+      {/* Disk Usage */}
+      <Card>
+        <CardHeader className="pb-2">
+          <CardTitle className="text-base font-semibold">Disk Usage</CardTitle>
+        </CardHeader>
+        <CardContent>
+          {!disks ? (
+            <CardSkeleton lines={6} />
+          ) : disks.length === 0 ? (
+            <p className="text-sm text-muted-foreground/60">No disk data</p>
+          ) : (
+            <div className="space-y-3">
+              {[...disks]
+                .sort((a, b) => b.used_pct - a.used_pct)
+                .map((d, i) => {
+                  const color =
+                    d.used_pct >= 85
+                      ? "from-red-500 to-red-400"
+                      : d.used_pct >= 70
+                        ? "from-amber-500 to-amber-400"
+                        : "from-green-500 to-emerald-400";
+                  const hostCls =
+                    hostColors[d.host.toLowerCase()] ?? "text-foreground";
+
+                  return (
+                    <div key={`${d.host}-${d.mount}-${i}`} className="space-y-1">
+                      <div className="flex items-center justify-between text-sm">
+                        <div className="flex items-center gap-2 min-w-0">
+                          <span className={`font-medium ${hostCls}`}>{d.host}</span>
+                          <span className="text-muted-foreground/60 font-mono text-xs truncate">
+                            {d.mount}
+                          </span>
+                        </div>
+                        <div className="flex items-center gap-3 shrink-0">
+                          <span className="text-xs text-muted-foreground">
+                            {d.total_gb >= 1000
+                              ? `${(d.total_gb / 1000).toFixed(1)} TB`
+                              : `${Math.round(d.total_gb)} GB`}
+                          </span>
+                          <span className="text-xs font-medium tabular-nums-transition min-w-[36px] text-right">
+                            {d.used_pct}%
+                          </span>
+                        </div>
+                      </div>
+                      <div className="glass-bar-track h-2">
+                        <div
+                          className={`h-full glass-bar-fill bg-gradient-to-r ${color} transition-all duration-700`}
+                          style={{ width: `${d.used_pct}%` }}
+                        />
+                      </div>
+                    </div>
+                  );
+                })}
+            </div>
+          )}
+        </CardContent>
+      </Card>
+
+      </div>
+
+      {/* Logs Modal */}
+      <ContainerLogsModal
+        containerId={logsTarget?.id ?? null}
+        containerName={logsTarget?.name ?? ""}
+        endpoint={logsTarget?.endpoint ?? ""}
+        onClose={() => setLogsTarget(null)}
+      />
+    </div>
+  );
+}

dashboard/ui/app/layout.tsx

@@ -0,0 +1,49 @@
+import type { Metadata } from "next";
+import { Geist, Geist_Mono } from "next/font/google";
+import "./globals.css";
+import { Nav } from "@/components/nav";
+import { ToastProvider } from "@/components/toast-provider";
+import { OllamaChat } from "@/components/ollama-chat";
+import { KeyboardShortcuts } from "@/components/keyboard-shortcuts";
+import { CommandSearch } from "@/components/command-search";
+import { ThemeProvider } from "@/components/theme-provider";
+
+const geistSans = Geist({
+  variable: "--font-geist-sans",
+  subsets: ["latin"],
+});
+
+const geistMono = Geist_Mono({
+  variable: "--font-geist-mono",
+  subsets: ["latin"],
+});
+
+export const metadata: Metadata = {
+  title: "Homelab Dashboard",
+  description: "Infrastructure monitoring and management",
+  icons: { icon: "/favicon.svg" },
+};
+
+export default function RootLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+  return (
+    <html
+      lang="en"
+      className={`${geistSans.variable} ${geistMono.variable} dark h-full antialiased`}
+    >
+      <body className="min-h-full flex flex-col" style={{ fontFamily: "'Exo 2', var(--font-geist-sans), system-ui, sans-serif" }}>
+        <ThemeProvider>
+          <Nav />
+          <main className="flex-1 p-6">{children}</main>
+          <ToastProvider />
+          <OllamaChat />
+          <KeyboardShortcuts />
+          <CommandSearch />
+        </ThemeProvider>
+      </body>
+    </html>
+  );
+}

dashboard/ui/app/logs/page.tsx

@@ -0,0 +1,136 @@
+"use client";
+
+import { useState, useEffect, useMemo } from "react";
+import { usePoll } from "@/lib/use-poll";
+import { fetchAPI } from "@/lib/api";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { ScrollArea } from "@/components/ui/scroll-area";
+import { cn } from "@/lib/utils";
+import { CardSkeleton } from "@/components/skeleton";
+
+interface LogFile {
+  name: string;
+  filename?: string;
+  size?: string;
+  size_bytes?: number;
+  modified?: number;
+}
+
+export default function LogsPage() {
+  const { data: logsRaw } = usePoll<LogFile[] | { files: LogFile[] }>("/api/logs", 60000);
+  const logFiles = Array.isArray(logsRaw) ? logsRaw : (logsRaw?.files ?? []);
+
+  const [selected, setSelected] = useState<string | null>(null);
+  const [content, setContent] = useState<string>("");
+  const [loadingContent, setLoadingContent] = useState(false);
+  const [search, setSearch] = useState("");
+
+  useEffect(() => {
+    if (!selected) {
+      setContent("");
+      return;
+    }
+    let cancelled = false;
+    setLoadingContent(true);
+    fetchAPI<{ lines?: string[]; content?: string } | string>(`/api/logs/${encodeURIComponent(selected)}?tail=200`)
+      .then((data) => {
+        if (cancelled) return;
+        if (typeof data === "string") setContent(data);
+        else if (Array.isArray((data as Record<string,unknown>).lines)) setContent(((data as Record<string,unknown>).lines as string[]).join("\n"));
+        else if ((data as Record<string,unknown>).content) setContent(String((data as Record<string,unknown>).content));
+        else setContent(JSON.stringify(data, null, 2));
+      })
+      .catch((err) => {
+        if (cancelled) return;
+        setContent(`Error loading log: ${err}`);
+      })
+      .finally(() => {
+        if (!cancelled) setLoadingContent(false);
+      });
+    return () => { cancelled = true; };
+  }, [selected]);
+
+  const filteredLines = useMemo(() => {
+    if (!content) return [];
+    const lines = content.split("\n");
+    if (!search.trim()) return lines;
+    const lower = search.toLowerCase();
+    return lines.filter(line => line.toLowerCase().includes(lower));
+  }, [content, search]);
+
+  return (
+    <div className="space-y-8">
+      <h1 className="text-lg font-semibold">Logs</h1>
+
+      <div className="grid grid-cols-1 lg:grid-cols-4 gap-5" style={{ minHeight: "500px" }}>
+        {/* Left sidebar: log file list */}
+        <Card className="lg:col-span-1">
+          <CardHeader className="pb-2">
+            <CardTitle className="text-base font-semibold">Log Files</CardTitle>
+          </CardHeader>
+          <CardContent>
+            <ScrollArea className="h-[460px]">
+              {logFiles.length === 0 ? (
+                <CardSkeleton lines={8} />
+              ) : (
+                <div className="space-y-1">
+                  {logFiles.map((file) => (
+                    <button
+                      key={file.name}
+                      onClick={() => setSelected(file.name)}
+                      className={cn(
+                        "w-full text-left rounded-lg px-3 py-2 text-sm transition-all duration-200",
+                        selected === file.name
+                          ? "bg-white/[0.06] text-foreground"
+                          : "text-muted-foreground hover:bg-white/[0.03] hover:text-foreground"
+                      )}
+                    >
+                      <p className="font-medium truncate">{file.name}</p>
+                      {(file.size || file.size_bytes != null) && (
+                        <p className="text-[10px] text-muted-foreground/60">
+                          {file.size ?? (file.size_bytes != null ? `${(file.size_bytes / 1024).toFixed(0)} KB` : "")}
+                        </p>
+                      )}
+                    </button>
+                  ))}
+                </div>
+              )}
+            </ScrollArea>
+          </CardContent>
+        </Card>
+
+        {/* Right: log content viewer */}
+        <Card className="lg:col-span-3">
+          <CardHeader className="pb-2 flex flex-row items-center justify-between gap-4">
+            <CardTitle className="text-base font-semibold">
+              {selected ?? "Select a log file"}
+            </CardTitle>
+            {selected && (
+              <input
+                value={search}
+                onChange={(e) => setSearch(e.target.value)}
+                placeholder="Filter lines..."
+                className="rounded-lg glass-input px-3 py-1.5 text-xs w-48"
+              />
+            )}
+          </CardHeader>
+          <CardContent>
+            <ScrollArea className="h-[460px]">
+              {!selected ? (
+                <p className="text-xs text-muted-foreground/60 py-4 text-center">
+                  Select a log file from the sidebar
+                </p>
+              ) : loadingContent ? (
+                <CardSkeleton lines={10} />
+              ) : (
+                <pre className="text-[11px] font-mono text-foreground whitespace-pre-wrap break-all leading-relaxed">
+                  {filteredLines.join("\n") || "No matching lines"}
+                </pre>
+              )}
+            </ScrollArea>
+          </CardContent>
+        </Card>
+      </div>
+    </div>
+  );
+}

dashboard/ui/app/media/page.tsx

@@ -0,0 +1,726 @@
+"use client";
+
+import { usePoll } from "@/lib/use-poll";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { StatusBadge } from "@/components/status-badge";
+import { Badge } from "@/components/ui/badge";
+import type { JellyfinLatestItem, ArrHistoryItem } from "@/lib/types";
+import { CardSkeleton } from "@/components/skeleton";
+import { EmptyState } from "@/components/empty-state";
+import { TdarrCard } from "@/components/tdarr-card";
+
+interface QueueItem {
+  title: string;
+  status: string;
+  size?: string;
+  timeleft?: string;
+  progress?: number;
+}
+
+interface SonarrQueueItem {
+  title: string;
+  status: string;
+  sizeleft?: string;
+  timeleft?: string;
+}
+
+interface RadarrQueueItem {
+  title: string;
+  status: string;
+  sizeleft?: string;
+  timeleft?: string;
+}
+
+interface SabQueue {
+  slots: QueueItem[];
+  speed: string;
+  paused: boolean;
+}
+
+interface ProwlarrStats {
+  total: number;
+  enabled: number;
+  indexers: { name: string; protocol: string }[];
+  error?: string;
+}
+
+interface BazarrStatus {
+  version?: string;
+  sonarr_signalr?: string;
+  radarr_signalr?: string;
+  wanted_episodes?: number;
+  wanted_movies?: number;
+  error?: string;
+}
+
+interface ABSLibrary {
+  name: string;
+  type: string;
+  items: number;
+}
+
+interface ABSStats {
+  libraries: ABSLibrary[];
+  total: number;
+  error?: string;
+}
+
+interface DelugeStatus {
+  available: boolean;
+  total?: number;
+  active?: number;
+  downloading?: number;
+  seeding?: number;
+  error?: string;
+}
+
+interface JellyfinStatus {
+  version: string;
+  server_name: string;
+  libraries: { name: string; type: string }[];
+  active_sessions: {
+    user: string;
+    client: string;
+    device: string;
+    now_playing: string;
+    type: string;
+  }[];
+  idle_sessions: number;
+}
+
+interface PlexSession {
+  title: string;
+  type: string;
+  year?: string;
+  player?: string;
+  platform?: string;
+  device?: string;
+  state?: string;
+  local?: boolean;
+  user?: string;
+  bandwidth?: string;
+  location?: string;
+  video_resolution?: string;
+  video_codec?: string;
+  media_bitrate?: string;
+  transcode?: boolean;
+  video_decision?: string;
+  transcode_speed?: string;
+}
+
+interface PlexServer {
+  name: string;
+  url: string;
+  online: boolean;
+  sessions: PlexSession[];
+  libraries: { title: string; type: string }[];
+  error?: string;
+}
+
+interface PlexStatus {
+  servers: PlexServer[];
+}
+
+const serverColors: Record<string, string> = {
+  calypso: "text-violet-400",
+  atlantis: "text-blue-400",
+  jellyfin: "text-cyan-400",
+};
+
+function colorizeServerName(name: string): string {
+  const lower = name.toLowerCase();
+  for (const [key, cls] of Object.entries(serverColors)) {
+    if (lower.includes(key)) return cls;
+  }
+  return "text-foreground";
+}
+
+const libraryTypeColors: Record<string, string> = {
+  movies: "text-blue-400",
+  movie: "text-blue-400",
+  tvshows: "text-violet-400",
+  tvshow: "text-violet-400",
+  series: "text-violet-400",
+  music: "text-green-400",
+  anime: "text-pink-400",
+};
+
+function getLibraryTypeColor(type: string): string {
+  return libraryTypeColors[type.toLowerCase()] ?? "text-foreground";
+}
+
+const serviceNameColors: Record<string, string> = {
+  sonarr: "text-blue-400",
+  radarr: "text-amber-400",
+  prowlarr: "text-violet-400",
+  bazarr: "text-green-400",
+};
+
+function formatShortDate(dateStr: string): string {
+  try {
+    const d = new Date(dateStr);
+    return d.toLocaleDateString("en-US", { month: "short", day: "2-digit" });
+  } catch {
+    return dateStr;
+  }
+}
+
+const eventColors: Record<string, string> = {
+  grabbed: "text-blue-400",
+  imported: "text-green-400",
+  downloadfolderimported: "text-green-400",
+  downloadfailed: "text-red-400",
+  deleted: "text-red-400",
+  renamed: "text-amber-400",
+  upgraded: "text-violet-400",
+};
+
+function getEventColor(event: string): string {
+  return eventColors[event.toLowerCase()] ?? "text-muted-foreground";
+}
+
+const mediaTypeColors: Record<string, string> = {
+  movie: "text-blue-400",
+  episode: "text-violet-400",
+  series: "text-violet-400",
+  season: "text-violet-400",
+  audio: "text-green-400",
+  musicalbum: "text-green-400",
+};
+
+export default function MediaPage() {
+  const { data: jellyfin } = usePoll<JellyfinStatus>("/api/jellyfin/status", 30000);
+  const { data: plex } = usePoll<PlexStatus>("/api/plex/status", 30000);
+  const { data: sonarrRaw } = usePoll<Record<string, unknown>>("/api/sonarr/queue", 30000);
+  const { data: radarrRaw } = usePoll<Record<string, unknown>>("/api/radarr/queue", 30000);
+  const { data: sabRaw } = usePoll<Record<string, unknown>>("/api/sabnzbd/queue", 30000);
+  const { data: prowlarr } = usePoll<ProwlarrStats>("/api/prowlarr/stats", 60000);
+  const { data: bazarr } = usePoll<BazarrStatus>("/api/bazarr/status", 60000);
+  const { data: abs } = usePoll<ABSStats>("/api/audiobookshelf/stats", 60000);
+  const { data: deluge } = usePoll<DelugeStatus>("/api/deluge/status", 30000);
+  const { data: jellyfinLatest } = usePoll<JellyfinLatestItem[]>("/api/jellyfin/latest", 60000);
+  const { data: sonarrHistory } = usePoll<ArrHistoryItem[]>("/api/sonarr/history", 60000);
+  const { data: radarrHistory } = usePoll<ArrHistoryItem[]>("/api/radarr/history", 60000);
+
+  const sonarr = (sonarrRaw?.records ?? sonarrRaw?.items ?? []) as SonarrQueueItem[];
+  const radarr = (radarrRaw?.records ?? radarrRaw?.items ?? []) as RadarrQueueItem[];
+  const sab = sabRaw?.queue as SabQueue | undefined;
+
+  // Collect all active streams from both Jellyfin and Plex
+  const allStreams: {
+    title: string; player: string; device: string; source: string;
+    transcode?: boolean; bandwidth?: string; state?: string;
+    user?: string; quality?: string; location?: string;
+  }[] = [];
+
+  if (jellyfin?.active_sessions) {
+    for (const s of jellyfin.active_sessions) {
+      allStreams.push({
+        title: s.now_playing,
+        player: s.client,
+        device: s.device,
+        source: `Jellyfin (${jellyfin.server_name})`,
+      });
+    }
+  }
+
+  if (plex?.servers) {
+    for (const server of plex.servers) {
+      for (const s of server.sessions) {
+        const quality = [
+          s.video_resolution?.toUpperCase(),
+          s.video_codec?.toUpperCase(),
+        ].filter(Boolean).join(" ");
+        allStreams.push({
+          title: s.title,
+          player: s.player ?? "?",
+          device: s.device ?? s.platform ?? "?",
+          source: `Plex (${server.name})`,
+          transcode: s.transcode,
+          bandwidth: s.bandwidth,
+          state: s.state,
+          user: s.user,
+          quality,
+          location: s.location,
+        });
+      }
+    }
+  }
+
+  return (
+    <div className="space-y-8">
+      <h1 className="text-lg font-semibold">Media</h1>
+
+      {/* Tdarr Cluster */}
+      <TdarrCard />
+
+      {/* Now Playing Hero */}
+      <Card className="overflow-hidden relative">
+        <CardHeader className="pb-2 flex flex-row items-center justify-between">
+          <CardTitle className="text-base font-semibold">Now Playing</CardTitle>
+          {allStreams.length > 0 && (
+            <Badge variant="outline" className="text-xs border-green-500/30 text-green-400 bg-green-500/5">
+              <span className="inline-block w-1.5 h-1.5 rounded-full bg-green-400 mr-1.5 glow-green" />
+              {allStreams.length} stream{allStreams.length !== 1 ? "s" : ""}
+            </Badge>
+          )}
+        </CardHeader>
+        <CardContent>
+          {allStreams.length === 0 ? (
+            <EmptyState icon={">"} title="Nothing playing" description="Start something on Jellyfin or Plex" />
+          ) : (
+            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+              {allStreams.map((stream, i) => (
+                <div key={i} className="rounded-xl bg-white/[0.03] border border-white/[0.06] px-4 py-3 space-y-2">
+                  <div className="flex items-start justify-between gap-2">
+                    <p className="text-base font-semibold text-foreground truncate">{stream.title}</p>
+                    {stream.user && (
+                      <span className="text-xs text-muted-foreground/80 shrink-0">{stream.user}</span>
+                    )}
+                  </div>
+                  <div className="flex flex-wrap items-center gap-2">
+                    <Badge variant="secondary" className="text-xs bg-white/[0.06] border border-white/[0.08]">
+                      {stream.source}
+                    </Badge>
+                    {stream.state && (
+                      <StatusBadge
+                        color={stream.state === "playing" ? "green" : "amber"}
+                        label={stream.state}
+                      />
+                    )}
+                    {stream.quality && (
+                      <Badge variant="secondary" className="text-xs bg-blue-500/10 border border-blue-500/20 text-blue-400">
+                        {stream.quality}
+                      </Badge>
+                    )}
+                    {stream.transcode && (
+                      <Badge variant="secondary" className="text-xs bg-amber-500/10 border border-amber-500/20 text-amber-400">
+                        Transcoding
+                      </Badge>
+                    )}
+                    {stream.location && (
+                      <Badge variant="secondary" className={`text-xs ${stream.location === "lan" ? "bg-green-500/10 border-green-500/20 text-green-400" : "bg-purple-500/10 border-purple-500/20 text-purple-400"}`}>
+                        {stream.location.toUpperCase()}
+                      </Badge>
+                    )}
+                  </div>
+                  <div className="flex items-center gap-4 text-sm text-muted-foreground">
+                    <span>{stream.player}</span>
+                    <span>&middot;</span>
+                    <span>{stream.device}</span>
+                    {stream.bandwidth && (
+                      <>
+                        <span>&middot;</span>
+                        <span>{(Number(stream.bandwidth) / 1000).toFixed(1)} Mbps</span>
+                      </>
+                    )}
+                  </div>
+                </div>
+              ))}
+            </div>
+          )}
+        </CardContent>
+      </Card>
+
+      {/* Recently Added + Download History */}
+      <div className="grid grid-cols-1 md:grid-cols-3 gap-5">
+        {/* Recently Added to Jellyfin */}
+        <Card>
+          <CardHeader className="pb-2">
+            <CardTitle className="text-base font-semibold text-cyan-400">Recently Added</CardTitle>
+          </CardHeader>
+          <CardContent>
+            {!jellyfinLatest ? (
+              <CardSkeleton lines={5} />
+            ) : jellyfinLatest.length === 0 ? (
+              <p className="text-sm text-muted-foreground/60">No recent additions</p>
+            ) : (
+              <div className="space-y-2">
+                {jellyfinLatest.slice(0, 8).map((item, i) => (
+                  <div key={i} className="flex items-center justify-between text-sm rounded-lg px-2 py-1.5 hover:bg-white/[0.03] transition-colors">
+                    <div className="min-w-0 flex-1">
+                      <p className="text-foreground font-medium truncate">
+                        {item.series ? `${item.series}: ${item.name}` : item.name}
+                        {item.year ? ` (${item.year})` : ""}
+                      </p>
+                    </div>
+                    <div className="flex items-center gap-3 shrink-0 ml-3">
+                      <span className={`text-xs ${mediaTypeColors[item.type.toLowerCase()] ?? "text-muted-foreground"}`}>
+                        {item.type}
+                      </span>
+                      <span className="text-xs text-muted-foreground/60">
+                        {formatShortDate(item.date)}
+                      </span>
+                    </div>
+                  </div>
+                ))}
+              </div>
+            )}
+          </CardContent>
+        </Card>
+
+        {/* Sonarr History */}
+        <Card>
+          <CardHeader className="pb-2">
+            <CardTitle className={`text-base font-semibold ${serviceNameColors.sonarr}`}>Sonarr History</CardTitle>
+          </CardHeader>
+          <CardContent>
+            {!sonarrHistory ? (
+              <CardSkeleton lines={5} />
+            ) : sonarrHistory.length === 0 ? (
+              <p className="text-sm text-muted-foreground/60">No recent activity</p>
+            ) : (
+              <div className="space-y-2">
+                {sonarrHistory.slice(0, 8).map((item, i) => (
+                  <div key={i} className="flex items-center justify-between text-sm rounded-lg px-2 py-1.5 hover:bg-white/[0.03] transition-colors">
+                    <div className="min-w-0 flex-1">
+                      <p className="text-foreground font-medium truncate">{item.title}</p>
+                    </div>
+                    <div className="flex items-center gap-2 shrink-0 ml-3">
+                      <span className={`text-xs ${getEventColor(item.event)}`}>{item.event}</span>
+                      <span className="text-xs text-muted-foreground/60 font-mono">{item.quality}</span>
+                      <span className="text-xs text-muted-foreground/50">{formatShortDate(item.date)}</span>
+                    </div>
+                  </div>
+                ))}
+              </div>
+            )}
+          </CardContent>
+        </Card>
+
+        {/* Radarr History */}
+        <Card>
+          <CardHeader className="pb-2">
+            <CardTitle className={`text-base font-semibold ${serviceNameColors.radarr}`}>Radarr History</CardTitle>
+          </CardHeader>
+          <CardContent>
+            {!radarrHistory ? (
+              <CardSkeleton lines={5} />
+            ) : radarrHistory.length === 0 ? (
+              <p className="text-sm text-muted-foreground/60">No recent activity</p>
+            ) : (
+              <div className="space-y-2">
+                {radarrHistory.slice(0, 8).map((item, i) => (
+                  <div key={i} className="flex items-center justify-between text-sm rounded-lg px-2 py-1.5 hover:bg-white/[0.03] transition-colors">
+                    <div className="min-w-0 flex-1">
+                      <p className="text-foreground font-medium truncate">{item.title}</p>
+                    </div>
+                    <div className="flex items-center gap-2 shrink-0 ml-3">
+                      <span className={`text-xs ${getEventColor(item.event)}`}>{item.event}</span>
+                      <span className="text-xs text-muted-foreground/60 font-mono">{item.quality}</span>
+                      <span className="text-xs text-muted-foreground/50">{formatShortDate(item.date)}</span>
+                    </div>
+                  </div>
+                ))}
+              </div>
+            )}
+          </CardContent>
+        </Card>
+      </div>
+
+      {/* Media Servers -- 2 columns */}
+      <div className="grid grid-cols-1 md:grid-cols-2 gap-5">
+        {/* Jellyfin */}
+        <Card>
+          <CardHeader className="pb-2 flex flex-row items-center justify-between">
+            <CardTitle className={`text-base font-semibold ${serverColors.jellyfin}`}>Jellyfin</CardTitle>
+            {jellyfin && (
+              <StatusBadge color="green" label={`v${jellyfin.version}`} />
+            )}
+          </CardHeader>
+          <CardContent className="space-y-3">
+            {!jellyfin ? (
+              <CardSkeleton lines={4} />
+            ) : (
+              <>
+                <p className={`text-sm ${colorizeServerName(jellyfin.server_name)}`}>{jellyfin.server_name}</p>
+                <div className="space-y-2">
+                  <p className="text-xs uppercase tracking-wider text-muted-foreground/70 font-medium">Libraries</p>
+                  {jellyfin.libraries.map((lib) => (
+                    <div key={lib.name} className="flex items-center justify-between text-sm">
+                      <span className="text-foreground">{lib.name}</span>
+                      <span className={`text-xs font-medium ${getLibraryTypeColor(lib.type)}`}>{lib.type || "library"}</span>
+                    </div>
+                  ))}
+                </div>
+                {jellyfin.idle_sessions > 0 && (
+                  <p className="text-xs text-muted-foreground/60">
+                    {jellyfin.idle_sessions} idle session{jellyfin.idle_sessions > 1 ? "s" : ""}
+                  </p>
+                )}
+              </>
+            )}
+          </CardContent>
+        </Card>
+
+        {/* Plex */}
+        <Card>
+          <CardHeader className="pb-2">
+            <CardTitle className="text-base font-semibold">Plex</CardTitle>
+          </CardHeader>
+          <CardContent className="space-y-4">
+            {!plex ? (
+              <CardSkeleton lines={4} />
+            ) : (
+              plex.servers.map((server) => (
+                <div key={server.name} className="space-y-2">
+                  <div className="flex items-center justify-between">
+                    <span className={`text-sm font-medium ${colorizeServerName(server.name)}`}>{server.name}</span>
+                    <StatusBadge
+                      color={server.online ? "green" : "red"}
+                      label={server.online ? "Online" : "Offline"}
+                    />
+                  </div>
+                  {server.online && server.libraries.length > 0 && (
+                    <div className="space-y-1 pl-2">
+                      {server.libraries.map((lib, j) => (
+                        <div key={j} className="flex items-center justify-between text-sm">
+                          <span className="text-foreground/80">{lib.title}</span>
+                          <span className={`text-xs ${getLibraryTypeColor(lib.type)}`}>{lib.type}</span>
+                        </div>
+                      ))}
+                    </div>
+                  )}
+                  {server.error && (
+                    <p className="text-xs text-red-400 pl-2">{server.error}</p>
+                  )}
+                </div>
+              ))
+            )}
+          </CardContent>
+        </Card>
+      </div>
+
+      {/* Downloads & Services */}
+      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-5">
+        {/* Sonarr Queue */}
+        <Card>
+          <CardHeader className="pb-2">
+            <CardTitle className={`text-base font-semibold ${serviceNameColors.sonarr}`}>Sonarr Queue</CardTitle>
+          </CardHeader>
+          <CardContent>
+            {!sonarr ? (
+              <CardSkeleton lines={3} />
+            ) : sonarr.length === 0 ? (
+              <EmptyState icon={"v"} title="Queue empty" description="Nothing downloading" />
+            ) : (
+              <div className="space-y-2">
+                {sonarr.map((item, i) => (
+                  <div key={i} className="space-y-1 rounded-lg px-2 py-1.5 hover:bg-white/[0.03] transition-colors">
+                    <p className="text-sm text-foreground font-medium truncate">{item.title}</p>
+                    <div className="flex items-center gap-2">
+                      <StatusBadge
+                        color={item.status === "completed" ? "green" : item.status === "downloading" ? "blue" : "amber"}
+                        label={item.status}
+                      />
+                      {item.timeleft && (
+                        <span className="text-xs text-muted-foreground/70">{item.timeleft}</span>
+                      )}
+                    </div>
+                  </div>
+                ))}
+              </div>
+            )}
+          </CardContent>
+        </Card>
+
+        {/* Radarr Queue */}
+        <Card>
+          <CardHeader className="pb-2">
+            <CardTitle className={`text-base font-semibold ${serviceNameColors.radarr}`}>Radarr Queue</CardTitle>
+          </CardHeader>
+          <CardContent>
+            {!radarr ? (
+              <CardSkeleton lines={3} />
+            ) : radarr.length === 0 ? (
+              <EmptyState icon={"v"} title="Queue empty" description="Nothing downloading" />
+            ) : (
+              <div className="space-y-2">
+                {radarr.map((item, i) => (
+                  <div key={i} className="space-y-1 rounded-lg px-2 py-1.5 hover:bg-white/[0.03] transition-colors">
+                    <p className="text-sm text-foreground font-medium truncate">{item.title}</p>
+                    <div className="flex items-center gap-2">
+                      <StatusBadge
+                        color={item.status === "completed" ? "green" : item.status === "downloading" ? "blue" : "amber"}
+                        label={item.status}
+                      />
+                      {item.timeleft && (
+                        <span className="text-xs text-muted-foreground/70">{item.timeleft}</span>
+                      )}
+                    </div>
+                  </div>
+                ))}
+              </div>
+            )}
+          </CardContent>
+        </Card>
+
+        {/* SABnzbd + Deluge combined Downloads card */}
+        <Card>
+          <CardHeader className="pb-2 flex flex-row items-center justify-between">
+            <CardTitle className="text-base font-semibold">Downloads</CardTitle>
+            <div className="flex items-center gap-2">
+              {sab && (
+                <StatusBadge color={sab.paused ? "amber" : "green"} label={sab.paused ? "SAB Paused" : `SAB ${sab.speed}`} />
+              )}
+              {deluge && (
+                <StatusBadge color={deluge.available ? "green" : "red"} label={deluge.available ? "Deluge" : "Deluge Off"} />
+              )}
+            </div>
+          </CardHeader>
+          <CardContent className="space-y-4">
+            {/* SABnzbd */}
+            <div>
+              <p className="text-xs uppercase tracking-wider text-muted-foreground/70 font-medium mb-2">SABnzbd</p>
+              {!sab ? (
+                <CardSkeleton lines={2} />
+              ) : sab.slots.length === 0 ? (
+                <EmptyState icon={"v"} title="Queue empty" description="Nothing downloading" />
+              ) : (
+                <div className="space-y-2">
+                  {sab.slots.map((item, i) => (
+                    <div key={i} className="space-y-1 rounded-lg px-2 py-1.5 hover:bg-white/[0.03] transition-colors">
+                      <p className="text-sm text-foreground font-medium truncate">{item.title}</p>
+                      <div className="flex items-center gap-2">
+                        <StatusBadge color={item.status === "Downloading" ? "blue" : "amber"} label={item.status} />
+                        {item.timeleft && <span className="text-xs text-muted-foreground/70">{item.timeleft}</span>}
+                      </div>
+                      {item.progress != null && (
+                        <div className="glass-bar-track h-1.5">
+                          <div
+                            className="h-full glass-bar-fill bg-gradient-to-r from-blue-500 to-cyan-400"
+                            style={{ width: `${item.progress}%` }}
+                          />
+                        </div>
+                      )}
+                    </div>
+                  ))}
+                </div>
+              )}
+            </div>
+            {/* Deluge */}
+            <div>
+              <p className="text-xs uppercase tracking-wider text-muted-foreground/70 font-medium mb-2">Deluge</p>
+              {!deluge ? (
+                <CardSkeleton lines={2} />
+              ) : !deluge.available ? (
+                <p className="text-sm text-red-400">{deluge.error ?? "Unreachable"}</p>
+              ) : (
+                <div className="grid grid-cols-3 gap-3 text-center">
+                  <div>
+                    <p className="text-2xl font-bold text-foreground">{deluge.total}</p>
+                    <p className="text-xs text-muted-foreground">Total</p>
+                  </div>
+                  <div>
+                    <p className="text-2xl font-bold text-blue-400">{deluge.downloading}</p>
+                    <p className="text-xs text-muted-foreground">Downloading</p>
+                  </div>
+                  <div>
+                    <p className="text-2xl font-bold text-purple-400">{deluge.seeding}</p>
+                    <p className="text-xs text-muted-foreground">Seeding</p>
+                  </div>
+                </div>
+              )}
+            </div>
+          </CardContent>
+        </Card>
+
+        {/* Prowlarr + Bazarr combined */}
+        <Card>
+          <CardHeader className="pb-2">
+            <CardTitle className="text-base font-semibold">Indexers & Subtitles</CardTitle>
+          </CardHeader>
+          <CardContent className="space-y-4">
+            {/* Prowlarr */}
+            <div>
+              <div className="flex items-center justify-between mb-2">
+                <p className={`text-xs uppercase tracking-wider font-medium ${serviceNameColors.prowlarr}`}>Prowlarr</p>
+                {prowlarr && !prowlarr.error && (
+                  <StatusBadge color="green" label={`${prowlarr.enabled} active`} />
+                )}
+              </div>
+              {!prowlarr ? (
+                <CardSkeleton lines={3} />
+              ) : prowlarr.error ? (
+                <p className="text-sm text-red-400">{prowlarr.error}</p>
+              ) : (
+                <div className="space-y-1">
+                  <p className="text-sm text-muted-foreground/70">
+                    {prowlarr.enabled}/{prowlarr.total} indexers enabled
+                  </p>
+                  {prowlarr.indexers.slice(0, 5).map((idx, i) => (
+                    <div key={i} className="flex items-center justify-between text-sm">
+                      <span className="text-foreground truncate">{idx.name}</span>
+                      <span className="text-xs text-muted-foreground/60 ml-2 shrink-0">{idx.protocol}</span>
+                    </div>
+                  ))}
+                </div>
+              )}
+            </div>
+            {/* Bazarr */}
+            <div>
+              <div className="flex items-center justify-between mb-2">
+                <p className={`text-xs uppercase tracking-wider font-medium ${serviceNameColors.bazarr}`}>Bazarr</p>
+                {bazarr && !bazarr.error && (
+                  <StatusBadge color="green" label={bazarr.version} />
+                )}
+              </div>
+              {!bazarr ? (
+                <CardSkeleton lines={3} />
+              ) : bazarr.error ? (
+                <p className="text-sm text-red-400">{bazarr.error}</p>
+              ) : (
+                <div className="space-y-2">
+                  <div className="flex items-center justify-between text-sm">
+                    <span className="text-muted-foreground/70">Wanted episodes</span>
+                    <span className="text-foreground font-medium">{bazarr.wanted_episodes}</span>
+                  </div>
+                  <div className="flex items-center justify-between text-sm">
+                    <span className="text-muted-foreground/70">Wanted movies</span>
+                    <span className="text-foreground font-medium">{bazarr.wanted_movies}</span>
+                  </div>
+                  <div className="flex items-center gap-3 text-sm">
+                    <span className="text-muted-foreground/70">SignalR</span>
+                    <StatusBadge color={bazarr.sonarr_signalr === "LIVE" ? "green" : "red"} label={`Sonarr ${bazarr.sonarr_signalr}`} />
+                    <StatusBadge color={bazarr.radarr_signalr === "LIVE" ? "green" : "red"} label={`Radarr ${bazarr.radarr_signalr ?? ""}`} />
+                  </div>
+                </div>
+              )}
+            </div>
+          </CardContent>
+        </Card>
+
+        {/* Audiobookshelf */}
+        <Card>
+          <CardHeader className="pb-2 flex flex-row items-center justify-between">
+            <CardTitle className="text-base font-semibold">Audiobookshelf</CardTitle>
+            {abs && !abs.error && (
+              <Badge variant="secondary" className="text-xs bg-white/[0.06] border border-white/[0.08]">
+                {abs.total} items
+              </Badge>
+            )}
+          </CardHeader>
+          <CardContent>
+            {!abs ? (
+              <CardSkeleton lines={3} />
+            ) : abs.error ? (
+              <p className="text-sm text-red-400">{abs.error}</p>
+            ) : (
+              <div className="space-y-3">
+                {abs.libraries.map((lib, i) => (
+                  <div key={i} className="flex items-center justify-between text-sm">
+                    <span className="text-foreground font-medium">{lib.name}</span>
+                    <div className="flex items-center gap-2">
+                      <span className="text-2xl font-bold text-foreground">{lib.items}</span>
+                      <span className="text-xs text-muted-foreground">{lib.type}</span>
+                    </div>
+                  </div>
+                ))}
+              </div>
+            )}
+          </CardContent>
+        </Card>
+      </div>
+    </div>
+  );
+}

dashboard/ui/app/network/page.tsx

@@ -0,0 +1,379 @@
+"use client";
+
+import { usePoll } from "@/lib/use-poll";
+import { StatCard } from "@/components/stat-card";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { StatusBadge } from "@/components/status-badge";
+import { Badge } from "@/components/ui/badge";
+import { DataTable, Column } from "@/components/data-table";
+import type { CloudflareStats, AuthentikStats, GiteaActivity } from "@/lib/types";
+import { CardSkeleton } from "@/components/skeleton";
+import { Copyable } from "@/components/copyable";
+
+interface AdGuardStats {
+  total_queries?: number;
+  num_dns_queries?: number;
+  blocked?: number;
+  num_blocked_filtering?: number;
+  avg_time?: number;
+  avg_processing_time?: number;
+}
+
+interface HeadscaleNode {
+  id: string;
+  name: string;
+  ip_addresses?: string[];
+  ip?: string;
+  online: boolean;
+  last_seen?: string;
+}
+
+interface DnsRewrite {
+  domain: string;
+  answer: string;
+}
+
+const nodeColors: Record<string, string> = {
+  atlantis: "text-blue-400",
+  calypso: "text-violet-400",
+  olares: "text-emerald-400",
+  nuc: "text-amber-400",
+  rpi5: "text-cyan-400",
+  "homelab-vm": "text-green-400",
+  "matrix-ubuntu": "text-pink-400",
+  guava: "text-orange-400",
+  seattle: "text-teal-400",
+  jellyfish: "text-indigo-400",
+};
+
+function getNodeColor(name: string): string {
+  const lower = name.toLowerCase();
+  for (const [key, cls] of Object.entries(nodeColors)) {
+    if (lower.includes(key)) return cls;
+  }
+  return "text-foreground";
+}
+
+function formatTime(ts: string): string {
+  try {
+    return new Date(ts).toLocaleString("en-US", {
+      month: "short",
+      day: "numeric",
+      hour: "2-digit",
+      minute: "2-digit",
+    });
+  } catch {
+    return ts;
+  }
+}
+
+const dnsTypeColors: Record<string, string> = {
+  A: "text-blue-400",
+  AAAA: "text-violet-400",
+  CNAME: "text-cyan-400",
+  MX: "text-amber-400",
+  TXT: "text-green-400",
+  SRV: "text-pink-400",
+  NS: "text-teal-400",
+};
+
+export default function NetworkPage() {
+  const { data: adguard } = usePoll<AdGuardStats>("/api/network/adguard", 60000);
+  const { data: nodesRaw } = usePoll<HeadscaleNode[] | { nodes: HeadscaleNode[] }>("/api/network/headscale", 30000);
+  const { data: rewritesRaw } = usePoll<DnsRewrite[] | { rewrites: DnsRewrite[] }>("/api/network/adguard/rewrites", 120000);
+  const { data: cloudflare } = usePoll<CloudflareStats>("/api/network/cloudflare", 120000);
+  const { data: authentik } = usePoll<AuthentikStats & { users?: Array<{ username: string; last_login: string; active: boolean }> }>("/api/network/authentik", 60000);
+  const { data: gitea } = usePoll<GiteaActivity>("/api/network/gitea", 60000);
+
+  const nodes = Array.isArray(nodesRaw) ? nodesRaw : (nodesRaw?.nodes ?? []);
+  const rewrites = Array.isArray(rewritesRaw) ? rewritesRaw : (rewritesRaw?.rewrites ?? []);
+
+  const rewriteColumns: Column<DnsRewrite>[] = [
+    {
+      key: "domain",
+      label: "Domain",
+      render: (row) => <span className="font-medium text-cyan-400">{row.domain}</span>,
+    },
+    {
+      key: "answer",
+      label: "Answer",
+      render: (row) => <Copyable text={row.answer} className="text-amber-400 font-mono" />,
+    },
+  ];
+
+  return (
+    <div className="space-y-8">
+      <h1 className="text-lg font-semibold">Network</h1>
+
+      {/* Top row: AdGuard stats */}
+      <div className="grid grid-cols-1 sm:grid-cols-3 lg:grid-cols-3 gap-5">
+        <StatCard
+          label="Total Queries"
+          value={(() => { const v = adguard?.total_queries ?? adguard?.num_dns_queries; return v != null ? v.toLocaleString() : "--"; })()}
+          sub="DNS queries"
+        />
+        <StatCard
+          label="Blocked"
+          value={(() => { const v = adguard?.blocked ?? adguard?.num_blocked_filtering; return v != null ? v.toLocaleString() : "--"; })()}
+          sub="blocked by filters"
+        />
+        <StatCard
+          label="Avg Response"
+          value={(() => { const v = adguard?.avg_time ?? adguard?.avg_processing_time; return v != null ? `${(v * 1000).toFixed(1)}ms` : "--"; })()}
+          sub="processing time"
+        />
+      </div>
+
+      {/* Middle: Headscale nodes grid */}
+      <Card>
+        <CardHeader className="pb-2 flex flex-row items-center justify-between">
+          <CardTitle className="text-base font-semibold text-cyan-400">Headscale Nodes</CardTitle>
+          {nodes.length > 0 && (
+            <Badge variant="secondary" className="text-xs bg-cyan-500/10 border border-cyan-500/20 text-cyan-400">
+              {nodes.filter(n => n.online).length}/{nodes.length} online
+            </Badge>
+          )}
+        </CardHeader>
+        <CardContent>
+          {nodes.length === 0 ? (
+            (nodesRaw as Record<string,unknown>)?.error ? <p className="text-sm text-red-400">{String((nodesRaw as Record<string,unknown>).error)}</p> : <CardSkeleton lines={4} />
+          ) : (
+            <div className="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 gap-4">
+              {nodes.map((node) => (
+                <Card key={node.id} className="overflow-hidden">
+                  <CardContent className="pt-3 pb-3 px-4">
+                    <div className="flex items-center gap-2 mb-1">
+                      <span className={`w-2 h-2 rounded-full shrink-0 ${node.online ? "bg-green-500 glow-green" : "bg-red-500 glow-red"}`} />
+                      <span className={`text-sm font-medium truncate ${getNodeColor(node.name)}`}>{node.name}</span>
+                    </div>
+                    <p className="text-xs text-muted-foreground/70 font-mono">
+                      <Copyable text={node.ip_addresses?.[0] ?? node.ip ?? "--"} />
+                    </p>
+                    {node.last_seen && (
+                      <p className="text-xs text-muted-foreground/60 mt-0.5">
+                        {new Date(node.last_seen).toLocaleString("en-US", {
+                          month: "short", day: "numeric", hour: "2-digit", minute: "2-digit",
+                        })}
+                      </p>
+                    )}
+                  </CardContent>
+                </Card>
+              ))}
+            </div>
+          )}
+        </CardContent>
+      </Card>
+
+      {/* Cloudflare DNS — full width */}
+      <Card>
+        <CardHeader className="pb-2 flex flex-row items-center justify-between">
+          <CardTitle className="text-base font-semibold text-orange-400">Cloudflare DNS</CardTitle>
+          <div className="flex items-center gap-2">
+            {cloudflare && (
+              <>
+                <Badge variant="secondary" className="text-xs bg-orange-500/10 border border-orange-500/20 text-orange-400">
+                  {cloudflare.proxied} proxied
+                </Badge>
+                <Badge variant="secondary" className="text-xs bg-white/[0.06] border border-white/[0.08] text-muted-foreground">
+                  {cloudflare.dns_only} DNS only
+                </Badge>
+                <Badge variant="secondary" className="text-xs bg-white/[0.04] border border-white/[0.06]">
+                  {cloudflare.total} total
+                </Badge>
+              </>
+            )}
+          </div>
+        </CardHeader>
+        <CardContent>
+          {!cloudflare ? (
+            <CardSkeleton lines={6} />
+          ) : (
+            <div className="space-y-4">
+              {/* Type badges */}
+              <div className="flex flex-wrap gap-2">
+                {Object.entries(cloudflare.types).map(([type, count]) => (
+                  <Badge
+                    key={type}
+                    variant="secondary"
+                    className={`text-xs bg-white/[0.04] border border-white/[0.08] ${dnsTypeColors[type] ?? "text-foreground"}`}
+                  >
+                    {type}: {count}
+                  </Badge>
+                ))}
+              </div>
+              {/* Records table */}
+              {(cloudflare as CloudflareStats & { records?: { name: string; type: string; content: string; proxied: boolean; ttl: number }[] }).records && (
+                <div className="rounded-lg border border-white/[0.06] overflow-hidden">
+                  <table className="w-full text-sm">
+                    <thead>
+                      <tr className="bg-white/[0.04] text-xs text-muted-foreground uppercase tracking-wider">
+                        <th className="text-left px-3 py-2 font-medium">Name</th>
+                        <th className="text-left px-3 py-2 font-medium w-16">Type</th>
+                        <th className="text-left px-3 py-2 font-medium">Content</th>
+                        <th className="text-center px-3 py-2 font-medium w-20">Proxy</th>
+                      </tr>
+                    </thead>
+                    <tbody>
+                      {((cloudflare as CloudflareStats & { records?: { name: string; type: string; content: string; proxied: boolean; ttl: number }[] }).records ?? []).map((rec, i) => (
+                        <tr key={i} className="border-t border-white/[0.04] hover:bg-white/[0.03] transition-colors">
+                          <td className="px-3 py-1.5 text-cyan-400 font-mono text-xs truncate max-w-[220px]">{rec.name}</td>
+                          <td className="px-3 py-1.5">
+                            <span className={`text-xs font-medium ${dnsTypeColors[rec.type] ?? ""}`}>{rec.type}</span>
+                          </td>
+                          <td className="px-3 py-1.5 text-amber-400/80 font-mono text-xs truncate max-w-[200px]"><Copyable text={rec.content} /></td>
+                          <td className="px-3 py-1.5 text-center">
+                            {rec.proxied ? (
+                              <span className="inline-block w-2 h-2 rounded-full bg-orange-400" style={{ boxShadow: "0 0 6px rgba(251,146,60,0.5)" }} title="Proxied" />
+                            ) : (
+                              <span className="inline-block w-2 h-2 rounded-full bg-gray-500" title="DNS Only" />
+                            )}
+                          </td>
+                        </tr>
+                      ))}
+                    </tbody>
+                  </table>
+                </div>
+              )}
+            </div>
+          )}
+        </CardContent>
+      </Card>
+
+      {/* Authentik, Gitea -- 2 columns */}
+      <div className="grid grid-cols-1 md:grid-cols-2 gap-5">
+
+        {/* Authentik SSO */}
+        <Card>
+          <CardHeader className="pb-2 flex flex-row items-center justify-between">
+            <CardTitle className="text-base font-semibold text-violet-400">Authentik SSO</CardTitle>
+            {authentik && (
+              <Badge variant="secondary" className="text-xs bg-violet-500/10 border border-violet-500/20 text-violet-400">
+                {authentik.active_sessions} sessions
+              </Badge>
+            )}
+          </CardHeader>
+          <CardContent>
+            {!authentik ? (
+              <CardSkeleton lines={4} />
+            ) : (
+              <div className="space-y-4">
+                {/* Users */}
+                {authentik.users && authentik.users.length > 0 && (
+                  <div>
+                    <p className="text-xs uppercase tracking-wider text-muted-foreground/70 font-medium mb-2">Users</p>
+                    <div className="space-y-2">
+                      {authentik.users.map((u, i) => (
+                        <div key={i} className="flex items-center justify-between text-sm">
+                          <div className="flex items-center gap-2">
+                            <StatusBadge color={u.active ? "green" : "red"} />
+                            <span className="text-violet-400 font-medium">{u.username}</span>
+                          </div>
+                          <span className="text-xs text-muted-foreground/60">
+                            {u.last_login === "never" ? "never" : u.last_login.slice(0, 10)}
+                          </span>
+                        </div>
+                      ))}
+                    </div>
+                  </div>
+                )}
+                {(authentik.recent_events ?? []).length > 0 && (
+                  <div>
+                    <p className="text-xs uppercase tracking-wider text-muted-foreground/70 font-medium mb-2">Recent Events</p>
+                    <div className="space-y-2">
+                      {(authentik.recent_events ?? []).slice(0, 6).map((evt, i) => (
+                        <div key={i} className="flex items-center justify-between text-sm">
+                          <div className="flex items-center gap-2 min-w-0">
+                            <StatusBadge
+                              color={String(evt.action).includes("login") ? "green" : String(evt.action).includes("fail") ? "red" : "blue"}
+                              label={String(evt.action)}
+                            />
+                            <span className="text-xs text-muted-foreground/60 truncate">{String(evt.user ?? "")}</span>
+                          </div>
+                          <span className="text-xs text-muted-foreground/50 shrink-0 ml-2">
+                            {String(evt.created ?? "").slice(11, 16)}
+                          </span>
+                        </div>
+                      ))}
+                    </div>
+                  </div>
+                )}
+                {(authentik.recent_events ?? []).length === 0 && !(authentik.users?.length) && (
+                  <p className="text-sm text-muted-foreground/60">No recent activity</p>
+                )}
+              </div>
+            )}
+          </CardContent>
+        </Card>
+
+        {/* Gitea Activity */}
+        <Card>
+          <CardHeader className="pb-2 flex flex-row items-center justify-between">
+            <CardTitle className="text-base font-semibold text-green-400">Gitea</CardTitle>
+            {gitea && gitea.open_prs.length > 0 && (
+              <Badge variant="secondary" className="text-xs bg-green-500/10 border border-green-500/20 text-green-400">
+                {gitea.open_prs.length} open PR{gitea.open_prs.length !== 1 ? "s" : ""}
+              </Badge>
+            )}
+          </CardHeader>
+          <CardContent>
+            {!gitea ? (
+              <CardSkeleton lines={4} />
+            ) : (
+              <div className="space-y-4">
+                {gitea.commits.length > 0 && (
+                  <div>
+                    <p className="text-xs uppercase tracking-wider text-muted-foreground/70 font-medium mb-2">Recent Commits</p>
+                    <div className="space-y-2">
+                      {gitea.commits.slice(0, 6).map((c, i) => (
+                        <div key={i} className="text-sm">
+                          <div className="flex items-center gap-2">
+                            <span className="text-amber-400 font-mono text-xs shrink-0">{c.sha.slice(0, 7)}</span>
+                            <span className="text-foreground truncate">{c.message.split("\n")[0]}</span>
+                          </div>
+                          <div className="flex items-center gap-2 mt-0.5">
+                            <span className="text-xs text-muted-foreground/60">{c.author}</span>
+                            <span className="text-xs text-muted-foreground/40">{formatTime(c.date)}</span>
+                          </div>
+                        </div>
+                      ))}
+                    </div>
+                  </div>
+                )}
+                {gitea.open_prs.length > 0 && (
+                  <div>
+                    <p className="text-xs uppercase tracking-wider text-muted-foreground/70 font-medium mb-2">Open PRs</p>
+                    <div className="space-y-1.5">
+                      {gitea.open_prs.map((pr, i) => (
+                        <div key={i} className="flex items-center justify-between text-sm">
+                          <div className="flex items-center gap-2 min-w-0">
+                            <span className="text-green-400 font-mono text-xs shrink-0">#{pr.number}</span>
+                            <span className="text-foreground truncate">{pr.title}</span>
+                          </div>
+                          <span className="text-xs text-muted-foreground/60 shrink-0 ml-2">{pr.author}</span>
+                        </div>
+                      ))}
+                    </div>
+                  </div>
+                )}
+              </div>
+            )}
+          </CardContent>
+        </Card>
+      </div>
+
+      {/* Bottom: DNS rewrites table */}
+      <Card>
+        <CardHeader className="pb-2">
+          <CardTitle className="text-base font-semibold">DNS Rewrites</CardTitle>
+        </CardHeader>
+        <CardContent>
+          <DataTable<DnsRewrite>
+            data={rewrites}
+            columns={rewriteColumns}
+            searchKey="domain"
+          />
+        </CardContent>
+      </Card>
+    </div>
+  );
+}

dashboard/ui/app/page.tsx

@@ -0,0 +1,301 @@
+"use client";
+
+import { useState, useCallback } from "react";
+import { usePoll } from "@/lib/use-poll";
+import { postAPI } from "@/lib/api";
+import type { OverviewStats, HealthScore, DiskUsageEntry } from "@/lib/types";
+import { StatCard } from "@/components/stat-card";
+import { ActivityFeed } from "@/components/activity-feed";
+import { JellyfinCard } from "@/components/jellyfin-card";
+import { OllamaCard } from "@/components/ollama-card";
+import { CalendarCard } from "@/components/calendar-card";
+import { HostRow } from "@/components/host-card";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { CardSkeleton, TableSkeleton } from "@/components/skeleton";
+
+/* --- Quick Action Button --- */
+interface ActionButtonProps {
+  label: string;
+  endpoint: string;
+  icon: string;
+}
+
+function ActionButton({ label, endpoint, icon }: ActionButtonProps) {
+  const [state, setState] = useState<"idle" | "loading" | "success" | "error">("idle");
+
+  const run = useCallback(async () => {
+    setState("loading");
+    try {
+      await postAPI(endpoint);
+      setState("success");
+    } catch {
+      setState("error");
+    }
+    setTimeout(() => setState("idle"), 2000);
+  }, [endpoint]);
+
+  const bg =
+    state === "loading"
+      ? "bg-white/[0.08] cursor-wait"
+      : state === "success"
+        ? "bg-green-500/15 border-green-500/30"
+        : state === "error"
+          ? "bg-red-500/15 border-red-500/30"
+          : "bg-white/[0.04] hover:bg-white/[0.08] border-white/[0.08]";
+
+  return (
+    <button
+      onClick={run}
+      disabled={state === "loading"}
+      className={`flex items-center gap-2 rounded-xl border px-3 py-2 text-sm font-medium transition-all ${bg}`}
+    >
+      <span className="text-[10px] font-bold px-1.5 py-0.5 rounded bg-white/[0.08] text-muted-foreground">{icon}</span>
+      <span>
+        {state === "loading"
+          ? "Running..."
+          : state === "success"
+            ? "Done!"
+            : state === "error"
+              ? "Failed"
+              : label}
+      </span>
+    </button>
+  );
+}
+
+/* --- Organizer Toggle --- */
+function OrganizerToggle() {
+  const [paused, setPaused] = useState(false);
+  const [state, setState] = useState<"idle" | "loading">("idle");
+
+  const toggle = useCallback(async () => {
+    setState("loading");
+    try {
+      if (paused) {
+        await postAPI("/api/actions/resume-organizers");
+        setPaused(false);
+      } else {
+        await postAPI("/api/actions/pause-organizers");
+        setPaused(true);
+      }
+    } catch {
+      // ignore
+    }
+    setState("idle");
+  }, [paused]);
+
+  return (
+    <button
+      onClick={toggle}
+      disabled={state === "loading"}
+      className={`flex items-center gap-2 rounded-xl border px-3 py-2 text-sm font-medium transition-all ${
+        paused
+          ? "bg-amber-500/15 border-amber-500/30 hover:bg-amber-500/25"
+          : "bg-white/[0.04] hover:bg-white/[0.08] border-white/[0.08]"
+      }`}
+    >
+      <span>{paused ? ">" : "||"}</span>
+      <span>
+        {state === "loading" ? "..." : paused ? "Resume Organizers" : "Pause Organizers"}
+      </span>
+    </button>
+  );
+}
+
+/* --- Disk Usage Bar --- */
+function DiskBar({ entry }: { entry: DiskUsageEntry }) {
+  const color =
+    entry.used_pct >= 85
+      ? "from-red-500 to-red-400"
+      : entry.used_pct >= 70
+        ? "from-amber-500 to-amber-400"
+        : "from-green-500 to-emerald-400";
+
+  const hostColors: Record<string, string> = {
+    atlantis: "text-blue-400",
+    calypso: "text-violet-400",
+    olares: "text-emerald-400",
+    nuc: "text-amber-400",
+    rpi5: "text-cyan-400",
+    homelab: "text-green-400",
+    guava: "text-orange-400",
+    seattle: "text-teal-400",
+  };
+  const hostCls =
+    hostColors[entry.host.toLowerCase()] ?? "text-foreground";
+
+  return (
+    <div className="space-y-1.5">
+      <div className="flex items-center justify-between text-sm">
+        <div className="flex items-center gap-2 min-w-0">
+          <span className={`font-medium ${hostCls}`}>{entry.host}</span>
+          <span className="text-muted-foreground/60 font-mono text-xs truncate">
+            {entry.mount}
+          </span>
+        </div>
+        <div className="flex items-center gap-3 shrink-0">
+          <span className="text-xs text-muted-foreground">
+            {entry.total_gb >= 1000
+              ? `${(entry.total_gb / 1000).toFixed(1)} TB`
+              : `${Math.round(entry.total_gb)} GB`}
+          </span>
+          <span className="text-xs font-medium tabular-nums-transition">
+            {entry.used_pct}%
+          </span>
+        </div>
+      </div>
+      <div className="glass-bar-track h-2">
+        <div
+          className={`h-full glass-bar-fill bg-gradient-to-r ${color} transition-all duration-700`}
+          style={{ width: `${entry.used_pct}%` }}
+        />
+      </div>
+    </div>
+  );
+}
+
+export default function DashboardPage() {
+  const { data } = usePoll<OverviewStats>("/api/stats/overview", 60000);
+  const { data: health } = usePoll<HealthScore>("/api/health-score", 60000);
+  const { data: disks } = usePoll<DiskUsageEntry[]>("/api/disk-usage", 300000);
+
+  // Handle both API field name variants
+  const endpoints = data?.containers?.endpoints || data?.containers?.by_endpoint || {};
+  const rawEmail = data?.emails_today ?? data?.email_today ?? 0;
+  const emailCount = typeof rawEmail === "object" && rawEmail !== null ? (rawEmail as Record<string, number>).total ?? 0 : rawEmail;
+  const alertCount = data?.alerts ?? data?.unhealthy_count ?? 0;
+  const running = data?.containers?.running ?? Object.values(endpoints).reduce((s, e) => s + (e.running || 0), 0);
+  const hostsOnline = data?.hosts_online ?? Object.values(endpoints).filter(e => !e.error).length;
+  const gpuPct = data?.gpu?.utilization_pct;
+  const totalHosts = Object.keys(endpoints).length;
+
+  // Top 5 most-used disks
+  const topDisks = disks
+    ? [...disks].sort((a, b) => b.used_pct - a.used_pct).slice(0, 5)
+    : [];
+
+  return (
+    <div className="space-y-5">
+      {/* Row 1: Stats */}
+      <div className="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-6 gap-4">
+        <StatCard
+          label="Health"
+          value={health ? `${health.score}` : "—"}
+          color={
+            health
+              ? health.score >= 80
+                ? "green"
+                : health.score >= 60
+                  ? "amber"
+                  : "amber"
+              : "blue"
+          }
+          gauge={health ? health.score : undefined}
+          sub={health ? `Grade: ${health.grade}` : undefined}
+        />
+        <StatCard
+          label="Containers"
+          value={data ? `${running}/${data.containers.total}` : "—"}
+          color="blue"
+          sub={data ? "running / total" : undefined}
+        />
+        <StatCard
+          label="Hosts Online"
+          value={data ? hostsOnline : "—"}
+          color="green"
+          sub="endpoints"
+        />
+        <StatCard
+          label="GPU — RTX 5090"
+          value={
+            data?.gpu?.available
+              ? `${gpuPct ?? 0}%`
+              : "—"
+          }
+          color="violet"
+          gauge={data?.gpu?.available ? gpuPct : undefined}
+          sub={data?.gpu?.available ? `${data.gpu.temp_c ?? "—"}°C · ${data.gpu.power_w ?? data.gpu.power_draw_w ?? "—"}W` : "unavailable"}
+        />
+        <StatCard
+          label="Emails Today"
+          value={data ? emailCount : "—"}
+          color="amber"
+          sub="processed"
+        />
+        <StatCard
+          label="Alerts"
+          value={data ? alertCount : "—"}
+          color="emerald"
+          sub="active"
+        />
+      </div>
+
+      {/* Row 1.5: Quick Actions */}
+      <div className="flex flex-wrap items-center gap-3">
+        <span className="text-xs uppercase tracking-wider text-muted-foreground/70 font-medium mr-1">
+          Quick Actions
+        </span>
+        <ActionButton label="Restart Jellyfin" endpoint="/api/actions/restart-jellyfin" icon="JF" />
+        <ActionButton label="Restart Ollama" endpoint="/api/actions/restart-ollama" icon="AI" />
+        <OrganizerToggle />
+        <ActionButton label="Run Backup" endpoint="/api/actions/run-backup" icon="BK" />
+      </div>
+
+      {/* Row 2: Calendar + Activity Feed */}
+      <div className="grid grid-cols-1 lg:grid-cols-2 gap-4">
+        <CalendarCard />
+        <ActivityFeed />
+      </div>
+
+      {/* Row 3: Jellyfin + GPU + Hosts */}
+      <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+        <JellyfinCard />
+        <OllamaCard />
+        <Card>
+          <CardHeader className="pb-2">
+            <CardTitle className="text-base font-semibold">
+              Hosts {data ? `(${hostsOnline}/${totalHosts} online)` : ""}
+            </CardTitle>
+          </CardHeader>
+          <CardContent>
+            {data ? (
+              <div className="divide-y divide-white/[0.06]">
+                {Object.entries(endpoints).map(([name, info]) => (
+                  <HostRow
+                    key={name}
+                    name={name}
+                    running={info.running}
+                    total={info.total}
+                    error={info.error}
+                  />
+                ))}
+              </div>
+            ) : (
+              <CardSkeleton lines={5} />
+            )}
+          </CardContent>
+        </Card>
+      </div>
+
+      {/* Row 4: Storage / Disk Usage */}
+      <Card>
+        <CardHeader className="pb-2">
+          <CardTitle className="text-base font-semibold">Storage</CardTitle>
+        </CardHeader>
+        <CardContent>
+          {!disks ? (
+            <CardSkeleton lines={5} />
+          ) : topDisks.length === 0 ? (
+            <p className="text-sm text-muted-foreground/60">No disk data</p>
+          ) : (
+            <div className="space-y-4">
+              {topDisks.map((d, i) => (
+                <DiskBar key={`${d.host}-${d.mount}-${i}`} entry={d} />
+              ))}
+            </div>
+          )}
+        </CardContent>
+      </Card>
+    </div>
+  );
+}

dashboard/ui/components.json

@@ -0,0 +1,25 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "base-nova",
+  "rsc": true,
+  "tsx": true,
+  "tailwind": {
+    "config": "",
+    "css": "app/globals.css",
+    "baseColor": "neutral",
+    "cssVariables": true,
+    "prefix": ""
+  },
+  "iconLibrary": "lucide",
+  "rtl": false,
+  "aliases": {
+    "components": "@/components",
+    "utils": "@/lib/utils",
+    "ui": "@/components/ui",
+    "lib": "@/lib",
+    "hooks": "@/hooks"
+  },
+  "menuColor": "default",
+  "menuAccent": "subtle",
+  "registries": {}
+}

dashboard/ui/components/activity-feed.tsx

@@ -0,0 +1,198 @@
+"use client";
+
+import React from "react";
+import { useSSE } from "@/lib/use-sse";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Badge } from "@/components/ui/badge";
+import { ScrollArea } from "@/components/ui/scroll-area";
+import type { ActivityEvent } from "@/lib/types";
+
+const green = { bg: "#22c55e", shadow: "0 0 8px rgba(34, 197, 94, 0.4)" };
+const blue = { bg: "#3b82f6", shadow: "0 0 8px rgba(59, 130, 246, 0.4)" };
+const amber = { bg: "#f59e0b", shadow: "0 0 8px rgba(245, 158, 11, 0.4)" };
+const red = { bg: "#ef4444", shadow: "0 0 8px rgba(239, 68, 68, 0.4)" };
+const purple = { bg: "#a855f7", shadow: "0 0 8px rgba(168, 85, 247, 0.4)" };
+
+const typeColors: Record<string, { bg: string; shadow: string }> = {
+  stack_healthy: green,
+  backup_result: green,
+  drift_clean: green,
+  cron_complete: green,
+  disk_scan_complete: green,
+  email_classified: blue,
+  email_classifying: blue,
+  email_cached: blue,
+  start: blue,
+  receipt_extracted: amber,
+  container_restarted: amber,
+  restart_analysis: amber,
+  container_unhealthy: red,
+  drift_found: red,
+  disk_warning: red,
+  error: red,
+  changelog_generated: purple,
+  changelog_commits: purple,
+  pr_reviewed: purple,
+};
+const defaultDot = { bg: "#6b7280", shadow: "none" };
+
+function formatTime(ts: string) {
+  try {
+    return new Date(ts).toLocaleTimeString("en-US", {
+      hour: "2-digit",
+      minute: "2-digit",
+    });
+  } catch {
+    return ts;
+  }
+}
+
+const feedCategoryColors: Record<string, string> = {
+  receipts: "text-amber-400",
+  newsletters: "text-blue-400",
+  accounts: "text-violet-400",
+  spam: "text-red-400",
+  personal: "text-green-400",
+  finance: "text-emerald-400",
+  work: "text-cyan-400",
+  promotions: "text-amber-400",
+  social: "text-purple-400",
+};
+
+function getCategoryColor(cat: string): string {
+  const lower = cat.toLowerCase();
+  for (const [key, cls] of Object.entries(feedCategoryColors)) {
+    if (lower.includes(key)) return cls;
+  }
+  return "text-foreground";
+}
+
+function EventMessage({ event }: { event: ActivityEvent }): React.ReactElement {
+  switch (event.type) {
+    case "email_classified": {
+      const cat = String(event.category ?? "?");
+      return (
+        <span>
+          Classified as <span className={getCategoryColor(cat)}>{cat}</span>
+          {event.label ? ` - ${String(event.label)}` : ""}
+        </span>
+      );
+    }
+    case "email_classifying":
+      return <span>[{String(event.progress ?? "?")}] Classifying: {String(event.subject ?? "?")}</span>;
+    case "email_cached": {
+      const cat = String(event.category ?? "?");
+      return (
+        <span>
+          Cached: {String(event.subject ?? "?")} → <span className={getCategoryColor(cat)}>{cat}</span>
+        </span>
+      );
+    }
+    case "receipt_extracted":
+      return (
+        <span>
+          Receipt: {String(event.vendor ?? "?")} <span className="text-green-400">${String(event.amount ?? "?")}</span>
+        </span>
+      );
+    case "container_restarted":
+      return (
+        <span>
+          Restarted <span className="text-cyan-400">{String(event.container)}</span> on {String(event.endpoint)}
+        </span>
+      );
+    case "container_unhealthy":
+      return event.container ? (
+        <span>
+          Unhealthy: <span className="text-cyan-400">{String(event.container)}</span> on {String(event.endpoint)}
+        </span>
+      ) : (
+        <span>{String(event.raw ?? "Unhealthy container detected")}</span>
+      );
+    case "backup_result":
+      return <span>Backup: {String(event.status ?? "?")}</span>;
+    case "drift_clean":
+      return <span>Config drift check: <span className="text-green-400">all clean</span></span>;
+    case "drift_found":
+      return <span>Config drift: {String(event.drifts ?? "?")} drifts in {String(event.services ?? "?")} services</span>;
+    case "cron_complete":
+      return <span>Automation run completed</span>;
+    case "stack_healthy":
+      return <span>All containers <span className="text-green-400">healthy</span></span>;
+    case "disk_warning":
+      return <span>Disk warning: {String(event.days)} days remaining</span>;
+    case "disk_scan_complete":
+      return <span>Disk scan: {String(event.count)} filesystems checked</span>;
+    case "pr_reviewed":
+      return <span>AI reviewed PR <span className="text-violet-400">#{String(event.pr)}</span></span>;
+    case "changelog_generated":
+      return <span>Changelog: {String(event.commits)} commits</span>;
+    case "changelog_commits":
+      return <span>{String(event.count)} new commits found</span>;
+    case "restart_analysis":
+      return (
+        <span>
+          LLM says {String(event.decision)} for <span className="text-cyan-400">{String(event.container)}</span>
+        </span>
+      );
+    default: {
+      if (typeof event.raw === "string") {
+        const cleaned = event.raw.replace(/^\d{4}-\d{2}-\d{2} \d{2}:\d{2}:\d{2},?\d*\s+\S+\s+/, "");
+        return <span>{cleaned}</span>;
+      }
+      return <span>{event.type} from {event.source}</span>;
+    }
+  }
+}
+
+export function ActivityFeed() {
+  const events = useSSE("/api/activity");
+
+  return (
+    <Card className="overflow-hidden relative">
+      <CardHeader className="flex flex-row items-center justify-between pb-2">
+        <CardTitle className="text-base font-semibold">Activity Feed</CardTitle>
+        <Badge
+          variant="outline"
+          className="text-[10px] border-green-500/30 text-green-400 animate-live-pulse bg-green-500/5"
+        >
+          <span className="inline-block w-1.5 h-1.5 rounded-full bg-green-400 mr-1.5 glow-green" />
+          LIVE
+        </Badge>
+      </CardHeader>
+      <CardContent>
+        <ScrollArea className="h-[220px]">
+          {events.length === 0 && (
+            <p className="text-xs text-muted-foreground py-4 text-center">
+              Waiting for events...
+            </p>
+          )}
+          <div className="space-y-2">
+            {events.map((event, i) => (
+              <div
+                key={`${event.timestamp}-${i}`}
+                className="flex items-start gap-3 text-xs animate-slide-in rounded-lg px-2 py-1.5 transition-colors hover:bg-white/[0.03]"
+                style={{ animationDelay: `${i * 30}ms` }}
+              >
+                <span
+                  className="w-2.5 h-2.5 rounded-full mt-0.5 shrink-0"
+                  style={{
+                    background: (typeColors[event.type] ?? defaultDot).bg,
+                    boxShadow: (typeColors[event.type] ?? defaultDot).shadow,
+                  }}
+                />
+                <div className="flex-1 min-w-0">
+                  <p className="text-foreground truncate">
+                    <EventMessage event={event} />
+                  </p>
+                  <p className="text-muted-foreground/70">
+                    {formatTime(event.timestamp)} &middot; {event.source}
+                  </p>
+                </div>
+              </div>
+            ))}
+          </div>
+        </ScrollArea>
+      </CardContent>
+    </Card>
+  );
+}

dashboard/ui/components/calendar-card.tsx

@@ -0,0 +1,55 @@
+"use client";
+import { usePoll } from "@/lib/use-poll";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { CardSkeleton } from "@/components/skeleton";
+import { EmptyState } from "@/components/empty-state";
+
+interface CalEvent {
+  summary: string;
+  date: string;
+  time: string;
+  location?: string;
+  start: string;
+}
+
+export function CalendarCard() {
+  const { data } = usePoll<{ events: CalEvent[]; total?: number }>("/api/calendar", 300000); // 5min
+
+  return (
+    <Card>
+      <CardHeader className="pb-2">
+        <div className="flex items-center justify-between">
+          <CardTitle className="text-sm font-medium">Calendar</CardTitle>
+          {data?.total != null && (
+            <span className="text-[10px] text-muted-foreground">{data.total} upcoming</span>
+          )}
+        </div>
+      </CardHeader>
+      <CardContent>
+        {!data ? (
+          <CardSkeleton lines={3} />
+        ) : data.events.length === 0 ? (
+          <EmptyState icon={"o"} title="No upcoming events" description="Your calendar is clear" />
+        ) : (
+          <div className="space-y-3">
+            {data.events.map((event, i) => (
+              <div key={i} className="flex gap-3 items-start">
+                <div className="text-center min-w-[44px] rounded-lg bg-white/[0.04] border border-white/[0.06] px-2 py-1.5">
+                  <p className="text-[10px] font-medium text-blue-400">{event.date.split(" ")[0]}</p>
+                  <p className="text-lg font-bold leading-none">{event.date.split(" ")[1]}</p>
+                </div>
+                <div className="min-w-0">
+                  <p className="text-xs font-medium text-foreground truncate">{event.summary}</p>
+                  <p className="text-[10px] text-muted-foreground">{event.time}</p>
+                  {event.location && (
+                    <p className="text-[10px] text-muted-foreground/60 truncate">{event.location}</p>
+                  )}
+                </div>
+              </div>
+            ))}
+          </div>
+        )}
+      </CardContent>
+    </Card>
+  );
+}

dashboard/ui/components/command-search.tsx

@@ -0,0 +1,153 @@
+"use client";
+import { useState, useEffect, useCallback, useRef } from "react";
+import { useRouter } from "next/navigation";
+
+interface SearchResult {
+  type: "page" | "container" | "node" | "dns" | "action";
+  title: string;
+  description?: string;
+  href?: string;
+  action?: () => void;
+}
+
+const PAGES: SearchResult[] = [
+  { type: "page", title: "Dashboard", href: "/" },
+  { type: "page", title: "Infrastructure", href: "/infrastructure" },
+  { type: "page", title: "Media", href: "/media" },
+  { type: "page", title: "Automations", href: "/automations" },
+  { type: "page", title: "Expenses", href: "/expenses" },
+  { type: "page", title: "Network", href: "/network" },
+  { type: "page", title: "Logs", href: "/logs" },
+];
+
+export function CommandSearch() {
+  const [open, setOpen] = useState(false);
+  const [query, setQuery] = useState("");
+  const [results, setResults] = useState<SearchResult[]>([]);
+  const [selected, setSelected] = useState(0);
+  const inputRef = useRef<HTMLInputElement>(null);
+  const router = useRouter();
+
+  // Open on Cmd+K / Ctrl+K
+  useEffect(() => {
+    function handler(e: KeyboardEvent) {
+      if ((e.metaKey || e.ctrlKey) && e.key === "k") {
+        e.preventDefault();
+        setOpen(prev => !prev);
+      }
+      if (e.key === "Escape") setOpen(false);
+    }
+    window.addEventListener("keydown", handler);
+    return () => window.removeEventListener("keydown", handler);
+  }, []);
+
+  // Focus input when opened
+  useEffect(() => {
+    if (open) {
+      setQuery("");
+      setSelected(0);
+      setTimeout(() => inputRef.current?.focus(), 50);
+    }
+  }, [open]);
+
+  // Search
+  useEffect(() => {
+    if (!query.trim()) {
+      setResults(PAGES);
+      return;
+    }
+    const q = query.toLowerCase();
+    const filtered = PAGES.filter(p => p.title.toLowerCase().includes(q));
+
+    // Also search for dynamic items (async fetch could go here in future)
+    // For now just do page search + some action shortcuts
+    const actions: SearchResult[] = [];
+    if ("restart".includes(q) || "jellyfin".includes(q)) {
+      actions.push({ type: "action", title: "Restart Jellyfin", description: "Restart Jellyfin on Olares" });
+    }
+    if ("restart".includes(q) || "ollama".includes(q)) {
+      actions.push({ type: "action", title: "Restart Ollama", description: "Restart Ollama on Olares" });
+    }
+    if ("backup".includes(q)) {
+      actions.push({ type: "action", title: "Run Backup", description: "Run email backup now" });
+    }
+
+    setResults([...filtered, ...actions]);
+    setSelected(0);
+  }, [query]);
+
+  const execute = useCallback((result: SearchResult) => {
+    setOpen(false);
+    if (result.href) router.push(result.href);
+    if (result.action) result.action();
+  }, [router]);
+
+  // Keyboard nav
+  const handleKeyDown = useCallback((e: React.KeyboardEvent) => {
+    if (e.key === "ArrowDown") { e.preventDefault(); setSelected(s => Math.min(s + 1, results.length - 1)); }
+    if (e.key === "ArrowUp") { e.preventDefault(); setSelected(s => Math.max(s - 1, 0)); }
+    if (e.key === "Enter" && results[selected]) { execute(results[selected]); }
+  }, [results, selected, execute]);
+
+  if (!open) return null;
+
+  const typeIcons: Record<string, string> = {
+    page: "->", container: "[]", node: "(o)", dns: "<>", action: "!",
+  };
+  const typeColors: Record<string, string> = {
+    page: "text-blue-400", container: "text-cyan-400", node: "text-green-400",
+    dns: "text-amber-400", action: "text-violet-400",
+  };
+
+  return (
+    <>
+      <div className="fixed inset-0 bg-black/50 backdrop-blur-sm z-[200]" onClick={() => setOpen(false)} />
+      <div className="fixed top-[20%] left-1/2 -translate-x-1/2 w-full max-w-lg z-[201]">
+        <div className="rounded-2xl overflow-hidden shadow-2xl" style={{
+          background: "rgba(10, 10, 25, 0.95)",
+          border: "1px solid rgba(255,255,255,0.12)",
+          backdropFilter: "blur(30px)",
+        }}>
+          <div className="flex items-center gap-3 px-4 py-3 border-b border-white/[0.08]">
+            <span className="text-muted-foreground text-sm">Ctrl+K</span>
+            <input
+              ref={inputRef}
+              value={query}
+              onChange={e => setQuery(e.target.value)}
+              onKeyDown={handleKeyDown}
+              placeholder="Search pages, containers, actions..."
+              className="flex-1 bg-transparent text-sm text-foreground placeholder:text-muted-foreground/50 outline-none"
+              style={{ color: "#f1f5f9" }}
+            />
+          </div>
+          <div className="max-h-[300px] overflow-y-auto py-1">
+            {results.length === 0 && (
+              <p className="text-sm text-muted-foreground/60 text-center py-6">No results</p>
+            )}
+            {results.map((r, i) => (
+              <button
+                key={`${r.type}-${r.title}`}
+                onClick={() => execute(r)}
+                className={`w-full flex items-center gap-3 px-4 py-2.5 text-left transition-colors ${
+                  i === selected ? "bg-white/[0.08]" : "hover:bg-white/[0.04]"
+                }`}
+              >
+                <span className={`text-sm ${typeColors[r.type] ?? ""}`}>{typeIcons[r.type] ?? "·"}</span>
+                <div className="min-w-0">
+                  <p className="text-sm font-medium" style={{ color: "#f1f5f9" }}>{r.title}</p>
+                  {r.description && <p className="text-xs text-muted-foreground/60 truncate">{r.description}</p>}
+                </div>
+                <span className="ml-auto text-[10px] text-muted-foreground/40 capitalize">{r.type}</span>
+              </button>
+            ))}
+          </div>
+          <div className="px-4 py-2 border-t border-white/[0.06] flex gap-4 text-[10px] text-muted-foreground/40">
+            <span>Up/Down navigate</span>
+            <span>Enter select</span>
+            <span>esc close</span>
+          </div>
+        </div>
+      </div>
+    </>
+  );
+}

dashboard/ui/components/container-logs-modal.tsx

@@ -0,0 +1,63 @@
+"use client";
+
+import { useState, useEffect } from "react";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import { ScrollArea } from "@/components/ui/scroll-area";
+import { fetchAPI } from "@/lib/api";
+
+interface ContainerLogsModalProps {
+  containerId: string | null;
+  containerName: string;
+  endpoint: string;
+  onClose: () => void;
+}
+
+export function ContainerLogsModal({
+  containerId,
+  containerName,
+  endpoint,
+  onClose,
+}: ContainerLogsModalProps) {
+  const [logs, setLogs] = useState<string>("");
+  const [loading, setLoading] = useState(false);
+
+  useEffect(() => {
+    if (!containerId) return;
+    setLoading(true);
+    setLogs("");
+    fetchAPI<{ logs: string }>(
+      `/api/containers/${containerId}/logs?endpoint=${endpoint}&tail=200`
+    )
+      .then((data) => setLogs(data.logs))
+      .catch((err) => setLogs(`Error fetching logs: ${err.message}`))
+      .finally(() => setLoading(false));
+  }, [containerId, endpoint]);
+
+  return (
+    <Dialog open={!!containerId} onOpenChange={() => onClose()}>
+      <DialogContent className="max-w-3xl">
+        <DialogHeader>
+          <DialogTitle className="text-sm">
+            Logs: {containerName}
+          </DialogTitle>
+        </DialogHeader>
+        <ScrollArea className="h-[400px] mt-2">
+          {loading ? (
+            <p className="text-xs text-muted-foreground p-4">
+              Loading logs...
+            </p>
+          ) : (
+            <pre className="text-[11px] font-mono text-foreground whitespace-pre-wrap p-2 leading-relaxed">
+              {logs || "No logs available"}
+            </pre>
+          )}
+        </ScrollArea>
+      </DialogContent>
+    </Dialog>
+  );
+}

dashboard/ui/components/copyable.tsx

@@ -0,0 +1,22 @@
+"use client";
+import { useState, useCallback } from "react";
+
+export function Copyable({ text, className = "" }: { text: string; className?: string }) {
+  const [copied, setCopied] = useState(false);
+
+  const copy = useCallback(() => {
+    navigator.clipboard.writeText(text);
+    setCopied(true);
+    setTimeout(() => setCopied(false), 1500);
+  }, [text]);
+
+  return (
+    <span
+      onClick={copy}
+      className={`cursor-pointer hover:underline decoration-dotted underline-offset-2 ${className}`}
+      title="Click to copy"
+    >
+      {copied ? "OK copied" : text}
+    </span>
+  );
+}

dashboard/ui/components/data-table.tsx

@@ -0,0 +1,126 @@
+"use client";
+
+import { useState, useMemo } from "react";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table";
+
+export interface Column<T> {
+  key: string;
+  label: string;
+  render?: (row: T) => React.ReactNode;
+}
+
+interface DataTableProps<T> {
+  data: T[];
+  columns: Column<T>[];
+  searchKey?: string;
+  filterKey?: string;
+  filterOptions?: string[];
+  actions?: (row: T) => React.ReactNode;
+}
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export function DataTable<T extends Record<string, any>>({
+  data,
+  columns,
+  searchKey,
+  filterKey,
+  filterOptions,
+  actions,
+}: DataTableProps<T>) {
+  const [search, setSearch] = useState("");
+  const [filter, setFilter] = useState("all");
+
+  const filtered = useMemo(() => {
+    let rows = data;
+    if (search && searchKey) {
+      const q = search.toLowerCase();
+      rows = rows.filter((r) =>
+        String(r[searchKey] ?? "")
+          .toLowerCase()
+          .includes(q)
+      );
+    }
+    if (filter !== "all" && filterKey) {
+      rows = rows.filter((r) => String(r[filterKey]) === filter);
+    }
+    return rows;
+  }, [data, search, searchKey, filter, filterKey]);
+
+  return (
+    <div className="space-y-3">
+      <div className="flex items-center gap-2">
+        {searchKey && (
+          <input
+            type="text"
+            placeholder="Search..."
+            value={search}
+            onChange={(e) => setSearch(e.target.value)}
+            className="h-8 rounded-lg glass-input px-3 text-sm text-foreground placeholder:text-muted-foreground/50 w-64"
+          />
+        )}
+        {filterKey && filterOptions && (
+          <select
+            value={filter}
+            onChange={(e) => setFilter(e.target.value)}
+            className="h-8 rounded-lg glass-input px-2 text-sm text-foreground"
+          >
+            <option value="all">All</option>
+            {filterOptions.map((opt) => (
+              <option key={opt} value={opt}>
+                {opt}
+              </option>
+            ))}
+          </select>
+        )}
+      </div>
+      <div className="rounded-xl border border-white/[0.06] overflow-hidden">
+        <Table>
+          <TableHeader>
+            <TableRow className="glass-table-header border-b border-white/[0.06]">
+              {columns.map((col) => (
+                <TableHead key={col.key} className="text-sm text-muted-foreground/80">
+                  {col.label}
+                </TableHead>
+              ))}
+              {actions && <TableHead className="text-sm text-muted-foreground/80 w-24">Actions</TableHead>}
+            </TableRow>
+          </TableHeader>
+          <TableBody>
+            {filtered.length === 0 ? (
+              <TableRow>
+                <TableCell
+                  colSpan={columns.length + (actions ? 1 : 0)}
+                  className="text-center text-xs text-muted-foreground py-6"
+                >
+                  No results
+                </TableCell>
+              </TableRow>
+            ) : (
+              filtered.map((row, i) => (
+                <TableRow key={i} className="glass-table-row border-b border-white/[0.04]">
+                  {columns.map((col) => (
+                    <TableCell key={col.key} className="text-sm">
+                      {col.render
+                        ? col.render(row)
+                        : String(row[col.key] ?? "")}
+                    </TableCell>
+                  ))}
+                  {actions && (
+                    <TableCell className="text-sm">{actions(row)}</TableCell>
+                  )}
+                </TableRow>
+              ))
+            )}
+          </TableBody>
+        </Table>
+      </div>
+    </div>
+  );
+}

dashboard/ui/components/empty-state.tsx

@@ -0,0 +1,15 @@
+interface EmptyStateProps {
+  icon?: string;
+  title: string;
+  description?: string;
+}
+
+export function EmptyState({ icon = "--", title, description }: EmptyStateProps) {
+  return (
+    <div className="flex flex-col items-center justify-center py-8 text-center">
+      <span className="text-3xl mb-2 opacity-30">{icon}</span>
+      <p className="text-sm font-medium text-muted-foreground">{title}</p>
+      {description && <p className="text-xs text-muted-foreground/60 mt-1">{description}</p>}
+    </div>
+  );
+}

dashboard/ui/components/host-card.tsx

@@ -0,0 +1,88 @@
+import { Card, CardContent } from "@/components/ui/card";
+import { StatusBadge } from "./status-badge";
+
+const hostColors: Record<string, string> = {
+  atlantis: "text-blue-400",
+  calypso: "text-violet-400",
+  olares: "text-emerald-400",
+  nuc: "text-amber-400",
+  rpi5: "text-cyan-400",
+};
+
+const hostDescriptions: Record<string, string> = {
+  atlantis: "NAS · media stack",
+  calypso: "DNS · SSO · Headscale",
+  olares: "K3s · RTX 5090",
+  nuc: "lightweight svcs",
+  rpi5: "Uptime Kuma",
+};
+
+interface HostCardProps {
+  name: string;
+  running: number;
+  total: number;
+  error?: boolean;
+}
+
+export function HostCard({ name, running, total, error }: HostCardProps) {
+  const statusColor = error ? "red" : running > 0 ? "green" : "amber";
+  const hoverBorder = error
+    ? "hover:border-red-500/20"
+    : running > 0
+      ? "hover:border-green-500/20"
+      : "hover:border-amber-500/20";
+
+  const hoverGlow = error
+    ? "hover:shadow-[0_0_16px_rgba(239,68,68,0.05)]"
+    : running > 0
+      ? "hover:shadow-[0_0_16px_rgba(34,197,94,0.05)]"
+      : "hover:shadow-[0_0_16px_rgba(245,158,11,0.05)]";
+
+  return (
+    <Card
+      className={`card-hover-lift transition-all duration-300 ${hoverBorder} ${hoverGlow} overflow-hidden relative group`}
+    >
+      <CardContent className="pt-3 pb-3 px-4">
+        <div className="flex items-center justify-between mb-1">
+          <span className={`text-sm font-medium capitalize ${hostColors[name] ?? "text-foreground"}`}>
+            {name}
+          </span>
+          <StatusBadge
+            color={statusColor}
+            label={error ? "error" : "online"}
+          />
+        </div>
+        <p className="text-xs text-muted-foreground">
+          {running}/{total} containers
+        </p>
+        {hostDescriptions[name] && (
+          <p className="text-[10px] text-muted-foreground/60 mt-0.5">
+            {hostDescriptions[name]}
+          </p>
+        )}
+      </CardContent>
+    </Card>
+  );
+}
+
+export function HostRow({ name, running, total, error }: HostCardProps) {
+  const isOlares = name === "olares";
+  return (
+    <div className="flex items-center justify-between py-2 px-1 text-sm">
+      <div className="flex items-center gap-2">
+        <span
+          className={`w-2 h-2 rounded-full ${error ? "bg-red-500" : "bg-green-500"}`}
+          style={{
+            boxShadow: error
+              ? "0 0 6px rgba(239,68,68,0.5)"
+              : "0 0 6px rgba(34,197,94,0.5)",
+          }}
+        />
+        <span className={`font-medium capitalize ${hostColors[name] ?? "text-foreground"}`}>{name}</span>
+      </div>
+      <span className="text-muted-foreground text-xs">
+        {isOlares && !total ? "K3s + GPU" : `${running}/${total}`}
+      </span>
+    </div>
+  );
+}

dashboard/ui/components/jellyfin-card.tsx

@@ -0,0 +1,70 @@
+"use client";
+
+import { usePoll } from "@/lib/use-poll";
+import type { JellyfinStatus } from "@/lib/types";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { StatusBadge } from "./status-badge";
+import { CardSkeleton } from "@/components/skeleton";
+import { EmptyState } from "@/components/empty-state";
+
+export function JellyfinCard() {
+  const { data } = usePoll<JellyfinStatus>("/api/jellyfin/status", 30000);
+
+  return (
+    <Card>
+      <CardHeader className="pb-2">
+        <CardTitle className="text-base font-semibold">Jellyfin</CardTitle>
+      </CardHeader>
+      <CardContent className="space-y-3">
+        {!data ? (
+          <CardSkeleton lines={4} />
+        ) : (
+          <>
+            <div>
+              <p className="text-xs uppercase tracking-wider text-muted-foreground/70 mb-1.5">
+                Now Playing
+              </p>
+              {data.active_sessions.length > 0 ? (
+                <div className="space-y-2">
+                  {data.active_sessions.map((s, i) => (
+                    <div key={i} className="text-sm rounded-lg bg-white/[0.03] px-3 py-2">
+                      <p className="text-foreground font-medium">{s.title}</p>
+                      <p className="text-sm text-muted-foreground/70">
+                        {s.user} &middot; {s.device}
+                      </p>
+                    </div>
+                  ))}
+                </div>
+              ) : (
+                <EmptyState icon={">"} title="Nothing playing" description="Start something on Jellyfin" />
+              )}
+            </div>
+            <div className="h-px bg-white/[0.06]" />
+            <div>
+              <p className="text-xs uppercase tracking-wider text-muted-foreground/70 mb-1.5">
+                Libraries
+              </p>
+              <div className="space-y-1">
+                {data.libraries.map((lib) => (
+                  <div
+                    key={lib.name}
+                    className="flex items-center justify-between text-sm"
+                  >
+                    <span className="text-foreground">{lib.name}</span>
+                    <StatusBadge color="green" label={lib.type} />
+                  </div>
+                ))}
+              </div>
+            </div>
+            {data.idle_sessions > 0 && (
+              <p className="text-xs text-muted-foreground/60">
+                {data.idle_sessions} idle session
+                {data.idle_sessions > 1 ? "s" : ""}
+              </p>
+            )}
+          </>
+        )}
+      </CardContent>
+    </Card>
+  );
+}

dashboard/ui/components/keyboard-shortcuts.tsx

@@ -0,0 +1,29 @@
+"use client";
+import { useEffect } from "react";
+import { useRouter } from "next/navigation";
+
+export function KeyboardShortcuts() {
+  const router = useRouter();
+
+  useEffect(() => {
+    function handler(e: KeyboardEvent) {
+      // Don't trigger when typing in inputs
+      if (e.target instanceof HTMLInputElement || e.target instanceof HTMLTextAreaElement) return;
+
+      switch (e.key) {
+        case "1": router.push("/"); break;
+        case "2": router.push("/infrastructure"); break;
+        case "3": router.push("/media"); break;
+        case "4": router.push("/automations"); break;
+        case "5": router.push("/expenses"); break;
+        case "6": router.push("/network"); break;
+        case "7": router.push("/logs"); break;
+        case "r": window.location.reload(); break;
+      }
+    }
+    window.addEventListener("keydown", handler);
+    return () => window.removeEventListener("keydown", handler);
+  }, [router]);
+
+  return null;
+}

dashboard/ui/components/nav.tsx

@@ -0,0 +1,105 @@
+"use client";
+
+import Link from "next/link";
+import { usePathname } from "next/navigation";
+import { cn } from "@/lib/utils";
+import { RefreshIndicator } from "@/components/refresh-indicator";
+import { ThemeSwitcher } from "@/components/theme-switcher";
+
+const tabs = [
+  { href: "/", label: "Dashboard", key: "1" },
+  { href: "/infrastructure", label: "Infrastructure", key: "2" },
+  { href: "/media", label: "Media", key: "3" },
+  { href: "/automations", label: "Automations", key: "4" },
+  { href: "/expenses", label: "Expenses", key: "5" },
+  { href: "/network", label: "Network", key: "6" },
+  { href: "/logs", label: "Logs", key: "7" },
+];
+
+export function Nav() {
+  const pathname = usePathname();
+  const today = new Date().toLocaleDateString("en-US", {
+    weekday: "long",
+    year: "numeric",
+    month: "long",
+    day: "numeric",
+  });
+
+  return (
+    <nav className="sticky top-0 z-50" style={{
+      background: "var(--nav-bg)",
+      backdropFilter: "blur(30px) saturate(180%)",
+      WebkitBackdropFilter: "blur(30px) saturate(180%)",
+      borderBottom: "1px solid var(--nav-border)",
+    }}>
+      {/* Accent gradient line at very top */}
+      <div className="h-[2px] w-full" style={{
+        background: `linear-gradient(90deg, var(--accent-color, #3b82f6), rgba(139,92,246,0.8), var(--accent-color, #3b82f6))`,
+        opacity: 0.6,
+      }} />
+      <div className="flex items-center justify-between px-6 h-12">
+        <div className="flex items-center gap-5">
+          <Link href="/" className="flex items-center gap-2.5 group">
+            <div className="w-8 h-8 rounded-[10px] bg-gradient-to-br from-blue-500 via-violet-500 to-pink-500 flex items-center justify-center text-white font-bold text-sm animate-logo-float transition-all group-hover:scale-105" style={{ boxShadow: "0 0 20px var(--accent-glow, rgba(139, 92, 246, 0.3))" }}>
+              H
+            </div>
+            <span className="font-semibold hidden sm:inline" style={{ color: "#f1f5f9" }}>Homelab</span>
+          </Link>
+          <div className="h-5 w-px bg-white/10 hidden sm:block" />
+          <div className="flex items-center gap-0.5">
+            {tabs.map((tab) => {
+              const isActive =
+                tab.href === "/"
+                  ? pathname === "/"
+                  : pathname.startsWith(tab.href);
+              return (
+                <Link
+                  key={tab.href}
+                  href={tab.href}
+                  className={cn(
+                    "px-2.5 py-1.5 text-xs rounded-md transition-all duration-200 whitespace-nowrap",
+                    isActive
+                      ? "font-medium"
+                      : "hover:text-foreground"
+                  )}
+                  style={
+                    isActive
+                      ? {
+                          background: "var(--nav-active)",
+                          color: "#f1f5f9",
+                          boxShadow: "var(--nav-active-glow, 0 2px 10px rgba(59,130,246,0.2))",
+                        }
+                      : { color: "rgba(148, 163, 184, 0.8)" }
+                  }
+                  onMouseEnter={(e) => {
+                    if (!isActive) {
+                      e.currentTarget.style.background = "var(--nav-hover)";
+                      e.currentTarget.style.color = "#e2e8f0";
+                    }
+                  }}
+                  onMouseLeave={(e) => {
+                    if (!isActive) {
+                      e.currentTarget.style.background = "";
+                      e.currentTarget.style.color = "rgba(148, 163, 184, 0.8)";
+                    }
+                  }}
+                >
+                  {tab.label}
+                </Link>
+              );
+            })}
+          </div>
+        </div>
+        <div className="flex items-center gap-3">
+          <kbd className="hidden sm:inline-flex items-center gap-1 rounded-md border border-white/[0.1] bg-white/[0.04] px-2 py-0.5 text-[10px] text-muted-foreground/60 cursor-pointer hover:bg-white/[0.08] transition-colors" onClick={() => window.dispatchEvent(new KeyboardEvent("keydown", { key: "k", metaKey: true }))}>
+            Ctrl+K
+          </kbd>
+          <ThemeSwitcher />
+          <div className="h-5 w-px bg-white/10 hidden md:block" />
+          <span className="text-[11px] hidden md:inline" style={{ color: "rgba(148, 163, 184, 0.6)" }}>{today}</span>
+          <RefreshIndicator />
+        </div>
+      </div>
+    </nav>
+  );
+}

dashboard/ui/components/ollama-card.tsx

@@ -0,0 +1,117 @@
+"use client";
+
+import { usePoll } from "@/lib/use-poll";
+import type { OverviewStats } from "@/lib/types";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { StatusBadge } from "./status-badge";
+import { CardSkeleton } from "@/components/skeleton";
+
+function tempColor(temp: number): string {
+  if (temp < 50) return "#22c55e";
+  if (temp < 70) return "#f59e0b";
+  return "#ef4444";
+}
+
+function vramGradient(pct: number): string {
+  if (pct < 50) return "from-blue-500 to-cyan-400";
+  if (pct < 80) return "from-blue-500 via-violet-500 to-purple-400";
+  return "from-violet-500 via-pink-500 to-red-400";
+}
+
+function MiniRing({ pct, color, size = 48, stroke = 4, children }: { pct: number; color: string; size?: number; stroke?: number; children?: React.ReactNode }) {
+  const radius = (size - stroke) / 2;
+  const circumference = 2 * Math.PI * radius;
+  const offset = circumference - (pct / 100) * circumference;
+
+  return (
+    <div className="relative" style={{ width: size, height: size }}>
+      <svg width={size} height={size} className="absolute inset-0 -rotate-90">
+        <circle className="gauge-track" cx={size / 2} cy={size / 2} r={radius} strokeWidth={stroke} />
+        <circle className="gauge-fill" cx={size / 2} cy={size / 2} r={radius} strokeWidth={stroke} stroke={color} strokeDasharray={circumference} strokeDashoffset={offset} />
+      </svg>
+      <div className="absolute inset-0 flex items-center justify-center">
+        {children}
+      </div>
+    </div>
+  );
+}
+
+export function OllamaCard() {
+  const { data } = usePoll<OverviewStats>("/api/stats/overview", 60000);
+  const gpu = data?.gpu;
+  const ollamaUp = data?.ollama?.available ?? data?.ollama_available ?? false;
+  const vramUsed = gpu?.vram_used_mb ?? gpu?.memory_used_mb;
+  const vramTotal = gpu?.vram_total_mb ?? gpu?.memory_total_mb;
+  const power = gpu?.power_w ?? gpu?.power_draw_w;
+  const vramPct =
+    vramUsed != null && vramTotal != null ? (vramUsed / vramTotal) * 100 : 0;
+
+  return (
+    <Card className="overflow-hidden relative">
+      <CardHeader className="pb-2 flex flex-row items-center justify-between">
+        <CardTitle className="text-base font-semibold">LLM / GPU</CardTitle>
+        {data && (
+          <StatusBadge
+            color={ollamaUp ? "green" : "red"}
+            label={ollamaUp ? "Online" : "Offline"}
+          />
+        )}
+      </CardHeader>
+      <CardContent className="space-y-3">
+        {!data ? (
+          <CardSkeleton lines={3} />
+        ) : gpu?.available ? (
+          <>
+            {gpu.name && (
+              <p className="text-xs text-foreground/80 font-medium">{gpu.name}</p>
+            )}
+            {/* VRAM bar */}
+            {vramUsed != null && vramTotal != null && (
+              <div>
+                <div className="flex justify-between text-xs text-muted-foreground mb-1.5">
+                  <span>VRAM</span>
+                  <span>
+                    {(vramUsed / 1024).toFixed(1)} / {(vramTotal / 1024).toFixed(1)} GB
+                  </span>
+                </div>
+                <div className="glass-bar-track h-2.5">
+                  <div
+                    className={`h-full glass-bar-fill bg-gradient-to-r ${vramGradient(vramPct)} animate-bar-glow transition-all duration-700`}
+                    style={{ width: `${vramPct}%`, boxShadow: "0 0 12px rgba(139, 92, 246, 0.3)" }}
+                  />
+                </div>
+              </div>
+            )}
+            {/* Temperature ring + Power text */}
+            <div className="flex items-center gap-4">
+              {gpu.temp_c != null && (
+                <div className="flex items-center gap-2">
+                  <MiniRing pct={Math.min(gpu.temp_c, 100)} color={tempColor(gpu.temp_c)}>
+                    <span className="text-[10px] font-bold text-foreground">{gpu.temp_c}&deg;</span>
+                  </MiniRing>
+                  <span className="text-[10px] text-muted-foreground">Temp</span>
+                </div>
+              )}
+              {power != null && (
+                <div className="text-xs">
+                  <p className="text-foreground font-medium">{power}W</p>
+                  <p className="text-[10px] text-muted-foreground">
+                    {gpu.power_limit_w ? `/ ${gpu.power_limit_w}W` : "Power"}
+                  </p>
+                </div>
+              )}
+              {gpu.utilization_pct != null && (
+                <div className="text-xs">
+                  <p className="text-foreground font-medium">{gpu.utilization_pct}%</p>
+                  <p className="text-[10px] text-muted-foreground">Util</p>
+                </div>
+              )}
+            </div>
+          </>
+        ) : (
+          <p className="text-xs text-muted-foreground">GPU not available</p>
+        )}
+      </CardContent>
+    </Card>
+  );
+}

dashboard/ui/components/ollama-chat.tsx

@@ -0,0 +1,90 @@
+"use client";
+import { useState, useRef } from "react";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Button } from "@/components/ui/button";
+
+interface Message { role: "user" | "assistant"; content: string }
+
+export function OllamaChat() {
+  const [open, setOpen] = useState(false);
+  const [messages, setMessages] = useState<Message[]>([]);
+  const [input, setInput] = useState("");
+  const [loading, setLoading] = useState(false);
+  const scrollRef = useRef<HTMLDivElement>(null);
+
+  async function send() {
+    if (!input.trim() || loading) return;
+    const userMsg = input.trim();
+    setInput("");
+    setMessages(prev => [...prev, { role: "user", content: userMsg }]);
+    setLoading(true);
+    try {
+      const res = await fetch("/api/chat", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ message: userMsg }),
+      });
+      const data = await res.json();
+      setMessages(prev => [...prev, { role: "assistant", content: data.response || data.error || "No response" }]);
+    } catch (e) {
+      setMessages(prev => [...prev, { role: "assistant", content: `Error: ${e}` }]);
+    }
+    setLoading(false);
+    setTimeout(() => scrollRef.current?.scrollTo(0, scrollRef.current.scrollHeight), 100);
+  }
+
+  if (!open) {
+    return (
+      <button
+        onClick={() => setOpen(true)}
+        className="fixed bottom-4 left-4 z-50 w-10 h-10 rounded-full bg-gradient-to-br from-violet-500 to-blue-500 text-white flex items-center justify-center shadow-lg shadow-violet-500/20 hover:shadow-violet-500/40 hover:scale-110 transition-all duration-200"
+        title="Chat with Ollama"
+      >
+        <span className="text-sm font-bold">AI</span>
+      </button>
+    );
+  }
+
+  return (
+    <div className="fixed bottom-4 left-4 z-50 w-80">
+      <Card className="shadow-2xl" style={{ background: "rgba(10, 10, 25, 0.95)", backdropFilter: "blur(30px)", border: "1px solid rgba(139, 92, 246, 0.2)" }}>
+        <CardHeader className="pb-2 flex flex-row items-center justify-between">
+          <CardTitle className="text-sm font-medium">Ollama Chat</CardTitle>
+          <Button variant="ghost" size="sm" className="h-6 w-6 p-0 text-xs hover:bg-white/[0.06]" onClick={() => setOpen(false)}>x</Button>
+        </CardHeader>
+        <CardContent className="space-y-2">
+          <div ref={scrollRef} className="h-48 overflow-y-auto space-y-2 text-xs">
+            {messages.length === 0 && (
+              <div className="text-center py-3 space-y-2">
+                <p className="text-muted-foreground/60">Ask about your homelab...</p>
+                <div className="flex flex-wrap gap-1 justify-center">
+                  {["How many containers?", "GPU status?", "What's unhealthy?", "Disk space?"].map(q => (
+                    <button key={q} onClick={() => { setInput(q); }} className="text-[10px] px-2 py-1 rounded-md bg-white/[0.04] border border-white/[0.06] hover:bg-white/[0.08] transition-colors text-muted-foreground">
+                      {q}
+                    </button>
+                  ))}
+                </div>
+              </div>
+            )}
+            {messages.map((m, i) => (
+              <div key={i} className={`rounded-lg px-3 py-2 ${m.role === "user" ? "bg-blue-500/10 border border-blue-500/10 ml-8" : "bg-white/[0.04] border border-white/[0.06] mr-8"}`}>
+                <p className="whitespace-pre-wrap">{m.content}</p>
+              </div>
+            ))}
+            {loading && <div className="bg-white/[0.04] border border-white/[0.06] rounded-lg px-3 py-2 mr-8 animate-pulse"><p className="text-muted-foreground">Thinking...</p></div>}
+          </div>
+          <div className="flex gap-1.5">
+            <input
+              value={input}
+              onChange={e => setInput(e.target.value)}
+              onKeyDown={e => e.key === "Enter" && send()}
+              placeholder="Ask Ollama..."
+              className="flex-1 rounded-lg glass-input px-3 py-1.5 text-xs"
+            />
+            <Button size="sm" className="h-7 text-xs px-3 bg-violet-500/20 hover:bg-violet-500/30 border border-violet-500/20" onClick={send} disabled={loading}>Send</Button>
+          </div>
+        </CardContent>
+      </Card>
+    </div>
+  );
+}

dashboard/ui/components/refresh-indicator.tsx

@@ -0,0 +1,19 @@
+"use client";
+import { useState, useEffect } from "react";
+
+export function RefreshIndicator({ interval = 60 }: { interval?: number }) {
+  const [countdown, setCountdown] = useState(interval);
+
+  useEffect(() => {
+    const timer = setInterval(() => {
+      setCountdown(prev => prev <= 1 ? interval : prev - 1);
+    }, 1000);
+    return () => clearInterval(timer);
+  }, [interval]);
+
+  return (
+    <span className="text-[9px] text-muted-foreground tabular-nums">
+      {countdown}s
+    </span>
+  );
+}

dashboard/ui/components/skeleton.tsx

@@ -0,0 +1,39 @@
+"use client";
+
+export function Skeleton({ className = "", style }: { className?: string; style?: React.CSSProperties }) {
+  return (
+    <div className={`animate-pulse rounded-lg bg-white/[0.06] ${className}`} style={style} />
+  );
+}
+
+export function StatCardSkeleton() {
+  return (
+    <div className="rounded-2xl border border-white/[0.08] p-5 space-y-3" style={{ background: "rgba(15,20,35,0.35)" }}>
+      <Skeleton className="h-3 w-20" />
+      <Skeleton className="h-8 w-24" />
+      <Skeleton className="h-3 w-32" />
+    </div>
+  );
+}
+
+export function CardSkeleton({ lines = 4, className = "" }: { lines?: number; className?: string }) {
+  return (
+    <div className={`rounded-2xl border border-white/[0.08] p-5 space-y-3 ${className}`} style={{ background: "rgba(15,20,35,0.35)" }}>
+      <Skeleton className="h-4 w-32 mb-2" />
+      {Array.from({ length: lines }).map((_, i) => (
+        <Skeleton key={i} className="h-3" style={{ width: `${70 + Math.random() * 30}%` }} />
+      ))}
+    </div>
+  );
+}
+
+export function TableSkeleton({ rows = 5 }: { rows?: number }) {
+  return (
+    <div className="space-y-2">
+      <Skeleton className="h-8 w-full rounded-lg" />
+      {Array.from({ length: rows }).map((_, i) => (
+        <Skeleton key={i} className="h-6 w-full rounded" />
+      ))}
+    </div>
+  );
+}

dashboard/ui/components/sparkline.tsx

@@ -0,0 +1,26 @@
+"use client";
+
+interface SparklineProps {
+  data: number[];
+  width?: number;
+  height?: number;
+  color?: string;
+}
+
+export function Sparkline({ data, width = 80, height = 24, color = "#3b82f6" }: SparklineProps) {
+  if (!data || data.length < 2) return null;
+  const min = Math.min(...data);
+  const max = Math.max(...data);
+  const range = max - min || 1;
+  const points = data.map((v, i) => {
+    const x = (i / (data.length - 1)) * width;
+    const y = height - ((v - min) / range) * (height - 4) - 2;
+    return `${x},${y}`;
+  }).join(" ");
+
+  return (
+    <svg width={width} height={height} className="inline-block">
+      <polyline points={points} fill="none" stroke={color} strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
+    </svg>
+  );
+}

dashboard/ui/components/stat-card.tsx

@@ -0,0 +1,134 @@
+import { Card, CardContent } from "@/components/ui/card";
+
+type StatColor = "blue" | "green" | "violet" | "amber" | "emerald";
+
+const gradientMap: Record<StatColor, string> = {
+  blue: "from-blue-300 to-blue-500",
+  green: "from-green-300 to-green-500",
+  violet: "from-violet-300 to-violet-500",
+  amber: "from-amber-300 to-amber-500",
+  emerald: "from-emerald-300 to-emerald-500",
+};
+
+const accentLineMap: Record<StatColor, string> = {
+  blue: "#3b82f6",
+  green: "#22c55e",
+  violet: "#8b5cf6",
+  amber: "#f59e0b",
+  emerald: "#10b981",
+};
+
+const strokeColorMap: Record<StatColor, [string, string]> = {
+  blue: ["#93c5fd", "#3b82f6"],
+  green: ["#86efac", "#22c55e"],
+  violet: ["#c4b5fd", "#8b5cf6"],
+  amber: ["#fcd34d", "#f59e0b"],
+  emerald: ["#6ee7b7", "#10b981"],
+};
+
+interface StatCardProps {
+  label: string;
+  value: string | number;
+  sub?: React.ReactNode;
+  color?: StatColor;
+  gauge?: number; // 0-100 percentage for ring gauge
+}
+
+function colorizeSubText(sub: React.ReactNode): React.ReactNode {
+  if (typeof sub !== "string") return sub;
+  const keywords: [RegExp, string][] = [
+    [/\b(running|online|healthy|clean|clear|all good|ok)\b/gi, "text-green-400"],
+    [/\b(error|alert|fail|errors detected)\b/gi, "text-red-400"],
+  ];
+  for (const [pattern, cls] of keywords) {
+    if (pattern.test(sub)) {
+      return (
+        <>
+          {sub.split(pattern).map((part, i) =>
+            pattern.test(part) ? (
+              <span key={i} className={cls}>{part}</span>
+            ) : (
+              <span key={i}>{part}</span>
+            )
+          )}
+        </>
+      );
+    }
+  }
+  return sub;
+}
+
+function GaugeRing({ pct, color, size = 64, stroke = 4 }: { pct: number; color: StatColor; size?: number; stroke?: number }) {
+  const radius = (size - stroke) / 2;
+  const circumference = 2 * Math.PI * radius;
+  const offset = circumference - (pct / 100) * circumference;
+  const gradientId = `gauge-grad-${color}`;
+  const [stopStart, stopEnd] = strokeColorMap[color] ?? ["#93c5fd", "#3b82f6"];
+
+  return (
+    <svg width={size} height={size} viewBox={`0 0 ${size} ${size}`} className="-rotate-90">
+      <defs>
+        <linearGradient id={gradientId}>
+          <stop offset="0%" stopColor={stopStart} />
+          <stop offset="100%" stopColor={stopEnd} />
+        </linearGradient>
+      </defs>
+      <circle
+        className="gauge-track"
+        cx={size / 2}
+        cy={size / 2}
+        r={radius}
+        strokeWidth={stroke}
+      />
+      <circle
+        className="gauge-fill"
+        cx={size / 2}
+        cy={size / 2}
+        r={radius}
+        strokeWidth={stroke}
+        stroke={`url(#${gradientId})`}
+        strokeDasharray={circumference}
+        strokeDashoffset={offset}
+      />
+    </svg>
+  );
+}
+
+export function StatCard({ label, value, sub, color = "blue", gauge }: StatCardProps) {
+  const hasGauge = gauge != null && gauge >= 0;
+  const accent = accentLineMap[color];
+
+  return (
+    <Card className="card-hover-lift overflow-hidden relative group">
+      {/* Top accent line */}
+      <span
+        className="absolute top-0 left-[20%] right-[20%] h-px"
+        style={{
+          background: `linear-gradient(90deg, transparent, ${accent}, transparent)`,
+        }}
+      />
+      <CardContent className="pt-5 pb-4 px-4 relative flex flex-col items-center justify-center text-center min-h-[110px]">
+        {hasGauge ? (
+          <div className="relative flex items-center justify-center mb-1" style={{ width: 64, height: 64 }}>
+            <GaugeRing pct={gauge} color={color} />
+            <span
+              className={`absolute inset-0 flex items-center justify-center text-xl font-bold bg-gradient-to-b ${gradientMap[color]} bg-clip-text text-transparent tabular-nums-transition`}
+            >
+              {value}
+            </span>
+          </div>
+        ) : (
+          <p
+            className={`text-3xl font-bold bg-gradient-to-b ${gradientMap[color]} bg-clip-text text-transparent tabular-nums-transition mb-1`}
+          >
+            {value}
+          </p>
+        )}
+        <p className="text-xs uppercase tracking-wider text-muted-foreground font-medium">
+          {label}
+        </p>
+        {sub && <div className="mt-0.5 text-sm text-muted-foreground/70">{colorizeSubText(sub)}</div>}
+      </CardContent>
+    </Card>
+  );
+}

dashboard/ui/components/status-badge.tsx

@@ -0,0 +1,28 @@
+import { cn } from "@/lib/utils";
+
+const colorStyles: Record<string, { bg: string; shadow: string }> = {
+  green:  { bg: "bg-green-500",  shadow: "0 0 8px rgba(34, 197, 94, 0.5)" },
+  red:    { bg: "bg-red-500",    shadow: "0 0 8px rgba(239, 68, 68, 0.5)" },
+  amber:  { bg: "bg-amber-500",  shadow: "0 0 8px rgba(245, 158, 11, 0.5)" },
+  blue:   { bg: "bg-blue-500",   shadow: "0 0 8px rgba(59, 130, 246, 0.5)" },
+  purple: { bg: "bg-purple-500", shadow: "0 0 8px rgba(139, 92, 246, 0.5)" },
+};
+
+interface StatusBadgeProps {
+  color: "green" | "red" | "amber" | "blue" | "purple";
+  label?: string;
+}
+
+export function StatusBadge({ color, label }: StatusBadgeProps) {
+  const style = colorStyles[color] ?? { bg: "bg-gray-500", shadow: "none" };
+
+  return (
+    <span className="inline-flex items-center gap-1.5 text-xs">
+      <span
+        className={cn("w-2 h-2 rounded-full shrink-0", style.bg)}
+        style={{ boxShadow: style.shadow }}
+      />
+      {label && <span className="text-muted-foreground">{label}</span>}
+    </span>
+  );
+}

dashboard/ui/components/tdarr-card.tsx

@@ -0,0 +1,139 @@
+"use client";
+import { usePoll } from "@/lib/use-poll";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Badge } from "@/components/ui/badge";
+import { CardSkeleton } from "@/components/skeleton";
+
+interface TdarrWorker {
+  id: string;
+  type: string;
+  file: string;
+  percentage: number;
+  fps: number;
+  eta: string;
+}
+
+interface TdarrNode {
+  id: string;
+  name: string;
+  paused: boolean;
+  hardware: string;
+  workers: TdarrWorker[];
+  active: number;
+}
+
+interface TdarrCluster {
+  server_version?: string;
+  nodes: TdarrNode[];
+  total_active: number;
+  stats: {
+    total_files: number;
+    transcoded: number;
+    health_checked: number;
+    size_saved_gb: number;
+    queue_transcode: number;
+    error_transcode: number;
+    tdarr_score: string;
+  };
+  error?: string;
+}
+
+// Node hardware colors
+const hwColors: Record<string, string> = {
+  "NVENC (RTX 5090)": "text-green-400",
+  "VAAPI (Radeon 760M)": "text-amber-400",
+  "QSV (Intel)": "text-cyan-400",
+  "CPU": "text-muted-foreground",
+};
+
+export function TdarrCard() {
+  const { data } = usePoll<TdarrCluster>("/api/tdarr/cluster", 10000); // 10s refresh for live worker updates
+
+  return (
+    <Card>
+      <CardHeader className="pb-2 flex flex-row items-center justify-between">
+        <CardTitle className="text-base font-semibold">Tdarr Cluster</CardTitle>
+        <div className="flex items-center gap-2">
+          {data && !data.error && (
+            <>
+              <Badge variant="secondary" className="text-xs bg-green-500/10 border border-green-500/20 text-green-400">
+                {data.total_active} active
+              </Badge>
+              {data.stats.error_transcode > 0 && (
+                <Badge variant="secondary" className="text-xs bg-red-500/10 border border-red-500/20 text-red-400">
+                  {data.stats.error_transcode} errors
+                </Badge>
+              )}
+            </>
+          )}
+        </div>
+      </CardHeader>
+      <CardContent>
+        {!data ? (
+          <CardSkeleton lines={5} />
+        ) : data.error ? (
+          <p className="text-sm text-red-400">{data.error}</p>
+        ) : (
+          <div className="space-y-4">
+            {/* Stats row */}
+            <div className="flex flex-wrap gap-x-5 gap-y-1 text-xs text-muted-foreground">
+              <span>{data.stats.total_files.toLocaleString()} files</span>
+              <span className="text-green-400">{data.stats.transcoded.toLocaleString()} transcoded</span>
+              <span>{data.stats.health_checked.toLocaleString()} health checked</span>
+              <span className="text-amber-400">{data.stats.size_saved_gb} GB saved</span>
+              {data.stats.queue_transcode > 0 && (
+                <span className="text-blue-400">{data.stats.queue_transcode} in queue</span>
+              )}
+            </div>
+
+            {/* Nodes */}
+            <div className="space-y-3">
+              {data.nodes.map((node) => (
+                <div key={node.id} className="rounded-lg bg-white/[0.03] border border-white/[0.06] p-3">
+                  <div className="flex items-center justify-between mb-2">
+                    <div className="flex items-center gap-2">
+                      <span className={`w-2 h-2 rounded-full ${node.active > 0 ? "bg-green-500" : node.paused ? "bg-amber-500" : "bg-gray-500"}`}
+                            style={{ boxShadow: node.active > 0 ? "0 0 6px rgba(34,197,94,0.5)" : "none" }} />
+                      <span className="text-sm font-medium">{node.name}</span>
+                      <span className={`text-xs ${hwColors[node.hardware] ?? "text-muted-foreground"}`}>{node.hardware}</span>
+                    </div>
+                    {node.paused && <Badge variant="secondary" className="text-[10px] bg-amber-500/10 text-amber-400">Paused</Badge>}
+                  </div>
+
+                  {node.workers.length > 0 ? (
+                    <div className="space-y-2">
+                      {node.workers.map((w) => (
+                        <div key={w.id} className="space-y-1">
+                          <div className="flex items-center justify-between text-xs">
+                            <span className="text-foreground/80 truncate max-w-[60%]">{w.file}</span>
+                            <div className="flex items-center gap-2 shrink-0">
+                              <span className="text-green-400 font-mono">{w.fps} fps</span>
+                              <span className="text-muted-foreground">{w.eta}</span>
+                              <span className="text-foreground font-medium w-12 text-right">{w.percentage}%</span>
+                            </div>
+                          </div>
+                          <div className="h-1.5 rounded-full bg-white/[0.06] overflow-hidden">
+                            <div
+                              className="h-full rounded-full transition-all duration-1000"
+                              style={{
+                                width: `${w.percentage}%`,
+                                background: `linear-gradient(90deg, #3b82f6, ${w.percentage > 80 ? "#22c55e" : "#8b5cf6"})`,
+                                boxShadow: "0 0 8px rgba(59, 130, 246, 0.3)",
+                              }}
+                            />
+                          </div>
+                        </div>
+                      ))}
+                    </div>
+                  ) : (
+                    <p className="text-xs text-muted-foreground/50">Idle</p>
+                  )}
+                </div>
+              ))}
+            </div>
+          </div>
+        )}
+      </CardContent>
+    </Card>
+  );
+}

dashboard/ui/components/theme-provider.tsx

@@ -0,0 +1,103 @@
+"use client";
+
+import {
+  createContext,
+  useContext,
+  useState,
+  useEffect,
+  useCallback,
+  type ReactNode,
+} from "react";
+import { themes, getTheme, DEFAULT_THEME, type Theme } from "@/lib/themes";
+
+interface ThemeContextValue {
+  theme: Theme;
+  themeName: string;
+  setTheme: (name: string) => void;
+}
+
+const ThemeContext = createContext<ThemeContextValue>({
+  theme: themes[0],
+  themeName: DEFAULT_THEME,
+  setTheme: () => {},
+});
+
+export function useTheme() {
+  return useContext(ThemeContext);
+}
+
+// Unique ID for the dynamic style element
+const STYLE_ID = "theme-gradient-style";
+
+function applyTheme(theme: Theme) {
+  const root = document.documentElement;
+
+  // Toggle dark class based on theme
+  if (theme.isDark) {
+    root.classList.add("dark");
+  } else {
+    root.classList.remove("dark");
+  }
+
+  // Set all CSS custom properties from the theme
+  for (const [key, value] of Object.entries(theme.vars)) {
+    root.style.setProperty(key, value);
+  }
+
+  // Set the body background
+  document.body.style.background = theme.bodyBg;
+
+  // Set the gradient via a style element (body::before can't be styled inline)
+  let styleEl = document.getElementById(STYLE_ID) as HTMLStyleElement | null;
+  if (!styleEl) {
+    styleEl = document.createElement("style");
+    styleEl.id = STYLE_ID;
+    document.head.appendChild(styleEl);
+  }
+  styleEl.textContent = `
+    body::before {
+      background: ${theme.bgGradient} !important;
+    }
+  `;
+
+  // Store in localStorage
+  try {
+    localStorage.setItem("homelab-theme", theme.name);
+  } catch {
+    // ignore storage errors
+  }
+}
+
+export function ThemeProvider({ children }: { children: ReactNode }) {
+  const [themeName, setThemeName] = useState(DEFAULT_THEME);
+  const theme = getTheme(themeName);
+
+  // Load saved theme on mount
+  useEffect(() => {
+    try {
+      const saved = localStorage.getItem("homelab-theme");
+      if (saved && themes.some((t) => t.name === saved)) {
+        setThemeName(saved);
+      }
+    } catch {
+      // ignore
+    }
+  }, []);
+
+  // Apply theme whenever it changes
+  useEffect(() => {
+    applyTheme(theme);
+  }, [theme]);
+
+  const setTheme = useCallback((name: string) => {
+    if (themes.some((t) => t.name === name)) {
+      setThemeName(name);
+    }
+  }, []);
+
+  return (
+    <ThemeContext.Provider value={{ theme, themeName, setTheme }}>
+      {children}
+    </ThemeContext.Provider>
+  );
+}

dashboard/ui/components/theme-switcher.tsx

@@ -0,0 +1,108 @@
+"use client";
+
+import { useState, useRef, useEffect } from "react";
+import { useTheme } from "@/components/theme-provider";
+import { themes } from "@/lib/themes";
+
+export function ThemeSwitcher() {
+  const { theme, setTheme } = useTheme();
+  const [open, setOpen] = useState(false);
+  const ref = useRef<HTMLDivElement>(null);
+
+  // Close dropdown on outside click
+  useEffect(() => {
+    function handleClick(e: MouseEvent) {
+      if (ref.current && !ref.current.contains(e.target as Node)) {
+        setOpen(false);
+      }
+    }
+    if (open) {
+      document.addEventListener("mousedown", handleClick);
+      return () => document.removeEventListener("mousedown", handleClick);
+    }
+  }, [open]);
+
+  // Close on Escape
+  useEffect(() => {
+    function handleKey(e: KeyboardEvent) {
+      if (e.key === "Escape") setOpen(false);
+    }
+    if (open) {
+      document.addEventListener("keydown", handleKey);
+      return () => document.removeEventListener("keydown", handleKey);
+    }
+  }, [open]);
+
+  return (
+    <div ref={ref} className="relative">
+      <button
+        onClick={() => setOpen(!open)}
+        className="flex items-center gap-2 px-2.5 py-1.5 text-xs rounded-lg transition-all duration-200 hover:bg-[var(--nav-hover)]"
+        aria-label="Switch theme"
+      >
+        <span
+          className="w-3 h-3 rounded-full shrink-0 border border-white/10"
+          style={{
+            background: `linear-gradient(135deg, ${theme.swatch[0]}, ${theme.swatch[1]})`,
+          }}
+        />
+        <span className="text-muted-foreground hidden sm:inline">{theme.label}</span>
+      </button>
+
+      {open && (
+        <div
+          className="absolute right-0 top-full mt-2 w-52 rounded-xl p-1.5 z-[100] shadow-2xl max-h-[70vh] overflow-y-auto"
+          style={{
+            background: theme.isDark ? "rgba(10, 10, 25, 0.95)" : "rgba(255, 255, 255, 0.97)",
+            border: "1px solid rgba(255, 255, 255, 0.15)",
+            backdropFilter: "blur(30px) saturate(180%)",
+            WebkitBackdropFilter: "blur(30px) saturate(180%)",
+          }}
+        >
+          <div className="px-2.5 py-1.5 text-[10px] uppercase tracking-wider" style={{ color: theme.isDark ? "#64748b" : "#94a3b8" }}>
+            Themes
+          </div>
+          {themes.map((t) => (
+            <button
+              key={t.name}
+              onClick={() => {
+                setTheme(t.name);
+                setOpen(false);
+              }}
+              className="w-full flex items-center gap-3 px-3 py-2 rounded-lg text-xs transition-all duration-150"
+              style={{
+                background: theme.name === t.name
+                  ? (theme.isDark ? "rgba(255,255,255,0.1)" : "rgba(0,0,0,0.06)")
+                  : "transparent",
+                color: theme.name === t.name
+                  ? (theme.isDark ? "#f1f5f9" : "#1e293b")
+                  : (theme.isDark ? "#94a3b8" : "#64748b"),
+              }}
+              onMouseEnter={(e) => {
+                if (theme.name !== t.name)
+                  e.currentTarget.style.background = theme.isDark ? "rgba(255,255,255,0.06)" : "rgba(0,0,0,0.03)";
+              }}
+              onMouseLeave={(e) => {
+                if (theme.name !== t.name)
+                  e.currentTarget.style.background = "transparent";
+              }}
+            >
+              <span
+                className="w-4 h-4 rounded-full shrink-0"
+                style={{
+                  background: `linear-gradient(135deg, ${t.swatch[0]}, ${t.swatch[1]})`,
+                  boxShadow: `0 0 8px ${t.swatch[0]}40`,
+                  border: "1px solid rgba(255,255,255,0.15)",
+                }}
+              />
+              <span className="flex-1 text-left font-medium">{t.label}</span>
+              {theme.name === t.name && (
+                <span style={{ color: t.swatch[0], fontSize: "14px" }}>●</span>
+              )}
+            </button>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}

dashboard/ui/components/toast-provider.tsx

@@ -0,0 +1,53 @@
+"use client";
+import { useState, useEffect, useCallback } from "react";
+import { useSSE } from "@/lib/use-sse";
+
+interface Toast {
+  id: number;
+  message: string;
+  type: "info" | "warning" | "error";
+}
+
+const ALERT_TYPES = ["container_unhealthy", "container_restarted", "drift_found"];
+
+export function ToastProvider() {
+  const events = useSSE("/api/activity", 5);
+  const [toasts, setToasts] = useState<Toast[]>([]);
+  const [seen, setSeen] = useState(new Set<string>());
+
+  const addToast = useCallback((message: string, type: Toast["type"]) => {
+    const id = Date.now();
+    setToasts(prev => [...prev, { id, message, type }]);
+    setTimeout(() => setToasts(prev => prev.filter(t => t.id !== id)), 5000);
+  }, []);
+
+  useEffect(() => {
+    for (const event of events) {
+      const key = `${event.type}-${event.timestamp}`;
+      if (seen.has(key)) continue;
+      if (ALERT_TYPES.includes(event.type)) {
+        setSeen(prev => new Set(prev).add(key));
+        addToast(event.raw || `${event.type}: ${event.source}`,
+          event.type.includes("unhealthy") ? "error" : "warning");
+      }
+    }
+  }, [events, seen, addToast]);
+
+  if (toasts.length === 0) return null;
+
+  const colors = {
+    info: "border-blue-500/20 bg-blue-500/5 backdrop-blur-xl",
+    warning: "border-amber-500/20 bg-amber-500/5 backdrop-blur-xl",
+    error: "border-red-500/20 bg-red-500/5 backdrop-blur-xl",
+  };
+
+  return (
+    <div className="fixed bottom-4 right-4 z-50 space-y-2 max-w-sm">
+      {toasts.map(t => (
+        <div key={t.id} className={`rounded-lg border px-4 py-3 text-xs shadow-lg backdrop-blur-md animate-slide-in ${colors[t.type]}`}>
+          <p className="text-foreground">{t.message}</p>
+        </div>
+      ))}
+    </div>
+  );
+}

dashboard/ui/components/ui/badge.tsx

@@ -0,0 +1,52 @@
+import { mergeProps } from "@base-ui/react/merge-props"
+import { useRender } from "@base-ui/react/use-render"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+const badgeVariants = cva(
+  "group/badge inline-flex h-5 w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-4xl border border-transparent px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-all focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&>svg]:pointer-events-none [&>svg]:size-3!",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground [a]:hover:bg-primary/80",
+        secondary:
+          "bg-secondary text-secondary-foreground [a]:hover:bg-secondary/80",
+        destructive:
+          "bg-destructive/10 text-destructive focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:focus-visible:ring-destructive/40 [a]:hover:bg-destructive/20",
+        outline:
+          "border-border text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground",
+        ghost:
+          "hover:bg-muted hover:text-muted-foreground dark:hover:bg-muted/50",
+        link: "text-primary underline-offset-4 hover:underline",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+)
+
+function Badge({
+  className,
+  variant = "default",
+  render,
+  ...props
+}: useRender.ComponentProps<"span"> & VariantProps<typeof badgeVariants>) {
+  return useRender({
+    defaultTagName: "span",
+    props: mergeProps<"span">(
+      {
+        className: cn(badgeVariants({ variant }), className),
+      },
+      props
+    ),
+    render,
+    state: {
+      slot: "badge",
+      variant,
+    },
+  })
+}
+
+export { Badge, badgeVariants }

dashboard/ui/components/ui/button.tsx

@@ -0,0 +1,60 @@
+"use client"
+
+import { Button as ButtonPrimitive } from "@base-ui/react/button"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+const buttonVariants = cva(
+  "group/button inline-flex shrink-0 items-center justify-center rounded-lg border border-transparent bg-clip-padding text-sm font-medium whitespace-nowrap transition-all outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 active:not-aria-[haspopup]:translate-y-px disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground [a]:hover:bg-primary/80",
+        outline:
+          "border-border bg-background hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:border-input dark:bg-input/30 dark:hover:bg-input/50",
+        secondary:
+          "bg-secondary text-secondary-foreground hover:bg-secondary/80 aria-expanded:bg-secondary aria-expanded:text-secondary-foreground",
+        ghost:
+          "hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:hover:bg-muted/50",
+        destructive:
+          "bg-destructive/10 text-destructive hover:bg-destructive/20 focus-visible:border-destructive/40 focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:hover:bg-destructive/30 dark:focus-visible:ring-destructive/40",
+        link: "text-primary underline-offset-4 hover:underline",
+      },
+      size: {
+        default:
+          "h-8 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2",
+        xs: "h-6 gap-1 rounded-[min(var(--radius-md),10px)] px-2 text-xs in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3",
+        sm: "h-7 gap-1 rounded-[min(var(--radius-md),12px)] px-2.5 text-[0.8rem] in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3.5",
+        lg: "h-9 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2",
+        icon: "size-8",
+        "icon-xs":
+          "size-6 rounded-[min(var(--radius-md),10px)] in-data-[slot=button-group]:rounded-lg [&_svg:not([class*='size-'])]:size-3",
+        "icon-sm":
+          "size-7 rounded-[min(var(--radius-md),12px)] in-data-[slot=button-group]:rounded-lg",
+        "icon-lg": "size-9",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+)
+
+function Button({
+  className,
+  variant = "default",
+  size = "default",
+  ...props
+}: ButtonPrimitive.Props & VariantProps<typeof buttonVariants>) {
+  return (
+    <ButtonPrimitive
+      data-slot="button"
+      className={cn(buttonVariants({ variant, size, className }))}
+      {...props}
+    />
+  )
+}
+
+export { Button, buttonVariants }

dashboard/ui/components/ui/card.tsx

@@ -0,0 +1,103 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+function Card({
+  className,
+  size = "default",
+  ...props
+}: React.ComponentProps<"div"> & { size?: "default" | "sm" }) {
+  return (
+    <div
+      data-slot="card"
+      data-size={size}
+      className={cn(
+        "group/card flex flex-col gap-4 overflow-hidden rounded-xl bg-card py-4 text-sm text-card-foreground ring-1 ring-foreground/10 has-data-[slot=card-footer]:pb-0 has-[>img:first-child]:pt-0 data-[size=sm]:gap-3 data-[size=sm]:py-3 data-[size=sm]:has-data-[slot=card-footer]:pb-0 *:[img:first-child]:rounded-t-xl *:[img:last-child]:rounded-b-xl",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CardHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-header"
+      className={cn(
+        "group/card-header @container/card-header grid auto-rows-min items-start gap-1 rounded-t-xl px-4 group-data-[size=sm]/card:px-3 has-data-[slot=card-action]:grid-cols-[1fr_auto] has-data-[slot=card-description]:grid-rows-[auto_auto] [.border-b]:pb-4 group-data-[size=sm]/card:[.border-b]:pb-3",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CardTitle({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-title"
+      className={cn(
+        "font-heading text-base leading-snug font-medium group-data-[size=sm]/card:text-sm",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CardDescription({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-description"
+      className={cn("text-sm text-muted-foreground", className)}
+      {...props}
+    />
+  )
+}
+
+function CardAction({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-action"
+      className={cn(
+        "col-start-2 row-span-2 row-start-1 self-start justify-self-end",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CardContent({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-content"
+      className={cn("px-4 group-data-[size=sm]/card:px-3", className)}
+      {...props}
+    />
+  )
+}
+
+function CardFooter({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-footer"
+      className={cn(
+        "flex items-center rounded-b-xl border-t bg-muted/50 p-4 group-data-[size=sm]/card:p-3",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export {
+  Card,
+  CardHeader,
+  CardFooter,
+  CardTitle,
+  CardAction,
+  CardDescription,
+  CardContent,
+}

dashboard/ui/components/ui/dialog.tsx

@@ -0,0 +1,160 @@
+"use client"
+
+import * as React from "react"
+import { Dialog as DialogPrimitive } from "@base-ui/react/dialog"
+
+import { cn } from "@/lib/utils"
+import { Button } from "@/components/ui/button"
+import { XIcon } from "lucide-react"
+
+function Dialog({ ...props }: DialogPrimitive.Root.Props) {
+  return <DialogPrimitive.Root data-slot="dialog" {...props} />
+}
+
+function DialogTrigger({ ...props }: DialogPrimitive.Trigger.Props) {
+  return <DialogPrimitive.Trigger data-slot="dialog-trigger" {...props} />
+}
+
+function DialogPortal({ ...props }: DialogPrimitive.Portal.Props) {
+  return <DialogPrimitive.Portal data-slot="dialog-portal" {...props} />
+}
+
+function DialogClose({ ...props }: DialogPrimitive.Close.Props) {
+  return <DialogPrimitive.Close data-slot="dialog-close" {...props} />
+}
+
+function DialogOverlay({
+  className,
+  ...props
+}: DialogPrimitive.Backdrop.Props) {
+  return (
+    <DialogPrimitive.Backdrop
+      data-slot="dialog-overlay"
+      className={cn(
+        "fixed inset-0 isolate z-50 bg-black/10 duration-100 supports-backdrop-filter:backdrop-blur-xs data-open:animate-in data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function DialogContent({
+  className,
+  children,
+  showCloseButton = true,
+  ...props
+}: DialogPrimitive.Popup.Props & {
+  showCloseButton?: boolean
+}) {
+  return (
+    <DialogPortal>
+      <DialogOverlay />
+      <DialogPrimitive.Popup
+        data-slot="dialog-content"
+        className={cn(
+          "fixed top-1/2 left-1/2 z-50 grid w-full max-w-[calc(100%-2rem)] -translate-x-1/2 -translate-y-1/2 gap-4 rounded-xl bg-popover p-4 text-sm text-popover-foreground ring-1 ring-foreground/10 duration-100 outline-none sm:max-w-sm data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
+          className
+        )}
+        {...props}
+      >
+        {children}
+        {showCloseButton && (
+          <DialogPrimitive.Close
+            data-slot="dialog-close"
+            render={
+              <Button
+                variant="ghost"
+                className="absolute top-2 right-2"
+                size="icon-sm"
+              />
+            }
+          >
+            <XIcon
+            />
+            <span className="sr-only">Close</span>
+          </DialogPrimitive.Close>
+        )}
+      </DialogPrimitive.Popup>
+    </DialogPortal>
+  )
+}
+
+function DialogHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="dialog-header"
+      className={cn("flex flex-col gap-2", className)}
+      {...props}
+    />
+  )
+}
+
+function DialogFooter({
+  className,
+  showCloseButton = false,
+  children,
+  ...props
+}: React.ComponentProps<"div"> & {
+  showCloseButton?: boolean
+}) {
+  return (
+    <div
+      data-slot="dialog-footer"
+      className={cn(
+        "-mx-4 -mb-4 flex flex-col-reverse gap-2 rounded-b-xl border-t bg-muted/50 p-4 sm:flex-row sm:justify-end",
+        className
+      )}
+      {...props}
+    >
+      {children}
+      {showCloseButton && (
+        <DialogPrimitive.Close render={<Button variant="outline" />}>
+          Close
+        </DialogPrimitive.Close>
+      )}
+    </div>
+  )
+}
+
+function DialogTitle({ className, ...props }: DialogPrimitive.Title.Props) {
+  return (
+    <DialogPrimitive.Title
+      data-slot="dialog-title"
+      className={cn(
+        "font-heading text-base leading-none font-medium",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function DialogDescription({
+  className,
+  ...props
+}: DialogPrimitive.Description.Props) {
+  return (
+    <DialogPrimitive.Description
+      data-slot="dialog-description"
+      className={cn(
+        "text-sm text-muted-foreground *:[a]:underline *:[a]:underline-offset-3 *:[a]:hover:text-foreground",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogOverlay,
+  DialogPortal,
+  DialogTitle,
+  DialogTrigger,
+}

dashboard/ui/components/ui/scroll-area.tsx

@@ -0,0 +1,55 @@
+"use client"
+
+import * as React from "react"
+import { ScrollArea as ScrollAreaPrimitive } from "@base-ui/react/scroll-area"
+
+import { cn } from "@/lib/utils"
+
+function ScrollArea({
+  className,
+  children,
+  ...props
+}: ScrollAreaPrimitive.Root.Props) {
+  return (
+    <ScrollAreaPrimitive.Root
+      data-slot="scroll-area"
+      className={cn("relative", className)}
+      {...props}
+    >
+      <ScrollAreaPrimitive.Viewport
+        data-slot="scroll-area-viewport"
+        className="size-full rounded-[inherit] transition-[color,box-shadow] outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-1"
+      >
+        {children}
+      </ScrollAreaPrimitive.Viewport>
+      <ScrollBar />
+      <ScrollAreaPrimitive.Corner />
+    </ScrollAreaPrimitive.Root>
+  )
+}
+
+function ScrollBar({
+  className,
+  orientation = "vertical",
+  ...props
+}: ScrollAreaPrimitive.Scrollbar.Props) {
+  return (
+    <ScrollAreaPrimitive.Scrollbar
+      data-slot="scroll-area-scrollbar"
+      data-orientation={orientation}
+      orientation={orientation}
+      className={cn(
+        "flex touch-none p-px transition-colors select-none data-horizontal:h-2.5 data-horizontal:flex-col data-horizontal:border-t data-horizontal:border-t-transparent data-vertical:h-full data-vertical:w-2.5 data-vertical:border-l data-vertical:border-l-transparent",
+        className
+      )}
+      {...props}
+    >
+      <ScrollAreaPrimitive.Thumb
+        data-slot="scroll-area-thumb"
+        className="relative flex-1 rounded-full bg-border"
+      />
+    </ScrollAreaPrimitive.Scrollbar>
+  )
+}
+
+export { ScrollArea, ScrollBar }

dashboard/ui/components/ui/separator.tsx

@@ -0,0 +1,25 @@
+"use client"
+
+import { Separator as SeparatorPrimitive } from "@base-ui/react/separator"
+
+import { cn } from "@/lib/utils"
+
+function Separator({
+  className,
+  orientation = "horizontal",
+  ...props
+}: SeparatorPrimitive.Props) {
+  return (
+    <SeparatorPrimitive
+      data-slot="separator"
+      orientation={orientation}
+      className={cn(
+        "shrink-0 bg-border data-horizontal:h-px data-horizontal:w-full data-vertical:w-px data-vertical:self-stretch",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Separator }

dashboard/ui/components/ui/table.tsx

@@ -0,0 +1,116 @@
+"use client"
+
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+function Table({ className, ...props }: React.ComponentProps<"table">) {
+  return (
+    <div
+      data-slot="table-container"
+      className="relative w-full overflow-x-auto"
+    >
+      <table
+        data-slot="table"
+        className={cn("w-full caption-bottom text-sm", className)}
+        {...props}
+      />
+    </div>
+  )
+}
+
+function TableHeader({ className, ...props }: React.ComponentProps<"thead">) {
+  return (
+    <thead
+      data-slot="table-header"
+      className={cn("[&_tr]:border-b", className)}
+      {...props}
+    />
+  )
+}
+
+function TableBody({ className, ...props }: React.ComponentProps<"tbody">) {
+  return (
+    <tbody
+      data-slot="table-body"
+      className={cn("[&_tr:last-child]:border-0", className)}
+      {...props}
+    />
+  )
+}
+
+function TableFooter({ className, ...props }: React.ComponentProps<"tfoot">) {
+  return (
+    <tfoot
+      data-slot="table-footer"
+      className={cn(
+        "border-t bg-muted/50 font-medium [&>tr]:last:border-b-0",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function TableRow({ className, ...props }: React.ComponentProps<"tr">) {
+  return (
+    <tr
+      data-slot="table-row"
+      className={cn(
+        "border-b transition-colors hover:bg-muted/50 has-aria-expanded:bg-muted/50 data-[state=selected]:bg-muted",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function TableHead({ className, ...props }: React.ComponentProps<"th">) {
+  return (
+    <th
+      data-slot="table-head"
+      className={cn(
+        "h-10 px-2 text-left align-middle font-medium whitespace-nowrap text-foreground [&:has([role=checkbox])]:pr-0",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function TableCell({ className, ...props }: React.ComponentProps<"td">) {
+  return (
+    <td
+      data-slot="table-cell"
+      className={cn(
+        "p-2 align-middle whitespace-nowrap [&:has([role=checkbox])]:pr-0",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function TableCaption({
+  className,
+  ...props
+}: React.ComponentProps<"caption">) {
+  return (
+    <caption
+      data-slot="table-caption"
+      className={cn("mt-4 text-sm text-muted-foreground", className)}
+      {...props}
+    />
+  )
+}
+
+export {
+  Table,
+  TableHeader,
+  TableBody,
+  TableFooter,
+  TableHead,
+  TableRow,
+  TableCell,
+  TableCaption,
+}

dashboard/ui/components/ui/tabs.tsx

@@ -0,0 +1,82 @@
+"use client"
+
+import { Tabs as TabsPrimitive } from "@base-ui/react/tabs"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+function Tabs({
+  className,
+  orientation = "horizontal",
+  ...props
+}: TabsPrimitive.Root.Props) {
+  return (
+    <TabsPrimitive.Root
+      data-slot="tabs"
+      data-orientation={orientation}
+      className={cn(
+        "group/tabs flex gap-2 data-horizontal:flex-col",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+const tabsListVariants = cva(
+  "group/tabs-list inline-flex w-fit items-center justify-center rounded-lg p-[3px] text-muted-foreground group-data-horizontal/tabs:h-8 group-data-vertical/tabs:h-fit group-data-vertical/tabs:flex-col data-[variant=line]:rounded-none",
+  {
+    variants: {
+      variant: {
+        default: "bg-muted",
+        line: "gap-1 bg-transparent",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+)
+
+function TabsList({
+  className,
+  variant = "default",
+  ...props
+}: TabsPrimitive.List.Props & VariantProps<typeof tabsListVariants>) {
+  return (
+    <TabsPrimitive.List
+      data-slot="tabs-list"
+      data-variant={variant}
+      className={cn(tabsListVariants({ variant }), className)}
+      {...props}
+    />
+  )
+}
+
+function TabsTrigger({ className, ...props }: TabsPrimitive.Tab.Props) {
+  return (
+    <TabsPrimitive.Tab
+      data-slot="tabs-trigger"
+      className={cn(
+        "relative inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-1.5 py-0.5 text-sm font-medium whitespace-nowrap text-foreground/60 transition-all group-data-vertical/tabs:w-full group-data-vertical/tabs:justify-start hover:text-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-1 focus-visible:outline-ring disabled:pointer-events-none disabled:opacity-50 has-data-[icon=inline-end]:pr-1 has-data-[icon=inline-start]:pl-1 aria-disabled:pointer-events-none aria-disabled:opacity-50 dark:text-muted-foreground dark:hover:text-foreground group-data-[variant=default]/tabs-list:data-active:shadow-sm group-data-[variant=line]/tabs-list:data-active:shadow-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "group-data-[variant=line]/tabs-list:bg-transparent group-data-[variant=line]/tabs-list:data-active:bg-transparent dark:group-data-[variant=line]/tabs-list:data-active:border-transparent dark:group-data-[variant=line]/tabs-list:data-active:bg-transparent",
+        "data-active:bg-background data-active:text-foreground dark:data-active:border-input dark:data-active:bg-input/30 dark:data-active:text-foreground",
+        "after:absolute after:bg-foreground after:opacity-0 after:transition-opacity group-data-horizontal/tabs:after:inset-x-0 group-data-horizontal/tabs:after:bottom-[-5px] group-data-horizontal/tabs:after:h-0.5 group-data-vertical/tabs:after:inset-y-0 group-data-vertical/tabs:after:-right-1 group-data-vertical/tabs:after:w-0.5 group-data-[variant=line]/tabs-list:data-active:after:opacity-100",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function TabsContent({ className, ...props }: TabsPrimitive.Panel.Props) {
+  return (
+    <TabsPrimitive.Panel
+      data-slot="tabs-content"
+      className={cn("flex-1 text-sm outline-none", className)}
+      {...props}
+    />
+  )
+}
+
+export { Tabs, TabsList, TabsTrigger, TabsContent, tabsListVariants }

dashboard/ui/eslint.config.mjs

@@ -0,0 +1,18 @@
+import { defineConfig, globalIgnores } from "eslint/config";
+import nextVitals from "eslint-config-next/core-web-vitals";
+import nextTs from "eslint-config-next/typescript";
+
+const eslintConfig = defineConfig([
+  ...nextVitals,
+  ...nextTs,
+  // Override default ignores of eslint-config-next.
+  globalIgnores([
+    // Default ignores of eslint-config-next:
+    ".next/**",
+    "out/**",
+    "build/**",
+    "next-env.d.ts",
+  ]),
+]);
+
+export default eslintConfig;

dashboard/ui/lib/api.ts

@@ -0,0 +1,17 @@
+// In the browser, API calls go to the same origin (Next.js rewrites to backend).
+// On the server, they go directly to the backend.
+const API = typeof window === "undefined"
+  ? (process.env.BACKEND_URL || "http://localhost:18888")
+  : "";
+
+export async function fetchAPI<T>(path: string): Promise<T> {
+  const res = await fetch(`${API}${path}`);
+  if (!res.ok) throw new Error(`API error: ${res.status}`);
+  return res.json();
+}
+
+export async function postAPI<T>(path: string): Promise<T> {
+  const res = await fetch(`${API}${path}`, { method: "POST" });
+  if (!res.ok) throw new Error(`API error: ${res.status}`);
+  return res.json();
+}

dashboard/ui/lib/themes.ts

@@ -0,0 +1,982 @@
+export interface Theme {
+  name: string;
+  label: string;
+  isDark: boolean;
+  bgGradient: string;
+  bodyBg: string;
+  // Preview swatch colors for the switcher
+  swatch: [string, string];
+  vars: Record<string, string>;
+}
+
+export const themes: Theme[] = [
+  // 1. Midnight (default)
+  {
+    name: "midnight",
+    label: "Midnight",
+    isDark: true,
+    swatch: ["#3b82f6", "#8b5cf6"],
+    bodyBg: "linear-gradient(135deg, #060611 0%, #0d1117 40%, #0a0e1a 100%)",
+    bgGradient:
+      "radial-gradient(ellipse 140% 70% at 5% 5%, rgba(59, 130, 246, 0.38), transparent 50%), radial-gradient(ellipse 100% 90% at 95% 15%, rgba(139, 92, 246, 0.30), transparent 50%), radial-gradient(ellipse 120% 70% at 50% 105%, rgba(16, 185, 129, 0.22), transparent 50%), radial-gradient(ellipse 80% 50% at 75% 55%, rgba(236, 72, 153, 0.15), transparent 50%)",
+    vars: {
+      "--background": "230 25% 4%",
+      "--foreground": "210 40% 98%",
+      "--card": "220 30% 8% / 0.4",
+      "--card-foreground": "210 40% 98%",
+      "--popover": "220 30% 8% / 0.8",
+      "--popover-foreground": "210 40% 93%",
+      "--primary": "217 91% 60%",
+      "--primary-foreground": "210 40% 93%",
+      "--secondary": "217 33% 12% / 0.5",
+      "--secondary-foreground": "210 40% 93%",
+      "--muted": "217 33% 12% / 0.5",
+      "--muted-foreground": "215 20% 68%",
+      "--accent": "217 33% 12% / 0.5",
+      "--accent-foreground": "210 40% 93%",
+      "--destructive": "0 84% 60%",
+      "--border": "0 0% 100% / 0.08",
+      "--input": "0 0% 100% / 0.06",
+      "--ring": "217 91% 60%",
+      "--chart-1": "217 91% 60%",
+      "--chart-2": "160 60% 45%",
+      "--chart-3": "30 80% 55%",
+      "--chart-4": "280 65% 60%",
+      "--chart-5": "340 75% 55%",
+      "--sidebar": "220 30% 6%",
+      "--sidebar-foreground": "210 40% 93%",
+      "--sidebar-primary": "217 91% 60%",
+      "--sidebar-primary-foreground": "210 40% 93%",
+      "--sidebar-accent": "217 33% 12%",
+      "--sidebar-accent-foreground": "210 40% 93%",
+      "--sidebar-border": "0 0% 100% / 0.06",
+      "--sidebar-ring": "217 91% 60%",
+      "--card-bg": "rgba(15, 20, 40, 0.35)",
+      "--card-border": "rgba(255, 255, 255, 0.12)",
+      "--card-hover-bg": "rgba(15, 20, 40, 0.45)",
+      "--card-hover-border": "rgba(255, 255, 255, 0.2)",
+      "--glass-bg": "rgba(15, 20, 40, 0.30)",
+      "--glass-border": "rgba(255, 255, 255, 0.08)",
+      "--glass-hover": "rgba(255, 255, 255, 0.03)",
+      "--glass-input-bg": "rgba(255, 255, 255, 0.06)",
+      "--glass-input-border": "rgba(255, 255, 255, 0.1)",
+      "--glass-input-focus": "rgba(59, 130, 246, 0.3)",
+      "--glass-input-focus-bg": "rgba(255, 255, 255, 0.08)",
+      "--glass-table-header": "rgba(255, 255, 255, 0.08)",
+      "--glass-bar-track": "rgba(255, 255, 255, 0.10)",
+      "--nav-bg": "rgba(6, 6, 17, 0.65)",
+      "--nav-border": "rgba(255, 255, 255, 0.08)",
+      "--nav-active": "rgba(255, 255, 255, 0.06)",
+      "--nav-hover": "rgba(255, 255, 255, 0.04)",
+      "--accent-color": "#3b82f6",
+      "--accent-glow": "rgba(59, 130, 246, 0.3)",
+      "--card-lift-shadow": "0 8px 40px rgba(0, 0, 0, 0.3), 0 0 40px rgba(59, 130, 246, 0.04)",
+      "--stat-glow": "0 0 20px rgba(59, 130, 246, 0.15)",
+      "--nav-active-glow": "0 2px 10px rgba(59, 130, 246, 0.3)",
+    },
+  },
+
+  // 2. Light
+  {
+    name: "light",
+    label: "Light",
+    isDark: false,
+    swatch: ["#2563eb", "#e2e8f0"],
+    bodyBg: "linear-gradient(135deg, #fafafa 0%, #f1f5f9 40%, #f8fafc 100%)",
+    bgGradient:
+      "radial-gradient(ellipse 80% 50% at 50% -20%, rgba(37, 99, 235, 0.06), transparent), radial-gradient(ellipse 60% 40% at 80% 50%, rgba(99, 102, 241, 0.04), transparent)",
+    vars: {
+      "--background": "210 20% 98%",
+      "--foreground": "215 25% 15%",
+      "--card": "0 0% 100%",
+      "--card-foreground": "215 25% 15%",
+      "--popover": "0 0% 100%",
+      "--popover-foreground": "215 25% 15%",
+      "--primary": "217 91% 53%",
+      "--primary-foreground": "0 0% 100%",
+      "--secondary": "214 32% 91%",
+      "--secondary-foreground": "215 25% 15%",
+      "--muted": "214 32% 91%",
+      "--muted-foreground": "215 16% 47%",
+      "--accent": "214 32% 91%",
+      "--accent-foreground": "215 25% 15%",
+      "--destructive": "0 84% 60%",
+      "--border": "214 32% 88%",
+      "--input": "214 32% 88%",
+      "--ring": "217 91% 53%",
+      "--card-bg": "rgba(255, 255, 255, 0.9)",
+      "--card-border": "rgba(0, 0, 0, 0.12)",
+      "--card-hover-bg": "rgba(255, 255, 255, 1)",
+      "--card-hover-border": "rgba(0, 0, 0, 0.12)",
+      "--glass-bg": "rgba(255, 255, 255, 0.7)",
+      "--glass-border": "rgba(0, 0, 0, 0.10)",
+      "--glass-hover": "rgba(0, 0, 0, 0.02)",
+      "--glass-input-bg": "rgba(255, 255, 255, 0.8)",
+      "--glass-input-border": "rgba(0, 0, 0, 0.1)",
+      "--glass-input-focus": "rgba(37, 99, 235, 0.3)",
+      "--glass-input-focus-bg": "rgba(255, 255, 255, 0.95)",
+      "--glass-table-header": "rgba(0, 0, 0, 0.03)",
+      "--glass-bar-track": "rgba(0, 0, 0, 0.10)",
+      "--nav-bg": "rgba(255, 255, 255, 0.8)",
+      "--nav-border": "rgba(0, 0, 0, 0.06)",
+      "--nav-active": "rgba(0, 0, 0, 0.05)",
+      "--nav-hover": "rgba(0, 0, 0, 0.03)",
+      "--accent-color": "#2563eb",
+      "--accent-glow": "rgba(37, 99, 235, 0.2)",
+      "--card-lift-shadow": "0 8px 40px rgba(0, 0, 0, 0.08), 0 0 40px rgba(37, 99, 235, 0.02)",
+      "--stat-glow": "0 0 20px rgba(37, 99, 235, 0.08)",
+      "--nav-active-glow": "0 2px 10px rgba(37, 99, 235, 0.15)",
+    },
+  },
+
+  // 3. Cyberpunk
+  {
+    name: "cyberpunk",
+    label: "Cyberpunk",
+    isDark: true,
+    swatch: ["#ec4899", "#06b6d4"],
+    bodyBg: "linear-gradient(135deg, #0a0a0f 0%, #0d0515 40%, #05080f 100%)",
+    bgGradient:
+      "radial-gradient(ellipse 140% 70% at 10% 10%, rgba(236, 72, 153, 0.38), transparent 50%), radial-gradient(ellipse 100% 90% at 90% 20%, rgba(6, 182, 212, 0.30), transparent 50%), radial-gradient(ellipse 120% 70% at 50% 95%, rgba(139, 92, 246, 0.22), transparent 50%), radial-gradient(ellipse 80% 50% at 30% 60%, rgba(6, 182, 212, 0.15), transparent 50%)",
+    vars: {
+      "--background": "260 30% 4%",
+      "--foreground": "185 10% 98%",
+      "--card": "270 30% 8% / 0.4",
+      "--card-foreground": "185 10% 98%",
+      "--popover": "270 30% 8% / 0.8",
+      "--popover-foreground": "185 20% 92%",
+      "--primary": "330 80% 60%",
+      "--primary-foreground": "185 20% 95%",
+      "--secondary": "270 30% 14% / 0.5",
+      "--secondary-foreground": "185 20% 92%",
+      "--muted": "270 30% 14% / 0.5",
+      "--muted-foreground": "200 15% 68%",
+      "--accent": "185 80% 45%",
+      "--accent-foreground": "185 20% 95%",
+      "--destructive": "330 80% 55%",
+      "--border": "0 0% 100% / 0.06",
+      "--input": "0 0% 100% / 0.06",
+      "--ring": "330 80% 60%",
+      "--card-bg": "rgba(25, 10, 35, 0.35)",
+      "--card-border": "rgba(236, 72, 153, 0.12)",
+      "--card-hover-bg": "rgba(25, 10, 35, 0.45)",
+      "--card-hover-border": "rgba(236, 72, 153, 0.2)",
+      "--glass-bg": "rgba(25, 10, 35, 0.30)",
+      "--glass-border": "rgba(236, 72, 153, 0.08)",
+      "--glass-hover": "rgba(236, 72, 153, 0.03)",
+      "--glass-input-bg": "rgba(255, 255, 255, 0.06)",
+      "--glass-input-border": "rgba(236, 72, 153, 0.1)",
+      "--glass-input-focus": "rgba(6, 182, 212, 0.3)",
+      "--glass-input-focus-bg": "rgba(255, 255, 255, 0.08)",
+      "--glass-table-header": "rgba(236, 72, 153, 0.08)",
+      "--glass-bar-track": "rgba(255, 255, 255, 0.10)",
+      "--nav-bg": "rgba(10, 10, 15, 0.65)",
+      "--nav-border": "rgba(236, 72, 153, 0.08)",
+      "--nav-active": "rgba(236, 72, 153, 0.08)",
+      "--nav-hover": "rgba(236, 72, 153, 0.04)",
+      "--accent-color": "#ec4899",
+      "--accent-glow": "rgba(236, 72, 153, 0.3)",
+      "--card-lift-shadow": "0 8px 40px rgba(0, 0, 0, 0.3), 0 0 40px rgba(236, 72, 153, 0.06)",
+      "--stat-glow": "0 0 20px rgba(6, 182, 212, 0.15)",
+      "--nav-active-glow": "0 2px 10px rgba(236, 72, 153, 0.3)",
+    },
+  },
+
+  // 4. Steampunk
+  {
+    name: "steampunk",
+    label: "Steampunk",
+    isDark: true,
+    swatch: ["#d4a76a", "#b87333"],
+    bodyBg: "linear-gradient(135deg, #0f0a07 0%, #12100b 40%, #0e0905 100%)",
+    bgGradient:
+      "radial-gradient(ellipse 140% 70% at 5% 5%, rgba(212, 167, 106, 0.30), transparent 50%), radial-gradient(ellipse 100% 90% at 90% 20%, rgba(184, 115, 51, 0.27), transparent 50%), radial-gradient(ellipse 120% 70% at 50% 95%, rgba(245, 158, 11, 0.22), transparent 50%), radial-gradient(ellipse 80% 50% at 30% 60%, rgba(184, 115, 51, 0.15), transparent 50%)",
+    vars: {
+      "--background": "30 30% 4%",
+      "--foreground": "40 20% 97%",
+      "--card": "30 25% 10% / 0.4",
+      "--card-foreground": "40 20% 97%",
+      "--popover": "30 25% 10% / 0.8",
+      "--popover-foreground": "40 30% 88%",
+      "--primary": "35 55% 62%",
+      "--primary-foreground": "30 40% 10%",
+      "--secondary": "30 20% 14% / 0.5",
+      "--secondary-foreground": "40 30% 88%",
+      "--muted": "30 20% 14% / 0.5",
+      "--muted-foreground": "35 15% 68%",
+      "--accent": "25 60% 46%",
+      "--accent-foreground": "40 30% 92%",
+      "--destructive": "15 70% 50%",
+      "--border": "35 30% 50% / 0.08",
+      "--input": "35 30% 50% / 0.06",
+      "--ring": "35 55% 62%",
+      "--card-bg": "rgba(30, 20, 12, 0.35)",
+      "--card-border": "rgba(212, 167, 106, 0.12)",
+      "--card-hover-bg": "rgba(30, 20, 12, 0.45)",
+      "--card-hover-border": "rgba(212, 167, 106, 0.22)",
+      "--glass-bg": "rgba(30, 20, 12, 0.30)",
+      "--glass-border": "rgba(212, 167, 106, 0.08)",
+      "--glass-hover": "rgba(212, 167, 106, 0.03)",
+      "--glass-input-bg": "rgba(212, 167, 106, 0.06)",
+      "--glass-input-border": "rgba(212, 167, 106, 0.1)",
+      "--glass-input-focus": "rgba(184, 115, 51, 0.3)",
+      "--glass-input-focus-bg": "rgba(212, 167, 106, 0.08)",
+      "--glass-table-header": "rgba(212, 167, 106, 0.08)",
+      "--glass-bar-track": "rgba(212, 167, 106, 0.10)",
+      "--nav-bg": "rgba(15, 10, 7, 0.65)",
+      "--nav-border": "rgba(212, 167, 106, 0.08)",
+      "--nav-active": "rgba(212, 167, 106, 0.08)",
+      "--nav-hover": "rgba(212, 167, 106, 0.04)",
+      "--accent-color": "#d4a76a",
+      "--accent-glow": "rgba(212, 167, 106, 0.3)",
+      "--card-lift-shadow": "0 8px 40px rgba(0, 0, 0, 0.3), 0 0 40px rgba(212, 167, 106, 0.04)",
+      "--stat-glow": "0 0 20px rgba(212, 167, 106, 0.15)",
+      "--nav-active-glow": "0 2px 10px rgba(212, 167, 106, 0.3)",
+    },
+  },
+
+  // 5. Portland
+  {
+    name: "portland",
+    label: "Portland",
+    isDark: true,
+    swatch: ["#15803d", "#0e7490"],
+    bodyBg: "linear-gradient(135deg, #060d08 0%, #081210 40%, #050b08 100%)",
+    bgGradient:
+      "radial-gradient(ellipse 140% 70% at 5% 5%, rgba(21, 128, 61, 0.30), transparent 50%), radial-gradient(ellipse 100% 90% at 90% 20%, rgba(14, 116, 144, 0.27), transparent 50%), radial-gradient(ellipse 120% 70% at 50% 95%, rgba(34, 197, 94, 0.22), transparent 50%), radial-gradient(ellipse 80% 50% at 30% 60%, rgba(14, 116, 144, 0.15), transparent 50%)",
+    vars: {
+      "--background": "140 25% 4%",
+      "--foreground": "140 10% 97%",
+      "--card": "150 20% 9% / 0.4",
+      "--card-foreground": "140 10% 97%",
+      "--popover": "150 20% 9% / 0.8",
+      "--popover-foreground": "140 15% 88%",
+      "--primary": "142 64% 36%",
+      "--primary-foreground": "140 20% 95%",
+      "--secondary": "150 18% 14% / 0.5",
+      "--secondary-foreground": "140 15% 88%",
+      "--muted": "150 18% 14% / 0.5",
+      "--muted-foreground": "150 10% 68%",
+      "--accent": "189 80% 32%",
+      "--accent-foreground": "140 20% 95%",
+      "--destructive": "25 80% 50%",
+      "--border": "140 20% 50% / 0.08",
+      "--input": "140 20% 50% / 0.06",
+      "--ring": "142 64% 36%",
+      "--card-bg": "rgba(10, 25, 15, 0.35)",
+      "--card-border": "rgba(21, 128, 61, 0.12)",
+      "--card-hover-bg": "rgba(10, 25, 15, 0.45)",
+      "--card-hover-border": "rgba(21, 128, 61, 0.22)",
+      "--glass-bg": "rgba(10, 25, 15, 0.30)",
+      "--glass-border": "rgba(21, 128, 61, 0.08)",
+      "--glass-hover": "rgba(21, 128, 61, 0.03)",
+      "--glass-input-bg": "rgba(21, 128, 61, 0.06)",
+      "--glass-input-border": "rgba(21, 128, 61, 0.1)",
+      "--glass-input-focus": "rgba(14, 116, 144, 0.3)",
+      "--glass-input-focus-bg": "rgba(21, 128, 61, 0.08)",
+      "--glass-table-header": "rgba(21, 128, 61, 0.08)",
+      "--glass-bar-track": "rgba(21, 128, 61, 0.10)",
+      "--nav-bg": "rgba(6, 13, 8, 0.65)",
+      "--nav-border": "rgba(21, 128, 61, 0.08)",
+      "--nav-active": "rgba(21, 128, 61, 0.08)",
+      "--nav-hover": "rgba(21, 128, 61, 0.04)",
+      "--accent-color": "#15803d",
+      "--accent-glow": "rgba(21, 128, 61, 0.3)",
+      "--card-lift-shadow": "0 8px 40px rgba(0, 0, 0, 0.3), 0 0 40px rgba(21, 128, 61, 0.04)",
+      "--stat-glow": "0 0 20px rgba(21, 128, 61, 0.15)",
+      "--nav-active-glow": "0 2px 10px rgba(21, 128, 61, 0.3)",
+    },
+  },
+
+  // 6. Racing
+  {
+    name: "racing",
+    label: "Racing",
+    isDark: true,
+    swatch: ["#dc2626", "#a1a1aa"],
+    bodyBg: "linear-gradient(135deg, #080808 0%, #0c0c0c 40%, #070707 100%)",
+    bgGradient:
+      "radial-gradient(ellipse 140% 70% at 5% 5%, rgba(220, 38, 38, 0.30), transparent 50%), radial-gradient(ellipse 100% 90% at 90% 20%, rgba(161, 161, 170, 0.22), transparent 50%), radial-gradient(ellipse 120% 70% at 50% 95%, rgba(220, 38, 38, 0.22), transparent 50%), radial-gradient(ellipse 80% 50% at 30% 60%, rgba(161, 161, 170, 0.15), transparent 50%)",
+    vars: {
+      "--background": "0 0% 4%",
+      "--foreground": "0 0% 98%",
+      "--card": "0 0% 9% / 0.4",
+      "--card-foreground": "0 0% 98%",
+      "--popover": "0 0% 9% / 0.8",
+      "--popover-foreground": "0 0% 93%",
+      "--primary": "0 72% 51%",
+      "--primary-foreground": "0 0% 98%",
+      "--secondary": "0 0% 14% / 0.5",
+      "--secondary-foreground": "0 0% 93%",
+      "--muted": "0 0% 14% / 0.5",
+      "--muted-foreground": "0 0% 68%",
+      "--accent": "0 0% 63%",
+      "--accent-foreground": "0 0% 93%",
+      "--destructive": "0 72% 51%",
+      "--border": "0 0% 100% / 0.06",
+      "--input": "0 0% 100% / 0.06",
+      "--ring": "0 72% 51%",
+      "--card-bg": "rgba(20, 18, 20, 0.35)",
+      "--card-border": "rgba(220, 38, 38, 0.12)",
+      "--card-hover-bg": "rgba(20, 18, 20, 0.45)",
+      "--card-hover-border": "rgba(220, 38, 38, 0.22)",
+      "--glass-bg": "rgba(20, 18, 20, 0.30)",
+      "--glass-border": "rgba(220, 38, 38, 0.08)",
+      "--glass-hover": "rgba(220, 38, 38, 0.03)",
+      "--glass-input-bg": "rgba(255, 255, 255, 0.06)",
+      "--glass-input-border": "rgba(255, 255, 255, 0.1)",
+      "--glass-input-focus": "rgba(220, 38, 38, 0.3)",
+      "--glass-input-focus-bg": "rgba(255, 255, 255, 0.08)",
+      "--glass-table-header": "rgba(255, 255, 255, 0.08)",
+      "--glass-bar-track": "rgba(255, 255, 255, 0.10)",
+      "--nav-bg": "rgba(8, 8, 8, 0.65)",
+      "--nav-border": "rgba(220, 38, 38, 0.08)",
+      "--nav-active": "rgba(220, 38, 38, 0.08)",
+      "--nav-hover": "rgba(220, 38, 38, 0.04)",
+      "--accent-color": "#dc2626",
+      "--accent-glow": "rgba(220, 38, 38, 0.3)",
+      "--card-lift-shadow": "0 8px 40px rgba(0, 0, 0, 0.3), 0 0 40px rgba(220, 38, 38, 0.04)",
+      "--stat-glow": "0 0 20px rgba(220, 38, 38, 0.15)",
+      "--nav-active-glow": "0 2px 10px rgba(220, 38, 38, 0.3)",
+    },
+  },
+
+  // 7. Ocean
+  {
+    name: "ocean",
+    label: "Ocean",
+    isDark: true,
+    swatch: ["#0284c7", "#2dd4bf"],
+    bodyBg: "linear-gradient(135deg, #030712 0%, #0a1628 40%, #041020 100%)",
+    bgGradient:
+      "radial-gradient(ellipse 140% 70% at 5% 5%, rgba(2, 132, 199, 0.30), transparent 50%), radial-gradient(ellipse 100% 90% at 90% 20%, rgba(45, 212, 191, 0.27), transparent 50%), radial-gradient(ellipse 120% 70% at 50% 95%, rgba(2, 132, 199, 0.22), transparent 50%), radial-gradient(ellipse 80% 50% at 30% 60%, rgba(45, 212, 191, 0.15), transparent 50%)",
+    vars: {
+      "--background": "220 50% 4%",
+      "--foreground": "200 10% 98%",
+      "--card": "215 40% 9% / 0.4",
+      "--card-foreground": "200 10% 98%",
+      "--popover": "215 40% 9% / 0.8",
+      "--popover-foreground": "200 20% 90%",
+      "--primary": "200 80% 44%",
+      "--primary-foreground": "200 20% 95%",
+      "--secondary": "210 30% 14% / 0.5",
+      "--secondary-foreground": "200 20% 90%",
+      "--muted": "210 30% 14% / 0.5",
+      "--muted-foreground": "200 15% 68%",
+      "--accent": "170 70% 50%",
+      "--accent-foreground": "200 20% 95%",
+      "--destructive": "10 70% 55%",
+      "--border": "200 30% 50% / 0.08",
+      "--input": "200 30% 50% / 0.06",
+      "--ring": "200 80% 44%",
+      "--card-bg": "rgba(8, 15, 30, 0.35)",
+      "--card-border": "rgba(2, 132, 199, 0.12)",
+      "--card-hover-bg": "rgba(8, 15, 30, 0.45)",
+      "--card-hover-border": "rgba(2, 132, 199, 0.22)",
+      "--glass-bg": "rgba(8, 15, 30, 0.30)",
+      "--glass-border": "rgba(2, 132, 199, 0.08)",
+      "--glass-hover": "rgba(2, 132, 199, 0.03)",
+      "--glass-input-bg": "rgba(2, 132, 199, 0.06)",
+      "--glass-input-border": "rgba(2, 132, 199, 0.1)",
+      "--glass-input-focus": "rgba(45, 212, 191, 0.3)",
+      "--glass-input-focus-bg": "rgba(2, 132, 199, 0.08)",
+      "--glass-table-header": "rgba(2, 132, 199, 0.08)",
+      "--glass-bar-track": "rgba(2, 132, 199, 0.10)",
+      "--nav-bg": "rgba(3, 7, 18, 0.65)",
+      "--nav-border": "rgba(2, 132, 199, 0.08)",
+      "--nav-active": "rgba(2, 132, 199, 0.08)",
+      "--nav-hover": "rgba(2, 132, 199, 0.04)",
+      "--accent-color": "#0284c7",
+      "--accent-glow": "rgba(2, 132, 199, 0.3)",
+      "--card-lift-shadow": "0 8px 40px rgba(0, 0, 0, 0.3), 0 0 40px rgba(2, 132, 199, 0.04)",
+      "--stat-glow": "0 0 20px rgba(45, 212, 191, 0.15)",
+      "--nav-active-glow": "0 2px 10px rgba(2, 132, 199, 0.3)",
+    },
+  },
+
+  // 8. Aurora
+  {
+    name: "aurora",
+    label: "Aurora",
+    isDark: true,
+    swatch: ["#4ade80", "#a78bfa"],
+    bodyBg: "linear-gradient(135deg, #050510 0%, #080818 40%, #050510 100%)",
+    bgGradient:
+      "radial-gradient(ellipse 140% 70% at 5% 5%, rgba(74, 222, 128, 0.30), transparent 50%), radial-gradient(ellipse 100% 90% at 90% 20%, rgba(167, 139, 250, 0.27), transparent 50%), radial-gradient(ellipse 120% 70% at 50% 95%, rgba(56, 189, 248, 0.22), transparent 50%), radial-gradient(ellipse 80% 50% at 30% 60%, rgba(74, 222, 128, 0.18), transparent 50%)",
+    vars: {
+      "--background": "240 33% 4%",
+      "--foreground": "220 15% 88%",
+      "--card": "240 25% 9% / 0.4",
+      "--card-foreground": "220 15% 88%",
+      "--popover": "240 25% 9% / 0.8",
+      "--popover-foreground": "220 15% 88%",
+      "--primary": "142 70% 58%",
+      "--primary-foreground": "240 20% 8%",
+      "--secondary": "240 20% 14% / 0.5",
+      "--secondary-foreground": "220 15% 88%",
+      "--muted": "240 20% 14% / 0.5",
+      "--muted-foreground": "230 12% 62%",
+      "--accent": "263 70% 72%",
+      "--accent-foreground": "220 15% 95%",
+      "--destructive": "45 90% 55%",
+      "--border": "260 20% 60% / 0.08",
+      "--input": "260 20% 60% / 0.06",
+      "--ring": "142 70% 58%",
+      "--card-bg": "rgba(12, 10, 25, 0.35)",
+      "--card-border": "rgba(167, 139, 250, 0.12)",
+      "--card-hover-bg": "rgba(12, 10, 25, 0.45)",
+      "--card-hover-border": "rgba(167, 139, 250, 0.22)",
+      "--glass-bg": "rgba(12, 10, 25, 0.30)",
+      "--glass-border": "rgba(167, 139, 250, 0.08)",
+      "--glass-hover": "rgba(74, 222, 128, 0.03)",
+      "--glass-input-bg": "rgba(167, 139, 250, 0.06)",
+      "--glass-input-border": "rgba(167, 139, 250, 0.1)",
+      "--glass-input-focus": "rgba(74, 222, 128, 0.3)",
+      "--glass-input-focus-bg": "rgba(167, 139, 250, 0.08)",
+      "--glass-table-header": "rgba(167, 139, 250, 0.08)",
+      "--glass-bar-track": "rgba(167, 139, 250, 0.10)",
+      "--nav-bg": "rgba(5, 5, 16, 0.65)",
+      "--nav-border": "rgba(167, 139, 250, 0.08)",
+      "--nav-active": "rgba(74, 222, 128, 0.06)",
+      "--nav-hover": "rgba(167, 139, 250, 0.04)",
+      "--accent-color": "#4ade80",
+      "--accent-glow": "rgba(74, 222, 128, 0.3)",
+      "--card-lift-shadow": "0 8px 40px rgba(0, 0, 0, 0.3), 0 0 40px rgba(167, 139, 250, 0.04)",
+      "--stat-glow": "0 0 20px rgba(74, 222, 128, 0.15)",
+      "--nav-active-glow": "0 2px 10px rgba(74, 222, 128, 0.3)",
+    },
+  },
+
+  // 9. Sakura
+  {
+    name: "sakura",
+    label: "Sakura",
+    isDark: true,
+    swatch: ["#f472b6", "#fda4af"],
+    bodyBg: "linear-gradient(135deg, #0a0508 0%, #100810 40%, #0a0508 100%)",
+    bgGradient:
+      "radial-gradient(ellipse 140% 70% at 5% 5%, rgba(244, 114, 182, 0.35), transparent 50%), radial-gradient(ellipse 100% 90% at 95% 15%, rgba(253, 164, 175, 0.28), transparent 50%), radial-gradient(ellipse 120% 70% at 50% 105%, rgba(251, 113, 133, 0.22), transparent 50%), radial-gradient(ellipse 80% 50% at 75% 55%, rgba(244, 114, 182, 0.15), transparent 50%)",
+    vars: {
+      "--background": "330 30% 4%",
+      "--foreground": "340 15% 95%",
+      "--card": "330 25% 9% / 0.4",
+      "--card-foreground": "340 15% 95%",
+      "--popover": "330 25% 9% / 0.8",
+      "--popover-foreground": "340 15% 90%",
+      "--primary": "330 70% 65%",
+      "--primary-foreground": "330 20% 10%",
+      "--secondary": "330 20% 14% / 0.5",
+      "--secondary-foreground": "340 15% 90%",
+      "--muted": "330 20% 14% / 0.5",
+      "--muted-foreground": "330 12% 65%",
+      "--accent": "350 65% 70%",
+      "--accent-foreground": "340 15% 95%",
+      "--destructive": "0 84% 60%",
+      "--border": "330 20% 60% / 0.08",
+      "--input": "330 20% 60% / 0.06",
+      "--ring": "330 70% 65%",
+      "--chart-1": "330 70% 65%",
+      "--chart-2": "350 65% 70%",
+      "--chart-3": "310 60% 55%",
+      "--chart-4": "0 60% 65%",
+      "--chart-5": "340 75% 55%",
+      "--sidebar": "330 25% 6%",
+      "--sidebar-foreground": "340 15% 90%",
+      "--sidebar-primary": "330 70% 65%",
+      "--sidebar-primary-foreground": "340 15% 90%",
+      "--sidebar-accent": "330 20% 12%",
+      "--sidebar-accent-foreground": "340 15% 90%",
+      "--sidebar-border": "330 20% 60% / 0.06",
+      "--sidebar-ring": "330 70% 65%",
+      "--card-bg": "rgba(25, 10, 15, 0.35)",
+      "--card-border": "rgba(244, 114, 182, 0.12)",
+      "--card-hover-bg": "rgba(25, 10, 15, 0.45)",
+      "--card-hover-border": "rgba(244, 114, 182, 0.22)",
+      "--glass-bg": "rgba(25, 10, 15, 0.30)",
+      "--glass-border": "rgba(244, 114, 182, 0.08)",
+      "--glass-hover": "rgba(244, 114, 182, 0.03)",
+      "--glass-input-bg": "rgba(244, 114, 182, 0.06)",
+      "--glass-input-border": "rgba(244, 114, 182, 0.1)",
+      "--glass-input-focus": "rgba(253, 164, 175, 0.3)",
+      "--glass-input-focus-bg": "rgba(244, 114, 182, 0.08)",
+      "--glass-table-header": "rgba(244, 114, 182, 0.08)",
+      "--glass-bar-track": "rgba(244, 114, 182, 0.10)",
+      "--nav-bg": "rgba(10, 5, 8, 0.65)",
+      "--nav-border": "rgba(244, 114, 182, 0.08)",
+      "--nav-active": "rgba(244, 114, 182, 0.08)",
+      "--nav-hover": "rgba(244, 114, 182, 0.04)",
+      "--accent-color": "#f472b6",
+      "--accent-glow": "rgba(244, 114, 182, 0.3)",
+      "--card-lift-shadow": "0 8px 40px rgba(0, 0, 0, 0.3), 0 0 40px rgba(244, 114, 182, 0.06)",
+      "--stat-glow": "0 0 20px rgba(244, 114, 182, 0.15)",
+      "--nav-active-glow": "0 2px 10px rgba(244, 114, 182, 0.3)",
+    },
+  },
+
+  // 10. Emerald
+  {
+    name: "emerald",
+    label: "Emerald",
+    isDark: true,
+    swatch: ["#34d399", "#059669"],
+    bodyBg: "linear-gradient(135deg, #040a06 0%, #061008 40%, #040a06 100%)",
+    bgGradient:
+      "radial-gradient(ellipse 140% 70% at 5% 5%, rgba(52, 211, 153, 0.35), transparent 50%), radial-gradient(ellipse 100% 90% at 95% 15%, rgba(5, 150, 105, 0.28), transparent 50%), radial-gradient(ellipse 120% 70% at 50% 105%, rgba(16, 185, 129, 0.22), transparent 50%), radial-gradient(ellipse 80% 50% at 75% 55%, rgba(52, 211, 153, 0.15), transparent 50%)",
+    vars: {
+      "--background": "155 40% 3%",
+      "--foreground": "155 15% 95%",
+      "--card": "155 30% 8% / 0.4",
+      "--card-foreground": "155 15% 95%",
+      "--popover": "155 30% 8% / 0.8",
+      "--popover-foreground": "155 15% 90%",
+      "--primary": "160 60% 52%",
+      "--primary-foreground": "155 40% 8%",
+      "--secondary": "155 25% 14% / 0.5",
+      "--secondary-foreground": "155 15% 90%",
+      "--muted": "155 25% 14% / 0.5",
+      "--muted-foreground": "155 12% 62%",
+      "--accent": "160 84% 39%",
+      "--accent-foreground": "155 15% 95%",
+      "--destructive": "0 84% 60%",
+      "--border": "155 25% 50% / 0.08",
+      "--input": "155 25% 50% / 0.06",
+      "--ring": "160 60% 52%",
+      "--chart-1": "160 60% 52%",
+      "--chart-2": "170 70% 45%",
+      "--chart-3": "145 55% 50%",
+      "--chart-4": "180 60% 40%",
+      "--chart-5": "140 70% 55%",
+      "--sidebar": "155 30% 5%",
+      "--sidebar-foreground": "155 15% 90%",
+      "--sidebar-primary": "160 60% 52%",
+      "--sidebar-primary-foreground": "155 15% 90%",
+      "--sidebar-accent": "155 25% 12%",
+      "--sidebar-accent-foreground": "155 15% 90%",
+      "--sidebar-border": "155 25% 50% / 0.06",
+      "--sidebar-ring": "160 60% 52%",
+      "--card-bg": "rgba(8, 25, 15, 0.35)",
+      "--card-border": "rgba(52, 211, 153, 0.12)",
+      "--card-hover-bg": "rgba(8, 25, 15, 0.45)",
+      "--card-hover-border": "rgba(52, 211, 153, 0.22)",
+      "--glass-bg": "rgba(8, 25, 15, 0.30)",
+      "--glass-border": "rgba(52, 211, 153, 0.08)",
+      "--glass-hover": "rgba(52, 211, 153, 0.03)",
+      "--glass-input-bg": "rgba(52, 211, 153, 0.06)",
+      "--glass-input-border": "rgba(52, 211, 153, 0.1)",
+      "--glass-input-focus": "rgba(5, 150, 105, 0.3)",
+      "--glass-input-focus-bg": "rgba(52, 211, 153, 0.08)",
+      "--glass-table-header": "rgba(52, 211, 153, 0.08)",
+      "--glass-bar-track": "rgba(52, 211, 153, 0.10)",
+      "--nav-bg": "rgba(4, 10, 6, 0.65)",
+      "--nav-border": "rgba(52, 211, 153, 0.08)",
+      "--nav-active": "rgba(52, 211, 153, 0.08)",
+      "--nav-hover": "rgba(52, 211, 153, 0.04)",
+      "--accent-color": "#34d399",
+      "--accent-glow": "rgba(52, 211, 153, 0.3)",
+      "--card-lift-shadow": "0 8px 40px rgba(0, 0, 0, 0.3), 0 0 40px rgba(52, 211, 153, 0.06)",
+      "--stat-glow": "0 0 20px rgba(52, 211, 153, 0.15)",
+      "--nav-active-glow": "0 2px 10px rgba(52, 211, 153, 0.3)",
+    },
+  },
+
+  // 11. Sunset
+  {
+    name: "sunset",
+    label: "Sunset",
+    isDark: true,
+    swatch: ["#f97316", "#dc2626"],
+    bodyBg: "linear-gradient(135deg, #0a0604 0%, #100a06 40%, #0a0604 100%)",
+    bgGradient:
+      "radial-gradient(ellipse 140% 70% at 5% 5%, rgba(249, 115, 22, 0.35), transparent 50%), radial-gradient(ellipse 100% 90% at 95% 15%, rgba(220, 38, 38, 0.28), transparent 50%), radial-gradient(ellipse 120% 70% at 50% 105%, rgba(245, 158, 11, 0.22), transparent 50%), radial-gradient(ellipse 80% 50% at 75% 55%, rgba(249, 115, 22, 0.15), transparent 50%)",
+    vars: {
+      "--background": "20 35% 3%",
+      "--foreground": "25 15% 95%",
+      "--card": "20 30% 9% / 0.4",
+      "--card-foreground": "25 15% 95%",
+      "--popover": "20 30% 9% / 0.8",
+      "--popover-foreground": "25 15% 90%",
+      "--primary": "25 95% 53%",
+      "--primary-foreground": "25 30% 8%",
+      "--secondary": "20 25% 14% / 0.5",
+      "--secondary-foreground": "25 15% 90%",
+      "--muted": "20 25% 14% / 0.5",
+      "--muted-foreground": "20 12% 62%",
+      "--accent": "0 72% 51%",
+      "--accent-foreground": "25 15% 95%",
+      "--destructive": "0 84% 60%",
+      "--border": "20 25% 50% / 0.08",
+      "--input": "20 25% 50% / 0.06",
+      "--ring": "25 95% 53%",
+      "--chart-1": "25 95% 53%",
+      "--chart-2": "0 72% 51%",
+      "--chart-3": "40 90% 55%",
+      "--chart-4": "15 80% 50%",
+      "--chart-5": "350 75% 55%",
+      "--sidebar": "20 30% 5%",
+      "--sidebar-foreground": "25 15% 90%",
+      "--sidebar-primary": "25 95% 53%",
+      "--sidebar-primary-foreground": "25 15% 90%",
+      "--sidebar-accent": "20 25% 12%",
+      "--sidebar-accent-foreground": "25 15% 90%",
+      "--sidebar-border": "20 25% 50% / 0.06",
+      "--sidebar-ring": "25 95% 53%",
+      "--card-bg": "rgba(25, 15, 8, 0.35)",
+      "--card-border": "rgba(249, 115, 22, 0.12)",
+      "--card-hover-bg": "rgba(25, 15, 8, 0.45)",
+      "--card-hover-border": "rgba(249, 115, 22, 0.22)",
+      "--glass-bg": "rgba(25, 15, 8, 0.30)",
+      "--glass-border": "rgba(249, 115, 22, 0.08)",
+      "--glass-hover": "rgba(249, 115, 22, 0.03)",
+      "--glass-input-bg": "rgba(249, 115, 22, 0.06)",
+      "--glass-input-border": "rgba(249, 115, 22, 0.1)",
+      "--glass-input-focus": "rgba(220, 38, 38, 0.3)",
+      "--glass-input-focus-bg": "rgba(249, 115, 22, 0.08)",
+      "--glass-table-header": "rgba(249, 115, 22, 0.08)",
+      "--glass-bar-track": "rgba(249, 115, 22, 0.10)",
+      "--nav-bg": "rgba(10, 6, 4, 0.65)",
+      "--nav-border": "rgba(249, 115, 22, 0.08)",
+      "--nav-active": "rgba(249, 115, 22, 0.08)",
+      "--nav-hover": "rgba(249, 115, 22, 0.04)",
+      "--accent-color": "#f97316",
+      "--accent-glow": "rgba(249, 115, 22, 0.3)",
+      "--card-lift-shadow": "0 8px 40px rgba(0, 0, 0, 0.3), 0 0 40px rgba(249, 115, 22, 0.06)",
+      "--stat-glow": "0 0 20px rgba(249, 115, 22, 0.15)",
+      "--nav-active-glow": "0 2px 10px rgba(249, 115, 22, 0.3)",
+    },
+  },
+
+  // 12. Arctic
+  {
+    name: "arctic",
+    label: "Arctic",
+    isDark: true,
+    swatch: ["#38bdf8", "#e0f2fe"],
+    bodyBg: "linear-gradient(135deg, #040810 0%, #061018 40%, #040810 100%)",
+    bgGradient:
+      "radial-gradient(ellipse 140% 70% at 5% 5%, rgba(56, 189, 248, 0.40), transparent 50%), radial-gradient(ellipse 100% 90% at 95% 15%, rgba(224, 242, 254, 0.25), transparent 50%), radial-gradient(ellipse 120% 70% at 50% 105%, rgba(56, 189, 248, 0.28), transparent 50%), radial-gradient(ellipse 80% 50% at 75% 55%, rgba(125, 211, 252, 0.18), transparent 50%)",
+    vars: {
+      "--background": "215 50% 4%",
+      "--foreground": "210 20% 96%",
+      "--card": "215 40% 9% / 0.4",
+      "--card-foreground": "210 20% 96%",
+      "--popover": "215 40% 9% / 0.8",
+      "--popover-foreground": "210 20% 92%",
+      "--primary": "199 89% 56%",
+      "--primary-foreground": "215 50% 8%",
+      "--secondary": "215 30% 14% / 0.5",
+      "--secondary-foreground": "210 20% 92%",
+      "--muted": "215 30% 14% / 0.5",
+      "--muted-foreground": "210 15% 62%",
+      "--accent": "204 94% 94%",
+      "--accent-foreground": "215 50% 8%",
+      "--destructive": "0 84% 60%",
+      "--border": "210 25% 60% / 0.08",
+      "--input": "210 25% 60% / 0.06",
+      "--ring": "199 89% 56%",
+      "--chart-1": "199 89% 56%",
+      "--chart-2": "190 80% 50%",
+      "--chart-3": "210 70% 60%",
+      "--chart-4": "185 70% 45%",
+      "--chart-5": "200 80% 65%",
+      "--sidebar": "215 40% 5%",
+      "--sidebar-foreground": "210 20% 92%",
+      "--sidebar-primary": "199 89% 56%",
+      "--sidebar-primary-foreground": "210 20% 92%",
+      "--sidebar-accent": "215 30% 12%",
+      "--sidebar-accent-foreground": "210 20% 92%",
+      "--sidebar-border": "210 25% 60% / 0.06",
+      "--sidebar-ring": "199 89% 56%",
+      "--card-bg": "rgba(8, 15, 30, 0.35)",
+      "--card-border": "rgba(56, 189, 248, 0.12)",
+      "--card-hover-bg": "rgba(8, 15, 30, 0.45)",
+      "--card-hover-border": "rgba(56, 189, 248, 0.22)",
+      "--glass-bg": "rgba(8, 15, 30, 0.30)",
+      "--glass-border": "rgba(56, 189, 248, 0.08)",
+      "--glass-hover": "rgba(56, 189, 248, 0.03)",
+      "--glass-input-bg": "rgba(56, 189, 248, 0.06)",
+      "--glass-input-border": "rgba(56, 189, 248, 0.1)",
+      "--glass-input-focus": "rgba(224, 242, 254, 0.3)",
+      "--glass-input-focus-bg": "rgba(56, 189, 248, 0.08)",
+      "--glass-table-header": "rgba(56, 189, 248, 0.08)",
+      "--glass-bar-track": "rgba(56, 189, 248, 0.10)",
+      "--nav-bg": "rgba(4, 8, 16, 0.65)",
+      "--nav-border": "rgba(56, 189, 248, 0.08)",
+      "--nav-active": "rgba(56, 189, 248, 0.08)",
+      "--nav-hover": "rgba(56, 189, 248, 0.04)",
+      "--accent-color": "#38bdf8",
+      "--accent-glow": "rgba(56, 189, 248, 0.3)",
+      "--card-lift-shadow": "0 8px 40px rgba(0, 0, 0, 0.3), 0 0 40px rgba(56, 189, 248, 0.06)",
+      "--stat-glow": "0 0 20px rgba(56, 189, 248, 0.15)",
+      "--nav-active-glow": "0 2px 10px rgba(56, 189, 248, 0.3)",
+    },
+  },
+  // 13. Crimson
+  {
+    name: "crimson",
+    label: "Crimson",
+    isDark: true,
+    swatch: ["#ef4444", "#1a1a1a"],
+    bodyBg: "linear-gradient(135deg, #080404 0%, #0c0606 40%, #080404 100%)",
+    bgGradient:
+      "radial-gradient(ellipse 140% 70% at 5% 5%, rgba(239, 68, 68, 0.30), transparent 50%), radial-gradient(ellipse 100% 90% at 95% 85%, rgba(185, 28, 28, 0.25), transparent 50%), radial-gradient(ellipse 80% 50% at 50% 50%, rgba(127, 29, 29, 0.15), transparent 50%)",
+    vars: {
+      "--background": "0 20% 3%",
+      "--foreground": "0 0% 98%",
+      "--card": "0 15% 9% / 0.4",
+      "--card-foreground": "0 0% 98%",
+      "--popover": "0 15% 9% / 0.8",
+      "--popover-foreground": "0 0% 93%",
+      "--primary": "0 84% 60%",
+      "--primary-foreground": "0 0% 98%",
+      "--secondary": "0 15% 14% / 0.5",
+      "--secondary-foreground": "0 0% 93%",
+      "--muted": "0 15% 14% / 0.5",
+      "--muted-foreground": "0 10% 68%",
+      "--accent": "0 84% 60%",
+      "--accent-foreground": "0 0% 98%",
+      "--destructive": "0 84% 60%",
+      "--border": "0 60% 40% / 0.12",
+      "--input": "0 60% 40% / 0.06",
+      "--ring": "0 84% 60%",
+      "--chart-1": "0 84% 60%",
+      "--chart-2": "350 70% 55%",
+      "--chart-3": "15 80% 50%",
+      "--chart-4": "330 60% 50%",
+      "--chart-5": "0 60% 45%",
+      "--sidebar": "0 15% 5%",
+      "--sidebar-foreground": "0 0% 93%",
+      "--sidebar-primary": "0 84% 60%",
+      "--sidebar-primary-foreground": "0 0% 93%",
+      "--sidebar-accent": "0 15% 12%",
+      "--sidebar-accent-foreground": "0 0% 93%",
+      "--sidebar-border": "0 60% 40% / 0.06",
+      "--sidebar-ring": "0 84% 60%",
+      "--card-bg": "rgba(25, 8, 8, 0.35)",
+      "--card-border": "rgba(239, 68, 68, 0.12)",
+      "--card-hover-bg": "rgba(25, 8, 8, 0.45)",
+      "--card-hover-border": "rgba(239, 68, 68, 0.22)",
+      "--glass-bg": "rgba(25, 8, 8, 0.30)",
+      "--glass-border": "rgba(239, 68, 68, 0.08)",
+      "--glass-hover": "rgba(239, 68, 68, 0.03)",
+      "--glass-input-bg": "rgba(239, 68, 68, 0.06)",
+      "--glass-input-border": "rgba(239, 68, 68, 0.1)",
+      "--glass-input-focus": "rgba(239, 68, 68, 0.3)",
+      "--glass-input-focus-bg": "rgba(239, 68, 68, 0.08)",
+      "--glass-table-header": "rgba(239, 68, 68, 0.08)",
+      "--glass-bar-track": "rgba(239, 68, 68, 0.10)",
+      "--nav-bg": "rgba(8, 4, 4, 0.65)",
+      "--nav-border": "rgba(239, 68, 68, 0.08)",
+      "--nav-active": "rgba(239, 68, 68, 0.08)",
+      "--nav-hover": "rgba(239, 68, 68, 0.04)",
+      "--accent-color": "#ef4444",
+      "--accent-glow": "rgba(239, 68, 68, 0.3)",
+      "--card-lift-shadow": "0 8px 40px rgba(0, 0, 0, 0.3), 0 0 40px rgba(239, 68, 68, 0.06)",
+      "--stat-glow": "0 0 20px rgba(239, 68, 68, 0.15)",
+      "--nav-active-glow": "0 2px 10px rgba(239, 68, 68, 0.3)",
+    },
+  },
+
+  // 14. Trinidad
+  {
+    name: "trinidad",
+    label: "Trinidad",
+    isDark: true,
+    swatch: ["#ef4444", "#fbbf24"],
+    bodyBg: "linear-gradient(135deg, #080604 0%, #0c0906 40%, #080604 100%)",
+    bgGradient:
+      "radial-gradient(ellipse 140% 70% at 5% 5%, rgba(239, 68, 68, 0.28), transparent 50%), radial-gradient(ellipse 100% 80% at 90% 30%, rgba(251, 191, 36, 0.22), transparent 50%), radial-gradient(ellipse 120% 60% at 50% 100%, rgba(239, 68, 68, 0.15), transparent 50%)",
+    vars: {
+      "--background": "30 20% 3%",
+      "--foreground": "40 20% 97%",
+      "--card": "30 18% 9% / 0.4",
+      "--card-foreground": "40 20% 97%",
+      "--popover": "30 18% 9% / 0.8",
+      "--popover-foreground": "40 20% 90%",
+      "--primary": "45 93% 58%",
+      "--primary-foreground": "30 30% 8%",
+      "--secondary": "30 18% 14% / 0.5",
+      "--secondary-foreground": "40 20% 90%",
+      "--muted": "30 18% 14% / 0.5",
+      "--muted-foreground": "35 15% 68%",
+      "--accent": "0 84% 60%",
+      "--accent-foreground": "40 20% 97%",
+      "--destructive": "0 84% 60%",
+      "--border": "35 40% 45% / 0.12",
+      "--input": "35 40% 45% / 0.06",
+      "--ring": "45 93% 58%",
+      "--chart-1": "45 93% 58%",
+      "--chart-2": "0 84% 60%",
+      "--chart-3": "30 80% 55%",
+      "--chart-4": "15 80% 50%",
+      "--chart-5": "50 90% 55%",
+      "--sidebar": "30 18% 5%",
+      "--sidebar-foreground": "40 20% 90%",
+      "--sidebar-primary": "45 93% 58%",
+      "--sidebar-primary-foreground": "40 20% 90%",
+      "--sidebar-accent": "30 18% 12%",
+      "--sidebar-accent-foreground": "40 20% 90%",
+      "--sidebar-border": "35 40% 45% / 0.06",
+      "--sidebar-ring": "45 93% 58%",
+      "--card-bg": "rgba(20, 12, 5, 0.35)",
+      "--card-border": "rgba(251, 191, 36, 0.12)",
+      "--card-hover-bg": "rgba(20, 12, 5, 0.45)",
+      "--card-hover-border": "rgba(251, 191, 36, 0.22)",
+      "--glass-bg": "rgba(20, 12, 5, 0.30)",
+      "--glass-border": "rgba(251, 191, 36, 0.08)",
+      "--glass-hover": "rgba(251, 191, 36, 0.03)",
+      "--glass-input-bg": "rgba(251, 191, 36, 0.06)",
+      "--glass-input-border": "rgba(251, 191, 36, 0.1)",
+      "--glass-input-focus": "rgba(239, 68, 68, 0.3)",
+      "--glass-input-focus-bg": "rgba(251, 191, 36, 0.08)",
+      "--glass-table-header": "rgba(251, 191, 36, 0.08)",
+      "--glass-bar-track": "rgba(251, 191, 36, 0.10)",
+      "--nav-bg": "rgba(8, 6, 4, 0.65)",
+      "--nav-border": "rgba(251, 191, 36, 0.08)",
+      "--nav-active": "rgba(251, 191, 36, 0.08)",
+      "--nav-hover": "rgba(251, 191, 36, 0.04)",
+      "--accent-color": "#fbbf24",
+      "--accent-glow": "rgba(251, 191, 36, 0.3)",
+      "--card-lift-shadow": "0 8px 40px rgba(0, 0, 0, 0.3), 0 0 40px rgba(251, 191, 36, 0.06)",
+      "--stat-glow": "0 0 20px rgba(251, 191, 36, 0.15)",
+      "--nav-active-glow": "0 2px 10px rgba(251, 191, 36, 0.3)",
+    },
+  },
+
+  // 15. Samurai
+  {
+    name: "samurai",
+    label: "Samurai",
+    isDark: true,
+    swatch: ["#dc2626", "#fafafa"],
+    bodyBg: "linear-gradient(135deg, #0a0808 0%, #0e0b0b 40%, #0a0808 100%)",
+    bgGradient:
+      "radial-gradient(ellipse 100% 80% at 20% 10%, rgba(220, 38, 38, 0.25), transparent 50%), radial-gradient(ellipse 80% 60% at 80% 80%, rgba(180, 83, 9, 0.15), transparent 50%), radial-gradient(ellipse 60% 40% at 50% 50%, rgba(255, 255, 255, 0.03), transparent 50%)",
+    vars: {
+      "--background": "0 10% 4%",
+      "--foreground": "0 0% 97%",
+      "--card": "0 8% 9% / 0.4",
+      "--card-foreground": "0 0% 97%",
+      "--popover": "0 8% 9% / 0.8",
+      "--popover-foreground": "0 0% 92%",
+      "--primary": "0 72% 51%",
+      "--primary-foreground": "0 0% 97%",
+      "--secondary": "0 8% 14% / 0.5",
+      "--secondary-foreground": "0 0% 92%",
+      "--muted": "0 8% 14% / 0.5",
+      "--muted-foreground": "0 5% 65%",
+      "--accent": "0 72% 51%",
+      "--accent-foreground": "0 0% 97%",
+      "--destructive": "0 72% 51%",
+      "--border": "0 10% 50% / 0.10",
+      "--input": "0 10% 50% / 0.06",
+      "--ring": "0 72% 51%",
+      "--chart-1": "0 72% 51%",
+      "--chart-2": "30 70% 40%",
+      "--chart-3": "350 60% 50%",
+      "--chart-4": "15 50% 45%",
+      "--chart-5": "0 50% 40%",
+      "--sidebar": "0 8% 5%",
+      "--sidebar-foreground": "0 0% 92%",
+      "--sidebar-primary": "0 72% 51%",
+      "--sidebar-primary-foreground": "0 0% 92%",
+      "--sidebar-accent": "0 8% 12%",
+      "--sidebar-accent-foreground": "0 0% 92%",
+      "--sidebar-border": "0 10% 50% / 0.06",
+      "--sidebar-ring": "0 72% 51%",
+      "--card-bg": "rgba(18, 10, 10, 0.35)",
+      "--card-border": "rgba(220, 38, 38, 0.10)",
+      "--card-hover-bg": "rgba(18, 10, 10, 0.45)",
+      "--card-hover-border": "rgba(220, 38, 38, 0.18)",
+      "--glass-bg": "rgba(18, 10, 10, 0.30)",
+      "--glass-border": "rgba(220, 38, 38, 0.06)",
+      "--glass-hover": "rgba(220, 38, 38, 0.03)",
+      "--glass-input-bg": "rgba(255, 255, 255, 0.06)",
+      "--glass-input-border": "rgba(255, 255, 255, 0.08)",
+      "--glass-input-focus": "rgba(220, 38, 38, 0.3)",
+      "--glass-input-focus-bg": "rgba(255, 255, 255, 0.08)",
+      "--glass-table-header": "rgba(255, 255, 255, 0.06)",
+      "--glass-bar-track": "rgba(255, 255, 255, 0.08)",
+      "--nav-bg": "rgba(10, 8, 8, 0.65)",
+      "--nav-border": "rgba(220, 38, 38, 0.06)",
+      "--nav-active": "rgba(220, 38, 38, 0.08)",
+      "--nav-hover": "rgba(220, 38, 38, 0.04)",
+      "--accent-color": "#dc2626",
+      "--accent-glow": "rgba(220, 38, 38, 0.2)",
+      "--card-lift-shadow": "0 8px 40px rgba(0, 0, 0, 0.35)",
+      "--stat-glow": "0 0 20px rgba(220, 38, 38, 0.12)",
+      "--nav-active-glow": "0 2px 10px rgba(220, 38, 38, 0.25)",
+    },
+  },
+
+  // 16. Supra
+  {
+    name: "supra",
+    label: "Supra",
+    isDark: true,
+    swatch: ["#f97316", "#18181b"],
+    bodyBg: "linear-gradient(135deg, #060606 0%, #0a0806 40%, #060606 100%)",
+    bgGradient:
+      "radial-gradient(ellipse 120% 60% at 10% 10%, rgba(249, 115, 22, 0.30), transparent 50%), radial-gradient(ellipse 80% 70% at 85% 70%, rgba(234, 88, 12, 0.20), transparent 50%), radial-gradient(ellipse 100% 40% at 50% 100%, rgba(249, 115, 22, 0.12), transparent 50%)",
+    vars: {
+      "--background": "24 10% 3%",
+      "--foreground": "24 10% 97%",
+      "--card": "24 8% 9% / 0.4",
+      "--card-foreground": "24 10% 97%",
+      "--popover": "24 8% 9% / 0.8",
+      "--popover-foreground": "24 10% 92%",
+      "--primary": "25 95% 53%",
+      "--primary-foreground": "24 20% 8%",
+      "--secondary": "24 10% 14% / 0.5",
+      "--secondary-foreground": "24 10% 92%",
+      "--muted": "24 10% 14% / 0.5",
+      "--muted-foreground": "24 10% 65%",
+      "--accent": "25 95% 53%",
+      "--accent-foreground": "24 10% 97%",
+      "--destructive": "0 84% 60%",
+      "--border": "25 40% 40% / 0.10",
+      "--input": "25 40% 40% / 0.06",
+      "--ring": "25 95% 53%",
+      "--chart-1": "25 95% 53%",
+      "--chart-2": "15 80% 50%",
+      "--chart-3": "35 90% 55%",
+      "--chart-4": "10 70% 45%",
+      "--chart-5": "30 85% 50%",
+      "--sidebar": "24 8% 5%",
+      "--sidebar-foreground": "24 10% 92%",
+      "--sidebar-primary": "25 95% 53%",
+      "--sidebar-primary-foreground": "24 10% 92%",
+      "--sidebar-accent": "24 10% 12%",
+      "--sidebar-accent-foreground": "24 10% 92%",
+      "--sidebar-border": "25 40% 40% / 0.06",
+      "--sidebar-ring": "25 95% 53%",
+      "--card-bg": "rgba(15, 10, 5, 0.35)",
+      "--card-border": "rgba(249, 115, 22, 0.12)",
+      "--card-hover-bg": "rgba(15, 10, 5, 0.45)",
+      "--card-hover-border": "rgba(249, 115, 22, 0.22)",
+      "--glass-bg": "rgba(15, 10, 5, 0.30)",
+      "--glass-border": "rgba(249, 115, 22, 0.08)",
+      "--glass-hover": "rgba(249, 115, 22, 0.03)",
+      "--glass-input-bg": "rgba(249, 115, 22, 0.06)",
+      "--glass-input-border": "rgba(249, 115, 22, 0.1)",
+      "--glass-input-focus": "rgba(249, 115, 22, 0.3)",
+      "--glass-input-focus-bg": "rgba(249, 115, 22, 0.08)",
+      "--glass-table-header": "rgba(249, 115, 22, 0.08)",
+      "--glass-bar-track": "rgba(249, 115, 22, 0.10)",
+      "--nav-bg": "rgba(6, 6, 6, 0.65)",
+      "--nav-border": "rgba(249, 115, 22, 0.08)",
+      "--nav-active": "rgba(249, 115, 22, 0.08)",
+      "--nav-hover": "rgba(249, 115, 22, 0.04)",
+      "--accent-color": "#f97316",
+      "--accent-glow": "rgba(249, 115, 22, 0.3)",
+      "--card-lift-shadow": "0 8px 40px rgba(0, 0, 0, 0.3), 0 0 40px rgba(249, 115, 22, 0.06)",
+      "--stat-glow": "0 0 20px rgba(249, 115, 22, 0.15)",
+      "--nav-active-glow": "0 2px 10px rgba(249, 115, 22, 0.3)",
+    },
+  },
+];
+
+export const DEFAULT_THEME = "midnight";
+
+export function getTheme(name: string): Theme {
+  return themes.find((t) => t.name === name) ?? themes[0];
+}

dashboard/ui/lib/types.ts

@@ -0,0 +1,151 @@
+// Types aligned with the actual API response from /api/stats/overview
+export interface OverviewStats {
+  containers: {
+    total: number;
+    running?: number;
+    endpoints?: Record<string, { total: number; running: number; error?: boolean }>;
+    by_endpoint?: Record<string, { total: number; running: number; error?: boolean }>;
+  };
+  gpu: {
+    available: boolean;
+    name?: string;
+    temp_c?: number;
+    // API may use either naming convention
+    power_w?: number;
+    power_draw_w?: number;
+    power_limit_w?: number;
+    vram_used_mb?: number;
+    vram_total_mb?: number;
+    memory_used_mb?: number;
+    memory_total_mb?: number;
+    utilization_pct?: number;
+  };
+  // API returns either a number or {gmail, dvish, proton, total}
+  emails_today?: number | Record<string, number>;
+  email_today?: number | Record<string, number>;
+  alerts?: number;
+  unhealthy_count?: number;
+  // API returns either an object or a boolean
+  ollama?: { available: boolean; url: string };
+  ollama_available?: boolean;
+  hosts_online?: number;
+}
+
+export interface ActivityEvent {
+  type: string;
+  timestamp: string;
+  source: string;
+  raw: string;
+  [key: string]: unknown;
+}
+
+export interface Container {
+  id: string;
+  name: string;
+  image: string;
+  state: string;
+  status: string;
+  endpoint: string;
+  error?: string;
+}
+
+export interface JellyfinStatus {
+  version: string;
+  server_name: string;
+  libraries: { name: string; type: string; paths: string[] }[];
+  active_sessions: {
+    user: string;
+    device: string;
+    client: string;
+    title: string;
+    type: string;
+  }[];
+  idle_sessions: number;
+}
+
+export interface EmailStats {
+  accounts: {
+    account: string;
+    today: number;
+    categories: Record<string, number>;
+  }[];
+  sender_cache: Record<string, number>;
+}
+
+export interface ExpenseSummary {
+  month: string;
+  total: number;
+  count: number;
+  top_vendors: { vendor: string; amount: number }[];
+}
+
+export interface HealthScore {
+  score: number;
+  grade: string;
+  details: { name: string; score: number; max: number; status: string }[];
+}
+
+export interface KumaMonitor {
+  id: number;
+  name: string;
+  url?: string;
+  type: string;
+  active: boolean;
+  status: boolean; // true = up
+  parent?: number;
+}
+
+export interface KumaStats {
+  monitors: KumaMonitor[];
+  total: number;
+  up: number;
+  down: number;
+}
+
+export interface JellyfinLatestItem {
+  name: string;
+  type: string;
+  series?: string;
+  date: string;
+  year?: number;
+}
+
+export interface ArrHistoryItem {
+  title: string;
+  event: string;
+  date: string;
+  quality: string;
+}
+
+export interface CloudflareStats {
+  total: number;
+  proxied: number;
+  dns_only: number;
+  types: Record<string, number>;
+}
+
+export interface AuthentikStats {
+  active_sessions: number;
+  users?: { username: string; last_login: string; active: boolean }[];
+  sessions?: { user: string; last_used?: string }[];
+  recent_events?: { action: string; user?: string; created?: string; timestamp?: string }[];
+}
+
+export interface GiteaActivity {
+  commits: { sha: string; message: string; author: string; date: string }[];
+  open_prs: { title: string; number: number; author: string }[];
+}
+
+export interface AutomationTimelineEntry {
+  name: string;
+  last_run: string;
+  exists: boolean;
+}
+
+export interface DiskUsageEntry {
+  host: string;
+  mount: string;
+  total_gb: number;
+  avail_gb: number;
+  used_pct: number;
+}

dashboard/ui/lib/use-poll.ts

@@ -0,0 +1,9 @@
+import useSWR from "swr";
+import { fetchAPI } from "./api";
+
+export function usePoll<T>(path: string, interval: number = 60000) {
+  return useSWR<T>(path, () => fetchAPI<T>(path), {
+    refreshInterval: interval,
+    revalidateOnFocus: false,
+  });
+}

dashboard/ui/lib/use-sse.ts

@@ -0,0 +1,52 @@
+"use client";
+
+import { useState, useEffect, useRef } from "react";
+import type { ActivityEvent } from "./types";
+
+// Use same origin — Next.js rewrites /api/* to backend
+
+export function useSSE(path: string, maxEvents: number = 30) {
+  const [events, setEvents] = useState<ActivityEvent[]>([]);
+  const retryTimeout = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+  useEffect(() => {
+    let es: EventSource | null = null;
+
+    function connect() {
+      es = new EventSource(path);
+
+      // Backend sends "init" with the full batch and "update" with new events
+      es.addEventListener("init", (e: MessageEvent) => {
+        try {
+          const batch: ActivityEvent[] = JSON.parse(e.data);
+          setEvents(batch.slice(0, maxEvents));
+        } catch {
+          // ignore malformed events
+        }
+      });
+
+      es.addEventListener("update", (e: MessageEvent) => {
+        try {
+          const batch: ActivityEvent[] = JSON.parse(e.data);
+          setEvents((prev) => [...batch, ...prev].slice(0, maxEvents));
+        } catch {
+          // ignore malformed events
+        }
+      });
+
+      es.onerror = () => {
+        es?.close();
+        retryTimeout.current = setTimeout(connect, 5000);
+      };
+    }
+
+    connect();
+
+    return () => {
+      es?.close();
+      if (retryTimeout.current) clearTimeout(retryTimeout.current);
+    };
+  }, [path, maxEvents]);
+
+  return events;
+}

dashboard/ui/lib/utils.ts

@@ -0,0 +1,6 @@
+import { clsx, type ClassValue } from "clsx"
+import { twMerge } from "tailwind-merge"
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs))
+}

dashboard/ui/next.config.ts

@@ -0,0 +1,16 @@
+import type { NextConfig } from "next";
+
+const nextConfig: NextConfig = {
+  output: "standalone",
+  async rewrites() {
+    const backend = process.env.BACKEND_URL || "http://localhost:18888";
+    return [
+      {
+        source: "/api/:path*",
+        destination: `${backend}/api/:path*`,
+      },
+    ];
+  },
+};
+
+export default nextConfig;

dashboard/ui/package.json

@@ -0,0 +1,34 @@
+{
+  "name": "ui",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start",
+    "lint": "eslint"
+  },
+  "dependencies": {
+    "@base-ui/react": "^1.3.0",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "lucide-react": "^1.7.0",
+    "next": "16.2.2",
+    "react": "19.2.4",
+    "react-dom": "19.2.4",
+    "shadcn": "^4.1.2",
+    "swr": "^2.4.1",
+    "tailwind-merge": "^3.5.0",
+    "tw-animate-css": "^1.4.0"
+  },
+  "devDependencies": {
+    "@tailwindcss/postcss": "^4",
+    "@types/node": "^20",
+    "@types/react": "^19",
+    "@types/react-dom": "^19",
+    "eslint": "^9",
+    "eslint-config-next": "16.2.2",
+    "tailwindcss": "^4",
+    "typescript": "^5"
+  }
+}

dashboard/ui/postcss.config.mjs

@@ -0,0 +1,7 @@
+const config = {
+  plugins: {
+    "@tailwindcss/postcss": {},
+  },
+};
+
+export default config;

dashboard/ui/public/favicon.svg

@@ -0,0 +1,11 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
+  <defs>
+    <linearGradient id="g" x1="0" y1="0" x2="1" y2="1">
+      <stop offset="0%" stop-color="#3b82f6"/>
+      <stop offset="50%" stop-color="#8b5cf6"/>
+      <stop offset="100%" stop-color="#ec4899"/>
+    </linearGradient>
+  </defs>
+  <rect width="32" height="32" rx="8" fill="url(#g)"/>
+  <text x="16" y="22" text-anchor="middle" font-family="sans-serif" font-size="18" font-weight="bold" fill="white">H</text>
+</svg>

dashboard/ui/public/file.svg

@@ -0,0 +1 @@
+<svg fill="none" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path d="M14.5 13.5V5.41a1 1 0 0 0-.3-.7L9.8.29A1 1 0 0 0 9.08 0H1.5v13.5A2.5 2.5 0 0 0 4 16h8a2.5 2.5 0 0 0 2.5-2.5m-1.5 0v-7H8v-5H3v12a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1M9.5 5V2.12L12.38 5zM5.13 5h-.62v1.25h2.12V5zm-.62 3h7.12v1.25H4.5zm.62 3h-.62v1.25h7.12V11z" clip-rule="evenodd" fill="#666" fill-rule="evenodd"/></svg>

dashboard/ui/public/globe.svg

@@ -0,0 +1 @@
+<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><g clip-path="url(#a)"><path fill-rule="evenodd" clip-rule="evenodd" d="M10.27 14.1a6.5 6.5 0 0 0 3.67-3.45q-1.24.21-2.7.34-.31 1.83-.97 3.1M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16m.48-1.52a7 7 0 0 1-.96 0H7.5a4 4 0 0 1-.84-1.32q-.38-.89-.63-2.08a40 40 0 0 0 3.92 0q-.25 1.2-.63 2.08a4 4 0 0 1-.84 1.31zm2.94-4.76q1.66-.15 2.95-.43a7 7 0 0 0 0-2.58q-1.3-.27-2.95-.43a18 18 0 0 1 0 3.44m-1.27-3.54a17 17 0 0 1 0 3.64 39 39 0 0 1-4.3 0 17 17 0 0 1 0-3.64 39 39 0 0 1 4.3 0m1.1-1.17q1.45.13 2.69.34a6.5 6.5 0 0 0-3.67-3.44q.65 1.26.98 3.1M8.48 1.5l.01.02q.41.37.84 1.31.38.89.63 2.08a40 40 0 0 0-3.92 0q.25-1.2.63-2.08a4 4 0 0 1 .85-1.32 7 7 0 0 1 .96 0m-2.75.4a6.5 6.5 0 0 0-3.67 3.44 29 29 0 0 1 2.7-.34q.31-1.83.97-3.1M4.58 6.28q-1.66.16-2.95.43a7 7 0 0 0 0 2.58q1.3.27 2.95.43a18 18 0 0 1 0-3.44m.17 4.71q-1.45-.12-2.69-.34a6.5 6.5 0 0 0 3.67 3.44q-.65-1.27-.98-3.1" fill="#666"/></g><defs><clipPath id="a"><path fill="#fff" d="M0 0h16v16H0z"/></clipPath></defs></svg>

dashboard/ui/public/next.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 394 80"><path fill="#000" d="M262 0h68.5v12.7h-27.2v66.6h-13.6V12.7H262V0ZM149 0v12.7H94v20.4h44.3v12.6H94v21h55v12.6H80.5V0h68.7zm34.3 0h-17.8l63.8 79.4h17.9l-32-39.7 32-39.6h-17.9l-23 28.6-23-28.6zm18.3 56.7-9-11-27.1 33.7h17.8l18.3-22.7z"/><path fill="#000" d="M81 79.3 17 0H0v79.3h13.6V17l50.2 62.3H81Zm252.6-.4c-1 0-1.8-.4-2.5-1s-1.1-1.6-1.1-2.6.3-1.8 1-2.5 1.6-1 2.6-1 1.8.3 2.5 1a3.4 3.4 0 0 1 .6 4.3 3.7 3.7 0 0 1-3 1.8zm23.2-33.5h6v23.3c0 2.1-.4 4-1.3 5.5a9.1 9.1 0 0 1-3.8 3.5c-1.6.8-3.5 1.3-5.7 1.3-2 0-3.7-.4-5.3-1s-2.8-1.8-3.7-3.2c-.9-1.3-1.4-3-1.4-5h6c.1.8.3 1.6.7 2.2s1 1.2 1.6 1.5c.7.4 1.5.5 2.4.5 1 0 1.8-.2 2.4-.6a4 4 0 0 0 1.6-1.8c.3-.8.5-1.8.5-3V45.5zm30.9 9.1a4.4 4.4 0 0 0-2-3.3 7.5 7.5 0 0 0-4.3-1.1c-1.3 0-2.4.2-3.3.5-.9.4-1.6 1-2 1.6a3.5 3.5 0 0 0-.3 4c.3.5.7.9 1.3 1.2l1.8 1 2 .5 3.2.8c1.3.3 2.5.7 3.7 1.2a13 13 0 0 1 3.2 1.8 8.1 8.1 0 0 1 3 6.5c0 2-.5 3.7-1.5 5.1a10 10 0 0 1-4.4 3.5c-1.8.8-4.1 1.2-6.8 1.2-2.6 0-4.9-.4-6.8-1.2-2-.8-3.4-2-4.5-3.5a10 10 0 0 1-1.7-5.6h6a5 5 0 0 0 3.5 4.6c1 .4 2.2.6 3.4.6 1.3 0 2.5-.2 3.5-.6 1-.4 1.8-1 2.4-1.7a4 4 0 0 0 .8-2.4c0-.9-.2-1.6-.7-2.2a11 11 0 0 0-2.1-1.4l-3.2-1-3.8-1c-2.8-.7-5-1.7-6.6-3.2a7.2 7.2 0 0 1-2.4-5.7 8 8 0 0 1 1.7-5 10 10 0 0 1 4.3-3.5c2-.8 4-1.2 6.4-1.2 2.3 0 4.4.4 6.2 1.2 1.8.8 3.2 2 4.3 3.4 1 1.4 1.5 3 1.5 5h-5.8z"/></svg>

dashboard/ui/public/vercel.svg

@@ -0,0 +1 @@
+<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1155 1000"><path d="m577.3 0 577.4 1000H0z" fill="#fff"/></svg>

dashboard/ui/public/window.svg

@@ -0,0 +1 @@
+<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill-rule="evenodd" clip-rule="evenodd" d="M1.5 2.5h13v10a1 1 0 0 1-1 1h-11a1 1 0 0 1-1-1zM0 1h16v11.5a2.5 2.5 0 0 1-2.5 2.5h-11A2.5 2.5 0 0 1 0 12.5zm3.75 4.5a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5M7 4.75a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0m1.75.75a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5" fill="#666"/></svg>

dashboard/ui/tsconfig.json

@@ -0,0 +1,34 @@
+{
+  "compilerOptions": {
+    "target": "ES2017",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "REDACTED_APP_PASSWORD": "bundler",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "react-jsx",
+    "incremental": true,
+    "plugins": [
+      {
+        "name": "next"
+      }
+    ],
+    "paths": {
+      "@/*": ["./*"]
+    }
+  },
+  "include": [
+    "next-env.d.ts",
+    "**/*.ts",
+    "**/*.tsx",
+    ".next/types/**/*.ts",
+    ".next/dev/types/**/*.ts",
+    "**/*.mts"
+  ],
+  "exclude": ["node_modules"]
+}