From 2bb70f2956ff6f41b785b4011a0e313b89a61a43 Mon Sep 17 00:00:00 2001
From: Alexander Whitestone <alexpaynex@gmail.com>
Date: Sun, 22 Mar 2026 21:49:48 -0400
Subject: [PATCH] feat: wire Relay Admin panel into Matrix UI (#49)

Add a "RELAY ADMIN" button to the top action bar in the Matrix workshop
UI. The button is only visible when an admin token is stored in
localStorage (relay_admin_token), linking directly to the /admin/relay
dashboard. This completes the UI integration requirement from issue #49.

The admin panel itself (auth gate, queue tab, accounts tab, stats bar)
was already implemented in admin-relay-panel.ts and the supporting API
routes in admin-relay.ts and admin-relay-queue.ts.

Fixes #49

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 the-matrix/index.html | 28 ++++++++++++++++++++++++++++
 1 file changed, 28 insertions(+)

diff --git a/the-matrix/index.html b/the-matrix/index.html
index afffbc5..014b1e1 100644
--- a/the-matrix/index.html
+++ b/the-matrix/index.html
@@ -374,6 +374,24 @@
     }
     .panel-link:hover { color: #5577aa; }
 
+    /* ── Relay Admin button ───────────────────────────────────────────── */
+    #relay-admin-btn {
+      display: none;
+      font-family: 'Courier New', monospace; font-size: 11px; font-weight: bold;
+      color: #f7931a; background: rgba(40, 25, 5, 0.85); border: 1px solid #f7931a55;
+      padding: 7px 18px; cursor: pointer; letter-spacing: 2px;
+      box-shadow: 0 0 14px #f7931a22;
+      transition: background 0.15s, box-shadow 0.15s, color 0.15s;
+      border-radius: 2px;
+      min-height: 36px;
+      text-decoration: none;
+    }
+    #relay-admin-btn:hover, #relay-admin-btn:active {
+      background: rgba(60, 35, 8, 0.95);
+      box-shadow: 0 0 20px #f7931a44;
+      color: #ffb347;
+    }
+
     /* ── AR pulse animation ──────────────────────────────────────────── */
     @keyframes ar-pulse {
       0%, 100% { opacity: 0.6; transform: scale(1); }
@@ -514,6 +532,7 @@
   <div id="top-buttons">
     <button id="open-panel-btn">⚡ SUBMIT JOB</button>
     <button id="open-session-btn">⚡ FUND SESSION</button>
+    <a id="relay-admin-btn" href="/admin/relay">⚙ RELAY ADMIN</a>
   </div>
 
   <!-- ── Low balance notice (above input bar) ───────────────────────── -->
@@ -681,6 +700,15 @@
     <span class="recovery-text">GPU context lost — recovering...</span>
   </div>
 
+  <script>
+    // Show Relay Admin button if admin token is stored in localStorage
+    (function() {
+      if (localStorage.getItem('relay_admin_token')) {
+        var btn = document.getElementById('relay-admin-btn');
+        if (btn) btn.style.display = 'block';
+      }
+    })();
+  </script>
   <script type="module" src="./js/main.js"></script>
 </body>
 </html>
-- 
2.43.0