claude-usage-dashboard 1.0.0

package/public/js/charts/project-distribution.js

@@ -0,0 +1,92 @@
+const COLORS = ['#3b82f6', '#8b5cf6', '#f59e0b', '#4ade80', '#ef4444', '#ec4899', '#06b6d4'];
+
+function fmt(n) {
+  if (n >= 1_000_000) return (n / 1_000_000).toFixed(1) + 'M';
+  if (n >= 1_000) return (n / 1_000).toFixed(0) + 'K';
+  return n.toString();
+}
+
+export function renderProjectDistribution(container, data) {
+  const el = d3.select(container);
+  el.selectAll('*').remove();
+
+  if (!data.projects || data.projects.length === 0) {
+    el.append('p').style('color', '#64748b').text('No data');
+    return;
+  }
+
+  const margin = { top: 10, right: 360, bottom: 10, left: 120 };
+  const barHeight = 24;
+  const gap = 8;
+  const height = data.projects.length * (barHeight + gap) + margin.top + margin.bottom;
+  const width = container.clientWidth - margin.left - margin.right;
+
+  const svg = el.append('svg')
+    .attr('width', width + margin.left + margin.right)
+    .attr('height', height)
+    .append('g').attr('transform', `translate(${margin.left},${margin.top})`);
+
+  const x = d3.scaleLinear().domain([0, d3.max(data.projects, d => d.total_tokens)]).range([0, width]);
+  const y = d3.scaleBand().domain(data.projects.map(d => d.name)).range([0, height - margin.top - margin.bottom]).padding(0.25);
+
+  // Project name labels
+  svg.selectAll('.project-label').data(data.projects).enter().append('text')
+    .attr('x', -8).attr('y', d => y(d.name) + y.bandwidth() / 2)
+    .attr('text-anchor', 'end').attr('dominant-baseline', 'middle')
+    .style('fill', '#e2e8f0').style('font-size', '12px').text(d => d.name);
+
+  // Stacked bars: cache_read + cache_creation + input + output
+  const cr = d => d.cache_read_tokens || 0;
+  const cc = d => d.cache_creation_tokens || 0;
+
+  svg.selectAll('.bar-cache-read').data(data.projects).enter().append('rect')
+    .attr('x', 0).attr('y', d => y(d.name))
+    .attr('width', d => x(cr(d))).attr('height', y.bandwidth())
+    .attr('fill', '#4ade80').attr('opacity', 0.6).attr('rx', 3);
+
+  svg.selectAll('.bar-cache-creation').data(data.projects).enter().append('rect')
+    .attr('x', d => x(cr(d))).attr('y', d => y(d.name))
+    .attr('width', d => x(cr(d) + cc(d)) - x(cr(d))).attr('height', y.bandwidth())
+    .attr('fill', '#f59e0b').attr('opacity', 0.6);
+
+  svg.selectAll('.bar-input').data(data.projects).enter().append('rect')
+    .attr('x', d => x(cr(d) + cc(d))).attr('y', d => y(d.name))
+    .attr('width', d => x(cr(d) + cc(d) + d.total_input_tokens) - x(cr(d) + cc(d))).attr('height', y.bandwidth())
+    .attr('fill', '#3b82f6').attr('opacity', 0.7);
+
+  svg.selectAll('.bar-output').data(data.projects).enter().append('rect')
+    .attr('x', d => x(cr(d) + cc(d) + d.total_input_tokens)).attr('y', d => y(d.name))
+    .attr('width', d => x(d.total_tokens) - x(cr(d) + cc(d) + d.total_input_tokens)).attr('height', y.bandwidth())
+    .attr('fill', '#f97316').attr('opacity', 0.7);
+
+  // Right-side label: tokens + cost
+  svg.selectAll('.detail-label').data(data.projects).enter().append('text')
+    .attr('x', d => x(d.total_tokens) + 8).attr('y', d => y(d.name) + y.bandwidth() / 2)
+    .attr('dominant-baseline', 'middle')
+    .style('font-size', '11px')
+    .html(d => {
+      // Use tspans for colored segments
+      return '';
+    })
+    .each(function(d) {
+      const text = d3.select(this);
+      text.append('tspan').style('fill', '#f8fafc').style('font-weight', '600').text(fmt(d.total_tokens));
+      text.append('tspan').style('fill', '#64748b').text(' (');
+      text.append('tspan').style('fill', '#4ade80').text(`cr:${fmt(d.cache_read_tokens || 0)}`);
+      text.append('tspan').style('fill', '#64748b').text('/');
+      text.append('tspan').style('fill', '#f59e0b').text(`cw:${fmt(d.cache_creation_tokens || 0)}`);
+      text.append('tspan').style('fill', '#64748b').text('/');
+      text.append('tspan').style('fill', '#60a5fa').text(`in:${fmt(d.total_input_tokens)}`);
+      text.append('tspan').style('fill', '#64748b').text('/');
+      text.append('tspan').style('fill', '#f97316').text(`out:${fmt(d.total_output_tokens)}`);
+      text.append('tspan').style('fill', '#64748b').text(')  ');
+      text.append('tspan').style('fill', '#f59e0b').style('font-weight', '600').text(`$${d.estimated_cost_usd.toFixed(2)}`);
+    });
+
+  // Legend
+  const legend = el.append('div').style('display', 'flex').style('gap', '16px').style('margin-top', '8px');
+  legend.append('span').style('font-size', '11px').style('color', '#4ade80').html('● Cache Read');
+  legend.append('span').style('font-size', '11px').style('color', '#f59e0b').html('● Cache Write');
+  legend.append('span').style('font-size', '11px').style('color', '#60a5fa').html('● Input');
+  legend.append('span').style('font-size', '11px').style('color', '#f97316').html('● Output');
+}

