claude-usage-dashboard 1.3.11 → 1.3.13

package/README.md

@@ -10,7 +10,7 @@ A self-hosted dashboard that visualizes your [Claude Code](https://claude.ai/cod
 
 - **Token tracking** — Total tokens with breakdown by input, output, cache read, and cache write
 - **Cost estimation** — API cost equivalent at standard pricing
-- **Subscription quota** — Real-time utilization gauges (5-hour, 7-day, per-model) pulled from the Anthropic API with auto-detection of your plan tier. Includes projected API cost at 100% quota utilization (weekly and monthly). 7-day reset shows full date+time; all timestamps include timezone
+- **Subscription quota** — Real-time utilization gauges (5-hour, 7-day, per-model) pulled from the Anthropic API with auto-detection of your plan tier. Includes projected API cost at 100% quota utilization (weekly and monthly), calculated using the exact quota window derived from the 7-day reset time. Shows the quota window date range for transparency. Date picker defaults to the current quota period on page load
 - **Token consumption trend** — Stacked bar chart with hourly, daily, weekly, or monthly granularity. Toggle between tokens and dollar view. Includes period summary with avg/min/max stats, active hours heatmap, and smart date range limits per granularity
 - **Model distribution** — Donut chart showing usage across Claude models
 - **Cache efficiency** — Visual breakdown of cache read, cache creation, and uncached requests

package/bin/cli.cjs

@@ -1,7 +1,8 @@
-#!/usr/bin/env node
-'use strict';
-const { join } = require('path');
-const { pathToFileURL } = require('url');
-
-const serverPath = join(__dirname, '..', 'server', 'index.js');
-import(pathToFileURL(serverPath).href);
+#!/usr/bin/env node
+'use strict';
+const { join } = require('path');
+const { spawnSync } = require('child_process');
+
+const serverPath = join(__dirname, '..', 'server', 'index.js');
+const result = spawnSync(process.execPath, [serverPath], { stdio: 'inherit' });
+process.exit(result.status || 0);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "claude-usage-dashboard",
-  "version": "1.3.11",
+  "version": "1.3.13",
   "description": "Dashboard that visualizes Claude Code usage from local session logs",
   "main": "server/index.js",
   "bin": {

package/public/js/app.js

@@ -47,18 +47,40 @@ function getTimezoneAbbr() {
   return tz ? tz.value : '';
 }
 
+// Derive the 7-day quota window from resets_at, truncated to the hour
+function getQuotaWindow(sevenDay) {
+  if (!sevenDay?.resets_at) return null;
+  const resetsAt = new Date(sevenDay.resets_at);
+  resetsAt.setMinutes(0, 0, 0);
+  const windowStart = new Date(resetsAt);
+  windowStart.setDate(windowStart.getDate() - 7);
+  return { from: windowStart, to: resetsAt };
+}
+
 async function loadQuota() {
   try {
-    const today = new Date();
-    const sevenDaysAgo = new Date(today);
-    sevenDaysAgo.setDate(today.getDate() - 7);
-    const fmt = d => d.toISOString().slice(0, 10);
+    const data = await fetchQuota();
+
+    // Use the actual quota window (resets_at - 7 days → resets_at)
+    let cost7dValue = 0;
+    let quotaWindowFrom = null;
+    let quotaWindowTo = null;
+    const sevenDay = data.seven_day;
+    const window = getQuotaWindow(sevenDay);
+    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;
+    }
 
-    const [data, cost7d] = await Promise.all([
-      fetchQuota(),
-      fetchCost({ from: fmt(sevenDaysAgo), to: fmt(today), plan: state.plan.plan }),
-    ]);
-    renderQuotaGauges(document.getElementById('chart-quota'), data, { cost7d: cost7d.api_equivalent_cost_usd });
+    renderQuotaGauges(document.getElementById('chart-quota'), data, {
+      cost7d: cost7dValue, quotaWindowFrom, quotaWindowTo,
+    });
     const el = document.getElementById('quota-last-updated');
     if (el && data.lastFetched) el.textContent = `Updated ${new Date(data.lastFetched).toLocaleTimeString()} ${getTimezoneAbbr()}`;
   } catch { /* silently degrade */ }
@@ -265,9 +287,18 @@ function init() {
     }
   }).catch(() => {});
 
