claude-code-templates 1.8.0 → 1.8.1

package/src/analytics.js

@@ -2,14 +2,36 @@ const chalk = require('chalk');
 const fs = require('fs-extra');
 const path = require('path');
 const express = require('express');
-const chokidar = require('chokidar');
 const open = require('open');
 const os = require('os');
+const packageJson = require('../package.json');
+const StateCalculator = require('./analytics/core/StateCalculator');
+const ProcessDetector = require('./analytics/core/ProcessDetector');
+const ConversationAnalyzer = require('./analytics/core/ConversationAnalyzer');
+const FileWatcher = require('./analytics/core/FileWatcher');
+const SessionAnalyzer = require('./analytics/core/SessionAnalyzer');
+const DataCache = require('./analytics/data/DataCache');
+const WebSocketServer = require('./analytics/notifications/WebSocketServer');
+const NotificationManager = require('./analytics/notifications/NotificationManager');
+const PerformanceMonitor = require('./analytics/utils/PerformanceMonitor');
 
 class ClaudeAnalytics {
   constructor() {
     this.app = express();
     this.port = 3333;
+    this.stateCalculator = new StateCalculator();
+    this.processDetector = new ProcessDetector();
+    this.fileWatcher = new FileWatcher();
+    this.sessionAnalyzer = new SessionAnalyzer();
+    this.dataCache = new DataCache();
+    this.performanceMonitor = new PerformanceMonitor({
+      enabled: true,
+      logInterval: 60000,
+      memoryThreshold: 300 * 1024 * 1024 // 300MB - more realistic for analytics dashboard
+    });
+    this.webSocketServer = null;
+    this.notificationManager = null;
+    this.httpServer = null;
     this.data = {
       conversations: [],
       summary: {},
@@ -21,47 +43,54 @@ class ClaudeAnalytics {
         lastActivity: null,
       },
     };
-    this.watchers = [];
   }
 
   async initialize() {
     const homeDir = os.homedir();
     this.claudeDir = path.join(homeDir, '.claude');
     this.claudeDesktopDir = path.join(homeDir, 'Library', 'Application Support', 'Claude');
+    this.claudeStatsigDir = path.join(this.claudeDir, 'statsig');
 
     // Check if Claude directories exist
     if (!(await fs.pathExists(this.claudeDir))) {
       throw new Error(`Claude Code directory not found at ${this.claudeDir}`);
     }
 
+    // Initialize conversation analyzer with Claude directory and cache
+    this.conversationAnalyzer = new ConversationAnalyzer(this.claudeDir, this.dataCache);
+
     await this.loadInitialData();
     this.setupFileWatchers();
     this.setupWebServer();
   }
 
   async loadInitialData() {
-    console.log(chalk.yellow('📊 Analyzing Claude Code data...'));
-
     try {
-      // Load conversation files
-      const conversations = await this.loadConversations();
-      this.data.conversations = conversations;
-
-      // Load active projects
-      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);
-
-      // Update realtime stats
-      this.updateRealtimeStats();
-
-      console.log(chalk.green('✅ Data analysis complete'));
-      console.log(chalk.gray(`Found ${conversations.length} conversations across ${projects.length} projects`));
+      // Store previous data for comparison
+      const previousData = this.data;
+      
+      // Use ConversationAnalyzer to load and analyze all data
+      const analyzedData = await this.conversationAnalyzer.loadInitialData(
+        this.stateCalculator,
+        this.processDetector
+      );
+      
+      // Update our data structure with analyzed data
+      this.data = analyzedData;
+      
+      // Get Claude session information
+      const claudeSessionInfo = await this.getClaudeSessionInfo();
+      
+      // Analyze session data for Max plan usage tracking with real Claude session info
+      this.data.sessionData = this.sessionAnalyzer.analyzeSessionData(this.data.conversations, claudeSessionInfo);
+      
+      // Send real-time notifications if WebSocket is available
+      if (this.notificationManager) {
+        this.notificationManager.notifyDataRefresh(this.data, 'data_refresh');
+        
+        // Check for conversation state changes
+        this.detectAndNotifyStateChanges(previousData, this.data);
+      }
 
     } catch (error) {
       console.error(chalk.red('Error loading Claude data:'), error.message);
@@ -69,102 +98,6 @@ class ClaudeAnalytics {
     }
   }
 
-  async loadConversations() {
-    const conversations = [];
-
-    try {
-      // Search for .jsonl files recursively in all subdirectories
-      const findJsonlFiles = async (dir) => {
-        const files = [];
-        const items = await fs.readdir(dir);
-
-        for (const item of items) {
-          const itemPath = path.join(dir, item);
-          const stats = await fs.stat(itemPath);
-
-          if (stats.isDirectory()) {
-            // Recursively search subdirectories
-            const subFiles = await findJsonlFiles(itemPath);
-            files.push(...subFiles);
-          } else if (item.endsWith('.jsonl')) {
-            files.push(itemPath);
-          }
-        }
-
-        return files;
-      };
-
-      const jsonlFiles = await findJsonlFiles(this.claudeDir);
-      console.log(chalk.blue(`Found ${jsonlFiles.length} conversation files`));
-
-      for (const filePath of jsonlFiles) {
-        const stats = await fs.stat(filePath);
-        const filename = path.basename(filePath);
-
-        try {
-          const content = await fs.readFile(filePath, 'utf8');
-          const lines = content.trim().split('\n').filter(line => line.trim());
-          const messages = lines.map(line => {
-            try {
-              return JSON.parse(line);
-            } catch {
-              return null;
-            }
-          }).filter(Boolean);
-
-          // Extract project name from path
-          const projectFromPath = this.extractProjectFromPath(filePath);
-
-          // Parse messages to get their content for status determination
-          const parsedMessages = lines.map(line => {
-            try {
-              const item = JSON.parse(line);
-              if (item.message && item.message.role) {
-                return {
-                  role: item.message.role,
-                  timestamp: new Date(item.timestamp),
-                  content: item.message.content,
-                  model: item.message.model || null,
-                  usage: item.message.usage || null,
-                };
-              }
-            } catch {}
-            return null;
-          }).filter(Boolean);
-
-          // Calculate real token usage and extract model info
-          const tokenUsage = this.calculateRealTokenUsage(parsedMessages);
-          const modelInfo = this.extractModelInfo(parsedMessages);
-
-          const conversation = {
-            id: filename.replace('.jsonl', ''),
-            filename: filename,
-            filePath: filePath,
-            messageCount: parsedMessages.length,
-            fileSize: stats.size,
-            lastModified: stats.mtime,
-            created: stats.birthtime,
-            tokens: tokenUsage.total > 0 ? tokenUsage.total : this.estimateTokens(content),
-            tokenUsage: tokenUsage,
-            modelInfo: modelInfo,
-            project: projectFromPath || this.extractProjectFromConversation(parsedMessages),
-            status: this.determineConversationStatus(parsedMessages, stats.mtime),
-            conversationState: this.determineConversationState(parsedMessages, stats.mtime),
-            statusSquares: this.generateStatusSquares(parsedMessages),
-          };
-
-          conversations.push(conversation);
-        } catch (error) {
-          console.warn(chalk.yellow(`Warning: Could not parse ${filename}:`, error.message));
-        }
-      }
-
-      return conversations.sort((a, b) => b.lastModified - a.lastModified);
-    } catch (error) {
-      console.error(chalk.red('Error loading conversations:'), error.message);
-      return [];
-    }
-  }
 
   async loadActiveProjects() {
     const projects = [];
@@ -231,7 +164,7 @@ class ClaudeAnalytics {
     });
 
     return {
-      total: totalInputTokens + totalOutputTokens,
+      total: totalInputTokens + totalOutputTokens + totalCacheCreationTokens + totalCacheReadTokens,
       inputTokens: totalInputTokens,
       outputTokens: totalOutputTokens,
       cacheCreationTokens: totalCacheCreationTokens,
@@ -241,6 +174,42 @@ class ClaudeAnalytics {
     };
   }
 
+  calculateDetailedTokenUsage() {
+    if (!this.data || !this.data.conversations) {
+      return null;
+    }
+
+    let totalInputTokens = 0;
+    let totalOutputTokens = 0;
+    let totalCacheCreationTokens = 0;
+    let totalCacheReadTokens = 0;
+    let totalMessages = 0;
+    let messagesWithUsage = 0;
+
+    this.data.conversations.forEach(conversation => {
+      if (conversation.tokenUsage) {
+        totalInputTokens += conversation.tokenUsage.inputTokens || 0;
+        totalOutputTokens += conversation.tokenUsage.outputTokens || 0;
+        totalCacheCreationTokens += conversation.tokenUsage.cacheCreationTokens || 0;
+        totalCacheReadTokens += conversation.tokenUsage.cacheReadTokens || 0;
+        messagesWithUsage += conversation.tokenUsage.messagesWithUsage || 0;
+        totalMessages += conversation.tokenUsage.totalMessages || 0;
+      }
+    });
+
+    const total = totalInputTokens + totalOutputTokens + totalCacheCreationTokens + totalCacheReadTokens;
+
+    return {
+      total,
+      inputTokens: totalInputTokens,
+      outputTokens: totalOutputTokens,
+      cacheCreationTokens: totalCacheCreationTokens,
+      cacheReadTokens: totalCacheReadTokens,
+      messagesWithUsage,
+      totalMessages
+    };
+  }
+
   extractModelInfo(parsedMessages) {
     const models = new Set();
     const serviceTiers = new Set();
@@ -288,111 +257,8 @@ 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
-      for (const conversation of this.data.conversations) {
-        // 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';
-          }
-          
-          // Recalculate conversation state with process information
-          const conversationFile = path.join(this.claudeDir, conversation.fileName);
-          try {
-            const content = await fs.readFile(conversationFile, 'utf8');
-            const parsedMessages = content.split('\n')
-              .filter(line => line.trim())
-              .map(line => JSON.parse(line));
-            
-            const stats = await fs.stat(conversationFile);
-            conversation.conversationState = this.determineConversationState(
-              parsedMessages, 
-              stats.mtime, 
-              conversation.runningProcess
-            );
-          } catch (error) {
-            // If we can't read the file, keep the existing state
-          }
-        } 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
@@ -407,100 +273,7 @@ class ClaudeAnalytics {
     return 'Unknown';
   }
 
-  determineConversationStatus(messages, lastModified) {
-    const now = new Date();
-    const timeDiff = now - lastModified;
-    const minutesAgo = timeDiff / (1000 * 60);
-
-    if (messages.length === 0) {
-      return minutesAgo < 5 ? 'active' : 'inactive';
-    }
-
-    // Sort messages by timestamp to get the actual conversation flow
-    const sortedMessages = messages.sort((a, b) => new Date(a.timestamp) - new Date(b.timestamp));
-    const lastMessage = sortedMessages[sortedMessages.length - 1];
-    const lastMessageTime = new Date(lastMessage.timestamp);
-    const lastMessageMinutesAgo = (now - lastMessageTime) / (1000 * 60);
-
-    // 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';
-    }
-
-    // Use file modification time for recent activity
-    if (minutesAgo < 5) return 'active';
-    if (minutesAgo < 30) return 'recent';
-    return 'inactive';
-  }
-
-  determineConversationState(messages, lastModified, runningProcess = null) {
-    const now = new Date();
-    const timeDiff = now - lastModified;
-    const minutesAgo = timeDiff / (1000 * 60);
-
-    // If there's an active process, use simpler and more responsive logic
-    if (runningProcess && runningProcess.hasActiveCommand) {
-      const fileTimeDiff = (now - lastModified) / 1000; // seconds
-      
-      // Very recent file activity = Claude working
-      if (fileTimeDiff < 10) {
-        return 'Claude Code working...';
-      }
-      
-      // Check conversation flow if we have messages
-      if (messages.length > 0) {
-        const sortedMessages = messages.sort((a, b) => new Date(a.timestamp) - new Date(b.timestamp));
-        const lastMessage = sortedMessages[sortedMessages.length - 1];
-        
-        if (lastMessage.role === 'assistant') {
-          // Claude responded, user should be typing or thinking
-          return 'User typing...';
-        } else if (lastMessage.role === 'user') {
-          // User sent message, Claude should be working
-          return 'Claude Code working...';
-        }
-      }
-      
-      // Fallback for active process
-      return 'Awaiting user input...';
-    }
-
-    if (messages.length === 0) {
-      return minutesAgo < 5 ? 'Waiting for input...' : 'Idle';
-    }
-
-    // Sort messages by timestamp to get the actual conversation flow
-    const sortedMessages = messages.sort((a, b) => new Date(a.timestamp) - new Date(b.timestamp));
-    const lastMessage = sortedMessages[sortedMessages.length - 1];
-    const lastMessageTime = new Date(lastMessage.timestamp);
-    const lastMessageMinutesAgo = (now - lastMessageTime) / (1000 * 60);
-
-    // Detailed conversation state logic
-    if (lastMessage.role === 'user') {
-      // User sent last message
-      if (lastMessageMinutesAgo < 0.5) {
-        return 'Claude Code working...';
-      } else if (lastMessageMinutesAgo < 3) {
-        return 'Awaiting response...';
-      } else {
-        return 'User typing...';
-      }
-    } else if (lastMessage.role === 'assistant') {
-      // Assistant sent last message
-      if (lastMessageMinutesAgo < 2) {
-        return 'Awaiting user input...';
-      } else if (lastMessageMinutesAgo < 5) {
-        return 'User may be typing...';
-      }
-    }
 
-    // Fallback states
-    if (minutesAgo < 5) return 'Recently active';
-    if (minutesAgo < 60) return 'Idle';
-    return 'Inactive';
-  }
 
   generateStatusSquares(messages) {
     if (!messages || messages.length === 0) {
@@ -722,76 +495,58 @@ class ClaudeAnalytics {
   }
 
   setupFileWatchers() {
-    console.log(chalk.blue('👀 Setting up file watchers for real-time updates...'));
-
-    // Watch conversation files recursively in all subdirectories
-    const conversationWatcher = chokidar.watch([
-      path.join(this.claudeDir, '**/*.jsonl')
-    ], {
-      persistent: true,
-      ignoreInitial: true,
-    });
-
-    conversationWatcher.on('change', async () => {
-      console.log(chalk.yellow('🔄 Conversation file changed, updating data...'));
-      await this.loadInitialData();
-      console.log(chalk.green('✅ Data updated'));
-    });
-
-    conversationWatcher.on('add', async () => {
-      console.log(chalk.yellow('📝 New conversation file detected...'));
-      await this.loadInitialData();
-      console.log(chalk.green('✅ Data updated'));
-    });
-
-    this.watchers.push(conversationWatcher);
-
-    // Watch project directories
-    const projectWatcher = chokidar.watch(this.claudeDir, {
-      persistent: true,
-      ignoreInitial: true,
-      depth: 2, // Increased depth to catch subdirectories
-    });
-
-    projectWatcher.on('addDir', async () => {
-      console.log(chalk.yellow('📁 New project directory detected...'));
-      await this.loadInitialData();
-      console.log(chalk.green('✅ Data updated'));
-    });
-
-    projectWatcher.on('change', async () => {
-      console.log(chalk.yellow('📁 Project directory changed...'));
-      await this.loadInitialData();
-      console.log(chalk.green('✅ Data updated'));
-    });
-
-    this.watchers.push(projectWatcher);
-
-    // Also set up periodic refresh to catch any missed changes
-    setInterval(async () => {
-      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);
+    // Setup file watchers using the FileWatcher module
+    this.fileWatcher.setupFileWatchers(
+      this.claudeDir,
+      // Data refresh callback
+      async () => {
+        await this.loadInitialData();
+      },
+      // Process refresh callback
+      async () => {
+        const enrichmentResult = await this.processDetector.enrichWithRunningProcesses(
+          this.data.conversations, 
+          this.claudeDir, 
+          this.stateCalculator
+        );
+        this.data.conversations = enrichmentResult.conversations;
+        this.data.orphanProcesses = enrichmentResult.orphanProcesses;
+      },
+      // DataCache for cache invalidation
+      this.dataCache
+    );
   }
 
   setupWebServer() {
+    // Add performance monitoring middleware
+    this.app.use(this.performanceMonitor.createExpressMiddleware());
+    
     // Serve static files (we'll create the dashboard HTML)
     this.app.use(express.static(path.join(__dirname, 'analytics-web')));
 
     // API endpoints
     this.app.get('/api/data', async (req, res) => {
-      // Add timestamp to verify data freshness
-      const dataWithTimestamp = {
-        ...this.data,
-        timestamp: new Date().toISOString(),
-        lastUpdate: new Date().toLocaleString(),
-      };
-      res.json(dataWithTimestamp);
+      try {
+        // Calculate detailed token usage
+        const detailedTokenUsage = this.calculateDetailedTokenUsage();
+        
+        // Add timestamp to verify data freshness
+        const dataWithTimestamp = {
+          ...this.data,
+          detailedTokenUsage,
+          timestamp: new Date().toISOString(),
+          lastUpdate: new Date().toLocaleString(),
+        };
+        res.json(dataWithTimestamp);
+      } catch (error) {
+        console.error('Error calculating detailed token usage:', error);
+        res.json({
+          ...this.data,
+          detailedTokenUsage: null,
+          timestamp: new Date().toISOString(),
+          lastUpdate: new Date().toLocaleString(),
+        });
+      }
     });
 
     this.app.get('/api/realtime', async (req, res) => {
@@ -814,25 +569,98 @@ class ClaudeAnalytics {
       });
     });
 
-    // Session detail endpoint
-    this.app.get('/api/session/:sessionId', async (req, res) => {
-      const sessionId = req.params.sessionId;
+    // NEW: Ultra-fast endpoint ONLY for conversation states
+    this.app.get('/api/conversation-state', async (req, res) => {
+      try {
+        // Only detect processes and calculate states - no file reading
+        const runningProcesses = await this.processDetector.detectRunningClaudeProcesses();
+        const activeStates = [];
+        
+        // Quick state calculation for active conversations only
+        for (const conversation of this.data.conversations) {
+          if (conversation.runningProcess) {
+            // Use existing state calculation but faster
+            const state = this.stateCalculator.quickStateCalculation(conversation, runningProcesses);
+            if (state) {
+              activeStates.push({
+                id: conversation.id,
+                project: conversation.project,
+                state: state,
+                timestamp: Date.now()
+              });
+            }
+          }
+        }
+        
+        res.json({ activeStates, timestamp: Date.now() });
+      } catch (error) {
+        res.status(500).json({ error: 'Failed to get conversation states' });
+      }
+    });
+
+    // Session data endpoint for Max plan usage tracking
+    this.app.get('/api/session/data', async (req, res) => {
+      try {
+        // Get real-time Claude session information
+        const claudeSessionInfo = await this.getClaudeSessionInfo();
+        
+        if (!this.data.sessionData) {
+          // Generate session data if not available
+          this.data.sessionData = this.sessionAnalyzer.analyzeSessionData(this.data.conversations, claudeSessionInfo);
+        }
+
+        const timerData = this.sessionAnalyzer.getSessionTimerData(this.data.sessionData);
+        
+        res.json({
+          ...this.data.sessionData,
+          timer: timerData,
+          claudeSessionInfo: claudeSessionInfo,
+          timestamp: Date.now()
+        });
+      } catch (error) {
+        console.error('Session data error:', error);
+        res.status(500).json({ 
+          error: 'Failed to get session data',
+          timestamp: Date.now()
+        });
+      }
+    });
 
+    // Get specific conversation history
+    this.app.get('/api/session/:id', async (req, res) => {
       try {
-        const session = this.data.conversations.find(conv => conv.id === sessionId);
-        if (!session) {
-          return res.status(404).json({
-            error: 'Session not found'
+        const conversationId = req.params.id;
+        
+        // Find the conversation
+        const conversation = this.data.conversations.find(conv => conv.id === conversationId);
+        if (!conversation) {
+          return res.status(404).json({ error: 'Conversation not found' });
+        }
+
+        // Read the conversation file to get full message history
+        const conversationFile = conversation.filePath;
+        
+        if (!conversationFile) {
+          return res.status(404).json({ 
+            error: 'Conversation file path not found',
+            conversationId: conversationId,
+            conversationKeys: Object.keys(conversation),
+            hasFilePath: !!conversation.filePath,
+            hasFileName: !!conversation.filename
           });
         }
+        
+        if (!await fs.pathExists(conversationFile)) {
+          return res.status(404).json({ error: 'Conversation file not found', path: conversationFile });
+        }
 
-        // Read the actual conversation file
-        const content = await fs.readFile(session.filePath, 'utf8');
+        const content = await fs.readFile(conversationFile, 'utf8');
         const lines = content.trim().split('\n').filter(line => line.trim());
         const rawMessages = lines.map(line => {
           try {
             return JSON.parse(line);
-          } catch {
+          } catch (error) {
+            console.warn('Error parsing message line:', error);
             return null;
           }
         }).filter(Boolean);
@@ -853,7 +681,7 @@ class ClaudeAnalytics {
                   return block.content || '';
                 })
                 .join('\n');
-            } else if (item.message.content && item.message.content.length) {
+            } else if (item.message.content && typeof item.message.content === 'object' && item.message.content.length) {
               content = item.message.content[0].text || '';
             }
 
@@ -862,61 +690,432 @@ class ClaudeAnalytics {
               content: content || 'No content',
               timestamp: item.timestamp,
               type: item.type,
+              stop_reason: item.message.stop_reason || null,
+              message_id: item.message.id || null,
+              model: item.message.model || null,
+              usage: item.message.usage || null,
+              hasToolUse: item.message.content && Array.isArray(item.message.content) && 
+                         item.message.content.some(block => block.type === 'tool_use'),
+              hasToolResult: item.message.content && Array.isArray(item.message.content) && 
+                            item.message.content.some(block => block.type === 'tool_result'),
+              contentBlocks: item.message.content && Array.isArray(item.message.content) ? 
+                            item.message.content.map(block => ({ type: block.type, name: block.name || null })) : [],
+              rawContent: item.message.content || null,
+              parentUuid: item.parentUuid || null,
+              uuid: item.uuid || null,
+              sessionId: item.sessionId || null,
+              userType: item.userType || null,
+              cwd: item.cwd || null,
+              version: item.version || null,
+              isCompactSummary: item.isCompactSummary || false,
+              isSidechain: item.isSidechain || false
             };
           }
           return null;
         }).filter(Boolean);
 
+
         res.json({
-          session: session,
+          conversation: {
+            id: conversation.id,
+            project: conversation.project,
+            messageCount: conversation.messageCount,
+            tokens: conversation.tokens,
+            created: conversation.created,
+            lastModified: conversation.lastModified,
+            status: conversation.status
+          },
           messages: messages,
-          timestamp: new Date().toISOString(),
+          timestamp: Date.now()
         });
 
       } catch (error) {
-        console.error(chalk.red('Error loading session details:'), error.message);
-        res.status(500).json({
-          error: 'Failed to load session details'
+        console.error('Error getting conversation history:', error);
+        console.error('Error stack:', error.stack);
+        res.status(500).json({ 
+          error: 'Failed to load conversation history',
+          details: error.message,
+          stack: error.stack
         });
       }
     });
 
-    // Main dashboard route
-    this.app.get('/', (req, res) => {
-      res.sendFile(path.join(__dirname, 'analytics-web', 'index.html'));
-    });
-  }
-
-  async startServer() {
-    return new Promise((resolve) => {
-      this.server = this.app.listen(this.port, () => {
-        console.log(chalk.green(`🚀 Analytics dashboard started at http://localhost:${this.port}`));
-        resolve();
-      });
+    // Fast state update endpoint - only updates conversation states without full reload
+    this.app.get('/api/fast-update', async (req, res) => {
+      try {
+        // Update process information and conversation states
+        const enrichmentResult = await this.processDetector.enrichWithRunningProcesses(
+          this.data.conversations, 
+          this.claudeDir, 
+          this.stateCalculator
+        );
+        this.data.conversations = enrichmentResult.conversations;
+        this.data.orphanProcesses = enrichmentResult.orphanProcesses;
+        
+        // For active conversations, re-read the files to get latest messages
+        const activeConversations = this.data.conversations.filter(c => c.runningProcess);
+        
+        for (const conv of activeConversations) {
+          try {
+            const conversationFile = path.join(this.claudeDir, conv.fileName);
+            const content = await fs.readFile(conversationFile, 'utf8');
+            const parsedMessages = content.split('\n')
+              .filter(line => line.trim())
+              .map(line => JSON.parse(line));
+            
+            const stats = await fs.stat(conversationFile);
+            conv.conversationState = this.stateCalculator.determineConversationState(
+              parsedMessages, 
+              stats.mtime, 
+              conv.runningProcess
+            );
+            
+          } catch (error) {
+            // If we can't read the file, keep the existing state
+          }
+        }
+        
+        // Only log when there are actually active conversations (reduce noise)
+        const activeConvs = this.data.conversations.filter(c => c.runningProcess);
+        if (activeConvs.length > 0) {
+          // Only log every 10th update to reduce spam, or when states change
+          if (!this.lastLoggedStates) this.lastLoggedStates = new Map();
+          
+          let hasChanges = false;
+          activeConvs.forEach(conv => {
+            const lastState = this.lastLoggedStates.get(conv.id);
+            if (lastState !== conv.conversationState) {
+              hasChanges = true;
+              this.lastLoggedStates.set(conv.id, conv.conversationState);
+            }
+          });
+          
+          if (hasChanges) {
+            console.log(chalk.gray(`⚡ State update: ${activeConvs.length} active conversations`));
+            activeConvs.forEach(conv => {
+              console.log(chalk.gray(`  📊 ${conv.project}: ${conv.conversationState}`));
+            });
+          }
+        }
+        
+        const dataWithTimestamp = {
+          conversations: this.data.conversations,
+          summary: this.data.summary,
+          timestamp: new Date().toISOString(),
+          lastUpdate: new Date().toLocaleString(),
+        };
+        res.json(dataWithTimestamp);
+      } catch (error) {
+        console.error('Fast update error:', error);
+        res.status(500).json({ error: 'Failed to update states' });
+      }
     });
-  }
 
-  async openBrowser() {
-    try {
-      await open(`http://localhost:${this.port}`);
-      console.log(chalk.blue('🌐 Opening browser...'));
-    } catch (error) {
-      console.log(chalk.yellow('Could not open browser automatically. Please visit:'));
-      console.log(chalk.cyan(`http://localhost:${this.port}`));
-    }
-  }
+    // Remove duplicate endpoint - this conflicts with the correct one above
 
-  stop() {
-    // Clean up watchers
-    this.watchers.forEach(watcher => watcher.close());
+    // System health endpoint
+    this.app.get('/api/system/health', (req, res) => {
+      try {
+        const stats = this.performanceMonitor.getStats();
+        const systemHealth = {
+          status: 'healthy',
+          uptime: stats.uptime,
+          memory: stats.memory,
+          requests: stats.requests,
+          cache: {
+            ...stats.cache,
+            dataCache: this.dataCache.getStats()
+          },
+          errors: stats.errors,
+          counters: stats.counters,
+          timestamp: Date.now()
+        };
 
-    // Stop server
-    if (this.server) {
-      this.server.close();
-    }
+        // Determine overall health status
+        if (stats.errors.total > 10) {
+          systemHealth.status = 'degraded';
+        }
+        if (stats.memory.current && stats.memory.current.heapUsed > this.performanceMonitor.options.memoryThreshold) {
+          systemHealth.status = 'warning';
+        }
 
-    console.log(chalk.yellow('Analytics dashboard stopped'));
-  }
+        res.json(systemHealth);
+      } catch (error) {
+        res.status(500).json({
+          status: 'error',
+          message: 'Failed to get system health',
+          timestamp: Date.now()
+        });
+      }
+    });
+
+    // Version endpoint
+    this.app.get('/api/version', (req, res) => {
+      res.json({
+        version: packageJson.version,
+        name: packageJson.name,
+        description: packageJson.description,
+        timestamp: Date.now()
+      });
+    });
+
+    // Claude session information endpoint
+    this.app.get('/api/claude/session', async (req, res) => {
+      try {
+        const sessionInfo = await this.getClaudeSessionInfo();
+        res.json({
+          ...sessionInfo,
+          timestamp: Date.now()
+        });
+      } catch (error) {
+        console.error('Error getting Claude session info:', error);
+        res.status(500).json({ 
+          error: 'Failed to get Claude session info',
+          timestamp: Date.now()
+        });
+      }
+    });
+
+    // Performance metrics endpoint
+    this.app.get('/api/system/metrics', (req, res) => {
+      try {
+        const timeframe = parseInt(req.query.timeframe) || 300000; // 5 minutes default
+        const stats = this.performanceMonitor.getStats(timeframe);
+        res.json({
+          ...stats,
+          dataCache: this.dataCache.getStats(),
+          timestamp: Date.now()
+        });
+      } catch (error) {
+        res.status(500).json({
+          error: 'Failed to get performance metrics',
+          timestamp: Date.now()
+        });
+      }
+    });
+
+    // Main dashboard route
+    this.app.get('/', (req, res) => {
+      res.sendFile(path.join(__dirname, 'analytics-web', 'index.html'));
+    });
+  }
+
+  async startServer() {
+    return new Promise(async (resolve) => {
+      this.httpServer = this.app.listen(this.port, async () => {
+        console.log(chalk.green(`🚀 Analytics dashboard started at http://localhost:${this.port}`));
+        
+        // Initialize WebSocket server
+        await this.initializeWebSocket();
+        
+        resolve();
+      });
+      // Keep reference for compatibility
+      this.server = this.httpServer;
+    });
+  }
+
+  async openBrowser() {
+    try {
+      await open(`http://localhost:${this.port}`);
+      console.log(chalk.blue('🌐 Opening browser...'));
+    } catch (error) {
+      console.log(chalk.yellow('Could not open browser automatically. Please visit:'));
+      console.log(chalk.cyan(`http://localhost:${this.port}`));
+    }
+  }
+
+  /**
+   * Initialize WebSocket server and notification manager
+   */
+  async initializeWebSocket() {
+    try {
+      // Initialize WebSocket server with performance monitoring
+      this.webSocketServer = new WebSocketServer(this.httpServer, {
+        path: '/ws',
+        heartbeatInterval: 30000
+      }, this.performanceMonitor);
+      await this.webSocketServer.initialize();
+      
+      // Initialize notification manager
+      this.notificationManager = new NotificationManager(this.webSocketServer);
+      await this.notificationManager.initialize();
+      
+      // Setup notification subscriptions
+      this.setupNotificationSubscriptions();
+      
+      console.log(chalk.green('✅ WebSocket and notifications initialized'));
+    } catch (error) {
+      console.error(chalk.red('❌ Failed to initialize WebSocket:'), error);
+    }
+  }
+  
+  /**
+   * Setup notification subscriptions
+   */
+  setupNotificationSubscriptions() {
+    // Subscribe to refresh requests from WebSocket clients
+    this.notificationManager.subscribe('refresh_requested', async (notification) => {
+      console.log(chalk.blue('🔄 Refresh requested via WebSocket'));
+      await this.loadInitialData();
+      
+      // Notify clients of the refreshed data
+      this.notificationManager.notifyDataRefresh(this.data, 'websocket_request');
+    });
+  }
+
+  /**
+   * Detect and notify conversation state changes
+   * @param {Object} previousData - Previous data state
+   * @param {Object} currentData - Current data state
+   */
+  detectAndNotifyStateChanges(previousData, currentData) {
+    if (!previousData || !previousData.conversations || !currentData || !currentData.conversations) {
+      return;
+    }
+    
+    // Create maps for easier lookup
+    const previousConversations = new Map();
+    previousData.conversations.forEach(conv => {
+      previousConversations.set(conv.id, conv);
+    });
+    
+    // Check for state changes
+    currentData.conversations.forEach(currentConv => {
+      const previousConv = previousConversations.get(currentConv.id);
+      
+      if (previousConv && previousConv.status !== currentConv.status) {
+        // State changed - notify clients
+        this.notificationManager.notifyConversationStateChange(
+          currentConv.id,
+          previousConv.status,
+          currentConv.status,
+          {
+            project: currentConv.project,
+            tokens: currentConv.tokens,
+            lastModified: currentConv.lastModified
+          }
+        );
+      }
+    });
+  }
+
+  /**
+   * Get Claude session information from statsig files
+   */
+  async getClaudeSessionInfo() {
+    try {
+      if (!await fs.pathExists(this.claudeStatsigDir)) {
+        return {
+          hasSession: false,
+          error: 'Claude statsig directory not found'
+        };
+      }
+
+      const files = await fs.readdir(this.claudeStatsigDir);
+      const sessionFile = files.find(file => file.startsWith('statsig.session_id.'));
+      
+      if (!sessionFile) {
+        return {
+          hasSession: false,
+          error: 'No session file found'
+        };
+      }
+
+      const sessionFilePath = path.join(this.claudeStatsigDir, sessionFile);
+      const sessionData = await fs.readFile(sessionFilePath, 'utf8');
+      const sessionInfo = JSON.parse(sessionData);
+
+      const now = Date.now();
+      const startTime = sessionInfo.startTime;
+      const lastUpdate = sessionInfo.lastUpdate;
+      
+      // Calculate session duration
+      const sessionDuration = now - startTime;
+      const sessionDurationMinutes = Math.floor(sessionDuration / (1000 * 60));
+      const sessionDurationHours = Math.floor(sessionDurationMinutes / 60);
+      const remainingMinutes = sessionDurationMinutes % 60;
+      
+      // Calculate time since last update
+      const timeSinceLastUpdate = now - lastUpdate;
+      const timeSinceLastUpdateMinutes = Math.floor(timeSinceLastUpdate / (1000 * 60));
+      
+      // Based on observed pattern: ~2 hours and 21 minutes session limit
+      const sessionLimitMs = 2 * 60 * 60 * 1000 + 21 * 60 * 1000; // 2h 21m
+      const timeRemaining = sessionLimitMs - sessionDuration;
+      const timeRemainingMinutes = Math.floor(timeRemaining / (1000 * 60));
+      const timeRemainingHours = Math.floor(timeRemainingMinutes / 60);
+      const remainingMinutesDisplay = timeRemainingMinutes % 60;
+      
+      return {
+        hasSession: true,
+        sessionId: sessionInfo.sessionID,
+        startTime: startTime,
+        lastUpdate: lastUpdate,
+        sessionDuration: {
+          ms: sessionDuration,
+          minutes: sessionDurationMinutes,
+          hours: sessionDurationHours,
+          remainingMinutes: remainingMinutes,
+          formatted: `${sessionDurationHours}h ${remainingMinutes}m`
+        },
+        timeSinceLastUpdate: {
+          ms: timeSinceLastUpdate,
+          minutes: timeSinceLastUpdateMinutes,
+          formatted: `${timeSinceLastUpdateMinutes}m`
+        },
+        estimatedTimeRemaining: {
+          ms: timeRemaining,
+          minutes: timeRemainingMinutes,
+          hours: timeRemainingHours,
+          remainingMinutes: remainingMinutesDisplay,
+          formatted: timeRemaining > 0 ? `${timeRemainingHours}h ${remainingMinutesDisplay}m` : 'Session expired',
+          isExpired: timeRemaining <= 0
+        },
+        sessionLimit: {
+          ms: sessionLimitMs,
+          hours: 2,
+          minutes: 21,
+          formatted: '2h 21m'
+        }
+      };
+    } catch (error) {
+      return {
+        hasSession: false,
+        error: `Failed to read session info: ${error.message}`
+      };
+    }
+  }
+
+  stop() {
+    // Stop file watchers
+    this.fileWatcher.stop();
+
+    // Stop server
+    // Close WebSocket server
+    if (this.webSocketServer) {
+      this.webSocketServer.close();
+    }
+    
+    // Shutdown notification manager
+    if (this.notificationManager) {
+      this.notificationManager.shutdown();
+    }
+    
+    if (this.httpServer) {
+      this.httpServer.close();
+    }
+    
+    // Keep compatibility
+    if (this.server) {
+      this.server.close();
+    }
+
+    // Log cache statistics before stopping
+    this.dataCache.logStats();
+
+    console.log(chalk.yellow('Analytics dashboard stopped'));
+  }
 }
 
 async function runAnalytics(options = {}) {
@@ -928,7 +1127,7 @@ async function runAnalytics(options = {}) {
     await analytics.initialize();
 
     // Create web dashboard files
-    await createWebDashboard();
+    // Web dashboard files are now static in analytics-web directory
 
     await analytics.startServer();
     await analytics.openBrowser();
@@ -952,1896 +1151,6 @@ async function runAnalytics(options = {}) {
   }
 }
 
-async function createWebDashboard() {
-  const webDir = path.join(__dirname, 'analytics-web');
-  await fs.ensureDir(webDir);
-
-  // Create the HTML dashboard
-  const htmlContent = `<!DOCTYPE html>
-<html lang="en">
-<head>
-    <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;
-            padding: 0;
-            box-sizing: border-box;
-        }
-        
-        body {
-            font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
-            background: #0d1117;
-            color: #c9d1d9;
-            min-height: 100vh;
-            line-height: 1.4;
-        }
-        
-        .terminal {
-            max-width: 1400px;
-            margin: 0 auto;
-            padding: 20px;
-        }
-        
-        .terminal-header {
-            border-bottom: 1px solid #30363d;
-            padding-bottom: 20px;
-            margin-bottom: 20px;
-            position: relative;
-        }
-        
-        .terminal-title {
-            color: #d57455;
-            font-size: 1.25rem;
-            font-weight: normal;
-            display: flex;
-            align-items: center;
-            gap: 8px;
-        }
-        
-        .status-dot {
-            width: 8px;
-            height: 8px;
-            border-radius: 50%;
-            background: #3fb950;
-            animation: pulse 2s infinite;
-        }
-        
-        @keyframes pulse {
-            0%, 100% { opacity: 1; }
-            50% { opacity: 0.6; }
-        }
-        
-        .terminal-subtitle {
-            color: #7d8590;
-            font-size: 0.875rem;
-            margin-top: 4px;
-        }
-        
-        .github-star-btn {
-            position: absolute;
-            top: 0;
-            right: 0;
-            background: #21262d;
-            border: 1px solid #30363d;
-            color: #c9d1d9;
-            padding: 8px 12px;
-            border-radius: 6px;
-            text-decoration: none;
-            font-family: inherit;
-            font-size: 0.875rem;
-            display: flex;
-            align-items: center;
-            gap: 6px;
-            transition: all 0.2s ease;
-            cursor: pointer;
-        }
-        
-        .github-star-btn:hover {
-            border-color: #d57455;
-            background: #30363d;
-            color: #d57455;
-            text-decoration: none;
-        }
-        
-        .github-star-btn .star-icon {
-            font-size: 0.75rem;
-        }
-        
-        .stats-bar {
-            display: flex;
-            gap: 40px;
-            margin: 20px 0;
-            flex-wrap: wrap;
-        }
-        
-        .stat {
-            display: flex;
-            align-items: center;
-            gap: 8px;
-        }
-        
-        .stat-label {
-            color: #7d8590;
-            font-size: 0.875rem;
-        }
-        
-        .stat-value {
-            color: #d57455;
-            font-weight: bold;
-        }
-        
-        .stat-sublabel {
-            color: #7d8590;
-            font-size: 0.75rem;
-            display: block;
-            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;
-            gap: 16px;
-            margin: 20px 0;
-            padding: 12px 0;
-            border-top: 1px solid #21262d;
-            border-bottom: 1px solid #21262d;
-        }
-        
-        .filter-label {
-            color: #7d8590;
-            font-size: 0.875rem;
-        }
-        
-        .filter-buttons {
-            display: flex;
-            gap: 8px;
-        }
-        
-        .filter-btn {
-            background: none;
-            border: 1px solid #30363d;
-            color: #7d8590;
-            padding: 4px 12px;
-            border-radius: 4px;
-            cursor: pointer;
-            font-family: inherit;
-            font-size: 0.875rem;
-            transition: all 0.2s ease;
-        }
-        
-        .filter-btn:hover {
-            border-color: #d57455;
-            color: #d57455;
-        }
-        
-        .filter-btn.active {
-            background: #d57455;
-            border-color: #d57455;
-            color: #0d1117;
-        }
-        
-        .sessions-table {
-            width: 100%;
-            border-collapse: collapse;
-        }
-        
-        .sessions-table th {
-            text-align: left;
-            padding: 8px 12px;
-            color: #7d8590;
-            font-size: 0.875rem;
-            font-weight: normal;
-            border-bottom: 1px solid #30363d;
-        }
-        
-        .sessions-table td {
-            padding: 8px 12px;
-            font-size: 0.875rem;
-            border-bottom: 1px solid #21262d;
-        }
-        
-        .sessions-table tr:hover {
-            background: #161b22;
-        }
-        
-        .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 {
-            display: flex;
-            flex-direction: column;
-            gap: 4px;
-        }
-        
-        .session-project {
-            color: #c9d1d9;
-        }
-        
-        .session-model {
-            color: #a5d6ff;
-            font-size: 0.8rem;
-            max-width: 150px;
-            white-space: nowrap;
-            overflow: hidden;
-            text-overflow: ellipsis;
-        }
-        
-        .session-messages {
-            color: #7d8590;
-        }
-        
-        .session-tokens {
-            color: #f85149;
-        }
-        
-        .session-time {
-            color: #7d8590;
-            font-size: 0.8rem;
-        }
-        
-        .status-active {
-            color: #3fb950;
-            font-weight: bold;
-        }
-        
-        .status-recent {
-            color: #d29922;
-        }
-        
-        .status-inactive {
-            color: #7d8590;
-        }
-        
-        .conversation-state {
-            color: #d57455;
-            font-style: italic;
-            font-size: 0.8rem;
-        }
-        
-        .conversation-state.working {
-            animation: working-pulse 1.5s infinite;
-        }
-        
-        .conversation-state.typing {
-            animation: typing-pulse 1.5s infinite;
-        }
-        
-        @keyframes working-pulse {
-            0%, 100% { opacity: 1; }
-            50% { opacity: 0.7; }
-        }
-        
-        @keyframes typing-pulse {
-            0%, 100% { opacity: 1; }
-            50% { opacity: 0.6; }
-        }
-        
-        .status-squares {
-            display: flex;
-            gap: 2px;
-            align-items: center;
-            flex-wrap: wrap;
-            margin: 0;
-            padding: 0;
-        }
-        
-        .status-square {
-            width: 10px !important;
-            height: 10px !important;
-            min-width: 10px !important;
-            min-height: 10px !important;
-            max-width: 10px !important;
-            max-height: 10px !important;
-            border-radius: 2px;
-            cursor: help;
-            position: relative;
-            flex-shrink: 0;
-            box-sizing: border-box;
-        }
-        
-        .status-square.success {
-            background: #d57455;
-        }
-        
-        .status-square.tool {
-            background: #f97316;
-        }
-        
-        .status-square.error {
-            background: #dc2626;
-        }
-        
-        .status-square.pending {
-            background: #6b7280;
-        }
-        
-        /* Additional specificity to override any table styling */
-        .sessions-table .status-squares .status-square {
-            width: 10px !important;
-            height: 10px !important;
-            min-width: 10px !important;
-            min-height: 10px !important;
-            max-width: 10px !important;
-            max-height: 10px !important;
-            display: inline-block !important;
-            font-size: 0 !important;
-            line-height: 0 !important;
-            border: none !important;
-            outline: none !important;
-            vertical-align: top !important;
-        }
-        
-        .status-square:hover::after {
-            content: attr(data-tooltip);
-            position: absolute;
-            bottom: 100%;
-            left: 50%;
-            transform: translateX(-50%);
-            background: #1c1c1c;
-            color: #fff;
-            padding: 4px 8px;
-            border-radius: 4px;
-            font-size: 0.75rem;
-            white-space: nowrap;
-            z-index: 1000;
-            margin-bottom: 4px;
-            border: 1px solid #30363d;
-        }
-        
-        .status-square:hover::before {
-            content: '';
-            position: absolute;
-            bottom: 100%;
-            left: 50%;
-            transform: translateX(-50%);
-            border: 4px solid transparent;
-            border-top-color: #30363d;
-            z-index: 1000;
-        }
-        
-        .loading, #error {
-            text-align: center;
-            padding: 40px;
-            color: #7d8590;
-        }
-        
-        #error {
-            color: #f85149;
-        }
-        
-        .no-sessions {
-            text-align: center;
-            padding: 40px;
-            color: #7d8590;
-            font-style: italic;
-        }
-        
-        .session-detail {
-            display: none;
-            margin-top: 20px;
-        }
-        
-        .session-detail.active {
-            display: block;
-        }
-        
-        .detail-header {
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-            padding: 16px 0;
-            border-bottom: 1px solid #30363d;
-            margin-bottom: 20px;
-        }
-        
-        .detail-title {
-            color: #d57455;
-            font-size: 1.1rem;
-        }
-        
-        .detail-actions {
-            display: flex;
-            gap: 12px;
-            align-items: center;
-        }
-        
-        .export-format-select {
-            background: #21262d;
-            border: 1px solid #30363d;
-            color: #c9d1d9;
-            padding: 6px 12px;
-            border-radius: 4px;
-            font-family: inherit;
-            font-size: 0.875rem;
-            cursor: pointer;
-        }
-        
-        .export-format-select:focus {
-            outline: none;
-            border-color: #d57455;
-        }
-        
-        .export-format-select option {
-            background: #21262d;
-            color: #c9d1d9;
-        }
-        
-        .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;
-        }
-        
-        .btn:hover {
-            border-color: #d57455;
-            color: #d57455;
-        }
-        
-        .btn-primary {
-            background: #d57455;
-            border-color: #d57455;
-            color: #0d1117;
-        }
-        
-        .btn-primary:hover {
-            background: #e8956f;
-            border-color: #e8956f;
-        }
-        
-        .session-info {
-            display: grid;
-            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
-            gap: 20px;
-            margin-bottom: 30px;
-        }
-        
-        .info-item {
-            display: flex;
-            flex-direction: column;
-            gap: 4px;
-        }
-        
-        .info-label {
-            color: #7d8590;
-            font-size: 0.75rem;
-            text-transform: uppercase;
-        }
-        
-        .info-value {
-            color: #c9d1d9;
-            font-size: 0.875rem;
-        }
-
-        .info-value.model {
-            color: #a5d6ff;
-            font-weight: bold;
-        }
-        
-        .search-input {
-            width: 100%;
-            background: #21262d;
-            border: 1px solid #30363d;
-            color: #c9d1d9;
-            padding: 8px 12px;
-            border-radius: 4px;
-            font-family: inherit;
-            font-size: 0.875rem;
-            margin-bottom: 16px;
-        }
-        
-        .search-input:focus {
-            outline: none;
-            border-color: #d57455;
-        }
-        
-        .conversation-history {
-            border: 1px solid #30363d;
-            border-radius: 6px;
-            max-height: 600px;
-            overflow-y: auto;
-        }
-        
-        .message {
-            padding: 16px;
-            border-bottom: 1px solid #21262d;
-            position: relative;
-        }
-        
-        .message:last-child {
-            border-bottom: none;
-        }
-        
-        .message-header {
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-            margin-bottom: 8px;
-        }
-        
-        .message-role {
-            color: #58a6ff;
-            font-size: 0.875rem;
-            font-weight: bold;
-        }
-        
-        .message-role.user {
-            color: #3fb950;
-        }
-        
-        .message-role.assistant {
-            color: #d57455;
-        }
-        
-        .message-time {
-            color: #7d8590;
-            font-size: 0.75rem;
-        }
-        
-        .message-content {
-            color: #c9d1d9;
-            font-size: 0.875rem;
-            line-height: 1.5;
-            white-space: pre-wrap;
-            word-wrap: break-word;
-        }
-        
-        .message-type-indicator {
-            position: absolute;
-            top: 8px;
-            right: 8px;
-            width: 8px;
-            height: 8px;
-            border-radius: 2px;
-            cursor: help;
-        }
-        
-        .message-type-indicator.success {
-            background: #d57455;
-        }
-        
-        .message-type-indicator.tool {
-            background: #f97316;
-        }
-        
-        .message-type-indicator.error {
-            background: #dc2626;
-        }
-        
-        .message-type-indicator.pending {
-            background: #6b7280;
-        }
-        
-        .message-type-indicator:hover::after {
-            content: attr(data-tooltip);
-            position: absolute;
-            top: 100%;
-            right: 0;
-            background: #1c1c1c;
-            color: #fff;
-            padding: 4px 8px;
-            border-radius: 4px;
-            font-size: 0.75rem;
-            white-space: nowrap;
-            z-index: 1000;
-            margin-top: 4px;
-            border: 1px solid #30363d;
-        }
-        
-        .back-btn {
-            margin-bottom: 20px;
-        }
-        
-        @media (max-width: 768px) {
-            .stats-bar {
-                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;
-                gap: 8px;
-            }
-            
-            .sessions-table {
-                font-size: 0.8rem;
-            }
-            
-            .sessions-table th,
-            .sessions-table td {
-                padding: 6px 8px;
-            }
-            
-            .github-star-btn {
-                position: relative;
-                margin-top: 12px;
-                align-self: flex-start;
-            }
-            
-            .terminal-header {
-                display: flex;
-                flex-direction: column;
-            }
-        }
-    </style>
-</head>
-<body>
-    <div class="terminal">
-        <div class="terminal-header">
-            <div class="terminal-title">
-                <span class="status-dot"></span>
-                claude-code-analytics
-            </div>
-            <div class="terminal-subtitle">real-time monitoring dashboard</div>
-            <div class="terminal-subtitle" id="lastUpdate"></div>
-            
-            <a href="https://github.com/davila7/claude-code-templates" target="_blank" class="github-star-btn" title="Give us a star on GitHub to support the project!">
-                <span class="star-icon">⭐</span>
-                <span>Star on GitHub</span>
-            </a>
-        </div>
-        
-        <div id="loading" class="loading">
-            loading claude code data...
-        </div>
-        
-        <div id="error" class="error" style="display: none;">
-            error: failed to load claude code data
-        </div>
-        
-        <div id="dashboard" style="display: none;">
-            <div class="stats-bar">
-                <div class="stat">
-                    <span class="stat-label">conversations:</span>
-                    <span class="stat-value" id="totalConversations">0</span>
-                </div>
-                <div class="stat">
-                    <span class="stat-label">claude sessions:</span>
-                    <span class="stat-value" id="claudeSessions">0</span>
-                    <span class="stat-sublabel" id="claudeSessionsDetail"></span>
-                </div>
-                <div class="stat">
-                    <span class="stat-label">tokens:</span>
-                    <span class="stat-value" id="totalTokens">0</span>
-                </div>
-                <div class="stat">
-                    <span class="stat-label">projects:</span>
-                    <span class="stat-value" id="activeProjects">0</span>
-                </div>
-                <div class="stat">
-                    <span class="stat-label">storage:</span>
-                    <span class="stat-value" id="dataSize">0</span>
-                </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="toggleNotifications()" id="notificationBtn">
-                        enable notifications
-                    </button>
-                    <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">
-                    <button class="filter-btn active" data-filter="active">active</button>
-                    <button class="filter-btn" data-filter="recent">recent</button>
-                    <button class="filter-btn" data-filter="inactive">inactive</button>
-                    <button class="filter-btn" data-filter="all">all</button>
-                </div>
-            </div>
-            
-            <table class="sessions-table">
-                <thead>
-                    <tr>
-                        <th>conversation id</th>
-                        <th>project</th>
-                        <th>model</th>
-                        <th>messages</th>
-                        <th>tokens</th>
-                        <th>last activity</th>
-                        <th>conversation state</th>
-                        <th>status</th>
-                    </tr>
-                </thead>
-                <tbody id="sessionsTable">
-                    <!-- Sessions will be loaded here -->
-                </tbody>
-            </table>
-            
-            <div id="noSessions" class="no-sessions" style="display: none;">
-                no conversations found for current filter
-            </div>
-            
-            <div id="sessionDetail" class="session-detail">
-                <button class="btn back-btn" onclick="showSessionsList()">← back to conversations</button>
-                
-                <div class="detail-header">
-                    <div class="detail-title" id="detailTitle">conversation details</div>
-                    <div class="detail-actions">
-                        <select id="exportFormat" class="export-format-select">
-                            <option value="csv">CSV</option>
-                            <option value="json">JSON</option>
-                        </select>
-                        <button class="btn" onclick="exportSession()">export</button>
-                        <button class="btn btn-primary" onclick="refreshSessionDetail()">refresh</button>
-                    </div>
-                </div>
-                
-                <div class="session-info" id="sessionInfo">
-                    <!-- Session info will be loaded here -->
-                </div>
-                
-                <div>
-                    <h3 style="color: #7d8590; margin-bottom: 16px; font-size: 0.875rem; text-transform: uppercase;">conversation history</h3>
-                    <input type="text" id="conversationSearch" class="search-input" placeholder="Search messages...">
-                    <div class="conversation-history" id="conversationHistory">
-                        <!-- Conversation history will be loaded here -->
-                    </div>
-                </div>
-            </div>
-        </div>
-    </div>
-
-    <script>
-        let allConversations = [];
-        let currentFilter = 'active';
-        let currentSession = null;
-        let tokenChart = null;
-        let projectChart = null;
-        let allData = null;
-        let notificationsEnabled = false;
-        let previousConversationStates = new Map();
-        
-        async function loadData() {
-            try {
-                const response = await fetch('/api/data');
-                const data = await response.json();
-                
-                console.log('Data loaded:', data.timestamp);
-                
-                document.getElementById('loading').style.display = 'none';
-                document.getElementById('dashboard').style.display = 'block';
-                
-                // Update timestamp
-                document.getElementById('lastUpdate').textContent = \`last update: \${data.lastUpdate}\`;
-                
-                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();
-                
-                // Check for conversation state changes and send notifications
-                checkForNotifications(data.conversations);
-                
-            } catch (error) {
-                document.getElementById('loading').style.display = 'none';
-                document.getElementById('error').style.display = 'block';
-                console.error('Failed to load data:', error);
-            }
-        }
-        
-        // Function to only update conversation data without refreshing charts
-        async function loadConversationData() {
-            try {
-                const response = await fetch('/api/data');
-                const data = await response.json();
-                
-                
-                // Update timestamp
-                document.getElementById('lastUpdate').textContent = \`last update: \${data.lastUpdate}\`;
-                
-                updateStats(data.summary);
-                allConversations = data.conversations;
-                allData = data; // Store data globally for access
-                window.allData = data; // Keep for backward compatibility
-                
-                // Only update sessions table, not charts
-                updateSessionsTable();
-                
-                // Check for conversation state changes and send notifications
-                checkForNotifications(data.conversations);
-                
-            } catch (error) {
-                console.error('Failed to refresh conversation data:', error);
-            }
-        }
-        
-        // Notification functions
-        async function requestNotificationPermission() {
-            if (!('Notification' in window)) {
-                console.log('This browser does not support notifications');
-                return false;
-            }
-            
-            if (Notification.permission === 'granted') {
-                notificationsEnabled = true;
-                return true;
-            }
-            
-            if (Notification.permission !== 'denied') {
-                const permission = await Notification.requestPermission();
-                notificationsEnabled = permission === 'granted';
-                return notificationsEnabled;
-            }
-            
-            return false;
-        }
-        
-        function sendNotification(title, body, conversationId) {
-            if (!notificationsEnabled) return;
-            
-            const notification = new Notification(title, {
-                body: body,
-                icon: 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzIiIGhlaWdodD0iMzIiIHZpZXdCb3g9IjAgMCAzMiAzMiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3Qgd2lkdGg9IjMyIiBoZWlnaHQ9IjMyIiByeD0iNCIgZmlsbD0iIzIxMjYyZCIvPgo8cGF0aCBkPSJNOCA4aDE2djE2SDh6IiBmaWxsPSIjZDU3NDU1Ii8+CjwvZGJnPgo=',
-                badge: 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGNpcmNsZSBjeD0iOCIgY3k9IjgiIHI9IjgiIGZpbGw9IiNkNTc0NTUiLz4KPC9zdmc+',
-                tag: conversationId,
-                requireInteraction: true
-            });
-            
-            notification.onclick = function() {
-                window.focus();
-                this.close();
-                // Focus on the conversation if possible
-                if (conversationId) {
-                    showSessionDetail(conversationId);
-                }
-            };
-            
-            // Auto close after 10 seconds
-            setTimeout(() => {
-                notification.close();
-            }, 10000);
-        }
-        
-        function checkForNotifications(conversations) {
-            if (!notificationsEnabled) return;
-            
-            conversations.forEach(conv => {
-                const currentState = conv.conversationState;
-                const prevState = previousConversationStates.get(conv.id);
-                
-                // Check if conversation state changed to "Awaiting user input..."
-                if (prevState && prevState !== currentState) {
-                    if (currentState === 'Awaiting user input...' || 
-                        currentState === 'User may be typing...' ||
-                        currentState === 'Awaiting response...') {
-                        
-                        const title = 'Claude is waiting for you!';
-                        const body = \`Project: \${conv.project} - Claude needs your input\`;
-                        
-                        sendNotification(title, body, conv.id);
-                    }
-                }
-                
-                // Update previous state
-                previousConversationStates.set(conv.id, currentState);
-            });
-        }
-        
-        async function toggleNotifications() {
-            const btn = document.getElementById('notificationBtn');
-            
-            if (!notificationsEnabled) {
-                const granted = await requestNotificationPermission();
-                if (granted) {
-                    btn.textContent = 'notifications on';
-                    btn.style.borderColor = '#3fb950';
-                    btn.style.color = '#3fb950';
-                    
-                    // Send a test notification
-                    sendNotification(
-                        'Notifications enabled!', 
-                        'You will now receive alerts when Claude is waiting for your input.',
-                        null
-                    );
-                } else {
-                    btn.textContent = 'notifications denied';
-                    btn.style.borderColor = '#f85149';
-                    btn.style.color = '#f85149';
-                }
-            } else {
-                // Disable notifications
-                notificationsEnabled = false;
-                btn.textContent = 'enable notifications';
-                btn.style.borderColor = '#30363d';
-                btn.style.color = '#7d8590';
-            }
-        }
-        
-        function updateStats(summary) {
-            document.getElementById('totalConversations').textContent = summary.totalConversations.toLocaleString();
-            document.getElementById('totalTokens').textContent = summary.totalTokens.toLocaleString();
-            document.getElementById('activeProjects').textContent = summary.activeProjects;
-            document.getElementById('dataSize').textContent = summary.totalFileSize;
-            
-            // Update Claude sessions
-            if (summary.claudeSessions) {
-                document.getElementById('claudeSessions').textContent = summary.claudeSessions.total.toLocaleString();
-                document.getElementById('claudeSessionsDetail').textContent = 
-                    \`this month: \${summary.claudeSessions.currentMonth} • this week: \${summary.claudeSessions.thisWeek}\`;
-            }
-        }
-        
-        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');
-            
-            // Filter conversations based on current filter
-            let filteredConversations = allConversations;
-            if (currentFilter !== 'all') {
-                filteredConversations = allConversations.filter(conv => conv.status === currentFilter);
-            }
-            
-            if (filteredConversations.length === 0) {
-                tableBody.innerHTML = '';
-                noSessionsDiv.style.display = 'block';
-                return;
-            }
-            
-            noSessionsDiv.style.display = 'none';
-            
-            tableBody.innerHTML = filteredConversations.map(conv => \`
-                <tr onclick="showSessionDetail('\${conv.id}')" style="cursor: pointer;">
-                    <td>
-                        <div class="session-id-container">
-                            <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>
-                        </div>
-                    </td>
-                    <td class="session-project">\${conv.project}</td>
-                    <td class="session-model" title="\${conv.modelInfo ? conv.modelInfo.primaryModel + ' (' + conv.modelInfo.currentServiceTier + ')' : 'N/A'}">\${conv.modelInfo ? conv.modelInfo.primaryModel : 'N/A'}</td>
-                    <td class="session-messages">\${conv.messageCount}</td>
-                    <td class="session-tokens">\${conv.tokens.toLocaleString()}</td>
-                    <td class="session-time">\${formatTime(conv.lastModified)}</td>
-                    <td class="conversation-state \${getStateClass(conv.conversationState)}">\${conv.conversationState}</td>
-                    <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) {
-            const now = new Date();
-            const diff = now - new Date(date);
-            const minutes = Math.floor(diff / (1000 * 60));
-            const hours = Math.floor(minutes / 60);
-            const days = Math.floor(hours / 24);
-            
-            if (minutes < 1) return 'now';
-            if (minutes < 60) return \`\${minutes}m ago\`;
-            if (hours < 24) return \`\${hours}h ago\`;
-            return \`\${days}d ago\`;
-        }
-        
-        function formatMessageTime(timestamp) {
-            const date = new Date(timestamp);
-            return date.toLocaleTimeString('en-US', { 
-                hour12: false, 
-                hour: '2-digit', 
-                minute: '2-digit', 
-                second: '2-digit' 
-            });
-        }
-        
-        function getStateClass(conversationState) {
-            if (conversationState.includes('working') || conversationState.includes('Working')) {
-                return 'working';
-            }
-            if (conversationState.includes('typing') || conversationState.includes('Typing')) {
-                return 'typing';
-            }
-            return '';
-        }
-        
-        function generateStatusSquaresHTML(statusSquares) {
-            if (!statusSquares || statusSquares.length === 0) {
-                return '';
-            }
-            
-            return statusSquares.map(square => 
-                \`<div class="status-square \${square.type}" data-tooltip="\${square.tooltip}"></div>\`
-            ).join('');
-        }
-        
-        function getMessageType(message) {
-            if (message.role === 'user') {
-                return {
-                    type: 'pending',
-                    tooltip: 'User input'
-                };
-            } else if (message.role === 'assistant') {
-                const content = message.content || '';
-                
-                if (typeof content === 'string') {
-                    if (content.includes('[Tool:') || content.includes('tool_use')) {
-                        return {
-                            type: 'tool',
-                            tooltip: 'Tool execution'
-                        };
-                    } else if (content.includes('error') || content.includes('Error') || content.includes('failed')) {
-                        return {
-                            type: 'error',
-                            tooltip: 'Error in response'
-                        };
-                    } else {
-                        return {
-                            type: 'success',
-                            tooltip: 'Successful response'
-                        };
-                    }
-                }
-            }
-            
-            return {
-                type: 'success',
-                tooltip: 'Message'
-            };
-        }
-        
-        // Filter button handlers
-        document.addEventListener('DOMContentLoaded', function() {
-            const filterButtons = document.querySelectorAll('.filter-btn');
-            
-            filterButtons.forEach(button => {
-                button.addEventListener('click', function() {
-                    // Remove active class from all buttons
-                    filterButtons.forEach(btn => btn.classList.remove('active'));
-                    
-                    // Add active class to clicked button
-                    this.classList.add('active');
-                    
-                    // Update current filter
-                    currentFilter = this.dataset.filter;
-                    
-                    // Update table
-                    updateSessionsTable();
-                });
-            });
-        });
-        
-        // Session detail functions
-        async function showSessionDetail(sessionId) {
-            currentSession = allConversations.find(conv => conv.id === sessionId);
-            if (!currentSession) return;
-            
-            // Hide sessions list and show detail
-            document.querySelector('.filter-bar').style.display = 'none';
-            document.querySelector('.sessions-table').style.display = 'none';
-            document.getElementById('noSessions').style.display = 'none';
-            document.getElementById('sessionDetail').classList.add('active');
-            
-            // Update title
-            document.getElementById('detailTitle').textContent = \`conversation: \${sessionId.substring(0, 8)}...\`;
-            
-            // Load session info
-            updateSessionInfo(currentSession);
-            
-            // Load conversation history
-            await loadConversationHistory(currentSession);
-        }
-        
-        function showSessionsList() {
-            document.getElementById('sessionDetail').classList.remove('active');
-            document.querySelector('.filter-bar').style.display = 'flex';
-            document.querySelector('.sessions-table').style.display = 'table';
-            updateSessionsTable();
-            currentSession = null;
-        }
-        
-        function updateSessionInfo(session) {
-            const container = document.getElementById('sessionInfo');
-            
-            container.innerHTML = \`
-                <div class="info-item">
-                    <div class="info-label">conversation id</div>
-                    <div class="info-value">\${session.id}</div>
-                </div>
-                <div class="info-item">
-                    <div class="info-label">project</div>
-                    <div class="info-value">\${session.project}</div>
-                </div>
-                <div class="info-item">
-                    <div class="info-label">messages</div>
-                    <div class="info-value">\${session.messageCount}</div>
-                </div>
-                <div class="info-item">
-                    <div class="info-label">total tokens</div>
-                    <div class="info-value">\${session.tokens.toLocaleString()}</div>
-                </div>
-                <div class="info-item">
-                    <div class="info-label">model</div>
-                    <div class="info-value model">\${session.modelInfo ? session.modelInfo.primaryModel : 'N/A'}</div>
-                </div>
-                <div class="info-item">
-                    <div class="info-label">service tier</div>
-                    <div class="info-value">\${session.modelInfo ? session.modelInfo.currentServiceTier : 'N/A'}</div>
-                </div>
-                <div class="info-item">
-                    <div class="info-label">token details</div>
-                    <div class="info-value">\${session.tokenUsage ? session.tokenUsage.inputTokens.toLocaleString() + ' in / ' + session.tokenUsage.outputTokens.toLocaleString() + ' out' : 'N/A'}</div>
-                </div>
-                \${session.tokenUsage && (session.tokenUsage.cacheCreationTokens > 0 || session.tokenUsage.cacheReadTokens > 0) ? 
-                    \`<div class="info-item">
-                        <div class="info-label">cache tokens</div>
-                        <div class="info-value">\${session.tokenUsage.cacheCreationTokens.toLocaleString()} created / \${session.tokenUsage.cacheReadTokens.toLocaleString()} read</div>
-                    </div>\` : ''
-                }
-                <div class="info-item">
-                    <div class="info-label">file size</div>
-                    <div class="info-value">\${formatBytes(session.fileSize)}</div>
-                </div>
-                <div class="info-item">
-                    <div class="info-label">created</div>
-                    <div class="info-value">\${new Date(session.created).toLocaleString()}</div>
-                </div>
-                <div class="info-item">
-                    <div class="info-label">last modified</div>
-                    <div class="info-value">\${new Date(session.lastModified).toLocaleString()}</div>
-                </div>
-                <div class="info-item">
-                    <div class="info-label">conversation state</div>
-                    <div class="info-value conversation-state \${getStateClass(session.conversationState)}">\${session.conversationState}</div>
-                </div>
-                <div class="info-item">
-                    <div class="info-label">status</div>
-                    <div class="info-value status-\${session.status}">\${session.status}</div>
-                </div>
-            \`;
-        }
-        
-        async function loadConversationHistory(session) {
-            try {
-                const response = await fetch(\`/api/session/\${session.id}\`);
-                const sessionData = await response.json();
-                
-                const container = document.getElementById('conversationHistory');
-                const searchInput = document.getElementById('conversationSearch');
-                
-                if (!sessionData.messages || sessionData.messages.length === 0) {
-                    container.innerHTML = '<div style="padding: 20px; text-align: center; color: #7d8590;">no messages found</div>';
-                    searchInput.style.display = 'none';
-                    return;
-                }
-                searchInput.style.display = 'block';
-
-                const renderMessages = (filter = '') => {
-                    const lowerCaseFilter = filter.toLowerCase();
-                    const filteredMessages = sessionData.messages.filter(m => 
-                        (m.content || '').toLowerCase().includes(lowerCaseFilter)
-                    );
-
-                    if (filteredMessages.length === 0) {
-                        container.innerHTML = '<div style="padding: 20px; text-align: center; color: #7d8590;">No messages match your search.</div>';
-                        return;
-                    }
-
-                    const reversedMessages = filteredMessages.slice().reverse();
-
-                    container.innerHTML = reversedMessages.map((message, index) => {
-                        const messageType = getMessageType(message);
-                        const messageNum = filteredMessages.length - index;
-                        return \`
-                            <div class="message">
-                                <div class="message-type-indicator \${messageType.type}" data-tooltip="\${messageType.tooltip}"></div>
-                                <div class="message-header">
-                                    <div class="message-role \${message.role}">\${message.role}</div>
-                                    <div class="message-time">
-                                        #\${messageNum} • \${message.timestamp ? formatMessageTime(message.timestamp) : 'unknown time'}
-                                    </div>
-                                </div>
-                                <div class="message-content">\${truncateContent(message.content || 'no content')}</div>
-                            </div>
-                        \`;
-                    }).join('');
-                }
-
-                renderMessages();
-
-                searchInput.addEventListener('input', () => {
-                    renderMessages(searchInput.value);
-                });
-                
-            } catch (error) {
-                document.getElementById('conversationHistory').innerHTML = 
-                    '<div style="padding: 20px; text-align: center; color: #f85149;">error loading conversation history</div>';
-                console.error('Failed to load conversation history:', error);
-            }
-        }
-        
-        function truncateContent(content, maxLength = 1000) {
-            if (typeof content !== 'string') return 'no content';
-            if (!content.trim()) return 'empty message';
-            if (content.length <= maxLength) return content;
-            return content.substring(0, maxLength) + '\\n\\n[... message truncated ...]';
-        }
-        
-        function formatBytes(bytes) {
-            if (bytes === 0) return '0 B';
-            const k = 1024;
-            const sizes = ['B', 'KB', 'MB', 'GB'];
-            const i = Math.floor(Math.log(bytes) / Math.log(k));
-            return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
-        }
-        
-        function exportSession() {
-            if (!currentSession) return;
-            
-            const format = document.getElementById('exportFormat').value;
-            
-            // Fetch conversation history and export
-            fetch(\`/api/session/\${currentSession.id}\`)
-                .then(response => response.json())
-                .then(sessionData => {
-                    if (format === 'csv') {
-                        exportSessionAsCSV(sessionData);
-                    } else if (format === 'json') {
-                        exportSessionAsJSON(sessionData);
-                    }
-                })
-                .catch(error => {
-                    console.error(\`Failed to export \${format.toUpperCase()}:\`, error);
-                    alert(\`Failed to export \${format.toUpperCase()}. Please try again.\`);
-                });
-        }
-        
-        function exportSessionAsCSV(sessionData) {
-            // Create CSV content
-            let csvContent = 'Conversation ID,Project,Message Count,Tokens,File Size,Created,Last Modified,Conversation State,Status\\n';
-            csvContent += \`"\${currentSession.id}","\${currentSession.project}",\${currentSession.messageCount},\${currentSession.tokens},\${currentSession.fileSize},"\${new Date(currentSession.created).toISOString()}","\${new Date(currentSession.lastModified).toISOString()}","\${currentSession.conversationState}","\${currentSession.status}"\\n\\n\`;
-            
-            csvContent += 'Message #,Role,Timestamp,Content\\n';
-            
-            // Add conversation history
-            if (sessionData.messages) {
-                sessionData.messages.forEach((message, index) => {
-                    const content = (message.content || 'no content').replace(/"/g, '""');
-                    const timestamp = message.timestamp ? new Date(message.timestamp).toISOString() : 'unknown';
-                    csvContent += \`\${index + 1},"\${message.role}","\${timestamp}","\${content}"\\n\`;
-                });
-            }
-            
-            // Download CSV
-            const blob = new Blob([csvContent], { type: 'text/csv;charset=utf-8;' });
-            downloadFile(blob, \`claude-conversation-\${currentSession.id.substring(0, 8)}.csv\`);
-        }
-        
-        function exportSessionAsJSON(sessionData) {
-            // Create comprehensive JSON export
-            const exportData = {
-                conversation: {
-                    id: currentSession.id,
-                    filename: currentSession.filename,
-                    project: currentSession.project,
-                    messageCount: currentSession.messageCount,
-                    tokens: currentSession.tokens,
-                    fileSize: currentSession.fileSize,
-                    created: currentSession.created,
-                    lastModified: currentSession.lastModified,
-                    conversationState: currentSession.conversationState,
-                    status: currentSession.status
-                },
-                messages: sessionData.messages || [],
-                metadata: {
-                    exportedAt: new Date().toISOString(),
-                    exportFormat: 'json',
-                    toolVersion: '1.5.7'
-                }
-            };
-            
-            // Download JSON
-            const jsonString = JSON.stringify(exportData, null, 2);
-            const blob = new Blob([jsonString], { type: 'application/json;charset=utf-8;' });
-            downloadFile(blob, \`claude-conversation-\${currentSession.id.substring(0, 8)}.json\`);
-        }
-        
-        function downloadFile(blob, filename) {
-            const link = document.createElement('a');
-            const url = URL.createObjectURL(blob);
-            link.setAttribute('href', url);
-            link.setAttribute('download', filename);
-            link.style.visibility = 'hidden';
-            document.body.appendChild(link);
-            link.click();
-            document.body.removeChild(link);
-            URL.revokeObjectURL(url);
-        }
-        
-        function refreshSessionDetail() {
-            if (currentSession) {
-                loadConversationHistory(currentSession);
-            }
-        }
-        
-        // Manual refresh function
-        async function forceRefresh() {
-            try {
-                const response = await fetch('/api/refresh');
-                const result = await response.json();
-                console.log('Manual refresh:', result);
-                await loadData();
-            } catch (error) {
-                console.error('Failed to refresh:', error);
-            }
-        }
-        
-        // 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();
-                    
-                    // Automatic refresh for conversation data every 1 second for real-time updates
-                    setInterval(() => {
-                        loadConversationData();
-                    }, 1000);
-                } 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);
-            
-            // Initialize notification button state
-            updateNotificationButtonState();
-        });
-        
-        function updateNotificationButtonState() {
-            const btn = document.getElementById('notificationBtn');
-            if (!btn) return;
-            
-            if (Notification.permission === 'granted') {
-                notificationsEnabled = true;
-                btn.textContent = 'notifications on';
-                btn.style.borderColor = '#3fb950';
-                btn.style.color = '#3fb950';
-            } else if (Notification.permission === 'denied') {
-                btn.textContent = 'notifications denied';
-                btn.style.borderColor = '#f85149';
-                btn.style.color = '#f85149';
-            }
-        }
-        
-        // Add keyboard shortcut for refresh (F5 or Ctrl+R)
-        document.addEventListener('keydown', function(e) {
-            if (e.key === 'F5' || (e.ctrlKey && e.key === 'r')) {
-                e.preventDefault();
-                forceRefresh();
-            }
-        });
-    </script>
-</body>
-</html>`;
-
-  await fs.writeFile(path.join(webDir, 'index.html'), htmlContent);
-}
 
 module.exports = {
   runAnalytics