cabinwandClaude Opus 5
47be0ad9c4
Watch an agent play in real time, replayed with the main game's renderer and animations. The board holds the stage with the live panel beside it: a millisecond stopwatch, how long the current step has been thinking, steps, decisions, pieces cleared, dead taps and rotations, then the agent's running commentary. A banner over the board names who is playing, self-reported by the agent via --agent. The page polls unconditionally; the checkbox only decides whether the cursor chases the newest step, and it follows the agent into its next run once this one ends. Clicking any step in the feed replays the board at that moment, and the arrow keys walk it — there is no scrub bar, since the feed already is one. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
105 lines
3.8 KiB
HTML
105 lines
3.8 KiB
HTML
<!doctype html>
|
||
<html lang="zh-CN">
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<meta name="viewport" content="width=device-width,initial-scale=1">
|
||
<title>关卡实验台 · Agent 观察</title>
|
||
<link rel="stylesheet" href="./style.css">
|
||
</head>
|
||
<body>
|
||
<header class="topbar">
|
||
<h1 class="sr-only">关卡实验台 · Agent 观察</h1>
|
||
<a class="back" href="../../">← 返回主线</a>
|
||
<div class="picker">
|
||
<select id="run" aria-label="选择一局"></select>
|
||
<button id="reload" type="button" class="small">刷新列表</button>
|
||
<label class="toggle"><input id="live" type="checkbox" checked> 跟随 Agent</label>
|
||
</div>
|
||
<span class="badge">AGENT BENCH</span>
|
||
</header>
|
||
|
||
<main>
|
||
<!-- 棋盘占主位，实时信息在右侧竖排：看盘的人先看棋盘，再瞟一眼计时。 -->
|
||
<div class="stage">
|
||
<section class="board-col">
|
||
<div class="who">
|
||
<div class="who-id">
|
||
<b id="who-model">—</b>
|
||
<span id="who-agent" class="who-agent"></span>
|
||
</div>
|
||
<span id="who-level" class="who-level"></span>
|
||
</div>
|
||
<div class="board-wrap"><canvas id="board" aria-label="Agent 正在操作的棋盘"></canvas></div>
|
||
<!-- 只在读不到存档时才出现，正常观看时不占位置 -->
|
||
<p class="notice" id="notice" role="status" hidden></p>
|
||
</section>
|
||
|
||
<aside class="rail">
|
||
<section class="scoreboard" aria-label="实时计时与进度">
|
||
<div class="clock primary">
|
||
<span class="k">总用时</span>
|
||
<b id="clock" class="tick">0:00.000</b>
|
||
</div>
|
||
<div class="clock think">
|
||
<span class="k" id="think-label">本步思考</span>
|
||
<b id="think" class="tick">0.0s</b>
|
||
</div>
|
||
<div class="stats">
|
||
<div class="cell">
|
||
<span class="k">步数</span>
|
||
<b id="sb-steps">0</b><small id="sb-budget">/ 80</small>
|
||
</div>
|
||
<div class="cell">
|
||
<span class="k">决策</span>
|
||
<b id="sb-decisions">0</b><small id="sb-per">—</small>
|
||
</div>
|
||
<div class="cell">
|
||
<span class="k">已离场</span>
|
||
<b id="sb-cleared">0</b><small id="sb-total">/ 0</small>
|
||
</div>
|
||
<div class="cell">
|
||
<span class="k">空点 / 旋转</span>
|
||
<b id="sb-dead">0</b><small id="sb-rot">· 0 转</small>
|
||
</div>
|
||
</div>
|
||
<div class="bar"><i id="sb-bar"></i></div>
|
||
<div id="sb-status" class="pill">—</div>
|
||
</section>
|
||
|
||
<section class="feed-col">
|
||
<div class="feed-head">
|
||
<h2>实况</h2>
|
||
<span id="feed-state" class="feed-state"></span>
|
||
<button id="end" type="button" class="small back-live" hidden>↩ 回到实时</button>
|
||
</div>
|
||
<!-- One tab stop, then ↑↓ walks the replay — the keyboard equivalent of
|
||
the progress bar this list replaced. -->
|
||
<ol id="steps" class="steps" tabindex="0" role="log"
|
||
aria-label="每一步的动作与理由，方向键可回看任意一步"></ol>
|
||
</section>
|
||
</aside>
|
||
</div>
|
||
|
||
<section class="details">
|
||
<div class="panel">
|
||
<h2>耗时明细</h2>
|
||
<dl id="timing" class="kv"></dl>
|
||
</div>
|
||
<div class="panel">
|
||
<h2>指标</h2>
|
||
<dl id="metrics" class="kv"></dl>
|
||
</div>
|
||
<div class="panel">
|
||
<h2>Agent 评分</h2>
|
||
<dl id="rating" class="kv"></dl>
|
||
</div>
|
||
</section>
|
||
</main>
|
||
|
||
<footer>
|
||
<p>数据来自 <code>bench/runs/*.json</code>。开一局：<code>node scripts/bench.mjs start --model=你是谁 --level=1</code>；Agent 读的说明见 <code>labs/bench/AGENT.md</code>。点右侧任意一步可回看那一刻的棋盘。</p>
|
||
</footer>
|
||
<script type="module" src="./app.js"></script>
|
||
</body>
|
||
</html>
|