claude-burn 1.0.0 → 1.0.2

package/package.json

@@ -1,7 +1,10 @@
 {
   "name": "claude-burn",
-  "version": "1.0.0",
+  "version": "1.0.2",
   "description": "Monitor Claude Code token usage, burn rate, and session attribution. Zero dependencies.",
+  "scripts": {
+    "test": "node --test"
+  },
   "bin": {
     "claude-burn": "./bin/claude-burn.js"
   },

package/public/api.js

@@ -0,0 +1,7 @@
+export async function fetchSessions(hours) {
+  const response = await fetch(`/api/sessions?hours=${hours}`);
+  if (!response.ok) {
+    throw new Error(`sessions request failed: ${response.status}`);
+  }
+  return response.json();
+}

package/public/app.js

@@ -0,0 +1,215 @@
+import { fetchSessions } from './api.js';
+import { state } from './state.js';
+import { getFilteredSessions, renderSessions } from './renderSessions.js';
+import { renderDetail, renderEmptyDetail } from './renderDetail.js';
+import { renderShareBar, renderSummary } from './renderSummary.js';
+
+function updateLastUpdate() {
+  document.getElementById('last-update').textContent = new Date().toLocaleTimeString([], {
+    hour: '2-digit',
+    minute: '2-digit',
+    second: '2-digit',
+  });
+}
+
+function updateAutoRefresh() {
+  const hours = parseInt(document.getElementById('hours-select').value, 10);
+  const statusEl = document.getElementById('autorefresh-status');
+
+  if (state.autoRefreshInterval) {
+    clearInterval(state.autoRefreshInterval);
+  }
+
+  if (hours <= 24) {
+    state.autoRefreshInterval = setInterval(fetchData, 5000);
+    statusEl.textContent = '';
+  } else {
+    state.autoRefreshInterval = null;
+    statusEl.textContent = 'auto-refresh off';
+    statusEl.style.color = 'var(--text2)';
+  }
+}
+
+function scrollSelectedCardIntoView() {
+  const card = document.querySelector('.session-card.selected');
+  if (card) {
+    card.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
+  }
+}
+
+function selectSession(id, options = {}) {
+  state.selectedId = id;
+  renderSessions(state);
+  renderDetail(state);
+  if (options.scroll !== false) {
+    scrollSelectedCardIntoView();
+  }
+}
+
+async function copySessionId(titleEl) {
+  const sid = titleEl.dataset.sid;
+  const tooltip = titleEl.querySelector('.sid-tooltip');
+
+  try {
+    await navigator.clipboard.writeText(sid);
+    if (!tooltip) return;
+    const original = tooltip.textContent;
+    tooltip.textContent = 'Copied!';
+    tooltip.style.color = 'var(--accent)';
+    tooltip.classList.add('show');
+    setTimeout(() => {
+      tooltip.textContent = original;
+      tooltip.style.color = '';
+      tooltip.classList.remove('show');
+    }, 1200);
+  } catch {}
+}
+
+async function fetchData() {
+  const hours = document.getElementById('hours-select').value;
+  const btn = document.getElementById('refresh-btn');
+
+  btn.classList.add('loading');
+  try {
+    const data = await fetchSessions(hours);
+    state.sessions = data.sessions;
+
+    renderSummary(data.summary, state.sessions);
+    renderShareBar(state.sessions);
+    renderSessions(state);
+    updateLastUpdate();
+
+    if (state.selectedId) {
+      renderDetail(state);
+    } else {
+      renderEmptyDetail(state);
+    }
+  } catch (error) {
+    console.error('Fetch error:', error);
+  } finally {
+    btn.classList.remove('loading');
+  }
+}
+
+function setupTooltip() {
+  const tooltip = document.getElementById('tooltip');
+
+  document.addEventListener('mouseover', (event) => {
+    const tip = event.target.closest('[data-tip]');
+    if (!tip || !tip.dataset.tip) return;
+
+    tooltip.textContent = tip.dataset.tip;
+    tooltip.style.display = 'block';
+
+    const rect = tip.getBoundingClientRect();
+    let left = rect.left;
+    let top = rect.top - tooltip.offsetHeight - 8;
+
+    if (left + 240 > window.innerWidth) left = window.innerWidth - 250;
+    if (left < 8) left = 8;
+    if (top < 8) top = rect.bottom + 8;
+
+    tooltip.style.left = `${left}px`;
+    tooltip.style.top = `${top}px`;
+  });
+
+  document.addEventListener('mouseout', (event) => {
+    if (event.target.closest('[data-tip]')) {
+      tooltip.style.display = 'none';
+    }
+  });
+}
+
+function setupEventListeners() {
+  document.getElementById('refresh-btn').addEventListener('click', fetchData);
+
+  document.getElementById('hours-select').addEventListener('change', () => {
+    fetchData();
+    updateAutoRefresh();
+  });
+
+  document.getElementById('search-input').addEventListener('input', (event) => {
+    state.searchQuery = event.target.value;
+    renderSessions(state);
+  });
+
+  document.getElementById('sort-select').addEventListener('change', (event) => {
+    state.sortBy = event.target.value;
+    renderSessions(state);
+  });
+
+  document.getElementById('session-cards').addEventListener('click', (event) => {
+    const title = event.target.closest('.session-title');
+    if (title) {
+      event.stopPropagation();
+      copySessionId(title);
+      return;
+    }
+
+    const card = event.target.closest('.session-card[data-session-id]');
+    if (card) {
+      selectSession(card.dataset.sessionId);
+    }
+  });
+
+  document.getElementById('billing-progress').addEventListener('click', (event) => {
+    const fill = event.target.closest('.billing-progress-fill[data-session-id]');
+    if (fill) {
+      selectSession(fill.dataset.sessionId);
+    }
+  });
+
+  document.addEventListener('keydown', (event) => {
+    if (['INPUT', 'SELECT', 'TEXTAREA'].includes(event.target.tagName)) return;
+
+    const filtered = getFilteredSessions(state);
+    if (filtered.length === 0) return;
+
+    if (event.key === 'r' || event.key === 'R') {
+      event.preventDefault();
+      fetchData();
+    }
+
+    if (event.key === 'j' || event.key === 'ArrowDown') {
+      event.preventDefault();
+      const idx = filtered.findIndex((session) => session.id === state.selectedId);
+      const next = idx < filtered.length - 1 ? idx + 1 : 0;
+      selectSession(filtered[next].id);
+    }
+
+    if (event.key === 'k' || event.key === 'ArrowUp') {
+      event.preventDefault();
+      const idx = filtered.findIndex((session) => session.id === state.selectedId);
+      const prev = idx > 0 ? idx - 1 : filtered.length - 1;
+      selectSession(filtered[prev].id);
+    }
+
+    if (event.key === '/') {
+      event.preventDefault();
+      document.getElementById('search-input').focus();
+    }
+
+    if (event.key === 'Escape') {
+      const input = document.getElementById('search-input');
+      if (document.activeElement === input) {
+        state.searchQuery = '';
+        input.value = '';
+        input.blur();
+        renderSessions(state);
+      }
+    }
+
+    const timeMap = { 1: '1', 2: '6', 3: '12', 4: '24', 5: '72', 6: '168', 7: '720' };
+    if (timeMap[event.key]) {
+      document.getElementById('hours-select').value = timeMap[event.key];
+      fetchData();
+      updateAutoRefresh();
+    }
+  });
+}
+
+setupTooltip();
+setupEventListeners();
+renderEmptyDetail(state);
+fetchData();
+updateAutoRefresh();

package/public/format.js

@@ -0,0 +1,46 @@
+export function fmt(value) {
+  if (value >= 1_000_000_000) return `${(value / 1_000_000_000).toFixed(1)}B`;
+  if (value >= 1_000_000) return `${(value / 1_000_000).toFixed(1)}M`;
+  if (value >= 1_000) return `${(value / 1_000).toFixed(1)}K`;
+  return value.toString();
+}
+
+export function fmtDuration(sec) {
+  if (sec < 60) return `${sec}s`;
+  if (sec < 3600) return `${Math.floor(sec / 60)}m`;
+  const hours = Math.floor(sec / 3600);
+  const minutes = Math.floor((sec % 3600) / 60);
+  return `${hours}h ${minutes}m`;
+}
+
+export function fmtTime(ts) {
+  if (!ts) return '--';
+  try {
+    const date = new Date(ts);
+    const now = new Date();
+    const isToday = date.toDateString() === now.toDateString();
+    const time = date.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
+    return isToday ? time : `${date.toLocaleDateString([], { month: 'short', day: 'numeric' })} ${time}`;
+  } catch {
+    return '--';
+  }
+}
+
+export function fmtAgo(ts) {
+  if (!ts) return '';
+  try {
+    const sec = (Date.now() - new Date(ts).getTime()) / 1000;
+    if (sec < 60) return 'just now';
+    if (sec < 3600) return `${Math.floor(sec / 60)}m ago`;
+    if (sec < 86400) return `${Math.floor(sec / 3600)}h ago`;
+    return `${Math.floor(sec / 86400)}d ago`;
+  } catch {
+    return '';
+  }
+}
+
+export function esc(str) {
+  const div = document.createElement('div');
+  div.textContent = str;
+  return div.innerHTML;
+}