@lemantorus/opencode-analytics 1.0.0 → 1.0.1

package/README.md

@@ -1,10 +1,20 @@
 # OpenCode Analytics
 
+[![npm version](https://img.shields.io/npm/v/@lemantorus/opencode-analytics.svg)](https://www.npmjs.com/package/@lemantorus/opencode-analytics)
+[![npm downloads](https://img.shields.io/npm/dm/@lemantorus/opencode-analytics.svg)](https://www.npmjs.com/package/@lemantorus/opencode-analytics)
+
 > ⚠️ **Unofficial** - This is a community-built dashboard, not affiliated with or endorsed by [Anomaly](https://anoma.ly) (the creators of OpenCode).
 
 A beautiful, real-time analytics dashboard for OpenCode that visualizes your AI coding usage, token consumption, costs, and model performance.
 
-![Dashboard Preview](https://via.placeholder.com/800x400/0a0a0a/00ff88?text=OpenCode+Analytics+Dashboard)
+![Dashboard Preview](./screenshots/desktop.png)
+
+<details>
+<summary>📱 Mobile View</summary>
+
+![Mobile Preview](./screenshots/mobile.png)
+
+</details>
 
 ## Features
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lemantorus/opencode-analytics",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "description": "Analytics dashboard for OpenCode - visualize your AI coding usage (unofficial)",
   "main": "server/index.js",
   "bin": {
@@ -32,6 +32,7 @@
     "node": ">=18"
   },
   "dependencies": {
+    "compression": "^1.8.1",
     "express": "^4.22.1",
     "open": "^10.1.0"
   }

package/public/aggregator.js

@@ -0,0 +1,379 @@
+const Aggregator = (function() {
+  function normalizeModelName(modelId) {
+    if (!modelId) return 'unknown';
+    return modelId;
+  }
+
+  function getShortModelName(modelId) {
+    if (!modelId) return 'unknown';
+    return modelId
+      .replace(/^zai-org\//, '')
+      .replace(/-maas$/, '')
+      .replace(/-free$/, '')
+      .replace(/-flashx$/, '-flash');
+  }
+
+  function isFreeModel(modelId) {
+    if (!modelId) return false;
+    return modelId.includes('-free') || 
+           modelId === 'big-pickle' ||
+           modelId.includes('nemotron');
+  }
+
+  function filterByRange(messages, startTs, endTs) {
+    if (!startTs && !endTs) return messages;
+    return messages.filter(m => {
+      if (!m.ts) return false;
+      if (startTs && m.ts < startTs) return false;
+      if (endTs && m.ts > endTs) return false;
+      return true;
+    });
+  }
+
+  function filterByDays(messages, days) {
+    if (!days || days === 'all') return messages;
+    const cutoff = Date.now() - (days * 24 * 60 * 60 * 1000);
+    return messages.filter(m => m.ts && m.ts >= cutoff);
+  }
+
+  function getPricing(modelId, pricing, checkAsFree) {
+    const base = normalizeModelName(modelId);
+    const short = getShortModelName(modelId);
+    const isFree = isFreeModel(modelId);
+    
+    if (checkAsFree && isFree) {
+      return { input: 0, output: 0, cacheRead: 0, isFree: true };
+    }
+    
+    if (pricing[base]) return pricing[base];
+    if (pricing[short]) return pricing[short];
+    
+    return { input: 0, output: 0, cacheRead: 0, isFree };
+  }
+
+  function calcCost(msg, pricing, checkAsFree) {
+    const p = getPricing(msg.modelId, pricing, checkAsFree);
+    const inputCost = (msg.in || 0) * (p.input || 0);
+    const outputCost = ((msg.out || 0) + (msg.rs || 0)) * (p.output || 0);
+    const cacheCost = (msg.cr || 0) * (p.cacheRead || p.input || 0);
+    const cacheWriteCost = (msg.cw || 0) * (p.input || 0);
+    return inputCost + outputCost + cacheCost + cacheWriteCost;
+  }
+
+  function aggregateByPeriod(messages, period, pricing, checkAsFree) {
+    const groups = {};
+    
+    for (const msg of messages) {
+      if (!msg.ts) continue;
+      
+      const d = new Date(msg.ts);
+      let key;
+      
+      if (period === 'day') {
+        key = d.toISOString().split('T')[0];
+      } else if (period === 'week') {
+        const year = d.getFullYear();
+        const weekNum = getWeekNumber(d);
+        key = `${year}-${weekNum.toString().padStart(2, '0')}`;
+      } else if (period === 'month') {
+        key = d.toISOString().slice(0, 7);
+      } else {
+        key = d.toISOString().split('T')[0];
+      }
+      
+      if (!groups[key]) {
+        groups[key] = { time: key, inputTokens: 0, outputTokens: 0, cacheRead: 0, cacheWrite: 0, cost: 0, messageCount: 0 };
+      }
+      
+      groups[key].inputTokens += msg.in || 0;
+      groups[key].outputTokens += (msg.out || 0) + (msg.rs || 0);
+      groups[key].cacheRead += msg.cr || 0;
+      groups[key].cacheWrite += msg.cw || 0;
+      groups[key].cost += calcCost(msg, pricing, checkAsFree);
+      groups[key].messageCount += 1;
+    }
+    
+    return Object.values(groups).sort((a, b) => a.time.localeCompare(b.time));
+  }
+
+  function getWeekNumber(d) {
+    const date = new Date(Date.UTC(d.getFullYear(), d.getMonth(), d.getDate()));
+    const dayNum = date.getUTCDay() || 7;
+    date.setUTCDate(date.getUTCDate() + 4 - dayNum);
+    const yearStart = new Date(Date.UTC(date.getUTCFullYear(), 0, 1));
+    return Math.ceil((((date - yearStart) / 86400000) + 1) / 7);
+  }
+
+  function aggregateByHour(messages) {
+    const groups = {};
+    
+    for (const msg of messages) {
+      if (!msg.ts) continue;
+      const hour = new Date(msg.ts).getHours();
+      
+      if (!groups[hour]) {
+        groups[hour] = { hour, messageCount: 0, inputTokens: 0, outputTokens: 0, cacheRead: 0, cacheWrite: 0 };
+      }
+      
+      groups[hour].messageCount += 1;
+      groups[hour].inputTokens += msg.in || 0;
+      groups[hour].outputTokens += (msg.out || 0) + (msg.rs || 0);
+      groups[hour].cacheRead += msg.cr || 0;
+      groups[hour].cacheWrite += msg.cw || 0;
+    }
+    
+    const result = [];
+    for (let i = 0; i < 24; i++) {
+      result.push(groups[i] || { hour: i, messageCount: 0, inputTokens: 0, outputTokens: 0, cacheRead: 0, cacheWrite: 0 });
+    }
+    return result;
+  }
+
+  function aggregateByModel(messages, pricing, checkAsFree) {
+    const groups = {};
+    
+    for (const msg of messages) {
+      const modelId = msg.modelId || 'unknown';
+      const base = normalizeModelName(modelId);
+      
+      if (!groups[base]) {
+        groups[base] = {
+          modelId,
+          baseModel: base,
+          isFree: isFreeModel(modelId),
+          messageCount: 0,
+          inputTokens: 0,
+          outputTokens: 0,
+          cacheRead: 0,
+          cacheWrite: 0,
+          cost: 0
+        };
+      }
+      
+      groups[base].messageCount += 1;
+      groups[base].inputTokens += msg.in || 0;
+      groups[base].outputTokens += (msg.out || 0) + (msg.rs || 0);
+      groups[base].cacheRead += msg.cr || 0;
+      groups[base].cacheWrite += msg.cw || 0;
+      groups[base].cost += calcCost(msg, pricing, checkAsFree);
+    }
+    
+    return Object.values(groups).sort((a, b) => b.inputTokens - a.inputTokens);
+  }
+
+  function getOverview(messages, pricing, checkAsFree) {
+    let messageCount = 0;
+    let totalInput = 0;
+    let totalOutput = 0;
+    let totalCacheRead = 0;
+    let totalCacheWrite = 0;
+    let totalCost = 0;
+    let firstMessage = null;
+    let lastMessage = null;
+    
+    for (const msg of messages) {
+      messageCount += 1;
+      totalInput += msg.in || 0;
+      totalOutput += (msg.out || 0) + (msg.rs || 0);
+      totalCacheRead += msg.cr || 0;
+      totalCacheWrite += msg.cw || 0;
+      totalCost += calcCost(msg, pricing, checkAsFree);
+      
+      if (msg.ts) {
+        if (!firstMessage || msg.ts < firstMessage) firstMessage = msg.ts;
+        if (!lastMessage || msg.ts > lastMessage) lastMessage = msg.ts;
+      }
+    }
+    
+    return {
+      messageCount,
+      totalInput,
+      totalOutput,
+      totalCacheRead,
+      totalCacheWrite,
+      totalCost,
+      firstMessage,
+      lastMessage
+    };
+  }
+
+  function getHourlyTPS(messages) {
+    const now = Date.now();
+    const oneDayAgo = now - (24 * 60 * 60 * 1000);
+    const recentMessages = messages.filter(m => m.ts && m.ts >= oneDayAgo);
+    
+    const groups = {};
+    for (const msg of recentMessages) {
+      const hour = new Date(msg.ts).getHours();
+      if (!groups[hour]) {
+        groups[hour] = { messages: [], minTs: msg.ts, maxTs: msg.ts };
+      }
+      groups[hour].messages.push(msg);
+      if (msg.ts < groups[hour].minTs) groups[hour].minTs = msg.ts;
+      if (msg.ts > groups[hour].maxTs) groups[hour].maxTs = msg.ts;
+    }
+    
+    const result = [];
+    const currentHour = new Date().getHours();
+    
+    for (let i = 0; i < 24; i++) {
+      const group = groups[i];
+      const isToday = Math.abs(currentHour - i) <= 12;
+      
+      if (group && group.messages.length > 0) {
+        let totalOutput = 0;
+        for (const msg of group.messages) {
+          totalOutput += (msg.out || 0) + (msg.rs || 0);
+        }
+        const duration = (group.maxTs - group.minTs) / 1000;
+        const tps = duration > 0 ? totalOutput / duration : 0;
+        
+        result.push({
+          hour: i,
+          messageCount: group.messages.length,
+          outputTokens: totalOutput,
+          outputTPS: tps,
+          isToday
+        });
+      } else {
+        result.push({ hour: i, messageCount: 0, outputTokens: 0, outputTPS: 0, isToday });
+      }
+    }
+    
+    return result;
+  }
+
+  function getDailyTPSByModel(messages, days, modelFilter, pricing) {
+    const cutoff = Date.now() - (days * 24 * 60 * 60 * 1000);
+    const recent = messages.filter(m => m.ts && m.ts >= cutoff);
+    
+    const modelData = {};
+    const allDates = new Set();
+    
+    for (const msg of recent) {
+      if (!msg.modelId) continue;
+      
+      const base = normalizeModelName(msg.modelId);
+      const date = new Date(msg.ts).toISOString().split('T')[0];
+      allDates.add(date);
+      
+      const tStart = msg.tStart || msg.ts;
+      const tEnd = msg.tEnd;
+      const duration = (tEnd && tStart && tEnd > tStart) ? (tEnd - tStart) / 1000 : 0;
+      
+      if (duration <= 0) continue;
+      
+      const tps = ((msg.out || 0) + (msg.rs || 0)) / duration;
+      if (!isFinite(tps)) continue;
+      
+      if (!modelData[base]) modelData[base] = {};
+      if (!modelData[base][date]) {
+        modelData[base][date] = { tpsSum: 0, count: 0, inputTokens: 0, outputTokens: 0, reasoningTokens: 0, cacheRead: 0, cacheWrite: 0 };
+      }
+      
+      modelData[base][date].tpsSum += tps;
+      modelData[base][date].count += 1;
+      modelData[base][date].inputTokens += msg.in || 0;
+      modelData[base][date].outputTokens += msg.out || 0;
+      modelData[base][date].reasoningTokens += msg.rs || 0;
+      modelData[base][date].cacheRead += msg.cr || 0;
+      modelData[base][date].cacheWrite += msg.cw || 0;
+    }
+    
+    const sortedDates = Array.from(allDates).sort();
+    const models = [];
+    
+    for (const [model, dates] of Object.entries(modelData)) {
+      if (modelFilter && !modelFilter.includes(model)) continue;
+      
+      const data = sortedDates.map(date => {
+        const d = dates[date];
+        return d && d.count > 0 
+          ? { tps: d.tpsSum / d.count, inputTokens: d.inputTokens, outputTokens: d.outputTokens, reasoningTokens: d.reasoningTokens, cacheRead: d.cacheRead, cacheWrite: d.cacheWrite }
+          : null;
+      });
+      
+      models.push({ baseModel: model, data });
+    }
+    
+    models.sort((a, b) => {
+      const totalA = a.data.reduce((s, v) => s + (v?.tps || 0), 0);
+      const totalB = b.data.reduce((s, v) => s + (v?.tps || 0), 0);
+      return totalB - totalA;
+    });
+    
+    return { dates: sortedDates, models };
+  }
+
+  function getModelsTPS(messages, days) {
+    const cutoff = Date.now() - (days * 24 * 60 * 60 * 1000);
+    const recent = messages.filter(m => m.ts && m.ts >= cutoff);
+    
+    const modelData = {};
+    
+    for (const msg of recent) {
+      const base = normalizeModelName(msg.modelId);
+      
+      if (!modelData[base]) {
+        modelData[base] = { 
+          modelId: msg.modelId, 
+          baseModel: base, 
+          isFree: isFreeModel(msg.modelId),
+          messageCount: 0, 
+          inputTokens: 0, 
+          outputTokens: 0, 
+          minTs: msg.ts, 
+          maxTs: msg.ts 
+        };
+      }
+      
+      const md = modelData[base];
+      md.messageCount += 1;
+      md.inputTokens += msg.in || 0;
+      md.outputTokens += (msg.out || 0) + (msg.rs || 0);
+      if (msg.ts < md.minTs) md.minTs = msg.ts;
+      if (msg.ts > md.maxTs) md.maxTs = msg.ts;
+    }
+    
+    return Object.values(modelData).map(md => {
+      const duration = md.maxTs > md.minTs ? (md.maxTs - md.minTs) / 1000 : 1;
+      return {
+        modelId: md.modelId,
+        baseModel: md.baseModel,
+        isFree: md.isFree,
+        messageCount: md.messageCount,
+        outputTokens: md.outputTokens,
+        inputTokens: md.inputTokens,
+        outputTPS: md.outputTokens / duration,
+        inputTPS: md.inputTokens / duration,
+        durationSeconds: duration
+      };
+    }).sort((a, b) => b.outputTokens - a.outputTokens);
+  }
+
+  function getModelsList(messages) {
+    const models = new Set();
+    for (const msg of messages) {
+      if (msg.modelId) models.add(normalizeModelName(msg.modelId));
+    }
+    return Array.from(models).sort();
+  }
+
+  return {
+    normalizeModelName,
+    getShortModelName,
+    isFreeModel,
+    filterByRange,
+    filterByDays,
+    getPricing,
+    calcCost,
+    aggregateByPeriod,
+    aggregateByHour,
+    aggregateByModel,
+    getOverview,
+    getHourlyTPS,
+    getDailyTPSByModel,
+    getModelsTPS,
+    getModelsList
+  };
+})();

package/public/app.js

@@ -1,16 +1,25 @@
 const API_BASE = '/api';
+
+let rawData = null;
+let rawMessages = [];
+let pricing = {};
+
 let checkAsFree = true;
 let currentRange = 30;
 let useCustomRange = false;
 let customStart = null;
 let customEnd = null;
 let charts = {};
-let modelsData = [];
+
 let tpsModelsList = [];
 let selectedTPSModels = [];
 let currentChartType = 'tokens';
 let currentHourlyType = 'messages';
 
+let autoRefreshInterval = null;
+let autoRefreshSeconds = 0;
+
+
 function formatNumber(num) {
   if (num >= 1e9) return (num / 1e9).toFixed(2) + 'B';
   if (num >= 1e6) return (num / 1e6).toFixed(2) + 'M';
@@ -59,7 +68,9 @@ const tooltipDefaults = {
   usePointStyle: true,
   animation: { duration: 150 },
   caretSize: 6,
-  caretPadding: 8
+  caretPadding: 8,
+  position: 'nearest',
+  clamp: true
 };
 
 const chartDefaults = {
@@ -109,32 +120,56 @@ const chartDefaults = {
   },
   animation: {
     duration: 300
+  },
+  layout: {
+    padding: {
+      top: 4,
+      bottom: 4
+    }
   }
 };
 
-async function fetchAPI(endpoint) {
-  const url = `${API_BASE}${endpoint}${endpoint.includes('?') ? '&' : '?'}checkAsFree=${checkAsFree}`;
-  const res = await fetch(url);
+async function fetchRawData() {
+  const res = await fetch(`${API_BASE}/stats/raw`);
   if (!res.ok) throw new Error(`API Error: ${res.status}`);
   return res.json();
 }
 
-async function loadOverview() {
-  const days = useCustomRange ? null : (currentRange === 'all' ? null : currentRange);
-  const queryParam = days ? `?days=${days}` : '';
-  const data = await fetchAPI(`/stats/overview${queryParam}`);
+async function loadRawData() {
+  rawData = await fetchRawData();
+  rawMessages = rawData.messages || [];
+  pricing = rawData.pricing || {};
+}
+
+function getFilteredMessages() {
+  if (useCustomRange && customStart && customEnd) {
+    const startTs = new Date(customStart).getTime();
+    const endTs = new Date(customEnd).getTime() + (24 * 60 * 60 * 1000 - 1);
+    return Aggregator.filterByRange(rawMessages, startTs, endTs);
+  }
   
-  document.getElementById('totalMessages').textContent = formatNumber(data.messageCount);
-  document.getElementById('totalInput').textContent = formatNumber(data.totalInput);
-  document.getElementById('totalOutput').textContent = formatNumber(data.totalOutput);
-  document.getElementById('totalCacheRead').textContent = formatNumber(data.totalCacheRead);
-  document.getElementById('totalCost').textContent = formatCurrency(data.totalCost);
+  if (currentRange === 'all') {
+    return rawMessages;
+  }
+  
+  return Aggregator.filterByDays(rawMessages, currentRange);
 }
 
-async function loadModelsChart() {
-  const days = useCustomRange ? 365 : (currentRange === 'all' ? 365 : currentRange);
-  modelsData = await fetchAPI(`/stats/models?days=${days}`);
+function renderOverview() {
+  const messages = getFilteredMessages();
+  const overview = Aggregator.getOverview(messages, pricing, checkAsFree);
   
+  document.getElementById('totalMessages').textContent = formatNumber(overview.messageCount);
+  document.getElementById('totalInput').textContent = formatNumber(overview.totalInput);
+  document.getElementById('totalOutput').textContent = formatNumber(overview.totalOutput);
+  document.getElementById('totalCacheRead').textContent = formatNumber(overview.totalCacheRead);
+  document.getElementById('totalCacheWrite').textContent = formatNumber(overview.totalCacheWrite);
+  document.getElementById('totalCost').textContent = formatCurrency(overview.totalCost);
+}
+
+function renderModelsChart() {
+  const messages = getFilteredMessages();
+  const modelsData = Aggregator.aggregateByModel(messages, pricing, checkAsFree);
   const topModels = modelsData.slice(0, 8);
   const labels = topModels.map(m => m.baseModel);
   
@@ -252,18 +287,32 @@ async function loadModelsChart() {
     }
   });
   
-  updateModelsTable();
+  renderModelsTable(modelsData);
 }
 
-async function loadDailyChart(showCost = false) {
-  let data;
+function renderModelsTable(modelsData) {
+  const tbody = document.querySelector('#modelsTable tbody');
+  tbody.innerHTML = '';
   
-  if (useCustomRange && customStart && customEnd) {
-    data = await fetchAPI(`/stats/daily/range?start=${customStart}&end=${customEnd}`);
-  } else {
-    const days = currentRange === 'all' ? 365 : currentRange;
-    data = await fetchAPI(`/stats/daily?days=${days}`);
-  }
+  modelsData.forEach(m => {
+    const row = document.createElement('tr');
+    row.innerHTML = `
+      <td><strong>${m.baseModel}</strong></td>
+      <td>${formatNumber(m.messageCount)}</td>
+      <td>${formatNumber(m.inputTokens)}</td>
+      <td>${formatNumber(m.outputTokens)}</td>
+      <td>${formatNumber(m.cacheRead)}</td>
+      <td>${formatNumber(m.cacheWrite)}</td>
+      <td>${formatCurrency(m.cost)}</td>
+      <td><span class="badge ${m.isFree ? 'badge-free' : 'badge-paid'}">${m.isFree ? 'FREE' : 'PAID'}</span></td>
+    `;
+    tbody.appendChild(row);
+  });
+}
+
+function renderDailyChart(showCost = false) {
+  const messages = getFilteredMessages();
+  const data = Aggregator.aggregateByPeriod(messages, 'day', pricing, checkAsFree);
   
   if (charts.daily) charts.daily.destroy();
   
@@ -375,6 +424,22 @@ async function loadDailyChart(showCost = false) {
             pointHoverBorderColor: '#00ff88',
             pointHoverBorderWidth: 2,
             borderWidth: 2
+          },
+          {
+            label: 'Cache Write',
+            data: data.map(d => d.cacheWrite),
+            borderColor: getColor(3),
+            backgroundColor: 'transparent',
+            tension: 0.3,
+            pointRadius: 2,
+            pointBackgroundColor: getColor(3),
+            pointBorderColor: '#0a0a0a',
+            pointBorderWidth: 1,
+            pointHoverRadius: 6,
+            pointHoverBackgroundColor: getColor(3),
+            pointHoverBorderColor: '#00ff88',
+            pointHoverBorderWidth: 2,
+            borderWidth: 2
           }
         ]
       },
@@ -403,6 +468,15 @@ async function loadDailyChart(showCost = false) {
             callbacks: {
               label: function(context) {
                 return `${context.dataset.label}: ${formatNumber(context.raw)}`;
+              },
+              footer: function(tooltipItems) {
+                const idx = tooltipItems[0].dataIndex;
+                const d = data[idx];
+                const total = (d.inputTokens || 0) + (d.outputTokens || 0) + (d.cacheRead || 0) + (d.cacheWrite || 0);
+                return [
+                  `Messages: ${formatNumber(d.messageCount || 0)}`,
+                  `Total: ${formatNumber(total)}`
+                ];
               }
             }
           }
@@ -422,12 +496,12 @@ async function loadDailyChart(showCost = false) {
   }
 }
 
-async function loadHourlyChart(mode = 'messages') {
+function renderHourlyChart(mode = 'messages') {
   let data;
   if (mode === 'tps') {
-    data = await fetchAPI('/stats/hourly-tps');
+    data = Aggregator.getHourlyTPS(rawMessages);
   } else {
-    data = await fetchAPI('/stats/hourly');
+    data = Aggregator.aggregateByHour(rawMessages);
   }
   
   if (charts.hourly) charts.hourly.destroy();
@@ -504,8 +578,9 @@ async function loadHourlyChart(mode = 'messages') {
   }
 }
 
-async function loadWeeklyChart() {
-  const data = await fetchAPI('/stats/weekly?weeks=12');
+function renderWeeklyChart() {
+  const messages = getFilteredMessages();
+  const data = Aggregator.aggregateByPeriod(messages, 'week', pricing, checkAsFree);
   
   if (charts.weekly) charts.weekly.destroy();
   
@@ -513,7 +588,7 @@ async function loadWeeklyChart() {
   charts.weekly = new Chart(ctx, {
     type: 'bar',
     data: {
-      labels: data.map(d => (d.week || d.time || '').split('-')[1] || d.week || d.time),
+      labels: data.map(d => (d.time || '').split('-')[1] || d.time),
       datasets: [{
         label: 'Cost',
         data: data.map(d => d.cost),
@@ -548,23 +623,48 @@ async function loadWeeklyChart() {
   });
 }
 
-async function loadTPSModelsList() {
-  const modelsWithStats = await fetchAPI('/stats/models?days=30');
+function updateTPSModelsList() {
+  const messages = Aggregator.filterByDays(rawMessages, 30);
+  const modelsData = Aggregator.aggregateByModel(messages, pricing, checkAsFree);
+  const tpsData = Aggregator.getModelsTPS(rawMessages, 30);
+  const tpsMap = {};
+  for (const m of tpsData) {
+    tpsMap[m.baseModel] = m.outputTPS || 0;
+  }
+  
+  modelsData.sort((a, b) => (b.outputTokens || 0) - (a.outputTokens || 0));
+  
+  const modelsInfo = {};
+  for (const m of modelsData) {
+    modelsInfo[m.baseModel] = {
+      input: m.inputTokens,
+      output: m.outputTokens,
+      total: m.inputTokens + m.outputTokens,
+      tps: tpsMap[m.baseModel] || 0
+    };
+  }
+  
+  tpsModelsList = modelsData.slice(0, 10).map(m => m.baseModel);
   
-  modelsWithStats.sort((a, b) => (b.outputTokens || 0) - (a.outputTokens || 0));
-  tpsModelsList = modelsWithStats.slice(0, 10).map(m => m.baseModel);
-  selectedTPSModels = tpsModelsList.slice(0, 5);
+  if (selectedTPSModels.length === 0) {
+    selectedTPSModels = tpsModelsList.slice(0, 5);
+  }
   
   const dropdown = document.getElementById('tpsModelDropdown');
   const optionsContainer = dropdown.querySelector('.dropdown-options');
   optionsContainer.innerHTML = '';
   
   for (const model of tpsModelsList) {
+    const info = modelsInfo[model];
+    const sortVal = formatNumber(info.output);
+    const sortTooltip = `In: ${formatNumber(info.input)} | Out: ${formatNumber(info.output)}`;
+    
     const label = document.createElement('label');
     label.className = 'dropdown-option' + (selectedTPSModels.includes(model) ? ' selected' : '');
     label.innerHTML = `
       <input type="checkbox" value="${model}" ${selectedTPSModels.includes(model) ? 'checked' : ''}>
-      ${model}
+      <span class="model-name">${model}</span>
+      <span class="model-tokens" title="${sortTooltip}">${sortVal}</span>
     `;
     optionsContainer.appendChild(label);
   }
@@ -616,30 +716,30 @@ function initTPSDropdown() {
     e.stopPropagation();
   });
   
-  setTimeout(() => {
-    const applyBtn = document.createElement('button');
-    applyBtn.type = 'button';
-    applyBtn.className = 'btn btn-sm btn-primary';
-    applyBtn.textContent = 'Apply';
-    applyBtn.style.marginTop = '0.5rem';
-    applyBtn.style.width = '100%';
-    applyBtn.addEventListener('click', async () => {
-      dropdown.classList.remove('open');
-      const checked = dropdown.querySelectorAll('input[type="checkbox"]:checked');
-      selectedTPSModels = Array.from(checked).map(c => c.value);
-      await loadTPSChart();
-    });
-    dropdown.querySelector('.dropdown-menu').appendChild(applyBtn);
-  }, 0);
+  const existingApplyBtn = dropdown.querySelector('.dropdown-menu .btn-primary');
+  if (existingApplyBtn) existingApplyBtn.remove();
+  
+  const applyBtn = document.createElement('button');
+  applyBtn.type = 'button';
+  applyBtn.className = 'btn btn-sm btn-primary';
+  applyBtn.textContent = 'Apply';
+  applyBtn.style.marginTop = '0.5rem';
+  applyBtn.style.width = '100%';
+  applyBtn.addEventListener('click', () => {
+    dropdown.classList.remove('open');
+    const checked = dropdown.querySelectorAll('input[type="checkbox"]:checked');
+    selectedTPSModels = Array.from(checked).map(c => c.value);
+    renderTPSChart();
+  });
+  dropdown.querySelector('.dropdown-menu').appendChild(applyBtn);
 }
 
-async function loadTPSChart() {
+function renderTPSChart() {
   if (selectedTPSModels.length === 0) {
     selectedTPSModels = tpsModelsList.slice(0, 5);
   }
   
-  const modelsParam = selectedTPSModels.join(',');
-  const data = await fetchAPI('/stats/daily-tps-by-model?days=30&models=' + modelsParam);
+  const data = Aggregator.getDailyTPSByModel(rawMessages, 30, selectedTPSModels, pricing);
   
   if (charts.tps) charts.tps.destroy();
   
@@ -693,10 +793,14 @@ async function loadTPSChart() {
               const tps = extra?.tps?.toFixed(2) || '-';
               const input = extra?.inputTokens ? formatNumber(extra.inputTokens) : '0';
               const output = extra?.outputTokens ? formatNumber(extra.outputTokens) : '0';
+              const reasoning = extra?.reasoningTokens ? formatNumber(extra.reasoningTokens) : '0';
+              const cacheRead = extra?.cacheRead ? formatNumber(extra.cacheRead) : '0';
+              const cacheWrite = extra?.cacheWrite ? formatNumber(extra.cacheWrite) : '0';
               return [
                 ctx.dataset.label,
                 `  ├─ TPS: ${tps} tok/s`,
-                `  └─ In: ${input} | Out: ${output}`
+                `  ├─ In: ${input} | Out: ${output} | Think: ${reasoning}`,
+                `  └─ Cache R: ${cacheRead} | W: ${cacheWrite}`
               ];
             }
           }
@@ -720,24 +824,75 @@ async function loadTPSChart() {
   });
 }
 
-function updateModelsTable() {
-  const tbody = document.querySelector('#modelsTable tbody');
-  tbody.innerHTML = '';
+function renderAll() {
+  renderOverview();
+  renderModelsChart();
+  renderDailyChart(currentChartType === 'cost');
+  renderHourlyChart(currentHourlyType);
+  renderWeeklyChart();
+  updateTPSModelsList();
+  renderTPSChart();
+}
+
+function setAutoRefresh(seconds) {
+  autoRefreshSeconds = seconds;
   
-  modelsData.forEach(m => {
-    const row = document.createElement('tr');
-    row.innerHTML = `
-      <td><strong>${m.baseModel}</strong></td>
-      <td>${formatNumber(m.messageCount)}</td>
-      <td>${formatNumber(m.inputTokens)}</td>
-      <td>${formatNumber(m.outputTokens)}</td>
-      <td>${formatNumber(m.cacheRead)}</td>
-      <td>${formatNumber(m.cacheWrite)}</td>
-      <td>${formatCurrency(m.cost)}</td>
-      <td><span class="badge ${m.isFree ? 'badge-free' : 'badge-paid'}">${m.isFree ? 'FREE' : 'PAID'}</span></td>
-    `;
-    tbody.appendChild(row);
-  });
+  if (autoRefreshInterval) {
+    clearInterval(autoRefreshInterval);
+    autoRefreshInterval = null;
+  }
+  
+  const indicator = document.getElementById('autoRefreshIndicator');
+  const btn = document.getElementById('autoRefreshBtn');
+  
+  if (seconds <= 0) {
+    if (indicator) indicator.style.display = 'none';
+    if (btn) btn.classList.remove('active');
+    return;
+  }
+  
+  if (indicator) indicator.style.display = 'inline';
+  if (btn) btn.classList.add('active');
+  
+  autoRefreshInterval = setInterval(async () => {
+    try {
+      await loadRawData();
+      renderAll();
+      updateAutoRefreshIndicator();
+    } catch (err) {
+      console.error('Auto-refresh failed:', err);
+    }
+  }, seconds * 1000);
+  
+  updateAutoRefreshIndicator();
+}
+
+function updateAutoRefreshIndicator() {
+  const indicator = document.getElementById('autoRefreshIndicator');
+  if (!indicator || autoRefreshSeconds <= 0) return;
+  
+  const nextRefresh = new Date(Date.now() + autoRefreshSeconds * 1000);
+  indicator.textContent = `Auto: ${autoRefreshSeconds}s`;
+}
+
+async function manualRefresh() {
+  const btn = document.getElementById('refreshBtn');
+  if (btn) {
+    btn.textContent = '...';
+    btn.disabled = true;
+  }
+  
+  try {
+    await loadRawData();
+    renderAll();
+  } catch (err) {
+    console.error('Refresh failed:', err);
+  } finally {
+    if (btn) {
+      btn.textContent = 'Refresh';
+      btn.disabled = false;
+    }
+  }
 }
 
 async function loadPricingModal() {
@@ -783,24 +938,17 @@ async function loadPricingModal() {
       
       btn.textContent = 'Saved';
       setTimeout(() => btn.textContent = 'Save', 1200);
-      await loadAll();
+      
+      await loadRawData();
+      renderAll();
     });
   });
 }
 
-async function loadAll() {
-  await loadOverview();
-  await loadModelsChart();
-  await loadDailyChart(currentChartType === 'cost');
-  await loadHourlyChart();
-  await loadWeeklyChart();
-  await loadTPSModelsList();
-  await loadTPSChart();
-}
-
 document.addEventListener('DOMContentLoaded', async () => {
   try {
-    await loadAll();
+    await loadRawData();
+    renderAll();
     initTPSDropdown();
     document.getElementById('loading').classList.add('hidden');
   } catch (err) {
@@ -808,17 +956,33 @@ document.addEventListener('DOMContentLoaded', async () => {
     document.querySelector('.loading span').textContent = 'Failed to load data. Is the server running?';
   }
   
-  document.getElementById('checkAsFree').addEventListener('change', async function() {
+  document.getElementById('checkAsFree').addEventListener('change', function() {
     checkAsFree = this.checked;
-    await loadAll();
+    renderAll();
   });
   
+  document.getElementById('refreshBtn').addEventListener('click', manualRefresh);
+  
+  document.getElementById('autoRefreshBtn').addEventListener('click', function() {
+    const select = document.getElementById('autoRefreshSelect');
+    const seconds = parseInt(select.value) || 0;
+    setAutoRefresh(seconds);
+  });
+  
+  document.getElementById('autoRefreshSelect').addEventListener('change', function() {
+    if (autoRefreshSeconds > 0) {
+      setAutoRefresh(parseInt(this.value) || 0);
+    }
+  });
+  
+
   document.getElementById('refreshPricingBtn').addEventListener('click', async function() {
     this.textContent = '...';
     await fetch(`${API_BASE}/pricing/reset`, { method: 'POST' });
     this.textContent = 'Done';
     setTimeout(() => this.textContent = 'Actualize prices', 1500);
-    await loadAll();
+    await loadRawData();
+    renderAll();
   });
   
   document.getElementById('editPricingBtn').addEventListener('click', () => {
@@ -837,30 +1001,31 @@ document.addEventListener('DOMContentLoaded', async () => {
   });
   
   document.querySelectorAll('#mainTimeFilter .btn[data-range]').forEach(btn => {
-    btn.addEventListener('click', async function() {
+    btn.addEventListener('click', function() {
       document.querySelectorAll('#mainTimeFilter .btn[data-range]').forEach(b => b.classList.remove('active'));
       this.classList.add('active');
       currentRange = this.dataset.range === 'all' ? 'all' : parseInt(this.dataset.range);
       useCustomRange = false;
-      await loadAll();
+      renderAll();
     });
   });
   
   document.querySelectorAll('.chart-type-toggle .btn').forEach(btn => {
-    btn.addEventListener('click', async function() {
+    btn.addEventListener('click', function() {
       document.querySelectorAll('.chart-type-toggle .btn').forEach(b => b.classList.remove('active'));
       this.classList.add('active');
       
       if (this.dataset.chart) {
         currentChartType = this.dataset.chart;
-        await loadDailyChart(currentChartType === 'cost');
+        renderDailyChart(currentChartType === 'cost');
       } else if (this.dataset.hourly) {
-        await loadHourlyChart(this.dataset.hourly);
+        currentHourlyType = this.dataset.hourly;
+        renderHourlyChart(currentHourlyType);
       }
     });
   });
   
-  document.getElementById('applyDateRange').addEventListener('click', async function() {
+  document.getElementById('applyDateRange').addEventListener('click', function() {
     const start = document.getElementById('startDate').value;
     const end = document.getElementById('endDate').value;
     
@@ -869,7 +1034,7 @@ document.addEventListener('DOMContentLoaded', async () => {
       customEnd = end;
       useCustomRange = true;
       document.querySelectorAll('#mainTimeFilter .btn[data-range]').forEach(b => b.classList.remove('active'));
-      await loadAll();
+      renderAll();
     }
   });
   

package/public/index.html

@@ -4,7 +4,7 @@
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>OpenCode Analytics</title>
-  <link rel="stylesheet" href="styles.css">
+  <link rel="stylesheet" href="styles.css?v=2">
   <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.1/dist/chart.umd.min.js" defer></script>
 </head>
 <body>
@@ -18,6 +18,18 @@
           <input type="checkbox" id="checkAsFree" checked>
           <span>Check as Free</span>
         </label>
+        <div class="refresh-controls">
+          <button id="refreshBtn" class="btn btn-outline" title="Refresh data">Refresh</button>
+          <select id="autoRefreshSelect" class="btn btn-outline" style="padding-right: 1.5rem;">
+            <option value="0">Auto: Off</option>
+            <option value="30">30s</option>
+            <option value="60">1m</option>
+            <option value="120">2m</option>
+            <option value="300">5m</option>
+          </select>
+          <button id="autoRefreshBtn" class="btn btn-outline" title="Start auto-refresh">Start Auto</button>
+          <span id="autoRefreshIndicator" style="display:none; color: #00ff88; font-size: 0.75em; margin-left: 0.25rem;"></span>
+        </div>
         <button id="refreshPricingBtn" class="btn btn-outline" title="Reset all custom prices to server defaults. Your changes will be lost.">Actualize prices</button>
         <button id="editPricingBtn" class="btn btn-outline">Edit Pricing</button>
       </div>
@@ -52,6 +64,13 @@
           <div class="card-value" id="totalCacheRead">-</div>
         </div>
       </div>
+      <div class="card">
+        <div class="card-icon">💾</div>
+        <div class="card-content">
+          <div class="card-label">Cache Write</div>
+          <div class="card-value" id="totalCacheWrite">-</div>
+        </div>
+      </div>
       <div class="card highlight">
         <div class="card-icon">💰</div>
         <div class="card-content">
@@ -171,6 +190,7 @@
     <span>Loading analytics...</span>
   </div>
 
-  <script src="app.js?v=10"></script>
+  <script src="aggregator.js?v=3"></script>
+  <script src="app.js?v=14"></script>
 </body>
 </html>

package/public/styles.css

@@ -270,8 +270,12 @@ h1 {
 .time-filter-row {
   display: flex;
   align-items: center;
+  justify-content: center;
   gap: 1rem;
+  margin-top: 1.5rem;
   margin-bottom: 1.25rem;
+  padding-top: 1.5rem;
+  border-top: 1px solid var(--border);
   flex-wrap: wrap;
 }
 
@@ -688,6 +692,11 @@ tbody tr:hover {
     align-items: flex-start;
   }
 
+  .time-filter-row {
+    flex-direction: column;
+    align-items: center;
+  }
+
   .date-range-picker {
     margin-left: 0;
     margin-top: 0.5rem;
@@ -796,6 +805,7 @@ tbody tr:hover {
 .dropdown-option {
   display: flex;
   align-items: center;
+  justify-content: space-between;
   gap: 0.5rem;
   padding: 0.4rem 0.5rem;
   border-radius: 4px;
@@ -814,13 +824,119 @@ tbody tr:hover {
   width: 14px;
   height: 14px;
   cursor: pointer;
+  flex-shrink: 0;
+}
+
+.dropdown-option .model-name {
+  flex: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.dropdown-option .model-tokens {
+  font-size: 0.6rem;
+  color: var(--text-muted);
+  flex-shrink: 0;
+  cursor: help;
+}
+
+.dropdown-option:hover .model-tokens {
+  color: var(--text-secondary);
+}
+
+.dropdown-option.selected {
+  color: var(--accent);
+}
+
+.dropdown-option .model-tokens {
+  font-size: 0.65rem;
+  color: var(--text-muted);
+  flex-shrink: 0;
+  cursor: help;
+}
+
+.dropdown-option:hover .model-tokens {
+  color: var(--text-secondary);
 }
 
 .dropdown-option.selected {
   color: var(--accent);
 }
 
-.dropdown-option.selected::before {
-  content: '✓ ';
+.dropdown-option.selected .model-tokens {
+  color: var(--accent);
+}
+
+.refresh-controls {
+  display: flex;
+  align-items: center;
+  gap: 0.25rem;
+}
+
+.refresh-controls select {
+  background: var(--bg-tertiary);
+  border: 1px solid var(--border-light);
+  border-radius: 4px;
+  color: var(--text-secondary);
+  font-family: inherit;
+  font-size: 0.7rem;
+  padding: 0.5rem 0.875rem;
+  cursor: pointer;
+  appearance: none;
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'%3E%3Cpath fill='%23888' d='M4 6L1 2h6z'/%3E%3C/svg%3E");
+  background-repeat: no-repeat;
+  background-position: right 0.5rem center;
+  padding-right: 1.5rem;
+}
+
+.refresh-controls select:hover {
+  border-color: var(--accent);
+  color: var(--accent);
+}
+
+.refresh-controls select:focus {
+  outline: none;
+  border-color: var(--accent);
+}
+
+#autoRefreshBtn.active {
+  background: var(--accent);
+  color: var(--bg-primary);
+  border-color: var(--accent);
+}
+
+#autoRefreshBtn.active:hover {
+  background: var(--accent-dim);
+}
+
+
+
+.dropdown-option {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.5rem;
+}
+
+.dropdown-option .model-name {
+  flex: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.dropdown-option .model-tokens {
   font-size: 0.65rem;
+  color: var(--text-muted);
+  flex-shrink: 0;
+  cursor: help;
+}
+
+.dropdown-option:hover .model-tokens {
+  color: var(--text-secondary);
+}
+
+.dropdown-option.selected .model-tokens {
+  color: var(--accent);
 }

package/server/db.js

@@ -522,6 +522,36 @@ function getModelsList() {
     .sort();
 }
 
+function getRawMessages() {
+  const rows = query(`
+    SELECT 
+      time_created as ts,
+      json_extract(data, '$.modelID') as modelId,
+      json_extract(data, '$.tokens.input') as tin,
+      json_extract(data, '$.tokens.output') as tout,
+      json_extract(data, '$.tokens.reasoning') as treas,
+      json_extract(data, '$.tokens.cache.read') as tcr,
+      json_extract(data, '$.tokens.cache.write') as tcw,
+      json_extract(data, '$.time.created') as tStart,
+      json_extract(data, '$.time.completed') as tEnd
+    FROM message
+    WHERE data LIKE '%"tokens":%'
+    ORDER BY time_created
+  `);
+  
+  return rows.map(row => ({
+    ts: row.ts,
+    modelId: row.modelId,
+    in: parseInt(row.tin) || 0,
+    out: parseInt(row.tout) || 0,
+    rs: parseInt(row.treas) || 0,
+    cr: parseInt(row.tcr) || 0,
+    cw: parseInt(row.tcw) || 0,
+    tStart: row.tStart ? parseFloat(row.tStart) : null,
+    tEnd: row.tEnd ? parseFloat(row.tEnd) : null
+  }));
+}
+
 module.exports = {
   normalizeModelName,
   getShortModelName,
@@ -537,5 +567,6 @@ module.exports = {
   getModelsTPSStats,
   getHourlyTPSStats,
   getDailyTPSByModel,
-  getModelsList
+  getModelsList,
+  getRawMessages
 };

package/server/index.js

@@ -1,4 +1,5 @@
 const express = require('express');
+const compression = require('compression');
 const path = require('path');
 const fs = require('fs');
 const db = require('./db');
@@ -277,6 +278,7 @@ function aggregateByTimeFrame(stats, timeKey, checkAsFree = true) {
 }
 
 const app = express();
+app.use(compression());
 app.use(express.json());
 app.get('/', (req, res) => {
   res.sendFile(path.join(__dirname, '../public/index.html'));
@@ -483,6 +485,49 @@ app.delete('/api/pricing/:model', (req, res) => {
   }
 });
 
+app.get('/api/stats/raw', (req, res) => {
+  const messages = db.getRawMessages();
+  const modelPrices = {};
+  
+  for (const [name, p] of Object.entries(pricing.models || {})) {
+    modelPrices[name] = {
+      input: p.input || 0,
+      output: p.output || 0,
+      cacheRead: p.cacheRead || p.input || 0,
+      isFree: p.isFree || false
+    };
+  }
+  
+  for (const [name, p] of Object.entries(userPrices.prices || {})) {
+    modelPrices[name] = {
+      input: p.input || 0,
+      output: p.output || 0,
+      cacheRead: p.cacheRead || 0,
+      isFree: false
+    };
+  }
+  
+  let firstMessage = null;
+  let lastMessage = null;
+  for (const msg of messages) {
+    if (msg.ts) {
+      if (!firstMessage || msg.ts < firstMessage) firstMessage = msg.ts;
+      if (!lastMessage || msg.ts > lastMessage) lastMessage = msg.ts;
+    }
+  }
+  
+  res.json({
+    messages,
+    pricing: modelPrices,
+    meta: {
+      firstMessage,
+      lastMessage,
+      count: messages.length,
+      lastUpdated: pricing.lastUpdated
+    }
+  });
+});
+
 const PORT = process.env.PORT || 3456;
 
 app.listen(PORT, async () => {

package/server/pricing.json

@@ -1,5 +1,5 @@
 {
-  "lastUpdated": "2026-03-17T10:05:06.696Z",
+  "lastUpdated": "2026-03-17T11:20:59.554Z",
   "source": "models.dev",
   "overrides": {
     "big-pickle": {