Sanitized mirror from private repository - 2026-04-05 10:05:14 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,20 @@
+"""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
+
+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.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,61 @@
+"""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."""
+    expenses = _read_expenses()
+    if month:
+        expenses = [e for e in expenses if e.get("date", "").startswith(month)]
+
+    if not expenses:
+        return {"total": 0, "count": 0, "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/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,250 @@
+"""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
+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/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)}
+
+
+# ---------------------------------------------------------------------------
+# Deluge (torrent client)
+# ---------------------------------------------------------------------------
+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)}

dashboard/api/routers/network.py

@@ -0,0 +1,64 @@
+"""Network / Headscale / AdGuard routes."""
+
+from fastapi import APIRouter
+import subprocess
+import json
+import httpx
+
+router = APIRouter(tags=["network"])
+
+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 {}
+
+
+@router.get("/network/headscale")
+def headscale_nodes():
+    """List Headscale nodes."""
+    result = subprocess.run(
+        ["ssh", "-o", "ConnectTimeout=3", "calypso",
+         "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()}
+    nodes = json.loads(result.stdout)
+    return {"nodes": [
+        {"name": n.get("givenName") or n.get("name", "?"),
+         "ip": (n.get("ipAddresses") or ["?"])[0],
+         "online": n.get("online", False),
+         "last_seen": n.get("lastSeen", "")}
+        for n in nodes
+    ]}
+
+
+@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)}

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,426 @@
+"""Overview stats and SSE activity stream."""
+
+import asyncio
+import json
+import subprocess
+import sqlite3
+from datetime import date
+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,
+)
+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 = "http://192.168.0.200:12852/dav.php/calendars/vish/default/"
+    BAIKAL_USER = "vish"
+    BAIKAL_PASS = "REDACTED_PASSWORD"
+
+    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 = get_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)}

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,181 @@
+"use client";
+
+import { usePoll } from "@/lib/use-poll";
+import type { EmailStats } from "@/lib/types";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Badge } from "@/components/ui/badge";
+import { StatusBadge } from "@/components/status-badge";
+
+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;
+}
+
+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 restarts = restartsData?.entries ?? [];
+
+  return (
+    <div className="space-y-8">
+      <h1 className="text-lg font-semibold">Automations</h1>
+
+      {/* Email Organizers */}
+      <Card>
+        <CardHeader className="pb-2">
+          <CardTitle className="text-sm font-medium">
+            Email Organizers
+          </CardTitle>
+        </CardHeader>
+        <CardContent>
+          {!emails ? (
+            <p className="text-xs text-muted-foreground">Loading...</p>
+          ) : (
+            <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="space-y-2 rounded-lg px-3 py-2 hover:bg-white/[0.02] transition-colors">
+                    <div className="flex items-center justify-between">
+                      <span className="text-sm font-medium text-foreground">{name}</span>
+                      <span className="text-xs text-muted-foreground/70">{today} today</span>
+                    </div>
+                    <div className="flex flex-wrap gap-1.5">
+                      {Object.entries(cats).map(([cat, count]) => (
+                        <Badge key={cat} variant="secondary" className="text-[10px] bg-white/[0.04] border border-white/[0.06]">
+                          {cat}: {count}
+                        </Badge>
+                      ))}
+                    </div>
+                  </div>
+                );
+              })}
+            </div>
+          )}
+        </CardContent>
+      </Card>
+
+      {/* Row 2: Backups, Drift, Restarts */}
+      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-5">
+        <Card>
+          <CardHeader className="pb-2">
+            <CardTitle className="text-sm font-medium">
+              Backup Status
+            </CardTitle>
+          </CardHeader>
+          <CardContent>
+            {!backups ? (
+              <p className="text-xs text-muted-foreground">Loading...</p>
+            ) : (
+              <div className="space-y-2">
+                <StatusBadge
+                  color={String(backups.status) === "ok" ? "green" : "red"}
+                  label={String(backups.status ?? "unknown")}
+                />
+                {backups.has_errors ? (
+                  <p className="text-xs text-red-400">Errors detected in backup</p>
+                ) : null}
+                <p className="text-[10px] text-muted-foreground/60">
+                  {String(backups.entries ?? 0)} log entries today
+                </p>
+              </div>
+            )}
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader className="pb-2">
+            <CardTitle className="text-sm font-medium">
+              Config Drift
+            </CardTitle>
+          </CardHeader>
+          <CardContent>
+            {!drift ? (
+              <p className="text-xs text-muted-foreground">Loading...</p>
+            ) : (
+              <div className="space-y-2">
+                <StatusBadge
+                  color={String(drift.status) === "clean" || String(drift.status) === "no_log" ? "green" : "amber"}
+                  label={String(drift.status ?? "unknown")}
+                />
+                <p className="text-[10px] text-muted-foreground/60">
+                  {String(drift.last_result ?? "No scan results yet")}
+                </p>
+              </div>
+            )}
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader className="pb-2">
+            <CardTitle className="text-sm font-medium">
+              Stack Restarts
+            </CardTitle>
+          </CardHeader>
+          <CardContent>
+            {!restarts ? (
+              <p className="text-xs text-muted-foreground">Loading...</p>
+            ) : restarts.length === 0 ? (
+              <p className="text-xs text-muted-foreground/60">
+                No recent restarts
+              </p>
+            ) : (
+              <div className="space-y-2">
+                {restarts.map((r, i) => (
+                  <div
+                    key={i}
+                    className="flex items-center justify-between text-xs"
+                  >
+                    <span className="text-foreground">{r.stack}</span>
+                    <div className="flex items-center gap-2">
+                      <StatusBadge
+                        color={r.status === "success" ? "green" : "red"}
+                        label={r.status}
+                      />
+                      <span className="text-muted-foreground/70">
+                        {new Date(r.timestamp).toLocaleTimeString("en-US", {
+                          hour: "2-digit",
+                          minute: "2-digit",
+                        })}
+                      </span>
+                    </div>
+                  </div>
+                ))}
+              </div>
+            )}
+          </CardContent>
+        </Card>
+      </div>
+    </div>
+  );
+}