package/public/js/charts/session-stats.js

@@ -0,0 +1,117 @@
+function formatTokens(n) {
+  if (n >= 1_000_000) return (n / 1_000_000).toFixed(1) + 'M';
+  if (n >= 1_000) return (n / 1_000).toFixed(0) + 'K';
+  return n.toString();
+}
+
+const MODEL_DISPLAY = {
+  'claude-opus-4-6': 'opus 4.6',
+  'claude-sonnet-4-6': 'sonnet 4.6',
+  'claude-haiku-4-5': 'haiku 4.5',
+  'claude-haiku-4-5-20251001': 'haiku 4.5',
+};
+
+function modelTag(model) {
+  const shortName = MODEL_DISPLAY[model] || model.replace('claude-', '').replace(/-(\d+)-(\d+)/, ' $1.$2');
+  let cls = 'tag-model-sonnet';
+  if (model.includes('opus')) cls = 'tag-model-opus';
+  else if (model.includes('haiku')) cls = 'tag-model-haiku';
+  return `<span class="tag ${cls}">${shortName}</span>`;
+}
+
+function formatDate(iso) {
+  const d = new Date(iso);
+  return d.toLocaleDateString('en-US', { month: 'short', day: 'numeric' }) +
+    ', ' + d.toLocaleTimeString('en-US', { hour: '2-digit', minute: '2-digit', hour12: false });
+}
+
+function formatDuration(minutes) {
+  if (minutes < 60) return `${minutes}m`;
+  const h = Math.floor(minutes / 60);
+  const m = minutes % 60;
+  return `${h}h ${m}m`;
+}
+
+export function renderSessionTable(container, data, { onSort, onPageChange }) {
+  container.innerHTML = '';
+
+  const table = document.createElement('table');
+  const thead = document.createElement('thead');
+  const headerRow = document.createElement('tr');
+
+  const columns = [
+    { key: 'date', label: 'Date & Time' },
+    { key: 'project', label: 'Project' },
+    { key: 'models', label: 'Model(s)' },
+    { key: 'input', label: 'Input', align: 'right' },
+    { key: 'output', label: 'Output', align: 'right' },
+    { key: 'cache_read', label: 'Cache Read', align: 'right' },
+    { key: 'cache_creation', label: 'Cache Write', align: 'right' },
+    { key: 'total', label: 'Total', align: 'right' },
+    { key: 'cost', label: 'API Cost', align: 'right' },
+    { key: 'duration', label: 'Duration', align: 'right' },
+  ];
+
+  for (const col of columns) {
+    const th = document.createElement('th');
+    th.textContent = col.label;
+    if (col.align) th.className = 'align-right';
+    if (['date', 'cost', 'total'].includes(col.key)) {
+      th.style.cursor = 'pointer';
+      th.addEventListener('click', () => {
+        const sortKey = col.key === 'total' ? 'tokens' : col.key;
+        onSort(sortKey);
+      });
+    }
+    headerRow.appendChild(th);
+  }
+  thead.appendChild(headerRow);
+  table.appendChild(thead);
+
+  const tbody = document.createElement('tbody');
+  for (const s of data.sessions) {
+    const tr = document.createElement('tr');
+    tr.innerHTML = `
+      <td>${formatDate(s.startTime)}</td>
+      <td><span class="tag tag-project">${s.project}</span></td>
+      <td>${s.models.map(modelTag).join(' ')}</td>
+      <td class="align-right" style="color:#60a5fa">${formatTokens(s.input_tokens)}</td>
+      <td class="align-right" style="color:#f97316">${formatTokens(s.output_tokens)}</td>
+      <td class="align-right" style="color:#4ade80">${formatTokens(s.cache_read_tokens)}</td>
+      <td class="align-right" style="color:#f59e0b">${formatTokens(s.cache_creation_tokens)}</td>
+      <td class="align-right" style="font-weight:600">${formatTokens(s.total_tokens)}</td>
+      <td class="align-right" style="color:#f59e0b;font-weight:600">$${s.estimated_cost_usd.toFixed(2)}</td>
+      <td class="align-right">${formatDuration(s.duration_minutes)}</td>
+    `;
+    tbody.appendChild(tr);
+  }
+  table.appendChild(tbody);
+
+  if (data.totals) {
+    const tfoot = document.createElement('tfoot');
+    const tr = document.createElement('tr');
+    tr.innerHTML = `
+      <td colspan="3">Showing ${data.sessions.length} of ${data.pagination.total_sessions} sessions</td>
+      <td class="align-right" colspan="4"></td>
+      <td class="align-right">${formatTokens(data.totals.total_tokens)}</td>
+      <td class="align-right" style="color:#f59e0b">$${data.totals.estimated_cost_usd.toFixed(2)}</td>
+      <td></td>
+    `;
+    tfoot.appendChild(tr);
+    table.appendChild(tfoot);
+  }
+
+  container.appendChild(table);
+
+  const pagEl = document.getElementById('session-pagination');
+  if (pagEl && data.pagination && data.pagination.total_pages > 1) {
+    pagEl.innerHTML = '';
+    for (let i = 1; i <= data.pagination.total_pages; i++) {
+      const btn = document.createElement('button');
+      btn.textContent = i;
+      if (i === data.pagination.page) btn.className = 'active';
+      btn.addEventListener('click', () => onPageChange(i));
+      pagEl.appendChild(btn);
+    }
+  }
+}

