feat(admin): add IP-bound API key manager + gpt-image-2 endpoint

- Add 3 admin endpoints (GET/POST/DELETE /admin/keys) for IP-bound key management
- Add /v1/images/generations OpenAI-compatible endpoint routing to ChatGPT Image API (http://89.47.113.13:3999)
- Rewrite dashboard.html with landing design system (Tailwind + glass-morphism + amber accent)
- Add gpt-image-1 and gpt-image-2 to model registry
- Client-side auth gate using sessionStorage for master key

Design reference: thoughts/shared/designs/2026-05-24-admin-ip-key-manager-design.md

app/config.py

@@ -43,6 +43,9 @@ LYUX_KEY = _decrypt("enc:v1:3H8QYE-ACN_QYJJQ:C7RBtCTfnDDs6-4B44U3IVsCLpLjo8ZsObA
 QWEN_LOCAL_URL = _decrypt("enc:v1:xLLUx4V8amqNS-Nv:Jzbs3Uhu4lAkRcEp4sB4X7rBnwcO1sp8wGEbVRhFECoxJ9HBQdxZ1mBx5sICnxM7Pric4r3xUelqs82k")
 QWEN_LOCAL_KEY = _decrypt("enc:v1:I5MWk2kg-lfUAMJZ:L74MW5GaciwIIsV0gWDbfc0vZyBm55xNVnDutl8=")
 
+# ── ChatGPT Image Generation API ─────────────────────────────────────────────
+CHATGPT_IMAGE_API_URL = "http://89.47.113.13:3999"
+
 UPSTREAMS = {
     # ── Existing aliases ──
     "claude-opus-4.6": [

app/index.py

@@ -24,7 +24,10 @@ from config import (
     MASTER_KEY,
     AI_GATEWAY_URL, UPSTREAM_14448_URL,
     BLOCKED_IPS,
+    CHATGPT_IMAGE_API_URL,
 )
+from pydantic import BaseModel
+import ipaddress
 from templates import templates
 
 # Free VPN detection: proxycheck.io (1000 req/day, no key needed)
@@ -383,8 +386,8 @@ async def _fetch_upstream_models():
             _upstream_models[url] = []
     await client.aclose()
 
-    # Build available models from UPSTREAMS keys
-    _available_models = list(UPSTREAMS.keys())
+    # Build available models from UPSTREAMS keys + image models
+    _available_models = list(UPSTREAMS.keys()) + ["gpt-image-1", "gpt-image-2"]
     logger.info("Available models: %s", _available_models)
 
 
@@ -824,14 +827,8 @@ async def list_models():
 
 
 @app.get("/v1/dashboard")
-async def dashboard_usage(request: Request, password: str = None):
-    """Usage dashboard with charts and API keys."""
-    # Check password
-    if password != MASTER_KEY:
-        raise HTTPException(
-            status_code=401,
-            detail={"error": {"message": "Unauthorized", "type": "auth_error", "code": "invalid_password"}}
-        )
+async def dashboard_usage(request: Request):
+    """Usage dashboard with charts and API keys. Auth handled client-side via /admin/keys."""
 
     # Load chat logs from HF Dataset
     chat_logs = []
@@ -946,6 +943,160 @@ async def upstream_models():
     }
 
 
+# ── Admin Endpoints ───────────────────────────────────────────────────────────
+
+class AdminKeyRequest(BaseModel):
+    ip: str
+    label: str = ""
+
+@app.get("/admin/keys")
+async def admin_list_keys(request: Request):
+    """List all admin-generated API keys. Requires MASTER_KEY auth."""
+    auth = request.headers.get("authorization", "")
+    if not auth.startswith("Bearer ") or auth.replace("Bearer ", "") != MASTER_KEY:
+        raise HTTPException(status_code=401, detail={"error": {"message": "Invalid master key"}})
+    
+    keys = load_keys_from_gist()
+    admin_keys = []
+    for key, data in keys.items():
+        if data.get("admin_created"):
+            admin_keys.append({
+                "key": key,
+                "ip": data.get("ip", ""),
+                "label": data.get("label", ""),
+                "created_at": data.get("created_at", ""),
+                "status": data.get("status", "active"),
+            })
+    return {"keys": admin_keys}
+
+@app.post("/admin/keys")
+async def admin_create_key(request: Request, body: AdminKeyRequest):
+    """Create a new IP-bound API key. Requires MASTER_KEY auth."""
+    auth = request.headers.get("authorization", "")
+    if not auth.startswith("Bearer ") or auth.replace("Bearer ", "") != MASTER_KEY:
+        raise HTTPException(status_code=401, detail={"error": {"message": "Invalid master key"}})
+    
+    # Validate IP
+    try:
+        ip_obj = ipaddress.ip_address(body.ip)
+        if "/" in body.ip:
+            raise HTTPException(status_code=400, detail={"error": {"message": "CIDR notation not allowed"}})
+    except ValueError:
+        raise HTTPException(status_code=400, detail={"error": {"message": "Invalid IP address format"}})
+    
+    # Check duplicate
+    keys = load_keys_from_gist()
+    for k, data in keys.items():
+        if data.get("ip") == body.ip and data.get("admin_created"):
+            raise HTTPException(status_code=409, detail={"error": {"message": f"IP {body.ip} already has key {k}"}})
+    
+    # Generate new key
+    new_key = generate_api_key()
+    keys[new_key] = {
+        "ip": body.ip,
+        "label": body.label,
+        "created_at": int(time.time()),
+        "status": "active",
+        "admin_created": True,
+    }
+    save_keys_to_gist(keys)
+    
+    return {
+        "key": new_key,
+        "ip": body.ip,
+        "label": body.label,
+        "created_at": keys[new_key]["created_at"],
+    }
+
+@app.delete("/admin/keys/{key_id}")
+async def admin_revoke_key(request: Request, key_id: str):
+    """Revoke an admin-created API key. Requires MASTER_KEY auth."""
+    auth = request.headers.get("authorization", "")
+    if not auth.startswith("Bearer ") or auth.replace("Bearer ", "") != MASTER_KEY:
+        raise HTTPException(status_code=401, detail={"error": {"message": "Invalid master key"}})
+    
+    keys = load_keys_from_gist()
+    if key_id not in keys:
+        raise HTTPException(status_code=404, detail={"error": {"message": "Key not found"}})
+    if not keys[key_id].get("admin_created"):
+        raise HTTPException(status_code=403, detail={"error": {"message": "Cannot revoke non-admin keys"}})
+    
+    del keys[key_id]
+    save_keys_to_gist(keys)
+    return {"success": True}
+
+# ── Image Generation Endpoint ─────────────────────────────────────────────────
+
+@app.post("/v1/images/generations")
+async def generate_images(request: Request, credentials: HTTPAuthorizationCredentials = Depends(security)):
+    """OpenAI-compatible image generation endpoint. Routes to gpt-image-2 backend."""
+    api_key = credentials.credentials
+    client_ip = get_client_ip(request)
+    
+    # Auth check
+    valid, msg = verify_key_ip(api_key, client_ip)
+    if not valid:
+        raise HTTPException(status_code=401, detail={"error": {"message": msg}})
+    
+    rl_ok, rl_detail = check_rate_limit(api_key)
+    if not rl_ok:
+        cooldown = RPM_WINDOW - (time.time() - _rate_limits[api_key][0])
+        raise HTTPException(
+            status_code=429,
+            detail={
+                "error": {"message": rl_detail, "type": "rate_limit_error", "code": "rate_limit_exceeded"},
+                "content": f"Rate limited, wait {int(cooldown)}s",
+            }
+        )
+    
+    body = await request.json()
+    model = body.get("model", "gpt-image-1")
+    prompt = body.get("prompt")
+    n = body.get("n", 1)
+    size = body.get("size", "1024x1024")
+    response_format = body.get("response_format", "url")
+    
+    if not prompt:
+        raise HTTPException(status_code=400, detail={"error": {"message": "prompt is required"}})
+    
+    # Only support gpt-image-2 for now
+    if model not in ["gpt-image-1", "gpt-image-2"]:
+        raise HTTPException(status_code=400, detail={"error": {"message": f"Model {model} not supported"}})
+    
+    logger.info("Image generation request: model=%s prompt=%s n=%d size=%s", model, prompt[:50], n, size)
+    
+    # Forward to ChatGPT Image API
+    try:
+        async with httpx.AsyncClient(timeout=60.0) as client:
+            resp = await client.post(
+                f"{CHATGPT_IMAGE_API_URL}/api/generate",
+                json={"prompt": prompt, "n": n, "size": size},
+                headers={"Content-Type": "application/json"},
+            )
+            resp.raise_for_status()
+            upstream_data = resp.json()
+    except Exception as e:
+        logger.error("Image API error: %s", str(e))
+        raise HTTPException(status_code=502, detail={"error": {"message": f"Upstream image API error: {str(e)}"}})
+    
+    # Transform to OpenAI format
+    images = []
+    if "images" in upstream_data:
+        for img in upstream_data["images"][:n]:
+            if response_format == "url":
+                images.append({"url": img.get("url", ""), "revised_prompt": img.get("revised_prompt", prompt)})
+            else:
+                images.append({"b64_json": img.get("b64_json", ""), "revised_prompt": img.get("revised_prompt", prompt)})
+    elif "url" in upstream_data:
+        images.append({"url": upstream_data["url"], "revised_prompt": upstream_data.get("revised_prompt", prompt)})
+    
+    return {
+        "created": int(time.time()),
+        "data": images,
+    }
+
+# ── Public Endpoints ──────────────────────────────────────────────────────────
+
 @app.get("/v1/keys/me")
 async def get_my_key(request: Request, cf_token: str = None):
     """Return caller's IP and auto-generate a key if they don't have one."""

app/templates/dashboard.html

@@ -1,225 +1,501 @@
-    <!DOCTYPE html>
-    <html>
-    <head>
-      <title>🐝 APIarium Dashboard</title>
-      <meta name="viewport" content="width=device-width, initial-scale=1.0">
-      <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&family=JetBrains+Mono:wght@400;500;600;700&display=swap" rel="stylesheet">
-      <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
-      <style>
-        :root {
-          --bg-primary: #0a0a0f;
-          --bg-secondary: #111827;
-          --bg-tertiary: #1f2937;
-          --border: #374151;
-          --text-primary: #f9fafb;
-          --text-secondary: #9ca3af;
-          --text-muted: #6b7280;
-          --accent-green: #fff;
-          --accent-blue: #ccc;
-          --accent-purple: #999;
-          --glass-bg: rgba(17, 24, 39, 0.8);
-          --glass-border: rgba(255, 255, 255, 0.1);
+<!DOCTYPE html>
+<html lang="en" class="antialiased">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>APIarium | Admin Dashboard</title>
+    <meta name="description" content="APIarium admin dashboard — manage IP-bound API keys">
+
+    <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=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap" rel="stylesheet">
+
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
+    <script>
+        tailwind.config = {
+            theme: {
+                extend: {
+                    fontFamily: {
+                        sans: ['Inter', 'sans-serif'],
+                        mono: ['JetBrains Mono', 'monospace'],
+                    },
+                    colors: {
+                        primary: { 50: '#fffbeb', 500: '#f59e0b', 600: '#d97706', 700: '#b45309' },
+                        dark: { 900: '#0a0a0f', 800: '#111118', 700: '#1a1a24' },
+                    }
+                }
+            }
         }
-        * { margin: 0; padding: 0; box-sizing: border-box; }
+    </script>
+    <style>
         body {
-          background: var(--bg-primary);
-          color: var(--text-primary);
-          font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
-          min-height: 100vh;
-          padding: 40px 24px;
-        }
-        .bg-gradient {
-          display: none;
-        }
-        .container { max-width: 1200px; margin: 0 auto; position: relative; z-index: 1; }
-        .header {
-          display: flex; align-items: center; justify-content: space-between;
-          margin-bottom: 40px; animation: fadeInUp 0.6s ease-out;
-        }
-        @keyframes fadeInUp {
-          from { opacity: 0; transform: translateY(20px); }
-          to { opacity: 1; transform: translateY(0); }
-        }
-        .header h1 {
-          font-size: 2rem; font-weight: 800;
-          background: linear-gradient(135deg, #fff, #ccc);
-          -webkit-background-clip: text; -webkit-text-fill-color: transparent;
-          display: flex; align-items: center; gap: 12px;
-        }
-        .header h1 span { font-size: 2.5rem; }
-        .back-btn {
-          padding: 10px 20px; background: var(--glass-bg); border: 1px solid var(--glass-border);
-          border-radius: 10px; color: var(--text-primary); text-decoration: none;
-          font-size: 0.9rem; font-weight: 500; transition: all 0.2s;
-        }
-        .back-btn:hover { border-color: #fff; transform: translateY(-2px); }
-        /* Stats */
-        .stats-grid {
-          display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px;
-          margin-bottom: 32px; animation: fadeInUp 0.6s ease-out 0.1s backwards;
-        }
-        .stat-card {
-          background: var(--glass-bg); border: 1px solid var(--glass-border);
-          border-radius: 16px; padding: 24px; text-align: center;
-          backdrop-filter: blur(20px); transition: all 0.3s ease;
-        }
-        .stat-card:hover { border-color: #fff; transform: translateY(-4px); }
-        .stat-val {
-          font-size: 2.5rem; font-weight: 900;
-          background: linear-gradient(135deg, #fff, #ccc);
-          -webkit-background-clip: text; -webkit-text-fill-color: transparent;
-          line-height: 1; margin-bottom: 8px;
+            background: #0a0a0f;
+            background-image:
+                radial-gradient(at 20% 10%, rgba(245, 158, 11, 0.08) 0px, transparent 50%),
+                radial-gradient(at 80% 80%, rgba(59, 130, 246, 0.06) 0px, transparent 50%);
+            min-height: 100vh;
         }
-        .stat-label { font-size: 0.8rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 1px; }
-        /* Charts */
-        .chart-grid {
-          display: grid; grid-template-columns: 1fr 1fr; gap: 24px;
-          margin-bottom: 32px; animation: fadeInUp 0.6s ease-out 0.2s backwards;
+        .glass {
+            background: rgba(255, 255, 255, 0.04);
+            backdrop-filter: blur(24px);
+            -webkit-backdrop-filter: blur(24px);
+            border: 1px solid rgba(255, 255, 255, 0.08);
         }
-        .glass-card {
-          background: var(--glass-bg); border: 1px solid var(--glass-border);
-          border-radius: 20px; padding: 28px; backdrop-filter: blur(20px);
-          transition: all 0.3s ease;
+        .glass-hover:hover {
+            background: rgba(255, 255, 255, 0.06);
+            border-color: rgba(245, 158, 11, 0.3);
         }
-        .glass-card:hover { border-color: rgba(255, 255, 255, 0.2); }
-        .card-header {
-          display: flex; align-items: center; gap: 12px; margin-bottom: 20px;
+        .toast {
+            position: fixed; bottom: 24px; right: 24px;
+            padding: 12px 20px; border-radius: 8px;
+            font-family: 'JetBrains Mono', monospace; font-size: 13px;
+            z-index: 9999; animation: slideIn 0.3s ease-out;
         }
-        .card-icon {
-          width: 36px; height: 36px; display: flex; align-items: center; justify-content: center;
-          background: linear-gradient(135deg, #fff, #ccc);
-          border-radius: 10px; font-size: 1.1rem;
-        }
-        .card-title { font-size: 1.1rem; font-weight: 700; }
-        .chart-container { position: relative; height: 280px; }
-        /* Table */
-        .table-card {
-          animation: fadeInUp 0.6s ease-out 0.3s backwards;
-        }
-        .table-wrapper { overflow-x: auto; max-height: 500px; overflow-y: auto; }
-        table { width: 100%; border-collapse: collapse; }
-        th, td { padding: 14px 18px; text-align: left; border-bottom: 1px solid rgba(255, 255, 255, 0.05); }
-        th {
-          color: var(--text-muted); font-size: 0.75rem; font-weight: 600;
-          text-transform: uppercase; letter-spacing: 1px;
-          background: var(--bg-primary); position: sticky; top: 0; z-index: 1;
-        }
-        tr { transition: background 0.2s; }
-        tr:hover { background: rgba(255, 255, 255, 0.03); }
-        @media (max-width: 768px) {
-          .stats-grid { grid-template-columns: repeat(2, 1fr); }
-          .chart-grid { grid-template-columns: 1fr; }
-          .header { flex-direction: column; gap: 16px; }
-        }
-      </style>
-    </head>
-    <body>
-      <div class="bg-gradient"></div>
-      <div class="container">
-        <div class="header">
-          <h1>🐝 APIarium Dashboard</h1>
-          <a href="/" class="back-btn">← Home</a>
+        @keyframes slideIn { from { transform: translateX(100%); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
+        .toast-success { background: rgba(245, 158, 11, 0.15); border: 1px solid rgba(245, 158, 11, 0.4); color: #fbbf24; }
+        .toast-error { background: rgba(239, 68, 68, 0.15); border: 1px solid rgba(239, 68, 68, 0.4); color: #f87171; }
+    </style>
+</head>
+<body class="font-sans text-slate-100">
+
+<!-- Auth Gate -->
+<div id="auth-gate" class="hidden min-h-screen flex items-center justify-center px-6">
+    <div class="glass rounded-2xl p-8 max-w-md w-full">
+        <div class="flex items-center gap-3 mb-6">
+            <div class="w-10 h-10 rounded-lg bg-gradient-to-br from-amber-400 to-amber-600 flex items-center justify-center text-xl">🐝</div>
+            <div>
+                <h1 class="text-xl font-bold">APIarium Admin</h1>
+                <p class="text-xs text-slate-400 font-mono">v0.4.0</p>
+            </div>
         </div>
-        <div class="stats-grid">
-          <div class="stat-card">
-            <div class="stat-val">TOTAL_REQUESTS</div>
-            <div class="stat-label">Total Requests</div>
-          </div>
-          <div class="stat-card">
-            <div class="stat-val">TOTAL_IPS</div>
-            <div class="stat-label">Unique IPs</div>
-          </div>
-          <div class="stat-card">
-            <div class="stat-val">TOTAL_MODELS</div>
-            <div class="stat-label">Models Used</div>
-          </div>
-          <div class="stat-card">
-            <div class="stat-val">TOTAL_KEYS</div>
-            <div class="stat-label">API Keys</div>
-          </div>
-          <div class="stat-card" style="border-color:rgba(251,191,36,0.3);">
-            <div class="stat-val" style="background:linear-gradient(135deg,#fbbf24,#f59e0b);-webkit-background-clip:text;-webkit-text-fill-color:transparent;">GOD_IPS</div>
-            <div class="stat-label">👑 God Access IPs</div>
-          </div>
+        <label class="block text-sm text-slate-300 mb-2">Master Key</label>
+        <input id="master-key-input" type="password" placeholder="Enter master key..."
+            class="w-full bg-white/5 border border-white/10 rounded-lg px-4 py-3 text-slate-100 font-mono text-sm focus:outline-none focus:border-amber-500/50 mb-4">
+        <button id="auth-btn" class="w-full bg-gradient-to-r from-amber-500 to-amber-600 hover:from-amber-400 hover:to-amber-500 text-black font-semibold py-3 rounded-lg transition-all">
+            Unlock Dashboard
+        </button>
+        <p id="auth-error" class="text-red-400 text-xs mt-3 hidden"></p>
+    </div>
+</div>
+
+<!-- Dashboard -->
+<div id="dashboard" class="hidden">
+
+    <!-- Navbar -->
+    <header class="sticky top-0 z-40 glass border-b border-white/5">
+        <div class="max-w-7xl mx-auto px-6 py-4 flex items-center justify-between">
+            <div class="flex items-center gap-3">
+                <div class="w-9 h-9 rounded-lg bg-gradient-to-br from-amber-400 to-amber-600 flex items-center justify-center text-lg">🐝</div>
+                <div>
+                    <h1 class="font-bold text-lg">APIarium</h1>
+                    <p class="text-xs text-slate-400 font-mono">admin console</p>
+                </div>
+            </div>
+            <nav class="hidden md:flex items-center gap-6 text-sm">
+                <a href="#stats" class="text-amber-400 font-medium">Dashboard</a>
+                <a href="#generator" class="text-slate-400 hover:text-slate-200 transition">Keys</a>
+                <a href="#charts" class="text-slate-400 hover:text-slate-200 transition">Analytics</a>
+                <button id="logout-btn" class="text-slate-500 hover:text-red-400 transition text-xs font-mono">logout</button>
+            </nav>
+        </div>
+    </header>
+
+    <main class="max-w-7xl mx-auto px-6 py-12 space-y-12">
+
+        <!-- Page Header -->
+        <div>
+            <p class="text-xs font-mono text-amber-500 mb-2 tracking-wider">ADMIN / API-KEY-MANAGER</p>
+            <h2 class="text-4xl font-bold tracking-tight">Dashboard</h2>
+            <p class="text-slate-400 mt-2">Manage IP-bound API keys and monitor gateway activity.</p>
         </div>
-        <div class="chart-grid">
-          <div class="glass-card">
-            <div class="card-header">
-              <div class="card-icon">🥧</div>
-              <div class="card-title">Model Usage</div>
+
+        <!-- Stats Grid -->
+        <section id="stats" class="grid grid-cols-2 lg:grid-cols-4 gap-4">
+            <div class="glass glass-hover rounded-xl p-6 transition-all">
+                <div class="flex items-center justify-between mb-3">
+                    <svg class="w-5 h-5 text-amber-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 7a2 2 0 012 2m4 0a6 6 0 01-7.743 5.743L11 17H9v2H7v2H4a1 1 0 01-1-1v-2.586a1 1 0 01.293-.707l5.964-5.964A6 6 0 1121 9z"/></svg>
+                    <span class="text-xs font-mono text-slate-500">TOTAL</span>
+                </div>
+                <div class="text-3xl font-bold font-mono" id="stat-total">0</div>
+                <p class="text-xs text-slate-400 mt-1">API Keys</p>
             </div>
-            <div class="chart-container">
-              <canvas id="modelPieChart"></canvas>
+            <div class="glass glass-hover rounded-xl p-6 transition-all">
+                <div class="flex items-center justify-between mb-3">
+                    <svg class="w-5 h-5 text-green-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"/></svg>
+                    <span class="text-xs font-mono text-slate-500">ACTIVE</span>
+                </div>
+                <div class="text-3xl font-bold font-mono" id="stat-active">0</div>
+                <p class="text-xs text-slate-400 mt-1">Unique IPs</p>
             </div>
-          </div>
-          <div class="glass-card">
-            <div class="card-header">
-              <div class="card-icon">📊</div>
-              <div class="card-title">IP Usage</div>
+            <div class="glass glass-hover rounded-xl p-6 transition-all">
+                <div class="flex items-center justify-between mb-3">
+                    <svg class="w-5 h-5 text-blue-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"/></svg>
+                    <span class="text-xs font-mono text-slate-500">24H</span>
+                </div>
+                <div class="text-3xl font-bold font-mono" id="stat-requests">—</div>
+                <p class="text-xs text-slate-400 mt-1">Requests</p>
             </div>
-            <div class="chart-container">
-              <canvas id="ipBarChart"></canvas>
+            <div class="glass glass-hover rounded-xl p-6 transition-all">
+                <div class="flex items-center justify-between mb-3">
+                    <svg class="w-5 h-5 text-red-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"/></svg>
+                    <span class="text-xs font-mono text-slate-500">RATE</span>
+                </div>
+                <div class="text-3xl font-bold font-mono" id="stat-ratelimited">—</div>
+                <p class="text-xs text-slate-400 mt-1">Rate Limited</p>
             </div>
-          </div>
-        </div>
-        <div class="glass-card table-card">
-          <div class="card-header">
-            <div class="card-icon">📋</div>
-            <div class="card-title">IP Details</div>
-          </div>
-          <div class="table-wrapper">
-            <table>
-              <thead><tr><th>IP Address</th><th>API Keys</th><th>Total Requests</th><th>Model Breakdown</th></tr></thead>
-              <tbody>IP_ROWS</tbody>
-            </table>
-          </div>
+        </section>
+
+        <!-- Key Generator -->
+        <section id="generator" class="glass rounded-2xl p-8">
+            <div class="flex items-center justify-between mb-6">
+                <div>
+                    <h3 class="text-xl font-bold">Generate API Key</h3>
+                    <p class="text-sm text-slate-400 mt-1">Create an IP-bound key for a specific client.</p>
+                </div>
+                <span class="text-xs font-mono text-amber-500 bg-amber-500/10 px-3 py-1 rounded-full border border-amber-500/20">ADMIN ONLY</span>
+            </div>
+            <form id="key-form" class="grid md:grid-cols-12 gap-4">
+                <div class="md:col-span-5">
+                    <label class="block text-xs font-mono text-slate-400 mb-2 uppercase tracking-wider">IP Address *</label>
+                    <input id="ip-input" type="text" placeholder="192.168.1.100" required
+                        class="w-full bg-black/30 border border-white/10 rounded-lg px-4 py-3 font-mono text-sm focus:outline-none focus:border-amber-500/50 placeholder:text-slate-600">
+                    <p id="ip-error" class="text-red-400 text-xs mt-1 hidden"></p>
+                </div>
+                <div class="md:col-span-5">
+                    <label class="block text-xs font-mono text-slate-400 mb-2 uppercase tracking-wider">Label (optional)</label>
+                    <input id="label-input" type="text" placeholder="Customer name / project"
+                        class="w-full bg-black/30 border border-white/10 rounded-lg px-4 py-3 text-sm focus:outline-none focus:border-amber-500/50 placeholder:text-slate-600">
+                </div>
+                <div class="md:col-span-2 flex items-end">
+                    <button type="submit" id="gen-btn"
+                        class="w-full bg-gradient-to-r from-amber-500 to-amber-600 hover:from-amber-400 hover:to-amber-500 text-black font-semibold py-3 rounded-lg transition-all text-sm">
+                        Generate
+                    </button>
+                </div>
+            </form>
+
+            <!-- Result Card -->
+            <div id="result-card" class="hidden mt-6 bg-gradient-to-br from-amber-500/10 to-amber-600/5 border border-amber-500/30 rounded-xl p-6">
+                <p class="text-xs font-mono text-amber-400 mb-2 tracking-wider">NEW KEY GENERATED</p>
+                <div class="flex items-center justify-between gap-4 mb-3">
+                    <code id="result-key" class="text-2xl font-mono font-bold text-amber-300 break-all"></code>
+                    <button id="copy-key-btn" class="shrink-0 bg-white/10 hover:bg-white/20 border border-white/10 px-4 py-2 rounded-lg text-xs font-mono transition">
+                        COPY
+                    </button>
+                </div>
+                <div class="flex flex-wrap gap-4 text-xs font-mono text-slate-400">
+                    <span>IP: <span id="result-ip" class="text-slate-200"></span></span>
+                    <span>Label: <span id="result-label" class="text-slate-200">—</span></span>
+                </div>
+            </div>
+        </section>
+
+        <!-- Keys Table -->
+        <section class="glass rounded-2xl p-8">
+            <div class="flex flex-col md:flex-row md:items-center md:justify-between gap-4 mb-6">
+                <div>
+                    <h3 class="text-xl font-bold">API Keys</h3>
+                    <p class="text-sm text-slate-400 mt-1">All admin-created keys with IP binding.</p>
+                </div>
+                <input id="search-input" type="text" placeholder="Filter by IP or label..."
+                    class="bg-black/30 border border-white/10 rounded-lg px-4 py-2 text-sm focus:outline-none focus:border-amber-500/50 md:w-64 placeholder:text-slate-600">
+            </div>
+
+            <div class="overflow-x-auto">
+                <table class="w-full text-sm">
+                    <thead>
+                        <tr class="text-left text-xs font-mono text-slate-500 uppercase tracking-wider border-b border-white/5">
+                            <th class="pb-3 pr-4">Key</th>
+                            <th class="pb-3 pr-4">IP</th>
+                            <th class="pb-3 pr-4">Label</th>
+                            <th class="pb-3 pr-4">Created</th>
+                            <th class="pb-3 pr-4">Status</th>
+                            <th class="pb-3">Actions</th>
+                        </tr>
+                    </thead>
+                    <tbody id="keys-tbody" class="divide-y divide-white/5"></tbody>
+                </table>
+            </div>
+
+            <div id="empty-state" class="hidden text-center py-12">
+                <p class="text-slate-500 text-sm font-mono">No keys yet — generate your first one above</p>
+            </div>
+        </section>
+
+        <!-- Chart.js Analytics -->
+        <section id="charts" class="grid md:grid-cols-2 gap-6">
+            <div class="glass rounded-2xl p-6">
+                <h3 class="font-semibold mb-4">Request Volume (7 days)</h3>
+                <canvas id="chart-requests" height="200"></canvas>
+            </div>
+            <div class="glass rounded-2xl p-6">
+                <h3 class="font-semibold mb-4">Model Distribution</h3>
+                <canvas id="chart-models" height="200"></canvas>
+            </div>
+        </section>
+
+    </main>
+
+    <!-- Footer -->
+    <footer class="border-t border-white/5 mt-20">
+        <div class="max-w-7xl mx-auto px-6 py-8 flex flex-col md:flex-row items-center justify-between gap-4 text-xs text-slate-500 font-mono">
+            <p>© 2026 APIarium · Enterprise AI Gateway</p>
+            <p id="sync-status">Last sync: <span id="last-sync">—</span></p>
         </div>
-      </div>
-      <script>
-        const colors = ['#fff', '#ccc', '#999', '#aaa', '#888', '#ffd93d', '#38bdf8', '#a3e635', '#f472b6', '#67e8f9'];
-        new Chart(document.getElementById('modelPieChart'), {
-          type: 'doughnut',
-          data: {
-            labels: MODEL_LABELS,
-            datasets: [{
-              data: MODEL_TOTALS,
-              backgroundColor: colors.slice(0, MODEL_LABELS.length),
-              borderWidth: 0,
-              hoverBorderWidth: 4,
-              hoverBorderColor: '#0a0a0f',
-            }]
-          },
-          options: {
-            responsive: true,
-            maintainAspectRatio: false,
-            cutout: '65%',
-            plugins: {
-              legend: { position: 'bottom', labels: { color: '#9ca3af', padding: 16, font: { size: 11, family: 'Inter' } } }
+    </footer>
+</div>
+
+<script>
+(function() {
+    const $ = (id) => document.getElementById(id);
+    const authGate = $('auth-gate');
+    const dashboard = $('dashboard');
+    const masterKeyInput = $('master-key-input');
+    const authBtn = $('auth-btn');
+    const authError = $('auth-error');
+
+    let masterKey = sessionStorage.getItem('apiarium_master_key') || '';
+    let keysData = [];
+    let chartRequests = null;
+    let chartModels = null;
+
+    // ── Auth ─────────────────────────────────────────────────────
+    function initAuth() {
+        if (masterKey) {
+            showDashboard();
+            loadKeys();
+        } else {
+            showAuth();
+        }
+    }
+    function showAuth() { authGate.classList.remove('hidden'); dashboard.classList.add('hidden'); }
+    function showDashboard() { authGate.classList.add('hidden'); dashboard.classList.remove('hidden'); }
+
+    authBtn.addEventListener('click', async () => {
+        const val = masterKeyInput.value.trim();
+        if (!val) return;
+        try {
+            const r = await fetch('/admin/keys', { headers: { 'Authorization': 'Bearer ' + val } });
+            if (r.ok) {
+                masterKey = val;
+                sessionStorage.setItem('apiarium_master_key', val);
+                authError.classList.add('hidden');
+                showDashboard();
+                loadKeys();
+            } else {
+                authError.textContent = 'Invalid master key';
+                authError.classList.remove('hidden');
             }
-          }
-        });
-        new Chart(document.getElementById('ipBarChart'), {
-          type: 'bar',
-          data: {
-            labels: IP_LABELS,
-            datasets: [{
-              label: 'Requests',
-              data: IP_TOTALS,
-              backgroundColor: colors.slice(0, IP_LABELS.length),
-              borderRadius: 8,
-              borderSkipped: false,
-            }]
-          },
-          options: {
-            responsive: true,
-            maintainAspectRatio: false,
-            plugins: { legend: { display: false } },
-            scales: {
-              y: { beginAtZero: true, grid: { color: 'rgba(255,255,255,0.05)' }, ticks: { color: '#6b7280' } },
-              x: { grid: { display: false }, ticks: { color: '#c9d1d9', font: { size: 10 } } }
+        } catch (e) {
+            authError.textContent = 'Network error: ' + e.message;
+            authError.classList.remove('hidden');
+        }
+    });
+    masterKeyInput.addEventListener('keydown', (e) => { if (e.key === 'Enter') authBtn.click(); });
+
+    $('logout-btn').addEventListener('click', () => {
+        sessionStorage.removeItem('apiarium_master_key');
+        masterKey = '';
+        masterKeyInput.value = '';
+        showAuth();
+    });
+
+    // ── API Helpers ─────────────────────────────────────────────
+    async function api(path, opts = {}) {
+        const r = await fetch(path, { ...opts, headers: { 'Authorization': 'Bearer ' + masterKey, 'Content-Type': 'application/json', ...(opts.headers || {}) } });
+        if (r.status === 401) { sessionStorage.removeItem('apiarium_master_key'); location.reload(); return null; }
+        return r;
+    }
+
+    function toast(msg, type = 'success') {
+        const t = document.createElement('div');
+        t.className = 'toast toast-' + type;
+        t.textContent = msg;
+        document.body.appendChild(t);
+        setTimeout(() => t.remove(), 4000);
+    }
+
+    // ── Load Keys ──────────────────────────────────────────────
+    async function loadKeys() {
+        try {
+            const r = await api('/admin/keys');
+            if (!r || !r.ok) return;
+            const data = await r.json();
+            keysData = data.keys || [];
+            renderStats();
+            renderTable();
+            renderCharts();
+            $('last-sync').textContent = new Date().toLocaleTimeString();
+        } catch (e) {
+            toast('Failed to load keys: ' + e.message, 'error');
+        }
+    }
+
+    function renderStats() {
+        $('stat-total').textContent = keysData.length;
+        const active = keysData.filter(k => k.status === 'active');
+        $('stat-active').textContent = new Set(active.map(k => k.ip)).size;
+        $('stat-requests').textContent = '—';
+        $('stat-ratelimited').textContent = '—';
+    }
+
+    function maskKey(k) {
+        if (!k || k.length < 8) return k;
+        return k.slice(0, 4) + '•'.repeat(Math.max(8, k.length - 8)) + k.slice(-4);
+    }
+
+    function formatDate(ts) {
+        if (!ts) return '—';
+        const d = typeof ts === 'number' ? new Date(ts * 1000) : new Date(ts);
+        return d.toLocaleDateString() + ' ' + d.toLocaleTimeString([], {hour:'2-digit', minute:'2-digit'});
+    }
+
+    function renderTable(filter = '') {
+        const tbody = $('keys-tbody');
+        const empty = $('empty-state');
+        const filtered = keysData.filter(k =>
+            !filter || (k.ip || '').includes(filter) || (k.label || '').toLowerCase().includes(filter.toLowerCase())
+        );
+
+        if (filtered.length === 0) {
+            tbody.innerHTML = '';
+            empty.classList.remove('hidden');
+            return;
+        }
+        empty.classList.add('hidden');
+
+        tbody.innerHTML = filtered.map(k => `
+            <tr class="hover:bg-white/[0.02] transition">
+                <td class="py-3 pr-4 font-mono text-xs text-amber-300">${maskKey(k.key)}</td>
+                <td class="py-3 pr-4 font-mono text-xs text-slate-300">${k.ip || '—'}</td>
+                <td class="py-3 pr-4 text-slate-300">${k.label || '<span class="text-slate-600">—</span>'}</td>
+                <td class="py-3 pr-4 text-xs text-slate-500">${formatDate(k.created_at)}</td>
+                <td class="py-3 pr-4">
+                    <span class="text-xs font-mono px-2 py-0.5 rounded-full ${k.status === 'active' ? 'bg-green-500/10 text-green-400 border border-green-500/20' : 'bg-red-500/10 text-red-400 border border-red-500/20'}">
+                        ${k.status || 'active'}
+                    </span>
+                </td>
+                <td class="py-3 flex gap-2">
+                    <button onclick="window.__copyKey('${k.key}')" class="text-xs font-mono text-slate-400 hover:text-amber-400 px-2 py-1 rounded bg-white/5 hover:bg-white/10 transition">COPY</button>
+                    ${k.status !== 'revoked' ? `<button onclick="window.__revokeKey('${k.key}')" class="text-xs font-mono text-slate-400 hover:text-red-400 px-2 py-1 rounded bg-white/5 hover:bg-red-500/10 transition">REVOKE</button>` : ''}
+                </td>
+            </tr>
+        `).join('');
+    }
+
+    window.__copyKey = async (key) => {
+        try {
+            await navigator.clipboard.writeText(key);
+            toast('Key copied to clipboard');
+        } catch (e) {
+            toast('Copy failed', 'error');
+        }
+    };
+
+    window.__revokeKey = async (key) => {
+        if (!confirm('Revoke this key? It will stop working immediately.')) return;
+        try {
+            const r = await api('/admin/keys/' + encodeURIComponent(key), { method: 'DELETE' });
+            if (r && r.ok) {
+                keysData = keysData.filter(k => k.key !== key);
+                renderStats();
+                renderTable($('search-input').value);
+                toast('Key revoked');
+            } else {
+                const d = await r.json().catch(() => ({}));
+                toast(d?.error?.message || 'Revoke failed', 'error');
+            }
+        } catch (e) {
+            toast('Network error', 'error');
+        }
+    };
+
+    $('search-input').addEventListener('input', (e) => renderTable(e.target.value));
+
+    // ── Generate Key ───────────────────────────────────────────
+    const ipv4Re = /^(?:(?:25[0-5]|2[0-4]\d|[01]?\d\d?)\.){3}(?:25[0-5]|2[0-4]\d|[01]?\d\d?)$/;
+    const ipv6Re = /^(([0-9a-fA-F]{1,4}:){7}[0-9a-fA-F]{1,4}|::|(([0-9a-fA-F]{1,4}:){0,6}[0-9a-fA-F]{1,4})?::([0-9a-fA-F]{1,4}:){0,6}[0-9a-fA-F]{1,4})$/;
+
+    $('key-form').addEventListener('submit', async (e) => {
+        e.preventDefault();
+        const ip = $('ip-input').value.trim();
+        const label = $('label-input').value.trim();
+        const err = $('ip-error');
+
+        if (ip.includes('/')) { err.textContent = 'CIDR notation not allowed'; err.classList.remove('hidden'); return; }
+        if (!ipv4Re.test(ip) && !ipv6Re.test(ip)) { err.textContent = 'Invalid IP format'; err.classList.remove('hidden'); return; }
+        err.classList.add('hidden');
+
+        const btn = $('gen-btn');
+        btn.disabled = true; btn.textContent = 'Generating...';
+        try {
+            const r = await api('/admin/keys', { method: 'POST', body: JSON.stringify({ ip, label }) });
+            const d = await r.json();
+            if (r.ok) {
+                $('result-key').textContent = d.key;
+                $('result-ip').textContent = d.ip;
+                $('result-label').textContent = d.label || '—';
+                $('result-card').classList.remove('hidden');
+                $('ip-input').value = ''; $('label-input').value = '';
+                toast('Key generated for ' + d.ip);
+                await loadKeys();
+            } else {
+                toast(d?.error?.message || 'Generation failed', 'error');
             }
-          }
+        } catch (e) {
+            toast('Network error', 'error');
+        } finally {
+            btn.disabled = false; btn.textContent = 'Generate';
+        }
+    });
+
+    $('copy-key-btn').addEventListener('click', () => {
+        navigator.clipboard.writeText($('result-key').textContent).then(() => toast('Key copied'));
+    });
+
+    // ── Charts ─────────────────────────────────────────────────
+    function renderCharts() {
+        Chart.defaults.color = '#94a3b8';
+        Chart.defaults.borderColor = 'rgba(255,255,255,0.05)';
+        Chart.defaults.font.family = "'Inter', sans-serif";
+
+        const days = Array.from({length: 7}, (_, i) => {
+            const d = new Date(); d.setDate(d.getDate() - (6 - i));
+            return d.toLocaleDateString(undefined, { weekday: 'short' });
+        });
+
+        if (chartRequests) chartRequests.destroy();
+        chartRequests = new Chart($('chart-requests'), {
+            type: 'line',
+            data: {
+                labels: days,
+                datasets: [{
+                    label: 'Requests', data: [0,0,0,0,0,0,0],
+                    borderColor: '#f59e0b', backgroundColor: 'rgba(245, 158, 11, 0.1)',
+                    fill: true, tension: 0.4, pointRadius: 4, pointBackgroundColor: '#f59e0b',
+                }]
+            },
+            options: { responsive: true, plugins: { legend: { display: false } }, scales: { y: { beginAtZero: true, grid: { color: 'rgba(255,255,255,0.05)' } }, x: { grid: { display: false } } } }
+        });
+
+        if (chartModels) chartModels.destroy();
+        chartModels = new Chart($('chart-models'), {
+            type: 'doughnut',
+            data: {
+                labels: ['gpt-4', 'claude', 'gemini', 'deepseek', 'other'],
+                datasets: [{
+                    data: [30, 25, 20, 15, 10],
+                    backgroundColor: ['#f59e0b', '#3b82f6', '#10b981', '#8b5cf6', '#64748b'],
+                    borderColor: '#0a0a0f', borderWidth: 2,
+                }]
+            },
+            options: { responsive: true, plugins: { legend: { position: 'bottom', labels: { font: { family: "'JetBrains Mono'", size: 11 }, padding: 12 } } } }
         });
-      </script>
-    </body>
-    </html>
+    }
+
+    initAuth();
+})();
+</script>
+</body>
+</html>