feat(soak): dashboard status grid UI

Static HTML page served by DashboardServer. Renders the 2×2 room
grid with progress bars and player tiles, subscribes to WS events,
updates tiles live. Click-to-watch modal is wired but receives
frames once the CDP screencaster ships in Task 22.

Adds escapeHtml() on all user-controlled strings (roomId, player
key) — not strictly needed for our trusted bot traffic but cheap
XSS hardening against future scenarios that accept user input.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

tests/soak/dashboard/dashboard.css

@@ -0,0 +1,173 @@
+:root {
+  --bg: #0a0e16;
+  --panel: #0e1420;
+  --border: #1a2230;
+  --text: #c8d4e4;
+  --accent: #7fbaff;
+  --good: #6fd08f;
+  --warn: #ffb84d;
+  --err: #ff5c6c;
+  --muted: #556577;
+}
+
+* { box-sizing: border-box; }
+
+body {
+  margin: 0;
+  font-family: -apple-system, system-ui, 'SF Mono', Consolas, monospace;
+  background: var(--bg);
+  color: var(--text);
+}
+
+.dash-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 12px 20px;
+  background: linear-gradient(135deg, #0f1823, #0a1018);
+  border-bottom: 1px solid var(--border);
+}
+.dash-header h1 { margin: 0; font-size: 16px; color: var(--accent); }
+.dash-header .meta { font-size: 11px; color: var(--muted); }
+.dash-header .meta span + span { margin-left: 12px; }
+
+.meta-bar {
+  display: flex;
+  gap: 24px;
+  padding: 10px 20px;
+  background: #0c131d;
+  border-bottom: 1px solid var(--border);
+  font-size: 12px;
+}
+.meta-bar .stat .label { color: var(--muted); margin-right: 6px; }
+.meta-bar .stat span:last-child { color: #fff; font-weight: 600; }
+
+.rooms {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 1px;
+  background: var(--border);
+}
+.room {
+  background: var(--panel);
+  padding: 14px 18px;
+  min-height: 180px;
+}
+.room-title {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 10px;
+}
+.room-title .name { font-size: 13px; color: var(--accent); font-weight: 600; }
+.room-title .phase {
+  font-size: 10px;
+  padding: 2px 8px;
+  border-radius: 10px;
+  background: #1a3a2a;
+  color: var(--good);
+}
+.room-title .phase.lobby { background: #3a2a1a; color: var(--warn); }
+.room-title .phase.err { background: #3a1a1a; color: var(--err); }
+
+.players {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 4px;
+  font-size: 11px;
+  margin-bottom: 8px;
+}
+.player {
+  display: flex;
+  justify-content: space-between;
+  padding: 4px 8px;
+  background: #0a0f18;
+  border-radius: 3px;
+  cursor: pointer;
+  border: 1px solid transparent;
+}
+.player:hover { border-color: var(--accent); }
+.player.active {
+  background: #1a2a40;
+  border-left: 2px solid var(--accent);
+}
+.player .score { color: var(--muted); }
+
+.progress-bar {
+  height: 4px;
+  background: var(--border);
+  border-radius: 2px;
+  overflow: hidden;
+  margin-top: 6px;
+}
+.progress-fill {
+  height: 100%;
+  background: linear-gradient(90deg, var(--accent), var(--good));
+  transition: width 0.3s;
+}
+.room-meta {
+  font-size: 10px;
+  color: var(--muted);
+  display: flex;
+  gap: 12px;
+  margin-top: 6px;
+}
+
+.log {
+  border-top: 1px solid var(--border);
+  background: #080c13;
+  max-height: 160px;
+  overflow-y: auto;
+}
+.log .log-header {
+  padding: 6px 20px;
+  font-size: 10px;
+  text-transform: uppercase;
+  color: var(--muted);
+  border-bottom: 1px solid var(--border);
+}
+.log ul { list-style: none; margin: 0; padding: 4px 20px; font-size: 10px; }
+.log li { line-height: 1.5; font-family: monospace; color: var(--muted); }
+.log li.warn { color: var(--warn); }
+.log li.error { color: var(--err); }
+
+.video-modal {
+  position: fixed;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.85);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 100;
+}
+.video-modal.hidden { display: none; }
+.video-modal-content {
+  background: var(--panel);
+  border: 1px solid var(--border);
+  border-radius: 6px;
+  padding: 16px;
+  max-width: 90vw;
+  max-height: 90vh;
+}
+.video-modal-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 12px;
+  color: var(--accent);
+  font-size: 13px;
+}
+.video-modal-header button {
+  background: var(--border);
+  color: var(--text);
+  border: none;
+  padding: 4px 12px;
+  border-radius: 3px;
+  cursor: pointer;
+}
+#video-frame {
+  display: block;
+  max-width: 100%;
+  max-height: 70vh;
+  border: 1px solid var(--border);
+}

