writing-agent/web/stats.html

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Token 统计 · Writing Agent</title>
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link
      href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@400;500;600;700&family=Noto+Serif+SC:wght@500;600;700&display=swap"
      rel="stylesheet"
    />
    <script src="/theme-init.js"></script>
    <link rel="stylesheet" href="/settings.css" />
    <link rel="stylesheet" href="/stats.css" />
  </head>
  <body class="settings-page stats-page">
    <header class="st-top">
      <a class="st-brand" href="/">Writing Agent</a>
      <nav class="st-nav" aria-label="主导航">
        <a href="/">对话</a>
        <a href="/modules.html">技能</a>
        <a href="/shells.html">呈现壳</a>
        <a href="/libraries.html">库</a>
        <a href="/stats.html" aria-current="page">Token</a>
        <a href="/settings.html">设置</a>
      </nav>
    </header>

    <div class="st-shell stats-shell">
      <main class="st-main stats-main">
        <header class="st-main-head">
          <div>
            <h1>Token 统计</h1>
            <p class="st-sub">按时间筛选本机调用；花销按你指定的官方价目文档估算（<code>stats/*.jsonl</code>）</p>
          </div>
        </header>

        <div class="stats-toolbar" role="search" aria-label="筛选条件">
          <div class="stats-toolbar-fields">
            <label class="stats-field">
              从
              <input type="datetime-local" id="from" />
            </label>
            <label class="stats-field">
              到
              <input type="datetime-local" id="to" />
            </label>
            <label class="stats-field">
              上限条数
              <input type="number" id="limit" value="200" min="10" max="5000" step="10" />
            </label>
          </div>
          <div class="stats-toolbar-actions">
            <div class="stats-range" role="group" aria-label="快捷区间">
              <button type="button" class="btn-secondary" id="btn-today">今天</button>
              <button type="button" class="btn-secondary" id="btn-7d">近 7 天</button>
            </div>
            <button type="button" class="btn-primary" id="btn-load">查询</button>
          </div>
        </div>

        <section class="stats-pricing" aria-label="价格来源">
          <div class="stats-pricing-head">
            <p class="stats-section-label">价格来源</p>
            <p class="stats-pricing-hint">
              粘贴厂商官方价目页，解析型号单价后按调用时间估算（含缓存命中与高峰/闲时，若文档有写）。
            </p>
          </div>
          <form class="stats-pricing-add" id="pricing-form">
            <label class="stats-field stats-field-url">
              官方文档 URL
              <input
                type="url"
                id="pricing-url"
                placeholder="https://api-docs.deepseek.com/quick_start/pricing"
                autocomplete="off"
              />
            </label>
            <button type="submit" class="btn-primary" id="btn-add-pricing">从文档计算</button>
          </form>
          <div class="stats-pricing-suggested" id="pricing-suggested"></div>
          <ul class="stats-pricing-list" id="pricing-sources"></ul>
          <p class="stats-pricing-status" id="pricing-status" hidden aria-live="polite"></p>
        </section>

        <div class="stats-summary" id="summary" aria-live="polite"></div>
        <p class="stats-status" id="status" data-state="idle" aria-live="polite"></p>

        <section class="stats-by-model" aria-label="按模型花销">
          <p class="stats-section-label">按模型</p>
          <div class="stats-table-wrap stats-table-wrap-model">
            <table class="stats-table" id="model-table">
              <thead>
                <tr>
                  <th scope="col">model</th>
                  <th scope="col" class="num">调用</th>
                  <th scope="col" class="num">prompt</th>
                  <th scope="col" class="num">completion</th>
                  <th scope="col" class="num">cached</th>
                  <th scope="col" class="num">估算花销</th>
                  <th scope="col">单价</th>
                </tr>
              </thead>
              <tbody id="model-rows"></tbody>
            </table>
            <div class="stats-empty" id="model-empty" hidden>
              <strong>没有可汇总的型号</strong>
              先查出调用记录，并添加官方价目文档。
            </div>
          </div>
        </section>

        <p class="stats-section-label">调用记录</p>
        <div class="stats-table-wrap">
          <table class="stats-table" id="call-table">
            <thead>
              <tr>
                <th scope="col">时间</th>
                <th scope="col">步骤</th>
                <th scope="col">caller</th>
                <th scope="col">model</th>
                <th scope="col" class="num">prompt</th>
                <th scope="col" class="num">未缓存</th>
                <th scope="col" class="num">cached</th>
                <th scope="col">断开</th>
                <th scope="col" class="num">花销</th>
              </tr>
            </thead>
            <tbody id="rows"></tbody>
          </table>
          <div class="stats-empty" id="empty" hidden>
            <strong>这段时间没有调用记录</strong>
            换个区间，或先在对话里跑一轮再回来。
          </div>
        </div>
      </main>
    </div>

    <script type="module" src="/stats.js"></script>
  </body>
</html>