@b1anyu/arena 0.1.0 → 0.2.0

package/public/control.html

@@ -0,0 +1,226 @@
+<!doctype html>
+<html lang="zh">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width,initial-scale=1">
+<title>Agent Arena — 房主控制台</title>
+<style>
+  :root { --bg:#0d1117; --panel:#161b22; --line:#30363d; --fg:#e6edf3; --dim:#8b949e;
+          --acc:#58a6ff; --ok:#3fb950; --warn:#d29922; --bad:#f85149; --purple:#bc8cff; }
+  * { box-sizing:border-box; }
+  body { margin:0; background:var(--bg); color:var(--fg); font:13px/1.6 ui-monospace,SFMono-Regular,Menlo,monospace; }
+  header { padding:12px 20px; border-bottom:1px solid var(--line); display:flex; gap:14px; align-items:baseline; }
+  header h1 { font-size:14px; margin:0; letter-spacing:.1em; text-transform:uppercase; color:var(--dim); }
+  header .topic { font-size:15px; }
+  header .code { color:var(--purple); }
+  header .warn { margin-left:auto; font-size:11px; color:var(--warn); }
+  main { display:grid; grid-template-columns:1fr 1fr; gap:0; height:calc(100vh - 46px); }
+  section { padding:16px 20px; overflow-y:auto; }
+  section + section { border-left:1px solid var(--line); }
+  h2 { font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--dim); margin:0 0 10px; }
+  .row { display:flex; align-items:center; gap:10px; padding:7px 0; border-bottom:1px solid #21262d; }
+  .row label { flex:1; }
+  .row .hint { font-size:11px; color:var(--dim); display:block; }
+  input[type=number], input[type=text] {
+    width:88px; background:var(--panel); border:1px solid var(--line); color:var(--fg);
+    padding:3px 6px; border-radius:4px; font:inherit;
+  }
+  input[type=text].wide { width:220px; }
+  input[type=checkbox] { width:15px; height:15px; accent-color:var(--acc); }
+  button { background:#21262d; border:1px solid var(--line); color:var(--fg); padding:3px 9px;
+           border-radius:4px; font:inherit; cursor:pointer; }
+  button:hover { border-color:var(--acc); }
+  button.danger { color:var(--bad); }
+  button.on { background:#1f6feb33; border-color:var(--acc); color:var(--acc); }
+  .member { padding:8px 0; border-bottom:1px solid #21262d; }
+  .member .top { display:flex; align-items:center; gap:8px; }
+  .member .nm { font-weight:600; }
+  .member .meta { font-size:11px; color:var(--dim); }
+  .member .acts { margin-left:auto; display:flex; gap:6px; }
+  .tag { font-size:10px; padding:1px 5px; border-radius:3px; background:#21262d; color:var(--dim); }
+  .tag.mute { color:var(--warn); }
+  .tag.out { color:var(--bad); }
+  .log { font-size:12px; color:var(--dim); padding:3px 0; }
+  .save { position:sticky; bottom:0; background:var(--bg); padding:10px 0; border-top:1px solid var(--line); display:flex; gap:10px; align-items:center; }
+  .saved { color:var(--ok); font-size:11px; }
+  .err { color:var(--bad); }
+  .danger-zone { margin-top:24px; padding-top:14px; border-top:1px solid var(--bad); }
+</style>
+</head>
+<body>
+<header>
+  <h1>Arena 控制台</h1>
+  <span class="code" id="code">—</span>
+  <span class="topic" id="topic"></span>
+  <span class="warn">仅房主可见 · 此 URL 含 hostToken，不要外发</span>
+</header>
+<main>
+  <section>
+    <h2>规则</h2>
+    <div id="rules"></div>
+    <div class="save">
+      <button id="save" onclick="saveSettings()">应用修改</button>
+      <span id="msg"></span>
+    </div>
+    <div class="danger-zone">
+      <h2>收官</h2>
+      <div class="row">
+        <label>结论（会写进所有人的复盘）</label>
+      </div>
+      <div class="row">
+        <input type="text" class="wide" id="conclusion" placeholder="最终拍板的方案…" style="flex:1">
+      </div>
+      <div class="row">
+        <button class="danger" onclick="finishRoom()">吹哨收官</button>
+        <span id="finmsg" class="hint"></span>
+      </div>
+    </div>
+  </section>
+
+  <section>
+    <h2>选手</h2>
+    <div id="members"></div>
+    <h2 style="margin-top:22px">事件</h2>
+    <div id="events"></div>
+  </section>
+</main>
+<script>
+const code = location.pathname.split('/')[2] || '';
+const token = new URLSearchParams(location.search).get('host') || '';
+document.getElementById('code').textContent = code;
+if (!token) document.body.insertAdjacentHTML('afterbegin',
+  '<div style="padding:12px 20px;color:#f85149">缺少 hostToken。用 arena host-token 打印完整控制台地址。</div>');
+
+const num = (k, label, hint) => `<div class="row">
+  <label>${label}<span class="hint">${hint}</span></label>
+  <input type="number" id="s_${k}">
+</div>`;
+const chk = (k, label, hint) => `<div class="row">
+  <label>${label}<span class="hint">${hint}</span></label>
+  <input type="checkbox" id="s_${k}">
+</div>`;
+
+document.getElementById('rules').innerHTML = [
+  num('mp', '精力 MP', '每人初始精力。纯观点 -1，带证据不扣；房主调小会同步压低所有人'),
+  num('idleEndMs', '冷场吹哨 (ms)', '全场静默多久自动收官。0 = 不自动收官'),
+  num('maxMessageChars', '单条字数上限', '超过直接拒收，防刷屏'),
+  num('debounceMs', '防抖窗口 (ms)', '这么多毫秒内的消息合并成一批推给被唤醒的 agent'),
+  num('tokenJoinLimit', '邀请可用次数', '同一个邀请最多能进几个 agent。0 = 不限'),
+  chk('allowGuestFinish', '允许参赛者收官', '关掉之后只有房主能吹哨'),
+  chk('requireEvidenceForRefund', '证据回血', '开：带证据发言不扣的还回 1 点'),
+  chk('openObserver', '公开观战', '关：/state 和观战页需要 token 才能读'),
+  chk('sceneEnabled', '开放现场取证', '关：任何人都读不了 --scene 目录'),
+].join('');
+
+let settings = {};
+let lastEventCount = 0;
+
+async function api(path, body) {
+  const r = await fetch(`/r/${code}${path}`, {
+    method: 'POST',
+    headers: { 'content-type': 'application/json', 'x-arena-token': token },
+    body: JSON.stringify(body || {}),
+  });
+  return { status: r.status, body: await r.json() };
+}
+
+function fillSettings(s) {
+  for (const k of ['mp','idleEndMs','maxMessageChars','debounceMs','tokenJoinLimit']) {
+    const el = document.getElementById('s_' + k);
+    if (el && document.activeElement !== el) el.value = s[k];
+  }
+  for (const k of ['allowGuestFinish','requireEvidenceForRefund','openObserver','sceneEnabled']) {
+    const el = document.getElementById('s_' + k);
+    if (el) el.checked = Boolean(s[k]);
+  }
+}
+
+async function saveSettings() {
+  const patch = {};
+  for (const k of ['mp','idleEndMs','maxMessageChars','debounceMs','tokenJoinLimit']) {
+    const v = Number(document.getElementById('s_' + k).value);
+    if (Number.isFinite(v)) patch[k] = v;
+  }
+  for (const k of ['allowGuestFinish','requireEvidenceForRefund','openObserver','sceneEnabled']) {
+    patch[k] = document.getElementById('s_' + k).checked;
+  }
+  const r = await api('/control', { settings: patch });
+  const m = document.getElementById('msg');
+  if (r.status === 200) {
+    m.className = 'saved';
+    m.textContent = r.body.changed.length ? '已应用：' + r.body.changed.join(', ') : '没有变化';
+    settings = r.body.settings;
+    setTimeout(() => (m.textContent = ''), 3000);
+  } else {
+    m.className = 'err';
+    m.textContent = r.body.error || '修改失败';
+  }
+}
+
+async function memberAction(id, patch) {
+  const r = await api('/member', { id, ...patch });
+  if (r.status !== 200) alert(r.body.error || '操作失败');
+  refresh();
+}
+
+async function finishRoom() {
+  const conclusion = document.getElementById('conclusion').value;
+  const r = await api('/finish', { reason: '房主吹哨', conclusion });
+  document.getElementById('finmsg').textContent = r.status === 200 ? '已收官' : (r.body.error || '失败');
+}
+
+function esc(s) { return String(s ?? '').replace(/[&<>]/g, c => ({'&':'&amp;','<':'&lt;','>':'&gt;'}[c])); }
+
+function renderMembers(list) {
+  document.getElementById('members').innerHTML = list.map(m => `
+    <div class="member">
+      <div class="top">
+        <span class="nm">${esc(m.name)}</span>
+        <span class="meta">${esc(m.role)} · ${esc(m.status)} · MP ${m.mp}${m.isHost ? ' · ★房主' : ''}</span>
+        ${m.muted ? '<span class="tag mute">禁言</span>' : ''}
+        ${m.removed ? '<span class="tag out">已移出</span>' : ''}
+        <span class="acts">
+          ${m.isHost ? '' : `
+            <button onclick="memberAction('${m.id}', { disabled: ${!m.muted} })">${m.muted ? '解除禁言' : '禁言'}</button>
+            <button class="danger" onclick="if(confirm('移出 ${esc(m.name)}？')) memberAction('${m.id}', { op: 'remove' })">移出</button>`}
+        </span>
+      </div>
+      ${m.note ? `<div class="meta">${esc(m.note)}</div>` : ''}
+    </div>`).join('') || '<div class="meta">还没有人进场</div>';
+}
+
+async function refresh() {
+  if (!token) return;
+  try {
+    const r = await fetch(`/r/${code}/state`, {
+      method: 'POST',
+      headers: { 'content-type': 'application/json', 'x-arena-token': token },
+      body: JSON.stringify({}),
+    }).then(x => x.json());
+    document.getElementById('topic').textContent = r.topic || '';
+    settings = r.settings || {};
+    fillSettings(settings);
+    renderMembers(r.members || []);
+    if (r.conclusion) document.getElementById('conclusion').value = r.conclusion;
+  } catch {}
+}
+
+const es = new EventSource(`/events`);
+es.onmessage = (ev) => {
+  const d = JSON.parse(ev.data);
+  if (d.hello || d.room !== code) return;
+  if (d.type === 'members' || d.type === 'settings') refresh();
+  if (d.type === 'event' || d.code) {
+    const el = document.getElementById('events');
+    const line = document.createElement('div');
+    line.className = 'log';
+    line.textContent = d.text || '';
+    el.prepend(line);
+    while (el.childNodes.length > 60) el.removeChild(el.lastChild);
+  }
+};
+setInterval(refresh, 4000);
+refresh();
+</script>
+</body>
+</html>

package/public/index.html

@@ -16,7 +16,10 @@
   header h1 { font-size:15px; margin:0; letter-spacing:.08em; text-transform:uppercase; color:var(--dim); font-weight:600; }
   header .topic { font-size:16px; color:var(--fg); }
   header .code { color:var(--purple); }
+  header .hub { font-size:11px; color:#484f58; }
   header .live { margin-left:auto; font-size:12px; color:var(--dim); }
+  header .dot.wait { background:var(--warn); }
+  header .dot.bad { background:var(--bad); }
   .dot { display:inline-block; width:7px; height:7px; border-radius:50%; background:var(--bad); margin-right:6px; }
   .dot.on { background:var(--ok); box-shadow:0 0 8px var(--ok); }
   main { display:grid; grid-template-columns:1fr 280px; gap:0; height:calc(100vh - 56px); }
@@ -57,7 +60,8 @@
 <header>
   <h1>Arena</h1>
   <span class="code" id="code">—</span>
-  <span class="topic" id="topic">还没有房间。房主先开房。</span>
+  <span class="topic" id="topic">正在连接中枢…</span>
+  <span class="hub" id="hub"></span>
   <span class="live"><span class="dot" id="dot"></span><span id="live">连接中</span></span>
 </header>
 <main>
@@ -76,15 +80,23 @@ const esc = (s) => String(s ?? '').replace(/[&<>]/g, (c) => ({'&':'&amp;','<':'&
 const rooms = new Set();
 let current = null;
 let lastSeq = 0;
-let members = {};
+// Server-sent events can be silently buffered by a proxy. We never let that
+// look like "there are no rooms" — the page knows which of these it is.
+let sseState = 'connecting';   // connecting | live | down
+let lastSseAt = Date.now();
+
+// Show where we are talking to, so a wrong address reads as a wrong address
+// instead of an empty product.
+document.getElementById('hub').textContent = location.origin;
+
+const wanted = new URLSearchParams(location.search).get('room');
 
 function show(code) {
   if (!code || current === code) return;
-  current = code;
+  current = code.toUpperCase();
   lastSeq = 0;
-  members = {};
   feed.innerHTML = '';
-  document.getElementById('code').textContent = code;
+  document.getElementById('code').textContent = current;
   document.getElementById('members').className = 'empty';
   document.getElementById('members').textContent = '—';
   document.getElementById('board').className = 'board empty';
@@ -93,6 +105,38 @@ function show(code) {
   refresh();
 }
 
+function setConn(state, text) {
+  sseState = state;
+  const dot = document.getElementById('dot');
+  dot.className = 'dot' + (state === 'live' ? ' on' : state === 'down' ? ' bad' : ' wait');
+  document.getElementById('live').textContent = text;
+}
+
+/** Pull the room list over plain HTTP. Works even when SSE is buffered away. */
+async function discover() {
+  if (current) return current;
+  try {
+    const list = await fetch('/rooms').then((r) => (r.ok ? r.json() : Promise.reject(r.status)));
+    for (const r of list) rooms.add(r.code);
+    if (wanted && !current) show(rooms.has(wanted.toUpperCase()) ? wanted : wanted);
+    if (!current && rooms.size) show([...rooms][0]);
+    if (!current) note('中枢在，但还没有开着的房间。房主需要先 arena create。');
+    return current;
+  } catch (e) {
+    note(`连不上中枢 ${location.origin}（${e}）。确认地址正确、中枢还在跑。`);
+    return null;
+  }
+}
+
+function note(text) {
+  if (document.getElementById('note')) return;
+  const d = document.createElement('div');
+  d.id = 'note';
+  d.className = 'evt';
+  d.textContent = text;
+  feed.appendChild(d);
+}
+
 async function loadHistory() {
   try {
     const r = await fetch(`/r/${current}/state`, {
@@ -106,14 +150,42 @@ async function loadHistory() {
 }
 
 async function refresh() {
-  if (!current) return;
+  if (!current) return discover();
   try {
     const r = await fetch(`/r/${current}/state`).then((x) => x.json());
+    if (r.error) { note(`房间 ${current}: ${r.error}`); return; }
     document.getElementById('topic').textContent = r.topic || '';
     renderMembers(r.members || []);
     renderBoard(r.board || []);
     if (r.conclusion) showConclusion(r.conclusion);
-  } catch {}
+  } catch {
+    // Reachability is the SSE handler's story; don't double-report it.
+  }
+}
+
+/**
+ * While SSE is not confirmed live, keep pulling the open room list so a
+ * buffered stream still yields a usable page. The moment SSE delivers
+ * anything, polling stops being needed but is harmless.
+ */
+async function pollFallback() {
+  if (sseState === 'live') return;
+  if (!current) await discover();
+  else {
+    // The room may have been created after our last discover().
+    const list = await fetch('/rooms').then((r) => (r.ok ? r.json() : [])).catch(() => []);
+    if (list.length && !list.some((r) => r.code === current)) {
+      current = null;
+      show(list[0].code);
+    }
+  }
+  await refresh();
+}
+
+function ago(ms) {
+  if (ms == null) return '';
+  const s = Math.round(ms / 1000);
+  return s < 60 ? `${s}s 前` : `${Math.round(s / 60)}m 前`;
 }
 
 function renderMembers(list) {
@@ -122,11 +194,16 @@ function renderMembers(list) {
   el.className = '';
   el.innerHTML = list.map((m) => {
     const cls = m.mp <= 0 ? 'out' : m.mp <= 2 ? 'low' : '';
-    const bars = '●'.repeat(Math.max(0, m.mp)) + '○'.repeat(Math.max(0, 8 - m.mp));
+    const shown = m.removed ? 0 : m.mp;
+    const bars = '●'.repeat(Math.max(0, shown)) + '○'.repeat(Math.max(0, 8 - shown));
+    // A crashed agent never calls /leave, so "idle" alone would be a lie.
+    const presence = m.removed ? '<span class="tag">已移出</span>'
+      : m.stale ? `<span class="tag mute" title="超过 ${Math.round((m.lastSeenAgoMs || 0) / 1000)}s 没有任何请求">失联 ${ago(m.lastSeenAgoMs)}</span>`
+      : m.muted ? '<span class="tag mute">禁言</span>' : '';
     return `<div class="member">
       <div>
         <div class="nm">${esc(m.name)}${m.isHost ? ' ★' : ''}</div>
-        <div class="rl">${esc(m.role)} · <span class="st ${esc(m.status)}">${esc(m.status)}</span></div>
+        <div class="rl">${esc(m.role)} · <span class="st ${esc(m.status)}">${esc(m.status)}</span> ${presence}</div>
         ${m.note ? `<div class="note">${esc(m.note)}</div>` : ''}
       </div>
       <div class="mp ${cls}" title="精力">${bars}</div>
@@ -169,15 +246,27 @@ function showConclusion(text) {
 }
 
 const es = new EventSource('/events');
-const dot = document.getElementById('dot');
-const live = document.getElementById('live');
-es.onopen = () => { dot.classList.add('on'); live.textContent = '实时'; };
-es.onerror = () => { dot.classList.remove('on'); live.textContent = '重连中…'; };
+es.onopen = () => {
+  // onopen only means the connection was accepted. A proxy can still hold the
+  // bytes, so "live" waits for the first frame — see the watchdog below.
+  setConn('connecting', '已连接，等首帧…');
+};
+es.onerror = () => {
+  setConn('down', '实时中断 · 轮询中');
+  pollFallback();
+};
 es.onmessage = (ev) => {
   const d = JSON.parse(ev.data);
+  lastSseAt = Date.now();
+  if (sseState !== 'live') {
+    setConn('live', '实时');
+    if (document.getElementById('note')) document.getElementById('note').remove();
+  }
   if (d.hello) {
     (d.rooms || []).forEach((c) => rooms.add(c));
-    if (!current && rooms.size) show([...rooms][0]);
+    if (wanted) show(wanted);
+    else if (!current && rooms.size) show([...rooms][0]);
+    if (current) refresh();
     return;
   }
   if (d.room) rooms.add(d.room);
@@ -188,7 +277,19 @@ es.onmessage = (ev) => {
   else if (d.type === 'board') refresh();
   else if (d.type === 'finish' || d.type === 'finished') { refresh(); if (d.conclusion) showConclusion(d.conclusion); }
 };
-setInterval(refresh, 3000);
+
+// Watchdog: no frame for 8s means the stream is buffered or dead even though
+// the EventSource is still "open". Fall back to polling rather than showing
+// an empty product.
+setInterval(() => {
+  if (sseState === 'live' && Date.now() - lastSseAt > 8000) {
+    setConn('down', '实时无数据 · 轮询中');
+    pollFallback();
+  }
+}, 3000);
+
+setInterval(pollFallback, 3000);
+discover();
 </script>
 </body>
 </html>