Upload 6 files

Dockerfile

@@ -0,0 +1,55 @@
+# syntax=docker/dockerfile:1.6
+FROM python:3.11-slim
+
+# ---------------------------------------------------------------
+# System setup
+# ---------------------------------------------------------------
+ENV PYTHONDONTWRITEBYTECODE=1 \
+    PYTHONUNBUFFERED=1 \
+    PIP_NO_CACHE_DIR=1 \
+    PIP_DISABLE_PIP_VERSION_CHECK=1 \
+    PORT=7860 \
+    POLL_INTERVAL=10 \
+    UPSTREAM_API=https://dooratre-db.hf.space
+
+# Minimal build deps (eventlet/greenlet sometimes need them on slim)
+RUN apt-get update && apt-get install -y --no-install-recommends \
+        curl \
+        build-essential \
+    && rm -rf /var/lib/apt/lists/*
+
+# ---------------------------------------------------------------
+# Non-root user (HF Spaces friendly)
+# ---------------------------------------------------------------
+RUN useradd -m -u 1000 appuser
+WORKDIR /app
+
+# ---------------------------------------------------------------
+# Python deps (cache layer)
+# ---------------------------------------------------------------
+COPY requirements.txt .
+RUN pip install --upgrade pip && pip install -r requirements.txt
+
+# ---------------------------------------------------------------
+# App source
+# ---------------------------------------------------------------
+COPY --chown=appuser:appuser . .
+
+USER appuser
+
+EXPOSE 7860
+
+HEALTHCHECK --interval=30s --timeout=5s --start-period=10s --retries=3 \
+    CMD curl -fsS http://localhost:7860/health || exit 1
+
+# ---------------------------------------------------------------
+# Run with gunicorn + eventlet worker for Socket.IO
+# ---------------------------------------------------------------
+CMD ["gunicorn", \
+     "-k", "eventlet", \
+     "-w", "1", \
+     "--bind", "0.0.0.0:7860", \
+     "--access-logfile", "-", \
+     "--error-logfile", "-", \
+     "--timeout", "120", \
+     "app:app"]

app.py

@@ -0,0 +1,191 @@
+"""
+ServerClass DB Admin Dashboard
+Flask + Socket.IO backend with background polling and real-time broadcasts.
+"""
+import os
+import time
+import threading
+from typing import Dict, Any, Optional
+
+import requests
+from flask import Flask, render_template, request, jsonify
+from flask_socketio import SocketIO, emit, disconnect
+
+# -----------------------------------------------------------------------------
+# Configuration
+# -----------------------------------------------------------------------------
+UPSTREAM_API = os.environ.get("UPSTREAM_API", "https://dooratre-db.hf.space")
+POLL_INTERVAL = int(os.environ.get("POLL_INTERVAL", "10"))  # seconds
+SECRET_KEY = os.environ.get("FLASK_SECRET_KEY", os.urandom(24).hex())
+
+app = Flask(__name__)
+app.config["SECRET_KEY"] = SECRET_KEY
+socketio = SocketIO(app, cors_allowed_origins="*", async_mode="eventlet")
+
+# -----------------------------------------------------------------------------
+# Per-connection credential store (sid -> {admin_secret, api_key})
+# -----------------------------------------------------------------------------
+_sessions: Dict[str, Dict[str, str]] = {}
+_sessions_lock = threading.Lock()
+
+
+def get_session(sid: str) -> Optional[Dict[str, str]]:
+    with _sessions_lock:
+        return _sessions.get(sid)
+
+
+def set_session(sid: str, creds: Dict[str, str]) -> None:
+    with _sessions_lock:
+        _sessions[sid] = creds
+
+
+def drop_session(sid: str) -> None:
+    with _sessions_lock:
+        _sessions.pop(sid, None)
+
+
+# -----------------------------------------------------------------------------
+# Upstream API client
+# -----------------------------------------------------------------------------
+def fetch_upstream(creds: Dict[str, str]) -> Dict[str, Any]:
+    """Fetch users + server status from upstream API using provided credentials."""
+    result: Dict[str, Any] = {
+        "ok": True,
+        "users": [],
+        "total": 0,
+        "status": None,
+        "errors": {},
+        "timestamp": int(time.time()),
+    }
+
+    admin_secret = creds.get("admin_secret", "").strip()
+    api_key = creds.get("api_key", "").strip()
+
+    # Users (admin endpoint)
+    try:
+        r = requests.get(
+            f"{UPSTREAM_API}/admin/users",
+            headers={"X-Admin-Secret": admin_secret, "Content-Type": "application/json"},
+            timeout=15,
+        )
+        if r.ok:
+            data = r.json()
+            result["users"] = data.get("users", [])
+            result["total"] = data.get("total", len(result["users"]))
+        else:
+            result["errors"]["users"] = f"{r.status_code}: {r.text[:200]}"
+    except Exception as e:
+        result["errors"]["users"] = str(e)
+
+    # Server status (API key)
+    try:
+        r = requests.get(
+            f"{UPSTREAM_API}/api/server-status",
+            headers={"X-API-Key": api_key, "Content-Type": "application/json"},
+            timeout=15,
+        )
+        if r.ok:
+            result["status"] = r.json()
+        else:
+            result["errors"]["status"] = f"{r.status_code}: {r.text[:200]}"
+    except Exception as e:
+        result["errors"]["status"] = str(e)
+
+    if result["errors"] and not result["users"] and not result["status"]:
+        result["ok"] = False
+
+    return result
+
+
+# -----------------------------------------------------------------------------
+# Background poller
+# -----------------------------------------------------------------------------
+def background_poller():
+    """Periodically fetches data for each connected session and pushes updates."""
+    while True:
+        socketio.sleep(POLL_INTERVAL)
+        with _sessions_lock:
+            sessions_snapshot = dict(_sessions)
+
+        for sid, creds in sessions_snapshot.items():
+            if not creds.get("admin_secret") and not creds.get("api_key"):
+                continue
+            try:
+                payload = fetch_upstream(creds)
+                payload["source"] = "auto"
+                socketio.emit("data_update", payload, to=sid)
+            except Exception as e:
+                socketio.emit("error", {"message": str(e)}, to=sid)
+
+
+# -----------------------------------------------------------------------------
+# Routes
+# -----------------------------------------------------------------------------
+@app.route("/")
+def index():
+    return render_template("index.html", poll_interval=POLL_INTERVAL)
+
+
+@app.route("/health")
+def health():
+    return jsonify({"status": "ok", "sessions": len(_sessions)})
+
+
+# -----------------------------------------------------------------------------
+# Socket.IO events
+# -----------------------------------------------------------------------------
+@socketio.on("connect")
+def on_connect():
+    set_session(request.sid, {"admin_secret": "", "api_key": ""})
+    emit("connected", {"sid": request.sid, "poll_interval": POLL_INTERVAL})
+
+
+@socketio.on("disconnect")
+def on_disconnect():
+    drop_session(request.sid)
+
+
+@socketio.on("authenticate")
+def on_authenticate(data):
+    """Client sends credentials; server stores them and triggers immediate fetch."""
+    creds = {
+        "admin_secret": (data or {}).get("admin_secret", "").strip(),
+        "api_key": (data or {}).get("api_key", "").strip(),
+    }
+    set_session(request.sid, creds)
+
+    payload = fetch_upstream(creds)
+    payload["source"] = "manual"
+    emit("data_update", payload)
+
+
+@socketio.on("refresh")
+def on_refresh():
+    """Manual refresh request."""
+    creds = get_session(request.sid) or {}
+    payload = fetch_upstream(creds)
+    payload["source"] = "manual"
+    emit("data_update", payload)
+
+
+# -----------------------------------------------------------------------------
+# Start background poller at import time (gunicorn-friendly)
+# -----------------------------------------------------------------------------
+_poller_started = False
+_poller_lock = threading.Lock()
+
+def _ensure_poller():
+    global _poller_started
+    with _poller_lock:
+        if not _poller_started:
+            socketio.start_background_task(background_poller)
+            _poller_started = True
+
+_ensure_poller()
+
+# -----------------------------------------------------------------------------
+# Entry point (only used for local `python app.py`)
+# -----------------------------------------------------------------------------
+if __name__ == "__main__":
+    port = int(os.environ.get("PORT", 7860))
+    socketio.run(app, host="0.0.0.0", port=port, debug=False)

requirements.txt

@@ -0,0 +1,7 @@
+Flask==3.0.3
+Flask-SocketIO==5.3.6
+python-socketio==5.11.4
+python-engineio==4.9.1
+eventlet==0.36.1
+requests==2.32.3
+gunicorn==22.0.0

static/css/style.css

@@ -0,0 +1,609 @@
+/* =============================================================
+   ServerClass Admin — Minimalist Monochrome
+   ============================================================= */
+
+:root {
+  --background: #FFFFFF;
+  --foreground: #000000;
+  --muted: #F5F5F5;
+  --muted-fg: #525252;
+  --border: #000000;
+  --border-light: #E5E5E5;
+}
+
+* { box-sizing: border-box; margin: 0; padding: 0; }
+
+html, body {
+  background: var(--background);
+  color: var(--foreground);
+  font-family: "Source Serif 4", Georgia, serif;
+  font-size: 17px;
+  line-height: 1.6;
+  -webkit-font-smoothing: antialiased;
+}
+
+/* Global paper texture */
+body {
+  position: relative;
+}
+body::before {
+  content: "";
+  position: fixed;
+  inset: 0;
+  pointer-events: none;
+  z-index: 1;
+  background-image: repeating-linear-gradient(
+    0deg, transparent, transparent 1px, #000 1px, #000 2px
+  );
+  background-size: 100% 4px;
+  opacity: 0.015;
+}
+body::after {
+  content: "";
+  position: fixed;
+  inset: 0;
+  pointer-events: none;
+  z-index: 1;
+  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
+  opacity: 0.025;
+}
+
+/* Layer real content above textures */
+.topbar, .hero, .section, .divider, .footer { position: relative; z-index: 2; }
+
+/* Utility */
+.mono {
+  font-family: "JetBrains Mono", monospace;
+  font-size: 0.75rem;
+  letter-spacing: 0.1em;
+  text-transform: uppercase;
+  font-weight: 500;
+}
+.italic { font-family: "Playfair Display", Georgia, serif; font-style: italic; font-weight: 400; }
+
+.skip-link {
+  position: absolute;
+  left: -9999px;
+  top: 0;
+  background: #000;
+  color: #fff;
+  padding: 12px 20px;
+  text-decoration: none;
+  z-index: 999;
+}
+.skip-link:focus { left: 0; }
+
+/* =============================================================
+   TOPBAR
+   ============================================================= */
+.topbar {
+  border-bottom: 1px solid var(--foreground);
+  background: var(--background);
+}
+.topbar__inner {
+  max-width: 1280px;
+  margin: 0 auto;
+  padding: 18px 32px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 16px;
+  flex-wrap: wrap;
+}
+.topbar__brand {
+  display: flex;
+  align-items: center;
+  gap: 14px;
+  font-family: "Playfair Display", Georgia, serif;
+  font-size: 1.125rem;
+  letter-spacing: -0.01em;
+}
+.topbar__mark {
+  width: 14px;
+  height: 14px;
+  background: #000;
+  display: inline-block;
+}
+.topbar__name em { font-style: italic; padding: 0 4px; }
+.topbar__meta {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  color: var(--muted-fg);
+}
+.topbar__sep { color: var(--border-light); }
+.status-dot {
+  width: 10px;
+  height: 10px;
+  display: inline-block;
+  border: 1.5px solid #000;
+  background: #fff;
+}
+.status-dot[data-state="on"]  { background: #000; }
+.status-dot[data-state="warn"]{ background: repeating-linear-gradient(45deg,#000,#000 2px,#fff 2px,#fff 4px); }
+
+/* =============================================================
+   HERO
+   ============================================================= */
+.hero {
+  padding: 120px 32px 80px;
+  border-bottom: 1px solid var(--border-light);
+}
+.hero__inner {
+  max-width: 1280px;
+  margin: 0 auto;
+}
+.hero__eyebrow {
+  color: var(--muted-fg);
+  margin-bottom: 40px;
+}
+.hero__title {
+  font-family: "Playfair Display", Georgia, serif;
+  font-weight: 900;
+  font-size: clamp(4rem, 14vw, 11rem);
+  line-height: 0.9;
+  letter-spacing: -0.05em;
+  margin-bottom: 56px;
+}
+.hero__title .italic {
+  font-weight: 400;
+  color: #000;
+}
+.hero__rule {
+  display: flex;
+  align-items: center;
+  gap: 0;
+  margin-bottom: 40px;
+}
+.hero__rule-line {
+  flex: 1;
+  height: 4px;
+  background: #000;
+}
+.hero__rule-square {
+  width: 18px;
+  height: 18px;
+  border: 2px solid #000;
+  background: #fff;
+  margin: 0 14px;
+}
+.hero__lede {
+  font-family: "Playfair Display", Georgia, serif;
+  font-style: italic;
+  font-size: clamp(1.25rem, 2vw, 1.75rem);
+  line-height: 1.4;
+  max-width: 640px;
+  color: #000;
+}
+
+/* =============================================================
+   DIVIDERS
+   ============================================================= */
+.divider { background: #000; }
+.divider--thick { height: 4px; }
+.divider--ultra { height: 8px; }
+
+/* =============================================================
+   SECTIONS
+   ============================================================= */
+.section {
+  padding: 96px 32px;
+}
+.section__inner {
+  max-width: 1280px;
+  margin: 0 auto;
+}
+.section__head {
+  display: flex;
+  align-items: baseline;
+  gap: 24px;
+  margin-bottom: 48px;
+  padding-bottom: 20px;
+  border-bottom: 1px solid var(--border-light);
+}
+.section__num {
+  color: var(--muted-fg);
+  flex-shrink: 0;
+}
+.section__title {
+  font-family: "Playfair Display", Georgia, serif;
+  font-weight: 700;
+  font-size: clamp(2rem, 5vw, 3.5rem);
+  letter-spacing: -0.03em;
+  line-height: 1;
+}
+
+/* Inverted stats section */
+.section--stats {
+  background: #000;
+  color: #fff;
+  position: relative;
+  overflow: hidden;
+}
+.section--stats::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  background-image: repeating-linear-gradient(
+    90deg, transparent, transparent 1px, #fff 1px, #fff 2px
+  );
+  background-size: 4px 100%;
+  opacity: 0.03;
+  pointer-events: none;
+}
+.section__head--invert {
+  border-bottom-color: rgba(255,255,255,0.2);
+}
+.section--stats .section__num { color: rgba(255,255,255,0.5); }
+
+/* =============================================================
+   AUTH FORM
+   ============================================================= */
+.auth {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 32px;
+  align-items: end;
+}
+.field {
+  display: block;
+}
+.field__label {
+  display: block;
+  color: var(--muted-fg);
+  margin-bottom: 12px;
+}
+.field__input {
+  width: 100%;
+  padding: 12px 0;
+  background: transparent;
+  border: none;
+  border-bottom: 2px solid #000;
+  font-family: "JetBrains Mono", monospace;
+  font-size: 1rem;
+  color: #000;
+  border-radius: 0;
+}
+.field__input::placeholder {
+  color: var(--muted-fg);
+  font-style: italic;
+}
+.field__input:focus {
+  outline: none;
+  border-bottom-width: 4px;
+}
+.auth__actions {
+  grid-column: 1 / -1;
+  display: flex;
+  gap: 16px;
+  flex-wrap: wrap;
+  margin-top: 24px;
+}
+
+/* =============================================================
+   BUTTONS
+   ============================================================= */
+.btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 12px;
+  padding: 16px 32px;
+  font-family: "JetBrains Mono", monospace;
+  font-size: 0.8125rem;
+  font-weight: 500;
+  letter-spacing: 0.15em;
+  text-transform: uppercase;
+  border-radius: 0;
+  cursor: pointer;
+  transition: all 100ms linear;
+  border: 2px solid #000;
+}
+.btn:focus-visible {
+  outline: 3px solid #000;
+  outline-offset: 3px;
+}
+.btn--primary {
+  background: #000;
+  color: #fff;
+}
+.btn--primary:hover {
+  background: #fff;
+  color: #000;
+}
+.btn--ghost {
+  background: transparent;
+  color: #000;
+  border-color: transparent;
+  border-bottom: 2px solid #000;
+  padding: 16px 8px;
+}
+.btn--ghost:hover {
+  border-bottom-width: 4px;
+  padding-bottom: 14px;
+}
+.btn__arrow {
+  display: inline-block;
+  transition: transform 100ms linear;
+}
+.btn:hover .btn__arrow {
+  transform: translateX(4px);
+}
+
+/* =============================================================
+   ERRORS
+   ============================================================= */
+.errors { margin-top: 32px; }
+.errors:empty { display: none; }
+.error {
+  border: 2px solid #000;
+  padding: 20px 24px;
+  margin-bottom: 12px;
+  font-family: "Source Serif 4", Georgia, serif;
+  display: flex;
+  gap: 16px;
+  align-items: flex-start;
+}
+.error__tag {
+  font-family: "JetBrains Mono", monospace;
+  font-size: 0.7rem;
+  letter-spacing: 0.15em;
+  text-transform: uppercase;
+  background: #000;
+  color: #fff;
+  padding: 4px 10px;
+  flex-shrink: 0;
+}
+.error__msg {
+  font-style: italic;
+  line-height: 1.5;
+  word-break: break-word;
+}
+
+/* =============================================================
+   STATS GRID
+   ============================================================= */
+.stats {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
+  gap: 0;
+  border-top: 1px solid rgba(255,255,255,0.2);
+  border-left: 1px solid rgba(255,255,255,0.2);
+}
+.stat {
+  padding: 40px 32px;
+  border-right: 1px solid rgba(255,255,255,0.2);
+  border-bottom: 1px solid rgba(255,255,255,0.2);
+  transition: background 100ms linear;
+}
+.stat:hover { background: rgba(255,255,255,0.04); }
+.stat__label {
+  color: rgba(255,255,255,0.6);
+  margin-bottom: 24px;
+}
+.stat__value {
+  font-family: "Playfair Display", Georgia, serif;
+  font-weight: 700;
+  font-size: clamp(3rem, 6vw, 5rem);
+  line-height: 0.9;
+  letter-spacing: -0.04em;
+  margin-bottom: 12px;
+}
+.stat__sub {
+  color: rgba(255,255,255,0.5);
+  font-size: 0.7rem;
+}
+.stat--placeholder .stat__value {
+  color: rgba(255,255,255,0.3);
+}
+
+/* =============================================================
+   PLACEHOLDER
+   ============================================================= */
+.placeholder {
+  padding: 80px 0;
+  text-align: center;
+  color: var(--muted-fg);
+  border-top: 1px solid var(--border-light);
+  border-bottom: 1px solid var(--border-light);
+}
+
+/* =============================================================
+   TABLES
+   ============================================================= */
+.table-wrap {
+  overflow-x: auto;
+  border-top: 2px solid #000;
+  border-bottom: 2px solid #000;
+}
+table.dataset {
+  width: 100%;
+  border-collapse: collapse;
+  font-family: "Source Serif 4", Georgia, serif;
+}
+table.dataset thead th {
+  text-align: left;
+  padding: 18px 16px;
+  font-family: "JetBrains Mono", monospace;
+  font-size: 0.7rem;
+  letter-spacing: 0.15em;
+  text-transform: uppercase;
+  font-weight: 500;
+  color: var(--muted-fg);
+  border-bottom: 1px solid #000;
+  background: #fff;
+  white-space: nowrap;
+}
+table.dataset tbody td {
+  padding: 18px 16px;
+  border-bottom: 1px solid var(--border-light);
+  font-size: 0.95rem;
+  vertical-align: middle;
+}
+table.dataset tbody tr {
+  transition: background 100ms linear, color 100ms linear;
+}
+table.dataset tbody tr:hover {
+  background: #000;
+  color: #fff;
+}
+table.dataset tbody tr:hover .mono,
+table.dataset tbody tr:hover .meta {
+  color: rgba(255,255,255,0.7);
+}
+table.dataset tbody tr:hover .badge {
+  background: #fff;
+  color: #000;
+}
+table.dataset tbody tr:hover .bar {
+  background: rgba(255,255,255,0.2);
+}
+table.dataset tbody tr:hover .bar__fill {
+  background: #fff;
+}
+
+.idx { color: var(--muted-fg); width: 48px; font-family: "JetBrains Mono", monospace; font-size: 0.8rem; }
+.headline { font-family: "Playfair Display", Georgia, serif; font-size: 1.1rem; font-weight: 700; letter-spacing: -0.01em; }
+.meta { color: var(--muted-fg); font-size: 0.8rem; font-family: "JetBrains Mono", monospace; }
+
+/* Badges (line-based, not filled) */
+.badge {
+  display: inline-block;
+  padding: 4px 10px;
+  border: 1px solid #000;
+  background: #fff;
+  color: #000;
+  font-family: "JetBrains Mono", monospace;
+  font-size: 0.7rem;
+  letter-spacing: 0.1em;
+  text-transform: uppercase;
+  font-weight: 500;
+}
+.badge--solid { background: #000; color: #fff; }
+.badge--empty { border-color: var(--border-light); color: var(--muted-fg); }
+
+/* Capacity bar */
+.bar {
+  position: relative;
+  width: 100%;
+  height: 6px;
+  background: var(--border-light);
+  margin-top: 8px;
+}
+.bar__fill {
+  position: absolute;
+  inset: 0 auto 0 0;
+  background: #000;
+  transition: width 200ms linear, background 100ms linear;
+}
+.bar__fill[data-state="warn"] {
+  background: repeating-linear-gradient(45deg, #000 0 4px, #fff 4px 6px);
+}
+.bar__fill[data-state="full"] {
+  background: repeating-linear-gradient(90deg, #000 0 2px, #fff 2px 4px);
+}
+
+.capacity-text {
+  font-family: "JetBrains Mono", monospace;
+  font-size: 0.85rem;
+  letter-spacing: 0.05em;
+}
+
+.url {
+  font-family: "JetBrains Mono", monospace;
+  font-size: 0.7rem;
+  color: var(--muted-fg);
+  max-width: 240px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  display: inline-block;
+}
+
+/* =============================================================
+   SEARCH
+   ============================================================= */
+.search {
+  display: flex;
+  align-items: center;
+  gap: 24px;
+  border-bottom: 2px solid #000;
+  margin-bottom: 32px;
+  padding-bottom: 8px;
+}
+.search__input {
+  flex: 1;
+  border: none;
+  background: transparent;
+  padding: 12px 0;
+  font-family: "Source Serif 4", Georgia, serif;
+  font-style: italic;
+  font-size: 1.125rem;
+  color: #000;
+  border-radius: 0;
+}
+.search__input:focus { outline: none; }
+.search__input::placeholder { color: var(--muted-fg); }
+.search__hint { color: var(--muted-fg); flex-shrink: 0; }
+
+/* =============================================================
+   FOOTER
+   ============================================================= */
+.footer {
+  background: #fff;
+  border-top: 1px solid #000;
+  padding: 32px;
+}
+.footer__inner {
+  max-width: 1280px;
+  margin: 0 auto;
+  display: flex;
+  justify-content: space-between;
+  flex-wrap: wrap;
+  gap: 16px;
+  color: var(--muted-fg);
+}
+
+/* =============================================================
+   PULSE (live update flash)
+   ============================================================= */
+@keyframes pulse-bg {
+  0%   { background: #000; color: #fff; }
+  100% { background: transparent; color: #000; }
+}
+.pulse {
+  animation: pulse-bg 600ms linear;
+}
+
+/* =============================================================
+   RESPONSIVE
+   ============================================================= */
+@media (max-width: 720px) {
+  .topbar__inner { padding: 16px 20px; }
+  .hero { padding: 64px 20px 48px; }
+  .section { padding: 64px 20px; }
+  .footer { padding: 24px 20px; }
+  .auth { grid-template-columns: 1fr; gap: 24px; }
+  .section__head { flex-direction: column; gap: 8px; margin-bottom: 32px; }
+  .stat { padding: 32px 20px; }
+  table.dataset thead { display: none; }
+  table.dataset, table.dataset tbody, table.dataset tr, table.dataset td { display: block; width: 100%; }
+  table.dataset tbody tr {
+    border-bottom: 2px solid #000;
+    padding: 16px 0;
+  }
+  table.dataset tbody td {
+    border: none;
+    padding: 6px 0;
+    display: flex;
+    justify-content: space-between;
+    gap: 16px;
+  }
+  table.dataset tbody td::before {
+    content: attr(data-label);
+    font-family: "JetBrains Mono", monospace;
+    font-size: 0.7rem;
+    letter-spacing: 0.1em;
+    text-transform: uppercase;
+    color: var(--muted-fg);
+  }
+}

static/js/dashboard.js

@@ -0,0 +1,323 @@
+/* =============================================================
+   ServerClass Admin — Dashboard Client
+   Socket.IO driven; no client-side polling.
+   ============================================================= */
+
+(() => {
+  const socket = io({ transports: ["websocket", "polling"] });
+
+  // State
+  let allUsers = [];
+  let lastStatus = null;
+  let lastTotal = 0;
+
+  // DOM refs
+  const $ = (id) => document.getElementById(id);
+  const connDot   = $("connDot");
+  const connLabel = $("connLabel");
+  const lastSync  = $("lastSync");
+  const errorBox  = $("errorBox");
+  const statsGrid = $("statsGrid");
+  const serversC  = $("serversContent");
+  const usersC    = $("usersContent");
+  const userCount = $("userCount");
+
+  // -----------------------------------------------------------
+  // Helpers
+  // -----------------------------------------------------------
+  const escapeHtml = (s) => {
+    if (s === null || s === undefined) return "";
+    return String(s)
+      .replace(/&/g, "&")
+      .replace(/</g, "&lt;")
+      .replace(/>/g, "&gt;")
+      .replace(/"/g, "&quot;")
+      .replace(/'/g, "&#039;");
+  };
+
+  const fmtDate = (iso) => {
+    if (!iso) return "—";
+    try {
+      const d = new Date(iso);
+      if (isNaN(d)) return "—";
+      return d.toLocaleString(undefined, {
+        year: "numeric", month: "short", day: "2-digit",
+        hour: "2-digit", minute: "2-digit"
+      });
+    } catch { return "—"; }
+  };
+
+  const fmtTime = (ts) => {
+    const d = ts ? new Date(ts * 1000) : new Date();
+    return d.toLocaleTimeString(undefined, { hour12: false });
+  };
+
+  const setConn = (state, label) => {
+    connDot.dataset.state = state;
+    connLabel.textContent = label;
+  };
+
+  const pulse = (el) => {
+    if (!el) return;
+    el.classList.remove("pulse");
+    // force reflow to restart animation
+    void el.offsetWidth;
+    el.classList.add("pulse");
+  };
+
+  // -----------------------------------------------------------
+  // Render: errors
+  // -----------------------------------------------------------
+  const renderErrors = (errors) => {
+    if (!errors || Object.keys(errors).length === 0) {
+      errorBox.innerHTML = "";
+      return;
+    }
+    errorBox.innerHTML = Object.entries(errors).map(([k, v]) => `
+      <div class="error">
+        <span class="error__tag">${escapeHtml(k)}</span>
+        <span class="error__msg">${escapeHtml(v)}</span>
+      </div>
+    `).join("");
+  };
+
+  // -----------------------------------------------------------
+  // Render: stats
+  // -----------------------------------------------------------
+  const renderStats = (status, total) => {
+    const cards = [];
+
+    cards.push(`
+      <div class="stat">
+        <div class="stat__label mono">Total Users</div>
+        <div class="stat__value">${total ?? "—"}</div>
+        <div class="stat__sub mono">Registered accounts</div>
+      </div>
+    `);
+
+    if (status) {
+      const cap = status.total_servers * status.max_per_server;
+      const pct = cap > 0 ? Math.round((total / cap) * 100) : 0;
+      cards.push(`
+        <div class="stat">
+          <div class="stat__label mono">Servers</div>
+          <div class="stat__value">${status.total_servers}</div>
+          <div class="stat__sub mono">Max ${status.max_per_server} ea.</div>
+        </div>
+        <div class="stat">
+          <div class="stat__label mono">Reservations</div>
+          <div class="stat__value">${status.total_reservations}</div>
+          <div class="stat__sub mono">Pending registrations</div>
+        </div>
+        <div class="stat">
+          <div class="stat__label mono">Capacity</div>
+          <div class="stat__value">${pct}<span style="font-size:.5em">%</span></div>
+          <div class="stat__sub mono">${total} / ${cap}</div>
+        </div>
+      `);
+    } else {
+      cards.push(`
+        <div class="stat stat--placeholder">
+          <div class="stat__label mono">Servers</div>
+          <div class="stat__value">—</div>
+          <div class="stat__sub mono">Awaiting API key</div>
+        </div>
+        <div class="stat stat--placeholder">
+          <div class="stat__label mono">Reservations</div>
+          <div class="stat__value">—</div>
+          <div class="stat__sub mono">Awaiting API key</div>
+        </div>
+        <div class="stat stat--placeholder">
+          <div class="stat__label mono">Capacity</div>
+          <div class="stat__value">—</div>
+          <div class="stat__sub mono">Awaiting API key</div>
+        </div>
+      `);
+    }
+
+    statsGrid.innerHTML = cards.join("");
+    pulse(statsGrid);
+  };
+
+  // -----------------------------------------------------------
+  // Render: servers
+  // -----------------------------------------------------------
+  const renderServers = (servers) => {
+    if (!servers || !servers.length) {
+      serversC.innerHTML = `<div class="placeholder mono">No server data available.</div>`;
+      return;
+    }
+
+    const rows = servers.map((s) => {
+      const pct = s.max > 0 ? (s.effective / s.max) * 100 : 0;
+      const state = pct >= 100 ? "full" : pct >= 75 ? "warn" : "ok";
+      const statusBadge = s.available
+        ? `<span class="badge">Open</span>`
+        : `<span class="badge badge--solid">Full</span>`;
+
+      return `
+        <tr>
+          <td data-label="No." class="idx">№ ${escapeHtml(String(s.server_num).padStart(2, "0"))}</td>
+          <td data-label="Users"><span class="capacity-text">${s.users}</span></td>
+          <td data-label="Reserved"><span class="capacity-text">${s.reserved}</span></td>
+          <td data-label="Capacity">
+            <span class="capacity-text">${s.effective} / ${s.max}</span>
+            <div class="bar"><div class="bar__fill" data-state="${state}" style="width:${Math.min(pct, 100)}%"></div></div>
+          </td>
+          <td data-label="Status">${statusBadge}</td>
+          <td data-label="URL"><span class="url" title="${escapeHtml(s.url || "")}">${escapeHtml(s.url || "—")}</span></td>
+        </tr>
+      `;
+    }).join("");
+
+    serversC.innerHTML = `
+      <div class="table-wrap">
+        <table class="dataset">
+          <thead>
+            <tr>
+              <th>№</th>
+              <th>Users</th>
+              <th>Reserved</th>
+              <th>Capacity</th>
+              <th>Status</th>
+              <th>Endpoint</th>
+            </tr>
+          </thead>
+          <tbody>${rows}</tbody>
+        </table>
+      </div>
+    `;
+    pulse(serversC);
+  };
+
+  // -----------------------------------------------------------
+  // Render: users
+  // -----------------------------------------------------------
+  const renderUsers = (users) => {
+    userCount.textContent = `${users.length} record${users.length === 1 ? "" : "s"}`;
+
+    if (!users.length) {
+      usersC.innerHTML = `<div class="placeholder mono">No users match the current filter.</div>`;
+      return;
+    }
+
+    const rows = users.map((u, i) => {
+      const tokens = u.tokens_count || 0;
+      const tokensBadge = tokens > 0
+        ? `<span class="badge badge--solid">${tokens} token${tokens > 1 ? "s" : ""}</span>`
+        : `<span class="badge badge--empty">none</span>`;
+
+      return `
+        <tr>
+          <td data-label="#" class="idx">${String(i + 1).padStart(3, "0")}</td>
+          <td data-label="Username"><span class="headline">${escapeHtml(u.username || "—")}</span></td>
+          <td data-label="Telegram ID"><span class="meta">${escapeHtml(u.telegram_id || "—")}</span></td>
+          <td data-label="Server"><span class="badge">Server ${escapeHtml(String(u.server_num ?? "?"))}</span></td>
+          <td data-label="Tokens">${tokensBadge}</td>
+          <td data-label="Created"><span class="meta">${escapeHtml(fmtDate(u.created_at))}</span></td>
+          <td data-label="Last login"><span class="meta">${escapeHtml(fmtDate(u.last_login))}</span></td>
+        </tr>
+      `;
+    }).join("");
+
+    usersC.innerHTML = `
+      <div class="table-wrap">
+        <table class="dataset">
+          <thead>
+            <tr>
+              <th>#</th>
+              <th>Username</th>
+              <th>Telegram ID</th>
+              <th>Server</th>
+              <th>Tokens</th>
+              <th>Created</th>
+              <th>Last login</th>
+            </tr>
+          </thead>
+          <tbody>${rows}</tbody>
+        </table>
+      </div>
+    `;
+    pulse(usersC);
+  };
+
+  // -----------------------------------------------------------
+  // Filter
+  // -----------------------------------------------------------
+  window.filterUsers = () => {
+    const q = ($("userSearch").value || "").trim().toLowerCase();
+    if (!q) return renderUsers(allUsers);
+    const filtered = allUsers.filter((u) =>
+      (u.username || "").toLowerCase().includes(q) ||
+      (u.telegram_id || "").toLowerCase().includes(q) ||
+      String(u.server_num || "").includes(q)
+    );
+    renderUsers(filtered);
+  };
+
+  // -----------------------------------------------------------
+  // Form events
+  // -----------------------------------------------------------
+  $("authForm").addEventListener("submit", (e) => {
+    e.preventDefault();
+    const admin_secret = $("adminSecret").value.trim();
+    const api_key      = $("apiKey").value.trim();
+    if (!admin_secret && !api_key) {
+      renderErrors({ auth: "Provide at least an Admin Secret or API Key." });
+      return;
+    }
+    setConn("warn", "AUTHENTICATING…");
+    socket.emit("authenticate", { admin_secret, api_key });
+  });
+
+  $("refreshBtn").addEventListener("click", () => {
+    setConn("warn", "REFRESHING…");
+    socket.emit("refresh");
+  });
+
+  // -----------------------------------------------------------
+  // Socket.IO lifecycle
+  // -----------------------------------------------------------
+  socket.on("connect", () => {
+    setConn("on", "LIVE");
+  });
+
+  socket.on("connected", (data) => {
+    if (data && data.poll_interval) {
+      const el = $("pollInterval");
+      if (el) el.textContent = data.poll_interval;
+    }
+  });
+
+  socket.on("disconnect", () => {
+    setConn("off", "DISCONNECTED");
+  });
+
+  socket.on("connect_error", () => {
+    setConn("off", "CONNECTION ERROR");
+  });
+
+  socket.on("error", (data) => {
+    renderErrors({ socket: (data && data.message) || "Unknown error" });
+  });
+
+  // -----------------------------------------------------------
+  // Main payload handler
+  // -----------------------------------------------------------
+  socket.on("data_update", (payload) => {
+    if (!payload) return;
+
+    if (payload.errors) renderErrors(payload.errors);
+
+    allUsers   = payload.users || [];
+    lastTotal  = payload.total ?? allUsers.length;
+    lastStatus = payload.status || null;
+
+    renderStats(lastStatus, lastTotal);
+    renderServers(lastStatus ? lastStatus.servers : null);
+    renderUsers(allUsers);
+
+    lastSync.textContent = fmtTime(payload.timestamp);
+    setConn("on", payload.source === "auto" ? "LIVE · AUTO" : "LIVE");
+  });
+})();

templates/index.html

@@ -0,0 +1,165 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>ServerClass — Admin</title>
+
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+<link href="https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,700;0,900;1,400;1,700&family=Source+Serif+4:ital,wght@0,400;0,600;1,400&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
+
+<link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
+</head>
+<body>
+
+<a href="#main" class="skip-link">Skip to content</a>
+
+<!-- Top bar -->
+<header class="topbar">
+  <div class="topbar__inner">
+    <div class="topbar__brand">
+      <span class="topbar__mark"></span>
+      <span class="topbar__name">ServerClass <em>—</em> Admin</span>
+    </div>
+    <div class="topbar__meta">
+      <span class="status-dot" id="connDot" data-state="off"></span>
+      <span class="mono" id="connLabel">DISCONNECTED</span>
+      <span class="topbar__sep">/</span>
+      <span class="mono" id="lastSync">— : — : —</span>
+    </div>
+  </div>
+</header>
+
+<!-- Hero -->
+<section class="hero">
+  <div class="hero__inner">
+    <div class="hero__eyebrow mono">VOL. 01 — LIVE DASHBOARD</div>
+    <h1 class="hero__title">
+      Server<br>
+      <span class="italic">Class.</span>
+    </h1>
+    <div class="hero__rule">
+      <span class="hero__rule-line"></span>
+      <span class="hero__rule-square"></span>
+      <span class="hero__rule-line"></span>
+    </div>
+    <p class="hero__lede">
+      A real-time observatory for distributed authentication.
+      Twelve servers, finite capacity, infinite attention to detail.
+    </p>
+  </div>
+</section>
+
+<div class="divider divider--thick"></div>
+
+<!-- Authentication -->
+<main id="main">
+<section class="section section--auth">
+  <div class="section__inner">
+    <div class="section__head">
+      <span class="section__num mono">§ 01</span>
+      <h2 class="section__title">Credentials</h2>
+    </div>
+
+    <form id="authForm" class="auth" autocomplete="off">
+      <label class="field">
+        <span class="field__label mono">Admin Secret</span>
+        <input type="password" id="adminSecret" class="field__input" placeholder="X-Admin-Secret" spellcheck="false">
+      </label>
+
+      <label class="field">
+        <span class="field__label mono">API Key</span>
+        <input type="password" id="apiKey" class="field__input" placeholder="X-API-Key" spellcheck="false">
+      </label>
+
+      <div class="auth__actions">
+        <button type="submit" class="btn btn--primary">
+          Authenticate <span class="btn__arrow">→</span>
+        </button>
+        <button type="button" id="refreshBtn" class="btn btn--ghost">
+          Refresh now
+        </button>
+      </div>
+    </form>
+
+    <div id="errorBox" class="errors" aria-live="polite"></div>
+  </div>
+</section>
+</main>
+
+<div class="divider divider--thick"></div>
+
+<!-- Stats (inverted section) -->
+<section class="section section--stats" aria-label="Statistics">
+  <div class="section__inner">
+    <div class="section__head section__head--invert">
+      <span class="section__num mono">§ 02</span>
+      <h2 class="section__title">Figures</h2>
+    </div>
+
+    <div class="stats" id="statsGrid">
+      <div class="stat stat--placeholder">
+        <div class="stat__label mono">Awaiting</div>
+        <div class="stat__value">—</div>
+        <div class="stat__sub mono">Authenticate to populate</div>
+      </div>
+    </div>
+  </div>
+</section>
+
+<div class="divider divider--thick"></div>
+
+<!-- Servers -->
+<section class="section">
+  <div class="section__inner">
+    <div class="section__head">
+      <span class="section__num mono">§ 03</span>
+      <h2 class="section__title">Servers <span class="italic">— Status</span></h2>
+    </div>
+    <div id="serversContent" class="placeholder mono">
+      Enter credentials to load server topology.
+    </div>
+  </div>
+</section>
+
+<div class="divider divider--thick"></div>
+
+<!-- Users -->
+<section class="section">
+  <div class="section__inner">
+    <div class="section__head">
+      <span class="section__num mono">§ 04</span>
+      <h2 class="section__title">Users <span class="italic">— Index</span></h2>
+    </div>
+
+    <div class="search">
+      <input type="text" id="userSearch" class="search__input"
+             placeholder="Filter by username, telegram ID, or server number…"
+             oninput="filterUsers()">
+      <span class="search__hint mono" id="userCount">— records</span>
+    </div>
+
+    <div id="usersContent" class="placeholder mono">
+      Enter credentials to load user registry.
+    </div>
+  </div>
+</section>
+
+<div class="divider divider--ultra"></div>
+
+<footer class="footer">
+  <div class="footer__inner">
+    <div class="mono footer__line">ServerClass / Admin Console</div>
+    <div class="mono footer__line">Auto-refresh every <span id="pollInterval">{{ poll_interval }}</span>s · Socket.IO</div>
+    <div class="mono footer__line">MMXXV</div>
+  </div>
+</footer>
+
+<script src="https://cdn.socket.io/4.7.5/socket.io.min.js"></script>
+<script>
+  window.__POLL_INTERVAL__ = {{ poll_interval }};
+</script>
+<script src="{{ url_for('static', filename='js/dashboard.js') }}"></script>
+</body>
+</html>