claude-usage-dashboard 1.3.4 → 1.3.6

package/public/js/components/date-picker.js

@@ -1,35 +1,35 @@
-export function initDatePicker(container, onChange) {
-  const today = new Date();
-  const thirtyDaysAgo = new Date(today);
-  thirtyDaysAgo.setDate(today.getDate() - 30);
-  const fmt = d => d.toISOString().slice(0, 10);
-
-  const savedFrom = localStorage.getItem('datePickerFrom') || fmt(thirtyDaysAgo);
-  const savedTo = localStorage.getItem('datePickerTo') || fmt(today);
-
-  container.innerHTML = `
-    <span>📅</span>
-    <input type="date" id="date-from" value="${savedFrom}">
-    <span>–</span>
-    <input type="date" id="date-to" value="${savedTo}">
-  `;
-
-  const fromInput = container.querySelector('#date-from');
-  const toInput = container.querySelector('#date-to');
-  const emitChange = () => {
-    localStorage.setItem('datePickerFrom', fromInput.value);
-    localStorage.setItem('datePickerTo', toInput.value);
-    onChange({ from: fromInput.value, to: toInput.value });
-  };
-  fromInput.addEventListener('change', emitChange);
-  toInput.addEventListener('change', emitChange);
-
-  return {
-    getRange: () => ({ from: fromInput.value, to: toInput.value }),
-    setRange: (from, to) => {
-      fromInput.value = from;
-      toInput.value = to;
-      emitChange();
-    },
-  };
-}
+export function initDatePicker(container, onChange) {
+  const today = new Date();
+  const thirtyDaysAgo = new Date(today);
+  thirtyDaysAgo.setDate(today.getDate() - 30);
+  const fmt = d => d.toISOString().slice(0, 10);
+
+  const savedFrom = localStorage.getItem('datePickerFrom') || fmt(thirtyDaysAgo);
+  const savedTo = localStorage.getItem('datePickerTo') || fmt(today);
+
+  container.innerHTML = `
+    <span>📅</span>
+    <input type="date" id="date-from" value="${savedFrom}">
+    <span>–</span>
+    <input type="date" id="date-to" value="${savedTo}">
+  `;
+
+  const fromInput = container.querySelector('#date-from');
+  const toInput = container.querySelector('#date-to');
+  const emitChange = () => {
+    localStorage.setItem('datePickerFrom', fromInput.value);
+    localStorage.setItem('datePickerTo', toInput.value);
+    onChange({ from: fromInput.value, to: toInput.value });
+  };
+  fromInput.addEventListener('change', emitChange);
+  toInput.addEventListener('change', emitChange);
+
+  return {
+    getRange: () => ({ from: fromInput.value, to: toInput.value }),
+    setRange: (from, to) => {
+      fromInput.value = from;
+      toInput.value = to;
+      emitChange();
+    },
+  };
+}

package/public/js/components/plan-selector.js

