@dianshuv/copilot-api 0.2.3 → 0.3.0

package/README.md

@@ -97,7 +97,7 @@ copilot-api start
 | `/usage` | GET | Copilot usage stats |
 | `/token` | GET | Current Copilot token |
 | `/health` | GET | Health check |
-| `/history` | GET | Request history Web UI (enabled by default) |
+| `/history` | GET | Request history Web UI with token analytics (enabled by default) |
 | `/history/api/*` | GET/DELETE | History API endpoints |
 
 ## Using with Claude Code

package/dist/main.mjs

@@ -1017,7 +1017,7 @@ const patchClaude = defineCommand({
 
 //#endregion
 //#region package.json
-var version = "0.2.3";
+var version = "0.3.0";
 
 //#endregion
 //#region src/lib/adaptive-rate-limiter.ts
@@ -1533,6 +1533,37 @@ function getStats() {
 		activeSessions
 	};
 }
+function getTokenStats() {
+	const models = {};
+	const timeline = [];
+	for (const entry of historyState.entries) {
+		if (!entry.response) continue;
+		const model = entry.response.model || entry.request.model;
+		const inputTokens = entry.response.usage.input_tokens;
+		const outputTokens = entry.response.usage.output_tokens;
+		const existing = models[model];
+		if (existing) {
+			existing.inputTokens += inputTokens;
+			existing.outputTokens += outputTokens;
+			existing.requestCount++;
+		} else models[model] = {
+			inputTokens,
+			outputTokens,
+			requestCount: 1
+		};
+		timeline.push({
+			timestamp: entry.timestamp,
+			model,
+			inputTokens,
+			outputTokens
+		});
+	}
+	timeline.sort((a, b) => a.timestamp - b.timestamp);
+	return {
+		models,
+		timeline
+	};
+}
 function exportHistory(format = "json") {
 	if (format === "json") return JSON.stringify({
 		sessions: Array.from(historyState.sessions.values()),
@@ -3360,6 +3391,11 @@ function handleDeleteSession(c) {
 		message: "Session deleted"
 	});
 }
+function handleGetTokenStats(c) {
+	if (!isHistoryEnabled()) return c.json({ error: "History recording is not enabled" }, 400);
+	const stats = getTokenStats();
+	return c.json(stats);
+}
 
 //#endregion
 //#region src/routes/history/ui/script.ts
@@ -3908,6 +3944,203 @@ setInterval(() => {
   loadStats();
   loadSessions();
 }, 10000);
+
+// Tab switching
+function switchTab(tab) {
+  document.querySelectorAll('.tab-item').forEach(t => t.classList.remove('active'));
+  document.querySelector('.tab-item[data-tab="' + tab + '"]').classList.add('active');
+
+  document.querySelectorAll('.tab-panel').forEach(p => p.style.display = 'none');
+  const panel = document.getElementById('tab-' + tab);
+  panel.style.display = tab === 'requests' ? 'flex' : 'block';
+
+  if (tab === 'tokens') {
+    panel.setAttribute('data-loaded', 'true');
+    loadTokenStats();
+  }
+}
+
+async function loadTokenStats() {
+  const container = document.getElementById('tokens-table-container');
+  container.innerHTML = '<div class="loading">Loading...</div>';
+
+  try {
+    const res = await fetch('/history/api/token-stats');
+    const data = await res.json();
+    if (data.error) {
+      container.innerHTML = '<div class="empty-state"><h3>History Not Enabled</h3><p>Start server with --history</p></div>';
+      return;
+    }
+
+    const modelNames = Object.keys(data.models);
+    if (modelNames.length === 0) {
+      container.innerHTML = '<div class="empty-state"><h3>No token data</h3><p>Make some API requests first</p></div>';
+      document.getElementById('chart-fallback').style.display = 'block';
+      document.getElementById('chart-fallback').textContent = 'No data available for chart.';
+      return;
+    }
+
+    // Sort models by total tokens descending
+    modelNames.sort((a, b) => {
+      const totalA = data.models[a].inputTokens + data.models[a].outputTokens;
+      const totalB = data.models[b].inputTokens + data.models[b].outputTokens;
+      return totalB - totalA;
+    });
+
+    // Reset chart fallback state
+    document.getElementById('chart-fallback').style.display = 'none';
+    document.getElementById('token-chart').style.display = '';
+
+    // Render table
+    let totalInput = 0, totalOutput = 0, totalReqs = 0;
+    let rows = '';
+    for (const model of modelNames) {
+      const m = data.models[model];
+      const total = m.inputTokens + m.outputTokens;
+      totalInput += m.inputTokens;
+      totalOutput += m.outputTokens;
+      totalReqs += m.requestCount;
+      rows += '<tr>'
+        + '<td>' + escapeHtml(model) + '</td>'
+        + '<td class="number">' + formatNumber(m.inputTokens) + '</td>'
+        + '<td class="number">' + formatNumber(m.outputTokens) + '</td>'
+        + '<td class="number">' + formatNumber(total) + '</td>'
+        + '<td class="number">' + m.requestCount + '</td>'
+        + '</tr>';
+    }
+
+    container.innerHTML = '<table class="tokens-table">'
+      + '<thead><tr><th>Model</th><th class="number">Input Tokens</th><th class="number">Output Tokens</th><th class="number">Total Tokens</th><th class="number">Requests</th></tr></thead>'
+      + '<tbody>' + rows + '</tbody>'
+      + '<tfoot><tr><td>Total</td>'
+      + '<td class="number">' + formatNumber(totalInput) + '</td>'
+      + '<td class="number">' + formatNumber(totalOutput) + '</td>'
+      + '<td class="number">' + formatNumber(totalInput + totalOutput) + '</td>'
+      + '<td class="number">' + totalReqs + '</td>'
+      + '</tr></tfoot></table>';
+
+    // Render chart
+    renderTokenChart(data.timeline, modelNames);
+  } catch (e) {
+    container.innerHTML = '<div class="empty-state">Error: ' + e.message + '</div>';
+  }
+}
+
+let tokenChart = null;
+let tokenChartListenersAdded = false;
+
+function renderTokenChart(timeline, modelNames) {
+  if (typeof echarts === 'undefined') {
+    document.getElementById('chart-fallback').style.display = 'block';
+    document.getElementById('token-chart').style.display = 'none';
+    return;
+  }
+
+  const chartDom = document.getElementById('token-chart');
+  const isDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+
+  if (tokenChart) {
+    tokenChart.dispose();
+  }
+  tokenChart = echarts.init(chartDom, isDark ? 'dark' : null);
+
+  // Group timeline by model and compute cumulative totals
+  const seriesData = {};
+  for (const name of modelNames) {
+    seriesData[name] = [];
+  }
+
+  // Build cumulative data per model (timeline is already sorted by backend)
+  const cumulative = {};
+  for (const name of modelNames) {
+    cumulative[name] = 0;
+  }
+
+  for (const point of timeline) {
+    const total = point.inputTokens + point.outputTokens;
+    cumulative[point.model] += total;
+    seriesData[point.model].push([point.timestamp, cumulative[point.model]]);
+  }
+
+  const colors = ['#58a6ff', '#3fb950', '#f85149', '#d29922', '#a371f7', '#39c5cf', '#f778ba', '#79c0ff', '#7ee787', '#ffa657'];
+
+  const series = modelNames.map((name, i) => ({
+    name: name,
+    type: 'line',
+    data: seriesData[name],
+    smooth: true,
+    symbol: 'circle',
+    symbolSize: 4,
+    lineStyle: { width: 2 },
+    itemStyle: { color: colors[i % colors.length] },
+    areaStyle: { opacity: 0.05 },
+  }));
+
+  const style = getComputedStyle(document.documentElement);
+  const textColor = style.getPropertyValue('--text').trim();
+  const borderColor = style.getPropertyValue('--border').trim();
+  const bgColor = style.getPropertyValue('--bg').trim();
+
+  const option = {
+    backgroundColor: 'transparent',
+    tooltip: {
+      trigger: 'item',
+      backgroundColor: bgColor,
+      borderColor: borderColor,
+      textStyle: { color: textColor, fontSize: 12 },
+      formatter: function(params) {
+        const d = new Date(params.data[0]);
+        const time = d.toLocaleDateString() + ' ' + d.toLocaleTimeString();
+        return '<b>' + params.seriesName + '</b><br/>'
+          + time + '<br/>'
+          + 'Cumulative: ' + formatNumber(params.data[1]) + ' tokens';
+      }
+    },
+    legend: {
+      data: modelNames,
+      textStyle: { color: textColor, fontSize: 12 },
+      top: 0,
+    },
+    grid: {
+      left: 60,
+      right: 20,
+      top: 40,
+      bottom: 40,
+    },
+    xAxis: {
+      type: 'time',
+      axisLine: { lineStyle: { color: borderColor } },
+      axisLabel: { color: textColor, fontSize: 11 },
+      splitLine: { show: false },
+    },
+    yAxis: {
+      type: 'value',
+      axisLine: { lineStyle: { color: borderColor } },
+      axisLabel: {
+        color: textColor,
+        fontSize: 11,
+        formatter: function(v) { return formatNumber(v); }
+      },
+      splitLine: { lineStyle: { color: borderColor, opacity: 0.3 } },
+    },
+    series: series,
+  };
+
+  tokenChart.setOption(option);
+
+  // Add global listeners only once
+  if (!tokenChartListenersAdded) {
+    tokenChartListenersAdded = true;
+    window.addEventListener('resize', function() {
+      if (tokenChart) tokenChart.resize();
+    });
+    window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', function() {
+      if (document.getElementById('tab-tokens').getAttribute('data-loaded') === 'true') {
+        loadTokenStats();
+      }
+    });
+  }
+}
 `;
 
 //#endregion
@@ -3948,10 +4181,39 @@ body {
   color: var(--text);
   line-height: 1.4;
   font-size: 13px;
+  height: 100vh;
+  display: flex;
+  flex-direction: column;
+}
+
+/* Tab bar */
+.tab-bar {
+  display: flex;
+  gap: 0;
+  border-bottom: 1px solid var(--border);
+  background: var(--bg-secondary);
+  padding: 0 16px;
+  flex-shrink: 0;
+}
+.tab-item {
+  padding: 10px 20px;
+  cursor: pointer;
+  font-size: 13px;
+  font-weight: 500;
+  color: var(--text-muted);
+  border-bottom: 2px solid transparent;
+  transition: all 0.15s;
+  user-select: none;
+}
+.tab-item:hover { color: var(--text); }
+.tab-item.active {
+  color: var(--primary);
+  border-bottom-color: var(--primary);
 }
+.tab-panel { flex: 1; overflow: hidden; }
 
 /* Layout */
-.layout { display: flex; height: 100vh; }
+.layout { display: flex; height: 100%; }
 .sidebar {
   width: 280px;
   border-right: 1px solid var(--border);
@@ -4286,11 +4548,67 @@ input::placeholder { color: var(--text-dim); }
   white-space: pre-wrap;
   word-break: break-word;
 }
+
+/* Tokens tab */
+.tokens-container {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  overflow-y: auto;
+}
+.tokens-header {
+  padding: 12px 16px;
+  border-bottom: 1px solid var(--border);
+  background: var(--bg-secondary);
+}
+.tokens-header h1 { font-size: 16px; font-weight: 600; }
+.tokens-table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: 13px;
+}
+.tokens-table th {
+  text-align: left;
+  padding: 10px 16px;
+  border-bottom: 2px solid var(--border);
+  color: var(--text-muted);
+  font-size: 11px;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  font-weight: 600;
+}
+.tokens-table td {
+  padding: 10px 16px;
+  border-bottom: 1px solid var(--border);
+}
+.tokens-table tr:hover td { background: var(--bg-secondary); }
+.tokens-table .number { text-align: right; font-family: 'SF Mono', Monaco, 'Courier New', monospace; }
+.tokens-table tfoot td {
+  font-weight: 600;
+  border-top: 2px solid var(--border);
+}
+.chart-section { flex: 1; min-height: 0; display: flex; flex-direction: column; padding: 16px; }
+.chart-title { font-size: 14px; font-weight: 600; margin-bottom: 12px; }
+.chart-container { flex: 1; min-height: 400px; }
+.chart-fallback {
+  padding: 40px 20px;
+  text-align: center;
+  color: var(--text-muted);
+  background: var(--bg-secondary);
+  border-radius: 8px;
+  border: 1px solid var(--border);
+}
 `;
 
 //#endregion
 //#region src/routes/history/ui/template.ts
 const template = `
+<div class="tab-bar">
+  <div class="tab-item active" onclick="switchTab('requests')" data-tab="requests">Requests</div>
+  <div class="tab-item" onclick="switchTab('tokens')" data-tab="tokens">Tokens</div>
+</div>
+
+<div id="tab-requests" class="tab-panel">
 <div class="layout">
   <!-- Sidebar: Sessions -->
   <div class="sidebar">
@@ -4354,6 +4672,25 @@ const template = `
     </div>
   </div>
 </div>