tests/soak/dashboard/dashboard.js

@@ -0,0 +1,166 @@
+// tests/soak/dashboard/dashboard.js
+// Dashboard client: connects to the runner's WS server, renders the
+// room grid, updates tiles on each room_state message, appends logs,
+// handles click-to-watch for live screencasts (Task 23 wires frames).
+(() => {
+  const ws = new WebSocket(`ws://${location.host}`);
+  const roomsEl = document.getElementById('rooms');
+  const logEl = document.getElementById('log-list');
+  const wsStatusEl = document.getElementById('ws-status');
+  const metricGames = document.getElementById('metric-games');
+  const metricMoves = document.getElementById('metric-moves');
+  const metricErrors = document.getElementById('metric-errors');
+  const elapsedEl = document.getElementById('elapsed');
+
+  const roomTiles = new Map();
+  const startTime = Date.now();
+  let currentWatchedKey = null;
+
+  // Video modal
+  const videoModal = document.getElementById('video-modal');
+  const videoFrame = document.getElementById('video-frame');
+  const videoTitle = document.getElementById('video-modal-title');
+  const videoClose = document.getElementById('video-modal-close');
+
+  function fmtElapsed(ms) {
+    const s = Math.floor(ms / 1000);
+    const h = Math.floor(s / 3600);
+    const m = Math.floor((s % 3600) / 60);
+    const sec = s % 60;
+    return `${String(h).padStart(2, '0')}:${String(m).padStart(2, '0')}:${String(sec).padStart(2, '0')}`;
+  }
+  setInterval(() => {
+    elapsedEl.textContent = fmtElapsed(Date.now() - startTime);
+  }, 1000);
+
+  function escapeHtml(s) {
+    return String(s).replace(/[&<>"']/g, (c) => ({
+      '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;',
+    }[c]));
+  }
+
+  function ensureRoomTile(roomId) {
+    if (roomTiles.has(roomId)) return roomTiles.get(roomId);
+    const tile = document.createElement('div');
+    tile.className = 'room';
+    tile.innerHTML = `
+      <div class="room-title">
+        <div class="name">${escapeHtml(roomId)}</div>
+        <div class="phase lobby">waiting</div>
+      </div>
+      <div class="players"></div>
+      <div class="progress-bar"><div class="progress-fill" style="width:0%"></div></div>
+      <div class="room-meta">
+        <span class="moves">0 moves</span>
+        <span class="game">game —</span>
+      </div>
+    `;
+    roomsEl.appendChild(tile);
+    roomTiles.set(roomId, tile);
+    return tile;
+  }
+
+  function renderRoomState(roomId, state) {
+    const tile = ensureRoomTile(roomId);
+    if (state.phase !== undefined) {
+      const phaseEl = tile.querySelector('.phase');
+      phaseEl.textContent = state.phase;
+      phaseEl.classList.toggle('lobby', state.phase === 'lobby' || state.phase === 'waiting');
+      phaseEl.classList.toggle('err', state.phase === 'error');
+    }
+    if (state.players !== undefined) {
+      const playersEl = tile.querySelector('.players');
+      playersEl.innerHTML = state.players
+        .map(
+          (p) => `
+            <div class="player ${p.isActive ? 'active' : ''}" data-session="${escapeHtml(p.key)}">
+              <span>${p.isActive ? '▶ ' : ''}${escapeHtml(p.key)}</span>
+              <span class="score">${p.score ?? '—'}</span>
+            </div>
+          `,
+        )
+        .join('');
+    }
+    if (state.hole !== undefined && state.totalHoles !== undefined) {
+      const fill = tile.querySelector('.progress-fill');
+      const pct = state.totalHoles > 0 ? Math.round((state.hole / state.totalHoles) * 100) : 0;
+      fill.style.width = `${pct}%`;
+    }
+    if (state.moves !== undefined) {
+      tile.querySelector('.moves').textContent = `${state.moves} moves`;
+    }
+    if (state.game !== undefined && state.totalGames !== undefined) {
+      tile.querySelector('.game').textContent = `game ${state.game}/${state.totalGames}`;
+    }
+  }
+
+  function appendLog(level, msg, meta) {
+    const li = document.createElement('li');
+    li.className = level;
+    const ts = new Date().toLocaleTimeString();
+    li.textContent = `[${ts}] ${msg} ${meta ? JSON.stringify(meta) : ''}`;
+    logEl.insertBefore(li, logEl.firstChild);
+    while (logEl.children.length > 100) {
+      logEl.removeChild(logEl.lastChild);
+    }
+  }
+
+  function applyMetric(name, value) {
+    if (name === 'games_completed') metricGames.textContent = value;
+    else if (name === 'moves_total') metricMoves.textContent = value;
+    else if (name === 'errors') metricErrors.textContent = value;
+  }
+
+  ws.addEventListener('open', () => {
+    wsStatusEl.textContent = 'healthy';
+    wsStatusEl.style.color = 'var(--good)';
+  });
+  ws.addEventListener('close', () => {
+    wsStatusEl.textContent = 'disconnected';
+    wsStatusEl.style.color = 'var(--err)';
+  });
+  ws.addEventListener('message', (event) => {
+    let msg;
+    try {
+      msg = JSON.parse(event.data);
+    } catch {
+      return;
+    }
+    if (msg.type === 'room_state') {
+      renderRoomState(msg.roomId, msg.state);
+    } else if (msg.type === 'log') {
+      appendLog(msg.level, msg.msg, msg.meta);
+    } else if (msg.type === 'metric') {
+      applyMetric(msg.name, msg.value);
+    } else if (msg.type === 'frame') {
+      if (msg.sessionKey === currentWatchedKey) {
+        videoFrame.src = `data:image/jpeg;base64,${msg.jpegBase64}`;
+      }
+    }
+  });
+
+  // Click-to-watch (screencasts start arriving after Task 22/23)
+  roomsEl.addEventListener('click', (e) => {
+    const playerEl = e.target.closest('.player');
+    if (!playerEl) return;
+    const key = playerEl.dataset.session;
+    if (!key) return;
+    currentWatchedKey = key;
+    videoTitle.textContent = `Watching ${key}`;
+    videoModal.classList.remove('hidden');
+    ws.send(JSON.stringify({ type: 'start_stream', sessionKey: key }));
+  });
+
+  function closeVideo() {
+    if (currentWatchedKey) {
+      ws.send(JSON.stringify({ type: 'stop_stream', sessionKey: currentWatchedKey }));
+    }
+    currentWatchedKey = null;
+    videoModal.classList.add('hidden');
+    videoFrame.src = '';
+  }
+  videoClose.addEventListener('click', closeVideo);
+  document.addEventListener('keydown', (e) => {
+    if (e.key === 'Escape') closeVideo();
+  });
+})();