@@ -1,57 +1,57 @@
-const PLANS = {
-  pro: { label: 'Pro', price: 20 },
-  max5x: { label: 'Max 5x', price: 100 },
-  max20x: { label: 'Max 20x', price: 200 },
-};
-
-export function initPlanSelector(container, onChange) {
-  const saved = localStorage.getItem('selectedPlan') || 'max20x';
-  const savedPrice = localStorage.getItem('customPrice') || '';
-  let detectedPlan = null;
-
-  container.innerHTML = `
-    <select id="plan-select">
-      ${Object.entries(PLANS).map(([key, p]) =>
-        `<option value="${key}" ${key === saved ? 'selected' : ''}>${p.label} ($${p.price}/mo)</option>`
-      ).join('')}
-    </select>
-    <input type="number" id="custom-price" placeholder="Custom $" value="${savedPrice}" style="width:80px;display:${savedPrice ? 'inline-block' : 'none'};">
-  `;
-
-  const select = container.querySelector('#plan-select');
-  const customInput = container.querySelector('#custom-price');
-  const emitChange = () => {
-    const plan = select.value;
-    const customPrice = customInput.value ? parseFloat(customInput.value) : null;
-    localStorage.setItem('selectedPlan', plan);
-    if (customPrice) localStorage.setItem('customPrice', customInput.value);
-    else localStorage.removeItem('customPrice');
-    onChange({ plan, customPrice });
-  };
-  select.addEventListener('change', emitChange);
-  customInput.addEventListener('input', emitChange);
-  select.addEventListener('dblclick', () => {
-    customInput.style.display = customInput.style.display === 'none' ? 'inline-block' : 'none';
-  });
-
-  function setDetectedPlan(planKey) {
-    if (!planKey || !PLANS[planKey]) return;
-    detectedPlan = planKey;
-    // Only auto-select if user hasn't manually chosen a plan
-    if (!localStorage.getItem('selectedPlan')) {
-      select.value = planKey;
-      emitChange();
-    }
-    // Update option labels to show which is detected
-    for (const opt of select.options) {
-      const p = PLANS[opt.value];
-      const suffix = opt.value === planKey ? ' ✓' : '';
-      opt.textContent = `${p.label} ($${p.price}/mo)${suffix}`;
-    }
-  }
-
-  return {
-    getPlan: () => ({ plan: select.value, customPrice: customInput.value ? parseFloat(customInput.value) : null }),
-    setDetectedPlan,
-  };
-}
+const PLANS = {
+  pro: { label: 'Pro', price: 20 },
+  max5x: { label: 'Max 5x', price: 100 },
+  max20x: { label: 'Max 20x', price: 200 },
+};
+
+export function initPlanSelector(container, onChange) {
+  const saved = localStorage.getItem('selectedPlan') || 'max20x';
+  const savedPrice = localStorage.getItem('customPrice') || '';
+  let detectedPlan = null;
+
+  container.innerHTML = `
+    <select id="plan-select">
+      ${Object.entries(PLANS).map(([key, p]) =>
+        `<option value="${key}" ${key === saved ? 'selected' : ''}>${p.label} ($${p.price}/mo)</option>`
+      ).join('')}
+    </select>
+    <input type="number" id="custom-price" placeholder="Custom $" value="${savedPrice}" style="width:80px;display:${savedPrice ? 'inline-block' : 'none'};">
+  `;
+
+  const select = container.querySelector('#plan-select');
+  const customInput = container.querySelector('#custom-price');
+  const emitChange = () => {
+    const plan = select.value;
+    const customPrice = customInput.value ? parseFloat(customInput.value) : null;
+    localStorage.setItem('selectedPlan', plan);
+    if (customPrice) localStorage.setItem('customPrice', customInput.value);
+    else localStorage.removeItem('customPrice');
+    onChange({ plan, customPrice });
+  };
+  select.addEventListener('change', emitChange);
+  customInput.addEventListener('input', emitChange);
+  select.addEventListener('dblclick', () => {
+    customInput.style.display = customInput.style.display === 'none' ? 'inline-block' : 'none';
+  });
+
+  function setDetectedPlan(planKey) {
+    if (!planKey || !PLANS[planKey]) return;
+    detectedPlan = planKey;
+    // Only auto-select if user hasn't manually chosen a plan
+    if (!localStorage.getItem('selectedPlan')) {
+      select.value = planKey;
+      emitChange();
+    }
+    // Update option labels to show which is detected
+    for (const opt of select.options) {
+      const p = PLANS[opt.value];
+      const suffix = opt.value === planKey ? ' ✓' : '';
+      opt.textContent = `${p.label} ($${p.price}/mo)${suffix}`;
+    }
+  }
+
+  return {
+    getPlan: () => ({ plan: select.value, customPrice: customInput.value ? parseFloat(customInput.value) : null }),
+    setDetectedPlan,
+  };
+}

package/server/aggregator.js

