From baab24f8b192b0fae75cd13df6b59b0e7a0ed01a Mon Sep 17 00:00:00 2001
From: Seth <seth@sethpc.xyz>
Date: Sun, 22 Mar 2026 04:13:00 -0400
Subject: [PATCH] =?UTF-8?q?feat(oracle):=20HTML5=20Canvas=20frontend=20?=
 =?UTF-8?q?=E2=80=94=20Mind's=20Eye=20viewport?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 oracle-bot/public/index.html | 801 +++++++++++++++++++++++++++++++++++
 1 file changed, 801 insertions(+)
 create mode 100644 oracle-bot/public/index.html
diff --git a/oracle-bot/public/index.html b/oracle-bot/public/index.html
new file mode 100644
index 0000000..f3bdb3f
--- /dev/null
+++ b/oracle-bot/public/index.html
@@ -0,0 +1,801 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>MORTDECAI — MIND'S EYE</title>
+<link href="https://fonts.googleapis.com/css2?family=Rajdhani:wght@400;500;600;700&display=swap" rel="stylesheet">
+<style>
+*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
+
+:root {
+  --bg: #1a1a2e;
+  --bg-panel: #16162a;
+  --bg-darker: #111122;
+  --orange: #D35400;
+  --blue: #2196F3;
+  --green: #4CAF50;
+  --red: #E74C3C;
+  --text: #E0E0E0;
+  --text-dim: #888;
+  --border: #2a2a4a;
+  --purple: #9C27B0;
+}
+
+html, body {
+  width: 100%; height: 100%;
+  overflow: hidden;
+  background: var(--bg);
+  color: var(--text);
+  font-family: 'Rajdhani', sans-serif;
+  font-weight: 500;
+}
+
+#app {
+  display: grid;
+  grid-template-columns: 1fr 280px;
+  grid-template-rows: 1fr 56px;
+  width: 100vw; height: 100vh;
+}
+
+/* ── World Map Panel ── */
+#map-panel {
+  grid-column: 1; grid-row: 1;
+  position: relative;
+  overflow: hidden;
+  background: var(--bg-darker);
+  border-right: 1px solid var(--border);
+  border-bottom: 1px solid var(--border);
+}
+
+#map-panel canvas {
+  display: block;
+  width: 100%; height: 100%;
+}
+
+#map-title {
+  position: absolute;
+  top: 12px; left: 16px;
+  font-size: 14px;
+  font-weight: 700;
+  letter-spacing: 2px;
+  text-transform: uppercase;
+  color: var(--text-dim);
+  pointer-events: none;
+  user-select: none;
+}
+
+#header-bar {
+  position: absolute;
+  top: 0; left: 0; right: 0;
+  height: 40px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: linear-gradient(180deg, rgba(26,26,46,0.95) 0%, rgba(26,26,46,0) 100%);
+  pointer-events: none;
+  z-index: 5;
+}
+
+#header-bar h1 {
+  font-size: 16px;
+  font-weight: 700;
+  letter-spacing: 4px;
+  color: var(--orange);
+  text-shadow: 0 0 20px rgba(211,84,0,0.3);
+}
+
+/* ── Tool Trace Panel ── */
+#trace-panel {
+  grid-column: 2; grid-row: 1 / 3;
+  background: var(--bg-panel);
+  border-left: 1px solid var(--border);
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+#trace-header {
+  padding: 14px 16px 10px;
+  font-size: 13px;
+  font-weight: 700;
+  letter-spacing: 2px;
+  text-transform: uppercase;
+  color: var(--text-dim);
+  border-bottom: 1px solid var(--border);
+  flex-shrink: 0;
+}
+
+#trace-list {
+  flex: 1;
+  overflow-y: auto;
+  padding: 8px 0;
+}
+
+#trace-list::-webkit-scrollbar { width: 4px; }
+#trace-list::-webkit-scrollbar-track { background: transparent; }
+#trace-list::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }
+
+.trace-entry {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 8px 16px;
+  font-size: 13px;
+  border-bottom: 1px solid rgba(42,42,74,0.5);
+  animation: traceIn 0.3s ease-out;
+}
+
+@keyframes traceIn {
+  from { opacity: 0; transform: translateX(20px); }
+  to { opacity: 1; transform: translateX(0); }
+}
+
+.trace-dot {
+  width: 8px; height: 8px;
+  border-radius: 50%;
+  flex-shrink: 0;
+}
+
+.trace-dot.ok { background: var(--green); box-shadow: 0 0 6px rgba(76,175,80,0.5); }
+.trace-dot.fail { background: var(--red); box-shadow: 0 0 6px rgba(231,76,60,0.5); }
+
+.trace-tool {
+  flex: 1;
+  font-weight: 600;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.trace-tool.rcon { color: var(--orange); }
+.trace-tool.world { color: var(--blue); }
+.trace-tool.journal { color: var(--purple); }
+.trace-tool.script { color: var(--green); }
+.trace-tool.memory { color: #FF9800; }
+.trace-tool.other { color: var(--text-dim); }
+
+.trace-step {
+  font-size: 11px;
+  color: var(--text-dim);
+  flex-shrink: 0;
+}
+
+.trace-time {
+  font-size: 10px;
+  color: rgba(136,136,136,0.6);
+  flex-shrink: 0;
+  font-variant-numeric: tabular-nums;
+}
+
+#trace-footer {
+  padding: 10px 16px;
+  font-size: 12px;
+  color: var(--text-dim);
+  border-top: 1px solid var(--border);
+  flex-shrink: 0;
+  text-align: center;
+}
+
+/* ── Status Bar ── */
+#status-bar {
+  grid-column: 1; grid-row: 2;
+  background: var(--bg-panel);
+  border-top: 1px solid var(--border);
+  display: flex;
+  align-items: center;
+  padding: 0 20px;
+  gap: 24px;
+  font-size: 13px;
+  overflow: hidden;
+}
+
+.status-item {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  white-space: nowrap;
+}
+
+.status-label {
+  color: var(--text-dim);
+  font-weight: 600;
+  text-transform: uppercase;
+  font-size: 11px;
+  letter-spacing: 1px;
+}
+
+.status-dot {
+  width: 8px; height: 8px;
+  border-radius: 50%;
+  flex-shrink: 0;
+}
+
+.status-dot.idle { background: #555; }
+.status-dot.god { background: var(--orange); box-shadow: 0 0 8px rgba(211,84,0,0.6); }
+.status-dot.sudo { background: var(--blue); box-shadow: 0 0 8px rgba(33,150,243,0.6); }
+.status-dot.connected { background: var(--green); box-shadow: 0 0 6px rgba(76,175,80,0.5); }
+.status-dot.disconnected { background: var(--red); box-shadow: 0 0 6px rgba(231,76,60,0.5); }
+
+#status-mode { font-weight: 700; }
+#status-player { color: var(--text); font-weight: 600; }
+#status-pos { color: var(--text-dim); font-variant-numeric: tabular-nums; }
+#status-players-count { color: var(--text); }
+
+/* ── Reconnect Overlay ── */
+#reconnect-overlay {
+  position: fixed;
+  inset: 0;
+  background: rgba(17,17,34,0.92);
+  display: none;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+  gap: 16px;
+  z-index: 100;
+}
+
+#reconnect-overlay.visible { display: flex; }
+
+#reconnect-overlay .spinner {
+  width: 40px; height: 40px;
+  border: 3px solid var(--border);
+  border-top-color: var(--orange);
+  border-radius: 50%;
+  animation: spin 1s linear infinite;
+}
+
+@keyframes spin { to { transform: rotate(360deg); } }
+
+#reconnect-overlay .label {
+  font-size: 16px;
+  font-weight: 700;
+  letter-spacing: 2px;
+  color: var(--text-dim);
+}
+
+/* ── Idle pulse ── */
+@keyframes idlePulse {
+  0%, 100% { opacity: 0.4; }
+  50% { opacity: 0.7; }
+}
+
+#idle-eye {
+  position: absolute;
+  top: 50%; left: 50%;
+  transform: translate(-50%, -50%);
+  pointer-events: none;
+  z-index: 2;
+  text-align: center;
+  animation: idlePulse 4s ease-in-out infinite;
+  transition: opacity 0.6s;
+}
+
+#idle-eye.hidden { opacity: 0; pointer-events: none; }
+
+#idle-eye .eye-icon {
+  font-size: 64px;
+  color: var(--text-dim);
+  line-height: 1;
+}
+
+#idle-eye .eye-label {
+  font-size: 12px;
+  letter-spacing: 3px;
+  color: var(--text-dim);
+  margin-top: 8px;
+}
+
+/* ── Responsive ── */
+@media (max-width: 700px) {
+  #app {
+    grid-template-columns: 1fr;
+    grid-template-rows: 1fr 200px 48px;
+  }
+  #trace-panel { grid-column: 1; grid-row: 2; border-left: none; border-top: 1px solid var(--border); }
+  #status-bar { grid-column: 1; grid-row: 3; gap: 12px; padding: 0 12px; font-size: 11px; }
+}
+</style>
+</head>
+<body>
+
+<div id="app">
+  <!-- World Map -->
+  <div id="map-panel">
+    <div id="header-bar"><h1>MORTDECAI &mdash; MIND'S EYE</h1></div>
+    <canvas id="world-canvas"></canvas>
+    <div id="idle-eye">
+      <div class="eye-icon">&#9678;</div>
+      <div class="eye-label">AWAITING VISION</div>
+    </div>
+  </div>
+
+  <!-- Tool Trace -->
+  <div id="trace-panel">
+    <div id="trace-header">TOOL TRACE</div>
+    <div id="trace-list"></div>
+    <div id="trace-footer">No active session</div>
+  </div>
+
+  <!-- Status Bar -->
+  <div id="status-bar">
+    <div class="status-item">
+      <span class="status-dot idle" id="mode-dot"></span>
+      <span class="status-label">Mode</span>
+      <span id="status-mode">IDLE</span>
+    </div>
+    <div class="status-item">
+      <span class="status-label">Player</span>
+      <span id="status-player">&mdash;</span>
+    </div>
+    <div class="status-item">
+      <span class="status-label">Pos</span>
+      <span id="status-pos">&mdash;</span>
+    </div>
+    <div class="status-item">
+      <span class="status-dot disconnected" id="conn-dot"></span>
+      <span id="status-conn">Offline</span>
+    </div>
+    <div class="status-item">
+      <span class="status-label">Players</span>
+      <span id="status-players-count">0</span>
+    </div>
+  </div>
+</div>
+
+<!-- Reconnect Overlay -->
+<div id="reconnect-overlay">
+  <div class="spinner"></div>
+  <div class="label">RECONNECTING...</div>
+</div>
+
+<script>
+'use strict';
+
+// ── Block color map ──
+const BLOCK_COLORS = {
+  stone: '#808080', cobblestone: '#6B6B6B', deepslate: '#4A4A4A',
+  dirt: '#8B6914', grass_block: '#4CAF50', sand: '#F4E4A0',
+  gravel: '#A0A0A0', oak_planks: '#BC8F4F', oak_log: '#6B4226',
+  spruce_planks: '#5C3A1E', birch_planks: '#D4C78F',
+  water: '#2196F3', lava: '#FF5722',
+  redstone_wire: '#FF0000', redstone_torch: '#FF4444',
+  diamond_ore: '#4FC3F7', iron_ore: '#D4A574', gold_ore: '#FFD54F',
+  coal_ore: '#333333', bedrock: '#1A1A1A', obsidian: '#1A0A2E',
+  glass: 'rgba(224,247,250,0.3)', torch: '#FFEB3B',
+  chest: '#8D6E3F', crafting_table: '#B8860B', furnace: '#888888',
+  _default: '#9E9E9E',
+};
+
+// ── Entity colors ──
+const HOSTILE_MOBS = new Set([
+  'zombie', 'skeleton', 'creeper', 'spider', 'enderman', 'witch',
+  'blaze', 'ghast', 'slime', 'phantom', 'drowned', 'husk', 'stray',
+  'pillager', 'vindicator', 'evoker', 'ravager', 'warden', 'wither',
+]);
+const PASSIVE_MOBS = new Set([
+  'cow', 'pig', 'sheep', 'chicken', 'horse', 'donkey', 'mule',
+  'cat', 'dog', 'wolf', 'rabbit', 'villager', 'iron_golem',
+  'bee', 'parrot', 'turtle', 'axolotl', 'frog', 'sniffer',
+]);
+
+// ── State ──
+const state = {
+  mode: 'idle',
+  activePlayer: null,
+  connected: false,
+  players: [],
+  world: { time: 0, isRaining: false },
+  blocks: [],
+  entities: [],
+  center: { x: 0, y: 0, z: 0 },
+  traces: [],
+  traceStep: null,
+  traceTotal: null,
+  sessionId: null,
+  dirty: true,
+  hasWorldData: false,
+  scanHighlights: [],   // {x, z, age}
+  lastHeartbeat: 0,
+};
+
+const TILE = 8;
+const MAX_TRACES = 50;
+
+// ── DOM refs ──
+const canvas = document.getElementById('world-canvas');
+const ctx = canvas.getContext('2d');
+const traceList = document.getElementById('trace-list');
+const traceFooter = document.getElementById('trace-footer');
+const modeDot = document.getElementById('mode-dot');
+const connDot = document.getElementById('conn-dot');
+const statusMode = document.getElementById('status-mode');
+const statusPlayer = document.getElementById('status-player');
+const statusPos = document.getElementById('status-pos');
+const statusConn = document.getElementById('status-conn');
+const statusPlayersCount = document.getElementById('status-players-count');
+const reconnectOverlay = document.getElementById('reconnect-overlay');
+const idleEye = document.getElementById('idle-eye');
+
+// ── Canvas resize ──
+function resizeCanvas() {
+  const panel = document.getElementById('map-panel');
+  const dpr = window.devicePixelRatio || 1;
+  canvas.width = panel.clientWidth * dpr;
+  canvas.height = panel.clientHeight * dpr;
+  ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
+  state.dirty = true;
+}
+window.addEventListener('resize', resizeCanvas);
+resizeCanvas();
+
+// ── Mode colors ──
+function getModeAccent() {
+  if (state.mode === 'god') return '#D35400';
+  if (state.mode === 'sudo') return '#2196F3';
+  return '#555';
+}
+
+function getModeGlow() {
+  if (state.mode === 'god') return 'rgba(211,84,0,0.15)';
+  if (state.mode === 'sudo') return 'rgba(33,150,243,0.1)';
+  return 'transparent';
+}
+
+// ── Render world ──
+function renderWorld() {
+  const w = canvas.width / (window.devicePixelRatio || 1);
+  const h = canvas.height / (window.devicePixelRatio || 1);
+
+  // Background
+  ctx.fillStyle = '#111122';
+  ctx.fillRect(0, 0, w, h);
+
+  if (!state.hasWorldData) return;
+
+  // Center offset
+  const cx = Math.floor(w / 2);
+  const cz = Math.floor(h / 2);
+  const refX = state.center.x;
+  const refZ = state.center.z;
+
+  // Mode glow overlay
+  const glowColor = getModeGlow();
+  if (glowColor !== 'transparent') {
+    const grad = ctx.createRadialGradient(cx, cz, 0, cx, cz, Math.max(w, h) * 0.5);
+    grad.addColorStop(0, glowColor);
+    grad.addColorStop(1, 'transparent');
+    ctx.fillStyle = grad;
+    ctx.fillRect(0, 0, w, h);
+  }
+
+  // Grid lines (sudo mode only)
+  if (state.mode === 'sudo') {
+    ctx.strokeStyle = 'rgba(33,150,243,0.06)';
+    ctx.lineWidth = 0.5;
+    const offsetX = cx % TILE;
+    const offsetZ = cz % TILE;
+    for (let x = offsetX; x < w; x += TILE) {
+      ctx.beginPath(); ctx.moveTo(x, 0); ctx.lineTo(x, h); ctx.stroke();
+    }
+    for (let z = offsetZ; z < h; z += TILE) {
+      ctx.beginPath(); ctx.moveTo(0, z); ctx.lineTo(w, z); ctx.stroke();
+    }
+  }
+
+  // Blocks
+  for (const block of state.blocks) {
+    const sx = cx + (block.x - refX) * TILE;
+    const sz = cz + (block.z - refZ) * TILE;
+    if (sx < -TILE || sx > w + TILE || sz < -TILE || sz > h + TILE) continue;
+
+    const btype = block.type ? block.type.replace('minecraft:', '') : '_default';
+    ctx.fillStyle = BLOCK_COLORS[btype] || BLOCK_COLORS._default;
+    ctx.fillRect(sx - TILE / 2, sz - TILE / 2, TILE, TILE);
+  }
+
+  // Scan highlights (pulse)
+  const now = performance.now();
+  for (let i = state.scanHighlights.length - 1; i >= 0; i--) {
+    const sh = state.scanHighlights[i];
+    const age = now - sh.born;
+    if (age > 3000) { state.scanHighlights.splice(i, 1); continue; }
+    const alpha = 0.3 * (1 - age / 3000);
+    const accent = state.mode === 'sudo' ? `rgba(33,150,243,${alpha})` : `rgba(211,84,0,${alpha})`;
+    const sx = cx + (sh.x - refX) * TILE;
+    const sz = cz + (sh.z - refZ) * TILE;
+    ctx.fillStyle = accent;
+    ctx.fillRect(sx - TILE / 2, sz - TILE / 2, TILE, TILE);
+  }
+
+  // Entities
+  for (const ent of state.entities) {
+    const sx = cx + (ent.x - refX) * TILE;
+    const sz = cz + (ent.z - refZ) * TILE;
+    if (sx < -6 || sx > w + 6 || sz < -6 || sz > h + 6) continue;
+
+    const etype = (ent.type || '').replace('minecraft:', '');
+    let color = '#FFD54F'; // default yellow
+    if (HOSTILE_MOBS.has(etype)) color = '#E74C3C';
+    else if (PASSIVE_MOBS.has(etype)) color = '#4CAF50';
+
+    ctx.beginPath();
+    ctx.arc(sx, sz, 3, 0, Math.PI * 2);
+    ctx.fillStyle = color;
+    ctx.fill();
+
+    // Entity type label (small)
+    if (etype) {
+      ctx.font = '9px Rajdhani';
+      ctx.fillStyle = 'rgba(224,224,224,0.5)';
+      ctx.textAlign = 'center';
+      ctx.fillText(etype, sx, sz - 6);
+    }
+  }
+
+  // Players
+  for (const p of state.players) {
+    const sx = cx + (p.x - refX) * TILE;
+    const sz = cz + (p.z - refZ) * TILE;
+
+    const isActive = p.name === state.activePlayer;
+
+    // Glow for active player
+    if (isActive) {
+      ctx.beginPath();
+      ctx.arc(sx, sz, 10, 0, Math.PI * 2);
+      const accent = getModeAccent();
+      ctx.fillStyle = accent.replace(')', ',0.2)').replace('rgb', 'rgba');
+      ctx.fill();
+    }
+
+    // Dot
+    ctx.beginPath();
+    ctx.arc(sx, sz, isActive ? 5 : 4, 0, Math.PI * 2);
+    ctx.fillStyle = isActive ? '#FFFFFF' : '#CCCCCC';
+    ctx.fill();
+    ctx.strokeStyle = isActive ? getModeAccent() : '#666';
+    ctx.lineWidth = 1.5;
+    ctx.stroke();
+
+    // Name label
+    ctx.font = isActive ? 'bold 12px Rajdhani' : '11px Rajdhani';
+    ctx.fillStyle = isActive ? '#FFFFFF' : '#AAAAAA';
+    ctx.textAlign = 'center';
+    ctx.fillText(p.name, sx, sz - 10);
+  }
+
+  // Compass indicator
+  ctx.font = 'bold 11px Rajdhani';
+  ctx.fillStyle = 'rgba(224,224,224,0.3)';
+  ctx.textAlign = 'center';
+  ctx.fillText('N', cx, 16);
+  ctx.fillText('S', cx, h - 8);
+  ctx.textAlign = 'left';
+  ctx.fillText('W', 8, cz + 4);
+  ctx.textAlign = 'right';
+  ctx.fillText('E', w - 8, cz + 4);
+
+  // Coordinate display
+  ctx.font = '10px Rajdhani';
+  ctx.fillStyle = 'rgba(224,224,224,0.25)';
+  ctx.textAlign = 'left';
+  ctx.fillText(`Center: ${refX}, ${state.center.y}, ${refZ}`, 12, h - 10);
+}
+
+// ── Render loop ──
+function renderLoop() {
+  if (state.dirty || state.scanHighlights.length > 0) {
+    renderWorld();
+    state.dirty = false;
+  }
+  requestAnimationFrame(renderLoop);
+}
+requestAnimationFrame(renderLoop);
+
+// ── Update status bar ──
+function updateStatus() {
+  // Mode
+  modeDot.className = 'status-dot ' + state.mode;
+  statusMode.textContent = state.mode.toUpperCase();
+  statusMode.style.color = getModeAccent();
+
+  // Player
+  statusPlayer.textContent = state.activePlayer || '\u2014';
+
+  // Position
+  const ap = state.players.find(p => p.name === state.activePlayer);
+  if (ap) {
+    statusPos.textContent = `(${Math.round(ap.x)}, ${Math.round(ap.y)}, ${Math.round(ap.z)})`;
+  } else {
+    statusPos.textContent = '\u2014';
+  }
+
+  // Connection
+  connDot.className = 'status-dot ' + (state.connected ? 'connected' : 'disconnected');
+  statusConn.textContent = state.connected ? 'Online' : 'Offline';
+
+  // Player count
+  statusPlayersCount.textContent = state.players.length;
+
+  // Idle eye
+  if (state.mode === 'idle' && !state.hasWorldData) {
+    idleEye.classList.remove('hidden');
+  } else {
+    idleEye.classList.add('hidden');
+  }
+
+  // Title accent
+  const titleH1 = document.querySelector('#header-bar h1');
+  if (state.mode === 'sudo') {
+    titleH1.style.color = '#2196F3';
+    titleH1.style.textShadow = '0 0 20px rgba(33,150,243,0.3)';
+  } else {
+    titleH1.style.color = '#D35400';
+    titleH1.style.textShadow = '0 0 20px rgba(211,84,0,0.3)';
+  }
+}
+
+// ── Trace panel ──
+function getToolClass(tool) {
+  if (!tool) return 'other';
+  if (tool.startsWith('rcon')) return 'rcon';
+  if (tool.startsWith('world')) return 'world';
+  if (tool.startsWith('journal')) return 'journal';
+  if (tool.startsWith('script')) return 'script';
+  if (tool.startsWith('memory')) return 'memory';
+  return 'other';
+}
+
+function addTrace(data) {
+  state.traces.unshift(data);
+  if (state.traces.length > MAX_TRACES) state.traces.pop();
+
+  const entry = document.createElement('div');
+  entry.className = 'trace-entry';
+
+  const dot = document.createElement('span');
+  dot.className = 'trace-dot ' + (data.ok !== false ? 'ok' : 'fail');
+
+  const tool = document.createElement('span');
+  tool.className = 'trace-tool ' + getToolClass(data.tool);
+  tool.textContent = data.tool || 'unknown';
+
+  const step = document.createElement('span');
+  step.className = 'trace-step';
+  step.textContent = data.step != null ? `#${data.step}` : '';
+
+  const time = document.createElement('span');
+  time.className = 'trace-time';
+  const d = data.ts ? new Date(data.ts) : new Date();
+  time.textContent = d.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit', second: '2-digit' });
+
+  entry.appendChild(dot);
+  entry.appendChild(tool);
+  entry.appendChild(step);
+  entry.appendChild(time);
+
+  traceList.insertBefore(entry, traceList.firstChild);
+
+  // Trim DOM
+  while (traceList.children.length > MAX_TRACES) {
+    traceList.removeChild(traceList.lastChild);
+  }
+
+  // Update footer
+  if (data.session_id) state.sessionId = data.session_id;
+  const modeLabel = data.mode ? data.mode.toUpperCase() : state.mode.toUpperCase();
+  const playerLabel = data.player || state.activePlayer || '?';
+  traceFooter.textContent = `${modeLabel} | ${playerLabel} | step ${data.step || '?'}`;
+}
+
+// ── WebSocket ──
+let ws = null;
+let reconnectDelay = 1000;
+const MAX_RECONNECT_DELAY = 30000;
+
+function connectWS() {
+  const proto = location.protocol === 'https:' ? 'wss' : 'ws';
+  ws = new WebSocket(`${proto}://${location.host}/ws`);
+
+  ws.onopen = function() {
+    state.connected = true;
+    reconnectDelay = 1000;
+    reconnectOverlay.classList.remove('visible');
+    updateStatus();
+  };
+
+  ws.onclose = function() {
+    state.connected = false;
+    updateStatus();
+    reconnectOverlay.classList.add('visible');
+    setTimeout(connectWS, reconnectDelay);
+    reconnectDelay = Math.min(reconnectDelay * 2, MAX_RECONNECT_DELAY);
+  };
+
+  ws.onerror = function() {
+    ws.close();
+  };
+
+  ws.onmessage = function(evt) {
+    let msg;
+    try { msg = JSON.parse(evt.data); } catch { return; }
+
+    switch (msg.type) {
+      case 'heartbeat':
+        state.mode = msg.mode || 'idle';
+        state.activePlayer = msg.activePlayer || null;
+        state.players = msg.players || [];
+        if (msg.world) {
+          state.world = msg.world;
+        }
+        state.lastHeartbeat = Date.now();
+        state.dirty = true;
+        updateStatus();
+        break;
+
+      case 'world':
+        state.mode = msg.mode || state.mode;
+        state.activePlayer = msg.activePlayer || state.activePlayer;
+        state.center = msg.center || state.center;
+        state.blocks = msg.blocks || [];
+        state.entities = msg.entities || [];
+        state.players = msg.players || state.players;
+        state.hasWorldData = true;
+        state.dirty = true;
+
+        // Add scan highlight on all new block positions
+        const born = performance.now();
+        const seen = new Set();
+        for (const b of state.blocks) {
+          const key = b.x + ',' + b.z;
+          if (!seen.has(key)) {
+            seen.add(key);
+            state.scanHighlights.push({ x: b.x, z: b.z, born });
+          }
+        }
+
+        updateStatus();
+        break;
+
+      case 'trace':
+        addTrace(msg);
+        if (msg.mode) state.mode = msg.mode;
+        if (msg.player) state.activePlayer = msg.player;
+        state.dirty = true;
+        updateStatus();
+        break;
+
+      case 'mode':
+        state.mode = msg.mode || 'idle';
+        if (msg.player) state.activePlayer = msg.player;
+        state.dirty = true;
+        updateStatus();
+        break;
+
+      case 'status':
+        if (msg.connected !== undefined) {
+          state.connected = msg.connected;
+          updateStatus();
+        }
+        break;
+    }
+  };
+}
+
+connectWS();
+
+// ── Idle heartbeat timeout → revert to idle ──
+setInterval(function() {
+  if (state.lastHeartbeat && Date.now() - state.lastHeartbeat > 15000) {
+    if (state.mode !== 'idle') {
+      state.mode = 'idle';
+      state.dirty = true;
+      updateStatus();
+    }
+  }
+}, 5000);
+
+</script>
+</body>
+</html>
