claude-code-templates 1.5.17 → 1.6.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "claude-code-templates",
-  "version": "1.5.17",
+  "version": "1.6.0",
   "description": "CLI tool to setup Claude Code configurations with framework-specific commands, automation hooks and MCP Servers for your projects",
   "main": "src/index.js",
   "bin": {

package/src/analytics-web/index.html

@@ -4,6 +4,7 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Claude Code Analytics - Terminal</title>
+    <script src="https://cdn.jsdelivr.net/npm/chart.js@3.9.1/dist/chart.min.js"></script>
     <style>
         * {
             margin: 0;
@@ -120,6 +121,111 @@
             margin-top: 2px;
         }
         
+        .chart-controls {
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            gap: 16px;
+            margin: 20px 0;
+            padding: 12px 0;
+            border-top: 1px solid #21262d;
+            border-bottom: 1px solid #21262d;
+        }
+        
+        .chart-controls-left {
+            display: flex;
+            align-items: center;
+            gap: 16px;
+        }
+        
+        .chart-controls-right {
+            display: flex;
+            align-items: center;
+            gap: 12px;
+        }
+        
+        .date-control {
+            display: flex;
+            align-items: center;
+            gap: 8px;
+        }
+        
+        .date-label {
+            color: #7d8590;
+            font-size: 0.875rem;
+        }
+        
+        .date-input {
+            background: #21262d;
+            border: 1px solid #30363d;
+            color: #c9d1d9;
+            padding: 6px 12px;
+            border-radius: 4px;
+            font-family: inherit;
+            font-size: 0.875rem;
+            cursor: pointer;
+        }
+        
+        .date-input:focus {
+            outline: none;
+            border-color: #d57455;
+        }
+        
+        .refresh-btn {
+            background: none;
+            border: 1px solid #30363d;
+            color: #7d8590;
+            padding: 6px 12px;
+            border-radius: 4px;
+            cursor: pointer;
+            font-family: inherit;
+            font-size: 0.875rem;
+            transition: all 0.2s ease;
+            display: flex;
+            align-items: center;
+            gap: 6px;
+        }
+        
+        .refresh-btn:hover {
+            border-color: #d57455;
+            color: #d57455;
+        }
+        
+        .refresh-btn.loading {
+            opacity: 0.6;
+            cursor: not-allowed;
+        }
+        
+        .charts-container {
+            display: grid;
+            grid-template-columns: 2fr 1fr;
+            gap: 30px;
+            margin: 20px 0 30px 0;
+        }
+        
+        .chart-card {
+            background: #161b22;
+            border: 1px solid #30363d;
+            border-radius: 6px;
+            padding: 20px;
+            position: relative;
+        }
+        
+        .chart-title {
+            color: #d57455;
+            font-size: 0.875rem;
+            text-transform: uppercase;
+            margin-bottom: 16px;
+            display: flex;
+            align-items: center;
+            gap: 8px;
+        }
+        
+        .chart-canvas {
+            width: 100% !important;
+            height: 200px !important;
+        }
+        
         .filter-bar {
             display: flex;
             align-items: center;
@@ -190,6 +296,23 @@
         .session-id {
             color: #d57455;
             font-family: monospace;
+            display: flex;
+            align-items: center;
+            gap: 6px;
+        }
+        
+        .process-indicator {
+            display: inline-block;
+            width: 6px;
+            height: 6px;
+            background: #3fb950;
+            border-radius: 50%;
+            animation: pulse 2s infinite;
+            cursor: help;
+        }
+        
+        .process-indicator.orphan {
+            background: #f85149;
         }
         
         .session-id-container {
@@ -587,6 +710,35 @@
                 gap: 20px;
             }
             
+            .chart-controls {
+                flex-direction: column;
+                gap: 12px;
+                align-items: stretch;
+            }
+            
+            .chart-controls-left {
+                flex-direction: column;
+                gap: 12px;
+            }
+            
+            .chart-controls-right {
+                justify-content: center;
+            }
+            
+            .charts-container {
+                grid-template-columns: 1fr;
+                gap: 20px;
+                margin: 20px 0;
+            }
+            
+            .chart-card {
+                padding: 16px;
+            }
+            
+            .chart-canvas {
+                height: 180px !important;
+            }
+            
             .filter-bar {
                 flex-direction: column;
                 align-items: flex-start;
@@ -664,6 +816,40 @@
                 </div>
             </div>
             
+            <div class="chart-controls">
+                <div class="chart-controls-left">
+                    <div class="date-control">
+                        <span class="date-label">from:</span>
+                        <input type="date" id="dateFrom" class="date-input">
+                    </div>
+                    <div class="date-control">
+                        <span class="date-label">to:</span>
+                        <input type="date" id="dateTo" class="date-input">
+                    </div>
+                </div>
+                <div class="chart-controls-right">
+                    <button class="refresh-btn" onclick="refreshCharts()" id="refreshBtn">
+                        🔄 refresh charts
+                    </button>
+                </div>
+            </div>
+            
+            <div class="charts-container">
+                <div class="chart-card">
+                    <div class="chart-title">
+                        📊 token usage over time
+                    </div>
+                    <canvas id="tokenChart" class="chart-canvas"></canvas>
+                </div>
+                
+                <div class="chart-card">
+                    <div class="chart-title">
+                        🎯 project activity distribution
+                    </div>
+                    <canvas id="projectChart" class="chart-canvas"></canvas>
+                </div>
+            </div>
+            
             <div class="filter-bar">
                 <span class="filter-label">filter conversations:</span>
                 <div class="filter-buttons">
@@ -730,6 +916,9 @@
         let allConversations = [];
         let currentFilter = 'active';
         let currentSession = null;
+        let tokenChart = null;
+        let projectChart = null;
+        let allData = null;
         
         async function loadData() {
             try {
@@ -746,6 +935,15 @@
                 
                 updateStats(data.summary);
                 allConversations = data.conversations;
+                allData = data; // Store data globally for access
+                window.allData = data; // Keep for backward compatibility
+                
+                // Initialize date inputs on first load
+                if (!document.getElementById('dateFrom').value) {
+                    initializeDateInputs();
+                }
+                
+                updateCharts(data);
                 updateSessionsTable();
                 
             } catch (error) {
@@ -769,6 +967,296 @@
             }
         }
         
+        function initializeDateInputs() {
+            const today = new Date();
+            const sevenDaysAgo = new Date(today);
+            sevenDaysAgo.setDate(sevenDaysAgo.getDate() - 7);
+            
+            document.getElementById('dateFrom').value = sevenDaysAgo.toISOString().split('T')[0];
+            document.getElementById('dateTo').value = today.toISOString().split('T')[0];
+        }
+        
+        function getDateRange() {
+            const fromDate = new Date(document.getElementById('dateFrom').value);
+            const toDate = new Date(document.getElementById('dateTo').value);
+            toDate.setHours(23, 59, 59, 999); // Include the entire end date
+            
+            return { fromDate, toDate };
+        }
+        
+        function filterConversationsByDate(conversations) {
+            const { fromDate, toDate } = getDateRange();
+            
+            return conversations.filter(conv => {
+                const convDate = new Date(conv.lastModified);
+                return convDate >= fromDate && convDate <= toDate;
+            });
+        }
+        
+        function updateCharts(data) {
+            // Wait for Chart.js to load before creating charts
+            if (typeof Chart === 'undefined') {
+                console.log('Chart.js not loaded yet, retrying in 100ms...');
+                setTimeout(() => updateCharts(data), 100);
+                return;
+            }
+            
+            // Use ALL conversations but filter chart display by date range
+            // This maintains the original behavior
+            
+            // Update Token Usage Over Time Chart
+            updateTokenChart(data.conversations);
+            
+            // Update Project Activity Distribution Chart  
+            updateProjectChart(data.conversations);
+        }
+        
+        async function refreshCharts() {
+            const refreshBtn = document.getElementById('refreshBtn');
+            refreshBtn.classList.add('loading');
+            refreshBtn.textContent = '🔄 refreshing...';
+            
+            try {
+                // Use existing data but re-filter and update charts
+                if (allData) {
+                    updateCharts(allData);
+                }
+            } catch (error) {
+                console.error('Error refreshing charts:', error);
+            } finally {
+                refreshBtn.classList.remove('loading');
+                refreshBtn.textContent = '🔄 refresh charts';
+            }
+        }
+        
+        function updateTokenChart(conversations) {
+            // Check if Chart.js is available
+            if (typeof Chart === 'undefined') {
+                console.warn('Chart.js not available for updateTokenChart');
+                return;
+            }
+            
+            // Prepare data for selected date range
+            const { fromDate, toDate } = getDateRange();
+            const dateRange = [];
+            
+            const currentDate = new Date(fromDate);
+            while (currentDate <= toDate) {
+                dateRange.push({
+                    date: currentDate.toISOString().split('T')[0],
+                    label: currentDate.toLocaleDateString('en-US', { month: 'short', day: 'numeric' }),
+                    tokens: 0
+                });
+                currentDate.setDate(currentDate.getDate() + 1);
+            }
+            
+            // Aggregate tokens by day
+            conversations.forEach(conv => {
+                const convDate = new Date(conv.lastModified).toISOString().split('T')[0];
+                const dayData = dateRange.find(day => day.date === convDate);
+                if (dayData) {
+                    dayData.tokens += conv.tokens;
+                }
+            });
+            
+            const ctx = document.getElementById('tokenChart').getContext('2d');
+            
+            if (tokenChart) {
+                tokenChart.destroy();
+            }
+            
+            tokenChart = new Chart(ctx, {
+                type: 'line',
+                data: {
+                    labels: dateRange.map(day => day.label),
+                    datasets: [{
+                        label: 'Tokens',
+                        data: dateRange.map(day => day.tokens),
+                        borderColor: '#d57455',
+                        backgroundColor: 'rgba(213, 116, 85, 0.1)',
+                        borderWidth: 2,
+                        pointBackgroundColor: '#d57455',
+                        pointBorderColor: '#d57455',
+                        pointRadius: 4,
+                        pointHoverRadius: 6,
+                        fill: true,
+                        tension: 0.3
+                    }]
+                },
+                options: {
+                    responsive: true,
+                    maintainAspectRatio: false,
+                    plugins: {
+                        legend: {
+                            display: false
+                        },
+                        tooltip: {
+                            backgroundColor: '#161b22',
+                            titleColor: '#d57455',
+                            bodyColor: '#c9d1d9',
+                            borderColor: '#30363d',
+                            borderWidth: 1,
+                            titleFont: {
+                                family: 'Monaco, Menlo, Ubuntu Mono, monospace',
+                                size: 12
+                            },
+                            bodyFont: {
+                                family: 'Monaco, Menlo, Ubuntu Mono, monospace',
+                                size: 11
+                            },
+                            callbacks: {
+                                title: function(context) {
+                                    return context[0].label;
+                                },
+                                label: function(context) {
+                                    return `Tokens: ${context.parsed.y.toLocaleString()}`;
+                                }
+                            }
+                        }
+                    },
+                    interaction: {
+                        intersect: false,
+                        mode: 'index'
+                    },
+                    hover: {
+                        animationDuration: 200
+                    },
+                    scales: {
+                        x: {
+                            grid: {
+                                color: '#30363d',
+                                borderColor: '#30363d'
+                            },
+                            ticks: {
+                                color: '#7d8590',
+                                font: {
+                                    family: 'Monaco, Menlo, Ubuntu Mono, monospace',
+                                    size: 11
+                                }
+                            }
+                        },
+                        y: {
+                            grid: {
+                                color: '#30363d',
+                                borderColor: '#30363d'
+                            },
+                            ticks: {
+                                color: '#7d8590',
+                                font: {
+                                    family: 'Monaco, Menlo, Ubuntu Mono, monospace',
+                                    size: 11
+                                },
+                                callback: function(value) {
+                                    return value.toLocaleString();
+                                }
+                            }
+                        }
+                    }
+                }
+            });
+        }
+        
+        function updateProjectChart(conversations) {
+            // Check if Chart.js is available
+            if (typeof Chart === 'undefined') {
+                console.warn('Chart.js not available for updateProjectChart');
+                return;
+            }
+            
+            // Aggregate data by project
+            const projectData = {};
+            
+            conversations.forEach(conv => {
+                if (!projectData[conv.project]) {
+                    projectData[conv.project] = 0;
+                }
+                projectData[conv.project] += conv.tokens;
+            });
+            
+            // Get top 5 projects and group others
+            const sortedProjects = Object.entries(projectData)
+                .sort(([,a], [,b]) => b - a)
+                .slice(0, 5);
+            
+            const othersTotal = Object.entries(projectData)
+                .slice(5)
+                .reduce((sum, [,tokens]) => sum + tokens, 0);
+            
+            if (othersTotal > 0) {
+                sortedProjects.push(['others', othersTotal]);
+            }
+            
+            // Terminal-style colors
+            const colors = [
+                '#d57455', // Orange
+                '#3fb950', // Green
+                '#a5d6ff', // Blue
+                '#f97316', // Orange variant
+                '#c9d1d9', // Light gray
+                '#7d8590'  // Gray
+            ];
+            
+            const ctx = document.getElementById('projectChart').getContext('2d');
+            
+            if (projectChart) {
+                projectChart.destroy();
+            }
+            
+            projectChart = new Chart(ctx, {
+                type: 'doughnut',
+                data: {
+                    labels: sortedProjects.map(([project]) => project),
+                    datasets: [{
+                        data: sortedProjects.map(([,tokens]) => tokens),
+                        backgroundColor: colors.slice(0, sortedProjects.length),
+                        borderColor: '#161b22',
+                        borderWidth: 2,
+                        hoverBorderWidth: 3
+                    }]
+                },
+                options: {
+                    responsive: true,
+                    maintainAspectRatio: false,
+                    plugins: {
+                        legend: {
+                            position: 'bottom',
+                            labels: {
+                                color: '#7d8590',
+                                font: {
+                                    family: 'Monaco, Menlo, Ubuntu Mono, monospace',
+                                    size: 10
+                                },
+                                padding: 15,
+                                usePointStyle: true,
+                                pointStyle: 'circle'
+                            }
+                        },
+                        tooltip: {
+                            backgroundColor: '#161b22',
+                            titleColor: '#d57455',
+                            bodyColor: '#c9d1d9',
+                            borderColor: '#30363d',
+                            borderWidth: 1,
+                            titleFont: {
+                                family: 'Monaco, Menlo, Ubuntu Mono, monospace'
+                            },
+                            bodyFont: {
+                                family: 'Monaco, Menlo, Ubuntu Mono, monospace'
+                            },
+                            callbacks: {
+                                label: function(context) {
+                                    const total = context.dataset.data.reduce((sum, value) => sum + value, 0);
+                                    const percentage = ((context.parsed / total) * 100).toFixed(1);
+                                    return `${context.label}: ${context.parsed.toLocaleString()} tokens (${percentage}%)`;
+                                }
+                            }
+                        }
+                    },
+                    cutout: '60%'
+                }
+            });
+        }
+        
         function updateSessionsTable() {
             const tableBody = document.getElementById('sessionsTable');
             const noSessionsDiv = document.getElementById('noSessions');
@@ -791,7 +1279,10 @@
                 <tr onclick="showSessionDetail('${conv.id}')" style="cursor: pointer;">
                     <td>
                         <div class="session-id-container">
-                            <div class="session-id">${conv.id.substring(0, 8)}...</div>
+                            <div class="session-id">
+                                ${conv.id.substring(0, 8)}...
+                                ${conv.runningProcess ? `<span class="process-indicator" title="Active claude process (PID: ${conv.runningProcess.pid})"></span>` : ''}
+                            </div>
                             <div class="status-squares">
                                 ${generateStatusSquaresHTML(conv.statusSquares || [])}
                             </div>
@@ -806,6 +1297,33 @@
                     <td class="status-${conv.status}">${conv.status}</td>
                 </tr>
             `).join('');
+            
+            // NEW: Add orphan processes (active claude commands without conversation)
+            if (window.allData && window.allData.orphanProcesses && window.allData.orphanProcesses.length > 0) {
+                const orphanRows = window.allData.orphanProcesses.map(process => `
+                    <tr style="background: rgba(248, 81, 73, 0.1); cursor: default;">
+                        <td>
+                            <div class="session-id-container">
+                                <div class="session-id">
+                                    orphan-${process.pid}
+                                    <span class="process-indicator orphan" title="Orphan claude process (PID: ${process.pid})"></span>
+                                </div>
+                            </div>
+                        </td>
+                        <td class="session-project">${process.workingDir}</td>
+                        <td class="session-model">Unknown</td>
+                        <td class="session-messages">-</td>
+                        <td class="session-tokens">-</td>
+                        <td class="session-time">Running</td>
+                        <td class="conversation-state">Active process</td>
+                        <td class="status-active">orphan</td>
+                    </tr>
+                `).join('');
+                
+                if (currentFilter === 'active' || currentFilter === 'all') {
+                    tableBody.innerHTML += orphanRows;
+                }
+            }
         }
         
         function formatTime(date) {
@@ -1172,11 +1690,26 @@
             }
         }
         
-        // Load initial data
-        loadData();
-        
-        // Refresh data every 5 seconds
-        setInterval(loadData, 5000);
+        // Wait for DOM and Chart.js to load
+        document.addEventListener('DOMContentLoaded', function() {
+            // Check if Chart.js is loaded
+            function initWhenReady() {
+                if (typeof Chart !== 'undefined') {
+                    console.log('Chart.js loaded successfully');
+                    loadData();
+                    // No automatic refresh - manual only
+                } else {
+                    console.log('Waiting for Chart.js to load...');
+                    setTimeout(initWhenReady, 100);
+                }
+            }
+            
+            initWhenReady();
+            
+            // Add event listeners for date inputs
+            document.getElementById('dateFrom').addEventListener('change', refreshCharts);
+            document.getElementById('dateTo').addEventListener('change', refreshCharts);
+        });
         
         // Add keyboard shortcut for refresh (F5 or Ctrl+R)
         document.addEventListener('keydown', function(e) {

package/src/analytics.js

@@ -51,6 +51,9 @@ class ClaudeAnalytics {
       const projects = await this.loadActiveProjects();
       this.data.activeProjects = projects;
 
+      // NEW: Detect active Claude processes and enrich data
+      await this.enrichWithRunningProcesses();
+
       // Calculate summary statistics
       this.data.summary = this.calculateSummary(conversations, projects);
 
@@ -285,6 +288,94 @@ class ClaudeAnalytics {
     return null;
   }
 
+  // NEW: Function to detect active Claude processes
+  async detectRunningClaudeProcesses() {
+    const { exec } = require('child_process');
+    
+    return new Promise((resolve) => {
+      // Search for processes containing 'claude' but exclude our own analytics process and system processes
+      exec('ps aux | grep -i claude | grep -v grep | grep -v analytics | grep -v "/Applications/Claude.app" | grep -v "npm start"', (error, stdout) => {
+        if (error) {
+          resolve([]);
+          return;
+        }
+        
+        const processes = stdout.split('\n')
+          .filter(line => line.trim())
+          .filter(line => {
+            // Only include actual Claude CLI processes, not system processes
+            const fullCommand = line.split(/\s+/).slice(10).join(' ');
+            return fullCommand.includes('claude') && 
+                   !fullCommand.includes('chrome_crashpad_handler') &&
+                   !fullCommand.includes('create-claude-config') &&
+                   !fullCommand.includes('node bin/') &&
+                   fullCommand.trim() === 'claude'; // Only the basic claude command
+          })
+          .map(line => {
+            const parts = line.split(/\s+/);
+            const fullCommand = parts.slice(10).join(' ');
+            
+            // Extract useful information from command
+            const cwdMatch = fullCommand.match(/--cwd[=\s]+([^\s]+)/);
+            const workingDir = cwdMatch ? cwdMatch[1] : 'unknown';
+            
+            return {
+              pid: parts[1],
+              command: fullCommand,
+              workingDir: workingDir,
+              startTime: new Date(), // For now we use current time
+              status: 'running',
+              user: parts[0]
+            };
+          });
+        
+        resolve(processes);
+      });
+    });
+  }
+
+  // NEW: Enrich existing conversations with process information
+  async enrichWithRunningProcesses() {
+    try {
+      const runningProcesses = await this.detectRunningClaudeProcesses();
+      
+      // Add active process information to each conversation
+      this.data.conversations.forEach(conversation => {
+        // Look for active process for this project
+        const matchingProcess = runningProcesses.find(process => 
+          process.workingDir.includes(conversation.project) ||
+          process.command.includes(conversation.project)
+        );
+        
+        if (matchingProcess) {
+          // ENRICH without changing existing logic
+          conversation.runningProcess = {
+            pid: matchingProcess.pid,
+            startTime: matchingProcess.startTime,
+            workingDir: matchingProcess.workingDir,
+            hasActiveCommand: true
+          };
+          
+          // Only change status if not already marked as active by existing logic
+          if (conversation.status !== 'active') {
+            conversation.status = 'active';
+            conversation.statusReason = 'running_process';
+          }
+        } else {
+          conversation.runningProcess = null;
+        }
+      });
+      
+      // Disable orphan process detection to reduce noise
+      this.data.orphanProcesses = [];
+      
+      console.log(chalk.blue(`🔍 Found ${runningProcesses.length} running Claude processes`));
+      
+    } catch (error) {
+      console.warn(chalk.yellow('Warning: Could not detect running processes'), error.message);
+    }
+  }
+
   extractProjectFromConversation(messages) {
     // Try to extract project information from conversation
     for (const message of messages.slice(0, 5)) {
@@ -313,16 +404,16 @@ class ClaudeAnalytics {
     const lastMessageTime = new Date(lastMessage.timestamp);
     const lastMessageMinutesAgo = (now - lastMessageTime) / (1000 * 60);
 
-    // Simplified status logic - typing is now part of active
+    // More balanced logic - active conversations and recent activity
     if (lastMessage.role === 'user' && lastMessageMinutesAgo < 3) {
       return 'active';
     } else if (lastMessage.role === 'assistant' && lastMessageMinutesAgo < 5) {
       return 'active';
     }
 
-    // Fallback to file modification time for edge cases
+    // Use file modification time for recent activity
     if (minutesAgo < 5) return 'active';
-    if (minutesAgo < 60) return 'recent';
+    if (minutesAgo < 30) return 'recent';
     return 'inactive';
   }
 
@@ -636,6 +727,11 @@ class ClaudeAnalytics {
       console.log(chalk.blue('⏱️  Periodic data refresh...'));
       await this.loadInitialData();
     }, 30000); // Every 30 seconds
+    
+    // NEW: More frequent updates for active processes (every 10 seconds)
+    setInterval(async () => {
+      await this.enrichWithRunningProcesses();
+    }, 10000);
   }
 
   setupWebServer() {
@@ -822,6 +918,7 @@ async function createWebDashboard() {
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Claude Code Analytics - Terminal</title>
+    <script src="https://cdn.jsdelivr.net/npm/chart.js@3.9.1/dist/chart.min.js"></script>
     <style>
         * {
             margin: 0;
@@ -938,6 +1035,111 @@ async function createWebDashboard() {
             margin-top: 2px;
         }
         
+        .chart-controls {
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            gap: 16px;
+            margin: 20px 0;
+            padding: 12px 0;
+            border-top: 1px solid #21262d;
+            border-bottom: 1px solid #21262d;
+        }
+        
+        .chart-controls-left {
+            display: flex;
+            align-items: center;
+            gap: 16px;
+        }
+        
+        .chart-controls-right {
+            display: flex;
+            align-items: center;
+            gap: 12px;
+        }
+        
+        .date-control {
+            display: flex;
+            align-items: center;
+            gap: 8px;
+        }
+        
+        .date-label {
+            color: #7d8590;
+            font-size: 0.875rem;
+        }
+        
+        .date-input {
+            background: #21262d;
+            border: 1px solid #30363d;
+            color: #c9d1d9;
+            padding: 6px 12px;
+            border-radius: 4px;
+            font-family: inherit;
+            font-size: 0.875rem;
+            cursor: pointer;
+        }
+        
+        .date-input:focus {
+            outline: none;
+            border-color: #d57455;
+        }
+        
+        .refresh-btn {
+            background: none;
+            border: 1px solid #30363d;
+            color: #7d8590;
+            padding: 6px 12px;
+            border-radius: 4px;
+            cursor: pointer;
+            font-family: inherit;
+            font-size: 0.875rem;
+            transition: all 0.2s ease;
+            display: flex;
+            align-items: center;
+            gap: 6px;
+        }
+        
+        .refresh-btn:hover {
+            border-color: #d57455;
+            color: #d57455;
+        }
+        
+        .refresh-btn.loading {
+            opacity: 0.6;
+            cursor: not-allowed;
+        }
+        
+        .charts-container {
+            display: grid;
+            grid-template-columns: 2fr 1fr;
+            gap: 30px;
+            margin: 20px 0 30px 0;
+        }
+        
+        .chart-card {
+            background: #161b22;
+            border: 1px solid #30363d;
+            border-radius: 6px;
+            padding: 20px;
+            position: relative;
+        }
+        
+        .chart-title {
+            color: #d57455;
+            font-size: 0.875rem;
+            text-transform: uppercase;
+            margin-bottom: 16px;
+            display: flex;
+            align-items: center;
+            gap: 8px;
+        }
+        
+        .chart-canvas {
+            width: 100% !important;
+            height: 200px !important;
+        }
+        
         .filter-bar {
             display: flex;
             align-items: center;
@@ -1008,6 +1210,23 @@ async function createWebDashboard() {
         .session-id {
             color: #d57455;
             font-family: monospace;
+            display: flex;
+            align-items: center;
+            gap: 6px;
+        }
+        
+        .process-indicator {
+            display: inline-block;
+            width: 6px;
+            height: 6px;
+            background: #3fb950;
+            border-radius: 50%;
+            animation: pulse 2s infinite;
+            cursor: help;
+        }
+        
+        .process-indicator.orphan {
+            background: #f85149;
         }
         
         .session-id-container {
@@ -1405,6 +1624,35 @@ async function createWebDashboard() {
                 gap: 20px;
             }
             
+            .chart-controls {
+                flex-direction: column;
+                gap: 12px;
+                align-items: stretch;
+            }
+            
+            .chart-controls-left {
+                flex-direction: column;
+                gap: 12px;
+            }
+            
+            .chart-controls-right {
+                justify-content: center;
+            }
+            
+            .charts-container {
+                grid-template-columns: 1fr;
+                gap: 20px;
+                margin: 20px 0;
+            }
+            
+            .chart-card {
+                padding: 16px;
+            }
+            
+            .chart-canvas {
+                height: 180px !important;
+            }
+            
             .filter-bar {
                 flex-direction: column;
                 align-items: flex-start;
@@ -1482,6 +1730,40 @@ async function createWebDashboard() {
                 </div>
             </div>
             
+            <div class="chart-controls">
+                <div class="chart-controls-left">
+                    <div class="date-control">
+                        <span class="date-label">from:</span>
+                        <input type="date" id="dateFrom" class="date-input">
+                    </div>
+                    <div class="date-control">
+                        <span class="date-label">to:</span>
+                        <input type="date" id="dateTo" class="date-input">
+                    </div>
+                </div>
+                <div class="chart-controls-right">
+                    <button class="refresh-btn" onclick="refreshCharts()" id="refreshBtn">
+                        refresh charts
+                    </button>
+                </div>
+            </div>
+            
+            <div class="charts-container">
+                <div class="chart-card">
+                    <div class="chart-title">
+                        📊 token usage over time
+                    </div>
+                    <canvas id="tokenChart" class="chart-canvas"></canvas>
+                </div>
+                
+                <div class="chart-card">
+                    <div class="chart-title">
+                        🎯 project activity distribution
+                    </div>
+                    <canvas id="projectChart" class="chart-canvas"></canvas>
+                </div>
+            </div>
+            
             <div class="filter-bar">
                 <span class="filter-label">filter conversations:</span>
                 <div class="filter-buttons">
@@ -1548,6 +1830,9 @@ async function createWebDashboard() {
         let allConversations = [];
         let currentFilter = 'active';
         let currentSession = null;
+        let tokenChart = null;
+        let projectChart = null;
+        let allData = null;
         
         async function loadData() {
             try {
@@ -1564,6 +1849,15 @@ async function createWebDashboard() {
                 
                 updateStats(data.summary);
                 allConversations = data.conversations;
+                allData = data; // Store data globally for access
+                window.allData = data; // Keep for backward compatibility
+                
+                // Initialize date inputs on first load
+                if (!document.getElementById('dateFrom').value) {
+                    initializeDateInputs();
+                }
+                
+                updateCharts(data);
                 updateSessionsTable();
                 
             } catch (error) {
@@ -1587,6 +1881,296 @@ async function createWebDashboard() {
             }
         }
         
+        function initializeDateInputs() {
+            const today = new Date();
+            const sevenDaysAgo = new Date(today);
+            sevenDaysAgo.setDate(sevenDaysAgo.getDate() - 7);
+            
+            document.getElementById('dateFrom').value = sevenDaysAgo.toISOString().split('T')[0];
+            document.getElementById('dateTo').value = today.toISOString().split('T')[0];
+        }
+        
+        function getDateRange() {
+            const fromDate = new Date(document.getElementById('dateFrom').value);
+            const toDate = new Date(document.getElementById('dateTo').value);
+            toDate.setHours(23, 59, 59, 999); // Include the entire end date
+            
+            return { fromDate, toDate };
+        }
+        
+        function filterConversationsByDate(conversations) {
+            const { fromDate, toDate } = getDateRange();
+            
+            return conversations.filter(conv => {
+                const convDate = new Date(conv.lastModified);
+                return convDate >= fromDate && convDate <= toDate;
+            });
+        }
+        
+        function updateCharts(data) {
+            // Wait for Chart.js to load before creating charts
+            if (typeof Chart === 'undefined') {
+                console.log('Chart.js not loaded yet, retrying in 100ms...');
+                setTimeout(() => updateCharts(data), 100);
+                return;
+            }
+            
+            // Use ALL conversations but filter chart display by date range
+            // This maintains the original behavior
+            
+            // Update Token Usage Over Time Chart
+            updateTokenChart(data.conversations);
+            
+            // Update Project Activity Distribution Chart  
+            updateProjectChart(data.conversations);
+        }
+        
+        async function refreshCharts() {
+            const refreshBtn = document.getElementById('refreshBtn');
+            refreshBtn.classList.add('loading');
+            refreshBtn.textContent = '🔄 refreshing...';
+            
+            try {
+                // Use existing data but re-filter and update charts
+                if (allData) {
+                    updateCharts(allData);
+                }
+            } catch (error) {
+                console.error('Error refreshing charts:', error);
+            } finally {
+                refreshBtn.classList.remove('loading');
+                refreshBtn.textContent = '🔄 refresh charts';
+            }
+        }
+        
+        function updateTokenChart(conversations) {
+            // Check if Chart.js is available
+            if (typeof Chart === 'undefined') {
+                console.warn('Chart.js not available for updateTokenChart');
+                return;
+            }
+            
+            // Prepare data for selected date range
+            const { fromDate, toDate } = getDateRange();
+            const dateRange = [];
+            
+            const currentDate = new Date(fromDate);
+            while (currentDate <= toDate) {
+                dateRange.push({
+                    date: currentDate.toISOString().split('T')[0],
+                    label: currentDate.toLocaleDateString('en-US', { month: 'short', day: 'numeric' }),
+                    tokens: 0
+                });
+                currentDate.setDate(currentDate.getDate() + 1);
+            }
+            
+            // Aggregate tokens by day
+            conversations.forEach(conv => {
+                const convDate = new Date(conv.lastModified).toISOString().split('T')[0];
+                const dayData = dateRange.find(day => day.date === convDate);
+                if (dayData) {
+                    dayData.tokens += conv.tokens;
+                }
+            });
+            
+            const ctx = document.getElementById('tokenChart').getContext('2d');
+            
+            if (tokenChart) {
+                tokenChart.destroy();
+            }
+            
+            tokenChart = new Chart(ctx, {
+                type: 'line',
+                data: {
+                    labels: dateRange.map(day => day.label),
+                    datasets: [{
+                        label: 'Tokens',
+                        data: dateRange.map(day => day.tokens),
+                        borderColor: '#d57455',
+                        backgroundColor: 'rgba(213, 116, 85, 0.1)',
+                        borderWidth: 2,
+                        pointBackgroundColor: '#d57455',
+                        pointBorderColor: '#d57455',
+                        pointRadius: 4,
+                        pointHoverRadius: 6,
+                        fill: true,
+                        tension: 0.3
+                    }]
+                },
+                options: {
+                    responsive: true,
+                    maintainAspectRatio: false,
+                    plugins: {
+                        legend: {
+                            display: false
+                        },
+                        tooltip: {
+                            backgroundColor: '#161b22',
+                            titleColor: '#d57455',
+                            bodyColor: '#c9d1d9',
+                            borderColor: '#30363d',
+                            borderWidth: 1,
+                            titleFont: {
+                                family: 'Monaco, Menlo, Ubuntu Mono, monospace',
+                                size: 12
+                            },
+                            bodyFont: {
+                                family: 'Monaco, Menlo, Ubuntu Mono, monospace',
+                                size: 11
+                            },
+                            callbacks: {
+                                title: function(context) {
+                                    return context[0].label;
+                                },
+                                label: function(context) {
+                                    return \`Tokens: \${context.parsed.y.toLocaleString()}\`;
+                                }
+                            }
+                        }
+                    },
+                    interaction: {
+                        intersect: false,
+                        mode: 'index'
+                    },
+                    hover: {
+                        animationDuration: 200
+                    },
+                    scales: {
+                        x: {
+                            grid: {
+                                color: '#30363d',
+                                borderColor: '#30363d'
+                            },
+                            ticks: {
+                                color: '#7d8590',
+                                font: {
+                                    family: 'Monaco, Menlo, Ubuntu Mono, monospace',
+                                    size: 11
+                                }
+                            }
+                        },
+                        y: {
+                            grid: {
+                                color: '#30363d',
+                                borderColor: '#30363d'
+                            },
+                            ticks: {
+                                color: '#7d8590',
+                                font: {
+                                    family: 'Monaco, Menlo, Ubuntu Mono, monospace',
+                                    size: 11
+                                },
+                                callback: function(value) {
+                                    return value.toLocaleString();
+                                }
+                            }
+                        }
+                    }
+                }
+            });
+        }
+        
+        function updateProjectChart(conversations) {
+            // Check if Chart.js is available
+            if (typeof Chart === 'undefined') {
+                console.warn('Chart.js not available for updateProjectChart');
+                return;
+            }
+            
+            // Aggregate data by project
+            const projectData = {};
+            
+            conversations.forEach(conv => {
+                if (!projectData[conv.project]) {
+                    projectData[conv.project] = 0;
+                }
+                projectData[conv.project] += conv.tokens;
+            });
+            
+            // Get top 5 projects and group others
+            const sortedProjects = Object.entries(projectData)
+                .sort(([,a], [,b]) => b - a)
+                .slice(0, 5);
+            
+            const othersTotal = Object.entries(projectData)
+                .slice(5)
+                .reduce((sum, [,tokens]) => sum + tokens, 0);
+            
+            if (othersTotal > 0) {
+                sortedProjects.push(['others', othersTotal]);
+            }
+            
+            // Terminal-style colors
+            const colors = [
+                '#d57455', // Orange
+                '#3fb950', // Green
+                '#a5d6ff', // Blue
+                '#f97316', // Orange variant
+                '#c9d1d9', // Light gray
+                '#7d8590'  // Gray
+            ];
+            
+            const ctx = document.getElementById('projectChart').getContext('2d');
+            
+            if (projectChart) {
+                projectChart.destroy();
+            }
+            
+            projectChart = new Chart(ctx, {
+                type: 'doughnut',
+                data: {
+                    labels: sortedProjects.map(([project]) => project),
+                    datasets: [{
+                        data: sortedProjects.map(([,tokens]) => tokens),
+                        backgroundColor: colors.slice(0, sortedProjects.length),
+                        borderColor: '#161b22',
+                        borderWidth: 2,
+                        hoverBorderWidth: 3
+                    }]
+                },
+                options: {
+                    responsive: true,
+                    maintainAspectRatio: false,
+                    plugins: {
+                        legend: {
+                            position: 'bottom',
+                            labels: {
+                                color: '#7d8590',
+                                font: {
+                                    family: 'Monaco, Menlo, Ubuntu Mono, monospace',
+                                    size: 10
+                                },
+                                padding: 15,
+                                usePointStyle: true,
+                                pointStyle: 'circle'
+                            }
+                        },
+                        tooltip: {
+                            backgroundColor: '#161b22',
+                            titleColor: '#d57455',
+                            bodyColor: '#c9d1d9',
+                            borderColor: '#30363d',
+                            borderWidth: 1,
+                            titleFont: {
+                                family: 'Monaco, Menlo, Ubuntu Mono, monospace'
+                            },
+                            bodyFont: {
+                                family: 'Monaco, Menlo, Ubuntu Mono, monospace'
+                            },
+                            callbacks: {
+                                label: function(context) {
+                                    const total = context.dataset.data.reduce((sum, value) => sum + value, 0);
+                                    const percentage = ((context.parsed / total) * 100).toFixed(1);
+                                    return \`\${context.label}: \${context.parsed.toLocaleString()} tokens (\${percentage}%)\`;
+                                }
+                            }
+                        }
+                    },
+                    cutout: '60%'
+                }
+            });
+        }
+        
         function updateSessionsTable() {
             const tableBody = document.getElementById('sessionsTable');
             const noSessionsDiv = document.getElementById('noSessions');
@@ -1609,7 +2193,10 @@ async function createWebDashboard() {
                 <tr onclick="showSessionDetail('\${conv.id}')" style="cursor: pointer;">
                     <td>
                         <div class="session-id-container">
-                            <div class="session-id">\${conv.id.substring(0, 8)}...</div>
+                            <div class="session-id">
+                                \${conv.id.substring(0, 8)}...
+                                \${conv.runningProcess ? \`<span class="process-indicator" title="Active claude process (PID: \${conv.runningProcess.pid})"></span>\` : ''}
+                            </div>
                             <div class="status-squares">
                                 \${generateStatusSquaresHTML(conv.statusSquares || [])}
                             </div>
@@ -1624,6 +2211,33 @@ async function createWebDashboard() {
                     <td class="status-\${conv.status}">\${conv.status}</td>
                 </tr>
             \`).join('');
+            
+            // NEW: Add orphan processes (active claude commands without conversation)
+            if (window.allData && window.allData.orphanProcesses && window.allData.orphanProcesses.length > 0) {
+                const orphanRows = window.allData.orphanProcesses.map(process => \`
+                    <tr style="background: rgba(248, 81, 73, 0.1); cursor: default;">
+                        <td>
+                            <div class="session-id-container">
+                                <div class="session-id">
+                                    orphan-\${process.pid}
+                                    <span class="process-indicator orphan" title="Orphan claude process (PID: \${process.pid})"></span>
+                                </div>
+                            </div>
+                        </td>
+                        <td class="session-project">\${process.workingDir}</td>
+                        <td class="session-model">Unknown</td>
+                        <td class="session-messages">-</td>
+                        <td class="session-tokens">-</td>
+                        <td class="session-time">Running</td>
+                        <td class="conversation-state">Active process</td>
+                        <td class="status-active">orphan</td>
+                    </tr>
+                \`).join('');
+                
+                if (currentFilter === 'active' || currentFilter === 'all') {
+                    tableBody.innerHTML += orphanRows;
+                }
+            }
         }
         
         function formatTime(date) {
@@ -1990,11 +2604,26 @@ async function createWebDashboard() {
             }
         }
         
-        // Load initial data
-        loadData();
-        
-        // Refresh data every 5 seconds
-        setInterval(loadData, 5000);
+        // Wait for DOM and Chart.js to load
+        document.addEventListener('DOMContentLoaded', function() {
+            // Check if Chart.js is loaded
+            function initWhenReady() {
+                if (typeof Chart !== 'undefined') {
+                    console.log('Chart.js loaded successfully');
+                    loadData();
+                    // No automatic refresh - manual only
+                } else {
+                    console.log('Waiting for Chart.js to load...');
+                    setTimeout(initWhenReady, 100);
+                }
+            }
+            
+            initWhenReady();
+            
+            // Add event listeners for date inputs
+            document.getElementById('dateFrom').addEventListener('change', refreshCharts);
+            document.getElementById('dateTo').addEventListener('change', refreshCharts);
+        });
         
         // Add keyboard shortcut for refresh (F5 or Ctrl+R)
         document.addEventListener('keydown', function(e) {