@@ -1,147 +1,147 @@
-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;
-  return records.filter(r => {
-    const t = new Date(r.timestamp).getTime();
-    return t >= start && t <= end;
-  });
-}
-
-export function autoGranularity(from, to) {
-  if (!from || !to) return 'daily';
-  const days = (new Date(to) - new Date(from)) / (1000 * 60 * 60 * 24);
-  if (days <= 2) return 'hourly';
-  if (days <= 14) return 'daily';
-  if (days <= 60) return 'weekly';
-  return 'monthly';
-}
-
-function pad(n) { return String(n).padStart(2, '0'); }
-
-function localDateStr(d) {
-  return `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())}`;
-}
-
-function bucketKey(timestamp, granularity) {
-  const d = new Date(timestamp);
-  switch (granularity) {
-    case 'hourly':
-      return `${localDateStr(d)}T${pad(d.getHours())}:00`;
-    case 'daily':
-      return localDateStr(d);
-    case 'weekly': {
-      const day = d.getDay();
-      const monday = new Date(d);
-      monday.setDate(d.getDate() - ((day + 6) % 7));
-      return localDateStr(monday);
-    }
-    case 'monthly':
-      return `${d.getFullYear()}-${pad(d.getMonth() + 1)}`;
-    default:
-      return localDateStr(d);
-  }
-}
-
-export function aggregateByTime(records, granularity) {
-  const map = new Map();
-  for (const r of records) {
-    const key = bucketKey(r.timestamp, granularity);
-    if (!map.has(key)) {
-      map.set(key, { time: key, input_tokens: 0, output_tokens: 0, cache_read_tokens: 0, cache_creation_tokens: 0, estimated_cost_usd: 0, models: {} });
-    }
-    const b = map.get(key);
-    b.input_tokens += r.input_tokens;
-    b.output_tokens += r.output_tokens;
-    b.cache_read_tokens += r.cache_read_tokens;
-    b.cache_creation_tokens += r.cache_creation_tokens;
-    b.estimated_cost_usd += calculateRecordCost(r);
-    if (!b.models[r.model]) b.models[r.model] = { input: 0, output: 0 };
-    b.models[r.model].input += r.input_tokens;
-    b.models[r.model].output += r.output_tokens;
-  }
-  return Array.from(map.values()).map(b => {
-    b.estimated_cost_usd = Math.round(b.estimated_cost_usd * 100) / 100;
-    return b;
-  }).sort((a, b) => a.time.localeCompare(b.time));
-}
-
-export function aggregateBySession(records) {
-  const map = new Map();
-  for (const r of records) {
-    if (!map.has(r.sessionId)) {
-      map.set(r.sessionId, { sessionId: r.sessionId, project: r.project, models: new Set(), input_tokens: 0, output_tokens: 0, cache_read_tokens: 0, cache_creation_tokens: 0, startTime: r.timestamp, endTime: r.timestamp, cost: 0 });
-    }
-    const s = map.get(r.sessionId);
-    s.models.add(r.model);
-    s.input_tokens += r.input_tokens;
-    s.output_tokens += r.output_tokens;
-    s.cache_read_tokens += r.cache_read_tokens;
-    s.cache_creation_tokens += r.cache_creation_tokens;
-    s.cost += calculateRecordCost(r);
-    if (r.timestamp < s.startTime) s.startTime = r.timestamp;
-    if (r.timestamp > s.endTime) s.endTime = r.timestamp;
-  }
-  return Array.from(map.values()).map(s => ({
-    sessionId: s.sessionId, project: s.project, models: Array.from(s.models),
-    input_tokens: s.input_tokens, output_tokens: s.output_tokens,
-    cache_read_tokens: s.cache_read_tokens, cache_creation_tokens: s.cache_creation_tokens,
-    total_tokens: s.input_tokens + s.output_tokens + s.cache_read_tokens + s.cache_creation_tokens,
-    startTime: s.startTime, endTime: s.endTime,
-    duration_minutes: Math.round((new Date(s.endTime) - new Date(s.startTime)) / 60000),
-    estimated_cost_usd: Math.round(s.cost * 100) / 100,
-  }));
-}
-
-export function aggregateByProject(records) {
-  const map = new Map();
-  for (const r of records) {
-    if (!map.has(r.project)) {
-      map.set(r.project, { name: r.project, projectDirName: r.projectDirName, total_input_tokens: 0, total_output_tokens: 0, total_cache_read: 0, total_cache_creation: 0, sessions: new Set(), cost: 0 });
-    }
-    const p = map.get(r.project);
-    p.total_input_tokens += r.input_tokens;
-    p.total_output_tokens += r.output_tokens;
-    p.total_cache_read += r.cache_read_tokens;
-    p.total_cache_creation += r.cache_creation_tokens;
-    p.sessions.add(r.sessionId);
-    p.cost += calculateRecordCost(r);
-  }
-  return Array.from(map.values()).map(p => {
-    const path = p.projectDirName ? '/' + p.projectDirName.replace(/^-/, '').replace(/-/g, '/') : '';
-    return { name: p.name, path, total_input_tokens: p.total_input_tokens, total_output_tokens: p.total_output_tokens, cache_read_tokens: p.total_cache_read, cache_creation_tokens: p.total_cache_creation, total_tokens: p.total_input_tokens + p.total_output_tokens + p.total_cache_read + p.total_cache_creation, estimated_cost_usd: Math.round(p.cost * 100) / 100, session_count: p.sessions.size };
-  }).sort((a, b) => b.total_tokens - a.total_tokens);
-}
-
-export function aggregateByModel(records) {
-  const map = new Map();
-  for (const r of records) {
-    if (!map.has(r.model)) map.set(r.model, { id: r.model, total_tokens: 0, input_tokens: 0, output_tokens: 0, cache_read_tokens: 0, cache_creation_tokens: 0 });
-    const m = map.get(r.model);
-    m.input_tokens += r.input_tokens;
-    m.output_tokens += r.output_tokens;
-    m.cache_read_tokens += r.cache_read_tokens;
-    m.cache_creation_tokens += r.cache_creation_tokens;
-    m.total_tokens += r.input_tokens + r.output_tokens + r.cache_read_tokens + r.cache_creation_tokens;
-  }
-  return Array.from(map.values()).map(m => {
-    const pricing = getModelPricing(m.id);
-    return { id: m.id, total_tokens: m.total_tokens, input_tokens: m.input_tokens, output_tokens: m.output_tokens, ...(pricing || {}) };
-  }).sort((a, b) => b.total_tokens - a.total_tokens);
-}
-
-export function aggregateCache(records) {
-  let nonCached = 0, cacheRead = 0, cacheCreation = 0;
-  for (const r of records) { nonCached += r.input_tokens; cacheRead += r.cache_read_tokens; cacheCreation += r.cache_creation_tokens; }
-  const allInput = nonCached + cacheRead + cacheCreation;
-  return {
-    cache_read_tokens: cacheRead, cache_creation_tokens: cacheCreation,
-    non_cached_input_tokens: nonCached, total_input_tokens: allInput,
-    cache_read_rate: allInput > 0 ? Math.round((cacheRead / allInput) * 100) / 100 : 0,
-    cache_creation_rate: allInput > 0 ? Math.round((cacheCreation / allInput) * 100) / 100 : 0,
-    no_cache_rate: allInput > 0 ? Math.round((nonCached / allInput) * 100) / 100 : 0,
-  };
-}
+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;
+  return records.filter(r => {
+    const t = new Date(r.timestamp).getTime();
+    return t >= start && t <= end;
+  });
+}
+
+export function autoGranularity(from, to) {
+  if (!from || !to) return 'daily';
+  const days = (new Date(to) - new Date(from)) / (1000 * 60 * 60 * 24);
+  if (days <= 2) return 'hourly';
+  if (days <= 14) return 'daily';
+  if (days <= 60) return 'weekly';
+  return 'monthly';
+}
+
+function pad(n) { return String(n).padStart(2, '0'); }
+
+function localDateStr(d) {
+  return `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())}`;
+}
+
+function bucketKey(timestamp, granularity) {
+  const d = new Date(timestamp);
+  switch (granularity) {
+    case 'hourly':
+      return `${localDateStr(d)}T${pad(d.getHours())}:00`;
+    case 'daily':
+      return localDateStr(d);
+    case 'weekly': {
+      const day = d.getDay();
+      const monday = new Date(d);
+      monday.setDate(d.getDate() - ((day + 6) % 7));
+      return localDateStr(monday);
+    }
+    case 'monthly':
+      return `${d.getFullYear()}-${pad(d.getMonth() + 1)}`;
+    default:
+      return localDateStr(d);
+  }
+}
+
+export function aggregateByTime(records, granularity) {
+  const map = new Map();
+  for (const r of records) {
+    const key = bucketKey(r.timestamp, granularity);
+    if (!map.has(key)) {
+      map.set(key, { time: key, input_tokens: 0, output_tokens: 0, cache_read_tokens: 0, cache_creation_tokens: 0, estimated_cost_usd: 0, models: {} });
+    }
+    const b = map.get(key);
+    b.input_tokens += r.input_tokens;
+    b.output_tokens += r.output_tokens;
+    b.cache_read_tokens += r.cache_read_tokens;
+    b.cache_creation_tokens += r.cache_creation_tokens;
+    b.estimated_cost_usd += calculateRecordCost(r);
+    if (!b.models[r.model]) b.models[r.model] = { input: 0, output: 0 };
+    b.models[r.model].input += r.input_tokens;
+    b.models[r.model].output += r.output_tokens;
+  }
+  return Array.from(map.values()).map(b => {
+    b.estimated_cost_usd = Math.round(b.estimated_cost_usd * 100) / 100;
+    return b;
+  }).sort((a, b) => a.time.localeCompare(b.time));
+}
+
+export function aggregateBySession(records) {
+  const map = new Map();
+  for (const r of records) {
+    if (!map.has(r.sessionId)) {
+      map.set(r.sessionId, { sessionId: r.sessionId, project: r.project, models: new Set(), input_tokens: 0, output_tokens: 0, cache_read_tokens: 0, cache_creation_tokens: 0, startTime: r.timestamp, endTime: r.timestamp, cost: 0 });
+    }
+    const s = map.get(r.sessionId);
+    s.models.add(r.model);
+    s.input_tokens += r.input_tokens;
+    s.output_tokens += r.output_tokens;
+    s.cache_read_tokens += r.cache_read_tokens;
+    s.cache_creation_tokens += r.cache_creation_tokens;
+    s.cost += calculateRecordCost(r);
+    if (r.timestamp < s.startTime) s.startTime = r.timestamp;
+    if (r.timestamp > s.endTime) s.endTime = r.timestamp;
+  }
+  return Array.from(map.values()).map(s => ({
+    sessionId: s.sessionId, project: s.project, models: Array.from(s.models),
+    input_tokens: s.input_tokens, output_tokens: s.output_tokens,
+    cache_read_tokens: s.cache_read_tokens, cache_creation_tokens: s.cache_creation_tokens,
+    total_tokens: s.input_tokens + s.output_tokens + s.cache_read_tokens + s.cache_creation_tokens,
+    startTime: s.startTime, endTime: s.endTime,
+    duration_minutes: Math.round((new Date(s.endTime) - new Date(s.startTime)) / 60000),
+    estimated_cost_usd: Math.round(s.cost * 100) / 100,
+  }));
+}
+
+export function aggregateByProject(records) {
+  const map = new Map();
+  for (const r of records) {
+    if (!map.has(r.project)) {
+      map.set(r.project, { name: r.project, projectDirName: r.projectDirName, total_input_tokens: 0, total_output_tokens: 0, total_cache_read: 0, total_cache_creation: 0, sessions: new Set(), cost: 0 });
+    }
+    const p = map.get(r.project);
+    p.total_input_tokens += r.input_tokens;
+    p.total_output_tokens += r.output_tokens;
+    p.total_cache_read += r.cache_read_tokens;
+    p.total_cache_creation += r.cache_creation_tokens;
+    p.sessions.add(r.sessionId);
+    p.cost += calculateRecordCost(r);
+  }
+  return Array.from(map.values()).map(p => {
+    const path = p.projectDirName ? '/' + p.projectDirName.replace(/^-/, '').replace(/-/g, '/') : '';
+    return { name: p.name, path, total_input_tokens: p.total_input_tokens, total_output_tokens: p.total_output_tokens, cache_read_tokens: p.total_cache_read, cache_creation_tokens: p.total_cache_creation, total_tokens: p.total_input_tokens + p.total_output_tokens + p.total_cache_read + p.total_cache_creation, estimated_cost_usd: Math.round(p.cost * 100) / 100, session_count: p.sessions.size };
+  }).sort((a, b) => b.total_tokens - a.total_tokens);
+}
+
+export function aggregateByModel(records) {
+  const map = new Map();
+  for (const r of records) {
+    if (!map.has(r.model)) map.set(r.model, { id: r.model, total_tokens: 0, input_tokens: 0, output_tokens: 0, cache_read_tokens: 0, cache_creation_tokens: 0 });
+    const m = map.get(r.model);
+    m.input_tokens += r.input_tokens;
+    m.output_tokens += r.output_tokens;
+    m.cache_read_tokens += r.cache_read_tokens;
+    m.cache_creation_tokens += r.cache_creation_tokens;
+    m.total_tokens += r.input_tokens + r.output_tokens + r.cache_read_tokens + r.cache_creation_tokens;
+  }
+  return Array.from(map.values()).map(m => {
+    const pricing = getModelPricing(m.id);
+    return { id: m.id, total_tokens: m.total_tokens, input_tokens: m.input_tokens, output_tokens: m.output_tokens, ...(pricing || {}) };
+  }).sort((a, b) => b.total_tokens - a.total_tokens);
+}
+
+export function aggregateCache(records) {
+  let nonCached = 0, cacheRead = 0, cacheCreation = 0;
+  for (const r of records) { nonCached += r.input_tokens; cacheRead += r.cache_read_tokens; cacheCreation += r.cache_creation_tokens; }
+  const allInput = nonCached + cacheRead + cacheCreation;
+  return {
+    cache_read_tokens: cacheRead, cache_creation_tokens: cacheCreation,
+    non_cached_input_tokens: nonCached, total_input_tokens: allInput,
+    cache_read_rate: allInput > 0 ? Math.round((cacheRead / allInput) * 100) / 100 : 0,
+    cache_creation_rate: allInput > 0 ? Math.round((cacheCreation / allInput) * 100) / 100 : 0,
+    no_cache_rate: allInput > 0 ? Math.round((nonCached / allInput) * 100) / 100 : 0,
+  };
+}