package/public/js/charts/token-trend.js

@@ -0,0 +1,113 @@
+// d3 is loaded as a global via <script> tag in index.html
+
+export function renderTokenTrend(container, data) {
+  const el = d3.select(container);
+  el.selectAll('*').remove();
+
+  if (!data.buckets || data.buckets.length === 0) {
+    el.append('p').style('color', '#64748b').text('No data for selected range');
+    return;
+  }
+
+  const margin = { top: 20, right: 30, bottom: 40, left: 60 };
+  const width = container.clientWidth - margin.left - margin.right;
+  const height = 250 - margin.top - margin.bottom;
+
+  const svg = el.append('svg')
+    .attr('width', width + margin.left + margin.right)
+    .attr('height', height + margin.top + margin.bottom)
+    .append('g')
+    .attr('transform', `translate(${margin.left},${margin.top})`);
+
+  const buckets = data.buckets;
+  const x = d3.scaleBand()
+    .domain(buckets.map(d => d.time))
+    .range([0, width])
+    .padding(0.1);
+
+  // Helper to get total height for each bucket
+  const totalOf = d => d.input_tokens + d.output_tokens + (d.cache_read_tokens || 0) + (d.cache_creation_tokens || 0);
+
+  const maxVal = d3.max(buckets, totalOf);
+  const y = d3.scaleLinear().domain([0, maxVal * 1.1]).range([height, 0]);
+
+  const xAxis = svg.append('g')
+    .attr('transform', `translate(0,${height})`)
+    .call(d3.axisBottom(x).tickValues(x.domain().filter((_, i) => i % Math.ceil(buckets.length / 10) === 0)));
+  xAxis.selectAll('text').style('fill', '#64748b').style('font-size', '10px')
+    .attr('transform', 'rotate(-45)').attr('text-anchor', 'end');
+  xAxis.selectAll('line, path').style('stroke', '#334155');
+
+  const yAxis = svg.append('g').call(d3.axisLeft(y).ticks(5).tickFormat(d3.format('.2s')));
+  yAxis.selectAll('text').style('fill', '#64748b').style('font-size', '10px');
+  yAxis.selectAll('line, path').style('stroke', '#334155');
+
+  // Stack order (bottom to top): cache_read, cache_creation, input, output
+  // Cache read (bottom)
+  svg.selectAll('.bar-cache-read')
+    .data(buckets)
+    .enter().append('rect')
+    .attr('x', d => x(d.time))
+    .attr('y', d => y(d.cache_read_tokens || 0))
+    .attr('width', x.bandwidth())
+    .attr('height', d => height - y(d.cache_read_tokens || 0))
+    .attr('fill', '#4ade80')
+    .attr('opacity', 0.6);
+
+  // Cache creation (on top of cache read)
+  const cacheBase = d => (d.cache_read_tokens || 0);
+  svg.selectAll('.bar-cache-creation')
+    .data(buckets)
+    .enter().append('rect')
+    .attr('x', d => x(d.time))
+    .attr('y', d => y(cacheBase(d) + (d.cache_creation_tokens || 0)))
+    .attr('width', x.bandwidth())
+    .attr('height', d => y(cacheBase(d)) - y(cacheBase(d) + (d.cache_creation_tokens || 0)))
+    .attr('fill', '#f59e0b')
+    .attr('opacity', 0.6);
+
+  // Input (on top of cache)
+  const inputBase = d => cacheBase(d) + (d.cache_creation_tokens || 0);
+  svg.selectAll('.bar-input')
+    .data(buckets)
+    .enter().append('rect')
+    .attr('x', d => x(d.time))
+    .attr('y', d => y(inputBase(d) + d.input_tokens))
+    .attr('width', x.bandwidth())
+    .attr('height', d => y(inputBase(d)) - y(inputBase(d) + d.input_tokens))
+    .attr('fill', '#3b82f6')
+    .attr('opacity', 0.7);
+
+  // Output (top)
+  const outputBase = d => inputBase(d) + d.input_tokens;
+  svg.selectAll('.bar-output')
+    .data(buckets)
+    .enter().append('rect')
+    .attr('x', d => x(d.time))
+    .attr('y', d => y(outputBase(d) + d.output_tokens))
+    .attr('width', x.bandwidth())
+    .attr('height', d => y(outputBase(d)) - y(outputBase(d) + d.output_tokens))
+    .attr('fill', '#f97316')
+    .attr('opacity', 0.7);
+
+  // Tooltip
+  const tooltip = d3.select('body').append('div').attr('class', 'd3-tooltip').style('display', 'none');
+
+  svg.selectAll('rect')
+    .on('mouseover', (event, d) => {
+      const total = d.input_tokens + d.output_tokens + (d.cache_read_tokens || 0) + (d.cache_creation_tokens || 0);
+      const cost = d.estimated_cost_usd || 0;
+      tooltip.style('display', 'block')
+        .html(`<strong>${d.time}</strong><br>Total: ${d3.format(',')(total)} tokens &nbsp;<span style="color:#f59e0b;font-weight:600">$${cost.toFixed(2)}</span><br><span style="color:#4ade80">Cache Read: ${d3.format(',')(d.cache_read_tokens || 0)}</span><br><span style="color:#f59e0b">Cache Write: ${d3.format(',')(d.cache_creation_tokens || 0)}</span><br><span style="color:#60a5fa">Input: ${d3.format(',')(d.input_tokens)}</span><br><span style="color:#f97316">Output: ${d3.format(',')(d.output_tokens)}</span>`);
+    })
+    .on('mousemove', (event) => {
+      tooltip.style('left', (event.pageX + 10) + 'px').style('top', (event.pageY - 10) + 'px');
+    })
+    .on('mouseout', () => tooltip.style('display', 'none'));
+
+  const legend = el.append('div').style('display', 'flex').style('gap', '16px').style('margin-top', '8px');
+  legend.append('span').style('font-size', '11px').style('color', '#4ade80').html('● Cache Read');
+  legend.append('span').style('font-size', '11px').style('color', '#f59e0b').html('● Cache Write');
+  legend.append('span').style('font-size', '11px').style('color', '#60a5fa').html('● Input');
+  legend.append('span').style('font-size', '11px').style('color', '#f97316').html('● Output');
+}

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

