chore: sync main into dev

.gitea/workflows/deploy-dev.yml

@@ -165,22 +165,23 @@ jobs:
             git clone --depth=1 --branch "$GITHUB_REF_NAME" "http://100.78.131.124:3300/${GITHUB_REPOSITORY}.git" .
           fi
 
-      - name: Build dev Docker image
+      - name: Build and transfer dev Docker image
         run: |
           set -e
           echo "Building on VPS (SSD)..."
-          # Podman caches layers automatically; no --cache-from needed
+          REGISTRY="100.78.131.124:5501"
-          podman build -t nas-dashboard-dev:latest dashboard/
+          TAG="$REGISTRY/nas-dashboard-dev:$GITHUB_SHA"
-
+          LATEST_TAG="$REGISTRY/nas-dashboard-dev:latest"
-      - name: Transfer image to NAS
+          podman build -t "$TAG" -t "$LATEST_TAG" dashboard/
-        run: |
+          echo "Pushing to local registry..."
-          set -e
+          podman push --tls-verify=false "$TAG"
+          podman push --tls-verify=false "$LATEST_TAG"
           echo "Streaming dev image to NAS..."
           SSH_OPTS="-o ConnectTimeout=15 -o ServerAliveInterval=15 -o ServerAliveCountMax=3"
-          podman save nas-dashboard-dev:latest | gzip | ssh $SSH_OPTS nasts "gunzip | /volume1/@appstore/ContainerManager/usr/bin/docker load 2>&1"
+          podman save "$LATEST_TAG" | gzip | ssh $SSH_OPTS nasts "gunzip | /volume1/@appstore/ContainerManager/usr/bin/docker load 2>&1"
           echo "Retagging image..."
-          ssh $SSH_OPTS nasts "/volume1/@appstore/ContainerManager/usr/bin/docker tag localhost/nas-dashboard-dev:latest nas-dashboard-dev:latest 2>&1 && /volume1/@appstore/ContainerManager/usr/bin/docker image rm localhost/nas-dashboard-dev:latest 2>&1"
+          ssh $SSH_OPTS nasts "/volume1/@appstore/ContainerManager/usr/bin/docker tag $REGISTRY/nas-dashboard-dev:latest nas-dashboard-dev:latest 2>&1"
-          echo "Dev image transferred and retagged successfully"
+          echo "Dev image built, pushed, and transferred"
 
   deploy-dev:
     name: Deploy to Dev

.gitea/workflows/deploy.yml

@@ -174,22 +174,21 @@ jobs:
             git clone --depth=1 "http://100.78.131.124:3300/${GITHUB_REPOSITORY}.git" .
           fi
 
-      - name: Build Docker image
+      - name: Build and transfer Docker image
         run: |
           set -e
           echo "Building on VPS (SSD)..."
-          # Podman caches layers automatically; no --cache-from needed
+          REGISTRY="100.78.131.124:5501"
-          podman build -t nas-dashboard:latest dashboard/
+          TAG="$REGISTRY/nas-dashboard:$GITHUB_SHA"
-
+          LATEST_TAG="$REGISTRY/nas-dashboard:latest"
-      - name: Transfer image to NAS
+          podman build -t "$TAG" -t "$LATEST_TAG" dashboard/
-        run: |
+          echo "Pushing to local registry..."
-          set -e
+          podman push --tls-verify=false "$TAG"
+          podman push --tls-verify=false "$LATEST_TAG"
           echo "Streaming image to NAS..."
           SSH_OPTS="-o ConnectTimeout=15 -o ServerAliveInterval=15 -o ServerAliveCountMax=3"
-          podman save nas-dashboard:latest | gzip | ssh $SSH_OPTS nasts "gunzip | /volume1/@appstore/ContainerManager/usr/bin/docker load 2>&1"
+          podman save "$LATEST_TAG" | gzip | ssh $SSH_OPTS nasts "gunzip | /volume1/@appstore/ContainerManager/usr/bin/docker load 2>&1"
-          echo "Retagging image..."
+          echo "Built, pushed, and transferred: $TAG"
-          ssh $SSH_OPTS nasts "/volume1/@appstore/ContainerManager/usr/bin/docker tag localhost/nas-dashboard:latest nas-dashboard:latest 2>&1 && /volume1/@appstore/ContainerManager/usr/bin/docker image rm localhost/nas-dashboard:latest 2>&1"
-          echo "Image transferred and retagged successfully"
 
   deploy:
     name: Deploy to Production
@@ -233,7 +232,7 @@ jobs:
           docker rm -f docker-socket-proxy nas-dashboard 2>/dev/null || true
           echo "Old containers stopped and removed"
 
-          # --pull never prevents overwriting the image we just built
+          # --pull never prevents overwriting the image we just pulled
           docker compose -f /nas-dashboard/docker-compose.yml up -d --pull never 2>&1 || true
 
           if ! docker container inspect nas-dashboard >/dev/null 2>&1; then

.gitea/workflows/test.yml

