claude-usage-dashboard 1.1.0 → 1.2.0

package/package.json

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

package/public/css/style.css

@@ -245,6 +245,14 @@ body {
   z-index: 100;
 }
 
+.quota-unavailable {
+  color: var(--text-muted);
+  font-size: 13px;
+  padding: 20px;
+  text-align: center;
+}
+#quota-section .chart-container { min-height: auto; }
+
 @media (max-width: 768px) {
   .summary-cards { grid-template-columns: repeat(2, 1fr); }
   .chart-row-3 { grid-template-columns: 1fr; }

package/public/index.html

@@ -46,6 +46,14 @@
     </div>
   </section>
 
+  <section class="chart-section" id="quota-section">
+    <div class="chart-header">
+      <h2>Subscription Quota</h2>
+      <span id="quota-last-updated" class="last-updated"></span>
+    </div>
+    <div id="chart-quota" class="chart-container"></div>
+  </section>
+
   <section class="chart-section">
     <div class="chart-header">
       <h2>Token Consumption Trend</h2>

package/public/js/api.js

@@ -12,3 +12,4 @@ export async function fetchSessions(params = {}) { return (await fetch(`${BASE}/
 export async function fetchCost(params = {}) { return (await fetch(`${BASE}/cost${qs(params)}`)).json(); }
 export async function fetchCache(params = {}) { return (await fetch(`${BASE}/cache${qs(params)}`)).json(); }
 export async function fetchStatus() { return (await fetch(`${BASE}/status`)).json(); }
+export async function fetchQuota() { return (await fetch(`${BASE}/quota`)).json(); }

package/public/js/app.js

@@ -1,4 +1,4 @@
-import { fetchUsage, fetchModels, fetchProjects, fetchSessions, fetchCost, fetchCache, fetchStatus } from './api.js';
+import { fetchUsage, fetchModels, fetchProjects, fetchSessions, fetchCost, fetchCache, fetchStatus, fetchQuota } from './api.js';
 import { initDatePicker } from './components/date-picker.js';
 import { initPlanSelector } from './components/plan-selector.js';
 import { renderTokenTrend } from './charts/token-trend.js';
@@ -7,6 +7,7 @@ import { renderModelDistribution } from './charts/model-distribution.js';
 import { renderCacheEfficiency } from './charts/cache-efficiency.js';
 import { renderProjectDistribution } from './charts/project-distribution.js';
 import { renderSessionTable } from './charts/session-stats.js';
+import { renderQuotaGauges } from './charts/quota-gauge.js';
 
 const state = {
   dateRange: { from: null, to: null },
@@ -19,6 +20,8 @@ const state = {
   autoRefresh: true,
   autoRefreshInterval: 30,
   _refreshTimer: null,
+  quotaRefreshInterval: 120,
+  _quotaTimer: null,
 };
 
 let datePicker, planSelector;
@@ -37,10 +40,20 @@ function updateLastUpdated() {
   }
 }
 
+async function loadQuota() {
+  try {
+    const data = await fetchQuota();
+    renderQuotaGauges(document.getElementById('chart-quota'), data);
+    const el = document.getElementById('quota-last-updated');
+    if (el && data.lastFetched) el.textContent = `Updated ${new Date(data.lastFetched).toLocaleTimeString()}`;
+  } catch { /* silently degrade */ }
+}
+
 function startAutoRefresh() {
   stopAutoRefresh();
   if (state.autoRefresh) {
     state._refreshTimer = setInterval(() => loadAll(), state.autoRefreshInterval * 1000);
+    state._quotaTimer = setInterval(() => loadQuota(), state.quotaRefreshInterval * 1000);
   }
 }
 
@@ -49,6 +62,10 @@ function stopAutoRefresh() {
     clearInterval(state._refreshTimer);
     state._refreshTimer = null;
   }
+  if (state._quotaTimer) {
+    clearInterval(state._quotaTimer);
+    state._quotaTimer = null;
+  }
 }
 
 async function loadAll() {
@@ -161,7 +178,7 @@ function init() {
     loadAll();
   });
 
-  document.getElementById('btn-refresh').addEventListener('click', () => loadAll());
+  document.getElementById('btn-refresh').addEventListener('click', () => { loadAll(); loadQuota(); });
 
   const autoToggle = document.getElementById('auto-refresh-toggle');
   autoToggle.addEventListener('change', () => {
@@ -174,6 +191,7 @@ function init() {
   });
 
   loadAll();
+  loadQuota();
   startAutoRefresh();
 }
 

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

@@ -0,0 +1,78 @@
+export function renderQuotaGauges(container, data) {
+  container.innerHTML = '';
+
+  if (!data || data.available === false) {
+    const msg = document.createElement('div');
+    msg.className = 'quota-unavailable';
+    const reason = data?.error === 'no_credentials'
+      ? 'No Claude credentials found. Run "claude" CLI to authenticate.'
+      : data?.error === 'rate_limited'
+        ? 'Quota API rate limited. Will retry on next refresh.'
+        : 'Quota data unavailable';
+    msg.textContent = reason;
+    container.appendChild(msg);
+    return;
+  }
+
+  const items = [];
+  if (data.five_hour) items.push({ label: '5-Hour Window', ...data.five_hour });
+  if (data.seven_day) items.push({ label: '7-Day Total', ...data.seven_day });
+  if (data.seven_day_opus) items.push({ label: '7-Day Opus', ...data.seven_day_opus });
+  if (data.seven_day_sonnet) items.push({ label: '7-Day Sonnet', ...data.seven_day_sonnet });
+  if (data.extra_usage?.is_enabled) {
+    items.push({
+      label: 'Extra Usage',
+      utilization: data.extra_usage.utilization || 0,
+      resets_at: null,
+      extraDetail: data.extra_usage.monthly_limit != null
+        ? `$${(data.extra_usage.used_credits || 0).toFixed(2)} / $${data.extra_usage.monthly_limit.toFixed(2)}`
+        : null,
+    });
+  }
+
+  if (items.length === 0) {
+    const msg = document.createElement('div');
+    msg.className = 'quota-unavailable';
+    msg.textContent = 'No quota data available';
+    container.appendChild(msg);
+    return;
+  }
+
+  const wrapper = document.createElement('div');
+  wrapper.style.cssText = 'display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px';
+
+  for (const item of items) {
+    const pct = Math.min(100, Math.max(0, item.utilization || 0));
+    const color = pct < 50 ? '#4ade80' : pct < 80 ? '#f59e0b' : '#ef4444';
+
+    const cell = document.createElement('div');
+
+    const header = document.createElement('div');
+    header.style.cssText = 'display:flex;justify-content:space-between;font-size:11px;color:#94a3b8;margin-bottom:4px';
+    header.innerHTML = `<span>${item.label}</span><span style="color:${color};font-weight:600">${pct.toFixed(1)}%</span>`;
+
+    const barBg = document.createElement('div');
+    barBg.style.cssText = 'height:8px;background:#334155;border-radius:4px;overflow:hidden';
+
+    const barFill = document.createElement('div');
+    barFill.style.cssText = `width:${pct}%;height:100%;background:${color};border-radius:4px;transition:width 0.5s`;
+
+    barBg.appendChild(barFill);
+    cell.appendChild(header);
+    cell.appendChild(barBg);
+
+    // Reset time or extra detail
+    const sub = document.createElement('div');
+    sub.style.cssText = 'font-size:10px;color:#64748b;margin-top:2px';
+    if (item.extraDetail) {
+      sub.textContent = item.extraDetail;
+    } else if (item.resets_at) {
+      sub.textContent = `Resets ${new Date(item.resets_at).toLocaleTimeString()}`;
+    }
+    cell.appendChild(sub);
+
+    wrapper.appendChild(cell);
+  }
+
+  container.appendChild(wrapper);
+}

package/server/credentials.js

@@ -0,0 +1,22 @@
+import fs from 'fs';
+import path from 'path';
+import os from 'os';
+
+const CREDENTIALS_PATH = path.join(os.homedir(), '.claude', '.credentials.json');
+
+export function readCredentials(credentialsPath = CREDENTIALS_PATH) {
+  try {
+    const raw = fs.readFileSync(credentialsPath, 'utf-8');
+    const data = JSON.parse(raw);
+    return data.claudeAiOauth || null;
+  } catch {
+    return null;
+  }
+}
+
+export function getAccessToken(credentialsPath = CREDENTIALS_PATH) {
+  const creds = readCredentials(credentialsPath);
+  if (!creds || !creds.accessToken) return null;
+  if (creds.expiresAt && creds.expiresAt < Date.now()) return null;
+  return creds.accessToken;
+}

package/server/quota.js

@@ -0,0 +1,49 @@
+import { getAccessToken } from './credentials.js';
+
+const USAGE_URL = 'https://api.anthropic.com/api/oauth/usage';
+
+export function createQuotaFetcher(options = {}) {
+  const CACHE_TTL = options.cacheTtlMs || 120_000;
+  const getToken = options.getAccessToken || getAccessToken;
+  let cached = null;
+  let lastFetched = 0;
+  let fetchInProgress = null;
+
+  async function fetchQuota() {
+    const now = Date.now();
+    if (cached && (now - lastFetched) < CACHE_TTL) return cached;
+    if (fetchInProgress) return fetchInProgress;
+
+    fetchInProgress = (async () => {
+      try {
+        const token = getToken();
+        if (!token) return cached || { available: false, error: 'no_credentials' };
+
+        const res = await fetch(USAGE_URL, {
+          headers: {
+            'Authorization': `Bearer ${token}`,
+            'anthropic-beta': 'oauth-2025-04-20',
+          },
+        });
+
+        if (!res.ok) {
+          if (res.status === 429) return cached || { available: false, error: 'rate_limited' };
+          return cached || { available: false, error: `http_${res.status}` };
+        }
+
+        const data = await res.json();
+        cached = { available: true, ...data, lastFetched: new Date().toISOString() };
+        lastFetched = Date.now();
+        return cached;
+      } catch (err) {
+        return cached || { available: false, error: err.message };
+      } finally {
+        fetchInProgress = null;
+      }
+    })();
+
+    return fetchInProgress;
+  }
+
+  return { fetchQuota };
+}

package/server/routes/api.js

@@ -2,6 +2,7 @@ import { Router } from 'express';
 import { parseLogDirectory } from '../parser.js';
 import { filterByDateRange, autoGranularity, aggregateByTime, aggregateBySession, aggregateByProject, aggregateByModel, aggregateCache } from '../aggregator.js';
 import { calculateRecordCost, PLAN_DEFAULTS } from '../pricing.js';
+import { createQuotaFetcher } from '../quota.js';
 
 export function createApiRouter(logBaseDir, options = {}) {
   const router = Router();
@@ -98,6 +99,16 @@ export function createApiRouter(logBaseDir, options = {}) {
 
   router.get('/cache', (req, res) => { res.json(aggregateCache(applyFilters(req.query))); });
 
+  const quotaFetcher = options.quotaFetcher || createQuotaFetcher();
+  router.get('/quota', async (req, res) => {
+    try {
+      const data = await quotaFetcher.fetchQuota();
+      res.json(data);
+    } catch (err) {
+      res.json({ available: false, error: err.message });
+    }
+  });
+
   router.get('/status', (req, res) => {
     res.json({
       record_count: cachedRecords.length,