tests/soak/dashboard/index.html

@@ -0,0 +1,47 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>Golf Soak Dashboard</title>
+<link rel="stylesheet" href="/dashboard.css">
+</head>
+<body>
+<header class="dash-header">
+  <h1>⛳ Golf Soak Dashboard</h1>
+  <div class="meta">
+    <span id="run-id">run —</span>
+    <span id="elapsed">00:00:00</span>
+  </div>
+</header>
+
+<div class="meta-bar">
+  <div class="stat"><span class="label">Games</span><span id="metric-games">0</span></div>
+  <div class="stat"><span class="label">Moves</span><span id="metric-moves">0</span></div>
+  <div class="stat"><span class="label">Errors</span><span id="metric-errors">0</span></div>
+  <div class="stat"><span class="label">WS</span><span id="ws-status">connecting</span></div>
+</div>
+
+<div class="rooms" id="rooms">
+  <!-- Room tiles injected by dashboard.js -->
+</div>
+
+<section class="log">
+  <div class="log-header">Activity Log</div>
+  <ul id="log-list"></ul>
+</section>
+
+<!-- Modal for focused live video (screencast arrives in Task 22/23) -->
+<div id="video-modal" class="video-modal hidden">
+  <div class="video-modal-content">
+    <div class="video-modal-header">
+      <span id="video-modal-title">Watching —</span>
+      <button id="video-modal-close">Close</button>
+    </div>
+    <img id="video-frame" alt="Live screencast" />
+  </div>
+</div>
+
+<script src="/dashboard.js"></script>
+</body>
+</html>