-  loadAll();
-  loadQuota();
-  startAutoRefresh();
+  // Default date range to the 7-day quota window (resets_at - 7 days → resets_at)
+  fetchQuota().then(data => {
+    const window = getQuotaWindow(data.seven_day);
+    if (window) {
+      const fmt = d => `${d.getFullYear()}-${String(d.getMonth()+1).padStart(2,'0')}-${String(d.getDate()).padStart(2,'0')}`;
+      datePicker.setRange(fmt(window.from), fmt(window.to));
+    }
+  }).catch(() => {}).finally(() => {
+    loadAll();
+    loadQuota();
+    startAutoRefresh();
+  });
 }
 
 document.addEventListener('DOMContentLoaded', init);

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

@@ -95,9 +95,18 @@ export function renderQuotaGauges(container, data, opts = {}) {
     const proj = document.createElement('div');
     proj.style.cssText = 'margin-top:12px;padding:8px 12px;background:#1e293b;border-radius:6px;font-size:12px;color:#94a3b8';
     const monthlyProjected = projectedCost * (30 / 7);
+
+    // Format the quota window range for display
+    const dtFmt = { month: 'short', day: 'numeric', hour: 'numeric', minute: '2-digit' };
+    const tzParts = new Intl.DateTimeFormat(undefined, { timeZoneName: 'short' }).formatToParts(new Date());
+    const tz = tzParts.find(p => p.type === 'timeZoneName')?.value || '';
+    const windowRange = opts.quotaWindowFrom && opts.quotaWindowTo
+      ? ` <span style="color:#64748b">(${opts.quotaWindowFrom.toLocaleString(undefined, dtFmt)} → ${opts.quotaWindowTo.toLocaleString(undefined, dtFmt)} ${tz})</span>`
+      : '';
+
     proj.innerHTML =
-      `7-day usage: <strong style="color:#e2e8f0">$${opts.cost7d.toFixed(2)}</strong> API cost at <strong style="color:#e2e8f0">${sevenDay.utilization.toFixed(1)}%</strong> quota` +
-      ` · Projected at 100%: <strong style="color:#fbbf24">$${projectedCost.toFixed(2)}</strong>/week` +
+      `7-day usage: <strong style="color:#e2e8f0">$${opts.cost7d.toFixed(2)}</strong> API cost at <strong style="color:#e2e8f0">${sevenDay.utilization.toFixed(1)}%</strong> quota${windowRange}` +
+      `<br>Projected at 100%: <strong style="color:#fbbf24">$${projectedCost.toFixed(2)}</strong>/week` +
       ` · <strong style="color:#fbbf24">$${monthlyProjected.toFixed(2)}</strong>/month`;
     container.appendChild(proj);
   }

package/server/aggregator.js

@@ -2,9 +2,13 @@ import { calculateRecordCost, getModelPricing } from './pricing.js';
 
 export function filterByDateRange(records, from, to) {
   if (!from && !to) return records;
-  // Use local time boundaries (no Z suffix = local timezone)
-  const start = from ? new Date(from + 'T00:00:00.000').getTime() : -Infinity;
-  const end = to ? new Date(to + 'T23:59:59.999').getTime() : Infinity;
+  // Support both date-only (YYYY-MM-DD → local time boundaries) and full ISO timestamps
+  const start = from
+    ? new Date(from.includes('T') ? from : from + 'T00:00:00.000').getTime()
+    : -Infinity;
+  const end = to
+    ? new Date(to.includes('T') ? to : to + 'T23:59:59.999').getTime()
+    : Infinity;
   return records.filter(r => {
     const t = new Date(r.timestamp).getTime();
     return t >= start && t <= end;