@jeet427/claude-sessions-dashboard 1.0.2

package/public/js/app.js

@@ -0,0 +1,395 @@
+// Claude Sessions Dashboard — app
+
+// ─── Tab Switching ────────────────────────────────────
+function switchTab(tabName) {
+  document.querySelectorAll('.tab-content').forEach(el => el.classList.add('hidden'));
+  document.querySelectorAll('[data-tab]').forEach(el => {
+    el.className = el.dataset.tab === tabName
+      ? 'tab-active py-2 text-sm font-medium transition-colors'
+      : 'tab-inactive py-2 text-sm font-medium transition-colors';
+  });
+  const target = document.getElementById('tab-' + tabName);
+  target.classList.remove('hidden');
+  target.classList.add('fade-in');
+}
+
+// ─── Time Range Filter ────────────────────────────────
+function getCutoffDate(range) {
+  const now = new Date();
+  if (range === 'today') {
+    const d = new Date(now); d.setHours(0, 0, 0, 0); return d;
+  }
+  if (range === '7d') { const d = new Date(now); d.setDate(d.getDate() - 7); return d; }
+  if (range === '30d') { const d = new Date(now); d.setDate(d.getDate() - 30); return d; }
+  if (range === '90d') { const d = new Date(now); d.setDate(d.getDate() - 90); return d; }
+  return null; // 'all'
+}
+
+function filterAndAggregate(data, cutoffDate) {
+  if (!cutoffDate) return data;
+
+  const cutoff = cutoffDate.toISOString();
+  const sessions = (data.sessionDetails || []).filter(s => s.startTime && s.startTime >= cutoff);
+
+  // Re-derive overview
+  const overview = {
+    totalSessions: sessions.length,
+    totalProjects: new Set(sessions.map(s => s.projectName)).size,
+    totalCost: 0,
+    totalInputTokens: 0,
+    totalOutputTokens: 0,
+    totalCacheWriteTokens: 0,
+    totalCacheReadTokens: 0,
+    totalMessages: 0,
+    totalHumanMessages: 0,
+    totalAssistantMessages: 0,
+    totalToolCalls: 0,
+    firstSessionDate: null,
+    lastSessionDate: null,
+  };
+
+  const perProjectMap = {};
+  const perModelMap = {};
+  const toolUsageMap = {};
+  const toolTokenMap = {};
+  const hourly = new Array(24).fill(0);
+  const weekday = new Array(7).fill(0);
+
+  for (const s of sessions) {
+    overview.totalCost += s.cost || 0;
+    overview.totalInputTokens += s.inputTokens || 0;
+    overview.totalOutputTokens += s.outputTokens || 0;
+    overview.totalCacheWriteTokens += s.cacheWriteTokens || 0;
+    overview.totalCacheReadTokens += s.cacheReadTokens || 0;
+    overview.totalHumanMessages += s.humanMessages || 0;
+    overview.totalAssistantMessages += s.assistantMessages || 0;
+    overview.totalMessages += (s.humanMessages || 0) + (s.assistantMessages || 0);
+    overview.totalToolCalls += s.toolCalls || 0;
+
+    if (s.startTime) {
+      if (!overview.firstSessionDate || s.startTime < overview.firstSessionDate) overview.firstSessionDate = s.startTime;
+      if (!overview.lastSessionDate || s.startTime > overview.lastSessionDate) overview.lastSessionDate = s.startTime;
+      const d = new Date(s.startTime);
+      hourly[d.getHours()]++;
+      weekday[d.getDay()]++;
+    }
+
+    // Per-project
+    const pn = s.projectName;
+    if (!perProjectMap[pn]) perProjectMap[pn] = { sessions: 0, cost: 0, messages: 0, toolCalls: 0, inputTokens: 0, outputTokens: 0 };
+    perProjectMap[pn].sessions++;
+    perProjectMap[pn].cost += s.cost || 0;
+    perProjectMap[pn].messages += (s.humanMessages || 0) + (s.assistantMessages || 0);
+    perProjectMap[pn].toolCalls += s.toolCalls || 0;
+    perProjectMap[pn].inputTokens += s.inputTokens || 0;
+    perProjectMap[pn].outputTokens += s.outputTokens || 0;
+
+    // Per-model
+    for (const [model, count] of Object.entries(s.models || {})) {
+      if (!perModelMap[model]) perModelMap[model] = { messages: 0, inputTokens: 0, outputTokens: 0, cost: 0 };
+      perModelMap[model].messages += count;
+    }
+
+    // Tool usage
+    for (const [tool, count] of Object.entries(s.tools || {})) {
+      toolUsageMap[tool] = (toolUsageMap[tool] || 0) + count;
+    }
+  }
+
+  // Cache hit rate
+  const totalCacheAttempts = overview.totalCacheWriteTokens + overview.totalCacheReadTokens;
+  const cacheHitRate = totalCacheAttempts > 0
+    ? parseFloat(((overview.totalCacheReadTokens / totalCacheAttempts) * 100).toFixed(1))
+    : 0;
+
+  // Filter date-keyed arrays
+  const cutoffStr = cutoffDate.toISOString().slice(0, 10);
+
+  const dailyCost = (data.dailyCost || []).filter(d => d.date >= cutoffStr);
+  const dailyActivity = (data.dailyActivity || []).filter(d => d.date >= cutoffStr);
+  const modelTimeline = (data.modelTimeline || []).filter(d => d.date >= cutoffStr);
+  const toolTokenAttribution = (data.toolTokenAttribution || []);
+
+  // Agent delegations & skill usage — recount from sessions not easily possible without raw data,
+  // so we scale proportionally or just pass through (sessions filtered already)
+  const agentDelegations = data.agentDelegations || [];
+  const skillUsage = data.skillUsage || [];
+  const gitBranches = data.gitBranches || [];
+  const entrypoints = data.entrypoints || [];
+  const historyCommands = data.historyCommands || [];
+
+  return {
+    overview: {
+      ...overview,
+      cacheHitRate,
+      firstSessionDate: overview.firstSessionDate || null,
+      lastSessionDate: overview.lastSessionDate || null,
+      totalTokens: overview.totalInputTokens + overview.totalOutputTokens + overview.totalCacheWriteTokens,
+    },
+    perProject: Object.entries(perProjectMap)
+      .map(([name, d]) => ({ name, ...d }))
+      .sort((a, b) => b.cost - a.cost),
+    perModel: perModelMap,
+    toolUsage: Object.entries(toolUsageMap)
+      .map(([name, count]) => ({ name, count }))
+      .sort((a, b) => b.count - a.count),
+    dailyCost,
+    dailyActivity,
+    hourlyActivity: hourly.map((count, hour) => ({ hour, count })),
+    weekdayActivity: ['Sun','Mon','Tue','Wed','Thu','Fri','Sat'].map((day, i) => ({ day, count: weekday[i] })),
+    modelTimeline,
+    toolTokenAttribution,
+    agentDelegations,
+    skillUsage,
+    gitBranches,
+    entrypoints,
+    historyCommands,
+    sessionDetails: sessions,
+  };
+}
+
+function applyTimeRange() {
+  if (!DATA) return;
+  const range = document.getElementById('time-range').value;
+  const cutoff = getCutoffDate(range);
+  FILTERED_DATA = filterAndAggregate(DATA, cutoff);
+  renderAll(FILTERED_DATA);
+}
+
+// ─── Feature 9: Theme Toggle ──────────────────────────
+const THEME_KEY = 'csd_theme';
+
+function toggleTheme() {
+  const html = document.documentElement;
+  const btn = document.getElementById('theme-toggle');
+  if (html.classList.contains('light-mode')) {
+    html.classList.remove('light-mode');
+    html.classList.add('dark');
+    btn.textContent = '🌙';
+    localStorage.setItem(THEME_KEY, 'dark');
+  } else {
+    html.classList.add('light-mode');
+    html.classList.remove('dark');
+    btn.textContent = '☀️';
+    localStorage.setItem(THEME_KEY, 'light');
+  }
+}
+
+function restoreTheme() {
+  const saved = localStorage.getItem(THEME_KEY);
+  if (saved === 'light') {
+    document.documentElement.classList.add('light-mode');
+    document.documentElement.classList.remove('dark');
+    const btn = document.getElementById('theme-toggle');
+    if (btn) btn.textContent = '☀️';
+  }
+}
+
+// ─── CSV Export ───────────────────────────────────────
+function downloadCsv(filename, rows) {
+  const csv = rows.map(r => r.map(cell => {
+    const s = String(cell ?? '');
+    return s.includes(',') || s.includes('"') || s.includes('\n') ? `"${s.replace(/"/g, '""')}"` : s;
+  }).join(',')).join('\n');
+  const url = URL.createObjectURL(new Blob([csv], { type: 'text/csv' }));
+  const a = document.createElement('a');
+  a.href = url;
+  a.download = filename;
+  a.click();
+  URL.revokeObjectURL(url);
+}
+
+function exportSessionsCsv() {
+  const sessions = _currentFilteredSessions.length > 0 ? _currentFilteredSessions : (FILTERED_DATA?.sessionDetails || []);
+  const header = ['Date', 'Project', 'Branch', 'Slug', 'Messages', 'Tools', 'Duration(min)', 'Input Tokens', 'Output Tokens', 'Cost'];
+  const rows = sessions.map(s => [
+    s.startTime ? new Date(s.startTime).toISOString().slice(0, 10) : '',
+    s.projectName || '',
+    s.gitBranch || '',
+    s.slug || '',
+    (s.humanMessages || 0) + (s.assistantMessages || 0),
+    s.toolCalls || 0,
+    s.duration ? Math.floor(s.duration / 60000) : 0,
+    s.inputTokens || 0,
+    s.outputTokens || 0,
+    (s.cost || 0).toFixed(4),
+  ]);
+  downloadCsv('sessions.csv', [header, ...rows]);
+}
+
+function exportProjectsCsv() {
+  const projects = FILTERED_DATA?.perProject || [];
+  const header = ['Project', 'Sessions', 'Messages', 'Tool Calls', 'Input Tokens', 'Output Tokens', 'Cost'];
+  const rows = projects.map(p => [
+    p.name, p.sessions, p.messages, p.toolCalls, p.inputTokens, p.outputTokens, (p.cost || 0).toFixed(4),
+  ]);
+  downloadCsv('projects.csv', [header, ...rows]);
+}
+
+// ─── Daily Budget Alert ───────────────────────────────
+async function checkBudgetAlert(data) {
+  try {
+    const res = await fetch('/api/config');
+    const config = await res.json();
+    if (!config.dailyBudget) return;
+
+    const now = new Date();
+    const sevenDaysAgo = new Date(now); sevenDaysAgo.setDate(sevenDaysAgo.getDate() - 7);
+    const sevenDayStr = sevenDaysAgo.toISOString().slice(0, 10);
+
+    const recentCosts = (data.dailyCost || []).filter(d => d.date >= sevenDayStr);
+    if (recentCosts.length === 0) return;
+
+    const avg7 = recentCosts.reduce((sum, d) => sum + d.cost, 0) / recentCosts.length;
+
+    if (avg7 > config.dailyBudget) {
+      const banner = document.getElementById('budget-banner');
+      document.getElementById('budget-banner-text').textContent =
+        `⚠️ Daily budget alert: 7-day avg (${fmtCost(avg7)}/day) exceeds ${fmtCost(config.dailyBudget)} budget`;
+      banner.classList.remove('hidden');
+    }
+  } catch {
+    // Budget check is non-critical — swallow silently
+  }
+}
+
+// ─── Auto-Refresh ─────────────────────────────────────
+const AUTO_REFRESH_KEY = 'csd_autorefresh';
+
+function toggleAutoRefresh() {
+  const isOn = !!AUTO_REFRESH_INTERVAL;
+  if (isOn) {
+    clearInterval(AUTO_REFRESH_INTERVAL);
+    AUTO_REFRESH_INTERVAL = null;
+    localStorage.setItem(AUTO_REFRESH_KEY, 'off');
+    document.getElementById('auto-refresh-toggle').textContent = '○ Auto';
+    document.getElementById('auto-refresh-toggle').style.color = '';
+  } else {
+    AUTO_REFRESH_INTERVAL = setInterval(refresh, 30000);
+    localStorage.setItem(AUTO_REFRESH_KEY, 'on');
+    document.getElementById('auto-refresh-toggle').textContent = '⬤ Auto';
+    document.getElementById('auto-refresh-toggle').style.color = '#22c55e';
+  }
+}
+
+function restoreAutoRefresh() {
+  if (localStorage.getItem(AUTO_REFRESH_KEY) === 'on') {
+    AUTO_REFRESH_INTERVAL = setInterval(refresh, 30000);
+    document.getElementById('auto-refresh-toggle').textContent = '⬤ Auto';
+    document.getElementById('auto-refresh-toggle').style.color = '#22c55e';
+  }
+}
+
+// ─── Keyboard Shortcuts ───────────────────────────────
+let shortcutsTimeout = null;
+
+function showShortcuts() {
+  const overlay = document.getElementById('shortcuts-overlay');
+  overlay.classList.add('visible');
+  clearTimeout(shortcutsTimeout);
+  shortcutsTimeout = setTimeout(() => overlay.classList.remove('visible'), 3000);
+}
+
+document.addEventListener('keydown', (e) => {
+  const tag = document.activeElement.tagName.toLowerCase();
+  if (tag === 'input' || tag === 'select' || tag === 'textarea') return;
+
+  const key = e.key;
+
+  if (key >= '1' && key <= '6') {
+    e.preventDefault();
+    switchTab(TAB_NAMES[parseInt(key) - 1]);
+    return;
+  }
+  if (key === 'r' || key === 'R') { e.preventDefault(); refresh(); return; }
+  if (key === '/') {
+    e.preventDefault();
+    switchTab('sessions');
+    setTimeout(() => document.getElementById('session-search').focus(), 50);
+    return;
+  }
+  if (key === 'Escape') {
+    closeSessionModal();
+    document.getElementById('shortcuts-overlay').classList.remove('visible');
+    return;
+  }
+  if (key === '?') { e.preventDefault(); showShortcuts(); return; }
+});
+
+// ─── Deep Link Hash Navigation ────────────────────────
+function checkDeepLink(data) {
+  const hash = window.location.hash;
+  if (!hash.startsWith('#sessions')) return;
+  const params = new URLSearchParams(hash.slice('#sessions'.length + 1));
+  const sessionId = params.get('id');
+  if (!sessionId) return;
+  switchTab('sessions');
+  const session = data.sessionDetails.find(s => s.sessionId === sessionId);
+  if (session) openSessionModal(session);
+}
+
+// ─── Render All ───────────────────────────────────────
+function renderAll(data) {
+  renderOverview(data);
+  renderProjects(data);
+  renderToolsAndSkills(data);
+  renderSessions(data);
+  renderActivity(data);
+}
+
+// ─── Data Loading ─────────────────────────────────────
+async function loadData() {
+  const res = await fetch('/api/data');
+  DATA = await res.json();
+  return DATA;
+}
+
+async function refresh() {
+  document.getElementById('loading').classList.remove('hidden');
+  document.getElementById('app').classList.add('hidden');
+  await fetch('/api/refresh', { method: 'POST' });
+  await init();
+}
+
+async function init() {
+  try {
+    // Restore theme first (before anything renders)
+    restoreTheme();
+
+    // Load config for username initial
+    try {
+      const cfgRes = await fetch('/api/config');
+      if (cfgRes.ok) {
+        CONFIG = await cfgRes.json();
+        USERNAME_INITIAL = ((CONFIG.username || 'U')[0] || 'U').toUpperCase();
+      }
+    } catch {
+      // Non-critical
+    }
+
+    // Load pinned sessions
+    await loadPinnedSessions();
+
+    const data = await loadData();
+
+    // Apply current time range selection
+    const range = document.getElementById('time-range').value;
+    const cutoff = getCutoffDate(range);
+    FILTERED_DATA = filterAndAggregate(data, cutoff);
+
+    document.getElementById('loading').classList.add('hidden');
+    document.getElementById('app').classList.remove('hidden');
+    document.getElementById('lastUpdated').textContent = 'Updated: ' + new Date().toLocaleTimeString();
+
+    renderAll(FILTERED_DATA);
+    renderInsights();
+    checkBudgetAlert(data);
+    checkDeepLink(FILTERED_DATA);
+  } catch (err) {
+    document.getElementById('loading').innerHTML =
+      `<div class="text-center"><p class="text-red-400 text-sm">Failed to load data</p><p class="text-claude-muted text-xs mt-2">${err.message}</p></div>`;
+  }
+}
+
+restoreAutoRefresh();
+init();