claude-usage-dashboard 1.5.8 → 1.6.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "claude-usage-dashboard",
-  "version": "1.5.8",
+  "version": "1.6.0",
   "description": "Claude Code usage dashboard — token costs, quota cycle tracking, cache efficiency, multi-machine sync across all your devices",
   "main": "server/index.js",
   "bin": {

package/public/js/app.js

@@ -74,9 +74,13 @@ async function loadQuota() {
     if (window && sevenDay.utilization > 0) {
       quotaWindowFrom = window.from;
       quotaWindowTo = window.to;
+      // Use local date-only format (YYYY-MM-DD) to match the date picker's
+      // filtering — filterByDateRange treats date-only strings as local
+      // midnight boundaries, ensuring consistent results across all views.
+      const fmtD = d => `${d.getFullYear()}-${String(d.getMonth()+1).padStart(2,'0')}-${String(d.getDate()).padStart(2,'0')}`;
       const cost7d = await fetchCost({
-        from: window.from.toISOString(),
-        to: window.to.toISOString(),
+        from: fmtD(window.from),
+        to: fmtD(window.to),
         plan: state.plan.plan,
       });
       cost7dValue = cost7d.api_equivalent_cost_usd;

package/public/js/charts/model-distribution.js

@@ -37,8 +37,13 @@ export function renderModelDistribution(container, data) {
     .style('flex-shrink', '0')
     .append('g').attr('transform', `translate(${size / 2},${size / 2})`);
 
-  const total = d3.sum(data.models, d => d.total_tokens);
-  const pie = d3.pie().value(d => d.total_tokens).sort(null);
+  // Use non-cache tokens (input + output) for both slice size and percentages
+  // so the share of each model matches Anthropic's official usage report.
+  // Cache reads dominate total_tokens and drown out small-output models like
+  // new Opus 4.7, making the distribution misleading.
+  const nonCache = m => (m.input_tokens || 0) + (m.output_tokens || 0);
+  const total = d3.sum(data.models, nonCache);
+  const pie = d3.pie().value(nonCache).sort(null);
   const arc = d3.arc().innerRadius(innerRadius).outerRadius(radius);
 
   svg.selectAll('path').data(pie(data.models)).enter().append('path')
@@ -47,7 +52,7 @@ export function renderModelDistribution(container, data) {
 
   const legend = wrapper.append('div');
   data.models.forEach(m => {
-    const pct = ((m.total_tokens / total) * 100).toFixed(1);
+    const pct = total > 0 ? ((nonCache(m) / total) * 100).toFixed(1) : '0.0';
     const color = MODEL_COLORS[m.id] || '#64748b';
     const shortName = MODEL_DISPLAY[m.id] || m.id.replace('claude-', '').replace(/-(\d+)-(\d+)/, ' $1.$2');
     legend.append('div').style('font-size', '11px').style('color', '#94a3b8').style('margin-bottom', '4px')

package/server/parser.js

@@ -61,6 +61,7 @@ export function parseLogFile(filePath) {
       sessionId: entry.sessionId,
       timestamp: entry.timestamp,
       model,
+      messageId: entry.message?.id || null,
       input_tokens: usage.input_tokens || 0,
       output_tokens: usage.output_tokens || 0,
       cache_creation_tokens: usage.cache_creation_input_tokens || 0,
@@ -71,6 +72,33 @@ export function parseLogFile(filePath) {
   return records;
 }
 
+/**
+ * Deduplicate assistant records by `messageId`.
+ *
+ * Claude Code JSONL contains one line per streaming snapshot, not one per
+ * message. Multiple lines can share the same `message.id`, with the early
+ * ones reporting partial cumulative `output_tokens` and the final one the
+ * full total. Multi-machine sync further multiplies the same message across
+ * machines. Anthropic bills the server-side message once, so we keep the
+ * record whose `output_tokens` is largest (the final cumulative snapshot)
+ * for each `messageId`. Records without a `messageId` pass through — they
+ * predate the id field and are assumed to already be one-per-message.
+ */
+export function dedupByMessageId(records) {
+  const best = new Map();
+  const passthrough = [];
+
+  for (const r of records) {
+    if (!r.messageId) { passthrough.push(r); continue; }
+    const prev = best.get(r.messageId);
+    if (!prev || r.output_tokens > prev.output_tokens) {
+      best.set(r.messageId, r);
+    }
+  }
+
+  return [...best.values(), ...passthrough];
+}
+
 export function parseLogDirectory(baseDir) {
   const allRecords = [];
 
@@ -127,7 +155,7 @@ export function parseLogDirectory(baseDir) {
     }
   }
 
-  return allRecords;
+  return dedupByMessageId(allRecords);
 }
 
 export function parseMultiMachineDirectory(syncDir) {
@@ -147,5 +175,5 @@ export function parseMultiMachineDirectory(syncDir) {
     allRecords.push(...records);
   }
 
-  return allRecords;
+  return dedupByMessageId(allRecords);
 }

package/server/pricing.js

@@ -5,6 +5,12 @@ export const MODEL_PRICING = {
     cache_read_price_per_mtok: 0.50,
     cache_creation_price_per_mtok: 6.25,
   },
+  'claude-opus-4-7': {
+    input_price_per_mtok: 5,
+    output_price_per_mtok: 25,
+    cache_read_price_per_mtok: 0.50,
+    cache_creation_price_per_mtok: 6.25,
+  },
   'claude-sonnet-4-6': {
     input_price_per_mtok: 3,
     output_price_per_mtok: 15,

package/server/routes/api.js

@@ -145,27 +145,42 @@ export function createApiRouter(logBaseDir, options = {}) {
         options.syncDir || null,
         options.snapshotDir
       );
-      if (data.currentCycle) {
-        // Recompute current cycle from parsed records — in sync mode this
-        // includes all machines' data, matching /api/cost and /api/usage.
-        // The snapshot's utilization % (from the quota API) is preserved.
-        const records = refreshRecords();
+
+      // Recompute token/cost fields from the live parser for every cycle
+      // (current + history). The snapshot's utilization % (from the Anthropic
+      // quota API) is preserved — that value is Anthropic's truth and cannot
+      // be reconstructed locally — but all other fields come from the current
+      // parser so historical cycles reflect dedup fixes applied to older logs.
+      //
+      // Convert UTC cycle dates to local date-only strings (YYYY-MM-DD) so
+      // filterByDateRange uses local midnight boundaries, matching the date
+      // picker's range that drives the summary cards and /api/cost.
+      const toLocalDate = (iso) => {
+        const d = new Date(iso);
+        return `${d.getFullYear()}-${String(d.getMonth()+1).padStart(2,'0')}-${String(d.getDate()).padStart(2,'0')}`;
+      };
+      const records = refreshRecords();
+      const recompute = (cycle) => {
         const cycleRecords = filterByDateRange(
-          records, data.currentCycle.start, data.currentCycle.resets_at
+          records, toLocalDate(cycle.start), toLocalDate(cycle.resets_at)
         );
         const quotaShim = {
-          seven_day: { utilization: data.currentCycle.overall.utilization },
-          seven_day_opus: { utilization: data.currentCycle.models?.opus?.utilization || 0 },
-          seven_day_sonnet: { utilization: data.currentCycle.models?.sonnet?.utilization || 0 },
+          seven_day: { utilization: cycle.overall?.utilization || 0 },
+          seven_day_opus: { utilization: cycle.models?.opus?.utilization || 0 },
+          seven_day_sonnet: { utilization: cycle.models?.sonnet?.utilization || 0 },
         };
-        const fresh = computeCycleData(cycleRecords, quotaShim);
-        Object.assign(data.currentCycle, fresh);
+        Object.assign(cycle, computeCycleData(cycleRecords, quotaShim));
+      };
 
+      if (data.currentCycle) {
+        recompute(data.currentCycle);
         const start = new Date(data.currentCycle.start);
         const now = new Date();
         data.currentCycle.daysElapsed = Math.round(((now - start) / (1000 * 60 * 60 * 24)) * 10) / 10;
         data.currentCycle.daysTotal = 7;
       }
+      for (const cycle of data.history || []) recompute(cycle);
+
       res.json(data);
     } catch (err) {
       res.status(500).json({ error: err.message });