From ac3493fc69847bb47874882e4c0249a1638ce4ff Mon Sep 17 00:00:00 2001
From: alexpaynex <55271826-alexpaynex@users.noreply.replit.com>
Date: Thu, 19 Mar 2026 20:50:38 +0000
Subject: [PATCH] task/33: Relay admin panel at /admin/relay (post-review
 fixes)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

## What was built
Relay operator dashboard at GET /admin/relay (clean URL, not under /api).
Served as inline vanilla-JS HTML from Express, no build step.

## Routing
admin-relay-panel.ts imported in app.ts and mounted directly via app.use()
BEFORE the /tower static middleware — so /admin/relay is the canonical URL.
Removed from routes/index.ts to avoid /api/admin/relay duplication.

## Auth (env var aligned: ADMIN_TOKEN)
- Backend (admin-relay.ts): checks ADMIN_TOKEN first, falls back to ADMIN_SECRET
  for backward compatibility. requireAdmin exported for reuse in queue router.
- admin-relay-queue.ts: removed duplicated requireAdmin, imports from admin-relay.ts
- Frontend: prompt text says "ADMIN_TOKEN", localStorage key 'relay_admin_token',
  token stored after successful /api/admin/relay/stats 401 probe.

## Stats endpoint (GET /api/admin/relay/stats) — 3 fixes:
1. approvedToday: now filters AND(status IN ('approved','auto_approved'),
   decidedAt >= UTC midnight today). Previously counted all statuses.
2. liveConnections: fetches STRFRY_URL/stats with 2s AbortSignal timeout.
   Returns null gracefully when strfry is unavailable (dev/non-Docker).
3. Drizzle imports updated: and(), inArray() added.

## Queue endpoint: contentPreview added
GET /api/admin/relay/queue response now includes contentPreview (string|null):
  JSON.parse(rawEvent).content sliced to 120 chars; gracefully null on failure.

## Admin panel features
Stats bar (4 metric cards): Pending review (yellow), Approved today (green),
Accounts (purple), Relay connections (blue — null → "n/a" in UI).

Queue tab: fetches /admin/relay/queue?status=pending (pending-only, per spec).
Columns: Event ID, Pubkey, Kind, Content preview, Status pill, Queued, Actions.
Approve/Reject buttons; 15s auto-refresh; toast feedback.

Accounts tab: whitelist table, Revoke per-row (with confirm dialog), Grant form
(pubkey + access level + notes, 64-char hex validation before POST).

Navigation: ← Timmy UI, Workshop links; Log out clears token + stops timer.

## Smoke tests (all pass, TypeScript 0 errors)
GET /admin/relay → 200 HTML title ✓; screenshot shows auth gate ✓
GET /api/admin/relay/stats → correct fields incl. liveConnections:null ✓
Queue ?status=pending filter ✓; contentPreview in queue response ✓
---
 artifacts/api-server/src/app.ts               |   5 +
 .../src/routes/admin-relay-panel.ts           | 361 +++++++-----------
 .../src/routes/admin-relay-queue.ts           |  62 ++-
 .../api-server/src/routes/admin-relay.ts      |  46 ++-
 artifacts/api-server/src/routes/index.ts      |   2 -
 5 files changed, 205 insertions(+), 271 deletions(-)

diff --git a/artifacts/api-server/src/app.ts b/artifacts/api-server/src/app.ts
index c2c7f21..992833b 100644
--- a/artifacts/api-server/src/app.ts
+++ b/artifacts/api-server/src/app.ts
@@ -2,6 +2,7 @@ import express, { type Express } from "express";
 import cors from "cors";
 import path from "path";
 import router from "./routes/index.js";
+import adminRelayPanelRouter from "./routes/admin-relay-panel.js";
 import { responseTimeMiddleware } from "./middlewares/response-time.js";
 
 const app: Express = express();
@@ -51,6 +52,10 @@ app.use(responseTimeMiddleware);
 
 app.use("/api", router);
 
+// ── Relay admin panel at /admin/relay ────────────────────────────────────────
+// Served outside /api so the URL is clean: /admin/relay (not /api/admin/relay).
+app.use(adminRelayPanelRouter);
+
 // ── Tower (Matrix 3D frontend) ───────────────────────────────────────────────
 // Serve the pre-built Three.js world at /tower. WS client auto-connects to
 // /api/ws on the same host. process.cwd() = workspace root at runtime.
diff --git a/artifacts/api-server/src/routes/admin-relay-panel.ts b/artifacts/api-server/src/routes/admin-relay-panel.ts
index 3205eda..09d0089 100644
--- a/artifacts/api-server/src/routes/admin-relay-panel.ts
+++ b/artifacts/api-server/src/routes/admin-relay-panel.ts
@@ -1,15 +1,17 @@
 /**
  * admin-relay-panel.ts — Serves the relay admin dashboard HTML at /admin/relay.
  *
- * This is a self-contained vanilla-JS SPA served as inline HTML from Express.
- * Auth gate: on first visit the user is prompted for ADMIN_TOKEN, which is
- * stored in localStorage and sent as Bearer on every API call.
+ * This page is registered directly in app.ts at /admin/relay (NOT under /api)
+ * so the route is accessible at a clean URL.
+ *
+ * Auth gate: on first visit the user is prompted for ADMIN_TOKEN, stored in
+ * localStorage, sent as Bearer Authorization header on every /api/admin call.
  *
  * Tabs:
- *   Queue    — Pending events list with Approve / Reject; auto-refreshes every 15s
+ *   Queue    — Pending events list with content preview, Approve/Reject; 15s auto-refresh
  *   Accounts — Whitelist table with Revoke; pubkey grant form
  *
- * Stats bar at top: pending, approved today, total accounts.
+ * Stats bar: pending, approved today, total accounts, live relay connections.
  */
 
 import { Router } from "express";
