@mooncompany/uplink-chat 0.5.0

package/public/js/dashboard.js

@@ -0,0 +1,452 @@
+// ============================================
+// DASHBOARD MODULE
+// Usage analytics, message stats, cost tracking
+// ============================================
+
+import { UplinkCore } from './core.js';
+
+// State
+let dashboardVisible = false;
+let dashboardEl = null;
+let stats = {
+  messages: [],
+  tokens: [],
+  sessions: 0
+};
+
+// Cost per 1K tokens (approximate for Claude)
+const COST_PER_1K_INPUT = 0.003;
+const COST_PER_1K_OUTPUT = 0.015;
+
+function init() {
+  // Load saved stats
+  loadStats();
+
+  // Create dashboard panel
+  createDashboard();
+
+  // Add command
+  if (window.UplinkCommands) {
+    // Command will be added via commands.js
+  }
+
+  // Track messages
+  interceptMessages();
+
+  logger.debug('Dashboard: Initialized');
+}
+
+function createDashboard() {
+  dashboardEl = document.createElement('div');
+  dashboardEl.className = 'dashboard-overlay';
+  dashboardEl.innerHTML = `
+    <div class="dashboard-panel">
+      <div class="dashboard-header">
+        <h2>📊 Usage Dashboard</h2>
+        <button class="dashboard-close">&times;</button>
+      </div>
+      <div class="dashboard-content">
+        <div class="dashboard-section">
+          <h3>Today's Stats</h3>
+          <div class="stat-grid">
+            <div class="stat-card">
+              <span class="stat-value" id="statMessages">0</span>
+              <span class="stat-label">Messages</span>
+            </div>
+            <div class="stat-card">
+              <span class="stat-value" id="statTokens">0</span>
+              <span class="stat-label">Tokens</span>
+            </div>
+            <div class="stat-card">
+              <span class="stat-value" id="statCost">$0.00</span>
+              <span class="stat-label">Est. Cost</span>
+            </div>
+            <div class="stat-card">
+              <span class="stat-value" id="statAvgResponse">0s</span>
+              <span class="stat-label">Avg Response</span>
+            </div>
+          </div>
+        </div>
+
+        <div class="dashboard-section">
+          <h3>Activity (Last 7 Days)</h3>
+          <div class="chart-container">
+            <canvas id="activityChart" width="400" height="150"></canvas>
+          </div>
+        </div>
+
+        <div class="dashboard-section">
+          <h3>Peak Hours</h3>
+          <div class="chart-container">
+            <canvas id="hoursChart" width="400" height="100"></canvas>
+          </div>
+        </div>
+
+        <div class="dashboard-section">
+          <h3>All Time</h3>
+          <div class="stat-grid">
+            <div class="stat-card">
+              <span class="stat-value" id="statTotalMessages">0</span>
+              <span class="stat-label">Total Messages</span>
+            </div>
+            <div class="stat-card">
+              <span class="stat-value" id="statTotalTokens">0</span>
+              <span class="stat-label">Total Tokens</span>
+            </div>
+            <div class="stat-card">
+              <span class="stat-value" id="statTotalCost">$0.00</span>
+              <span class="stat-label">Total Cost</span>
+            </div>
+            <div class="stat-card">
+              <span class="stat-value" id="statSessions">0</span>
+              <span class="stat-label">Sessions</span>
+            </div>
+          </div>
+        </div>
+
+        <div class="dashboard-actions">
+          <button id="exportStats" class="dashboard-btn">Export Data</button>
+          <button id="resetStats" class="dashboard-btn danger">Reset Stats</button>
+        </div>
+      </div>
+    </div>
+  `;
+
+  document.body.appendChild(dashboardEl);
+
+  // Event listeners
+  dashboardEl.querySelector('.dashboard-close').addEventListener('click', hide);
+  dashboardEl.addEventListener('click', (e) => {
+    if (e.target === dashboardEl) hide();
+  });
+
+  document.getElementById('exportStats')?.addEventListener('click', exportStats);
+  document.getElementById('resetStats')?.addEventListener('click', resetStats);
+}
+
+function show() {
+  dashboardVisible = true;
+  dashboardEl.classList.add('visible');
+  updateDisplay();
+  drawCharts();
+}
+
+function hide() {
+  dashboardVisible = false;
+  dashboardEl.classList.remove('visible');
+}
+
+function toggle() {
+  if (dashboardVisible) hide();
+  else show();
+}
+
+function loadStats() {
+  try {
+    const saved = localStorage.getItem('uplink-stats');
+    if (saved) {
+      const parsed = JSON.parse(saved);
+      stats = { ...stats, ...parsed };
+    }
+  } catch (e) {
+    logger.warn('Dashboard: Failed to load stats', e);
+  }
+}
+
+function saveStats() {
+  try {
+    localStorage.setItem('uplink-stats', JSON.stringify(stats));
+  } catch (e) {
+    logger.warn('Dashboard: Failed to save stats', e);
+  }
+}
+
+function interceptMessages() {
+  // Use shared fetch utilities if available
+  if (window.UplinkFetch) {
+    window.UplinkFetch.registerHook('afterResponse',
+      async (url, options, response, duration) => {
+        // Track chat API calls
+        if (url === '/api/chat') {
+          trackMessage('user', duration);
+          
+          // Try to get token usage from response
+          try {
+            const data = await response.json();
+            if (data.usage) {
+              trackTokens(data.usage.prompt_tokens || 0, data.usage.completion_tokens || 0);
+            }
+          } catch (e) {
+            logger.warn('Dashboard: Failed to parse chat response for token tracking', e);
+          }
+        }
+      }
+    );
+  }
+
+  // Also listen for streaming token updates from developer panel
+  const originalUpdateTokens = window.UplinkDeveloper?.updateTokens;
+  if (originalUpdateTokens) {
+    window.UplinkDeveloper.updateTokens = function(usage) {
+      originalUpdateTokens.call(window.UplinkDeveloper, usage);
+      trackTokens(
+        usage.prompt_tokens || usage.promptTokens || 0,
+        usage.completion_tokens || usage.completionTokens || 0
+      );
+    };
+  }
+}
+
+function trackMessage(type, durationMs = 0) {
+  const now = new Date();
+  const today = now.toISOString().split('T')[0];
+  const hour = now.getHours();
+
+  stats.messages.push({
+    date: today,
+    hour,
+    type,
+    duration: durationMs,
+    timestamp: now.getTime()
+  });
+
+  // Keep only last 30 days of data
+  const thirtyDaysAgo = Date.now() - 30 * 24 * 60 * 60 * 1000;
+  stats.messages = stats.messages.filter(m => m.timestamp > thirtyDaysAgo);
+
+  saveStats();
+}
+
+function trackTokens(input, output) {
+  const now = new Date();
+  const today = now.toISOString().split('T')[0];
+
+  stats.tokens.push({
+    date: today,
+    input,
+    output,
+    timestamp: now.getTime()
+  });
+
+  // Keep only last 30 days
+  const thirtyDaysAgo = Date.now() - 30 * 24 * 60 * 60 * 1000;
+  stats.tokens = stats.tokens.filter(t => t.timestamp > thirtyDaysAgo);
+
+  saveStats();
+  
+  if (dashboardVisible) {
+    updateDisplay();
+  }
+}
+
+function updateDisplay() {
+  const today = new Date().toISOString().split('T')[0];
+  
+  // Today's messages
+  const todayMessages = stats.messages.filter(m => m.date === today);
+  document.getElementById('statMessages').textContent = todayMessages.length;
+
+  // Today's tokens
+  const todayTokens = stats.tokens.filter(t => t.date === today);
+  const todayInputTokens = todayTokens.reduce((sum, t) => sum + t.input, 0);
+  const todayOutputTokens = todayTokens.reduce((sum, t) => sum + t.output, 0);
+  const todayTotalTokens = todayInputTokens + todayOutputTokens;
+  document.getElementById('statTokens').textContent = formatNumber(todayTotalTokens);
+
+  // Today's cost
+  const todayCost = (todayInputTokens / 1000 * COST_PER_1K_INPUT) + 
+                    (todayOutputTokens / 1000 * COST_PER_1K_OUTPUT);
+  document.getElementById('statCost').textContent = '$' + todayCost.toFixed(2);
+
+  // Average response time
+  const responseTimes = todayMessages.filter(m => m.duration > 0).map(m => m.duration);
+  const avgResponse = responseTimes.length > 0 
+    ? responseTimes.reduce((a, b) => a + b, 0) / responseTimes.length / 1000
+    : 0;
+  document.getElementById('statAvgResponse').textContent = avgResponse.toFixed(1) + 's';
+
+  // All time stats
+  document.getElementById('statTotalMessages').textContent = formatNumber(stats.messages.length);
+  
+  const totalInputTokens = stats.tokens.reduce((sum, t) => sum + t.input, 0);
+  const totalOutputTokens = stats.tokens.reduce((sum, t) => sum + t.output, 0);
+  document.getElementById('statTotalTokens').textContent = formatNumber(totalInputTokens + totalOutputTokens);
+  
+  const totalCost = (totalInputTokens / 1000 * COST_PER_1K_INPUT) + 
+                    (totalOutputTokens / 1000 * COST_PER_1K_OUTPUT);
+  document.getElementById('statTotalCost').textContent = '$' + totalCost.toFixed(2);
+
+  // Sessions (unique days with activity)
+  const uniqueDays = new Set(stats.messages.map(m => m.date));
+  document.getElementById('statSessions').textContent = uniqueDays.size;
+}
+
+function drawCharts() {
+  drawActivityChart();
+  drawHoursChart();
+}
+
+function drawActivityChart() {
+  const canvas = document.getElementById('activityChart');
+  if (!canvas) return;
+  
+  const ctx = canvas.getContext('2d');
+  const width = canvas.width;
+  const height = canvas.height;
+  
+  ctx.clearRect(0, 0, width, height);
+
+  // Get last 7 days
+  const days = [];
+  for (let i = 6; i >= 0; i--) {
+    const date = new Date();
+    date.setDate(date.getDate() - i);
+    days.push(date.toISOString().split('T')[0]);
+  }
+
+  // Count messages per day
+  const counts = days.map(day => 
+    stats.messages.filter(m => m.date === day).length
+  );
+  
+  const maxCount = Math.max(...counts, 1);
+  const barWidth = (width - 60) / 7;
+  const barGap = 8;
+
+  // Draw bars
+  ctx.fillStyle = 'rgba(0, 240, 255, 0.6)';
+  counts.forEach((count, i) => {
+    const barHeight = (count / maxCount) * (height - 40);
+    const x = 30 + i * barWidth + barGap / 2;
+    const y = height - 20 - barHeight;
+    
+    ctx.beginPath();
+    ctx.roundRect(x, y, barWidth - barGap, barHeight, 4);
+    ctx.fill();
+  });
+
+  // Draw labels
+  ctx.fillStyle = 'rgba(255, 255, 255, 0.6)';
+  ctx.font = '10px system-ui';
+  ctx.textAlign = 'center';
+  days.forEach((day, i) => {
+    const label = new Date(day).toLocaleDateString('en', { weekday: 'short' });
+    const x = 30 + i * barWidth + barWidth / 2;
+    ctx.fillText(label, x, height - 5);
+  });
+
+  // Draw count on top of bars
+  ctx.fillStyle = 'rgba(255, 255, 255, 0.8)';
+  counts.forEach((count, i) => {
+    if (count > 0) {
+      const barHeight = (count / maxCount) * (height - 40);
+      const x = 30 + i * barWidth + barWidth / 2;
+      const y = height - 25 - barHeight;
+      ctx.fillText(count.toString(), x, y);
+    }
+  });
+}
+
+function drawHoursChart() {
+  const canvas = document.getElementById('hoursChart');
+  if (!canvas) return;
+  
+  const ctx = canvas.getContext('2d');
+  const width = canvas.width;
+  const height = canvas.height;
+  
+  ctx.clearRect(0, 0, width, height);
+
+  // Count messages per hour
+  const hourCounts = new Array(24).fill(0);
+  stats.messages.forEach(m => {
+    if (m.hour !== undefined) {
+      hourCounts[m.hour]++;
+    }
+  });
+
+  const maxCount = Math.max(...hourCounts, 1);
+  const barWidth = (width - 20) / 24;
+
+  // Draw bars
+  hourCounts.forEach((count, hour) => {
+    const barHeight = (count / maxCount) * (height - 25);
+    const x = 10 + hour * barWidth;
+    const y = height - 15 - barHeight;
+    
+    // Color based on time of day
+    if (hour >= 6 && hour < 12) {
+      ctx.fillStyle = 'rgba(255, 200, 100, 0.6)'; // Morning
+    } else if (hour >= 12 && hour < 18) {
+      ctx.fillStyle = 'rgba(0, 240, 255, 0.6)'; // Afternoon
+    } else if (hour >= 18 && hour < 22) {
+      ctx.fillStyle = 'rgba(180, 100, 255, 0.6)'; // Evening
+    } else {
+      ctx.fillStyle = 'rgba(100, 100, 150, 0.6)'; // Night
+    }
+    
+    ctx.fillRect(x, y, barWidth - 1, barHeight);
+  });
+
+  // Draw hour labels (every 6 hours)
+  ctx.fillStyle = 'rgba(255, 255, 255, 0.6)';
+  ctx.font = '9px system-ui';
+  ctx.textAlign = 'center';
+  [0, 6, 12, 18].forEach(hour => {
+    const x = 10 + hour * barWidth + barWidth / 2;
+    const label = hour === 0 ? '12am' : hour === 12 ? '12pm' : 
+                  hour < 12 ? hour + 'am' : (hour - 12) + 'pm';
+    ctx.fillText(label, x, height - 3);
+  });
+}
+
+function exportStats() {
+  const data = {
+    exported: new Date().toISOString(),
+    messages: stats.messages,
+    tokens: stats.tokens,
+    summary: {
+      totalMessages: stats.messages.length,
+      totalInputTokens: stats.tokens.reduce((s, t) => s + t.input, 0),
+      totalOutputTokens: stats.tokens.reduce((s, t) => s + t.output, 0)
+    }
+  };
+
+  const blob = new Blob([JSON.stringify(data, null, 2)], { type: 'application/json' });
+  const url = URL.createObjectURL(blob);
+  const a = document.createElement('a');
+  a.href = url;
+  a.download = `uplink-stats-${new Date().toISOString().split('T')[0]}.json`;
+  a.click();
+  URL.revokeObjectURL(url);
+}
+
+function resetStats() {
+  if (!confirm('Reset all usage statistics? This cannot be undone.')) return;
+  
+  stats = { messages: [], tokens: [], sessions: 0 };
+  saveStats();
+  updateDisplay();
+  drawCharts();
+}
+
+function formatNumber(n) {
+  if (n >= 1000000) return (n / 1000000).toFixed(1) + 'M';
+  if (n >= 1000) return (n / 1000).toFixed(1) + 'K';
+  return n.toString();
+}
+
+// Expose API
+export const UplinkDashboard = {
+  show,
+  hide,
+  toggle,
+  trackMessage,
+  trackTokens
+};
+
+// Backward compat: assign to window
+window.UplinkDashboard = UplinkDashboard;
+
+// Register with core for coordinated initialization
+UplinkCore.registerModule('dashboard', init);