@@ -0,0 +1,21 @@
+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);
+
+  container.innerHTML = `
+    <span>📅</span>
+    <input type="date" id="date-from" value="${fmt(thirtyDaysAgo)}">
+    <span>–</span>
+    <input type="date" id="date-to" value="${fmt(today)}">
+  `;
+
+  const fromInput = container.querySelector('#date-from');
+  const toInput = container.querySelector('#date-to');
+  const emitChange = () => onChange({ from: fromInput.value, to: toInput.value });
+  fromInput.addEventListener('change', emitChange);
+  toInput.addEventListener('change', emitChange);
+
+  return { getRange: () => ({ from: fromInput.value, to: toInput.value }) };
+}

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

@@ -0,0 +1,37 @@
+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') || '';
+
+  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';
+  });
+
+  return { getPlan: () => ({ plan: select.value, customPrice: customInput.value ? parseFloat(customInput.value) : null }) };
+}

package/server/aggregator.js

@@ -0,0 +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,
+  };
+}

package/server/index.js

@@ -0,0 +1,18 @@
+import express from 'express';
+import path from 'path';
+import os from 'os';
+import { fileURLToPath } from 'url';
+import { createApiRouter } from './routes/api.js';
+
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
+const PORT = process.env.PORT || 3000;
+const LOG_DIR = path.join(os.homedir(), '.claude', 'projects');
+
+const app = express();
+app.use('/lib/d3', express.static(path.join(__dirname, '..', 'node_modules', 'd3', 'dist')));
+app.use(express.static(path.join(__dirname, '..', 'public')));
+app.use('/api', createApiRouter(LOG_DIR));
+
+app.listen(PORT, () => {
+  console.log(`Claude Usage Dashboard running at http://localhost:${PORT}`);
+});

