web_debug/index.html

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, viewport-fit=cover"
    />
    <title>狼人杀调试控制台</title>
    <link rel="stylesheet" href="./assets/styles.css" />
  </head>
  <body>
    <div class="backdrop"></div>
    <div class="orb orb-a"></div>
    <div class="orb orb-b"></div>
    <div class="orb orb-c"></div>

    <div class="app">
      <aside class="panel">
        <div class="panel-header">
          <div class="brand">
            <span class="brand-mark">WW</span>
            <div>
              <div class="brand-title">调试控制台</div>
              <div class="brand-sub">从日志实时读取对局</div>
            </div>
          </div>
          <button id="refresh-btn" class="ghost-btn">刷新</button>
        </div>
        <div class="panel-body">
          <div class="section-title">对局列表</div>
          <div id="sessions" class="session-list"></div>
        </div>
        <div class="panel-footer">
          <div class="status-pill" id="log-path">logs/</div>
        </div>
      </aside>

      <main class="main">
        <header class="main-header">
          <div>
            <div class="headline" id="session-title">请选择一个对局</div>
            <div class="subhead" id="session-meta">尚未加载数据</div>
          </div>
          <div class="header-right">
            <div class="header-actions">
              <button id="copy-md-btn" class="ghost-btn">复制Markdown</button>
              <button id="download-md-btn" class="ghost-btn">下载Markdown</button>
            </div>
            <div class="live-indicator">
              <span class="dot"></span>
              <span id="live-label">未开启</span>
            </div>
          </div>
        </header>

        <section class="cards">
          <div class="card">
            <div class="card-title">事件数</div>
            <div class="card-value" id="stat-total">-</div>
            <div class="card-foot">本对局已记录的总事件</div>
          </div>
          <div class="card">
            <div class="card-title">输入/输出</div>
            <div class="card-value" id="stat-io">-</div>
            <div class="card-foot">perceive / interact</div>
          </div>
          <div class="card">
            <div class="card-title">兜底次数</div>
            <div class="card-value" id="stat-fallback">-</div>
            <div class="card-foot">输出不合规触发的纠错/兜底</div>
          </div>
          <div class="card">
            <div class="card-title">无效次数</div>
            <div class="card-value" id="stat-roles">-</div>
            <div class="card-foot">解析失败（例如不在候选列表）</div>
          </div>
        </section>

        <section class="controls">
          <div class="control">
            <label for="search">搜索</label>
            <input id="search" type="text" placeholder="按状态/角色/玩家名/结果/关键字过滤..." />
          </div>
          <div class="control">
            <label>状态</label>
            <div id="status-filters" class="chip-row"></div>
          </div>
          <div class="control">
            <label>角色</label>
            <div id="role-filters" class="chip-row"></div>
          </div>
          <div class="control">
            <label>自动刷新</label>
            <div class="toggle">
              <input id="auto-refresh" type="checkbox" />
              <span>5s</span>
            </div>
          </div>
        </section>

        <section class="dash">
          <div class="dash-card">
            <div class="section-title">对局关键</div>
            <div id="game-key" class="dash-body"></div>
          </div>
          <div class="dash-card">
            <div class="section-title">投票汇总</div>
            <div id="vote-board" class="dash-body"></div>
          </div>
          <div class="dash-card">
            <div class="section-title">技能过程</div>
            <div id="skill-board" class="dash-body"></div>
          </div>
          <div class="dash-card">
            <div class="section-title">记忆快照</div>
            <div id="memory-board" class="dash-body"></div>
          </div>
        </section>

        <section class="content">
          <div class="timeline">
            <div class="section-title">事件时间线</div>
            <div id="events" class="event-list"></div>
          </div>
          <div class="detail">
            <div class="section-title">事件详情</div>
            <div id="detail-card" class="detail-card empty">
              <div class="detail-empty">点击左侧事件查看详情（Prompt / 候选 / 纠错 / 记忆）。</div>
            </div>
          </div>
        </section>
      </main>
    </div>

    <script src="./assets/app.js"></script>
  </body>
</html>