claude-usage-dashboard 1.3.4 → 1.3.6

package/public/js/charts/cost-comparison.js

@@ -1,39 +1,39 @@
-export function renderCostComparison(container, data) {
-  const el = d3.select(container);
-  el.selectAll('*').remove();
-
-  const margin = { top: 10, right: 20, bottom: 40, left: 50 };
-  const width = container.clientWidth - margin.left - margin.right;
-  const height = 180 - 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 bars = [
-    { label: 'Subscription', value: data.subscription_cost_usd, color: '#3b82f6' },
-    { label: 'API Cost', value: data.api_equivalent_cost_usd, color: '#f59e0b' },
-  ];
-
-  const x = d3.scaleBand().domain(bars.map(d => d.label)).range([0, width]).padding(0.4);
-  const y = d3.scaleLinear().domain([0, d3.max(bars, d => d.value) * 1.2]).range([height, 0]);
-
-  svg.append('g').attr('transform', `translate(0,${height})`)
-    .call(d3.axisBottom(x))
-    .selectAll('text').style('fill', '#94a3b8').style('font-size', '11px');
-  svg.append('g').call(d3.axisLeft(y).ticks(4).tickFormat(d => `$${d}`))
-    .selectAll('text').style('fill', '#64748b').style('font-size', '10px');
-
-  svg.selectAll('.bar').data(bars).enter().append('rect')
-    .attr('x', d => x(d.label)).attr('y', d => y(d.value))
-    .attr('width', x.bandwidth()).attr('height', d => height - y(d.value))
-    .attr('fill', d => d.color).attr('rx', 4);
-
-  svg.selectAll('.label').data(bars).enter().append('text')
-    .attr('x', d => x(d.label) + x.bandwidth() / 2).attr('y', d => y(d.value) - 5)
-    .attr('text-anchor', 'middle')
-    .style('fill', '#f8fafc').style('font-size', '12px').style('font-weight', '600')
-    .text(d => `$${d.value.toFixed(2)}`);
-}
+export function renderCostComparison(container, data) {
+  const el = d3.select(container);
+  el.selectAll('*').remove();
+
+  const margin = { top: 10, right: 20, bottom: 40, left: 50 };
+  const width = container.clientWidth - margin.left - margin.right;
+  const height = 180 - 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 bars = [
+    { label: 'Subscription', value: data.subscription_cost_usd, color: '#3b82f6' },
+    { label: 'API Cost', value: data.api_equivalent_cost_usd, color: '#f59e0b' },
+  ];
+
+  const x = d3.scaleBand().domain(bars.map(d => d.label)).range([0, width]).padding(0.4);
+  const y = d3.scaleLinear().domain([0, d3.max(bars, d => d.value) * 1.2]).range([height, 0]);
+
+  svg.append('g').attr('transform', `translate(0,${height})`)
+    .call(d3.axisBottom(x))
+    .selectAll('text').style('fill', '#94a3b8').style('font-size', '11px');
+  svg.append('g').call(d3.axisLeft(y).ticks(4).tickFormat(d => `$${d}`))
+    .selectAll('text').style('fill', '#64748b').style('font-size', '10px');
+
+  svg.selectAll('.bar').data(bars).enter().append('rect')
+    .attr('x', d => x(d.label)).attr('y', d => y(d.value))
+    .attr('width', x.bandwidth()).attr('height', d => height - y(d.value))
+    .attr('fill', d => d.color).attr('rx', 4);
+
+  svg.selectAll('.label').data(bars).enter().append('text')
+    .attr('x', d => x(d.label) + x.bandwidth() / 2).attr('y', d => y(d.value) - 5)
+    .attr('text-anchor', 'middle')
+    .style('fill', '#f8fafc').style('font-size', '12px').style('font-weight', '600')
+    .text(d => `$${d.value.toFixed(2)}`);
+}

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

