claude-usage-dashboard 1.5.3 → 1.5.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "claude-usage-dashboard",
-  "version": "1.5.3",
+  "version": "1.5.5",
   "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

@@ -28,6 +28,7 @@ const state = {
 };
 
 let datePicker, planSelector;
+let _cachedCycleData = null;
 
 function formatNumber(n) {
   if (n >= 1_000_000) return (n / 1_000_000).toFixed(1) + 'M';
@@ -61,7 +62,8 @@ function getQuotaWindow(sevenDay) {
 
 async function loadQuota() {
   try {
-    const data = await fetchQuota();
+    const [data, cycleData] = await Promise.all([fetchQuota(), fetchQuotaCycles()]);
+    _cachedCycleData = cycleData;
 
     // Use the actual quota window (resets_at - 7 days → resets_at)
     let cost7dValue = 0;
@@ -72,12 +74,16 @@ async function loadQuota() {
     if (window && sevenDay.utilization > 0) {
       quotaWindowFrom = window.from;
       quotaWindowTo = window.to;
-      const cost7d = await fetchCost({
-        from: window.from.toISOString(),
-        to: window.to.toISOString(),
-        plan: state.plan.plan,
-      });
-      cost7dValue = cost7d.api_equivalent_cost_usd;
+      // Prefer cycle data (multi-machine merged) over cost API (local only)
+      cost7dValue = cycleData?.currentCycle?.overall?.actualCost || 0;
+      if (cost7dValue === 0) {
+        const cost7d = await fetchCost({
+          from: window.from.toISOString(),
+          to: window.to.toISOString(),
+          plan: state.plan.plan,
+        });
+        cost7dValue = cost7d.api_equivalent_cost_usd;
+      }
     }
 
     renderQuotaGauges(document.getElementById('chart-quota'), data, {
@@ -85,17 +91,18 @@ async function loadQuota() {
     });
     const el = document.getElementById('quota-last-updated');
     if (el && data.lastFetched) el.textContent = `Updated ${new Date(data.lastFetched).toLocaleTimeString()} ${getTimezoneAbbr()}`;
-    loadQuotaCyclesData();
+    renderQuotaCycles(document.getElementById('chart-quota-cycles'), cycleData, {
+      modelKey: state.cycleModel,
+    });
   } catch { /* silently degrade */ }
 }
 
-async function loadQuotaCyclesData() {
-  try {
-    const data = await fetchQuotaCycles();
-    renderQuotaCycles(document.getElementById('chart-quota-cycles'), data, {
+function loadQuotaCyclesData() {
+  if (_cachedCycleData) {
+    renderQuotaCycles(document.getElementById('chart-quota-cycles'), _cachedCycleData, {
       modelKey: state.cycleModel,
     });
-  } catch { /* silently degrade */ }
+  }
 }
 
 function startAutoRefresh() {
@@ -137,18 +144,35 @@ async function loadAll() {
     fetchCache(params),
   ]);
 
-  // Summary cards
+  // Summary cards — use multi-machine cycle data when viewing current cycle
   const t = usage.total;
-  const totalAll = t.input_tokens + t.output_tokens + t.cache_read_tokens + t.cache_creation_tokens;
+  let tokIn = t.input_tokens, tokOut = t.output_tokens;
+  let tokCR = t.cache_read_tokens, tokCW = t.cache_creation_tokens;
+  let apiCost = cost.api_equivalent_cost_usd;
+  const cc = _cachedCycleData?.currentCycle?.overall;
+  if (cc?.tokens) {
+    const cct = cc.tokens;
+    const mergedAll = cct.input + cct.output + cct.cacheRead + cct.cacheCreation;
+    const localAll = tokIn + tokOut + tokCR + tokCW;
+    if (mergedAll > localAll) {
+      tokIn = cct.input; tokOut = cct.output;
+      tokCR = cct.cacheRead; tokCW = cct.cacheCreation;
+      apiCost = cc.actualCost;
+    }
+  }
+  const totalAll = tokIn + tokOut + tokCR + tokCW;
   document.getElementById('val-total-tokens').textContent = formatNumber(totalAll);
   document.getElementById('sub-total-tokens').innerHTML =
-    `<span style="color:#4ade80">cache read:${formatNumber(t.cache_read_tokens)}</span> · ` +
-    `<span style="color:#f59e0b">cache write:${formatNumber(t.cache_creation_tokens)}</span> · ` +
-    `<span style="color:#60a5fa">in:${formatNumber(t.input_tokens)}</span> · ` +
-    `<span style="color:#f97316">out:${formatNumber(t.output_tokens)}</span>`;
-  document.getElementById('val-api-cost').textContent = `$${cost.api_equivalent_cost_usd.toFixed(2)}`;
-
-  document.getElementById('val-cache-rate').textContent = `${(cache.cache_read_rate * 100).toFixed(1)}%`;
+    `<span style="color:#4ade80">cache read:${formatNumber(tokCR)}</span> · ` +
+    `<span style="color:#f59e0b">cache write:${formatNumber(tokCW)}</span> · ` +
+    `<span style="color:#60a5fa">in:${formatNumber(tokIn)}</span> · ` +
+    `<span style="color:#f97316">out:${formatNumber(tokOut)}</span>`;
+  document.getElementById('val-api-cost').textContent = `$${apiCost.toFixed(2)}`;
+
+  const totalInput = tokIn + tokCR + tokCW;
+  document.getElementById('val-cache-rate').textContent = totalInput > 0
+    ? `${((tokCR / totalInput) * 100).toFixed(1)}%`
+    : `${(cache.cache_read_rate * 100).toFixed(1)}%`;
 
   // Set active granularity button
   const activeGran = usage.granularity;

package/public/js/charts/quota-cycles.js

@@ -161,9 +161,9 @@ export function renderQuotaCycles(container, data, { modelKey = 'overall' } = {}
     <th class="align-right">Total</th>
     <th class="align-right">Excl CR</th>
     <th class="align-right">Cost</th>
-    <th class="align-right col-highlight">Proj Tokens</th>
-    <th class="align-right col-highlight">Proj Cost</th>
-    <th class="align-right">\u0394 Prev</th>
+    <th class="align-right col-highlight">Proj Token Limit</th>
+    <th class="align-right col-highlight">Proj Cost Limit</th>
+    <th class="align-right">\u0394 Limit</th>
   </tr>`;
   table.appendChild(thead);
 
@@ -178,8 +178,8 @@ export function renderQuotaCycles(container, data, { modelKey = 'overall' } = {}
 
     let deltaStr = '—';
     let deltaClass = '';
-    if (prev && prev.projectedTokensAt100 != null && d.projectedTokensAt100 != null && prev.projectedTokensAt100 > 0) {
-      const delta = ((d.projectedTokensAt100 - prev.projectedTokensAt100) / prev.projectedTokensAt100) * 100;
+    if (prev && prev.projectedCostAt100 != null && d.projectedCostAt100 != null && prev.projectedCostAt100 > 0) {
+      const delta = ((d.projectedCostAt100 - prev.projectedCostAt100) / prev.projectedCostAt100) * 100;
       deltaStr = `${delta >= 0 ? '+' : ''}${delta.toFixed(1)}%`;
       deltaClass = delta >= 0 ? 'delta-positive' : 'delta-negative';
     }

package/server/quota-cycles.js

@@ -7,6 +7,35 @@ import { calculateRecordCost } from './pricing.js';
 
 const MAX_HISTORY = 52;
 
+/**
+ * Normalize a cycle's resets_at to hour precision for use as a dedup key.
+ * The API returns varying sub-second precision across calls and machines,
+ * so raw strings cannot be used for grouping.
+ */
+function cyclePeriodKey(cycle) {
+  const d = new Date(cycle.resets_at);
+  d.setMinutes(0, 0, 0);
+  return d.toISOString();
+}
+
+/**
+ * Deduplicate history entries that represent the same quota cycle period.
+ * Keeps the entry with the latest lastUpdated for each period.
+ */
+function deduplicateHistory(history) {
+  const byKey = new Map();
+  for (const entry of history) {
+    const key = cyclePeriodKey(entry);
+    const existing = byKey.get(key);
+    if (!existing || new Date(entry.lastUpdated) > new Date(existing.lastUpdated)) {
+      byKey.set(key, entry);
+    }
+  }
+  const result = Array.from(byKey.values());
+  result.sort((a, b) => new Date(b.resets_at) - new Date(a.resets_at));
+  return result;
+}
+
 /**
  * Pure computation: given records (already filtered to a cycle) and quota data,
  * compute actual tokens/cost and project at 100% utilization.
@@ -121,12 +150,13 @@ export function updateQuotaCycleSnapshot(quotaData, logBaseDir, machineName, sna
     snapshot = { schemaVersion: 1, machineName, currentCycle: null, history: [] };
   }
 
-  // Compare normalized timestamps to detect actual cycle boundary changes
-  const storedResetNorm = snapshot.currentCycle
-    ? new Date(snapshot.currentCycle.resets_at).setMilliseconds(0)
-    : null;
-  if (snapshot.currentCycle && storedResetNorm !== rawResetsAt.getTime()) {
+  // Compare normalized period keys to detect actual cycle boundary changes.
+  // Uses hour-precision keys to tolerate varying sub-second timestamps from the API.
+  const storedKey = snapshot.currentCycle ? cyclePeriodKey(snapshot.currentCycle) : null;
+  const newKey = cyclePeriodKey({ resets_at: resetsAt });
+  if (snapshot.currentCycle && storedKey !== newKey) {
     snapshot.history.unshift(snapshot.currentCycle);
+    snapshot.history = deduplicateHistory(snapshot.history);
     if (snapshot.history.length > MAX_HISTORY) {
       snapshot.history = snapshot.history.slice(0, MAX_HISTORY);
     }
@@ -181,34 +211,55 @@ export function loadQuotaCycles(machineName, syncDir, snapshotDir) {
   const machines = snapshots.map(s => s.machineName);
 
   if (snapshots.length === 1) {
+    // Single machine: duplicates are time-series snapshots of the same data,
+    // so dedup (keep most recent) and filter out current-cycle overlap.
     const s = snapshots[0];
-    return { currentCycle: s.currentCycle, history: s.history, machines };
+    let history = deduplicateHistory(s.history);
+    if (s.currentCycle) {
+      const currentKey = cyclePeriodKey(s.currentCycle);
+      history = history.filter(h => cyclePeriodKey(h) !== currentKey);
+    }
+    return { currentCycle: s.currentCycle, history, machines };
   }
 
-  return {
-    currentCycle: mergeCycles(snapshots.map(s => s.currentCycle).filter(Boolean)),
-    history: mergeHistories(snapshots.map(s => s.history)),
-    machines,
-  };
+  // Multi-machine: dedup within each machine first (removes false-switch
+  // duplicates), then merge across machines (sums different machines' data).
+  const dedupedHistories = snapshots.map(s => deduplicateHistory(s.history));
+  let currentCycle = mergeCycles(snapshots.map(s => s.currentCycle).filter(Boolean));
+  let history = mergeHistories(dedupedHistories);
+
+  // If history contains entries for the current cycle's period (e.g. from an
+  // offline machine whose cycle was archived), merge them INTO the current
+  // cycle instead of dropping them.
+  if (currentCycle) {
+    const currentKey = cyclePeriodKey(currentCycle);
+    const overlapping = history.filter(h => cyclePeriodKey(h) === currentKey);
+    history = history.filter(h => cyclePeriodKey(h) !== currentKey);
+    if (overlapping.length > 0) {
+      currentCycle = mergeSamePeriodCycles([currentCycle, ...overlapping]);
+    }
+  }
+
+  return { currentCycle, history, machines };
 }
 
 function mergeCycles(cycles) {
   if (cycles.length === 0) return null;
   if (cycles.length === 1) return cycles[0];
 
-  const byReset = new Map();
+  const byPeriod = new Map();
   for (const c of cycles) {
-    const key = c.resets_at;
-    if (!byReset.has(key)) byReset.set(key, []);
-    byReset.get(key).push(c);
+    const key = cyclePeriodKey(c);
+    if (!byPeriod.has(key)) byPeriod.set(key, []);
+    byPeriod.get(key).push(c);
   }
 
   let bestKey = null, bestCount = 0;
-  for (const [key, arr] of byReset) {
+  for (const [key, arr] of byPeriod) {
     if (arr.length > bestCount || (arr.length === bestCount && key > bestKey)) { bestKey = key; bestCount = arr.length; }
   }
 
-  const sameCycle = byReset.get(bestKey);
+  const sameCycle = byPeriod.get(bestKey);
   return mergeSamePeriodCycles(sameCycle);
 }
 
@@ -255,17 +306,17 @@ function mergeMetrics(metricsArray, utilization) {
 }
 
 function mergeHistories(historyArrays) {
-  const byReset = new Map();
+  const byPeriod = new Map();
   for (const history of historyArrays) {
     for (const entry of history) {
-      const key = entry.resets_at;
-      if (!byReset.has(key)) byReset.set(key, []);
-      byReset.get(key).push(entry);
+      const key = cyclePeriodKey(entry);
+      if (!byPeriod.has(key)) byPeriod.set(key, []);
+      byPeriod.get(key).push(entry);
     }
   }
 
   const merged = [];
-  for (const [, entries] of byReset) {
+  for (const [, entries] of byPeriod) {
     merged.push(mergeSamePeriodCycles(entries));
   }