claude-usage-dashboard 1.0.6 → 1.2.0

package/package.json

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

@@ -194,6 +194,36 @@ body {
 }
 .date-picker span { color: var(--text-secondary); font-size: 12px; }
 
+.refresh-controls {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+.btn-refresh {
+  padding: 4px 10px;
+  background: var(--bg-input);
+  border: 1px solid var(--border);
+  border-radius: 6px;
+  color: var(--text-primary);
+  font-size: 16px;
+  cursor: pointer;
+  line-height: 1;
+}
+.btn-refresh:hover { background: var(--blue); }
+.auto-refresh-label {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  font-size: 12px;
+  color: var(--text-secondary);
+  cursor: pointer;
+}
+.last-updated {
+  font-size: 11px;
+  color: var(--text-muted);
+  white-space: nowrap;
+}
+
 .plan-selector select, .plan-selector input {
   padding: 6px 10px;
   background: var(--bg-input);
@@ -215,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

@@ -13,6 +13,13 @@
     <div class="controls">
       <div id="date-picker" class="date-picker"></div>
       <div id="plan-selector" class="plan-selector"></div>
+      <div class="refresh-controls">
+        <button id="btn-refresh" class="btn-refresh" title="Refresh now">↻</button>
+        <label class="auto-refresh-label">
+          <input type="checkbox" id="auto-refresh-toggle" checked> Auto
+        </label>
+        <span id="last-updated" class="last-updated"></span>
+      </div>
     </div>
   </header>
 
@@ -39,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

@@ -11,3 +11,5 @@ export async function fetchProjects(params = {}) { return (await fetch(`${BASE}/
 export async function fetchSessions(params = {}) { return (await fetch(`${BASE}/sessions${qs(params)}`)).json(); }
 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 } 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 },
@@ -16,6 +17,11 @@ const state = {
   sessionOrder: 'desc',
   sessionPage: 1,
   sessionProject: '',
+  autoRefresh: true,
+  autoRefreshInterval: 30,
+  _refreshTimer: null,
+  quotaRefreshInterval: 120,
+  _quotaTimer: null,
 };
 
 let datePicker, planSelector;
@@ -26,6 +32,42 @@ function formatNumber(n) {
   return n.toString();
 }
 
+function updateLastUpdated() {
+  const el = document.getElementById('last-updated');
+  if (el) {
+    const now = new Date();
+    el.textContent = `Updated ${now.toLocaleTimeString()}`;
+  }
+}
+
+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);
+  }
+}
+
+function stopAutoRefresh() {
+  if (state._refreshTimer) {
+    clearInterval(state._refreshTimer);
+    state._refreshTimer = null;
+  }
+  if (state._quotaTimer) {
+    clearInterval(state._quotaTimer);
+    state._quotaTimer = null;
+  }
+}
+
 async function loadAll() {
   const params = { ...state.dateRange };
   const planParams = { ...state.dateRange, plan: state.plan.plan };
@@ -93,6 +135,8 @@ async function loadAll() {
       loadAll();
     },
   });
+
+  updateLastUpdated();
 }
 
 function init() {
@@ -134,7 +178,21 @@ function init() {
     loadAll();
   });
 
+  document.getElementById('btn-refresh').addEventListener('click', () => { loadAll(); loadQuota(); });
+
+  const autoToggle = document.getElementById('auto-refresh-toggle');
+  autoToggle.addEventListener('change', () => {
+    state.autoRefresh = autoToggle.checked;
+    if (state.autoRefresh) {
+      startAutoRefresh();
+    } else {
+      stopAutoRefresh();
+    }
+  });
+
   loadAll();
+  loadQuota();
+  startAutoRefresh();
 }
 
 document.addEventListener('DOMContentLoaded', init);

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,19 +2,34 @@ 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) {
+export function createApiRouter(logBaseDir, options = {}) {
   const router = Router();
-  let allRecords = [];
-  try {
-    allRecords = parseLogDirectory(logBaseDir);
-    console.log(`Parsed ${allRecords.length} records from ${logBaseDir}`);
-  } catch (err) {
-    console.error('Failed to parse log directory:', err.message);
+  const CACHE_TTL_MS = options.cacheTtlMs || 5000;
+  let cachedRecords = [];
+  let lastRefreshed = null;
+
+  function refreshRecords() {
+    const now = Date.now();
+    if (lastRefreshed && (now - lastRefreshed) < CACHE_TTL_MS) return cachedRecords;
+    try {
+      cachedRecords = parseLogDirectory(logBaseDir);
+      lastRefreshed = now;
+      console.log(`Parsed ${cachedRecords.length} records from ${logBaseDir}`);
+    } catch (err) {
+      console.error('Failed to parse log directory:', err.message);
+      // Keep stale data on failure
+      if (!lastRefreshed) lastRefreshed = now;
+    }
+    return cachedRecords;
   }
 
+  // Initial parse
+  refreshRecords();
+
   function applyFilters(query) {
-    let records = filterByDateRange(allRecords, query.from, query.to);
+    let records = filterByDateRange(refreshRecords(), query.from, query.to);
     if (query.project) records = records.filter(r => r.project === query.project);
     if (query.model) records = records.filter(r => r.model === query.model);
     return records;
@@ -83,5 +98,24 @@ export function createApiRouter(logBaseDir) {
   });
 
   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,
+      last_refreshed: lastRefreshed ? new Date(lastRefreshed).toISOString() : null,
+      cache_ttl_ms: CACHE_TTL_MS,
+    });
+  });
+
   return router;
 }