From ffa09fbea5f8c7c312e2c5e3452a0a9e30d34a8c Mon Sep 17 00:00:00 2001
From: Alexander Whitestone <alexpaynex@gmail.com>
Date: Sun, 12 Apr 2026 21:35:30 -0400
Subject: [PATCH] Add health dashboard page with real-time stats

---
 web/dashboard.html | 140 +++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 140 insertions(+)
 create mode 100644 web/dashboard.html
diff --git a/web/dashboard.html b/web/dashboard.html
new file mode 100644
index 00000000..8d263899
--- /dev/null
+++ b/web/dashboard.html
@@ -0,0 +1,140 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1">
+<title>MUD Bridge - Health Dashboard</title>
+<style>
+*{box-sizing:border-box;margin:0;padding:0}
+body{font-family:'Courier New',monospace;background:#1a1a2e;color:#e0e0e0;min-height:100vh;padding:24px}
+h1{color:#e94560;font-size:20px;margin-bottom:20px;text-align:center}
+.nav{text-align:center;margin-bottom:24px}
+.nav a{color:#533483;text-decoration:none;font-size:13px;margin:0 8px}
+.nav a:hover{color:#e94560}
+#status{font-size:13px;text-align:center;margin-bottom:20px;color:#a0a0a0}
+.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px;max-width:900px;margin:0 auto 24px}
+.card{background:#16213e;border:1px solid #0f3460;border-radius:8px;padding:20px;text-align:center}
+.card .label{font-size:12px;color:#a0a0a0;text-transform:uppercase;margin-bottom:8px}
+.card .value{font-size:32px;font-weight:bold;color:#e94560}
+.card .value.ok{color:#4ecca3}
+.card .value.warn{color:#f0a500}
+.card .value.err{color:#e94560}
+.card .sub{font-size:11px;color:#666;margin-top:4px}
+.panel{background:#16213e;border:1px solid #0f3460;border-radius:8px;max-width:900px;margin:0 auto 16px;padding:16px}
+.panel h3{color:#e94560;font-size:14px;margin-bottom:12px}
+table{width:100%;border-collapse:collapse;font-size:13px}
+th{text-align:left;color:#a0a0a0;padding:6px 8px;border-bottom:1px solid #0f3460;font-size:11px;text-transform:uppercase}
+td{padding:6px 8px;border-bottom:1px solid #0f346044}
+tr:last-child td{border-bottom:none}
+.badge{display:inline-block;padding:2px 8px;border-radius:10px;font-size:11px;font-weight:bold}
+.badge.active{background:#4ecca322;color:#4ecca3}
+.badge.idle{background:#f0a50022;color:#f0a500}
+</style>
+</head>
+<body>
+<h1>== MUD Bridge Health Dashboard ==</h1>
+<div class="nav"><a href="/">Chat</a> | <a href="/dashboard.html">Dashboard</a></div>
+<div id="status">Loading...</div>
+<div class="cards">
+  <div class="card"><div class="label">Bridge Status</div><div class="value" id="bridge-status">--</div><div class="sub" id="bridge-version"></div></div>
+  <div class="card"><div class="label">Uptime</div><div class="value" id="uptime">--</div><div class="sub" id="uptime-detail"></div></div>
+  <div class="card"><div class="label">Active Sessions</div><div class="value" id="sessions">--</div></div>
+  <div class="card"><div class="label">Rooms With Players</div><div class="value" id="rooms">--</div></div>
+  <div class="card"><div class="label">Total Messages</div><div class="value" id="messages">--</div></div>
+  <div class="card"><div class="label">Avg Latency</div><div class="value" id="latency">--</div><div class="sub">ms</div></div>
+</div>
+<div class="panel">
+  <h3>Active Sessions</h3>
+  <table><thead><tr><th>User</th><th>Room</th><th>Status</th><th>Messages</th><th>Latency</th><th>Connected</th></tr></thead><tbody id="session-list"><tr><td colspan="6">Loading...</td></tr></tbody></table>
+</div>
+<div class="panel">
+  <h3>Room Activity</h3>
+  <table><thead><tr><th>Room</th><th>Players</th><th>Messages</th></tr></thead><tbody id="room-list"><tr><td colspan="3">Loading...</td></tr></tbody></table>
+</div>
+<script>
+const API='http://127.0.0.1:4004';
+const $=id=>document.getElementById(id);
+let startTime=Date.now();
+
+function fmtUptime(ms){
+  const s=Math.floor(ms/1000),m=Math.floor(s/60),h=Math.floor(m/60),d=Math.floor(h/24);
+  if(d>0)return d+'d '+h%24+'h';
+  if(h>0)return h+'h '+m%60+'m';
+  if(m>0)return m+'m '+s%60+'s';
+  return s+'s';
+}
+
+function fmtDate(ts){return new Date(ts).toLocaleTimeString()}
+
+async function refresh(){
+  try{
+    const[health,sessions,stats]=await Promise.all([
+      fetch(API+'/bridge/health').then(r=>r.json()),
+      fetch(API+'/bridge/sessions').then(r=>r.json()),
+      fetch(API+'/bridge/stats').then(r=>r.json())
+    ]);
+
+    // Health
+    const healthy=health.status==='ok'||health.status==='healthy';
+    $('bridge-status').textContent=healthy?'OK':'DEGRADED';
+    $('bridge-status').className='value '+(healthy?'ok':'err');
+    $('bridge-version').textContent=health.version||'';
+    $('uptime').textContent=fmtUptime(health.uptime_ms||Date.now()-startTime);
+    $('uptime-detail').textContent='since '+fmtDate(Date.now()-(health.uptime_ms||0));
+
+    // Stats
+    $('sessions').textContent=stats.active_sessions||stats.sessions||0;
+    $('messages').textContent=stats.total_messages||stats.messages||0;
+    $('latency').textContent=Math.round(stats.avg_latency_ms||stats.latency||0);
+
+    // Sessions table
+    const sList=sessions.sessions||sessions||[];
+    if(Array.isArray(sList)&&sList.length>0){
+      $('session-list').innerHTML=sList.map(s=>`<tr>
+        <td>${esc(s.username||s.user||'?')}</td>
+        <td>${esc(s.room||'?')}</td>
+        <td><span class="badge active">Active</span></td>
+        <td>${s.message_count||s.messages||0}</td>
+        <td>${Math.round(s.latency_ms||0)}ms</td>
+        <td>${fmtDate(s.connected_at||s.created||Date.now())}</td>
+      </tr>`).join('');
+    }else{
+      $('session-list').innerHTML='<tr><td colspan="6" style="color:#a0a0a0">No active sessions</td></tr>';
+    }
+
+    // Room activity - aggregate from sessions
+    const roomMap={};
+    if(Array.isArray(sList)){
+      sList.forEach(s=>{
+        const r=s.room||'?';
+        if(!roomMap[r])roomMap[r]={players:0,messages:0};
+        roomMap[r].players++;
+        roomMap[r].messages+=(s.message_count||s.messages||0);
+      });
+    }
+    const rooms=Object.entries(roomMap);
+    $('rooms').textContent=rooms.length;
+    if(rooms.length>0){
+      $('room-list').innerHTML=rooms.map(([name,data])=>`<tr>
+        <td>${esc(name)}</td>
+        <td>${data.players}</td>
+        <td>${data.messages}</td>
+      </tr>`).join('');
+    }else{
+      $('room-list').innerHTML='<tr><td colspan="3" style="color:#a0a0a0">No rooms active</td></tr>';
+    }
+
+    $('status').textContent='Last updated: '+new Date().toLocaleTimeString();
+  }catch(e){
+    $('status').textContent='Error: '+e.message;
+    $('bridge-status').textContent='ERR';
+    $('bridge-status').className='value err';
+  }
+}
+
+function esc(s){const d=document.createElement('div');d.textContent=s;return d.innerHTML}
+
+refresh();
+setInterval(refresh,5000);
+</script>
+</body>
+</html>
\ No newline at end of file