@@ -1,207 +0,0 @@
-name: Run Tests
-
-on:
-  pull_request:
-    branches: [main]
-    paths:
-      - 'dashboard/**'
-      - '.gitea/workflows/test.yml'
-  workflow_dispatch:
-
-jobs:
-  gitleaks:
-    name: Secret Detection
-    runs-on: ubuntu-latest
-    steps:
-      - name: Checkout repository
-        run: |
-          if [ ! -d .git ]; then
-            git clone "http://gitea:3000/${GITHUB_REPOSITORY}.git" .
-          fi
-        continue-on-error: true
-
-      - name: Run gitleaks
-        run: |
-          # Try to run gitleaks; GitHub may be unreachable from the runner
-          if curl -fsSL --connect-timeout 10 "https://github.com/gitleaks/gitleaks/releases/download/v8.18.2/gitleaks_8.18.2_linux_x64.tar.gz" -o gitleaks.tar.gz 2>/dev/null; then
-            tar xzf gitleaks.tar.gz
-            ./gitleaks detect --source . --no-git --verbose 2>&1 || echo "gitleaks found issues (non-blocking)"
-          else
-            echo "⚠️  Skipping gitleaks — GitHub unreachable from CI runner"
-          fi
-        continue-on-error: true
-
-  backend-tests:
-    name: Backend Tests
-    runs-on: ubuntu-latest
-    env:
-      SECRET_KEY: test-secret-key-for-ci-environment-32chars-minimum
-
-    steps:
-      - name: Checkout repository
-        run: |
-          if [ ! -d .git ]; then
-            git clone --depth=1 "http://gitea:3000/${GITHUB_REPOSITORY}.git" .
-          fi
-
-      - name: Setup Python
-        run: |
-          python3 --version
-          python3 -c "import sys; assert sys.version_info[:2] == (3, 12), f'Expected Python 3.12, got {sys.version}'; print('Python 3.12 confirmed')"
-          pip3 --version
-
-      - name: Cache Python dependencies
-        id: cache-python
-        run: |
-          CACHE_KEY="python-$(cat dashboard/backend/requirements.txt dashboard/backend/requirements-dev.txt | md5sum | cut -d' ' -f1)"
-          CACHE_DIR="/tmp/pytest-cache/$CACHE_KEY"
-          PIP_CACHE_DIR="/tmp/pip-cache"
-          echo "CACHE_DIR=$CACHE_DIR" >> $GITHUB_ENV
-          echo "CACHE_KEY=$CACHE_KEY" >> $GITHUB_ENV
-          echo "PIP_CACHE_DIR=$PIP_CACHE_DIR" >> $GITHUB_ENV
-          mkdir -p "$PIP_CACHE_DIR"
-          if [ -d "$CACHE_DIR" ]; then
-            echo "Cache hit for $CACHE_KEY"
-            echo "cache-hit=true" >> $GITHUB_OUTPUT
-          else
-            echo "Cache miss for $CACHE_KEY"
-            echo "cache-hit=false" >> $GITHUB_OUTPUT
-            mkdir -p "$CACHE_DIR"
-          fi
-
-      - name: Install dependencies
-        run: |
-          cd dashboard/backend
-          if [ "${{ steps.cache-python.outputs.cache-hit }}" = "true" ]; then
-            echo "Restoring venv from cache $CACHE_KEY..."
-	    if cp -a $CACHE_DIR/venv . && [ -f venv/bin/activate ]; then
-              echo "Cache restored successfully"
-	    else
-	      echo "Cache corrupted, installing fresh..."
-              rm -rf venv
-              python3 -m venv venv
-              . venv/bin/activate
-              timeout 300 pip install --cache-dir=$PIP_CACHE_DIR --retries 3 --timeout 30 -r requirements.txt || \
-                timeout 300 pip install --cache-dir=$PIP_CACHE_DIR --index-url https://pypi.tuna.tsinghua.edu.cn/simple --trusted-host pypi.tuna.tsinghua.edu.cn -r requirements.txt || \
-                pip install -r requirements.txt
-	      timeout 300 pip install --cache-dir=$PIP_CACHE_DIR --retries 3 --timeout 30 -r requirements-dev.txt || \
-                timeout 300 pip install --cache-dir=$PIP_CACHE_DIR --index-url https://pypi.tuna.tsinghua.edu.cn/simple --trusted-host pypi.tuna.tsinghua.edu.cn -r requirements-dev.txt || \
-                pip install -r requirements-dev.txt
-	      timeout 300 pip install --cache-dir=$PIP_CACHE_DIR pytest-timeout pytest-cov || pip install pytest-timeout pytest-cov
-	    fi
-	  else
-            echo "Installing fresh dependencies..."
-            python3 -m venv venv
-            . venv/bin/activate
-            timeout 300 pip install --cache-dir=$PIP_CACHE_DIR --retries 3 --timeout 30 -r requirements.txt || \
-              timeout 300 pip install --cache-dir=$PIP_CACHE_DIR --index-url https://pypi.tuna.tsinghua.edu.cn/simple --trusted-host pypi.tuna.tsinghua.edu.cn -r requirements.txt || \
-              pip install -r requirements.txt
-            timeout 300 pip install --cache-dir=$PIP_CACHE_DIR --retries 3 --timeout 30 -r requirements-dev.txt || \
-              timeout 300 pip install --cache-dir=$PIP_CACHE_DIR --index-url https://pypi.tuna.tsinghua.edu.cn/simple --trusted-host pypi.tuna.tsinghua.edu.cn -r requirements-dev.txt || \
-              pip install -r requirements-dev.txt
-            timeout 300 pip install --cache-dir=$PIP_CACHE_DIR pytest-timeout pytest-cov || pip install pytest-timeout pytest-cov
-            echo "Saving venv to cache $CACHE_KEY..."
-	    cp -a venv $CACHE_DIR/ || echo "Warning: cache save failed"
-	  fi
-
-      - name: Run tests with coverage
-        run: |
-          cd dashboard/backend
-          . venv/bin/activate
-          pytest tests/ -v --timeout=60 \
-            --cov=. --cov-report=xml --cov-report=term \
-            --junit-xml=test-results.xml \
-            --cov-fail-under=49
-
-          if [ $? -ne 0 ]; then
-            echo "❌ Backend tests failed!"
-            exit 1
-          fi
-          echo "✅ Backend tests passed"
-
-      - name: Upload coverage report
-        if: always()
-        run: |
-          cd dashboard/backend
-          if [ -f coverage.xml ]; then
-            echo "Coverage report generated"
-            cat coverage.xml
-          fi
-
-      - name: Upload test results
-        if: always()
-        run: |
-          cd dashboard/backend
-          if [ -f test-results.xml ]; then
-            echo "Test results generated"
-            cat test-results.xml | head -50
-          fi
-
-  frontend-tests:
-    name: Frontend Tests
-    runs-on: ubuntu-latest
-
-    steps:
-      - name: Checkout repository
-        run: |
-          if [ ! -d .git ]; then
-            git clone --depth=1 "http://gitea:3000/${GITHUB_REPOSITORY}.git" .
-          fi
-
-      - name: Setup Node.js
-        run: |
-          node --version
-          echo "Node $(node --version) detected"
-          npm --version
-
-      - name: Cache Node dependencies
-        id: cache-node
-        run: |
-          CACHE_KEY="node-$(md5sum dashboard/frontend/package-lock.json | cut -d' ' -f1)"
-          CACHE_DIR="/tmp/npm-cache/$CACHE_KEY"
-          echo "CACHE_DIR=$CACHE_DIR" >> $GITHUB_ENV
-          echo "CACHE_KEY=$CACHE_KEY" >> $GITHUB_ENV
-          if [ -d "$CACHE_DIR" ]; then
-            echo "Cache hit for $CACHE_KEY"
-            echo "cache-hit=true" >> $GITHUB_OUTPUT
-          else
-            echo "Cache miss for $CACHE_KEY"
-            echo "cache-hit=false" >> $GITHUB_OUTPUT
-            mkdir -p "$CACHE_DIR"
-          fi
-
-      - name: Install dependencies
-        env:
-          NODE_OPTIONS: "--max-old-space-size=2048"
-        run: |
-          cd dashboard/frontend
-          # Use npmmirror for China accessibility
-          npm config set registry https://registry.npmmirror.com || true
-          if [ "${{ steps.cache-node.outputs.cache-hit }}" = "true" ]; then
-            echo "Restoring from cache $CACHE_KEY..."
-            if cp -a $CACHE_DIR/node_modules . && [ -d node_modules ]; then
-              echo "Cache restored successfully"
-            else
-              echo "Cache corrupted, installing fresh..."
-              rm -rf node_modules
-              npm ci || { echo "mirror failed, trying default registry..."; npm config set registry https://registry.npmjs.org; npm ci; }
-            fi
-          else
-            echo "Installing fresh dependencies..."
-            npm ci || { echo "mirror failed, trying default registry..."; npm config set registry https://registry.npmjs.org; npm ci; }
-            echo "Saving to cache $CACHE_KEY..."
-            cp -a node_modules $CACHE_DIR/ || echo "Warning: cache save failed"
-          fi
-
-      - name: Run tests
-        env:
-          NODE_OPTIONS: "--max-old-space-size=2048"
-        run: |
-          cd dashboard/frontend
-          npm run test:coverage -- --reporter=verbose --run --pool=forks --poolOptions.forks.maxForks=2
-
-          if [ $? -ne 0 ]; then
-            echo "❌ Frontend tests failed!"
-            exit 1
-          fi
-          echo "✅ Frontend tests passed"

CLAUDE.md

@@ -1,52 +1,64 @@
 # NAS Tools Project
 
-## Architecture
+## PDD Workflow
-- Synology DS224+ (x86_64, 18GB RAM), Tailscale IP: `100.78.131.124`, LAN: `192.168.31.221`
-- Docker: `/volume1/@appstore/ContainerManager/usr/bin/docker`, compose dirs: `/volume1/docker/*`
-- Caddy VPS (`161.33.182.109`, Tailscale: `100.109.198.126`): reverse proxy for `nas.jimmygan.com` → NAS:4000, `music.jimmygan.com` → NAS:4533
-- Build VPS (server2, `158.101.140.85`, Tailscale: `100.70.115.1`): podman, fast network for pulling images
 
-## Dashboard
+This project follows **PDD (Product Definition Document)** development.
+
+**Always read these files before writing code:**
+- `docs/PDD.md` — product vision, goals, targets (the north star)
+- `docs/specs/active.md` — current sprint spec (what we're building now)
+
+**Workflow:**
+1. PDD → Sprint Spec → Implementation → Validate ACs
+2. Scope changes update the sprint spec first, code second
+3. Never ship without ACs passing
+
+## Dev Commands
+
+- **Build dashboard:** `cd dashboard/frontend && npm run build`
+- **Dev dashboard:** `cd dashboard/backend && uvicorn main:app --reload` + `cd dashboard/frontend && npm run dev`
+- **Test:** `cd dashboard && python -m pytest backend/tests/`
+- **Deploy:** Push to main → Gitea CI builds + deploys to NAS
+
+## Architecture
+
+- **Synology DS224+** (x86_64, 18GB RAM), Tailscale IP: `100.78.131.124`, LAN: `192.168.31.221`
+- **Docker:** `/volume1/@appstore/ContainerManager/usr/bin/docker`, compose dirs: `/volume1/docker/*`
+- **VPS Caddy** (`161.33.182.109`, Tailscale: `100.109.198.126`): reverse proxy for `*.jimmygan.com`
+- **Build VPS** (server2, `158.101.140.85`, Tailscale: `100.70.115.1`): podman builds
+- **NAS Caddy:** port 8443 fallback only (SNI broken)
+
+### Dashboard
 - Backend: Python FastAPI (`dashboard/backend/`)
 - Frontend: Svelte 5 + Tailwind CSS (`dashboard/frontend/`)
-- Svelte 5 runes: use `$state`, `$props`, `$bindable` (not legacy `export let`)
+- Svelte 5 runes: `$state`, `$props`, `$bindable` (not `export let`)
-- Sidebar: categorized as Main (Overview, Docker, Files, Terminal), Media (Navidrome, Jellyfin, Audiobookshelf, Immich), Tools (OpenClaw, Repos, Gitea Web, Stirling PDF, Vaultwarden, Speedtest)
+- New pages: create route in `src/routes/`, import in `App.svelte`, update `Sidebar.svelte`
-- New pages: create route in `src/routes/`, import in `App.svelte`, add to appropriate category in `Sidebar.svelte`
 
-## Authentication
+### CI/CD
-- **Gitea API Access:** Use a dedicated `claude-ci-bot` user with a Personal Access Token (PAT).
+Two Gitea workflows in `.gitea/workflows/`:
-- **Secret Management:** Store the PAT in an environment variable `GITEA_TOKEN`. Avoid hardcoding paths to secret files.
+- **deploy.yml** — main branch: tests → build → deploy to production
-- **Project Secrets:** Keep sensitive configurations (like the PAT) in a local `.env` file that is ignored by git.
+- **deploy-dev.yml** — dev branch: tests → build → deploy to dev
 
-- Build images on VPS (server2) to avoid NAS HDD I/O saturation:
+Build flow: VPS builds → pushes to local registry (`100.78.131.124:5501/`) → streams to NAS → `docker compose up -d`
-  1. Build on VPS with Podman
-  2. Stream image to NAS: `podman save <image> | ssh nasts "/volume1/@appstore/ContainerManager/usr/bin/docker load"`
-  3. Deploy: `git push` triggers Gitea Actions CI (builds on VPS, transfers, then `docker compose up`) — do NOT manually restart
-- CI workflows are in `.gitea/workflows/` in this repo
 
-## claude-dev CI Contract
+## Key Files
-- Source package lives in `claude-dev/` (`Dockerfile`, `required-tools.txt`, and smoke scripts under `claude-dev/scripts/`)
+
-- CI-first only: update `claude-dev/*` in git, then push; do not do ad-hoc local image rebuild/redeploy for normal changes
+- `docs/architecture.md` — full architecture reference
-- Required capabilities are declared in `claude-dev/required-tools.txt`; adding tools must update this file and related smoke checks
+- `docs/TESTING.md` — test patterns and conventions
-- Build/deploy gate (`.gitea/workflows/deploy-claude-dev-dev.yml`) uses NAS runner with `DOCKER_BUILDKIT=0`, then runs:
+- `specs/` — sprint history
-  - tools smoke (`smoke-tools.sh`)
+- `.gitea/workflows/deploy.yml` — main CI
-  - network smoke (`smoke-network.sh`)
+- `.gitea/workflows/deploy-dev.yml` — dev CI
-  - auth/mount smoke (`smoke-auth.sh` with required runtime mounts)
+- `dashboard/backend/main.py` — FastAPI entry point
-- Deployment only happens after smoke pass, using immutable tag format `claude-dev:dev-<timestamp>-<sha>`
+- `dashboard/frontend/src/App.svelte` — Svelte entry point
-- Runtime compose definition is `claude-dev/docker-compose.yml`; CI syncs it to `/volume1/docker/claude-dev/docker-compose.yml`
-- Runtime requirements preserved: `network_mode: host`, `/volume1/repos` mount, `/root/.claude` mount, `/root/.claude.json` mount, `/root/.gitea_token` mount
-- Rollback: run workflow manually with `rollback_image` (for example the value in `/volume1/docker/claude-dev/previous-image.txt`) to redeploy a known-good immutable tag via CI
 
 ## Synology Quirks
+
 - No `crontab` — edit `/etc/crontab` with `sudo` + `printf`, restart crond
 - No `scp` subsystem — use `cat file | ssh ... 'cat > dest'`
-- ACLs override Unix perms — use `sudo chmod 777` + `synoacltool -enforce-inherit` for bind mounts
+- ACLs override Unix perms — use `sudo chmod 777` + `synoacltool -enforce-inherit`
+- Tailscale userspace mode — cannot bind Docker ports to Tailscale IPs
 
 ## DNS
+
 - dnsmasq on NAS resolves `*.jimmygan.com` → `161.33.182.109` (Caddy VPS)
 - Tailscale split DNS: `jimmygan.com` → NAS (queries hit dnsmasq)
-- All paths (LAN, Tailscale, public) route through Caddy for TLS
-
-## Proxy API
-- URL: `https://www.bytecatcode.org`
-- Models: `claude-opus-4-6`, `claude-sonnet-4-6`, `claude-haiku-4-5-20251001` (no date-suffixed names)

dashboard/backend/main.py

@@ -23,13 +23,10 @@ from config import CORS_ORIGINS, TELEGRAM_BOT_TOKEN, TELEGRAM_CHAT_ID, VOLUME_RO
 from rbac import require_page
 from routers import auth as auth_router
 from routers import (
-    cc_connect,
     chat_summary,
     conversation_tracker,
-    docker_router,
     files,
     gitea,
-    info_engine,
     litellm,
     opc_agents,
     opc_projects,
@@ -280,9 +277,6 @@ app.include_router(passkey.router, prefix="/api/auth", tags=["passkey"])
 app.include_router(totp.router, prefix="/api/auth", tags=["totp"])
 
 # Protected endpoints with page-level RBAC
-app.include_router(
-    docker_router.router, prefix="/api/docker", dependencies=[Depends(_inject_user), Depends(require_page("docker"))]
-)
 app.include_router(
     gitea.router, prefix="/api/gitea", dependencies=[Depends(_inject_user), Depends(require_page("gitea"))]
 )
@@ -297,11 +291,6 @@ app.include_router(
 app.include_router(
     litellm.router, prefix="/api/litellm", dependencies=[Depends(_inject_user), Depends(require_page("dashboard"))]
 )
-app.include_router(
-    cc_connect.router,
-    prefix="/api/cc-connect",
-    dependencies=[Depends(_inject_user), Depends(require_page("dashboard"))],
-)
 app.include_router(
     chat_summary.router,
     prefix="/api/chat-summary",
@@ -312,11 +301,6 @@ app.include_router(
     prefix="/api/conversations",
     dependencies=[Depends(_inject_user), Depends(require_page("conversations"))],
 )
-app.include_router(
-    info_engine.router,
-    prefix="/api/info-engine",
-    dependencies=[Depends(_inject_user), Depends(require_page("dashboard"))],
-)
 app.include_router(
     security.router, prefix="/api/security", dependencies=[Depends(_inject_user), Depends(require_page("security"))]
 )

dashboard/backend/rbac.py

@@ -26,7 +26,7 @@ ROLE_GROUP_MAP = {
 DEFAULT_RBAC = {
     "role_defaults": {
         "admin": {"pages": "*", "sidebar_links": "*"},
-        "member": {"pages": ["dashboard", "docker", "files", "openclaw", "chat-digest", "opc"], "sidebar_links": "*"},
+        "member": {"pages": ["dashboard", "files", "chat-digest", "opc"], "sidebar_links": "*"},
         "viewer": {"pages": ["dashboard"], "sidebar_links": ["dashboard"]},
     },
     "user_overrides": {},

dashboard/backend/routers/system.py

@@ -1,3 +1,4 @@
+import asyncio
 import os
 import platform
 import shutil
@@ -9,7 +10,7 @@ from fastapi import APIRouter, Depends, HTTPException, Query, Request
 
 import auth_service as auth
 import config
-from config import OPENCLAW_GATEWAY_TOKEN, TELEGRAM_BOT_TOKEN, TELEGRAM_CHAT_ID, VOLUME_ROOT
+from config import GITEA_TOKEN, GITEA_URL, OPENCLAW_GATEWAY_TOKEN, TELEGRAM_BOT_TOKEN, TELEGRAM_CHAT_ID, VOLUME_ROOT
 
 router = APIRouter()
 
@@ -151,6 +152,61 @@ def openclaw_token(request: Request):
     return {"token": OPENCLAW_GATEWAY_TOKEN}
 
 
+@router.get("/service-health")
+async def service_health(current_user=Depends(auth.get_current_user)):
+    """Ping all external services and return their status with latency."""
+
+    async def _ping(key: str, url: str) -> dict:
+        start = time.monotonic()
+        try:
+            async with httpx.AsyncClient(timeout=5.0) as client:
+                r = await client.head(url, follow_redirects=True)
+            latency_ms = round((time.monotonic() - start) * 1000)
+            status = "up" if r.status_code < 500 else "down"
+        except httpx.TimeoutException:
+            latency_ms = round((time.monotonic() - start) * 1000)
+            status = "down"
+        except Exception:
+            latency_ms = round((time.monotonic() - start) * 1000)
+            status = "error"
+        return key, {"url": url, "status": status, "latency_ms": latency_ms}
+
+    results = await asyncio.gather(
+        *(_ping(key, url) for key, url in config.EXTERNAL_SERVICES.items())
+    )
+    return {"services": dict(results)}
+
+
+_CI_HEADERS = {"Authorization": f"token {GITEA_TOKEN}"} if GITEA_TOKEN else {}
+
+
+@router.get("/ci-runs")
+async def ci_runs():
+    """Fetch recent Gitea Actions CI runs for jimmy/nas-tools."""
+    async with httpx.AsyncClient(timeout=10) as c:
+        r = await c.get(
+            f"{GITEA_URL}/api/v1/repos/jimmy/nas-tools/actions/runs",
+            headers=_CI_HEADERS,
+            params={"limit": 5},
+        )
+        r.raise_for_status()
+        data = r.json()
+    runs = []
+    for wf in data.get("workflow_runs", []):
+        runs.append(
+            {
+                "id": wf.get("id"),
+                "status": wf.get("status"),
+                "event": wf.get("event"),
+                "head_branch": wf.get("head_branch"),
+                "head_sha": (wf.get("head_sha") or "")[:12],
+                "display_title": wf.get("display_title"),
+                "run_number": wf.get("run_number"),
+            }
+        )
+    return {"workflow_runs": runs}
+
+
 @router.get("/external-services")
 def external_services():
     """Return external service URLs and network config for the frontend sidebar."""

dashboard/backend/tests/conftest.py

@@ -71,7 +71,7 @@ def temp_rbac_file(temp_volume_root):
     data = {
         "role_defaults": {
             "admin": {"pages": "*", "sidebar_links": "*"},
-            "member": {"pages": ["dashboard", "docker"], "sidebar_links": "*"},
+            "member": {"pages": ["dashboard"], "sidebar_links": "*"},
             "viewer": {"pages": ["dashboard"], "sidebar_links": ["dashboard"]},
         },
         "user_overrides": {},
@@ -470,11 +470,11 @@ def mock_rbac_data():
     return {
         "role_defaults": {
             "admin": {"pages": "*", "sidebar_links": "*"},
-            "member": {"pages": ["dashboard", "docker", "files"], "sidebar_links": "*"},
+            "member": {"pages": ["dashboard", "files"], "sidebar_links": "*"},
             "viewer": {"pages": ["dashboard"], "sidebar_links": ["dashboard"]},
         },
         "user_overrides": {
-            "customuser": {"pages": ["dashboard", "docker"], "sidebar_links": ["dashboard", "docker", "files"]}
+            "customuser": {"pages": ["dashboard"], "sidebar_links": ["dashboard", "files"]}
         },
     }
 

dashboard/backend/tests/integration/test_docker.py

@@ -1,158 +0,0 @@
-"""
-Integration tests for Docker operations.
-"""
-
-import pytest
-
-
-class TestDockerContainerList:
-    """Test listing Docker containers."""
-
-    def test_list_containers_success(self, test_app, admin_headers):
-        """Test listing containers successfully."""
-        response = test_app.get("/api/docker/containers", headers=admin_headers)
-
-        assert response.status_code == 200
-        data = response.json()
-        assert isinstance(data, list)
-        if len(data) > 0:
-            container = data[0]
-            assert "id" in container
-            assert "name" in container
-            assert "status" in container
-
-    def test_list_containers_without_auth(self, test_app):
-        """Test listing containers without authentication."""
-        response = test_app.get("/api/docker/containers")
-
-        assert response.status_code == 401
-
-
-class TestDockerContainerActions:
-    """Test Docker container start/stop/restart actions."""
-
-    def test_start_container_success(self, test_app, admin_headers, mock_docker_client):
-        """Test starting a container."""
-        container_id = "abc123"
-
-        response = test_app.post(f"/api/docker/containers/{container_id}/start", headers=admin_headers)
-
-        assert response.status_code == 200
-        data = response.json()
-        assert data["ok"] is True
-
-    def test_stop_container_success(self, test_app, admin_headers, mock_docker_client):
-        """Test stopping a container."""
-        container_id = "abc123"
-
-        response = test_app.post(f"/api/docker/containers/{container_id}/stop", headers=admin_headers)
-
-        assert response.status_code == 200
-
-    def test_restart_container_success(self, test_app, admin_headers, mock_docker_client):
-        """Test restarting a container."""
-        container_id = "abc123"
-
-        response = test_app.post(f"/api/docker/containers/{container_id}/restart", headers=admin_headers)
-
-        assert response.status_code == 200
-
-    def test_container_action_without_auth(self, test_app):
-        """Test container action without authentication."""
-        response = test_app.post("/api/docker/containers/abc123/start")
-
-        assert response.status_code == 401
-
-    def test_container_action_invalid_action(self, test_app, admin_headers):
-        """Test container action with invalid action."""
-        response = test_app.post("/api/docker/containers/abc123/invalid_action", headers=admin_headers)
-
-        assert response.status_code == 400
-        data = response.json()
-        assert "detail" in data
-
-
-class TestDockerContainerLogs:
-    """Test Docker container logs retrieval."""
-
-    def test_get_container_logs_success(self, test_app, admin_headers, mock_docker_client):
-        """Test getting container logs."""
-        container_id = "abc123"
-
-        response = test_app.get(f"/api/docker/containers/{container_id}/logs", headers=admin_headers)
-
-        assert response.status_code == 200
-        data = response.json()
-        assert "logs" in data or isinstance(data, str)
-
-    def test_get_container_logs_with_tail(self, test_app, admin_headers, mock_docker_client):
-        """Test getting container logs with tail limit."""
-        container_id = "abc123"
-
-        response = test_app.get(f"/api/docker/containers/{container_id}/logs?tail=100", headers=admin_headers)
-
-        assert response.status_code == 200
-
-    def test_get_container_logs_without_auth(self, test_app):
-        """Test getting logs without authentication."""
-        response = test_app.get("/api/docker/containers/abc123/logs")
-
-        assert response.status_code == 401
-
-    def test_get_container_logs_nonexistent(self, test_app, admin_headers, mock_docker_client):
-        """Test getting logs for nonexistent container."""
-        # Note: In this test setup, the mock always returns a container
-        # Testing actual error handling would require a different approach
-        # For now, verify the endpoint works with the mock
-        response = test_app.get("/api/docker/containers/nonexistent/logs", headers=admin_headers)
-
-        # With the current mock setup, this will succeed
-        assert response.status_code == 200
-
-
-class TestDockerPermissions:
-    """Test Docker operation permissions."""
-
-    @pytest.fixture
-    def member_token(self, mock_config, temp_auth_file, temp_rbac_file):
-        """Create token for member role."""
-        from datetime import timedelta
-
-        from auth_service import create_access_token
-
-        return create_access_token(data={"sub": "memberuser", "role": "member"}, expires_delta=timedelta(minutes=30))
-
-    @pytest.fixture
-    def member_headers(self, member_token):
-        """Headers with member access token."""
-        return {"Authorization": f"Bearer {member_token}"}
-
-    def test_member_can_list_containers(self, test_app, member_headers):
-        """Test that member can list containers."""
-        response = test_app.get("/api/docker/containers", headers=member_headers)
-
-        # Members should be able to view containers
-        assert response.status_code == 200
-
-    def test_member_cannot_start_container(self, test_app, member_headers):
-        """Test that member cannot start containers (admin only)."""
-        response = test_app.post("/api/docker/containers/abc123/start", headers=member_headers)
-
-        # Should be forbidden for non-admin
-        assert response.status_code == 403
-
-    def test_viewer_can_list_containers(self, test_app, mock_config, temp_auth_file, temp_rbac_file):
-        """Test that viewer can list containers if they have docker page access."""
-        from datetime import timedelta
-
-        from auth_service import create_access_token
-
-        viewer_token = create_access_token(
-            data={"sub": "vieweruser", "role": "viewer"}, expires_delta=timedelta(minutes=30)
-        )
-        headers = {"Authorization": f"Bearer {viewer_token}"}
-
-        response = test_app.get("/api/docker/containers", headers=headers)
-
-        # Viewer may not have docker page access by default
-        assert response.status_code in [200, 403]

dashboard/backend/tests/unit/test_rbac.py

@@ -182,7 +182,6 @@ class TestGetPages:
         pages = get_pages("testuser", "member")
         assert isinstance(pages, list)
         assert "dashboard" in pages
-        assert "docker" in pages
 
     def test_get_pages_viewer_default(self, mock_config, temp_rbac_file):
         """Test getting pages for viewer with default settings."""

dashboard/frontend/src/App.svelte

@@ -1,5 +1,6 @@
 <script>
   import Sidebar from "./components/Sidebar.svelte";
+  import CommandPalette from "./components/CommandPalette.svelte";
   import Dashboard from "./routes/Dashboard.svelte";
   import Gitea from "./routes/Gitea.svelte";
   import Files from "./routes/Files.svelte";
@@ -29,6 +30,36 @@
     "transmission",
   ]);
 
+  const navItems = [
+    // Main
+    { id: "dashboard", label: "Overview", section: "main", description: "System stats, service health, CI runs" },
+    { id: "litellm", label: "LiteLLM", section: "main", description: "LLM proxy and model management" },
+    { id: "opc", label: "OPC", section: "main", description: "Open Project Console — kanban and agents" },
+    { id: "files", label: "Files", section: "main", description: "NAS file browser" },
+    { id: "terminal", label: "Terminal", section: "main", description: "SSH terminal to NAS" },
+    { id: "security", label: "Security", section: "main", description: "WebAuthn passkeys and TOTP" },
+    // Media
+    { id: "transmission", label: "Transmission", section: "media", description: "BitTorrent client" },
+    { label: "Navidrome", section: "media", remoteHref: "https://music.jimmygan.com", description: "Music streaming" },
+    { label: "Jellyfin", section: "media", remoteHref: "https://media.jimmygan.com", description: "Media server" },
+    { label: "Audiobookshelf", section: "media", remoteHref: "https://books.jimmygan.com", description: "Audiobooks & podcasts" },
+    { label: "Immich", section: "media", remoteHref: "https://photos.jimmygan.com", description: "Photo and video backup" },
+    { label: "t-youtube", section: "media", remoteHref: "https://yt.jimmygan.com", description: "YouTube subscription reader" },
+    { label: "Media Management", section: "media", remoteHref: "https://media.jimmygan.com", description: "Media library management" },
+    // Tools
+    { id: "chat-digest", label: "Chat Digest", section: "tools", description: "Telegram group summaries" },
+    { id: "conversations", label: "Code Sessions", section: "tools", description: "Claude Code session browser" },
+    { id: "gitea", label: "Repos", section: "tools", description: "Gitea repository list" },
+    { label: "Gitea Web", section: "tools", remoteHref: "https://git.jimmygan.com", description: "Gitea web interface" },
+    { label: "Hermes", section: "tools", remoteHref: "https://hermes-agent.nousresearch.com/docs", description: "Hermes Agent docs" },
+    { label: "Stirling PDF", section: "tools", remoteHref: "https://pdf.jimmygan.com", description: "PDF tools" },
+    { label: "Vaultwarden", section: "tools", remoteHref: "https://vault.jimmygan.com", description: "Password manager" },
+    { label: "n8n", section: "tools", remoteHref: "https://n8n.jimmygan.com", description: "Workflow automation" },
+    { label: "Speedtest", section: "tools", remoteHref: "https://speed.jimmygan.com", description: "Network speed test" },
+    // Settings
+    { id: "settings", label: "Settings", section: "tools", description: "Dashboard configuration" },
+  ];
+
   let page = $state("dashboard");
   let dark = $state(false);
   let sidebarOpen = $state(false);
@@ -177,6 +208,7 @@
 {:else}
   <div class="flex h-screen overflow-hidden bg-surface-50 dark:bg-surface-900">
     <Sidebar bind:page {dark} {toggleTheme} {logout} bind:sidebarOpen {allowedPages} {allowedSidebarLinks} {userRole} {sidebarOrder} onOrderChange={handleOrderChange} />
+    <CommandPalette items={navItems} onNavigate={(id) => page = id} />
     <main class="flex-1 overflow-auto">
       <div class="max-w-[1400px] mx-auto p-6 lg:p-8">
         <!-- Mobile hamburger -->

dashboard/frontend/src/components/CommandPalette.svelte

@@ -0,0 +1,138 @@
+<script>
+  let { items = [], onNavigate = () => {}, onOpenExternal = () => {} } = $props();
+
+  let open = $state(false);
+  let query = $state("");
+  let selectedIndex = $state(0);
+  let inputEl = $state(null);
+
+  function fuzzyMatch(text, q) {
+    if (!q) return true;
+    const lower = text.toLowerCase();
+    const ql = q.toLowerCase();
+    let qi = 0;
+    for (let i = 0; i < lower.length && qi < ql.length; i++) {
+      if (lower[i] === ql[qi]) qi++;
+    }
+    return qi === ql.length;
+  }
+
+  let filtered = $derived(
+    items.filter(i => fuzzyMatch(i.label + " " + (i.section || ""), query))
+  );
+
+  function handleKeydown(e) {
+    if ((e.metaKey || e.ctrlKey) && e.key === "k") {
+      e.preventDefault();
+      open = !open;
+      if (open) {
+        query = "";
+        selectedIndex = 0;
+      }
+    }
+    if (!open) return;
+    if (e.key === "ArrowDown") {
+      e.preventDefault();
+      selectedIndex = Math.min(selectedIndex + 1, filtered.length - 1);
+    } else if (e.key === "ArrowUp") {
+      e.preventDefault();
+      selectedIndex = Math.max(selectedIndex - 1, 0);
+    } else if (e.key === "Enter" && filtered[selectedIndex]) {
+      e.preventDefault();
+      select(filtered[selectedIndex]);
+    } else if (e.key === "Escape") {
+      e.preventDefault();
+      open = false;
+    }
+  }
+
+  function select(item) {
+    open = false;
+    if (item.external || item.remoteHref) {
+      window.open(item.remoteHref || item.href, "_blank", "noopener");
+    } else if (item.id) {
+      onNavigate(item.id);
+    }
+  }
+
+  function sectionClass(section) {
+    if (section === "main") return "text-sky-500";
+    if (section === "media") return "text-violet-500";
+    if (section === "tools") return "text-amber-500";
+    return "text-surface-400";
+  }
+</script>
+
+<svelte:window onkeydown={handleKeydown} />
+
+{#if open}
+  <!-- Overlay -->
+  <button class="fixed inset-0 bg-black/40 z-[100] backdrop-blur-sm" onclick={() => open = false}></button>
+
+  <!-- Palette -->
+  <div class="fixed top-[15%] left-1/2 -translate-x-1/2 z-[101] w-[520px] max-w-[90vw]" role="dialog" aria-modal="true">
+    <div class="bg-white dark:bg-surface-800 rounded-2xl border border-surface-200 dark:border-surface-700 shadow-2xl overflow-hidden">
+      <!-- Search -->
+      <div class="flex items-center px-4 border-b border-surface-200 dark:border-surface-700">
+        <svg class="w-4 h-4 text-surface-400 shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" /></svg>
+        <input
+          bind:this={inputEl}
+          type="text"
+          placeholder="Search services, pages, actions..."
+          bind:value={query}
+          class="w-full bg-transparent border-none outline-none px-3 py-4 text-sm text-surface-800 dark:text-surface-200 placeholder-surface-400"
+          autofocus
+        />
+        <kbd class="text-[10px] font-mono px-1.5 py-0.5 rounded bg-surface-100 dark:bg-surface-700 text-surface-400">esc</kbd>
+      </div>
+
+      <!-- Results -->
+      <div class="max-h-[360px] overflow-y-auto p-2">
+        {#if filtered.length === 0}
+          <div class="py-8 text-center text-sm text-surface-400">No results found</div>
+        {:else}
+          {#each filtered as item, i}
+            <button
+              class="w-full text-left px-3 py-2.5 rounded-xl text-sm flex items-center gap-3 transition-all duration-100
+                {i === selectedIndex
+                  ? 'bg-primary-50 dark:bg-primary-900/30 text-primary-700 dark:text-primary-300 shadow-sm'
+                  : 'text-surface-600 dark:text-surface-300 hover:bg-surface-100 dark:hover:bg-surface-700'}
+              "
+              onmouseenter={() => selectedIndex = i}
+              onclick={() => select(item)}
+            >
+              <span class="w-6 h-6 rounded-lg flex items-center justify-center text-xs font-bold uppercase {sectionClass(item.section)}">
+                {item.section ? item.section[0] : "?"}
+              </span>
+              <div class="flex-1 min-w-0">
+                <div class="font-medium truncate">{item.label}</div>
+                {#if item.description}
+                  <div class="text-[11px] text-surface-400 truncate">{item.description}</div>
+                {/if}
+              </div>
+              {#if item.external || item.remoteHref}
+                <svg class="w-3 h-3 text-surface-400 shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14" /></svg>
+              {/if}
+            </button>
+          {/each}
+        {/if}
+      </div>
+
+      <!-- Footer hint -->
+      <div class="flex items-center gap-4 px-4 py-2.5 border-t border-surface-200 dark:border-surface-700 bg-surface-50 dark:bg-surface-800/50">
+        <div class="flex items-center gap-1.5 text-[10px] text-surface-400">
+          <kbd class="font-mono px-1 py-0.5 rounded bg-surface-200 dark:bg-surface-600 text-surface-500">↑↓</kbd>
+          <span>Navigate</span>
+        </div>
+        <div class="flex items-center gap-1.5 text-[10px] text-surface-400">
+          <kbd class="font-mono px-1 py-0.5 rounded bg-surface-200 dark:bg-surface-600 text-surface-500">↵</kbd>
+          <span>Open</span>
+        </div>
+        <div class="flex items-center gap-1.5 text-[10px] text-surface-400">
+          <kbd class="font-mono px-1 py-0.5 rounded bg-surface-200 dark:bg-surface-600 text-surface-500">esc</kbd>
+          <span>Close</span>
+        </div>
+      </div>
+    </div>
+  </div>
+{/if}

dashboard/frontend/src/routes/CcConnect.svelte

@@ -1,155 +0,0 @@
-<script>
-  import { onMount } from "svelte";
-  import { getCcConnectHealth, startCcConnect, stopCcConnect } from "../lib/api.js";
-
-  let loading = $state(true);
-  let health = $state(null);
-  let requestError = $state("");
-  let actionLoading = $state("");
-
-  async function loadHealth() {
-    loading = true;
-    requestError = "";
-    try {
-      health = await getCcConnectHealth();
-    } catch (e) {
-      requestError = e?.body?.detail || e?.message || "Failed to load cc-connect health";
-      health = null;
-    } finally {
-      loading = false;
-    }
-  }
-
-  async function runAction(action) {
-    actionLoading = action;
-    requestError = "";
-    try {
-      const result = action === "start" ? await startCcConnect() : await stopCcConnect();
-      if (!result?.ok) {
-        requestError = result?.error || `Failed to ${action} cc-connect`;
-      }
-    } catch (e) {
-      requestError = e?.body?.detail || e?.message || `Failed to ${action} cc-connect`;
-    } finally {
-      actionLoading = "";
-      await loadHealth();
-    }
-  }
-
-  function statusBadgeClass(status) {
-    if (status === "up") {
-      return "bg-emerald-100 text-emerald-700 dark:bg-emerald-900/40 dark:text-emerald-300";
-    }
-    return "bg-rose-100 text-rose-700 dark:bg-rose-900/40 dark:text-rose-300";
-  }
-
-  function valueOrDash(value) {
-    return value === null || value === undefined || value === "" ? "—" : value;
-  }
-
-  onMount(loadHealth);
-</script>
-
-<div class="space-y-6">
-  <div class="flex items-center justify-between">
-    <div>
-      <h1 class="text-2xl font-bold text-surface-900 dark:text-white tracking-tight">cc-connect</h1>
-      <p class="text-sm text-surface-400 mt-1">Mobile bridge operational status</p>
-      <div class="mt-2 flex flex-wrap items-center gap-2 text-[11px] font-medium">
-        <span class="px-2 py-0.5 rounded-full bg-emerald-100 text-emerald-700 dark:bg-emerald-900/40 dark:text-emerald-300">up</span>
-        <span class="px-2 py-0.5 rounded-full bg-rose-100 text-rose-700 dark:bg-rose-900/40 dark:text-rose-300">down</span>
-      </div>
-    </div>
-    <div class="flex items-center gap-2">
-      {#if health?.container_status === "running"}
-        <button
-          onclick={() => runAction("stop")}
-          disabled={loading || actionLoading === "stop"}
-          class="px-3 py-1.5 text-xs font-medium text-rose-600 bg-rose-50 hover:bg-rose-100 rounded-lg transition-colors disabled:opacity-50"
-        >
-          {actionLoading === "stop" ? "Stopping..." : "Stop"}
-        </button>
-      {:else}
-        <button
-          onclick={() => runAction("start")}
-          disabled={loading || actionLoading === "start"}
-          class="px-3 py-1.5 text-xs font-medium text-emerald-600 bg-emerald-50 hover:bg-emerald-100 rounded-lg transition-colors disabled:opacity-50"
-        >
-          {actionLoading === "start" ? "Starting..." : "Start"}
-        </button>
-      {/if}
-      <button onclick={loadHealth} disabled={loading || Boolean(actionLoading)} class="px-3 py-1.5 text-xs font-medium text-primary-600 bg-primary-50 hover:bg-primary-100 rounded-lg transition-colors disabled:opacity-50 dark:bg-primary-900/30 dark:text-primary-300">
-        {loading ? "Loading..." : "Refresh"}
-      </button>
-    </div>
-  </div>
-
-  {#if requestError}
-    <div class="bg-rose-50 dark:bg-rose-900/20 border border-rose-200 dark:border-rose-700 rounded-xl p-4 shadow-sm">
-      <p class="text-sm font-medium text-rose-700 dark:text-rose-300">cc-connect action failed</p>
-      <p class="text-xs text-rose-600 dark:text-rose-400 mt-1">{requestError}</p>
-    </div>
-  {/if}
-
-  <div class="bg-white dark:bg-surface-800 rounded-xl border border-surface-200 dark:border-surface-700 p-5 shadow-sm">
-    {#if loading && !health}
-      <div class="space-y-3">
-        <div class="h-6 w-36 rounded bg-surface-100 dark:bg-surface-700 animate-pulse"></div>
-        <div class="grid grid-cols-1 sm:grid-cols-2 gap-3">
-          {#each Array(8) as _}
-            <div class="h-16 rounded-lg bg-surface-100 dark:bg-surface-700 animate-pulse"></div>
-          {/each}
-        </div>
-      </div>
-    {:else if health}
-      <div class="flex items-center justify-between mb-4">
-        <h3 class="text-sm font-semibold text-surface-700 dark:text-surface-200">Health Status</h3>
-        <span class="px-2.5 py-1 text-xs font-semibold rounded-full {statusBadgeClass(health.status)}">{valueOrDash(health.status)}</span>
-      </div>
-
-      <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-3">
-        <div class="rounded-lg border border-surface-200 dark:border-surface-700 p-3">
-          <p class="text-xs font-medium text-surface-400 uppercase tracking-wider">OK</p>
-          <p class="text-sm font-semibold text-surface-800 dark:text-surface-100 mt-1">{String(Boolean(health.ok))}</p>
-        </div>
-
-        <div class="rounded-lg border border-surface-200 dark:border-surface-700 p-3">
-          <p class="text-xs font-medium text-surface-400 uppercase tracking-wider">Source</p>
-          <p class="text-sm font-semibold text-surface-800 dark:text-surface-100 mt-1">{valueOrDash(health.source)}</p>
-        </div>
-
-        <div class="rounded-lg border border-surface-200 dark:border-surface-700 p-3">
-          <p class="text-xs font-medium text-surface-400 uppercase tracking-wider">Container</p>
-          <p class="text-sm font-semibold text-surface-800 dark:text-surface-100 mt-1">{valueOrDash(health.container_name)}</p>
-        </div>
-
-        <div class="rounded-lg border border-surface-200 dark:border-surface-700 p-3">
-          <p class="text-xs font-medium text-surface-400 uppercase tracking-wider">Container Status</p>
-          <p class="text-sm font-semibold text-surface-800 dark:text-surface-100 mt-1">{valueOrDash(health.container_status)}</p>
-        </div>
-
-        <div class="rounded-lg border border-surface-200 dark:border-surface-700 p-3">
-          <p class="text-xs font-medium text-surface-400 uppercase tracking-wider">Endpoint</p>
-          <p class="text-sm font-semibold text-surface-800 dark:text-surface-100 mt-1 break-all">{valueOrDash(health.endpoint)}</p>
-        </div>
-
-        <div class="rounded-lg border border-surface-200 dark:border-surface-700 p-3">
-          <p class="text-xs font-medium text-surface-400 uppercase tracking-wider">HTTP Status</p>
-          <p class="text-sm font-semibold text-surface-800 dark:text-surface-100 mt-1">{valueOrDash(health.http_status)}</p>
-        </div>
-
-        <div class="rounded-lg border border-surface-200 dark:border-surface-700 p-3">
-          <p class="text-xs font-medium text-surface-400 uppercase tracking-wider">Latency</p>
-          <p class="text-sm font-semibold text-surface-800 dark:text-surface-100 mt-1">{health.latency_ms === null || health.latency_ms === undefined ? "—" : `${health.latency_ms} ms`}</p>
-        </div>
-
-        <div class="rounded-lg border border-surface-200 dark:border-surface-700 p-3 sm:col-span-2 lg:col-span-2">
-          <p class="text-xs font-medium text-surface-400 uppercase tracking-wider">Error</p>
-          <p class="text-sm font-semibold text-surface-800 dark:text-surface-100 mt-1 break-all">{valueOrDash(health.error)}</p>
-        </div>
-      </div>
-    {:else}
-      <p class="text-sm text-surface-400">No health data available.</p>
-    {/if}
-  </div>
-</div>

dashboard/frontend/src/routes/Dashboard.svelte

@@ -1,23 +1,31 @@
 <script>
   import { onMount, onDestroy } from "svelte";
-  import { get } from "../lib/api.js";
+  import { get, getPreferences, savePreferences } from "../lib/api.js";
 
-  let containers = $state([]);
-  let repos = $state([]);
   let stats = $state(null);
+  let services = $state([]);
+  let ciRuns = $state([]);
   let loading = $state(true);
+  let serviceLoading = $state(true);
+  let ciLoading = $state(true);
+  let pinned = $state([]);
+  let editPinned = $state(false);
 
-  async function load() {
+  // Nav items for pinning
-    const [c, g, s] = await Promise.all([
+  const allNavItems = [
-      get("/docker/containers"),
+    { id: "litellm", label: "LiteLLM", icon: "bolt" },
-      get("/gitea/repos"),
+    { id: "opc", label: "OPC", icon: "kanban" },
-      get("/system/stats"),
+    { id: "files", label: "Files", icon: "folder" },
-    ]);
+    { id: "terminal", label: "Terminal", icon: "terminal" },
-    containers = c || [];
+    { id: "transmission", label: "Transmission", icon: "download" },
-    repos = Array.isArray(g) ? g : g?.data || [];
+    { label: "Navidrome", icon: "music", remoteHref: "https://music.jimmygan.com" },
-    stats = s;
+    { label: "Jellyfin", icon: "play", remoteHref: "https://media.jimmygan.com" },
-    loading = false;
+    { label: "Immich", icon: "image", remoteHref: "https://photos.jimmygan.com" },
-  }
+    { label: "Audiobookshelf", icon: "headphones", remoteHref: "https://books.jimmygan.com" },
+    { label: "t-youtube", icon: "youtube", remoteHref: "https://yt.jimmygan.com" },
+    { id: "chat-digest", label: "Chat Digest", icon: "chat" },
+    { id: "gitea", label: "Repos", icon: "git" },
+  ];
 
   function fmtBytes(b) {
     if (!b) return "0 B";
@@ -32,17 +40,99 @@
     return "text-emerald-500";
   }
 
+  function statusColor(status) {
+    if (status === "up") return "bg-emerald-400";
+    if (status === "down") return "bg-rose-400";
+    return "bg-surface-300";
+  }
+
+  function statusLabel(status) {
+    if (status === "up") return "Up";
+    if (status === "down") return "Down";
+    return "Error";
+  }
+
+  function ciStatusBadge(status) {
+    if (status === "success") return "bg-emerald-100 text-emerald-700 dark:bg-emerald-900/40 dark:text-emerald-300";
+    if (status === "failure") return "bg-rose-100 text-rose-700 dark:bg-rose-900/40 dark:text-rose-300";
+    if (status === "in_progress" || status === "running") return "bg-sky-100 text-sky-700 dark:bg-sky-900/40 dark:text-sky-300";
+    if (status === "cancelled") return "bg-surface-100 text-surface-500 dark:bg-surface-800 dark:text-surface-400";
+    return "bg-amber-100 text-amber-700 dark:bg-amber-900/40 dark:text-amber-300";
+  }
+
+  function openExternal(href) {
+    if (href) window.open(href, "_blank", "noopener");
+  }
+
+  function togglePin(item) {
+    const key = item.id || item.label;
+    if (pinned.some(p => (p.id || p.label) === key)) {
+      pinned = pinned.filter(p => (p.id || p.label) !== key);
+    } else {
+      pinned = [...pinned, item];
+    }
+    savePreferences({ pinned: pinned.map(p => p.id || p.label) }).catch(() => {});
+  }
+
+  function isPinned(item) {
+    const key = item.id || item.label;
+    return pinned.some(p => (p.id || p.label) === key);
+  }
+
   let interval;
 
-  onMount(() => { load(); interval = setInterval(load, 10000); });
+  onMount(async () => {
+    // Load stats
+    const [s, prefs] = await Promise.all([
+      get("/system/stats").catch(() => null),
+      getPreferences().catch(() => ({})),
+    ]);
+    stats = s;
+    loading = false;
+
+    // Load pinned from prefs
+    const savedPins = prefs.pinned || [];
+    if (savedPins.length > 0) {
+      pinned = savedPins.map(key => allNavItems.find(i => (i.id || i.label) === key)).filter(Boolean);
+    } else {
+      pinned = allNavItems.slice(0, 4);
+    }
+
+    // Load service health
+    loadServices();
+    loadCIRuns();
+    interval = setInterval(() => { loadServices(); loadCIRuns(); }, 30000);
+  });
+
   onDestroy(() => clearInterval(interval));
+
+  async function loadServices() {
+    const data = await get("/system/service-health").catch(() => null);
+    if (data?.services) {
+      services = Object.entries(data.services).map(([key, val]) => ({ key, ...val }));
+    }
+    serviceLoading = false;
+  }
+
+  async function loadCIRuns() {
+    const data = await get("/system/ci-runs").catch(() => null);
+    ciRuns = data?.workflow_runs || [];
+    ciLoading = false;
+  }
 </script>
 
 <div class="space-y-8">
+  <!-- Header -->
+  <div class="flex items-center justify-between">
     <div>
       <h1 class="text-2xl font-bold text-surface-900 dark:text-white tracking-tight">Overview</h1>
       <p class="text-sm text-surface-400 mt-1">System status at a glance</p>
     </div>
+    <div class="flex items-center gap-2">
+      <span class="text-[11px] text-surface-400 hidden sm:inline">Cmd+K to search</span>
+      <kbd class="hidden sm:inline text-[10px] font-mono px-1.5 py-0.5 rounded bg-surface-100 dark:bg-surface-700 text-surface-400 border border-surface-200 dark:border-surface-600">⌘K</kbd>
+    </div>
+  </div>
 
   {#if loading}
     <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
@@ -51,9 +141,47 @@
       {/each}
     </div>
   {:else}
+    <!-- Pinned Shortcuts -->
+    <div class="flex items-center gap-2 flex-wrap">
+      {#each pinned as item}
+        <button
+          class="flex items-center gap-2 px-3 py-2 rounded-xl text-sm font-medium bg-white dark:bg-surface-800 border border-surface-200 dark:border-surface-700 text-surface-700 dark:text-surface-200 hover:bg-primary-50 dark:hover:bg-primary-900/20 hover:border-primary-300 dark:hover:border-primary-700 hover:text-primary-700 dark:hover:text-primary-300 shadow-sm transition-all duration-150"
+          onclick={() => item.remoteHref ? openExternal(item.remoteHref) : window.location.href = `/?page=${item.id}`}
+        >
+          <span class="w-5 h-5 rounded-md bg-primary-100 dark:bg-primary-900/40 flex items-center justify-center text-[10px] font-bold text-primary-600 dark:text-primary-400">
+            {item.label[0]}
+          </span>
+          {item.label}
+        </button>
+      {/each}
+      <button
+        class="p-2 rounded-xl text-surface-400 hover:bg-surface-100 dark:hover:bg-surface-700 transition-all"
+        onclick={() => editPinned = !editPinned}
+        title="Edit pinned shortcuts"
+      >
+        <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.066 2.573c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.573 1.066c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.066-2.573c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" /><path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" /></svg>
+      </button>
+    </div>
+
+    <!-- Edit pinned panel -->
+    {#if editPinned}
+      <div class="bg-white dark:bg-surface-800 rounded-xl border border-surface-200 dark:border-surface-700 p-4 shadow-sm">
+        <p class="text-xs font-semibold uppercase tracking-wider text-surface-400 mb-3">Pin your favorite services</p>
+        <div class="flex flex-wrap gap-2">
+          {#each allNavItems as item}
+            <button
+              class="px-3 py-1.5 rounded-lg text-xs font-medium transition-all {isPinned(item) ? 'bg-primary-100 text-primary-700 dark:bg-primary-900/40 dark:text-primary-300 ring-1 ring-primary-300' : 'bg-surface-100 text-surface-500 dark:bg-surface-700 dark:text-surface-400 hover:bg-surface-200 dark:hover:bg-surface-600'}"
+              onclick={() => togglePin(item)}
+            >
+              {item.label}
+            </button>
+          {/each}
+        </div>
+      </div>
+    {/if}
+
     <!-- Stats Cards -->
     <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
-      <!-- CPU -->
       <div class="bg-white dark:bg-surface-800 rounded-xl border border-surface-200 dark:border-surface-700 p-5 shadow-sm hover:shadow-md transition-shadow duration-200">
         <div class="flex items-center justify-between mb-3">
           <p class="text-xs font-semibold uppercase tracking-wider text-surface-400">CPU</p>
@@ -65,7 +193,6 @@
         <p class="text-xs text-surface-400 mt-1">{stats?.cpu_count || 0} cores · Load {stats?.load_avg?.[0] || 0}</p>
       </div>
 
-      <!-- Memory -->
       <div class="bg-white dark:bg-surface-800 rounded-xl border border-surface-200 dark:border-surface-700 p-5 shadow-sm hover:shadow-md transition-shadow duration-200">
         <div class="flex items-center justify-between mb-3">
           <p class="text-xs font-semibold uppercase tracking-wider text-surface-400">Memory</p>
@@ -77,7 +204,6 @@
         <p class="text-xs text-surface-400 mt-1">{fmtBytes(stats?.memory?.used)} / {fmtBytes(stats?.memory?.total)}</p>
       </div>
 
-      <!-- Disk -->
       <div class="bg-white dark:bg-surface-800 rounded-xl border border-surface-200 dark:border-surface-700 p-5 shadow-sm hover:shadow-md transition-shadow duration-200">
         <div class="flex items-center justify-between mb-3">
           <p class="text-xs font-semibold uppercase tracking-wider text-surface-400">Disk</p>
@@ -89,7 +215,6 @@
         <p class="text-xs text-surface-400 mt-1">{fmtBytes(stats?.disk?.free)} free of {fmtBytes(stats?.disk?.total)}</p>
       </div>
 
-      <!-- Uptime -->
       <div class="bg-white dark:bg-surface-800 rounded-xl border border-surface-200 dark:border-surface-700 p-5 shadow-sm hover:shadow-md transition-shadow duration-200">
         <div class="flex items-center justify-between mb-3">
           <p class="text-xs font-semibold uppercase tracking-wider text-surface-400">Uptime</p>
@@ -102,50 +227,74 @@
       </div>
     </div>
 
-    <!-- Services Grid -->
+    <!-- Widget Grid -->
-    <div class="grid grid-cols-1 lg:grid-cols-2 gap-4">
+    <div class="grid grid-cols-1 lg:grid-cols-3 gap-4">
-      <!-- Docker Summary -->
+      <!-- Service Health -->
-      <div class="bg-white dark:bg-surface-800 rounded-xl border border-surface-200 dark:border-surface-700 p-5 shadow-sm">
+      <div class="lg:col-span-2 bg-white dark:bg-surface-800 rounded-xl border border-surface-200 dark:border-surface-700 p-5 shadow-sm">
         <div class="flex items-center justify-between mb-4">
-          <h3 class="text-sm font-semibold text-surface-700 dark:text-surface-200">Docker Containers</h3>
+          <h3 class="text-sm font-semibold text-surface-700 dark:text-surface-200">Service Health</h3>
-          <span class="text-xs font-medium text-emerald-600 bg-emerald-50 px-2 py-0.5 rounded-full">{containers.filter(c => c.status === "running").length}/{containers.length} running</span>
+          <span class="text-xs text-surface-400">{services.filter(s => s.status === "up").length}/{services.length} online</span>
         </div>
+        {#if serviceLoading}
           <div class="space-y-2">
-          {#each containers.slice(0, 5) as c}
+            {#each Array(6) as _}
-            <div class="flex items-center justify-between py-1.5 text-sm">
+              <div class="h-10 rounded-lg bg-surface-100 dark:bg-surface-700 animate-pulse"></div>
-              <div class="flex items-center gap-2">
-                <span class="w-1.5 h-1.5 rounded-full {c.status !== 'running' ? 'bg-surface-300' : c.health === 'unhealthy' ? 'bg-rose-400' : c.health === 'healthy' ? 'bg-emerald-400' : 'bg-sky-400'}"></span>
-                <span class="font-medium text-surface-700 dark:text-surface-200">{c.name}</span>
-              </div>
-              <span class="text-xs text-surface-400 truncate max-w-[180px]">{c.image}</span>
-            </div>
             {/each}
-          {#if containers.length > 5}
-            <p class="text-xs text-primary-500 font-medium pt-1">+{containers.length - 5} more</p>
-          {/if}
           </div>
+        {:else}
+          <div class="grid grid-cols-1 sm:grid-cols-2 gap-2">
+            {#each services as svc}
+              <a
+                href={svc.url}
+                target="_blank"
+                rel="noopener"
+                class="flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm hover:bg-surface-50 dark:hover:bg-surface-700/50 transition-all group"
+              >
+                <span class="w-2 h-2 rounded-full shrink-0 {statusColor(svc.status)}"></span>
+                <span class="flex-1 font-medium text-surface-700 dark:text-surface-200 truncate">{svc.key.replace(/_/g, " ")}</span>
+                <span class="text-xs font-medium {svc.status === 'up' ? 'text-emerald-600' : svc.status === 'down' ? 'text-rose-500' : 'text-surface-400'}">{statusLabel(svc.status)}</span>
+                {#if svc.latency_ms != null}
+                  <span class="text-[10px] text-surface-400 font-mono">{svc.latency_ms}ms</span>
+                {/if}
+                <svg class="w-3 h-3 text-surface-300 group-hover:text-surface-400 transition-colors" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14" /></svg>
+              </a>
+            {/each}
+          </div>
+        {/if}
       </div>
 
-      <!-- Repos Summary -->
+      <!-- CI Runs -->
       <div class="bg-white dark:bg-surface-800 rounded-xl border border-surface-200 dark:border-surface-700 p-5 shadow-sm">
         <div class="flex items-center justify-between mb-4">
-          <h3 class="text-sm font-semibold text-surface-700 dark:text-surface-200">Git Repositories</h3>
+          <h3 class="text-sm font-semibold text-surface-700 dark:text-surface-200">CI Runs</h3>
-          <span class="text-xs font-medium text-primary-600 bg-primary-50 px-2 py-0.5 rounded-full">{repos.length} repos</span>
+          <span class="text-xs text-surface-400">nas-tools</span>
         </div>
+        {#if ciLoading}
           <div class="space-y-2">
-          {#each repos.slice(0, 5) as r}
+            {#each Array(4) as _}
-            <div class="flex items-center justify-between py-1.5 text-sm">
+              <div class="h-14 rounded-lg bg-surface-100 dark:bg-surface-700 animate-pulse"></div>
-              <div class="flex items-center gap-2">
+            {/each}
-                <svg class="w-3.5 h-3.5 text-surface-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-6l-2-2H5a2 2 0 00-2 2z" /></svg>
-                <span class="font-medium text-surface-700 dark:text-surface-200">{r.name}</span>
           </div>
-              <span class="text-xs text-surface-400">{r.language || "—"}</span>
+        {:else if ciRuns.length === 0}
+          <div class="py-8 text-center text-sm text-surface-400">No CI runs found</div>
+        {:else}
+          <div class="space-y-2">
+            {#each ciRuns as run}
+              <div class="flex items-start gap-3 px-3 py-2.5 rounded-lg bg-surface-50 dark:bg-surface-700/30">
+                <span class="w-2 h-2 rounded-full mt-1.5 shrink-0 {run.status === 'success' ? 'bg-emerald-400' : run.status === 'failure' ? 'bg-rose-400' : run.status === 'in_progress' || run.status === 'running' ? 'bg-sky-400' : 'bg-surface-300'}"></span>
+                <div class="flex-1 min-w-0">
+                  <div class="text-xs font-medium text-surface-700 dark:text-surface-200 truncate">{run.display_title || "—"}</div>
+                  <div class="flex items-center gap-2 mt-1">
+                    <span class="text-[10px] font-mono text-surface-400">#{run.run_number}</span>
+                    <span class="text-[10px] text-surface-400">{run.event}</span>
+                    <span class="text-[10px] font-mono text-surface-400">{run.head_sha?.slice(0, 8) || ""}</span>
+                  </div>
+                </div>
+                <span class="text-[10px] font-medium px-1.5 py-0.5 rounded {ciStatusBadge(run.status)}">{run.status}</span>
               </div>
             {/each}
-          {#if repos.length > 5}
-            <p class="text-xs text-primary-500 font-medium pt-1">+{repos.length - 5} more</p>
-          {/if}
           </div>
+        {/if}
       </div>
     </div>
 

dashboard/frontend/src/routes/Docker.svelte

@@ -1,160 +0,0 @@
-<script>
-  import { onMount } from "svelte";
-  import { get, post } from "../lib/api.js";
-
-  let containers = $state([]);
-  let loading = $state(true);
-  let error = $state("");
-  let logTarget = $state("");
-  let logContent = $state("");
-  let loadingLogs = $state(false);
-  let actionLoading = $state("");
-
-  async function load() {
-    loading = true;
-    error = "";
-    try {
-      containers = (await get("/docker/containers")) || [];
-    } catch (e) {
-      error = e.message || "Docker API unavailable";
-      containers = [];
-    }
-    loading = false;
-  }
-
-  async function action(id, act) {
-    actionLoading = id + act;
-    try {
-      await post(`/docker/containers/${id}/${act}`);
-      await load();
-    } catch (e) {
-      error = e.message || "Action failed";
-    }
-    actionLoading = "";
-  }
-
-  async function showLogs(id, name) {
-    logTarget = name;
-    loadingLogs = true;
-    try {
-      const r = await get(`/docker/containers/${id}/logs?tail=200`);
-      logContent = r?.logs || "No logs available";
-    } catch (e) {
-      logContent = "Failed to load logs";
-    }
-    loadingLogs = false;
-  }
-
-  onMount(load);
-</script>
-
-<div class="space-y-6">
-  <div class="flex items-center justify-between">
-    <div>
-      <h1 class="text-2xl font-bold text-surface-900 dark:text-white tracking-tight">Docker</h1>
-      <p class="text-sm text-surface-400 mt-1">{containers.length} containers · {containers.filter(c => c.status === "running").length} running</p>
-    </div>
-    <button onclick={load} class="text-xs font-medium text-primary-600 bg-primary-50 hover:bg-primary-100 px-3 py-1.5 rounded-lg transition-colors">
-      Refresh
-    </button>
-  </div>
-
-  {#if loading}
-    <div class="space-y-3">
-      {#each Array(5) as _}
-        <div class="h-[72px] rounded-xl bg-surface-100 dark:bg-surface-800 animate-pulse"></div>
-      {/each}
-    </div>
-  {:else if error}
-    <div class="bg-rose-50 dark:bg-rose-900/20 border border-rose-200 dark:border-rose-800 rounded-xl p-4">
-      <div class="flex items-center justify-between">
-        <div class="flex items-center gap-2">
-          <svg class="w-5 h-5 text-rose-500" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L4.082 16.5c-.77.833.192 2.5 1.732 2.5z" /></svg>
-          <p class="text-sm font-medium text-rose-700 dark:text-rose-300">{error}</p>
-        </div>
-        <button onclick={load} class="text-xs font-medium text-rose-600 bg-rose-100 hover:bg-rose-200 px-3 py-1.5 rounded-lg transition-colors">
-          Retry
-        </button>
-      </div>
-    </div>
-  {:else}
-    <div class="space-y-2">
-      {#each containers as c}
-        <div class="bg-white dark:bg-surface-800 rounded-xl border border-surface-200 dark:border-surface-700 p-4 flex items-center justify-between shadow-sm hover:shadow-md transition-all duration-200 group">
-          <div class="flex items-center gap-3 min-w-0">
-            <span class="relative flex h-2.5 w-2.5 shrink-0">
-              {#if c.status === "running"}
-                <span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-emerald-400 opacity-75"></span>
-                <span class="relative inline-flex rounded-full h-2.5 w-2.5 bg-emerald-500"></span>
-              {:else}
-                <span class="relative inline-flex rounded-full h-2.5 w-2.5 bg-surface-300"></span>
-              {/if}
-            </span>
-            <div class="min-w-0">
-              <p class="text-sm font-semibold text-surface-800 dark:text-surface-100 truncate">{c.name}</p>
-              <p class="text-xs text-surface-400 truncate mt-0.5">{c.image}</p>
-            </div>
-          </div>
-          <div class="flex items-center gap-1.5 opacity-70 group-hover:opacity-100 transition-opacity">
-            {#if c.status === "running"}
-              <button
-                class="text-xs font-medium px-2.5 py-1.5 rounded-lg text-rose-600 bg-rose-50 hover:bg-rose-100 transition-colors disabled:opacity-50"
-                onclick={() => action(c.id, "stop")}
-                disabled={actionLoading === c.id + "stop"}
-              >
-                {actionLoading === c.id + "stop" ? "..." : "Stop"}
-              </button>
-              <button
-                class="text-xs font-medium px-2.5 py-1.5 rounded-lg text-amber-600 bg-amber-50 hover:bg-amber-100 transition-colors disabled:opacity-50"
-                onclick={() => action(c.id, "restart")}
-                disabled={actionLoading === c.id + "restart"}
-              >
-                {actionLoading === c.id + "restart" ? "..." : "Restart"}
-              </button>
-            {:else}
-              <button
-                class="text-xs font-medium px-2.5 py-1.5 rounded-lg text-emerald-600 bg-emerald-50 hover:bg-emerald-100 transition-colors disabled:opacity-50"
-                onclick={() => action(c.id, "start")}
-                disabled={actionLoading === c.id + "start"}
-              >
-                {actionLoading === c.id + "start" ? "..." : "Start"}
-              </button>
-            {/if}
-            <button
-              class="text-xs font-medium px-2.5 py-1.5 rounded-lg text-surface-600 bg-surface-100 hover:bg-surface-200 transition-colors"
-              onclick={() => showLogs(c.id, c.name)}
-            >
-              Logs
-            </button>
-          </div>
-        </div>
-      {/each}
-    </div>
-  {/if}
-
-  <!-- Log Modal -->
-  {#if logTarget}
-    <div class="fixed inset-0 bg-black/40 backdrop-blur-sm flex items-center justify-center z-50" role="dialog" aria-modal="true" onclick={() => { logTarget = ""; logContent = ""; }} onkeydown={(e) => e.key === "Escape" && (logTarget = "", logContent = "")}>
-      <div class="bg-white dark:bg-surface-800 rounded-2xl shadow-2xl w-[90vw] max-w-4xl max-h-[80vh] flex flex-col" role="document" onclick={(e) => e.stopPropagation()} onkeydown={(e) => e.stopPropagation()}>
-        <div class="flex items-center justify-between px-5 py-4 border-b border-surface-200 dark:border-surface-700">
-          <div>
-            <h3 class="text-sm font-bold text-surface-800 dark:text-surface-100">Container Logs</h3>
-            <p class="text-xs text-surface-400 mt-0.5">{logTarget}</p>
-          </div>
-          <button aria-label="Close logs" class="text-surface-400 hover:text-surface-600 transition-colors" onclick={() => { logTarget = ""; logContent = ""; }}>
-            <svg class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" /></svg>
-          </button>
-        </div>
-        <div class="flex-1 overflow-auto p-1">
-          {#if loadingLogs}
-            <div class="flex items-center justify-center h-40">
-              <div class="w-6 h-6 border-2 border-primary-500 border-t-transparent rounded-full animate-spin"></div>
-            </div>
-          {:else}
-            <pre class="bg-surface-900 text-emerald-400 text-xs p-4 rounded-xl whitespace-pre-wrap leading-relaxed font-mono min-h-[200px]">{logContent}</pre>
-          {/if}
-        </div>
-      </div>
-    </div>
-  {/if}
-</div>

dashboard/frontend/src/routes/InfoEngine.svelte

@@ -1,139 +0,0 @@
-<script>
-  import { onMount } from "svelte";
-  import { getInfoEngineItems, getInfoEngineItem } from "../lib/api.js";
-
-  let loading = $state(true);
-  let loadingDetail = $state(false);
-  let requestError = $state("");
-  let items = $state([]);
-  let total = $state(0);
-  let selectedId = $state(null);
-  let selectedItem = $state(null);
-
-  async function loadItems() {
-    loading = true;
-    requestError = "";
-    try {
-      const res = await getInfoEngineItems({ limit: 50, offset: 0 });
-      items = res.items || [];
-      total = res.total || 0;
-      if (items.length > 0) {
-        await selectItem(items[0].id);
-      } else {
-        selectedId = null;
-        selectedItem = null;
-      }
-    } catch (e) {
-      requestError = e?.body?.detail || e?.message || "Failed to load items";
-      items = [];
-      total = 0;
-      selectedId = null;
-      selectedItem = null;
-    } finally {
-      loading = false;
-    }
-  }
-
-  async function selectItem(id) {
-    selectedId = id;
-    loadingDetail = true;
-    requestError = "";
-    try {
-      selectedItem = await getInfoEngineItem(id);
-    } catch (e) {
-      selectedItem = null;
-      requestError = e?.body?.detail || e?.message || "Failed to load item";
-    } finally {
-      loadingDetail = false;
-    }
-  }
-
-  function formatDate(value) {
-    if (!value) return "—";
-    try {
-      return new Date(value).toLocaleString();
-    } catch {
-      return value;
-    }
-  }
-
-  onMount(loadItems);
-</script>
-
-<div class="space-y-6">
-  <div class="flex items-center justify-between">
-    <div>
-      <h1 class="text-2xl font-bold text-surface-900 dark:text-white tracking-tight">Info Engine</h1>
-      <p class="text-sm text-surface-400 mt-1">Context-aware stream of curated signals</p>
-    </div>
-    <button onclick={loadItems} disabled={loading} class="px-3 py-1.5 text-xs font-medium text-primary-600 bg-primary-50 hover:bg-primary-100 rounded-lg transition-colors disabled:opacity-50 dark:bg-primary-900/30 dark:text-primary-300">
-      {loading ? "Loading..." : "Refresh"}
-    </button>
-  </div>
-
-  {#if requestError}
-    <div class="bg-rose-50 dark:bg-rose-900/20 border border-rose-200 dark:border-rose-700 rounded-xl p-4 shadow-sm">
-      <p class="text-sm font-medium text-rose-700 dark:text-rose-300">{requestError}</p>
-    </div>
-  {/if}
-
-  <div class="grid grid-cols-1 lg:grid-cols-3 gap-4">
-    <div class="lg:col-span-1 bg-white dark:bg-surface-800 rounded-xl border border-surface-200 dark:border-surface-700 shadow-sm">
-      <div class="px-4 py-3 border-b border-surface-200 dark:border-surface-700 text-xs text-surface-400">
-        Latest items ({total})
-      </div>
-      {#if loading}
-        <div class="p-4 space-y-2">
-          {#each Array(6) as _}
-            <div class="h-12 rounded-lg bg-surface-100 dark:bg-surface-700 animate-pulse"></div>
-          {/each}
-        </div>
-      {:else if items.length === 0}
-        <div class="p-4 text-sm text-surface-400">No items yet.</div>
-      {:else}
-        <div class="max-h-[560px] overflow-y-auto p-2">
-          {#each items as item}
-            <button onclick={() => selectItem(item.id)} class="w-full text-left px-3 py-2 rounded-lg mb-1 transition-colors {selectedId === item.id ? 'bg-primary-50 dark:bg-primary-900/30' : 'hover:bg-surface-100 dark:hover:bg-surface-700'}">
-              <p class="text-sm font-semibold text-surface-800 dark:text-surface-100 line-clamp-2">{item.title}</p>
-              <p class="text-xs text-surface-400 mt-1">{item.source}</p>
-            </button>
-          {/each}
-        </div>
-      {/if}
-    </div>
-
-    <div class="lg:col-span-2 bg-white dark:bg-surface-800 rounded-xl border border-surface-200 dark:border-surface-700 p-5 shadow-sm">
-      {#if loadingDetail}
-        <div class="space-y-3">
-          <div class="h-7 w-3/4 rounded bg-surface-100 dark:bg-surface-700 animate-pulse"></div>
-          <div class="h-4 w-full rounded bg-surface-100 dark:bg-surface-700 animate-pulse"></div>
-          <div class="h-4 w-5/6 rounded bg-surface-100 dark:bg-surface-700 animate-pulse"></div>
-          <div class="h-24 w-full rounded bg-surface-100 dark:bg-surface-700 animate-pulse"></div>
-        </div>
-      {:else if selectedItem}
-        <h2 class="text-xl font-bold text-surface-900 dark:text-white">{selectedItem.title}</h2>
-        <div class="mt-2 text-xs text-surface-400 space-y-1">
-          <p>Source: {selectedItem.source}</p>
-          <p>Published: {formatDate(selectedItem.published_at)}</p>
-          <p>Collected: {formatDate(selectedItem.collected_at)}</p>
-        </div>
-
-        {#if selectedItem.tags?.length}
-          <div class="mt-3 flex flex-wrap gap-2">
-            {#each selectedItem.tags as tag}
-              <span class="px-2 py-0.5 text-xs rounded-full bg-surface-100 text-surface-600 dark:bg-surface-700 dark:text-surface-300">{tag}</span>
-            {/each}
-          </div>
-        {/if}
-
-        <p class="mt-4 text-sm text-surface-700 dark:text-surface-300 whitespace-pre-wrap">{selectedItem.summary || selectedItem.content_text || "No summary available."}</p>
-
-        <a href={selectedItem.url} target="_blank" rel="noopener" class="inline-flex mt-4 px-3 py-1.5 text-xs font-medium rounded-lg bg-primary-600 text-white hover:bg-primary-700">
-          Open source
-        </a>
-      {:else}
-        <p class="text-sm text-surface-400">Select an item to view details.</p>
-      {/if}
-    </div>
-  </div>
-</div>

dashboard/frontend/src/routes/OpenClaw.svelte

@@ -1,66 +0,0 @@
-<script>
-  import { onMount } from "svelte";
-  import { get } from "../lib/api.js";
-
-  let isTailscale = location.hostname.startsWith("100.");
-  let isLocal = location.hostname === "localhost" || location.hostname === "127.0.0.1" || location.hostname.startsWith("192.168.");
-  let canAccess = isTailscale || isLocal;
-  let token = $state("");
-
-  onMount(async () => {
-    if (canAccess) {
-      const res = await get("/system/openclaw-token");
-      token = res?.token || "";
-    }
-  });
-
-  function clawUrl() {
-    const base = `${location.protocol}//${location.hostname}:3100`;
-    return token ? `${base}/#token=${token}` : base;
-  }
-</script>
-
-<div class="space-y-4">
-  <div>
-    <h1 class="text-2xl font-bold text-surface-900 tracking-tight">OpenClaw</h1>
-    <p class="text-sm text-surface-400 mt-1">AI Assistant</p>
-  </div>
-
-  {#if canAccess}
-    <div class="flex flex-col items-center justify-center p-12 text-center bg-surface-50 dark:bg-surface-800 rounded-xl border border-surface-200 dark:border-surface-700 h-[calc(100vh-10rem)]">
-      <div class="h-16 w-16 bg-primary-100 dark:bg-primary-900/30 text-primary-600 dark:text-primary-400 rounded-2xl flex items-center justify-center mb-6">
-        <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4" />
-        </svg>
-      </div>
-      <h2 class="text-xl font-semibold text-surface-900 dark:text-white mb-2">OpenClaw Ready</h2>
-      <p class="text-surface-600 dark:text-surface-400 max-w-md mb-8">
-        OpenClaw's security settings prevent it from being embedded inside the dashboard. Click below to launch the assistant securely in a new tab.
-      </p>
-      <a
-        href={clawUrl()}
-        target="_blank"
-        rel="noopener noreferrer"
-        class="inline-flex items-center justify-center px-6 py-3 border border-transparent text-base font-medium rounded-lg text-white bg-primary-600 hover:bg-primary-700 shadow-sm transition-colors"
-      >
-        Launch OpenClaw
-        <svg xmlns="http://www.w3.org/2000/svg" class="ml-2 -mr-1 h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14" />
-        </svg>
-      </a>
-    </div>
-  {:else}
-    <div class="flex flex-col items-center justify-center p-12 text-center bg-surface-50 dark:bg-surface-800 rounded-xl border border-surface-200 dark:border-surface-700 h-[calc(100vh-10rem)]">
-      <svg xmlns="http://www.w3.org/2000/svg" class="h-16 w-16 text-surface-400 mb-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" />
-      </svg>
-      <h2 class="text-xl font-semibold text-surface-900 dark:text-white mb-2">Tailscale Network Required</h2>
-      <p class="text-surface-600 dark:text-surface-400 max-w-md">
-        For security reasons, OpenClaw is only accessible when connected directly to the NAS via the internal Tailscale network.
-      </p>
-      <p class="mt-4 text-sm text-surface-500">
-        Connect to Tailscale and visit <a href="http://100.78.131.124:4000" class="text-primary-500 hover:underline font-medium">http://100.78.131.124:4000</a> to use the AI Assistant.
-      </p>
-    </div>
-  {/if}
-</div>

docs/PDD.md

@@ -0,0 +1,23 @@
+# Product Definition Document — NAS Tools
+
+## Vision
+
+A single dashboard to manage all self-hosted services on the NAS — Docker containers, media, tools, system health — accessible from anywhere via a clean web UI.
+
+## Goals
+
+1. **Unified management** — one dashboard for all NAS services (containers, media, tools, auth)
+2. **GFW-proof deployment** — all traffic routes through VPS + Tailscale, works from China
+3. **Self-healing** — auto-detect down containers, email alerts, health checks
+4. **CI/CD from Gitea** — push to deploy with zero manual SSH
+
+## Target Users
+
+Self (Jimmy Gan). Secondary: family members who access media services on the NAS.
+
+## Success Metrics
+
+- Dashboard loads in < 3s from anywhere
+- All CI workflows green
+- Zero manual SSH deploys
+- < 5min recovery from container crash

docs/architecture.md

@@ -0,0 +1,100 @@
+# NAS Tools — Architecture & Operations
+
+## Overview
+
+NAS Dashboard is a web UI for managing a Synology DS224+ NAS and its ecosystem of services. It runs as a Docker container on the NAS with a FastAPI backend + Svelte 5 frontend.
+
+## Architecture
+
+```
+Browser → VPS Caddy (161.33.182.109, port 443)
+         → Tailscale → NAS Caddy (port 8443, fallback only)
+         → NAS Dashboard (port 4000)
+```
+
+DNS: `*.jimmygan.com` → VPS Caddy → Tailscale → NAS services.
+
+## Services
+
+### Media
+| Service | URL | Port | Description |
+|---------|-----|------|-------------|
+| Navidrome | music.jimmygan.com | 4533 | Music streaming |
+| Jellyfin | media.jimmygan.com | 8097 | Media server |
+| Audiobookshelf | books.jimmygan.com | 13378 | Audiobooks & podcasts |
+| Immich | photos.jimmygan.com | 2283 | Photo/video backup |
+| t-youtube | yt.jimmygan.com | 8001 | YouTube subscription reader |
+| Transmission | (sidebar route) | 9091 | BitTorrent client |
+
+### Tools
+| Service | URL | Description |
+|---------|-----|-------------|
+| Gitea | git.jimmygan.com | Git hosting + CI (Gitea Actions) |
+| LiteLLM | (dashboard route) | LLM proxy |
+| OPC | (dashboard route) | Kanban + agents |
+| n8n | n8n.jimmygan.com | Workflow automation |
+| Vaultwarden | vault.jimmygan.com | Password manager |
+| Hermes | hermes-agent.nousresearch.com/docs | AI Agent docs |
+
+## CI/CD (Gitea Actions)
+
+### Workflows
+- **deploy.yml** — Main branch: tests → build → deploy to production
+- **deploy-dev.yml** — Dev branch: tests → build → deploy to dev
+
+### Runners
+- **VPS runner** (`vps` label) — server2 (Oracle Tokyo, 158.101.140.85). Used for build + test jobs. Uses podman.
+- **NAS runner** (`nas` label) — DS224+. Used for deploy jobs. Uses Docker via `/volume1/@appstore/ContainerManager/usr/bin/docker`. Runs with `nas:host` label (host networking).
+
+### Build & Deploy Flow
+1. VPS runner builds Docker image
+2. Pushes to local registry: `100.78.131.124:5501/nas-dashboard:latest` (podman push --tls-verify=false)
+3. Streams image to NAS via SSH pipe: `podman save | gzip | ssh nasts "gunzip | docker load"`
+4. NAS runner deploys: `docker compose up -d`
+
+### CI Speed Notes
+- Build is the bottleneck (~12 min first run due to npm ci + Vite build)
+- npm ci is cached between runs (node_modules saved to disk on VPS)
+- pip is cached between runs
+- Registry push enables future layer caching
+- Synology Docker daemon doesn't support `--tls-verify=false` for pulls; SSH pipe used instead
+
+### Recent CI Fixes (July 2026)
+| Fix | Date | Description |
+|-----|------|-------------|
+| Checkout URL | Jul 8 | Changed from `gitea:3000` to `127.0.0.1:3300` (NAS host networking) |
+| TRANSMISSION_USER/PASS | Jul 8 | Added missing env vars to deploy step |
+| Gzip transfer | Jul 8 | Added gzip compression to SSH pipe |
+| Local registry | Jul 9 | Build pushes to local registry for layer caching |
+| NAS runner crash | Jul 8 | `.runner` address changed from `gitea:3000` to `127.0.0.1:3300` |
+
+## Local Registry
+
+Registry container: `registry-mirror` on NAS, port 5501.
+- Standalone mode (NOT Docker Hub proxy — Hub is blocked from China)
+- Listens on `0.0.0.0:5501`
+- Images pushed by VPS CI, pulled by NAS fallback via SSH pipe
+- API: `http://100.78.131.124:5501/v2/`
+
+## Dashboard Sidebar Layout
+
+### Main
+Overview, LiteLLM, OPC, Files, Terminal, Security
+
+### Media
+Navidrome, Jellyfin, Audiobookshelf, Immich, t-youtube, Media Management, Transmission
+
+### Tools
+Hermes, Chat Digest, Code Sessions, Repos, Gitea Web, Stirling PDF, Vaultwarden, n8n, Speedtest
+
+All external links use clean HTTPS URLs (no `:8443` port).
+
+## Cmd+K Palette
+Press `⌘K` (Mac) or `Ctrl+K` to fuzzy-search all sidebar items. New in July 2026.
+
+## NAS Quirks
+- No `crontab` — edit `/etc/crontab` with `sudo` + `printf`, restart crond
+- No `scp` subsystem — use `cat file | ssh ... 'cat > dest'`
+- ACLs override Unix perms — use `sudo chmod 777` + `synoacltool -enforce-inherit`
+- Docker at `/volume1/@appstore/ContainerManager/usr/bin/docker`
+- Tailscale userspace mode — cannot bind to Tailscale IP directly in Docker

docs/specs/active.md

@@ -0,0 +1 @@
+../../specs/sprint-06-code-quality.md