claude-usage-dashboard 1.3.2 → 1.3.3

package/README.md

@@ -9,8 +9,8 @@ A self-hosted dashboard that visualizes your [Claude Code](https://claude.ai/cod
 ## Features
 
 - **Token tracking** — Total tokens with breakdown by input, output, cache read, and cache write
-- **Cost estimation** — API cost equivalent at standard pricing, compared against your subscription plan (Pro / Max 5x / Max 20x)
-- **Subscription quota** — Real-time utilization gauges (5-hour, 7-day, per-model) pulled from the Anthropic API with auto-detection of your plan tier. 7-day reset shows full date+time; all timestamps include timezone
+- **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
 - **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/package.json

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

package/public/css/style.css

@@ -37,7 +37,7 @@ body {
 
 .summary-cards {
   display: grid;
-  grid-template-columns: repeat(4, 1fr);
+  grid-template-columns: repeat(3, 1fr);
   gap: 12px;
   margin-bottom: 20px;
 }

package/public/index.html

@@ -34,12 +34,7 @@
       <div class="card-value" id="val-api-cost">—</div>
       <div class="card-sub" id="sub-api-cost">at standard API pricing</div>
     </div>
-    <div class="card" id="card-savings">
-      <div class="card-label">You Saved</div>
-      <div class="card-value" id="val-savings">—</div>
-      <div class="card-sub" id="sub-savings"></div>
-    </div>
-    <div class="card" id="card-cache">
+<div class="card" id="card-cache">
       <div class="card-label">Cache Hit Rate</div>
       <div class="card-value" id="val-cache-rate">—</div>
       <div class="card-sub" id="sub-cache-rate">cache_read / total input</div>

package/public/js/app.js

@@ -49,8 +49,16 @@ function getTimezoneAbbr() {
 
 async function loadQuota() {
   try {
-    const data = await fetchQuota();
-    renderQuotaGauges(document.getElementById('chart-quota'), data);
+    const today = new Date();
+    const sevenDaysAgo = new Date(today);
+    sevenDaysAgo.setDate(today.getDate() - 7);
+    const fmt = d => d.toISOString().slice(0, 10);
+
+    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 });
     const el = document.getElementById('quota-last-updated');
     if (el && data.lastFetched) el.textContent = `Updated ${new Date(data.lastFetched).toLocaleTimeString()} ${getTimezoneAbbr()}`;
   } catch { /* silently degrade */ }
@@ -106,12 +114,6 @@ async function loadAll() {
     `<span style="color:#f97316">out:${formatNumber(t.output_tokens)}</span>`;
   document.getElementById('val-api-cost').textContent = `$${cost.api_equivalent_cost_usd.toFixed(2)}`;
 
-  const savings = cost.savings_usd;
-  const savingsEl = document.getElementById('val-savings');
-  savingsEl.textContent = `$${Math.abs(savings).toFixed(2)}`;
-  savingsEl.style.color = savings >= 0 ? '#4ade80' : '#ef4444';
-  document.getElementById('sub-savings').textContent = savings >= 0 ? 'subscription saved you this much!' : 'API would have been cheaper';
-
   document.getElementById('val-cache-rate').textContent = `${(cache.cache_read_rate * 100).toFixed(1)}%`;
 
   // Set active granularity button

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

@@ -1,4 +1,4 @@
-export function renderQuotaGauges(container, data) {
+export function renderQuotaGauges(container, data, opts = {}) {
   container.innerHTML = '';
 
   if (!data || data.available === false) {
@@ -85,4 +85,20 @@ export function renderQuotaGauges(container, data) {
   }
 
   container.appendChild(wrapper);
+
+  // Project cost at full 7-day quota utilization
+  const sevenDay = data.seven_day;
+  if (sevenDay && sevenDay.utilization > 0 && opts.cost7d > 0) {
+    const pct = sevenDay.utilization / 100;
+    const projectedCost = opts.cost7d / pct;
+
+    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);
+    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` +
+      ` · <strong style="color:#fbbf24">$${monthlyProjected.toFixed(2)}</strong>/month`;
+    container.appendChild(proj);
+  }
 }