package/server/parser.js

@@ -0,0 +1,92 @@
+import fs from 'fs';
+import path from 'path';
+
+export function deriveProjectName(dirName) {
+  const clean = dirName.startsWith('-') ? dirName.slice(1) : dirName;
+
+  const workspaceIdx = clean.indexOf('-Workspace-');
+  if (workspaceIdx !== -1) {
+    return clean.slice(workspaceIdx + '-Workspace-'.length);
+  }
+
+  const homeIdx = clean.indexOf('-Home-');
+  if (homeIdx !== -1) {
+    const rest = clean.slice(homeIdx + '-Home-'.length);
+    return rest;
+  }
+
+  const parts = clean.split('-');
+  return parts[parts.length - 1];
+}
+
+export function parseLogFile(filePath) {
+  const content = fs.readFileSync(filePath, 'utf-8');
+  const lines = content.split('\n').filter(line => line.trim());
+  const records = [];
+
+  for (const line of lines) {
+    let entry;
+    try {
+      entry = JSON.parse(line);
+    } catch {
+      continue;
+    }
+
+    if (entry.type !== 'assistant') continue;
+
+    const model = entry.message?.model;
+    if (!model || model === '<synthetic>') continue;
+
+    const usage = entry.message?.usage;
+    if (!usage) continue;
+
+    records.push({
+      sessionId: entry.sessionId,
+      timestamp: entry.timestamp,
+      model,
+      input_tokens: usage.input_tokens || 0,
+      output_tokens: usage.output_tokens || 0,
+      cache_creation_tokens: usage.cache_creation_input_tokens || 0,
+      cache_read_tokens: usage.cache_read_input_tokens || 0,
+    });
+  }
+
+  return records;
+}
+
+export function parseLogDirectory(baseDir) {
+  const allRecords = [];
+
+  let projectDirs;
+  try {
+    projectDirs = fs.readdirSync(baseDir, { withFileTypes: true })
+      .filter(d => d.isDirectory());
+  } catch {
+    return allRecords;
+  }
+
+  for (const dir of projectDirs) {
+    const projectName = deriveProjectName(dir.name);
+    const projectPath = path.join(baseDir, dir.name);
+
+    let files;
+    try {
+      files = fs.readdirSync(projectPath)
+        .filter(f => f.endsWith('.jsonl'));
+    } catch {
+      continue;
+    }
+
+    for (const file of files) {
+      const filePath = path.join(projectPath, file);
+      const records = parseLogFile(filePath);
+      for (const record of records) {
+        record.project = projectName;
+        record.projectDirName = dir.name;
+      }
+      allRecords.push(...records);
+    }
+  }
+
+  return allRecords;
+}