dashboard/ui/app/expenses/page.tsx

@@ -0,0 +1,150 @@
+"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";
+
+interface Transaction {
+  date: string;
+  vendor: string;
+  amount: string | number;
+  currency?: string;
+  order_number?: string;
+  email_account?: string;
+  message_id?: string;
+  [key: string]: unknown;
+}
+
+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) => (
+        <span className="text-foreground">
+          ${Number(row.amount || 0).toFixed(2)} {row.currency ?? ""}
+        </span>
+      ),
+    },
+    { key: "order_number", label: "Order #" },
+    {
+      key: "email_account",
+      label: "Account",
+      render: (row) => (
+        <span className="text-muted-foreground truncate max-w-[120px] block text-[10px]">
+          {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)}` : "\u2014"}
+          sub={summary?.month}
+        />
+        <StatCard
+          label="Transactions"
+          value={summary?.count ?? "\u2014"}
+          sub="this month"
+        />
+        <StatCard
+          label="Top Vendor"
+          value={
+            summary?.top_vendors?.[0]?.vendor ?? "\u2014"
+          }
+          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-sm font-medium">Top Vendors</CardTitle>
+        </CardHeader>
+        <CardContent>
+          {!summary ? (
+            <p className="text-xs text-muted-foreground">Loading...</p>
+          ) : (
+            <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-xs">
+                    <span className="text-foreground">{v.vendor}</span>
+                    <span className="text-muted-foreground/70">
+                      ${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-sm font-medium">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,394 @@
+@import "tailwindcss";
+@import "tw-animate-css";
+@import "shadcn/tailwind.css";
+
+@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;
+}
+
+/* Theme variables are set dynamically by ThemeProvider.
+   These .dark defaults are the Midnight theme fallback. */
+.dark {
+  --background: 230 25% 4%;
+  --foreground: 210 40% 93%;
+  --card: 220 30% 8% / 0.4;
+  --card-foreground: 210 40% 93%;
+  --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% 55%;
+  --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% / 0.6;
+  --sidebar-foreground: 210 40% 93%;
+  --sidebar-primary: 217 91% 60%;
+  --sidebar-primary-foreground: 210 40% 93%;
+  --sidebar-accent: 217 33% 12% / 0.5;
+  --sidebar-accent-foreground: 210 40% 93%;
+  --sidebar-border: 0 0% 100% / 0.06;
+  --sidebar-ring: 217 91% 60%;
+
+  /* Glass / theme component vars — Midnight defaults */
+  --card-bg: rgba(255, 255, 255, 0.04);
+  --card-border: rgba(255, 255, 255, 0.08);
+  --card-hover-bg: rgba(255, 255, 255, 0.07);
+  --card-hover-border: rgba(255, 255, 255, 0.14);
+  --glass-bg: rgba(255, 255, 255, 0.03);
+  --glass-border: rgba(255, 255, 255, 0.06);
+  --glass-hover: rgba(255, 255, 255, 0.03);
+  --glass-input-bg: rgba(255, 255, 255, 0.03);
+  --glass-input-border: rgba(255, 255, 255, 0.08);
+  --glass-input-focus: rgba(59, 130, 246, 0.3);
+  --glass-input-focus-bg: rgba(255, 255, 255, 0.05);
+  --glass-table-header: rgba(255, 255, 255, 0.04);
+  --glass-bar-track: rgba(255, 255, 255, 0.05);
+  --nav-bg: rgba(255, 255, 255, 0.02);
+  --nav-border: rgba(255, 255, 255, 0.05);
+  --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);
+}
+
+/* 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;
+  }
+}
+
+/* --- Glassmorphism Background --- */
+body {
+  background: linear-gradient(135deg, #0a0a1a 0%, #0d1117 40%, #0a0e1a 100%);
+  min-height: 100vh;
+  position: relative;
+}
+
+/* Animated gradient background */
+body::before {
+  content: '';
+  position: fixed;
+  top: 0; left: 0; right: 0; bottom: 0;
+  background:
+    radial-gradient(ellipse 80% 50% at 50% -20%, rgba(56, 100, 220, 0.15), transparent),
+    radial-gradient(ellipse 60% 40% at 80% 50%, rgba(139, 92, 246, 0.08), transparent),
+    radial-gradient(ellipse 50% 50% at 20% 80%, rgba(16, 185, 129, 0.06), transparent);
+  z-index: -1;
+  pointer-events: none;
+}
+
+/* --- Glass Utility --- */
+.glass {
+  background: var(--glass-bg);
+  backdrop-filter: blur(20px);
+  -webkit-backdrop-filter: blur(20px);
+  border: 1px solid var(--glass-border);
+}
+
+/* --- Override shadcn Card for glassmorphism --- */
+[data-slot="card"] {
+  background: var(--card-bg) !important;
+  backdrop-filter: blur(24px);
+  -webkit-backdrop-filter: blur(24px);
+  border: 1px solid var(--card-border) !important;
+  border-radius: 16px !important;
+  box-shadow: none !important;
+  ring: none !important;
+  --tw-ring-shadow: none !important;
+  --tw-ring-color: transparent !important;
+  transition: all 0.3s ease;
+  animation: fade-up 0.5s ease-out both;
+}
+[data-slot="card"]:hover {
+  background: var(--card-hover-bg) !important;
+  border-color: var(--card-hover-border) !important;
+}
+
+/* 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: var(--glass-input-bg);
+  backdrop-filter: blur(12px);
+  -webkit-backdrop-filter: blur(12px);
+  border: 1px solid var(--glass-input-border);
+  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;
+}
+
+/* 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%); }
+}

dashboard/ui/app/infrastructure/page.tsx

@@ -0,0 +1,224 @@
+"use client";
+
+import { useState, useMemo } from "react";
+import { usePoll } from "@/lib/use-poll";
+import type { Container, OverviewStats } from "@/lib/types";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Button } from "@/components/ui/button";
+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";
+
+interface OlaresPod {
+  name: string;
+  namespace: string;
+  status: string;
+  restarts: number;
+  age: string;
+}
+
+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 [logsTarget, setLogsTarget] = useState<{
+    id: string;
+    name: string;
+    endpoint: string;
+  } | 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" },
+    {
+      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>
+
+      {/* Container Table */}
+      <Card>
+        <CardHeader className="pb-2">
+          <CardTitle className="text-sm font-medium">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-sm font-medium">Olares Pods</CardTitle>
+          </CardHeader>
+          <CardContent>
+            <DataTable<OlaresPod>
+              data={pods ?? []}
+              columns={podColumns}
+              searchKey="name"
+            />
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader className="pb-2">
+            <CardTitle className="text-sm font-medium">GPU Status</CardTitle>
+          </CardHeader>
+          <CardContent className="space-y-4">
+            {!gpu ? (
+              <p className="text-xs text-muted-foreground">Loading...</p>
+            ) : 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 ?? "\u2014"}&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 ?? "\u2014"}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 ?? "\u2014"}%
+                    </p>
+                  </div>
+                </div>
+              </>
+            ) : (
+              <p className="text-xs text-muted-foreground">GPU not available</p>
+            )}
+          </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,46 @@
+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 { 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",
+};
+
+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">
+        <ThemeProvider>
+          <Nav />
+          <main className="flex-1 p-6">{children}</main>
+          <ToastProvider />
+          <OllamaChat />
+          <KeyboardShortcuts />
+        </ThemeProvider>
+      </body>
+    </html>
+  );
+}

dashboard/ui/app/logs/page.tsx

@@ -0,0 +1,137 @@
+"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";
+
+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-sm font-medium">Log Files</CardTitle>
+          </CardHeader>
+          <CardContent>
+            <ScrollArea className="h-[460px]">
+              {logFiles.length === 0 ? (
+                <p className="text-xs text-muted-foreground">Loading...</p>
+              ) : (
+                <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-xs 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-sm font-medium">
+              {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 ? (
+                <p className="text-xs text-muted-foreground py-4 text-center">
+                  Loading...
+                </p>
+              ) : (
+                <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,388 @@
+"use client";
+
+import { usePoll } from "@/lib/use-poll";
+import { JellyfinCard } from "@/components/jellyfin-card";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { StatusBadge } from "@/components/status-badge";
+
+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 ProwlarrIndexer {
+  name: string;
+  protocol: string;
+}
+
+interface ProwlarrStats {
+  total: number;
+  enabled: number;
+  indexers: ProwlarrIndexer[];
+  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;
+}
+
+export default function MediaPage() {
+  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 sonarr = (sonarrRaw?.records ?? sonarrRaw?.items ?? []) as SonarrQueueItem[];
+  const radarr = (radarrRaw?.records ?? radarrRaw?.items ?? []) as RadarrQueueItem[];
+  const sab = sabRaw?.queue as SabQueue | undefined;
+
+  return (
+    <div className="space-y-8">
+      <h1 className="text-lg font-semibold">Media</h1>
+
+      <JellyfinCard />
+
+      <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-sm font-medium">Sonarr Queue</CardTitle>
+          </CardHeader>
+          <CardContent>
+            {!sonarr ? (
+              <p className="text-xs text-muted-foreground">Loading...</p>
+            ) : sonarr.length === 0 ? (
+              <p className="text-xs text-muted-foreground/60">Queue empty</p>
+            ) : (
+              <div className="space-y-2">
+                {sonarr.map((item, i) => (
+                  <div key={i} className="text-xs space-y-0.5 rounded-lg px-2 py-1.5 hover:bg-white/[0.03] transition-colors">
+                    <p className="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-muted-foreground/70">
+                          {item.timeleft}
+                        </span>
+                      )}
+                    </div>
+                  </div>
+                ))}
+              </div>
+            )}
+          </CardContent>
+        </Card>
+
+        {/* Radarr Queue */}
+        <Card>
+          <CardHeader className="pb-2">
+            <CardTitle className="text-sm font-medium">Radarr Queue</CardTitle>
+          </CardHeader>
+          <CardContent>
+            {!radarr ? (
+              <p className="text-xs text-muted-foreground">Loading...</p>
+            ) : radarr.length === 0 ? (
+              <p className="text-xs text-muted-foreground/60">Queue empty</p>
+            ) : (
+              <div className="space-y-2">
+                {radarr.map((item, i) => (
+                  <div key={i} className="text-xs space-y-0.5 rounded-lg px-2 py-1.5 hover:bg-white/[0.03] transition-colors">
+                    <p className="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-muted-foreground/70">
+                          {item.timeleft}
+                        </span>
+                      )}
+                    </div>
+                  </div>
+                ))}
+              </div>
+            )}
+          </CardContent>
+        </Card>
+
+        {/* SABnzbd Queue */}
+        <Card>
+          <CardHeader className="pb-2 flex flex-row items-center justify-between">
+            <CardTitle className="text-sm font-medium">
+              SABnzbd Queue
+            </CardTitle>
+            {sab && (
+              <StatusBadge
+                color={sab.paused ? "amber" : "green"}
+                label={sab.paused ? "Paused" : sab.speed}
+              />
+            )}
+          </CardHeader>
+          <CardContent>
+            {!sab ? (
+              <p className="text-xs text-muted-foreground">Loading...</p>
+            ) : sab.slots.length === 0 ? (
+              <p className="text-xs text-muted-foreground/60">Queue empty</p>
+            ) : (
+              <div className="space-y-2">
+                {sab.slots.map((item, i) => (
+                  <div key={i} className="text-xs space-y-1 rounded-lg px-2 py-1.5 hover:bg-white/[0.03] transition-colors">
+                    <p className="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-muted-foreground/70">
+                          {item.timeleft}
+                        </span>
+                      )}
+                    </div>
+                    {item.progress != null && (
+                      <div className="glass-bar-track h-1">
+                        <div
+                          className="h-full glass-bar-fill bg-gradient-to-r from-blue-500 to-cyan-400"
+                          style={{ width: `${item.progress}%` }}
+                        />
+                      </div>
+                    )}
+                  </div>
+                ))}
+              </div>
+            )}
+          </CardContent>
+        </Card>
+      </div>
+
+      {/* Arr Suite Services */}
+      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-5">
+        {/* Prowlarr */}
+        <Card>
+          <CardHeader className="pb-2 flex flex-row items-center justify-between">
+            <CardTitle className="text-sm font-medium">Prowlarr</CardTitle>
+            {prowlarr && !prowlarr.error && (
+              <StatusBadge color="green" label={`${prowlarr.enabled} active`} />
+            )}
+          </CardHeader>
+          <CardContent>
+            {!prowlarr ? (
+              <p className="text-xs text-muted-foreground">Loading...</p>
+            ) : prowlarr.error ? (
+              <p className="text-xs text-red-400">{prowlarr.error}</p>
+            ) : (
+              <div className="space-y-2">
+                <p className="text-xs text-muted-foreground/70">
+                  {prowlarr.enabled}/{prowlarr.total} indexers enabled
+                </p>
+                {prowlarr.indexers.map((idx, i) => (
+                  <div key={i} className="flex items-center justify-between text-xs">
+                    <span className="text-foreground truncate">{idx.name}</span>
+                    <span className="text-muted-foreground/60 ml-2 shrink-0">
+                      {idx.protocol}
+                    </span>
+                  </div>
+                ))}
+              </div>
+            )}
+          </CardContent>
+        </Card>
+
+        {/* Bazarr */}
+        <Card>
+          <CardHeader className="pb-2 flex flex-row items-center justify-between">
+            <CardTitle className="text-sm font-medium">Bazarr</CardTitle>
+            {bazarr && !bazarr.error && (
+              <StatusBadge color="green" label={bazarr.version} />
+            )}
+          </CardHeader>
+          <CardContent>
+            {!bazarr ? (
+              <p className="text-xs text-muted-foreground">Loading...</p>
+            ) : bazarr.error ? (
+              <p className="text-xs text-red-400">{bazarr.error}</p>
+            ) : (
+              <div className="space-y-2">
+                <div className="flex items-center justify-between text-xs">
+                  <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-xs">
+                  <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-2 text-xs">
+                  <span className="text-muted-foreground/70">Sonarr SignalR</span>
+                  <StatusBadge
+                    color={bazarr.sonarr_signalr === "LIVE" ? "green" : "red"}
+                    label={String(bazarr.sonarr_signalr)}
+                  />
+                </div>
+                <div className="flex items-center gap-2 text-xs">
+                  <span className="text-muted-foreground/70">Radarr SignalR</span>
+                  <StatusBadge
+                    color={bazarr.radarr_signalr === "LIVE" ? "green" : "red"}
+                    label={String(bazarr.radarr_signalr)}
+                  />
+                </div>
+              </div>
+            )}
+          </CardContent>
+        </Card>
+
+        {/* Audiobookshelf */}
+        <Card>
+          <CardHeader className="pb-2 flex flex-row items-center justify-between">
+            <CardTitle className="text-sm font-medium">Audiobookshelf</CardTitle>
+            {abs && !abs.error && (
+              <StatusBadge color="green" label={`${abs.total} items`} />
+            )}
+          </CardHeader>
+          <CardContent>
+            {!abs ? (
+              <p className="text-xs text-muted-foreground">Loading...</p>
+            ) : abs.error ? (
+              <p className="text-xs text-red-400">{abs.error}</p>
+            ) : (
+              <div className="space-y-2">
+                {abs.libraries.map((lib, i) => (
+                  <div key={i} className="flex items-center justify-between text-xs">
+                    <span className="text-foreground">{lib.name}</span>
+                    <span className="text-muted-foreground/70">
+                      {lib.items} {lib.type}
+                    </span>
+                  </div>
+                ))}
+              </div>
+            )}
+          </CardContent>
+        </Card>
+
+        {/* Deluge */}
+        <Card>
+          <CardHeader className="pb-2 flex flex-row items-center justify-between">
+            <CardTitle className="text-sm font-medium">Deluge</CardTitle>
+            {deluge && (
+              <StatusBadge
+                color={deluge.available ? "green" : "red"}
+                label={deluge.available ? "Online" : "Offline"}
+              />
+            )}
+          </CardHeader>
+          <CardContent>
+            {!deluge ? (
+              <p className="text-xs text-muted-foreground">Loading...</p>
+            ) : !deluge.available ? (
+              <p className="text-xs text-red-400">
+                {deluge.error ?? "Unreachable"}
+              </p>
+            ) : (
+              <div className="space-y-2">
+                <div className="flex items-center justify-between text-xs">
+                  <span className="text-muted-foreground/70">Total</span>
+                  <span className="text-foreground font-medium">
+                    {deluge.total}
+                  </span>
+                </div>
+                <div className="flex items-center justify-between text-xs">
+                  <span className="text-muted-foreground/70">Downloading</span>
+                  <StatusBadge
+                    color={deluge.downloading ? "blue" : "green"}
+                    label={String(deluge.downloading)}
+                  />
+                </div>
+                <div className="flex items-center justify-between text-xs">
+                  <span className="text-muted-foreground/70">Seeding</span>
+                  <StatusBadge
+                    color={deluge.seeding ? "purple" : "green"}
+                    label={String(deluge.seeding)}
+                  />
+                </div>
+              </div>
+            )}
+          </CardContent>
+        </Card>
+      </div>
+    </div>
+  );
+}

dashboard/ui/app/network/page.tsx

@@ -0,0 +1,122 @@
+"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 { DataTable, Column } from "@/components/data-table";
+
+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;
+}
+
+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 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-foreground">{row.domain}</span>,
+    },
+    { key: "answer", label: "Answer" },
+  ];
+
+  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() : "\u2014"; })()}
+          sub="DNS queries"
+        />
+        <StatCard
+          label="Blocked"
+          value={(() => { const v = adguard?.blocked ?? adguard?.num_blocked_filtering; return v != null ? v.toLocaleString() : "\u2014"; })()}
+          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` : "\u2014"; })()}
+          sub="processing time"
+        />
+      </div>
+
+      {/* Middle: Headscale nodes grid */}
+      <Card>
+        <CardHeader className="pb-2">
+          <CardTitle className="text-sm font-medium">Headscale Nodes</CardTitle>
+        </CardHeader>
+        <CardContent>
+          {nodes.length === 0 ? (
+            <p className="text-xs text-muted-foreground">Loading...</p>
+          ) : (
+            <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 text-foreground truncate">{node.name}</span>
+                    </div>
+                    <p className="text-[10px] text-muted-foreground/70 font-mono">
+                      {node.ip_addresses?.[0] ?? node.ip ?? "\u2014"}
+                    </p>
+                    {node.last_seen && (
+                      <p className="text-[10px] 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>
+
+      {/* Bottom: DNS rewrites table */}
+      <Card>
+        <CardHeader className="pb-2">
+          <CardTitle className="text-sm font-medium">DNS Rewrites</CardTitle>
+        </CardHeader>
+        <CardContent>
+          <DataTable<DnsRewrite>
+            data={rewrites}
+            columns={rewriteColumns}
+            searchKey="domain"
+          />
+        </CardContent>
+      </Card>
+    </div>
+  );
+}

dashboard/ui/app/page.tsx

@@ -0,0 +1,123 @@
+"use client";
+
+import { usePoll } from "@/lib/use-poll";
+import type { OverviewStats } 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 { HostCard } from "@/components/host-card";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+
+function SectionHeading({ children }: { children: React.ReactNode }) {
+  return (
+    <div className="flex items-center gap-3">
+      <h2 className="text-xs font-medium uppercase tracking-wider text-muted-foreground/70">
+        {children}
+      </h2>
+      <div className="flex-1 h-px bg-gradient-to-r from-white/[0.06] to-transparent" />
+    </div>
+  );
+}
+
+export default function DashboardPage() {
+  const { data } = usePoll<OverviewStats>("/api/stats/overview", 60000);
+
+  // 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;
+
+  return (
+    <div className="space-y-8">
+      {/* Row 1: Stat Cards */}
+      <SectionHeading>Overview</SectionHeading>
+      <div className="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-5 gap-5">
+        <StatCard
+          label="Containers"
+          value={data ? `${running}/${data.containers.total}` : "\u2014"}
+          color="blue"
+          sub={data ? "running / total" : undefined}
+        />
+        <StatCard
+          label="Hosts Online"
+          value={data ? hostsOnline : "\u2014"}
+          color="green"
+          sub="endpoints"
+        />
+        <StatCard
+          label="GPU — RTX 5090"
+          value={
+            data?.gpu?.available
+              ? `${gpuPct ?? 0}%`
+              : "\u2014"
+          }
+          color="violet"
+          gauge={data?.gpu?.available ? gpuPct : undefined}
+          sub={data?.gpu?.available ? `${data.gpu.temp_c ?? "—"}\u00b0C \u00b7 ${data.gpu.power_w ?? data.gpu.power_draw_w ?? "—"}W` : "unavailable"}
+        />
+        <StatCard
+          label="Emails Today"
+          value={data ? emailCount : "\u2014"}
+          color="amber"
+          sub="processed"
+        />
+        <StatCard
+          label="Alerts"
+          value={data ? alertCount : "\u2014"}
+          color="emerald"
+          sub="active"
+        />
+      </div>
+
+      {/* Row 2: Activity + Calendar + Jellyfin + Ollama */}
+      <SectionHeading>Live</SectionHeading>
+      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-5">
+        <div className="md:col-span-2">
+          <ActivityFeed />
+        </div>
+        <CalendarCard />
+        <JellyfinCard />
+        <OllamaCard />
+      </div>
+
+      {/* Row 3: Hosts */}
+      <SectionHeading>Infrastructure</SectionHeading>
+      <Card className="overflow-hidden relative">
+        <CardHeader className="pb-2">
+          <CardTitle className="text-sm font-medium">Hosts</CardTitle>
+        </CardHeader>
+        <CardContent>
+          <div className="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-5 gap-4">
+            {data
+              ? Object.entries(endpoints).map(
+                  ([name, info]) => (
+                    <HostCard
+                      key={name}
+                      name={name}
+                      running={info.running}
+                      total={info.total}
+                      error={info.error}
+                    />
+                  )
+                )
+              : Array.from({ length: 5 }).map((_, i) => (
+                  <Card key={i}>
+                    <CardContent className="pt-3 pb-3 px-4">
+                      <p className="text-xs text-muted-foreground">
+                        Loading...
+                      </p>
+                    </CardContent>
+                  </Card>
+                ))}
+          </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,147 @@
+"use client";
+
+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;
+  }
+}
+
+function eventMessage(event: ActivityEvent): string {
+  switch (event.type) {
+    case "email_classified":
+      return `Classified as ${event.category ?? "?"} ${event.label ? `- ${event.label}` : ""}`.trim();
+    case "email_classifying":
+      return `[${event.progress ?? "?"}] Classifying: ${event.subject ?? "?"}`;
+    case "email_cached":
+      return `Cached: ${event.subject ?? "?"} -> ${event.category ?? "?"}`;
+    case "receipt_extracted":
+      return `Receipt: ${event.vendor ?? "?"} $${event.amount ?? "?"}`;
+    case "container_restarted":
+      return `Restarted ${event.container} on ${event.endpoint}`;
+    case "container_unhealthy":
+      return event.container
+        ? `Unhealthy: ${event.container} on ${event.endpoint}`
+        : event.raw ?? "Unhealthy container detected";
+    case "backup_result":
+      return `Backup: ${event.status ?? "?"}`;
+    case "drift_clean":
+      return "Config drift check: all clean";
+    case "drift_found":
+      return `Config drift: ${event.drifts ?? "?"} drifts in ${event.services ?? "?"} services`;
+    case "cron_complete":
+      return "Automation run completed";
+    case "stack_healthy":
+      return "All containers healthy";
+    case "disk_warning":
+      return `Disk warning: ${event.days} days remaining`;
+    case "disk_scan_complete":
+      return `Disk scan: ${event.count} filesystems checked`;
+    case "pr_reviewed":
+      return `AI reviewed PR #${event.pr}`;
+    case "changelog_generated":
+      return `Changelog: ${event.commits} commits`;
+    case "changelog_commits":
+      return `${event.count} new commits found`;
+    case "restart_analysis":
+      return `LLM says ${event.decision} for ${event.container}`;
+    default:
+      // Strip timestamp prefix from raw log line for cleaner display
+      if (typeof event.raw === "string") {
+        return event.raw.replace(/^\d{4}-\d{2}-\d{2} \d{2}:\d{2}:\d{2},?\d*\s+\S+\s+/, "");
+      }
+      return `${event.type} from ${event.source}`;
+  }
+}
+
+export function ActivityFeed() {
+  const events = useSSE("/api/activity");
+
+  return (
+    <Card className="col-span-full lg:col-span-3 overflow-hidden relative">
+      <CardHeader className="flex flex-row items-center justify-between pb-2">
+        <CardTitle className="text-sm font-medium">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)}
+                  </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,53 @@
+"use client";
+import { usePoll } from "@/lib/use-poll";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+
+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 ? (
+          <p className="text-xs text-muted-foreground">Loading...</p>
+        ) : data.events.length === 0 ? (
+          <p className="text-xs text-muted-foreground">No upcoming events</p>
+        ) : (
+          <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/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/${endpoint}/${containerId}/logs`
+    )
+      .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/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-xs 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-xs 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-xs text-muted-foreground/80">
+                  {col.label}
+                </TableHead>
+              ))}
+              {actions && <TableHead className="text-xs 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-xs">
+                      {col.render
+                        ? col.render(row)
+                        : String(row[col.key] ?? "")}
+                    </TableCell>
+                  ))}
+                  {actions && (
+                    <TableCell className="text-xs">{actions(row)}</TableCell>
+                  )}
+                </TableRow>
+              ))
+            )}
+          </TableBody>
+        </Table>
+      </div>
+    </div>
+  );
+}

dashboard/ui/components/host-card.tsx

@@ -0,0 +1,58 @@
+import { Card, CardContent } from "@/components/ui/card";
+import { StatusBadge } from "./status-badge";
+
+const hostDescriptions: Record<string, string> = {
+  atlantis: "NAS \u00b7 media stack",
+  calypso: "DNS \u00b7 SSO \u00b7 Headscale",
+  olares: "K3s \u00b7 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 text-foreground capitalize">
+            {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>
+  );
+}

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";
+
+export function JellyfinCard() {
+  const { data } = usePoll<JellyfinStatus>("/api/jellyfin/status", 30000);
+
+  return (
+    <Card>
+      <CardHeader className="pb-2">
+        <CardTitle className="text-sm font-medium">Jellyfin</CardTitle>
+      </CardHeader>
+      <CardContent className="space-y-3">
+        {!data ? (
+          <p className="text-xs text-muted-foreground">Loading...</p>
+        ) : (
+          <>
+            <div>
+              <p className="text-[10px] 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-xs rounded-lg bg-white/[0.03] px-3 py-2">
+                      <p className="text-foreground font-medium">{s.title}</p>
+                      <p className="text-muted-foreground/70">
+                        {s.user} &middot; {s.device}
+                      </p>
+                    </div>
+                  ))}
+                </div>
+              ) : (
+                <p className="text-xs text-muted-foreground/60">
+                  No active streams
+                </p>
+              )}
+            </div>
+            <div className="h-px bg-white/[0.06]" />
+            <div>
+              <p className="text-[10px] 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-xs"
+                  >
+                    <span className="text-foreground">{lib.name}</span>
+                    <StatusBadge color="green" label={lib.type} />
+                  </div>
+                ))}
+              </div>
+            </div>
+            {data.idle_sessions > 0 && (
+              <p className="text-[10px] 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,81 @@
+"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 border-b backdrop-blur-xl" style={{ borderColor: "var(--nav-border)", background: "var(--nav-bg)" }}>
+      <div className="flex items-center justify-between px-6 h-14">
+        <div className="flex items-center gap-6">
+          <Link href="/" className="flex items-center gap-2 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-shadow" style={{ boxShadow: "0 0 20px rgba(139, 92, 246, 0.3)" }}>
+              H
+            </div>
+            <span className="font-semibold text-foreground hidden sm:inline">Homelab</span>
+          </Link>
+          <div className="flex items-center gap-1">
+            {tabs.map((tab) => {
+              const isActive =
+                tab.href === "/"
+                  ? pathname === "/"
+                  : pathname.startsWith(tab.href);
+              return (
+                <Link
+                  key={tab.href}
+                  href={tab.href}
+                  className={cn(
+                    "px-3 py-1.5 text-xs lg:text-sm rounded-lg transition-all duration-200 relative whitespace-nowrap",
+                    isActive
+                      ? "text-foreground backdrop-blur-sm"
+                      : "text-muted-foreground hover:text-foreground"
+                  )}
+                  style={
+                    isActive
+                      ? { background: "var(--nav-active)" }
+                      : {}
+                  }
+                  onMouseEnter={(e) => {
+                    if (!isActive) e.currentTarget.style.background = "var(--nav-hover)";
+                  }}
+                  onMouseLeave={(e) => {
+                    if (!isActive) e.currentTarget.style.background = "";
+                  }}
+                >
+                  {tab.label}
+                  <span className="ml-0.5 text-[8px] text-muted-foreground/40 hidden lg:inline">{tab.key}</span>
+                </Link>
+              );
+            })}
+          </div>
+        </div>
+        <div className="flex items-center gap-3">
+          <ThemeSwitcher />
+          <span className="text-xs text-muted-foreground/70 hidden md:inline">{today}</span>
+          <RefreshIndicator />
+        </div>
+      </div>
+    </nav>
+  );
+}

dashboard/ui/components/ollama-card.tsx

@@ -0,0 +1,116 @@
+"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";
+
+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-sm font-medium">LLM / GPU</CardTitle>
+        {data && (
+          <StatusBadge
+            color={ollamaUp ? "green" : "red"}
+            label={ollamaUp ? "Online" : "Offline"}
+          />
+        )}
+      </CardHeader>
+      <CardContent className="space-y-3">
+        {!data ? (
+          <p className="text-xs text-muted-foreground">Loading...</p>
+        ) : 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 border-violet-500/10">
+        <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/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,110 @@
+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 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-[10px] uppercase tracking-wider text-muted-foreground font-medium">
+          {label}
+        </p>
+        {sub && <div className="mt-0.5 text-xs text-muted-foreground/70">{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/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,94 @@
+"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-48 rounded-xl border p-1.5 z-[100] backdrop-blur-xl shadow-xl"
+          style={{
+            background: "var(--card-bg)",
+            borderColor: "var(--card-border)",
+          }}
+        >
+          {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 ${
+                theme.name === t.name
+                  ? "bg-[var(--nav-active)] text-[var(--foreground)]"
+                  : "text-[var(--muted-foreground)] hover:bg-[var(--nav-hover)] hover:text-[var(--foreground)]"
+              }`}
+              style={
+                theme.name === t.name
+                  ? { color: "hsl(var(--foreground))" }
+                  : { color: "hsl(var(--muted-foreground))" }
+              }
+            >
+              <span
+                className="w-4 h-4 rounded-full shrink-0 border border-white/10"
+                style={{
+                  background: `linear-gradient(135deg, ${t.swatch[0]}, ${t.swatch[1]})`,
+                }}
+              />
+              <span className="flex-1 text-left">{t.label}</span>
+              {theme.name === t.name && (
+                <span className="text-[10px] opacity-60">current</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,442 @@
+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 80% 50% at 50% -20%, rgba(56, 100, 220, 0.18), transparent), radial-gradient(ellipse 60% 40% at 80% 50%, rgba(139, 92, 246, 0.1), transparent), radial-gradient(ellipse 50% 50% at 20% 80%, rgba(16, 185, 129, 0.07), transparent)",
+    vars: {
+      "--background": "230 25% 4%",
+      "--foreground": "210 40% 93%",
+      "--card": "220 30% 8% / 0.4",
+      "--card-foreground": "210 40% 93%",
+      "--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% 62%",
+      "--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%",
+      "--card-bg": "rgba(255, 255, 255, 0.08)",
+      "--card-border": "rgba(255, 255, 255, 0.12)",
+      "--card-hover-bg": "rgba(255, 255, 255, 0.12)",
+      "--card-hover-border": "rgba(255, 255, 255, 0.22)",
+      "--glass-bg": "rgba(255, 255, 255, 0.06)",
+      "--glass-border": "rgba(255, 255, 255, 0.10)",
+      "--glass-hover": "rgba(255, 255, 255, 0.03)",
+      "--glass-input-bg": "rgba(255, 255, 255, 0.07)",
+      "--glass-input-border": "rgba(255, 255, 255, 0.08)",
+      "--glass-input-focus": "rgba(59, 130, 246, 0.3)",
+      "--glass-input-focus-bg": "rgba(255, 255, 255, 0.05)",
+      "--glass-table-header": "rgba(255, 255, 255, 0.08)",
+      "--glass-bar-track": "rgba(255, 255, 255, 0.10)",
+      "--nav-bg": "rgba(255, 255, 255, 0.85)",
+      "--nav-border": "rgba(255, 255, 255, 0.05)",
+      "--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 80% 50% at 50% -20%, rgba(236, 72, 153, 0.15), transparent), radial-gradient(ellipse 60% 40% at 80% 50%, rgba(6, 182, 212, 0.12), transparent), radial-gradient(ellipse 50% 50% at 20% 80%, rgba(236, 72, 153, 0.06), transparent)",
+    vars: {
+      "--background": "260 30% 4%",
+      "--foreground": "185 20% 92%",
+      "--card": "270 30% 8% / 0.4",
+      "--card-foreground": "185 20% 92%",
+      "--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% 62%",
+      "--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(255, 255, 255, 0.08)",
+      "--card-border": "rgba(236, 72, 153, 0.1)",
+      "--card-hover-bg": "rgba(255, 255, 255, 0.12)",
+      "--card-hover-border": "rgba(236, 72, 153, 0.2)",
+      "--glass-bg": "rgba(255, 255, 255, 0.06)",
+      "--glass-border": "rgba(236, 72, 153, 0.10)",
+      "--glass-hover": "rgba(236, 72, 153, 0.03)",
+      "--glass-input-bg": "rgba(255, 255, 255, 0.07)",
+      "--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.05)",
+      "--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.85)",
+      "--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 80% 50% at 50% -20%, rgba(212, 167, 106, 0.12), transparent), radial-gradient(ellipse 60% 40% at 80% 50%, rgba(184, 115, 51, 0.1), transparent), radial-gradient(ellipse 50% 50% at 20% 80%, rgba(245, 158, 11, 0.05), transparent)",
+    vars: {
+      "--background": "30 30% 4%",
+      "--foreground": "40 30% 88%",
+      "--card": "30 25% 10% / 0.4",
+      "--card-foreground": "40 30% 88%",
+      "--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% 62%",
+      "--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(212, 167, 106, 0.08)",
+      "--card-border": "rgba(212, 167, 106, 0.12)",
+      "--card-hover-bg": "rgba(212, 167, 106, 0.12)",
+      "--card-hover-border": "rgba(212, 167, 106, 0.22)",
+      "--glass-bg": "rgba(212, 167, 106, 0.06)",
+      "--glass-border": "rgba(212, 167, 106, 0.10)",
+      "--glass-hover": "rgba(212, 167, 106, 0.03)",
+      "--glass-input-bg": "rgba(212, 167, 106, 0.07)",
+      "--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.05)",
+      "--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.85)",
+      "--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 80% 50% at 50% -20%, rgba(21, 128, 61, 0.14), transparent), radial-gradient(ellipse 60% 40% at 80% 50%, rgba(14, 116, 144, 0.1), transparent), radial-gradient(ellipse 50% 50% at 20% 80%, rgba(34, 197, 94, 0.05), transparent)",
+    vars: {
+      "--background": "140 25% 4%",
+      "--foreground": "140 15% 88%",
+      "--card": "150 20% 9% / 0.4",
+      "--card-foreground": "140 15% 88%",
+      "--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% 62%",
+      "--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(21, 128, 61, 0.08)",
+      "--card-border": "rgba(21, 128, 61, 0.12)",
+      "--card-hover-bg": "rgba(21, 128, 61, 0.12)",
+      "--card-hover-border": "rgba(21, 128, 61, 0.22)",
+      "--glass-bg": "rgba(21, 128, 61, 0.06)",
+      "--glass-border": "rgba(21, 128, 61, 0.10)",
+      "--glass-hover": "rgba(21, 128, 61, 0.03)",
+      "--glass-input-bg": "rgba(21, 128, 61, 0.07)",
+      "--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.05)",
+      "--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.85)",
+      "--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 80% 50% at 50% -20%, rgba(220, 38, 38, 0.12), transparent), radial-gradient(ellipse 60% 40% at 80% 50%, rgba(161, 161, 170, 0.06), transparent), radial-gradient(ellipse 50% 50% at 20% 80%, rgba(220, 38, 38, 0.04), transparent)",
+    vars: {
+      "--background": "0 0% 4%",
+      "--foreground": "0 0% 93%",
+      "--card": "0 0% 9% / 0.4",
+      "--card-foreground": "0 0% 93%",
+      "--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% 62%",
+      "--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(255, 255, 255, 0.08)",
+      "--card-border": "rgba(220, 38, 38, 0.12)",
+      "--card-hover-bg": "rgba(255, 255, 255, 0.12)",
+      "--card-hover-border": "rgba(220, 38, 38, 0.22)",
+      "--glass-bg": "rgba(255, 255, 255, 0.06)",
+      "--glass-border": "rgba(220, 38, 38, 0.10)",
+      "--glass-hover": "rgba(220, 38, 38, 0.03)",
+      "--glass-input-bg": "rgba(255, 255, 255, 0.07)",
+      "--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.05)",
+      "--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.7)",
+      "--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 80% 50% at 50% -20%, rgba(2, 132, 199, 0.15), transparent), radial-gradient(ellipse 60% 40% at 80% 50%, rgba(45, 212, 191, 0.08), transparent), radial-gradient(ellipse 50% 50% at 20% 80%, rgba(2, 132, 199, 0.06), transparent)",
+    vars: {
+      "--background": "220 50% 4%",
+      "--foreground": "200 20% 90%",
+      "--card": "215 40% 9% / 0.4",
+      "--card-foreground": "200 20% 90%",
+      "--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% 62%",
+      "--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(2, 132, 199, 0.08)",
+      "--card-border": "rgba(2, 132, 199, 0.12)",
+      "--card-hover-bg": "rgba(2, 132, 199, 0.12)",
+      "--card-hover-border": "rgba(2, 132, 199, 0.22)",
+      "--glass-bg": "rgba(2, 132, 199, 0.06)",
+      "--glass-border": "rgba(2, 132, 199, 0.10)",
+      "--glass-hover": "rgba(2, 132, 199, 0.03)",
+      "--glass-input-bg": "rgba(2, 132, 199, 0.07)",
+      "--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.05)",
+      "--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.85)",
+      "--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 90% 60% at 30% -10%, rgba(74, 222, 128, 0.12), transparent), radial-gradient(ellipse 70% 50% at 70% 30%, rgba(167, 139, 250, 0.1), transparent), radial-gradient(ellipse 60% 40% at 50% 80%, rgba(56, 189, 248, 0.08), transparent), radial-gradient(ellipse 40% 30% at 80% 60%, rgba(74, 222, 128, 0.05), transparent)",
+    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(74, 222, 128, 0.02)",
+      "--card-border": "rgba(167, 139, 250, 0.12)",
+      "--card-hover-bg": "rgba(74, 222, 128, 0.04)",
+      "--card-hover-border": "rgba(167, 139, 250, 0.22)",
+      "--glass-bg": "rgba(167, 139, 250, 0.06)",
+      "--glass-border": "rgba(167, 139, 250, 0.10)",
+      "--glass-hover": "rgba(74, 222, 128, 0.03)",
+      "--glass-input-bg": "rgba(167, 139, 250, 0.07)",
+      "--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.05)",
+      "--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.85)",
+      "--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)",
+    },
+  },
+];
+
+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,80 @@
+// 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 }[];
+}

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/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"]
+}