package/server/index.js

@@ -1,33 +1,33 @@
-import express from 'express';
-import path from 'path';
-import os from 'os';
-import { createRequire } from 'module';
-import { fileURLToPath } from 'url';
-import { createApiRouter } from './routes/api.js';
-
-const __dirname = path.dirname(fileURLToPath(import.meta.url));
-const require = createRequire(import.meta.url);
-const PORT = process.env.PORT || 3000;
-const LOG_DIR = path.join(os.homedir(), '.claude', 'projects');
-
-// Resolve d3 via Node module resolution so it works when dependencies are hoisted (e.g. npx)
-const d3Dir = path.join(path.dirname(require.resolve('d3')), '..', 'dist');
-
-const app = express();
-app.use('/lib/d3', express.static(d3Dir));
-app.use(express.static(path.join(__dirname, '..', 'public')));
-app.use('/api', createApiRouter(LOG_DIR));
-
-const server = app.listen(PORT, () => {
-  console.log(`Claude Usage Dashboard running at http://localhost:${PORT}`);
-  console.log('Press Ctrl+C to stop.');
-});
-
-process.on('SIGINT', () => {
-  console.log('\nShutting down...');
-  server.close(() => process.exit(0));
-});
-
-process.on('SIGTERM', () => {
-  server.close(() => process.exit(0));
-});
+import express from 'express';
+import path from 'path';
+import os from 'os';
+import { createRequire } from 'module';
+import { fileURLToPath } from 'url';
+import { createApiRouter } from './routes/api.js';
+
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
+const require = createRequire(import.meta.url);
+const PORT = process.env.PORT || 3000;
+const LOG_DIR = path.join(os.homedir(), '.claude', 'projects');
+
+// Resolve d3 via Node module resolution so it works when dependencies are hoisted (e.g. npx)
+const d3Dir = path.join(path.dirname(require.resolve('d3')), '..', 'dist');
+
+const app = express();
+app.use('/lib/d3', express.static(d3Dir));
+app.use(express.static(path.join(__dirname, '..', 'public')));
+app.use('/api', createApiRouter(LOG_DIR));
+
+const server = app.listen(PORT, () => {
+  console.log(`Claude Usage Dashboard running at http://localhost:${PORT}`);
+  console.log('Press Ctrl+C to stop.');
+});
+
+process.on('SIGINT', () => {
+  console.log('\nShutting down...');
+  server.close(() => process.exit(0));
+});
+
+process.on('SIGTERM', () => {
+  server.close(() => process.exit(0));
+});