@@ -1,56 +1,56 @@
-const MODEL_COLORS = {
-  'claude-sonnet-4-6': '#3b82f6',
-  'claude-opus-4-6': '#8b5cf6',
-  'claude-haiku-4-5': '#f59e0b',
-};
-
-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',
-};
-
-export function renderModelDistribution(container, data) {
-  const el = d3.select(container);
-  el.selectAll('*').remove();
-
-  if (!data.models || data.models.length === 0) {
-    el.append('p').style('color', '#64748b').text('No data');
-    return;
-  }
-
-  const containerWidth = container.clientWidth;
-  const size = Math.min(containerWidth * 0.45, 200);
-  const radius = size / 2;
-  const innerRadius = radius * 0.55;
-
-  const isNarrow = containerWidth < 280;
-  const wrapper = el.append('div')
-    .style('display', 'flex')
-    .style('flex-direction', isNarrow ? 'column' : 'row')
-    .style('align-items', 'center')
-    .style('gap', isNarrow ? '8px' : '20px');
-
-  const svg = wrapper.append('svg')
-    .attr('width', size).attr('height', size)
-    .style('flex-shrink', '0')
-    .append('g').attr('transform', `translate(${size / 2},${size / 2})`);
-
-  const total = d3.sum(data.models, d => d.total_tokens);
-  const pie = d3.pie().value(d => d.total_tokens).sort(null);
-  const arc = d3.arc().innerRadius(innerRadius).outerRadius(radius);
-
-  svg.selectAll('path').data(pie(data.models)).enter().append('path')
-    .attr('d', arc).attr('fill', d => MODEL_COLORS[d.data.id] || '#64748b')
-    .attr('stroke', '#1e293b').attr('stroke-width', 2);
-
-  const legend = wrapper.append('div');
-  data.models.forEach(m => {
-    const pct = ((m.total_tokens / total) * 100).toFixed(1);
-    const color = MODEL_COLORS[m.id] || '#64748b';
-    const shortName = MODEL_DISPLAY[m.id] || m.id.replace('claude-', '').replace(/-(\d+)-(\d+)/, ' $1.$2');
-    legend.append('div').style('font-size', '11px').style('color', '#94a3b8').style('margin-bottom', '4px')
-      .html(`<span style="color:${color}">●</span> ${shortName} — ${pct}%`);
-  });
-}
+const MODEL_COLORS = {
+  'claude-sonnet-4-6': '#3b82f6',
+  'claude-opus-4-6': '#8b5cf6',
+  'claude-haiku-4-5': '#f59e0b',
+};
+
+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',
+};
+
+export function renderModelDistribution(container, data) {
+  const el = d3.select(container);
+  el.selectAll('*').remove();
+
+  if (!data.models || data.models.length === 0) {
+    el.append('p').style('color', '#64748b').text('No data');
+    return;
+  }
+
+  const containerWidth = container.clientWidth;
+  const size = Math.min(containerWidth * 0.45, 200);
+  const radius = size / 2;
+  const innerRadius = radius * 0.55;
+
+  const isNarrow = containerWidth < 280;
+  const wrapper = el.append('div')
+    .style('display', 'flex')
+    .style('flex-direction', isNarrow ? 'column' : 'row')
+    .style('align-items', 'center')
+    .style('gap', isNarrow ? '8px' : '20px');
+
+  const svg = wrapper.append('svg')
+    .attr('width', size).attr('height', size)
+    .style('flex-shrink', '0')
+    .append('g').attr('transform', `translate(${size / 2},${size / 2})`);
+
+  const total = d3.sum(data.models, d => d.total_tokens);
+  const pie = d3.pie().value(d => d.total_tokens).sort(null);
+  const arc = d3.arc().innerRadius(innerRadius).outerRadius(radius);
+
+  svg.selectAll('path').data(pie(data.models)).enter().append('path')
+    .attr('d', arc).attr('fill', d => MODEL_COLORS[d.data.id] || '#64748b')
+    .attr('stroke', '#1e293b').attr('stroke-width', 2);
+
+  const legend = wrapper.append('div');
+  data.models.forEach(m => {
+    const pct = ((m.total_tokens / total) * 100).toFixed(1);
+    const color = MODEL_COLORS[m.id] || '#64748b';
+    const shortName = MODEL_DISPLAY[m.id] || m.id.replace('claude-', '').replace(/-(\d+)-(\d+)/, ' $1.$2');
+    legend.append('div').style('font-size', '11px').style('color', '#94a3b8').style('margin-bottom', '4px')
+      .html(`<span style="color:${color}">●</span> ${shortName} — ${pct}%`);
+  });
+}

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

@@ -1,103 +1,103 @@
-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;
-  }
-
-  // Measure longest project name to set left margin dynamically
-  const tempSvg = el.append('svg').style('position', 'absolute').style('visibility', 'hidden');
-  const tempText = tempSvg.append('text').style('font-size', '12px');
-  let maxLabelWidth = 120;
-  for (const p of data.projects) {
-    tempText.text(p.name);
-    maxLabelWidth = Math.max(maxLabelWidth, tempText.node().getComputedTextLength());
-  }
-  tempSvg.remove();
-  const leftMargin = Math.ceil(maxLabelWidth) + 16;
-
-  const margin = { top: 10, right: 360, bottom: 10, left: leftMargin };
-  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');
-}
+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;
+  }
+
+  // Measure longest project name to set left margin dynamically
+  const tempSvg = el.append('svg').style('position', 'absolute').style('visibility', 'hidden');
+  const tempText = tempSvg.append('text').style('font-size', '12px');
+  let maxLabelWidth = 120;
+  for (const p of data.projects) {
+    tempText.text(p.name);
+    maxLabelWidth = Math.max(maxLabelWidth, tempText.node().getComputedTextLength());
+  }
+  tempSvg.remove();
+  const leftMargin = Math.ceil(maxLabelWidth) + 16;
+
+  const margin = { top: 10, right: 360, bottom: 10, left: leftMargin };
+  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

@@ -1,117 +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);
-    }
-  }
-}
+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);
+    }
+  }
+}