claude-code-templates 1.10.1 → 1.12.0

package/src/analytics.js

@@ -14,6 +14,7 @@ const DataCache = require('./analytics/data/DataCache');
 const WebSocketServer = require('./analytics/notifications/WebSocketServer');
 const NotificationManager = require('./analytics/notifications/NotificationManager');
 const PerformanceMonitor = require('./analytics/utils/PerformanceMonitor');
+const ConsoleBridge = require('./console-bridge');
 
 class ClaudeAnalytics {
   constructor() {
@@ -32,6 +33,7 @@ class ClaudeAnalytics {
     this.webSocketServer = null;
     this.notificationManager = null;
     this.httpServer = null;
+    this.consoleBridge = null;
     this.data = {
       conversations: [],
       summary: {},
@@ -236,8 +238,35 @@ class ClaudeAnalytics {
     };
   }
 
-  extractProjectFromPath(filePath) {
-    // Extract project name from file path like:
+  async extractProjectFromPath(filePath) {
+    // First try to read cwd from the conversation file itself
+    try {
+      const content = await fs.readFile(filePath, 'utf8');
+      const lines = content.trim().split('\n').filter(line => line.trim());
+      
+      for (const line of lines.slice(0, 10)) { // Check first 10 lines
+        try {
+          const item = JSON.parse(line);
+          
+          // Look for cwd field in the message
+          if (item.cwd) {
+            return path.basename(item.cwd);
+          }
+          
+          // Also check if it's in nested objects
+          if (item.message && item.message.cwd) {
+            return path.basename(item.message.cwd);
+          }
+        } catch (parseError) {
+          // Skip invalid JSON lines
+          continue;
+        }
+      }
+    } catch (error) {
+      console.warn(chalk.yellow(`Warning: Could not extract project from conversation ${filePath}:`, error.message));
+    }
+
+    // Fallback: Extract project name from file path like:
     // /Users/user/.claude/projects/-Users-user-Projects-MyProject/conversation.jsonl
     const pathParts = filePath.split('/');
     const projectIndex = pathParts.findIndex(part => part === 'projects');
@@ -254,7 +283,7 @@ class ClaudeAnalytics {
       return cleanName;
     }
 
-    return null;
+    return 'Unknown';
   }
 
 
@@ -494,6 +523,36 @@ class ClaudeAnalytics {
     return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
   }
 
+  /**
+   * Handle conversation file changes and detect new messages
+   * @param {string} conversationId - Conversation ID that changed
+   * @param {string} filePath - Path to the conversation file
+   */
+  async handleConversationChange(conversationId, filePath) {
+    try {
+      
+      // Get the latest messages from the file
+      const messages = await this.conversationAnalyzer.getParsedConversation(filePath);
+      
+      if (messages && messages.length > 0) {
+        // Get the most recent message
+        const latestMessage = messages[messages.length - 1];
+        
+        
+        // Send WebSocket notification for new message
+        if (this.notificationManager) {
+          this.notificationManager.notifyNewMessage(conversationId, latestMessage, {
+            totalMessages: messages.length,
+            timestamp: new Date().toISOString()
+          });
+        }
+        
+      }
+    } catch (error) {
+      console.error(chalk.red(`Error handling conversation change for ${conversationId}:`), error);
+    }
+  }
+
   setupFileWatchers() {
     // Setup file watchers using the FileWatcher module
     this.fileWatcher.setupFileWatchers(
@@ -513,11 +572,30 @@ class ClaudeAnalytics {
         this.data.orphanProcesses = enrichmentResult.orphanProcesses;
       },
       // DataCache for cache invalidation
-      this.dataCache
+      this.dataCache,
+      // Conversation change callback for real-time message updates
+      async (conversationId, filePath) => {
+        await this.handleConversationChange(conversationId, filePath);
+      }
     );
   }
 
   setupWebServer() {
+    // Add CORS middleware
+    this.app.use((req, res, next) => {
+      res.header('Access-Control-Allow-Origin', '*');
+      res.header('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE, OPTIONS');
+      res.header('Access-Control-Allow-Headers', 'Origin, X-Requested-With, Content-Type, Accept, Authorization');
+      
+      // Handle preflight requests
+      if (req.method === 'OPTIONS') {
+        res.sendStatus(200);
+        return;
+      }
+      
+      next();
+    });
+    
     // Add performance monitoring middleware
     this.app.use(this.performanceMonitor.createExpressMiddleware());
     
@@ -532,8 +610,7 @@ class ClaudeAnalytics {
         
         // Memory cleanup: limit conversation history to prevent memory buildup
         if (this.data.conversations && this.data.conversations.length > 150) {
-          console.log(chalk.yellow(`🧹 Cleaning up conversation history: ${this.data.conversations.length} -> 150`));
-          this.data.conversations = this.data.conversations
+            this.data.conversations = this.data.conversations
             .sort((a, b) => new Date(b.lastModified) - new Date(a.lastModified))
             .slice(0, 150);
         }
@@ -557,6 +634,39 @@ class ClaudeAnalytics {
       }
     });
 
+    // Paginated conversations endpoint
+    this.app.get('/api/conversations', async (req, res) => {
+      try {
+        const page = parseInt(req.query.page) || 0;
+        const limit = parseInt(req.query.limit) || 10;
+        const offset = page * limit;
+        
+        // Sort conversations by lastModified (most recent first)
+        const sortedConversations = [...this.data.conversations]
+          .sort((a, b) => new Date(b.lastModified) - new Date(a.lastModified));
+        
+        const paginatedConversations = sortedConversations.slice(offset, offset + limit);
+        const totalCount = this.data.conversations.length;
+        const hasMore = offset + limit < totalCount;
+        
+        res.json({
+          conversations: paginatedConversations,
+          pagination: {
+            page,
+            limit,
+            offset,
+            totalCount,
+            hasMore,
+            currentCount: paginatedConversations.length
+          },
+          timestamp: new Date().toISOString()
+        });
+      } catch (error) {
+        console.error('Error getting paginated conversations:', error);
+        res.status(500).json({ error: 'Failed to get conversations' });
+      }
+    });
+
     this.app.get('/api/realtime', async (req, res) => {
       const realtimeWithTimestamp = {
         ...this.data.realtimeStats,
@@ -568,7 +678,6 @@ class ClaudeAnalytics {
 
     // Force refresh endpoint
     this.app.get('/api/refresh', async (req, res) => {
-      console.log(chalk.blue('🔄 Manual refresh requested...'));
       await this.loadInitialData();
       res.json({
         success: true,
@@ -577,35 +686,115 @@ class ClaudeAnalytics {
       });
     });
 
-    // NEW: Ultra-fast endpoint ONLY for conversation states
+    // NEW: Ultra-fast endpoint for ALL conversation states
     this.app.get('/api/conversation-state', async (req, res) => {
       try {
-        // Only detect processes and calculate states - no file reading
+        // Detect running processes for accurate state calculation
         const runningProcesses = await this.processDetector.detectRunningClaudeProcesses();
-        const activeStates = [];
+        const activeStates = {};
         
-        // Quick state calculation for active conversations only
+        // Calculate states for ALL conversations, not just those with runningProcess
         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()
-              });
+          try {
+            let state;
+            
+            // First try quick calculation if there's a running process
+            if (conversation.runningProcess) {
+              state = this.stateCalculator.quickStateCalculation(conversation, runningProcesses);
             }
+            
+            // If no quick state found, use full state calculation
+            if (!state) {
+              // For conversations without running processes, use basic heuristics
+              const now = new Date();
+              const timeDiff = (now - new Date(conversation.lastModified)) / (1000 * 60); // minutes
+              
+              if (timeDiff < 5) {
+                state = 'Recently active';
+              } else if (timeDiff < 60) {
+                state = 'Idle';
+              } else if (timeDiff < 1440) { // 24 hours
+                state = 'Inactive';
+              } else {
+                state = 'Old';
+              }
+            }
+            
+            // Store state with conversation ID as key
+            activeStates[conversation.id] = state;
+            
+          } catch (error) {
+            activeStates[conversation.id] = 'unknown';
           }
         }
         
         res.json({ activeStates, timestamp: Date.now() });
       } catch (error) {
+        console.error('Error getting conversation states:', error);
         res.status(500).json({ error: 'Failed to get conversation states' });
       }
     });
 
+    // Conversation messages endpoint with optional pagination
+    this.app.get('/api/conversations/:id/messages', async (req, res) => {
+      try {
+        const conversationId = req.params.id;
+        const page = parseInt(req.query.page);
+        const limit = parseInt(req.query.limit);
+        
+        const conversation = this.data.conversations.find(conv => conv.id === conversationId);
+        
+        if (!conversation) {
+          return res.status(404).json({ error: 'Conversation not found' });
+        }
+        
+        // Read all messages from the JSONL file
+        const allMessages = await this.conversationAnalyzer.getParsedConversation(conversation.filePath);
+        
+        // If pagination parameters are provided, use pagination
+        if (!isNaN(page) && !isNaN(limit)) {
+          // Sort messages by timestamp (newest first for reverse pagination)
+          const sortedMessages = allMessages.sort((a, b) => new Date(b.timestamp) - new Date(a.timestamp));
+          
+          // Calculate pagination
+          const totalCount = sortedMessages.length;
+          const offset = page * limit;
+          const hasMore = offset + limit < totalCount;
+          
+          // Get page of messages (reverse order - newest first)
+          const paginatedMessages = sortedMessages.slice(offset, offset + limit);
+          
+          // For display, we want messages in chronological order (oldest first)
+          const messagesInDisplayOrder = [...paginatedMessages].reverse();
+          
+          res.json({
+            conversationId,
+            messages: messagesInDisplayOrder,
+            pagination: {
+              page,
+              limit,
+              offset,
+              totalCount,
+              hasMore,
+              currentCount: paginatedMessages.length
+            },
+            timestamp: new Date().toISOString()
+          });
+        } else {
+          // Non-paginated response (backward compatibility)
+          res.json({
+            conversationId,
+            messages: allMessages,
+            messageCount: allMessages.length,
+            timestamp: new Date().toISOString()
+          });
+        }
+      } catch (error) {
+        console.error('Error loading conversation messages:', error);
+        res.status(500).json({ error: 'Failed to load conversation messages' });
+      }
+    });
+
     // Session data endpoint for Max plan usage tracking
     this.app.get('/api/session/data', async (req, res) => {
       try {
@@ -798,17 +987,10 @@ class ClaudeAnalytics {
             }
           });
           
-          if (hasChanges) {
-            console.log(chalk.gray(`⚡ State update: ${activeConvs.length} active conversations`));
-            activeConvs.forEach(conv => {
-              console.log(chalk.gray(`  📊 ${conv.project}: ${conv.conversationState}`));
-            });
-          }
         }
         
         // Memory cleanup: limit conversation history to prevent memory buildup
         if (this.data.conversations.length > 100) {
-          console.log(chalk.yellow(`🧹 Cleaning up conversation history: ${this.data.conversations.length} -> 100`));
           this.data.conversations = this.data.conversations
             .sort((a, b) => new Date(b.lastModified) - new Date(a.lastModified))
             .slice(0, 100);
@@ -915,6 +1097,44 @@ class ClaudeAnalytics {
       }
     });
 
+    // Cache management endpoint
+    this.app.post('/api/cache/clear', (req, res) => {
+      try {
+        // Clear specific cache types or all
+        const { type } = req.body;
+        
+        if (!type || type === 'all') {
+          // Clear all caches
+          this.dataCache.invalidateComputations();
+          this.dataCache.caches.parsedConversations.clear();
+          this.dataCache.caches.fileContent.clear();
+          this.dataCache.caches.fileStats.clear();
+          res.json({ success: true, message: 'All caches cleared' });
+        } else if (type === 'conversations') {
+          // Clear only conversation-related caches
+          this.dataCache.caches.parsedConversations.clear();
+          this.dataCache.caches.fileContent.clear();
+          res.json({ success: true, message: 'Conversation caches cleared' });
+        } else {
+          res.status(400).json({ error: 'Invalid cache type. Use "all" or "conversations"' });
+        }
+      } catch (error) {
+        console.error('Error clearing cache:', error);
+        res.status(500).json({ error: 'Failed to clear cache' });
+      }
+    });
+
+    // Agents API endpoint
+    this.app.get('/api/agents', async (req, res) => {
+      try {
+        const agents = await this.loadAgents();
+        res.json({ agents });
+      } catch (error) {
+        console.error('Error loading agents:', error);
+        res.status(500).json({ error: 'Failed to load agents data' });
+      }
+    });
+
     // Main dashboard route
     this.app.get('/', (req, res) => {
       res.sendFile(path.join(__dirname, 'analytics-web', 'index.html'));
@@ -936,13 +1156,23 @@ class ClaudeAnalytics {
     });
   }
 
-  async openBrowser() {
+  async openBrowser(openTo = null) {
+    const baseUrl = `http://localhost:${this.port}`;
+    let fullUrl = baseUrl;
+    
+    // Add fragment/hash for specific page
+    if (openTo === 'agents') {
+      fullUrl = `${baseUrl}/#agents`;
+      console.log(chalk.blue('🌐 Opening browser to Claude Code Chats...'));
+    } else {
+      console.log(chalk.blue('🌐 Opening browser to Claude Code Analytics...'));
+    }
+    
     try {
-      await open(`http://localhost:${this.port}`);
-      console.log(chalk.blue('🌐 Opening browser...'));
+      await open(fullUrl);
     } catch (error) {
       console.log(chalk.yellow('Could not open browser automatically. Please visit:'));
-      console.log(chalk.cyan(`http://localhost:${this.port}`));
+      console.log(chalk.cyan(fullUrl));
     }
   }
 
@@ -962,14 +1192,84 @@ class ClaudeAnalytics {
       this.notificationManager = new NotificationManager(this.webSocketServer);
       await this.notificationManager.initialize();
       
+      // Connect notification manager to file watcher for typing detection
+      this.fileWatcher.setNotificationManager(this.notificationManager);
+      
       // Setup notification subscriptions
       this.setupNotificationSubscriptions();
       
-      console.log(chalk.green('✅ WebSocket and notifications initialized'));
+      // Initialize Console Bridge for Claude Code interaction
+      await this.initializeConsoleBridge();
+      
+      console.log(chalk.green('✅ WebSocket, notifications, and console bridge initialized'));
     } catch (error) {
       console.error(chalk.red('❌ Failed to initialize WebSocket:'), error);
     }
   }
+
+  /**
+   * Initialize Console Bridge for Claude Code interaction
+   */
+  async initializeConsoleBridge() {
+    try {
+      console.log(chalk.blue('🌉 Initializing Console Bridge...'));
+      
+      // Create console bridge on a different port (3334)
+      this.consoleBridge = new ConsoleBridge({
+        port: 3334,
+        debug: false // Set to true for detailed debugging
+      });
+      
+      // Initialize the bridge
+      const success = await this.consoleBridge.initialize();
+      
+      if (success) {
+        console.log(chalk.green('✅ Console Bridge initialized on port 3334'));
+        console.log(chalk.cyan('🔌 Web interface can connect to ws://localhost:3334 for console interactions'));
+        
+        // Bridge console interactions to main WebSocket
+        this.setupConsoleBridgeIntegration();
+      } else {
+        console.warn(chalk.yellow('⚠️ Console Bridge failed to initialize - console interactions disabled'));
+      }
+      
+    } catch (error) {
+      console.warn(chalk.yellow('⚠️ Console Bridge initialization failed:'), error.message);
+      console.log(chalk.gray('Console interactions will not be available, but analytics will continue normally'));
+    }
+  }
+
+  /**
+   * Setup integration between Console Bridge and main WebSocket
+   */
+  setupConsoleBridgeIntegration() {
+    if (!this.consoleBridge || !this.webSocketServer) return;
+    
+    // Forward console interactions from bridge to main WebSocket
+    this.consoleBridge.on('console_interaction', (interactionData) => {
+      console.log(chalk.blue('📡 Forwarding console interaction to web interface'));
+      
+      // Broadcast to main WebSocket clients
+      this.webSocketServer.broadcast({
+        type: 'console_interaction',
+        data: interactionData
+      });
+    });
+    
+    // Listen for responses from main WebSocket and forward to bridge
+    this.webSocketServer.on('console_response', (responseData) => {
+      console.log(chalk.blue('📱 Forwarding console response to Claude Code'));
+      
+      if (this.consoleBridge) {
+        this.consoleBridge.handleWebMessage({
+          type: 'console_response',
+          data: responseData
+        });
+      }
+    });
+    
+    console.log(chalk.green('🔗 Console Bridge integration established'));
+  }
   
   /**
    * Setup notification subscriptions
@@ -977,7 +1277,6 @@ class ClaudeAnalytics {
   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
@@ -1021,6 +1320,307 @@ class ClaudeAnalytics {
     });
   }
 
+  /**
+   * Load available agents from .claude/agents directories (project and user level)
+   * @returns {Promise<Array>} Array of agent objects
+   */
+  async loadAgents() {
+    const agents = [];
+    const homeDir = os.homedir();
+    
+    // Define agent paths (user level and project level)
+    const userAgentsDir = path.join(homeDir, '.claude', 'agents');
+    const projectAgentsDirs = [];
+    
+    try {
+      // 1. Check current working directory for .claude/agents
+      const currentProjectAgentsDir = path.join(process.cwd(), '.claude', 'agents');
+      if (await fs.pathExists(currentProjectAgentsDir)) {
+        const currentProjectName = path.basename(process.cwd());
+        projectAgentsDirs.push({
+          path: currentProjectAgentsDir,
+          projectName: currentProjectName
+        });
+      }
+      
+      // 2. Check parent directories for .claude/agents (for monorepo/nested projects)
+      let currentDir = process.cwd();
+      let parentDir = path.dirname(currentDir);
+      
+      // Search up to 3 levels up for .claude/agents
+      for (let i = 0; i < 3 && parentDir !== currentDir; i++) {
+        const parentProjectAgentsDir = path.join(parentDir, '.claude', 'agents');
+        
+        if (await fs.pathExists(parentProjectAgentsDir)) {
+          const parentProjectName = path.basename(parentDir);
+          
+          // Avoid duplicates
+          const exists = projectAgentsDirs.some(p => p.path === parentProjectAgentsDir);
+          if (!exists) {
+            projectAgentsDirs.push({
+              path: parentProjectAgentsDir,
+              projectName: parentProjectName
+            });
+          }
+          break; // Found one, no need to go further up
+        }
+        currentDir = parentDir;
+        parentDir = path.dirname(currentDir);
+      }
+      
+      // 3. Find all project directories that might have agents (in ~/.claude/projects)
+      const projectsDir = path.join(this.claudeDir, 'projects');
+      if (await fs.pathExists(projectsDir)) {
+        const projectDirs = await fs.readdir(projectsDir);
+        for (const projectDir of projectDirs) {
+          const projectAgentsDir = path.join(projectsDir, projectDir, '.claude', 'agents');
+          if (await fs.pathExists(projectAgentsDir)) {
+            projectAgentsDirs.push({
+              path: projectAgentsDir,
+              projectName: this.cleanProjectName(projectDir)
+            });
+          }
+        }
+      }
+      
+      // Load user-level agents
+      if (await fs.pathExists(userAgentsDir)) {
+        const userAgents = await this.loadAgentsFromDirectory(userAgentsDir, 'user');
+        agents.push(...userAgents);
+      }
+      
+      // Load project-level agents
+      for (const projectInfo of projectAgentsDirs) {
+        const projectAgents = await this.loadAgentsFromDirectory(
+          projectInfo.path, 
+          'project', 
+          projectInfo.projectName
+        );
+        agents.push(...projectAgents);
+      }
+      
+      // Log agents summary
+      console.log(chalk.blue('🤖 Agents loaded:'), agents.length);
+      if (agents.length > 0) {
+        const projectAgents = agents.filter(a => a.level === 'project').length;
+        const userAgents = agents.filter(a => a.level === 'user').length;
+        console.log(chalk.gray(`  📦 Project agents: ${projectAgents}, 👤 User agents: ${userAgents}`));
+      }
+      
+      // Sort agents by name and prioritize project agents over user agents
+      return agents.sort((a, b) => {
+        if (a.level !== b.level) {
+          return a.level === 'project' ? -1 : 1;
+        }
+        return a.name.localeCompare(b.name);
+      });
+      
+    } catch (error) {
+      console.error(chalk.red('Error loading agents:'), error);
+      return [];
+    }
+  }
+
+  /**
+   * Load agents from a specific directory
+   * @param {string} agentsDir - Directory containing agent files
+   * @param {string} level - 'user' or 'project'
+   * @param {string} projectName - Name of project (if project level)
+   * @returns {Promise<Array>} Array of agent objects
+   */
+  async loadAgentsFromDirectory(agentsDir, level, projectName = null) {
+    const agents = [];
+    
+    try {
+      const files = await fs.readdir(agentsDir);
+      
+      for (const file of files) {
+        if (file.endsWith('.md')) {
+          const filePath = path.join(agentsDir, file);
+          const agentData = await this.parseAgentFile(filePath, level, projectName);
+          if (agentData) {
+            agents.push(agentData);
+          }
+        }
+      }
+    } catch (error) {
+      console.warn(chalk.yellow(`Warning: Could not read agents directory ${agentsDir}:`, error.message));
+    }
+    
+    return agents;
+  }
+
+  /**
+   * Parse agent markdown file
+   * @param {string} filePath - Path to agent file
+   * @param {string} level - 'user' or 'project'
+   * @param {string} projectName - Name of project (if project level)
+   * @returns {Promise<Object|null>} Agent object or null if parsing failed
+   */
+  async parseAgentFile(filePath, level, projectName = null) {
+    try {
+      const content = await fs.readFile(filePath, 'utf8');
+      const stats = await fs.stat(filePath);
+      
+      // Parse YAML frontmatter
+      const frontmatterMatch = content.match(/^---\n([\s\S]*?)\n---/);
+      if (!frontmatterMatch) {
+        console.warn(chalk.yellow(`Agent file ${path.basename(filePath)} missing frontmatter`));
+        return null;
+      }
+      
+      const frontmatter = {};
+      const yamlContent = frontmatterMatch[1];
+      
+      // Simple YAML parser for the fields we need
+      const yamlLines = yamlContent.split('\n');
+      for (const line of yamlLines) {
+        const match = line.match(/^(\w+):\s*(.*)$/);
+        if (match) {
+          const [, key, value] = match;
+          frontmatter[key] = value.trim();
+        }
+      }
+      
+      // Log parsed frontmatter for debugging
+      console.log(chalk.blue(`📋 Parsed agent frontmatter for ${path.basename(filePath)}:`), frontmatter);
+      
+      if (!frontmatter.name || !frontmatter.description) {
+        console.warn(chalk.yellow(`Agent file ${path.basename(filePath)} missing required fields`));
+        return null;
+      }
+      
+      // Extract system prompt (content after frontmatter)
+      const systemPrompt = content.substring(frontmatterMatch[0].length).trim();
+      
+      // Parse tools if specified
+      let tools = [];
+      if (frontmatter.tools) {
+        tools = frontmatter.tools.split(',').map(tool => tool.trim()).filter(Boolean);
+      }
+      
+      // Use color from frontmatter if available, otherwise generate one
+      const color = frontmatter.color ? this.convertColorToHex(frontmatter.color) : this.generateAgentColor(frontmatter.name);
+      
+      return {
+        name: frontmatter.name,
+        description: frontmatter.description,
+        systemPrompt,
+        tools,
+        level,
+        projectName,
+        filePath,
+        lastModified: stats.mtime,
+        color,
+        isActive: true // All loaded agents are considered active
+      };
+      
+    } catch (error) {
+      console.warn(chalk.yellow(`Warning: Could not parse agent file ${filePath}:`, error.message));
+      return null;
+    }
+  }
+
+  /**
+   * Generate consistent color for agent based on name
+   * @param {string} agentName - Name of the agent
+   * @returns {string} Hex color code
+   */
+  generateAgentColor(agentName) {
+    // Simple hash function to generate consistent colors
+    let hash = 0;
+    for (let i = 0; i < agentName.length; i++) {
+      const char = agentName.charCodeAt(i);
+      hash = ((hash << 5) - hash) + char;
+      hash = hash & hash; // Convert to 32-bit integer
+    }
+    
+    // Generate RGB values with good contrast and visibility
+    const hue = Math.abs(hash) % 360;
+    const saturation = 70 + (Math.abs(hash) % 30); // 70-100%
+    const lightness = 45 + (Math.abs(hash) % 20);  // 45-65%
+    
+    // Convert HSL to RGB
+    const hslToRgb = (h, s, l) => {
+      h /= 360;
+      s /= 100;
+      l /= 100;
+      
+      const hue2rgb = (p, q, t) => {
+        if (t < 0) t += 1;
+        if (t > 1) t -= 1;
+        if (t < 1/6) return p + (q - p) * 6 * t;
+        if (t < 1/2) return q;
+        if (t < 2/3) return p + (q - p) * (2/3 - t) * 6;
+        return p;
+      };
+      
+      let r, g, b;
+      if (s === 0) {
+        r = g = b = l;
+      } else {
+        const q = l < 0.5 ? l * (1 + s) : l + s - l * s;
+        const p = 2 * l - q;
+        r = hue2rgb(p, q, h + 1/3);
+        g = hue2rgb(p, q, h);
+        b = hue2rgb(p, q, h - 1/3);
+      }
+      
+      return [Math.round(r * 255), Math.round(g * 255), Math.round(b * 255)];
+    };
+    
+    const [r, g, b] = hslToRgb(hue, saturation, lightness);
+    return `#${((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1)}`;
+  }
+
+  /**
+   * Convert color names to hex values
+   * @param {string} color - Color name or hex value
+   * @returns {string} Hex color code
+   */
+  convertColorToHex(color) {
+    if (!color) return '#007acc';
+    
+    // If already hex, return as-is
+    if (color.startsWith('#')) return color;
+    
+    // Convert common color names to hex
+    const colorMap = {
+      'red': '#ff4444',
+      'blue': '#4444ff', 
+      'green': '#44ff44',
+      'yellow': '#ffff44',
+      'orange': '#ff8844',
+      'purple': '#8844ff',
+      'pink': '#ff44ff',
+      'cyan': '#44ffff',
+      'brown': '#8b4513',
+      'gray': '#888888',
+      'grey': '#888888',
+      'black': '#333333',
+      'white': '#ffffff',
+      'teal': '#008080',
+      'navy': '#000080',
+      'lime': '#00ff00',
+      'maroon': '#800000',
+      'olive': '#808000',
+      'silver': '#c0c0c0'
+    };
+    
+    return colorMap[color.toLowerCase()] || '#007acc';
+  }
+
+  /**
+   * Clean project name for display
+   * @param {string} projectDir - Raw project directory name
+   * @returns {string} Cleaned project name
+   */
+  cleanProjectName(projectDir) {
+    // Convert encoded project paths like "-Users-user-Projects-MyProject" to "MyProject"
+    const parts = projectDir.split('-').filter(Boolean);
+    return parts[parts.length - 1] || projectDir;
+  }
+
   /**
    * Get Claude session information from statsig files
    */
@@ -1108,6 +1708,7 @@ class ClaudeAnalytics {
     }
   }
 
+
   stop() {
     // Stop file watchers
     this.fileWatcher.stop();
@@ -1123,6 +1724,11 @@ class ClaudeAnalytics {
       this.notificationManager.shutdown();
     }
     
+    // Shutdown console bridge
+    if (this.consoleBridge) {
+      this.consoleBridge.shutdown();
+    }
+    
     if (this.httpServer) {
       this.httpServer.close();
     }
@@ -1140,7 +1746,14 @@ class ClaudeAnalytics {
 }
 
 async function runAnalytics(options = {}) {
-  console.log(chalk.blue('📊 Starting Claude Code Analytics Dashboard...'));
+  // Determine if we're opening to a specific page
+  const openTo = options.openTo;
+  
+  if (openTo === 'agents') {
+    console.log(chalk.blue('💬 Starting Claude Code Chats Dashboard...'));
+  } else {
+    console.log(chalk.blue('📊 Starting Claude Code Analytics Dashboard...'));
+  }
 
   const analytics = new ClaudeAnalytics();
 
@@ -1151,9 +1764,15 @@ async function runAnalytics(options = {}) {
     // Web dashboard files are now static in analytics-web directory
 
     await analytics.startServer();
-    await analytics.openBrowser();
-
-    console.log(chalk.green('✅ Analytics dashboard is running!'));
+    await analytics.openBrowser(openTo);
+
+    if (openTo === 'agents') {
+      console.log(chalk.green('✅ Claude Code Chats dashboard is running!'));
+      console.log(chalk.cyan(`📱 Access at: http://localhost:${analytics.port}/#agents`));
+    } else {
+      console.log(chalk.green('✅ Analytics dashboard is running!'));
+      console.log(chalk.cyan(`📱 Access at: http://localhost:${analytics.port}`));
+    }
     console.log(chalk.gray('Press Ctrl+C to stop the server'));
 
     // Handle graceful shutdown
@@ -1173,6 +1792,14 @@ async function runAnalytics(options = {}) {
 }
 
 
+// If this file is executed directly, run analytics
+if (require.main === module) {
+  runAnalytics().catch(error => {
+    console.error(chalk.red('❌ Analytics startup failed:'), error);
+    process.exit(1);
+  });
+}
+
 module.exports = {
   runAnalytics
 };