+</div>
+
+<div id="tab-tokens" class="tab-panel" style="display:none" data-loaded="false">
+  <div class="tokens-container">
+    <div class="tokens-header">
+      <h1>Token Analytics</h1>
+    </div>
+    <div id="tokens-table-container">
+      <div class="loading">Loading...</div>
+    </div>
+    <div class="chart-section">
+      <h2 class="chart-title">Cumulative Token Usage</h2>
+      <div class="chart-container" id="token-chart"></div>
+      <div class="chart-fallback" id="chart-fallback" style="display:none">
+        ECharts library failed to load. Token chart is unavailable.
+      </div>
+    </div>
+  </div>
+</div>
 
 <!-- Raw JSON Modal -->
 <div class="modal-overlay" id="raw-modal" onclick="closeRawModal(event)">
@@ -4382,6 +4719,7 @@ function getHistoryUI() {
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Copilot API - Request History</title>
   <link rel="icon" href="data:,">
+  <script defer src="https://cdn.jsdelivr.net/npm/echarts@5/dist/echarts.min.js"><\/script>
   <style>${styles}</style>
 </head>
 <body>
@@ -4398,6 +4736,7 @@ historyRoutes.get("/api/entries", handleGetEntries);
 historyRoutes.get("/api/entries/:id", handleGetEntry);
 historyRoutes.delete("/api/entries", handleDeleteEntries);
 historyRoutes.get("/api/stats", handleGetStats);
+historyRoutes.get("/api/token-stats", handleGetTokenStats);
 historyRoutes.get("/api/export", handleExport);
 historyRoutes.get("/api/sessions", handleGetSessions);
 historyRoutes.get("/api/sessions/:id", handleGetSession);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dianshuv/copilot-api",
-  "version": "0.2.3",
+  "version": "0.3.0",
   "description": "Turn GitHub Copilot into OpenAI/Anthropic API compatible server. Usable with Claude Code!",
   "author": "dianshuv",
   "type": "module",