claude-usage-dashboard 1.0.6 → 1.1.0

package/package.json

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

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>
 

package/public/js/api.js

@@ -11,3 +11,4 @@ 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(); }

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 } from './api.js';
 import { initDatePicker } from './components/date-picker.js';
 import { initPlanSelector } from './components/plan-selector.js';
 import { renderTokenTrend } from './charts/token-trend.js';
@@ -16,6 +16,9 @@ const state = {
   sessionOrder: 'desc',
   sessionPage: 1,
   sessionProject: '',
+  autoRefresh: true,
+  autoRefreshInterval: 30,
+  _refreshTimer: null,
 };
 
 let datePicker, planSelector;
@@ -26,6 +29,28 @@ 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()}`;
+  }
+}
+
+function startAutoRefresh() {
+  stopAutoRefresh();
+  if (state.autoRefresh) {
+    state._refreshTimer = setInterval(() => loadAll(), state.autoRefreshInterval * 1000);
+  }
+}
+
+function stopAutoRefresh() {
+  if (state._refreshTimer) {
+    clearInterval(state._refreshTimer);
+    state._refreshTimer = null;
+  }
+}
+
 async function loadAll() {
   const params = { ...state.dateRange };
   const planParams = { ...state.dateRange, plan: state.plan.plan };
@@ -93,6 +118,8 @@ async function loadAll() {
       loadAll();
     },
   });
+
+  updateLastUpdated();
 }
 
 function init() {
@@ -134,7 +161,20 @@ function init() {
     loadAll();
   });
 
+  document.getElementById('btn-refresh').addEventListener('click', () => loadAll());
+
+  const autoToggle = document.getElementById('auto-refresh-toggle');
+  autoToggle.addEventListener('change', () => {
+    state.autoRefresh = autoToggle.checked;
+    if (state.autoRefresh) {
+      startAutoRefresh();
+    } else {
+      stopAutoRefresh();
+    }
+  });
+
   loadAll();
+  startAutoRefresh();
 }
 
 document.addEventListener('DOMContentLoaded', init);

package/server/routes/api.js

@@ -3,18 +3,32 @@ import { parseLogDirectory } from '../parser.js';
 import { filterByDateRange, autoGranularity, aggregateByTime, aggregateBySession, aggregateByProject, aggregateByModel, aggregateCache } from '../aggregator.js';
 import { calculateRecordCost, PLAN_DEFAULTS } from '../pricing.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 +97,14 @@ export function createApiRouter(logBaseDir) {
   });
 
   router.get('/cache', (req, res) => { res.json(aggregateCache(applyFilters(req.query))); });
+
+  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;
 }