diff --git a/.env.example b/.env.example
new file mode 100644
index 0000000..deef035
--- /dev/null
+++ b/.env.example
@@ -0,0 +1,14 @@
+# Cloudflare credentials (server-side only, never sent to browser)
+CLOUDFLARE_ACCOUNT_ID=your_account_id_here
+CLOUDFLARE_API_TOKEN=your_api_token_here
+
+# Required API Token permissions:
+#   - Access: Apps and Policies Write  (list + create Access apps)
+#   - Cloudflare Tunnel: Edit          (create / configure / delete tunnels)
+#   - DNS: Edit                        (create CNAME records)
+#   - Zone: Read                       (lookup zone ID for a hostname)
+
+# Optional: Cloudflare Access Service Token for fetching server metrics
+# (Create one in Zero Trust > Settings > Service Auth)
+CF_SERVICE_CLIENT_ID=
+CF_SERVICE_CLIENT_SECRET=
diff --git a/.gitignore b/.gitignore
new file mode 100644
index 0000000..5216934
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1,37 @@
+# dependencies
+/node_modules
+/.pnp
+.pnp.*
+.yarn/*
+!.yarn/patches
+!.yarn/plugins
+!.yarn/releases
+!.yarn/versions
+
+# 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
+.env
+.env*.local
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts
diff --git a/metrics-agent.sh b/metrics-agent.sh
new file mode 100644
index 0000000..c62f243
--- /dev/null
+++ b/metrics-agent.sh
@@ -0,0 +1,222 @@
+#!/usr/bin/env bash
+# metrics-agent.sh — Lightweight HTTP metrics server for SSH Launcher
+# Serves JSON at http://localhost:9101/metrics.json
+# Requires: bash, python3 (standard library only), optional: nvidia-smi
+#
+# Usage:
+#   sudo bash metrics-agent.sh install   # Install + start as systemd service
+#   sudo bash metrics-agent.sh start     # Run in foreground (testing)
+
+set -euo pipefail
+
+METRICS_PORT="${METRICS_PORT:-9101}"
+INSTALL_DIR="/usr/local/lib/ssh-metrics"
+
+# ─── Metrics collection script (Python) ───────────────────────────────────────
+
+write_collector() {
+  mkdir -p "$INSTALL_DIR"
+  cat > "$INSTALL_DIR/metrics_server.py" <<'PYEOF'
+#!/usr/bin/env python3
+import json, os, time, subprocess, socket
+from http.server import HTTPServer, BaseHTTPRequestHandler
+
+def read_file(path):
+    try:
+        with open(path) as f:
+            return f.read()
+    except Exception:
+        return ""
+
+def cpu_percent():
+    """Read CPU usage from /proc/stat (two samples, 200ms apart)."""
+    def read_stat():
+        line = read_file("/proc/stat").split("\n")[0]
+        fields = list(map(int, line.split()[1:]))
+        idle = fields[3] + (fields[4] if len(fields) > 4 else 0)
+        total = sum(fields)
+        return idle, total
+    i1, t1 = read_stat()
+    time.sleep(0.2)
+    i2, t2 = read_stat()
+    dt = t2 - t1
+    if dt == 0:
+        return 0.0
+    return round((1 - (i2 - i1) / dt) * 100, 1)
+
+def memory():
+    raw = {}
+    for line in read_file("/proc/meminfo").splitlines():
+        if ":" in line:
+            k, v = line.split(":", 1)
+            raw[k.strip()] = int(v.strip().split()[0])
+    total = raw.get("MemTotal", 0)
+    avail = raw.get("MemAvailable", raw.get("MemFree", 0))
+    used = total - avail
+    pct = round(used / total * 100, 1) if total else 0
+    return {"used": used, "total": total, "percent": pct}
+
+def disk():
+    try:
+        st = os.statvfs("/")
+        total = st.f_blocks * st.f_frsize // 1024
+        avail = st.f_bavail * st.f_frsize // 1024
+        used = total - avail
+        pct = round(used / total * 100, 1) if total else 0
+        return {"used": used, "total": total, "percent": pct}
+    except Exception:
+        return {"used": 0, "total": 0, "percent": 0}
+
+_prev_net = {}
+def network():
+    global _prev_net
+    iface_stats = {}
+    for line in read_file("/proc/net/dev").splitlines()[2:]:
+        parts = line.split()
+        if len(parts) < 10:
+            continue
+        iface = parts[0].rstrip(":")
+        if iface == "lo":
+            continue
+        iface_stats[iface] = {"rx": int(parts[1]), "tx": int(parts[9])}
+    now = time.time()
+    result = {"rxBytesPerSec": 0, "txBytesPerSec": 0}
+    if _prev_net:
+        dt = now - _prev_net["ts"]
+        if dt > 0:
+            for iface, vals in iface_stats.items():
+                prev = _prev_net.get(iface, {})
+                if prev:
+                    result["rxBytesPerSec"] += max(0, int((vals["rx"] - prev["rx"]) / dt))
+                    result["txBytesPerSec"] += max(0, int((vals["tx"] - prev["tx"]) / dt))
+    _prev_net = {"ts": now, **{k: v for k, v in iface_stats.items()}}
+    return result
+
+def load_avg():
+    try:
+        parts = read_file("/proc/loadavg").split()
+        return [float(parts[0]), float(parts[1]), float(parts[2])]
+    except Exception:
+        return [0.0, 0.0, 0.0]
+
+def uptime():
+    try:
+        return float(read_file("/proc/uptime").split()[0])
+    except Exception:
+        return 0.0
+
+def gpu_info():
+    try:
+        out = subprocess.check_output([
+            "nvidia-smi",
+            "--query-gpu=name,temperature.gpu,utilization.gpu,memory.used,memory.total",
+            "--format=csv,noheader,nounits"
+        ], timeout=3, stderr=subprocess.DEVNULL).decode()
+        gpus = []
+        for line in out.strip().splitlines():
+            parts = [p.strip() for p in line.split(",")]
+            if len(parts) >= 5:
+                gpus.append({
+                    "name": parts[0],
+                    "tempC": int(parts[1]),
+                    "utilPercent": int(parts[2]),
+                    "memUsedMiB": int(parts[3]),
+                    "memTotalMiB": int(parts[4]),
+                })
+        return gpus
+    except Exception:
+        return None
+
+def collect():
+    data = {
+        "hostname": socket.gethostname(),
+        "timestamp": int(time.time() * 1000),
+        "cpu": cpu_percent(),
+        "memory": memory(),
+        "disk": disk(),
+        "network": network(),
+        "load": load_avg(),
+        "uptime": uptime(),
+    }
+    gpu = gpu_info()
+    if gpu is not None:
+        data["gpu"] = gpu
+    return data
+
+class Handler(BaseHTTPRequestHandler):
+    def log_message(self, *_):
+        pass
+
+    def do_GET(self):
+        if self.path not in ("/metrics.json", "/"):
+            self.send_response(404)
+            self.end_headers()
+            return
+        try:
+            payload = json.dumps(collect()).encode()
+            self.send_response(200)
+            self.send_header("Content-Type", "application/json")
+            self.send_header("Content-Length", str(len(payload)))
+            self.send_header("Access-Control-Allow-Origin", "*")
+            self.end_headers()
+            self.wfile.write(payload)
+        except Exception as e:
+            self.send_response(500)
+            self.end_headers()
+            self.wfile.write(str(e).encode())
+
+if __name__ == "__main__":
+    import sys
+    port = int(os.environ.get("METRICS_PORT", 9101))
+    server = HTTPServer(("127.0.0.1", port), Handler)
+    print(f"metrics-agent listening on 127.0.0.1:{port}", file=sys.stderr)
+    server.serve_forever()
+PYEOF
+  chmod +x "$INSTALL_DIR/metrics_server.py"
+}
+
+# ─── Systemd service ──────────────────────────────────────────────────────────
+
+install_service() {
+  write_collector
+
+  cat > /etc/systemd/system/ssh-metrics.service <<EOF
+[Unit]
+Description=SSH Launcher Metrics Agent
+After=network.target
+Wants=network.target
+
+[Service]
+Type=simple
+ExecStart=/usr/bin/python3 ${INSTALL_DIR}/metrics_server.py
+Restart=on-failure
+RestartSec=5
+Environment=METRICS_PORT=${METRICS_PORT}
+StandardOutput=journal
+StandardError=journal
+
+[Install]
+WantedBy=multi-user.target
+EOF
+
+  systemctl daemon-reload
+  systemctl enable --now ssh-metrics.service
+  echo "✓ ssh-metrics.service installed and started on port ${METRICS_PORT}"
+  echo "  Test: curl http://localhost:${METRICS_PORT}/metrics.json"
+}
+
+# ─── Entry point ─────────────────────────────────────────────────────────────
+
+case "${1:-start}" in
+  install)
+    install_service
+    ;;
+  start)
+    write_collector
+    exec python3 "$INSTALL_DIR/metrics_server.py"
+    ;;
+  *)
+    echo "Usage: $0 {install|start}"
+    exit 1
+    ;;
+esac
diff --git a/next.config.ts b/next.config.ts
new file mode 100644
index 0000000..cb651cd
--- /dev/null
+++ b/next.config.ts
@@ -0,0 +1,5 @@
+import type { NextConfig } from "next";
+
+const nextConfig: NextConfig = {};
+
+export default nextConfig;
diff --git a/package-lock.json b/package-lock.json
new file mode 100644
index 0000000..68b66e1
--- /dev/null
+++ b/package-lock.json
@@ -0,0 +1,1682 @@
+{
+  "name": "cf-ssh-launcher",
+  "version": "0.1.0",
+  "lockfileVersion": 3,
+  "requires": true,
+  "packages": {
+    "": {
+      "name": "cf-ssh-launcher",
+      "version": "0.1.0",
+      "dependencies": {
+        "jose": "^5.10.0",
+        "lucide-react": "^0.487.0",
+        "next": "^15.3.1",
+        "next-themes": "^0.4.6",
+        "react": "^19.1.0",
+        "react-dom": "^19.1.0"
+      },
+      "devDependencies": {
+        "@tailwindcss/postcss": "^4.1.4",
+        "@types/node": "^22.14.1",
+        "@types/react": "^19.1.2",
+        "@types/react-dom": "^19.1.2",
+        "tailwindcss": "^4.1.4",
+        "typescript": "^5.8.3"
+      }
+    },
+    "node_modules/@alloc/quick-lru": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/@alloc/quick-lru/-/quick-lru-5.2.0.tgz",
+      "integrity": "sha512-UrcABB+4bUrFABwbluTIBErXwvbsU/V7TZWfmbgJfbkwiBuziS9gxdODUyuiecfdGQ85jglMW6juS3+z5TsKLw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/@emnapi/runtime": {
+      "version": "1.9.2",
+      "resolved": "https://registry.npmjs.org/@emnapi/runtime/-/runtime-1.9.2.tgz",
+      "integrity": "sha512-3U4+MIWHImeyu1wnmVygh5WlgfYDtyf0k8AbLhMFxOipihf6nrWC4syIm/SwEeec0mNSafiiNnMJwbza/Is6Lw==",
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "tslib": "^2.4.0"
+      }
+    },
+    "node_modules/@img/colour": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@img/colour/-/colour-1.1.0.tgz",
+      "integrity": "sha512-Td76q7j57o/tLVdgS746cYARfSyxk8iEfRxewL9h4OMzYhbW4TAcppl0mT4eyqXddh6L/jwoM75mo7ixa/pCeQ==",
+      "license": "MIT",
+      "optional": true,
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@img/sharp-darwin-arm64": {
+      "version": "0.34.5",
+      "resolved": "https://registry.npmjs.org/@img/sharp-darwin-arm64/-/sharp-darwin-arm64-0.34.5.tgz",
+      "integrity": "sha512-imtQ3WMJXbMY4fxb/Ndp6HBTNVtWCUI0WdobyheGf5+ad6xX8VIDO8u2xE4qc/fr08CKG/7dDseFtn6M6g/r3w==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "Apache-2.0",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      },
+      "optionalDependencies": {
+        "@img/sharp-libvips-darwin-arm64": "1.2.4"
+      }
+    },
+    "node_modules/@img/sharp-darwin-x64": {
+      "version": "0.34.5",
+      "resolved": "https://registry.npmjs.org/@img/sharp-darwin-x64/-/sharp-darwin-x64-0.34.5.tgz",
+      "integrity": "sha512-YNEFAF/4KQ/PeW0N+r+aVVsoIY0/qxxikF2SWdp+NRkmMB7y9LBZAVqQ4yhGCm/H3H270OSykqmQMKLBhBJDEw==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "Apache-2.0",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      },
+      "optionalDependencies": {
+        "@img/sharp-libvips-darwin-x64": "1.2.4"
+      }
+    },
+    "node_modules/@img/sharp-libvips-darwin-arm64": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-darwin-arm64/-/sharp-libvips-darwin-arm64-1.2.4.tgz",
+      "integrity": "sha512-zqjjo7RatFfFoP0MkQ51jfuFZBnVE2pRiaydKJ1G/rHZvnsrHAOcQALIi9sA5co5xenQdTugCvtb1cuf78Vf4g==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-libvips-darwin-x64": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-darwin-x64/-/sharp-libvips-darwin-x64-1.2.4.tgz",
+      "integrity": "sha512-1IOd5xfVhlGwX+zXv2N93k0yMONvUlANylbJw1eTah8K/Jtpi15KC+WSiaX/nBmbm2HxRM1gZ0nSdjSsrZbGKg==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-libvips-linux-arm": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linux-arm/-/sharp-libvips-linux-arm-1.2.4.tgz",
+      "integrity": "sha512-bFI7xcKFELdiNCVov8e44Ia4u2byA+l3XtsAj+Q8tfCwO6BQ8iDojYdvoPMqsKDkuoOo+X6HZA0s0q11ANMQ8A==",
+      "cpu": [
+        "arm"
+      ],
+      "license": "LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-libvips-linux-arm64": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linux-arm64/-/sharp-libvips-linux-arm64-1.2.4.tgz",
+      "integrity": "sha512-excjX8DfsIcJ10x1Kzr4RcWe1edC9PquDRRPx3YVCvQv+U5p7Yin2s32ftzikXojb1PIFc/9Mt28/y+iRklkrw==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-libvips-linux-ppc64": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linux-ppc64/-/sharp-libvips-linux-ppc64-1.2.4.tgz",
+      "integrity": "sha512-FMuvGijLDYG6lW+b/UvyilUWu5Ayu+3r2d1S8notiGCIyYU/76eig1UfMmkZ7vwgOrzKzlQbFSuQfgm7GYUPpA==",
+      "cpu": [
+        "ppc64"
+      ],
+      "license": "LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-libvips-linux-riscv64": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linux-riscv64/-/sharp-libvips-linux-riscv64-1.2.4.tgz",
+      "integrity": "sha512-oVDbcR4zUC0ce82teubSm+x6ETixtKZBh/qbREIOcI3cULzDyb18Sr/Wcyx7NRQeQzOiHTNbZFF1UwPS2scyGA==",
+      "cpu": [
+        "riscv64"
+      ],
+      "license": "LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-libvips-linux-s390x": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linux-s390x/-/sharp-libvips-linux-s390x-1.2.4.tgz",
+      "integrity": "sha512-qmp9VrzgPgMoGZyPvrQHqk02uyjA0/QrTO26Tqk6l4ZV0MPWIW6LTkqOIov+J1yEu7MbFQaDpwdwJKhbJvuRxQ==",
+      "cpu": [
+        "s390x"
+      ],
+      "license": "LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-libvips-linux-x64": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linux-x64/-/sharp-libvips-linux-x64-1.2.4.tgz",
+      "integrity": "sha512-tJxiiLsmHc9Ax1bz3oaOYBURTXGIRDODBqhveVHonrHJ9/+k89qbLl0bcJns+e4t4rvaNBxaEZsFtSfAdquPrw==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-libvips-linuxmusl-arm64": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linuxmusl-arm64/-/sharp-libvips-linuxmusl-arm64-1.2.4.tgz",
+      "integrity": "sha512-FVQHuwx1IIuNow9QAbYUzJ+En8KcVm9Lk5+uGUQJHaZmMECZmOlix9HnH7n1TRkXMS0pGxIJokIVB9SuqZGGXw==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-libvips-linuxmusl-x64": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linuxmusl-x64/-/sharp-libvips-linuxmusl-x64-1.2.4.tgz",
+      "integrity": "sha512-+LpyBk7L44ZIXwz/VYfglaX/okxezESc6UxDSoyo2Ks6Jxc4Y7sGjpgU9s4PMgqgjj1gZCylTieNamqA1MF7Dg==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-linux-arm": {
+      "version": "0.34.5",
+      "resolved": "https://registry.npmjs.org/@img/sharp-linux-arm/-/sharp-linux-arm-0.34.5.tgz",
+      "integrity": "sha512-9dLqsvwtg1uuXBGZKsxem9595+ujv0sJ6Vi8wcTANSFpwV/GONat5eCkzQo/1O6zRIkh0m/8+5BjrRr7jDUSZw==",
+      "cpu": [
+        "arm"
+      ],
+      "license": "Apache-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      },
+      "optionalDependencies": {
+        "@img/sharp-libvips-linux-arm": "1.2.4"
+      }
+    },
+    "node_modules/@img/sharp-linux-arm64": {
+      "version": "0.34.5",
+      "resolved": "https://registry.npmjs.org/@img/sharp-linux-arm64/-/sharp-linux-arm64-0.34.5.tgz",
+      "integrity": "sha512-bKQzaJRY/bkPOXyKx5EVup7qkaojECG6NLYswgktOZjaXecSAeCWiZwwiFf3/Y+O1HrauiE3FVsGxFg8c24rZg==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "Apache-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      },
+      "optionalDependencies": {
+        "@img/sharp-libvips-linux-arm64": "1.2.4"
+      }
+    },
+    "node_modules/@img/sharp-linux-ppc64": {
+      "version": "0.34.5",
+      "resolved": "https://registry.npmjs.org/@img/sharp-linux-ppc64/-/sharp-linux-ppc64-0.34.5.tgz",
+      "integrity": "sha512-7zznwNaqW6YtsfrGGDA6BRkISKAAE1Jo0QdpNYXNMHu2+0dTrPflTLNkpc8l7MUP5M16ZJcUvysVWWrMefZquA==",
+      "cpu": [
+        "ppc64"
+      ],
+      "license": "Apache-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      },
+      "optionalDependencies": {
+        "@img/sharp-libvips-linux-ppc64": "1.2.4"
+      }
+    },
+    "node_modules/@img/sharp-linux-riscv64": {
+      "version": "0.34.5",
+      "resolved": "https://registry.npmjs.org/@img/sharp-linux-riscv64/-/sharp-linux-riscv64-0.34.5.tgz",
+      "integrity": "sha512-51gJuLPTKa7piYPaVs8GmByo7/U7/7TZOq+cnXJIHZKavIRHAP77e3N2HEl3dgiqdD/w0yUfiJnII77PuDDFdw==",
+      "cpu": [
+        "riscv64"
+      ],
+      "license": "Apache-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      },
+      "optionalDependencies": {
+        "@img/sharp-libvips-linux-riscv64": "1.2.4"
+      }
+    },
+    "node_modules/@img/sharp-linux-s390x": {
+      "version": "0.34.5",
+      "resolved": "https://registry.npmjs.org/@img/sharp-linux-s390x/-/sharp-linux-s390x-0.34.5.tgz",
+      "integrity": "sha512-nQtCk0PdKfho3eC5MrbQoigJ2gd1CgddUMkabUj+rBevs8tZ2cULOx46E7oyX+04WGfABgIwmMC0VqieTiR4jg==",
+      "cpu": [
+        "s390x"
+      ],
+      "license": "Apache-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      },
+      "optionalDependencies": {
+        "@img/sharp-libvips-linux-s390x": "1.2.4"
+      }
+    },
+    "node_modules/@img/sharp-linux-x64": {
+      "version": "0.34.5",
+      "resolved": "https://registry.npmjs.org/@img/sharp-linux-x64/-/sharp-linux-x64-0.34.5.tgz",
+      "integrity": "sha512-MEzd8HPKxVxVenwAa+JRPwEC7QFjoPWuS5NZnBt6B3pu7EG2Ge0id1oLHZpPJdn3OQK+BQDiw9zStiHBTJQQQQ==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "Apache-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      },
+      "optionalDependencies": {
+        "@img/sharp-libvips-linux-x64": "1.2.4"
+      }
+    },
+    "node_modules/@img/sharp-linuxmusl-arm64": {
+      "version": "0.34.5",
+      "resolved": "https://registry.npmjs.org/@img/sharp-linuxmusl-arm64/-/sharp-linuxmusl-arm64-0.34.5.tgz",
+      "integrity": "sha512-fprJR6GtRsMt6Kyfq44IsChVZeGN97gTD331weR1ex1c1rypDEABN6Tm2xa1wE6lYb5DdEnk03NZPqA7Id21yg==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "Apache-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      },
+      "optionalDependencies": {
+        "@img/sharp-libvips-linuxmusl-arm64": "1.2.4"
+      }
+    },
+    "node_modules/@img/sharp-linuxmusl-x64": {
+      "version": "0.34.5",
+      "resolved": "https://registry.npmjs.org/@img/sharp-linuxmusl-x64/-/sharp-linuxmusl-x64-0.34.5.tgz",
+      "integrity": "sha512-Jg8wNT1MUzIvhBFxViqrEhWDGzqymo3sV7z7ZsaWbZNDLXRJZoRGrjulp60YYtV4wfY8VIKcWidjojlLcWrd8Q==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "Apache-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      },
+      "optionalDependencies": {
+        "@img/sharp-libvips-linuxmusl-x64": "1.2.4"
+      }
+    },
+    "node_modules/@img/sharp-wasm32": {
+      "version": "0.34.5",
+      "resolved": "https://registry.npmjs.org/@img/sharp-wasm32/-/sharp-wasm32-0.34.5.tgz",
+      "integrity": "sha512-OdWTEiVkY2PHwqkbBI8frFxQQFekHaSSkUIJkwzclWZe64O1X4UlUjqqqLaPbUpMOQk6FBu/HtlGXNblIs0huw==",
+      "cpu": [
+        "wasm32"
+      ],
+      "license": "Apache-2.0 AND LGPL-3.0-or-later AND MIT",
+      "optional": true,
+      "dependencies": {
+        "@emnapi/runtime": "^1.7.0"
+      },
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-win32-arm64": {
+      "version": "0.34.5",
+      "resolved": "https://registry.npmjs.org/@img/sharp-win32-arm64/-/sharp-win32-arm64-0.34.5.tgz",
+      "integrity": "sha512-WQ3AgWCWYSb2yt+IG8mnC6Jdk9Whs7O0gxphblsLvdhSpSTtmu69ZG1Gkb6NuvxsNACwiPV6cNSZNzt0KPsw7g==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "Apache-2.0 AND LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-win32-ia32": {
+      "version": "0.34.5",
+      "resolved": "https://registry.npmjs.org/@img/sharp-win32-ia32/-/sharp-win32-ia32-0.34.5.tgz",
+      "integrity": "sha512-FV9m/7NmeCmSHDD5j4+4pNI8Cp3aW+JvLoXcTUo0IqyjSfAZJ8dIUmijx1qaJsIiU+Hosw6xM5KijAWRJCSgNg==",
+      "cpu": [
+        "ia32"
+      ],
+      "license": "Apache-2.0 AND LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-win32-x64": {
+      "version": "0.34.5",
+      "resolved": "https://registry.npmjs.org/@img/sharp-win32-x64/-/sharp-win32-x64-0.34.5.tgz",
+      "integrity": "sha512-+29YMsqY2/9eFEiW93eqWnuLcWcufowXewwSNIT6UwZdUUCrM3oFjMWH/Z6/TMmb4hlFenmfAVbpWeup2jryCw==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "Apache-2.0 AND LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@jridgewell/gen-mapping": {
+      "version": "0.3.13",
+      "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.13.tgz",
+      "integrity": "sha512-2kkt/7niJ6MgEPxF0bYdQ6etZaA+fQvDcLKckhy1yIQOzaoKjBBjSj63/aLVjYE3qhRt5dvM+uUyfCg6UKCBbA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@jridgewell/sourcemap-codec": "^1.5.0",
+        "@jridgewell/trace-mapping": "^0.3.24"
+      }
+    },
+    "node_modules/@jridgewell/remapping": {
+      "version": "2.3.5",
+      "resolved": "https://registry.npmjs.org/@jridgewell/remapping/-/remapping-2.3.5.tgz",
+      "integrity": "sha512-LI9u/+laYG4Ds1TDKSJW2YPrIlcVYOwi2fUC6xB43lueCjgxV4lffOCZCtYFiH6TNOX+tQKXx97T4IKHbhyHEQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@jridgewell/gen-mapping": "^0.3.5",
+        "@jridgewell/trace-mapping": "^0.3.24"
+      }
+    },
+    "node_modules/@jridgewell/resolve-uri": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/@jridgewell/resolve-uri/-/resolve-uri-3.1.2.tgz",
+      "integrity": "sha512-bRISgCIjP20/tbWSPWMEi54QVPRZExkuD9lJL+UIxUKtwVJA8wW1Trb1jMs1RFXo1CBTNZ/5hpC9QvmKWdopKw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
+    "node_modules/@jridgewell/sourcemap-codec": {
+      "version": "1.5.5",
+      "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.5.5.tgz",
+      "integrity": "sha512-cYQ9310grqxueWbl+WuIUIaiUaDcj7WOq5fVhEljNVgRfOUhY9fy2zTvfoqWsnebh8Sl70VScFbICvJnLKB0Og==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@jridgewell/trace-mapping": {
+      "version": "0.3.31",
+      "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.31.tgz",
+      "integrity": "sha512-zzNR+SdQSDJzc8joaeP8QQoCQr8NuYx2dIIytl1QeBEZHJ9uW6hebsrYgbz8hJwUQao3TWCMtmfV8Nu1twOLAw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@jridgewell/resolve-uri": "^3.1.0",
+        "@jridgewell/sourcemap-codec": "^1.4.14"
+      }
+    },
+    "node_modules/@next/env": {
+      "version": "15.5.15",
+      "resolved": "https://registry.npmjs.org/@next/env/-/env-15.5.15.tgz",
+      "integrity": "sha512-vcmyu5/MyFzN7CdqRHO3uHO44p/QPCZkuTUXroeUmhNP8bL5PHFEhik22JUazt+CDDoD6EpBYRCaS2pISL+/hg==",
+      "license": "MIT"
+    },
+    "node_modules/@next/swc-darwin-arm64": {
+      "version": "15.5.15",
+      "resolved": "https://registry.npmjs.org/@next/swc-darwin-arm64/-/swc-darwin-arm64-15.5.15.tgz",
+      "integrity": "sha512-6PvFO2Tzt10GFK2Ro9tAVEtacMqRmTarYMFKAnV2vYMdwWc73xzmDQyAV7SwEdMhzmiRoo7+m88DuiXlJlGeaw==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@next/swc-darwin-x64": {
+      "version": "15.5.15",
+      "resolved": "https://registry.npmjs.org/@next/swc-darwin-x64/-/swc-darwin-x64-15.5.15.tgz",
+      "integrity": "sha512-G+YNV+z6FDZTp/+IdGyIMFqalBTaQSnvAA+X/hrt+eaTRFSznRMz9K7rTmzvM6tDmKegNtyzgufZW0HwVzEqaQ==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@next/swc-linux-arm64-gnu": {
+      "version": "15.5.15",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-gnu/-/swc-linux-arm64-gnu-15.5.15.tgz",
+      "integrity": "sha512-eVkrMcVIBqGfXB+QUC7jjZ94Z6uX/dNStbQFabewAnk13Uy18Igd1YZ/GtPRzdhtm7QwC0e6o7zOQecul4iC1w==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@next/swc-linux-arm64-musl": {
+      "version": "15.5.15",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-musl/-/swc-linux-arm64-musl-15.5.15.tgz",
+      "integrity": "sha512-RwSHKMQ7InLy5GfkY2/n5PcFycKA08qI1VST78n09nN36nUPqCvGSMiLXlfUmzmpQpF6XeBYP2KRWHi0UW3uNg==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@next/swc-linux-x64-gnu": {
+      "version": "15.5.15",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-15.5.15.tgz",
+      "integrity": "sha512-nplqvY86LakS+eeiuWsNWvfmK8pFcOEW7ZtVRt4QH70lL+0x6LG/m1OpJ/tvrbwjmR8HH9/fH2jzW1GlL03TIg==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@next/swc-linux-x64-musl": {
+      "version": "15.5.15",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-musl/-/swc-linux-x64-musl-15.5.15.tgz",
+      "integrity": "sha512-eAgl9NKQ84/sww0v81DQINl/vL2IBxD7sMybd0cWRw6wqgouVI53brVRBrggqBRP/NWeIAE1dm5cbKYoiMlqDQ==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@next/swc-win32-arm64-msvc": {
+      "version": "15.5.15",
+      "resolved": "https://registry.npmjs.org/@next/swc-win32-arm64-msvc/-/swc-win32-arm64-msvc-15.5.15.tgz",
+      "integrity": "sha512-GJVZC86lzSquh0MtvZT+L7G8+jMnJcldloOjA8Kf3wXvBrvb6OGe2MzPuALxFshSm/IpwUtD2mIoof39ymf52A==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@next/swc-win32-x64-msvc": {
+      "version": "15.5.15",
+      "resolved": "https://registry.npmjs.org/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-15.5.15.tgz",
+      "integrity": "sha512-nFucjVdwlFqxh/JG3hWSJ4p8+YJV7Ii8aPDuBQULB6DzUF4UNZETXLfEUk+oI2zEznWWULPt7MeuTE6xtK1HSA==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@swc/helpers": {
+      "version": "0.5.15",
+      "resolved": "https://registry.npmjs.org/@swc/helpers/-/helpers-0.5.15.tgz",
+      "integrity": "sha512-JQ5TuMi45Owi4/BIMAJBoSQoOJu12oOk/gADqlcUL9JEdHB8vyjUSsxqeNXnmXHjYKMi2WcYtezGEEhqUI/E2g==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "tslib": "^2.8.0"
+      }
+    },
+    "node_modules/@tailwindcss/node": {
+      "version": "4.2.2",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/node/-/node-4.2.2.tgz",
+      "integrity": "sha512-pXS+wJ2gZpVXqFaUEjojq7jzMpTGf8rU6ipJz5ovJV6PUGmlJ+jvIwGrzdHdQ80Sg+wmQxUFuoW1UAAwHNEdFA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@jridgewell/remapping": "^2.3.5",
+        "enhanced-resolve": "^5.19.0",
+        "jiti": "^2.6.1",
+        "lightningcss": "1.32.0",
+        "magic-string": "^0.30.21",
+        "source-map-js": "^1.2.1",
+        "tailwindcss": "4.2.2"
+      }
+    },
+    "node_modules/@tailwindcss/oxide": {
+      "version": "4.2.2",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide/-/oxide-4.2.2.tgz",
+      "integrity": "sha512-qEUA07+E5kehxYp9BVMpq9E8vnJuBHfJEC0vPC5e7iL/hw7HR61aDKoVoKzrG+QKp56vhNZe4qwkRmMC0zDLvg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 20"
+      },
+      "optionalDependencies": {
+        "@tailwindcss/oxide-android-arm64": "4.2.2",
+        "@tailwindcss/oxide-darwin-arm64": "4.2.2",
+        "@tailwindcss/oxide-darwin-x64": "4.2.2",
+        "@tailwindcss/oxide-freebsd-x64": "4.2.2",
+        "@tailwindcss/oxide-linux-arm-gnueabihf": "4.2.2",
+        "@tailwindcss/oxide-linux-arm64-gnu": "4.2.2",
+        "@tailwindcss/oxide-linux-arm64-musl": "4.2.2",
+        "@tailwindcss/oxide-linux-x64-gnu": "4.2.2",
+        "@tailwindcss/oxide-linux-x64-musl": "4.2.2",
+        "@tailwindcss/oxide-wasm32-wasi": "4.2.2",
+        "@tailwindcss/oxide-win32-arm64-msvc": "4.2.2",
+        "@tailwindcss/oxide-win32-x64-msvc": "4.2.2"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-android-arm64": {
+      "version": "4.2.2",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-android-arm64/-/oxide-android-arm64-4.2.2.tgz",
+      "integrity": "sha512-dXGR1n+P3B6748jZO/SvHZq7qBOqqzQ+yFrXpoOWWALWndF9MoSKAT3Q0fYgAzYzGhxNYOoysRvYlpixRBBoDg==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">= 20"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-darwin-arm64": {
+      "version": "4.2.2",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-darwin-arm64/-/oxide-darwin-arm64-4.2.2.tgz",
+      "integrity": "sha512-iq9Qjr6knfMpZHj55/37ouZeykwbDqF21gPFtfnhCCKGDcPI/21FKC9XdMO/XyBM7qKORx6UIhGgg6jLl7BZlg==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">= 20"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-darwin-x64": {
+      "version": "4.2.2",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-darwin-x64/-/oxide-darwin-x64-4.2.2.tgz",
+      "integrity": "sha512-BlR+2c3nzc8f2G639LpL89YY4bdcIdUmiOOkv2GQv4/4M0vJlpXEa0JXNHhCHU7VWOKWT/CjqHdTP8aUuDJkuw==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">= 20"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-freebsd-x64": {
+      "version": "4.2.2",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-freebsd-x64/-/oxide-freebsd-x64-4.2.2.tgz",
+      "integrity": "sha512-YUqUgrGMSu2CDO82hzlQ5qSb5xmx3RUrke/QgnoEx7KvmRJHQuZHZmZTLSuuHwFf0DJPybFMXMYf+WJdxHy/nQ==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ],
+      "engines": {
+        "node": ">= 20"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-linux-arm-gnueabihf": {
+      "version": "4.2.2",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-arm-gnueabihf/-/oxide-linux-arm-gnueabihf-4.2.2.tgz",
+      "integrity": "sha512-FPdhvsW6g06T9BWT0qTwiVZYE2WIFo2dY5aCSpjG/S/u1tby+wXoslXS0kl3/KXnULlLr1E3NPRRw0g7t2kgaQ==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 20"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-linux-arm64-gnu": {
+      "version": "4.2.2",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-arm64-gnu/-/oxide-linux-arm64-gnu-4.2.2.tgz",
+      "integrity": "sha512-4og1V+ftEPXGttOO7eCmW7VICmzzJWgMx+QXAJRAhjrSjumCwWqMfkDrNu1LXEQzNAwz28NCUpucgQPrR4S2yw==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 20"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-linux-arm64-musl": {
+      "version": "4.2.2",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-arm64-musl/-/oxide-linux-arm64-musl-4.2.2.tgz",
+      "integrity": "sha512-oCfG/mS+/+XRlwNjnsNLVwnMWYH7tn/kYPsNPh+JSOMlnt93mYNCKHYzylRhI51X+TbR+ufNhhKKzm6QkqX8ag==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 20"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-linux-x64-gnu": {
+      "version": "4.2.2",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-x64-gnu/-/oxide-linux-x64-gnu-4.2.2.tgz",
+      "integrity": "sha512-rTAGAkDgqbXHNp/xW0iugLVmX62wOp2PoE39BTCGKjv3Iocf6AFbRP/wZT/kuCxC9QBh9Pu8XPkv/zCZB2mcMg==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 20"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-linux-x64-musl": {
+      "version": "4.2.2",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-x64-musl/-/oxide-linux-x64-musl-4.2.2.tgz",
+      "integrity": "sha512-XW3t3qwbIwiSyRCggeO2zxe3KWaEbM0/kW9e8+0XpBgyKU4ATYzcVSMKteZJ1iukJ3HgHBjbg9P5YPRCVUxlnQ==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 20"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-wasm32-wasi": {
+      "version": "4.2.2",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-wasm32-wasi/-/oxide-wasm32-wasi-4.2.2.tgz",
+      "integrity": "sha512-eKSztKsmEsn1O5lJ4ZAfyn41NfG7vzCg496YiGtMDV86jz1q/irhms5O0VrY6ZwTUkFy/EKG3RfWgxSI3VbZ8Q==",
+      "bundleDependencies": [
+        "@napi-rs/wasm-runtime",
+        "@emnapi/core",
+        "@emnapi/runtime",
+        "@tybys/wasm-util",
+        "@emnapi/wasi-threads",
+        "tslib"
+      ],
+      "cpu": [
+        "wasm32"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "@emnapi/core": "^1.8.1",
+        "@emnapi/runtime": "^1.8.1",
+        "@emnapi/wasi-threads": "^1.1.0",
+        "@napi-rs/wasm-runtime": "^1.1.1",
+        "@tybys/wasm-util": "^0.10.1",
+        "tslib": "^2.8.1"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-win32-arm64-msvc": {
+      "version": "4.2.2",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-win32-arm64-msvc/-/oxide-win32-arm64-msvc-4.2.2.tgz",
+      "integrity": "sha512-qPmaQM4iKu5mxpsrWZMOZRgZv1tOZpUm+zdhhQP0VhJfyGGO3aUKdbh3gDZc/dPLQwW4eSqWGrrcWNBZWUWaXQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 20"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-win32-x64-msvc": {
+      "version": "4.2.2",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-win32-x64-msvc/-/oxide-win32-x64-msvc-4.2.2.tgz",
+      "integrity": "sha512-1T/37VvI7WyH66b+vqHj/cLwnCxt7Qt3WFu5Q8hk65aOvlwAhs7rAp1VkulBJw/N4tMirXjVnylTR72uI0HGcA==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 20"
+      }
+    },
+    "node_modules/@tailwindcss/postcss": {
+      "version": "4.2.2",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/postcss/-/postcss-4.2.2.tgz",
+      "integrity": "sha512-n4goKQbW8RVXIbNKRB/45LzyUqN451deQK0nzIeauVEqjlI49slUlgKYJM2QyUzap/PcpnS7kzSUmPb1sCRvYQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@alloc/quick-lru": "^5.2.0",
+        "@tailwindcss/node": "4.2.2",
+        "@tailwindcss/oxide": "4.2.2",
+        "postcss": "^8.5.6",
+        "tailwindcss": "4.2.2"
+      }
+    },
+    "node_modules/@types/node": {
+      "version": "22.19.17",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-22.19.17.tgz",
+      "integrity": "sha512-wGdMcf+vPYM6jikpS/qhg6WiqSV/OhG+jeeHT/KlVqxYfD40iYJf9/AE1uQxVWFvU7MipKRkRv8NSHiCGgPr8Q==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "undici-types": "~6.21.0"
+      }
+    },
+    "node_modules/@types/react": {
+      "version": "19.2.14",
+      "resolved": "https://registry.npmjs.org/@types/react/-/react-19.2.14.tgz",
+      "integrity": "sha512-ilcTH/UniCkMdtexkoCN0bI7pMcJDvmQFPvuPvmEaYA/NSfFTAgdUSLAoVjaRJm7+6PvcM+q1zYOwS4wTYMF9w==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "csstype": "^3.2.2"
+      }
+    },
+    "node_modules/@types/react-dom": {
+      "version": "19.2.3",
+      "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-19.2.3.tgz",
+      "integrity": "sha512-jp2L/eY6fn+KgVVQAOqYItbF0VY/YApe5Mz2F0aykSO8gx31bYCZyvSeYxCHKvzHG5eZjc+zyaS5BrBWya2+kQ==",
+      "dev": true,
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/react": "^19.2.0"
+      }
+    },
+    "node_modules/caniuse-lite": {
+      "version": "1.0.30001787",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001787.tgz",
+      "integrity": "sha512-mNcrMN9KeI68u7muanUpEejSLghOKlVhRqS/Za2IeyGllJ9I9otGpR9g3nsw7n4W378TE/LyIteA0+/FOZm4Kg==",
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/browserslist"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/caniuse-lite"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "CC-BY-4.0"
+    },
+    "node_modules/client-only": {
+      "version": "0.0.1",
+      "resolved": "https://registry.npmjs.org/client-only/-/client-only-0.0.1.tgz",
+      "integrity": "sha512-IV3Ou0jSMzZrd3pZ48nLkT9DA7Ag1pnPzaiQhpW7c3RbcqqzvzzVu+L8gfqMp/8IM2MQtSiqaCxrrcfu8I8rMA==",
+      "license": "MIT"
+    },
+    "node_modules/csstype": {
+      "version": "3.2.3",
+      "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.2.3.tgz",
+      "integrity": "sha512-z1HGKcYy2xA8AGQfwrn0PAy+PB7X/GSj3UVJW9qKyn43xWa+gl5nXmU4qqLMRzWVLFC8KusUX8T/0kCiOYpAIQ==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/detect-libc": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-2.1.2.tgz",
+      "integrity": "sha512-Btj2BOOO83o3WyH59e8MgXsxEQVcarkUOpEYrubB0urwnN10yQ364rsiByU11nZlqWYZm05i/of7io4mzihBtQ==",
+      "devOptional": true,
+      "license": "Apache-2.0",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/enhanced-resolve": {
+      "version": "5.20.1",
+      "resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-5.20.1.tgz",
+      "integrity": "sha512-Qohcme7V1inbAfvjItgw0EaxVX5q2rdVEZHRBrEQdRZTssLDGsL8Lwrznl8oQ/6kuTJONLaDcGjkNP247XEhcA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "graceful-fs": "^4.2.4",
+        "tapable": "^2.3.0"
+      },
+      "engines": {
+        "node": ">=10.13.0"
+      }
+    },
+    "node_modules/graceful-fs": {
+      "version": "4.2.11",
+      "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.11.tgz",
+      "integrity": "sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==",
+      "dev": true,
+      "license": "ISC"
+    },
+    "node_modules/jiti": {
+      "version": "2.6.1",
+      "resolved": "https://registry.npmjs.org/jiti/-/jiti-2.6.1.tgz",
+      "integrity": "sha512-ekilCSN1jwRvIbgeg/57YFh8qQDNbwDb9xT/qu2DAHbFFZUicIl4ygVaAvzveMhMVr3LnpSKTNnwt8PoOfmKhQ==",
+      "dev": true,
+      "license": "MIT",
+      "bin": {
+        "jiti": "lib/jiti-cli.mjs"
+      }
+    },
+    "node_modules/jose": {
+      "version": "5.10.0",
+      "resolved": "https://registry.npmjs.org/jose/-/jose-5.10.0.tgz",
+      "integrity": "sha512-s+3Al/p9g32Iq+oqXxkW//7jk2Vig6FF1CFqzVXoTUXt2qz89YWbL+OwS17NFYEvxC35n0FKeGO2LGYSxeM2Gg==",
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/sponsors/panva"
+      }
+    },
+    "node_modules/lightningcss": {
+      "version": "1.32.0",
+      "resolved": "https://registry.npmjs.org/lightningcss/-/lightningcss-1.32.0.tgz",
+      "integrity": "sha512-NXYBzinNrblfraPGyrbPoD19C1h9lfI/1mzgWYvXUTe414Gz/X1FD2XBZSZM7rRTrMA8JL3OtAaGifrIKhQ5yQ==",
+      "dev": true,
+      "license": "MPL-2.0",
+      "dependencies": {
+        "detect-libc": "^2.0.3"
+      },
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      },
+      "optionalDependencies": {
+        "lightningcss-android-arm64": "1.32.0",
+        "lightningcss-darwin-arm64": "1.32.0",
+        "lightningcss-darwin-x64": "1.32.0",
+        "lightningcss-freebsd-x64": "1.32.0",
+        "lightningcss-linux-arm-gnueabihf": "1.32.0",
+        "lightningcss-linux-arm64-gnu": "1.32.0",
+        "lightningcss-linux-arm64-musl": "1.32.0",
+        "lightningcss-linux-x64-gnu": "1.32.0",
+        "lightningcss-linux-x64-musl": "1.32.0",
+        "lightningcss-win32-arm64-msvc": "1.32.0",
+        "lightningcss-win32-x64-msvc": "1.32.0"
+      }
+    },
+    "node_modules/lightningcss-android-arm64": {
+      "version": "1.32.0",
+      "resolved": "https://registry.npmjs.org/lightningcss-android-arm64/-/lightningcss-android-arm64-1.32.0.tgz",
+      "integrity": "sha512-YK7/ClTt4kAK0vo6w3X+Pnm0D2cf2vPHbhOXdoNti1Ga0al1P4TBZhwjATvjNwLEBCnKvjJc2jQgHXH0NEwlAg==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-darwin-arm64": {
+      "version": "1.32.0",
+      "resolved": "https://registry.npmjs.org/lightningcss-darwin-arm64/-/lightningcss-darwin-arm64-1.32.0.tgz",
+      "integrity": "sha512-RzeG9Ju5bag2Bv1/lwlVJvBE3q6TtXskdZLLCyfg5pt+HLz9BqlICO7LZM7VHNTTn/5PRhHFBSjk5lc4cmscPQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-darwin-x64": {
+      "version": "1.32.0",
+      "resolved": "https://registry.npmjs.org/lightningcss-darwin-x64/-/lightningcss-darwin-x64-1.32.0.tgz",
+      "integrity": "sha512-U+QsBp2m/s2wqpUYT/6wnlagdZbtZdndSmut/NJqlCcMLTWp5muCrID+K5UJ6jqD2BFshejCYXniPDbNh73V8w==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-freebsd-x64": {
+      "version": "1.32.0",
+      "resolved": "https://registry.npmjs.org/lightningcss-freebsd-x64/-/lightningcss-freebsd-x64-1.32.0.tgz",
+      "integrity": "sha512-JCTigedEksZk3tHTTthnMdVfGf61Fky8Ji2E4YjUTEQX14xiy/lTzXnu1vwiZe3bYe0q+SpsSH/CTeDXK6WHig==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-linux-arm-gnueabihf": {
+      "version": "1.32.0",
+      "resolved": "https://registry.npmjs.org/lightningcss-linux-arm-gnueabihf/-/lightningcss-linux-arm-gnueabihf-1.32.0.tgz",
+      "integrity": "sha512-x6rnnpRa2GL0zQOkt6rts3YDPzduLpWvwAF6EMhXFVZXD4tPrBkEFqzGowzCsIWsPjqSK+tyNEODUBXeeVHSkw==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-linux-arm64-gnu": {
+      "version": "1.32.0",
+      "resolved": "https://registry.npmjs.org/lightningcss-linux-arm64-gnu/-/lightningcss-linux-arm64-gnu-1.32.0.tgz",
+      "integrity": "sha512-0nnMyoyOLRJXfbMOilaSRcLH3Jw5z9HDNGfT/gwCPgaDjnx0i8w7vBzFLFR1f6CMLKF8gVbebmkUN3fa/kQJpQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-linux-arm64-musl": {
+      "version": "1.32.0",
+      "resolved": "https://registry.npmjs.org/lightningcss-linux-arm64-musl/-/lightningcss-linux-arm64-musl-1.32.0.tgz",
+      "integrity": "sha512-UpQkoenr4UJEzgVIYpI80lDFvRmPVg6oqboNHfoH4CQIfNA+HOrZ7Mo7KZP02dC6LjghPQJeBsvXhJod/wnIBg==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-linux-x64-gnu": {
+      "version": "1.32.0",
+      "resolved": "https://registry.npmjs.org/lightningcss-linux-x64-gnu/-/lightningcss-linux-x64-gnu-1.32.0.tgz",
+      "integrity": "sha512-V7Qr52IhZmdKPVr+Vtw8o+WLsQJYCTd8loIfpDaMRWGUZfBOYEJeyJIkqGIDMZPwPx24pUMfwSxxI8phr/MbOA==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-linux-x64-musl": {
+      "version": "1.32.0",
+      "resolved": "https://registry.npmjs.org/lightningcss-linux-x64-musl/-/lightningcss-linux-x64-musl-1.32.0.tgz",
+      "integrity": "sha512-bYcLp+Vb0awsiXg/80uCRezCYHNg1/l3mt0gzHnWV9XP1W5sKa5/TCdGWaR/zBM2PeF/HbsQv/j2URNOiVuxWg==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-win32-arm64-msvc": {
+      "version": "1.32.0",
+      "resolved": "https://registry.npmjs.org/lightningcss-win32-arm64-msvc/-/lightningcss-win32-arm64-msvc-1.32.0.tgz",
+      "integrity": "sha512-8SbC8BR40pS6baCM8sbtYDSwEVQd4JlFTOlaD3gWGHfThTcABnNDBda6eTZeqbofalIJhFx0qKzgHJmcPTnGdw==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-win32-x64-msvc": {
+      "version": "1.32.0",
+      "resolved": "https://registry.npmjs.org/lightningcss-win32-x64-msvc/-/lightningcss-win32-x64-msvc-1.32.0.tgz",
+      "integrity": "sha512-Amq9B/SoZYdDi1kFrojnoqPLxYhQ4Wo5XiL8EVJrVsB8ARoC1PWW6VGtT0WKCemjy8aC+louJnjS7U18x3b06Q==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lucide-react": {
+      "version": "0.487.0",
+      "resolved": "https://registry.npmjs.org/lucide-react/-/lucide-react-0.487.0.tgz",
+      "integrity": "sha512-aKqhOQ+YmFnwq8dWgGjOuLc8V1R9/c/yOd+zDY4+ohsR2Jo05lSGc3WsstYPIzcTpeosN7LoCkLReUUITvaIvw==",
+      "license": "ISC",
+      "peerDependencies": {
+        "react": "^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+      }
+    },
+    "node_modules/magic-string": {
+      "version": "0.30.21",
+      "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.21.tgz",
+      "integrity": "sha512-vd2F4YUyEXKGcLHoq+TEyCjxueSeHnFxyyjNp80yg0XV4vUhnDer/lvvlqM/arB5bXQN5K2/3oinyCRyx8T2CQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@jridgewell/sourcemap-codec": "^1.5.5"
+      }
+    },
+    "node_modules/nanoid": {
+      "version": "3.3.11",
+      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.11.tgz",
+      "integrity": "sha512-N8SpfPUnUp1bK+PMYW8qSWdl9U+wwNWI4QKxOYDy9JAro3WMX7p2OeVRF9v+347pnakNevPmiHhNmZ2HbFA76w==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "bin": {
+        "nanoid": "bin/nanoid.cjs"
+      },
+      "engines": {
+        "node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1"
+      }
+    },
+    "node_modules/next": {
+      "version": "15.5.15",
+      "resolved": "https://registry.npmjs.org/next/-/next-15.5.15.tgz",
+      "integrity": "sha512-VSqCrJwtLVGwAVE0Sb/yikrQfkwkZW9p+lL/J4+xe+G3ZA+QnWPqgcfH1tDUEuk9y+pthzzVFp4L/U8JerMfMQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@next/env": "15.5.15",
+        "@swc/helpers": "0.5.15",
+        "caniuse-lite": "^1.0.30001579",
+        "postcss": "8.4.31",
+        "styled-jsx": "5.1.6"
+      },
+      "bin": {
+        "next": "dist/bin/next"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^19.8.0 || >= 20.0.0"
+      },
+      "optionalDependencies": {
+        "@next/swc-darwin-arm64": "15.5.15",
+        "@next/swc-darwin-x64": "15.5.15",
+        "@next/swc-linux-arm64-gnu": "15.5.15",
+        "@next/swc-linux-arm64-musl": "15.5.15",
+        "@next/swc-linux-x64-gnu": "15.5.15",
+        "@next/swc-linux-x64-musl": "15.5.15",
+        "@next/swc-win32-arm64-msvc": "15.5.15",
+        "@next/swc-win32-x64-msvc": "15.5.15",
+        "sharp": "^0.34.3"
+      },
+      "peerDependencies": {
+        "@opentelemetry/api": "^1.1.0",
+        "@playwright/test": "^1.51.1",
+        "babel-plugin-react-compiler": "*",
+        "react": "^18.2.0 || 19.0.0-rc-de68d2f4-20241204 || ^19.0.0",
+        "react-dom": "^18.2.0 || 19.0.0-rc-de68d2f4-20241204 || ^19.0.0",
+        "sass": "^1.3.0"
+      },
+      "peerDependenciesMeta": {
+        "@opentelemetry/api": {
+          "optional": true
+        },
+        "@playwright/test": {
+          "optional": true
+        },
+        "babel-plugin-react-compiler": {
+          "optional": true
+        },
+        "sass": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/next-themes": {
+      "version": "0.4.6",
+      "resolved": "https://registry.npmjs.org/next-themes/-/next-themes-0.4.6.tgz",
+      "integrity": "sha512-pZvgD5L0IEvX5/9GWyHMf3m8BKiVQwsCMHfoFosXtXBMnaS0ZnIJ9ST4b4NqLVKDEm8QBxoNNGNaBv2JNF6XNA==",
+      "license": "MIT",
+      "peerDependencies": {
+        "react": "^16.8 || ^17 || ^18 || ^19 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17 || ^18 || ^19 || ^19.0.0-rc"
+      }
+    },
+    "node_modules/next/node_modules/postcss": {
+      "version": "8.4.31",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.31.tgz",
+      "integrity": "sha512-PS08Iboia9mts/2ygV3eLpY5ghnUcfLV/EXTOW1E2qYxJKGGBUtNjN76FYHnMs36RmARn41bC0AZmn+rR0OVpQ==",
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/postcss/"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/postcss"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "nanoid": "^3.3.6",
+        "picocolors": "^1.0.0",
+        "source-map-js": "^1.0.2"
+      },
+      "engines": {
+        "node": "^10 || ^12 || >=14"
+      }
+    },
+    "node_modules/picocolors": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.1.tgz",
+      "integrity": "sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==",
+      "license": "ISC"
+    },
+    "node_modules/postcss": {
+      "version": "8.5.9",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.5.9.tgz",
+      "integrity": "sha512-7a70Nsot+EMX9fFU3064K/kdHWZqGVY+BADLyXc8Dfv+mTLLVl6JzJpPaCZ2kQL9gIJvKXSLMHhqdRRjwQeFtw==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/postcss/"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/postcss"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "nanoid": "^3.3.11",
+        "picocolors": "^1.1.1",
+        "source-map-js": "^1.2.1"
+      },
+      "engines": {
+        "node": "^10 || ^12 || >=14"
+      }
+    },
+    "node_modules/react": {
+      "version": "19.2.5",
+      "resolved": "https://registry.npmjs.org/react/-/react-19.2.5.tgz",
+      "integrity": "sha512-llUJLzz1zTUBrskt2pwZgLq59AemifIftw4aB7JxOqf1HY2FDaGDxgwpAPVzHU1kdWabH7FauP4i1oEeer2WCA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/react-dom": {
+      "version": "19.2.5",
+      "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-19.2.5.tgz",
+      "integrity": "sha512-J5bAZz+DXMMwW/wV3xzKke59Af6CHY7G4uYLN1OvBcKEsWOs4pQExj86BBKamxl/Ik5bx9whOrvBlSDfWzgSag==",
+      "license": "MIT",
+      "dependencies": {
+        "scheduler": "^0.27.0"
+      },
+      "peerDependencies": {
+        "react": "^19.2.5"
+      }
+    },
+    "node_modules/scheduler": {
+      "version": "0.27.0",
+      "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.27.0.tgz",
+      "integrity": "sha512-eNv+WrVbKu1f3vbYJT/xtiF5syA5HPIMtf9IgY/nKg0sWqzAUEvqY/xm7OcZc/qafLx/iO9FgOmeSAp4v5ti/Q==",
+      "license": "MIT"
+    },
+    "node_modules/semver": {
+      "version": "7.7.4",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-7.7.4.tgz",
+      "integrity": "sha512-vFKC2IEtQnVhpT78h1Yp8wzwrf8CM+MzKMHGJZfBtzhZNycRFnXsHk6E5TxIkkMsgNS7mdX3AGB7x2QM2di4lA==",
+      "license": "ISC",
+      "optional": true,
+      "bin": {
+        "semver": "bin/semver.js"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/sharp": {
+      "version": "0.34.5",
+      "resolved": "https://registry.npmjs.org/sharp/-/sharp-0.34.5.tgz",
+      "integrity": "sha512-Ou9I5Ft9WNcCbXrU9cMgPBcCK8LiwLqcbywW3t4oDV37n1pzpuNLsYiAV8eODnjbtQlSDwZ2cUEeQz4E54Hltg==",
+      "hasInstallScript": true,
+      "license": "Apache-2.0",
+      "optional": true,
+      "dependencies": {
+        "@img/colour": "^1.0.0",
+        "detect-libc": "^2.1.2",
+        "semver": "^7.7.3"
+      },
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      },
+      "optionalDependencies": {
+        "@img/sharp-darwin-arm64": "0.34.5",
+        "@img/sharp-darwin-x64": "0.34.5",
+        "@img/sharp-libvips-darwin-arm64": "1.2.4",
+        "@img/sharp-libvips-darwin-x64": "1.2.4",
+        "@img/sharp-libvips-linux-arm": "1.2.4",
+        "@img/sharp-libvips-linux-arm64": "1.2.4",
+        "@img/sharp-libvips-linux-ppc64": "1.2.4",
+        "@img/sharp-libvips-linux-riscv64": "1.2.4",
+        "@img/sharp-libvips-linux-s390x": "1.2.4",
+        "@img/sharp-libvips-linux-x64": "1.2.4",
+        "@img/sharp-libvips-linuxmusl-arm64": "1.2.4",
+        "@img/sharp-libvips-linuxmusl-x64": "1.2.4",
+        "@img/sharp-linux-arm": "0.34.5",
+        "@img/sharp-linux-arm64": "0.34.5",
+        "@img/sharp-linux-ppc64": "0.34.5",
+        "@img/sharp-linux-riscv64": "0.34.5",
+        "@img/sharp-linux-s390x": "0.34.5",
+        "@img/sharp-linux-x64": "0.34.5",
+        "@img/sharp-linuxmusl-arm64": "0.34.5",
+        "@img/sharp-linuxmusl-x64": "0.34.5",
+        "@img/sharp-wasm32": "0.34.5",
+        "@img/sharp-win32-arm64": "0.34.5",
+        "@img/sharp-win32-ia32": "0.34.5",
+        "@img/sharp-win32-x64": "0.34.5"
+      }
+    },
+    "node_modules/source-map-js": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.1.tgz",
+      "integrity": "sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==",
+      "license": "BSD-3-Clause",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/styled-jsx": {
+      "version": "5.1.6",
+      "resolved": "https://registry.npmjs.org/styled-jsx/-/styled-jsx-5.1.6.tgz",
+      "integrity": "sha512-qSVyDTeMotdvQYoHWLNGwRFJHC+i+ZvdBRYosOFgC+Wg1vx4frN2/RG/NA7SYqqvKNLf39P2LSRA2pu6n0XYZA==",
+      "license": "MIT",
+      "dependencies": {
+        "client-only": "0.0.1"
+      },
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "peerDependencies": {
+        "react": ">= 16.8.0 || 17.x.x || ^18.0.0-0 || ^19.0.0-0"
+      },
+      "peerDependenciesMeta": {
+        "@babel/core": {
+          "optional": true
+        },
+        "babel-plugin-macros": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/tailwindcss": {
+      "version": "4.2.2",
+      "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-4.2.2.tgz",
+      "integrity": "sha512-KWBIxs1Xb6NoLdMVqhbhgwZf2PGBpPEiwOqgI4pFIYbNTfBXiKYyWoTsXgBQ9WFg/OlhnvHaY+AEpW7wSmFo2Q==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/tapable": {
+      "version": "2.3.2",
+      "resolved": "https://registry.npmjs.org/tapable/-/tapable-2.3.2.tgz",
+      "integrity": "sha512-1MOpMXuhGzGL5TTCZFItxCc0AARf1EZFQkGqMm7ERKj8+Hgr5oLvJOVFcC+lRmR8hCe2S3jC4T5D7Vg/d7/fhA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/webpack"
+      }
+    },
+    "node_modules/tslib": {
+      "version": "2.8.1",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.8.1.tgz",
+      "integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==",
+      "license": "0BSD"
+    },
+    "node_modules/typescript": {
+      "version": "5.9.3",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.9.3.tgz",
+      "integrity": "sha512-jl1vZzPDinLr9eUt3J/t7V6FgNEw9QjvBPdysz9KfQDD41fQrC2Y4vKQdiaUpFT4bXlb1RHhLpp8wtm6M5TgSw==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "bin": {
+        "tsc": "bin/tsc",
+        "tsserver": "bin/tsserver"
+      },
+      "engines": {
+        "node": ">=14.17"
+      }
+    },
+    "node_modules/undici-types": {
+      "version": "6.21.0",
+      "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-6.21.0.tgz",
+      "integrity": "sha512-iwDZqg0QAGrg9Rav5H4n0M64c3mkR59cJ6wQp+7C4nI0gsmExaedaYLNO44eT4AtBBwjbTiGPMlt2Md0T9H9JQ==",
+      "dev": true,
+      "license": "MIT"
+    }
+  }
+}
diff --git a/package.json b/package.json
new file mode 100644
index 0000000..bdb655e
--- /dev/null
+++ b/package.json
@@ -0,0 +1,27 @@
+{
+  "name": "cf-ssh-launcher",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start",
+    "lint": "next lint"
+  },
+  "dependencies": {
+    "next": "^15.3.1",
+    "react": "^19.1.0",
+    "react-dom": "^19.1.0",
+    "lucide-react": "^0.487.0",
+    "next-themes": "^0.4.6",
+    "jose": "^5.10.0"
+  },
+  "devDependencies": {
+    "@types/node": "^22.14.1",
+    "@types/react": "^19.1.2",
+    "@types/react-dom": "^19.1.2",
+    "typescript": "^5.8.3",
+    "@tailwindcss/postcss": "^4.1.4",
+    "tailwindcss": "^4.1.4"
+  }
+}
diff --git a/postcss.config.mjs b/postcss.config.mjs
new file mode 100644
index 0000000..79bcf13
--- /dev/null
+++ b/postcss.config.mjs
@@ -0,0 +1,8 @@
+/** @type {import('postcss-load-config').Config} */
+const config = {
+  plugins: {
+    "@tailwindcss/postcss": {},
+  },
+};
+
+export default config;
diff --git a/src/app/api/metrics/route.ts b/src/app/api/metrics/route.ts
new file mode 100644
index 0000000..cd8b4b5
--- /dev/null
+++ b/src/app/api/metrics/route.ts
@@ -0,0 +1,21 @@
+import { NextRequest, NextResponse } from "next/server";
+import { fetchServerMetrics } from "@/lib/metrics";
+
+export async function GET(req: NextRequest) {
+  const url = req.nextUrl.searchParams.get("url");
+  if (!url) {
+    return NextResponse.json({ error: "Missing ?url=" }, { status: 400 });
+  }
+
+  try {
+    const metrics = await fetchServerMetrics(url);
+    return NextResponse.json(metrics, {
+      headers: { "Cache-Control": "no-store" },
+    });
+  } catch (e) {
+    return NextResponse.json(
+      { error: e instanceof Error ? e.message : "Failed to fetch metrics" },
+      { status: 502 }
+    );
+  }
+}
diff --git a/src/app/api/setup/route.ts b/src/app/api/setup/route.ts
new file mode 100644
index 0000000..3e1985b
--- /dev/null
+++ b/src/app/api/setup/route.ts
@@ -0,0 +1,34 @@
+import { NextRequest, NextResponse } from "next/server";
+import { runFullSetup, type SetupInput } from "@/lib/cloudflare";
+
+export async function POST(req: NextRequest) {
+  try {
+    const body = await req.json();
+
+    const input: SetupInput = {
+      serverName: body.serverName?.trim(),
+      hostname: body.hostname?.trim(),
+      sshPort: Number(body.sshPort) || 22,
+      ssoEmail: body.ssoEmail?.trim(),
+      allowedEmails: (body.allowedEmails || "")
+        .split(/[,\n]/)
+        .map((e: string) => e.trim())
+        .filter(Boolean),
+    };
+
+    if (!input.serverName || !input.hostname || !input.ssoEmail) {
+      return NextResponse.json(
+        { error: "serverName, hostname, and ssoEmail are required" },
+        { status: 400 }
+      );
+    }
+
+    const result = await runFullSetup(input);
+    return NextResponse.json(result);
+  } catch (e) {
+    return NextResponse.json(
+      { error: e instanceof Error ? e.message : "Internal error" },
+      { status: 500 }
+    );
+  }
+}
diff --git a/src/app/connect/[id]/route.ts b/src/app/connect/[id]/route.ts
new file mode 100644
index 0000000..33d6058
--- /dev/null
+++ b/src/app/connect/[id]/route.ts
@@ -0,0 +1,20 @@
+import { NextRequest, NextResponse } from "next/server";
+import { getSshAppById } from "@/lib/cloudflare";
+
+export async function GET(
+  _req: NextRequest,
+  { params }: { params: Promise<{ id: string }> }
+) {
+  const { id } = await params;
+
+  const app = await getSshAppById(id);
+
+  if (!app) {
+    return NextResponse.json(
+      { error: "Application not found or not an SSH app" },
+      { status: 404 }
+    );
+  }
+
+  return NextResponse.redirect(app.launchUrl, 302);
+}
diff --git a/src/app/create/page.tsx b/src/app/create/page.tsx
new file mode 100644
index 0000000..9179a8d
--- /dev/null
+++ b/src/app/create/page.tsx
@@ -0,0 +1,350 @@
+"use client";
+
+import { useState } from "react";
+import {
+  Rocket,
+  CheckCircle2,
+  XCircle,
+  AlertTriangle,
+  Loader2,
+  Copy,
+  Check,
+  ExternalLink,
+  Server,
+  Globe,
+  Mail,
+  Terminal,
+  Hash,
+} from "lucide-react";
+
+interface StepResult {
+  step: string;
+  status: "success" | "error" | "skipped";
+  message: string;
+}
+
+interface SetupResult {
+  steps: StepResult[];
+  tunnelToken: string | null;
+  caPubkey: string | null;
+  installCommand: string | null;
+  launchUrl: string | null;
+}
+
+const STEP_LABELS: Record<string, string> = {
+  find_zone: "Lookup DNS Zone",
+  create_tunnel: "Create Tunnel",
+  configure_tunnel: "Configure Ingress",
+  create_dns: "Create DNS Record",
+  create_access_app: "Create Access App",
+  setup_ca: "Setup Short-lived Cert",
+  get_token: "Get Tunnel Token",
+  browser_rendering: "Browser Rendering",
+};
+
+export default function CreatePage() {
+  const [form, setForm] = useState({
+    serverName: "",
+    hostname: "",
+    sshPort: "22",
+    ssoEmail: "",
+    allowedEmails: "",
+  });
+  const [loading, setLoading] = useState(false);
+  const [result, setResult] = useState<SetupResult | null>(null);
+  const [error, setError] = useState<string | null>(null);
+  const [copied, setCopied] = useState(false);
+
+  const canSubmit =
+    form.serverName.trim() && form.hostname.trim() && form.ssoEmail.trim();
+
+  async function handleSubmit(e: React.FormEvent) {
+    e.preventDefault();
+    setLoading(true);
+    setResult(null);
+    setError(null);
+
+    try {
+      const res = await fetch("/api/setup", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify(form),
+      });
+      const data = await res.json();
+      if (!res.ok) throw new Error(data.error || `HTTP ${res.status}`);
+      setResult(data);
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Unknown error");
+    } finally {
+      setLoading(false);
+    }
+  }
+
+  function copyCommand() {
+    if (!result?.installCommand) return;
+    navigator.clipboard.writeText(result.installCommand);
+    setCopied(true);
+    setTimeout(() => setCopied(false), 2000);
+  }
+
+  const set = (key: string) => (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) =>
+    setForm((f) => ({ ...f, [key]: e.target.value }));
+
+  return (
+    <div className="min-h-[calc(100vh-3.5rem)]">
+      <div className="fixed inset-0 -z-10">
+        <div className="absolute inset-0 bg-[radial-gradient(ellipse_60%_40%_at_50%_-10%,rgba(16,185,129,0.08),transparent)]" />
+      </div>
+
+      <div className="max-w-2xl mx-auto px-4 sm:px-6 py-8 sm:py-12">
+        {/* Header */}
+        <div className="flex items-center gap-3 mb-1">
+          <div className="w-10 h-10 rounded-xl bg-emerald-500/10 border border-emerald-500/20 flex items-center justify-center">
+            <Rocket className="w-5 h-5 text-emerald-400" />
+          </div>
+          <div>
+            <h1 className="text-2xl font-bold text-white">Deploy SSH Host</h1>
+            <p className="text-sm text-zinc-500">
+              One form → Tunnel + DNS + Access App + Install Command
+            </p>
+          </div>
+        </div>
+
+        {/* Form */}
+        <form onSubmit={handleSubmit} className="mt-8 space-y-5">
+          <Field
+            icon={<Server className="w-4 h-4" />}
+            label="Server Name"
+            hint="A friendly label for this server, e.g. prod-web-1"
+          >
+            <input
+              type="text"
+              value={form.serverName}
+              onChange={set("serverName")}
+              placeholder="prod-web-1"
+              className="form-input"
+              required
+            />
+          </Field>
+
+          <Field
+            icon={<Globe className="w-4 h-4" />}
+            label="SSH Hostname"
+            hint="The domain to access this server, e.g. ssh.example.com"
+          >
+            <input
+              type="text"
+              value={form.hostname}
+              onChange={set("hostname")}
+              placeholder="ssh.example.com"
+              className="form-input"
+              required
+            />
+          </Field>
+
+          <Field
+            icon={<Hash className="w-4 h-4" />}
+            label="SSH Port"
+            hint="Server-side SSH port (usually 22)"
+          >
+            <input
+              type="number"
+              value={form.sshPort}
+              onChange={set("sshPort")}
+              placeholder="22"
+              className="form-input w-24"
+            />
+          </Field>
+
+          <Field
+            icon={<Mail className="w-4 h-4" />}
+            label="SSO Email"
+            hint="Your Cloudflare SSO email — its prefix becomes the Linux user"
+          >
+            <input
+              type="email"
+              value={form.ssoEmail}
+              onChange={set("ssoEmail")}
+              placeholder="admin@example.com"
+              className="form-input"
+              required
+            />
+          </Field>
+
+          <Field
+            icon={<Mail className="w-4 h-4" />}
+            label="Allowed Emails (optional)"
+            hint="Comma-separated list of emails for the Access Policy. Leave empty = any authenticated user"
+          >
+            <textarea
+              value={form.allowedEmails}
+              onChange={set("allowedEmails")}
+              placeholder="alice@example.com, bob@example.com"
+              rows={2}
+              className="form-input resize-none"
+            />
+          </Field>
+
+          <button
+            type="submit"
+            disabled={!canSubmit || loading}
+            className="w-full flex items-center justify-center gap-2 rounded-xl bg-emerald-600 hover:bg-emerald-500 disabled:bg-zinc-800 disabled:text-zinc-600 text-white font-semibold py-3 px-4 transition"
+          >
+            {loading ? (
+              <>
+                <Loader2 className="w-4 h-4 animate-spin" />
+                Deploying...
+              </>
+            ) : (
+              <>
+                <Rocket className="w-4 h-4" />
+                Deploy Now
+              </>
+            )}
+          </button>
+        </form>
+
+        {/* Error */}
+        {error && (
+          <div className="mt-6 rounded-xl border border-red-500/20 bg-red-500/5 p-4 flex items-start gap-3">
+            <XCircle className="w-5 h-5 text-red-400 shrink-0 mt-0.5" />
+            <div>
+              <p className="text-sm font-medium text-red-300">Deploy failed</p>
+              <p className="text-sm text-red-400/80 mt-1 break-words">{error}</p>
+            </div>
+          </div>
+        )}
+
+        {/* Results */}
+        {result && (
+          <div className="mt-8 space-y-6">
+            {/* Steps */}
+            <div className="rounded-xl border border-zinc-800 bg-zinc-900/60 overflow-hidden">
+              <div className="px-5 py-3 border-b border-zinc-800 text-sm font-medium text-zinc-400">
+                Pipeline Steps
+              </div>
+              <div className="divide-y divide-zinc-800/50">
+                {result.steps.map((s, i) => (
+                  <div key={i} className="flex items-center gap-3 px-5 py-3">
+                    {s.status === "success" && (
+                      <CheckCircle2 className="w-4 h-4 text-emerald-400 shrink-0" />
+                    )}
+                    {s.status === "error" && (
+                      <XCircle className="w-4 h-4 text-red-400 shrink-0" />
+                    )}
+                    {s.status === "skipped" && (
+                      <AlertTriangle className="w-4 h-4 text-amber-400 shrink-0" />
+                    )}
+                    <div className="min-w-0 flex-1">
+                      <span className="text-sm font-medium text-zinc-300">
+                        {STEP_LABELS[s.step] || s.step}
+                      </span>
+                      <p className="text-xs text-zinc-500 truncate">
+                        {s.message}
+                      </p>
+                    </div>
+                  </div>
+                ))}
+              </div>
+            </div>
+
+            {/* Install command */}
+            {result.installCommand && (
+              <div className="rounded-xl border border-zinc-800 bg-zinc-900/60 overflow-hidden">
+                <div className="px-5 py-3 border-b border-zinc-800 flex items-center justify-between">
+                  <div className="flex items-center gap-2 text-sm font-medium text-zinc-400">
+                    <Terminal className="w-4 h-4" />
+                    Install Command
+                  </div>
+                  <button
+                    onClick={copyCommand}
+                    className="flex items-center gap-1.5 px-2.5 py-1 rounded-lg text-xs font-medium transition bg-zinc-800 hover:bg-zinc-700 text-zinc-400"
+                  >
+                    {copied ? (
+                      <>
+                        <Check className="w-3 h-3 text-emerald-400" />
+                        Copied
+                      </>
+                    ) : (
+                      <>
+                        <Copy className="w-3 h-3" />
+                        Copy
+                      </>
+                    )}
+                  </button>
+                </div>
+                <pre className="px-5 py-4 text-sm text-emerald-300 font-mono overflow-x-auto whitespace-pre-wrap break-all leading-relaxed">
+                  {result.installCommand}
+                </pre>
+                <div className="px-5 py-3 border-t border-zinc-800 text-xs text-zinc-600">
+                  Paste this command on your server (requires root). It will
+                  install cloudflared, register the tunnel, configure SSH CA
+                  trust, and create the login user.
+                </div>
+              </div>
+            )}
+
+            {/* Launch URL */}
+            {result.launchUrl && (
+              <a
+                href={result.launchUrl}
+                target="_blank"
+                rel="noopener noreferrer"
+                className="flex items-center justify-center gap-2 rounded-xl border border-emerald-500/30 bg-emerald-500/5 p-4 text-emerald-300 hover:bg-emerald-500/10 transition"
+              >
+                <ExternalLink className="w-4 h-4" />
+                <span className="font-medium">
+                  Open {result.launchUrl}
+                </span>
+              </a>
+            )}
+          </div>
+        )}
+      </div>
+
+      <style jsx>{`
+        .form-input {
+          width: 100%;
+          border-radius: 0.75rem;
+          border: 1px solid rgb(39 39 42);
+          background: rgb(24 24 27 / 0.8);
+          padding: 0.625rem 0.875rem;
+          font-size: 0.875rem;
+          color: rgb(228 228 231);
+          outline: none;
+          transition: all 0.15s;
+        }
+        .form-input:focus {
+          border-color: rgb(16 185 129 / 0.5);
+          box-shadow: 0 0 0 2px rgb(16 185 129 / 0.1);
+        }
+        .form-input::placeholder {
+          color: rgb(113 113 122);
+        }
+      `}</style>
+    </div>
+  );
+}
+
+function Field({
+  icon,
+  label,
+  hint,
+  children,
+}: {
+  icon: React.ReactNode;
+  label: string;
+  hint?: string;
+  children: React.ReactNode;
+}) {
+  return (
+    <div>
+      <label className="flex items-center gap-1.5 text-sm font-medium text-zinc-300 mb-1.5">
+        <span className="text-zinc-500">{icon}</span>
+        {label}
+      </label>
+      {children}
+      {hint && <p className="text-xs text-zinc-600 mt-1">{hint}</p>}
+    </div>
+  );
+}
diff --git a/src/app/globals.css b/src/app/globals.css
new file mode 100644
index 0000000..20ed68e
--- /dev/null
+++ b/src/app/globals.css
@@ -0,0 +1,38 @@
+@import "tailwindcss";
+
+/* Tailwind v4: class-based dark mode (set by next-themes on <html>) */
+@custom-variant dark (&:where(.dark, .dark *));
+
+/* Design tokens */
+:root {
+  --bg: #ffffff;
+  --bg-subtle: #f8fafc;
+  --bg-card: #f1f5f9;
+  --border: #e2e8f0;
+  --border-subtle: #f1f5f9;
+  --text: #0f172a;
+  --text-muted: #64748b;
+  --text-faint: #94a3b8;
+  --accent: #10b981;
+  --accent-dim: rgba(16,185,129,0.12);
+  --accent-border: rgba(16,185,129,0.3);
+}
+
+.dark {
+  --bg: #09090b;
+  --bg-subtle: #111113;
+  --bg-card: #18181b;
+  --border: #27272a;
+  --border-subtle: #1f1f22;
+  --text: #f4f4f5;
+  --text-muted: #71717a;
+  --text-faint: #3f3f46;
+  --accent: #10b981;
+  --accent-dim: rgba(16,185,129,0.1);
+  --accent-border: rgba(16,185,129,0.25);
+}
+
+body {
+  background: var(--bg);
+  color: var(--text);
+}
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
new file mode 100644
index 0000000..bb82901
--- /dev/null
+++ b/src/app/layout.tsx
@@ -0,0 +1,26 @@
+import type { Metadata } from "next";
+import Navigation from "@/components/Navigation";
+import Providers from "./providers";
+import "./globals.css";
+
+export const metadata: Metadata = {
+  title: "SSH Launcher",
+  description: "Cloudflare Zero Trust SSH Web Terminal Launcher",
+};
+
+export default function RootLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <html lang="zh-CN" suppressHydrationWarning>
+      <body className="min-h-screen antialiased transition-colors duration-200">
+        <Providers>
+          <Navigation />
+          {children}
+        </Providers>
+      </body>
+    </html>
+  );
+}
diff --git a/src/app/loading.tsx b/src/app/loading.tsx
new file mode 100644
index 0000000..e3434f7
--- /dev/null
+++ b/src/app/loading.tsx
@@ -0,0 +1,56 @@
+export default function Loading() {
+  return (
+    <div className="min-h-screen">
+      <div className="fixed inset-0 -z-10">
+        <div className="absolute inset-0 bg-[radial-gradient(ellipse_80%_50%_at_50%_-20%,rgba(16,185,129,0.12),transparent)]" />
+        <div className="absolute inset-0 bg-zinc-950" style={{ zIndex: -1 }} />
+      </div>
+
+      <div className="max-w-6xl mx-auto px-4 sm:px-6 py-8 sm:py-12 animate-pulse">
+        {/* Header skeleton */}
+        <div className="flex items-center gap-3 mb-10">
+          <div className="w-10 h-10 rounded-xl bg-zinc-800" />
+          <div>
+            <div className="h-6 w-40 rounded bg-zinc-800 mb-1.5" />
+            <div className="h-4 w-64 rounded bg-zinc-900" />
+          </div>
+        </div>
+
+        {/* Stats skeleton */}
+        <div className="grid grid-cols-2 sm:grid-cols-4 gap-3 mb-8">
+          {Array.from({ length: 4 }).map((_, i) => (
+            <div
+              key={i}
+              className="rounded-xl border border-zinc-800/80 bg-zinc-900/60 p-4"
+            >
+              <div className="h-3 w-16 rounded bg-zinc-800 mb-2" />
+              <div className="h-7 w-10 rounded bg-zinc-800" />
+            </div>
+          ))}
+        </div>
+
+        {/* Search skeleton */}
+        <div className="h-10 rounded-xl bg-zinc-900 border border-zinc-800 mb-6" />
+
+        {/* Card skeletons */}
+        <div className="grid gap-3 sm:grid-cols-2 lg:grid-cols-3">
+          {Array.from({ length: 6 }).map((_, i) => (
+            <div
+              key={i}
+              className="rounded-xl border border-zinc-800/80 bg-zinc-900/60 p-5"
+            >
+              <div className="flex items-center gap-2.5 mb-3">
+                <div className="w-8 h-8 rounded-lg bg-zinc-800" />
+                <div className="h-5 w-32 rounded bg-zinc-800" />
+              </div>
+              <div className="h-4 w-48 rounded bg-zinc-800/60 mb-3" />
+              <div className="pt-3 border-t border-zinc-800/50">
+                <div className="h-3 w-20 rounded bg-zinc-800/40" />
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/src/app/page.tsx b/src/app/page.tsx
new file mode 100644
index 0000000..6a768fd
--- /dev/null
+++ b/src/app/page.tsx
@@ -0,0 +1,34 @@
+import { listAccessApps, filterSshApps } from "@/lib/cloudflare";
+import Dashboard from "@/components/Dashboard";
+import { AlertTriangle } from "lucide-react";
+
+export const revalidate = 60;
+
+export default async function Home() {
+  let apps;
+  let error: string | null = null;
+
+  try {
+    const allApps = await listAccessApps();
+    apps = filterSshApps(allApps);
+  } catch (e) {
+    error = e instanceof Error ? e.message : "Unknown error";
+    apps = [];
+  }
+
+  if (error) {
+    return (
+      <div className="min-h-screen flex items-center justify-center p-4">
+        <div className="max-w-md w-full rounded-2xl border border-red-500/20 bg-red-500/5 p-8 text-center">
+          <AlertTriangle className="w-10 h-10 text-red-400 mx-auto mb-4" />
+          <h2 className="text-lg font-semibold text-red-300 mb-2">
+            Failed to load applications
+          </h2>
+          <p className="text-sm text-red-400/80 break-words">{error}</p>
+        </div>
+      </div>
+    );
+  }
+
+  return <Dashboard apps={apps} />;
+}
diff --git a/src/app/providers.tsx b/src/app/providers.tsx
new file mode 100644
index 0000000..492da1d
--- /dev/null
+++ b/src/app/providers.tsx
@@ -0,0 +1,11 @@
+"use client";
+
+import { ThemeProvider } from "next-themes";
+
+export default function Providers({ children }: { children: React.ReactNode }) {
+  return (
+    <ThemeProvider attribute="class" defaultTheme="system" enableSystem disableTransitionOnChange>
+      {children}
+    </ThemeProvider>
+  );
+}
diff --git a/src/app/tunnels/page.tsx b/src/app/tunnels/page.tsx
new file mode 100644
index 0000000..4aa10e8
--- /dev/null
+++ b/src/app/tunnels/page.tsx
@@ -0,0 +1,33 @@
+import { listTunnels } from "@/lib/cloudflare";
+import TunnelList from "@/components/TunnelList";
+import { AlertTriangle } from "lucide-react";
+
+export const revalidate = 30;
+
+export default async function TunnelsPage() {
+  let tunnels;
+  let error: string | null = null;
+
+  try {
+    tunnels = await listTunnels();
+  } catch (e) {
+    error = e instanceof Error ? e.message : "Unknown error";
+    tunnels = [];
+  }
+
+  if (error) {
+    return (
+      <div className="min-h-[calc(100vh-3.5rem)] flex items-center justify-center p-4">
+        <div className="max-w-md w-full rounded-2xl border border-red-500/20 bg-red-500/5 p-8 text-center">
+          <AlertTriangle className="w-10 h-10 text-red-400 mx-auto mb-4" />
+          <h2 className="text-lg font-semibold text-red-300 mb-2">
+            Failed to load tunnels
+          </h2>
+          <p className="text-sm text-red-400/80 break-words">{error}</p>
+        </div>
+      </div>
+    );
+  }
+
+  return <TunnelList tunnels={tunnels} />;
+}
diff --git a/src/components/Dashboard.tsx b/src/components/Dashboard.tsx
new file mode 100644
index 0000000..8e6c8e6
--- /dev/null
+++ b/src/components/Dashboard.tsx
@@ -0,0 +1,308 @@
+"use client";
+
+import { useState, useMemo } from "react";
+import {
+  Terminal,
+  ExternalLink,
+  Search,
+  Server,
+  Clock,
+  Tag,
+  Globe,
+  Shield,
+  Activity,
+  ChevronRight,
+  Monitor,
+} from "lucide-react";
+import MetricsWidget from "@/components/MetricsWidget";
+
+export interface SshAppData {
+  id: string;
+  name: string;
+  domain: string;
+  domains: string[];
+  launchUrl: string;
+  createdAt: string | null;
+  updatedAt: string | null;
+  tags: string[];
+  logoUrl: string | null;
+  sessionDuration: string | null;
+  metricsUrl: string | null;
+}
+
+function timeAgo(dateStr: string | null): string {
+  if (!dateStr) return "Unknown";
+  const diff = Date.now() - new Date(dateStr).getTime();
+  const mins = Math.floor(diff / 60000);
+  if (mins < 1) return "Just now";
+  if (mins < 60) return `${mins}m ago`;
+  const hrs = Math.floor(mins / 60);
+  if (hrs < 24) return `${hrs}h ago`;
+  const days = Math.floor(hrs / 24);
+  if (days < 30) return `${days}d ago`;
+  const months = Math.floor(days / 30);
+  return `${months}mo ago`;
+}
+
+export default function Dashboard({ apps }: { apps: SshAppData[] }) {
+  const [search, setSearch] = useState("");
+  const [selectedTag, setSelectedTag] = useState<string | null>(null);
+
+  const allTags = useMemo(() => {
+    const tagSet = new Set<string>();
+    apps.forEach((a) => a.tags.forEach((t) => tagSet.add(t)));
+    return Array.from(tagSet).sort();
+  }, [apps]);
+
+  const filtered = useMemo(() => {
+    return apps.filter((app) => {
+      const q = search.toLowerCase();
+      const matchSearch =
+        !q ||
+        app.name.toLowerCase().includes(q) ||
+        app.domain.toLowerCase().includes(q) ||
+        app.tags.some((t) => t.toLowerCase().includes(q));
+      const matchTag = !selectedTag || app.tags.includes(selectedTag);
+      return matchSearch && matchTag;
+    });
+  }, [apps, search, selectedTag]);
+
+  return (
+    <div className="min-h-screen bg-[var(--bg)]">
+      {/* Background accent */}
+      <div className="fixed inset-0 -z-10 pointer-events-none">
+        <div className="absolute inset-0 bg-[radial-gradient(ellipse_80%_50%_at_50%_-20%,var(--accent-dim),transparent)]" />
+      </div>
+
+      <div className="max-w-6xl mx-auto px-4 sm:px-6 py-8 sm:py-12">
+        {/* Header */}
+        <header className="mb-10">
+          <div className="flex items-center gap-3 mb-1">
+            <div className="flex items-center justify-center w-10 h-10 rounded-xl bg-[var(--accent-dim)] border border-[var(--accent-border)]">
+              <Monitor className="w-5 h-5 text-emerald-500" />
+            </div>
+            <div>
+              <h1 className="text-2xl font-bold tracking-tight text-[var(--text)]">
+                SSH Launcher
+              </h1>
+              <p className="text-sm text-[var(--text-muted)]">
+                Cloudflare Zero Trust · Browser Terminal
+              </p>
+            </div>
+          </div>
+        </header>
+
+        {/* Stats row */}
+        <div className="grid grid-cols-2 sm:grid-cols-4 gap-3 mb-8">
+          <StatCard
+            icon={<Server className="w-4 h-4" />}
+            label="Total Hosts"
+            value={apps.length}
+          />
+          <StatCard
+            icon={<Activity className="w-4 h-4" />}
+            label="Visible"
+            value={filtered.length}
+          />
+          <StatCard
+            icon={<Tag className="w-4 h-4" />}
+            label="Tags"
+            value={allTags.length}
+          />
+          <StatCard
+            icon={<Shield className="w-4 h-4" />}
+            label="Zero Trust"
+            value="ON"
+            accent
+          />
+        </div>
+
+        {/* Search + Tags */}
+        <div className="mb-6 space-y-3">
+          {/* Search bar */}
+          <div className="relative">
+            <Search className="absolute left-3.5 top-1/2 -translate-y-1/2 w-4 h-4 text-[var(--text-faint)]" />
+            <input
+              type="text"
+              placeholder="Search hosts by name, domain, or tag..."
+              value={search}
+              onChange={(e) => setSearch(e.target.value)}
+              className="w-full rounded-xl border border-[var(--border)] bg-[var(--bg-subtle)] pl-10 pr-4 py-2.5 text-sm text-[var(--text)] placeholder:text-[var(--text-faint)] outline-none transition focus:border-[var(--accent-border)] focus:ring-1 focus:ring-[var(--accent-dim)]"
+            />
+          </div>
+
+          {/* Tag pills */}
+          {allTags.length > 0 && (
+            <div className="flex flex-wrap gap-2">
+              <button
+                onClick={() => setSelectedTag(null)}
+                className={`px-3 py-1 rounded-lg text-xs font-medium transition ${
+                  selectedTag === null
+                    ? "bg-emerald-500/20 text-emerald-300 border border-emerald-500/30"
+                    : "bg-zinc-800/50 text-zinc-500 border border-zinc-800 hover:border-zinc-700"
+                }`}
+              >
+                All
+              </button>
+              {allTags.map((tag) => (
+                <button
+                  key={tag}
+                  onClick={() =>
+                    setSelectedTag(selectedTag === tag ? null : tag)
+                  }
+                  className={`px-3 py-1 rounded-lg text-xs font-medium transition ${
+                    selectedTag === tag
+                      ? "bg-[var(--accent-dim)] text-emerald-600 dark:text-emerald-300 border border-[var(--accent-border)]"
+                      : "bg-[var(--bg-card)] text-[var(--text-muted)] border border-[var(--border)] hover:border-[var(--text-faint)]"
+                  }`}
+                >
+                  {tag}
+                </button>
+              ))}
+            </div>
+          )}
+        </div>
+
+        {/* Empty state */}
+        {filtered.length === 0 && (
+          <div className="flex flex-col items-center justify-center py-24 text-[var(--text-muted)]">
+            <div className="w-16 h-16 rounded-2xl bg-[var(--bg-card)] border border-[var(--border)] flex items-center justify-center mb-4">
+              <Terminal className="w-8 h-8 opacity-30" />
+            </div>
+            <p className="text-lg font-medium text-[var(--text-muted)]">
+              No hosts found
+            </p>
+            <p className="text-sm mt-1">
+              {search || selectedTag
+                ? "Try adjusting your search or filter."
+                : "Ensure your API token has Access: Apps and Policies Read permission."}
+            </p>
+          </div>
+        )}
+
+        {/* Host cards */}
+        <div className="grid gap-3 sm:grid-cols-2 lg:grid-cols-3">
+          {filtered.map((app) => (
+            <HostCard key={app.id} app={app} />
+          ))}
+        </div>
+
+        {/* Footer */}
+        <footer className="mt-14 pt-6 border-t border-[var(--border-subtle)] flex flex-col sm:flex-row items-center justify-between gap-2 text-xs text-[var(--text-faint)]">
+          <div className="flex items-center gap-1.5">
+            <Shield className="w-3 h-3" />
+            <span>Protected by Cloudflare Zero Trust</span>
+          </div>
+          <div className="flex items-center gap-1.5">
+            <Clock className="w-3 h-3" />
+            <span>Auto-refreshes every 60s</span>
+          </div>
+        </footer>
+      </div>
+    </div>
+  );
+}
+
+/* ---------- Sub-components ---------- */
+
+function StatCard({
+  icon,
+  label,
+  value,
+  accent,
+}: {
+  icon: React.ReactNode;
+  label: string;
+  value: string | number;
+  accent?: boolean;
+}) {
+  return (
+    <div className="rounded-xl border border-[var(--border)] bg-[var(--bg-card)] p-4">
+      <div
+        className={`flex items-center gap-1.5 text-xs mb-1 ${
+          accent ? "text-emerald-500" : "text-[var(--text-muted)]"
+        }`}
+      >
+        {icon}
+        <span>{label}</span>
+      </div>
+      <div
+        className={`text-xl font-bold tracking-tight ${
+          accent ? "text-emerald-500" : "text-[var(--text)]"
+        }`}
+      >
+        {value}
+      </div>
+    </div>
+  );
+}
+
+function HostCard({ app }: { app: SshAppData }) {
+  return (
+    <div className="group relative flex flex-col rounded-xl border border-[var(--border)] bg-[var(--bg-card)] transition-all duration-200 hover:border-[var(--accent-border)] hover:shadow-lg hover:shadow-[var(--accent-dim)] overflow-hidden">
+      <a href={`/connect/${app.id}`} className="flex flex-col p-5 flex-1">
+        {/* Top row */}
+        <div className="flex items-start justify-between mb-3">
+          <div className="flex items-center gap-2.5 min-w-0">
+            <div className="flex items-center justify-center w-8 h-8 rounded-lg bg-[var(--accent-dim)] border border-[var(--accent-border)] shrink-0">
+              <Terminal className="w-4 h-4 text-emerald-500" />
+            </div>
+            <span className="font-semibold text-[var(--text)] truncate">{app.name}</span>
+          </div>
+          <ChevronRight className="w-4 h-4 text-[var(--text-faint)] shrink-0 transition-all group-hover:text-emerald-500 group-hover:translate-x-0.5" />
+        </div>
+
+        {/* Domain */}
+        <div className="flex items-center gap-1.5 text-sm text-[var(--text-muted)] mb-3 truncate">
+          <Globe className="w-3.5 h-3.5 shrink-0 text-[var(--text-faint)]" />
+          <span className="truncate">{app.domain}</span>
+        </div>
+
+        {/* Extra domains */}
+        {app.domains.length > 1 && (
+          <div className="text-xs text-[var(--text-faint)] mb-3">
+            +{app.domains.length - 1} more domain
+            {app.domains.length - 1 > 1 ? "s" : ""}
+          </div>
+        )}
+
+        {/* Tags */}
+        {app.tags.length > 0 && (
+          <div className="flex flex-wrap gap-1.5 mb-3">
+            {app.tags.slice(0, 3).map((tag) => (
+              <span
+                key={tag}
+                className="px-2 py-0.5 rounded-md bg-[var(--bg-subtle)] text-[var(--text-muted)] text-xs border border-[var(--border)]"
+              >
+                {tag}
+              </span>
+            ))}
+            {app.tags.length > 3 && (
+              <span className="text-xs text-[var(--text-faint)]">
+                +{app.tags.length - 3}
+              </span>
+            )}
+          </div>
+        )}
+
+        {/* Bottom info */}
+        <div className="mt-auto pt-3 border-t border-[var(--border)] flex items-center justify-between text-xs text-[var(--text-faint)]">
+          <div className="flex items-center gap-1">
+            <Clock className="w-3 h-3" />
+            <span>{timeAgo(app.updatedAt)}</span>
+          </div>
+          {app.sessionDuration && (
+            <span>TTL {app.sessionDuration}</span>
+          )}
+        </div>
+      </a>
+
+      {/* Metrics widget (outside the connect link) */}
+      {app.metricsUrl && (
+        <div className="px-5 pb-5">
+          <MetricsWidget metricsUrl={app.metricsUrl} />
+        </div>
+      )}
+    </div>
+  );
+}
diff --git a/src/components/MetricsWidget.tsx b/src/components/MetricsWidget.tsx
new file mode 100644
index 0000000..520d59e
--- /dev/null
+++ b/src/components/MetricsWidget.tsx
@@ -0,0 +1,172 @@
+"use client";
+
+import { useState, useEffect, useCallback } from "react";
+import { Cpu, HardDrive, Wifi, Clock, Thermometer, Activity } from "lucide-react";
+import { fmtBytes, fmtUptime, type ServerMetrics } from "@/lib/metrics";
+
+function Bar({ value, warn = 70, danger = 90 }: { value: number; warn?: number; danger?: number }) {
+  const color =
+    value >= danger ? "bg-red-500" :
+    value >= warn   ? "bg-amber-400" :
+    "bg-emerald-500";
+  return (
+    <div className="h-1.5 rounded-full bg-[var(--border)] overflow-hidden">
+      <div
+        className={`h-full rounded-full transition-all duration-700 ${color}`}
+        style={{ width: `${Math.min(value, 100)}%` }}
+      />
+    </div>
+  );
+}
+
+function Stat({ label, value, sub }: { label: string; value: string; sub?: string }) {
+  return (
+    <div>
+      <p className="text-[10px] text-[var(--text-faint)] uppercase tracking-wide">{label}</p>
+      <p className="text-sm font-semibold text-[var(--text)] leading-tight">{value}</p>
+      {sub && <p className="text-[10px] text-[var(--text-muted)]">{sub}</p>}
+    </div>
+  );
+}
+
+export default function MetricsWidget({ metricsUrl }: { metricsUrl: string }) {
+  const [data, setData] = useState<ServerMetrics | null>(null);
+  const [error, setError] = useState(false);
+  const [lastUpdate, setLastUpdate] = useState<number | null>(null);
+
+  const poll = useCallback(async () => {
+    try {
+      const res = await fetch(
+        `/api/metrics?url=${encodeURIComponent(metricsUrl)}`,
+        { cache: "no-store" }
+      );
+      if (!res.ok) throw new Error();
+      const json = await res.json();
+      setData(json);
+      setError(false);
+      setLastUpdate(Date.now());
+    } catch {
+      setError(true);
+    }
+  }, [metricsUrl]);
+
+  useEffect(() => {
+    poll();
+    const id = setInterval(poll, 8000);
+    return () => clearInterval(id);
+  }, [poll]);
+
+  if (error) {
+    return (
+      <div className="mt-3 pt-3 border-t border-[var(--border)] flex items-center gap-2 text-xs text-[var(--text-faint)]">
+        <Activity className="w-3 h-3" />
+        <span>Metrics agent unreachable</span>
+      </div>
+    );
+  }
+
+  if (!data) {
+    return (
+      <div className="mt-3 pt-3 border-t border-[var(--border)]">
+        <div className="flex gap-3 animate-pulse">
+          {[1, 2, 3].map((i) => (
+            <div key={i} className="flex-1 h-8 rounded bg-[var(--bg-card)]" />
+          ))}
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="mt-3 pt-3 border-t border-[var(--border)] space-y-2.5">
+      {/* CPU + RAM row */}
+      <div className="grid grid-cols-2 gap-3">
+        <div className="space-y-1">
+          <div className="flex items-center justify-between">
+            <span className="flex items-center gap-1 text-[10px] text-[var(--text-faint)] uppercase tracking-wide">
+              <Cpu className="w-3 h-3" /> CPU
+            </span>
+            <span className="text-xs font-semibold text-[var(--text)]">{data.cpu.toFixed(1)}%</span>
+          </div>
+          <Bar value={data.cpu} />
+          <p className="text-[10px] text-[var(--text-faint)]">
+            load {data.load.map((l) => l.toFixed(2)).join(" ")}
+          </p>
+        </div>
+        <div className="space-y-1">
+          <div className="flex items-center justify-between">
+            <span className="flex items-center gap-1 text-[10px] text-[var(--text-faint)] uppercase tracking-wide">
+              <Activity className="w-3 h-3" /> RAM
+            </span>
+            <span className="text-xs font-semibold text-[var(--text)]">{data.memory.percent.toFixed(0)}%</span>
+          </div>
+          <Bar value={data.memory.percent} />
+          <p className="text-[10px] text-[var(--text-faint)]">
+            {fmtBytes(data.memory.used * 1024)} / {fmtBytes(data.memory.total * 1024)}
+          </p>
+        </div>
+      </div>
+
+      {/* Disk + Net row */}
+      <div className="grid grid-cols-2 gap-3">
+        <div className="space-y-1">
+          <div className="flex items-center justify-between">
+            <span className="flex items-center gap-1 text-[10px] text-[var(--text-faint)] uppercase tracking-wide">
+              <HardDrive className="w-3 h-3" /> Disk
+            </span>
+            <span className="text-xs font-semibold text-[var(--text)]">{data.disk.percent.toFixed(0)}%</span>
+          </div>
+          <Bar value={data.disk.percent} />
+          <p className="text-[10px] text-[var(--text-faint)]">
+            {fmtBytes(data.disk.used * 1024)} / {fmtBytes(data.disk.total * 1024)}
+          </p>
+        </div>
+        <div className="space-y-1">
+          <span className="flex items-center gap-1 text-[10px] text-[var(--text-faint)] uppercase tracking-wide">
+            <Wifi className="w-3 h-3" /> Network
+          </span>
+          <p className="text-xs font-semibold text-[var(--text)]">
+            ↑ {fmtBytes(data.network.txBytesPerSec)}/s
+          </p>
+          <p className="text-xs font-semibold text-[var(--text)]">
+            ↓ {fmtBytes(data.network.rxBytesPerSec)}/s
+          </p>
+        </div>
+      </div>
+
+      {/* GPU row (if present) */}
+      {data.gpu && data.gpu.length > 0 && (
+        <div className="space-y-1.5">
+          {data.gpu.map((g, i) => (
+            <div key={i} className="space-y-1">
+              <div className="flex items-center justify-between">
+                <span className="text-[10px] text-[var(--text-faint)] truncate max-w-[60%]">
+                  GPU {i > 0 ? i : ""} {g.name}
+                </span>
+                <span className="flex items-center gap-1 text-[10px] text-[var(--text-faint)]">
+                  <Thermometer className="w-3 h-3" /> {g.tempC}°C
+                </span>
+              </div>
+              <Bar value={g.utilPercent} />
+              <p className="text-[10px] text-[var(--text-faint)]">
+                util {g.utilPercent}% · {g.memUsedMiB}/{g.memTotalMiB} MiB
+              </p>
+            </div>
+          ))}
+        </div>
+      )}
+
+      {/* Uptime */}
+      <div className="flex items-center justify-between text-[10px] text-[var(--text-faint)]">
+        <span className="flex items-center gap-1">
+          <Clock className="w-3 h-3" /> up {fmtUptime(data.uptime)}
+        </span>
+        {lastUpdate && (
+          <span>
+            {Math.round((Date.now() - lastUpdate) / 1000)}s ago
+          </span>
+        )}
+      </div>
+    </div>
+  );
+}
diff --git a/src/components/Navigation.tsx b/src/components/Navigation.tsx
new file mode 100644
index 0000000..9acacae
--- /dev/null
+++ b/src/components/Navigation.tsx
@@ -0,0 +1,77 @@
+"use client";
+
+import Link from "next/link";
+import { usePathname } from "next/navigation";
+import { useTheme } from "next-themes";
+import { useEffect, useState } from "react";
+import { Monitor, PlusCircle, Server, Sun, Moon, User } from "lucide-react";
+
+const links = [
+  { href: "/", label: "Hosts", icon: Monitor },
+  { href: "/create", label: "Deploy", icon: PlusCircle },
+  { href: "/tunnels", label: "Tunnels", icon: Server },
+];
+
+function ThemeToggle() {
+  const { resolvedTheme, setTheme } = useTheme();
+  const [mounted, setMounted] = useState(false);
+  useEffect(() => setMounted(true), []);
+  if (!mounted) return <div className="w-8 h-8" />;
+  return (
+    <button
+      onClick={() => setTheme(resolvedTheme === "dark" ? "light" : "dark")}
+      className="w-8 h-8 flex items-center justify-center rounded-lg text-[var(--text-muted)] hover:text-[var(--text)] hover:bg-[var(--bg-card)] transition"
+      aria-label="Toggle theme"
+    >
+      {resolvedTheme === "dark" ? <Sun className="w-4 h-4" /> : <Moon className="w-4 h-4" />}
+    </button>
+  );
+}
+
+export default function Navigation() {
+  const pathname = usePathname();
+
+  return (
+    <nav className="sticky top-0 z-50 border-b border-[var(--border)] bg-[var(--bg)]/90 backdrop-blur-xl">
+      <div className="max-w-6xl mx-auto px-4 sm:px-6 flex items-center h-14 gap-2">
+        <Link
+          href="/"
+          className="flex items-center gap-2 font-bold text-[var(--text)] mr-3 shrink-0"
+        >
+          <div className="w-7 h-7 rounded-lg bg-[var(--accent-dim)] border border-[var(--accent-border)] flex items-center justify-center">
+            <Monitor className="w-3.5 h-3.5 text-emerald-500" />
+          </div>
+          <span className="hidden sm:inline text-sm">SSH Launcher</span>
+        </Link>
+
+        <div className="flex items-center gap-1 flex-1">
+          {links.map(({ href, label, icon: Icon }) => {
+            const active = pathname === href;
+            return (
+              <Link
+                key={href}
+                href={href}
+                className={`flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-sm font-medium transition ${
+                  active
+                    ? "bg-[var(--bg-card)] text-[var(--text)]"
+                    : "text-[var(--text-muted)] hover:text-[var(--text)] hover:bg-[var(--bg-subtle)]"
+                }`}
+              >
+                <Icon className="w-3.5 h-3.5" />
+                {label}
+              </Link>
+            );
+          })}
+        </div>
+
+        <div className="flex items-center gap-2">
+          <ThemeToggle />
+          <div className="hidden sm:flex items-center gap-1.5 px-2.5 py-1 rounded-lg bg-[var(--bg-card)] border border-[var(--border)] text-xs text-[var(--text-muted)]">
+            <User className="w-3 h-3" />
+            <span>CF Access</span>
+          </div>
+        </div>
+      </div>
+    </nav>
+  );
+}
diff --git a/src/components/TunnelList.tsx b/src/components/TunnelList.tsx
new file mode 100644
index 0000000..1fa9f35
--- /dev/null
+++ b/src/components/TunnelList.tsx
@@ -0,0 +1,178 @@
+"use client";
+
+import { useState, useMemo } from "react";
+import {
+  Server,
+  Search,
+  Wifi,
+  WifiOff,
+  Clock,
+  MapPin,
+  Shield,
+} from "lucide-react";
+
+interface TunnelConnection {
+  id: string;
+  is_pending_reconnect: boolean;
+  origin_ip: string;
+  opened_at: string;
+}
+
+interface Tunnel {
+  id: string;
+  name: string;
+  status: string;
+  created_at: string;
+  deleted_at: string | null;
+  connections: TunnelConnection[];
+}
+
+function timeAgo(dateStr: string): string {
+  const diff = Date.now() - new Date(dateStr).getTime();
+  const mins = Math.floor(diff / 60000);
+  if (mins < 1) return "Just now";
+  if (mins < 60) return `${mins}m ago`;
+  const hrs = Math.floor(mins / 60);
+  if (hrs < 24) return `${hrs}h ago`;
+  const days = Math.floor(hrs / 24);
+  if (days < 30) return `${days}d ago`;
+  return `${Math.floor(days / 30)}mo ago`;
+}
+
+export default function TunnelList({ tunnels }: { tunnels: Tunnel[] }) {
+  const [search, setSearch] = useState("");
+
+  const filtered = useMemo(() => {
+    const q = search.toLowerCase();
+    if (!q) return tunnels;
+    return tunnels.filter(
+      (t) =>
+        t.name.toLowerCase().includes(q) || t.id.toLowerCase().includes(q)
+    );
+  }, [tunnels, search]);
+
+  const activeCount = tunnels.filter(
+    (t) => t.connections && t.connections.length > 0
+  ).length;
+
+  return (
+    <div className="min-h-[calc(100vh-3.5rem)]">
+      <div className="fixed inset-0 -z-10">
+        <div className="absolute inset-0 bg-[radial-gradient(ellipse_80%_50%_at_50%_-20%,rgba(16,185,129,0.08),transparent)]" />
+        <div className="absolute inset-0 bg-zinc-950" style={{ zIndex: -1 }} />
+      </div>
+
+      <div className="max-w-6xl mx-auto px-4 sm:px-6 py-8 sm:py-12">
+        {/* Header */}
+        <div className="flex items-center gap-3 mb-8">
+          <div className="w-10 h-10 rounded-xl bg-blue-500/10 border border-blue-500/20 flex items-center justify-center">
+            <Server className="w-5 h-5 text-blue-400" />
+          </div>
+          <div>
+            <h1 className="text-2xl font-bold text-white">Tunnels</h1>
+            <p className="text-sm text-zinc-500">
+              {tunnels.length} total · {activeCount} active
+            </p>
+          </div>
+        </div>
+
+        {/* Search */}
+        <div className="relative mb-6">
+          <Search className="absolute left-3.5 top-1/2 -translate-y-1/2 w-4 h-4 text-zinc-500" />
+          <input
+            type="text"
+            placeholder="Search by name or ID..."
+            value={search}
+            onChange={(e) => setSearch(e.target.value)}
+            className="w-full rounded-xl border border-zinc-800 bg-zinc-900/80 backdrop-blur-sm pl-10 pr-4 py-2.5 text-sm text-zinc-200 placeholder-zinc-600 outline-none transition focus:border-blue-500/50 focus:ring-1 focus:ring-blue-500/20"
+          />
+        </div>
+
+        {/* Empty */}
+        {filtered.length === 0 && (
+          <div className="flex flex-col items-center justify-center py-24 text-zinc-500">
+            <Server className="w-12 h-12 opacity-30 mb-4" />
+            <p className="text-lg font-medium text-zinc-400">
+              No tunnels found
+            </p>
+          </div>
+        )}
+
+        {/* Tunnel cards */}
+        <div className="space-y-3">
+          {filtered.map((tunnel) => {
+            const isActive =
+              tunnel.connections && tunnel.connections.length > 0;
+            return (
+              <div
+                key={tunnel.id}
+                className="rounded-xl border border-zinc-800/80 bg-zinc-900/60 backdrop-blur-sm p-5 transition hover:border-zinc-700"
+              >
+                <div className="flex items-start justify-between gap-4">
+                  {/* Left */}
+                  <div className="min-w-0 flex-1">
+                    <div className="flex items-center gap-2 mb-1">
+                      {isActive ? (
+                        <Wifi className="w-4 h-4 text-emerald-400 shrink-0" />
+                      ) : (
+                        <WifiOff className="w-4 h-4 text-zinc-600 shrink-0" />
+                      )}
+                      <span className="font-semibold text-white truncate">
+                        {tunnel.name}
+                      </span>
+                      <span
+                        className={`px-2 py-0.5 rounded-full text-xs font-medium ${
+                          isActive
+                            ? "bg-emerald-500/10 text-emerald-400 border border-emerald-500/20"
+                            : "bg-zinc-800 text-zinc-500 border border-zinc-700"
+                        }`}
+                      >
+                        {isActive ? "Active" : "Inactive"}
+                      </span>
+                    </div>
+                    <p className="text-xs text-zinc-600 font-mono truncate">
+                      {tunnel.id}
+                    </p>
+                  </div>
+
+                  {/* Right meta */}
+                  <div className="text-right text-xs text-zinc-600 shrink-0">
+                    <div className="flex items-center gap-1 justify-end">
+                      <Clock className="w-3 h-3" />
+                      Created {timeAgo(tunnel.created_at)}
+                    </div>
+                  </div>
+                </div>
+
+                {/* Connections */}
+                {isActive && tunnel.connections.length > 0 && (
+                  <div className="mt-3 pt-3 border-t border-zinc-800/50 flex flex-wrap gap-2">
+                    {tunnel.connections.map((conn) => (
+                      <div
+                        key={conn.id}
+                        className="flex items-center gap-1.5 px-2.5 py-1 rounded-lg bg-zinc-800/50 text-xs text-zinc-400"
+                      >
+                        <MapPin className="w-3 h-3 text-zinc-600" />
+                        {conn.origin_ip}
+                        <span className="text-zinc-600">·</span>
+                        <span className="text-zinc-600">
+                          {timeAgo(conn.opened_at)}
+                        </span>
+                      </div>
+                    ))}
+                  </div>
+                )}
+              </div>
+            );
+          })}
+        </div>
+
+        {/* Footer */}
+        <div className="mt-14 pt-6 border-t border-zinc-900 flex items-center gap-2 text-xs text-zinc-600">
+          <Shield className="w-3 h-3" />
+          <span>Cloudflare Tunnel · auto-refreshes every 30s</span>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/src/lib/cloudflare.ts b/src/lib/cloudflare.ts
new file mode 100644
index 0000000..07014f4
--- /dev/null
+++ b/src/lib/cloudflare.ts
@@ -0,0 +1,555 @@
+const CF_API_BASE = "https://api.cloudflare.com/client/v4";
+
+// ─── Types ───────────────────────────────────────────────────────────────────
+
+export interface AccessApp {
+  id: string;
+  name: string;
+  domain: string;
+  type: string;
+  self_hosted_domains?: string[];
+  created_at?: string;
+  updated_at?: string;
+  aud?: string;
+  app_launcher_visible?: boolean;
+  session_duration?: string;
+  tags?: string[];
+  logo_url?: string;
+  [key: string]: unknown;
+}
+
+export interface SshApp {
+  id: string;
+  name: string;
+  domain: string;
+  domains: string[];
+  launchUrl: string;
+  createdAt: string | null;
+  updatedAt: string | null;
+  tags: string[];
+  logoUrl: string | null;
+  sessionDuration: string | null;
+  metricsUrl: string | null;
+}
+
+export interface Tunnel {
+  id: string;
+  name: string;
+  status: string;
+  created_at: string;
+  deleted_at: string | null;
+  connections: TunnelConnection[];
+  [key: string]: unknown;
+}
+
+export interface TunnelConnection {
+  id: string;
+  is_pending_reconnect: boolean;
+  origin_ip: string;
+  opened_at: string;
+  [key: string]: unknown;
+}
+
+export interface SetupInput {
+  serverName: string;
+  hostname: string;
+  sshPort: number;
+  ssoEmail: string;
+  allowedEmails: string[];
+}
+
+export interface SetupStepResult {
+  step: string;
+  status: "success" | "error" | "skipped";
+  message: string;
+  data?: Record<string, unknown>;
+}
+
+export interface SetupResult {
+  steps: SetupStepResult[];
+  tunnelToken: string | null;
+  caPubkey: string | null;
+  installCommand: string | null;
+  launchUrl: string | null;
+}
+
+// ─── Credentials ─────────────────────────────────────────────────────────────
+
+function getCredentials() {
+  const accountId = process.env.CLOUDFLARE_ACCOUNT_ID;
+  const apiToken = process.env.CLOUDFLARE_API_TOKEN;
+  if (!accountId || !apiToken) {
+    throw new Error(
+      "Missing CLOUDFLARE_ACCOUNT_ID or CLOUDFLARE_API_TOKEN env vars"
+    );
+  }
+  return { accountId, apiToken };
+}
+
+async function cfGet(path: string, revalidateSec = 60) {
+  const { apiToken } = getCredentials();
+  const res = await fetch(`${CF_API_BASE}${path}`, {
+    headers: { Authorization: `Bearer ${apiToken}` },
+    next: { revalidate: revalidateSec },
+  });
+  if (!res.ok) {
+    const body = await res.text();
+    throw new Error(`CF API GET ${path} → ${res.status}: ${body}`);
+  }
+  return res.json();
+}
+
+async function cfPost(path: string, body: unknown) {
+  const { apiToken } = getCredentials();
+  const res = await fetch(`${CF_API_BASE}${path}`, {
+    method: "POST",
+    headers: {
+      Authorization: `Bearer ${apiToken}`,
+      "Content-Type": "application/json",
+    },
+    body: JSON.stringify(body),
+  });
+  const json = await res.json();
+  if (!res.ok) {
+    throw new Error(
+      `CF API POST ${path} → ${res.status}: ${JSON.stringify(json.errors ?? json)}`
+    );
+  }
+  return json;
+}
+
+async function cfPut(path: string, body: unknown) {
+  const { apiToken } = getCredentials();
+  const res = await fetch(`${CF_API_BASE}${path}`, {
+    method: "PUT",
+    headers: {
+      Authorization: `Bearer ${apiToken}`,
+      "Content-Type": "application/json",
+    },
+    body: JSON.stringify(body),
+  });
+  const json = await res.json();
+  if (!res.ok) {
+    throw new Error(
+      `CF API PUT ${path} → ${res.status}: ${JSON.stringify(json.errors ?? json)}`
+    );
+  }
+  return json;
+}
+
+async function cfDelete(path: string) {
+  const { apiToken } = getCredentials();
+  const res = await fetch(`${CF_API_BASE}${path}`, {
+    method: "DELETE",
+    headers: { Authorization: `Bearer ${apiToken}` },
+  });
+  const json = await res.json();
+  if (!res.ok) {
+    throw new Error(
+      `CF API DELETE ${path} → ${res.status}: ${JSON.stringify(json.errors ?? json)}`
+    );
+  }
+  return json;
+}
+
+// ─── Access Applications ─────────────────────────────────────────────────────
+
+export async function listAccessApps(): Promise<AccessApp[]> {
+  const { accountId } = getCredentials();
+  const allApps: AccessApp[] = [];
+  let page = 1;
+  const perPage = 50;
+
+  while (true) {
+    const json = await cfGet(
+      `/accounts/${accountId}/access/apps?page=${page}&per_page=${perPage}`
+    );
+    const apps: AccessApp[] = json.result ?? [];
+    allApps.push(...apps);
+
+    const info = json.result_info;
+    if (!info || page >= info.total_pages) break;
+    page++;
+  }
+
+  return allApps;
+}
+
+export function filterSshApps(apps: AccessApp[]): SshApp[] {
+  return apps
+    .filter((app) => app.type === "self_hosted")
+    .map((app) => {
+      const primaryDomain =
+        app.domain ||
+        (app.self_hosted_domains && app.self_hosted_domains[0]) ||
+        "";
+      const allDomains =
+        app.self_hosted_domains ?? (primaryDomain ? [primaryDomain] : []);
+      const rawTags = (app.tags as string[]) ?? [];
+      const metricsTag = rawTags.find((t) => t.startsWith("metrics:"));
+      const metricsUrl = metricsTag ? metricsTag.slice("metrics:".length) : null;
+      const visibleTags = rawTags.filter((t) => !t.startsWith("metrics:"));
+      return {
+        id: app.id,
+        name: app.name || primaryDomain,
+        domain: primaryDomain,
+        domains: allDomains,
+        launchUrl: primaryDomain.startsWith("http")
+          ? primaryDomain
+          : `https://${primaryDomain}`,
+        createdAt: (app.created_at as string) ?? null,
+        updatedAt: (app.updated_at as string) ?? null,
+        tags: visibleTags,
+        logoUrl: (app.logo_url as string) ?? null,
+        sessionDuration: (app.session_duration as string) ?? null,
+        metricsUrl,
+      };
+    });
+}
+
+export async function getSshAppById(id: string): Promise<SshApp | null> {
+  const apps = await listAccessApps();
+  const ssh = filterSshApps(apps);
+  return ssh.find((a) => a.id === id) ?? null;
+}
+
+// ─── Tunnels ─────────────────────────────────────────────────────────────────
+
+export async function listTunnels(): Promise<Tunnel[]> {
+  const { accountId } = getCredentials();
+  const json = await cfGet(
+    `/accounts/${accountId}/cfd_tunnel?is_deleted=false&per_page=50`,
+    30
+  );
+  return (json.result as Tunnel[]) ?? [];
+}
+
+export async function createTunnel(name: string): Promise<Tunnel> {
+  const { accountId } = getCredentials();
+  const tunnelSecret = Buffer.from(
+    crypto.getRandomValues(new Uint8Array(32))
+  ).toString("base64");
+  const json = await cfPost(`/accounts/${accountId}/cfd_tunnel`, {
+    name,
+    tunnel_secret: tunnelSecret,
+    config_src: "cloudflare",
+  });
+  return json.result as Tunnel;
+}
+
+export async function deleteTunnel(tunnelId: string): Promise<void> {
+  const { accountId } = getCredentials();
+  await cfDelete(`/accounts/${accountId}/cfd_tunnel/${tunnelId}`);
+}
+
+export async function getTunnelToken(tunnelId: string): Promise<string> {
+  const { accountId } = getCredentials();
+  const json = await cfGet(
+    `/accounts/${accountId}/cfd_tunnel/${tunnelId}/token`,
+    0
+  );
+  return json.result as string;
+}
+
+export async function configureTunnel(
+  tunnelId: string,
+  hostname: string,
+  sshPort: number
+): Promise<void> {
+  const { accountId } = getCredentials();
+  await cfPut(`/accounts/${accountId}/cfd_tunnel/${tunnelId}/configurations`, {
+    config: {
+      ingress: [
+        {
+          hostname,
+          service: `ssh://localhost:${sshPort}`,
+        },
+        {
+          service: "http_status:404",
+        },
+      ],
+    },
+  });
+}
+
+// ─── DNS ─────────────────────────────────────────────────────────────────────
+
+export async function findZoneForHostname(
+  hostname: string
+): Promise<{ zoneId: string; zoneName: string }> {
+  // Try progressively shorter domain parts to find the zone
+  const parts = hostname.split(".");
+  for (let i = 0; i < parts.length - 1; i++) {
+    const candidate = parts.slice(i).join(".");
+    const json = await cfGet(`/zones?name=${encodeURIComponent(candidate)}`, 0);
+    const zones = json.result ?? [];
+    if (zones.length > 0) {
+      return { zoneId: zones[0].id, zoneName: zones[0].name };
+    }
+  }
+  throw new Error(`No Cloudflare zone found for hostname: ${hostname}`);
+}
+
+export async function createDnsCname(
+  zoneId: string,
+  name: string,
+  tunnelId: string
+): Promise<void> {
+  await cfPost(`/zones/${zoneId}/dns_records`, {
+    type: "CNAME",
+    name,
+    content: `${tunnelId}.cfargotunnel.com`,
+    proxied: true,
+    comment: "Auto-created by SSH Launcher",
+  });
+}
+
+// ─── Access App Creation ─────────────────────────────────────────────────────
+
+export async function createAccessApp(
+  hostname: string,
+  appName: string,
+  allowedEmails: string[]
+): Promise<{ appId: string; metricsHostname: string }> {
+  const { accountId } = getCredentials();
+
+  const policies = [];
+
+  if (allowedEmails.length > 0) {
+    policies.push({
+      name: "Allow specified emails",
+      decision: "allow",
+      include: allowedEmails.map((email) => ({
+        email: { email },
+      })),
+    });
+  } else {
+    // Fallback: allow any authenticated user
+    policies.push({
+      name: "Allow any authenticated user",
+      decision: "allow",
+      include: [{ everyone: {} }],
+    });
+  }
+
+  const metricsHostname = `metrics.${hostname}`;
+
+  const json = await cfPost(`/accounts/${accountId}/access/apps`, {
+    name: appName,
+    domain: hostname,
+    type: "self_hosted",
+    session_duration: "24h",
+    auto_redirect_to_identity: true,
+    app_launcher_visible: true,
+    tags: [`metrics:https://${metricsHostname}`],
+    policies,
+  });
+
+  return { appId: json.result.id, metricsHostname };
+}
+
+// ─── Short-lived Certificate CA ──────────────────────────────────────────────
+
+export async function getOrCreateCaCert(
+  appId: string
+): Promise<string | null> {
+  const { accountId } = getCredentials();
+  try {
+    // Try to get existing CA
+    const json = await cfGet(
+      `/accounts/${accountId}/access/apps/${appId}/ca`,
+      0
+    );
+    if (json.result?.public_key) {
+      return json.result.public_key as string;
+    }
+    // If not found, create one
+    const createJson = await cfPost(
+      `/accounts/${accountId}/access/apps/${appId}/ca`,
+      {}
+    );
+    return (createJson.result?.public_key as string) ?? null;
+  } catch {
+    return null;
+  }
+}
+
+// ─── Full Pipeline ───────────────────────────────────────────────────────────
+
+export async function runFullSetup(input: SetupInput): Promise<SetupResult> {
+  const steps: SetupStepResult[] = [];
+  let tunnelToken: string | null = null;
+  let caPubkey: string | null = null;
+  let tunnelId: string | null = null;
+  let appId: string | null = null;
+
+  // Step 1: Find zone
+  let zoneId: string | null = null;
+  try {
+    const zone = await findZoneForHostname(input.hostname);
+    zoneId = zone.zoneId;
+    steps.push({
+      step: "find_zone",
+      status: "success",
+      message: `Found zone: ${zone.zoneName} (${zone.zoneId})`,
+      data: zone,
+    });
+  } catch (e) {
+    steps.push({
+      step: "find_zone",
+      status: "error",
+      message: e instanceof Error ? e.message : "Failed to find zone",
+    });
+    return { steps, tunnelToken: null, caPubkey: null, installCommand: null, launchUrl: null };
+  }
+
+  // Step 2: Create tunnel
+  try {
+    const tunnel = await createTunnel(input.serverName);
+    tunnelId = tunnel.id;
+    steps.push({
+      step: "create_tunnel",
+      status: "success",
+      message: `Tunnel created: ${tunnel.name} (${tunnel.id})`,
+      data: { tunnelId: tunnel.id, tunnelName: tunnel.name },
+    });
+  } catch (e) {
+    steps.push({
+      step: "create_tunnel",
+      status: "error",
+      message: e instanceof Error ? e.message : "Failed to create tunnel",
+    });
+    return { steps, tunnelToken: null, caPubkey: null, installCommand: null, launchUrl: null };
+  }
+
+  // Step 3: Configure tunnel ingress (SSH + metrics HTTP)
+  const metricsDomain = `metrics.${input.hostname}`;
+  try {
+    const { accountId } = getCredentials();
+    await cfPut(`/accounts/${accountId}/cfd_tunnel/${tunnelId}/configurations`, {
+      config: {
+        ingress: [
+          { hostname: input.hostname, service: `ssh://localhost:${input.sshPort}` },
+          { hostname: metricsDomain, service: "http://localhost:9101" },
+          { service: "http_status:404" },
+        ],
+      },
+    });
+    steps.push({
+      step: "configure_tunnel",
+      status: "success",
+      message: `Ingress: ${input.hostname} → SSH, ${metricsDomain} → metrics:9101`,
+    });
+  } catch (e) {
+    steps.push({
+      step: "configure_tunnel",
+      status: "error",
+      message: e instanceof Error ? e.message : "Failed to configure tunnel",
+    });
+  }
+
+  // Step 4: Create DNS CNAME
+  try {
+    await createDnsCname(zoneId, input.hostname, tunnelId);
+    steps.push({
+      step: "create_dns",
+      status: "success",
+      message: `CNAME created: ${input.hostname} → ${tunnelId}.cfargotunnel.com`,
+    });
+  } catch (e) {
+    const msg = e instanceof Error ? e.message : "";
+    if (msg.includes("already exists") || msg.includes("81057")) {
+      steps.push({
+        step: "create_dns",
+        status: "skipped",
+        message: `DNS record already exists for ${input.hostname}`,
+      });
+    } else {
+      steps.push({
+        step: "create_dns",
+        status: "error",
+        message: msg || "Failed to create DNS record",
+      });
+    }
+  }
+
+  // Step 5: Create Access application
+  let metricsHostname: string | null = null;
+  try {
+    const appResult = await createAccessApp(
+      input.hostname,
+      `SSH · ${input.serverName}`,
+      input.allowedEmails
+    );
+    appId = appResult.appId;
+    metricsHostname = appResult.metricsHostname;
+    steps.push({
+      step: "create_access_app",
+      status: "success",
+      message: `Access app created: SSH · ${input.serverName}`,
+      data: { appId },
+    });
+  } catch (e) {
+    steps.push({
+      step: "create_access_app",
+      status: "error",
+      message: e instanceof Error ? e.message : "Failed to create Access app",
+    });
+  }
+
+  // Step 6: Get / create short-lived certificate CA
+  if (appId) {
+    caPubkey = await getOrCreateCaCert(appId);
+    steps.push({
+      step: "setup_ca",
+      status: caPubkey ? "success" : "error",
+      message: caPubkey
+        ? "Short-lived certificate CA configured"
+        : "Could not retrieve CA public key (enable manually in dashboard)",
+    });
+  }
+
+  // Step 7: Get tunnel token
+  try {
+    tunnelToken = await getTunnelToken(tunnelId);
+    steps.push({
+      step: "get_token",
+      status: "success",
+      message: "Tunnel token retrieved",
+    });
+  } catch (e) {
+    steps.push({
+      step: "get_token",
+      status: "error",
+      message: e instanceof Error ? e.message : "Failed to get tunnel token",
+    });
+  }
+
+  // Build install command
+  const loginUser = input.ssoEmail.split("@")[0];
+  let installCommand: string | null = null;
+  if (tunnelToken) {
+    const parts = [
+      `sudo bash setup-cf-browser-ssh.sh`,
+      `  --tunnel-token "${tunnelToken}"`,
+      `  --sso-email "${input.ssoEmail}"`,
+      `  --login-user "${loginUser}"`,
+    ];
+    if (caPubkey) {
+      parts.push(`  --ca-pubkey "${caPubkey}"`);
+    }
+    installCommand = parts.join(" \\\n");
+  }
+
+  const launchUrl = `https://${input.hostname}`;
+
+  // Browser rendering reminder
+  steps.push({
+    step: "browser_rendering",
+    status: "skipped",
+    message:
+      "Remember: enable Browser rendering → SSH in the Cloudflare dashboard for this Access app",
+  });
+
+  return { steps, tunnelToken, caPubkey, installCommand, launchUrl };
+}
diff --git a/src/lib/identity.ts b/src/lib/identity.ts
new file mode 100644
index 0000000..77d7a3f
--- /dev/null
+++ b/src/lib/identity.ts
@@ -0,0 +1,29 @@
+import { decodeJwt } from "jose";
+
+export interface CFIdentity {
+  email: string;
+  name: string | null;
+  sub: string;
+}
+
+/**
+ * Decode the Cloudflare Access JWT from the CF-Access-Jwt-Assertion header.
+ * Returns null in local dev (no CF Access header present).
+ * Does NOT perform full signature verification — the request is already
+ * validated by Cloudflare's edge before it reaches Next.js.
+ */
+export function parseCFIdentity(
+  header: string | null | undefined
+): CFIdentity | null {
+  if (!header) return null;
+  try {
+    const payload = decodeJwt(header);
+    return {
+      email: (payload.email as string) ?? (payload.sub as string) ?? "unknown",
+      name: (payload.name as string) ?? null,
+      sub: (payload.sub as string) ?? "",
+    };
+  } catch {
+    return null;
+  }
+}
diff --git a/src/lib/metrics.ts b/src/lib/metrics.ts
new file mode 100644
index 0000000..97f4d24
--- /dev/null
+++ b/src/lib/metrics.ts
@@ -0,0 +1,69 @@
+export interface ServerMetrics {
+  cpu: number;
+  memory: { used: number; total: number; percent: number };
+  disk: { used: number; total: number; percent: number };
+  network: { rxBytesPerSec: number; txBytesPerSec: number };
+  load: [number, number, number];
+  uptime: number;
+  gpu?: {
+    name: string;
+    tempC: number;
+    utilPercent: number;
+    memUsedMiB: number;
+    memTotalMiB: number;
+  }[];
+  hostname: string;
+  timestamp: number;
+}
+
+/**
+ * Fetch metrics from a server's metrics agent.
+ * The agent must be running on the server and accessible via CF tunnel.
+ *
+ * Cloudflare Access service token headers are passed so the request
+ * can traverse an Access-protected hostname.
+ */
+export async function fetchServerMetrics(
+  metricsUrl: string
+): Promise<ServerMetrics> {
+  const clientId = process.env.CF_SERVICE_CLIENT_ID;
+  const clientSecret = process.env.CF_SERVICE_CLIENT_SECRET;
+
+  const headers: Record<string, string> = {
+    Accept: "application/json",
+  };
+  if (clientId && clientSecret) {
+    headers["CF-Access-Client-Id"] = clientId;
+    headers["CF-Access-Client-Secret"] = clientSecret;
+  }
+
+  const url = metricsUrl.endsWith("/") ? metricsUrl + "metrics.json" : metricsUrl + "/metrics.json";
+
+  const res = await fetch(url, {
+    headers,
+    next: { revalidate: 0 },
+    signal: AbortSignal.timeout(8000),
+  });
+
+  if (!res.ok) {
+    throw new Error(`Metrics fetch failed: ${res.status}`);
+  }
+
+  return res.json() as Promise<ServerMetrics>;
+}
+
+export function fmtBytes(bytes: number): string {
+  if (bytes < 1024) return `${bytes} B`;
+  if (bytes < 1024 ** 2) return `${(bytes / 1024).toFixed(1)} KB`;
+  if (bytes < 1024 ** 3) return `${(bytes / 1024 ** 2).toFixed(1)} MB`;
+  return `${(bytes / 1024 ** 3).toFixed(1)} GB`;
+}
+
+export function fmtUptime(seconds: number): string {
+  const d = Math.floor(seconds / 86400);
+  const h = Math.floor((seconds % 86400) / 3600);
+  const m = Math.floor((seconds % 3600) / 60);
+  if (d > 0) return `${d}d ${h}h`;
+  if (h > 0) return `${h}h ${m}m`;
+  return `${m}m`;
+}
diff --git a/tsconfig.json b/tsconfig.json
new file mode 100644
index 0000000..fba2bf3
--- /dev/null
+++ b/tsconfig.json
@@ -0,0 +1,21 @@
+{
+  "compilerOptions": {
+    "target": "ES2017",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "bundler",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "preserve",
+    "incremental": true,
+    "plugins": [{ "name": "next" }],
+    "paths": { "@/*": ["./src/*"] }
+  },
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
+  "exclude": ["node_modules"]
+}