ccus-cli 0.1.3 → 0.1.4

package/dist/lib/aggregate-dashboard.js

@@ -126,16 +126,16 @@ function statValue(value, suffix = "%") {
  */
 function renderDailyUserRequestChart(people, dailyIndex, dateAxis) {
     if (people.length === 0 || dateAxis.length === 0) {
-        return `
-      <section class="panel chart-panel">
-        <div class="panel-header">
-          <div>
-            <p class="eyebrow">Daily User Requests</p>
-            <h2>每日用户请求数对比</h2>
-          </div>
-          <p class="muted">没有可绘制的日度数据。</p>
-        </div>
-      </section>
+        return `
+      <section class="panel chart-panel">
+        <div class="panel-header">
+          <div>
+            <p class="eyebrow">Daily User Requests</p>
+            <h2>每日用户请求数对比</h2>
+          </div>
+          <p class="muted">没有可绘制的日度数据。</p>
+        </div>
+      </section>
     `;
     }
     const width = 920;
@@ -184,22 +184,22 @@ function renderDailyUserRequestChart(people, dailyIndex, dateAxis) {
         return `<span class="legend-chip"><span class="legend-dot" style="background:${color}"></span>${escapeHtml(series.person.personKey)}</span>`;
     })
         .join("");
-    return `
-    <section class="panel chart-panel">
-      <div class="panel-header">
-        <div>
-          <p class="eyebrow">Daily User Requests</p>
-          <h2>每日用户请求数对比</h2>
-        </div>
-        <p class="muted">基于每人 daily 汇总中的 userMessageCount（已剔除 tool_result 工具回填；sidechain 子 agent 提示保留）。</p>
-      </div>
-      <div class="legend">${legend}</div>
-      <svg viewBox="0 0 ${width} ${height}" class="chart" role="img" aria-label="每日用户请求数对比">
-        ${ticks}
-        ${xLabels}
-        ${seriesPaths}
-      </svg>
-    </section>
+    return `
+    <section class="panel chart-panel">
+      <div class="panel-header">
+        <div>
+          <p class="eyebrow">Daily User Requests</p>
+          <h2>每日用户请求数对比</h2>
+        </div>
+        <p class="muted">基于每人 daily 汇总中的 userMessageCount（已剔除 tool_result 工具回填；sidechain 子 agent 提示保留）。</p>
+      </div>
+      <div class="legend">${legend}</div>
+      <svg viewBox="0 0 ${width} ${height}" class="chart" role="img" aria-label="每日用户请求数对比">
+        ${ticks}
+        ${xLabels}
+        ${seriesPaths}
+      </svg>
+    </section>
   `;
 }
 /**
@@ -213,16 +213,16 @@ function renderSevenDayPeakChart(people) {
         .filter((person) => person.sevenDayPeakUsagePct !== null)
         .sort((left, right) => (right.sevenDayPeakUsagePct ?? 0) - (left.sevenDayPeakUsagePct ?? 0));
     if (ranked.length === 0) {
-        return `
-      <section class="panel chart-panel">
-        <div class="panel-header">
-          <div>
-            <p class="eyebrow">Weekly Peak Usage</p>
-            <h2>周使用量峰值对比</h2>
-          </div>
-          <p class="muted">还没有 7 天额度使用率样本。</p>
-        </div>
-      </section>
+        return `
+      <section class="panel chart-panel">
+        <div class="panel-header">
+          <div>
+            <p class="eyebrow">Weekly Peak Usage</p>
+            <h2>周使用量峰值对比</h2>
+          </div>
+          <p class="muted">还没有 7 天额度使用率样本。</p>
+        </div>
+      </section>
     `;
     }
     const rowHeight = 38;
@@ -243,28 +243,28 @@ function renderSevenDayPeakChart(people) {
         const barY = rowTop + (rowHeight - barHeight) / 2;
         const barWidth = Math.max(2, (pct / maxValue) * trackWidth);
         const textY = barY + barHeight / 2 + 4;
-        return `
-        <g>
-          <text x="8" y="${textY}" class="bar-label">${escapeHtml(person.personKey)}</text>
-          <rect x="${trackX}" y="${barY}" width="${trackWidth}" height="${barHeight}" rx="6" class="bar-track" />
-          <rect x="${trackX}" y="${barY}" width="${barWidth.toFixed(2)}" height="${barHeight}" rx="6" class="bar-fill" />
-          <text x="${trackX + trackWidth + 10}" y="${textY}" class="bar-value">${pct.toFixed(1)}%</text>
+        return `
+        <g>
+          <text x="8" y="${textY}" class="bar-label">${escapeHtml(person.personKey)}</text>
+          <rect x="${trackX}" y="${barY}" width="${trackWidth}" height="${barHeight}" rx="6" class="bar-track" />
+          <rect x="${trackX}" y="${barY}" width="${barWidth.toFixed(2)}" height="${barHeight}" rx="6" class="bar-fill" />
+          <text x="${trackX + trackWidth + 10}" y="${textY}" class="bar-value">${pct.toFixed(1)}%</text>
         </g>`;
     })
         .join("");
-    return `
-    <section class="panel chart-panel">
-      <div class="panel-header">
-        <div>
-          <p class="eyebrow">Weekly Peak Usage</p>
-          <h2>周使用量峰值对比</h2>
-        </div>
-        <p class="muted">每个人 7 天额度使用率（sevenDayPeakUsagePct）的峰值，条越长越接近用满周额度。</p>
-      </div>
-      <svg viewBox="0 0 ${width} ${height}" class="chart" role="img" aria-label="周使用量峰值对比">
-        ${bars}
-      </svg>
-    </section>
+    return `
+    <section class="panel chart-panel">
+      <div class="panel-header">
+        <div>
+          <p class="eyebrow">Weekly Peak Usage</p>
+          <h2>周使用量峰值对比</h2>
+        </div>
+        <p class="muted">每个人 7 天额度使用率（sevenDayPeakUsagePct）的峰值，条越长越接近用满周额度。</p>
+      </div>
+      <svg viewBox="0 0 ${width} ${height}" class="chart" role="img" aria-label="周使用量峰值对比">
+        ${bars}
+      </svg>
+    </section>
   `;
 }
 /** 把时间戳格式化成图表 X 轴用的本地「MM-DD HH:mm」短标签。 */
@@ -302,16 +302,16 @@ function renderFiveHourUsageChart(people, detailRows) {
         .filter((entry) => entry.fivePoints.length > 0 || entry.sevenPoints.length > 0);
     const allPoints = series.flatMap((entry) => [...entry.fivePoints, ...entry.sevenPoints]);
     if (allPoints.length === 0) {
-        return `
-      <section class="panel chart-panel">
-        <div class="panel-header">
-          <div>
-            <p class="eyebrow">Usage Detail</p>
-            <h2>5h / 7d 使用率详细曲线</h2>
-          </div>
-          <p class="muted">还没有带使用率的 statusline 采样。</p>
-        </div>
-      </section>
+        return `
+      <section class="panel chart-panel">
+        <div class="panel-header">
+          <div>
+            <p class="eyebrow">Usage Detail</p>
+            <h2>5h / 7d 使用率详细曲线</h2>
+          </div>
+          <p class="muted">还没有带使用率的 statusline 采样。</p>
+        </div>
+      </section>
     `;
     }
     const width = 920;
@@ -361,91 +361,91 @@ function renderFiveHourUsageChart(people, detailRows) {
         return `<span class="legend-chip"><span class="legend-dot" style="background:${color}"></span><span class="legend-dot" style="background:${sevenColor}"></span>${escapeHtml(entry.person.personKey)}</span>`;
     })
         .join("");
-    return `
-    <section class="panel chart-panel">
-      <div class="panel-header">
-        <div>
-          <p class="eyebrow">Usage Detail</p>
-          <h2>5h / 7d 使用率详细曲线</h2>
-        </div>
-        <p class="muted">每条 statusline 采样的 5 小时额度（实线）与 7 天周额度（对比色虚线）使用率，按真实时间戳绘制、共用 Y 轴。</p>
-      </div>
-      <div class="legend">
-        ${legend}
-        <span class="legend-chip"><span class="legend-line legend-line-solid"></span>5h 使用率（实线）</span>
-        <span class="legend-chip"><span class="legend-line legend-line-dashed"></span>7d 周使用量（对比色虚线）</span>
-      </div>
-      <svg viewBox="0 0 ${width} ${height}" class="chart" role="img" aria-label="5h / 7d 使用率详细曲线">
-        ${ticks}
-        ${xLabels}
-        ${seriesPaths}
-      </svg>
-    </section>
+    return `
+    <section class="panel chart-panel">
+      <div class="panel-header">
+        <div>
+          <p class="eyebrow">Usage Detail</p>
+          <h2>5h / 7d 使用率详细曲线</h2>
+        </div>
+        <p class="muted">每条 statusline 采样的 5 小时额度（实线）与 7 天周额度（对比色虚线）使用率，按真实时间戳绘制、共用 Y 轴。</p>
+      </div>
+      <div class="legend">
+        ${legend}
+        <span class="legend-chip"><span class="legend-line legend-line-solid"></span>5h 使用率（实线）</span>
+        <span class="legend-chip"><span class="legend-line legend-line-dashed"></span>7d 周使用量（对比色虚线）</span>
+      </div>
+      <svg viewBox="0 0 ${width} ${height}" class="chart" role="img" aria-label="5h / 7d 使用率详细曲线">
+        ${ticks}
+        ${xLabels}
+        ${seriesPaths}
+      </svg>
+    </section>
   `;
 }
 /** 按人渲染汇总卡片，给出请求 / 消息 / token / usage 几个核心指标。 */
 function renderPeopleLeaderboard(people) {
     if (people.length === 0) {
-        return `
-      <section class="panel table-panel">
-        <div class="panel-header">
-          <div>
-            <p class="eyebrow">People</p>
-            <h2>多人对比</h2>
-          </div>
-          <p class="muted">还没有匹配的导出 bundle。</p>
-        </div>
-      </section>
+        return `
+      <section class="panel table-panel">
+        <div class="panel-header">
+          <div>
+            <p class="eyebrow">People</p>
+            <h2>多人对比</h2>
+          </div>
+          <p class="muted">还没有匹配的导出 bundle。</p>
+        </div>
+      </section>
     `;
     }
     const rows = people
-        .map((person, index) => `
-      <tr>
-        <td class="rank">${index + 1}</td>
-        <td><strong>${escapeHtml(person.personKey)}</strong></td>
-        <td>${formatNumber(person.userMessageCount)}</td>
-        <td>${formatTokensM(person.inputTokens)}</td>
-        <td>${formatTokensM(person.outputTokens)}</td>
-        <td>${formatTokensM(person.cacheReadInputTokens)}</td>
-        <td>${escapeHtml(statValue(person.fiveHourPeakUsagePct))}</td>
-        <td>${escapeHtml(statValue(person.fiveHourLatestUsagePct))}</td>
-        <td>${escapeHtml(statValue(person.sevenDayPeakUsagePct))}</td>
-        <td>${escapeHtml(statValue(person.sevenDayLatestUsagePct))}</td>
-        <td>${person.activeDays}</td>
-        <td class="muted-col">${formatNumber(person.apiRequestCount)}</td>
+        .map((person, index) => `
+      <tr>
+        <td class="rank">${index + 1}</td>
+        <td><strong>${escapeHtml(person.personKey)}</strong></td>
+        <td>${formatNumber(person.userMessageCount)}</td>
+        <td>${formatTokensM(person.inputTokens)}</td>
+        <td>${formatTokensM(person.outputTokens)}</td>
+        <td>${formatTokensM(person.cacheReadInputTokens)}</td>
+        <td>${escapeHtml(statValue(person.fiveHourPeakUsagePct))}</td>
+        <td>${escapeHtml(statValue(person.fiveHourLatestUsagePct))}</td>
+        <td>${escapeHtml(statValue(person.sevenDayPeakUsagePct))}</td>
+        <td>${escapeHtml(statValue(person.sevenDayLatestUsagePct))}</td>
+        <td>${person.activeDays}</td>
+        <td class="muted-col">${formatNumber(person.apiRequestCount)}</td>
       </tr>`)
         .join("");
-    return `
-    <section class="panel table-panel">
-      <div class="panel-header">
-        <div>
-          <p class="eyebrow">People</p>
-          <h2>多人对比</h2>
-        </div>
-        <p class="muted">按用户消息数降序排列，所有数字直接来自 daily/weekly 汇总。</p>
-      </div>
-      <div class="table-wrap">
-        <table>
-          <thead>
-            <tr>
-              <th>#</th>
-              <th>personKey</th>
-              <th>消息</th>
-              <th>Input tokens</th>
-              <th>Output tokens</th>
-              <th>Cache read tokens</th>
-              <th>5h Peak</th>
-              <th>5h Latest</th>
-              <th>7d Peak</th>
-              <th>7d Latest</th>
-              <th>活跃天数</th>
-              <th class="muted-col">API 请求</th>
-            </tr>
-          </thead>
-          <tbody>${rows}</tbody>
-        </table>
-      </div>
-    </section>
+    return `
+    <section class="panel table-panel">
+      <div class="panel-header">
+        <div>
+          <p class="eyebrow">People</p>
+          <h2>多人对比</h2>
+        </div>
+        <p class="muted">按用户消息数降序排列，所有数字直接来自 daily/weekly 汇总。</p>
+      </div>
+      <div class="table-wrap">
+        <table>
+          <thead>
+            <tr>
+              <th>#</th>
+              <th>personKey</th>
+              <th>消息</th>
+              <th>Input tokens</th>
+              <th>Output tokens</th>
+              <th>Cache read tokens</th>
+              <th>5h Peak</th>
+              <th>5h Latest</th>
+              <th>7d Peak</th>
+              <th>7d Latest</th>
+              <th>活跃天数</th>
+              <th class="muted-col">API 请求</th>
+            </tr>
+          </thead>
+          <tbody>${rows}</tbody>
+        </table>
+      </div>
+    </section>
   `;
 }
 /** 把 daily 行按 personKey × date 排成一个矩阵表。 */
@@ -470,27 +470,27 @@ function renderDailyMatrix(people, dailyIndex, dateAxis) {
         return `<tr><th class="row-head">${escapeHtml(person.personKey)}</th>${cells}</tr>`;
     })
         .join("");
-    return `
-    <section class="panel table-panel">
-      <div class="panel-header">
-        <div>
-          <p class="eyebrow">Daily Matrix</p>
-          <h2>按天 × 人 矩阵</h2>
-        </div>
-        <p class="muted">单元格上方为用户消息数，下方为 API 请求数。</p>
-      </div>
-      <div class="table-wrap">
-        <table class="matrix">
-          <thead>
-            <tr>
-              <th class="row-head">personKey</th>
-              ${headerCells}
-            </tr>
-          </thead>
-          <tbody>${bodyRows}</tbody>
-        </table>
-      </div>
-    </section>
+    return `
+    <section class="panel table-panel">
+      <div class="panel-header">
+        <div>
+          <p class="eyebrow">Daily Matrix</p>
+          <h2>按天 × 人 矩阵</h2>
+        </div>
+        <p class="muted">单元格上方为用户消息数，下方为 API 请求数。</p>
+      </div>
+      <div class="table-wrap">
+        <table class="matrix">
+          <thead>
+            <tr>
+              <th class="row-head">personKey</th>
+              ${headerCells}
+            </tr>
+          </thead>
+          <tbody>${bodyRows}</tbody>
+        </table>
+      </div>
+    </section>
   `;
 }
 /** 把 weekly 行也照搬出来，便于看每个人每个 ISO 周的总账。 */
@@ -505,51 +505,51 @@ function renderWeeklyTable(weeklyRows) {
         return left.personKey.localeCompare(right.personKey);
     });
     const rows = sorted
-        .map((row) => `
-      <tr>
-        <td>${escapeHtml(row.week)}</td>
-        <td>${escapeHtml(row.personKey)}</td>
-        <td>${formatNumber(row.userMessageCount)}</td>
-        <td>${formatTokensM(row.inputTokens)}</td>
-        <td>${formatTokensM(row.outputTokens)}</td>
-        <td>${formatTokensM(row.cacheReadInputTokens)}</td>
-        <td>${escapeHtml(statValue(row.fiveHourPeakUsagePct))}</td>
-        <td>${escapeHtml(statValue(row.fiveHourLatestUsagePct))}</td>
-        <td>${escapeHtml(statValue(row.sevenDayPeakUsagePct))}</td>
-        <td>${escapeHtml(statValue(row.sevenDayLatestUsagePct))}</td>
-        <td class="muted-col">${formatNumber(row.apiRequestCount)}</td>
+        .map((row) => `
+      <tr>
+        <td>${escapeHtml(row.week)}</td>
+        <td>${escapeHtml(row.personKey)}</td>
+        <td>${formatNumber(row.userMessageCount)}</td>
+        <td>${formatTokensM(row.inputTokens)}</td>
+        <td>${formatTokensM(row.outputTokens)}</td>
+        <td>${formatTokensM(row.cacheReadInputTokens)}</td>
+        <td>${escapeHtml(statValue(row.fiveHourPeakUsagePct))}</td>
+        <td>${escapeHtml(statValue(row.fiveHourLatestUsagePct))}</td>
+        <td>${escapeHtml(statValue(row.sevenDayPeakUsagePct))}</td>
+        <td>${escapeHtml(statValue(row.sevenDayLatestUsagePct))}</td>
+        <td class="muted-col">${formatNumber(row.apiRequestCount)}</td>
       </tr>`)
         .join("");
-    return `
-    <section class="panel table-panel">
-      <div class="panel-header">
-        <div>
-          <p class="eyebrow">Weekly Rollup</p>
-          <h2>按周聚合</h2>
-        </div>
-        <p class="muted">直接来源于每个 bundle 的 weeklySummary。</p>
-      </div>
-      <div class="table-wrap">
-        <table>
-          <thead>
-            <tr>
-              <th>周起始</th>
-              <th>personKey</th>
-              <th>消息</th>
-              <th>Input tokens</th>
-              <th>Output tokens</th>
-              <th>Cache read tokens</th>
-              <th>5h Peak</th>
-              <th>5h Latest</th>
-              <th>7d Peak</th>
-              <th>7d Latest</th>
-              <th class="muted-col">API 请求</th>
-            </tr>
-          </thead>
-          <tbody>${rows}</tbody>
-        </table>
-      </div>
-    </section>
+    return `
+    <section class="panel table-panel">
+      <div class="panel-header">
+        <div>
+          <p class="eyebrow">Weekly Rollup</p>
+          <h2>按周聚合</h2>
+        </div>
+        <p class="muted">直接来源于每个 bundle 的 weeklySummary。</p>
+      </div>
+      <div class="table-wrap">
+        <table>
+          <thead>
+            <tr>
+              <th>周起始</th>
+              <th>personKey</th>
+              <th>消息</th>
+              <th>Input tokens</th>
+              <th>Output tokens</th>
+              <th>Cache read tokens</th>
+              <th>5h Peak</th>
+              <th>5h Latest</th>
+              <th>7d Peak</th>
+              <th>7d Latest</th>
+              <th class="muted-col">API 请求</th>
+            </tr>
+          </thead>
+          <tbody>${rows}</tbody>
+        </table>
+      </div>
+    </section>
   `;
 }
 /**
@@ -566,209 +566,209 @@ function buildAggregateDashboardHtml(detailRows, dailyRows, weeklyRows, generate
     const peakUsage = maxOrNull(people.map((person) => person.fiveHourPeakUsagePct));
     const peakSevenDay = maxOrNull(people.map((person) => person.sevenDayPeakUsagePct));
     const rangeLabel = overall.startDate && overall.endDate ? `${overall.startDate} → ${overall.endDate}` : "--";
-    return `<!doctype html>
-<html lang="zh-CN">
-  <head>
-    <meta charset="utf-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <title>ccus team dashboard</title>
-    <style>
-      :root {
-        --bg: #0a0d12;
-        --panel: rgba(16, 21, 31, 0.84);
-        --panel-border: rgba(120, 141, 173, 0.18);
-        --text: #ecf3ff;
-        --muted: #91a0b8;
-        --accent: #5eead4;
-        --accent-strong: #22c55e;
-        --warning: #f59e0b;
-        --grid: rgba(145, 160, 184, 0.15);
-        --shadow: 0 24px 80px rgba(0, 0, 0, 0.35);
-      }
-      * { box-sizing: border-box; }
-      body {
-        margin: 0;
-        font-family: Georgia, "Times New Roman", serif;
-        color: var(--text);
-        background:
-          radial-gradient(circle at top left, rgba(34, 197, 94, 0.18), transparent 30%),
-          radial-gradient(circle at top right, rgba(94, 234, 212, 0.16), transparent 28%),
-          linear-gradient(160deg, #06080c 0%, #0a0d12 48%, #101520 100%);
-        min-height: 100vh;
-      }
-      .shell {
-        max-width: 1240px;
-        margin: 0 auto;
-        padding: 40px 24px 64px;
-      }
-      .hero {
-        display: grid;
-        gap: 16px;
-        padding: 28px 0 18px;
-      }
-      .eyebrow {
-        margin: 0 0 8px;
-        color: var(--accent);
-        text-transform: uppercase;
-        letter-spacing: 0.14em;
-        font-size: 12px;
-      }
-      h1, h2, p { margin: 0; }
-      h1 {
-        font-size: clamp(36px, 5vw, 60px);
-        line-height: 0.95;
-        font-weight: 600;
-      }
-      .subtitle {
-        max-width: 820px;
-        color: var(--muted);
-        font-size: 16px;
-        line-height: 1.6;
-      }
-      .hero-meta {
-        display: flex;
-        flex-wrap: wrap;
-        gap: 12px;
-        color: var(--muted);
-        font-size: 14px;
-      }
-      .hero-chip {
-        padding: 8px 12px;
-        border-radius: 999px;
-        border: 1px solid var(--panel-border);
-        background: rgba(9, 12, 18, 0.56);
-      }
-      .stats {
-        display: grid;
-        grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
-        gap: 16px;
-        margin: 24px 0 28px;
-      }
-      .panel {
-        background: var(--panel);
-        backdrop-filter: blur(18px);
-        border: 1px solid var(--panel-border);
-        border-radius: 24px;
-        box-shadow: var(--shadow);
-      }
-      .stat-card { padding: 20px; min-height: 128px; }
-      .stat-card h2 { font-size: 14px; color: var(--muted); font-weight: 500; }
-      .stat-value { margin-top: 16px; font-size: 36px; line-height: 0.95; }
-      .stat-note { margin-top: 12px; color: var(--muted); font-size: 13px; }
-      .panel-header {
-        display: flex;
-        align-items: end;
-        justify-content: space-between;
-        gap: 16px;
-        padding: 24px 24px 0;
-      }
-      .panel-header h2 { font-size: 28px; line-height: 1; }
-      .muted { color: var(--muted); font-size: 14px; }
-      .chart-panel { padding-bottom: 22px; margin-top: 22px; }
-      .chart { width: 100%; height: auto; display: block; padding: 12px 20px 6px; }
-      .chart-grid { stroke: var(--grid); stroke-width: 1; }
-      .chart-axis { fill: var(--muted); font-size: 11px; }
-      .chart-axis-line { stroke: var(--grid); stroke-width: 1; }
-      .legend {
-        display: flex;
-        flex-wrap: wrap;
-        gap: 10px 18px;
-        padding: 14px 24px 0;
-        color: var(--muted);
-        font-size: 13px;
-      }
-      .legend-chip { display: inline-flex; align-items: center; gap: 8px; }
-      .legend-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; }
-      .legend-line { display: inline-block; width: 22px; height: 0; border-top-width: 2px; border-top-style: solid; border-top-color: var(--muted); }
-      .legend-line-dashed { border-top-style: dashed; }
-      .table-panel { margin-top: 22px; }
-      .table-wrap { overflow: auto; padding: 16px 20px 22px; }
-      table { width: 100%; border-collapse: collapse; min-width: 760px; }
-      th, td {
-        text-align: left;
-        padding: 12px 10px;
-        border-bottom: 1px solid rgba(145, 160, 184, 0.12);
-        vertical-align: top;
-      }
-      th {
-        color: var(--muted);
-        font-size: 12px;
-        text-transform: uppercase;
-        letter-spacing: 0.08em;
-        font-weight: 500;
-      }
-      td { font-size: 14px; }
-      td.rank { color: var(--muted); width: 32px; }
-      .muted-col { color: var(--muted); font-size: 12px; }
-      .bar-label { fill: var(--text); font-size: 13px; }
-      .bar-value { fill: var(--accent); font-size: 13px; font-weight: 600; }
-      .bar-track { fill: rgba(145, 160, 184, 0.14); }
-      .bar-fill { fill: var(--accent); }
-      table.matrix th, table.matrix td { text-align: center; padding: 8px 10px; }
-      table.matrix th.row-head { text-align: left; }
-      table.matrix .cell-primary { display: block; color: var(--text); }
-      table.matrix .cell-secondary { display: block; color: var(--muted); font-size: 11px; }
-      table.matrix .muted-cell { color: rgba(145, 160, 184, 0.45); }
-      @media (max-width: 720px) {
-        .shell { padding-inline: 16px; }
-        .panel-header { flex-direction: column; align-items: start; }
-      }
-    </style>
-  </head>
-  <body>
-    <main class="shell">
-      <section class="hero">
-        <div>
-          <p class="eyebrow">Claude Code · Team Surface</p>
-          <h1>ccus team dashboard</h1>
-        </div>
-        <p class="subtitle">把目录里所有 export bundle 聚合到一起，看团队里每个人的 Claude Code 使用节奏：消息数、API 请求数、token 用量，以及 5 小时与 7 天额度使用率。</p>
-        <div class="hero-meta">
-          <span class="hero-chip">人数：${overall.personCount}</span>
-          <span class="hero-chip">时间范围：${escapeHtml(rangeLabel)}</span>
-          <span class="hero-chip">生成时间：${escapeHtml(generatedAt.toISOString())}</span>
-        </div>
-      </section>
-      <section class="stats">
-        <article class="panel stat-card">
-          <h2>Total user messages</h2>
-          <p class="stat-value">${formatNumber(overall.totalUserMessageCount)}</p>
-          <p class="stat-note">所有人发给 Claude 的非 meta 消息</p>
-        </article>
-        <article class="panel stat-card">
-          <h2>Total tokens (in+out)</h2>
-          <p class="stat-value">${formatTokensM(totalTokens)}</p>
-          <p class="stat-note">${formatTokensM(overall.totalInputTokens)} input / ${formatTokensM(overall.totalOutputTokens)} output</p>
-        </article>
-        <article class="panel stat-card">
-          <h2>Cache read tokens</h2>
-          <p class="stat-value">${formatTokensM(overall.totalCacheReadInputTokens)}</p>
-          <p class="stat-note">来自 assistant usage 的 cache_read_input_tokens</p>
-        </article>
-        <article class="panel stat-card">
-          <h2>Total API requests</h2>
-          <p class="stat-value">${formatNumber(overall.totalApiRequestCount)}</p>
-          <p class="stat-note">所有人 API 请求数合计（次要参考）</p>
-        </article>
-        <article class="panel stat-card">
-          <h2>Peak 5h usage</h2>
-          <p class="stat-value">${escapeHtml((0, time_1.roundNumber)(peakUsage, 1) === null ? "--" : statValue((0, time_1.roundNumber)(peakUsage, 1)))}</p>
-          <p class="stat-note">团队内观测到的 5 小时使用率峰值</p>
-        </article>
-        <article class="panel stat-card">
-          <h2>Peak 7d usage</h2>
-          <p class="stat-value">${escapeHtml((0, time_1.roundNumber)(peakSevenDay, 1) === null ? "--" : statValue((0, time_1.roundNumber)(peakSevenDay, 1)))}</p>
-          <p class="stat-note">团队内观测到的 7 天额度峰值</p>
-        </article>
-      </section>
-      ${renderPeopleLeaderboard(people)}
-      ${renderSevenDayPeakChart(people)}
-      ${renderFiveHourUsageChart(people, detailRows)}
-      ${renderDailyUserRequestChart(people, dailyIndex, dateAxis)}
-      ${renderDailyMatrix(people, dailyIndex, dateAxis)}
-      ${renderWeeklyTable(weeklyRows)}
-    </main>
-  </body>
+    return `<!doctype html>
+<html lang="zh-CN">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>ccus team dashboard</title>
+    <style>
+      :root {
+        --bg: #0a0d12;
+        --panel: rgba(16, 21, 31, 0.84);
+        --panel-border: rgba(120, 141, 173, 0.18);
+        --text: #ecf3ff;
+        --muted: #91a0b8;
+        --accent: #5eead4;
+        --accent-strong: #22c55e;
+        --warning: #f59e0b;
+        --grid: rgba(145, 160, 184, 0.15);
+        --shadow: 0 24px 80px rgba(0, 0, 0, 0.35);
+      }
+      * { box-sizing: border-box; }
+      body {
+        margin: 0;
+        font-family: Georgia, "Times New Roman", serif;
+        color: var(--text);
+        background:
+          radial-gradient(circle at top left, rgba(34, 197, 94, 0.18), transparent 30%),
+          radial-gradient(circle at top right, rgba(94, 234, 212, 0.16), transparent 28%),
+          linear-gradient(160deg, #06080c 0%, #0a0d12 48%, #101520 100%);
+        min-height: 100vh;
+      }
+      .shell {
+        max-width: 1240px;
+        margin: 0 auto;
+        padding: 40px 24px 64px;
+      }
+      .hero {
+        display: grid;
+        gap: 16px;
+        padding: 28px 0 18px;
+      }
+      .eyebrow {
+        margin: 0 0 8px;
+        color: var(--accent);
+        text-transform: uppercase;
+        letter-spacing: 0.14em;
+        font-size: 12px;
+      }
+      h1, h2, p { margin: 0; }
+      h1 {
+        font-size: clamp(36px, 5vw, 60px);
+        line-height: 0.95;
+        font-weight: 600;
+      }
+      .subtitle {
+        max-width: 820px;
+        color: var(--muted);
+        font-size: 16px;
+        line-height: 1.6;
+      }
+      .hero-meta {
+        display: flex;
+        flex-wrap: wrap;
+        gap: 12px;
+        color: var(--muted);
+        font-size: 14px;
+      }
+      .hero-chip {
+        padding: 8px 12px;
+        border-radius: 999px;
+        border: 1px solid var(--panel-border);
+        background: rgba(9, 12, 18, 0.56);
+      }
+      .stats {
+        display: grid;
+        grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
+        gap: 16px;
+        margin: 24px 0 28px;
+      }
+      .panel {
+        background: var(--panel);
+        backdrop-filter: blur(18px);
+        border: 1px solid var(--panel-border);
+        border-radius: 24px;
+        box-shadow: var(--shadow);
+      }
+      .stat-card { padding: 20px; min-height: 128px; }
+      .stat-card h2 { font-size: 14px; color: var(--muted); font-weight: 500; }
+      .stat-value { margin-top: 16px; font-size: 36px; line-height: 0.95; }
+      .stat-note { margin-top: 12px; color: var(--muted); font-size: 13px; }
+      .panel-header {
+        display: flex;
+        align-items: end;
+        justify-content: space-between;
+        gap: 16px;
+        padding: 24px 24px 0;
+      }
+      .panel-header h2 { font-size: 28px; line-height: 1; }
+      .muted { color: var(--muted); font-size: 14px; }
+      .chart-panel { padding-bottom: 22px; margin-top: 22px; }
+      .chart { width: 100%; height: auto; display: block; padding: 12px 20px 6px; }
+      .chart-grid { stroke: var(--grid); stroke-width: 1; }
+      .chart-axis { fill: var(--muted); font-size: 11px; }
+      .chart-axis-line { stroke: var(--grid); stroke-width: 1; }
+      .legend {
+        display: flex;
+        flex-wrap: wrap;
+        gap: 10px 18px;
+        padding: 14px 24px 0;
+        color: var(--muted);
+        font-size: 13px;
+      }
+      .legend-chip { display: inline-flex; align-items: center; gap: 8px; }
+      .legend-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; }
+      .legend-line { display: inline-block; width: 22px; height: 0; border-top-width: 2px; border-top-style: solid; border-top-color: var(--muted); }
+      .legend-line-dashed { border-top-style: dashed; }
+      .table-panel { margin-top: 22px; }
+      .table-wrap { overflow: auto; padding: 16px 20px 22px; }
+      table { width: 100%; border-collapse: collapse; min-width: 760px; }
+      th, td {
+        text-align: left;
+        padding: 12px 10px;
+        border-bottom: 1px solid rgba(145, 160, 184, 0.12);
+        vertical-align: top;
+      }
+      th {
+        color: var(--muted);
+        font-size: 12px;
+        text-transform: uppercase;
+        letter-spacing: 0.08em;
+        font-weight: 500;
+      }
+      td { font-size: 14px; }
+      td.rank { color: var(--muted); width: 32px; }
+      .muted-col { color: var(--muted); font-size: 12px; }
+      .bar-label { fill: var(--text); font-size: 13px; }
+      .bar-value { fill: var(--accent); font-size: 13px; font-weight: 600; }
+      .bar-track { fill: rgba(145, 160, 184, 0.14); }
+      .bar-fill { fill: var(--accent); }
+      table.matrix th, table.matrix td { text-align: center; padding: 8px 10px; }
+      table.matrix th.row-head { text-align: left; }
+      table.matrix .cell-primary { display: block; color: var(--text); }
+      table.matrix .cell-secondary { display: block; color: var(--muted); font-size: 11px; }
+      table.matrix .muted-cell { color: rgba(145, 160, 184, 0.45); }
+      @media (max-width: 720px) {
+        .shell { padding-inline: 16px; }
+        .panel-header { flex-direction: column; align-items: start; }
+      }
+    </style>
+  </head>
+  <body>
+    <main class="shell">
+      <section class="hero">
+        <div>
+          <p class="eyebrow">Claude Code · Team Surface</p>
+          <h1>ccus team dashboard</h1>
+        </div>
+        <p class="subtitle">把目录里所有 export bundle 聚合到一起，看团队里每个人的 Claude Code 使用节奏：消息数、API 请求数、token 用量，以及 5 小时与 7 天额度使用率。</p>
+        <div class="hero-meta">
+          <span class="hero-chip">人数：${overall.personCount}</span>
+          <span class="hero-chip">时间范围：${escapeHtml(rangeLabel)}</span>
+          <span class="hero-chip">生成时间：${escapeHtml(generatedAt.toISOString())}</span>
+        </div>
+      </section>
+      <section class="stats">
+        <article class="panel stat-card">
+          <h2>Total user messages</h2>
+          <p class="stat-value">${formatNumber(overall.totalUserMessageCount)}</p>
+          <p class="stat-note">所有人发给 Claude 的非 meta 消息</p>
+        </article>
+        <article class="panel stat-card">
+          <h2>Total tokens (in+out)</h2>
+          <p class="stat-value">${formatTokensM(totalTokens)}</p>
+          <p class="stat-note">${formatTokensM(overall.totalInputTokens)} input / ${formatTokensM(overall.totalOutputTokens)} output</p>
+        </article>
+        <article class="panel stat-card">
+          <h2>Cache read tokens</h2>
+          <p class="stat-value">${formatTokensM(overall.totalCacheReadInputTokens)}</p>
+          <p class="stat-note">来自 assistant usage 的 cache_read_input_tokens</p>
+        </article>
+        <article class="panel stat-card">
+          <h2>Total API requests</h2>
+          <p class="stat-value">${formatNumber(overall.totalApiRequestCount)}</p>
+          <p class="stat-note">所有人 API 请求数合计（次要参考）</p>
+        </article>
+        <article class="panel stat-card">
+          <h2>Peak 5h usage</h2>
+          <p class="stat-value">${escapeHtml((0, time_1.roundNumber)(peakUsage, 1) === null ? "--" : statValue((0, time_1.roundNumber)(peakUsage, 1)))}</p>
+          <p class="stat-note">团队内观测到的 5 小时使用率峰值</p>
+        </article>
+        <article class="panel stat-card">
+          <h2>Peak 7d usage</h2>
+          <p class="stat-value">${escapeHtml((0, time_1.roundNumber)(peakSevenDay, 1) === null ? "--" : statValue((0, time_1.roundNumber)(peakSevenDay, 1)))}</p>
+          <p class="stat-note">团队内观测到的 7 天额度峰值</p>
+        </article>
+      </section>
+      ${renderPeopleLeaderboard(people)}
+      ${renderSevenDayPeakChart(people)}
+      ${renderFiveHourUsageChart(people, detailRows)}
+      ${renderDailyUserRequestChart(people, dailyIndex, dateAxis)}
+      ${renderDailyMatrix(people, dailyIndex, dateAxis)}
+      ${renderWeeklyTable(weeklyRows)}
+    </main>
+  </body>
 </html>`;
 }
 //# sourceMappingURL=aggregate-dashboard.js.map