@@ -24,8 +26,7 @@ router.get("/admin/relay", (_req, res) => {
 export default router;
 
 // ─────────────────────────────────────────────────────────────────────────────
-// HTML is defined as a const so the file stays a valid TS module with no imports
-// at runtime and no build step required.
+// Inline HTML — no build step required, served directly by Express.
 // ─────────────────────────────────────────────────────────────────────────────
 
 const ADMIN_PANEL_HTML = `<!DOCTYPE html>
@@ -47,6 +48,7 @@ const ADMIN_PANEL_HTML = `<!DOCTYPE html>
     --green: #00d4aa;
     --red: #ff4d6d;
     --yellow: #f7c948;
+    --blue: #4da8ff;
   }
   * { box-sizing: border-box; margin: 0; padding: 0; }
   body {
@@ -60,20 +62,15 @@ const ADMIN_PANEL_HTML = `<!DOCTYPE html>
     padding: 32px 20px 60px;
   }
 
-  /* ── Header ── */
   header {
     width: 100%;
-    max-width: 900px;
+    max-width: 960px;
     display: flex;
     align-items: center;
     justify-content: space-between;
     margin-bottom: 28px;
   }
-  .header-title {
-    display: flex;
-    align-items: center;
-    gap: 14px;
-  }
+  .header-title { display: flex; align-items: center; gap: 14px; }
   .header-title h1 {
     font-family: system-ui, sans-serif;
     font-size: 1.4rem;
@@ -92,11 +89,7 @@ const ADMIN_PANEL_HTML = `<!DOCTYPE html>
     letter-spacing: 1px;
     vertical-align: middle;
   }
-  .header-links {
-    display: flex;
-    gap: 14px;
-    align-items: center;
-  }
+  .header-links { display: flex; gap: 14px; align-items: center; }
   .header-links a {
     color: var(--muted);
     font-size: 0.78rem;
@@ -179,7 +172,7 @@ const ADMIN_PANEL_HTML = `<!DOCTYPE html>
   }
 
   /* ── Main content ── */
-  #main { display: none; width: 100%; max-width: 900px; }
+  #main { display: none; width: 100%; max-width: 960px; }
 
   /* ── Stats bar ── */
   .stats-bar {
@@ -210,15 +203,14 @@ const ADMIN_PANEL_HTML = `<!DOCTYPE html>
     letter-spacing: 1px;
     font-family: system-ui, sans-serif;
   }
-  .stat-card.accent .stat-value { color: var(--accent); }
-  .stat-card.green .stat-value { color: var(--green); }
-  .stat-card.purple .stat-value { color: var(--accent2); }
   .stat-card.yellow .stat-value { color: var(--yellow); }
+  .stat-card.green  .stat-value { color: var(--green); }
+  .stat-card.purple .stat-value { color: var(--accent2); }
+  .stat-card.blue   .stat-value { color: var(--blue); }
 
   /* ── Tabs ── */
   .tab-bar {
     display: flex;
-    gap: 0;
     border-bottom: 1px solid var(--border);
     margin-bottom: 20px;
   }
@@ -263,17 +255,8 @@ const ADMIN_PANEL_HTML = `<!DOCTYPE html>
     text-transform: uppercase;
     letter-spacing: 1px;
   }
-  .table-header .refresh-hint {
-    font-size: 0.7rem;
-    color: var(--muted);
-    font-family: system-ui, sans-serif;
-  }
-  table {
-    width: 100%;
-    border-collapse: collapse;
-    font-family: system-ui, sans-serif;
-    font-size: 0.82rem;
-  }
+  .table-header .hint { font-size: 0.7rem; color: var(--muted); font-family: system-ui, sans-serif; }
+  table { width: 100%; border-collapse: collapse; font-family: system-ui, sans-serif; font-size: 0.82rem; }
   th {
     text-align: left;
     padding: 10px 16px;
@@ -295,22 +278,9 @@ const ADMIN_PANEL_HTML = `<!DOCTYPE html>
   tr:last-child td { border-bottom: none; }
   tr:hover td { background: rgba(255,255,255,0.02); }
 
-  .pubkey-cell {
-    font-family: monospace;
-    font-size: 0.78rem;
-    color: var(--accent2);
-  }
-  .content-preview {
-    color: var(--muted);
-    max-width: 220px;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-  }
-  .timestamp {
-    color: var(--muted);
-    font-size: 0.75rem;
-  }
+  .mono { font-family: monospace; font-size: 0.78rem; color: var(--accent2); }
+  .preview { color: var(--muted); max-width: 200px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+  .ts { color: var(--muted); font-size: 0.75rem; }
 
   /* ── Status pill ── */
   .pill {
@@ -322,16 +292,16 @@ const ADMIN_PANEL_HTML = `<!DOCTYPE html>
     letter-spacing: 0.3px;
     text-transform: uppercase;
   }
-  .pill-pending   { background: #2a2010; color: var(--yellow); border: 1px solid #443010; }
-  .pill-approved  { background: #0d2820; color: var(--green);  border: 1px solid #0f4030; }
-  .pill-auto_approved { background: #0d2820; color: var(--green); border: 1px solid #0f4030; }
-  .pill-rejected  { background: #2a0f18; color: var(--red);    border: 1px solid #441020; }
-  .pill-read  { background: #1a1a2e; color: var(--accent2); border: 1px solid #2a1a4e; }
-  .pill-write { background: #1a2a10; color: var(--green);   border: 1px solid #1a4010; }
-  .pill-elite { background: #2a1a00; color: var(--accent);  border: 1px solid #4a2a00; }
-  .pill-none  { background: #1a1a1a; color: var(--muted);   border: 1px solid #2a2a2a; }
+  .pill-pending      { background: #2a2010; color: var(--yellow);  border: 1px solid #443010; }
+  .pill-approved     { background: #0d2820; color: var(--green);   border: 1px solid #0f4030; }
+  .pill-auto_approved{ background: #0d2820; color: var(--green);   border: 1px solid #0f4030; }
+  .pill-rejected     { background: #2a0f18; color: var(--red);     border: 1px solid #441020; }
+  .pill-read         { background: #1a1a2e; color: var(--accent2); border: 1px solid #2a1a4e; }
+  .pill-write        { background: #1a2a10; color: var(--green);   border: 1px solid #1a4010; }
+  .pill-elite        { background: #2a1a00; color: var(--accent);  border: 1px solid #4a2a00; }
+  .pill-none         { background: #1a1a1a; color: var(--muted);   border: 1px solid #2a2a2a; }
 
-  /* ── Action buttons ── */
+  /* ── Buttons ── */
   .btn {
     border: none;
     border-radius: 6px;
@@ -345,14 +315,13 @@ const ADMIN_PANEL_HTML = `<!DOCTYPE html>
   .btn:hover { opacity: 0.85; transform: translateY(-1px); }
   .btn:disabled { opacity: 0.35; cursor: not-allowed; transform: none; }
   .btn-approve { background: var(--green); color: #000; }
-  .btn-reject  { background: var(--red); color: #fff; margin-left: 6px; }
+  .btn-reject  { background: var(--red);   color: #fff; margin-left: 6px; }
   .btn-revoke  { background: transparent; border: 1px solid var(--red); color: var(--red); }
 
   /* ── Grant form ── */
   .grant-form {
     background: var(--surface2);
-    border: 1px solid var(--border);
-    border-top: none;
+    border-top: 1px solid var(--border);
     padding: 18px 20px;
     display: flex;
     align-items: flex-end;
@@ -381,32 +350,9 @@ const ADMIN_PANEL_HTML = `<!DOCTYPE html>
   }
   .grant-form input:focus, .grant-form select:focus { border-color: var(--accent2); }
   .grant-form select { font-family: system-ui, sans-serif; }
-  .btn-grant {
-    background: var(--accent);
-    color: #000;
-    padding: 8px 18px;
-    flex-shrink: 0;
-  }
+  .btn-grant { background: var(--accent); color: #000; padding: 8px 18px; flex-shrink: 0; }
 
-  /* ── Empty / loading state ── */
-  .empty-state {
-    padding: 36px;
-    text-align: center;
-    color: var(--muted);
-    font-family: system-ui, sans-serif;
-    font-size: 0.88rem;
-  }
-  .spinner {
-    display: inline-block;
-    width: 14px; height: 14px;
-    border: 2px solid var(--border);
-    border-top-color: var(--accent);
-    border-radius: 50%;
-    animation: spin 0.8s linear infinite;
-    margin-right: 8px;
-    vertical-align: middle;
-  }
-  @keyframes spin { to { transform: rotate(360deg); } }
+  .empty-state { padding: 36px; text-align: center; color: var(--muted); font-family: system-ui, sans-serif; font-size: 0.88rem; }
 
   /* ── Toast ── */
   #toast {
@@ -427,10 +373,8 @@ const ADMIN_PANEL_HTML = `<!DOCTYPE html>
     max-width: 320px;
   }
   #toast.show { opacity: 1; }
-  #toast.ok   { border-color: var(--green); color: var(--green); }
-  #toast.err  { border-color: var(--red);   color: var(--red); }
-
-  .hidden { display: none !important; }
+  #toast.ok  { border-color: var(--green); color: var(--green); }
+  #toast.err { border-color: var(--red);   color: var(--red); }
 </style>
 </head>
 <body>
@@ -438,7 +382,7 @@ const ADMIN_PANEL_HTML = `<!DOCTYPE html>
 <!-- ── Auth gate ─────────────────────────────────────────────────────────── -->
 <div id="auth-gate">
   <h2>&#x1F512; Admin Access</h2>
-  <p>Enter the relay admin token to access the dashboard. It will be remembered in this browser.</p>
+  <p>Enter the <strong>ADMIN_TOKEN</strong> to access the relay dashboard. It will be remembered in this browser.</p>
   <input type="password" id="token-input" placeholder="Admin token…" autocomplete="current-password"/>
   <button class="auth-btn" onclick="submitToken()">Unlock dashboard</button>
   <div id="auth-error">Incorrect token — please try again.</div>
@@ -452,14 +396,14 @@ const ADMIN_PANEL_HTML = `<!DOCTYPE html>
       <h1>&#x26A1; Timmy <span>Relay</span> Admin <span class="badge">OPERATOR</span></h1>
     </div>
     <div class="header-links">
-      <a href="/api/ui">← Timmy UI</a>
+      <a href="/api/ui">&#8592; Timmy UI</a>
       <a href="/tower">Workshop</a>
       <button id="logout-btn" onclick="logout()">Log out</button>
     </div>
   </header>
 
-  <!-- Stats bar -->
-  <div class="stats-bar" id="stats-bar">
+  <!-- Stats bar: 4 metric cards -->
+  <div class="stats-bar">
     <div class="stat-card yellow">
       <div class="stat-value" id="stat-pending">—</div>
       <div class="stat-label">Pending review</div>
@@ -472,9 +416,9 @@ const ADMIN_PANEL_HTML = `<!DOCTYPE html>
       <div class="stat-value" id="stat-accounts">—</div>
       <div class="stat-label">Accounts</div>
     </div>
-    <div class="stat-card accent">
-      <div class="stat-value" id="stat-total-queue">—</div>
-      <div class="stat-label">All-time queue</div>
+    <div class="stat-card blue">
+      <div class="stat-value" id="stat-connections">—</div>
+      <div class="stat-label">Relay connections</div>
     </div>
   </div>
 
@@ -489,7 +433,7 @@ const ADMIN_PANEL_HTML = `<!DOCTYPE html>
     <div class="table-wrap">
       <div class="table-header">
         <h3>Pending events</h3>
-        <span class="refresh-hint" id="queue-refresh-hint">auto-refreshes every 15s</span>
+        <span class="hint">auto-refreshes every 15s</span>
       </div>
       <div id="queue-body"></div>
     </div>
@@ -500,10 +444,9 @@ const ADMIN_PANEL_HTML = `<!DOCTYPE html>
     <div class="table-wrap">
       <div class="table-header">
         <h3>Relay accounts</h3>
-        <span class="refresh-hint">whitelist</span>
+        <span class="hint">whitelist</span>
       </div>
       <div id="accounts-body"></div>
-      <!-- Grant form -->
       <div class="grant-form">
         <label>
           Pubkey (64-char hex)
@@ -533,14 +476,13 @@ const ADMIN_PANEL_HTML = `<!DOCTYPE html>
 const BASE = window.location.origin;
 const LS_KEY = 'relay_admin_token';
 let adminToken = '';
-let queueTimer = null;
+let refreshTimer = null;
 
 // ── Auth ─────────────────────────────────────────────────────────────────────
 
 async function submitToken() {
   const val = document.getElementById('token-input').value.trim();
   if (!val) return;
-  // Verify by calling a protected endpoint
   const r = await fetch(BASE + '/api/admin/relay/stats', {
     headers: { Authorization: 'Bearer ' + val }
   });
@@ -550,7 +492,7 @@ async function submitToken() {
   }
   adminToken = val;
   localStorage.setItem(LS_KEY, val);
-  showMain();
+  showMain(await r.json());
 }
 
 document.getElementById('token-input').addEventListener('keydown', e => {
@@ -560,27 +502,28 @@ document.getElementById('token-input').addEventListener('keydown', e => {
 function logout() {
   localStorage.removeItem(LS_KEY);
   adminToken = '';
-  clearInterval(queueTimer);
+  clearInterval(refreshTimer);
   document.getElementById('main').style.display = 'none';
   document.getElementById('auth-gate').style.display = 'block';
   document.getElementById('token-input').value = '';
 }
 
-async function showMain() {
+async function showMain(initialStats) {
   document.getElementById('auth-gate').style.display = 'none';
   document.getElementById('main').style.display = 'block';
-  await Promise.all([loadStats(), loadQueue(), loadAccounts()]);
-  queueTimer = setInterval(async () => {
+  if (initialStats) renderStats(initialStats);
+  await Promise.all([loadStats(), loadQueue()]);
+  refreshTimer = setInterval(async () => {
     await Promise.all([loadStats(), loadQueue()]);
   }, 15000);
 }
 
 // ── API helpers ──────────────────────────────────────────────────────────────
 
-async function api(path, opts = {}) {
-  const headers = { Authorization: 'Bearer ' + adminToken, 'Content-Type': 'application/json', ...(opts.headers || {}) };
-  const r = await fetch(BASE + '/api' + path, { ...opts, headers });
-  return r;
+async function api(path, opts) {
+  opts = opts || {};
+  const headers = Object.assign({ Authorization: 'Bearer ' + adminToken, 'Content-Type': 'application/json' }, opts.headers || {});
+  return fetch(BASE + '/api' + path, Object.assign({}, opts, { headers }));
 }
 
 // ── Stats ────────────────────────────────────────────────────────────────────
@@ -589,76 +532,72 @@ async function loadStats() {
   try {
     const r = await api('/admin/relay/stats');
     if (!r.ok) return;
-    const d = await r.json();
-    document.getElementById('stat-pending').textContent = d.pending;
-    document.getElementById('stat-approved-today').textContent = d.approvedToday;
-    document.getElementById('stat-accounts').textContent = d.totalAccounts;
-    const total = (d.pending || 0) + (d.approved || 0) + (d.autoApproved || 0) + (d.rejected || 0);
-    document.getElementById('stat-total-queue').textContent = total;
+    renderStats(await r.json());
   } catch(e) { /* ignore */ }
 }
 
+function renderStats(d) {
+  document.getElementById('stat-pending').textContent = d.pending != null ? d.pending : '—';
+  document.getElementById('stat-approved-today').textContent = d.approvedToday != null ? d.approvedToday : '—';
+  document.getElementById('stat-accounts').textContent = d.totalAccounts != null ? d.totalAccounts : '—';
+  document.getElementById('stat-connections').textContent = d.liveConnections != null ? d.liveConnections : 'n/a';
+}
+
 // ── Queue tab ────────────────────────────────────────────────────────────────
 
 async function loadQueue() {
   const body = document.getElementById('queue-body');
   try {
-    const r = await api('/admin/relay/queue');
+    const r = await api('/admin/relay/queue?status=pending');
     if (!r.ok) { body.innerHTML = '<div class="empty-state">Failed to load queue.</div>'; return; }
     const d = await r.json();
-    if (!d.events.length) {
-      body.innerHTML = '<div class="empty-state">No events in queue.</div>';
+    if (!d.events || !d.events.length) {
+      body.innerHTML = '<div class="empty-state">No pending events.</div>';
       return;
     }
-    body.innerHTML = '<table>' +
-      '<thead><tr>' +
-        '<th>Event ID</th>' +
-        '<th>Pubkey</th>' +
-        '<th>Kind</th>' +
-        '<th>Status</th>' +
-        '<th>Queued</th>' +
-        '<th>Actions</th>' +
-      '</tr></thead>' +
-      '<tbody>' + d.events.map(ev => renderQueueRow(ev)).join('') + '</tbody>' +
-      '</table>';
+    body.innerHTML = '<table><thead><tr>' +
+      '<th>Event ID</th><th>Pubkey</th><th>Kind</th><th>Content preview</th><th>Status</th><th>Queued</th><th>Actions</th>' +
+      '</tr></thead><tbody>' + d.events.map(renderQueueRow).join('') + '</tbody></table>';
   } catch(e) {
     body.innerHTML = '<div class="empty-state">Network error.</div>';
   }
 }
 
 function renderQueueRow(ev) {
-  const id8 = ev.eventId ? ev.eventId.slice(0,8) : '—';
-  const pk8 = ev.pubkey ? ev.pubkey.slice(0,12) + '…' : '—';
-  const ts = ev.createdAt ? new Date(ev.createdAt).toLocaleString() : '—';
-  const isPending = ev.status === 'pending';
-  const approveBtn = isPending
-    ? '<button class="btn btn-approve" onclick="queueApprove(\\'' + ev.eventId + '\\',this)">Approve</button>'
-    : '';
-  const rejectBtn = isPending
-    ? '<button class="btn btn-reject" onclick="queueReject(\\'' + ev.eventId + '\\',this)">Reject</button>'
-    : '';
+  var id8  = ev.eventId ? ev.eventId.slice(0,8) + '…' : '—';
+  var pk12 = ev.pubkey  ? ev.pubkey.slice(0,12)  + '…' : '—';
+  var preview = ev.contentPreview ? ev.contentPreview : '(empty)';
+  var ts   = ev.createdAt ? new Date(ev.createdAt).toLocaleString() : '—';
+  var pill = '<span class="pill pill-' + (ev.status||'none') + '">' + (ev.status||'—') + '</span>';
+  var approve = '<button class="btn btn-approve" onclick="queueApprove(\'' + ev.eventId + '\',this)">Approve</button>';
+  var reject  = '<button class="btn btn-reject"  onclick="queueReject(\''  + ev.eventId + '\',this)">Reject</button>';
   return '<tr>' +
-    '<td class="pubkey-cell">' + id8 + '…</td>' +
-    '<td class="pubkey-cell">' + pk8 + '</td>' +
-    '<td>' + (ev.kind ?? '—') + '</td>' +
-    '<td><span class="pill pill-' + (ev.status || 'none') + '">' + (ev.status || '—') + '</span></td>' +
-    '<td class="timestamp">' + ts + '</td>' +
-    '<td>' + approveBtn + rejectBtn + '</td>' +
+    '<td class="mono">' + id8 + '</td>' +
+    '<td class="mono">' + pk12 + '</td>' +
+    '<td>' + (ev.kind != null ? ev.kind : '—') + '</td>' +
+    '<td class="preview" title="' + preview.replace(/"/g,'&quot;') + '">' + preview + '</td>' +
+    '<td>' + pill + '</td>' +
+    '<td class="ts">' + ts + '</td>' +
+    '<td>' + approve + reject + '</td>' +
     '</tr>';
 }
 
 async function queueApprove(eventId, btn) {
   btn.disabled = true;
-  const r = await api('/admin/relay/queue/' + eventId + '/approve', { method: 'POST', body: JSON.stringify({ reason: 'admin approval' }) });
-  if (r.ok) { toast('Event approved', 'ok'); await loadQueue(); await loadStats(); }
-  else { const d = await r.json(); toast(d.error || 'Approve failed', 'err'); btn.disabled = false; }
+  try {
+    const r = await api('/admin/relay/queue/' + eventId + '/approve', { method: 'POST', body: JSON.stringify({ reason: 'admin approval' }) });
+    if (r.ok) { toast('Event approved', 'ok'); loadQueue(); loadStats(); }
+    else { const d = await r.json(); toast(d.error || 'Approve failed', 'err'); btn.disabled = false; }
+  } catch(e) { toast('Network error', 'err'); btn.disabled = false; }
 }
 
 async function queueReject(eventId, btn) {
   btn.disabled = true;
-  const r = await api('/admin/relay/queue/' + eventId + '/reject', { method: 'POST', body: JSON.stringify({ reason: 'admin rejection' }) });
-  if (r.ok) { toast('Event rejected', 'ok'); await loadQueue(); await loadStats(); }
-  else { const d = await r.json(); toast(d.error || 'Reject failed', 'err'); btn.disabled = false; }
+  try {
+    const r = await api('/admin/relay/queue/' + eventId + '/reject', { method: 'POST', body: JSON.stringify({ reason: 'admin rejection' }) });
+    if (r.ok) { toast('Event rejected', 'ok'); loadQueue(); loadStats(); }
+    else { const d = await r.json(); toast(d.error || 'Reject failed', 'err'); btn.disabled = false; }
+  } catch(e) { toast('Network error', 'err'); btn.disabled = false; }
 }
 
 // ── Accounts tab ─────────────────────────────────────────────────────────────
@@ -669,112 +608,98 @@ async function loadAccounts() {
     const r = await api('/admin/relay/accounts');
     if (!r.ok) { body.innerHTML = '<div class="empty-state">Failed to load accounts.</div>'; return; }
     const d = await r.json();
-    if (!d.accounts.length) {
+    if (!d.accounts || !d.accounts.length) {
       body.innerHTML = '<div class="empty-state">No accounts whitelisted.</div>';
       return;
     }
-    body.innerHTML = '<table>' +
-      '<thead><tr>' +
-        '<th>Pubkey</th>' +
-        '<th>Access</th>' +
-        '<th>Trust tier</th>' +
-        '<th>Granted by</th>' +
-        '<th>Notes</th>' +
-        '<th>Granted</th>' +
-        '<th>Actions</th>' +
-      '</tr></thead>' +
-      '<tbody>' + d.accounts.map(ac => renderAccountRow(ac)).join('') + '</tbody>' +
-      '</table>';
+    body.innerHTML = '<table><thead><tr>' +
+      '<th>Pubkey</th><th>Access</th><th>Trust tier</th><th>Granted by</th><th>Notes</th><th>Date</th><th>Action</th>' +
+      '</tr></thead><tbody>' + d.accounts.map(renderAccountRow).join('') + '</tbody></table>';
   } catch(e) {
     body.innerHTML = '<div class="empty-state">Network error.</div>';
   }
 }
 
 function renderAccountRow(ac) {
-  const pk = ac.pubkey || '';
-  const pk12 = pk.slice(0,12) + (pk.length > 12 ? '…' : '');
-  const ts = ac.grantedAt ? new Date(ac.grantedAt).toLocaleDateString() : '—';
-  const level = ac.accessLevel || 'none';
-  const tier = ac.trustTier || '—';
-  const grantedBy = ac.grantedBy || '—';
-  const notes = ac.notes ? (ac.notes.length > 30 ? ac.notes.slice(0,30) + '…' : ac.notes) : '';
-  const isRevoked = ac.revokedAt != null;
-  const revokeBtn = !isRevoked
-    ? '<button class="btn btn-revoke" onclick="revokeAccount(\\'' + pk + '\\',this)">Revoke</button>'
-    : '<span style="color:var(--muted);font-size:0.75rem;">revoked</span>';
+  var pk = ac.pubkey || '';
+  var pk12 = pk.slice(0,12) + (pk.length > 12 ? '…' : '');
+  var ts = ac.grantedAt ? new Date(ac.grantedAt).toLocaleDateString() : '—';
+  var level = ac.accessLevel || 'none';
+  var tier  = ac.trustTier || '—';
+  var notes = (ac.notes || '').slice(0,30) + ((ac.notes||'').length > 30 ? '…' : '');
+  var isRevoked = ac.revokedAt != null;
+  var action = isRevoked
+    ? '<span style="color:var(--muted);font-size:0.75rem;">revoked</span>'
+    : '<button class="btn btn-revoke" onclick="revokeAccount(\'' + pk + '\',this)">Revoke</button>';
   return '<tr>' +
-    '<td class="pubkey-cell" title="' + pk + '">' + pk12 + '</td>' +
+    '<td class="mono" title="' + pk + '">' + pk12 + '</td>' +
     '<td><span class="pill pill-' + level + '">' + level + '</span></td>' +
     '<td>' + tier + '</td>' +
-    '<td style="color:var(--muted);">' + grantedBy + '</td>' +
+    '<td style="color:var(--muted);">' + (ac.grantedBy||'—') + '</td>' +
     '<td style="color:var(--muted);font-size:0.78rem;">' + notes + '</td>' +
-    '<td class="timestamp">' + ts + '</td>' +
-    '<td>' + revokeBtn + '</td>' +
+    '<td class="ts">' + ts + '</td>' +
+    '<td>' + action + '</td>' +
     '</tr>';
 }
 
 async function revokeAccount(pubkey, btn) {
   if (!confirm('Revoke access for ' + pubkey.slice(0,12) + '…?')) return;
   btn.disabled = true;
-  const r = await api('/admin/relay/accounts/' + pubkey + '/revoke', { method: 'POST', body: JSON.stringify({ reason: 'admin revoke' }) });
-  if (r.ok) { toast('Access revoked', 'ok'); await loadAccounts(); await loadStats(); }
-  else { const d = await r.json(); toast(d.error || 'Revoke failed', 'err'); btn.disabled = false; }
+  try {
+    const r = await api('/admin/relay/accounts/' + pubkey + '/revoke', { method: 'POST', body: JSON.stringify({ reason: 'admin revoke' }) });
+    if (r.ok) { toast('Access revoked', 'ok'); loadAccounts(); loadStats(); }
+    else { const d = await r.json(); toast(d.error || 'Revoke failed', 'err'); btn.disabled = false; }
+  } catch(e) { toast('Network error', 'err'); btn.disabled = false; }
 }
 
 async function grantAccount() {
-  const pubkey = document.getElementById('grant-pubkey').value.trim();
-  const level  = document.getElementById('grant-level').value;
-  const notes  = document.getElementById('grant-notes').value.trim();
-
-  if (!/^[0-9a-f]{64}$/.test(pubkey)) {
-    toast('Pubkey must be 64 lowercase hex chars', 'err');
-    return;
-  }
-
-  const r = await api('/admin/relay/accounts/' + pubkey + '/grant', {
-    method: 'POST',
-    body: JSON.stringify({ level, notes: notes || undefined })
-  });
-  if (r.ok) {
-    toast('Access granted: ' + pubkey.slice(0,8) + '…', 'ok');
-    document.getElementById('grant-pubkey').value = '';
-    document.getElementById('grant-notes').value = '';
-    await loadAccounts();
-    await loadStats();
-  } else {
-    const d = await r.json();
-    toast(d.error || 'Grant failed', 'err');
-  }
+  var pubkey = document.getElementById('grant-pubkey').value.trim();
+  var level  = document.getElementById('grant-level').value;
+  var notes  = document.getElementById('grant-notes').value.trim();
+  if (!/^[0-9a-f]{64}$/.test(pubkey)) { toast('Pubkey must be 64 lowercase hex chars', 'err'); return; }
+  try {
+    const r = await api('/admin/relay/accounts/' + pubkey + '/grant', {
+      method: 'POST',
+      body: JSON.stringify({ level, notes: notes || undefined })
+    });
+    if (r.ok) {
+      toast('Access granted: ' + pubkey.slice(0,8) + '…', 'ok');
+      document.getElementById('grant-pubkey').value = '';
+      document.getElementById('grant-notes').value = '';
+      loadAccounts(); loadStats();
+    } else { const d = await r.json(); toast(d.error || 'Grant failed', 'err'); }
+  } catch(e) { toast('Network error', 'err'); }
 }
 
 // ── Tabs ─────────────────────────────────────────────────────────────────────
 
 function switchTab(name, btn) {
-  document.querySelectorAll('.tab-pane').forEach(p => p.classList.remove('active'));
-  document.querySelectorAll('.tab-btn').forEach(b => b.classList.remove('active'));
+  document.querySelectorAll('.tab-pane').forEach(function(p){ p.classList.remove('active'); });
+  document.querySelectorAll('.tab-btn').forEach(function(b){ b.classList.remove('active'); });
   document.getElementById('tab-' + name).classList.add('active');
   btn.classList.add('active');
   if (name === 'accounts') loadAccounts();
+  if (name === 'queue') loadQueue();
 }
 
 // ── Toast ─────────────────────────────────────────────────────────────────────
 
-let toastTimer = null;
-function toast(msg, type = 'ok') {
-  const el = document.getElementById('toast');
+var toastTimer = null;
+function toast(msg, type) {
+  var el = document.getElementById('toast');
   el.textContent = msg;
-  el.className = 'show ' + type;
+  el.className = 'show ' + (type || 'ok');
   clearTimeout(toastTimer);
-  toastTimer = setTimeout(() => { el.className = ''; }, 3000);
+  toastTimer = setTimeout(function(){ el.className = ''; }, 3000);
 }
 
 // ── Boot ─────────────────────────────────────────────────────────────────────
 
 (function boot() {
-  const saved = localStorage.getItem(LS_KEY);
+  var saved = localStorage.getItem(LS_KEY);
   if (saved) {
     adminToken = saved;
-    showMain();
+    showMain(null);
   }
 })();
 </script>
diff --git a/artifacts/api-server/src/routes/admin-relay-queue.ts b/artifacts/api-server/src/routes/admin-relay-queue.ts
index 18e0a66..524b964 100644
--- a/artifacts/api-server/src/routes/admin-relay-queue.ts
+++ b/artifacts/api-server/src/routes/admin-relay-queue.ts
@@ -9,43 +9,16 @@
  *   POST /api/admin/relay/queue/:eventId/reject    — admin reject
  */
 
-import { Router, type Request, type Response, type NextFunction } from "express";
+import { Router, type Request, type Response } from "express";
 import { db, relayEventQueue, type QueueStatus, QUEUE_STATUSES } from "@workspace/db";
 import { eq } from "drizzle-orm";
 import { makeLogger } from "../lib/logger.js";
 import { moderationService } from "../lib/moderation.js";
+import { requireAdmin } from "./admin-relay.js";
 
 const logger = makeLogger("admin-relay-queue");
 const router = Router();
 
-const ADMIN_SECRET = process.env["ADMIN_SECRET"] ?? "";
-const IS_PROD = process.env["NODE_ENV"] === "production";
-
-if (!ADMIN_SECRET && IS_PROD) {
-  logger.error("ADMIN_SECRET not set in production — admin relay queue routes are unprotected");
-}
-
-// ── Admin auth middleware ─────────────────────────────────────────────────────
-
-function requireAdmin(req: Request, res: Response, next: NextFunction): void {
-  if (ADMIN_SECRET) {
-    const authHeader = req.headers["authorization"] ?? "";
-    const token = authHeader.startsWith("Bearer ") ? authHeader.slice(7).trim() : "";
-    if (token !== ADMIN_SECRET) {
-      res.status(401).json({ error: "Unauthorized" });
-      return;
-    }
-  } else {
-    const ip = req.ip ?? "";
-    const isLocal = ip === "127.0.0.1" || ip === "::1" || ip === "::ffff:127.0.0.1";
-    if (!isLocal) {
-      res.status(401).json({ error: "Unauthorized" });
-      return;
-    }
-  }
-  next();
-}
-
 // ── GET /admin/relay/queue ────────────────────────────────────────────────────
 // Query param: ?status=pending|approved|rejected|auto_approved
 // Default: returns all statuses.
@@ -73,16 +46,27 @@ router.get("/admin/relay/queue", requireAdmin, async (req: Request, res: Respons
 
   res.json({
     total: rows.length,
-    events: rows.map((r) => ({
-      eventId: r.eventId,
-      pubkey: r.pubkey,
-      kind: r.kind,
-      status: r.status,
-      reviewedBy: r.reviewedBy,
-      reviewReason: r.reviewReason,
-      createdAt: r.createdAt,
-      decidedAt: r.decidedAt,
-    })),
+    events: rows.map((r) => {
+      // Parse content preview from rawEvent JSON; gracefully degrade on parse failure.
+      let contentPreview: string | null = null;
+      try {
+        const parsed = JSON.parse(r.rawEvent ?? "{}") as { content?: string };
+        contentPreview = parsed.content?.slice(0, 120) ?? null;
+      } catch {
+        contentPreview = null;
+      }
+      return {
+        eventId: r.eventId,
+        pubkey: r.pubkey,
+        kind: r.kind,
+        status: r.status,
+        contentPreview,
+        reviewedBy: r.reviewedBy,
+        reviewReason: r.reviewReason,
+        createdAt: r.createdAt,
+        decidedAt: r.decidedAt,
+      };
+    }),
   });
 });
 
diff --git a/artifacts/api-server/src/routes/admin-relay.ts b/artifacts/api-server/src/routes/admin-relay.ts
index 4e33775..7671cec 100644
--- a/artifacts/api-server/src/routes/admin-relay.ts
+++ b/artifacts/api-server/src/routes/admin-relay.ts
@@ -16,32 +16,35 @@ import { Router, type Request, type Response, type NextFunction } from "express"
 import { makeLogger } from "../lib/logger.js";
 import { relayAccountService } from "../lib/relay-accounts.js";
 import { RELAY_ACCESS_LEVELS, type RelayAccessLevel, db, relayEventQueue, relayAccounts } from "@workspace/db";
-import { eq, gte, sql } from "drizzle-orm";
+import { and, eq, gte, inArray, sql } from "drizzle-orm";
 
 const logger = makeLogger("admin-relay");
 const router = Router();
 
-const ADMIN_SECRET = process.env["ADMIN_SECRET"] ?? "";
+// ADMIN_TOKEN is the canonical env var; ADMIN_SECRET is the backward-compat alias.
+const ADMIN_TOKEN = process.env["ADMIN_TOKEN"] ?? process.env["ADMIN_SECRET"] ?? "";
 const IS_PROD = process.env["NODE_ENV"] === "production";
 
-if (!ADMIN_SECRET) {
+if (!ADMIN_TOKEN) {
   if (IS_PROD) {
     logger.error(
-      "ADMIN_SECRET is not set in production — admin relay routes are unprotected. " +
-      "Set ADMIN_SECRET in the API server environment immediately.",
+      "ADMIN_TOKEN is not set in production — admin relay routes are unprotected. " +
+      "Set ADMIN_TOKEN in the API server environment immediately.",
     );
   } else {
-    logger.warn("ADMIN_SECRET not set — admin relay routes accept local-only requests (dev mode)");
+    logger.warn("ADMIN_TOKEN not set — admin relay routes accept local-only requests (dev mode)");
   }
 }
 
 // ── Admin auth middleware ──────────────────────────────────────────────────────
+// Shared by all admin-relay*.ts routes. Token is matched against ADMIN_TOKEN
+// (env var), falling back to localhost-only in dev when no token is set.
 
-function requireAdmin(req: Request, res: Response, next: NextFunction): void {
-  if (ADMIN_SECRET) {
+export function requireAdmin(req: Request, res: Response, next: NextFunction): void {
+  if (ADMIN_TOKEN) {
     const authHeader = req.headers["authorization"] ?? "";
     const token = authHeader.startsWith("Bearer ") ? authHeader.slice(7).trim() : "";
-    if (token !== ADMIN_SECRET) {
+    if (token !== ADMIN_TOKEN) {
       res.status(401).json({ error: "Unauthorized" });
       return;
     }
@@ -49,7 +52,7 @@ function requireAdmin(req: Request, res: Response, next: NextFunction): void {
     const ip = req.ip ?? "";
     const isLocal = ip === "127.0.0.1" || ip === "::1" || ip === "::ffff:127.0.0.1";
     if (!isLocal) {
-      logger.warn("admin-relay: no secret configured, rejecting non-local call", { ip });
+      logger.warn("admin-relay: no token configured, rejecting non-local call", { ip });
       res.status(401).json({ error: "Unauthorized" });
       return;
     }
@@ -64,7 +67,9 @@ router.get("/admin/relay/stats", requireAdmin, async (_req: Request, res: Respon
   const todayStart = new Date();
   todayStart.setUTCHours(0, 0, 0, 0);
 
-  const [queueCounts, accountCount, approvedToday] = await Promise.all([
+  const STRFRY_URL = process.env["STRFRY_URL"] ?? "http://strfry:7777";
+
+  const [queueCounts, accountCount, approvedToday, strfryStats] = await Promise.all([
     db
       .select({ status: relayEventQueue.status, count: sql<number>`count(*)::int` })
       .from(relayEventQueue)
@@ -74,8 +79,24 @@ router.get("/admin/relay/stats", requireAdmin, async (_req: Request, res: Respon
       .select({ count: sql<number>`count(*)::int` })
       .from(relayEventQueue)
       .where(
-        gte(relayEventQueue.decidedAt, todayStart),
+        and(
+          inArray(relayEventQueue.status, ["approved", "auto_approved"]),
+          gte(relayEventQueue.decidedAt, todayStart),
+        ),
       ),
+    // Attempt to fetch live connection count from strfry's /stats endpoint.
+    // Strfry exposes /stats in some builds; gracefully return null if unavailable.
+    (async (): Promise<{ connections?: number } | null> => {
+      try {
+        const r = await fetch(`${STRFRY_URL}/stats`, {
+          signal: AbortSignal.timeout(2000),
+        });
+        if (!r.ok) return null;
+        return (await r.json()) as { connections?: number };
+      } catch {
+        return null;
+      }
+    })(),
   ]);
 
   const statusMap: Record<string, number> = {};
@@ -90,6 +111,7 @@ router.get("/admin/relay/stats", requireAdmin, async (_req: Request, res: Respon
     rejected: statusMap["rejected"] ?? 0,
     approvedToday: approvedToday[0]?.count ?? 0,
     totalAccounts: accountCount[0]?.count ?? 0,
+    liveConnections: strfryStats?.connections ?? null,
   });
 });
 
diff --git a/artifacts/api-server/src/routes/index.ts b/artifacts/api-server/src/routes/index.ts
index 0c19192..ed68a82 100644
--- a/artifacts/api-server/src/routes/index.ts
+++ b/artifacts/api-server/src/routes/index.ts
@@ -15,7 +15,6 @@ import estimateRouter from "./estimate.js";
 import relayRouter from "./relay.js";
 import adminRelayRouter from "./admin-relay.js";
 import adminRelayQueueRouter from "./admin-relay-queue.js";
-import adminRelayPanelRouter from "./admin-relay-panel.js";
 
 const router: IRouter = Router();
 
@@ -29,7 +28,6 @@ router.use(identityRouter);
 router.use(relayRouter);
 router.use(adminRelayRouter);
 router.use(adminRelayQueueRouter);
-router.use(adminRelayPanelRouter);
 router.use(demoRouter);
 router.use(testkitRouter);
 router.use(uiRouter);